:root{
  /* standard shell (kit/v1/shell.js) in the siege look */
  --mgs-panel:linear-gradient(180deg,#2c3650,#1b2233);--mgs-ink:#fff6e4;--mgs-btn:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));--mgs-btn-ink:#fff6e4;
  --mgs-btn-shadow:inset 0 0 0 2px rgba(255,236,200,.16),0 4px 0 rgba(0,0,0,.35);--mgs-accent:linear-gradient(180deg,#ffe58a,#ffc23a 55%,#f0901e);--mgs-accent-ink:#3a1c00;--mgs-accent-shadow:0 5px 0 #8a4a0e;
  --mgs-icon:rgba(27,34,51,.62);--mgs-icon-ink:#fff6e4;--mgs-icon-r:14px;--mgs-icon-shadow:inset 0 0 0 1.5px rgba(255,236,200,.18);--mgs-font:"Lilita One",Impact,system-ui,sans-serif;--mgs-r:22px;--mgs-scrim:rgba(10,14,24,.6);
  --ink:#1b2233; --paper:#fff6e4; --muted:#e6dcc6; --dim:#a9b0c2;
  --gold:#ffc23a; --red:#e2463a; --blue:#4aa8ff; --green:#6fe07a; --orange:#ff8a2e;
  --glass:rgba(22,28,44,.7); --glass2:rgba(22,28,44,.94); --line:rgba(255,236,200,.16);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --ease:cubic-bezier(.2,.9,.25,1.25); --ease-o:cubic-bezier(.16,1,.3,1);
  --disp:"Lilita One",Impact,system-ui,sans-serif; --body:Nunito,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{margin:0;height:100%;overflow:hidden;background:#1b2233;color:var(--paper);font-family:var(--body);font-weight:800;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation;padding:0}
button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* buttons */
.btn{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:0 24px;border-radius:16px;
  font:400 24px/1 var(--disp);letter-spacing:.04em;transition:transform .16s var(--ease),filter .16s;overflow:hidden;white-space:nowrap}
.btn small{font:900 11px/1 var(--body);letter-spacing:.08em;opacity:.75;text-transform:uppercase}
.btn:active{transform:translateY(3px) scale(.96)}
.btn.go{color:#3a1c00;background:linear-gradient(180deg,#ffe58a 0%,#ffc23a 55%,#f0901e 100%);box-shadow:0 5px 0 #8a4a0e,0 12px 26px rgba(255,160,40,.3),inset 0 2px 0 rgba(255,255,255,.75)}
.btn.go::after{content:'';position:absolute;top:-20%;bottom:-20%;width:30%;left:-60%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:shine 3.4s 1s infinite}
@keyframes shine{0%{left:-60%}22%,100%{left:130%}}
.btn.soft{color:var(--paper);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));box-shadow:inset 0 0 0 2px var(--line),0 4px 0 rgba(0,0,0,.35)}
.btn.big{min-height:62px;font-size:32px;padding:0 40px;border-radius:20px}
.btn[disabled]{filter:grayscale(.85) brightness(.75);pointer-events:none}
.coin{display:inline-block;width:18px;height:18px;flex:none;border-radius:50%;vertical-align:-3px;
  background:radial-gradient(circle at 38% 34%,#fff6c0 0 18%,transparent 22%),radial-gradient(circle,#ffd84a 0 52%,#e89a1a 56% 100%);box-shadow:inset 0 0 0 2px #b8680c}
.chip{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:13px;background:var(--glass);box-shadow:inset 0 0 0 1.5px var(--line),0 4px 14px rgba(0,0,0,.25);font:400 20px/1 var(--disp);letter-spacing:.03em;white-space:nowrap}
.chip.cn{color:#ffe7a0}
.chip.bump,.node.bump{animation:bump .35s var(--ease)}
@keyframes bump{40%{transform:scale(1.18)}}
.st{display:inline-block;width:16px;height:16px;flex:none;background:rgba(255,255,255,.2);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.st.on{background:linear-gradient(180deg,#fff2a8,#ffc23a 60%,#f2902a)}
.st.sm{width:12px;height:12px;vertical-align:-1px}
.stars3{display:flex;gap:3px}

.screen{position:fixed;inset:0;opacity:0;pointer-events:none;transition:opacity .25s var(--ease-o)}
.screen.on{opacity:1}
.screen.on .tap{pointer-events:auto}
.screen.full.on{pointer-events:auto;background:rgba(10,14,24,.55)}
.pop{transition:transform .45s var(--ease),opacity .3s}
.screen:not(.on) .pop{transform:translateY(14px) scale(.97);opacity:0}

/* title */
#title{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px;text-align:center;
  padding:calc(var(--sat) + 40px) calc(var(--sar) + 16px) calc(var(--sab) + 18px) calc(var(--sal) + 16px);
  background:linear-gradient(180deg,rgba(27,34,51,0) 0%,rgba(27,34,51,0) 46%,rgba(27,34,51,.9) 100%)}
.logo{position:absolute;top:calc(var(--sat) + 7vh);left:0;right:0;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.logo b{font:400 clamp(54px,min(17vw,13vh),128px)/.9 var(--disp);letter-spacing:.02em;color:#fff1cc;transform:rotate(-3deg);
  text-shadow:0 4px 0 #7a3a10,0 8px 0 #2a160a,0 20px 40px rgba(0,0,0,.45);-webkit-text-stroke:3px #2a160a;paint-order:stroke fill}
.logo b span{color:#ffb52e}
.logo em{margin-top:8px;font:900 13px/1 var(--body);font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:#fff;background:#c2382e;padding:6px 12px;border-radius:6px;transform:rotate(-3deg);box-shadow:0 3px 0 #5a160e}
.tmenu{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:min(420px,100%)}
#tPlay{width:100%}
.tmodes{display:flex;gap:10px}
.mode{flex:1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--glass2);box-shadow:inset 0 0 0 1.5px var(--line),0 4px 0 rgba(0,0,0,.35);text-align:left;min-height:58px}
.mode:active{transform:translateY(2px)}
.mode b{display:block;font:400 18px/1.05 var(--disp);letter-spacing:.03em}
.mode small{display:block;margin-top:3px;font:800 11.5px/1.1 var(--body);color:var(--dim)}
.mode.done small{color:var(--green)}
.mi{width:34px;height:34px;flex:none;border-radius:10px;background:#c2382e;box-shadow:inset 0 0 0 2px rgba(255,255,255,.2)}
.mi.endless{background:#3a5ad8}
.tsmall{display:flex;gap:8px;justify-content:center}
.sq{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px;border-radius:14px;background:var(--glass);box-shadow:inset 0 0 0 1.5px var(--line);font:900 11px/1 var(--body);letter-spacing:.04em;color:var(--muted)}
.sq:active{transform:translateY(2px)}
.si{width:24px;height:24px;border-radius:7px;background:rgba(255,194,58,.5)}
.dot{position:absolute;top:6px;right:12px;width:9px;height:9px;border-radius:50%;background:var(--red)}
.tcoins{position:absolute;top:calc(var(--sat) + 10px);left:50%;transform:translateX(-50%);pointer-events:none}
body.land #title{align-items:flex-end;justify-content:center;padding-top:calc(var(--sat) + 56px);padding-right:calc(var(--sar) + 3vw);
  background:linear-gradient(90deg,rgba(27,34,51,0) 36%,rgba(27,34,51,.85) 100%)}
body.land .logo{position:static;align-items:center;margin-bottom:2px;width:min(420px,46vw)}
body.land .logo b{font-size:clamp(40px,min(8vw,14vh),100px)}
body.land .tmenu{width:min(420px,46vw)}
body.short.land .logo em{display:none}
body.short.land .btn.big{min-height:52px;font-size:26px}
body.short.land .mode{min-height:48px;padding:6px 10px}

/* top bars and panels */
.topbar{position:absolute;top:calc(var(--sat) + 10px);left:calc(var(--sal) + 10px);right:calc(var(--sar) + 10px);display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.screen.on .topbar > *{pointer-events:auto}
.back{width:46px;height:44px;border-radius:14px;background:var(--glass);box-shadow:inset 0 0 0 1.5px var(--line);font:400 34px/1 var(--disp)}
.panel{position:absolute;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg,rgba(44,54,80,.97),rgba(27,34,51,.99));
  box-shadow:inset 0 0 0 1.5px var(--line),0 -10px 40px rgba(0,0,0,.4);border-radius:24px 24px 0 0;
  left:0;right:0;bottom:0;padding:12px calc(var(--sar) + 12px) calc(var(--sab) + 12px) calc(var(--sal) + 12px);max-height:52%}
body.land .panel{left:auto;top:0;width:min(440px,46vw);border-radius:0 0 0 22px;max-height:none;padding-top:calc(var(--sat) + 62px);gap:8px}
body.land .topbar{right:calc(min(440px,46vw) + 10px)}
body.land #map .topbar,body.land #forge .topbar{right:calc(min(440px,46vw) + 10px)}
.ptitle{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 4px}
.ptitle b{font:400 26px/1 var(--disp);letter-spacing:.03em;color:#fff1cc}
.ptitle small{font:800 12.5px/1.2 var(--body);color:var(--dim);text-align:right}
.arrow{width:44px;height:52px;border-radius:13px;flex:none;font:400 30px/1 var(--disp);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px var(--line)}
.arrow[disabled]{opacity:.3}
.rhead{display:flex;align-items:center;gap:8px}
.rname{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;gap:4px}
.rname b{font:400 23px/1 var(--disp);letter-spacing:.03em;color:#fff1cc}
.rname small{font:800 12px/1.2 var(--body);color:var(--dim)}
.nodes{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;align-items:end}
.node{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 4px;border-radius:12px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px var(--line)}
.node b{font:400 17px/1 var(--disp)}
.node .mini{display:flex;gap:1px}
.node .mini i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18)}
.node .mini i.on{background:var(--gold)}
.node.sel{background:rgba(255,194,58,.28);box-shadow:inset 0 0 0 2px var(--gold)}
.node.next{animation:nextp 1.4s infinite}
@keyframes nextp{50%{box-shadow:inset 0 0 0 2px var(--gold),0 0 12px rgba(255,194,58,.5)}}
.node.lock{opacity:.35}
.node.boss b::before{content:'';display:block;width:18px;height:16px;background:#ffc23a;clip-path:polygon(0 100%,0 30%,25% 60%,50% 0,75% 60%,100% 30%,100% 100%)}
.ccard{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;background:rgba(0,0,0,.22)}
.cinfo{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cinfo b{font:400 21px/1 var(--disp);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.threats{display:flex;flex-wrap:wrap;gap:5px}
.th{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:8px;background:rgba(255,255,255,.08);font:800 12px/1 var(--body);color:var(--muted)}
.th.red{background:rgba(226,70,58,.25);color:#ffc8c0}
.th.boss{background:rgba(255,194,58,.22);color:#ffe7a0}
.cbtns{display:flex;gap:8px}
.cbtns .btn.soft{flex:1}
.cbtns .btn.go{flex:2}
.gi{display:inline-block;width:18px;height:18px;border-radius:50% 50% 45% 45%;flex:none;background:radial-gradient(circle at 35% 45%,#fff 0 13%,#1b2233 14% 19%,transparent 20%),radial-gradient(circle at 65% 45%,#fff 0 13%,#1b2233 14% 19%,transparent 20%),linear-gradient(180deg,#9aa3b5 0 34%,#7cc85a 34%);box-shadow:inset 0 0 0 1.5px #2a3a20}

/* forge rows */
.rows{display:flex;flex-direction:column;gap:8px;overflow-y:auto;min-height:0;flex:1;touch-action:pan-y;-webkit-overflow-scrolling:touch;padding-right:2px}
.row{display:flex;align-items:center;gap:10px;padding:8px;border-radius:16px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1.5px var(--line);flex:none}
.row .ic{width:50px;height:50px;flex:none;border-radius:12px;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.14),rgba(0,0,0,.25));display:grid;place-items:center;overflow:hidden}
.row .ic canvas{width:50px;height:50px}
.row .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.row .tx b{font:400 19px/1 var(--disp);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tx b i{font-style:normal;color:var(--gold);margin-left:6px;font-size:15px}
.row .tx small{font:800 12.5px/1.25 var(--body);color:var(--dim)}
.row .tx small em{font-style:normal;color:var(--green)}
.pips{display:flex;gap:3px}
.pips i{width:9px;height:5px;border-radius:2px;background:rgba(255,255,255,.14)}
.pips i.on{background:var(--gold)}
.up{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:84px;height:50px;padding:0 10px;border-radius:13px;flex:none;
  color:#3a1c00;background:linear-gradient(180deg,#ffe58a,#ffc23a 60%,#f0901e);box-shadow:0 4px 0 #8a4a0e;font:400 17px/1 var(--disp);transition:transform .12s var(--ease)}
.up small{font:900 10px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.up:active{transform:translateY(3px)}
.up.no{background:linear-gradient(180deg,#4a5068,#353a50);color:#c2c6d4;box-shadow:0 4px 0 #161a28}
.up.max{background:#283048;color:var(--dim);box-shadow:none}
.up.eq{background:linear-gradient(180deg,#8ad8ff,#4aa8ff);color:#0e2a4a;box-shadow:0 4px 0 #1a4a8a}
.up.buzz{animation:buzz .3s}
@keyframes buzz{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* full-screen sheets (shop, trophies, settings, how to, mode card) */
.sheetc{position:absolute;left:50%;top:calc(var(--sat) + 62px);bottom:calc(var(--sab) + 14px);transform:translateX(-50%);width:min(560px,calc(100% - 24px));display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:24px;
  background:linear-gradient(180deg,#2c3650,#1b2233);box-shadow:inset 0 0 0 1.5px var(--line),0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.sheetc.small{bottom:auto;max-height:calc(100% - var(--sat) - var(--sab) - 76px)}
.tabs{display:flex;gap:6px}
.tab{flex:1;height:40px;border-radius:12px;background:rgba(255,255,255,.07);font:400 18px/1 var(--disp);letter-spacing:.03em;color:var(--dim)}
.tab.on{background:rgba(255,194,58,.25);color:#fff1cc;box-shadow:inset 0 0 0 2px var(--gold)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;overflow-y:auto;touch-action:pan-y;min-height:0}
.item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border-radius:16px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1.5px var(--line)}
.item.on{box-shadow:inset 0 0 0 2px var(--gold)}
.item .pv canvas{width:120px;height:82px}
.item b{font:400 17px/1 var(--disp);letter-spacing:.03em}
.item .up{height:40px;width:100%}
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;flex:none}
.statgrid span{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 2px;border-radius:12px;background:rgba(0,0,0,.25)}
.statgrid small{font:900 9.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);text-align:center}
.statgrid b{font:400 19px/1 var(--disp)}
.trow2{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.05);flex:none}
.trow2 > span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.trow2 b{font:400 16px/1 var(--disp);letter-spacing:.03em}
.trow2 small{font:800 12px/1.2 var(--body);color:var(--dim)}
.trow2 em{font:400 15px/1 var(--disp);font-style:normal;color:#ffe7a0;display:flex;align-items:center;gap:4px}
.trow2.got{background:rgba(111,224,122,.12)}
.trow2.got em{color:var(--green)}
.tro{width:30px;height:30px;flex:none;background:linear-gradient(180deg,#ffe58a,#d8901e);clip-path:polygon(15% 0,85% 0,85% 30%,70% 55%,58% 60%,58% 78%,75% 86%,75% 100%,25% 100%,25% 86%,42% 78%,42% 60%,30% 55%,15% 30%)}
.trow2:not(.got) .tro{background:rgba(255,255,255,.2)}
.bar{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.12);overflow:hidden}
.bar i{display:block;height:100%;background:var(--gold)}
.tog{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.06);font:400 19px/1 var(--disp);letter-spacing:.03em}
.tog em{font-style:normal;min-width:56px;padding:7px 0;border-radius:10px;background:#3a4058;color:var(--dim);text-align:center;font-size:16px}
.tog.on em{background:var(--green);color:#0e2a14}
.howl{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;touch-action:pan-y;font:800 14.5px/1.4 var(--body);color:var(--muted)}
.howl b{color:#fff1cc}
.mc{align-items:center;text-align:center;gap:12px}
.mc .kick{font:900 12px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.mc h3{margin:0;font:400 34px/1 var(--disp);color:#fff1cc}
.twist{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-radius:14px;background:rgba(226,70,58,.2);box-shadow:inset 0 0 0 1.5px rgba(226,70,58,.5);font:800 13px/1.3 var(--body);color:var(--muted)}
.twist b{font:400 20px/1 var(--disp);color:#fff1cc}
.mc p{margin:0;font:800 14px/1.4 var(--body);color:var(--dim);max-width:40ch}
.mc .btn{width:100%}

/* HUD */
#hud{position:fixed;inset:0;pointer-events:none}
.lprog{position:absolute;top:calc(var(--sat) + 16px);left:calc(var(--sal) + 70px);right:calc(var(--sar) + 70px);height:26px;max-width:420px;margin:0 auto}
.ltrack{position:absolute;left:0;right:18px;top:9px;height:9px;border-radius:5px;background:rgba(22,28,44,.72);box-shadow:inset 0 0 0 1.5px var(--line)}
.ltrack i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,#4aa8ff,#ffd23a);width:0}
.lcastle{position:absolute;right:-4px;top:-3px;width:30px;height:30px}
.ldot{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#9aa3b5,#3a4152 70%);box-shadow:0 0 0 2px #fff6e4,0 2px 6px rgba(0,0,0,.4)}
.ammo{position:absolute;top:calc(var(--sat) + 10px);left:50%;transform:translateX(-50%);display:flex;gap:6px}
.ammo .chip{height:42px;font-size:22px;padding:0 11px}
.ammo .chip svg{width:22px;height:22px}
.ammo .chip.low{color:#ffb0a0;box-shadow:inset 0 0 0 2px var(--red)}
.gobs{position:absolute;top:calc(var(--sat) + 60px);left:50%;transform:translateX(-50%);height:34px;font-size:17px;padding:0 12px}
.pts{position:absolute;top:calc(var(--sat) + 10px);right:calc(var(--sar) + 12px);height:42px;flex-direction:column;justify-content:center;gap:2px;padding:0 12px}
.pts small{font:900 9px/1 var(--body);letter-spacing:.14em;color:var(--dim)}
.pts b{font:400 18px/1 var(--disp)}
body:not(.land) .pts{top:calc(var(--sat) + 60px);right:calc(var(--sar) + 12px);height:34px}
body.land .gobs{top:calc(var(--sat) + 10px);left:auto;right:calc(var(--sar) + 14px);transform:none}
body.land .pts{right:calc(var(--sar) + 120px)}
.bossbar{position:absolute;top:calc(var(--sat) + 100px);left:50%;transform:translateX(-50%);width:min(320px,70vw);display:flex;flex-direction:column;align-items:center;gap:4px}
.bossbar b{font:400 15px/1 var(--disp);letter-spacing:.06em;color:#ffd0c0;text-shadow:0 2px 0 #3a0a0a}
.bossbar span{display:block;width:100%;height:12px;border-radius:6px;background:rgba(20,10,10,.75);box-shadow:inset 0 0 0 2px rgba(255,120,90,.5);overflow:hidden}
.bossbar i{display:block;height:100%;background:linear-gradient(180deg,#ff8a6a,#c0322a);transition:width .25s}
body.land .bossbar{top:calc(var(--sat) + 60px)}
.fbtn{position:absolute;bottom:calc(var(--sab) + 18px);width:80px;height:80px;border-radius:50%;pointer-events:auto;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 36%,#4a3a30,#1e1814);box-shadow:inset 0 0 0 2px rgba(255,180,80,.4),0 6px 20px rgba(0,0,0,.45)}
#bombBtn{right:calc(var(--sar) + 16px)}
#rocketBtn{right:calc(var(--sar) + 108px);background:radial-gradient(circle at 50% 36%,#7a2a22,#2a0e0a)}
.fbtn i{width:44px;height:44px;margin-top:-6px;border-radius:50%}
.bic{background:radial-gradient(circle at 36% 34%,#6a5a50,#14100e 70%)}
.ric{background:linear-gradient(135deg,transparent 30%,#e2463a 30% 70%,transparent 70%);border-radius:0 !important}
.fbtn span{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);font:400 15px/1 var(--disp);letter-spacing:.05em;padding:4px 8px;border-radius:8px;background:linear-gradient(180deg,#ffe58a,#ff9a2e);color:#3a1c00;box-shadow:0 3px 0 #8a4a0e;white-space:nowrap}
.fbtn:active{transform:scale(.92)}
#bombBtn.empty{filter:grayscale(1) brightness(.6)}
.call{position:absolute;left:0;right:0;top:34%;text-align:center;font:400 clamp(30px,8vw,56px)/1 var(--disp);letter-spacing:.03em;color:#fff1cc;padding:0 12px;
  -webkit-text-stroke:2px #2a160a;paint-order:stroke fill;text-shadow:0 4px 0 #7a3a10,0 10px 24px rgba(0,0,0,.5);opacity:0;transform:scale(.6)}
.call small{display:block;margin-top:8px;font:900 16px/1.2 var(--body);letter-spacing:.05em;-webkit-text-stroke:0;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.9)}
.call.go{animation:call 1.9s var(--ease-o) forwards}
@keyframes call{0%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1.06)}20%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.tip{position:absolute;left:50%;bottom:calc(var(--sab) + 116px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);padding:11px 16px;border-radius:16px;background:var(--glass2);
  box-shadow:inset 0 0 0 1.5px var(--gold),0 10px 30px rgba(0,0,0,.4);font:800 15px/1.35 var(--body);text-align:center;color:var(--paper);animation:up .35s var(--ease-o)}
.tip b{color:var(--gold)}
body.land .tip{bottom:auto;top:calc(var(--sat) + 58px);max-width:min(560px,calc(100vw - 140px))}
/* portrait cards sit in the sky, clear of the volley, the castle and the thumb */
body:not(.land)[data-mode=lane] .tip{bottom:auto;top:calc(var(--sat) + 56px)}
body:not(.land)[data-mode=siege] .tip{bottom:auto;top:calc(var(--sat) + 102px)}
body.land #rocketBtn{right:calc(var(--sar) + 16px);bottom:calc(var(--sab) + 110px)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}
  .call.go{animation:callStill 1.9s linear forwards !important}
}
@keyframes callStill{0%,85%{opacity:1}100%{opacity:0}}
@keyframes up{from{transform:translate(-50%,40px);opacity:0}}

/* results */
.over{display:flex;align-items:center;justify-content:center;padding:calc(var(--sat) + 16px) calc(var(--sar) + 16px) calc(var(--sab) + 16px) calc(var(--sal) + 16px);background:rgba(10,14,24,.5)}
.over .card{width:min(430px,100%);max-height:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 18px 18px;border-radius:24px;text-align:center;
  background:linear-gradient(180deg,#323d5a,#1b2233);box-shadow:inset 0 0 0 1.5px var(--line),0 20px 60px rgba(0,0,0,.5)}
.over h2{margin:0;font:400 clamp(34px,9vw,46px)/1 var(--disp);letter-spacing:.02em;color:#fff1cc;-webkit-text-stroke:2px #2a160a;paint-order:stroke fill;text-shadow:0 4px 0 #7a3a10}
.over h2.bad{color:#ffb8a8;text-shadow:0 4px 0 #5a1010}
.over .sub{font:800 14px/1.3 var(--body);color:var(--dim);margin-top:-4px}
.bigstars{display:flex;gap:8px}
.bigstars .st{width:44px;height:44px;transform:scale(0);transition:transform .4s var(--ease)}
.bigstars .st.in{transform:scale(1)}
.bigstars .st:nth-child(2){margin-top:-12px}
.dres{display:flex;flex-direction:column;align-items:center;gap:4px}
.dres b{font:400 40px/1 var(--disp);color:#bfe6ff}
.dres small{font:800 13px/1.2 var(--body);color:var(--dim)}
.res3{display:flex;gap:8px;width:100%}
.res3 span{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;border-radius:14px;background:rgba(0,0,0,.28);font:400 22px/1 var(--disp)}
.res3 span small{font:900 10px/1 var(--body);letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.res3 .cv{color:#ffe7a0}
.over .btns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%}
.over .btns .btn{flex:1;min-width:110px}
.over .btns .btn.go{flex-basis:100%}
.note{font:800 13.5px/1.35 var(--body);color:var(--muted);max-width:36ch}
@media (max-height:440px){
  .over .card{gap:7px;padding:12px 16px}
  .bigstars .st{width:32px;height:32px}
  .over h2{font-size:32px}
  .res3 span{padding:7px 4px;font-size:19px}
  .over .btns .btn{min-height:44px;font-size:20px}
  .over .btns .btn.go{flex-basis:auto}
}
.toast{position:fixed;top:calc(var(--sat) + 62px);left:50%;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:var(--glass2);box-shadow:inset 0 0 0 2px var(--gold),0 10px 30px rgba(0,0,0,.5);pointer-events:none}
.toast span{display:flex;flex-direction:column;gap:2px}
.toast small{font:900 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.toast b{font:400 18px/1 var(--disp)}
.toast em{font:400 17px/1 var(--disp);font-style:normal;color:#ffe7a0;display:flex;gap:4px;align-items:center}
.toast.go{animation:toast 2.6s var(--ease-o) forwards}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-20px)}10%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-10px)}}
.note-t{position:fixed;bottom:calc(var(--sab) + 20px);left:50%;transform:translateX(-50%);z-index:60;width:max-content;max-width:calc(100vw - 32px);padding:11px 16px;border-radius:14px;background:var(--glass2);box-shadow:inset 0 0 0 1.5px var(--line);font:800 14px/1.35 var(--body);text-align:center}
#loading{position:fixed;inset:0;display:grid;place-items:center;background:#1b2233;color:#ffc23a;font:400 44px/1 var(--disp);letter-spacing:.06em;z-index:80;transition:opacity .3s}
#loading.off{opacity:0;pointer-events:none}
#err{position:fixed;left:12px;right:12px;bottom:calc(var(--sab) + 12px);z-index:99;padding:12px;border-radius:12px;background:#5a1414;color:#fff;font:800 14px/1.3 var(--body);text-align:center}

/* ===== UI pass: icons, map trail, results ribbon, switches, transitions ===== */
.ico{width:24px;height:24px;flex:none;display:inline-block;vertical-align:middle;overflow:visible}
.back,.arrow{display:grid;place-items:center;color:#fff6e4}
.back .ico{width:22px;height:22px}
.arrow .ico{width:22px;height:22px}
.arrow.flip .ico{transform:scaleX(-1)}
.btn:active,.mode:active,.sq:active,.back:active,.arrow:active,.node:active,.tog:active{transition-duration:.05s}
/* title */
.mi{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(180deg,#ff7a5a,#c2382e);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),0 3px 0 #5a160e}
.mi.endless{background:linear-gradient(180deg,#7ab4ff,#3a5ad8);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),0 3px 0 #1a2a6a}
.mi .ico{width:28px;height:28px}
.mode{transition:transform .14s var(--ease)}
.mode.done .mi{filter:saturate(.6)}
.mode.done small::before{content:'✔ ';color:var(--green)}
.sq{gap:5px;padding:9px 2px 8px;background:linear-gradient(180deg,rgba(44,54,80,.9),rgba(27,34,51,.92));box-shadow:inset 0 0 0 1.5px var(--line),0 3px 0 rgba(0,0,0,.35);color:#fff1cc;font-size:11.5px;transition:transform .14s var(--ease)}
.sq .si{width:28px;height:28px}
#tPlay{gap:4px}
#tPlay small{font-size:12px;letter-spacing:.1em}
.tcoins{box-shadow:inset 0 0 0 1.5px rgba(255,194,58,.35),0 4px 14px rgba(0,0,0,.25)}
/* map: region header + winding trail */
#mapPanel{--rc:#e2463a}
.rhead{position:relative;padding:2px 0 4px}
.rname{gap:3px}
.rname .rk{font:900 10.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--rc);filter:brightness(1.5) saturate(.8)}
.rname b{font-size:25px;text-shadow:0 3px 0 rgba(0,0,0,.35)}
.rprog{display:flex;align-items:center;gap:8px;padding:0 4px}
.rprog span{flex:1;height:8px;border-radius:4px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden}
.rprog span i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffe58a,#ffc23a);border-radius:4px;transition:width .5s var(--ease-o)}
.rprog em{display:flex;align-items:center;gap:4px;font:400 15px/1 var(--disp);font-style:normal;color:#ffe7a0}
.trail{position:relative;padding:2px 2px}
.tpath{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tpath path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.tpath .bed{stroke:rgba(0,0,0,.35);stroke-width:12}
.tpath .dash{stroke:rgba(255,236,200,.35);stroke-width:3;stroke-dasharray:2 9}
.tpath .done{stroke:#ffc23a;stroke-width:4;stroke-dasharray:2 9}
.nodes{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 4px;justify-items:center;align-items:center}
.node{width:50px;height:50px;padding:0;border-radius:50%;justify-content:center;gap:0;background:radial-gradient(circle at 50% 35%,#4a5674,#232b42);box-shadow:inset 0 0 0 2.5px rgba(255,236,200,.28),0 4px 0 rgba(0,0,0,.4);transition:transform .16s var(--ease)}
.node b{font-size:19px;line-height:1;margin-top:-2px;text-shadow:0 2px 0 rgba(0,0,0,.4)}
.node .mini{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);gap:1px;padding:2px 3px;border-radius:7px;background:#1b2233;box-shadow:inset 0 0 0 1px var(--line)}
.node .mini i{width:7px;height:7px;border-radius:0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.node.done{background:radial-gradient(circle at 50% 35%,#5a7a52,#2a3e2a);box-shadow:inset 0 0 0 2.5px rgba(150,230,140,.45),0 4px 0 rgba(0,0,0,.4)}
.node.sel{transform:scale(1.12);background:radial-gradient(circle at 50% 35%,#ffe58a,#d8901e);color:#3a1c00;box-shadow:inset 0 0 0 2.5px #fff2b8,0 4px 0 #8a4a0e,0 0 18px rgba(255,194,58,.5)}
.node.sel b{text-shadow:none}
.node.next:not(.sel){animation:nextp 1.4s infinite}
@keyframes nextp{50%{box-shadow:inset 0 0 0 2.5px var(--gold),0 4px 0 rgba(0,0,0,.4),0 0 16px rgba(255,194,58,.65)}}
.node.lock{opacity:1;background:radial-gradient(circle at 50% 35%,#343a4e,#1e2232);color:#6a7088}
.node.lock .ico{width:22px;height:22px;opacity:.55}
.node.boss{width:58px;height:58px;background:radial-gradient(circle at 50% 35%,#a84a3a,#4a1a14);box-shadow:inset 0 0 0 2.5px rgba(255,194,58,.6),0 4px 0 rgba(0,0,0,.45)}
.node.boss.sel{background:radial-gradient(circle at 50% 35%,#ffb07a,#c0322a);box-shadow:inset 0 0 0 2.5px #ffe58a,0 4px 0 #5a160e,0 0 20px rgba(255,120,60,.55)}
.node.boss b::before{display:none}
.node.boss .ico{width:32px;height:32px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}
.ccard{background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.3));box-shadow:inset 0 0 0 1.5px var(--line)}
.th .ico{width:14px;height:14px}
.th .fl{width:8px;height:10px;background:#e2463a;clip-path:polygon(0 0,100% 30%,0 60%);margin-right:1px}
.th .tn{font:400 10px/1 var(--disp);padding:2px 3px;border-radius:3px;background:#c0322a;color:#fff6e4}
body.land .nodes{gap:6px 2px}
body.short.land .node{width:44px;height:44px}
body.short.land .node.boss{width:50px;height:50px}
body.short.land .rname b{font-size:21px}
body.short.land #mapPanel{gap:6px}
body.short.land .ccard{padding:8px;gap:6px}
body.short.land .cbtns .btn{min-height:44px;font-size:21px}
/* forge */
.ptitle{padding:2px 4px 4px}
.row{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03))}
.row .ic{background:radial-gradient(circle at 50% 35%,#4a5674,#1e2436);box-shadow:inset 0 0 0 1.5px var(--line)}
/* settings switches */
.tog{gap:12px}
.tog span{flex:1;text-align:left}
.tog em{display:none}
.sw{position:relative;width:54px;height:30px;border-radius:15px;background:#3a4058;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);transition:background .2s}
.sw i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#c8ccd8;box-shadow:0 2px 0 rgba(0,0,0,.3);transition:transform .22s var(--ease),background .2s}
.tog.on .sw{background:#4caf5a}
.tog.on .sw i{transform:translateX(24px);background:#fff6e4}
/* daily / endless card */
.mcA,.mcB{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.mcI{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(180deg,#ff7a5a,#c2382e);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),0 4px 0 #5a160e}
.mcI.endless{background:linear-gradient(180deg,#7ab4ff,#3a5ad8);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),0 4px 0 #1a2a6a}
.mcI .ico{width:38px;height:38px}
.mc .res3 span{padding:9px 4px}
body.land .sheetc.mc{display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:18px;width:min(720px,calc(100% - 24px));text-align:left}
body.land .mc .mcA{align-items:flex-start}
body.land .mc .mcA .mcI{display:none}
body.land .mc p{max-width:none}
body.short.land .sheetc{top:calc(var(--sat) + 58px);bottom:calc(var(--sab) + 8px);padding:12px 14px}
body.short.land .sheetc.small{bottom:auto;max-height:calc(100% - var(--sat) - var(--sab) - 66px)}
body.short.land .mc h3{font-size:28px}
body.short.land .mc .twist{padding:7px 10px}
body.short.land .mc p{font-size:13px}
/* scroll lists fade at the bottom so they read as scrollable */
.rows,.grid,.howl{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent);padding-bottom:16px}
/* HUD */
.chip .ico{width:22px;height:22px}
.ammo .chip.hit{animation:hitc .5s}
@keyframes hitc{0%,100%{transform:none}20%{transform:translateX(-5px);color:#ff8a7a;box-shadow:inset 0 0 0 2px var(--red)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.ammo .chip.gain{animation:bump .35s var(--ease)}
.bossbar b{display:flex;align-items:center;gap:6px;font-size:16px}
.bossbar b .ico{width:20px;height:20px}
.bossbar span{height:14px;border-radius:7px}
.fbtn .fi{width:46px;height:46px;margin-top:-8px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}
#rocketBtn{animation:rpulse 1.6s infinite}
@keyframes rpulse{50%{box-shadow:inset 0 0 0 2px rgba(255,180,80,.6),0 6px 20px rgba(0,0,0,.45),0 0 22px rgba(255,90,60,.55)}}
.lprog .ltrack{height:10px;top:8px;border-radius:6px}
/* results */
.over .card{padding-top:26px;overflow:visible}
.ribbon{position:relative;margin:-48px -26px 0;padding:10px 30px 12px;background:linear-gradient(180deg,#ffb52e,#e2781e);border-radius:14px;box-shadow:0 5px 0 #8a4a0e,0 14px 30px rgba(0,0,0,.35);transform:rotate(-1.5deg)}
.ribbon::before,.ribbon::after{content:'';position:absolute;top:14px;width:22px;height:100%;background:#b8520e;z-index:-1}
.ribbon::before{left:-12px;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,40% 50%)}
.ribbon::after{right:-12px;clip-path:polygon(0 0,100% 0,60% 50%,100% 100%,0 100%)}
.ribbon h2{font-size:clamp(30px,8vw,40px);color:#fff6e4;text-shadow:0 3px 0 #7a3a10}
.ribbon.bad{background:linear-gradient(180deg,#7a8098,#4a5068);box-shadow:0 5px 0 #1e2232,0 14px 30px rgba(0,0,0,.35)}
.ribbon.bad::before,.ribbon.bad::after{background:#2e3246}
.ribbon.bad h2{color:#ffe0d8;text-shadow:0 3px 0 #1e2232}
.over .sub{margin-top:2px}
.res3 .cv{display:flex;align-items:center;gap:5px}
.bigstars .st{width:50px;height:50px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
.bigstars .st.on.in{animation:starpop .5s var(--ease)}
@keyframes starpop{0%{transform:scale(0) rotate(-40deg)}60%{transform:scale(1.3) rotate(8deg)}100%{transform:scale(1)}}
.newbest{font:400 17px/1 var(--disp);letter-spacing:.04em;color:#bff07a;padding:6px 12px;border-radius:10px;background:rgba(111,224,122,.14);animation:bump .5s .9s var(--ease) both}
body[data-mode=res] .toast,body[data-mode=fail] .toast{top:auto;bottom:calc(var(--sab) + 14px)}
@media (max-height:440px){.ribbon{margin-top:-30px;padding:6px 24px 8px}.ribbon h2{font-size:28px}.over .card{padding-top:16px}}
/* screen wipe between menus and a run */
#wipe{position:fixed;inset:0;z-index:70;pointer-events:none;background:radial-gradient(circle at 50% 55%,transparent 0,transparent var(--r,0px),#141a2a calc(var(--r,0px) + 2px));opacity:0}
#wipe.go{animation:wipe .62s var(--ease-o)}
@keyframes wipe{0%{opacity:0}35%,55%{opacity:1}100%{opacity:0}}
.screen.full .sheetc{animation:sheetin .32s var(--ease-o)}
@keyframes sheetin{from{transform:translate(-50%,24px);opacity:0}}
.panel{transition:transform .32s var(--ease-o)}
.screen:not(.on) .panel{transform:translateY(30px)}
body.land .screen:not(.on) .panel{transform:translateX(40px)}
/* short portrait phones (SE, small Androids): compact map and forge panels so every button stays on screen */
@media (max-height:760px) and (orientation:portrait){
  .panel{max-height:64%;gap:7px;padding-top:10px}
  .node{width:42px;height:42px}.node b{font-size:16px}
  .node.boss{width:48px;height:48px}.node.boss .ico{width:26px;height:26px}
  .nodes{gap:9px 2px}
  .rname b{font-size:21px}#mBlurb{display:none}
  .arrow{height:44px;width:40px}
  .ccard{padding:8px;gap:6px}.cinfo b{font-size:18px}
  .cbtns .btn{min-height:46px;font-size:21px}
  .th{padding:3px 6px;font-size:11px}
}
/* landscape results: the trophy toast goes to the top-right corner, clear of the card's buttons */
body.land[data-mode=res] .toast,body.land[data-mode=fail] .toast{top:calc(var(--sat) + 10px);bottom:auto;left:auto;right:calc(var(--sar) + 12px);transform:none}
body.land[data-mode=res] .toast.go,body.land[data-mode=fail] .toast.go{animation-name:toast2}
@keyframes toast2{0%{opacity:0;transform:translateY(-14px)}10%,85%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}