/* Ticker Tumble UI. Pair Pond's pixel component system (research/DESIGN-SYSTEM.md), re-themed to the owner's
   banner (SPEC section 9): sky blue field, white paper panels, navy ink, red pixel wordmark, pink slime.
   Colours carry one meaning each: gold = the button and your money, green = paid, red = urgent, blue = proof,
   orange = heat. Every UI animation steps. */

/* ===== 1. Tokens ===== */
@property --t { syntax: '<length>'; inherits: true; initial-value: 0px; }
:root {
  --px: 2px;
  --ink: #08103a;
  --ink-soft: rgba(8, 16, 58, .42);

  /* field: the sky. Page, loader, panel heads. */
  --field: #2fb4ff; --field-hi: #8fdcff; --field-lo: #1590e6; --field-deep: #0b6fc0;
  /* slime: decoration */
  --slime: #ff5fc0; --slime-hi: #ffa3dc; --slime-lo: #e0329a; --slime-deep: #c41f84;

  --paper: #ffffff; --paper-2: #eef8ff; --paper-3: #cdeafc; --paper-hi: #ffffff; --paper-lo: #a8d3ef;

  --gold: #ffd21f;   --gold-hi: #fff07a;   --gold-lo: #e2a400;   --gold-ink: #9a6a00;
  --green: #2ee86b;  --green-hi: #9dffbe;  --green-lo: #13a846;  --green-ink: #0b7a32;
  --red: #f83a2c;    --red-hi: #ff8a7f;    --red-lo: #c4271b;
  --orange: #ff8a1f; --orange-hi: #ffc070; --orange-lo: #cf5a00;
  --blue: #2f7bff;   --blue-hi: #a9c8ff;   --blue-lo: #0b4fd6;
  --grey: #c8d0dc;   --grey-lo: #8e9aae;

  --text: var(--ink);
  --text-2: #3a4474;

  --font-px: 'Jersey 10', 'Figtree', system-ui, sans-serif;
  --font-ui: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --fs-mega: clamp(64px, 17vmin, 168px);
  --fs-h1: clamp(42px, 10vmin, 84px);
  --fs-h2: clamp(28px, 6.4vmin, 48px);
  --fs-btn: clamp(24px, 5.4vmin, 38px);
  --fs-hud: clamp(30px, 7vmin, 52px);
  --fs-chip: clamp(19px, 4.4vmin, 28px);
  --fs-tag: clamp(16px, 3.6vmin, 22px);
  --fs-body: clamp(14px, 3.6vmin, 18px);
  --fs-small: clamp(12px, 3vmin, 15px);

  --notch: polygon(var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px),
    100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%,
    var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)), 0 var(--px), var(--px) var(--px));
  --notch2: polygon(calc(var(--px) * 2) 0, calc(100% - var(--px) * 2) 0, calc(100% - var(--px) * 2) var(--px), calc(100% - var(--px)) var(--px), calc(100% - var(--px)) calc(var(--px) * 2), 100% calc(var(--px) * 2),
    100% calc(100% - var(--px) * 2), calc(100% - var(--px)) calc(100% - var(--px) * 2), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px) * 2) calc(100% - var(--px)), calc(100% - var(--px) * 2) 100%,
    calc(var(--px) * 2) 100%, calc(var(--px) * 2) calc(100% - var(--px)), var(--px) calc(100% - var(--px)), var(--px) calc(100% - var(--px) * 2), 0 calc(100% - var(--px) * 2),
    0 calc(var(--px) * 2), var(--px) calc(var(--px) * 2), var(--px) var(--px), calc(var(--px) * 2) var(--px));
  --round: polygon(66.667% 0%, 66.667% 5.556%, 77.778% 5.556%, 77.778% 11.111%, 83.333% 11.111%, 83.333% 16.667%, 88.889% 16.667%, 88.889% 22.222%, 94.444% 22.222%, 94.444% 27.778%, 100% 27.778%, 100% 72.222%, 94.444% 72.222%, 94.444% 77.778%, 88.889% 77.778%, 88.889% 83.333%, 83.333% 83.333%, 83.333% 88.889%, 77.778% 88.889%, 77.778% 94.444%, 66.667% 94.444%, 66.667% 100%, 33.333% 100%, 33.333% 94.444%, 22.222% 94.444%, 22.222% 88.889%, 16.667% 88.889%, 16.667% 83.333%, 11.111% 83.333%, 11.111% 77.778%, 5.556% 77.778%, 5.556% 72.222%, 0% 72.222%, 0% 27.778%, 5.556% 27.778%, 5.556% 22.222%, 11.111% 22.222%, 11.111% 16.667%, 16.667% 16.667%, 16.667% 11.111%, 22.222% 11.111%, 22.222% 5.556%, 33.333% 5.556%, 33.333% 0%);
  --round-in: polygon(66.667% 11.111%, 66.667% 16.667%, 77.778% 16.667%, 77.778% 22.222%, 83.333% 22.222%, 83.333% 33.333%, 88.889% 33.333%, 88.889% 66.667%, 83.333% 66.667%, 83.333% 77.778%, 77.778% 77.778%, 77.778% 83.333%, 66.667% 83.333%, 66.667% 88.889%, 33.333% 88.889%, 33.333% 83.333%, 22.222% 83.333%, 22.222% 77.778%, 16.667% 77.778%, 16.667% 66.667%, 11.111% 66.667%, 11.111% 33.333%, 16.667% 33.333%, 16.667% 22.222%, 22.222% 22.222%, 22.222% 16.667%, 33.333% 16.667%, 33.333% 11.111%);

  --drop: drop-shadow(calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--ink-soft));
  --outline-2: 2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink), 2px 2px var(--ink), -2px 2px var(--ink), 2px -2px var(--ink), -2px -2px var(--ink);

  --t-press: 70ms; --t-fast: .2s; --t-ui: .3s; --t-fade: .5s;

  --sa-t: max(10px, env(safe-area-inset-top));
  --sa-r: max(12px, env(safe-area-inset-right));
  --sa-b: max(10px, env(safe-area-inset-bottom));
  --sa-l: max(12px, env(safe-area-inset-left));
  --gap: clamp(6px, 1.6vmin, 12px);
}
@media (min-width: 1200px) and (min-height: 700px) { :root { --px: 3px; } }

/* ===== 2. Base ===== */
html, body { margin: 0; height: 100%; background: var(--field); color: var(--text); overflow: hidden;
  font: 600 var(--fs-body)/1.4 var(--font-ui); font-synthesis: none; -webkit-text-size-adjust: 100%;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; overscroll-behavior: none; }
#ui :where(input, textarea) { -webkit-user-select: text; user-select: text; }
:where(#ui) :where(img, a, svg) { -webkit-user-drag: none; }
:where(#ui) :where(button, a) { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; }
:where(#ui) svg { display: block; shape-rendering: crispEdges; }
.px { font-family: var(--font-px); font-weight: 400; letter-spacing: .02em; line-height: 1; }
.px-shadow { filter: var(--drop); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

#ui { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#ui .scr { position: absolute; inset: 0; pointer-events: none; }
#ui .scr[hidden] { display: none; }
#ui .scr :is(button, a, input, label, .hit) { pointer-events: auto; }
#ui .scr.is-in { animation: scr-in var(--t-ui) steps(3, end) both; }
#ui .scr.is-out { animation: scr-out var(--t-fast) steps(3, end) both; }
@keyframes scr-in { from { opacity: 0; } }
@keyframes scr-out { to { opacity: 0; } }

/* pixel art */
.pix-ico { width: 1em; height: 1em; }
.pix-bean, .pix-coin, .pix-crown { width: 100%; height: auto; }

/* ===== 3. Pixel button ===== */
.px-btn {
  --c: var(--px); --lip: calc(var(--px) * 3); --t: 0px;
  --face: var(--gold); --hi: var(--gold-hi); --lo: var(--gold-lo); --rim: var(--ink);
  position: relative; isolation: isolate; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: .35em;
  min-height: 56px; min-width: 56px; margin: 0; border: 0;
  padding: calc(var(--c) * 2 + var(--t)) .9em calc(var(--c) * 2 + var(--lip) - var(--t));
  background: var(--rim); color: var(--ink); text-decoration: none;
  font: 400 var(--fs-btn)/1 var(--font-px); letter-spacing: .02em; white-space: nowrap;
  clip-path: polygon(var(--c) var(--t), calc(100% - var(--c)) var(--t), calc(100% - var(--c)) calc(var(--t) + var(--c)), 100% calc(var(--t) + var(--c)),
    100% calc(100% - var(--c)), calc(100% - var(--c)) calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%,
    var(--c) calc(100% - var(--c)), 0 calc(100% - var(--c)), 0 calc(var(--t) + var(--c)), var(--c) calc(var(--t) + var(--c)));
  transition: --t var(--t-press) steps(2, end);
}
.px-btn::before {
  content: ''; position: absolute; z-index: -1;
  left: var(--c); right: var(--c); top: calc(var(--c) + var(--t)); bottom: calc(var(--c) + var(--lip) - var(--t));
  background: var(--face);
  box-shadow: inset 0 var(--c) 0 var(--hi), inset var(--c) 0 0 var(--hi),
              inset 0 calc(var(--c) * -1) 0 var(--lo), inset calc(var(--c) * -1) 0 0 var(--lo);
}
.px-btn:active, .px-btn.is-down { --t: calc(var(--px) * 2); }
@media (hover: hover) { .px-btn:hover::before { filter: brightness(1.06) saturate(1.05); } }
.px-btn:focus-visible { outline: none; --rim: var(--blue-lo); }
.px-btn:disabled { --face: var(--paper-3); --hi: var(--paper-2); --lo: var(--paper-lo); --t: calc(var(--px) * 2); color: var(--text-2); cursor: default; }
.px-btn.is-white { --face: var(--paper); --hi: var(--paper-hi); --lo: var(--paper-lo); }
.px-btn.is-red { --face: var(--red); --hi: var(--red-hi); --lo: var(--red-lo); color: #fff; }
.px-btn.is-green { --face: var(--green); --hi: var(--green-hi); --lo: var(--green-lo); }
.px-btn.is-blue { --face: var(--blue); --hi: var(--blue-hi); --lo: var(--blue-lo); color: #fff; }
.px-btn.is-xl { min-height: 108px; min-width: 220px; font-size: calc(var(--fs-h2) * 1.15); --lip: calc(var(--px) * 4); padding-inline: 1.1em; }
.px-btn.is-sm { min-height: 44px; font-size: var(--fs-chip); padding-inline: .6em; --lip: calc(var(--px) * 2); }
.px-btn.is-sm:active, .px-btn.is-sm.is-down { --t: var(--px); }
.px-btn.is-icon { width: 48px; min-width: 48px; min-height: 48px; padding-inline: 0; --lip: calc(var(--px) * 2); }
.px-btn.is-icon:active, .px-btn.is-icon.is-down { --t: var(--px); }
.px-btn .pix-ico { width: .8em; height: .8em; flex: none; }
.px-btn.is-icon .pix-ico { width: 22px; height: 22px; }
.px-btn .pix-bean { width: .9em; }

/* ===== 4. Panels, tags, chips, fields ===== */
.px-panel { box-sizing: border-box; position: relative; background: var(--paper); color: var(--text);
  border: var(--px) solid var(--ink); clip-path: var(--notch);
  box-shadow: inset calc(var(--px) * -2) calc(var(--px) * -2) 0 var(--paper-3);
  padding: calc(var(--px) * 6) calc(var(--px) * 7) calc(var(--px) * 7); }
.px-panel-head { display: flex; align-items: center; gap: 10px; margin: calc(var(--px) * -6) calc(var(--px) * -7) calc(var(--px) * 6);
  padding: calc(var(--px) * 4) calc(var(--px) * 4) calc(var(--px) * 4) calc(var(--px) * 7); background: var(--field-lo); color: #fff;
  border-bottom: var(--px) solid var(--ink); font: 400 var(--fs-h2)/1 var(--font-px); text-shadow: 0 var(--px) 0 var(--ink);
  box-shadow: inset 0 var(--px) 0 var(--field-hi); }
.px-panel-head .px-btn { margin-left: auto; text-shadow: none; }
.px-panel-head .px-btn.is-icon { width: 44px; min-width: 44px; min-height: 44px; }
.px-panel.is-green-head .px-panel-head { background: var(--green-lo); box-shadow: inset 0 var(--px) 0 var(--green); }
.px-panel.is-gold-head .px-panel-head { background: var(--gold); color: var(--ink); text-shadow: 0 var(--px) 0 var(--gold-hi); box-shadow: inset 0 calc(var(--px) * -1) 0 var(--gold-lo); }
.px-panel.is-red-head .px-panel-head { background: var(--red); box-shadow: inset 0 var(--px) 0 var(--red-hi); }
.px-tag { display: inline-block; padding: .14em .5em .22em; background: var(--ink); color: #fff;
  font: 400 var(--fs-tag)/1 var(--font-px); letter-spacing: .03em; clip-path: var(--notch); white-space: nowrap; }
.px-tag.is-gold { background: var(--gold); color: var(--ink); box-shadow: inset 0 calc(var(--px) * -1) 0 var(--gold-lo); }
.px-tag.is-blue { background: var(--field-lo); }
.px-chip { --face: var(--gold); --hi: var(--gold-hi); --lo: var(--gold-lo);
  display: inline-flex; align-items: center; gap: .3em; box-sizing: border-box; position: relative;
  padding: .08em .45em .16em; background: var(--face); color: var(--ink);
  border: var(--px) solid var(--ink); clip-path: var(--notch);
  box-shadow: inset 0 var(--px) 0 var(--hi), inset 0 calc(var(--px) * -1) 0 var(--lo);
  font: 400 var(--fs-chip)/1 var(--font-px); white-space: nowrap; font-variant-numeric: tabular-nums; }
.px-chip .pix-ico { width: .72em; height: .72em; }
.px-chip.is-white { --face: var(--paper); --hi: var(--paper-hi); --lo: var(--paper-3); }
.px-chip.is-green { --face: var(--green); --hi: var(--green-hi); --lo: var(--green-lo); }
.px-chip.is-orange { --face: var(--orange); --hi: var(--orange-hi); --lo: var(--orange-lo); }
.px-chip.is-red { --face: var(--red); --hi: var(--red-hi); --lo: var(--red-lo); color: #fff; }
.px-chip.is-blue { --face: var(--blue); --hi: var(--blue-hi); --lo: var(--blue-lo); color: #fff; }
.px-chip.is-sky { --face: var(--field-hi); --hi: #d8f3ff; --lo: var(--field); }
.px-chip.is-sm { font-size: var(--fs-tag); }
.px-field { box-sizing: border-box; min-width: 0; height: 48px; padding: 0 12px; margin: 0;
  background: var(--paper); color: var(--ink); border: var(--px) solid var(--ink); border-radius: 0; clip-path: var(--notch);
  box-shadow: inset 0 var(--px) 0 var(--paper-3); font: 400 var(--fs-chip)/1 var(--font-px); letter-spacing: .02em; outline: none; }
.px-field::placeholder { color: var(--text-2); opacity: .7; }
.px-field:focus { box-shadow: inset 0 0 0 var(--px) var(--blue); }
a.px-proof { color: var(--blue-lo); font: 800 var(--fs-small)/1.2 var(--font-ui); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; gap: .35em; align-items: center; }
a.px-proof .pix-ico { width: .9em; height: .9em; }
.px-bar { position: relative; height: calc(var(--px) * 5); background: var(--paper-3); border: var(--px) solid var(--ink); }
.px-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v, 0%); background: var(--gold); box-shadow: inset 0 var(--px) 0 var(--gold-hi); transition: width .3s steps(6, end); }
.px-bar.is-green i { background: var(--green); box-shadow: inset 0 var(--px) 0 var(--green-hi); }
.px-coinlogo { width: 1.6em; height: 1.6em; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--paper-2); border: var(--px) solid var(--ink); clip-path: var(--round); font: 400 .8em/1 var(--font-px); color: var(--ink); }
.px-coinlogo img { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.wordmark { width: 100%; height: auto; }
.up { color: var(--green-ink); } .down { color: var(--red-lo); }
.ink-out { color: #fff; text-shadow: var(--outline-2), 0 4px 0 var(--ink); }

/* ===== 5. Toasts ===== */
.px-toasts { position: fixed; z-index: 90; left: 50%; top: calc(var(--sa-t) + var(--fs-hud) * 1.6 + 16px); transform: translateX(-50%);
  display: grid; justify-items: center; gap: 8px; pointer-events: none; width: max-content; max-width: calc(100vw - 24px); }
.px-toast { display: flex; align-items: center; gap: 10px; max-width: min(calc(100vw - 32px), 440px); padding: 8px 14px 10px; box-sizing: border-box;
  background: var(--paper); color: var(--ink); border: var(--px) solid var(--ink); clip-path: var(--notch);
  box-shadow: inset 0 calc(var(--px) * -2) 0 var(--paper-3); font: 700 var(--fs-body)/1.25 var(--font-ui);
  animation: toast-in var(--t-fast) steps(4, end) both, toast-out var(--t-fast) steps(3, end) var(--hold, 2.6s) forwards; }
.px-toast b { font: 400 1.3em/1 var(--font-px); white-space: nowrap; }
.px-toast.is-paid { background: var(--green); box-shadow: inset 0 calc(var(--px) * -2) 0 var(--green-lo); }
.px-toast.is-gold { background: var(--gold); box-shadow: inset 0 calc(var(--px) * -2) 0 var(--gold-lo); }
.px-toast.is-urgent { background: var(--red); color: #fff; box-shadow: inset 0 calc(var(--px) * -2) 0 var(--red-lo); }
@keyframes toast-in { from { transform: translateY(-140%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-out { to { transform: translateY(-140%); opacity: 0; } }

/* ===== 6. Stamps: QUALIFIED! ELIMINATED! CROWNED! OUT OF TIME ===== */
.px-banner { --band: var(--gold); --band-lo: var(--gold-lo); --o: calc(var(--px) * 2);
  position: fixed; z-index: 85; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  display: grid; justify-items: center; gap: 4px; padding: calc(var(--px) * 6) 16px calc(var(--px) * 8);
  background: linear-gradient(var(--band) 0 82%, var(--band-lo) 82%); border-block: calc(var(--px) * 3) solid var(--ink); pointer-events: none;
  animation: band-in .15s steps(3, end) both, band-out .2s steps(3, end) var(--hold, 1.6s) forwards; }
.px-banner.is-out { --band: var(--red); --band-lo: var(--red-lo); }
.px-banner.is-fail { --band: var(--orange); --band-lo: var(--orange-lo); }
.px-banner.is-crown { --band: var(--gold); }
.px-banner .st-word { font: 400 var(--fs-mega)/.86 var(--font-px); color: #fff; letter-spacing: .03em; text-align: center;
  text-shadow: var(--o) 0 var(--ink), calc(var(--o) * -1) 0 var(--ink), 0 var(--o) var(--ink), 0 calc(var(--o) * -1) var(--ink),
    var(--o) var(--o) var(--ink), calc(var(--o) * -1) var(--o) var(--ink), var(--o) calc(var(--o) * -1) var(--ink),
    calc(var(--o) * -1) calc(var(--o) * -1) var(--ink), 0 calc(var(--o) * 2.5) var(--ink), var(--o) calc(var(--o) * 2.5) var(--ink);
  animation: slam .24s steps(4, end) .1s both, shake .3s steps(6, end) .34s; }
.px-banner.is-long .st-word { font-size: calc(var(--fs-mega) * .78); }
.px-banner .st-crown { width: clamp(72px, 16vmin, 132px); filter: drop-shadow(0 calc(var(--px) * 2) 0 var(--ink)); animation: slam .24s steps(4, end) both, bob 1.6s steps(1, end) .4s infinite; }
.px-banner .st-sub { font: 800 var(--fs-body)/1.2 var(--font-ui); color: var(--ink); }
@keyframes band-in { from { transform: translateY(-50%) scaleY(0); } to { transform: translateY(-50%) scaleY(1); } }
@keyframes band-out { to { transform: translateY(-50%) scaleY(0); } }
@keyframes slam { from { transform: scale(2.2); opacity: 0; } 50% { opacity: 1; } to { transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translate(calc(var(--px) * -2), var(--px)); }
  40% { transform: translate(calc(var(--px) * 2), calc(var(--px) * -1)); } 60% { transform: translate(calc(var(--px) * -1), 0); }
  80% { transform: translate(var(--px), var(--px)); } }
@keyframes bob { 0%, 50% { transform: translateY(0); } 25% { transform: translateY(calc(var(--px) * -1)); } 75% { transform: translateY(var(--px)); } }

/* ===== 7. Round reveal: slot machine of round cards ===== */
.rv { position: fixed; inset: 0; display: grid; place-items: center; align-content: center; gap: clamp(8px, 2vmin, 16px); padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); }
.rv-tag { font-size: var(--fs-chip); }
.rv-win { --cw: clamp(122px, 30vmin, 176px); --ch: calc(var(--cw) * 1.3); --gapc: calc(var(--px) * 5);
  position: relative; width: min(calc(100vw - 24px), calc(var(--cw) * 4.2)); height: calc(var(--ch) + var(--px) * 16);
  background: var(--ink); clip-path: var(--notch2); overflow: hidden; }
.rv-win::before { content: ''; position: absolute; inset: calc(var(--px) * 2); background:
  repeating-linear-gradient(90deg, var(--field-deep) 0 calc(var(--px) * 4), var(--field-lo) calc(var(--px) * 4) calc(var(--px) * 8)); }
.rv-strip { position: absolute; left: 50%; top: calc(var(--px) * 8); display: flex; gap: var(--gapc); transform: translateX(var(--x, 0px)); will-change: transform; }
.rv-ptr { position: absolute; left: 50%; width: calc(var(--px) * 10); height: calc(var(--px) * 6); margin-left: calc(var(--px) * -5); background: var(--gold); z-index: 2;
  clip-path: polygon(0 0, 100% 0, 100% 34%, 80% 34%, 80% 67%, 60% 67%, 60% 100%, 40% 100%, 40% 67%, 20% 67%, 20% 34%, 0 34%); filter: drop-shadow(0 var(--px) 0 var(--ink)); }
.rv-ptr.top { top: 0; } .rv-ptr.bot { bottom: 0; transform: scaleY(-1); }
.rv-card { --tc: var(--orange); --tl: var(--orange-lo);
  flex: none; width: var(--cw); height: var(--ch); box-sizing: border-box; position: relative;
  background: var(--paper); border: var(--px) solid var(--ink); clip-path: var(--notch);
  display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; text-align: center;
  box-shadow: inset calc(var(--px) * -2) calc(var(--px) * -2) 0 var(--paper-3); }
.rv-card .rc-type { width: 100%; padding: calc(var(--px) * 2) 0 calc(var(--px) * 3); background: var(--tc); box-shadow: inset 0 calc(var(--px) * -2) 0 var(--tl);
  border-bottom: var(--px) solid var(--ink); font: 400 calc(var(--cw) * .12)/1 var(--font-px); letter-spacing: .06em; color: var(--ink); }
.rv-card .rc-icon { align-self: center; width: calc(var(--cw) * .36); height: calc(var(--cw) * .36); display: grid; place-items: center;
  background: var(--tc); clip-path: var(--round); color: var(--ink); box-shadow: inset 0 calc(var(--px) * -3) 0 var(--tl); }
.rv-card .rc-icon .pix-ico { width: 52%; height: 52%; }
.rv-card .rc-name { padding: 0 calc(var(--px) * 3); font: 400 calc(var(--cw) * .165)/.92 var(--font-px); color: var(--ink); }
.rv-card .rc-obj { padding: calc(var(--px) * 2) calc(var(--px) * 3) calc(var(--px) * 5); font: 800 calc(var(--cw) * .085)/1.15 var(--font-ui); color: var(--text-2); min-height: 2.3em; display: grid; place-items: center; }
.rv-card.t-race { --tc: var(--orange); --tl: var(--orange-lo); }
.rv-card.t-survival { --tc: #b07cff; --tl: #7a3cff; }
.rv-card.t-logic { --tc: #1fd6c8; --tl: #0a9e94; }
.rv-card.t-hunt { --tc: var(--slime); --tl: var(--slime-lo); }
.rv-card.t-final { --tc: var(--gold); --tl: var(--gold-lo); background: #fff8d6; }
.rv.is-locked .rv-card:not(.is-chosen) { filter: brightness(.55) saturate(.6); transition: filter .2s steps(2, end); }
.rv.is-locked .rv-card.is-chosen { animation: lock .2s steps(2, end); }
@keyframes lock { from { transform: scale(1.12); } to { transform: none; } }
.rv-obj { font: 400 var(--fs-h2)/1 var(--font-px); text-align: center; visibility: hidden; }
.rv.is-locked .rv-obj { visibility: visible; animation: slam .2s steps(3, end) both; }
.rv-keys { display: none; gap: 14px; flex-wrap: wrap; justify-content: center; font: 800 var(--fs-small)/1 var(--font-ui); color: #fff; text-shadow: 0 2px 0 var(--ink); }
.rv-keys span { display: inline-flex; align-items: center; gap: 6px; }
.rv-keys kbd { display: inline-block; padding: 3px 7px 5px; background: var(--paper); color: var(--ink); border: var(--px) solid var(--ink); clip-path: var(--notch);
  box-shadow: inset 0 calc(var(--px) * -2) 0 var(--paper-3); font: 400 var(--fs-tag)/1 var(--font-px); text-shadow: none; }
@media (pointer: fine) { .rv.is-locked .rv-keys { display: flex; } }

/* countdown 3 2 1 GO */
.px-count { position: fixed; z-index: 86; inset: 0; display: grid; place-items: center; pointer-events: none; }
.px-count span { --o: calc(var(--px) * 3); font: 400 calc(var(--fs-mega) * 1.3)/1 var(--font-px); color: #fff;
  text-shadow: var(--o) 0 var(--ink), calc(var(--o) * -1) 0 var(--ink), 0 var(--o) var(--ink), 0 calc(var(--o) * -1) var(--ink),
    var(--o) var(--o) var(--ink), calc(var(--o) * -1) var(--o) var(--ink), var(--o) calc(var(--o) * -1) var(--ink),
    calc(var(--o) * -1) calc(var(--o) * -1) var(--ink), 0 calc(var(--o) * 2) var(--ink);
  animation: slam .2s steps(3, end) both; }
.px-count span.is-go { color: var(--gold); }

/* ===== 8. Nameplate (DOM label projected over a bean, positioned by the core) ===== */
.px-plate { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: none;
  font: 400 clamp(13px, 3.2vmin, 17px)/1 var(--font-px); color: #fff; white-space: nowrap; text-shadow: 1px 0 var(--ink), -1px 0 var(--ink), 0 1px var(--ink), 0 -1px var(--ink), 1px 1px var(--ink), -1px 1px var(--ink), 1px -1px var(--ink), -1px -1px var(--ink); opacity: .92; }
.px-plate.is-you { color: var(--gold); font-size: clamp(18px, 4.6vmin, 26px); text-shadow: var(--outline-2); opacity: 1; }
.px-plate.is-you::after { content: ''; display: block; width: 10px; height: 6px; margin: 4px auto 0; background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% 33%, 80% 33%, 80% 66%, 60% 66%, 60% 100%, 40% 100%, 40% 66%, 20% 66%, 20% 33%, 0 33%);
  filter: drop-shadow(0 2px 0 var(--ink)); }
.px-plate.is-bot { color: #eef3ff; opacity: .78; }
.px-plate.is-bot::after { content: 'bot'; display: inline-block; margin-left: 3px; color: #dfe6f5; font-size: .7em; vertical-align: middle; opacity: .8; }
.px-plate.is-far { opacity: .55; }

/* ===== 9. HUD ===== */
.hud-tl { position: absolute; left: var(--sa-l); top: var(--sa-t); display: grid; gap: 6px; justify-items: start; max-width: calc(50% - var(--fs-hud) * 1.5 - 24px); }
.hud-tl .px-tag { white-space: normal; line-height: .95; }
.hud-tr { position: absolute; right: var(--sa-r); top: var(--sa-t); display: flex; gap: 6px; }
.hud-timer { position: absolute; left: 50%; top: var(--sa-t); transform: translateX(-50%);
  font-size: var(--fs-hud); padding: .04em .4em .1em; min-width: 2.2em; justify-content: center; }
.hud-timer.is-hot { --face: var(--orange); --hi: var(--orange-hi); --lo: var(--orange-lo); }
.hud-timer.is-last { --face: var(--red); --hi: var(--red-hi); --lo: var(--red-lo); color: #fff; animation: tick 1s steps(1, end) infinite; }
@keyframes tick { 0% { transform: translateX(-50%) scale(1.12); } 20% { transform: translateX(-50%) scale(1); } }
.hud-count { font-size: var(--fs-chip); }
.hud-count.is-bump { animation: bump .2s steps(2, end); }
.hud-count.is-you { --face: var(--gold); --hi: var(--gold-hi); --lo: var(--gold-lo); }
@keyframes bump { from { transform: scale(1.2); } to { transform: none; } }
.hud-obj { position: absolute; left: 0; right: 0; text-align: center; top: calc(var(--sa-t) + var(--fs-hud) * 1.3 + 14px);
  font: 400 var(--fs-chip)/1 var(--font-px); color: #fff; text-shadow: var(--outline-2), 0 4px 0 var(--ink); white-space: nowrap;
  animation: slam .2s steps(3, end) both, scr-out .3s steps(3, end) 5s forwards; }
/* the way to the goal (game.js → ui.goal): under the timer and the objective line, clear of the pad */
.hud-goal { position: fixed; left: 50%; top: calc(var(--sa-t) + var(--fs-hud) * 1.3 + var(--fs-chip) + 30px); transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 8px; padding: 3px 12px 5px 8px; background: var(--paper); color: var(--ink); border: var(--px) solid var(--ink);
  clip-path: var(--notch); box-shadow: inset 0 calc(var(--px) * -2) 0 var(--paper-3); font: 400 var(--fs-chip)/1 var(--font-px); letter-spacing: .02em;
  white-space: nowrap; pointer-events: none; animation: scr-in .2s steps(2, end) both; }
.hud-goal[hidden], html:not(.ui-play) .hud-goal, html.ui-spectate .hud-goal { display: none; }
.hg-arr { display: block; width: 22px; height: 22px; background: var(--gold); filter: drop-shadow(0 2px 0 var(--ink));
  clip-path: polygon(50% 0, 100% 50%, 70% 50%, 70% 100%, 30% 100%, 30% 50%, 0 50%); transition: transform .15s steps(2, end); }
/* a word rising from a bean */
.px-pop { position: fixed; z-index: 42; transform: translate(-50%, -100%); pointer-events: none; white-space: nowrap;
  font: 400 calc(var(--fs-chip) * 1.25)/1 var(--font-px); color: var(--gold); text-shadow: var(--outline-2), 0 3px 0 var(--ink);
  animation: px-pop 1.2s steps(12, end) forwards; }
.px-pop.is-good { color: #3ff0b0; } .px-pop.is-bad { color: #ff5f6d; } .px-pop.is-white { color: #fff; }
@keyframes px-pop { 0% { transform: translate(-50%, -60%) scale(.6); opacity: 0; } 12% { transform: translate(-50%, -100%) scale(1.15); opacity: 1; }
  25% { transform: translate(-50%, -110%) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -260%) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .px-pop { animation: none; } }
.hud-emote { position: absolute; right: var(--sa-r); top: calc(var(--sa-t) + 58px); display: grid; grid-template-columns: repeat(2, auto); gap: 6px;
  padding: 8px; background: var(--paper); border: var(--px) solid var(--ink); clip-path: var(--notch); box-shadow: inset 0 calc(var(--px) * -2) 0 var(--paper-3); pointer-events: auto;
  animation: scr-in .2s steps(2, end) both; }
.hud-emote[hidden] { display: none; }
.hud-emote .px-btn { min-width: 64px; }

/* ===== 10. Touch controls (elements created by client/js/input/touch.js; skin lives here) ===== */
.pad { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
.pad-zone { position: absolute; left: 0; bottom: 0; width: 50%; height: 70%; pointer-events: auto; touch-action: none; }
.pad-stick { --size: clamp(112px, 30vmin, 148px); position: absolute; width: var(--size); height: var(--size); pointer-events: none;
  left: calc(var(--sa-l) + 8px); bottom: calc(var(--sa-b) + 8px); transform: translate(var(--x, 0px), var(--y, 0px));
  background: var(--ink); clip-path: var(--round); opacity: .45; transition: opacity .15s steps(2, end); }
.pad-stick::before { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .85); clip-path: var(--round-in); }
.pad-stick.is-live { opacity: .85; }
.pad-knob { --k: calc(var(--size, 128px) * .44); position: absolute; left: 50%; top: 50%; width: var(--k); height: var(--k);
  margin: calc(var(--k) / -2) 0 0 calc(var(--k) / -2); transform: translate(var(--kx, 0px), var(--ky, 0px));
  background: var(--ink); clip-path: var(--round); }
.pad-knob::before { content: ''; position: absolute; inset: 0; clip-path: var(--round-in); transform: translateY(-5.556%);
  background: linear-gradient(var(--gold-hi) 0 22%, var(--gold) 22% 74%, var(--gold-lo) 74%); }
.pad-acts { position: absolute; right: calc(var(--sa-r) + 4px); bottom: calc(var(--sa-b) + 4px); display: grid;
  grid-template: "grab dive" auto ". jump" auto / auto auto; gap: 4px 8px; align-items: end; justify-items: end; pointer-events: none; }
.pad-btn { --size: clamp(72px, 19vmin, 88px); --face: var(--paper); --hi: var(--paper-hi); --lo: var(--paper-lo); --s: -5.556%;
  position: relative; isolation: isolate; width: var(--size); height: var(--size); border: 0; padding: 0; margin: 0;
  background: var(--ink); clip-path: var(--round); color: var(--ink); touch-action: none; pointer-events: auto;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  font: 400 calc(var(--size) * .27)/1 var(--font-px); letter-spacing: .03em; }
.pad-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; clip-path: var(--round-in); transform: translateY(var(--s));
  background: linear-gradient(var(--hi) 0 22%, var(--face) 22% 76%, var(--lo) 76%); }
.pad-btn span { position: relative; display: block; transform: translateY(var(--s)); }
.pad-btn.is-down, .pad-btn:active { --s: 0%; }
.pad-btn.is-jump { --size: clamp(108px, 30vmin, 132px); --face: var(--gold); --hi: var(--gold-hi); --lo: var(--gold-lo); grid-area: jump; }
.pad-btn.is-dive { grid-area: dive; margin-bottom: -8px; }
.pad-btn.is-grab { grid-area: grab; margin-bottom: -40px; margin-right: 4px; }
.pad-btn.is-off, .no-grab .pad-btn.is-grab { visibility: hidden; }
@media (orientation: portrait) {
  .pad-acts { bottom: calc(var(--sa-b) + 14px); }
  .pad-stick { bottom: calc(var(--sa-b) + 22px); }
}
@media (pointer: fine) { .pad { display: none; } }
html:not(.ctl-ready):not(.ctl-live) .pad, html.ui-spectate .pad { display: none; }

/* ===== 11. Title ===== */
.ti { position: absolute; inset: 0; display: grid; padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); gap: var(--gap); box-sizing: border-box;
  grid-template: "top" auto "logo" auto "paid" auto "coin" auto "." 1fr "you" auto "act" auto / minmax(0, 1fr); }
.ti-paidrow { grid-area: paid; }
.ti-top { grid-area: top; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ti-top .sp { flex: 1; }
.ti-logo { grid-area: logo; justify-self: center; width: min(64vw, 260px, 30vh); margin: 0; filter: drop-shadow(0 calc(var(--px) * 2) 0 var(--ink-soft)); }
#ui .ti-logo .wordmark.one { display: none; }
.ti-coin { grid-area: coin; display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; }
.ti-you { grid-area: you; display: grid; gap: var(--gap); }
.ti-act { grid-area: act; display: grid; grid-template-columns: auto 1fr; gap: var(--gap); align-items: end; }
.ti-act .px-btn.is-xl { min-width: 0; width: 100%; font-size: clamp(44px, 11vmin, 72px); }
.ti-act .px-btn.is-wear { min-height: 108px; font-size: var(--fs-btn); flex-direction: column; gap: 4px; padding-inline: .5em; }
.ti-act .px-btn.is-wear .pix-ico { width: 1.1em; height: 1.1em; }
.ti-name { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.ti-name .px-field { width: 100%; }
.rv-tos { justify-self: center; max-width: min(340px, calc(100vw - 32px)); }
@media (max-height: 430px) {
  .rv-tos .ti-tos { padding: 3px 8px 4px; gap: 6px; }
  .rv-tos .px-coinlogo { font-size: 16px; }
  .rv-tos .tos-mid { display: flex; gap: 8px; align-items: center; }
  .rv-tos .tos-tick { font-size: calc(var(--fs-h2) * .62); }
}
.ti-tos { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.ti-tos .px-coinlogo { font-size: clamp(22px, 5vmin, 30px); }
.ti-tos .tos-mid { display: grid; gap: 2px; min-width: 0; }
.ti-tos .tos-lbl { font: 800 var(--fs-small)/1 var(--font-ui); color: var(--text-2); white-space: nowrap; }
.ti-tos .tos-tick { font: 400 var(--fs-h2)/.9 var(--font-px); }
.ti-tos .tos-chg { margin-left: auto; font: 400 var(--fs-chip)/1 var(--font-px); }
.ti-paid { font-size: var(--fs-tag); }
.ti-ca { font-size: var(--fs-tag); }
.ti-wallet .holder { display: inline-block; margin-left: 2px; padding: 1px 5px 2px; background: var(--gold); color: var(--ink); clip-path: var(--notch); font-size: .8em; box-shadow: inset 0 -2px 0 var(--gold-lo); }
@media (orientation: landscape) {
  .ti { grid-template: "logo top" auto "paid ." auto "coin ." auto ". ." 1fr "act you" auto / minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; }
  .ti-paidrow { justify-content: flex-start; }
  .ti-logo { justify-self: start; width: min(42vw, 440px, 90vh); align-self: start; }
  #ui .ti-logo .wordmark.two { display: none; } #ui .ti-logo .wordmark.one { display: block; }
  .ti-top { justify-content: flex-end; align-self: start; }
  .ti-top .sp { display: none; }
  .ti-coin { justify-content: flex-start; align-self: start; }
  .ti-top { flex-wrap: nowrap; }
  .ti-act { align-self: end; width: min(100%, 440px); }
  .ti-you { align-self: end; justify-self: end; width: min(100%, 380px); }
}

/* ===== 12. Sheets and modals (wallet, wardrobe, lobby, results, crown, paid, rewards) ===== */
.sheet { position: fixed; z-index: 70; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 24px));
  max-height: calc(100% - var(--sa-t) - var(--sa-b)); display: flex; flex-direction: column; filter: var(--drop); pointer-events: auto;
  animation: sheet-in .3s steps(3, end) both; }
.sheet > .px-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.sheet .body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; display: grid; gap: calc(var(--gap) + 2px); -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.sheet.is-side { left: auto; right: var(--sa-r); transform: translateY(-50%); animation-name: side-in; }
@keyframes sheet-in { from { transform: translate(-50%, -44%); opacity: 0; } }
@keyframes side-in { from { transform: translate(24px, -50%); opacity: 0; } }
@media (orientation: portrait) {
  .sheet.is-bottom { top: auto; bottom: var(--sa-b); transform: translateX(-50%); animation-name: up-in; }
  @keyframes up-in { from { transform: translate(-50%, 24px); opacity: 0; } }
  .sheet.is-side { right: auto; left: 50%; top: auto; bottom: var(--sa-b); transform: translateX(-50%); animation-name: up-in; }
}
.scrim { position: fixed; inset: 0; background: rgba(8, 16, 58, .32); pointer-events: auto; animation: scr-in .2s steps(2, end) both; }
.line { margin: 0; font: 600 var(--fs-body)/1.35 var(--font-ui); }
.line b { font-weight: 800; }
.muted { color: var(--text-2); }
.row { display: flex; gap: var(--gap); align-items: center; flex-wrap: wrap; }
.row.center { justify-content: center; }
.row > .grow { flex: 1; min-width: 0; }
.stack { display: grid; gap: 8px; }

/* wallet */
.wl-list { display: grid; gap: 8px; }
.wl-list .px-btn { width: 100%; justify-content: flex-start; font-size: var(--fs-btn); }
.wl-list .px-btn .go { margin-left: auto; }
.wl-paste { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.wl-paste .px-field { font: 700 var(--fs-small)/1 var(--font-ui); letter-spacing: 0; width: 100%; }
.wl-or { display: flex; align-items: center; gap: 10px; font: 400 var(--fs-tag)/1 var(--font-px); color: var(--text-2); }
.wl-or::before, .wl-or::after { content: ''; flex: 1; height: var(--px); background: var(--paper-3); }
.wl-me { display: flex; align-items: center; gap: 10px; }
.wl-icon { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: var(--gold); border: var(--px) solid var(--ink); clip-path: var(--notch); box-shadow: inset 0 calc(var(--px) * -2) 0 var(--gold-lo); color: var(--ink); }
.wl-icon .pix-ico { width: 26px; height: 26px; }

/* lobby */
.lb-count { display: flex; align-items: baseline; justify-content: center; gap: .2em; font: 400 var(--fs-h1)/.9 var(--font-px); font-variant-numeric: tabular-nums; }
.lb-count small { font-size: .55em; color: var(--text-2); }
.lb-beans { display: grid; grid-template-columns: repeat(16, 1fr); gap: 2px; }
.lb-beans i { aspect-ratio: 18 / 25; display: block; }
.lb-beans i svg { width: 100%; height: auto; }
.lb-beans i.off { opacity: .22; filter: grayscale(1); }
.lb-beans i.new { animation: slam .2s steps(2, end) both; }
.lb-prize { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; padding: 10px 12px 12px; background: #fff8d6; border: var(--px) solid var(--ink); clip-path: var(--notch); box-shadow: inset 0 calc(var(--px) * -2) 0 var(--gold-hi); }
.lb-prize .pz-crown { width: clamp(44px, 10vmin, 60px); grid-row: span 2; }
.lb-prize .pz-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 400 var(--fs-h2)/1 var(--font-px); }
.lb-prize .pz-main .px-coinlogo { font-size: .7em; }
.lb-prize .pz-sub { font: 800 var(--fs-small)/1.25 var(--font-ui); color: var(--text-2); }
.lb-rows { display: grid; gap: 6px; }
.lb-rows > div { display: flex; align-items: center; gap: 8px; font: 700 var(--fs-body)/1.2 var(--font-ui); }
.lb-rows > div .px-chip { margin-left: auto; font-size: var(--fs-tag); }

/* results between rounds */
.rs-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rs-head .big { font: 400 var(--fs-h2)/1 var(--font-px); }
.rs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(18px, 4.4vmin, 26px), 1fr)); gap: 3px; }
.rs-grid i { display: block; position: relative; }
.rs-grid i svg { width: 100%; height: auto; }
.rs-grid i.out { filter: grayscale(1) brightness(1.15); opacity: .45; }
.rs-grid i.you::after { content: ''; position: absolute; left: 50%; top: -9px; width: 10px; height: 6px; margin-left: -5px; background: var(--gold);
  clip-path: polygon(0 0, 100% 0, 100% 33%, 80% 33%, 80% 66%, 60% 66%, 60% 100%, 40% 100%, 40% 66%, 20% 66%, 20% 33%, 0 33%); filter: drop-shadow(0 2px 0 var(--ink)); }
.rs-legend { display: flex; gap: 8px; flex-wrap: wrap; }

/* crown and paid cards */
.cr { text-align: center; }
.cr .body { justify-items: center; }
.cr-crown { width: clamp(64px, 14vmin, 104px); animation: bob 1.6s steps(1, end) infinite; filter: drop-shadow(0 calc(var(--px) * 2) 0 var(--ink-soft)); }
.cr-who { font: 400 var(--fs-h2)/1 var(--font-px); }
.cr-tick { display: flex; align-items: center; gap: .18em; font: 400 var(--fs-h1)/.85 var(--font-px); color: var(--ink); }
.cr-tick .px-coinlogo { font-size: .5em; }
.cr-amt { font-size: var(--fs-h2); }
.cr .row { justify-content: center; width: 100%; }
.cr .row .px-btn { flex: 1 1 0; min-width: 0; }
.cr .row .px-btn.is-white, .rw .row .px-btn.is-white { font-size: var(--fs-chip); white-space: normal; text-align: center; line-height: .95; }
.cr .row .px-btn.is-xl { flex: 1.3 1 0; }
.cr-bean { width: clamp(44px, 10vmin, 64px); }
@media (orientation: landscape) and (max-height: 500px) {
  .cr-crown { width: 52px; } .cr .body { gap: 6px; }
  .cr .px-btn.is-xl { min-height: 96px; }
}
.pd-amt { font-size: var(--fs-h1); padding: .05em .4em .12em; }

/* rewards */
.rw-big { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rw-big > div { display: grid; justify-items: center; gap: 2px; padding: 8px 6px 10px; background: var(--paper-2); border: var(--px) solid var(--ink); clip-path: var(--notch); }
.rw-big .n { font: 400 var(--fs-h1)/.9 var(--font-px); font-variant-numeric: tabular-nums; }
.rw-big .l { font: 800 var(--fs-small)/1 var(--font-ui); color: var(--text-2); display: flex; align-items: center; gap: 4px; }
.rw-big .l .pix-ico { width: 14px; height: 14px; }
.rw-big .t { font: 700 var(--fs-small)/1 var(--font-ui); color: var(--text-2); }
.rw-big .ico { width: 34px; }
.rw-jobs { display: grid; gap: 8px; }
.rw-job { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; font: 700 var(--fs-body)/1.15 var(--font-ui); }
.rw-job .px-bar { grid-column: 1 / -1; }
.rw-job .px-chip { font-size: var(--fs-tag); }
.rw-job.done .px-chip { --face: var(--green); --hi: var(--green-hi); --lo: var(--green-lo); }

/* wardrobe */
.wd { width: min(540px, calc(100vw - 24px)); height: min(640px, calc(100% - var(--sa-t) - var(--sa-b))); }
.wd > .px-panel { height: 100%; }
@media (orientation: landscape) { .wd { width: min(540px, 58vw); } }
@media (orientation: portrait) { .wd { height: min(60%, 560px); } }
.wd-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: none; margin-bottom: 8px; }
.wd-tabs::-webkit-scrollbar { display: none; }
.wd-tabs .px-btn { flex: none; }
.wd-tabs .px-btn[aria-selected="true"] { --face: var(--field-hi); --hi: #d8f3ff; --lo: var(--field); }
.wd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(74px, 19vmin, 96px), 1fr)); gap: 6px; align-content: start; }
.wd-item { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: clamp(74px, 19vmin, 96px); box-sizing: border-box; padding: 6px 4px 8px; margin: 0;
  border: var(--px) solid var(--ink); background: var(--paper-2); clip-path: var(--notch); box-shadow: inset 0 calc(var(--px) * -2) 0 var(--paper-3); color: var(--ink); }
.wd-item .sw { width: 58%; aspect-ratio: 1; display: grid; place-items: center; }
.wd-item .sw svg { width: 100%; height: auto; }
.wd-item .sw.pat { border: var(--px) solid var(--ink); clip-path: var(--round); width: 52%; }
.wd-item .nm { font: 400 var(--fs-small)/1 var(--font-px); font-size: clamp(14px, 3.2vmin, 17px); white-space: nowrap; }
.wd-item .pr { position: absolute; right: 3px; top: 3px; display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 2px; background: var(--paper); border: var(--px) solid var(--ink); font: 400 14px/1 var(--font-px); }
.wd-item .pr .pix-ico { width: 10px; height: 10px; }
.wd-item.is-gold { background: #fff3b0; box-shadow: inset 0 0 0 var(--px) var(--gold), inset 0 calc(var(--px) * -3) 0 var(--gold-lo); }
.wd-item.is-gold .pr { background: var(--gold); }
.wd-item.is-sel { background: var(--field-hi); box-shadow: inset 0 0 0 calc(var(--px) * 2) var(--ink); }
.wd-item.is-worn::after { content: ''; position: absolute; left: 4px; top: 4px; width: 14px; height: 12px; background: var(--green); border: var(--px) solid var(--ink);
  clip-path: polygon(0 50%, 35% 85%, 100% 10%, 100% 35%, 35% 100%, 0 70%); }
.wd-foot { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; flex: none; margin-top: 8px; padding-top: 8px; border-top: var(--px) solid var(--paper-3); }
.wd-foot .line { font-size: var(--fs-small); }
.pat-plain { background: var(--slime); }
.pat-stripes { background: repeating-linear-gradient(90deg, var(--slime) 0 6px, #fff 6px 12px); }
.pat-dots { background: radial-gradient(circle at 50% 50%, #fff 0 2.5px, transparent 3px) 0 0/10px 10px, var(--field); }
.pat-checks { background: conic-gradient(#fff 25%, var(--orange) 0 50%, #fff 0 75%, var(--orange) 0) 0 0/12px 12px; }
.pat-hearts { background: radial-gradient(circle at 50% 50%, #ff3b5c 0 3px, transparent 3.5px) 0 0/12px 12px, #ffd6ef; }
.pat-split { background: linear-gradient(90deg, var(--slime) 50%, var(--field) 50%); }
.pat-stars { background: radial-gradient(circle, var(--gold) 0 2px, transparent 2.5px) 0 0/8px 8px, #b07cff; }
.pat-hex { background: conic-gradient(from 30deg, var(--gold) 0 60deg, var(--gold-lo) 0 120deg, var(--gold-hi) 0 180deg) 0 0/10px 10px, var(--gold); }
.pat-chart { background: linear-gradient(transparent 0 55%, var(--green) 55% 75%, transparent 75%) 0 0/8px 16px, linear-gradient(90deg, var(--gold) 0 50%, var(--gold-hi) 50%) 0 0/8px 8px; }

/* ===== 13. Spectate, connection, veil ===== */
.sp-bar { position: fixed; left: 50%; bottom: var(--sa-b); transform: translateX(-50%); display: flex; gap: 8px; align-items: flex-end; pointer-events: none; max-width: calc(100vw - 24px); }
.sp-who { display: flex; align-items: center; gap: 6px; padding: 4px; }
.sp-who .nm { min-width: 0; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; font: 400 var(--fs-chip)/1 var(--font-px); white-space: nowrap; }
.sp-who .lbl { display: block; font: 800 var(--fs-small)/1 var(--font-ui); color: var(--text-2); }
.sp-who .px-btn.is-icon { width: 52px; min-width: 52px; min-height: 52px; }
@media (orientation: portrait) {
  .sp-bar { flex-direction: column; align-items: stretch; width: min(420px, calc(100vw - 24px)); }
  .sp-bar .px-btn.is-xl { width: 100%; }
  .sp-who .nm { flex: 1; text-align: center; max-width: none; }
}
#conn { position: fixed; left: 0; right: 0; margin-inline: auto; width: max-content; top: calc(var(--sa-t) + 58px); z-index: 1001; display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px; background: var(--paper); color: var(--ink); border: var(--px) solid var(--ink); clip-path: var(--notch);
  box-shadow: inset 0 calc(var(--px) * -2) 0 var(--paper-3); font: 700 var(--fs-body)/1.3 var(--font-ui); white-space: nowrap; pointer-events: auto; max-width: calc(100vw - 24px); box-sizing: border-box;
  animation: toast-in var(--t-fast) steps(4, end) both; }
#conn[hidden] { display: none; }
#conn .msg { display: grid; gap: 6px; }
#conn i { display: block; width: 140px; max-width: 40vw; height: 6px; background: var(--paper-3); overflow: hidden; position: relative; }
#conn i::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--field); animation: conn-run 1.2s steps(10, end) infinite; }
#conn.is-dead i { display: none; }
@keyframes conn-run { from { left: -40%; } to { left: 100%; } }
#veil { position: fixed; inset: 0; z-index: 999; background: var(--field-lo); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s steps(4, end), visibility 0s linear .3s; }
#veil.on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s steps(4, end); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

@media (orientation: landscape) and (max-width: 700px) { .ti-wallet .addr { display: none; } }

/* ===== 14. Short landscape phones: sheets go wide and split in two columns ===== */
@media (orientation: landscape) and (max-height: 520px) {
  .sheet:not(.is-side) { width: min(700px, calc(100vw - 24px)); }
  .px-panel-head { padding-block: calc(var(--px) * 3); font-size: calc(var(--fs-h2) * .85); }
  .lb .body { grid-template-columns: 1fr 1fr; align-items: start; }
  .wl-list { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .wl-list .px-btn { font-size: var(--fs-chip); min-height: 48px; }
  .wl-list .px-btn .go { display: none; }
  .rw .body { grid-template: "big jobs" auto "btn jobs" 1fr / 1fr 1fr; align-items: start; }
  .rw-big { grid-area: big; } .rw-jobs { grid-area: jobs; } .rw .body > .row { grid-area: btn; }
  .sheet.is-side:not(.wd) { width: min(600px, calc(100vw - var(--sa-l) - var(--sa-r))); }
  .cr .body { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; column-gap: 16px; }
  .cr .body > * { grid-column: 1; }
  .cr .body > .row { grid-column: 2; grid-row: 1 / span 6; flex-direction: column; align-self: center; }
  .cr .body > .row .px-btn { width: 100%; flex: none; }
  .cr .body > .row .px-btn:not(.is-xl) { min-height: 52px; }
}

/* ===== 15. Quality pass (3 Oct): stamps with beans and confetti, slot machine lights, explainer, How to play,
   crown ceremony, results flip, compact landscape spectate. Every animation steps. ===== */

/* screen shake on a slam (the whole UI layer, 2 cells) */
#ui.is-shake { animation: ui-shake .36s steps(6, end); }
@keyframes ui-shake { 0%, 100% { translate: 0 0; } 20% { translate: -4px 2px; } 40% { translate: 4px -2px; } 60% { translate: -2px 0; } 80% { translate: 2px 2px; } }

/* stamps */
.px-banner.is-green { --band: var(--green); --band-lo: var(--green-lo); }
.px-banner .st-row { display: flex; align-items: center; justify-content: center; gap: clamp(6px, 2vmin, 18px); max-width: 100%; }
.px-banner .st-bean { flex: none; width: clamp(40px, 11vmin, 92px); filter: drop-shadow(var(--px) calc(var(--px) * 2) 0 var(--ink)); animation: bean-pop .3s steps(3, end) both, bob .8s steps(1, end) .3s infinite; }
.px-banner .st-bean.is-sad { animation: bean-pop .3s steps(3, end) both, bean-sink 1.2s steps(4, end) .4s forwards; }
@keyframes bean-pop { from { transform: translateY(60%) scale(.4); opacity: 0; } 60% { transform: translateY(-12%) scale(1.15); opacity: 1; } }
@keyframes bean-sink { to { transform: translateY(14%) rotate(-14deg); } }
@media (max-width: 420px) and (orientation: portrait) { .px-banner .st-row { flex-direction: column; gap: 2px; } }
.px-confetti { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.px-confetti i { position: absolute; width: calc(var(--px) * 4); height: calc(var(--px) * 3); background: var(--c); box-shadow: 0 var(--px) 0 var(--ink-soft);
  animation: conf-fly 1.1s steps(9, end) var(--d, 0s) both; }
@keyframes conf-fly { 0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  45% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--r) * .5)); opacity: 1; }
  100% { transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 30vmin)) rotate(var(--r)); opacity: 0; } }

/* slot machine: marquee bulbs, stepped blur, slam */
.rv-machine { --bulb: calc(var(--px) * 4); position: relative; display: grid; gap: calc(var(--px) * 2); padding: calc(var(--px) * 3); background: var(--red);
  clip-path: var(--notch2); box-shadow: inset 0 calc(var(--px) * 2) 0 var(--red-hi), inset 0 calc(var(--px) * -3) 0 var(--red-lo); }
.rv.is-final .rv-machine { background: var(--gold); box-shadow: inset 0 calc(var(--px) * 2) 0 var(--gold-hi), inset 0 calc(var(--px) * -3) 0 var(--gold-lo); }
.rv-lights { display: flex; justify-content: space-between; padding: 0 calc(var(--px) * 3); }
.rv-lights i { width: var(--bulb); height: var(--bulb); background: #fff4c0; box-shadow: 0 0 0 var(--px) var(--ink); }
.rv-lights i:nth-child(odd) { animation: bulb .5s steps(1, end) infinite; }
.rv-lights i:nth-child(even) { animation: bulb .5s steps(1, end) -.25s infinite; }
.rv-machine.is-spin .rv-lights i { animation-duration: .2s; }
.rv.is-locked .rv-lights i { animation: bulb-all .16s steps(1, end) 5; }
@keyframes bulb { 0% { background: var(--gold); } 50% { background: #fff4c0; } }
@keyframes bulb-all { 0% { background: #fff; } 50% { background: var(--gold); } }
.rv-strip.b1 .rv-card { filter: blur(1px); } .rv-strip.b2 .rv-card { filter: blur(2px); } .rv-strip.b3 .rv-card { filter: blur(3px) saturate(1.2); }
.rv.is-locked .rv-machine { animation: shake .3s steps(6, end); }
.rv.is-locked .rv-card.is-chosen { animation: lock-slam .3s steps(3, end); z-index: 2; }
@keyframes lock-slam { from { transform: scale(1.3); } 60% { transform: scale(.94); } to { transform: none; } }
.rv-machine .rv-win { width: min(calc(100vw - 24px - var(--px) * 6), calc(var(--cw) * 4.2)); }

/* round explainer card */
.rv.is-ex { pointer-events: auto; }
.ex { --tc: var(--orange); --tl: var(--orange-lo); --th: var(--orange-hi);
  box-sizing: border-box; width: min(460px, calc(100vw - 24px)); max-height: calc(100% - var(--sa-t) - var(--sa-b)); display: flex; flex-direction: column;
  background: var(--paper); border: var(--px) solid var(--ink); clip-path: var(--notch2); cursor: pointer;
  box-shadow: inset calc(var(--px) * -2) calc(var(--px) * -2) 0 var(--paper-3); animation: ex-in .36s steps(4, end) both; }
.ex.is-gone { animation: ex-out .24s steps(3, end) both; }
@keyframes ex-in { from { transform: scale(.5) rotate(-4deg); opacity: 0; } 60% { transform: scale(1.06) rotate(1deg); opacity: 1; } to { transform: none; } }
@keyframes ex-out { to { transform: scale(.7); opacity: 0; } }
.ex.t-survival { --tc: #b07cff; --tl: #7a3cff; --th: #dcc4ff; } .ex.t-logic { --tc: #1fd6c8; --tl: #0a9e94; --th: #a8fff6; }
.ex.t-hunt { --tc: var(--slime); --tl: var(--slime-lo); --th: var(--slime-hi); } .ex.t-final { --tc: var(--gold); --tl: var(--gold-lo); --th: var(--gold-hi); }
.ex-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(var(--px) * 3) calc(var(--px) * 5) calc(var(--px) * 4);
  background: var(--tc); border-bottom: var(--px) solid var(--ink); box-shadow: inset 0 var(--px) 0 var(--th), inset 0 calc(var(--px) * -2) 0 var(--tl); flex: none; }
.ex-badge { display: inline-flex; align-items: center; gap: .3em; font: 400 var(--fs-chip)/1 var(--font-px); letter-spacing: .06em; color: var(--ink); }
.ex-badge .pix-ico { width: .8em; height: .8em; }
.ex-n { padding: .12em .45em .2em; background: var(--ink); color: #fff; clip-path: var(--notch); font: 400 var(--fs-tag)/1 var(--font-px); letter-spacing: .04em; }
.ex-main { display: grid; min-height: 0; overflow: hidden; }
.ex-art { position: relative; width: 100%; overflow: hidden; border-bottom: var(--px) solid var(--ink); background: var(--field-hi); justify-self: center; }
.ex-art .sc, .ht-art .sc { display: block; width: 100%; height: auto; max-height: 32vh; }
.ht-art .sc { max-height: 36vh; }
.ex-txt { display: grid; gap: calc(var(--gap) * .8); padding: calc(var(--px) * 5) calc(var(--px) * 6) calc(var(--px) * 4); text-align: center; justify-items: center; min-height: 0; }
.ex-name { font: 400 var(--fs-h2)/.9 var(--font-px); color: var(--ink); }
.ex-obj { font: 400 calc(var(--fs-h2) * .82)/.95 var(--font-px); color: #fff; text-shadow: var(--outline-2), 0 3px 0 var(--ink); padding: 0 4px; }
.ex.t-final .ex-obj { color: var(--gold); }
.ex-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font: 700 var(--fs-body)/1.25 var(--font-ui); color: var(--text-2); }
.ex-foot { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: center; }
.ex-q { font-size: var(--fs-tag); white-space: normal; text-align: left; }
.ex-ctrls { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; font: 400 var(--fs-tag)/1 var(--font-px); color: var(--ink); }
.ex-ctl { display: inline-flex; align-items: center; gap: 4px; }
.ex-ctl kbd { display: inline-block; padding: 2px 6px 4px; background: var(--paper); color: var(--ink); border: var(--px) solid var(--ink); clip-path: var(--notch);
  box-shadow: inset 0 calc(var(--px) * -2) 0 var(--paper-3); font: 400 var(--fs-tag)/1 var(--font-px); }
.ex-ctl i { display: block; width: 1.3em; height: 1.3em; background: var(--ink); clip-path: var(--round); position: relative; }
.ex-ctl i::before { content: ''; position: absolute; inset: 0; clip-path: var(--round-in); background: #fff; }
.ex-ctl i.c-jump::before { background: var(--gold); }
.ex-ctl i.c-move b { position: absolute; left: 30%; top: 30%; width: 40%; height: 40%; background: var(--gold); clip-path: var(--round); animation: stick-wiggle 1.2s steps(4, end) infinite; }
@keyframes stick-wiggle { 25% { transform: translate(30%, -20%); } 50% { transform: translate(-30%, 10%); } 75% { transform: translate(10%, 30%); } }
.ex-go { display: flex; align-items: center; gap: 8px; padding: 0 calc(var(--px) * 6) calc(var(--px) * 5); flex: none; }
.ex-drain { flex: 1; height: calc(var(--px) * 3); background: var(--paper-3); }
.ex-drain i { display: block; height: 100%; width: 100%; background: var(--tc); }
.ex-go.run .ex-drain i { animation: b-drain 5s steps(20, end) forwards; }
@keyframes b-drain { to { width: 0; } }
.ex-tap { font: 800 var(--fs-small)/1 var(--font-ui); color: var(--text-2); white-space: nowrap; }
@media (orientation: landscape) {
  .ex { width: min(820px, calc(100vw - var(--sa-l) - var(--sa-r))); }
  .ex-main { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .ex-art { width: min(46vw, calc((100vh - 150px) * 16 / 9), 440px); border-bottom: 0; border-right: var(--px) solid var(--ink); align-self: stretch; display: grid; align-items: center; background: #8fdcff; }
  .ex-art .sc { max-height: none; }
  .ex-txt { align-content: center; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .ex-txt { gap: 4px; padding: 8px 10px; }
  .ex-name { font-size: calc(var(--fs-h2) * .8); }
  .ex-obj { font-size: calc(var(--fs-h2) * .7); }
  .ex-lines { font-size: var(--fs-small); }
  .ex-ctrls { font-size: 15px; } .ex-ctl kbd { font-size: 15px; }
  .ex-head { padding-block: 4px 6px; }
  .ex-go { padding-top: 6px; }
}
@media (orientation: landscape) and (max-height: 340px) { .ex-lines li + li { display: none; } .ex-ctrls { display: none; } }
@media (orientation: portrait) and (max-height: 600px) { .ex-art .sc { max-height: 26vh; } .ex-lines { font-size: var(--fs-small); } }

/* How to play */
.ht { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); pointer-events: none; }
#ui .scr[data-scr="howto"] { z-index: 95; }
.ht-scrim { z-index: 94; background: rgba(8, 16, 58, .4); }
.ht-shadow { width: min(440px, 100%); max-height: 100%; display: flex; pointer-events: auto; animation: sheet-in2 .3s steps(3, end) both; }
@keyframes sheet-in2 { from { transform: translateY(6%); opacity: 0; } }
.ht-panel { display: flex; flex-direction: column; width: 100%; max-height: 100%; min-height: 0; }
.ht-card { display: grid; gap: 10px; min-height: 0; touch-action: pan-y; }
.ht-card.in-r { animation: card-r .24s steps(3, end) both; } .ht-card.in-l { animation: card-l .24s steps(3, end) both; }
@keyframes card-r { from { transform: translateX(24%); opacity: 0; } } @keyframes card-l { from { transform: translateX(-24%); opacity: 0; } }
.ht-art { position: relative; width: 100%; justify-self: center; overflow: hidden; border: var(--px) solid var(--ink); clip-path: var(--notch); background: var(--field-hi); }
.ht-num { position: absolute; right: 4px; top: 4px; padding: 1px 6px 3px; background: var(--ink); color: #fff; font: 400 var(--fs-tag)/1 var(--font-px); clip-path: var(--notch); }
.ht-txt { display: grid; gap: 4px; text-align: center; align-content: center; min-height: 6.2em; }
.ht-h { margin: 0; font: 400 var(--fs-h2)/.95 var(--font-px); color: var(--ink); }
.ht-l { margin: 0; font: 700 var(--fs-body)/1.3 var(--font-ui); color: var(--text-2); }
.ht-nav { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 12px; flex: none; }
.ht-nav .px-btn:not(.is-icon) { min-width: 132px; }
.ht-nav .ht-go { min-height: 72px; min-width: 150px; font-size: var(--fs-h2); }
.ht-dots { display: flex; gap: 6px; justify-content: center; }
.ht-dots button { width: 14px; height: 14px; min-width: 0; padding: 0; border: var(--px) solid var(--ink); background: var(--paper-3); clip-path: var(--notch); }
.ht-dots button.on { background: var(--gold); width: 26px; }
@media (orientation: landscape) {
  .ht-shadow { width: min(760px, 100%); }
  .ht-card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 16px; }
  .ht-art .sc { max-height: none; }
  .ht-txt { text-align: left; justify-items: start; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .ht-panel .px-panel-head { margin-bottom: 8px; }
  .ht-nav { margin-top: 8px; } .ht-nav .ht-go, .ht-nav .px-btn:not(.is-icon) { min-height: 52px; font-size: var(--fs-btn); }
  .ht-h { font-size: calc(var(--fs-h2) * .85); }
  .ht-l { font-size: var(--fs-small); }
}
@media (max-width: 360px) { .ht-nav .px-btn:not(.is-icon) { min-width: 110px; } .ht-dots { gap: 3px; } .ht-dots button { width: 10px; } .ht-dots button.on { width: 18px; } }

/* lobby theme (prizes off) */
.lb-theme { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; background: var(--paper-2); border: var(--px) solid var(--ink); clip-path: var(--notch); box-shadow: inset 0 calc(var(--px) * -2) 0 var(--paper-3); }
.lb-theme .px-coinlogo { font-size: clamp(20px, 4.6vmin, 28px); }
.lb-theme .tm-mid { display: grid; gap: 2px; min-width: 0; }
.lb-theme .tm-lbl { font: 800 var(--fs-small)/1 var(--font-ui); color: var(--text-2); }
.lb-theme .tm-t { font: 400 var(--fs-chip)/1 var(--font-px); }
.lb-rules > div .pix-ico { width: 18px; height: 18px; flex: none; }
.lb-how { justify-self: start; }

/* title How to play */
.ti-how { font-size: var(--fs-tag); }
.ti-how .pix-ico { width: .9em; height: .9em; }

/* crown ceremony */
.cc { position: fixed; inset: 0; z-index: 72; display: grid; place-items: center; align-content: center; gap: 0; padding: var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); box-sizing: border-box; pointer-events: none; }
.cc-stage { position: relative; width: clamp(150px, 34vmin, 260px); aspect-ratio: 1; display: grid; place-items: end center; margin-bottom: -6%; }
.cc-rays { position: absolute; inset: -18%; border-radius: 50%; animation: rays 6s steps(24, end) infinite;
  background: repeating-conic-gradient(rgba(255, 210, 31, .85) 0 10deg, rgba(255, 255, 255, .55) 10deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0 40%, transparent 70%); mask: radial-gradient(circle, #000 0 40%, transparent 70%); }
@keyframes rays { to { transform: rotate(360deg); } }
.cc-pod { position: absolute; bottom: 0; width: 76%; filter: drop-shadow(calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--ink-soft)); }
.cc-hero { position: absolute; bottom: 30%; width: 44%; display: grid; justify-items: center; animation: cc-in .5s steps(5, end) both; }
.cc-bean { width: 100%; filter: drop-shadow(calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--ink-soft)); animation: bob 1.6s steps(1, end) .5s infinite; }
.cc-crown { width: 74%; margin-bottom: -16%; position: relative; z-index: 1; animation: crown-lift 1.6s steps(4, end) infinite; filter: drop-shadow(0 var(--px) 0 var(--ink)); }
@keyframes cc-in { from { transform: translateY(80%) scale(.3); opacity: 0; } 60% { transform: translateY(-10%) scale(1.12); opacity: 1; } }
@keyframes crown-lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12%) rotate(-4deg); } }
.cc-card { pointer-events: auto; width: min(420px, calc(100vw - 24px)); animation: up-in2 .3s steps(3, end) .2s both; }
@keyframes up-in2 { from { transform: translateY(24px); opacity: 0; } }
.cc .cr .body { justify-items: center; text-align: center; }
.cr-sub { font: 400 var(--fs-chip)/1 var(--font-px); color: var(--text-2); }
.cc-conf { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.cc-conf i { position: absolute; top: -12px; width: calc(var(--px) * 4); height: calc(var(--px) * 3); background: var(--c); animation: conf-fall var(--s, 2s) steps(16, end) var(--d, 0s) infinite; }
@keyframes conf-fall { to { transform: translate(6vmin, 110vh) rotate(540deg); } }
@media (orientation: landscape) {
  .cc { grid-template-columns: auto auto; column-gap: clamp(16px, 4vw, 48px); }
  .cc-stage { margin-bottom: 0; }
}
/* the 3D crown ceremony is on screen behind the card: no drawn stage, the card keeps clear of the winner
   (bottom in portrait, right in landscape) */
.cc.is-scene .cc-stage { display: none; }
.cc.is-scene { align-content: end; padding-bottom: calc(var(--sa-b, 0px) + 18px); }
@media (orientation: landscape) {
  .cc.is-scene { grid-template-columns: auto; align-content: center; justify-content: end; padding-bottom: 0; padding-right: calc(var(--sa-r, 0px) + clamp(16px, 4vw, 48px)); }
  .cc.is-scene .cc-card { width: min(380px, 44vw); }
}
@media (orientation: landscape) and (max-height: 520px) { .cc-stage { width: clamp(130px, 52vh, 220px); } .cc-card { width: min(360px, 50vw); } .cc .cr .row { flex-direction: column; } .cc .cr .row .px-btn { width: 100%; } .cc .px-btn.is-xl { min-height: 72px; } }
@media (orientation: portrait) and (max-height: 600px) { .cc-stage { width: 120px; } }

/* results: beans pop in, the out ones flip grey a beat later */
.rs-grid i { animation: slam .2s steps(2, end) calc(var(--i, 0) * 18ms) both; }
.rs-grid i.out { filter: none; opacity: 1; animation: slam .2s steps(2, end) calc(var(--i, 0) * 18ms) both, rs-out .3s steps(2, end) calc(.7s + var(--i, 0) * 12ms) forwards; }
@keyframes rs-out { to { filter: grayscale(1) brightness(1.15); opacity: .45; transform: translateY(2px); } }

/* HUD objective reminder: slams in under the timer, slides up and away after 4 s */
.hud-obj { animation: slam .2s steps(3, end) both, obj-out .4s steps(4, end) 4s forwards; white-space: normal; padding: 0 16px; line-height: 1; }
@keyframes obj-out { to { transform: translateY(-120%); opacity: 0; visibility: hidden; } }

/* spectate: compact in landscape so the arena stays visible */
@media (orientation: landscape) and (max-height: 520px) {
  .sp-bar { left: auto; right: var(--sa-r); transform: none; align-items: center; gap: 6px; }
  .sp-who { padding: 2px !important; }
  .sp-who .px-btn.is-icon { width: 42px; min-width: 42px; min-height: 42px; }
  .sp-who .nm { max-width: 26vw; font-size: var(--fs-tag); }
  .sp-bar .px-btn.is-xl { min-height: 52px; min-width: 0; font-size: var(--fs-btn); padding-inline: .6em; --lip: calc(var(--px) * 3); }
}
@media (orientation: landscape) and (min-height: 521px) { .sp-bar .px-btn.is-xl { min-height: 80px; } }
@media (orientation: landscape) and (max-height: 520px) {
  .cc .cr .body { grid-template-columns: 1fr; }
  .cc .cr .body > * , .cc .cr .body > .row { grid-column: auto; grid-row: auto; }
}
.ti-you > * { min-width: 0; max-width: 100%; }
.ti-tos .tos-tick { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (orientation: landscape) {
  .ti { grid-template: "logo top" auto "paid coin" auto ". ." 1fr "act you" auto / minmax(0, 1fr) minmax(0, 1fr); }
  .ti-coin { justify-content: flex-end; }
}
@media (orientation: landscape) and (max-height: 360px) { .ti-tos .tos-chg { display: none; } .ti-tos { padding: 4px 8px 6px; } }
@media (min-width: 1200px) and (min-height: 700px) {
  .ex { width: min(1040px, calc(100vw - 48px)); }
  .ex-art { width: min(46vw, calc((100vh - 220px) * 16 / 9), 600px); }
  .ht-shadow { width: min(960px, 100%); }
  .ex-lines, .ht-l { font-size: 20px; }
}
#ui .scr[data-scr="reveal"] { z-index: 80; }


/* ===== 16. Phone test fixes (4 Oct): controls on every screen, key caps, logo, landscape title, lobby, payouts ===== */
/* controls: html.ctl-ready = dimmed + GET READY (title, lobby, explainer, countdown), html.ctl-live = lit, ctl-go = the pulse at GO */
html.ctl-ready .pad { opacity: .5; }
html.ctl-ready .pad, html.ctl-ready .pad * { pointer-events: none !important; }
html.ctl-ready .pad-stick { opacity: .6; }
.pad::after { content: 'GET READY'; position: absolute; right: calc(var(--sa-r) + 4px); bottom: calc(var(--sa-b) + clamp(108px, 30vmin, 132px) + clamp(72px, 19vmin, 88px) + 4px);
  padding: 2px 8px 4px; background: var(--ink); color: #fff; font: 400 var(--fs-tag)/1 var(--font-px); letter-spacing: .04em; clip-path: var(--notch); display: none; }
html.ctl-ready .pad::after { display: block; }
html.ctl-go .pad-btn, html.ctl-go .pad-stick { animation: ctl-pulse .4s steps(2, end) 3; }
@keyframes ctl-pulse { 50% { scale: 1.14; filter: brightness(1.25); } }
/* desktop: the same idea with key caps */
.keycaps { position: fixed; z-index: 46; left: 50%; bottom: calc(var(--sa-b) + 6px); transform: translateX(-50%); display: none; align-items: flex-end; gap: 14px;
  padding: 8px 12px 10px; background: rgba(8, 16, 58, .55); clip-path: var(--notch); pointer-events: none; color: #fff; }
@media (pointer: fine) { html.ctl-ready .keycaps, html.ctl-live .keycaps { display: flex; } }
html.ui-spectate .keycaps, html.ui-touch .keycaps { display: none !important; }
html.ctl-ready .keycaps { opacity: .62; }
html.ctl-live .keycaps { opacity: .9; }
html.ctl-go .keycaps kbd { animation: ctl-pulse .4s steps(2, end) 3; }
.keycaps .kc-g { display: grid; justify-items: center; gap: 3px; }
.keycaps .kc-row { display: flex; gap: 3px; justify-content: center; }
.keycaps kbd { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px 3px; box-sizing: border-box; background: var(--paper); color: var(--ink);
  border: var(--px) solid var(--ink); clip-path: var(--notch); box-shadow: inset 0 calc(var(--px) * -2) 0 var(--paper-3); font: 400 18px/1 var(--font-px); }
.keycaps kbd.kc-wide { min-width: 96px; } .keycaps kbd.kc-mid { min-width: 56px; }
.keycaps b { font: 400 15px/1 var(--font-px); letter-spacing: .05em; }
.keycaps .kc-ready { align-self: center; padding: 2px 8px 4px; background: var(--gold); color: var(--ink); font: 400 16px/1 var(--font-px); clip-path: var(--notch); display: none; }
html.ctl-ready .keycaps .kc-ready { display: block; }
html:not(.ctl-grab) .keycaps .kc-grab { display: none; }

/* the owner's logo next to the pixel wordmark */
.ti-logo { display: flex; align-items: center; gap: clamp(8px, 2vmin, 16px); }
.ti-logo .ti-mark { flex: none; width: clamp(64px, 17vmin, 132px); height: auto; aspect-ratio: 1; border-radius: 50%; image-rendering: pixelated; filter: drop-shadow(var(--px) calc(var(--px) * 2) 0 var(--ink-soft)); }
.ti-logo > svg, .ti-logo .wordmark { min-width: 0; flex: 1 1 auto; }
@media (orientation: portrait) { .ti-logo { flex-direction: column; } }
.ti-pz { font-size: var(--fs-tag); gap: 6px; }
.ti-pz b { font-weight: 400; }
.ti-pz .pix-ico, .lb-pz .pix-ico, .pd-cap .pix-ico { width: 1em; height: 1em; flex: none; }

/* phones in landscape: the title keeps clear of the dimmed pad (stick bottom left, buttons bottom right) */
@media (orientation: landscape) {
  html.ui-phone .ti { grid-template: "logo top" auto "paid you" auto "coin you" auto ". ." 1fr "act act" auto / minmax(0, 1fr) minmax(0, 1fr); row-gap: 6px; }
  html.ui-phone .ti-logo { width: min(46vw, 400px, 70vh); }
  html.ui-phone .ti-logo .ti-mark { width: clamp(56px, 19vh, 96px); }
  html.ui-phone .ti-you { align-self: start; justify-self: end; width: min(100%, 330px); }
  html.ui-phone .ti-you .ti-tos { padding: 4px 8px 6px; }
  html.ui-phone .ti-you .tos-tick { font-size: calc(var(--fs-h2) * .7); }
  html.ui-phone .ti-act { justify-self: center; width: min(calc(100vw - 2 * clamp(150px, 34vmin, 180px)), 440px); }
  html.ui-phone .ti-act .px-btn.is-xl, html.ui-phone .ti-act .px-btn.is-wear { min-height: 84px; }
}

/* X + CA */
.rv-x .pix-ico, .rv-ca .pix-ico { width: 18px; height: 18px; }
.rv-ca { gap: 6px; font-size: var(--fs-tag); }
.hud-rv { display: contents; }
.hud-rvb.px-btn { min-height: 44px; min-width: 44px; padding-inline: .4em; font-size: var(--fs-tag); }

/* lobby: beans gathering, no counter */
.lb-beans { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 2px; min-height: 64px; align-content: center; }
.lb-beans i { width: clamp(22px, 5.4vmin, 32px); aspect-ratio: 18 / 25; animation: lb-hop 1.2s steps(2, end) calc(var(--i) * -.17s) infinite; }
.lb-beans i.new { animation: bean-pop .3s steps(3, end) both, lb-hop 1.2s steps(2, end) .3s infinite; }
.lb-beans i.ghost { opacity: 0; animation: lb-arrive 3.6s steps(6, end) calc(var(--g) * 1.2s) infinite; filter: grayscale(.4); }
@keyframes lb-arrive { 0% { opacity: 0; transform: translateX(40px); } 20%, 70% { opacity: .55; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes lb-hop { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
.lb-pz { display: flex; align-items: center; gap: 8px; padding: 8px 10px 10px; background: #fff8d6; border: var(--px) solid var(--ink); clip-path: var(--notch);
  box-shadow: inset 0 calc(var(--px) * -2) 0 var(--gold-hi); font: 400 var(--fs-chip)/1.05 var(--font-px); }
.lb-pz b { font-weight: 400; white-space: nowrap; }
.px-btn.lb-connect, .px-btn.cr-connect { width: 100%; min-height: 44px; justify-content: flex-start; text-align: left; white-space: normal; font: 800 var(--fs-small)/1.2 var(--font-ui); gap: 8px; }
.lb-connect .pix-ico, .cr-connect .pix-ico { width: 22px; height: 22px; flex: none; }
.lb-btns { gap: 6px; }
@media (orientation: landscape) and (max-height: 520px) { .sheet.lb { width: min(560px, calc(100vw - 2 * clamp(150px, 34vmin, 180px))); } }

/* top 3 payouts */
.pd-rows { display: grid; gap: 4px; width: 100%; }
.pd-cap { display: flex; align-items: center; justify-content: center; gap: 6px; font: 400 var(--fs-tag)/1 var(--font-px); color: var(--text-2); }
.pd-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px; padding: 4px 8px 6px; background: var(--paper-2);
  border: var(--px) solid var(--ink); clip-path: var(--notch); font: 700 var(--fs-small)/1.1 var(--font-ui); text-align: left; }
.pd-row.is-you { background: #fff8d6; }
.pd-pl { font: 400 var(--fs-chip)/1 var(--font-px); min-width: 2.1em; }
.pd-pl.pl-1 { color: var(--gold-ink); } .pd-pl.pl-2 { color: #5a6a8a; } .pd-pl.pl-3 { color: var(--orange-lo); }
.pd-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-sol { font: 400 var(--fs-tag)/1 var(--font-px); white-space: nowrap; }
.pd-proof { display: inline-flex; align-items: center; gap: 3px; color: var(--blue-lo); font: 800 var(--fs-small)/1 var(--font-ui); text-decoration: none; pointer-events: auto; }
.pd-proof .pix-ico { width: 14px; height: 14px; }
.cr-you { text-align: center; }
.cr-you b { font-weight: 800; }
.cr-you.is-paid { color: var(--green-ink); }
.rw-pod { grid-column: 1 / -1; }
.rw-rv { gap: 6px; }

/* wallet */
.wl-pitch b { white-space: nowrap; }
.wl-note { font-size: var(--fs-small); }
.wl-status { font-weight: 800; color: var(--blue-lo); }
.wl-status.is-bad { color: var(--red-lo); }
.wl-status[hidden] { display: none; }
.wl-fun { justify-self: center; gap: 8px; }
.wl-fun small { font: 700 var(--fs-small)/1 var(--font-ui); color: var(--text-2); }
.wl-list .px-btn.is-busy { filter: saturate(.6); }
/* the crown card on short landscape phones: story on the left, buttons on the right, nothing cut off */
@media (orientation: landscape) and (max-height: 520px) {
  .cc .cc-card, .cc.is-scene .cc-card { width: min(600px, 66vw); }
  .cc .cr .body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: 12px; row-gap: 4px; align-items: center; padding-top: 8px; padding-bottom: 10px; }
  .cc .cr .body > * { grid-column: 1; }
  .cc .cr .body > .row { grid-column: 2; grid-row: 1 / span 8; align-self: center; gap: 6px; }
  .cc .cr .px-btn.is-xl { min-height: 60px; min-width: 0; font-size: var(--fs-btn); }
  .cc .cr .row .px-btn:not(.is-xl) { min-height: 44px; }
  .cc .cr-who { font-size: calc(var(--fs-h2) * .8); }
  .cc .pd-row { padding: 2px 6px 4px; }
  .cc .cr-connect { grid-column: 1 / -1; }
}
/* solo test mode: fake payouts are badged, never linked */
.px-test { display: inline-block; padding: 1px 6px 3px; background: var(--red); color: #fff; font: 400 var(--fs-tag)/1 var(--font-px); letter-spacing: .05em; clip-path: var(--notch); white-space: nowrap; }
.px-panel-head .px-test { margin-left: auto; }
.px-test.is-big { justify-self: center; font-size: var(--fs-chip); padding: 3px 10px 5px; }