:root{--color-bg: #1a1a2e;--color-bg-secondary: #16213e;--color-accent: #e94560;--color-text: #eaeaea;--color-text-muted: #a0a0a0;--color-success: #4ecca3;--color-warning: #ffc107;--color-danger: #ff6b6b;--color-grid: #2a2a4e;--color-cell: #252545;--color-cell-hover: #3a3a5e;--font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background-color:var(--color-bg);color:var(--color-text);overflow:hidden;width:100vw;height:100vh}#root{width:100%;height:100%}button{font-family:inherit;cursor:pointer;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:600;transition:all .2s ease}button.primary{background-color:var(--color-accent);color:#fff}button.primary:hover{background-color:#d63850;transform:translateY(-2px)}button.primary:disabled{background-color:#666;cursor:not-allowed;transform:none}.app-container{width:100%;height:100%;display:flex;flex-direction:column}.title-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:24px}.title-screen h1{font-size:48px;color:var(--color-accent);text-shadow:0 0 20px rgba(233,69,96,.5)}.title-screen .subtitle{color:var(--color-text-muted);font-size:18px}.title-screen .menu-buttons{display:flex;flex-direction:column;gap:12px;min-width:200px}.game-layout,.build-phase{display:flex;width:100%;height:100%}.sidebar{width:200px;background-color:var(--color-bg-secondary);padding:16px;display:flex;flex-direction:column;gap:12px;border-right:2px solid var(--color-grid)}.sidebar h3{color:var(--color-text-muted);font-size:14px;text-transform:uppercase;margin-bottom:8px}.component-card{background-color:var(--color-cell);padding:12px;border-radius:8px;cursor:grab;transition:all .2s ease;display:flex;flex-direction:column;gap:4px}.component-card:hover{background-color:var(--color-cell-hover);transform:translate(4px)}.component-card.dragging{opacity:.5}.component-card .name{font-weight:600;font-size:14px}.component-card .cost{color:var(--color-warning);font-size:12px}.component-card .description{color:var(--color-text-muted);font-size:11px}.game-area{flex:1;display:flex;flex-direction:column}.top-bar{height:60px;background-color:var(--color-bg-secondary);display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:2px solid var(--color-grid)}.bolts-display,.top-bar-bolts,.sidebar-bolts{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:600;color:var(--color-warning)}.top-bar-bolts{font-size:24px}.sidebar-bolts{font-size:18px;padding-bottom:8px;border-bottom:1px solid var(--color-grid)}.timer-display{font-size:24px;font-weight:700}.timer-display.warning{color:var(--color-danger);animation:pulse .5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.ready-button{background-color:var(--color-success);color:var(--color-bg)}.ready-button:hover{background-color:#3db88e}.grid-container{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}.grid{display:grid;grid-template-columns:repeat(8,60px);grid-template-rows:repeat(8,60px);gap:4px;background-color:var(--color-grid);padding:4px;border-radius:8px}.cell{width:60px;height:60px;background-color:var(--color-cell);border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .15s ease;position:relative}.cell:hover{background-color:var(--color-cell-hover)}.cell.drag-over{background-color:var(--color-success);opacity:.7}.cell.invalid{background-color:var(--color-danger);opacity:.7}.cell .component{width:50px;height:50px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700}.cell .component.core-hub{background-color:var(--color-accent)}.cell .component.conveyor{background-color:#4a90d9}.cell .component.assembler{background-color:#9b59b6}.cell .component.ball-forge{background-color:var(--color-success)}.cell .component-label{position:absolute;bottom:2px;font-size:8px;color:#fff;background-color:#0009;padding:1px 3px;border-radius:2px}.battle-phase{display:flex;width:100%;height:100%}.battle-factory{flex:1;background-color:var(--color-bg);position:relative;overflow:hidden}.battle-factory h3{position:absolute;top:12px;left:12px;color:var(--color-text-muted);font-size:14px}.battle-lane{flex:1;background-color:var(--color-bg-secondary);position:relative;overflow:hidden;border-left:4px solid var(--color-grid)}.battle-lane .lane{position:absolute;top:50%;left:0;right:0;height:80px;transform:translateY(-50%);background-color:var(--color-grid);border-radius:8px}.core-hub{position:absolute;left:40px;top:50%;transform:translateY(-50%);width:80px;height:80px;background-color:var(--color-accent);border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;box-shadow:0 0 20px #e9456080}.core-hub.enemy{right:40px;left:auto;background-color:var(--color-danger);box-shadow:0 0 20px #ff6b6b80}.ball{position:absolute;width:40px;height:40px;background-color:var(--color-success);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;box-shadow:0 0 10px #4ecca380;transition:left .1s linear}.ball.enemy{background-color:var(--color-danger);box-shadow:0 0 10px #ff6b6b80}.ball.stunned{animation:stun-flash .2s ease-in-out infinite}@keyframes stun-flash{0%,to{opacity:1}50%{opacity:.3}}.result-screen{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#1a1a2ef2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;z-index:100}.result-screen h1{font-size:64px;text-shadow:0 0 30px currentColor}.result-screen h1.win{color:var(--color-success)}.result-screen h1.lose{color:var(--color-danger)}.result-stats{display:flex;gap:48px}.stat{text-align:center}.stat .label{color:var(--color-text-muted);font-size:14px;margin-bottom:4px}.stat .value{font-size:32px;font-weight:700}.insufficient-funds{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background-color:var(--color-danger);color:#fff;padding:12px 24px;border-radius:8px;font-weight:600;animation:shake .3s ease-in-out}@keyframes shake{0%,to{transform:translate(-50%) translate(0)}25%{transform:translate(-50%) translate(-8px)}75%{transform:translate(-50%) translate(8px)}}.error-message{color:var(--color-danger);font-size:14px;margin-top:8px}.create-match-screen,.join-match-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:24px;padding:24px}.create-match-screen h1,.join-match-screen h1{font-size:36px;color:var(--color-accent)}.waiting-room,.connected-room,.error-room,.connecting-room{display:flex;flex-direction:column;align-items:center;gap:24px;min-width:300px}.room-code-display{text-align:center}.room-code-display p{color:var(--color-text-muted);margin-bottom:12px}.room-code{font-size:48px;font-weight:700;color:var(--color-success);background-color:var(--color-bg-secondary);padding:16px 32px;border-radius:12px;letter-spacing:8px;border:2px solid var(--color-grid)}.waiting-indicator,.connecting-indicator{display:flex;flex-direction:column;align-items:center;gap:12px}.spinner{width:40px;height:40px;border:4px solid var(--color-grid);border-top-color:var(--color-accent);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.elapsed-time{color:var(--color-text-muted);font-size:14px}.success-message{background-color:var(--color-success);color:var(--color-bg);padding:12px 24px;border-radius:8px;font-weight:600}button.secondary{background-color:var(--color-grid);color:var(--color-text)}button.secondary:hover{background-color:var(--color-cell-hover)}.join-form{display:flex;flex-direction:column;gap:24px;min-width:300px}.input-group{display:flex;flex-direction:column;gap:8px}.input-group label{color:var(--color-text-muted);font-size:14px}.room-code-input{font-size:32px;font-weight:700;text-align:center;letter-spacing:8px;padding:16px;background-color:var(--color-bg-secondary);border:2px solid var(--color-grid);border-radius:8px;color:var(--color-text);font-family:inherit;text-transform:uppercase}.room-code-input:focus{outline:none;border-color:var(--color-accent)}.hint{color:var(--color-text-muted);font-size:12px;text-align:center}.multiplayer-status{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--color-text-muted)}#mute-btn{position:fixed;top:12px;right:12px;z-index:9999;background:#1a1a2ed9;color:var(--color-text);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:6px 10px;font-size:20px;cursor:pointer;transition:background .2s ease,transform .1s ease;line-height:1}#mute-btn:hover{background:#2a2a4ef2;transform:scale(1.05)}.difficulty-selector{display:flex;flex-direction:column;align-items:center;gap:10px}.difficulty-label{color:var(--color-text-muted);font-size:13px;text-transform:uppercase;letter-spacing:1px}.difficulty-options{display:flex;gap:8px}.difficulty-btn{padding:8px 16px;font-size:14px;font-weight:600;border-radius:8px;background:var(--color-cell);color:var(--color-text);border:2px solid transparent;cursor:pointer;transition:all .2s ease}.difficulty-btn:hover{background:var(--color-cell-hover)}.difficulty-btn.selected{border-color:var(--color-accent);color:var(--color-accent);background:#e9456026}.difficulty-btn.locked{color:var(--color-text-muted);cursor:default;opacity:.7}.locked-msg{color:var(--color-warning);font-size:13px;animation:fade-in .2s ease}@keyframes fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.attract-mode-build{position:relative}.attract-label{position:fixed;top:50px;left:50%;transform:translate(-50%);background:#e94560e6;color:#fff;padding:8px 20px;border-radius:20px;font-size:14px;font-weight:700;letter-spacing:2px;z-index:100;animation:pulse 1s ease-in-out infinite}.attract-returning{color:var(--color-text-muted);font-size:16px;margin-top:8px;animation:pulse .8s ease-in-out infinite}.shockwave-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 90% 50%,rgba(255,68,0,.35) 0%,transparent 55%);animation:shockwave-pulse .4s ease-in-out infinite alternate;pointer-events:none;border-radius:4px}@keyframes shockwave-pulse{0%{opacity:.6}to{opacity:1}}