*{box-sizing:border-box}
:root{
 --paper:#0b0d14; --panel:#141827; --panel2:#1b2033; --line:#2a3148;
 --text:#e8ecf7; --dim:#8e97b0; --accentsite:#6f5ae0; --good:#1fd1a3;
 --deep:#080a11; --shade:#232a40; --ink:#cdd5ea;
 --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
 --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--text);font-family:var(--sans);
 line-height:1.55;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
 background:radial-gradient(1200px 600px at 70% -10%,rgba(111,90,224,.22),transparent 60%),
 radial-gradient(900px 500px at 10% 110%,rgba(31,209,163,.10),transparent 60%)}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px;position:relative;z-index:1}
a{color:inherit}
h1,h2,h3{line-height:1.15;margin:0 0 .4em;letter-spacing:-.02em}
h1{font-size:clamp(2rem,5.4vw,3.4rem);font-weight:800}
h2{font-size:clamp(1.3rem,3vw,1.9rem);font-weight:700}
.lede{color:var(--dim);font-size:1.08rem;max-width:62ch}

/* nav */
header.site{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);
 background:rgba(11,13,20,.82);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:18px;min-height:60px}
.brand{font-weight:800;letter-spacing:-.03em;font-size:1.25rem;text-decoration:none;
 display:flex;align-items:center;gap:9px}
.brand .dot{width:11px;height:11px;border-radius:3px;background:var(--accentsite);
 box-shadow:0 0 14px var(--accentsite)}
nav.main{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
nav.main a{text-decoration:none;color:var(--dim);font-size:.9rem;font-weight:600;
 padding:7px 11px;border-radius:8px}
nav.main a:hover{color:var(--text);background:var(--panel)}
nav.main a[aria-current]{color:var(--text);background:var(--panel2)}

/* buttons */
.btn{appearance:none;border:1px solid var(--line);background:var(--panel2);
 color:var(--text);font:inherit;font-weight:700;padding:13px 22px;border-radius:11px;
 cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:9px}
.btn:hover{border-color:#3b4466}
.btn.primary{background:linear-gradient(180deg,#7d68ec,#5a44cc);border-color:#8d7bf0;
 box-shadow:0 10px 30px -10px rgba(111,90,224,.8)}
.btn.primary:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent}
.tiny{font-size:.82rem;color:var(--dim)}

/* hero + ripper */
.hero{padding:54px 0 10px}
.hero .row{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero .row.opened{grid-template-columns:1fr;gap:18px}
.hero .row.opened .stage{min-height:auto;padding:8px 0}
@media(max-width:880px){.hero .row{grid-template-columns:1fr;gap:26px}}
.counters{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.counter{background:var(--panel);border:1px solid var(--line);border-radius:11px;
 padding:9px 14px;min-width:92px}
.counter b{display:block;font-size:1.3rem;font-variant-numeric:tabular-nums}
.counter span{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}

.stage{position:relative;min-height:430px;display:flex;align-items:center;
 justify-content:center}
.pack{width:230px;aspect-ratio:5/7;border-radius:16px;cursor:pointer;position:relative;
 background:linear-gradient(155deg,#2b2158,#141827 48%,#1d2a46);
 border:1px solid #3a2f74;box-shadow:0 30px 60px -20px #000,inset 0 1px 0 #ffffff1a;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:10px;transition:transform .25s,box-shadow .25s;overflow:hidden}
.pack:hover{transform:translateY(-6px) rotate(-1deg)}
.pack::after{content:"";position:absolute;inset:0;
 background:repeating-linear-gradient(115deg,transparent 0 22px,#ffffff08 22px 24px)}
.pack .plogo{font-weight:900;font-size:2.4rem;letter-spacing:-.05em;
 text-shadow:0 0 26px rgba(111,90,224,.9)}
.pack .pset{font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:#b9aef6}
.pack .ptear{position:absolute;top:0;left:0;right:0;height:26px;
 background:#ffffff0f;border-bottom:2px dashed #ffffff33;font-size:.6rem;
 display:flex;align-items:center;justify-content:center;letter-spacing:.2em;
 text-transform:uppercase;color:#cfc6ff}
.pack.gone{animation:tear .45s ease forwards}
@keyframes tear{to{transform:scale(.82) translateY(-24px);opacity:0}}

.fan{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;width:100%}
.slot{width:170px;aspect-ratio:5/7;perspective:1100px;cursor:pointer}
.slot .inner{position:relative;width:100%;height:100%;transition:transform .55s
 cubic-bezier(.2,.9,.25,1);transform-style:preserve-3d}
.slot.flipped .inner{transform:rotateY(180deg)}
.slot .back,.slot .front{position:absolute;inset:0;backface-visibility:hidden;
 border-radius:13px;overflow:hidden}
.slot .back{background:linear-gradient(150deg,#241c4c,#121524);border:1px solid #3a2f74;
 display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.6rem;
 color:#8d7bf0;text-shadow:0 0 18px #6f5ae0}
.slot .front{transform:rotateY(180deg)}
.slot .front .card{width:100%;height:100%}
.slot.pop{animation:pop .5s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}

/* card */

/* risograph inks — one shared defs block recolours per card */
.tone-violet{--t-dark:#3a2a6b;--t-mid:#6d55c7;--t-light:#b3a2f5}
.tone-teal{--t-dark:#0f4446;--t-mid:#2a9d9b;--t-light:#86e6dc}
.tone-amber{--t-dark:#6b3f10;--t-mid:#c88a2a;--t-light:#f5d490}
.tone-rose{--t-dark:#6b1f3a;--t-mid:#c4517a;--t-light:#f5a6c0}
.tone-slate{--t-dark:#262f4a;--t-mid:#5a6a92;--t-light:#aebddc}
.tone-moss{--t-dark:#24421d;--t-mid:#5e9145;--t-light:#b2dc96}
.tone-ember{--t-dark:#6b2418;--t-mid:#c2502f;--t-light:#f5a386}
.tone-ice{--t-dark:#1b3a57;--t-mid:#4a86b8;--t-light:#a8d4f5}
.card{--accent:var(--accentsite);--glow:#a08cff;display:block;text-decoration:none;
 color:inherit;container-type:inline-size}
.card[data-tier=floor]{--accent:#8a93a6;--glow:#aab2c4}
.card[data-tier=bid]{--accent:#4ba3c7;--glow:#7fd1ec}
.card[data-tier=alpha]{--accent:#6f5ae0;--glow:#a08cff}
.card[data-tier=holo]{--accent:#d9a227;--glow:#ffd977}
.card[data-tier=giga]{--accent:#e05a5a;--glow:#ff9d9d}
.card[data-tier=ghost]{--accent:#1fd1a3;--glow:#7bffd9}
.card .frame{height:100%;background:linear-gradient(170deg,var(--panel2),var(--panel));
 border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:13px;
 padding:8px;display:flex;flex-direction:column;gap:4px;overflow:hidden;
 box-shadow:0 14px 34px -16px #000,inset 0 0 0 1px #ffffff08}
.card .chead{display:flex;align-items:center;gap:7px;font-size:.6rem;flex:0 0 auto;
 text-transform:uppercase;letter-spacing:.14em;color:var(--dim)}
.card .pip{background:var(--accent);color:#07080d;font-weight:900;border-radius:4px;
 padding:1px 6px;letter-spacing:.04em}
.card .tname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .window{position:relative;border-radius:9px;overflow:hidden;flex:0 0 auto;
 background:var(--deep);aspect-ratio:1.4/1}
.card .window .art{display:block;width:100%;height:100%;object-fit:cover}
.card .shine{position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(115deg,transparent 38%,#ffffff22 48%,transparent 58%)}
.card .plate{flex:0 0 auto}
.card .plate h3{margin:0;font-size:.92rem;letter-spacing:-.02em;line-height:1.15;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .sub{margin:1px 0 0;font-size:.64rem;color:var(--dim);display:flex;gap:5px;
 flex-wrap:wrap;align-items:baseline;line-height:1.3}
.card .handle{font-family:var(--mono);color:var(--accent);font-size:.6rem}
.card .sub{flex-wrap:nowrap;overflow:hidden}
.card .role{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.card .handle{flex:0 0 auto}
.card .handle.fic{color:var(--dim);opacity:.7}

/* Compact stat strip. Bars are a big-card luxury. */
.card .stats{display:flex;flex-wrap:wrap;gap:2px 7px;margin-top:auto;flex:0 0 auto;
 font-family:var(--mono);font-size:.55rem;padding-top:2px}
.card .stat{display:flex;gap:3px;align-items:baseline}
.card .sbar{display:none}
.card .sk{color:var(--dim);font-size:0}
.card .sk::after{content:attr(data-ab);font-size:.55rem;letter-spacing:.04em}
.card .sv{color:var(--accent);font-weight:700}
.card .flavor{margin:0;font-size:.62rem;font-style:italic;color:#b7c0d8;flex:0 0 auto;
 border-left:2px solid var(--accent);padding-left:7px;line-height:1.3;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .cfoot{display:flex;justify-content:space-between;font-size:.54rem;flex:0 0 auto;
 color:var(--dim);font-family:var(--mono);letter-spacing:.06em}

/* Too narrow to carry both: the joke wins, the numbers go. */
@container (max-width:229px){.card .stats{display:none}}

.card.foil .frame{border-color:var(--accent)}
.card.foil .window::after{content:"";position:absolute;inset:0;mix-blend-mode:overlay;
 background:linear-gradient(60deg,#ff5f9e,#ffd977,#7bffd9,#7fd1ec,#a08cff,#ff5f9e);
 background-size:280% 280%;opacity:.55;animation:foil 5s linear infinite}
@keyframes foil{0%{background-position:0% 50%}100%{background-position:280% 50%}}

.card.big .frame{padding:14px;border-radius:18px;gap:11px}
.card.big .window{aspect-ratio:1/1}
.card.big .plate h3{font-size:1.5rem;white-space:normal}
.card.big .sub{font-size:.84rem;flex-wrap:wrap}
.card.big .role{white-space:normal;overflow:visible}
.card.big .handle{font-size:.8rem}
.card.big .flavor{font-size:.9rem;-webkit-line-clamp:unset;padding-left:11px}
.card.big .stats{display:flex;flex-direction:column;gap:6px;font-family:var(--sans);
 font-size:.74rem}
.card.big .stat{display:grid;grid-template-columns:76px 1fr 26px;gap:9px;
 align-items:center}
.card.big .sk{font-size:.74rem;color:var(--dim);text-transform:uppercase;
 letter-spacing:.05em}
.card.big .sk::after{content:""}
.card.big .sbar{display:block;height:7px;background:#ffffff14;border-radius:4px;
 overflow:hidden}
.card.big .sbar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.card.big .sv{font-family:var(--mono);text-align:right;color:var(--dim)}
.card.big .cfoot{font-size:.66rem}

/* grids */
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.cell{position:relative;text-decoration:none;color:inherit;display:block}
.cell:hover .frame{border-color:var(--accent);transform:translateY(-3px)}
.cell .frame{transition:transform .15s,border-color .15s}
.cell.missing{opacity:.3;filter:grayscale(1)}
.cell .count{position:absolute;top:-6px;right:-6px;background:var(--accentsite);
 color:#fff;font-size:.7rem;font-weight:800;border-radius:999px;padding:2px 8px;
 border:2px solid var(--paper);font-variant-numeric:tabular-nums}
.cell .fcount{position:absolute;top:-6px;left:-6px;background:#d9a227;color:#1a1200;
 font-size:.66rem;font-weight:900;border-radius:999px;padding:2px 7px;
 border:2px solid var(--paper)}

/* panels, tables */
section{padding:40px 0}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.cols{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--dim)}
td.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;
 padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--panel2)}
.chip i{width:8px;height:8px;border-radius:2px;display:block}
.bar{height:9px;background:#ffffff12;border-radius:5px;overflow:hidden;margin:8px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#6f5ae0,#1fd1a3)}
.notice{border:1px solid #3a2f74;background:#171333;border-radius:12px;padding:14px 16px;
 font-size:.9rem;color:#cfc6ff}
.pulls{display:flex;flex-direction:column;gap:7px;max-height:300px;overflow:auto;
 font-family:var(--mono);font-size:.78rem}
.pulls div{display:flex;gap:10px;justify-content:space-between;
 border-bottom:1px solid var(--line);padding-bottom:5px;color:var(--dim)}
.prose{max-width:68ch}
.prose p,.prose li{color:#c3cbdf}
.prose h2{margin-top:1.6em}
footer.site{border-top:1px solid var(--line);margin-top:50px;padding:28px 0 46px;
 color:var(--dim);font-size:.86rem}
footer.site a{color:var(--dim)}
.banner{text-align:center;padding:10px 0 0;font-weight:800;letter-spacing:-.01em;
 min-height:30px}
dialog{border:1px solid var(--line);background:var(--panel);color:var(--text);
 border-radius:16px;padding:24px;max-width:430px;box-shadow:0 40px 80px -20px #000}
dialog::backdrop{background:#050710cc;backdrop-filter:blur(3px)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}