/* The image tutorial carousel: a quiet modal over the game. The visible
   Next/Skip buttons are baked into the slide images; these are the real,
   transparent hit areas riding exactly on them (positions come from
   images/motor-ui/tutorial-manifest.json). */

.motor-tutorial { position: fixed; inset: 0; z-index: 10050; }
.motor-tutorial[hidden] { display: none; }
.motor-tutorial__backdrop { position: absolute; inset: 0; background: rgba(9, 20, 26, 0.72); }
.motor-tutorial__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* An absolutely positioned box at left: 50% shrink-wraps to the half of the
     screen right of centre unless it is given a width, so the slide showed at
     half size (29.9.2026). The width is the same promise as the limits below:
     the widest 16:9 slide that fits 96vw, 1366 px and 90vh. */
  width: min(96vw, 1366px, calc(90vh * 16 / 9));
  max-width: min(96vw, 1366px);
  max-height: 90vh;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.motor-tutorial__img { display: block; width: 100%; height: auto; user-select: none; }
.motor-tutorial__hit {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: transparent;
  font-size: 1px;
  overflow: hidden;
  border-radius: 15px;
}
/* Owner 23.10.2026: no ring that sits on Next. The module moves focus to
   Next on every slide, which drew a ring that stayed; it now shows only
   while the student uses the keyboard. A click gives one short glow
   instead, so the press is seen even while the next slide loads. */
.motor-tutorial__hit:focus-visible { outline: none; }
.motor-tutorial[data-motor-tutorial-keys] .motor-tutorial__hit:focus-visible { outline: 3px solid #14b8a6; outline-offset: 2px; }
.motor-tutorial__hit.is-pressed { animation: motor-tutorial-press 0.45s ease-out; }
@keyframes motor-tutorial-press {
  0% { box-shadow: 0 0 0 0 rgba(36, 198, 191, 0.9), inset 0 0 0 999px rgba(255, 255, 255, 0.22); }
  100% { box-shadow: 0 0 0 16px rgba(36, 198, 191, 0), inset 0 0 0 999px rgba(255, 255, 255, 0); }
}

/* R33 (owner 18.10.2026): the first slide is the student's role, drawn in
   HTML over the preloaded first PNG so the frame keeps the slide geometry.
   Every length is in 800x450 slide pixels times --motor-tutorial-scale,
   which the module sets from the displayed image width, like the hits.
   Vic's bubble runs across the top so the four lines fit above the button
   row (the baked Next sits at y 145 on every PNG slide and the intro's Next
   is placed on the same rect); the role title is below it, Vic on the right. */
.motor-tutorial__frame { --motor-tutorial-scale: 1; }
.motor-tutorial__intro {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #fff;
  background: radial-gradient(circle at 18% 85%, #114050 0, #092939 50%, #061b26 100%);
}
.motor-tutorial__intro[hidden] { display: none; }
.motor-tutorial__intro-bubble {
  position: absolute;
  left: calc(36px * var(--motor-tutorial-scale));
  top: calc(22px * var(--motor-tutorial-scale));
  width: calc(729px * var(--motor-tutorial-scale));
  height: calc(160px * var(--motor-tutorial-scale));
  box-sizing: border-box;
  padding: calc(13px * var(--motor-tutorial-scale)) calc(20px * var(--motor-tutorial-scale));
  border: calc(3px * var(--motor-tutorial-scale)) solid #24c6bf;
  border-radius: calc(14px * var(--motor-tutorial-scale));
  background: #092939;
  box-shadow: 0 calc(10px * var(--motor-tutorial-scale)) calc(30px * var(--motor-tutorial-scale)) rgba(0, 0, 0, 0.45);
}
/* The separator: at 97px, as drawn on the slides, while the text is short;
   below the last line when the text is longer (live find 27.10.2026). The
   bubble's content box ends 43px under it. */
.motor-tutorial__intro-bubble {
  display: flex;
  flex-direction: column;
}
.motor-tutorial__intro-rule {
  flex: none;
  height: 1px;
  margin-top: auto;
  margin-bottom: calc(43px * var(--motor-tutorial-scale));
  background: rgba(255, 255, 255, 0.35);
}
.motor-tutorial__intro-bubble p:nth-last-child(2) {
  margin-bottom: calc(6px * var(--motor-tutorial-scale));
}
.motor-tutorial__intro-bubble::before {
  content: '';
  position: absolute;
  right: calc(84px * var(--motor-tutorial-scale));
  bottom: calc(-13px * var(--motor-tutorial-scale));
  width: calc(22px * var(--motor-tutorial-scale));
  height: calc(22px * var(--motor-tutorial-scale));
  transform: rotate(45deg);
  background: #092939;
  border-right: calc(3px * var(--motor-tutorial-scale)) solid #24c6bf;
  border-bottom: calc(3px * var(--motor-tutorial-scale)) solid #24c6bf;
}
.motor-tutorial__intro-bubble p {
  margin: 0;
  font-size: calc(12px * var(--motor-tutorial-scale));
  line-height: 1.45;
  white-space: nowrap;
}
.motor-tutorial__intro-bubble p:first-child {
  margin-bottom: calc(4px * var(--motor-tutorial-scale));
  font-size: calc(13.5px * var(--motor-tutorial-scale));
  font-weight: 700;
}
.motor-tutorial__intro-side {
  position: absolute;
  left: calc(40px * var(--motor-tutorial-scale));
  top: calc(222px * var(--motor-tutorial-scale));
  width: calc(430px * var(--motor-tutorial-scale));
}
.motor-tutorial__intro-eyebrow {
  font-size: calc(11px * var(--motor-tutorial-scale));
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #24c6bf;
}
.motor-tutorial__intro-title {
  margin-top: calc(8px * var(--motor-tutorial-scale));
  font-size: calc(30px * var(--motor-tutorial-scale));
  font-weight: 800;
  line-height: 1.12;
}
.motor-tutorial__intro-hint {
  margin-top: calc(14px * var(--motor-tutorial-scale));
  font-size: calc(12.5px * var(--motor-tutorial-scale));
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}
/* The same Vic as on the PNG slides and in the deal hints (vic-hint-point). */
.motor-tutorial__intro-mascot {
  position: absolute;
  right: calc(40px * var(--motor-tutorial-scale));
  bottom: 0;
  height: calc(240px * var(--motor-tutorial-scale));
  width: auto;
  user-select: none;
}
/* On the intro the hits are the visible buttons (nothing is baked there). */
.motor-tutorial__hit--shown {
  color: #092939;
  background: #24c6bf;
  font: inherit;
  font-size: calc(15px * var(--motor-tutorial-scale));
  font-weight: 800;
  border-radius: calc(15px * var(--motor-tutorial-scale));
}
/* A Finnish page (maa-vaihto): "Seuraava" is twice "Next", so the intro's
   button text is a size smaller to stay inside the same button. The UK
   page (lang en-GB) is untouched. */
html[lang="fi"] .motor-tutorial__hit--shown[data-motor-tutorial-next] {
  font-size: calc(11.5px * var(--motor-tutorial-scale));
}
.motor-tutorial__hit--shown[data-motor-tutorial-skip] {
  color: #fff;
  background: transparent;
  font-size: calc(13px * var(--motor-tutorial-scale));
  font-weight: 600;
  text-decoration: underline;
}
/* The baked "Skip tutorial" on the PNG slides, covered on the mandatory run
   (owner 18.10.2026) in the bubble's own colour until the slides are re-shot. */
.motor-tutorial__cover { position: absolute; background: #092939; pointer-events: none; }
.motor-tutorial__cover[hidden] { display: none; }