/* Scene 6 · The 3D game (desktop)
   The ride3d iframe, full viewport. Same layer and fade as the outro card:
   above the video hero, under the hero chat (950), the scene lines
   (1100), the corner nav (1015) and the bottom chrome, so the logo, menu,
   audio line and sound button stay on top of the game. js/game3d.js
   toggles .is-visible under the closed eyelids.
   Hidden with visibility, never display:none - the game loads in the
   background before the visitor gets here and needs its real size. */

.scene-game {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 500ms cubic-bezier(0.65, 0.02, 0.24, 1),
              visibility 0s linear 500ms;
}
.scene-game.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 500ms cubic-bezier(0.65, 0.02, 0.24, 1),
              visibility 0s linear 0s;
}

.scene-game__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* The entry screen ("YOUR TURN", the sub headline, the two key hints and
   "Give me the keys"), drawn by the site over the game so it's there the
   instant scene 6 opens (Arun 2026-09-29). A copy of the game's own .entry
   styles (3d/game3d/src/style.css), which the game now hides when embedded.
   Faded out when the rider gets in (js/game3d.js). */
.scene-game__intro {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: opacity 0.6s ease, visibility 0s;
}
.scene-game__intro.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.scene-game__inner { text-align: center; padding: 0 24px; max-width: 640px; }
.scene-game__title { margin: 0 0 20px; }
.scene-game__title img { display: block; margin: 0 auto; width: clamp(183px, 19.64vw, 267px); height: auto; }
.scene-game__sub { margin: 0 0 28px; font-size: 18px; font-weight: 700; line-height: 1.5; color: #fff; }
.scene-game__hints {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 14px 40px;
  margin: 0 auto 30px;
}
.scene-game__hint {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: flex-end;
  gap: 12px;
  white-space: nowrap;
}
.scene-game__keys { flex: none; width: 60px; height: auto; opacity: 0.75; }
.scene-game__hint span { padding-bottom: 3px; }
/* "Give me the keys": the "I'm in" loader while the game loads */
.scene-game__btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 14px 30px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: #0b0b0b;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.scene-game__btn:not(:disabled):hover { background: #e9e9e9; }
.scene-game__btn:disabled { background: #3a3a3a; color: rgba(255, 255, 255, 0.85); cursor: wait; }
.scene-game__btn:disabled::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--load-progress, 0%);
  background: #fff;
  border-radius: 999px;
  transition: width 250ms ease-out;
}
.scene-game__btn:disabled .scene-game__btn-label,
.scene-game__btn:disabled .scene-game__btn-pct { position: relative; z-index: 1; mix-blend-mode: difference; }
.scene-game__btn-pct { flex-shrink: 0; font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: right; }
.scene-game__btn:disabled .scene-game__btn-label--ready,
.scene-game__btn:not(:disabled) .scene-game__btn-label--loading,
.scene-game__btn:not(:disabled) .scene-game__btn-pct { display: none; }

/* Night mode is off on the game scene (it has its own time of day): the
   button stays in place, dimmed to 30% and not clickable (Arun
   2026-09-29). The sound button is untouched. Same sibling hook the
   outro uses. */
.hero[data-scene="game"] ~ .night-toggle {
  opacity: 0.3;
  pointer-events: none;
  cursor: default;
}

/* ---------- The control bar (Arun 2026-09-29) ----------
   Bottom-right on the audio line, once the visitor is on the bike
   (body.is-game3d-playing, js/game3d.js). It takes over from the sound and
   night buttons there: its own music button works the site's mute, and
   the day / night pair with the slider sets the game's time of day. The
   night end sits exactly where the moon button always is (right: 60px);
   buttons are the same 22 px line icons on the same baseline. The music
   button comes first, right at the end of the audio line, which shortens
   to stop 12 px before it (--game-bar-w, measured in JS; Arun).
   Even spacing (Arun): every icon's viewBox is cropped to its drawing, and
   every button is that drawing plus 8 px each side with a 2 px gap, so
   there are 18 px between any two icons (and between the sun / moon and
   the slider's line), whatever the icon's width.
   Toggles that are on (autopilot, snow, rain, horn while held) get a soft
   round backing; snow and rain are dimmed where the place has none. Each
   button's name shows above it on hover. */
.game-bar {
  position: fixed;
  right: 60px;
  bottom: 35px;
  z-index: 1015;                     /* same as the toggles it replaces */
  display: flex;
  align-items: center;
  gap: 2px;
  height: 38px;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 400ms ease, visibility 0s linear 400ms;
}
body.is-game3d-playing:not(.is-outro-open) .game-bar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 400ms ease, visibility 0s linear 0s;
}
body.is-game3d-playing .night-toggle,
body.is-game3d-playing .sound-toggle {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}
@media (min-width: 768px) {
  html.is-home-page body.is-game3d-playing .hero__chrome {
    right: calc(var(--game-bar-w, 560px) + 72px);   /* 60 edge + the bar + 12 air: the music button hugs the line */
  }
}
@media (max-width: 767px) { .game-bar { display: none; } }

.game-bar__group {
  display: flex;
  align-items: center;
  gap: 2px;                          /* same as between groups: one even rhythm */
}
.game-bar__btn {
  position: relative;
  height: 38px;
  padding: 0 8px;                    /* width = the icon's drawing + 16 */
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  transition: opacity 200ms ease;
}
.game-bar__btn svg {
  grid-area: 1 / 1;
  width: auto;                       /* from the cropped viewBox */
  height: 22px;
  position: relative;
  z-index: 1;
  transition: opacity 300ms ease;
}
/* on: a soft round backing behind the icon (out of the layout, so it
   doesn't widen the button) */
.game-bar__btn::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 200ms ease, transform 200ms ease;
}
.game-bar__btn[aria-pressed="true"]::before,
.game-bar__btn.is-held::before { opacity: 1; transform: scale(1); }
.game-bar__btn:hover { opacity: 0.8; }
.game-bar__btn:focus { outline: none; }
.game-bar__btn:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; border-radius: 999px; }
.game-bar__btn:disabled { opacity: 0.3; pointer-events: none; cursor: default; }
/* the name above each button on hover */
.game-bar__btn::after {
  content: attr(data-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.game-bar__btn:hover::after { opacity: 1; transform: translate(-50%, 0); }
/* the right-most names hang left so they stay on screen */
.game-bar__group--time .game-bar__btn:last-child::after { left: auto; right: 0; transform: translate(0, 4px); }
.game-bar__group--time .game-bar__btn:last-child:hover::after { transform: translate(0, 0); }

/* music: the site's mute (body.is-muted, js/audio-rule.js) */
.game-bar__music-off { opacity: 0; }
body.is-muted .game-bar__music-on { opacity: 0; }
body.is-muted .game-bar__music-off { opacity: 1; }

/* time of day: a thin line with a round handle, day on the left, night on the right */
.game-bar__time {
  -webkit-appearance: none;
          appearance: none;
  width: 96px;
  height: 38px;
  margin: 0 8px;                     /* 8 + 2 + the sun's / moon's 8 = 18, like the icons */
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.game-bar__time:focus { outline: none; }
.game-bar__time::-webkit-slider-runnable-track {
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
  border: 0;
}
.game-bar__time::-moz-range-track {
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
  border: 0;
}
.game-bar__time::-webkit-slider-thumb {
  -webkit-appearance: none;
          appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -5.5px;                /* centre on the 1 px track */
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0);
  transition: box-shadow 200ms ease;
}
.game-bar__time::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.game-bar__time:hover::-webkit-slider-thumb,
.game-bar__time:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2); }

/* Safari: it can draw the game's 3D (WebGL) iframe over page pieces that
   don't have their own drawing layer, even when they're above it. Give
   the site chrome its own layers there (Arun 2026-09-29). Each of these is
   already its own stacking group, so nothing else about them changes. */
.is-safari .hero__chrome,
.is-safari .home-corner-nav,
.is-safari .night-toggle,
.is-safari .sound-toggle,
.is-safari .game-bar,
.is-safari .scene-indicator,
.is-safari .hero-chat {
  will-change: transform;
}