:root {
  --bg: #f6f4f1;
  --surface: #ffffff;
  --text: #1d1b19;
  --muted: #8a847d;
  --border: #e3ded8;
  --pinyin: #c0264b;
  --meaning: #1d63b8;
  --accent: #c0264b;
}

/* data-theme is set in index.html before paint, then by the theme button */
:root[data-theme="dark"] {
  --bg: #161514;
  --surface: #211f1d;
  --text: #f2efeb;
  --muted: #8f8880;
  --border: #36322f;
  --pinyin: #ff7a96;
  --meaning: #74b3ff;
  --accent: #ff7a96;
}

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.topbar h1 { font-size: 1.1rem; margin: 0; flex: 1; }

.icon-btn {
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
.icon-btn span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; }

/* Shows the moon in light mode (go dark) and the sun in dark mode (go light) */
.theme-btn .icon-sun, [data-theme="dark"] .theme-btn .icon-moon { display: none; }
[data-theme="dark"] .theme-btn .icon-sun { display: block; }

/* Sidebar */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 240px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform .2s ease;
  z-index: 20;
  overflow-y: auto;
  padding: 16px 0;
}
.sidebar.open { transform: none; }
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar button {
  width: 100%;
  text-align: left;
  padding: 14px 20px;
  border: 0;
  background: transparent;
  display: flex; justify-content: space-between;
  font-size: 1rem;
}
.sidebar button:hover { background: var(--bg); }
.sidebar button.active { color: var(--accent); font-weight: 600; }
.sidebar .count { color: var(--muted); font-weight: 400; }

.backdrop {
  position: fixed; inset: 0;
  background: rgb(0 0 0 / .35);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 10;
}
.backdrop.open { opacity: 1; pointer-events: auto; }

/* Practice area */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px 0;
}

.hint { color: var(--muted); text-align: center; padding: 0 16px; }

/* Progress bar + card share one width: full on phones, half on PC */
.practice { width: 100%; display: flex; flex-direction: column; gap: 8px; }

.progress-row { display: flex; align-items: center; gap: 12px; padding: 0 16px; }
.bar { flex: 1; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--accent); transition: width .2s ease; }
.progress { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.card {
  width: 100%;
  height: clamp(200px, 45vh, 420px);
  display: flex;
  background: var(--surface);
  border-block: 1px solid var(--border);
  user-select: none;
  cursor: pointer;
  touch-action: manipulation;
  container-type: inline-size;
}
.practice[hidden], .controls[hidden], .keys[hidden], .done[hidden], .btn[hidden] { display: none; }

@media (min-width: 768px) {
  .practice { width: 50%; }
  .progress-row { padding: 0; }
  /* A bit shorter than on phones, to leave room for the big key icons */
  .card { height: clamp(200px, 40vh, 420px); border: 1px solid var(--border); border-radius: 12px; }
}

.cell {
  width: 33.333%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  overflow-wrap: anywhere;
}
.cell + .cell { border-left: 1px solid var(--border); }

.hanzi {
  font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
  /* cqi = card width; one cell is ~33cqi. --n = number of characters, set from JS */
  font-size: min(calc(26cqi / var(--n, 1)), 6rem);
  line-height: 1.1;
}
.pinyin  { --size: 5.5cqi; color: var(--pinyin); font-weight: 600; }
.meaning { --size: 4cqi; color: var(--meaning); font-weight: 500; line-height: 1.3; }
/* --len = pinyin length, set from JS, so long pinyin shrinks instead of breaking */
.pinyin  { font-size: max(1.15rem, min(var(--size), calc(50cqi / var(--len, 1)), 2.8rem)); }
.meaning { font-size: clamp(.95rem, var(--size), 1.8rem); }

@media (min-width: 768px) {
  .pinyin  { --size: 7cqi; }
  .meaning { --size: 5cqi; }
}

.cell.hidden { color: var(--muted); font-weight: 400; }
.cell.hidden::after { content: "?"; font-size: 2rem; opacity: .5; }

/* End of a shuffled run: one message across the whole card */
.card.finished .cell { display: none; }
.done {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 1.1rem;
}
.done-title { color: var(--text); font-size: 2rem; font-weight: 600; }

/* Buttons */
.controls { display: flex; gap: 12px; padding: 0 16px; }
/* Fixed size, so the buttons don't change width as their label changes */
.btn {
  width: 150px;
  height: 48px;
  padding: 0 8px;
  white-space: nowrap;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 1rem;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn:disabled { opacity: .4; cursor: default; }

.keys { color: var(--muted); font-size: .85rem; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.keys span { display: flex; align-items: center; gap: 6px; }
.keys img { width: 5.5em; height: 5.5em; display: block; }
@media (hover: none) { .keys { display: none; } }

@media (min-width: 768px) {
  .controls { gap: 20px; }
  .btn { width: 240px; height: 74px; font-size: 1.5rem; border-radius: 14px; }
  .keys { font-size: 1.15rem; }
}