/* ===== Шрифты ===== */
@font-face{
  font-family:"ArmCursive";
  src:url("fonts/ArTar_TumanianDzeragir_U.ttf") format("truetype");
  font-display:swap;
}

/* ===== Тема (Telegram themeParams → CSS-переменные, с запасными) ===== */
:root{
  --bg:#f4f4f7;
  --card:#ffffff;
  --text:#12121a;
  --hint:#8a8a99;
  --accent:#2d6cdf;
  --accent-ink:#ffffff;
  --ok:#2ea44f;
  --bad:#e5484d;
  --gold:#e6a817;
  --line:#e6e6ee;
  --shadow:0 6px 20px rgba(20,20,40,.08);
  --radius:18px;
}
:root[data-dark="1"]{
  --bg:#17171c;
  --card:#22222b;
  --text:#f2f2f7;
  --hint:#9a9aa8;
  --line:#33333f;
  --shadow:0 6px 22px rgba(0,0,0,.35);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans Armenian",Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.4;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:contain;
}
#app{max-width:560px;margin:0 auto;padding:14px 14px 40px;min-height:100vh;}

/* ===== Утилиты ===== */
.arm{font-family:"Noto Sans Armenian","Segoe UI",sans-serif;}
.cursive{font-family:"ArmCursive","Noto Sans Armenian",cursive;}
.hint{color:var(--hint);}
.center{text-align:center;}
.hidden{display:none!important;}
.spacer{height:10px;}
h1,h2,h3{margin:0 0 8px;}
h1{font-size:22px;}
h2{font-size:19px;}

/* ===== Шапка экрана ===== */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-height:34px;}
.topbar .title{font-size:18px;font-weight:700;flex:1;}
.iconbtn{
  border:none;background:var(--card);color:var(--text);
  width:36px;height:36px;border-radius:12px;font-size:18px;
  box-shadow:var(--shadow);cursor:pointer;display:flex;align-items:center;justify-content:center;
}

/* ===== Карточки-кнопки меню ===== */
.menu-card{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border-radius:var(--radius);padding:16px 18px;
  box-shadow:var(--shadow);margin-bottom:12px;cursor:pointer;border:none;width:100%;text-align:left;color:var(--text);
  transition:transform .08s ease;
}
.menu-card:active{transform:scale(.98);}
.menu-card .emoji{font-size:30px;line-height:1;}
.menu-card .mc-body{flex:1;}
.menu-card .mc-title{font-size:17px;font-weight:700;}
.menu-card .mc-sub{font-size:13px;color:var(--hint);margin-top:2px;}
.menu-card .chev{color:var(--hint);font-size:20px;}

/* ===== Кольцо прогресса ===== */
.hero{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px;text-align:center;}
.ring{width:132px;height:132px;margin:6px auto 10px;position:relative;}
.ring svg{transform:rotate(-90deg);}
.ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring .val b{font-size:30px;}
.ring .val span{font-size:12px;color:var(--hint);}
.hero .greet{font-size:15px;color:var(--hint);}

/* ===== Кнопки ===== */
.btn{
  display:block;width:100%;border:none;border-radius:14px;padding:15px;
  font-size:16px;font-weight:600;cursor:pointer;margin-top:10px;color:var(--text);
  background:var(--card);box-shadow:var(--shadow);transition:transform .08s ease,opacity .2s;
}
.btn:active{transform:scale(.98);}
.btn.primary{background:var(--accent);color:var(--accent-ink);}
.btn.ok{background:var(--ok);color:#fff;}
.btn.bad{background:var(--bad);color:#fff;}
.btn.ghost{background:transparent;box-shadow:none;color:var(--hint);font-weight:600;}
.btn:disabled{opacity:.45;pointer-events:none;}
.btn-row{display:flex;gap:10px;}
.btn-row .btn{margin-top:10px;}

/* ===== Экран буквы (2×2 начертания) ===== */
.letter-hero{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:14px;}
.lh-head{text-align:center;margin-bottom:6px;}
.lh-head .big{font-size:40px;font-weight:700;color:var(--accent);}
.lh-head .nm{font-size:15px;color:var(--hint);margin-top:2px;}
.glyph-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px;}
.glyph-cell{border:1px solid var(--line);border-radius:14px;padding:10px 6px 8px;text-align:center;}
.glyph-cell .lbl{font-size:11px;color:var(--hint);letter-spacing:.03em;text-transform:uppercase;}
.glyph-cell .g{font-size:64px;line-height:1.15;color:var(--text);}
.glyph-cell.cur .g{font-size:70px;}
.section-tag{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:.05em;margin:12px 0 4px;}
.info-row{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;margin-bottom:8px;font-size:15px;}
.info-row b{font-weight:700;}
.progress-dots{display:flex;gap:6px;justify-content:center;margin:8px 0;}
.progress-dots .d{width:8px;height:8px;border-radius:50%;background:var(--line);}
.progress-dots .d.on{background:var(--accent);}

/* ===== Сетка алфавита ===== */
.abc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.abc-cell{
  background:var(--card);border-radius:14px;box-shadow:var(--shadow);
  padding:10px 4px 8px;text-align:center;cursor:pointer;border:none;color:var(--text);
  transition:transform .08s ease;
}
.abc-cell:active{transform:scale(.95);}
.abc-cell.learned{outline:2px solid var(--ok);}
.abc-cell .ch{font-size:26px;font-weight:700;}
.abc-cell .rn{font-size:10px;color:var(--hint);margin-top:2px;}

/* ===== Список уроков ===== */
.lesson-item{
  display:flex;align-items:center;gap:12px;background:var(--card);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:14px 16px;margin-bottom:10px;
  cursor:pointer;border:none;width:100%;text-align:left;color:var(--text);transition:transform .08s ease;
}
.lesson-item:active{transform:scale(.98);}
.lesson-item.locked{opacity:.55;cursor:default;}
.lesson-item .st{font-size:24px;width:30px;text-align:center;}
.lesson-item .li-body{flex:1;}
.lesson-item .li-title{font-weight:700;}
.lesson-item .li-sub{font-size:20px;margin-top:2px;letter-spacing:.04em;}

/* ===== Викторина / варианты ===== */
.q-head{text-align:center;margin-bottom:8px;}
.q-question{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 16px;text-align:center;margin-bottom:14px;font-size:18px;}
.q-question .qbig{font-size:56px;font-weight:700;color:var(--accent);display:block;margin:4px 0;}
.opt{
  display:block;width:100%;border:none;border-radius:14px;padding:16px;margin-top:10px;
  font-size:18px;font-weight:600;cursor:pointer;background:var(--card);color:var(--text);box-shadow:var(--shadow);
  transition:transform .08s ease;
}
.opt:active{transform:scale(.98);}
.opt.correct{background:var(--ok);color:#fff;}
.opt.wrong{background:var(--bad);color:#fff;}
.opt.dim{opacity:.5;}
.scorebar{display:flex;justify-content:space-between;font-size:14px;color:var(--hint);margin-bottom:6px;}

/* ===== Пары ===== */
.pairs-wrap{display:flex;gap:10px;}
.pairs-col{flex:1;display:flex;flex-direction:column;gap:10px;}
.pair-btn{
  border:none;border-radius:14px;padding:16px 8px;font-size:22px;font-weight:700;
  background:var(--card);color:var(--text);box-shadow:var(--shadow);cursor:pointer;transition:transform .08s ease;
}
.pair-btn.snd{font-size:18px;}
.pair-btn:active{transform:scale(.97);}
.pair-btn.sel{background:var(--accent);color:var(--accent-ink);}
.pair-btn.done{background:transparent;box-shadow:none;color:var(--ok);border:2px dashed var(--line);cursor:default;}
.pair-btn.miss{background:var(--bad);color:#fff;}

/* ===== Собери слово ===== */
.word-slots{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:14px 0;}
.slot{min-width:44px;height:52px;border-radius:12px;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;}
.slot.filled{border-color:var(--ok);color:var(--ok);}
.tiles{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:10px;}
.tile{min-width:52px;height:56px;border-radius:12px;border:none;background:var(--card);
  box-shadow:var(--shadow);font-size:26px;font-weight:700;color:var(--text);cursor:pointer;transition:transform .08s ease;}
.tile:active{transform:scale(.94);}
.tile.used{visibility:hidden;}
.tile.shake{animation:shake .3s;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ===== Карточки ===== */
.flash{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px 18px;text-align:center;margin-bottom:14px;min-height:210px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;}
.flash .fbig{font-size:72px;font-weight:700;color:var(--accent);}

/* ===== Итоги ===== */
.result{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px 18px;text-align:center;margin-bottom:14px;}
.result .medal{font-size:56px;}
.result .score{font-size:34px;font-weight:800;margin:6px 0;}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--text);color:var(--bg);padding:10px 18px;border-radius:12px;font-weight:600;
  opacity:0;transition:all .25s;z-index:50;pointer-events:none;font-size:15px;
}
.toast.show{opacity:.95;transform:translateX(-50%) translateY(0);}

.fade{animation:fade .25s ease;}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ===== Чипы (серия / XP) ===== */
.chips{display:flex;gap:10px;margin-bottom:12px;}
.chip{flex:1;background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:10px;text-align:center;font-size:13px;}
.chip b{font-size:18px;}
.chip span{color:var(--hint);}

/* ===== Достижения ===== */
.stat-row{display:flex;gap:10px;margin-bottom:10px;}
.mini{flex:1;background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:12px;text-align:center;}
.mini b{display:block;font-size:20px;}
.mini span{font-size:12px;color:var(--hint);}
.xpbar{height:10px;border-radius:6px;background:var(--line);overflow:hidden;}
.xpbar div{height:100%;background:var(--accent);transition:width .4s;}
.ach{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:12px 14px;margin-bottom:8px;opacity:.55;}
.ach.got{opacity:1;}
.ach-ic{font-size:28px;width:38px;text-align:center;}
.ach-nm{font-weight:700;}

/* ===== Переключатель печатная/прописная ===== */
.seg{display:flex;width:max-content;background:var(--line);border-radius:12px;padding:3px;margin:0 auto 12px;}
.seg-b{border:none;background:transparent;color:var(--hint);font-weight:600;font-size:14px;padding:8px 18px;border-radius:10px;cursor:pointer;}
.seg-b.on{background:var(--card);color:var(--text);box-shadow:var(--shadow);}

/* ===== Холст «обведи букву» ===== */
.trace-wrap{display:flex;justify-content:center;margin:4px 0 12px;}
#tc{width:min(300px,86vw);height:min(300px,86vw);background:var(--card);border-radius:20px;
  box-shadow:var(--shadow);touch-action:none;border:2px solid var(--line);}

/* ===== Мемори ===== */
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.mcard{aspect-ratio:1/1;border:none;background:transparent;padding:0;cursor:pointer;perspective:600px;}
.mc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s;}
.mcard.open .mc-in{transform:rotateY(180deg);}
.mc-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border-radius:14px;box-shadow:var(--shadow);backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.mc-back{background:var(--accent);color:var(--accent-ink);font-size:26px;font-weight:700;}
.mc-front{background:var(--card);color:var(--text);font-size:30px;font-weight:700;transform:rotateY(180deg);}
.mcard.matched .mc-front{outline:2px solid var(--ok);color:var(--ok);}

/* ===== Слабые буквы ===== */
.weak-row{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;
  box-shadow:var(--shadow);padding:10px 14px;margin-bottom:8px;}
.big2{font-size:24px;font-weight:700;color:var(--accent);}
.weak-bad{color:var(--bad);font-weight:700;}
.weak-ok{color:var(--ok);font-weight:700;}

/* ===== Конфетти ===== */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60;}
.confetti-piece{position:absolute;top:-30px;animation:fall linear forwards;}
@keyframes fall{
  0%{transform:translateY(-30px) rotate(0);opacity:1;}
  100%{transform:translateY(105vh) rotate(540deg);opacity:.9;}
}