/* WikiGacha: a Vegas floor at 2am. Velvet carpet, chasing marquee bulbs, neon tubes, LED meters.
   Neon pink is for actions, gold is for money, and rarity colours are kept for the cards themselves. */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
:root {
  --bg: #0e0820; --bg2: #160d33; --panel: #1b1140; --panel2: #24175a; --line: #3b2a75;
  --ink: #fff5fd; --muted: #b4a7d6; --pink: #ff2bd6; --cyan: #22e5ff; --gold: #ffc233;
  --sign: "Bungee", "Nunito", system-ui, sans-serif;
  --shade: "Bungee Shade", "Bungee", system-ui, sans-serif;
  --neon: "Neonderthaw", cursive;
  --led: "Doto", ui-monospace, monospace;
  --ui: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font: 16px/1.5 var(--ui); color: var(--ink); overflow-x: hidden;
  background:
    radial-gradient(70% 50% at 15% -10%, rgba(255, 43, 214, .18), transparent 70%),
    radial-gradient(60% 40% at 100% 20%, rgba(34, 229, 255, .12), transparent 70%),
    conic-gradient(from 45deg, #110a28 25%, #140c30 0 50%, #110a28 0 75%, #140c30 0) 0 0 / 34px 34px,
    var(--bg); }
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
[hidden] { display: none !important; }
svg { flex: none; }
h1, h2, h3 { margin: 0; font-weight: 400; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 2px solid var(--line); border-radius: 999px; padding: 11px 20px;
  font: 400 15px/1 var(--sign); text-transform: uppercase; background: var(--panel); color: var(--ink); transition: transform .08s, filter .15s; }
.btn:hover:not(:disabled) { filter: brightness(1.18); }
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.hot { border: 0; color: #fff; background: linear-gradient(180deg, #ff5ae4, #ff2bd6 45%, #c4119f); box-shadow: 0 4px 0 #7d0a66, 0 0 26px -4px var(--pink); text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.btn.hot:active:not(:disabled) { box-shadow: 0 2px 0 #7d0a66, 0 0 26px -4px var(--pink); }
.btn.ghost { background: rgba(14, 8, 32, .7); }
.btn.big { padding: 17px 30px; font-size: 19px; }
.btn.sm { padding: 7px 12px; font-size: 12px; }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 18px; padding: 10px max(16px, calc((100% - 1208px) / 2)); background: rgba(14, 8, 32, .9); backdrop-filter: blur(10px); border-bottom: 2px solid var(--line); }
.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.logo-tile { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--pink); font: 400 22px/1 var(--sign); color: #fff; box-shadow: 0 0 18px var(--pink), inset 0 -3px 0 rgba(0, 0, 0, .25); }
.logo-word { font: 400 21px/1 var(--sign); }
.logo-word i { font-style: normal; color: var(--cyan); text-shadow: 0 0 12px rgba(34, 229, 255, .7); }
.tabs { display: flex; gap: 2px; flex: none; }
.tabs button { background: none; border: 0; padding: 8px 12px; border-radius: 8px; font: 400 13px/1 var(--sign); text-transform: uppercase; color: var(--muted); }
.tabs button[aria-current] { color: var(--ink); background: var(--panel); }
.tab-count { margin-left: 4px; padding: 2px 6px; border-radius: 99px; background: var(--pink); color: #fff; font: 700 11px/1 var(--ui); }
.tab-count:empty { display: none; }
.ticker { flex: 1; min-width: 0; height: 38px; overflow: hidden; border-radius: 8px; background: #07040f; box-shadow: inset 0 0 0 2px #1d1238, inset 0 0 18px #000;
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; height: 100%; align-items: center; animation: tick 40s linear infinite; }
.ticker-track > div { display: flex; align-items: center; gap: 18px; padding-right: 18px; font: 800 17px/1 var(--led); text-transform: uppercase; color: #ffb000; white-space: nowrap; text-shadow: 0 0 6px currentColor; }
.ticker-track b { color: var(--pink); font-weight: 800; }
@keyframes tick { to { transform: translateX(-50%); } }
.nav-right { display: flex; align-items: center; gap: 10px; flex: none; }
.claim { display: flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 8px 16px 8px 8px; font: 400 13px/1 var(--sign); text-transform: uppercase; color: #1a0a12;
  background: linear-gradient(180deg, #fff0a8, var(--gold)); box-shadow: 0 0 22px -2px var(--gold); animation: beckon 1.2s ease-in-out infinite; }
.claim-coin { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #1a0a12; color: var(--gold); font-size: 13px; }
@keyframes beckon { 50% { box-shadow: 0 0 34px 2px var(--gold); transform: scale(1.03); } }
.refill { font-size: 12px; color: var(--muted); }
.credits { display: flex; flex-direction: column; align-items: flex-end; padding: 5px 12px; border-radius: 8px; background: #07040f; box-shadow: inset 0 0 0 2px #1d1238; }
.cr-l { font: 400 9px/1 var(--sign); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.cr-v { font: 800 21px/1.05 var(--led); color: var(--gold); text-shadow: 0 0 8px rgba(255, 194, 51, .7); font-variant-numeric: tabular-nums; }
.credits.pop { animation: crpop .6s; }
@keyframes crpop { 30% { transform: scale(1.18); filter: brightness(1.6); } }
.icon-btn { display: grid; place-items: center; width: 40px; height: 40px; background: var(--panel); border: 2px solid var(--line); border-radius: 10px; }
.icon-btn svg { width: 20px; height: 20px; }
.sound[aria-pressed="false"] { color: var(--muted); }
.sound[aria-pressed="false"] .waves { display: none; }

main { max-width: 1240px; margin: 0 auto; padding: 24px 16px 100px; }

@keyframes float { 50% { translate: 0 -10px; } }

/* ---- the marquee sign ---- */
.marquee { position: relative; text-align: center; padding: 64px 40px 250px; border-radius: 32px; overflow: hidden;
  background: radial-gradient(60% 70% at 50% 35%, #3a1670, #1a0d3d 60%, #120a2a);
  box-shadow: inset 0 0 0 2px var(--line); }
.marquee h1 { position: relative; display: flex; flex-direction: column; align-items: center; }
.neon { font: 400 clamp(56px, 8vw, 110px)/.8 var(--neon); color: #ffe6fb; transform: rotate(-4deg); margin-bottom: 4px;
  text-shadow: 0 0 4px #fff, 0 0 12px var(--pink), 0 0 30px var(--pink), 0 0 60px var(--pink); animation: flicker 6s infinite; }
@keyframes flicker { 0%, 92%, 96%, 100% { opacity: 1; } 93%, 95% { opacity: .55; } }
.shade { font: 400 clamp(34px, 7.4vw, 104px)/1 var(--shade); color: var(--gold); text-shadow: 0 0 24px rgba(255, 194, 51, .55); letter-spacing: .01em; }
.lede { position: relative; max-width: 56ch; margin: 22px auto 28px; color: #e2d8f7; font-size: 17px; }
.cta { position: relative; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.marquee-packs { position: absolute; left: 50%; bottom: -40px; width: 0; height: 0; }
.mp { position: absolute; bottom: 0; --pw: 150px; transform-origin: 50% 100%; }
.mp .pk { animation: float 4.5s ease-in-out infinite; }
.mp-0 { transform: translateX(-160%) rotate(-16deg); } .mp-1 { transform: translateX(-50%) translateY(-24px); z-index: 1; } .mp-2 { transform: translateX(60%) rotate(16deg); }
.mp-0 .pk { animation-delay: -1.5s; } .mp-2 .pk { animation-delay: -3s; }
/* ---- packs: crimped foil with a jigsaw emblem ---- */
.pk { --c1: #0aa6ff; --c2: #9ff1ff; --c3: #062e8a; position: relative; width: var(--pw, 170px); aspect-ratio: .64; isolation: isolate; }
/* Shadow and glow live on a blurred layer underneath: a CSS filter on .pk washes out the masked foil in Chrome. */
.pk::before { content: ""; position: absolute; z-index: -1; inset: 8% 6% -3%; border-radius: 12%; background: rgba(0, 0, 0, .7); filter: blur(16px); transform: translateY(12px); pointer-events: none; }
.pk-body { -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 10px 51% repeat-x; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 10px 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 10px 51% repeat-x;
  transform: perspective(700px) rotateX(var(--prx, 0deg)) rotateY(var(--pry, 0deg)); animation: sway 7s ease-in-out infinite; transition: transform .25s ease-out;
  box-shadow: inset 3px 0 2px -1px rgba(255, 255, 255, .45), inset -3px 0 3px -1px rgba(0, 0, 0, .35);
  position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10% 8%; overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg font-family='Georgia,serif' font-size='17' fill='white' fill-opacity='.16' text-anchor='middle'%3E%3Ctext x='15' y='22'%3EΩ%3C/text%3E%3Ctext x='45' y='22'%3EЖ%3C/text%3E%3Ctext x='15' y='52'%3E維%3C/text%3E%3Ctext x='45' y='52'%3Eع%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0 / calc(var(--pw, 170px) * .3) auto,
    radial-gradient(70% 40% at 50% 40%, rgba(255, 255, 255, .5), transparent 70%),
    linear-gradient(160deg, var(--c2), var(--c1) 45%, var(--c3)); }
.pk-body > * { z-index: 2; }
/* Pillowed foil: ridged crimp seals, puffed edges, a vertical gloss band and a glare that follows the pointer. */
.pk-body::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1.5px, rgba(0, 0, 0, .14) 1.5px 3.5px) top / 100% 8.5% no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 1.5px, rgba(0, 0, 0, .14) 1.5px 3.5px) bottom / 100% 8.5% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, .35) 0, transparent 2%, transparent 7.5%, rgba(255, 255, 255, .6) 8.5%, rgba(0, 0, 0, .45) 9.2%, rgba(0, 0, 0, .12) 14%, transparent 22%,
                            transparent 80%, rgba(0, 0, 0, .14) 86%, rgba(0, 0, 0, .5) 90.8%, rgba(255, 255, 255, .45) 91.5%, transparent 93%, transparent 98%, rgba(0, 0, 0, .3)),
    linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .1) 6%, transparent 14%, transparent 82%, rgba(0, 0, 0, .14) 91%, rgba(0, 0, 0, .5)),
    linear-gradient(90deg, transparent calc(14% + var(--gx, 0%)), rgba(255, 255, 255, .38) calc(20% + var(--gx, 0%)), rgba(255, 255, 255, .08) calc(24% + var(--gx, 0%)), transparent calc(30% + var(--gx, 0%))),
    repeating-linear-gradient(97deg, transparent 0 22px, rgba(255, 255, 255, .07) 23px, transparent 26px, transparent 41px, rgba(0, 0, 0, .06) 43px, transparent 46px); }
.pk-body::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(38% 26% at var(--mx, 70%) var(--my, 22%), rgba(255, 255, 255, .42), rgba(255, 255, 255, .08) 50%, transparent 72%),
              linear-gradient(115deg, transparent 46%, rgba(255, 255, 255, .4) 49.5%, rgba(255, 255, 255, .1) 51%, transparent 53%) 0 0 / 300% 100%;
  animation: sheen 5s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { background-position: 0 0, 100% 0; } 100% { background-position: 0 0, 0% 0; } }
@keyframes sway { 0%, 100% { --pry: -7deg; --gx: -6%; } 50% { --pry: 7deg; --gx: 22%; } }
@property --pry { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --prx { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --gx { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.pk.hot .pk-body { animation: none; }
.pack-hold .pk-body { animation: none; }
@media (prefers-reduced-motion: reduce) { .pk-body, .pk-body::after { animation: none; } }
.pk-brand { position: absolute; top: 9%; font: 400 calc(var(--pw, 170px) * .068)/1 var(--sign); text-transform: uppercase; color: rgba(255, 255, 255, .9); letter-spacing: .05em; }
.pk-emblem { position: relative; display: grid; place-items: center; width: 62%; aspect-ratio: 76 / 90; margin-top: 4%; }
.pk-emblem svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(255, 255, 255, .96); filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 5px 0 rgba(0, 0, 0, .28)) drop-shadow(0 10px 12px rgba(0, 0, 0, .3)) drop-shadow(0 0 14px rgba(255, 255, 255, .5)); }
.pk-emblem b { position: relative; font: 400 calc(var(--pw, 170px) * .27)/1 var(--sign); color: var(--c3); margin-top: 8%; }
.pk-name { margin-top: 6%; font: 400 calc(var(--pw, 170px) * .12)/1 var(--sign); text-transform: uppercase; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.pk-sub { margin-top: 4%; font: 800 calc(var(--pw, 170px) * .055)/1.2 var(--ui); color: rgba(255, 255, 255, .88); }
.pk-pick { --c1: #c21cff; --c2: #ffb3f2; --c3: #48077a; }
.pk-vault { --c1: #ff9900; --c2: #fff1a6; --c3: #7a3a00; }

/* ---- the floor: slot cabinets ---- */
.floor-head, .hall-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 64px 0 22px; }
.floor-head h2, .hall-head h2, .col-title { font: 400 clamp(30px, 4vw, 44px)/1 var(--sign); text-transform: uppercase; color: #fff; text-shadow: 0 0 22px rgba(255, 43, 214, .5); }
.hall-head { margin-top: 70px; }
.hall-sub { margin: 0; color: var(--muted); }
.turbo { display: flex; align-items: center; gap: 10px; background: none; border: 0; font: 400 15px/1 var(--sign); text-transform: uppercase; }
.turbo small { font: 500 13px/1 var(--ui); text-transform: none; color: var(--muted); }
.switch { position: relative; width: 46px; height: 26px; border-radius: 99px; background: #07040f; box-shadow: inset 0 0 0 2px var(--line); transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .2s, background .2s; }
.turbo[aria-pressed="true"] .switch { background: rgba(34, 229, 255, .25); }
.turbo[aria-pressed="true"] .switch::after { transform: translateX(20px); background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.machines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.machine { --mc: var(--cyan); position: relative; display: flex; flex-direction: column; gap: 14px; padding: 0 18px 18px; border-radius: 120px 120px 22px 22px / 60px 60px 22px 22px;
  background: linear-gradient(180deg, #2a1a66, #170e3a 40%); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--mc) 55%, #fff 10%), inset 0 0 0 7px #0e0820, inset 0 0 0 9px color-mix(in srgb, var(--mc) 30%, transparent), 0 24px 40px -18px #000, 0 0 50px -20px var(--mc); }
.m-pick { --mc: var(--pink); } .m-vault { --mc: var(--gold); }
.m-sign { margin: 18px auto 0; padding: 10px 22px 8px; text-align: center; }
.m-sign span { font: 400 26px/1 var(--sign); text-transform: uppercase; color: #fff; text-shadow: 0 0 4px #fff, 0 0 14px var(--mc), 0 0 30px var(--mc); }
.m-window { display: grid; place-items: center; height: 280px; border: 0; border-radius: 16px; --pw: 158px;
  background: radial-gradient(50% 55% at 50% 45%, color-mix(in srgb, var(--mc) 35%, transparent), transparent 70%), #0a0618; box-shadow: inset 0 0 0 2px #2a1d5a, inset 0 10px 30px #000; }
.m-window .pk { transition: transform .2s; animation: float 4.5s ease-in-out infinite; }
.m-window:hover .pk { transform: scale(1.06) rotate(-2deg); }
.m-meter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #07040f; box-shadow: inset 0 0 0 2px #1d1238; }
.led { font: 800 32px/1 var(--led); color: var(--gold); text-shadow: 0 0 10px rgba(255, 194, 51, .7); }
.m-cards { text-align: right; font: 400 12px/1.35 var(--sign); text-transform: uppercase; color: #fff; }
.m-cards em { font: 600 12px/1.3 var(--ui); font-style: normal; text-transform: none; color: var(--muted); }
.paytable { width: 100%; border-collapse: collapse; font-size: 13px; }
.paytable thead th { font: 400 10px/1 var(--sign); text-transform: uppercase; color: var(--muted); text-align: right; padding: 0 4px 6px; }
.paytable thead th:first-child { text-align: left; }
.paytable tbody th { display: flex; align-items: center; gap: 7px; text-align: left; font: 400 12.5px/1 var(--sign); text-transform: uppercase; color: var(--rc); padding: 6px 4px; }
.paytable td { text-align: right; padding: 6px 4px; font-variant-numeric: tabular-nums; border-top: 1px dashed rgba(180, 167, 214, .18); }
.paytable tbody th { border-top: 1px dashed rgba(180, 167, 214, .18); }
.paytable td:last-child { color: var(--muted); font-size: 12px; white-space: nowrap; }
.pt-h td { text-align: left !important; font: 600 11.5px/1.3 var(--ui); color: var(--muted) !important; padding-top: 10px; border-top: 0 !important; }
.gem { display: inline-block; flex: none; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--rc); box-shadow: 0 0 8px var(--rc); }
.m-buy { display: flex; gap: 10px; }
.stepper { display: flex; align-items: center; border-radius: 999px; background: #07040f; box-shadow: inset 0 0 0 2px #1d1238; }
.stepper button { background: none; border: 0; width: 34px; height: 46px; font-size: 20px; color: var(--muted); }
.stepper .q { min-width: 26px; text-align: center; font: 800 18px/1 var(--led); color: var(--cyan); }
.m-buy .rip { flex: 1; padding: 14px 10px; font-size: 16px; }
.machine.broke .m-window .pk { filter: grayscale(.6) brightness(.7); }
.fine { margin: 18px 0 0; font-size: 13px; color: var(--muted); max-width: 90ch; }

/* ---- hall of fame ---- */
.hall { position: relative; display: grid; place-items: center; min-height: 460px; border-radius: 28px; overflow: hidden;
  background: radial-gradient(40% 70% at 50% 0%, rgba(255, 240, 200, .16), transparent 70%), linear-gradient(180deg, #160d33, #0e0820); box-shadow: inset 0 0 0 2px var(--line); }
.spot { display: flex; align-items: center; justify-content: center; padding: 40px 20px; font-size: 8.4px; }
.spot.one { gap: 34px; flex-wrap: wrap; }
.cap { margin: 0; font: 400 20px/1.25 var(--sign); text-transform: uppercase; color: #ffd6f6; max-width: 16ch; }
.cap span { font: 500 14px/1.4 var(--ui); text-transform: none; color: var(--muted); }
.fan-card { all: unset; cursor: pointer; margin: 0 -2.2em; transform: rotate(calc(var(--f) * 7deg)) translateY(var(--y)); transition: transform .2s; }
.fan-card:hover { transform: rotate(0) translateY(-18px) scale(1.06); z-index: 2; }
.fan-card:focus-visible { outline: 2px solid var(--cyan); }

/* ---- the trading card ---- */
.tc { --hi: color-mix(in srgb, var(--rc) 45%, #fff); --lo: color-mix(in srgb, var(--rc) 55%, #1a1030);
  position: relative; width: 22em; height: 30.8em; font-size: 10px; border-radius: 1.1em; padding: .65em; text-align: left; color: #1c1530; overflow: hidden;
  background: linear-gradient(135deg, var(--hi), var(--rc) 30%, var(--lo) 52%, var(--rc) 74%, var(--hi)); box-shadow: inset 0 0 0 .1em rgba(255, 255, 255, .6), 0 .5em 1.4em -.4em rgba(0, 0, 0, .6); }
.tc-in { position: relative; height: 100%; display: flex; flex-direction: column; gap: .38em; padding: .55em .7em .45em; border-radius: .6em; overflow: hidden;
  background: linear-gradient(165deg, color-mix(in srgb, var(--rc) 30%, #fffaf0), color-mix(in srgb, var(--rc) 12%, #f4efe6) 55%, color-mix(in srgb, var(--rc) 26%, #efe8dc)); }
.tc-head { display: flex; align-items: flex-end; gap: .45em; flex: none; min-height: 2.6em; }
.tc-head-l { flex: 1; min-width: 0; }
.tc-stage { display: inline-block; padding: .12em .5em; border-radius: .3em .9em .9em .3em; background: linear-gradient(180deg, #e9e4ef, #b9b1c6); font: 800 .72em/1.3 var(--ui); text-transform: uppercase; color: #3b3150; letter-spacing: .03em; }
.tc-name { display: block; font: 800 1.6em/1.02 var(--ui); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-name.l { font-size: 1.25em; }
.tc-name.xl { font-size: 1.05em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tc-hp { flex: none; display: flex; align-items: baseline; gap: .15em; font: 800 1.7em/1 var(--ui); color: #c0142e; }
.tc-hp small { font-size: .45em; letter-spacing: .04em; }
.tc-art { position: relative; flex: none; height: 12.4em; padding: .3em; border-radius: .25em; overflow: hidden;
  background: linear-gradient(135deg, #fff4bf, #c8962c 25%, #fff1b0 50%, #a47318 75%, #ffe69a); box-shadow: 0 .15em .4em rgba(0, 0, 0, .35); }
.tc-art img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: .1em; }
.tc-type { flex: none; margin: 0 1em; padding: .18em .6em; border-radius: .2em; text-align: center; font: italic 600 .86em/1.35 var(--ui); color: #3b3150; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(90deg, transparent, #f6f1fb 15%, #ddd5e8 50%, #f6f1fb 85%, transparent); }
.tc-bio { flex: 1; min-height: 0; overflow: hidden; font-size: .98em; line-height: 1.36; padding-top: .2em;
  -webkit-mask: linear-gradient(#000 calc(100% - 1.6em), transparent); mask: linear-gradient(#000 calc(100% - 1.6em), transparent); }
.tc-ab { display: inline-block; margin-right: .45em; padding: .05em .45em; border-radius: .25em; background: #d7263d; color: #fff; font: 800 .82em/1.4 var(--ui); font-style: italic; vertical-align: .08em; }
.tc-stats { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); border-top: .12em solid rgba(28, 21, 48, .3); padding-top: .3em; text-align: center; }
.tc-stats span { font: 800 1em/1.15 var(--ui); font-variant-numeric: tabular-nums; }
.tc-stats small { display: block; font: 600 .68em/1.2 var(--ui); text-transform: uppercase; letter-spacing: .04em; color: #5b5070; }
.tc-foot { flex: none; display: flex; justify-content: space-between; align-items: center; font: 600 .66em/1 var(--ui); color: #5b5070; }
.tc-sym { color: #1c1530; font-size: 1.3em; letter-spacing: -.05em; }
/* Holo layers, by rarity. Epic: reverse holo on the card face. Mythic: holo art. Legendary: holo art and a turning gold frame. Grail: everything, in rainbow. */
.tc::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: soft-light; opacity: 0; transition: opacity .2s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, .9), transparent 50%); }
.tc:hover::after, .hot-tilt .tc::after { opacity: .7; }
.t-b .tc-in::before, .t-tfa .tc-in::before { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .5;
  background: radial-gradient(circle, #fff 0 .06em, transparent .14em) 0 0 / .9em .9em, linear-gradient(115deg, transparent 20%, #ff9be9 35%, #9bfff2 50%, #fff79b 65%, transparent 80%) var(--mx, 30%) var(--my, 30%) / 300% 300%; }
.t-ga .tc-art::after, .t-fa .tc-art::after, .t-tfa .tc-art::after { content: ""; position: absolute; inset: .3em; pointer-events: none; mix-blend-mode: color-dodge; opacity: .28; transition: opacity .2s;
  background: repeating-linear-gradient(110deg, #ff5fd2 0 4%, #5ff6ff 8%, #fff15f 12%, #9d5fff 16%, #ff5fd2 20%) var(--mx, 0%) var(--my, 0%) / 400% 400%,
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 .05em, transparent .12em) 0 0 / .7em .7em; }
.hot-tilt .tc-art::after { opacity: .6 !important; }
.tc.t-fa, .tc.t-tfa { animation: turn 5s linear infinite; }
.tc.t-fa { background: conic-gradient(from var(--ang), #fff2b8, #ffc233, #8a5200, #ffe27a, #b07a10, #fff2b8); }
.tc.t-tfa { background: conic-gradient(from var(--ang), #ff6bd6, #ffe36b, #6bffb8, #6bc4ff, #b46bff, #ff6bd6); }
@keyframes turn { to { --ang: 360deg; } }

/* ---- the graded slab ---- */
.slab { position: relative; width: 25em; height: 38.6em; flex: none; border-radius: 1.5em;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .15s; }
.slab-well { position: absolute; left: 1.5em; top: 6.3em; width: 22em; height: 30.8em; }
.slab-well > .tc, .slab-well .front > .tc { font-size: 1em; }
.slab-case { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; transition: opacity .35s, transform .35s cubic-bezier(.2, .9, .3, 1.3);
  background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .04) 38%, rgba(255, 255, 255, .12) 55%, rgba(255, 255, 255, .03));
  box-shadow: inset 0 0 0 .18em rgba(255, 255, 255, .45), inset 0 0 0 .6em rgba(200, 220, 255, .08), inset 0 0 0 .75em rgba(255, 255, 255, .22), 0 1.4em 2.6em -1em rgba(0, 0, 0, .8); }
.slab-case::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 38%, transparent 46%); }
.slab-label { position: absolute; left: 1em; right: 1em; top: 1em; height: 4.4em; display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto; column-gap: .6em; padding: .45em .7em .35em;
  border-radius: .35em; background: linear-gradient(180deg, #ffffff, #ecebf2); box-shadow: inset 0 0 0 .22em var(--lc, #ff2bd6), 0 .1em .3em rgba(0, 0, 0, .3); color: #1c1530; }
.sl-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.sl-brand { font: 400 .78em/1 var(--sign); color: var(--lc, #ff2bd6); letter-spacing: .04em; }
.sl-title { font: 800 1.05em/1.15 var(--ui); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-sub { font: 600 .78em/1.1 var(--ui); text-transform: uppercase; color: #5b5070; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-grade { grid-row: 1 / 3; grid-column: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-left: .6em; border-left: .12em solid rgba(28, 21, 48, .15); }
.sl-grade span { font: 800 .74em/1 var(--ui); text-transform: uppercase; letter-spacing: .03em; }
.sl-grade b { font: 400 2.2em/1 var(--sign); }
.sl-code { display: flex; align-items: center; gap: .5em; font: 600 .62em/1 var(--ui); color: #5b5070; }
.sl-code i { width: 7em; height: 1.1em; background: repeating-linear-gradient(90deg, #1c1530 0 .12em, transparent .12em .25em, #1c1530 .25em .3em, transparent .3em .5em, #1c1530 .5em .7em, transparent .7em .8em); }
.slab.g10 { --lc: #d99a00; }
.slab.g10 .slab-label { background: linear-gradient(180deg, #fff9df, #ffe9a6); }
.slab.g10 .slab-case { box-shadow: inset 0 0 0 .18em rgba(255, 220, 120, .8), inset 0 0 0 .6em rgba(255, 210, 90, .12), inset 0 0 0 .75em rgba(255, 230, 150, .4), 0 0 2.4em -.4em #ffc233, 0 1.4em 2.6em -1em rgba(0, 0, 0, .8); }
.slab:not(.sealed) .slab-case { opacity: 0; transform: scale(1.12); }

/* ---- the opening stage ---- */
.stage { position: fixed; inset: 0; z-index: 30; overflow: auto; background: radial-gradient(60% 55% at 50% 45%, #2a1260, #0b0618 72%); }
.sunburst { position: fixed; inset: -60vmax; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .5s;
  background: repeating-conic-gradient(from 0deg, var(--rc, #fff) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .5) 20%, transparent 45%); mask: radial-gradient(circle, #000 0, rgba(0, 0, 0, .5) 20%, transparent 45%); animation: spin 22s linear infinite; }
.sunburst.on { opacity: calc(var(--amt, 1) * .55); }
.sunburst.rainbow { background: repeating-conic-gradient(from 0deg, #ff5ce1 0 7deg, transparent 7deg 20deg, #ffe36b 20deg 27deg, transparent 27deg 40deg, #5cf3ff 40deg 47deg, transparent 47deg 60deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.fx { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 6; }
.fx.free { z-index: 60; }
.flash { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: 0; background: radial-gradient(circle at 50% 50%, #fff, var(--rc, #fff) 30%, transparent 70%); }
.flash.go { animation: flash 1s ease-out; }
@keyframes flash { 8% { opacity: 1; } 100% { opacity: 0; } }
.slam { position: fixed; left: 0; right: 0; top: 38%; z-index: 7; pointer-events: none; text-align: center; font: 400 clamp(52px, 10vw, 140px)/1 var(--sign); text-transform: uppercase; color: #fff; opacity: 0;
  text-shadow: 0 0 20px var(--rc), 0 0 60px var(--rc), 0 .07em 0 color-mix(in srgb, var(--rc) 50%, #000); -webkit-text-stroke: 3px var(--rc); }
.slam.go { animation: slam 1.6s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes slam { 0% { opacity: 0; transform: scale(3) rotate(-8deg); } 16% { opacity: 1; transform: scale(.92) rotate(-4deg); } 24% { transform: scale(1.05) rotate(-4deg); } 72% { opacity: 1; transform: scale(1) rotate(-4deg); } 100% { opacity: 0; transform: scale(1.08) rotate(-4deg) translateY(-40px); } }
.stage-inner { position: relative; z-index: 3; min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 16px; }
.stage-inner.shake { animation: shake .5s; }
@keyframes shake { 15% { transform: translate(-10px, 5px) rotate(-.5deg); } 30% { transform: translate(9px, -6px) rotate(.5deg); } 50% { transform: translate(-6px, 4px); } 70% { transform: translate(4px, -3px); } 85% { transform: translate(-2px, 1px); } }
.stage-msg { margin: 0; font: 400 18px/1.2 var(--sign); text-transform: uppercase; text-align: center; max-width: 40ch; text-shadow: 0 0 14px rgba(255, 43, 214, .6); }
.stage-msg:empty { display: none; }
.arena { position: relative; width: 100%; display: grid; place-items: center; min-height: 460px; font-size: 11px; }
.arena.revealing { min-height: calc(38.6em + 30px); }

.pack-hold { position: relative; z-index: 2; --pw: 260px; touch-action: none; user-select: none; cursor: grab; }
.pack-hold.loading { cursor: progress; }
.pack-hold.loading .pk { animation: jitter .45s ease-in-out infinite; }
@keyframes jitter { 25% { transform: rotate(-2deg) scale(1.01); } 75% { transform: rotate(2deg) scale(1.01); } }
.pack-hold.aura .pk::before { inset: -6%; background: var(--aura); filter: blur(40px); transform: none; opacity: .75; animation: aura 1.1s ease-in-out infinite; will-change: transform, opacity; }
@keyframes aura { 50% { opacity: 1; transform: scale(1.12); } }
.xn { position: absolute; z-index: 4; right: -18px; top: -14px; padding: 6px 12px; border-radius: 12px; background: var(--gold); color: #1a0a12; font: 400 24px/1 var(--sign); transform: rotate(8deg); }
.cut { position: absolute; z-index: 3; left: 4%; right: 4%; top: 13%; height: 3px; border-top: 2px dashed rgba(255, 255, 255, .75); }
.cut i { position: absolute; left: 0; top: -3px; height: 5px; width: 0; border-radius: 3px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 24px var(--aura, #fff), 0 0 40px var(--aura, #fff); }
.cut i::after { content: ""; position: absolute; right: -6px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fff, transparent 70%); }
.hint { position: absolute; z-index: 3; top: calc(13% - 14px); left: 4%; width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 16px var(--pink); animation: hint 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes hint { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateX(200px); opacity: 0; } }
.pack-top { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.pack-hold.torn .pack-top { animation: strip .7s cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes strip { to { transform: translate(90px, -300px) rotate(32deg); opacity: 0; } }
.pack-hold.torn > .pk { animation: jolt .35s; }
@keyframes jolt { 30% { transform: translateY(8px) scale(1.02); } }
/* Light pours out of the opening, in the colour of the best card inside. */
.pack-hold.torn::before { content: ""; position: absolute; z-index: 1; left: -60%; right: -60%; bottom: 86%; height: 160%; pointer-events: none;
  background: conic-gradient(from 270deg at 50% 100%, transparent 0deg, var(--aura) 30deg, transparent 40deg, var(--aura) 60deg, transparent 75deg, #fff 90deg, transparent 105deg, var(--aura) 120deg, transparent 140deg, var(--aura) 150deg, transparent 180deg);
  -webkit-mask: radial-gradient(ellipse 50% 100% at 50% 100%, #000, transparent 80%); mask: radial-gradient(ellipse 50% 100% at 50% 100%, #000, transparent 80%); animation: pour 1.4s ease-out forwards; transform-origin: 50% 100%; }
@keyframes pour { from { opacity: 0; transform: scaleY(.2); } 25% { opacity: 1; } to { opacity: .8; transform: scaleY(1); } }
.pack-hold.gone { animation: drop .5s ease-in forwards; }
@keyframes drop { to { transform: translateY(70vh) rotate(6deg); opacity: 0; } }

.stack { position: absolute; z-index: 1; left: 50%; top: 50%; width: 25em; height: 38.6em; margin: -19.3em 0 0 -12.5em; outline: none; }
.stack.rising { animation: rise .9s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes rise { from { transform: translateY(18%) scale(.85); } to { transform: translateY(-58%) scale(.9); } }
.stack.free { z-index: 3; cursor: pointer; animation: settle .45s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes settle { from { transform: translateY(-58%) scale(.9); } to { transform: none; } }
.stack .slab { position: absolute; inset: 0; transform: translate(calc(var(--d) * 3px), calc(var(--d) * -4px)) rotate(calc(var(--d) * .8deg)); transition: transform .3s; }
.stack:focus-visible .slab:last-child .slab-well { outline: 3px solid var(--cyan); outline-offset: 4px; border-radius: 1.1em; }
.flip { position: absolute; inset: 0; transition: transform .75s cubic-bezier(.3, .7, .3, 1.15); }
.up .flip { transform: rotateY(180deg); }
.back, .front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 1.1em; }
.front { transform: rotateY(180deg); }
.back { display: grid; place-items: center; overflow: hidden; border: .6em solid #2c1d60; box-shadow: 0 .5em 1.4em -.4em rgba(0, 0, 0, .6);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg font-family='Georgia,serif' font-size='17' fill='%23ff2bd6' fill-opacity='.22' text-anchor='middle'%3E%3Ctext x='15' y='22'%3EΩ%3C/text%3E%3Ctext x='45' y='22'%3EЖ%3C/text%3E%3Ctext x='15' y='52'%3E維%3C/text%3E%3Ctext x='45' y='52'%3Eع%3C/text%3E%3C/g%3E%3C/svg%3E") center / 6em auto,
    radial-gradient(circle, rgba(34, 229, 255, .25), transparent 60%), #160d33; }
.back-tile { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: .3em; transform: rotate(-8deg); background: var(--pink); color: #fff; font: 400 4.4em/1 var(--sign); box-shadow: 0 0 .5em var(--pink); }
.slab.charging .back { animation: charge var(--dur) cubic-bezier(.5, 0, 1, 1) forwards; }
@keyframes charge {
  0% { transform: none; box-shadow: 0 0 0 var(--rc); }
  20% { transform: translate(-1px, 1px) rotate(-.5deg); }
  40% { transform: translate(2px, -1px) rotate(.8deg); box-shadow: 0 0 2em .2em var(--rc); }
  60% { transform: translate(-3px, 2px) rotate(-1.2deg); }
  80% { transform: translate(4px, -2px) rotate(1.6deg) scale(1.03); box-shadow: 0 0 4em 1em var(--rc); filter: brightness(1.5); }
  100% { transform: translate(-5px, 3px) rotate(-2deg) scale(1.06); box-shadow: 0 0 6em 2em var(--rc); filter: brightness(2.4); } }
.slab.pop .slab-well { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { 30% { transform: scale(1.08); } }
.slab.sealing .slab-case { animation: seal .5s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes seal { from { opacity: 0; transform: scale(1.25); } }
.slab.away { animation: away .3s ease-in forwards; }
@keyframes away { to { transform: translate(-40%, 55vh) scale(.25) rotate(-20deg); opacity: 0; } }

.tray { display: flex; gap: 6px; min-height: 0; max-width: 100%; overflow-x: auto; padding: 4px; font-size: 2.9px; }
.tray:empty { display: none; }
.tray-card { flex: none; animation: drop-in .35s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes drop-in { from { transform: translateY(-40px) scale(1.6); opacity: 0; } }

.haul-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; width: 100%; max-width: 1300px; font-size: 8.4px; }
.stage.many .haul-grid { font-size: 6.4px; gap: 12px; }
.stage.solo .haul-grid { font-size: 12.5px; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: deal .5s cubic-bezier(.2, .8, .3, 1.2) both; animation-delay: calc(var(--k) * 60ms); }
@keyframes deal { from { opacity: 0; transform: translateY(-60px) scale(.6); } }
.slot.sold .slab { filter: grayscale(1) brightness(.4); transition: filter .3s; }
.stage-bar { position: sticky; bottom: 12px; z-index: 4; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 10px; border-radius: 999px; background: rgba(22, 13, 51, .92); box-shadow: inset 0 0 0 2px var(--line); backdrop-filter: blur(8px); }
.haul { display: flex; flex-direction: column; align-items: flex-end; padding: 0 14px 0 18px; font: 400 10px/1 var(--sign); text-transform: uppercase; color: var(--muted); }
.haul b { font: 800 24px/1.05 var(--led); color: var(--gold); text-shadow: 0 0 8px rgba(255, 194, 51, .6); font-weight: 800; }

/* ---- collection ---- */
.col-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 16px 0 18px; }
.col-stats { margin: 8px 0 0; color: var(--muted); }
.col-actions { display: flex; gap: 10px; }
.sort { background: var(--panel); border: 2px solid var(--line); border-radius: 999px; padding: 0 14px; height: 44px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: var(--panel); border: 2px solid var(--line); font: 400 13px/1 var(--sign); text-transform: uppercase; }
.chip b { font-weight: 400; color: var(--muted); }
.chip[aria-pressed="true"] { border-color: var(--pink); box-shadow: 0 0 14px -4px var(--pink); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, 25em); justify-content: center; gap: 26px 18px; font-size: 8.6px; }
.mini { all: unset; cursor: pointer; position: relative; border-radius: 1.5em; }
.mini:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.dupe { position: absolute; z-index: 2; right: -6px; top: -8px; padding: 3px 9px; border-radius: 99px; background: var(--pink); color: #fff; font: 400 14px/1 var(--sign); box-shadow: 0 0 12px var(--pink); }
.empty { text-align: center; padding: 60px 0; color: var(--muted); }
.empty p { font-size: 18px; }

.detail { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px; overflow: auto; background: rgba(8, 4, 20, .85); backdrop-filter: blur(6px); }
.detail-inner { display: flex; gap: 30px; align-items: flex-end; flex-wrap: wrap; justify-content: center; }
.detail-card { font-size: 13.5px; }
.detail-side { display: flex; flex-direction: column; gap: 10px; min-width: 220px; }
.detail-side p { margin: 0 0 4px; color: var(--muted); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 70; pointer-events: none; transform: translateX(-50%); padding: 12px 20px; border-radius: 999px; background: var(--gold); color: #1a0a12; font: 400 15px/1.2 var(--sign); text-transform: uppercase; box-shadow: 0 0 30px -4px var(--gold); max-width: calc(100vw - 32px); text-align: center; }

@media (max-width: 1080px) {
  .ticker { display: none; }
  .machines { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .nav { flex-wrap: wrap; gap: 10px; }
  .logo-word { display: none; }
  .tabs { order: 3; width: 100%; }
  .nav-right { margin-left: auto; }
  .refill { display: none; }
  .claim { padding: 6px 12px 6px 6px; font-size: 11px; }
  .claim-x { display: none; }
  .marquee { padding: 46px 18px 170px; border-radius: 24px; }
  .mp { --pw: 110px; }
  .marquee-packs { bottom: -36px; }
  .nav { row-gap: 6px; }
  .machine { padding: 0 12px 14px; }
  .m-window { height: 230px; --pw: 130px; }
  .arena { font-size: 9px; min-height: 400px; }
  .pack-hold { --pw: 210px; }
  .haul-grid { font-size: 6.6px; gap: 10px; }
  .stage.many .haul-grid { font-size: 5.4px; gap: 8px; }
  .stage.solo .haul-grid { font-size: 10px; }
  .grid { font-size: 6.6px; gap: 16px 10px; }
  .spot { font-size: 6px; }
  .spot.one { font-size: 7.4px; }
  .detail-card { font-size: 10.5px; }
  .stage-bar { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- rip + reveal v3: pack glow, dealt row, rarity tells, light behind rare pulls ---- */
/* Every pack leaks a little light in its best card's colour; B and up blaze (see .aura). */
.pack-hold.glow .pk::before { inset: 4%; background: var(--aura); filter: blur(30px); transform: none; opacity: .45; animation: glowp 2.2s ease-in-out infinite; will-change: transform, opacity; }
@keyframes glowp { 50% { opacity: .7; transform: scale(1.08); } }
.pack-hold::after { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--aura, #fff) 40%, transparent) 0 4deg, transparent 4deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 8%, transparent 62%); mask: radial-gradient(circle, #000 8%, transparent 62%); opacity: .35; animation: spin 30s linear infinite; }
.pack-hold.torn::before { left: -120%; right: -120%; height: 260%; animation: pour 1.2s ease-out forwards, spinr 6s linear infinite; }
@keyframes spinr { to { rotate: 8deg; } }
.pack-hold.torn .pack-top { animation: strip .75s cubic-bezier(.25, .7, .35, 1) forwards; }
@keyframes strip { 20% { transform: translate(20px, -40px) rotate(8deg); } to { transform: translate(260px, -420px) rotate(70deg); opacity: 0; } }
.pack-hold.gone { animation: drop .6s cubic-bezier(.5, 0, .9, .5) forwards; }
@keyframes drop { 15% { transform: translateY(-14px) scale(1.03); } to { transform: translateY(80vh) rotate(8deg) scale(.9); opacity: 0; } }

/* The dealt row. Each slot flies from the pack opening (--fx/--fy) to its place. */
.haul-grid .flip-btn { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 1.5em; }
.haul-grid .slab-well { perspective: 1400px; }
.haul-grid.dealing .slot { animation: none; }
.haul-grid.dealing.go .slot { animation: fly .62s cubic-bezier(.2, .85, .25, 1.12) both; animation-delay: calc(var(--k) * var(--step, 110ms)); }
@keyframes fly { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)) scale(.35) rotate(var(--fr)); } 18% { opacity: 1; } 100% { transform: none; } }
.haul-grid.dealing .slot { pointer-events: none; }
.haul-grid.go:not(.dealing) .slot { animation: none; }
.haul-grid .slot { position: relative; }
.pack-hold > .pk { z-index: 2; }
.slot.down .flip-btn { transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), filter .25s; }
.slot.down:hover .flip-btn, .slot.down .flip-btn:focus-visible { transform: translateY(-14px) rotate(-1.5deg) scale(1.03); filter: brightness(1.15); outline: none; }
.slot.down .back { transition: box-shadow .3s; }
/* Rarity tells on the backs, Hearthstone-style: rare and up glow, mythic and up throw light. */
.slot.down.tell .back { box-shadow: 0 0 0 .25em var(--rc), 0 0 2.2em .2em var(--rc), inset 0 0 2em color-mix(in srgb, var(--rc) 50%, transparent); animation: tellp 1.4s ease-in-out infinite; }
@keyframes tellp { 50% { box-shadow: 0 0 0 .3em var(--rc), 0 0 3.6em .8em var(--rc), inset 0 0 3em color-mix(in srgb, var(--rc) 70%, transparent); } }
.slot.down.tell:hover .back { box-shadow: 0 0 0 .35em var(--rc), 0 0 5em 1.4em var(--rc), inset 0 0 3.4em var(--rc); }
.slot.tell-hi::before, .slot.lit::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 42%; width: 260%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--rc) 0 5deg, transparent 5deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 6%, transparent 60%); mask: radial-gradient(circle, #000 6%, transparent 60%); opacity: .35; animation: spin 14s linear infinite; }
.slot.lit::before { width: 340%; opacity: .7; animation: spin 9s linear infinite, litin .6s ease-out; }
@keyframes litin { from { opacity: 0; scale: .3; } }
.slot.up .slab-well::after { content: ""; position: absolute; inset: -.4em; border-radius: 1.4em; pointer-events: none; box-shadow: 0 0 0 .2em var(--rc), 0 0 3em .4em var(--rc); opacity: 0; animation: rim 1.2s ease-out; }
.slot.lit .slab-well::after { animation: rim 1.2s ease-out forwards; }
@keyframes rim { 15% { opacity: 1; } to { opacity: 0; } }
.slot.lit .slab-well::after { animation-name: rimstay; }
@keyframes rimstay { 15% { opacity: 1; } to { opacity: .55; } }
/* The flip itself overshoots and lands with a little bounce. */
.haul-grid .flip { transition: transform .7s cubic-bezier(.3, 1.35, .45, 1); transform-style: preserve-3d; }
.slot.up .flip-btn { cursor: default; animation: land .7s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes land { 0% { transform: scale(1.12) translateY(-18px); } 100% { transform: none; } }
.slot .sell1 { margin-top: 10px; animation: deal .35s cubic-bezier(.2, .8, .3, 1.2) both; }
.slot .sell1[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .haul-grid.go .slot, .slot.down.tell .back, .slot::before, .pack-hold::after { animation: none !important; } }

/* Real 3D packs (pack3d.js): the canvas floats over the HTML pack, which stays for layout and fallback. */
.pk3 { position: absolute; z-index: 1; left: -20%; top: -14%; width: 140%; height: 128%; pointer-events: none; }
.pk.has3d .pk-body { opacity: 0; }
.pk.has3d::before { inset: 10% 8% -2%; }

/* ---- hero banner: copy on the left, the vault pack over two graded slabs on the right ---- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; min-height: 440px; border-radius: 28px; overflow: hidden;
  background: #120a2a; box-shadow: inset 0 0 0 2px var(--line), 0 30px 60px -30px #000; isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: url("img/hero-library.jpg") 50% 40% / cover; filter: saturate(1.1) brightness(.85); }
.hero-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(18, 10, 42, .92) 0%, rgba(18, 10, 42, .7) 35%, rgba(18, 10, 42, .15) 65%, rgba(18, 10, 42, .35)),
              radial-gradient(50% 70% at 75% 50%, rgba(255, 194, 51, .28), transparent 70%),
              linear-gradient(0deg, rgba(18, 10, 42, .55), transparent 40%); }
.hero-copy { padding: 56px 0 56px clamp(24px, 6vw, 84px); max-width: 620px; }
.hero-kicker { margin: 0 0 12px; font: 400 14px/1 var(--sign); text-transform: uppercase; letter-spacing: .06em; color: var(--gold); text-shadow: 0 0 14px rgba(255, 194, 51, .5); }
.hero-title { margin: 0; font: 400 clamp(38px, 5.2vw, 72px)/1.02 var(--sign); letter-spacing: 0; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .5); text-wrap: balance; }
.hero-sub { margin: 16px 0 26px; max-width: 44ch; font-size: clamp(16px, 1.6vw, 20px); color: #efe8ff; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.hero .cta { justify-content: flex-start; margin-top: 30px; }
.hero-btn { height: 52px; padding: 0 28px; border-radius: 999px; background: #f2eefc; color: #160d33; font: 800 18px/1 var(--ui); text-transform: none; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6); }
.hero-btn:hover { background: #fff; transform: translateY(-1px); }
.hero-art { position: relative; height: 100%; min-height: 440px; }
.hero-pack { position: absolute; left: 48%; top: 50%; z-index: 3; --pw: 215px; translate: -50% -48%; rotate: -3deg; }
.hero-pack .pk { animation: float 5s ease-in-out infinite; }
.hero-slab { position: absolute; top: 50%; left: 48%; z-index: 1; font-size: 8.2px; opacity: 0; transition: opacity .6s, transform .8s cubic-bezier(.2, .9, .3, 1.15); }
.hero-slab.in { opacity: 1; }
.hs-l { transform: translate(-112%, -50%) rotate(-11deg) scale(.9); }
.hs-r { transform: translate(12%, -48%) rotate(10deg) scale(.9); }
.hero-slab.in.hs-l { transform: translate(-128%, -50%) rotate(-12deg); }
.hero-slab.in.hs-r { transform: translate(28%, -48%) rotate(11deg); }
.hero-slab .slab { box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8); }
.hero-credit { position: absolute; left: clamp(24px, 6vw, 84px); bottom: 12px; z-index: 4; font-size: 11px; color: rgba(255, 255, 255, .55); text-decoration: none; }
.hero-credit:hover { color: #fff; }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 36px 22px 0; }
  .hero-art { min-height: 340px; margin-bottom: 26px; }
  .hero-pack { left: 50%; --pw: 150px; }
  .hero-slab { left: 50%; font-size: 6.4px; }
  .hero-credit { left: 22px; right: 22px; bottom: 10px; font-size: 10px; }
}

/* Keep the big spinning light layers on the compositor. */
.sunburst, .pack-hold::after, .slot.tell-hi::before, .slot.lit::before, .pack-hold.torn::before { will-change: transform; }
.stage .stage-bar { backdrop-filter: none; background: rgba(22, 13, 51, .97); }


/* Rumble before the tear: the seams leak light and the glow swells. */
.pack-hold.rumbling .pk::before { opacity: calc(.5 + var(--rum, 0) * .5); transform: scale(calc(1 + var(--rum, 0) * .18)); animation: none; }
.pack-hold.rumbling::after { opacity: calc(.35 + var(--rum, 0) * .5); }
.pack-hold.rumbling > .pk { filter: none; }
.pack-hold.rumbling .pk3 { filter: brightness(calc(1 + var(--rum, 0) * .35)); }

/* Nav lines up with the page content; the ticker is a short strip, not the whole middle. */
.nav .ticker { flex: 0 1 340px; margin-left: auto; }
.nav .nav-right { margin-left: 0; }

.disclaimer { max-width: 1240px; margin: 0 auto; padding: 28px 16px 48px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.disclaimer p { margin: 0 0 8px; max-width: 95ch; }