body { font-family: system-ui, sans-serif; max-width: 40rem; margin: 2rem auto; padding: 0 1rem; }
label { display: block; margin: 0.5rem 0; }
input { font-size: 1rem; padding: 0.3rem; }
button { font-size: 1rem; padding: 0.5rem 1rem; margin: 0.25rem 0.25rem 0.25rem 0; }
.hint { font-size: 0.9rem; }
.error { color: #a00; font-weight: bold; }
#games { list-style: none; padding: 0; }
#gamearea { border: 2px solid #888; border-radius: 8px; padding: 2rem; margin: 1rem 0; }
#gamearea:focus { border-color: #06c; outline: 3px solid #06c; }
#speechlog { border: 1px solid #ccc; border-radius: 8px; padding: 0.5rem 1rem; min-height: 6rem; max-height: 12rem; overflow-y: auto; }

@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
  input, button { background: #222; color: #eee; border: 1px solid #666; }
  a { color: #7bf; }
  .error { color: #f88; }
}