/* Dunk Lab, web edition. Graphite + champagne gold, matching the Unreal build's premium restyle: brand kit in
   assets/brand (9-slice pieces use border-image with the margins from assets/brand/kit/layout.json, drawn at half
   size), radio art in assets/radio. Blue is kept only for "tech" accents: the radio's LCD and the real-footage slider.
   Fonts: Saira Expanded (Saira at wdth 125) for names and labels, Inter for body text. */

:root {
  --blue: #3d8bff;
  --gold: #cbb68a;
  --gold-light: #e2cf9f;
  --graphite: #0c0e11;
  --titanium: #2b2f35;
  --satin: #8a929c;
  --text: #f4f5f7;
  --muted: #a7adb5;
  --radio-w: clamp(255px, 20.4vw, 408px); /* 85% of the old size: a corner widget */
  --dock-h: 0px;
}

* { box-sizing: border-box; }

html {
  scrollbar-gutter: stable; /* the scrollbar coming and going between screens doesn't shift the layout */
  overflow-x: clip; /* hover popups never widen the page */
}

html { background: var(--graphite); touch-action: manipulation; } /* no double-tap zoom: quick taps on keys used to zoom the page in */
html, body {
  margin: 0;
  min-height: 100%;
  /* no body background: it would paint over the fixed body::before background layer (z-index -1) */
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

body::before {
  /* fixed background layer (background-attachment: fixed is unreliable on iOS) */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--graphite) url(../assets/brand/kit/background.jpg?v=29) center / cover no-repeat;
}

button { font-family: inherit; }
/* Saira at width 125 = Saira Expanded */
.card-name, .pill, .soon, .key, .tip b, #explain b, #subtitle, #caption, .banner-station, .banner-track {
  font-family: Saira, Inter, sans-serif;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125;
}
[hidden] { display: none !important; }

#app {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px 16px 28px;
}

/* ---------- menu ---------- */

#menu { display: flex; flex-direction: column; align-items: center; width: 100%; }

.title { display: flex; flex-direction: column; align-items: center; }

/* The gold wordmark, with a slow light sweep: a highlight gradient masked to the logo's shape. */
.logo {
  position: relative;
  width: min(600px, 88vw);
  aspect-ratio: 1202 / 147;
  margin: 10px 0 0;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}
.logo img { display: block; width: 100%; height: 100%; }
.logo .sweep {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url(../assets/brand/logo_mask.png) center / 100% 100% no-repeat;
  mask: url(../assets/brand/logo_mask.png) center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 246, 222, 0.5) 50%, transparent 58%) no-repeat;
  background-size: 250% 100%;
  background-position: 150% 0;
  mix-blend-mode: screen;
  animation: sweep 7s ease-in-out 1.2s infinite;
}
@keyframes sweep {
  0% { background-position: 150% 0; }
  40%, 100% { background-position: -50% 0; } /* about 3 s across, then a pause */
}
@media (prefers-reduced-motion: reduce) {
  .logo .sweep { animation: none; display: none; }
}

.divider {
  width: min(620px, 86vw);
  height: 12px;
  margin-top: 16px;
  border-image: url(../assets/brand/kit/divider.png) 0 11 fill / 0 6px stretch;
}

#subtitle {
  margin: 16px 0 22px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-align: center;
}

.list {
  width: min(560px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.card {
  position: relative;
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 30px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 21px;
  text-align: left;
  cursor: pointer;
  border-image: url(../assets/brand/kit/card_normal.png) 40 fill / 20px stretch;
}
.card-name { font-style: italic; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.card:hover { border-image-source: url(../assets/brand/kit/card_hover.png); }
.card:active { border-image-source: url(../assets/brand/kit/card_pressed.png); }
.card:active .card-name { transform: translateY(1px); }
.card.disabled { cursor: default; }
.card.disabled .card-name { color: #737a84; }
.card.disabled:hover, .card.disabled:active { border-image-source: url(../assets/brand/kit/card_normal.png); }

.card-right { display: flex; align-items: center; gap: 10px; }

/* Difficulty chip: the brand kit's outlined pill, tinted with the difficulty colour (translucent fill, bright edge). */
.pill {
  display: inline-block;
  padding: 5px 12px;
  border: 1.5px solid var(--pill);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pill) 20%, rgba(12, 14, 17, 0.55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 8px color-mix(in srgb, var(--pill) 22%, transparent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.soon { color: #6f7680; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; }

/* hover popup on the takeoff cards */
.tip {
  position: absolute;
  left: calc(100% + 18px);
  top: 50%;
  width: 270px;
  padding: 22px 28px;
  transform: translate(-6px, -50%);
  border-image: url(../assets/brand/kit/card_hover.png) 40 fill / 16px stretch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  font-weight: 400;
}
.tip b { display: block; color: var(--gold); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; }
.tip span { display: block; margin-top: 7px; color: #ccd0d6; font: 400 14px/1.4 Inter, sans-serif; }
.card:hover .tip { opacity: 1; transform: translate(0, -50%); }
.card:hover { z-index: 2; }
.tip[data-side="left"] { left: auto; right: calc(100% + 18px); transform: translate(6px, -50%); }
.card:hover .tip[data-side="left"] { transform: translate(0, -50%); }
.tip[data-side="below"] { left: 50%; top: calc(100% + 10px); transform: translate(-50%, -6px); }
.card:hover .tip[data-side="below"] { transform: translate(-50%, 0); }
.tip[data-side="above"] { left: 50%; top: auto; bottom: calc(100% + 10px); transform: translate(-50%, 6px); }
.card:hover .tip[data-side="above"] { transform: translate(-50%, 0); }

/* ---------- icons (white PNGs used as masks so CSS can colour them) ---------- */

.icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: none;
  background: var(--gold);
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.i-replay { -webkit-mask-image: url(../assets/ui/icon_replay.png); mask-image: url(../assets/ui/icon_replay.png); }
.i-pause { -webkit-mask-image: url(../assets/ui/icon_pause.png); mask-image: url(../assets/ui/icon_pause.png); }
.i-play { -webkit-mask-image: url(../assets/ui/icon_play.png); mask-image: url(../assets/ui/icon_play.png); }
.i-view { -webkit-mask-image: url(../assets/ui/icon_view.png); mask-image: url(../assets/ui/icon_view.png); width: 17px; }
.i-slow { -webkit-mask-image: url(../assets/ui/icon_play.png); mask-image: url(../assets/ui/icon_play.png); transform: scaleX(0.75); }
#key-slow.on { color: var(--gold-light); }
#key-slow.on .icon { background: var(--gold-light); }
#details-hint { display: none; } /* phone player only */

#explain em { display: block; margin-top: 8px; color: var(--gold-light); font: normal 500 13px/1.45 Inter, sans-serif; }
.i-back { -webkit-mask-image: url(../assets/ui/icon_back.png); mask-image: url(../assets/ui/icon_back.png); }
.i-chevron { width: 18px; height: 18px; background: var(--gold); -webkit-mask-image: url(../assets/ui/icon_chevron.png); mask-image: url(../assets/ui/icon_chevron.png); }

/* ---------- chrome keys ---------- */

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 14px 22px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
  cursor: pointer;
  border-image: url(../assets/brand/kit/key_normal.png) 24 fill / 12px stretch;
}
.key:hover { border-image-source: url(../assets/brand/kit/key_hover.png); }
.key:active { border-image-source: url(../assets/brand/kit/key_pressed.png); padding-top: 15px; padding-bottom: 13px; }

.back-key { width: 250px; margin-top: 10px; font-weight: 500; letter-spacing: 0.12em; }
.controls .key { min-width: 0; padding-left: 14px; padding-right: 14px; } /* clear of the 12 px chrome rim */
/* Narrower key rows: drop "VIEW:" and tighten the lettering so every label stays off the rim. */
@container (max-width: 1060px) {
  .controls .vp { display: none; }
  .controls .key { font-size: 12px; letter-spacing: 0.06em; gap: 7px; }
}
@container (max-width: 920px) {
  .controls .key { font-size: 11px; letter-spacing: 0.04em; gap: 6px; }
}
@container (max-width: 760px) {
  .controls .long { display: none; }
  .controls .short { display: inline; }
}


/* ---------- player ---------- */

#player { display: flex; flex-direction: column; align-items: center; width: 100%; }

#caption { margin: 0 0 12px; color: var(--gold); font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-align: center; }

#frame {
  position: relative;
  padding: 37px 28px; /* the bezel opening at half size */
  max-width: 100%;
}
.stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* video stays centred, explanation sits to its right */
  align-items: center;
  width: 100%;
}
.stage #frame { grid-column: 2; }
/* Rounded like the bezel's opening (radius ~20 px of the 888 px opening, i.e. 10 px at half size), so no layer
   (video, FX canvas, real footage) pokes past the gold hairline at the corners. */
.screen { position: relative; border-radius: 10px; overflow: hidden; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#explain { /* a subtle detail tab against the video's right edge, vertically centred */
  grid-column: 3;
  justify-self: start;
  align-self: center;
  width: 220px;
  margin-left: 14px;
  padding: 14px 18px;
  border-image: url(../assets/brand/kit/card_normal.png) 40 fill / 12px stretch;
  opacity: 0.9;
}
#explain b { display: block; color: var(--gold); font-size: 9px; font-weight: 600; letter-spacing: 0.12em; }
#explain span { display: block; margin-top: 6px; color: #ccd0d6; font: 400 13px/1.45 Inter, sans-serif; }

#frame #video {
  --video-h: calc(100dvh - var(--dock-h) - 230px);
  display: block;
  /* fixed shape from the start: 9:16 until the clip's own ratio (--ar) is known */
  height: max(160px, min(1280px, var(--video-h)));
  width: auto;
  aspect-ratio: var(--ar, 9 / 16);
  max-width: min(86vw, 960px);
  object-fit: contain;
  background: #000;
  opacity: 0;
  transition: opacity 0.2s;
}
#frame.ready #video { opacity: 1; }
#frame .bezel {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-image: url(../assets/brand/kit/screen_bezel.png) 94 76 / 47px 38px stretch; /* opening at half size = #frame padding */
}
#status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 40px;
  color: var(--muted);
  text-align: center;
}

.controls {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)); /* equal widths: labels never resize the row */
  gap: 12px;
  width: min(1120px, 94vw);
  container-type: inline-size;
  margin-top: 14px;
}

#key-pause .i-play, #key-pause .l-play { display: none; }
#key-pause.paused .i-play, #key-pause.paused .l-play { display: inline-block; }
#key-pause.paused .i-pause, #key-pause.paused .l-pause { display: none; }

/* ---------- radio ---------- */

#radio-dock {
  position: fixed;
  left: 24px;
  top: 24px; /* desktop: top-left corner, clear of the content and the keys */
  width: var(--radio-w);
  display: flex;
  flex-direction: column-reverse; /* station banner below the faceplate */
  z-index: 10;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
}

.banner {
  text-align: center;
  margin-top: 1.5cqw;
  opacity: 0;
  pointer-events: none;
}
.banner.show { animation: banner 3.2s ease forwards; }
@keyframes banner {
  0% { opacity: 0; transform: translateY(14px); }
  9% { opacity: 1; transform: translateY(0); }
  75% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
.banner-station {
  font-size: 6.5cqw;
  font-style: italic;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: var(--text);
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.9);
}
.banner-track { color: var(--gold); font-size: 2.4cqw; font-weight: 500; letter-spacing: 0.16em; text-shadow: 0 2px 6px #000; }

.radio {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 640;
  container-type: inline-size;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
}
.radio > * { position: absolute; }
.radio-face { inset: 0; width: 100%; height: 100%; }
.glass { pointer-events: none; }

.radio-display {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 2.2cqw;
  overflow: hidden;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  text-shadow: 0 0 1.2cqw rgba(61, 139, 255, 0.55);
  transition: opacity 0.3s;
}
.radio-info { display: flex; justify-content: space-between; color: #3769b8; font-size: 1.9cqw; letter-spacing: 0.15em; }
.radio-station { color: #79b6ff; font-size: 4.6cqw; line-height: 1.15; letter-spacing: 0.08em; white-space: nowrap; }
.radio-track { overflow: hidden; white-space: nowrap; color: #4c86dd; font-size: 2.2cqw; letter-spacing: 0.12em; }
.radio-track span { display: inline-block; }
.radio-track span.scroll { animation: marquee 9s linear infinite; }
@keyframes marquee {
  0%, 15% { transform: translateX(0); }
  85%, 100% { transform: translateX(var(--over)); }
}

.radio-dial { overflow: hidden; font-family: "Share Tech Mono", ui-monospace, monospace; }
.radio-dial .tick { position: absolute; bottom: 14%; width: 1px; height: 20%; background: #2b5aa3; }
.radio-dial .tick.major { height: 34%; background: #3f73c4; }
.radio-dial b { position: absolute; top: 4%; transform: translateX(-50%); color: #3b6cbc; font-size: 1.35cqw; font-weight: 400; }
.radio-dial .needle {
  position: absolute;
  top: 6%;
  bottom: 6%;
  width: 0.35cqw;
  transform: translateX(-50%);
  background: #b6dcff;
  box-shadow: 0 0 1cqw #3d8bff, 0 0 2.4cqw rgba(61, 139, 255, 0.6);
  transition: opacity 0.3s;
}

.knob { touch-action: none; cursor: ns-resize; }
.knob + .knob { cursor: pointer; }
.knob img { display: block; width: 100%; height: 100%; pointer-events: none; }
.knob .pointer { position: absolute; inset: 0; pointer-events: none; transition: transform 0.08s; }
.knob .pointer::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 17%;
  width: 0.75cqw;
  height: 13%;
  transform: translateX(-50%);
  border-radius: 1cqw;
  background: var(--gold-light);
  box-shadow: 0 0 0.6cqw rgba(203, 182, 138, 0.6);
}

.rkey {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: url(../assets/radio/key_normal.png?v=22) center / 100% 100% no-repeat;
  color: rgba(225, 235, 255, 0.45);
  font: 700 2.3cqw Roboto, sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  cursor: pointer;
}
.rkey::after { content: ""; position: absolute; inset: -40% -8%; } /* larger hit area than the drawn key */
.rkey:active { background-image: url(../assets/radio/key_pressed.png?v=22); }
.rkey:active span { transform: translateY(1px); }
.rkey.small { background-image: url(../assets/radio/small_key_normal.png?v=22); color: #cdd6e4; font-size: 2.4cqw; }
.rkey.small:active { background-image: url(../assets/radio/small_key_pressed.png?v=22); }
.rkey.preset.active { color: #f4f8ff; }
.rkey.power span { font-size: 1.2cqw; letter-spacing: 0; }
.rkey .led {
  width: 0.9cqw;
  height: 0.9cqw;
  margin-right: 0.5cqw;
  border-radius: 50%;
  background: #3d8bff;
  box-shadow: 0 0 0.8cqw #3d8bff;
  transition: opacity 0.3s;
}
.radio.off .radio-display { opacity: 0.06; }
.radio.off .needle, .radio.off .led { opacity: 0.15; }

/* Narrow windows (no room beside the video): the explanation moves under the keys. */
@media (max-width: 1099px) {
  #player { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .stage { display: contents; }
  .stage #frame, #explain { grid-column: 1; }
  #caption { order: 0; }
  #frame { order: 1; }
  .controls { order: 2; }
  #explain { order: 3; width: min(560px, 94vw); margin: 12px 0 0; padding: 16px 24px; text-align: center; }
  #frame #video { --video-h: calc(100dvh - var(--dock-h) - 300px); }
}

/* Mid-size desktop windows: the radio sits in the top-left corner above the content, so the content stays centred
   (like the game); only the key row is kept narrower than the window. */
@media (min-width: 900px) and (max-width: 1900px) {
  .controls { width: min(1120px, calc(100vw - var(--radio-w) - 96px)); }
}
/* Narrow desktop windows (key row under ~640 px beside the radio): 3 + 2 keys instead of squeezed labels. */
@media (min-width: 900px) and (max-width: 1060px) {
  .controls { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .controls .key { grid-column: span 2; }
  .controls .key:nth-child(4) { grid-column: 2 / span 2; }
}

.short { display: none; }

/* ---------- phones and narrow windows: radio docks at the bottom centre ---------- */

@media (max-width: 1100px), (max-height: 620px) {
  .tip { display: none; }
}

@media (max-width: 899px) {
  :root { --radio-w: min(calc(100% - 16px), 460px); }
  #app { padding: 18px 10px calc(var(--dock-h) + 18px); place-items: start center; }
  #radio-dock { left: 50%; top: auto; transform: translateX(-50%); bottom: max(8px, env(safe-area-inset-bottom)); flex-direction: column; }
  .banner { margin: 0 0 1.5cqw; }
  .card { font-size: 18px; min-height: 56px; padding: 12px 24px; }
  #subtitle { font-size: 11px; margin: 14px 0 16px; letter-spacing: 0.14em; }
  .key { font-size: 11px; letter-spacing: 0.06em; padding: 12px 10px; gap: 6px; }
  .controls { gap: 8px; grid-template-columns: repeat(2, 1fr); }
  #key-slow { grid-column: span 2; }
  #explain span { font-size: 13px; }
  .long { display: none; }
  .short { display: inline; }
  #frame { padding: 27px 20px; }
  #frame .bezel { border-image-width: 34px 28px; }
  .screen { border-radius: 7px; }
  #frame #video { --video-h: calc(100dvh - var(--dock-h) - 330px); }

  /* Phone player: the video fills the screen edge to edge (as large as fits without cropping),
     with the clip name over its top and the keys in one row over its bottom. The explanation and
     radio sit below it (scroll down; music keeps playing). --ar is set from the clip's size. */
  body.playing #app { padding: 0; place-items: start center; }
  body.playing #radio-dock { position: static; transform: none; margin: 28px auto calc(16px + env(safe-area-inset-bottom)); }
  body.playing #player { display: grid; grid-template-columns: 100%; grid-template-rows: auto auto; }
  body.playing #caption, body.playing #frame, body.playing .controls { grid-area: 1 / 1; }
  body.playing #frame { justify-self: stretch; padding: 0; }
  body.playing #frame .bezel { display: none; }
  body.playing .screen { width: min(100%, calc(100dvh * var(--ar, 0.5625))); aspect-ratio: var(--ar, 0.5625); margin: 0 auto; border-radius: 0; } /* no bezel here */
  body.playing #frame #video { width: 100%; height: 100%; max-width: none; max-height: none; min-height: 0; }
  body.playing #caption {
    align-self: start;
    z-index: 2;
    margin: 0;
    padding: 12px 10px 18px;
    width: 100%;
    font-size: 10px;
    letter-spacing: 0.16em;
    background: linear-gradient(rgba(0, 0, 0, 0.55), transparent);
    pointer-events: none;
  }
  body.playing .controls {
    align-self: end;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: 18px 8px calc(10px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  }
  body.playing .key { min-height: 40px; padding: 8px 2px; font-size: 9px; letter-spacing: 0.02em; gap: 4px; }
  body.playing .key .icon { width: 12px; height: 12px; }
  body.playing .vp, body.playing #key-view .icon, body.playing #key-slow .icon { display: none; }
  body.playing #key-slow { grid-column: auto; }
  /* Replay and pause/play: round icon-only buttons floating above the row (everyone reads those symbols), so the
     remaining three keys get the width for readable labels. Rows: icons, DETAILS BELOW, keys. */
  body.playing .controls { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 6px; }
  body.playing #key-replay, body.playing #key-pause {
    grid-row: 1;
    justify-self: center;
    width: 52px;
    height: 52px;
    min-height: 0;
    padding: 0;
    border: 1px solid rgba(203, 182, 138, 0.55);
    border-image: none;
    border-image-source: none !important;
    border-radius: 50%;
    background: rgba(12, 14, 17, 0.6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
    font-size: 0; /* icon only */
    -webkit-text-stroke: 0;
  }
  body.playing #key-replay { grid-column: 3; }
  body.playing #key-pause { grid-column: 4; }
  body.playing #key-replay .icon, body.playing #key-pause .icon { width: 22px; height: 22px; }
  body.playing #key-replay:active, body.playing #key-pause:active { border-color: var(--gold); background: rgba(203, 182, 138, 0.18); }
  body.playing #details-hint:not([hidden]) { grid-row: 2; }
  body.playing #key-view, body.playing #key-slow, body.playing #key-back { grid-row: 3; font-size: 11px; letter-spacing: 0.06em; min-height: 44px; }
  body.playing #key-view { grid-column: 1 / span 2; }
  body.playing #key-slow { grid-column: 3 / span 2; }
  body.playing #key-back { grid-column: 5 / span 2; }
  body.playing #details-hint:not([hidden]) {
    display: flex;
    grid-column: 1 / -1;
    justify-self: center;
    align-items: center;
    gap: 6px;
    margin: 0 0 4px;
    padding: 4px 10px;
    border: 0;
    background: none;
    color: var(--gold-light);
    font: 600 9px/1 Saira, sans-serif;
    font-stretch: 125%;
    letter-spacing: 0.18em;
    opacity: 0.85;
    transition: opacity 0.3s;
  }
  body.playing #details-hint i { /* small down chevron */
    width: 6px;
    height: 6px;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: translateY(-2px) rotate(45deg);
  }
  body.playing #details-hint.gone { opacity: 0; pointer-events: none; }
  body.playing #explain { grid-area: 2 / 1; justify-self: center; margin-top: 14px; }
}

@media (hover: none) {
  .card:hover { border-image-source: url(../assets/brand/kit/card_normal.png); }
  .key:hover { border-image-source: url(../assets/brand/kit/key_normal.png); }
}

/* ---------- black outline on white text ---------- */
/* The stroke is drawn behind the fill (paint-order), so only its outer half shows: about 0.06em, which scales with
   each text size like the Unreal build's outlines (size / 16 px). */
.card-name, .pill, .key, .tip span, #explain span, .banner-station, .rkey {
  -webkit-text-stroke: 0.12em #000;
  paint-order: stroke fill;
}
.card.disabled .card-name { -webkit-text-stroke: 0; }

/* Optical centring: trim each label's line box to the capital letters so flexbox centres the caps, not the
   ascender/descender box (which sits the text high). Browsers without text-box support ignore this. */
.card-name, .key > span, .pill, .tip b {
  text-box: trim-both cap alphabetic;
}

/* ---------- real footage: a wipe over the current view ---------- */
/* #real plays in sync with the line-art clip; --split (0-100%) is how much of it shows, from the left. */
#real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  clip-path: inset(0 calc(100% - var(--split, 0%)) 0 0);
}
#split {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(18px, var(--split, 0%), calc(100% - 18px));
  width: 36px;
  transform: translateX(-50%);
  cursor: ew-resize;
  touch-action: none;
  z-index: 3;
}
#split::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #8cb8ff;
  box-shadow: 0 0 6px #3d8bff, 0 0 1px #000;
  opacity: var(--split-line, 1);
}
#split i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid #3d8bff;
  background: #0b1a33 radial-gradient(circle, #16305c, #0b1a33);
  box-shadow: 0 0 10px rgba(61, 139, 255, 0.7), 0 2px 6px rgba(0, 0, 0, 0.8);
}
#split i::before, #split i::after { /* two small arrows: < > */
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border: solid #e1e9ff;
  border-width: 0 0 2px 2px;
}
#split i::before { left: 6px; transform: translateY(-50%) rotate(45deg); }
#split i::after { right: 6px; transform: translateY(-50%) rotate(-135deg); }
#split:hover i, #split.dragging i { border-color: #8cb8ff; }

/* Beside the video, left: points at the slider knob when the clip has real footage. */
#slide-hint {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin: 0 14px 0 0;
  color: #6b7480;
  font: 400 12px/1.45 Inter, sans-serif;
  text-align: right;
}
@media (max-width: 1099px) {
  #slide-hint { display: none !important; }
}

/* iOS data detectors (if any slip through): never style radio/station text as links */
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font: inherit !important; }