/* ===== SwampRealms Arcade theme: loaded on every page after styles.css =====
   1 Shared look (tokens, header, buttons, panels, tabs)  2 Game UI (avatar + arcade) */
/* ===== 1 Shared look ===== */
:root{
 --bg:#070b09;--bg2:#0b110d;--bg3:#0f1813;
 --mint:#4ee6b4;--mint-soft:#c8fff4;--mint-line:#4ee6b433;--mint-glow:#4ee6b4;
 --line:#4ee6b42b;
 --panel:linear-gradient(180deg,#0e1612,#070b09);
}
body{background:var(--bg)}
body::before{background:
 radial-gradient(900px 520px at 50% -140px,#12382d 0,transparent 70%),
 repeating-linear-gradient(0deg,#0000 0 2px,#0000000f 2px 3px)}
h2{text-transform:uppercase;letter-spacing:.07em;font-weight:900;font-size:clamp(24px,5vw,34px);text-shadow:0 0 22px #4ee6b466}
.sub{color:#f6eedbb3}
/* header + footer + phone tab bar */
header{background:#070b09f2;border-bottom-color:var(--mint-line);box-shadow:0 12px 30px -22px var(--mint)}
header.scrolled{border-bottom-color:#4ee6b455}
header{padding-left:max(18px,calc((100vw - 1120px)/2));padding-right:max(18px,calc((100vw - 1120px)/2))}
header nav{gap:18px}
header nav a{letter-spacing:.02em;white-space:nowrap}
@media(max-width:1060px){header nav a[href="avatar.html"]:not(.avbtn):not(.bank){display:none}}
@media(max-width:900px){header nav a[href="index.html#herd"]{display:none}}
@media(max-width:780px){header nav a[href="index.html"]{display:none}header nav{gap:14px}}
header nav .bank{background:#0a100c;border-color:#f2c14e44;box-shadow:inset 0 0 14px -6px var(--gold)}
.snd{background:#0a100c;border-color:var(--mint-line)}
.snd:hover{border-color:#4ee6b4aa}
footer{border-top-color:var(--mint-line);background:linear-gradient(180deg,transparent,#4ee6b408)}
.tabbar{background:#070b09f5;border-top-color:var(--mint-line);box-shadow:0 -10px 30px -22px var(--mint)}
.tabbar a[aria-current=page]{text-shadow:0 0 12px #f2c14e88}
:focus-visible{outline-color:var(--mint)}
/* buttons */
.btn{box-shadow:0 0 26px -8px var(--gold)}
.btn.ghost{background:#0a100c;color:var(--mint-soft);box-shadow:0 0 0 1.5px #4ee6b455 inset,0 0 22px -10px var(--mint)}
.btn.ghost:hover{box-shadow:0 0 0 1.5px var(--mint) inset,0 0 26px -6px var(--mint);color:#fff}
.btn[disabled]{box-shadow:none}
.row.mid{justify-content:center}
/* panels: every card-like box gets the dark glass + mint edge */
.stat,.tile,.steps li,.streak,.ptile,.shopcard,.earn a,.codebox,.stagecard{
 position:relative;background:var(--panel);border:1px solid var(--mint-line);
 box-shadow:0 0 34px -18px var(--mint),0 18px 36px -22px #000}
.stat::after,.tile::after,.steps li::after,.streak::after,.ptile::after,.shopcard::after,.earn a::after,.codebox::after{
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
 background:repeating-linear-gradient(0deg,#0000 0 2px,#0000000d 2px 3px)}
.stat:hover,.tile:hover,.earn a:hover{border-color:#4ee6b4aa;box-shadow:0 0 36px -10px var(--mint),0 18px 36px -22px #000}
.ptile.sel{border-color:#f2c14ecc;box-shadow:0 0 34px -12px var(--gold),0 18px 36px -22px #000}
.coins{background:#0a100c;border-color:var(--mint-line);box-shadow:inset 0 0 18px -8px var(--mint)}
.codebox input{background:#05090a;border-color:#4ee6b44d}
.codebox input:focus{border-color:var(--mint);outline:0;box-shadow:0 0 16px -4px var(--mint)}
/* home */
h1{text-shadow:0 0 36px #f2c14e55}
.stat b{color:var(--mint-soft);text-shadow:0 0 14px #4ee6b4aa}
.stat span,.stat small{text-transform:uppercase;letter-spacing:.12em;font-size:10.5px;font-weight:900}
.stat span{color:var(--muted)}
.tiles{display:flex;flex-wrap:wrap;justify-content:center}
.tile{flex:1 1 210px;max-width:290px}
.tile svg{color:var(--mint);filter:drop-shadow(0 0 6px #4ee6b4aa)}
.tile b,.steps b,.earn b{letter-spacing:.02em}
.steps li::before{background:linear-gradient(180deg,#123a30,#0a1a15);color:var(--mint-soft);box-shadow:0 0 0 1px #4ee6b4aa inset,0 0 14px -2px var(--mint);text-shadow:0 0 8px var(--mint)}
.dcard .card,.showcase .card{box-shadow:0 0 0 2px var(--c),0 0 0 3px #0008,0 18px 36px -10px #000c,0 0 32px -8px var(--c)}
/* tabs / segmented control / chips (same look as the Arcade game tabs) */
.seg{background:#0a100c;border-color:var(--mint-line);box-shadow:inset 0 0 18px -8px var(--mint)}
.seg::before{background:linear-gradient(180deg,#123a30,#0a1a15);box-shadow:0 0 0 1px var(--mint) inset,0 0 18px -4px var(--mint)}
.seg button{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12.5px}
.seg button[aria-selected=true]{color:var(--mint-soft)}
.chip{background:#0c110d;font-weight:900;letter-spacing:.1em;text-transform:uppercase;font-size:11.5px}
.chip[aria-pressed=true]{background:linear-gradient(180deg,#123a30,#0a1a15);color:var(--mint-soft);box-shadow:0 0 0 1px var(--mint) inset,0 0 16px -4px var(--mint)}
.rates li{background:#0a100c}
.sk-head b{letter-spacing:.06em;text-transform:uppercase;font-size:14px;color:var(--gold);text-shadow:0 0 14px #f2c14e66}
.sk-dots i{background:#0a100c;box-shadow:0 0 0 1px var(--mint-line) inset}
.sk-dots i.on{background:var(--gold);box-shadow:0 0 14px -2px var(--gold)}
.subhead,.packinfo h3,.ptile h3,.shopcard h3,#odds h3{letter-spacing:.03em}
.packhead{border-bottom-color:var(--mint-line)}
.empty{border-color:#4ee6b440;background:#4ee6b408}
.count{box-shadow:0 0 0 3px var(--bg),0 0 14px -2px var(--gold)}
/* dialogs */
#preview,#odds{background:linear-gradient(180deg,#0e1612,#060a08)}
#odds{box-shadow:0 0 0 1px #4ee6b44d,0 0 60px -20px var(--mint),0 30px 80px -20px #000}
#preview::backdrop,#odds::backdrop{background:#020504e6}
.pv-close{background:#4ee6b41a}
.orow{background:#0a100c}
/* 404 */
.lost h1{text-shadow:0 0 40px #f2c14e66}

/* ===== 2 Game UI ===== */

.gem{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M10 0L20 7L10 22L0 7Z' fill='%234ee6b4'/%3E%3Cpath d='M10 0L20 7H0Z' fill='%23c8fff4'/%3E%3Cpath d='M0 7H10L10 22Z' fill='%2314b98a'/%3E%3Cpath d='M10 7H20L10 22Z' fill='%230b7a5c'/%3E%3C/svg%3E") center/contain no-repeat!important;clip-path:none!important;filter:drop-shadow(0 0 5px #4ee6b4aa)!important}
header nav .bank.cry{border-color:#4ee6b455;background:linear-gradient(180deg,#0f2a24,#09130f);box-shadow:inset 0 0 14px -4px #4ee6b4aa}
header nav .bank.cry b{color:#c8fff4}
.cats{display:flex;flex-wrap:wrap;gap:8px}
.cats button{font:900 12px Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:#0c110d;border:1px solid #ffffff1f;border-radius:10px;padding:10px 14px;cursor:pointer;transition:all .2s}
.cats button[aria-selected=true]{color:#c8fff4;border-color:#4ee6b4;background:linear-gradient(180deg,#123a30,#0a1a15);box-shadow:0 0 18px -4px #4ee6b4}
.gov h3{font:900 26px Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 0 18px #4ee6b4aa}
.gov p{display:grid;gap:4px;justify-items:center}
.gov .btn{box-shadow:0 0 26px -6px var(--gold)}
.sl{font:900 11px Nunito,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.big{font:900 44px Nunito,sans-serif;line-height:1}
.rew{display:flex;align-items:center;gap:8px;margin-top:6px;font:900 38px Nunito,sans-serif;color:#c8fff4;text-shadow:0 0 20px #4ee6b4;animation:avp .5s ease-out}
.rew .gem{width:30px;height:34px}
.nb{font:900 11px Nunito,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#1a1405;background:var(--gold);padding:3px 10px;border-radius:6px}
.bn{font-size:13px;color:var(--gold);font-weight:800}
@keyframes avp{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
/* arcade */
#arc{display:grid;gap:16px;justify-items:center}
.box{position:relative;width:min(100%,420px);aspect-ratio:3/4;background:#060b0a;border:1px solid #4ee6b440;border-radius:18px;overflow:hidden;user-select:none;-webkit-user-select:none;box-shadow:0 0 40px -12px #4ee6b4,0 20px 40px -20px #000}
.box::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#0000000d 2px 3px),radial-gradient(ellipse at center,#0000 55%,#000a 100%)}
.box canvas{width:100%;height:100%;display:block;touch-action:none}
.hud{position:absolute;top:10px;left:10px;margin:0;max-width:none;z-index:2;font:900 20px Nunito,sans-serif;color:#c8fff4;text-shadow:0 0 12px #4ee6b4;background:#04100dcc;border:1px solid #4ee6b455;border-radius:8px;padding:4px 12px;pointer-events:none}
.mem{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:52px 12px 12px;align-content:center}
.mem[hidden],.box canvas[hidden],.gov[hidden]{display:none}
.mc{position:relative;aspect-ratio:1;border:0;border-radius:12px;padding:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mb,.mf{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;overflow:hidden}
.mb{background:linear-gradient(145deg,#173a30,#08150f);border:1px solid #4ee6b455;font:900 24px Nunito,sans-serif;color:#4ee6b4aa;box-shadow:inset 0 0 14px #4ee6b422}
.mf{background:#0d1a14;font-size:32px;display:none}.mf svg{width:100%;height:100%}
.mc.on .mf{display:grid}.mc.on .mb{display:none}.mc.ok .mf{outline:3px solid #4ee6b4;outline-offset:-3px;box-shadow:0 0 16px #4ee6b4}
.gov{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:12px;padding:20px;text-align:center;background:radial-gradient(circle,#06130fdd,#020605f2);backdrop-filter:blur(3px)}
.gov p{margin:0;max-width:30ch;line-height:1.5;color:#d6e4dc}
/* avatar locker */
.av2{display:grid;gap:22px;width:100%;max-width:1040px;margin:26px auto 0;text-align:left}
@media(min-width:820px){.av2{grid-template-columns:minmax(300px,380px) 1fr;align-items:start}.stagecard{position:sticky;top:84px}}
.stagecard{display:grid;gap:12px;padding:14px;border-radius:20px;background:linear-gradient(180deg,#141a14,#090d0a);border:1px solid #ffffff1f;box-shadow:0 24px 50px -22px #000}
.avstage{border-radius:16px;overflow:hidden;box-shadow:0 0 44px -10px var(--ac,#4ee6b455)}.avstage svg{display:block;width:100%;height:auto}
.avstage.avp{animation:avp .35s ease-out}
.plate{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.plate b{font:900 19px Nunito,sans-serif;letter-spacing:.03em}
.aura{font:900 11px Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--ac,#ffffff40);color:var(--ac,var(--muted))}
.gems{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:#07110e;border:1px solid #4ee6b440;box-shadow:inset 0 0 18px #4ee6b41f}
.gems .gem{width:20px;height:22px}.gems b{font:900 24px Nunito,sans-serif;color:#c8fff4}
.gems small{color:var(--muted);font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:11px}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.slots .slot{display:grid;gap:2px;justify-items:start;padding:8px;border-radius:10px;background:#0c110d;border:1px solid #ffffff1a;color:var(--text);cursor:pointer;text-align:left;font-family:Nunito,sans-serif;min-width:0}
.slots .slot small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:900}
.slots .slot b{font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--rc,#6b7770)}
.slots .slot[aria-selected=true]{border-color:#4ee6b4;box-shadow:0 0 14px -4px #4ee6b4}
.panel2{display:grid;gap:14px;min-width:0}
.pick{display:flex;justify-content:center;gap:8px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.pick button{flex:1 0 52px;max-width:72px;display:grid;gap:4px;justify-items:center;background:none;border:0;color:var(--muted);font:900 10px Nunito,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:0}
.pick button svg{width:100%;height:auto;aspect-ratio:1;border-radius:14px;border:2px solid #ffffff1f;transition:all .2s}
.pick button[aria-pressed=true]{color:#c8fff4}.pick button[aria-pressed=true] svg{border-color:#4ee6b4;box-shadow:0 0 18px -2px #4ee6b4}
#msg{min-height:1.3em;margin:0;color:var(--gold);font-weight:800;font-size:14px}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.it{position:relative;display:grid;gap:8px;padding:8px 8px 10px;border-radius:14px;background:linear-gradient(180deg,#171d17,#0b0f0b);border:1px solid color-mix(in srgb,var(--rc) 50%,#000);box-shadow:0 10px 24px -16px var(--rc)}
.it::before{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 22%,transparent),transparent 45%);pointer-events:none}
.it .art{border-radius:10px;overflow:hidden}.it .art svg{display:block;width:100%;height:auto}
.it b{font-size:14px;position:relative}
.tag{position:relative;justify-self:start;font:900 10px Nunito,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--rc)}
.it.eq{box-shadow:0 0 0 2px var(--rc),0 0 26px -4px var(--rc)}
.it .buy{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px 8px;border-radius:10px;border:1px solid #4ee6b455;background:linear-gradient(180deg,#123a30,#0a1a15);color:#c8fff4;font:900 14px Nunito,sans-serif;letter-spacing:.06em;cursor:pointer}
.it .buy .gem{width:13px;height:14px}
.it.own .buy{background:#10150f;border-color:#ffffff2a;color:var(--text);text-transform:uppercase;font-size:12px;letter-spacing:.14em}
.it.eq .buy{background:var(--rc);border-color:var(--rc);color:#10130d}
.it.no .buy{opacity:.55}
.prog{position:relative;height:4px;border-radius:2px;background:#ffffff14}.prog i{display:block;height:100%;border-radius:2px;background:var(--rc)}

/* header avatar button */
.avbtn{flex:none;display:block;width:40px;height:40px;border-radius:50%;overflow:hidden;border:2px solid var(--ac,#4ee6b4);background:#0b100c;box-shadow:0 0 14px -3px var(--ac,#4ee6b4);transition:transform .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.avbtn:hover{transform:scale(1.07);box-shadow:0 0 20px -2px var(--ac,#4ee6b4)}
.avbtn svg{display:block;width:100%;height:100%}
header nav a.avbtn::after{display:none}
@media(max-width:639px){.avbtn{width:34px;height:34px}}
@media(max-width:420px){header .logo{font-size:0;gap:0}}

/* arcade: Fly Frenzy layer, time bar, overlay buttons, countdown */
.fz{position:absolute;inset:0;touch-action:none;-webkit-user-select:none;user-select:none;
 background:
  radial-gradient(ellipse 20% 6% at 22% 78%,#3d915055 0 62%,transparent 68%),
  radial-gradient(ellipse 26% 7% at 74% 66%,#3d915044 0 62%,transparent 68%),
  radial-gradient(ellipse 18% 5% at 58% 90%,#3d915055 0 62%,transparent 68%),
  radial-gradient(ellipse 22% 6% at 18% 28%,#3d915038 0 62%,transparent 68%),
  radial-gradient(ellipse 16% 5% at 80% 20%,#3d915044 0 62%,transparent 68%),
  linear-gradient(180deg,#0f2e2e,#08181a)}
#field{position:absolute;inset:0}
.pop{font:900 26px Nunito,sans-serif;color:var(--gold);text-shadow:0 0 14px #f2c14e}
.pop.bad{color:#ff7b6b;text-shadow:0 0 14px #ff3b3b}
.fz.shake{animation:shake .32s ease-out}
.tbar{position:absolute;top:0;left:0;right:0;z-index:2;height:5px;background:#ffffff14;pointer-events:none}
.tbar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--mint),var(--gold));box-shadow:0 0 12px var(--mint)}
.hud.tm{left:auto;right:10px}
.hud #sc{display:inline-block}
.hud.tm span{display:inline-block;min-width:1.2em;text-align:right}
.hud.tm{font-size:16px;letter-spacing:.08em;text-transform:uppercase}
.acts{display:grid;gap:10px;justify-items:center}
.acts[hidden]{display:none}
.cd{display:block;font:900 96px/1 Nunito,sans-serif;color:var(--mint-soft);text-shadow:0 0 30px var(--mint);animation:avp .5s ease-out}
.cn{display:inline-block;width:26px;height:26px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px #b8860b inset,0 0 18px #f2c14e99}
.rew.cn2{color:#ffe9a8;text-shadow:0 0 20px #f2c14e}
.note{margin:0;color:var(--muted);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;text-align:center}
@media(max-width:639px){.cats{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:420px}.cats button{padding:11px 8px;font-size:11px}}

/* ===== Accounts: header button + sign in dialog (account.js) ===== */
.acct{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:36px;min-width:36px;padding:0;border:1px solid var(--mint-line);border-radius:999px;background:#0a100c;color:var(--mint-soft);font:800 14px Nunito,sans-serif;letter-spacing:.02em;cursor:pointer;opacity:.9;transition:opacity .2s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.acct:hover{opacity:1;border-color:#4ee6b4aa}
.acct svg{width:19px;height:19px}
.acct.out span{display:none}
.acct.on{width:36px;padding:0;border-color:#f2c14e88;box-shadow:0 0 14px -4px var(--gold);color:var(--gold)}
.acct.on b{font-size:16px;font-weight:900}
.acct.on.av{width:36px;height:36px;overflow:hidden;border:2px solid var(--ac,#4ee6b4);background:#0b100c;box-shadow:0 0 14px -3px var(--ac,#4ee6b4)}
.acct.on.av svg{display:block;width:100%;height:100%}
@media(min-width:640px){.acct.out{padding:0 14px 0 11px}.acct.out span{display:inline}}
@media(max-width:639px){.acct{height:32px;min-width:32px}.acct.on{width:32px}}
@media(max-width:639px){.acct.on.av{width:32px;height:32px}}
.acct-dlg{margin:auto;width:min(92vw,400px);max-height:92dvh;overflow-y:auto;padding:26px 22px calc(22px + env(safe-area-inset-bottom,0px));border:0;border-radius:20px;background:linear-gradient(180deg,#0e1612,#060a08);color:var(--text);text-align:center;box-shadow:0 0 0 1px #4ee6b44d,0 0 60px -20px var(--mint),0 30px 80px -20px #000}
.acct-dlg::backdrop{background:#020504e6;backdrop-filter:blur(3px)}
body:has(.acct-dlg[open]){overflow:hidden}
.acct-dlg h3{margin:0 0 6px;font-size:24px;text-transform:uppercase;letter-spacing:.06em;text-shadow:0 0 18px #4ee6b466}
.acct-sub{margin:0 0 16px;color:#f6eedbb3;font-size:15px;line-height:1.45}
.acct-fine{margin:12px 0 0;color:var(--muted);font-size:12.5px;line-height:1.45}
.acct-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 14px;padding:4px;border:1px solid var(--mint-line);border-radius:999px;background:#05090a}
.acct-tabs button{padding:9px 6px;border:0;border-radius:999px;background:none;color:var(--muted);font:800 13px Nunito,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.acct-tabs button[aria-selected=true]{background:linear-gradient(180deg,#123a30,#0a1a15);color:var(--mint-soft);box-shadow:0 0 0 1px #4ee6b4aa inset}
.acct-form{display:grid;gap:12px;text-align:left}
.acct-form label{display:grid;gap:6px;color:var(--mint-soft);font-size:11.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.acct-form input{width:100%;padding:12px 16px;border:1.5px solid #4ee6b44d;border-radius:999px;background:#05090a;color:var(--text);font:800 16px Nunito,sans-serif;letter-spacing:0;text-transform:none}
.acct-form input:focus{border-color:var(--mint);outline:0;box-shadow:0 0 16px -4px var(--mint)}
.acct-form .btn{width:100%;margin-top:2px}
.acct-form .acct-fine{margin:0;text-align:center}
.acct-err{margin:0;min-height:0;color:#ff8a9b;font-size:13.5px;font-weight:800;text-align:center}
.acct-err:empty{display:none}
.acct-st{margin:0 0 16px;color:var(--mint-soft);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.acct-dlg .row{justify-content:center}
.acct-cmp{display:grid;gap:12px}
.acct-cmp>div{display:grid;gap:8px;padding:14px;border:1px solid var(--mint-line);border-radius:14px;background:#0a100c}
.acct-cmp small{color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.acct-cmp b{color:var(--mint-soft);font-size:15px}
.acct-dlg .pv-close{background:#4ee6b41a}

/* ===== Header menu: counters + account + hamburger, everything else in the dropdown (menu.js) ===== */
header nav .hide,header nav>.snd,header nav>a.avbtn{display:none!important}
header{gap:10px}
header nav{gap:10px}
.menubtn{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--mint-line);border-radius:50%;background:#0a100c;color:var(--mint-soft);cursor:pointer;opacity:.92;transition:opacity .2s,border-color .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.menubtn:hover,.menubtn.open{opacity:1;border-color:#4ee6b4aa;box-shadow:0 0 18px -6px var(--mint)}
.mb-bars{position:relative;display:block;width:16px;height:12px}
.mb-bars i{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:currentColor;transition:transform .25s var(--ease-out,ease),opacity .2s,top .25s var(--ease-out,ease)}
.mb-bars i:nth-child(1){top:0}.mb-bars i:nth-child(2){top:5px}.mb-bars i:nth-child(3){top:10px}
.menubtn.open .mb-bars i:nth-child(1){top:5px;transform:rotate(45deg)}
.menubtn.open .mb-bars i:nth-child(2){opacity:0}
.menubtn.open .mb-bars i:nth-child(3){top:5px;transform:rotate(-45deg)}
@media(max-width:639px){.menubtn{width:32px;height:32px}}
.sitemenu{position:absolute;z-index:30;top:calc(100% + 8px);right:max(18px,calc((100vw - 1120px)/2));width:min(300px,calc(100vw - 36px));padding:8px;border:1px solid var(--mint-line);border-radius:18px;background:linear-gradient(180deg,#0e1612f7,#070b09f7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 0 0 1px #0008,0 0 44px -16px var(--mint),0 24px 50px -18px #000;opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .18s ease,transform .18s ease}
.sitemenu[hidden]{display:none}
.sitemenu.show{opacity:1;transform:none}
.sm-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sm-item{display:flex;align-items:center;gap:14px;min-height:48px;padding:0 14px;border-radius:12px;color:var(--text);text-decoration:none;font:800 15px Nunito,sans-serif;letter-spacing:.03em;text-transform:uppercase;opacity:.88;transition:background .15s,color .15s,opacity .15s;-webkit-tap-highlight-color:transparent}
.sm-item svg{flex:none;width:22px;height:22px;color:var(--mint);filter:drop-shadow(0 0 5px #4ee6b466)}
a.sm-item:hover,a.sm-item:focus-visible{background:#4ee6b414;opacity:1;color:#fff;outline:0}
a.sm-item:focus-visible{box-shadow:0 0 0 1.5px var(--mint) inset}
a.sm-item:active{background:#4ee6b422}
.sm-item[aria-current=page]{opacity:1;color:var(--gold);background:linear-gradient(90deg,#f2c14e1f,#f2c14e05);box-shadow:inset 3px 0 0 var(--gold)}
.sm-item[aria-current=page] svg{color:var(--gold);filter:drop-shadow(0 0 5px #f2c14e88)}
.sm-av .avbtn{width:26px;height:26px;border-width:1.5px;margin:0 -2px;box-shadow:0 0 10px -3px var(--ac,#4ee6b4)}
.sm-av .avbtn:hover{transform:none}
.sm-sep{height:1px;margin:6px 8px;background:var(--mint-line)}
.sm-snd{justify-content:space-between;cursor:pointer;opacity:1}
.sm-snd .snd{width:34px;height:34px}
.sm-snd:hover .snd{border-color:#4ee6b4aa}
.sm-t{flex:1}
.sm-snd .sm-t{color:var(--text);opacity:.88}
@media(prefers-reduced-motion:reduce){.sitemenu,.mb-bars i{transition:none}}

/* ===== Swamp Coin: embossed gold coin with a star, matches the crystal gem ===== */
:root{--coin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='r' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff3c0'/%3E%3Cstop offset='.45' stop-color='%23f2c14e'/%3E%3Cstop offset='1' stop-color='%239a6a0c'/%3E%3C/linearGradient%3E%3ClinearGradient id='f' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23d99a1f'/%3E%3Cstop offset='1' stop-color='%23ffe08a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='11.5' fill='url%28%23r%29'/%3E%3Ccircle cx='12' cy='12' r='9' fill='url%28%23f%29' stroke='%238a5d0a' stroke-opacity='.75' stroke-width='.9'/%3E%3Cpolygon points='12.00,7.70 13.18,10.78 16.47,10.95 13.90,13.02 14.76,16.20 12.00,14.40 9.24,16.20 10.10,13.02 7.53,10.95 10.82,10.78' fill='%237a4f08' fill-opacity='.9' stroke='%23fff3c0' stroke-opacity='.55' stroke-width='.4' stroke-linejoin='round'/%3E%3Cpath d='M5.2 8.2A8 8 0 0 1 12 4' fill='none' stroke='%23fff' stroke-opacity='.65' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E")}
.coin,.bank .coin,.rates .coin,.price .coin,.cn{border-radius:0;background:var(--coin) center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 0 4px #f2c14e88) drop-shadow(0 1px 0 #0008)}
.bank .coin{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.bank:hover .coin{transform:rotateY(360deg)}}
.cn{filter:drop-shadow(0 0 10px #f2c14ecc) drop-shadow(0 1px 0 #0008)}

/* ===== Motion pass: smooth page transitions, springy buttons and tiles, soft glows (every page) ===== */
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:no-preference){
 body{animation:pgin .55s var(--ease-out) backwards}
 html.leaving body{opacity:0;transform:translateY(-6px);transition:opacity .2s ease-in,transform .2s ease-in}
 @keyframes pgin{from{opacity:0;transform:translateY(10px)}}
 .btn,button.btn,.bank,.snd{transition:transform .35s var(--ease-spring),box-shadow .3s var(--ease-out),filter .25s,background-color .25s,border-color .25s,color .25s}
 @media(hover:hover){
  .btn:hover{transform:translateY(-2px) scale(1.03);filter:brightness(1.08)}
  .bank:hover,.snd:hover{transform:translateY(-1px) scale(1.06)}
  .shopcard:hover,.ptile:hover,.earn a:hover,.slot:hover{transform:translateY(-4px);box-shadow:0 18px 34px -16px #000,0 0 22px -8px var(--c,#5fd38d)}
 }
 .btn:active,.bank:active,.snd:active{transform:scale(.95);transition-duration:.09s}
 .shopcard,.ptile,.earn a,.slot,.tile,.stat{transition:transform .4s var(--ease-spring),box-shadow .35s var(--ease-out),border-color .25s}
 .bank.bump .coin{animation:coinspin .7s var(--ease-out)}
 @keyframes coinspin{40%{transform:rotateY(180deg) scale(1.25)}to{transform:rotateY(360deg)}}
 .rewardnote{animation:fade-up .6s var(--ease-spring) .1s backwards}
 .stage .row{animation:fade-up .6s var(--ease-out) .15s backwards}
 dialog[open]{animation:pvin .4s var(--ease-spring)}
}

/* ===== 3D card viewer (Collection preview): bigger card, drag to rotate, see the back; smaller certificate ===== */
#preview{width:min(94vw,440px);max-height:96dvh;padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px))}
.pv-card{width:min(78vw,calc((100dvh - 300px)/1.5),340px);margin:6px auto 8px;perspective:1100px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.pv-card.grab{cursor:grabbing}
.cv-spin{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.cv-f{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 22px 40px -16px #000d,0 0 28px -8px var(--c)}
.cv-back{transform:rotateY(180deg)}
.cv-f .card{width:100%;height:100%}
.cv-glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,40%),#ffffff55,transparent 55%);mix-blend-mode:soft-light}
.cv-bar{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 10px;font:700 12px Nunito,sans-serif;color:var(--muted)}
.cv-bar b{color:var(--c,#f2c14e);font-weight:800}
.cv-hint{opacity:.75}
.cv-flip{min-height:0;padding:6px 14px;font-size:13px}
#preview .license{padding:9px 12px 8px}
#preview .license .seal{width:20px;height:22px}
#preview .lic-label{margin-top:0;font-size:9.5px}
#preview .license h3{margin:2px 0 3px;font-size:14px}
#preview .license p{font-size:11.5px;line-height:1.4}
#preview .license .lic-fine{margin-top:5px;font-size:10px}

/* viewer speed: no blur behind it, no endless animations or blend modes on the spinning faces */
#preview::backdrop{backdrop-filter:none;background:#05070bf0}
.cv-f .pk-sheen{animation:none;opacity:0}
.cv-f .holo{animation:none;background-position:50% 0}
.cv-f{contain:paint}
.cv-glare{inset:-40%;mix-blend-mode:normal;background:radial-gradient(circle,#ffffff38,transparent 42%);will-change:transform}
.cv-back svg [filter],.cv-back svg [style*="mix-blend"]{display:none}

/* ===== Picture pack covers ===== */
.pk-img{object-fit:cover;object-position:center top;border-radius:12px;-webkit-user-drag:none;user-select:none}
.strip.img{left:0;right:0;border:0;border-radius:12px 12px 0 0;clip-path:none;background-color:transparent;background-repeat:no-repeat;background-position:center top;background-size:auto 1163%}

.bsimg{object-fit:cover;object-position:center;-webkit-user-drag:none;user-select:none}
/* game shell: pause button and HUD tweaks (added) */
.gpause{position:absolute;bottom:10px;right:10px;z-index:4;padding:8px 14px;font-size:12px;min-height:0}
.gpause[hidden]{display:none}

/* glowspore counter under the hearts (added) */
.hud.spn{top:50px;font-size:15px;letter-spacing:.04em;color:#bdfbe5;white-space:nowrap}
.hud.spn.bump{animation:bump .3s ease-out}
.hud.bump{animation:bump .3s ease-out}
#ovs{color:#f2c14e;font-weight:900;font-size:18px;letter-spacing:.04em}

/* ===== Lantern Bog: game look (scoped to the arcade game box) ===== */
#box{border-color:#ffc86a44;box-shadow:0 0 40px -14px #ffb85f,0 0 60px -30px #4ee6b4,0 20px 40px -20px #000}
#box::after{background:radial-gradient(ellipse at center,#0000 62%,#02060ccc 100%)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#box .hud{background:linear-gradient(180deg,#0b1a2bcc,#07111ecc);border:1px solid #ffd98a33;border-radius:999px;padding:5px 12px;text-shadow:none;color:#fff3d6;box-shadow:0 2px 14px -6px #000,inset 0 0 12px -6px #ffd98a66;backdrop-filter:blur(2px)}
#box .hhp{display:flex;align-items:center;gap:4px;padding:5px 10px}
#hp{display:inline-flex;gap:3px}
.fl{display:block;width:17px;height:20px}
.fl svg{display:block;width:100%;height:100%;overflow:visible}
.fl path{fill:#ffb04f;stroke:#ffe3a6;stroke-width:1.2}
.fl .in{fill:#fff3cf;stroke:none}
.fl.on{filter:drop-shadow(0 0 5px #ffb04fcc);animation:flick 2.4s ease-in-out infinite}
.fl.on:nth-child(2){animation-delay:-.8s}.fl.on:nth-child(3){animation-delay:-1.6s}
.fl.off path{fill:#101c2a;stroke:#ffd98a40}.fl.off .in{display:none}
.fl.out{animation:fizz .55s ease-out}
@keyframes flick{0%,100%{transform:scale(1)}50%{transform:scale(1.07) translateY(-1px)}}
@keyframes fizz{0%{transform:scale(1.5) rotate(-12deg);filter:drop-shadow(0 0 10px #ff6b82)}60%{transform:scale(.8) rotate(8deg)}100%{transform:scale(1)}}
#box .hud.spn{top:50px;display:flex;align-items:center;gap:7px;font-size:15px;letter-spacing:.04em;color:#d8fff3}
#box .hud.spn .orb{display:block;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f2fffa,#34e3b0 55%,#0b8f7c);box-shadow:0 0 10px #4ee6b4,0 0 0 3px #4ee6b433}
#box .hud.tm{font-size:12px;letter-spacing:.14em;color:#ffe9b0;padding:5px 12px}
#box .hud.bump{animation:bump .3s ease-out}
/* title, pause, complete and game over screens */
#box .gov{background:radial-gradient(ellipse at 50% 42%,#0c2238ee,#050b16f5 75%);backdrop-filter:blur(3px)}
#box .gov[data-m=over]{background:radial-gradient(ellipse at 50% 42%,#1a1626ee,#07060cf7 75%)}
#box .gov[data-m=complete]{background:radial-gradient(ellipse at 50% 42%,#2a2a18ee,#07100cf5 75%)}
.gcard{display:grid;justify-items:center;gap:10px;animation:gin .45s var(--ease-spring,ease-out)}
@keyframes gin{0%{opacity:0;transform:translateY(10px) scale(.96)}100%{opacity:1;transform:none}}
#box .gov h3{margin:0;font:900 28px Nunito,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#fff3d6;text-shadow:0 0 22px #ffb04f99}
#box .gov[data-m=over] h3{color:#ffd9d2;text-shadow:0 0 22px #ff6b8299}
#box .gov[data-m=complete] h3{color:#fff0b8;text-shadow:0 0 26px #ffd45fcc}
#box .gov p{color:#cfe1e3}
.lantern{width:46px;height:62px;overflow:visible;filter:drop-shadow(0 0 14px #ffb04faa)}
.lantern .ring{stroke:#8a6a52}.lantern .cap{fill:#6b4c5a}.lantern .glass{fill:#ffd98a33;stroke:#ffd98a;stroke-width:1.6}
.lantern .flame{fill:#ffb04f;transform-origin:24px 42px;animation:flick 1.6s ease-in-out infinite}.lantern .smoke{stroke:#9aa6b8;display:none}
.gov[data-m=over] .lantern{filter:none;opacity:.9}
.gov[data-m=over] .lantern .glass{fill:#1a2434;stroke:#58667a}.gov[data-m=over] .lantern .flame{display:none}
.gov[data-m=over] .lantern .smoke{display:block;animation:smoke 2.4s ease-out infinite}
@keyframes smoke{0%{opacity:0;transform:translateY(6px)}30%{opacity:.8}100%{opacity:0;transform:translateY(-8px)}}
#ovs{display:grid;gap:8px;justify-items:center;color:#ffe6b0;font-weight:800;font-size:15px;letter-spacing:.03em}
#ovs b{color:#fff3d6;font-size:20px}
.pips{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:200px}
.pip{width:11px;height:11px;border-radius:50%;background:#12222f;border:1px solid #4ee6b440}
.pip.on{background:radial-gradient(circle at 35% 35%,#f2fffa,#34e3b0 60%,#0b8f7c);border-color:#a6ffe9;box-shadow:0 0 8px #4ee6b4}
#box .gov .btn{box-shadow:0 0 28px -6px #ffb04f}
.hint{font:800 11px Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8fa3ad!important}
.hint[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.fl.on,.lantern .flame,.lantern .smoke,.gcard{animation:none}}

/* ---- Touch controls (Swamp Quest). Shown only on touch devices; see arcade.html ---- */
.arcstage{align-self:start;display:grid;gap:12px;justify-items:center;width:100%}
.tc[hidden]{display:none}
.tc{--tcs:clamp(56px,17.6vw,78px);width:min(100%,420px);display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(8px,2.6vw,14px);padding:0 2px env(safe-area-inset-bottom,0px);box-sizing:border-box;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.tc-grp{display:flex;align-items:flex-end;gap:clamp(8px,2.6vw,14px)}
.tcb{--c:78,230,180;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:var(--tcs);height:var(--tcs);min-height:0;padding:0;border-radius:50%;cursor:pointer;
 font:900 clamp(10px,3vw,12px) Nunito,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#e9fff8;
 background:radial-gradient(circle at 50% 30%,rgba(var(--c),.28),rgba(8,18,16,.82) 72%);border:2px solid rgba(var(--c),.8);
 box-shadow:0 0 18px -6px rgba(var(--c),.8),0 6px 14px -8px #000;
 touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
 transition:transform .08s,box-shadow .08s,background .08s}
.tcb svg{width:40%;height:40%;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.tcb span{pointer-events:none;line-height:1}
.tcb.on,.tcb:active{transform:scale(.92);background:radial-gradient(circle at 50% 40%,rgba(var(--c),.6),rgba(8,18,16,.75) 78%);box-shadow:0 0 26px -2px rgba(var(--c),1),inset 0 0 14px rgba(var(--c),.5)}
.tc-jmp{--c:255,200,106;width:calc(var(--tcs)*1.2);height:calc(var(--tcs)*1.2)}
.tc-atk{--c:255,120,140;margin-bottom:calc(var(--tcs)*.34)}
/* a slightly larger invisible touch zone around each round button, so a thumb that lands near the edge still counts */
.tcb::after{content:"";position:absolute;inset:-6px;border-radius:50%}
#arc:not([data-mode=playing]) .tc{opacity:.55}
#arc:not([data-mode=playing]) .tcb{pointer-events:none}
@media(prefers-reduced-motion:reduce){.tcb{transition:none}}

/* keep the whole play area (board + buttons) on one phone screen */
body.tc-on .box{width:min(100%,420px,calc((100vh - 290px)*.75));width:min(100%,420px,calc((100dvh - 290px)*.75))}

/* landscape touch screens: buttons sit in the empty space left and right of the board */
@media(orientation:landscape) and (max-height:820px){
 body.tc-on .arcstage{--bw:min(420px,calc((100vh - 94px)*.75));--bw:min(420px,calc((100dvh - 94px)*.75));grid-template-columns:minmax(0,1fr) var(--bw) minmax(0,1fr);grid-template-rows:calc(var(--bw)*4/3);align-items:end;gap:12px}
 body.tc-on .box{width:100%}
 body.tc-on .arcstage .box{grid-column:2;grid-row:1}
 body.tc-on .tc{display:contents}
 body.tc-on .tc-move{grid-column:1;grid-row:1;justify-self:start;padding-bottom:6px}
 body.tc-on .tc-act{grid-column:3;grid-row:1;justify-self:end;padding-bottom:6px}
 body.tc-on .tc-atk{margin-bottom:calc(var(--tcs)*.3)}
 body.tc-on .tc{padding:0}
 body.tc-on .tc-move{padding-left:env(safe-area-inset-left,0px)}
 body.tc-on .tc-act{padding-right:env(safe-area-inset-right,0px)}
 body.tc-on #arc[data-mode=playing] .tc-grp{opacity:1}
 body.tc-on #arc:not([data-mode=playing]) .tc-grp{opacity:.55}
 body.tc-on .tc-grp{gap:14px}
}
@media(orientation:landscape) and (max-height:430px){body.tc-on .tc{--tcs:62px}body.tc-on .tc-grp{--tcs:62px}}

/* ---- Start screen: Glowspore Trail ---- */
#box{container-type:inline-size}
#box .gov{overflow-y:auto;align-content:safe center;padding:clamp(12px,5cqw,24px) clamp(12px,5cqw,22px)}
.gov .ttl,.gov .how{display:none}
.gov[data-m=title] .ttl{display:block}
.gov[data-m=title] #ovp{display:none}
.gov[data-m=title]{background:radial-gradient(ellipse at 50% 28%,#16382fcc,#08151fee 55%,#03070cf8 100%)!important}
.gov[data-m=title]::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 24%,#ffb04f2e,#0000 42%),radial-gradient(circle at 18% 70%,#4ee6b422,#0000 30%),radial-gradient(circle at 85% 60%,#4ee6b41a,#0000 28%)}
.gov[data-m=title] .gcard{position:relative;gap:clamp(6px,2.2cqw,10px);width:100%}
.gov[data-m=title] .lantern{width:clamp(30px,11cqw,46px);height:clamp(40px,15cqw,62px);filter:drop-shadow(0 0 16px #ffb04fcc) drop-shadow(0 0 34px #ffb04f66)}
#box .gov[data-m=title] h3{display:grid;justify-items:center;line-height:.95;letter-spacing:.14em;margin:0}
#box .gov[data-m=title] h3 span:first-child{font-size:clamp(24px,10.5cqw,40px);color:#ffe9b0;text-shadow:0 0 24px #ffb04fcc,0 3px 0 #5a3a12}
#box .gov[data-m=title] h3 span:last-child{font-size:clamp(20px,8.5cqw,32px);color:#8ff5d2;letter-spacing:.42em;margin-right:-.42em;text-shadow:0 0 22px #4ee6b4cc,0 3px 0 #0a4a3a}
.eyebrow{margin:0;font:900 clamp(9px,2.8cqw,11px) Nunito,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#7fe3c4!important;opacity:.9}
.tag{margin:0;font:700 clamp(11px,3.5cqw,14px)/1.4 Nunito,sans-serif;color:#cfe1e3!important;max-width:26ch;text-align:center}
.gov[data-m=title] .acts{display:grid;gap:8px;width:min(100%,230px);margin-top:2px}
.gov[data-m=title] .acts .btn{width:100%;min-height:44px;padding:10px 18px;font-size:clamp(14px,4.4cqw,17px);letter-spacing:.06em}
.gov[data-m=title] #go{font-weight:900;text-transform:uppercase;letter-spacing:.14em}
.gov[data-m=title] #how{border:0;color:#d8fff3;box-shadow:0 0 0 1.5px #4ee6b480 inset}
.gov[data-m=title] #how:hover,.gov[data-m=title] #how:focus-visible{box-shadow:0 0 0 1.5px #4ee6b4 inset,0 0 18px -4px #4ee6b4;color:#fff}
.gov .btn:focus-visible,.snd2:focus-visible,.tcb:focus-visible{outline:2px solid #fff;outline-offset:3px}
.keys{margin:2px 0 0;display:grid!important;grid-template-columns:1fr 1fr;gap:6px;width:min(100%,300px)}
.keys>div{display:grid;gap:3px;padding:6px 8px;border-radius:10px;background:#04100d99;border:1px solid #4ee6b430;text-align:center}
.keys dt{font:900 9px Nunito,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#ffd98a}
.keys dd{margin:0;font:800 clamp(10px,3.1cqw,12px) Nunito,sans-serif;color:#d8fff3;display:flex;flex-wrap:wrap;gap:3px;justify-content:center;align-items:center}
kbd{display:inline-block;min-width:1.7em;padding:1px 6px;border-radius:6px;font:800 .92em Nunito,sans-serif;color:#fff3d6;background:#12222f;border:1px solid #4ee6b455;box-shadow:0 2px 0 #02080b;text-align:center}
.kt{display:none}
body.tc-on .kd{display:none}body.tc-on .kt{display:inline}
.snd2{display:grid!important;grid-template-columns:auto auto;align-items:center;justify-content:center;column-gap:7px;row-gap:1px;min-height:44px;padding:4px 14px;border-radius:999px;cursor:pointer;background:#04100dcc;color:#d8fff3;border:1px solid #4ee6b455;font:900 12px Nunito,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.snd2 svg{grid-row:1/3;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.snd2 .x{display:none}.snd2.off .w{display:none}.snd2.off .x{display:inline}
.snd2.off{color:#9fb2b6;border-color:#ffffff22}
.snd2 small{font:700 9px Nunito,sans-serif;letter-spacing:.08em;color:#8fa3ad;text-transform:uppercase;text-align:left}
.snd2:hover{border-color:#4ee6b4}

/* How to play panel */
.gov[data-v=how] .gcard{display:none}
.gov[data-v=how] .how{display:grid;gap:clamp(6px,2.4cqw,10px);width:100%;animation:gin .3s ease-out}
#box .how h3{margin:0;text-align:center;font-size:clamp(18px,6.4cqw,24px);letter-spacing:.2em}
.hl{list-style:none;margin:0;padding:0;display:grid;gap:clamp(5px,1.8cqw,8px);text-align:left}
.hl li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:7px 10px;border-radius:12px;background:#04100dcc;border:1px solid #4ee6b430}
.hl b{display:block;font:900 11px Nunito,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#ffd98a;margin-bottom:1px}
.hl span{font:700 clamp(11px,3.3cqw,13px)/1.38 Nunito,sans-serif;color:#d8e8e4}
.hi{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#4ee6b41f;border:1px solid #4ee6b466;color:#8ff5d2;margin-top:2px}
.hi svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hi.orb::after{content:"";width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f2fffa,#34e3b0 55%,#0b8f7c);box-shadow:0 0 10px #4ee6b4}
.hrow{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.hrow .btn{min-height:44px;padding:10px 14px;font-size:15px}
.how .btn.ghost{color:#d8fff3;box-shadow:0 0 0 1.5px #4ee6b480 inset}
@container (max-width:320px){.gov[data-m=title] .tag{display:none}.keys dt{display:none}.keys>div{padding:5px 6px}.snd2 small{display:none}}
@container (max-width:250px){.gov[data-m=title] .eyebrow,.gov[data-m=title] .keys{display:none}}
@media(prefers-reduced-motion:reduce){.gov[data-v=how] .how{animation:none}}
/* start screen tightening */
#box .gov[data-m=title] .eyebrow,#box .gov[data-m=title] .tag{text-transform:none;display:block}
#box .gov[data-m=title] .eyebrow{text-transform:uppercase;letter-spacing:.2em;white-space:nowrap}
#box .gov[data-m=title] .tag{letter-spacing:.01em;max-width:30ch;line-height:1.35}
.gov[data-m=title] .acts{gap:7px;width:min(100%,220px)}
.gov[data-m=title] .acts .btn{min-height:42px;padding:8px 18px}
.keys>div{padding:4px 6px;gap:1px}
.snd2{min-height:40px;padding:2px 14px}
@container (max-width:330px){
 #box .gov[data-m=title] .tag{display:none}
 .keys dt{display:none}.snd2 small{display:none}
 .hi{display:none}.hl li{grid-template-columns:1fr;padding:5px 9px;gap:0}.hl b{font-size:10px}
}
@container (max-width:250px){#box .gov[data-m=title] .eyebrow,.gov[data-m=title] .keys{display:none}}
@container (min-width:331px) and (max-width:400px){.hl li{padding:5px 9px}.hi{width:26px;height:26px}}
.how .hrow{position:sticky;bottom:calc(-1*clamp(12px,5cqw,24px));padding:8px 0 2px;background:linear-gradient(180deg,#0000,#050b16 35%)}
.how{padding-bottom:0}
@container (max-width:250px){
 .gov[data-m=title] .lantern{display:none}
 #box .gov[data-m=title] h3 span:first-child{font-size:22px}#box .gov[data-m=title] h3 span:last-child{font-size:18px}
 .gov[data-m=title] .acts .btn{min-height:40px}.snd2{min-height:36px}
 #box .gov{padding-top:10px;padding-bottom:10px}
}
.gov[data-m=title] .gcard{gap:clamp(5px,1.8cqw,10px)}
.hl span{line-height:1.38!important;display:block}
.hl kbd{line-height:1.2;margin:0 1px}
.gov[data-m=title] #how{text-transform:uppercase;letter-spacing:.12em;font-weight:900;font-size:clamp(13px,4cqw,15px)}
.hrow .btn{width:100%}
.gov:not([data-m=title]) .keys,.gov:not([data-m=title]):not([data-m=paused]) .snd2,.gov:not([data-m=title]) .eyebrow,.gov:not([data-m=title]) .tag,.gov:not([data-m=title]) #how{display:none!important}

/* in-game sound switch, sits left of Pause */
.gsnd{right:84px;padding:8px 10px;line-height:0}
.gsnd svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gsnd .x{display:none}.gsnd.off .w{display:none}.gsnd.off .x{display:inline}.gsnd.off{color:#9fb2b6}

/* Level Select panel */
.gov .lvs{display:none}
.gov[data-v=levels] .gcard,.gov[data-v=levels] .how{display:none}
.gov[data-v=levels] .lvs{display:grid;gap:clamp(8px,2.6cqw,12px);width:100%;max-width:300px;margin-inline:auto;animation:gin .3s ease-out}
#box .lvs h3{margin:0;text-align:center;font-size:clamp(18px,6.4cqw,24px);letter-spacing:.2em}
.lvl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lvb{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;width:100%;text-align:left;padding:12px 14px;border-radius:14px;background:#04100dcc;border:1.5px solid #4ee6b4aa;color:#e8f6f0;cursor:pointer;font:inherit;box-shadow:0 0 22px -10px #4ee6b4}
.lvb:hover:not(:disabled),.lvb:focus-visible{border-color:#ffd98a;box-shadow:0 0 22px -4px #ffb04f}
.lvb span{display:grid;gap:2px}
.lvb b{font:900 12px Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#ffd98a}
.lvb em{font:700 12px/1.3 Nunito,sans-serif;font-style:normal;color:#cfe1e3}
.lvi{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#4ee6b41f;border:1px solid #4ee6b466;color:#8ff5d2}
.lvi svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.lvb.done .lvi{background:#ffd98a26;border-color:#ffd98a88;color:#ffd98a}
.lvb.locked{cursor:not-allowed;background:#0a0f0ecc;border-color:#ffffff22;box-shadow:none}
.lvb.locked b{color:#8d9a96}.lvb.locked em{color:#7d8a86}
.lvb.locked .lvi{background:#ffffff0d;border-color:#ffffff22;color:#7d8a86}
.hrow1 .btn{width:100%;min-height:44px}
#lvsel{border:0;color:#d8fff3;box-shadow:0 0 0 1.5px #4ee6b480 inset}
#lvsel:hover,#lvsel:focus-visible{box-shadow:0 0 0 1.5px #4ee6b4 inset,0 0 18px -4px #4ee6b4;color:#fff}
.lvs .btn.ghost{color:#d8fff3;box-shadow:0 0 0 1.5px #4ee6b480 inset}
@media(prefers-reduced-motion:reduce){.gov[data-v=levels] .lvs{animation:none}}
.gov[data-m=title] #lvsel{text-transform:uppercase;letter-spacing:.1em;font-weight:900}

/* Score HUD and results */
#box .hud.scw{left:auto;right:10px;top:50px;display:flex;align-items:baseline;gap:8px;font-size:15px;letter-spacing:.03em;color:#ffe9b0;padding:5px 12px}
#box .hud.scw .sl{font:900 10px Nunito,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#bdfbe5}
#box .hud.scw b{font:900 17px Nunito,sans-serif;font-variant-numeric:tabular-nums;color:#fff3d6;min-width:2ch;text-align:right}
#box .hud.scw .stm{font:800 12px Nunito,sans-serif;font-variant-numeric:tabular-nums;color:#a9c7c0;padding-left:8px;border-left:1px solid #ffffff2a}
#box .hud.scb{left:auto;right:10px;top:88px;font:900 11px Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#a9c7c0;padding:3px 10px}
#box .hud.scb.beat{color:#1b1400;background:linear-gradient(180deg,#ffe08a,#f2b84a);border-color:#fff3cf}
.sres{display:grid;gap:5px;justify-items:center;width:100%}
.sres .sk{font:900 10px Nunito,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#bdfbe5}
.sres .sbig{font:900 clamp(30px,11cqw,42px)/1 Nunito,sans-serif;color:#fff3d6;text-shadow:0 0 22px #ffb04fcc;font-variant-numeric:tabular-nums}
.sres .sbest{font:900 11px Nunito,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#a9c7c0}
.sres .sbest.new{color:#1b1400;background:linear-gradient(180deg,#ffe08a,#f2b84a);padding:3px 12px;border-radius:999px;box-shadow:0 0 18px -2px #ffb04f}
.srows{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px;width:100%;max-width:270px}
.srows li{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;padding:5px 10px;border-radius:10px;background:#04100dcc;border:1px solid #4ee6b430;text-align:left}
.srows span{font:800 12px Nunito,sans-serif;color:#d8e8e4}
.srows i{font:800 12px Nunito,sans-serif;font-style:normal;color:#8ff5d2;font-variant-numeric:tabular-nums}
.srows em{font:900 12px Nunito,sans-serif;font-style:normal;color:#ffd98a;min-width:4.2ch;text-align:right;font-variant-numeric:tabular-nums}
.lvb em.lvbest{color:#ffd98a;font-weight:900}
@media(prefers-reduced-motion:reduce){#box .hud.scw.bump{animation:none}}
/* compact results card so the score, breakdown and buttons fit the game area */
.gov[data-m=complete] .lantern{display:none}
#box .gov[data-m=complete] h3{font-size:clamp(18px,6.4cqw,23px);letter-spacing:.12em}
.gov[data-m=complete] .gcard{gap:6px}
.gov[data-m=complete] #ovp{font-size:13px;line-height:1.35}
.gov[data-m=complete] .acts{grid-template-columns:1fr 1fr;gap:6px;width:min(100%,290px)}
.gov[data-m=complete] .acts #go,.gov[data-m=complete] .acts #quit{grid-column:1/-1}
.gov[data-m=complete] .acts .btn{width:100%;min-height:38px;padding:6px 10px;font-size:14px}
.gov[data-m=complete] .srows li{padding:3px 10px}
.gov[data-m=complete] .sres{gap:3px}

/* ---- Full screen play (adventure page) ---- */
.gfs{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:5;width:36px;height:36px;min-height:0;padding:0;display:grid;place-items:center;border-radius:999px;line-height:0}
.gfs svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#stage:not(.fs) .gfs .ex,#stage.fs .gfs .en{display:none}
html.fs-on,html.fs-on body{overflow:hidden;overscroll-behavior:none}
/* the page-fade animation leaves a transform on body, which would trap a fixed full-screen layer inside it */
html.fs-on body{animation:none;transform:none}
#stage.fs{
 --fw:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
 --fh:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
 --fh:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
 --bwid:min(var(--fw),calc(var(--fh)*.75));
 position:fixed;inset:0;z-index:2147483000;width:auto;height:auto;align-self:stretch;justify-self:stretch;margin:0;box-sizing:border-box;
 padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
 display:grid;place-content:center;justify-items:center;align-items:center;gap:10px;background:#020605;overflow:hidden}
#stage.fs #box{width:var(--bwid);border-radius:0;border-color:transparent;box-shadow:none}
/* phone held upright: the board shrinks a little so Left / Right / Attack / Jump stay on screen under it */
body.tc-on #stage.fs{--bwid:min(var(--fw),calc((var(--fh) - 120px)*.75))}
#stage.fs .tc{width:min(var(--fw),480px);padding:0 2px}
/* touch device on its side: buttons sit left and right of the board, which fills the full height */
@media(orientation:landscape){
 body.tc-on #stage.fs{--bwid:calc(var(--fh)*.75);grid-template-columns:minmax(0,1fr) var(--bwid) minmax(0,1fr);grid-template-rows:var(--fh);gap:12px;align-items:end}
 body.tc-on #stage.fs #box{grid-column:2;grid-row:1;width:100%;align-self:center}
 body.tc-on #stage.fs .tc{display:contents}
 body.tc-on #stage.fs .tc-move{grid-column:1;grid-row:1;justify-self:start;padding-bottom:6px}
 body.tc-on #stage.fs .tc-act{grid-column:3;grid-row:1;justify-self:end;padding-bottom:6px}
 body.tc-on #stage.fs .tc-atk{margin-bottom:calc(var(--tcs)*.3)}
}

/* ---- Run rewards (adventure end screens) ---- */
.rwd{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 16px;margin:4px 0 0;padding:6px 12px;border-radius:12px;background:#04100dcc;border:1px solid #f2c14e55;box-shadow:0 0 22px -10px #f2c14e}
.rwd span{display:inline-flex;align-items:center;gap:6px;font:900 15px Nunito,sans-serif;color:#fff3d6;font-variant-numeric:tabular-nums}
.rwd .coin{width:18px;height:18px;margin:0}
.rwd .gem{width:15px;height:17px}
.rwd em{flex:0 0 100%;text-align:center;font:800 10px Nunito,sans-serif;font-style:normal;letter-spacing:.06em;color:#a9c7c0}
#box .gov{padding-top:46px}   /* keeps the title clear of the full screen button */

/* ---- Avatar: try cosmetics on before buying ---- */
.it .try{position:relative;width:100%;padding:7px 8px;border-radius:10px;border:1px dashed #ffffff44;background:transparent;color:#d8e8e4;font:800 12px Nunito,sans-serif;letter-spacing:.06em;cursor:pointer}
.it .try[aria-pressed=true]{border-style:solid;border-color:#f2c14e;background:#f2c14e22;color:#ffe9b0}
.it .art[data-p]{cursor:pointer}
.pvbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:12px;background:#f2c14e1a;border:1px solid #f2c14e66;font:800 13px Nunito,sans-serif;color:#ffe9b0}
.pvbar[hidden],.pvmini[hidden]{display:none}
.pvbar .btn{padding:6px 12px;min-height:0;font-size:12px}
.slots .slot.pv{border-color:#f2c14e;border-style:dashed}
.slots .slot.pv small:last-child{color:#f2c14e}
.pvmini{position:fixed;right:12px;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:9;display:grid;justify-items:center;gap:2px;padding:6px 8px 5px;border-radius:16px;background:#0b110dee;border:1px solid #f2c14e88;box-shadow:0 10px 26px -8px #000,0 0 18px -6px #f2c14e;color:#ffe9b0;cursor:pointer}
.pvmini span{display:block;width:62px;height:62px;border-radius:12px;overflow:hidden}.pvmini span svg{display:block;width:100%;height:100%}
.pvmini b{font:900 9px Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase}
@media(min-width:640px){.pvmini{bottom:18px}}

/* ===== Loot: fragment drop notification + inventory line ===== */
#box .loot{position:absolute;top:92px;left:50%;transform:translateX(-50%);z-index:5;display:grid;gap:6px;justify-items:center;pointer-events:none;width:max-content;max-width:92%}
#box .lt{--c:#b9bcc2;display:flex;align-items:center;gap:9px;padding:6px 14px 6px 10px;border-radius:999px;background:linear-gradient(180deg,#0b1a2bf2,#07111ef2);border:1px solid var(--c);box-shadow:0 0 18px -4px var(--c),0 2px 14px -6px #000;color:#fff3d6;animation:ltin .35s cubic-bezier(.2,.9,.3,1.2),ltout .4s ease-in 2.25s forwards}
#box .lt.r-rare,#box .lt.r-epic,#box .lt.r-legendary,#box .lt.r-mythical{box-shadow:0 0 28px -2px var(--c),0 2px 14px -6px #000}
#box .lt i,.frinv .fi i{display:block;flex:none;width:14px;height:16px;background:linear-gradient(135deg,#fff,var(--c) 55%,#0007);clip-path:polygon(50% 0,100% 38%,78% 100%,22% 100%,0 38%);filter:drop-shadow(0 0 5px var(--c))}
#box .lt span{display:grid;line-height:1.15;text-align:left}
#box .lt b{font:900 13px Nunito,sans-serif;letter-spacing:.03em}
#box .lt em{font:800 10px Nunito,sans-serif;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
@keyframes ltin{from{opacity:0;transform:translateY(-8px) scale(.92)}}
@keyframes ltout{to{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){#box .lt{animation:ltout .4s ease-in 2.25s forwards}}
.frinv{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:0;max-width:420px;font:800 12px Nunito,sans-serif;color:#cfe1e3;text-align:center}
.frinv .fl{letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#a9c7c0)}
.frinv .fi{--c:#b9bcc2;display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 8px;border-radius:999px;border:1px solid var(--c);background:#07111ecc;color:#fff3d6}

/* ===== Header logo: the SwampRealms emblem + wordmark image (transparent PNGs with a cream outline) ===== */
header .logo{gap:10px}
header .logo img{display:block;flex:none}
header .logo .mark{width:44px;height:44px;filter:drop-shadow(0 2px 6px #0008)}
header .logo .word{width:160px;height:auto}
@media(max-width:420px){header .logo .word{display:none}}

/* ===== Bag: coins, crystals, fragments and gear (opened with data-bag / Bag.open()) ===== */
.bag-open{overflow:hidden}
.bag-wrap{position:fixed;inset:0;z-index:2147483600;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:16px 12px calc(16px + env(safe-area-inset-bottom,0px))}
.bag-wrap[hidden]{display:none}
.bag-back{position:absolute;inset:0;background:#02060acc;backdrop-filter:blur(3px)}
.bag{--g:#f2c14e;position:relative;box-sizing:border-box;min-width:0;width:min(520px,100%);max-height:min(640px,100%);display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:22px;background:linear-gradient(180deg,#0e1712f7,#070d0af7);border:1px solid #4ee6b455;box-shadow:0 0 44px -12px #4ee6b4,0 26px 60px -20px #000;color:#e7f4ee;animation:bagin .3s cubic-bezier(.2,.9,.3,1.1)}
@keyframes bagin{from{opacity:0;transform:translateY(14px) scale(.97)}}
.bag-head{display:flex;align-items:center;gap:10px}
.bag-head>svg{width:26px;height:26px;color:#f2c14e;filter:drop-shadow(0 0 6px #f2c14e88);flex:none}
.bag-head h2{margin:0;flex:1;font:400 26px "Bagel Fat One",Nunito,sans-serif;letter-spacing:.02em;color:#fff3d6}
.bag-x{width:38px;height:38px;border-radius:50%;border:1px solid #4ee6b444;background:#0a100c;color:#c8fff4;font:800 22px/1 Nunito,sans-serif;cursor:pointer}
.bag-x:hover{border-color:#4ee6b4}
.bg-wallet{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bg-wallet>span{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;background:#05090a;border:1px solid #f2c14e44;min-width:0}
.bg-wallet .bg-gems{border-color:#4ee6b455}
.bg-wallet .coin{margin:0;width:20px;height:20px;flex:none}
.bg-wallet .gem{margin:0}
.bg-wallet b{font:900 20px Nunito,sans-serif;color:#fff3d6}
.bg-wallet em{font:800 10px Nunito,sans-serif;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:#a9c7c0;line-height:1.1;min-width:0}
.bg-tabs{min-width:0;display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.bg-tabs::-webkit-scrollbar{display:none}
.bg-tab{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:6px 12px;border-radius:999px;border:1px solid #4ee6b433;background:#0a100c;color:#cfe1e3;font:800 12px Nunito,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.bg-tab svg{width:16px;height:16px;flex:none}
.bg-tab small{min-width:18px;padding:1px 6px;border-radius:999px;background:#f2c14e;color:#1a1405;font:900 10px Nunito,sans-serif;text-align:center}
.bg-tab[aria-selected=true]{border-color:#f2c14e;background:#f2c14e22;color:#ffe9b0;box-shadow:0 0 16px -6px #f2c14e}
#bgpanel{overflow-y:auto;min-height:0;overscroll-behavior:contain}
.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bgs{--c:#b9bcc2;position:relative;display:grid;justify-items:center;align-content:center;gap:3px;aspect-ratio:1;padding:8px 4px;border-radius:14px;background:#05090a;border:1px solid var(--c);box-shadow:0 0 16px -8px var(--c);text-align:center;min-width:0}
.bgs i{display:block;width:26px;height:30px;background:linear-gradient(135deg,#fff,var(--c) 55%,#0007);clip-path:polygon(50% 0,100% 38%,78% 100%,22% 100%,0 38%);filter:drop-shadow(0 0 6px var(--c))}
.bgs b{font:900 11px/1.15 Nunito,sans-serif;color:#fff3d6;overflow-wrap:anywhere}
.bgs em{font:800 9px Nunito,sans-serif;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.bgs .bgq{position:absolute;top:5px;right:6px;font:900 12px Nunito,sans-serif;color:#ffe9b0}
.bgs.empty{border:1px dashed #4ee6b433;background:#05090a88;box-shadow:none}
.bgs:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.bg-note{margin:10px 2px 2px;font:800 12px/1.4 Nunito,sans-serif;color:#a9c7c0;text-align:center}
.bagbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
.bagbtn svg{width:18px;height:18px;flex:none}
.bagbtn small{min-width:20px;padding:1px 7px;border-radius:999px;background:#f2c14e;color:#1a1405;font:900 11px Nunito,sans-serif}
.bagrow{display:flex;justify-content:center;margin:0}
button.tile{font:inherit;color:inherit;text-align:inherit;cursor:pointer}
.tile .bagbadge{display:inline-block;min-width:20px;margin-left:6px;padding:1px 7px;border-radius:999px;background:#f2c14e;color:#1a1405;font:900 11px Nunito,sans-serif;text-align:center}
@media(max-width:380px){.bg-wallet em{display:none}.bag{padding:12px}}
@media(prefers-reduced-motion:reduce){.bag{animation:none}}

/* Home hero: longer title word, sized so it fits one line on phones */
.hero h1{font-size:clamp(38px,12.2vw,88px)}
.hero h1 span{font-size:.4em;letter-spacing:.04em}

/* Home hero showcase: Boggy (front) with the card back peeking out behind it */
.showcase{width:clamp(280px,86vw,380px);aspect-ratio:1/.9;margin-bottom:26px}
.showcase .glow{inset:-20px -10px}
.showcase .sc-f,.showcase .sc-b{position:absolute;top:0;width:54%;aspect-ratio:2/3;display:block}
.showcase .sc-f{left:0;z-index:2}
.showcase .sc-b{right:0;top:6%;z-index:1;border-radius:var(--radius);overflow:hidden;rotate:7deg;background:#0a0d07;box-shadow:0 0 0 2px #f2c14e,0 0 0 3px #0008,0 22px 40px -14px #000d,0 0 30px -8px #f2c14e88;animation:floaty 5s var(--ease-in-out) -2.5s infinite}
.showcase .sc-b img{display:block;width:100%;height:100%;object-fit:cover}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.showcase .sc-b{transition:rotate .5s var(--ease-out),translate .5s var(--ease-out)}.showcase:hover .sc-b{rotate:10deg;translate:4% 0}}
@media(prefers-reduced-motion:reduce){.showcase .sc-b{animation:none}}

/* Gold border on EVERY card back (pack opening flip, card viewer, home showcase) */
:root{--back-ring:0 0 0 2px #f2c14e,0 0 0 3px #0008,0 22px 40px -14px #000d,0 0 30px -8px #f2c14e88}
.face.back,.cv-f.cv-back,.showcase .sc-b{box-shadow:var(--back-ring)}

/* ===== Touch: no text selection, callouts, tap flash or double-tap zoom while using the site (iPhone / Android) =====
   touch-action:manipulation keeps pinch zoom (accessibility) but removes double-tap zoom. Form fields stay selectable so people can type and paste. */
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
img,svg,canvas,a,button{-webkit-touch-callout:none;-webkit-user-drag:none}
input,textarea,select,[contenteditable="true"],.selectable{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
.bgs{cursor:pointer;touch-action:manipulation}
.bgs.on{box-shadow:0 0 0 2px var(--c),0 0 20px -4px var(--c)}
.bg-detail{margin:10px 0 0;padding:8px 12px;border-radius:12px;background:#05090a;border:1px solid var(--c,#4ee6b4);color:#fff3d6;font:800 12px/1.4 Nunito,sans-serif;text-align:center}
.bg-detail[hidden]{display:none}

/* ===== Phones: scroll INSIDE the page instead of the browser window =====
   Safari/Chrome on a phone collapse and re-show their top and bottom bars whenever the document scrolls, which makes the site and the tab bar jump.
   Here the document is fixed to the screen and <body> is the scroller, so the browser bars stay put. Desktop and tablets scroll normally. */
@media(max-width:639px) and (pointer:coarse){
 html{height:100%;overflow:hidden;overscroll-behavior:none}
 body{height:100%;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:none;scroll-padding-top:76px}
}
.bag-open body{overflow:hidden}

/* ===== Home: featured game panel (Swamp Adventure) ===== */
.feat{position:relative;display:grid;gap:0;max-width:760px;margin:0 auto;overflow:hidden;border-radius:22px;background:var(--panel);border:1px solid #f2c14e66;box-shadow:0 0 40px -14px #f2c14e,0 20px 44px -24px #000;text-decoration:none;color:inherit;text-align:left}
.feat-art{position:relative;display:block;aspect-ratio:5/3;overflow:hidden}
.feat-art svg{display:block;width:100%;height:100%}
.feat-badge{position:absolute;top:12px;left:12px;padding:4px 12px;border-radius:999px;background:#f2c14e;color:#1a1405;font:900 11px Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.feat-body{display:grid;gap:10px;justify-items:start;padding:18px 18px 20px}
.feat-title{font:400 28px/1.05 "Bagel Fat One",Nunito,sans-serif;color:#fff3d6}
.feat-text{color:#cfe1e3;font-weight:600}
.feat-chips{display:flex;flex-wrap:wrap;gap:6px}
.feat-chips i{font:800 11px Nunito,sans-serif;font-style:normal;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid #4ee6b455;background:#05090a;color:#c8fff4}
.feat-cta{margin-top:4px;pointer-events:none}
.feat:hover{border-color:#f2c14e;box-shadow:0 0 46px -10px #f2c14e,0 20px 44px -24px #000}
.feat:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
.feat-more{margin:14px 0 0;text-align:center}
.feat-more a{color:var(--mint-soft);font-weight:800}
@media(min-width:640px){.feat{grid-template-columns:1.05fr 1fr;align-items:stretch}.feat-art{aspect-ratio:auto;min-height:260px}.feat-body{align-content:center;padding:24px}}
.feat-text{font-size:15px;line-height:1.5;font-weight:600}

/* ===== Bag: Craft tab (recipes made from fragments) ===== */
.cr-list{display:grid;gap:8px}
.cr-row{--c:#b9bcc2;display:grid;gap:6px;padding:10px 12px;border-radius:14px;background:#05090a;border:1px solid #4ee6b433}
.cr-row.can{border-color:var(--c);box-shadow:0 0 16px -8px var(--c)}
.cr-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cr-top b{font:900 14px Nunito,sans-serif;color:#fff3d6}
.cr-top small{font:800 10px Nunito,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.cr-desc{margin:0;font:700 12px/1.35 Nunito,sans-serif;color:#a9c7c0}
.cr-cost{display:flex;flex-wrap:wrap;gap:6px}
.cr-chip{padding:3px 9px;border-radius:999px;background:#0a100c;border:1px solid #4ee6b455;color:#c8fff4;font:800 11px Nunito,sans-serif}
.cr-chip.short{border-color:#ff8f8f88;color:#ffb4b4}
.cr-btn{min-height:44px;border-radius:999px;border:1px solid #f2c14e;background:#f2c14e;color:#1a1405;font:900 13px Nunito,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.cr-btn:disabled{background:#0a100c;border-color:#4ee6b433;color:#7f9a95;cursor:not-allowed}
.cr-btn:not(:disabled):hover{filter:brightness(1.08)}
.cr-btn:focus-visible{outline:2px solid var(--mint,#4ee6b4);outline-offset:2px}

/* ===== Bag: gear cards (Weapons etc.): icon, rarity, stats, description, equipped status, Equip button ===== */
.gr-list{display:grid;gap:8px}
.gr-row{--c:#b9bcc2;display:flex;gap:12px;padding:10px 12px;border-radius:14px;background:#05090a;border:1px solid #4ee6b433}
.gr-row.on{border-color:var(--c);box-shadow:0 0 16px -8px var(--c)}
.gr-icon{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:#0a100c;border:1px solid var(--c);color:var(--c);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 50%,transparent))}
.gr-icon svg{width:30px;height:30px}
.gr-body{flex:1;min-width:0;display:grid;gap:5px}
.gr-row.has-art{flex-direction:column;gap:10px}
.gr-art{display:grid;place-items:center;padding:8px;border-radius:12px;border:1px solid var(--c);background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--c) 22%,#0a100c),#0a100c 72%);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c) 35%,transparent))}
.gr-art canvas{display:block;width:100%;max-width:300px;height:auto}
.gr-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.gr-top b{font:900 14px Nunito,sans-serif;color:#fff3d6;overflow-wrap:anywhere}
.gr-state{flex:none;padding:1px 8px;border-radius:999px;border:1px solid #4ee6b433;color:#a9c7c0;font:900 9px Nunito,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.gr-row.on .gr-state{background:#f2c14e;border-color:#f2c14e;color:#1a1405}
.gr-rar{font:800 10px Nunito,sans-serif;font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.gr-stats{display:flex;flex-wrap:wrap;gap:6px}
.gr-stat{padding:2px 8px;border-radius:999px;background:#0a100c;border:1px solid #4ee6b455;color:#c8fff4;font:800 11px Nunito,sans-serif}
.gr-desc{margin:0;font:700 12px/1.35 Nunito,sans-serif;color:#a9c7c0}
.gr-btn{justify-self:start;min-height:40px;padding:6px 18px;border-radius:999px;border:1px solid #f2c14e;background:#f2c14e;color:#1a1405;font:900 12px Nunito,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.gr-row.on .gr-btn{background:transparent;color:#ffe9b0}
.gr-btn:hover{filter:brightness(1.08)}
.gr-btn:focus-visible{outline:2px solid var(--mint,#4ee6b4);outline-offset:2px}

/* Endless Realms: Level Select extras */
.lvdiv{list-style:none;margin:6px 0 -2px;text-align:center;font:900 11px Nunito,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#9be8c8;display:flex;align-items:center;gap:10px}
.lvdiv::before,.lvdiv::after{content:"";flex:1;height:1px;background:#4ee6b455}
.lvl .lvmore{width:100%}
.lvb em.lvtier{color:#9be8c8;font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.lvb em.lvtier.boss{color:#ff9aa8}
.lvb.cur:not(.locked){border-color:#ffd98a}

/* Crafting popup (its own section, shares the Bag frame) */
.bg-fr{display:inline-block;width:14px;height:16px;flex:none;background:linear-gradient(135deg,#fff3cf,#f2c14e 55%,#a9741a);clip-path:polygon(50% 0,100% 38%,76% 100%,24% 100%,0 38%)}
.cr-bagbtn{margin-left:auto;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid #f2c14e77;background:#0a100c;color:#f2c14e;font:900 12px Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.cr-bagbtn:hover,.cr-bagbtn:focus-visible{border-color:#f2c14e;box-shadow:0 0 14px -4px #f2c14e}
.tile .craftbadge{display:inline-block;min-width:20px;margin-left:6px;padding:1px 7px;border-radius:999px;background:#4ee6b4;color:#04100d;font:900 12px Nunito,sans-serif;text-align:center;vertical-align:middle}
.craftbadge[hidden]{display:none}
.bagrow{gap:10px}

/* Run upgrades: pick 1 of 2 after an Endless level (runups.js, showPick in adventure.html) */
.gov .pick{display:grid;gap:8px;justify-items:center;width:100%;overflow:visible;padding:0}
.gov .pick[hidden]{display:none}
.pk-h{margin:0;font:900 13px Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ffd98a}
.pk-s{margin:0;font:700 12px Nunito,sans-serif;color:#9fd8c4}
.pk-row{display:flex;gap:10px;width:100%;justify-content:center}
.pk{flex:1 1 0;min-width:0;max-width:170px;display:grid;gap:3px;justify-items:center;padding:10px 8px;border-radius:14px;border:2px solid #4ee6b4aa;background:linear-gradient(#10382f,#0a2420);color:#e9fff5;cursor:pointer;font-family:Nunito,sans-serif;box-shadow:0 0 22px -8px #4ee6b4;transition:transform .12s,border-color .12s}
.pk:hover,.pk:focus-visible{transform:translateY(-2px);border-color:#ffd98a;outline:none}
.pk i{font-style:normal;font-size:22px;line-height:1;color:#ffd98a}
.pk b{font-size:13px;font-weight:900;letter-spacing:.04em;color:#fff3d6}
.pk span{font-size:13px;font-weight:800;color:#8ff5d2}
.pk em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9fb3ba}
@media (prefers-reduced-motion:reduce){.pk{transition:none}}

/* HUD: run upgrade chips (showUps in adventure.html) */
#box .hud.upw{top:88px;left:10px;display:flex;flex-wrap:wrap;gap:4px 8px;max-width:62%;font:900 11px Nunito,sans-serif;letter-spacing:.04em;padding:4px 10px;border-radius:14px;color:#8ff5d2}
#box .hud.upw[hidden]{display:none}
.upc{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.upc i{font-style:normal;font-size:12px;color:#ffd98a}

/* Crafting popup: scroll the recipe list inside the card instead of spilling off screen */
#crpanel{overflow-y:auto;min-height:0;overscroll-behavior:contain}

/* ===== Arcade: Your Loadout (portrait, max health, weapon, armor) with the Bag inside it ===== */
#loadout{max-width:820px}
.lo{display:grid;grid-template-columns:minmax(150px,.62fr) 2fr 1.35fr;grid-template-areas:"hero health health" "hero weapon armor";gap:12px;margin:22px auto 0;text-align:center}
.lo-card{position:relative;box-sizing:border-box;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 14px;border-radius:20px;background:linear-gradient(180deg,#0e1712f2,#070d0af2);border:1px solid #4ee6b444;box-shadow:0 0 34px -16px #4ee6b4,0 16px 34px -22px #000}
.lo-hero{grid-area:hero;gap:12px;border-color:#4ee6b477;box-shadow:0 0 40px -12px #4ee6b4,0 16px 34px -22px #000}
.lo-health{grid-area:health}.lo-weapon{grid-area:weapon}.lo-armor{grid-area:armor;align-items:stretch}
.lo-lbl{font:800 10px Nunito,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#a9c7c0}
.lo-av{width:min(100%,160px);aspect-ratio:1;border-radius:18px;overflow:hidden;background:#05090a;border:1px solid var(--ac,#4ee6b4);box-shadow:0 0 22px -8px var(--ac,#4ee6b4)}
.lo-av svg{display:block;width:100%;height:100%}
.lo-hero b{font:900 15px Nunito,sans-serif;color:#fff3d6}
.lo-flames{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:26px}
.lo-flames .fl{width:21px;height:25px}
.lo-hptxt{margin:0;font:900 15px Nunito,sans-serif;color:#fff3d6}
.lo-weapon canvas{display:block;width:100%;max-width:230px;height:auto;aspect-ratio:360/150}
.lo-weapon canvas[hidden]{display:none}
.lo-weapon b{font:900 16px Nunito,sans-serif;color:#fff3d6}
.lo-weapon small{font:800 12px Nunito,sans-serif;letter-spacing:.03em;color:#a9c7c0}
.lo-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:12px;background:#05090a;border:1px solid var(--c,#4ee6b433);text-align:left;min-width:0}
.lo-row span{font:800 10px Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#a9c7c0;flex:none}
.lo-row b{font:900 12.5px/1.2 Nunito,sans-serif;color:#fff3d6;text-align:right;min-width:0}
.lo-row b.none{color:#6f8a84;font-weight:800}
.lo-set{margin:0;font:800 11px Nunito,sans-serif;letter-spacing:.04em;color:#6f8a84}
.lo-set.on{color:#5fd38d;text-shadow:0 0 12px #5fd38d66}
@media(max-width:700px){
 .lo{grid-template-columns:1fr 1fr;grid-template-areas:"hero health" "hero weapon" "armor armor"}
 .lo-hero{padding:14px 10px}
}
@media(max-width:460px){
 .lo{grid-template-columns:1fr;grid-template-areas:"hero" "health" "weapon" "armor"}
 .lo-av{width:130px}
}

/* Tab bars (Bag, Crafting, Skins): never squeezed or scrolled up/down by tall panels; only sideways */
.bg-tabs{flex:none;overflow-y:hidden;overflow-x:auto;padding-bottom:4px}
.bag-head,.bg-wallet{flex:none}
.bg-tab{flex-shrink:0}

/* Treasure cabin chest popup (adventure.html: #chp, chestcabin.js) */
#box .chp{background:radial-gradient(ellipse at 50% 42%,#3b2a10ee,#0b0804f6 78%)}
#box .chp h3{color:#fff0b8;text-shadow:0 0 24px #ffd45fcc}
.chp .gcard{width:100%}
.chp-ic{width:64px;height:48px;filter:drop-shadow(0 0 14px #ffb04fcc)}
.chp-ic .lid{fill:#8a5629;stroke:#2f1a0a;stroke-width:2.4;stroke-linejoin:round}
.chp-ic .bod{fill:#7a4a24;stroke:#2f1a0a;stroke-width:2.4}
.chp-ic .band{fill:none;stroke:#f2c14e;stroke-width:5}
.chp-ic .lock{fill:#ffe9b0;stroke:#2f1a0a;stroke-width:2}
.chp .pk{border-color:#ffd98aaa;background:linear-gradient(#3a2a12,#1f1608);box-shadow:0 0 22px -8px #ffb04f}
.chp .pk:hover,.chp .pk:focus-visible{border-color:#fff3cf}
.chp .pk span{color:#ffe9b0}
.pk-fl svg{display:block;width:20px;height:24px;fill:#ff9f1c}
.pk-fl .in{fill:#ffe9a8}
.upc i svg{display:block;width:11px;height:13px;fill:#ff9f1c}
.upc i svg .in{fill:#ffe9a8}

/* Mosquito swarm: the Swat! button (adventure.html #swat, swarm.js) */
.swat{position:absolute;right:12px;bottom:58px;z-index:2;min-width:120px;min-height:54px;padding:8px 22px;border-radius:999px;border:2px solid #fff3cf;background:linear-gradient(#ffcf5a,#e8941c);color:#2a1604;font:900 20px Nunito,sans-serif;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:0 0 28px -2px #ffb04f,0 6px 0 #8a4f0c;animation:swpop .35s ease-out,swpulse .8s ease-in-out .35s infinite}
.swat[hidden]{display:none}
.swat small{margin-left:8px;padding:1px 6px;border-radius:6px;background:#2a160444;font-size:11px;letter-spacing:0}
.swat:active{transform:translateY(3px);box-shadow:0 0 18px -2px #ffb04f,0 3px 0 #8a4f0c}
@keyframes swpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes swpulse{50%{box-shadow:0 0 38px 2px #ffd45f,0 6px 0 #8a4f0c}}
body.tc-on .swat small{display:none}
@media (prefers-reduced-motion:reduce){.swat{animation:none}}

/* BETA V3 badge (menu.js): small white circle, bottom left on every page, above the tab bar. Never blocks taps. */
.betabadge{position:fixed;left:8px;bottom:calc(68px + env(safe-area-inset-bottom,0px));z-index:30;width:44px;height:44px;border-radius:50%;display:grid;place-content:center;justify-items:center;gap:0;background:#fff;color:#1a2420;border:2px solid #d9e7e0;box-shadow:0 2px 10px #0008;font:900 10px/1.05 Nunito,sans-serif;letter-spacing:.06em;text-align:center;pointer-events:none;user-select:none;opacity:.94}
.betabadge span:last-child{font-size:12px;color:#1c7a5a}
@media print{.betabadge{display:none}}

/* Avatar popup (opened from the Loadout portrait or #avatar) */
html.av-open{overflow:hidden}
.av-wrap .bag-back{cursor:pointer}
.avbox{position:relative;box-sizing:border-box;min-width:0;width:min(1040px,100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:22px;background:linear-gradient(180deg,#0e1712f7,#070d0af7);border:1px solid #4ee6b455;box-shadow:0 0 44px -12px #4ee6b4,0 26px 60px -20px #000;color:#e7f4ee;animation:avin .25s ease-out}
@keyframes avin{from{opacity:0}}
.avbox .bag-head{position:sticky;top:-16px;z-index:3;margin:-16px -16px 0;padding:16px 16px 10px;background:#0b130fee;border-radius:22px 22px 0 0}
.avbox .sub{margin:0}
.avbox .av2{margin-top:6px}
@media(min-width:820px){.avbox .stagecard{top:64px}}
.av-wrap .pvmini{bottom:calc(18px + env(safe-area-inset-bottom,0px))}
.lo-hero{cursor:pointer;transition:transform .15s,box-shadow .15s}
.lo-hero:hover{box-shadow:0 0 52px -8px #4ee6b4,0 16px 34px -22px #000}
.lo-hero:active{transform:scale(.98)}
.lo-hero:focus-visible{outline:2px solid #f2c14e;outline-offset:3px}
.lo-edit{font:800 10px Nunito,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#4ee6b4}

/* Open all packs: results screen */
.oabox{width:min(920px,100%)}
.oabox .bag-head{position:static;margin:0;padding:0;background:none}
.oa-sum{margin:0;color:var(--muted);font-weight:800}.oa-sum b{color:#c8fff4;font-size:1.15em}
.oa-chips{display:flex;flex-wrap:wrap;gap:6px}
.oa-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font:800 12px Nunito,sans-serif;color:var(--c);background:#0a0d07d9;box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 70%,transparent) inset}
.oa-chip i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.oa-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px;padding:4px 2px}
.oa-c{position:relative;animation:fade-up .5s var(--ease-out) calc(var(--i,0)*45ms) backwards}
.oa-c .card{box-shadow:0 0 0 2px var(--c),0 10px 22px -10px #000,0 0 22px -8px var(--c)}
.oa-c .card b{font-size:13px}.oa-c .card small{font-size:10px}.oa-c .card .rar{top:6px;left:6px;font-size:9px;padding:2px 6px}.oa-c .card .bar{padding:26px 8px 8px}
.oa-n{position:absolute;right:-4px;top:-6px;z-index:3;min-width:28px;text-align:center;padding:3px 8px;border-radius:999px;font:900 13px Nunito,sans-serif;color:#10130d;background:#f2c14e;box-shadow:0 2px 8px #000a}
.oa-new{position:absolute;left:-4px;top:-6px;z-index:3;padding:3px 8px;border-radius:999px;font:900 10px Nunito,sans-serif;letter-spacing:.1em;color:#04130e;background:#4ee6b4;box-shadow:0 2px 8px #000a}
.oa-act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:sticky;bottom:-16px;margin:0 -16px -16px;padding:12px 16px 16px;background:linear-gradient(transparent,#070d0a 40%)}
#openall{margin-top:10px}

/* Your Loadout: the Weapon card opens the weapon & skin picker */
.lo-weapon{cursor:pointer;transition:transform .15s,box-shadow .15s}
.lo-weapon:hover{box-shadow:0 0 44px -10px #f2c14e,0 16px 34px -22px #000}
.lo-weapon:active{transform:scale(.98)}
.lo-weapon:focus-visible{outline:2px solid #f2c14e;outline-offset:3px}
.lo-weapon .lo-edit{color:#f2c14e}
.ar-lbl{display:block;margin-top:8px;font:800 10px Nunito,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#a9c7c0}
.ar-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ar-chip{--c:#4ee6b4;min-height:36px;padding:4px 12px;border-radius:999px;border:1px solid var(--c);background:transparent;color:#fff3d6;font:900 11px Nunito,sans-serif;letter-spacing:.04em;cursor:pointer;touch-action:manipulation}
.ar-chip.on{background:var(--c);color:#10140f}
.ar-chip:hover{filter:brightness(1.12)}
.ar-chip:focus-visible{outline:2px solid #fff3d6;outline-offset:2px}
#arpanel{overflow-y:auto;min-height:0;overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px}

/* Skin Shop tab: scrolls inside its panel so the Armory never grows taller than the screen */
#skpanel{overflow-y:auto;min-height:0;overscroll-behavior:contain;display:flex;flex-direction:column;gap:14px}
.sk-sec{display:flex;flex-direction:column;gap:8px}
.sk-h{margin:0;font:800 15px/1.2 Nunito,system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:#f2c14e}
.sk-h small{font-weight:700;text-transform:none;letter-spacing:0;color:#9fb8ae}
.sk-list{display:flex;flex-direction:column;gap:10px}
.bag-wrap{grid-template-rows:minmax(0,1fr)}

/* Skin Shop weapon tabs: one weapon's skins at a time */
.sk-tabs{position:sticky;top:0;z-index:2;display:flex;gap:8px;padding:2px 0 8px;background:linear-gradient(#0b130f 78%,#0b130f00)}
.sk-tab{position:relative;flex:1 1 0;min-width:0;min-height:48px;padding:7px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1.5px solid #4ee6b455;border-radius:14px;background:#0e1712;color:#cfe8dd;font:800 12.5px/1.15 Nunito,system-ui,sans-serif;text-align:center;cursor:pointer}
.sk-tab small{font:700 11px/1.1 Nunito,system-ui,sans-serif;color:#9fb8ae}
.sk-tab.on{border-color:#f2c14e;background:linear-gradient(180deg,#2a2410,#14110a);color:#ffe9a8;box-shadow:0 0 14px -3px #f2c14e88}
.sk-tab.on small{color:#e6cf8a}
.sk-can{position:absolute;top:5px;right:6px;width:9px;height:9px;border-radius:50%;background:#4ee6b4;box-shadow:0 0 8px #4ee6b4}
.sk-row.can{box-shadow:0 0 0 1.5px #4ee6b466,0 0 16px -4px #4ee6b4}

.sk-h{text-align:center;font-size:13px;color:#9fb8ae;text-transform:none;letter-spacing:0;padding:2px 0 4px}

#skpanel .sk-sec{padding:0;margin:0}

/* Skin Shop: progress bar on a skin you cannot afford yet */
.cr-btn.sk-prog:disabled{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:6px 10px;min-height:48px;color:#e8fff6;border-color:#4ee6b477;background:linear-gradient(90deg,#1f8f6a 0,#4ee6b4 var(--p,0%),#0a100c var(--p,0%));cursor:default}
.cr-btn.sk-prog .sk-pt{font:900 13px/1.1 Nunito,sans-serif;letter-spacing:.04em;text-shadow:0 1px 2px #000c}
.cr-btn.sk-prog .sk-pl{font:700 11px/1.1 Nunito,sans-serif;letter-spacing:.03em;text-transform:none;color:#d6f5ea;text-shadow:0 1px 2px #000c}

/* Skin Shop purchase celebration */
.sk-pop{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px 18px;text-align:center;cursor:pointer;background:#02060af4;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--c,#f2c14e) 34%,transparent),transparent 66%),#02060af4;animation:skFade .28s ease-out}
.sk-pop .sk-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sk-pop-lbl{position:relative;font:900 13px/1 Nunito,system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#fff3d6;text-shadow:0 0 14px var(--a,#f2c14e)}
.sk-pop-art{position:relative;width:min(340px,86%);animation:skPop .75s cubic-bezier(.2,1.5,.4,1) both}
.sk-pop-art::before{content:"";position:absolute;inset:-14% -8%;border-radius:50%;background:radial-gradient(circle,var(--a,#f2c14e) 0,transparent 68%);opacity:.55;animation:skPulse 1.6s ease-in-out infinite}
.sk-pop-art canvas{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 0 14px var(--a,#f2c14e))}
.sk-pop-name{position:relative;font:900 25px/1.1 'Bagel Fat One',Nunito,system-ui,sans-serif;color:var(--c,#f2c14e);text-shadow:0 2px 0 #000a,0 0 18px var(--c,#f2c14e);animation:skRise .5s .2s ease-out both}
.sk-pop-sub{position:relative;font:800 14px/1.25 Nunito,system-ui,sans-serif;color:#e8fff6;animation:skRise .5s .32s ease-out both}
.sk-pop-tap{position:relative;margin-top:10px;font:700 12px Nunito,system-ui,sans-serif;color:#9fb8ae;animation:skRise .5s .8s ease-out both}
.sk-pop.calm,.sk-pop.calm *{animation:none!important}
@keyframes skFade{from{opacity:0}to{opacity:1}}
@keyframes skPop{0%{transform:scale(.3) rotate(-8deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes skPulse{0%,100%{transform:scale(.94);opacity:.4}50%{transform:scale(1.06);opacity:.65}}
@keyframes skRise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.sk-pop,.sk-pop *{animation:none!important}}

/* "What next?" recipe hints for weapons you do not own yet */
.rh{--c:#f2c14e;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:16px;border:1.5px solid color-mix(in srgb,var(--c) 55%,transparent);background:linear-gradient(180deg,#0e1712,#080e0b);text-align:left}
.rh.ready{box-shadow:0 0 18px -4px var(--c)}
.rh.soon{opacity:.85}
.rh-art{margin:0}
.rh-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rh-top b{font:900 15px/1.2 Nunito,system-ui,sans-serif;color:#fff3d6}
.rh-top small{font:800 12px/1.2 Nunito,system-ui,sans-serif;color:var(--c);white-space:nowrap}
.rh-bar{height:8px;border-radius:99px;background:#05090a;border:1px solid #4ee6b433;overflow:hidden}
.rh-bar i{display:block;height:100%;background:linear-gradient(90deg,#1f8f6a,#4ee6b4);border-radius:99px;min-width:0}
.rh-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rh-list li{display:grid;grid-template-columns:1fr auto;gap:0 8px;align-items:baseline;padding:6px 8px;border-radius:10px;background:#05090a99}
.rh-list .rh-n{font:800 13px/1.2 Nunito,system-ui,sans-serif;color:#e8fff6}
.rh-list em{font:900 13px/1.2 Nunito,system-ui,sans-serif;font-style:normal;color:#ffb86b}
.rh-list li.ok em{color:#4ee6b4}
.rh-list li.ok .rh-n::after{content:" \2713";color:#4ee6b4}
.rh-list small{grid-column:1/-1;font:700 11.5px/1.25 Nunito,system-ui,sans-serif;color:#9fb8ae}
.rh .cr-btn.ghost:not(:disabled){background:transparent;color:#f2c14e}
.rh-intro{margin:0 0 2px}
.rh .rh-list small{color:#8fa8a0;font-weight:700}

/* ===== The Armory: one popup, four tabs (Bag | Crafting | Weapons | Skin Shop). Opened with data-armory / Armory.open() ===== */
.armory{height:min(640px,100%)}   /* fixed height so the popup does not jump in size between tabs */
.armory .bg-wallet{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.armory .bg-wallet>span{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:6px;row-gap:3px;padding:7px 4px 6px;text-align:center}
.armory .bg-wallet b{font-size:18px;line-height:1}
.armory .bg-wallet .coin{width:18px;height:18px}
.armory .bg-wallet .bg-fr{width:13px;height:15px;justify-self:center}
.armory .bg-wallet em{grid-column:1/-1;font-size:9px;letter-spacing:.08em;white-space:nowrap}
.ar-tabs{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px;border-radius:16px;background:#05090a;border:1px solid #4ee6b433}
.ar-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:54px;padding:7px 2px 6px;border-radius:12px;border:1px solid transparent;background:transparent;color:#a9c7c0;font:800 10.5px/1.1 Nunito,sans-serif;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
.ar-tab svg{width:20px;height:20px;flex:none}
.ar-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-tab:hover{color:#e7f4ee}
.ar-tab[aria-selected=true]{border-color:#f2c14e;background:#f2c14e22;color:#ffe9b0;box-shadow:0 0 16px -6px #f2c14e}
.ar-tab small{position:absolute;top:2px;right:3px;min-width:16px;padding:0 5px;border-radius:999px;background:#f2c14e;color:#1a1405;font:900 10px/16px Nunito,sans-serif;text-align:center}
.ar-tab:focus-visible{outline:2px solid var(--mint,#4ee6b4);outline-offset:1px}
.ar-pane{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:12px}
.ar-pane[hidden]{display:none}
.ar-pane>[role=tabpanel],.ar-pane>#arpanel,.ar-pane>#skpanel{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
@media(max-width:380px){.ar-tab{font-size:9.5px;letter-spacing:.03em}}

/* Arcade (Your Loadout) and Swamp Adventure: the button that opens the Armory */
.lo-armory{display:flex;flex-direction:column;align-items:center;gap:8px;margin:18px auto 4px}
.lo-swipe{margin:0;font:800 11px Nunito,sans-serif;color:#a9c7c0;letter-spacing:.04em;text-align:center}
.armory-open{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 28px;border-radius:999px;border:2px solid #0e2a24;background:linear-gradient(180deg,#ffd878,#f2c14e);color:#1a1405;font:900 16px/1 Nunito,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 3px 0 #0e2a24,0 0 22px -6px #f2c14e;touch-action:manipulation}
.armory-open svg{width:22px;height:22px;flex:none}
.armory-open:active{transform:translateY(2px);box-shadow:0 1px 0 #0e2a24}
.armory-open:focus-visible{outline:2px solid #fff3d6;outline-offset:3px}
.armory-open .bagbadge,.armory-open .craftbadge{display:inline-block;min-width:20px;padding:2px 7px;border-radius:999px;background:#1a1405;color:#ffe9b0;font:900 11px Nunito,sans-serif;text-align:center}
.armory-open .craftbadge{background:#0e5a43;color:#d8fff0}
.bagbtn small[data-craft-count]{background:#4ee6b4;color:#06251b}

/* ---- Results screen animation (adventure.html resultsFX): count-up score, stamped "New best!", rewards that pop in one at a time ---- */
.sres .pre,.rwd .pre{opacity:0}
.sres .show,.rwd em.show{animation:rsIn .38s cubic-bezier(.2,.9,.3,1.2) both}
.rwd>span.show{animation:rsPop .5s cubic-bezier(.2,.9,.3,1.4) both}
.sres .sbest.stamp{animation:rsStamp .6s cubic-bezier(.2,1.4,.4,1) both}
.sres .sbig.done{animation:rsBig .5s ease-out}
.rwd .frg{width:14px;height:16px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l7 6-3 12H8L5 9z' fill='%2378f0c8' stroke='%23d6fff2' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes rsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes rsPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.22)}100%{opacity:1;transform:scale(1)}}
@keyframes rsStamp{0%{opacity:0;transform:scale(2.6) rotate(-9deg)}55%{opacity:1;transform:scale(.88) rotate(3deg)}75%{transform:scale(1.1) rotate(-2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes rsBig{0%{transform:scale(1)}40%{transform:scale(1.12);text-shadow:0 0 34px #ffb04f}100%{transform:scale(1)}}

/* ---- HUD numbers (cards.js HudFX): bold glowing counters that pop, plus floating +N chips ---- */
header nav .bank{position:relative}
header nav .bank b{font-weight:900;font-size:1.07em;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:#ffe9a8;text-shadow:0 0 12px #f2c14e66}
header nav .bank.cry b{color:#c8fff4;text-shadow:0 0 12px #4ee6b466}
.hpop{animation:hudpop .45s cubic-bezier(.2,.9,.3,1.4)}
.hfx{position:absolute;z-index:60;pointer-events:none;font:900 13px/1 Nunito,sans-serif;font-style:normal;font-variant-numeric:tabular-nums;padding:3px 8px;border-radius:999px;white-space:nowrap;color:#1b1400;background:linear-gradient(180deg,#ffe08a,#f2b84a);box-shadow:0 0 14px -2px #ffb04f;animation:hfxdown 1.2s cubic-bezier(.2,.8,.3,1) both}
.hfx.mint{color:#032019;background:linear-gradient(180deg,#d8fff0,#4ee6b4);box-shadow:0 0 14px -2px #4ee6b4}
.hfx.rose{color:#fff;background:linear-gradient(180deg,#ff8a9c,#d6455e);box-shadow:0 0 14px -2px #ff6b82}
.hfx.below{top:100%;right:0;margin-top:4px}
.hfx.left{right:calc(100% + 6px);top:50%;margin-top:-10px;animation-name:hfxup}
.hfx.right{left:calc(100% + 6px);top:50%;margin-top:-10px;animation-name:hfxup}
#box .hud.scw b{font-size:20px;text-shadow:0 0 12px #ffb04f66}
#box .hhp .fl{width:20px;height:24px}
.fl.on.gain{animation:flpop .55s cubic-bezier(.2,.9,.3,1.5),flick 2.4s ease-in-out .55s infinite}
@keyframes hudpop{0%{transform:scale(1)}35%{transform:scale(1.4);filter:brightness(1.5)}100%{transform:scale(1)}}
@keyframes hfxdown{0%{opacity:0;transform:translateY(-6px) scale(.6)}18%{opacity:1;transform:translateY(0) scale(1.15)}30%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@keyframes hfxup{0%{opacity:0;transform:translateY(6px) scale(.6)}18%{opacity:1;transform:translateY(0) scale(1.15)}30%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
@keyframes flpop{0%{transform:scale(.2);filter:drop-shadow(0 0 2px #fff)}55%{transform:scale(1.55);filter:drop-shadow(0 0 12px #ffd98a)}100%{transform:scale(1)}}
@keyframes hfxfade{0%,70%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hpop,.fl.on.gain{animation:none}.hfx,.hfx.left,.hfx.right,.hfx.below{animation:hfxfade 1.2s linear both}}

/* ---- Chunky buttons: a solid 3D lip under every .btn that squishes down when pressed (the soft tap sound already plays from cards.js on every tap) ---- */
/* --lw = lip height, --lip = lip colour, --glow = soft glow, --ring = inner highlight/outline. !important so the older one-off .btn box-shadows in this file can't flatten the lip. */
.btn{--lw:4px;--lip:#9a6f12;--glow:#f2c14e66;--ring:inset 0 1px 0 #ffffff59;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.btn.ghost{--lip:#0c3a2d;--glow:#4ee6b44d;--ring:inset 0 0 0 1.5px #4ee6b46b}
.btn.ghost:hover{--glow:#4ee6b488;--ring:inset 0 0 0 1.5px #4ee6b4}
.btn.mini,.pvbar .btn{--lw:3px}
.btn:not([disabled]):not(.swat){box-shadow:0 var(--lw) 0 var(--lip),0 calc(var(--lw) + 6px) 22px -10px var(--glow),var(--ring)!important}
.btn:active:not([disabled]):not(.swat){transform:translateY(calc(var(--lw) - 1px)) scale(.985);transition-duration:.08s;filter:brightness(.96);box-shadow:0 calc(var(--lw) - 3px) 0 var(--lip),0 3px 10px -6px var(--glow),var(--ring),inset 0 3px 8px #0000004d!important}

/* ---- Inspect card (store.js gearInspect): tap an item in the Bag for a big preview, stat bars and a compare against what you are wearing ---- */
.gr-row{cursor:pointer;transition:border-color .2s,transform .12s}
.gr-row:hover{border-color:var(--c)}
.gr-row:active{transform:scale(.99)}
.gr-row:focus-visible{outline:2px solid var(--mint,#4ee6b4);outline-offset:2px}
.in-pop{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:14px 12px calc(14px + env(safe-area-inset-bottom,0px));animation:inFade .2s ease-out both}
.in-back{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--c) 14%,#02060a),#02060af2 70%)}
.in-card{position:relative;box-sizing:border-box;width:min(400px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:20px;background:linear-gradient(180deg,#0f1a14,#070c0a);border:1px solid var(--c);box-shadow:0 0 0 1px #000,0 0 38px -10px var(--c),0 24px 50px -20px #000;animation:inRise .38s cubic-bezier(.2,1.2,.4,1) both}
.in-x{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid #ffffff22;background:#0a100cd9;color:#e8fff6;font:900 20px/1 Nunito,system-ui,sans-serif;cursor:pointer}
.in-x:hover{border-color:var(--c)}
.in-art{display:grid;place-items:center;padding:14px 10px;min-height:150px;border-radius:16px;border:1px solid var(--c);overflow:hidden;color:var(--c);background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--c) 28%,#0a100c),#0a100c 78%)}
.in-art canvas{display:block;width:100%;max-width:340px;height:auto;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--c) 70%,transparent))}
.in-art.icon svg{filter:drop-shadow(0 0 10px var(--c));animation:inFloat 3.2s ease-in-out infinite}
.in-art.avatar svg{display:block;max-width:100%;height:auto}
.in-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.in-name{font:900 22px/1.1 'Bagel Fat One',Nunito,system-ui,sans-serif;color:#fff3d6;text-shadow:0 2px 0 #000a,0 0 16px color-mix(in srgb,var(--c) 70%,transparent)}
.in-rar{padding:3px 10px;border-radius:999px;border:1px solid var(--c);color:var(--c);font:900 11px/1 Nunito,system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;background:color-mix(in srgb,var(--c) 12%,#0a100c)}
.in-sub{margin-top:-4px;font:800 12px Nunito,system-ui,sans-serif;letter-spacing:.06em;color:#9fb8ae}
.in-stats{display:grid;gap:9px;padding:10px 12px;border-radius:14px;background:#05090a;border:1px solid #4ee6b422}
.in-stat{display:grid;grid-template-columns:58px minmax(0,1fr) auto auto;align-items:center;gap:8px;font:800 12px Nunito,system-ui,sans-serif;color:#cfe9df}
.in-k{color:#9fb8ae;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:900}
.in-bar{position:relative;display:block;height:9px;border-radius:99px;background:#101c18;border:1px solid #ffffff14}
.in-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--c) 55%,#000),var(--c));box-shadow:0 0 8px -1px var(--c);transition:width .7s cubic-bezier(.2,.9,.3,1)}
.in-bar u{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:2px;background:#fff;opacity:.9;text-decoration:none;box-shadow:0 0 6px #fff8}
.in-v{min-width:34px;text-align:right;font-weight:900;color:#fff3d6;font-variant-numeric:tabular-nums}
.in-stat.txt .in-v{grid-column:2 / -1;text-align:left;min-width:0;font-weight:800}
.in-d{padding:3px 8px;border-radius:99px;white-space:nowrap;font:900 11px/1 Nunito,system-ui,sans-serif}
.in-d.up{color:#04170f;background:#5fd38d;box-shadow:0 0 10px -3px #5fd38d}
.in-d.down{color:#fff;background:#d6455e;box-shadow:0 0 10px -3px #ff6b82}
.in-d.same{color:#9fb8ae;background:#16231d}
.in-note{margin-top:-4px;font:700 11px/1.35 Nunito,system-ui,sans-serif;color:#8fa79c}
.in-set{padding:8px 10px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--c) 55%,transparent);font:800 12px/1.35 Nunito,system-ui,sans-serif;color:#d8fff3}
.in-desc{margin:0;font:600 13px/1.4 Nunito,system-ui,sans-serif;color:#b9cfc6}
.in-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.in-acts .gr-btn{flex:1 1 0;justify-self:auto}
.in-close{background:transparent!important;color:#ffe9b0!important}
@keyframes inFade{from{opacity:0}}
@keyframes inRise{from{opacity:0;transform:translateY(18px) scale(.94)}}
@keyframes inFloat{50%{transform:translateY(-5px)}}
@media(prefers-reduced-motion:reduce){.in-pop,.in-card,.in-art.icon svg{animation:none}.in-bar i{transition:none}}

/* ---- Endless Realms Threat meter (adventure.html updateRein): more pips light up the longer you stay in a level ---- */
.hud.dng{top:78px;display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ffc9d2;padding:4px 10px;white-space:nowrap}
.hud.dng[hidden]{display:none}
.hud.dng i{display:block;width:9px;height:9px;border-radius:50%;background:#2a1418;border:1px solid #ff6b8266}
.hud.dng i.on{background:#ff6b82;border-color:#ffb3c0;box-shadow:0 0 8px #ff6b82}
.hud.dng.up{animation:dngUp 1s ease-out}
@keyframes dngUp{0%{transform:scale(1)}20%{transform:scale(1.25);box-shadow:0 0 22px #ff6b82}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hud.dng.up{animation:none}}

/* colour variant swatches on a cosmetic card */
.it .vs{position:relative;display:flex;gap:7px;justify-content:center;flex-wrap:wrap}.it .vsw{width:22px;height:22px;border-radius:50%;border:2px solid #ffffff55;background:var(--vc);cursor:pointer;padding:0;box-shadow:0 0 0 1px #000}.it .vsw[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 0 2px var(--rc),0 0 10px var(--vc)}.it .vsw:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ===== Avatar screen polish (cos5) ===== */
/* phones: a compact stage so the gear list is not pushed a whole screen down */
@media(max-width:819px){
 .avbox .stagecard{grid-template-columns:minmax(0,1fr);justify-items:stretch}
 .avbox .avstage{width:min(100%,250px);justify-self:center}
 .avbox .items{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* bigger tap targets: colour swatches and focus rings */
.it .vsw{width:30px;height:30px;position:relative}
.it .vsw::after{content:"";position:absolute;inset:-6px}
.it .vs{gap:8px}
.cats button:focus-visible,.slots .slot:focus-visible,.pick button:focus-visible,.it .buy:focus-visible,.it .try:focus-visible{outline:2px solid #f2c14e;outline-offset:2px}
.pick button:focus-visible svg{border-color:#f2c14e}
.cats button:hover,.slots .slot:hover{border-color:#4ee6b488}
.it .buy:hover:not(:disabled){filter:brightness(1.15)}
.it .buy:active,.it .try:active,.cats button:active,.slots .slot:active{transform:scale(.97)}
.it .need{position:relative;text-align:center;color:var(--muted,#a9c7c0);font:800 11px Nunito,sans-serif;letter-spacing:.04em}
.it.eq .buy{font-size:12px;letter-spacing:.1em}
.it .try{min-height:34px}
/* the message line never makes the list jump, and stays readable */
#msg{min-height:1.5em;line-height:1.3}
@media(prefers-reduced-motion:reduce){.avstage.avp,.avbox{animation:none}.pick button svg,.cats button{transition:none}}

/* ===== Avatar screen polish v2 (cos6): animated stage, rarity effects, collection tracker, shuffle ===== */
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes avin{from{opacity:0;transform:translateY(16px) scale(.97)}}
@keyframes av-spin{to{--a:360deg}}
@keyframes av-float{50%{translate:0 -6px}}
@keyframes av-gsh{50%{transform:scaleX(.8);opacity:.3}}
@keyframes av-shine{0%,60%{transform:translateX(-140%) skewX(-18deg)}100%{transform:translateX(260%) skewX(-18deg)}}
@keyframes av-twinkle{0%{opacity:0;transform:translateY(10px) scale(.4) rotate(0)}35%{opacity:1}100%{opacity:0;transform:translateY(-36px) scale(1) rotate(120deg)}}
@keyframes av-card-in{from{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:none}}
@keyframes av-hop{30%{transform:scale(1.08,1.03) rotate(-1.4deg)}60%{transform:scale(1.03,1.09) rotate(1.2deg)}}
@keyframes av-ring{from{transform:scale(.6);opacity:.95}to{transform:scale(1.5);opacity:0}}
@keyframes av-pt{from{transform:translate(0,0) scale(var(--s));opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}
@keyframes av-pulse{0%,100%{box-shadow:0 0 0 0 #4ee6b400}50%{box-shadow:0 0 18px 0 #4ee6b499}}
@keyframes av-epic{0%,100%{box-shadow:inset 0 0 0 0 transparent}50%{box-shadow:inset 0 0 20px -4px var(--rc)}}
@keyframes av-up{0%{color:#fff;text-shadow:0 0 14px #4ee6b4;transform:scale(1.18)}100%{transform:none}}
@keyframes av-dn{0%{color:#ffd36a;text-shadow:0 0 14px #ffb300;transform:scale(.88)}100%{transform:none}}
@keyframes av-title{to{background-position:200% center}}
@keyframes av-amb{from{background-position:0 0,100% 100%,0 0}to{background-position:30% 20%,70% 80%,0 0}}

/* backdrop: soft drifting colour glow + stronger blur */
.av-wrap .bag-back{background:radial-gradient(circle at 20% 25%,#4ee6b433,transparent 45%) 0 0/140% 140% no-repeat,radial-gradient(circle at 80% 75%,#a855f733,transparent 45%) 100% 100%/140% 140% no-repeat,#02060ad9;backdrop-filter:blur(7px)}
#avt{background:linear-gradient(90deg,#fff3d6 0%,#4ee6b4 25%,#fff3d6 50%,#4ee6b4 75%,#fff3d6 100%) 0 0/200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* stage: floating avatar in a spinning rarity ring, with ground shadow, glare, shine and sparkles */
.stdock{position:relative;padding-bottom:14px}
.stwrap{position:relative;border-radius:18px}
.stwrap::before{content:"";position:absolute;inset:-4px;border-radius:22px;padding:3px;pointer-events:none;z-index:2;opacity:.85;
 background:conic-gradient(from var(--a),transparent 0 55%,var(--ac,#4ee6b4) 85%,#fff 93%,transparent);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#sc[data-t="5"] .stwrap::before{background:conic-gradient(from var(--a),#ff4d6d,#ffd36a,#ff4fd8,#a855f7,#4da3ff,#ff4d6d);opacity:1}
#sc[data-t="4"] .stwrap::before{background:conic-gradient(from var(--a),var(--ac) 0 20%,#fff3b0 30%,var(--ac) 45%,transparent 60%,var(--ac) 85%,#fff3b0 93%,var(--ac));opacity:1}
.avstage{position:relative;cursor:pointer;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,box-shadow .5s;will-change:transform}
.avstage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(circle at var(--mx,50%) var(--my,30%),#ffffff2e,transparent 55%)}
.stwrap:hover .avstage::before{opacity:1}
.avstage::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent,#ffffff30,transparent);transform:translateX(-140%) skewX(-18deg)}
.gsh{position:absolute;left:14%;right:14%;bottom:0;height:12px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ac,#4ee6b4) 75%,#000),transparent);filter:blur(5px);opacity:.55}
.spk{position:absolute;inset:0;pointer-events:none;display:none;z-index:3}
#sc[data-hi="1"] .spk{display:block}
.spk i{position:absolute;width:11px;height:11px;background:var(--ac,#fff);opacity:0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.spk i:nth-child(1){left:-4%;top:72%}.spk i:nth-child(2){left:6%;top:30%}.spk i:nth-child(3){left:94%;top:62%}.spk i:nth-child(4){left:100%;top:22%}
.spk i:nth-child(5){left:22%;top:96%}.spk i:nth-child(6){left:78%;top:92%}.spk i:nth-child(7){left:48%;top:-3%}.spk i:nth-child(8){left:-2%;top:8%}
.burst{position:absolute;inset:0;pointer-events:none;z-index:5;display:grid;place-items:center}
.bring{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;border:3px solid var(--bc);box-shadow:0 0 18px var(--bc)}
.bp{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;background:var(--bc);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}

/* plate + crystal counter + collection tracker */
.plate b{background:linear-gradient(90deg,#fff,color-mix(in srgb,var(--ac,#4ee6b4) 60%,#fff));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.aura{background:color-mix(in srgb,var(--ac,#ffffff) 14%,transparent);box-shadow:0 0 14px -4px var(--ac,transparent)}
#sc[data-t="5"] .aura{background:linear-gradient(90deg,#ff4d6d33,#ffd36a33,#a855f733);border-color:#ff4d6d}
.gems b{display:inline-block;min-width:2ch;font-variant-numeric:tabular-nums}
.acts{display:flex}.acts .btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;min-height:0;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.acts .btn svg{width:17px;height:17px;flex:none;transition:transform .5s}
.acts .btn:hover svg{transform:rotate(180deg)}
.coll{display:grid;gap:7px;padding:10px 12px;border-radius:12px;background:#0a100c;border:1px solid #ffffff18}
.coll-t{display:flex;justify-content:space-between;align-items:center;font:900 11px Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.coll-t b{color:#e7f4ee;font-size:13px;letter-spacing:.06em}
.cseg{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.cseg i{position:relative;overflow:hidden;height:7px;border-radius:4px;background:#ffffff14}
.cseg i::after{content:"";position:absolute;inset:0;width:var(--p,0%);background:var(--c);box-shadow:0 0 8px var(--c);transition:width .7s cubic-bezier(.2,.9,.3,1)}
.cseg i.full{box-shadow:0 0 10px -2px var(--c)}

/* slots + tabs + animal picker */
.slots .slot{border-left:3px solid var(--rc,#ffffff1a);transition:transform .2s,border-color .2s,box-shadow .2s}
.slots .slot:hover{transform:translateY(-2px)}
.cats button{display:inline-flex;align-items:center;gap:7px}
.cats button i{font-style:normal;padding:1px 7px;border-radius:999px;background:#ffffff14;font-size:10px;letter-spacing:.04em;color:var(--muted)}
.cats button[aria-selected=true] i{background:#4ee6b433;color:#c8fff4}
.cats button.done i{background:#f2c14e33;color:#ffe9b0}.cats button.done i::before{content:"\2713 "}
.pick button svg{transition:transform .3s cubic-bezier(.2,.9,.3,1.4),border-color .2s,box-shadow .2s}
.pick button:hover svg{transform:translateY(-3px) scale(1.05)}
.pick button[aria-pressed=true] svg{transform:translateY(-4px) scale(1.07)}

/* item cards */
.items .it{transition:transform .3s cubic-bezier(.2,.9,.3,1.3),box-shadow .3s}
.it .art{position:relative}
.it .art svg{transition:transform .5s ease}
.it .art::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;background:linear-gradient(100deg,transparent,#ffffff38,transparent);transform:translateX(-150%) skewX(-18deg)}
.it:hover .art svg{transform:scale(1.07)}
.it:hover .art::after{transition:transform .7s ease;transform:translateX(320%) skewX(-18deg)}
@media(hover:hover){.it:hover{transform:translateY(-5px);box-shadow:0 18px 30px -14px var(--rc),0 0 0 1px color-mix(in srgb,var(--rc) 65%,transparent)}}
.it.eq,.it.eq:hover{box-shadow:0 0 0 2px var(--rc),0 0 26px -4px var(--rc)}
.tag{padding:2px 8px;border-radius:999px;background:color-mix(in srgb,var(--rc) 16%,transparent);border:1px solid color-mix(in srgb,var(--rc) 45%,transparent)}
.it.own .tag::after{content:" \00B7  Owned";color:#b9cfc7}
.it.eq .tag::after{content:" \00B7  Equipped";color:#fff}
.it[data-t="3"]::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none}
.it[data-t="4"]::after,.it[data-t="5"]::after{content:"";position:absolute;inset:-1px;border-radius:15px;padding:2px;pointer-events:none;
 background:conic-gradient(from var(--a),transparent 0 55%,var(--rc) 85%,#fff 93%,transparent);
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.it[data-t="5"]::after{background:conic-gradient(from var(--a),#ff4d6d,#ffd36a,#ff4fd8,#a855f7,#4da3ff,#ff4d6d)}
.it:not(.own):not(.no) .buy{border-color:#4ee6b4aa}

/* phones: the dock holds the stage size (the ring wraps the dock, not a wider box) */
@media(max-width:819px){
 .avbox .avstage{width:auto;justify-self:auto}
 .avbox .stdock{width:min(100%,250px);justify-self:center}
}

/* motion only for people who have not asked to reduce it */
@media(prefers-reduced-motion:no-preference){
 .avbox{animation:avin .35s cubic-bezier(.2,.9,.3,1)}
 .av-wrap .bag-back{animation:av-amb 14s ease-in-out infinite alternate}
 #avt{animation:av-title 7s linear infinite}
 .stwrap{animation:av-float 5s ease-in-out infinite}
 .gsh{animation:av-gsh 5s ease-in-out infinite}
 .stwrap::before{animation:av-spin 5s linear infinite}
 #sc[data-t="4"] .stwrap::before{animation-duration:3.2s}
 #sc[data-t="5"] .stwrap::before{animation-duration:2.6s}
 .avstage::after{animation:av-shine 6s ease-in-out infinite}
 .avstage.hop svg{animation:av-hop .55s ease-out}
 .spk i{animation:av-twinkle 3.2s ease-out infinite}
 .spk i:nth-child(2){animation-delay:.4s}.spk i:nth-child(3){animation-delay:.9s}.spk i:nth-child(4){animation-delay:1.3s}.spk i:nth-child(5){animation-delay:1.8s}.spk i:nth-child(6){animation-delay:2.2s}.spk i:nth-child(7){animation-delay:2.6s}.spk i:nth-child(8){animation-delay:3s}
 .bring{animation:av-ring .8s ease-out forwards}
 .bp{animation:av-pt .85s ease-out forwards}
 .gems b.up{animation:av-up .7s ease-out}.gems b.dn{animation:av-dn .7s ease-out}
 .it.ent{animation:av-card-in .5s cubic-bezier(.2,.9,.3,1) backwards;animation-delay:calc(var(--i,0)*45ms)}
 .it[data-t="3"]::after{animation:av-epic 3s ease-in-out infinite}
 .it[data-t="4"]::after{animation:av-spin 4s linear infinite}
 .it[data-t="5"]::after{animation:av-spin 2.6s linear infinite}
 .it:not(.own):not(.no) .buy{animation:av-pulse 2.4s ease-in-out infinite}
}
@media(prefers-reduced-motion:reduce){.avstage{transition:none}.stwrap::before{opacity:.7}}

/* featured game cover (Delve key art): the logo sits in the right half of the picture, so crops keep that side */
.feat-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:82% 40%}
.arc-more{margin:34px 0 12px;font:800 20px/1.2 Nunito,system-ui,sans-serif;color:var(--text)}
#arcade .feat{margin-top:18px;text-align:left}