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

:root {
  --bg: #0f0f1a;
  --card: #1a1a2e;
  --border: #2a2a4a;
  --gold: #f5a623;
  --gold-dim: #c5841a;
  --honey: #ffcc02;
  --amber: #e8a317;
  --text: #e8e8f0;
  --text-dim: #8888aa;
  --green: #4ecdc4;
  --red: #ff6b6b;
  --level6: #f5a623;
  --level5: #e8a317;
  --level4: #cc8f10;
  --level3: #997a20;
  --level2: #776630;
  --level1: #555540;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#app { width: 100%; max-width: 520px; padding: 1rem; }

.screen { display: none; }
.screen.active { display: block; }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
}

/* Logo */
.logo { margin-bottom: 1.5rem; }
.hex-icon { font-size: 3rem; display: block; margin-bottom: 0.25rem; filter: drop-shadow(0 0 12px var(--gold)); }
.logo h1 { font-size: 2rem; color: var(--gold); letter-spacing: 2px; }
.tagline { color: var(--text-dim); font-size: 0.9rem; margin-top: 0.25rem; }

/* Inputs */
input[type="text"] {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  margin-bottom: 0.75rem;
  outline: none;
  transition: border-color 0.2s;
}
input[type="text"]:focus { border-color: var(--gold); }
input[type="text"]::placeholder { color: var(--text-dim); }

/* Buttons */
.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.2s;
  width: 100%;
  margin-bottom: 0.5rem;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--gold); color: #111; }
.btn-primary:hover:not(:disabled) { background: var(--gold-dim); }
.btn-secondary { background: var(--border); color: var(--text); }
.btn-secondary:hover:not(:disabled) { background: #3a3a5a; }

/* Divider */
.divider { display: flex; align-items: center; margin: 1rem 0; gap: 0.75rem; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.divider span { color: var(--text-dim); font-size: 0.85rem; }

/* Join row */
.join-row { display: flex; gap: 0.5rem; }
.join-row input { flex: 1; text-transform: uppercase; text-align: center; font-size: 1.25rem; letter-spacing: 4px; }
.join-row .btn { width: auto; margin-bottom: 0; }

/* Errors / info */
.error { color: var(--red); font-size: 0.85rem; margin-top: 0.5rem; }
.info { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.5rem; }

/* Room code */
.room-code { color: var(--gold); font-family: monospace; font-size: 1.4rem; letter-spacing: 3px; }
.subtitle { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 1rem; }

/* Player list */
.player-list { text-align: left; margin: 1rem 0; }
.player-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 0.75rem; border-radius: 6px;
  margin-bottom: 0.25rem; background: var(--bg);
}
.player-item .name { font-weight: 500; }
.player-item .level-badge {
  background: var(--gold); color: #111;
  padding: 0.15rem 0.5rem; border-radius: 4px;
  font-size: 0.8rem; font-weight: 700;
}

/* Round header */
.round-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.round-badge {
  background: var(--border); padding: 0.25rem 0.75rem;
  border-radius: 6px; font-size: 0.85rem;
}
.timer { font-size: 1.5rem; font-weight: 700; color: var(--gold); font-family: monospace; }
.timer.urgent { color: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Question */
.question { font-size: 1.3rem; margin-bottom: 1rem; line-height: 1.4; }
.question-recap { color: var(--text-dim); margin-bottom: 1rem; font-style: italic; }

/* Hive status */
.hive-status { margin-bottom: 1rem; font-size: 0.95rem; color: var(--text-dim); }
.hive-status strong { color: var(--gold); font-size: 1.1rem; }

/* Answer area — 3 inputs stacked */
.answers-area { display: flex; flex-direction: column; gap: 0.5rem; }
.answers-area .answer-input { margin-bottom: 0; }
.answers-area .btn { margin-top: 0.25rem; }

/* Level bars */
.level-bars { margin-top: 1.25rem; }
.level-bar-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.35rem; font-size: 0.8rem;
}
.level-bar-label { width: 55px; text-align: right; color: var(--text-dim); }
.level-bar-track { flex: 1; height: 18px; background: var(--bg); border-radius: 4px; overflow: hidden; position: relative; }
.level-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; min-width: 0; }
.level-bar-count {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 0.7rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.level-6 { background: var(--level6); }
.level-5 { background: var(--level5); }
.level-4 { background: var(--level4); }
.level-3 { background: var(--level3); }
.level-2 { background: var(--level2); }
.level-1 { background: var(--level1); }

/* Answer clusters */
.clusters-list { text-align: left; margin: 1rem 0; }
.cluster-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.6rem 0.75rem; border-radius: 6px;
  margin-bottom: 0.35rem; background: var(--bg);
}
.cluster-answer { font-weight: 600; flex: 1; text-transform: capitalize; }
.cluster-count { color: var(--text-dim); font-size: 0.85rem; margin: 0 0.75rem; }
.cluster-points { font-weight: 700; color: var(--gold); min-width: 50px; text-align: right; }

/* Player details toggle */
.player-details-toggle { margin: 0.75rem 0 0.5rem; }

/* Per-player results list */
.results-list { text-align: left; margin: 0.5rem 0 1rem; }
.result-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.45rem 0.75rem; border-radius: 6px;
  margin-bottom: 0.25rem; background: var(--bg); font-size: 0.85rem;
}
.result-item.dropped { border-left: 3px solid var(--red); }
.result-item.advanced { border-left: 3px solid var(--green); }
.result-name { font-weight: 500; flex: 1; }
.result-level { color: var(--text-dim); font-size: 0.8rem; margin: 0 0.5rem; }
.result-points { font-weight: 700; color: var(--gold); min-width: 40px; text-align: right; }
.result-drop { color: var(--red); font-size: 0.75rem; margin-left: 0.5rem; }
.result-advance { color: var(--green); font-size: 0.75rem; margin-left: 0.5rem; }

/* Waiting pulse */
.waiting-pulse { animation: waitPulse 2s ease-in-out infinite; }
@keyframes waitPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

/* Pre-subtraction panels */
.presub-content { margin: 1rem 0; }
.presub-panel {
  background: var(--bg); border-radius: 8px; padding: 1rem;
  margin-bottom: 0.75rem; text-align: left;
}
.presub-panel.presub-highest { border-left: 3px solid var(--green); }
.presub-panel.presub-lowest { border-left: 3px solid var(--red); }
.presub-panel.presub-you { border-left: 3px solid var(--gold); }
.presub-label { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 1px; }
.presub-name { font-size: 1.1rem; font-weight: 600; }
.presub-score { margin-top: 0.25rem; }
.presub-score strong { color: var(--gold); }
.presub-answers { color: var(--text-dim); font-style: italic; margin-top: 0.25rem; }

/* Section indicator */
.section-indicator { color: var(--text-dim); font-size: 0.8rem; }
.section-banner {
  background: var(--gold); color: #111; padding: 0.5rem 1rem;
  border-radius: 8px; margin-bottom: 1rem; font-weight: 600; font-size: 0.9rem;
}

/* Scoreboard */
.scoreboard { margin-top: 1.25rem; text-align: left; }
.scoreboard-header { font-weight: 700; font-size: 0.9rem; color: var(--gold); margin-bottom: 0.5rem; text-align: center; }
.scoreboard-table { font-size: 0.8rem; }
.scoreboard-row {
  display: grid; grid-template-columns: 28px 1fr 55px 55px 45px;
  gap: 0.25rem; padding: 0.35rem 0.5rem; border-radius: 4px;
  align-items: center;
}
.scoreboard-row.scoreboard-head { color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--border); }
.scoreboard-row:nth-child(even):not(.scoreboard-head) { background: var(--bg); }
.scoreboard-row.sb-you { background: rgba(245,166,35,0.12); }
.sb-rank { text-align: center; color: var(--text-dim); }
.sb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-section, .sb-total { text-align: center; }
.sb-total { font-weight: 700; color: var(--gold); }
.sb-level { text-align: center; font-weight: 600; }
.sb-disconnected { opacity: 0.45; }

/* Host custom question area */
.host-question-area { margin: 1rem 0; text-align: left; }
.host-question-area .label { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.4rem; }
.custom-q-row { display: flex; gap: 0.5rem; align-items: center; }
.custom-q-row input { flex: 1; margin-bottom: 0; font-size: 0.9rem; }
.btn-sm { padding: 0.5rem 0.75rem; font-size: 0.8rem; width: auto; margin-bottom: 0; }

/* Responsive */
@media (max-width: 480px) {
  .card { padding: 1.25rem; }
  .logo h1 { font-size: 1.5rem; }
  .question { font-size: 1.1rem; }
}