/* ==========================================================================
   SwampRealms styles
   1 Base  2 Header + tab bar  3 Buttons  4 Layout  5 Home  6 Pack opener
   7 Cards  8 Packs/Collection  9 Dialogs  10 Shop  11 Fly Frenzy (flies + wasps, used by the Arcade)  12 Motion
   ========================================================================== */

/* ===== 1 Base ===== */
:root{
 --bg:#0d110a;--bg2:#171e10;--bg3:#1c2514;
 --gold:#f2c14e;--orange:#f2c14e;--reed:#7fb23a;--uncommon:#5fd38d;
 --text:#f6eedb;--muted:#f6eedbb3;--line:#ffffff1c;--radius:16px;
 --ease-out:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--ease-spring:cubic-bezier(.34,1.45,.64,1);
}
html{color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:76px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;min-height:100dvh;background:var(--bg);color:var(--text);font-family:Nunito,system-ui,sans-serif;font-weight:600;line-height:1.5}
/* soft swamp glow behind everything (a fixed layer, not background-attachment, so it stays smooth on phones) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 500px at 50% -120px,#24331a 0,transparent 70%)}
h1,.logo{font-family:'Bagel Fat One',Impact,sans-serif;font-weight:400}
h2{margin:0 0 6px;font:800 clamp(26px,5vw,36px)/1.15 Nunito,system-ui,sans-serif;letter-spacing:-.015em;color:var(--text)}
a{color:inherit}
[hidden]{display:none!important}
.sub{margin:0 auto 22px;max-width:52ch;color:var(--muted)}
.sub.small{font-size:14px;margin-top:14px}
.new{min-height:24px;color:var(--gold);font-weight:800}
.coin{display:inline-block;width:18px;height:18px;margin-right:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px #b8860b inset;vertical-align:-3px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ===== 2 Header + tab bar ===== */
header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;
 padding:calc(10px + env(safe-area-inset-top,0px)) max(18px,calc((100vw - 980px)/2)) 10px;
 background:#0d110af0;border-bottom:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
 view-transition-name:site-header;transition:box-shadow .35s var(--ease-out),border-color .35s}
header.scrolled{box-shadow:0 10px 28px -14px #000d;border-bottom-color:#ffffff26}
.logo{display:inline-flex;align-items:center;gap:9px;font-size:24px;letter-spacing:.01em;line-height:1;color:var(--gold);text-decoration:none}
.logo .mark{flex:none;filter:drop-shadow(0 2px 6px #0008)}
header nav{display:flex;align-items:center;gap:22px;font-size:15px;font-weight:700}
header nav a{position:relative;text-decoration:none;opacity:.8;transition:opacity .2s,color .2s}
header nav a:hover{opacity:1}
header nav a[aria-current=page]{opacity:1;color:var(--gold)}
header nav a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--gold)}
header nav .hide{display:none}
@media(min-width:640px){header nav .hide{display:inline}}
/* coin bank (top right) */
header nav .bank{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px 6px 10px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;font-size:15px;font-weight:800;line-height:1;color:var(--text);opacity:1;transition:border-color .2s}
.bank::after{display:none}
.bank .coin{width:16px;height:16px;margin:0 7px 0 0;vertical-align:0;box-shadow:0 0 0 2.5px #b8860b inset}
.bank:hover{border-color:#f2c14e66}
/* phone tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));background:#0d110af2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);view-transition-name:tabbar}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 5px;border-radius:12px;font:800 11px Nunito,sans-serif;color:var(--muted);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:color .25s,transform .25s var(--ease-out)}
.tabbar a:active{transform:scale(.92)}
.tabbar a[aria-current=page]{color:var(--gold)}
.tabbar svg{width:24px;height:24px}
@media(max-width:639px){body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}}
@media(min-width:640px){.tabbar{display:none}}

/* ===== 3 Buttons ===== */
.btn{display:inline-block;border:0;border-radius:999px;padding:12px 26px;font:800 16px Nunito,sans-serif;background:var(--gold);color:#1a1405;cursor:pointer;text-decoration:none;
 transition:transform .3s var(--ease-out),filter .2s,box-shadow .25s,color .25s,opacity .25s}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:scale(.97);transition-duration:.1s}
.btn.ghost{background:none;color:var(--text);box-shadow:0 0 0 1.5px #f6eedb66 inset}
.btn.ghost:hover{box-shadow:0 0 0 1.5px var(--gold) inset;color:var(--gold);filter:none}
.btn[disabled]{opacity:.4;cursor:default;pointer-events:none}
.mini{padding:7px 12px;font-size:13px;margin-top:10px;line-height:1.2}
.row{display:flex;flex-wrap:wrap;gap:12px}

/* ===== 4 Layout ===== */
section{max-width:980px;margin:0 auto;padding:76px 18px 10px;text-align:center}
@media(max-width:639px){section{padding-top:56px}}
footer{margin-top:80px;padding:28px 18px calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);text-align:center;font-size:14px;color:var(--muted)}
footer .row{justify-content:center;gap:6px 18px;margin-bottom:14px}
footer p{max-width:60ch;margin:0 auto}
.coins{display:inline-block;margin-bottom:12px;padding:8px 18px;background:var(--bg2);border:1px solid var(--line);border-radius:999px;font-weight:800}
#score,#stash,#coinpill{display:inline-block}
.steps{counter-reset:s;list-style:none;margin:20px 0 0;padding:0;display:grid;gap:16px;text-align:left}
@media(min-width:700px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{counter-increment:s;padding:22px 20px;background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--line);border-radius:var(--radius);color:var(--muted);font-size:15px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:30px;height:30px;margin-bottom:14px;border-radius:50%;background:var(--gold);color:#1a1405;font:800 14px Nunito,sans-serif}
.steps b{display:block;margin-bottom:6px;font:800 19px Nunito,sans-serif;color:var(--text)}

/* ===== 5 Home ===== */
.hero{max-width:980px;margin:0 auto;padding:40px 18px 20px;text-align:center}
.hero p{margin:0 auto 22px;max-width:36ch}
.hero .row{justify-content:center}
h1{margin:0;font-size:clamp(56px,16vw,96px);line-height:.9;color:var(--gold)}
h1 span{display:block;margin-top:8px;font-size:.42em;color:var(--text)}
.tag{margin:14px auto 8px!important;font-size:20px;font-weight:700;color:var(--muted)}
.showcase{position:relative;display:block;width:clamp(150px,46vw,200px);aspect-ratio:2/3;margin:0 auto 30px;text-decoration:none}
.showcase .glow{position:absolute;inset:-34px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 55%,transparent),transparent);filter:blur(10px);pointer-events:none}
.showcase .card{rotate:-2deg;animation:floaty 5s var(--ease-in-out) infinite;box-shadow:0 0 0 2px var(--c),0 0 0 3px #0008,0 26px 44px -14px #000d,0 0 36px -6px color-mix(in srgb,var(--c) 70%,transparent)}
@media(hover:hover){.showcase .card{transition:rotate .5s var(--ease-out)}.showcase:hover .card{rotate:0deg}}
.showcase:focus-visible{outline-offset:8px;border-radius:var(--radius)}
/* your progress */
.status{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-width:720px;margin:34px auto 0}
@media(min-width:640px){.status{grid-template-columns:repeat(4,1fr)}}
.stat{display:block;padding:14px 8px 12px;background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;transition:transform .3s var(--ease-out),border-color .25s}
.stat:hover{transform:translateY(-3px);border-color:#f2c14e66}
.stat b{display:block;font:800 26px/1.1 Nunito,sans-serif;color:var(--gold);font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--muted)}
.stat small{display:block;font-size:11.5px;color:var(--muted);opacity:.8;font-variant-numeric:tabular-nums}
/* feature tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;max-width:920px;margin:26px auto 0;text-align:left}
.tile{display:block;padding:22px 20px;background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;transition:transform .3s var(--ease-out),border-color .25s}
.tile:hover{transform:translateY(-4px);border-color:#f2c14e66}
.tile:active{transform:scale(.98)}
.tile svg{display:block;width:30px;height:30px;margin-bottom:12px;color:var(--gold)}
.tile b{display:block;margin-bottom:4px;font:800 19px Nunito,sans-serif}
.tile span{color:var(--muted);font-size:14px}
/* rarity row */
.deck{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x proximity;padding:22px 18px 26px;margin:0 -18px;scrollbar-width:none}
.deck::-webkit-scrollbar{display:none}
.deck>*:first-child{margin-left:auto}.deck>*:last-child{margin-right:auto}
.dcard{position:relative;flex:none;width:150px;aspect-ratio:2/3;scroll-snap-align:center;text-decoration:none;transition:transform .4s var(--ease-out)}
.dcard:nth-child(odd){rotate:-1.2deg}.dcard:nth-child(even){rotate:1.2deg}
@media(hover:hover){.dcard:hover{transform:translateY(-8px) scale(1.03)}}
.dcard:focus-visible{outline-offset:5px;border-radius:var(--radius)}
.dcard .card{box-shadow:0 0 0 2px var(--c),0 0 0 3px #0008,0 18px 36px -10px #000c}

/* ===== 6 Pack opener ===== */
.stage{min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.stage>*{animation:fade-up .45s var(--ease-out) backwards}
/* every opening effect lives inside .ps so nothing shifts when the pack is swapped for the card */
.ps{position:relative;display:grid;place-items:center;width:250px;height:370px}
.ps::before{content:"";position:absolute;inset:-34px;z-index:0;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--c,var(--gold)) 20%,transparent),transparent);transition:background .6s}
.ps>.pack,.ps>.flip{grid-area:1/1}
.pack{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;width:190px;height:270px;padding:0;border:0;border-radius:0;cursor:pointer;color:#1a1405;text-align:center;
 background:none;box-shadow:none;filter:drop-shadow(0 16px 18px #000c) drop-shadow(0 0 1px #000);
 transition:transform .4s var(--ease-out),filter .3s}
.pack:not(.locked){animation:floaty 3.6s var(--ease-in-out) infinite}
@media(hover:hover){.pack:not(.locked):hover{transform:translateY(-4px) rotate(-1.5deg) scale(1.02)}}
.pack:not(.locked):active{transform:scale(.96);transition-duration:.1s}
.locked{opacity:.45;filter:grayscale(.6) drop-shadow(0 10px 12px #000a);cursor:default}
.pk-wrap{position:absolute;inset:0;display:block;overflow:visible}
.pk-art{display:block;width:100%;height:100%}
.pk-sheen{animation:pksheen 6s var(--ease-in-out) 1.2s infinite}
.locked .pk-sheen,.ptile .pk-sheen{animation:none;opacity:0}
.strip{position:absolute;left:1.5%;right:1.5%;top:0;z-index:1;height:8.6%;border-bottom:1px solid #0009;transform-origin:0 100%;
 clip-path:polygon(0 4%,100% 4%,100% 100%,0 100%);
 background:repeating-linear-gradient(90deg,#0000004d 0 .6px,#ffffff4d .6px 1.3px,transparent 1.3px 2.7px,#0000002e 2.7px 3.1px,transparent 3.1px 4.4px),linear-gradient(#ffffff59,#fff0 45%,#0000006e),linear-gradient(90deg,var(--m0,#555),var(--m3,#ddd) 8%,var(--m1,#999) 17%,var(--m4,#bbb) 30%,var(--m0,#555) 42%,var(--m3,#ddd) 55%,var(--m1,#999) 66%,var(--m4,#bbb) 80%,var(--m2,#777) 92%,var(--m0,#555))}
.rays,.ring,.parts{position:absolute;left:50%;top:50%;pointer-events:none}
.rays{width:min(560px,100vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;z-index:1;opacity:0;
 background:repeating-conic-gradient(color-mix(in srgb,var(--c) 55%,transparent) 0 5deg,transparent 5deg 20deg);-webkit-mask:radial-gradient(circle,#000 0,#0000 66%);mask:radial-gradient(circle,#000 0,#0000 66%)}
.ring{width:230px;aspect-ratio:2/3;translate:-50% -50%;border-radius:18px;border:4px solid var(--c);z-index:1;opacity:0}
.parts{width:0;height:0;z-index:4}
.pt{position:absolute;left:0;top:0;width:var(--z);height:var(--z);margin:calc(var(--z)/-2) 0 0 calc(var(--z)/-2);border-radius:50%;background:var(--pc);box-shadow:0 0 10px 2px var(--pc);opacity:0;animation:burst var(--t) cubic-bezier(.15,.7,.3,1) var(--w) forwards}
/* 1 charge: the pack shakes harder and glows in the card's rarity colour */
.ps.charge .pack{animation:charge .9s linear forwards,floaty 3.6s var(--ease-in-out) infinite}
.ps.tear:not(.open) .pack:not(.locked){transform:scale(1.075);filter:drop-shadow(0 16px 18px #000c) drop-shadow(0 0 26px var(--c)) drop-shadow(0 0 54px var(--c))}
/* 2 tear: the top strip rips off, the foil is left with a jagged edge and light pours out */
.ps.tear .strip{opacity:0;animation:peel .6s cubic-bezier(.4,0,.6,1) forwards}
.ps.tear .pk-art{clip-path:polygon(0 8.6%,4% 7.4%,8% 9%,13% 7.2%,18% 8.8%,23% 7.5%,28% 9.2%,34% 7.4%,40% 8.9%,46% 7.3%,52% 9%,58% 7.4%,64% 8.8%,70% 7.2%,76% 9.1%,82% 7.5%,88% 8.9%,94% 7.3%,100% 8.6%,100% 100%,0 100%)}
.pack::after{content:"";position:absolute;left:4%;right:4%;top:6.4%;height:4.4%;z-index:2;border-radius:50%;pointer-events:none;opacity:0;
 background:radial-gradient(closest-side,#fff,color-mix(in srgb,var(--c,#f2c14e) 80%,#fff0) 55%,transparent);filter:blur(2px)}
.ps.tear .pack::after{opacity:1;animation:mouth .9s ease-out forwards}
/* 3 rise: the card slides up out of the opened pack, then the empty pack drops away */
.ps .flip{opacity:0;pointer-events:none;z-index:2;transform:translateY(8px) scale(.66)}
.ps.rise .flip{opacity:1;transform:none;z-index:4}
.ps.rise:not(.ready) .flip{animation:cardout 1.2s cubic-bezier(.22,1,.36,1) forwards}
.ps.ready .flip{pointer-events:auto;animation:floaty 3.4s var(--ease-in-out) infinite}
.ps.open .pack{pointer-events:none;animation:packdrop .8s cubic-bezier(.4,0,.7,.3) forwards}
.ps.open .rays{opacity:.5;animation:rays 2.4s ease-out forwards}
.ps.fast *{animation-duration:.2s!important;animation-delay:0s!important}
.ps.fast.ready .flip{animation-duration:3.4s!important}
/* 5 flip: shockwave in the card's shape, glow pulse, light sweep */
.ps.on .ring{animation:ring .8s ease-out}
.flip.on .front .card{animation:glow 1.3s ease-out .35s}
.flip.on .card::after{content:"";position:absolute;inset:-20%;z-index:3;background:linear-gradient(105deg,transparent 40%,#ffffff88 50%,transparent 60%);transform:translateX(-120%);animation:sheen .9s ease-out .6s forwards;pointer-events:none}
.flip{width:230px;aspect-ratio:2/3;perspective:900px;background:none;border:0;padding:0;cursor:pointer}
.inner{position:relative;width:100%;height:100%;transition:transform .95s cubic-bezier(.34,1.25,.5,1);transform-style:preserve-3d}
.flip .inner{will-change:transform}
.flip.on .inner{transform:rotateY(180deg)}
.flip{transition:scale .6s cubic-bezier(.34,1.5,.5,1)}
.flip.on{scale:1.05}
.face{position:absolute;inset:0;border-radius:var(--radius);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.back{border-radius:var(--radius);overflow:hidden}
.front{transform:rotateY(180deg)}
.bsv{display:block;width:100%;height:100%}
#hint,#msg{min-height:24px}
.stage .row{justify-content:center}
.codebox{max-width:420px;margin:28px auto 0;padding:16px 16px 12px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius)}
.codebox label{display:block;margin-bottom:10px;font-size:14px;color:var(--muted)}
.codebox input{width:170px;margin-right:8px;padding:11px 14px;border:1.5px solid #ffffff40;border-radius:999px;background:#0a0d07;color:var(--text);font:800 16px Nunito,sans-serif}
.codebox div{min-height:22px;margin-top:8px;font-size:14px}

/* ===== 7 Cards ===== */
.card{position:relative;width:100%;height:100%;border:0;border-radius:var(--radius);overflow:hidden;text-align:left;background-color:#0a0d07;background-size:cover;background-position:center 30%;
 box-shadow:0 0 0 2px var(--c,var(--uncommon)),0 0 0 3px #0008,0 18px 36px -10px #000c,0 0 28px -6px color-mix(in srgb,var(--c,var(--uncommon)) 60%,transparent)}
.card::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px #ffffff26,inset 0 -90px 60px -40px #0a0d07}
.card .rar{position:absolute;top:10px;left:10px;z-index:2;padding:3px 9px;border-radius:999px;font:800 11px/1.3 Nunito,sans-serif;color:var(--c);background:#0a0d07d9;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent) inset}
.card .bar{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:36px 14px 13px;background:linear-gradient(transparent,#0a0d07f2 55%)}
.card b{display:block;font:800 18px/1.15 Nunito,system-ui,sans-serif;letter-spacing:-.01em;color:#fff}
.card small{display:block;margin-top:3px;font-weight:700;font-size:12px;line-height:1.25;color:var(--muted)}
/* foil shimmer on the rarest cards */
.holo{position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;opacity:0}
.card[data-r=Legendary] .holo,.card[data-r=Mythical] .holo{opacity:1;background:linear-gradient(115deg,transparent 30%,#ffffff2e 45%,#ffd98a26 52%,transparent 66%) 160% 0/260% 100% no-repeat;animation:holo 6s var(--ease-in-out) infinite}
.card[data-r=Mythical] .holo{background:linear-gradient(115deg,transparent 18%,#ff4fd838 32%,#4dc3ff38 46%,#7dff9a33 60%,#ffd34d38 74%,transparent 88%) 160% 0/280% 100% no-repeat}

/* ===== 8 Packs / Collection page ===== */
#catalog{min-height:60vh}
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;margin:8px auto 26px;padding:4px;border-radius:999px;background:var(--bg2);border:1px solid var(--line)}
.seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/2);border-radius:999px;background:var(--gold);transition:transform .4s var(--ease-out)}
.seg[data-on=cards]::before{transform:translateX(100%)}
.seg button{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;min-width:132px;padding:10px 18px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:800 15px Nunito,system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .3s}
.seg button[aria-selected=true]{color:#1a1405}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#d94b3b;color:#fff;font:800 12px/1 Nunito,sans-serif}
.badge:empty{display:none}
.panel:not([hidden]){animation:fade-up .45s var(--ease-out)}
.subhead{margin:46px 0 4px;font:800 20px Nunito,sans-serif}
.ptiles{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:18px}
.ptile{width:min(100%,250px);padding:22px 18px 20px;background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--line);border-radius:20px;transition:border-color .3s}
.ptile.sel{border-color:#f2c14e88}
.ptile .pack{margin:0 auto 14px;width:130px;height:185px;cursor:default}
.ptile h3{margin:0 0 6px;font:800 18px/1.2 Nunito,system-ui,sans-serif}
.pcount{margin-bottom:12px;color:var(--muted);font-size:15px}.pcount b{color:var(--gold);font-size:22px}
.ptile .btn{width:100%;margin-top:8px}
.pnote{margin:12px 0 0;color:var(--muted);font-size:13px}
.chips{display:flex;gap:8px;justify-content:center;margin:4px 0 6px}
.chip{padding:7px 16px;border:0;border-radius:999px;background:var(--bg2);box-shadow:0 0 0 1px var(--line) inset;color:var(--muted);font:800 13px Nunito,sans-serif;cursor:pointer;transition:background .25s,color .25s}
.chip[aria-pressed=true]{background:#f2c14e22;color:var(--gold);box-shadow:0 0 0 1px #f2c14e88 inset}
#tally{margin:6px auto 14px}
.rates{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:560px;margin:10px auto 18px;padding:0}
.rates li{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--bg2);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent) inset;font:800 13px Nunito,sans-serif}
.rates li i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.rates .coin{width:14px;height:14px;margin:0 0 0 4px;vertical-align:0;box-shadow:0 0 0 2.5px #b8860b inset}
.ratecap{margin:18px 0 0;font-size:14px;color:var(--muted)}
.packsec{max-width:920px;margin:44px auto 0;text-align:left}
.packhead{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--line)}
.packthumb{position:relative;flex:none;width:72px;aspect-ratio:190/270;filter:drop-shadow(0 10px 10px #000a)}

.packinfo{flex:1;min-width:210px}
.packinfo h3{margin:0;font:800 24px/1.15 Nunito,system-ui,sans-serif;letter-spacing:-.01em}
.packinfo p{margin:4px 0 0;color:var(--muted);font-size:14px}
.packbar{display:flex;align-items:center;gap:10px;margin-top:10px;font:800 13px Nunito,sans-serif}
.packbar i{flex:1;max-width:240px;height:6px;border-radius:99px;background:#ffffff1c;overflow:hidden}
.packbar i b{display:block;height:100%;border-radius:inherit;background:var(--gold);transition:width .8s var(--ease-out)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px;max-width:920px;margin:22px auto 0}
.slot{position:relative}
.cw{position:relative;aspect-ratio:2/3}
.slot .card b{font-size:14px}.slot .card small{font-size:11px}
.slot .rar{top:8px;left:8px;padding:2px 8px;font-size:10px}
.slot .card .bar{padding:30px 10px 10px}
.slot .mini{width:100%;margin-top:12px}
.count{position:absolute;top:-9px;right:-9px;z-index:3;display:flex;align-items:center;justify-content:center;min-width:28px;height:28px;border-radius:999px;background:var(--gold);box-shadow:0 0 0 3px var(--bg);color:#1a1405;font-weight:800;font-size:13px}
.empty{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px dashed #ffffff33;border-radius:var(--radius);background:#ffffff08;font-size:36px;font-weight:800;opacity:.6}
.empty .rar{position:absolute;top:8px;left:8px;padding:2px 8px;border-radius:99px;font:800 10px/1.3 Nunito,sans-serif;color:var(--c);background:#0a0d07d9;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent) inset}
.empty small{font-size:11px;font-weight:700;opacity:.75}
.nomatch{margin:40px 0 0;color:var(--muted)}
.cprev{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .35s var(--ease-out)}
.cprev:focus-visible{outline-offset:4px;border-radius:var(--radius)}
.cprev:active{transform:scale(.97);transition-duration:.1s}
@media(hover:hover){.cprev:hover{transform:translateY(-4px)}}
.enter .slot{animation:fade-up .55s var(--ease-out) calc(var(--i,0)*45ms) backwards}

/* streak, NEW tag, sound button */
.streak{max-width:460px;margin:0 auto;padding:14px 16px;background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--line);border-radius:var(--radius)}
.sk-head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.sk-head b{font:800 17px Nunito,sans-serif;color:var(--gold)}
.sk-head span{font-size:13px;color:var(--muted)}
.sk-dots{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.sk-dots i{display:grid;place-items:center;height:38px;border-radius:10px;background:#ffffff0d;box-shadow:0 0 0 1px var(--line) inset;font-style:normal;font:800 12px Nunito,sans-serif;color:var(--muted);transition:background .4s,color .4s}
.sk-dots i.on{background:var(--gold);color:#1a1405;box-shadow:none}
.sk-dots i.gift:not(.on){box-shadow:0 0 0 1.5px #f2c14e88 inset;color:var(--gold)}
.rewardnote{padding:8px 16px;border-radius:999px;background:#f2c14e22;box-shadow:0 0 0 1px #f2c14e66 inset;color:var(--gold);font-size:14px;animation:fade-up .5s var(--ease-out) backwards}
.newtag{position:absolute;top:-9px;left:-9px;z-index:3;padding:3px 9px;border-radius:999px;background:#d94b3b;box-shadow:0 0 0 3px var(--bg);color:#fff;font:800 11px/1.3 Nunito,sans-serif;letter-spacing:.04em;animation:newpulse 2s var(--ease-in-out) infinite}
@keyframes newpulse{50%{transform:scale(1.1)}}
.badge.new{background:#d94b3b}
.snd{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--bg2);color:var(--text);cursor:pointer;opacity:.85;transition:opacity .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.snd:hover{opacity:1;border-color:#f2c14e66}
.snd[aria-pressed=false]{color:var(--muted)}
.snd svg{width:19px;height:19px}

/* ===== 9 Dialogs: card preview + "what's inside" ===== */
#preview,#odds{margin:auto;overflow-y:auto;border:0;background:var(--bg2);color:var(--text);text-align:center}
#preview::backdrop,#odds::backdrop{background:#05070bd9;backdrop-filter:blur(3px)}
body:has(#preview[open]),body:has(#odds[open]){overflow:hidden}
.pv-close{position:absolute;top:8px;right:10px;z-index:3;width:40px;height:40px;border:0;border-radius:50%;background:#ffffff14;color:var(--text);font-size:26px;line-height:1;cursor:pointer}
#preview{width:min(92vw,380px);max-height:92dvh;padding:22px 20px calc(22px + env(safe-area-inset-bottom,0px));border-radius:20px;box-shadow:0 0 0 1px color-mix(in srgb,var(--c,#f2c14e) 55%,transparent),0 30px 80px #000c}
.pv-card{width:min(56vw,230px);aspect-ratio:2/3;margin:14px auto 20px}
.pv-card .card b{font-size:20px}.pv-card .card small{font-size:13px}.pv-card .rar{font-size:12px}
.license{padding:16px 16px 14px;border-radius:14px;border:1.5px dashed color-mix(in srgb,var(--c,#f2c14e) 70%,transparent);background:#ffffff08}
.license .seal{color:var(--c,#f2c14e)}
.lic-label{margin-top:4px;font:800 11px Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--c,#f2c14e)}
.license h3{margin:6px 0 8px;font:800 19px/1.2 Nunito,sans-serif}
.license p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.license .lic-fine{margin-top:10px;font-size:11.5px;opacity:.75}
#preview[open]{animation:pvin .38s var(--ease-out)}
#preview[open]::backdrop,#odds[open]::backdrop{animation:fade-in .3s ease-out}
#preview.closing{animation:pvout .22s ease-in forwards}
#preview.closing::backdrop{animation:fade-out .22s ease-in forwards}
#preview[open] .pv-card{animation:pvcard .6s var(--ease-spring) .08s backwards}
#preview[open] .license{animation:fade-up .5s var(--ease-out) .22s backwards}
#preview[open] .pv-card .card::after{content:"";position:absolute;inset:-20%;z-index:3;background:linear-gradient(105deg,transparent 40%,#ffffff66 50%,transparent 60%);transform:translateX(-120%);animation:sheen .9s var(--ease-out) .55s forwards;pointer-events:none}
#odds{width:min(94vw,460px);max-height:90dvh;padding:22px 16px calc(22px + env(safe-area-inset-bottom,0px));border-radius:20px;box-shadow:0 0 0 1px var(--line),0 30px 80px -20px #000}
#odds[open]{animation:pvin .3s var(--ease-out)}
.odds-pack{position:relative;width:96px;height:136px;margin:4px auto 12px}
#odds h3{margin:0 0 6px;font:800 21px/1.2 Nunito,system-ui,sans-serif}
.odds-sub{margin:0 auto 14px;max-width:34ch;color:var(--muted);font-size:14px}
.orow{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding:9px 14px;border-radius:12px;background:#ffffff0d;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent) inset;font-weight:800}
.orow i{display:inline-block;width:10px;height:10px;margin-right:9px;border-radius:50%;background:var(--c)}
.orow b{color:var(--c)}
.og{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px;margin-top:10px}
.ot{display:flex;flex-direction:column;gap:5px;font-size:11px;line-height:1.2}
.ot i{display:block;aspect-ratio:2/3;border-radius:9px;border:3px solid var(--c);background-size:cover;background-position:center 30%}
.ot em{min-height:2.4em;font-style:normal;color:var(--muted)}
.ot b{color:var(--c);font-size:13px}
.odds-fine{margin:16px 0 0;color:var(--muted);font-size:12px}

/* ===== 10 Shop ===== */
.shopcard{max-width:360px;margin:26px auto 0;padding:26px 22px 22px;border-radius:20px;background:linear-gradient(180deg,var(--bg3),var(--bg2));border:1px solid var(--line);box-shadow:0 24px 50px -28px #000}
.shopcard .pack{display:block;margin:0 auto 20px;width:170px;height:240px;padding:0;cursor:pointer}
.shopcard h3{margin:0 0 6px;font:800 22px/1.2 Nunito,system-ui,sans-serif}
.shopcard p{margin:0;color:var(--muted);font-size:15px}
.price{display:flex;justify-content:center;align-items:center;gap:8px;margin:16px 0 14px;font:800 24px Nunito,sans-serif;color:var(--gold)}
.price .coin{margin:0;width:22px;height:22px}
.shopcard .btn{min-width:180px}
.shopcard .need{margin-top:12px;font-size:14px}
.shopmsg{min-height:22px;margin-top:12px!important;color:var(--gold)!important;font-weight:800}
.shopcard .opennow{margin-top:6px}
.shopcard .oddsbtn{margin-top:10px}
.shopcard .stash{margin-top:16px;font-size:14px}
.earn{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));max-width:640px;margin:26px auto 0}
.earn a{display:block;padding:18px;border-radius:var(--radius);background:var(--bg2);border:1px solid var(--line);text-decoration:none;text-align:left;transition:transform .3s var(--ease-out),border-color .25s}
.earn a:hover{border-color:#f2c14e66;transform:translateY(-3px)}.earn a:active{transform:scale(.98)}
.earn b{display:block;margin-bottom:4px;font:800 17px Nunito,sans-serif;color:var(--text)}.earn span{color:var(--muted);font-size:14px}

/* ===== 11 Fly Frenzy (flies + wasps, used by the Arcade) ===== */
.fly{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;animation:flyin .22s var(--ease-spring) backwards}
.fly svg{display:block;width:100%;height:100%;animation:wobble .5s ease-in-out infinite alternate;pointer-events:none;filter:drop-shadow(0 0 6px #c8ff8a99)}
.fly.gold svg{filter:drop-shadow(0 0 9px #f2c14ecc)}
.fly.wasp svg{filter:drop-shadow(0 0 8px #ff3b3b99)}
.wl,.wr{transform-box:view-box;transform-origin:24px 20px}
.wl{animation:flapl .1s linear infinite alternate}.wr{animation:flapr .1s linear infinite alternate}
.fly.caught,.fly.stung{pointer-events:none;animation:catch .3s ease-out forwards}
.fly.stung{filter:hue-rotate(-30deg) saturate(1.6)}
.fly.gone{pointer-events:none;animation:gone .23s ease-in forwards}
.pop{position:absolute;z-index:3;transform:translate(-50%,-50%);font:400 26px 'Bagel Fat One',Impact,sans-serif;color:var(--gold);text-shadow:0 2px 0 #0008;pointer-events:none;animation:popup .65s var(--ease-out) forwards}
.pop.bad{color:#ff7b6b}
.shake{animation:shake .32s ease-out}


/* ===== 12 Motion ===== */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:.3s}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade-out{to{opacity:0}}
@keyframes floaty{50%{translate:0 -6px}}
@keyframes bump{40%{transform:scale(1.12)}}
@keyframes burst{0%{opacity:1;transform:translate(0,0) scale(1)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}
@keyframes charge{
 0%{transform:none;filter:drop-shadow(0 16px 18px #000c) drop-shadow(0 0 0 transparent);animation-timing-function:ease-in-out}
 15%{transform:translateX(-1px) rotate(-1.2deg) scale(1.01);animation-timing-function:ease-in-out}
 30%{transform:translateX(1.5px) rotate(1.8deg) scale(1.025);animation-timing-function:ease-in-out}
 45%{transform:translateX(-2px) rotate(-2.6deg) scale(1.04);animation-timing-function:ease-in-out}
 60%{transform:translateX(2.5px) rotate(3.2deg) scale(1.055);animation-timing-function:ease-in-out}
 75%{transform:translateX(-2.5px) rotate(-3.6deg) scale(1.068);animation-timing-function:ease-in-out}
 90%{transform:translateX(1px) rotate(1.5deg) scale(1.08);animation-timing-function:cubic-bezier(.2,.8,.2,1)}
 100%{transform:rotate(0) scale(1.075);filter:drop-shadow(0 16px 18px #000c) drop-shadow(0 0 26px var(--c)) drop-shadow(0 0 54px var(--c))}
}
@keyframes mouth{0%{opacity:0;transform:scaleX(.3)}25%{opacity:1;transform:scaleX(1.05)}100%{opacity:.85;transform:scaleX(1)}}
@keyframes cardout{
 0%{opacity:1;z-index:2;transform:translateY(8px) scale(.66)}
 62%{opacity:1;z-index:2;transform:translateY(-158px) scale(.74)}
 63%{opacity:1;z-index:4;transform:translateY(-158px) scale(.74)}
 100%{opacity:1;z-index:4;transform:none}
}
@keyframes packdrop{0%{opacity:1;transform:scale(1.075)}100%{opacity:0;transform:translateY(90px) rotate(5deg) scale(.88)}}
@keyframes peel{0%{transform:none;opacity:1}25%{transform:rotate(-5deg) translateY(-6px);opacity:1}100%{transform:translate(90px,-130px) rotate(38deg);opacity:0}}
@keyframes flash{0%{filter:brightness(1);opacity:1;transform:scale(1.07)}35%{filter:brightness(2.6);opacity:1;transform:scale(1.1)}100%{filter:brightness(3);opacity:0;transform:scale(1.18)}}
@keyframes rays{0%{opacity:0;transform:scale(.2) rotate(0)}25%{opacity:1}100%{opacity:.5;transform:scale(1) rotate(40deg)}}
@keyframes rise{0%{opacity:0;transform:translateY(46px) scale(.6)}30%{opacity:1}100%{opacity:1;transform:none}}
@keyframes ring{0%{opacity:.9;transform:scale(.95)}100%{opacity:0;transform:scale(1.9)}}
@keyframes glow{35%{box-shadow:0 0 70px 14px color-mix(in srgb,var(--c) 80%,transparent),0 14px 30px #0008}}
@keyframes sheen{to{transform:translateX(120%)}}
@keyframes pksheen{0%{transform:translateX(0) skewX(-18deg)}45%,100%{transform:translateX(420px) skewX(-18deg)}}
@keyframes holo{0%{background-position:160% 0}55%,100%{background-position:-70% 0}}
@keyframes pvin{from{opacity:0;transform:translateY(18px) scale(.96)}}
@keyframes pvout{to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes pvcard{from{opacity:0;transform:translateY(24px) scale(.82) rotate(-3deg)}}
@keyframes cdpop{from{opacity:0;transform:scale(1.7)}60%{opacity:1}}
@keyframes flyin{from{opacity:0;transform:scale(.3)}}
@keyframes flapl{to{transform:rotate(16deg)}}
@keyframes flapr{to{transform:rotate(-16deg)}}
@keyframes wobble{to{transform:translate(3px,-4px) rotate(7deg)}}
@keyframes catch{to{transform:scale(1.55);opacity:0}}
@keyframes gone{to{transform:translateY(-14px) scale(.3);opacity:0}}
@keyframes popup{from{opacity:1;transform:translate(-50%,-50%) scale(.7)}to{opacity:0;transform:translate(-50%,-130%) scale(1.15)}}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.bump,.coins.bump{animation:bump .5s var(--ease-spring)}
.msgin{animation:fade-up .4s var(--ease-out)}
/* hero: staggered entrance */
.hero>.showcase{animation:fade-up .8s var(--ease-out) backwards}
.hero>div>h1{animation:fade-up .8s var(--ease-out) .05s backwards}
.hero>div>.tag{animation:fade-up .8s var(--ease-out) .17s backwards}
.hero>div>p:not(.tag){animation:fade-up .8s var(--ease-out) .27s backwards}
.hero>div>.row{animation:fade-up .8s var(--ease-out) .37s backwards}
.hero>.status{animation:fade-up .8s var(--ease-out) .47s backwards}
/* sections: reveal on scroll (hidden only while JS is running) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}
.js .reveal :is(.steps li,.tile){opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),border-color .25s}
.js .reveal.in :is(.steps li,.tile){opacity:1;transform:none}
.reveal :is(.steps,.tiles)>:nth-child(2){transition-delay:.09s}
.reveal :is(.steps,.tiles)>:nth-child(3){transition-delay:.18s}
.reveal .tiles>:nth-child(4){transition-delay:.27s}
.js .reveal.in .tile:hover{transform:translateY(-4px)}
.js .reveal.in .tile:active{transform:scale(.98)}
.rv-done .reveal,.rv-done .reveal :is(.steps li,.tile){opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
 .js .reveal,.js .reveal :is(.steps li,.tile){opacity:1;transform:none}
}