/* NBWC charades styles (UTF-8, 2-space indent) */
:root {
  --bg: #0f1115;
  --fg: #e6e6e6;
  --muted: #a0a3ad;
  --accent: #2dd4bf;
  --accent-2: #60a5fa;
  --danger: #ff6b6b;
  --card: #171923;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Noto Sans TC", Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: 1rem;
  padding: 1.5rem;
  max-width: 960px;
  margin: 0 auto;
}

.title {
  margin: 0.25rem 0 0.5rem;
  font-size: clamp(20px, 3.5vw, 32px);
  color: var(--fg);
}

.status {
  background: var(--card);
  border-radius: 14px;
  padding: 1.25rem;
  display: grid;
  gap: 0.75rem;
}

.timer {
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: clamp(36px, 8vw, 64px);
  color: var(--accent-2);
}
.timer.warn { color: var(--danger); }

.word {
  text-align: center;
  font-size: clamp(32px, 8vw, 72px);
  line-height: 1.15;
  letter-spacing: 0.02em;
}

.controls { display: grid; gap: 0.75rem; }
.row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn {
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: 0.8rem 1.1rem;
  background: var(--accent);
  color: #0b1322;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost {
  background: transparent;
  color: var(--muted);
  outline: 1px solid #2a3248;
}
.btn-small {
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
}
.btn-group .btn { background: #243042; color: var(--fg); }
.btn-group .btn.is-active { background: var(--accent-2); color: #0b1322; }

@media (hover: hover) {
  .btn:hover:not(:disabled) { filter: brightness(1.05); }
}