:root {
  --bg: #faf7f2;
  --fg: #2b2b2b;
  --accent: #c0392b;
  --accent-dark: #962d22;
  --card-bg: #ffffff;
  --border: #e0d8cc;
  --correct: #2e7d32;
  --incorrect: #c0392b;
  --mastery-new: #b0a999;
  --mastery-learning: #c0392b;
  --mastery-familiar: #d9a441;
  --mastery-mastered: #2e7d32;
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1a18;
    --fg: #f0ece4;
    --card-bg: #2a2622;
    --border: #443d34;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  min-height: 100%;
}

.app-header {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  padding: 1.2rem 1rem 0.6rem;
}

.app-header h1 {
  margin: 0;
  font-size: 1.4rem;
  letter-spacing: 0.05em;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--fg);
  cursor: pointer;
  padding: 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover, .icon-btn:focus-visible {
  color: var(--accent);
}

.icon-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.settings-btn {
  position: absolute;
  top: 0.7rem;
  right: 0.8rem;
}

.hamburger-icon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 1.3rem;
  height: 0.9rem;
}

.hamburger-icon span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* --- Settings dialog --- */

.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 100;
}

.settings-overlay.hidden { display: none; }

.settings-panel {
  width: 100%;
  max-width: 360px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.2rem 1.2rem;
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}

.settings-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.settings-header h2 span {
  display: block;
  font-size: 0.65rem;
  font-weight: normal;
  color: #8a8378;
  margin-top: 0.1rem;
}

.settings-header .icon-btn {
  font-size: 1.4rem;
  line-height: 1;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--border);
}

.settings-row:last-child { border-bottom: none; }

.settings-row-column {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.settings-row-label {
  font-size: 0.9rem;
}

.settings-row-label span {
  display: block;
  font-size: 0.7rem;
  font-weight: normal;
  color: #8a8378;
  margin-top: 0.1rem;
}

.switch {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 2.6rem;
  height: 1.5rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.switch-slider::before {
  content: '';
  position: absolute;
  width: 1.1rem;
  height: 1.1rem;
  left: 0.2rem;
  top: 0.2rem;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.15s ease;
}

.switch input:checked + .switch-slider { background: var(--accent); }
.switch input:checked + .switch-slider::before { transform: translateX(1.1rem); }

.switch input:focus-visible + .switch-slider {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.switch input:disabled + .switch-slider {
  cursor: not-allowed;
  opacity: 0.45;
}

.settings-row:has(.switch input:disabled) .settings-row-label {
  opacity: 0.6;
}

.settings-segmented {
  display: flex;
  gap: 0.4rem;
}

.segmented-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.5rem 0.3rem;
  font-size: 0.9rem;
  font-weight: bold;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
}

.segmented-btn span {
  font-size: 0.6rem;
  font-weight: normal;
  color: #8a8378;
}

.segmented-btn:hover, .segmented-btn:focus-visible {
  border-color: var(--accent);
}

.segmented-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}

.settings-install-btn {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  align-self: flex-start;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  font-weight: bold;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.settings-install-btn span {
  font-size: 0.7rem;
  font-weight: normal;
  color: #8a8378;
}

.settings-install-btn:hover, .settings-install-btn:focus-visible {
  border-color: var(--accent);
}

.settings-install-btn.hidden { display: none; }

.settings-install-hint {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #8a8378;
}

.settings-install-hint.hidden { display: none; }

/* About section in Settings */
.about-app {
  margin: 0;
  font-size: 0.95rem;
  font-weight: bold;
}

.about-version {
  margin-left: 0.35rem;
  font-size: 0.75rem;
  font-weight: normal;
  color: #8a8378;
}

.about-link {
  align-self: flex-start;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--accent);
  text-decoration: none;
}

.about-link span {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.7rem;
  font-weight: normal;
  color: #8a8378;
}

.about-link:hover,
.about-link:focus-visible {
  text-decoration: underline;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 0.5rem 1rem 3rem;
}

.screen.hidden { display: none; }

.banner-warning, .banner-error {
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
}

.banner-warning.hidden, .banner-error.hidden { display: none; }

.banner-warning {
  background: #fff3cd;
  border: 1px solid #f0d98c;
  color: #6b5900;
}

.banner-error {
  background: #fdecea;
  border: 1px solid #f3b7b0;
  color: #7a1f14;
}

.banner-warning code, .banner-error code {
  background: rgba(0,0,0,0.06);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

/* --- Home screen --- */

#screen-home h2 {
  text-align: center;
  margin-bottom: 0.2rem;
  font-size: 1.15rem;
}

.subtitle {
  text-align: center;
  color: #8a8378;
  margin-top: 0;
  font-size: 0.85rem;
}

.progress-heading {
  margin: 1rem 0 0.4rem;
  font-size: 0.85rem;
  color: #8a8378;
  text-align: center;
  letter-spacing: 0.05em;
}

.progress-heading span {
  display: block;
  font-size: 0.65rem;
  letter-spacing: normal;
  margin-top: 0.1rem;
}

.progress-summary {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin: 0.4rem 0 0;
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.progress-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  font-size: 0.75rem;
  color: #8a8378;
}

.progress-stat strong {
  font-size: 1.1rem;
  color: var(--fg);
}

.grade-progress-list {
  display: flex;
  flex-direction: column;
  margin-top: 0.4rem;
  padding: 0.2rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.grade-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
}

.grade-row:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.grade-row-name {
  flex-shrink: 0;
  min-width: 3.6em;
  font-size: 0.8rem;
  color: var(--fg);
}

.grade-row-percent,
.grade-row-accuracy {
  flex-shrink: 0;
  min-width: 2.6em;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: #8a8378;
  text-align: right;
}

.grade-row[data-status="new"] .progress-bar-fill { background: var(--mastery-new); }
.grade-row[data-status="learning"] .progress-bar-fill { background: var(--mastery-learning); }
.grade-row[data-status="familiar"] .progress-bar-fill { background: var(--mastery-familiar); }
.grade-row[data-status="mastered"] .progress-bar-fill { background: var(--mastery-mastered); }

.grade-row-reset {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #8a8378;
  cursor: pointer;
}

.grade-row-reset:hover, .grade-row-reset:focus-visible {
  color: var(--accent);
  outline: none;
}

.progress-mode-breakdown {
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.progress-mode-row {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.15rem 0;
  font-size: 0.8rem;
  color: #8a8378;
}

.progress-mode-row:not(:last-child) {
  border-bottom: 1px solid var(--border);
}

.progress-mode-label {
  font-weight: bold;
  color: var(--fg);
}

.progress-history {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.6rem 0 0;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
}

.progress-history-label {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: #8a8378;
}

.progress-history-label span {
  display: block;
  font-size: 0.6rem;
}

.progress-history-bar {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.progress-history-bar.is-empty::after {
  content: '—';
  color: #8a8378;
  font-size: 0.8rem;
}

.history-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--border);
}

.history-dot.correct { background: var(--correct); }
.history-dot.wrong { background: var(--incorrect); }

.mastery-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.mastery-dot.mastery-new { background: var(--mastery-new); }
.mastery-dot.mastery-learning { background: var(--mastery-learning); }
.mastery-dot.mastery-familiar { background: var(--mastery-familiar); }
.mastery-dot.mastery-mastered { background: var(--mastery-mastered); }

.progress-bar-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.progress-bar {
  flex: 1;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.progress-bar-percent {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: #8a8378;
  min-width: 2.5em;
  text-align: right;
}

.progress-bar-percent.hidden { display: none; }

.mode-toggle {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.2rem;
}

.mode-btn {
  position: relative;
  flex: 1;
  max-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.6rem 0.5rem;
  font-size: 1rem;
  font-weight: bold;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--fg);
  cursor: pointer;
}

.mode-btn span {
  font-size: 0.7rem;
  font-weight: normal;
  color: #8a8378;
}

.mode-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}

.mode-btn:focus-visible,
.primary-btn:focus-visible,
.secondary-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.grade-section-heading {
  margin: 1.6rem 0 0.6rem;
  font-size: 0.85rem;
  color: #8a8378;
  text-align: center;
  letter-spacing: 0.05em;
}

.grade-section-heading span {
  display: block;
  font-size: 0.65rem;
  letter-spacing: normal;
  margin-top: 0.1rem;
}

.grade-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.grade-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 1.4rem 0.5rem;
  font-size: 1.3rem;
  font-weight: bold;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--fg);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}

.grade-btn span {
  font-size: 0.75rem;
  font-weight: normal;
  color: #8a8378;
}

.grade-btn:hover, .grade-btn:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.grade-btn:active {
  transform: scale(0.97);
}

.grade-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.grade-btn:disabled:hover {
  border-color: var(--border);
  box-shadow: none;
}

/* Cumulative review is one full-width button rather than a 2-up cell. */
.grade-grid-single {
  grid-template-columns: 1fr;
}

/* Deliberately not .grade-btn: that class is queried to enumerate the real
   grades (progress rows, totals, display names), and review isn't one. It
   borrows the same visual treatment, tinted toward the accent so it reads as
   a different kind of action. */
.review-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 1.4rem 0.5rem;
  font-size: 1.3rem;
  font-weight: bold;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--accent);
  cursor: pointer;
}

.review-btn span {
  font-size: 0.75rem;
  font-weight: normal;
  color: #8a8378;
}

.review-btn:hover:not(:disabled), .review-btn:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.review-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.review-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--border);
  color: var(--fg);
}

/* --- Quiz screen --- */

.quiz-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.8rem 0 1.2rem;
}

.quiz-progress {
  font-variant-numeric: tabular-nums;
  color: #8a8378;
  font-size: 0.9rem;
}

.quiz-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 1.2rem 1.5rem;
  text-align: center;
}

.quiz-kanji {
  font-size: 5rem;
  line-height: 1;
  margin-bottom: 0.3rem;
}

.quiz-kanji.is-word {
  font-size: 2.6rem;
}

.quiz-kanji.is-sentence {
  font-size: 1.7rem;
  line-height: 1.7;
}

/* Reverse mode prompts a reading (kana), not a single glyph — size it down
   from the 5rem kanji so a multi-mora reading fits the card width. */
.quiz-kanji.is-reverse {
  font-size: 2.6rem;
}

/* Reverse options are kanji; bump them up from the reading-option size so the
   glyph is comfortably legible as the thing being chosen. */
.quiz-options.is-reverse .option-btn {
  font-size: 2rem;
}

.quiz-sentence-target {
  color: var(--accent);
  font-weight: bold;
}

/* Furigana revealed over the target once the question is answered. The
   sentence line already reserves space above it (is-sentence line-height),
   so adding ruby doesn't shift the rest of the card. */
.quiz-kanji rt {
  font-size: 0.4em;
  font-weight: normal;
  color: var(--accent);
}

.quiz-meaning {
  color: #8a8378;
  font-size: 1rem;
  font-style: italic;
  margin: 0 0 1rem;
}

.quiz-meaning.hidden { display: none; }

.quiz-instruction {
  color: #8a8378;
  font-size: 0.9rem;
  margin: 0 0 1.2rem;
}

.quiz-instruction span {
  display: block;
  font-size: 0.7rem;
  margin-top: 0.15rem;
}

.okurigana {
  color: var(--accent);
}

.option-btn.correct .okurigana,
.option-btn.incorrect .okurigana {
  color: inherit;
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}

/* Manual-continue hint shown after answering when auto-advance is off. The
   whole document is clickable to continue, so this is a cue, not the only
   target — but give it a pointer to read as tappable. */
.quiz-continue {
  margin: 1rem 0 0;
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  color: var(--accent);
  cursor: pointer;
  animation: quiz-continue-fade 0.2s ease-in;
}

.quiz-continue span {
  display: block;
  font-size: 0.7rem;
  font-weight: normal;
  color: #8a8378;
  margin-top: 0.15rem;
}

.quiz-continue.hidden { display: none; }

/* Example words revealed after answering (kanji mode) — the kanji -> 熟語
   association a drill book builds. */
.quiz-examples {
  margin: 1rem 0 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  text-align: left;
}

.quiz-examples.hidden { display: none; }

.quiz-examples-label {
  font-size: 0.7rem;
  color: #8a8378;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
}

.quiz-examples-label span {
  margin-left: 0.4rem;
}

.quiz-examples ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quiz-examples li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.25rem 0;
  border-top: 1px solid var(--border);
}

.quiz-examples li:first-child { border-top: none; }

.ex-word { font-size: 1.15rem; font-weight: bold; }
.ex-reading { font-size: 0.85rem; color: var(--accent); }
.ex-gloss { font-size: 0.8rem; color: #8a8378; font-style: italic; margin-left: auto; text-align: right; }

/* "Weak spot" marker for a leech (a kanji the learner keeps missing). Subtle,
   amber, and self-explaining — signals the meaning is being shown as extra
   help, not that anything is broken. */
.quiz-leech-badge {
  display: inline-block;
  margin: 0 auto 0.6rem;
  padding: 0.1rem 0.55rem;
  font-size: 0.75rem;
  font-weight: bold;
  color: #9a6a00;
  background: #fdf0d5;
  border: 1px solid #e6c886;
  border-radius: 999px;
}

.quiz-leech-badge span {
  font-weight: normal;
  font-size: 0.65rem;
  margin-left: 0.3rem;
  opacity: 0.8;
}

.quiz-leech-badge.hidden { display: none; }

@keyframes quiz-continue-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.option-btn {
  position: relative;
  /* Symmetric side gutter reserves room for the corner key-badge so long
     readings never sit under it, while keeping the text optically centered. */
  padding: 0.9rem 1.7rem;
  font-size: 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
}

.key-badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
  color: #8a8378;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.key-badge-corner {
  position: absolute;
  bottom: 0.35rem;
  left: 0.45rem;
}

/* Shortcut hint: a key-badge kept hidden until its button is hovered or
   keyboard-focused, for the mode/scope/review buttons whose label doesn't
   otherwise show the shortcut key. Gated to hover-capable pointer devices —
   a touch user has no keyboard key to hint at, and since it's absolutely
   positioned it reserves no space, so it simply never appears there. */
.shortcut-hint {
  opacity: 0;
  transition: opacity 0.12s ease;
}

@media (hover: hover) {
  .mode-btn:hover .shortcut-hint,
  .mode-btn:focus-visible .shortcut-hint,
  .toggle-btn:hover .shortcut-hint,
  .toggle-btn:focus-visible .shortcut-hint,
  .review-btn:hover .shortcut-hint,
  .review-btn:focus-visible .shortcut-hint {
    opacity: 1;
  }
}

.option-btn.correct .key-badge,
.option-btn.incorrect .key-badge {
  color: inherit;
  border-color: rgba(255, 255, 255, 0.6);
}

.option-btn:hover, .option-btn:focus-visible {
  border-color: var(--accent);
}

.option-btn.correct {
  background: var(--correct);
  border-color: var(--correct);
  color: #fff;
}

.option-btn.incorrect {
  background: var(--incorrect);
  border-color: var(--incorrect);
  color: #fff;
}

.option-btn:disabled {
  cursor: default;
  opacity: 0.9;
}

/* --- Summary screen --- */

#screen-summary {
  text-align: center;
}

.summary-score {
  font-size: 1.4rem;
  font-weight: bold;
}

.summary-missed {
  text-align: left;
  margin: 1rem 0;
}

.summary-missed h3 {
  font-size: 0.95rem;
  color: #8a8378;
}

.summary-score span {
  display: block;
  font-size: 0.7rem;
  font-weight: normal;
  color: #8a8378;
}

.missed-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.2rem;
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem;
}

.missed-item-meaning {
  flex: 1;
  color: #8a8378;
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
}

.summary-correct {
  text-align: left;
  margin: 1rem 0;
}

.summary-correct-details summary {
  cursor: pointer;
  font-size: 0.95rem;
  color: #8a8378;
  padding: 0.3rem 0;
}

.summary-correct-details[open] summary {
  margin-bottom: 0.3rem;
}

.summary-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.5rem;
}

.primary-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.9rem;
  font-size: 1.05rem;
  font-weight: bold;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.primary-btn:hover { background: var(--accent-dark); }

.primary-btn .key-badge {
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.primary-btn span {
  font-size: 0.7rem;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.75);
}

.secondary-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.9rem;
  font-size: 1.05rem;
  font-weight: bold;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
}

.secondary-btn:hover { border-color: var(--accent); }

.secondary-btn span {
  font-size: 0.7rem;
  font-weight: normal;
  color: #8a8378;
}

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0.4rem;
}

.link-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (min-width: 480px) {
  .quiz-kanji { font-size: 6rem; }
}