/* ===== MULTIPLAYER CSS ===== */

/* ─── ONBOARD MODE CARDS ───────────────────────────── */
.mp-onboard-mode-card {
  width:160px; padding:24px 16px; text-align:center; cursor:pointer;
  border:2px solid #222; background:#0a0a0a;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:all .18s; position:relative;
}
.mp-onboard-mode-card:hover { border-color:#4488cc; transform:translateY(-4px); box-shadow:0 8px 30px #4488cc22; }
.mp-onboard-mode-card.mp-mode-selected { border-color:#ffee44; box-shadow:0 0 24px #ffee4433; }
.mp-onboard-mode-card h3 { font-size:clamp(12px,2vw,16px); color:#4488cc; margin-bottom:8px; }
.mp-onboard-mode-card p  { font-family:'Rajdhani',sans-serif; font-size:13px; color:#555; font-weight:600; }
.mp-mode-icon { font-size:28px; margin-bottom:10px; }

/* Room row sub-text */
.mp-room-sub { font-size:6px; color:#555; margin-top:3px; }
.mp-room-info { flex:1; display:flex; flex-direction:column; }
.mp-empty-slot { font-size:6px; color:#333; text-align:center; padding:10px 0; }

/* ─── ROOM CODE DISPLAY (lobi) ─────────────────────── */
.mp-code-display {
  display:flex; align-items:center; gap:14px;
  background:rgba(0,0,0,0.7); border:2px solid #9c27b0;
  padding:10px 20px;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  box-shadow:0 0 24px #9c27b033;
}
.mp-code-label { font-size:6px; color:#9c27b0; letter-spacing:2px; }
.mp-code-value {
  font-size:clamp(20px,4vw,32px); color:#fff; letter-spacing:6px;
  font-family:'Press Start 2P',monospace;
  text-shadow:0 0 20px #9c27b0;
}
.mp-copy-btn {
  font-family:'Press Start 2P',monospace; font-size:5px;
  background:#9c27b022; border:1px solid #9c27b0; color:#ce93d8;
  padding:6px 12px; cursor:pointer; transition:all .12s;
}
.mp-copy-btn:hover { background:#9c27b044; }


.mp-screen {
  position:fixed; inset:0; z-index:60;
  display:none; flex-direction:column;
  align-items:center; justify-content:center;
  background:rgba(4,4,4,0.97);
  font-family:'Press Start 2P',monospace;
  gap:18px; padding:20px;
}
.mp-title {
  font-size:clamp(10px,2vw,16px); color:#fff;
  text-shadow:0 0 20px rgba(255,255,255,.3), 2px 2px 0 #000;
  letter-spacing:2px; text-align:center;
}
.mp-subtitle { font-size:7px; color:#555; letter-spacing:2px; text-align:center; }
.mp-back-btn {
  font-family:'Press Start 2P',monospace; font-size:7px;
  background:none; border:1px solid #333; color:#666;
  padding:7px 14px; cursor:pointer; transition:all .12s;
}
.mp-back-btn:hover { border-color:#fff; color:#fff; }

/* ─── NAME SCREEN ──────────────────────────────────── */
#mp-name-screen .mp-input-group {
  display:flex; flex-direction:column; gap:10px; width:min(360px,90vw);
}
.mp-label { font-size:6px; color:#666; letter-spacing:1px; margin-bottom:2px; }
.mp-input {
  font-family:'Press Start 2P',monospace; font-size:9px;
  background:#0a0a0a; border:1px solid #333; color:#fff;
  padding:11px 14px; width:100%; outline:none;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
  transition:border-color .15s;
}
.mp-input:focus { border-color:#4488cc; }
.mp-btn {
  font-family:'Press Start 2P',monospace; font-size:8px;
  padding:11px 20px; cursor:pointer; transition:all .14s;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
  border:2px solid; letter-spacing:1px;
}
.mp-btn.primary { background:#4488cc22; border-color:#4488cc; color:#4488cc; }
.mp-btn.primary:hover { background:#4488cc44; box-shadow:0 0 18px #4488cc44; }
.mp-btn.success { background:#44aa6622; border-color:#44aa66; color:#44aa66; }
.mp-btn.success:hover { background:#44aa6644; }
.mp-btn.danger  { background:#cc222222; border-color:#cc2222; color:#cc2222; }
.mp-btn.danger:hover  { background:#cc222244; }
.mp-btn.outline { background:none; border-color:#444; color:#888; }
.mp-btn.outline:hover { border-color:#fff; color:#fff; }
.mp-btn:disabled { opacity:.3; cursor:not-allowed; }

#mp-connecting { position:fixed; inset:0; z-index:65; background:#000000cc;
  display:none; align-items:center; justify-content:center; flex-direction:column; gap:14px; }
#mp-connecting span { font-family:'Press Start 2P',monospace; font-size:9px; color:#4488cc;
  animation:blink 1s infinite; }

/* ─── MODE SCREEN ──────────────────────────────────── */
#mp-mode-screen .mp-mode-cards { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; }
.mp-mode-card {
  width:200px; padding:28px 20px; text-align:center; cursor:pointer;
  border:2px solid #222; background:#0a0a0a;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:all .18s;
}
.mp-mode-card:hover { border-color:#4488cc; transform:translateY(-4px); box-shadow:0 8px 30px #4488cc22; }
.mp-mode-card h3 { font-size:clamp(12px,2vw,18px); color:#4488cc; margin-bottom:10px; }
.mp-mode-card p { font-family:'Rajdhani',sans-serif; font-size:13px; color:#555; font-weight:600; line-height:1.7; }

/* ─── ROOM SCREEN ──────────────────────────────────── */
#mp-room-screen { gap:14px; }
#mp-room-screen .mp-panel {
  width:min(640px,96vw); background:#080808; border:1px solid #222;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.mp-panel-header {
  padding:10px 16px; border-bottom:1px solid #1a1a1a;
  display:flex; align-items:center; justify-content:space-between;
}
.mp-panel-title { font-size:8px; color:#fff; }
.mp-panel-body { padding:14px 16px; }
#mp-room-list { display:flex; flex-direction:column; gap:6px; max-height:200px; overflow-y:auto; min-height:40px; }
.mp-room-row {
  display:flex; align-items:center; gap:10px;
  background:#0e0e0e; border:1px solid #1a1a1a;
  padding:8px 12px;
}
.mp-room-name  { flex:1; font-size:7px; color:#ccc; }
.mp-room-owner { font-size:6px; color:#555; width:80px; }
.mp-room-players { font-size:6px; color:#4488cc; width:40px; text-align:center; }
.mp-join-btn {
  font-family:'Press Start 2P',monospace; font-size:6px;
  background:#4488cc22; border:1px solid #4488cc; color:#4488cc;
  padding:5px 10px; cursor:pointer; transition:all .12s;
}
.mp-join-btn:hover { background:#4488cc44; }
.mp-empty-rooms { font-size:7px; color:#333; text-align:center; padding:20px 0; }
.mp-create-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.mp-create-row .mp-input { flex:1; min-width:140px; font-size:7px; }

/* ─── LOBBY SCREEN ─────────────────────────────────── */
#mp-lobby-screen { gap:14px; }
#mp-lobby-screen .mp-lobby-body {
  display:flex; gap:16px; flex-wrap:wrap; justify-content:center;
  width:min(760px,96vw);
}
.mp-lobby-col {
  flex:1; min-width:180px; background:#080808; border:1px solid #222;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.mp-col-header {
  padding:8px 14px; border-bottom:1px solid #1a1a1a; font-size:7px;
}
.mp-col-header.t1 { color:#4488cc; }
.mp-col-header.t2 { color:#cc4444; }
.mp-col-body { padding:10px 12px; display:flex; flex-direction:column; gap:6px; }
.mp-player-row {
  display:flex; align-items:center; gap:8px;
  background:#0e0e0e; border:1px solid #1a1a1a; padding:7px 10px;
}
.mp-player-row.mp-me { border-color:#ffee44; }
.mp-player-dot { width:8px; height:8px; background:#44cc44; border-radius:50%; flex-shrink:0; }
.mp-player-row span:nth-child(2) { flex:1; font-size:7px; color:#ccc; }
.mp-move-btn {
  font-family:'Press Start 2P',monospace; font-size:6px;
  background:none; border:1px solid #333; color:#555; padding:3px 6px; cursor:pointer;
}
.mp-move-btn:hover { border-color:#4488cc; color:#4488cc; }
.mp-settings-col { flex:1; min-width:180px; }
.mp-settings-grid { display:flex; flex-direction:column; gap:8px; padding:10px 14px; }
.mp-setting-row { display:flex; align-items:center; gap:8px; }
.mp-setting-lbl { font-size:6px; color:#555; flex:1; }
.mp-setting-input {
  font-family:'Press Start 2P',monospace; font-size:7px;
  background:#0a0a0a; border:1px solid #222; color:#fff;
  padding:5px 8px; width:56px; text-align:center; outline:none;
}
.mp-setting-input:disabled { opacity:.35; }
.mp-lobby-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.mp-room-id-row { display:flex; align-items:center; gap:10px; }
.mp-room-id-tag { font-size:8px; color:#4488cc; letter-spacing:3px; }
.mp-copy-btn {
  font-family:'Press Start 2P',monospace; font-size:5px;
  background:none; border:1px solid #333; color:#555; padding:4px 8px; cursor:pointer;
}
.mp-copy-btn:hover { border-color:#4488cc; color:#4488cc; }

/* ─── CHARACTER SELECT ─────────────────────────────── */
#mp-charselect-screen { gap:16px; }
.mp-char-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media(min-width:600px){ .mp-char-grid { grid-template-columns:repeat(4,1fr); } }
.mp-char-card {
  width:120px; padding:18px 10px; text-align:center; cursor:pointer;
  border:2px solid #222; background:#0a0a0a;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
  transition:all .16s; position:relative;
}
.mp-char-card:hover { border-color:#4488cc; transform:translateY(-3px); }
.mp-char-card.mp-char-selected {
  border-color:#ffee44; box-shadow:0 0 20px #ffee4444;
}
.mp-char-card[data-char="human"] { --cc:#4488cc; }
.mp-char-card[data-char="devil"] { --cc:#cc2200; }
.mp-char-card[data-char="elf"]   { --cc:#228833; }
.mp-char-card[data-char="angel"] { --cc:#bbaa00; }
.mp-char-card:hover,.mp-char-card.mp-char-selected { border-color:var(--cc); }
.mp-char-preview { width:80px; height:80px; margin:0 auto 10px; }
.mp-char-preview canvas { width:80px; height:80px; image-rendering:pixelated; }
.mp-char-label { font-size:7px; color:var(--cc); }
.mp-char-timer { font-size:24px; color:#ffee44; text-shadow:0 0 20px #ffee44; }
#mp-charselect-players { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.mp-cs-player {
  background:#0a0a0a; border:1px solid #222; padding:10px 16px;
  text-align:center; min-width:100px;
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,5px 100%,0 calc(100% - 5px));
}
.mp-cs-player.mp-cs-done { border-color:#44cc44; }
.mp-cs-name { font-size:6px; color:#888; margin-bottom:6px; }
.mp-cs-char { font-size:8px; color:#44cc44; }
.mp-cs-waiting { font-size:6px; color:#333; animation:blink 1s infinite; }

/* ─── RESULT SCREEN ────────────────────────────────── */
#mp-result-screen { gap:20px; }
#mp-result-title { font-size:clamp(16px,4vw,36px); text-shadow:3px 3px 0 #000; text-align:center; }
#mp-result-teams { display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
.mp-res-team {
  min-width:180px; background:#080808; border:1px solid #222;
  padding:16px 20px;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
}
.mp-res-team.mp-res-winner { border-color:#ffee44; box-shadow:0 0 24px #ffee4422; }
.mp-res-team-lbl { font-size:7px; color:#ffee44; margin-bottom:12px; letter-spacing:1px; }
.mp-res-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.mp-res-rank  { font-size:6px; color:#555; width:18px; }
.mp-res-name  { flex:1; font-size:7px; color:#ccc; }
.mp-res-name.mp-res-me { color:#ffee44; }
.mp-res-score { font-size:7px; color:#4488cc; }
.mp-result-btns { display:flex; gap:12px; }

/* ─── IN-GAME PvP HUD ─────────────────────────────── */
#mp-score-hud {
  position:fixed; top:70px; left:50%; transform:translateX(-50%);
  display:none; flex-direction:row; align-items:center; gap:16px;
  background:rgba(0,0,0,0.85); border:1px solid #222;
  padding:6px 16px; z-index:15; pointer-events:none;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
}
.mp-team { display:flex; flex-direction:column; gap:3px; font-size:6px; }
.mp-vs { font-size:9px; color:#555; }
#mp-round-timer {
  position:fixed; top:70px; right:16px;
  font-size:8px; color:#ffee44;
  background:rgba(0,0,0,0.85); border:1px solid #333;
  padding:6px 12px; z-index:15; pointer-events:none;
  display:none;
}
#mp-respawn {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:12px; color:#ff4444; text-shadow:0 0 20px #ff4444;
  z-index:20; pointer-events:none; display:none;
  animation:blink .6s infinite;
}