/* MathForKids v1.0 — stylesheet */
:root{
  --bg:#f3f6ff;
  --card:#ffffff;
  --ink:#22284f;
  --ink-soft:#5c6595;
  --line:#e3e8fb;
  --brand:#5b6cff;
  --brand-dk:#4351e0;
  --mint:#22c9a0;
  --sun:#ffb02e;
  --rose:#ff6b8b;
  --grape:#9b6bff;
  --sky:#3fb9ff;
  --ok:#18b96b;
  --no:#ff5468;
  --r:20px;
  --shadow:0 6px 0 rgba(34,40,79,.08), 0 12px 28px rgba(34,40,79,.10);
  --shadow-sm:0 3px 0 rgba(34,40,79,.07), 0 6px 16px rgba(34,40,79,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  font-family:"Noto Sans Thai","Baloo 2",system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--ink); min-height:100vh;
  overflow-x:hidden;
}
body.lang-en{font-family:"Baloo 2","Noto Sans Thai",system-ui,sans-serif}

#bg-decor{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(900px 500px at 12% -8%, #dfe6ff 0%, transparent 60%),
    radial-gradient(800px 480px at 92% 4%, #ffe9d6 0%, transparent 60%),
    radial-gradient(700px 500px at 50% 110%, #d8fff3 0%, transparent 60%);
}

/* ---------- topbar ---------- */
#topbar{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:10px;
  padding:10px 14px;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.tb-btn{
  border:none;background:#fff;border:2px solid var(--line);border-radius:14px;
  min-width:42px;height:42px;padding:0 10px;font-size:18px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--ink);
  transition:transform .12s ease, background .12s;
}
.tb-btn:hover{transform:translateY(-1px);background:#f7f9ff}
.tb-btn:active{transform:translateY(1px)}
.tb-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.crumb{font-weight:700;color:var(--ink-soft);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.star-chip{display:inline-flex;align-items:center;gap:5px;background:#fff6e0;border:2px solid #ffe2ab;
  border-radius:14px;height:42px;padding:0 12px;font-weight:800;color:#a9700a}

/* ---------- layout ---------- */
main{max-width:1080px;margin:0 auto;padding:18px 14px 80px}
.loading{padding:60px;text-align:center;color:var(--ink-soft)}
.hero{
  background:linear-gradient(135deg,var(--brand),var(--grape));color:#fff;border-radius:26px;
  padding:26px 24px;box-shadow:var(--shadow);margin-bottom:20px;position:relative;overflow:hidden
}
.hero h1{margin:0 0 6px;font-size:clamp(24px,4.4vw,34px);line-height:1.25}
.hero p{margin:0;opacity:.92;font-size:15px}
.hero .emoji{position:absolute;right:-6px;bottom:-14px;font-size:110px;opacity:.22;transform:rotate(-12deg)}

h2.section{font-size:20px;margin:24px 0 12px;display:flex;align-items:center;gap:8px}
.muted{color:var(--ink-soft)}
.small{font-size:13px}

/* ---------- grade grid ---------- */
.grade-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.grade-card{
  border:none;text-align:left;cursor:pointer;border-radius:var(--r);padding:18px;color:#fff;
  box-shadow:var(--shadow);transition:transform .14s ease;font-family:inherit;position:relative;overflow:hidden
}
.grade-card:hover{transform:translateY(-3px)}
.grade-card .gnum{font-size:34px;font-weight:800;line-height:1}
.grade-card .gname{font-weight:700;margin-top:4px}
.grade-card .gsub{font-size:12.5px;opacity:.9;margin-top:6px}
.grade-card .gbar{height:8px;border-radius:8px;background:rgba(255,255,255,.35);margin-top:12px;overflow:hidden}
.grade-card .gbar i{display:block;height:100%;background:#fff;border-radius:8px}
.grade-card.locked{filter:grayscale(.35);opacity:.85}
.grade-card .ico{position:absolute;right:8px;top:6px;font-size:40px;opacity:.28}

/* ---------- topic list ---------- */
.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.topic-card{
  background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:16px;
  box-shadow:var(--shadow-sm);cursor:pointer;text-align:left;font-family:inherit;color:inherit;
  transition:transform .14s ease,border-color .14s;display:flex;flex-direction:column;gap:8px
}
.topic-card:hover{transform:translateY(-3px);border-color:var(--brand)}
.topic-head{display:flex;align-items:center;gap:10px}
.topic-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;flex:none}
.topic-title{font-weight:700;font-size:16px;line-height:1.3}
.topic-sub{font-size:12.5px;color:var(--ink-soft)}
.stars{letter-spacing:2px;font-size:15px}
.stars .off{opacity:.25}
.topic-meta{display:flex;justify-content:space-between;align-items:center;margin-top:2px}
.pill{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:#eef1ff;color:var(--brand-dk)}
.pill.done{background:#e2fbf0;color:#0d8f5c}

/* ---------- buttons ---------- */
.btn{
  border:none;border-radius:16px;padding:13px 20px;font-size:16px;font-weight:700;cursor:pointer;
  font-family:inherit;background:var(--brand);color:#fff;box-shadow:0 4px 0 var(--brand-dk);
  transition:transform .1s ease;display:inline-flex;align-items:center;gap:8px;justify-content:center
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--brand-dk)}
.btn.ghost{background:#fff;color:var(--ink);border:2px solid var(--line);box-shadow:var(--shadow-sm)}
.btn.mint{background:var(--mint);box-shadow:0 4px 0 #14a082}
.btn.sun{background:var(--sun);box-shadow:0 4px 0 #d98b12;color:#4a3200}
.btn.rose{background:var(--rose);box-shadow:0 4px 0 #d94a6a}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* ---------- lesson / quiz shell ---------- */
.panel{background:var(--card);border:2px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow);margin-bottom:16px}
.panel h3{margin:0 0 6px;font-size:20px}
.step-dots{display:flex;gap:6px;margin:14px 0 6px;flex-wrap:wrap}
.step-dots i{width:26px;height:8px;border-radius:8px;background:var(--line);display:block}
.step-dots i.on{background:var(--brand)}
.step-dots i.done{background:var(--mint)}
.explain{background:#f6f8ff;border:2px dashed #d6dcff;border-radius:16px;padding:14px 16px;margin:12px 0;font-size:15.5px;line-height:1.65}
.explain b{color:var(--brand-dk)}
.tip{background:#fff8e8;border-color:#ffe0a8}
.stage{margin:16px 0;display:flex;flex-direction:column;align-items:center;gap:14px}

/* widgets */
.obj-grid{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:560px}
.obj{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:26px;cursor:pointer;
  background:#fff;border:2px solid var(--line);transition:transform .1s, background .15s;user-select:none
}
.obj:hover{transform:scale(1.06)}
.obj.sel{background:#e6fff5;border-color:var(--mint);transform:scale(1.06)}
.obj.dim{opacity:.28}
.counter-readout{font-size:44px;font-weight:800;color:var(--brand-dk)}

.tenframe{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;background:#fff;border:3px solid var(--ink);
  border-radius:14px;padding:6px}
.tenframe .cell{width:46px;height:46px;border:2px solid #c9d0f2;border-radius:10px;display:grid;place-items:center;
  font-size:24px;cursor:pointer;background:#fbfcff}
.tenframe .cell.fill{background:#ffe7ee;border-color:var(--rose)}
.frames-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}

.baseten{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap;justify-content:center}
.bt-col{text-align:center}
.bt-label{font-weight:700;font-size:13px;color:var(--ink-soft);margin-bottom:6px}
.bt-items{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;max-width:200px;min-height:60px;align-items:flex-end}
/* หมายเหตุ: ต้องรวมทุกชั้นไว้ใน background-image เดียว
   ถ้าเขียน background: <สี> แล้วตามด้วย background-image: <ลาย> ทีหลัง ลายจะทับสีจนแท่งกลายเป็นสีขาวมองไม่เห็น */
.hundred{width:54px;height:54px;border-radius:8px;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.35) 0 1px,transparent 1px 5.4px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.35) 0 1px,transparent 1px 5.4px),
    linear-gradient(#9b6bff,#7d49f5)}
.ten{width:14px;height:54px;border-radius:5px;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0 1px,transparent 1px 5.4px),
    linear-gradient(#3fb9ff,#1f95dd)}
.one{width:14px;height:14px;background:linear-gradient(#ffb02e,#f08a00);border-radius:4px}
.stepper{display:inline-flex;align-items:center;gap:8px}
.stepper button{width:38px;height:38px;border-radius:12px;border:2px solid var(--line);background:#fff;font-size:20px;font-weight:800;cursor:pointer}
.stepper .val{min-width:44px;text-align:center;font-size:22px;font-weight:800}

.numline{width:100%;max-width:640px;overflow-x:auto;padding-bottom:6px}
.numline-inner{position:relative;height:96px;min-width:520px}
.numline-axis{position:absolute;left:0;right:0;top:52px;height:5px;background:var(--ink);border-radius:5px}
.nl-tick{position:absolute;top:38px;transform:translateX(-50%);text-align:center}
.nl-tick .bar{width:3px;height:20px;background:var(--ink);margin:0 auto;border-radius:3px}
.nl-tick .lbl{font-size:12.5px;font-weight:700;margin-top:4px}
.nl-hit{position:absolute;top:26px;width:34px;height:52px;transform:translateX(-50%);border-radius:10px;cursor:pointer;background:transparent}
.nl-hit:hover{background:rgba(91,108,255,.12)}
.nl-hit.sel{background:rgba(91,108,255,.22)}
.nl-marker{position:absolute;top:6px;transform:translateX(-50%);font-size:26px;transition:left .35s cubic-bezier(.34,1.56,.64,1)}
.nl-jump{position:absolute;top:14px;height:38px;border-top:3px dashed var(--rose);border-radius:50%/100% 100% 0 0;pointer-events:none}

.bond{display:flex;flex-direction:column;align-items:center;gap:0}
.bond .whole,.bond .part{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  font-size:26px;font-weight:800;border:4px solid var(--brand);background:#fff}
.bond .part{border-color:var(--sun)}
.bond .parts{display:flex;gap:60px;margin-top:8px}
.bond .legs{width:180px;height:34px;position:relative}
.bond .legs::before,.bond .legs::after{content:"";position:absolute;top:0;width:3px;height:44px;background:var(--ink-soft);
  border-radius:3px}
.bond .legs::before{left:50%;transform:rotate(38deg);transform-origin:top}
.bond .legs::after{left:50%;transform:rotate(-38deg);transform-origin:top}
.blank-box{width:78px;height:78px;border-radius:50%;border:4px dashed var(--ink-soft);display:grid;place-items:center;
  font-size:26px;font-weight:800;background:#fff;color:var(--ink-soft)}

.colsum{font-variant-numeric:tabular-nums;font-size:34px;font-weight:800;line-height:1.25;letter-spacing:.12em}
.colsum table{border-collapse:collapse}
.colsum td{width:46px;text-align:center;padding:0 2px}
.colsum .carry{font-size:16px;color:var(--rose);height:22px}
.colsum .rule td{border-top:4px solid var(--ink);padding-top:4px}
.colsum .hi{background:#fff3c4;border-radius:8px}
.colsum .op{color:var(--brand-dk)}

.array-grid{display:grid;gap:6px;justify-content:center}
.array-grid .cellx{width:34px;height:34px;border-radius:10px;background:#ffe9f0;border:2px solid var(--rose);
  display:grid;place-items:center;font-size:18px}

.groups{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.group-box{min-width:96px;min-height:96px;border:3px dashed var(--sky);border-radius:18px;padding:8px;
  display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start;justify-content:center;background:#f2fbff}
.group-box .obj{width:30px;height:30px;font-size:18px;border:none;background:transparent}

.fracbar{display:flex;border:3px solid var(--ink);border-radius:12px;overflow:hidden;width:min(440px,90%);height:64px}
.fracbar div{flex:1;border-right:2px solid var(--ink);cursor:pointer;background:#fff;transition:background .15s}
.fracbar div:last-child{border-right:none}
.fracbar div.on{background:var(--sun)}
.fraccircle{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.frac{display:inline-flex;flex-direction:column;align-items:center;font-weight:800;font-size:24px;line-height:1.05}
.frac .num{border-bottom:3px solid currentColor;padding:0 6px}

.clock{position:relative;width:230px;height:230px;border-radius:50%;background:#fff;border:8px solid var(--brand);
  box-shadow:var(--shadow-sm)}
.clock .num{position:absolute;font-weight:800;font-size:19px;transform:translate(-50%,-50%)}
.clock .tick{position:absolute;left:50%;top:0;width:2px;height:50%;margin-left:-1px;transform-origin:bottom center}
.clock .tick i{display:block;width:2px;height:8px;background:#c9d0f2;border-radius:2px}
.clock .hand{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;border-radius:6px;cursor:grab}
.clock .hand.hour{width:9px;height:58px;background:var(--ink);margin-left:-4.5px}
.clock .hand.minute{width:6px;height:84px;background:var(--rose);margin-left:-3px}
.clock .pin{position:absolute;left:50%;top:50%;width:16px;height:16px;background:var(--brand);border-radius:50%;
  transform:translate(-50%,-50%)}
.digital{font-size:36px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.04em}

.coins{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* ---- เงินไทย: ภาพวาดใน money.js แล้ววางเป็นภาพพื้นหลังของ <span> ---- */
/* วางเป็นภาพพื้นหลัง (ไม่ใช่ <svg> ในบรรทัด) ตัวเลขในภาพจึงไม่ปนกับข้อความของปุ่ม */
.mny{display:inline-block;background-repeat:no-repeat;background-position:center;background-size:contain;
  vertical-align:-.34em}
.mny-coin{width:1.5em;height:1.5em}
.mny-note{width:2.7em;height:1.4em;vertical-align:-.4em}
.pe .mny-coin,.spot .mny-coin{width:46px;height:46px;vertical-align:middle}
.pe .mny-note,.spot .mny-note{width:74px;height:38px;vertical-align:middle}
.mny-btn{cursor:pointer;transition:transform .1s;line-height:0;display:inline-block;padding:2px}
.mny-btn.coin .mny{width:58px;height:58px}
.mny-btn.note .mny{width:96px;height:50px}
.mny-btn:hover{transform:translateY(-3px)}
.mny-btn.still{cursor:default}
.mny-btn.still:hover{transform:none}

.wallet{min-height:92px;border:3px dashed var(--mint);border-radius:18px;padding:10px;display:flex;flex-wrap:wrap;gap:8px;
  justify-content:center;align-items:center;background:#f1fff9;width:min(560px,96%)}

.ruler{position:relative;height:74px;background:linear-gradient(#fff3d0,#ffe6a8);border:3px solid #d9a83c;border-radius:10px;
  width:min(600px,96%);overflow:hidden}
.ruler .rt{position:absolute;bottom:0;width:2px;background:#7a5b13}
.ruler .rl{position:absolute;top:6px;font-size:11.5px;font-weight:700;color:#6b4a00;transform:translateX(-50%)}
.ruler .item{position:absolute;top:30px;height:26px;border-radius:8px;background:var(--rose);opacity:.85}

.scale{display:flex;flex-direction:column;align-items:center}
.scale .dial{width:180px;height:180px;border-radius:50%;border:8px solid var(--mint);position:relative;background:#fff;margin-top:8px}
.scale .needle{position:absolute;left:50%;bottom:50%;width:5px;height:70px;background:var(--rose);transform-origin:bottom center;
  border-radius:5px;transition:transform .5s cubic-bezier(.34,1.4,.64,1)}
.beaker{width:120px;height:200px;border:6px solid var(--sky);border-top:none;border-radius:0 0 22px 22px;position:relative;
  background:#f7fdff;overflow:hidden}
.beaker .liquid{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#7fd8ff,#2ea8e6);transition:height .5s ease}
.beaker .mark{position:absolute;right:0;width:22px;border-top:3px solid var(--sky)}
.beaker .mlbl{position:absolute;right:26px;font-size:11px;font-weight:700;color:#1d7ea8;transform:translateY(-50%)}

.shapes-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.shape{width:84px;height:84px;display:grid;place-items:center;cursor:pointer;border-radius:14px;border:3px solid transparent;
  transition:transform .12s}
.shape:hover{transform:translateY(-3px)}
.shape.sel{border-color:var(--brand);background:#eef1ff}
.shape svg{width:66px;height:66px}

.pgraph{display:flex;gap:10px;align-items:flex-end;justify-content:center;flex-wrap:wrap}
.pg-col{display:flex;flex-direction:column-reverse;align-items:center;gap:4px;min-width:64px}
.pg-col .pgi{font-size:26px;cursor:pointer}
.pg-col .pgl{margin-top:6px;font-size:13px;font-weight:700;border-top:3px solid var(--ink);padding-top:6px;width:100%;text-align:center}
.bargraph{display:flex;gap:14px;align-items:flex-end;height:220px;border-left:4px solid var(--ink);border-bottom:4px solid var(--ink);
  padding:0 12px 0 12px}
.bargraph .bar{width:46px;border-radius:8px 8px 0 0;background:var(--sky);position:relative;transition:height .4s}
.bargraph .bar span{position:absolute;top:-24px;left:0;right:0;text-align:center;font-weight:800;font-size:14px}

/* ---------- quiz ---------- */
.q-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.q-progress{flex:1;min-width:140px;height:14px;background:var(--line);border-radius:10px;overflow:hidden}
.q-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--sky));border-radius:10px;transition:width .35s}
.q-score{font-weight:800;color:var(--brand-dk)}
.q-text{font-size:clamp(19px,3.2vw,25px);font-weight:700;line-height:1.5;margin:12px 0 4px}
.q-visual{margin:10px 0;display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:14px}
.choice{
  background:#fff;border:3px solid var(--line);border-radius:18px;padding:16px 12px;font-size:22px;font-weight:800;
  cursor:pointer;font-family:inherit;color:var(--ink);transition:transform .1s,border-color .15s,background .15s
}
.choice:hover:not(:disabled){transform:translateY(-2px);border-color:var(--brand)}
.choice.ok{background:#e3fbef;border-color:var(--ok);color:#0b7a48}
.choice.no{background:#ffe9ec;border-color:var(--no);color:#b31228}
.choice:disabled{cursor:default}
.answer-row{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:14px;flex-wrap:wrap}
.answer-input{
  width:150px;font-size:32px;font-weight:800;text-align:center;padding:10px;border-radius:16px;
  border:3px solid var(--line);font-family:inherit;color:var(--ink)
}
.answer-input:focus{outline:none;border-color:var(--brand)}
.feedback{margin-top:14px;border-radius:16px;padding:13px 16px;font-weight:700;font-size:16px;display:none}
.feedback.show{display:block;animation:pop .28s}
.feedback.ok{background:#e3fbef;color:#0b7a48;border:2px solid #a9ecca}
.feedback.no{background:#ffe9ec;color:#b31228;border:2px solid #ffc2ca}
.feedback .why{font-weight:500;margin-top:6px;color:var(--ink)}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}

.result{text-align:center;padding:20px}
.result .big{font-size:70px;line-height:1}
.result .score{font-size:46px;font-weight:800;color:var(--brand-dk);margin:6px 0}
.result .stars{font-size:46px;letter-spacing:6px}

/* ---------- progress page ---------- */
table.prog{width:100%;border-collapse:collapse;background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm)}
table.prog th,table.prog td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:14.5px}
table.prog th{background:#f5f7ff;font-weight:700;color:var(--ink-soft)}
table.prog tr:last-child td{border-bottom:none}

/* ---------- modal / toast ---------- */
.modal-back{position:fixed;inset:0;background:rgba(20,24,52,.45);display:grid;place-items:center;z-index:200;padding:16px;
  animation:fade .18s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:24px;padding:22px;max-width:440px;width:100%;box-shadow:var(--shadow);
  animation:pop .22s}
.modal h3{margin:0 0 12px}
.field{margin:12px 0}
.field label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.field input,.field select{width:100%;padding:12px;border-radius:14px;border:2px solid var(--line);font-size:16px;font-family:inherit}
.avatar-pick{display:flex;flex-wrap:wrap;gap:8px}
.avatar-pick button{width:46px;height:46px;font-size:24px;border-radius:14px;border:2px solid var(--line);background:#fff;cursor:pointer}
.avatar-pick button.sel{border-color:var(--brand);background:#eef1ff}

#toast-root{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;
  align-items:center;pointer-events:none}
.toast{background:#22284f;color:#fff;padding:11px 18px;border-radius:14px;font-weight:700;font-size:14.5px;
  box-shadow:var(--shadow);animation:pop .2s}
.toast.ok{background:#12885a}
.toast.no{background:#c62b40}

.confetti{position:fixed;inset:0;pointer-events:none;z-index:400;overflow:hidden}
.confetti i{position:absolute;width:10px;height:16px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.9}}

.offline-badge{display:inline-block;background:#fff1d6;color:#8a5c00;border:2px solid #ffd894;border-radius:999px;
  padding:3px 10px;font-size:12px;font-weight:700;margin-left:8px}

@media (max-width:520px){
  .hero{padding:20px 18px;border-radius:20px}
  .obj{width:40px;height:40px;font-size:22px}
  .tenframe .cell{width:38px;height:38px;font-size:20px}
  .clock{width:200px;height:200px}
  main{padding:14px 10px 70px}
  .crumb{display:none}
}

/* ---- ป้ายเวอร์ชันท้ายหน้า (v1.1.1) ---- */
.appver{text-align:center;padding:2px 12px 18px;font-size:12px;font-weight:600;
  color:#9297bb;letter-spacing:.2px;user-select:none;opacity:.9}
@media (max-width:520px){ .appver{padding-bottom:78px} }

/* ---- การ์ดวิชา (v1.2.0) ---- */
.subject-card{padding:22px 18px;min-height:118px;display:flex;flex-direction:column;justify-content:flex-end}
.subject-card .sname{font-size:22px;font-weight:800;line-height:1.2;padding-right:44px}
.subject-card .ico{font-size:50px;opacity:.22;right:8px;top:10px}

/* ---- login: เลือกคน + แป้น PIN (v1.3.0) ---- */
.err-line{color:#c62b40;min-height:18px;font-weight:700;margin:6px 0}
.profile-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin:10px 0}
.profile-pick .person{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px 6px;
  cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .12s}
.profile-pick .person:hover{transform:translateY(-2px);border-color:#5b6cff}
.profile-pick .pa{font-size:30px;line-height:1}
.profile-pick .pn{font-weight:700;font-size:13.5px;text-align:center;word-break:break-word}
.pin-who{font-size:20px;font-weight:800;text-align:center;margin:6px 0 2px}
.pin-wrap{margin-top:10px}
.pin-dots{display:flex;justify-content:center;gap:14px;margin:12px 0 16px}
.pin-dots i{width:16px;height:16px;border-radius:50%;background:#dfe3f5;display:block}
.pin-dots i.on{background:#5b6cff;transform:scale(1.12)}
.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:280px;margin:0 auto}
.pin-key{font-family:inherit;font-size:24px;font-weight:800;padding:14px 0;border-radius:16px;border:2px solid var(--line);
  background:var(--card);cursor:pointer;transition:transform .1s}
.pin-key:active{transform:scale(.94)}
.pin-key.ghost{font-size:19px;color:#7b81a8}

/* ---- หน้าผู้ดูแล (v1.4.0) ---- */
.admin-subs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.admin-sub{display:flex;align-items:center;gap:8px;background:var(--card);border:2px solid var(--line);
  border-radius:14px;padding:9px 14px;font-weight:700;cursor:pointer}
.admin-list{display:grid;gap:14px}
.admin-card{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:14px}
.admin-head{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.admin-head .av{font-size:32px}
.admin-head .nm{font-weight:800;font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill.admin{background:#e8ebff;color:#3a44b5}
.pill.locked{background:#ffe3e8;color:#c62b40}
.admin-perms{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.admin-perm{display:flex;align-items:center;gap:6px;background:#f4f6ff;border-radius:12px;padding:6px 11px;
  font-size:13.5px;font-weight:600;cursor:pointer}
.admin-perm.all{background:#e8ebff;font-weight:800}
.btn.small{padding:7px 12px;font-size:13.5px}

/* ---- admin: นำเข้าข้อสอบ (v1.5.0) ---- */
.panel textarea{width:100%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;padding:10px;
  border:2px solid var(--line);border-radius:12px;resize:vertical}

/* ---- ปุ่มอ่านออกเสียง + สรุปท้ายบท (v1.6.0) ---- */
.q-line{display:flex;align-items:flex-start;gap:10px;justify-content:center}
.q-line > :first-child{flex:1}
.speak-btn{flex:none;background:#eef1ff;border:2px solid #d8ddfb;border-radius:14px;font-size:20px;line-height:1;
  padding:8px 11px;cursor:pointer;transition:transform .12s,background .12s}
.speak-btn:hover{background:#e2e7ff}
.speak-btn:active{transform:scale(.92)}
.speak-btn.speaking{background:#d5f8e6;border-color:#9fe7c4}
.sum-list{margin:0;padding-left:22px;text-align:left;line-height:1.9;font-size:16px}
.sum-list li{margin-bottom:6px}

/* ---- ข้อสอบจบชั้น + เกียรติบัตร (v1.7.0) ---- */
.exam-card{border:2px dashed #c9d0f5;background:linear-gradient(180deg,#fbfcff,#f3f5ff)}
.exam-card.passed{border-color:#9fe7c4;background:linear-gradient(180deg,#f4fffa,#eafaf2)}
.btn.disabled{opacity:.55}
.choice.sel{border-color:#5b6cff;background:#eef1ff}
.cert{margin:16px auto 0;max-width:460px;border:3px double #c9a227;border-radius:18px;padding:18px 16px;
  background:linear-gradient(180deg,#fffdf3,#fff7e0);text-align:center}
.cert-top{font-weight:800;color:#a5801a;letter-spacing:.5px}
.cert-name{font-size:24px;font-weight:800;margin:8px 0}
.cert-line{font-size:15px;font-weight:600}
.cert-date{margin-top:8px;font-size:13px;color:#8a7a4a}

/* ---- ปุ่มเสียงเมื่ออ่านไม่ได้ (v1.7.1) ---- */
.speak-btn.mute{background:#ffe9e9;border-color:#ffc7c7}
.speak-btn.mute::after{content:'!';font-size:11px;font-weight:800;color:#c62b40;vertical-align:super}

/* ---- widget เลือกคำตอบ (v1.8.0) ---- */
/* width:100% สำคัญมาก — .stage เป็น flex ที่ align-items:center ถ้าไม่กำหนดความกว้าง
   ตารางจะกว้างตามเนื้อหา (4 ช่องเรียงแถวเดียว) แล้วดันทั้งหน้าให้ล้นจอมือถือ */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;
  width:100%;max-width:560px;margin:14px auto 0}
.pick-grid.two{grid-template-columns:repeat(2,1fr)}
.pick .pl{overflow-wrap:anywhere}
@media (max-width:430px){
  .pick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pick{padding:12px 8px;font-size:14px}
  .pick .pe{font-size:32px}
}
.pick{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px 10px;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:15px;display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:transform .12s,border-color .12s}
.pick:hover:not(:disabled){transform:translateY(-2px);border-color:#5b6cff}
.pick .pe{font-size:38px;line-height:1}
.pick.ok{border-color:#18b96b;background:#eafaf2}
.pick.no{border-color:#ff5468;background:#ffeef0;opacity:.75}

/* ============ โจทย์รูปแบบใหม่ (v1.12.0) ============ */

.hint-line{font-size:14.5px;color:var(--muted);margin:10px 0 6px;text-align:center}

/* จับคู่ */
.match-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:560px;width:100%;margin:0 auto}
.match-col{display:flex;flex-direction:column;gap:10px}
.mt-item{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px 10px;
  font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;min-height:52px;
  transition:transform .12s,border-color .12s,background .12s;overflow-wrap:anywhere}
.mt-item.sel{border-color:#5b6cff;background:#eef1ff;transform:scale(1.02)}
.mt-item.ok{border-color:#18b96b;background:#eafaf2;opacity:.85}
.mt-item.no{border-color:#ff5468;background:#ffeef0;animation:shake .4s}
.mt-item:disabled{cursor:default}

/* เรียงลำดับ */
.ord-slots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0 14px;width:100%}
.ord-slot{min-width:64px;min-height:48px;border:2px dashed #c9d0f5;border-radius:12px;display:grid;place-items:center;
  padding:6px 10px;color:var(--muted);font-weight:800;font-size:14px;background:#fafbff}
.ord-slot.filled{border-style:solid;border-color:#18b96b;background:#eafaf2;color:var(--ink)}
.ord-pool{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:560px;width:100%}
.ord-item{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:12px 14px;
  font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;transition:transform .12s,border-color .12s}
.ord-item.ok{border-color:#18b96b;background:#eafaf2;opacity:.5}
.ord-item.no{border-color:#ff5468;background:#ffeef0;animation:shake .4s}

/* เติมคำในช่องว่าง */
.cloze-line{font-size:19px;line-height:2.1;font-weight:600;text-align:center;max-width:560px;margin:6px auto 14px}
.cloze-blank{display:inline-block;min-width:82px;border-bottom:3px solid #5b6cff;margin:0 6px;
  color:#5b6cff;font-weight:800;text-align:center}
.cloze-blank.filled{border-bottom-color:#18b96b;color:#12885a}
.cloze-pool{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:560px;width:100%}
.cloze-opt{background:var(--card);border:2px solid var(--line);border-radius:999px;padding:10px 18px;
  font-family:inherit;font-weight:700;font-size:15.5px;cursor:pointer;transition:transform .12s,border-color .12s}
.cloze-opt.ok{border-color:#18b96b;background:#eafaf2;opacity:.5}
.cloze-opt.no{border-color:#ff5468;background:#ffeef0;animation:shake .4s}

/* เลือกหลายคำตอบ */
.pick.multi.on{border-color:#5b6cff;background:#eef1ff}
.pick.multi.on::after{content:'✓';position:absolute;top:6px;right:10px;color:#5b6cff;font-weight:900}
.pick.multi{position:relative}

/* จัดลงกลุ่ม */
.bin-tray{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:560px;width:100%;margin-bottom:12px}
.bin-item{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:10px 12px;
  font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;transition:transform .12s,border-color .12s}
.bin-item.sel{border-color:#5b6cff;background:#eef1ff;transform:scale(1.05)}
.bin-item.used{opacity:.35;cursor:default}
.bin-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;max-width:560px;width:100%}
.bin-box{border:3px dashed #c9d0f5;border-radius:16px;padding:10px;min-height:110px;background:#fafbff;cursor:pointer;
  transition:border-color .12s,background .12s}
.bin-box:hover{border-color:#5b6cff}
.bin-box.no{border-color:#ff5468;background:#ffeef0;animation:shake .4s}
.bin-name{font-weight:800;font-size:14.5px;margin-bottom:6px;text-align:center}
.bin-drop{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.bin-chip{background:#eafaf2;border:2px solid #18b96b;border-radius:10px;padding:4px 8px;font-size:13.5px;font-weight:700}

/* แตะบนภาพ */
.spot-scene{position:relative;width:100%;max-width:420px;aspect-ratio:1/1;margin:6px auto;
  background:linear-gradient(180deg,#eaf3ff,#f7fbff);border:2px solid var(--line);border-radius:20px;overflow:hidden}
.spot-bg{position:absolute;inset:0;display:grid;place-items:center;font-size:150px;opacity:.16}
.spot{position:absolute;transform:translate(-50%,-50%);background:transparent;border:3px solid transparent;
  border-radius:50%;cursor:pointer;line-height:1;padding:6px;transition:transform .12s,border-color .12s}
.spot:hover:not(:disabled){transform:translate(-50%,-50%) scale(1.15);border-color:#5b6cff}
.spot.ok{border-color:#18b96b;background:rgba(24,185,107,.18)}
.spot.no{border-color:#ff5468;background:rgba(255,84,104,.18)}
.spot.sel{border-color:#5b6cff;background:rgba(91,108,255,.18)}

/* โจทย์เรื่องหลายขั้น */
.story-board{display:flex;flex-direction:column;gap:6px;max-width:560px;width:100%;margin:0 auto}
.story-done{font-size:14px;border-radius:10px;padding:6px 10px;background:#f4f6ff}
.story-done.ok{background:#eafaf2}
.story-done.no{background:#ffeef0}
.story-step{font-size:17px;font-weight:700;text-align:center;margin:10px 0 4px}

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

@media (max-width:430px){
  .match-wrap{gap:8px}
  .mt-item{font-size:14px;padding:10px 8px}
  .cloze-line{font-size:17px}
  .bin-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spot-scene{max-width:100%}
}

/* ปุ่ม "ทำใหม่" บนหน้าผลคะแนน — ให้เด็กเห็นชัดว่ากดเล่นซ้ำได้ */
.btn.big-again{font-size:19px;padding:16px 26px}
.result .muted.small{margin-top:-4px;margin-bottom:6px}

/* ---- ภารกิจไปทำบนเครื่องจริง (widget mission) ---- */
.mission{width:min(560px,100%);text-align:left}
.mission-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.mission-app{background:linear-gradient(135deg,#7d49f5,#5b6cff);color:#fff;font-weight:800;font-size:14px;
  padding:6px 12px;border-radius:999px}
.mission-title{font-weight:800;color:#3b4270}
.mission-list{display:flex;flex-direction:column;gap:8px}
.mission-item{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;cursor:pointer;
  background:#f7f9ff;border:3px solid #e3e8ff;border-radius:16px;padding:12px 14px;font-size:16px;
  font-family:inherit;color:#2b3160;line-height:1.45;transition:background .12s,border-color .12s}
.mission-item:hover{border-color:#c9d2ff}
.mission-box{flex:none;width:26px;height:26px;border-radius:9px;border:3px solid #b9c2e8;background:#fff;
  display:grid;place-items:center;font-weight:900;color:#18b96b;font-size:16px;margin-top:1px}
.mission-no{flex:none;font-weight:800;color:#8f97c4;min-width:16px}
.mission-text{flex:1}
.mission-item.done{background:#eafaf1;border-color:#9ce3bd;color:#5c7a68}
.mission-item.done .mission-box{border-color:#18b96b;background:#eafaf1}
.mission-item.done .mission-text{text-decoration:line-through;opacity:.75}
.mission-reward{margin-top:12px;background:#fff7e0;border:3px dashed #ffcf6b;border-radius:16px;
  padding:12px 14px;font-weight:700;color:#7a5b13}
@media (max-width:430px){.mission-item{font-size:15px;padding:11px 12px}}

/* ---- หน้าตั้งค่าเสียง (เลือกเสียงอ่าน + ความเร็ว) ---- */
.sheet-h{margin:14px 0 8px;font-size:16px;font-weight:800;color:#3b4270}
.btn.wide{width:100%;justify-content:center}
.voice-list{display:flex;flex-direction:column;gap:8px;max-height:38vh;overflow-y:auto;padding-right:2px}
.voice-row{display:flex;gap:8px;align-items:stretch}
.voice-pick{flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;
  background:#f7f9ff;border:3px solid #e3e8ff;border-radius:14px;padding:10px 12px;cursor:pointer;
  font-family:inherit;font-size:15px;color:#2b3160}
.voice-pick.on{background:#eef1ff;border-color:#5b6cff;box-shadow:0 0 0 3px rgba(91,108,255,.15)}
.voice-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.voice-tag{flex:none;font-size:12px;font-weight:800;color:#18b96b}
.voice-pick.on .voice-tag:empty::after{content:'✓';color:#5b6cff}
.voice-try{flex:none;padding:10px 14px;font-size:15px}
.speed-row{display:flex;flex-wrap:wrap;gap:8px}
.speed-btn{padding:9px 14px;font-size:15px}
.speed-btn.on{background:#eef1ff;border-color:#5b6cff;color:#3b4270;font-weight:800}
@media (max-width:430px){.voice-name{max-width:46vw}.speed-btn{padding:8px 11px;font-size:14px}}
.small-btn{font-size:14px;padding:9px 12px;margin-top:12px}
.small-btn.on{background:#eef1ff;border-color:#5b6cff}