/* ============================================================
   DRUGWARS 2026 — a terminal in a dark car. Charcoal ground, acid
   LCD green for money and go, amber for warnings, red for debt.
   ============================================================ */
:root{
  --bg:#0b0d10; --panel:#12161c; --panel2:#171c24; --line:#232a33;
  --txt:#e8ecf1; --dim:#8b95a3; --grn:#9fe870; --amb:#ffb454; --red:#ff6b6b;
  --focus:#ffb454;
  font-size:16px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse 80% 50% at 50% -10%, #182a1a 0%, var(--bg) 60%);
  color:var(--txt);
  font-family:ui-monospace,'Menlo','Consolas','SF Mono',monospace;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  min-height:100vh;padding:10px;
  -webkit-font-smoothing:antialiased;
}
body.calm{background-image:none}
#stage{position:relative;width:980px;max-width:100%}
.hidden{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button{font:inherit;color:inherit;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:8px 12px;cursor:pointer;letter-spacing:.5px}
button:hover{border-color:var(--grn);color:var(--grn)}
button:disabled{opacity:.35;cursor:default;border-color:var(--line);color:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
kbd{font:inherit;font-size:.75em;border:1px solid var(--line);border-radius:3px;padding:0 4px;color:var(--dim);margin-left:4px}
.grn{color:var(--grn)} .red{color:var(--red)} .amb{color:var(--amb)} .dim{color:var(--dim)}
i{font-style:normal;color:var(--grn)}

/* ---- status strip ---- */
#strip{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:8px 8px 0 0;
  padding:8px 14px;font-size:13px;
}
.gname{font-weight:700;letter-spacing:3px;font-size:15px;margin-right:6px}
.gname small{font-size:9px;color:var(--amb);margin-left:6px;letter-spacing:2px}
.st{display:flex;flex-direction:column;line-height:1.1}
.st small{font-size:9px;letter-spacing:2px;color:var(--dim)}
.st b{font-weight:600;font-variant-numeric:tabular-nums}
#strip .ico{margin-left:auto;padding:4px 9px;font-size:15px}

/* ---- main ---- */
#game{display:grid;grid-template-columns:1fr 316px;gap:0;
  background:var(--panel);border:1px solid var(--line);border-top:none;border-radius:0 0 8px 8px;min-height:520px}
#left{padding:14px;border-right:1px solid var(--line);min-width:0}
#right{padding:14px;display:flex;flex-direction:column;gap:10px}
#locbar{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
#locName{font-size:22px;font-weight:700;letter-spacing:2px}
#locBlurb{color:var(--dim);font-size:12px}
#daycard{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--grn);border-radius:6px;padding:10px 12px;margin-bottom:12px;font-size:14px;line-height:1.45}
#daycard.warn{border-left-color:var(--amb)} #daycard.bad{border-left-color:var(--red)}
#dayBtns{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
#dayBtns:empty{display:none}

table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:10px;letter-spacing:2px;color:var(--dim);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line)}
td{padding:6px;border-bottom:1px solid #1a2028;vertical-align:middle;white-space:nowrap}
.num{text-align:right;font-variant-numeric:tabular-nums}
tr.off td{color:var(--dim)} tr.off .price::after{content:'—'}
tr.sel td{background:#151d16}
td.price{font-weight:600} tr.spike td.price{color:var(--grn)} tr.crash td.price{color:var(--red)}
td.gd{cursor:pointer}
td .k{display:inline-block;width:16px;color:var(--dim);font-size:12px}
td.ic{width:22px;padding:2px 4px} td.ic canvas{display:block;image-rendering:pixelated}
td.tr{width:90px;padding:2px 6px} td.tr canvas{display:block}
th.trend{width:90px}
tr.off td.ic{opacity:.3}
td .arrow{font-size:11px;margin-left:4px}
.act{display:flex;gap:6px;justify-content:flex-end}
.act button{padding:4px 10px;font-size:12px}
.act .sell:hover{border-color:var(--amb);color:var(--amb)}
#msg,#mMsg{min-height:20px;margin-top:8px;font-size:13px;color:var(--amb)}

/* ---- right column ---- */
.big{padding:14px;font-weight:700;letter-spacing:2px;font-size:15px;width:100%}
.big.go{background:#1c2b1a;border-color:var(--grn);color:var(--grn)}
.big.go:hover{background:#243a20}
.sv-title{font-size:10px;letter-spacing:3px;color:var(--dim);margin:6px 0 4px}
.sv{width:100%;text-align:left;display:flex;justify-content:space-between;margin-bottom:6px}
.sv small{color:var(--dim);font-size:11px}
.sv.warn:hover{border-color:var(--red);color:var(--red)}
#awayNote{color:var(--dim);font-size:12px;text-align:center;padding:8px;border:1px dashed var(--line);border-radius:6px;line-height:1.5}
#logbox{flex:1;display:flex;flex-direction:column;min-height:0}
#log{font-size:11px;color:var(--dim);line-height:1.5;overflow:auto;max-height:260px}
#log div b{color:var(--txt);font-weight:500;margin-right:6px}

/* ---- overlays ---- */
.overlay{position:fixed;inset:0;background:rgba(6,8,10,.82);display:flex;align-items:center;justify-content:center;padding:14px;z-index:10}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px 24px;width:520px;max-width:100%;max-height:96vh;overflow:auto}
.card.narrow{width:360px}
.logo{font-size:40px;font-weight:800;letter-spacing:6px;text-align:center;line-height:1}
.sub{text-align:center;color:var(--dim);font-size:12px;letter-spacing:2px;margin:6px 0 14px}
.blurb{font-size:14px;line-height:1.5;color:#c8d0da;margin-bottom:16px}
.blurb b{color:var(--txt)}
.row{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.row label{font-size:11px;letter-spacing:2px;color:var(--dim);min-width:58px}
.row input[type=text],.row input[type=number]{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);color:var(--grn);font:inherit;padding:8px 10px;border-radius:6px;letter-spacing:1px}
.row input[type=range]{flex:1}
.sm{padding:6px 10px}
.row.btns{justify-content:flex-end;margin-top:14px;margin-bottom:0}
.row.btns .big{width:auto;padding:12px 24px}
.opt{flex:1;text-align:center}
.opt.on{border-color:var(--grn);color:var(--grn);background:#1c2b1a}
.keys{color:var(--dim);font-size:11px;text-align:center;margin-top:14px}
#hiscores{margin-top:14px;font-size:12px;color:var(--dim)}
#hiscores div{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px solid #1a2028}
#hiscores b{color:var(--grn);font-weight:500}
.mtitle{font-size:13px;letter-spacing:3px;color:var(--dim);margin-bottom:12px}
#mBody{font-size:14px;line-height:1.5}
#mBody p{margin-bottom:10px}
.dest{width:100%;text-align:left;display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding:10px 12px}
.dest small{color:var(--dim);font-size:11px}
.dest.here{opacity:.4;cursor:default}
.qty{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.qty button{padding:6px 10px;font-size:12px}
.stat-grid{display:grid;grid-template-columns:1fr auto;gap:4px 16px;font-size:14px;margin:10px 0}
.stat-grid b{text-align:right;font-variant-numeric:tabular-nums}
.rank{font-size:24px;font-weight:800;letter-spacing:2px;text-align:center;margin:8px 0 2px}
.worth{font-size:32px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.flash{animation:flash .5s ease-out}
@keyframes flash{from{background:#2a3d1e}to{background:transparent}}
body.calm .flash{animation:none}

@media (max-width:760px){
  #game{grid-template-columns:1fr}
  #left{border-right:none;border-bottom:1px solid var(--line)}
  #strip{gap:10px;font-size:12px}
  .gname{width:100%}
  th:nth-child(7),td:nth-child(7){display:none}
  .logo{font-size:30px}
  #log{max-height:140px}
}

/* ---- map, gauges, floaters, shake ---- */
#mapwrap{position:relative;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg)}
#map{display:block;width:100%;height:auto;cursor:pointer}
#map.busy{cursor:default}
#mapHint{position:absolute;right:6px;bottom:4px;font-size:9px;letter-spacing:1px;color:var(--dim);pointer-events:none}
.gauges{display:flex;flex-direction:column;gap:4px}
.gl{display:flex;align-items:center;gap:8px}
.gl small{font-size:9px;letter-spacing:2px;color:var(--dim);width:52px}
.gl canvas{flex:1;height:8px;width:auto;border-radius:2px}
.floater{position:absolute;font-weight:700;font-size:13px;pointer-events:none;animation:floatUp 1.1s ease-out forwards;font-variant-numeric:tabular-nums;z-index:5}
@keyframes floatUp{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-28px)}}
body.calm .floater{animation-duration:.4s}
.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:translate(0)}20%{transform:translate(-6px,2px)}40%{transform:translate(5px,-3px)}60%{transform:translate(-4px,1px)}80%{transform:translate(3px,-1px)}}
body.calm .shake{animation:none}
#sceneCv{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;margin-bottom:10px}
.drive{position:absolute;inset:0;background:rgba(11,13,16,.55);display:flex;align-items:center;justify-content:center;font-size:12px;letter-spacing:3px;color:var(--amb)}
@media (max-width:760px){
  th.trend,td.tr{display:none}
  th:nth-child(7),td:nth-child(7){display:none}
}
.icw{display:inline-block;vertical-align:middle;margin-right:8px}
.icw canvas{display:block;image-rendering:pixelated}

#chartwrap{margin-top:10px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bg)}
#chart{display:block;width:100%;height:auto}