/* ============================================================
   OVERLOAD - wind-turbine alarm-triage arcade game
   Fixed 1920x1080 cabinet display. Sunset palette.
   Palette source: cabinet surround art (red/orange sunset,
   silhouette turbines, dark hill foreground, hazard chevrons).
   ONYX purple kept for UI chrome per brand.
   ============================================================ */

:root{
  /* ONYX brand / UI chrome */
  --onyx:#0B053B; --onyx2:#171063; --onyx3:#251a7a;
  /* action + status */
  --red:#d81f28; --green:#5eba47; --orange:#ec893b; --cyan:#7BE2FF;
  /* daytime sky (DEFAULT livery, matches the prototype) */
  --sky1:#2E7BD6; --sky2:#63b6ec; --sky3:#bfeaff;
  /* sunset sky (optional livery) */
  --sky-top:#180a3a; --sky-1:#3a1152; --sky-2:#8a1e4f; --sky-3:#d13a2c;
  --sky-4:#ef7a34; --sky-glow:#ffc85a;
  /* foreground silhouette */
  --hill:#120a26; --hill-edge:#241539;
  /* hazard chevrons */
  --hazard:#f5c518; --hazard-ink:#141414;
  --cream:#fff4e6;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; background:#000; overflow:hidden; }
body{
  font-family:'Aptos','Segoe UI',system-ui,sans-serif;
  color:var(--onyx);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation; user-select:none;
}
a{ color:var(--red); }
.pix{ font-family:'Press Start 2P','Press Start',monospace; }
img.pixel{ image-rendering:pixelated; }

/* ---- scale-to-fit wrapper: design is authored at 1920x1080 ---- */
#viewport{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:#000;
}
#stage{
  width:1920px; height:1080px; position:relative; overflow:hidden;
  transform-origin:center center;
  /* DEFAULT: daytime blue-sky gradient (prototype) */
  background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 46%,var(--sky3) 78%,var(--sky3) 100%);
  color:var(--onyx); -webkit-font-smoothing:antialiased;
}
/* CRT scanline veneer */
#stage::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:80;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 2px,rgba(0,0,0,0) 2px 4px);
  opacity:.35;
}

/* ============================================================
   SUNSET SCENE (sky glow, hills, silhouette turbines, clouds)
   ============================================================ */
.scene{ position:absolute; left:0; right:0; bottom:0; height:460px; z-index:0; overflow:hidden; }
/* the sun belongs to the sunset livery only; hidden by default */
.scene .sun{
  display:none;
  position:absolute; bottom:120px; left:50%; transform:translateX(-50%);
  width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,220,140,.95) 0%, rgba(255,150,60,.55) 34%,
    rgba(220,70,40,.20) 60%, rgba(220,70,40,0) 72%);
  filter:blur(2px);
}
/* DEFAULT: light daytime clouds (prototype) */
.scene .clouds{
  position:absolute; left:0; right:0; bottom:150px; height:300px;
  background-image:url("../assets/onyx-background-clouds.png");
  background-repeat:repeat-x; background-size:980px auto; background-position:left bottom;
  image-rendering:pixelated; opacity:.95;
}
/* DEFAULT: green grass ground (prototype) */
.ground{
  position:absolute; left:0; right:0; bottom:0; height:150px;
  background:linear-gradient(180deg,#6bc74f 0%,#4d9a37 100%);
  border-top:6px solid #3c7a2b;
}
.ground::before{
  content:''; position:absolute; left:0; right:0; top:-6px; height:6px;
  background:repeating-linear-gradient(90deg,#7ed85f 0 26px,#5fba47 26px 52px);
}
/* DEFAULT: full-colour turbines (prototype) */
.turb{ position:absolute; bottom:126px; image-rendering:pixelated; }

/* hazard chevron stripe accent */
.hazard{
  background:repeating-linear-gradient(45deg,
    var(--hazard) 0 26px, var(--hazard-ink) 26px 52px);
}
.hazard-bar{ height:18px; width:100%; }

/* ============================================================
   BRAND BAR
   ============================================================ */
.brandbar{ position:absolute; top:34px; left:44px; z-index:40; display:flex; align-items:center; gap:14px; }
.brandbar img{ height:34px; }
.brandbar .nm{ font-weight:700; letter-spacing:.24em; font-size:15px; color:var(--onyx);
  text-transform:uppercase; }
.brandbar .nm b{ font-weight:800; }

/* ============================================================
   PANELS / CHIPS / BUTTONS (ONYX chrome)
   ============================================================ */
.panel{ background:var(--onyx); color:#fff; border:5px solid #fff;
  box-shadow:0 0 0 5px var(--onyx),12px 14px 0 rgba(0,0,0,.45); }
.chip{ display:inline-flex; align-items:center; gap:9px; background:var(--onyx); color:#fff;
  border:3px solid #fff; box-shadow:5px 6px 0 rgba(0,0,0,.4); padding:11px 16px; }

.pbtn{ font-family:'Press Start 2P','Press Start',monospace; cursor:pointer; border:0; color:#fff;
  text-transform:uppercase; letter-spacing:.02em; line-height:1.35; padding:18px 22px;
  box-shadow:0 8px 0 rgba(0,0,0,.32); transition:transform .05s, box-shadow .05s;
  -webkit-tap-highlight-color:transparent; user-select:none; min-height:56px; }
.pbtn:active{ transform:translateY(6px); box-shadow:0 2px 0 rgba(0,0,0,.32); }
.pbtn.red{ background:var(--red); border-bottom:6px solid #8f141a; }
.pbtn.green{ background:var(--green); border-bottom:6px solid #3c7f2c; color:#08240f; }
.pbtn.orange{ background:var(--orange); border-bottom:6px solid #a95d22; color:#2a1704; }
.pbtn.indigo{ background:var(--onyx3); border-bottom:6px solid #0b0640; }
.pbtn[disabled]{ opacity:.4; cursor:not-allowed; }

.tag{ font-family:'Press Start 2P','Press Start',monospace; font-size:11px; padding:7px 10px; color:#fff; }

/* ============================================================
   ANIMATIONS
   ============================================================ */
.blink{ animation:blink 1.05s steps(1,end) infinite; }
@keyframes blink{ 0%,55%{opacity:1;} 56%,100%{opacity:0;} }
.bob{ animation:bob 1.6s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
.rise{ animation:rise .4s ease both; }
@keyframes rise{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
.pop{ animation:pop .32s cubic-bezier(.2,1.3,.5,1) both; }
@keyframes pop{ from{opacity:0; transform:scale(.86);} to{opacity:1; transform:scale(1);} }

.center{ position:absolute; inset:0; z-index:20; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; }

/* ============================================================
   ATTRACT
   ============================================================ */
.ovlogo{ width:840px; height:auto; display:block;
  filter:drop-shadow(9px 10px 0 rgba(0,0,0,.55)) drop-shadow(0 0 24px rgba(255,180,90,.35)); }
.press-start{ height:64px; width:auto; filter:drop-shadow(3px 4px 0 rgba(0,0,0,.5)); }
.mouse-hint{ height:56px; width:auto; filter:drop-shadow(2px 3px 0 rgba(0,0,0,.5)); }
.admin-link{ position:absolute; bottom:18px; right:24px; z-index:40; background:none; border:0;
  color:rgba(255,255,255,.4); font-family:'Aptos','Segoe UI',sans-serif; font-size:14px;
  letter-spacing:.14em; cursor:pointer; }
.stat-row{ position:absolute; bottom:36px; left:0; right:0; display:flex; justify-content:center;
  gap:18px; z-index:30; }

/* headline text on scene (DEFAULT: dark ink on light daytime sky) */
.scene-h{ font-family:'Press Start 2P','Press Start',monospace; color:var(--onyx);
  text-shadow:4px 5px 0 rgba(255,255,255,.7); }
.scene-sub{ color:#12233a; font-weight:600; }

/* ============================================================
   MODE SELECT
   ============================================================ */
.mode-wrap{ position:absolute; top:296px; left:50%; transform:translateX(-50%);
  display:flex; align-items:stretch; gap:60px; z-index:20; }
.mode-card{ width:620px; padding:0; cursor:pointer; display:flex; flex-direction:column; }
.mode-card.comp{ border-color:var(--red); box-shadow:0 0 0 5px var(--red),12px 14px 0 rgba(0,0,0,.45); }
.mode-card.prac{ border-color:var(--green); box-shadow:0 0 0 5px var(--green),12px 14px 0 rgba(0,0,0,.45); }
.mode-head{ padding:20px 28px; display:flex; align-items:center; justify-content:space-between; }
.mode-body{ padding:30px 34px; display:flex; flex-direction:column; flex:1; }
.mode-body p{ font-size:21px; line-height:1.5; margin:0 0 26px; color:#e9e8ff; min-height:96px; }
.mode-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; }
.mode-grid .k{ color:#9a94cf; font-size:14px; }
.mode-grid .v{ font-family:'Press Start 2P','Press Start',monospace; font-size:20px; color:#fff; margin-top:8px; }

/* ============================================================
   REGISTRATION + ON-SCREEN KEYBOARD
   ============================================================ */
.field{ display:block; margin-bottom:16px; text-align:left; }
.field label{ display:block; font-size:14px; letter-spacing:.14em; color:#b9b4e4; margin-bottom:8px; text-transform:uppercase; }
.field .inp{ width:100%; font-family:'Aptos','Segoe UI',sans-serif; font-size:21px; padding:15px 18px;
  background:#fff; color:var(--onyx); border:4px solid var(--onyx3); min-height:58px; cursor:pointer;
  display:flex; align-items:center; overflow:hidden; white-space:nowrap; }
.field .inp.active{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(123,226,255,.4); }
.field .inp.bad{ border-color:var(--red); }
.field .inp .ph{ color:#8a86b5; }
.field .inp .caret{ display:inline-block; width:3px; height:26px; background:var(--onyx3);
  margin-left:2px; animation:blink 1s steps(1,end) infinite; }

.consent-row{ display:flex; align-items:flex-start; gap:14px; margin:6px 0 20px; cursor:pointer; }
.consent-box{ width:32px; height:32px; border:3px solid #9a95bf; background:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--green); font-size:22px; }
.consent-row.on .consent-box{ border-color:var(--green); }
.consent-text{ font-size:14px; line-height:1.5; color:#cfcbef; white-space:pre-line; }

/* focus-driven bottom sheet: dim behind, tap to dismiss */
.kbd-backdrop{ position:absolute; inset:0; z-index:15; background:rgba(11,5,59,.28); }
.kbd{ position:absolute; left:50%; transform:translateX(-50%); bottom:34px; width:1360px; z-index:30;
  background:var(--onyx); border:5px solid #fff; box-shadow:0 0 0 5px var(--onyx),0 14px 0 rgba(0,0,0,.4);
  padding:18px; }
.kbd.pop-up{ animation:kbUp .22s ease both; }
@keyframes kbUp{ from{ transform:translate(-50%,120%); } to{ transform:translate(-50%,0); } }
.kbd-row{ display:flex; justify-content:center; gap:10px; margin-bottom:10px; }
.kbd-row:last-child{ margin-bottom:0; }
.key{ min-width:96px; height:88px; flex:0 0 auto; background:var(--onyx3); color:#fff;
  border:0; border-bottom:5px solid #0b0640; font-family:'Press Start 2P','Press Start',monospace;
  font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 5px 0 rgba(0,0,0,.3); }
.key:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.3); }
.key.wide{ min-width:150px; }
.key.space{ min-width:560px; }
.key.act{ background:var(--green); color:#08240f; border-bottom-color:#3c7f2c; font-size:14px; }
.key.del{ background:var(--red); border-bottom-color:#8f141a; font-size:14px; }
.key.on{ outline:4px solid var(--cyan); outline-offset:-4px; }

/* ============================================================
   GAMEPLAY
   ============================================================ */
.play{ position:absolute; inset:0; background:linear-gradient(180deg,#0b053b 0%,#140c57 100%); color:#fff; }
.topbar{ height:104px; display:flex; align-items:center; justify-content:space-between;
  padding:0 40px; background:var(--onyx); border-bottom:4px solid #2a1f7a; position:relative; }
.topbar .haz{ display:none; position:absolute; left:0; right:0; bottom:-4px; height:4px; }
.timer{ font-family:'Press Start 2P','Press Start',monospace; font-size:40px; }
.progress-wrap{ text-align:center; min-width:440px; }
.progress-lbl{ font-size:14px; letter-spacing:.14em; color:#a9a3d6; margin-bottom:8px; }
.progress-bar{ height:20px; background:#241a6b; border:2px solid #3a2f8a; overflow:hidden; }
.progress-fill{ height:100%; width:0%;
  background:repeating-linear-gradient(90deg,#5eba47 0 10px,#4d9a37 10px 20px); transition:width .3s; }
.scores{ display:flex; align-items:flex-start; gap:30px; margin-right:210px; }
.score-col{ text-align:right; }
.score-col .lbl{ font-size:13px; letter-spacing:.14em; }
.score-col .val{ font-family:'Press Start 2P','Press Start',monospace; font-size:30px; margin-top:6px; }
.score-div{ width:3px; align-self:stretch; background:#2a1f7a; }

/* Queue indicator: live backlog of alarms waiting for a free slot. */
.qbadge{ display:flex; align-items:center; gap:10px; padding:8px 14px; margin-left:6px;
  border:3px solid #3a2f8a; background:#1a1258; color:#a9a3d6; }
.qbadge .qglyph{ width:20px; height:16px; position:relative; flex:0 0 auto;
  background:#4a4488; box-shadow:4px -4px 0 -1px #1a1258, 4px -4px 0 #4a4488, 8px -8px 0 -1px #1a1258, 8px -8px 0 #4a4488; }
.qbadge .qtext{ font-size:12px; letter-spacing:.18em; }
.qbadge .qcount{ font-size:22px; color:#cfd0ee; min-width:28px; text-align:right; }
.qbadge.hot{ border-color:var(--orange); background:#3a1e12; color:var(--orange); }
.qbadge.hot .qglyph{ background:var(--orange); box-shadow:4px -4px 0 -1px #3a1e12, 4px -4px 0 var(--orange), 8px -8px 0 -1px #3a1e12, 8px -8px 0 var(--orange); }
.qbadge.hot .qcount{ color:#fff; }

/* Fixed 3x3 slot grid that fills the screen. NEVER scrolls; slots never move. */
.playfield{ padding:20px 40px; height:calc(1080px - 104px); overflow:hidden; }
.agrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr)); gap:18px; height:100%; }
.slot{ display:flex; min-width:0; min-height:0; }
.acard{ flex:1; min-width:0; min-height:0; overflow:hidden;
  background:var(--onyx); border:4px solid #fff; border-left-width:14px;
  box-shadow:8px 9px 0 rgba(0,0,0,.4); padding:14px 16px; color:#fff;
  display:flex; flex-direction:column; position:relative; transition:opacity .2s ease; }
.acard.fade-out{ opacity:0; }
/* empty slot idle placeholder (fixed cell, no card) */
.acard.empty{ border:3px dashed #2a1f7a; border-left-width:3px; box-shadow:none;
  background:rgba(255,255,255,.03); align-items:center; justify-content:center; text-align:center; }
.acard .turbine{ font-family:'Press Start 2P','Press Start',monospace; font-size:14px; color:var(--cyan); }
.acard .type{ font-size:21px; font-weight:800; margin-top:7px; line-height:1.15; }
.adet{ display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; margin:9px 0 10px; }
.adet .k{ color:#a9a3d6; font-size:13px; }
.adet .v{ font-weight:700; font-size:18px; }
.aacts{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:auto; }
/* Prototype .abtn: icon stacked above the label, transparent, colored border. */
.abtn{ cursor:pointer; border:3px solid; background:transparent; padding:12px 6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  transition:transform .06s; min-height:100px; overflow:hidden; }
.abtn:active{ transform:scale(.94); }
.abtn-icon{ width:34px; height:34px; flex:0 0 auto; }
/* Branded wordmark label under the icon. Explicit width is REQUIRED: these
   SVGs carry only a viewBox (no intrinsic size), so `width:auto` would
   collapse to 0 inside the flex button. */
.abtn-label{ display:block; width:100%; max-width:150px; height:auto; pointer-events:none; }
.abtn.keep{ border-color:var(--green); }
.abtn.curtail{ border-color:var(--orange); }
.abtn.stop{ border-color:var(--red); }
.alarm-icon{ height:30px; width:auto; }
/* actioned cards stay in place as a dimmed, non-interactive done tile */
.acard.is-done{ box-shadow:8px 9px 0 rgba(0,0,0,.25); }
.acard.is-done .aacts{ pointer-events:none; }
.done{ position:absolute; inset:0; background:rgba(11,5,59,.9); border:4px solid;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; text-align:center; }
.done .dl{ font-family:'Press Start 2P','Press Start',monospace; font-size:16px; }
.done .dp{ font-family:'Press Start 2P','Press Start',monospace; font-size:22px; color:#fff; }
.end-game{ position:absolute; top:26px; right:40px; z-index:50; font-size:14px; padding:14px 20px; }

/* ============================================================
   HOW TO PLAY (help) - daytime, no scroll, fits 1920x1080
   ============================================================ */
.help-page{ position:absolute; inset:0; padding:50px 60px 24px; z-index:20;
  display:flex; flex-direction:column; gap:16px; }
.help-head{ text-align:center; }
.help-head .scene-sub{ max-width:1500px; margin-left:auto; margin-right:auto; }
.help-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:stretch; }
.help-panel{ padding:22px 24px; }
.help-beat{ display:flex; flex-direction:column; }
.help-sec{ font-family:'Press Start 2P','Press Start',monospace; font-size:18px; color:var(--cyan);
  display:flex; align-items:center; gap:12px; }
.help-no{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  flex:0 0 auto; background:var(--onyx3); color:#fff; font-size:16px; }
.help-note{ font-size:16px; line-height:1.5; color:#dcdbf5; margin-top:16px; }

/* action explainer rows (icon + branded wordmark + description) */
.help-legend{ display:flex; flex-direction:column; gap:14px; margin-top:16px; }
.help-legend-row{ display:flex; align-items:center; gap:16px; padding:14px 16px; border:3px solid;
  background:rgba(255,255,255,.04); }
.help-legend-row.keep{ border-color:var(--green); }
.help-legend-row.curtail{ border-color:var(--orange); }
.help-legend-row.stop{ border-color:var(--red); }
.help-legend-row .rt{ display:flex; flex-direction:column; gap:8px; min-width:0; }
/* explicit width: these wordmark SVGs carry only a viewBox */
.help-legend-row .rt img{ display:block; width:190px; max-width:100%; height:auto; }
.help-legend-row .rt .d{ font-size:15px; color:#dcdbf5; line-height:1.4; }

/* YOU vs AI */
.help-vs{ display:flex; align-items:stretch; gap:16px; margin-top:16px; }
.help-vs-col{ flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:8px;
  padding:18px 20px; border:3px solid; background:rgba(255,255,255,.04); }
.help-vs-lbl{ font-size:13px; letter-spacing:.14em; }
.help-vs-val{ font-size:30px; }
.help-vs-mid{ align-self:center; font-size:16px; color:#a9a3d6; }

/* THE QUEUE */
.help-queue-head{ display:flex; align-items:center; gap:22px; }
.help-queue-body{ display:grid; grid-template-columns:1fr 1fr; gap:12px 34px; margin-top:16px; }
.help-bullet{ display:flex; align-items:flex-start; gap:12px; font-size:16px; color:#dcdbf5; line-height:1.45; }
.help-dot{ width:12px; height:12px; margin-top:5px; flex:0 0 auto; background:var(--cyan); }

.help-foot{ text-align:center; margin-top:auto; }

/* the sample card reuses the real .acard/.aacts markup but is display-only */
.acard.ex-sample{ flex:none; }
.acard.ex-sample .aacts{ pointer-events:none; }

/* ============================================================
   RESULTS
   ============================================================ */
.results{ position:absolute; inset:0; background:linear-gradient(180deg,#0b053b 0%,#140c57 100%);
  color:#fff; overflow:hidden; }
.res-inner{ position:relative; z-index:10; text-align:center; padding-top:64px; }
.res-panels{ display:flex; justify-content:center; gap:34px; margin-top:46px; }
.res-panel{ width:420px; padding:32px; }
.res-panel .rl{ font-size:16px; letter-spacing:.16em; color:#a9a3d6; }
.res-panel .rv{ font-family:'Press Start 2P','Press Start',monospace; font-size:50px; margin:20px 0 12px; }
.res-panel .rd{ font-size:19px; color:#dcdbf5; }
.res-you{ border-color:var(--cyan); box-shadow:0 0 0 5px var(--cyan),12px 14px 0 rgba(0,0,0,.5); }
.res-ai{ border-color:var(--red); box-shadow:0 0 0 5px var(--red),12px 14px 0 rgba(0,0,0,.5); }
.res-opt{ border-color:var(--green); box-shadow:0 0 0 5px var(--green),12px 14px 0 rgba(0,0,0,.5); }
.res-actions{ display:flex; justify-content:center; gap:22px; margin-top:40px; }

/* ============================================================
   ANSWER REVIEW (explainability)
   ============================================================ */
.review{ position:absolute; inset:0; background:linear-gradient(180deg,#0b053b 0%,#140c57 100%);
  color:#fff; overflow:hidden; }
.rv-head{ position:absolute; top:44px; left:0; right:0; text-align:center; z-index:20; }
.rv-body-wrap{ position:absolute; top:156px; bottom:106px; left:50%; transform:translateX(-50%);
  width:1560px; overflow-y:auto; z-index:20; padding:0 12px 4px 0; }
.rv-foot{ position:absolute; bottom:30px; left:0; right:0; text-align:center; z-index:20; }
.rvcard{ display:grid; grid-template-columns:400px 1fr; gap:0; margin-bottom:18px;
  background:var(--onyx); border:4px solid #fff; border-left-width:14px;
  box-shadow:0 0 0 4px var(--onyx),8px 9px 0 rgba(0,0,0,.4); text-align:left; }
.rvleft{ padding:22px 24px; border-right:3px solid #2a1f7a; }
.rvname{ font-size:21px; font-weight:800; margin-top:10px; line-height:1.2; }
.rvread{ display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; margin:16px 0 16px; }
.rvread .k{ display:block; color:#a9a3d6; font-size:11px; letter-spacing:.08em; }
.rvread .v{ display:block; font-weight:700; font-size:16px; margin-top:3px; }
.rvverdict{ font-family:'Press Start 2P','Press Start',monospace; font-size:12px; line-height:1.6;
  text-align:center; padding:11px 8px; }
.rvright{ padding:20px 24px; }
.rvchips{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.rvchip{ position:relative; border:3px solid; background:rgba(255,255,255,.04);
  padding:12px 10px 14px; text-align:center; }
.rvck{ font-family:'Press Start 2P','Press Start',monospace; font-size:10px; letter-spacing:.05em; color:#a9a3d6; }
.rvca{ font-size:18px; font-weight:800; margin-top:9px; letter-spacing:.01em; }
.rvcm{ font-size:20px; font-weight:900; margin-top:6px; line-height:1; }
.rvwhy{ font-size:16px; line-height:1.5; color:#d3d1ef; margin-top:16px;
  background:rgba(255,255,255,.05); border-left:4px solid #3a2f8a; padding:12px 16px; }
.rvwhy.rvai{ border-left-color:var(--cyan); background:rgba(123,226,255,.07); }

/* ============================================================
   LEADERBOARD
   ============================================================ */
.lbtab{ font-family:'Press Start 2P','Press Start',monospace; font-size:16px; border:4px solid #fff;
  background:var(--onyx); color:#fff; padding:16px 30px; }
.lb-head-wrap{ position:absolute; top:198px; left:50%; transform:translateX(-50%); width:1280px; z-index:20; }
.lb-body-wrap{ position:absolute; top:252px; bottom:130px; left:50%; transform:translateX(-50%);
  width:1280px; overflow-y:auto; z-index:20; }
.lbrow{ display:grid; grid-template-columns:90px 1fr 200px 130px 220px; align-items:center;
  padding:16px 24px; gap:12px; }
.lbhead{ font-family:'Press Start 2P','Press Start',monospace; font-size:12px; color:#cfd0ee;
  background:var(--onyx); border:4px solid #fff; }
.lbbody .lbrow{ background:rgba(255,255,255,.94); border:3px solid rgba(11,5,59,.14); margin-top:10px;
  color:var(--onyx); box-shadow:4px 5px 0 rgba(0,0,0,.3); }
.lbbody .lbrow.you{ background:rgba(123,226,255,.92); border-color:var(--onyx); }
.lbbody .lbrow .sc{ font-family:'Press Start 2P','Press Start',monospace; font-size:18px; }
.lb-play{ position:absolute; bottom:34px; left:0; right:0; text-align:center; z-index:20; }
.lb-msg{ position:absolute; top:252px; left:0; right:0; text-align:center; color:var(--cream); z-index:19; }

/* ============================================================
   ADMIN
   ============================================================ */
.admin{ position:absolute; inset:0; background:#eef2fb; color:var(--onyx); overflow:hidden; }
/* admin is a light panel in both liveries; keep its brandbar dark regardless */
.admin .brandbar img{ filter:none !important; }
.admin .brandbar .nm{ color:var(--onyx) !important; text-shadow:none !important; }
.admin-gate{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:26px; background:#eef2fb; z-index:50; }
.admin-scroll{ position:absolute; top:196px; bottom:98px; left:44px; right:44px; overflow-y:auto; padding-right:8px; }
.adm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
.adm-card{ background:#fff; border:4px solid rgba(11,5,59,.14); padding:22px 24px; }
.adm-card.danger{ border-color:rgba(216,31,40,.4); }
.adm-h{ font-size:14px; font-weight:800; letter-spacing:.16em; color:#7a76a8; margin:0 0 16px; text-transform:uppercase; }
.adm-h.red{ color:var(--red); }
.adm-note{ font-size:14px; color:#6a6597; line-height:1.5; margin:14px 0 0; }
.adm-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.adm-tile{ background:#eef2fb; border:2px solid rgba(11,5,59,.1); padding:14px 16px; }
.adm-tile .n{ font-family:'Press Start 2P','Press Start',monospace; font-size:19px; color:var(--onyx); }
.adm-tile .l{ font-size:12px; letter-spacing:.1em; color:#7a76a8; margin-top:9px; }
.num-in{ width:150px; font-family:'Press Start 2P','Press Start',monospace; font-size:16px;
  padding:13px 14px; background:#fff; color:var(--onyx); border:3px solid var(--onyx3); outline:none; }
.reg-in{ font-family:'Aptos','Segoe UI',sans-serif; font-size:18px; font-weight:700; padding:11px 13px;
  background:#fff; color:var(--onyx); border:3px solid var(--onyx3); outline:none; }
textarea.disc{ width:100%; font-family:'Aptos','Segoe UI',sans-serif; font-size:16px; line-height:1.5;
  padding:12px 14px; background:#fff; color:var(--onyx); border:3px solid var(--onyx3); outline:none;
  resize:vertical; min-height:92px; }
.disc-card{ background:#fff; border:4px solid rgba(11,5,59,.14); padding:20px 22px; margin-bottom:16px; }
.disc-card.on{ border-color:var(--green); background:rgba(94,186,71,.08); }
.chk-row{ display:flex; align-items:center; gap:12px; font-size:17px; color:var(--onyx); cursor:pointer; padding:8px 0; }
.chk-box{ width:26px; height:26px; border:3px solid #9a95bf; background:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--green); font-size:18px; }
.chk-row.on .chk-box{ border-color:var(--green); }
.admin-foot{ position:absolute; bottom:0; left:0; right:0; background:#fff;
  border-top:4px solid rgba(11,5,59,.14); padding:20px 44px; display:flex; align-items:center; gap:20px; z-index:30; }
.admin-foot .msg{ flex:1; font-size:16px; font-weight:700; color:#2f8f2a; }

.back-btn{ position:absolute; top:34px; right:44px; z-index:40; font-size:11px; padding:14px 18px; }

/* small helper */
.hidden{ display:none !important; }

/* ============================================================
   OPTIONAL SUNSET LIVERY
   Everything sunset-specific lives under [data-livery="sunset"]
   (flag set on <html> from server config `sunsetLivery` or the
   admin toggle). With the flag absent the daytime design above
   is what renders. Kept readable at 3m.
   ============================================================ */
[data-livery="sunset"] #stage{
  background:linear-gradient(180deg,
    var(--sky-top) 0%, var(--sky-1) 30%, var(--sky-2) 52%,
    var(--sky-3) 70%, var(--sky-4) 84%, var(--sky-glow) 100%);
  color:var(--cream);
}
[data-livery="sunset"] .scene .sun{ display:block; }
[data-livery="sunset"] .scene .clouds{
  opacity:.4;
  filter:brightness(.55) sepia(.6) hue-rotate(-18deg) saturate(2.2);
  mix-blend-mode:screen;
}
[data-livery="sunset"] .ground{
  background:linear-gradient(180deg,var(--hill) 0%,#0a0518 100%);
  border-top:5px solid var(--hill-edge);
}
[data-livery="sunset"] .ground::before{
  top:-5px; height:5px;
  background:repeating-linear-gradient(90deg,rgba(239,122,52,.5) 0 30px,rgba(120,30,60,.4) 30px 60px);
}
[data-livery="sunset"] .turb{ filter:brightness(0) drop-shadow(0 0 1px rgba(0,0,0,.4)); }
[data-livery="sunset"] .brandbar img{ filter:brightness(0) invert(1) drop-shadow(1px 1px 0 rgba(0,0,0,.5)); }
[data-livery="sunset"] .brandbar .nm{ color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,.45); }
[data-livery="sunset"] .scene-h{ color:#fff; text-shadow:5px 6px 0 rgba(0,0,0,.5); }
[data-livery="sunset"] .scene-sub{ color:var(--cream); text-shadow:1px 2px 0 rgba(0,0,0,.4); }
[data-livery="sunset"] .topbar .haz{ display:block; }