:root{--color-bg-darker: #040810;--color-bg-dark: #0a1424;--color-bg-panel: #0d1d33;--color-neon-blue: #00f0ff;--color-neon-blue-dim: rgba(0, 240, 255, .3);--color-neon-red: #ff0055;--color-neon-red-dim: rgba(255, 0, 85, .3);--color-neon-green: #39ff14;--color-neon-yellow: #ffea00;--color-text-bright: #e2f2ff;--color-text-muted: #8ca3be;--font-display: "Orbitron", "Outfit", system-ui, -apple-system, sans-serif;--font-body: "Outfit", system-ui, -apple-system, sans-serif;--font-mono: "Courier New", Courier, monospace}*{margin:0;padding:0;box-sizing:border-box}body{width:100vw;height:100vh;background-color:var(--color-bg-darker);color:var(--color-text-bright);font-family:var(--font-body);overflow:hidden}#app-container{display:flex;width:100vw;height:100vh;flex-direction:row;overflow:hidden}#game-container{flex:1;height:100vh;background-color:var(--color-bg-darker);position:relative;overflow:hidden;transition:all .3s ease-in-out}#ui-container{width:350px;height:100vh;background-color:var(--color-bg-dark);border-left:2px solid var(--color-neon-blue);box-shadow:-4px 0 20px #00f0ff26;position:relative;z-index:10;transition:all .3s ease-in-out;overflow:visible}#ui-container.collapsed{width:160px}#ui-container.collapsed #collapsible-content{display:none!important}#ui-container.collapsed .dashboard-panel{padding:1rem .5rem}.ui-toggle-button{position:absolute;top:50%;left:-32px;transform:translateY(-50%);width:30px;height:60px;background-color:var(--color-bg-dark);border:2px solid var(--color-neon-blue);border-right:none;border-radius:6px 0 0 6px;color:var(--color-neon-blue);font-size:.9rem;font-weight:700;cursor:pointer;z-index:20;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:-4px 0 10px #00f0ff26}.ui-toggle-button:hover{color:#fff;background-color:var(--color-neon-blue-dim);box-shadow:-4px 0 15px #00f0ff66;text-shadow:0 0 5px #ffffff}.ui-toggle-button:active{background-color:var(--color-neon-blue);color:var(--color-bg-darker)}.dashboard-panel{display:flex;flex-direction:column;height:100%;padding:1.5rem;justify-content:space-between;background-image:linear-gradient(rgba(0,240,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.02) 1px,transparent 1px);background-size:20px 20px}.dashboard-header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--color-neon-blue-dim);padding-bottom:1rem}.glow-title{font-family:var(--font-display);font-weight:900;font-size:1.2rem;letter-spacing:2px;color:var(--color-neon-blue);text-shadow:0 0 10px rgba(0,240,255,.5)}.status-indicator{display:flex;align-items:center;gap:.5rem}.status-dot{width:8px;height:8px;border-radius:50%;background-color:#748ca3}.status-dot.active{background-color:var(--color-neon-green);box-shadow:0 0 8px var(--color-neon-green)}.status-dot.pulsing{background-color:var(--color-neon-yellow);box-shadow:0 0 8px var(--color-neon-yellow);animation:pulse-glow 1.5s infinite alternate}@keyframes pulse-glow{0%{opacity:.4}to{opacity:1}}#connection-status{font-family:var(--font-display);font-size:.75rem;font-weight:700;color:var(--color-text-muted)}#connection-status.connected{color:var(--color-neon-green)}#connection-status.connecting{color:var(--color-neon-yellow)}.dashboard-section{background:#0d1d3399;border:1px solid var(--color-neon-blue-dim);border-radius:4px;padding:1rem;margin-top:1rem}.section-title{font-family:var(--font-display);font-size:.8rem;font-weight:700;color:var(--color-neon-blue);letter-spacing:1px;margin-bottom:.75rem;text-transform:uppercase;border-left:3px solid var(--color-neon-blue);padding-left:.5rem}.info-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;font-size:.85rem}.info-row:last-child{margin-bottom:0}.info-row span{color:var(--color-text-muted);font-weight:600}#room-input{background:var(--color-bg-darker);border:1px solid var(--color-neon-blue-dim);color:var(--color-text-bright);font-family:var(--font-display);font-size:.85rem;padding:.4rem .6rem;border-radius:4px;width:50%;transition:all .3s ease}#room-input:focus{outline:none;border-color:var(--color-neon-blue);box-shadow:0 0 8px #00f0ff66}#connect-btn{background:var(--color-neon-blue-dim);border:1px solid var(--color-neon-blue);color:var(--color-neon-blue);font-family:var(--font-display);font-size:.8rem;font-weight:700;padding:.4rem .8rem;border-radius:4px;cursor:pointer;transition:all .2s ease}#connect-btn:hover{background:var(--color-neon-blue);color:var(--color-bg-darker);box-shadow:0 0 10px #00f0ff99}.neon-text-blue{color:var(--color-neon-blue);text-shadow:0 0 5px var(--color-neon-blue-dim);font-weight:700}.neon-text-red{color:var(--color-neon-red);text-shadow:0 0 5px var(--color-neon-red-dim);font-weight:700}.coordinates-display{display:flex;gap:1rem;margin-bottom:.75rem}.coord-box{flex:1;background:var(--color-bg-darker);border:1px solid rgba(0,240,255,.2);border-radius:4px;padding:.5rem;display:flex;flex-direction:column;align-items:center}.coord-box .label{font-size:.7rem;color:var(--color-text-muted);font-family:var(--font-display);margin-bottom:.25rem}.coord-box .value{font-size:1.5rem;font-weight:900;font-family:var(--font-display);color:var(--color-neon-blue);text-shadow:0 0 10px rgba(0,240,255,.3)}.status-alert{background:#ff00550d;border:1px dashed var(--color-neon-red);border-radius:4px;padding:.5rem;text-align:center;font-family:var(--font-display);font-size:.75rem;color:var(--color-neon-red);animation:glow-pulse-red 2s infinite alternate}@keyframes glow-pulse-red{0%{box-shadow:0 0 2px var(--color-neon-red-dim)}to{box-shadow:0 0 8px var(--color-neon-red-dim)}}.combat-log{flex-grow:1;display:flex;flex-direction:column;min-height:180px;margin-bottom:1.5rem}.log-content{flex-grow:1;overflow-y:auto;font-family:var(--font-mono);font-size:.75rem;line-height:1.4;color:var(--color-text-muted);padding:.5rem;background:var(--color-bg-darker);border-radius:4px;border:1px solid rgba(140,163,190,.15);max-height:250px}.log-content::-webkit-scrollbar{width:6px}.log-content::-webkit-scrollbar-thumb{background:var(--color-neon-blue-dim);border-radius:3px}.log-entry{margin-bottom:.4rem;border-bottom:1px solid rgba(255,255,255,.02);padding-bottom:.2rem;word-break:break-all}.log-entry.system{color:var(--color-text-muted)}.log-entry.incoming{color:var(--color-neon-yellow)}.log-entry.outgoing{color:var(--color-neon-blue)}.log-entry.hit{color:var(--color-neon-red);font-weight:700}.log-entry.miss{color:#748ca3}.dashboard-footer{margin-top:auto;border-top:2px solid var(--color-neon-blue-dim);padding-top:1.5rem}.fire-button{width:100%;height:60px;background:linear-gradient(135deg,#7a001e,#f05);border:2px solid var(--color-neon-red);color:#fff;border-radius:6px;font-family:var(--font-display);font-size:1.2rem;font-weight:900;letter-spacing:3px;cursor:pointer;position:relative;overflow:hidden;transition:all .15s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 0 15px #f056;display:flex;align-items:center;justify-content:center}.fire-button:not(:disabled):hover{transform:translateY(-2px) scale(1.02);background:linear-gradient(135deg,#aa002a,#ff1e6f);box-shadow:0 0 25px #f05c,inset 0 0 10px #ffffff4d;text-shadow:0 0 8px rgba(255,255,255,.8)}.fire-button:not(:disabled):active{transform:translateY(2px) scale(.98);box-shadow:0 0 8px #f059}.fire-button:disabled{background:#1a080d;border-color:#f053;color:#fff3;cursor:not-allowed;box-shadow:none}.fire-button:disabled .btn-glitch-text{text-decoration:line-through}.fire-button:before{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transition:none}.fire-button:not(:disabled):hover:before{left:200%;transition:left .6s ease-in-out}.deployment-tools{margin-top:1rem;background:#00f0ff08}.deploy-info{display:flex;flex-direction:column;align-items:center;margin-bottom:.75rem}.active-ship-text{font-family:var(--font-display);font-size:.9rem;font-weight:700;color:var(--color-neon-yellow);text-shadow:0 0 5px rgba(255,234,0,.4);margin-top:.25rem;text-align:center}.deploy-actions{display:flex;gap:.5rem;width:100%;margin-top:.5rem}.deploy-action-btn{flex:1;background:#0d1d33cc;border:1px solid var(--color-neon-blue-dim);color:var(--color-neon-blue);font-family:var(--font-display);font-size:.75rem;font-weight:700;padding:.4rem;border-radius:4px;cursor:pointer;transition:all .2s ease;text-align:center}.deploy-action-btn:hover{background:var(--color-neon-blue-dim);border-color:var(--color-neon-blue);box-shadow:0 0 8px var(--color-neon-blue-dim)}.deploy-action-btn.reset{color:var(--color-neon-red);border-color:var(--color-neon-red-dim)}.deploy-action-btn.reset:hover{background:var(--color-neon-red-dim);border-color:var(--color-neon-red);box-shadow:0 0 8px var(--color-neon-red-dim)}.ready-button{width:100%;height:60px;background:linear-gradient(135deg,#115c30,#1db954);border:2px solid var(--color-neon-green);color:#fff;border-radius:6px;font-family:var(--font-display);font-size:1.2rem;font-weight:900;letter-spacing:3px;cursor:pointer;position:relative;overflow:hidden;transition:all .15s ease;box-shadow:0 0 15px #1db95466;display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.ready-button:not(:disabled):hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 25px #1db954cc}.ready-button:not(:disabled):active{transform:translateY(2px) scale(.98)}.ready-button:disabled{background:#091a10;border-color:#1db95433;color:#fff3;cursor:not-allowed;box-shadow:none}.view-toggle-button{width:100%;height:45px;background:var(--color-bg-darker);border:1px solid var(--color-neon-blue);color:var(--color-neon-blue);border-radius:6px;font-family:var(--font-display);font-size:.95rem;font-weight:700;letter-spacing:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 0 10px #00f0ff26}.view-toggle-button:hover{background:var(--color-neon-blue-dim);color:#fff;box-shadow:0 0 15px #00f0ff66}.view-toggle-button:active{transform:scale(.98)}.ready-button.play-again{background:linear-gradient(135deg,#104f7a,#00f0ff);border-color:var(--color-neon-blue);box-shadow:0 0 15px #00f0ff66}.ready-button.play-again:not(:disabled):hover{box-shadow:0 0 25px #00f0ffcc}