/* 月刃回旋镖 — 深空月夜主题 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: #0b1026 radial-gradient(1200px 700px at 50% -10%, #1b2450 0%, #0b1026 60%);
  color: #e8ecff;
  font-family: "PingFang SC", "Microsoft YaHei", -apple-system, "Helvetica Neue", sans-serif;
  overflow: hidden;
}
#app { height: 100%; }
.screen { height: 100%; display: flex; align-items: center; justify-content: center; }
.hidden { display: none !important; }

.card {
  background: rgba(21, 28, 58, 0.92);
  border: 1px solid rgba(126, 200, 255, 0.25);
  border-radius: 18px;
  padding: 32px 40px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  text-align: center;
  max-width: 520px;
  width: min(92vw, 520px);
  max-height: 92vh;
  overflow-y: auto;
}

.home-moon { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 0 24px rgba(255, 217, 100, 0.45)); }
h1 { font-size: 40px; letter-spacing: 6px; margin: 8px 0 2px; color: #ffd964; text-shadow: 0 0 22px rgba(255, 217, 100, 0.35); }
.subtitle { color: #9aa6c9; margin-bottom: 22px; letter-spacing: 2px; }

input {
  background: #0d1430;
  border: 1px solid rgba(126, 200, 255, 0.35);
  color: #e8ecff;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  outline: none;
  text-align: center;
}
input:focus { border-color: #7ec8ff; box-shadow: 0 0 0 3px rgba(126, 200, 255, 0.15); }
#nameInput { width: 100%; margin-bottom: 14px; }
#codeInput { width: 130px; text-transform: uppercase; letter-spacing: 6px; font-size: 20px; }

.btn-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 14px; }
button {
  background: #232f63;
  color: #e8ecff;
  border: 1px solid rgba(126, 200, 255, 0.35);
  border-radius: 10px;
  padding: 12px 22px;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.08s, background 0.15s;
}
button:hover { background: #2d3d7d; transform: translateY(-1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
button.primary { background: #ffd964; color: #20264a; border-color: #ffd964; font-weight: 700; }
button.primary:hover { background: #ffe38a; }
button.danger { border-color: rgba(255, 120, 120, 0.5); color: #ff9a9a; }
button.mini { font-size: 12px; padding: 5px 10px; border-radius: 7px; }
button.solo { width: 100%; border-color: rgba(141, 255, 154, 0.45); color: #8dff9a; }

.solo-overlay { position: fixed; inset: 0; background: rgba(7, 11, 28, 0.85); display: flex; align-items: center; justify-content: center; z-index: 20; }
.solo-card { min-width: 360px; }
.solo-bot.on { background: #ffd964; color: #20264a; border-color: #ffd964; font-weight: 700; }
.solo-bot { min-width: 44px; }

.hint { color: #7d89b3; font-size: 13px; margin-top: 8px; line-height: 1.6; }
.error { color: #ff8d8d; font-size: 14px; min-height: 20px; margin-top: 10px; }
.netstatus { color: #7d89b3; font-size: 12px; margin-top: 4px; min-height: 16px; }

.code { color: #ffd964; letter-spacing: 8px; font-size: 30px; }

.char-pick { display: flex; gap: 10px; justify-content: center; margin: 10px 0 18px; }
.char-pick .char-cell {
  width: 64px; height: 64px; border-radius: 12px; border: 2px solid rgba(126, 200, 255, 0.25);
  background: #0d1430; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.char-pick .char-cell img { width: 56px; height: 56px; object-fit: contain; }
.char-pick .char-cell.mine { border-color: #ffd964; box-shadow: 0 0 12px rgba(255, 217, 100, 0.4); }
.char-pick .char-cell.taken { opacity: 0.3; cursor: not-allowed; }

.player-list { list-style: none; text-align: left; margin: 6px 0 18px; }
.player-list li {
  display: flex; align-items: center; gap: 10px;
  background: #10183a; border: 1px solid rgba(126, 200, 255, 0.15);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; font-size: 15px;
}
.player-list li img { width: 34px; height: 34px; object-fit: contain; }
.player-list .pname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-list .tag { font-size: 12px; color: #7ec8ff; border: 1px solid rgba(126, 200, 255, 0.4); padding: 1px 7px; border-radius: 20px; }
.player-list .tag.host { color: #ffd964; border-color: rgba(255, 217, 100, 0.5); }
.player-list .tag.bot { color: #9aa6c9; border-color: rgba(154, 166, 201, 0.4); }
.player-list .tag.off { color: #ff9a9a; border-color: rgba(255, 120, 120, 0.4); }
.player-list .tag.ready { color: #8dff9a; border-color: rgba(141, 255, 154, 0.4); }
.player-list .rm { cursor: pointer; color: #ff9a9a; font-size: 12px; }

/* 游戏画面 */
#screen-game { position: relative; background: #070b1c; }
#cv { display: block; }
#scorebar {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; pointer-events: none;
}
#scorebar .sb {
  display: flex; align-items: center; gap: 6px;
  background: rgba(13, 20, 48, 0.85); border: 1px solid rgba(126, 200, 255, 0.25);
  border-radius: 20px; padding: 4px 12px 4px 5px; font-size: 13px;
}
#scorebar .sb img { width: 26px; height: 26px; object-fit: contain; }
#scorebar .sb.me { border-color: #ffd964; }
#scorebar .pips { display: flex; gap: 3px; }
#scorebar .pip { width: 7px; height: 7px; border-radius: 50%; background: #2a3350; }
#scorebar .pip.on { background: #ffd964; box-shadow: 0 0 6px rgba(255, 217, 100, 0.7); }

#killfeed { position: absolute; top: 64px; right: 14px; text-align: right; pointer-events: none; }
#killfeed .kf {
  background: rgba(13, 20, 48, 0.8); border-radius: 8px; padding: 5px 10px;
  margin-bottom: 6px; font-size: 13px; color: #cdd6f5; transition: opacity 0.5s;
}
#killfeed .kf b { color: #ffd964; }

#banner {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);
  font-size: 42px; font-weight: 800; letter-spacing: 4px; text-align: center;
  color: #ffd964; text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 217, 100, 0.4);
  pointer-events: none; white-space: nowrap;
}
#banner small { display: block; font-size: 18px; color: #e8ecff; letter-spacing: 2px; margin-top: 8px; }

#deadTip {
  position: absolute; bottom: 84px; left: 50%; transform: translateX(-50%);
  background: rgba(13, 20, 48, 0.85); border: 1px solid rgba(255, 120, 120, 0.4);
  color: #ffb3b3; border-radius: 10px; padding: 8px 18px; font-size: 14px; pointer-events: none;
}

#podium { position: absolute; inset: 0; background: rgba(7, 11, 28, 0.82); display: flex; align-items: center; justify-content: center; }
.podium-card { min-width: 380px; }
.podium-img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 0 20px rgba(255, 217, 100, 0.5)); }
#podiumTitle { color: #ffd964; margin: 6px 0 14px; font-size: 26px; }

#netstat { position: absolute; bottom: 10px; right: 14px; font-size: 12px; color: #7d89b3; pointer-events: none; }
#btnMute { position: absolute; bottom: 8px; left: 14px; opacity: 0.8; }
#btnQuit { position: absolute; top: 8px; right: 14px; opacity: 0.85; }