* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  background: #13132a; color: #fff; min-height: 100vh; padding: 1.5rem;
}
.screen { display: none; flex-direction: column; align-items: center; gap: 1rem; max-width: 720px; margin: 0 auto; }
.screen.active { display: flex; }
.hidden { display: none !important; }

.logo { font-size: 2.6rem; font-weight: 800; letter-spacing: 1px; color: #8b9cff; }
.sub { color: #b9b9e6; text-align: center; }
.code { color: #ffd54a; letter-spacing: 3px; }

.setup-box, .controls, .judge-btns { display: flex; flex-direction: column; gap: 0.6rem; width: 100%; max-width: 360px; }
.controls { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.judge-btns { flex-direction: row; }
.player-inputs { display: flex; flex-direction: column; gap: 0.5rem; }
input {
  padding: 0.8rem; font-size: 1rem; border: 2px solid #3a3a6a; border-radius: 10px;
  background: #1e1e3c; color: #fff;
}
.btn {
  padding: 0.85rem 1.3rem; font-size: 1rem; font-weight: 700; border: none; border-radius: 10px;
  background: #5a5ad8; color: #fff; cursor: pointer;
}
.btn.ghost { background: #2a2a4a; }
.btn.good { background: #2f9e44; flex: 1; }
.btn.bad { background: #e23a3a; flex: 1; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: default; }

.setup-group { width: 100%; max-width: 360px; }
.setup-label { color: #b9b9e6; font-weight: 700; margin: 0.6rem 0 0.3rem; }
.category-options { display: flex; flex-direction: column; gap: 0.5rem; }
.length-options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.length-options .option-btn { flex: 1; min-width: 60px; }
.option-btn.selected { background: #5a5ad8; outline: 2px solid #b9b9e6; }
.winner-line { font-size: 1.5rem; font-weight: 800; color: #ffd54a; text-align: center; }

.lobby-players { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; width: 100%; max-width: 360px; }
.lobby-players li { background: #1e1e3c; padding: 0.6rem 1rem; border-radius: 8px; }
.lobby-players li.connected { border-left: 4px solid #51cf66; }

.game-top { display: flex; width: 100%; justify-content: center; }
.answer-box { text-align: center; }
.answer-label { color: #b9b9e6; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; }
.answer-name { font-size: 1.8rem; font-weight: 800; color: #ffd54a; }
.reveal-level { color: #8b9cff; margin-top: 0.3rem; }

.buzz-panel { background: #1e1e3c; border-radius: 12px; padding: 1rem; text-align: center; width: 100%; max-width: 360px; }
.buzz-panel p { margin-bottom: 0.6rem; font-size: 1.1rem; }

.status { color: #b9b9e6; min-height: 1.3rem; }
.score-list { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; width: 100%; max-width: 360px; }
.score-list li { display: flex; justify-content: space-between; background: #1e1e3c; padding: 0.5rem 1rem; border-radius: 8px; }
.score-list li span:last-child { color: #8b9cff; font-weight: 700; }