.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}.ai-badge{margin-left:8px;font-size:1.2rem;animation:pulse 2s infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.crew-slot.ai-controlled{border-style:solid;background:#7b2ff726;border-color:#7b2ff7!important}.slot-actions{display:flex;align-items:center;gap:10px}.ai-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;padding:6px 10px;border-radius:6px;background:#7b2ff733;border:1px solid rgba(123,47,247,.4);transition:all .2s ease}.ai-toggle:hover{background:#7b2ff74d;border-color:#7b2ff799}.ai-toggle input{width:16px;height:16px;cursor:pointer;accent-color:#7b2ff7}.ai-toggle-label{font-size:.85rem;color:#ccc;font-weight:500}.player-tag.ai-tag{background:linear-gradient(135deg,#7b2ff7,#9b4dff);color:#fff}.disable-ai-btn{padding:6px 12px;border:none;border-radius:6px;font-weight:700;cursor:pointer;transition:all .2s ease;background:#ff44444d;color:#f66;font-size:.85rem}.disable-ai-btn:hover{background:#ff444480;color:#fff}.ready-countdown{text-align:center;padding:12px 20px;margin-top:15px;border-radius:10px;font-weight:700;font-size:1.1rem;background:#fa03;border:2px solid rgba(255,170,0,.5);color:#fa0;animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.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:100%;height:100%;max-width:min(100%,calc(100vh - 80px));max-height:min(100%,calc(100vh - 80px));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:visible}.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 var(--ship-color, #00d4ff)}50%{box-shadow:0 0 30px var(--ship-color, #00d4ff)}}.grid-cell.has-missile{background:#8a2be24d;border-color:#8a2be2;z-index:50}.ship-marker{display:flex;flex-direction:column;align-items:center;gap:1px;transform:scale(1.8);position:relative;z-index:150}.ship-icon{font-size:clamp(1.2rem,3vmin,2rem);filter:drop-shadow(0 0 5px var(--ship-color, #00d4ff));position:relative}.ship-structure-overlay{position:absolute;bottom:2px;left:50%;transform:translate(-50%);display:flex;gap:2px;pointer-events:none;z-index:10}.health-dot{font-size:clamp(.25rem,.65vmin,.4rem);text-shadow:0 0 8px rgba(0,0,0,.9),0 0 4px rgba(0,0,0,1),-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 5px currentColor}.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(1.2rem,3vmin,2rem);color:#9932cc;text-shadow:0 0 10px #9932cc;animation:missile-pulse .5s infinite;display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;z-index:100}.missile-marker.missile-small{color:#ba55d3;text-shadow:0 0 8px #ba55d3;font-size:clamp(1.4rem,3.5vmin,2.2rem)}.missile-marker.missile-medium{color:#9400d3;text-shadow:0 0 12px #9400d3;font-size:clamp(1.6rem,4vmin,2.5rem)}.missile-marker.missile-large{color:#8b008b;text-shadow:0 0 15px #8b008b;font-size:clamp(1.8rem,4.5vmin,3rem)}.missile-direction{font-size:clamp(2rem,5vmin,3.5rem);font-weight:700;opacity:1;color:#e066ff;text-shadow:0 0 12px #e066ff;z-index:102}.missile-icon{position:absolute;bottom:2px;right:2px;font-size:clamp(.8rem,2vmin,1.5rem);z-index:101}@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:rgba(255,calc(100 - var(--explosion-intensity, 1) * 20),0,calc(.3 + var(--explosion-intensity, 1) * .15))!important;border-color:rgb(255,calc(100 - var(--explosion-intensity, 1) * 25),0)!important;animation:explosion-outer .5s ease-out;box-shadow:0 0 calc(10px + var(--explosion-intensity, 1) * 5px) rgba(255,100,0,calc(.4 + var(--explosion-intensity, 1) * .1))}.grid-cell.explosion-center{background:rgba(255,calc(50 - var(--explosion-intensity, 1) * 15),0,calc(.7 + var(--explosion-intensity, 1) * .1))!important;border-color:rgb(255,calc(50 - var(--explosion-intensity, 1) * 20),0)!important;animation:explosion-center .5s ease-out;box-shadow:0 0 calc(20px + var(--explosion-intensity, 1) * 10px) rgba(255,100,0,calc(.6 + var(--explosion-intensity, 1) * .2))}.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)}}.grid-tooltip{position:absolute;background:#0a0e27f2;border:2px solid rgba(0,212,255,.6);border-radius:8px;padding:8px 12px;font-size:.85rem;color:#fff;pointer-events:none;z-index:1000;box-shadow:0 4px 20px #00d4ff4d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);white-space:nowrap;animation:tooltip-fade-in .15s ease-out}@keyframes tooltip-fade-in{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.grid-tooltip.tooltip-right{left:calc((var(--cell-x) + 1) / var(--grid-width) * 100%);margin-left:8px}.grid-tooltip.tooltip-left{right:calc((var(--grid-width) - var(--cell-x)) / var(--grid-width) * 100%);margin-right:8px}.grid-tooltip.tooltip-bottom{top:calc((var(--cell-y) + 1) / var(--grid-height) * 100%);margin-top:8px}.grid-tooltip.tooltip-top{bottom:calc((var(--grid-height) - var(--cell-y)) / var(--grid-height) * 100%);margin-bottom:8px}.tooltip-quadrant{font-size:.75rem;color:#00d4ff;font-weight:700;text-transform:uppercase;margin-bottom:4px;letter-spacing:.5px;border-bottom:1px solid rgba(0,212,255,.3);padding-bottom:4px}.tooltip-content{display:flex;flex-direction:column;gap:3px;font-size:.8rem;color:#e0e0e0;line-height:1.3}.tooltip-content>div{display:flex;align-items:center;gap:4px}.controls{display:flex;flex-direction:column;gap:20px}.controls h3{margin:0;font-size:1.5rem;text-align:center;color:#fff}.controls h3.pilot-title{padding:10px 25px;border-radius:25px;font-size:1.2rem;font-weight:700;border:2px solid #00d4ff;background:#00d4ff33;color:#00d4ff;display:inline-block;margin:0 auto}.controls h3.gunner-title{padding:10px 25px;border-radius:25px;font-size:1.2rem;font-weight:700;border:2px solid #ff4444;background:#f443;color:#f44;display:inline-block;margin:0 auto}.controls h3.engineer-title{padding:10px 25px;border-radius:25px;font-size:1.2rem;font-weight:700;border:2px solid #ffaa00;background:#fa03;color:#fa0;display:inline-block;margin:0 auto}.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}}.fire-options{margin-top:10px}.fire-options h4{margin:0 0 10px;color:#f84;font-size:1rem;text-align:center}.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;gap:20px;padding:20px 30px;background:#0000004d;border-bottom:2px solid rgba(255,255,255,.1)}.left-panel{width:350px;background:#0000004d;border-radius:15px;border:2px solid rgba(255,255,255,.1);padding:20px;display:flex;flex-direction:column;gap:20px;overflow-y:auto}.panel-section{background:#ffffff0d;border-radius:12px;padding:15px}.panel-section h3{margin:0 0 12px;color:#888;font-size:.9rem;text-transform:uppercase;letter-spacing:1px}.title-section{text-align:center}.title-section .game-title{display:flex;flex-direction:column;gap:10px}.title-section .game-status{margin-left:0}.role-section{display:flex;justify-content:center}.ships-overview-left{display:flex;flex-direction:column;gap:10px}.ships-overview-left .ship-overview-card{min-width:unset;width:100%}.timer-section{margin-top:auto;text-align:center}.timer-section .timer-info{font-size:1.1rem;margin-bottom:8px}.timer-section .help-text{font-size:.85rem}.game-over-panel{text-align:center}.game-over-panel h2{color:#0f8;margin:0 0 15px;animation:winner-glow 1s infinite}.ships-overview-top{display:flex;gap:12px;align-items:center;overflow-x:auto;padding-bottom:4px}.ship-overview-card{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-width:200px;padding:8px 12px;background:#ffffff0d;border:2px solid rgba(255,255,255,.15);border-radius:12px}.ship-overview-content{display:flex;flex-direction:column;gap:4px;flex:1;align-items:flex-start}.ship-crew-names{font-size:.75rem;color:#999;font-weight:400;display:flex;flex-direction:column;align-items:flex-start;gap:2px}.ship-overview-card.my-ship{box-shadow:0 0 12px var(--ship-color, #00d4ff),inset 0 0 20px #ffffff1a;background:linear-gradient(135deg,#ffffff26,#ffffff0d);border-width:3px;animation:owner-pulse 2s infinite}.ship-overview-card.dead-ship{opacity:.4;filter:grayscale(100%);border-color:#555!important;background:#0000004d}.ship-overview-card.dead-ship .ship-overview-name{color:#666!important}.ship-overview-card.dead-ship .ship-overview-stats{color:#555!important}@keyframes owner-pulse{0%,to{box-shadow:0 0 12px var(--ship-color, #00d4ff),inset 0 0 20px #ffffff1a}50%{box-shadow:0 0 20px var(--ship-color, #00d4ff),0 0 30px var(--ship-color, #00d4ff),inset 0 0 20px #ffffff26}}.ship-overview-name{font-weight:700;font-size:1.2rem;white-space:nowrap}.ship-overview-stats{display:flex;gap:10px;color:#ccc;font-weight:700;font-size:.9rem;white-space:nowrap}.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}.spectator-badge{background:#fa03!important;border-color:#fa0!important;color:#fa0!important}.spectator-info-section{text-align:center;color:#888}.spectator-info-section p{margin:5px 0}.game-over-section{text-align:center}.game-over-section .winner-text,.game-over-section .draw-text{margin:0 0 15px;font-size:1.2rem;animation:winner-glow 1s infinite}.game-over-section .draw-text{color:#f44}.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:#fa0;border:2px solid #ffaa00;border-radius:10px;color:#000;cursor:pointer;transition:all .2s ease;box-shadow:0 0 20px #fa09}.new-game-button:hover{transform:scale(1.05);box-shadow:0 0 30px #fa0c}.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: 1200px){.left-panel,.controls-container{width:280px}}@media (max-width: 900px){.game-main{flex-direction:column}.left-panel{width:100%;flex-direction:row;flex-wrap:wrap;max-height:none}.panel-section{flex:1;min-width:200px}.timer-section{margin-top:0;width:100%}.controls-container{width:100%;max-height:40vh}.grid-container{min-height:50vh}.game-header{gap:12px;padding:15px}.game-header-main{flex-wrap:wrap;gap: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}}.name-input-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#0a0e27,#1a1f3a)}.name-input-card{background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:20px;padding:40px;text-align:center;min-width:400px;box-shadow:0 8px 32px #0000004d}.name-input-card h1{margin:0 0 10px;color:#fff;font-size:2.5rem}.name-input-card p{margin:0 0 30px;color:#888;font-size:1rem}.name-input-card form{display:flex;flex-direction:column;gap:15px}.name-input{padding:15px;font-size:1.1rem;border:2px solid rgba(255,255,255,.2);border-radius:10px;background:#ffffff0d;color:#fff;text-align:center;transition:all .3s}.name-input:focus{outline:none;border-color:#00d4ff;box-shadow:0 0 15px #00d4ff4d;background:#ffffff14}.name-input::placeholder{color:#666}.name-submit{padding:15px;font-size:1.1rem;font-weight:700;border:none;border-radius:10px;background:linear-gradient(135deg,#00d4ff,#08c);color:#fff;cursor:pointer;transition:all .3s}.name-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 20px #00d4ff66}.name-submit:disabled{opacity:.3;cursor:not-allowed}.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}