:root{--fs-xs: .7rem;--fs-sm: .8rem;--fs-base: .88rem;--fs-md: 1rem;--fs-lg: 1.15rem;--c-text: #d0e4f7;--c-dim: #7a9ab8;--c-muted: #4a6a80;--c-gold: #c9a227;--c-accent: #1a6aa0;--c-green: #2ecc71;--c-danger: #c0392b;--ls: .08em;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--modal-bg: #0d1520;--modal-header-bg: #091018;--modal-outer-border: #1a3550;--modal-inner-border: #112030;--modal-row-bg: #0f1d2c;--c-bg: #0d1b2a;--c-surface: #0d1520;--c-border: #1a3550;--c-primary: #1a6aa0;--radius: var(--radius-md);--shadow: 0 4px 24px rgba(0,0,0,.6)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:system-ui,sans-serif;background:var(--c-bg);color:var(--c-text);min-height:100vh;overflow:hidden}#app{height:100%}a{color:#7ec8e3}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#1a3550;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#2a5580}::-webkit-scrollbar-corner{background:transparent}*{scrollbar-width:thin;scrollbar-color:#1a3550 transparent}@keyframes _backdrop-in{0%{opacity:0}to{opacity:1}}@keyframes _modal-in{0%{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}[class*=backdrop]{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:_backdrop-in .16s ease}[class*=backdrop]>*{animation:_modal-in .2s cubic-bezier(.22,1,.36,1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--modal-header-bg);border-bottom:1px solid var(--modal-outer-border);font-weight:700;font-size:1rem;letter-spacing:.04em;color:#fff;flex-shrink:0}.close-btn{background:none;border:none;color:var(--c-dim);font-size:var(--fs-md);cursor:pointer;padding:3px 8px;border-radius:4px;transition:color .12s,background .12s;line-height:1}.close-btn:hover{color:#fff;background:#ffffff14}.section-label{display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls);color:var(--c-muted);padding-bottom:8px;border-bottom:1px solid var(--modal-inner-border);margin-bottom:10px;flex-shrink:0}.section-label:before{content:"";display:block;width:3px;height:11px;background:var(--modal-outer-border);border-radius:2px;flex-shrink:0}.modal-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:32px 16px;color:var(--c-muted);font-size:var(--fs-sm)}.modal-empty-icon{font-size:1.8rem;opacity:.4;line-height:1}.modal-empty-hint{font-size:var(--fs-xs);color:var(--c-muted);opacity:.7}.modal-tabs{display:flex;gap:1px;background:var(--modal-header-bg);border-bottom:1px solid var(--modal-inner-border);padding:0 6px;flex-shrink:0}.modal-tab{padding:9px 14px;font-size:var(--fs-sm);font-weight:600;color:var(--c-muted);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color .15s,border-color .15s;font-family:system-ui,sans-serif;white-space:nowrap;letter-spacing:.02em;-webkit-user-select:none;user-select:none;position:relative}.modal-tab:hover{color:var(--c-dim)}.modal-tab.active,.modal-tab--active{color:var(--c-text);border-bottom-color:var(--modal-outer-border)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 18px;border-radius:var(--radius-md);font-size:var(--fs-base);font-weight:600;font-family:system-ui,sans-serif;cursor:pointer;border:1px solid transparent;transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .08s;white-space:nowrap;line-height:1;-webkit-user-select:none;user-select:none;text-decoration:none;flex-shrink:0}.btn:active:not(:disabled){transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:linear-gradient(160deg,#1a6aa0,#0d4a70);border-color:#2a8acc;color:#d0eeff;box-shadow:0 2px 8px #0f509659}.btn-primary:hover:not(:disabled){background:linear-gradient(160deg,#2280c0,#1060a0);border-color:#3aa0e0;box-shadow:0 4px 14px #0f509680}.btn-secondary{background:#1a355040;border-color:var(--modal-outer-border);color:var(--c-dim)}.btn-secondary:hover:not(:disabled){background:#1a355073;border-color:#2a5580;color:var(--c-text)}.btn-danger{background:#8c1e1e33;border-color:#6a2828;color:#ee8080}.btn-danger:hover:not(:disabled){background:#b4282852;border-color:#9a3838;color:#faa}.btn-success{background:#1e643240;border-color:#2a6a3a;color:#6d8}.btn-success:hover:not(:disabled){background:#28824159;border-color:#3a8a50;color:#8fa}.btn-warn{background:#78500a40;border-color:#7a5810;color:#f0c060}.btn-warn:hover:not(:disabled){background:#a06e0f66;border-color:#9a7818;color:#ffe090}.btn-info{background:#0a3c5a4d;border-color:#0e5a7a;color:#80c8f0}.btn-info:hover:not(:disabled){background:#0e507873;border-color:#1a80b0;color:#a0e0ff}.btn-sm{padding:5px 12px;font-size:var(--fs-sm);border-radius:var(--radius-sm)}.btn-xs{padding:3px 8px;font-size:var(--fs-xs);border-radius:var(--radius-sm)}.btn-full{width:100%}.btn-discord{background:#5865f2;color:#fff;border-color:#4a54d0}.btn-discord:hover:not(:disabled){background:#6875f5}.btn-google{background:#fff;color:#333;border-color:#ddd}.btn-google:hover:not(:disabled){background:#f0f0f0}.btn-email{background:var(--modal-bg);color:var(--c-text);border-color:var(--modal-outer-border)}.btn-email:hover:not(:disabled){background:var(--modal-header-bg)}.btn-back{background:none;border:none;color:var(--c-muted);cursor:pointer;font-size:var(--fs-sm);margin-top:.5rem}.btn-logout{background:#8c1e1e33;color:#ee8080;border:1px solid #6a2828;padding:.3rem .8rem;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-sm)}input[type=text],input[type=number],input[type=password],input[type=email],input[type=search],textarea{background:#ffffff0a;border:1px solid var(--modal-inner-border);border-radius:var(--radius-sm);color:var(--c-text);font-size:var(--fs-base);font-family:system-ui,sans-serif;outline:none;transition:border-color .15s,box-shadow .15s}input:focus,textarea:focus{border-color:var(--modal-outer-border);box-shadow:0 0 0 3px #1a355066}input:disabled,textarea:disabled{opacity:.45}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}@keyframes _spin{to{transform:rotate(360deg)}}.loading-state{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 16px;color:var(--c-muted);font-size:var(--fs-sm)}.loading-spinner{width:28px;height:28px;border:3px solid rgba(26,106,160,.2);border-top-color:var(--c-accent);border-radius:50%;animation:_spin .75s linear infinite;flex-shrink:0}.update-banner{position:fixed;top:0;left:0;right:0;z-index:99999;background:#2a5c1e;border-bottom:1px solid #4a9c3e;color:#c8ffaa;text-align:center;padding:8px 16px;font-size:13px;display:flex;align-items:center;justify-content:center;gap:10px}.update-reload-btn{background:#3a8c2e;border:1px solid #5ac040;color:#e0ffe0;padding:3px 12px;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600}.update-reload-btn:hover{background:#4aac3e}.center-page,.home-page,.create-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#0d2137,#060e17)}.card,.home-card,.create-card{background:var(--modal-bg);border:1px solid var(--modal-outer-border);border-radius:var(--radius-md);padding:2rem;width:100%;max-width:420px;box-shadow:var(--shadow)}h1{font-size:1.8rem;color:#fff}h2{font-size:1.3rem;color:#fff;margin-bottom:.4rem}h3{font-size:1.1rem;color:#fff;margin-bottom:.8rem}.subtitle,.tagline{color:var(--c-muted);font-size:var(--fs-sm);margin-bottom:1.5rem}.field{margin-bottom:1rem}.field label{display:block;font-size:var(--fs-sm);color:var(--c-muted);margin-bottom:.25rem}.field input[type=text],.field input[type=email],.field input[type=password]{width:100%;padding:.55rem .75rem}.field-hint{font-size:var(--fs-xs);color:var(--c-muted);margin-top:.2rem;display:block}.form-error{color:var(--c-danger);font-size:var(--fs-sm);margin-bottom:.6rem}.form-success{color:var(--c-green);font-size:var(--fs-sm);margin-bottom:.6rem}.tabs{display:flex;gap:.5rem;margin-bottom:1rem}.tab{flex:1;padding:.4rem;background:var(--modal-header-bg);border:1px solid var(--modal-inner-border);border-radius:var(--radius-sm);color:var(--c-muted);cursor:pointer;font-size:var(--fs-sm);transition:all .15s}.tab.active{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}.home-logo{text-align:center;margin-bottom:1.8rem}.logo-icon{font-size:3rem;display:block;margin-bottom:.4rem}.login-error{color:var(--c-danger);text-align:center;margin-top:.8rem;font-size:var(--fs-sm)}.forgot-link{text-align:center;margin-top:.4rem;font-size:var(--fs-xs)}.forgot-link a{color:var(--c-muted)}.color-picker{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.color-swatch{width:28px;height:28px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .1s,border-color .1s}.color-swatch.selected{border-color:#fff;transform:scale(1.2)}.color-custom{width:28px;height:28px;padding:0;border:none;cursor:pointer;border-radius:50%}.ship-preview{display:flex;flex-direction:column;align-items:center;gap:.3rem;margin:1rem 0}.ship-preview span{font-size:var(--fs-xs);color:var(--c-muted)}.game-container{position:relative;width:100vw;height:100vh;overflow:hidden}#game-canvas{position:absolute;top:0;right:0;bottom:0;left:0}.hud-top-left{position:absolute;top:1rem;left:1rem;display:flex;align-items:center;gap:.5rem;z-index:100}.hud-top-right{position:absolute;top:1rem;right:1rem;display:flex;align-items:center;gap:.75rem;z-index:100;background:#091018e0;border:1px solid var(--modal-outer-border);border-radius:var(--radius-md);padding:.4rem .8rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.player-name{font-size:var(--fs-sm);font-weight:600}.hud-gold{font-size:var(--fs-sm);font-weight:700;color:var(--c-gold);letter-spacing:.02em}.btn-hud-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;background:#091018e0;border:1px solid var(--modal-outer-border);border-radius:var(--radius-sm);cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s,border-color .15s}.btn-hud-icon:hover{background:#1a6aa066;border-color:var(--c-accent)}.btn-company{position:relative}.invite-dot{position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:var(--c-green);animation:pulse 1.4s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}.toast-container{position:fixed;top:1rem;left:50%;transform:translate(-50%);z-index:9999;display:flex;flex-direction:column;gap:.4rem;pointer-events:none}.toast{padding:.5rem 1.2rem;border-radius:var(--radius-md);font-size:var(--fs-sm);font-weight:600;box-shadow:0 4px 16px #00000080;pointer-events:auto}.toast-info{background:#0d4a70f2;color:#d0eeff;border:1px solid #2a8acc}.toast-success{background:#195028f2;color:#6d8;border:1px solid #2a6a3a}.toast-error{background:#6e1919f2;color:#ee8080;border:1px solid #6a2828}.toast-clickable{cursor:pointer;text-decoration:underline dotted}.toast-clickable:hover{filter:brightness(1.15)}.toast-enter-active,.toast-leave-active{transition:all .25s}.toast-enter-from,.toast-leave-to{opacity:0;transform:translateY(-8px)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000a6;display:flex;align-items:center;justify-content:center;z-index:1000}