/* Lot Luck UI (SPEC §9 global style, §10.2 palettes). The DOM HUD (#ui) is laid out in LOGICAL px: main.js
   sizes it to the canvas's logical W × H and scales it by k/dpr, so DOM and canvas share one coordinate
   system. #paddles (One Phone, §9.4) is laid out in CSS px over the whole stage. */
:root{
  /* UI palette (§10.2) */
  --ink:#10141f; --panel:#1d2a3a; --panel-a:rgba(29,42,58,.92); --edge:#35557a; --text:#fff8ec; --dim:#a8b8cc;
  --teal:#1fb5a8; --teal-hi:#5fd8cc; --teal-lo:#13867c; --tangerine:#ff8a3c; --tangerine-hi:#ffb27a; --tangerine-lo:#a85018;
  --tag:#f4e6c8; --tag-hi:#fff8ec; --string:#c9a878; --gold:#ffcf3a; --danger:#ff7480; --ok:#5fe3a1;
  --jackpot:#ffcf3a; --dud:#8a93a6;
  /* rarity (§10.2; colour always travels with gems + a label) */
  --r-common:#c8ccd8; --r-uncommon:#5fe37a; --r-rare:#4fb3ff; --r-epic:#b36bff; --r-legendary:#ffcf3a;
  /* seats (§7.8; colour always travels with a glyph) */
  --s1:#ff5d4f; --s2:#ffc933; --s3:#3fe39a; --s4:#3aa8ff; --s5:#9b6bff; --s6:#ff6fc4; --s7:#ff9331; --s8:#a8e83a; --chat:#b36bff;
  /* 4 px pixel-stepped corners (§9) */
  --corners: polygon(0 4px,2px 4px,2px 2px,4px 2px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,
    100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,
    4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px));
  --drop: 0 2px 0 #10141f;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#10141f;
  background:linear-gradient(#10141f 0%,#16233a 45%,#1d2a3a 100%);
  color:var(--text);font:700 16px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.5px;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;overscroll-behavior:none}
body{display:flex;align-items:center;justify-content:center}
#stage{position:relative;flex:none;transform-origin:center center}
#game{display:block;image-rendering:pixelated;image-rendering:crisp-edges}
#ui{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;pointer-events:none}
#ui > *{pointer-events:auto}
#ui .pass-through{pointer-events:none}
#ui .pass-through > *{pointer-events:auto}
#paddles{position:absolute;inset:0;pointer-events:none}
#paddles > *{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.noscript{padding:24px}
h1,h2,h3,p{margin:0}
h1{font-size:28px} h2{font-size:22px} h3{font-size:18px}
.shadow,h1,h2,h3,.lbl,.panel{text-shadow:var(--drop)}
.dim{color:var(--dim)} .gold{color:var(--gold)} .ok{color:var(--ok)} .bad{color:var(--danger)} .teal{color:var(--teal-hi)}
small,.small{font-size:16px;font-weight:600}
img.glyph{width:18px;height:18px;image-rendering:pixelated;vertical-align:-3px}
img.pix,canvas.pix{image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none}
.screen > *{pointer-events:auto}
.screen.full{pointer-events:auto}
.center{align-items:center;justify-content:center;text-align:center}
.pad{padding:16px}
.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.screen.scroll > *{flex-shrink:0}
.row{display:flex;gap:8px;align-items:center}
.col{display:flex;flex-direction:column;gap:8px}
.wrap{flex-wrap:wrap}
.spacer{flex:1}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ---------- panels and buttons (§9: 2 px edge, 4 px stepped corners; ≥ 44 px; bid ≥ 64 px; pressed moves 2 px) ---------- */
.panel{background:var(--panel-a);border:2px solid var(--edge);clip-path:var(--corners);padding:12px}
.panel.tight{padding:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:8px 14px;
  font:inherit;color:var(--text);background:#26384e;border:2px solid var(--edge);clip-path:var(--corners);cursor:pointer;
  text-shadow:var(--drop);box-shadow:inset 0 -3px 0 rgba(0,0,0,.35),inset 0 2px 0 rgba(255,255,255,.12);touch-action:manipulation}
.btn:active,.btn.pressed{transform:translateY(2px);box-shadow:inset 0 -1px 0 rgba(0,0,0,.35)}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:-3px;box-shadow:inset 0 0 0 6px var(--gold)}   /* P9: ink + gold rings: ≥ 3:1 on every button fill (clip-path hides outer outlines) */
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:default;transform:none}
/* Brand fills carry INK text (white on #1fb5a8 / #ff8a3c is < 4.5:1; see PROGRESS Decisions) */
.btn.primary{background:var(--teal);border-color:var(--teal-hi);color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.35)}
.btn.bid{background:var(--tangerine);border-color:var(--tangerine-hi);color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.35);min-height:64px;font-size:20px}
.btn.bid.dark{background:var(--tangerine-lo);border-color:var(--tangerine);color:var(--text);text-shadow:var(--drop)}
.btn.danger{background:#a8283c;border-color:#ff8a98}
.btn.big{min-height:56px;font-size:20px}
.btn.wide{width:100%}
.btn.nowrap{white-space:nowrap}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}

/* ---------- form bits ---------- */
.field{font:inherit;color:var(--text);background:#121b28;border:2px solid var(--edge);padding:10px 12px;min-height:44px;width:100%;
  clip-path:var(--corners);letter-spacing:1px;-webkit-user-select:text;user-select:text}
.field:focus{outline:none;border-color:var(--gold)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.seg{display:inline-flex;gap:4px}
.seg .btn{padding:6px 10px}
.seg .btn[aria-pressed="true"]{background:var(--teal);border-color:var(--teal-hi);color:var(--ink);text-shadow:none}
.seg .btn[disabled][aria-pressed="true"]{opacity:1}   /* P9: a guest sees the host's choice at full contrast */

/* ---------- luggage-tag card (peek card, album shelf tabs) ---------- */
.tag{background:var(--tag);color:var(--ink);border:2px solid var(--string);clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%,0 16px);text-shadow:none}

/* ---------- seat chips (colour + glyph, §10.10) ---------- */
.seat{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:4px 8px;border:2px solid currentColor;clip-path:var(--corners);background:rgba(16,20,31,.7)}

/* ---------- rarity labels ---------- */
.rar{font-size:16px} .rar.common{color:var(--r-common)} .rar.uncommon{color:var(--r-uncommon)} .rar.rare{color:var(--r-rare)}
.rar.epic{color:var(--r-epic)} .rar.legendary{color:var(--r-legendary)}

/* ---------- title + stub screens ---------- */
.title-menu{position:absolute;left:0;right:0;bottom:0;padding:16px 20px 18px;display:flex;flex-direction:column;gap:10px}
.title-menu .grid2 .btn{min-height:52px}
.wordmark-dom{position:absolute;left:0;right:0;top:9%;text-align:center;pointer-events:none}
.wordmark-dom .tags{display:inline-flex;gap:4px}
.wordmark-dom .tags span{display:inline-block;width:30px;height:40px;line-height:40px;background:var(--tag);color:var(--teal-lo);font-size:26px;
  border:2px solid var(--string);clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%,0 6px);text-shadow:none}
.wordmark-dom .tags i{display:inline-block;width:10px}
.footer{font-size:16px;font-weight:600;color:var(--dim);text-align:center;text-shadow:var(--drop)}
.stub{margin:auto 16px;display:flex;flex-direction:column;gap:12px;text-align:left}
.stub .meta{font:600 16px/1.4 ui-monospace,monospace;color:var(--dim);white-space:pre-wrap}

/* ---------- toasts ---------- */
#toasts{position:fixed;left:0;right:0;top:max(10px,env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:6px;z-index:100;pointer-events:none}
.toast{background:var(--panel-a);border:2px solid var(--gold);color:var(--text);padding:8px 14px;max-width:min(92vw,420px);text-align:center;
  clip-path:var(--corners);text-shadow:var(--drop);animation:toastIn .18s ease-out}
@keyframes toastIn{from{transform:translateY(-8px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){ .toast{animation:none} }

/* ---------- system cards (S23) ---------- */
#rotate{position:fixed;inset:0;z-index:90;background:#10141f;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center}

/* ======================================================================== P4: play screens ===== */
/* top bar (§9.3, 0–44) */
.topbar{position:absolute;left:0;right:0;top:0;height:44px;display:flex;align-items:center;gap:6px;padding:0 6px;background:linear-gradient(#10141f,#16233a);border-bottom:2px solid var(--edge)}
.pill{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 8px;background:#121b28;border:2px solid var(--edge);clip-path:var(--corners);font-size:16px;white-space:nowrap}
.pill.gate{color:var(--gold);max-width:150px;overflow:hidden;text-overflow:ellipsis}
.pill.cash{margin-left:auto;color:var(--gold);font-size:18px}
.iconbtn{min-width:44px;min-height:44px;padding:0;font-size:18px}
/* lot card (slides down from the stage top) */
.lotcard{position:absolute;left:50%;top:50px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 14px 8px;min-width:220px;
  background:var(--tag);color:var(--ink);border:2px solid var(--string);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 12px);text-shadow:none;pointer-events:none;
  animation:lotIn .35s ease-out}
.lotcard .ct{font-size:18px}
.lotcard .meta{font-size:16px;color:#3a4258;white-space:nowrap}
.lotcard .ltag{font-size:16px;padding:0 6px;background:var(--ink);color:var(--gold)}
.lotcard.mini{top:48px;padding:2px 10px;min-width:0;max-width:96%;flex-direction:row;gap:8px;animation:none;opacity:.94;white-space:nowrap}
.lotcard.mini .ct{font-size:16px}
.lotcard.table{top:auto;bottom:auto}
@keyframes lotIn{from{transform:translate(-50%,-30px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
/* ladder / roster / controls bands (§9.3) */
.band{position:absolute;left:0;right:0}
.ladder{display:flex;align-items:center;gap:6px;padding:6px 6px;overflow:hidden;background:#121b28;border-top:2px solid var(--edge)}
.ladder .high{margin-left:auto;flex-shrink:0;font-size:16px;white-space:nowrap;padding:2px 8px;border:2px solid currentColor;clip-path:var(--corners);background:rgba(16,20,31,.8)}
.chip{display:inline-flex;align-items:center;gap:3px;height:32px;padding:0 7px;border:2px solid currentColor;clip-path:var(--corners);background:rgba(16,20,31,.85);font-size:16px;white-space:nowrap;animation:chipIn .2s ease-out}
.chip:not(:first-child){opacity:.75}
@keyframes chipIn{from{transform:translateX(-12px);opacity:0}to{transform:none}}
.roster{display:flex;gap:4px;padding:2px 4px;overflow-x:auto;background:#10141f;scrollbar-width:none}
.rchip{position:relative;flex:1 0 44px;min-width:44px;max-width:96px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid currentColor;
  clip-path:var(--corners);background:rgba(29,42,58,.92);font-size:16px;line-height:1.05;padding:0 2px}
.rchip .c{color:var(--text);font-size:16px}
.rchip .n{font-size:11px;color:var(--dim);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rchip.high{box-shadow:inset 0 0 0 2px currentColor;background:rgba(60,48,20,.95)}
.rchip .badge{position:absolute;right:1px;top:0;font-size:11px;color:var(--gold)}
.rchip .pk{position:absolute;left:0;right:0;bottom:-1px;font-size:10px;line-height:12px;background:var(--tag);color:var(--ink);text-align:center;white-space:nowrap;overflow:hidden;text-shadow:none;animation:chipIn .3s ease-out}
.rchip.me{outline:2px dashed var(--gold);outline-offset:-6px}
.controls{display:flex;flex-direction:column;gap:6px;padding:6px 8px 8px;background:linear-gradient(#16233a,#10141f)}
.controls .r1{display:flex;gap:6px;height:44px}
.controls .r1 .btn{flex:1;min-height:44px;padding:4px 8px}
.controls .r2{display:flex;gap:8px;height:92px}
.controls .r2 .btn{min-height:92px;flex-direction:column;gap:0;font-size:22px;line-height:1.1}
.controls .r2 .btn small{font-size:16px;opacity:.85}
.controls .r2 .raise{flex:6}.controls .r2 .jump{flex:4}
.btn.high{background:#3a3420;border-color:var(--gold);color:var(--gold);box-shadow:0 0 12px rgba(255,207,58,.45) inset}
.btn.flashx{animation:flashx .3s steps(1,end) 1}   /* P9: whole-colour jumps (steps(2) showed a half-blended, unreadable frame) */
@keyframes flashx{0%,100%{filter:none}50%{background:#a8283c;border-color:#ff8a98;color:#fff}}
.btn.ou{background:#26384e}
.btn.ou[aria-pressed="true"]{background:var(--teal);color:var(--ink);text-shadow:none}
.btn.ou.j[aria-pressed="true"]{background:var(--jackpot);border-color:#fff1a8}.btn.ou.d[aria-pressed="true"]{background:var(--dud);border-color:#c8ccd8}
.beatenmsg{position:absolute;left:0;right:0;text-align:center;font-size:18px;color:var(--danger);pointer-events:none;animation:toastIn .15s ease-out}
/* peek cards (S9) */
.peekwrap{position:absolute;left:0;right:0;display:flex;justify-content:center;gap:10px;perspective:600px}
.peekwrap .peekcard{pointer-events:auto}   /* the game overlay is pointer-events:none; the face-down card must take taps */
.peekcard{width:280px;height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 14px;cursor:pointer;text-align:center;
  background:var(--tag);color:var(--ink);border:3px solid var(--string);clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%,0 18px);text-shadow:none;transition:transform .14s steps(4)}
.peekcard.two{width:178px;height:180px;padding:8px}
.peekcard.back{background:repeating-linear-gradient(45deg,#2a4a6a 0 8px,#22405e 8px 16px);border-color:var(--edge);color:var(--text);text-shadow:var(--drop)}
.peekcard.back .big{font-size:26px}
.peekcard .ptitle{font-size:20px;letter-spacing:1px;padding:0 8px;background:var(--ink);color:var(--gold)}
.peekcard .ptext{font-size:22px;line-height:1.15}
.peekcard.two .ptext{font-size:22px;line-height:1.1}   /* P9 §10.10: peek text 22 px on the two-card (Customs Sweep) layout too */
.peekcard.two img.xr{width:48px;height:48px}
.peekcard .hole{width:14px;height:14px;border-radius:50%;background:#7a6a50;margin-bottom:2px}
.peekcard img.xr{width:72px;height:72px;image-rendering:pixelated;background:#0e2a3a;border:2px solid #4fb3ff;filter:hue-rotate(160deg) saturate(.6) brightness(1.3)}
.flipping{transform:scaleX(0)}
.timebar{position:absolute;left:24px;right:24px;height:8px;background:#121b28;border:2px solid var(--edge)}
.timebar i{display:block;height:100%;background:var(--teal);transform-origin:left center}
.lockline{max-width:300px;text-align:center;font-size:18px;color:var(--gold);background:var(--panel-a);padding:8px 12px;clip-path:var(--corners);border:2px solid var(--gold)}
/* call panel (S13) */
.callpanel{display:flex;flex-direction:column;gap:6px}
.jd{display:flex;gap:6px;height:72px}
.jd .btn{flex:1;min-height:72px;font-size:22px}
.jd .btn.j[aria-pressed="true"]{background:var(--jackpot);color:var(--ink);border-color:#fff1a8;text-shadow:none}
.jd .btn.d[aria-pressed="true"]{background:var(--dud);color:var(--ink);border-color:#c8ccd8;text-shadow:none}
.bcall{display:flex;gap:4px;align-items:center;flex-wrap:nowrap;overflow-x:auto}
.bcall .q{font-size:16px;color:var(--dim);white-space:nowrap;padding-right:2px}
.bcall .btn{min-height:44px;padding:4px 10px;flex:1}
.bcall .btn[aria-pressed="true"]{background:var(--teal);color:var(--ink);text-shadow:none}
.locked-in{font-size:18px;color:var(--gold);text-align:center}
.latches{display:flex;gap:16px;justify-content:center;align-items:center;height:92px}
.latches .btn{width:96px;min-height:72px;font-size:18px}
.latches .btn.done{background:#3a4258;color:var(--dim)}
.pullbtn{width:100%;min-height:92px;font-size:26px}
.fliprow{display:flex;gap:6px;align-items:center}
.flipchip{position:absolute;transform:translateX(-50%);padding:2px 4px;font:700 12px/1.1 system-ui,sans-serif;color:var(--text);line-height:1.1;text-align:center;background:var(--panel-a);border:2px solid var(--gold);clip-path:var(--corners);white-space:nowrap;cursor:pointer;min-height:44px;display:flex;flex-direction:column;justify-content:center}
.flipchip .imp{color:var(--danger);font-size:11px}
.result{font-size:20px;text-align:center}
/* overlays (round intro / end / final / pause) */
.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px;gap:10px;background:rgba(16,20,31,.55)}
.overlay.clear{background:none}
.board{background:#20222c;border:3px solid #3a3d4c;padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:300px;clip-path:var(--corners)}
.board .row{justify-content:space-between}
.board .flap{font:700 20px/1.2 ui-monospace,monospace;color:var(--gold);background:#2f3342;padding:2px 6px;letter-spacing:2px;text-shadow:none;white-space:nowrap;animation:flapIn .25s steps(3)}
@keyframes flapIn{from{transform:scaleY(0)}to{transform:none}}
.rule{max-width:320px;text-align:center;font-size:18px}
.stand{width:100%;max-width:420px;display:flex;flex-direction:column;gap:4px}
.srow{display:grid;grid-template-columns:28px 34px 1fr auto;gap:6px;align-items:center;padding:4px 8px;background:var(--panel-a);border:2px solid var(--edge);clip-path:var(--corners);min-height:48px}
.srow .pl{font-size:18px;color:var(--gold)}
.srow .nm{font-size:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.srow .nw{font-size:20px;color:var(--gold);text-align:right}
.srow .sub{grid-column:3 / 5;font-size:14px;color:var(--dim);display:flex;gap:4px;flex-wrap:wrap}
.setbar{display:inline-flex;align-items:center;gap:2px;padding:0 4px;border:1px solid currentColor;font-size:14px}
img.bud{image-rendering:pixelated}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:150px}
.step{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:96px;gap:2px;text-align:center;font-size:14px}
.step .blk{width:100%;background:linear-gradient(#35557a,#1d2a3a);border:2px solid var(--edge);clip-path:var(--corners);display:flex;align-items:flex-start;justify-content:center;font-size:22px;color:var(--gold);padding-top:4px}
.awards{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:420px}
.award{font-size:16px;padding:2px 6px;border:2px solid var(--gold);background:rgba(16,20,31,.85);clip-path:var(--corners)}
.stamps{font-size:16px;color:var(--ok);text-align:center}
.coach{position:absolute;left:12px;right:12px;padding:8px 10px;font-size:16px;background:rgba(31,181,168,.95);color:var(--ink);text-shadow:none;clip-path:var(--corners);pointer-events:none;animation:toastIn .2s ease-out}
.pausebtn{position:absolute;width:44px;height:44px;min-width:44px;padding:0;font-size:16px;opacity:.8}
.fingers{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-size:24px;padding:12px 16px;background:var(--panel-a);border:3px solid var(--gold);clip-path:var(--corners);pointer-events:none}
.fingers .cd{font-size:40px;color:var(--gold)}
/* S10 pass card */
.passcard{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center}
.passcard .chatter{max-width:330px;font-size:20px;line-height:1.25;background:rgba(16,20,31,.82);padding:10px 12px;clip-path:var(--corners);border:2px solid rgba(255,255,255,.25)}
.passcard .chatter .k{display:block;font-size:16px;color:var(--gold);margin-bottom:4px;letter-spacing:1px}
.holdbtn{position:relative;width:120px;height:120px;border:none;background:none;padding:0;cursor:pointer;touch-action:none}
.holdbtn,.holdbtn *,.btn{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}   /* iOS: a long press must not start selection or the callout (it cancels the hold) */
.holdbtn *{pointer-events:none}
.holdbtn.nudge{animation:nudge .3s steps(3)}
@keyframes nudge{33%{transform:translateX(-6px)}66%{transform:translateX(6px)}}
.holdbtn svg{position:absolute;inset:0;width:100%;height:100%}
.holdbtn span{position:relative;font-size:18px;color:#fff;text-shadow:var(--drop)}
.peekfull{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(16,20,31,.96);cursor:pointer}
.peekfull .hint{font-size:18px;color:var(--dim)}
.peekfull .bar{width:260px;height:10px;background:#121b28;border:2px solid var(--edge)}
.peekfull .bar i{display:block;height:100%;background:var(--gold);transform-origin:left center}
/* One Phone paddles (§9.4, CSS px) */
.paddle{position:absolute;padding:0;border:none;background:none;color:var(--text);touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;overflow:visible}
.paddle .pin{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  border:3px solid rgba(255,255,255,.55);clip-path:var(--corners);box-shadow:inset 3px 3px 0 rgba(255,255,255,.28),inset -3px -3px 0 rgba(0,0,0,.28);text-shadow:0 2px 0 rgba(16,20,31,.8)}
.paddle .gl{width:32px;height:32px;image-rendering:pixelated}
.paddle .top{display:flex;align-items:center;gap:6px;font-size:16px;line-height:1}
.paddle .tgt{font-size:26px;line-height:1.05}
.paddle .st{font-size:14px;line-height:1.1;max-width:140px;text-align:center}
.paddle.dim .pin{filter:saturate(.35) brightness(.6)}
.paddle.armed .pin{animation:none}
.paddle.pulse .pin{animation:pulse .5s steps(2) infinite}
@keyframes pulse{50%{filter:brightness(1.35)}}
.paddle.down .pin{transform-origin:center;filter:brightness(.8);box-shadow:inset -3px -3px 0 rgba(255,255,255,.2),inset 3px 3px 0 rgba(0,0,0,.35)}
.paddle.high .pin{filter:brightness(.85);box-shadow:inset 0 0 0 4px var(--gold),inset 3px 3px 0 rgba(0,0,0,.35)}
.paddle.beaten .pin{animation:flashx .3s steps(1,end) 1}
.paddle.photo .pin{animation:photo .45s steps(3) 1}
@keyframes photo{0%,66%{filter:brightness(3)}}
.paddle.bot .pin{border-style:dashed;cursor:default}
.paddle.light .pin{text-shadow:0 1px 0 rgba(255,255,255,.4)}   /* P9: ink text on light seat fills (seatInk) */
.paddle.lift .pin{filter:grayscale(.5)}
.paddle .halves{display:flex;width:100%;height:100%}
.paddle .half .who{position:absolute;left:3px;top:2px;display:flex;align-items:center;gap:2px;font-size:14px;line-height:1}
.paddle .half .who img{width:14px;height:14px;image-rendering:pixelated}
.paddle .half{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:16px;border:none;color:inherit;background:rgba(16,20,31,.25);min-width:64px;padding:0;touch-action:none;text-shadow:inherit}
.paddle .half + .half{border-left:2px solid rgba(16,20,31,.6)}
.paddle .half[aria-pressed="true"]{background:rgba(255,255,255,.88);color:var(--ink);text-shadow:none}
.paddle .half .big{font-size:22px}
.paddle .half.done{opacity:.45}
.paddle .peekchip{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(100% + 2px);font-size:11px;line-height:1.1;padding:2px 4px;white-space:nowrap;background:var(--tag);color:var(--ink);text-shadow:none;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.rx{position:absolute;width:44px;height:44px;min-width:44px;padding:0;font-size:13px;opacity:.85}
/* P8 progression: Passport tiles, new-unlock sparkle, unlock cards, XP bar, host-pool chips */
.ptile .lockb{color:var(--dim);font-size:12px}
.ptile.fresh{animation:sparkle 1.2s ease-in-out infinite;border-color:var(--gold)}
@keyframes sparkle{50%{box-shadow:0 0 0 3px rgba(255,207,58,.55);filter:brightness(1.2)}}
.unlockcard{animation:lotIn .35s ease-out}
.xpbar{height:12px;background:#121b28;border:2px solid var(--edge);overflow:hidden;width:100%}
.xpbar i{display:block;height:100%;background:var(--gold);transition:width 1.2s ease-out}
.poolchip{display:inline-block;font-size:16px;padding:2px 8px;margin:2px;background:#121b28;border:2px solid var(--gold);color:var(--gold);clip-path:var(--corners)}
@media (prefers-reduced-motion:reduce){.ptile.fresh{animation:none}.xpbar i{transition:none}}

/* round-frame emotes (wave / cheer): float up above the overlays so the tap visibly does something */
.emotefx{position:absolute;bottom:22%;display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:4;animation:emoteUp 1.6s ease-out forwards}
.emotefx .e{font-size:44px;line-height:1}
.emotefx .n{font-size:14px;padding:1px 6px;background:var(--ink);text-shadow:none}
@keyframes emoteUp{0%{transform:translateY(20px) scale(.6);opacity:0}15%{transform:translateY(0) scale(1.15);opacity:1}100%{transform:translateY(-180px) scale(1);opacity:0}}
@media (prefers-reduced-motion: reduce){.emotefx{animation:emoteFade 1.6s linear forwards}@keyframes emoteFade{0%,70%{opacity:1}100%{opacity:0}}}

/* ---------- tip jar (DEV/tip-jar.md): small and quiet, never a big button (same look as Cracktile / Rattletrap Derby) ---------- */
.btn.gold{background:#8c6410;border-color:#ffd97a;color:#fff}
.tiplink{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:4px 10px;background:transparent;border:0;
  font:inherit;font-size:16px;font-weight:700;color:var(--gold);text-shadow:var(--drop);cursor:pointer;text-decoration:underline dotted;text-underline-offset:4px}
.tiplink:active,.tiplink.pressed{transform:translateY(2px);color:#fff}
.tiplink:focus-visible,.tipx:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.tipline{display:flex;align-items:center;justify-content:center;gap:2px;width:100%;max-width:420px}
.tipline .tiplink{color:var(--dim);font-weight:600;text-decoration:none}
.tipx{min-width:44px;min-height:44px;background:transparent;border:0;color:var(--dim);font:700 22px/1 inherit;font-family:inherit;cursor:pointer;text-shadow:var(--drop)}
.tipx:active{transform:translateY(2px);color:#fff}
.tipsupport{margin-top:12px}
.tipsupport p{color:var(--text);font-weight:600}
.tipfoot{margin:-6px 0 -8px}