/* ============================================================
   TCGBOXES v2 — tcgboxes.io structure + cardstand.app UI kit
   Fonts: Sora (display) / Inter (body) · accents #7c5cff→#37e6c9
   Dual theme: dark (default vibe of tcgboxes.io) + light
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#fafafa; --panel:#ffffff; --panel2:#f5f5f4; --panel3:#efefee; --hover:#f1f1f0;
  --border:#e4e4e2; --border2:#eeeeec;
  --text:#0a0a0a; --muted:#57575a; --faint:#8f8f94;
  --acc:#6b4aef; --acc-h:#5a39dd; --acc-soft:#6b4aef16; --acc-br:#6b4aef38;
  --accB:#0f9d8a; --accB-soft:#0f9d8a14; --accB-br:#0f9d8a36;
  --gain:#1ca87e; --gain-soft:#1ca87e16; --amber:#b07908; --amber-soft:#b0790816; --danger:#d64556; --danger-soft:#d6455614;
  --chart:#6b4aef; --chart-line:#ececea;
  --grad:linear-gradient(115deg,#6b4aef,#0f9d8a);
  --radius:16px; --radius-sm:11px; --r3:8px;
  --shadow:0 18px 44px -18px rgba(12,19,34,.16); --shadow-lg:0 30px 70px -24px rgba(12,19,34,.3);
  --rc-common:#7d8698; --rc-uncommon:#1ca87e; --rc-rare:#3d63f3; --rc-epic:#6b4aef; --rc-grail:#b07908;
  --stage:#060b14; --stage2:#0c1526; --stghair:rgba(244,247,251,.09); --stink:#f4f7fb; --stink2:#a2a2a8;
  --ff-d:"Sora","Segoe UI",system-ui,sans-serif; --ff-b:"Inter","Segoe UI",system-ui,sans-serif;
  --mono:"Inter","Segoe UI",system-ui,sans-serif; /* kit font everywhere — numbers get tabular-nums via .num */
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#060b14; --panel:#151a22; --panel2:#1a2029; --panel3:#111723; --hover:#202734;
  --border:#252d3a; --border2:#1f2632;
  --text:#f4f7fb; --muted:#a2a2a8; --faint:#76767e;
  --acc:#7c5cff; --acc-h:#8f74ff; --acc-soft:#7c5cff1f; --acc-br:#7c5cff4d;
  --accB:#37e6c9; --accB-soft:#37e6c91a; --accB-br:#37e6c942;
  --gain:#2fd6a6; --gain-soft:#2fd6a61f; --amber:#f0b23e; --amber-soft:#f0b23e24; --danger:#ff5c6c; --danger-soft:#ff5c6c1f;
  --chart:#9b82ff; --chart-line:#232b39;
  --grad:linear-gradient(115deg,#7c5cff,#37e6c9);
  --shadow:0 24px 60px -20px rgba(0,0,0,.55); --shadow-lg:0 34px 80px -26px rgba(0,0,0,.7);
  --rc-common:#9a9aa1; --rc-uncommon:#2fd6a6; --rc-rare:#5b7ef5; --rc-epic:#9b82ff; --rc-grail:#f0b23e;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#060b14; --panel:#151a22; --panel2:#1a2029; --panel3:#111723; --hover:#202734;
  --border:#252d3a; --border2:#1f2632;
  --text:#f4f7fb; --muted:#a2a2a8; --faint:#76767e;
  --acc:#7c5cff; --acc-h:#8f74ff; --acc-soft:#7c5cff1f; --acc-br:#7c5cff4d;
  --accB:#37e6c9; --accB-soft:#37e6c91a; --accB-br:#37e6c942;
  --gain:#2fd6a6; --gain-soft:#2fd6a61f; --amber:#f0b23e; --amber-soft:#f0b23e24; --danger:#ff5c6c; --danger-soft:#ff5c6c1f;
  --chart:#9b82ff; --chart-line:#232b39;
  --grad:linear-gradient(115deg,#7c5cff,#37e6c9);
  --shadow:0 24px 60px -20px rgba(0,0,0,.55); --shadow-lg:0 34px 80px -26px rgba(0,0,0,.7);
  --rc-common:#9a9aa1; --rc-uncommon:#2fd6a6; --rc-rare:#5b7ef5; --rc-epic:#9b82ff; --rc-grail:#f0b23e;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#fafafa; --panel:#ffffff; --panel2:#f5f5f4; --panel3:#efefee; --hover:#f1f1f0;
  --border:#e4e4e2; --border2:#eeeeec;
  --text:#0a0a0a; --muted:#57575a; --faint:#8f8f94;
  --acc:#6b4aef; --acc-h:#5a39dd; --acc-soft:#6b4aef16; --acc-br:#6b4aef38;
  --accB:#0f9d8a; --accB-soft:#0f9d8a14; --accB-br:#0f9d8a36;
  --gain:#1ca87e; --gain-soft:#1ca87e16; --amber:#b07908; --amber-soft:#b0790816; --danger:#d64556; --danger-soft:#d6455614;
  --chart:#6b4aef; --chart-line:#ececea;
  --grad:linear-gradient(115deg,#6b4aef,#0f9d8a);
  --shadow:0 18px 44px -18px rgba(12,19,34,.16); --shadow-lg:0 30px 70px -24px rgba(12,19,34,.3);
  --rc-common:#7d8698; --rc-uncommon:#1ca87e; --rc-rare:#3d63f3; --rc-epic:#6b4aef; --rc-grail:#b07908;
  color-scheme:light;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ff-b);font-size:14.5px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .25s ease,color .25s ease}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit}
input,select{font-family:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.wrap{max-width:none;margin:0 auto;padding:0 42px}
.mono{font-family:var(--mono)}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono)}
.cimg{display:block;border-radius:5px}

/* ---------- type ---------- */
.kick{font:700 10.5px/1 var(--ff-b);letter-spacing:.17em;text-transform:uppercase;color:var(--acc)}
.kick.teal{color:var(--accB)}
.kick.vio{color:var(--acc)}
.kick.amber{color:var(--amber)}
.h1{font-family:var(--ff-d);font-size:clamp(32px,4.4vw,52px);line-height:1.05;font-weight:700;letter-spacing:-.032em;margin:14px 0 18px;text-wrap:balance}
.h2{font-family:var(--ff-d);font-size:clamp(22px,2.8vw,31px);line-height:1.14;font-weight:700;letter-spacing:-.018em;margin:10px 0 8px;text-wrap:balance}
.h3{font-family:var(--ff-d);font-size:17.5px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
.sub{font-size:15.5px;color:var(--muted);max-width:58ch;margin:0 0 26px}
.p{color:var(--muted);max-width:62ch}
.small{font-size:12px;color:var(--faint)}
.gradText{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons / chips / tags ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--border);
  background:var(--panel2);color:var(--text);border-radius:999px;padding:10px 19px;font:600 13.5px var(--ff-b);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);border-color:var(--faint)}
.btn:active{transform:translateY(0)}
.btn.acc{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.acc:hover{background:var(--acc-h);border-color:var(--acc-h);box-shadow:0 10px 26px -10px var(--acc)}
.btn.grad{background:var(--grad);border:none;color:#fff;padding:11px 20px}
.btn.grad:hover{box-shadow:0 12px 30px -10px var(--acc);filter:brightness(1.06)}
.btn.ghost{background:transparent}
.btn.soft{background:var(--acc-soft);border-color:var(--acc-br);color:var(--acc)}
.btn.gain{background:var(--gain-soft);border-color:transparent;color:var(--gain)}
.btn.ondark{background:#f4f7fb;color:#0c1322;border-color:#f4f7fb}
.btn.ghostDark{background:transparent;color:var(--stink);border-color:var(--stghair)}
.btn.ghostDark:hover{border-color:var(--stink2)}
.btn.lg{padding:14px 28px;font-size:15px}
.btn.sm{padding:6.5px 13px;font-size:12px}
.btn.wide{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:11.5px;font-weight:600;
  background:var(--panel);border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accB);flex:none}
.chip.acc{background:var(--acc-soft);border-color:var(--acc-br);color:var(--acc)}
.chip.teal{background:var(--accB-soft);border-color:var(--accB-br);color:var(--accB)}
.chip.gain{background:var(--gain-soft);border-color:transparent;color:var(--gain)}
.chip.amber{background:var(--amber-soft);border-color:transparent;color:var(--amber)}
.chip.bad{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.chip.dark{background:rgba(244,247,251,.07);border-color:var(--stghair);color:var(--stink)}
.tag{font:600 10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;border-radius:5px;padding:4px 7px;background:var(--panel2);border:1px solid var(--border)}
/* 0830 — line-1 grade/finish pills (pillsGF). Scale with their text but capped
   at 12.5px so they stay a small badge next to a big name (asset <h1>), and never
   drop below 10px in tiny mono captions. .mp-g = grade (brighter), .mp-f = finish
   (accent). Rarity is plain text (raritySuffix), not a pill. */
.mp{display:inline-flex;align-items:center;font-family:var(--ff-b);font-size:clamp(10px,.78em,12.5px);font-weight:700;line-height:1.3;letter-spacing:.01em;text-transform:none;border-radius:999px;padding:1px 8px;vertical-align:middle;white-space:nowrap;background:var(--panel2);border:1px solid var(--border);color:var(--muted)}
.mp+.mp{margin-left:4px}
.clNum{color:var(--faint);font-weight:600}
.mp-g{color:var(--text)}
.mp-f{background:var(--accB-soft);color:var(--accB);border-color:var(--accB-br)}
.t-common{color:var(--rc-common)}
.t-uncommon{color:var(--rc-uncommon)}
.t-rare{color:var(--rc-rare)}
.t-epic{color:var(--rc-epic)}
.t-grail{color:var(--rc-grail);border-color:var(--amber-soft);background:linear-gradient(100deg,var(--amber-soft),transparent)}
.onstage .tag{background:rgba(244,247,251,.06);border-color:var(--stghair)}
.onstage .t-common{color:#b9c2cf}.onstage .t-uncommon{color:#2fd6a6}.onstage .t-rare{color:#7d9bff}.onstage .t-epic{color:#a78bfa}.onstage .t-grail{color:#f0b23e}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav-in{display:flex;align-items:center;gap:13px;height:70px}
.nav-in .logo{margin-right:8px}
.logo{display:flex;align-items:center;gap:10px}
.lgMark{width:34px;height:auto;flex:none;display:block} /* the real brand mark (logo-img-250.png) */
/* R22: the FULL logo (mark + wordmark image) everywhere there is room; the
   drawn wordmark span retires. Mobile keeps the compact icon mark. */
@media (min-width:481px){
  .logo .lgMark{content:url("/brand/logo-1000.png");width:148px;max-height:40px;object-fit:contain}
  .logo .lgType{display:none}
  .aside .logo .lgMark{width:132px}
}
.lgType{font-family:var(--ff-d);font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.lgType b{font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.links{display:flex;gap:2px;margin-left:6px}
.navlink{padding:8px 13px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--muted)}
.navlink:hover{color:var(--text);background:var(--hover)}
.navlink.on{color:var(--text);background:var(--panel);box-shadow:inset 0 0 0 1px var(--border)}
.navSp{flex:1}
.balchip{display:flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:5px 6px 5px 14px}
.balchip .amt{font:650 13px var(--mono)}
.balchip .plus{width:27px;height:27px;border-radius:50%;background:var(--grad);color:#fff;border:none;font-size:15px;line-height:1;display:grid;place-items:center}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font:700 11.5px var(--ff-b);border:none}
.themeBtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--panel);display:grid;place-items:center;font-size:15px}
.themeBtn:hover{border-color:var(--faint)}

/* ---------- screens / sections ---------- */
.screen{display:none}
.screen.on{display:block;animation:screenIn .35s ease}
@keyframes screenIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sect{padding-block:64px}
.sect.tight{padding-block:38px}
.sectHead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}

/* ---------- vault-room stage (always dark navy) ---------- */
.room{position:relative;border-radius:24px;background:
  radial-gradient(85% 60% at 50% 6%,rgba(124,92,255,.22),transparent 58%),
  radial-gradient(110% 80% at 85% 100%,rgba(55,230,201,.10),transparent 55%),
  linear-gradient(180deg,var(--stage2),var(--stage) 72%);
  box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(244,247,251,.07);overflow:hidden;color:var(--stink)}
.room .floor{position:absolute;left:8%;right:8%;bottom:8%;height:34px;border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),transparent 70%);filter:blur(6px)}
/* 0807v: the detail hero + rip room are frameless scenes on the pack backdrop
   now — the floor ellipse read as a dark smudge there (Aron circled it) */
.dRoom .floor,.ripRoom .floor{display:none}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.02fr .98fr;gap:54px;align-items:center;padding-block:60px 40px}
.heroChips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.heroCtas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.heroMeta{display:flex;gap:26px;margin-top:32px;padding-top:22px;border-top:1px solid var(--border)}
.hm .v{font:700 19px var(--mono);letter-spacing:-.02em}
.hm .k{font-size:11.5px;color:var(--faint);margin-top:2px}
.heroRoom{min-height:470px;display:grid;place-items:center;padding:44px 20px 56px}
.float{position:absolute;z-index:5;animation:floaty 5.5s ease-in-out infinite}
.float.f1{top:24px;left:24px}
.float.f2{top:24px;right:24px;animation-delay:-1.8s}
.float.f3{bottom:22px;left:50%;transform:translateX(-50%);animation-delay:-3.2s}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* ---------- pack render ---------- */
.p3d{perspective:1600px}
.spinner{transform-style:preserve-3d;position:relative;animation:idlespin 10s linear infinite}
.p3d.still .spinner{animation:none;transform:rotateX(5deg)}
.p3d.tilt .spinner{animation:none;transform:rotateY(-14deg) rotateX(6deg)}
@keyframes idlespin{0%{transform:rotateX(7deg) rotateY(0)}25%{transform:rotateX(3.5deg) rotateY(90deg)}50%{transform:rotateX(7deg) rotateY(180deg)}75%{transform:rotateX(10.5deg) rotateY(270deg)}100%{transform:rotateX(7deg) rotateY(360deg)}}
.pack{--pd:calc(var(--pw,230px)*0.05);--R:calc(var(--pw,230px)*2.067);--bulge:calc(var(--pw,230px)*0.058);
  position:relative;width:var(--pw,230px);aspect-ratio:230/330;transform-style:preserve-3d;filter:drop-shadow(0 36px 36px rgba(0,0,0,.5))}
/* curved pouch volume: each side is 9 slices on a shallow arc (±12.4°) — real convex geometry */
.curve{position:absolute;inset:0;transform-style:preserve-3d}
.curve.f{transform:translateZ(calc(var(--R)*-0.9703))}
.curve.b{transform:rotateY(180deg) translateZ(calc(var(--R)*-0.9703))}
.csl{position:absolute;left:50%;top:0;height:100%;width:11.7%;margin-left:-5.85%;
  transform:rotateY(var(--th)) translateZ(var(--R));backface-visibility:hidden;
  background:var(--pbg,linear-gradient(165deg,#141b2e,#080c16));background-size:var(--pw,230px) 100%;background-repeat:no-repeat}
.csl::after{content:"";position:absolute;inset:0;background:var(--tint,transparent)} /* curvature shading — no filter (3D-safe) */
/* content overlay faces float just above the bulge apex — no mask/clip here, ever (breaks 3D) */
.face{position:absolute;inset:0;border-radius:18px/30px;overflow:hidden;backface-visibility:hidden;transform:translateZ(var(--bulge));
  background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.face.solid{background:var(--pbg,linear-gradient(165deg,#141b2e,#080c16));box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 -30px 50px -30px rgba(0,0,0,.65)}
/* crease fans radiating from the crimps — banded via background-size, no mask */
.face::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-repeat:no-repeat;
  background-image:
  conic-gradient(from 158deg at 50% -14%,transparent 0 4deg,rgba(255,255,255,.11) 4deg 5.5deg,transparent 5.5deg 11deg,rgba(0,0,0,.18) 11deg 12.5deg,transparent 12.5deg 17deg,rgba(255,255,255,.08) 17deg 18deg,transparent 18deg 25deg,rgba(0,0,0,.15) 25deg 26deg,transparent 26deg 32deg,rgba(255,255,255,.10) 32deg 33.5deg,transparent 33.5deg 40deg,rgba(0,0,0,.14) 40deg 41deg,transparent 41deg 48deg),
  conic-gradient(from -24deg at 50% 114%,transparent 0 5deg,rgba(255,255,255,.09) 5deg 6.5deg,transparent 6.5deg 12deg,rgba(0,0,0,.16) 12deg 13.5deg,transparent 13.5deg 19deg,rgba(255,255,255,.08) 19deg 20deg,transparent 20deg 27deg,rgba(0,0,0,.14) 27deg 28deg,transparent 28deg 35deg,rgba(255,255,255,.09) 35deg 36deg,transparent 36deg 44deg);
  background-size:100% 34%,100% 34%;background-position:top,bottom}
/* pouch body: cylindrical bulge, vacuum-dark sides, pinch shadows + seal lines.
   Silhouette is painted (corner scoops melt into the stage) — clip-path breaks 3D backface in Chromium. */
.face::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
  radial-gradient(30% 16% at 0% 0%,rgba(2,5,10,.72),transparent 68%),
  radial-gradient(30% 16% at 100% 0%,rgba(2,5,10,.72),transparent 68%),
  radial-gradient(30% 16% at 0% 100%,rgba(2,5,10,.72),transparent 68%),
  radial-gradient(30% 16% at 100% 100%,rgba(2,5,10,.72),transparent 68%),
  radial-gradient(130% 72% at 50% 42%,rgba(255,255,255,.15),transparent 56%),
  linear-gradient(90deg,rgba(0,0,0,.52) 0%,rgba(0,0,0,.17) 8%,transparent 20% 80%,rgba(0,0,0,.17) 92%,rgba(0,0,0,.52) 100%),
  linear-gradient(90deg,transparent 33%,rgba(255,255,255,.07) 44%,rgba(255,255,255,.17) 50%,rgba(255,255,255,.07) 56%,transparent 67%),
  linear-gradient(180deg,rgba(0,0,0,.44) 0%,transparent 10% 90%,rgba(0,0,0,.48) 100%),
  linear-gradient(180deg,transparent 4.4%,rgba(255,255,255,.13) 5.4%,transparent 7%),
  linear-gradient(0deg,transparent 4.4%,rgba(255,255,255,.10) 5.4%,transparent 7%)}
.face.back{transform:rotateY(180deg) translateZ(var(--bulge))}
.face.back .pk-body,.face.back .notch{transform:scaleX(-1)} /* un-mirror text on the back face */
.pedge{position:absolute;top:8px;bottom:8px;width:calc(var(--pd)*2);
  background:repeating-linear-gradient(180deg,#1b2740 0 3px,#0b1220 3px 6px);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.07)}
.pedge.l{left:calc(var(--pd)*-1);transform:rotateY(90deg)}
.pedge.r{right:calc(var(--pd)*-1);transform:rotateY(90deg)}
.crimp{position:absolute;left:0;right:0;height:15px;z-index:4;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.20) 0 2px,rgba(0,0,0,.3) 2px 5px),linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.16))}
.crimp.t{top:0;border-bottom:1px solid rgba(0,0,0,.45)}
.crimp.b{bottom:0;border-top:1px solid rgba(0,0,0,.45)}
.notch{position:absolute;top:19px;left:0;right:0;z-index:4;display:flex;justify-content:center;
  font:600 6.5px/1 var(--mono);letter-spacing:.24em;color:rgba(255,255,255,.38)}
.pk-em{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ff-d);font-weight:700;
  font-size:140px;color:rgba(255,255,255,.09);text-shadow:0 0 60px var(--pglow,rgba(124,92,255,.55));user-select:none}
.pk-orb{position:absolute;left:50%;top:44%;width:120px;height:120px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle at 38% 34%,rgba(255,255,255,.5),transparent 42%),radial-gradient(circle,var(--pglow,#7c5cff) 0%,transparent 68%);
  opacity:.85;filter:blur(1px)}
.pk-body{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:30px 14px 26px;z-index:3;text-align:center}
.pk-brand{font:700 8.5px var(--mono);letter-spacing:.34em;color:rgba(255,255,255,.62)}
.pk-mid{margin:auto 0;translate:0 26px}
.pk-name{font-family:var(--ff-d);font-weight:700;font-size:22px;line-height:1.08;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55)}
.pk-sub{font:600 8.5px var(--mono);letter-spacing:.24em;color:rgba(255,255,255,.55);margin-top:7px;text-transform:uppercase}
.pk-tier{font:700 8.5px var(--mono);letter-spacing:.18em;color:#080c16;background:linear-gradient(100deg,#c9bfff,#37e6c9);border-radius:4px;padding:4px 8px}
.sheen{position:absolute;inset:0;z-index:5;background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.38) 50%,transparent 62%);
  transform:translateX(-70%);animation:sheen 5.6s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,58%{transform:translateX(-80%)}88%,100%{transform:translateX(80%)}}
.pv-ember{--pbg:radial-gradient(120% 70% at 75% 6%,rgba(255,116,42,.42),transparent 52%),radial-gradient(90% 60% at 20% 100%,rgba(255,64,0,.2),transparent 60%),linear-gradient(165deg,#241108,#0c0805 70%);--pglow:#FF7A2E}
.pv-vintage{--pbg:radial-gradient(110% 70% at 70% 0%,rgba(240,178,62,.44),transparent 55%),linear-gradient(165deg,#1e1707,#0b0904 70%);--pglow:#f0b23e}
.pv-skies{--pbg:radial-gradient(120% 70% at 70% 4%,rgba(56,189,248,.5),transparent 55%),linear-gradient(165deg,#0a1a2e,#060d18 70%);--pglow:#38bdf8}
.pv-mew{--pbg:radial-gradient(110% 66% at 72% 4%,rgba(255,105,180,.4),transparent 52%),linear-gradient(165deg,#1d0f1e,#0c070d 70%);--pglow:#F472B6}
.pv-violet{--pbg:radial-gradient(120% 70% at 72% 4%,rgba(124,92,255,.5),transparent 55%),linear-gradient(165deg,#140e2c,#090713 70%);--pglow:#7c5cff}
.pv-obsidian{--pbg:radial-gradient(120% 66% at 70% 2%,rgba(55,230,201,.34),transparent 54%),linear-gradient(165deg,#0b1a22,#060b14 70%);--pglow:#37e6c9}
.pv-grid{--pbg:radial-gradient(120% 70% at 74% 4%,rgba(240,178,62,.32),transparent 52%),linear-gradient(165deg,#161307,#0b0a05 70%);--pglow:#f0b23e}
.pv-mtg{--pbg:radial-gradient(120% 70% at 70% 4%,rgba(217,119,6,.42),transparent 55%),linear-gradient(165deg,#1c130a,#0c0805 70%);--pglow:#E8A33D}
/* tear pieces */
.piece{position:absolute;left:0;right:0;overflow:hidden;z-index:6}
.piece .pin{position:absolute;left:0;width:100%}
/* tear runs exactly on the TEAR HERE perforation line (~10% down, just under the crimp) */
.piece.ptop{top:0;height:10.8%;clip-path:polygon(0 0,100% 0,100% 55%,94% 88%,88% 55%,82% 92%,76% 58%,70% 95%,64% 60%,58% 92%,52% 55%,46% 90%,40% 58%,34% 94%,28% 60%,22% 92%,16% 55%,10% 90%,5% 60%,0 88%)}
.piece.ptop .pin{top:0;height:925.9%}
.piece.pbody{top:10.3%;bottom:0;clip-path:polygon(0 2.6%,4% .4%,9% 2.9%,15% .3%,21% 2.8%,27% .5%,33% 3%,39% .4%,45% 2.7%,51% .3%,57% 2.9%,63% .5%,69% 3%,75% .4%,81% 2.8%,87% .3%,93% 2.7%,100% .5%,100% 100%,0 100%)}
.piece.pbody .pin{bottom:0;height:111.5%}
.packShell{position:absolute;inset:0}

/* ---------- ticker ---------- */
.tickWrap{border-block:1px solid var(--border);background:var(--panel);overflow:hidden}
.ticker{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7% 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7% 93%,transparent)}
.tk{display:flex;gap:40px;width:max-content;padding:9px 0;animation:tick 46s linear infinite}
.ticker:hover .tk{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tki{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted);white-space:nowrap}
.tki.lg{font-size:13.5px;gap:11px;padding:2px 0}
.tki.lg:hover b{text-decoration:underline}
.tki .num{color:var(--text);font-weight:650;font-size:12px}
.tki .rd{width:7px;height:7px;border-radius:50%;flex:none}
.tki .tkImg{width:20px;height:28px;object-fit:cover;border-radius:3px;border:1px solid var(--border)}

/* ---------- pack tiles ---------- */
.packGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:20px}
.packTile{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s;cursor:pointer;text-align:left;padding:0;display:flex;flex-direction:column}
/* 0807z5: NO hover shadows/lifts on tiles (Aron) — a border tint is enough */
.packTile:hover{border-color:var(--acc-br)}
.ptStage{position:relative;background:radial-gradient(120% 90% at 50% 0%,var(--stage2),var(--stage) 78%);display:grid;place-items:center;padding:28px 0 22px;overflow:hidden}
.ptStage .glow{position:absolute;left:50%;top:14%;width:220px;height:150px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(50% 50% at 50% 50%,var(--pglow,#7c5cff) 0,transparent 70%);opacity:.3;filter:blur(14px)}
.ptStage .pack{--pw:130px;filter:drop-shadow(0 18px 18px rgba(0,0,0,.5))}
.ptStage .pk-name{font-size:13px}.ptStage .pk-brand{font-size:5.5px;letter-spacing:.28em}.ptStage .pk-sub{font-size:5.5px;margin-top:4px}
.ptStage .pk-tier{font-size:5.5px;padding:3px 6px}.ptStage .pk-em{font-size:82px}.ptStage .pk-orb{width:70px;height:70px}
.ptStage .crimp{height:9px}.ptStage .notch{display:none}.ptStage .pk-body{padding:17px 10px 14px}.ptStage .pk-mid{translate:0 14px}
.ptKind{position:absolute;top:13px;left:13px;z-index:5}
.ptBody{padding:16px 17px 17px;display:flex;flex-direction:column;gap:10px;flex:1}
.ptTitle{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ptName{font-family:var(--ff-d);font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.ptPrice{font:700 15.5px var(--mono);letter-spacing:-.02em}
.ptOdds{display:flex;gap:5px;flex-wrap:wrap}
.ptFoot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;border-top:1px solid var(--border2)}
.meter{height:5px;border-radius:3px;background:var(--panel3);overflow:hidden;flex:1;max-width:110px}
.meter i{display:block;height:100%;border-radius:3px;background:var(--grad)}
.meter.low i{background:var(--amber)}
.filtRow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fchip{border:1px solid var(--border);background:var(--panel);border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;color:var(--muted)}
.fchip:hover{border-color:var(--faint);color:var(--text)}
.fchip.on{background:var(--acc);border-color:var(--acc);color:#fff}

/* ---------- how / trust ---------- */
.howGrid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);overflow:hidden}
.how{padding:24px 22px;border-left:1px solid var(--border2)}
.how:first-child{border-left:0}
.how .n{font:700 10.5px var(--mono);color:var(--acc);letter-spacing:.12em}
.how .t{font-family:var(--ff-d);font-weight:600;font-size:15.5px;margin:9px 0 6px}
.how .d{font-size:13px;color:var(--muted)}

/* ---------- odds / receipts ---------- */
.oddsTbl{width:100%;border-collapse:collapse}
.oddsTbl td{padding:9px 0;border-top:1px solid var(--border2);font-size:13px;vertical-align:middle}
.oddsTbl tr:first-child td{border-top:0}
.oddsTbl .pb{width:38%;padding-inline:16px}
.pbar{height:6px;border-radius:3px;background:var(--panel3);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:3px}
.oddsTbl .pct{font:650 12.5px var(--mono);text-align:right;white-space:nowrap}
.oddsTbl .rng{font:500 12px var(--mono);color:var(--muted);text-align:right;white-space:nowrap}
.rcpt{background:var(--panel3);border:1px dashed var(--border);border-radius:var(--radius-sm);padding:15px 17px;font:12px/1.9 var(--mono);color:var(--muted)}
.rcpt .row{display:flex;justify-content:space-between;gap:18px}
.rcpt .row b{color:var(--text);font-weight:650;text-align:right}
.rcpt .ok{color:var(--gain);font-weight:700}
/* a verifier that paints a FAILED check in the pass colour is worse than none */
.rcpt .ok.no,.rcpt.dark .ok.no{color:var(--danger)}
.rcpt.dark{background:rgba(244,247,251,.05);border-color:rgba(244,247,251,.18);color:var(--stink2)}
.rcpt.dark .row b{color:var(--stink)}
.rcpt.dark .ok{color:#2fd6a6}
.hash{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px;display:inline-block;vertical-align:bottom}

/* ---------- pack detail ---------- */
.detail{display:grid;grid-template-columns:470px 1fr;gap:48px;align-items:start;padding:42px 0 20px}
.dRoom{min-height:510px;display:grid;place-items:center;padding:40px 20px 60px;position:sticky;top:96px}
.dPrice{font:700 28px var(--mono);letter-spacing:-.03em}
.priceRow{display:flex;align-items:center;gap:16px;margin:26px 0 6px} /* 0807z6: air after title+blurb */
.qty{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;background:var(--panel)}
.qty button{width:36px;height:38px;border:0;background:none;font-size:16px;color:var(--muted)}
.qty span{min-width:26px;text-align:center;font:650 13.5px var(--mono)}
/* 0807: 1×-5× quantity chips (courtyard-style) */
.qtyChips{display:inline-flex;gap:5px;padding:4px;border:1px solid var(--border);border-radius:999px;background:var(--panel)}
.qtyChips button{min-width:38px;height:32px;border:0;border-radius:999px;background:none;color:var(--muted);font:700 12.5px var(--ff-b);cursor:pointer;transition:background .15s,color .15s}
.qtyChips button:hover{color:var(--text)}
.qtyChips button.on{background:var(--grad);color:#fff;box-shadow:0 6px 16px -8px rgba(124,92,255,.7)}
/* 0807: the detail hero fans out N static packs when qty > 1.
   --spread is a registered property so hovering the fan eases it wider. */
@property --spread{syntax:'<number>';inherits:true;initial-value:1}
.packFan{position:relative;width:250px;height:352px;margin:0 auto;--spread:1;transition:--spread .35s ease}
.packFan:hover{--spread:1.35}
.packFan .fanP{position:absolute;left:2px;top:0;width:246px;height:344px;object-fit:contain;
  transform-origin:50% 96%;
  transform:rotate(calc((var(--i) - (var(--n) - 1)/2)*8deg*var(--spread))) translateX(calc((var(--i) - (var(--n) - 1)/2)*17px*var(--spread)));
  filter:drop-shadow(-8px 18px 26px rgba(0,0,0,.6));
  animation:fanIn .4s cubic-bezier(.2,.7,.3,1.15) both;animation-delay:calc(var(--i)*55ms)}
.packFan .fanP.ph{border-radius:16px;width:222px;height:326px;left:14px;top:8px}
.packFan .fanP.ph{background:linear-gradient(100deg,#0c1120 38%,#141b30 50%,#0c1120 62%) 0 0/220% 100%;animation:fanIn .4s both,faceShimmer 1.15s linear infinite}
@keyframes fanIn{0%{opacity:0;transform:rotate(0deg) translateX(0) translateY(14px)}100%{opacity:1;transform:rotate(calc((var(--i) - (var(--n) - 1)/2)*8deg*var(--spread))) translateX(calc((var(--i) - (var(--n) - 1)/2)*17px*var(--spread))) translateY(0)}}
.buyRow{display:flex;gap:10px;margin:18px 0 22px;flex-wrap:wrap} /* 0807z6: air after the buy buttons */
/* 0807z6: on desktop the title block starts where the pack RENDER begins —
   the chips row floats at the top, then a deliberate gap */
@media (min-width:1081px){.dInfo #dName{margin-top:56px !important}}
/* 0807z6: trust pills span the full width — every pill grows evenly */
.trustRow{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 8px}
.trustRow .chip{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.evNote{font-size:12px;color:var(--faint);max-width:52ch}
.dCard{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;margin-top:20px;box-shadow:var(--shadow)}
.dCard h4{margin:0 0 4px;font:600 14.5px var(--ff-d);display:flex;justify-content:space-between;align-items:center;gap:10px}
.dCard h4 .small{font-weight:500}
.poolStrip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:13px}
.sub.wide{max-width:none}
/* shop: per-game grouping */
.packGrid.asGroups{display:block}
.pgHead{display:flex;align-items:baseline;gap:12px;margin:26px 0 14px}
.shopGroup:first-child .pgHead{margin-top:0}
.shopGroup .packGrid{margin-bottom:6px}

/* detail restructure: full-width blurb/EV, odds dropdown, tier-coloured chases */
.dInfo .p.wide,.evNote.wide{max-width:none}
.oddsDrop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 18px;width:min(440px,88vw);display:none;box-shadow:0 24px 60px -18px rgba(0,0,0,.55)}
.oddsDrop.open{display:block}
.poolStrip.big{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.poolC.big .a{background:#0d1117}
.poolC.big .a::after{content:none}
.poolC.big .n{font-size:11px;padding:8px 9px 2px}
.poolC .pMeta{display:flex;align-items:center;gap:6px;padding:4px 9px 9px}
.poolC .pMeta .num{font-size:12.5px}
.poolC.t-grail{border-color:rgba(240,178,62,.55);box-shadow:0 0 22px -8px rgba(240,178,62,.45)}
.poolC.t-epic{border-color:rgba(168,85,247,.5);box-shadow:0 0 20px -8px rgba(168,85,247,.4)}
.poolC.t-rare{border-color:rgba(56,189,248,.45)}
.poolC.t-uncommon{border-color:rgba(52,211,153,.4)}
.poolC{border:1px solid var(--border);border-radius:var(--r3);overflow:hidden;background:var(--panel);transition:transform .15s,border-color .15s}
.poolC:hover{border-color:var(--acc-br)}
.poolC .a{aspect-ratio:63/88;position:relative;background:#0d1117}
.poolC .a img{width:100%;height:100%;object-fit:cover}
.poolC .a img.slabIm{object-fit:contain;padding:5px;background:#0d1117}
.poolC .a::after{content:attr(data-g);position:absolute;inset:auto 0 0 0;padding:2.5px 5px;font:700 8px var(--mono);color:#fff;background:rgba(6,11,20,.72);letter-spacing:.05em}
.poolC .n{padding:5px 7px;font:600 9.5px var(--ff-b);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- card art fallback (no image) ---------- */
.cardArt{position:relative;overflow:hidden;background:
  radial-gradient(90% 60% at 70% 12%,rgba(255,255,255,.3),transparent 55%),
  linear-gradient(158deg,hsl(var(--ch,255) 55% 50%),hsl(calc(var(--ch,255) + 42) 52% 28%) 78%)}
.cardArt .gl{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ff-d);font-weight:700;color:rgba(255,255,255,.5)}

/* ---------- slab / raw renders ---------- */
.slab{width:var(--cw,250px);aspect-ratio:250/365;background:linear-gradient(172deg,#fdfdfd,#e6e9ee 80%);border-radius:14px;
  padding:11px;display:flex;flex-direction:column;gap:9px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 2px 4px rgba(255,255,255,.9),0 26px 48px -20px rgba(0,0,0,.6)}
.slabLab{background:linear-gradient(120deg,#12161d,#1f2733);border-radius:7px;padding:7px 11px;display:flex;justify-content:space-between;align-items:center;color:#fff;gap:8px}
.slabLab .cn{font:600 8px/1.5 var(--mono);letter-spacing:.05em;color:#aeb8c6;text-transform:uppercase;overflow:hidden}
.slabLab .cn b{display:block;color:#fff;font-size:9.5px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slabLab .g{font:800 20px var(--mono);letter-spacing:-.04em;flex:none}
.slab.gem .slabLab{background:linear-gradient(120deg,#2a2108,#4a3a10);box-shadow:inset 0 0 0 1px #f0b23e}
.slab.gem .g{color:#f3d375}
.slabArt{flex:1;border-radius:7px;background:#0d1117;overflow:hidden;display:grid;place-items:center}
.slabArt img{width:100%;height:100%;object-fit:contain}
/* real slab photos (eBay listings) — the case is IN the photo, no chrome */
.slabPhoto{width:calc(var(--cw,250px)*1.12);max-width:78vw;position:relative}
.slabPhoto .cimg{width:100%;height:auto;max-height:64vh;object-fit:contain;display:block;border-radius:12px;filter:drop-shadow(0 22px 44px rgba(0,0,0,.55))}
.slabPhoto.gem .cimg{filter:drop-shadow(0 22px 44px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(240,178,62,.28))}
/* 0810n (Aron: "Slabs on marketplace dont have full picture"). `cover` filled a
   fixed 125x175 box by CROPPING, and a graded slab is taller and narrower than
   that — so the label at the top and the grade at the bottom, the two things a
   buyer is actually looking for, were the parts cut off. `contain` shows the
   whole slab; the box keeps its footprint so the grid stays aligned. */
.slabPhotoM{width:125px;height:175px;border-radius:8px;overflow:hidden;background:#0d1117;box-shadow:0 12px 22px -10px rgba(0,0,0,.55);display:grid;place-items:center}
.slabPhotoM .cimg{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.rawCard{width:var(--cw,240px);aspect-ratio:63/88;border-radius:12px;overflow:hidden;position:relative;background:#0d1117;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 26px 48px -20px rgba(0,0,0,.6)}
.rawCard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.holoWrap{position:relative;transform-style:preserve-3d;transition:transform .12s ease-out;will-change:transform}
.holo{position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:overlay;opacity:.85;
  background:radial-gradient(circle at var(--gx,55%) var(--gy,30%),rgba(255,255,255,.7),transparent 34%),
  linear-gradient(118deg,rgba(255,0,132,.14),rgba(255,214,0,.12) 30%,rgba(0,255,178,.14) 55%,rgba(0,132,255,.14) 80%)}
.grailRing{position:relative;border-radius:18px;padding:4px;background:conic-gradient(from var(--ga,0deg),#f3d375,#f0b23e,#8a6620,#f3d375 60%,#f0b23e);animation:ringspin 4s linear infinite}
@keyframes ringspin{to{--ga:360deg}}
@property --ga{syntax:"<angle>";initial-value:0deg;inherits:false}

/* ---------- rip stage ---------- */
/* 0708: the rip stage fills the content window instead of a fixed 680px band */
/* 0807z2: the rip is EXACTLY one screen on desktop — no scrollbar */
.ripRoom{min-height:0;height:calc(100dvh - 128px);border-radius:26px;position:relative;display:flex;flex-direction:column;overflow:hidden}
/* 0807z9: the fixed-height stage CLIPPED the reveal on phones (result stack
   is taller than 100dvh — value/actions were unreachable, overflow:hidden ate
   them). Once the result is up the room grows with its content. */
@media (max-width:1080px){
  #ripStage.ph-done{height:auto;min-height:calc(100dvh - 128px);overflow:visible}
}
.ripHUD{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 24px;position:relative;z-index:20}
.ripHUD .mid{font:600 10.5px var(--mono);letter-spacing:.2em;color:var(--stink2);text-transform:uppercase}
.ripCenter{flex:1;display:grid;place-items:center;position:relative;padding:10px 20px}
.ripCenter>*{grid-area:1/1}
/* 0708: the flash whites out the WHOLE screen. The in-stage #flash is only a
   base layer; #flashFS is a body-level overlay (screen transitions put a
   transform on the stage's ancestors, so position:fixed inside it is trapped —
   the overlay lives on <body> instead and is triggered from ripSequence). */
/* 0807: the reveal is a coloured LIGHT BLOOM from the pack, not a full white-out.
   --flashC is set per rip from the pulled tier's glow (grail bursts gold, a
   common blooms soft blue) — the screen never goes 100% white. */
#flash{position:absolute;inset:0;z-index:60;opacity:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 44%,var(--flashC,#fff) 0%,transparent 70%)}
/* 0807z: epic/grail CHARGE — the tier glow swells behind the pack while the
   riser plays, ~1s before the burst (declared before ph-flash so the burst
   wins the moment both classes are on) */
.ph-charge #flash{animation:chargeA 1.3s ease-in forwards}
@keyframes chargeA{from{opacity:0}to{opacity:.38}}
.ph-flash #flash{animation:flashA .9s ease-out}
#flashFS{position:fixed;inset:0;z-index:400;opacity:0;pointer-events:none;
  background:
    radial-gradient(38% 30% at 50% 46%,rgba(255,255,255,.9) 0%,transparent 55%),
    radial-gradient(64% 52% at 50% 46%,var(--flashC,#fff) 0%,transparent 74%)}
#flashFS.on{animation:flashFSA .95s cubic-bezier(.2,.6,.3,1)}
@keyframes flashA{0%{opacity:0}18%{opacity:.8}100%{opacity:0}}
@keyframes flashFSA{0%{opacity:0;transform:scale(.55)}16%{opacity:.92;transform:scale(1)}52%{opacity:.5;transform:scale(1.14)}100%{opacity:0;transform:scale(1.3)}}
#ptWrap{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.pt{position:absolute;left:50%;top:46%;width:7px;height:11px;border-radius:2px;opacity:0;animation:ptFly .95s cubic-bezier(.14,.6,.35,1) forwards}
@keyframes ptFly{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--tr)) scale(.5)}}
.ripCta{position:relative;z-index:20;display:flex;flex-direction:column;align-items:center;gap:11px;padding:0 20px 32px}
.ripBtn{background:var(--grad);color:#fff;border:none;border-radius:999px;padding:16px 44px;font:700 15.5px var(--ff-b);
  box-shadow:0 0 0 7px rgba(124,92,255,.14),0 18px 44px -14px rgba(124,92,255,.65);transition:transform .15s ease,box-shadow .15s ease}
.ripBtn:hover{transform:translateY(-2px);box-shadow:0 0 0 9px rgba(124,92,255,.2),0 22px 50px -14px rgba(124,92,255,.75)}
/* 0807z2: sold-out on the rip page reads like the pack page — quiet, no CTA gradient */
.ripBtn.ripSold,.ripBtn.ripSold:hover{background:var(--panel);color:var(--muted);box-shadow:none;transform:none;border:1px solid var(--stghair);cursor:default}
.skipLn{background:none;border:none;color:var(--stink2);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.skipLn:hover{color:var(--stink)}
.ph-spin .spinner{animation:idlespin .5s linear infinite}
.ph-lock .spinner{animation:settle .75s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes settle{from{transform:rotateX(7deg) rotateY(112deg)}60%{transform:rotateX(6deg) rotateY(-9deg)}100%{transform:rotateX(5deg) rotateY(0)}}
.ph-tear #ripPackWrap{animation:shakeX .7s ease}
@keyframes shakeX{0%,100%{transform:translateX(0)}15%{transform:translateX(-5px) rotate(-.6deg)}35%{transform:translateX(4px) rotate(.5deg)}55%{transform:translateX(-4px) rotate(-.4deg)}75%{transform:translateX(3px)}}
.ph-tear .piece.ptop,.ph-flash .piece.ptop,.ph-reveal .piece.ptop,.ph-done .piece.ptop{animation:tearOff 1.5s cubic-bezier(.32,.6,.36,1) forwards}
@keyframes tearOff{0%{transform:translate(0,0) rotate(0)}18%{transform:translate(7px,-5px) rotate(1.8deg)}30%{transform:translate(4px,-3px) rotate(1deg)}46%{transform:translate(16px,-13px) rotate(4deg)}100%{transform:translate(210px,-120px) rotate(26deg);opacity:0}}
.ph-reveal .packShell,.ph-done .packShell{animation:dropAway .85s ease forwards}
@keyframes dropAway{to{transform:translateY(230px) rotate(5deg);opacity:0}}
#revealCard{opacity:0;transform:translateY(90px) scale(.6);z-index:12;position:relative}
.ph-reveal #revealCard,.ph-done #revealCard{animation:riseUp .95s cubic-bezier(.16,1.2,.3,1) forwards}
@keyframes riseUp{from{opacity:0;transform:translateY(90px) scale(.6)}to{opacity:1;transform:translateY(0) scale(1)}}
.rGlow{position:absolute;inset:-34%;z-index:-1;border-radius:50%;background:radial-gradient(circle,var(--rglow,rgba(124,92,255,.5)) 0%,transparent 62%);filter:blur(10px);animation:glowPulse 2.6s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.75;scale:1}50%{opacity:1;scale:1.07}}
/* 0807z3: pair-centred final state, ZERO layout jank — the grid holds both
   columns from the first frame, shifted right by half the panel width so the
   CARD reads centred while ripping; at ph-done the whole pair GLIDES to true
   centre (one smooth transform) as the panel fades in. */
.ripResult{display:grid;grid-template-columns:auto 360px;gap:0 46px;align-items:center;justify-content:center;
  transform:translateX(203px);transition:transform .6s cubic-bezier(.2,.8,.25,1) .15s}
#ripStage.ph-done .ripResult{transform:none}
.ripSpacer{display:none}
.resClip{overflow:hidden;min-width:0}
.resPanel{width:360px;opacity:0;translate:0 14px;transition:opacity .5s ease .45s,translate .5s ease .45s;color:var(--stink)}
.ph-done .resPanel{opacity:1;translate:0 0}
.resPanel .rn{font-family:var(--ff-d);font-weight:700;font-size:24px;letter-spacing:-.015em;line-height:1.14;margin:10px 0 3px;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* every long card title clamps at two lines with an ellipsis (R12) */
.clamp2,#dLastCard b,.topPull .n,.srcMeter b,.dropC .dn{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.resPanel .rs{font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--stink2)}
.resVal{display:flex;align-items:baseline;gap:10px;margin:15px 0 4px}
.resVal .v{font:700 29px var(--mono);letter-spacing:-.03em;color:#fff}
.resVal .k{font-size:11.5px;color:var(--stink2)}
.rvActions{display:grid;gap:9px;margin-top:17px}
.rvActions .btn{justify-content:space-between;width:100%}
.rvActions .btn .pr{font:650 12.5px var(--mono)}
.resFair{margin-top:15px;font:11px/1.8 var(--mono);color:var(--stink2)}
.resFair a{color:#37e6c9;text-decoration:underline;text-underline-offset:3px}
.againRow{display:flex;gap:10px;margin-top:13px}

/* ---------- marketplace ---------- */
.mktLayout{display:grid;grid-template-columns:232px 1fr;gap:34px;align-items:start;padding:36px 0}
.filters{position:sticky;top:96px;display:flex;flex-direction:column;gap:22px}
.fGroup .fTit{font:700 10.5px var(--ff-b);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:9px}
.fOpt{display:flex;align-items:center;gap:9px;padding:4.5px 0;font-size:13px;color:var(--muted);cursor:pointer}
.fOpt input{accent-color:var(--acc);width:15px;height:15px}
.fOpt .ct{margin-left:auto;font:500 10.5px var(--mono);color:var(--faint)}
/* 0810n (Aron: "Font size & colour of i agree should match our styling").
   `.age` was used by the signup consent rows in app.js and styled NOWHERE, so
   it fell back to the browser default: 16px, full-strength body colour, and
   louder than the fields above it. Same treatment as .fOpt, which is the
   equivalent control elsewhere. */
.age{display:flex;align-items:flex-start;gap:9px;font-size:12px;line-height:1.5;color:var(--muted);cursor:pointer}
.age input{accent-color:var(--acc);width:15px;height:15px;flex:none;margin-top:1px}
.age a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.age a:hover{color:var(--text)}
.mTop{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:999px;padding:8.5px 16px;min-width:250px;color:var(--faint)}
.search input{border:0;outline:0;background:none;font:inherit;color:var(--text);width:100%}
.sel{border:1px solid var(--border);background:var(--panel);border-radius:10px;padding:8.5px 12px;font:600 12.5px var(--ff-b);color:var(--muted)}
/* base text input — same family as .sel (date inputs get the dark native picker) */
.inp{border:1px solid var(--border);background:var(--panel);border-radius:10px;padding:9px 12px;
  font:500 12.5px var(--ff-b);color:var(--text);outline:none;color-scheme:dark}
.inp:focus{border-color:var(--acc-br)}
.inp::-webkit-calendar-picker-indicator{filter:invert(.7);cursor:pointer}
/* R25: quiet shimmer while a pack's generated face texture is being produced —
   the legacy CSS pack art never paints anymore */
@keyframes faceShimmer{0%{background-position:-160% 0}100%{background-position:260% 0}}
.face.facePending,.ptFacePh{background:linear-gradient(100deg,#0c1120 38%,#141b30 50%,#0c1120 62%) 0 0/220% 100%;
  animation:faceShimmer 1.15s linear infinite}
.ptFacePh{display:block;width:min(62%,150px);aspect-ratio:130/182;margin:14px auto 6px;border-radius:10px}

/* R25: grid ⇄ list view toggle (marketplace, vault — cardstand-style) */
.viewTog{display:inline-flex;border:1px solid var(--border);border-radius:9px;overflow:hidden;flex:none}
.viewTog button{background:var(--panel);border:0;color:var(--faint);padding:7.5px 10px;cursor:pointer;display:grid;place-items:center;line-height:0}
.viewTog button + button{border-left:1px solid var(--border)}
.viewTog button.on{background:var(--panel2);color:var(--text)}
/* R40: the S/M/L toggle reuses .viewTog, which is built for SVG icons
   (line-height:0). Text labels collapsed to a hairline and read as tiny next to
   every other control, so the text variant gets real metrics and the same type
   scale as .btn.sm. */
.viewTog.szTog button{font:800 12px var(--ff-b);line-height:1;padding:7px 0;min-width:34px;letter-spacing:.03em}
/* R41: the rip's slow-chain notice. Non-blocking by design — the spinning pack
   is the waiting state — but it now looks like the other chain waits instead of
   loose grey text on the backdrop. */
/* Matches the toast pill exactly — white ground, dark text — so a rip wait reads
   as the same kind of message as "Instant buyback: +€12 credited". */
/* Pinned to the VIEWPORT, not the document. In normal flow it landed at the
   bottom of a very tall rip screen — off-screen while you waited, which is the
   one moment it has to be visible. */
.chainWaitPill{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:240;
  display:flex;align-items:center;gap:10px;width:max-content;max-width:min(92vw,44ch);
  margin:0;padding:11px 18px 11px 14px;border-radius:999px;
  border:1px solid rgba(0,0,0,.06);background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.35);
  font:650 13px var(--ff-b);color:#0b1020;text-align:left;animation:cwIn .25s ease both}
.chainWaitPill .cwSpin{width:14px;height:14px;flex:0 0 14px;border-radius:50%;
  border:2px solid var(--acc);border-top-color:transparent;animation:spn .8s linear infinite}
.chainWaitPill .cwTxt{min-width:0}
@keyframes cwIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .chainWaitPill{animation:none}
  .chainWaitPill .cwSpin{animation-duration:2.4s}
}

/* R41: footer social marks. A quiet icon row that lifts on hover — the previous
   "YT" / "IG" text chips read as placeholders next to any other site's footer. */
#footSocial{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.socIcon{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  color:var(--faint);text-decoration:none;font:800 11px var(--ff-b);
  transition:color .15s ease,background .15s ease,transform .15s ease}
.socIcon:hover{color:var(--text);background:var(--panel2);transform:translateY(-1px)}
.socIcon:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.socIcon svg{display:block}

/* R41: custom deposit amount — matches the preset chips rather than looking like
   a form field bolted on underneath them. */
.depCustom{display:flex;align-items:center;gap:2px;margin-top:10px;padding:0 14px;
  border:1px solid var(--acc-br);border-radius:12px;background:var(--panel2);
  transition:border-color .15s ease}
.depCustom:focus-within{border-color:var(--acc)}
.depCustom .cur{font:800 17px var(--ff-b);color:var(--faint)}
.depCustom input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--text);
  font:800 17px var(--ff-b);padding:12px 4px}
.depCustom input::-webkit-outer-spin-button,
.depCustom input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.depCustom input[type=number]{-moz-appearance:textfield}
#depGo:disabled{opacity:.55;cursor:default}

/* R41: the audit page's two figure strips. Grid lives here rather than inline so
   a script that rewrites innerHTML cannot lose the layout — that is exactly how
   these ended up as a stacked column. */
#auditDeep,#auditRecon{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:center}
#auditDeep .num,#auditRecon .num{font-size:20px;font-weight:700}
@media (max-width:900px){
  #auditDeep,#auditRecon{grid-template-columns:1fr 1fr;gap:14px 18px}
  #auditDeep>*:last-child,#auditRecon>*:last-child{grid-column:1/-1;text-align:left!important}
}

/* R41: Issues — open count on the nav item, and the amber severity dot the
   issue cards use alongside the existing ok/bad ones. */
.nbadge{margin-left:auto;min-width:18px;height:18px;padding:0 5px;border-radius:99px;
  background:var(--danger);color:#fff;font:800 11px/18px var(--ff-b);text-align:center}
.sev.warn{background:var(--amber)}
#issuesRows .rcpt .row{padding:7px 0}
#issueLogRows td{vertical-align:top}

/* R40: admin resync — bottom-left, out of the way of the content column */
/* z-index must clear the sticky admin rail, which otherwise sits over it and
   swallows the click (the button looked fine and did nothing). */
/* Sits ABOVE the corner control already parked at bottom-left rather than on
   top of it. 68px = a ~44px control plus its 14px inset plus breathing room. */
#adminResync{position:fixed;left:14px;bottom:68px;z-index:400;display:none;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;border:1px solid var(--border);background:var(--panel2);
  color:var(--text);font:650 12.5px var(--ff-b);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .15s ease,border-color .15s ease}
#admin.on #adminResync{display:inline-flex}
#adminResync:hover{transform:translateY(-1px);border-color:var(--acc-br)}
#adminResync:disabled{opacity:.6;cursor:default;transform:none}
#adminResync .rsIco{font-size:14px;line-height:1;display:inline-block}
#adminResync.spin .rsIco{animation:spn .8s linear infinite}
@media (max-width:900px){ #adminResync{left:10px;bottom:64px;padding:8px 12px} #adminResync .rsTxt{display:none} }

/* R40: small brand marks on the deposit method row */
.payMark{display:inline-grid;place-items:center;min-width:26px;height:17px;border-radius:4px;color:#fff;
  font:800 8.5px var(--ff-b);letter-spacing:.02em;padding:0 4px;opacity:.92}
.mGrid.listMode{grid-template-columns:1fr;gap:8px}
.mGrid.listMode .mCard{display:flex;flex-direction:row;align-items:center;gap:14px;padding:9px 14px;text-align:left}
/* R41: the art wrapper kept its GRID-mode height (a full card aspect), so every
   list row was as tall as a card with the thumbnail floating in the space and
   the name pushed below it. Pin the height as well as the width, and stop any
   inherited aspect-ratio or min-height from reintroducing it. */
.mGrid.listMode .mArtWrap{width:46px;height:62px;flex:none;display:grid;place-items:center;
  aspect-ratio:auto;min-height:0;padding:0;overflow:hidden}
.mGrid.listMode .mArtWrap img,
.mGrid.listMode .mArtWrap>*{max-height:60px;max-width:46px;height:auto;width:auto;margin:0}
.mGrid.listMode .mCard{min-height:0}
.mGrid.listMode .mName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mGrid.listMode .mSet{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--faint)}
/* Below ~700px a five-column row cannot fit: keep art + name + price only. */
@media (max-width:700px){
  .mGrid.listMode .mSet{display:none}
  .mGrid.listMode .mCard{gap:10px;padding:8px 10px}
  .mGrid.listMode .fmv{display:none}
}
.mGrid.listMode .mName{margin:0;flex:1.1;min-width:0}
.mGrid.listMode .mSet{margin:0;flex:1.5;min-width:0}
.mGrid.listMode .mRow{margin:0 0 0 auto;display:inline-flex;gap:16px;align-items:center;flex:none}
/* R30: clean single-line list rows — name/sub truncate, price+actions pinned right */
.mGrid.listMode .vCard{display:flex;flex-direction:row;align-items:center;gap:12px;padding:10px 14px;flex-wrap:nowrap;text-align:left}
.mGrid.listMode .vCard .vTick{position:static;flex:none}
/* Vault rows share listMode and had the same inherited-height fault. */
.mGrid.listMode .vIm{width:46px;height:62px;flex:none;display:grid;place-items:center;
  aspect-ratio:auto;min-height:0;padding:0;overflow:hidden}
.mGrid.listMode .vIm img,
.mGrid.listMode .vIm>*{max-height:60px;max-width:46px;height:auto;width:auto;margin:0}
.mGrid.listMode .vCard{min-height:0}
@media (max-width:700px){
  .mGrid.listMode .vSub{display:none}
  .mGrid.listMode .vCard{gap:10px;padding:8px 10px}
}
.mGrid.listMode .vNm{flex:1.2;min-width:110px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mGrid.listMode .vSub{flex:1;min-width:90px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--faint)}
.mGrid.listMode .vCard .mRow{margin:0 0 0 auto;display:inline-flex;gap:14px;align-items:baseline;flex:none;white-space:nowrap}
.mGrid.listMode .vActs{margin:0;flex:none;display:inline-flex;gap:6px;white-space:nowrap}
.mGrid.listMode .stChip{position:static;order:0;flex:none}
@media (max-width:760px){.mGrid.listMode .vSub{display:none}}
/* R30: S/M/L tile size — every grid honors the --tile var set by the gs-* class */
.mGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--tile,196px),1fr));gap:16px}
.mGrid.gs-s{--tile:150px}
.mGrid.gs-m{--tile:196px}
.mGrid.gs-l{--tile:270px}
.mCard{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s;text-align:left}
.mCard:hover{border-color:var(--acc-br)}
.mArtWrap{background:radial-gradient(120% 100% at 50% 0%,var(--stage2),var(--stage) 82%);border-radius:9px;display:grid;place-items:center;padding:14px 10px;height:206px}
.slabM{width:120px;height:175px;background:linear-gradient(172deg,#fdfdfd,#e6e9ee);border-radius:8px;padding:6px;display:flex;flex-direction:column;gap:5px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09),0 12px 22px -10px rgba(0,0,0,.55)}
.slabM .lab{background:#161b24;border-radius:4px;padding:3.5px 6px;display:flex;justify-content:space-between;align-items:center;color:#fff;font:600 5.5px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.slabM .lab .g{font-size:9.5px;font-weight:800}
.slabM.gem .lab{background:#3a2e0c;box-shadow:inset 0 0 0 1px #f0b23e}.slabM.gem .g{color:#f3d375}
.slabM .art{flex:1;border-radius:4px;background:#0d1117;overflow:hidden}
.slabM .art img{width:100%;height:100%;object-fit:contain}
.rawM{width:125px;height:175px;border-radius:7px;overflow:hidden;box-shadow:0 12px 22px -10px rgba(0,0,0,.55);background:#0d1117}
.rawM img{width:100%;height:100%;object-fit:cover}
.mName{display:block;max-width:100%;font:600 13px var(--ff-b);margin-top:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mSet{display:block;max-width:100%;font:500 10px var(--mono);letter-spacing:.05em;color:var(--faint);text-transform:uppercase;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mRow{display:flex;justify-content:space-between;align-items:center;margin-top:10px;gap:8px}
.mPrice{font:700 14px var(--mono)}
.trend{font:600 10.5px var(--mono)}
.trend.up{color:var(--gain)}.trend.dn{color:var(--danger)}

/* ---------- card detail ---------- */
.cdWrap{display:grid;grid-template-columns:470px 1fr;gap:48px;align-items:start;padding:40px 0}
.cdRoom{min-height:540px;display:grid;place-items:center;padding:40px;position:sticky;top:96px}
.certRow{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.cdPrice{font:700 30px var(--mono);letter-spacing:-.03em;margin:14px 0 2px}
.bbQuote{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--accB-soft);border:1px solid var(--accB-br);border-radius:var(--radius-sm);padding:12px 15px;margin-top:14px}
.bbQuote .q{font-size:12.5px;color:var(--accB)}
.bbQuote .q b{font-family:var(--mono)}
.timeline{list-style:none;margin:14px 0 0;padding:0 0 0 2px}
.timeline li{position:relative;padding:0 0 17px 24px;border-left:1px solid var(--border);margin-left:8px}
.timeline li:last-child{border-left-color:transparent;padding-bottom:2px}
.timeline li::before{content:"";position:absolute;left:-5px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--panel);border:2px solid var(--acc)}
.timeline .tt{font-weight:600;font-size:13px}
.timeline .td{font:500 11px var(--mono);color:var(--faint);margin-top:1px}

/* ---------- vault / wallet ---------- */
.vStats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:24px 0}
.vStat{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:15px 17px}
.vStat .v{font:700 20px var(--mono);letter-spacing:-.02em}
.vStat .k{font-size:11.5px;color:var(--faint);margin-top:3px}
.stChip{position:absolute;top:10px;left:10px;z-index:3}
.vTile{position:relative}
.vActs{display:flex;gap:8px;margin-top:10px}
.bulkbar{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:9px 11px 9px 20px;position:sticky;bottom:18px;box-shadow:var(--shadow-lg);width:max-content;margin:26px auto 0}
.wGrid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start;margin-top:26px}
.balCard{background:radial-gradient(120% 120% at 85% -10%,rgba(124,92,255,.35),transparent 55%),radial-gradient(120% 100% at 0% 110%,rgba(55,230,201,.16),transparent 50%),linear-gradient(160deg,#0c1526,#060b14 70%);color:#f4f7fb;border-radius:var(--radius);padding:25px 27px;box-shadow:var(--shadow-lg);border:1px solid rgba(244,247,251,.08)}
.balCard .k{font:600 10.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#98a2b3}
.balCard .v{font:700 38px var(--mono);letter-spacing:-.04em;margin:8px 0 2px}
.addrRow{display:flex;align-items:center;gap:9px;margin-top:14px;flex-wrap:wrap}
.limitCard{border:1px solid var(--border);background:var(--panel);border-radius:var(--radius);padding:19px 21px}
.limitCard h4{margin:0;font:600 14.5px var(--ff-d)}
.limitBar{height:8px;border-radius:4px;background:var(--panel3);overflow:hidden;margin:10px 0 6px}
.limitBar i{display:block;height:100%;background:var(--grad);border-radius:4px}

/* ---------- tables / events ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.tbl th{font:650 10px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);text-align:left;padding:9px 11px;border-bottom:1px solid var(--border)}
.tbl td{padding:9px 11px;border-bottom:1px solid var(--border2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--hover)}
.tbl .r{text-align:right}
.tblwrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel)}
.thumb{width:34px;height:47px;object-fit:cover;border-radius:4px;border:1px solid var(--border);background:#0d1117;display:block}
.stack{display:flex}
.stack img{width:26px;height:36px;object-fit:cover;border-radius:3px;border:1.5px solid var(--panel);margin-left:-8px;background:#0d1117}
.stack img:first-child{margin-left:0}
.evtag{font:650 9px var(--mono);letter-spacing:.07em;border-radius:4px;padding:3px 6px;white-space:nowrap}
.ev-mint{background:var(--gain-soft);color:var(--gain)}
.ev-dep{background:var(--acc-soft);color:var(--acc)}
.ev-buy{background:var(--accB-soft);color:var(--accB)}
.ev-burn{background:var(--danger-soft);color:var(--danger)}
.ev-ship{background:var(--amber-soft);color:var(--amber)}
.ev-wd{background:var(--panel3);color:var(--muted)}
.stpill{font:650 10px var(--mono);letter-spacing:.05em;border-radius:99px;padding:3.5px 9px;white-space:nowrap}
.st-vaulted{background:var(--gain-soft);color:var(--gain)}
.st-alloc{background:var(--acc-soft);color:var(--acc)}
.st-listed{background:var(--accB-soft);color:var(--accB)}
.st-ship{background:var(--amber-soft);color:var(--amber)}
.st-done{background:var(--panel3);color:var(--muted)}
.st-hold{background:var(--danger-soft);color:var(--danger)}
.mgn{font:650 11px var(--mono)}
.mgn.up{color:var(--gain)}.mgn.dn{color:var(--danger)}

/* ---------- fairness / responsible ---------- */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:26px 0}
.step3{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.step3 .n{font:700 10.5px var(--mono);color:var(--acc);letter-spacing:.14em}
.verifyGrid{display:grid;grid-template-columns:1fr 1.15fr;gap:22px;align-items:start}
.vform label{display:block;font:650 10.5px var(--ff-b);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:14px 0 6px}
.vform input,.vform select{width:100%;border:1px solid var(--border);border-radius:var(--r3);background:var(--panel);padding:9.5px 12px;font:500 12.5px var(--mono);color:var(--text)}
.chainFlow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}
.cfN{background:var(--panel2);border:1px solid var(--border);border-radius:var(--r3);padding:8px 12px;font:600 11.5px var(--mono);white-space:nowrap}
.cfN.dark{background:var(--text);color:var(--bg);border-color:var(--text)}
.cfN.mint{background:var(--accB-soft);border-color:var(--accB-br);color:var(--accB)}
.cfA{color:var(--faint);font-family:var(--mono);font-size:12px}
.commitGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.commit{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px}
.commit .t{font-family:var(--ff-d);font-weight:600;font-size:14.5px;margin-bottom:6px}
.commit .d{font-size:13px;color:var(--muted)}
.limRow{display:grid;grid-template-columns:150px 1fr 90px;gap:16px;align-items:center;padding:13px 0;border-top:1px solid var(--border2)}
.limRow:first-of-type{border-top:0}
.limRow input[type=range]{width:100%;accent-color:var(--acc)}
.limRow output{font:650 13px var(--mono);text-align:right}
.togRow{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--border2)}
.tog{position:relative;width:42px;height:24px;border-radius:12px;background:var(--panel3);border:1px solid var(--border);transition:background .15s;flex:none}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.tog.on{background:var(--acc);border-color:var(--acc)}
.tog.on::after{left:20px}

/* ---------- admin ---------- */
#admin{display:none;grid-template-columns:218px 1fr;min-height:100vh;background:var(--bg)}
#admin.on{display:grid}
.aside{border-right:1px solid var(--border);background:var(--panel);padding:18px 14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh}
.aside .logo{padding:4px 10px 16px}
.aTit{font:700 9.5px var(--ff-b);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:14px 12px 6px}
.anav{display:flex;flex-direction:column;gap:2px}
.anav button,.anav a{display:flex;align-items:center;gap:10px;border:0;background:none;text-align:left;padding:8.5px 12px;border-radius:9px;font:600 13px var(--ff-b);color:var(--muted);text-decoration:none}
.anav button:hover,.anav a:hover{background:var(--hover);color:var(--text)}
.anav button.on,.anav a.on{background:var(--acc-soft);color:var(--acc)}
.anav .bdg{margin-left:auto;font:650 10px var(--mono);background:var(--panel3);border-radius:99px;padding:2px 8px;color:var(--muted)}
.anav button.on .bdg{background:var(--panel);color:var(--acc)}
.envRow{margin-top:auto;padding:12px 6px 2px;border-top:1px solid var(--border2);display:flex;align-items:center;justify-content:space-between;gap:8px}
.amain{padding:26px 32px 60px;min-width:0}
.aHead{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.aHead .h2{margin:0}
.aHead .sp{flex:1}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px}
.kpi .k{font:600 10.5px var(--ff-b);color:var(--faint)}
.kpi .v{font:700 20px var(--mono);letter-spacing:-.02em;margin-top:5px}
.kpi .d{font:600 10.5px var(--mono);margin-top:4px;color:var(--faint)}
.kpi .d.up{color:var(--gain)}.kpi .d.dn{color:var(--danger)}
.acard{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:20px 22px;min-width:0}
.acard h4{margin:0 0 13px;font:600 13.5px var(--ff-d);display:flex;justify-content:space-between;align-items:center;gap:10px}
.acard h4 .small{font-weight:500}
.aGrid2{display:grid;grid-template-columns:1.65fr 1fr;gap:13px;margin-bottom:13px}
.aGrid2b{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px}
.aGrid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px;margin-bottom:13px}
.alert{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--border2);font-size:12.5px}
.alert:first-of-type{border-top:0}
.alert .sev{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none}
.alert .sev.warn{background:var(--amber)}.alert .sev.bad{background:var(--danger)}.alert .sev.ok{background:var(--gain)}
.alert .act{margin-left:auto;flex:none}
.srcMeter{display:grid;grid-template-columns:150px 1fr 76px;gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--border2);font-size:12px}
.srcMeter:first-of-type{border-top:0}
.covBar{height:7px;border-radius:4px;background:var(--panel3);overflow:hidden}
.covBar i{display:block;height:100%;border-radius:4px}
.chart{width:100%;display:block}
.chart text{font-family:var(--mono);font-size:9.5px;fill:var(--faint)}
.tipBox{position:fixed;z-index:300;background:var(--text);color:var(--bg);border-radius:8px;padding:7px 11px;font:600 11px var(--mono);pointer-events:none;opacity:0;transition:opacity .12s;white-space:nowrap;box-shadow:var(--shadow-lg)}
.pipe{display:flex;gap:0;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel);overflow:hidden;margin-bottom:13px}
.pipe .pp{flex:1;padding:13px 16px;border-left:1px solid var(--border2)}
.pipe .pp:first-child{border-left:0}
.pipe .pp .v{font:700 18px var(--mono)}
.pipe .pp .k{font-size:10.5px;color:var(--faint);margin-top:2px}
.topPull{display:flex;align-items:center;gap:11px;padding:8px 0;border-top:1px solid var(--border2)}
.topPull:first-of-type{border-top:0}
.topPull .n{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topPull .s{font:500 10px var(--mono);color:var(--faint)}
.ruleIn{width:74px;border:1px solid var(--border);border-radius:7px;background:var(--panel2);padding:6px 8px;font:600 12px var(--mono);color:var(--text);text-align:right}
/* R30: settings-card text inputs fill their column at a comfortable size —
   the 74px rule-input default is for tiny inline numbers only. */
#companyCard .ruleIn, #questBuilder .qbRow .qbT{width:100%;box-sizing:border-box;text-align:left;padding:10px 12px;font-size:13px;min-height:38px;border-radius:9px;font-family:var(--ff-b, inherit)}
#questBuilder .qbRow .qbTg, #questBuilder .qbRow .qbP{width:100%;box-sizing:border-box;padding:10px 8px;font-size:13px;min-height:38px;border-radius:9px}
#questBuilder .sel{min-height:38px}
.benchIn{display:flex;gap:9px;margin-top:10px}
.benchIn input{flex:1;border:1px solid var(--border);border-radius:9px;background:var(--panel2);padding:10px 13px;font:600 13px var(--mono);color:var(--text)}

/* ---------- drawer ---------- */
.drawerWrap{position:fixed;inset:0;z-index:140;display:none}
.drawerWrap.on{display:block}
.drawerWrap .scrim{position:absolute;inset:0;background:rgba(6,11,20,.55);backdrop-filter:blur(3px)}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(440px,94vw);background:var(--panel);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);padding:24px 26px;overflow-y:auto;animation:drawIn .3s cubic-bezier(.2,.9,.3,1)}
@keyframes drawIn{from{transform:translateX(60px);opacity:0}to{transform:none;opacity:1}}
.drawer .dX{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--muted);font-size:13px}
.dImgWrap{background:radial-gradient(120% 100% at 50% 0%,var(--stage2),var(--stage) 82%);border-radius:12px;display:grid;place-items:center;padding:22px;margin:14px 0}
.dImgWrap img{width:170px;border-radius:8px;box-shadow:0 18px 36px -14px rgba(0,0,0,.6)}
.drawer .h3{margin-top:4px}
.dRowBtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}

/* ---------- footer / modal / toast / proto ---------- */
.foot{border-top:1px solid var(--border);background:var(--panel);margin-top:40px}
/* R41 0708: brand + the five menus on ONE desktop row */
.footGrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1fr;gap:26px;padding:44px 0 32px}
.foot .fTit{font:700 10.5px var(--ff-b);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.foot a{display:block;padding:4px 0;color:var(--muted);font-size:13px}
.foot a:hover{color:var(--text)}
.legal{border-top:1px solid var(--border2);padding:18px 0 24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:11.5px;color:var(--faint)}
.modal{position:fixed;inset:0;z-index:150;display:none;place-items:center;background:rgba(6,11,20,.6);backdrop-filter:blur(4px);padding:20px}
.modal.on{display:grid}
.mBox{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);width:min(440px,100%);padding:25px 27px;position:relative;animation:popIn .28s cubic-bezier(.2,1.4,.4,1);max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain}
@keyframes popIn{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
.mX{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--muted);font-size:13px}
.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0}
.preset{border:1px solid var(--border);background:var(--panel2);border-radius:var(--r3);padding:11px 0;font:650 13.5px var(--mono);color:var(--text)}
.preset.on{border-color:var(--acc);background:var(--acc-soft);color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.payRow{display:flex;align-items:center;gap:11px;border:1px solid var(--border);border-radius:var(--r3);padding:10px 14px;margin:8px 0 16px;font-size:12.5px}
.payRow .cc{width:34px;height:23px;border-radius:4px;background:linear-gradient(120deg,#1a1f71,#3d63f3);flex:none}
#toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:250;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--text);color:var(--bg);border-radius:999px;padding:10px 21px;font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);animation:popIn .25s ease;display:flex;gap:9px;align-items:center}
.toast .dot{width:7px;height:7px;border-radius:50%;background:var(--accB)}
.proto{position:fixed;right:22px;bottom:22px;z-index:160}
.protoBtn{display:flex;align-items:center;gap:8px;background:var(--grad);color:#fff;border:none;border-radius:999px;padding:11px 18px;font:650 12.5px var(--ff-b);box-shadow:var(--shadow-lg)}
.protoMenu{position:absolute;right:0;bottom:52px;width:238px;background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);padding:10px;display:none;max-height:72vh;overflow:auto}
.protoMenu.on{display:block}
.protoMenu .gT{font:700 9.5px var(--ff-b);letter-spacing:.13em;text-transform:uppercase;color:var(--faint);padding:9px 10px 4px}
.protoMenu button{display:flex;width:100%;border:0;background:none;text-align:left;padding:7px 10px;border-radius:8px;font:600 12.5px var(--ff-b);color:var(--muted)}
.protoMenu button:hover{background:var(--hover);color:var(--text)}
.protoMenu button.on{background:var(--acc-soft);color:var(--acc)}
.protoNote{font:500 10px var(--ff-b);color:var(--faint);padding:8px 10px 4px;border-top:1px solid var(--border2);margin-top:6px}

/* ---------- v5: pouch render / sounds / last-pull / odds accordion / uniform images ---------- */
.ptLast{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptLast img{width:20px;height:28px;object-fit:cover;border-radius:3px;flex:none}
.lastPull{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;margin:14px 0 0}
.lastPull img{width:34px;height:47px;object-fit:cover;border-radius:4px;flex:none}
.lastPull .lpTag{font:700 9.5px var(--ff-b);letter-spacing:.14em;text-transform:uppercase;color:var(--accB);flex:none}
.accChev{transition:transform .25s;color:var(--faint);font-size:13px}
.dCard.open .accChev{transform:rotate(180deg)}
.accBody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.accBody>div{overflow:hidden}
.dCard.open .accBody{grid-template-rows:1fr}
.oddsMini{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.resolved{border:1px solid rgba(55,230,201,.4);background:rgba(55,230,201,.09);border-radius:13px;padding:15px 17px;color:#fff}
.resolved .rt{display:flex;justify-content:space-between;align-items:center;gap:10px;font:600 14.5px var(--ff-b)}
.resolved .rt .ok{color:#2fd6a6}
.resolved .rsub{font-size:12px;color:var(--stink2);margin-top:4px}
.resolved a{color:#37e6c9;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
table .cimg,.topPull .cimg{width:32px !important;height:45px !important;object-fit:cover}
@media (min-width:1600px){.wrap{padding:0 56px}}
.showGrid img.cimg{width:100%;height:auto;aspect-ratio:63/88;object-fit:cover;border-radius:6px}
.dImgWrap img{aspect-ratio:63/88;object-fit:cover}

/* ---------- v4: sidebar shell / wheel / lb / admin-complete ---------- */
#shopBody{display:grid;grid-template-columns:226px minmax(0,1fr);align-items:start;
  /* 0807z6: the sticky rail is only viewport-tall — paint its column on the
     grid itself so there is never a background gap between rail and footer */
  background:linear-gradient(90deg,var(--panel) 0,var(--panel) 225px,var(--border) 225px,var(--border) 226px,transparent 226px)}
.shopSide{position:sticky;top:70px;height:calc(100vh - 70px);overflow-y:auto;padding:20px 14px 16px}
/* R30: admin rail pinned the same way — start-aligned so sticky always has travel */
#admin{align-items:start}
/* R40: desktop only. `#admin .aside` outranks the `.aside{position:static}`
   override in the max-width:900px block, so the rail stayed sticky and 100vh on
   narrow screens — where #admin is a single column, that made it full-width and
   pinned over the dashboard, swallowing every click on the content beneath. */
@media (min-width:901px){
  #admin > .aside, #admin .aside{position:sticky;top:0;height:100vh;overflow-y:auto}
}
.shopSide .sideCta{margin-top:auto;padding:16px 4px 4px}
.evDot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none}
.avMenu{width:284px}
.langMenu{width:170px}
/* R30: on mobile the language picker spans the full screen width */
@media (max-width:900px){
  .langMenu{position:fixed !important;left:10px;right:10px;top:62px;width:auto !important}
  .langMenu .notifI{padding:13px 16px;font-size:15px}
}
.catTabs .fchip{padding:12px 20px;border-radius:12px;font-size:13px}
.fchip.gold{background:linear-gradient(120deg,var(--amber-soft),transparent);border-color:var(--amber);color:var(--amber)}
.fchip.gold.on{background:var(--amber);border-color:var(--amber);color:#1a1206}
.fmv{font:600 10px var(--ff-b);background:var(--panel2);border:1px solid var(--border);border-radius:99px;padding:3px 8px;color:var(--muted);white-space:nowrap}
.mWatch{position:absolute;top:9px;right:9px;z-index:4;width:27px;height:27px;border-radius:50%;border:1px solid var(--border);background:var(--panel);font-size:12px;display:grid;place-items:center;color:var(--muted);cursor:pointer}
.mWatch:hover{border-color:var(--faint)}
.wheelWrap{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.wheelBox{position:relative;width:188px;height:188px;flex:none;margin:4px auto}
.wheel{width:100%;height:100%;border-radius:50%;position:relative;transition:transform 3.2s cubic-bezier(.12,.7,.13,1);
  border:7px solid var(--panel3);box-shadow:var(--shadow);
  background:conic-gradient(var(--acc-soft) 0 45deg,var(--panel3) 45deg 90deg,var(--accB-soft) 90deg 135deg,var(--panel3) 135deg 180deg,var(--acc-soft) 180deg 225deg,var(--panel3) 225deg 270deg,var(--amber-soft) 270deg 315deg,var(--panel3) 315deg 360deg)}
.wl{position:absolute;left:50%;top:50%;font:700 10.5px var(--ff-b);color:var(--muted);transform:rotate(var(--a)) translateY(-66px)}
.wPtr{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:0;height:0;border:9px solid transparent;border-top:13px solid var(--acc);z-index:3;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}
.wHub{position:absolute;inset:37%;border-radius:50%;background:var(--panel);border:1px solid var(--border);display:grid;place-items:center;font:700 10px var(--ff-b);color:var(--faint);z-index:2}
.qsegs{display:flex;gap:4px;margin-top:8px}
.qs{height:6px;flex:1;border-radius:3px;background:var(--panel3)}
.qs.on{background:var(--grad)}
.podium{display:flex;justify-content:center;gap:30px;align-items:flex-end;margin:28px 0 12px}
.pod{text-align:center}
.podAv{width:62px;height:62px;border-radius:50%;margin:0 auto 9px;box-shadow:var(--shadow);background:linear-gradient(140deg,#7c5cff,#37e6c9)}
.pod.p1 .podAv{width:82px;height:82px;background:linear-gradient(140deg,#f0b23e,#ff7a2e)}
.pod.p3 .podAv{background:linear-gradient(140deg,#5b8def,#c96bff)}
.pod .pn{font:600 12.5px var(--ff-b)}
.pod .pp{font:700 13.5px var(--ff-b);font-variant-numeric:tabular-nums;color:var(--muted);margin-top:2px}
.prizeStrip{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:14px 0 6px}
.upRow{display:grid;grid-template-columns:150px 1fr 120px 90px;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--border2);font-size:12.5px}
.upRow:first-of-type{border-top:0}
@media (max-width:1080px){.upRow{grid-template-columns:120px 1fr 90px 80px}}
@media (max-width:900px){
  .wrap{padding:0 18px}
  #shopBody{grid-template-columns:1fr;background:none} /* rail hidden — no column paint */
  .shopSide{display:none} /* mobile gets the fullscreen menu instead of a chip bar */
  .podium{gap:16px}
}
/* ---------- live intake scanner (sell.cardstand.app port) ---------- */
#liveScanner{position:fixed;inset:0;z-index:300;background:#04070d;display:none;flex-direction:column}
#liveScanner.on{display:flex}
.lsTop{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--bg)}
.lsStage{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden}
.lsStage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#04070d}
.lsFrame{position:relative;border:1.5px dashed rgba(240,178,62,.85);border-radius:6px;z-index:3;pointer-events:none}
.lsFrame i{position:absolute;width:9px;height:9px;background:var(--amber);border-radius:50%}
.lsFrame .c1{top:-5px;left:-5px}.lsFrame .c2{top:-5px;right:-5px}.lsFrame .c3{bottom:-5px;left:-5px}.lsFrame .c4{bottom:-5px;right:-5px}
.lsFlash{position:absolute;inset:0;background:rgba(55,230,201,.22);opacity:0;transition:opacity .18s;z-index:4;pointer-events:none}
.lsFlash.on{opacity:1}
.lsPlay{position:absolute;z-index:5;width:74px;height:74px;border-radius:50%;border:6px solid rgba(20,26,40,.9);background:var(--grad);color:#fff;font-size:23px;display:grid;place-items:center;cursor:pointer}
.lsPause{position:absolute;left:14px;bottom:14px;z-index:5}
.lsHud{position:absolute;top:14px;right:14px;z-index:5;display:flex;gap:9px;align-items:flex-start;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--border);border-radius:11px;padding:9px 13px;font:600 12px var(--ff-b)}
.lsHud .dot{width:8px;height:8px;border-radius:50%;background:var(--faint);margin-top:4px;flex:none}
.lsBar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--panel2);border-top:1px solid var(--border)}
.lsStrip{display:flex;gap:9px;overflow-x:auto;padding:10px 16px;background:var(--bg);min-height:96px;scrollbar-width:none}
.lsTile{position:relative;flex:0 0 250px;display:flex;gap:9px;background:var(--panel);border:1px solid var(--border);border-radius:11px;padding:8px}
.lsTile img{width:44px;height:60px;object-fit:contain;border-radius:5px;background:#0d1117}
.lsNoImg{width:44px;height:60px;border-radius:5px;background:var(--panel3)}
.lsMeta{min-width:0;display:flex;flex-direction:column;gap:2px;font-size:11px}
.lsMeta b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsMeta span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsX{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;border:1px solid var(--border);background:var(--panel3);color:var(--muted);font-size:10px;line-height:1}
.lsFoot{display:flex;gap:10px;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg)}
.lsFrame.hit{border-color:var(--accB);border-style:solid;box-shadow:0 0 0 1px var(--accB),0 0 26px -6px var(--accB)}
.lsFrame.hit i{background:var(--accB)}
.lsGhost{flex:0 0 130px;display:grid;place-items:center;border:1.5px dashed var(--border);border-radius:11px;color:var(--faint);font:600 13px var(--ff-b);min-height:78px}
.soldBadge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-9deg);background:rgba(6,11,20,.88);border:1.5px solid var(--amber);color:var(--amber);font:800 13px var(--ff-b);letter-spacing:.14em;padding:7px 16px;border-radius:9px;z-index:6;box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* ---------- fullscreen mobile menu ---------- */
#mobMenuBtn{display:none;flex:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--panel);flex-direction:column;align-items:center;justify-content:center;gap:4.5px;cursor:pointer}
#mobMenuBtn span{display:block;width:17px;height:1.8px;border-radius:2px;background:var(--text);transition:transform .2s,opacity .2s}
@media (max-width:900px){#mobMenuBtn{display:flex}}
#mobMenu{position:fixed;inset:0;z-index:200;background:var(--bg);display:none;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
#mobMenu.on{display:flex;animation:mmIn .22s ease}
@keyframes mmIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.mmHead{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg)}
.mmClose{width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:16px}
.mmBody{padding:10px 18px 40px}
.mmBody .aTit{margin:22px 0 6px;font:700 10.5px var(--ff-b);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.mmBody .anav{flex-direction:column !important;gap:2px}
.mmBody .anav button{width:100%;font-size:15.5px;padding:13px 12px;border-radius:11px}
.mmBody .anav .nvi{width:19px;height:19px}
.mmBody .sideCta{padding:20px 0 0}
.mmBody .sideCta .btn{width:100%;justify-content:center}

/* ---------- v3: courtyard-parity additions ---------- */
.btn.ink{background:var(--text);border-color:var(--text);color:var(--bg)}
.btn.ink:hover{box-shadow:0 10px 26px -12px rgba(0,0,0,.5);opacity:.92;border-color:var(--text)}
.notifWrap{position:relative}
.notifMenu{position:absolute;right:0;top:46px;width:324px;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;display:none;z-index:90}
.notifMenu.on{display:block}
.notifI{display:flex;gap:10px;padding:10px;border-radius:9px;font-size:12.5px;color:var(--muted);align-items:flex-start;cursor:pointer;text-align:left;width:100%;background:none;border:0}
.notifI:hover{background:var(--hover)}
.notifI b{color:var(--text);font-weight:600}
.notifI .nd{width:7px;height:7px;border-radius:50%;background:var(--acc);margin-top:5px;flex:none}
.notifDot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid var(--panel)}
.dropRow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 26px}
.dropC{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px}
.dropC .ds{width:62px;height:82px;border-radius:8px;background:radial-gradient(120% 90% at 50% 0%,var(--stage2),var(--stage));display:grid;place-items:center;flex:none;overflow:hidden}
.dropC .ds .pack{--pw:42px;filter:none}
.dropC .ds .pk-body,.dropC .ds .notch{display:none}
.dropC .ds .crimp{height:4px}
.dropC .dn{font:600 13.5px var(--ff-d)}
.dropC .dd{font:500 10.5px var(--mono);color:var(--faint);margin-top:2px}
.unopRow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--acc-soft);border:1px solid var(--acc-br);border-radius:var(--radius-sm);padding:12px 16px;margin:0 0 20px}
.badgeGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.badge{border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 10px;background:var(--panel);text-align:center}
.badge .bi{width:42px;height:42px;border-radius:50%;margin:0 auto 8px;display:grid;place-items:center;font-family:var(--ff-d);font-weight:700;font-size:14px;background:var(--grad);color:#fff}
.badge.locked{opacity:.45}
.badge.locked .bi{background:var(--panel3);color:var(--faint)}
.badge .bn{font:600 12px var(--ff-b)}
.badge .bd{font-size:10px;color:var(--faint);margin-top:2px}
.tierBar{height:9px;border-radius:5px;background:var(--panel3);overflow:hidden;margin:10px 0 6px}
.tierBar i{display:block;height:100%;background:var(--grad);border-radius:5px}
.heartOn{color:#ff5c6c !important;border-color:#ff5c6c66 !important}
.showGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.profHead{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:18px 0 8px}
.profAv{width:74px;height:74px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font:700 24px var(--ff-d)}
.payRow{cursor:pointer;width:100%;background:var(--panel);text-align:left}
.payRow.on{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
@media (max-width:900px){.dropRow{grid-template-columns:1fr}.showGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .aGrid2,.aGrid2b,.aGrid3{grid-template-columns:1fr}
  .detail,.cdWrap{grid-template-columns:1fr}
  /* relative (not static): kills the desktop sticky but KEEPS the anchor for
     the absolute back-button floating over the pack (0807z5). top:auto —
     the desktop rule's top:96px shifts a relative box down. */
  .dRoom,.cdRoom{position:relative;top:auto;min-height:440px}
  .ripResult,#ripStage.ph-done .ripResult{grid-template-columns:1fr !important;gap:26px 0;justify-items:center;text-align:center;transform:none !important}
  #ripStage:not(.ph-done) .resClip{display:none}
  .resPanel{width:min(360px,86vw)}
  .rvActions .btn{justify-content:center}
  .pipe{flex-wrap:wrap}.pipe .pp{min-width:33%}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:34px;padding-top:38px}
  .heroRoom{min-height:420px}
  .links{display:none}
  /* R41: the filter rail wrapped into a row ABOVE the listings, so a phone showed
     a full screen of checkboxes before a single card. Listings come first; the
     filters sit under them in a bordered block you scroll to deliberately. */
  .mktLayout{grid-template-columns:1fr;gap:22px;padding:18px 0}
  .mktLayout>*:not(.filters){order:1}
  /* Moved under the search row by mountMobileFilters() and closed by default,
     so the shop is the first thing on screen instead of a wall of checkboxes. */
  .filters{order:2;position:static;flex-direction:column;gap:14px;
    padding:14px;border:1px solid var(--border);border-radius:14px;background:var(--panel2);
    margin:0 0 4px}
  .filters .fGroup{display:flex;flex-direction:column;gap:7px}
  .filters .fTit{font-size:10.5px;letter-spacing:.1em}
  /* Two options per row: readable, and half the height of a single column. */
  .filters .fOpt{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13px}
  .filters .fGroup{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
  .filters .fTit{grid-column:1/-1;margin-bottom:2px}
  /* MUST come after the .filters display rule. The [hidden] attribute only
     carries browser-default priority, so ".filters{display:flex}" beat it and
     the rail stayed open however many times the JS set hidden = true. */
  .filters[hidden]{display:none!important}
  .mFilterTog{display:inline-flex;align-items:center;gap:7px;margin:0 0 10px}
  .mFilterTog .mFilterCaret{transition:transform .18s ease;opacity:.7}
  .mFilterTog.on .mFilterCaret{transform:rotate(180deg)}
  .mFilterTog.on{border-color:var(--acc-br);color:var(--text)}
  /* The control row (S/M/L, grid/list, sort) overflowed and clipped "Newest
     listed". Let it scroll sideways instead of losing the last control. */
  /* Search on its own line; Watchlist / Offers / size / view / sort on one
     scrollable line under it. Previously they crowded together and the count
     text wrapped mid-row ("0 te / koop"). */
  .mTop{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .mTop .search{width:100%;order:1}
  .mTop>div{order:2;display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
    max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px}
  .mTop>div::-webkit-scrollbar{display:none}
  .mTop>div>*{flex:0 0 auto}
  .mTop .fchip{white-space:nowrap}
  /* The "N listed" caption was squeezed between chips — push it to the end and
     let it sit quietly rather than wrapping. */
  .mTop>div>#mCount{order:9;opacity:.7;white-space:nowrap;margin-left:2px}
  .howGrid{grid-template-columns:1fr 1fr}
  .how{border-top:1px solid var(--border2)}
  .steps3,.commitGrid{grid-template-columns:1fr}
  .verifyGrid,.wGrid{grid-template-columns:1fr}
  .vStats{grid-template-columns:1fr 1fr}
  #admin{grid-template-columns:1fr}
  .aside{position:static;height:auto;flex-direction:row;overflow-x:auto;align-items:center}
  .aside .logo{padding:0 10px 0 0}.aTit{display:none}.envRow{margin:0;border:0;padding:0 4px}
  .anav{flex-direction:row}
  .poolStrip{grid-template-columns:repeat(3,1fr)}
  .footGrid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  .spinner,.sheen,.tk,.float,.rGlow,.grailRing{animation:none !important}
}

/* ===== R9 wave 4: popup forms, chart hover, mobile pass ===== */

/* vault: courtyard-style card tiles.
   R40: the #vGrid rule that used to live here hardcoded
   `grid-template-columns:repeat(auto-fill,minmax(215px,1fr))`. Being an ID
   selector it outranked BOTH `.mGrid.listMode{grid-template-columns:1fr}` and
   the `--tile` sizing from the gs-* classes, so in the vault the list view
   still rendered a multi-column grid and S/M/L did nothing at all. #vGrid
   already carries .mGrid, which provides the grid, the sizes and list mode. */
.vCard{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:12px;transition:transform .15s,border-color .15s}
.vCard:hover{border-color:var(--acc-br)}
.vCard .stChip{position:absolute;top:18px;left:18px;z-index:3}
.vCard .vIm{display:grid;place-items:center;background:#0d1117;border-radius:11px;height:205px;overflow:hidden}
.vCard .vIm img{max-width:86%;max-height:186px;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))}
.vCard .vNm{font:650 13px/1.35 var(--ff-b);color:var(--text);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:35px}
.vCard .vNm:hover{text-decoration:underline}
.vCard .vSub{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vCard .vActs{display:flex;gap:6px;flex-wrap:wrap;border-top:1px solid var(--border2);padding-top:9px}
.vCard .vActs .btn{display:inline-flex;align-items:center;gap:5px}

/* rip page: pulls section under the stage */
/* 0807z: the pulls strip pushed the rip past one screen — the rip stage is
   the whole show now (latest pulls live on the pack page) */
.ripPulls{display:none}
.ripPulls .rpHead{font:700 11px var(--ff-b);letter-spacing:.16em;text-transform:uppercase;color:var(--stink2);text-align:center;margin-bottom:12px}
.pullGrid.dark .pullTile{background:rgba(13,17,26,.72);border-color:var(--stghair)}
.pullGrid.dark .pullTile .pTitle{color:var(--stink)}
.pullGrid.dark .pullTile .pMetaTxt b{color:var(--stink)}

/* courtyard-style pull tiles (home / pack page / rip) */
.pullGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:14px}
.pullTile{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:12px;text-decoration:none;color:var(--text);transition:transform .15s,border-color .15s}
.pullTile:hover{border-color:var(--acc-br)}
.pullTile .pImg{display:grid;place-items:center;background:#0d1117;border-radius:11px;height:210px;overflow:hidden}
.pullTile .pImg img{max-width:88%;max-height:190px;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))}
.pullTile .pTitle{font:650 13.5px/1.35 var(--ff-b);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px}
.pullTile .pSub{display:block;font:600 11px var(--ff-b);color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:1px 0 2px}
.pullTile .pMetaRow{display:flex;align-items:center;gap:9px;border-top:1px solid var(--border2);padding-top:10px}
.pullTile .pPackChip{position:relative;flex:none;width:30px;height:40px;border-radius:6px;overflow:hidden;background:linear-gradient(160deg,#1c2340,#0d1122)}
.pullTile .pPackChip .pk-orb{position:absolute;inset:30% 20% 30% 20%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 70%)}
.pullTile .pMetaTxt{display:flex;flex-direction:column;min-width:0;flex:1}
.pullTile .pMetaTxt b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pullTile .pMetaTxt span{font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pullTile .pVal{flex:none;font-weight:700;font-size:13px}

/* sidebar nav: icons + badges aligned */
.anav button{display:flex;align-items:center;gap:9px}
.anav .nvi{width:15px;height:15px;flex:none;opacity:.7}
.anav button.on .nvi{opacity:1}
.anav .bdg{margin-left:auto}

/* sidebar Events entries — clean flex rows */
#evNav button{display:flex;align-items:center;gap:9px;width:100%;text-align:left}
#evNav .evDot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--gain)}
#evNav .small{flex:none;color:var(--faint)}

/* grid/flex items must never inherit the ticker's max-content width */
#shopMain,#screens,.amain{min-width:0}
.shell>*{min-width:0}
/* latest-pulls slider (home): row scroll + snap once tiles exceed the width */
.pullSlide{display:flex !important;grid-template-columns:none !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pullSlide::-webkit-scrollbar{display:none}
.pullSlide .pullTile{flex:0 0 205px;scroll-snap-align:start}
/* pack shelf rows slide too (R17) — tiles keep their card width */
.pullSlide .packTile{flex:0 0 268px;scroll-snap-align:start}
.packRow{position:relative;min-width:0}
/* R22 top-chases slider tiles: fixed width, 3-line text */
.pullSlide .poolC{flex:0 0 196px;scroll-snap-align:start}
/* 0809e (Aron): the set line sat flush to the tile edge while the name above
   and the meta row below both carry 7-9px — it was the only unpadded line. */
.poolC .pSet{display:block;color:var(--faint);font-size:10.5px;line-height:1.35;margin:0;padding:0 7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poolC.big .pSet{padding:0 9px}
.poolC .pSet:empty{display:none}
/* R25: pulled chases — same treatment as the view-all popup */
.poolC.pulledC{opacity:.45;filter:saturate(.4)}
.poolC{position:relative}
.pulledRib{position:absolute;top:8px;right:8px;font:700 9px var(--ff-b);letter-spacing:.12em;background:var(--panel3);
  border:1px solid var(--border);color:var(--muted);border-radius:99px;padding:3px 9px;z-index:2;text-transform:uppercase}
.poolC .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* R22 result screen: ownership state first, sell demoted to quiet rows */
.vaultState{display:flex;align-items:center;gap:8px;font:700 13px var(--ff-b);color:var(--gain);
  background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.28);border-radius:10px;padding:9px 13px;margin:10px 0 4px}
.resSec{font-size:12px;opacity:.85}

/* R24 scanner candidate picker — swap a tray tile to another print */
.lsAlts{position:absolute;left:50%;bottom:120px;transform:translateX(-50%);z-index:60;width:min(440px,92vw);
  background:#0d1220;border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:0 30px 70px rgba(0,0,0,.6);
  max-height:52vh;overflow:auto;display:flex;flex-direction:column;gap:7px}
.lsAltsHead{display:flex;justify-content:space-between;align-items:center;padding:2px 4px 6px}
.lsAltRow{display:flex;gap:11px;align-items:center;background:var(--panel);border:1px solid var(--border);
  border-radius:11px;padding:8px 11px;cursor:pointer;text-align:left;color:var(--text);width:100%}
.lsAltRow:hover{border-color:var(--acc-br)}
.lsAltRow.on{border-color:var(--accB);background:rgba(55,230,201,.06)}
.lsAltRow img{width:40px;height:56px;object-fit:contain;border-radius:4px;background:#070a12;flex:none}
.lsAltMeta{flex:1;min-width:0;display:flex;flex-direction:column;font-size:12.5px}
.lsAltMeta span{color:var(--faint);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsAltEnd{display:flex;flex-direction:column;align-items:flex-end;font-size:12.5px}
.lsAltEnd span{color:var(--faint);font-size:10px}

/* R24d review panel — recognition wouldn't decide: your scan vs the
   recognised prints, side by side, with a catalogue-search fallback */
.lsReviewWrap{position:absolute;inset:0;z-index:70;background:rgba(4,6,12,.66);backdrop-filter:blur(5px);
  display:grid;place-items:center;padding:16px}
.lsReview{width:min(560px,94vw);max-height:88vh;overflow:auto;background:#0d1220;border:1px solid var(--border);
  border-radius:16px;padding:14px;box-shadow:0 30px 80px rgba(0,0,0,.65);display:flex;flex-direction:column;gap:10px}
.lsRevCompare{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lsRevCompare figure{margin:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;
  padding:9px;display:flex;flex-direction:column;align-items:center;gap:7px}
.lsRevCompare img{width:100%;max-height:210px;object-fit:contain;border-radius:8px;background:#070a12}
.lsRevCompare figcaption{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.lsRevList{display:flex;flex-direction:column;gap:7px}
.lsRevSearch .inp{width:100%}
.lsRevRes{display:flex;flex-direction:column;gap:7px;margin-top:7px}
.lsRevFoot{display:flex;gap:9px;margin-top:2px}

/* R22 daily collector drop — a card FLIP, no roulette visuals */
.dailyCard{width:118px;height:162px;perspective:900px;flex:none;cursor:default}
.dcInner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,.7,.35,1)}
.dailyCard.flip .dcInner{transform:rotateY(180deg)}
.dcFace{position:absolute;inset:0;backface-visibility:hidden;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid var(--border)}
.dcBack{background:linear-gradient(145deg,#1a2140,#0d1126);box-shadow:inset 0 0 30px rgba(124,92,255,.25)}
/* R30: the mark sits dead-centre of the card back regardless of the PNG's own padding */
.dcBack{display:grid;place-items:center}
.dcBack img{display:block;width:58px;height:58px;object-fit:contain;margin:0}
.dcFront{transform:rotateY(180deg);background:linear-gradient(145deg,rgba(55,230,201,.16),rgba(124,92,255,.16)),var(--panel)}
.dcFront b{font-size:26px}
.dcFront span{font-size:10.5px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

/* R19 slider affordance: edge fade whispers "there's more" + grab cursor */
.slideWrap::after{content:"";position:absolute;top:0;bottom:0;right:0;width:56px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(7,9,14,.88));opacity:0;transition:opacity .25s;z-index:2}
.slideWrap.canRight::after{opacity:1}
.slideWrap .pullNav{z-index:3}
/* 0807c: the tile image is a transparent 3D pouch render — shadow follows
   the pouch's alpha, no card-like rounded box */
.ptFace{width:172px;filter:saturate(1.05) drop-shadow(0 18px 26px rgba(0,0,0,.55))}
.pullNav{position:absolute;top:44%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(6px);color:var(--text);font-size:21px;line-height:1;display:grid;place-items:center;z-index:5;transition:opacity .2s;box-shadow:var(--shadow)}
.pullNav.prev{left:-8px}.pullNav.next{right:-8px}
.pullNav:hover{border-color:var(--acc-br)}
/* vault selection mode */
.vCard.selMode{cursor:pointer}
.vCard.selMode .vIm,.vCard.selMode .vNm{pointer-events:none}
.vCard.selOn{border-color:var(--acc) !important;box-shadow:inset 0 0 0 1.5px var(--acc)}
.vTick{position:absolute;top:10px;left:10px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--acc);background:var(--panel);color:var(--acc);display:grid;place-items:center;font:700 13px var(--ff-b);z-index:3}
.vCard.selOn .vTick{background:var(--acc);color:#fff}
@keyframes runIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.holoWrap.bare .holo{display:none}
.wGrid>*,.verifyGrid>*,.howGrid>*,.commitGrid>*,.aGrid2>*,.aGrid2b>*,.aGrid3>*,.mktLayout>*,.detail>*{min-width:0}
.vform select{max-width:100%;text-overflow:ellipsis}
.tickWrap,.ticker{max-width:100%}

/* modal & popup form fields — one consistent, comfortable look (34/35) */
.mBox .vform{display:grid;gap:10px}
.mBox .ruleIn,.mBox .sel,.mBox textarea.ruleIn{width:100%;text-align:left;padding:11px 13px;font-size:13px;border-radius:10px;min-height:42px;box-sizing:border-box}
.mBox .ruleIn::placeholder{color:var(--faint)}
.mBox .ruleIn:focus,.mBox .sel:focus,.mBox textarea:focus{border-color:var(--acc-br);outline:none;box-shadow:0 0 0 3px var(--acc-soft)}
.mBox .btn.wide{margin-top:4px}

/* admin charts: values appear on hover (price tips) */
.chBar .chVal{opacity:0;transition:opacity .12s;pointer-events:none}
.chBar:hover .chVal{opacity:1}
.chBar rect{cursor:default}

/* ===== mobile optimization (49) ===== */
@media (max-width:760px){
  .wrap{padding-inline:16px}
  .nav-in{gap:8px;padding:0 12px !important}
  .nav-in .navlink{padding:8px 9px}
  .balchip{padding:4px 5px 4px 10px;gap:6px}
  .balchip .amt{font-size:12px}
  #langBtn{padding:0 9px !important}
  .themeBtn{width:32px;height:32px}
  .avatar{width:32px;height:32px}
  .sectHead{flex-wrap:wrap;gap:10px}
  .sectHead>div{flex-wrap:wrap}
  .amain table.tbl,#screens table.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tblwrap table.tbl{display:table}
  #questBuilder .qbRow{grid-template-columns:1fr 84px 50px 50px 26px 26px !important;gap:5px !important}
  .acard{overflow-x:auto}
  #wBoxes{grid-template-columns:1fr !important}
  .pullNav.prev{left:4px}.pullNav.next{right:4px}
  .hero{grid-template-columns:1fr;gap:24px;padding-top:16px}
  .heroRoom{min-height:300px}
  .h1{font-size:31px}
  .h2{font-size:23px}
  .sub{font-size:14px}
  .filtRow{overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filtRow::-webkit-scrollbar{display:none}
  .filtRow .fchip{flex:none}
  #shopQ{min-width:120px}
  .packGrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .detail{grid-template-columns:1fr;gap:14px;padding:10px 0 10px}
  /* 0807u: mobile hero COMPACT — smaller pack, tight paddings, so chips,
     title and the buy button land inside the first screen */
  .dRoom{min-height:0;padding:8px 10px 16px}
  #dPack .pack{--pw:168px !important}
  .packFan{transform:scale(.68);transform-origin:top center;height:248px}
  .priceRow{flex-wrap:wrap;gap:10px}
  .buyRow .btn{width:100%}
  /* 0811 (Aron: "fix this layout on mobile, each box should be 100%"). The admin
     two-column grids keep their columns on a phone, so the Pack builder's SKU
     list and Pool inspector sat side by side at half width each and nothing was
     readable. One column, full width, everywhere in the admin. */
  #admin .aGrid2, #admin .aGrid2b, #admin .aGrid3{grid-template-columns:1fr !important}
  #admin .acard{min-width:0}
  #admin .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* 0811 (Aron: "Use points button is kinda ugly/out of context for layout on
     mobile"). It is a .chip, not a .btn, so the width:100% above never reached
     it and it sat as a loose pill under two full-width buttons. Give it the same
     footprint as the buttons it belongs with. */
  .buyRow #dPts{width:100%;justify-content:center;height:40px;border-radius:12px;font-size:13px}
  .oddsDrop{position:fixed;left:12px;right:12px;top:20vh;width:auto;z-index:120}
  /* 0811 (Aron: "We need to fix the user activity dropdown on mobile"). The menu
     is 324px wide and anchored right:0 to a button near the right edge, so on a
     375px phone its left edge lands off-screen and the text is clipped — exactly
     what his screenshot shows. Same treatment .oddsDrop already gets: pin it to
     the viewport instead of to the button, and let a long list scroll. */
  .notifMenu{position:fixed;left:12px;right:12px;top:62px;width:auto;max-height:min(70vh,540px);overflow-y:auto;overscroll-behavior:contain;z-index:120}
  .poolStrip.big{grid-template-columns:repeat(2,1fr)}
  .ripRoom{min-height:calc(100dvh - 150px)}
  .ripHUD{flex-wrap:wrap;gap:8px}
  .tickWrap{margin-inline:-16px}
  .commitGrid,.howGrid{grid-template-columns:1fr}
  .footGrid{grid-template-columns:1fr 1fr;gap:22px}
  .vStats{grid-template-columns:1fr 1fr}
  .aGrid2,.aGrid2b,.aGrid3{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tblwrap .tbl{min-width:660px}
  .aHead{flex-wrap:wrap;gap:8px}
  .aHead .search{min-width:0;flex:1}
  .mBox{max-width:calc(100vw - 24px);padding:18px 16px;max-height:88vh;overflow:auto}
  .assetHero{grid-template-columns:1fr}
  .slabPhoto{max-width:88vw}
  .pgHead{margin:20px 0 10px}
  .qty button{min-width:38px;min-height:38px}
  .heroCtas .btn{flex:1;text-align:center}
}
@media (max-width:480px){
  .lgType{display:none}
  .packGrid{grid-template-columns:1fr 1fr}
  .footGrid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
  .vStats{grid-template-columns:1fr 1fr}
  .h1{font-size:27px}
  .dPrice{font-size:26px}
  /* compact topbar: everything on ONE row, no wrapped auth buttons */
  .nav-in{padding:0 10px !important;gap:8px;flex-wrap:nowrap}
  .lgMark{width:26px}
  #mobMenuBtn{width:36px;height:36px}
  .themeBtn{height:34px}
  #langBtn{padding:0 9px !important;font-size:11px !important}
  .balchip{padding:3px 3px 3px 10px}
  .balchip .amt{font-size:12.5px}
  #topAuth .btn{padding:6px 11px;font-size:11.5px}
  .guest .balchip{display:none} /* guests: join first — balance appears once signed in */
}

/* R41: list rows — the status chip and action buttons had no list-mode rules, so
   they kept their grid positions and broke the row. Placed after every base card
   rule so nothing later reinstates a column. */
.mGrid.listMode .vCard .stChip{position:static;order:-1;flex:none;align-self:center}
.mGrid.listMode .vActs{margin:0;flex:none;display:inline-flex;gap:6px;white-space:nowrap}
.mGrid.listMode .vActs .btn{white-space:nowrap}
.mGrid.listMode .vCard>*{align-self:center}
@media (max-width:700px){
  .mGrid.listMode .vActs{display:none}   /* tap the card instead */
  .mGrid.listMode .vCard .stChip{display:none}
}

/* ---- 0808j: asset SPA screen (ported from the standalone asset page) ---- */
.aWrap{max-width:1150px;margin:0 auto;padding:26px 22px 70px}
.assetHero{display:grid;grid-template-columns:minmax(320px,450px) 1fr;gap:48px;align-items:start;margin-top:24px}
@media(max-width:920px){.assetHero{grid-template-columns:1fr;gap:28px}}
.assetStage{--tg:124,92,255;position:sticky;top:24px;border-radius:22px;border:1px solid var(--border);min-height:500px;display:grid;place-items:center;overflow:hidden;padding:42px 28px;background:radial-gradient(120% 85% at 70% 0%,rgba(var(--tg),.17),transparent 55%),linear-gradient(170deg,#10141f,#070a12 70%)}
@media(max-width:920px){.assetStage{position:static;min-height:400px}}
.assetStage .floorGlow{position:absolute;bottom:7%;width:62%;height:28px;border-radius:50%;background:rgba(var(--tg),.30);filter:blur(28px)}
.assetStage .photo{max-width:100%;max-height:480px;border-radius:14px;filter:drop-shadow(0 26px 52px rgba(0,0,0,.6));position:relative;z-index:2}
.aH1{font-family:Sora,Inter,sans-serif;font-size:clamp(24px,3vw,34px);line-height:1.12;margin:10px 0 8px}
.bbBanner{display:flex;align-items:center;gap:12px;background:var(--accB-soft);border:1px solid var(--accB-br);border-radius:12px;padding:12px 16px;margin-top:16px}
.bbBanner b{color:var(--accB)}
.bbBanner .pct{margin-left:auto;flex:none;background:var(--accB);color:#06231d;border-radius:999px;padding:4px 12px;font:700 11px var(--ff-b)}
.fullCard{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px 24px;margin-top:18px}
.actRow{display:grid;grid-template-columns:110px 1fr 1fr 110px 130px;gap:10px;align-items:center;padding:12px 0;border-top:1px solid var(--border2);font-size:13px}
.actRow:first-of-type{border-top:0}
.actRow .lb{font:700 10px var(--ff-b);letter-spacing:.12em;text-transform:uppercase}
.actRow .lb.k-mint{color:var(--accB)} .actRow .lb.k-sale{color:var(--gain)} .actRow .lb.k-list{color:var(--acc)} .actRow .lb.k-retired,.actRow .lb.k-sellback{color:var(--danger)} .actRow .lb.k-ship{color:var(--amber)}
.actRow a{color:var(--text);text-decoration:none} .actRow a:hover{text-decoration:underline}
@media(max-width:760px){.actRow{grid-template-columns:90px 1fr 90px;font-size:12px}.actRow .cellHide{display:none}}
.pbGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:12px}
.pbGrid .cell{background:var(--panel);padding:14px 16px}
.pbGrid .k{font:700 9.5px var(--ff-b);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.pbGrid .v{font-size:13.5px;font-weight:650;margin-top:4px;word-break:break-word}
.pbGrid a{color:var(--accB);text-decoration:none} .pbGrid a:hover{text-decoration:underline}
.serialCard{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:11px 15px;margin-top:14px}
.serialCard code{font:600 11px var(--mono);letter-spacing:.03em;word-break:break-all;color:var(--muted);flex:1}
.histChart{margin-top:10px}
#favHeartA{color:#ff5d8f;font-size:14px}
.offRow{display:flex;align-items:center;gap:14px;background:var(--panel2);border:1px solid var(--border);border-radius:11px;padding:10px 14px;font-size:12.5px;flex-wrap:wrap}
.offRow .offFrom{font-weight:700;flex:none;min-width:90px}
.offRow .offWhat{flex:1;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:150px}
.offRow .offItems img{width:22px;height:30px;object-fit:cover;border-radius:3px;margin-right:2px;vertical-align:middle}
.offRow .offTot{font-size:14px;flex:none}
.cmRow{display:flex;gap:11px;align-items:flex-start}
.cmAv{flex:none;width:30px;height:30px;border-radius:50%;background:var(--panel3);display:grid;place-items:center;font:700 11px var(--ff-b);color:var(--muted)}
.cmBody{font-size:13px;line-height:1.5}
.cmHead{display:block;font-size:11.5px;color:var(--faint)}
.cmHead a{color:var(--text);text-decoration:none;font-weight:700}
.ofVault{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;max-height:240px;overflow:auto;margin:8px 0 12px;padding:2px}
.ofCardOpt{display:flex;gap:9px;align-items:center;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:7px 9px;cursor:pointer;text-align:left;color:var(--text)}
.ofCardOpt img{width:30px;height:41px;object-fit:cover;border-radius:4px;flex:none}
.ofCardOpt.on{border-color:var(--accB);background:rgba(55,230,201,.07)}
.ofCardOpt .nm{font-size:11.5px;font-weight:650;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ofCardOpt .pv{font-size:10.5px;color:var(--faint)}
.ofTotal{display:flex;justify-content:space-between;align-items:center;background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;font-weight:700;margin-bottom:8px}

/* ---- 0808n §16: ADMIN ON MOBILE ----------------------------------------
   The admin sidebar used to flatten into a 20-item horizontal scroll strip
   with its group titles hidden — unusable on a phone. Below 1080px it turns
   into a sticky bar + a full-screen, grouped section menu. */
#admBar{display:none}
@media (max-width:1080px){
  #admBar{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:520;
    padding:10px 14px;background:rgba(11,14,20,.94);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border)}
  #admBar #admMenuBtn{display:grid;place-items:center;width:38px;height:38px;flex:none;
    border-radius:11px;border:1px solid var(--border);background:var(--panel2);color:var(--text)}
  #admBar #admBarTitle{font:700 15px var(--ff-d);letter-spacing:.01em}
  /* the sidebar becomes the menu sheet */
  #admin > .aside{display:none;position:fixed;inset:0;z-index:600;height:100dvh;
    flex-direction:column;align-items:stretch;overflow-y:auto;gap:2px;
    padding:16px 14px 40px;background:var(--bg);border:0}
  #admin.navOpen > .aside{display:flex}
  #admin.navOpen > .aside .aTit{display:block;margin:16px 0 6px;opacity:.7}
  #admin.navOpen > .aside .anav{flex-direction:column;gap:2px}
  #admin.navOpen > .aside .anav button{width:100%;justify-content:flex-start;padding:13px 14px;font-size:14.5px}
  #admin.navOpen > .aside .logo{padding:4px 4px 10px}
  #admin.navOpen{overflow:hidden}
  /* content breathes: cards and tables get the full width */
  #admin .wrap{padding-left:14px;padding-right:14px}
  #admin .kpis{grid-template-columns:1fr 1fr;gap:10px}
  #admin .acard{padding:16px 14px}
  #admin .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #admin .tbl{min-width:640px}
  #admin .aGrid2,#admin .aGrid2b,#admin .aGrid3{grid-template-columns:1fr}
  #admin .limRow{grid-template-columns:1fr !important;gap:6px}
  #admin .limRow input,#admin .limRow select{width:100% !important}
  #admin .mBox{max-width:100vw !important;width:100vw !important;border-radius:0;min-height:100dvh}
  #admin .dRowBtns{flex-wrap:wrap}
}
@media (max-width:560px){
  #admin .kpis{grid-template-columns:1fr}
}

/* ---- 0808n §27: support chat (collector widget) ---- */
#supBtn{position:fixed;right:18px;bottom:18px;z-index:540;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--acc-br);color:#fff;cursor:pointer;
  background:linear-gradient(140deg,var(--acc),#5b46c9);box-shadow:0 12px 30px rgba(0,0,0,.45);
  transition:transform .15s}
#supBtn:hover{transform:translateY(-2px)}
#supBtn .supDot{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--danger);color:#fff;font:700 11px var(--ff-b);display:grid;place-items:center;border:2px solid var(--bg)}
#supPanel{position:fixed;right:18px;bottom:84px;z-index:541;width:min(380px,calc(100vw - 36px));
  max-height:min(560px,calc(100dvh - 120px));display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border);border-radius:18px;overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.55)}
#supPanel .supHead{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border2);background:var(--panel2)}
#supPanel .supHead b{font-family:var(--ff-d);font-size:14.5px}
#supBody{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
#supBody .sMsg{max-width:84%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
#supBody .sMsg.me{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:5px}
#supBody .sMsg.them{align-self:flex-start;background:var(--panel3);border:1px solid var(--border);border-bottom-left-radius:5px}
#supBody .sWhen{font-size:10.5px;color:var(--faint);margin-top:3px}
#supPanel .supFoot{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border2);background:var(--panel2)}
#supPanel .supFoot .inp{flex:1}
@media (max-width:560px){
  #supPanel{right:8px;left:8px;bottom:76px;width:auto;max-height:calc(100dvh - 110px)}
  #supBtn{right:12px;bottom:12px}
}
/* 0808n §27: [hidden] must beat the display rules above (an attribute does not
   outrank a class/id selector) — and the widget is SHOP furniture: the admin
   cockpit never shows it. */
#supBtn[hidden],#supPanel[hidden],#supBtn .supDot[hidden]{display:none !important}
#admin.on ~ #supBtn,#admin.on ~ #supPanel{display:none !important}
#supBody .sMsg.me .sWhen{color:rgba(255,255,255,.78)}
/* 0808o §27: emoticon row in the collector chat */
#supPanel .supEmo{display:flex;gap:3px;padding:8px 12px 0;background:var(--panel2)}
#supPanel .supEmo button{border:1px solid var(--border);background:var(--panel);color:var(--text);
  border-radius:9px;padding:3px 8px;font-size:15px;line-height:1.2;cursor:pointer}
#supPanel .supEmo button:hover{border-color:var(--acc-br)}
/* 0808o §8: latest-pulls tile — rarity pill on the art, value under the title */
.pullTile .pImg{position:relative}
.pullTile .pTier{position:absolute;top:8px;left:8px;z-index:2;font-size:9.5px;padding:2px 8px}
.pullTile .pValTop{display:block;color:var(--accB);font-weight:800;font-size:14px;margin:2px 0 6px}

/* ---- 0808p: pack-builder catalogue tiles + mobile builder ---- */
.cgTile{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--border);
  border-radius:10px;padding:10px;text-align:center;min-height:230px}
.cgTile:hover{border-color:var(--acc-br)}
/* the thumb box is a FIXED size whether or not there is an image — that is
   what keeps the grid even (Aron: "no img in same size as when image") */
.cgThumb{height:90px;display:grid;place-items:center;background:#0d1117;border-radius:6px;overflow:hidden;position:relative}
.cgThumb img{max-height:90px;max-width:100%;object-fit:contain;border-radius:5px}
.cgThumb .cgNo{display:none;font:700 9.5px var(--ff-b);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.cgThumb:not(:has(img)) .cgNo,.cgThumb.noimg .cgNo{display:block}
@media (max-width:760px){
  /* builder goes full-bleed and its controls stop being 86px stubs */
  #m-builder{padding:0 !important}
  #m-builder .mBox{max-width:100vw !important;width:100vw !important;border-radius:0;
    min-height:100dvh;padding:16px 12px 24px}
  #m-builder .h3{font-size:17px}
  #m-builder .sel,#m-builder .ruleIn{min-width:0 !important}
  #m-builder #cgGame,#m-builder #cgTier,#m-builder #cgSet,#m-builder #cgRar,
  #m-builder #cgSType,#m-builder #cgSort,#m-builder #cgPmin,#m-builder #cgPmax{
    flex:1 1 calc(50% - 5px) !important;width:auto !important}
  #m-builder #cgQ{flex:1 1 100% !important;width:auto !important;order:9}
  #m-builder #cgLoad{order:10;flex:0 0 auto}
  #m-builder #cgGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;max-height:56vh}
  #m-builder .cgTile{min-height:210px;padding:8px}
  #m-builder #lkPrev{height:70px;margin-left:0}
  #m-builder [data-fill],#m-builder [data-commit],#m-builder #bAutoOdds,
  #m-builder #bAutoTier,#m-builder #cgLoad{flex:1 1 auto}
}
/* names clamp to 2 lines so tiles in a row end up the same height */
.cgTile > div:nth-of-type(2){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:30px;line-height:1.3}
.cgTile > div:nth-of-type(3){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- 0808q: COMMUNITY CHAT (screen + dock share one row style) ---- */
.chWrap{display:grid;grid-template-columns:4fr 1fr;gap:16px;align-items:start;margin-top:14px}
.chMain{background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.chBody{height:min(62vh,620px);overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:12px;
  scrollbar-width:thin}
.chBody::-webkit-scrollbar{width:8px}
.chBody::-webkit-scrollbar-thumb{background:#20263a;border-radius:8px}
.chEmpty{margin:auto;text-align:center;color:var(--faint)}
.chMsg{display:flex;gap:10px;align-items:flex-start}
.chMsg.hid{opacity:.42}
.chAv{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 32px;background:#141a2a;
  border:1px solid var(--border)}
.chAvI{display:grid;place-items:center;font:700 11px var(--ff-b);letter-spacing:.04em;color:var(--faint)}
.chBub{min-width:0;flex:1}
.chTop{display:flex;align-items:center;gap:7px;line-height:1}
.chWho{font:700 12.5px var(--ff-b);color:var(--ink);text-decoration:none}
a.chWho:hover{color:var(--acc)}
.chTag{font:700 8.5px var(--ff-b);letter-spacing:.12em;background:var(--acc);color:#0b0e1a;
  padding:3px 5px;border-radius:4px}
.chWhen{font:400 10.5px var(--ff);color:var(--faint);font-style:normal;margin-left:auto;white-space:nowrap}
.chTxt{font:400 13.5px/1.5 var(--ff);color:var(--ink2);margin-top:3px;word-break:break-word}
.chIco{margin-right:5px}
/* auto posts read as one line of narration, so the body is muted and the card carries the weight */
.chMsg:not(.k-user) .chTxt{color:var(--faint)}
.chMsg:not(.k-user) .chWho{color:var(--acc)}
.chCard{display:flex;gap:10px;align-items:center;margin-top:7px;padding:8px;border-radius:10px;
  background:#0d1117;border:1px solid var(--border);text-decoration:none;max-width:420px}
.chCard:hover{border-color:var(--acc-br,var(--acc))}
.chCard.grail{border-color:#e0b33a;background:linear-gradient(100deg,#191307,#0d1117 62%);
  box-shadow:0 0 0 1px rgba(224,179,58,.18),0 6px 22px -12px rgba(224,179,58,.55)}
.chCardImg{width:44px;height:58px;flex:0 0 44px;display:grid;place-items:center;border-radius:6px;
  overflow:hidden;background:#0a0d15}
.chCardImg img{max-width:100%;max-height:58px;object-fit:contain}
.chCardImg .chNo{display:none;font:700 7.5px var(--ff-b);letter-spacing:.1em;color:var(--faint);
  text-transform:uppercase;font-style:normal;text-align:center;padding:0 2px}
.chCardImg:not(:has(img)) .chNo,.chCardImg.noimg .chNo{display:block}
.chCardTxt{min-width:0;display:flex;flex-direction:column;gap:2px}
.chCardTxt b{font:700 12.5px var(--ff-b);color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;line-height:1.3}
.chCardTxt i{font:400 11.5px var(--ff);color:var(--faint);font-style:normal}
.chCard.grail .chCardTxt i{color:#e0b33a}
.chComposer{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--border);background:#0c111c}
.chComposer .inp{flex:1;min-width:0}
.chComposer .btn{flex:0 0 auto}
.chNote{padding:0 14px 12px;color:var(--faint);margin:0}
.chSide{display:flex;flex-direction:column;gap:14px}
.chSide .panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 16px}
.chSide .panel h4{margin:0 0 8px;font:700 12px var(--ff-b);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.chSide .panel p{margin:0;line-height:1.55}
.chStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.chStat{background:#0d1117;border:1px solid var(--border);border-radius:10px;padding:10px 6px;text-align:center}
.chStat b{display:block;font:700 18px var(--ff-b);color:var(--ink)}
.chStat span{font:400 10.5px var(--ff);color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
/* dock variant — same rows, tighter */
.dockBody{height:auto;flex:1;min-height:0;padding:12px}
.dockBody .chCard{max-width:none}
.dockBody .chCardImg{width:36px;height:48px;flex:0 0 36px}
.supTabs{display:flex;gap:4px;padding:8px 12px 0;border-bottom:1px solid var(--border);background:#0c111c}
.supTabs button{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:var(--faint);
  font:700 11.5px var(--ff-b);letter-spacing:.06em;text-transform:uppercase;padding:8px 4px;cursor:pointer}
.supTabs button.on{color:var(--ink);border-bottom-color:var(--acc)}
@media (max-width:900px){
  .chWrap{grid-template-columns:1fr}
  .chSide{order:-1}
  .chStats{grid-template-columns:repeat(3,1fr)}
  .chBody{height:min(54vh,480px)}
}

/* ---- 0808q: COMMUNITY DOCK — its own bubble, stacked above the support one.
   When support is off (body.noSup) it takes the corner seat instead. ---- */
#chatBtn{position:fixed;right:18px;bottom:84px;z-index:540;width:54px;height:54px;border-radius:50%;
  border:1px solid var(--border);background:linear-gradient(160deg,#1b2338,#0f1524);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 34px rgba(0,0,0,.5);
  transition:transform .16s ease,border-color .16s ease}
#chatBtn:hover{transform:translateY(-2px);border-color:var(--acc)}
body.noSup #chatBtn{bottom:18px}
#chatBtn .supDot{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;
  background:var(--acc);color:#0b0e1a;font:700 11px var(--ff-b);display:grid;place-items:center}
#chatPanel{position:fixed;right:18px;bottom:150px;z-index:541;width:min(400px,calc(100vw - 36px));
  max-height:min(620px,calc(100dvh - 190px));display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border);border-radius:18px;overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.55)}
body.noSup #chatPanel{bottom:84px;max-height:min(620px,calc(100dvh - 120px))}
.chDHead{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border2);
  background:var(--panel2)}
.chDT{display:flex;flex-direction:column;gap:3px;min-width:0}
.chDT b{font-family:var(--ff-d);font-size:14.5px}
.chLive{display:flex;align-items:center;gap:6px;font:400 11px var(--ff);color:var(--faint)}
.chLive i{width:6px;height:6px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);
  animation:chPulse 2.4s ease-out infinite}
@keyframes chPulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}70%{box-shadow:0 0 0 7px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.chFilters{display:flex;gap:5px;padding:9px 12px;background:var(--panel2);border-bottom:1px solid var(--border2)}
.chFilters button{flex:1;border:1px solid var(--border);background:var(--panel);color:var(--faint);
  border-radius:999px;padding:5px 6px;font:700 10.5px var(--ff-b);letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;transition:background .14s ease,color .14s ease,border-color .14s ease}
.chFilters button:hover{color:var(--ink)}
.chFilters button.on{background:var(--acc);border-color:var(--acc);color:#0b0e1a}
#chatPanel .supEmo{display:flex;gap:3px;padding:8px 12px 0;background:var(--panel2)}
#chatPanel .supEmo button{border:1px solid var(--border);background:var(--panel);color:var(--text);
  border-radius:8px;padding:3px 7px;font-size:14px;cursor:pointer;line-height:1.3}
#chatPanel .supEmo button:hover{border-color:var(--acc)}
#chatPanel .supFoot{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border2);background:var(--panel2)}
#chatPanel .supFoot .inp{flex:1;min-width:0}
#chatPanel .chNote{padding:0 14px 11px;margin:0;background:var(--panel2);color:var(--faint);font-size:11px}
#chatBtn[hidden],#chatPanel[hidden],#chatBtn .supDot[hidden]{display:none !important}
#admin.on ~ #chatBtn,#admin.on ~ #chatPanel{display:none !important}
@media (max-width:640px){
  #chatPanel{right:8px;left:8px;bottom:142px;width:auto;max-height:calc(100dvh - 180px)}
  body.noSup #chatPanel{bottom:76px;max-height:calc(100dvh - 110px)}
  #chatBtn{right:12px;bottom:76px}
  body.noSup #chatBtn{bottom:12px}
}

/* ---- 0808q: admin community-chat screen ---- */
#chatModList{max-height:56vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.chModRow,.chSetRow{display:flex;align-items:center;gap:10px;justify-content:space-between;
  padding:9px 10px;border:1px solid var(--border);border-radius:9px;background:var(--panel2)}
.chSetRow{border:0;background:none;padding:7px 0;border-bottom:1px solid var(--border2)}
.chSetRow:last-of-type{border-bottom:0}
.chModRow b,.chSetRow b{font:700 12.5px var(--ff-b);color:var(--ink)}
.chModRow i.small,.chSetRow i.small{display:block;color:var(--faint);font-style:normal;font-size:11px}
.chModBody{color:var(--text) !important;margin-top:2px;word-break:break-word}
/* 0808q: a badge that needs a human turns red, not just grey */
.anav .bdg.bad{background:rgba(255,94,94,.16);color:#ff7b7b}

/* ---- 0808r (Aron): community page uses the app's own screen chrome, fills the
   viewport, and the type scale is one system across page and dock ---- */
.chWrap{min-height:calc(100dvh - 252px)}
.chMain{display:flex;flex-direction:column;height:calc(100dvh - 252px);min-height:460px}
.chBody{height:auto;flex:1;min-height:0}

/* type: the handle always reads at least as loud as the line under it */
.chWho{font-size:13px}
.chTxt{font-size:13px;line-height:1.5}
.chWhen{font-size:10.5px}
.chTag{font-size:8px;padding:2px 4px}
.chCardTxt b{font-size:12px}
.chCardTxt i{font-size:11px}
.chStat b{font-size:20px}

/* dock: same system, one notch down — it is a 400px column, not a page */
.dockBody .chWho{font-size:12px}
.dockBody .chTxt{font-size:12.5px;line-height:1.45}
.dockBody .chWhen{font-size:9.5px}
.dockBody .chTag{font-size:7.5px}
.dockBody .chAv{width:28px;height:28px;flex-basis:28px}
.dockBody .chAvI{font-size:10px}
.dockBody .chMsg{gap:8px}
.dockBody .chCardTxt b{font-size:11.5px}
.dockBody .chCardTxt i{font-size:10.5px}
#chatPanel .chDHead b{font-size:14px}
#chatPanel .chLive{font-size:10.5px}

/* a pack image is SQUARE (branded 1200x1200) — a portrait slot letterboxed it
   down to a sliver, which read as "the art isn't showing" */
.chCardImg.pack{width:56px;height:56px;flex:0 0 56px;background:#0a0d15}
.chCardImg.pack img{max-height:56px;width:100%;object-fit:cover}
.dockBody .chCardImg.pack{width:46px;height:46px;flex:0 0 46px}
.dockBody .chCardImg.pack img{max-height:46px}

@media (max-width:900px){
  .chWrap,.chMain{min-height:0;height:auto}
  .chBody{height:min(58vh,520px);flex:none}
}

/* ---- 0808r: mobile polish (Aron's phone round) ---- */

/* iOS zooms the whole page whenever a focused field is under 16px. Nothing
   else fixes it — the viewport tag already forbids user scaling.

   0827 (Aron): "Did you fix the login on mobile/signup?"
   type=date was missing from this list, and the auth page styles date at 14px
   — so the ONE required field on the signup form that every collector has to
   touch, date of birth, zoomed the page on every iPhone. The rest of the form
   was already correct, which is exactly why nobody spotted it: you only see it
   on the last field you fill in.

   Listing every type we actually use rather than the ones that had been
   reported, so the next input type added does not repeat this. */
@media (max-width:640px){
  .inp,.ruleIn,.sel,input[type="text"],input[type="email"],input[type="password"],
  input[type="number"],input[type="search"],input[type="date"],input[type="tel"],
  input[type="url"],input[type="datetime-local"],input:not([type]),textarea,select{font-size:16px !important}
  #dockInput,#chInput,#supInput{font-size:16px !important}
}

/* the rip HUD ran the pack name + tx hash across the full width and pushed the
   chips off the edge on a phone */
@media (max-width:640px){
  .ripHUD{flex-wrap:wrap;gap:8px;padding:12px 14px}
  .ripHUD .mid{order:3;flex:1 1 100%;font-size:9.5px;letter-spacing:.14em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
  .ripHUD > span:last-child{margin-left:auto}
  .ripHUD .btn.sm{padding:6px 10px;font-size:11.5px}
}

/* 0808u (Aron): sealed products are physically small — at slab scale they ate
   the whole reveal stage. Sealed ONLY; slabs and raw cards are untouched. */
/* 0811 (Aron: "sealed images are really small now they can go bigger").
   0808u shrank sealed to 62% because a booster at full slab scale filled the
   stage. That over-corrected: a €10 booster is the whole reveal, and at 62% of
   a 250px card it read as a thumbnail. 0.86 keeps it visibly smaller than a
   slab — which was the point — without making the thing he just paid for the
   smallest object on screen. */
.slabPhoto.sealedPhoto{width:calc(var(--cw,250px)*0.86);max-width:62vw}
.slabPhoto.sealedPhoto .cimg{max-height:56vh}
.slabPhotoM.sealedPhoto{max-width:82%;margin-inline:auto}
@media (max-width:760px){
  /* phones have the height to spare and the least width — a sealed booster
     should own the stage here, not hide in the middle of it */
  .slabPhoto.sealedPhoto{width:calc(var(--cw,250px)*0.95);max-width:76vw}
  .slabPhoto.sealedPhoto .cimg{max-height:50vh}
}

/* 0808z: leaderboard avatars — real picture, else initials on the tier gradient */
.podAv{display:grid;place-items:center;overflow:hidden;flex:none}
.podAv.lbInit{font-family:var(--ff-b);font-weight:700;color:#0b0e1a;letter-spacing:.02em}

/* ================= 0808z: EVENTS (raffles) =================
   Event cards, prize rows and the live-draw reel. The reel deliberately reuses
   the rip stage (.room.ripRoom) so a draw feels like an opening — same lighting,
   same weight — without a second stage implementation. */
.rfGrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.rfCard{display:flex;gap:0;flex-direction:column;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:border-color .18s,transform .18s}
.rfCard:hover{border-color:var(--stghair);transform:translateY(-2px)}
.rfArt{aspect-ratio:1200/400;display:grid;place-items:center;background:var(--panel3);overflow:hidden}
.rfArt img{width:100%;height:100%;object-fit:cover;display:block}
/* 0809f: the event hero is HTML, not a baked image — real type at the site's
   own sizes, crisp at any DPI, indexable, and able to carry a LIVE countdown.
   The generated PNG is now only for shares and the chat tile. */
.rfHero{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);
  padding:30px 24px 34px;margin-bottom:20px;display:grid;gap:12px;justify-items:center;text-align:center;
  background:radial-gradient(120% 130% at 88% 0%,rgba(124,92,255,.30),transparent 58%),
             radial-gradient(100% 120% at 6% 100%,rgba(55,230,201,.16),transparent 60%),
             linear-gradient(170deg,#11141c,#0b0d13 70%)}
.rfHero.pv-teal{background:radial-gradient(120% 130% at 88% 0%,rgba(55,230,201,.28),transparent 58%),
             radial-gradient(100% 120% at 6% 100%,rgba(61,99,243,.16),transparent 60%),
             linear-gradient(170deg,#11141c,#0b0d13 70%)}
.rfHero.pv-amber{background:radial-gradient(120% 130% at 88% 0%,rgba(240,178,62,.26),transparent 58%),
             radial-gradient(100% 120% at 6% 100%,rgba(214,96,60,.14),transparent 60%),
             linear-gradient(170deg,#11141c,#0b0d13 70%)}
.rfHero.pv-rose{background:radial-gradient(120% 130% at 88% 0%,rgba(240,90,140,.26),transparent 58%),
             radial-gradient(100% 120% at 6% 100%,rgba(150,70,220,.16),transparent 60%),
             linear-gradient(170deg,#11141c,#0b0d13 70%)}
.rfHeroFan{display:flex;justify-content:center;align-items:flex-end;--fw:clamp(60px,9vw,104px)}
.rfHeroCard{width:var(--fw);margin-inline:calc(var(--fw) * -0.16);border-radius:7px;overflow:hidden;
  box-shadow:0 16px 34px rgba(0,0,0,.55);background:#0d1117;display:block;flex:none}
.rfHeroCard .cimg{width:100%;height:auto;display:block}
.rfHeroCard:not(:only-child):nth-child(1){transform:rotate(-9deg) translateY(9px)}
.rfHeroCard:not(:only-child):nth-child(2){transform:rotate(-4.5deg) translateY(3px)}
.rfHeroCard:not(:only-child):nth-child(4){transform:rotate(4.5deg) translateY(3px)}
.rfHeroCard:not(:only-child):nth-child(5){transform:rotate(9deg) translateY(9px)}
.rfHeroTitle{font:800 clamp(28px,5.2vw,54px)/1.06 var(--ff-d);color:#f4f7fb;margin:6px 0 0;letter-spacing:-.01em}
.rfHeroWhen{display:inline-flex;align-items:center;gap:9px;font:600 14.5px var(--ff-b);color:#b6c0d4}
.rfHeroDot{width:9px;height:9px;border-radius:50%;background:var(--teal,#37e6c9);flex:none;
  box-shadow:0 0 0 4px rgba(55,230,201,.16)}
@media (max-width:760px){ .rfHero{padding:22px 16px 26px} }
.rfBody{padding:14px 16px 16px}
.rfHead{display:flex;align-items:center;gap:10px;justify-content:space-between}
.rfHead .h3{margin:0;font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rfMeta{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.rfDetailGrid{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start}
/* Courtyard-style prize grid: the card IS the tile (Aron's reference).
   Desktop matches .packGrid exactly; mobile is a hard 2-up, because one huge
   card per row makes a five-prize event feel like a scroll marathon. */
/* 0809e (Aron: "prizes are way too big on desktop"): sized like the pool chase
   strip (.poolStrip.big), not like pack tiles — a prize is a card in a list,
   not a hero. At 262px five prizes filled the screen. Mobile stays a 2-up. */
.rfPrizeGrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
@media (max-width:760px){ .rfPrizeGrid{grid-template-columns:1fr 1fr;gap:10px} }
.rfPrizeCard{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:border-color .18s,transform .18s}
.rfPrizeCard:hover{border-color:var(--stghair);transform:translateY(-2px)}
/* the art well reads like .poolC's: the FULL slab (contain), never cropped in
   half, over a blurred low-opacity copy of itself so the frame still fills */
.rfPrizeArt{position:relative;aspect-ratio:63/88;background:#0d1117;display:grid;place-items:center;overflow:hidden}
.rfArtBg{position:absolute;inset:-14%;background-size:cover;background-position:center;
  filter:blur(18px) saturate(1.1);opacity:.22;pointer-events:none}
.rfArtImg{position:relative;width:100%;height:100%;object-fit:contain;padding:9px;z-index:1}
.rfPrizeArt .rfNoArt{font-size:40px;opacity:.35}
/* the tier ring the pool chases wear */
.rfPrizeCard.t-grail{border-color:rgba(240,178,62,.55);box-shadow:0 0 22px -8px rgba(240,178,62,.45)}
.rfPrizeCard.t-epic{border-color:rgba(168,85,247,.5);box-shadow:0 0 20px -8px rgba(168,85,247,.4)}
.rfPrizeCard.t-rare{border-color:rgba(56,189,248,.45)}
.rfPrizeRank{position:absolute;top:10px;right:10px;background:rgba(6,11,20,.82);color:#f4f7fb;
  border-radius:999px;padding:4px 10px;font:700 12px var(--ff-b);backdrop-filter:blur(6px)}
/* body reads like a .poolC: name, set, then a meta row with the tier tag left
   and the price right */
.rfPrizeBody{padding:8px 9px 10px;display:grid;gap:2px}
.rfPrizeName{font:600 11.5px var(--ff-b);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rfPrizeSet{color:var(--faint);font-size:10.5px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rfPrizeMeta{display:flex;align-items:center;gap:6px;margin-top:4px}
.rfPrizeMeta .num{font-size:12.5px;font-weight:700}
.rfPrizeEntries{color:var(--faint);font-size:10.5px}
.rfPrizeWin{margin-top:8px;padding-top:8px;border-top:1px solid var(--border2);font-size:12.5px}
.rfPrizePts{position:absolute;top:10px;left:10px;background:rgba(6,11,20,.82);color:#f4f7fb;
  border-radius:999px;padding:4px 10px;font:700 12px var(--ff-b);backdrop-filter:blur(6px)}
@media (max-width:760px){
  .rfPrizeBody{padding:8px 9px 10px}
  .rfPrizeRank,.rfPrizePts{font-size:11px;padding:3px 8px}
}

/* one prize as its own page — the card, the numbers, the entry box */
.rfPrizePage{display:grid;grid-template-columns:320px 1fr;gap:34px;align-items:start}
.rfPrizeShot{display:grid;place-items:center}
.rfTrust{display:flex;gap:16px;flex-wrap:wrap;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 14px;font-size:12.5px;color:var(--muted);margin-bottom:14px}
.rfTrust span{white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
/* monochrome, inherits colour — no full-colour emoji anywhere in this module */
.rfI{flex:none;opacity:.85}
.rfThumb.noimg .rfI,.rfNoArt .rfI{opacity:.32}
.rfValueBox{display:flex;justify-content:space-between;align-items:center;gap:16px;
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:13px 16px;margin-bottom:10px}
.rfValueBox b{font-size:19px}
@media (max-width:900px){ .rfPrizePage{grid-template-columns:1fr;gap:20px} }

/* the entry box — the CTA runs full width under the price line, so the thing
   you came to press is never a small button in a corner (Aron) */
.rfEnterBox{margin-top:22px;display:grid;gap:14px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 20px}
.rfEnterHead{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.rfEnterPts{font:800 26px var(--ff-d);color:var(--text);line-height:1.1}
.rfEnterPts span{font:600 13px var(--ff-b);color:var(--muted)}
.rfEnterBox .btn.wide{width:100%}
.rfEnterCtas{display:flex;gap:10px;flex-wrap:wrap}

.rfPrizes{display:grid;gap:10px;margin-top:20px}
.rfPrize{display:flex;gap:14px;align-items:center;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 14px}
.rfThumb{width:var(--cw,92px);aspect-ratio:63/88;border-radius:9px;overflow:hidden;position:relative;
  background:var(--panel3);flex:none;display:grid;place-items:center}
/* 0809d (Aron: "the card is deformed"): CONTAIN, never cover. A slab photo is
   shot in its holder and is nowhere near 63:88 — cropping it to the card box
   cut the label off and squashed what was left. */
.rfThumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4px}
.rfThumb.noimg span{font-size:26px;opacity:.5}
@media (max-width:900px){ .rfDetailGrid{grid-template-columns:1fr} }

/* the draw stage flows in a COLUMN. It deliberately does not reuse .ripCenter:
   that one is a grid with `>*{grid-area:1/1}`, which stacks every child in the
   same cell — correct for the rip (the reveal sits on the pack) and the reason
   the prize card, the reel and the result all printed on top of each other here. */
.drawCenter{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:20px;padding:16px 20px;position:relative;z-index:5}
.drawCenter > *{width:100%;display:flex;justify-content:center}
@media (max-width:760px){ .drawCenter{gap:14px;padding:12px 14px} }

/* the reel: a vertical strip of handles that scrolls past and eases onto the
   winner. Cell height is mirrored in app.js (renderDraw) — change both. */
.drawReel{height:138px;width:min(420px,86vw);overflow:hidden;position:relative;
  border:1px solid rgba(244,247,251,.14);border-radius:12px;background:rgba(244,247,251,.04);
  display:grid;place-items:center}
.drawStrip{position:absolute;top:0;left:0;right:0;will-change:transform}
.drawCell{display:grid;place-items:center;height:46px;font:600 15px var(--ff-b);color:var(--stink2)}
.drawCell.win{color:var(--stink)}
.drawReel::before,.drawReel::after{content:"";position:absolute;left:0;right:0;height:46px;z-index:2;pointer-events:none}
.drawReel::before{top:0;background:linear-gradient(rgba(6,11,20,.92),rgba(6,11,20,0))}
.drawReel::after{bottom:0;background:linear-gradient(rgba(6,11,20,0),rgba(6,11,20,.92))}
/* one phase fills the stage; each one fades/rises in so the change of state is
   the animation rather than a redraw */
.drawPhase{display:grid;gap:10px;justify-items:center;text-align:center;width:100%;
  animation:drawPhaseIn .4s cubic-bezier(.2,.9,.25,1) both}
@keyframes drawPhaseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.drawLbl{font:600 11.5px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--stink2)}
.drawLbl.dim{opacity:.65}
.drawUp{font:800 26px/1.15 var(--ff-d);color:var(--stink);max-width:22ch}
.drawSub{font-size:13px;color:var(--stink2);margin:0}
.drawNote{font-size:13px;color:var(--stink2);max-width:44ch;margin:2px auto 0}
.drawMine{font:700 14px var(--ff-b);color:var(--accB)}
.drawPhase.ph-win .drawWin{margin-top:2px}
/* the roll of honour at the end */
.drawRoll{display:grid;gap:8px;width:min(520px,92vw);margin-top:4px}
.drawRollRow{display:flex;gap:12px;align-items:center;text-align:left;color:var(--stink);
  background:rgba(244,247,251,.05);border:1px solid rgba(244,247,251,.12);border-radius:12px;padding:8px 12px}
@media (max-width:760px){ .drawUp{font-size:21px} }

/* pre-draw: the prize fan + a big countdown, so the stage is worth opening
   before the draw runs (Aron) */
/* The fan sizes itself off the viewport. It used to be five 118px thumbs with
   `gap:-10px` — which is not valid CSS and was simply dropped — so on a phone
   the row was ~410px wide inside a 375px screen and hung off both edges.
   Card width and the overlap now derive from one clamp, so five cards always
   land inside the stage: 5×fw − 4×0.34×fw ≈ 3.6×fw. */
.drawFan{--fw:clamp(84px,20vw,168px);display:flex;justify-content:center;align-items:flex-end;max-width:100%;margin-bottom:6px}
.drawFan .rfThumb{width:var(--fw);margin-inline:calc(var(--fw) * -0.17);
  box-shadow:0 18px 40px rgba(0,0,0,.5);border:1px solid rgba(244,247,251,.12)}
/* 0809f (Aron): the fan angles only apply when there IS a fan. With a single
   prize, nth-child(1) still tilted it — and a transform does not affect
   layout, so the rotated corner hung over the label underneath. :only-child
   keeps one card upright and in its own box. */
.drawFan .rfThumb:not(:only-child):nth-child(1){transform:rotate(-10deg) translateY(10px)}
.drawFan .rfThumb:not(:only-child):nth-child(2){transform:rotate(-5deg) translateY(3px)}
.drawFan .rfThumb:not(:only-child):nth-child(4){transform:rotate(5deg) translateY(3px)}
.drawFan .rfThumb:not(:only-child):nth-child(5){transform:rotate(10deg) translateY(10px)}
.drawFan .rfThumb:only-child{margin-inline:0}
/* the burst host sits at the stage centre and never takes layout space */
#drawPt{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;z-index:9}
.drawReveal{display:grid;place-items:center;animation:drawUp .55s cubic-bezier(.2,.9,.25,1) both}
@keyframes drawUp{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
.drawWaitBox{text-align:center;display:grid;gap:6px;justify-items:center}
.drawBig{font:800 44px/1.05 var(--ff-d);color:var(--stink);letter-spacing:.01em;font-variant-numeric:tabular-nums}
/* no mobile margin override — the --fw clamp above already scales the overlap,
   and a fixed -16px here is what fought it and pushed the fan off screen */
@media (max-width:760px){ .drawBig{font-size:34px} }

.drawPrizeCard{display:flex;gap:16px;align-items:center;color:var(--stink);text-align:left}
.drawPrizeCard .small{color:var(--stink2)}
.drawWin{text-align:center;color:var(--stink);font:700 19px var(--ff-b);display:grid;gap:4px;justify-items:center}

/* admin events (0808z) — the builder form grid, shared by the event fields
   and the add-prize row.
   NB: .ruleIn is 74px wide by design (it is the rewards rule-builder's numeric
   input). Every screen that reuses it as a real form field has to undo that —
   #companyCard and .mBox do the same. Without this the event form collapsed to
   a column of 74px stubs reading "New even" / "Banner im" / "Prize carc". */
.rfForm{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end}
.rfForm .rfF{display:grid;gap:5px;min-width:0}
.rfForm .rfF.wide{grid-column:1/-1}
.rfForm .rfLbl{font-size:11.5px;color:var(--faint);letter-spacing:.02em}
.rfForm .ruleIn,.rfForm .sel,.rfForm textarea.ruleIn{
  width:100%;box-sizing:border-box;text-align:left;padding:9px 11px;font-size:13px;
  min-height:38px;border-radius:9px;font-family:var(--ff-b,inherit);font-weight:500}
.rfForm textarea.ruleIn{resize:vertical;min-height:66px;line-height:1.5}
.rfForm .ruleIn::placeholder{color:var(--faint)}
.rfForm .ruleIn:disabled,.rfForm .sel:disabled{opacity:.5;cursor:not-allowed}
.rfForm .ruleIn:focus,.rfForm .sel:focus{border-color:var(--acc-br);outline:none;box-shadow:0 0 0 3px var(--acc-soft)}
/* numeric rules sit in a tighter row — they are 2-3 characters, not sentences */
.rfForm.rfNums{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.rfAdm .rfSect{font-size:11.5px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase;
  margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--border2)}
.rfAdm .rfSect:first-of-type{margin-top:14px}
.rfAdm .rfTop{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rfAdm .rfTop h4{margin:0;flex:1;min-width:200px}

/* the prize picker — same catalogue the pack builder browses */
.rfPickGrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  max-height:52vh;overflow:auto;padding:2px}
.rfPickTile{display:grid;gap:4px;justify-items:center;text-align:center;padding:10px;cursor:pointer;
  background:var(--panel2);border:1px solid var(--border);border-radius:12px;color:var(--text);
  font:inherit;transition:border-color .15s,transform .15s}
.rfPickTile:hover{border-color:var(--acc-br);transform:translateY(-2px)}
.rfPickTile.picked{opacity:.45;pointer-events:none}
.rfPickImg{width:100%;aspect-ratio:63/88;border-radius:8px;overflow:hidden;background:var(--panel3);
  display:grid;place-items:center}
.rfPickImg img{width:100%;height:100%;object-fit:cover}
.rfPickName{font-size:12.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.rfPickVal{font-weight:700;font-size:13px}
/* 0828: the upstream product id. Two tiles here can be identical on name, set,
   number, language, rarity, finish and image and still be different cards at
   very different prices — this is the only thing that tells them apart. */
.rfPickId{display:block;margin-top:2px;font-size:10px;letter-spacing:.04em;color:var(--faint);font-variant-numeric:tabular-nums}

/* 0809ao: BROADCAST mode — /draw/{slug}?broadcast=1
   The draw page is meant to be screen-shared, but a capture still included the
   site header, nav and dock buttons. This makes the browser window the shot:
   chrome gone, stage scaled up, so OBS can capture the window with no cropping
   and the type is readable at streaming bitrates. Applies to the draw screen
   only — the class is set by go() and removed on every other route. */
/* real element ids, checked in the DOM — .siteHead/.sideNav/.banner were my
   guesses and do not exist in this shell */
body.broadcast #shopNav,
body.broadcast #shopFoot,
body.broadcast #bonusBar,
body.broadcast #maintBar,
body.broadcast #supBtn,
body.broadcast #chatBtn { display: none !important; }
body.broadcast { background: #05070e; }
body.broadcast #s-draw { padding-top: 0 !important; }
body.broadcast .drawCenter { transform: scale(1.18); transform-origin: center top; }
body.broadcast .drawWin { font-size: 1.35em; }
@media (min-width: 1400px) {
  body.broadcast .drawCenter { transform: scale(1.32); }
}

/* 0810d: a message that arrived since the last paint eases in, so your eye is
   told something is new rather than having to notice the room changed. Short
   and small on purpose — chat repaints often and a long animation on every
   poll would be seasick. Respects reduced-motion. */
@keyframes chNewIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.chMsg.chNew { animation: chNewIn .28s cubic-bezier(.22,.9,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .chMsg.chNew { animation: none; } }

/* 0810f (Aron: "avatars not being centered"). The podium circle had
   overflow:hidden and place-items:center, but nothing told the IMAGE how to
   fill it — so an uploaded avatar rendered at object-fit:fill and was stretched
   to a square, which on a non-square photo reads as off-centre and squashed.
   Cover + centre crops it instead, the same rule the vault tiles use. */
.podAv img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

/* 0810g: points-history heatmap. 7 rows (Mon-Sun) flowing into week columns,
   sized to fit a year without horizontal scroll on desktop and scrolling
   gracefully on a phone rather than squashing the cells to invisibility. */
.phGrid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px;overflow-x:auto;padding-bottom:4px}
.phC{width:11px;height:11px;border-radius:3px;background:var(--panel2);display:block;flex:none}
.phC.l1{background:color-mix(in srgb,var(--acc) 28%,var(--panel2))}
.phC.l2{background:color-mix(in srgb,var(--acc) 50%,var(--panel2))}
.phC.l3{background:color-mix(in srgb,var(--acc) 74%,var(--panel2))}
.phC.l4{background:var(--acc)}

/* 0810h: courtyard-style rank pill beside the collector name — the rank colour
   drives it, so Diamond and Member are recognisable at a glance. */
.rankPill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:99px;
  font:600 11.5px/1 var(--ff-b);letter-spacing:.02em;color:var(--rk,#8892a6);
  background:color-mix(in srgb,var(--rk,#8892a6) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--rk,#8892a6) 38%,transparent)}

/* 0810i: Rewards hero — the courtyard-style banner carrying who you are, your
   points and where the season stands. Uses the brand gradient rather than a
   flat panel so it reads as the top of the page, not another card. */
.rwHero{border-radius:18px;padding:20px 22px;border:1px solid var(--border);
  background:linear-gradient(135deg,color-mix(in srgb,var(--acc) 26%,var(--panel)),var(--panel) 68%)}
.rwBar{height:9px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.rwBar>i{display:block;height:100%;background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--acc) 60%,#fff));
  transition:width .45s ease}
@media(max-width:640px){.rwHero{padding:16px}}

/* 0810j: edit-profile dialog — themed like every other form in the shop
   instead of the hardcoded hex it used to carry. */
.epLbl{display:block;margin:15px 0 5px;color:var(--muted)}
.epIn{width:100%;text-align:left;margin:0}
.epDrop{display:flex;align-items:center;gap:12px;margin-top:9px;padding:10px 12px;cursor:pointer;
  border:1px dashed var(--border);border-radius:12px;background:var(--panel2);transition:border-color .15s,background .15s}
.epDrop:hover{border-color:color-mix(in srgb,var(--acc) 55%,var(--border))}
.epDrop.picked{border-style:solid;border-color:var(--acc)}
.epPrev{width:42px;height:42px;border-radius:10px;flex:none;overflow:hidden;display:grid;place-items:center;
  background:var(--panel3,#141a2c);color:var(--faint)}
.epPrev.round{border-radius:50%}
.epPrev img{width:100%;height:100%;object-fit:cover;display:block}

/* 0810k: indeterminate chain-wait bar. Used when the client genuinely cannot
   know how far along the work is (a batch buy is one request), instead of a
   step counter that skips steps. */
#chainOvBar.indet{
  background:linear-gradient(90deg,transparent 0%,var(--acc) 35%,color-mix(in srgb,var(--acc) 40%,#37e6c9) 65%,transparent 100%);
  background-size:220% 100%;animation:cwIndet 1.15s linear infinite}
@keyframes cwIndet{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion: reduce){#chainOvBar.indet{animation:none;opacity:.7}}

/* 0810m: submit / vault-intake landing. The page's job is to make handing over
   a binder feel safe and obvious, so it leads with a hero and says plainly what
   we take before asking for anything. */
.sbHero{display:flex;gap:26px;align-items:center;flex-wrap:wrap;padding:26px;border-radius:20px;
  border:1px solid var(--border);
  background:radial-gradient(120% 140% at 85% 10%,color-mix(in srgb,var(--acc) 20%,transparent),transparent 60%),var(--panel)}
.sbArt{position:relative;width:210px;height:170px;flex:none}
@media(max-width:760px){.sbArt{display:none}}
.sbSlab{position:absolute;width:96px;height:134px;border-radius:9px;border:1px solid var(--border);
  background:linear-gradient(160deg,var(--panel2),var(--panel3,#141a2c));box-shadow:0 18px 40px rgba(0,0,0,.45)}
.sbSlab.s1{left:2px;top:18px;transform:rotate(-11deg)}
.sbSlab.s2{left:56px;top:6px;transform:rotate(2deg);
  background:linear-gradient(160deg,color-mix(in srgb,var(--acc) 26%,var(--panel2)),var(--panel2))}
.sbSlab.s3{left:110px;top:22px;transform:rotate(12deg)}
.sbWhat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:18px}
.sbCard{display:flex;flex-direction:column;gap:5px;padding:16px;border-radius:14px;
  border:1px solid var(--border);background:var(--panel)}
.sbIco{font-size:19px;color:var(--acc);line-height:1}

/* 0810n: vault bulk-selection bar. Centred pill on desktop; on a phone it goes
   full width with a margin so it stops drifting as the button labels change
   length between languages. */
.vBulk{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:10px;
  align-items:center;background:var(--panel);border:1px solid var(--acc-br);border-radius:99px;
  padding:10px 12px 10px 20px;box-shadow:var(--shadow-lg);z-index:80;flex-wrap:wrap;max-width:94vw}
@media(max-width:640px){
  .vBulk{left:12px;right:12px;transform:none;max-width:none;justify-content:center;
    border-radius:16px;padding:12px;bottom:14px}
}

/* 0810n — JS-built admin tables mark numeric cells with .num (tabular figures)
   rather than .r. Money and counts read wrong ragged-left, so align them. */
.tbl th.num, .tbl td.num { text-align: right; }
/* empty state for admin cards that would otherwise show a bare table header */
.aiEmpty{display:flex;flex-direction:column;gap:6px;padding:22px;border:1px dashed var(--border);
  border-radius:var(--radius-sm);background:var(--panel);color:var(--faint)}
.aiEmpty b{color:var(--ink)}

/* 0810n — Settings as tabs: one panel at a time instead of a dozen stacked
   cards. Sticks under the header so the switcher is always reachable. */
.setTabs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 18px;position:sticky;top:0;z-index:5;
  padding:10px 0;background:var(--bg);border-bottom:1px solid var(--border2)}
.setTabs:empty{display:none}
@media (max-width:640px){
  .setTabs{gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:12px}
  .setTabs .fchip{flex:none}
}

/* 0810n — the profile header on a phone.
   .profHead was flex+wrap with no mobile rule, and the middle column carries
   min-width:0, so with the share button on the same line the "collecting since
   … · N packs ripped" line collapsed to a ~20px sliver and wrapped one word per
   row. Stack it below 640px: avatar and name together, then the meta, then the
   buttons full width. */
@media (max-width: 640px) {
  .profHead { gap: 12px; align-items: flex-start; }
  .profHead > div { flex: 1 1 100%; min-width: 0; width: 100%; }
  .profHead > .navSp { display: none; }
  .profHead > .btn,
  .profHead > a.btn,
  .profHead > div[style*="position:relative"] { flex: 1 1 100%; }
  .profHead > div[style*="position:relative"] > .btn { width: 100%; }
  /* the share menu is anchored right on desktop; on a phone that pushes it off
     the edge, so let it fill the width it actually has */
  #ppShareMenu { left: 0; right: 0; min-width: 0 !important; }
}