/* 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. */
@font-face{font-family:"Fraunces";src:url("/fonts/fraunces-latin.woff2") format("woff2");font-weight:600 800;font-display:swap}
:root{--display:"Fraunces",Georgia,"Times New Roman",serif;--t1:#5aa7ff;--t2:#b48cff;--t3:#e8b84a}

/* ---------- 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(--gold);margin-right:7px}
h1{font-family:var(--display);font-weight:700;font-variation-settings:"opsz" 96;letter-spacing:-.015em}

/* ---------- card backs (Your account > Style) ---------- */
[data-back=midnight] .v-back{background:var(--grain),radial-gradient(circle at 50% 38%,#24305a 0,#0d1226 62%),#0d1226;box-shadow:inset 0 0 0 3px #0b0f1e,inset 0 0 0 4px #6f86d6,0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=midnight] .v-back span{background:radial-gradient(circle at 35% 30%,#dfe8ff,#8ea6ff 55%,#3c4fa0);color:#0b0f1e}
[data-back=foilburst] .v-back{background:conic-gradient(from 210deg at 50% 45%,#ff6b6b,#ffd166,#6ef0a6,#5ac8fa,#b48cff,#ff6b6b);box-shadow:inset 0 0 0 3px #111,inset 0 0 0 5px rgb(255 255 255/.5),0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=foilburst] .v-back span{background:#111;color:#fff;box-shadow:0 0 0 3px rgb(255 255 255/.7)}
[data-back=vault] .v-back{background:var(--grain),repeating-radial-gradient(circle at 50% 45%,rgb(232 184 74/.16) 0 2px,transparent 2px 10px),linear-gradient(160deg,#2b2213,#100d07);box-shadow:inset 0 0 0 3px #100d07,inset 0 0 0 5px var(--gold),0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=master] .v-back{background:var(--grain),repeating-linear-gradient(90deg,rgb(255 255 255/.05) 0 1px,transparent 1px 8px),linear-gradient(160deg,#173a2c,#0a1712);box-shadow:inset 0 0 0 3px #0a1712,inset 0 0 0 5px #6fd3a0,0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=master] .v-back span{background:radial-gradient(circle at 35% 30%,#e2fff0,#6fd3a0 55%,#2d7a57);color:#0a1712}
[data-back=season] .v-back{background:var(--grain),linear-gradient(135deg,#3a1030 0,#170818 55%,#3a1030 100%);box-shadow:inset 0 0 0 3px #170818,inset 0 0 0 5px #ff8ad8,0 12px 26px -8px rgb(0 0 0/.7)}
[data-back=season] .v-back span{background:radial-gradient(circle at 35% 30%,#ffe3f6,#ff8ad8 55%,#9c2f78);color:#170818}
[data-back=grail] .v-back{background:var(--grain),conic-gradient(from 0deg at 50% 45%,#1d1504,#5a4410,#e8b84a,#5a4410,#1d1504,#5a4410,#e8b84a,#5a4410,#1d1504);box-shadow:inset 0 0 0 3px #0f0b03,inset 0 0 0 6px #ffe3a1,0 12px 26px -8px rgb(0 0 0/.7)}
.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,#20242d,#0f1115);box-shadow:inset 0 0 0 3px #0f1115,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%,#20242d 0,#0d0f13 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 #0f1115,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 #0f1115,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 #0f1115,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}
.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(--gold) 45%,var(--raised)))}
.range .mark{position:absolute;top:6px;width:2px;height:22px;background:var(--ink);transform:translateX(-1px)}
.range .mark.avg{background:var(--gold-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(--gold-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(--gold);border-color:var(--gold);color:var(--gold-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(--gold-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(--gold-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%,#1c1f26 46%,#15171c 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,rgba(232,184,74,.22),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(--gold-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(--gold) 16%,transparent);color:var(--gold-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 rgba(232,184,74,.7)}
.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(--gold-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(--gold) 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:#f4f1ea;font:800 20px var(--display);line-height:1}
.lgrank small{font:600 10px system-ui;letter-spacing:.08em;text-transform:uppercase;color:#c3bdb2;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(--gold-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(--gold-soft);border:1px solid color-mix(in oklab,var(--gold) 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(--gold),0 0 30px -4px var(--gold)}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,#6b7180,#c3bdb2);transition:width .6s var(--ease)}
.vm.paid .vm-bar i{background:linear-gradient(90deg,#b8902f,var(--gold))}
.vm-line{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--gold);border-radius:2px;box-shadow:0 0 8px var(--gold)}
.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(--gold-text);font-weight:750}
.vm.paid{animation:vm-flash .9s ease}
@keyframes vm-flash{30%{filter:drop-shadow(0 0 10px var(--gold))}}

/* 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}