:root{--bg:#070b16;--panel:#0a1020ed;--panel-edge:#78c8ff38;--text:#e8eef8;--muted:#9fb0c8;--accent:#57e3ff;--amber:#ffc34d;--red:#ff4d6d;--green:#39ff6a;--radius:14px}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;overflow:hidden}body{-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;font-family:Inter,system-ui,sans-serif}canvas{display:block;position:fixed;inset:0}#hud{transform-origin:0 0;pointer-events:none;width:1920px;height:1200px;position:fixed;top:0;left:0}#hud>*{pointer-events:auto}h1,h2,h3,.display{letter-spacing:.02em;font-family:Oswald,Arial Narrow,sans-serif}.panel{background:var(--panel);border:1px solid var(--panel-edge);border-radius:var(--radius);position:absolute;box-shadow:0 10px 40px #00000073}.left{flex-direction:column;gap:18px;width:580px;padding:28px;display:flex;top:40px;bottom:40px;left:40px}.left .brand{text-transform:uppercase;color:#fff;text-shadow:0 0 24px #ff3c648c;font-family:Oswald;font-size:40px;font-weight:700;line-height:1}.left .round{color:var(--muted);text-transform:uppercase;font-family:Oswald;font-size:22px}.left .phase{color:var(--accent);text-transform:uppercase;font-family:Oswald;font-size:36px}.left .help{color:var(--text);font-size:19px;line-height:1.5}.left .help small{color:var(--amber);margin-top:8px;font-size:16px;display:block}.city-card{background:#ffffff0d;border-radius:12px;align-items:center;gap:16px;padding:14px;display:flex}.city-card img{object-fit:cover;object-position:top;border-radius:10px;width:86px;height:110px}.city-card .name{font-family:Oswald;font-size:22px}.city-card .ability{color:var(--muted);font-size:15px;line-height:1.4}.log{color:var(--muted);flex-direction:column-reverse;flex:1;gap:6px;font-size:15px;display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(#0000,#000 40%);mask-image:linear-gradient(#0000,#000 40%)}.log div{border-left:3px solid var(--panel-edge);padding:6px 10px}.log .bad{border-color:var(--red);color:#ffc0c8}.log .good{border-color:var(--green);color:#c8ffd4}.right{flex-direction:column;gap:14px;width:520px;padding:28px;display:flex;top:40px;right:40px}.settings-panel{width:520px;padding:16px 20px;bottom:40px;right:40px}.tray-title{text-align:center;letter-spacing:.1em;text-transform:uppercase;width:520px;color:var(--muted);font-family:Oswald;font-size:18px;position:absolute;top:760px;right:40px;pointer-events:none!important}.stats{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.stat{background:#ffffff0d;border-radius:12px;padding:10px 12px}.stat .k{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:13px}.stat .v{font-family:Oswald;font-size:30px}.stat.energy .v{color:#ffe14d}.stat.damage .v{color:#ff6d9a}.stat.research .v{color:var(--green)}.actions{flex-direction:column;gap:10px;margin-top:6px;display:flex}.row{flex-wrap:wrap;gap:10px;display:flex}.settings{flex-wrap:wrap;align-items:center;gap:8px;display:flex}button,select{font:inherit}.btn{cursor:pointer;color:var(--text);letter-spacing:.03em;background:#ffffff12;border:1px solid #ffffff2e;border-radius:12px;padding:12px 18px;font-family:Oswald;font-size:20px;transition:transform 80ms,background .15s,opacity .15s}.btn:hover:not(:disabled){background:#ffffff24}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.35;cursor:not-allowed}.btn.primary{color:#fff;background:linear-gradient(#f57,#c51d4a);border-color:#ff8aa2;box-shadow:0 6px 24px #ff3c6459}.btn.go{background:linear-gradient(#2fd2ff,#0f7fb3);border-color:#9ae9ff}.btn.small{padding:8px 12px;font-size:16px}.btn.toggle.off{opacity:.5;text-decoration:line-through}select.btn{appearance:none;padding-right:18px}.toast-wrap{flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute;top:24px;left:50%;transform:translate(-50%);pointer-events:none!important}.toast{border:1px solid var(--panel-edge);white-space:nowrap;background:#080c18eb;border-radius:999px;padding:12px 22px;font-family:Oswald;font-size:22px;animation:2.6s forwards toast}.toast.bad{border-color:var(--red);color:#ffd0d8}.toast.good{border-color:var(--green);color:#d4ffe0}@keyframes toast{0%{opacity:0;transform:translateY(-10px)}10%,80%{opacity:1;transform:none}to{opacity:0}}.banner{text-align:center;text-transform:uppercase;color:#fff;text-shadow:0 0 40px #57e3ffcc,0 6px #00000080;font-family:Oswald;font-size:84px;font-weight:700;animation:1.3s forwards banner;position:absolute;top:520px;left:0;right:0;pointer-events:none!important}@keyframes banner{0%{opacity:0;transform:scale(1.3)}20%{opacity:1;transform:scale(1)}75%{opacity:1}to{opacity:0;transform:scale(.96)}}.popup{z-index:5;flex-direction:column;gap:10px;width:360px;padding:18px;display:flex;position:absolute}.popup h3{margin:0;font-size:26px}.popup p{color:var(--muted);margin:0;font-size:16px;line-height:1.4}.popup .meta{gap:16px;font-family:Oswald;font-size:20px;display:flex}.popup .err{color:#ffb0bc;font-size:15px}.modal-bg{z-index:10;background:#02040ab3;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.modal{width:900px;max-height:1000px;padding:36px 44px;overflow:auto}.modal h2{margin:0 0 12px;font-size:44px}.modal h3{color:var(--accent);margin:22px 0 6px;font-size:24px}.modal p,.modal li{color:#d7e0ee;font-size:18px;line-height:1.55}.modal .btn{margin-top:16px}.over h2.win{color:var(--green)}.over h2.lose{color:var(--red)}.over{text-align:center;width:720px}.over img{border-radius:14px;width:240px;margin:10px auto;display:block}.loading{color:var(--muted);justify-content:center;align-items:center;font-family:Oswald;font-size:28px;display:flex;position:fixed;inset:0}.topbar{display:none}body.portrait .topbar{align-items:center;gap:10px;width:664px;height:62px;display:flex;position:absolute;top:-74px;left:628px}.topbar .burger{flex:none;width:66px;height:58px;padding:0;font-size:32px;line-height:1}.tb-phase{cursor:pointer;flex-direction:column;flex:1;min-width:0;display:flex}.tb-phase b{color:var(--accent);white-space:nowrap;text-overflow:ellipsis;font-family:Oswald;font-size:28px;font-weight:600;line-height:1.1;overflow:hidden}.tb-phase small{color:var(--muted);font-size:18px}.tb-stats{flex:none;gap:6px;display:flex}.tb-stats span{white-space:nowrap;background:#ffffff0f;border-radius:10px;padding:8px 10px;font-family:Oswald;font-size:24px}.tb-stats .research{color:var(--green)}.tb-stats .energy{color:#ffe14d}.tb-stats .damage{color:#ff6d9a}body.portrait .right{width:274px;height:112px;box-shadow:none;background:0 0;border:0;padding:0;top:1208px;left:1018px;right:auto}body.portrait .right .stats,body.portrait .tray-title{display:none}body.portrait .actions{flex-flow:wrap;align-content:flex-end;gap:8px;height:100%;margin:0}body.portrait .actions>.btn{flex:40%;min-height:58px;padding:6px 8px;font-size:23px;line-height:1.05}body.portrait .actions>.row{flex-wrap:nowrap;flex:100%;gap:8px}body.portrait .actions>.row .btn{flex:1;min-height:46px;padding:6px 4px;font-size:21px}body.portrait .banner{width:672px;font-size:68px;top:520px;left:624px;right:auto}body.portrait .toast-wrap{top:12px;left:960px}body.portrait .toast{white-space:normal;text-align:center;border-radius:18px;max-width:640px;font-size:27px}body.portrait .popup{gap:14px;width:640px;padding:24px}body.portrait .popup h3{font-size:38px}body.portrait .popup p{font-size:25px}body.portrait .popup .meta{font-size:28px}body.portrait .popup .err,body.portrait .popup .targets{font-size:24px}body.portrait .popup .btn{min-height:64px;font-size:27px}#layer{z-index:20;pointer-events:none;position:fixed;inset:0}#layer>*{pointer-events:auto}.drawer-bg{opacity:0;background:#02040a8c;transition:opacity .2s;position:fixed;inset:0}#layer>.drawer-bg:not(.open){pointer-events:none}.drawer-bg.open{opacity:1}.drawer{overscroll-behavior:contain;width:min(380px,88vw);padding:max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));border-right:1px solid var(--panel-edge);background:#0b1222;flex-direction:column;gap:12px;transition:transform .22s;display:flex;position:absolute;top:0;bottom:0;left:0;overflow-y:auto;transform:translate(-105%);box-shadow:10px 0 40px #00000080}.drawer-bg.open .drawer{transform:none}.drawer-head{justify-content:space-between;align-items:center;gap:10px;display:flex}.drawer-head h2{text-transform:uppercase;color:#fff;margin:0;font-size:24px}.drawer-head .btn{width:44px;height:44px;padding:0}.drawer-body{flex-direction:column;gap:14px;display:flex}.drawer .left{display:contents}.drawer .left .brand{display:none}.drawer .left .round{font-size:14px}.drawer .left .phase{font-size:24px}.drawer .left .help{font-size:15px;line-height:1.5}.drawer .left .help small{font-size:13px}.drawer .city-card{gap:12px;padding:10px}.drawer .city-card img{width:54px;height:70px}.drawer .city-card .name{font-size:18px}.drawer .city-card .ability{font-size:13px}.drawer .player{order:1;margin:0}.drawer .settings-panel{width:auto;box-shadow:none;background:0 0;border:0;order:2;padding:0;position:static}.drawer .log{flex:none;order:3;max-height:260px;font-size:13px}.drawer .btn.small{min-height:44px;font-size:16px}.drawer .player .btn.small{width:48px}.drawer .player .track{font-size:15px}#layer .modal-bg{z-index:5;padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));position:fixed;inset:0}#layer .modal{width:min(900px,100%);max-height:100%;padding:22px 20px;position:relative}#layer .modal.over{width:min(720px,100%)}#layer .modal h2{font-size:34px}#layer .modal p,#layer .modal li{font-size:16px}#layer .over img{width:min(240px,60vw)}.tip{border:1px solid var(--panel-edge);border-left:4px solid var(--accent);z-index:20;background:#060a16f2;border-radius:10px;max-width:380px;padding:12px 16px;position:absolute;box-shadow:0 10px 30px #0000008c;pointer-events:none!important}.tip.good{border-left-color:var(--green)}.tip.bad{border-left-color:var(--red)}.tip .tip-title{color:#fff;margin-bottom:4px;font-family:Oswald;font-size:21px}.tip p{color:#cfd9ea;margin:4px 0 0;font-size:15px;line-height:1.45}.tip b{color:#fff}body.portrait .tip{width:640px;max-width:none;padding:18px 22px}body.portrait .tip .tip-title{font-size:32px}body.portrait .tip p{font-size:25px}.tip .tip-tap{color:var(--amber);font-weight:600}.player{background:#ffffff0a;border:1px solid #ffffff14;border-radius:12px;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px;padding:8px 10px;display:flex}.player .btn.small{width:46px;padding:6px 0;font-size:18px;line-height:1}.player .track{min-width:0;color:var(--accent);white-space:nowrap;text-overflow:ellipsis;flex:1;font-family:Oswald;font-size:17px;overflow:hidden}.player .track.paused{color:var(--muted)}body.portrait .player{justify-content:center;width:100%}.player .volume{cursor:pointer;flex-basis:100%;align-items:center;gap:10px;padding:2px 4px 0;display:flex}.player .vol-icon{text-align:center;width:26px;font-size:18px}.player .vol-pct{text-align:right;width:46px;color:var(--muted);font-family:Oswald;font-size:15px}.player input[type=range]{appearance:none;cursor:pointer;background:linear-gradient(to right, var(--accent) var(--fill,45%), #ffffff26 var(--fill,45%));border-radius:3px;flex:1;height:6px}.player input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;border:2px solid var(--accent);background:#fff;border-radius:50%;width:18px;height:18px;box-shadow:0 0 8px #57e3ff99}.player input[type=range]::-moz-range-thumb{border:2px solid var(--accent);background:#fff;border-radius:50%;width:16px;height:16px}body.portrait .player .volume{padding:4px 8px 0}body.portrait .player input[type=range]{height:8px}body.portrait .player input[type=range]::-webkit-slider-thumb{width:26px;height:26px}.popup .targets{color:#b6ffc8;font-size:15px}.menu{z-index:30;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;-webkit-user-select:none;user-select:none;position:fixed;inset:0;overflow-y:auto}.menu:before{content:"";background:var(--key-art) center 20% / cover no-repeat;position:fixed;inset:0}.menu:after{content:"";background:linear-gradient(#070b160d 0%,#070b1659 35%,#070b16f2 70%);position:fixed;inset:0}.menu-inner{z-index:1;max-width:560px;min-height:100%;padding:max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));flex-direction:column;justify-content:flex-end;gap:18px;margin:0 auto;display:flex;position:relative}.menu-langs{top:max(14px, env(safe-area-inset-top));right:max(16px, env(safe-area-inset-right));gap:6px;display:flex;position:absolute}.menu-langs .chip{background:#070b16cc;min-height:36px;padding:6px 12px;font-size:15px}.menu-logo{margin-top:30vh}.menu-logo h1{text-transform:uppercase;color:#fff;text-shadow:0 0 36px #ff3c6499,0 5px #0009;margin:0;font-size:clamp(44px,13vw,110px);line-height:.95}.menu-logo p{color:#d5def0;text-shadow:0 2px 8px #000;margin:10px 0 0;font-size:clamp(15px,4vw,22px);line-height:1.35}.menu-card{background:var(--panel);border:1px solid var(--panel-edge);border-radius:18px;flex-direction:column;gap:18px;padding:18px;display:flex;box-shadow:0 10px 40px #00000080}.menu-field h2{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;font-size:15px;font-weight:600}.chip{cursor:pointer;min-height:44px;color:var(--text);background:#ffffff0d;border:1px solid #ffffff29;border-radius:12px;padding:8px 14px;font-family:Oswald;font-size:18px}.chip.on{border-color:var(--accent);color:#fff;background:#57e3ff33}.menu-cities{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.menu-city{cursor:pointer;color:#fff;background:#10182c 50% 30%/cover no-repeat;border:2px solid #ffffff1f;border-radius:12px;height:64px;padding:0;position:relative;overflow:hidden}.menu-city:before{content:"";background:linear-gradient(90deg,#070b16d9,#070b1640);position:absolute;inset:0}.menu-city span{text-align:left;text-shadow:0 1px 4px #000;font-family:Oswald;font-size:18px;line-height:1.1;position:absolute;bottom:8px;left:12px;right:8px}.menu-city.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent), 0 0 18px #57e3ff59}.menu-city.on:before{background:linear-gradient(90deg,#071e32bf,#070b161a)}.menu-cities .menu-city:last-child:nth-child(odd){grid-column:1/-1}.menu-ability{border-left:3px solid var(--accent);color:#d7e0ee;background:#ffffff0d;border-radius:8px;margin:10px 0 0;padding:10px 12px;font-size:15px;line-height:1.45}.menu-ability.damaged{border-left-color:var(--red)}.menu-seg{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.menu-seg .chip{font-size:22px}.menu-hint{color:var(--muted);margin:8px 0 0;font-size:14px}.menu-switch{cursor:pointer;align-items:center;gap:12px;display:flex}.menu-switch input{opacity:0;pointer-events:none;position:absolute}.menu-switch i{background:#ffffff24;border-radius:15px;flex:none;width:50px;height:30px;transition:background .15s;position:relative}.menu-switch i:after{content:"";background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .15s;position:absolute;top:3px;left:3px}.menu-switch input:checked+i{background:#f57}.menu-switch input:checked+i:after{transform:translate(20px)}.menu-switch input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}.menu-switch span{flex-direction:column;gap:2px;display:flex}.menu-switch b{font-family:Oswald;font-size:18px;font-weight:400}.menu-switch small{color:var(--muted);font-size:14px}.menu-actions{z-index:2;padding:12px 18px max(18px, env(safe-area-inset-bottom));background:#0b1222;border-radius:0 0 18px 18px;grid-template-columns:1fr 1fr;gap:10px;margin:0 -18px -18px;display:grid;position:sticky;bottom:0;box-shadow:0 -10px 10px -6px #0b1222}.menu-actions .btn{min-height:52px;font-size:20px}.menu-actions .btn.primary{grid-column:1/-1;min-height:60px;font-size:24px}.menu-actions .btn.primary+.btn:last-child{grid-column:1/-1}.menu .modal-bg{z-index:5;width:auto;height:auto;padding:max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));position:fixed;inset:0}.menu .modal{width:min(900px,100%);max-height:100%;padding:22px 20px;position:relative}.menu .modal h2{font-size:34px}.menu .modal p,.menu .modal li{font-size:16px}@media (width>=520px){.menu-cities{grid-template-columns:repeat(3,1fr)}.menu-cities .menu-city:last-child:nth-child(odd){grid-column:auto}}@media (orientation:landscape) and (width>=640px){.menu-inner{max-width:1400px;padding-top:max(56px, env(safe-area-inset-top));grid-template-columns:1fr minmax(340px,520px);align-items:end;gap:clamp(16px,4vw,60px);display:grid}.menu-logo{margin:0 0 8px}.menu-logo h1{font-size:clamp(40px,7.5vw,130px)}.menu:after{background:linear-gradient(#070b160d 20%,#070b16e6 90%)}}@media (orientation:landscape) and (height<=500px){.menu-inner{height:100%;min-height:0;padding-top:max(10px, env(safe-area-inset-top));padding-bottom:max(10px, env(safe-area-inset-bottom));grid-template-columns:1fr minmax(340px,440px);align-items:stretch;gap:16px}.menu-langs{left:max(16px, env(safe-area-inset-left));right:auto;top:max(10px, env(safe-area-inset-top))}.menu-logo{align-self:end}.menu-logo h1{font-size:clamp(30px,11vh,54px)}.menu-logo p{font-size:15px}.menu-card{overscroll-behavior:contain;gap:12px;min-height:0;padding:14px;overflow-y:auto}.menu-field h2{margin-bottom:6px}.menu-city{height:46px}.menu-cities{grid-template-columns:repeat(3,1fr);gap:6px}.menu-cities .menu-city:last-child:nth-child(odd){grid-column:auto}.menu-city span{font-size:16px;bottom:5px;left:8px}.menu-ability{margin-top:6px;padding:6px 10px;font-size:14px}.chip{min-height:40px}.menu-actions{margin:0 -14px -14px;padding:10px 14px 14px;display:flex}.menu-actions .btn,.menu-actions .btn.primary{flex:1;min-height:46px;font-size:19px}.menu-actions .btn.primary{flex:2}}