/* Wedding quiz theme: dark minimal, sage accent. Shared by the big screen and the guest phone. */
:root {
  --bg: #0d0f0e;
  --surface: #151816;
  --surface-2: #1c201d;
  --line: #272c28;
  --line-strong: #363c37;
  --text: #eef1ec;
  --muted: #9ba49c;
  --sage: #a7c0a0;
  --sage-soft: rgba(167, 192, 160, .12);
  --on-sage: #0d140c;
  --good: #bcd6b3;
  --bad: #e59ca4;
  --c-rose: #b1525d;
  --c-ochre: #c9a35a;
  --on-ochre: #1a1406;
  --c-lilac: #6f64a8;
  --c-jade: #3b7563;
  --silver: #d3d7d1;
  --taupe: #9c907f;
  --sans: 'Anuphan', 'Noto Sans Thai', 'Leelawadee UI', system-ui, sans-serif;
  color-scheme: dark;
}

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 3px; }

.choice.rose, .ph-choice.rose { background: var(--c-rose); color: #fff; }
.choice.marigold, .ph-choice.marigold { background: var(--c-ochre); color: var(--on-ochre); }
.choice.rak, .ph-choice.rak { background: var(--c-lilac); color: #fff; }
.choice.pandan, .ph-choice.pandan { background: var(--c-jade); color: #fff; }

.shape.rose, .rose > .shape.big { fill: var(--c-rose); }
.shape.marigold, .marigold > .shape.big { fill: var(--c-ochre); }
.shape.rak, .rak > .shape.big { fill: var(--c-lilac); }
.shape.pandan, .pandan > .shape.big { fill: var(--c-jade); }

.player #demoBadge { top: auto; bottom: 10px; }
#demoBadge {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 50;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

@keyframes pulse { 50% { transform: scale(1.6); opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}