/* ============================================================
   FEATURES CSS — verify banner, voice button, SRS review page,
   nav badge, achievement icons. Inherits washi/sumi/beni tokens.
   ============================================================ */

/* -------- Email verification banner -------- */
.verify-banner {
  background: linear-gradient(135deg, #FFF6E5 0%, #FFE9C4 100%);
  border-bottom: 1px solid var(--hairline);
  color: var(--sumi-soft);
  font-size: var(--fs-sm);
  position: sticky;
  top: 0;
  z-index: 50;
}
.verify-banner__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 16px;
  flex-wrap: wrap;
}
.verify-banner__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(202,36,36,.10);
  color: var(--beni-deep);
  flex-shrink: 0;
}
.verify-banner__text { flex: 1; min-width: 200px; line-height: var(--lh-snug); }
.verify-banner__form { display: inline-flex; }
.verify-banner__btn {
  border: 1px solid var(--beni);
  background: transparent;
  color: var(--beni-deep);
  font: 600 var(--fs-xs)/1 var(--font-body);
  letter-spacing: var(--tracking-wide);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.verify-banner__btn:hover { background: var(--beni); color: #fff; }

@media (max-width: 600px) {
  .verify-banner__row { padding: 10px 14px; }
  .verify-banner__text { font-size: var(--fs-xs); }
}

/* -------- Nav badge (SRS due count) -------- */
.nav__link--review { position: relative; }
.nav__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  background: var(--beni);
  color: #fff;
  font: 700 11px/1 var(--font-body);
  border-radius: 999px;
  letter-spacing: 0;
  vertical-align: middle;
}

/* ============================================================
   Voice button — единый стиль для всех вариантов
   (icon-only round, anchored top-right of any card)
   ============================================================ */
.voice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: var(--washi-deep);
  color: var(--sumi-soft);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  cursor: pointer;
  transition: background .18s ease,
              color .18s ease,
              border-color .18s ease,
              transform .12s ease,
              box-shadow .18s ease;
  flex-shrink: 0;
}
.voice-btn svg { display: block; }

.voice-btn:hover {
  background: var(--beni);
  color: #fff;
  border-color: var(--beni);
  transform: scale(1.06);
}
.voice-btn:active { transform: scale(0.94); }
.voice-btn:focus-visible {
  outline: 2px solid var(--beni);
  outline-offset: 2px;
}

.voice-btn--playing {
  background: var(--beni);
  color: #fff;
  border-color: var(--beni);
  animation: voice-pulse .6s ease;
}
@keyframes voice-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(202,36,36,.45); }
  100% { box-shadow: 0 0 0 14px rgba(202,36,36,0); }
}

/* Anchored top-right of its parent card */
.voice-btn--corner {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* The character/vocab cards need to be a positioning context */
.char-card,
.vocab-card { position: relative; }

/* -------- Stroke modal — keep voice button color crisp -------- */
.stroke-modal .voice-btn__ico {
  display: inline-flex;
  align-items: center;
}

/* -------- SRS review page -------- */
.review-shell { padding-top: var(--s-6); padding-bottom: var(--s-9); }

.review-head { max-width: 720px; margin-bottom: var(--s-6); }
.review-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  margin: 6px 0 12px 0;
}
.review-sub { color: var(--sumi-mute); line-height: var(--lh-relaxed); max-width: 560px; }

.review-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-5) 0;
  max-width: 560px;
}
.review-stat {
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: var(--s-4);
}
.review-stat__num {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--beni);
  line-height: 1;
}
.review-stat__lbl {
  margin-top: 6px;
  font-size: var(--fs-sm);
  color: var(--sumi-mute);
  letter-spacing: var(--tracking-wide);
}

.review-cta { margin: var(--s-5) 0 var(--s-6) 0; }

.review-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: var(--s-6) 0 var(--s-3) 0;
}

.review-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-3);
}
.review-card {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px 16px;
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -16px rgba(26,26,26,.20);
}
.review-card__symbol {
  font-family: var(--font-display-jp);
  font-size: 32px;
  line-height: 1;
  color: var(--sumi);
  flex-shrink: 0;
  min-width: 40px;
  text-align: center;
}
.review-card__main { flex: 1; min-width: 0; }
.review-card__reading {
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--sumi-soft);
  line-height: var(--lh-snug);
}
.review-card__meaning {
  font-size: var(--fs-xs);
  color: var(--sumi-mute);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.review-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11px;
  color: var(--sumi-mute);
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.review-card__lapses { color: var(--warning); }

.review-empty {
  text-align: center;
  padding: var(--s-8) var(--s-4);
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  max-width: 520px;
  margin: var(--s-5) auto 0 auto;
}
.review-empty__kanji {
  font-family: var(--font-display-jp);
  font-size: 88px;
  color: var(--matcha);
  line-height: 1;
  margin-bottom: var(--s-3);
}
.review-empty h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 800;
  margin: 0 0 var(--s-2) 0;
}
.review-empty .btn { margin-top: var(--s-4); }

@media (max-width: 600px) {
  .review-title  { font-size: var(--fs-xl); }
  .review-stats  { grid-template-columns: 1fr 1fr; }
  .review-stat   { padding: var(--s-3); }
  .review-stat__num { font-size: var(--fs-xl); }
  .review-list   { grid-template-columns: 1fr; }
  .review-empty__kanji { font-size: 64px; }
}

/* ============================================================
   Info card — про онъёми/кунъёми (раскрывающийся блок)
   ============================================================ */
.info-card {
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  margin: 0 0 var(--s-5) 0;
  overflow: hidden;
  transition: box-shadow .2s ease;
}
.info-card[open] {
  box-shadow: 0 6px 24px -18px rgba(26,26,26,.30);
}
.info-card__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--sumi-soft);
  transition: background .15s ease;
}
.info-card__head::-webkit-details-marker { display: none; }
.info-card__head:hover { background: var(--washi-soft); }
.info-card__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(202,36,36,.08);
  color: var(--beni-deep);
  flex-shrink: 0;
}
.info-card__title { flex: 1; }
.info-card__chevron {
  font-size: 14px;
  color: var(--sumi-mute);
  transition: transform .2s ease;
}
.info-card[open] .info-card__chevron { transform: rotate(180deg); }

.info-card__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  padding: 4px 18px 20px 18px;
  border-top: 1px solid var(--hairline);
  background: var(--washi-soft);
  font-size: var(--fs-sm);
  color: var(--sumi-soft);
  line-height: var(--lh-relaxed);
}
.info-card__body p { margin: 0; }
.info-card__col-h {
  /* Используем обычный JP-шрифт (LINE Seed JP), а не Mochiy Pop One.
     Mochiy имеет только weight 400, и при font-weight: 700 браузер
     синтезирует faux-bold — выглядит «размазанно». LINE Seed JP с весом 600
     даёт чистый и читаемый результат. */
  font-family: var(--font-jp);
  font-weight: 600;
  font-size: var(--fs-md);
  letter-spacing: -0.005em;
  margin: 12px 0 6px 0;
  color: var(--sumi);
}
.info-card__col em {
  font-style: normal;
  background: var(--beni-tint);
  color: var(--beni-deep);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}
@media (max-width: 700px) {
  .info-card__body { grid-template-columns: 1fr; gap: var(--s-3); }
}

/* ============================================================
   Kanji cards — крупный иероглиф + блоки чтений с озвучкой
   ============================================================ */
.kanji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4);
}

.kanji-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 22px 20px 20px 20px;
  cursor: pointer;
  transition: transform .2s var(--ease-out, ease),
              box-shadow .2s ease,
              border-color .2s ease;
}
.kanji-card:hover {
  transform: translateY(-3px);
  border-color: var(--hairline-strong);
  box-shadow: 0 12px 28px -20px rgba(26,26,26,.32);
}
.kanji-card__num {
  position: absolute;
  top: 12px; right: 14px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: var(--tracking-wide);
  color: var(--sumi-faint);
}

.kanji-card__hero {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 16px 0;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 16px;
}
.kanji-card__symbol {
  /* Use the regular JP font (lighter weight) so the kanji renders
     crisp instead of "smudged" like in Mochiy Pop One */
  font-family: var(--font-jp);
  font-size: 88px;
  line-height: .9;
  color: var(--sumi);
  font-weight: 500;
  letter-spacing: -0.02em;
  user-select: none;
}

.kanji-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* readings block (onyomi / kunyomi) */
.reading-block { display: flex; flex-direction: column; gap: 6px; }

.reading-block__label {
  font-family: var(--font-jp);
  font-size: 13px;
  font-weight: 500;
  color: var(--sumi-soft);
  letter-spacing: 0.01em;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.reading-block__label .muted {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.reading-block__items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* a single reading + voice icon as one chip */
.reading-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--washi-deep);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  cursor: pointer;
  /* Lighter weight — Mochiy Pop One was too bold and looked smudged */
  font-family: var(--font-jp);
  font-size: 15px;
  font-weight: 400;
  color: var(--sumi);
  transition: background .18s ease, color .18s ease, transform .12s ease, border-color .18s ease, box-shadow .18s ease;
}
.reading-chip:hover {
  background: var(--beni);
  color: #fff;
  border-color: var(--beni);
  transform: scale(1.05);
}
.reading-chip:active { transform: scale(0.96); }
.reading-chip:focus-visible {
  outline: 2px solid var(--beni);
  outline-offset: 2px;
}
.reading-chip__ico {
  display: inline-flex;
  opacity: .65;
  transition: opacity .18s ease;
}
.reading-chip:hover .reading-chip__ico { opacity: 1; }

.reading-chip.voice-btn--playing {
  background: var(--beni);
  color: #fff;
  border-color: var(--beni);
  animation: voice-pulse .6s ease;
}

/* meaning + mnemonic */
.kanji-card__meaning {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--sumi);
  line-height: var(--lh-snug);
  padding-top: 4px;
}
.kanji-card__mnemonic {
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--sumi-mute);
  margin: 0;
  line-height: var(--lh-relaxed);
  border-left: 2px solid var(--hairline);
  padding-left: 10px;
}

@media (max-width: 600px) {
  .kanji-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .kanji-card__symbol { font-size: 76px; }
}

/* ============================================================
   Vocabulary cards — слово как hero-элемент
   ============================================================ */
.vocab-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-3);
}

.vocab-card {
  position: relative;
  display: flex;
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  /* extra right padding so content doesn't run under the voice button */
  padding: 18px 56px 16px 18px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.vocab-card:hover {
  transform: translateY(-2px);
  border-color: var(--hairline-strong);
  box-shadow: 0 10px 22px -18px rgba(26,26,26,.30);
}
.vocab-card__num {
  position: absolute;
  top: 10px; left: 14px;
  font: 600 11px/1 var(--font-mono);
  letter-spacing: var(--tracking-wide);
  color: var(--sumi-faint);
}
.vocab-card__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin-top: 14px; /* leave room for absolute-positioned num/voice */
}
.vocab-card__symbol {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 30px;
  line-height: 1.15;
  color: var(--sumi);
  font-weight: 500;
  letter-spacing: -0.01em;
  word-break: keep-all;
}
.vocab-card__kana {
  font-family: var(--font-jp);
  font-size: var(--fs-md);
  font-weight: 400;
  color: var(--sumi-soft);
  line-height: 1.3;
}
.vocab-card__romaji {
  font-size: var(--fs-xs);
  color: var(--sumi-mute);
  letter-spacing: var(--tracking-wide);
  margin-top: 2px;
}
.vocab-card__divider {
  margin: 0 6px;
  color: var(--sumi-faint);
}
.vocab-card__meaning {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--sumi);
  line-height: var(--lh-snug);
}

@media (max-width: 600px) {
  .vocab-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .vocab-card { padding: 16px 52px 14px 16px; }
  .vocab-card__symbol { font-size: 26px; }
  .vocab-card__main { margin-top: 12px; }
}

/* -------- Achievement grid: tighten on small screens -------- */
@media (max-width: 480px) {
  .achievement { padding: var(--s-3); }
  .achievement__name { font-size: 11px; }
}

/* -------- Achievement badge with SVG icon -------- */
.ach-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--washi-deep);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  color: var(--beni);
  flex-shrink: 0;
}
.ach-icon svg { width: 24px; height: 24px; display: block; }
.ach-icon--locked { opacity: .35; color: var(--sumi-mute); }
.ach-icon--earned {
  background: var(--beni);
  color: #fff;
  border-color: var(--beni);
}

/* ============================================================
   Achievement card — custom hover bubble (заменяет title="..")
   ============================================================ */
.achievement {
  position: relative;
  cursor: help;
}
/* Override the old rotate-on-hover that conflicted with absolutely
   positioned bubble (bubble inherited rotation from the parent). */
.achievement:hover { transform: translateY(-3px) !important; }

.achievement__bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  /* never wider than the screen on mobile */
  max-width: min(260px, 90vw);
  padding: 10px 14px;
  background: var(--sumi);
  color: var(--kinari);
  border-radius: 10px;
  font-size: var(--fs-xs);
  line-height: 1.45;
  letter-spacing: 0;
  text-align: center;
  box-shadow: 0 12px 32px -16px rgba(26,26,26,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 30;
  white-space: normal;
}
.achievement__bubble::after {
  /* arrow */
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--sumi);
}
.achievement__bubble-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--beni-soft);
  margin-bottom: 4px;
}
.achievement__bubble-text { color: var(--washi); }

.achievement:hover .achievement__bubble,
.achievement:focus-visible .achievement__bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Touch devices (phones/tablets) — hover doesn't work reliably and
   the centered bubble overflows narrow viewports. Hide custom bubble
   and let the browser fall back to title="" (long-press tooltip). */
@media (hover: none), (max-width: 720px) {
  .achievement__bubble { display: none !important; }
  .achievement:hover { transform: none !important; }
}

/* Safety net: any container-page on mobile must have symmetric horizontal
   padding so children don't stick to the right edge under sticky elements. */
@media (max-width: 640px) {
  .container-page,
  .container-narrow,
  .container-wide {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================================
   NARROW VIEWPORT — global overflow safety
   ============================================================ */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}
/* Belt-and-suspenders: never let the page scroll horizontally */
html { overflow-x: clip !important; }
body { overflow-x: clip !important; }

main {
  max-width: 100vw;
  overflow-x: clip;
}

/* Default `min-width: auto` on flex/grid children lets them inflate
   beyond the container if their content is intrinsically wider
   (long words, big SVGs, monospace tokens). Force shrinkability. */
.profile-grid > *,
.profile-card,
.profile-section,
.review-stat,
.stat-block,
.kanji-card,
.vocab-card,
.review-card,
.favorite-row,
.world,
.level-stone,
.pillar,
.cat-card,
.ex-card,
.info-card,
.verify-banner__row > *,
.header__row > * {
  min-width: 0;
}

/* Long unbreakable strings (emails, JP words, romaji) wrap by default */
.profile-since,
.verify-banner strong,
.review-card__reading,
.review-card__meaning,
.favorite-row__romaji,
.favorite-row__polivanov,
.favorite-row__meaning,
.kanji-card__mnemonic,
.vocab-card__romaji,
.profile-name {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 480px) {
  /* All "card grids" → single column */
  .kanji-grid,
  .vocab-grid,
  .review-list,
  .srs-flow,
  .pillars__grid,
  .worlds,
  .levels-grid,
  .ex-picker,
  .char-grid {
    grid-template-columns: 1fr !important;
  }

  /* Achievements: 2 columns max instead of 3 (3 was too tight at 380px) */
  .achievement-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--s-3);
  }

  /* Cats: 2 columns */
  .cats__grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Stat blocks (profile): keep 2 cols but allow shrink */
  .stat-grid {
    grid-template-columns: 1fr 1fr !important;
    min-width: 0;
  }

  /* Profile sections: smaller padding on tiny screens */
  .profile-card,
  .profile-section,
  .review-stat,
  .info-card__head,
  .info-card__body,
  .level-shell .ex-card {
    padding: var(--s-4) !important;
  }

  /* Verify banner text shouldn't enforce a 200px minimum */
  .verify-banner__text { min-width: 0 !important; }
  .verify-banner__row  { gap: 8px; padding: 10px 14px; }
  .verify-banner__btn  { padding: 6px 10px; font-size: 11px; }

  /* Tighter typography */
  .level-title,
  .review-title,
  .map-head__title { font-size: clamp(24px, 7vw, 32px) !important; }

  /* Stat-block inner numbers shouldn't get too big */
  .stat-block__num,
  .review-stat__num { font-size: var(--fs-xl) !important; }

  /* Profile-card avatar a touch smaller */
  .profile-avatar { width: 84px !important; height: 84px !important; }

  /* Long words / emails wrap */
  .verify-banner strong,
  .profile-since,
  .review-card__reading,
  .review-card__meaning {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* Iphone SE / very small (≤ 360 px) */
@media (max-width: 360px) {
  .container-page,
  .container-narrow,
  .container-wide {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .achievement-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
}

/* ============================================================
   World "Пройден" — заменяет красный chip 完了
   ============================================================ */
.world__done {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--matcha);
  color: var(--matcha);
  border-radius: 999px;
  font: 600 11px/1 var(--font-body);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.world__done svg {
  display: block;
  flex-shrink: 0;
}

/* ============================================================
   Favorites — отдельный класс контейнера, чтобы не перебивался
   новой .vocab-grid сеткой
   ============================================================ */
.favorites-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.favorite-row {
  display: grid;
  grid-template-columns: 36px auto 1fr 1.4fr;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.favorite-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--hairline-strong);
}
.favorite-row__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--sumi-faint);
  letter-spacing: var(--tracking-wide);
}
.favorite-row__symbol {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: var(--fs-2xl);
  color: var(--sumi);
  line-height: 1;
  white-space: nowrap;
}
.favorite-row__readings {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.favorite-row__romaji {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--sumi-soft);
  font-style: italic;
}
.favorite-row__polivanov {
  font-size: var(--fs-sm);
  color: var(--sumi-mute);
}
.favorite-row__meaning {
  font-size: var(--fs-base);
  color: var(--sumi);
  line-height: var(--lh-normal);
}

@media (max-width: 700px) {
  .favorite-row {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "symbol readings"
      "symbol meaning";
    gap: var(--s-2) var(--s-4);
    padding: var(--s-4);
    align-items: start;
  }
  .favorite-row__num { display: none; }
  .favorite-row__symbol  { grid-area: symbol; align-self: center; }
  .favorite-row__readings { grid-area: readings; flex-direction: row; gap: var(--s-3); flex-wrap: wrap; }
  .favorite-row__meaning { grid-area: meaning; }
}

/* ============================================================
   Level description (под заголовком уровня)
   ============================================================ */
.level-description {
  margin: var(--s-3) 0 0 0;
  padding: var(--s-3) var(--s-4);
  background: var(--washi-soft);
  border-left: 3px solid var(--beni);
  border-radius: 0 8px 8px 0;
  font-size: var(--fs-sm);
  color: var(--sumi-soft);
  line-height: var(--lh-relaxed);
  max-width: 720px;
}

/* ============================================================
   Quiz: запрет копирования символа/перевода-промпта
   ============================================================ */
.ex-card__symbol,
.ex-card__symbol--word,
.ex-card__reading,
.ex-card__reading--prompt,
.option--word {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Lighter weight for kanji shown in the quiz card */
.ex-card__symbol {
  font-family: var(--font-jp) !important;
  font-weight: 500 !important;
}
.option--word {
  font-family: var(--font-jp) !important;
  font-weight: 500;
}

/* ex-card secondary line: kana + romaji + polivanov */
.ex-sub__kana   { font-family: var(--font-jp); color: var(--sumi-soft); margin-right: 6px; }
.ex-sub__romaji { font-style: italic; }
.ex-sub__divider { margin: 0 4px; color: var(--sumi-faint); }
.ex-sub__polivanov { color: var(--sumi-mute); }

.ex-card__reading-polivanov {
  margin: -8px 0 var(--s-4) 0;
  font-size: var(--fs-md);
  color: var(--sumi-mute);
  letter-spacing: 0;
}

/* ============================================================
   Landing — SRS section
   ============================================================ */
.srs-section {
  padding: var(--s-9) 0 var(--s-8) 0;
}
.srs-section__head {
  max-width: 760px;
  margin: 0 auto var(--s-7) auto;
  text-align: center;
}
.srs-section__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, 72px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: var(--s-3) 0 var(--s-3) 0;
  line-height: 1.05;
}
.srs-section__sub {
  max-width: 560px;
  margin: 0 auto;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.srs-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
}
.srs-step {
  position: relative;
  padding: var(--s-5);
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  transition: transform var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.srs-step:hover {
  transform: translateY(-4px);
  border-color: var(--beni);
  box-shadow: 0 16px 36px -22px rgba(202,36,36,.40);
}
.srs-step__num {
  font: 800 var(--fs-xs)/1 var(--font-display);
  letter-spacing: var(--tracking-wide);
  color: var(--beni);
  margin-bottom: 14px;
}
.srs-step__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--sumi);
  margin-bottom: 10px;
  line-height: var(--lh-snug);
}
.srs-step__desc {
  font-size: var(--fs-sm);
  color: var(--sumi-mute);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--s-4) 0;
}
.srs-step__chip {
  display: inline-block;
  padding: 4px 10px;
  background: var(--washi-deep);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font: 600 11px/1 var(--font-mono);
  color: var(--sumi-soft);
  letter-spacing: 0;
}

/* ============================================================
   Review-page: instruction list
   ============================================================ */
.info-card--review .info-card__body--steps {
  display: block;
  padding: var(--s-3) 18px var(--s-4) 18px;
}
.srs-help {
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: srs-help;
}
.srs-help li {
  position: relative;
  padding: 0 0 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--sumi-soft);
}
.srs-help li strong {
  color: var(--beni-deep);
  font-weight: 700;
  margin-right: 4px;
}
.srs-help li em {
  font-style: italic;
  color: var(--sumi);
}