:root{
  --bg:#05050d;
  --bg2:#0a0a18;
  --panel:#0d0d21;
  --panel2:#11112a;
  --line:#25254a;
  --line2:#3a3a6a;
  --ink:#cdd6ff;
  --dim:#7a86b8;
  --cyan:#4dd8ff;
  --green:#33ff66;
  --amber:#ffb84d;
  --magenta:#ff4dd2;
  --red:#ff4d5a;
  --purple:#7a5cff;
  --font-head:'Press Start 2P', monospace;
  --font-body:'VT323', 'Courier New', monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:radial-gradient(120% 120% at 50% 0%, #0b0b20 0%, var(--bg) 55%, #030308 100%);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:19px;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.35;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
}
button{font-family:var(--font-head);cursor:pointer;color:var(--ink);background:transparent;border:none}
button:disabled{cursor:not-allowed;opacity:.35}

/* CRT scanlines + vignette */
.crt{
  position:fixed;inset:0;pointer-events:none;z-index:9999;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.crt::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%);
}

#app{height:100vh;display:flex;flex-direction:column;padding:14px 16px 12px;gap:10px}

/* ---------- top bar ---------- */
#topbar{display:flex;align-items:center;gap:20px;padding:6px 12px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 0 18px rgba(60,70,180,.12) inset}
.brand{font-family:var(--font-head);font-size:13px;letter-spacing:1px;color:#eaf2ff;text-shadow:0 0 8px rgba(77,216,255,.55);margin-right:auto}
.brand .sub{display:block;font-family:var(--font-body);font-size:16px;color:var(--dim);letter-spacing:2px;margin-top:4px}
.stat{text-align:right;min-width:74px}
.stat .k{display:block;font-family:var(--font-head);font-size:8px;color:var(--dim);letter-spacing:1px;margin-bottom:5px}
.stat .v{font-family:var(--font-head);font-size:15px;color:#eaf2ff;text-shadow:0 0 8px rgba(77,216,255,.4)}
#hud-loss.v.go{color:#0f0;text-shadow:0 0 8px rgba(51,255,102,.6)}
#hud-loss.v.warn{color:#ffe27a;text-shadow:0 0 8px rgba(255,226,122,.5)}
#hud-loss.v.danger{color:var(--red);text-shadow:0 0 8px rgba(255,77,90,.7)}
.ghost{font-size:9px;padding:7px 10px;border:1px solid var(--line2);color:var(--dim);letter-spacing:1px}
.ghost:hover{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 10px rgba(77,216,255,.25)}

/* ---------- main layout ---------- */
#layout{flex:1;display:grid;grid-template-columns:196px 1fr 210px;gap:10px;min-height:0}
.panel{border:1px solid var(--line);background:linear-gradient(180deg,var(--panel2),var(--panel));padding:12px;overflow:hidden;position:relative}
.panel h2{font-family:var(--font-head);font-size:9px;letter-spacing:2px;color:var(--cyan);margin-bottom:12px;text-shadow:0 0 8px rgba(77,216,255,.4)}
#crew-panel{display:flex;flex-direction:column}
#crew-list{display:flex;flex-direction:column;gap:10px;overflow-y:auto}

/* crew cards */
.crew{display:grid;grid-template-columns:40px 1fr;gap:9px;align-items:center;padding:8px;border:1px solid var(--line);background:var(--bg2)}
.crew .icon{width:40px;height:40px;image-rendering:pixelated;border:1px solid var(--line2);background:#04041a}
.crew .meta{min-width:0}
.crew .nm{font-family:var(--font-head);font-size:8px;letter-spacing:.5px;margin-bottom:5px}
.crew .tm{font-size:15px;color:var(--dim);margin-bottom:5px;font-family:var(--font-body);letter-spacing:1px}
.crew .en{height:7px;background:#050512;border:1px solid var(--line)}
.crew .en .f{height:100%;width:100%;transition:width .18s, background .18s}
.crew.burn .icon{filter:saturate(.2) brightness(.5)}
.crew.burn .nm{color:var(--dim)}

/* stage / canvas */
#stage{display:flex;align-items:stretch;justify-content:center;padding:0;position:relative}
#game{width:100%;height:100%;display:block;image-rendering:pixelated;background:#040412}
.axis{position:absolute;left:10px;right:10px;font-family:var(--font-head);font-size:8px;letter-spacing:1px;pointer-events:none;color:rgba(205,214,255,.55);display:flex;justify-content:space-between}
.axis-top{top:9px;color:rgba(255,77,90,.6)}
.axis-bottom{bottom:9px;color:rgba(51,255,102,.6)}

/* event modal */
#event-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(3,3,12,.68);z-index:30}
#event-modal.hidden{display:none}
.event-card{width:min(520px,92%);max-height:92%;overflow-y:auto;border:1px solid var(--purple);background:linear-gradient(180deg,#151538,#0b0b22);box-shadow:0 0 40px rgba(122,92,255,.35), 0 0 0 4px #05050f;padding:18px 20px}
.event-badge{display:inline-block;font-family:var(--font-head);font-size:9px;letter-spacing:2px;color:#05050f;background:var(--purple);padding:4px 8px;margin-bottom:10px}
.event-title{font-family:var(--font-head);font-size:15px;line-height:1.5;color:#fff;margin-bottom:12px;text-shadow:0 0 10px rgba(122,92,255,.6)}
.event-text{font-size:20px;color:#c6cfff;margin-bottom:12px}
.event-costs{font-size:16px;color:var(--dim);margin-bottom:14px;letter-spacing:.5px}
.event-choices{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.choice{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;width:100%;text-align:left;padding:11px 12px;border:1px solid var(--line2);background:var(--bg2);font-family:var(--font-body);font-size:19px;letter-spacing:.5px}
.choice:hover:not(:disabled){border-color:var(--cyan);box-shadow:0 0 12px rgba(77,216,255,.2);color:#fff}
.choice .key{font-family:var(--font-head);font-size:10px;color:var(--amber)}
.choice .lbl b{font-family:var(--font-head);font-size:9px;letter-spacing:1px}
.choice .lbl .crew-tag{color:var(--cyan)}
.choice .cost{font-size:16px;color:var(--dim);white-space:nowrap}
.event-lesson{border-top:1px dashed var(--line2);padding-top:10px;font-size:17px;color:#8ff5a8}
.event-lesson b{color:var(--green)}

/* resources panel */
#res-panel{display:flex;flex-direction:column;gap:0}
.rline{margin-bottom:14px}
.rline .k{font-family:var(--font-head);font-size:8px;letter-spacing:1px;color:var(--dim);display:block;margin-bottom:5px}
.bar{height:13px;background:#050512;border:1px solid var(--line);padding:2px}
.bar .fill{height:100%;width:100%;background:var(--c);transition:width .2s;box-shadow:0 0 8px var(--c)}
.rline .val{float:right;font-family:var(--font-body);font-size:18px;margin-top:6px;color:#fff}
.lr-block{border:1px solid var(--line);background:var(--bg2);padding:11px;margin-bottom:14px}
.lr-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.lr-head .k{font-family:var(--font-head);font-size:8px;letter-spacing:1px;color:var(--dim)}
.lr-head .val{font-family:var(--font-head);font-size:15px;color:var(--amber);text-shadow:0 0 8px rgba(255,184,77,.5)}
.lr-controls{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.lr-controls button{width:30px;height:30px;font-size:14px;border:1px solid var(--line2);color:var(--amber)}
.lr-controls button:hover{border-color:var(--amber);box-shadow:0 0 10px rgba(255,184,77,.3)}
.lr-slider{flex:1;height:8px;background:#050512;border:1px solid var(--line);position:relative}
.lr-fill{position:absolute;inset:0;background:linear-gradient(90deg,#33ff66,var(--amber),var(--red));transform-origin:left}
.lr-knob{display:none}
.hint{font-size:16px;color:var(--dim);letter-spacing:.5px}
.hint.small{font-size:15px}
.legend{margin-top:auto;display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--line);padding-top:11px}
.lg{display:flex;align-items:center;gap:8px;font-size:16px;color:var(--dim)}
.lg i{width:11px;height:11px;background:var(--c);display:inline-block;box-shadow:0 0 8px var(--c)}

/* footer / controls */
#controls{display:flex;align-items:stretch;gap:14px;border:1px solid var(--line);background:var(--panel);padding:8px}
.log-wrap{flex:1;min-width:0;display:flex;align-items:center}
.log{font-size:18px;color:#aab5e6;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log .t{color:var(--dim);margin-right:6px}
.log .good{color:#8ff5a8}
.log .bad{color:#ff96a0}
.train{font-family:var(--font-head);font-size:13px;padding:0 18px;letter-spacing:1px;color:#05050f;background:linear-gradient(180deg,var(--green),#19c24e);box-shadow:0 0 18px rgba(51,255,102,.45);border:none}
.train:hover{filter:brightness(1.12)}
.train:active{transform:translateY(1px)}
.train .key{display:block;font-family:var(--font-body);font-size:14px;color:rgba(5,5,15,.6);margin-top:2px}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;background:rgba(4,4,14,.85);z-index:50;display:flex;overflow-y:auto;padding:20px}
.overlay>*{margin:auto}
.overlay.hidden{display:none}
.ov-inner{text-align:center;max-width:640px}
.ov-inner.card{text-align:left;background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line2);padding:26px 30px;max-height:90vh;overflow-y:auto;box-shadow:0 0 40px rgba(0,0,0,.6)}
.ov-inner.card.wide{max-width:720px}
.eyebrow{font-family:var(--font-head);font-size:9px;letter-spacing:3px;color:var(--cyan);margin-bottom:22px}
.title{font-family:var(--font-head);font-size:46px;line-height:1.15;letter-spacing:2px;color:#fff;text-shadow:0 0 14px rgba(122,92,255,.7), 0 0 44px rgba(77,216,255,.35);margin-bottom:22px}
.tagline{font-size:22px;color:var(--ink);margin-bottom:22px}
.tagline b{color:var(--cyan)}
.failmodes{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px}
.failmodes span{font-size:16px;color:#c6cfff;border:1px solid var(--line2);background:var(--bg2);padding:5px 10px;letter-spacing:.5px}
.big{font-size:13px;padding:14px 26px;letter-spacing:1px;color:#05050f;background:linear-gradient(180deg,var(--green),#19c24e);box-shadow:0 0 20px rgba(51,255,102,.4)}
.big:hover{filter:brightness(1.12)}
.ov-links{margin-top:18px;display:flex;gap:10px;justify-content:center}
.h2{font-family:var(--font-head);font-size:16px;letter-spacing:2px;color:var(--cyan);margin-bottom:18px;text-shadow:0 0 8px rgba(77,216,255,.5)}
.help-body{font-size:20px;color:var(--ink);margin-bottom:20px}
.help-body p{margin-bottom:12px}
.help-body ul{margin:0 0 14px 20px}
.help-body li{margin-bottom:8px}
.help-body b{color:var(--cyan)}
.help-body .g{color:var(--green)} .help-body .r{color:var(--red)}
.win-lose{margin-top:6px}
.glossary{display:grid;gap:9px;margin-bottom:20px}
.gloss-item{border:1px solid var(--line);background:var(--bg2);padding:10px 12px}
.gloss-item b{font-family:var(--font-head);font-size:9px;letter-spacing:1px;color:var(--amber)}
.gloss-item p{font-size:18px;color:var(--ink);margin-top:5px}
.end-title{font-size:22px}
.end-title.win{color:var(--green);text-shadow:0 0 12px rgba(51,255,102,.6)}
.end-title.lose{color:var(--red);text-shadow:0 0 12px rgba(255,77,90,.6)}
.end-sub{font-size:21px;color:var(--ink);margin-bottom:18px}
.end-stats{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.end-stats .es{border:1px solid var(--line2);background:var(--bg2);padding:10px 14px;min-width:90px}
.end-stats .es .n{font-family:var(--font-head);font-size:16px;color:#fff}
.end-stats .es .l{font-family:var(--font-head);font-size:8px;color:var(--dim);letter-spacing:1px;margin-top:6px}
.end-lessons-label{font-family:var(--font-head);font-size:8px;letter-spacing:2px;color:var(--dim);margin-bottom:10px}
.end-lessons{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:8px}
.end-lessons span{font-size:16px;border:1px solid var(--line2);padding:4px 9px;color:#8ff5a8;background:var(--bg2)}
.end-lessons .none{color:var(--dim);border-style:dashed}

/* ================= MOBILE / TOUCH ================= */
@media (max-width:820px){
  body{font-size:20px}
  #app{height:100vh;height:100dvh;padding:8px;gap:8px}

  /* top bar: slim, hide score stat, ellipsize brand */
  #topbar{gap:9px;padding:6px 10px}
  .brand{font-size:9px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .brand .sub{display:none}
  .stat{min-width:0;padding-left:6px}
  .stat .k{font-size:6px;margin-bottom:3px}
  .stat .v{font-size:11px}
  #topbar .stat:last-of-type{display:none}
  #btn-glossary{font-size:7px;padding:6px 6px;letter-spacing:0}

  /* vertical stack: canvas → crew → resources */
  #layout{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:8px;min-height:0}

  #stage{order:1;height:32vh;min-height:150px}
  .axis{font-size:7px}

  #crew-panel{order:2;padding:8px}
  #crew-panel h2{display:none}
  #crew-list{flex-direction:row;gap:6px;overflow-y:visible}
  .crew{flex:1;min-width:0;grid-template-columns:1fr;justify-items:center;text-align:center;padding:6px 3px 8px;gap:4px}
  .crew .meta{width:100%}
  .crew .nm{font-size:6px;margin-bottom:4px}
  .crew .tm{display:none}
  .crew .en{width:100%;height:5px}

  #res-panel{order:3;display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px 10px;padding:8px}
  #res-panel h2{display:none}
  .rline{margin-bottom:0;min-width:0}
  .bar{height:9px}
  .rline .val{margin-top:3px;font-size:15px;float:none}
  .lr-block{grid-column:1/4;margin-bottom:0;padding:8px}
  .lr-block .hint{display:none}
  .lr-controls button{width:42px;height:38px;font-size:18px}
  .lr-slider{height:10px}
  .hint{font-size:15px}
  .legend{display:none}

  #controls{flex-direction:column;align-items:stretch;padding:7px 8px;gap:6px;padding-bottom:calc(7px + env(safe-area-inset-bottom))}
  .log-wrap{width:100%}
  .log{font-size:16px;width:100%}
  .train{font-size:14px;padding:0;flex:none;width:100%;min-height:56px}
  .train .key{font-size:14px;display:inline;margin:0 0 0 8px}

  /* overlays */
  .overlay{padding:12px}
  .ov-inner{width:100%;padding:0}
  .ov-inner.card{padding:18px 16px;max-height:88vh}
  .title{font-size:30px;margin-bottom:16px}
  .eyebrow{font-size:8px;margin-bottom:14px}
  .tagline{font-size:19px}
  .failmodes span{font-size:14px;padding:4px 8px}
  .big{font-size:12px;padding:15px 16px;width:100%;display:block}
  .ov-links{flex-direction:column;gap:8px}
  .h2{font-size:13px}
  .help-body{font-size:18px}
  .help-body ul{margin-left:16px}
  .glossary{display:grid;gap:7px}
  .gloss-item p{font-size:17px}
  .event-card{width:100%;margin:0 8px;padding:16px 14px;max-height:88vh}
  .event-title{font-size:13px}
  .event-text{font-size:18px}
  .event-costs{font-size:14px}
  .choice{min-height:54px;padding:10px 12px;font-size:18px;gap:8px}
  .choice .cost{font-size:13px}
  .event-lesson{font-size:16px}
  .end-stats{gap:7px}
  .end-stats .es{min-width:64px;padding:8px 10px}
  .end-lessons span{font-size:14px}
}

/* landscape phones: canvas left, compact crew+resources right */
@media (max-width:900px) and (orientation:landscape){
  #app{gap:6px}
  #topbar{padding:5px 10px}
  #layout{grid-template-columns:1fr 200px;grid-template-rows:1fr 1fr;gap:6px}
  #stage{grid-column:1;grid-row:1/3;height:auto;min-height:0;order:1}
  #crew-panel{grid-column:2;grid-row:1;order:2;padding:7px}
  #res-panel{grid-column:2;grid-row:2;order:3;display:flex;flex-direction:column;gap:0;padding:7px}
  #crew-list{flex-direction:column;gap:5px}
  .crew{grid-template-columns:24px 1fr;text-align:left;justify-items:start;padding:4px 7px;gap:6px;flex:none}
  .crew .meta{width:auto}
  .crew .tm{display:block;font-size:12px}
  .crew .icon{width:24px;height:20px}
  .crew .nm{font-size:7px;margin-bottom:3px}
  .crew .en{width:100%;height:5px}
  .rline{width:100%}
  .lr-block{grid-column:auto}
  .train{font-size:12px;padding:10px 18px}
}