:root {
  --bg: #0b1a0f;
  --panel: #10240f;
  --ink: #b7f7c0;
  --dim: #5f9c6b;
  --amber: #ffd479;
  --green: #46d369;
  --red: #ff5d5d;
  --line: #1f4a26;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #050a06; }
body {
  font-family: "Press Start 2P", ui-monospace, monospace;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  -webkit-font-smoothing: none;
}

.crt {
  position: relative;
  width: min(1080px, 100%);
  min-height: min(560px, 90vh);
  background: radial-gradient(120% 100% at 50% 0%, #122a16 0%, var(--bg) 70%);
  border: 4px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 0 0 4px #06110a, 0 0 40px rgba(70, 211, 105, 0.15), inset 0 0 60px rgba(0,0,0,.6);
  padding: 16px;
  overflow: hidden;
}
/* CRT scanlines + flicker */
.scanlines { pointer-events: none; position: absolute; inset: 0; z-index: 9;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 2px, transparent 2px 4px);
  mix-blend-mode: multiply; animation: flick 6s infinite steps(60); }
@keyframes flick { 0%,97%{opacity:.5} 98%{opacity:.35} 100%{opacity:.5} }

.hud { display: flex; justify-content: space-between; gap: 8px; font-size: 9px;
  color: var(--dim); border-bottom: 2px dashed var(--line); padding-bottom: 10px; margin-bottom: 12px; }
.hud b { color: var(--amber); }

.stage { display: grid; grid-template-columns: 150px 1fr; gap: 14px; align-items: start; }
.desk { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#fletcher { width: 130px; height: 130px; image-rendering: auto;
  filter: drop-shadow(0 4px 0 #06110a); transition: transform .1s; }
#fletcher.pop { animation: pop .35s steps(4); }
@keyframes pop { 50% { transform: translateY(-8px) scale(1.06); } }
.speech { font-size: 8px; line-height: 1.6; color: var(--ink);
  background: #06110a; border: 2px solid var(--line); border-radius: 6px; padding: 8px; min-height: 42px; text-align: center; }

.case { background: var(--panel); border: 3px solid var(--line);
  border-radius: 6px; padding: 14px; box-shadow: inset 0 0 24px rgba(0,0,0,.5); }
.case-head { display: flex; align-items: baseline; gap: 10px; }
.tick { font-size: 16px; color: var(--amber); }
.name { font-size: 8px; color: var(--dim); }
.addr { font-size: 7px; color: var(--dim); margin: 6px 0 12px; word-break: break-all; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat { background: #06110a; border: 2px solid var(--line); border-radius: 4px; padding: 8px; }
.stat .k { font-size: 7px; color: var(--dim); }
.stat .v { font-size: 11px; color: var(--ink); margin-top: 5px; }
.stat .v.good { color: var(--green); }
.stat .v.warn { color: var(--red); }

.controls { display: flex; gap: 12px; margin-top: 16px; }
.btn { font-family: inherit; cursor: pointer; font-size: 12px; color: #06110a;
  border: none; border-radius: 6px; padding: 14px; box-shadow: 0 4px 0 #06110a; transition: transform .05s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #06110a; }
.btn[disabled] { opacity: .4; cursor: default; }
.controls .gem { flex: 1; background: var(--green); }
.controls .rug { flex: 1; background: var(--red); }

.reveal { margin-top: 14px; }
.verdict { font-size: 12px; padding: 10px; border-radius: 6px; text-align: center; margin-bottom: 10px; }
.verdict.win { background: #10361c; color: var(--green); border: 2px solid var(--green); }
.verdict.lose { background: #3a1414; color: var(--red); border: 2px solid var(--red); }
.reasons { list-style: none; margin: 0 0 12px; padding: 0; }
.reasons li { font-size: 8px; line-height: 1.7; color: var(--ink); padding: 6px 8px;
  border-left: 3px solid var(--amber); background: #06110a; margin-bottom: 6px; }
.next, .start { width: 100%; background: var(--amber); }

/* Fixed = viewport-sized, so the intro/game-over modal is always fully visible
   (the CRT box can be short before content renders). */
.overlay { position: fixed; inset: 0; z-index: 100; background: rgba(5,10,6,.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; padding: 24px; overflow: auto; }
.ov-fletcher { width: 150px; height: 150px; }
.overlay h1 { font-size: 20px; line-height: 1.5; color: var(--amber); margin: 0; }
.overlay p { font-size: 9px; line-height: 1.8; color: var(--dim); max-width: 340px; }
.overlay .start { max-width: 240px; }

.hidden { display: none !important; }

/* Fletcher's Run — action bar, clue, back link */
.back { position: absolute; top: 14px; left: 14px; z-index: 12; font-size: 8px;
  color: var(--amber); text-decoration: none; background: #06110a; border: 2px solid var(--line);
  padding: 6px 8px; border-radius: 4px; }
.back:active { transform: translateY(2px); }
.actions { display: flex; gap: 8px; margin-top: 16px; }
.actions .btn { flex: 1; font-size: 11px; padding: 14px 6px; }
.actions .ape { background: var(--green); }
.actions .skip { background: var(--amber); }
.actions .scan { background: #6fb3d6; }
.clue { margin-top: 10px; font-size: 8px; line-height: 1.7; color: var(--amber);
  background: #06110a; border-left: 3px solid var(--amber); padding: 8px; }
.verdict.neutral { background: #2a2410; color: var(--amber); border: 2px solid var(--amber); }

/* Fantasy RWA */
.content { min-width: 0; }
.pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px;
  max-height: 340px; overflow-y: auto; padding: 2px 4px 2px 0; }
.pcard { background: var(--panel); border: 2px solid var(--line); border-radius: 5px; padding: 8px; cursor: pointer; }
.pcard:hover { border-color: var(--dim); }
.pcard.picked { border-color: var(--green); box-shadow: 0 0 8px rgba(70,211,105,.4); background: #10361c; }
.pcard.dim { opacity: .4; }
.pc-top { display: flex; justify-content: space-between; align-items: baseline; }
.pc-sym { font-size: 10px; color: var(--amber); }
.pc-cost { font-size: 9px; color: var(--green); }
.pc-name { font-size: 6px; color: var(--dim); margin: 4px 0; }
.pc-price { font-size: 7px; color: var(--ink); margin-bottom: 6px; }
.pc-stats { display: flex; flex-direction: column; gap: 3px; }
.srow { display: flex; align-items: center; gap: 5px; }
.srow span { font-size: 5px; color: var(--dim); width: 20px; }
.bar { flex: 1; height: 5px; background: #06110a; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; }
.bar.mom i { background: var(--green); }
.bar.vol i { background: var(--red); }
.bar.liq i { background: #6fb3d6; }
.bar.yld i { background: var(--amber); }
.lock-btn { width: 100%; margin-top: 12px; background: var(--amber); font-size: 12px; }

/* Smart Money — Copy or Fade */
.signal { background: var(--panel); border: 3px solid var(--line); border-radius: 6px; padding: 16px; box-shadow: inset 0 0 24px rgba(0,0,0,.5); }
.sig-head { display: flex; align-items: baseline; gap: 10px; }
.sig-head .tick { font-size: 18px; color: var(--amber); }
.sig-head .name { font-size: 8px; color: var(--dim); }
.sig-whales { font-size: 9px; color: #6fb3d6; margin: 12px 0 6px; }
.sig-whales b { color: var(--ink); }
.sig-breakdown { font-size: 8px; color: var(--dim); margin: 0 0 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sig-breakdown b { color: var(--ink); }
.sig-breakdown .g-elite b { color: var(--amber); }
.sig-breakdown .g-good b { color: var(--green); }
.sig-breakdown .g-dormant b { color: #b98cff; }
.alpha-badge { background: var(--amber); color: #111; font-size: 8px; padding: 2px 6px; border-radius: 3px; }
.sig-price-row { display: flex; align-items: baseline; gap: 14px; }
.sig-price { font-size: 16px; color: var(--ink); }
.sig-change { font-size: 12px; }
.sig-change.up { color: var(--green); }
.sig-change.down { color: var(--red); }
.actions .copy { background: var(--green); }
.actions .fade { background: var(--red); }

.legend { display: flex; gap: 16px; font-size: 8px; margin-bottom: 8px; }
.legend .you { color: var(--green); }
.legend .idx { color: var(--amber); }
#chart { width: 100%; background: #06110a; border: 2px solid var(--line); border-radius: 6px; image-rendering: auto; }
#f-result { margin-top: 12px; }

/* Scanner Lab — paste an address → visual findings */
.sc-search { display: flex; gap: 8px; margin-bottom: 12px; }
.sc-in { flex: 1; min-width: 0; font-family: inherit; font-size: 9px; color: var(--ink);
  background: #06110a; border: 2px solid var(--line); border-radius: 6px; padding: 12px; }
.sc-in::placeholder { color: var(--dim); }
.sc-in:focus { outline: none; border-color: var(--dim); }
.sc-go { background: var(--amber); font-size: 10px; padding: 12px 14px; white-space: nowrap; }
.sc-out { min-height: 40px; }
.sc-note { font-size: 8px; line-height: 1.7; color: var(--dim); background: #06110a;
  border: 2px dashed var(--line); border-radius: 6px; padding: 12px; text-align: center; }
.sc-note.err { color: var(--red); border-color: var(--red); }
.sc-badge { font-size: 8px; padding: 4px 8px; margin-left: auto; }
.sc-grid { grid-template-columns: 1fr 1fr; margin-top: 12px; }
@media (min-width: 640px) { .sc-grid { grid-template-columns: 1fr 1fr 1fr; } }
.sc-flags { margin-top: 12px; }
.sc-flags li { border-left-color: var(--red); }
/* Flag border reflects the verdict — a low-risk / verified note shouldn't look alarming. */
.sc-flags-low li { border-left-color: var(--dim); }
.sc-flags-medium li { border-left-color: var(--amber); }
.sc-flags-high li { border-left-color: var(--red); }
/* Intelligence-led trade panel */
.sc-trade { background: #06110a; border: 2px solid var(--line); border-radius: 6px; padding: 12px; margin: 12px 0 4px; }
.sc-trade-h { font-size: 9px; color: var(--amber); margin-bottom: 10px; }
.sc-trade-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 9px; }
.tr-lbl { color: var(--dim); }
.tr-amt { width: 90px; font-family: inherit; font-size: 9px; color: var(--ink);
  background: #0b1a0f; border: 2px solid var(--line); border-radius: 4px; padding: 6px; }
.tr-amt:focus { outline: none; border-color: var(--dim); }
.tr-pay { color: #6fb3d6; }
.tr-arrow { color: var(--dim); }
.tr-out { color: var(--ink); }
.tr-out b { color: var(--green); }
.tr-meta { font-size: 7px; color: var(--dim); margin: 8px 0 10px; line-height: 1.6; }
.tr-nc { font-size: 7px; color: var(--dim); }
.tr-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.tr-tab { font-family: inherit; font-size: 8px; cursor: pointer; color: var(--dim);
  background: #0b1a0f; border: 2px solid var(--line); border-radius: 4px; padding: 6px 14px; }
.tr-tab.active { color: #06110a; background: var(--green); border-color: var(--green); }
.tr-tab#tr-sell.active { background: var(--red); border-color: var(--red); }
.tr-btns { display: flex; gap: 8px; }
.tr-connect { flex: 1; background: #6fb3d6; font-size: 9px; padding: 10px; }
.tr-sign { flex: 1; background: var(--green); font-size: 9px; padding: 10px; }
.tr-connect[disabled], .tr-sign[disabled] { opacity: .5; cursor: default; }
.tr-status { font-size: 7px; margin-top: 8px; line-height: 1.6; min-height: 10px; }
.tr-status.ok { color: var(--green); }
.tr-status.err { color: var(--red); }
.tr-status a { color: var(--amber); }

/* Underlying-stock (RWA peg) context line */
.sc-peg { font-size: 9px; color: var(--ink); background: #06110a; border: 2px solid var(--line);
  border-left: 3px solid var(--amber); border-radius: 4px; padding: 8px 10px; margin: 4px 0 12px; }
.sc-peg b { color: var(--amber); }
.pg-up { color: var(--green); }
.pg-dn { color: var(--red); }
.pg-open { color: var(--green); }
.pg-closed { color: var(--dim); }
.pg-sep { color: var(--dim); }

/* Deep links (dexscreener / explorer) */
.sc-links { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.sc-link { font-size: 8px; color: var(--amber); text-decoration: none; background: #06110a;
  border: 2px solid var(--line); border-radius: 4px; padding: 6px 8px; }
.sc-link:hover { border-color: var(--amber); }
a.wc-chain { color: #6fb3d6; text-decoration: none; }
a.wc-chain:hover { color: var(--ink); }
/* See-whales drill-down (top holders + their multichain net worth) */
.sc-whales-btn { background: #6fb3d6; font-size: 9px; padding: 10px 12px; margin-top: 12px; }
.sc-whales { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.wh-head { font-size: 7px; color: var(--dim); margin-bottom: 4px; }
.wh-row { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 8px; align-items: baseline;
  background: #06110a; border: 2px solid var(--line); border-radius: 4px; padding: 7px 9px; }
.wh-rank { font-size: 8px; color: var(--dim); }
.wh-addr { font-size: 8px; color: var(--ink); }
.wh-tag { font-size: 6px; color: var(--amber); margin-left: 6px; }
.wh-pct { font-size: 8px; color: var(--dim); min-width: 60px; text-align: right; }
.wh-pos { font-size: 8px; color: var(--ink); min-width: 110px; text-align: right; }
.wh-sub { color: var(--dim); }
.wh-tier { font-size: 8px; color: var(--ink); min-width: 96px; text-align: right; }
.wh-usd { color: inherit; }
/* Tier colours — whales pop, shrimp recede */
.wh-t-humpback, .wh-t-whale { color: var(--amber); }
.wh-t-dolphin { color: #6fb3d6; }
.wh-t-fish { color: var(--green); }
.wh-t-shrimp { color: var(--dim); }
/* Rows with a real whale/dolphin get a subtle highlight */
.wh-row:has(.wh-t-whale), .wh-row:has(.wh-t-humpback) { border-color: var(--amber); }
.wh-row:has(.wh-t-dolphin) { border-color: #3a5f70; }
/* Smart-money strip inside a scan */
.sc-sm { background: #06110a; border: 2px solid var(--line); border-radius: 6px; padding: 10px; margin: 4px 0 4px; }
.sc-sm.off { color: var(--dim); font-size: 8px; }
.sc-sm-h { font-size: 8px; color: #6fb3d6; margin-bottom: 8px; }
.sc-sm .sig-breakdown { margin: 0; }
/* Wallet whale-check */
.wc-tier { font-size: 14px; }
.wc-total { font-size: 9px; color: var(--dim); margin: 4px 0 12px; }
.wc-total b { color: var(--amber); }
.wc-list { display: flex; flex-direction: column; gap: 6px; }
.wc-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  background: #06110a; border: 2px solid var(--line); border-radius: 4px; padding: 8px 10px; }
.wc-row.down { opacity: .45; }
.wc-chain { font-size: 8px; color: var(--ink); }
.wc-bal { font-size: 8px; color: var(--dim); }
.wc-usd { font-size: 9px; color: var(--green); min-width: 56px; text-align: right; }
.sc-fine { font-size: 6px; color: var(--dim); margin-top: 10px; line-height: 1.6; }

@media (max-width: 520px) {
  .stage { grid-template-columns: 1fr; }
  .desk { flex-direction: row; }
  #fletcher { width: 90px; height: 90px; }
}