:root{--ink: #14100c;--panel: rgba(20, 14, 9, .88);--panel-line: #6b4f2a;--gold: #d9a441;--red: #a03028;--text: #f0e6d2;--dim: #b8a888;--blue: #3d7ac0;--panel-soft: rgba(20, 14, 9, .78)}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;font-family:Noto Sans Thai,system-ui,sans-serif;background:var(--ink);color:var(--text)}#app{position:fixed;inset:0}#app canvas{display:block;touch-action:none}body{overscroll-behavior:none}.hidden{display:none!important}#selbox{display:none;position:fixed;border:1px solid var(--gold);background:#e9c14a1f;pointer-events:none;z-index:45}#touchbar{position:fixed;bottom:8px;left:50%;transform:translate(-50%);display:flex;gap:10px;z-index:35}body:not(.touch) #touchbar{display:none!important}.tb-group{display:flex;gap:3px;background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;padding:4px}.btn.tb{width:44px;height:42px;padding:0;font-size:17px;display:flex;align-items:center;justify-content:center}.btn.tb.active{background:var(--gold);color:#241a08}.btn{font-family:inherit;background:#2a2015;color:var(--text);border:1px solid var(--panel-line);border-radius:8px;padding:8px 14px;font-size:14px;cursor:pointer;transition:background .15s,transform .05s}.btn:hover{background:#3a2c1c}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}.btn.primary{background:var(--red);border-color:#d9a441;font-weight:700}.btn.primary:hover{background:#c03e34}.btn.danger{border-color:#a03028;color:#ffb0a8}.btn.big{font-size:17px;padding:12px 26px}.btn.active{background:var(--gold);color:#241a08;font-weight:700}.row{display:flex;gap:12px;justify-content:center}.overlay{position:fixed;inset:0;background:#080503b8;display:flex;align-items:center;justify-content:center;z-index:50}.modal{background:var(--panel);border:2px solid var(--panel-line);border-radius:14px;padding:28px 32px;max-width:640px;max-height:86vh;overflow-y:auto;box-shadow:0 20px 60px #0009}.modal-title{font-size:26px;font-weight:700;color:var(--gold);margin-bottom:4px}.modal-sub{color:var(--dim);margin-bottom:14px}.modal p{margin:10px 0;line-height:1.55}.modal ul{margin:10px 0 10px 4px;list-style:none}.modal li{margin:8px 0;line-height:1.5;padding-left:4px}.modal .dim{color:var(--dim);font-size:13px}.modal .big{margin-top:14px;width:100%}.end-stats{margin:16px 0;border:1px solid var(--panel-line);border-radius:10px;padding:12px 16px;line-height:1.9;background:#00000040}.hud-top{position:fixed;top:8px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;height:44px;padding:4px 6px 4px 12px;background:var(--panel-soft);border:1px solid var(--panel-line);border-radius:10px;z-index:30}.hud-timer{font-size:15px;font-weight:700;min-width:58px;font-variant-numeric:tabular-nums;cursor:help}.hud-gates{display:flex;gap:5px}.gate-pip,.hud-palace{display:flex;align-items:center;gap:5px;padding:3px 7px;border-radius:7px;background:#00000047;cursor:help}.gi{font-size:14px;line-height:1}.pipbar{width:32px;height:5px;background:#000;border-radius:3px;overflow:hidden}.pipbar>div{height:100%;width:100%;background:linear-gradient(90deg,#8a6a3a,#d9a441);transition:width .25s}.gate-pip.hit .pipbar>div{background:linear-gradient(90deg,#b52e2e,#e56a3a);box-shadow:0 0 6px #e56a3acc}.gate-pip.open{background:#b0303061;box-shadow:inset 0 0 0 1px #e878648c}.gate-pip.open .pipbar>div{width:0!important}.pipbar.wide{width:84px;height:7px}.hud-palace .pipbar>div{width:0;background:linear-gradient(90deg,#d9a441,#d0453a)}.hud-palace b{font-size:13px;min-width:36px;color:var(--gold);font-variant-numeric:tabular-nums}.hud-palace.contest{box-shadow:inset 0 0 0 1px #d0453acc}.hud-palace.contest b{color:#ff9b86}.hud-speed{display:flex;gap:3px}.hud-speed .btn{padding:4px 8px;font-size:12px}.btn.icon{font-weight:700;letter-spacing:.05em}.hud-menu{position:absolute;top:50px;right:0;display:flex;flex-direction:column;min-width:200px;padding:4px;background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;box-shadow:0 10px 28px #00000080}.menu-item{font:inherit;font-size:13px;text-align:left;color:var(--text);background:none;border:0;border-radius:6px;padding:7px 10px;cursor:pointer}.menu-item:hover,.menu-item:focus-visible{background:#3a2c1c;outline:none}.menu-item:disabled{opacity:.4;cursor:not-allowed;background:none}.menu-item.danger{color:#ffb0a8}#minimap-wrap{position:fixed;left:12px;bottom:12px;width:190px;height:190px;border:1px solid var(--panel-line);border-radius:10px;overflow:hidden;background:#0e0a07d6;box-shadow:0 8px 22px #00000073;z-index:30}#minimap{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}#minimap-wrap.collapsed{width:30px;height:30px}#minimap-wrap.collapsed #minimap,#minimap-wrap.collapsed .minimap-tip{display:none}.mini-toggle{position:absolute;right:4px;top:4px;height:22px;padding:0 7px;font-size:11px;line-height:20px;opacity:.8}#minimap-wrap.collapsed .mini-toggle{right:3px;top:3px}.minimap-tip{position:absolute;left:6px;right:6px;bottom:6px;padding:4px 7px;border-radius:6px;background:#0a0705eb;border:1px solid var(--panel-line);font-size:11px;line-height:1.45;pointer-events:none}.cmd-bar{position:fixed;left:50%;bottom:12px;transform:translate(-50%);width:min(640px,calc(100vw - 440px));display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:7px 10px 7px 14px;background:var(--panel-soft);border:1px solid var(--panel-line);border-radius:10px;z-index:30}.cmd-info{display:flex;flex-direction:column;flex:1;min-width:0}.cmd-info b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tactical-status{color:var(--dim);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tactical-status.warn{color:#ffad72}.cmd-controls{display:flex;align-items:center;flex-wrap:wrap;gap:5px}.cmd-controls select{font:inherit;font-size:12px;color:var(--text);background:#241b12;border:1px solid var(--panel-line);border-radius:6px;padding:4px 5px}.btn.cmd{padding:5px 9px;font-size:12px;white-space:nowrap}.group-bar{position:fixed;left:12px;bottom:210px;display:flex;flex-wrap:wrap;gap:4px;max-width:190px;z-index:30}.group-bar:empty{display:none}#minimap-wrap.collapsed+.group-bar{bottom:50px}.gchip{font:inherit;font-size:12px;font-weight:700;color:var(--text);display:inline-flex;align-items:baseline;gap:3px;padding:2px 7px;border-radius:6px;background:var(--panel-soft);border:1px solid var(--panel-line);cursor:pointer;touch-action:manipulation}.gchip small{font-size:10px;font-weight:400;color:var(--dim)}.gchip.active{border-color:var(--gold);color:#ffe27a}.gchip.add{border-style:dashed;color:var(--dim)}.gchip:hover,.gchip:focus-visible{background:#3a2c1c;outline:none}.ability-bar{position:fixed;right:12px;bottom:16px;display:flex;gap:8px;z-index:30}.ability-slot{position:relative;width:66px;height:66px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid var(--panel-line);border-radius:10px;background:var(--panel-soft);color:var(--text);cursor:pointer;font:inherit;padding:0}.ability-slot:hover:not(:disabled),.ability-slot:focus-visible{border-color:var(--gold);outline:none}.ability-slot:disabled{cursor:not-allowed;opacity:.55}.ability-slot kbd{position:absolute;top:3px;left:5px;font:700 10px/1 inherit;color:var(--dim)}.ability-slot .ic{font-size:22px;line-height:1}.ability-slot .nm{font-size:9.5px;color:var(--dim);line-height:1.2}.ability-slot .cd-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}.ability-slot.cooling .cd-ring{display:block}.ability-slot .cd-ring circle{fill:none;stroke:#0009;stroke-width:34;stroke-dasharray:100.5;transform:rotate(-90deg);transform-origin:50% 50%}.ability-slot .cd-num{display:none;position:absolute;font:700 16px/1 inherit;color:#fff4d6}.ability-slot.cooling .cd-num{display:block}.ability-slot.cooling .ic,.ability-slot.cooling .nm{opacity:.25}.ability-slot .charge-num{position:absolute;bottom:2px;right:4px;font:700 12px/1 inherit;color:#f0d27a}.ability-slot.no-charge .charge-num{color:var(--dim)}.ability-slot.passive{cursor:default;border-style:dashed}.ability-slot.passive:hover{border-color:var(--panel-line)}@media(max-width:1000px){.ability-bar{right:6px;bottom:70px;gap:5px}.ability-slot{width:52px;height:52px}.ability-slot .ic{font-size:17px}.ability-slot .nm{font-size:8px}}.letterbox{position:fixed;inset:0;z-index:15;pointer-events:none}.letterbox.hidden{display:none}.lb-bar{position:fixed;left:0;right:0;height:0;background:#000;opacity:.82;transition:height .6s ease}.lb-top{top:0}.lb-bottom{bottom:0}.letterbox.show .lb-bar{height:9vh}@media(prefers-reduced-motion:reduce){.lb-bar{transition:none}}.banner{position:fixed;top:20%;left:50%;transform:translate(-50%);max-width:min(760px,92vw);padding:10px 40px;font-size:24px;font-weight:700;text-align:center;color:#fff4d6;text-shadow:0 2px 10px rgba(0,0,0,.8);background:linear-gradient(90deg,transparent,rgba(20,14,9,.82) 18%,rgba(20,14,9,.82) 82%,transparent);pointer-events:none;z-index:41}.banner.show{animation:banner 2.6s ease forwards}@keyframes banner{0%{opacity:0;transform:translate(-50%,10px)}10%{opacity:1;transform:translate(-50%)}78%{opacity:1}to{opacity:0}}.capture-chip{position:fixed;top:60px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;background:#140e09f2;border:1px solid var(--red);border-radius:10px;box-shadow:0 8px 22px #00000080;z-index:42}.capture-chip b{color:#ffb4a4;font-size:13px;white-space:nowrap}.capture-chip .count{min-width:20px;text-align:center;color:var(--dim);font-variant-numeric:tabular-nums;cursor:help}#toasts{position:fixed;bottom:86px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;z-index:40;pointer-events:none}.toast{background:#140e09e6;border:1px solid var(--panel-line);color:var(--text);border-radius:8px;padding:5px 14px;font-size:13px;font-weight:600;animation:toast-in .2s ease-out;box-shadow:0 4px 14px #00000073}.toast.blue,.toast.good{border-color:var(--gold)}.toast.bad{border-color:#b04038}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1}}.toast.fade{opacity:0;transition:opacity .5s}body.hud-off #hud>:not(#toasts):not(#banner){display:none!important}.modal.tut{max-width:720px}.tut-section-label{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--gold);margin:18px 0 8px;padding-top:12px;border-top:1px solid var(--panel-line)}.tut-section-label:first-of-type{margin-top:14px}.modal .tut-lede{text-align:center;color:var(--dim);font-size:13.5px;margin:8px 0 4px}.modal .tut-hint{color:var(--dim);font-size:12px;margin:6px 0 0}.goal-flow{display:flex;align-items:stretch;justify-content:center;gap:8px;margin:10px 0 2px;flex-wrap:wrap}.goal-step{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:92px;padding:10px 12px;border:1px solid var(--panel-line);border-radius:10px;background:#00000038}.goal-step .goal-ic{font-size:26px;line-height:1}.goal-step b{font-size:13px}.goal-step small{font-size:10.5px;color:var(--dim)}.goal-step.win{border-color:var(--gold);background:#d9a44124;box-shadow:0 0 14px #d9a44140}.goal-step.win small{color:#f0d27a}.goal-arrow{align-self:center;font-size:20px;color:var(--dim)}.goal-flow.compact .goal-step{min-width:72px;padding:6px 8px}.goal-flow.compact .goal-ic{font-size:19px}.goal-flow.compact{margin:4px 0 2px}.unit-grid{display:flex;flex-wrap:wrap;gap:6px}.unit-chip{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--panel-line);background:#00000038;font-size:12.5px;cursor:help}.unit-chip b{font-size:12.5px}.unit-chip small{color:var(--dim);font-size:10.5px;margin-left:1px}.unit-chip:hover,.unit-chip:focus-visible{border-color:var(--gold);background:#d9a4411a;outline:none}.control-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:6px}.ctl{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text)}.ctl span{color:var(--dim)}kbd,kbd.inline{display:inline-flex;align-items:center;justify-content:center;min-width:22px;padding:3px 7px;font:700 11px/1 inherit;color:var(--text);background:#2e2418;border:1px solid var(--panel-line);border-bottom:2px solid var(--panel-line);border-radius:6px;white-space:nowrap}.modal .tip-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}.modal .tip-list li{display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:12.5px;line-height:1.4;color:var(--text)}.tip-ic{flex-shrink:0;width:22px;text-align:center;font-size:14px}.difficulty{border:0;margin:4px 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.difficulty label{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--panel-line);border-radius:9px;background:#00000038;cursor:pointer}.difficulty input{accent-color:var(--gold);width:15px;height:15px;flex-shrink:0}.diff-ic{font-size:20px;line-height:1;flex-shrink:0}.diff-text{display:flex;flex-direction:column;gap:2px;min-width:0}.difficulty b{font-size:14px}.difficulty small{font-size:11px;color:var(--dim);line-height:1.3}.difficulty label:has(input:checked){border-color:var(--gold);background:#d9a4411f}.difficulty label:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}@media(max-width:640px){.difficulty{grid-template-columns:1fr}}.loadouts{border:0;margin:4px 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.loadout-card{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border:1px solid var(--panel-line);border-radius:9px;background:#00000038;cursor:pointer;position:relative}.loadout-card input{position:absolute;top:9px;right:10px;accent-color:var(--gold);width:15px;height:15px}.loadout-card .lo-ic{font-size:19px;line-height:1}.loadout-card b{font-size:13.5px;padding-right:20px}.loadout-card small{font-size:11px;color:var(--dim);line-height:1.4}.loadout-card:has(input:checked){border-color:var(--gold);background:#d9a4411f}.loadout-card:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}.loadout-card:has(input:disabled){opacity:.45;cursor:not-allowed}@media(max-width:640px){.loadouts{grid-template-columns:1fr}}.dot{width:11px;height:11px;border-radius:50%;display:inline-block;flex-shrink:0;border:1px solid rgba(0,0,0,.5)}.dot.red{background:#b03030}.dot.bronze{background:#c08a3e}.dot.green{background:#4a7a3a}.dot.dark{background:#3a3028}.dot.gold{background:#e8c14a}@media(max-width:1000px){.hud-top{top:6px;height:38px;gap:6px;padding:3px 4px 3px 8px}.hud-timer{font-size:13px;min-width:46px}.gate-pip,.hud-palace{padding:2px 5px;gap:3px}.pipbar{width:20px}.pipbar.wide{width:46px}.hud-speed .btn{padding:3px 6px;font-size:11px}.cmd-bar{left:214px;right:12px;width:auto;transform:none}.modal{padding:14px 16px;max-width:94vw;max-height:92vh}.modal-title{font-size:19px}.modal p,.modal li{font-size:12px}.modal .dim{font-size:10.5px}.goal-step{min-width:78px;padding:8px 9px}.goal-step .goal-ic{font-size:21px}.goal-arrow{font-size:16px}.control-grid{grid-template-columns:repeat(auto-fill,minmax(122px,1fr))}.unit-chip,.ctl,.modal .tip-list li{font-size:11.5px}.btn.big{font-size:15px;padding:10px 18px}.end-stats{font-size:12px;line-height:1.7}.btn.tb{width:40px;height:38px;font-size:15px}.banner{font-size:18px;padding:8px 26px}}@media(max-width:640px){.hud-top{left:8px;right:8px;transform:none;justify-content:space-between}.hud-timer{min-width:0}.pipbar{display:none}.pipbar.wide{display:block;width:36px}#minimap-wrap{width:124px;height:124px;left:8px;bottom:8px}.group-bar{left:8px;bottom:138px;max-width:124px}.cmd-bar{left:140px;right:8px;bottom:8px;padding:5px 8px}.cmd-controls select{max-width:74px;font-size:11px}.btn.cmd{padding:4px 7px;font-size:11px}.capture-chip{top:52px;flex-wrap:wrap;justify-content:center;max-width:94vw}}body.touch .cmd-bar,body.touch #minimap-wrap{bottom:64px}body.touch .group-bar{bottom:262px}@media(max-width:640px){body.touch .group-bar{bottom:194px}}body.touch #toasts{bottom:128px}.dot.blue{background:#2f7dff}.dot.violet{background:#a66bff}