:root {
  --bg: #120a24;
  --bg2: #1e1238;
  --bg3: #2a1a4a;
  --card: rgba(255, 244, 224, 0.06);
  --card-strong: rgba(255, 244, 224, 0.12);
  --line: rgba(255, 209, 102, 0.22);
  --marigold: #ff9f1c;
  --gold: #ffd166;
  --kumkum: #e63946;
  --rose: #ef476f;
  --teal: #2ec4b6;
  --text: #fff4e0;
  --muted: #bfae9a;
  --display: 'Yatra One', 'Baloo 2', system-ui, sans-serif;
  --body: 'Baloo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 18px;
  --c0: #ef476f; /* answer tile colours */
  --c1: #2ec4b6;
  --c2: #ffd166;
  --c3: #a78bfa;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, .display { font-family: var(--display); font-weight: 400; margin: 0; letter-spacing: 0.01em; }
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input, textarea, select { font-family: inherit; }

/* Mandala-ish backdrop shared by both screens */
.backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% 115%, rgba(255, 159, 28, 0.28), transparent 60%),
    radial-gradient(900px 500px at 10% -10%, rgba(167, 139, 250, 0.18), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(239, 71, 111, 0.14), transparent 60%),
    var(--bg);
}
.backdrop::after {
  content: ''; position: absolute; inset: 0; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffd166' stroke-width='1'%3E%3Ccircle cx='60' cy='60' r='22'/%3E%3Ccircle cx='60' cy='60' r='36'/%3E%3Cpath d='M60 14 L66 38 L60 60 L54 38Z M60 106 L66 82 L60 60 L54 82Z M14 60 L38 54 L60 60 L38 66Z M106 60 L82 54 L60 60 L82 66Z'/%3E%3C/g%3E%3C/svg%3E");
}

.avatar {
  display: inline-grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--pc, var(--marigold)) 22%, transparent);
  box-shadow: 0 0 0 2px var(--pc, var(--marigold)) inset;
}

.timer { position: relative; display: inline-grid; place-items: center; }
.timer svg { width: 100%; height: 100%; transform: rotate(-90deg); position: absolute; inset: 0; }
.timer circle { fill: none; stroke-width: 3.2; }
.timer .track { stroke: rgba(255, 244, 224, 0.12); }
.timer .bar { stroke: var(--gold); stroke-linecap: round; transition: stroke-dashoffset 0.25s linear, stroke 0.3s; }
.timer.urgent .bar { stroke: var(--kumkum); }
.timer.urgent span { color: #ff8a8a; animation: pulse 1s infinite; }
.timer span { font-weight: 800; font-variant-numeric: tabular-nums; position: relative; }

@keyframes pulse { 50% { transform: scale(1.15); } }
@keyframes pop-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes flicker {
  0%, 100% { transform: scaleY(1) translateY(0); opacity: 1; }
  25% { transform: scaleY(1.12) translateY(-1px) skewX(2deg); opacity: 0.92; }
  50% { transform: scaleY(0.94) skewX(-2deg); opacity: 1; }
  75% { transform: scaleY(1.06) translateY(-1px); opacity: 0.95; }
}
@keyframes glow { 50% { filter: drop-shadow(0 0 18px rgba(255, 209, 102, 0.9)); } }

.toast-wrap { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); z-index: 100; display: grid; gap: 8px; pointer-events: none; width: min(92vw, 520px); }
.toast { background: #2b1b4f; border: 1px solid var(--line); color: var(--text); padding: 12px 16px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); animation: rise 0.25s ease-out; font-weight: 600; text-align: center; }

.muted { color: var(--muted); }
.gold { color: var(--gold); }
.center { text-align: center; }
.hidden { display: none !important; }