/* ═══════════════════════════════════════════════════════════════
   PROJECT FLIGHT · UPDATE 9.0 — DEPARTURE BOARD COUNTDOWN
   ═══════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────── */
:root{
  --ink:        #05070b;

  --cyan:       #4fc3f7;
  --cyan-hi:    #a8e8ff;
  --cyan-glow:  rgba(79,195,247,.55);

  --amber:      #ffb545;
  --amber-glow: rgba(255,181,69,.5);

  --hot:        #ff4d3d;
  --hot-hi:     #ffb199;
  --hot-glow:   rgba(255,77,61,.55);

  /* accent tracks the flight status: cyan → amber → red */
  --accent:      var(--cyan);
  --accent-hi:   var(--cyan-hi);
  --accent-glow: var(--cyan-glow);

  --txt:        #eaf4fb;
  --txt-dim:    rgba(226,240,250,.60);
  --txt-faint:  rgba(226,240,250,.32);

  --line:       rgba(150,205,235,.16);

  --font:  "Chakra Petch", ui-sans-serif, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --board: "Barlow Condensed", "Chakra Petch", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;

  --ease-out: cubic-bezier(.16,1,.3,1);

  --flap-fs: clamp(2.3rem, 6.8vw, 6.1rem);
  --gutter:  clamp(1rem, 3.5vw, 3rem);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--font);
  font-weight:500;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

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

/* ═══ STAGE ═══════════════════════════════════════════════════ */
.stage{
  position:fixed; inset:0;
  display:flex;
  overflow-x:hidden;
  overflow-y:auto;
  isolation:isolate;
}

/* ── Background photograph ───────────────────────────────────── */
.bg{
  position:fixed; inset:-6%;
  z-index:0;
  will-change:transform;
  transform:translate3d(var(--px,0px), var(--py,0px), 0);
  transition:transform .9s var(--ease-out), opacity 1.2s ease;
}
.bg__img{
  position:absolute; inset:0;
  background:url("countdown-background.png") center 62% / cover no-repeat;
  filter:saturate(1.35) contrast(1.10) brightness(.88);
  transform:scale(1.06);
  animation:kenburns 46s ease-in-out infinite alternate;
  transition:filter 1.2s ease;
}
@keyframes kenburns{
  0%   { transform:scale(1.06) translate3d(0,0,0); }
  100% { transform:scale(1.16) translate3d(-1.5%, -1.2%, 0); }
}

.bg__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(72% 46% at 50% 55%, rgba(2,5,9,.90) 0%, rgba(2,5,9,.66) 55%, rgba(2,5,9,0) 100%),
    radial-gradient(135% 100% at 50% 50%, rgba(2,5,9,0) 30%, rgba(2,5,9,.55) 78%, rgba(1,3,6,.86) 100%),
    linear-gradient(180deg, rgba(2,5,9,.62) 0%, rgba(2,5,9,.05) 24%, rgba(2,5,9,.22) 58%, rgba(1,3,6,.80) 100%);
}
.bg__bloom{
  position:absolute; inset:0;
  background:radial-gradient(48% 34% at 50% 55%, var(--accent-glow) 0%, transparent 68%);
  opacity:.15;
  mix-blend-mode:screen;
  animation:breathe 7s ease-in-out infinite;
  transition:opacity .6s ease;
}
@keyframes breathe{ 0%,100%{opacity:.09; transform:scale(1);} 50%{opacity:.20; transform:scale(1.06);} }

/* ── Full-screen FX layers ───────────────────────────────────── */
.fx{ position:fixed; inset:0; pointer-events:none; z-index:2; }
.fx-particles{ position:fixed; inset:0; z-index:1; pointer-events:none; }

.fx--scan{
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.028) 0px, rgba(255,255,255,.028) 1px,
    transparent 1px, transparent 3px);
  opacity:.45;
  animation:scandrift 9s linear infinite;
  transition:opacity .5s ease;
}
@keyframes scandrift{ to{ background-position:0 300px; } }

.fx--grain{
  opacity:.14;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.55'/></svg>");
  animation:grainshift .7s steps(4) infinite;
  transition:opacity .5s ease;
}
@keyframes grainshift{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(3%,1%)}
}

.fx--sweep{
  background:linear-gradient(105deg,
    transparent 38%, rgba(168,232,255,.05) 47%, rgba(168,232,255,.10) 50%,
    rgba(168,232,255,.05) 53%, transparent 62%);
  transform:translateX(-120%);
  animation:sweep 12s cubic-bezier(.6,0,.35,1) infinite;
  mix-blend-mode:screen;
}
@keyframes sweep{ 0%{transform:translateX(-120%)} 55%,100%{transform:translateX(120%)} }

.fx--vignette{
  background:radial-gradient(130% 100% at 50% 50%, transparent 40%, rgba(0,0,0,.60) 88%, rgba(0,0,0,.85) 100%);
}

.fx--flash{
  z-index:60;
  background:radial-gradient(60% 50% at 50% 55%, #fff 0%, var(--accent-hi) 40%, transparent 75%);
  opacity:0;
  mix-blend-mode:screen;
}
.fx--flash.fire{ animation:flashfire 1.15s var(--ease-out) forwards; }
@keyframes flashfire{ 0%{opacity:0} 6%{opacity:.95} 100%{opacity:0} }

/* ═══ CONTENT ═════════════════════════════════════════════════ */
.content{
  position:relative;
  z-index:10;
  margin:auto;
  width:min(1140px, 100% - var(--gutter)*2);
  padding-block:clamp(1.25rem,4vh,2.5rem);
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(.9rem, 2.4vh, 1.7rem);
  transition:opacity .7s ease, transform .9s var(--ease-out), filter .7s ease;
}

/* ── Logo lock-up ────────────────────────────────────────────── */
.brand{ display:flex; flex-direction:column; align-items:center; gap:clamp(.5rem,1.6vh,1rem); }
.brand__logo{
  display:block;
  width:clamp(180px, 26vw, 360px);
  height:auto;
  filter:
    drop-shadow(0 0 24px rgba(79,195,247,.38))
    drop-shadow(0 8px 30px rgba(0,0,0,.75));
  animation:hover 6.5s ease-in-out infinite;
}
@keyframes hover{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.brand__tag{
  margin:0;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.6rem,2vw,1.1rem);
  width:min(560px, 100%);
  font-size:clamp(.58rem,1.4vw,.76rem);
  font-weight:600;
  letter-spacing:.44em;
  text-indent:.44em;
  text-transform:uppercase;
  color:var(--txt-dim);
  white-space:nowrap;
}
.brand__rule{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}

/* ═══ DEPARTURE BOARD ═════════════════════════════════════════ */
.board{
  position:relative;
  width:100%;
  border-radius:clamp(8px,1vw,14px);
  border:1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(19,25,33,.80) 0%, rgba(9,13,19,.86) 40%, rgba(6,9,14,.90) 100%);
  box-shadow:
    inset 0 1px 0 rgba(190,235,255,.10),
    inset 0 0 60px -20px rgba(79,195,247,.14),
    0 34px 90px -34px rgba(0,0,0,.95);
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
  overflow:hidden;
  transition:border-color .6s ease, box-shadow .6s ease;
}
/* faint brushed-panel texture */
.board::before{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.012) 0px, rgba(255,255,255,.012) 1px, transparent 1px, transparent 4px);
  pointer-events:none;
}

.board__rivet{
  position:absolute;
  width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(220,240,255,.55), rgba(90,120,145,.25) 60%, rgba(0,0,0,.5));
  box-shadow:0 1px 1px rgba(0,0,0,.6);
  opacity:.7;
  z-index:5;
}
.board__rivet--tl{ top:9px; left:9px }
.board__rivet--tr{ top:9px; right:9px }
.board__rivet--bl{ bottom:9px; left:9px }
.board__rivet--br{ bottom:9px; right:9px }

/* ── header strip ────────────────────────────────────────────── */
.board__head{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:clamp(.55rem,1.4vh,.85rem) clamp(1.4rem,3vw,2rem);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0));
}
.board__title{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--board);
  font-size:clamp(.72rem,1.6vw,.95rem);
  font-weight:700;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--txt);
}
.board__plane{ color:var(--accent); filter:drop-shadow(0 0 8px var(--accent-glow)); transition:color .5s ease; }

.board__zulu{
  font-family:var(--board);
  font-size:clamp(.7rem,1.5vw,.9rem);
  font-weight:600;
  letter-spacing:.2em;
  color:var(--txt-dim);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.board__zulu b{ color:var(--txt); font-weight:700 }
.board__zulu i{ font-style:normal; color:rgba(226,240,250,.22); margin-left:.45em }

.board__status{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.28rem .7rem;
  border-radius:3px;
  border:1px solid var(--accent);
  background:rgba(255,255,255,.05);
  font-family:var(--board);
  font-size:clamp(.62rem,1.4vw,.8rem);
  font-weight:700;
  letter-spacing:.26em;
  text-indent:.26em;
  text-transform:uppercase;
  color:var(--accent-hi);
  white-space:nowrap;
  transition:border-color .5s ease, background .5s ease, color .5s ease;
}
.board__status-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);
  animation:blink 2.4s steps(1,end) infinite;
}
@keyframes blink{ 0%,60%{opacity:1} 61%,100%{opacity:.18} }
.board__status[data-state="final"]   .board__status-dot{ animation-duration:.8s }
.board__status[data-state="takeoff"] .board__status-dot{ animation-duration:.35s }

/* ── flight strip ────────────────────────────────────────────── */
.board__strip{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr .55fr .9fr;
  border-bottom:1px solid var(--line);
}
.cell{
  display:flex; flex-direction:column; align-items:flex-start; gap:.2rem;
  padding:clamp(.5rem,1.3vh,.8rem) clamp(.9rem,2.2vw,1.6rem);
  border-left:1px solid rgba(150,205,235,.08);
  text-align:left;
}
.cell:first-child{ border-left:0; padding-left:clamp(1.4rem,3vw,2rem) }
.cell--gate{ align-items:flex-end; text-align:right; padding-right:clamp(1.4rem,3vw,2rem) }
.cell__k{
  font-size:clamp(.48rem,1.05vw,.6rem);
  font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--txt-faint);
}
.cell__v{
  font-family:var(--board);
  font-size:clamp(.85rem,2.1vw,1.2rem);
  font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt);
}
.cell--gate .cell__v{ color:var(--accent-hi); text-shadow:0 0 16px var(--accent-glow); transition:color .5s ease }

.cell--waiting{ align-items:flex-end; text-align:right; padding-right:clamp(1.4rem,3vw,2rem) }
.cell--waiting .cell__v{
  display:inline-flex; align-items:center; gap:.45rem;
  color:var(--accent-hi);
  font-variant-numeric:tabular-nums;
  transition:color .5s ease;
}

.live-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);
  animation:livePulse 2s ease-in-out infinite;
  flex:none;
}
@keyframes livePulse{ 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.35; transform:scale(.8)} }

/* ── live player count on the departed screen ────────────────── */
.livestats{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(.5rem,1.4vh,.9rem);
  margin-top:clamp(.4rem,1.6vh,1.1rem);
}
body.is-live .livestats{ animation:titleIn 1.2s var(--ease-out) .85s both }
.livestats__k{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:clamp(.52rem,1.25vw,.68rem);
  font-weight:600; letter-spacing:.38em; text-indent:.38em;
  text-transform:uppercase;
  color:var(--txt-dim);
}
.livestats__sub{
  font-size:clamp(.5rem,1.15vw,.64rem);
  font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--txt-faint);
  font-variant-numeric:tabular-nums;
}
.flaps--live{ --flap-fs:clamp(1.7rem, 4.6vw, 3.2rem); }

/* ═══ SPLIT-FLAP CLOCK ════════════════════════════════════════ */
.board__clock{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:clamp(.3rem,1vw,.8rem);
  padding:clamp(1.1rem,3vh,2.1rem) clamp(.8rem,2.5vw,1.8rem) clamp(.9rem,2.4vh,1.6rem);
  transform-origin:center;
  will-change:transform, filter;
}

.unit{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(.5rem,1.3vh,.85rem);
  transition:opacity .5s ease, filter .5s ease, transform .5s var(--ease-out);
}
.flaps{ display:flex; gap:clamp(.18rem,.55vw,.4rem); }

.unit__label{
  font-size:clamp(.5rem,1.15vw,.68rem);
  font-weight:600;
  letter-spacing:.38em; text-indent:.38em;
  text-transform:uppercase;
  color:var(--txt-faint);
  transition:color .4s ease, text-shadow .4s ease;
}
.unit--seconds .unit__label{ color:var(--accent); text-shadow:0 0 16px var(--accent-glow); }

/* separator between groups — two tiny board pips */
.gap{
  align-self:flex-start;
  height:1.16em;
  font-size:var(--flap-fs);
  display:flex; flex-direction:column; justify-content:center; gap:.16em;
  padding-inline:clamp(.08rem,.5vw,.28rem);
  transition:opacity .5s ease;
}
.gap i{
  width:.075em; height:.075em; border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px var(--accent-glow);
  animation:blink 1s steps(1,end) infinite;
}

/* ── One split-flap tile ─────────────────────────────────────── */
.flap{
  position:relative;
  width:.74em;
  height:1.12em;
  font-size:var(--flap-fs);
  font-family:var(--board);
  font-weight:700;
  perspective:360px;
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.6));
  --r:clamp(4px,.55vw,8px);
}

.flap__card{
  position:absolute; left:0; right:0;
  height:50%;
  overflow:hidden;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.flap__card--top,
.flap__card--fold-top{
  top:0;
  border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(180deg, #1c242e 0%, #10161d 100%);
  box-shadow:inset 0 1px 0 rgba(214,240,255,.16), inset 0 -14px 20px -16px #000;
}
.flap__card--bottom,
.flap__card--fold-bottom{
  bottom:0;
  border-radius:0 0 var(--r) var(--r);
  background:linear-gradient(180deg, #0c1219 0%, #060a0f 100%);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.8), inset 0 12px 18px -16px rgba(0,0,0,.9);
}

/* the numeral: a full-tile-height box, clipped by its half */
.flap__card span{
  position:absolute; left:0; width:100%;
  height:200%;                       /* two halves = the whole tile */
  display:flex; align-items:center; justify-content:center;
  font-size:1.2em;
  line-height:1;
  color:#f4f9fc;
  text-shadow:0 2px 2px rgba(0,0,0,.75), 0 0 26px rgba(180,225,255,.16);
  font-variant-numeric:tabular-nums;
}
.flap__card--top span,
.flap__card--fold-top span{ top:0 }
.flap__card--bottom span,
.flap__card--fold-bottom span{ bottom:0 }

/* the two moving leaves */
.flap__card--fold-top{ transform-origin:50% 100%; z-index:4 }
.flap__card--fold-bottom{ transform-origin:50% 0%; transform:rotateX(90deg); z-index:3 }

/* shading that sells the fold */
.flap__card--fold-top::after,
.flap__card--fold-bottom::after{
  content:""; position:absolute; inset:0; pointer-events:none;
}
.flap__card--fold-top::after{ background:linear-gradient(180deg, transparent, rgba(0,0,0,.85)); opacity:0 }
.flap__card--fold-bottom::after{ background:linear-gradient(0deg, transparent, rgba(0,0,0,.9)); opacity:1 }

.flap.flip .flap__card--fold-top       { animation:foldTop     .15s cubic-bezier(.55,.05,.9,.4) forwards }
.flap.flip .flap__card--fold-top::after{ animation:shadeIn     .15s linear forwards }
.flap.flip .flap__card--fold-bottom       { animation:foldBottom .17s cubic-bezier(.2,.7,.4,1) .15s forwards }
.flap.flip .flap__card--fold-bottom::after{ animation:shadeOut   .17s linear .15s forwards }

@keyframes foldTop    { from{transform:rotateX(0)}     to{transform:rotateX(-90deg)} }
@keyframes foldBottom { from{transform:rotateX(90deg)} to{transform:rotateX(0)} }
@keyframes shadeIn    { from{opacity:0} to{opacity:1} }
@keyframes shadeOut   { from{opacity:1} to{opacity:0} }

/* the hinge line across the middle of every tile */
.flap::after{
  content:"";
  position:absolute; left:0; right:0; top:calc(50% - 1px);
  height:2px; z-index:6;
  background:rgba(0,0,0,.85);
  box-shadow:0 1px 0 rgba(190,235,255,.06);
  pointer-events:none;
}
/* hinge pins either side */
.flap::before{
  content:"";
  position:absolute; left:-1px; right:-1px; top:calc(50% - 2.5px);
  height:5px; z-index:7;
  background:
    radial-gradient(circle, rgba(190,225,245,.4) 0 42%, transparent 46%),
    radial-gradient(circle, rgba(190,225,245,.4) 0 42%, transparent 46%);
  background-size:5px 5px, 5px 5px;
  background-position:left center, right center;
  background-repeat:no-repeat;
  pointer-events:none;
}

/* ── runway approach lights ──────────────────────────────────── */
.board__foot{
  display:flex; align-items:center; gap:clamp(.7rem,2vw,1.3rem);
  padding:clamp(.5rem,1.3vh,.8rem) clamp(1.4rem,3vw,2rem);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.02));
}
.board__foot-k{
  font-size:clamp(.48rem,1.05vw,.6rem);
  font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--txt-faint);
  white-space:nowrap;
  transition:color .4s ease;
}
.board__foot-k--r{ color:rgba(226,240,250,.22) }
.runway{ flex:1; min-width:0 }
.runway__lights{ display:flex; gap:3px; height:7px; align-items:flex-end }
.runway__lights i{
  flex:1;
  height:3px;
  border-radius:1px;
  background:rgba(150,205,235,.16);
  transition:background .12s linear, height .12s linear, box-shadow .12s linear;
}
.runway__lights i.lit{
  height:7px;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
}
.runway__lights i.head{
  background:#fff;
  box-shadow:0 0 14px var(--accent-hi), 0 0 26px var(--accent-glow);
}

/* ═══ TARGET LINES ════════════════════════════════════════════ */
.target{ display:flex; flex-direction:column; gap:.35rem }
.target__main{
  margin:0;
  font-size:clamp(.66rem,1.6vw,.88rem);
  font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  color:var(--txt);
}
.target__local{
  margin:0;
  font-size:clamp(.56rem,1.3vw,.74rem);
  font-weight:400; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-faint);
}

/* ═══ SOUND BUTTON ════════════════════════════════════════════ */
.sound{
  position:relative;
  display:inline-flex; align-items:center; gap:.75rem;
  padding:.58rem 1.35rem .58rem 1rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(10,16,24,.5);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:var(--txt);
  font-family:inherit;
  font-size:clamp(.58rem,1.35vw,.74rem);
  font-weight:600; letter-spacing:.24em; text-transform:uppercase;
  cursor:pointer;
  transition:border-color .3s ease, background .3s ease, transform .2s var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.sound:hover{ border-color:var(--accent); background:rgba(20,40,58,.55); transform:translateY(-2px) }
.sound:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.sound__ring{
  position:absolute; inset:-1px;
  border-radius:inherit;
  border:1px solid var(--accent);
  opacity:0;
  animation:soundNudge 2.8s ease-out infinite;
  pointer-events:none;
}
.sound[aria-pressed="true"] .sound__ring{ animation:none; opacity:0 }
@keyframes soundNudge{ 0%{opacity:.75; transform:scale(1)} 70%,100%{opacity:0; transform:scale(1.16)} }
.sound__bars{ display:flex; align-items:flex-end; gap:2px; height:14px }
.sound__bars i{
  width:2px; height:3px; border-radius:1px;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
  transition:height .25s ease;
}
.sound[aria-pressed="true"] .sound__bars i{ animation:eq .9s ease-in-out infinite }
.sound__bars i:nth-child(1){ animation-delay:0s }
.sound__bars i:nth-child(2){ animation-delay:.14s }
.sound__bars i:nth-child(3){ animation-delay:.28s }
.sound__bars i:nth-child(4){ animation-delay:.09s }
.sound__bars i:nth-child(5){ animation-delay:.22s }
@keyframes eq{ 0%,100%{height:3px} 50%{height:14px} }

.sound__hint{
  margin:calc(-1 * clamp(.4rem,1.4vh,1rem)) 0 0;
  font-size:clamp(.5rem,1.1vw,.62rem);
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--txt-faint);
  transition:opacity .5s ease;
}
body.audio-on .sound__hint{ opacity:0 }

/* ═══ CORNER HUD ══════════════════════════════════════════════ */
.hud{
  position:fixed; bottom:clamp(.8rem,2.4vh,1.6rem);
  z-index:12;
  display:flex; align-items:center; gap:.55rem;
  font-size:clamp(.48rem,1vw,.62rem);
  font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--txt-faint);
  pointer-events:none;
}
.hud--left { left:clamp(.9rem,2.6vw,2rem) }
.hud--right{ right:clamp(.9rem,2.6vw,2rem) }
.hud__dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px var(--accent-glow);
  animation:blink 2s steps(1,end) infinite;
}
.hud__tz{ color:rgba(226,240,250,.2) }

/* ═══ BOOT-IN (declared before the state blocks) ══════════════ */
body.is-booting .content{ opacity:0; transform:translateY(24px) scale(.99) }
body.is-booting .bg{ opacity:0 }

body:not(.is-booting) .brand,
body:not(.is-booting) .board,
body:not(.is-booting) .target,
body:not(.is-booting) .sound,
body:not(.is-booting) .sound__hint{
  animation:riseIn .95s var(--ease-out) backwards;
}
body:not(.is-booting) .brand      { animation-delay:.05s }
body:not(.is-booting) .board      { animation-delay:.25s }
body:not(.is-booting) .target     { animation-delay:.5s }
body:not(.is-booting) .sound      { animation-delay:.6s }
body:not(.is-booting) .sound__hint{ animation-delay:.7s }
@keyframes riseIn{
  from{ opacity:0; transform:translateY(28px); filter:blur(9px) }
  to  { opacity:1; transform:none; filter:blur(0) }
}

/* ═══ STATE: FINAL CALL (last minute) ═════════════════════════ */
body.is-critical{
  --accent:      var(--amber);
  --accent-hi:   #ffd9a0;
  --accent-glow: var(--amber-glow);
}
body.is-critical .bg__img{ filter:saturate(1.4) contrast(1.14) brightness(.8) }
body.is-critical .bg__bloom{ opacity:.28; animation-duration:1s }
body.is-critical .board{
  border-color:rgba(255,181,69,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,225,180,.12),
    inset 0 0 70px -20px var(--accent-glow),
    0 34px 90px -34px rgba(0,0,0,.95);
}
body.is-critical .board__clock{ animation:throb 1s ease-out infinite }
@keyframes throb{
  0%  { transform:scale(1.012); filter:brightness(1.2) }
  30% { transform:scale(1);     filter:brightness(1) }
  100%{ transform:scale(1);     filter:brightness(1) }
}

/* ═══ STATE: CLEARED FOR TAKEOFF (last ten) ═══════════════════ */
body.is-final{
  --accent:      var(--hot);
  --accent-hi:   var(--hot-hi);
  --accent-glow: var(--hot-glow);
}
body.is-final .board{ border-color:rgba(255,77,61,.45) }
body.is-final .bg__img{ filter:saturate(1.5) contrast(1.18) brightness(.74) hue-rotate(-12deg) }
body.is-final .board__clock{ animation:throb .6s ease-out infinite }
body.is-final .content{ animation:shake .55s ease-in-out infinite }
@keyframes shake{
  0%,100%{ transform:translate3d(0,0,0) }
  20%{ transform:translate3d(-2px,1px,0) }
  40%{ transform:translate3d(2px,-1px,0) }
  60%{ transform:translate3d(-1px,-2px,0) }
  80%{ transform:translate3d(1px,2px,0) }
}
body.is-final .fx--scan{ opacity:.85 }
body.is-final .fx--grain{ opacity:.28 }
body.is-final .unit[data-unit="days"],
body.is-final .unit[data-unit="hours"],
body.is-final .unit[data-unit="minutes"]{ opacity:.2; filter:saturate(.15) }
body.is-final .gap{ opacity:.2 }
body.is-final .unit--seconds{ transform:scale(1.07) }

/* ═══ STATE: DEPARTED ═════════════════════════════════════════ */
.liftoff{
  position:fixed; inset:0;
  z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(.9rem,2.4vh,1.8rem);
  padding:var(--gutter);
  text-align:center;
  opacity:0; visibility:hidden;
  pointer-events:none;
  transition:opacity .9s ease, visibility .9s;
}
body.is-live{ --accent:var(--cyan); --accent-hi:var(--cyan-hi); --accent-glow:var(--cyan-glow) }
body.is-live .liftoff{ opacity:1; visibility:visible }
body.is-live .content{ opacity:0; transform:scale(1.12); filter:blur(14px); pointer-events:none }
body.is-live .bg__img{ filter:saturate(1.5) contrast(1.02) brightness(1.35); transition:filter 1.6s ease }
body.is-live .bg__bloom{ opacity:.38 }

.liftoff__logo{
  width:clamp(240px, 42vw, 600px);
  height:auto;
  filter:drop-shadow(0 0 46px rgba(79,195,247,.65)) drop-shadow(0 10px 44px rgba(0,0,0,.8));
}
body.is-live .liftoff__logo{ animation:liftLogo 1.5s var(--ease-out) both, hover 6s ease-in-out 1.5s infinite }
@keyframes liftLogo{
  0%  { opacity:0; transform:scale(.55); filter:blur(24px) brightness(3) }
  100%{ opacity:1; transform:scale(1);   filter:blur(0)   brightness(1) }
}

.liftoff__title{
  position:relative;
  margin:0;
  font-size:clamp(1.05rem,4vw,2.5rem);
  font-weight:700; font-style:italic;
  letter-spacing:.3em; text-indent:.3em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 0 30px var(--cyan-glow), 0 0 70px var(--cyan-glow);
}
body.is-live .liftoff__title{ animation:titleIn 1.2s var(--ease-out) .35s both }
@keyframes titleIn{ from{opacity:0; transform:translateY(24px)} to{opacity:1; transform:none} }

.liftoff__title::before,
.liftoff__title::after{
  content:attr(data-text);
  position:absolute; inset:0;
  color:#fff; opacity:.7;
  clip-path:inset(0 0 100% 0);
  pointer-events:none;
}
body.is-live .liftoff__title::before{ text-shadow:2px 0 var(--hot);  animation:glitchA 3.4s steps(2,end) 2s infinite }
body.is-live .liftoff__title::after { text-shadow:-2px 0 var(--cyan); animation:glitchB 2.9s steps(2,end) 2.4s infinite }
@keyframes glitchA{
  0%,92%,100%{ clip-path:inset(0 0 100% 0) }
  93%{ clip-path:inset(12% 0 62% 0); transform:translateX(-3px) }
  96%{ clip-path:inset(58% 0 18% 0); transform:translateX(3px) }
}
@keyframes glitchB{
  0%,88%,100%{ clip-path:inset(0 0 100% 0) }
  89%{ clip-path:inset(38% 0 42% 0); transform:translateX(3px) }
  94%{ clip-path:inset(70% 0 8% 0);  transform:translateX(-2px) }
}

.liftoff__sub{
  margin:0;
  font-size:clamp(.58rem,1.5vw,.86rem);
  font-weight:500; letter-spacing:.4em; text-indent:.4em;
  text-transform:uppercase;
  color:var(--txt-dim);
}
body.is-live .liftoff__sub{ animation:titleIn 1.2s var(--ease-out) .6s both }

.liftoff__rings{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none }
.liftoff__rings span{
  position:absolute;
  width:min(58vmin,520px); aspect-ratio:1;
  border-radius:50%;
  border:2px solid var(--cyan);
  opacity:0;
}
body.is-live .liftoff__rings span{ animation:shock 2.6s var(--ease-out) forwards }
body.is-live .liftoff__rings span:nth-child(2){ animation-delay:.22s }
body.is-live .liftoff__rings span:nth-child(3){ animation-delay:.44s }
@keyframes shock{
  0%  { opacity:.85; transform:scale(.12); border-width:6px }
  100%{ opacity:0;   transform:scale(3.6); border-width:1px }
}

/* ═══ RESPONSIVE ══════════════════════════════════════════════ */
@media (max-width:820px){
  .board__strip{ grid-template-columns:1fr 1fr }
  .cell{ border-top:1px solid rgba(150,205,235,.08) }
  .cell:nth-child(-n+2){ border-top:0 }
  .cell:nth-child(odd){ border-left:0; padding-left:clamp(1.1rem,4vw,1.6rem) }
  .cell--gate{ align-items:flex-start; text-align:left }
  .cell--waiting{
    grid-column:span 2;
    align-items:flex-start; text-align:left;
    border-left:0;
    padding-left:clamp(1.1rem,4vw,1.6rem);
  }
}
@media (max-width:700px){
  :root{ --flap-fs:clamp(2.1rem, 14vw, 3.6rem) }
  .board__clock{
    display:grid;
    grid-template-columns:repeat(2, auto);
    gap:clamp(.8rem,4vw,1.3rem) clamp(1rem,7vw,2rem);
    justify-content:center; justify-items:center;
  }
  .gap{ display:none }
  .board__foot-k--r{ display:none }
  .board__zulu{ display:none }
  .hud{ display:none }
}
@media (max-height:700px) and (min-width:701px){
  :root{ --flap-fs:clamp(2rem, 7.5vh, 4.4rem) }
  .brand__logo{ width:clamp(150px, 20vw, 240px) }
  .content{ gap:.7rem }
  .sound__hint{ display:none }
}

/* ═══ REDUCED MOTION ══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .bg__img{ transform:scale(1.04) }
  .fx--sweep,.fx--grain,.fx-particles{ display:none }
}