/* ==========================================================================
   KDR Racing Game — landing page styles
   Palette matches the approved design comp (input-docs/KDR Racing Game Landing.dc.html)
   ========================================================================== */

:root {
  --bg:          #0A0F1E;   /* page background            */
  --bg-alt:      #0C1223;   /* alternating section band   */
  --card:        #0A1020;   /* card surface               */
  --card-hi:     #0E1628;   /* card hover                 */
  --line:        #1B2942;   /* borders / hairlines        */
  --line-soft:   #142034;
  --text:        #FFFFFF;
  --muted:       #8A9BB5;
  --dim:         #5C6E88;
  --accent:      #FFD100;   /* KDR yellow                 */
  --blue:        #004B8D;   /* Kanoo blue                 */
  --blue-bright: #0062B8;
  --gold:        #F5A623;
  --silver:      #C0C8D4;
  --bronze:      #CD7F32;
  --live:        #22C55E;

  --font-display: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-arabic:  'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  --nav-h: 70px;
  --pad-x: clamp(20px, 5vw, 48px);
  --section-y: clamp(72px, 9vw, 118px);   /* a section's own vertical padding */
  --block-y: clamp(38px, 6vw, 58px);      /* a band sitting between sections   */
  --maxw: 1240px;
  --bevel: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #fff; }
button { font: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; }
.narrow { max-width: 1000px; margin: 0 auto; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: #0A0F1E; padding: 10px 18px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; transition: top .18s ease;
}
.skip-link:focus { top: 12px; color: #0A0F1E; }

/* GTM's noscript frame. A class, not style="display:none" - style-src has no
   'unsafe-inline' either, so the attribute would simply be dropped. */
.gtm-noscript { display: none; visibility: hidden; width: 0; height: 0; border: 0; }

/* ---------- shared section furniture ---------------------------------- */

.section { padding: var(--section-y) var(--pad-x); }
.section--band {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

h1, h2, h3 { font-family: var(--font-display); text-transform: uppercase; margin: 0; }

.h2 {
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0 0 18px;
}

.lede {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 58ch;
  margin: 0 0 clamp(38px, 5vw, 60px);
  text-wrap: pretty;
}
.lede--tight { margin-bottom: 32px; }
.lede--snug  { margin-bottom: clamp(28px, 3.4vw, 44px); }

.u-right { text-align: right; }

/* ---------- buttons ---------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 32px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  clip-path: var(--bevel);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--accent); color: #0A0F1E; }
.btn--primary:hover, .btn--primary:focus-visible { background: #fff; color: #0A0F1E; }
.btn--ghost {
  background: transparent; color: #fff;
  border: 1px solid #2A3B57;
  clip-path: var(--bevel);
}
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--muted); background: rgba(255,255,255,.06); color: #fff; }
/* KDR blue. Sits beside the yellow Race Now as the second call to action. */
.btn--blue { background: #014587; color: #fff; }
.btn--blue:hover,
.btn--blue:focus-visible { background: #0062B8; color: #fff; }

.btn--sm { padding: 12px 24px; font-size: 14px; }
.btn[disabled] { opacity: .38; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--accent); color: #0A0F1E; }

/* ---------- nav -------------------------------------------------------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
  padding: 0 var(--pad-x);
  background: rgba(10,15,30,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease;
}
.nav.is-stuck { background: rgba(10,15,30,.94); border-bottom-color: var(--line); }

.nav__brand { display: flex; align-items: center; gap: 12px; }
.nav__logo { display: block; height: 26px; width: auto; }
.nav__brand:hover { color: #fff; }

.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.nav__links a {
  color: var(--muted);
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}
.nav__links a:hover { color: #fff; }
.nav__right { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.nav__cta { display: flex; align-items: center; gap: 8px; }

@media (max-width: 1080px) {
  .nav__links { display: none; }
}
@media (max-width: 900px) {
  .nav__logo { height: 22px; }
}
@media (max-width: 420px) {
  /* two CTAs plus the lockup is too much for a narrow phone nav */
  .nav__cta .btn { padding: 11px 14px; font-size: 12px; letter-spacing: .06em; }
  .nav__logo { height: 19px; }
}

/* ---------- hero ------------------------------------------------------- */

/* Both artworks put the KDR wordmark hard against their top edge, so the hero
   starts below the fixed nav instead of running under it - a covered logotype
   is a crop by another name. */
.hero { position: relative; background: var(--bg); padding-top: var(--nav-h); }

.hero__media { position: relative; display: block; line-height: 0; }
.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  /* Height follows the artwork's own proportion at every width - no max-height
     and no crop, so the whole banner is always visible. Pinned rather than left
     to the loaded file so the box cannot shift as the browser swaps srcset
     variants; object-fit only ever absorbs sub-pixel rounding. */
  aspect-ratio: 2000 / 850;
  object-fit: cover;
  object-position: center;
  background: #0A0F1E url("../img/hero/lqip-desktop.jpg") center/cover no-repeat;
}
/* No scrim over the key art: it carries the brand lockups, the URL and the
   "*T&C Apply" line right at its bottom edge, and its own base colour already
   matches --bg. */

.hero__actions {
  position: relative;
  margin-top: -1px;          /* closes the sub-pixel seam under the artwork */
  padding: var(--block-y) var(--pad-x);
}
/* The hero image and the nav are both full-bleed, so this row shares their
   rails rather than the 1240px content grid - capped and centred it lined up
   with nothing, and left-packing left a growing gap on the right as the screen
   widened. Chips sit under the logo, buttons under the nav CTAs. */
.hero__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between;
  gap: 14px 26px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  border-radius: 999px;
  font-size: 13px; font-weight: 500; color: #fff;
}
.chip::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}

@media (max-width: 767px) {
  .hero__media img {
    /* the phone artwork is a 1080x1920 story crop, not the banner */
    aspect-ratio: 1080 / 1920;
    background-image: url("../img/hero/lqip-mobile.jpg");
  }
  .hero__inner { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { flex: 1 1 auto; }
}

/* ---------- prizes ----------------------------------------------------- */

.prize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.prize {
  position: relative;
  padding: 38px 32px 34px;
  background: var(--card);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.prize:hover { transform: translateY(-4px); }
.prize__rank {
  display: block; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  margin-bottom: 22px;
}
.prize__amount {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 80px);
  font-weight: 700; line-height: .86;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.prize p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; max-width: 32ch; }
.prize__ghost {
  position: absolute; right: -14px; bottom: -30px;
  font-family: var(--font-display); font-size: 150px; font-weight: 700; line-height: 1;
}

.prize--1 { border-top: 3px solid var(--gold);   border-color: #2A2213; border-top-color: var(--gold);
  background: linear-gradient(160deg, rgba(245,166,35,.10) 0%, rgba(10,15,30,0) 58%), var(--card); }
.prize--1 .prize__rank, .prize--1 .prize__amount { color: var(--gold); }
.prize--1 .prize__ghost { color: rgba(245,166,35,.07); }
.prize--1:hover { border-color: var(--gold); }

.prize--2 { border-top: 3px solid var(--silver); border-color: #1E2531; border-top-color: var(--silver);
  background: linear-gradient(160deg, rgba(192,200,212,.08) 0%, rgba(10,15,30,0) 58%), var(--card); }
.prize--2 .prize__rank, .prize--2 .prize__amount { color: var(--silver); }
.prize--2 .prize__ghost { color: rgba(192,200,212,.06); }
.prize--2:hover { border-color: var(--silver); }

.prize--3 { border-top: 3px solid var(--bronze); border-color: #2A1D11; border-top-color: var(--bronze);
  background: linear-gradient(160deg, rgba(205,127,50,.10) 0%, rgba(10,15,30,0) 58%), var(--card); }
.prize--3 .prize__rank, .prize--3 .prize__amount { color: var(--bronze); }
.prize--3 .prize__ghost { color: rgba(205,127,50,.07); }
.prize--3:hover { border-color: var(--bronze); }

.raffle {
  margin-top: 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 26px;
  padding: 30px 34px;
  background: linear-gradient(100deg, rgba(255,209,0,.09), rgba(255,209,0,.02));
  border: 1px solid rgba(255,209,0,.22);
  border-left: 3px solid var(--accent);
}
.raffle__title {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  letter-spacing: .01em; text-transform: uppercase; margin: 0 0 8px;
}
.raffle p { color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0; max-width: 70ch; }
.raffle strong { color: #fff; font-weight: 500; }
.raffle__amount {
  font-family: var(--font-display); font-size: 48px; font-weight: 700; line-height: 1; color: var(--accent);
}
.raffle__label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted); margin-top: 6px;
}
.raffle__side { text-align: right; flex-shrink: 0; }

/* ---------- steps ------------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.step { background: var(--bg); padding: 34px 28px 38px; transition: background .2s ease; }
.step:hover { background: var(--card-hi); }
.step__n { font-family: var(--font-display); font-size: 62px; font-weight: 700; line-height: 1; color: #1E2D42; margin-bottom: 20px; }
.step__t { font-family: var(--font-display); font-size: 23px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 10px; }
.step p { font-size: 14px; line-height: 1.65; color: var(--muted); margin: 0; }

/* ---------- cars ------------------------------------------------------- */

.cars { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.car {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 0 0 22px;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.car:hover { transform: translateY(-4px); border-color: var(--blue-bright); }
.car::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--accent), rgba(255,209,0,0));
}

/* No fixed ratio and no object-fit crop: every shot is shown whole, at its own
   native aspect ratio (four are 16:9, the LX600 is 800x410). The width/height
   attributes on each <img> reserve the right space, so nothing shifts on load. */
.car__media {
  position: relative;
  margin-bottom: 18px;
  overflow: hidden;
  background: repeating-linear-gradient(-45deg, #101B30, #101B30 7px, #132139 7px, #132139 14px);
}
.car__media img {
  display: block; width: 100%; height: auto;
  transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}
.car:hover .car__media img { transform: scale(1.06); }
/* the supplied shots sit on their own backgrounds (desert, city, dusk), so a
   short foot of shadow settles each one into the card without hiding the car */
.car__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 28%;
  background: linear-gradient(to top, rgba(10,16,32,.72), rgba(10,16,32,0));
  pointer-events: none;
}

/* margin-top:auto on the first caption line keeps every card's text on the same
   baseline even though the photos are not all the same height */
.car__make {
  margin: auto 18px 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--accent);
}
.car__model { font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1.15; text-transform: uppercase; margin: 0 18px; }

/* ---------- leaderboard ------------------------------------------------ */

.lb-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.board { background: var(--bg-alt); border: 1px solid var(--line); overflow: hidden; }
.board__row {
  display: grid; grid-template-columns: 44px 1fr 1fr 84px;
  gap: 12px; align-items: center;
  padding: 17px 22px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 2px solid transparent;
}
.board__head {
  padding: 15px 22px;
  background: rgba(0,75,141,.28);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--muted);
}
.board__pos { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--muted); }
.board__cell { font-size: 14px; color: var(--dim); }
.board__time { font-family: var(--font-mono); font-size: 13px; color: var(--muted); text-align: right; }
.board__row--1 { border-left-color: var(--gold);   background: linear-gradient(90deg, rgba(245,166,35,.07), transparent 45%); }
.board__row--1 .board__pos, .board__row--1 .board__time { color: var(--gold); }
.board__row--2 { border-left-color: var(--silver); background: linear-gradient(90deg, rgba(192,200,212,.05), transparent 45%); }
.board__row--2 .board__pos, .board__row--2 .board__time { color: var(--silver); }
.board__row--3 { border-left-color: var(--bronze); background: linear-gradient(90deg, rgba(205,127,50,.06), transparent 45%); }
.board__row--3 .board__pos, .board__row--3 .board__time { color: var(--bronze); }
.board__row--rest { opacity: .78; }
.board__row:last-child { border-bottom: 0; }
.board__row.is-new { animation: kdrFlash 1.8s ease-out 1; }
.board__name { color: #fff; font-weight: 500; }
.board__speed { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; }

/* Loading placeholders. Ten of them, matching LB_ROWS: the board must not grow
   when the live rows land, or it shoves #play down under anyone who just
   clicked "Race Now". */
.board[data-state="loading"] .board__rows .board__row:nth-child(n+4) { opacity: .6; }
.board[data-state="loading"] .board__rows .board__row:nth-child(n+8) { opacity: .35; }
.board[data-state="loading"] .board__time { animation: kdrBlink 1.4s ease-in-out infinite; }
.board[data-state="error"] .dot-live { background: var(--gold); animation: none; }

.board__foot {
  padding: 13px 20px 14px; text-align: center;
  background: rgba(0,75,141,.16);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--muted);
}
.board__status {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 0 0 6px; color: #fff;
}
.board__window { margin: 0; color: var(--dim); font-size: 10px; line-height: 1.5; }
.board__empty {
  padding: 34px 22px; text-align: center; color: var(--muted);
  font-size: 14px; line-height: 1.6;
}

/* narrow screens: drop the country column and the speed sub-line so names and
   lap times stay on one line each */
@media (max-width: 640px) {
  .board__row { grid-template-columns: 34px 1fr 82px; gap: 10px; padding: 15px 16px; }
  .board__head { padding: 14px 16px; }
  .board__row > :nth-child(3) { display: none; }
  .board__speed { display: none; }
}
.dot-live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--live); flex-shrink: 0;
  animation: kdrPulse 1.8s ease-in-out infinite;
}

/* ---------- play / game frame ------------------------------------------ */

/* The "Race Now" CTAs target the frame itself, not the #play section, so the
   game window lands under the nav rather than the section heading. A little
   more clearance than the global scroll-padding so it does not sit flush. */
.frame {
  border: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  scroll-margin-top: 10px;
}
.frame__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-bottom: 1px solid var(--line);
}
.frame__bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.frame__bar i:nth-child(1) { background: #FF5F56; }
.frame__bar i:nth-child(2) { background: #FFBD2E; }
.frame__bar i:nth-child(3) { background: #27C93F; }
.frame__url {
  margin-left: 14px; padding: 5px 14px;
  background: #0F1830; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}



.play-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 16px; font-size: 13px; color: var(--dim);
}

/* ---------- launch screen ----------------------------------------------
   The game is not embedded: the frame shows a still of its title screen with
   a launch button over it, which opens games.kdrbahrain.com.
   ----------------------------------------------------------------------- */

/* ---------- poster ------------------------------------------------------ */

.poster {
  position: relative;
  display: block;
  line-height: 0;
  /* Pinned to the source still's own ratio (3034x1700). The srcset variants
     each round their height differently - 640x359 is 1.7827, 1280x717 is
     1.7852 - so leaving the height to be derived from whichever file the
     browser picked made the rendered proportion drift with viewport and DPR,
     and reflow as it swapped. Pinning the box means one proportion always, and
     the <=0.15% rounding is absorbed by object-fit instead. */
  aspect-ratio: 3034 / 1700;
  background: #0A0F1E url("../img/game/lqip-game.jpg") center/cover no-repeat;
  overflow: hidden;
}

.poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* never stretch: crop the rounding, do not distort */
  object-position: center;
}

/* Sits over the still where the game's own START button lives. */
.poster__cta {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  z-index: 2;
}

/* ---------- the START button -------------------------------------------- */

/* Rebuilt from the in-game control: a left-leaning parallelogram in gold with
   diagonal stripes, a bright rim and a soft glow. The skew lives on the button
   and is undone on the label, which keeps the corner radius and the stripes
   consistent without needing a background image. */
.btn-start {
  --skew: -26deg;
  /* sampled off the in-game button: base #D28D4E, stripe #DCA75E,
     shade #CC7B43, top highlight #E3C565, rim #CBB04A under its glow */
  --rim: #FFD95E;
  --gold-lo: #CE8543;
  --gold-hi: #E9C877;

  position: relative;
  display: inline-block;
  padding: 20px 78px;
  border: 3px solid var(--rim);
  border-radius: 11px;
  cursor: pointer;
  text-decoration: none;
  transform: skewX(var(--skew));
  background-color: var(--gold-lo);
  background-image:
    repeating-linear-gradient(
      115deg,
      rgba(255, 240, 205, .26) 0px,
      rgba(255, 240, 205, .26) 11px,
      rgba(255, 240, 205, 0) 11px,
      rgba(255, 240, 205, 0) 30px
    ),
    linear-gradient(180deg, var(--gold-hi) 0%, var(--gold-lo) 46%, #B96D26 100%);
  background-size: 90px 100%, 100% 100%;
  background-position: 0 0, 0 0;
  box-shadow:
    0 0 0 1px rgba(120, 66, 12, .35),
    0 0 12px rgba(255, 214, 96, .55),
    0 6px 20px rgba(0, 0, 0, .45),
    0 0 30px rgba(255, 197, 74, .40);
  transition:
    transform .18s cubic-bezier(.2, .7, .3, 1),
    box-shadow .18s ease,
    filter .18s ease,
    background-position .45s ease;
}

/* Inner highlight along the top edge, like the reference. */
.btn-start::after {
  content: "";
  position: absolute;
  inset: 2px 2px auto 2px;
  height: 34%;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.btn-start__label {
  display: block;
  transform: skewX(calc(var(--skew) * -1));   /* un-skew the text */
  font-family: 'Inter', system-ui, sans-serif;   /* 800 - Rajdhani is condensed and reads too light here */
  font-weight: 800;
  font-size: clamp(21px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 6px rgba(96, 48, 0, .55);
  white-space: nowrap;
}

.btn-start:hover,
.btn-start:focus-visible {
  transform: skewX(var(--skew)) translateY(-3px) scale(1.035);
  filter: saturate(1.12) brightness(1.07);
  background-position: 90px 0, 0 0;           /* stripes travel on hover */
  box-shadow:
    0 0 0 1px rgba(120, 66, 12, .35),
    0 0 16px rgba(255, 222, 120, .85),
    0 10px 28px rgba(0, 0, 0, .5),
    0 0 52px rgba(255, 205, 90, .8);
}

.btn-start:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

.btn-start:active {
  transform: skewX(var(--skew)) translateY(1px) scale(.99);
  filter: brightness(.96);
  box-shadow:
    0 0 0 1px rgba(120, 66, 12, .4),
    0 3px 10px rgba(0, 0, 0, .45),
    0 0 18px rgba(255, 197, 74, .4);
}

/* A slow breathing glow so the button reads as the live thing on a still. */
@keyframes kdrStartPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(120,66,12,.35), 0 0 12px rgba(255,214,96,.5),  0 6px 20px rgba(0,0,0,.45), 0 0 24px rgba(255,197,74,.34); }
  50%      { box-shadow: 0 0 0 1px rgba(120,66,12,.35), 0 0 18px rgba(255,214,96,.75), 0 6px 20px rgba(0,0,0,.45), 0 0 42px rgba(255,197,74,.6); }
}
.btn-start { animation: kdrStartPulse 2.6s ease-in-out infinite; }
.btn-start:hover,
.btn-start:active,
.btn-start:focus-visible { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .btn-start { animation: none; }
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 560px) {
  .btn-start { padding: 14px 44px; border-radius: 9px; border-width: 2px; }
  .btn-start__label { letter-spacing: .1em; }
  .poster__cta { bottom: 6%; }
}

/* Phone in landscape: the poster is short, keep the button clear of the edge. */
@media (orientation: landscape) and (max-height: 560px) {
  .poster__cta { bottom: 8%; }
  .btn-start { padding: 12px 40px; border-width: 2px; }
}

/* ---------- terms ------------------------------------------------------ */

.lang-switch {
  display: inline-flex; border: 1px solid var(--line); background: var(--card); margin-bottom: 26px;
}
.lang-switch--inset { margin: 18px 0; }
.lang-switch button {
  padding: 9px 20px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: #0A0F1E; }

.terms { border-top: 1px solid var(--line); }
.terms__item { border-bottom: 1px solid var(--line); }
.terms__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 21px 4px; cursor: pointer; list-style: none;
  font-size: 16px; font-weight: 500; color: #fff;
}
.terms__item > summary::-webkit-details-marker { display: none; }
.terms__item > summary:hover { color: var(--accent); }
.terms__no { font-family: var(--font-mono); font-size: 11px; color: var(--accent); letter-spacing: .1em; margin-inline-end: 18px; }
.terms__sign { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--muted); line-height: 1; }
.terms__item[open] .terms__sign { transform: rotate(45deg); }
.terms__body { padding: 0 4px 26px 47px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.terms__body ul { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 8px; }
.terms__body p { margin: 0 0 10px; max-width: 78ch; }
.terms__body p:last-child { margin-bottom: 0; }

[dir="rtl"] .terms__body { padding: 0 47px 26px 4px; font-family: var(--font-arabic); }
[dir="rtl"] .terms__item > summary { font-family: var(--font-arabic); text-align: right; }

.terms-pane[hidden] { display: none; }

.terms__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--dim);
}
.terms__meta a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.terms__meta a:hover { color: #fff; }


/* ---------- footer & sticky bar ---------------------------------------- */

.footer { border-top: 1px solid var(--line); padding: var(--block-y) var(--pad-x) 104px; }
.footer__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
}
.footer__logo { height: 30px; width: auto; display: block; }
.footer__links { display: flex; flex-wrap: wrap; gap: 26px; }
.footer__links a { color: var(--muted); font-size: 13px; }
.footer__links a:hover { color: #fff; }
.footer__legal { color: var(--dim); font-size: 12px; margin: 0; flex-basis: 100%; }

.sticky {
  position: fixed; inset: auto 0 0 0; z-index: 99;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px var(--pad-x);
  background: rgba(10,15,30,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.sticky.is-on { transform: translateY(0); }
.sticky p { margin: 0; font-size: 14px; color: var(--muted); }
.sticky strong { color: #fff; font-weight: 600; }
.sticky__cta { display: flex; align-items: center; gap: 8px; }
@media (max-width: 560px) {
  .sticky p { display: none; }
  .sticky { justify-content: center; }
  .sticky__cta { width: 100%; gap: 10px; }
  .sticky__cta .btn { flex: 1 1 0; padding-left: 12px; padding-right: 12px; }
}

/* ---------- misc ------------------------------------------------------- */

/* 404 */
.error-page { padding-top: calc(var(--nav-h) + clamp(20px, 6vw, 60px)); }
.error-page h1 { font-size: clamp(40px, 7vw, 78px); }

.noscript {
  margin: 0; padding: 14px var(--pad-x);
  background: var(--accent); color: #0A0F1E;
  font-size: 14px; font-weight: 600; text-align: center;
}
.noscript a { color: #0A0F1E; text-decoration: underline; }

@keyframes kdrBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes kdrFlash {
  0%   { background-color: rgba(255,209,0,.22); }
  100% { background-color: transparent; }
}
@keyframes kdrPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,.6); }
  50% { opacity: .45; box-shadow: 0 0 0 5px rgba(34,197,94,0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Phone held in landscape. Drop the decorative browser bar and the sticky CTA:
   between them they eat most of a 390px-tall viewport, and the sticky bar sits
   right where the launch button is. */
@media (orientation: landscape) and (max-height: 560px) {
  #play { padding-top: 40px; padding-bottom: 40px; }
  .frame__bar { display: none; }
  .sticky { display: none; }
}