/* ============================================================
   NIGHTRUN — premium interface theme
   Graphite / ivory / champagne / jade. Loaded after game.css
   and lightning.css so it can refine the whole surface.
   ============================================================ */
:root{
  --ink:#070808;
  --ivory:#f0eadf;
  --ivory-2:#d8d0c2;
  --muted:#918d83;
  --muted-2:#6b6a64;
  --line:rgba(234,226,210,.11);
  --line-2:rgba(234,226,210,.18);
  --champagne:#c9b181;
  --champagne-2:#e7d6b1;
  --jade:#8fd8b7;
  --jade-2:#dcf7eb;
  --ice:#acc8d6;
  --copper:#c18d6b;
  --danger:#be6d69;
}

/* ---------- page / stage ---------- */
body{background:#050607;color:var(--ivory);}
#page{
  background:
    radial-gradient(58vw 48vh at 50% 6%, rgba(170,185,190,.055), transparent 64%),
    radial-gradient(55vw 45vh at 50% 104%, rgba(200,170,120,.045), transparent 68%),
    #050607;
}
#page:before{
  opacity:.42;
  background:repeating-linear-gradient(104deg, rgba(255,255,255,.012) 0 1px, transparent 1px 220px);
}
#stage{
  background:#050607;
  border-radius:20px;
  box-shadow:0 55px 130px rgba(0,0,0,.8), 0 0 0 1px rgba(232,222,204,.07);
}
@media (max-width:620px),(max-height:700px){
  #stage{border-radius:0;box-shadow:none;}
}

/* ---------- HUD panels ---------- */
.panel{
  background:linear-gradient(160deg, rgba(19,21,22,.74), rgba(8,9,10,.56));
  border:1px solid var(--line);
  border-radius:11px;
  box-shadow:0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.035);
}
.panel:after{
  left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(234,226,210,.16),transparent);
}
.micro{
  color:#8d8a80;font-size:10.5px;letter-spacing:.18em;font-weight:600;
}
.scoreValue{
  color:var(--ivory);font-weight:800;font-size:34px;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.bestRow{color:#72736e;font-size:9.5px;letter-spacing:.10em;}
.bestRow b{color:#c5bdaf;font-weight:600;}
.comboValue{color:#767a75;font-weight:800;}
.comboValue em{color:#8d8a80;opacity:.9;}
.comboPanel.hot{border-color:rgba(201,177,129,.24);}
.comboPanel.hot .comboValue{color:var(--champagne-2);text-shadow:0 0 22px rgba(220,195,145,.10);}
.comboTrack{height:3px;background:rgba(240,232,215,.075);}
.comboTrack i{
  background:linear-gradient(90deg,#ad9064,#e2cfa8);
  box-shadow:none;
}

/* ---------- reactor gauge ---------- */
.energyPanel{
  background:linear-gradient(160deg, rgba(16,20,19,.72), rgba(7,9,9,.52));
  border:1px solid rgba(162,206,190,.14);
  border-radius:10px;
  box-shadow:0 10px 26px rgba(0,0,0,.24);
}
.energyMeta{color:#8b9b94;font-size:11px;letter-spacing:.12em;font-weight:600;}
.energyMeta svg{color:#9fe2c5;filter:drop-shadow(0 0 4px rgba(120,230,190,.22));}
.energyMeta b{color:#e1f5eb;font-size:12.5px;font-weight:600;}
.energyTrack{
  height:10px;margin-top:7px;border-radius:2px;
  background:rgba(3,6,5,.85);
  border:1px solid rgba(162,206,190,.12);
}
#energyFill{
  background:linear-gradient(90deg,#4b8b76,#8fd8b7 55%,#dcf7eb);
  box-shadow:0 0 9px rgba(120,225,185,.22);
  transition:background .25s;
}
.energySeg{background:repeating-linear-gradient(90deg,transparent 0 9.4%, rgba(2,5,4,.66) 9.4% 10%);}
.energyPanel.low{border-color:rgba(190,109,105,.38);animation:none;box-shadow:0 10px 26px rgba(0,0,0,.24), inset 0 0 0 1px rgba(190,109,105,.08);}
.energyPanel.low #energyFill{background:linear-gradient(90deg,#9d4f4d,#cf8d7d);box-shadow:none;}
.energyPanel.charged{border-color:rgba(160,235,205,.5);animation:themeCharge .65s ease;}
.energyPanel.charged #energyFill{filter:brightness(1.25);}
@keyframes themeCharge{
  0%{box-shadow:0 0 0 rgba(120,230,190,0)}
  36%{box-shadow:0 0 24px rgba(120,230,190,.22)}
  100%{box-shadow:0 0 0 rgba(120,230,190,0)}
}

/* ---------- speed ---------- */
.speedo{
  background:linear-gradient(160deg, rgba(14,16,17,.60), rgba(7,8,9,.44));
  border:1px solid var(--line);
  box-shadow:none;
}
.speedo b{color:#ece5d8;font-size:20px;font-weight:700;text-shadow:none;}
.speedo span{color:#777a74;font-size:9px;letter-spacing:.14em;}
.speedo .spdBar{background:rgba(255,255,255,.06);}
.speedo .spdBar i{background:linear-gradient(90deg,#8a9fa7,#d7e4e5);box-shadow:none;}

/* ---------- top tools ---------- */
.iconBtn{
  background:rgba(11,13,14,.55);
  border:1px solid var(--line);
  color:#c9c2b4;
  border-radius:50%;
  box-shadow:0 7px 18px rgba(0,0,0,.24);
}
.iconBtn:active{transform:scale(.95);background:rgba(30,32,32,.65);}
.iconBtn.off{color:#5a5c57;border-color:rgba(234,226,210,.06);}

/* ---------- driving controls ---------- */
.pad{
  background:linear-gradient(165deg, rgba(38,40,39,.82), rgba(12,13,14,.95));
  border:1px solid rgba(234,226,210,.16);
  border-radius:50%;
  color:#e8e1d3;
  box-shadow:0 13px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.055);
}
.pad svg{filter:none;}
.pad:active,.pad.down{
  background:linear-gradient(165deg, rgba(72,69,60,.82), rgba(18,18,17,.96));
  border-color:rgba(226,207,170,.55);
  box-shadow:0 0 0 1px rgba(226,207,170,.10), inset 0 0 18px rgba(226,207,170,.05), 0 8px 20px rgba(0,0,0,.36);
}
.actionBtn{
  background:radial-gradient(circle at 50% 32%, rgba(56,58,55,.88), rgba(8,9,10,.99) 68%);
  border:1px solid rgba(226,207,170,.52);
  color:#f1eadd;
  box-shadow:
    0 0 0 6px rgba(226,207,170,.035),
    0 15px 34px rgba(0,0,0,.5),
    inset 0 0 26px rgba(255,255,255,.022);
}
.actionBtn:before{
  inset:-8px;
  border:1px solid rgba(226,207,170,.13);
  animation:none;
}
.actionBtn .aIcon{filter:drop-shadow(0 0 5px rgba(226,207,170,.2));}
.actionBtn .aLabel{font-weight:700;letter-spacing:.12em;text-shadow:none;}
.actionBtn .aSub{color:#8d897f;font-weight:600;letter-spacing:.18em;}
.actionBtn.air{
  background:radial-gradient(circle at 50% 32%, rgba(84,54,42,.86), rgba(10,8,7,.99) 70%);
  border-color:rgba(201,137,103,.55);
  box-shadow:0 0 0 6px rgba(201,137,103,.035), 0 15px 34px rgba(0,0,0,.5), inset 0 0 26px rgba(220,150,110,.035);
}
.actionBtn.air .aLabel{color:#f3e9dd;text-shadow:none;}
.actionBtn.air .aSub{color:#a78d7b;}
.actionBtn.locked{animation:themeLocked 1.1s ease-in-out infinite;}
@keyframes themeLocked{
  0%,100%{box-shadow:0 0 0 6px rgba(201,137,103,.035), 0 15px 34px rgba(0,0,0,.5), inset 0 0 26px rgba(220,150,110,.035);}
  50%{box-shadow:0 0 0 9px rgba(201,137,103,.06), 0 15px 34px rgba(0,0,0,.5), inset 0 0 30px rgba(220,150,110,.08);}
}
.actionBtn.cooling{filter:saturate(.72) brightness(.86);}
.actionBtn.noEnergy{border-color:rgba(190,109,105,.42);}

/* ---------- overlays ---------- */
.overlay{
  background:
    radial-gradient(86% 52% at 50% 54%, rgba(4,5,6,.58) 0%, rgba(4,5,6,.34) 46%, transparent 74%),
    radial-gradient(90% 55% at 50% 24%, rgba(206,188,150,.045), transparent 70%),
    linear-gradient(180deg, rgba(4,5,6,.36) 0%, rgba(4,5,6,.58) 44%, rgba(3,4,5,.80) 100%);
}
#startOverlay{
  background:
    radial-gradient(84% 50% at 50% 52%, rgba(4,5,6,.56) 0%, rgba(4,5,6,.30) 48%, transparent 75%),
    radial-gradient(90% 55% at 50% 24%, rgba(206,188,150,.04), transparent 70%),
    linear-gradient(180deg, rgba(4,5,6,.32) 0%, rgba(4,5,6,.54) 44%, rgba(3,4,5,.72) 100%);
}
.eyebrow{font-size:9.5px;letter-spacing:.24em;color:#8e8a80;font-weight:600;}
.eyebrow:before{background:linear-gradient(90deg,transparent,rgba(201,177,129,.7));}
.eyebrow .dot{background:var(--champagne);box-shadow:none;width:4px;height:4px;}
.menuBest{
  background:none;border:0;padding:0;color:#817d73;
  font-size:9px;letter-spacing:.18em;font-weight:600;
}
.menuBest b{color:#ded6c7;font-size:12px;font-weight:600;}
.menuBest:before{width:3px;height:3px;background:#948e82;box-shadow:none;}

.gameTitle{
  font-weight:800;letter-spacing:-.035em;
  background:linear-gradient(180deg,#fcf9f2 0%,#e7dfd0 36%,#b8aa92 72%,#8a7c64 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.34));
}
.gameTitle span{
  font-size:14px;letter-spacing:.28em;color:var(--champagne);
  -webkit-text-fill-color:var(--champagne);font-weight:600;
  margin-top:14px;filter:none;
}
.tagline{color:#b1ada2;font-size:12.5px;font-weight:400;max-width:380px;}
.threatRow{gap:14px;margin-bottom:16px;}
.threatChip{
  background:none;border:0;padding:0;border-radius:0;
  font-size:9.8px;letter-spacing:.07em;color:#98948a;font-weight:500;gap:6px;
}
.threatChip i{width:3px;height:3px;box-shadow:none!important;}
.threatChip.b i{background:#b69b6d;}
.threatChip.d i{background:#b89072;}
.threatChip.f i{background:#b25e5c;}
.threatChip.br i{background:#b4778f;}

.howGrid{
  display:grid;grid-template-columns:1fr;gap:0;
  border-top:1px solid var(--line);
  margin-bottom:0;
}
.howCard{
  display:grid;grid-template-columns:108px 1fr;align-items:start;gap:14px;
  padding:11px 0;min-height:0;
  border:0;border-bottom:1px solid var(--line);
  border-radius:0;background:none;
}
.howCard:last-child{border-bottom:0;}
.howCard.wide{grid-column:auto;min-height:0;}
.howCard .hk{margin:0;gap:4px;padding-top:1px;grid-row:1;}
.howCard p{margin:0;font-size:11.5px;line-height:1.55;color:#a5a198;font-weight:400;}
.howCard p b{color:#e4dccc;font-weight:600;}
.howCard .key{
  min-width:19px;height:19px;padding:0 5px;border-radius:3px;
  background:rgba(240,232,215,.045);
  border:1px solid rgba(240,232,215,.14);border-bottom-width:1px;
  color:#d5cdbf;font-size:8.5px;font-weight:600;letter-spacing:.05em;
}

/* small back link on the start screen (site integration) */
.siteBack{
  position:absolute;top:22px;left:22px;z-index:4;
  color:#8f8a80;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-decoration:none;line-height:1.2;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.siteBack:hover{color:#e2dacb;border-bottom-color:rgba(226,218,203,.35);}
@media (max-width:380px){
  .siteBack{font-size:9px;letter-spacing:.12em;top:18px;left:16px;}
}

.fuelTip,.stormTip{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0;padding:10px 0;border:0;border-top:1px solid var(--line);
  border-radius:0;background:none;
  font-size:10.5px;line-height:1.5;color:#a19d93;font-weight:500;
}
.stormTip{
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
}
.fuelTip b,.stormTip b{color:#ded8ca;font-weight:600;}
.fuelTip .fuelGap{width:14px;}
.stormIcon{color:#a9c6d6;filter:none;width:18px;height:18px;}
.stormIcon svg{width:15px;height:15px;}

.uraniumCell{
  width:11px;height:17px;border-radius:3px;
  position:relative;display:inline-block;flex:0 0 auto;
  background:linear-gradient(180deg,#323635,#111414 55%,#1b1e1d);
  border:1px solid rgba(205,220,210,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);
}
.uraniumCell:before{
  content:"";position:absolute;left:3px;right:3px;top:4px;height:9px;border-radius:1px;
  background:linear-gradient(180deg,#eafff5,#8fdcb9 48%,#307e63);
  box-shadow:0 0 5px rgba(120,235,190,.30);
}
.uraniumCell:after{
  content:"";position:absolute;left:2px;right:2px;bottom:2px;height:2px;
  background:rgba(201,177,129,.55);
}
.uraniumCell.enriched{border-color:rgba(228,215,190,.5);}
.uraniumCell.enriched:before{
  background:linear-gradient(180deg,#fff7e8,#efd2e0 32%,#bfe8d8 64%,#dbe4f5);
  box-shadow:0 0 7px rgba(225,225,240,.38);
}

.primaryBtn{
  height:64px;border-radius:10px;
  background:linear-gradient(180deg,#f2e9da 0%,#dfcca9 52%,#c9b285 100%);
  border:1px solid rgba(255,255,255,.4);
  color:#121413;font-size:17px;font-weight:700;letter-spacing:.18em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.66), 0 15px 32px rgba(0,0,0,.45);
}
.primaryBtn:after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.48),transparent);
  animation:sheen 6.5s ease-in-out infinite;
}
.ghostBtn{
  background:rgba(255,255,255,.018);
  border:1px solid var(--line);
  color:#a8a397;font-size:11.5px;letter-spacing:.14em;font-weight:600;
}
.footNote{color:#76736c;font-size:9.5px;letter-spacing:.09em;}
.footNote b{color:#a7a195;font-weight:600;}

/* ---------- game over / pause ---------- */
.overCry{color:#b3a48f;font-size:11.5px;letter-spacing:.12em;font-weight:600;}
.newBest{
  color:var(--champagne);font-size:10px;letter-spacing:.18em;font-weight:600;
  animation:none;
}
.statGrid{gap:8px;margin-bottom:18px;}
.statBox{
  background:linear-gradient(160deg,rgba(18,20,20,.62),rgba(8,9,10,.46));
  border:1px solid var(--line);border-radius:8px;padding:12px 13px;
}
.statBox span{color:#7d7b73;font-size:9.5px;letter-spacing:.14em;font-weight:600;}
.statBox b{color:#ece5d8;font-size:26px;font-weight:700;}
.statBox b small{color:#777870;font-weight:500;}
.statBox.hl b{color:var(--champagne-2);text-shadow:none;}
.pauseCard{
  background:linear-gradient(165deg,rgba(20,22,22,.94),rgba(7,8,9,.97));
  border:1px solid var(--line-2);border-radius:14px;
  box-shadow:0 35px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.035);
}
.pauseCard h2{color:var(--ivory);font-weight:700;letter-spacing:.22em;}
.pauseCard p{color:#7f7d75;letter-spacing:.12em;font-size:11px;}
.hudMini div{color:#7b7972;font-size:9.5px;}
.hudMini b{color:#e3dacb;font-weight:600;}

/* ---------- lightning warning, matched to the new palette ---------- */
.lightningWarn{
  background:linear-gradient(160deg,rgba(17,21,24,.95),rgba(7,9,11,.93));
  border:1px solid rgba(168,200,214,.32);
  border-radius:10px;
  box-shadow:0 15px 34px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.055);
}
.lightningWarn.urgent{
  border-color:rgba(190,109,105,.85);
  box-shadow:0 0 0 1px rgba(190,109,105,.12), 0 15px 34px rgba(0,0,0,.36);
  animation:none;
}
.lwIcon{
  background:rgba(168,200,214,.06);
  border:1px solid rgba(168,200,214,.18);
  color:#d2e5ed;border-radius:8px;
}
.lwIcon svg{filter:drop-shadow(0 0 5px rgba(170,205,220,.28));animation:lwBolt 1.7s ease-in-out infinite;}
.lwTitle{color:#e7e2d7;font-size:14px;font-weight:700;letter-spacing:.05em;}
.lwTitle b{color:#bfdae6;font-size:15px;text-shadow:none;}
.lwSub{color:#8e999c;font-size:9.8px;letter-spacing:.025em;}
.lwTime{color:#7c8b8f;font-size:9px;}
.lwTime b{color:#e6eef0;font-size:19px;font-weight:600;}
.lwBar{height:3px;background:rgba(255,255,255,.08);}
.lwBar i{background:linear-gradient(90deg,#7fa6b7,#cfe6ec);box-shadow:none;}
.lightningWarn.urgent .lwBar i{background:linear-gradient(90deg,#b96f6b,#dfb7ad);box-shadow:none;}

/* small screens: keep the premium proportions, never shrink targets */
@media (max-width:380px){
  .gameTitle span{font-size:13px;letter-spacing:.20em;}
  .tagline{font-size:13px;}
  .howCard{grid-template-columns:94px 1fr;gap:10px;}
  .howCard p{font-size:11.5px;}
  .threatChip{font-size:10px;}
  .fuelTip,.stormTip{font-size:10.5px;}
  .primaryBtn{height:60px;font-size:17px;}
}