:root {
  --bg: #0b0b0f; --panel: #15151c; --line: #26262f; --text: #ededf2; --muted: #9a9aab;
  --accent: #f97316;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 14px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

header { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 800; letter-spacing: .06em; font-size: 18px; }
.ticker { color: var(--accent); }
.counter { display: flex; align-items: baseline; gap: 6px; margin-left: auto; }
.counter span { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.counter small { color: var(--muted); }
.banner { width: 100%; text-align: center; padding: 8px; border-radius: 8px; font-weight: 700; background: #3b1d0a; color: #fdba74; }
.banner.frozen { background: #172554; color: #93c5fd; }

body { display: flex; flex-direction: column; }
main { display: flex; flex: 1; min-height: 0; }
#viewport { position: relative; flex: 1; overflow: hidden; background: #050507; touch-action: none; cursor: crosshair; }
#stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
#board { display: block; image-rendering: pixelated; background: #18181b; box-shadow: 0 0 0 1px var(--line); }
#cursor { position: absolute; width: 1px; height: 1px; outline: .08px solid #fff; pointer-events: none; display: none; }
.zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.zoom button { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-size: 18px; }
.zoom button.on { border-color: #ec4899; color: #ec4899; }
#coords { position: absolute; left: 12px; bottom: 12px; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }

aside { width: 300px; border-left: 1px solid var(--line); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.panel h2 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.panel p { margin: 0 0 10px; color: var(--muted); }
.small { font-size: 12px; }

.score { margin-bottom: 8px; }
.score .row { display: flex; justify-content: space-between; font-weight: 600; }
.score .bar { height: 8px; background: #23232b; border-radius: 4px; overflow: hidden; margin-top: 3px; }
.score .bar i { display: block; height: 100%; transition: width .4s; }
.score.lead .row span:first-child::after { content: " 👑"; }

.primary { width: 100%; padding: 10px; border-radius: 8px; border: 0; background: var(--accent); color: #111; font-weight: 700; }
.me-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.tag { padding: 2px 8px; border-radius: 999px; font-weight: 700; color: #111; }
#meWallet { color: var(--muted); font-size: 12px; }
.timer { margin-top: 8px; text-align: center; padding: 8px; border-radius: 8px; background: #102a17; color: #86efac; font-weight: 700; font-variant-numeric: tabular-nums; }
.timer.wait { background: #2a1010; color: #fca5a5; }
.burn { margin-top: 6px; width: 100%; padding: 8px; border-radius: 8px; border: 1px solid #f97316; background: transparent; color: #fdba74; font-weight: 700; cursor: pointer; }
.burn.armed { background: #f97316; color: #111; }
.burn:disabled { opacity: .6; cursor: wait; }
.counter.burned span { color: #fb923c; }

#palette { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
#palette button { aspect-ratio: 1; border-radius: 4px; border: 2px solid transparent; }
#palette button.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }

#leaders { margin: 0; padding-left: 20px; }
#leaders li { margin-bottom: 2px; }
#leaders .px { float: right; color: var(--muted); font-variant-numeric: tabular-nums; }
#tiers { width: 100%; border-collapse: collapse; }
#tiers td { padding: 2px 0; }
#tiers td:last-child { text-align: right; }

dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; max-width: 420px; width: calc(100% - 32px); }
dialog::backdrop { background: rgba(0,0,0,.7); }
dialog h2 { margin-top: 0; }
#factionChoices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
#factionChoices button { padding: 14px; border-radius: 10px; border: 0; color: #111; font-weight: 800; font-size: 16px; }
dialog label { display: block; margin: 8px 0; color: var(--muted); }
dialog input, dialog select { width: 100%; margin-top: 4px; padding: 8px; background: #0b0b0f; color: var(--text); border: 1px solid var(--line); border-radius: 6px; }
dialog menu { padding: 0; margin: 12px 0 0; display: flex; justify-content: flex-end; }
dialog menu button { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #27272a; padding: 10px 16px; border-radius: 8px; border: 1px solid var(--line); z-index: 10; }

/* Stream overlay: /?stream=1 */
body.stream aside #mePanel, body.stream #palettePanel, body.stream #tiersPanel, body.stream .zoom, body.stream #coords { display: none; }
body.stream .counter span { font-size: 40px; }
body.stream .score .row { font-size: 18px; }
body.stream #viewport { cursor: default; }

@media (max-width: 760px) {
  body { display: block; }
  main { flex-direction: column; }
  #viewport { height: 62vh; flex: none; }
  aside { width: 100%; border-left: 0; }
  .counter { margin-left: 0; }
}