:root{--bg-space: #020204;--bg-color: #050510;--accent: #00f2ff;--normal: #c2c2ff;--enemy: #ff0055;--text: #e0e0e0;--ui-bg: rgba(16, 16, 30, .9);--glass: rgba(8, 12, 18, .75);--glass-icon: rgba(255, 255, 255, .08);--border: rgba(25, 255, 255, .15);--neon: #00f2ff;--font: "Segoe UI", Roboto, Helvetica, sans-serif;--font-display: "Orbitron", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-body: "Orbitron", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-weight-display: 800;--font-weight-body: 400;--corner-size: 20px;--border-width: 2px;--correction: .5857;--corner-inner: calc( var(--corner-size) - (var(--border-width) * var(--correction)) );--shape-outer: polygon( var(--corner-size) 0, 100% 0, 100% calc(100% - var(--corner-size)), calc(100% - var(--corner-size)) 100%, 0 100%, 0 var(--corner-size) );--shape-inner: polygon( var(--corner-inner) 0, 100% 0, 100% calc(100% - var(--corner-inner)), calc(100% - var(--corner-inner)) 100%, 0 100%, 0 var(--corner-inner) )}body,html{margin:0;padding:0;width:100%;height:100%;background-color:var(--bg-space);color:#fff;font-family:var(--font);overflow:hidden;touch-action:none;user-select:none;overscroll-behavior:none;-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}canvas{display:block}h1{margin:0 0 40px;font-size:4rem;text-transform:uppercase;letter-spacing:6px;color:var(--accent);text-shadow:0 0 30px rgba(0,242,255,.5)}h2{margin:0 0 10px;color:var(--accent);text-transform:uppercase;letter-spacing:2px}p{color:#ccc;line-height:1.6;margin-bottom:25px;font-size:.95rem}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;z-index:10;transition:opacity .3s,visibility .3s}#ui-layer.hidden{opacity:0;visibility:hidden}.top-bar{background:linear-gradient(to bottom,rgba(0,0,0,.9),transparent);padding:15px 20px 30px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.bottom-bar{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:900px;padding:20px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:20;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,transparent 100%)}.hud-panel{display:flex;gap:.75rem;pointer-events:auto;align-items:flex-end}.hud-panel.center{flex-direction:column;align-items:center}#game-title{position:absolute;top:18%;left:50%;transform:translate(-50%,-50%);z-index:150;white-space:nowrap;width:max-content;font-size:5rem;font-weight:900;text-transform:uppercase;letter-spacing:12px;line-height:1;font-family:var(--font-display);background:linear-gradient(180deg,#fff,#00f2ff,#09f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#00f2ff;text-shadow:0 0 20px rgba(0,242,255,.5),0 0 60px rgba(0,242,255,.3);animation:titleFloat 6s ease-in-out infinite;transition:all .8s cubic-bezier(.2,.8,.2,1);pointer-events:none}body.in-game #game-title{top:48px;left:50%;transform:translate(-50%,-50%) scale(1);font-size:2rem;letter-spacing:3px;background:none;-webkit-text-fill-color:initial;color:var(--accent);text-shadow:0 0 5px rgba(0,242,255,.5);animation:none;width:auto;white-space:normal}body.mission-select #game-title{top:10%;font-size:3rem;letter-spacing:6px}body.in-game #game-title:after{content:"";transition:opacity .5s;opacity:0}body:not(.in-game):not(.mission-select) #game-title{top:18%;font-size:5rem;letter-spacing:12px}body:not(.in-game) #game-title:after{content:"TACTICAL COMMAND";display:block;font-size:1rem;font-weight:600;letter-spacing:8px;text-align:center;margin-top:15px;color:#fff9;-webkit-text-fill-color:rgba(255,255,255,.6);text-shadow:none;opacity:1;transition:opacity .5s}.mission-info{text-align:center;width:100%}.mission-title{color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:2px;font-size:.9rem;margin-bottom:4px;text-shadow:0 2px 4px rgba(0,0,0,.8)}.mission-desc{font-size:.8rem;color:#ccc;max-width:600px;margin:0 auto;line-height:1.4;text-shadow:0 2px 4px rgba(0,0,0,.8)}.hud-btn{position:relative;width:44px;height:44px;background:transparent;border:none;color:var(--accent);display:flex;justify-content:center;align-items:center;cursor:pointer;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:transform .2s;padding:8px}.hud-btn:before{content:"";position:absolute;inset:0;background:#00f2ff4d;z-index:-2;transition:background .2s}.hud-btn:after{content:"";position:absolute;inset:1px;background:#10141ecc;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);z-index:-1;transition:background .2s}.hud-btn:hover{transform:translateY(-2px);color:#fff;filter:drop-shadow(0 0 5px rgba(0,242,255,.5))}.hud-btn:hover:before{background:var(--accent)}.hud-btn:hover:after{background:#10141ee6}.hud-btn:active{transform:translateY(0) scale(.95)}.hud-btn svg{width:24px;height:24px;fill:currentColor}.turn-status{text-align:center;text-shadow:0 0 10px currentColor;background:#0009;padding:.25rem .5rem;border-radius:4px;border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.turn-label{font-size:.7rem;color:#889;letter-spacing:2px;text-transform:uppercase;font-weight:700;padding-bottom:1px}.turn-value{font-size:1.1rem;font-weight:900;color:var(--accent);text-transform:uppercase;letter-spacing:1px;transition:color .3s ease}.hud-action-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-width:100px;height:54px;padding:0 20px;background:#10141ee6;border:none;color:#fff;font-family:var(--font-display);cursor:pointer;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:all .2s}.hud-action-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,transparent 5%,rgba(0,242,255,.3) 50%,transparent 95%);z-index:-1;transition:opacity .3s;opacity:.5}.hud-action-btn:after{content:"";position:absolute;inset:1px;background:#0a0e14f2;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);z-index:-1}.hud-action-btn:hover{transform:translateY(-2px);color:var(--accent)}.hud-action-btn:hover:before{opacity:1;background:linear-gradient(45deg,var(--accent),transparent)}.hud-action-btn:active{transform:translateY(0) scale(.96)}.hud-action-btn:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(1);transform:none;animation:none}.hud-action-btn.end-turn:not(:disabled){animation:pulse-blue 2s infinite}.hud-action-btn.end-turn:hover{animation:none}.btn-icon{font-size:1.2rem;line-height:1;margin-bottom:2px}.btn-label{font-size:.65rem;font-weight:800;letter-spacing:1px;text-transform:uppercase}.hud-action-btn.voidray{color:#fc0}.hud-action-btn.voidray:not(:disabled){animation:pulse-gold 2s infinite;box-shadow:0 0 15px #fc03;border-color:#ffcc0080}.hud-action-btn.voidray:hover{color:#ffe680;text-shadow:0 0 10px #ffcc00;animation:none}.hud-action-btn.voidray:before{background:linear-gradient(45deg,transparent 5%,rgba(255,204,0,.3) 50%,transparent 95%)}.voidray-charge-counter{position:absolute;top:4px;right:8px;font-size:.7rem;color:#fc0;font-weight:700}#eliminated-msg{position:absolute;top:20%;left:50%;transform:translate(-50%,-50%);background:#ff323233;border:1px solid #ff3333;color:#fcc;padding:15px 30px;border-radius:8px;font-weight:800;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 10px #ff3333;pointer-events:none;opacity:0;transition:opacity .5s;z-index:25;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}#eliminated-msg.active{opacity:1}#start-menu,#mission-select,#settings-menu,#pause-menu{position:absolute;top:0;left:0;width:100%;height:100%;background:#0202044d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4rem;z-index:30;visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}#start-menu.active,#mission-select.active,#settings-menu.active,#pause-menu.active{visibility:visible;opacity:1;pointer-events:auto}.menu-title{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--accent);text-align:center;margin-bottom:10px;letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 10px rgba(0,242,255,.5)}.menu-container{display:flex;flex-direction:column;gap:16px;width:300px}.menu-footer{position:absolute;bottom:30px;left:50%;transform:translate(-50%);font-family:var(--font-display);font-size:.8rem;color:#ffffff4d;letter-spacing:2px;pointer-events:none}.menu-buttons{display:flex;flex-direction:column;gap:20px}.menu-btn{position:relative;display:flex;align-items:center;padding:20px 30px;background:transparent;border:none;cursor:pointer;font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:.85rem;color:var(--text);transition:transform .2s cubic-bezier(.1,.7,.1,1),color .2s ease;filter:none}.menu-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#2a3441,#3f4c5e);clip-path:var(--shape-outer);z-index:-2;transition:background .3s ease}.menu-btn .border-glow{position:absolute;inset:0;background:linear-gradient(135deg,var(--neon),transparent 50%,var(--neon));clip-path:var(--shape-outer);z-index:-2;opacity:0;transition:opacity .3s ease}.menu-btn.hidden{display:none}.menu-btn:after{content:"";position:absolute;inset:var(--border-width);background:var(--glass);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);clip-path:var(--shape-inner);z-index:-1;transition:background .3s ease}.menu-btn:hover{color:#fff;transform:translate(6px)}.menu-btn:hover .border-glow{opacity:1}.menu-btn:hover:after{background:#141e28d9}.menu-btn.primary{color:#fff}.menu-btn.primary:before{background:linear-gradient(90deg,#0b4f6c,#08a)}.menu-btn.primary:after{background:#00f2ff1a}.menu-btn.primary .border-glow{opacity:.5;background:linear-gradient(135deg,var(--neon),#0088aa)}.menu-btn.primary:hover{transform:translate(6px)}.menu-btn.primary:hover .border-glow{opacity:1}.menu-btn.primary:hover:after{background:#00f2ff33}.mission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:15px;width:100%;max-width:800px;padding:20px;box-sizing:border-box;justify-content:center}.ms-btn{background:#ffffff0d;border:1px solid #333;padding:15px;border-radius:8px;color:#fff;cursor:pointer;text-align:center;transition:all .2s;width:auto}.ms-btn:hover:not(.locked){border-color:var(--accent);background:#00f2ff1a;transform:translateY(-2px)}.ms-btn.locked{opacity:.3;cursor:not-allowed;border-color:#222}.ms-num{font-size:1.5rem;font-weight:900;color:#555;margin-bottom:5px}.ms-btn:not(.locked) .ms-num{color:var(--accent)}.ms-title{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:#aaa}.ms-btn.blackhole{box-shadow:0 0 15px #ff640066;border-color:#ff6400}.ms-btn.blackhole .ms-num{color:#ff6400!important}.btn-ms-back{margin-top:30px}.settings-content{display:flex;flex-direction:column;gap:25px;background:#10141e99;padding:25px;border-radius:12px;border:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.settings-group{display:flex;flex-direction:column;gap:10px}.settings-group label{font-family:var(--font-display);font-size:.75rem;font-weight:800;color:var(--accent);letter-spacing:2px;text-transform:uppercase}#settings-player-name{background:#0006;border:1px solid var(--border);color:#fff;padding:12px;font-family:var(--font-display);font-size:1.1rem;text-transform:uppercase;letter-spacing:2px;border-radius:4px;outline:none;transition:border-color .2s}#settings-player-name:focus{border-color:var(--accent)}.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.color-option{width:48px;height:48px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s;position:relative}.color-option.active{border-color:#fff;transform:scale(1.1);box-shadow:0 0 20px currentColor}.color-option:hover{transform:scale(1.05)}.btn-exit{background:#f33;border-color:#f33;box-shadow:0 0 25px #f336}.modal-backdrop{position:absolute;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s;z-index:100}.modal-backdrop.active{opacity:1;pointer-events:auto}.modal{background:#131324;border:1px solid var(--border);padding:35px;border-radius:20px;max-width:420px;width:90%;box-shadow:0 25px 60px #000c;transform:translateY(20px);transition:transform .3s;text-align:center}.modal-backdrop.active .modal{transform:translateY(0)}.modal h2{margin:0 0 15px;text-transform:uppercase;letter-spacing:2px;color:#fff}.modal p{font-size:1rem;line-height:1.6;color:#b0b0c0;margin-bottom:25px}.modal-menu{display:flex;gap:8px}#modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000d9;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s;z-index:20}#modal-overlay.active{opacity:1;visibility:visible;pointer-events:auto}.modal-card{background:#0f141ef2;border:1px solid var(--accent);box-shadow:0 0 50px #00f2ff26;padding:30px;border-radius:12px;max-width:380px;width:85%;text-align:center;transform:translateY(20px);transition:transform .3s}.modal-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0;padding-top:15px;border-top:1px solid rgba(255,255,255,.1);text-align:left;font-size:.9rem}.modal-stats-label{color:#fff9}.modal-stats-value{color:#fff;font-weight:700;text-align:right}.modal-stats-label.rating{color:var(--accent);font-weight:800;text-transform:uppercase;letter-spacing:1px}.modal-stats-value.rating{color:#fc0;font-size:1.2rem;text-shadow:0 0 10px rgba(255,204,0,.5);letter-spacing:2px}#modal-overlay.active .modal-card{transform:translateY(0)}.badge{position:relative;display:inline-block;padding:8px 24px;font-family:var(--font-display);font-size:.85rem;font-weight:800;letter-spacing:2px;color:var(--accent);text-transform:uppercase;margin-bottom:20px;text-shadow:0 0 10px rgba(0,242,255,.4);background:transparent;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}.badge:before{content:"";position:absolute;inset:0;background:linear-gradient(45deg,#00f2ff80,#00f2ff33);z-index:-2}.badge:after{content:"";position:absolute;inset:1px;background:#0a0f19f2;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);z-index:-1}.modal-btn-container{display:flex;flex-direction:column;gap:15px;align-items:center;width:100%}.main-btn{position:relative;background:transparent;color:var(--accent);width:100%;padding:14px;font-weight:800;text-transform:uppercase;font-size:1rem;border:none;cursor:pointer;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);transition:transform .2s;font-family:var(--font-display);display:flex;justify-content:center;align-items:center;letter-spacing:2px}.main-btn:before{content:"";position:absolute;inset:0;background:#00f2ff4d;z-index:-2;transition:background .2s}.main-btn:after{content:"";position:absolute;inset:1px;background:#10141ee6;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);z-index:-1;transition:background .2s}.main-btn:hover{transform:translateY(-2px);color:#fff;text-shadow:0 0 8px var(--accent)}.main-btn:hover:before{background:var(--accent)}.main-btn:hover:after{background:#10141ef2}.main-btn:active{transform:translateY(0) scale(.98)}.main-btn.danger{color:#f33}.main-btn.danger:before{background:#ff33334d}.main-btn.danger:hover{text-shadow:0 0 8px #ff3333}.main-btn.danger:hover:before{background:#f33}button.secondary-btn{position:relative;width:100%;background:transparent;color:#888;font-size:.9rem;padding:14px;border:none;cursor:pointer;text-transform:uppercase;letter-spacing:1px;transition:all .2s;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);font-family:var(--font-display);display:flex;justify-content:center;align-items:center}button.secondary-btn:before{content:"";position:absolute;inset:0;background:#6464644d;z-index:-2;transition:background .2s}button.secondary-btn:after{content:"";position:absolute;inset:1px;background:#10141ee6;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);z-index:-1;transition:background .2s}button.secondary-btn:hover{color:#aaa;text-shadow:0 0 5px rgba(200,200,200,.5);transform:translateY(-2px)}button.secondary-btn:hover:before{background:#666}button.secondary-btn:hover:after{background:#141923f2}button.secondary-btn:active{transform:translateY(0) scale(.98)}.modal.victory h2{color:var(--accent)}.modal.defeat h2,.modal.defeat .main-btn{color:var(--enemy)}.modal.defeat .main-btn:before{background:#ff00554d}.modal.defeat .main-btn:hover{text-shadow:0 0 8px var(--enemy)}.modal.defeat .main-btn:hover:before{background:var(--enemy)}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:left;margin-bottom:30px}.help-row{display:flex;align-items:center;gap:15px;background:#ffffff08;padding:12px;border-radius:10px;border:1px solid transparent;transition:all .2s ease}.help-row:hover{background:#ffffff14;border-color:var(--accent);transform:translateY(-2px)}.help-row:last-child{grid-column:1 / -1}.help-icon{width:32px;height:32px;flex-shrink:0}.help-content{display:flex;flex-direction:column;gap:2px}.help-title{font-size:.75rem;font-weight:800;color:var(--accent);letter-spacing:1px;text-transform:uppercase}.help-desc{font-size:.9rem;color:#ddd;line-height:1.3}@keyframes titleFloat{0%,to{transform:translate(-50%,-50%) scale(1);text-shadow:0 0 20px rgba(0,242,255,.5)}50%{transform:translate(-50%,-52%) scale(1.02);text-shadow:0 0 35px rgba(0,242,255,.8)}}@keyframes pulse-gold{0%{box-shadow:0 0 #fc06}70%{box-shadow:0 0 0 10px #fc00}to{box-shadow:0 0 #fc00}}@keyframes pulse-blue{0%{box-shadow:0 0 #00f2ff66}70%{box-shadow:0 0 0 10px #00f2ff00}to{box-shadow:0 0 #00f2ff00}}@media(max-width:768px){#game-title{font-size:10vw;letter-spacing:2px;width:100%;text-align:center;white-space:nowrap;overflow:visible;text-overflow:clip}body.mission-select #game-title{top:10%;font-size:3rem;letter-spacing:6px}body.in-game #game-title{font-size:1.4rem;white-space:nowrap}.mission-grid{grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;padding:10px}.ms-btn{padding:10px}.ms-num{font-size:1.2rem}.ms-title{font-size:.6rem}.menu-btn{padding:22px;font-size:1.1rem}.modal{padding:25px;font-size:.9rem}.modal h2{font-size:1.5rem;margin-bottom:10px}.main-btn,.secondary-btn{padding:16px;font-size:1.1rem}}@media(max-width:672px){h1{font-size:2.5rem;margin-bottom:20px;letter-spacing:2px}.top-bar{padding:8px 12px 15px}.mission-title{font-size:.8rem;margin-bottom:2px}.mission-desc{font-size:.65rem;line-height:1.2}.mission-grid{gap:10px;padding:10px;grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}.bottom-bar{flex-wrap:wrap;padding:10px;background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.8) 60%,transparent 100%);gap:10px}.hud-panel{margin-bottom:0;gap:8px}.hud-panel.left{order:2;flex:1;justify-content:flex-start}.hud-panel.right{order:3;flex:1;justify-content:flex-end}.hud-panel.center{order:1;width:100%;margin-bottom:10px;margin-top:0}.hud-btn{width:42px;height:42px;padding:8px}.hud-action-btn{min-width:80px;height:48px;padding:0 6px}.btn-label{font-size:.6rem}.turn-status{width:100%;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem}.turn-label{font-size:.8rem}.turn-value{font-size:1.1rem}.modal-card{padding:20px;width:90%}.help-grid{grid-template-columns:1fr}.help-row{padding:15px}}