:root {
  /* Palette drawn from the actual game's yellow/black/green counter sheet */
  --bg:       #0a0a08;
  --panel:    #111410;
  --border:   #2a2e1a;
  --gold:     #f0be2e;
  --gold-dim: #9a7410;
  --green:    #9ada60;
  --green-dim:#4a7a2a;
  --red:      #f05050;
  --red-dim:  #8a2020;
  --blue:     #5ab8f0;
  --text:     #f0ecd8;
  --text-dim: #a8a480;
  --tube:     #d4a017;
  --pod-bg:   #141810;
  --pod-border: #3a4420;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:300;
  min-height:100vh;
  user-select:none;
}

body::before{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.06) 3px,rgba(0,0,0,0.06) 4px);
  pointer-events:none;z-index:9999;
}

h1,h2,h3,h4{font-family:"Bahnschrift","DIN Alternate","Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;}
.mono{font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;}

/* ── HEADER ── */
#hdr{
  background:linear-gradient(180deg,#141810 0%,var(--panel) 100%);
  border-bottom:2px solid var(--gold-dim);
  padding:8px 16px;
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:200;
}
#hdr h1{font-size:1.05rem;letter-spacing:.12em;white-space:nowrap;color:var(--gold);text-shadow:0 0 16px rgba(212,160,23,.5);}
#hdr h1 span{color:var(--green);}
#hdr-right{font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;font-size:.75rem;color:var(--text-dim);text-align:right;line-height:1.8;}
#hdr-right .v{color:var(--gold);}

/* ── LAYOUT ── */
#layout{display:grid;grid-template-columns:200px 1fr 220px;min-height:calc(100vh - 44px);}

/* ── SIDE PANELS ── */
.side{background:var(--panel);border-right:1px solid var(--border);padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
.side:last-child{border-right:none;border-left:1px solid var(--border);}
.ptitle{font-family:"Bahnschrift","DIN Alternate","Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-size:.58rem;letter-spacing:.2em;color:var(--text-dim);text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid var(--border);margin-bottom:4px;}

/* ── SHIP MAP CENTER ── */
#center{background:var(--bg);padding:12px;display:flex;flex-direction:column;align-items:center;gap:10px;overflow-y:auto;}

/* ── SHIP MAP SVG WRAPPER ── */
#shipmap{width:100%;max-width:640px;display:block;margin:0 auto;}

/* Deck labels */
.deck-label{font-family:"Bahnschrift","DIN Alternate","Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-size:.7rem;fill:var(--gold);letter-spacing:.15em;}
.tube-label{font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;font-size:.52rem;fill:var(--green);letter-spacing:.05em;}

/* Pod shapes */
.pod{
  fill:transparent;
  stroke:transparent;
  stroke-width:5;
  cursor:pointer;
  transition:stroke .15s,fill .15s;
}
.pod:hover{stroke:#ffe27a;fill:rgba(255,226,122,.10);}
.pod.selected{stroke:#ffffff;stroke-width:5;fill:rgba(255,255,255,.10);}
.pod.infested{stroke:var(--red);fill:rgba(240,80,80,.16);}
.pod.infested:hover{stroke:#ff9a9a;}
.pod.has-crew{stroke:var(--blue);fill:rgba(90,184,240,.14);}
.pod.has-crew.infested{stroke:var(--red);}
.pod.sealed{stroke:var(--green);}

/* Tube connectors */
.tube{fill:none;stroke:var(--tube);stroke-width:3;opacity:.6;}
.tube.blocked{stroke:var(--red-dim);opacity:.4;stroke-dasharray:4 3;}
.risor-line{stroke:var(--gold);stroke-width:2;stroke-dasharray:6 3;opacity:.7;}

/* Pod text */
.pod-id{font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:.72rem;font-weight:600;fill:var(--text);pointer-events:none;}
.tube-label{pointer-events:none;}
.deck-label{pointer-events:none;}
#pod-overlays{pointer-events:none;}
.pod-name{font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:.55rem;fill:var(--text);}

/* ── hover stat card ── */
#hovercard{
  position:fixed; z-index:600; pointer-events:none; display:none;
  min-width:170px; max-width:250px;
  background:linear-gradient(180deg,#141810,#0d100b);
  border:1px solid var(--gold); border-radius:5px;
  padding:8px 10px; box-shadow:0 6px 22px rgba(0,0,0,.6);
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
#hovercard .hc-title{font-family:"Bahnschrift","DIN Alternate","Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-size:.62rem;letter-spacing:.08em;color:var(--gold);margin-bottom:5px;padding-bottom:4px;border-bottom:1px solid var(--border);}
#hovercard .hc-sec{font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin:6px 0 3px;}
#hovercard .hc-sec.crew{color:var(--blue);}
#hovercard .hc-sec.ali{color:var(--red);}
#hovercard .hc-row{font-size:.72rem;line-height:1.35;margin-bottom:4px;color:var(--text);}
#hovercard .hc-row b{color:var(--text);}
#hovercard .hc-row .hc-stat{font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;font-size:.62rem;color:var(--text-dim);}
#hovercard .hc-row.ali b{color:var(--red);}
#hovercard .hc-empty{font-size:.7rem;color:var(--text-dim);font-style:italic;}
.pod-bio{font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;font-size:13px;fill:var(--red);font-weight:bold;pointer-events:none;}
.pod-crew-dot{fill:var(--blue);}

/* ── STATUS BARS ── */
.status-track{margin:4px 0;}
.track-label{font-size:.68rem;color:var(--text-dim);margin-bottom:3px;}
.track-boxes{display:flex;gap:3px;}
.track-box{
  width:20px;height:20px;border-radius:2px;
  border:1px solid var(--border);
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;font-size:.6rem;
  color:var(--text-dim);
}
.track-box.active-green{background:var(--green-dim);border-color:var(--green);color:var(--green);}
.track-box.active-amber{background:#3a2a08;border-color:var(--gold);color:var(--gold);}
.track-box.active-red{background:var(--red-dim);border-color:var(--red);color:var(--red);}
.track-box.marker{background:var(--gold);border-color:var(--gold);color:#000;font-weight:bold;}

/* ── CREW CARDS ── */
.crew-card{
  background:var(--pod-bg);border:1px solid var(--border);border-radius:3px;
  padding:7px 8px;cursor:pointer;transition:border-color .15s;
}
.crew-card:hover{border-color:var(--blue);}
.crew-card.sel{border-color:var(--blue);box-shadow:0 0 8px rgba(58,154,212,.25);}
.crew-card.dead{opacity:.3;pointer-events:none;filter:grayscale(1);}
.crew-card.stunned{border-color:var(--gold-dim);}
.cn{font-family:"Bahnschrift","DIN Alternate","Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-size:.6rem;color:var(--text);letter-spacing:.04em;}
.cr{font-size:.65rem;color:var(--text-dim);margin:2px 0;}
.cs{display:flex;gap:6px;margin-top:3px;}
.cs span{font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;font-size:.6rem;color:var(--text);}
.cs span b{color:var(--gold);}
.cs span.hp b.lo{color:var(--red);}

/* ── ALIEN COUNTER CARDS ── */
.alien-card{
  background:var(--pod-bg);border:1px solid var(--red-dim);border-radius:3px;
  padding:6px 8px;font-size:.7rem;
  display:flex;justify-content:space-between;align-items:center;
}
.alien-name{font-family:"Bahnschrift","DIN Alternate","Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-size:.58rem;color:var(--red);letter-spacing:.04em;}
.alien-stats{font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;font-size:.6rem;color:var(--text-dim);}
.alien-stats b{color:var(--red);}

/* ── BUTTONS ── */
.btn{
  display:block;width:100%;padding:7px 10px;
  background:var(--pod-bg);border:1px solid var(--border);border-radius:2px;
  color:var(--text);font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:.75rem;
  cursor:pointer;text-align:left;transition:all .15s;letter-spacing:.02em;
}
.btn:hover:not(:disabled){background:var(--border);border-color:var(--gold);color:var(--gold);}
.btn:disabled{opacity:.25;cursor:not-allowed;}
.btn.gold{border-color:var(--gold-dim);color:var(--gold);}
.btn.gold:hover:not(:disabled){background:rgba(212,160,23,.12);}
.btn.red{border-color:var(--red-dim);color:var(--red);}
.btn.red:hover:not(:disabled){background:rgba(200,48,48,.1);}
.btn.grn{border-color:var(--green-dim);color:var(--green);}
.btn.grn:hover:not(:disabled){background:rgba(122,182,72,.1);}

.act-label{font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;font-size:.55rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.15em;margin-top:6px;margin-bottom:2px;}
#acts-left-val{color:var(--gold);}

/* ── LOG ── */
#log{
  width:100%;max-width:620px;
  max-height:180px;overflow-y:auto;
  background:var(--bg);border:1px solid var(--border);border-radius:2px;
  padding:8px 10px;
  font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;font-size:.65rem;line-height:1.8;
}
.le{color:var(--text);}
.le.w{color:var(--gold);}
.le.a{color:var(--red);}
.le.g{color:var(--green);}
.le.s{color:var(--blue);}

/* ── DICE ── */
#dice-row{display:flex;gap:8px;align-items:center;width:100%;max-width:620px;padding:6px 8px;background:var(--bg);border:1px solid var(--border);border-radius:2px;}
.die{width:32px;height:32px;background:var(--pod-bg);border:1px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;font-family:"Bahnschrift","DIN Alternate","Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-size:.9rem;color:var(--gold);}
.die.spin{animation:diespin .35s ease;}
@keyframes diespin{0%{transform:rotate(0) scale(1.2);}100%{transform:rotate(360deg) scale(1);}}

/* ── PHASE PIPS ── */
#phase-pips{display:flex;gap:4px;flex-wrap:wrap;}
.ppip{font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;font-size:.55rem;padding:3px 6px;border:1px solid var(--border);color:var(--text-dim);border-radius:2px;text-transform:uppercase;}
.ppip.cur{border-color:var(--gold);color:var(--gold);background:rgba(212,160,23,.08);}
.ppip.done{border-color:var(--green-dim);color:var(--green-dim);}

/* ── TABLES (Reaction / Impair / Repair) ── */
.rules-table{width:100%;border-collapse:collapse;font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;font-size:.58rem;margin-top:4px;}
.rules-table th{background:var(--border);color:var(--gold);padding:2px 4px;text-align:center;border:1px solid var(--border);}
.rules-table td{padding:2px 4px;text-align:center;border:1px solid var(--border);color:var(--text);}
.rules-table tr:nth-child(even) td{background:rgba(255,255,255,.02);}
.rules-table td.hit{color:var(--green);}
.rules-table td.miss{color:var(--red-dim);}

/* ── MODAL ── */
#mo{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:500;display:none;align-items:center;justify-content:center;}
#mo.open{display:flex;}
#mbox{background:var(--panel);border:1px solid var(--gold);border-radius:4px;padding:24px 28px;max-width:460px;width:90%;box-shadow:0 0 30px rgba(212,160,23,.2);}
#mbox h3{font-size:.95rem;color:var(--gold);letter-spacing:.1em;margin-bottom:10px;}
#mbox p{font-size:.78rem;color:var(--text);line-height:1.7;margin-bottom:8px;}
#mbox .macts{display:flex;flex-direction:column;gap:5px;margin-top:12px;max-height:300px;overflow-y:auto;}

/* ── INTRO ── */
#intro{position:fixed;inset:0;background:var(--bg);z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:32px;}
#intro h1{font-size:2.6rem;letter-spacing:.2em;color:var(--gold);text-shadow:0 0 40px rgba(212,160,23,.5),0 0 80px rgba(212,160,23,.2);text-align:center;}
#intro h1 small{display:block;font-size:.65rem;color:var(--green);letter-spacing:.4em;margin-bottom:6px;text-shadow:0 0 12px rgba(122,182,72,.4);}
.intro-sub{font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;font-size:.78rem;color:var(--text-dim);text-align:center;max-width:460px;line-height:1.9;}
.intro-flavor{font-size:.75rem;color:var(--text-dim);font-style:italic;text-align:center;max-width:400px;line-height:1.8;border-left:2px solid var(--gold-dim);padding-left:14px;}
.intro-btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.ibtn{padding:11px 26px;background:var(--pod-bg);border:1px solid var(--gold-dim);border-radius:2px;color:var(--gold);font-family:"Bahnschrift","DIN Alternate","Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-size:.75rem;letter-spacing:.1em;cursor:pointer;transition:all .15s;}
.ibtn:hover{background:rgba(212,160,23,.12);border-color:var(--gold);}

/* ── GAMEOVER ── */
#go{position:fixed;inset:0;background:rgba(10,10,8,.97);z-index:999;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;}
#go h2{font-size:1.8rem;letter-spacing:.2em;text-align:center;}
#go.win h2{color:var(--green);text-shadow:0 0 24px rgba(122,182,72,.5);}
#go.loss h2{color:var(--red);text-shadow:0 0 24px rgba(200,48,48,.5);}
#go p{font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;font-size:.78rem;color:var(--text-dim);text-align:center;max-width:400px;line-height:1.8;}
#go-score{font-family:"Bahnschrift","DIN Alternate","Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;font-size:1.3rem;color:var(--gold);}

/* Scrollbar */
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}

/* supply rows */
.sup-row{display:flex;align-items:center;justify-content:space-between;padding:3px 0;border-bottom:1px solid rgba(42,46,26,.5);font-size:.72rem;}
.sup-label{color:var(--text-dim);}
.sup-val{font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;color:var(--gold);}
.sup-val.lo{color:var(--red);}

/* stat row */
.srow{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid rgba(42,46,26,.4);font-size:.72rem;}
.sl{color:var(--text-dim);}
.sv{font-family:"Consolas","SF Mono","DejaVu Sans Mono",Menlo,"Courier New",monospace;color:var(--gold);}
.sv.g{color:var(--green);}
.sv.r{color:var(--red);}

/* ── utility classes extracted from inline style attributes (spec §7) ── */
.u1{color:var(--gold);}
.u2{font-size:.6rem; color:var(--text-dim);}
.u3{margin-top:10px;}
.u4{font-size:.55rem; color:var(--text-dim); letter-spacing:.1em;}
.u5{margin-top:6px;}
.u6{font-size:.65rem; color:var(--text-dim);}
.u7{font-size:.6rem; color:var(--text-dim); letter-spacing:.15em;}
.u8{margin-top:8px;}

/* RISOR shaft circles — the three drawn circles share one logical space;
   .pod supplies the interactive styling, this hook allows shaft-specific
   treatment without affecting pods or tubes. */
.risor-node{stroke-linejoin:round;}