/* ========== ธีม ========== */
:root{
  --radius:18px;
  --radius-sm:12px;
  --maxw:720px;
  --font-scale:1;
  --ok:#5fb98a; --ok-bg:rgba(95,185,138,.14);
  --ng:#d98a85; --ng-bg:rgba(217,138,133,.14);
  --shadow:0 6px 24px rgba(0,0,0,.18);
  --t:.22s cubic-bezier(.4,0,.2,1);
}
/* โหมดกลางคืน: เทาอมฟ้าอุ่น คอนทราสต์ต่ำ ไม่มีสีขาว/ดำบริสุทธิ์ */
html[data-theme="night"]{
  --bg:#161b22; --bg2:#1c222b; --card:#202733; --card2:#28303d;
  --line:#2f3845; --text:#e2ded4; --text-dim:#a3a79f; --text-soft:#8b9099;
  --accent:#7fc4b4; --accent-soft:rgba(127,196,180,.14); --accent-ink:#13302c;
  --gold:#d9b779;
}
/* โหมดกระดาษ: ซีเปียอ่อน อ่านกลางวันสบายตา */
html[data-theme="sepia"]{
  --bg:#f3ece0; --bg2:#ece3d4; --card:#fbf6ec; --card2:#f2eade;
  --line:#ddd2bd; --text:#3d3832; --text-dim:#6e665c; --text-soft:#8a8176;
  --accent:#2f8070; --accent-soft:rgba(47,128,112,.12); --accent-ink:#ffffff;
  --gold:#a8762a;
  --shadow:0 6px 20px rgba(120,100,70,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:"Noto Sans Thai","Noto Sans JP",system-ui,sans-serif;
  font-size:calc(16px * var(--font-scale));
  line-height:1.75; letter-spacing:.01em;
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
  transition:background var(--t),color var(--t);
}
.jp{font-family:"Noto Sans JP","Noto Sans Thai",sans-serif}

/* ========== แถบบน ========== */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:10px;
  padding:12px 14px calc(12px) ; padding-top:calc(12px + env(safe-area-inset-top));
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.brand{display:flex; flex-direction:column; line-height:1.2; margin-right:auto}
.brand-jp{font-family:"Noto Sans JP",sans-serif; font-weight:700; color:var(--accent); font-size:1.05rem}
.brand-th{font-size:.74rem; color:var(--text-soft)}
.top-actions{display:flex; gap:8px}
.icon-btn{
  width:38px;height:38px;border-radius:12px;border:1px solid var(--line);
  background:var(--card); color:var(--text-dim); font-size:1.05rem; cursor:pointer;
  display:grid;place-items:center; transition:var(--t);
}
.icon-btn:active{transform:scale(.94)}

/* ========== เลย์เอาต์ ========== */
.app{max-width:var(--maxw); margin:0 auto; padding:18px 14px 10px}
.view{animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
h2.title{font-size:1.25rem;margin:0 0 4px}
p.sub{margin:0 0 18px; color:var(--text-soft); font-size:.88rem}
.section-label{font-size:.78rem;color:var(--text-soft);margin:22px 0 10px;letter-spacing:.06em}

/* ========== การ์ด ========== */
.hero{
  background:linear-gradient(145deg,var(--card),var(--card2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:var(--shadow); margin-bottom:18px;
}
.hero h1{margin:0 0 6px; font-size:1.3rem}
.hero p{margin:0; color:var(--text-dim); font-size:.9rem}
.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px}
.stat{background:var(--bg2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 8px; text-align:center}
.stat b{display:block; font-size:1.25rem; color:var(--accent)}
.stat span{font-size:.7rem; color:var(--text-soft)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.cat-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 14px; cursor:pointer; text-align:left; color:inherit;
  font:inherit; transition:var(--t); position:relative; overflow:hidden;
}
.cat-card:active{transform:scale(.97)}
.cat-card .ic{font-size:1.6rem; display:block; margin-bottom:6px}
.cat-card .nm{font-weight:500; font-size:.95rem}
.cat-card .ds{font-size:.72rem; color:var(--text-soft); margin-top:2px}
.bar{height:5px; border-radius:99px; background:var(--bg2); margin-top:10px; overflow:hidden}
.bar>i{display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .4s}
.bar-label{font-size:.68rem;color:var(--text-soft);margin-top:4px;display:block}

/* ========== การ์ดคำศัพท์ ========== */
.word{
  display:flex; align-items:center; gap:14px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; margin-bottom:10px;
}
.word .main{flex:1; min-width:0}
.word .jpw{font-family:"Noto Sans JP",sans-serif; font-size:1.5rem; font-weight:500; line-height:1.3}
.word .read{font-size:.76rem; color:var(--accent); margin-top:1px; font-family:"Noto Sans JP",sans-serif}
.word .romaji{font-size:.7rem; color:var(--text-soft)}
.word .th{font-size:.95rem; color:var(--text-dim); margin-top:5px}
.tagline{display:flex; gap:6px; margin-top:7px; flex-wrap:wrap}
.tag{font-size:.64rem; padding:2px 8px; border-radius:99px; background:var(--bg2); color:var(--text-soft); border:1px solid var(--line)}
.tag.lv{color:var(--gold)}
.tag.srs{background:var(--accent-soft); color:var(--accent); border-color:transparent}
.play{
  flex:none; width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--accent-soft); color:var(--accent); font-size:1.15rem; cursor:pointer; transition:var(--t);
}
.play:active{transform:scale(.9)}
.play.on{background:var(--accent); color:var(--accent-ink)}

/* ========== ปุ่ม / ชิป ========== */
.btn{
  display:block; width:100%; padding:15px; border-radius:var(--radius); border:none;
  background:var(--accent); color:var(--accent-ink); font:inherit; font-weight:700;
  cursor:pointer; transition:var(--t); margin-top:12px;
}
.btn:active{transform:scale(.98)}
.btn.ghost{background:var(--card); color:var(--text); border:1px solid var(--line)}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.chip{
  padding:7px 14px; border-radius:99px; border:1px solid var(--line); background:var(--card);
  color:var(--text-dim); font:inherit; font-size:.8rem; cursor:pointer; transition:var(--t);
}
.chip.on{background:var(--accent); color:var(--accent-ink); border-color:transparent; font-weight:500}

/* ========== เกมตอบคำถาม ========== */
.qhead{display:flex; align-items:center; justify-content:space-between; font-size:.78rem; color:var(--text-soft); margin-bottom:8px}
.qbar{height:6px; border-radius:99px; background:var(--bg2); overflow:hidden; margin-bottom:20px}
.qbar>i{display:block; height:100%; background:var(--accent); transition:width .3s}
.qcard{
  background:linear-gradient(150deg,var(--card),var(--card2)); border:1px solid var(--line);
  border-radius:24px; padding:30px 20px; text-align:center; box-shadow:var(--shadow); margin-bottom:18px;
}
.qcard .qlabel{font-size:.75rem; color:var(--text-soft); margin-bottom:12px}
.qcard .qmain{font-family:"Noto Sans JP",sans-serif; font-size:2.3rem; font-weight:700; line-height:1.35; word-break:break-word}
.qcard .qmain.th-q{font-family:"Noto Sans Thai",sans-serif; font-size:1.6rem}
.qcard .qsub{font-size:.82rem; color:var(--accent); margin-top:6px}
.choice{
  width:100%; text-align:left; padding:15px 18px; border-radius:var(--radius);
  border:1.5px solid var(--line); background:var(--card); color:var(--text);
  font:inherit; margin-bottom:10px; cursor:pointer; transition:var(--t);
}
.choice:active{transform:scale(.985)}
.choice .ctext{font-size:1.05rem}
.choice .csub{font-size:.72rem; color:var(--text-soft); font-family:"Noto Sans JP",sans-serif}
.choice.correct{border-color:var(--ok); background:var(--ok-bg)}
.choice.wrong{border-color:var(--ng); background:var(--ng-bg)}
.choice.dim{opacity:.45}
.choice[disabled]{cursor:default}

.explain{
  border-radius:var(--radius); padding:16px 18px; margin-top:6px;
  border:1px solid var(--line); background:var(--card); animation:fade .25s ease;
}
.explain.good{border-color:var(--ok); background:var(--ok-bg)}
.explain.bad{border-color:var(--ng); background:var(--ng-bg)}
.explain .eh{font-weight:700; margin-bottom:8px}
.explain .erow{display:flex; align-items:center; gap:12px}
.explain .ejp{font-family:"Noto Sans JP",sans-serif; font-size:1.5rem; font-weight:500}
.explain .emeta{font-size:.76rem; color:var(--text-dim)}
.explain .enote{font-size:.82rem; color:var(--text-dim); margin-top:10px; line-height:1.7}

/* ========== สรุปผล ========== */
.result{text-align:center; padding:26px 18px; background:var(--card); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow)}
.result .score{font-size:3rem; font-weight:700; color:var(--accent); line-height:1}
.result .msg{color:var(--text-dim); margin-top:8px; font-size:.9rem}
.mini{display:flex; justify-content:space-between; font-size:.82rem; padding:9px 2px; border-bottom:1px solid var(--line)}
.mini:last-child{border:none}

/* ========== แถบเมนูล่าง ========== */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40; 
  display:flex; justify-content:space-around; align-items:center;
  background:color-mix(in srgb,var(--bg) 95%,transparent); backdrop-filter:blur(14px);
  border-top:1px solid var(--line); padding:4px 2px env(safe-area-inset-bottom);
}
.tab{
  border:none; background:none; color:var(--text-soft); font:inherit; font-size:0.55rem;
  padding:4px 2px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:1px; 
  white-space:nowrap; flex:1; min-width:0; transition:var(--t);
}
.tab span{font-size:1.1rem; line-height:1}
.tab.is-active{color:var(--accent)}


.empty{text-align:center; padding:40px 18px; color:var(--text-soft); font-size:.8rem}
.empty .big{font-size:2.4rem; display:block; margin-bottom:10px}
.toast{
  position:fixed; left:50%; bottom:92px; transform:translateX(-50%);
  background:var(--card2); color:var(--text); border:1px solid var(--line);
  padding:10px 18px; border-radius:99px; font-size:.82rem; z-index:60; box-shadow:var(--shadow);
}
@media (min-width:700px){ .word .jpw{font-size:1.7rem} }

/* ===== ค้นหา ===== */
.searchbox{display:flex;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:4px 6px 4px 14px;margin-bottom:14px}
.searchbox input{flex:1;background:none;border:none;outline:none;color:var(--text);font:inherit;padding:12px 0}
.searchbox input::placeholder{color:var(--text-soft)}
.searchbox .icon-btn{flex:none}
.hint{font-size:.78rem;color:var(--text-soft);margin:-6px 0 14px}
mark{background:var(--accent-soft);color:var(--accent);border-radius:4px;padding:0 2px}

/* ===== ตัวอย่างประโยค ===== */
.ex{margin-top:10px;padding:10px 12px;border-left:3px solid var(--accent);
  background:var(--bg2);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.ex .exj{font-family:"Noto Sans JP",sans-serif;font-size:.98rem;line-height:1.7}
.ex .ext{font-size:.82rem;color:var(--text-soft);margin-top:3px}
.ex .exbar{display:flex;align-items:center;gap:8px;margin-top:8px}
.ex .mini-play{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);
  background:var(--accent-soft);color:var(--accent);font-size:.78rem;cursor:pointer}
.ex .auto{font-size:.62rem;color:var(--text-soft);border:1px dashed var(--line);
  border-radius:99px;padding:1px 8px}

/* ===== คันจิ ===== */
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.kcell{aspect-ratio:1;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;cursor:pointer;transition:var(--t);position:relative}
.kcell:active{transform:scale(.94)}
.kcell b{font-family:"Noto Sans JP",serif;font-size:2.1rem;font-weight:500;line-height:1}
.kcell i{position:absolute;bottom:5px;font-size:.6rem;color:var(--text-soft);font-style:normal}
.kcell.done{border-color:var(--accent);background:var(--accent-soft)}
.kdetail{text-align:center;background:linear-gradient(150deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:24px;padding:24px 18px;box-shadow:var(--shadow);margin-bottom:16px}
.kdetail .kbig{font-family:"Noto Sans JP",serif;font-size:5rem;line-height:1.1}
.kdetail .kmean{font-size:1.05rem;margin-top:8px}
.kdetail .krow{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:12px;font-size:.8rem}
.kread{background:var(--bg2);border:1px solid var(--line);border-radius:99px;padding:5px 14px}
.kread b{color:var(--accent);font-weight:500}

/* ===== กระดานฝึกเขียน ===== */
.modal{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.55);
  display:grid;place-items:center;padding:16px;animation:fade .2s ease}
.sheet{background:var(--card);border:1px solid var(--line);border-radius:22px;
  padding:16px;width:100%;max-width:360px;box-shadow:var(--shadow)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
#wcv{width:100%;aspect-ratio:1;border-radius:var(--radius-sm);background:var(--bg2);
  border:1px solid var(--line);touch-action:none;display:block}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.row2 .btn{margin-top:0}