/* ============ Kwistig — shared styles ============ */
@font-face { font-family: 'Bricolage'; font-weight: 400; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage'; font-weight: 600; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage'; font-weight: 800; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage'; font-weight: 400; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage'; font-weight: 600; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bricolage'; font-weight: 800; font-display: swap; src: url(/fonts/bricolage-grotesque-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Creepster'; font-weight: 400; font-display: swap; src: url(/fonts/creepster-latin-400-normal.woff2) format('woff2'); }

:root {
  --bg: #15122b;
  --bg-2: #211c43;
  --surface: #2a2453;
  --surface-2: #362f69;
  --ink: #fbf8ff;
  --ink-soft: #c9c2ea;
  --ink-mute: #8f87b8;
  --accent: #d8ff3e;      /* Kwistig lime */
  --accent-ink: #15122b;
  --accent-2: #ff5fa2;
  --good: #3ee08f;
  --bad: #ff5a5f;
  --a0: #ff4f6d; --a1: #3d8bff; --a2: #ffb627; --a3: #19c37d;
  --display: 'Bricolage', ui-rounded, system-ui, sans-serif;
  --body: 'Bricolage', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}

[data-theme="halloween"] {
  --bg: #120a1c;
  --bg-2: #1f0f2e;
  --surface: #2b1640;
  --surface-2: #3b1f57;
  --ink: #fff7ec;
  --ink-soft: #e6cfe9;
  --ink-mute: #a487ac;
  --accent: #ff7a1a;     /* pumpkin */
  --accent-ink: #1a0b05;
  --accent-2: #a3ff3c;   /* slime */
  --a0: #ff7a1a; --a1: #9b5cff; --a2: #a3ff3c; --a3: #ff3d5a;
  --display: 'Creepster', 'Bricolage', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 700px at 80% -10%, var(--bg-2), transparent 60%), var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--accent); }
.hidden { display: none !important; }

.logo { font-family: 'Bricolage', sans-serif; font-weight: 800; letter-spacing: -0.04em; display: inline-flex; align-items: center; gap: .3em; }
.logo .mark {
  display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: .38em;
  background: var(--accent); color: var(--accent-ink); font-size: .9em; transform: rotate(-8deg);
}
.logo .mark::after { content: 'K'; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.4em; border-radius: 14px; font-weight: 800; letter-spacing: -0.01em;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 4px 0 rgba(0,0,0,.35); transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.btn.ghost { background: var(--surface); color: var(--ink); }
.btn:disabled { opacity: .5; pointer-events: none; }

.field {
  width: 100%; padding: .9em 1em; border-radius: 14px; border: 2px solid var(--surface-2);
  background: var(--bg); color: var(--ink); font-size: 1.15rem; font-weight: 600; outline: none;
}
.field:focus { border-color: var(--accent); }

.card { background: var(--surface); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }

/* Answer tiles: color + shape so they work without colour vision */
.shape { display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor; }
.shape.s0 { clip-path: polygon(50% 6%, 96% 92%, 4% 92%); }
.shape.s1 { clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%); }
.shape.s2 { border-radius: 50%; }
.shape.s3 { border-radius: 3px; transform: scale(.86); }
.c0 { --tile: var(--a0); } .c1 { --tile: var(--a1); } .c2 { --tile: var(--a2); } .c3 { --tile: var(--a3); }

/* Halloween decoration */
.spooky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.spooky span { position: absolute; font-size: 2rem; opacity: .16; animation: drift 18s linear infinite; }
@keyframes drift {
  0% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(40px, -30px) rotate(8deg); }
  100% { transform: translate(0, 0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) { .spooky span { animation: none; } }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: .7em 1.1em; border-radius: 12px; font-weight: 700;
  z-index: 100; box-shadow: var(--shadow);
}