:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#FAF4EA; --surface:#FFFFFF; --surface2:#F3EADF; --ink:#3B2147; --muted:#7E6A88; --line:#E6D8CB;
  --pepper:#D8432B; --pepper-d:#A92F1C; --herb:#3E9B5F; --mustard:#F0B429; --crystal:#2FA4DE; --eggplant:#3B2147;
  --ground:#C9613A; --air:#2F96CF; --both:#7A4A97;
  --shadow:0 12px 32px rgba(59,33,71,.14); --shadow-s:0 2px 0 rgba(59,33,71,.12);
  --fd:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --fb:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --gingham:repeating-linear-gradient(90deg,var(--pepper) 0 12px,#fff 12px 24px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){color-scheme:dark;--bg:#211329;--surface:#311D3D;--surface2:#3B2649;--ink:#F8EEE6;--muted:#BFA9C9;--line:#4C3559;--shadow:0 12px 32px rgba(0,0,0,.45);--shadow-s:0 2px 0 rgba(0,0,0,.35);}
}
:root[data-theme="dark"]{color-scheme:dark;--bg:#211329;--surface:#311D3D;--surface2:#3B2649;--ink:#F8EEE6;--muted:#BFA9C9;--line:#4C3559;--shadow:0 12px 32px rgba(0,0,0,.45);--shadow-s:0 2px 0 rgba(0,0,0,.35);}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--fb);overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}
#app{height:100%;position:relative;overflow:hidden;overflow:clip}
.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden;overflow:clip}
.screen.active{display:flex}
h1,h2,h3,h4{font-family:var(--fd);margin:0;line-height:1.1}
.muted{color:var(--muted)}
.small{font-size:13px}

/* buttons */
.btn{font-family:var(--fd);font-weight:700;font-size:17px;border:0;border-radius:14px;padding:10px 18px;background:var(--surface);color:var(--ink);box-shadow:0 3px 0 var(--line);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .08s,box-shadow .08s;line-height:1.1}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:none}
.btn.primary{background:var(--pepper);color:#fff;box-shadow:0 3px 0 var(--pepper-d)}
.btn.herb{background:var(--herb);color:#fff;box-shadow:0 3px 0 #2c7445}
.btn.sm{font-size:14px;padding:7px 12px;border-radius:11px}
.btn.big{font-size:21px;padding:13px 26px;border-radius:18px}
.btn:disabled{opacity:.42;cursor:not-allowed}
.ib{width:38px;height:38px;border-radius:12px;border:0;background:var(--surface2);cursor:pointer;font-size:17px;flex:none}
.ib.off,.btn.off{opacity:.45}
.cr-pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--fd);font-weight:800;background:var(--surface2);border-radius:999px;padding:5px 12px;color:var(--crystal);font-size:16px}
.cr-pill b{color:var(--ink)}

/* menu */
#scr-menu{align-items:center;justify-content:center;overflow:auto;padding:20px}
#scr-menu::before{content:"";position:absolute;inset:0 0 auto 0;height:10px;background:var(--gingham)}
.menu-wrap{width:min(440px,100%);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.logo{display:flex;align-items:flex-end;gap:12px}
.title{font-size:clamp(40px,10vw,60px);font-weight:800;letter-spacing:-.5px;line-height:.9;color:var(--pepper)}
.title small{display:block;font-size:.42em;color:var(--ink);letter-spacing:0;margin-top:6px}
.tagline{max-width:34ch;margin:0;color:var(--muted)}
.seg{display:flex;background:var(--surface2);border-radius:16px;padding:4px;gap:4px;width:100%}
.seg button{flex:1;border:0;background:transparent;border-radius:12px;padding:8px;cursor:pointer;font-family:var(--fd);font-weight:700;font-size:16px;display:flex;flex-direction:column;align-items:center}
.seg button small{font-family:var(--fb);font-size:12px;color:var(--crystal);font-weight:800}
.seg button.on{background:var(--surface);box-shadow:var(--shadow-s)}
.menu-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.menu-btns .btn.big{grid-column:1/-1}

/* topbar */
.topbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:var(--gingham);opacity:.9}
.topbar h2{font-size:22px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scroll{flex:1;overflow:auto;padding:22px 16px 30px}

/* maps */
.maps-list{display:grid;gap:14px;max-width:760px;margin:0 auto}
.map-card{display:flex;gap:16px;align-items:center;text-align:left;border:0;border-radius:22px;padding:16px;cursor:pointer;color:#2a1832;box-shadow:var(--shadow);position:relative;overflow:hidden}
.map-card .map-emo{font-size:52px;width:76px;height:76px;display:grid;place-items:center;background:rgba(255,255,255,.55);border-radius:20px;flex:none}
.map-card h3{font-size:22px}
.map-card p{margin:4px 0 8px;font-size:14px;opacity:.85}
.map-card.locked{filter:grayscale(.85);opacity:.6;cursor:not-allowed}
.prog{height:8px;background:rgba(0,0,0,.12);border-radius:9px;overflow:hidden;margin-bottom:4px}
.prog span{display:block;height:100%;background:var(--pepper);border-radius:9px}

/* levels */
.lv-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:14px;min-height:0}
.lv-board{position:relative;width:min(100%,calc((100dvh - 120px)*1.6));aspect-ratio:16/10;border-radius:26px;box-shadow:var(--shadow);overflow:hidden}
.lv-board svg{position:absolute;inset:0;width:100%;height:100%}
.node{position:absolute;transform:translate(-50%,-50%);width:clamp(46px,8vw,64px);height:clamp(46px,8vw,64px);border-radius:50%;border:4px solid #fff;background:var(--pepper);color:#fff;font-family:var(--fd);font-weight:800;font-size:clamp(18px,3vw,24px);cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.18);display:grid;place-items:center;padding:0}
.node.done{background:var(--herb)}
.node.locked{background:#9c8fa3;cursor:not-allowed}
.node.current{animation:pulse 1.4s ease-in-out infinite}
.node .ach{position:absolute;top:100%;left:50%;transform:translate(-50%,4px);display:flex;gap:2px;font-size:11px;background:rgba(255,255,255,.92);color:#3B2147;border-radius:999px;padding:1px 6px;white-space:nowrap}
.node .ach i{font-style:normal;opacity:.25}
.node .ach i.on{opacity:1}
@keyframes pulse{50%{transform:translate(-50%,-50%) scale(1.09)}}
@media (prefers-reduced-motion:reduce){.node.current{animation:none}}

/* game */
#scr-game{background:var(--bg)}
.hud{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:6px 8px;background:var(--surface);position:relative;z-index:3}
.hud::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;background:var(--gingham)}
.pill{display:flex;align-items:center;gap:5px;background:var(--surface2);border-radius:12px;padding:5px 9px;font-family:var(--fd);font-weight:800;font-size:16px;white-space:nowrap}
.gb{width:54px;height:9px;border-radius:9px;background:rgba(0,0,0,.12);overflow:hidden}
.gb span{display:block;height:100%;background:var(--pepper);border-radius:9px;transition:width .25s}
.gb.hero span{background:var(--herb)}
.spacer{flex:1}
.speed{display:flex;background:var(--surface2);border-radius:12px;padding:3px}
.speed button{border:0;background:transparent;border-radius:9px;padding:5px 9px;font-family:var(--fd);font-weight:800;cursor:pointer}
.speed button.on{background:var(--eggplant);color:#fff}
#h-call.pulse{animation:cta 1.2s ease-in-out infinite}
@keyframes cta{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){#h-call.pulse{animation:none}}
#stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:10px 6px 6px}
#cv{border-radius:16px;box-shadow:var(--shadow);touch-action:none;display:block;transition:transform .22s ease}
#rotate-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:var(--eggplant);color:#fff;border-radius:12px;padding:8px 14px;font-size:14px;display:none;cursor:pointer;white-space:nowrap}

/* sheet */
.sheet{position:absolute;left:50%;bottom:0;width:min(760px,100%);transform:translate(-50%,105%);transition:transform .22s ease;background:var(--surface);border-radius:22px 22px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.18);padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px));max-height:58%;overflow:auto;z-index:6}
.sheet.open{transform:translate(-50%,0)}
@media (orientation:landscape) and (max-height:560px){
  .sheet{left:auto;right:0;top:0;bottom:0;width:min(340px,48%);max-height:none;border-radius:22px 0 0 22px;transform:translateX(105%)}
  .sheet.open{transform:none}
}
.sh-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.sh-head .t{flex:1;min-width:0}
.sh-head h3{font-size:20px}
.sh-head .x{width:34px;height:34px;border-radius:10px;border:0;background:var(--surface2);cursor:pointer;flex:none}
.build-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
@media (orientation:landscape) and (max-height:560px){.build-row{flex-wrap:wrap;overflow:visible}}
.bcard{flex:none;width:92px;border:2px solid transparent;background:var(--surface2);border-radius:16px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;scroll-snap-align:start;position:relative}
.bcard .be{font-size:32px;line-height:1.1}
.bcard .bn{font-size:11.5px;font-weight:700;text-align:center;line-height:1.15;min-height:2.3em}
.bcard .bc{font-family:var(--fd);font-weight:800;font-size:14px}
.bcard::before{content:"";position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--c)}
.bcard.on{border-color:var(--pepper);background:var(--surface)}
.bcard.poor .bc{color:var(--pepper)}
.bcard.poor{opacity:.6}
.bcard.lockhint{opacity:.55;cursor:default;font-size:12px;justify-content:center}
.cat-ground{--c:var(--ground)} .cat-air{--c:var(--air)} .cat-both{--c:var(--both)}
.info{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.info p{margin:0;font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-size:12px;font-weight:700;background:var(--surface2);border-radius:999px;padding:3px 9px;white-space:nowrap}
.chip.c{background:var(--c);color:#fff}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(66px,1fr));gap:6px}
.stats div{background:var(--surface2);border-radius:12px;padding:6px;text-align:center;font-size:11px;color:var(--muted)}
.stats b{display:block;font-family:var(--fd);font-size:17px;color:var(--ink)}
.xpbar{height:8px;background:var(--surface2);border-radius:9px;overflow:hidden}
.xpbar span{display:block;height:100%;background:var(--mustard)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row .btn{flex:1}
.branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px}
.branch{flex-direction:column;align-items:flex-start;text-align:left;gap:3px;font-size:15px}
.branch small{font-family:var(--fb);font-weight:600;font-size:12px;opacity:.85}
.branch span{font-size:14px}
.nextw{border:0;cursor:pointer;color:inherit}
.nx{font-family:var(--fb);font-size:13px;font-weight:800;color:var(--muted);margin-left:2px}
.lvline{display:flex;align-items:center;gap:8px}
.lvb{font-family:var(--fd);font-weight:800;background:var(--eggplant);color:#fff;border-radius:9px;padding:2px 9px;font-size:14px;white-space:nowrap}
.seg.tg button{font-size:13px;padding:7px 4px;line-height:1.1}
.tglabel{font-size:12px;font-weight:800;color:var(--muted)}
.wvrow{display:flex;gap:10px;align-items:center;background:var(--surface2);border-radius:12px;padding:7px 10px;font-size:14px}
.wvrow.past{opacity:.45}
.wvrow.next{outline:2px solid var(--pepper)}
.wvrow>b{font-family:var(--fd);min-width:58px}
.wvrow .ic{flex:1;display:flex;flex-wrap:wrap;gap:4px 10px;font-weight:800}
.wvrow small{color:var(--muted);font-weight:700}
.nextbox{background:var(--surface2);border-radius:16px;padding:12px;display:flex;flex-wrap:wrap;gap:10px}
.nextbox div{display:flex;align-items:center;gap:6px;background:var(--surface);border-radius:12px;padding:6px 10px;font-weight:800}
.nextbox span{font-size:26px}
.lockmsg,.maxed,.req{font-size:13px;background:var(--surface2);padding:8px 10px;border-radius:12px}
.maxed{color:var(--herb);font-weight:800}

/* modal */
.modal{position:fixed;inset:0;background:rgba(33,19,41,.55);display:none;align-items:center;justify-content:center;padding:16px;z-index:20}
.modal.open{display:flex}
.modal-card{background:var(--surface);border-radius:24px;width:min(460px,100%);max-height:100%;display:flex;flex-direction:column;box-shadow:var(--shadow);position:relative;overflow:hidden}
.modal-card::before{content:"";height:8px;background:var(--gingham);flex:none}
.modal[data-wide="1"] .modal-card{width:min(980px,100%)}
.modal-body{overflow:auto;padding:18px 18px 22px;display:flex;flex-direction:column;gap:12px}
.modal-x{position:absolute;top:16px;right:12px;width:36px;height:36px;border:0;border-radius:12px;background:var(--surface2);cursor:pointer;z-index:2}
.mh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-right:44px}
.mh h2{font-size:26px;flex:1}
.story p{margin:0 0 10px;line-height:1.55;font-size:16px}
.center{text-align:center;align-items:center}
.tabs{display:flex;gap:6px}
.tabs button{border:0;background:var(--surface2);padding:8px 16px;border-radius:12px;font-family:var(--fd);font-weight:700;cursor:pointer}
.tabs button.on{background:var(--eggplant);color:#fff}
.sec{font-size:18px;margin-top:6px;display:flex;align-items:center;gap:8px}
.sec small{font-family:var(--fb);font-size:12px;color:var(--muted);font-weight:600}
.wgrid,.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.wcard,.bcard2{background:var(--surface2);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:7px;border-top:5px solid var(--c,var(--line))}
.wcard p,.bcard2 p{margin:0;font-size:13px}
.wtop,.btop{display:flex;gap:10px;align-items:center}
.wemo,.bemo{font-size:36px;width:52px;height:52px;display:grid;place-items:center;background:var(--surface);border-radius:14px;flex:none}
.wtop b,.btop b{font-family:var(--fd);font-size:17px;display:block;line-height:1.1}
.wtop small{font-size:12px;color:var(--muted)}
.wcard.locked .wemo{filter:grayscale(1);opacity:.6}
.pips{display:flex;gap:4px}
.pip{flex:1;height:22px;border-radius:7px;background:var(--surface);display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--muted)}
.pip.on{background:var(--mustard);color:#3B2147}
.pip.br{border:2px dashed var(--both)}
details{font-size:13px}
summary{cursor:pointer;font-weight:700;color:var(--muted)}
.brs{display:grid;gap:6px;margin-top:6px}
.brs div{background:var(--surface);border-radius:10px;padding:6px 8px}
.brs b{display:block}
.tag{display:inline-block;font-size:11px;font-weight:800;border-radius:999px;padding:2px 8px;color:#fff;margin-top:3px}
.tag.air{background:var(--air)} .tag.ground{background:var(--ground)}
.bst{display:flex;flex-wrap:wrap;gap:5px}
.bst span{font-size:12px;font-weight:700;background:var(--surface);border-radius:8px;padding:2px 7px}
.abil{margin:0;padding-left:18px;font-size:13px}
.lore{font-style:italic;color:var(--muted)}
.bcard2.locked{align-items:center;justify-content:center;text-align:center;min-height:120px;opacity:.7}
.hero-row{display:flex;align-items:center;gap:12px;background:var(--surface2);border-radius:16px;padding:12px}
.hero-row .hi{font-size:30px}
.hero-row .hm{flex:1;display:flex;flex-direction:column;gap:5px}
.pv{display:flex;gap:10px}
.pv div{flex:1;background:var(--surface2);border-radius:14px;padding:10px;text-align:center}
.emrow{display:flex;flex-wrap:wrap;gap:6px;font-size:30px}
.end-rows{display:flex;flex-direction:column;gap:6px;width:100%}
.end-row{display:flex;align-items:center;gap:10px;background:var(--surface2);border-radius:12px;padding:8px 12px;font-size:14px;text-align:left}
.end-row span{flex:1}
.end-row b{font-family:var(--fd);color:var(--crystal)}
.end-row.no{opacity:.5}
.end-row.had b{color:var(--muted)}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}
.help li{margin-bottom:8px;line-height:1.45}
#toast{position:fixed;left:50%;top:calc(70px + env(safe-area-inset-top,0px));transform:translate(-50%,-20px);background:var(--eggplant);color:#fff;padding:10px 16px;border-radius:14px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:30;max-width:90vw;text-align:center;box-shadow:var(--shadow)}
#toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:520px){
  .pill{font-size:14px;padding:4px 7px}
  .gb{width:38px}
}