/* ========================================================================
   LANDING — ISHO/KANJIKAZE inspired
   ======================================================================== */
.landing {
  position: relative;
  overflow: hidden;
}

.hero {
  position: relative;
  padding: var(--s-10) 0 var(--s-9);
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
}

.hero__grid {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--s-9); }
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.hero__eyebrow::before {
  content: "";
  width: 32px; height: 1px;
  background: var(--sumi);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 110px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--sumi);
  margin-bottom: var(--s-5);
}
.hero__title .accent {
  color: var(--beni);
  display: inline-block;
}
.hero__title .stamp-mark {
  display: inline-block;
  font-size: 0.35em;
  vertical-align: super;
  color: var(--beni);
  margin-left: 0.1em;
}

.hero__subtitle {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--sumi-soft);
  max-width: 460px;
  margin-bottom: var(--s-6);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
}

.hero__stats {
  display: flex;
  gap: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}
.hero__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero__stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-2xl);
  color: var(--sumi);
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero__stat-lbl {
  font-size: var(--fs-xs);
  color: var(--sumi-mute);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Hero visual side: large floating kanji + cat + tategaki */
.hero__visual {
  position: relative;
  height: 640px;
  min-height: 640px;
  display: grid;
  place-items: center;
  overflow: visible;
}

.hero__big-char {
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: clamp(320px, 34vw, 520px);
  color: var(--sumi);
  line-height: 0.85;
  position: relative;
  z-index: 1;
  transform: translateY(20px);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.hero__big-char::before {
  content: "";
  position: absolute;
  inset: -40px;
  border: 2px solid var(--beni);
  border-radius: 50%;
  z-index: -1;
  opacity: 0.4;
  animation: hero-circle 14s linear infinite;
}
@keyframes hero-circle {
  to { transform: rotate(360deg); }
}

.hero__tategaki {
  position: absolute;
  top: 0; right: 0;
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: var(--fs-md);
  letter-spacing: 0.15em;
  color: var(--sumi-mute);
  writing-mode: vertical-rl;
  padding: 0 var(--s-3);
  border-left: 1px solid var(--hairline-strong);
}

.hero__cat-spot {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 200px;
  z-index: 2;
  animation: floaty 5s ease-in-out infinite;
}
.hero__cat-spot svg { width: 100%; height: auto; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.hero__hanko-stamp {
  position: absolute;
  top: var(--s-6);
  right: var(--s-6);
  z-index: 3;
}

/* Pillars / value proposition section */
.pillars {
  padding: var(--s-9) 0;
  position: relative;
}
.pillars__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .pillars__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .pillars__grid { grid-template-columns: repeat(4, 1fr); } }

.pillar {
  padding: var(--s-6);
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  position: relative;
  overflow: hidden;
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.pillar:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.pillar__kana {
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  color: var(--washi-deep);
  position: absolute;
  top: -10px; right: -10px;
  transition: color var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
}
.pillar:hover .pillar__kana {
  color: var(--beni-tint);
  transform: rotate(-8deg) scale(1.1);
}
.pillar__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--beni);
  margin-bottom: var(--s-3);
  letter-spacing: var(--tracking-wider);
}
.pillar__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
  position: relative; z-index: 1;
}
.pillar__desc {
  font-size: var(--fs-sm);
  color: var(--sumi-mute);
  line-height: var(--lh-relaxed);
  position: relative; z-index: 1;
}

/* Showcase strip — moving kanji */
.showcase {
  padding: var(--s-7) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: var(--washi-deep);
  overflow: hidden;
  position: relative;
}
.showcase__track {
  display: flex;
  gap: var(--s-7);
  animation: marquee 40s linear infinite;
  width: max-content;
  align-items: center;
}
.showcase__char {
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: 96px;
  color: var(--sumi);
  line-height: 1;
  flex-shrink: 0;
}
.showcase__char span {
  color: var(--beni);
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* Path / how it works */
.path {
  padding: var(--s-9) 0;
}
.path__head {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-bottom: var(--s-7);
}
@media (min-width: 720px) {
  .path__head { grid-template-columns: 1fr 1fr; align-items: end; }
}
.path__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.path__steps {
  display: grid;
  gap: var(--s-3);
}
.step {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border-top: 1px solid var(--hairline);
  cursor: default;
  transition: background var(--d-base) var(--ease-out);
}
.step:hover { background: var(--washi-soft); }
.step:last-child { border-bottom: 1px solid var(--hairline); }
.step__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-2xl);
  color: var(--sumi-faint);
  letter-spacing: -0.02em;
  transition: color var(--d-base) var(--ease-out);
}
.step:hover .step__num { color: var(--beni); }
.step__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: -0.015em; }
.step__desc { font-size: var(--fs-sm); color: var(--sumi-mute); margin-top: 2px; }
.step__char {
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: 56px;
  color: var(--sumi);
  transition: transform var(--d-slow) var(--ease-spring);
}
.step:hover .step__char { transform: rotate(-6deg) scale(1.1); }

/* Cats section */
.cats {
  padding: var(--s-9) 0;
  background: var(--washi-deep);
  border-top: 1px solid var(--hairline);
  position: relative;
  overflow: hidden;
}
.cats__head {
  text-align: center;
  margin-bottom: var(--s-7);
}
.cats__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.04em; }
.cats__sub { color: var(--sumi-mute); margin-top: var(--s-3); }
.cats__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px) { .cats__grid { grid-template-columns: repeat(4, 1fr); } }

.cat-card {
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  padding: var(--s-5);
  text-align: center;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 260px;
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.cat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.cat-card.is-locked {
  opacity: 0.45;
  filter: grayscale(0.5);
}
.cat-card__art {
  width: 140px; height: 140px;
  margin: 0 auto var(--s-3);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.cat-card__art img,
.cat-card__art svg { width: 100%; height: 100%; object-fit: contain; }
.cat-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: -0.015em;
  margin-bottom: var(--s-2);
}
.cat-card__locked-tag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 10px;
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--washi-deep);
  color: var(--sumi-mute);
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.cat-card__cond {
  font-size: var(--fs-xs);
  color: var(--sumi-mute);
  line-height: var(--lh-normal);
  margin-top: auto;
}

/* CTA banner */
.cta-banner {
  padding: var(--s-9) 0;
  text-align: center;
  position: relative;
}
.cta-banner__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin-bottom: var(--s-5);
}
.cta-banner__title .accent { color: var(--beni); }
.cta-banner__sub {
  font-size: var(--fs-md);
  color: var(--sumi-mute);
  margin-bottom: var(--s-6);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================================================
   AUTH
   ======================================================================== */
.auth-shell {
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  padding: var(--s-7) var(--s-5);
  position: relative;
}
.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  padding: var(--s-7);
  position: relative;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.auth-card__decor {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: clamp(160px, 36vw, 240px);
  color: var(--washi-deep);
  line-height: 1;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0.55;
}
.auth-card > * { position: relative; z-index: 1; }
.auth-card__head { margin-bottom: var(--s-6); }
.auth-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-2xl);
  letter-spacing: -0.03em;
  margin-bottom: var(--s-2);
}
.auth-card__sub { color: var(--sumi-mute); font-size: var(--fs-sm); }
.auth-card__alt {
  margin-top: var(--s-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--sumi-mute);
}
.auth-card__alt a {
  color: var(--beni);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

/* ========================================================================
   MAP / WORLDS
   ======================================================================== */
.map-shell { padding: var(--s-7) 0 var(--s-9); }
.map-head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-7);
}
.map-head__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.04em;
  line-height: 1;
}
.map-head__sub { color: var(--sumi-mute); max-width: 540px; }

/* Рекомендательная подсказка под подзаголовком на карте обучения */
.map-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--washi-deep);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  max-width: 720px;
}
.map-hint__ico {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--beni);
}
.map-hint__text {
  font-size: var(--fs-sm);
  color: var(--sumi-soft);
  line-height: var(--lh-relaxed);
}
.map-hint__text strong { color: var(--sumi); }

.worlds {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .worlds { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .worlds { grid-template-columns: repeat(4, 1fr); } }

.world {
  --world-color: var(--sumi);
  --world-accent: var(--beni);
  position: relative;
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  padding: var(--s-6);
  min-height: 280px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.world:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--world-color);
}
.world__num {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  color: var(--sumi-mute);
}
.world__kana {
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: 200px;
  color: var(--world-color);
  position: absolute;
  bottom: -50px;
  right: -10px;
  line-height: 0.85;
  opacity: 0.08;
  transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
  pointer-events: none;
}
.world:hover .world__kana {
  opacity: 0.15;
  transform: scale(1.05) rotate(-3deg);
}
.world__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-xl);
  letter-spacing: -0.03em;
  margin: var(--s-3) 0 var(--s-2);
  position: relative; z-index: 1;
}
.world__desc {
  font-size: var(--fs-sm);
  color: var(--sumi-mute);
  line-height: var(--lh-normal);
  position: relative; z-index: 1;
}
.world__foot {
  position: relative; z-index: 1;
  margin-top: var(--s-5);
}
.world__progress { font-size: var(--fs-xs); color: var(--sumi-mute); margin-bottom: 6px; }

.world.is-locked {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.4);
}

/* Levels grid (per world) */
.levels-section { margin-top: var(--s-8); }
.levels-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .levels-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .levels-grid { grid-template-columns: repeat(3, 1fr); } }

.level-stone {
  position: relative;
  padding: var(--s-5);
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-4);
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.level-stone:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.level-stone__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: -0.015em; }
.level-stone__meta { font-size: var(--fs-xs); color: var(--sumi-mute); margin-top: 2px; }
.level-stone__char {
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: 48px;
  color: var(--sumi);
  line-height: 1;
}
.level-stone.is-done {
  border-color: var(--success);
  background: linear-gradient(180deg, rgba(79, 123, 61, 0.04), transparent 60%), var(--kinari);
}
.level-stone.is-done::after {
  content: "✓";
  position: absolute;
  top: 8px; right: 12px;
  color: var(--success);
  font-weight: 700;
}
.level-stone.is-locked {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.4);
}
.level-stone.is-locked .level-stone__meta { font-style: italic; }

/* ========================================================================
   LEVEL PAGE
   ======================================================================== */
.level-shell { padding: var(--s-6) 0 var(--s-9); }
.level-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-6);
  gap: var(--s-4);
}
.level-head__back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--sumi-mute);
}
.level-head__back:hover { color: var(--sumi); }

.level-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 56px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: var(--s-2);
}
.level-meta { color: var(--sumi-mute); }

.char-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  margin: var(--s-6) 0;
}

.char-card {
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  padding: var(--s-5);
  text-align: center;
  position: relative;
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
  cursor: pointer;
}
.char-card:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: var(--shadow-md);
  border-color: var(--sumi-mute);
}
.char-card__symbol {
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: 80px;
  line-height: 1;
  color: var(--sumi);
  margin-bottom: var(--s-3);
}
.char-card__reading {
  font-size: var(--fs-md);
  color: var(--sumi-soft);
  margin-bottom: 2px;
  font-weight: 600;
}
.char-card__meaning {
  font-size: var(--fs-xs);
  color: var(--sumi-mute);
}

.char-card__corner {
  position: absolute;
  top: 8px; left: 12px;
  font-size: var(--fs-xs);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--sumi-faint);
}

/* === VOCAB rows: horizontal layout === */
.vocab-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: var(--s-6) 0;
}
.vocab-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);
}
.vocab-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--hairline-strong);
}
.vocab-row__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--sumi-faint);
  letter-spacing: var(--tracking-wide);
}
.vocab-row__symbol {
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: var(--fs-2xl);
  color: var(--sumi);
  line-height: 1;
  white-space: nowrap;
}
.vocab-row__readings {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vocab-row__romaji {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--sumi-soft);
  font-style: italic;
}
.vocab-row__polivanov {
  font-size: var(--fs-sm);
  color: var(--sumi-mute);
}
.vocab-row__meaning {
  font-size: var(--fs-base);
  color: var(--sumi);
  line-height: var(--lh-normal);
}

/* Stroke demo modal-card */
.stroke-modal {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 26, 0.5);
  display: grid;
  place-items: center;
  z-index: var(--z-modal);
  padding: var(--s-5);
  animation: fadein var(--d-base) var(--ease-out);
}
.stroke-modal__card {
  width: 100%;
  max-width: 540px;
  background: var(--kinari);
  border-radius: var(--r-4);
  padding: var(--s-6);
  position: relative;
  animation: slidein var(--d-slow) var(--ease-spring);
}
.stroke-modal__close {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 18px;
  background: var(--washi-deep);
  transition: background var(--d-base);
}
.stroke-modal__close:hover { background: var(--beni); color: var(--kinari); }

.stroke-canvas {
  width: 100%;
  aspect-ratio: 1;
  background: var(--washi-soft);
  border-radius: var(--r-3);
  border: 1px solid var(--hairline);
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(202, 36, 36, 0.08) 1.5px, transparent 1.5px);
  background-size: 50% 50%, 50% 50%, 100% 100%;
  background-position: center;
}
.stroke-controls {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-4);
  justify-content: center;
}

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes slidein {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ========================================================================
   EXERCISES
   ======================================================================== */
.exercise-shell {
  min-height: calc(100vh - var(--header-h));
  padding: var(--s-7) 0;
  display: flex;
  flex-direction: column;
}

.ex-header {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}
.ex-progress {
  flex: 1;
  height: 4px;
  background: var(--washi-deep);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.ex-progress > span {
  display: block; height: 100%;
  background: var(--sumi);
  transition: width var(--d-slow) var(--ease-out);
}
.ex-counter {
  font-size: var(--fs-sm);
  color: var(--sumi-mute);
  font-weight: 600;
  min-width: 56px;
  text-align: right;
}
.ex-quit {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--washi-deep);
  display: grid; place-items: center;
  transition: background var(--d-base), transform var(--d-base);
}
.ex-quit:hover { background: var(--sumi); color: var(--kinari); transform: rotate(90deg); }

.ex-stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--s-7) var(--s-5);
}
.ex-card {
  width: 100%;
  max-width: 560px;
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  padding: var(--s-7);
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-md);
  animation: slidein var(--d-slow) var(--ease-spring);
}
.ex-card__prompt {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--sumi-mute);
  margin-bottom: var(--s-3);
}
.ex-card__symbol {
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: clamp(120px, 18vw, 200px);
  line-height: 1;
  color: var(--sumi);
  margin: var(--s-4) 0 var(--s-6);
}
.ex-card__reading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-3xl);
  letter-spacing: -0.03em;
  color: var(--sumi);
  margin: var(--s-4) 0 var(--s-6);
}
/* Vocab quiz: smaller word + romaji underneath */
.ex-card__symbol--word {
  font-size: clamp(48px, 8vw, 80px);
  margin: var(--s-3) 0 var(--s-2);
  line-height: 1.1;
}
.ex-card__sub-romaji {
  font-size: var(--fs-sm);
  font-style: italic;
  margin: 0 0 var(--s-5);
  color: var(--sumi-mute);
}
/* Vocab reverse/typing: Russian translation as the prompt — tighter scale */
.ex-card__reading--prompt {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: var(--s-3) 0 var(--s-5);
  line-height: 1.15;
}
/* Word-as-option: use JP font, larger */
.option--word {
  font-family: var(--font-display-jp);
  font-size: var(--fs-xl);
}
/* Text-as-option: smaller, regular font, single column on mobile */
.option--text {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  text-align: center;
  line-height: var(--lh-snug);
  padding: var(--s-4);
}

.options {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr 1fr;
}
.option {
  padding: var(--s-5);
  background: var(--washi-soft);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-3);
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: var(--fs-lg);
  color: var(--sumi);
  cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out),
              border-color var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out);
}
.option:hover {
  transform: translateY(-2px);
  border-color: var(--sumi);
  background: var(--kinari);
}
.option.is-correct { background: rgba(79, 123, 61, 0.15); border-color: var(--success); }
.option.is-wrong   { background: rgba(178, 46, 46, 0.12); border-color: var(--danger); }
.option.is-disabled { pointer-events: none; opacity: 0.5; }

.typing-input {
  width: 100%;
  padding: var(--s-5);
  background: var(--washi-soft);
  border: 1.5px solid var(--hairline);
  border-radius: var(--r-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-xl);
  text-align: center;
  letter-spacing: 0.02em;
}
.typing-input.is-correct { border-color: var(--success); background: rgba(79, 123, 61, 0.08); }
.typing-input.is-wrong   { border-color: var(--danger); background: rgba(178, 46, 46, 0.08); animation: shake 320ms var(--ease-out); }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

.ex-feedback {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-3);
  font-size: var(--fs-sm);
  text-align: center;
  display: none;
}
.ex-feedback.is-shown { display: block; animation: slidein var(--d-base) var(--ease-spring); }
.ex-feedback.is-correct { background: rgba(79, 123, 61, 0.1); color: var(--success); }
.ex-feedback.is-wrong   { background: rgba(178, 46, 46, 0.08); color: var(--danger); }

.ex-result {
  text-align: center;
  padding: var(--s-7) var(--s-5);
}
.ex-result__hanko { margin: 0 auto var(--s-5); --hanko-size: 120px; }
.ex-result__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-3xl); letter-spacing: -0.035em; margin-bottom: var(--s-3); }
.ex-result__stats {
  display: flex;
  justify-content: center;
  gap: var(--s-7);
  margin: var(--s-6) 0;
}
.ex-result__stat-num { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); letter-spacing: -0.025em; color: var(--sumi); }
.ex-result__stat-lbl { font-size: var(--fs-xs); color: var(--sumi-mute); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

/* Exercise type picker (on level page) */
.ex-picker {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  margin: var(--s-6) 0;
}
@media (min-width: 720px) { .ex-picker { grid-template-columns: repeat(3, 1fr); } }

.ex-tile {
  padding: var(--s-6);
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
}
.ex-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--sumi);
}
.ex-tile__icon {
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: 56px;
  color: var(--beni);
  line-height: 1;
  margin-bottom: var(--s-3);
}
.ex-tile__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); letter-spacing: -0.015em; margin-bottom: 2px; }
.ex-tile__desc { font-size: var(--fs-xs); color: var(--sumi-mute); }
.ex-tile__mult {
  position: absolute; top: var(--s-4); right: var(--s-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--beni);
}

/* ========================================================================
   PROFILE
   ======================================================================== */
.profile-shell { padding: var(--s-7) 0 var(--s-9); }
.profile-grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: 1fr;
}
@media (min-width: 960px) { .profile-grid { grid-template-columns: 320px 1fr; } }

.profile-card {
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  padding: var(--s-6);
  text-align: center;
  position: relative;
}
.profile-avatar {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--washi-deep), var(--kinari));
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  color: var(--sumi);
  margin: 0 auto var(--s-4);
  border: 1px solid var(--hairline);
}
.profile-name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.025em; }
.profile-since { font-size: var(--fs-xs); color: var(--sumi-mute); margin-top: 4px; }

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.stat-block {
  padding: var(--s-4);
  background: var(--washi-soft);
  border-radius: var(--r-2);
}
.stat-block__num { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); letter-spacing: -0.025em; color: var(--sumi); }
.stat-block__lbl { font-size: var(--fs-xs); color: var(--sumi-mute); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

.profile-section {
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: var(--r-4);
  padding: var(--s-6);
}
.profile-section__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  margin-bottom: var(--s-5);
  display: flex; align-items: center; gap: var(--s-3);
}
.profile-section__title::before {
  content: ""; width: 6px; height: 24px; background: var(--beni); border-radius: 2px;
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--s-4);
}
.achievement {
  text-align: center;
  padding: var(--s-4);
  border-radius: var(--r-2);
  background: var(--washi-soft);
  transition: transform var(--d-base) var(--ease-out);
}
.achievement:hover { transform: translateY(-3px) rotate(-2deg); }
.achievement.is-locked { opacity: 0.4; filter: grayscale(1); }
.achievement__icon {
  font-size: 36px;
  margin-bottom: var(--s-2);
}
.achievement__name { font-size: var(--fs-xs); font-weight: 600; }

/* Leaderboard */
.leader-table {
  width: 100%;
  border-collapse: collapse;
}
.leader-table th, .leader-table td {
  text-align: left;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--hairline);
  font-size: var(--fs-sm);
}
.leader-table th {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--sumi-mute);
  font-weight: 600;
}
.leader-table tr:hover td { background: var(--washi-soft); }
.leader-table .rank-1 { color: var(--beni); font-family: var(--font-display); font-size: var(--fs-lg); }
.leader-table .rank-2 { color: var(--kogane); font-family: var(--font-display); font-size: var(--fs-md); }
.leader-table .rank-3 { color: var(--indigo); font-family: var(--font-display); font-size: var(--fs-md); }

/* ========================================================================
   SEARCH (Jisho)
   ======================================================================== */
.search-shell { padding: var(--s-7) 0 var(--s-9); }
.search-bar {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.search-bar .input { flex: 1; }

.search-result {
  background: var(--kinari);
  border: 1px solid var(--hairline);
  border-radius: var(--r-3);
  padding: var(--s-5);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s-5);
  align-items: center;
  margin-bottom: var(--s-3);
  transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base);
}
.search-result:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.search-result__symbol {
  font-family: var(--font-display-jp);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
}
.search-result__reading { font-weight: 600; color: var(--sumi-soft); margin-bottom: 4px; }
.search-result__meaning { font-size: var(--fs-sm); color: var(--sumi-mute); }
.fav-toggle {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--washi-deep);
  font-size: 18px;
  transition: background var(--d-base), transform var(--d-base);
}
.fav-toggle:hover { transform: scale(1.1); background: var(--beni-tint); }
.fav-toggle.is-fav { background: var(--beni); color: var(--kinari); }

/* ========================================================================
   TABLET RESPONSIVE — 768–1023 px.
   На планшете .container-page max-width=1440, поэтому контейнер
   занимает всю ширину окна. Секции .pillars/.path/.cats/.cta-banner
   зануляют горизонтальный паддинг своим `padding: var(--s-9) 0`,
   и контент упирается в края. Принудительно возвращаем отступы.
   ======================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .container,
  .container-page,
  .container-wide,
  .container-narrow {
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box !important;
  }
}

/* ========================================================================
   MOBILE RESPONSIVE — applied below 768px
   ======================================================================== */
@media (max-width: 767px) {
  /* === GLOBAL MOBILE PADDING — guarantees breathing room everywhere === */
  .container,
  .container-page,
  .container-wide,
  .container-narrow {
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  /* Allow flex/grid children with text to shrink and wrap properly */
  .row-between > *,
  .path__head > *,
  .hero__grid > * {
    min-width: 0 !important;
  }

  /* Force long headings to wrap instead of overflowing */
  h1, h2, h3,
  .hero__title,
  .path__title,
  .map-head__title,
  .level-title,
  .auth-card__title,
  .cats__title,
  .cta-banner__title {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* Tighter inline-styled section headlines so they don't break out */
  .pillars h2,
  .path h2,
  .cats h2 {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.05;
  }

  /* Cards: keep internal padding sane (cards already inside the 24px container) */
  .pillar { padding: var(--s-5); }
  .world { padding: var(--s-5); }
  .level-stone { padding: var(--s-4); }
  .profile-card,
  .profile-section { padding: var(--s-5); }
  .auth-card { padding: var(--s-5); }
  .ex-card { padding: var(--s-5); }
  .vocab-row { padding: var(--s-4); }

  /* Hero — hide visual on mobile entirely, focus on text */
  .hero { padding: var(--s-6) 0 var(--s-5); min-height: auto; }
  .hero__visual { display: none; }
  .hero__title { letter-spacing: -0.04em; font-size: clamp(40px, 11vw, 60px); }
  .hero__subtitle { font-size: var(--fs-base); }

  /* === Consistent landing alignment: stack heads, left-align everything === */
  .row-between { flex-wrap: wrap; }
  .row-between > p,
  .path__head > p,
  .pillars > .row-between > p {
    text-align: left !important;
    justify-self: start !important;
    max-width: 100% !important;
  }
  .path__head { grid-template-columns: 1fr !important; }
  .path__title { font-size: clamp(34px, 9vw, 48px); }
  .pillar { padding: var(--s-5); }

  /* Cats grid on mobile: 2 columns, equal sizing */
  .cats__grid { gap: var(--s-3); }
  .cat-card { min-height: 220px; padding: var(--s-4); }
  .cat-card__art { width: 100px; height: 100px; }
  .cat-card__name { font-size: var(--fs-base); }

  /* === VOCAB rows on mobile === */
  .vocab-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "symbol"
      "readings"
      "meaning";
    gap: var(--s-2);
    padding: var(--s-4);
    text-align: left;
  }
  .vocab-row__num { display: none; }
  .vocab-row__symbol {
    grid-area: symbol;
    font-size: var(--fs-2xl);
  }
  .vocab-row__readings { grid-area: readings; flex-direction: row; gap: var(--s-3); flex-wrap: wrap; }
  .vocab-row__meaning {
    grid-area: meaning;
    padding-top: var(--s-3);
    border-top: 1px solid var(--hairline);
    font-size: var(--fs-sm);
  }

  /* === Vocab quiz: options in a single column so words fit one line === */
  .options--text {
    grid-template-columns: 1fr;
    gap: var(--s-2);
  }
  .option--text {
    font-size: var(--fs-sm);
    padding: var(--s-3) var(--s-4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
  }
  .options--word {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
  }
  .option--word {
    font-size: var(--fs-md);
    padding: var(--s-3);
  }
  .ex-card__symbol--word { font-size: clamp(36px, 9vw, 56px); }
  .ex-card__reading--prompt {
    font-size: clamp(22px, 6vw, 32px);
  }

  /* Level header on mobile: compact */
  .level-title { font-size: clamp(28px, 7vw, 36px); line-height: 1.1; }
  .level-head { gap: var(--s-3); }

  /* Auth card on mobile: tighter */
  .auth-shell { padding: var(--s-5) var(--s-4); }
  .auth-card { padding: var(--s-5); }
  .auth-card__head { margin-bottom: var(--s-4); }
  .auth-card__title { font-size: var(--fs-xl); }
  .field-row { grid-template-columns: 1fr; }

  /* === Leaderboard on mobile: clean, aligned === */
  .leader-table { table-layout: fixed; width: 100%; }
  .leader-table th:nth-child(1) { width: 32px; }
  .leader-table th:nth-child(2) { width: auto; }
  .leader-table th:nth-child(3),
  .leader-table td:nth-child(3) { display: none; }     /* hide "Уровень" */
  .leader-table th:nth-child(4) { width: 64px; text-align: right; }
  .leader-table td:nth-child(4) { text-align: right; }
  .leader-table th:nth-child(5) { width: 48px; text-align: right; }
  .leader-table td:nth-child(5) { text-align: right; }
  .leader-table td a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
  }
  .leader-table .chip {
    font-size: 10px;
    padding: 2px 6px;
  }

  /* Pillars / path / cats / cta — tighter padding */
  .pillars { padding: var(--s-7) 0; }
  .path { padding: var(--s-7) 0; }
  .cats { padding: var(--s-7) 0; }
  .cta-banner { padding: var(--s-7) 0; }

  /* Steps */
  .step {
    grid-template-columns: 44px 1fr;
    gap: var(--s-3);
    padding: var(--s-4) 0;
  }
  .step__char { display: none; }
  .step__num { font-size: var(--fs-xl); }

  /* Map / level / profile / search shells — keep horizontal padding,
     don't zero-out left/right via the `padding: A 0 B` shorthand */
  .map-shell, .level-shell, .profile-shell, .search-shell {
    padding-top: var(--s-5);
    padding-bottom: var(--s-7);
  }
  .map-head { margin-bottom: var(--s-5); }

  /* Worlds */
  .world { padding: var(--s-5); min-height: 220px; }
  .world__kana { font-size: 140px; }

  /* Level page */
  .level-head { flex-wrap: wrap; gap: var(--s-2); }
  .char-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--s-3);
  }
  .char-card { padding: var(--s-4); }
  .char-card__symbol { font-size: 56px; }

  /* Exercise */
  .exercise-shell { padding: var(--s-5) 0; }
  .ex-card { padding: var(--s-5); }
  .ex-card__symbol {
    font-size: clamp(72px, 22vw, 140px);
    margin: var(--s-3) 0 var(--s-5);
  }
  .ex-card__reading {
    font-size: var(--fs-2xl);
    margin: var(--s-3) 0 var(--s-5);
  }
  .options { gap: var(--s-3); }
  .option { padding: var(--s-4); font-size: var(--fs-md); }
  .ex-result__stats { gap: var(--s-4); flex-wrap: wrap; }
  .typing-input { padding: var(--s-4); font-size: var(--fs-lg); }

  /* Auth */
  .auth-card { padding: var(--s-5); }
  .auth-card__decor { display: none; }
  .auth-card__title { font-size: var(--fs-xl); }

  /* Profile */
  .profile-card { padding: var(--s-5); }
  .profile-avatar { width: 96px; height: 96px; font-size: 44px; }
  .profile-section { padding: var(--s-5); }
  .stat-grid { grid-template-columns: 1fr 1fr; }

  /* Search results — stack the favorite button below */
  .search-result {
    grid-template-columns: 56px 1fr;
    gap: var(--s-3);
    padding: var(--s-4);
  }
  .search-result__symbol { font-size: 44px; }
  .search-result .fav-toggle {
    grid-column: 2;
    justify-self: end;
    margin-top: var(--s-2);
  }
  .search-bar { flex-wrap: wrap; gap: var(--s-2); }

  /* Leaderboard — hide the "Уровень" column to save space */
  .leader-table th, .leader-table td {
    padding: var(--s-2) var(--s-3);
    font-size: var(--fs-xs);
  }
  .leader-table th:nth-child(3),
  .leader-table td:nth-child(3) { display: none; }

  /* Stroke modal */
  .stroke-modal__card { padding: var(--s-5); }
  .stroke-controls { flex-wrap: wrap; }
}

/* ========================================================================
   JP DISPLAY FONT — нативный вес Mochiy Pop One = 400.
   Раньше тут стояло 700 !important + font-synthesis, и браузер
   синтезировал faux-bold — глифы выходили «размазанные».
   Теперь рендерим как есть: чище и легче читать.
   ======================================================================== */
.brand__kanji,
.brand__kanji-first,
.hero__big-char,
.hero__tategaki,
.pillar__kana,
.step__char,
.showcase__char,
.world__kana,
.char-card__symbol,
.level-stone__char,
.ex-card__symbol,
.ex-card__symbol--word,
.ex-tile__icon,
.kanji-display,
.auth-card__decor,
.search-result__symbol,
.vocab-row__symbol,
.option--word,
.font-jp-display,
.hanko {
  font-weight: 400 !important;
  font-synthesis: none;
  -webkit-font-synthesis: none;
}

/* ========================================================================
   GLOBAL SIDE BREATHING — гарантирует, что контент никогда не прилипает
   к краям viewport, на любом разрешении. Перекрывает «нулевой» горизонтальный
   паддинг секций (.pillars, .path, .cats, .cta-banner — они задают
   `padding: var(--s-9) 0` шорткатом).
   clamp(24, 4vw, 56): 24px на мобилке → ~40px на планшете → 56px на больших.
   ======================================================================== */
.container,
.container-page,
.container-wide,
.container-narrow {
  padding-left: clamp(24px, 4vw, 56px) !important;
  padding-right: clamp(24px, 4vw, 56px) !important;
  box-sizing: border-box !important;
}

/* ========================================================================
   TABLET (768–1023 px) — скрываем визуальную композицию hero (иероглиф 猫,
   ханко 先生, котик). На планшете она лезет под текст и режется.
   Hero становится одноколоночным, как на мобилке.
   ======================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__visual { display: none !important; }
  .hero__grid { grid-template-columns: 1fr !important; gap: var(--s-5) !important; }
  .hero { min-height: auto; padding: var(--s-7) 0 var(--s-6); }
}

/* MARKER-NEKOSENSEI-2026-06-04 */