/* ACRE. Night field: deep graphite with a green cast, panels lifted a step, hairlines, small radii; the live map is the picture.
   Gold = money and the main action, green = live / yours, red = out. Kanit (display + numbers), Fira Sans (text + labels). */
:root {
  --bg: #0d1110; --bg2: #0a0d0c; --panel: #131917; --panel2: #18201d; --panel3: #1f2925;
  --line: #222c28; --line2: #2f3b36; --line3: #3f4d47;
  --ink: #eef3ef; --ink2: #b0bcb5; --ink3: #75837b;
  --gold: #ffc23d; --gold-l: #ffd473; --gold-d: #c98f0a; --gold-ink: #1a1405;
  --green: #35d987; --green-d: #1f9e5f; --down: #ff5c55;
  --r: 6px; --r2: 10px;
  --f-d: 'Kanit', 'Arial Narrow', sans-serif; --f-t: 'Fira Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --pad: 40px; --dock: 76px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scrollbar-width: thin; scrollbar-color: var(--line3) var(--bg2); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--line3); border-radius: 4px; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
body { margin: 0; background: var(--bg); background-image: radial-gradient(1200px 700px at 50% -10%, rgba(53, 217, 135, .06), transparent 60%), radial-gradient(900px 600px at 100% 0%, rgba(255, 194, 61, .04), transparent 60%); background-attachment: fixed; color: var(--ink); font: 400 15px/1.5 var(--f-t); -webkit-font-smoothing: antialiased; }
body.is-playing { overflow: hidden; background: var(--bg2); }
body.is-title, body.is-page { min-height: 100vh; }
.hold-s { font-variant-numeric: tabular-nums; }
::selection { background: var(--gold); color: var(--gold-ink); }
:where(a) { color: inherit; text-decoration: none; }
:where(button, input) { font: inherit; color: inherit; }
:where(button) { background: none; border: 0; padding: 0; cursor: pointer; }
:where(ol, ul, dl, dd) { list-style: none; margin: 0; padding: 0; }
:where(h1, h2, p) { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.is-hidden { display: none !important; }

.lab { font: 600 11px/1.2 var(--f-t); letter-spacing: .13em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.lab b { color: var(--ink); font-weight: 600; }
.num, .mono { font-family: var(--f-t); font-variant-numeric: tabular-nums; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 4px; border: 1px solid currentColor; font: 600 11px/1 var(--f-t); opacity: .8; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(53, 217, 135, .18); }
.card { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line); border-radius: var(--r2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 48px -30px rgba(0, 0, 0, .8); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.card-head .lab { color: var(--ink2); }
.tag { display: inline-block; height: 22px; line-height: 20px; padding: 0 8px; border-radius: 4px; border: 1px solid rgba(255, 194, 61, .35); background: rgba(255, 194, 61, .07); color: var(--gold); font: 600 10.5px/20px var(--f-t); letter-spacing: .1em; text-transform: uppercase; font-style: normal; white-space: nowrap; }

/* buttons and fields */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 46px; padding: 0 22px; border-radius: var(--r); border: 1px solid transparent; font: 700 18px/1 var(--f-d); letter-spacing: .06em; text-transform: uppercase; transition: background .14s, transform .12s var(--ease), box-shadow .14s; }
.btn kbd { opacity: .6; }
.btn-go { background: var(--gold); color: var(--gold-ink); box-shadow: 0 8px 24px -10px rgba(255, 194, 61, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn-go:hover { background: var(--gold-l); transform: translateY(-1px); }
.btn-go:active { transform: translateY(1px); }
.btn-ghost { background: var(--panel3); border-color: var(--line2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--line3); }
.btn-ink { background: var(--ink); color: var(--bg); width: 100%; height: 48px; font-size: 17px; }
.btn-ink:hover { background: #fff; }
input:not([type=range]):not([type=checkbox]) { width: 100%; height: 46px; padding: 0 14px; background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--r); color: var(--ink); font: 400 15.5px/1 var(--f-t); outline: 0; transition: border-color .14s, box-shadow .14s; }
input::placeholder { color: #5f6d66; }
input:not([type=range]):focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 194, 61, .14); }
input.is-bad { border-color: var(--down) !important; }
.mono-in { font-size: 14px !important; letter-spacing: .01em; }
input[type=range] { width: 100%; accent-color: var(--gold); }
.field { display: grid; gap: 8px; }
.hint { font-size: 13px; line-height: 1.4; color: var(--ink3); min-height: 18px; }
.hint.is-bad { color: var(--down); }
.acct { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; font-size: 13.5px; color: var(--ink3); }
.acct b { color: var(--ink); }
.link { color: var(--gold); font-size: 13.5px; text-decoration: underline; text-decoration-color: rgba(255, 194, 61, .4); text-underline-offset: 3px; font-weight: 500; }
.link:hover { color: var(--gold-l); }
.check { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--ink2); }
.check input { width: 16px; height: 16px; accent-color: var(--gold); }

/* ------------------------------------------------------------------ top bar */
.top { position: sticky; top: 0; z-index: 30; height: 62px; display: flex; align-items: center; gap: 32px; padding: 0 var(--pad); background: rgba(10, 13, 12, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.brand { display: flex; flex: none; align-items: center; gap: 12px; }
.mark { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: var(--panel); box-shadow: 0 0 0 1px var(--line2); }
.word { font: 800 25px/1 var(--f-d); letter-spacing: .06em; text-transform: uppercase; }
.tick { font: 600 12px/1 var(--f-t); letter-spacing: .1em; color: var(--gold); }
.top-links { display: flex; gap: 6px; }
.top-links a { font: 600 12px/1 var(--f-t); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); padding: 9px 12px; border-radius: var(--r); }
.top-links a:hover { color: var(--ink); background: var(--panel); }
.top-links a.is-on { color: var(--ink); background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line2); }
.pill { display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 14px; border: 1px solid var(--line2); border-radius: 999px; font: 600 11px/1 var(--f-t); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; background: var(--panel); }
.pill b { font: 600 14px/1 var(--f-d); letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.top-side { margin-left: auto; display: flex; align-items: center; gap: 12px; min-width: 0; }
.xbtn { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--panel); }
.xbtn:hover { border-color: var(--line3); background: var(--panel2); }
.xbtn svg { width: 17px; height: 17px; fill: var(--ink); }
/* the CA slot (the launch kit's web/ca-slot): before launch it says so, at launch the whole address fills in */
.ca-pill { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 5px 0 14px; border-radius: var(--r); border: 1px solid var(--line2); background: var(--panel); min-width: 0; max-width: 620px; }
.ca-pill.is-live { border-color: rgba(255, 194, 61, .5); background: rgba(255, 194, 61, .06); }
.ca-lab { font: 700 14px/1 var(--f-d); letter-spacing: .06em; color: var(--gold); white-space: nowrap; }
.ca-addr { display: flex; align-items: center; gap: 8px; min-width: 0; height: 30px; font: 500 13.5px/1 var(--f-t); color: var(--ink); cursor: copy; user-select: text; -webkit-user-select: text; }
.ca-addr:disabled { cursor: default; color: var(--ink3); padding-right: 8px; }
.ca-addr > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-copy { flex: none; font: 700 12px/1 var(--f-t); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px; border-radius: 4px; background: var(--panel3); color: var(--ink); }
.ca-link { flex: none; font: 700 12px/1 var(--f-t); letter-spacing: .08em; text-transform: uppercase; padding: 8px 11px; border-radius: 4px; background: var(--gold); color: var(--gold-ink); }
.ca-link:hover { background: var(--gold-l); }

/* ------------------------------------------------------------------ the first screen: 400 | centre | 380 */
.title { display: grid; grid-template-columns: 400px minmax(0, 1fr) 380px; gap: 20px; padding: 22px var(--pad) calc(var(--dock) + 26px); align-items: start; }
.col { display: grid; gap: 20px; min-width: 0; align-content: start; }
.play { display: grid; gap: 11px; padding: 22px 22px 18px; position: relative; overflow: hidden; }
.play::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--gold), rgba(255, 194, 61, 0)); }
.h1 { font: 800 46px/.94 var(--f-d); letter-spacing: -.005em; text-transform: uppercase; font-style: italic; }
.h1 em { font-style: italic; color: var(--gold); }
.lead { font-size: 15px; line-height: 1.45; color: var(--ink2); margin-bottom: 4px; }
.play .lab { margin-top: 4px; }
.play-row { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 10px; }
.play-row .btn { height: 46px; padding: 0; }
.list .prow { display: block; }
.prow li { position: relative; display: grid; grid-template-columns: 40px 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 72px; padding: 0 16px; border-top: 1px solid var(--line); transition: background .2s; }
.prow li:first-child { border-top: 0; }
.prow li.is-on { background: linear-gradient(90deg, rgba(255, 194, 61, .09), rgba(255, 194, 61, 0) 70%); }
.prow li.is-on::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold); }
.prow .rk { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line3); font: 700 17px/1 var(--f-d); color: var(--ink2); }
.prow li.is-on .rk { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.prow canvas { width: 48px; height: 48px; border-radius: 8px; background: var(--bg2); box-shadow: 0 0 0 1px var(--line2); image-rendering: pixelated; }
.prow .tx { min-width: 0; display: grid; gap: 1px; }
.prow .q { font: 500 13px/1.2 var(--f-t); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .nm { font: 700 16px/1.15 var(--f-d); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .st { font: 500 11px/1.35 var(--f-t); letter-spacing: .04em; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow .st em { font-style: normal; color: var(--gold); }
.prow .pc { align-self: start; margin-top: 16px; font: 500 12px/1 var(--f-t); color: var(--ink3); }

/* centre */
.now { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.eyebrow { display: flex; align-items: center; gap: 9px; font: 600 11px/1 var(--f-t); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.eyebrow.is-down { color: var(--down); }
.eyebrow.is-down .dot { background: var(--down); box-shadow: 0 0 0 3px rgba(255, 92, 85, .18); }
.now-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.now-who { min-width: 0; }
.who { font: 800 66px/.95 var(--f-d); letter-spacing: .005em; text-transform: uppercase; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 10px; background: linear-gradient(180deg, #ffffff, #c9d6cf); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 8px; }
.who-sub { font: 500 17px/1.3 var(--f-t); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-meta { flex: none; font: 600 11px/1 var(--f-t); letter-spacing: .12em; color: var(--ink3); text-transform: uppercase; padding-bottom: 6px; }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 20px; }
.mapcard { display: grid; grid-template-rows: 40px auto; overflow: hidden; background: var(--bg2); }
.map-head { display: flex; justify-content: space-between; align-items: center; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.mapslot { position: relative; height: clamp(320px, calc(100vh - 470px), 560px); overflow: hidden; background: var(--bg2); }
.mapslot::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 60px rgba(0, 0, 0, .55); }
.mapslot #game { position: absolute; inset: 0; width: 100%; height: 100%; }
#game { display: block; touch-action: none; }
body.is-playing #game { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; }
.rules-card { display: grid; grid-template-rows: 44px auto; }
.rl { display: grid; }
.rl li { display: grid; gap: 7px; justify-items: start; padding: 12px 16px 13px; border-top: 1px solid var(--line); }
.rl li:first-child { border-top: 0; }
.rl p { font: 400 14.5px/1.4 var(--f-t); color: var(--ink2); }
.rl b { color: var(--ink); font-weight: 600; }
.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); overflow: hidden; }
.strip .cell { display: grid; gap: 6px; align-content: start; padding: 16px 18px 15px; min-width: 0; }
.strip .cell + .cell { border-left: 1px solid var(--line); }
.strip .big { font: 700 32px/1 var(--f-d); letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.strip .cell:first-child .big { color: var(--gold); }
.strip .cell i { font-style: normal; font-size: 13px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.runs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.runs li { display: grid; gap: 9px; justify-items: start; padding: 16px 18px 18px; }
.runs .no { font: 700 13px/1 var(--f-d); color: var(--gold); letter-spacing: .08em; }
.runs b { font: 700 22px/1 var(--f-d); text-transform: uppercase; letter-spacing: .03em; }
.runs p { font-size: 14px; line-height: 1.4; color: var(--ink2); }

/* right */
.pot { display: block; position: relative; overflow: hidden; }
.pot::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, rgba(255, 194, 61, 0), var(--gold)); }
.pot-big { display: grid; gap: 4px; padding: 18px 16px 16px; border-bottom: 1px solid var(--line); background: radial-gradient(420px 160px at 100% 0%, rgba(255, 194, 61, .1), transparent 70%); }
.pot-big b { font: 800 34px/1.05 var(--f-d); letter-spacing: .005em; text-transform: uppercase; font-style: italic; color: var(--gold); font-variant-numeric: tabular-nums; }
.pot-big i { font-style: normal; font-size: 13.5px; color: var(--ink3); }
.kv { display: grid; padding: 6px 0; }
.kv div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 7px 16px; font-size: 13.5px; }
.kv dt { font: 600 10.5px/1.7 var(--f-t); letter-spacing: .1em; color: var(--ink3); text-transform: uppercase; }
.kv dd { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.kv dd a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(255, 194, 61, .4); text-underline-offset: 3px; }
.sub-head { border-top: 1px solid var(--line); }
.sub-head a { color: var(--gold) !important; }
.pays { display: grid; }
.pays li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.pays li:first-child { border-top: 0; }
.pays .who2 { font: 700 15px/1.15 var(--f-d); text-transform: uppercase; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pays .amt { font: 700 15px/1.15 var(--f-d); font-variant-numeric: tabular-nums; color: var(--gold); text-align: right; }
.pays .meta { font: 500 11px/1.4 var(--f-t); letter-spacing: .04em; color: var(--ink3); }
.pays a { font: 500 12.5px/1.4 var(--f-t); color: var(--gold); text-align: right; }
.pays-none { display: block !important; padding: 16px !important; color: var(--ink3); font-size: 14px; }
/* the site chat (server/chat.mjs + public/js/chat.js): everybody reads, anybody with a name writes, the dev with the DEV tag */
.chat { display: grid; grid-template-rows: 48px minmax(0, 1fr) auto auto; position: relative; overflow: hidden; border-color: rgba(53, 217, 135, .28); }
.chat::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--green), rgba(53, 217, 135, 0)); }
.chat-head { height: 48px; background: linear-gradient(180deg, rgba(53, 217, 135, .07), rgba(53, 217, 135, 0)); }
.chat-title { display: inline-flex; align-items: center; gap: 9px; font: 700 17px/1 var(--f-d); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.chat-list { height: 270px; overflow-y: auto; padding: 8px 0; scrollbar-width: thin; scrollbar-color: var(--line3) transparent; }
.chat-list li { position: relative; padding: 6px 16px; font-size: 14.5px; line-height: 1.45; color: var(--ink2); overflow-wrap: anywhere; }
.chat-list li.is-dev { margin: 4px 8px; padding: 8px 10px; border-radius: var(--r); background: rgba(255, 194, 61, .08); box-shadow: inset 0 0 0 1px rgba(255, 194, 61, .3); color: var(--ink); }
.chat-list .c-none { color: var(--ink3); }
.c-time { margin-right: 7px; font: 500 11px/1 var(--f-t); color: var(--ink3); font-variant-numeric: tabular-nums; }
.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-text { color: inherit; }
.c-del, .c-mute { cursor: pointer; }
.c-mod { position: absolute; right: 10px; top: 4px; display: none; gap: 4px; }
.chat-list li:hover .c-mod { display: flex; }
.c-mod button { 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-mod button:hover { color: var(--down); border-color: var(--down); }
.chat-form { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; border-top: 1px solid var(--line); }
.chat-form input { height: 44px !important; font-size: 15px !important; }
.chat-form .c-tag { flex: none; margin: 0; }
.chat-send { flex: none; height: 44px; padding: 0 16px; font-size: 16px; }
.chat-hint { padding: 0 14px 10px; 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, 194, 61, .12); 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 1px rgba(255, 194, 61, .45), 0 24px 48px -30px rgba(0, 0, 0, .8); }
/* the dev's message on every open page: a banner at the top, during a run too */
.devnote { position: fixed; z-index: 70; top: 74px; 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: linear-gradient(180deg, #2a2310, #1d190c); border: 1px solid rgba(255, 194, 61, .6); box-shadow: 0 0 0 4px rgba(255, 194, 61, .1), 0 24px 50px -16px #000; color: var(--ink); font-size: 15.5px; line-height: 1.4; animation: devin .35s var(--ease) both; }
.devnote.is-hidden { display: none !important; }
.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, .08); color: var(--ink); }
body.is-playing .devnote { top: 96px; }
@keyframes devin { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.foot-line { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); font: 600 11px/1.4 var(--f-t); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }

/* ------------------------------------------------------------------ the dock: 76px, a gold top edge */
.dock { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; height: var(--dock); display: grid; grid-template-columns: 400px minmax(0, 1fr) 380px; gap: 20px; align-items: center; padding: 0 var(--pad); background: rgba(8, 11, 10, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -1px 0 rgba(255, 194, 61, .25); color: var(--ink); }
body.is-playing .dock, body.is-playing .top { display: none; }
.dock-l { display: flex; align-items: center; gap: 14px; min-width: 0; }
.dock-l > div { display: grid; gap: 3px; min-width: 0; }
.dock-mark { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--line2); }
.dock-q { font: 500 14px/1.1 var(--f-t); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-n { font: 700 16px/1 var(--f-d); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-c { display: flex; align-items: center; gap: 16px; min-width: 0; }
.dock-play { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px rgba(255, 194, 61, .12), 0 10px 24px -8px rgba(255, 194, 61, .7); transition: transform .12s var(--ease), background .14s; }
.dock-play:hover { background: var(--gold-l); transform: scale(1.04); }
.dock-play svg { width: 20px; height: 20px; fill: var(--gold-ink); margin-left: 3px; }
.dock-t { flex: none; font: 600 12px/1 var(--f-t); letter-spacing: .04em; color: var(--ink3); min-width: 38px; font-variant-numeric: tabular-nums; }
.dock-bar { position: relative; flex: 1; height: 5px; border-radius: 3px; background: var(--panel3); }
.dock-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--gold-d), var(--gold)); }
.dock-bar i::after { content: ''; position: absolute; right: -6px; top: -4px; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px rgba(255, 194, 61, .7); }
.dock-r { display: flex; align-items: center; justify-content: flex-end; gap: 20px; min-width: 0; font: 600 11px/1 var(--f-t); letter-spacing: .12em; text-transform: uppercase; }
.dock-s { color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.dock-r a { color: var(--ink2); flex: none; }
.dock-r a:hover { color: var(--gold); }
.dock-nfa { flex: none; color: var(--ink3); }

/* ------------------------------------------------------------------ in game: fixed slots over the full-screen map */
.hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.hud > * { pointer-events: auto; position: absolute; }
.hud .card { background: rgba(19, 25, 23, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hud-top { top: 14px; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 178px 284px 178px; width: 642px; height: 72px; overflow: hidden; }
.stat { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 14px 1fr; align-items: center; padding: 11px 16px 9px; min-width: 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat i { font-style: normal; font-size: 12px; color: var(--ink3); white-space: nowrap; text-align: right; }
.stat b { grid-column: 1 / -1; font: 700 22px/1 var(--f-d); white-space: nowrap; align-self: end; font-variant-numeric: tabular-nums; }
.stat-hero { background: linear-gradient(180deg, rgba(255, 194, 61, .12), rgba(255, 194, 61, .03)); }
.stat-hero b { font: 800 30px/1 var(--f-d); color: var(--gold); }
.lb { top: 14px; right: 16px; width: 310px; }
.rows { padding: 6px 0; }
.rows li { display: grid; grid-template-columns: 20px 12px minmax(0, 1fr) 48px 62px; align-items: center; gap: 8px; height: 26px; padding: 0 14px; font-size: 13.5px; }
.rows li.is-me { background: rgba(255, 194, 61, .1); }
.rows li.is-gap { border-top: 1px dashed var(--line2); }
.rows .rk { font: 600 12px/1 var(--f-t); color: var(--ink3); text-align: right; }
.rows .sw { width: 11px; height: 11px; border-radius: 3px; }
.rows .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rows .pc { font: 500 12.5px/1 var(--f-t); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink2); }
.rows .cy { font: 600 12.5px/1 var(--f-t); font-variant-numeric: tabular-nums; text-align: right; color: var(--gold); }
.feed { left: 16px; bottom: 100px; width: 340px; height: 136px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; pointer-events: none; }
.feed li { align-self: flex-start; max-width: 100%; height: 26px; padding: 0 10px; border-radius: 6px; background: rgba(19, 25, 23, .88); border: 1px solid var(--line); font-size: 13px; line-height: 24px; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed li b { color: var(--ink); }
.feed li em { font-style: normal; color: var(--gold); font-weight: 600; }
.mini { right: 16px; bottom: 16px; width: 184px; height: 184px; padding: 7px; }
.mini canvas { display: block; width: 168px; height: 168px; border-radius: 6px; image-rendering: pixelated; background: var(--bg2); }
.cash { left: 50%; bottom: 22px; transform: translateX(-50%); width: min(520px, calc(100vw - 32px)); height: 64px; padding: 12px 16px 0; }
.cash-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 24px; font-size: 14.5px; color: var(--ink2); white-space: nowrap; }
.cash-row span { overflow: hidden; text-overflow: ellipsis; }
.cash-row b { color: var(--gold); font: 700 17px/1 var(--f-d); }
.cash-bar { margin-top: 9px; height: 6px; border-radius: 3px; background: var(--panel3); overflow: hidden; }
.cash-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, var(--gold-d), var(--gold)); }
.cash.is-on { border-color: rgba(255, 194, 61, .55); box-shadow: 0 0 0 4px rgba(255, 194, 61, .1), 0 24px 48px -30px #000; }
.cash.is-on .cash-row { color: var(--ink); }
.cash.is-wait .cash-row { color: var(--down); }
.touch-cash { display: none; right: 16px; bottom: 214px; height: 46px; font-size: 16px; background: var(--gold); color: var(--gold-ink); }
.hud-menu { left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--r); background: rgba(19, 25, 23, .9); border: 1px solid var(--line2); font: 600 13px/1 var(--f-t); color: var(--ink); }
.hud-menu:hover { border-color: var(--line3); }

.toast { position: fixed; z-index: 60; top: 100px; left: 50%; transform: translateX(-50%); max-width: min(560px, calc(100vw - 32px)); padding: 11px 16px; border-radius: var(--r2); background: rgba(24, 32, 29, .96); border: 1px solid var(--line2); box-shadow: 0 20px 40px -20px #000; font-size: 14.5px; color: var(--ink); text-align: center; pointer-events: none; transition: opacity .2s, transform .2s var(--ease); }
.toast.is-hidden { display: block !important; opacity: 0; transform: translate(-50%, -6px); }
.toast.is-bad { border-color: rgba(255, 92, 85, .6); }
.toast.is-good { border-color: rgba(53, 217, 135, .55); }
.toast em { font-style: normal; color: var(--gold); font-weight: 600; }

/* sheets */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(4, 6, 5, .66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet { width: min(470px, 100%); padding: 26px; display: grid; gap: 16px; }
.sheet-wide { width: min(580px, 100%); }
.h2 { font: 800 38px/1 var(--f-d); letter-spacing: .005em; text-transform: uppercase; font-style: italic; }
.h2.num { font: 800 50px/1 var(--f-d); color: var(--gold); }
.sub { font-size: 15px; line-height: 1.5; color: var(--ink2); min-height: 22px; }
.sub b { color: var(--ink); }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 .cell { display: grid; gap: 8px; padding: 12px; min-width: 0; }
.grid4 .cell + .cell { border-left: 1px solid var(--line); }
.grid4 .cell b { font: 700 18px/1 var(--f-d); white-space: nowrap; }
.row-btns { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; margin-top: 4px; }
.row-btns .btn { font-size: 17px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.step { height: 34px; display: grid; place-items: center; border-radius: var(--r); border: 1px solid var(--line2); font: 600 11px/1 var(--f-t); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); background: var(--bg2); }
.step.is-on { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); }
.step.is-bad { color: #fff; background: var(--down); border-color: var(--down); }
.txlink { font-size: 14px; color: var(--gold); text-decoration: underline; text-underline-offset: 3px; height: 20px; font-weight: 600; }
.how { display: grid; border: 1px solid var(--line); border-radius: var(--r2); background: var(--bg2); counter-reset: how; }
.how li { display: grid; grid-template-columns: 34px 100px minmax(0, 1fr); align-items: baseline; gap: 6px; padding: 13px 16px; counter-increment: how; font-size: 14.5px; line-height: 1.5; color: var(--ink2); }
.how li + li { border-top: 1px solid var(--line); }
.how li::before { content: '0' counter(how); font: 700 13px/1 var(--f-d); color: var(--gold); }
.how li b { font: 700 17px/1.2 var(--f-d); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.how kbd { margin: 0 2px; }

/* ------------------------------------------------------------------ the rules + ledger page */
.page { width: min(1080px, calc(100vw - 2 * var(--pad))); margin: 0 auto; padding: 38px 0 calc(var(--dock) + 30px); display: grid; gap: 40px; }
.page-head { display: grid; gap: 14px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.page-head .h1 { font-size: clamp(46px, 6vw, 80px); }
.page-head .lead { font-size: 16.5px; max-width: 74ch; }
.sec { display: grid; gap: 16px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sec-head h2 { font: 800 30px/1 var(--f-d); text-transform: uppercase; font-style: italic; letter-spacing: .01em; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles .cell { display: grid; gap: 8px; padding: 16px; min-width: 0; }
.tiles .cell + .cell { border-left: 1px solid var(--line); }
.tiles .cell b { font: 700 28px/1.05 var(--f-d); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tiles .cell:first-child b { color: var(--gold); }
.tiles .cell i { font-style: normal; font-size: 13px; color: var(--ink3); }
.rules { display: grid; }
.rules li { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; padding: 15px 18px; font-size: 15px; color: var(--ink2); }
.rules li + li { border-top: 1px solid var(--line); }
.rules li > b { font: 700 18px/1.2 var(--f-d); text-transform: uppercase; letter-spacing: .04em; color: var(--ink); }
.rules li span b { color: var(--ink); }
.table { overflow: hidden; }
.table .tr { display: grid; grid-template-columns: 96px 210px minmax(0, 1fr) 130px 110px; align-items: center; gap: 12px; min-height: 42px; padding: 0 18px; font-size: 14px; border-top: 1px solid var(--line); }
.table .tr:first-child { border-top: 0; min-height: 40px; background: rgba(255, 255, 255, .02); border-bottom: 1px solid var(--line2); }
.table .tr4 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
.table .tr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink2); }
.table .tr .amt { text-align: right; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.table .tr .amt.is-in { color: var(--gold); }
.table .tr a { color: var(--gold); font-size: 13px; text-align: right; text-decoration: underline; text-underline-offset: 3px; }
.table .empty { padding: 22px 18px; color: var(--ink3); font-size: 14.5px; }
.foot { display: flex; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); font: 600 11px/1.4 var(--f-t); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.foot a { color: var(--gold); }

/* ------------------------------------------------------------------ one screen on a desktop: no page scroll, lists scroll inside */
@media (min-width: 1221px) and (min-height: 640px) {
  body.is-title { height: 100vh; overflow: hidden; }
  .title { height: calc(100vh - 62px); padding-top: 18px; padding-bottom: calc(var(--dock) + 18px); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 18px; }
  .col { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
  .play { flex: none; }
  .list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .list .card-head { flex: none; }
  .list .prow { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line3) transparent; }
  .now { flex: none; }
  .stage { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .mapcard { display: flex; flex-direction: column; min-height: 0; }
  .map-head { flex: none; height: 40px; }
  .mapslot { flex: 1 1 auto; height: auto; min-height: 0; }
  .rules-card { display: flex; flex-direction: column; min-height: 0; }
  .rules-card .card-head { flex: none; }
  .rl { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line3) transparent; }
  .strip { flex: none; }
  .chat { flex: 1 1 auto; min-height: 220px; display: flex; flex-direction: column; }
  .chat > .card-head, .chat-form, .chat-hint { flex: none; }
  .chat-list { flex: 1 1 auto; height: auto; min-height: 0; }
  .pot { flex: none; }
  .pays li:nth-child(n + 4) { display: none; }
  .foot-line { display: none; }
}
@media (min-width: 1221px) and (min-height: 640px) and (max-height: 960px) {
  .play .lead { display: none; }
  .play { gap: 9px; padding: 18px 20px 16px; }
  .h1 { font-size: 40px; }
  .who { font-size: 48px; margin-top: 6px; }
  .who-sub { font-size: 15px; }
  .now { padding-bottom: 10px; }
  .prow li { height: 62px; } .prow canvas { width: 42px; height: 42px; } .prow li { grid-template-columns: 36px 42px minmax(0, 1fr) auto; } .prow .rk { width: 36px; height: 36px; font-size: 15px; }
  .strip .cell { padding: 11px 16px 10px; } .strip .big { font-size: 26px; }
  .pot-big { padding: 12px 16px 10px; } .pot-big b { font-size: 26px; }
  .kv { padding: 2px 0; } .kv div { padding: 4px 16px; font-size: 13px; }
  .rl li { padding: 9px 14px 10px; } .rl p { font-size: 13.5px; }
}

/* ------------------------------------------------------------------ narrower screens */
@media (max-width: 1500px) {
  .title { grid-template-columns: 360px minmax(0, 1fr) 340px; }
  .dock { grid-template-columns: 360px minmax(0, 1fr) 340px; }
  .stage { grid-template-columns: minmax(0, 1fr) 300px; }
  .who { font-size: 56px; }
  .strip .big { font-size: 28px; }
  .top { gap: 22px; }
  .ca-pill { max-width: 440px; }
}
@media (max-width: 1220px) {
  .title { grid-template-columns: 340px minmax(0, 1fr); }
  .col-r { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .dock { grid-template-columns: 300px minmax(0, 1fr); } .dock-r { display: none; }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .runs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb { display: none; }
  .top-links { display: none; }
}
@media (max-width: 820px) {
  :root { --pad: 14px; --dock: 72px; }
  .top { position: relative; height: auto; flex-wrap: wrap; gap: 10px 12px; padding: 12px 14px; }
  .brand { flex: 1; }
  .pill, .tick { display: none; }
  .top-side { display: contents; }
  .xbtn { order: 2; }
  .ca-pill { order: 3; flex: 1 1 100%; max-width: none; height: 42px; }
  .ca-addr { flex: 1; font-size: 12.5px; }
  .word { font-size: 24px; }
  .title { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 12px; }
  .col, .col-r { gap: 14px; grid-template-columns: minmax(0, 1fr); }
  .col-l, .col-c, .stage { display: contents; }        /* the phone order: who is watched, the live map, PLAY, the board, the rest */
  .now { order: 1; } .mapcard { order: 2; } .play { order: 3; } .list { order: 4; } .rules-card { order: 5; } .strip { order: 6; } .runs { order: 7; } .col-r { order: 8; } .foot-line { order: 9; }
  .now { padding-bottom: 8px; gap: 2px; } .now .eyebrow { font-size: 10px; }
  .stage { gap: 14px; }
  .play { padding: 16px 16px 14px; gap: 9px; }
  .play .lead, .play .lab, .play .acct { display: none; }
  .play .hint { min-height: 0; font-size: 12px; }
  .h1 { font-size: 26px; }
  .who { font-size: 30px; margin-top: 4px; }
  .who-sub { font-size: 14px; }
  .now-meta { display: none; }
  .mapslot { height: 330px; }
  .mapcard { grid-template-rows: 34px auto; }
  .devnote { top: 10px; font-size: 14.5px; }
  .chat-list { height: 260px; }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip .cell:nth-child(3) { border-left: 0; }
  .strip .cell:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .strip .big { font-size: 26px; }
  .runs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .runs b { font-size: 19px; }
  .dock { grid-template-columns: minmax(0, 1fr) auto; padding: 0 14px; gap: 12px; }
  @supports (height: 100dvh) { .dock { top: calc(100dvh - var(--dock)); bottom: auto; } }      /* a phone's bar: kept on the visible screen while the address bar comes and goes */
  .prow li { grid-template-columns: 40px 48px minmax(0, 1fr); } .prow .pc { display: none; }
  .dock-c { gap: 0; }
  .dock-c .dock-t, .dock-c .dock-bar { display: none; }
  .dock-mark { width: 40px; height: 40px; }
  .hud-top { grid-template-columns: 104px 172px 104px; width: 382px; height: 62px; top: 8px; }
  .stat { padding: 9px 10px 8px; } .stat b { font-size: 16px; } .stat-hero b { font-size: 22px; } .stat i { display: none; } .hud-top .lab { font-size: 9.5px; letter-spacing: .06em; } .hud-top .lg { display: none; }
  .feed { display: none; }
  .mini { width: 112px; height: 112px; padding: 5px; right: 8px; bottom: 96px; } .mini canvas { width: 100px; height: 100px; }
  .cash { bottom: 12px; }
  .hud-menu { top: 80px; left: 8px; }
  .grid4, .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles .cell b { font-size: 24px; white-space: normal; } .tiles .lab { white-space: normal; line-height: 1.5; }
  .grid4 .cell:nth-child(3), .tiles .cell:nth-child(3), .tiles .cell:nth-child(5) { border-left: 0; }
  .rules li, .how li { grid-template-columns: 1fr; gap: 6px; }
  .how li::before { display: none; }
  .table .tr { grid-template-columns: 64px minmax(0, 1fr) 100px; } .table .tr span:nth-child(3), .table .tr :nth-child(5) { display: none; }
  .table .tr4 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } .table .tr4 > :nth-child(4) { display: none; }
  .table .tr:first-child .lab { white-space: normal; line-height: 1.4; }
  .page { padding-top: 22px; }
  .foot-line, .foot { flex-direction: column; }
}
@media (pointer: coarse) { .touch-cash { display: inline-flex; right: 8px; bottom: 216px; } .hud-menu kbd { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }