/* Quizzy - base styles. System fonts only, no external resources. */
:root {
  /* Answer colours (index 0-3) and the text colour that sits on them */
  --answer-0: #d7263d;  --on-answer-0: #ffffff;  /* red    ▲ */
  --answer-1: #1b5fd1;  --on-answer-1: #ffffff;  /* blue   ◆ */
  --answer-2: #f5b700;  --on-answer-2: #221a00;  /* yellow ● */
  --answer-3: #1f8a4c;  --on-answer-3: #ffffff;  /* green  ■ */

  --color-bg: #2b1d5c;
  --color-bg-deep: #1a1038;
  --color-surface: #ffffff;
  --color-text: #1d1633;
  --color-text-muted: #5d5678;
  --color-text-on-dark: #ffffff;
  --color-accent: #ff6b35;
  --color-accent-dark: #c9440f;
  --color-border: #d9d4ea;
  --color-error-bg: #ffe3e6;
  --color-error-text: #8a1022;
  --color-info-bg: #e3f0ff;
  --color-info-text: #0f3f80;
  --color-success: #1f8a4c;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-sm: 0.5rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.5rem;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-sm: clamp(0.875rem, 0.85rem + 0.1vw, 1rem);
  --fs-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.4rem + 1.6vw, 3rem);
  --fs-xxl: clamp(2.5rem, 1.8rem + 3.5vw, 5rem);

  --shadow-card: 0 0.5rem 1.5rem rgba(10, 4, 30, 0.35);
  --shadow-btn: 0 0.25rem 0 rgba(0, 0, 0, 0.25);
  --focus-ring: 0 0 0 0.2rem #ffffff, 0 0 0 0.4rem var(--color-accent-dark);
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.4;
  color: var(--color-text-on-dark);
  background: radial-gradient(circle at 20% 0%, #4a2f9c 0%, var(--color-bg) 45%, var(--color-bg-deep) 100%);
  background-attachment: fixed;
}
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Layout helpers */
.page-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
}
.stack > * + * { margin-top: var(--space-4); }
.logo {
  font-size: var(--fs-xxl);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-align: center;
  margin-bottom: var(--space-5);
  text-shadow: 0 0.15em 0 rgba(0, 0, 0, 0.3);
}
.join { width: 100%; max-width: 24rem; }

/* Card */
.card {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

/* Form fields */
.field { display: block; }
.field label { display: block; font-weight: 700; margin-bottom: var(--space-2); }
.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-lg);
  color: var(--color-text);
  background: #fff;
  border: 0.15rem solid var(--color-border);
  border-radius: var(--radius-md);
}
.input:focus-visible { border-color: var(--color-accent-dark); box-shadow: var(--focus-ring); }
.input-pin { text-align: center; letter-spacing: 0.3em; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  font-weight: 800;
  font-size: var(--fs-lg);
  color: #fff;
  background: var(--color-bg);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  transition: transform 0.08s ease;
}
.btn:focus-visible { box-shadow: var(--focus-ring), var(--shadow-btn); }
.btn:active { transform: translateY(0.12rem); box-shadow: none; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--color-accent-dark); }
.btn-secondary { background: transparent; color: var(--color-text); box-shadow: inset 0 0 0 0.15rem var(--color-border); }
.btn-block { display: flex; width: 100%; }

/* Messages */
.msg {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  background: var(--color-info-bg);
  color: var(--color-info-text);
}
.msg-info { background: var(--color-info-bg); color: var(--color-info-text); }
.msg-error { background: var(--color-error-bg); color: var(--color-error-text); }
.conn-warning { margin-top: var(--space-4); text-align: center; }

/* Answer buttons: colour + symbol (symbol is a separate element, colour is never the only cue) */
.answer-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 4rem;
  padding: var(--space-3);
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--on-answer, #fff);
  background: var(--answer, #666);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-btn);
  cursor: pointer;
  transition: transform 0.08s ease, opacity 0.2s ease;
}
.answer-btn:active { transform: translateY(0.12rem); box-shadow: none; }
.answer-btn:disabled { cursor: default; }
.answer-btn.is-dimmed { opacity: 0.35; }
.answer-btn:focus-visible { box-shadow: var(--focus-ring), var(--shadow-btn); }
.answer-btn.is-selected { box-shadow: 0 0 0 0.3rem #fff, var(--shadow-btn); }
.answer-btn .symbol { font-size: 1.2em; line-height: 1; }
.answer-btn .symbol::before { content: attr(data-symbol); }
.answer-btn--0 { --answer: var(--answer-0); --on-answer: var(--on-answer-0); }
.answer-btn--1 { --answer: var(--answer-1); --on-answer: var(--on-answer-1); }
.answer-btn--2 { --answer: var(--answer-2); --on-answer: var(--on-answer-2); }
.answer-btn--3 { --answer: var(--answer-3); --on-answer: var(--on-answer-3); }
/* Default symbols when markup is just <span class="symbol"></span> */
.answer-btn--0 .symbol:not([data-symbol])::before { content: "\25B2"; } /* ▲ */
.answer-btn--1 .symbol:not([data-symbol])::before { content: "\25C6"; } /* ◆ */
.answer-btn--2 .symbol:not([data-symbol])::before { content: "\25CF"; } /* ● */
.answer-btn--3 .symbol:not([data-symbol])::before { content: "\25A0"; } /* ■ */

/* Field-level validation message and invalid state (join form) */
.field-msg { margin-top: var(--space-1); color: var(--color-error-text); font-size: var(--fs-sm); font-weight: 700; }
.field-msg:empty { display: none; }
.input[aria-invalid="true"] { border-color: var(--color-error-text); }

/* Small colour+symbol chip for answers (player results, host chart) */
.sym-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 0.35em;
  font-weight: 800;
  line-height: 1;
  background: var(--chip-bg);
  color: var(--chip-fg);
}
.sym-0 { --chip-bg: var(--answer-0); --chip-fg: var(--on-answer-0); }
.sym-1 { --chip-bg: var(--answer-1); --chip-fg: var(--on-answer-1); }
.sym-2 { --chip-bg: var(--answer-2); --chip-fg: var(--on-answer-2); }
.sym-3 { --chip-bg: var(--answer-3); --chip-fg: var(--on-answer-3); }

/* Discreet connection-problem bar (player and host game screens) */
.conn-bar {
  padding: var(--space-1) var(--space-3);
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  background: #fff3cd;
  color: #5c4400;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* "Back to game" link on the join page */
.resume { margin-top: var(--space-4); }
.resume-btn { background: transparent; box-shadow: inset 0 0 0 0.15rem rgba(255, 255, 255, 0.6); text-decoration: none; }

/* Confirmation dialog (confirm-dialog.js): shared by the panel pages and the projector screen */
.confirm-dialog {
  width: min(28rem, calc(100vw - 1.5rem));
  max-height: calc(100dvh - 1.5rem);
  margin: auto; /* the global "* { margin: 0 }" reset removes the UA centering */
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-card);
}
.confirm-dialog:not([open]) { display: none; } /* panel.css is not loaded on every page */
.confirm-dialog::backdrop { background: rgba(10, 4, 30, 0.65); }
.confirm-dialog[open] { animation: confirm-in 0.16s ease-out; }
.confirm-dialog[open]::backdrop { animation: confirm-fade 0.16s ease-out; }
@keyframes confirm-in { from { opacity: 0; transform: translateY(0.75rem) scale(0.97); } }
@keyframes confirm-fade { from { opacity: 0; } }
.confirm-card { display: grid; gap: var(--space-3); padding: var(--space-5); }
.confirm-title { font-size: var(--fs-lg); font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }
.confirm-message { color: var(--color-text-muted); overflow-wrap: anywhere; }
.confirm-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-2); }
.confirm-btn {
  flex: 1 1 8rem;
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  font-weight: 800;
  font-size: var(--fs-base);
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: #fff;
  background: var(--color-accent-dark);
  box-shadow: var(--shadow-btn);
}
.confirm-btn--cancel { color: var(--color-text); background: transparent; box-shadow: inset 0 0 0 0.15rem var(--color-border); }
.confirm-btn--danger { background: #b3122b; }
.confirm-btn:active { transform: translateY(0.12rem); }
.confirm-btn:focus-visible { box-shadow: 0 0 0 0.15rem #fff, 0 0 0 0.35rem var(--color-accent-dark); }

/* Projector screen (dark theme, sizes follow --u from game.css) */
.confirm-dialog--stage {
  width: min(calc(var(--u) * 52), calc(100vw - 2rem));
  border-radius: calc(var(--u) * 2);
  background: var(--color-bg-deep);
  color: #fff;
  box-shadow: 0 0 0 calc(var(--u) * 0.2) rgba(255, 255, 255, 0.25), var(--shadow-card);
}
.confirm-dialog--stage .confirm-card { gap: calc(var(--u) * 1.5); padding: calc(var(--u) * 3); }
.confirm-dialog--stage .confirm-title { font-size: calc(var(--u) * 3.6); }
.confirm-dialog--stage .confirm-message { font-size: calc(var(--u) * 2.4); color: rgba(255, 255, 255, 0.85); }
.confirm-dialog--stage .confirm-actions { gap: calc(var(--u) * 1.5); margin-top: calc(var(--u) * 1); }
.confirm-dialog--stage .confirm-btn {
  min-height: calc(var(--u) * 6.5);
  font-size: calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 1);
}
.confirm-dialog--stage .confirm-btn--cancel { color: #fff; box-shadow: inset 0 0 0 calc(var(--u) * 0.2) rgba(255, 255, 255, 0.6); }
.confirm-dialog--stage .confirm-btn--danger { background: #d7263d; }

@media (prefers-reduced-motion: reduce) {
  .confirm-dialog[open], .confirm-dialog[open]::backdrop { animation: none; }
}