@font-face{font-family:'PS2P';src:url(../fonts/PressStart2P.ttf) format('truetype');font-display:swap}

:root{
  --bg:#0b0b14; --bg2:#14142a; --ink:#f4f1ff; --muted:#9a95b8; --accent:#ffd166;
  --pix:'PS2P',ui-monospace,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;overscroll-behavior:none}
body{background:radial-gradient(1200px 700px at 50% -10%,#2a1b55 0%,var(--bg) 60%) fixed}
button{font:inherit;cursor:pointer}
img{-webkit-user-drag:none;user-select:none}

#app{height:100dvh;display:flex;flex-direction:column;position:relative;z-index:1}
#topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;padding-top:calc(10px + var(--safe-t));flex:none}
.logo{font-family:var(--pix);font-size:18px;letter-spacing:1px;background:linear-gradient(90deg,#ffd166,#ff6b6b,#a855f7,#22d3ee);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #0008)}
.stats{margin-left:auto;display:flex;gap:6px;font-size:13px}
.stat{background:#ffffff14;border:1px solid #ffffff22;border-radius:999px;padding:5px 10px;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.stat b{font-family:var(--pix);font-size:11px;font-weight:400}
.stat.bump b{animation:bump .4s}
@keyframes bump{40%{transform:scale(1.4);color:var(--accent)}}
.icon-btn{background:#ffffff14;border:1px solid #ffffff22;color:var(--ink);border-radius:10px;width:36px;height:36px;font-size:16px;flex:none}

#screen{flex:1;min-height:0;overflow:auto;position:relative;-webkit-overflow-scrolling:touch;scrollbar-width:none}
#screen::-webkit-scrollbar{display:none}
#tabs{display:flex;gap:8px;padding:8px 12px calc(8px + var(--safe-b));background:#0b0b14cc;backdrop-filter:blur(10px);border-top:1px solid #ffffff14;flex:none}
#tabs button{flex:1;padding:12px;border-radius:14px;border:1px solid #ffffff22;background:#ffffff0d;color:var(--ink);font-weight:600;font-size:15px}
#tabs button.active{background:linear-gradient(135deg,#a855f7,#6d28d9);border-color:transparent}
#tabs.hidden{display:none}

/* ---------- buttons ---------- */
.btn{border:0;border-radius:14px;padding:13px 20px;font-weight:700;font-size:15px;color:#fff;background:linear-gradient(135deg,#a855f7,#6d28d9);box-shadow:0 6px 0 #3f1170,0 10px 20px #0006;transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #3f1170,0 4px 10px #0006}
.btn.gold{background:linear-gradient(135deg,#ffd166,#e0a800);color:#3a2a00;box-shadow:0 6px 0 #8a6300,0 10px 20px #0006}
.btn.gold:active{box-shadow:0 2px 0 #8a6300,0 4px 10px #0006}
.btn.ghost{background:#ffffff14;box-shadow:none;border:1px solid #ffffff22}
.btn.ghost:active{transform:scale(.97)}
.btn[disabled]{opacity:.5;filter:saturate(.3);pointer-events:none}

/* ---------- toast / flash ---------- */
#toast{position:fixed;left:50%;bottom:calc(90px + var(--safe-b));transform:translate(-50%,20px);background:#1a1030ee;color:#fff;padding:10px 16px;border-radius:12px;border:1px solid #ffffff22;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:50;max-width:90vw;text-align:center}
#toast.show{opacity:1;transform:translate(-50%,0)}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40}
#flash{position:fixed;inset:0;pointer-events:none;z-index:39;opacity:0;background:#fff}
#flash.go{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.9}100%{opacity:0}}
body.shake #app{animation:shake .45s}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(3px,-2px)}30%,50%,70%{transform:translate(-5px,3px)}40%,60%{transform:translate(5px,-3px)}}

/* ============================================================
   CARD (all sizes via container query units)
   ============================================================ */
.card{position:relative;aspect-ratio:63/88;width:100%;container-type:inline-size;perspective:1400px;
  --tc:#888;--td:#333;--mx:.5;--my:.5;--rx:0deg;--ry:0deg;--flip:0deg;user-select:none;-webkit-user-select:none}
.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1);
  transform:rotateX(var(--ry)) rotateY(calc(var(--flip) + var(--rx)))}
.card.tilting .card-inner{transition:transform .08s linear}
.card.facedown{--flip:180deg}
.face{position:absolute;inset:0;border-radius:5cqw;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 2cqw 6cqw #0009}
.face.back{transform:rotateY(180deg);background:#12091f}
.back-art{position:absolute;inset:3cqw;border-radius:3.5cqw;border:1.6cqw solid #ffd166;display:grid;place-items:center;overflow:hidden;
  background:repeating-linear-gradient(45deg,#3f1170 0 5cqw,#2a0b4f 5cqw 10cqw)}
.back-art::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#a855f766,transparent 60%)}
.back-art .bl{font-family:var(--pix);font-size:9cqw;color:#ffd166;text-shadow:0 .8cqw 0 #000;transform:rotate(-14deg);position:relative;letter-spacing:.5cqw}
.back-art .be{position:absolute;font-size:12cqw;opacity:.35;filter:grayscale(1)}
.back-art .be.a{top:6%;left:8%}.back-art .be.b{bottom:6%;right:8%}.back-art .be.c{top:6%;right:8%;font-size:8cqw}.back-art .be.d{bottom:8%;left:10%;font-size:8cqw}

/* front */
.face.front{background:var(--frame);padding:3cqw;color:#1a1a2a}
.card.r-C{--frame:linear-gradient(160deg,#d9dce3,#8b8f99 60%,#c5c9d2)}
.card.r-U{--frame:linear-gradient(160deg,color-mix(in srgb,var(--tc) 55%,white),var(--tc) 45%,var(--td))}
.card.r-R{--frame:linear-gradient(160deg,#fff 0%,#aeb7c9 25%,#eef1f7 45%,#8f98ad 70%,#f4f6fa 100%)}
.card.r-E{--frame:conic-gradient(from 210deg,#ff6b6b,#ffd166,#06d6a0,#4cc9f0,#a855f7,#ff6b6b)}
.card.r-L{--frame:conic-gradient(from calc(var(--mx)*360deg),#ff6b6b,#ffd166,#06d6a0,#4cc9f0,#a855f7,#ff6b6b)}
.card.r-S{--frame:linear-gradient(160deg,#fff3b0 0%,#e0a800 25%,#fff8d6 45%,#b8860b 70%,#ffe08a 100%)}
.frame{position:relative;height:100%;border-radius:3cqw;overflow:hidden;background:#0d0d18}
.art{position:absolute;inset:0}
.art img{width:100%;height:100%;object-fit:cover;object-position:50% 0;image-rendering:pixelated;display:block}
.card.unknown .art img{filter:brightness(0) contrast(0);opacity:.55}
.head{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:1.8cqw;padding:2.4cqw 3cqw 5cqw;
  background:linear-gradient(180deg,#000c 0%,#0008 55%,transparent 100%);color:#fff}
.type-ico{font-size:5.2cqw;line-height:1;filter:drop-shadow(0 .5cqw 0 #000)}
.name{font-weight:800;font-size:5.1cqw;letter-spacing:-.02em;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 .5cqw 0 #000}
.hp{font-family:var(--pix);font-size:4.6cqw;color:#ff6b6b;text-shadow:0 .5cqw 0 #000;white-space:nowrap}
.hp small{font-family:var(--sans);font-size:2.8cqw;font-weight:800;color:#fff}
.panel{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#f7f3e8f2,#efe9dcfa);padding:2cqw 3cqw 2.2cqw;
  box-shadow:0 -1cqw 3cqw #0006}
.card.r-S .panel{background:linear-gradient(180deg,#fff8dcf2,#f5e3a6fa)}
.band{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;border-bottom:.4cqw solid #1a1a2a33;padding-bottom:1.2cqw;margin-bottom:1.4cqw}
.title{font-style:italic;font-size:3.4cqw;font-weight:600;color:#3a3450;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rar-name{font-size:2.6cqw;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--td);white-space:nowrap}
.atk{margin-bottom:1.4cqw}
.atk-row{display:flex;align-items:center;gap:1.6cqw}
.atk-ico{font-size:3.6cqw;line-height:1}
.atk-name{font-weight:800;font-size:3.9cqw;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atk-dmg{font-family:var(--pix);font-size:4.4cqw;color:#1a1a2a}
.atk-text{font-size:2.9cqw;line-height:1.25;color:#2a2a3a;margin-top:.4cqw}
.foot{border-top:.4cqw solid #1a1a2a33;padding-top:1.2cqw;margin-top:.6cqw}
.meta{display:flex;justify-content:space-between;font-size:2.6cqw;font-weight:700;color:#3a3450}
.flavor{font-size:2.8cqw;font-style:italic;color:#4a4560;margin-top:1cqw;line-height:1.25}
.num{display:flex;justify-content:space-between;font-family:var(--pix);font-size:2.4cqw;color:#5a5570;margin-top:1.2cqw}
.num .rar{color:var(--td)}
.card.unknown .name,.card.unknown .title{color:#888}

/* holo & glare overlays */
.holo,.glare{position:absolute;inset:0;pointer-events:none;border-radius:5cqw}
.glare{background:radial-gradient(circle at calc(var(--mx)*100%) calc(var(--my)*100%),#ffffff80 0%,#ffffff2a 22%,transparent 55%);mix-blend-mode:overlay;opacity:0;transition:opacity .3s}
.card.tilting .glare,.card.lit .glare{opacity:1}
.holo{opacity:0;transition:opacity .3s;mix-blend-mode:color-dodge;
  background:linear-gradient(115deg,transparent 0%,#ff000066 22%,#ffff0066 32%,#00ff0066 42%,#00ffff66 52%,#0000ff66 62%,#ff00ff66 72%,transparent 95%);
  background-size:260% 260%;background-position:calc(var(--mx)*100%) calc(var(--my)*100%)}
.card.r-E.tilting .holo,.card.r-E.lit .holo{opacity:.42}
.card.r-L .holo{background:
  radial-gradient(circle at calc(var(--mx)*100%) calc(var(--my)*100%),#fff9 0,transparent 30%),
  repeating-radial-gradient(circle at 30% 20%,#fff2 0 .6cqw,transparent .6cqw 3cqw),
  linear-gradient(115deg,transparent 0%,#ff000077 22%,#ffff0077 32%,#00ff0077 42%,#00ffff77 52%,#0000ff77 62%,#ff00ff77 72%,transparent 95%);
  background-size:100% 100%,100% 100%,260% 260%;background-position:0 0,0 0,calc(var(--mx)*100%) calc(var(--my)*100%)}
.card.r-L.tilting .holo,.card.r-L.lit .holo{opacity:.7}
.card.r-S .holo{mix-blend-mode:screen;background:
  linear-gradient(115deg,transparent 30%,#ffe08a88 44%,#ffffffcc 50%,#ffe08a88 56%,transparent 70%),
  repeating-radial-gradient(circle at 70% 30%,#fff3 0 .5cqw,transparent .5cqw 2.6cqw);
  background-size:260% 260%,100% 100%;background-position:calc(var(--mx)*100%) calc(var(--my)*100%),0 0}
.card.r-S.tilting .holo,.card.r-S.lit .holo{opacity:.85}
.card.r-R.tilting .glare,.card.r-R.lit .glare{opacity:1}

/* rarity glow around card */
.card.glow-E .face.front{box-shadow:0 0 6cqw 1cqw #a855f7cc,0 2cqw 6cqw #0009}
.card.glow-L .face.front{box-shadow:0 0 8cqw 2cqw #4cc9f0cc,0 0 16cqw 4cqw #ff6b6b66,0 2cqw 6cqw #0009}
.card.glow-S .face.front{box-shadow:0 0 10cqw 3cqw #ffd166ee,0 0 24cqw 6cqw #ffd16666,0 2cqw 6cqw #0009}
.card.charging .face.back{animation:charge .6s ease-in-out infinite alternate}
.card.charging.glow-E .face.back{box-shadow:0 0 8cqw 2cqw #a855f7}
.card.charging.glow-L .face.back{box-shadow:0 0 10cqw 3cqw #4cc9f0,0 0 20cqw 6cqw #ff6b6b}
.card.charging.glow-S .face.back{box-shadow:0 0 12cqw 4cqw #ffd166,0 0 28cqw 8cqw #ffd16688}
@keyframes charge{from{filter:brightness(1)}to{filter:brightness(1.6)}}
.card.wiggle .card-inner{animation:wiggle .5s ease-in-out infinite}
@keyframes wiggle{0%,100%{transform:rotateX(var(--ry)) rotateY(calc(var(--flip) + var(--rx))) rotate(-2deg)}50%{transform:rotateX(var(--ry)) rotateY(calc(var(--flip) + var(--rx))) rotate(2deg)}}

/* ============================================================
   PACK
   ============================================================ */
.pack{position:relative;width:min(64vw,290px);aspect-ratio:.62;touch-action:none;container-type:inline-size;--c1:#1d3557;--c2:#e63946;--p:0;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));transform-style:preserve-3d}
.wrapper{position:absolute;inset:0;border-radius:4%/2.5%;overflow:hidden;background:linear-gradient(165deg,var(--c1) 0%,var(--c2) 100%);
  box-shadow:0 24px 50px #000a,inset 0 0 0 2px #fff2}
.wrapper::before{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(135deg,#ffffff10 0 8px,transparent 8px 22px),
  radial-gradient(circle at 50% 42%,#fff2,transparent 50%)}
.wrapper .crimp{position:absolute;left:0;right:0;height:5%;background:repeating-linear-gradient(90deg,#fff4 0 5px,#0004 5px 10px);}
.wrapper .crimp.t{top:0;border-bottom:2px solid #0006}.wrapper .crimp.b{bottom:0;border-top:2px solid #0006}
.wrapper .plogo{position:absolute;top:8.5%;left:0;right:0;text-align:center;font-family:var(--pix);font-size:9cqw;color:#fff;text-shadow:0 3px 0 #0009,0 0 18px #fff8;letter-spacing:2px}
.wrapper .pname{position:absolute;bottom:12.5%;left:0;right:0;text-align:center;font-weight:900;font-size:6.2cqw;line-height:1.05;color:#fff;text-shadow:0 2px 0 #0009;text-transform:uppercase;letter-spacing:.04em;padding:0 6%}
.wrapper .psub{position:absolute;bottom:7%;left:0;right:0;text-align:center;font-size:3.6cqw;color:#fffc;text-shadow:0 1px 0 #0009;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6%}
.wrapper .collage{position:absolute;top:22%;left:8%;right:8%;height:48%}
.collage img{position:absolute;width:44%;aspect-ratio:3/4;object-fit:cover;object-position:50% 0;image-rendering:pixelated;border:2px solid #fff;border-radius:4px;box-shadow:0 8px 16px #0009}
.collage img:nth-child(1){left:2%;top:14%;transform:rotate(-10deg);z-index:1}
.collage img:nth-child(2){right:2%;top:10%;transform:rotate(9deg);z-index:2}
.collage img:nth-child(3){left:14%;top:36%;transform:rotate(4deg);z-index:3;width:40%}
.collage img:nth-child(4){right:12%;top:40%;transform:rotate(-6deg);z-index:4;width:38%}
.wrapper .gloss{position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#ffffff33 46%,#ffffff55 50%,#ffffff33 54%,transparent 70%);mix-blend-mode:screen}
.wrapper .tearhint{position:absolute;top:14.5%;left:3%;right:3%;border-top:2px dashed #ffffffaa;color:#fff;text-shadow:0 1px 0 #000}
.wrapper .tearhint::before{content:"✂";position:absolute;left:-2px;top:-3.2cqw;font-size:5cqw;transform:scaleX(-1)}
.pack-body{clip-path:var(--clip-body,none)}
.pack-strip{clip-path:var(--clip-strip,polygon(0 0,0 0,0 0));transform-origin:50% 100%;box-shadow:none;--dir:1;--fy:0;
  transform:translate(calc(var(--p) * var(--dir) * -4%),calc(var(--fy) * 1px - var(--p) * 6%)) rotate(calc(var(--p) * var(--dir) * -7deg));
  filter:drop-shadow(0 calc(var(--p) * 14px) calc(var(--p) * 10px) #0009)}
.pack.torn .pack-strip{transition:transform .6s cubic-bezier(.3,.6,.4,1),opacity .6s;transform:translate(calc(var(--dir) * -45%),-70%) rotate(calc(var(--dir) * -30deg));opacity:0}
.pack.torn .pack-body{transition:transform .75s cubic-bezier(.4,0,.8,.4) .12s,opacity .6s .35s;transform:translateY(130%) rotate(6deg);opacity:0}
.pack.spring .pack-strip{transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.pack.spring .pack-body{transition:clip-path .35s}

/* ============================================================
   OPENING STAGE
   ============================================================ */
.stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;touch-action:none}
.stage .center{position:relative;width:min(70vw,320px);aspect-ratio:63/88;display:grid;place-items:center;perspective:1200px}
.stage .stack{position:absolute;inset:0}
.stack .card{position:absolute;inset:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s;will-change:transform}
.stack .card.dragging{transition:none}
.stack .card.settle{transition:transform .32s cubic-bezier(.2,1.2,.3,1)}
.stack .card.fly{transition:transform .45s cubic-bezier(.3,.6,.5,1),opacity .45s;opacity:0}
.stage .center{touch-action:none}
.stage .center .pack{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(64vw,290px);z-index:5}
.stage .hint{margin-top:18px;color:var(--muted);font-size:14px;text-align:center;min-height:20px;animation:pulse 1.6s infinite;padding:0 20px}
@keyframes pulse{50%{opacity:.5}}
.stage .tray{position:absolute;left:0;right:0;bottom:calc(8px + var(--safe-b));display:flex;justify-content:center;gap:6px;padding:6px 10px}
.tray .card{width:42px;flex:none;animation:trayin .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes trayin{from{transform:translateY(-30px) scale(1.6);opacity:0}}
.stage .counter{position:absolute;top:10px;right:14px;font-family:var(--pix);font-size:11px;color:var(--muted)}
.stage .skip{position:absolute;top:8px;left:12px}
.banner{position:absolute;left:0;right:0;top:12%;text-align:center;font-family:var(--pix);font-size:clamp(18px,6vw,30px);color:#fff;pointer-events:none;
  text-shadow:0 3px 0 #000,0 0 30px currentColor;animation:bannerin .9s cubic-bezier(.2,1.4,.4,1) both;z-index:9}
@keyframes bannerin{from{transform:scale(2.5);opacity:0}}
.banner.S{color:#ffd166}.banner.L{color:#4cc9f0}.banner.E{color:#c084fc}

/* recap */
.recap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:16px 12px calc(12px + var(--safe-b));overflow:auto}
.recap h2{font-family:var(--pix);font-size:14px;margin:6px 0 14px;color:var(--accent);text-align:center}
.recap .rgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:100%;max-width:440px}
.slot{position:relative;width:calc(33.33% - 8px);animation:popin .5s cubic-bezier(.2,1.4,.4,1) both}
.slot:nth-child(2){animation-delay:.08s}.slot:nth-child(3){animation-delay:.16s}.slot:nth-child(4){animation-delay:.24s}.slot:nth-child(5){animation-delay:.32s}
@keyframes popin{from{transform:scale(.6);opacity:0}}
.slot .tag{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-family:var(--pix);font-size:8px;padding:4px 7px;border-radius:999px;background:#06d6a0;color:#003;z-index:2;white-space:nowrap;box-shadow:0 2px 6px #0008}
.slot .tag.dupe{background:#ffd166;color:#3a2a00}
.recap .gains{margin:16px 0 10px;font-size:15px;color:var(--ink);text-align:center}
.recap .actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ============================================================
   SHOP
   ============================================================ */
.shop{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:8px 14px calc(16px + var(--safe-b));gap:8px}
.shop h2{font-family:var(--pix);font-size:13px;color:var(--accent);margin:8px 0 4px;text-align:center;letter-spacing:1px}
.shop .sub{color:var(--muted);font-size:13px;text-align:center;margin:0 0 6px}
.packs{display:flex;gap:14px;justify-content:center;width:100%;flex-wrap:wrap}
.pack-choice{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;color:var(--ink);padding:10px 4px 4px;border-radius:18px;width:min(44%,190px)}
.pack-choice .pack{width:100%;animation:float 3.2s ease-in-out infinite;transition:transform .2s}
.pack-choice:nth-child(2) .pack{animation-delay:-1.6s}
.pack-choice:active .pack{transform:scale(.96)}
@keyframes float{50%{translate:0 -8px}}
.pack-choice .pc-name{font-weight:800;font-size:14px;text-align:center}
.pack-choice .pc-sub{font-size:12px;color:var(--muted);text-align:center;margin-top:-6px}
.shop .wallet{margin-top:10px;background:#ffffff0d;border:1px solid #ffffff18;border-radius:16px;padding:12px 16px;width:100%;max-width:420px;display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;font-size:14px}
.shop .wallet .row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.shop .wallet b{font-family:var(--pix);font-size:12px;font-weight:400;color:var(--accent)}
.shop .odds{margin-top:6px;color:var(--muted);font-size:12px;text-align:center;max-width:420px;line-height:1.5}
.shop .odds summary{cursor:pointer;color:var(--ink)}

/* ============================================================
   COLLECTION
   ============================================================ */
.coll{padding:6px 12px calc(16px + var(--safe-b))}
.coll-head{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.progress{position:relative;height:26px;background:#ffffff14;border-radius:999px;overflow:hidden;border:1px solid #ffffff22}
.progress .bar{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#a855f7,#22d3ee);transition:width .6s}
.progress span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--pix);font-size:10px;text-shadow:0 1px 0 #000}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid #ffffff22;background:#ffffff0d;color:var(--ink);border-radius:999px;padding:6px 11px;font-size:13px;white-space:nowrap}
.chip.on{background:var(--cc,#a855f7);border-color:transparent;color:#fff;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.grid .cell{position:relative;background:none;border:0;padding:0;color:inherit;text-align:left}
.grid .cell .cnt{position:absolute;right:4px;bottom:4px;font-family:var(--pix);font-size:8px;background:#000c;color:#ffd166;padding:3px 5px;border-radius:6px;z-index:2}
.grid .cell .new{position:absolute;left:4px;top:4px;font-family:var(--pix);font-size:7px;background:#06d6a0;color:#003;padding:3px 5px;border-radius:6px;z-index:2}
.grid .cell:active{transform:scale(.96)}
.empty{color:var(--muted);text-align:center;padding:30px 10px}

/* viewer modal */
.viewer{position:fixed;inset:0;z-index:30;background:#05050ae6;backdrop-filter:blur(8px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;animation:fade .25s;touch-action:none}
@keyframes fade{from{opacity:0}}
.viewer .big{width:min(84vw,360px);perspective:1400px}
.viewer .big .card{animation:vin .45s cubic-bezier(.2,1.3,.4,1)}
@keyframes vin{from{transform:scale(.7) translateY(40px);opacity:0}}
.viewer .info{text-align:center;color:var(--ink);font-size:14px;line-height:1.5}
.viewer .info b{font-family:var(--pix);font-size:11px;font-weight:400;color:var(--accent)}
.viewer .nav{display:flex;gap:10px;align-items:center}
.viewer .close{position:absolute;top:calc(10px + var(--safe-t));right:12px}
.viewer .arrow{width:46px;height:46px;border-radius:50%;font-size:20px}

/* misc */
.center-msg{display:grid;place-items:center;height:100%;color:var(--muted);text-align:center;padding:20px;font-size:14px}
.fadein{animation:fade .3s}
@media (min-width:700px){
  .stage .center{width:min(40vh,340px)}
  .pack{width:min(30vh,290px)}
}