/* ── Live Rips ── */
:root{
  --t-diamond:#7dd3fc;--t-gold:#fbbf24;--t-silver:#d6dde6;--t-bronze:#d08b4a;--t-base:#8f8571;
}
.rips-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:radial-gradient(900px 380px at 50% -10%,rgba(125,211,252,.12),transparent 60%),radial-gradient(700px 300px at 80% 120%,rgba(232,180,67,.16),transparent 60%),var(--bg)}
.rips-hero .wrap{padding-top:34px;padding-bottom:30px;text-align:center}
.live-dot{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:12px;letter-spacing:2px;color:#fca5a5;text-transform:uppercase}
.live-dot::before{content:'';width:9px;height:9px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.7);animation:livepulse 1.6s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.7)}70%{box-shadow:0 0 0 10px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.rips-title{font-weight:900;font-size:clamp(30px,6vw,56px);line-height:1.05;text-transform:uppercase;margin-top:8px}
.rips-title span{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.rips-sub{color:#d8ccb4;max-width:620px;margin:10px auto 0;line-height:1.55}
.tier-legend{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.tchip{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:4px 10px;border-radius:99px;border:1px solid currentColor;background:rgba(0,0,0,.35)}
.tchip.diamond{color:var(--t-diamond)}.tchip.gold{color:var(--t-gold)}.tchip.silver{color:var(--t-silver)}.tchip.bronze{color:var(--t-bronze)}.tchip.base{color:var(--t-base)}

/* pack list */
.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;padding:26px 0 60px}
.pack-tile{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .15s,border-color .15s}
.pack-tile:hover{transform:translateY(-3px);border-color:var(--gold-dark)}
.pack-art{aspect-ratio:4/3;background:radial-gradient(circle at 50% 40%,#2a2012,#0d0a06);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.pack-art img{height:88%;object-fit:contain;filter:drop-shadow(0 12px 22px rgba(0,0,0,.6))}
.pack-art .soldout{position:absolute;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;letter-spacing:2px;color:#fff}
.pack-info{padding:14px;text-align:center;display:flex;flex-direction:column;gap:6px;flex:1}
.pack-info h3{font-size:17px}
.pack-price{font-size:24px;font-weight:900;color:var(--gold2)}
.pack-meta{font-size:12px;color:var(--muted)}
.bar{height:6px;background:#2a2217;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--grad-gold)}
.top-hits{display:flex;gap:6px;justify-content:center;margin-top:4px}
.top-hits img{width:38px;height:52px;object-fit:cover;border-radius:4px;border:1px solid var(--line)}

/* generic pack graphic when no artwork */
.pack-graphic{width:62%;aspect-ratio:3/4;border-radius:10px;background:linear-gradient(135deg,#3a2a10,#f0c656 30%,#a8682a 55%,#2a1d0a 80%,#e8b443);position:relative;box-shadow:0 18px 40px rgba(0,0,0,.6),inset 0 0 0 2px rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.pack-graphic::before{content:'';position:absolute;left:0;right:0;top:9%;height:5px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.45) 0 6px,transparent 6px 12px)}
.pack-graphic img{width:70%;height:auto !important;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}

/* pack page */
.pk-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:26px;align-items:center;padding:30px 0}
@media (max-width:820px){.pk-top{grid-template-columns:1fr;gap:16px;padding:20px 0}}
.pk-art{display:flex;justify-content:center;perspective:900px}
.pk-art .tilt{width:min(300px,70vw);aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;animation:packfloat 5s ease-in-out infinite;transform-style:preserve-3d}
.pk-art .tilt img{max-width:100%;max-height:100%;filter:drop-shadow(0 24px 40px rgba(0,0,0,.7))}
.pk-art .tilt .pack-graphic{width:80%}
@keyframes packfloat{0%,100%{transform:rotateY(-10deg) rotateX(4deg) translateY(0)}50%{transform:rotateY(10deg) rotateX(-2deg) translateY(-8px)}}
.pk-buy{text-align:center;display:flex;flex-direction:column;gap:10px}
.pk-buy h1{font-size:clamp(26px,4vw,40px);line-height:1.1}
.pk-buy .price{font-size:40px;font-weight:900;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.qty-row{display:flex;gap:6px;justify-content:center}
.qty-row button{width:52px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-weight:800;font-size:16px;cursor:pointer;font-family:inherit}
.qty-row button.on{border-color:var(--gold);color:var(--gold2);background:#211a0f}
.rip-btn{font-size:20px;padding:17px 22px;border-radius:14px;letter-spacing:1px}
.age{display:flex;gap:8px;justify-content:center;align-items:center;font-size:13px;color:#d8ccb4;cursor:pointer}
.age input{width:18px;height:18px;accent-color:var(--gold)}
.sec{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:18px}
.sec h2{font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:14px;text-align:center}
.vstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.vstat{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.vstat div{font-size:12px;color:var(--muted)}
.vstat b{display:block;font-size:24px;font-weight:900;color:var(--gold2)}
@media (max-width:480px){.vstat b{font-size:18px}}
table.odds{width:100%;border-collapse:collapse;font-size:14px}
table.odds th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;padding:8px;border-bottom:1px solid var(--line)}
table.odds td{padding:12px 8px;border-bottom:1px solid #241d12}
table.odds td:last-child,table.odds th:last-child{text-align:right}
.dist{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:20px;align-items:center}
@media (max-width:640px){.dist{grid-template-columns:1fr}}
.dist-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dist-item{background:var(--panel2);border:1px solid var(--line);border-left:4px solid currentColor;border-radius:10px;padding:10px 12px}
.dist-item div{font-size:13px;font-weight:700}
.dist-item b{font-size:26px;font-weight:900;color:var(--text)}
.donut{width:180px;height:180px;border-radius:50%;margin:0 auto;position:relative}
.donut::after{content:'';position:absolute;inset:26%;border-radius:50%;background:var(--panel)}
.donut span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;font-weight:800;font-size:13px;text-align:center;line-height:1.3}
.cl-filters{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
@media (max-width:480px){.cl-grid{grid-template-columns:repeat(2,1fr)}}
.cl-card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:8px;cursor:pointer;position:relative;text-align:center;transition:transform .15s}
.cl-card:hover{transform:translateY(-2px)}
.cl-card .ph{aspect-ratio:5/7;border-radius:8px;overflow:hidden;background:#0b0906;border:2px solid currentColor;box-shadow:0 0 14px -4px currentColor}
.cl-card .ph img{width:100%;height:100%;object-fit:cover}
.cl-card .nm{font-size:12px;font-weight:600;line-height:1.3;margin-top:6px;color:var(--text)}
.cl-card .vl{font-size:15px;font-weight:900}
.cl-card.pulled{opacity:.42}
.cl-card.pulled::after{content:'PULLED';position:absolute;top:34%;left:50%;transform:translate(-50%,-50%) rotate(-14deg);font-weight:900;font-size:18px;letter-spacing:2px;color:#fff;background:rgba(239,68,68,.85);padding:3px 12px;border-radius:6px}
.diamond{color:var(--t-diamond)}.gold{color:var(--t-gold)}.silver{color:var(--t-silver)}.bronze{color:var(--t-bronze)}.base{color:var(--t-base)}

/* 3D card */
.card3d{width:min(300px,72vw);aspect-ratio:5/7;perspective:1100px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;margin:0 auto}
.card3d:active{cursor:grabbing}
.c3-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.c3-face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#0b0906 center/cover no-repeat;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.08),0 22px 50px rgba(0,0,0,.6)}
.c3-face.back{transform:rotateY(180deg)}
.c3-face.boopback{background:radial-gradient(circle at 50% 45%,#2a2012,#070504 70%);display:flex;align-items:center;justify-content:center}
.c3-face.boopback img{width:62%}
.c3-shine{position:absolute;inset:0;border-radius:14px;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,rgba(255,255,255,.04) 55%,transparent 70%);background-size:250% 250%}
.tier-glow{position:absolute;inset:-10px;border-radius:22px;pointer-events:none;opacity:0;transition:opacity .6s}
.drag-hint{font-size:12px;color:var(--muted);margin-top:10px;text-align:center}

/* viewer modal */
.rv-ov{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:120;display:none;align-items:center;justify-content:center;flex-direction:column;padding:20px}
.rv-ov.open{display:flex}
.rv-ov .x{position:absolute;top:14px;right:14px;background:#000a;border:1px solid #333;color:#fff;width:40px;height:40px;border-radius:99px;font-size:18px;cursor:pointer}
.rv-info{text-align:center;margin-top:16px}
.rv-info .nm{font-weight:800;font-size:17px}
.rv-info .vl{font-size:26px;font-weight:900;margin-top:4px}

/* login */
.lg-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;width:min(380px,92vw);text-align:center}
.lg-box h3{font-size:20px;margin-bottom:6px}
.lg-box input{width:100%;margin-top:10px;font-size:16px;text-align:center}
.lg-box .code{letter-spacing:8px;font-size:24px;font-weight:800}

/* opening stage */
.stage{min-height:calc(100vh - 60px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px 50px;position:relative;overflow:hidden;text-align:center}
.stage-bg{position:absolute;inset:0;pointer-events:none;transition:background 1s}
.rays{position:absolute;left:50%;top:44%;width:1400px;height:1400px;margin:-700px 0 0 -700px;pointer-events:none;opacity:0;transition:opacity .8s;background:repeating-conic-gradient(from 0deg,var(--ray) 0deg 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,transparent 60%);mask:radial-gradient(circle,#000 0,transparent 60%);animation:spin 18s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.slot{position:relative;width:min(300px,72vw);aspect-ratio:5/7;display:flex;align-items:center;justify-content:center}
.pack-open{position:absolute;inset:-6% -10%;display:flex;align-items:center;justify-content:center;z-index:3;cursor:pointer;transition:transform .2s}
.pack-open .pg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.pack-open .pg img{max-width:100%;max-height:100%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.7))}
.pack-open .pg .pack-graphic{width:82%}
.pack-open.shake{animation:packshake .5s ease-in-out infinite}
@keyframes packshake{0%,100%{transform:rotate(0)}20%{transform:rotate(-3deg) scale(1.02)}40%{transform:rotate(3deg)}60%{transform:rotate(-2deg) scale(1.03)}80%{transform:rotate(2deg)}}
.pack-open .leak{position:absolute;left:10%;right:10%;top:2%;height:30%;border-radius:50%;filter:blur(26px);opacity:0;transition:opacity 1s}
.pack-open.torn{animation:packaway 1.1s ease-in forwards;pointer-events:none}
@keyframes packaway{0%{transform:translateY(0)}99%{visibility:visible}100%{transform:translateY(120%) scale(.9);opacity:0;visibility:hidden}}
.tap-hint{margin-top:22px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gold2);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.reveal-card{position:absolute;inset:0;z-index:2;transform:translateY(70%);opacity:0}
.reveal-card.rolling{animation:rollout var(--roll,2.4s) cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rollout{0%{transform:translateY(70%) scale(.92);opacity:0}15%{opacity:1}100%{transform:translateY(0) scale(1);opacity:1}}
.hit-banner{margin-top:18px;font-weight:900;font-size:clamp(28px,7vw,52px);text-transform:uppercase;letter-spacing:1px;opacity:0;transform:scale(.6);transition:all .5s cubic-bezier(.2,1.6,.4,1)}
.hit-banner.show{opacity:1;transform:scale(1)}
.hit-name{font-size:17px;font-weight:700;margin-top:6px;opacity:0;transition:opacity .6s .3s}
.hit-value{font-size:30px;font-weight:900;opacity:0;transition:opacity .6s .45s}
.show-on .hit-name,.show-on .hit-value{opacity:1}
.after{display:none;flex-direction:column;gap:10px;margin-top:22px;width:min(380px,92vw)}
.after.show{display:flex}
.flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:150}
.flash.go{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
.screen-shake{animation:screenshake .6s ease-in-out 2}
@keyframes screenshake{0%,100%{transform:translate(0)}20%{transform:translate(-8px,4px)}40%{transform:translate(7px,-5px)}60%{transform:translate(-5px,-3px)}80%{transform:translate(4px,5px)}}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:140}
.progress-dots{display:flex;gap:6px;justify-content:center;margin-bottom:14px}
.progress-dots i{width:9px;height:9px;border-radius:50%;background:#3a2f1f}
.progress-dots i.done{background:var(--gold)}

/* vault */
.vault-head{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:20px 0 14px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
@media (max-width:480px){.vgrid{grid-template-columns:repeat(2,1fr)}}
.vcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px;text-align:center;position:relative}
.vcard.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.vcard .ph{aspect-ratio:5/7;border-radius:8px;overflow:hidden;border:2px solid currentColor;cursor:pointer;background:#0b0906}
.vcard .ph img{width:100%;height:100%;object-fit:cover}
.vcard .pick{position:absolute;top:12px;left:12px;width:24px;height:24px;border-radius:7px;background:rgba(0,0,0,.7);border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;color:#111;font-weight:900;font-size:14px;cursor:pointer}
.vcard.sel .pick{background:var(--gold)}
.vcard .st{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;margin-top:4px;color:var(--muted)}
.ship-bar{position:sticky;bottom:0;background:rgba(11,9,6,.96);border-top:1px solid var(--line);padding:12px 16px;display:flex;gap:10px;align-items:center;justify-content:space-between;z-index:30;backdrop-filter:blur(6px)}
.addr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.addr-grid .full{grid-column:1/-1}

.lg-box{max-height:92vh;overflow:auto}
.lg-box .flbl{display:block}
/* darkness reveal */
.dark-grid{position:absolute;inset:0;z-index:4;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(8,1fr);border-radius:14px;overflow:hidden;pointer-events:none}
.dark-grid i{background:#050403;transition:opacity .55s ease,filter .55s ease;box-shadow:0 0 0 1px #050403}
.dark-grid i.lit{opacity:0}
.skip-btn{margin-top:16px;background:rgba(0,0,0,.5);border:1px solid #3a2f1f;color:var(--muted);font-weight:700;font-size:13px;padding:8px 18px;border-radius:99px;cursor:pointer;font-family:inherit}
.skip-btn:hover{color:#fff;border-color:var(--gold)}
.lg-box .age{display:flex;gap:10px;align-items:center;text-align:left}
.lg-box .age input{width:20px;height:20px;flex-shrink:0;margin:0}