/* ---------- foundations ---------- */
:root {
  --bg: #16103a;
  --bg-2: #1e1650;
  --panel: rgba(255,255,255,0.06);
  --panel-solid: #241b5e;
  --line: rgba(255,255,255,0.14);
  --text: #f5f3ff;
  --muted: #b3a9e0;
  --brand: #7c4dff;
  --green: #26c281;
  --red: #ef4565;
  --amber: #ffb020;
  --blue: #2d9cdb;
  --radius: 16px;
  --shadow: 0 10px 40px rgba(0,0,0,0.35);
}

* { box-sizing: border-box; }

/* Each round gets its own palette so the room can see the round change at a
   glance. Only the background and accent move -- the multiple-choice colours
   and the green/red of correct/wrong stay fixed, because those carry meaning. */
body[data-round="0"] { --g1: #35208a; --g2: #0f6ea8; --brand: #7c4dff; }  /* records  */
body[data-round="1"] { --g1: #0d5c4a; --g2: #128a7d; --brand: #12b886; }  /* flags    */
body[data-round="2"] { --g1: #8a2b16; --g2: #b8520a; --brand: #f4762a; }  /* sport    */
body[data-round="3"] { --g1: #7a1150; --g2: #b32478; --brand: #ec4899; }  /* tv+film  */
body[data-round="4"] { --g1: #10306e; --g2: #0b7fa8; --brand: #2f9dfb; }  /* music    */
body[data-round="5"] { --g1: #6b4a05; --g2: #9c6b0a; --brand: #eab308; }  /* general  */

html, body {
  margin: 0;
  padding: 0;
  --g1: #35208a;
  --g2: #0f6ea8;
  background: radial-gradient(1200px 800px at 20% -10%, var(--g1) 0%, transparent 60%),
              radial-gradient(1000px 700px at 100% 100%, var(--g2) 0%, transparent 55%),
              var(--bg);
  background-attachment: fixed;
  transition: background 700ms ease;
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

h1, h2, h3 { margin: 0; line-height: 1.15; }
button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

.hidden { display: none !important; }
.muted { color: var(--muted); }
.mono { font-variant-numeric: tabular-nums; }

/* ---------- buttons ---------- */
.btn {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  padding: 11px 16px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover:not(:disabled) { background: rgba(255,255,255,0.13); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .38; cursor: not-allowed; }
.btn.primary { background: var(--brand); border-color: transparent; }
.btn.primary:hover:not(:disabled) { background: #8f66ff; }
.btn.good { background: var(--green); border-color: transparent; color: #04231a; }
.btn.bad { background: var(--red); border-color: transparent; }
.btn.warn { background: var(--amber); border-color: transparent; color: #2b1a00; }
.btn.small { padding: 6px 11px; font-size: 13px; border-radius: 9px; }
.btn.big { padding: 16px 26px; font-size: 18px; border-radius: 14px; }
.btn.ghost { background: transparent; }

/* ---------- panels ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  backdrop-filter: blur(8px);
}

.pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.12);
  border: 1px solid var(--line);
}
.pill.live { background: var(--red); border-color: transparent; animation: pulse 1.6s infinite; }
.pill.locked { background: var(--amber); color: #2b1a00; border-color: transparent; }
.pill.revealed { background: var(--green); color: #04231a; border-color: transparent; }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .55 } }

/* ---------- multiple-choice colour set (Kahoot-ish) ---------- */
.opt-0 { --opt: #e2444f; }
.opt-1 { --opt: #1b74c4; }
.opt-2 { --opt: #d99400; }
.opt-3 { --opt: #17936b; }

/* Shown in place of a flag/image that failed to load, so a missing file is
   obvious on the big screen instead of an invisible broken icon. */
.imgmissing {
  padding: 18px 22px; border-radius: 12px; font-weight: 800;
  background: rgba(239,69,101,.18); border: 2px dashed var(--red);
  color: #ffc9d4; text-align: center; font-size: 15px;
}

/* Per-contestant colour swatch. */
.pdot {
  display: inline-block; width: .62em; height: .62em; border-radius: 50%;
  margin-right: .5em; flex: 0 0 auto; vertical-align: baseline;
  box-shadow: 0 0 0 2px rgba(0,0,0,.25);
}