*{margin:0;padding:0;box-sizing:border-box}
body{background:#0f1117;font-family:'Segoe UI',sans-serif;color:#e8e8e8;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}

/* ── Screens ── */
.screen{display:none;width:100%;height:100vh;align-items:center;justify-content:center}
.screen.active{display:flex}

/* ── Card ── */
.card{background:#16181f;border:1px solid #2a3550;border-radius:20px;padding:2.2rem 2.5rem;text-align:center;max-width:400px;width:90%;box-shadow:0 8px 40px rgba(0,0,0,.6)}
.card.wide{max-width:520px;text-align:left}
.card-icon{font-size:3.2rem;margin-bottom:.6rem}
.card h1{font-size:1.9rem;color:#fff;margin-bottom:.2rem}
.card h2{font-size:1.4rem;color:#4a90e2;margin-bottom:.3rem}
.subtitle{color:#8a96aa;font-size:.9rem;margin-bottom:1.2rem}
.section{background:#1e2130;border-radius:12px;padding:1rem 1.2rem;margin-bottom:1rem}
.section h3{color:#b0b8c8;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:.7rem}

/* ── Inputs ── */
input,select{display:block;width:100%;background:#1e2130;border:1px solid #2a3550;border-radius:8px;padding:.6rem .8rem;color:#e8e8e8;font-size:.9rem;outline:none;margin-bottom:.6rem}
input:focus,select:focus{border-color:#4a90e2}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.row2 input,.row2 select{margin:0}
.row2 button{margin:0}

/* ── Buttons ── */
button{background:#2a6dd9;color:#fff;border:none;border-radius:10px;padding:.7rem 1.5rem;font-size:.9rem;font-weight:700;cursor:pointer;transition:background .2s;width:100%;margin-top:.5rem}
button:hover{background:#3a7de9}
button:active{transform:scale(.97)}
button.sec{background:#1e2130;border:1px solid #2a3550;color:#b0b8c8}
button.sec:hover{background:#2a3550}
button.danger{background:#c0392b}
button.danger:hover{background:#e74c3c}

.back-link{display:inline-block;margin-top:.8rem;color:#4a90e2;font-size:.85rem;text-decoration:none}
.err{color:#e74c3c;font-size:.82rem;margin:.3rem 0;padding:.4rem .6rem;background:rgba(231,76,60,.1);border-radius:6px}
.err.hidden{display:none}

/* ── Account list ── */
.account-row{display:flex;align-items:center;justify-content:space-between;padding:.5rem .7rem;border-radius:8px;background:#181c24;margin-bottom:.4rem;font-size:.85rem}
.account-row .name{font-weight:700;color:#fff}
.account-row .role{color:#4a90e2;font-size:.75rem;background:#1a2540;padding:.15rem .5rem;border-radius:12px}
.account-row .score{color:#f39c12;font-size:.78rem}
.acc-del{background:#c0392b;color:#fff;border:none;border-radius:6px;padding:.2rem .6rem;font-size:.75rem;cursor:pointer;width:auto;margin:0}
.acc-del:hover{background:#e74c3c}

/* ── Game HUD ── */
#game-screen{flex-direction:column;position:relative}
#hud{width:100%;display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;background:#16181f;border-bottom:2px solid #2a6dd9;gap:.5rem;flex-wrap:wrap;z-index:10}
#hud-left{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
#hud-left span{font-size:.85rem;font-weight:700;color:#e8e8e8}
#hud-center{font-size:.85rem;color:#4a90e2;font-weight:700;flex:1;text-align:center}
#hud-right{display:flex;gap:.4rem}
.hud-btn{background:#1e2130;border:1px solid #2a3550;color:#b0b8c8;border-radius:8px;padding:.3rem .7rem;font-size:.8rem;width:auto;margin:0;cursor:pointer}
.hud-btn:hover{background:#2a3550}

#canvas{display:block;flex:1;width:100%;touch-action:none}

#controls-hint{position:absolute;bottom:70px;left:50%;transform:translateX(-50%);display:flex;gap:1rem;font-size:.72rem;color:#4a5060;pointer-events:none;white-space:nowrap}
#controls-hint span{background:rgba(15,17,23,.8);padding:.25rem .6rem;border-radius:6px}

/* ── Mobile d-pad ── */
#mobile-dpad{position:absolute;bottom:12px;right:12px;display:flex;flex-direction:column;align-items:center;gap:.3rem}
.dpad-row{display:flex;gap:.3rem}
.dpad-btn{width:52px;height:52px;font-size:1.2rem;background:#1e2130;border:1px solid #2a3550;border-radius:10px;color:#e8e8e8;cursor:pointer;font-weight:700;touch-action:manipulation;-webkit-tap-highlight-color:transparent;padding:0;width:auto;margin:0}
.dpad-btn:active{background:#2a6dd9}

/* ── Station popup ── */
#station-popup{position:absolute;bottom:90px;left:50%;transform:translateX(-50%);background:#16181f;border:2px solid #2a6dd9;border-radius:16px;padding:1.2rem 1.6rem;min-width:260px;max-width:90vw;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.6);z-index:20}
#station-popup.hidden{display:none}
#sp-name{font-size:1.1rem;font-weight:800;color:#4a90e2;margin-bottom:.4rem}
#sp-body{font-size:.85rem;color:#b0b8c8;margin-bottom:.8rem;line-height:1.5}
#sp-close{width:auto;padding:.5rem 1.5rem;font-size:.85rem;margin:0}

@media(max-width:500px){
  #controls-hint{display:none}
  #hud-left span{font-size:.75rem}
  .card{padding:1.6rem 1.2rem}
}