*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#040810;--bg2:#0a1020;--bg3:#0d1528;--bg4:#111e38;--brd:#1a2a4a;--brd2:#2a4a8a;--c1:#00d4ff;--c2:#ff6b35;--c3:#a855f7;--c4:#10b981;--tx:#c8d8f0;--txd:#5a7090;--txb:#fff;--red:#ff3355;--grn:#00ff88;--ylw:#ffcc00;--met:#8899aa;--kri:#44aadd;--deu:#44dd88}
html,body{height:100%;background:var(--bg);color:var(--tx);font-family:'Rajdhani',sans-serif;overflow-x:hidden}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--brd2);border-radius:3px}
input,select,button,textarea{font-family:inherit}
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 30% 40%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 50% 10%,rgba(255,255,255,.9),transparent),radial-gradient(1px 1px at 70% 65%,rgba(255,255,255,.4),transparent),radial-gradient(1px 1px at 88% 28%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 20% 80%,rgba(0,212,255,.3),transparent),radial-gradient(1px 1px at 60% 90%,rgba(168,85,247,.25),transparent);animation:twinkle 6s ease-in-out infinite alternate}
@keyframes twinkle{0%{opacity:.5}100%{opacity:1}}
.nebula{position:fixed;inset:-50%;z-index:0;pointer-events:none;background:radial-gradient(ellipse at 30% 50%,rgba(0,50,120,.12) 0%,transparent 50%),radial-gradient(ellipse at 70% 30%,rgba(80,0,120,.07) 0%,transparent 40%);animation:drift 25s ease-in-out infinite alternate}
@keyframes drift{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(2%,-1%) rotate(1deg)}}
.screen{display:none;position:relative;z-index:1;min-height:100vh}.screen.active{display:flex}
#landing{flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:1em}
.logo{font-family:'Orbitron',sans-serif;font-size:clamp(2.5rem,8vw,5.5rem);font-weight:900;background:linear-gradient(135deg,var(--c1),var(--c3) 50%,var(--c2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.15em;animation:glow 3s ease-in-out infinite alternate;user-select:none}
@keyframes glow{0%{filter:brightness(1) drop-shadow(0 0 15px rgba(0,212,255,.25))}100%{filter:brightness(1.15) drop-shadow(0 0 35px rgba(0,212,255,.5))}}
.sub{font-family:'Orbitron',sans-serif;font-size:.85rem;color:var(--txd);letter-spacing:.5em;text-transform:uppercase;margin-bottom:2em}
.panels{display:flex;gap:2em;flex-wrap:wrap;justify-content:center}
.pnl{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--brd);border-radius:12px;padding:2.2em;width:330px;position:relative;overflow:hidden;transition:.3s}
.pnl::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--c1),transparent);opacity:0;transition:.3s}
.pnl:hover{border-color:var(--brd2);transform:translateY(-4px)}.pnl:hover::before{opacity:1}
.pnl.join::before{background:linear-gradient(90deg,transparent,var(--c2),transparent)}.pnl.join:hover{border-color:rgba(255,107,53,.4)}
.pnl h2{font-family:'Orbitron',sans-serif;font-size:1.2rem;color:var(--c1);margin-bottom:1.2em;letter-spacing:.07em}
.pnl.join h2{color:var(--c2)}
.inp{width:100%;padding:.75em 1em;background:var(--bg);border:1px solid var(--brd);border-radius:8px;color:var(--txb);font-size:1.05rem;margin-bottom:.8em;outline:none;transition:.3s}
.inp:focus{border-color:var(--c1)}.inp::placeholder{color:var(--txd)}
.btn{width:100%;padding:.85em;font-family:'Orbitron',sans-serif;font-size:.9rem;font-weight:700;border:none;border-radius:8px;cursor:pointer;text-transform:uppercase;letter-spacing:.1em;transition:.3s}
.btn1{background:linear-gradient(135deg,#004466,#006699);color:var(--c1);border:1px solid var(--c1)}
.btn1:hover{background:linear-gradient(135deg,#005577,#0088bb);box-shadow:0 0 25px rgba(0,212,255,.3);transform:translateY(-2px)}
.btn2{background:linear-gradient(135deg,#442200,#663300);color:var(--c2);border:1px solid var(--c2)}
.btn2:hover{background:linear-gradient(135deg,#553300,#884400);box-shadow:0 0 25px rgba(255,107,53,.3);transform:translateY(-2px)}
.err{background:rgba(255,51,85,.1);border:1px solid var(--red);color:var(--red);padding:.6em;border-radius:6px;margin-bottom:.8em;display:none;font-size:.9rem}
#lobby{flex-direction:column;align-items:center;padding:2em}
.lob-wrap{max-width:660px;width:100%}
.lob-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5em;flex-wrap:wrap;gap:.5em}
.lob-logo{font-family:'Orbitron',sans-serif;font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,var(--c1),var(--c3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.code-box{background:var(--bg2);border:2px solid var(--c1);border-radius:10px;padding:.7em 1.3em;text-align:center;cursor:pointer;transition:.3s}
.code-box:hover{border-color:var(--txb)}
.code-lbl{font-size:.7rem;color:var(--txd);text-transform:uppercase;letter-spacing:.2em}
.code-val{font-family:'Orbitron',sans-serif;font-size:1.8rem;font-weight:900;color:var(--c1);letter-spacing:.3em}
.sec{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--brd);border-radius:12px;padding:1.8em;margin-bottom:1.2em}
.sec h3{font-family:'Orbitron',sans-serif;font-size:1rem;color:var(--c1);margin-bottom:.8em}
.pl-item{display:flex;align-items:center;justify-content:space-between;padding:.7em .9em;margin-bottom:.4em;background:var(--bg);border:1px solid var(--brd);border-radius:8px}
.pl-name{font-size:1.05rem;font-weight:600}
.pl-host{font-family:'Orbitron',sans-serif;font-size:.65rem;color:var(--c1);border:1px solid var(--c1);padding:.15em .5em;border-radius:4px;margin-right:.4em}
.btn-kick{background:0;border:1px solid var(--red);color:var(--red);padding:.25em .7em;border-radius:5px;font-size:.8rem;cursor:pointer;transition:.3s}
.btn-kick:hover{background:var(--red);color:#fff}
.btn-start{width:100%;padding:.9em;font-family:'Orbitron',sans-serif;font-size:1.1rem;font-weight:700;border:2px solid var(--grn);background:linear-gradient(135deg,#003322,#005533);color:var(--grn);border-radius:10px;cursor:pointer;text-transform:uppercase;letter-spacing:.12em;transition:.3s;margin-top:.8em}
.btn-start:hover{background:linear-gradient(135deg,#004433,#007744);box-shadow:0 0 35px rgba(0,255,136,.3);transform:translateY(-2px)}
.wait-msg{text-align:center;padding:1.5em;color:var(--txd);font-size:1rem}
#game{flex-direction:column;min-height:100vh}
.top{background:linear-gradient(180deg,var(--bg2),var(--bg));border-bottom:1px solid var(--brd);padding:.4em 1em;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;flex-wrap:wrap;gap:.3em}
.top-logo{font-family:'Orbitron',sans-serif;font-weight:900;font-size:1.1rem;background:linear-gradient(135deg,var(--c1),var(--c3));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.res-bar{display:flex;gap:1em;font-family:'Share Tech Mono',monospace;font-size:.85rem;flex-wrap:wrap}
.rs{display:flex;align-items:center;gap:.25em}.rv{font-weight:600}.rr{font-size:.7rem;color:var(--txd)}.rr.neg{color:var(--red)}
.rv-m{color:var(--met)}.rv-k{color:var(--kri)}.rv-d{color:var(--deu)}
.top-r{display:flex;align-items:center;gap:1em;flex-wrap:wrap}
.ener{font-family:'Share Tech Mono',monospace;font-size:.8rem}.ener-ok{color:var(--grn)}.ener-lo{color:var(--red)}
.scr{font-family:'Orbitron',sans-serif;font-size:.78rem;color:var(--c3)}
.hpb{width:100px;height:15px;background:var(--bg);border:1px solid var(--brd);border-radius:7px;overflow:hidden;position:relative}
.hpf{height:100%;border-radius:7px;transition:.5s;background:linear-gradient(90deg,var(--grn),#00cc66)}
.hpt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-family:'Orbitron',sans-serif;color:var(--txb);text-shadow:0 0 3px #000}
.tmr{font-family:'Orbitron',sans-serif;font-size:.95rem;color:var(--ylw);letter-spacing:.04em}
.tmr-bar{background:var(--bg);border-bottom:1px solid var(--brd);text-align:center;padding:.2em 0;position:sticky;top:38px;z-index:99}
.nav{display:flex;background:var(--bg2);border-bottom:1px solid var(--brd);overflow-x:auto;position:sticky;top:65px;z-index:98}
.nb{padding:.65em 1.1em;font-family:'Orbitron',sans-serif;font-size:.68rem;font-weight:700;color:var(--txd);background:0;border:none;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:.3s}
.nb:hover{color:var(--tx);background:rgba(255,255,255,.02)}.nb.act{color:var(--c1);border-bottom-color:var(--c1)}
.cnt{max-width:1200px;margin:0 auto;padding:1.2em;flex:1}
.tab{display:none}.tab.act{display:block}
.cg{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.9em}
.cd{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--brd);border-radius:10px;padding:1em;transition:.3s}
.cd:hover{border-color:var(--brd2);background:var(--bg4)}
.cd-h{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.4em}
.cd-t{font-family:'Orbitron',sans-serif;font-size:.78rem;color:var(--c1)}
.cd-l{font-family:'Orbitron',sans-serif;font-size:.72rem;color:var(--c3);background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.3);padding:.1em .4em;border-radius:4px}
.cd-d{font-size:.8rem;color:var(--txd);margin-bottom:.4em}
.cd-s{font-size:.75rem;color:var(--txd);margin-bottom:.35em}
.cd-c{display:flex;gap:.6em;flex-wrap:wrap;margin-bottom:.45em;font-size:.8rem}
.ci{display:flex;align-items:center;gap:.2em}.ci.ok{color:var(--grn)}.ci.no{color:var(--red)}
.cd-r{font-size:.75rem;color:var(--txd);margin-bottom:.35em;padding:.3em .45em;background:rgba(0,0,0,.2);border-radius:4px}
.rq-y{color:var(--grn)}.rq-n{color:var(--red)}
.cnt-row{display:flex;gap:.4em;margin-bottom:.4em;align-items:center}
.cnt-inp{width:60px;padding:.3em;background:var(--bg);border:1px solid var(--brd);border-radius:4px;color:var(--txb);font-family:'Share Tech Mono',monospace;font-size:.85rem;text-align:center;outline:none}
.cnt-inp:focus{border-color:var(--c1)}.cnt-lbl{font-size:.8rem;color:var(--txd)}
.shp-n{font-family:'Orbitron',sans-serif;font-size:.9rem;color:var(--grn);font-weight:700}
.bb{width:100%;padding:.5em;font-family:'Orbitron',sans-serif;font-size:.68rem;font-weight:700;border:1px solid var(--c1);background:linear-gradient(135deg,rgba(0,100,150,.22),rgba(0,60,100,.22));color:var(--c1);border-radius:6px;cursor:pointer;transition:.3s;text-transform:uppercase;letter-spacing:.07em}
.bb:hover:not(:disabled){background:linear-gradient(135deg,rgba(0,140,200,.3),rgba(0,80,130,.3));box-shadow:0 0 10px rgba(0,212,255,.18)}
.bb:disabled{opacity:.3;cursor:not-allowed}
.bb.bldg{border-color:var(--ylw);color:var(--ylw);background:linear-gradient(135deg,rgba(100,80,0,.22),rgba(60,50,0,.22))}
.qb{background:var(--bg2);border:1px solid var(--brd);border-radius:8px;padding:.45em .8em;margin-bottom:.7em;display:flex;align-items:center;justify-content:space-between}
.qn{font-weight:600;color:var(--ylw);font-size:.85rem}.qt{font-family:'Orbitron',sans-serif;font-size:.8rem;color:var(--ylw)}
.ov-g{display:grid;grid-template-columns:1fr 1fr;gap:1em}@media(max-width:768px){.ov-g{grid-template-columns:1fr}}
.ov-s{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--brd);border-radius:10px;padding:1em}
.ov-s h4{font-family:'Orbitron',sans-serif;font-size:.78rem;color:var(--c1);margin-bottom:.6em;border-bottom:1px solid var(--brd);padding-bottom:.35em}
.ov-r{display:flex;justify-content:space-between;padding:.22em 0;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.02)}.ov-r:last-child{border:none}
.ov-v{color:var(--txb);font-weight:600}.ov-empty{color:var(--txd);font-size:.82rem;padding:.2em 0}
.atk-pnl{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:1px solid var(--brd);border-radius:10px;padding:1.2em;margin-bottom:1em}
.atk-pnl h4{font-family:'Orbitron',sans-serif;font-size:.82rem;margin-bottom:.7em}
.atk-h{color:var(--red)}.ally-h{color:var(--c4)}
.tgt-sel{width:100%;padding:.55em;background:var(--bg);border:1px solid var(--brd);border-radius:6px;color:var(--tx);font-size:.95rem;margin-bottom:.7em;outline:none}
.atk-ships{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.35em;margin-bottom:.7em}
.atk-row{display:flex;align-items:center;gap:.35em;padding:.3em;background:var(--bg);border-radius:4px}
.atk-row label{flex:1;font-size:.8rem}.av{color:var(--txd);font-size:.72rem}
.atk-row input{width:46px;padding:.2em;background:var(--bg3);border:1px solid var(--brd);border-radius:3px;color:var(--txb);font-family:'Share Tech Mono',monospace;text-align:center;font-size:.8rem;outline:none}
.action-btns{display:flex;gap:.4em;flex-wrap:wrap}
.btn-atk,.btn-spy,.btn-ally,.btn-recall{padding:.6em 1.3em;font-family:'Orbitron',sans-serif;font-size:.72rem;font-weight:700;border-radius:6px;cursor:pointer;transition:.3s;text-transform:uppercase;letter-spacing:.07em}
.btn-atk{border:1px solid var(--red);background:linear-gradient(135deg,rgba(150,0,30,.22),rgba(100,0,20,.22));color:var(--red)}
.btn-atk:hover{box-shadow:0 0 15px rgba(255,51,85,.25)}
.btn-spy{border:1px solid var(--c3);background:linear-gradient(135deg,rgba(80,0,120,.22),rgba(50,0,80,.22));color:var(--c3)}
.btn-ally{border:1px solid var(--c4);background:linear-gradient(135deg,rgba(0,80,60,.22),rgba(0,50,40,.22));color:var(--c4)}
.btn-ally:hover{box-shadow:0 0 15px rgba(16,185,129,.25)}
.btn-recall{padding:.4em .9em;font-size:.65rem;border:1px solid var(--ylw);background:linear-gradient(135deg,rgba(100,80,0,.2),rgba(60,50,0,.2));color:var(--ylw)}
.mi{margin-top:.8em}
.mi-item{display:flex;align-items:center;justify-content:space-between;padding:.45em .8em;margin-bottom:.3em;border-radius:6px;font-size:.85rem}
.mi-out{background:rgba(255,107,53,.07);border:1px solid rgba(255,107,53,.22)}.mi-in{background:rgba(255,51,85,.07);border:1px solid rgba(255,51,85,.22)}
.mi-t{font-family:'Orbitron',sans-serif;font-size:.78rem}.mi-type{font-size:.72rem;color:var(--c2);font-family:'Orbitron',sans-serif;margin-left:.4em}
.al-bar{position:fixed;bottom:0;left:0;right:0;z-index:200;display:flex;flex-direction:column;align-items:center;gap:.35em;padding:.35em;pointer-events:none}
.al{padding:.6em 1.2em;border-radius:8px;font-size:.88rem;font-weight:600;animation:sUp .3s ease-out;pointer-events:auto;max-width:550px;text-align:center}
@keyframes sUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.al-e{background:rgba(255,51,85,.12);border:1px solid var(--red);color:var(--red)}
.al-s{background:rgba(0,255,136,.12);border:1px solid var(--grn);color:var(--grn)}
.al-w{background:rgba(255,204,0,.12);border:1px solid var(--ylw);color:var(--ylw)}
.al-c{background:rgba(255,107,53,.12);border:1px solid var(--c2);color:var(--c2)}
.al-i{background:rgba(16,185,129,.12);border:1px solid var(--c4);color:var(--c4)}
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:300;display:none;align-items:center;justify-content:center}
.modal-ov.show{display:flex}
.modal{background:var(--bg2);border:1px solid var(--c3);border-radius:12px;padding:1.6em;max-width:550px;width:92%;max-height:82vh;overflow-y:auto}
.modal h3{font-family:'Orbitron',sans-serif;font-size:.9rem;color:var(--c3);margin-bottom:.7em}
.modal-x{float:right;background:0;border:0;color:var(--txd);font-size:1.3rem;cursor:pointer;line-height:1}.modal-x:hover{color:var(--txb)}
.rpt-section{margin-bottom:.8em}
.rpt-section h5{font-family:'Orbitron',sans-serif;font-size:.75rem;color:var(--c1);margin-bottom:.3em;border-bottom:1px solid var(--brd);padding-bottom:.2em}
.rpt-row{display:flex;justify-content:space-between;font-size:.82rem;padding:.15em 0}.rpt-val{font-weight:600;color:var(--txb)}
.rpt-result{font-family:'Orbitron',sans-serif;font-size:1rem;text-align:center;padding:.6em;margin-bottom:.6em;border-radius:8px}
.rpt-win{color:var(--grn);background:rgba(0,255,136,.08);border:1px solid rgba(0,255,136,.2)}
.rpt-lose{color:var(--red);background:rgba(255,51,85,.08);border:1px solid rgba(255,51,85,.2)}
.rpt-draw{color:var(--ylw);background:rgba(255,204,0,.08);border:1px solid rgba(255,204,0,.2)}
.rpt-round{display:flex;justify-content:space-between;padding:.15em .4em;background:rgba(0,0,0,.15);border-radius:3px;margin-bottom:.15em;font-size:.75rem}
.go-ov{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:400;display:none;align-items:center;justify-content:center}.go-ov.show{display:flex}
.go{background:linear-gradient(135deg,var(--bg2),var(--bg3));border:2px solid var(--c1);border-radius:16px;padding:2.5em;text-align:center;max-width:480px;width:92%}
.go h2{font-family:'Orbitron',sans-serif;font-size:1.7rem;color:var(--c1);margin-bottom:.7em}
.sc-list{list-style:none;text-align:left}
.sc-item{display:flex;justify-content:space-between;align-items:center;padding:.5em .8em;margin-bottom:.3em;background:var(--bg);border-radius:6px}
.sc-r{font-family:'Orbitron',sans-serif;color:var(--c1);font-weight:700;width:2em}.sc-n{flex:1;font-weight:600}.sc-p{font-family:'Orbitron',sans-serif;color:var(--c3)}.sc-dead{opacity:.5}
.btn-home{margin-top:1em;padding:.7em 1.5em;font-family:'Orbitron',sans-serif;font-size:.88rem;font-weight:700;border:1px solid var(--c1);background:linear-gradient(135deg,rgba(0,100,150,.22),rgba(0,60,100,.22));color:var(--c1);border-radius:8px;cursor:pointer}
.stationed-box{margin-top:.6em;background:var(--bg);border:1px solid rgba(16,185,129,.2);border-radius:8px;padding:.6em}
.stationed-box h5{font-family:'Orbitron',sans-serif;font-size:.72rem;color:var(--c4);margin-bottom:.3em}
.stationed-row{display:flex;justify-content:space-between;font-size:.82rem;padding:.15em 0}
.rpt-list-item{background:var(--bg);border:1px solid var(--brd);border-radius:6px;padding:.5em .7em;margin-bottom:.35em;cursor:pointer;transition:.3s;font-size:.82rem}
.rpt-list-item:hover{border-color:var(--brd2);background:var(--bg4)}
.rpt-list-meta{display:flex;justify-content:space-between;align-items:center}
.rpt-list-names{font-weight:600}
.rpt-list-result{font-family:'Orbitron',sans-serif;font-size:.7rem}