*{box-sizing:border-box}html,body{color:#eee;background:#0e0f16;margin:0;padding:0;font-family:system-ui,Segoe UI,sans-serif;overflow:hidden}#app{flex-direction:column;width:100vw;height:100vh;display:flex;position:relative}#hud{z-index:10;background:#1a1c27;border-bottom:1px solid #2c2f3f;align-items:center;gap:24px;padding:10px 16px;font-size:16px;display:flex}.hud-item{white-space:nowrap}#hud-district{color:#f1c40f;margin-left:auto;font-weight:600}#hud-user{color:#9aa0c0}.hud-logout{color:#fff;cursor:pointer;background:#262838;border:1px solid #3a3d52;border-radius:6px;padding:6px 12px;font-size:13px}.hud-logout:hover{background:#313449}#tutorial-overlay{z-index:90;background:#0a0b12eb;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0;overflow-y:auto}#tutorial-overlay.hidden{display:none}.tutorial-box{background:#1a1c27;border:1px solid #2c2f3f;border-radius:10px;width:min(560px,100%);padding:28px}.tutorial-box h2{margin:0 0 12px;font-size:24px}.tutorial-lead{color:#c5c9dd;margin:0 0 16px;font-size:14px;line-height:1.5}.tutorial-steps{color:#c5c9dd;margin:0 0 16px;padding-left:20px;font-size:14px;line-height:1.6}.tutorial-steps li{margin-bottom:8px}.tutorial-steps strong{color:#fff}.dot-yellow,.dot-green{vertical-align:middle;border-radius:50%;width:10px;height:10px;display:inline-block}.dot-yellow{background:#f1c40f}.dot-green{background:#2ecc71}.tutorial-tip{color:#9aa0c0;margin:0 0 20px;font-size:13px}#tutorial-close{color:#14151f;cursor:pointer;background:#f1c40f;border:none;border-radius:6px;width:100%;padding:12px;font-size:15px;font-weight:600}#tutorial-close:hover{background:#d4ac0d}#auth-overlay{z-index:100;background:#0a0b12e6;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}#auth-overlay.hidden{display:none}.auth-box{background:#1a1c27;border:1px solid #2c2f3f;border-radius:10px;flex-direction:column;gap:12px;width:320px;padding:28px;display:flex}.auth-box h2{margin:0;font-size:22px}.auth-subtitle{color:#9aa0c0;margin:0 0 8px;font-size:13px}.auth-box input{color:#fff;background:#262838;border:1px solid #3a3d52;border-radius:6px;padding:10px 12px;font-size:14px}.auth-error{color:#e74c3c;min-height:18px;font-size:13px}.auth-actions{gap:8px;display:flex}.auth-actions button{cursor:pointer;border:none;border-radius:6px;flex:1;padding:10px;font-size:14px}#auth-login-btn{color:#14151f;background:#f1c40f;font-weight:600}#auth-login-btn:hover{background:#d4ac0d}#auth-register-btn{color:#fff;background:#262838;border:1px solid #3a3d52}#auth-register-btn:hover{background:#313449}#game-root{flex:1;justify-content:center;align-items:center;display:flex;overflow:hidden}#game-root canvas{max-width:100%;max-height:100%}#panel{z-index:20;background:#1a1c27;border-left:1px solid #2c2f3f;width:220px;padding:16px;position:absolute;top:60px;bottom:0;right:0;overflow-y:auto}#panel.hidden{display:none}#panel h3{color:#9aa0c0;text-transform:uppercase;letter-spacing:.05em;margin:0 0 12px;font-size:15px}.build-btn{color:#fff;cursor:pointer;text-align:left;background:#262838;border:1px solid #3a3d52;border-radius:6px;justify-content:space-between;width:100%;margin-bottom:8px;padding:10px 12px;font-size:13px;display:flex}.build-btn:hover{background:#313449}.build-btn.active{background:#3a3417;border-color:#f1c40f}.back-btn{color:#fff;cursor:pointer;background:#c0392b;border:none;border-radius:6px;width:100%;margin-top:16px;padding:10px 12px;font-size:13px}.back-btn:hover{background:#a93226}