/* Layout: full-bleed cobalt stage with a rubber band across the lower third. Menu, progress, help and result panels float above it.
   One primary action per screen, secondary actions as quiet ghost buttons, detail lives one tap deeper. */
:root{
  --stage-top:#4047E6; --stage-bot:#1A1E96; --band:#FFF1CF; --glow:#FF3E86;
  --lemon:#FFE14D; --mint:#3DF2B0; --coral:#FF7A59; --lilac:#B9A3FF; --ink:#0E1038; --dead:#7E86D6;
  --panel:rgba(14,16,56,.93); --line:rgba(255,255,255,.2); --dim:rgba(255,255,255,.72); --fill:rgba(255,255,255,.08);
  --display:"Bowlby One","Arial Black",Impact,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
html,body{height:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--stage-bot);color:#fff;font-family:var(--mono);overflow:hidden;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#app{position:relative;width:100%;height:100%;overflow:hidden;background:var(--stage-bot)}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;
  padding-block:clamp(14px,4.5vh,44px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  pointer-events:none;overflow-y:auto}
.panel button,.panel textarea,.panel img,.panel .stack>*:not(.logo):not(.tag){pointer-events:auto}
.stack{display:flex;flex-direction:column;align-items:center;gap:16px;width:min(100%,420px);text-align:center;margin-block:auto}
.logo{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(64px,min(25vw,20vh,150px),150px);white-space:nowrap;line-height:.88;letter-spacing:.015em;color:var(--lemon);
  text-shadow:0 .06em 0 var(--glow),0 .1em 0 rgba(14,16,56,.45)}
.logo span{display:inline-block;animation:twang .9s cubic-bezier(.2,1.7,.4,1) both}
.logo span:nth-child(2){animation-delay:.07s}.logo span:nth-child(3){animation-delay:.14s}.logo span:nth-child(4){animation-delay:.21s}
@keyframes twang{from{transform:translateY(-.5em) scale(.7,1.5);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{from{transform:scale(.6);opacity:.2}to{transform:scale(1);opacity:1}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.tag{margin:0;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.eyebrow{margin:0;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.note{margin:0;font-size:12px;line-height:1.5;color:var(--dim)}
.row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;width:100%}
.btn{font-family:var(--display);font-size:clamp(17px,4.8vw,20px);min-height:48px;padding:12px 26px;border-radius:999px;border:0;cursor:pointer;color:var(--ink);background:var(--lemon);box-shadow:0 5px 0 rgba(14,16,56,.5);transition:transform .08s,box-shadow .08s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(14,16,56,.5)}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55);box-shadow:none;padding:10px 22px}
.btn.ghost:active{transform:translateY(2px)}
.btn.big{flex-direction:column;gap:4px;padding:16px 44px;font-size:clamp(30px,8.5vw,38px);line-height:1;min-width:min(100%,300px)}
.btn.big small{font:500 12px/1.3 var(--mono);letter-spacing:.02em;opacity:.72}
.btn.small{font-size:16px;min-height:44px;padding:8px 20px}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn:disabled:active{transform:none}
.lockTag{font:500 10px var(--mono);letter-spacing:.04em;background:rgba(255,255,255,.18);border-radius:99px;padding:2px 6px;color:#fff}
.count{font:500 12px var(--mono);background:var(--mint);color:var(--ink);border-radius:99px;padding:2px 8px}
.icobtn{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.55);background:transparent;color:#fff;font:400 20px var(--display);display:grid;place-items:center;cursor:pointer;padding:0}
.btn:focus-visible,.link:focus-visible,.icobtn:focus-visible,#mute:focus-visible,#pauseBtn:focus-visible,.crate:focus-visible,.skin:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.link{background:none;border:0;color:var(--dim);font:500 13px var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:8px}
.status{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;width:100%}
.pill{display:inline-flex;align-items:center;gap:6px;font:500 14px var(--mono);padding:7px 14px;border-radius:99px;background:rgba(14,16,56,.45);border:1px solid var(--line);font-variant-numeric:tabular-nums}
.pill svg{width:16px;height:16px}
.pill.risk{background:var(--coral);color:var(--ink);border-color:transparent;animation:beat 1.6s ease-in-out infinite}
.pill.risk svg path:first-child{fill:var(--ink)}
.lvpill{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;flex:1 1 150px;max-width:210px}
.lv{font-family:var(--display);background:var(--lemon);color:var(--ink);border-radius:999px;padding:3px 10px;font-size:13px;white-space:nowrap}
.xpbar{height:10px;border-radius:999px;background:rgba(14,16,56,.6);overflow:hidden}
.xpbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mint),var(--lemon));transition:width .9s cubic-bezier(.2,.8,.2,1)}
.over-h{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(30px,9vw,42px);color:var(--lemon);letter-spacing:.02em}
.card{width:100%;box-sizing:border-box;background:var(--fill);border:1px solid var(--line);border-radius:16px;padding:14px;display:grid;gap:12px;text-align:left}
.lvl-row{display:flex;align-items:center;gap:10px;font-size:14px}
.lvl-row b{font-family:var(--display);font-weight:400;font-size:17px}
.lvl-row .dim{margin-left:auto;font-size:12px;color:var(--dim)}
.kv{display:grid;gap:6px;margin:0;font-size:13px}
.kv div{display:flex;justify-content:space-between;gap:12px}
.kv dt{color:var(--dim);white-space:nowrap}
.kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.quests{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.quests li{display:grid;grid-template-columns:1fr auto;gap:6px 10px;font-size:13px;align-items:center}
.quests .xpbar{grid-column:1/-1;height:8px}
.quests li.done b{color:var(--mint)}
.skins{display:flex;gap:10px;width:100%;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.skin{flex:0 0 96px;scroll-snap-align:start;border:2px solid var(--line);border-radius:12px;background:rgba(14,16,56,.45);color:#fff;padding:12px 6px 9px;font:500 12px var(--mono);cursor:pointer;display:grid;gap:8px;justify-items:center;min-width:0;text-align:center}
.skin i{display:block;width:100%;height:8px;border-radius:99px}
.skin span{overflow-wrap:anywhere;line-height:1.3}
.skin .lvt{font-size:11px;color:var(--dim);min-height:1.3em}
.skin[aria-pressed="true"]{border-color:var(--mint);background:rgba(61,242,176,.14)}
.skin:disabled{opacity:.5;cursor:not-allowed}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;width:100%;text-align:left;font-size:14px;line-height:1.45}
.steps b{display:block;font-family:var(--display);font-weight:400;font-size:16px;color:var(--lemon);margin-bottom:2px}
.legend{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 14px;width:100%;text-align:left}
.lg{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.3;color:#fff;min-width:0}
.lg canvas{width:34px;height:34px;flex:none}
#hub,#help,#result,#pausePanel,#map,#brief,#stageRes,#board,#shop{background:var(--panel);pointer-events:auto}
#hub,#help,#result,#map,#brief,#stageRes,#board,#shop{touch-action:pan-y}
#result{-webkit-user-select:text;user-select:text}
.score{font-family:var(--display);font-size:clamp(56px,16vw,88px);line-height:1;font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 5px 0 var(--glow)}
.badge{font-family:var(--display);font-size:13px;letter-spacing:.06em;text-transform:uppercase;background:var(--mint);color:var(--ink);padding:5px 14px;border-radius:999px;animation:pop .5s cubic-bezier(.2,1.8,.4,1)}
.hook{margin:0;font-size:14px;color:var(--mint)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0;width:100%}
.stats div{display:flex;flex-direction:column;gap:2px;align-items:center}
.stats dt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);order:2}
.stats dd{margin:0;font-family:var(--display);font-size:clamp(20px,6vw,28px);font-variant-numeric:tabular-nums;order:1}
.xp{display:grid;gap:6px;width:100%;text-align:left}
.xp-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:13px}
.xp-top b{font-family:var(--display);font-weight:400;color:var(--mint);white-space:nowrap}
.qdone{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12px;color:var(--mint)}
.qdone:empty{display:none}
.levelup{background:var(--lemon);color:var(--ink);border-radius:14px;padding:10px 14px;font-family:var(--display);font-size:15px;line-height:1.3;animation:pop .5s cubic-bezier(.2,1.8,.4,1)}
.crow{display:flex;gap:12px;justify-content:center}
.crate{width:72px;height:72px;border-radius:16px;border:0;font-family:var(--display);font-size:24px;color:var(--ink);background:linear-gradient(160deg,var(--lemon),var(--coral));box-shadow:0 5px 0 rgba(14,16,56,.5);cursor:pointer;transition:transform .08s}
.crate:active{transform:translateY(3px)}
.crate:disabled{cursor:default}
.crate.open{background:var(--mint);animation:pop .45s cubic-bezier(.2,1.8,.4,1)}
.crate.jackpot{background:linear-gradient(160deg,#fff,var(--glow))}
.crate.dim{opacity:.5;background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
#crates{display:grid;gap:8px;justify-items:center}
.sharebox{display:grid;gap:12px;justify-items:center;width:100%}
#cardImg{width:min(100%,300px);height:auto;aspect-ratio:4/5;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.4);-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default}
#shareText{width:100%;box-sizing:border-box;font:13px/1.5 var(--mono);color:var(--ink);background:var(--band);border:0;border-radius:10px;padding:10px;resize:none}
#mute,#pauseBtn{position:absolute;bottom:12px;width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(14,16,56,.35);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
#mute{right:max(12px,env(safe-area-inset-right,0px))}
#pauseBtn{left:max(12px,env(safe-area-inset-left,0px))}
#mute svg{width:20px;height:20px}
#pauseBtn svg{width:18px;height:18px}
/* campaign: stars, world map, briefing, stage result */
.btn.mode{padding:8px 14px;gap:6px}
@media (max-width:400px){.btn.mode{padding:8px 11px;gap:5px;font-size:14px}.menu-row{gap:8px}}
.count svg{width:11px;height:11px;vertical-align:-1px;margin-right:3px}
.count svg path{fill:var(--ink);stroke:none}
.stars{display:inline-flex;gap:3px;align-items:center}
.stars svg{width:16px;height:16px}
.stars path{fill:rgba(255,255,255,.16);stroke:rgba(255,255,255,.35);stroke-width:1.4;stroke-linejoin:round}
.stars svg.on path{fill:var(--lemon);stroke:var(--ink);stroke-width:1.6}
.stars.xl{gap:8px}
.stars.xl svg{width:60px;height:60px}
.stars.xl svg.on{animation:pop .5s cubic-bezier(.2,1.8,.4,1) both}
.mapHead{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;width:100%}
.mapHead .over-h{font-size:clamp(22px,6.5vw,30px);line-height:1.1}
.mapHead .icobtn:disabled{opacity:.3;cursor:default}
.wTitle{display:grid;gap:4px;justify-items:center}
.wTitle .stars{gap:4px;font:500 12px var(--mono);color:var(--dim)}
.nodes{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:100%}
.node{aspect-ratio:1/1.12;border-radius:14px;border:2px solid var(--line);background:rgba(14,16,56,.5);color:#fff;font:400 20px var(--display);display:grid;align-content:center;justify-items:center;gap:5px;padding:6px 2px;cursor:pointer;min-width:0}
.node .stars svg{width:11px;height:11px}
.node.cleared{background:rgba(255,225,77,.14);border-color:rgba(255,225,77,.5)}
.node.cur{border-color:var(--mint);box-shadow:0 0 0 3px rgba(61,242,176,.28);animation:beat 1.6s ease-in-out infinite}
.node:disabled{opacity:.38;cursor:not-allowed}
.node.boss{grid-column:1/-1;aspect-ratio:auto;min-height:56px;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;font-size:16px;background:linear-gradient(160deg,rgba(255,122,89,.95),rgba(255,62,134,.95));color:var(--ink);border-color:transparent}
.node.boss .stars svg{width:16px;height:16px}
.node.boss .stars path{stroke:rgba(14,16,56,.55)}
.node.boss.cleared{background:linear-gradient(160deg,#ffd27a,#ff7a59)}
.node.boss:disabled{background:rgba(255,255,255,.1);color:#fff;border-color:var(--line)}
.goalTxt{margin:0;font-family:var(--display);font-size:clamp(24px,7vw,30px);line-height:1.2}
.tiers{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:100%}
.tiers li{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--fill);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14px}
.tiers li.got{border-color:var(--mint)}
.tiers .stars svg{width:18px;height:18px}
.tiers b{font-family:var(--display);font-weight:400;font-size:18px}
/* retention: daily gift + badges */
#gift{background:var(--panel);pointer-events:auto}
.giftRow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:100%}
.gday{border:2px solid var(--line);border-radius:12px;background:var(--fill);padding:8px 0;display:grid;gap:3px;justify-items:center;font:500 10px var(--mono);color:var(--dim);min-width:0}
.gday b{font:400 14px var(--display);color:#fff}
.gday.done{border-color:var(--mint);color:var(--mint)}
.gday.today{border-color:var(--lemon);background:rgba(255,225,77,.16);color:var(--lemon);animation:beat 1.6s ease-in-out infinite}
.gday.big{border-color:var(--glow)}
.giftAmt{font-family:var(--display);font-size:clamp(40px,12vw,56px);line-height:1;color:var(--lemon)}
.giftBtn{position:relative}
.giftBtn i{position:absolute;top:-2px;right:-2px;width:11px;height:11px;border-radius:50%;background:var(--glow);border:2px solid var(--ink)}
.badges{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.badges li{display:grid;gap:5px;font-size:13px}
.badges li>div:first-child{display:flex;justify-content:space-between;gap:10px}
.badges li span:first-child b{font-weight:600}
.badges li.got{color:var(--mint)}
.badges small{color:var(--dim);font:500 11px var(--mono)}
/* trophy shelf */
.shelf{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.trophy{appearance:none;background:rgba(14,16,56,.45);border:2px solid var(--line);border-radius:12px;padding:6px 2px 4px;cursor:pointer;display:grid;place-items:center;aspect-ratio:1/1.05}
.trophy svg{width:100%;max-width:44px;height:auto}
.trophy.got{border-color:rgba(255,225,77,.45);background:rgba(255,225,77,.08)}
.trophy.sel{border-color:var(--mint);box-shadow:0 0 0 2px rgba(61,242,176,.3)}
#trophyInfo{margin:10px 0 0;text-align:center}
/* world twists */
.twistTag{margin:0;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--lilac)}
.twistTag:empty{display:none}
/* leaderboard */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%;padding:4px;box-sizing:border-box;border:1px solid var(--line);border-radius:999px;background:var(--fill)}
.tabs button{font:400 14px var(--display);min-height:40px;padding:0 4px;border:0;border-radius:999px;background:transparent;color:var(--dim);cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--lemon);color:var(--ink)}
.tabs button:focus-visible{outline:3px solid var(--mint);outline-offset:2px}
.board{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:100%;min-height:120px;align-content:start}
.board li{display:block;border-radius:12px;background:var(--fill);border:1px solid var(--line);font-size:14px;text-align:left;overflow:hidden}
.rowmain{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:9px 14px;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.rowmain:disabled{cursor:default;color:inherit;opacity:1}
.rowmain:focus-visible{outline:3px solid var(--mint);outline-offset:-3px}
.rowact{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 14px 10px}
.rowact[hidden]{display:none}
.fi{display:inline-flex;margin-left:8px;color:var(--mint);vertical-align:-1px}
.board li.skel{height:42px;background:linear-gradient(90deg,var(--fill),rgba(255,255,255,.14),var(--fill));background-size:200% 100%;animation:shim 1.2s linear infinite}
@keyframes shim{0%{background-position:200% 0}100%{background-position:-200% 0}}
.rowmain i{font:400 15px var(--display);font-style:normal;color:var(--dim);font-variant-numeric:tabular-nums}
.board li:nth-child(1) .rowmain i{color:var(--lemon)}.board li:nth-child(2) .rowmain i{color:var(--lilac)}.board li:nth-child(3) .rowmain i{color:var(--coral)}
.rowmain .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowmain b{font:400 16px var(--display);font-variant-numeric:tabular-nums}
.board li.me{border-color:var(--mint);background:rgba(61,242,176,.14)}
.board li.gap{text-align:center;background:none;border:0;padding:0;color:var(--dim)}
.rank{margin:0;font-size:14px;color:var(--mint)}
.nameForm{display:flex;gap:8px;width:100%}
.nameForm input{flex:1;min-width:0;box-sizing:border-box;height:44px;padding:0 16px;border-radius:999px;border:2px solid rgba(255,255,255,.4);background:rgba(14,16,56,.6);color:#fff;font:500 16px var(--mono);-webkit-user-select:text;user-select:text}
.nameForm input::placeholder{color:var(--dim)}
.nameForm input:focus-visible{outline:3px solid var(--mint);outline-offset:2px;border-color:transparent}
#shop .stack,#board .stack{padding-bottom:56px}
/* leaderboard extras */
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.chips .chip{min-height:36px;padding:6px 14px}
.chips[hidden],.chip[hidden]{display:none}
.lbCard{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:16px;background:var(--fill);padding:4px 14px 14px;text-align:left}
.lbCard summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;font:400 15px var(--display);list-style:none}
.lbCard summary::-webkit-details-marker{display:none}
.lbCard summary span{font:500 11px var(--mono);color:var(--dim)}
.lbCard summary:focus-visible{outline:3px solid var(--mint);outline-offset:2px;border-radius:8px}
.lbCard[open] summary{border-bottom:1px solid var(--line);margin-bottom:12px}
.lbCard .nameForm{margin-bottom:6px}.lbCard .note{margin:6px 0}
.lbCard .btn{margin:2px 0 10px}
.code{font:500 16px var(--mono);letter-spacing:.14em;color:var(--lemon)}
.note.err{color:#FF8A8A;min-height:0;margin:0}.note.err:empty{display:none}
/* country tag, challenge banner, coins, shop, boosts */
.cc{display:inline-block;margin-left:8px;padding:1px 6px;border-radius:6px;font:500 10px var(--mono);font-style:normal;letter-spacing:.06em;color:var(--dim);border:1px solid var(--line);vertical-align:1px}
.challenge{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;padding:10px 12px 10px 16px;border-radius:16px;background:var(--lemon);color:var(--ink);font-size:13px;line-height:1.35;text-align:left;animation:pop .5s cubic-bezier(.2,1.8,.4,1)}
.challenge .btn{background:var(--ink);color:var(--lemon);flex:none;min-height:40px;padding:6px 16px;box-shadow:none}
button.pill{font:500 14px var(--mono);color:#fff;cursor:pointer}
button.pill:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.pill.coin b,.coinBal b{font-weight:500}
.coinBal{font-size:18px}.coinBal svg{width:20px;height:20px}
.coinGain{margin:0;font:400 15px var(--display);color:var(--lemon)}
.coinGain:empty{display:none}
.shopList{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:100%}
.shopList li{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:12px;padding:10px 10px 10px 12px;border-radius:14px;background:var(--fill);border:1px solid var(--line);text-align:left}
.shopList li.on{border-color:var(--mint);background:rgba(61,242,176,.12)}
.shopList li i{display:block;width:8px;height:36px;border-radius:99px}
.shopTxt{display:grid;gap:2px;min-width:0}
.shopTxt b{font:400 16px var(--display)}
.shopTxt small{font:500 11px/1.4 var(--mono);color:var(--dim)}
.shopList .empty{display:block;text-align:center;color:var(--dim);font-size:13px;background:none;border:0}
.buy{min-height:40px;padding:6px 14px;font-size:15px;box-shadow:0 3px 0 rgba(14,16,56,.5)}
.buy svg{width:16px;height:16px}
.buy:disabled{box-shadow:none}
.boosts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{font:500 13px var(--mono);padding:8px 14px;min-height:40px;border-radius:99px;border:2px solid rgba(255,255,255,.55);background:transparent;color:#fff;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.chip:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.note.offline{color:var(--mint)}
/* loading screen + toast */
#splash{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:linear-gradient(180deg,var(--stage-top),var(--stage-bot));transition:opacity .4s}
#splash.out{opacity:0;pointer-events:none}
.sp-logo{font-family:var(--display);font-size:clamp(72px,26vw,150px);line-height:.9;color:var(--lemon);text-shadow:0 .06em 0 var(--glow),0 .1em 0 rgba(14,16,56,.45);animation:beat 1.1s ease-in-out infinite}
.sp-bar{width:min(52vw,220px);height:8px;border-radius:99px;background:rgba(14,16,56,.55);overflow:hidden}
.sp-bar i{display:block;height:100%;width:40%;border-radius:99px;background:linear-gradient(90deg,var(--mint),var(--lemon));animation:slide 1s ease-in-out infinite}
#splash p{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
#toast{width:max-content;position:fixed;left:50%;bottom:max(70px,calc(env(safe-area-inset-bottom,0px) + 62px));z-index:40;transform:translate(-50%,12px);opacity:0;display:flex;align-items:center;gap:12px;max-width:min(92vw,420px);padding:10px 16px;border-radius:99px;background:var(--ink);border:1px solid var(--line);font-size:13px;transition:opacity .3s,transform .3s}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast button{font:400 14px var(--display);border:0;border-radius:99px;padding:6px 14px;background:var(--lemon);color:var(--ink);cursor:pointer}
@media (prefers-reduced-motion:reduce){.sp-logo,.sp-bar i,.challenge,.board li.skel{animation:none}#splash,#toast{transition:none}}
@media (max-height:620px){.stack{gap:12px}.btn.big{padding:12px 36px}}
@media (prefers-reduced-motion:reduce){.logo span,.pill.risk,.badge,.crate.open,.levelup,.node.cur,.stars.xl svg.on,.gday.today{animation:none}.btn,.xpbar i{transition:none}}