/* Мартчихлаа — үндсэн бүтэц ба 素 MINIMAL загвар
 *
 * Энэ файл нь БҮТЭЦ (байрлал, хэмжээ, хөдөлгөөн) ба анхдагч **minimal**
 * загварыг агуулна. Бусад загвар (`themes.css`) нь `html[data-theme=…]`
 * дээр ЗӨВХӨН токеныг дарж бичнэ.
 *
 * Хэлбэрийн токеныг ЗААВАЛ ашиглана — хатуу утга бичвэл тэр газар
 * загвар солигдохоо болино.
 */

:root{
  /* Minimal — GitHub-ийн харанхуй загварын логик: бараг хар суурь,
     түүнээс бага зэрэг цайвар гадаргуу, нимгэн саарал хүрээ, ганц хөх
     холбоос. Чимэглэл байхгүй; уншихад л зориулагдсан. */
  --bg:#0d1117; --card:#161b22; --paper:#21262d;
  --ink:#e6edf3; --ink-2:#8b949e; --ink-3:#6e7681;
  --line:#30363d; --line-2:#424a53;
  --accent:#2f81f7; --seal:#2f81f7;
  --ok:#3fb950; --ng:#f85149;
  --ok-bg:#12261a; --ng-bg:#2d1518;
  --shadow:none;

  /* ХЭЛБЭРИЙН токенууд. Загвар бүр эдгээрийг л солино. */
  --r:6px;
  --box-bg:var(--card);
  --box-bd:1px solid var(--line);
  --box-r:6px;
  --box-sep:0;
  --box-pad:15px 14px;
  --list-gap:8px;
  --list-top:0;
  --elev:none;
  --btn-bg:#238636; --btn-fg:#ffffff;      /* GitHub-ийн ногоон гол товч */
  --sel-bg:var(--accent); --sel-fg:#ffffff;
  --h2-tt:none; --h2-ls:0; --h2-bd:1px solid var(--line);
  --track-h:8px;
  --grain:0;
  --fx1:transparent; --fx2:transparent; --fx3:transparent; --fx-op:0;
  /* Япон бичиг: 明朝-г ӨӨРСДӨӨ нийлүүлнэ (fonts/). Ингэснээр Windows,
     Mac, Android гурав дээр ИЖИЛ харагдана — Yu Mincho нь Android дээр
     байдаггүй. */
  --jpd:"Noto Serif JP","Yu Mincho","YuMincho","Hiragino Mincho ProN",
        "Songti SC","SimSun",serif;
  --jp:"Yu Gothic","Yu Gothic UI","Hiragino Sans","Noto Sans JP","Meiryo",sans-serif;
  --ui:"Segoe UI","Noto Sans",system-ui,Arial,sans-serif;
  --disp:"Segoe UI","Noto Sans",system-ui,Arial,sans-serif;
  /* Монспэйс: Windows-ийн Consolas · Cascadia · Courier БҮГДЭД нь монгол
     Ү (U+04AE), Ө (U+04E8) БАЙХГҮЙ (34px-ээр зурж шалгав). Тиймээс
     Noto Sans Mono-г өөрсдөө нийлүүлнэ. */
  --mono:"Noto Sans Mono",ui-monospace,Consolas,monospace;
}

*{box-sizing:border-box}
/* Зохиогчийн `display:grid` нь браузерын `[hidden]{display:none}`-ыг дардаг
   (author > user-agent). Тиймээс hidden-ийг тодорхой давуутай болгоно. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:transparent; color:var(--ink); font-family:var(--ui);
  font-size:16px; line-height:1.62;
  padding:0 0 env(safe-area-inset-bottom);
  -webkit-text-size-adjust:100%;
}
.jp{font-family:var(--jp)}
/* 明朝 — зөвхөн ЯПОН текстэд. Кириллд хэрэглэвэл үсэг сунжирна. */
.jpd{font-family:var(--jpd)}

/* ---------- толгой ---------- */
/* Хайрцаг биш — цаасны дээд ирмэг. Ганц үсэг шугам л тусгаарлана. */
.bar{
  position:sticky; top:0; z-index:9; display:flex; align-items:center;
  gap:8px; padding:13px 14px 11px; background:var(--bg);
  border-bottom:1px solid var(--line);
}
.bar .title{
  flex:1; text-align:center; font-family:var(--disp); font-weight:400;
  font-size:16px; letter-spacing:.14em; text-transform:uppercase;
}
.bar .title small{color:var(--ink-2); font-weight:400; letter-spacing:.04em}
.bar .icon{
  background:none; border:0; color:var(--ink-2); padding:6px 8px;
  display:flex; align-items:center; border-radius:2px;
}
.bar .icon:hover{color:var(--accent); background:transparent}

/* ☰ цэс — цаасан дээр тавьсан хуудас. Ганцхан энд сүүдэр зөвшөөрнө. */
.menu{
  position:sticky; top:52px; z-index:8; max-width:660px; margin:0 auto;
  background:var(--card); border:1px solid var(--line); border-radius:2px;
  box-shadow:0 8px 26px rgba(0,0,0,.10); overflow:hidden; display:grid;
}
.menu button{
  background:none; border:0; border-bottom:1px solid var(--line);
  color:var(--ink); text-align:left; padding:14px 18px; font-size:15px;
  letter-spacing:.01em;
}
.menu button:last-child{border-bottom:0}
.menu button:hover{background:var(--bg)}
.menu button[aria-current="true"]{color:var(--accent)}
/* Идэвхтэй хуудсыг 朱 зураасаар заана — тод болгохын тулд өнгө нэмэхгүй. */
.menu button[aria-current="true"]::before{
  content:''; display:inline-block; width:14px; height:1px; margin-right:9px;
  vertical-align:4px; background:var(--accent);
}

/* Нүүрний том сонголтууд — хайрцаггүй, зөвхөн хуваах шугам.
   Зүүн талын том япон үсэг нь мөрийн «толгой» болно. */
.bigcards{display:grid; gap:var(--list-gap); margin-top:26px;
          border-top:var(--list-top)}
.bigcard{
  display:grid; grid-template-columns:64px 1fr auto; align-items:center;
  column-gap:18px; row-gap:3px; text-align:left; padding:var(--box-pad);
  background:var(--box-bg); border:var(--box-bd); border-bottom:var(--box-sep);
  border-radius:var(--box-r); box-shadow:var(--elev);
  color:var(--ink); position:relative;
}
.bigcard .bc-jp{
  grid-row:1 / 3; font-family:var(--jpd); font-size:27px; line-height:1.15;
  color:var(--ink); text-align:center; letter-spacing:-.02em;
  transition:color .2s ease;
}
.bigcard b{font-family:var(--disp); font-size:18px; font-weight:400;
           letter-spacing:.01em}
.bigcard span:not(.bc-jp){font-size:13px; color:var(--ink-2); line-height:1.5}
.bigcard i{font-style:normal}
/* → тэмдэг. Хүрэхэд урагшилна — өөр ямар ч чимэглэл хэрэггүй. */
.bigcard::after{
  content:'→'; grid-row:1 / 3; grid-column:3; color:var(--ink-3);
  font-size:15px; transition:transform .2s ease, color .2s ease;
}
.bigcard:hover::after{color:var(--accent); transform:translateX(4px)}
.bigcard:hover .bc-jp{color:var(--accent)}

.screen{max-width:660px; margin:0 auto; padding:18px 16px 56px;
        position:relative; z-index:1}
/* Гарчиг — 間. Дээрээ өргөн зайтай, доороо нарийн шугамтай. */
h2{
  font-family:var(--disp); font-size:12px; text-transform:var(--h2-tt);
  letter-spacing:var(--h2-ls); color:var(--ink-2); font-weight:400;
  margin:38px 0 14px; padding-bottom:8px; border-bottom:var(--h2-bd);
}
.screen > h2:first-of-type{margin-top:20px}

/* ---------- товч ---------- */
button{font:inherit; cursor:pointer; border-radius:var(--r); border:1px solid transparent;
       transition:transform .12s ease, background-color .18s ease,
                  border-color .18s ease, color .18s ease}
button:active:not(:disabled){transform:scale(.985)}
.choices button:active:not(:disabled),.bigcard:active,.mode:active:not(:disabled){
  transform:scale(.995)}
/* Гол товч — бэхээр дүүргэсэн тэгш өнцөгт. Улаан нь ХОВОР байх ёстой
   тул үндсэн үйлдэлд бэх, тамга/явцад л 朱. */
.primary{background:var(--btn-bg); color:var(--btn-fg); border:0; padding:14px 20px;
         font-weight:400; letter-spacing:.06em; box-shadow:var(--elev)}
.primary:hover{background:var(--accent)}
.ghost{background:transparent; color:var(--ink); border:1px solid var(--line-2);
       padding:9px 14px}
.ghost:hover{border-color:var(--ink)}
.ghost.sm{padding:7px 11px; font-size:14px}
.ghost.danger{color:var(--ng); border-color:var(--ng)}
.bar .ghost{border:0; font-size:20px; padding:4px 10px; color:var(--ink-2)}
.big{width:100%; padding:16px; font-size:16px}
.ok{background:var(--ok-bg); color:var(--ok); border:1px solid currentColor}
.ng{background:var(--ng-bg); color:var(--ng); border:1px solid currentColor}
button:disabled{opacity:.42; cursor:default}

.row{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.chk{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink-2)}

/* ---------- нүүр ---------- */
/* Өнөөдөр давтах тоо — хуудасны гол дүр. Хайрцаггүй, зөвхөн том тоо. */
.due{
  background:var(--box-bg); border:var(--box-bd); border-bottom:var(--box-sep);
  border-radius:var(--box-r); box-shadow:var(--elev);
  padding:34px 0 30px; text-align:center;
}
.due-n{font-family:var(--disp); font-size:76px; font-weight:400; line-height:.9;
       color:var(--ink); letter-spacing:-.03em}
.due-t{color:var(--ink-2); font-size:12px; margin:14px 0 22px;
       letter-spacing:.16em; text-transform:uppercase}

/* Хичээлийн сонголт — тамга шиг дөрвөлжин. Сонгосон нь 朱-гээр дүүрнэ. */
.lessons{display:grid; grid-template-columns:repeat(6,1fr); gap:5px}
.lessons button{
  padding:11px 0 9px; background:var(--box-bg); border:1px solid var(--line);
  color:var(--ink-2); font-size:13px; border-radius:var(--r); letter-spacing:.02em;
}
.lessons button:hover{border-color:var(--ink-3); color:var(--ink)}
.lessons button[aria-pressed="true"]{
  background:var(--sel-bg); border-color:var(--sel-bg); color:var(--sel-fg);
}
.lessons button small{display:block; font-size:10px; opacity:.72; margin-top:1px}

/* Хоёр талт сонголт — дүүргэхгүй, ДООГУУР нь зузаан бэх зураас. */
.seg{display:grid; grid-template-columns:1fr 1fr; gap:var(--list-gap);
     border-top:var(--list-top)}
.seg button{
  background:var(--box-bg); border:var(--box-bd); border-bottom:var(--box-sep);
  border-radius:var(--box-r); box-shadow:var(--elev);
  color:var(--ink-2); padding:15px 12px 13px; text-align:left;
}
/* Багана хоорондын шугам. Сүүлийн мөр дутуу (ж: 3 ном) байхад ч зөв
   гарахын тулд контейнерийн хүрээгээр биш, СОНДГОЙ нүдэн дээр зурна. */
.seg button:nth-child(odd){border-right:var(--box-sep)}
/* Кирилл шошгыг ЯПОН serif-ээр битгий бич — үсэг сунжирч уншигдахгүй
   болдог. Япон бол `.jp` ангитай ирнэ. */
.seg button b{display:block; font-family:var(--disp); font-size:19px;
              font-weight:400; color:var(--ink-2); line-height:1.35}
.seg button b.jp{font-family:var(--jpd); font-size:21px}
.seg button span{font-size:12px; line-height:1.45; display:block; margin-top:2px}
.seg button:hover b{color:var(--ink)}
/* Сонгосныг ДООГУУР нь 朱 зураасаар заана. `border-bottom` нь хуваах
   шугамд аль хэдийн зарцуулагдсан тул box-shadow-оор давхарлана —
   ингэснээр байрлал огт хөдлөхгүй. */
.seg button[aria-pressed="true"]{
  color:var(--ink); box-shadow:inset 0 -2px 0 var(--accent);
}
.seg button[aria-pressed="true"] b{color:var(--ink)}

.step{
  font-family:var(--disp); font-size:11.5px; color:var(--ink-3); margin:26px 0 9px;
  letter-spacing:.2em; text-transform:uppercase; font-weight:400;
}
/* Канагийн бүлэг / JLPT түвшин — жагсаалтын мөр, хайрцаг биш. */
.klist{display:grid; gap:var(--list-gap); border-top:var(--list-top)}
.klist button{
  display:grid; grid-template-columns:22px 1fr auto auto; gap:10px; align-items:center;
  background:var(--box-bg); border:var(--box-bd); border-bottom:var(--box-sep);
  border-radius:var(--box-r); box-shadow:var(--elev);
  color:var(--ink); padding:13px 4px; text-align:left; font-size:14px;
}
.klist .tick{opacity:0; color:var(--accent)}
.klist button[aria-pressed="true"] .tick{opacity:1}
.klist button[aria-pressed="false"]{opacity:.44}
.klist button:hover{opacity:1}
.klist .kname b{font-family:var(--jpd); font-size:16px; font-weight:400}
.klist .kex{font-family:var(--jpd); font-size:13px; color:var(--ink-2);
            white-space:nowrap}
.klist i{font-style:normal; font-size:12px; color:var(--ink-3);
         min-width:26px; text-align:right; font-variant-numeric:tabular-nums}

@media (max-width:420px){
  .klist button{grid-template-columns:20px 1fr auto; row-gap:2px}
  .klist .kname{grid-area:1 / 2 / 2 / 3}
  .klist i{grid-area:1 / 3 / 2 / 4}
  .klist .kex{grid-area:2 / 2 / 3 / 4}
}

/* Дасгалын сонголт — мөр бүр нэг зураасаар тусгаарлагдана. */
.modes{display:grid; gap:var(--list-gap); border-top:var(--list-top)}
.mode{
  text-align:left; background:var(--box-bg); border:var(--box-bd);
  border-bottom:var(--box-sep); border-radius:var(--box-r); box-shadow:var(--elev);
  padding:15px 4px; color:var(--ink); position:relative;
}
.mode b{display:block; font-size:16px; font-weight:400; letter-spacing:.01em}
.mode span{font-size:13px; color:var(--ink-2)}
.mode:disabled{opacity:.38}
.mode::after{
  content:'→'; position:absolute; right:4px; top:50%; margin-top:-11px;
  color:var(--ink-3); font-size:14px; transition:transform .2s ease, color .2s ease;
}
.mode:hover:not(:disabled)::after{color:var(--accent); transform:translateX(4px)}

.warn{
  margin-top:16px; padding:12px 14px; border-radius:2px; font-size:13px;
  background:var(--ng-bg); color:var(--ng); border:1px solid currentColor;
}
.diag{
  margin-top:12px; padding:12px 14px; border-radius:2px; font-size:12px;
  line-height:1.65; background:var(--card); border:1px solid var(--line);
  color:var(--ink-2); white-space:pre-wrap; word-break:break-word;
  max-height:280px; overflow:auto; font-family:var(--mono);
}
.src{margin-top:34px; padding-top:18px; border-top:1px solid var(--line);
     font-size:12px; color:var(--ink-2); line-height:1.7}
.by{margin:22px 0 0; text-align:center; font-size:11px; color:var(--ink-3);
    letter-spacing:.22em; text-transform:uppercase}
.by b{font-weight:400; color:var(--ink-2); letter-spacing:.06em;
      text-transform:none}

/* ханууны тамга — хуудсын төгсгөлийн гарын үсэг */
.seal{
  display:block; margin:26px auto 0; width:46px; height:46px;
  border:2px solid var(--seal); border-radius:3px; color:var(--seal);
  font-family:var(--jpd); font-size:23px; line-height:42px; text-align:center;
  opacity:.85;
}

.follow{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:14px auto 0; width:fit-content; max-width:100%;
  padding:10px 17px; border:1px solid var(--line-2); border-radius:2px;
  background:none; color:var(--ink-2); font-size:13px;
  text-decoration:none;
  transition:color .18s ease, border-color .18s ease;
}
.follow:hover{color:var(--ink); border-color:var(--ink)}
.follow svg{flex:none}
.follow i{font-style:normal; opacity:.55}

/* ---------- дасгал ---------- */
.hud{display:flex; align-items:center; gap:12px; margin:2px 0 20px}
.ring{width:34px; height:34px; flex:none; transform:rotate(-90deg)}
.ring circle{fill:none; stroke-width:2.5; stroke-linecap:butt}
.ring .rtrack{stroke:var(--line)}
.ring .rfill{stroke:var(--accent);
             transition:stroke-dashoffset .4s cubic-bezier(.4,0,.2,1)}
.hudn{font-family:var(--disp); font-size:20px; line-height:1;
      font-variant-numeric:tabular-nums}
.hudn small{font-size:13px; color:var(--ink-3)}
.hudr{margin-left:auto; display:flex; gap:14px; font-size:14px;
      font-variant-numeric:tabular-nums; font-family:var(--disp)}
.hudr .ok,.hudr .ng{background:none; border:0; padding:0}
.hudr .ok{color:var(--ok)} .hudr .ng{color:var(--ng)}

/* Карт — «掛け軸» шиг: дээр, доор нь ганц шугам, дунд нь өргөн хоосон зай.
   Хүрээ, сүүдэр, өнгө байхгүй. Үг өөрөө л гол дүр. */
.card{
  position:relative; background:var(--box-bg); border:var(--box-bd);
  border-top:var(--list-top); border-bottom:var(--box-sep);
  border-radius:var(--box-r); box-shadow:var(--elev);
  padding:52px 8px 46px; text-align:center;
  min-height:240px;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
}
.card.in{animation:cardIn .34s cubic-bezier(.2,.7,.3,1)}
@keyframes cardIn{
  from{opacity:0; transform:translateY(8px)}
  to{opacity:1; transform:none}
}
.card.flip{animation:flipY .5s cubic-bezier(.45,.05,.25,1); transform-style:preserve-3d}
@keyframes flipY{
  0%{transform:perspective(900px) rotateY(0)}
  50%{transform:perspective(900px) rotateY(-86deg)}
  100%{transform:perspective(900px) rotateY(0)}
}
.card.flip .answer{animation:halfIn .5s ease both}
@keyframes halfIn{0%,52%{opacity:0} 100%{opacity:1}}

.prompt-sub{font-size:11px; color:var(--ink-3); letter-spacing:.18em;
            text-transform:uppercase}
/* Гол үг — 明朝, аль болох том. Энэ бол хуудасны цорын ганц баатар. */
.prompt{font-family:var(--jpd); font-size:52px; line-height:1.28; font-weight:400;
        word-break:break-word; letter-spacing:.02em}
/* Утга нь бүтэн монгол өгүүлбэр байж болно. Механик, цахилгаан
   загварт `--disp` нь монспэйс тул урт өгүүлбэр уншихад хүндэрнэ —
   утгын текстийг ҮРГЭЛЖ UI-ийн фонтоор. */
.prompt.mn{font-family:var(--ui); font-size:28px; letter-spacing:0}
.speak{position:absolute; top:12px; right:4px; background:none; border:0;
       font-size:19px; opacity:.4; padding:6px; color:var(--ink)}
.speak:hover{opacity:1; color:var(--accent)}

.answer{border-top:1px solid var(--line); margin-top:26px; padding-top:22px}
.a-kana{font-family:var(--jpd); font-size:26px; color:var(--accent)}
.a-mn{font-size:19px; margin-top:6px; font-family:var(--ui)}
.a-acc{font-family:var(--jp); font-size:14px; color:var(--ink-2); margin-top:10px}
.acclab{display:block; font-family:var(--disp); font-size:10px; letter-spacing:.2em;
        text-transform:uppercase; color:var(--ink-3); margin-bottom:5px}

.prompt.kj{font-size:112px; line-height:1.02}
.a-kj{margin-top:14px; font-size:14px; color:var(--ink-2); text-align:left}
.a-kj > div{margin-top:4px}
.a-kj b{display:inline-block; min-width:24px; color:var(--ink-3);
        font-family:var(--jp); font-weight:400; font-size:12px}
.a-kj .jp{color:var(--ink); font-size:16px; font-family:var(--jp)}
.kws{margin-top:14px; border-top:1px solid var(--line); padding-top:11px}
.kw{display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; margin-top:6px}
/* Жишээ үг: толгой үг нь бэх, уншлага нь бүдэг. Урьд нь `.kw > .jp`
   нь толгой үгийг ЧУ улаанаар будаж (b.jp бас шууд хүү), гурван мөр
   улаан гарч «朱 нь ховор» гэсэн зарчмыг эвддэг байв. */
.kw b{font-family:var(--jpd); font-size:19px; font-weight:400; min-width:0;
      color:var(--ink)}
.kw > span.jp{font-size:13px; color:var(--ink-2)}
.kw > span:not(:last-child){font-size:13px}
.kw span{font-size:13px; color:var(--ink-2)}
.rsp{background:none; border:0; padding:0 5px; font-size:13px; opacity:.4;
     line-height:1; vertical-align:middle}
.rsp:hover{opacity:1}

.exs{margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
     text-align:left}
.exs b{display:inline; font-family:var(--jpd); font-size:18px; font-weight:400;
       line-height:1.85; color:var(--ink)}
.exs .rsp{font-size:14px}

/* Өргөлтийн зураглал: мора бүрийн ДЭЭР өндөр/нам түвшний хэвтээ зураас,
   өөрчлөгдөх газарт босоо холбоос. Дээд зураас = өндөр, доод нь = нам. */
.pitch{display:inline-block; font-family:var(--jp); font-size:20px;
       line-height:1.3; padding-top:17px; color:var(--ink)}
.pitch .pm,.pitch .pn,.pitch .pgap{position:relative; display:inline-block}
.pitch .pm::before{content:''; position:absolute; left:0; right:0; height:1.5px;
                   background:var(--accent)}
.pitch .pm.hi::before{top:-15px}
.pitch .pm.lo::before{top:-7px}
.pitch .pm.dn::after,.pitch .pm.up::after{content:''; position:absolute; right:-1px;
       top:-15px; width:1.5px; height:10px; background:var(--accent)}
.pitch .pgap{opacity:.35; padding:0 2px}

.pane{margin-top:22px; display:grid; gap:12px}
/* Сонголтууд — мөр бүр нэг шугам. Дүүргэсэн товч биш. */
.choices{display:grid; gap:var(--list-gap); border-top:var(--list-top)}
.choices button{
  background:var(--box-bg); border:var(--box-bd); border-bottom:var(--box-sep);
  border-radius:var(--box-r); box-shadow:var(--elev);
  color:var(--ink); padding:16px 6px; font-size:17px; text-align:left;
  position:relative;
}
.choices button:hover:not(:disabled){background:var(--card)}
.choices button.jpface{font-family:var(--jpd); font-size:23px}
/* Зөв хариулт ЗҮҮНЭЭС БАРУУН ТИЙШ өнгөөр дүүрнэ — гэнэт солигдохоос
   илүү тод мэдрэгдэнэ. Дэвсгэрийг нь давхаргаар будаж хэмжээг хөдөлгөнө. */
.choices button.correct{
  color:var(--ok);
  background-image:linear-gradient(var(--ok-bg),var(--ok-bg));
  background-repeat:no-repeat; background-size:0 100%;
  animation:fillIn .34s cubic-bezier(.4,0,.2,1) forwards;
}
.choices button.correct::after{content:'正'; position:absolute; right:8px;
  font-family:var(--jpd); color:var(--ok); opacity:.8}
@keyframes fillIn{to{background-size:100% 100%}}
.choices button.wrong{
  background:var(--ng-bg); color:var(--ng); animation:shake .32s ease;
}
.choices button.wrong::after{content:'誤'; position:absolute; right:8px;
  font-family:var(--jpd); color:var(--ng); opacity:.8}
@keyframes shake{
  10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(3px)}
  50%{transform:translateX(-3px)}
}

/* Бичих талбар — хайрцаг биш, ДООГУУР зураас. Дэвтрийн мөр шиг. */
/* Хэрэглэгч ЛАТИНААР бичдэг (кана руу нь апп хөрвүүлж доор нь харуулна)
   тул энд япон фонт биш, UI-ийн фонт зөв. */
#t-input{
  width:100%; padding:14px 4px; font-size:19px; border-radius:0;
  border:var(--box-bd); border-bottom:1px solid var(--line-2);
  border-radius:var(--box-r); background:var(--box-bg); color:var(--ink);
  font-family:var(--ui);
}
#t-input:focus{outline:0; border-bottom-color:var(--accent)}
.t-kana{font-family:var(--jpd); font-size:32px; min-height:44px; text-align:center;
        color:var(--accent)}
.verdict{text-align:center; font-size:16px; font-family:var(--disp)}
.verdict.ok{color:var(--ok)} .verdict.ng{color:var(--ng)}

/* ---------- өнөөдрийн явц ба дүгнэлт ---------- */
.today{display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px;
       align-items:center; background:var(--box-bg); border:var(--box-bd);
       border-bottom:var(--box-sep); border-radius:var(--box-r);
       box-shadow:var(--elev); padding:16px 0; margin-bottom:0}
.tstat{text-align:center; min-width:56px}
.tstat b{display:block; font-family:var(--disp); font-size:30px; line-height:1;
         color:var(--ink)}
.tstat span{font-size:10px; color:var(--ink-3); letter-spacing:.1em;
            text-transform:uppercase}
.tgoal .tg-head{display:flex; justify-content:space-between; align-items:baseline;
                font-size:11px; color:var(--ink-3); margin-bottom:8px;
                letter-spacing:.12em; text-transform:uppercase}
.tgoal .tg-head b{color:var(--ink); font-variant-numeric:tabular-nums;
                  font-family:var(--disp); letter-spacing:0}
.tgoal .track{height:var(--track-h); background:var(--line);
              border-radius:var(--r); overflow:hidden}
.tgoal .fill{display:block; height:100%; width:0; background:var(--accent);
             transition:width .25s}
.wide{width:100%; margin-bottom:10px}

.fin{background:var(--box-bg); border:var(--box-bd); border-bottom:var(--box-sep);
     border-radius:var(--box-r); box-shadow:var(--elev);
     padding:40px 0 34px; text-align:center; margin-bottom:0}
.fin-pct{font-family:var(--disp); font-size:70px; font-weight:400; line-height:.9;
         color:var(--ink); letter-spacing:-.03em}
.fin-sub{margin-top:14px; color:var(--ink-2); font-variant-numeric:tabular-nums;
         font-size:13px; letter-spacing:.06em}
.misslist{display:grid; gap:var(--list-gap); border-top:var(--list-top);
          margin-bottom:18px}
.ms{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:baseline;
    background:var(--box-bg); border:var(--box-bd); border-bottom:var(--box-sep);
    border-radius:var(--box-r); padding:12px 4px}
.ms b{font-family:var(--jpd); font-size:20px; font-weight:400}
.ms span{font-size:13px; color:var(--ink-2)}

#pane-next{position:sticky; bottom:0; z-index:5; background:var(--bg);
           padding:12px 0 calc(12px + env(safe-area-inset-bottom))}

/* ---------- явц ---------- */
.statsum{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--list-gap);
         border-top:var(--list-top); border-bottom:var(--box-sep)}
.statsum div{background:var(--box-bg); border:var(--box-bd);
             border-radius:var(--box-r); box-shadow:var(--elev);
             padding:18px 6px; text-align:center}
.statsum div + div{border-left:var(--box-sep)}
.statsum b{display:block; font-family:var(--disp); font-size:26px; line-height:1.1;
           color:var(--ink)}
.statsum span{font-size:10px; color:var(--ink-3); letter-spacing:.1em;
              text-transform:uppercase; margin-top:4px; display:block}
.statles{display:grid; gap:0}
.statles .l{display:grid; grid-template-columns:38px 1fr 56px; gap:12px;
            align-items:center; font-size:12.5px; padding:7px 0;
            border-bottom:var(--box-sep)}
.statles .l > span:first-child{color:var(--ink-2); font-family:var(--disp)}
.statles .track{position:relative; height:var(--track-h); background:var(--line);
                border-radius:var(--r); overflow:hidden}
.statles .seen,.statles .fill{position:absolute; left:0; top:0; height:100%}
.statles .seen{background:var(--accent); opacity:.3}
.statles .fill{background:var(--accent)}
.statles .num{text-align:right; color:var(--ink-3); font-variant-numeric:tabular-nums}
/* Хэсгийн нэр «初級1», «N5 үг» гэх мэт урт тул шошгын багана өргөн хэрэгтэй. */
.statles.wide .l{grid-template-columns:62px 1fr 74px}
.statles.wide .l > span:first-child{font-size:13.5px; color:var(--ink)}
.statles.wide .l .jpd{font-size:15px}
/* Явцын таб 6 ширхэг. 6 багана болговол утсан дээр «初級1» шахагдаж
   уншигдахгүй болдог тул 3×2. */
.lessons.stabs{grid-template-columns:repeat(3,1fr); margin-bottom:14px}
.lessons.stabs button{font-size:14px; padding:12px 0 10px}
.lessons.stabs .jpd{font-size:16px}
.lg{display:inline-flex; align-items:center; gap:5px; margin-left:12px;
    white-space:nowrap}
.lg i{width:14px; height:2px; border-radius:0; background:var(--accent);
      display:inline-block}
.lg i.s{opacity:.3}

.hint{font-size:12.5px; color:var(--ink-2); line-height:1.75; margin:8px 0}

/* ---------- санал хүсэлт ---------- */
#fb-body{
  width:100%; padding:14px 4px; font:inherit; font-size:15px; line-height:1.7;
  border-radius:0; border:0; border-bottom:1px solid var(--line-2);
  background:none; color:var(--ink); resize:vertical; min-height:130px;
}
#fb-contact{
  width:100%; padding:12px 4px; font:inherit; font-size:15px;
  border-radius:0; border:0; border-bottom:1px solid var(--line-2);
  background:none; color:var(--ink);
}
#fb-body:focus,#fb-contact:focus{outline:0; border-bottom-color:var(--accent)}
.fb-count{text-align:right; font-size:11px; color:var(--ink-3); margin-top:6px}
a.ghost{display:inline-block; text-decoration:none}
.bigcard.quiet .bc-jp{font-size:21px; color:var(--ink-3)}
.synccode{
  font-family:var(--mono); font-size:20px; letter-spacing:.16em;
  background:none; border:0; border-bottom:1px solid var(--line-2); border-radius:0;
  padding:14px 4px; text-align:center; user-select:all; word-break:break-all;
}

@media (max-width:380px){
  .lessons{grid-template-columns:repeat(5,1fr)}
  .prompt{font-size:42px}
  .prompt.kj{font-size:92px}
  .due-n{font-size:64px}
}

@media (hover:hover) and (pointer:fine){
  .choices button::before{
    content:attr(data-k); display:inline-block; min-width:16px; margin-right:12px;
    font-size:10px; line-height:14px; color:var(--ink-3);
    border:1px solid var(--line); border-radius:2px; text-align:center;
    vertical-align:middle;
  }
}


/* ═══ Гүнтэй дэвсгэр ба 3D үгийн цагираг ═══════════════════════════
 *
 * Хоёулаа ЧИМЭГЛЭЛ тул `#bg`, `.ring3d` хоёрыг `aria-hidden` болгож,
 * хөдөлгөөн унтраасан үед бүрэн устгана. Аль нь ч зайлшгүй мэдээлэл
 * агуулахгүй — алга болсон ч апп бүрэн ажиллана.
 */

/* Дэвсгэр давхарга бүх агуулгын АРД байхын тулд өнгийг `html` дээр
   тавьж, `body`-г тунгалаг болгоно. */
html{background:var(--bg)}

#bg{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
#bg i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(70px); opacity:var(--fx-op);
}
#bg i:nth-child(1){width:54vmax; height:54vmax; left:-18vmax; top:-20vmax;
  background:var(--fx1); animation:drift1 34s ease-in-out infinite alternate}
#bg i:nth-child(2){width:46vmax; height:46vmax; right:-16vmax; top:24vmax;
  background:var(--fx2); animation:drift2 46s ease-in-out infinite alternate}
#bg i:nth-child(3){width:40vmax; height:40vmax; left:10vmax; bottom:-18vmax;
  background:var(--fx3); animation:drift3 40s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate3d(14vmax,9vmax,0) scale(1.16)}}
@keyframes drift2{to{transform:translate3d(-12vmax,-11vmax,0) scale(.86)}}
@keyframes drift3{to{transform:translate3d(9vmax,-8vmax,0) scale(1.1)}}

/* Нүүрний баатар. Цагираг нь картаас ӨНДӨР тул дээр доогуур нь картууд
   эргэлдэж харагдана — хайрцагтай загварт ч (弁当, 遊) далдрахгүй. */
/* Цагирагийг баатрын хавтангийн ЯГ ард тавихыг оролдоод болиод байв:
   хайрцагтай загварт (弁当, 遊) хавтан нь бүрэн бүрхэж, цагираг огт
   харагдахгүй болно. Тиймээс цагираг ӨӨРИЙН зурвастай — хавтан нь
   доод хэсэг дээр нь ДАВХАРЛАНА. Ингэснээр «ард нь» гэсэн мэдрэмж
   хэвээр, гэхдээ загвар бүрд харагдана. */
.hero{position:relative; padding:0 0 8px}
/* Нүүрэн дээр л хавтан нь цагираг дээр давхарлана. Сонголтын
   дэлгэцүүд дээр цагираг энгийн зурвас хэвээр. */
.hero .ring3d{margin-bottom:-52px}
.ringslot:empty{display:none}
.ring3d{
  position:relative; width:100%; height:198px; margin:0 auto;
  z-index:0; perspective:1000px; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);
}
.hero .due{position:relative; z-index:1}
.ring3d-in{
  position:absolute; left:50%; top:50%; width:0; height:0;
  transform-style:preserve-3d; animation:ringSpin 46s linear infinite;
}
/* Багахан налуу — картууд хавтгай биш, эргэлдэж байгаа нь мэдрэгдэнэ. */
@keyframes ringSpin{
  from{transform:rotateX(-9deg) rotateY(0)}
  to{transform:rotateX(-9deg) rotateY(-360deg)}
}
.ring3d .c{
  position:absolute; width:62px; height:86px; margin:-43px -31px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--jpd); font-size:19px; line-height:1.15; padding:4px;
  color:var(--ink-2); background:var(--card);
  border:1px solid var(--line); border-radius:var(--box-r);
  opacity:.62; backface-visibility:hidden; overflow:hidden;
}
/* Дасгал эхлэхэд цагираг хурдсаад холдоно — карт нь «сугарч» гарсан мэт. */
.ring3d.pull .ring3d-in{animation-duration:5s}
.ring3d.pull{transition:opacity .5s ease, transform .5s ease;
             opacity:0; transform:scale(.84)}

/* Цагирагаас сугарч дасгалын карт болж томрох НИСДЭГ карт. */
.flyer{
  position:fixed; z-index:60; pointer-events:none;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:var(--jpd); color:var(--ink); background:var(--card);
  border:1px solid var(--line-2); border-radius:var(--box-r);
  box-shadow:0 20px 60px rgba(0,0,0,.34);
}

/* Хөдөлгөөн унтраасан — эсвэл систем нь «багасга» гэсэн. */
.nofx #bg,.nofx .ring3d{display:none}
@media (prefers-reduced-motion:reduce){ #bg,.ring3d{display:none} }

/* Цаасны мөхлөг. 和紙 нь гөлгөр биш — энэ давхарга л «цаас»-ыг цаас
   болгодог. Хүрэлт нэвтэрдэг, зөвхөн харагдац. */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:var(--grain); background-size:150px 150px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Хөдөлгөөн багасгахыг хүссэн хэрэглэгчид бүх анимацийг унтраана. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}