/* ================= v2: game screens (cartoon UI) ================= */
.game{position:relative;aspect-ratio:16/9;min-height:340px;border-radius:18px;overflow:hidden;border:4px solid #17141f;background:#03040a;box-shadow:0 10px 40px rgba(0,0,0,.5);user-select:none;touch-action:none}
.gcv{position:absolute;inset:0;width:100%;height:100%;display:block}
.loading{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:800;letter-spacing:3px;background:#03040a;z-index:20}
.g-tl{position:absolute;left:12px;top:10px;z-index:5;width:min(330px,44%)}
.g-tr{position:absolute;right:12px;top:10px;z-index:5;display:flex;gap:8px;align-items:flex-start}
.g-br{position:absolute;right:14px;bottom:10px;z-index:6;display:flex;gap:6px;align-items:flex-end}
.g-bc{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:6}
.hcard{background:rgba(10,12,24,.82);border:3px solid #17141f;border-radius:14px;padding:6px 14px;color:#fff;display:flex;flex-direction:column}
.hcard small{font-size:11px;color:#a9b4cc;font-weight:700;letter-spacing:1px}.hcard.right{text-align:right}
.code{font:900 24px/1.1 monospace;letter-spacing:4px;color:#ffd34d}
.ib{background:rgba(10,12,24,.7);border:3px solid #17141f;border-radius:14px;padding:3px;cursor:pointer;line-height:0;transition:.12s}.ib:hover{transform:scale(1.08)}
.gb b,.startbtn,.gtimer,.roomtoast{paint-order:stroke fill;-webkit-text-stroke:5px #17141f}
.gb{background:none;border:0;padding:0;cursor:pointer;display:inline-grid;justify-items:center;align-content:end;height:auto;position:relative;transition:transform .1s,opacity .15s;font-family:system-ui,sans-serif;color:#fff}
.gb .ic{display:block;line-height:0;filter:drop-shadow(0 5px 0 rgba(0,0,0,.45))}.gb .ic svg{display:block}
.gb b{position:relative;z-index:1}
.gb b{font-size:17px;font-weight:900;color:#fff;letter-spacing:.5px;margin-top:-8px;white-space:nowrap}
.gb:hover:not(:disabled){transform:scale(1.07)}.gb:active:not(:disabled){transform:scale(.94)}
.gb:disabled{opacity:.3;filter:grayscale(.9);cursor:default}
.gb.main .ic svg{width:112px;height:112px}.gb.sm .ic svg{width:64px;height:64px}.gb.sm b{font-size:14px}
.gb.emerg b,.gb.sab b{color:#ff5d6e}.gb.repair b{color:#ffb347}.gb.fake b{color:#c9a9ff}.gb.dist b{color:#ffcf5e}
.gb.emerg:not(:disabled) .ic,.gb.repair:not(:disabled) .ic{animation:pulseS .9s infinite}@keyframes pulseS{50%{transform:scale(1.08)}}
.gb.cd::before{content:"";position:absolute;left:50%;top:6px;width:76px;height:76px;margin-left:-38px;border-radius:50%;background:conic-gradient(rgba(5,6,12,.78) calc(var(--p,0)*1%),transparent 0);z-index:2}
.gb.sm.cd::before{width:58px;height:58px;margin-left:-29px;top:4px}
.cdn{position:absolute;left:50%;top:42px;transform:translate(-50%,-50%);font:900 32px system-ui;color:#fff;-webkit-text-stroke:5px #17141f;paint-order:stroke fill;z-index:3}
.gb.sm .cdn{top:32px;font-size:24px}.gb.cd:disabled{opacity:.9;filter:none}
.alcol{display:flex;flex-direction:column;align-items:center;gap:2px}
.startbtn{font:900 30px system-ui;color:#fff;background:linear-gradient(#5ef08a,#22a64a);border:4px solid #17141f;border-radius:16px;padding:4px 36px;cursor:pointer;box-shadow:0 6px 0 #17141f}
.startbtn:hover{transform:translateY(-2px)}.startbtn:active{transform:translateY(3px);box-shadow:0 2px 0 #17141f}
.tbar{background:rgba(10,12,24,.85);border:3px solid #17141f;border-radius:12px;padding:3px 8px 6px}
.tbar b{display:block;font:900 12px system-ui;color:#fff;letter-spacing:.5px;paint-order:stroke fill;-webkit-text-stroke:3px #17141f}
.tfill{height:18px;background:#1d2a20;border:3px solid #17141f;border-radius:6px;overflow:hidden;position:relative}
.tfill i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(#6df58e,#2fbf4a);transition:width .8s cubic-bezier(.2,.9,.3,1.2)}
.tfill i::after{content:"";position:absolute;left:4px;right:4px;top:2px;height:4px;background:rgba(255,255,255,.45);border-radius:3px}
.tbar.locked .tfill i{background:repeating-linear-gradient(45deg,#ff3b4e 0 10px,#7a1220 10px 20px)}
.tasktab{margin-top:5px;display:inline-flex;gap:6px;align-items:center;background:rgba(10,12,24,.85);border:3px solid #17141f;border-radius:10px;padding:2px 10px 2px 5px;color:#fff;cursor:pointer;font:900 13px system-ui}
.tasktab span{paint-order:stroke fill;-webkit-text-stroke:3px #17141f}.tasktab em{font-style:normal;transition:.2s}
.tlist{margin-top:4px;background:rgba(10,12,24,.75);border:3px solid #17141f;border-radius:10px;padding:5px 10px;font:700 12px/1.35 system-ui;color:#fff;max-height:220px;overflow:auto}
.tlist p{margin:2px 0}.tlist p.d{color:#5ef08a}.tlist p.al{color:#ff5d6e;font-weight:900}.tlist p.sb{color:#ff5d6e;animation:pulse .8s infinite}
.g-tl.closed .tlist{display:none}.g-tl.closed .tasktab em{transform:rotate(-90deg)}
.gtimer{font:900 22px system-ui;color:#fff;background:rgba(10,12,24,.82);border:3px solid #17141f;border-radius:12px;padding:6px 12px;-webkit-text-stroke:4px #17141f}
.gtimer.low{color:#ff5d6e;animation:pulse .8s infinite}
.roomtoast{position:absolute;left:50%;top:16%;transform:translateX(-50%);z-index:4;font:900 34px system-ui;letter-spacing:2px;opacity:0;pointer-events:none;-webkit-text-stroke:7px #17141f;white-space:nowrap}
.roomtoast.on{animation:toast 2.4s}@keyframes toast{0%{opacity:0;transform:translate(-50%,10px)}15%,70%{opacity:1;transform:translate(-50%,0)}100%{opacity:0}}
.game .joy{position:absolute;left:18px;bottom:18px;width:130px;height:130px;border-radius:50%;background:rgba(10,12,24,.45);border:4px solid rgba(23,20,31,.8);z-index:6;touch-action:none}
.joy i{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#aab4c8);border:4px solid #17141f}
@media (pointer:fine){.game .joy{display:none}}
.control-pad{display:none;position:absolute;left:18px;bottom:18px;z-index:7;width:142px;height:142px;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,42px);gap:4px;touch-action:none}.control-pad button{border:0;background:rgba(12,22,53,.9);color:#7ff6ff;font:700 20px var(--px);box-shadow:inset 0 0 0 2px #5272be,inset 0 -5px 0 rgba(0,0,0,.3);touch-action:none}.control-pad button.pressed{transform:translateY(2px);background:#234781}.control-pad button[data-direction=up]{grid-column:2}.control-pad button[data-direction=left]{grid-column:1;grid-row:2}.control-pad button[data-direction=down]{grid-column:2;grid-row:2}.control-pad button[data-direction=right]{grid-column:3;grid-row:2}.controls-buttons .game .joy{display:none!important}.controls-buttons .game .control-pad{display:grid}
.joy.demo{position:relative;width:110px;height:110px;border-radius:50%;background:rgba(10,12,24,.6);border:4px solid #17141f;margin:auto}
.minimap{position:absolute;inset:0;z-index:12;background:rgba(3,4,10,.6);display:grid;place-items:center}
.mm-in{position:relative;width:64%;background:#1d2236;border:5px solid #17141f;border-radius:18px;padding:12px;box-shadow:0 0 0 4px #4a5270 inset}
.mm-in canvas{width:100%;display:block}
.mmx{position:absolute;right:-14px;top:-14px;width:40px;height:40px;border-radius:50%;background:#e5383b;color:#fff;border:4px solid #17141f;font:900 18px system-ui;cursor:pointer}
.mm-leg{display:flex;gap:10px;align-items:center;color:#fff;font:700 12px system-ui;margin-top:6px}.mm-leg i{width:12px;height:12px;border-radius:50%;display:inline-block;border:2px solid #17141f}
.sabmenu{position:absolute;right:130px;bottom:190px;z-index:9;background:#1a0a12;border:4px solid #17141f;box-shadow:0 0 0 3px #ff3b4e inset;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:6px;animation:pop .2s}
.sabmenu h4{margin:0 0 2px;color:#ff5d6e;font:900 14px system-ui;letter-spacing:2px}
.sabmenu button{background:#3a0f1c;color:#ffd0d6;border:3px solid #17141f;border-radius:10px;padding:8px 12px;font:800 13px system-ui;cursor:pointer;text-align:left}.sabmenu button:hover{background:#5a1528}
.game .banner{top:62px;border-width:4px;font:800 16px/1.25 system-ui;padding:6px 18px;max-width:56%;border-color:#17141f}.game .banner small{font-size:12px;font-weight:600}.game .banner[data-slot=side]{top:120px}
.gb.main{min-width:124px}
.game .repair,.custom{position:absolute;inset:0;z-index:14;background:rgba(3,4,10,.65);display:grid;place-items:center}
.rbox,.cbox{background:linear-gradient(#4a5270,#2a3047);border:5px solid #17141f;box-shadow:0 0 0 3px #7f89a8 inset;border-radius:20px;color:#fff}
.rbox{padding:20px 30px;text-align:center;display:grid;justify-items:center;gap:10px}.rbox h3{margin:0;font:900 22px system-ui}
.holdbtn{width:130px;height:130px;border-radius:50%;border:5px solid #17141f;background:radial-gradient(circle at 35% 30%,#ffb347,#c25d0e);color:#fff;font:900 18px system-ui;cursor:pointer;position:relative;user-select:none}
.holdbtn::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:conic-gradient(#5ef08a calc(var(--p,0)*1%),rgba(0,0,0,.3) 0);-webkit-mask:radial-gradient(circle,transparent 68px,#000 69px);mask:radial-gradient(circle,transparent 68px,#000 69px)}
.cbox{padding:16px 20px;display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center;max-width:94%}
.cbox h3{grid-column:1/-1;margin:0;font:900 22px system-ui;letter-spacing:2px}.cbox small{font-weight:800;color:#c5cde0;letter-spacing:1px}.cbox .btn{grid-column:1/-1;justify-self:end}
.cprev{background:#171b2b;border:4px solid #17141f;border-radius:14px;padding:8px;width:150px;min-height:188px;justify-self:center}.cprev svg{width:100%;display:block}
.cbox{max-height:94%;overflow:auto}.acc svg{width:100%;display:block}
.cbox .swatches{display:grid;grid-template-columns:repeat(8,30px);gap:6px;margin:4px 0 10px}
.cbox .sw{width:30px;height:30px;border-radius:8px;border:3px solid #17141f;cursor:pointer}.cbox .sw.on{outline:3px solid #fff}.cbox .sw:disabled{opacity:.25;cursor:default}
.accs{display:flex;gap:6px;flex-wrap:wrap}.acc{width:62px;background:#171b2b;border:3px solid #17141f;border-radius:10px;padding:2px;cursor:pointer;color:#fff;font:700 10px system-ui}.acc.on{outline:3px solid #ffd34d}.acc span{display:block}
.kit{gap:22px}.kit figure{min-width:96px;display:flex;flex-direction:column;align-items:center;gap:6px}
.ov{padding:8px}.ov canvas{width:100%;display:block;border-radius:12px}
.sheet .it .sp{display:flex;justify-content:center;align-items:flex-end;gap:4px;height:110px}.sheet .it .sp svg{max-height:104px;width:auto;max-width:32%}
.sheet .it svg.hl{filter:drop-shadow(0 0 5px #ffe14d) drop-shadow(0 0 2px #ffe14d)}.sheet .it svg.br{filter:drop-shadow(0 0 5px #ff3b4e) drop-shadow(0 0 2px #ff3b4e)}
.tsp{height:90px;display:flex;align-items:flex-end}.tsp svg{height:90px;width:auto}
.game .flash{position:absolute;inset:0;z-index:7;pointer-events:none;background:#ff1f3d;opacity:0}
.mbox{background:linear-gradient(#5a6380,#363d57);border:5px solid #17141f;box-shadow:0 0 0 3px #7f89a8 inset,0 20px 60px rgba(0,0,0,.6);border-radius:22px}
.mbox::before,.mbox::after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#2a3047;border:3px solid #17141f;top:12px}.mbox::before{left:12px}.mbox::after{right:52px}
.mbody{background:#0d1226;border:4px solid #17141f;border-radius:14px;padding:14px;box-shadow:inset 0 0 30px rgba(0,0,0,.6)}
.mtitle{-webkit-text-stroke:4px #17141f;paint-order:stroke fill;font-weight:900;color:#fff}
.mbox .x{background:#e5383b;color:#fff;border:3px solid #17141f;border-radius:50%;width:34px;height:34px;font-weight:900;right:10px;top:8px;font-size:14px}
.mgoal,.mfoot{color:#dfe5f3}.mfoot{border-top-color:#17141f}
.walkanim{position:relative;aspect-ratio:124/166;width:100%}.walkanim>svg{position:absolute;inset:0;opacity:0;animation:frm .6s steps(1) infinite}
@keyframes frm{0%{opacity:1}16.6%,100%{opacity:0}}
.flip .walkanim>svg{transform:scaleX(-1)}
.skin .astro{width:76px}.bigwalk{width:160px}.walkTrack{height:180px}.walkTrack .w{width:100px}
@media(max-width:760px){.gb.main .ic svg{width:80px;height:80px}.gb .ic svg{width:66px;height:66px}.gb.sm .ic svg{width:50px;height:50px}.gb b{font-size:13px}.roomtoast{font-size:22px}.g-tl{width:52%}.gtimer{font-size:16px}.cbox{grid-template-columns:1fr}}