/* ── Auth Pages ─────────────────────────────────────────────────────────── */
.auth-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem}
.auth-card{background:#1e1b4b;border:1px solid #4c1d95;border-radius:1.25rem;padding:2.5rem 2rem;width:100%;max-width:420px;box-shadow:0 0 40px #7c3aed33}
.auth-logo{font-size:3rem;text-align:center;margin-bottom:.5rem}
.auth-title{font-family:'Orbitron',sans-serif;color:#a78bfa;text-align:center;font-size:1.6rem;margin:0 0 .25rem}
.auth-sub{color:#94a3b8;text-align:center;margin:0 0 1.5rem;font-size:.9rem}
.auth-error{background:#7f1d1d;border:1px solid #ef4444;border-radius:.5rem;padding:.75rem 1rem;color:#fca5a5;margin-bottom:1rem;font-size:.875rem}
.auth-field{margin-bottom:1rem}
.auth-field label{display:block;color:#c4b5fd;font-size:.82rem;font-weight:600;margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.05em}
.auth-field input{width:100%;background:#0f0a1e;border:1px solid #4c1d95;border-radius:.6rem;padding:.65rem .9rem;color:#e2e8f0;font-size:.95rem;transition:border .2s}
.auth-field input:focus{outline:none;border-color:#a78bfa;box-shadow:0 0 0 3px #7c3aed33}
.auth-btn{width:100%;background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;border-radius:.7rem;padding:.8rem;color:#fff;font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:opacity .2s,transform .1s;margin-top:.5rem}
.auth-btn:hover{opacity:.9;transform:translateY(-1px)}
.auth-link{text-align:center;color:#64748b;margin-top:1.25rem;font-size:.875rem}
.auth-link a{color:#a78bfa;text-decoration:none}
.auth-link a:hover{text-decoration:underline}

/* Profile */
.profile-stats{display:flex;gap:1rem;justify-content:center;margin:1.25rem 0}
.pstat{background:#0f0a1e;border:1px solid #4c1d95;border-radius:.75rem;padding:.75rem 1.25rem;text-align:center;flex:1}
.pstat-val{display:block;font-family:'Orbitron',sans-serif;font-size:1.6rem;color:#a78bfa}
.pstat-lbl{font-size:.75rem;color:#64748b;text-transform:uppercase;letter-spacing:.05em}
.avatar-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}
.av-opt{width:3rem;height:3rem;border:2px solid #4c1d95;border-radius:.6rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;cursor:pointer;transition:border .15s,transform .1s}
.av-opt:hover{border-color:#a78bfa;transform:scale(1.1)}
.av-sel{border-color:#a78bfa;background:#7c3aed22}
.av-opt input{display:none}

/* ── Lobby ───────────────────────────────────────────────────────────────── */
.mp-card{background:#1e1b4b;border:1px solid #4c1d95;border-radius:1rem;padding:1.5rem}
.mp-card-title{font-family:'Orbitron',sans-serif;color:#a78bfa;font-size:1.1rem;margin:0 0 1rem}
.create-room-form .cr-row{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap}
.cr-field{display:flex;flex-direction:column;gap:.35rem;min-width:150px}
.cr-field-wide{flex:1}
.cr-field label{color:#c4b5fd;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.cr-field select,.cr-field input{background:#0f0a1e;border:1px solid #4c1d95;border-radius:.6rem;padding:.6rem .9rem;color:#e2e8f0;font-size:.9rem}
.cr-field select:focus,.cr-field input:focus{outline:none;border-color:#a78bfa}
.cr-btn{background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;border-radius:.7rem;padding:.65rem 1.5rem;color:#fff;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .2s}
.cr-btn:hover{opacity:.85}
.mp-filter-tabs{display:flex;gap:.5rem;flex-wrap:wrap}
.mft{background:#1e1b4b;border:1px solid #4c1d95;border-radius:2rem;padding:.4rem 1rem;color:#94a3b8;cursor:pointer;font-size:.85rem;transition:all .2s}
.mft.active,.mft:hover{background:#7c3aed;border-color:#7c3aed;color:#fff}
.rooms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.room-card{background:#1e1b4b;border:1px solid #4c1d9533;border-radius:1rem;overflow:hidden;transition:transform .2s,box-shadow .2s}
.room-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px #7c3aed22}
.rc-header{display:flex;align-items:center;gap:.75rem;padding:1rem;border-bottom:1px solid #4c1d9544}
.rc-emoji{font-size:2rem}
.rc-name{font-weight:700;color:#e2e8f0;font-size:.95rem}
.rc-game{font-size:.7rem;color:#64748b;text-transform:uppercase;letter-spacing:.08em;margin-top:.15rem}
.rc-players{margin-left:auto;text-align:center}
.rc-count{display:block;font-family:'Orbitron',sans-serif;font-size:1.2rem;color:#a78bfa}
.rc-lbl{font-size:.7rem;color:#64748b}
.rc-body{padding:1rem}
.rc-host{color:#94a3b8;font-size:.85rem;margin-bottom:.6rem}
.rc-avatars{font-size:1.4rem;margin-bottom:.75rem;letter-spacing:.1rem}
.rc-join{display:block;background:linear-gradient(135deg,#7c3aed,#a855f7);border-radius:.6rem;padding:.5rem;color:#fff;text-align:center;text-decoration:none;font-weight:700;font-size:.875rem;transition:opacity .2s}
.rc-join:hover{opacity:.85;color:#fff}
.rc-full{display:block;background:#1e293b;border-radius:.6rem;padding:.5rem;color:#64748b;text-align:center;font-size:.875rem}
.no-rooms{grid-column:1/-1;text-align:center;color:#64748b;padding:3rem;font-size:1rem}

/* ── Game Room ───────────────────────────────────────────────────────────── */
.room-wrap{display:flex;flex-direction:column;height:calc(100vh - 64px)}
.room-header{display:flex;align-items:center;gap:1rem;background:#0f0a1e;border-bottom:1px solid #1e1b4b;padding:.6rem 1rem;flex-wrap:wrap}
.rh-back{color:#64748b;text-decoration:none;font-size:.85rem;white-space:nowrap}
.rh-back:hover{color:#a78bfa}
.rh-emoji{font-size:1.5rem}
.rh-title{font-family:'Orbitron',sans-serif;color:#a78bfa;font-size:1rem;font-weight:700}
.rh-players{display:flex;gap:.5rem;margin:0 auto;flex-wrap:wrap}
.rh-avatar{display:flex;flex-direction:column;align-items:center;gap:2px}
.rh-avatar span:first-child{font-size:1.6rem}
.rh-uname{font-size:.6rem;color:#64748b;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rh-me .rh-uname{color:#a78bfa}
.rh-host-badge{background:#7c3aed;border-radius:1rem;padding:.25rem .6rem;font-size:.75rem;color:#fff}
.rh-leave{background:#7f1d1d;border:1px solid #ef4444;border-radius:.5rem;padding:.3rem .75rem;color:#fca5a5;text-decoration:none;font-size:.8rem;transition:background .2s}
.rh-leave:hover{background:#991b1b;color:#fca5a5}

.room-body{display:flex;flex:1;overflow:hidden}
.room-game{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#080612;position:relative;overflow:hidden}
#gameCanvas{max-width:100%;max-height:100%}
.game-overlay{position:absolute;inset:0;background:#000000bb;display:flex;align-items:center;justify-content:center;z-index:10}
.game-overlay.hidden{display:none}
.go-content{background:#1e1b4b;border:2px solid #7c3aed;border-radius:1.25rem;padding:2rem 3rem;text-align:center}
.go-title{font-family:'Orbitron',sans-serif;font-size:1.8rem;color:#a78bfa;margin-bottom:.5rem}
.go-msg{color:#94a3b8;margin-bottom:1.5rem}
.go-btn{background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;border-radius:.7rem;padding:.75rem 2rem;color:#fff;font-family:'Orbitron',sans-serif;cursor:pointer;font-size:1rem;transition:opacity .2s}
.go-btn:hover{opacity:.85}
.game-status{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);background:#1e1b4bcc;border:1px solid #4c1d95;border-radius:2rem;padding:.4rem 1.25rem;color:#c4b5fd;font-size:.875rem;pointer-events:none;transition:opacity .3s}

.room-chat{width:300px;min-width:260px;background:#0f0a1e;border-left:1px solid #1e1b4b;display:flex;flex-direction:column}
.chat-header{padding:.75rem 1rem;border-bottom:1px solid #1e1b4b;font-family:'Orbitron',sans-serif;font-size:.85rem;color:#a78bfa}
.chat-messages{flex:1;overflow-y:auto;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}
.chat-messages::-webkit-scrollbar{width:4px}
.chat-messages::-webkit-scrollbar-thumb{background:#4c1d95;border-radius:2px}
.chat-msg{display:flex;gap:.5rem;align-items:flex-start}
.cm-av{font-size:1.2rem;flex-shrink:0;margin-top:2px}
.cm-body{background:#1e1b4b;border-radius:.6rem;padding:.4rem .65rem;max-width:220px;word-break:break-word}
.cm-user{font-size:.72rem;font-weight:700;color:#a78bfa}
.cm-time{font-size:.65rem;color:#475569;margin-left:.4rem}
.cm-text{font-size:.85rem;color:#e2e8f0;margin-top:.15rem}
.chat-input-wrap{display:flex;gap:.4rem;padding:.75rem;border-top:1px solid #1e1b4b}
#chat-input{flex:1;background:#1e1b4b;border:1px solid #4c1d95;border-radius:.5rem;padding:.5rem .7rem;color:#e2e8f0;font-size:.875rem}
#chat-input:focus{outline:none;border-color:#a78bfa}
#chat-send{background:#7c3aed;border:none;border-radius:.5rem;padding:.5rem .85rem;color:#fff;cursor:pointer;font-weight:700;transition:opacity .2s}
#chat-send:hover{opacity:.85}

/* System messages in chat */
.chat-sys{text-align:center;color:#475569;font-size:.75rem;font-style:italic;padding:.2rem 0}

/* Turn indicator */
.turn-badge{position:absolute;top:1rem;left:50%;transform:translateX(-50%);background:#7c3aed;border-radius:2rem;padding:.35rem 1.2rem;color:#fff;font-family:'Orbitron',sans-serif;font-size:.8rem;pointer-events:none}

@media(max-width:700px){
  .room-body{flex-direction:column}
  .room-chat{width:100%;min-width:unset;height:220px;border-left:none;border-top:1px solid #1e1b4b}
  .rooms-grid{grid-template-columns:1fr}
}