/* Graildraft fx (2026-11-01): wordmark, card backs, the opening (tease, stage light, rarity bursts, opening styles,
   slab case, pack tear), rank + rival chips, and the progression / ranking screens. Loads after visuals.css.
   Rules kept from the game-design book (ch05): build-up follows the TRUE rarity (a glow only ever announces what is
   really there), no near-miss effects, skip always available, reduced motion turns every flourish into a fade. */
:root{--display:"Bricolage Grotesque","Inter",system-ui,sans-serif;--t1:#8fa8ff;--t2:#b48df4;--t3:#e0a82e}

/* ---------- wordmark ---------- */
.logo{display:inline-flex;align-items:center;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.01em;font-variation-settings:"opsz" 72}
.logo svg{width:22px;height:22px;flex:none;color:var(--accent);margin-right:7px}
/* Varsity-arch wordmark (Lior picked Jersey A, 2026-11-02): vector, Graduate (OFL) outlined; sources in /brand. */
.logo .wordmark{display:block;height:34px;width:auto}
@media (min-width:900px){.logo .wordmark{height:38px}}
h1{font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 96;letter-spacing:-.015em}

/* ---------- card backs (Your account > Style) ---------- */
.v-back span{font-family:var(--display)}
.backswatch[data-back=classic] .v-back{background:var(--grain),repeating-linear-gradient(45deg,rgb(232 184 74/.07) 0 2px,transparent 2px 9px),repeating-linear-gradient(-45deg,rgb(232 184 74/.07) 0 2px,transparent 2px 9px),linear-gradient(160deg,#1d2450,#0b0f26);box-shadow:inset 0 0 0 3px #0b0f26,inset 0 0 0 4px color-mix(in oklab,var(--gold) 70%,transparent)}
.backswatch[data-back=classic] .v-back span{background:radial-gradient(circle at 35% 30%,#ffe3a1,var(--gold) 55%,#a87a1d);color:var(--gold-ink);box-shadow:none}
.backswatch{display:block;width:56px;aspect-ratio:63/88;border-radius:6px;position:relative;overflow:hidden}
.backswatch .v-back{position:absolute;inset:0;transform:none;border-radius:6px}
.backswatch .v-back span{width:46%;font-size:13px}

/* ---------- the opening ---------- */
/* Stage: dark spotlight with additive light behind the card, coloured by the card's real tier once revealed. */
.packrev .stage{container-type:size;position:relative;isolation:isolate;border-radius:18px;background:radial-gradient(ellipse at 50% 42%,#1d2450 0,#0a0e22 70%);overflow:hidden}
.packrev .stage::before{content:"";position:absolute;inset:-20%;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle at 50% 44%,var(--halo,#fff) 0,transparent 42%);mix-blend-mode:screen;filter:blur(8px)}
.packrev .stage[data-lit="1"]::before{opacity:.22;--halo:var(--t1)}
.packrev .stage[data-lit="2"]::before{opacity:.32;--halo:var(--t2)}
.packrev .stage[data-lit="3"]::before{opacity:.5;--halo:var(--t3)}
/* Tease: a face-down card glows in its true tier colour before the flip (never for commons, never faked). */
.v-tile.is-facedown[data-tier="1"] .v-back{box-shadow:inset 0 0 0 3px #0b0f26,0 0 0 2px color-mix(in oklab,var(--t1) 60%,transparent),0 0 26px color-mix(in oklab,var(--t1) 55%,transparent)}
.v-tile.is-facedown[data-tier="2"] .v-back{box-shadow:inset 0 0 0 3px #0b0f26,0 0 0 2px var(--t2),0 0 34px color-mix(in oklab,var(--t2) 70%,transparent);animation:fx-pulse 1.1s ease-in-out infinite}
.v-tile.is-facedown[data-tier="3"] .v-back{box-shadow:inset 0 0 0 3px #0b0f26,0 0 0 2px var(--t3),0 0 46px color-mix(in oklab,var(--t3) 85%,transparent);animation:fx-pulse .8s ease-in-out infinite}
@keyframes fx-pulse{50%{filter:brightness(1.25) saturate(1.2)}}
/* Rarity on reveal: pop (rare), burst (epic), slow-mo + shake + light fountain (chase). */
.v-tile.fx-pop .v-flip{animation:fx-pop .35s var(--ease-out)}
@keyframes fx-pop{40%{transform:scale(1.06)}}
.fxlayer{position:absolute;inset:0;pointer-events:none;z-index:2;display:grid;place-items:center}
.fxlayer .rays{position:absolute;width:150%;aspect-ratio:1;background:repeating-conic-gradient(from 0deg,color-mix(in oklab,var(--ray) 55%,transparent) 0 6deg,transparent 6deg 18deg);
  mask:radial-gradient(circle,#000 0,transparent 62%);-webkit-mask:radial-gradient(circle,#000 0,transparent 62%);mix-blend-mode:screen;animation:fx-rays 1.6s ease-out forwards}
@keyframes fx-rays{from{opacity:0;transform:scale(.4) rotate(0)}25%{opacity:1}to{opacity:0;transform:scale(1.15) rotate(40deg)}}
.fxlayer i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--ray);box-shadow:0 0 8px var(--ray);left:50%;top:48%;opacity:0;animation:fx-spark 1.4s cubic-bezier(.15,.7,.3,1) forwards;animation-delay:var(--d)}
@keyframes fx-spark{0%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(.4)}}
.stage.fx-shake{animation:fx-shake .45s ease-out}
@keyframes fx-shake{20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-2px,1px)}80%{transform:translate(1px,0)}}
.v-tile.fx-chase .v-flip{transition-duration:1.25s}
/* fact line under a big card: true facts only ("1 in 412 packs - Binder 61/198") */
.factline{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:6px}
.factline span{font-size:12px;font-weight:750;padding:3px 9px;border-radius:99px;background:rgb(255 255 255/.08);color:var(--muted)}
.factline span.gold{background:color-mix(in oklab,var(--gold) 22%,transparent);color:var(--gold-text)}

/* Opening styles (cosmetic unlocks) */
[data-style=slide] .packrev .v-tile{animation:fx-slide .45s var(--ease-out)}
@keyframes fx-slide{from{transform:translateX(60%) rotate(8deg);opacity:0}}
[data-style=burst] .packrev .v-tile{animation:fx-burst .4s var(--ease-out)}
@keyframes fx-burst{from{transform:scale(.55);opacity:0;filter:brightness(2.2)}}
[data-style=slow] .packrev .v-flip{transition-duration:1.1s}
[data-style=slow] .packrev .v-tile{animation:fx-rise .6s var(--ease-out)}
@keyframes fx-rise{from{transform:translateY(24px);opacity:0}}

/* Slab case for $100+ cards: a generic graded-case frame (no grader marks) with a label strip. */
.slabcase{position:relative;padding:14% 7% 7%;border-radius:12px;background:linear-gradient(160deg,rgb(255 255 255/.16),rgb(255 255 255/.04) 40%,rgb(255 255 255/.1));
  box-shadow:inset 0 0 0 1px rgb(255 255 255/.35),inset 0 0 0 5px rgb(255 255 255/.06),0 18px 40px -14px rgb(0 0 0/.8);backdrop-filter:blur(2px)}
.slabcase > .lbl{position:absolute;left:7%;right:7%;top:3%;height:8.5%;border-radius:5px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 7px;
  background:linear-gradient(90deg,#f6f1e4,#ece4cf);color:#1d1504;font:800 10px/1 system-ui,sans-serif;letter-spacing:.02em;overflow:hidden;white-space:nowrap}
.slabcase > .lbl b{overflow:hidden;text-overflow:ellipsis}
.slabcase > .lbl em{font-style:normal;color:#7a5a12}
.slabcase .v-tile{width:100%}
.v-lg .slabcase,.stage .slabcase{width:var(--tw,200px)}

/* Pack tear: drag across the seam (or tap) to open. */
/* the stage shrinks on short phones: size the card and the pack to it (cqh = % of the stage height) */
.packrev .stage .v-tile.v-lg{--tw:min(200px,60cqh,64vw)}
.packrev .stage .slabcase{width:min(214px,56cqh,66vw);--tw:100%}
.tear{position:relative;height:min(300px,78cqh);aspect-ratio:3/4.2;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.tear .half{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:#fff center/contain no-repeat;box-shadow:0 16px 36px -10px rgb(0 0 0/.8);transition:transform .5s var(--ease-out),opacity .5s ease}
.tear .half.top{clip-path:inset(0 0 82% 0)}
.tear .half.bot{clip-path:inset(18% 0 0 0)}
.tear .seam{position:absolute;left:4%;right:4%;top:18%;height:3px;margin-top:-1.5px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 10px);box-shadow:0 0 12px var(--gold)}
.tear .seam i{position:absolute;left:0;top:-3px;bottom:-3px;width:var(--p,0%);background:linear-gradient(90deg,transparent,#fff);border-radius:3px;box-shadow:0 0 14px #fff}
.tear.torn .half.top{transform:translate(18%,-70%) rotate(-14deg);opacity:0}
.tear.torn .half.bot{transform:translateY(12%);opacity:0}
.tear.torn .seam{opacity:0}
.tearhint{color:var(--muted);font-size:13px;text-align:center;margin:6px 0 0}
.tear-shake{animation:fx-shake .5s ease-in-out}

/* ---------- ranks, frames, rivals ---------- */
.lvl{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 6px;border-radius:99px;font-size:11px;font-weight:800;vertical-align:1px;
  background:var(--raised);color:var(--muted);border:1px solid var(--line)}
.lvl.t1{color:#3e7bd6;border-color:color-mix(in oklab,#3e7bd6 40%,var(--line))}.lvl.t2{color:#8a5bd8;border-color:color-mix(in oklab,#8a5bd8 40%,var(--line))}
.lvl.t3{color:var(--gold-text);border-color:color-mix(in oklab,var(--gold) 50%,var(--line))}.lvl.t4{color:var(--gold-ink);background:var(--gold);border-color:var(--gold)}
.rival{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.02em;padding:1px 7px;border-radius:99px;vertical-align:1px;background:color-mix(in oklab,var(--ai) 14%,transparent);color:var(--ai)}
.rk.fr-silver{box-shadow:0 0 0 2px #b8c2d0}.rk.fr-gold{box-shadow:0 0 0 2px var(--gold)}.rk.fr-grail{box-shadow:0 0 0 2px var(--gold),0 0 12px color-mix(in oklab,var(--gold) 60%,transparent)}.rk.fr-rival{box-shadow:0 0 0 2px #ff6b6b}
.rk{border-radius:8px}
.rk[class*=fr-]{width:32px;height:32px;display:grid;place-items:center;justify-self:center} /* a framed place number: a centred square, as in the preview */
.flag{font-size:14px;vertical-align:-1px}

/* rank card on home */
.rankcard{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center}
.rankcard .badge{grid-row:1/4;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font:800 22px var(--display);color:var(--gold-text);background:var(--gold-soft);border:1px solid color-mix(in oklab,var(--gold) 45%,var(--line))}
.rankcard .badge.t4{background:var(--gold);color:var(--gold-ink)}
.rankcard b{font-family:var(--display);font-size:19px}
.rankcard .progress{margin:2px 0}
.unlock{font-size:13px;color:var(--subtle)}

/* range bar in "What's inside" */
.range{position:relative;height:34px;margin:10px 0 4px}
.range .track{position:absolute;left:0;right:0;top:13px;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--raised),color-mix(in oklab,var(--accent) 45%,var(--raised)))}
.range .mark{position:absolute;top:6px;width:2px;height:22px;background:var(--ink);transform:translateX(-1px)}
.range .mark.avg{background:var(--accent-text)}
.range .mark span{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:750;white-space:nowrap;color:var(--muted)}
.range .mark.avg span{color:var(--accent-text)}
.rangecap{display:flex;justify-content:space-between;font-size:12px;color:var(--subtle);margin-top:16px}

/* objectives, chips, battles, events */
.objs{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.objs li{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--muted)}
.objs li i{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--field);display:grid;place-items:center;font-style:normal;font-size:12px}
.objs li.done{color:var(--ink)} .objs li.done i{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chips2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.chipbtn{display:grid;gap:2px;text-align:left;padding:12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;min-height:44px;font:inherit;color:inherit}
.chipbtn b{font-size:15px} .chipbtn small{color:var(--subtle);font-size:12px;line-height:1.3}
.chipbtn[disabled]{opacity:.55;cursor:default}
.chipbtn.used{border-style:dashed}
.battle{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.battle:first-of-type{border-top:0}
.battle small{color:var(--subtle)}
.evbanner{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;margin:10px 0 0;background:color-mix(in oklab,var(--heat) 16%,transparent);border:1px solid color-mix(in oklab,var(--heat) 45%,transparent);font-size:14px}
.evbanner b{color:var(--heat-text)}
.evbanner.live{animation:fx-pulse 2.4s ease-in-out infinite}
.bonusline{color:var(--lime-text);font-weight:700}
.bbline{color:var(--new-text);font-weight:700}

/* power rankings + boards */
.power{list-style:none;margin:0;padding:6px;display:grid;gap:2px}
.power li{display:grid;grid-template-columns:34px 1fr;gap:10px;padding:10px;border-radius:10px}
.power li.me{background:var(--accent-soft)}
.power .pr{font:800 18px var(--display);text-align:center}
.power .mv{font-size:12px;font-weight:800;margin-left:6px}
.power small{display:block;color:var(--subtle);font-size:13px;line-height:1.35;margin-top:2px}
.boardtbl{width:100%;border-collapse:collapse;font-size:14px}
.boardtbl td{padding:10px 8px;border-top:1px solid var(--line)}
.boardtbl tr:first-child td{border-top:0}
.boardtbl td.n{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.boardtbl tr.me td{background:var(--accent-soft)}
.halltabs{display:flex;gap:6px;overflow-x:auto;margin:0 0 12px;scrollbar-width:none}
.lucklabel{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--heat-text)}
.skilllabel{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--up)}

/* verify */
.vrow{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:13px;padding:6px 0;border-top:1px solid var(--line)}
.vrow code,.mono{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.vok{color:var(--up);font-weight:800}.vbad{color:var(--down);font-weight:800}

/* cosmetics picker */
.picker{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.pick{flex:none;display:grid;justify-items:center;gap:6px;padding:8px;border-radius:12px;border:1px solid var(--line);background:var(--surface);cursor:pointer;min-width:84px;font:inherit;color:inherit}
.pick[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.pick[disabled]{cursor:default}
.pick[disabled] .backswatch,.pick[disabled] .sw{filter:grayscale(1) brightness(.7)}
.pick small{font-size:12px;color:var(--subtle);text-align:center;max-width:96px;line-height:1.25}
.pick .sw{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;text-align:center;line-height:1;background:var(--raised);font-size:22px}

@media (prefers-reduced-motion:reduce){
  .fxlayer{display:none}
  .stage.fx-shake{animation:none}
  .v-tile.is-facedown .v-back{animation:none!important}
}

/* ---------- Home (2026-11-01): one clear "Next up", then leagues, then everything else ---------- */
.hihead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;margin:2px 0 14px}
.hihead h1{margin:0}
.rankchip{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:5px 14px 5px 5px;min-height:44px}
.rankchip .badge{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:800 15px var(--display);color:var(--gold-text);background:var(--gold-soft);border:1px solid color-mix(in oklab,var(--gold) 45%,var(--line))}
.rankchip .badge.t4{background:var(--gold);color:var(--gold-ink)}
.rankchip b{display:block;font-size:13px;line-height:1.2}
.rankchip .rcbar{display:block;width:96px;height:4px;border-radius:4px;background:var(--raised);margin-top:4px;overflow:hidden}
.rankchip .rcbar i{display:block;height:100%;background:var(--gold);border-radius:4px}

.hero{position:relative;overflow:hidden;border-radius:20px;padding:20px 18px 18px;background:radial-gradient(120% 90% at 85% -10%,#3a2f12 0%,#181f45 46%,#0f1430 100%);border:1px solid #2c2a22;box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.hero .hglow{position:absolute;inset:auto -30% -60% auto;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,color-mix(in oklab,var(--accent) 22%,transparent),transparent 65%);pointer-events:none;animation:hglow 6s ease-in-out infinite alternate}
@keyframes hglow{to{transform:translate(-30px,-20px) scale(1.1)}}
.hero .hk{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.hero .hk i{font-style:normal;opacity:.6}
.hero .hk span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:color-mix(in oklab,var(--accent) 16%,transparent);color:var(--accent-text)}
.hic svg{width:20px;height:20px}
.hero .ht{font-family:var(--display);font-weight:700;font-size:clamp(24px,6.4vw,30px);line-height:1.12;letter-spacing:-.015em;margin:14px 0 8px;color:var(--ink);font-variation-settings:"opsz" 96}
.hero .hs{color:var(--muted);margin:0 0 16px;max-width:52ch}
.hero .hstep{margin:-4px 0 16px}
.hero .hbtn{min-height:54px;font-size:17px;box-shadow:0 8px 24px -10px color-mix(in oklab,var(--accent) 70%,transparent)}
.hero .halt{margin-top:8px;background:transparent}
.hero > *:not(.hglow){position:relative}
.alsolist{display:grid;gap:8px;margin-top:10px}
.also{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;min-height:56px}
.also .hic{width:32px;height:32px;background:var(--accent-soft)}
.also b{display:block;font-size:15px;line-height:1.25}
.also small{color:var(--subtle);font-size:13px}
.also .chev,.lgcard::after{color:var(--subtle);font-size:22px}

.lgcards{display:grid;gap:8px}
.lgcard{position:relative;display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;min-height:72px;transition:transform .15s var(--ease),border-color .15s}
@media (hover:hover) and (pointer:fine){.lgcard:hover,.also:hover,.way:hover{border-color:color-mix(in oklab,var(--accent) 50%,var(--line))}}
.lgcard:active,.also:active,.way:active{transform:scale(.99)}
.lgrank{display:grid;place-items:center;align-content:center;width:56px;height:56px;border-radius:14px;background:var(--night);color:#f3f5fb;font:800 20px var(--display);line-height:1}
.lgrank small{font:600 10px system-ui;letter-spacing:.08em;text-transform:uppercase;color:#d0d5e8;margin-bottom:2px}
.lgrank.none{background:var(--raised);color:var(--subtle)}
.lgmain{min-width:0}
.lgmain b{display:block;font-size:17px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgmain small{display:block;color:var(--subtle);font-size:13px;margin-top:2px}
.lgmain .lgvs{color:var(--accent-text);font-weight:650}
.lgval{text-align:right;font-weight:750;font-variant-numeric:tabular-nums}
.lgval small{display:block;font-size:13px;font-weight:650}
.lgdot{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:var(--heat);color:#1d0f04;font-size:12px;font-weight:800;display:grid;place-items:center;border:2px solid var(--bg)}

.waygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.way{display:grid;gap:2px;align-content:start;text-align:left;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;cursor:pointer;min-height:96px;font:inherit}
.way .wi{font-size:22px;line-height:1;margin-bottom:6px}
.way b{font-size:15px}
.way small{color:var(--subtle);font-size:13px;line-height:1.3}
.friends{margin-top:12px}
.savebar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--accent-soft);border:1px solid color-mix(in oklab,var(--accent) 45%,var(--line))}
.savebar > span{flex:1 1 200px}
.savebar b{display:block;font-size:15px}
.savebar small{color:var(--muted);font-size:13px}
#msn .missions{margin-top:16px}
.spot{animation:spot 2.4s var(--ease)}
@keyframes spot{0%,60%{box-shadow:0 0 0 3px var(--accent),0 0 30px -4px var(--accent)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.hero .hglow,.spot{animation:none}}

/* ---------- Opening round 2 (2026-11-01): tear, peel, value meter, sell from the reveal ---------- */
.pk-wrap{display:grid;justify-items:center;gap:4px}
.pk{position:relative;height:min(310px,76cqh);aspect-ratio:3/4.2;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
  transform:rotate(var(--wob,0deg));animation:pk-float 3.2s ease-in-out infinite;transition:scale .2s var(--ease)}
.pk.held{scale:1.03;animation-play-state:paused;cursor:grabbing}
@keyframes pk-float{50%{translate:0 -6px}}
.pk-body,.pk-flap{position:absolute;inset:0;border-radius:14px;background:#fff center/contain no-repeat;box-shadow:0 18px 40px -12px rgb(0 0 0/.85)}
.pk.gpk-art .pk-body,.pk.gpk-art .pk-flap{background:var(--grain),repeating-linear-gradient(45deg,rgb(232 184 74/.08) 0 2px,transparent 2px 10px),radial-gradient(circle at 50% 55%,#5a4410,#1d1504 70%)}
.pk.gpk-art .pk-body::after{content:"GRAILDRAFT";position:absolute;inset:auto 0 40% 0;text-align:center;font:800 18px var(--display);letter-spacing:.14em;color:var(--gold)}
.pk-flap{clip-path:inset(0 0 86% calc(var(--p,0) * 100%));box-shadow:none;transition:transform .55s var(--ease),opacity .55s ease}
.pk-line{position:absolute;left:3%;right:3%;top:14%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,rgb(0 0 0/.35) 0 5px,transparent 5px 9px)}
.pk-leak{position:absolute;left:0;top:14%;height:4px;margin-top:-2px;width:calc(var(--p,0) * 100%);border-radius:4px;background:var(--leak);
  box-shadow:0 0 calc(6px + var(--p,0) * 26px) calc(1px + var(--p,0) * 4px) var(--leak),0 0 calc(30px * var(--p,0)) calc(8px * var(--p,0)) var(--leak);opacity:calc(.5 + var(--p,0) * .5)}
.pk-grip{position:absolute;left:-4px;top:14%;translate:0 -50%;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgb(255 255 255/.92);box-shadow:0 4px 14px rgb(0 0 0/.5);
  margin-left:calc(var(--p,0) * (100% - 26px));pointer-events:none;transition:opacity .2s}
.pk-grip span{width:12px;height:12px;border-right:3px solid #1d1504;border-top:3px solid #1d1504;rotate:45deg;margin-left:-4px;animation:pk-nudge 1.2s ease-in-out infinite}
@keyframes pk-nudge{50%{translate:3px -3px}}
.pk.torn{animation:pk-pop .5s var(--ease) forwards}
.pk.torn .pk-flap{clip-path:inset(0 0 86% 0);transform:translate(30%,-120%) rotate(-24deg);opacity:0}
.pk.torn .pk-leak{animation:pk-burst .5s ease-out forwards}
.pk.torn .pk-grip,.pk.torn .pk-line{opacity:0}
@keyframes pk-pop{30%{transform:scale(1.04)}100%{transform:translateY(30%) scale(.92);opacity:0}}
@keyframes pk-burst{to{transform:scaleY(30);opacity:0;filter:blur(6px)}}

/* peel: the card's face is under a loose back that comes away from the bottom up */
.v-tile.peeling{cursor:grab;touch-action:none}
.peelcover{position:absolute;inset:0;z-index:3;border-radius:var(--card-r);overflow:hidden;clip-path:inset(0 0 calc(var(--peel,0) * 100%) 0)}
.peelcover .v-back{transform:none;backface-visibility:visible;-webkit-backface-visibility:visible;position:absolute;inset:0}
.peelcurl{position:absolute;left:-2%;right:-2%;z-index:4;height:22px;bottom:calc(var(--peel,0) * 100%);translate:0 50%;pointer-events:none;opacity:calc(var(--peel,0) * 8);
  background:linear-gradient(to bottom,rgb(255 255 255/0),rgb(255 255 255/.75) 45%,rgb(0 0 0/.45));border-radius:50%/40%;filter:blur(.5px)}
.v-tile.peeling[data-tier="1"] .v-flip{filter:drop-shadow(0 0 16px color-mix(in oklab,var(--t1) 65%,transparent))}
.v-tile.peeling[data-tier="2"] .v-flip{filter:drop-shadow(0 0 22px var(--t2));animation:fx-pulse 1.1s ease-in-out infinite}
.v-tile.peeling[data-tier="3"] .v-flip{filter:drop-shadow(0 0 30px var(--t3));animation:fx-pulse .8s ease-in-out infinite}
.stage:has(.v-tile.peeling[data-tier="3"])::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 30%,rgb(0 0 0/.55));animation:fx-dim .8s ease forwards}
@keyframes fx-dim{from{opacity:0}}
.peelhint{pointer-events:none;position:absolute;bottom:8px;left:0;right:0;text-align:center;margin:0;font-size:13px;font-weight:650;color:var(--muted);z-index:5;animation:pk-hint 1.6s ease-in-out infinite}
@keyframes pk-hint{50%{opacity:.55;translate:0 -3px}}

/* value meter: pulled so far vs the pack's price (the line is break-even) */
.vm{margin:8px 0 0}
.vm-bar{position:relative;height:8px;border-radius:8px;background:rgb(255 255 255/.08);overflow:visible}
.vm-bar i{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#777f9c,#d0d5e8);transition:width .6s var(--ease)}
.vm.paid .vm-bar i{background:linear-gradient(90deg,#b8902f,var(--accent))}
.vm-line{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--accent);border-radius:2px;box-shadow:0 0 8px var(--accent)}
.vm-txt{display:flex;justify-content:space-between;font-size:13px;color:var(--subtle);margin-top:5px;font-variant-numeric:tabular-nums}
.vm-txt b{color:var(--ink)}
.vm.paid .vm-goal{color:var(--accent-text);font-weight:750}
.vm.paid{animation:vm-flash .9s ease}
@keyframes vm-flash{30%{filter:drop-shadow(0 0 10px var(--accent))}}

/* keep or sell, right on the reveal */
.kos{display:flex;gap:8px;justify-content:center;margin-top:8px}
.kos .btn{min-height:40px;font-size:14px;padding:0 14px}
.kos .kept{background:rgb(255 255 255/.08);color:var(--ink);border:1px solid var(--line)}
.kos .sold{background:transparent;color:var(--subtle);border:1px dashed var(--line);cursor:default}
.kos .confirm{background:#fff;color:#111}
.selllist{display:grid;gap:6px;margin:10px 0 0}
.sellrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:rgb(255 255 255/.05);border:1px solid var(--line)}
.sellrow b{display:block;font-size:14px;line-height:1.25}
.sellrow small{color:var(--subtle);font-size:12px}
.sellrow .btn{min-height:38px;font-size:14px;padding:0 12px}
.sellrow.is-sold{opacity:.6}
@media (prefers-reduced-motion:reduce){.pk,.pk-grip span,.peelhint,.vm.paid{animation:none}}
/* round 2 layout: the stage takes the room; the tally only grows at the result (then scrolls) */
.packrev .tally{height:auto!important;min-height:0;max-height:42%;overflow-y:auto;flex:none}
.packrev .stage .v-tile.v-lg{--tw:min(250px,64cqh,68vw)}
.packrev .stage .slabcase{width:min(266px,60cqh,70vw)}
.pk{height:min(340px,80cqh)}
.v-tile.peeling .v-flip{transition:none}
.packrev .stage{min-height:240px}

/* ---------- 2026-11-02: Pullfox's WebGL opening on the reveal stage (stage.js + wow.js) ---------- */
.packrev .stage .wow{position:absolute;inset:0;z-index:1}
.wow-stage{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
.wow-stage canvas{width:100%;height:100%;display:block;cursor:grab;outline:none}
.wow.drawing>*{visibility:hidden}
.wow .tierchip,.wow .wow-zoom,.wow .wow-desc{display:none!important}
.wow-hint{position:absolute;left:50%;top:10px;transform:translateX(-50%);margin:0;color:#fff;font-weight:600;font-size:13px;pointer-events:none;transition:opacity .3s;white-space:nowrap;background:rgb(255 255 255/.1);padding:6px 14px;border-radius:99px;z-index:2}
.wow-pips{position:absolute;left:50%;top:48px;transform:translateX(-50%);display:flex;gap:8px;z-index:3;pointer-events:none}
.wow-pips i{width:12px;height:12px;border-radius:99px;border:2px solid var(--accent);transition:background .15s,transform .15s}
.wow-pips i.on{background:var(--accent);transform:scale(1.2);box-shadow:0 0 10px var(--accent)}
.wow-ctl{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;width:min(100% - 32px,360px);display:flex;justify-content:center;touch-action:none;user-select:none;-webkit-user-select:none}
.wow-ctl[hidden]{display:none}
.rc-track{position:relative;width:100%;height:56px;border-radius:99px;background:rgb(255 255 255/.1);box-shadow:inset 0 0 0 1px rgb(255 255 255/.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);overflow:hidden;cursor:grab;outline:none}
.rc-track:focus-visible{box-shadow:inset 0 0 0 1px rgb(255 255 255/.14),0 0 0 3px var(--focus)}
.rc-track.on{cursor:grabbing}
.rc-fill{position:absolute;inset:0 auto 0 0;width:calc(52px + var(--p,0) * (100% - 56px));border-radius:99px;background:linear-gradient(90deg,color-mix(in oklab,var(--accent) 15%,transparent),color-mix(in oklab,var(--accent) 55%,transparent))}
.rc-label{position:absolute;inset:0;display:grid;place-items:center;padding-left:40px;color:#fff;font-weight:700;font-size:15px;letter-spacing:.02em;opacity:calc(1 - var(--p,0) * 2.2);pointer-events:none;background:linear-gradient(90deg,rgb(255 255 255/.55) 0%,#fff 40%,rgb(255 255 255/.55) 80%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rc-shine 2.2s linear infinite}
@keyframes rc-shine{to{background-position:-200% 0}}
.rc-thumb{position:absolute;top:4px;left:calc(4px + var(--p,0) * (100% - 56px));width:48px;height:48px;border-radius:99px;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px -4px color-mix(in oklab,var(--accent) 80%,transparent),inset 0 -3px 0 rgb(0 0 0/.15);transition:transform .15s}
.rc-track.on .rc-thumb{transform:scale(1.06)}
.rc-btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 28px;border:0;border-radius:99px;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;font-size:16px;box-shadow:0 8px 22px -6px color-mix(in oklab,var(--accent) 80%,transparent),inset 0 -3px 0 rgb(0 0 0/.15);cursor:pointer;touch-action:none;transition:transform .12s}
.rc-btn:active,.rc-btn.on{transform:scale(.96)}
.rc-ring{width:26px;height:26px;border-radius:99px;background:conic-gradient(var(--accent-ink) calc(var(--p,0) * 360deg),rgb(0 0 0/.2) 0);-webkit-mask:radial-gradient(circle,transparent 7px,#000 8px);mask:radial-gradient(circle,transparent 7px,#000 8px)}
@media (prefers-reduced-motion:reduce){.rc-label{animation:none}}
/* the rip styles under the pack: a scroller of chips, the chosen one lit */
.ripstyles{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;width:100%;padding:2px 2px 4px;scroll-snap-type:x proximity;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ripstyles::-webkit-scrollbar{display:none}
.ripstyles button{flex:none;scroll-snap-align:center;border:1px solid var(--line);background:var(--raised);color:var(--muted);font:inherit;font-size:13px;font-weight:700;padding:7px 12px;border-radius:99px;cursor:pointer;min-height:36px}
.ripstyles button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.packrev .capslot:has(.ripstyles){display:block}
/* close the opening at any time (the cards are already yours) */
.revclose{flex:none;width:36px;height:36px;border-radius:99px;border:0;background:var(--raised);color:var(--ink);cursor:pointer;font-size:14px;margin-right:8px}
/* the pulls row sits in the middle when it fits, scrolls when it doesn't */
.packrev .strip{justify-content:safe center}
/* item sheet: the buy / sell / rip actions stay in reach while you read what's inside (desktop too) */
@media (min-width:760px){
  .sheet .acts{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));margin:16px 0 calc(-18px - env(safe-area-inset-bottom));padding:14px 0 18px;background:color-mix(in oklab,var(--surface) 94%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 -14px 18px -16px rgb(0 0 0/.35);z-index:5}
}
.packrev.opening .tally,.packrev.opening .strip{visibility:hidden} /* hidden, not removed: the stage keeps its size through the hand-off */
.packrev .strip.done{flex-wrap:wrap;justify-content:center;overflow:visible}
/* the reveal never outgrows its sheet (it was 96dvh inside a 92/88dvh sheet, so the actions slid out of view on shorter screens) */
.packrev{height:min(92dvh,860px)}
@media (min-width:760px){ .packrev{height:min(88dvh,860px)} }
.packrev:has(.strip.done) .stage{min-height:140px}
.packrev:has(.strip.done) .tally{max-height:30%}
.packrev .strip.done{max-height:68px;overflow-y:auto}

/* ---------- Account (Lior 2026-11-02): profile header, picture, locked styles, previews, fair play ---------- */
.avatar{display:block;border-radius:50%;object-fit:cover;background:var(--raised)}
.avatar.sm{display:inline-block;width:24px;height:24px;vertical-align:-6px;margin-right:2px}
.avatar.fr-silver{box-shadow:0 0 0 3px #b8c2d0}.avatar.fr-gold{box-shadow:0 0 0 3px var(--gold)}
.avatar.fr-grail{box-shadow:0 0 0 3px var(--gold),0 0 16px color-mix(in oklab,var(--gold) 60%,transparent)}.avatar.fr-rival{box-shadow:0 0 0 3px #ff6b6b}
.avatar.sm[class*=fr-]{box-shadow:none}
.card.profile{display:flex;align-items:center;gap:16px}
.avbtn{position:relative;flex:none;border:0;background:none;padding:4px;cursor:pointer;border-radius:50%}
.avbtn .avatar{width:72px;height:72px}
.avedit,.iconbtn{display:grid;place-items:center;border-radius:50%;color:var(--ink)}
.avedit{position:absolute;right:0;bottom:0;width:28px;height:28px;background:var(--raised);border:2px solid var(--surface)}
.avedit svg,.iconbtn svg{width:16px;height:16px}
.iconbtn{flex:none;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;color:var(--subtle)} /* flex:none - inside a .row it used to stretch into a wide oval */
@media (hover:hover){.iconbtn:hover{color:var(--ink);background:var(--raised)}}
.nshow{display:flex;align-items:center;gap:4px;min-width:0}
.pname{flex:1;min-width:0;display:grid;gap:2px}
.pname .nm{font-family:var(--display);font-size:22px;overflow-wrap:anywhere}
.pname form .row{flex-wrap:wrap;gap:8px}.pname form input{flex:1 1 100%;min-width:0}.pname form .btn{flex:1 1 0!important}
.avgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.avpick{border:0;background:none;padding:3px;border-radius:50%;cursor:pointer;aspect-ratio:1}
.avpick img{width:100%;height:100%;border-radius:50%;display:block}
.avpick[aria-checked=true]{box-shadow:0 0 0 3px var(--accent)}
.avup{position:relative}
/* style pickers: centred art, locked = greyed with a lock carrying the level */
.pick .pickart{position:relative;display:grid;place-items:center;width:56px;height:78px}
.pick .sw{width:56px;height:56px;min-height:0;border:0;border-radius:12px;display:grid;place-items:center;justify-content:center;background:var(--raised)}
.pick .sw svg{width:26px;height:26px;display:block}
.pick .sw-frame{background:none}.pick .sw-frame .avatar{width:48px;height:48px}
.pick.locked .backswatch,.pick.locked .sw{filter:grayscale(1) brightness(.55)}
.pick.locked small{color:var(--subtle);opacity:1} /* locked tiles stay tappable (preview), so their labels need 4.5:1 */
.lockov{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.lk{position:relative;width:34px;height:38px;color:var(--ink);filter:drop-shadow(0 2px 4px rgb(0 0 0/.5))}
.lk svg{width:100%;height:100%;display:block}
.lk b{position:absolute;left:0;right:0;top:48%;text-align:center;font-size:14px;font-weight:800;color:var(--bg);line-height:18px;font-variant-numeric:tabular-nums}
.pick[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.pick[disabled]{cursor:pointer}
/* preview sheet */
.pv{display:grid;place-items:center;min-height:250px;margin:10px 0 14px;border-radius:14px;background:radial-gradient(circle at 50% 40%,var(--raised),var(--bg) 75%);perspective:900px}
.backswatch.big{width:150px;border-radius:12px}.backswatch.big .v-back span{font-size:34px}
.pv-frame{grid-template-columns:1fr;gap:18px;padding:22px 16px}
.pv-frame figure{margin:0;display:grid;justify-items:center;gap:8px;width:100%}
.pv-frame figcaption{font-size:13px;font-weight:650;color:var(--subtle)}
.pvrow .lrow{width:min(100%,340px);background:var(--surface);border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
.pvrow .lrow .rk{width:32px;height:32px;display:grid;place-items:center;color:var(--ink)}
.avatar.big{width:120px;height:120px}
.pvcard{width:150px;aspect-ratio:63/88;opacity:0}
.pvcard.go{opacity:1}
.pv-style[data-style=flip] .pvcard.go{animation:fx-rise .35s var(--ease-out)}
.pv-style[data-style=slide] .pvcard.go{animation:fx-slide .45s var(--ease-out)}
.pv-style[data-style=burst] .pvcard.go{animation:fx-burst .4s var(--ease-out)}
.pv-style[data-style=slow] .pvcard.go{animation:fx-rise .6s var(--ease-out)}
.pvflip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s var(--ease-out)}
.pv-style[data-style=slow] .pvflip{transition-duration:1.1s}
.pvcard.flipped .pvflip{transform:rotateY(180deg)}
.pvflip .face{position:absolute;inset:0;backface-visibility:hidden}
.pvfront{transform:rotateY(180deg);border-radius:12px;background:linear-gradient(160deg,#2a3270,#151b40);border:2px solid var(--gold);display:grid;place-items:center;align-content:center;gap:8px}
.pvfront img{width:70%;border-radius:50%}.pvfront b{font-size:13px}
.pvlock{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:var(--raised);margin:0}
.pvlock .lockov{position:static;flex:none}
@media (prefers-reduced-motion:reduce){.pvcard.go{animation:none!important}.pvflip{transition:none}}
/* fair play, folded */
details.fair>summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;list-style:none}
details.fair>summary::-webkit-details-marker{display:none}
details.fair>summary::after{content:"+";margin-left:auto;font-weight:700;color:var(--subtle)}
details.fair[open]>summary::after{content:"–"}
details.adv{margin-top:10px}details.adv>summary{cursor:pointer;color:var(--subtle);font-size:14px}
details.adv input{width:100%}
.asquick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.assum{margin:8px 0 10px}
/* Pocket on empty states, the welcome and the home hero (Lior 2026-11-02) */
.empty .mascot{display:block;width:92px;height:auto;margin:0 auto 10px;filter:drop-shadow(0 6px 14px rgb(0 0 0/.35))}
.v-empty .mascot{display:block;width:110px;height:auto;margin:18px auto 4px}
.card.onb{position:relative}
.onbmascot{float:right;width:96px;height:auto;margin:-4px -4px 6px 10px;filter:drop-shadow(0 6px 14px rgb(0 0 0/.35))}
.hero .hmascot{position:absolute;top:12px;right:12px;width:84px;height:auto;z-index:1;pointer-events:none;filter:drop-shadow(0 6px 14px rgb(0 0 0/.4))}
.hero:has(.hmascot) .ht,.hero:has(.hmascot) .hs{padding-right:84px}
@media (prefers-reduced-motion:no-preference){.empty .mascot,.v-empty .mascot,.hero .hmascot{animation:ch-bob 3.2s ease-in-out infinite}}
@keyframes ch-bob{50%{transform:translateY(-4px)}}
.avacts{gap:10px}.avacts>*{flex:1}
/* The Grail moment: Pocket cheers beside a true chase card (only ever the real tier) */
.grailmoment{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.gmmascot{position:absolute;right:1.5%;bottom:5%;width:clamp(68px,21cqw,118px);display:grid;justify-items:center;animation:gm-pop .7s cubic-bezier(.2,1.6,.4,1) .35s both}
.gmmascot img{width:100%;height:auto;filter:drop-shadow(0 8px 18px rgb(0 0 0/.45));animation:gm-bounce 1.1s ease-in-out 1.1s 3}
.gmmascot b{font-family:var(--display);font-size:15px;color:var(--gold-ink);background:var(--gold);padding:3px 12px;border-radius:99px;margin-bottom:-4px;transform:rotate(-6deg);box-shadow:0 4px 14px rgb(0 0 0/.35)}
.confetti i{position:absolute;top:-6%;left:var(--x);width:8px;height:14px;border-radius:2px;background:var(--gold);opacity:0;transform:rotate(var(--r)) scale(var(--s));animation:gm-fall 2.2s cubic-bezier(.3,.6,.5,1) calc(.3s + var(--d)) 1 forwards}
.confetti i:nth-child(3n){background:#ffe7a3}.confetti i:nth-child(4n){background:var(--accent)}
@keyframes gm-pop{from{transform:translateY(120%) scale(.6);opacity:0}}
@keyframes gm-bounce{50%{transform:translateY(-8px) rotate(-3deg)}}
@keyframes gm-fall{0%{opacity:1}100%{opacity:0;transform:translateY(560px) rotate(calc(var(--r) + 260deg)) scale(var(--s))}}
@media (prefers-reduced-motion:reduce){.gmmascot,.gmmascot img{animation:none}.confetti{display:none}}

/* ---------- Reveal + result (Lior 2026-11-02 recording) ---------- */
/* strip: small card thumbnails, centred while they fit, scrolling once they don't */
.packrev .strip{gap:6px;align-items:flex-end}
.packrev .strip>:first-child{margin-left:auto}.packrev .strip>:last-child{margin-right:auto}
.strip span.th{position:relative;display:grid;justify-items:center;gap:2px;padding:0;background:none;border-radius:0;box-shadow:none;text-decoration:none;color:var(--subtle);font-size:10px;font-weight:700}
.strip span.th img{width:30px;aspect-ratio:63/88;object-fit:cover;border-radius:3px;background:var(--raised);box-shadow:0 0 0 1px var(--line);display:block}
.strip span.th.hit img{box-shadow:0 0 0 2px var(--gold)}.strip span.th.hit b{color:var(--gold-text)}
.strip span.th.sold img{opacity:.45}.strip span.th.sold b{text-decoration:line-through}
.strip span.th.new::after{content:"✦";position:absolute;top:-6px;right:-5px;font-size:11px;color:var(--new);text-shadow:0 0 4px var(--bg)}
.strip span.th.bonus img{box-shadow:0 0 0 2px var(--heat)}
.packrev .strip{min-height:52px}
/* result: every card in a swipeable row, best first; the numbers lead with one total */
.packrev.result #vmeter,.packrev.result .strip{display:none}
.packrev.result .stage{min-height:min(40dvh,330px)}
.rescar{display:flex;gap:12px;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 16px;scroll-padding-inline:16px;scrollbar-width:none;align-items:center;justify-content:safe center;box-sizing:border-box} /* 16px of room at each end (Lior 2026-11-05: the NEW badge and the card edge need air); a short row stays centred */
.rescar::-webkit-scrollbar{display:none}
.rescar .rc{flex:none;margin:0;position:relative;height:calc(100% - 34px);max-height:300px;aspect-ratio:63/88;scroll-snap-align:start;display:grid;grid-template-rows:1fr auto;gap:6px}
.rescar .rcimg{display:block;position:relative;min-height:0;height:100%;border-radius:10px}
.rczb{position:absolute;inset:0;border:0;padding:0;margin:0;background:none;border-radius:10px;cursor:zoom-in}
.rczb:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.mini .rcimg{display:block;position:relative;border-radius:4px}.mini .rczb{border-radius:4px}
.rescar .rc img{width:100%;height:100%;object-fit:cover;border-radius:10px;box-shadow:0 6px 18px rgb(0 0 0/.45),0 0 0 1px var(--line)}
.rescar .rc.hit img{box-shadow:0 6px 18px rgb(0 0 0/.45),0 0 0 2px var(--gold)}
.rescar .rc.sold img{opacity:.55}
.rescar figcaption{display:flex;justify-content:center;gap:6px;align-items:baseline;font-size:14px}
.rescar figcaption small{color:var(--subtle);font-size:12px}.rescar .rc.hit figcaption b{color:var(--gold-text)}
.rcnew{position:absolute;top:6px;right:-6px;font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px;background:var(--new);color:var(--bg);transform:rotate(8deg)}
.rchint{text-align:center;margin:2px 0 0}
.rsum{text-align:center}.rsum .k{display:block}
.rsum .big{font-size:40px}
.rsub{color:var(--muted);font-size:15px}
.rbreak{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:8px 0 0;font-size:14px}
.rbreak div{display:flex;gap:6px}.rbreak dt{color:var(--subtle)}.rbreak dd{margin:0;font-weight:700}
.rluck{text-align:center;margin:8px 0 0;font-size:14px;color:var(--muted)}
.rtags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 4px}
.rtags.rgot{margin:0 0 10px}.rtags.rgot .rtag{font-size:14px;padding:5px 11px}
.rtag{font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--raised);color:var(--ink)}
.rtag.bb{color:var(--new-text)}.rtag.pts{color:var(--gold-text)}.rtag.rheat{color:var(--heat-text)}.rtag.new{color:var(--new-text)}
.packrev.result .tally{max-height:none}
/* League Pulls: recent + top, a swipeable row of the best card from each opening (tap = watch it) */
.pfhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.pfhead h2{margin:0}
.pfrow{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:10px 2px 12px;scrollbar-width:none}
.pfrow::-webkit-scrollbar{display:none}
.pf{flex:none;width:104px;scroll-snap-align:start;display:grid;gap:3px;justify-items:start;text-align:left;padding:8px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.pf:hover{border-color:var(--field)}
.pfimg{width:100%;aspect-ratio:63/88;border-radius:6px;overflow:hidden;background:var(--raised)}
.pfimg img{width:100%;height:100%;object-fit:cover;display:block}
.pf.hit .pfimg{box-shadow:0 0 0 2px var(--accent)}
.pf.chase .pfimg{box-shadow:0 0 0 2px var(--gold),0 0 14px color-mix(in oklab,var(--gold) 45%,transparent)}
.pf b{font-size:15px}.pf.chase b{color:var(--gold-text)}
.pfwho{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:650;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pfwho .avatar.sm{width:18px;height:18px;margin:0;vertical-align:0}
.pf small{font-size:11px;color:var(--subtle);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pfhead .seg{margin:0;flex:none}.pfhead .seg button{min-height:34px;padding:0 14px}
/* result layout: cards row + hint + a scrolling numbers area that never runs under the buttons */
.packrev.result .stage{flex:none;min-height:0;height:min(34dvh,290px)}
.packrev.result .capslot{min-height:0;margin:4px 0 2px}
.packrev.result .tally{flex:1 1 auto;min-height:0;max-height:none!important;height:auto!important;overflow-y:auto;overscroll-behavior:contain;padding-bottom:6px}
.packrev.result .revacts{flex:none}

/* ---------- 2026-11-02 17:18 recording: one tap per card, skip = a wave of flips ---------- */
/* charge-up before a better-than-bulk card flips: it lifts, glows in its true tier colour and trembles (longer when rarer) */
.v-tile.fx-charge{--cg:var(--t1,#9eb8fe)}
.v-tile.fx-charge[data-tier="2"]{--cg:var(--t2)} .v-tile.fx-charge[data-tier="3"]{--cg:var(--t3)}
.v-tile.fx-charge .v-flip{animation:gd-charge .38s ease-in-out infinite alternate}
.v-tile.fx-charge .v-back{box-shadow:0 0 0 2px color-mix(in oklab,var(--cg) 80%,transparent),0 0 34px 6px color-mix(in oklab,var(--cg) 55%,transparent);transition:box-shadow .3s}
.v-tile.fx-charge[data-tier="3"] .v-flip{animation-duration:.16s}
@keyframes gd-charge{from{transform:translateY(0) rotateY(180deg) rotateZ(-.6deg)}to{transform:translateY(-8px) rotateY(180deg) rotateZ(.6deg) scale(1.02)}}
/* result row: cards deal in; after "Skip to the end" they flip over one after another */
.rescar.deal .rc{animation:gd-deal .45s calc(var(--i) * 45ms) cubic-bezier(.2,.8,.3,1) both}
.rescar.wave{perspective:900px}
.rescar.wave .rc{animation:gd-wave .55s calc(var(--i) * 90ms) cubic-bezier(.3,1.3,.5,1) both;backface-visibility:hidden}
@keyframes gd-deal{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes gd-wave{0%{opacity:0;transform:rotateY(-100deg) translateZ(40px)}40%{opacity:1}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .v-tile.fx-charge .v-flip,.rescar .rc{animation:none} }

/* ---------- Pocket the otter replaces Chalis (Lior 2026-11-02) ---------- */
/* Default card back = the Pocket back (Lior picked "New card back"); the unlockable backs keep their own colours, and their coin
   shows Pocket's face instead of the "G". */
.v-back{background:url(/play/img/card-back.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430}
:where(:root:not([data-back]),[data-back=classic]) .v-back,.backswatch[data-back=classic] .v-back{background:url(/play/img/card-back.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
:where(:root:not([data-back]),[data-back=classic]) .v-back span{visibility:hidden}
.v-back span{color:transparent!important;position:relative}
.v-back span::after{content:"";position:absolute;inset:14%;background:url(/play/img/pocket/face.png?v=29eeaf54) center/contain no-repeat}
/* Unlockable backs: Pocket in costume per theme (Lior approved 2026-11-03). Ids stay as saved in prefs; labels in rules.js. */
.v-back span{visibility:hidden}
[data-back=midnight] .v-back,.backswatch[data-back=midnight] .v-back{background:url(/play/img/backs/midnight.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=foilburst] .v-back,.backswatch[data-back=foilburst] .v-back{background:url(/play/img/backs/foilburst.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=vault] .v-back,.backswatch[data-back=vault] .v-back{background:url(/play/img/backs/vault.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=master] .v-back,.backswatch[data-back=master] .v-back{background:url(/play/img/backs/master.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=season] .v-back,.backswatch[data-back=season] .v-back{background:url(/play/img/backs/season.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=wonder] .v-back,.backswatch[data-back=wonder] .v-back{background:url(/play/img/backs/wonder.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=wink] .v-back,.backswatch[data-back=wink] .v-back{background:url(/play/img/backs/wink.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=laugh] .v-back,.backswatch[data-back=laugh] .v-back{background:url(/play/img/backs/laugh.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=curious] .v-back,.backswatch[data-back=curious] .v-back{background:url(/play/img/backs/curious.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=season2] .v-back,.backswatch[data-back=season2] .v-back{background:url(/play/img/backs/season2.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=season3] .v-back,.backswatch[data-back=season3] .v-back{background:url(/play/img/backs/season3.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=season4] .v-back,.backswatch[data-back=season4] .v-back{background:url(/play/img/backs/season4.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=season5] .v-back,.backswatch[data-back=season5] .v-back{background:url(/play/img/backs/season5.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=season6] .v-back,.backswatch[data-back=season6] .v-back{background:url(/play/img/backs/season6.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=grail] .v-back,.backswatch[data-back=grail] .v-back{background:url(/play/img/backs/grail.webp?v=29eeaf54) center/100% 100% no-repeat,#0f1430;box-shadow:0 12px 26px -8px rgb(0 0 0/.7)}
/* Pocket poses are square (Chalis was wide) */
.gmmascot{width:clamp(80px,24cqw,132px)}
/* Pocket's raft (invite) and shrug (bad beat) */
.raft{display:block;width:min(240px,70%);height:auto;margin:0 auto 6px;filter:drop-shadow(0 6px 14px rgb(0 0 0/.35))}
.raftcard{text-align:center} .raftcard h2{margin:2px 0 4px} .raftcard p{margin:0 auto 12px;max-width:440px}
.rbb{display:flex;align-items:center;gap:10px;justify-content:center;margin:6px auto 4px;max-width:420px;padding:6px 12px 6px 6px;border-radius:14px;background:color-mix(in oklab,var(--gold) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 35%,transparent)}
.rbb img{width:56px;height:56px;flex:none} .rbb p{margin:0;text-align:left;font-size:14px;line-height:1.35}
@media (prefers-reduced-motion:no-preference){.rbb img{animation:ch-bob 3.2s ease-in-out infinite}}
/* Hall of Fame: Pocket's house marks */
.houserow td{color:var(--muted)} .house{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink)} .house img{width:20px;height:auto}

/* ---------- Player-to-player trades (2026-11-02) ---------- */
.hav{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.item.holder{display:flex;align-items:center;gap:10px} .item.holder>div{flex:1;min-width:0} .item.holder .btn{flex:none}
.item.offer.in{box-shadow:inset 3px 0 0 var(--accent)}
.ostat{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:1px 7px;border-radius:99px;background:var(--raised);color:var(--muted)}
.ostat.accepted{color:var(--up)} .ostat.declined,.ostat.expired,.ostat.cancelled{color:var(--subtle)}
.tradeb h3{margin:0 0 6px;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.tbcols{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
@media (max-width:560px){.tbcols{grid-template-columns:1fr}}
.tblist{display:grid;gap:6px;max-height:300px;overflow:auto;align-content:start}
.tbrow{display:flex;align-items:center;gap:8px;padding:6px;border-radius:10px;background:var(--raised);box-shadow:inset 0 0 0 1px transparent}
.tbrow.on{box-shadow:inset 0 0 0 1.5px var(--accent)}
.tbrow .v-thumb{width:30px;flex:none}
.tbn{flex:1;min-width:0;display:grid} .tbn b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tbn small{color:var(--muted);font-size:12px}
.tbq{display:flex;align-items:center;gap:6px;flex:none} .tbq button{width:32px;height:32px;border-radius:9px;border:0;background:var(--surface);color:var(--ink);font:inherit;font-weight:800;cursor:pointer} .tbq button:disabled{opacity:.35}
.tbcash{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 12px} .tbamt{display:flex;align-items:center;gap:4px;font-weight:700}
.tbamt input{width:110px;font:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-height:40px;-moz-appearance:textfield;appearance:textfield}
.tbamt input::-webkit-inner-spin-button,.tbamt input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.tbmeter{background:var(--surface);border-radius:12px;padding:10px 12px;margin-bottom:12px}
.tbv{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.tbbar{position:relative;height:8px;border-radius:9px;background:var(--raised);margin-top:8px;overflow:hidden}
.tbbar i{position:absolute;top:0;bottom:0;transition:width .25s var(--ease-out)} #tbbg{right:50%;background:var(--accent)} #tbbt{left:50%;background:var(--t1)}
.ofhead{display:flex;gap:12px;align-items:center;margin-bottom:6px} .ofnote{font-style:italic;color:var(--muted);margin:8px 0}
.ofval{margin:4px 0 12px} .cashchip{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--gold-ink);font-weight:900;flex:none}
.tbcash .seg{display:inline-flex;background:var(--raised);border-radius:10px;padding:3px;gap:2px}
.tbcash .seg button{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;font-weight:700;padding:7px 11px;border-radius:8px;white-space:nowrap;cursor:pointer;min-height:34px}
.tbcash .seg button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgb(0 0 0/.25)}
/* AI rivals in trades: hint, ladder, the deal moment */
.aihint{margin:0 0 4px;font-size:14px;color:var(--muted);background:var(--raised);border-radius:10px;padding:8px 10px}
.tladder{display:grid;gap:6px;margin:4px 0 10px} .tladder>div{display:flex;flex-wrap:wrap;gap:6px}
.tl{font-size:12px;font-weight:700;padding:4px 10px;border-radius:99px;background:var(--raised);color:var(--muted)}
.tl.on{background:color-mix(in oklab,var(--gold) 22%,var(--raised));color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 55%,transparent)}
#tberr .btn{margin-left:6px;vertical-align:middle}
.dealsheet{text-align:center} .dealsheet h2{font-size:30px;margin:2px 0 6px} .dealsheet .lead{font-size:17px;margin:0 0 10px}
.dealotter{width:150px;height:auto;display:block;margin:4px auto 0;filter:drop-shadow(0 10px 20px rgb(0 0 0/.4))}
@media (prefers-reduced-motion:no-preference){.dealotter{animation:gm-pop .7s cubic-bezier(.2,1.6,.4,1) both}}
.dealbadge{display:inline-block;margin:0 auto 10px;padding:6px 14px;border-radius:99px;background:color-mix(in oklab,var(--gold) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 45%,transparent)}
.item.offer{display:flex;align-items:center;gap:10px;text-align:left} .item.offer>div:not(.px){flex:1;min-width:0} .item.offer .px{flex:none}
.item.offer .nm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.pname .err:empty{display:none}

/* Locked styles: a sealed "?" in the shape of the thing; the real look is never drawn (progress.js mystery()) */
.mystery{display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgb(255 255 255/.035) 0 6px,transparent 6px 12px),var(--raised);box-shadow:inset 0 0 0 1.5px var(--line);color:var(--subtle)}
.mystery b{font-family:var(--display);font-weight:800;font-size:22px;line-height:1;opacity:.55}
.mystery.my-back{width:100%;aspect-ratio:63/88;border-radius:8px}
.mystery.my-style{width:56px;height:56px;border-radius:12px}
.mystery.my-frame{width:48px;height:48px;border-radius:50%}
.mystery.big.my-back{width:150px;border-radius:12px}.mystery.big.my-style{width:120px;height:120px;border-radius:24px}.mystery.big.my-frame{width:120px;height:120px}
.mystery.big b{font-size:52px}
.img-x{visibility:hidden}

/* Pose-specific motion (2026-11-03): waiting = asleep floating on the back, a slow rock like a swell; search = peeking
   under the kelp, a curious side-to-side tilt with a little dip. Same reduced-motion rule as the bob. */
@keyframes ch-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes ch-peek{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(-7deg) translateY(2px)}45%{transform:rotate(0) translateY(-3px)}70%{transform:rotate(7deg) translateY(2px)}}
@media (prefers-reduced-motion:no-preference){
  .mascot[src*="/pocket/wait."]{animation:ch-float 5.5s ease-in-out infinite;transform-origin:50% 80%}
  .mascot[src*="/pocket/search."]{animation:ch-peek 3.6s ease-in-out infinite;transform-origin:50% 90%}
}

/* ---------- The card reveal (reveal.js, 2026-11-05): flip -> hang -> snap -> sparkle, from the reveal lab ---------- */
.rv{position:absolute;inset:0;z-index:0;overflow:hidden;--tc:#4d8df7;--glow:0;--w:min(232px,50cqh,62cqw);--h:calc(var(--w) * 1.397);
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.rv-spot{position:absolute;left:50%;top:-40px;width:420px;height:min(520px,90%);transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 60% at 50% 0,color-mix(in oklab,var(--tc) 30%,transparent),transparent 70%);opacity:calc(.15 + var(--glow)*.85);mix-blend-mode:screen}
.rv-dim{position:absolute;inset:0;z-index:3;background:radial-gradient(40% 45% at 50% 48%,transparent 0,#05071a 80%);opacity:0;pointer-events:none}
.rv-scene{position:absolute;inset:0;z-index:4;perspective:1000px}
.rv-pedestal{position:absolute;left:50%;top:calc(50% + var(--h)/2 - 6px);width:calc(var(--w)*1.1);height:30px;margin-left:calc(var(--w)*-.55);border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.8),rgba(0,0,0,.35) 60%,transparent);transform:scale(calc(1 - var(--lift,0)*.011));opacity:calc(1 - var(--lift,0)*.016)}
.rv-wrap{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);transform-style:preserve-3d;will-change:transform}
.rv-flat{transform-style:flat;pointer-events:none}
.rv-card{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.rv-face{position:absolute;inset:0;border-radius:calc(var(--w)*.05);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#0f1430}
.rv-face img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.rv-back{box-shadow:0 0 0 2px color-mix(in oklab,var(--tc) calc(var(--glow)*100%),#2b335c),0 0 calc(var(--glow)*48px) color-mix(in oklab,var(--tc) calc(var(--glow)*95%),transparent),0 14px 30px -10px #000}
.rv-back::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 calc(var(--glow)*36px) color-mix(in oklab,var(--tc) calc(var(--glow)*90%),transparent);
  background:linear-gradient(transparent 40%,color-mix(in oklab,var(--tc) calc(var(--glow)*30%),transparent))}
.rv-front{transform:rotateY(180deg);box-shadow:0 0 0 2px var(--tc),0 0 38px color-mix(in oklab,var(--tc) 60%,transparent),0 16px 34px -10px #000}
.rv-foil{position:absolute;inset:0;mix-blend-mode:color-dodge;opacity:var(--foil,0);pointer-events:none;
  background:linear-gradient(115deg,transparent 22%,#ff3d9a 34%,#ffd23d 41%,#3dffb5 48%,#3dc2ff 55%,#a03dff 62%,transparent 76%);background-size:260% 260%;background-position:var(--fx,100%) 50%}
.rv-glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:var(--foil,0);background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.75),transparent 45%)}
.rv-bloom{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.rv-edge{position:absolute;left:50%;top:-6px;bottom:-6px;width:4px;margin-left:-2px;border-radius:4px;opacity:0;pointer-events:none;
  background:linear-gradient(transparent,#fff 12%,#fff 88%,transparent);box-shadow:0 0 12px 3px var(--tc),0 0 40px 8px color-mix(in oklab,var(--tc) 70%,transparent)}
.rv-shock{position:absolute;inset:0;border-radius:12px;border:3px solid var(--tc);box-shadow:0 0 22px var(--tc),inset 0 0 14px var(--tc);opacity:0;pointer-events:none}
.rv-shock.w{border-color:#fff;border-width:2px}
.rv-rays{position:absolute;left:50%;top:48%;width:720px;height:720px;margin:-360px 0 0 -360px;border-radius:50%;opacity:0;pointer-events:none;z-index:2;
  background:repeating-conic-gradient(from 0deg,color-mix(in oklab,var(--tc) 85%,#fff) 0 3deg,transparent 3deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 6%,transparent 62%);mask:radial-gradient(circle,#000 6%,transparent 62%);mix-blend-mode:screen}
.rv-flash{position:absolute;inset:0;z-index:6;opacity:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(45% 40% at 50% 48%,#fff 0,color-mix(in oklab,var(--tc) 70%,#fff) 25%,transparent 70%)}
.rv-fx{position:absolute;inset:0;z-index:5;width:100%;height:100%;pointer-events:none}
.rv .newstamp{z-index:3}
/* the pack's canvas sits over the reveal during the rip; the reveal takes over at the hand-off */
.packrev .stage .wow{z-index:8}
.packrev .stage:has(.rv) .slabcase,.packrev .stage:has(.rv) > .v-tile{display:none}
/* Full screen for every pack (Lior 2026-11-05) */
.scrim:has(> .packrev){padding:0;align-items:stretch;justify-content:stretch}
.sheet.packrev{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0;border:0;
  padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.sheet.packrev::before{display:none}
@media (min-width:760px){.sheet.packrev{padding-left:max(24px,calc(50vw - 360px));padding-right:max(24px,calc(50vw - 360px))}}
/* Level-up / unlock moment (progress.js unlockSheet, 2026-11-05) */
.lvlup{text-align:center}
.lvlup h2{margin:2px 0 6px;font-size:26px}
.lvbadge{width:96px;height:96px;margin:6px auto 10px;display:grid;place-items:center;border-radius:24px;font:800 44px/1 "Bricolage Grotesque",var(--body);color:var(--gold-ink);
  background:radial-gradient(circle at 35% 30%,#ffe7a3,var(--gold) 60%,#a97818);box-shadow:0 0 0 3px color-mix(in oklab,var(--gold) 40%,transparent),0 0 46px -6px var(--gold);animation:lvpop .7s var(--ease) both}
.lvbadge.t0{background:radial-gradient(circle at 35% 30%,#e9ecf5,#aeb5c8 60%,#6f7790);color:#0f1430;box-shadow:0 0 0 3px #aeb5c855,0 0 40px -8px #aeb5c8}
.lvbadge.t1{background:radial-gradient(circle at 35% 30%,#b9f5d0,#3ddc84 60%,#1d8a50);box-shadow:0 0 0 3px #3ddc8455,0 0 40px -8px #3ddc84}
.lvbadge.t2{background:radial-gradient(circle at 35% 30%,#c8dcff,#4d8df7 60%,#2350a8);color:#fff;box-shadow:0 0 0 3px #4d8df755,0 0 40px -8px #4d8df7}
.lvbadge.t3{background:radial-gradient(circle at 35% 30%,#e7d6ff,#b48df4 60%,#6a43b0);color:#fff;box-shadow:0 0 0 3px #b48df455,0 0 40px -8px #b48df4}
@keyframes lvpop{0%{transform:scale(.4) rotate(-12deg);opacity:0}60%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:none}}
.unl{display:grid;gap:8px;margin:12px 0 0;text-align:left}
.unlitem{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--raised);color:var(--ink);font:inherit;cursor:pointer}
.unlitem .backswatch,.unlitem .sw{flex:none;transform:scale(.8)}
.unlitem span{display:grid}.unlitem small{color:var(--subtle)}
.rvnew,.rvtiers{list-style:none;margin:0;padding:0;display:grid;gap:4px;text-align:left}
.rvnew li,.rvtiers li{display:flex;align-items:center;gap:8px;font-size:14px}
.rvtiers li small{margin-left:auto;color:var(--subtle)}
.sw2{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
@media (prefers-reduced-motion:reduce){.lvbadge{animation:none}}
/* Pack-first onboarding (2026-11-05) */
.welcome .btn.big{min-height:56px;font-size:18px;margin-top:14px}
.onbalt{margin:14px 0 0}.onbalt summary{color:var(--accent-text);cursor:pointer;font-weight:600}
.onbsheet{text-align:left}.onbsheet .onbmascot{display:block;margin:0 auto 4px}
.onbsheet h2{margin:2px 0 6px}
.draftsug .list{margin:10px 0}
.item.sug{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:6px 0}
.item.sug .th img,.item.sug .th > *{width:44px;height:auto;max-height:60px;object-fit:contain;border-radius:4px}
.item.sug .nm{display:grid;min-width:0}.item.sug .nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item.sug .nm small{color:var(--subtle)}
/* Goals (missions + season objectives, 2026-11-05) */
.goals .gsec{margin:12px 0 4px;font-weight:700;font-size:14px;display:flex;justify-content:space-between;gap:8px}
.goals .gsec small{font-weight:500;color:var(--subtle);text-align:right}
/* End-of-session hook: when the next free pack comes (2026-11-05) */
.comeback{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:10px 12px;border-radius:12px;background:var(--gold-soft);border:1px solid color-mix(in oklab,var(--gold) 40%,var(--line));font-size:14px;text-align:left}
.comeback b{color:var(--gold-text)}
.rescar .rc:last-child{scroll-snap-align:end}

/* Result receipt (Lior 2026-11-05): each part of "You got back" on its own row, with what it is, summing to the total */
.rcpt{margin:12px auto 0;max-width:420px;display:grid;gap:0;font-size:14px;text-align:left}
.rcpt div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:7px 2px;border-top:1px solid var(--line)}
.rcpt div:first-child{border-top:0}
.rcpt dt{color:var(--ink);font-weight:650}
.rcpt dt small{display:block;font-weight:500;color:var(--subtle);font-size:12.5px;margin-top:1px}
.rcpt dd{margin:0;font-weight:750;font-variant-numeric:tabular-nums}
.rcpt .tot{border-top:1px solid color-mix(in oklab,var(--ink) 40%,var(--line))}
.rcpt .tot dt,.rcpt .tot dd{font-weight:800}
.packrev .tally .rfoot,.packrev .tally .ptsline,.packrev .tally .heatline{text-align:center}

/* Luck banner on the result (Lior 2026-11-06): lucky = top 10% of this pack's pulls, top1 = top 1%; "plain" = lucky but
   it cost more than it paid back (no gold, no confetti) */
.rlucky{display:grid;gap:2px;margin:10px auto 0;max-width:420px;padding:10px 14px;border-radius:12px;text-align:center;background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 55%,transparent)}
.rlucky b{color:var(--gold-text);font-size:16px}.rlucky span{font-size:13.5px;color:var(--muted)}
.rlucky.top1{background:color-mix(in oklab,var(--gold) 26%,var(--surface));box-shadow:inset 0 0 0 2px var(--gold)}
.rlucky.plain{background:var(--raised);box-shadow:inset 0 0 0 1px var(--line)}.rlucky.plain b{color:var(--ink)}
.rlxp{color:var(--accent-text);font-weight:700;white-space:nowrap}
.ltag{font-style:normal;font-size:12px;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--gold-soft);color:var(--gold-text);margin-right:4px}
.ltag.top1{background:var(--gold);color:var(--gold-ink)}.ltag.rough{background:var(--raised);color:var(--muted)}

/* Free pack odds (Lior 2026-11-06) */
.godds{margin-top:10px;border-top:1px solid var(--line);padding-top:8px}
.godds > summary{cursor:pointer;font-size:14px;font-weight:650;color:var(--accent-text)}
.goset{border-top:1px solid var(--line);padding:8px 0}
.goset > summary{cursor:pointer;display:flex;justify-content:space-between;gap:10px;align-items:baseline;list-style:none}
.goset > summary::-webkit-details-marker{display:none}
.goset > summary small{display:block;color:var(--subtle);font-size:12px}
.gonum{font-variant-numeric:tabular-nums;color:var(--muted);font-size:13px;white-space:nowrap}
.gostats{display:flex;gap:14px;font-size:13px;color:var(--muted);margin:6px 0}
.golist{display:grid;gap:2px;font-size:13.5px}
.golist div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px dashed color-mix(in oklab,var(--line) 70%,transparent)}
.golist div span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.golist small{color:var(--subtle)}

/* A pulled card zoomed to full size (zoomCard in app.js), same look as the homepage binder zoom */
.scrim.czoom{z-index:40;align-items:center;padding:24px 16px;background:rgb(5 8 25/.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:zoom-out}
.czoom > figure{margin:0;display:grid;justify-items:center;gap:14px;max-height:100%}
.czoom .czimg{width:min(420px,86vw,calc((100svh - 190px) * .716));transform-origin:center;cursor:default}
.czoom .czimg .v-hero{width:100%;margin:0}
.czoom .czimg .v-hero figcaption{margin-top:6px}
.czoom .czimg .v-face{box-shadow:0 30px 70px -20px #000}
.czoom.gold .czimg .v-face{box-shadow:0 0 0 3px var(--gold),0 0 60px -10px var(--gold),0 30px 70px -20px #000}
.czoom > figure > figcaption{display:grid;justify-items:center;gap:2px;text-align:center;color:var(--muted)}
.czoom .czn{color:var(--ink);font-size:18px}.czoom .czs{font-size:13px;color:var(--subtle)}.czoom .czp{font-weight:700;color:var(--ink)}
.czoom.gold .czp{color:var(--gold-text)}
.czoom .czx{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;width:44px;height:44px;border-radius:50%;border:1px solid rgb(255 255 255/.2);background:rgb(255 255 255/.08);color:#fff;font-size:18px;cursor:pointer}
/* Sign in with Google / Apple (2026-11-07). Both brands want a white button with their mark on a dark background. */
.providers{display:grid;gap:8px;margin:12px 0 0}
.btn.provider{background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600;gap:10px}
.btn.provider svg{width:20px;height:20px;flex:none}
.or{display:flex;align-items:center;gap:10px;color:var(--subtle);font-size:13px;margin:12px 0 2px}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.login .f,.claim .f{margin-top:8px}
.idrow{display:flex;align-items:center;gap:10px;padding:6px 0}.idrow svg{width:22px;height:22px;flex:none}.idrow > span{flex:1;display:grid;min-width:0}.idrow small{color:var(--subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.claim .k{display:block;margin-top:2px}