:root{--bg-main: #0a0b10;--bg-card: rgba(18, 22, 36, .85);--border-neon: rgba(0, 243, 255, .25);--cyan-glow: #00f3ff;--purple-glow: #bd00ff;--gold-glow: #ffb800;--red-alert: #ff0055;--text-main: #f0f4ff;--text-muted: #8e9bb4;--font-family: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}body{background-color:var(--bg-main);background-image:radial-gradient(circle at 50% 20%,rgba(0,243,255,.08) 0%,transparent 60%),radial-gradient(circle at 80% 80%,rgba(189,0,255,.06) 0%,transparent 50%),linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:100% 100%,100% 100%,32px 32px,32px 32px;color:var(--text-main);font-family:var(--font-family);min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow-x:hidden;padding:16px}#app-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:900px}header.game-header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:800px;margin-bottom:12px;padding:8px 16px;background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-neon);border-radius:12px;box-shadow:0 8px 24px #0006,0 0 15px #00f3ff1a}.logo-group{display:flex;align-items:center;gap:12px}.logo-icon{font-size:28px;filter:drop-shadow(0 0 8px var(--cyan-glow))}h1.game-title{font-size:22px;font-weight:800;letter-spacing:2px;text-transform:uppercase;background:linear-gradient(135deg,#00f3ff,#ff007f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.connection-badge{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;font-family:var(--font-mono);padding:4px 10px;border-radius:20px;background:#0006;border:1px solid rgba(255,255,255,.1)}.badge-dot{width:8px;height:8px;border-radius:50%;background:#fa0;box-shadow:0 0 8px #fa0;transition:all .3s ease}.badge-dot.connected{background:#0f8;box-shadow:0 0 10px #0f8}.badge-dot.disconnected{background:#f05;box-shadow:0 0 10px #f05}#game-viewport{position:relative;width:800px;height:608px;background:#06080d;border:2px solid rgba(0,243,255,.3);border-radius:12px;box-shadow:0 12px 36px #0009,0 0 24px #00f3ff26,inset 0 0 16px #000c;overflow:hidden}canvas{display:block;outline:none}footer.game-footer{margin-top:14px;display:flex;justify-content:space-between;align-items:center;width:100%;max-width:800px;padding:8px 16px;font-size:13px;color:var(--text-muted)}.controls-legend{display:flex;align-items:center;gap:12px}.key-cap{display:inline-block;padding:2px 7px;background:#ffffff14;border:1px solid rgba(255,255,255,.2);border-radius:4px;color:var(--cyan-glow);font-family:var(--font-mono);font-size:12px;font-weight:700}.cyber-modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#06080fe0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:999;opacity:0;pointer-events:none;transition:opacity .3s ease}.cyber-modal-overlay.active{opacity:1;pointer-events:auto}.cyber-modal-card{width:90%;max-width:480px;background:linear-gradient(135deg,#101628f2,#080c18fa);border:1.5px solid rgba(0,243,255,.5);box-shadow:0 20px 50px #000c,0 0 30px #00f3ff40,inset 0 0 20px #00f3ff0d;border-radius:16px;padding:32px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;transform:translateY(10px) scale(.96);transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.cyber-modal-overlay.active .cyber-modal-card{transform:translateY(0) scale(1)}.modal-badge{display:inline-flex;align-items:center;gap:6px;background:#00f3ff1a;border:1px solid rgba(0,243,255,.3);padding:4px 12px;border-radius:20px;font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--cyan-glow);letter-spacing:1.5px}.badge-icon{font-size:14px}.modal-title{font-size:24px;font-weight:800;letter-spacing:1.5px;background:linear-gradient(135deg,#00f3ff,#ff007f);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-top:-4px}.modal-subtitle{font-size:14px;color:#a6b5d4;line-height:1.45;margin-bottom:4px}.modal-subtitle strong{color:#ff007f}.input-container{width:100%;position:relative}#player-name-input{width:100%;background:#070a12e6;border:1.5px solid rgba(0,243,255,.35);border-radius:8px;padding:14px 18px;font-family:var(--font-mono);font-size:16px;font-weight:700;color:#0f8;letter-spacing:1px;text-align:center;outline:none;transition:all .25s ease;-webkit-user-select:text;user-select:text}#player-name-input::placeholder{color:#8e9bb480;font-weight:500;letter-spacing:.5px}#player-name-input:focus{border-color:#00f3ff;box-shadow:0 0 16px #00f3ff66,inset 0 0 10px #00f3ff1a;background:#090e19f2}#player-name-input.error{border-color:#f05;box-shadow:0 0 16px #f056;animation:input-shake .4s ease-in-out}@keyframes input-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.name-error-text{font-size:13px;color:#f05;font-weight:600;display:none;animation:fadeIn .2s ease}.name-error-text.visible{display:block}.cyber-btn-start{width:100%;background:linear-gradient(135deg,#00f3ff,#09f,#7b00ff);border:none;border-radius:8px;padding:14px 24px;color:#06080f;font-family:var(--font-mono);font-size:16px;font-weight:800;letter-spacing:1.5px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 0 20px #00f3ff66;transition:all .25s ease;margin-top:4px}.cyber-btn-start:hover{transform:translateY(-2px);box-shadow:0 0 30px #00f3ffb3,0 8px 16px #0006;filter:brightness(1.1)}.cyber-btn-start:active{transform:translateY(0)}.modal-hint{font-size:12px;color:#7e8da9;font-family:var(--font-mono)}.modal-hint strong{color:var(--cyan-glow)}