/* ==========================================================================
   Pub Quiz Live V1 — Player Stylesheet
   Follows design.md exactly. See the Design intent, Colour, and Typo-
   sections below for where each design token is applied.
   ========================================================================== */

/* --- design.md §2 — Colour tokens ----------------------------------------- */
:root {
  /* Core surface tokens */
  --paper: #fff6e8;
  --ink: #1b1712;
  --amber: #ffb13d;
  --teal: #14b8a6;
  --cherry: #e5484d;
  --coal: #241c14;
  --cream: #f6e7d1;
  --gold: #f5d06b;

  /* Derived tokens */
  --ink-on-paper: var(--ink);
  --cream-on-coal: var(--cream);
  --amber-on-paper: var(--amber);
  --teal-on-paper: var(--teal);
  --cherry-on-paper: var(--cherry);
  --gold-on-paper: var(--gold);

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --shadow-card: 0 10px 30px rgba(27, 23, 18, 0.16);
  --shadow-glow: 0 0 0 3px rgba(255, 177, 61, 0.35);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* design.md §4 — 8px base grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
}

/* --- design.md §6 — surfaces ------------------------------------------------
   Player view (mobile): cream background, ink text, one action per screen. */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100dvh;
}

body {
  font-family: var(--font-ui);
  color: var(--ink-on-paper);
  background:
    radial-gradient(
      120% 120% at 50% -10%,
      #fff 0%,
      var(--paper) 45%,
      #f3e6cf 100%
    );
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  font-weight: 400;
  max-width: 100vw;
  overflow-x: hidden;
}

/* --- design.md §7 — motion --------------------------------------------------
   Respect prefers-reduced-motion: no shake, no confetti pop. */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============================================================================
   LAYOUT — single viewport card, no scroll during gameplay (design.md §1).
   Each screen is a card that fits one viewport.
   ========================================================================== */
.screen {
  display: none;
  min-height: 100dvh;
  width: 100%;
  justify-content: center;
  align-items: center;
  padding: var(--space-4);
}
.screen.is-active {
  display: flex;
}

.app-card {
  width: 100%;
  max-width: 640px;
  background: var(--paper);
  border: 1px solid rgba(27, 23, 18, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
}

/* Small screens: tight safe areas, nothing interactive inside bottom 48px. */
@media (max-width: 480px) {
  .app-card {
    padding: var(--space-5);
    max-width: 100%;
  }
}

/* ============================================================================
   HEADER / LOGO
   ========================================================================== */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.brand__mark {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: var(--shadow-glow);
}
.brand__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 6vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  text-transform: uppercase;
}
.brand__subtitle {
  font-size: 13px;
  font-weight: 500;
  color: rgba(27, 23, 18, 0.65);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--space-1);
}

h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 7vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
  color: var(--ink);
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 5.5vw, 30px);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
  color: var(--ink);
}

.section-sub {
  font-size: 15px;
  color: rgba(27, 23, 18, 0.7);
  margin: 0 0 var(--space-5);
}
/* ============================================================================
   FORM FIELDS
   ========================================================================== */
.field {
  margin-bottom: var(--space-5);
}
.field__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(27, 23, 18, 0.7);
  margin-bottom: var(--space-2);
}
.field__input {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 500;
  padding: var(--space-3) var(--space-4);
  border: 2px solid rgba(27, 23, 18, 0.15);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field__input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: var(--shadow-glow);
}
.field__input::placeholder {
  color: rgba(27, 23, 18, 0.4);
}
.field__hint {
  display: block;
  font-size: 12px;
  color: rgba(27, 23, 18, 0.55);
  margin-top: var(--space-2);
}
.field__error {
  display: none;
  font-size: 12px;
  color: var(--cherry);
  font-weight: 600;
  margin-top: var(--space-2);
}
.field.is-invalid .field__error {
  display: block;
}

/* --- design.md §5 — Avatar chips -------------------------------------------- */
.avatars {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(27, 23, 18, 0.15);
  background: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar:hover {
  transform: translateY(-2px);
}
.avatar.is-selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25);
  background: var(--teal);
  color: #fff;
}

/* ============================================================================
   BUTTONS — big tap targets (design.md §5, §6).
   Host controls: Start (teal), Pause (cream), Reveal (amber), End (red outline)
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  padding: var(--space-3) var(--space-5);
  min-height: 56px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease,
    color 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.btn--primary {
  background: var(--teal);
  color: #fff;
}
.btn--primary:hover:not(:disabled) {
  box-shadow: 0 6px 18px rgba(20, 184, 166, 0.35);
}
.btn--cta {
  background: var(--amber);
  color: var(--ink);
}
.btn--cta:hover:not(:disabled) {
  box-shadow: 0 6px 18px rgba(255, 177, 61, 0.4);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: rgba(27, 23, 18, 0.18);
}
.btn--ghost:hover:not(:disabled) {
  border-color: var(--amber);
  color: var(--amber);
}
.btn--block {
  width: 100%;
}
.btn--small {
  min-height: 44px;
  font-size: 15px;
  padding: var(--space-2) var(--space-4);
}

/* ============================================================================
   GAME MODE CARDS
   ========================================================================== */
.modes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.mode-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 2px solid rgba(27, 23, 18, 0.12);
  border-radius: var(--radius-md);
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  position: relative;
  overflow: hidden;
}
.mode-card:hover {
  transform: translateY(-3px);
  border-color: var(--amber);
  box-shadow: var(--shadow-glow);
}
.mode-card__flag {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(255, 177, 61, 0.14);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
}
.mode-card__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  margin: 0;
  color: var(--ink);
}
.mode-card__duration {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  color: var(--amber);
  letter-spacing: 0.02em;
}
.mode-card__desc {
  font-size: 14px;
  color: rgba(27, 23, 18, 0.65);
  margin: 0;
}
/* ============================================================================
   GAME SCREEN
   ========================================================================== */
.game {
  width: 100%;
  max-width: 640px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  gap: var(--space-4);
}
.game__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.game__player {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.game__player-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  flex: 0 0 auto;
}
.game__player-name {
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.game__scorewrap {
  text-align: right;
  min-width: 0;
}
.game__score-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(27, 23, 18, 0.55);
}
.game__score {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 26px;
  color: var(--ink);
  line-height: 1;
}
.game__streak {
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  min-height: 14px;
}

/* --- design.md §5 — Question card -------------------------------------------
   Cream surface, Fraunces prompt, category chip top-left, points badge top-right. */
.question-card {
  background: var(--paper);
  border: 1px solid rgba(27, 23, 18, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.category-chip {
  position: absolute;
  top: var(--space-4);
  left: var(--space-4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--ink);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}
.points-badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 14px;
  color: var(--amber);
  background: rgba(255, 177, 61, 0.14);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
}
.question-index {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 13px;
  color: rgba(27, 23, 18, 0.5);
  margin: var(--space-5) 0 var(--space-3) 0;
}
.question-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 6.5vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.question-difficulty {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  color: rgba(27, 23, 18, 0.55);
}

/* ============================================================================
   TIMER RING — design.md §5: SVG circle, 96px, stroke animates amber → red
   under 10s. Number in center.
   ========================================================================== */
.timer {
  position: relative;
  width: 96px;
  height: 96px;
  margin: var(--space-4) auto 0;
  flex: 0 0 auto;
}
.timer__svg {
  transform: rotate(-90deg);
  width: 96px;
  height: 96px;
}
.timer__track {
  fill: none;
  stroke: rgba(27, 23, 18, 0.1);
  stroke-width: 8;
}
.timer__value {
  fill: none;
  stroke: var(--amber);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.9s linear, stroke 0.3s ease;
}
.timer__value.is-urgent {
  stroke: var(--cherry);
}
.timer__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 36px;
  line-height: 1;
  color: var(--ink);
}
.timer__num.is-urgent {
  color: var(--cherry);
}

/* ============================================================================
   INPUT / SUBMIT
   ========================================================================== */
.answer-row {
  display: flex;
  gap: var(--space-3);
  margin-top: auto;
}
.answer-row .field__input {
  font-size: 20px;
  padding: var(--space-4);
}

/* ============================================================================
   REVEAL / FEEDBACK overlay
   ========================================================================== */
.feedback {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid;
  display: none;
}
.feedback.is-correct {
  background: rgba(20, 184, 166, 0.12);
  border-color: var(--teal);
  color: var(--ink);
}
.feedback.is-wrong {
  background: rgba(229, 72, 77, 0.12);
  border-color: var(--cherry);
  color: var(--ink);
}
.feedback.is-timeout {
  background: rgba(229, 72, 77, 0.12);
  border-color: var(--cherry);
  color: var(--ink);
}
.feedback__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: var(--space-2);
}
.feedback__answer {
  font-weight: 700;
}
.feedback__explanation {
  margin-top: var(--space-2);
  color: rgba(27, 23, 18, 0.7);
  font-size: 14px;
}

/* --- design.md §7 — shake/warn for wrong answers (200ms, 4px) --------------- */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.shake {
  animation: shake 0.2s ease;
}
<!-- CSS_BLOCK_3 -->