:root {
  --bg: #0b0d1a;
  --bg2: #141832;
  --bg3: #1c2144;
  --line: #262c55;
  --ink: #f2efe6;
  --dim: #9aa0b8;
  --faint: #5d6385;
  --up: #3ee08f;
  --down: #ff5b7a;
  --gold: #ffd23f;
  --lit: #ffd96b;
  --px: 'Silkscreen', 'JetBrains Mono', monospace;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--mono); padding-bottom: 76px; overflow-x: hidden; }
a { color: var(--lit); }
h1, h2, h3 { font-family: var(--px); font-weight: 700; margin: 0; letter-spacing: .02em; }
button, input { font: inherit; }
[hidden] { display: none !important; }

.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(11,13,26,.94); border-bottom: 2px solid var(--line); }
.logo { font: 700 22px var(--px); color: var(--lit); text-decoration: none; text-shadow: 2px 2px 0 #7a4b00; flex: none; }
.pill { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 10px var(--px); padding: 4px 8px; border: 2px solid var(--line); color: var(--dim); }
.pill.live { color: var(--up); border-color: var(--up); }
.mute { width: 44px; height: 44px; border: 2px solid var(--line); background: var(--bg2); color: var(--ink); cursor: pointer; flex: none; }
.mute.off { color: var(--faint); text-decoration: line-through; }

/* status strip */
.strip { display: grid; grid-template-columns: 1.2fr .8fr 1fr; border-bottom: 2px solid var(--line); background: var(--bg2); }
.strip div { padding: 6px 12px; display: flex; flex-direction: column; border-right: 2px solid var(--line); }
.strip div:last-child { border-right: 0; }
.strip span { font: 400 9px var(--px); color: var(--dim); letter-spacing: .06em; }
.strip b { font: 700 clamp(15px, 4.6vw, 20px) var(--px); font-variant-numeric: tabular-nums; white-space: nowrap; }
#bell.soon { color: var(--gold); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.rule { padding: 6px 12px; font: 400 11px var(--px); background: #2a1f00; color: var(--gold); border-bottom: 2px solid #5a4300; }

/* the town */
.stage { position: relative; height: min(100vw, 400px); min-height: 330px; background: var(--bg); overflow: hidden; }
#town { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.banner { position: absolute; left: 8px; right: 8px; top: 64px; padding: 10px 12px; background: rgba(20,24,50,.96); border: 3px solid var(--gold); font-size: 13px; text-align: center; animation: drop .45s cubic-bezier(.2,1.5,.4,1) both; z-index: 5; }
.banner h3 { font-size: 20px; color: var(--gold); margin-bottom: 4px; }
.banner .sub { color: var(--dim); font-size: 12px; }
.banner a { color: var(--up); }
@keyframes drop { from { transform: translateY(-30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* standings + feed */
.side { padding: 12px 16px 0; }
.sec-h { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 8px; }
.sec-h h2 { font-size: 15px; }
.sec-h span { font-size: 11px; color: var(--dim); }
.board { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 3px; }
.board li { display: grid; grid-template-columns: 22px 14px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 8px; background: var(--bg2); font-size: 12.5px; min-height: 40px; cursor: pointer; }
.board li.lead { outline: 2px solid var(--gold); }
.board .rk { font: 700 12px var(--px); color: var(--dim); }
.board .sw { width: 12px; height: 12px; }
.board .nm b { font: 700 13px var(--px); display: block; line-height: 1.1; }
.board .nm span { font-size: 10.5px; color: var(--dim); }
.board .nm span.mine { color: var(--lit); }
.board .bags { font-size: 10.5px; color: var(--dim); }
.board .pl { font: 700 13px var(--mono); text-align: right; min-width: 64px; }
.up { color: var(--up); } .down { color: var(--down); }
.crowns { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 3px; }
.crowns li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; background: var(--bg2); font-size: 12.5px; }
.crowns li b { color: var(--gold); font-family: var(--px); }
.crowns li.empty { color: var(--faint); background: none; }
.feed li.k-crown { border-left-color: var(--gold); background: #231c05; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; max-height: 420px; overflow: auto; }
.feed li { font-size: 12.5px; padding: 6px 8px; background: var(--bg2); border-left: 3px solid var(--line); animation: rise .25s ease both; word-break: break-word; }
.feed li b { color: var(--ink); }
.feed li .who { font: 700 11.5px var(--px); }
.feed li q { color: var(--dim); font-style: italic; }
.feed li q::before { content: '"'; } .feed li q::after { content: '"'; }
.feed li.k-bell, .feed li.k-mayor, .feed li.k-gen, .feed li.k-open { border-left-color: var(--gold); background: #231c05; }
.feed li.k-paid { border-left-color: var(--up); background: #0b2a1c; }
.feed li.k-own, .feed li.k-evict { border-left-color: var(--lit); background: #2a2208; }
.feed li.k-leave { border-left-color: var(--faint); }
.feed li a { color: var(--dim); }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* CA bar */
.ca { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(14,16,34,.97); border-top: 2px solid var(--line); }
.ca-in { display: flex; align-items: center; gap: 8px; max-width: 1240px; margin: 0 auto; }
.ca-k { font: 400 10px var(--px); color: var(--dim); }
.ca-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--dim); }
.ca.live .ca-v { color: var(--ink); }
.ca-mc { font: 700 13px var(--px); color: var(--up); white-space: nowrap; }
.btn { min-height: 44px; padding: 0 16px; border: 2px solid var(--line); background: var(--bg3); color: var(--ink); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; font: 700 12px var(--px); }
.btn.buy { background: var(--up); color: #062014; border-color: #1f8a55; }

/* auton card (tap a house or a row) */
.card { margin: 0 16px 12px; padding: 12px; background: var(--bg2); border: 2px solid var(--line); font-size: 12.5px; }
.card h3 { font-size: 18px; }
.card .bio { color: var(--dim); margin: 2px 0 8px; }
.card ul { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 3px; }
.card li { display: flex; justify-content: space-between; gap: 8px; }

main > section.how { padding: 18px 16px; border-top: 2px solid var(--line); }
.how h2 { font-size: 17px; margin-bottom: 8px; }
.steps { margin: 0; padding-left: 20px; color: var(--dim); font-size: 13px; display: grid; gap: 8px; }
.steps b { color: var(--ink); }
.fine { font-size: 11.5px; color: var(--faint); }
footer { padding: 16px; font-size: 11px; color: var(--faint); border-top: 2px solid var(--line); }

@media (min-width: 900px) {
  .show { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(360px, 1fr); grid-template-rows: auto auto 1fr; max-width: 1280px; margin: 0 auto; }
  .strip, .rule { grid-column: 1; }
  .stage { grid-column: 1; height: min(70vh, 600px); }
  .side { grid-column: 2; grid-row: 1 / span 3; max-height: calc(min(70vh, 600px) + 60px); overflow: auto; border-left: 2px solid var(--line); padding: 14px 18px; }
  .feed { max-height: none; }
  .card, main > section.how { max-width: 1280px; margin-left: auto; margin-right: auto; }
  .card { margin-top: 12px; }
}

/* ?stream=1: the show only */
body.stream { padding-bottom: 0; overflow: hidden; }
body.stream .bar, body.stream main > section:not(.show):not(.ca), body.stream footer { display: none; }
body.stream .show { display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: auto auto 1fr; height: calc(100vh - 64px); max-width: none; }
body.stream .strip { grid-column: 1; grid-row: 1; }
body.stream .rule { grid-column: 1; grid-row: 2; }
body.stream .stage { height: auto; min-height: 0; grid-column: 1; grid-row: 3; }
body.stream .side { grid-column: 2; grid-row: 1 / span 3; overflow: hidden; max-height: none; border-left: 2px solid var(--line); }
body.stream .ca { display: block; }
body.stream .ca-v { font-size: 17px; }
body.stream .ca-mc { font-size: 20px; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; } }