:root {
  --bg: #07090c;
  --panel: #0e1218;
  --line: #1d2530;
  --text: #d8e1ea;
  --dim: #7b8794;
  --steel: #3a4552;
  --wall: #ffb020;
  --door: #38f28b;
  --trap: #ff3b5c;
  --bot: #5ee7ff;
  --pixel: 'Press Start 2P', monospace;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--mono); }
body { min-height: 100vh; }

.top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.brand { font-family: var(--pixel); font-size: 18px; color: var(--wall); letter-spacing: 2px; }
.tag { color: var(--dim); font-size: 13px; flex: 1; min-width: 220px; }
.status { font-family: var(--pixel); font-size: 9px; line-height: 1.5; padding: 4px 6px; border: 1px solid currentColor; color: var(--dim); }
.status.live { color: var(--door); }
.status.demo { color: var(--trap); }
.status.offline { color: var(--trap); }
.feed li i { color: var(--trap); font-style: normal; font-size: 10px; }
[hidden] { display: none !important; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; padding: 16px; max-width: 1180px; margin: 0 auto; }
@media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); } }

.stage { min-width: 0; }
.hud { display: flex; justify-content: space-between; align-items: center; font-family: var(--pixel); font-size: 11px; margin-bottom: 10px; }
.hud .bot b { color: var(--bot); }
.hud .hold b { color: var(--wall); }
.hud .sep { margin: 0 8px; color: var(--dim); }
.round b { color: var(--text); }

.phase { font-family: var(--pixel); font-size: 13px; text-align: center; padding: 8px 0; min-height: 30px; }
.phase.build { color: var(--bot); }
.phase.chase { color: var(--trap); animation: blink 0.5s steps(2) infinite; }
.phase.end { color: var(--wall); }
@keyframes blink { 50% { opacity: 0.55; } }

.meter { height: 8px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 10px; }
.meter .bar { height: 100%; width: 0; background: var(--bot); transition: width 0.12s linear; }
.meter .bar.chase { background: var(--trap); }

.arena { position: relative; width: 100%; max-width: min(640px, calc(100vh - 150px)); min-width: 280px; margin: 0 auto; aspect-ratio: 1; }
.arena canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }

.bubble { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -100%); width: max-content; max-width: min(78%, 300px); background: #f4f7fa; color: #0b0f14;
  font-size: 13px; font-weight: 700; padding: 8px 12px; border: 3px solid #0b0f14; box-shadow: 4px 4px 0 var(--bot);
  opacity: 0; transition: opacity 0.2s; pointer-events: none; text-align: center; }
.bubble.on { opacity: 1; }

.result { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.25s;
  background: radial-gradient(circle, rgba(7,9,12,0.92) 0%, rgba(7,9,12,0.6) 75%); font-family: var(--pixel); }
.result.on { opacity: 1; }
.result .big { font-size: clamp(22px, 6vw, 44px); letter-spacing: 3px; }
.result .sub { margin-top: 14px; font-size: clamp(9px, 2vw, 12px); color: var(--text); line-height: 1.8; }
.result .quote { margin: 18px auto 0; max-width: 80%; font-family: var(--mono); font-weight: 700; font-size: clamp(12px, 2.4vw, 15px); color: #f4f7fa; }
.result .quote.typing::after { content: '…'; display: inline-block; animation: typing 1s steps(4) infinite; overflow: hidden; vertical-align: bottom; width: 0; }
@keyframes typing { to { width: 1.2em; } }
.voice { text-align: center; color: var(--dim); font-size: 11px; margin-top: 6px; opacity: 0.8; }
.result.caught .big { color: var(--wall); }
.result.escaped .big { color: var(--bot); }

.odds { text-align: center; color: var(--dim); font-size: 12px; margin-top: 10px; min-height: 18px; }
.odds b { color: var(--text); }

.side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card { background: var(--panel); border: 1px solid var(--line); padding: 12px 14px; }
.card h2 { font-family: var(--pixel); font-size: 10px; margin: 0 0 10px; color: var(--dim); letter-spacing: 1px; }
.hint { font-size: 12px; color: var(--dim); margin: 0 0 10px; }

.buys { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.buys button { font-family: var(--pixel); font-size: 10px; color: var(--bg); background: var(--wall); border: 0; padding: 10px 6px; cursor: pointer;
  box-shadow: 3px 3px 0 #7a5208; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.buys button small { font-family: var(--mono); font-size: 11px; font-weight: 700; }
.buys button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #7a5208; }
.buys button.whale { background: var(--trap); box-shadow: 3px 3px 0 #7d1426; color: #fff; }
.flow { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--dim); }
.flow select { background: var(--bg); color: var(--text); border: 1px solid var(--line); font-family: var(--mono); padding: 6px; }

.wanted { margin: 0; padding-left: 22px; font-size: 13px; }
.wanted li { padding: 3px 0; }
.wanted li b { color: var(--wall); }
.wanted .empty { list-style: none; margin-left: -22px; color: var(--dim); }

.feed { list-style: none; margin: 0; padding: 0; font-size: 12px; max-height: 260px; overflow: auto; }
.feed li { padding: 4px 0; border-bottom: 1px dashed var(--line); color: var(--dim); }
.feed li b { color: var(--text); }
.feed li.wall b.w { color: var(--wall); }
.feed li.trap b.w, .feed li.caught { color: var(--trap); }
.feed li.escaped { color: var(--bot); }

.rules ul { margin: 0; padding-left: 18px; font-size: 12px; color: var(--dim); line-height: 1.6; }

@media (max-width: 480px) {
  .phase { font-size: 10px; }
  .hud { font-size: 9px; }
}