/* ---------- หมวดฝึกอ่าน (ใช้ร่วมกับ games.css) ---------- */
/* ฟอนต์ลายมือ Mali (SIL Open Font License) สำหรับตัวอักษร */
@font-face{font-family:"Mali";font-weight:700;font-display:swap;src:url("../fonts/mali-thai-700-normal.woff2") format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Mali";font-weight:700;font-display:swap;src:url("../fonts/mali-latin-700-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Mali";font-weight:600;font-display:swap;src:url("../fonts/mali-thai-600-normal.woff2") format("woff2");unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"Mali";font-weight:600;font-display:swap;src:url("../fonts/mali-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
.bk-ch,.mt-ch,.bal-ch,.fs-opt,.chip,.rs-big,.bk-cap,.tr-cap,.fs-ans,.bk-low,.glyph-txt{font-family:"Mali","Mitr",system-ui,sans-serif;font-weight:700}

/* ---------- เมนู ---------- */
.rmain{flex:1;min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,1.8vh,18px)}
.rset{display:flex;justify-content:center;gap:clamp(10px,1.6vw,18px)}
.rs-btn{display:flex;align-items:center;gap:12px;padding:4px 22px 4px 16px;border:5px solid #fff;border-radius:999px;background:rgba(255,255,255,.78);color:#5a3410;cursor:pointer;
  box-shadow:0 5px 0 rgba(0,0,0,.12);transition:transform .15s ease,background .2s;-webkit-tap-highlight-color:transparent}
.rs-big{font-size:clamp(26px,3.3vw,38px);line-height:1.25;letter-spacing:3px}
.rs-sub{font:600 clamp(15px,1.7vw,19px) "Mitr",sans-serif;opacity:.75}
.rs-btn.on{transform:scale(1.06);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.rs-btn.on .rs-sub{opacity:1}
.rs-btn.on.th{background:linear-gradient(#ffcf5c,#ff9f1c)}
.rs-btn.on.en{background:linear-gradient(#9fd3ff,#3f97ea)}
.rs-btn:active{transform:scale(.95)}
.rgrid{flex:0 0 auto;grid-template-columns:repeat(6,1fr)}
.rgrid .gcard{grid-column:span 2}
.rgrid .gcard:nth-child(4){grid-column:2/span 2}
@media (max-width:600px){.rgrid{grid-template-columns:repeat(2,1fr)}.rgrid .gcard,.rgrid .gcard:nth-child(4){grid-column:auto}}

/* ---------- ทั่วไปในหน้ากิจกรรม ---------- */
.gm-prompt .chip{display:inline-block;min-width:1.3em;padding:0 .28em;margin:0 .12em;border-radius:14px;background:linear-gradient(#ffcf5c,#ff9f1c);color:#fff;border:3px solid #fff;
  font-size:1.3em;line-height:1.2;text-align:center;vertical-align:middle;box-shadow:0 3px 0 rgba(0,0,0,.15);text-shadow:0 2px 0 rgba(0,0,0,.15)}
.bk-count{display:inline-block;font:600 clamp(18px,2.2vw,24px) "Mitr",sans-serif;letter-spacing:0;color:#5a3410;background:#fff;border-radius:14px;padding:2px 12px}
.gm .pill.green{background:linear-gradient(#9be29b,#3fae5a);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.boop{animation:boop .35s ease}
@keyframes boop{40%{transform:scale(1.06)}70%{transform:scale(.97)}}
.burst{position:absolute;width:16px;height:16px;border-radius:50%;pointer-events:none;z-index:5;animation:burst .6s ease-out forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@keyframes glowt{from{box-shadow:0 0 0 4px #fff,0 0 14px 6px #ffe066}to{box-shadow:0 0 0 8px #fff,0 0 32px 15px #ffd000}}
.bk-spk{position:absolute;right:8px;top:8px;width:40px;height:40px;border-radius:50%;background:#fff;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.18);pointer-events:none}

/* ---------- 1) สมุดภาพ ---------- */
.bk-grid{position:absolute;left:0;right:0;top:0;display:grid;justify-content:center;align-content:center}
.bk-tile{position:relative;padding:0;border:4px solid #fff;border-radius:24%;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  box-shadow:0 5px 0 rgba(0,0,0,.14),0 8px 14px rgba(60,40,10,.12);transition:scale .1s ease}
.bk-tile:active{scale:.92}
.bk-ch{position:absolute;left:9%;top:3%;font-size:.54em;line-height:1.1;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.2);pointer-events:none}
.bk-tile img{position:absolute;right:5%;bottom:5%;width:42%;height:42%;object-fit:contain;background:#fff;border-radius:28%;padding:4%;box-sizing:border-box;
  box-shadow:0 2px 0 rgba(0,0,0,.14);pointer-events:none}
.bk-star{position:absolute;left:-7%;top:-9%;font-size:.24em;line-height:1;display:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.2))}
.bk-tile.seen .bk-star{display:block}
.bk-bar{position:absolute;left:0;right:0;bottom:2px;height:58px;display:flex;align-items:center;justify-content:center}
.bk-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;touch-action:none}
.bk-row{display:flex;align-items:center;justify-content:center;gap:2.6vw}
.bk-fig{margin:0;display:flex;flex-direction:column;align-items:center}
.bk-big,.bk-pic{position:relative;width:var(--cs);height:var(--cs);padding:0;border:6px solid #fff;border-radius:36px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  display:flex;align-items:center;justify-content:center;box-shadow:0 7px 0 rgba(150,100,40,.25),0 14px 26px rgba(90,60,20,.16)}
.bk-big{background:radial-gradient(circle at 50% 38%,#fffef8,#ffefc8)}
.bk-pic{background:#fff}
.glyph{width:82%;height:82%;fill:var(--ink,#e8475f);filter:drop-shadow(0 6px 0 rgba(0,0,0,.12));pointer-events:none}
.bk-low{position:absolute;right:8%;bottom:5%;font-size:calc(var(--cs) * .24);line-height:1;color:var(--ink);opacity:.85;pointer-events:none}
.bk-pic img{width:86%;height:86%;object-fit:contain;pointer-events:none}
.bk-cap{height:var(--cap);display:flex;align-items:center;font-size:calc(var(--cap) * .72);line-height:1;color:#5a3410;text-shadow:0 2px 0 #fff,0 0 10px #fff;white-space:nowrap}
.bk-nav{width:var(--nav);height:var(--nav);flex:0 0 auto;margin-bottom:var(--cap);border-radius:50%;border:5px solid #fff;background:linear-gradient(#ffcf5c,#ff9f1c);color:#fff;cursor:pointer;
  font:600 calc(var(--nav) * .7)/1 "Mitr",sans-serif;display:flex;align-items:center;justify-content:center;padding:0 0 .1em;box-shadow:0 5px 0 rgba(0,0,0,.18);text-shadow:0 2px 0 rgba(0,0,0,.15)}
.bk-nav:active{transform:translateY(3px)}
.bk-ctrl{display:flex;gap:14px}
.in-r{animation:inR .35s ease}.in-l{animation:inL .35s ease}
@keyframes inR{from{transform:translateX(80px);opacity:0}}
@keyframes inL{from{transform:translateX(-80px);opacity:0}}

/* ---------- 2) ลูกโป่ง ---------- */
.bl-sky{position:absolute;inset:0}
.bal{position:absolute;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  animation:bfly 1s cubic-bezier(.25,.9,.35,1.08) var(--fly,0s) both}
@keyframes bfly{from{transform:translateY(105vh)}to{transform:none}}
.bal-in{position:absolute;inset:0;animation:bfloat var(--fl,3s) ease-in-out calc(var(--fly,0s) + 1s) infinite alternate}
@keyframes bfloat{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-16px) rotate(3deg)}}
.bal-w{position:absolute;inset:0;transform-origin:50% 40%}
.bal-body{position:absolute;left:0;top:0;width:100%;height:76%;border-radius:50% 50% 47% 47%/55% 55% 45% 45%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.9) 0 7%,rgba(255,255,255,0) 21%),var(--bc);
  box-shadow:inset -10px -16px 0 rgba(0,0,0,.13),0 10px 16px rgba(0,0,0,.16)}
.bal-knot{position:absolute;left:42%;top:74.5%;width:16%;height:6%;background:var(--bc);clip-path:polygon(50% 0,100% 100%,0 100%);filter:brightness(.85)}
.bal-str{position:absolute;left:50%;top:80%;width:16px;height:20%;margin-left:-8px;overflow:visible}
.bal-str path{fill:none;stroke:#8a7a66;stroke-width:2.5;vector-effect:non-scaling-stroke}
.bal-ch{font-size:calc(var(--bw) * .52);line-height:1;color:#fff;margin-top:-.06em;text-shadow:0 3px 0 rgba(0,0,0,.25),0 0 3px rgba(0,0,0,.35);pointer-events:none}
.bal-w.wob{animation:wob .5s ease}
@keyframes wob{20%{transform:rotate(-12deg) scale(.96)}45%{transform:rotate(10deg)}70%{transform:rotate(-5deg)}100%{transform:none}}
.bal.popped .bal-w{animation:popb .22s ease-out forwards}
@keyframes popb{50%{transform:scale(1.25);opacity:1}100%{transform:scale(1.5);opacity:0}}
.bal.hint .bal-body{animation:glowb .7s ease-in-out infinite alternate}
@keyframes glowb{from{box-shadow:inset -10px -16px 0 rgba(0,0,0,.13),0 0 0 4px #fff,0 0 14px 6px #ffe066}to{box-shadow:inset -10px -16px 0 rgba(0,0,0,.13),0 0 0 8px #fff,0 0 36px 18px #ffd000}}

/* ---------- 3) จับคู่ ---------- */
.mt-l{background:linear-gradient(#fffef8,#ffefc8)}
.mt-ch{font-size:1em;line-height:1;color:var(--ink);margin-top:-.04em;pointer-events:none;text-shadow:0 3px 0 rgba(0,0,0,.08)}
.match .tile.hint{animation:glowt .7s ease-in-out infinite alternate}

/* ---------- 4) ลากนิ้วตามรอย ---------- */
.tr-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:3.5%}
.tr-board{position:relative;flex:0 0 auto;border:6px solid #fff;border-radius:36px;touch-action:none;overflow:hidden;
  background:#fff radial-gradient(circle,#f1e4cb 1.6px,transparent 1.8px) 0 0/28px 28px;box-shadow:0 7px 0 rgba(150,100,40,.25),0 14px 26px rgba(90,60,20,.16)}
.tr-board svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.tr-glyph{fill:#fff4dc;stroke:#f1b456;stroke-width:7;stroke-linejoin:round;transition:fill .7s ease}
.tr-glyph.done{fill:var(--tc)}
.tr-trail{fill:none;stroke:var(--tc);stroke-width:44;stroke-linecap:round;stroke-linejoin:round;opacity:.78}
.tr-dot{fill:#c3b1ff;stroke:#fff;stroke-width:5;transform-box:fill-box;transform-origin:center}
.tr-dot.lit{fill:#ffcf3d;animation:dotpop .35s ease}
@keyframes dotpop{50%{transform:scale(1.7)}}
.tr-star{fill:#ffcf3d;stroke:#fff;stroke-width:6;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;animation:twinkle 1s ease-in-out infinite alternate}
@keyframes twinkle{from{transform:scale(.9) rotate(-8deg)}to{transform:scale(1.18) rotate(8deg)}}
.tr-board.done .tr-star{opacity:0;transition:opacity .3s}
.tr-ghost{fill:#ffe45c;opacity:0;stroke:#fff;stroke-width:6}
.tr-hand{position:absolute;margin:0 0 0 -28px;font-size:56px;line-height:1;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25));animation:handtap 1s ease-in-out infinite;transition:opacity .3s}
.tr-hand.gone{opacity:0;animation:none}
@keyframes handtap{0%,100%{transform:translateY(10px)}50%{transform:translateY(26px)}}
.tr-side{display:flex;flex-direction:column;align-items:center;gap:8px}
.tr-pic{position:relative;padding:0;border:6px solid #fff;border-radius:30px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 0 rgba(150,100,40,.25),0 12px 20px rgba(90,60,20,.14)}
.tr-pic img{width:86%;height:86%;object-fit:contain;pointer-events:none}
.tr-cap{font-size:clamp(30px,4.4vw,54px);line-height:1.2;color:#5a3410;text-shadow:0 2px 0 #fff,0 0 10px #fff;white-space:nowrap}

/* ---------- 5) เสียงแรกของคำ ---------- */
.fs-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:7%}
.fs-pic{position:relative;padding:0;border:6px solid #fff;border-radius:36px;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 7px 0 rgba(150,100,40,.25),0 14px 26px rgba(90,60,20,.16)}
.fs-pic img{width:84%;height:84%;object-fit:contain;pointer-events:none}
.fs-ans{position:absolute;left:-16px;top:-16px;min-width:96px;height:96px;padding:0 10px;box-sizing:border-box;border-radius:30px;border:5px solid #fff;
  background:linear-gradient(#7fe08f,#2e9b48);color:#fff;font-size:64px;line-height:84px;text-align:center;box-shadow:0 5px 0 rgba(0,0,0,.18);
  transform:scale(0);transition:transform .4s cubic-bezier(.2,1.6,.4,1)}
.fs-pic.solved .fs-ans{transform:scale(1)}
.fs-opts{display:flex;flex-direction:column;gap:calc(var(--os) * .12)}
.fs-opt{width:var(--os);height:var(--os);padding:0;border-radius:30%;border:6px solid #fff;color:#fff;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  font-size:calc(var(--os) * .6);line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 7px 0 rgba(0,0,0,.18);text-shadow:0 4px 0 rgba(0,0,0,.2)}
.fs-opt span{display:block;margin-top:-.06em;pointer-events:none}
.fs-opt:active{transform:translateY(4px)}
.fs-opt.ok{box-shadow:0 0 0 8px #b9f6ca,0 7px 0 rgba(0,0,0,.12);animation:okpop .5s ease}
@keyframes okpop{40%{transform:scale(1.15)}}
.fs-opt.hint{animation:glowt .7s ease-in-out infinite alternate}