* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0d1117;
  --accent: #ff5c38;
  --accent2: #ffd23f;
  --panel: rgba(18, 24, 34, 0.82);
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: #e6edf3;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

.hidden { display: none !important; }

/* ---------------- Lobby ---------------- */
#lobby {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(255, 92, 56, 0.18), transparent),
    radial-gradient(900px 500px at 100% 110%, rgba(255, 210, 63, 0.10), transparent),
    #0a0e14;
  z-index: 30;
}

.lobby-card {
  width: min(440px, 92vw);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 28px 26px 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}

.lobby-card h1 {
  font-size: 40px; letter-spacing: 2px; text-align: center;
  font-weight: 900; color: #fff; line-height: 1.05;
}
.lobby-card h1 span { color: var(--accent); }
.tag { text-align: center; color: #9fb0c3; margin: 8px 0 20px; font-size: 14px; }

label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #8b98a9; margin: 14px 0 6px; }

#nameInput {
  width: 100%; padding: 13px 14px; font-size: 16px;
  background: #0c1119; border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px; color: #fff; outline: none;
}
#nameInput:focus { border-color: var(--accent); }

#avatarPicker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.avatar {
  display: flex; align-items: center; justify-content: center;
  padding: 5px 2px; background: #0c1119; border: 2px solid transparent;
  border-radius: 10px; cursor: pointer; transition: transform .08s;
}
.avatar canvas { display: block; image-rendering: pixelated; }
.avatar:hover { transform: translateY(-2px); }
.avatar.sel { border-color: var(--accent2); background: rgba(255, 210, 63, 0.12); }

#playBtn {
  width: 100%; margin-top: 22px; padding: 15px; font-size: 17px; font-weight: 800;
  letter-spacing: 1px; color: #1a1000; cursor: pointer; border: none; border-radius: 12px;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  box-shadow: 0 10px 26px rgba(255, 92, 56, 0.35);
}
#playBtn:active { transform: translateY(1px); }

.hint { text-align: center; color: #6f7d8f; font-size: 12px; margin-top: 14px; }
.hint b { color: #aeb9c7; }
.mobile-hint { display: none; }
.credit { position: absolute; bottom: 16px; color: #56606d; font-size: 12px; text-align: center; padding: 0 12px; }

/* ---------------- Game ---------------- */
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: crosshair; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

#leaderboard {
  position: absolute; top: 14px; right: 14px; width: 210px;
  background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px; padding: 10px 12px; font-size: 13px;
}
#leaderboard h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent2); margin-bottom: 6px; }
.lb-row { display: flex; justify-content: space-between; padding: 2px 0; color: #cdd7e2; }
.lb-row.me { color: var(--accent2); font-weight: 700; }
.lb-row b { color: #fff; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: middle; }

#killfeed { position: absolute; top: 14px; left: 14px; width: 320px; font-size: 13px; }
.kf { background: rgba(0, 0, 0, 0.45); border-left: 3px solid var(--accent); padding: 5px 9px; border-radius: 6px; margin-bottom: 5px; animation: pop .15s ease; }
@keyframes pop { from { transform: translateX(-8px); opacity: 0; } }

#statusBar { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; align-items: center; }
#hpWrap { position: relative; width: 240px; height: 26px; background: rgba(0, 0, 0, 0.5); border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); }
#hpBar { height: 100%; width: 100%; background: linear-gradient(90deg, #ff3b3b, #ffb03b); transition: width .12s; }
#hpText { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px #000; }
#weaponBox { background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 6px 10px; font-size: 15px; font-weight: 700; white-space: nowrap; pointer-events: auto; cursor: pointer; -webkit-user-select: none; user-select: none; }
#weaponBox .ammo { color: var(--accent2); }
#weaponBox .slot { display: inline-block; padding: 2px 7px; border-radius: 6px; border: 1px solid transparent; opacity: 0.5; margin-right: 3px; }
#weaponBox .slot.on { border-color: var(--accent2); background: rgba(255, 210, 63, 0.14); opacity: 1; }
#weaponBox .wname { margin-left: 4px; }
#weaponBox .qkey { margin-left: 7px; font-size: 11px; color: #8b98a9; border: 1px solid #3a4656; border-radius: 4px; padding: 1px 5px; }

#uiButtons { position: absolute; right: 14px; bottom: 16px; display: flex; gap: 8px; }
#muteBtn, #chatBtn, #micBtn, #fsBtn { background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 6px 10px; font-size: 15px; cursor: pointer; pointer-events: auto; -webkit-user-select: none; user-select: none; }

#leaderboard .online { float: right; font-size: 11px; color: #4ade80; }
.bot-tag { font-size: 9px; color: #7d8a9a; border: 1px solid #3a4656; border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: middle; }

#onlineCount { text-align: center; color: #4ade80; font-size: 14px; font-weight: 600; margin-top: 8px; min-height: 18px; }
#lobbyMsg { text-align: center; color: #fca5a5; font-size: 13px; margin-top: 6px; }
#micBtn.talking, #voiceBtn.talking { border-color: #4ade80; background: rgba(74, 222, 128, 0.3); box-shadow: 0 0 12px rgba(74, 222, 128, 0.5); }

#voiceBtn {
  position: absolute; right: 44px; bottom: 152px;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(56, 189, 248, 0.55); border: 3px solid rgba(255, 255, 255, 0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; pointer-events: auto;
  -webkit-user-select: none; user-select: none;
}
#voiceBtn:active { transform: scale(0.94); }

#roundTimer {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: var(--panel); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px; padding: 6px 18px;
  font-weight: 800; font-size: 16px; letter-spacing: 1px; color: #fff;
}

#chatLog { position: absolute; left: 14px; bottom: 112px; width: 300px; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.chat-line { background: rgba(0, 0, 0, 0.5); padding: 4px 9px; border-radius: 6px; color: #e6edf3; word-break: break-word; animation: pop .15s ease; }
.chat-line.sys { color: #fecaca; background: rgba(90, 12, 12, 0.45); border-left: 2px solid rgba(255, 92, 56, 0.7); font-style: italic; }
#chatInput {
  position: absolute; left: 14px; bottom: 68px; width: 280px;
  padding: 9px 12px; background: rgba(10, 14, 20, 0.92);
  border: 1px solid var(--accent2); border-radius: 8px;
  color: #fff; font-size: 14px; outline: none; pointer-events: auto;
}

#roundOverlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  background: rgba(8, 18, 38, 0.5);
}
#roundWinner { font-size: 40px; font-weight: 900; text-shadow: 0 2px 10px #000; padding: 0 16px; }
#roundCount { font-size: 17px; color: #ffe9a8; margin-top: 10px; }

/* Narrow desktop windows: keep the HP bar clear of the button cluster. */
@media (max-width: 900px) {
  #statusBar { left: 14px; transform: none; }
}
@media (max-width: 640px) {
  #uiButtons { bottom: 64px; }  /* lift buttons above the status-bar row */
}

/* Mobile HUD layout: status bar up top (thumbs own the bottom corners),
   buttons in a column on the left edge, everything compact. */
@media (hover: none) and (pointer: coarse) {
  #chatLog { bottom: 170px; width: 200px; font-size: 11px; }
  #chatInput { bottom: 150px; width: 210px; }

  #statusBar { top: 46px; bottom: auto; gap: 8px; }
  #hpWrap { width: 150px; height: 20px; }
  #hpText { font-size: 11px; }
  #weaponBox { padding: 4px 8px; font-size: 12px; }
  #weaponBox .qkey { display: none; }

  #uiButtons { left: 10px; right: auto; bottom: auto; top: 42%; flex-direction: column; gap: 8px; }
  #micBtn { display: none; }           /* the big 🎤 hold button covers this */

  #roundTimer { top: 8px; padding: 4px 12px; font-size: 13px; }
  #leaderboard { width: 150px; font-size: 11px; padding: 6px 9px; }
  #leaderboard h3 { font-size: 9px; }
  #killfeed { width: 190px; font-size: 10px; }
  #voiceBtn { right: 54px; bottom: 158px; width: 56px; height: 56px; font-size: 20px; }
}

/* Rotate-to-landscape hint */
#rotateHint {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #0a0e14; text-align: center; padding: 24px;
}
#rotateHint .rot-icon {
  font-size: 64px; margin-bottom: 18px;
  animation: rotwig 1.6s ease-in-out infinite;
}
#rotateHint p { color: #cdd7e2; font-size: 18px; max-width: 320px; }
#rotateHint b { color: var(--accent2); }
@keyframes rotwig { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(78deg); } }

#deathOverlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(120, 0, 0, 0.28); }
#deathOverlay div { font-size: 44px; font-weight: 900; }
#deathOverlay small { font-size: 16px; color: #ffd; margin-top: 8px; }

/* ---------------- Mobile ---------------- */
#mobile { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
#joystick { position: absolute; left: 26px; bottom: 26px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, 0.07); border: 2px solid rgba(255, 255, 255, 0.15); pointer-events: auto; }
#stick { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); }
#aimStick { position: absolute; right: 26px; bottom: 26px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 92, 56, 0.12); border: 2px solid rgba(255, 92, 56, 0.4); pointer-events: auto; }
#aimNub { position: absolute; left: 35px; top: 35px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 92, 56, 0.55); display: flex; align-items: center; justify-content: center; font-size: 20px; }

@media (hover: none) and (pointer: coarse) {
  .mobile-hint { display: block; }
}