:root{
  --bg:#07070d; --bg2:#0e0f1a; --card:#14162a; --line:rgba(255,255,255,.09); --txt:#f4f5ff; --mut:#8c90ad;
  --green:#19ff8c; --orange:#ff7a1a; --blue:#2bb7ff; --purple:#a45cff; --gold:#ffd23f; --pink:#ff4fd8;
  --nav-h:64px; --hdr-h:60px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
.t-copper{--tc:#ff8a4c;--tg:rgba(255,138,76,.6);--tb:linear-gradient(90deg,#8a3a14,#ff8a4c)}
.t-bronze{--tc:#e0a24a;--tg:rgba(224,162,74,.6);--tb:linear-gradient(90deg,#6a4310,#f0cd83)}
.t-silver{--tc:#d3dcec;--tg:rgba(207,224,255,.6);--tb:linear-gradient(90deg,#5d6a80,#f6f9fd)}
.t-gold{--tc:#ffd23f;--tg:rgba(255,210,63,.75);--tb:linear-gradient(90deg,#c27800,#fff09a)}
.t-diamond{--tc:#6df0ff;--tg:rgba(109,240,255,.8);--tb:linear-gradient(90deg,#ff7bd5,#7bffea,#7b9bff)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;touch-action:manipulation;-webkit-text-size-adjust:100%;background:var(--bg);color:var(--txt);overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
button:disabled{cursor:not-allowed}
[hidden]{display:none!important}
b,strong{font-weight:800}

/* ---------- ambient background ---------- */
.bg-fx{position:fixed;inset:0;overflow:hidden;z-index:0;background:radial-gradient(120% 80% at 50% -10%,#16123a 0%,var(--bg) 60%)}
.bg-fx .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:float 14s ease-in-out infinite}
.o1{width:320px;height:320px;background:#7a2cff;left:-90px;top:8%}
.o2{width:280px;height:280px;background:#ff6a00;right:-100px;top:42%;animation-delay:-5s!important;opacity:.32!important}
.o3{width:300px;height:300px;background:#00c2ff;left:20%;bottom:-120px;animation-delay:-9s!important;opacity:.28!important}
.bg-fx .grid{position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 1px,transparent 1px 22px);mask-image:linear-gradient(#000,transparent 85%)}
@keyframes float{50%{transform:translate3d(30px,-40px,0) scale(1.1)}}

#app{position:relative;z-index:1;height:100vh;height:100dvh;height:var(--app-h,100dvh);max-width:520px;margin:0 auto;display:flex;flex-direction:column;overflow:hidden}
@media (min-width:600px){
  #app{border-left:1px solid var(--line);border-right:1px solid var(--line);background:rgba(7,7,13,.55);backdrop-filter:blur(6px)}
}

/* ---------- header ---------- */
#header{flex:none;height:calc(var(--hdr-h) + var(--safe-t));padding:var(--safe-t) 14px 0;display:flex;align-items:center;justify-content:space-between;gap:8px;position:relative;z-index:30}
.cat-wrap{position:relative;flex:0 1 auto;min-width:0}
.cat-btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;padding:6px 10px 6px 6px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line)}
.cat-ico{width:24px;height:24px;border-radius:50%;background:conic-gradient(from 200deg,#ff7a1a,#ffd23f,#19ff8c,#2bb7ff,#a45cff,#ff7a1a);box-shadow:0 0 12px rgba(164,92,255,.7);position:relative}
.cat-ico::after{content:"";position:absolute;inset:6px;border-radius:50%;background:#0b0b14}
.cat-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.cat-btn svg{transition:transform .2s}
.cat-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:200px;padding:6px;border-radius:16px;background:rgba(18,19,36,.97);border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.6);display:flex;flex-direction:column;animation:pop .18s ease-out}
.cat-menu button{text-align:left;padding:11px 12px;border-radius:10px;font-weight:600;font-size:14px;display:flex;justify-content:space-between}
.cat-menu button.sel{background:linear-gradient(90deg,rgba(164,92,255,.35),rgba(43,183,255,.2))}
.cat-menu button:disabled{opacity:.45}.cat-menu em{font-style:normal;font-size:11px;color:var(--mut);align-self:center}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.97)}}

.limited{position:relative;flex:none;display:grid;place-items:center;width:104px;height:38px}
.limited span{position:relative;z-index:2;font-weight:900;font-size:12px;letter-spacing:.2em;padding:7px 12px 7px 14px;border-radius:7px;background:#05050a;color:#fff;border:1px solid rgba(255,255,255,.25);text-shadow:0 0 10px #8ff}
.limited .burst{position:absolute;inset:-8px -2px;z-index:1;border-radius:14px;background:conic-gradient(from 0deg,#2bb7ff,#a45cff,#ff4fd8,#2bb7ff,#19ff8c,#a45cff,#2bb7ff);filter:blur(9px);opacity:.9;animation:spin 5s linear infinite,pulse 1.8s ease-in-out infinite}
.limited::before,.limited::after{content:"✦";position:absolute;z-index:3;font-size:10px;color:#fff;text-shadow:0 0 8px #6df0ff;animation:twinkle 1.6s ease-in-out infinite}
.limited::before{left:-2px;top:-3px}.limited::after{right:-1px;bottom:-4px;animation-delay:-.8s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{50%{opacity:.5;scale:.94 1}}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}

.bal{flex:1 1 0;min-width:0;white-space:nowrap;display:flex;justify-content:flex-end;align-items:stretch;gap:0}
.pill{display:flex;flex-direction:column;justify-content:center;padding:3px 12px;min-width:0;border-radius:12px 0 0 12px;background:rgba(255,255,255,.07);border:1px solid var(--line);border-right:0;line-height:1.05}
.pill small{font-size:8.5px;letter-spacing:.14em;color:var(--green);font-weight:800}
.pill b{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill.bump b{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.18);color:var(--green)}}
.plus{width:38px;border-radius:0 12px 12px 0;background:linear-gradient(135deg,#3dffa0,#00c46a);color:#032;font-size:26px;font-weight:900;line-height:1;box-shadow:0 0 18px rgba(25,255,140,.55);transition:transform .15s}
.plus:active{transform:scale(.92)}

/* ---------- screens ---------- */
#main{flex:1;min-height:0;position:relative}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:4px 0 18px;-webkit-overflow-scrolling:touch;scrollbar-width:none;animation:fadeUp .35s ease-out}
.screen::-webkit-scrollbar{display:none}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}}
.pad{padding:0 18px}
h1.title{margin:6px 18px 4px;font-size:26px;font-weight:900;letter-spacing:-.02em}
.sub{margin:0 18px 14px;color:var(--mut);font-size:13.5px}
.playtag{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 auto 0;width:max-content;max-width:92%;padding:5px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#9dffcf;background:rgba(25,255,140,.08);border:1px solid rgba(25,255,140,.25)}
.playtag i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse 1.8s infinite}

/* ---------- bottom nav ---------- */
#nav{position:relative;flex:none;z-index:30;height:calc(var(--nav-h) + var(--safe-b));padding-bottom:var(--safe-b);display:flex;background:linear-gradient(#0a0a12e6,#050509);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#8d90a8;font-size:10.5px;font-weight:600;position:relative;transition:color .2s}
#nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
#nav button.on{color:#fff}
#nav button.on svg{transform:translateY(-2px) scale(1.1);filter:drop-shadow(0 0 7px var(--orange))}
#nav button.on::before{content:"";position:absolute;top:0;width:30px;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--orange),var(--gold));box-shadow:0 0 12px var(--orange)}
#nav .dot{position:absolute;top:9px;left:calc(50% + 8px);min-width:8px;height:8px;border-radius:99px;background:var(--orange);font-style:normal}
#nav .dot:empty.ping{box-shadow:0 0 0 0 rgba(255,122,26,.8);animation:ring 1.6s infinite}
#nav #colCount{background:var(--purple);color:#fff;font-size:9px;font-weight:800;height:auto;padding:1px 5px;line-height:1.3;top:6px}
#nav #colCount:empty{display:none}
@keyframes ring{to{box-shadow:0 0 0 9px rgba(255,122,26,0)}}

/* ---------- pack carousel ---------- */
#s-packs{display:flex;flex-direction:column;overflow:hidden;padding:0 0 8px;--pw:min(52vw,210px)}
.carousel{flex:1 1 0;min-height:0;align-items:center;overflow-y:hidden;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;padding:14px calc(50% - var(--pw)/2) 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.carousel::-webkit-scrollbar{display:none}
.slide{-webkit-tap-highlight-color:transparent;flex:0 0 var(--pw);scroll-snap-align:center;scroll-snap-stop:always;display:grid;place-items:center;margin:0 6px;transition:transform .12s linear,opacity .12s linear;transform:scale(var(--s,.8));opacity:var(--o,.55);cursor:pointer;will-change:transform}
.dots{flex:none;display:flex;justify-content:center;gap:6px;margin:0 0 8px}
.dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.2);transition:all .25s}
.dots i.on{width:20px;background:var(--pc,#fff);box-shadow:0 0 10px var(--pc,#fff)}

.pack{--c1:#fff;--c2:#aaa;--c3:#333;position:relative;width:var(--pw);aspect-ratio:9/14.2;border-radius:10px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,var(--c1) 0%,var(--c2) 45%,var(--c3) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 18px 40px -8px var(--glow),0 0 50px -6px var(--glow)}
.pack::before{content:"";position:absolute;inset:0;z-index:1;background:
  repeating-linear-gradient(115deg,transparent 0 26px,rgba(255,255,255,.14) 26px 28px,transparent 28px 60px),
  linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 38%,transparent 52%);
  background-size:auto,250% 100%;background-position:0 0,150% 0;mix-blend-mode:soft-light;animation:foil 4.5s ease-in-out infinite}
.pack::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 12%,transparent 88%,rgba(0,0,0,.35)),linear-gradient(rgba(255,255,255,.28),transparent 18%,transparent 80%,rgba(0,0,0,.3))}
@keyframes foil{0%{background-position:0 0,150% 0}60%,100%{background-position:0 0,-60% 0}}
.crimp{position:absolute;left:0;right:0;height:7.5%;z-index:3;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 2px,rgba(0,0,0,.28) 2px 5px),
  linear-gradient(#e9b98a,#a8643a 55%,#e9b98a);background-blend-mode:overlay,normal}
.crimp.top{top:0;border-bottom:1px solid rgba(0,0,0,.35)}.crimp.bot{bottom:0;border-top:1px solid rgba(0,0,0,.35)}
.pack .emblem{position:absolute;z-index:2;top:12%;left:50%;width:30%;transform:translateX(-50%);filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.pack .word{position:absolute;z-index:2;top:40%;left:9%;width:82%;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(255,255,255,.35))}
.pack .band{position:absolute;z-index:2;left:0;right:0;top:57%;height:11%;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:900;font-size:calc(var(--pw)*.1);letter-spacing:.08em;color:#fff;border-block:1px solid rgba(255,255,255,.3)}
.pack .band em{font-style:normal;color:var(--c1)}
.pack .foot{position:absolute;z-index:2;left:0;right:0;bottom:7.5%;height:17%;background:linear-gradient(transparent,rgba(0,0,0,.82) 35%);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:4%;line-height:1.15;text-transform:uppercase;font-size:calc(var(--pw)*.052);font-weight:800;letter-spacing:.14em;color:#fff}
.pack .foot b{color:var(--c1);font-weight:900}
.pack .foot small{font-size:.72em;opacity:.7;letter-spacing:.2em}

.info{flex:none;padding:0 18px;text-align:center;animation:fadeUp .3s}
.info h2{margin:2px 0 10px;font-size:23px;font-weight:900;letter-spacing:-.02em}
.inside{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid var(--line);font-weight:700;font-size:14px;transition:background .2s,transform .15s}
.inside:hover{background:rgba(255,255,255,.16)}.inside:active{transform:scale(.96)}
.inside svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stats{display:grid;grid-template-columns:1fr 1.25fr 1fr;margin:14px 0 14px;border-block:1px solid var(--line);text-align:center}
.stats>div{padding:11px 4px 10px}
.stats>div+div{border-left:1px solid var(--line)}
.stats small{display:block;font-size:11.5px;color:var(--mut);margin-bottom:3px;font-weight:600}
.stats b{font-size:17px}
.stats .max b{font-size:25px;line-height:1;background:linear-gradient(90deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 10px rgba(255,210,63,.55))}
.stats .style b{display:inline-flex;gap:2px;align-items:center}
.buy{position:relative;width:100%;height:56px;border-radius:999px;font-weight:900;font-size:19px;letter-spacing:.01em;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 10px 30px -6px var(--glow),0 0 0 1px rgba(255,255,255,.3) inset;text-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .15s,filter .2s}
.buy:active{transform:scale(.97)}
.buy::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:sweep 3s ease-in-out infinite}
@keyframes sweep{55%,100%{transform:translateX(120%)}}
.buy.poor{filter:saturate(.55) brightness(.8)}

/* ---------- sheets ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(2,2,8,.7);backdrop-filter:blur(4px);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;left:50%;bottom:0;z-index:61;width:100%;max-width:520px;transform:translateX(-50%);max-height:88dvh;overflow-y:auto;border-radius:26px 26px 0 0;background:linear-gradient(#1a1b34,#0d0e1c);border:1px solid var(--line);border-bottom:0;padding:10px 20px calc(24px + var(--safe-b));animation:slideUp .32s cubic-bezier(.2,.9,.25,1);box-shadow:0 -20px 60px rgba(0,0,0,.6)}
@keyframes slideUp{from{transform:translate(-50%,100%)}}
.sheet.closing{transform:translate(-50%,100%);transition:transform .22s ease-in}
.grab{width:42px;height:5px;border-radius:9px;background:rgba(255,255,255,.2);margin:0 auto 14px}
.sheet h3{margin:0 0 4px;font-size:21px;font-weight:900}
.sheet p.note{margin:0 0 16px;font-size:12.5px;color:var(--mut)}
.odds-row{display:grid;grid-template-columns:128px 1fr 50px;gap:10px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.odds-row .rng{font-weight:800;font-size:12.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.odds-row .rng small{display:block;font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tc)}
.odds-row .bar{height:12px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.odds-row .bar i{display:block;height:100%;border-radius:99px;background:var(--tb);box-shadow:0 0 12px var(--tg);min-width:5px;transform-origin:left;animation:grow .7s cubic-bezier(.2,.9,.25,1) backwards}
@keyframes grow{from{transform:scaleX(0)}}
.odds-row .pc{text-align:right;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.btn{display:block;width:100%;height:50px;border-radius:999px;font-weight:800;font-size:16px;background:rgba(255,255,255,.1);border:1px solid var(--line);transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg,var(--orange),#ff3d00);border:0;box-shadow:0 8px 24px -6px rgba(255,90,0,.7)}
.btn.green{background:linear-gradient(135deg,#3dffa0,#00b862);color:#022;border:0;box-shadow:0 8px 24px -6px rgba(25,255,140,.6)}
.btn.danger{background:rgba(255,60,80,.15);border-color:rgba(255,60,80,.45);color:#ff8d99}
.btn[disabled]{opacity:.45;box-shadow:none}
.btn+.btn{margin-top:10px}
.fund-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.fund-grid button{padding:16px 0;border-radius:18px;font-weight:900;font-size:22px;background:linear-gradient(160deg,rgba(25,255,140,.18),rgba(25,255,140,.04));border:1px solid rgba(25,255,140,.35);color:#c9ffe5;transition:transform .15s}
.fund-grid button:active{transform:scale(.95)}
.fund-grid small{display:block;font-size:10.5px;font-weight:700;color:#7dd9ab;letter-spacing:.1em}
.field{width:100%;height:50px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:#fff;font:inherit;font-size:16px;padding:0 14px;margin:6px 0 12px;outline:none}
.field:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(43,183,255,.25)}
.setrow{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid var(--line);font-weight:600}
.switch{width:50px;height:30px;border-radius:99px;background:rgba(255,255,255,.15);position:relative;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s}
.switch[aria-checked=true]{background:var(--green)}.switch[aria-checked=true]::after{transform:translateX(20px)}

#toasts{position:absolute;left:0;right:0;top:calc(var(--hdr-h) + var(--safe-t) + 6px);z-index:90;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{padding:10px 18px;border-radius:999px;background:rgba(20,22,44,.97);border:1px solid var(--line);font-weight:700;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:toast 2.6s forwards}
.toast.good{border-color:rgba(25,255,140,.5);color:#bfffdf}.toast.bad{border-color:rgba(255,80,100,.5);color:#ffb0ba}
@keyframes toast{0%{opacity:0;transform:translateY(-14px) scale(.9)}8%,85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}

/* ---------- cards ---------- */
.card{--cw:100%;position:relative;width:var(--cw);aspect-ratio:5/7;perspective:900px}
.card .inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.25,.9,.3,1.15)}
.card.flipped .inner{transform:rotateY(180deg)}
.card .side{position:absolute;inset:0;border-radius:calc(var(--cw)*.06 + 3px);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card .front{border:2px solid var(--tc);box-shadow:0 0 18px -2px var(--tg),0 0 0 1px rgba(0,0,0,.4) inset}
.card.glow .front{box-shadow:0 0 30px 2px var(--tg),0 0 70px 6px var(--tg)}
.card .front .face{position:absolute;inset:0;width:100%;height:100%;display:block}
.card .front::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(112deg,transparent 28%,rgba(255,255,255,.4) 45%,transparent 60%);background-size:260% 100%;background-position:130% 0;mix-blend-mode:soft-light;animation:shine 4s ease-in-out infinite}
.t-gold .front::after,.t-diamond .front::after{opacity:1;animation-duration:2.6s}
.t-diamond .front::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:color-dodge;opacity:.45;background:conic-gradient(from 0deg at 30% 20%,#ff7bd5,#7bffea,#fff59b,#9b8bff,#ff7bd5);animation:hue 5s linear infinite}
@keyframes shine{0%{background-position:130% 0}55%,100%{background-position:-40% 0}}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.card .vb{position:absolute;z-index:3;left:calc(var(--cw)*.045);top:calc(var(--cw)*.045);padding:calc(var(--cw)*.018) calc(var(--cw)*.05);border-radius:99px;font-weight:900;font-size:max(9px,calc(var(--cw)*.075));background:rgba(8,8,16,.72);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(2px);font-variant-numeric:tabular-nums;line-height:1.15}
.card .back{transform:rotateY(180deg)}
.card .cardback{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#2b2f66,#0b0c1d 70%);border:2px solid rgba(255,255,255,.18);border-radius:inherit;display:grid;place-items:center;overflow:hidden}
.card .cardback::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 14px)}
.card .cardback span{position:relative;font-weight:900;font-size:calc(var(--cw)*.5);color:rgba(255,255,255,.14)}
/* face-down is the default for rip cards: flip rotates to show .front. Layout: back shown by default, front on flip */
.card.rip .inner{transform:rotateY(0)}
.card.rip .front{transform:rotateY(180deg)}
.card.rip .back{transform:none}
.card.rip.flipped .inner{transform:rotateY(180deg)}

/* ---------- rip overlay ---------- */
.rip{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(90% 70% at 50% 45%,var(--rg,#2a1a5a) 0%,#05050c 70%) #05050c;animation:fade .25s}
.rip .skip{position:absolute;top:calc(14px + var(--safe-t));right:16px;z-index:5;padding:8px 14px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid var(--line);font-weight:700;font-size:13px}
.rip .stage{position:relative;width:min(100vw,520px);height:min(70dvh,640px);display:grid;place-items:center}
.rays{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg at 50% 50%,var(--rc,#fff4) 0 6deg,transparent 6deg 18deg);mask-image:radial-gradient(circle,#000 0,transparent 60%);opacity:0;animation:spin 14s linear infinite}
.rays.on{opacity:.55;transition:opacity .4s}
.rip-pack{cursor:pointer;position:relative;width:min(58vw,240px);aspect-ratio:9/14.2;--pw:min(58vw,240px)}
.rip-pack .part{position:absolute;inset:0}
.rip-pack .part .pack{width:100%;height:100%;aspect-ratio:auto;box-shadow:0 0 70px -4px var(--glow)}
.rip-pack .p-top{clip-path:inset(0 0 84% 0);z-index:2}
.rip-pack .p-body{clip-path:inset(15.5% 0 0 0)}
.rip-pack.shake{animation:shake .14s linear infinite}
.rip-pack.charge{animation:shake .09s linear infinite,charge 1.2s ease-in forwards}
@keyframes shake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-5px,2px) rotate(-1.6deg)}50%{transform:translate(4px,-3px) rotate(1.4deg)}75%{transform:translate(-3px,-2px) rotate(-.8deg)}100%{transform:translate(0,0)}}
@keyframes charge{to{scale:1.12;filter:brightness(1.7) saturate(1.4) drop-shadow(0 0 30px #fff)}}
.rip-pack.tear .p-top{animation:tearTop .75s cubic-bezier(.3,.1,.5,1) forwards}
.rip-pack.tear .p-body{animation:tearBody .7s ease-in .08s forwards}
@keyframes tearTop{to{transform:translate(70px,-62vh) rotate(38deg);opacity:0}}
@keyframes tearBody{to{transform:translateY(60vh) scale(.9);opacity:0}}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:4}
.flash.go{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.hint{position:absolute;bottom:calc(40px + var(--safe-b));left:0;right:0;text-align:center;font-weight:800;letter-spacing:.14em;font-size:13px;text-transform:uppercase;color:#cfd3ff;animation:pulse 1.4s infinite}
.deck{position:absolute;inset:0;display:grid;place-items:center}
.deck .card{--cw:min(62vw,270px);position:absolute;transition:transform .5s cubic-bezier(.3,.9,.3,1),opacity .4s;cursor:pointer}
.deck .card.enter{animation:dealIn .55s cubic-bezier(.2,.9,.3,1.2) backwards}
@keyframes dealIn{from{transform:translateY(120px) scale(.4) rotate(-12deg);opacity:0}}
.deck .card.gone{transform:translate(-120vw,-8vh) rotate(-28deg)!important;opacity:0;pointer-events:none}
.deck .card.top:not(.flipped){animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{translate:0 -8px}}
.cardinfo{position:absolute;left:0;right:0;bottom:calc(46px + var(--safe-b));text-align:center;min-height:90px}
.cardinfo .tier{font-weight:900;letter-spacing:.3em;font-size:13px;color:var(--tc);text-shadow:0 0 14px var(--tg);text-transform:uppercase;animation:fadeUp .35s}
.cardinfo .val{font-weight:900;font-size:46px;line-height:1.1;font-variant-numeric:tabular-nums;animation:pop2 .5s cubic-bezier(.2,.9,.3,1.4)}
@keyframes pop2{from{transform:scale(.4);opacity:0}}
.cardinfo .tap{font-size:12px;font-weight:700;letter-spacing:.16em;color:#9aa0c8;text-transform:uppercase;animation:pulse 1.4s infinite}
.prog{position:absolute;top:calc(22px + var(--safe-t));left:0;right:0;display:flex;justify-content:center;gap:6px}
.prog i{width:26px;height:5px;border-radius:9px;background:rgba(255,255,255,.18);transition:background .3s}
.prog i.done{background:var(--tc,#fff);box-shadow:0 0 8px var(--tg,#fff)}
.prog i.cur{background:#fff}
.burst-fx{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:3}
.burst-fx i{position:absolute;width:var(--sz,8px);height:var(--sz,8px);margin:calc(var(--sz,8px)/-2);border-radius:50%;background:var(--tc);box-shadow:0 0 12px var(--tc);animation:part .9s cubic-bezier(.1,.8,.3,1) forwards}
@keyframes part{to{transform:translate(var(--x),var(--y)) scale(0);opacity:0}}
.burst-fx .ring{width:60px;height:60px;margin:-30px;background:none;border:4px solid var(--tc);animation:ringx .8s ease-out forwards}
@keyframes ringx{to{transform:scale(7);opacity:0;border-width:1px}}
.rip.shakeScreen .stage{animation:shake .12s linear 5}
.glowflash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 42%,var(--tg),transparent 60%);opacity:0;z-index:1}
.glowflash.go{animation:flash .9s ease-out}

/* summary */
.summary{width:100%;max-width:520px;height:100%;display:flex;flex-direction:column;padding:calc(18px + var(--safe-t)) 16px calc(16px + var(--safe-b));animation:fadeUp .4s}
.summary h2{margin:0;text-align:center;font-size:15px;letter-spacing:.3em;color:var(--mut);font-weight:800}
.summary .total{text-align:center;font-size:clamp(32px,11vw,54px);font-weight:900;line-height:1.1;background:linear-gradient(90deg,#fff,var(--tcx,#ffd23f));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px var(--tgx,rgba(255,210,63,.5)))}
.summary .vs{text-align:center;font-weight:800;font-size:14px;margin-bottom:10px}
.summary .vs.up{color:var(--green)}.summary .vs.down{color:#ff8d99}
.sgrid{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;align-content:start;padding:8px 4px 14px;scrollbar-width:none}
.sgrid .card{--cw:100%;cursor:pointer;animation:dealIn .5s backwards}
.sgrid .card.sell .front{filter:grayscale(.85) brightness(.55)}
.sgrid .tag{position:absolute;z-index:4;left:50%;bottom:6%;transform:translateX(-50%);padding:3px 10px;border-radius:99px;font-size:10px;font-weight:900;letter-spacing:.1em;background:var(--green);color:#022;box-shadow:0 0 12px rgba(25,255,140,.6)}
.sgrid .card.sell .tag{background:var(--orange);color:#200;box-shadow:0 0 12px rgba(255,122,26,.7)}
.sbar{display:flex;gap:8px;margin-bottom:10px}
.chip{flex:1;padding:9px 0;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-weight:800;font-size:13px}
.chip.on{background:rgba(255,255,255,.2);border-color:#fff6}
.sfoot .meta{text-align:center;font-size:13px;color:var(--mut);margin-bottom:8px;font-weight:600}
.sfoot .meta b{color:#fff}
.row2{display:flex;gap:10px}.row2 .btn{margin:0}

/* ---------- collection ---------- */
.col-head{display:flex;justify-content:space-between;align-items:flex-end;padding:6px 18px 10px}
.col-head h1{margin:0;font-size:26px;font-weight:900;letter-spacing:-.02em}
.col-head .val{text-align:right;font-size:12px;color:var(--mut);font-weight:600}
.col-head .val b{display:block;font-size:20px;color:#fff}
.filters{display:flex;gap:8px;overflow-x:auto;padding:0 18px 12px;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters .chip{flex:none;padding:8px 14px}
.filters .chip[data-t]{border-color:var(--tg)}
.filters .chip.on[data-t]{background:var(--tb);color:#111;border-color:transparent;box-shadow:0 0 14px var(--tg)}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;padding:4px 18px}
.cgrid .card{cursor:pointer;transition:transform .2s}
.cgrid .card:active{transform:scale(.95)}
.cgrid .card:hover{transform:translateY(-3px)}
.cgrid .card{animation:fadeUp .4s backwards}
.empty{text-align:center;padding:44px 30px;color:var(--mut)}
.empty .big{font-size:54px;margin-bottom:6px;filter:drop-shadow(0 0 16px rgba(164,92,255,.7))}
.empty h3{color:#fff;margin:0 0 6px;font-size:20px}
.empty .btn{max-width:240px;margin:18px auto 0}
.detail{display:flex;flex-direction:column;align-items:center;gap:6px}
.detail .card{--cw:min(56vw,240px);margin:6px 0 10px}
.detail .tier{font-weight:900;letter-spacing:.3em;font-size:13px;color:var(--tc);text-shadow:0 0 14px var(--tg);text-transform:uppercase}
.detail .val{font-size:40px;font-weight:900;line-height:1.1}
.detail .from{color:var(--mut);font-size:13px;margin-bottom:12px}

/* ---------- showroom ---------- */
.soon{margin:16px 18px;padding:22px 18px;border-radius:24px;text-align:center;background:linear-gradient(160deg,rgba(164,92,255,.2),rgba(43,183,255,.08));border:1px solid rgba(164,92,255,.35)}
.soon h3{margin:0 0 6px;font-size:20px}.soon p{margin:0;color:var(--mut);font-size:14px}
.badge-soon{display:inline-block;margin-bottom:10px;padding:4px 12px;border-radius:99px;font-size:11px;font-weight:900;letter-spacing:.18em;background:linear-gradient(90deg,var(--purple),var(--blue));}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:6px 18px}
.case{aspect-ratio:5/7;border-radius:14px;border:1px dashed rgba(255,255,255,.2);background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.01));display:grid;place-items:center;position:relative;overflow:hidden;font-size:26px;color:rgba(255,255,255,.35)}
.case::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 48%,transparent 60%);background-size:250% 100%;animation:shine 4s infinite}
.case:nth-child(2)::after{animation-delay:-1s}.case:nth-child(3)::after{animation-delay:-2s}
.case:nth-child(2){animation:bob 3s ease-in-out infinite}

/* ---------- rewards ---------- */
.daily{margin:6px 18px 0;padding:20px 16px;border-radius:26px;position:relative;overflow:hidden;background:linear-gradient(150deg,#2b1065,#101a4a 60%,#0a2a3a);border:1px solid rgba(164,92,255,.45);box-shadow:0 0 40px -10px rgba(164,92,255,.7)}
.daily::before{content:"";position:absolute;width:260px;height:260px;right:-80px;top:-100px;background:radial-gradient(circle,rgba(255,210,63,.45),transparent 65%)}
.daily h3{position:relative;margin:0;font-size:22px;font-weight:900}
.daily p{position:relative;margin:2px 0 14px;color:#b9bcdc;font-size:13.5px}
.days{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:16px}
.day{aspect-ratio:3/4;border-radius:11px;background:rgba(255,255,255,.07);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:9px;font-weight:700;color:var(--mut)}
.day b{font-size:11.5px;color:#fff}
.day.done{background:linear-gradient(160deg,rgba(25,255,140,.35),rgba(25,255,140,.1));border-color:rgba(25,255,140,.6)}
.day.next{background:linear-gradient(160deg,rgba(255,210,63,.4),rgba(255,122,26,.2));border-color:var(--gold);box-shadow:0 0 16px rgba(255,210,63,.55);animation:pulse 1.6s infinite}
.day.last-day{grid-column:auto}
.claim{position:relative}
.timer{position:relative;text-align:center;font-weight:700;color:#b9bcdc;font-size:14px}
.mission{display:flex;align-items:center;gap:12px;margin:12px 18px 0;padding:14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line);opacity:.7}
.mission .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:rgba(255,255,255,.08)}
.mission b{display:block}.mission small{color:var(--mut)}
.mission .lock{margin-left:auto;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--mut)}
.h-sec{margin:22px 18px 0;font-size:13px;font-weight:800;letter-spacing:.14em;color:var(--mut);text-transform:uppercase}

/* ---------- account ---------- */
.profile{display:flex;flex-direction:column;align-items:center;padding:10px 18px 4px}
.avatar{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:40px;font-weight:900;color:#fff;background:conic-gradient(from 160deg,var(--orange),var(--pink),var(--purple),var(--blue),var(--green),var(--orange));position:relative;box-shadow:0 0 36px -4px rgba(164,92,255,.8);margin-bottom:10px}
.avatar::after{content:"";position:absolute;inset:4px;border-radius:50%;background:#10112a;z-index:0}
.avatar span{position:relative;z-index:1}
.profile h2{margin:0;font-size:24px;font-weight:900}
.profile .joined{color:var(--mut);font-size:13px;margin-top:3px}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 18px 0}
.stat{padding:14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.stat small{display:block;color:var(--mut);font-size:12px;font-weight:600;margin-bottom:4px}
.stat b{font-size:22px}
.stat.wide{grid-column:span 2;display:flex;align-items:center;gap:14px;background:linear-gradient(120deg,rgba(255,210,63,.14),rgba(255,122,26,.05));border-color:rgba(255,210,63,.35)}
.stat.wide .mini{--cw:48px;flex:none}
.stat.wide b{font-size:28px}
.acct-actions{padding:16px 18px 0}
.legal{margin:18px 24px 0;text-align:center;font-size:11.5px;color:#6d7090;line-height:1.5}

@media (max-height:760px){
  .info h2{font-size:20px;margin:0 0 6px}.inside{padding:7px 14px}.stats{margin:8px 0}.stats>div{padding:6px 4px}.stats .max b{font-size:21px}.buy{height:50px;font-size:18px}.playtag{margin-top:0}
}
@media (max-height:600px){.stats small{display:none}.stats>div{padding:4px}.pill small{display:none}}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.reduce-motion *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.rip-pack.idle{animation:idle 2.6s ease-in-out infinite}
@keyframes idle{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}

/* =====================================================================
   Camp Firwood + Available cards
   ===================================================================== */
.t-emerald{--tc:#3fd994;--tg:rgba(20,170,100,.85);--tb:linear-gradient(90deg,#0a7a45,#b7f0d2)}
#nav button{min-width:0}
#nav span{font-size:10px}
.fwpack .word{top:36%;left:6%;width:88%}
.fwpack .emblem{top:10%;width:36%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.fwpack .band em{color:var(--acc)}
.fwpack .foot b{color:var(--acc);font-size:.82em;letter-spacing:.1em}
.fwpack::before{background:
  repeating-linear-gradient(115deg,transparent 0 26px,rgba(255,255,255,.12) 26px 28px,transparent 28px 60px),
  radial-gradient(circle at 50% 100%,rgba(255,138,31,.55),transparent 55%),
  linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 38%,transparent 52%);
  background-size:auto,auto,250% 100%;background-position:0 0,0 0,150% 0}
@keyframes foil2{0%{background-position:0 0,0 0,150% 0}60%,100%{background-position:0 0,0 0,-60% 0}}
.fwpack::before{animation-name:foil2}
.fwpack{box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 18px 40px -8px var(--glow),0 0 54px -4px rgba(255,138,31,.55)}

/* firwood card faces carry their own frame */
.card.fw .front{border:0;border-radius:calc(var(--cw)*.075 + 2px);background:#000}
.card.fw .front::after{animation:none;opacity:0}
.card.fw .vb{left:50%;top:auto;bottom:calc(var(--cw)*.03);transform:translateX(-50%);font-size:max(9px,calc(var(--cw)*.085));padding:calc(var(--cw)*.012) calc(var(--cw)*.06);background:rgba(4,8,6,.82);border-color:var(--tc);white-space:nowrap}
.card.fw.t-emerald .front{box-shadow:0 0 18px 3px rgba(20,170,100,.9),0 0 46px 8px rgba(16,140,80,.55)}
.card.fw.t-diamond .front{box-shadow:0 0 18px 3px rgba(246,227,189,.95),0 0 48px 10px rgba(191,227,238,.55)}
.card.fw.t-diamond:not(.shiny) .front::before{display:none}
.card.fw.t-emerald.glow .front{animation:emPulse 1.5s ease-in-out infinite}
.card.fw.t-diamond.glow .front{animation:diPulse 2s linear infinite}
@keyframes emPulse{50%{box-shadow:0 0 34px 8px rgba(20,175,100,.95),0 0 100px 26px rgba(14,140,80,.6)}}
@keyframes diPulse{0%,100%{box-shadow:0 0 34px 8px rgba(246,227,189,1),0 0 100px 26px rgba(246,227,189,.55)}50%{box-shadow:0 0 34px 8px rgba(191,227,238,1),0 0 100px 26px rgba(191,227,238,.55)}}
.card .cardback.fwback{background:#0f0b08;border:0;display:block}
.card .cardback.fwback::before{display:none}
.card .cardback.fwback svg{position:absolute;inset:0;width:100%;height:100%;display:block}

/* shiny = animated holo foil */
.card.shiny .front::before,.card.shiny .front::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:1}
.card.shiny .front::before{background:linear-gradient(125deg,rgba(232,178,122,.28),rgba(246,226,168,.3),rgba(217,144,138,.24),rgba(241,210,140,.3),rgba(232,178,122,.28));background-size:300% 300%;mix-blend-mode:overlay;animation:holoBg 5s linear infinite;filter:none}
.card.shiny .front::after{background:linear-gradient(112deg,transparent 22%,rgba(255,255,255,.0) 32%,rgba(255,244,215,.55) 46%,rgba(255,226,170,.35) 52%,rgba(255,244,215,.3) 58%,transparent 70%);background-size:300% 100%;background-position:130% 0;mix-blend-mode:soft-light;animation:holoSweep 2.4s ease-in-out infinite}
@keyframes holoBg{to{background-position:300% 300%}}
@keyframes holoSweep{0%{background-position:130% 0}60%,100%{background-position:-60% 0}}
.card.shiny:not(.live):not(.glow) .front::before,.card.shiny:not(.live):not(.glow) .front::after{animation-play-state:paused}
.card.shiny .front{outline:1px solid rgba(255,230,170,.4)}

/* grids: count badges */
.cbadges{position:absolute;z-index:6;top:calc(var(--cw)*.04);right:calc(var(--cw)*.04);display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:none}
.cbadges b{padding:2px 7px;border-radius:99px;font-size:11px;font-weight:900;background:rgba(5,6,12,.88);border:1px solid rgba(255,255,255,.5);color:#fff;line-height:1.2}
.cbadges b.sh{background:linear-gradient(90deg,#ff5ecb,#ffe45e,#5effa0,#5ec8ff);color:#101018;border-color:#fff}

/* detail sheet extras */
.detail .detailcard .card{--cw:min(56vw,250px);margin:6px 0 8px}
.detail .dname{font-size:26px;font-weight:900;line-height:1.1;text-align:center}
.detail .vrows{align-self:stretch;margin:6px 0 12px}
.vrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.vrow b{display:block;font-size:15px}.vrow small{color:var(--mut);font-size:12px}
.vrow.s b:first-child{background:linear-gradient(90deg,#ff5ecb,#ffe45e,#5effa0,#5ec8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.vrow .vv{font-size:20px}
.vbtns{display:flex;gap:6px}
.mini-btn{padding:8px 12px;border-radius:99px;font-weight:800;font-size:12.5px;background:rgba(255,80,100,.15);border:1px solid rgba(255,80,100,.45);color:#ffb0ba}
.seg{display:flex;gap:4px;padding:3px;border-radius:99px;background:rgba(255,255,255,.07);border:1px solid var(--line);margin:6px 0 8px}
.seg button{flex:1;padding:8px 6px;border-radius:99px;font-weight:800;font-size:13px;color:var(--mut);transition:all .2s;white-space:nowrap}
.seg button.on{background:linear-gradient(135deg,var(--orange),#ff3d00);color:#fff;box-shadow:0 4px 14px -4px rgba(255,90,0,.8)}
.detail .seg{align-self:stretch}

/* available cards */
.pad-seg{margin-top:0}
.dex-top{padding-bottom:2px}
.dex-search{margin:2px 0 4px;height:44px;-webkit-appearance:none;appearance:none}
.dex-count{font-size:12px;color:var(--mut);font-weight:700;margin:2px 2px 6px}
.dex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;padding:6px 18px 0}
.dex-grid .cell{content-visibility:auto;contain-intrinsic-size:auto 150px}
.dex-grid .card{cursor:pointer;transition:transform .15s}
.dex-grid .card:active{transform:scale(.95)}
.dex-h{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:14px;padding:9px 12px;border-radius:14px;background:linear-gradient(90deg,var(--tg),rgba(255,255,255,.04));border:1px solid var(--tc)}
.dex-h b{font-size:16px;font-weight:900;letter-spacing:.02em;color:#fff}
.dex-h span{font-size:11px;color:#e6e9ff;font-weight:700;text-align:right}
.dex-s{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:4px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tc)}
.dex-s span{color:var(--mut)}
.dex-sentinel{height:60px}
.dex-grid .empty{grid-column:1/-1}

/* epic reveals (legendary / platinum) */
.deck .card{--cw:min(62vw,270px,calc((var(--app-h,100dvh) - 360px)*.714))}
.cardinfo .cname{font-weight:900;font-size:22px;line-height:1.15;margin:2px 0 0;padding:0 16px;text-shadow:0 2px 10px rgba(0,0,0,.6);animation:fadeUp .35s}
.cardinfo.fwinfo .val{font-size:38px}
.deck .card.charging{animation:charge2 1s ease-in forwards!important;z-index:200!important}
@keyframes charge2{0%{transform:scale(1)}20%{transform:translate(-5px,2px) rotate(-1.5deg) scale(1.04)}40%{transform:translate(5px,-3px) rotate(1.5deg) scale(1.08)}60%{transform:translate(-6px,3px) rotate(-2deg) scale(1.12)}80%{transform:translate(6px,-3px) rotate(2deg) scale(1.16)}100%{transform:scale(1.2);filter:brightness(1.6) saturate(1.5) drop-shadow(0 0 40px var(--tc))}}
.rip.epic{animation:epicBg 1.2s ease-in-out infinite}
.rip.epic-emerald{--rg:#0a6a38}.rip.epic-diamond{--rg:#6a5a3a}
@keyframes epicBg{50%{filter:brightness(1.35) saturate(1.3)}}
.rip.epic .rays{animation-duration:3s;opacity:.8}
.epic-banner{position:absolute;z-index:30;left:0;right:0;top:15%;text-align:center;font-weight:900;font-size:clamp(34px,12vw,58px);letter-spacing:.04em;color:#fff;pointer-events:none;text-shadow:0 0 18px var(--tc),0 0 40px var(--tc),0 4px 0 rgba(0,0,0,.4);animation:slam 2.2s cubic-bezier(.2,.9,.3,1.3) forwards}
.epic-banner.small{font-size:clamp(22px,7vw,32px);top:12%;animation-duration:1.4s}
.epic-banner.t-diamond{background:linear-gradient(90deg,#f6e3bd,#fff,#bfe3ee,#fff3da,#f6e3bd);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 16px #fff);animation:slam 2.2s cubic-bezier(.2,.9,.3,1.3) forwards,hueRoll 1s linear infinite}
@keyframes hueRoll{to{background-position:300% 0}}
@keyframes slam{0%{opacity:0;transform:scale(3) rotate(-4deg)}14%{opacity:1;transform:scale(1) rotate(0)}22%{transform:scale(1.08)}30%,80%{transform:scale(1);opacity:1}100%{opacity:0;transform:translateY(-30px) scale(.96)}}
.epic-flash{position:absolute;inset:0;z-index:25;pointer-events:none;background:radial-gradient(circle at 50% 45%,#fff 0,var(--tc) 35%,transparent 70%);opacity:0;animation:flash 1.2s ease-out}
.epic-flash.t-diamond{background:radial-gradient(circle at 50% 45%,#fff 0,#f6e3bd 28%,#bfe3ee 52%,transparent 75%)}
.burst-fx .ring.r2{animation-delay:.12s;border-width:3px}.burst-fx .ring.r3{animation-delay:.25s;border-width:2px}
.burst-fx .ring{animation-duration:1s}
.sgrid .card.fw .tag{bottom:auto;top:5%}
.sgrid .card.fw .cbadges{display:none}

/* Camp Firwood: muted deep-green emerald + warm pearl diamond (scoped so SLABS packs are untouched) */
.fwt.t-emerald,.fwt .t-emerald{--tc:#3fd994;--tg:rgba(20,170,100,.85);--tb:linear-gradient(90deg,#0a7a45,#b7f0d2)}
.fwt.t-diamond,.fwt .t-diamond{--tc:#f6e3bd;--tg:rgba(246,227,189,.9);--tb:linear-gradient(90deg,#f6e3bd,#fff,#bfe3ee)}
.fwt.t-bronze,.fwt .t-bronze{--tc:#c58a4a;--tg:rgba(197,138,74,.6);--tb:linear-gradient(90deg,#6a4310,#e0b676)}
.fwt.t-gold,.fwt .t-gold{--tc:#e6c36a;--tg:rgba(230,195,106,.7);--tb:linear-gradient(90deg,#a87a1a,#f6e2a2)}
.fwt .epic-banner.t-diamond{animation:slam 2.2s cubic-bezier(.2,.9,.3,1.3) forwards}
.fwt .epic-banner.small.t-diamond{animation-duration:1.4s}