/* Boom Bazaar: cards, mini chips, card backs and every card motion class (SPEC §9.3, §10.1, §10.4, §10.8).
   Owner: look agent. Tokens come from css/app.css (§10.1); the :where() block below only supplies fallbacks (zero specificity).
   Builders: js/ui/cardface.js (emits the bb- class names used here).

   MOTION SWITCHES (set on <html> by main.js): --anim is a TIME (300ms Normal, 150ms Fast, 0 Instant, 120ms Gentle). Every duration here is
     calc(var(--anim) * N) with N = spec_ms / 300 (select 120 ms = .4, lock 150 = .5, flip 250 = .833, swap/dud 400 = 1.333), so Fast and
     Instant fall out for free. html[data-motion="reduced"] (Gentle sky / prefers-reduced-motion): movement is replaced by fades; no shakes.
   Server timings never change, so rooms stay in sync; only these presentation durations scale.
   Hard rule (SPEC §10.4): no UI transition exceeds 300 ms at Normal. */

:where(:root) {
  --sky-0:#060A1C; --sky-1:#0E1640; --sky-2:#2A1B5E; --lake-0:#081230; --lake-1:#0D1D4A; --shore:#04060F; --lights:#FFD98A;
  --panel:rgba(13,19,50,.88); --ui:#F4F1FF; --ui-dim:#A9A8C9; --paper:#FBF6EA; --paper-2:#EFE6D2; --ink:#16182B; --ink-20:rgba(22,24,43,.2);
  --ember:#FF5A3C; --gold:#FFC531; --jade:#1FC78A; --violet:#A66BFF; --dud:#7C8196; --fuse:#FF8A3D; --ok:#5BE39B; --squeeze:#FF5A3C;
  --font-ui:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --anim:300ms;           /* app.css/main.js: 300 Normal · 150 Fast · 0 Instant · 120 Gentle */
  --bt:0px;               /* Big text adds 2px (html[data-big="1"]) */
}

/* ===================================================================== hand card (81x108, or 65x96 for 9-10 card hands) */
.bb-card {
  position:relative; display:block; box-sizing:border-box; flex:none; width:81px; height:108px; margin:0; padding:0; border:0; border-radius:0;
  background:none; color:var(--fuse); font-family:var(--font-ui); font-weight:800; font-variant-numeric:tabular-nums; text-align:center;
  overflow:visible; cursor:pointer;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  transition:transform calc(var(--anim) * 0.4) ease-out, opacity calc(var(--anim) * 0.5) ease-out, filter calc(var(--anim) * 0.4) ease-out;
  will-change:transform;
}
.bb-card[data-size="65"] { width:65px; height:96px; }
.bb-card > * { pointer-events:none; }
.bb-card svg { display:block; }
.bb-face { position:absolute; left:0; top:0; overflow:visible; }
.bb-outline { opacity:0; transition:opacity calc(var(--anim) * 0.4); }       /* selection underlay: 6 px stroke, half hidden by the card = 3 px */

/* value badge: 16 px bold, --paper on --ink, a pill under the notch */
.bb-badge {
  position:absolute; right:6px; top:20px; height:17px; min-width:17px; box-sizing:border-box; padding:0 6px; border-radius:8.5px;
  background:var(--ink); color:var(--paper); font-size:calc(16px + var(--bt)); line-height:17px; font-weight:800; letter-spacing:0; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:2px;
}
.bb-badge.is-wide { font-size:calc(14px + var(--bt)); padding:0 5px; }
.bb-badge .bb-b-ic { flex:none; color:var(--paper); }
.bb-card[data-size="65"] .bb-badge.is-wide { padding:0 4px; letter-spacing:-.4px; }
.bb-card[data-size="65"] .bb-badge { right:5px; top:18px; height:17px; min-width:17px; border-radius:8.5px; font-size:calc(14px + var(--bt)); line-height:17px; padding:0 5px; }

/* name: 14 px / 800, centred, letter-spacing -0.2; cardface.js adds transform:scaleX(>=.9) to a name that would overflow */
.bb-name {
  position:absolute; left:0; right:0; top:65px; height:16px; line-height:16px; font-size:calc(14px + var(--bt)); font-weight:800; color:var(--ink);
  letter-spacing:-.2px; white-space:nowrap; transform-origin:50% 50%;
}
.bb-card[data-size="65"] .bb-name { top:58px; }

/* status row: set-progress chip (14 px) and the seen-before eye */
.bb-status { position:absolute; left:0; right:0; top:86px; height:18px; display:flex; align-items:center; justify-content:center; gap:4px; color:var(--ink); }
.bb-card[data-size="65"] .bb-status { top:77px; height:16px; }
.bb-prog { font-size:calc(14px + var(--bt)); line-height:16px; height:16px; padding:0 6px; border-radius:8px; background:rgba(22,24,43,.1); font-weight:800; color:var(--ink); }
.bb-seen { display:inline-flex; color:var(--ink); opacity:.75; }

/* badges: locked ✓ (bottom-right) and auto-picked robot (bottom-left) */
.bb-lockmark, .bb-automark { position:absolute; display:none; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; box-sizing:border-box; border:1.5px solid var(--ink); }
.bb-lockmark { right:-5px; bottom:-5px; background:var(--ok); color:var(--ink); }
.bb-automark { left:-5px; bottom:-5px; background:var(--paper); color:var(--ink); }
.bb-card[data-state="locked"] .bb-lockmark { display:inline-flex; animation:bb-pop calc(var(--anim) * 0.5) ease-out; }
.bb-card[data-auto] .bb-automark { display:inline-flex; }

/* states */
.bb-card[data-state="selected"] { transform:translateY(-8px); z-index:3; color:var(--fuse); }
.bb-card[data-state="selected"] .bb-outline { opacity:1; }
.bb-card[data-state="locked"] { transform:translateY(-8px); z-index:3; color:var(--ok); }
.bb-card[data-state="locked"] .bb-outline { opacity:1; }
.bb-card[data-state="dimmed"] { opacity:.4; }
.bb-card[data-state="disabled"] { opacity:.55; filter:saturate(.5); cursor:default; }
.bb-card[data-state="glow"] { color:var(--fuse); z-index:2; animation:bb-glow-loop 1s ease-in-out infinite; }
.bb-card[data-state="glow"] .bb-outline { opacity:1; }
.bb-card:active:not([data-state="selected"]):not([data-state="locked"]) { transform:scale(.96); transition-duration:calc(var(--anim) * 0.3); }
.bb-card:focus-visible { outline:3px solid var(--ui); outline-offset:3px; }

/* ===================================================================== mini chips (strips 24x32, your show 30x40; no text) */
.bb-chip { position:relative; display:inline-block; flex:none; width:24px; height:32px; vertical-align:top; line-height:0; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; transition:transform calc(var(--anim) * 0.4); }
.bb-chip[data-size="show"] { width:30px; height:40px; }
.bb-chip svg { display:block; overflow:visible; }
.bb-chip[data-state="glow"] { animation:bb-glow-loop 1s ease-in-out infinite; z-index:2; }
.bb-chip[data-state="spent"] { opacity:.45; filter:grayscale(1); }
.bb-chip[data-state="dimmed"] { opacity:.4; }
.bb-chip.bb-glow-chain { filter:drop-shadow(0 0 3px var(--gc, var(--lights))); }
/* longest run: dashed white rule, tag "●×4" (set by the strips / show code) */
.bb-run { position:relative; display:inline-flex; gap:2px; padding:2px; margin:-3px; border:1.5px dashed var(--ui); border-radius:7px; }
.bb-runtag { position:absolute; right:-2px; top:-14px; padding:0 4px; border-radius:7px; background:var(--panel); color:var(--ui); font:800 14px/16px var(--font-ui); white-space:nowrap; }

/* ===================================================================== card backs */
.bb-back { display:inline-block; flex:none; line-height:0; vertical-align:top; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.bb-back svg { display:block; }

/* ===================================================================== motion classes (all durations x --anim; Reduced = 120 ms fade) */
@keyframes bb-fade { from { opacity:0; } to { opacity:1; } }
@keyframes bb-deal { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@keyframes bb-flip { 0% { transform:scaleX(1); } 50% { transform:scaleX(0); } 100% { transform:scaleX(1); } }
@keyframes bb-slide { from { transform:translate(var(--dx,0), var(--dy,0)); } to { transform:none; } }
@keyframes bb-slideout { from { transform:none; } to { transform:translate(var(--dx,0), var(--dy,0)); opacity:.15; } }
@keyframes bb-dud { 0% { transform:translate(0,0) rotate(0); } 50% { transform:translate(calc(var(--dx,0px) * .5), calc(var(--dy,0px) * .5 - 44px)) rotate(8deg); } 100% { transform:translate(var(--dx,0px), var(--dy,0px)) rotate(0); } }
@keyframes bb-glow { 0% { filter:drop-shadow(0 0 0 transparent); } 50% { filter:drop-shadow(0 0 7px var(--gc, var(--lights))); } 100% { filter:drop-shadow(0 0 3px var(--gc, var(--lights))); } }
@keyframes bb-glow-loop { 0%,100% { filter:drop-shadow(0 0 2px var(--fuse)); } 50% { filter:drop-shadow(0 0 8px var(--fuse)); } }
@keyframes bb-pop { 0% { transform:scale(0); } 70% { transform:scale(1.25); } 100% { transform:scale(1); } }
@keyframes bb-tagpop { 0% { transform:scale(.5); opacity:0; } 70% { transform:scale(1.15); opacity:1; } 100% { transform:scale(1); } }
@keyframes bb-shake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-4px); } 40% { transform:translateX(4px); } 60% { transform:translateX(-3px); } 80% { transform:translateX(3px); } }
@keyframes bb-squash { 0% { transform:scale(1); } 40% { transform:scale(.95); } 100% { transform:scale(1); } }
@keyframes bb-smoke { 0% { opacity:.7; transform:translate(0,0) scale(.6); } 100% { opacity:0; transform:translate(-14px,-10px) scale(1.7); } }
@keyframes bb-count { 0% { transform:translateY(0); } 50% { transform:translateY(-3px) scale(1.08); } 100% { transform:none; } }

.bb-a-deal { animation:bb-deal calc(var(--anim) * 1) cubic-bezier(.2,.8,.3,1) both; animation-delay:calc(var(--i, 0) * var(--anim) * .1); }
.bb-a-newhand { animation:bb-slide calc(var(--anim) * 1) cubic-bezier(.2,.8,.3,1) both; --dx:-60px; }
.bb-a-flip { animation:bb-flip calc(var(--anim) * 0.8333) ease-in-out both; }
.bb-a-swap-in { animation:bb-slide calc(var(--anim) * 1.3333) ease-in-out both; }
.bb-a-swap-out { animation:bb-slideout calc(var(--anim) * 1.3333) ease-in-out both; }
.bb-a-dud { position:relative; z-index:6; animation:bb-dud calc(var(--anim) * 1.3333) ease-in-out both; filter:grayscale(.6); }
.bb-a-dud::after { content:""; position:absolute; left:6px; top:50%; width:18px; height:18px; border-radius:50%; background:rgba(169,168,201,.55); animation:bb-smoke calc(var(--anim) * 1.3333) ease-out both; pointer-events:none; }
.bb-a-glow { animation:bb-glow calc(var(--anim) * 1) ease-out both; }
.bb-a-tagpop { animation:bb-tagpop calc(var(--anim) * 1) ease-out both; }
.bb-a-pop { animation:bb-pop calc(var(--anim) * 0.5) ease-out both; }
.bb-a-shake { animation:bb-shake calc(var(--anim) * 1.3333) linear both; }
.bb-a-squash { animation:bb-squash calc(var(--anim) * 0.3) ease-out both; }
.bb-a-count { animation:bb-count calc(var(--anim) * 1) ease-out both; }

/* Instant: a 120 ms fade only */
html[data-speed="instant"] :is(.bb-a-deal,.bb-a-newhand,.bb-a-flip,.bb-a-swap-in,.bb-a-swap-out,.bb-a-dud,.bb-a-glow,.bb-a-tagpop,.bb-a-count) { animation:bb-fade 120ms linear both; animation-delay:0s; }
/* Reduced motion / Gentle sky: movement becomes a 120 ms fade; no shakes, no looping glow */
html[data-motion="reduced"] :is(.bb-a-deal,.bb-a-newhand,.bb-a-flip,.bb-a-swap-in,.bb-a-swap-out,.bb-a-dud,.bb-a-glow,.bb-a-tagpop,.bb-a-pop,.bb-a-count) { animation:bb-fade 120ms linear both; animation-delay:0s; }
html[data-motion="reduced"] .bb-a-shake, html[data-motion="reduced"] .bb-a-squash, html[data-motion="reduced"] .bb-a-dud::after { animation:none; }
html[data-motion="reduced"] :is(.bb-card[data-state="glow"], .bb-chip[data-state="glow"]) { animation:none; }
html[data-motion="reduced"] .bb-card, html[data-motion="reduced"] .bb-chip, html[data-motion="reduced"] .bb-outline { transition-duration:120ms; }
html[data-motion="reduced"] .bb-card[data-state="selected"], html[data-motion="reduced"] .bb-card[data-state="locked"] { transform:none; }   /* outline + preview chip still mark it; no lift */
@media (prefers-reduced-motion: reduce) {
  :is(.bb-a-deal,.bb-a-newhand,.bb-a-flip,.bb-a-swap-in,.bb-a-swap-out,.bb-a-dud,.bb-a-glow,.bb-a-tagpop,.bb-a-pop,.bb-a-count) { animation:bb-fade 120ms linear both; animation-delay:0s; }
  .bb-a-shake, .bb-a-squash, .bb-a-dud::after { animation:none; }
}

/* ===================================================================== round show overlay (render/show.js) */
.bb-show { position:fixed; inset:0; z-index:40; touch-action:manipulation; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; font-family:var(--font-ui); color:var(--ui); }
.bb-show-total { position:absolute; left:0; right:0; top:calc(14px + env(safe-area-inset-top, 0px)); text-align:center; font-size:34px; font-weight:900; font-variant-numeric:tabular-nums; text-shadow:0 2px 0 var(--ink); }
.bb-show-total small { display:block; font-size:14px; font-weight:800; color:var(--ui-dim); letter-spacing:.06em; text-transform:uppercase; }
.bb-show-skip { position:absolute; left:0; right:0; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); text-align:center; font-size:14px; font-weight:700; color:var(--ui-dim); }
.bb-show-label {
  position:absolute; display:flex; align-items:center; gap:6px; white-space:nowrap; padding:4px 10px 4px 6px; border-radius:14px; background:var(--panel);
  font-size:20px; font-weight:800; line-height:26px; color:var(--ui); box-shadow:0 2px 10px rgba(0,0,0,.35); opacity:0; transform:translate(-50%, 8px);
  animation:bb-label var(--lbl, 900ms) ease-out both;
}
.bb-show-label b { color:var(--lights); font-weight:900; }
.bb-show-label svg { flex:none; }
@keyframes bb-label { 0% { opacity:0; transform:translate(-50%, 10px); } 15% { opacity:1; transform:translate(-50%, 0); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%, -14px); } }
html[data-speed="instant"] .bb-show-label { animation:none; opacity:1; transform:translate(-50%, 0); }
html[data-motion="reduced"] .bb-show-label { animation:bb-label-fade var(--lbl, 900ms) linear both; transform:translate(-50%, 0); }
@keyframes bb-label-fade { 0% { opacity:0; } 15% { opacity:1; } 80% { opacity:1; } 100% { opacity:0; } }
.bb-show-list { position:absolute; left:0; right:0; top:30%; display:flex; flex-direction:column; align-items:center; gap:8px; }
.bb-show-list .bb-show-label { position:relative; transform:none; animation:bb-fade 120ms linear both; opacity:1; }

/* app-wide canvases (the app owns #scene/#fx placement; these keep them inert) */
#scene, #fx { pointer-events:none; }