:root { --bg: #f6f4ef; --fg: #222; --card: #fff; --muted: #777; --A: #e5484d; --B: #3e63dd; }
@media (prefers-color-scheme: dark) { :root { --bg: #16161a; --fg: #eee; --card: #24242a; --muted: #999; } }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: var(--bg); color: var(--fg); }
#app { max-width: 900px; margin: 0 auto; padding: 24px 16px; text-align: center; }
button { font: inherit; padding: 12px 20px; margin: 6px; border: 0; border-radius: 10px; background: var(--fg); color: var(--bg); cursor: pointer; }
button:disabled { opacity: .35; cursor: default; }
button.ghost { background: transparent; color: var(--muted); }
input, textarea { font: inherit; padding: 12px; margin: 6px 0; border: 1px solid var(--muted); border-radius: 10px; width: 100%; max-width: 420px; background: var(--card); color: var(--fg); }
.small { font-size: .85em; color: var(--muted); }
.chip { display: inline-block; padding: 8px 14px; margin: 4px; background: var(--card); border-radius: 999px; }
.board { display: flex; gap: 12px; margin-bottom: 16px; }
.team { flex: 1; padding: 12px; background: var(--card); border-radius: 12px; border-top: 4px solid var(--c); }
.tA { --c: var(--A); } .tB { --c: var(--B); }
.tc { color: var(--c); }
.q { background: var(--card); padding: 12px 16px; margin: 8px auto; max-width: 600px; border-radius: 12px; text-align: left; }
.q p { margin: 4px 0 0; white-space: pre-wrap; }
.word { font-size: 3em; font-weight: 800; margin: 16px 0; }