/* ============================================================================
   STYLES  —  DOM chrome only (HUD, overlays, modal). The game world itself is
   drawn on <canvas>; colours for tiles/ores live in JS (see ORES / matrixColor).
   ========================================================================== */
:root{
  --amber:#ffb347; --amber-dim:#a7702a; --green:#7dffb0; --red:#ff4d52;
  --cyan:#45f0e6; --panel:#15120e; --panel2:#1f1a12; --line:#3a2f1c;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow:hidden; background:#05060a;}
body{font-family:'Share Tech Mono',monospace; color:var(--amber); -webkit-user-select:none; user-select:none; touch-action:none;}
#game{position:fixed; inset:0;}
canvas{display:block; width:100%; height:100%;}

/* ---- HUD (top corners) ---- */
#hud{position:absolute; inset:0; pointer-events:none; z-index:5;}
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line);
  box-shadow:0 2px 0 rgba(0,0,0,.5), inset 0 0 18px rgba(255,179,71,.05); border-radius:6px;}
#topleft{position:absolute; top:12px; left:12px; width:248px; padding:12px 14px;}
#topleft .hdr{display:flex; align-items:baseline; justify-content:space-between; gap:18px; margin-top:11px;}
#topleft .big{font-family:'Bungee'; font-size:26px; color:var(--amber); text-shadow:0 0 12px rgba(255,179,71,.4); line-height:1;}
#cash{color:var(--green); font-family:'Bungee'; font-size:21px;}
.bar{margin:9px 0;}
.bar .cap{display:flex; justify-content:space-between; font-size:15px; letter-spacing:1.5px; color:var(--amber-dim); margin-bottom:4px;}
.bar .track{height:15px; background:#0a0805; border:1px solid var(--line); border-radius:3px; overflow:hidden;}
.bar .fill{height:100%; width:50%; transition:width .08s linear;}
#fuelFill{background:linear-gradient(90deg,#7a4a12,var(--amber));}
#fuelWarn{margin-left:6px; font-size:13px; letter-spacing:1px;}
#fuelWarn.low{color:var(--amber); text-shadow:0 0 6px rgba(255,179,71,.5);}
#fuelWarn.crit{color:var(--red); text-shadow:0 0 8px rgba(255,77,82,.7); animation:blink .7s steps(2) infinite;}
#hullFill{background:linear-gradient(90deg,#5a1f22,var(--red));}
#cargoFill{background:linear-gradient(90deg,#1f5a44,var(--green));}
/* cargo manifest — what you're hauling; price stays "$??" until you sell (mystery is the point) */
#manifest{display:flex; flex-direction:column; gap:3px; margin:2px 0 0;}
#manifest:empty{margin:0;}
#manifest .mrow{display:flex; align-items:center; font-size:13px; letter-spacing:.5px; color:var(--amber-dim);}
#manifest .sw{flex:0 0 auto; width:9px; height:9px; border-radius:2px; margin-right:7px; box-shadow:0 0 4px rgba(0,0,0,.6);}
#manifest .mn{flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#manifest .mn.un{color:#a98ff0; letter-spacing:2px;}
#manifest .mc{flex:0 0 auto; color:var(--amber); margin:0 7px;}
#manifest .mv{flex:0 0 auto; opacity:.55;}
#manifest .mv.kn{opacity:.9; color:var(--green);}
#tempFill{background:linear-gradient(90deg,#6a2bd0,#ff7a1f,#ff3b3b);}
#tempWarn{margin-left:6px; font-size:13px; letter-spacing:1px; color:var(--red); text-shadow:0 0 8px rgba(255,77,82,.7);}
#tempWarn.hot{animation:blink .7s steps(2) infinite;}
#prompt{position:absolute; left:50%; bottom:96px; transform:translateX(-50%); padding:8px 18px; font-size:18px;
  letter-spacing:2px; text-align:center; color:var(--green); opacity:0; transition:opacity .2s; white-space:nowrap;}
#prompt.show{opacity:1;} #prompt b{color:var(--amber);}
#warnstrip{position:absolute; left:50%; top:14px; transform:translateX(-50%); color:var(--red); font-size:16px;
  letter-spacing:3px; opacity:0; text-shadow:0 0 10px rgba(255,77,82,.6); transition:opacity .15s;}
#warnstrip.show{opacity:1; animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:.25;}}
.iconbtn{pointer-events:auto; position:absolute; width:38px; height:38px; top:12px; background:var(--panel);
  border:1px solid var(--line); border-radius:6px; color:var(--amber); font-size:17px; cursor:pointer; display:grid; place-items:center;}
.iconbtn:hover{border-color:var(--amber-dim);}
#musicBtn{right:138px;} #sfxBtn{right:96px;} #voiceBtn{right:54px;} #helpBtn{right:12px;}
/* muted toggle: a diagonal strike from top-right to bottom-left (no dimming) */
.iconbtn.off{overflow:hidden;}
.iconbtn.off::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom right, transparent calc(50% - 1px), currentColor calc(50% - 1px),
    currentColor calc(50% + 1px), transparent calc(50% + 1px));}

/* ---- drop-ship message banner ---- */
#dropmsg{position:absolute; right:38%; top:18%; z-index:8; width:450px; max-width:42vw; text-align:left;
  padding:10px 16px; background:linear-gradient(180deg,#241c11,#120d09); border:1px solid var(--line); border-radius:4px;
  color:var(--green); font-size:24px; line-height:1.4; letter-spacing:1px; opacity:0; transition:opacity .3s; box-shadow:0 10px 40px rgba(0,0,0,.6);}
#dropmsg.show{opacity:1;}
#dropmsg .title{display:block; font-family:'Bungee',sans-serif; color:var(--amber); font-size:30px; letter-spacing:2px; line-height:1.05; margin-bottom:10px; text-transform:uppercase;}
#dropmsg .who{display:block; color:var(--amber-dim); font-size:11px; letter-spacing:3px; margin-bottom:5px;}

/* ---- mobile controls ---- */
#touch{position:absolute; inset:0; pointer-events:none; z-index:6; display:none;}
#touch.on{display:block;}
.tbtn{position:absolute; pointer-events:auto; width:62px; height:62px; border-radius:50%; background:rgba(31,26,18,.78);
  border:1px solid var(--line); color:var(--amber); font-size:24px; display:grid; place-items:center; backdrop-filter:blur(3px);}
.tbtn:active{background:rgba(255,179,71,.25);}
#tLeft{left:18px; bottom:80px;} #tRight{left:96px; bottom:80px;}
#tUp{right:96px; bottom:140px;} #tDown{right:96px; bottom:20px; font-size:14px;} #tAct{right:18px; bottom:80px; font-size:14px;}

/* ---- modal (Upgrades — the only menu left) ---- */
#modal{position:absolute; inset:0; z-index:20; background:rgba(5,4,3,.82); display:none; place-items:center;
  pointer-events:auto; backdrop-filter:blur(2px);}
#modal.show{display:grid;}
.sheet{width:min(560px,94vw); max-height:90vh; overflow:auto; background:linear-gradient(180deg,#1c1710,#100d09);
  border:1px solid var(--line); border-radius:10px; box-shadow:0 18px 60px rgba(0,0,0,.7), inset 0 0 40px rgba(255,179,71,.04);}
.sheet h1{font-family:'Bungee'; font-size:22px; color:var(--amber); letter-spacing:1px; padding:16px 20px 4px; text-shadow:0 0 16px rgba(255,179,71,.35);}
.sheet .sub{padding:0 20px 12px; color:var(--amber-dim); font-size:14px; letter-spacing:2px;}
.body{padding:8px 20px 16px;}
.line{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-bottom:1px dashed #2a2114;}
.line:last-child{border-bottom:none;}
.line .name{font-size:16px; flex:1 1 auto; min-width:0;} .line .meta{font-size:13px; color:var(--amber-dim);}
/* the price+button column never wraps or gets squeezed under a long description */
.line>span:last-child{flex:0 0 auto; white-space:nowrap; text-align:right;}
.btn{pointer-events:auto; font-family:'Share Tech Mono'; cursor:pointer; background:#2a2012; color:var(--amber);
  border:1px solid var(--amber-dim); padding:8px 14px; border-radius:5px; font-size:14px; letter-spacing:1px; white-space:nowrap;}
.btn:hover{background:#3a2c15;} .btn:disabled{opacity:.35; cursor:default;}
.btn.buy{color:var(--green); border-color:#2f6b50;} .btn.danger{color:var(--red); border-color:#6b2a2c;}
.foot{display:flex; justify-content:space-between; align-items:center; padding:12px 20px; border-top:1px solid var(--line);}
.foot .cash{color:var(--green); font-size:19px;}
.pip{display:inline-block; width:10px; height:6px; margin-right:2px; border-radius:1px; background:#3a2f1c;}
.pip.on{background:var(--amber); box-shadow:0 0 5px var(--amber);}
.bardim{color:var(--amber-dim); font-size:13px;}
.btn.small{padding:5px 11px; font-size:13px;}

/* ---- SUPPORT FUTURE DEVELOPMENT (pay-what-you-want overlay; same chrome as the board) ---- */
#support{position:absolute; inset:0; z-index:46; background:rgba(5,4,3,.86); display:none; place-items:center;
  pointer-events:auto; backdrop-filter:blur(2px);}
#support.show{display:grid;}
.support-sheet{width:min(520px,94vw);}
.support-body{padding:4px 22px 14px; color:var(--amber); font-size:15px; line-height:1.5;}
.support-body .dim{color:var(--amber-dim);}
.amt-row{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; padding:0 20px 14px;}
.amt-chip{font-family:'Share Tech Mono'; cursor:pointer; background:#241b0f; color:var(--amber);
  border:1px solid var(--line); padding:8px 16px; border-radius:5px; font-size:16px; letter-spacing:1px;}
.amt-chip:hover{background:#3a2c15;}
.amt-chip.on{background:#143a28; color:var(--green); border-color:#2f6b50; box-shadow:0 0 8px rgba(125,255,176,.25);}
.amt-custom{display:inline-flex; align-items:center; gap:3px; color:var(--amber-dim); font-size:16px;
  padding:0 6px; border:1px solid var(--line); border-radius:5px; background:#241b0f;}
.amt-custom.on{border-color:#2f6b50; color:var(--green);}
.amt-custom input{width:62px; background:transparent; border:none; outline:none; color:var(--amber);
  font-family:'Share Tech Mono'; font-size:16px;}
/* the support button leads the victory/game-over stack: full width, green, on its own row */
.btn.support-cta{flex:1 1 100%; color:var(--green); border-color:#2f6b50;}
.btn.support-cta:hover{background:#143a28;}

/* ---- HIGH SCORES board (own overlay, above the title/victory screens) ---- */
#board{position:absolute; inset:0; z-index:45; background:rgba(5,4,3,.86); display:none; place-items:center;
  pointer-events:auto; backdrop-filter:blur(2px);}
#board.show{display:grid;}
.board-sheet{width:min(620px,94vw);}
.board-tabs{display:flex; gap:6px; flex-wrap:wrap; padding:4px 20px 12px;}
.board-tab{font-family:'Share Tech Mono'; cursor:pointer; background:#241b0f; color:var(--amber-dim);
  border:1px solid var(--line); padding:6px 12px; border-radius:5px; font-size:13px; letter-spacing:1px;}
.board-tab:hover{background:#332512; color:var(--amber);}
.board-tab.on{background:#3a2c15; color:var(--amber); border-color:var(--amber-dim); box-shadow:0 0 10px rgba(255,179,71,.18);}
.board-body{padding:4px 20px 12px; min-height:220px;}
.board-note{color:var(--amber-dim); text-align:center; padding:40px 10px; line-height:1.6;}
.board-list{display:flex; flex-direction:column;}
.board-row{display:grid; grid-template-columns:34px 1fr 92px; align-items:center; gap:10px;
  padding:7px 0; border-bottom:1px dashed #2a2114; font-size:15px;}
.board-row:last-child{border-bottom:none;}
.board-row.me{background:rgba(125,255,176,.07); border-radius:4px;}
.bn-rank{color:var(--amber-dim); text-align:right; font-size:13px;}
.bn-name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bn-score{color:var(--green); text-align:right; font-variant-numeric:tabular-nums;}

/* ---- post-ending manifest score panel ---- */
.victory-score{margin:6px auto 14px; max-width:440px; padding:12px 16px; border:1px solid var(--line);
  border-radius:8px; background:rgba(20,40,28,.25);}
.vs-score{font-family:'Bungee'; color:var(--green,#7dffb0); font-size:17px; letter-spacing:1px;}
.vs-score b{font-size:22px;}
.vs-stats{margin-top:3px;} .vs-rank{margin-top:6px; min-height:1em;}
/* reserve the line height even before the async /board fetch fills it, so the buttons
   don't shift down after the drill grid is built (the pod would fall through them) —
   same reason .vs-rank carries a min-height. */
.vs-ending{margin-top:6px; color:var(--amber-dim); font-style:italic; min-height:1em;}
.vs-name{margin:10px 0 4px; display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap;}
.vs-name input{font-family:'Share Tech Mono'; background:#120f0a; color:var(--amber); border:1px solid var(--amber-dim);
  border-radius:5px; padding:6px 10px; font-size:14px; width:200px; max-width:60vw;}
.vs-link{background:none; border:none; color:var(--amber-dim); text-decoration:underline; cursor:pointer;
  font-family:'Share Tech Mono'; font-size:12px; padding:0;}
.victory-score .btn.small{margin-top:4px;}

/* ---- full-screen overlays (title + game over) ---- */
.screen{position:absolute; inset:0; z-index:30; display:grid; place-items:center; text-align:center; pointer-events:auto;}
#intro{background:radial-gradient(120% 90% at 50% 0%,#1a1407,#06070c);}
#gameover{background:radial-gradient(120% 90% at 50% 42%,rgba(42,10,10,.30),rgba(6,7,10,.70)); display:none;}
.screen.hide{display:none;} #gameover.show{display:grid;}
.logo{font-family:'Bungee'; font-size:clamp(40px,9vw,84px); color:var(--amber); letter-spacing:3px; text-shadow:0 0 30px rgba(255,179,71,.45); line-height:.95;}
#gameover .logo{color:var(--red); text-shadow:0 0 30px rgba(255,77,82,.5);}
.logo-img{display:block; width:min(300px,55vw); height:auto; margin:14px auto 0; image-rendering:auto;
  filter:drop-shadow(0 0 18px rgba(255,179,71,.3));}
.tag{color:var(--green); letter-spacing:6px; font-size:15px; margin:10px 0 26px;}
.ctrls{color:var(--amber-dim); font-size:15px; line-height:1.9; letter-spacing:1px;} .ctrls b{color:var(--amber);}
.start{margin-top:26px; font-size:16px; padding:12px 26px;}
.start.ghost{margin-top:12px; font-size:13px; padding:8px 18px; background:transparent; color:var(--amber-dim); border-color:var(--line);}
.start.ghost:hover{background:#241b0f; color:var(--amber);}
/* SUPPORT + SEND FEEDBACK grouped in their own small box, under Resume/Begin on the title/pause screen */
.intro-extra{margin:22px auto 0; max-width:320px; display:flex; flex-direction:column; gap:8px;
  padding:12px; border:1px solid var(--line); border-radius:9px; background:rgba(20,16,10,.35);}
.intro-extra .xbtn{pointer-events:auto; font-family:'Share Tech Mono'; cursor:pointer; font-size:12px;
  letter-spacing:1px; padding:7px 12px; border-radius:5px; background:transparent; color:var(--amber-dim);
  border:1px solid var(--line);}
.intro-extra .xbtn:hover{background:#241b0f; color:var(--amber);}
.intro-extra .xbtn.intro-support{color:var(--green); border-color:#2f6b50;}
.intro-extra .xbtn.intro-support:hover{background:#143a28; color:var(--green);}
.key{display:inline-block; margin-left:8px; padding:2px 8px; border:1px solid var(--amber-dim); border-radius:4px;
  font-size:12px; letter-spacing:1px; color:var(--amber-dim); vertical-align:middle;}
.deathline{color:#ffb3b6; font-size:17px; margin:6px 0 18px; letter-spacing:1px;}
.scan{position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18),rgba(0,0,0,.18) 1px,transparent 2px,transparent 3px);}

/* ---- victory (the company manifest, played straight) ---- */
#victory{background:radial-gradient(120% 90% at 50% 30%,rgba(20,40,28,.45),rgba(6,7,10,.85)); display:none;}
/* center when it fits, but scroll (top-anchored, via `safe`) when the manifest +
   productivity-score panel are taller than the viewport — so CONTINUE DIGGING at the
   bottom never gets clipped off the bottom edge. */
#victory.show{display:flex; flex-direction:column; align-items:center; justify-content:safe center;
  overflow-y:auto; padding:24px 12px; box-sizing:border-box;}
.warp-stars{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
#victory > div:not(.warp-stars){z-index:1;}   /* content + scanlines ride above the warp */
/* ascent white-out — sits above every screen; opacity is driven from updateAscent (transition set inline) */
#whiteFade{position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:60;}
.victory-img{display:block; width:min(420px,70vw); height:auto; margin:10px auto; image-rendering:auto;
  filter:drop-shadow(0 0 18px rgba(125,255,176,.25));}
.manifest-card{margin:32px auto 0; width:min(560px,86vw); border:1px solid var(--green,#7dffb0);
  background:rgba(8,12,9,.85); padding:14px 18px; text-align:left;}
.manifest-head{color:var(--amber-dim); font-size:12px; letter-spacing:3px;}
.manifest-title{color:var(--green,#7dffb0); font-size:16px; letter-spacing:1px; margin:8px 0 10px;}
.registry-window{height:22px; overflow:hidden; position:relative; border-top:1px dashed rgba(125,255,176,.3); padding-top:6px;}
.registry-scroll{display:flex; gap:28px; white-space:nowrap; color:#cfe2d6; font-size:14px; letter-spacing:1px;
  animation:registry 14s linear infinite;}
@keyframes registry{from{transform:translateX(0);}to{transform:translateX(-50%);}}
/* the drillable-manifest easter egg: a pod overlay above the content, and the
   credits roll that starts once both buttons are dug out (logic in endings.js). */
/* the pod rides ABOVE the credits (z-index 4) so it keeps flying over the roll */
#victoryDrill{position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none;
  opacity:0; transition:opacity .8s ease; display:none;}
#victoryDrill.on{display:block; opacity:1;}
#victoryContent{transition:transform 4s ease-in, opacity 4s ease-in;}
#victoryContent.liftoff{transform:translateY(-130vh); opacity:0;}
#victoryCredits{position:absolute; inset:0; z-index:3; display:none; pointer-events:none;
  overflow:hidden; text-align:center;}
#victoryCredits.roll{display:block;}
/* the held end card: a single line once the roll finishes — nothing left to dig */
#victoryCredits.ended{display:grid; place-items:center;}
#victoryCredits .keepdig{font-family:'Bungee'; color:var(--green,#7dffb0);
  font-size:clamp(34px,8vw,72px); letter-spacing:6px; text-shadow:0 0 34px rgba(125,255,176,.45);}
#victoryCredits .keepdig small{display:block; font-family:'Share Tech Mono'; color:var(--amber-dim);
  font-size:14px; letter-spacing:3px; margin-top:18px;}
#victoryCredits .roll-inner{position:absolute; left:0; right:0; top:100%;
  animation:credits-roll 34s linear forwards; color:#cfe2d6; font-size:16px; line-height:2.2;
  letter-spacing:1px; text-shadow:0 0 14px rgba(125,255,176,.3);}
#victoryCredits h2{font-family:'Bungee'; color:var(--green,#7dffb0); font-size:clamp(28px,6vw,52px);
  letter-spacing:4px; margin:0 0 6px;}
#victoryCredits .ct{color:var(--amber-dim); font-size:12px; letter-spacing:4px; margin:34px 0 4px;}
#victoryCredits .cn{color:#e7f4ec;}
#victoryCredits .cend{color:var(--green,#7dffb0); font-size:14px; margin-top:30px; letter-spacing:2px;}
@keyframes credits-roll{from{transform:translateY(0);}to{transform:translateY(calc(-100% - 100vh));}}

/* ---- epilogue slides (true ending — one caption per slide) ---- */
#endingScreens{background:#000; display:none; z-index:40;}
#endingScreens.show{display:grid;}
.epislide{position:absolute; inset:0; display:grid; place-items:center;}
.epislide img{max-width:92vw; max-height:88vh; image-rendering:auto;}
.epi-mars{background:radial-gradient(100% 80% at 50% 55%,#0c3a1f,#000 80%);}
.epi-space{background:radial-gradient(120% 90% at 50% 40%,#0a0d1e,#000 75%);}
.epi-sold{background:radial-gradient(120% 90% at 50% 40%,#2a1d07,#000 75%);}      /* ledger amber */
.epi-heart{background:radial-gradient(120% 90% at 50% 60%,#06301c,#000 75%);}     /* the hold, green-lit */
.epi-marsdead{background:radial-gradient(100% 80% at 50% 55%,#3a120c,#000 80%);}  /* mars stays red */
.epi-escape{background:radial-gradient(120% 90% at 50% 45%,#08131a,#000 75%);}    /* open sky, going */
.epiend{font-family:'Bungee'; font-size:clamp(34px,7vw,64px); color:var(--green,#7dffb0);
  letter-spacing:4px; text-shadow:0 0 30px rgba(125,255,176,.4); position:absolute; bottom:12vh; width:100%;}
.keptSapling{position:absolute; right:18vw; bottom:24vh; width:7px; height:13px; border-radius:50% 50% 0 0;
  background:#7dffb0; box-shadow:0 0 14px #7dffb0; animation:sapPulse 2.4s ease-in-out infinite;}
@keyframes sapPulse{0%,100%{opacity:.65; transform:scaleY(1);}50%{opacity:1; transform:scaleY(1.15);}}
#epiBtn{position:absolute; bottom:22px; left:50%; transform:translateX(-50%); margin:0;}
.epicap{position:absolute; top:7vh; left:0; right:0; text-align:center; color:#9fe8c0;
  font-size:clamp(14px,2.4vw,20px); letter-spacing:2px; line-height:1.6; padding:0 8vw;
  text-shadow:0 0 14px rgba(125,255,176,.35), 0 2px 6px #000;}
/* a clear empty band above the buttons so the drillable-manifest pod can drop
   in from the side gaps and land on top of them (endings.js drill easter egg) */
.victory-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}