:root{--disp:"Bricolage Grotesque","Inter",sans-serif}
body{font-family:Inter,"Helvetica Neue",Arial,sans-serif;background:#08090a}
h1,h2,.p3-name,.c-n,.btn-rip{font-family:var(--disp)}
h2{font-size:clamp(34px,5vw,64px);font-weight:800;letter-spacing:-.035em;line-height:1;margin-bottom:12px;display:flex;align-items:baseline;gap:16px}
h2 small{font:700 14px "JetBrains Mono",monospace;color:var(--mint);letter-spacing:.1em;border:1px solid rgba(134,239,172,.4);border-radius:999px;padding:4px 10px;transform:translateY(-10px)}
section{border-bottom:0;padding:80px 0}
.top{position:sticky;top:0;z-index:30;background:rgba(8,9,10,.82);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);max-width:none;padding:14px max(20px,calc(50vw - 570px))}
/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}.rv.in{opacity:1;transform:none}
/* HERO */
.hero3{position:relative;min-height:min(900px,calc(100vh - 40px));display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:20px;padding:40px 0 60px;isolation:isolate}
.hero3::before{content:"";position:absolute;left:50%;transform:translateX(-50%);top:0;bottom:0;width:100vw;z-index:-2;
 background:linear-gradient(180deg,#0c0f0d 0,#08090a 70%),#08090a}
.spot{position:absolute;right:-5%;top:-40px;width:70%;height:115%;z-index:-1;pointer-events:none;
 background:conic-gradient(from 180deg at 50% 0%,transparent 160deg,rgba(220,255,232,.07) 172deg,rgba(220,255,232,.11) 180deg,rgba(220,255,232,.07) 188deg,transparent 200deg)}
#fx{position:absolute;left:50%;transform:translateX(-50%);top:0;width:100vw;height:100%;pointer-events:none;z-index:5}
.h3-copy{position:relative;z-index:3}
.kicker{display:flex;align-items:center;gap:10px}.dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(134,239,172,.15)}
h1{font-size:clamp(46px,7.4vw,112px);font-weight:800;letter-spacing:-.045em;line-height:.9;margin:0 0 24px}
h1 .l1,h1 .l2{display:block}h1 .l2{background:linear-gradient(100deg,#d8ffe6 0,#86efac 35%,#3fd17a 60%,#b7f7cf 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{font-size:18.5px;color:#c4c9c3;max-width:46ch}
.h3-cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 18px}
.btn-rip{font-size:19px;font-weight:800;color:#052012;border:0;border-radius:14px;padding:16px 24px;cursor:pointer;background:linear-gradient(180deg,#b9f8d0,#86efac 45%,#4fcf80);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),inset 0 -3px 0 rgba(0,0,0,.18),0 10px 24px -8px rgba(0,0,0,.8);transition:transform .15s}
.btn-rip:hover{transform:translateY(-2px)}.btn-rip:active{transform:translateY(1px)}
.btn-ghost{display:inline-flex;align-items:center;font-weight:700;color:var(--ink);text-decoration:none;border:1px solid #2a2d33;border-radius:14px;padding:15px 20px;background:rgba(255,255,255,.03)}
.btn-again{position:absolute;bottom:4px;right:10px;font:700 12px "JetBrains Mono",monospace;color:var(--mint);background:rgba(134,239,172,.08);border:1px solid rgba(134,239,172,.35);border-radius:10px;padding:8px 12px;cursor:pointer;z-index:6}
/* arena */
.arena{position:relative;height:min(760px,90vw);display:grid;place-items:center;perspective:1400px;z-index:2}
.shadow3{position:absolute;bottom:9%;width:46%;height:46px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.9),transparent);z-index:0;transition:opacity .5s}
.hint{bottom:0;left:0;right:0;text-align:center;font:600 13px "JetBrains Mono",monospace;letter-spacing:.04em;color:#8e948d}
/* 3D pack: real thickness via side faces */
.pack3{--w:300px;--h:440px;--d:16px;width:var(--w);height:var(--h);position:relative;transform-style:preserve-3d;cursor:pointer;z-index:2;
 transform:translateY(var(--fy,0px)) rotateX(var(--rx,4deg)) rotateY(var(--ry,-18deg)) rotateZ(var(--rz,0deg));transition:transform .18s ease-out;animation:bob 6s ease-in-out infinite}
@keyframes bob{50%{--fy:-12px}}@property --fy{syntax:"<length>";inherits:false;initial-value:0px}
.p3{position:absolute;border-radius:16px;backface-visibility:hidden}
.p3.front,.p3.back{inset:0;overflow:hidden}
.p3.front{transform:translateZ(calc(var(--d)/2));background:
 linear-gradient(180deg,rgba(255,255,255,.14),transparent 30%,transparent 70%,rgba(0,0,0,.35)),
 linear-gradient(160deg,#27794a 0,#11502c 38%,#0a2d18 75%,#06180c 100%);
 box-shadow:inset 0 0 0 1.5px rgba(160,245,190,.5),inset 0 2px 0 rgba(255,255,255,.4)}
.p3.back{transform:rotateY(180deg) translateZ(calc(var(--d)/2));background:linear-gradient(160deg,#16452a,#071a0e);display:grid;place-items:end center;box-shadow:inset 0 0 0 1.5px rgba(160,245,190,.4)}
.p3-back-t{font:700 11px "JetBrains Mono",monospace;letter-spacing:.14em;color:#a7d9b8;padding:30px}
.p3.side{top:10px;bottom:10px;width:var(--d);background:linear-gradient(90deg,#0b3a20,#1f6b40,#0b3a20);border-radius:4px}
.p3.side.l{left:calc(var(--d)/-2);transform:rotateY(-90deg)}.p3.side.r{right:calc(var(--d)/-2);transform:rotateY(90deg)}
/* foil: pointer-driven spectral bands, color-dodge over the green base */
.foil{position:absolute;inset:0;mix-blend-mode:color-dodge;opacity:.55;pointer-events:none;
 background:repeating-linear-gradient(115deg,#0e3b24 0%,#3dd68c 4%,#a5f3fc 7%,#fde68a 10%,#f0abfc 13%,#86efac 16%,#0e3b24 22%);
 background-size:300% 300%;background-position:var(--bx,50%) var(--by,50%);filter:saturate(.9) contrast(1.1)}
.foil::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.glare{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;background:radial-gradient(farthest-corner circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.75) 0%,rgba(255,255,255,.15) 25%,rgba(0,0,0,.35) 90%);opacity:.8}
.crimp3{position:absolute;left:0;right:0;top:0;height:34px;z-index:3;background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 3px,rgba(0,0,0,.25) 3px 8px),linear-gradient(#3a9a62,#145233);border-bottom:1.5px dashed rgba(200,255,220,.7)}
.crimp3.bot{top:auto;bottom:0;border-bottom:0;border-top:1px solid rgba(0,0,0,.4)}
.tear{position:absolute;left:0;right:0;top:0;height:34px;z-index:4;transform-origin:100% 100%;transition:transform .55s cubic-bezier(.5,0,.7,.4),opacity .55s}
.p3-art{position:absolute;inset:34px 0;display:grid;place-items:center;align-content:center;text-align:center;z-index:2}
.p3-ring{position:absolute;width:230px;height:230px;border-radius:50%;border:1.5px solid rgba(200,255,220,.25);top:50%;left:50%;transform:translate(-50%,-62%)}
.p3-ring::after{content:"";position:absolute;inset:18px;border-radius:50%;border:1px dashed rgba(200,255,220,.22)}
.p3-mark{width:150px;height:150px;filter:drop-shadow(0 14px 18px rgba(0,0,0,.6));margin-bottom:6px}
.p3-name{font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:.9;color:#effff4;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.p3-sub{font:700 13px "JetBrains Mono",monospace;letter-spacing:.5em;color:var(--mint);margin:8px 0 0 .5em}
.p3-no{font:700 12px "JetBrains Mono",monospace;letter-spacing:.14em;color:#cdeedb;margin-top:22px;padding:6px 10px;border:1px solid rgba(200,255,220,.35);border-radius:8px}
.pack3.ripping{animation:shake .38s linear}
@keyframes shake{20%{translate:-3px 1px}40%{translate:3px -1px}60%{translate:-2px 0}80%{translate:2px 1px}}
.pack3.ripped .tear{transform:translate(90px,-120px) rotate(32deg);opacity:0}
.pack3.gone{transform:translateY(260px) rotateX(55deg) scale(.85);opacity:0;transition:transform .7s cubic-bezier(.6,0,.8,.4),opacity .6s .1s;animation:none;pointer-events:none}
/* fan */
.fan{position:absolute;inset:0;pointer-events:none;z-index:4}.fan.on{pointer-events:auto}
.fan .card{position:absolute;left:50%;top:50%;width:min(200px,30vw);margin-left:calc(min(200px,30vw)/-2);margin-top:calc(min(200px,30vw)*-.7);
 transform:translate(var(--tx,0),var(--ty,120px)) rotate(var(--tr,0deg)) scale(var(--ts,.6));opacity:0;transition:transform .8s cubic-bezier(.2,.9,.25,1.05),opacity .35s}
.fan .card.out{opacity:1}.fan .card.focus{z-index:10}
/* HOLO CARDS */
.card .f{isolation:isolate}
.card .holo,.card .gl{position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:3}
.card .gl{mix-blend-mode:overlay;background:radial-gradient(farthest-corner circle at var(--gx,50%) var(--gy,20%),rgba(255,255,255,.7) 0,rgba(255,255,255,.12) 28%,rgba(0,0,0,.3) 95%);opacity:.55;transition:opacity .3s}
.card .holo{opacity:0;transition:opacity .3s}
.t-uncommon .holo{opacity:.35;mix-blend-mode:color-dodge;background:linear-gradient(115deg,transparent 30%,rgba(134,239,172,.6) 45%,rgba(165,243,252,.5) 52%,transparent 66%);background-size:250% 250%;background-position:var(--bx,50%) var(--by,50%)}
.t-rare .holo{opacity:.6;mix-blend-mode:color-dodge;background:repeating-linear-gradient(110deg,#0b1a33 0%,#60a5fa 5%,#a5f3fc 8%,#c4b5fd 11%,#86efac 14%,#0b1a33 20%);background-size:400% 400%;background-position:var(--bx,50%) var(--by,50%)}
.t-rare .holo::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 4px);mix-blend-mode:multiply}
.t-epic .holo{opacity:.75;mix-blend-mode:color-dodge;background:
 radial-gradient(circle at 20% 30%,#fff 0 1px,transparent 1.6px) 0 0/23px 29px,radial-gradient(circle at 70% 60%,#fff 0 1px,transparent 1.5px) 0 0/31px 37px,
 repeating-conic-gradient(from 0deg at var(--bx,50%) var(--by,50%),#3b2a05 0deg,#fbbf24 14deg,#fff1bf 20deg,#f59e0b 28deg,#3b2a05 40deg)}
.t-epic .f{box-shadow:inset 0 0 0 1.5px #fbbf24,inset 0 2px 0 rgba(255,255,255,.5),0 26px 40px -14px rgba(0,0,0,.9)}
.card:hover .gl{opacity:.85}
.card .f::after{display:none}
.card .in{transition:transform .75s cubic-bezier(.2,.8,.2,1)}
.card.live .in{transition:transform .12s ease-out}
.c-n{font-size:17px;font-weight:800}
/* sections */
.best-in .card{width:min(340px,80vw)}
.grid{gap:34px 24px}.grid .card,.strip .card{transition:transform .3s}.grid .card:hover{transform:translateY(-6px)}
.totals,.odds,.tbl-wrap,.best-meta dl{background:linear-gradient(180deg,#141519,#101114);border-color:#23262b}
@media(max-width:860px){.hero3{grid-template-columns:1fr;min-height:0;padding-top:28px}.arena{height:600px}.pack3{--w:240px;--h:352px}.p3-name{font-size:50px}.p3-mark{width:112px;height:112px}.p3-ring{width:180px;height:180px}h1{font-size:52px}.btn-rip{font-size:17px;padding:14px 18px}.fan .card{width:150px;margin-left:-75px;margin-top:-105px}}
@media(prefers-reduced-motion:reduce){.pack3{animation:none}.rv{opacity:1;transform:none}}

/* foil echo of the logo: specular crinkle + silver/green iridescence + jagged tear */
.p3.front::before{content:"";position:absolute;inset:0;z-index:1;background:url(/crinkle.svg) 0 0/360px 360px;mix-blend-mode:screen;opacity:.55;pointer-events:none}
.p3.front{background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 30%,transparent 70%,rgba(0,0,0,.35)),linear-gradient(135deg,#1c8a4e 0,#0f5a31 30%,#9aa7b0 52%,#127a42 70%,#0a3a20 100%)}
.p3.back::before{content:"";position:absolute;inset:0;background:url(/crinkle.svg) 40px 0/360px 360px;mix-blend-mode:screen;opacity:.45}
.foil{opacity:.6;background:repeating-linear-gradient(115deg,#0e3b24 0%,#3dd68c 4%,#e5e7eb 7%,#c4b5fd 10%,#a5f3fc 13%,#86efac 16%,#0e3b24 22%);background-size:300% 300%}
.crimp3,.tear .crimp3{background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 2px,rgba(0,0,0,.25) 2px 6px),linear-gradient(#cfd6db,#7d8a92);border:0;clip-path:polygon(0 0,100% 0,100% 70%,96% 100%,92% 72%,88% 100%,84% 74%,80% 100%,76% 70%,72% 100%,68% 74%,64% 100%,60% 70%,56% 100%,52% 72%,48% 100%,44% 70%,40% 100%,36% 74%,32% 100%,28% 70%,24% 100%,20% 72%,16% 100%,12% 70%,8% 100%,4% 74%,0 100%)}
.crimp3.bot{clip-path:polygon(0 30%,4% 0,8% 28%,12% 0,16% 30%,20% 0,24% 28%,28% 0,32% 30%,36% 0,40% 28%,44% 0,48% 30%,52% 0,56% 28%,60% 0,64% 30%,68% 0,72% 28%,76% 0,80% 30%,84% 0,88% 28%,92% 0,96% 30%,100% 0,100% 100%,0 100%)}
.p3-ring{display:none}.p3-mark{width:220px;height:220px;margin-bottom:-6px}
@media(max-width:860px){.p3-mark{width:170px;height:170px}}
/* review pass 1 */
.hero3{grid-template-columns:1.05fr 1fr}
h1{font-size:clamp(44px,6.2vw,92px)}h1 .l1,h1 .l2{white-space:nowrap}
.foil{opacity:.32}.glare{opacity:.55}.p3.front::before{opacity:.38}
.p3.front{background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 30%,transparent 70%,rgba(0,0,0,.45)),linear-gradient(135deg,#167a43 0,#0b4426 32%,#6f7d86 52%,#0e6436 70%,#062814 100%)}
.p3-sub{letter-spacing:.42em;margin-left:.42em;white-space:nowrap}.p3-art{gap:2px}
.arena{display:flex;flex-direction:column;justify-content:center;align-items:center}
.shadow3{bottom:auto;top:calc(50% + 230px)}
.hint{position:absolute;bottom:18px}.btn-again{left:50%;right:auto;transform:translateX(-50%);bottom:-28px}
.t-rare .holo{opacity:.34}.t-uncommon .holo{opacity:.2}.t-epic .holo{opacity:.55}
.card .gl{opacity:.4}
@media(max-width:860px){
 .hero3{gap:0}.lede{font-size:16px}.h3-cta{flex-wrap:nowrap}.btn-rip,.btn-ghost{font-size:15px;padding:13px 16px;white-space:nowrap}
 h1{font-size:46px}.arena{height:520px}.shadow3{top:calc(50% + 190px)}
 .fan .card{width:118px;margin-left:-59px;margin-top:-82px}.fan .c-n{font-size:12px}.fan .c-h{font-size:9px}.fan .c-h .r{font-size:8px;padding:2px 5px}.fan .c-f{font-size:9px}.fan .c-f b{font-size:12px}
 .hint{font-size:11.5px;padding:0 12px;bottom:22px}.btn-again{bottom:-18px}}
/* review pass 2 */
html,body{overflow-x:clip}.hero3>*{min-width:0}
.p3.front::before{opacity:.3;background-size:520px 520px}
.fan .card{width:180px;margin-left:-90px;margin-top:-126px}
.arena{margin-left:30px}
@media(max-width:860px){h1 .l1,h1 .l2{white-space:normal}.arena{margin-left:0}.fan .card{width:112px;margin-left:-56px;margin-top:-78px}.h3-cta{flex-wrap:wrap}
 .btn-again{font-size:11px;padding:7px 10px;white-space:nowrap}.hint{max-width:300px;left:50%;transform:translateX(-50%);right:auto;width:100%}}
@media(max-width:860px){.hero3{grid-template-columns:1fr}.h3-cta{flex-wrap:nowrap}}
.top{background:rgba(8,9,10,.96)}.t-rare .holo::after{opacity:.5}