/* Tumbler Crew — blueprint UI (SPEC §9, §10). Tokens are read by the SVG renderer at mount. */
:root {
  --paper: #0E3B6E; --paper-deep: #0A2D55; --line: #E8F4FF; --dim: #8FB3D9; --cyan: #5CE1FF; --pencil: #FFC857;
  --stamp: #FF4F5E; --amber: #FFB547; --calm: #6FE3B0; --trip: #FF6B3D; --decoy: #C79BFF; --gold: #FFD36B; --ink: #061A33;
  --grid-minor: rgba(143, 179, 217, .10); --grid-major: rgba(143, 179, 217, .22);
  --f-head: "Arial Narrow", "Roboto Condensed", "Liberation Sans Narrow", system-ui, sans-serif;
  --f-num: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cut: 10px; --col: 480px;
  --noise: none;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
body {
  background-color: var(--paper);
  background-image: var(--noise),
    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  color: var(--line); font: 16px/1.4 var(--f-body);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
button, input, select { font: inherit; color: inherit; }
h1, h2, h3, .hd { font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
h1 { font-size: 28px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
.num { font-family: var(--f-num); font-weight: 700; font-variant-numeric: tabular-nums; }
.dim { color: var(--dim); }
.small { font-size: 14px; }
a { color: var(--cyan); }
:focus-visible { outline: 2px dashed var(--cyan); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- screens */
#app { position: fixed; inset: 0; overflow: hidden; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; animation: slideIn .2s ease-out; }
.screen.back { animation-name: slideBack; }
@keyframes slideIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideBack { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.rm .screen { animation: fade .15s; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.col { width: 100%; max-width: var(--col); margin: 0 auto; padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); }
.scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.center { text-align: center; }
.spacer { flex: 1; }

/* ---------- topbar */
.topbar { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; padding-top: env(safe-area-inset-top); }
.topbar h2 { font-size: 16px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; padding: 0; }
.icon-btn svg { width: 24px; height: 24px; stroke: var(--line); fill: none; stroke-width: 2; }

/* ---------- drafting buttons (45° clipped corners, 2 px line) */
.btn {
  --bg: var(--paper-deep); --fg: var(--line); --ln: var(--line);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; min-width: 44px; padding: 10px 18px; border: 0; background: var(--ln); color: var(--fg); cursor: pointer;
  font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 16px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform .09s;
}
.btn::before { content: ''; position: absolute; inset: 2px; background: var(--bg);
  clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px)); }
.btn > * , .btn { z-index: 0; }
.btn span, .btn b, .btn i, .btn svg, .btn small { position: relative; }
.btn:active { transform: scale(.95); }
.btn.primary { --bg: var(--cyan); --fg: var(--ink); --ln: var(--cyan); }
.btn.danger { --bg: var(--stamp); --fg: var(--ink); --ln: var(--stamp); }
.btn.gold { --bg: var(--gold); --fg: var(--ink); --ln: var(--gold); }
.btn.ghost { --bg: var(--paper); }
.btn.block { display: flex; width: 100%; }
.btn.big { min-height: 56px; font-size: 18px; }
.btn.sm { min-height: 44px; padding: 6px 12px; font-size: 14px; }
.btn[disabled], .btn.off { opacity: .45; pointer-events: none; }
.btn.sel { --bg: var(--cyan); --fg: var(--ink); --ln: var(--cyan); }
.btn small { font-family: var(--f-body); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; opacity: .85; }

/* ---------- panels, cards, chips */
.panel { position: relative; background: var(--dim); padding: 2px;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.panel > .in { background: var(--paper-deep); padding: 14px;
  clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px)); }
.panel.hot { background: var(--cyan); }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1.25px solid var(--dim); border-radius: 3px; font-size: 14px; white-space: nowrap; }
.chip.cyan { border-color: var(--cyan); color: var(--cyan); }
.chip.pencil { border-color: var(--pencil); color: var(--pencil); }
.chip.stamp { border-color: var(--stamp); color: var(--stamp); }
.chip.calm { border-color: var(--calm); color: var(--calm); }
.chip.dash { border-style: dashed; }
.chip.lock { border-style: dashed; opacity: .7; }
.tag-row { display: flex; gap: 6px; flex-wrap: wrap; }
.glyph { display: inline-block; width: 1.1em; text-align: center; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; }
.kv dt { color: var(--dim); } .kv dd { margin: 0; font-family: var(--f-num); font-weight: 700; }
hr.dimline { border: 0; border-top: 1.25px dashed var(--dim); opacity: .6; margin: 12px 0; }

/* ---------- forms */
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { color: var(--dim); font-size: 14px; }
input[type=text], input[type=number] { min-height: 48px; padding: 8px 12px; background: var(--paper-deep); border: 2px solid var(--dim); border-radius: 0; outline: none; color: var(--line); -webkit-user-select: text; user-select: text; }
input[type=text]:focus { border-color: var(--cyan); }
input.bad { border-color: var(--stamp); }
.err { color: var(--stamp); font-size: 14px; min-height: 18px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg .btn { flex: 1; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; border-bottom: 1px dashed rgba(143,179,217,.3); }
.switch { width: 56px; height: 32px; border: 2px solid var(--dim); background: var(--paper-deep); position: relative; cursor: pointer; padding: 0; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; background: var(--dim); transition: left .15s; }
.switch[aria-checked=true] { border-color: var(--cyan); } .switch[aria-checked=true]::after { left: 27px; background: var(--cyan); }

/* ---------- title */
.title-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; flex: 1; }
.wordmark { width: min(92vw, 420px); height: auto; }
.rankchip { cursor: pointer; }

/* ---------- campaign map */
.map-sheet { position: relative; }
.map-sheet svg { width: 100%; height: auto; display: block; }
.vault-node { cursor: pointer; }
.tabs { display: flex; gap: 6px; }
.tabs .btn { flex: 1; }

/* ---------- seat entry / lobby */
.seat-row { display: flex; align-items: center; gap: 8px; }
.seat-sw { width: 36px; height: 36px; display: grid; place-items: center; font-size: 20px; flex: none; border: 2px solid currentColor; }
.qr-box { background: #fff; padding: 10px; width: 240px; height: 240px; margin: 0 auto; }
.qr-box svg { width: 100%; height: 100%; display: block; }
.code-big { font-family: var(--f-num); font-weight: 700; font-size: 56px; letter-spacing: .25em; text-align: center; color: var(--cyan); }

/* ---------- heist board (renderer SVG + DOM layers) */
.board-screen { background: transparent; }
#board { position: absolute; inset: 0; margin: 0 auto; max-width: var(--col); left: 0; right: 0; }
#board .pin:focus { outline: none; }
#board .pin:focus-visible .sel { display: inline !important; stroke: var(--pencil); }
#board > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
canvas.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }  /* effects never take input, in any host */
.layer { position: absolute; left: 0; right: 0; margin: 0 auto; max-width: var(--col); pointer-events: none; }
.layer > * { pointer-events: auto; }
.hud-top { top: 0; height: 48px; display: flex; align-items: center; padding: 0 4px; padding-top: env(safe-area-inset-top); pointer-events: none; }
.hud-top .icon-btn { pointer-events: auto; }
.ticker { padding: 0 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; overflow: hidden; }
.ticker p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.tray { padding: 0 12px; display: flex; flex-direction: column; gap: 8px; }
.tray .chips { display: flex; gap: 8px; overflow-x: auto; }
.tray .chips .btn { min-height: 48px; flex: none; padding: 6px 12px; font-size: 14px; }
.tray .hint { color: var(--dim); font-size: 16px; line-height: 1.25; min-height: 40px; }
.primary-bar { padding: 6px 16px; }
.reactions { display: flex; gap: 8px; justify-content: center; }
.lens-ui { padding: 0 12px; display: flex; flex-direction: column; gap: 8px; }
.picker { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.picker .vbtn { width: 48px; height: 48px; border: 2px solid var(--line); background: var(--paper-deep); font: 700 22px var(--f-num); color: var(--line); cursor: pointer; display: grid; place-items: center; padding: 0; }
.picker .vbtn.sel { background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.picker .vbtn .u69 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- sheets */
.scrim { position: fixed; inset: 0; background: rgba(6, 26, 51, .55); z-index: 40; animation: fade .15s; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: var(--col); max-height: 86vh; z-index: 41; display: flex; flex-direction: column;
  background: var(--paper-deep); border-top: 2px solid var(--line); padding: 12px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); animation: up .2s ease-out; }
.rm .sheet { animation: fade .15s; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sheet header h2 { flex: 1; font-size: 18px; }
.sheet .body { overflow-y: auto; flex: 1; }
.list-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 4px; border-bottom: 1px dashed rgba(143,179,217,.3); cursor: pointer; }
.list-row.off { opacity: .45; cursor: default; }
.list-row .grow small { display: block; color: var(--dim); font-size: 14px; }
.modal-card { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal-card .panel { width: 100%; max-width: 420px; }

/* ---------- handoff */
.handoff { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 24px; text-align: center; }
.handoff h1 { font-size: 34px; }
.hold { width: 168px; height: 168px; border-radius: 50%; border: 0; background: none; position: relative; cursor: pointer; touch-action: none; }
.hold svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hold span { position: relative; font-family: var(--f-head); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- toasts, banners */
#toasts { position: fixed; top: max(56px, env(safe-area-inset-top)); left: 0; right: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { background: var(--paper-deep); border: 2px solid var(--cyan); padding: 8px 14px; max-width: 92vw; animation: fade .2s; }
.banner { position: absolute; left: 0; right: 0; top: 30%; text-align: center; z-index: 25; pointer-events: none; }
.banner span { display: inline-block; padding: 8px 18px; background: var(--paper-deep); border: 3px solid currentColor; font: 700 22px var(--f-head); text-transform: uppercase; letter-spacing: .08em; }
.coach { position: absolute; z-index: 35; background: var(--pencil); color: var(--ink); padding: 8px 12px; font-weight: 600; max-width: 240px; pointer-events: none; }
.coach::after { content: ''; position: absolute; left: 20px; bottom: -10px; border: 10px solid transparent; border-top-color: var(--pencil); border-bottom: 0; }

/* ---------- result */
.stamp-big { font: 700 44px var(--f-head); text-transform: uppercase; letter-spacing: .08em; color: var(--stamp); border: 4px solid currentColor; border-radius: 6px; padding: 4px 18px; display: inline-block; transform: rotate(-8deg); }
.stamp-big.gold { color: var(--gold); }
.stars { font-size: 40px; color: var(--gold); letter-spacing: .1em; }
.xpbar { height: 14px; border: 2px solid var(--dim); position: relative; }
.xpbar i { position: absolute; inset: 0; right: auto; background: var(--cyan); }

/* ---------- audience page */
.aud-board { position: relative; height: 300px; }
.bar2 { display: flex; height: 22px; border: 2px solid var(--dim); }
.bar2 i { display: block; height: 100%; }

/* ---------- Stream View (1920×1080 box scaled to fit) */
.stream-root { position: fixed; inset: 0; background: #000; overflow: hidden; cursor: none; }
.stream-box { position: absolute; width: 1920px; height: 1080px; left: 50%; top: 50%; transform-origin: 0 0;
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; }
.stream-box .sv-top { position: absolute; left: 0; top: 0; width: 1920px; height: 110px; display: flex; align-items: center; gap: 28px; padding: 0 32px; }
.stream-box .sv-board { position: absolute; left: 0; top: 110px; width: 1440px; height: 880px; }
.stream-box .sv-right { position: absolute; left: 1440px; top: 110px; width: 480px; height: 880px; padding: 16px 28px; display: flex; flex-direction: column; gap: 18px; font-size: 26px; }
.stream-box .sv-tick { position: absolute; left: 0; top: 990px; width: 1440px; height: 90px; display: flex; align-items: center; padding: 0 32px; font-size: 40px; white-space: nowrap; overflow: hidden; }
.stream-box .sv-qr { position: absolute; left: 1440px; top: 990px; width: 480px; height: 90px; display: flex; align-items: center; gap: 16px; padding: 0 20px; font: 700 28px var(--f-head); letter-spacing: .06em; }
.stream-box .sv-qr .q { width: 220px; height: 220px; background: #fff; padding: 10px; position: absolute; right: 20px; bottom: 100px; }
.sv-turn { font: 700 40px var(--f-head); text-transform: uppercase; letter-spacing: .08em; margin-left: auto; }
.sv-sticker { position: absolute; font: 700 56px var(--f-head); border: 5px solid currentColor; border-radius: 8px; padding: 0 16px; transform: rotate(-8deg); pointer-events: none; animation: fade .2s; }
.sv-slate { position: absolute; inset: 0; display: grid; place-items: center; font: 700 64px var(--f-head); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- landscape phones: 2 columns handled by the renderer layout; wide screens keep the column */
@media (min-width: 700px) { body { background-size: auto, 40px 40px, 40px 40px, 8px 8px, 8px 8px; } }
@media (prefers-reduced-motion: reduce) { .screen, .sheet, .toast, .scrim { animation: fade .15s !important; } }

/* ---------- tip jar (DEV/tip-jar.md): small pencil-note links, never a big button */
.tipjar-home, .tipjar-link, .tipjar-x { border: 0; background: transparent; cursor: pointer; font-family: var(--f-body); }
.tipjar-home { align-self: center; min-height: 44px; padding: 6px 14px; color: var(--pencil); font-size: 14px; font-weight: 600;
  text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 4px; }
.tipjar-line { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 4px; }
.tipjar-link { min-height: 44px; padding: 4px 8px; color: var(--dim); font-size: 14px;
  text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 4px; }
.tipjar-x { min-width: 44px; min-height: 44px; color: var(--dim); font-size: 20px; line-height: 1; }
.tipjar-home:focus-visible, .tipjar-link:focus-visible, .tipjar-x:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }