/* ============================================================
   TRIVIAL PURSUIT LIVE — THEME
   Same warm cream/brown "classroom" chrome as the other Mr Hope
   Classroom tools, with the classic 6 Trivial Pursuit wedge colors
   used throughout for categories/teams.
   ============================================================ */

:root {
  --world-bg: #f3e6c8;
  --panel: #f8ecd0;
  --panel-light: #fff8e8;
  --ink: #4a2f1c;
  --border: #7a3b1d;
  --accent: #f4b23a;
  --accent2: #3868b0;
  --danger: #d0402a;
  --good: #3a9a4a;
  --shadow: 3px 3px 0 rgba(74,47,28,0.25);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--world-bg);
  color: var(--ink);
  font-family: 'Nunito', sans-serif;
  overflow: hidden;
}

h2 { font-family: 'Fredoka', sans-serif; font-weight: 700; }

.pixel-border {
  border: 4px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

button {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  background: linear-gradient(180deg, #fff8ea, #f2d68e);
  color: var(--ink);
  border: 3px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.3px;
  transition: transform 0.05s ease;
}
button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 rgba(74,47,28,0.3); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.secondary { background: linear-gradient(180deg, #ffffff, #ead9b0); }
button.danger { background: linear-gradient(180deg, #ec8672, var(--danger)); color: #fff; border-color: #8a2416; }

.scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0.035) 0px, rgba(0,0,0,0.035) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode: multiply;
}

/* ---------- CHARACTER / TEAM PICKERS ---------- */
#emojiPicker {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  margin-bottom: 10px; max-height: 220px; overflow-y: auto; padding: 6px;
}
.emoji-btn {
  font-size: 28px; width: 56px; height: 56px; padding: 0; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.15s ease, transform 0.05s ease;
}
.emoji-btn.active { outline: 3px solid var(--good); box-shadow: 0 0 14px 3px var(--good); }
#emojiPicker.has-selection .emoji-btn:not(.active) { opacity: 0.2; }

.team-picker {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;
}
.team-btn { padding: 10px 6px; font-size: 12px; border-width: 3px; }
.team-btn.active { outline: 3px solid var(--good); box-shadow: 0 0 14px 3px var(--good); }

/* ---------- ENTRY / LANDING SCREEN ---------- */
.entry-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--world-bg);
}
.entry-choices { display: flex; gap: 16px; justify-content: center; margin-top: 20px; flex-wrap: wrap; }
.entry-choices button { flex: 1; padding: 18px 10px; font-size: 14px; min-width: 120px; }
.entry-error { color: var(--danger); font-size: 11px; min-height: 14px; margin-top: 10px; font-weight: 800; }
#boardCodeInput {
  font-family: inherit; padding: 10px; width: 100%; text-align: center;
  letter-spacing: 6px; font-size: 16px; margin: 14px 0 6px;
  border: 3px solid var(--border); border-radius: 8px; background: #fffaf0; color: var(--ink);
}

.popup-overlay {
  position: fixed; inset: 0; background: rgba(40,28,16,0.55); z-index: 900;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.popup-card {
  background: linear-gradient(180deg, #fffaf0, var(--panel));
  border: 4px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 24px; max-width: 400px; max-height: 90vh; overflow-y: auto;
  text-align: center; font-size: 13px; line-height: 1.6; color: var(--ink);
}

.room-code-big {
  font-size: 64px; letter-spacing: 10px; color: var(--good);
  text-shadow: 3px 3px 0 rgba(74,47,28,0.25); margin: 10px 0; font-weight: 800;
}

.lobby-teams {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0;
}
.lobby-team-card {
  border: 3px solid; border-radius: 10px; padding: 8px; background: #fffaf0; font-size: 11px;
}

.panel {
  background: linear-gradient(180deg, #fffaf0, var(--panel));
  border: 3px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  padding: 10px; overflow-y: auto;
}
.panel h3 { margin: 0 0 8px; font-size: 12px; color: var(--border); }

.team-standing-row {
  display: flex; justify-content: space-between; align-items: center;
  border: 2px solid; border-radius: 8px; padding: 6px 10px; margin-bottom: 6px;
  background: #fffaf0; font-size: 12px; font-weight: 800;
}

/* ---------- MASTER BOARD ---------- */
/* Sidebar is a fixed narrow width (not a fraction) so the board stage
   claims essentially all the remaining space on any screen size. */
.master-wrap { display: grid; grid-template-columns: 1fr 220px; height: 100vh; gap: 6px; padding: 6px; }
.sidebar { display: flex; flex-direction: column; gap: 6px; overflow: hidden; }

.board-stage {
  position: relative; background: var(--world-bg); border: 4px solid var(--border);
  border-radius: 16px; overflow: hidden;
  /* Stacked vertically — wheel on top, question panel below it as a
     normal flow item, never overlapping — so the board is always fully
     visible even while a question is showing. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.round-banner {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(180deg, #fffaf0, var(--panel));
  border: 3px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  padding: 10px 20px; font-size: 13px; z-index: 60; text-align: center; font-weight: 800;
}
.phase-timer { font-size: 24px; color: var(--danger); font-weight: 800; }
.session-timer { font-size: 11px; color: var(--accent2); font-weight: 800; margin-top: 4px; }

/* Wheel area takes the remaining space above the question panel, and is
   itself the sizing context (via cqw/cqh) for .wheel-board — so the
   wheel always fills whatever room is actually left over, regardless of
   whether a question panel is currently showing below it. */
.wheel-area {
  flex: 1; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
  container-type: size;
}

/* Wheel board: hub + 6 spokes + outer ring, positioned with percentage
   coordinates from game-data.js's ringPoint()/spokePoint(). */
.wheel-board {
  position: relative; width: min(94cqw, 94cqh); height: min(94cqw, 94cqh);
  background: radial-gradient(circle, #fffaf0 0%, var(--world-bg) 70%);
  border-radius: 50%;
}
.hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 15%; height: 15%; border-radius: 50%; background: #fffaf0;
  border: 4px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 28px; box-shadow: var(--shadow); z-index: 5;
}
.ring-space {
  position: absolute; width: 5%; height: 5%; border-radius: 50%;
  transform: translate(-50%,-50%); border: 2px solid rgba(74,47,28,0.4);
}
.ring-space.spoke-entry { width: 6.5%; height: 6.5%; border: 3px solid var(--border); }
.spoke-space {
  position: absolute; width: 5%; height: 5%; border-radius: 4px;
  transform: translate(-50%,-50%); border: 2px solid rgba(74,47,28,0.4);
}
.spoke-space.wedge-space {
  width: 9%; height: 9%; border-radius: 50%; border: 3px solid var(--border);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
  box-shadow: var(--shadow); z-index: 3;
}
.team-token {
  position: absolute; width: 7%; height: 7%; border-radius: 50%;
  transform: translate(-50%,-50%); background: #fff; border: 3px solid;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
  box-shadow: var(--shadow); z-index: 10; transition: left 0.6s ease, top 0.6s ease;
}

/* Question panel — a normal block below the wheel (not overlaid on top
   of it), so the board stays fully visible while a question is showing. */
.question-panel {
  flex-shrink: 0; width: 92%; max-width: 640px; margin: 8px auto;
  background: linear-gradient(180deg, #fffaf0, var(--panel));
  border: 4px solid var(--border); border-radius: 14px; box-shadow: var(--shadow);
  padding: 12px 22px; text-align: center; z-index: 55;
}
.question-category { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 4px; }
.question-text { font-size: 17px; font-weight: 800; margin-bottom: 10px; }
.question-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.board-choice {
  border: 2px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size: 12px;
  font-weight: 800; background: #fffaf0; text-align: left;
}
.board-choice.correct-choice { background: var(--good); color: #fff; }

/* ---------- PLAYER CLIENT ---------- */
.player-wrap {
  display: grid; grid-template-columns: 200px 1fr; grid-template-rows: 1fr;
  height: 100vh; gap: 6px; padding: 6px;
}
.hud-panel {
  background: linear-gradient(180deg, #fffaf0, var(--panel));
  border: 3px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  padding: 12px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto;
}
.hud-emoji { font-size: 36px; text-align: center; }
.hud-label { font-size: 10px; color: #9a7a5a; font-weight: 800; letter-spacing: 0.3px; }
.hud-wedges { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.wedge-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; font-size: 16px;
  border: 2px solid; box-shadow: var(--shadow);
}

.center-panel {
  background: linear-gradient(180deg, #fffaf0, var(--panel));
  border: 3px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; justify-content: center; overflow-y: auto;
  min-height: 0; padding: 16px;
}
.question-choices button.choice-btn {
  display: block; width: 100%; text-align: left; padding: 14px 16px; margin-bottom: 10px; font-size: 14px;
}
.choice-btn.chosen { background: var(--good); color: #fff; }