/* 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;
}
.motor-tutorial__hit:focus-visible { outline: 3px solid #14b8a6; outline-offset: 2px; }