/* STICKUP: dusk over Solano Bay. The live city is the page; what lies over it are street plates: dusk-indigo slabs with hard edges,
   cream ink, one hot coral for what you press, mint only for money, gold only for the richest. Protest Strike (display),
   Asap Condensed (text, labels), Martian Mono (every number). */
@font-face { font-family: 'Protest Strike'; src: url('/fonts/ProtestStrike-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Asap Condensed'; src: url('/fonts/AsapCondensed-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Asap Condensed'; src: url('/fonts/AsapCondensed-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Asap Condensed'; src: url('/fonts/AsapCondensed-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Asap Condensed'; src: url('/fonts/AsapCondensed-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('/fonts/MartianMono-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('/fonts/MartianMono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --bg: #1c1840; --bg2: #151233; --panel: #262056; --panel2: #2f2868; --panel3: #3a3280;
  --line: rgba(255, 236, 204, .13); --line2: rgba(255, 236, 204, .24); --line3: rgba(255, 236, 204, .4);
  --ink: #fff0d6; --ink2: #cfc4e8; --ink3: #9a8fc4;
  --coral: #ff4f6d; --coral-d: #b3213f; --coral-ink: #2a0712; --cash: #6dffb5; --cash-d: #12885a; --gold: #ffd34d; --gold-ink: #2a1c00; --down: #ff6b81; --green: #59f0ad;
  --f-d: 'Protest Strike', 'Arial Black', sans-serif; --f-t: 'Asap Condensed', 'Arial Narrow', sans-serif; --f-m: 'Martian Mono', ui-monospace, monospace;
  --r: 6px; --r2: 10px; --top: 56px; --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font: 500 16px/1.4 var(--f-t); overflow: hidden; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: 600 17px/1 var(--f-t); color: var(--ink); background: var(--bg2); border: 2px solid var(--line2); border-radius: var(--r); height: 48px; padding: 0 14px; width: 100%; outline: none; user-select: text; -webkit-user-select: text; }
input::placeholder { color: var(--ink3); font-weight: 500; }
input:focus { border-color: var(--ink); }
input.is-bad { border-color: var(--down); }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
.is-hidden { display: none !important; }
::selection { background: var(--coral); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--panel3) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--panel3); border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; }
.lab { font: 600 11px/1 var(--f-t); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(89, 240, 173, .22); }
kbd { display: inline-block; min-width: 22px; padding: 3px 6px; border-radius: 4px; background: var(--ink); color: var(--bg); font: 700 11px/1 var(--f-m); text-align: center; }

#city { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; background: #2c8996; cursor: crosshair; }
body.is-title #city, body.is-out #city { cursor: default; }

/* ---- the top bar */
.top { position: fixed; z-index: 30; inset: 0 0 auto 0; height: var(--top); display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--bg); border-bottom: 2px solid var(--bg2); box-shadow: 0 2px 0 rgba(255, 236, 204, .06); }
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.mark { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.word { font: 400 26px/1 var(--f-d); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
.tick { font: 700 12px/1 var(--f-m); color: var(--coral); padding: 5px 7px; border: 1.5px solid var(--coral); border-radius: 4px; }
.pills { display: flex; gap: 6px; margin-left: 6px; min-width: 0; }
.pill { display: grid; gap: 4px; padding: 6px 12px 7px; background: var(--panel); border-radius: var(--r); min-width: 104px; }
.pill b { font: 700 14px/1 var(--f-m); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pill.is-pot { background: var(--cash); } .pill.is-pot .lab { color: #0c4a31; } .pill.is-pot b { color: #06281a; }
.ca-pill { display: flex; align-items: center; gap: 8px; height: 38px; margin-left: auto; padding: 0 6px 0 12px; border-radius: var(--r); background: var(--panel); border: 1.5px solid var(--line2); min-width: 0; max-width: 520px; }
.ca-pill.is-live { border-color: var(--gold); }
.ca-lab { font: 400 14px/1 var(--f-d); letter-spacing: .04em; color: var(--gold); white-space: nowrap; }
.ca-addr { display: flex; align-items: center; gap: 8px; min-width: 0; height: 28px; font: 500 12px/1 var(--f-m); color: var(--ink); cursor: copy; user-select: text; -webkit-user-select: text; }
.ca-addr:disabled { cursor: default; color: var(--ink3); font: 500 13px/1 var(--f-t); padding-right: 8px; }
.ca-addr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-copy { flex: none; font: 700 11px/1 var(--f-t); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 6px 9px; border-radius: 4px; background: var(--gold); color: var(--gold-ink); min-width: 56px; text-align: center; }
.ca-link { flex: none; font: 700 11px/1 var(--f-t); letter-spacing: .08em; text-transform: uppercase; padding: 7px 9px; border-radius: 4px; background: var(--panel3); color: var(--ink); white-space: nowrap; }
.ca-link:hover { background: var(--ink); color: var(--bg); }
.xbtn { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r); background: var(--panel); } .xbtn svg { width: 16px; height: 16px; fill: var(--ink); }
.toplink { flex: none; height: 38px; padding: 0 14px; display: grid; place-items: center; border-radius: var(--r); background: var(--panel); font: 700 13px/1 var(--f-t); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.toplink:hover { background: var(--ink); color: var(--bg); }

/* ---- the front door */
.title { position: fixed; z-index: 20; inset: var(--top) 0 0 0; display: grid; grid-template-columns: minmax(400px, 34vw) minmax(0, 1fr) 348px; grid-template-rows: minmax(0, 1fr) auto auto; grid-template-areas: 'hero . side' 'play play side' 'foot foot foot'; pointer-events: none; }
.title > * { pointer-events: auto; }
.hero { grid-area: hero; position: relative; padding: clamp(14px, 3.2vh, 34px) 20px 18px 28px; display: flex; flex-direction: column; gap: clamp(8px, 1.5vh, 16px); min-height: 0; }
.hero::before { content: ''; position: absolute; z-index: -1; inset: 0 -30% 0 0; background: linear-gradient(90deg, rgba(28, 24, 64, .96) 0%, rgba(28, 24, 64, .9) 52%, rgba(28, 24, 64, 0) 100%); pointer-events: none; }
.eyebrow { display: flex; align-items: center; gap: 10px; font: 600 12px/1 var(--f-t); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; }
.eyebrow span { color: var(--gold); overflow: hidden; text-overflow: ellipsis; }
.h1 { font: 400 clamp(46px, 9.4vh, 96px)/.9 var(--f-d); letter-spacing: .005em; text-transform: uppercase; color: var(--ink); text-shadow: 4px 4px 0 var(--bg2); }
.h1 em { font-style: normal; color: var(--coral); }
.lede { max-width: 46ch; font: 500 clamp(15px, 2vh, 18.5px)/1.4 var(--f-t); color: var(--ink2); }
.made { display: inline-flex; align-self: flex-start; align-items: stretch; border-radius: var(--r); overflow: hidden; font: 700 12.5px/1 var(--f-t); letter-spacing: .09em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--bg2); }
.made b { padding: 9px 11px; background: var(--gold); color: var(--gold-ink); font-weight: 700; }
.made span { padding: 9px 11px; background: var(--ink); color: var(--bg); }
.rules { display: grid; gap: clamp(6px, 1.2vh, 12px); margin-top: auto; max-width: 440px; }
.rules li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.rules li > b { font: 700 13px/1 var(--f-m); color: var(--coral); padding-top: 5px; }
.rules h3 { font: 400 20px/1 var(--f-d); letter-spacing: .03em; text-transform: uppercase; }
.rules p { margin-top: 4px; font: 500 14.5px/1.35 var(--f-t); color: var(--ink2); }
.play { grid-area: play; margin: 0 14px 12px 20px; padding: 14px 16px 10px; background: var(--panel); border: 2px solid var(--bg2); border-radius: var(--r2); box-shadow: 0 6px 0 var(--bg2), 0 0 0 1px var(--line); }
.play-row { display: grid; grid-template-columns: 190px minmax(0, 1fr) 210px; gap: 12px; align-items: end; }
.field { display: grid; gap: 6px; min-width: 0; }
.btn-play { height: 60px; padding: 0 26px; border-radius: var(--r); background: var(--coral); color: #fff; font: 400 30px/1 var(--f-d); letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 5px 0 var(--coral-d); transition: transform .08s, box-shadow .08s, background .12s; }
.btn-play:hover { background: #ff6680; } .btn-play:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--coral-d); }
.btn-play.is-small { height: 46px; font-size: 20px; padding: 0 18px; }
.btn-ghost { height: 46px; padding: 0 16px; border-radius: var(--r); border: 2px solid var(--line2); font: 700 14px/1 var(--f-t); letter-spacing: .08em; text-transform: uppercase; } .btn-ghost:hover { border-color: var(--ink); }
.play-note { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font: 500 13.5px/1.3 var(--f-t); color: var(--ink3); }
.linkbtn { font: 600 13px/1.3 var(--f-t); color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .linkbtn:hover, .linkbtn.is-in { color: var(--cash); }
.side { grid-area: side; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 12px 0; min-height: 0; }
.card { background: var(--panel); border: 2px solid var(--bg2); border-radius: var(--r2); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 44px; padding: 0 14px; background: var(--panel2); border-bottom: 2px solid var(--bg2); }
.card-title { display: inline-flex; align-items: center; gap: 9px; font: 400 17px/1 var(--f-d); letter-spacing: .05em; text-transform: uppercase; }
.board { flex: none; }
.board-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; height: 31px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 600 15px/1 var(--f-t); }
.board-list li:last-child { border-bottom: 0; }
.board-list i { font: 500 11px/1 var(--f-m); font-style: normal; color: var(--ink3); }
.board-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list em { font: 400 9px/1 var(--f-t); font-style: normal; letter-spacing: 1px; color: var(--coral); }
.board-list b { font: 700 13px/1 var(--f-m); color: var(--cash); font-variant-numeric: tabular-nums; }
.board-list li:first-child b { color: var(--gold); } .board-list li:first-child span { color: var(--gold); }
.board-list li.is-me { background: rgba(255, 240, 214, .09); }
.board-list li.is-none { display: block; padding: 9px 14px; height: auto; color: var(--ink3); font-weight: 500; }
.foot { grid-area: foot; display: flex; justify-content: space-between; gap: 12px; padding: 7px 20px; background: var(--bg); border-top: 2px solid var(--bg2); font: 500 12px/1 var(--f-t); letter-spacing: .06em; color: var(--ink3); }

/* ---- the chat (the kit's site chat) */
.chat { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.chat > * { flex: none; }
.chat-list { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 6px 0; user-select: text; -webkit-user-select: text; }
.chat-list li { position: relative; padding: 5px 14px; font-size: 14.5px; line-height: 1.4; color: var(--ink2); overflow-wrap: anywhere; }
.chat-list li.is-dev { margin: 4px 8px; padding: 8px 10px; border-radius: var(--r); background: rgba(255, 211, 77, .1); box-shadow: inset 0 0 0 1px rgba(255, 211, 77, .35); color: var(--ink); }
.chat-list .c-none { color: var(--ink3); }
.c-time { margin-right: 7px; font: 500 10px/1 var(--f-m); color: var(--ink3); }
.c-name { margin-right: 7px; font: 700 14.5px/1 var(--f-t); color: var(--ink); }
.chat-list li.is-dev .c-name { color: var(--gold); }
.c-tag { display: inline-block; margin-right: 6px; padding: 3px 6px; border-radius: 4px; background: var(--gold); color: var(--gold-ink); font: 700 10px/1 var(--f-t); letter-spacing: .1em; vertical-align: 1px; }
.c-pin { display: flex; align-items: flex-start; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .04); }
.c-pin.is-dev { background: rgba(255, 211, 77, .09); border-bottom-color: rgba(255, 211, 77, .3); }
.c-pin svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: var(--gold); }
.c-pin-body { flex: 1; min-width: 0; display: grid; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; max-height: 7.2em; overflow-y: auto; }
.c-pin-lab { font: 700 10.5px/1.2 var(--f-t); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.c-unpin, .c-mod button { flex: none; padding: 3px 7px; border-radius: 4px; background: var(--panel3); border: 1px solid var(--line2); font: 600 10.5px/1 var(--f-t); color: var(--ink2); }
.c-unpin:hover { color: var(--ink); border-color: var(--line3); } .c-mod button:hover { color: var(--down); border-color: var(--down); }
.c-mod { position: absolute; right: 10px; top: 4px; display: none; gap: 4px; } .chat-list li:hover .c-mod { display: flex; }
.chat-form { display: flex; align-items: center; gap: 8px; padding: 9px 10px 5px; border-top: 2px solid var(--bg2); }
.chat-form input { height: 42px; font-size: 15px; }
.chat-form .c-tag { flex: none; margin: 0; }
.chat-send { flex: none; height: 42px; padding: 0 14px; border-radius: var(--r); background: var(--ink); color: var(--bg); font: 700 13px/1 var(--f-t); letter-spacing: .08em; text-transform: uppercase; }
.chat-hint { padding: 0 12px 8px; font-size: 12px; color: var(--ink3); min-height: 16px; } .chat-hint.is-bad { color: var(--down); }
.c-devout { margin-right: 10px; padding: 3px 7px; border-radius: 4px; background: rgba(255, 211, 77, .14); color: var(--gold); font: 700 10.5px/1 var(--f-t); letter-spacing: .1em; text-transform: uppercase; }
body.is-dev .chat { box-shadow: 0 0 0 2px rgba(255, 211, 77, .55); }
.devnote { position: fixed; z-index: 70; top: 70px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(680px, calc(100vw - 24px)); padding: 14px 14px 14px 16px; border-radius: var(--r2); background: #2c2408; border: 2px solid var(--gold); box-shadow: 0 6px 0 rgba(0, 0, 0, .35); font-size: 16px; color: var(--ink); }
.devnote #devnote-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.devnote #devnote-x { flex: none; width: 28px; height: 28px; border-radius: 6px; color: var(--ink2); font-size: 20px; line-height: 1; } .devnote #devnote-x:hover { background: rgba(255, 255, 255, .1); color: var(--ink); }

/* ---- in a run */
.hud { display: none; }
body.is-play .hud { display: block; }
body.is-play .hero, body.is-play .play, body.is-play .board, body.is-play .foot, body.is-out .title { display: none; }
body.is-play .title { inset: auto auto 12px 12px; display: block; width: 336px; }
body.is-play .side { padding: 0; } body.is-play .chat { display: none; } body.is-play.is-chat .chat { display: flex; height: 330px; }
body.is-play .pills .pill:nth-child(n+3) { display: none; }
.hud > * { position: fixed; z-index: 25; pointer-events: none; }
.h-me { left: 12px; top: calc(var(--top) + 12px); width: 264px; padding: 12px 14px 12px; background: var(--panel); border: 2px solid var(--bg2); border-radius: var(--r2); box-shadow: 0 5px 0 var(--bg2); }
.h-cash { display: grid; gap: 5px; }
.h-cash b { font: 700 30px/1 var(--f-m); letter-spacing: -.03em; color: var(--cash); font-variant-numeric: tabular-nums; }
.h-worth { font: 600 13.5px/1 var(--f-t); color: var(--ink3); min-height: 14px; } .h-worth.is-ok { color: var(--gold); }
.h-bar { margin-top: 10px; height: 9px; border-radius: 3px; background: var(--bg2); overflow: hidden; } .h-bar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; transition: width .12s linear; } .h-bar i.is-low { background: var(--down); }
.h-heat { display: flex; align-items: center; gap: 5px; margin-top: 9px; } .h-heat i { width: 22px; height: 9px; border-radius: 2px; background: var(--bg2); } .h-heat i.is-on { background: var(--coral); } .h-heat .lab { margin-left: 6px; }
.h-feed { left: 50%; top: calc(var(--top) + 12px); transform: translateX(-50%); width: min(560px, calc(100vw - 620px)); display: grid; gap: 4px; justify-items: center; }
.h-feed li { max-width: 100%; padding: 6px 12px; border-radius: var(--r); background: rgba(28, 24, 64, .88); font: 600 14px/1.2 var(--f-t); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: rise .25s var(--ease); }
.h-feed b { color: var(--ink); font-weight: 700; } .h-feed u { text-decoration: none; color: var(--cash); font: 700 12.5px/1 var(--f-m); }
@keyframes rise { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.h-right { right: 12px; top: calc(var(--top) + 12px); width: 196px; display: grid; gap: 8px; }
.h-map { position: relative; padding: 6px; background: var(--panel); border: 2px solid var(--bg2); border-radius: var(--r2); box-shadow: 0 5px 0 var(--bg2); } .h-map canvas { display: block; width: 180px; height: 180px; border-radius: 4px; image-rendering: pixelated; }
.h-zone { display: block; margin-top: 6px; text-align: center; font: 700 11.5px/1 var(--f-t); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; overflow: hidden; }
.board-list.is-mini { background: rgba(28, 24, 64, .88); border-radius: var(--r); overflow: hidden; } .board-list.is-mini li { height: 25px; padding: 0 9px; font-size: 13px; grid-template-columns: 14px minmax(0, 1fr) auto auto; gap: 6px; } .board-list.is-mini b { font-size: 11px; } .board-list.is-mini li:nth-child(n+6) { display: none; }
.h-prompt { left: 50%; bottom: 96px; transform: translateX(-50%); min-width: 300px; max-width: calc(100vw - 24px); padding: 12px 18px; background: var(--ink); color: var(--bg); border-radius: var(--r); box-shadow: 0 5px 0 rgba(21, 18, 51, .8); font: 700 17px/1.15 var(--f-t); text-align: center; }
.h-prog { display: none; margin-top: 9px; height: 8px; border-radius: 3px; background: rgba(28, 24, 64, .25); overflow: hidden; } .h-prompt.is-prog .h-prog { display: block; } .h-prog i { display: block; height: 100%; width: 0; background: var(--coral); }
.h-gun { right: 12px; bottom: 14px; display: flex; align-items: baseline; gap: 10px; padding: 10px 14px; background: var(--panel); border: 2px solid var(--bg2); border-radius: var(--r2); } .h-gun b { font: 400 19px/1 var(--f-d); letter-spacing: .04em; text-transform: uppercase; } .h-gun span { font: 700 15px/1 var(--f-m); color: var(--gold); min-width: 28px; text-align: right; }
.h-keys { left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 14px; padding: 9px 14px; border-radius: var(--r); background: rgba(28, 24, 64, .88); font: 600 13px/1 var(--f-t); color: var(--ink2); white-space: nowrap; transition: opacity .6s; } .h-keys span { display: inline-flex; align-items: center; gap: 6px; } .h-keys.is-gone { opacity: 0; }
.recon { position: fixed; z-index: 60; left: 50%; top: 40%; transform: translate(-50%, -50%); padding: 16px 22px; border-radius: var(--r2); background: var(--ink); color: var(--bg); font: 700 18px/1 var(--f-t); box-shadow: 0 6px 0 rgba(21, 18, 51, .8); }
.tc { display: none; }

/* ---- sheets */
.sheet { position: fixed; z-index: 50; inset: var(--top) 0 0 0; display: grid; place-items: center; padding: 16px; background: rgba(21, 18, 51, .62); }
.sheet-card { width: min(520px, 100%); padding: 26px 26px 20px; background: var(--panel); border: 2px solid var(--bg2); border-top: 8px solid var(--coral); border-radius: var(--r2); box-shadow: 0 8px 0 var(--bg2); display: grid; gap: 12px; animation: rise .3s var(--ease); }
.sheet-card.is-win { border-top-color: var(--cash); }
.sheet-eyebrow { font: 700 12px/1 var(--f-t); letter-spacing: .16em; text-transform: uppercase; color: var(--coral); } .is-win .sheet-eyebrow { color: var(--cash); }
.sheet-h { font: 400 clamp(34px, 6vw, 50px)/.95 var(--f-d); text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; } .sheet-h.is-small { font-size: 30px; }
.is-win .sheet-h { font: 700 clamp(40px, 7vw, 58px)/1 var(--f-m); letter-spacing: -.04em; color: var(--cash); } .sheet-h small { font: 400 .45em/1 var(--f-d); letter-spacing: .04em; color: var(--ink); }
.sheet-sub { font: 500 15.5px/1.4 var(--f-t); color: var(--ink2); }
.sheet-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 4px 0; }
.sheet-stats > div { display: grid; gap: 7px; padding: 11px 12px; background: var(--bg2); } .sheet-stats dt { font: 600 11px/1 var(--f-t); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); } .sheet-stats dd { font: 700 17px/1 var(--f-m); color: var(--ink); font-variant-numeric: tabular-nums; }
.sheet-tx { font: 600 14px/1 var(--f-t); color: var(--cash); text-decoration: underline; text-underline-offset: 3px; }
.sheet-hint { text-align: center; font: 500 12px/1 var(--f-t); color: var(--ink3); }
.sheet-err { min-height: 16px; font: 600 13.5px/1.2 var(--f-t); color: var(--down); }
.sheet-row { display: flex; gap: 8px; flex-wrap: wrap; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: 170px; transform: translateX(-50%); max-width: calc(100vw - 24px); padding: 11px 16px; border-radius: var(--r); background: var(--coral); color: #fff; font: 700 15.5px/1.2 var(--f-t); box-shadow: 0 4px 0 var(--coral-d); text-align: center; animation: rise .2s var(--ease); }

/* ---- narrower windows */
@media (max-width: 1380px) { .ca-pill { max-width: 300px; } .ca-link { display: none; } .pill { min-width: 92px; padding: 6px 9px 7px; } }
@media (max-width: 1180px) {
  body { overflow: auto; } body.is-play, body.is-out { overflow: hidden; }
  .pills .pill:nth-child(n+2) { display: none; } .ca-lab { display: none; } .toplink { padding: 0 10px; }
  .title { position: relative; inset: auto; margin-top: var(--top); display: block; background: linear-gradient(180deg, rgba(28, 24, 64, 0) 0, rgba(28, 24, 64, .5) 22vh, var(--bg) 46vh); padding-top: 26vh; pointer-events: auto; }
  .hero { padding: 0 16px 14px; } .hero::before { display: none; } .h1 { font-size: clamp(46px, 13vw, 84px); } .rules { margin-top: 6px; }
  .play { margin: 0 12px 12px; } .play-row { grid-template-columns: 1fr; } .play-note { flex-direction: column; }
  .side { padding: 0 12px 12px; } .chat { height: 420px; flex: none; }
  .foot { flex-direction: column; gap: 6px; padding: 12px 16px 18px; }
  body.is-play .title { position: fixed; margin: 0; padding: 0; background: none; inset: auto 8px 8px 8px; width: auto; }
  .h-feed { top: auto; bottom: 150px; width: calc(100vw - 24px); } .h-feed li:nth-child(n+3) { display: none; }
  .h-right { width: 126px; } .h-map canvas { width: 110px; height: 110px; } .board-list.is-mini { display: none; }
  .h-me { width: 190px; padding: 9px 10px; } .h-cash b { font-size: 22px; }
}
@media (max-width: 640px) {
  .word { font-size: 21px; } .tick { display: none; } .toplink { font-size: 11px; height: 34px; margin-left: auto; } .top { gap: 8px; padding: 0 10px; }
  /* the coin address: nothing before launch; from launch a full row of its own under the bar */
  .ca-pill { display: none; } .ca-pill.is-live { display: flex; position: fixed; z-index: 29; top: var(--top); left: 0; right: 0; max-width: none; margin: 0; border-radius: 0; border-width: 0 0 2px; height: 36px; } .ca-pill.is-live ~ .toplink { margin-left: auto; } .ca-pill .ca-lab { display: inline; }
  .made { flex-direction: column; font-size: 11.5px; } .made b, .made span { padding: 7px 10px; }
  .pill { min-width: 0; }
}
@media (max-height: 820px) and (min-width: 1181px) { .rules p { display: none; } .lede { font-size: 15px; } .board-list li { height: 27px; } }
@media (max-height: 680px) and (min-width: 1181px) { .rules { display: none; } }

/* ---- touch: the thumbs own the bottom corners, so the feed and the gun go up under the cards */
body.is-touch.is-play .tc { display: block; } body.is-touch .h-keys { display: none; }
body.is-touch .h-gun { bottom: auto; top: calc(var(--top) + 196px); right: 12px; padding: 6px 10px; } body.is-touch .h-gun b { font-size: 15px; }
body.is-touch .h-feed { bottom: auto; top: calc(var(--top) + 240px); width: calc(100vw - 24px); } body.is-touch .h-feed li { font-size: 13px; padding: 5px 10px; }
body.is-touch .h-prompt { bottom: 200px; font-size: 15px; min-width: 0; }
body.is-touch.is-play .toplink.is-docs { display: none; }
@media (max-height: 520px) {
  body.is-touch .h-me { width: 172px; padding: 7px 9px; } body.is-touch .h-cash b { font-size: 19px; } body.is-touch .h-worth { font-size: 12px; } body.is-touch .h-bar { margin-top: 6px; } body.is-touch .h-heat { margin-top: 6px; }
  body.is-touch .h-right { width: 104px; } body.is-touch .h-map canvas { width: 88px; height: 88px; } body.is-touch .h-zone { display: none; }
  body.is-touch .h-gun { top: calc(var(--top) + 10px); right: auto; left: 196px; }
  body.is-touch .h-feed { top: auto; bottom: 10px; width: calc(100vw - 470px); } body.is-touch .h-feed li:nth-child(n+2) { display: none; }
  body.is-touch .h-prompt { bottom: 62px; max-width: calc(100vw - 470px); padding: 8px 12px; }
  .tc-stick { width: 116px; height: 116px; left: 16px; bottom: 16px; } .tc-fire { bottom: 20px; } .tc-use { bottom: 14px; } .tc-brake { bottom: 122px; } .tc-bank { bottom: 96px; }
}
.tc > * { position: fixed; pointer-events: auto; touch-action: none; }
.tc-stick { left: 22px; bottom: 26px; width: 132px; height: 132px; border-radius: 50%; background: rgba(28, 24, 64, .55); border: 2px solid var(--line3); } .tc-stick i { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: var(--ink); }
.tc-b { width: 74px; height: 74px; border-radius: 50%; background: rgba(28, 24, 64, .7); border: 2px solid var(--line3); font: 400 15px/1 var(--f-d); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.tc-fire { right: 20px; bottom: 34px; width: 92px; height: 92px; background: var(--coral); border-color: var(--coral-d); color: #fff; font-size: 19px; }
.tc-use { right: 124px; bottom: 26px; } .tc-bank { right: 124px; bottom: 112px; background: var(--cash); border-color: var(--cash-d); color: #06281a; } .tc-brake { right: 28px; bottom: 138px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }