html,body{color:#eee;background:#1b1d23;height:100%;margin:0;font:14px system-ui,-apple-system,sans-serif;overflow:hidden}body{overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;position:fixed;inset:0}#board{touch-action:none;position:absolute;inset:0}#board canvas{display:block}#status{top:calc(env(safe-area-inset-top) + 8px);left:calc(env(safe-area-inset-left) + 8px);pointer-events:none;background:#000a;border-radius:999px;padding:4px 10px;font-size:12px;position:absolute}#status:before{content:"● ";color:#f3c623}#status[data-state=connected]:before{color:#4caf50}#status[data-state=offline]:before{color:#e4572e}#toast{left:50%;bottom:calc(env(safe-area-inset-bottom) + 24px);color:#fff;text-align:center;pointer-events:none;background:#b3261e;border-radius:8px;max-width:80vw;padding:10px 16px;position:absolute;transform:translate(-50%)}#toast[hidden]{display:none}#who{top:calc(env(safe-area-inset-top) + 8px);right:calc(env(safe-area-inset-right) + 8px);color:#eee;font:inherit;background:#000a;border:0;border-radius:999px;padding:4px 12px;font-size:12px;position:absolute}#who[hidden]{display:none}#join{background:#1b1d23f2;place-items:center;padding:16px;display:grid;position:absolute;inset:0}#join[hidden]{display:none}#join .card{text-align:center;width:min(360px,100%)}#join h1{margin:0 0 16px;font-size:22px}#join .choices{gap:10px;display:grid}#join button{color:#fff;font:inherit;background:#2d3a30;border:0;border-radius:10px;padding:14px;font-size:18px}#join button:active{background:#47594b}#join button[data-role=host]{background:#4a2d3a}#join button[data-role=table]{background:#2d3a4a}#join .note{color:#f3a683;margin:0 0 12px}#join .hint{color:#999;margin:16px 0 0;font-size:12px}body.table #status,body.table #who{padding:6px 16px;font-size:18px}body.table #toast{font-size:22px}#notices{top:calc(env(safe-area-inset-top) + 44px);pointer-events:none;gap:6px;width:min(420px,100vw - 32px);display:grid;position:absolute;left:50%;transform:translate(-50%)}#notices .notice{color:#fff;text-align:center;background:#5b3a8ce8;border-radius:8px;padding:8px 14px;transition:opacity .4s}#notices .notice.fading{opacity:0}body.table #notices{width:min(720px,100vw - 32px)}body.table #notices .notice{padding:12px 20px;font-size:24px}#timeline{top:calc(44px + env(safe-area-inset-top));background:#14161ce0;border-radius:10px;width:min(640px,100% - 16px);padding:6px 8px 8px;font-size:12px;position:absolute;left:50%;transform:translate(-50%)}#timeline[hidden]{display:none}#timeline .head{color:#ccc;margin-bottom:6px}#timeline .cells{grid-template-columns:repeat(10,1fr);gap:3px;display:grid}#timeline .cell{background:#2b2f38;border-radius:6px;flex-direction:column;align-items:center;gap:2px;min-height:44px;padding:2px;display:flex}#timeline .cell.boundary{background:#3a3550}#timeline .seg{color:#888;font-size:10px}#timeline .mark{border-radius:4px;padding:0 4px;font-size:11px;font-weight:700;line-height:15px}#timeline .mark.step{color:#111;background:#e8e8e8}#timeline .mark.shot{color:#111;background:#6fcf6f}#timeline .mark.ready{color:#cfe9cf;background:#2f5f33}#timeline .mark.enemy-shot{color:#fff;background:#e85b47}#timeline .mark.enemy-ready{color:#f0c9c2;background:#5f2f2a}#timeline .mark.enemy-step{color:#111;background:#ff8a7a}#orders,#host{right:8px;bottom:calc(8px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;-webkit-user-select:none;user-select:none;background:#14161cf0;border-radius:12px;width:320px;max-height:calc(100% - 160px);padding:10px 12px;position:absolute;overflow-y:auto}#orders[hidden],#host[hidden]{display:none}#orders p{margin:6px 0}#orders .status{font-size:16px;font-weight:700}#orders .revealed{background:#4a2d2d;border-radius:8px;padding:6px 8px}#orders .muted,#host .muted{color:#999}#orders .row{gap:6px;margin:8px 0;display:flex}#orders button,#host button{color:#fff;min-height:40px;font:inherit;background:#2d3a30;border:0;border-radius:8px;flex:1;font-size:16px}#orders button[aria-pressed=true]{background:#5a8a5e}#orders button:disabled{opacity:.4}#orders .commit{background:#3d6bb3;width:100%;margin-top:8px;font-weight:700}#orders label.check{align-items:center;gap:8px;min-height:32px;display:flex}#orders label.check input{width:20px;height:20px}#orders .weapon.off{opacity:.55}#host .row{align-items:center;gap:8px;display:flex}#host .log{max-height:40vh;margin:8px 0 0;padding:0;font:11px ui-monospace,monospace;list-style:none;overflow-y:auto}#host .log li{word-break:break-all;border-bottom:1px solid #2b2f38;padding:3px 0}#host .log li.rejected{color:#f3a683}#notices .notice.hit{background:#963c28eb}#notices .notice.miss{background:#3c404aeb}#notices .notice.destroyed,#notices .notice.battle{background:#6e3c96f2;font-weight:700}body.table #timeline{width:min(960px,100% - 16px);font-size:18px}body.table #timeline .mark{font-size:16px;line-height:22px}@media (width<=560px){#orders,#host{width:auto;max-height:48vh;left:8px;right:8px}#timeline .head{font-size:11px}}#notices{z-index:5}#timeline .cell.decide{outline:2px solid #f0c74a}#timeline .mark.you{color:#111;background:#f0c74a}#timeline .head.result{color:#fff;text-align:center;margin:4px 0;font-size:18px;font-weight:700}body.table #timeline .head.result{font-size:32px}#orders .label{margin:10px 0 4px;font-weight:700}#orders .row button{padding:0 4px;font-size:15px}#orders button.current{box-shadow:inset 0 0 0 2px #8fb894}#orders .carry{width:100%;margin-top:6px}#orders button.carry[aria-pressed=true]{background:#5a8a5e}#orders .roll{background:#c4572f;width:100%;min-height:56px;margin:8px 0 4px;font-size:20px;font-weight:800}#orders .heat{color:#ffb066}#notices .notice.wasted,#notices .notice.heat{background:#965f14eb}#orders .fire-all{background:#6b3a2a;width:100%;margin-top:4px}#join .paste{text-align:left;gap:8px;margin-top:14px;display:grid}#join .paste label{gap:6px;display:grid}#join .paste button{background:#29a19c;font-weight:600}#host .invites{border-top:1px solid #333;margin-top:12px;padding-top:10px}#host .invites summary{cursor:pointer;font-weight:600}#host .invites .new-invite{grid-template-columns:auto 1fr;gap:6px;margin-top:8px;display:grid}#host .invites .new-invite button{grid-column:1/-1}#host .invites button{color:#fff;font:inherit;background:#2d3a30;border:0;border-radius:8px;padding:8px 12px}#host .invites .new-link{background:#1f2b22;border-radius:8px;gap:6px;margin-top:8px;padding:8px;display:grid}#host .invites .new-link[hidden]{display:none}#host .invites .new-link p{color:#9be29b;margin:0;font-size:13px}#host .invites .buttons{gap:6px;display:flex}#host .invites .invite-list{max-height:30vh;margin:8px 0 0;padding:0;font-size:13px;list-style:none;overflow-y:auto}#host .invites .invite-list li{border-bottom:1px solid #2a2a2a;align-items:center;gap:8px;padding:4px 0;display:flex}#host .invites .invite-list li .text{flex:1}#host .invites .invite-list li .when{color:#999;display:block}#host .invites .invite-list li.revoked .text{opacity:.6;text-decoration:line-through}#host .invites .invite-list li button{background:#4a2d3a;padding:4px 9px}#join .paste input,#host .invites input,#host .invites select{color:#eee;min-height:36px;font:inherit;background:#111;border:1px solid #444;border-radius:8px;padding:6px 8px;font-size:16px}#host .invites .invite-list li button{flex:0;min-height:30px}#mechstatus{-webkit-overflow-scrolling:touch;-webkit-user-select:none;user-select:none;background:#14161cf0;border-radius:12px;width:320px;max-height:46vh;padding:8px 12px;font-size:13px;position:absolute;top:60px;right:8px;overflow-y:auto}#mechstatus[hidden],#status-toggle[hidden],#mechtip[hidden],#mechstatus .close,#status-toggle{display:none}#mechstatus .card+.card{border-top:1px solid #333844;margin-top:8px;padding-top:4px}#mechstatus p,#mechtip p{margin:4px 0}#mechstatus .muted,#mechtip .muted{color:#9aa0ad}#mechstatus .dot{border-radius:50%;width:10px;height:10px;margin-right:6px;display:inline-block}#mechstatus .shut{color:#ff8c1a}#mechstatus .guns{margin:4px 0 0;padding:0;list-style:none}#mechstatus .guns li{justify-content:space-between;gap:8px;padding:1px 0;display:flex}#mechstatus .guns li.destroyed>span:first-child{color:#8a8f99;text-decoration:line-through}#mechstatus .guns li.charging>span:last-child{color:#f0c74a}.doll{grid-template-columns:repeat(5,1fr);gap:3px;margin:6px 0;display:grid}.doll .loc{color:#f1f3f6;text-align:center;border-radius:6px;flex-direction:column;align-items:center;padding:3px 2px;font-size:11px;line-height:1.25;display:flex}.doll .loc b{opacity:.85;font-size:11px}.doll .HD{grid-area:1/3}.doll .LA{grid-area:2/1}.doll .LT{grid-area:2/2}.doll .CT{grid-area:2/3}.doll .RT{grid-area:2/4}.doll .RA{grid-area:2/5}.doll .LL{grid-area:3/2}.doll .RL{grid-area:3/4}.doll .intact{background:#2f6b3a}.doll .damaged{background:#7d7228}.doll .little{background:#8a4f24}.doll .none{background:#7a2a2a}.doll .destroyed{color:#8a8f99;background:#2a2c31}.doll .gone{color:#e85b47;font-size:16px}.doll .rear{opacity:.8}.doll .is{opacity:.85}.doll .is.hurt{color:#ffb3a6;opacity:1;font-weight:700}.doll.rough .word{font-size:10px}#mechtip{z-index:8;pointer-events:none;background:#14161cf5;border:1px solid #3a3f4b;border-radius:10px;width:220px;padding:6px 10px;font-size:12px;position:fixed}body.table #mechstatus{width:360px;font-size:15px}@media (width<=560px){#status-toggle{color:#f1f3f6;font:inherit;z-index:6;background:#14161cf0;border:0;border-radius:999px;padding:6px 12px;font-size:13px;display:block;position:absolute;right:8px}#mechstatus{z-index:7;width:auto;max-height:70vh;display:none;left:8px;right:8px}body.status-open #mechstatus:not([hidden]){display:block}#mechstatus .close{float:right;color:#f1f3f6;background:0 0;border:0;padding:2px 6px;font-size:18px;display:block}}#lobby{-webkit-overflow-scrolling:touch;z-index:4;background:#14161cf2;border-radius:12px;width:380px;padding:10px 12px;font-size:13px;position:absolute;top:60px;right:8px;overflow-y:auto}#lobby[hidden],#lobby [hidden]{display:none!important}#lobby p{margin:4px 0}#lobby .status{font-size:16px;font-weight:700}#lobby .muted{color:#9aa0ad}#lobby .label{margin:10px 0 4px;font-weight:700}#lobby .ok{color:#6fcf6f}#lobby .row{gap:6px;margin:6px 0;display:flex}#lobby .row.wrap{flex-wrap:wrap}#lobby button,#lobby select,#lobby input{color:#fff;min-height:34px;font:inherit;background:#2d3a30;border:0;border-radius:8px;padding:0 10px}#lobby input,#lobby select{background:#2a2e38}#lobby input[type=search]{flex:1;min-width:0}#lobby button[aria-pressed=true]{outline:2px solid #f0c74a}#lobby button:disabled{opacity:.45}#lobby .settings{background:#1f232b;border-radius:8px;flex-wrap:wrap;align-items:end;gap:6px 10px;margin:8px 0;padding:8px;display:flex}#lobby .settings label{color:#9aa0ad;flex-direction:column;gap:2px;font-size:12px;display:flex}#lobby .settings select[name=lobbyMap]{max-width:220px}#lobby .lance ul,#lobby .units{margin:0;padding:0;list-style:none}#lobby .lance li,#lobby .units li{border-bottom:1px solid #2a2e38;justify-content:space-between;align-items:center;gap:8px;padding:4px 0;display:flex}#lobby .lance.red .label{color:#f08a85}#lobby .lance.blue .label{color:#8db8f2}#lobby .units{max-height:40vh;overflow-y:auto}#lobby .units button,#lobby .drop{flex:none}#lobby .facings button{flex:1;padding:0;font-size:18px}#lobby .ready{background:#3b6b45;width:100%;min-height:44px;margin-top:10px;font-weight:700}#lobby .ready.on{background:#2d3a30;font-weight:400}#orders .tabs button{font-size:13px}#host .new-battle[hidden],#host .reset[hidden]{display:none}@media (width<=560px){#lobby{width:auto;left:8px;right:8px}#lobby .units{max-height:30vh}}.heatbar{background:#2a2e38;border-radius:4px;height:8px;margin:4px 0 2px;position:relative;overflow:hidden}.heatbar span{background:#e8a33a;position:absolute;inset:0 auto 0 0}.heatbar.cool span{background:#6fa8dc}.heatbar.hot span{background:#ff5a1f}.heatbar i{opacity:.7;background:#f1f3f6;width:2px;position:absolute;top:0;bottom:0}#mechstatus .scale summary{cursor:pointer;color:#9aa0ad;font-size:12px}#mechstatus .scale table{border-collapse:collapse;width:100%;margin-top:4px;font-size:12px}#mechstatus .scale td{vertical-align:top;border-bottom:1px solid #2a2e38;padding:1px 4px}#mechstatus .scale td:first-child{text-align:right;width:2.5em;font-weight:700}#mechstatus .scale tr.reached td{color:#ffb27a}#mechstatus .scale tr.soon td{color:#f0c74a}#orders .jump,#orders .stand{width:100%;margin:6px 0}#orders .facings button{padding:0;font-size:18px}