@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&display=swap');

:root {
  /* The Quiz Reveal brand palette (from the logo/splash artwork) is now the
     game's only palette — every surface below is one of these six colours
     or a tint of one, so the game reads as the same product as its icon
     and splash screen. --brand-* are aliases for the same values, used
     where a rule wants to name the literal brand colour (the banner
     gradient, splash) rather than its semantic UI role. */
  --bg: #0a0d24;
  --bg-elevated: #141a3f;
  --bg-card: #1b2350;
  --border: #2c3768;
  --text: #f2f3f8;
  --text-dim: #8fa0d6;
  --accent: #38d6f2;
  --accent-dim: #1b4a5e;
  --good: #a3ef4a;
  --bad: #ff3fa6;
  --warn: #f5ef3d;
  --on-bright: #0a0d24;
  --radius: 12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --brand-ink: var(--bg);
  --brand-panel: var(--bg-elevated);
  --brand-panel-line: var(--border);
  --brand-cyan: var(--accent);
  --brand-lime: var(--good);
  --brand-magenta: var(--bad);
  --brand-gold: var(--warn);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: 0.7em 1.4em;
  font-size: 1rem;
  font-weight: 600;
  background: var(--accent);
  color: var(--on-bright);
  transition: transform 0.08s ease, opacity 0.15s ease;
}
button:hover:not(:disabled) { transform: translateY(-1px); }
button:active:not(:disabled) { transform: translateY(0); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

button.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

button.danger { background: var(--bad); color: var(--on-bright); }
button.good { background: var(--good); color: var(--on-bright); }

input, textarea {
  font-family: inherit;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 0.6em 0.8em;
  font-size: 1rem;
}
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.pill {
  display: inline-block;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-dim);
}

.hidden { display: none !important; }

.app-banner {
  font-family: "Baloo 2", var(--font);
  text-align: center;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  margin: 0 0 1.25rem;
  background: linear-gradient(120deg, var(--brand-cyan), var(--brand-magenta));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.app-footer {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.8rem;
  padding: 2rem 0 1rem;
}

.status-card {
  max-width: 480px;
  margin: 3rem auto;
  text-align: center;
}
.status-card h2 { margin: 0 0 0.5rem; }
.status-card p { color: var(--text-dim); margin: 0 0 1.5rem; }

.answer-reveal {
  background: var(--bg-elevated);
  border: 1px solid var(--warn);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  margin: 1rem 0;
  box-shadow: 0 0 22px rgba(245, 239, 61, 0.25);
}

/* ---- Question board (shared between host + player) ---- */
.board {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.panel {
  min-width: 3.5rem;
  min-height: 3rem;
  padding: 0.5rem 0.8rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-dim);
  transition: background 0.2s ease, color 0.2s ease;
}

.panel.revealed {
  background: var(--accent-dim);
  color: var(--text);
}

.panel.tappable {
  cursor: pointer;
}
.panel.tappable:hover { outline: 2px solid var(--accent); }

/* ---- Scoreboard widget ---- */
.scoreboard {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  border-radius: 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 1rem;
}

.score-row.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  font-size: 1.6rem;
  padding: 1rem 1.25rem;
}

.score-row.locked-out {
  opacity: 0.55;
}

.score-row .name-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.score-row .badge {
  font-size: 0.7em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: var(--bad);
  color: var(--on-bright);
  font-weight: 700;
}