/* MEMPOOL WARS - original 90s military-industrial console theme */
:root{
  --bg:#0b0e10; --panel:#12181b; --panel2:#0e1417; --edge:#2a3a40; --edge2:#1c282d;
  --amber:#e8a23d; --amber-dim:#8a6526; --green:#7fbf6a; --red:#e05545; --btc:#f7931a;
  --text:#c9d4cd; --dim:#5f6f6a;
  --mono:"Px437","IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13px;overflow:hidden}
button{font-family:var(--mono);background:var(--panel);color:var(--amber);border:1px solid var(--edge);
  border-top-color:#3d5259;border-left-color:#3d5259;padding:4px 8px;cursor:pointer;font-size:12px}
button:hover{background:#1a2429}
button:active{border-color:var(--edge) #3d5259 #3d5259 var(--edge)}
button.on,button[aria-pressed="true"]{color:#111;background:var(--amber);border-color:var(--amber)}
:focus-visible{outline:2px solid var(--btc);outline-offset:1px}
a{color:var(--btc)}

/* boot screen */
#boot{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:50}
#bootlog{color:var(--green);font-size:14px;line-height:1.8;white-space:pre-wrap;max-width:600px}

/* layout */
#game{display:grid;grid-template-columns:1fr 240px;grid-template-rows:minmax(0,1fr);height:100vh}
#zones{display:flex;flex-direction:column;min-width:0;min-height:0}
#mempool-zone{position:relative;flex:1 1 66%;min-height:0;border-bottom:2px solid var(--edge)}
#price-zone{position:relative;flex:0 0 30%;min-height:0;background:var(--panel2)}
#price-zone.collapsed{flex-basis:26px}
#price-zone.collapsed canvas,#price-zone.collapsed #price-stale{display:none}
/* canvases are absolutely positioned so their bitmap size never feeds back into layout */
canvas{display:block;image-rendering:pixelated}
/* canvas is a replaced element: inset alone won't stretch it - size explicitly */
#battlefield{position:absolute;inset:0;width:100%;height:100%;background:#10161a}
#pricefield{position:absolute;inset:26px 0 0 0;width:100%;height:calc(100% - 26px)}

#price-head{display:flex;align-items:center;gap:10px;padding:3px 8px;background:var(--panel);
  border-bottom:1px solid var(--edge2);font-size:11px;letter-spacing:.08em;height:26px}
.ph-title{color:var(--amber);font-weight:700}
#price-readout{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
#tf-buttons button{padding:1px 5px;font-size:10px}
#price-collapse{padding:1px 7px}

#ticker{flex:0 0 22px;background:#000;border-top:1px solid var(--edge2);overflow:hidden;white-space:nowrap;
  display:flex;align-items:center}
#ticker-text{display:inline-block;padding-left:100%;animation:tick 45s linear infinite;color:var(--amber);font-size:11px;letter-spacing:.06em}
@keyframes tick{to{transform:translateX(-100%)}}

/* sidebar */
#sidebar{background:var(--panel);border-left:2px solid var(--edge);padding:8px;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px}
.sb-title{text-align:center;color:var(--btc);letter-spacing:.25em;font-weight:700;padding:4px 0;
  border:1px solid var(--edge);background:var(--panel2)}
#stats,#price-stats{margin:0}
#stats>div,#price-stats>div{display:flex;justify-content:space-between;padding:2px 2px;border-bottom:1px dotted var(--edge2)}
dt{color:var(--dim);font-size:11px;letter-spacing:.08em}
dd{margin:0;color:var(--text);font-variant-numeric:tabular-nums;text-align:right}
dd .up{color:var(--green)} dd .down{color:var(--red)}
.sb-sep{border-top:1px solid var(--edge2);margin:2px 0}
#conn{display:flex;flex-wrap:wrap;gap:6px;font-size:11px}
#conn .dot.ok{color:var(--green)} #conn .dot.off{color:var(--red)}
#c-net,#c-mode{color:#111;background:var(--amber);padding:0 5px;font-weight:700}
#c-mode.mock{background:var(--red);color:#fff}
#controls{display:flex;flex-wrap:wrap;gap:5px}
#controls button{flex:1 0 44%}
#btn-zoom-in,#btn-zoom-out{flex:1 0 20%}
.sb-label{color:var(--dim);font-size:10px;letter-spacing:.14em}
#track-row{display:flex;gap:4px}
#track-input{flex:1;min-width:0;background:#000;border:1px solid var(--edge);color:var(--green);
  font-family:var(--mono);font-size:11px;padding:4px}
#tracked-list{display:flex;flex-direction:column;gap:3px;font-size:11px}
.trk{display:flex;justify-content:space-between;gap:4px;background:var(--panel2);border:1px solid var(--edge2);padding:2px 4px;cursor:pointer}
.trk .st-next_block{color:var(--green)} .trk .st-waiting{color:var(--amber)}
.trk .st-confirmed{color:var(--btc)} .trk .st-unknown{color:var(--dim)}
.trk button{padding:0 4px;font-size:10px}
.sb-foot{margin-top:auto;color:var(--dim);font-size:10px;line-height:1.5}

/* banners */
#block-banner{position:absolute;top:18%;left:50%;transform:translateX(-50%);z-index:6;
  background:#000c;border:2px solid var(--btc);color:var(--btc);padding:14px 26px;text-align:center;
  font-size:15px;letter-spacing:.1em;line-height:1.7;box-shadow:0 0 40px #f7931a55}
#block-banner small{color:var(--text);font-size:11px;display:block}
#stale-banner,#price-stale{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:7;
  background:#3a0d08;border:1px solid var(--red);color:#ffb0a6;padding:4px 14px;font-size:12px;letter-spacing:.08em}
#price-stale{top:34px}

/* inspector */
#inspector{position:fixed;right:250px;top:56px;width:340px;max-width:calc(100vw - 270px);z-index:20;
  background:var(--panel2);border:2px solid var(--amber-dim);box-shadow:0 6px 30px #000c}
#insp-head{display:flex;justify-content:space-between;align-items:center;background:var(--amber);color:#111;
  font-weight:700;font-size:12px;letter-spacing:.12em;padding:3px 6px}
#insp-head button{background:none;border:none;color:#111;font-weight:700}
#insp-body{padding:8px 10px;font-size:12px;line-height:1.75}
#insp-body .row{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dotted var(--edge2)}
#insp-body .row b{color:var(--dim);font-weight:400;font-size:11px;letter-spacing:.06em}
#insp-body .row span{text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
#insp-body .txid{color:var(--green);font-size:10px;overflow-wrap:anywhere}
#insp-body .actions{display:flex;gap:6px;margin-top:8px}
.st-badge{padding:0 6px;font-weight:700}
.st-badge.next_block{background:var(--green);color:#111}
.st-badge.waiting{background:var(--amber);color:#111}
.st-badge.confirmed{background:var(--btc);color:#111}
.st-badge.unknown{background:var(--dim);color:#111}

/* CRT overlay - decorative only, static under reduced motion */
#crt{position:fixed;inset:0;pointer-events:none;z-index:40;
  background:repeating-linear-gradient(0deg,#0000 0 2px,#0002 2px 3px);
  box-shadow:inset 0 0 140px #000a}
@media (prefers-reduced-motion: no-preference){
  #crt{animation:flicker 6s infinite}
  @keyframes flicker{0%,100%{opacity:.85}48%{opacity:.8}50%{opacity:.9}52%{opacity:.8}}
}
@media (prefers-reduced-motion: reduce){
  #ticker-text{animation:none;padding-left:0}
}
@media (max-width:900px){
  #game{grid-template-columns:1fr 200px}
  #inspector{right:210px}
}