: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;
}

.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;
}

/* Reverse mode prompts a reading (kana), not a single glyph — size it down 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. */
.quiz-options.is-reverse .option-btn {
  font-size: 2rem;
}

/* "Weak spot" marker for a leech (an item the learner keeps missing). Subtle,
   amber, self-explaining — signals the meaning is shown as extra help. */
.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; }

.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;
}

.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/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;
}

/* Post-answer reveal panel: on'yomi/kun'yomi, strokes, example sentence and
   pitch-accented compounds (kanji mode) or pitch accent + source kanji
   (compound mode). Hidden until handleAnswer() populates it, so it can never
   leak the reading before the question is answered. */
.quiz-detail {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  text-align: left;
}

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

.detail-row {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.25rem 0;
  font-size: 0.9rem;
}

.detail-label {
  flex-shrink: 0;
  width: 4.4rem;
  color: #8a8378;
  font-size: 0.8rem;
}

.detail-label span {
  display: block;
  font-size: 0.65rem;
}

.detail-value {
  color: var(--fg);
}

.detail-compounds {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.detail-compounds li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.detail-word {
  font-weight: bold;
}

.detail-reading {
  color: #8a8378;
  font-size: 0.8rem;
}

/* Pitch-accent number, e.g. "(4)" — deliberately not a bordered box like
   .key-badge, so it doesn't read as another selectable option. */
.detail-accent {
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--accent);
}

.detail-accent::before {
  content: "(";
}

.detail-accent::after {
  content: ")";
}

.detail-gloss {
  color: #8a8378;
  font-size: 0.8rem;
  flex-basis: 100%;
}

.detail-more {
  color: #8a8378;
  font-size: 0.75rem;
}

.detail-more span {
  margin-left: 0.3rem;
}

/* --- 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; }
}