.lobby{display:flex;flex-direction:column;height:100vh;padding:20px;background:linear-gradient(135deg,#0a0e27,#1a1f3a)}.lobby-header{text-align:center;margin-bottom:40px}.lobby-header h1{font-size:3rem;margin-bottom:10px;background:linear-gradient(45deg,#00d4ff,#7b2ff7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.lobby-header p{font-size:1.2rem;color:#888}.ships-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:30px;flex:1;overflow-y:auto}.ship-card{background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:15px;padding:25px;transition:all .3s ease}.ship-card:hover{border-color:#ffffff4d;transform:translateY(-5px)}.ship-card.my-ship{border-color:#00d4ff;box-shadow:0 0 30px #00d4ff4d}.ship-card.ready{border-color:#0f8;box-shadow:0 0 30px #00ff884d}.ship-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.ship-header h2{font-size:1.5rem;color:#fff}.ready-badge{background:#0f8;color:#000;padding:5px 15px;border-radius:20px;font-weight:700;font-size:.9rem}.ship-stats{display:flex;gap:20px;margin-bottom:20px;padding:15px;background:#0000004d;border-radius:10px}.stat{display:flex;gap:10px;font-size:1rem}.stat span:first-child{color:#888}.stat span:last-child{color:#fff;font-weight:700}.crew-slots{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}.crew-slot{display:flex;justify-content:space-between;align-items:center;padding:15px;background:#0000004d;border:2px solid;border-radius:10px;transition:all .2s ease}.crew-slot.empty{border-style:dashed;opacity:.7}.crew-slot.taken{border-style:solid}.crew-slot.me{background:#00d4ff1a}.role-info{display:flex;align-items:center;gap:10px}.role-icon{font-size:1.5rem}.role-name{font-size:1.1rem;font-weight:700}.player-info{display:flex;align-items:center;gap:10px}.player-tag{background:#fff3;padding:5px 15px;border-radius:15px;font-size:.9rem;font-weight:700}.player-tag.offline{background:#ff64004d;color:#f90;animation:blink 2s infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.5}}.crew-slot.disconnected{opacity:.6;border-style:dashed!important}.join-btn,.leave-btn,.ready-btn{padding:8px 20px;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:all .2s ease}.join-btn{background:#00d4ff;color:#000}.join-btn:hover:not(:disabled){background:#00b8e6;transform:scale(1.05)}.join-btn:disabled{opacity:.5;cursor:not-allowed}.leave-btn{background:#f44;color:#fff}.leave-btn:hover{background:#c00}.ready-btn{width:100%;padding:15px;font-size:1.2rem;background:#0f8;color:#000}.ready-btn:hover{background:#00cc6a;transform:scale(1.02)}.ready-btn.unready{background:#f44;color:#fff}.ship-status{text-align:center;padding:10px;color:#fa0;font-style:italic}.lobby-footer{text-align:center;margin-top:30px;padding:20px;background:#0000004d;border-radius:10px}.lobby-footer p{color:#888;font-size:1.1rem}.grid{position:relative;padding:10px;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.grid-cells{display:grid;gap:2px;background:#ffffff0d;padding:2px;border-radius:10px;box-shadow:0 0 50px #00d4ff33;width:min(calc(100% - 20px),calc(100vh - 250px));height:min(calc(100% - 20px),calc(100vh - 250px));aspect-ratio:1}.grid-cell{aspect-ratio:1;background:#0a0e27cc;border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;position:relative;transition:all .2s ease;min-width:0;min-height:0;overflow:hidden}.grid-cell:hover{background:#ffffff0d;border-color:#ffffff4d}.grid-cell.has-ship{background:#ffffff1a;border:2px solid var(--ship-color, #00d4ff);box-shadow:inset 0 0 10px var(--ship-color, #00d4ff)}.grid-cell.has-ship.my-ship{background:#ffffff26;border:3px solid var(--ship-color, #00d4ff);box-shadow:0 0 15px var(--ship-color, #00d4ff),inset 0 0 15px var(--ship-color, #00d4ff);animation:pulse 2s infinite}@keyframes pulse{0%,to{box-shadow:0 0 20px #00d4ff80}50%{box-shadow:0 0 30px #00d4ffcc}}.grid-cell.has-missile{background:#ff44444d;border-color:#f44}.ship-marker{display:flex;flex-direction:column;align-items:center;gap:1px}.ship-icon{font-size:clamp(.8rem,2vmin,1.5rem);filter:drop-shadow(0 0 5px rgba(0,212,255,.8))}.ship-health{display:flex;gap:1px;font-size:clamp(.4rem,1vmin,.6rem);color:#0f8}.health-dot{text-shadow:0 0 5px #00ff88}.shield-indicator{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.shield-bubble{position:absolute;top:-5px;left:-5px;right:-5px;bottom:-5px;border:3px solid #00ff88;border-radius:50%;animation:shield-glow 1s infinite;box-shadow:0 0 15px #0f89,inset 0 0 15px #00ff884d}@keyframes shield-glow{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.7}}.missile-marker{font-size:clamp(.8rem,2vmin,1.5rem);color:#f44;text-shadow:0 0 10px #ff4444;animation:missile-pulse .5s infinite}@keyframes missile-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.grid-labels-x,.grid-labels-y{display:none}.label{display:flex;align-items:center;justify-content:center;color:#888;font-size:.8rem;font-weight:700}.grid-cell.explosion{background:#ff640066!important;border-color:#ff6400!important;animation:explosion-outer .5s ease-out}.grid-cell.explosion-center{background:#ff3200cc!important;border-color:#ff3200!important;animation:explosion-center .5s ease-out;box-shadow:0 0 30px #ff6400cc}.explosion-marker{font-size:clamp(.8rem,2vmin,1.8rem);animation:explosion-shake .3s infinite}@keyframes explosion-center{0%{transform:scale(1.5);background:#ff0}to{transform:scale(1);background:#ff3200cc}}@keyframes explosion-outer{0%{transform:scale(1.3);background:#ffc800cc}to{transform:scale(1);background:#ff640066}}@keyframes explosion-shake{0%,to{transform:translate(0)}25%{transform:translate(-2px)}75%{transform:translate(2px)}}.controls{display:flex;flex-direction:column;gap:20px}.controls h3{margin:0;font-size:1.5rem;text-align:center;color:#fff}.control-description{text-align:center;color:#888;margin:0}.direction-grid{display:flex;flex-direction:column;gap:10px;padding:20px}.direction-row{display:flex;justify-content:center;gap:10px}.spacer{width:70px}.direction-btn{width:70px;height:70px;font-size:2rem;background:#00d4ff33;border:2px solid #00d4ff;border-radius:10px;color:#00d4ff;cursor:pointer;transition:all .2s ease}.direction-btn:hover{background:#00d4ff66;transform:scale(1.1)}.direction-btn.selected{background:#00d4ff;color:#000;box-shadow:0 0 20px #00d4ffcc}.direction-btn.fire{background:#f443;border-color:#f44;color:#f44}.direction-btn.fire:hover{background:#f446}.direction-btn.fire.selected{background:#f44;color:#fff;box-shadow:0 0 20px #f44c}.center-indicator{width:70px;height:70px;display:flex;align-items:center;justify-content:center;font-size:2rem;background:#00000080;border:2px solid rgba(255,255,255,.2);border-radius:50%;color:#00d4ff}.center-indicator.fire{color:#f44}.engineer-actions{display:flex;flex-direction:column;gap:15px}.action-btn{display:flex;align-items:center;gap:15px;padding:15px 20px;background:#fa03;border:2px solid #ffaa00;border-radius:10px;color:#fa0;cursor:pointer;transition:all .2s ease;font-size:1rem}.action-btn:hover{background:#ffaa004d;transform:translate(5px)}.action-btn.selected{background:#fa0;color:#000;box-shadow:0 0 20px #fa09}.action-btn.double{background:linear-gradient(135deg,#fa0,#f60);color:#000;box-shadow:0 0 30px #fa0c;animation:double-pulse 1s infinite}.double-badge{position:absolute;top:-8px;right:-8px;background:#f30;color:#fff;font-size:.8rem;font-weight:700;padding:2px 8px;border-radius:10px;box-shadow:0 0 10px #ff3200cc}@keyframes double-pulse{0%,to{box-shadow:0 0 20px #fa09}50%{box-shadow:0 0 35px #ff6400}}.action-btn{position:relative}.action-icon{font-size:1.8rem}.action-name{flex:1;font-weight:700}.action-cost{font-size:.9rem;padding:3px 10px;background:#0000004d;border-radius:15px}.energy-bar{padding:15px;background:#0000004d;border-radius:10px}.energy-label{color:#888;margin-bottom:10px;font-size:.9rem}.energy-display{display:flex;gap:10px;font-size:2rem}.energy-dot{color:#333}.energy-dot.filled{color:#fa0;text-shadow:0 0 10px #ffaa00}.info-box{padding:15px;background:#0000004d;border-radius:10px;border:1px solid rgba(255,255,255,.1)}.info-box p{margin:5px 0;color:#ccc}.info-box strong{color:#fff}.info-box ul{margin:10px 0;padding-left:20px;color:#ccc}.info-box li.empty{color:#666;font-style:italic}.hint{color:#888!important;font-size:.9rem;font-style:italic}.hint-tip{color:#00d4ff!important;margin-top:10px!important;padding:8px;background:#00d4ff1a;border-radius:5px;font-style:normal}.clear-btn{width:100%;margin-top:10px;padding:8px 15px;background:#f443;border:1px solid #ff4444;border-radius:8px;color:#f44;cursor:pointer;font-size:.9rem;transition:all .2s ease}.clear-btn:hover{background:#f446}.engineer-status{margin-top:10px;padding:10px 15px;border-radius:8px;font-weight:700;text-align:center;transition:all .3s ease}.engineer-status.active{background:#0f83;border:2px solid #00ff88;color:#0f8;animation:pulse-green 1s ease-in-out infinite}.engineer-status.inactive{background:#ffaa001a;border:2px dashed #ffaa00;color:#fa0}@keyframes pulse-green{0%,to{box-shadow:0 0 5px #00ff884d}50%{box-shadow:0 0 20px #0f89}}.game-container{display:flex;flex-direction:column;height:100vh;background:linear-gradient(135deg,#0a0e27,#1a1f3a)}.game-header{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;background:#0000004d;border-bottom:2px solid rgba(255,255,255,.1)}.game-title h1{font-size:2rem;margin:0;background:linear-gradient(45deg,#00d4ff,#7b2ff7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-status{display:inline-block;margin-left:20px;padding:5px 15px;background:#0f83;border:1px solid #00ff88;border-radius:20px;font-size:.9rem;color:#0f8}.ship-info{display:flex;flex-direction:column;align-items:center;gap:10px}.ship-name-badge{display:flex;align-items:center;gap:10px;padding:10px 20px;border:3px solid;border-radius:15px;animation:ship-color-glow 2s infinite}.ship-name-badge h2{margin:0;font-size:1.3rem;text-shadow:0 0 10px currentColor}.ship-icon-large{font-size:1.8rem;filter:drop-shadow(0 0 8px currentColor)}@keyframes ship-color-glow{0%,to{box-shadow:0 0 10px var(--ship-color, #00d4ff)}50%{box-shadow:0 0 25px var(--ship-color, #00d4ff),0 0 40px var(--ship-color, #00d4ff)}}.ship-stats-bar{display:flex;gap:15px}.stat-item{display:flex;align-items:center;gap:5px;padding:5px 12px;background:#00000080;border-radius:20px;font-size:1rem;font-weight:700;border:2px solid rgba(255,255,255,.2)}.role-badge{padding:10px 25px;border-radius:25px;font-size:1.2rem;font-weight:700;border:2px solid}.role-badge[data-role=pilot]{background:#00d4ff33;border-color:#00d4ff;color:#00d4ff}.role-badge[data-role=gunner]{background:#f443;border-color:#f44;color:#f44}.role-badge[data-role=engineer]{background:#fa03;border-color:#fa0;color:#fa0}.game-main{display:flex;flex:1;gap:20px;padding:20px;overflow:hidden}.grid-container{flex:1;display:flex;align-items:center;justify-content:center;background:#0003;border-radius:15px;border:2px solid rgba(255,255,255,.1);overflow:auto}.controls-container{width:350px;background:#0000004d;border-radius:15px;border:2px solid rgba(255,255,255,.1);padding:20px;overflow-y:auto}.game-footer{display:flex;justify-content:space-between;align-items:center;padding:15px 30px;background:#0000004d;border-top:2px solid rgba(255,255,255,.1)}.timer-info{font-size:1.2rem;color:#888}.timer{color:#0f8;font-weight:700;font-size:1.4rem}.help-text{color:#888;font-style:italic}.no-ship{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:20px}.no-ship h2{font-size:2rem;color:#f44}.no-ship p{font-size:1.2rem;color:#888}.game-header.spectator{flex-direction:column;gap:15px;text-align:center}.spectator-badge{background:#fa03!important;border-color:#fa0!important;color:#fa0!important}.spectator-info{color:#888}.spectator-info p{margin:5px 0}.game-over-info h2{font-size:2rem;margin:0;animation:winner-glow 1s infinite}.new-game-button{margin-top:15px;padding:12px 30px;font-size:1.2rem;font-weight:700;background:linear-gradient(45deg,#00d4ff,#7b2ff7);border:none;border-radius:25px;color:#fff;cursor:pointer;transition:all .3s ease}.new-game-button:hover{transform:scale(1.05);box-shadow:0 0 20px #00d4ff80}.game-over-footer{display:flex;flex-direction:column;align-items:center;gap:10px}.game-over-footer h2{color:#0f8;margin:0;animation:winner-glow 1s infinite}@keyframes winner-glow{0%,to{text-shadow:0 0 10px currentColor}50%{text-shadow:0 0 30px currentColor,0 0 50px currentColor}}.controls-container.spectator{display:flex;align-items:flex-start;padding:20px}.spectator-panel{background:#0000004d;border-radius:15px;padding:20px;width:100%}.spectator-panel h3{margin:0 0 15px;color:#fff;font-size:1.3rem}.ships-list{display:flex;flex-direction:column;gap:10px}.ship-status-item{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;background:#ffffff0d;border-left:4px solid;border-radius:8px}.ship-name{font-weight:700;font-size:1.1rem}.ship-stats-mini{display:flex;gap:15px;color:#ccc}@media (max-width: 900px){.game-main{flex-direction:column}.controls-container{width:100%;max-height:40vh}.grid-container{min-height:50vh}.game-header{flex-wrap:wrap;gap:15px;padding:15px}.ship-name-badge h2{font-size:1rem}.ship-stats-bar{gap:8px}.stat-item{padding:4px 8px;font-size:.9rem}}@media (max-width: 600px){.game-header{justify-content:center}.game-title h1{font-size:1.5rem}.role-badge{padding:8px 15px;font-size:1rem}}.app{width:100%;height:100%;display:flex;flex-direction:column;position:relative}.sound-toggle{position:fixed;top:15px;right:15px;z-index:1000;width:45px;height:45px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:#00000080;font-size:1.4rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.sound-toggle:hover{background:#00d4ff4d;border-color:#00d4ff;transform:scale(1.1)}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:20px}.loading h1{font-size:3rem;background:linear-gradient(45deg,#00d4ff,#7b2ff7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.loading p{font-size:1.2rem;color:#888}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0e27;color:#fff}#root{width:100vw;height:100vh;overflow:hidden}