:root {
  --bg: #14141c;
  --bg2: #1b1b26;
  --card: #232330;
  --card2: #2b2b3c;
  --text: #e9e9f1;
  --muted: #9c9cb4;
  --line: #ffffff14;
  --accent: #e63946;      /* roșu sigiliu japonez */
  --accent2: #7aa2f7;
  --good: #5dbb63;
  --bad: #e05555;
  --radius: 14px;
  --jp: "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", "Meiryo", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

/* scrollbar discret, întunecat */
html { scrollbar-width: thin; scrollbar-color: #3c3c50 transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3c3c50; border-radius: 8px; border: 2px solid #14141c; }
::-webkit-scrollbar-thumb:hover { background: #4d4d64; }

body {
  min-height: 100vh; min-height: 100dvh;
  background:
    radial-gradient(1100px 500px at 85% -10%, #e6394611, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #7aa2f70d, transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex; flex-direction: column;
  overscroll-behavior: none;
}

/* ═══════════ Navbar ═══════════ */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: #14141ce8;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  max-width: 1180px; margin: 0 auto; padding: 10px 16px;
  display: flex; align-items: center; gap: 14px;
}
@media (min-width: 1500px) { .topbar-inner { max-width: 1520px; } } /* aliniat cu lățimea lui main + rail reclamă */
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-badge {
  font-family: var(--jp); background: var(--accent); color: #fff;
  border-radius: 10px; padding: 5px 8px; font-size: 1rem; font-weight: 700;
  box-shadow: 0 2px 10px #e6394655;
}
.brand-name { font-weight: 800; font-size: 1.1rem; line-height: 1.1; display: flex; flex-direction: column; }
.brand-name small { font-weight: 500; font-size: .62rem; color: var(--muted); letter-spacing: .06em; }

/* nav = un singur rând care nu se rupe; se poate strânge (min-width:0) în loc să lățească pagina;
   overflow-x:auto e plasă de siguranță (nu se activează între 860–1600) */
.mainnav {
  display: flex; gap: 4px; flex: 1; min-width: 0;
  flex-wrap: nowrap; justify-content: center;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.mainnav::-webkit-scrollbar { display: none; }
.nav-link {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: transparent; border: 0; color: var(--muted);
  font: 600 .9rem/1 inherit; font-family: inherit;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  white-space: nowrap; /* eticheta (japoneză + traducere) rămâne pe câte un rând, fără rupere per-glif */
  position: relative; transition: color .15s, background .15s;
}
.nav-link svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.nav-link:hover { color: var(--text); background: #ffffff0a; }
.nav-link.active { color: #fff; background: #ffffff0f; }
.nav-link.active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--accent);
}
/* etichetă stivuită compactă în nav: japoneza sus / traducerea dedesubt, ambele pe câte un rând */
.nav-link .ui-dual { line-height: 1.12; white-space: nowrap; }
.nav-link .ui-sub { line-height: 1.1; margin-top: 0; white-space: nowrap; }
.nav-link span[data-i18n] { white-space: nowrap; }

.topbar-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
/* în modul japoneză/dual, butonul 漢 arată doar glifa (fără glosul lung „ほんもの（かんじ）") ca să încapă navul cu tot cu japoneză */
body.uimode-dual #scriptToggle button[data-script="j"] .seg-label,
body.uimode-jp   #scriptToggle button[data-script="j"] .seg-label { display: none; }
.seg { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg button {
  border: 0; background: transparent; color: var(--muted);
  padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.seg button.active { background: var(--accent); color: #fff; }
.seg-lang button.active { background: var(--accent2); color: #14141c; }
.seg.dim { opacity: .4; }

.quiz-exit {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; font-size: .85rem;
}
.quiz-exit:hover { color: var(--bad); border-color: var(--bad); }
#quizRun, #stepQuiz { position: relative; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { color: var(--text); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════ Layout ═══════════ */
main { flex: 1; padding: 20px 16px 40px; max-width: 1180px; margin: 0 auto; width: 100%; }
.view { display: none; }
.view.active { display: block; }

/* ═══════ Reclame: rail lateral pe ecrane late, banner pe ecrane înguste/telefon ═══════ */
.ad-slot { position: relative; display: flex; align-items: center; justify-content: center;
  border: 1px dashed #ffffff1c; border-radius: 14px; background: #ffffff06; }
.ad-slot .ad-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #ffffff2e; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; pointer-events: none; }
.ad-slot ins.adsbygoogle { position: relative; z-index: 1; }
.ad-slot.filled { border: 0; background: transparent; } /* reclamă reală umplută → fără chenar */
.ad-slot.filled .ad-ph { display: none; }             /* … și fără placeholder */
.ad-slot-v { width: 300px; min-height: 600px; }
.ad-slot-v .ad-ph { writing-mode: vertical-rl; }
.ad-slot-h { width: 100%; min-height: 90px; }

/* banner orizontal — implicit vizibil (ecrane înguste + telefon), în josul conținutului */
.ad-banner { display: block; max-width: 728px; margin: 10px auto 4px; }
/* rail lateral — doar când e loc în spațiul mort (≥1500px) */
.ad-rail { display: none; }
@media (min-width: 1500px) {
  main { max-width: 1520px; display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: start; }
  .view { grid-column: 1; }
  .ad-rail { display: block; grid-column: 2; grid-row: 1; position: sticky; top: 76px; }
  .ad-banner { display: none; } /* pe ecran lat reclama stă în rail-ul lateral, nu jos */
}
h2 { margin-bottom: 12px; }
h3 { margin: 22px 0 8px; color: var(--muted); font-size: .95rem; }
.panel {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 18px;
  padding: 20px; max-width: 640px; margin: 0 auto;
}

/* ═══════════ Intro ═══════════ */
.intro-card {
  background: linear-gradient(135deg, #262637, #1f1f2e);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 18px; font-size: .92rem; line-height: 1.6;
  max-width: 900px;
}
.intro-card b { color: var(--accent2); }
.intro-close {
  display: inline-block; margin-top: 10px; background: var(--accent); color: #fff;
  border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer; font-family: inherit;
}

/* ═══════════ Sub-meniu Învață (Alfabet + lecții) ═══════════ */
.learn-nav {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px;
  margin-bottom: 12px; scrollbar-width: none; flex-wrap: nowrap;
}
.learn-nav::-webkit-scrollbar { display: none; }
@media (min-width: 821px) {
  /* pe desktop: învelește toate lecțiile pe mai multe rânduri, fără scroll lateral */
  .learn-nav { flex-wrap: wrap; overflow-x: visible; }
}
.learn-chip {
  flex-shrink: 0; background: var(--card); color: var(--muted);
  border: 1px solid var(--line); border-radius: 16px; padding: 6px 14px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
  display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.15;
}
.learn-chip .lc-jp { font-family: var(--jp); font-size: 1rem; font-weight: 700; }
.learn-chip .lc-tr { font-size: .68rem; font-weight: 600; opacity: .85; }
.learn-chip:hover { color: var(--text); }
.learn-chip.active { background: var(--accent); color: #fff; border-color: transparent; }

#learnLesson { max-width: 1060px; }
.lesson-intro { color: var(--muted); font-size: .92rem; line-height: 1.5; margin: 4px 0 10px; font-style: italic; max-width: 900px; }
#lessonBody h3 { margin: 20px 0 8px; color: var(--accent2); font-size: .95rem; }
.lesson-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 8px; align-items: start; }

/* widgete interactive */
.widget {
  background: linear-gradient(135deg, #262637, #201f2e); border: 1px solid #7a5cff2e;
  border-radius: 16px; padding: clamp(16px, 3vw, 28px); margin: 0 auto 16px; width: 100%; max-width: min(100%, 720px);
  text-align: center;
}
.widget-title { font-weight: 700; color: #b8a6ff; font-size: .95rem; margin-bottom: 12px; }
.num-input {
  width: clamp(160px, 50%, 260px); text-align: center; font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 700;
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 10px; font-family: inherit;
}
.num-result { margin: 12px 0 4px; min-height: 2.4em; }
.nr-kana { font-family: var(--jp); font-size: clamp(1.9rem, 5vw, 2.8rem); line-height: 1.2; color: #fff; }
.nr-r { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.widget-btns { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.widget-hint { color: var(--muted); font-size: .76rem; margin-top: 10px; }
.clock-wrap { display: flex; justify-content: center; }
#clockSvg { width: clamp(200px, 55vw, 320px); height: clamp(200px, 55vw, 320px); }
.clock-ctrl { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 12px 0 4px; }
.stepper { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px; }
.stepper span { font-size: .85rem; color: var(--muted); min-width: 74px; }
.stepper span b { color: var(--text); font-size: 1.05rem; }
.stepper button {
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent2); color: #101018; font-size: 1.2rem; font-weight: 700; line-height: 1;
}

/* demonstrative — scena cu distanță */
.demo-widget { max-width: 560px; }
.demo-scene { position: relative; height: clamp(130px, 24vw, 200px); margin: 6px 0 4px; }
.demo-line { position: absolute; left: 2%; right: 2%; top: 86px; height: 2px; background: linear-gradient(90deg, #7aa2f7, #e63946); border-radius: 2px; opacity: .5; }
.demo-person { position: absolute; top: 60px; transform: translateX(-50%); text-align: center; }
.demo-person .dp-dot { display: inline-block; font-family: var(--jp); font-size: .82rem; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 3px 7px; }
.demo-person .dp-dot.ko { border-color: #7aa2f7; }
.demo-person .dp-dot.so { border-color: #f0c34a; }
.demo-person small { display: block; color: var(--muted); font-size: .68rem; margin-top: 2px; }
.demo-obj { position: absolute; top: 6px; transform: translateX(-50%); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; cursor: pointer; }
.demo-obj b { font-family: var(--jp); font-size: 1.25rem; font-weight: 400; }
.demo-obj.far { opacity: .68; transform: translateX(-50%) scale(.82); }
.demo-obj.sel { border-color: var(--accent); background: #e6394622; opacity: 1; }
.demo-obj::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 22px; background: var(--line); transform: translateX(-50%); }

/* direcții — cruce */
.dir-cross { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, auto); gap: 6px; max-width: clamp(300px, 70%, 460px); margin: 8px auto; }
.dir-btn { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 4px; cursor: pointer; color: var(--text); font-family: inherit; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.dir-btn .da { color: var(--accent2); font-size: 1.1rem; line-height: 1; }
.dir-btn b { font-family: var(--jp); font-size: 1.05rem; font-weight: 400; }
.dir-btn small { color: var(--muted); font-size: .68rem; }
.dir-btn:hover { border-color: #ffffff30; }
.dir-btn.up { grid-column: 2; grid-row: 1; } .dir-btn.left { grid-column: 1; grid-row: 2; }
.dir-btn.right { grid-column: 3; grid-row: 2; } .dir-btn.down { grid-column: 2; grid-row: 3; }
.dir-center { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 10px; font-family: var(--jp); font-size: 1.05rem; }
.dir-center small { font-family: system-ui, sans-serif; font-size: .62rem; opacity: .85; }
.dir-extra { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }
.dir-chip { padding: 6px 10px; font-size: .82rem; }
.dir-chip b { font-family: var(--jp); font-weight: 400; }

/* anotimpuri — carduri colorate */
.season-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.season-card { background: var(--card); border: 2px solid var(--sc); border-radius: 12px; padding: 12px 4px; cursor: pointer; color: var(--text); font-family: inherit; }
.season-card b { display: block; font-family: var(--jp); font-size: 1.5rem; font-weight: 400; color: var(--sc); }
.season-card small { color: var(--muted); font-size: .74rem; }
.season-card.sel { background: color-mix(in srgb, var(--sc) 22%, transparent); }
@media (max-width: 420px) { .season-grid { grid-template-columns: repeat(2, 1fr); } }

/* culori — pastile cu bulină colorată */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.color-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 6px 8px; cursor: pointer; color: var(--text); font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.color-card:hover { border-color: #ffffff30; }
.color-card.sel { border-color: var(--accent2); background: #7aa2f722; }
.color-dot { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #ffffff30; }
.color-card b { font-family: var(--jp); font-size: 1.05rem; font-weight: 400; }
.color-card small { color: var(--muted); font-size: .72rem; }
.lesson-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 7px; cursor: pointer;
}
.lesson-row:hover { border-color: #ffffff2c; }
.lesson-row .lr-txt { min-width: 0; }
.lesson-row .lr-jp { font-family: var(--jp); font-size: 1.35rem; line-height: 1.25; }
.lesson-row .lr-r { color: var(--muted); font-size: .78rem; margin-top: 1px; }
.lesson-row .lr-note { color: #d8b44a; font-size: .74rem; margin-top: 3px; line-height: 1.35; }
.lesson-row .lr-tr { margin-left: auto; color: var(--accent2); font-size: .92rem; text-align: right; }
.lesson-row .chip-icon { flex-shrink: 0; }
.lesson-row.has-vis { padding-left: 10px; }
.lr-dot { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; border: 1px solid #ffffff33; box-shadow: 0 0 0 3px #ffffff08; }
.lr-arrow { width: 26px; text-align: center; font-size: 1.25rem; line-height: 1; color: #8ea2ff; flex: 0 0 auto; font-weight: 700; }
.nr-tr { color: #c9d2f0; font-size: .92rem; margin-top: 4px; }

/* ═══════════ Kanji (cu furigana) ═══════════ */
.kanji-search { margin: 2px 0 14px; }
.kanji-search input { width: 100%; max-width: 440px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font-size: .95rem; }
.kanji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.kanji-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.kanji-head { display: flex; align-items: baseline; gap: 12px; }
.kanji-audio { margin-left: auto; flex: 0 0 auto; align-self: center; }
.write-set-row { display: flex; justify-content: center; margin-bottom: 12px; }
.seg.write-set button { font-family: var(--jp); }
.kanji-char { font-family: var(--jp); font-size: 2.6rem; line-height: 1; color: #fff; }
.kanji-mean { color: var(--accent2); font-size: 1rem; }
.kanji-read { color: var(--muted); font-size: .82rem; margin: 8px 0 10px; font-family: var(--jp); }
.kr-lab { display: inline-block; background: #ffffff14; border-radius: 5px; padding: 0 5px; font-size: .72rem; color: #cfd6f0; margin-right: 2px; }
.kanji-note { color: #cdb87a; font-size: .82rem; line-height: 1.45; margin: 4px 0 10px; }
.kanji-ex-wrap { display: flex; flex-direction: column; gap: 6px; }
.kanji-ex { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 6px 10px; cursor: pointer; text-align: left; color: var(--text); width: 100%; }
.kanji-ex:hover { border-color: #ffffff30; }
.kanji-ex ruby { font-family: var(--jp); font-size: 1.25rem; }
.kanji-ex rt { font-size: .6em; color: var(--accent2); font-weight: 400; }
.kanji-ex .kx-r { color: var(--muted); font-size: .74rem; }
.kanji-ex .kx-tr { margin-left: auto; color: #c9d2f0; font-size: .85rem; text-align: right; }
.kanji-empty { color: var(--muted); padding: 24px; text-align: center; }

/* ═══════════ Dicționar ═══════════ */
.dict-wrap { max-width: 960px; margin: 0 auto; }
.dict-title { margin-bottom: 2px; }
.dict-sub { color: var(--muted); font-size: .85rem; margin-bottom: 14px; }
.dict-searchbar { display: flex; align-items: center; gap: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 4px 6px 4px 12px; position: sticky; top: 8px; z-index: 5; }
.dict-searchicon { display: flex; color: var(--muted); flex: 0 0 auto; }
.dict-searchicon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dict-searchbar input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 1.05rem; padding: 10px 4px; min-width: 0; }
.dict-cam { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px; border: 0; background: var(--accent); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dict-cam svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linejoin: round; }
.dict-cam:hover { filter: brightness(1.08); }
.dict-hint { color: var(--muted); padding: 22px 6px; text-align: center; line-height: 1.5; }
.dict-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; margin-top: 12px; align-items: start; }
/* dicționar: cuvânt + butoane pe primul rând, descrierea pe rând separat dedesubt (bun pe telefoane) */
.dict-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; }
.dict-row:hover { border-color: #ffffff2c; }
.dict-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dict-jp { font-family: var(--jp); font-size: 1.5rem; line-height: 1.25; color: #fff; min-width: 0; overflow-wrap: anywhere; }
.dict-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.dict-info { min-width: 0; }
.dict-r { color: var(--muted); font-size: .78rem; word-break: break-word; }
.dict-tr { color: var(--text); font-size: .95rem; margin-top: 1px; overflow-wrap: anywhere; }
.dict-note { color: #cdb87a; font-size: .76rem; line-height: 1.35; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dict-tag { display: inline-block; margin-top: 6px; font-size: .64rem; color: #b8c0e0; background: #ffffff12; border-radius: 6px; padding: 2px 8px; }
.dict-audio { flex: 0 0 auto; align-self: center; }
.dict-mic { flex: 0 0 auto; align-self: center; }
.dict-mic svg { width: 18px; height: 18px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dict-write { flex: 0 0 auto; align-self: center; }
.dict-write svg { width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* progres: grafice + tabele */
.prog-block { margin: 20px 0; }
.prog-block h3 { margin-bottom: 8px; }
.prog-chart-lbl { color: var(--muted); font-size: .8rem; margin: 12px 0 4px; }
.prog-chart { width: 100%; height: 96px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }
.prog-chart.line polyline { fill: none; stroke: var(--accent2); stroke-width: 2; vector-effect: non-scaling-stroke; }
.prog-chart.line circle { fill: var(--accent2); }
.prog-chart.bars rect { fill: var(--good); }
.prog-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: .88rem; }
.prog-table th, .prog-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.prog-table th { color: var(--muted); font-weight: 600; font-size: .76rem; }
.prog-table .pt-jp { font-family: var(--jp); font-size: 1.05rem; }
.prog-table .pt-num { text-align: right; color: var(--accent2); font-weight: 600; }
.donut-row { display: flex; gap: 16px; flex-wrap: wrap; }
.donut-col { flex: 1; min-width: 160px; }
.dn-title { text-align: center; font-family: var(--jp); color: var(--muted); margin-bottom: 6px; }
.donut-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.donut { width: 128px; height: 128px; flex: 0 0 auto; }
.dn-center { fill: #fff; font-size: 20px; font-weight: 700; font-family: sans-serif; }
.dn-legend { display: flex; flex-direction: column; gap: 5px; font-size: .82rem; }
.dn-leg { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.dn-leg b { color: var(--text); }
.dn-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.prog-chart.barslab { height: 118px; }
.prog-chart.barslab .bl-lbl { fill: var(--muted); font-size: 11px; font-family: var(--jp); }
.prog-sub { color: var(--muted); font-size: .85rem; text-align: center; margin-top: 8px; }
.write-word-banner { display: flex; align-items: center; justify-content: center; gap: 12px; background: #7aa2f722; border: 1px solid #7aa2f755; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: .95rem; flex-wrap: wrap; }
.write-word-banner b { font-family: var(--jp); font-size: 1.15rem; }

/* joacă în lecție: cartonașe + karuta */
.lesson-play-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; background: linear-gradient(100deg, #7aa2f7, #9d7cf7); border: 0; border-radius: 14px; padding: 13px; color: #fff; font-size: 1.05rem; font-weight: 600; cursor: pointer; margin: 4px 0 14px; }
.lesson-play-btn svg { width: 20px; height: 20px; fill: #fff; }
.lesson-play-btn:hover { filter: brightness(1.06); }
.lg-wrap { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 16px; }
.lg-tabs { display: flex; gap: 6px; margin-bottom: 14px; justify-content: center; flex-wrap: wrap; }
.lg-tab { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 7px 14px; color: var(--muted); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; }
.lg-tab .lg-jp { font-family: var(--jp); font-size: .95rem; }
.lg-tab .lg-tr { font-size: .68rem; opacity: .85; }
.lg-tab.active { background: var(--accent2); color: #fff; border-color: var(--accent2); }
.kr-inst { text-align: center; color: var(--text); font-size: .95rem; margin-bottom: 12px; }
.kr-count { text-align: center; margin-top: 10px; }
.lg-area { min-height: 210px; }
.lg-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.lg-count { color: var(--muted); font-size: .9rem; }
.flash-card { position: relative; width: 100%; max-width: 320px; height: 190px; margin: 0 auto; cursor: pointer; perspective: 900px; }
.fc-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .4s; }
.fc-back { transform: rotateY(180deg); }
.flash-card.flip .fc-front { transform: rotateY(180deg); }
.flash-card.flip .fc-back { transform: rotateY(360deg); }
.fc-jp { font-family: var(--jp); font-size: 2.8rem; color: #fff; }
.fc-hint { color: var(--muted); font-size: .78rem; }
.fc-r { color: var(--muted); font-size: 1rem; }
.fc-tr { color: var(--accent2); font-size: 1.4rem; text-align: center; padding: 0 12px; }
.kr-top { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.kr-hint { color: var(--muted); font-size: .9rem; }
.kr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
.kr-card { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 16px 8px; font-family: var(--jp); font-size: 1.3rem; color: #fff; cursor: pointer; min-height: 60px; }
.kr-card:hover { border-color: #ffffff35; }
.kr-card.done { background: #5dbb6322; border-color: var(--good); opacity: .5; cursor: default; }
.kr-card.bad { border-color: var(--bad); background: #e0555522; animation: shake .35s; }
.kr-done { text-align: center; padding: 30px 10px; }
.krd-title { font-size: 1.5rem; color: var(--good); font-weight: 700; margin-bottom: 6px; }
.krd-stats { color: var(--muted); margin-bottom: 16px; }

/* joc de învățat alfabetul */
.alpha-title { font-size: 1.4rem; font-weight: 700; font-family: var(--jp); margin-bottom: 10px; }
.kg-wrap { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 16px; }
.kg-top { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.kg-close { background: none; border: 0; color: var(--muted); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.kg-bar { flex: 1; height: 12px; background: var(--bg); border-radius: 8px; overflow: hidden; }
.kg-bar > div { height: 100%; background: linear-gradient(90deg, #7aa2f7, #5dbb63); border-radius: 8px; transition: width .3s; }
.kg-body { padding: 12px 18px 20px; min-height: 240px; text-align: center; }
.kg-foot { padding: 14px 18px; border-top: 1px solid var(--line); }
.kg-foot.ok { background: #16351d; border-top-color: #2f7d3e; }
.kg-foot.bad { background: #3a1620; border-top-color: #8a2f42; }
.kg-fb { margin-bottom: 8px; font-size: 1rem; }
.kg-foot.ok .kg-fb { color: #7be08a; }
.kg-foot.bad .kg-fb { color: #f0889a; font-family: var(--jp); }
.kg-newlabel { color: var(--accent2); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.kg-char { font-family: var(--jp); font-size: 5rem; color: #fff; line-height: 1.1; }
.kg-char.sm { font-size: 3.4rem; }
.kg-rom { color: var(--muted); font-size: 1.2rem; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
.kg-tracewrap { display: flex; justify-content: center; margin: 14px 0 6px; }
#kgCanvas { background: var(--card); border: 1px solid var(--line); border-radius: 14px; touch-action: none; }
.kg-hint { color: var(--muted); font-size: .82rem; }
.kg-ctrl { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.kg-q { font-size: 1.1rem; margin: 10px 0 16px; }
.kg-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; margin: 0 auto; }
.kg-listen { display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; background: var(--accent2); border: 0; border-radius: 16px; width: 110px; height: 76px; cursor: pointer; }
.kg-listen svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kg-done { padding: 24px 10px; }
.kg-donechars { font-family: var(--jp); font-size: 2.4rem; color: #fff; margin: 10px 0; letter-spacing: 6px; }
.kg-done .big-btn { margin-top: 14px; }
.kg-done .chip { margin-top: 10px; }
.offline-bar { height: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 8px 0 4px; }
.offline-bar > div { height: 100%; width: 0; background: linear-gradient(90deg, #7aa2f7, #5dbb63); transition: width .2s; }
.offline-status { color: var(--muted); font-size: .82rem; min-height: 16px; }
.dict-ocr { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.ocr-status { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; }
.ocr-spin { width: 16px; height: 16px; border: 2px solid #ffffff30; border-top-color: var(--accent2); border-radius: 50%; animation: ocrspin .8s linear infinite; flex: 0 0 auto; }
@keyframes ocrspin { to { transform: rotate(360deg); } }
.ocr-found { font-size: 1rem; margin-bottom: 4px; }
.ocr-text { font-family: var(--jp); font-size: 1.4rem; color: #fff; }
.ocr-hint { color: var(--muted); font-size: .82rem; margin: 6px 0; }
.ocr-chars { display: flex; flex-wrap: wrap; gap: 6px; }
.ocr-chars .chip { font-family: var(--jp); font-size: 1.05rem; }

/* ═══════════ Antrenament (Duolingo-style) ═══════════ */
.trainer-cta { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: linear-gradient(100deg, #7aa2f7 0%, #9d7cf7 100%); border: 0; border-radius: 16px; padding: 16px 18px; margin-bottom: 18px; cursor: pointer; color: #fff; }
.trainer-cta:hover { filter: brightness(1.05); }
.trainer-cta .tc-ic { width: 44px; height: 44px; border-radius: 12px; background: #ffffff28; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.trainer-cta .tc-ic svg { width: 26px; height: 26px; fill: #fff; }
.trainer-cta .tc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trainer-cta .tc-txt b { font-size: 1.15rem; }
.trainer-cta .tc-txt small { opacity: .9; font-size: .82rem; }
.trainer-cta .tc-arrow { font-size: 1.8rem; opacity: .8; flex: 0 0 auto; }

.tr-panel { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: visible; }
.tr-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.tr-back { display: flex; align-items: center; gap: 5px; background: none; border: 0; color: var(--accent2); font-size: .95rem; cursor: pointer; flex: 0 0 auto; padding: 4px 2px; font-family: inherit; }
.tr-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tr-progress { flex: 1; height: 12px; background: var(--bg); border-radius: 8px; overflow: hidden; }
#trBar { height: 100%; width: 0; background: linear-gradient(90deg, #7aa2f7, #5dbb63); border-radius: 8px; transition: width .35s ease; }
.tr-body { padding: 8px 18px 20px; max-width: 720px; width: 100%; margin: 0 auto; min-height: 42vh; }
.tr-foot { padding: 14px 18px; border-top: 1px solid var(--line); max-width: 720px; width: 100%; margin: 0 auto; position: sticky; bottom: 12px; background: var(--bg2); border-radius: 14px; box-shadow: 0 -6px 18px #0000004d; }
.tr-foot.ok { background: #16351d; border-top-color: #2f7d3e; }
.tr-foot.bad { background: #3a1620; border-top-color: #8a2f42; }
.tr-feedback { min-height: 22px; margin-bottom: 8px; font-size: .98rem; }
.tr-foot.ok .tr-feedback { color: #7be08a; }
.tr-foot.bad .tr-feedback { color: #f0889a; }
.tr-feedback b { font-family: var(--jp); }
#trCheck { width: 100%; }
#trCheck:disabled { opacity: .4; cursor: default; }
.tr-foot.ok #trCheck { background: var(--good); box-shadow: 0 5px 16px #5dbb6355; }
.tr-foot.bad #trCheck { background: #8a3a48; box-shadow: none; }
.opt-btn .opt-tr { color: var(--accent2); font-family: sans-serif; margin-top: 3px; font-size: .82rem; }
.tr-hint-inline { color: var(--muted); font-size: 1rem; font-family: sans-serif; }
.token-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 13px; }
.token-btn .tk-jp { font-family: var(--jp); font-size: 1.15rem; }
.token-btn .tk-r { font-family: sans-serif; font-size: .62rem; color: var(--muted); }

.tr-prompt { color: var(--muted); font-size: .95rem; margin: 6px 0 14px; }
.tr-bigword { font-family: var(--jp); font-size: 2.3rem; color: #fff; text-align: center; margin: 8px 0 20px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.tr-bigword.small { font-size: 1.4rem; }
.tr-bigword.blank { letter-spacing: 1px; }
.tr-bigword .tr-r { font-size: .9rem; color: var(--muted); width: 100%; font-family: inherit; }
.tr-audio { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.tr-audio svg { width: 22px; height: 22px; fill: none; stroke: var(--accent2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-btn { background: var(--bg2); border: 2px solid var(--line); border-radius: 12px; padding: 16px 12px; color: var(--text); font-size: 1.1rem; cursor: pointer; text-align: center; min-height: 58px; }
.opt-btn.jp { font-family: var(--jp); }
.opt-btn small { display: block; color: var(--muted); font-size: .72rem; font-family: sans-serif; margin-top: 2px; }
.opt-btn:hover { border-color: #ffffff35; }
.opt-btn.sel { border-color: var(--accent2); background: #7aa2f722; }
.opt-btn.good { border-color: var(--good); background: #5dbb6322; }
.opt-btn.bad { border-color: var(--bad); background: #e0555522; }

/* potrivire perechi */
.match-wrap { display: flex; gap: 12px; }
.match-col { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.match-btn { background: var(--bg2); border: 2px solid var(--line); border-radius: 12px; padding: 15px 10px; color: var(--text); font-size: 1.05rem; cursor: pointer; min-height: 54px; }
.match-btn.jp { font-family: var(--jp); font-size: 1.2rem; }
.match-btn.sel { border-color: var(--accent2); background: #7aa2f722; }
.match-btn.done { border-color: var(--good); background: #5dbb6322; opacity: .55; cursor: default; }
.match-btn.bad { border-color: var(--bad); background: #e0555522; animation: shake .35s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

/* ascultare */
.tr-listen { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 20px; background: var(--accent2); border: 0; border-radius: 16px; width: 120px; height: 84px; cursor: pointer; }
.tr-listen svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-listen span { color: #fff; font-size: 1.4rem; }

/* construire propoziție */
.tr-senttr { text-align: center; color: var(--text); font-size: 1.05rem; margin-bottom: 14px; display: flex; gap: 10px; justify-content: center; align-items: center; }
.build-line { min-height: 56px; border-bottom: 2px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 12px; margin-bottom: 18px; align-content: flex-start; }
.build-line.good { border-color: var(--good); }
.build-line.bad { border-color: var(--bad); }
.build-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.token-btn { background: var(--bg2); border: 1px solid var(--line); border-bottom-width: 3px; border-radius: 10px; padding: 10px 14px; color: var(--text); font-family: var(--jp); font-size: 1.15rem; cursor: pointer; }
.token-btn:hover { border-color: #ffffff35; }
.token-btn.used, .token-btn[disabled] { opacity: .25; cursor: default; }
.tr-hintsm { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 14px; }

/* scriere la tastatură */
.tr-input { width: 100%; max-width: 340px; display: block; margin: 0 auto; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--line); background: var(--bg2); color: var(--text); font-size: 1.3rem; text-align: center; }
.tr-input.good { border-color: var(--good); }
.tr-input.bad { border-color: var(--bad); }
.tr-kana-preview { text-align: center; font-family: var(--jp); font-size: 1.6rem; color: var(--accent2); min-height: 40px; margin-top: 12px; }

/* scriere canvas */
.tr-canvas-wrap { display: flex; justify-content: center; margin: 8px 0; }
#trCanvas { background: var(--card); border: 1px solid var(--line); border-radius: 14px; touch-action: none; }
.tr-canvas-ctrl { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }

/* microfon */
.tr-mic { display: block; margin: 6px auto; background: var(--accent); border: 0; border-radius: 14px; padding: 16px 26px; color: #fff; font-size: 1.05rem; cursor: pointer; }
.tr-mic.rec { animation: pulse 1s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.tr-heard { text-align: center; font-family: var(--jp); font-size: 1.5rem; color: #fff; min-height: 40px; margin-top: 12px; }

/* ecran start + final */
.tr-startscreen { display: flex; align-items: center; justify-content: center; }
.tr-start, .tr-end { max-width: 420px; width: 100%; text-align: center; }
.tr-start h2, .tr-end h2 { margin-bottom: 6px; }
.tr-sub { color: var(--muted); margin-bottom: 20px; }
.tr-stats, .tr-endstats { display: flex; justify-content: center; gap: 22px; margin: 18px 0; }
.tr-stats div, .tr-endstats div { display: flex; flex-direction: column; }
.tr-stats b, .tr-endstats b { font-size: 1.7rem; color: #fff; }
.tr-stats span, .tr-endstats span { color: var(--muted); font-size: .78rem; }
.tr-settings { text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; margin: 12px 0 18px; }
.tr-settings summary { cursor: pointer; padding: 8px 0; color: var(--accent2); }
.tr-set-block { padding: 8px 0; }
.tr-set-block > label { display: block; color: var(--muted); font-size: .82rem; margin-bottom: 8px; }
.tr-typegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tr-chk { display: flex; align-items: center; gap: 7px; font-size: .88rem; cursor: pointer; }
.tr-chk.disabled { opacity: .4; }
.tr-set-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; }
.tr-set-row select { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 6px 10px; }
.tr-note { color: var(--muted); font-size: .78rem; margin-top: 6px; }
.tr-score { font-size: 3.6rem; font-weight: 800; color: #7aa2f7; margin: 6px 0; }
.tr-badge-line { color: var(--good); margin: 6px 0; font-size: .95rem; }
.tr-badge-line.up { color: #e6b83c; font-weight: 700; }
.tr-end .big-btn { margin-top: 16px; }
.tr-end .chip { margin-top: 10px; }

@media (max-width: 820px) {
  .tr-panel { border: 0; background: transparent; }
  .tr-top { padding: 8px 4px; }
  .tr-body { padding: 8px 4px 20px; }
  .tr-foot { bottom: 92px; background: var(--bg2); border: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .tr-bigword { font-size: 1.9rem; }
  .tr-opts { grid-template-columns: 1fr 1fr; }
}

/* ═══════════ Grila kana (blocuri pe mai multe coloane pe desktop) ═══════════ */
#kanaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 4px 26px;
  align-items: start;
}
#kanaGrid h3 { grid-column: 1 / -1; margin-top: 20px; }
.row-block { min-width: 0; }
.row-title {
  margin: 14px 0 8px; display: flex; align-items: center; gap: 10px;
}
.row-badge {
  min-width: 30px; height: 26px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #e6394620; color: #ff8a93; border: 1px solid #e6394638;
  border-radius: 8px; font-weight: 800; font-size: .78rem; letter-spacing: .06em;
  font-family: var(--jp), system-ui;
}
.row-members { color: var(--muted); font-size: .78rem; letter-spacing: .09em; }
.row-line { flex: 1; height: 1px; background: linear-gradient(to right, var(--line), transparent); }
.kana-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.kana-cell {
  background: var(--card); border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 4px 9px; text-align: center; cursor: pointer;
  transition: transform .08s, background .15s, border-color .15s; position: relative; overflow: hidden;
}
.kana-cell:hover { background: var(--card2); border-color: #ffffff28; }
.kana-cell:active { transform: scale(.94); }
.kana-cell .kc { font-family: var(--jp); font-size: 2rem; line-height: 1.2; }
.kana-cell .kr { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.kana-cell .mastery { position: absolute; top: 0; left: 0; right: 0; height: 3px; }

.m1 { background: #7a4b4b; } .m2 { background: #a3703f; } .m3 { background: #a3a33f; }
.m4 { background: #6da34f; } .m5 { background: #3ecf6a; }

/* ═══════════ Modal ═══════════ */
.modal-back {
  position: fixed; inset: 0; background: #000a; display: none;
  align-items: flex-end; justify-content: center; z-index: 50;
}
.modal-back.open { display: flex; }
.modal {
  background: var(--bg2); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0; padding: 18px; position: relative;
  animation: slideUp .2s ease-out; max-height: 92vh; overflow-y: auto;
  border: 1px solid var(--line);
  scrollbar-width: none;              /* fără bară vizibilă în modal — rămâne scrollabil */
  -webkit-overflow-scrolling: touch;
}
.modal::-webkit-scrollbar { width: 0; height: 0; display: none; }
.mini-grid { scrollbar-width: thin; }
@media (min-width: 600px) {
  .modal-back { align-items: center; }
  .modal { border-radius: 20px; }
}
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } }
.modal-close {
  position: absolute; top: 10px; right: 12px; background: var(--card);
  border: 0; color: var(--muted); width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: .9rem;
}
.modal-anim-wrap { position: relative; width: fit-content; margin: 6px auto 10px; }
.modal-anim { display: flex; justify-content: center; gap: 8px; }
.modal-anim svg { background: var(--card); border-radius: 14px; }
.replay-fab { position: absolute; right: 7px; bottom: 7px; width: 32px; height: 32px; background: #16161ecc; }
.modal-actions .chip { padding: 9px 13px; font-size: .85rem; }
.modal-info { text-align: center; }
.modal-romaji { font-size: 1.5rem; font-weight: 700; font-family: var(--jp); }
.modal-ro { color: var(--accent2); font-size: 1.05rem; margin-top: 2px; }
.modal-note { color: var(--muted); font-size: .85rem; margin-top: 6px; line-height: 1.4; }
.modal-mnem {
  margin-top: 10px; background: linear-gradient(135deg, #2a2540, #232033);
  border: 1px solid #7a5cff2e; border-radius: 12px; padding: 10px 12px;
  font-size: .88rem; line-height: 1.45; text-align: left;
}
.modal-mnem .mnem-head { display: flex; align-items: center; gap: 6px; color: #b8a6ff; font-weight: 700; font-size: .78rem; margin-bottom: 3px; }
.modal-mnem .mnem-head svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.modal-words { margin-top: 10px; text-align: left; }
.modal-words .mw-head, .write-words .mw-head { color: var(--muted); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.mw-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 12px; margin-bottom: 6px; cursor: pointer;
}
.mw-row:hover { border-color: #ffffff2c; }
.mw-row .mw-txt { line-height: 1.2; min-width: 0; }
.mw-row .mw-jp { font-family: var(--jp); font-size: 1.15rem; }
.mw-row .mw-jp b { color: var(--accent); font-weight: 400; }
.mw-row .mw-r { color: var(--muted); font-size: .74rem; margin-top: 2px; letter-spacing: .02em; }
.mw-row .mw-tr { margin-left: auto; color: var(--accent2); font-size: .82rem; text-align: right; white-space: nowrap; }
.write-words { max-width: 340px; margin: 10px auto 0; }
.modal-example {
  margin-top: 10px; background: var(--card); border-radius: 10px; padding: 8px;
  font-size: .95rem;
}
.modal-example .jp { font-family: var(--jp); font-size: 1.15rem; }
.modal-example .tr { color: var(--muted); font-size: .85rem; }
.modal-actions { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }

/* ═══════════ Chips / butoane ═══════════ */
.chip {
  background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 16px; font-size: .88rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.chip svg {
  width: 15px; height: 15px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.chip-icon { padding: 5px 10px; }
.chip-icon svg { width: 13px; height: 13px; }
.time-input {
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); padding: 7px 14px; font: 600 .88rem/1 system-ui, sans-serif;
  color-scheme: dark;
}
.chip:hover { border-color: #ffffff30; }
.chip.active { background: var(--accent2); color: #101018; border-color: transparent; }
.chip.primary { background: var(--accent); color: #fff; border-color: transparent; }
.chip.danger { background: transparent; color: var(--bad); border-color: var(--bad); margin-top: 18px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.big-btn {
  width: 100%; padding: 15px; font-size: 1.05rem; font-weight: 700;
  background: var(--accent); color: #fff; border: 0; border-radius: var(--radius);
  cursor: pointer; margin-top: 8px; font-family: inherit;
  box-shadow: 0 4px 18px #e6394633;
}

/* ═══════════ Scrie ═══════════ */
.write-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.nav-kana {
  background: var(--card); border: 1px solid var(--line); color: var(--text); font-size: 1.5rem;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
}
.write-current { text-align: center; }
.write-char { font-family: var(--jp); font-size: 2.6rem; line-height: 1.15; }
.write-romaji { color: var(--muted); font-size: .9rem; }
.canvas-wrap { display: flex; justify-content: center; }
#drawCanvas {
  background: var(--card); border-radius: var(--radius); touch-action: none;
  width: min(88vw, 340px); height: min(88vw, 340px); cursor: crosshair;
  border: 1px solid var(--line);
}
.write-controls { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.write-feedback { text-align: center; margin-top: 12px; min-height: 1.4em; font-weight: 600; }
.write-feedback.good { color: var(--good); }
.write-feedback.bad { color: var(--bad); }

/* ═══════════ Test ═══════════ */
.quiz-opt-group { margin-bottom: 14px; }
.quiz-opt-group label { display: block; color: var(--muted); font-size: .85rem; margin-bottom: 6px; }
.quiz-hint { color: var(--muted); font-size: .82rem; margin: 10px 0; line-height: 1.4; }
.quiz-progress { height: 6px; background: var(--card); border-radius: 3px; margin-bottom: 20px; overflow: hidden; }
#quizBar { height: 100%; width: 0; background: var(--accent2); transition: width .25s; }
.quiz-question {
  font-family: var(--jp); font-size: 4.5rem; text-align: center; line-height: 1.2;
  min-height: 1.2em;
}
.quiz-question.small { font-size: 2.2rem; font-family: inherit; font-weight: 700; }
.quiz-question.audio { display: flex; justify-content: center; align-items: center; }
.quiz-question.word { font-size: 2.4rem; }
.quiz-answers.text-answers button { font-family: inherit; font-size: 1rem; }
.ans-jp { display: block; }
.ans-r {
  display: block; font-family: system-ui, sans-serif; font-size: .72rem;
  color: var(--muted); margin-top: 3px; letter-spacing: .03em;
}
.quiz-answers button.correct .ans-r, .quiz-answers button.wrong .ans-r { color: #ffffffcc; }
.q-r { font-family: system-ui, sans-serif; font-size: 1rem; color: var(--muted); margin-top: 6px; }
#quizCanvas {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  touch-action: none; width: min(75vw, 300px); height: min(75vw, 300px); cursor: crosshair;
}
#quizDraw .write-controls { margin-top: 10px; }
.pron-result { text-align: center; margin-top: 8px; font-size: .85rem; color: var(--muted); min-height: 1.2em; line-height: 1.4; }
.pron-result.good { color: var(--good); }
.pron-result.bad { color: var(--bad); }
#btnPron.active { background: var(--accent); color: #fff; border-color: transparent; }
.audio-big {
  width: 86px; height: 86px; border-radius: 50%; padding: 0;
  background: var(--card2); border: 1px solid #ffffff22;
}
.audio-big svg { width: 36px; height: 36px; }
.review-btn { margin-bottom: 16px; background: linear-gradient(135deg, #7aa2f7, #5b7fd9); box-shadow: 0 4px 18px #7aa2f733; }
.quiz-sub { text-align: center; color: var(--muted); margin: 4px 0 18px; }
.quiz-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-answers button {
  background: var(--card); border: 1px solid var(--line); color: var(--text);
  border-radius: var(--radius); padding: 16px 8px; font-size: 1.3rem; font-weight: 600;
  cursor: pointer; font-family: var(--jp);
  transition: background .12s;
}
.quiz-answers button:hover { border-color: #ffffff30; }
.quiz-answers button.correct { background: var(--good); color: #fff; }
.quiz-answers button.wrong { background: var(--bad); color: #fff; }
.quiz-end-card { text-align: center; padding: 20px 10px; }
.quiz-end-card .score { font-size: 3rem; font-weight: 800; margin: 10px 0; }
.quiz-end-card .msg { color: var(--muted); margin-bottom: 20px; }

/* ═══════════ Progres ═══════════ */
#view-progress .panel { max-width: 720px; }
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 8px; }

.xp-wrap { margin: 8px 0 6px; }
.xp-bar { height: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
#xpFill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent2), var(--good)); transition: width .4s; }
.xp-label { color: var(--muted); font-size: .78rem; margin-top: 4px; text-align: right; }

.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.badge {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 8px; text-align: center; font-size: .78rem; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.badge .b-star { font-size: 1.15rem; line-height: 1; }
.badge.on { border-color: #e6394655; color: var(--text); background: linear-gradient(140deg, #2e2433, #242432); }
.badge.on .b-star { color: #f4c14f; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: center; }
.stat-card .v { font-size: 1.5rem; font-weight: 800; color: var(--accent2); }
.stat-card .l { font-size: .75rem; color: var(--muted); margin-top: 2px; }
.heat-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.heat-cell {
  aspect-ratio: 1; border-radius: 7px; display: flex; align-items: center; justify-content: center;
  font-family: var(--jp); font-size: .95rem; background: var(--card); color: var(--muted);
}
.heat-cell.hb1 { background: #5c4040; color: #fff; } .heat-cell.hb2 { background: #6e5636; color: #fff; }
.heat-cell.hb3 { background: #6e6e36; color: #fff; } .heat-cell.hb4 { background: #4d6e3d; color: #fff; }
.heat-cell.hb5 { background: #2e8f4e; color: #fff; }
.legend { display: flex; gap: 14px; margin-top: 10px; color: var(--muted); font-size: .8rem; align-items: center; flex-wrap: wrap; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--card); margin-right: 4px; vertical-align: -1px; }
.legend .hb2 { background: #6e5636; } .legend .hb5 { background: #2e8f4e; }

/* ═══════════ Cuvinte (pași) ═══════════ */
#view-words { max-width: 920px; }
#view-words .intro-card { max-width: none; }
.step-card {
  display: flex; gap: 14px; align-items: center;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
  transition: border-color .15s, transform .08s;
}
.step-card:hover { border-color: #ffffff2c; }
.step-card:active { transform: scale(.985); }
.step-card.locked { opacity: .5; }
.step-num {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
}
.step-card.locked .step-num { background: var(--card2); color: var(--muted); }
.step-body { flex: 1; min-width: 0; }
.step-title { font-weight: 700; }
.step-preview { color: var(--muted); font-size: .85rem; font-family: var(--jp); margin: 2px 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.lock-ico { width: 13px; height: 13px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step-preview span { font-family: system-ui, sans-serif; font-size: .78rem; }
.step-bar { height: 6px; background: var(--card); border-radius: 3px; overflow: hidden; }
.step-bar div { height: 100%; background: linear-gradient(90deg, var(--accent2), var(--good)); }
.step-progress { color: var(--muted); font-size: .75rem; margin-top: 3px; }

.word-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
}
.word-row:hover { border-color: #ffffff2c; }
.w-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--card2); flex-shrink: 0; }
.w-dot.hb1 { background: #5c4040; } .w-dot.hb2 { background: #6e5636; }
.w-dot.hb3 { background: #6e6e36; } .w-dot.hb4 { background: #4d6e3d; } .w-dot.hb5 { background: #2e8f4e; }
.w-main { flex: 1; min-width: 0; }
.w-jp { font-family: var(--jp); font-size: 1.15rem; line-height: 1.3; }
.w-r { color: var(--muted); font-size: .78rem; }
.w-tr { color: var(--accent2); font-size: .88rem; text-align: right; max-width: 40%; }
.step-scenario { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: 4px 0 2px; font-style: italic; }
#stepItems { margin: 14px 0; }
#btnStepQuiz { margin-bottom: 20px; }

/* ═══════════ Tab bar plutitor (doar mobil) ═══════════ */
.tabbar {
  position: fixed; display: none;
  left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  background: #1c1c28f0;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid #ffffff1c; border-radius: 24px;
  padding: 6px; gap: 4px; z-index: 30;
  box-shadow: 0 10px 34px #000000a8, inset 0 1px 0 #ffffff0e;
}
.tab {
  flex: 1; background: transparent; border: 0; color: var(--muted);
  padding: 8px 0 7px; font-size: .68rem; font-weight: 600; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px; font-family: inherit;
  border-radius: 18px;
  transition: color .18s, background .18s, box-shadow .18s;
}
.tab em { font-style: normal; letter-spacing: .01em; }
.tab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tab.active {
  color: #fff;
  background: linear-gradient(150deg, #ef4653, #cf2e3b);
  box-shadow: 0 5px 16px #e6394655;
}

/* ═══════════ Responsive ═══════════ */
/* bandă intermediară: renunț treptat la elementele late ca navul de sus să rămână curat până la dock-ul de 820px */
@media (max-width: 1180px) {
  #scriptToggle .seg-label { display: none; }   /* toggle → ひ / カ / 漢 (toate modurile) */
  .topbar-inner { gap: 12px; }
}
@media (max-width: 1010px) {
  #brandSub { display: none; }                  /* renunț la subtitlul brandului */
  .nav-link { padding: 8px 8px; }
}
@media (max-width: 960px) {
  .brand-name { display: none; }                /* păstrez badge-ul か, renunț la wordmark */
  .topbar-inner { gap: 10px; }
  .mainnav { gap: 2px; }
  .nav-link { padding: 8px 7px; }
}
@media (max-width: 820px) {
  .mainnav { display: none; }
  .tabbar { display: flex; }
  main { padding-bottom: 108px; }
  .topbar-inner { justify-content: space-between; gap: 10px; }
  .brand-name small { display: none; }
  .panel { padding: 16px 12px; border: 0; background: transparent; }
}
@media (max-width: 560px) {
  .seg-label { display: none; }
  .seg button { padding: 6px 10px; }
}

/* stroke animation */
.stroke-ghost { stroke: #4a4a5e; }
.stroke-anim { stroke: var(--text); }
.stroke-num { fill: var(--accent); font-size: 9px; font-family: sans-serif; }

/* ═══════════ Unelte Scrie (fișe + poză) ═══════════ */
.write-tools { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.write-tools .chip { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.photo-hint { color: var(--muted); font-size: .8rem; text-align: center; margin-top: 8px; line-height: 1.4; }

#photoCanvas { display: block; margin: 0 auto; background: var(--card); border-radius: 12px; max-width: 100%; }
.mini-grid {
  display: flex; flex-wrap: wrap; gap: 6px;
  max-height: 170px; overflow-y: auto; margin-bottom: 12px;
  padding: 4px; background: #00000022; border-radius: 10px;
}
.mini-kana {
  padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); cursor: pointer;
  font-family: var(--jp); font-size: 1.05rem; line-height: 1.2;
}
.mini-kana.sel { background: var(--accent2); color: #101018; border-color: transparent; font-weight: 700; }
.photo-take { display: block; text-align: center; margin-bottom: 10px; cursor: pointer; }
.photo-score { text-align: center; font-size: 2.6rem; font-weight: 800; margin: 8px 0 2px; }
.photo-msg { text-align: center; color: var(--muted); margin-bottom: 8px; line-height: 1.4; }
.photo-score.s-good { color: var(--good); }
.photo-score.s-mid { color: #d8b44a; }
.photo-score.s-bad { color: var(--bad); }

/* ═══════════ Fișe printabile ═══════════ */
#printSheet { display: none; }
@media print {
  body { background: #fff; }
  body > *:not(#printSheet) { display: none !important; }
  #printSheet { display: block; background: #fff; color: #000; font-family: system-ui, sans-serif; padding: 4mm 5mm; }
  /* marginea mică suprimă antetul/subsolul browserului (titlu, URL, dată) */
  @page { size: A4; margin: 6mm; }
}
.sheet-head { font-size: 13pt; font-weight: 700; margin-bottom: 5mm; }
.sheet-head small { font-weight: 400; color: #666; margin-left: 3mm; }
.sheet-row { display: flex; gap: 1.6mm; margin-bottom: 3.2mm; align-items: center; break-inside: avoid; }
.sheet-label { width: 13mm; text-align: center; flex-shrink: 0; }
.sheet-label .sl-ch { font-family: var(--jp); font-size: 15pt; line-height: 1.15; }
.sheet-label .sl-r { font-size: 7.5pt; color: #666; }
.sheet-cell {
  width: 15.5mm; height: 15.5mm; flex-shrink: 0;
  border: 0.3mm solid #c9c9c9; border-radius: 1mm; position: relative;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sheet-cell svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── SRS 2.0: etape numite ── */
.srs-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: var(--card2); margin: 8px 0 12px; }
.srs-seg { min-width: 3px; }
.srs-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--muted); }
.srs-leg { display: flex; align-items: center; gap: 6px; }
.srs-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.srs-leg b { color: var(--text); }
.leech-btn { margin-top: 12px; }

/* ── Furigana graduală ── */
ruby.fg-hide rt { opacity: 0; transition: opacity .25s ease; }
ruby.fg-hide:hover rt, ruby.fg-hide.fg-show rt { opacity: .55; }

/* ── Alfabet: unelte cap (carduri/tabel + orientare) ── */
.alpha-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 4px; }
.seg-mini { display: inline-flex; background: var(--card2); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-mini button { border: 0; background: transparent; color: var(--muted); padding: 6px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.seg-mini button.on { background: var(--accent); color: #fff; }
.mini-btn { border: 1px solid var(--line); background: var(--card2); color: var(--text); padding: 6px 12px; border-radius: 10px; font-size: 13px; cursor: pointer; }

/* ── Tabel gojūon ── */
.kt-sec { margin: 14px 0; }
.kt-sec h3 { font-size: 15px; margin: 0 0 8px; color: var(--text); }
.kt-wrap { grid-column: 1 / -1; width: 100%; } /* ocupă toate coloanele grilei #kanaGrid */
.kt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* tabel care umple lățimea și se scalează, ca grila de alfabet */
.kt { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: clamp(2px, 0.8vw, 4px); }
.kt th { color: var(--muted); font-weight: 600; font-size: clamp(9px, 2.4vw, 12px); padding: 1px 2px; text-align: center; }
.kt th:first-child, .kt td:first-child { width: 7%; min-width: 20px; }
.kt td { padding: 0; }
.kt-cell { height: clamp(34px, 8.8vw, 48px); background: var(--card); border: 1px solid var(--line); border-radius: clamp(5px, 1.4vw, 9px); text-align: center; cursor: pointer; vertical-align: middle; transition: transform .08s; }
.kt-cell:active { transform: scale(.94); }
.kt-cell .kt-ch { display: block; font-family: var(--jp); font-size: clamp(14px, 4.4vw, 22px); line-height: 1; color: var(--text); }
.kt-cell .kt-r { display: block; font-size: clamp(7px, 1.8vw, 10px); color: var(--muted); margin-top: 1px; }
.kt-empty { background: transparent; }
/* tabelul ん = mic, nu se întinde pe toată lățimea */
.kt-single { width: auto; table-layout: auto; }
.kt-single .kt-cell { width: clamp(34px, 8.8vw, 48px); }
.kt-note { color: var(--muted); font-size: 12px; padding-left: 10px; vertical-align: middle; }
.kt-cell.ktm1 { border-color: #3a5f3a; } .kt-cell.ktm2 { border-color: #3f7a3f; }
.kt-cell.ktm3 { border-color: #4c9a4c; background: #26331f; } .kt-cell.ktm4 { border-color: #5dbb63; background: #223a1f; }
.kt-cell.ktm5 { border-color: #7ada7a; background: #21421f; }
.kt-cell.ktm5 .kt-ch { color: #bff5b0; }

/* ── Antrenament alfabet pe etape (drill) ── */
.drill-btn { background: var(--card2); }
.drill-btn .drill-ico { font-size: 1.1em; }
.kd-wrap { display: flex; flex-direction: column; gap: 14px; background: var(--card); border-radius: 16px; padding: clamp(12px,3vw,22px); }
.kd-fb { text-align: center; padding: 14px; border-radius: 12px; font-weight: 700; font-size: 16px; background: var(--card2); color: var(--muted); }
.kd-fb.ok { background: #12613b; color: #eafff2; }
.kd-fb.bad { background: #5a1717; color: #ffe6e6; }
.kd-fb-pair { color: var(--accent2); }
.kd-prompt { text-align: center; font-family: var(--jp); font-size: clamp(40px, 12vw, 64px); font-weight: 700; padding: 18px 0; }
.kd-prompt-sm { font-size: clamp(20px, 6vw, 30px); color: var(--muted); padding: 6px 0; }
.kd-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kd-opt { position: relative; background: #0c0c12; border: 1px solid var(--line); border-radius: 12px; padding: 18px 8px; cursor: pointer; transition: transform .08s, background .12s; }
.kd-opt:hover { background: #16161f; }
.kd-opt:active { transform: scale(.96); }
.kd-opt .kd-num { position: absolute; top: 6px; left: 10px; font-size: 12px; color: var(--muted); }
.kd-opt .kd-oc { display: block; font-family: var(--jp); font-size: clamp(24px, 7vw, 38px); color: var(--text); }
.kd-speaker { display: block; margin: 6px auto 12px; width: 84px; height: 84px; border-radius: 50%; background: #0c0c12; border: 1px solid var(--line); color: var(--accent); cursor: pointer; }
.kd-speaker svg { width: 40px; height: 40px; }
.kd-typewrap { display: flex; justify-content: center; }
.kd-type { width: min(280px, 80%); background: transparent; border: 0; border-bottom: 2px solid var(--muted); color: var(--text); font-size: 26px; text-align: center; padding: 8px 4px; outline: none; }
.kd-type:focus { border-color: var(--accent2); }
.kd-canvaswrap { display: flex; justify-content: center; }
#kgCanvas { background: #08080d; border: 1px solid var(--line); border-radius: 12px; touch-action: none; }
.kd-drawbtns { display: flex; gap: 10px; justify-content: center; align-items: center; }
.kd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kd-pcol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: #0c0c12; border-radius: 12px; padding: 8px; }
.kd-ptile { background: #08080d; border: 1px solid var(--line); border-radius: 10px; padding: 16px 4px; font-family: var(--jp); font-size: clamp(18px, 5vw, 28px); color: var(--text); cursor: pointer; transition: transform .08s; }
.kd-ptile:active { transform: scale(.94); }
.kd-ptile.sel { background: var(--accent2); color: #06121f; border-color: var(--accent2); }
.kd-ptile.done { opacity: .16; pointer-events: none; }
.kd-ptile.bad { background: var(--bad); color: #fff; }
.kd-stagebar { display: flex; align-items: stretch; gap: 8px; }
.kd-nav { background: #0c0c12; border: 1px solid var(--line); color: var(--muted); border-radius: 10px; padding: 0 16px; cursor: pointer; font-weight: 700; }
.kd-bar { position: relative; flex: 1; background: #0c0c12; border-radius: 10px; overflow: hidden; min-height: 46px; display: flex; align-items: center; justify-content: center; }
.kd-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #1f4a63; transition: width .25s ease; }
.kd-stage-lbl { position: relative; font-weight: 700; color: var(--text); }
.kd-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.kd-tool { background: #0c0c12; border: 1px solid var(--line); color: var(--muted); border-radius: 10px; padding: 10px 14px; cursor: pointer; font-size: 13px; }
.kd-tool.kd-exit { margin-left: auto; }
.kd-timerbar { height: 5px; background: #0c0c12; border-radius: 3px; overflow: hidden; }
.kd-timerfill { height: 100%; width: 100%; background: var(--accent); animation: kdShrink 5.2s linear forwards; }
@keyframes kdShrink { from { width: 100% } to { width: 0 } }
@media (max-width: 480px) { .kd-pcol { gap: 6px; padding: 6px; } .kd-opts { gap: 8px; } }

/* ── Furigana deasupra caracterului kanji ── */
.kanji-charwrap { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.kanji-furi { font-family: var(--jp); font-size: 13px; color: var(--accent2); margin-bottom: 2px; }

/* ── Furigana pe cuvinte (citirea deasupra kanji), oriunde ── */
ruby.wfuri { ruby-position: over; }
ruby.wfuri > rt { font-size: 0.5em; color: var(--accent2); font-weight: 400; line-height: 1; }

/* ── Casete de exercițiu (Test) + motor generic de quiz N5 ── */
.practice-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 12px 0; }
.pcard { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; cursor: pointer; color: var(--text); }
.pcard:hover { border-color: var(--accent2); }
.pcard.pc-n5 { background: linear-gradient(135deg, #221e4e, #7a2540); border-color: #ffffff22; }
.pc-ic { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-family: var(--jp); font-weight: 700; font-size: 19px; background: #0c0c12; border-radius: 12px; }
.pcard.pc-n5 .pc-ic { background: #ffffff1f; }
.pc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-txt b { font-size: 15px; }
.pc-txt small { color: var(--muted); font-size: 12px; margin-top: 2px; }
.pcard.pc-n5 .pc-txt small { color: #ffffffc8; }
.pc-arrow { color: var(--muted); font-size: 22px; flex: 0 0 auto; }
.gen-section { text-align: center; color: var(--accent2); font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.gen-passage { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.gen-passage .rd-jp { font-family: var(--jp); font-size: 1.15rem; line-height: 1.75; color: var(--text); }
.gen-passage .rd-r { color: var(--muted); font-size: .82rem; margin-top: 6px; }
.gq-jp { font-family: var(--jp); }
.gq-r { color: var(--muted); font-size: .85em; }
.gen-explain { background: #14432e; border: 1px solid #2e7d5244; border-radius: 10px; padding: 10px 12px; margin-top: 12px; color: var(--text); font-size: .9rem; line-height: 1.5; }
.gen-quiz .kd-speaker { margin: 4px auto 10px; }

/* cap test N5 cu buton Înapoi */
.gen-head { margin-bottom: 10px; }
.gen-back { display: inline-flex; align-items: center; gap: 4px; background: var(--card2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.gen-back:hover { border-color: var(--accent2); }

/* Standardizare Test: barele vechi devin carduri; ascund barele mari */
.trainer-cta, .review-btn { display: none !important; }
.pc-ic svg { width: 22px; height: 22px; }
.pcard.pc-feat { background: linear-gradient(135deg, #3a3d8f, #6d4bd0); border-color: #ffffff22; }
.pcard.pc-feat .pc-ic { background: #ffffff22; }
.pcard.pc-rev { background: linear-gradient(135deg, #274a86, #3f6fd0); border-color: #ffffff22; }
.pcard.pc-rev .pc-ic { background: #ffffff22; }
.pcard.pc-feat .pc-txt small, .pcard.pc-rev .pc-txt small { color: #ffffffcc; }
.pcard.pc-feat .pc-arrow, .pcard.pc-rev .pc-arrow, .pcard.pc-n5 .pc-arrow { color: #ffffffcc; }

/* Progres per lecție */
.lp-row { display: flex; align-items: center; gap: 10px; margin: 7px 0; }
.lp-name { flex: 0 0 40%; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-bar { flex: 1; height: 8px; background: var(--card2); border-radius: 5px; overflow: hidden; }
.lp-fill { height: 100%; background: var(--good); border-radius: 5px; transition: width .3s; }
.lp-num { flex: 0 0 auto; font-size: 12px; color: var(--muted); min-width: 42px; text-align: right; }

/* Meniu în japoneză (mod interfață): subtitlu tradus sub cuvântul japonez */
.nav-link .nav-sub, .tab .nav-sub { display: block; font-size: 10px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.nav-link span[data-i18n], .tab em[data-i18n] { line-height: 1.1; }

/* Mod interfață „japoneză": traducerea mică sub eticheta japoneză */
/* wrapper stivuit: japoneza sus / traducerea dedesubt, chiar și în containere flex (nu una lângă alta) */
.ui-dual { display: inline-block; text-align: inherit; line-height: 1.18; vertical-align: middle; }
.ui-sub { display: block; font-size: .74em; color: rgba(255, 255, 255, .78); font-weight: 500; margin-top: 1px; line-height: 1.15; }
/* pe butoanele/chip-urile active (colorate) traducerea rămâne albă */
.chip.active .ui-sub, .chip.primary .ui-sub, .primary .ui-sub, .big-btn .ui-sub, .nav-link.active .ui-sub { color: rgba(255, 255, 255, .92); }
#apkDownloadBtn { display: block; text-align: center; text-decoration: none; }

/* Setare master Romaji: cand e oprit, ascunde romaji-ul de referinta de peste tot */
body.no-romaji .ans-r,
body.no-romaji .dict-r,
body.no-romaji .fc-r,
body.no-romaji .gq-r,
body.no-romaji .kt-r,
body.no-romaji .kx-r,
body.no-romaji .lr-r,
body.no-romaji .mw-r,
body.no-romaji .nr-r,
body.no-romaji .q-r,
body.no-romaji .w-r,
body.no-romaji .kana-cell .kr { display: none !important; }