:root{
  --bg:#060813;
  --bg2:#0c1020;
  --surface:rgba(17,20,33,.82);
  --surface-2:rgba(24,28,44,.92);
  --surface-3:rgba(34,39,62,.95);
  --gold:#ffd400;
  --gold-2:#ffef8d;
  --cyan:#46f7ff;
  --pink:#ff4fd8;
  --violet:#8d72ff;
  --lime:#b7ff61;
  --text:#f7f8fd;
  --muted:#b4bdd5;
  --border:rgba(255,255,255,.11);
  --shadow:0 18px 60px rgba(0,0,0,.38);
  --safe-bottom:max(12px, env(safe-area-inset-bottom));
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  min-height:100vh;
  font-family:'Hanken Grotesk',sans-serif;
  background:
    radial-gradient(circle at 15% 20%, rgba(70,247,255,.14), transparent 24%),
    radial-gradient(circle at 85% 12%, rgba(255,79,216,.16), transparent 28%),
    radial-gradient(circle at 50% 0%, rgba(255,212,0,.14), transparent 30%),
    linear-gradient(180deg, #091022 0%, #05070f 62%, #030409 100%);
}
body::before, body::after{
  content:"";position:fixed;inset:auto;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(60px);opacity:.7;
}
body::before{width:240px;height:240px;left:-60px;top:120px;background:rgba(70,247,255,.09);animation:floatBlob 10s ease-in-out infinite}
body::after{width:280px;height:280px;right:-80px;top:220px;background:rgba(255,212,0,.07);animation:floatBlob 12s ease-in-out infinite reverse}
@keyframes floatBlob{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(26px) translateX(10px)}}
button,input,select{font:inherit}
button{cursor:pointer}
.app-shell{max-width:760px;margin:auto;min-height:100vh;position:relative;padding-bottom:calc(90px + var(--safe-bottom))}
.topbar{
  position:sticky;top:0;z-index:30;height:74px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 16px;background:rgba(4,7,14,.7);backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.icon-btn,.brand,.points-pill,.bottom-nav button{border:0;background:none;color:inherit}
.icon-btn,.points-pill{
  min-width:44px;height:44px;border-radius:16px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.icon-btn .material-symbols-outlined{font-size:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;flex:1;min-width:0}
.brand img{width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 0 15px rgba(255,212,0,.35))}
.brand span{font-size:14px;line-height:1}
.brand b{display:block;margin-top:3px;color:var(--gold);font-size:11px;letter-spacing:.2em}
.points-pill{padding:0 12px;display:flex;align-items:center;gap:6px;border-color:rgba(255,212,0,.34);background:linear-gradient(180deg, rgba(255,212,0,.18), rgba(255,212,0,.06));color:var(--gold);box-shadow:0 0 0 1px rgba(255,212,0,.08), 0 6px 18px rgba(255,212,0,.18)}
.points-pill strong{font:800 14px 'JetBrains Mono'}
.view{padding:20px 16px 44px}
.bottom-nav{
  position:fixed;z-index:35;bottom:0;left:50%;transform:translateX(-50%);
  width:min(760px,100%);height:calc(78px + var(--safe-bottom));padding:8px 10px var(--safe-bottom);
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  background:rgba(4,7,14,.85);backdrop-filter:blur(24px) saturate(1.25);
  border-top:1px solid rgba(255,255,255,.06);
}
.bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:16px;color:#7f8aa8;transition:.25s ease}
.bottom-nav button.active{color:var(--gold);background:linear-gradient(180deg, rgba(255,212,0,.2), rgba(255,212,0,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(255,212,0,.15)}
.bottom-nav button .material-symbols-outlined{font-size:24px}
.bottom-nav small{font:700 10px 'JetBrains Mono';letter-spacing:.02em}
.eyebrow{font:800 11px 'JetBrains Mono';letter-spacing:.24em;color:var(--cyan);text-transform:uppercase;display:inline-block}
.hero{
  position:relative;overflow:hidden;border-radius:30px;padding:24px 20px 20px;
  border:1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(circle at 80% 15%, rgba(255,79,216,.26), transparent 24%),
    radial-gradient(circle at 15% 15%, rgba(70,247,255,.18), transparent 22%),
    radial-gradient(circle at 50% 0%, rgba(255,212,0,.2), transparent 36%),
    linear-gradient(160deg, rgba(18,24,40,.95), rgba(7,10,19,.98) 64%);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
}
.hero::before,.hero::after{content:"";position:absolute;pointer-events:none}
.hero::before{width:340px;height:340px;border-radius:50%;right:-110px;top:-80px;border:1px solid rgba(255,212,0,.16);box-shadow:0 0 0 28px rgba(255,212,0,.04),0 0 0 56px rgba(70,247,255,.03)}
.hero::after{inset:0;background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.08) 42%, transparent 58%);transform:translateX(-140%);animation:heroShine 6s ease-in-out infinite}
@keyframes heroShine{0%,76%{transform:translateX(-140%)}100%{transform:translateX(140%)}}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:center}
.hero-copy h1{margin:12px 0;font-size:36px;line-height:.95;text-transform:uppercase;max-width:380px}
.hero-copy h1 span{color:var(--gold);text-shadow:0 0 22px rgba(255,212,0,.18)}
.hero p{color:var(--muted);font-size:15px;max-width:420px;margin-bottom:16px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.hero-cards{position:relative;min-height:260px}
.hero-logo{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:170px;filter:drop-shadow(0 18px 32px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(255,212,0,.2))}
.orbit-ring{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.1)}
.orbit-ring.r1{width:230px;height:230px;box-shadow:0 0 28px rgba(255,212,0,.07)}
.orbit-ring.r2{width:280px;height:180px;border-color:rgba(70,247,255,.16);transform:translate(-50%,-50%) rotate(-12deg)}
.hero-float{position:absolute;width:92px;height:128px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.13);box-shadow:0 16px 32px rgba(0,0,0,.45), 0 0 18px rgba(255,212,0,.1);animation:heroOrbit 14s linear infinite;background:#111}
.hero-float.c1{top:22px;left:18px;animation-delay:-2s}
.hero-float.c2{top:10px;right:18px;animation-delay:-7s}
.hero-float.c3{bottom:6px;left:44px;animation-delay:-10s}
.hero-float.c4{bottom:16px;right:10px;animation-delay:-4s}
@keyframes heroOrbit{0%{transform:translateY(0) rotate(-8deg)}25%{transform:translateY(-10px) rotate(5deg)}50%{transform:translateY(4px) rotate(11deg)}75%{transform:translateY(-8px) rotate(-4deg)}100%{transform:translateY(0) rotate(-8deg)}}
.hero-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);font:800 11px 'JetBrains Mono';color:#d8e0ff}
.pill.gold{color:var(--gold);border-color:rgba(255,212,0,.26);background:rgba(255,212,0,.08)}
.pill.cyan{color:var(--cyan);border-color:rgba(70,247,255,.22);background:rgba(70,247,255,.08)}
.btn{border:0;border-radius:15px;padding:13px 16px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;transition:transform .2s ease, box-shadow .25s ease, opacity .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(180deg, #ffe95e, var(--gold));color:#1a1402;box-shadow:0 12px 30px rgba(255,212,0,.22)}
.btn-secondary{background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.1)}
.btn-cyan{background:linear-gradient(180deg,#7cfcff,var(--cyan));color:#042327;box-shadow:0 12px 30px rgba(70,247,255,.16)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.16);color:#d8e0ff}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:28px 2px 14px}.section-head h2{font-size:22px;margin:0}.section-head button{background:none;border:0;color:var(--cyan);font:700 12px 'JetBrains Mono';padding:0}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.stat{padding:15px 12px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.stat strong{display:block;font-size:24px;color:var(--gold)}.stat span{font-size:11px;color:var(--muted)}
.notice{border:1px solid rgba(70,247,255,.14);background:linear-gradient(90deg, rgba(70,247,255,.12), rgba(255,255,255,.02));padding:14px 16px;border-radius:16px;color:#d8fcfb;font-size:13px;margin:14px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.highlight-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.highlight{padding:14px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02))}
.highlight .material-symbols-outlined{font-size:28px;color:var(--gold);margin-bottom:8px}
.highlight h3{margin:0 0 6px;font-size:14px}.highlight p{margin:0;color:var(--muted);font-size:12px;line-height:1.35}
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.product-card{position:relative;background:linear-gradient(160deg, rgba(31,36,56,.92), rgba(13,16,26,.98));border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:10px;overflow:hidden;box-shadow:var(--shadow);transition:transform .25s ease, box-shadow .25s ease}
.product-card::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg, transparent 15%, rgba(255,255,255,.09) 42%, transparent 60%);transform:translateX(-130%);transition:transform .5s ease}
.product-card:hover{transform:translateY(-2px)}
.product-card:hover::before{transform:translateX(130%)}
.product-card img{width:100%;aspect-ratio:367/512;object-fit:cover;border-radius:14px;display:block;background:#121318}
.product-card h3{font-size:14px;margin:10px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-card .meta{font:600 10px 'JetBrains Mono';color:var(--muted)}
.product-card .price{font-weight:900;color:var(--gold);margin-top:8px;font-size:16px}
.product-card button{width:100%;margin-top:10px;padding:10px 8px;border-radius:12px;border:1px solid rgba(255,212,0,.26);background:rgba(255,212,0,.1);color:var(--gold);font-weight:900;text-transform:uppercase;font-size:12px}
.badge{position:absolute;top:14px;left:14px;padding:5px 8px;border-radius:999px;background:rgba(3,6,14,.9);border:1px solid rgba(255,255,255,.12);font:800 9px 'JetBrains Mono';color:var(--gold)}
.filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 18px}.search{grid-column:1/-1}
.input,select{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:14px;color:var(--text);padding:13px 12px;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.input:focus,select:focus{border-color:rgba(255,212,0,.36);box-shadow:0 0 0 3px rgba(255,212,0,.08)}
.pack-list{display:grid;gap:14px}
.pack-card{position:relative;display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:center;border-radius:24px;padding:16px;overflow:hidden;border:1px solid rgba(255,255,255,.09);box-shadow:var(--shadow);background:linear-gradient(160deg, rgba(22,25,39,.92), rgba(8,10,16,.98))}
.pack-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%, rgba(70,247,255,.14), transparent 26%), radial-gradient(circle at 85% 10%, rgba(255,212,0,.18), transparent 24%) }
.pack-card[data-pack="supporters"]::before{background:radial-gradient(circle at 15% 20%, rgba(255,79,216,.18), transparent 26%), radial-gradient(circle at 85% 10%, rgba(255,212,0,.18), transparent 24%)}
.pack-card img{position:relative;width:118px;height:150px;object-fit:contain;filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));animation:packFloat 4.2s ease-in-out infinite}
@keyframes packFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.pack-card h3{position:relative;margin:0 0 6px;font-size:18px}.pack-card p{position:relative;font-size:13px;color:var(--muted);margin-bottom:8px}
.cost{position:relative;display:inline-flex;align-items:center;gap:5px;color:var(--gold);font:900 13px 'JetBrains Mono';margin-bottom:10px}
.history{display:grid;gap:10px}.history-item{display:grid;grid-template-columns:56px 1fr auto;gap:11px;align-items:center;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));border-radius:16px;padding:10px 12px}.history-item img{width:56px;height:78px;object-fit:cover;border-radius:8px}.history-item h3{font-size:14px;margin:0 0 3px}.history-item p{font-size:11px;color:var(--muted);margin:0}.status{font:800 9px 'JetBrains Mono';color:var(--cyan);text-align:right}
.profile-card{background:linear-gradient(160deg, rgba(22,25,39,.92), rgba(9,12,20,.98));border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:20px;box-shadow:var(--shadow)}
.profile-avatar{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%, rgba(255,212,0,.24), rgba(255,212,0,.06));border:1px solid rgba(255,212,0,.26);color:var(--gold);font-size:34px;margin-bottom:12px}
.form-grid{display:grid;gap:13px;margin-top:18px}.field label{display:block;font:700 10px 'JetBrains Mono';color:var(--muted);margin:0 0 6px;text-transform:uppercase}
.empty{border:1px dashed rgba(255,255,255,.14);border-radius:20px;padding:30px 18px;text-align:center;color:var(--muted);background:rgba(255,255,255,.02)}
.modal{border:0;padding:0;background:transparent;color:inherit;width:min(760px,100%);max-width:none;height:100%;max-height:none;margin:0 0 0 auto}
.modal::backdrop{background:rgba(1,2,6,.82);backdrop-filter:blur(10px)}
#modal-content{height:100%;background:
  radial-gradient(circle at 50% -10%, rgba(255,212,0,.11), transparent 28%),
  radial-gradient(circle at 0 30%, rgba(70,247,255,.08), transparent 24%),
  linear-gradient(180deg, rgba(8,10,17,.98), rgba(4,6,12,.99));overflow:auto;padding:18px 16px 40px}
.modal-close{position:sticky;top:0;margin-left:auto;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text);z-index:4}
.toast{position:fixed;left:50%;bottom:calc(90px + var(--safe-bottom));transform:translateX(-50%) translateY(14px);padding:12px 14px;border-radius:14px;background:rgba(8,11,19,.94);border:1px solid rgba(255,255,255,.1);color:var(--text);font-weight:800;opacity:0;pointer-events:none;transition:.25s ease;z-index:80;box-shadow:var(--shadow)}.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* opening */
.opening-stage{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:calc(100vh - 100px);justify-content:center;position:relative;overflow:hidden;padding-bottom:24px}
.opening-sub{max-width:420px;color:var(--muted);margin:12px auto 18px}
.opening-stage::before,.opening-stage::after{content:"";position:absolute;inset:auto;pointer-events:none;border-radius:50%;filter:blur(44px);opacity:.75}
.opening-stage::before{width:220px;height:220px;background:rgba(70,247,255,.11);left:-30px;top:18%}
.opening-stage::after{width:250px;height:250px;background:rgba(255,212,0,.09);right:-60px;top:14%}
.opening-core{position:relative;width:min(330px,78vw);height:430px;display:grid;place-items:center}
.opening-pulse{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.12);animation:pulseRing 2.2s ease-out infinite}
.opening-pulse.r1{width:180px;height:180px}.opening-pulse.r2{width:250px;height:250px;animation-delay:.4s}.opening-pulse.r3{width:320px;height:320px;animation-delay:.8s}
@keyframes pulseRing{0%{transform:translate(-50%,-50%) scale(.78);opacity:.15}60%{opacity:.34}100%{transform:translate(-50%,-50%) scale(1.12);opacity:0}}
.sparkle{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,var(--gold) 0%, rgba(255,255,255,.95) 35%, transparent 70%);box-shadow:0 0 12px rgba(255,212,0,.75);animation:spark 3.4s linear infinite}
@keyframes spark{0%{transform:translate(0,0) scale(.2);opacity:0}10%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1.3);opacity:0}}
.opening-pack{position:relative;width:220px;max-width:70vw;filter:drop-shadow(0 26px 44px rgba(0,0,0,.55));transform-origin:center center}
.opening-pack.idle{animation:packIdle 2.8s ease-in-out infinite}
.opening-pack.charge{animation:packCharge 1.2s ease-in-out infinite}
.opening-pack.ripping{animation:packRip .78s cubic-bezier(.2,.7,.15,1) forwards}
@keyframes packIdle{0%,100%{transform:translateY(0) rotate(-3deg) scale(1)}50%{transform:translateY(-12px) rotate(3deg) scale(1.02)}}
@keyframes packCharge{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-10px) scale(1.03)}60%{transform:translateY(4px) scale(1.07)}}
@keyframes packRip{0%{transform:scale(1) rotate(-4deg)}18%{transform:scale(1.06) rotate(4deg)}42%{transform:scale(1.12) rotate(-6deg)}65%{transform:scale(1.18) rotate(8deg)}100%{transform:scale(1.34) rotate(-10deg);opacity:0}}
.swipe-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font:800 11px 'JetBrains Mono';text-transform:uppercase;letter-spacing:.12em}
.swipe-line{width:2px;height:56px;background:linear-gradient(180deg, transparent, rgba(255,255,255,.9), transparent);animation:swipeCue 1.6s ease-in-out infinite}
@keyframes swipeCue{0%,100%{transform:translateY(12px);opacity:.3}50%{transform:translateY(-8px);opacity:1}}
.opening-flash{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 80px 50px rgba(255,255,255,.95), 0 0 120px 90px rgba(255,212,0,.55);animation:flashBurst .75s ease-out forwards}
@keyframes flashBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}12%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(28)}}
.slash{position:absolute;width:240px;height:5px;border-radius:999px;background:linear-gradient(90deg, transparent, rgba(70,247,255,.92), rgba(255,255,255,.96), rgba(255,79,216,.92), transparent);filter:blur(.2px);box-shadow:0 0 18px rgba(70,247,255,.5);animation:slashMove .55s ease-out forwards}
.slash.s1{transform:rotate(-18deg)}.slash.s2{transform:rotate(18deg);animation-delay:.08s}
@keyframes slashMove{0%{opacity:0;left:-120px;top:50%}20%{opacity:1}100%{opacity:0;left:100%;top:34%}}
.fan-stage{position:relative;width:min(360px,94vw);height:430px;display:grid;place-items:center}
.card-back,.reveal-card{position:absolute;width:112px;height:156px;border-radius:16px;border:1px solid rgba(255,255,255,.16);box-shadow:0 24px 40px rgba(0,0,0,.45);background:linear-gradient(160deg, #10182b, #0a0e16 70%);overflow:hidden}
.card-back::before,.card-back::after{content:"";position:absolute;inset:auto}
.card-back::before{inset:8px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 50% 18%, rgba(70,247,255,.2), transparent 30%), radial-gradient(circle at 50% 80%, rgba(255,212,0,.18), transparent 28%), linear-gradient(145deg, rgba(255,255,255,.04), rgba(255,255,255,.01))}
.card-back::after{width:62px;height:62px;left:50%;top:50%;transform:translate(-50%,-50%);background:url('assets/logo.png') center/contain no-repeat;filter:drop-shadow(0 0 10px rgba(255,212,0,.18))}
.card-back small{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);font:800 8px 'JetBrains Mono';color:var(--gold);letter-spacing:.14em;text-transform:uppercase}
.fan-stage .p1{transform:translate(-110px,90px) rotate(-22deg)}
.fan-stage .p2{transform:translate(-58px,26px) rotate(-11deg)}
.fan-stage .p3{transform:translate(0,-8px) rotate(0)}
.fan-stage .p4{transform:translate(58px,26px) rotate(11deg)}
.fan-stage .p5{transform:translate(110px,90px) rotate(22deg)}
.card-back, .reveal-card{animation:cardFanIn .65s cubic-bezier(.2,.8,.15,1) both}
.fan-stage .p2,.fan-stage .rp2{animation-delay:.05s}.fan-stage .p3,.fan-stage .rp3{animation-delay:.1s}.fan-stage .p4,.fan-stage .rp4{animation-delay:.15s}.fan-stage .p5,.fan-stage .rp5{animation-delay:.2s}
@keyframes cardFanIn{0%{opacity:0;transform:translateY(120px) scale(.6) rotate(0)}100%{opacity:1}}
.reveal-card{padding:0;background:#101218}
.reveal-card img{width:100%;height:100%;object-fit:cover;display:block}
.reveal-card.selected{outline:2px solid var(--gold);box-shadow:0 0 0 5px rgba(255,212,0,.12),0 26px 42px rgba(0,0,0,.5)}
.fan-stage .rp1{transform:translate(-112px,90px) rotate(-20deg)}.fan-stage .rp2{transform:translate(-60px,24px) rotate(-10deg)}.fan-stage .rp3{transform:translate(0,-6px)}.fan-stage .rp4{transform:translate(60px,24px) rotate(10deg)}.fan-stage .rp5{transform:translate(112px,90px) rotate(20deg)}
.choice-copy{min-height:58px;color:var(--gold);font-weight:900;margin-top:8px}
.big-reward{width:180px;max-width:58vw;border-radius:18px;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 42px rgba(0,0,0,.42)}
.meter{width:min(320px,90vw);height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin:16px auto 0}.meter span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--gold),var(--pink));box-shadow:0 0 18px rgba(255,212,0,.36);transition:width .25s ease}
.loader-copy{font:800 11px 'JetBrains Mono';letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-top:12px}

@media (max-width:640px){
  .hero-grid{grid-template-columns:1fr}
  .hero-cards{min-height:240px}
  .hero-copy h1{font-size:32px}
  .highlight-strip{grid-template-columns:1fr}
}
@media (max-width:460px){
  .view{padding-left:14px;padding-right:14px}
  .topbar{padding-inline:12px}
  .brand span{font-size:12px}
  .card-grid{grid-template-columns:1fr 1fr;gap:10px}
  .pack-card{grid-template-columns:96px 1fr;padding:14px}
  .pack-card img{width:94px;height:126px}
  .hero{padding:22px 16px 18px}
  .hero-copy h1{font-size:29px}
  .hero-logo{width:148px}
  .hero-float{width:78px;height:108px}
  .fan-stage{height:400px}
  .card-back,.reveal-card{width:96px;height:134px}
  .fan-stage .p1,.fan-stage .rp1{transform:translate(-96px,96px) rotate(-22deg)}
  .fan-stage .p2,.fan-stage .rp2{transform:translate(-48px,35px) rotate(-11deg)}
  .fan-stage .p3,.fan-stage .rp3{transform:translate(0,8px) rotate(0)}
  .fan-stage .p4,.fan-stage .rp4{transform:translate(48px,35px) rotate(11deg)}
  .fan-stage .p5,.fan-stage .rp5{transform:translate(96px,96px) rotate(22deg)}
}

/* ===== V3 NEON OVERRIDES ===== */
body{
  background:
    radial-gradient(circle at 18% 12%, rgba(0,255,255,.22), transparent 25%),
    radial-gradient(circle at 82% 10%, rgba(255,0,170,.22), transparent 28%),
    radial-gradient(circle at 50% 0%, rgba(255,230,0,.18), transparent 24%),
    linear-gradient(180deg,#09101f 0%,#080716 45%,#02040a 100%);
}
body::before{background:rgba(0,238,255,.16);width:320px;height:320px;filter:blur(85px)}
body::after{background:rgba(255,0,153,.14);width:360px;height:360px;filter:blur(90px)}
.topbar{
  background:linear-gradient(90deg,rgba(4,8,20,.94),rgba(17,7,29,.9),rgba(4,11,22,.94));
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,var(--cyan),var(--gold),var(--pink),transparent) 1;
  box-shadow:0 10px 35px rgba(0,0,0,.35);
}
.brand b{background:linear-gradient(90deg,var(--gold),var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900}
.points-pill{animation:pointsPulse 2.2s ease-in-out infinite}
@keyframes pointsPulse{0%,100%{box-shadow:0 0 0 1px rgba(255,212,0,.08),0 6px 18px rgba(255,212,0,.16)}50%{box-shadow:0 0 0 4px rgba(255,212,0,.07),0 10px 30px rgba(255,212,0,.32)}}
.hero{
  border-color:rgba(255,255,255,.16);
  background:
    linear-gradient(135deg,rgba(0,239,255,.08),transparent 34%),
    linear-gradient(225deg,rgba(255,0,174,.12),transparent 34%),
    radial-gradient(circle at 50% 0%,rgba(255,230,0,.25),transparent 30%),
    linear-gradient(160deg,#151a32 0%,#0d1020 56%,#080811 100%);
  box-shadow:0 28px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04),0 0 70px rgba(70,247,255,.08);
}
.hero::before{border-color:rgba(70,247,255,.2);box-shadow:0 0 0 32px rgba(255,212,0,.035),0 0 0 64px rgba(255,79,216,.025)}
.hero-copy h1{font-size:40px;letter-spacing:-.035em;text-shadow:0 4px 24px rgba(0,0,0,.4)}
.hero-copy h1 span{background:linear-gradient(90deg,var(--gold),#fff2a0,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.hero-logo{width:195px;animation:logoFloat 4s ease-in-out infinite}
@keyframes logoFloat{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-54%) scale(1.04)}}
.hero-float{border:2px solid rgba(255,255,255,.2);box-shadow:0 20px 42px rgba(0,0,0,.56),0 0 30px rgba(70,247,255,.12)}
.stat:nth-child(1){background:linear-gradient(180deg,rgba(255,212,0,.14),rgba(255,255,255,.03));border-color:rgba(255,212,0,.2)}
.stat:nth-child(2){background:linear-gradient(180deg,rgba(70,247,255,.12),rgba(255,255,255,.03));border-color:rgba(70,247,255,.18)}
.stat:nth-child(3){background:linear-gradient(180deg,rgba(255,79,216,.12),rgba(255,255,255,.03));border-color:rgba(255,79,216,.18)}
.highlight:nth-child(1){box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 38px rgba(70,247,255,.07)}
.highlight:nth-child(2){box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 38px rgba(255,79,216,.07)}
.highlight:nth-child(3){box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 14px 38px rgba(255,212,0,.07)}
.pack-card{min-height:200px;border-color:rgba(255,255,255,.14)}
.pack-card:nth-child(1){background:linear-gradient(145deg,rgba(22,53,80,.94),rgba(9,12,23,.98));box-shadow:0 22px 60px rgba(0,196,255,.11)}
.pack-card:nth-child(2){background:linear-gradient(145deg,rgba(55,25,84,.94),rgba(12,10,24,.98));box-shadow:0 22px 60px rgba(178,73,255,.12)}
.pack-card:nth-child(3){background:linear-gradient(145deg,rgba(75,34,59,.94),rgba(15,10,23,.98));box-shadow:0 22px 60px rgba(255,79,216,.1)}
.pack-card img{transform:scale(1.03);filter:drop-shadow(0 20px 30px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,255,255,.08))}
.pack-card .btn-primary{background:linear-gradient(90deg,var(--gold),#fff067);box-shadow:0 12px 30px rgba(255,212,0,.25)}
.product-card{border-color:rgba(255,255,255,.13);background:linear-gradient(160deg,rgba(30,35,64,.96),rgba(10,12,24,.99))}
.product-card:nth-child(3n+1){box-shadow:0 22px 55px rgba(70,247,255,.07)}
.product-card:nth-child(3n+2){box-shadow:0 22px 55px rgba(255,79,216,.07)}
.product-card:nth-child(3n){box-shadow:0 22px 55px rgba(255,212,0,.07)}
.bottom-nav{background:linear-gradient(180deg,rgba(6,9,19,.9),rgba(2,4,10,.98));border-top:1px solid rgba(255,255,255,.08)}
.bottom-nav button.active{background:linear-gradient(180deg,rgba(255,212,0,.2),rgba(70,247,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 28px rgba(255,212,0,.14)}
.opening-stage{background:radial-gradient(circle at 50% 35%,rgba(255,212,0,.08),transparent 28%)}
.opening-core{filter:drop-shadow(0 0 40px rgba(70,247,255,.08))}
.fan-stage .reveal-card{transition:transform .25s ease,box-shadow .25s ease,filter .25s ease}
.fan-stage .reveal-card:hover{filter:brightness(1.08) saturate(1.08)}
.fan-stage .reveal-card.selected{transform:translateY(-14px) scale(1.09)!important;z-index:10;box-shadow:0 0 0 3px var(--gold),0 0 34px rgba(255,212,0,.4),0 34px 50px rgba(0,0,0,.55)}

/* ===== V4 · PALETA WEB + TIENDA PRINCIPAL ===== */
:root{
  --bg:#0e0d07;
  --bg2:#151408;
  --surface:rgba(34,32,19,.86);
  --surface-2:rgba(30,28,16,.94);
  --surface-3:rgba(55,53,39,.96);
  --gold:#fae500;
  --gold-2:#fff36b;
  --cyan:#45faf7;
  --pink:#ffb778;
  --violet:#fd9000;
  --lime:#e8e2cf;
  --text:#ffffff;
  --muted:#cdc7aa;
  --border:rgba(250,229,0,.14);
  --shadow:0 18px 60px rgba(0,0,0,.45);
}
html{background:var(--bg)}
body{
  background:
    radial-gradient(circle at 12% 12%, rgba(69,250,247,.09), transparent 25%),
    radial-gradient(circle at 88% 9%, rgba(253,144,0,.11), transparent 28%),
    radial-gradient(circle at 50% 0%, rgba(250,229,0,.12), transparent 25%),
    linear-gradient(180deg,#151408 0%,#0e0d07 58%,#080804 100%);
}
body::before{background:rgba(69,250,247,.08);width:300px;height:300px;filter:blur(90px)}
body::after{background:rgba(250,229,0,.07);width:350px;height:350px;filter:blur(95px)}
h1,h2,.store-cart-title{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.02em}
.topbar{
  background:linear-gradient(90deg,rgba(16,14,4,.95),rgba(28,26,12,.92),rgba(11,12,8,.95));
  border-bottom:1px solid rgba(250,229,0,.25);
  border-image:none;
  box-shadow:0 10px 35px rgba(0,0,0,.42);
}
.brand b{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--gold);font-weight:900}
.icon-btn,.points-pill{border-radius:10px;background:#222013;border-color:rgba(255,255,255,.1)}
.points-pill{background:rgba(250,229,0,.1);border-color:rgba(250,229,0,.38);box-shadow:0 0 24px rgba(250,229,0,.12)}
.bottom-nav{background:rgba(16,14,4,.94);border-top-color:rgba(250,229,0,.2)}
.bottom-nav button{border-radius:10px;color:#969177}
.bottom-nav button.active{color:var(--gold);background:rgba(250,229,0,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.eyebrow{color:var(--cyan)}
.hero{
  border-radius:20px;
  border-color:rgba(250,229,0,.28);
  background:
    linear-gradient(135deg,rgba(69,250,247,.06),transparent 32%),
    linear-gradient(225deg,rgba(255,183,120,.08),transparent 34%),
    radial-gradient(circle at 50% 0%,rgba(250,229,0,.16),transparent 32%),
    linear-gradient(155deg,#222013 0%,#151408 56%,#0e0d07 100%);
  box-shadow:0 22px 70px rgba(0,0,0,.45),0 0 36px rgba(250,229,0,.05);
}
.hero::before{border-color:rgba(250,229,0,.18);box-shadow:0 0 0 28px rgba(250,229,0,.035),0 0 0 56px rgba(69,250,247,.025)}
.hero-copy h1{font-size:clamp(38px,7vw,64px);line-height:.92;max-width:470px}
.hero-copy h1 span{color:var(--gold);text-shadow:0 0 20px rgba(250,229,0,.17)}
.hero p{color:#d9d2b5}
.hero-float{border-radius:9px;border-color:rgba(250,229,0,.22);box-shadow:0 18px 35px rgba(0,0,0,.52),0 0 16px rgba(250,229,0,.08)}
.orbit-ring.r2{border-color:rgba(69,250,247,.22)}
.btn{border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn-primary{background:var(--gold);color:#1f1c00;box-shadow:0 0 20px rgba(250,229,0,.18),0 10px 28px rgba(0,0,0,.28)}
.btn-primary:hover{filter:brightness(1.04)}
.btn-secondary{background:#222013;border-color:rgba(255,255,255,.14);color:#f7f2e7}
.btn-cyan{background:var(--cyan);color:#00201f;box-shadow:0 0 20px rgba(69,250,247,.18)}
.btn-ghost{border-color:rgba(250,229,0,.25);color:var(--gold)}
.pill{border-radius:8px;background:#222013;color:#e8e2cf}
.pill.gold{background:rgba(250,229,0,.08);border-color:rgba(250,229,0,.3);color:var(--gold)}
.pill.cyan{background:rgba(69,250,247,.07);border-color:rgba(69,250,247,.24);color:var(--cyan)}
.stat{border-radius:12px;background:#1e1c10;border-color:rgba(255,255,255,.08)}
.stat strong{font-family:'Anton',sans-serif;font-weight:400;color:var(--gold)}
.stat-button{color:inherit;text-align:left;cursor:pointer;transition:transform .2s ease,border-color .2s ease}
.stat-button:hover{transform:translateY(-2px);border-color:rgba(250,229,0,.28)}
.notice{border-radius:10px;border-color:rgba(69,250,247,.2);background:linear-gradient(90deg,rgba(69,250,247,.08),rgba(34,32,19,.72));color:#e5fffe}
.product-card{border-radius:14px;background:linear-gradient(150deg,#222013,#100e04);border-color:rgba(255,255,255,.09);box-shadow:0 16px 40px rgba(0,0,0,.34)}
.product-card:hover{border-color:rgba(250,229,0,.28)}
.product-image-wrap{position:relative;width:100%}
.product-card img{border-radius:9px}
.product-card h3{font-family:'Anton',sans-serif;font-weight:400;font-size:18px;letter-spacing:.01em}
.product-card-bottom{display:flex;align-items:end;justify-content:space-between;gap:8px;margin-top:8px}
.product-card .price{font-family:'Anton',sans-serif;font-size:20px;font-weight:400;margin:0}
.product-card button[data-add]{width:auto;min-width:92px;display:inline-flex;align-items:center;justify-content:center;gap:5px;margin:0;padding:9px 10px;border-radius:8px;background:rgba(250,229,0,.1);border-color:rgba(250,229,0,.36)}
.product-card button[data-add] .material-symbols-outlined{font-size:18px}
.badge{border-radius:6px;background:#151408;border-color:rgba(250,229,0,.36)}
.input,select{border-radius:9px;background:#151408;border-color:rgba(255,255,255,.12)}
.input:focus,select:focus{border-color:rgba(250,229,0,.5);box-shadow:0 0 0 3px rgba(250,229,0,.08)}
.pack-card{border-radius:16px;background:linear-gradient(145deg,#222013,#100e04);border-color:rgba(250,229,0,.18)}
.pack-card::before{background:radial-gradient(circle at 15% 20%,rgba(69,250,247,.08),transparent 26%),radial-gradient(circle at 85% 10%,rgba(250,229,0,.12),transparent 24%)}
.pack-card[data-pack="supporters"]::before{background:radial-gradient(circle at 15% 20%,rgba(255,183,120,.09),transparent 26%),radial-gradient(circle at 85% 10%,rgba(250,229,0,.12),transparent 24%)}
.pack-card h3{font-family:'Anton',sans-serif;font-weight:400;font-size:22px}
.profile-card{border-radius:16px;background:linear-gradient(145deg,#222013,#100e04);border-color:rgba(250,229,0,.15)}
.profile-avatar{border-radius:12px;background:rgba(250,229,0,.08)}
.history-item{border-radius:10px;background:#1e1c10}
.empty{border-radius:14px;background:#151408}
.empty>.material-symbols-outlined{font-size:44px;color:var(--gold)}

/* venta principal */
.sale-panel{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin:18px 0;padding:18px 20px;border-radius:14px;
  border:1px solid rgba(250,229,0,.32);
  background:linear-gradient(135deg,rgba(250,229,0,.11),rgba(255,183,120,.05)),#151408;
  box-shadow:0 0 34px rgba(250,229,0,.06);
}
.sale-panel h2{margin:5px 0;font-size:clamp(28px,5vw,42px);text-transform:uppercase;color:#fff}
.sale-panel p{margin:0;color:#cdc7aa;max-width:470px}
.points-hook{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  margin:28px 0 8px;padding:18px;border-radius:16px;
  border:1px solid rgba(69,250,247,.24);
  background:linear-gradient(135deg,rgba(69,250,247,.07),rgba(250,229,0,.055)),#151408;
}
.points-hook-icon{width:64px;height:64px;border-radius:12px;display:grid;place-items:center;color:#1f1c00;background:var(--gold);box-shadow:0 0 24px rgba(250,229,0,.2)}
.points-hook-icon .material-symbols-outlined{font-size:34px}
.points-hook h2{margin:5px 0;font-size:30px;text-transform:uppercase}.points-hook p{margin:0;color:var(--muted)}
.points-costs{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.points-costs span{padding:6px 8px;border:1px solid rgba(250,229,0,.23);border-radius:6px;background:rgba(250,229,0,.06);color:var(--gold);font:700 9px 'JetBrains Mono'}
.compact-packs .pack-card{grid-template-columns:96px 1fr}.compact-packs .pack-card img{width:92px;height:124px}.compact-packs .pack-card h3{font-size:19px}

/* catálogo */
.catalog-intro,.packs-intro{padding:18px;border:1px solid rgba(250,229,0,.22);border-radius:14px;background:linear-gradient(135deg,rgba(250,229,0,.08),transparent 45%),#151408}
.catalog-intro h1,.packs-intro h1,.opening-stage h1{margin:7px 0 4px;font-size:clamp(38px,7vw,62px);line-height:.95;text-transform:uppercase;color:#fff}
.catalog-intro p,.packs-intro p{margin:0;color:var(--muted)}
.catalog-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.cart-summary-btn{position:relative;width:52px;height:52px;border-radius:10px;border:1px solid rgba(250,229,0,.35);background:rgba(250,229,0,.1);color:var(--gold)}
.cart-summary-btn b{position:absolute;right:-5px;top:-5px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:#fd9000;color:#151408;font:900 11px/21px 'JetBrains Mono'}
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;color:var(--muted);font:600 11px 'JetBrains Mono'}
.catalog-toolbar b{color:var(--gold)}
.view-switch{display:inline-flex;padding:3px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:#100e04}
.view-switch button{border:0;border-radius:7px;background:transparent;color:#969177;padding:7px 9px;display:flex;align-items:center;gap:5px}
.view-switch button.active{background:var(--gold);color:#1f1c00}
.view-switch .material-symbols-outlined{font-size:19px}.view-switch small{font:700 9px 'JetBrains Mono'}
.card-grid.is-list{grid-template-columns:1fr}
.card-grid.is-list .product-card{display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:center;padding:10px}
.card-grid.is-list .product-image-wrap{width:112px}
.card-grid.is-list .product-card img{aspect-ratio:367/512;height:154px}
.card-grid.is-list .product-card h3{font-size:23px;margin-top:0;white-space:normal}
.card-grid.is-list .product-card-body{min-width:0}
.card-grid.is-list .badge{top:13px;left:13px}
.card-grid.is-list .product-card-bottom{align-items:center}
.card-grid.is-list .product-card button[data-add]{min-width:112px}

/* puntos y sobres */
.points-balance{display:flex;align-items:center;gap:12px;margin-top:16px;padding:13px;border-radius:10px;background:#222013;border:1px solid rgba(250,229,0,.2)}
.points-balance>.material-symbols-outlined{font-size:34px;color:var(--gold)}.points-balance div{flex:1}.points-balance small{display:block;color:var(--muted);font:700 9px 'JetBrains Mono';text-transform:uppercase}.points-balance strong{font-family:'Anton',sans-serif;font-size:24px;color:var(--gold);font-weight:400}

/* apertura corregida */
.modal::backdrop{background:rgba(0,0,0,.82)}
#modal-content{background:radial-gradient(circle at 50% -10%,rgba(250,229,0,.09),transparent 28%),radial-gradient(circle at 0 30%,rgba(69,250,247,.06),transparent 24%),linear-gradient(180deg,#151408,#080804);padding-top:16px}
.modal-close{border-radius:8px;background:#222013;border-color:rgba(250,229,0,.22)}
.opening-stage{padding-inline:8px}
.opening-stage h1{max-width:580px;margin-top:12px}
.opening-sub{color:#cdc7aa}.opening-sub b{color:var(--gold)}
.opening-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.opening-pulse{border-color:rgba(250,229,0,.16)}
.sparkle{background:radial-gradient(circle,var(--gold) 0%,#fff 35%,transparent 70%);box-shadow:0 0 12px rgba(250,229,0,.7)}
.slash{background:linear-gradient(90deg,transparent,rgba(69,250,247,.92),#fff,rgba(250,229,0,.92),rgba(253,144,0,.9),transparent);box-shadow:0 0 18px rgba(250,229,0,.28)}
.meter span{background:linear-gradient(90deg,var(--cyan),var(--gold),#fd9000)}
.card-back,.reveal-card{border-radius:10px;background:linear-gradient(160deg,#222013,#0e0d07 70%);border-color:rgba(250,229,0,.18)}
.card-back::before{border-radius:7px;background:radial-gradient(circle at 50% 18%,rgba(69,250,247,.12),transparent 30%),radial-gradient(circle at 50% 80%,rgba(250,229,0,.15),transparent 28%),linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
.reveal-card.selected{outline-color:var(--gold);box-shadow:0 0 0 5px rgba(250,229,0,.12),0 26px 42px rgba(0,0,0,.5)}
.big-reward{border-radius:10px;border-color:rgba(250,229,0,.22)}

@media (max-width:640px){
  .sale-panel{align-items:flex-start;flex-direction:column}
  .points-hook{grid-template-columns:auto 1fr}.points-hook>.btn{grid-column:1/-1;width:100%}
}
@media (max-width:460px){
  .hero-copy h1{font-size:42px}
  .sale-panel h2{font-size:31px}
  .catalog-intro h1,.packs-intro h1,.opening-stage h1{font-size:42px}
  .view-switch small{display:none}
  .card-grid.is-list .product-card{grid-template-columns:94px 1fr}
  .card-grid.is-list .product-image-wrap{width:94px}
  .card-grid.is-list .product-card img{height:132px}
  .card-grid.is-list .product-card h3{font-size:19px}
  .card-grid.is-list .product-card-bottom{align-items:flex-start;flex-direction:column}
  .card-grid.is-list .product-card button[data-add]{min-width:100%;width:100%}
  .product-card button[data-add] span:last-child{display:none}
  .product-card button[data-add]{min-width:44px}
  .points-balance{align-items:flex-start;flex-wrap:wrap}.points-balance>.btn{width:100%}
}

/* =========================================================
   V5 · Ventas primero + Moneda Pocket + canje robusto
   ========================================================= */
.coin-icon{display:block;object-fit:contain;flex:0 0 auto}
.coin-icon-top{width:30px;height:30px;filter:drop-shadow(0 4px 7px rgba(0,0,0,.42))}
.coin-icon-cost{width:27px;height:27px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.42))}
.coin-icon-balance{width:58px;height:58px;filter:drop-shadow(0 8px 12px rgba(0,0,0,.45))}
.points-pill{gap:7px;padding-inline:9px 12px;overflow:visible}
.points-pill strong{font-size:15px;color:#fff5a8;text-shadow:0 1px 0 #000}

/* Imagen del logo de la portada en alta resolución, sin filtros que la suavicen */
.crisp-showcase{isolation:isolate}
.hero-logo.hero-logo-crisp{
  width:212px;height:212px;object-fit:contain;
  animation:none!important;
  filter:none!important;
  image-rendering:auto;
  backface-visibility:hidden;
  transform:translate3d(-50%,-50%,0);
  z-index:2;
}
.hero-cards .orbit-ring{z-index:1}
.hero-cards .hero-float{z-index:3}

/* Portada orientada a conversión */
.sales-hero{border-color:rgba(250,229,0,.3);background:
  radial-gradient(circle at 82% 14%,rgba(69,250,247,.12),transparent 25%),
  radial-gradient(circle at 20% 10%,rgba(250,229,0,.16),transparent 28%),
  linear-gradient(145deg,#211e0c 0%,#151408 48%,#090904 100%)}
.sales-hero .hero-copy{position:relative;z-index:4}
.sales-hero .hero-copy h1{max-width:520px;font-size:clamp(44px,7.3vw,74px);letter-spacing:-.025em}
.sales-hero .hero-copy p{font-size:16px;line-height:1.55;color:#d8d2b3;max-width:540px}
.btn-sales{padding:15px 19px;font-size:14px;box-shadow:0 14px 34px rgba(250,229,0,.22)}
.btn .material-symbols-outlined{vertical-align:middle;margin-right:5px;font-size:20px}
.sales-trust{margin-top:16px}

.quick-shop{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 6px}
.quick-shop-card{
  min-height:112px;padding:14px;text-align:left;border-radius:13px;
  color:#fff;border:1px solid rgba(250,229,0,.2);
  background:linear-gradient(145deg,rgba(250,229,0,.09),rgba(69,250,247,.035)),#151408;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);transition:.2s ease
}
.quick-shop-card:hover{transform:translateY(-2px);border-color:rgba(250,229,0,.4)}
.quick-shop-card span{display:block;color:var(--cyan);font:800 9px 'JetBrains Mono';text-transform:uppercase;letter-spacing:.14em}
.quick-shop-card strong{display:block;margin:7px 0 4px;color:var(--gold);font-family:'Anton',sans-serif;font-size:27px;font-weight:400;line-height:1}
.quick-shop-card small{display:block;color:#c9c3a5;font-size:11px;line-height:1.3}
.conversion-panel{margin-top:18px}
.conversion-panel .btn{min-width:190px}

.buy-steps{margin:34px 0 10px}
.buy-steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.buy-steps-grid article{position:relative;padding:17px;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:#151408;overflow:hidden}
.buy-steps-grid article::after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-34px;bottom:-36px;background:rgba(250,229,0,.055)}
.buy-steps-grid article>b{display:block;color:rgba(250,229,0,.24);font-family:'Anton',sans-serif;font-size:35px;font-weight:400;line-height:1}
.buy-steps-grid .material-symbols-outlined{display:block;color:var(--cyan);font-size:29px;margin:9px 0}
.buy-steps-grid h3{margin:0 0 6px;font-size:15px}.buy-steps-grid p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}

.coin-medallion{padding:0;background:transparent!important;box-shadow:none!important;overflow:visible}
.coin-medallion img{width:70px;height:70px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.48))}
.points-costs span{display:inline-flex;align-items:center;gap:5px}
.points-costs img{width:20px;height:20px;object-fit:contain}

/* El brillo decorativo no puede bloquear los botones de los sobres */
.pack-card::before{pointer-events:none!important;z-index:0}
.pack-card>*{position:relative;z-index:1}
.pack-card .pack-copy{min-width:0}
.pack-card .pack-redeem-btn{position:relative;z-index:5;pointer-events:auto;touch-action:manipulation;min-height:45px}
.pack-card .pack-art{pointer-events:none}
.cost{display:inline-flex;align-items:center;gap:7px;position:relative;z-index:2}
.cost span{white-space:nowrap}

/* El dialog mantiene una alternativa visible incluso cuando showModal no está disponible */
.modal[open]{display:block}

@media (max-width:640px){
  .quick-shop{grid-template-columns:1fr 1fr}
  .quick-shop-card:last-child{grid-column:1/-1}
  .buy-steps-grid{grid-template-columns:1fr}
  .hero-logo.hero-logo-crisp{width:188px;height:188px}
}
@media (max-width:460px){
  .sales-hero .hero-copy h1{font-size:44px}
  .quick-shop{grid-template-columns:1fr}
  .quick-shop-card:last-child{grid-column:auto}
  .hero-logo.hero-logo-crisp{width:172px;height:172px}
  .coin-icon-balance{width:51px;height:51px}
  .pack-card .pack-redeem-btn{width:100%}
}

/* =========================================================
   V6 · logo nítido + pocket coin nueva + apertura manual
   ========================================================= */
.hero-logo.hero-logo-crisp{
  width:236px;height:236px;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.42))!important;
  image-rendering:-webkit-optimize-contrast;
  transform:translate(-50%,-50%) scale(1) translateZ(0);
  opacity:1;
}
.hero-cards.crisp-showcase{perspective:1200px}
.hero-cards .hero-float{filter:drop-shadow(0 12px 16px rgba(0,0,0,.46))}

.coin-medallion{background:linear-gradient(135deg,#fbe170,#c4931f);box-shadow:0 12px 24px rgba(0,0,0,.28),0 0 0 3px rgba(255,255,255,.08) inset}
.coin-medallion img{width:70%;height:70%;object-fit:contain;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.28))}
.points-costs img{width:14px;height:14px;object-fit:contain;vertical-align:-2px;margin-right:5px}
.coin-icon-cost{width:16px;height:16px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.coin-icon-inline{width:18px;height:18px;vertical-align:-4px;margin-right:6px}
.pack-card .cost{display:flex;align-items:center;gap:8px}

.opening-manual .manual-open-shell{display:grid;place-items:center;margin-top:12px}
.opening-manual .manual-open-core{position:relative;width:min(92vw,420px);padding:20px 18px 24px;border:1px solid rgba(250,229,0,.22);border-radius:24px;background:radial-gradient(circle at 50% 0,rgba(250,229,0,.1),transparent 35%),linear-gradient(180deg,#18160d,#0b0a06);overflow:hidden;box-shadow:0 22px 46px rgba(0,0,0,.45)}
.swipe-instruction{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;color:#f3ebb3;font:800 11px 'JetBrains Mono';text-transform:uppercase;letter-spacing:.09em}
.swipe-track-label{font:700 10px 'JetBrains Mono';letter-spacing:.11em;text-transform:uppercase;color:var(--cyan);text-align:center;margin:8px 0 10px}
.swipe-zone{position:relative;width:min(80vw,320px);height:26px;margin:0 auto 8px;border-radius:999px;border:1px solid rgba(69,250,247,.35);background:rgba(69,250,247,.08);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.swipe-progress{position:absolute;inset:0 auto 0 0;width:0%;background:linear-gradient(90deg,rgba(69,250,247,.2),rgba(250,229,0,.42),rgba(253,144,0,.55));transition:width .05s linear}
.swipe-spark{position:absolute;left:0%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#fff 0%,#f9e870 30%,rgba(69,250,247,.94) 60%,transparent 75%);filter:blur(.2px);pointer-events:none}
.swipe-zone.tracking{box-shadow:0 0 0 2px rgba(69,250,247,.15),0 0 22px rgba(69,250,247,.16)}
.swipe-zone.done{border-color:rgba(250,229,0,.55)}
.manual-pack{display:block;width:min(58vw,240px);margin:10px auto 0;transform:scale(1);transition:transform .28s ease, filter .28s ease;filter:drop-shadow(0 14px 22px rgba(0,0,0,.42))}
.manual-pack.pack-cut{transform:scale(1.08) rotate(-2deg);filter:drop-shadow(0 18px 28px rgba(0,0,0,.5)) brightness(1.06)}
.manual-pack.pack-cut::after{content:''}
.reveal-stage .reveal-board{position:relative;min-height:430px;padding-top:160px}
.reveal-pack-bottom{position:absolute;left:50%;top:42px;transform:translateX(-50%);width:min(44vw,180px);opacity:.98;filter:drop-shadow(0 16px 30px rgba(0,0,0,.42))}
.reveal-lane{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:end}
.reveal-card.reveal-emerge{position:relative;transform:translateY(120px) scale(.75);opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s ease, box-shadow .2s ease;display:flex;flex-direction:column;gap:6px;padding:7px}
.reveal-card.reveal-emerge.shown{transform:translateY(0) scale(1);opacity:1}
.reveal-card .reveal-name{font:700 8px 'JetBrains Mono';letter-spacing:.06em;color:#d9d3b4;text-align:center;text-transform:uppercase;line-height:1.25}
.reveal-card.selected .reveal-name{color:var(--gold)}
.choice-copy{margin-top:12px;text-align:center;color:#efe8bf;font:700 10px 'JetBrains Mono';text-transform:uppercase;letter-spacing:.08em}
@media (max-width:640px){
  .hero-logo.hero-logo-crisp{width:206px;height:206px}
  .reveal-stage .reveal-board{min-height:520px;padding-top:150px}
  .reveal-lane{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .reveal-card.reveal-emerge.pos5{grid-column:1/-1;max-width:180px;justify-self:center}
}

/* =========================================================
   V7 · launcher sin caché + logo vectorial + swipe sobre el pack
   ========================================================= */
.hero-logo.hero-logo-crisp{
  width:250px;height:250px;
  object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.42))!important;
  transform:translate(-50%,-50%) translateZ(0)!important;
  animation:none!important;
}
.brand img{content:url('assets/logo-vector.svg');filter:drop-shadow(0 0 10px rgba(250,229,0,.25))}
.manual-pack-wrap{position:relative;width:min(78vw,300px);margin:8px auto 0}
.manual-pack{width:100%;max-width:none;margin:0 auto;display:block}
.swipe-track-label{
  position:absolute;left:50%;top:12%;transform:translateX(-50%);
  margin:0;z-index:4;color:#111;font-weight:900;text-shadow:0 1px 0 rgba(255,255,255,.6);
  white-space:nowrap;background:rgba(255,255,255,.76);padding:5px 9px;border-radius:999px;
}
.swipe-zone{
  position:absolute;left:8%;right:8%;top:21%;width:auto;margin:0;z-index:5;
  height:28px;background:rgba(8,18,31,.64);border-color:rgba(69,250,247,.68);
  backdrop-filter:blur(3px);
}
.manual-pack.pack-cut{animation:manualCut .55s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes manualCut{
  0%{transform:scale(1) rotate(0)}
  35%{transform:scale(1.07) rotate(-2deg)}
  70%{transform:scale(1.1) rotate(2deg);filter:drop-shadow(0 18px 28px rgba(0,0,0,.5)) brightness(1.12)}
  100%{transform:scale(1.02) translateY(8px);opacity:.82}
}
.reveal-card.reveal-emerge{transform:translateY(-150px) scale(.55) rotate(-4deg);opacity:0}
.reveal-card.reveal-emerge:nth-child(even){transform:translateY(-150px) scale(.55) rotate(4deg)}
.reveal-card.reveal-emerge.shown{transform:translateY(0) scale(1) rotate(0);opacity:1}
.version-proof{
  position:fixed;right:12px;top:82px;z-index:50;padding:6px 9px;border-radius:999px;
  background:#fae500;color:#171400;border:1px solid rgba(0,0,0,.18);
  font:900 9px 'JetBrains Mono';letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 8px 20px rgba(0,0,0,.28);
}
@media (max-width:640px){
  .hero-logo.hero-logo-crisp{width:220px;height:220px}
  .manual-pack-wrap{width:min(76vw,270px)}
}

/* =========================================================
   V8 · logo usuario + pocket coin referencia + apertura suave
   ========================================================= */
.brand img{
  content:normal!important;
  width:40px;height:40px;object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(250,229,0,.18))!important;
}
.hero-logo.hero-logo-crisp.hero-logo-user{
  width:232px;height:232px;object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.42)) drop-shadow(0 0 16px rgba(250,229,0,.18))!important;
  image-rendering:auto!important;
}
.hero-cards.crisp-showcase .orbit-ring{opacity:.82}
.hero-cards.crisp-showcase .hero-float{filter:drop-shadow(0 12px 18px rgba(0,0,0,.42))}

.coin-medallion img{width:58px;height:58px;object-fit:contain;display:block}
.coin-icon-top{width:22px;height:22px}
.coin-icon-cost{width:14px;height:14px}
.coin-icon-balance{width:42px;height:42px}
.coin-icon-inline{width:16px;height:16px}
.points-costs img{width:16px;height:16px}

.opening-manual .manual-open-core{
  width:min(92vw,420px);
  padding:18px 16px 22px;
  border-radius:26px;
  background:
    radial-gradient(circle at 50% -10%,rgba(69,250,247,.10),transparent 34%),
    radial-gradient(circle at 50% 0,rgba(250,229,0,.11),transparent 36%),
    linear-gradient(180deg,#151307,#090805);
  box-shadow:0 24px 48px rgba(0,0,0,.52);
}
.soft-pack-entry{opacity:0;transform:translateY(18px) scale(.95);transition:opacity .42s ease,transform .55s cubic-bezier(.22,.9,.25,1)}
.soft-pack-entry.ready{opacity:1;transform:translateY(0) scale(1)}
.manual-pack-scene{position:relative;display:grid;place-items:center;padding-top:34px;padding-bottom:10px}
.swipe-hint-pill{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  min-width:136px;padding:6px 18px;border-radius:999px;
  font:800 10px 'JetBrains Mono';letter-spacing:.12em;text-transform:uppercase;
  color:#635425;background:linear-gradient(180deg,#f2eee3,#bfc0ba);
  box-shadow:0 8px 16px rgba(0,0,0,.24);
  z-index:4;
}
.delicate-swipe{
  position:absolute;top:18px;left:50%;transform:translateX(-50%);
  width:min(80vw,292px);height:22px;border-radius:999px;
  border:1px solid rgba(33,224,255,.88);
  background:linear-gradient(180deg,rgba(0,20,35,.72),rgba(0,10,20,.4));
  overflow:hidden;z-index:3;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 18px rgba(33,224,255,.16);
}
.swipe-progress{
  background:linear-gradient(90deg,rgba(84,240,255,.16),rgba(84,240,255,.35),rgba(255,227,91,.48));
}
.swipe-spark{width:24px;height:24px;background:radial-gradient(circle,#fff 0%,#dffcff 22%,#70f7ff 52%,rgba(112,247,255,.12) 72%,transparent 76%);box-shadow:0 0 12px rgba(112,247,255,.45)}
.swipe-wind{
  position:absolute;inset:0;pointer-events:none;opacity:.82;
  background:
    linear-gradient(90deg,transparent 0%,rgba(162,251,255,.0) 18%,rgba(162,251,255,.45) 34%,rgba(255,255,255,.82) 49%,rgba(162,251,255,.45) 65%,transparent 82%),
    linear-gradient(90deg,transparent 0%,transparent 34%,rgba(162,251,255,.26) 46%,transparent 58%);
  mix-blend-mode:screen;
}
.manual-pack{
  display:block;width:min(58vw,218px);margin:18px auto 0;
  transform:translateY(10px) scale(.92);
  opacity:.98;
  transition:transform .38s cubic-bezier(.22,.9,.25,1), filter .38s ease, opacity .25s ease;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.46));
}
.soft-pack-entry.ready .manual-pack{transform:translateY(0) scale(1)}
.manual-pack.pack-cut{transform:translateY(0) scale(1.05) rotate(-1.35deg);filter:drop-shadow(0 20px 30px rgba(0,0,0,.58)) brightness(1.07)}
.cut-trail{
  position:absolute;left:50%;top:34px;transform:translateX(-50%);
  width:min(80vw,292px);height:12px;border-radius:999px;pointer-events:none;
  opacity:0;z-index:5;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent 0%,rgba(198,253,255,.0) 12%,rgba(198,253,255,.82) 42%,rgba(255,255,255,.98) 50%,rgba(255,235,130,.92) 58%,rgba(198,253,255,.0) 88%,transparent 100%);
  filter:blur(.4px) drop-shadow(0 0 10px rgba(102,243,255,.34));
}
.cut-trail.active{opacity:1;animation:windCut .72s ease forwards}
@keyframes windCut{0%{transform:translateX(-50%) translateX(-38px);opacity:0}20%{opacity:.95}100%{transform:translateX(-50%) translateX(38px);opacity:0}}

.reveal-stage .reveal-board{padding-top:146px;min-height:446px}
.reveal-pack-bottom{top:38px;width:min(42vw,170px);opacity:.96;filter:drop-shadow(0 16px 28px rgba(0,0,0,.48))}
.reveal-lane{gap:10px}
.reveal-card.reveal-emerge{
  transform:translateY(132px) scale(.68);
  opacity:0;
  transition:transform .62s cubic-bezier(.18,.8,.2,1),opacity .38s ease,box-shadow .2s ease;
}
.reveal-card.reveal-emerge.shown{transform:translateY(0) scale(1);opacity:1}
.reveal-card img{border-radius:10px}
.choice-copy{margin-top:14px;color:#f4edc5}

@media (max-width:640px){
  .hero-logo.hero-logo-crisp.hero-logo-user{width:204px;height:204px}
  .manual-pack{width:min(62vw,212px)}
  .delicate-swipe,.cut-trail{width:min(82vw,276px)}
}
@media (max-width:460px){
  .hero-logo.hero-logo-crisp.hero-logo-user{width:184px;height:184px}
  .swipe-hint-pill{font-size:9px;padding:6px 16px;min-width:124px}
  .manual-pack-scene{padding-top:30px}
  .delicate-swipe{top:16px;height:20px}
}


/* V9 marcador visual para confirmar que cambió */
.topbar{border-bottom:1px solid rgba(69,250,247,.22)}
.brand span b{color:var(--cyan)!important}
.hero-copy .eyebrow{color:var(--cyan)!important;text-shadow:0 0 12px rgba(69,250,247,.25)}

/* ======================= V10 premium pack opening ======================= */
.hero-logo.hero-logo-crisp.hero-logo-user{
  width:248px;height:248px;object-fit:contain;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(250,229,0,.18)) !important;
}
.brand img{width:42px;height:42px;object-fit:contain}

.premium-opening .opening-sub,
.premium-reveal-stage .opening-sub{max-width:46ch;margin-inline:auto}
.premium-pack-scene{padding-top:42px;padding-bottom:22px}
.wind-pill{background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(229,232,234,.78));color:#475156;backdrop-filter:blur(8px);box-shadow:0 10px 24px rgba(0,0,0,.28)}
.delicate-swipe{top:22px;height:24px;border-color:rgba(74,232,255,.92);box-shadow:0 0 0 1px rgba(255,255,255,.05) inset, 0 0 24px rgba(74,232,255,.18)}
.swipe-wind{background:
 linear-gradient(90deg,transparent 0%,rgba(147,248,255,.0) 16%,rgba(147,248,255,.35) 28%,rgba(255,255,255,.95) 49%,rgba(147,248,255,.35) 70%,transparent 84%),
 linear-gradient(90deg,transparent 18%,rgba(255,255,255,.18) 40%,transparent 66%),
 linear-gradient(90deg,transparent 28%,rgba(147,248,255,.16) 48%,transparent 72%)}

.manual-pack-rig{position:relative;width:min(72vw,240px);margin:22px auto 0;perspective:1100px;min-height:336px}
.manual-pack-layer{display:block;width:100%;height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.5))}
.pack-tear-top,.pack-tear-bottom{position:absolute;left:0;width:100%;overflow:hidden;transition:transform .7s cubic-bezier(.2,.85,.18,1),opacity .45s ease,filter .55s ease}
.pack-tear-top{top:0;height:22%;transform-origin:left center;z-index:3}
.pack-tear-top .manual-pack-layer{transform:translateY(0)}
.pack-tear-bottom{top:0;height:100%;z-index:2}
.pack-tear-bottom .manual-pack-layer{transform:translateY(0)}
.pack-tear-bottom::after{content:'';position:absolute;left:0;right:0;top:19%;height:8px;background:radial-gradient(circle at 8px 4px, rgba(255,255,255,.65) 0 1px, transparent 1.5px) 0 0/18px 8px repeat-x, linear-gradient(90deg,rgba(255,255,255,.2),rgba(255,235,160,.8),rgba(255,255,255,.2));opacity:0;filter:blur(.35px);transition:opacity .35s ease}
.manual-pack-rig.ripped .pack-tear-top{transform:translate(42px,-26px) rotate(10deg);opacity:.94;filter:brightness(1.08)}
.manual-pack-rig.ripped .pack-tear-bottom{transform:translateY(10px) scale(1.015)}
.manual-pack-rig.ripped .pack-tear-bottom::after{opacity:1}
.cut-trail{top:40px;width:100%;left:0;transform:none;height:14px;background:linear-gradient(90deg,transparent 0%,rgba(189,251,255,.0) 10%,rgba(189,251,255,.82) 40%,rgba(255,255,255,1) 50%,rgba(255,237,154,.92) 60%,rgba(189,251,255,.0) 90%,transparent 100%)}
.cut-trail.active{animation:premiumCut .82s ease forwards}
@keyframes premiumCut{0%{transform:translateX(-36px);opacity:0}15%{opacity:1}100%{transform:translateX(36px);opacity:0}}

.premium-reveal-board{position:relative;min-height:520px;padding-top:116px;display:flex;align-items:flex-end;justify-content:center}
.pack-mouth-glow{position:absolute;left:50%;top:214px;transform:translateX(-50%);width:180px;height:86px;border-radius:50%;background:radial-gradient(circle, rgba(255,224,84,.3), rgba(74,232,255,.16) 40%, transparent 72%);filter:blur(12px);z-index:1}
.premium-pack-bottom{position:absolute;left:50%;top:230px;transform:translateX(-50%);width:160px;z-index:2;filter:drop-shadow(0 18px 26px rgba(0,0,0,.44))}
.premium-reveal-lane{position:absolute;inset:0;display:block;z-index:3;perspective:1300px}
.premium-card{position:absolute;left:50%;top:250px;width:132px;height:188px;padding:8px 8px 12px;background:linear-gradient(180deg,#19160d,#0c0a05);border:1px solid rgba(250,229,0,.22);border-radius:18px;overflow:visible;box-shadow:0 18px 36px rgba(0,0,0,.48)}
.premium-card img{width:100%;height:144px;object-fit:cover;border-radius:10px;display:block}
.premium-card-glow{position:absolute;inset:-2px;border-radius:20px;background:radial-gradient(circle at 50% 0, rgba(250,229,0,.18), transparent 42%), linear-gradient(180deg, rgba(74,232,255,.14), rgba(250,229,0,.08));z-index:-1;opacity:.8}
.reveal-card .reveal-name{display:block;font:800 9px 'JetBrains Mono';letter-spacing:.07em;color:#efe8bc;text-align:center;text-transform:uppercase;line-height:1.15;margin-top:7px}
.reveal-rarity{display:block;font:700 8px 'JetBrains Mono';letter-spacing:.06em;color:#7eefff;text-align:center;text-transform:uppercase;margin-top:3px}
.premium-card.pose-left{margin-left:-200px}
.premium-card.pose-left-mid{margin-left:-104px}
.premium-card.pose-center{margin-left:-66px;z-index:5}
.premium-card.pose-right-mid{margin-left:0}
.premium-card.pose-right{margin-left:102px}
.reveal-card.reveal-emerge.premium-card{transform:translate(-50%,-30px) scale(.42) rotateY(22deg) translateZ(-120px);opacity:0;filter:blur(1px)}
.reveal-card.reveal-emerge.premium-card.shown{opacity:1;filter:blur(0);transition:transform .75s cubic-bezier(.18,.85,.2,1),opacity .42s ease,filter .42s ease,box-shadow .25s ease}
.reveal-card.reveal-emerge.premium-card.pose-left.shown{transform:translate(calc(-50% - 200px),66px) rotate(-17deg)}
.reveal-card.reveal-emerge.premium-card.pose-left-mid.shown{transform:translate(calc(-50% - 102px),28px) rotate(-8deg)}
.reveal-card.reveal-emerge.premium-card.pose-center.shown{transform:translate(-50%,-2px) scale(1.03)}
.reveal-card.reveal-emerge.premium-card.pose-right-mid.shown{transform:translate(calc(-50% + 0px),28px) rotate(8deg)}
.reveal-card.reveal-emerge.premium-card.pose-right.shown{transform:translate(calc(-50% + 102px),66px) rotate(17deg)}
.reveal-card.selected.premium-card{outline:none;box-shadow:0 0 0 2px rgba(250,229,0,.9),0 0 0 8px rgba(250,229,0,.12),0 30px 52px rgba(0,0,0,.55),0 0 26px rgba(250,229,0,.3)}
.reveal-card.selected.premium-card::after{content:'SELECCIONADA';position:absolute;top:-12px;left:50%;transform:translateX(-50%);padding:5px 10px;border-radius:999px;background:linear-gradient(90deg,var(--gold),#fff196);color:#2a250e;font:900 8px 'JetBrains Mono';letter-spacing:.12em}
.premium-choice-copy{margin-top:18px;padding:14px 16px;border:1px solid rgba(250,229,0,.18);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));min-width:min(92vw,360px);text-align:center}
.choice-kicker{display:block;font:800 10px 'JetBrains Mono';letter-spacing:.14em;color:#7eefff;text-transform:uppercase;margin-bottom:6px}
.premium-choice-copy strong{display:block;font:900 clamp(18px,3vw,24px)/1 'Bebas Neue';letter-spacing:.04em;color:#fff6c4}
.premium-choice-copy small{display:block;margin-top:4px;color:#c9c19f}
.premium-actions .premium-claim{box-shadow:0 12px 26px rgba(250,229,0,.22)}
.premium-claim:disabled{opacity:.45;box-shadow:none}

.premium-claim-stage .premium-claim-card-wrap{position:relative;display:grid;place-items:center;margin:12px auto 10px;width:min(72vw,240px)}
.premium-claim-halo{position:absolute;inset:20px;border-radius:30px;background:radial-gradient(circle, rgba(250,229,0,.28), rgba(74,232,255,.16) 38%, transparent 70%);filter:blur(18px)}
.premium-big-reward{position:relative;border-radius:20px;box-shadow:0 28px 52px rgba(0,0,0,.5),0 0 30px rgba(250,229,0,.18)}

@media (max-width:640px){
  .hero-logo.hero-logo-crisp.hero-logo-user{width:214px;height:214px}
  .manual-pack-rig{width:min(74vw,220px);min-height:306px}
  .premium-reveal-board{min-height:500px;padding-top:110px}
  .premium-pack-bottom{width:150px;top:228px}
  .premium-card{width:118px;height:172px;top:244px}
  .premium-card img{height:128px}
  .premium-card.pose-left{margin-left:-160px}
  .premium-card.pose-left-mid{margin-left:-84px}
  .premium-card.pose-center{margin-left:-59px}
  .premium-card.pose-right{margin-left:84px}
  .reveal-card.reveal-emerge.premium-card.pose-left.shown{transform:translate(calc(-50% - 160px),74px) rotate(-15deg)}
  .reveal-card.reveal-emerge.premium-card.pose-left-mid.shown{transform:translate(calc(-50% - 84px),34px) rotate(-8deg)}
  .reveal-card.reveal-emerge.premium-card.pose-right.shown{transform:translate(calc(-50% + 84px),74px) rotate(15deg)}
}
@media (max-width:480px){
  .hero-logo.hero-logo-crisp.hero-logo-user{width:190px;height:190px}
  .manual-pack-rig{width:min(80vw,212px);min-height:296px}
  .pack-tear-top{height:21%}
  .premium-reveal-board{min-height:540px}
  .premium-pack-bottom{width:144px;top:246px}
  .premium-card{width:102px;height:152px;top:252px;padding:7px 7px 10px}
  .premium-card img{height:111px}
  .reveal-card .reveal-name{font-size:8px}
  .reveal-rarity{font-size:7px}
  .premium-card.pose-left{margin-left:-132px}
  .premium-card.pose-left-mid{margin-left:-68px}
  .premium-card.pose-center{margin-left:-51px}
  .premium-card.pose-right-mid{margin-left:0}
  .premium-card.pose-right{margin-left:68px}
  .reveal-card.reveal-emerge.premium-card.pose-left.shown{transform:translate(calc(-50% - 132px),92px) rotate(-13deg)}
  .reveal-card.reveal-emerge.premium-card.pose-left-mid.shown{transform:translate(calc(-50% - 68px),48px) rotate(-7deg)}
  .reveal-card.reveal-emerge.premium-card.pose-center.shown{transform:translate(-50%,10px) scale(1.02)}
  .reveal-card.reveal-emerge.premium-card.pose-right-mid.shown{transform:translate(calc(-50% + 0px),48px) rotate(7deg)}
  .reveal-card.reveal-emerge.premium-card.pose-right.shown{transform:translate(calc(-50% + 68px),92px) rotate(13deg)}
}




/* ======================= V13 opening fixes ======================= */
.over-pack-swipe{
  position:absolute;
  left:50%;
  top:84px;
  transform:translateX(-50%);
  width:min(72%,164px);
  height:28px;
  z-index:7;
  background:transparent;
  border:none;
  box-shadow:none;
  opacity:0; /* zona táctil invisible */
}
.over-pack-swipe::before{display:none}
.delicate-swipe .swipe-progress,
.delicate-swipe .swipe-spark,
.delicate-swipe .swipe-wind{display:none !important}
.manual-pack-rig{margin-top:10px; padding-top:22px}
.pack-tear-top{top:28px}
.pack-tear-bottom{top:28px}
.pack-tear-bottom::after{top:18%; opacity:0}
.cut-trail{
  top:86px;
  left:50%;
  width:min(72%,164px);
  height:4px;
  transform:translateX(-50%);
  z-index:8;
  background:linear-gradient(90deg, rgba(86,224,255,0) 0%, rgba(86,224,255,.24) 18%, rgba(255,255,255,.98) 50%, rgba(255,236,135,.9) 66%, rgba(86,224,255,.22) 82%, rgba(86,224,255,0) 100%);
  box-shadow:0 0 10px rgba(86,224,255,.35), 0 0 18px rgba(86,224,255,.18);
  border-radius:999px;
}
.manual-pack-rig.ripped .pack-tear-top{transform:translate(42px,-12px) rotate(10deg)}
.manual-pack-rig.ripped .pack-tear-bottom::after{opacity:1}

.premium-reveal-board{
  position:relative;
  min-height:640px;
  padding-top:8px;
  margin-top:6px;
}
.pack-mouth-glow{top:96px; width:184px; height:84px; z-index:1}
.premium-pack-bottom{position:absolute; left:50%; transform:translateX(-50%); top:108px; width:148px; z-index:2}
.premium-reveal-lane{position:absolute; inset:0; overflow:visible; z-index:4; pointer-events:none}
.premium-card{position:absolute; left:50%; top:132px; width:104px; height:152px; padding:6px 6px 10px; z-index:4; pointer-events:auto}
.premium-card img{height:112px}
.premium-card.pose-left{margin-left:-122px}
.premium-card.pose-left-mid{margin-left:-62px}
.premium-card.pose-center{margin-left:-52px; z-index:5}
.premium-card.pose-right-mid{margin-left:2px}
.premium-card.pose-right{margin-left:62px}
.reveal-card.reveal-emerge.premium-card{transform:translate(-50%,-38px) scale(.38) rotateY(22deg) translateZ(-120px);opacity:0;filter:blur(1.2px)}
.reveal-card.reveal-emerge.premium-card.shown{opacity:1;filter:blur(0);transition:transform .82s cubic-bezier(.18,.85,.2,1),opacity .42s ease,filter .42s ease,box-shadow .25s ease}
.reveal-card.reveal-emerge.premium-card.pose-left.shown{transform:translate(calc(-50% - 122px),16px) rotate(-13deg)}
.reveal-card.reveal-emerge.premium-card.pose-left-mid.shown{transform:translate(calc(-50% - 62px),-4px) rotate(-7deg)}
.reveal-card.reveal-emerge.premium-card.pose-center.shown{transform:translate(-50%,-18px) scale(1.03)}
.reveal-card.reveal-emerge.premium-card.pose-right-mid.shown{transform:translate(calc(-50% + 2px),-4px) rotate(7deg)}
.reveal-card.reveal-emerge.premium-card.pose-right.shown{transform:translate(calc(-50% + 62px),16px) rotate(13deg)}
.premium-choice-copy{margin-top:12px; min-width:min(92vw,390px)}
.premium-actions{margin-top:12px}

@media (max-width:640px){
  .over-pack-swipe{top:76px; width:min(70%,152px); height:26px}
  .manual-pack-rig{width:min(70vw,208px); min-height:294px; padding-top:20px}
  .pack-tear-top{top:24px}
  .pack-tear-bottom{top:24px}
  .cut-trail{top:78px; width:min(70%,152px)}
  .premium-reveal-board{min-height:580px}
  .pack-mouth-glow{top:88px; width:172px; height:78px}
  .premium-pack-bottom{top:100px; width:138px}
  .premium-card{top:124px; width:96px; height:142px; padding:6px 6px 8px}
  .premium-card img{height:104px}
  .premium-card.pose-left{margin-left:-108px}
  .premium-card.pose-left-mid{margin-left:-54px}
  .premium-card.pose-center{margin-left:-48px}
  .premium-card.pose-right-mid{margin-left:0}
  .premium-card.pose-right{margin-left:54px}
  .reveal-card.reveal-emerge.premium-card.pose-left.shown{transform:translate(calc(-50% - 108px),14px) rotate(-12deg)}
  .reveal-card.reveal-emerge.premium-card.pose-left-mid.shown{transform:translate(calc(-50% - 54px),-4px) rotate(-6deg)}
  .reveal-card.reveal-emerge.premium-card.pose-center.shown{transform:translate(-50%,-16px) scale(1.02)}
  .reveal-card.reveal-emerge.premium-card.pose-right-mid.shown{transform:translate(calc(-50% + 0px),-4px) rotate(6deg)}
  .reveal-card.reveal-emerge.premium-card.pose-right.shown{transform:translate(calc(-50% + 54px),14px) rotate(12deg)}
}
@media (max-width:480px){
  .premium-opening h1, .premium-reveal-stage h1{font-size:clamp(56px,11vw,74px); line-height:.88}
  .over-pack-swipe{top:70px; width:min(68%,138px); height:24px}
  .manual-pack-rig{width:min(67vw,186px); min-height:262px; padding-top:18px}
  .pack-tear-top{top:22px}
  .pack-tear-bottom{top:22px}
  .cut-trail{top:72px; width:min(68%,138px); height:4px}
  .premium-reveal-board{min-height:540px}
  .pack-mouth-glow{top:78px; width:156px; height:70px}
  .premium-pack-bottom{top:92px; width:126px}
  .premium-card{top:114px; width:88px; height:132px; padding:5px 5px 8px}
  .premium-card img{height:96px}
  .reveal-card .reveal-name{font-size:7px}
  .reveal-rarity{font-size:6px}
  .premium-card.pose-left{margin-left:-96px}
  .premium-card.pose-left-mid{margin-left:-48px}
  .premium-card.pose-center{margin-left:-44px}
  .premium-card.pose-right-mid{margin-left:0}
  .premium-card.pose-right{margin-left:48px}
  .reveal-card.reveal-emerge.premium-card.pose-left.shown{transform:translate(calc(-50% - 96px),10px) rotate(-11deg)}
  .reveal-card.reveal-emerge.premium-card.pose-left-mid.shown{transform:translate(calc(-50% - 48px),-6px) rotate(-5deg)}
  .reveal-card.reveal-emerge.premium-card.pose-center.shown{transform:translate(-50%,-18px) scale(1.02)}
  .reveal-card.reveal-emerge.premium-card.pose-right-mid.shown{transform:translate(calc(-50% + 0px),-6px) rotate(5deg)}
  .reveal-card.reveal-emerge.premium-card.pose-right.shown{transform:translate(calc(-50% + 48px),10px) rotate(11deg)}
  .premium-choice-copy{margin-top:8px}
}

/* ======================= V14 premium opening refinement ======================= */
.manual-pack-rig{
  margin-top:14px;
  padding-top:28px;
  width:min(72vw,228px);
  min-height:318px;
}
.pack-tear-top,
.pack-tear-bottom{
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.42));
}
.pack-tear-top{
  top:34px;
  height:23.5%;
  clip-path:polygon(0 0,100% 0,100% 66%,95% 74%,90% 69%,84% 79%,76% 70%,69% 82%,60% 70%,52% 83%,44% 71%,35% 84%,26% 70%,18% 81%,10% 70%,5% 76%,0 68%);
  z-index:5;
}
.pack-tear-bottom{
  top:34px;
  height:100%;
  clip-path:polygon(0 18.5%,4% 14.5%,10% 19.5%,18% 12.8%,26% 20%,34% 11.2%,44% 21.5%,52% 12%,60% 21%,69% 11%,76% 19.5%,84% 12.5%,90% 18.5%,96% 13.5%,100% 18%,100% 100%,0 100%);
}
.pack-tear-top::after,
.pack-tear-bottom::before{
  content:'';
  position:absolute;
  left:6%; right:6%;
  height:10px;
  background:radial-gradient(circle at 6px 5px, rgba(255,255,255,.55) 0 1.4px, transparent 1.7px) 0 0/18px 10px repeat-x;
  filter:blur(.2px);
  opacity:.0;
  transition:opacity .24s ease;
}
.pack-tear-top::after{bottom:-1px; transform:scaleY(.95)}
.pack-tear-bottom::before{top:-1px; transform:scaleY(-1)}
.manual-pack-rig.ripped .pack-tear-top{
  transform:translate(52px,-18px) rotate(12deg);
  opacity:.98;
}
.manual-pack-rig.ripped .pack-tear-bottom{
  transform:translateY(12px) scale(1.018);
}
.manual-pack-rig.ripped .pack-tear-top::after,
.manual-pack-rig.ripped .pack-tear-bottom::before{
  opacity:.7;
}
.over-pack-swipe{
  top:96px;
  width:min(66%,150px);
  height:22px;
}
.cut-trail{
  top:100px;
  width:min(66%,150px);
  height:3px;
  background:linear-gradient(90deg, rgba(86,224,255,0) 0%, rgba(86,224,255,.18) 16%, rgba(255,255,255,1) 50%, rgba(255,236,135,.92) 65%, rgba(86,224,255,.16) 84%, rgba(86,224,255,0) 100%);
  box-shadow:0 0 8px rgba(86,224,255,.28),0 0 14px rgba(86,224,255,.12);
}

.premium-reveal-board{
  position:relative;
  min-height:820px;
  padding-top:0;
  margin-top:12px;
}
.pack-mouth-glow{
  top:126px;
  width:210px;
  height:106px;
  z-index:2;
  background:radial-gradient(circle, rgba(255,224,84,.28), rgba(74,232,255,.12) 38%, transparent 74%);
}
.premium-pack-bottom{
  top:154px;
  width:156px;
  z-index:3;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.46));
}
.premium-reveal-lane{
  position:absolute;
  inset:0;
  overflow:visible;
  z-index:6;
  pointer-events:auto;
}
.premium-reveal-lane::before{
  content:'';
  position:absolute;
  left:50%; top:160px;
  width:150px; height:90px;
  transform:translateX(-50%);
  background:radial-gradient(circle at 50% 30%, rgba(255,255,255,.22), rgba(74,232,255,.12) 35%, transparent 75%);
  filter:blur(10px);
  opacity:.8;
}
.premium-card{
  top:168px;
  width:108px;
  height:156px;
  padding:6px 6px 10px;
  z-index:6;
  border:1px solid rgba(250,229,0,.18);
  background:linear-gradient(180deg, rgba(24,20,12,.98), rgba(9,8,5,.98));
  box-shadow:0 20px 38px rgba(0,0,0,.44);
}
.premium-card img{height:112px}
.premium-card.pose-left{margin-left:-128px}
.premium-card.pose-left-mid{margin-left:-64px}
.premium-card.pose-center{margin-left:-54px; z-index:7}
.premium-card.pose-right-mid{margin-left:0}
.premium-card.pose-right{margin-left:64px}
.reveal-card.reveal-emerge.premium-card{
  transform:translate(-50%,42px) scale(.18) rotateY(18deg);
  opacity:0;
  filter:blur(1.4px) brightness(.9);
}
.reveal-card.reveal-emerge.premium-card.shown{
  opacity:1;
  filter:blur(0) brightness(1);
  transition:transform .9s cubic-bezier(.18,.86,.16,1), opacity .35s ease, filter .35s ease, box-shadow .2s ease;
}
.reveal-card.reveal-emerge.premium-card.pose-left.shown{transform:translate(calc(-50% - 128px),62px) rotate(-13deg)}
.reveal-card.reveal-emerge.premium-card.pose-left-mid.shown{transform:translate(calc(-50% - 64px),120px) rotate(-8deg)}
.reveal-card.reveal-emerge.premium-card.pose-center.shown{transform:translate(-50%,166px) scale(1.05)}
.reveal-card.reveal-emerge.premium-card.pose-right-mid.shown{transform:translate(calc(-50% + 0px),120px) rotate(8deg)}
.reveal-card.reveal-emerge.premium-card.pose-right.shown{transform:translate(calc(-50% + 64px),62px) rotate(13deg)}
.premium-reveal-lane.has-selection .reveal-card:not(.selected){opacity:.54; filter:saturate(.78) brightness(.9)}
.reveal-card.selected.premium-card{
  transform:translate(-50%,148px) scale(1.12) !important;
  z-index:12 !important;
  box-shadow:0 0 0 2px rgba(250,229,0,.95), 0 0 0 10px rgba(250,229,0,.12), 0 34px 60px rgba(0,0,0,.55), 0 0 28px rgba(250,229,0,.36);
}
.reveal-card.selected.premium-card::after{
  content:'PREMIO';
  position:absolute;
  top:-12px; left:50%; transform:translateX(-50%);
  padding:5px 10px; border-radius:999px;
  background:linear-gradient(90deg,var(--gold),#fff1a0);
  color:#2b250b; font:900 8px 'JetBrains Mono'; letter-spacing:.14em;
}
.premium-choice-copy{
  position:relative;
  z-index:2;
  min-width:min(92vw,390px);
  margin-top:-8px;
  padding:16px 16px 14px;
  backdrop-filter:blur(8px);
}
.premium-choice-copy.selected{
  border-color:rgba(250,229,0,.42);
  box-shadow:0 14px 28px rgba(0,0,0,.22), 0 0 22px rgba(250,229,0,.12);
}
.premium-actions{margin-top:14px}
.premium-claim{min-width:190px}

@media (max-width:640px){
  .manual-pack-rig{width:min(70vw,206px); min-height:292px; padding-top:24px}
  .pack-tear-top, .pack-tear-bottom{top:30px}
  .over-pack-swipe{top:88px; width:min(64%,136px); height:20px}
  .cut-trail{top:92px; width:min(64%,136px)}
  .premium-reveal-board{min-height:760px}
  .pack-mouth-glow{top:116px; width:196px; height:98px}
  .premium-pack-bottom{top:144px; width:146px}
  .premium-card{top:160px; width:100px; height:148px}
  .premium-card img{height:104px}
  .premium-card.pose-left{margin-left:-118px}
  .premium-card.pose-left-mid{margin-left:-58px}
  .premium-card.pose-center{margin-left:-50px}
  .premium-card.pose-right{margin-left:58px}
  .reveal-card.reveal-emerge.premium-card.pose-left.shown{transform:translate(calc(-50% - 118px),62px) rotate(-12deg)}
  .reveal-card.reveal-emerge.premium-card.pose-left-mid.shown{transform:translate(calc(-50% - 58px),116px) rotate(-7deg)}
  .reveal-card.reveal-emerge.premium-card.pose-center.shown{transform:translate(-50%,160px) scale(1.04)}
  .reveal-card.reveal-emerge.premium-card.pose-right-mid.shown{transform:translate(calc(-50% + 0px),116px) rotate(7deg)}
  .reveal-card.reveal-emerge.premium-card.pose-right.shown{transform:translate(calc(-50% + 58px),62px) rotate(12deg)}
  .reveal-card.selected.premium-card{transform:translate(-50%,142px) scale(1.1) !important}
}
@media (max-width:480px){
  .manual-pack-rig{width:min(66vw,182px); min-height:256px; padding-top:20px}
  .pack-tear-top, .pack-tear-bottom{top:26px}
  .over-pack-swipe{top:77px; width:min(60%,118px); height:18px}
  .cut-trail{top:81px; width:min(60%,118px)}
  .premium-reveal-board{min-height:720px}
  .pack-mouth-glow{top:98px; width:168px; height:84px}
  .premium-pack-bottom{top:124px; width:128px}
  .premium-card{top:138px; width:86px; height:130px; padding:5px 5px 8px}
  .premium-card img{height:92px}
  .reveal-card .reveal-name{font-size:7px}
  .reveal-rarity{font-size:6px}
  .premium-card.pose-left{margin-left:-100px}
  .premium-card.pose-left-mid{margin-left:-50px}
  .premium-card.pose-center{margin-left:-43px}
  .premium-card.pose-right-mid{margin-left:0}
  .premium-card.pose-right{margin-left:50px}
  .reveal-card.reveal-emerge.premium-card.pose-left.shown{transform:translate(calc(-50% - 100px),56px) rotate(-11deg)}
  .reveal-card.reveal-emerge.premium-card.pose-left-mid.shown{transform:translate(calc(-50% - 50px),106px) rotate(-6deg)}
  .reveal-card.reveal-emerge.premium-card.pose-center.shown{transform:translate(-50%,148px) scale(1.03)}
  .reveal-card.reveal-emerge.premium-card.pose-right-mid.shown{transform:translate(calc(-50% + 0px),106px) rotate(6deg)}
  .reveal-card.reveal-emerge.premium-card.pose-right.shown{transform:translate(calc(-50% + 50px),56px) rotate(11deg)}
  .reveal-card.selected.premium-card{transform:translate(-50%,136px) scale(1.08) !important}
  .premium-choice-copy{margin-top:-20px}
}

/* ======================= V15 opening polish ======================= */
.over-pack-swipe{
  top:108px !important;
  width:min(74%,176px) !important;
  height:42px !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  z-index:8;
}
.over-pack-swipe::before,
.swipe-wind,
.swipe-progress,
.swipe-spark{
  display:none !important;
}
.cut-trail{
  --trail-progress:0;
  top:126px !important;
  width:min(74%,176px) !important;
  height:4px !important;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(88,233,255,.10) 0%, rgba(255,255,255,.95) 52%, rgba(255,232,122,.92) 100%) !important;
  box-shadow:0 0 8px rgba(80,228,255,.32),0 0 22px rgba(80,228,255,.16) !important;
  transform:none !important;
  left:50% !important;
  margin-left:calc(-1 * min(74%,176px) / 2);
  opacity:1 !important;
  overflow:hidden;
  z-index:7;
}
.cut-trail::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 30%, rgba(255,255,255,.95) 50%, rgba(255,245,173,.4) 62%, transparent 100%);
  transform:translateX(calc((var(--trail-progress, 0) - 1) * 100%));
  transition:transform .06s linear;
}
.cut-trail.idle::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.12) 24%, rgba(255,255,255,.9) 50%, rgba(255,245,173,.24) 70%, transparent 100%);
  animation:idleCutSweep 1.5s ease-in-out infinite;
}
.cut-trail.active{animation:premiumCutFlash .52s ease forwards}
@keyframes idleCutSweep{
  0%{transform:translateX(-100%); opacity:.15}
  25%{opacity:.8}
  100%{transform:translateX(100%); opacity:.1}
}
@keyframes premiumCutFlash{
  0%{filter:brightness(1)}
  35%{filter:brightness(1.45)}
  100%{filter:brightness(.95); opacity:0}
}
.manual-pack-rig{
  padding-top:18px !important;
  min-height:304px !important;
}
.pack-tear-top,
.pack-tear-bottom{
  top:48px !important;
}
.pack-tear-top{
  height:22% !important;
  clip-path:polygon(0 0,100% 0,100% 62%,96% 69%,92% 64%,86% 74%,78% 65%,71% 78%,63% 65%,55% 79%,48% 66%,40% 80%,31% 67%,23% 77%,15% 65%,8% 73%,0 66%) !important;
}
.pack-tear-bottom{
  clip-path:polygon(0 17.2%,8% 13.6%,15% 19.2%,23% 11.6%,31% 21%,40% 12%,48% 20.6%,55% 11.4%,63% 20.2%,71% 12.2%,78% 19.4%,86% 13.5%,92% 18.6%,96% 14.8%,100% 17%,100% 100%,0 100%) !important;
}
.manual-pack-rig.ripped .pack-tear-top{
  transform:translate(38px,-12px) rotate(13deg) !important;
}
.manual-pack-rig.ripped .pack-tear-bottom{
  transform:translateY(14px) scale(1.02) !important;
}

.premium-reveal-board{
  position:relative;
  min-height:560px !important;
  max-width:560px;
  margin:8px auto 0;
  overflow:visible;
}
.pack-mouth-glow{
  top:126px !important;
  width:230px !important;
  height:120px !important;
  opacity:.92;
}
.premium-pack-bottom{
  top:144px !important;
  width:150px !important;
  left:50%;
  transform:translateX(-50%);
  z-index:4 !important;
}
.premium-reveal-lane{
  position:absolute;
  inset:0;
  overflow:visible;
  z-index:10;
}
.premium-card{
  position:absolute !important;
  left:50% !important;
  top:0 !important;
  width:110px !important;
  height:158px !important;
  padding:6px 6px 10px !important;
  background:linear-gradient(180deg, rgba(24,20,12,.99), rgba(9,8,5,.99)) !important;
  border:1px solid rgba(250,229,0,.18) !important;
  box-shadow:0 22px 38px rgba(0,0,0,.44) !important;
  z-index:var(--card-z,8);
}
.premium-card img{height:114px !important; object-fit:cover}
.reveal-card.reveal-emerge.premium-card{
  transform:translate(-50%,210px) scale(.16) rotateY(18deg) !important;
  transform-origin:50% 100%;
  opacity:0;
  filter:blur(1.6px) brightness(.82);
}
.reveal-card.reveal-emerge.premium-card.shown{
  transform:translate(calc(-50% + var(--card-x)), var(--card-y)) rotate(var(--card-r)) scale(1) !important;
  opacity:1;
  filter:blur(0) brightness(1);
  transition:transform .88s cubic-bezier(.16,.9,.18,1), opacity .32s ease, filter .32s ease, box-shadow .25s ease;
}
.premium-reveal-lane.has-selection .reveal-card:not(.selected){opacity:.42; filter:saturate(.72) brightness(.84)}
.reveal-card.selected.premium-card{
  transform:translate(-50%,252px) scale(1.12) !important;
  z-index:20 !important;
  box-shadow:0 0 0 2px rgba(250,229,0,.95), 0 0 0 10px rgba(250,229,0,.13), 0 36px 68px rgba(0,0,0,.58), 0 0 38px rgba(250,229,0,.34) !important;
}
.reveal-card.selected.premium-card::after{
  content:'PREMIO';
  position:absolute;
  top:-12px; left:50%; transform:translateX(-50%);
  padding:5px 10px; border-radius:999px;
  background:linear-gradient(90deg,var(--gold),#fff4ab);
  color:#2b250b; font:900 8px 'JetBrains Mono'; letter-spacing:.14em;
}
.premium-choice-copy{
  position:relative;
  z-index:2;
  max-width:420px;
  margin:-6px auto 0 !important;
  backdrop-filter:blur(8px);
}
.premium-actions{margin-top:14px; justify-content:center}
.premium-claim{min-width:190px}

@media (max-width: 760px){
  .premium-reveal-board{min-height:530px !important}
  .pack-mouth-glow{top:120px !important; width:210px !important; height:108px !important}
  .premium-pack-bottom{top:140px !important; width:144px !important}
  .premium-card{width:102px !important; height:148px !important}
  .premium-card img{height:104px !important}
  .reveal-card.selected.premium-card{transform:translate(-50%,244px) scale(1.1) !important}
}
@media (max-width: 480px){
  .manual-pack-rig{min-height:274px !important}
  .over-pack-swipe{top:92px !important; width:min(72%,148px) !important; height:36px !important}
  .cut-trail{top:109px !important; width:min(72%,148px) !important; height:4px !important}
  .pack-tear-top,.pack-tear-bottom{top:40px !important}
  .premium-reveal-board{min-height:500px !important}
  .pack-mouth-glow{top:108px !important; width:180px !important; height:92px !important}
  .premium-pack-bottom{top:128px !important; width:124px !important}
  .premium-card{width:88px !important; height:132px !important; padding:5px 5px 8px !important}
  .premium-card img{height:92px !important}
  .reveal-card .reveal-name{font-size:7px !important}
  .reveal-rarity{font-size:6px !important}
  .reveal-card.selected.premium-card{transform:translate(-50%,234px) scale(1.08) !important}
  .premium-choice-copy{margin-top:-2px !important}
}

/* ======================= V16 refined opening ======================= */
.over-pack-swipe{
  top:120px !important;
  width:min(76%,170px) !important;
  height:24px !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  z-index:10;
  touch-action:none;
}
.over-pack-swipe::after{
  content:'';
  position:absolute;
  inset:-12px 0;
}
.cut-trail{
  top:122px !important;
  width:min(76%,170px) !important;
  height:3px !important;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(90,238,255,.12) 0%, rgba(255,255,255,.98) 52%, rgba(255,235,124,.88) 100%) !important;
  box-shadow:0 0 6px rgba(90,238,255,.24), 0 0 18px rgba(90,238,255,.10) !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  margin-left:0 !important;
  z-index:9;
}
.cut-trail::before{
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.1) 28%, rgba(255,255,255,.97) 50%, rgba(255,244,183,.36) 70%, transparent 100%) !important;
}
.cut-trail.idle::after{
  animation:idleCutSweepV16 1.25s ease-in-out infinite !important;
}
@keyframes idleCutSweepV16{
  0%{transform:translateX(-110%); opacity:.12}
  28%{opacity:.7}
  55%{opacity:.95}
  100%{transform:translateX(110%); opacity:.08}
}
.manual-pack-rig{
  min-height:316px !important;
  padding-top:26px !important;
}
.pack-tear-top,
.pack-tear-bottom{top:56px !important}
.pack-tear-top{
  height:21% !important;
  clip-path:polygon(0 0,100% 0,100% 60%,97% 66%,92% 61%,85% 72%,77% 62%,70% 75%,63% 64%,55% 76%,48% 64%,41% 77%,33% 65%,24% 76%,16% 64%,8% 71%,0 66%) !important;
}
.pack-tear-bottom{
  clip-path:polygon(0 16.5%,8% 12.8%,16% 19.2%,24% 11.8%,33% 21%,41% 12.2%,48% 21%,55% 11.8%,63% 20.8%,70% 12.2%,77% 19.4%,85% 13%,92% 18.4%,97% 15.1%,100% 16.7%,100% 100%,0 100%) !important;
}
.manual-pack-rig.ripped .pack-tear-top{
  transform:translate(46px,-16px) rotate(14deg) !important;
  filter:brightness(1.14) saturate(1.06) !important;
}
.manual-pack-rig.ripped .pack-tear-bottom{
  transform:translateY(18px) scale(1.03) !important;
}
.manual-pack-rig.ripped .pack-tear-top::after,
.manual-pack-rig.ripped .pack-tear-bottom::before{opacity:.92 !important}

.premium-pack-scene{padding-bottom:4px !important}
.premium-reveal-board{
  min-height:450px !important;
  max-width:560px;
  margin:6px auto 0 !important;
}
.pack-mouth-glow{
  top:126px !important;
  width:214px !important;
  height:94px !important;
  filter:blur(14px) !important;
}
.premium-pack-bottom{
  top:150px !important;
  width:138px !important;
  z-index:3 !important;
}
.premium-reveal-lane{z-index:12 !important}
.reveal-card.reveal-emerge.premium-card{
  transform:translate(-50%,166px) scale(.12) rotateY(24deg) !important;
  opacity:0;
  filter:blur(2px) brightness(.78);
}
.reveal-card.reveal-emerge.premium-card.shown{
  transform:translate(calc(-50% + var(--card-x)), var(--card-y)) rotate(var(--card-r)) scale(1) !important;
  transition:transform .84s cubic-bezier(.16,.9,.18,1), opacity .28s ease, filter .28s ease, box-shadow .25s ease;
}
.premium-card{
  width:104px !important;
  height:150px !important;
  border:1px solid rgba(250,229,0,.22) !important;
  box-shadow:0 20px 34px rgba(0,0,0,.44), 0 0 0 1px rgba(255,255,255,.02) inset !important;
}
.premium-card:hover{transform:translate(calc(-50% + var(--card-x)), calc(var(--card-y) - 4px)) rotate(var(--card-r)) scale(1.03) !important}
.premium-card img{height:106px !important}
.premium-card .reveal-name{font-size:8px !important}
.reveal-rarity{font-size:6.2px !important}
.premium-reveal-lane.has-selection .reveal-card:not(.selected){opacity:.32 !important; filter:saturate(.52) brightness(.7) blur(.1px) !important}
.reveal-card.selected.premium-card{
  transform:translate(-50%,168px) scale(1.24) !important;
  z-index:30 !important;
  box-shadow:0 0 0 2px rgba(250,229,0,.95), 0 0 0 11px rgba(250,229,0,.12), 0 30px 56px rgba(0,0,0,.55), 0 0 40px rgba(250,229,0,.34) !important;
}
.reveal-card.selected.premium-card::before{
  content:'';
  position:absolute;
  inset:-12px;
  border-radius:28px;
  background:radial-gradient(circle at center, rgba(255,239,128,.16), transparent 72%);
  z-index:-1;
}
.reveal-card.selected.premium-card::after{
  content:'PREMIO';
  top:-11px !important;
}
.premium-choice-copy{
  max-width:430px !important;
  margin:0 auto !important;
  padding:14px 18px !important;
  background:linear-gradient(180deg, rgba(15,14,10,.9), rgba(10,9,7,.82)) !important;
  border:1px solid rgba(250,229,0,.18) !important;
  box-shadow:0 16px 32px rgba(0,0,0,.24) !important;
}
.premium-choice-copy.selected{
  border-color:rgba(250,229,0,.4) !important;
  box-shadow:0 0 0 1px rgba(250,229,0,.14), 0 18px 38px rgba(0,0,0,.28), 0 0 24px rgba(250,229,0,.08) !important;
}
.premium-actions{gap:14px !important; margin-top:16px !important}
.premium-claim{min-width:205px !important; box-shadow:0 12px 26px rgba(250,229,0,.2)}

@media (max-width: 760px){
  .over-pack-swipe{top:112px !important; width:min(74%,154px) !important}
  .cut-trail{top:114px !important; width:min(74%,154px) !important}
  .manual-pack-rig{min-height:294px !important; padding-top:24px !important}
  .pack-tear-top,.pack-tear-bottom{top:50px !important}
  .premium-reveal-board{min-height:420px !important}
  .pack-mouth-glow{top:116px !important; width:190px !important; height:84px !important}
  .premium-pack-bottom{top:138px !important; width:128px !important}
  .premium-card{width:92px !important; height:136px !important}
  .premium-card img{height:95px !important}
  .reveal-card.selected.premium-card{transform:translate(-50%,160px) scale(1.18) !important}
}
@media (max-width: 480px){
  .over-pack-swipe{top:97px !important; width:min(72%,134px) !important; height:22px !important}
  .cut-trail{top:99px !important; width:min(72%,134px) !important}
  .manual-pack-rig{min-height:264px !important; padding-top:20px !important}
  .pack-tear-top,.pack-tear-bottom{top:42px !important}
  .premium-reveal-board{min-height:396px !important}
  .pack-mouth-glow{top:102px !important; width:164px !important; height:74px !important}
  .premium-pack-bottom{top:122px !important; width:116px !important}
  .premium-card{width:82px !important; height:124px !important; padding:5px 5px 8px !important}
  .premium-card img{height:85px !important}
  .premium-card .reveal-name{font-size:7px !important}
  .reveal-rarity{font-size:5.6px !important}
  .reveal-card.selected.premium-card{transform:translate(-50%,150px) scale(1.14) !important}
  .premium-choice-copy{padding:12px 14px !important}
  .premium-actions{gap:10px !important}
  .premium-claim{min-width:170px !important}
}

/* ======================= V17 packs + brand polish ======================= */
.topbar{align-items:center !important}
.brand{
  gap:12px !important;
  padding-right:8px;
}
.brand img{
  width:54px !important;
  height:54px !important;
  object-fit:contain !important;
  object-position:center !important;
  image-rendering:auto;
  filter:drop-shadow(0 0 12px rgba(250,229,0,.18)) !important;
  flex:0 0 auto;
}
.brand span{
  font-size:13px !important;
  line-height:1.05 !important;
}
.brand b{
  display:block;
  margin-top:4px;
  font-size:10px !important;
  letter-spacing:.22em !important;
  color:var(--cyan) !important;
}

.pack-list{gap:18px !important}
.pack-card{
  grid-template-columns:152px 1fr !important;
  gap:18px !important;
  min-height:236px !important;
  padding:20px 18px !important;
  align-items:center !important;
}
.pack-card .pack-art{
  width:146px !important;
  height:198px !important;
  object-fit:contain !important;
  transform:none !important;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.46)) drop-shadow(0 0 18px rgba(255,255,255,.05)) !important;
}
.pack-card .pack-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
.pack-card h3{font-size:24px !important; margin-bottom:8px !important}
.pack-card p{font-size:14px !important; line-height:1.45 !important; margin-bottom:12px !important; max-width:42ch}
.cost{
  gap:7px !important;
  margin-bottom:12px !important;
  color:var(--gold) !important;
}
.coin-icon-cost{
  width:13px !important;
  height:13px !important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35)) !important;
}
.pack-progress{
  width:min(100%,360px);
  margin:0 0 14px;
}
.pack-progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px;
  font:700 10px 'JetBrains Mono', monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#cfe8ee;
}
.pack-progress-head strong{
  color:var(--gold);
  font-weight:800;
}
.pack-progress-track{
  position:relative;
  width:100%;
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(250,229,0,.18);
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02), 0 8px 18px rgba(0,0,0,.18);
}
.pack-progress-fill{
  position:absolute;
  inset:0 auto 0 0;
  border-radius:999px;
  background:linear-gradient(90deg, #20d5ff 0%, #5ff1ff 35%, #fff06a 100%);
  box-shadow:0 0 14px rgba(95,241,255,.18), 0 0 20px rgba(255,240,106,.16);
}
.pack-progress-fill::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.35), transparent 55%);
}
.pack-card .pack-redeem-btn{
  min-width:194px !important;
  margin-top:2px;
}

.points-hook .coin-medallion img{
  width:70px !important;
  height:70px !important;
}
.points-costs img,
.coin-icon-inline,
.coin-icon-top,
.coin-icon-balance{
  object-fit:contain !important;
}

@media (max-width: 760px){
  .brand img{width:48px !important; height:48px !important}
  .brand span{font-size:12px !important}
  .brand b{font-size:9px !important; letter-spacing:.18em !important}
  .pack-card{
    grid-template-columns:120px 1fr !important;
    gap:14px !important;
    min-height:214px !important;
    padding:18px 14px !important;
  }
  .pack-card .pack-art{width:114px !important; height:162px !important}
  .pack-card h3{font-size:18px !important}
  .pack-card p{font-size:12.5px !important}
  .pack-progress{width:100%}
}

@media (max-width: 520px){
  .brand{gap:10px !important}
  .brand img{width:42px !important; height:42px !important}
  .brand span{font-size:11px !important}
  .brand b{font-size:8px !important; letter-spacing:.16em !important}
  .pack-card{
    grid-template-columns:92px 1fr !important;
    min-height:192px !important;
    gap:12px !important;
    padding:16px 12px !important;
  }
  .pack-card .pack-art{width:86px !important; height:132px !important}
  .pack-card h3{font-size:15px !important}
  .pack-card p{font-size:11.5px !important; margin-bottom:10px !important}
  .coin-icon-cost{width:11px !important; height:11px !important}
  .pack-progress-head{font-size:8.5px !important}
  .pack-progress-track{height:10px !important}
  .pack-card .pack-redeem-btn{min-width:100% !important}
}

/* ======================= V18 topbar logo + pocket coin fix ======================= */
.brand{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
}
.brand img{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  min-height:58px !important;
  aspect-ratio:1 / 1 !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.28)) !important;
}
.brand span{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;
  line-height:1.02 !important;
  font-size:13px !important;
}
.brand b{
  margin-top:4px !important;
  font-size:10px !important;
  letter-spacing:.18em !important;
}

.points-pill{
  gap:8px !important;
  padding:10px 12px !important;
  border-radius:14px !important;
}
.points-pill strong{
  font-size:16px !important;
}
.coin-icon-top{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  min-height:20px !important;
  aspect-ratio:1 / 1 !important;
  object-fit:contain !important;
  background:transparent !important;
  border-radius:50% !important;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.35)) !important;
}
.coin-icon-inline,
.coin-icon-cost,
.coin-icon-balance,
.points-costs img,
.coin-medallion img{
  background:transparent !important;
  object-fit:contain !important;
}

@media (max-width:520px){
  .brand img{
    width:50px !important;
    height:50px !important;
    min-width:50px !important;
    min-height:50px !important;
  }
  .brand span{font-size:12px !important}
  .brand b{font-size:9px !important}
  .points-pill{padding:8px 11px !important}
  .coin-icon-top{width:18px !important;height:18px !important}
}

/* ======================= V22 prepublicación ======================= */
.auth-card{margin-bottom:16px}
.auth-card h2{margin:8px 0}
.pack-redeem-btn:disabled{opacity:.55;cursor:not-allowed;filter:saturate(.55);box-shadow:none!important}
code{font-family:'JetBrains Mono',monospace;color:var(--cyan)}
.points-balance .btn{white-space:nowrap}
.profile-card+.profile-card{margin-top:16px}
.status{max-width:110px;overflow-wrap:anywhere}

.brand img{
  width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;
  object-fit:contain!important;aspect-ratio:1/1!important;filter:drop-shadow(0 3px 10px rgba(0,0,0,.28))!important;
}
.coin-icon-top{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;object-fit:contain!important;border-radius:50%!important}
.coin-icon-cost{width:12px!important;height:12px!important}
.coin-icon-balance{width:44px!important;height:44px!important}

@media(max-width:520px){
  .brand img{width:46px!important;height:46px!important;min-width:46px!important;min-height:46px!important}
  .points-balance{align-items:center!important}
}

/* V22 · catálogo real Supabase */
.catalog-source{margin-top:16px;padding:11px 14px;border-radius:14px;font-size:.9rem;font-weight:700;border:1px solid rgba(255,255,255,.12)}
.catalog-source.ok{background:rgba(26,184,126,.12);color:#9ff3cf;border-color:rgba(26,184,126,.28)}
.catalog-source.warn{background:rgba(255,184,77,.1);color:#ffd597;border-color:rgba(255,184,77,.25)}
.stock-language{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.stock-language span{display:inline-flex;align-items:center;min-height:24px;padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);font-size:.68rem;font-weight:800;letter-spacing:.02em;color:var(--muted)}
.promo-line{font-size:.72rem;font-weight:800;color:var(--gold);margin-top:3px}
.load-more-wrap{display:flex;justify-content:center;padding:24px 0 8px}
.filters{grid-template-columns:minmax(180px,2fr) repeat(4,minmax(145px,1fr))}
.product-image-wrap img[src$="logo.png"]{object-fit:contain;padding:18%;opacity:.9}
@media(max-width:1050px){.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.filters .search{grid-column:1/-1}}
@media(max-width:620px){.filters{grid-template-columns:1fr}.filters .search{grid-column:auto}.stock-language span{font-size:.62rem}}

/* =========================================================
   V23 — catálogo real, detalle, cantidades y cuentas
   ========================================================= */
.product-card{position:relative;cursor:default}
.product-open,.product-title-button{appearance:none;border:0;background:transparent;color:inherit;padding:0;text-align:left;font:inherit}
.product-open{display:block;width:100%;cursor:pointer}
.product-title-button{display:block;width:100%;cursor:pointer}
.product-title-button h3{margin:0}
.quantity-row{display:grid;grid-template-columns:40px 46px 40px 1fr;gap:7px;align-items:center;margin-top:12px}
.qty-btn{width:40px;height:40px;border-radius:9px;border:1px solid rgba(250,229,0,.3);background:#211f0d;color:#fff;font:800 24px/1 'Hanken Grotesk';display:grid;place-items:center;cursor:pointer;transition:.18s ease}
.qty-btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--gold);background:#302d0d}
.qty-btn.qty-plus{background:var(--gold);color:#121000;border-color:var(--gold)}
.qty-btn:disabled{opacity:.35;cursor:not-allowed}
.qty-value,.detail-quantity output,.cart-stepper output{height:40px;min-width:42px;border-radius:9px;border:1px solid rgba(255,255,255,.11);display:grid;place-items:center;background:#0d0d08;color:#fff;font:800 16px 'JetBrains Mono'}
.detail-link{height:40px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:#17170e;color:#fff;font-weight:800;cursor:pointer}
.detail-link:hover{border-color:rgba(250,229,0,.5);color:var(--gold)}
.catalog-source{display:flex;align-items:center;justify-content:space-between;gap:12px}
.catalog-source.error{background:rgba(255,80,80,.11);color:#ffb5b5;border-color:rgba(255,80,80,.28)}
.retry-catalog{border:1px solid currentColor;background:transparent;color:inherit;border-radius:8px;padding:7px 10px;font-weight:800;cursor:pointer;white-space:nowrap}
.catalog-card-placeholder{width:100%;aspect-ratio:367/512;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:18px;text-align:center;background:radial-gradient(circle at 50% 25%,rgba(250,229,0,.12),transparent 36%),linear-gradient(160deg,#242113,#0b0b07 70%);border:1px solid rgba(250,229,0,.18);overflow:hidden}
.catalog-card-placeholder img{width:44%;height:auto!important;aspect-ratio:auto!important;object-fit:contain;filter:drop-shadow(0 9px 15px rgba(0,0,0,.5))}
.catalog-card-placeholder span{font:800 10px 'JetBrains Mono';letter-spacing:.12em;color:var(--gold)}
.catalog-card-placeholder strong{font-size:clamp(16px,2vw,23px);line-height:1.08;color:#fff}
.catalog-card-placeholder small{color:var(--muted);line-height:1.2}

.card-detail{min-height:100%;display:grid;grid-template-columns:minmax(250px,42%) 1fr;gap:28px;align-items:center;padding:20px 12px 44px}
.detail-visual{display:grid;place-items:center;min-width:0}
.detail-visual>img,.detail-visual>.catalog-card-placeholder{width:min(100%,360px);max-height:72vh;object-fit:contain;border-radius:16px;box-shadow:0 24px 55px rgba(0,0,0,.45)}
.detail-info{min-width:0}
.detail-info h1{font:400 clamp(38px,6vw,72px)/.95 'Anton';text-transform:uppercase;margin:10px 0 13px;color:#fff}
.detail-badge{position:static;display:inline-flex;margin-bottom:10px}
.detail-price{font:800 clamp(26px,4vw,42px) 'Hanken Grotesk';color:var(--gold);margin:8px 0}
.detail-promo{padding:10px 12px;border-radius:10px;background:rgba(69,250,247,.08);border:1px solid rgba(69,250,247,.18);margin-bottom:16px;color:#c7fffd}
.detail-stock{margin:12px 0}
.detail-quantity{display:grid;grid-template-columns:48px 58px 48px;gap:8px;margin:16px 0 8px}
.detail-quantity .qty-btn{width:48px;height:48px}
.detail-quantity output{height:48px}
.detail-help{color:var(--muted);font-size:.92rem}

.auth-gateway h2{margin-bottom:6px}
.auth-lead{color:var(--muted);margin:0 0 18px}
.auth-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.auth-form-panel{padding:16px;border-radius:14px;background:#111108;border:1px solid rgba(255,255,255,.09)}
.auth-form-panel h3{margin:0 0 4px;color:#fff}
.auth-form-panel small{color:var(--muted)}

.cart-list{display:grid;gap:10px;margin:12px 0 20px}
.cart-item{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px;border-radius:13px;background:#121109;border:1px solid rgba(255,255,255,.08)}
.cart-thumb{width:78px}
.cart-thumb>img,.cart-thumb>.catalog-card-placeholder{width:78px;height:108px;object-fit:cover;border-radius:8px;box-shadow:none;padding:7px}
.cart-thumb .catalog-card-placeholder strong{font-size:9px}
.cart-thumb .catalog-card-placeholder span,.cart-thumb .catalog-card-placeholder small{display:none}
.cart-main{min-width:0}
.cart-title{appearance:none;background:transparent;border:0;color:#fff;padding:0;font-weight:900;text-align:left;font-size:1.05rem;cursor:pointer}
.cart-main p{margin:3px 0 8px;color:var(--muted);font-size:.83rem}
.cart-language-select{height:38px;padding:0 9px;font-size:.84rem;max-width:240px}
.cart-stepper{display:flex;align-items:center;gap:7px;margin-top:8px;flex-wrap:wrap}
.cart-stepper .qty-btn{width:34px;height:34px;font-size:20px}
.cart-stepper output{height:34px;min-width:38px}
.cart-remove{border:0;background:transparent;color:#ff9b9b;font-weight:800;cursor:pointer;padding:5px}
.cart-line-total{white-space:nowrap;color:var(--gold)}
.cart-total{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid rgba(255,255,255,.12);font-size:1.2rem}
.cart-total strong{color:var(--gold);font-size:1.45rem}

@media(max-width:720px){
  .quantity-row{grid-template-columns:38px 42px 38px 1fr}
  .qty-btn{width:38px;height:38px}
  .qty-value{height:38px}
  .card-detail{grid-template-columns:1fr;gap:18px;padding-top:4px;align-items:start}
  .detail-visual>img,.detail-visual>.catalog-card-placeholder{width:min(76vw,310px);max-height:44vh}
  .detail-info h1{font-size:42px}
  .auth-columns{grid-template-columns:1fr}
  .cart-item{grid-template-columns:64px minmax(0,1fr)}
  .cart-thumb,.cart-thumb>img,.cart-thumb>.catalog-card-placeholder{width:64px}
  .cart-thumb>img,.cart-thumb>.catalog-card-placeholder{height:90px}
  .cart-line-total{grid-column:2;justify-self:end;margin-top:-3px}
}