:root{
    --cream:#FFF9EC;
    --cream-2:#FFEFD1;
    --ink:#4A3F35;
    --ink-soft:#8A7B6C;
    --white:#FFFFFF;

    --math:#FF8A5B;      --math-l:#FFE7DA;
    --thai:#33B7EE;      --thai-l:#DBF3FE;
    --eng:#4CBE84;       --eng-l:#DEF5E7;
    --behavior:#FFC53D;  --behavior-l:#FFF2CE;
    --animals:#F17FA8;   --animals-l:#FDE1EC;
    --days:#9B7DE0;      --days-l:#EAE1FC;

    --correct:#33B76C;
    --correct-l:#DDF6E7;
    --wrong:#FF6161;
    --wrong-l:#FFE3E3;

    --radius-xl: 32px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --shadow-card: 0 10px 0 rgba(74,63,53,0.10), 0 16px 26px rgba(74,63,53,0.10);
    --shadow-btn: 0 6px 0 rgba(74,63,53,0.14);
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    cursor:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIwNDggMTkwNSIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4KPGRlZnM+Cgk8bGluZWFyR3JhZGllbnQgaWQ9IkdyYWRpZW50MSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMDg2LjcxIiB5MT0iMzkwLjQ4NiIgeDI9IjExNzguNjEiIHkyPSI1NjMuNjMxIj4KCQk8c3RvcCBjbGFzcz0ic3RvcDAiIG9mZnNldD0iMCIgc3RvcC1vcGFjaXR5PSIxIiBzdG9wLWNvbG9yPSJyZ2IoNTMsMjMsNSkiLz4KCQk8c3RvcCBjbGFzcz0ic3RvcDEiIG9mZnNldD0iMSIgc3RvcC1vcGFjaXR5PSIxIiBzdG9wLWNvbG9yPSJyZ2IoMTI3LDcwLDQwKSIvPgoJPC9saW5lYXJHcmFkaWVudD4KCTxsaW5lYXJHcmFkaWVudCBpZD0iR3JhZGllbnQyIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjE0NDUuNDQiIHkxPSI1MjIuNzU1IiB4Mj0iMzY3LjA0NiIgeTI9IjExNzAuMDkiPgoJCTxzdG9wIGNsYXNzPSJzdG9wMCIgb2Zmc2V0PSIwIiBzdG9wLW9wYWNpdHk9IjEiIHN0b3AtY29sb3I9InJnYigyMTcsMTYzLDEwOCkiLz4KCQk8c3RvcCBjbGFzcz0ic3RvcDEiIG9mZnNldD0iMSIgc3RvcC1vcGFjaXR5PSIxIiBzdG9wLWNvbG9yPSJyZ2IoMjQyLDIxNiwxMDApIi8+Cgk8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIGZpbGw9InJnYig1NCwyNCw1KSIgZD0iTSAzMTYuMTI3IDE1OS40NTIgQyAzMjcuMTI5IDE1OS4wNTEgMzQzLjEzNSAxNTguMyAzNTMuNzI1IDE1OC45NjYgQyAzNjUuMDQ2IDE1OS42NzggMzgwLjA1IDE2OC43NTMgMzkyLjM2OCAxNzIuNDc4IEMgNDE4LjU1NiAxODAuMzk5IDQ1NS45NDMgMTkwLjQ0NSA0ODAuMjMgMjAyLjU4MiBDIDU1MC41MjMgMjM3LjcwOSA2NjAuOTE4IDMwNy4yMDkgNzExLjE4MyAzNjYuMTEzIEMgNzE2LjkwNiAzNjAuMzA3IDcyMS42NzkgMzU0LjQ1OSA3MjcuODE5IDM0OC40OTQgQyA3NTAuNDUxIDMyNi4zOTggNzc2Ljg5OCAzMDguNTgzIDgwNS44NzkgMjk1LjkxMyBDIDg1OS4zNzIgMjcyLjQxOCA5MjAuMzA4IDI2OS4yMTUgOTc3LjE4MyAyNzkuNzg3IEMgOTkwLjM4NyAyODIuMjQyIDEwMDguNTcgMjg2LjA3NyAxMDIxLjAzIDI5MC45NDUgQyAxMDU2Ljc2IDI3NS41ODUgMTA4OC4zMSAyNTEuODE1IDExMjUuNTggMjQwLjA0IEMgMTE1NC44MiAyMzAuNzk5IDExODQuNzcgMjI5Ljk0IDEyMTUuMDkgMjMxLjM4NyBDIDEyNjIuNTEgMjMzLjY1IDEzMDUuNSAyNDkuNzY2IDEzNDcuNjUgMjcwLjYxNSBDIDE0NDcuOTUgMzIwLjM3NyAxNTMyLjYzIDM5Ni43OCAxNTkyLjQxIDQ5MS40NTggQyAxODEzLjQ5IDg0MC41MDMgMTczNi41MSAxMzg1LjQgMTM3Ni40NiAxNjEzLjczIEMgMTM1Mi41NyAxNjI5LjA3IDEzMjcuNTcgMTY0Mi42IDEzMDEuNjcgMTY1NC4yMiBDIDEyMzkuOTcgMTY4MS4xNyAxMTczLjAxIDE2OTcuNjggMTEwNS40OCAxNjkwLjkyIEMgOTk5LjMyOSAxNjgwLjI5IDkzNC40NjggMTYwOC42OSA4ODAuNTYgMTUyMy44MSBDIDg1OS4wNTkgMTQ4OS45NSA4MzMuOTY0IDE0NDcuNjggODA5LjAzMSAxNDE2LjkyIEMgNzgxLjE2MiAxMzgyLjc3IDc0Ny44NjYgMTM1My40NCA3MTAuNDc2IDEzMzAuMDkgQyA2NDkuODM1IDEyOTIuMjIgNTc1LjAzMiAxMjcwLjU2IDUwMy45OTMgMTI2Ny40NCBDIDQ2NC4zODIgMTI2NC42NyA0MjEuNzg2IDEyNjYuNTIgMzg0LjM4NCAxMjUxLjUyIEMgMzIxLjAxNiAxMjI2LjA5IDMxMC4xOTYgMTE3Ni4yNSAzMzUuMDc2IDExMTYuNjMgQyAzNjguMDU0IDEwMzcuNjEgNDQwLjYxOSA5ODguNjEyIDUxNi41OCA5NTYuMjQgQyA1NDQuNDk4IDk0NC4zNDMgNTc0LjMxIDkzOC4wMTQgNjAyLjYzOSA5MjYuMTUzIEMgNTkwLjI0NyA5MDAuMTA1IDU1OS44MTIgODU3LjI5NiA1NDIuODUyIDgzMC44MTMgQyA1MDguNDg2IDc3Ni41OTIgNDcyLjE0MiA3MjMuNjQ5IDQzMy44OTUgNjcyLjA5MiBDIDM2OS4yNjEgNTg0LjMxNSAzMDEuMzY5IDQ5OC44MDQgMjM3LjA2MSA0MTAuODE1IEMgMjE3LjA5IDM4My40OTEgMTk5LjkzNyAzNDEuNjM5IDE4MC44OSAzMTMuMDA5IEwgMTgwLjAxNCAzMTEuNzA2IEMgMTc5LjkzNiAzMDQuNDM2IDE3OC45MDcgMjY3LjUyNyAxODAuNDYzIDI2My4zNjQgQyAyMDIuNzU5IDIwMy43MTUgMjUwLjYzOCAxNjEuMzY2IDMxNi4xMjcgMTU5LjQ1MiB6Ii8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIGZpbGw9InVybCgjR3JhZGllbnQyKSIgZD0iTSAyMzguNzEgMjU4LjAzMSBDIDI0Ni42MDQgMjQzLjM2MSAyNzMuNDM1IDIxNi43ODggMjg5LjYyNyAyMTMuODQ3IEMgMzU1LjIzMiAyMDEuOTI4IDQzNy4zMjQgMjMyLjc2NiA0OTIuOTAyIDI2My41NTMgQyA1NjUuMjU3IDMwMy42MzMgNjI1LjM3NyAzNTAuOTMgNjg1LjczMyA0MDYuMjE3IEMgNjk2LjQ2MSA0MTYuMTQ2IDcwOS4xNDkgNDI1Ljk1IDcxOS4zNzIgNDM1Ljk5NiBDIDc0MC4zMzkgNDU2LjU5OSA3NjEuMzQ1IDQ3OC4wNjQgNzgxLjM0OCA0OTkuNjM0IEMgNzk4LjYwNyA1MTguMjQ0IDgyMC4xNjcgNTM3LjEyMyA4MzYuODgzIDU1NS4zMTIgQyA4MTAuMTIgNTU0LjY5MSA3ODEuNTIxIDU1My40MzMgNzU1LjMwOCA1NTkuNjc3IEMgNzMyLjk5OCA1NzAuMjA4IDcxOC43NjUgNTc4LjgxIDcwMS4xOSA1OTYuNjQ0IEMgNjYxLjUyMiA2MzYuODk2IDY2MS42NTUgNjk4Ljc1MiA2OTIuOTI5IDc0NC41NDggQyA2OTEuNTAzIDczNS4xNzIgNjkxLjUzNSA3MjYuMzM1IDY5MC45NDMgNzE3LjAzMiBDIDY4OC44NTIgNjg0LjE2NCA2OTEuNzQ5IDY1My4xMzUgNzExLjc4NiA2MjUuNzMyIEMgNzI4LjM4NSA2MDMuMDMyIDc1MS4xNDMgNTkyLjY4NSA3NzguMDQxIDU4Ni42NjUgTCA3NzguMjk5IDU4NS40MDUgQyA3ODkuMTE0IDU4MC4yNDUgODMxLjI1MyA1ODIuOTY3IDg0My42NTEgNTg0LjQxMiBDIDg1NC4xNTcgNTg1LjYzNyA4NjkuODcgNTkwLjY3NSA4NzkuOTA0IDU4OS43OTMgQyA4ODAuMDkxIDU4OS4yNyA4ODAuMjc3IDU4OC43NDggODgwLjQ2MyA1ODguMjI1IEMgODgxLjIyMiA1ODEuNzc5IDg4Ni4wMiA1NzkuNiA4ODkuMjE3IDU3MS40MzcgQyA4ODkuMTU0IDU3MC42OCA4ODkuMDkgNTY5LjkyMyA4ODkuMDI2IDU2OS4xNjYgQyA4NzEuMzc0IDU1OC43OSA4MzAuMzExIDUyMi41NSA4MjIuMTYgNTA2LjEzMyBDIDgwNC40MjkgNDg2LjYyNiA3ODcuMDggNDY2LjY1OCA3NjkuMzYzIDQ0Ny4xNzYgQyA3NTguNDI2IDQzNS4xNDkgNzQ0Ljk1NSA0MjMuMjcgNzMzLjkzNyA0MTEuMTk3IEMgNzcwLjQwOSAzNjUuMDQgODI1LjAzNSAzMjkuNzg2IDg4NC4zNjkgMzIzLjM0OCBDIDk1Ni45MTEgMzE1LjQ3OCAxMDI0LjczIDM0My4xMzcgMTA5MS42MyAzNjcuMTM0IEMgMTEwOS4zMSAzNzMuNDczIDExMzUuODMgMzg0Ljc5IDExNTIuOTggMzg4LjA1NyBDIDExMzMuNSAzNjUuNDg5IDExMTMuNjEgMzQ5LjY5OCAxMDg3Ljc1IDMzNS4yOTMgQyAxMDgyLjc3IDMzMi41MjQgMTA3NS4xIDMyOC4xMDcgMTA3Mi4yMyAzMjMuMzEyIEMgMTA3My44MyAzMTEuODk4IDExMTcuOTQgMjk0LjgxNyAxMTI4LjYgMjkwLjUzNiBDIDExNjUuMDcgMjc1Ljg3NCAxMjA5LjI0IDI3OC4xNDggMTI0Ny41MyAyODMuNjEzIEMgMTI4NC4yIDI4NS44NDYgMTMwMS4zNyAyOTkuNzQ3IDEzMzEuNjIgMzE0Ljk0NSBDIDE0MTAuMjUgMzU0LjQ0NSAxNDc3LjIxIDQxMS43OTEgMTUyOC45MyA0ODMuMzg3IEMgMTY0NC43NiA2NDMuNjkgMTY5Mi41NiA4NjIuNDk0IDE2NTkuODkgMTA1Ny4xIEMgMTY1MS43OSAxMTA1LjM2IDE2NDIuOTggMTE1My41NSAxNjI4LjA0IDEyMDAuMTUgQyAxNTg1LjIyIDEzMjcuNTYgMTUxMC45NSAxNDU1LjcgMTQwMC4zNiAxNTM0LjY0IEMgMTM5OC42NyAxNTM1LjgzIDEzOTYuOTMgMTUzNi45NyAxMzk1LjE2IDE1MzguMDQgQyAxMzEzLjM2IDE1OTkuMDUgMTIwNy44NyAxNjU2LjMxIDExMDMuMTcgMTY0MS44OCBDIDk2Ny45MDggMTYyMy4yMyA5MjUuNTAxIDE0ODUuNzMgODUyLjYxMiAxMzkyLjc5IEMgNzg0Ljg2NyAxMzA2LjU1IDY4Ny40OTUgMTI0OC41NSA1NzkuMzk4IDEyMzAuMDYgQyA1MzAuMzcgMTIyMS4yOCA0ODAuMzU1IDEyMTkuODkgNDMxLjE0MyAxMjEyLjY1IEMgMzgyLjMxOSAxMjA1LjQ2IDM2Ni4yNSAxMTk4LjE1IDM3NS42NSAxMTQ2Ljc3IEMgMzgxLjU3OCAxMTMxLjQyIDM4Ni4wMSAxMTIwLjE2IDM5NS4yMjcgMTEwNS45NSBDIDQzMi45OTkgMTA0Ny43MiA1MDAuNTA3IDEwMTMuMTYgNTY0LjY3IDk5MS45NyBDIDU5Mi4xMzMgOTgyLjg5OCA2MTguNzY1IDk3Ny44OSA2NDYuNTU4IDk3MS42NzEgQyA2NjQuMTM3IDk5NS4zNTUgNzAyLjQ1NiAxMDY2LjU3IDcxMC41ODcgMTA5My44MyBDIDcxNy41OTMgMTEwNC40MyA3NTMuNTExIDExODkuNjcgNzcwLjA2NyAxMTc4LjY1IEMgNzc2LjkyMyAxMTU4LjcgNzA5LjA3NiAxMDI3LjY1IDY5Ny4wMjQgMTAwMi40OCBDIDU5NS4wODQgNzg5LjU3MyA0NDAuMzM5IDYwOC41NTkgMzAzLjIzOCA0MTguMjYgQyAyODQuOTY3IDM5Mi44OTkgMjY2LjUwOCAzNjcuMjk0IDI1MS43NzQgMzM5LjcwOCBDIDI0MC44MzggMzE5LjUgMjM1LjY4NyAzMDAuODQ0IDIyOC4xNzYgMjc5LjU1OSBDIDIzMS43ODUgMjcyLjU4NSAyMzUuMjY2IDI2NS4xMjEgMjM4LjcxIDI1OC4wMzEgeiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJyZ2IoMTYzLDEwMyw2OSkiIGQ9Ik0gMTE1Mi45OCAzODguMDU3IEMgMTEzMy41IDM2NS40ODkgMTExMy42MSAzNDkuNjk4IDEwODcuNzUgMzM1LjI5MyBDIDEwODIuNzcgMzMyLjUyNCAxMDc1LjEgMzI4LjEwNyAxMDcyLjIzIDMyMy4zMTIgQyAxMDczLjgzIDMxMS44OTggMTExNy45NCAyOTQuODE3IDExMjguNiAyOTAuNTM2IEMgMTE2NS4wNyAyNzUuODc0IDEyMDkuMjQgMjc4LjE0OCAxMjQ3LjUzIDI4My42MTMgQyAxMjg0LjIgMjg1Ljg0NiAxMzAxLjM3IDI5OS43NDcgMTMzMS42MiAzMTQuOTQ1IEMgMTQxMC4yNSAzNTQuNDQ1IDE0NzcuMjEgNDExLjc5MSAxNTI4LjkzIDQ4My4zODcgQyAxNjQ0Ljc2IDY0My42OSAxNjkyLjU2IDg2Mi40OTQgMTY1OS44OSAxMDU3LjEgQyAxNjUxLjc5IDExMDUuMzYgMTY0Mi45OCAxMTUzLjU1IDE2MjguMDQgMTIwMC4xNSBDIDE1ODUuMjIgMTMyNy41NiAxNTEwLjk1IDE0NTUuNyAxNDAwLjM2IDE1MzQuNjQgQyAxMzk4LjY3IDE1MzUuODMgMTM5Ni45MyAxNTM2Ljk3IDEzOTUuMTYgMTUzOC4wNCBDIDEzOTEuMjEgMTUzMy40MiAxMzkzLjczIDE1MjguNjEgMTM5Ni4wMiAxNTIzLjU5IEMgMTQxMC45OCAxNDkwLjc3IDE0MjYuOCAxNDU3Ljg0IDE0NDcuNzQgMTQyOC4zMiBDIDE0NTkuNzYgMTQxMS4zNyAxNDY2LjgxIDEzOTYuODggMTQ3NS41NCAxMzc4LjIzIEMgMTQ4MS4wMyAxMzY2LjUgMTQ4OC45MSAxMzU0LjcxIDE0OTQuNzIgMTM0Mi43NCBDIDE1MDkuNzMgMTMxMS40MiAxNTIyLjU2IDEyNzkuMSAxNTMzLjE0IDEyNDYuMDEgQyAxNTQwLjg4IDEyMjEuMjMgMTU0NC45IDExOTUuOTMgMTU1Mi41MSAxMTcxLjE0IEMgMTU1NS4yOCAxMTYyLjEyIDE1NTcuNzQgMTE1Mi45MiAxNTU5LjYyIDExNDMuNjcgQyAxNTk4LjIyIDk1NS41NCAxNTcyLjIyIDc1OS44ODkgMTQ4NS44NCA1ODguMzYxIEMgMTQ2My41MiA1NDMuMTM0IDE0MjYuNjMgNDk1LjgzNyAxNDAxLjgxIDQ0OC40MDIgQyAxNDAzLjkgNDQ2Ljk4IDE0MDYuMzcgNDQ2LjA3OSAxNDA2LjI1IDQ0My4yMjUgQyAxNDA1Ljg2IDQzMy44NzkgMTM5Ny45IDQyNC42ODggMTM5MS41OCA0MTguNjc0IEMgMTM1Ny40NiAzODYuMjI1IDEzMTIuMzQgMzkzLjc3NyAxMjgyLjQ1IDQyNy42MzkgQyAxMjc1LjY3IDQzNS4zMTkgMTI3MC4zMyA0NDIuNDkgMTI2NC42NSA0NTEuMTE1IEMgMTE2Mi45IDQwNC42OTggOTcyLjg3OSAzOTEuNzg5IDkxNy44NDggNTEzLjc4MyBDIDkwOC43MTEgNTM0LjA0IDkwNy4zOTMgNTUwLjA3NiA5MDMuNTY4IDU3MS4yMzggQyA4ODMuMDA0IDU3My45MDkgODM2LjE2MyA1MTkuNDMyIDgyMi4xNiA1MDYuMTMzIEMgODA0LjQyOSA0ODYuNjI2IDc4Ny4wOCA0NjYuNjU4IDc2OS4zNjMgNDQ3LjE3NiBDIDc1OC40MjYgNDM1LjE0OSA3NDQuOTU1IDQyMy4yNyA3MzMuOTM3IDQxMS4xOTcgQyA3NzAuNDA5IDM2NS4wNCA4MjUuMDM1IDMyOS43ODYgODg0LjM2OSAzMjMuMzQ4IEMgOTU2LjkxMSAzMTUuNDc4IDEwMjQuNzMgMzQzLjEzNyAxMDkxLjYzIDM2Ny4xMzQgQyAxMTA5LjMxIDM3My40NzMgMTEzNS44MyAzODQuNzkgMTE1Mi45OCAzODguMDU3IHoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgZmlsbD0icmdiKDE2MywxMDMsNjkpIiBkPSJNIDIzOC43MSAyNTguMDMxIEMgMjQ2LjYwNCAyNDMuMzYxIDI3My40MzUgMjE2Ljc4OCAyODkuNjI3IDIxMy44NDcgQyAzNTUuMjMyIDIwMS45MjggNDM3LjMyNCAyMzIuNzY2IDQ5Mi45MDIgMjYzLjU1MyBDIDU2NS4yNTcgMzAzLjYzMyA2MjUuMzc3IDM1MC45MyA2ODUuNzMzIDQwNi4yMTcgQyA2OTYuNDYxIDQxNi4xNDYgNzA5LjE0OSA0MjUuOTUgNzE5LjM3MiA0MzUuOTk2IEMgNzQwLjMzOSA0NTYuNTk5IDc2MS4zNDUgNDc4LjA2NCA3ODEuMzQ4IDQ5OS42MzQgQyA3OTguNjA3IDUxOC4yNDQgODIwLjE2NyA1MzcuMTIzIDgzNi44ODMgNTU1LjMxMiBDIDgxMC4xMiA1NTQuNjkxIDc4MS41MjEgNTUzLjQzMyA3NTUuMzA4IDU1OS42NzcgQyA3NTMuMTQzIDU0NS42MTYgNzE2LjI0MSA1MTUuODQgNzA1LjcyOCA1MDUuNTYzIEMgNjkzLjkxNiA0OTQuMDE2IDY3OS43NTIgNDgwLjI1MSA2NjcuNDI0IDQ2OS4yNTUgQyA2MjQuMTUgNDMwLjY1NyA1NzcuNTYyIDM5NS44OTggNTMwLjM2NCAzNjIuMjk1IEMgNDg3LjI2NCAzMzEuNzU1IDQ0NC43ODYgMzAwLjM0OCAzOTQuNTUgMjgyLjMzIEMgMzU1LjUzNiAyNjguMzM3IDMxMi41MjkgMjYxLjE0NyAyNzEuMjE5IDI1Ny42NDMgQyAyNjMuMDk4IDI1Ni45NTQgMjQ4LjEzOCAyNTguMTE1IDIzOC43MSAyNTguMDMxIHoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgZmlsbD0icmdiKDE2MywxMDMsNjkpIiBkPSJNIDM3NS42NSAxMTQ2Ljc3IEMgMzgxLjU3OCAxMTMxLjQyIDM4Ni4wMSAxMTIwLjE2IDM5NS4yMjcgMTEwNS45NSBDIDQzMi45OTkgMTA0Ny43MiA1MDAuNTA3IDEwMTMuMTYgNTY0LjY3IDk5MS45NyBDIDU5Mi4xMzMgOTgyLjg5OCA2MTguNzY1IDk3Ny44OSA2NDYuNTU4IDk3MS42NzEgQyA2NjQuMTM3IDk5NS4zNTUgNzAyLjQ1NiAxMDY2LjU3IDcxMC41ODcgMTA5My44MyBDIDYyNS40NTIgMTA4Mi41NCA1MzYuMDg4IDEwNzkuMjggNDU1Ljk4MSAxMTEzLjgxIEMgNDM2LjE2IDExMjIuMzUgMzk0LjQzIDExNDQuMzggMzc1LjY1IDExNDYuNzcgeiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJ1cmwoI0dyYWRpZW50MSkiIGQ9Ik0gMTI2NC42NSA0NTEuMTE1IEMgMTI3MC4zMyA0NDIuNDkgMTI3NS42NyA0MzUuMzE5IDEyODIuNDUgNDI3LjYzOSBDIDEzMTIuMzQgMzkzLjc3NyAxMzU3LjQ2IDM4Ni4yMjUgMTM5MS41OCA0MTguNjc0IEMgMTM5Ny45IDQyNC42ODggMTQwNS44NiA0MzMuODc5IDE0MDYuMjUgNDQzLjIyNSBDIDE0MDYuMzcgNDQ2LjA3OSAxNDAzLjkgNDQ2Ljk4IDE0MDEuODEgNDQ4LjQwMiBDIDEzODUuMSA0MzQuNzkgMTM2MS44MyA0MjAuNDI2IDEzMzkuNTUgNDIzLjI4NSBDIDEyOTUuNDQgNDI4Ljk0MyAxMjkwLjM3IDQ2OC42ODYgMTMwMS4xMyA1MDIuOTY4IEMgMTIyOS4zIDQ2MS45OTggMTE3OS45MSA0NDEuNzc1IDEwOTUuMDEgNDQ3LjY1IEMgOTgzLjc1IDQ1NS4zNDggOTIyLjk5MiA0ODkuNjA3IDkzOC43MTMgNjExLjgxIEMgOTMwLjA4MiA2MDguMjcgOTEyLjk1NCA2MDIuMDk2IDkwMy45NjYgNTk5LjU5IEMgOTAwLjE3OCA1OTEuNDkgOTAyLjYwMyA1ODAuNTM0IDkwMy41NjggNTcxLjIzOCBDIDkwNy4zOTMgNTUwLjA3NiA5MDguNzExIDUzNC4wNCA5MTcuODQ4IDUxMy43ODMgQyA5NzIuODc5IDM5MS43ODkgMTE2Mi45IDQwNC42OTggMTI2NC42NSA0NTEuMTE1IHoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgZmlsbD0icmdiKDExNiw2MiwzMykiIGQ9Ik0gODIyLjE2IDUwNi4xMzMgQyA4MzYuMTYzIDUxOS40MzIgODgzLjAwNCA1NzMuOTA5IDkwMy41NjggNTcxLjIzOCBDIDkwMi42MDMgNTgwLjUzNCA5MDAuMTc4IDU5MS40OSA5MDMuOTY2IDU5OS41OSBDIDg1NS4yNTIgNTg1LjQ3MyA4MjguMzQ0IDU4MS43NzkgNzc4LjA0MSA1ODYuNjY1IEwgNzc4LjI5OSA1ODUuNDA1IEMgNzg5LjExNCA1ODAuMjQ1IDgzMS4yNTMgNTgyLjk2NyA4NDMuNjUxIDU4NC40MTIgQyA4NTQuMTU3IDU4NS42MzcgODY5Ljg3IDU5MC42NzUgODc5LjkwNCA1ODkuNzkzIEMgODgwLjA5MSA1ODkuMjcgODgwLjI3NyA1ODguNzQ4IDg4MC40NjMgNTg4LjIyNSBDIDg4MS4yMjIgNTgxLjc3OSA4ODYuMDIgNTc5LjYgODg5LjIxNyA1NzEuNDM3IEMgODg5LjE1NCA1NzAuNjggODg5LjA5IDU2OS45MjMgODg5LjAyNiA1NjkuMTY2IEMgODcxLjM3NCA1NTguNzkgODMwLjMxMSA1MjIuNTUgODIyLjE2IDUwNi4xMzMgeiIvPgo8L3N2Zz4=") 2 2, auto;
  }

  body{
    font-family:'Mali','Kanit',sans-serif;
    background:#8ED0F5; /* static fallback; the real sky is painted by .bg-sky-day/.bg-sky-night below (CSS can't tween between two gradients, so we crossfade two layers with opacity instead) */
    color:var(--ink);
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
  }
  .bg-sky-day, .bg-sky-night{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    transition:opacity 2s ease;
  }
  .bg-sky-day{
    opacity:1;
    background:
      radial-gradient(700px circle at 88% -8%, rgba(255,247,214,.65), rgba(255,247,214,0) 60%),
      radial-gradient(500px circle at -5% 15%, rgba(255,255,255,.25), rgba(255,255,255,0) 65%),
      linear-gradient(180deg, #4092E8 0%, #5FB2EF 26%, #8ED0F5 52%, #C3E9FB 76%, #EAF8FF 100%);
  }
  .bg-sky-night{
    opacity:0;
    background:
      radial-gradient(600px circle at 85% 6%, rgba(255,255,255,.10), rgba(255,255,255,0) 60%),
      radial-gradient(500px circle at -5% 15%, rgba(255,255,255,.05), rgba(255,255,255,0) 65%),
      linear-gradient(180deg, #060A1F 0%, #0E1440 22%, #182158 46%, #232F6E 70%, #303F85 100%);
  }
  body.night-mode .bg-sky-day{opacity:0;}
  body.night-mode .bg-sky-night{opacity:1;}
  body.night-mode .app-header{
    background:linear-gradient(120deg, rgba(18,22,54,0.55), rgba(18,22,54,0.35));
    border-bottom:1px solid rgba(255,255,255,0.14);
  }
  body.night-mode .app-header .brand-text h1{color:#FFF7E0; text-shadow:0 1px 3px rgba(0,0,0,.35);}
  body.night-mode .app-header .brand-text p{color:#C9D3F5;}
  body.night-mode .hero h2{color:#FFF7E0; text-shadow:0 1px 4px rgba(0,0,0,.3);}
  body.night-mode .hero p{color:#C9D3F5;}
  body.night-mode .cat-section-title{color:#FFF7E0; text-shadow:0 1px 3px rgba(0,0,0,.3);}
  body.night-mode .cat-section-note{color:#C9D3F5;}
  body.night-mode footer{color:#C9D3F5;}
  body.night-mode .shimmer-blob{opacity:.4;}
  button{font-family:inherit;}
  h1,h2,h3,p{margin:0;}
  [hidden]{display:none !important;}

  /* ---------- floating background decor ---------- */
  .bg-shimmer{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
  .shimmer-blob{position:absolute;border-radius:50%;filter:blur(72px);transition:opacity 2s ease;}
  .shimmer-blob.s1{width:500px;height:500px;top:-150px;left:-150px;background:rgba(255,255,255,.55);animation:blob1 22s ease-in-out infinite;}
  .shimmer-blob.s2{width:420px;height:420px;bottom:-120px;right:-100px;background:rgba(255,255,255,.40);animation:blob2 28s ease-in-out infinite;}
  .shimmer-blob.s3{width:360px;height:360px;top:38%;left:32%;background:rgba(210,240,255,.35);animation:blob3 19s ease-in-out infinite;}

  @keyframes blob1{0%,100%{transform:translate(0,0);}33%{transform:translate(90px,70px);}66%{transform:translate(-40px,110px);}}
  @keyframes blob2{0%,100%{transform:translate(0,0);}50%{transform:translate(-110px,-90px);}}
  @keyframes blob3{0%,100%{transform:scale(1);}50%{transform:scale(1.7);}}

  .bg-decor{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;}

  /* wrapper handles the rise/set glide (transform) so it doesn't fight the inner svg's own rotate/pulse animation on the same `transform` property */
  .bg-sun-wrap{
    position:fixed; top:64px; right:-50px; width:190px; height:190px; pointer-events:none; z-index:0;
    transform:translateY(0) scale(1);
    transition:transform 2s cubic-bezier(.5,.05,.35,1);
  }
  body.night-mode .bg-sun-wrap{transform:translateY(220px) scale(.75);}
  .bg-sun{width:100%; height:100%; display:block; animation:sunSpin 90s linear infinite; transition:opacity 2s ease;}
  .bg-sun .rays{transform-origin:110px 110px; animation:sunPulse 4s ease-in-out infinite;}
  @keyframes sunSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  @keyframes sunPulse{0%,100%{opacity:.55;}50%{opacity:.85;}}
  body.night-mode .bg-sun{opacity:0; pointer-events:none;}

  .bg-moon-wrap{
    position:fixed; top:64px; right:-30px; width:170px; height:170px; pointer-events:none; z-index:0;
    transform:translateY(-220px) scale(.75);
    transition:transform 2s cubic-bezier(.5,.05,.35,1);
  }
  body.night-mode .bg-moon-wrap{transform:translateY(0) scale(1);}
  .bg-moon{width:100%; height:100%; display:block; opacity:0; transition:opacity 2s ease;}
  body.night-mode .bg-moon{opacity:.85; animation:moonGlow 6s ease-in-out infinite;}
  @keyframes moonGlow{0%,100%{opacity:.85;}50%{opacity:1;}}

  .bg-twinkle{position:fixed; pointer-events:none; z-index:0; border-radius:50%; background:#fff; animation:twinkle ease-in-out infinite;}
  @keyframes twinkle{0%,100%{opacity:.15; transform:scale(.7);}50%{opacity:.9; transform:scale(1.15);}}
  .bg-cloud{position:absolute; pointer-events:none; user-select:none; filter:blur(1px) drop-shadow(0 10px 16px rgba(80,140,190,.16)); transition:filter 2s ease;}
  body.night-mode .bg-cloud{filter:blur(1px) drop-shadow(0 10px 16px rgba(10,14,40,.45));}
  body.night-mode .bg-floater{filter:saturate(1.1) drop-shadow(0 0 6px rgba(255,241,168,.65));}
  @keyframes driftRightward{
    0%  {transform:translateX(0); opacity:0;}
    10% {opacity:.7;}
    90% {opacity:.7;}
    100%{transform:translateX(140vw); opacity:0;}
  }
  @keyframes driftLeftward{
    0%  {transform:translateX(0); opacity:0;}
    10% {opacity:.7;}
    90% {opacity:.7;}
    100%{transform:translateX(-140vw); opacity:0;}
  }
  .bg-floater{
    position:absolute; pointer-events:none; user-select:none;
    opacity:0; filter:saturate(1.25) drop-shadow(0 4px 8px rgba(74,63,53,.18)); line-height:1;
    animation:riseUp linear forwards;
    transition:filter 2s ease;
  }
  @keyframes riseUp{
    0%  {transform:translateY(0) rotate(0deg) scale(1);   opacity:0;}
    8%  {opacity:0.34;}
    88% {opacity:0.34;}
    100%{transform:translateY(-115vh) rotate(var(--rot,12deg)) scale(var(--sc,1)); opacity:0;}
  }

  /* ---------- layout shells ---------- */
  .app-header{
    position:sticky; top:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap;
    gap:8px 10px; padding:12px 16px;
    background:linear-gradient(120deg, rgba(255,255,255,0.35), rgba(210,240,255,0.22));
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    border-bottom:1px solid rgba(255,255,255,0.45);
    box-shadow:0 6px 24px rgba(79,168,240,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
    transition:background 2s ease, border-color 2s ease;
  }
  .brand{display:flex; align-items:center; gap:10px;}
  .brand-emoji{display:block; animation:idleBounceBar 2.6s ease-in-out infinite;}
  .brand-text h1{font-size:clamp(22px,5.6vw,28px); font-weight:800; color:var(--ink); transition:color 2s ease, text-shadow 2s ease;}
  .brand-text p{font-size:clamp(15px,3.8vw,18px); color:var(--ink-soft); font-weight:600; transition:color 2s ease;}
  .header-actions{display:flex; align-items:center; gap:8px;}
  .icon-btn{
    position:relative;
    width:42px;height:42px; border-radius:50%; border:none; cursor:pointer;
    background:var(--white); box-shadow:var(--shadow-btn); font-size:19px;
    display:flex; align-items:center; justify-content:center;
    transition:transform .15s ease, background .15s ease;
  }
  .icon-btn:active{transform:translateY(3px); box-shadow:none;}
  .icon-btn .icon-inner, .back-btn .icon-inner{
    position:relative; width:100%; height:100%; border-radius:50%;
    overflow:hidden; display:flex; align-items:center; justify-content:center;
  }
  .icon-btn .icon-glyph, .back-btn .icon-glyph{display:flex; align-items:center; justify-content:center;}
  .icon-btn svg, .back-btn svg{display:block; flex-shrink:0;}
  .icon-glyph.lens-icon{display:flex; align-items:center; justify-content:center;}
  .icon-glyph.lens-icon svg{display:block;}
  .icon-btn.muted .icon-glyph, .back-btn.muted .icon-glyph{opacity:.4; filter:grayscale(1);}
  .icon-btn .mute-stripe, .back-btn .mute-stripe{
    display:none; position:absolute; top:50%; left:-15%; width:130%; height:3px;
    background:#FF6161; border-radius:3px;
    box-shadow:0 0 0 1.5px rgba(255,255,255,.85);
    transform:translateY(-50%) rotate(-40deg);
  }
  .icon-btn.muted .mute-stripe, .back-btn.muted .mute-stripe{display:block;}
.icon-btn[data-tooltip]::after{
    content:attr(data-tooltip);
    position:absolute; top:calc(100% + 10px); left:50%;
    transform:translateX(-50%) translateY(-4px);
    background:#FFFBF0; border:3px solid #FFD98E; border-radius:4px 14px 14px 14px;
    padding:6px 12px; font-size:12px; font-weight:700; color:var(--ink);
    white-space:nowrap; box-shadow:0 6px 20px rgba(74,63,53,.18);
    opacity:0; pointer-events:none; z-index:30;
    transition:opacity .1s ease, transform .1s ease;
  }
  .icon-btn[data-tooltip]::before{
    content:''; position:absolute; top:calc(100% + 4px); left:50%;
    transform:translateX(-50%);
    border:6px solid transparent; border-bottom-color:#FFD98E;
    opacity:0; pointer-events:none; z-index:30;
    transition:opacity .1s ease;
  }
  .icon-btn[data-tooltip]:hover::after,
  .icon-btn[data-tooltip]:focus-visible::after{
    opacity:1; transform:translateX(-50%) translateY(0);
  }
  .icon-btn[data-tooltip]:hover::before,
  .icon-btn[data-tooltip]:focus-visible::before{
    opacity:1;
  }
  /* ---------- owl widget (fixed bottom-right) ---------- */
  .owl-widget{
    position:fixed; right:22px; bottom:22px; z-index:15;
    display:flex; flex-direction:column; align-items:flex-end; gap:8px;
  }
  .install-link-btn{
    position:fixed; left:14px; bottom:14px; z-index:15;
    background:rgba(255,255,255,.9); backdrop-filter:blur(6px);
    border:2px solid var(--cream-2); border-radius:999px;
    padding:9px 16px; font-family:inherit; font-size:13.5px; font-weight:800;
    color:var(--ink-soft); cursor:pointer; box-shadow:0 3px 10px rgba(74,63,53,.12);
    transition:transform .15s ease, color 2s ease, background .2s ease;
  }
  .install-link-btn:active{transform:translateY(2px) scale(.97);}
  body.night-mode .install-link-btn{background:rgba(30,34,70,.75); border-color:rgba(255,255,255,.25); color:#C9D3F5;}
  .owl-speech{
    position:absolute; bottom:calc(100% + 10px); right:0;
    background:#FFFBF0; border:3px solid #FFD98E;
    border-radius:20px 20px 4px 20px;
    padding:13px 18px; min-width:170px; max-width:260px;
    box-shadow:0 6px 20px rgba(74,63,53,.18);
    font-size:clamp(15px,3.8vw,17px); font-weight:700; color:var(--ink);
    line-height:1.5; text-align:center;
    opacity:0; transform:translateY(8px) scale(.9); pointer-events:none;
    transition:opacity .28s cubic-bezier(.34,1.56,.64,1), transform .28s cubic-bezier(.34,1.56,.64,1);
  }
  .owl-speech.visible{opacity:1; transform:translateY(0) scale(1);}
  .owl-speech::after{
    content:''; position:absolute; bottom:-12px; right:18px;
    border:7px solid transparent; border-top-color:#FFD98E;
  }
  .owl-speech::before{
    content:''; position:absolute; bottom:-8px; right:21px; z-index:1;
    border:5px solid transparent; border-top-color:#FFFBF0;
  }
  .owl-sticker-btn{
    background:var(--white); border:3px solid #FFE7BF;
    border-radius:999px; padding:7px 14px 7px 10px;
    display:flex; align-items:center; gap:5px;
    font-family:inherit; font-size:13px; font-weight:800; color:var(--ink);
    cursor:pointer; box-shadow:var(--shadow-btn);
    transition:transform .15s, box-shadow .15s;
    white-space:nowrap;
    animation:stickerBtnPulse 3.5s ease-in-out infinite;
  }
  .owl-sticker-btn:active{transform:translateY(2px); box-shadow:none; animation:none;}
  @keyframes stickerBtnPulse{
    0%,60%,100%{box-shadow:var(--shadow-btn);}
    35%{box-shadow:var(--shadow-btn), 0 0 0 5px rgba(255,176,32,.22);}
  }
  .sticker-count-badge{
    background:linear-gradient(135deg,#FFE07A,#FFB020);
    border-radius:999px; padding:2px 8px; font-size:12px; font-weight:800;
  }

  /* ---------- locked category card ---------- */
  .cat-card.cat-locked{opacity:.55; filter:grayscale(.6);}
  .cat-card.cat-locked:active{transform:none; box-shadow:var(--shadow-card);}
  .cat-lock-msg{
    margin-top:auto; display:inline-flex; align-items:center; gap:5px;   /* ปักล่างสุดเหมือน .cat-progress */
    background:rgba(255,255,255,.7); border-radius:999px; padding:4px 10px;
    font-size:13px; font-weight:700; color:var(--ink-soft);
  }

  /* icon SVG แทน emoji บนปุ่มข้อความ (ใช้ทั้งหน้าหลักและหน้า teacher) — จัดแนวกับตัวหนังสือ */
  .btn-svg{vertical-align:-4px; display:inline-block;}

  /* ---------- toast notification ---------- */
  .toast{
    position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(16px);
    background:rgba(74,63,53,.92); color:var(--white);
    border-radius:999px; padding:12px 24px;
    font-size:clamp(15px,4vw,17px); font-weight:700;
    display:flex; align-items:center; gap:8px;
    opacity:0; transition:opacity .22s,transform .22s;
    pointer-events:none; z-index:320; white-space:nowrap;
    box-shadow:0 8px 24px rgba(0,0,0,.22);
  }
  .toast.visible{opacity:1; transform:translateX(-50%) translateY(0);}

  /* ---------- sticker book ---------- */
  #sticker-book{
    position:fixed; inset:0; z-index:90;
    display:flex; align-items:center; justify-content:center; padding:16px;
    background:rgba(74,63,53,0);
    backdrop-filter:blur(0px);
    transition:background .3s ease, backdrop-filter .3s ease;
  }
  #sticker-book.show{
    background:rgba(74,63,53,.5);
    backdrop-filter:blur(6px);
  }
  .sb-card{
    background:linear-gradient(155deg,#FFF9EC,#FFEFD1 60%,#FFE4BE);
    border-radius:var(--radius-xl); padding:22px 18px 18px;
    max-width:560px; width:100%;
    box-shadow:0 24px 70px rgba(74,63,53,.32);
    max-height:92vh; overflow-y:auto;
    border:4px solid #FFD98E;
    opacity:0; transform:scale(.82) translateY(10px);
    transition:opacity .32s cubic-bezier(.34,1.56,.64,1), transform .32s cubic-bezier(.34,1.56,.64,1);
  }
  #sticker-book.show .sb-card{ opacity:1; transform:scale(1) translateY(0); }
  /* ปุ่มปิด ✕ มุมบนขวา: sticky ให้ลอยติดขอบบนตอน scroll สมุด */
  .sb-x-btn{
    position:sticky; top:0; z-index:5;
    display:block; margin-left:auto; margin-bottom:-36px;
    width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
    background:#FFB020; color:#5A3A00; font-size:17px; font-weight:800; font-family:inherit;
    box-shadow:0 3px 0 #C47E00; transition:transform .15s, box-shadow .15s;
  }
  .sb-x-btn:active{transform:translateY(2px); box-shadow:0 1px 0 #C47E00;}
  /* scrollbar สมุดสติกเกอร์: พื้นหลังใส thumb สีทองเข้าธีม (pattern เดียวกับ .emoji-picker) */
  .sb-card{scrollbar-width:thin; scrollbar-color:#FFB020 transparent;}
  .sb-card::-webkit-scrollbar{width:8px;}
  .sb-card::-webkit-scrollbar-track{background:transparent;}
  .sb-card::-webkit-scrollbar-thumb{background:#FFB020; border-radius:8px;}
  .sb-title{font-size:clamp(20px,5.2vw,26px);font-weight:800;color:var(--ink);text-align:center;margin-bottom:2px;}
  .sb-sub{font-size:clamp(14px,3.5vw,16px);color:var(--ink-soft);font-weight:700;text-align:center;margin-bottom:18px;}
  .sb-grid{
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-bottom:18px;
  }
  .sb-slot{
    border-radius:var(--radius-lg); display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:4px;
    border:3px dashed #E8D8C0; background:rgba(255,255,255,.4);
    padding:10px 4px; position:relative; overflow:hidden;
    min-height:92px;
  }
  .sb-slot.earned{
    border:3px solid transparent; background:transparent; box-shadow:none; overflow:visible;
  }
  /* สติกเกอร์ในสมุด: วงกลมทอง + มุมพับ แบบเดียวกับ .cat-sticker.unlocked บนการ์ดหมวด */
  .slot-sticker{
    width:clamp(60px,15vw,80px); height:clamp(60px,15vw,80px); flex-shrink:0;
    border-radius:50%; overflow:hidden; position:relative;
    display:flex; align-items:center; justify-content:center;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94.8 53.9 A45 45 0 1 0 53.9 94.8 Z' fill='%23FFD75E' stroke='%23E9AE45' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M94.8 53.9 A45 45 0 0 0 53.9 94.8 Z' fill='%23E8A63C' stroke='%23E9AE45' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.28));
  }
  .sb-slot.stamping{
    animation:stampIn .6s cubic-bezier(.34,1.56,.64,1) .45s both;
  }
  @keyframes stampIn{
    0%{transform:scale(3.2) rotate(-18deg); opacity:0; filter:blur(10px);}
    65%{transform:scale(.91) rotate(3deg); filter:blur(0);}
    100%{transform:scale(1) rotate(0); opacity:1;}
  }
  .sb-slot .slot-emoji{font-size:clamp(28px,7vw,38px); line-height:1;}
  .sb-slot .slot-icon-img{width:clamp(28px,7vw,38px); height:clamp(28px,7vw,38px); object-fit:contain; display:block;}
  .slot-sticker .slot-icon-img{width:55%; height:55%; transform:rotate(30deg);}
  /* icon มี transform (สร้าง stacking context) เลยทับ shine ที่อยู่ก่อนใน DOM — ดัน shine ขึ้นด้วย z-index ให้แสงวิ่งทับ icon */
  .slot-sticker .slot-shine{z-index:2;}
  .slot-sticker .slot-emoji{font-size:clamp(22px,5.5vw,30px); transform:rotate(30deg);}
  .sb-slot .slot-name{font-size:clamp(10px,2.6vw,12px);font-weight:800;color:var(--ink-soft); text-align:center;}
  .sb-slot .slot-empty{font-size:24px; opacity:.25;}
  .sb-slot .slot-shine{
    position:absolute; top:-30%; left:-30%; width:60%; height:160%;
    background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 100%);
    transform:skewX(-20deg); pointer-events:none;
    animation:shine 3.5s ease-in-out infinite;
    animation-delay:var(--shine-delay,0s);
  }
  @keyframes shine{0%,70%,100%{left:-30%;}40%{left:120%;}}
  .sb-close-btn{
    width:100%; padding:14px; border-radius:var(--radius-md); border:none; cursor:pointer;
    background:#FFB020; color:#5A3A00; font-family:inherit;
    font-size:clamp(17px,4.3vw,20px); font-weight:800;
    box-shadow:0 5px 0 #C47E00; transition:transform .15s,box-shadow .15s;
  }
  .sb-close-btn:active{transform:translateY(4px); box-shadow:0 1px 0 #C47E00;}

  main{position:relative; z-index:1; max-width:820px; margin:0 auto; padding:20px 16px 60px;}
  /* จอกว้างมีที่ว่างด้านข้างเยอะ (main เดิมคงที่ 820px) ขยาย section ต่างๆ ให้ใช้พื้นที่มากขึ้นเป็นขั้นบันได
     grid การ์ดหมวด (.cat-grid ฯลฯ) ใช้ auto-fit/auto-fill อยู่แล้วจึงไล่เรียงคอลัมน์เพิ่มเองอัตโนมัติเมื่อ main กว้างขึ้น */
  @media (min-width:900px){ main{max-width:1080px;} }
  @media (min-width:1300px){ main{max-width:1280px;} }

  /* ---------- child select view ---------- */
  #child-select-view{
    display:flex; align-items:center; justify-content:center;
    padding:24px 20px; min-height:82vh;
  }
  .cs-inner{
    background:var(--white); border-radius:var(--radius-xl);
    padding:32px 24px 28px; max-width:400px; width:100%;
    box-shadow:var(--shadow-card); text-align:center;
  }
  .cs-mascot{font-size:60px; display:inline-block; animation:idleBounce 1.2s ease-in-out infinite alternate; margin-bottom:8px;}
  .cs-inner h2{font-size:clamp(21px,5vw,26px); font-weight:800; color:var(--ink); margin-bottom:4px;}
  .cs-inner .cs-sub{font-size:clamp(15px,3.8vw,17px); color:var(--ink-soft); font-weight:600; margin-bottom:20px;}
  .child-list{display:flex; flex-direction:column; gap:10px; margin-bottom:4px;}
  /* button group: การ์ดเลือกเด็ก (ซ้าย, ไซส์เท่าเดิม) + ปุ่มแก้ไข emoji (ขวา) เชื่อมเป็นก้อนเดียวกัน
     มีเส้นแบ่งตรงกลาง เหมือน chip กลุ่มเดียวกันใน header (คงสี/ขอบ/เงาของ template เดิม แค่รวมทรง) */
  .child-row{
    display:flex; align-items:stretch; background:var(--cream);
    border-radius:var(--radius-md); border:3px solid var(--cream-2);
    box-shadow:var(--shadow-btn); overflow:hidden;
  }
  .child-row .child-card{border:none; box-shadow:none; border-radius:0; background:transparent;}
  .child-row .child-edit-btn{
    width:48px; height:auto; border-radius:0; font-size:18px;
    box-shadow:none; border-left:3px solid var(--cream-2); background:transparent;
  }
  .child-row .child-edit-btn:active{transform:none; background:rgba(74,63,53,.06);}
  .child-card{
    width:100%; padding:13px 18px; border-radius:var(--radius-md);
    border:3px solid var(--cream-2); background:var(--cream);
    font-family:inherit; cursor:pointer; text-align:left;
    display:flex; align-items:center; gap:12px;
    transition:transform .15s,border-color .15s;
    box-shadow:var(--shadow-btn);
  }
  .child-card:active{transform:translateY(3px); box-shadow:none;}
  .child-card .cav{font-size:30px;}
  .child-card .cinfo{flex:1;}
  .child-card .cname{font-size:clamp(18px,4.5vw,21px); font-weight:800; color:var(--ink);}
  .child-card .csub{font-size:13px; font-weight:700; color:var(--ink-soft); margin-top:1px;}
  body.night-mode .child-card .csub{color:#B7C2E8;}
  .cs-divider{font-size:13px; color:var(--ink-soft); font-weight:600; margin:14px 0 10px;}
  .child-name-input{
    width:100%; padding:13px 16px; border-radius:var(--radius-md);
    border:3px solid var(--cream-2); background:var(--cream);
    font-family:inherit; font-size:clamp(18px,4.5vw,21px); font-weight:700; color:var(--ink);
    margin-bottom:12px; outline:none; text-align:center;
  }
  .child-name-input:focus{border-color:#FFB020;}
  .child-submit-btn{
    width:100%; padding:13px; border-radius:var(--radius-md); border:none; cursor:pointer;
    background:#FFB020; color:#5A3A00; font-family:inherit;
    font-size:clamp(17px,4.3vw,20px); font-weight:800;
    box-shadow:0 5px 0 #C47E00; transition:transform .15s,box-shadow .15s;
  }
  .child-submit-btn:active{transform:translateY(4px); box-shadow:0 1px 0 #C47E00;}
  .child-add-new-btn{
    margin-top:14px; width:100%; padding:11px; border-radius:var(--radius-md);
    border:3px dashed var(--cream-2); background:transparent;
    font-family:inherit; font-size:clamp(15px,3.8vw,17px); font-weight:700; color:var(--ink-soft);
    cursor:pointer; transition:border-color .15s,color .15s;
  }
  .child-add-new-btn:hover,.child-add-new-btn:active{border-color:#FFB020; color:var(--ink);}
  .child-import-btn{
    margin-top:6px; width:100%; padding:7px; border-radius:var(--radius-md);
    border:none; background:transparent;
    font-family:inherit; font-size:clamp(13px,3.2vw,14px); font-weight:600; color:var(--ink-soft);
    cursor:pointer; transition:color .15s; text-decoration:underline; text-underline-offset:3px;
  }
  .child-import-btn:hover,.child-import-btn:active{color:var(--ink);}
  /* ปุ่ม "รายละเอียดการอัพเดท" เป็นคนละหัวข้อ/คนละกลุ่มฟังก์ชันกับปุ่มนำเข้าข้อมูล เว้นระยะเพิ่มให้แยกกันชัดเจน */
  .changelog-open-btn{margin-top:22px;}
  /* emoji picker */
  .emoji-picker-label{font-size:14px;font-weight:700;color:var(--ink-soft);margin-bottom:8px;text-align:left;}
  .emoji-picker{
    display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px;
    background:var(--cream); border-radius:var(--radius-md);
    padding:10px; border:3px solid var(--cream-2); margin-bottom:14px;
    max-height:260px; overflow-y:auto; /* emoji เยอะขึ้น 2 เท่า ใส่ scrollbar กันกล่องยืดเกินจอ */
    scrollbar-width:thin; scrollbar-color:var(--cat-color,#FFB020) transparent;
  }
  .emoji-picker::-webkit-scrollbar{width:8px;}
  .emoji-picker::-webkit-scrollbar-track{background:transparent;}
  .emoji-picker::-webkit-scrollbar-thumb{background:var(--cat-color,#FFB020); border-radius:8px;}
  .emo-btn{
    min-width:0; width:100%;
    font-size:28px; border:3px solid transparent; border-radius:var(--radius-sm);
    padding:4px 2px; cursor:pointer; background:transparent;
    line-height:1.1; transition:transform .12s,border-color .12s,background .12s;
  }
  @media (max-width:380px){
    .emoji-picker{grid-template-columns:repeat(5,minmax(0,1fr));}
    .emo-btn{font-size:24px;}
  }
  .emo-btn:active{transform:scale(.82);}
  .emo-btn.selected{
    border-color:#FFB020; background:rgba(255,176,32,.18);
    transform:scale(1.18);
  }
  /* ===================== ตัวเลือกอายุ (age picker) ===================== */
  .age-picker-label{font-size:14px;font-weight:700;color:var(--ink-soft);margin:2px 0 8px;text-align:left;}
  /* ตัวเลือกวันเกิด (วัน/เดือน/ปี ค.ศ.) — สไตล์เข้าธีม (มน นุ่ม เงาหนา แบบปุ่มเด็ก) */
  .dob-picker{ display:flex; gap:10px; margin-bottom:16px; justify-content:center; align-items:stretch; }
  #age-modal-picker.dob-picker{ margin:6px 0 20px; }
  .dob-select{
    flex:1 1 0; min-width:0; padding:13px 26px 13px 12px; border-radius:var(--radius-md);
    border:3px solid var(--cream-2); background:var(--cream); color:var(--ink);
    font-family:inherit; font-size:clamp(15px,3.9vw,17px); font-weight:800; cursor:pointer;
    -webkit-appearance:none; appearance:none; text-align:center; text-align-last:center;
    box-shadow:0 4px 0 var(--cream-2);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='9' viewBox='0 0 13 9'><path d='M1.5 1.5l5 5 5-5' fill='none' stroke='%23FFB020' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:right 9px center;
    transition:border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
  }
  .dob-select.dob-day{ flex:0 0 23%; }
  .dob-select:hover{ border-color:#FFD98A; }
  .dob-select:focus{ outline:none; border-color:#FFB020; background:#FFF6E4; box-shadow:0 4px 0 #F3C466; }
  .dob-select:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--cream-2); }
  .dob-select option{ font-weight:700; color:var(--ink); background:#fff; }
  body.night-mode .dob-select{ background:#2A3352; border-color:#3B4468; color:#EAF0FF; box-shadow:0 4px 0 #1E263F; }
  body.night-mode .dob-select:hover{ border-color:#5A6796; }
  body.night-mode .dob-select:focus{ background:#4A3A22; border-color:#FFB020; box-shadow:0 4px 0 #2A3352; }
  body.night-mode .dob-select option{ color:#EAF0FF; background:#222B45; }
  .age-picker{
    display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
    margin-bottom:16px;
  }
  #age-modal-picker{margin:4px 0 20px;}
  .age-btn{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:56px; height:58px; border-radius:var(--radius-md);
    border:3px solid var(--cream-2); background:var(--cream);
    cursor:pointer; font-family:inherit; color:var(--ink);
    transition:transform .14s cubic-bezier(.34,1.56,.64,1), border-color .14s, background .14s, box-shadow .14s;
  }
  .age-btn .age-num{font-size:24px; font-weight:800; line-height:1;}
  .age-btn .age-unit{font-size:11px; font-weight:700; color:var(--ink-soft); margin-top:2px;}
  .age-btn:active{transform:scale(.9);}
  .age-btn.selected{
    border-color:#FF9F45; background:#FFF0DE;
    transform:scale(1.1); box-shadow:0 5px 0 rgba(255,159,69,.35);
  }
  .age-btn.selected .age-unit{color:#E07B12;}
  body.night-mode .age-btn{background:#2A3352; border-color:#3B4468; color:#EAF0FF;}
  body.night-mode .age-btn .age-unit{color:#B7C2E8;}
  body.night-mode .age-btn.selected{background:#4A3A22; border-color:#FF9F45;}

  /* ===================== แถบเลือกระดับชั้น (grade bar) ===================== */
  .grade-bar-wrap{margin:0 0 26px;}
  .grade-bar-title{
    font-size:15px; font-weight:800; color:var(--ink-soft);
    margin-bottom:10px; padding-left:2px;
  }
  body.night-mode .grade-bar-title{color:#EAF0FF;}
  .grade-bar{
    display:flex; gap:8px; padding:4px 2px 12px;   /* ปุ่มกว้างเท่ากันเต็มแถว (ไม่ scroll) */
  }
  .grade-pill{
    flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:11px 6px 9px; border-radius:20px;
    border:3px solid var(--cream-2); background:var(--white);
    cursor:pointer; font-family:inherit; color:var(--ink);
    box-shadow:0 3px 0 var(--cream-2);
    transition:transform .16s cubic-bezier(.34,1.56,.64,1), border-color .16s, background .16s, box-shadow .16s, color .16s;
  }
  .grade-pill .gp-emoji{font-size:26px; line-height:1; height:38px; display:flex; align-items:flex-end; justify-content:center;}
  .grade-pill .gp-owl{width:38px; height:38px; display:block; object-fit:contain; filter:drop-shadow(0 2px 2px rgba(0,0,0,.12)); transition:transform .16s cubic-bezier(.34,1.56,.64,1);}
  .grade-pill.active .gp-owl{transform:scale(1.12);}
  .grade-pill .gp-label{font-size:14px; font-weight:800; text-align:center; line-height:1.15;}
  @media (max-width:560px){
    .grade-bar{gap:5px;}
    .grade-pill{padding:9px 3px 7px; border-radius:16px;}
    .grade-pill .gp-emoji, .grade-pill .gp-owl{height:30px;}
    .grade-pill .gp-owl{width:30px;}
    .grade-pill .gp-label{font-size:11px;}
    .grade-pill .gp-soon{font-size:8px;}
  }
  .grade-pill .gp-soon{font-size:10px; font-weight:700; color:#B08968; line-height:1;}
  .grade-pill:active{transform:translateY(3px); box-shadow:0 1px 0 var(--cream-2);}
  .grade-pill.active{
    border-color:var(--thai); background:var(--thai-l);
    box-shadow:0 4px 0 #2597c9; transform:translateY(-1px);
  }
  .grade-pill.active .gp-label{color:#1E7BA8;}
  /* ปลดล็อกแล้วแต่ยังไม่มีเนื้อหา = จางเบาๆ ยังเห็นสี (ให้ความรู้สึกปลดล็อกแล้ว) */
  .grade-pill.soon{opacity:.78;}
  .grade-pill.soon .gp-emoji{filter:grayscale(.35);}
  /* ยังล็อก (ไม่ถึงเกณฑ์อายุ/ดาว) = จางมาก เทา + กุญแจ */
  .grade-pill.locked{opacity:.55;}
  .grade-pill.locked .gp-emoji{filter:grayscale(.9);}
  .grade-pill{position:relative;}
  .grade-pill .gp-lock{position:absolute; top:5px; right:7px; font-size:13px; line-height:1;}
  body.night-mode .grade-pill{background:#222B45; border-color:#37406A; box-shadow:0 3px 0 #171E33; color:#EAF0FF;}
  body.night-mode .grade-pill.active{background:#123A52; border-color:var(--thai); box-shadow:0 4px 0 #0B2636;}
  body.night-mode .grade-pill.active .gp-label{color:#8FD6F7;}
  body.night-mode .grade-pill .gp-soon{color:#8FA0C8;}
  /* confirm modal */
  #confirm-modal,#clear-modal,#qr-modal,#install-modal,#edit-emoji-modal,#import-conflict-modal,#changelog-modal,#free-piano-modal,#age-modal{
    position:fixed; inset:0; z-index:200;
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  .modal-sub{font-size:clamp(14px,3.6vw,16px);color:var(--ink-soft);font-weight:600;line-height:1.5;margin-bottom:18px;}
  .modal-backdrop{
    position:absolute; inset:0; background:rgba(74,63,53,0);
    backdrop-filter:blur(0px);
    opacity:0;
    transition:opacity .3s ease, background .3s ease, backdrop-filter .3s ease;
  }
  .show .modal-backdrop{
    background:rgba(74,63,53,.45); backdrop-filter:blur(4px); opacity:1;
  }
  .modal-card{
    position:relative; z-index:1;
    background:var(--white); border-radius:var(--radius-xl);
    padding:32px 28px 24px; max-width:360px; width:100%;
    box-shadow:0 20px 60px rgba(74,63,53,.25); text-align:center;
    opacity:0; transform:scale(.85) translateY(10px);
    transition:opacity .3s cubic-bezier(.34,1.56,.64,1), transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  .show .modal-card{ opacity:1; transform:scale(1) translateY(0); }
  .modal-icon{font-size:52px; margin-bottom:10px;}
  .modal-title{font-size:clamp(20px,5vw,24px);font-weight:800;color:var(--ink);margin-bottom:8px;}
  .modal-body{font-size:clamp(15px,3.8vw,17px);color:var(--ink-soft);font-weight:600;line-height:1.5;margin-bottom:24px;}
  .modal-actions{display:flex;gap:12px;}
  .modal-cancel-btn{
    flex:1; padding:13px; border-radius:var(--radius-md); border:3px solid var(--cream-2);
    background:var(--cream); font-family:inherit; font-size:clamp(16px,4vw,18px);
    font-weight:800; color:var(--ink); cursor:pointer;
    transition:transform .15s,background .15s;
  }
  .modal-cancel-btn:active{transform:translateY(2px); background:var(--cream-2);}
  .modal-confirm-btn{
    flex:1; padding:13px; border-radius:var(--radius-md); border:none; cursor:pointer;
    background:#FF6161; color:var(--white); font-family:inherit;
    font-size:clamp(16px,4vw,18px); font-weight:800;
    box-shadow:0 5px 0 #C43535; transition:transform .15s,box-shadow .15s;
  }
  .modal-confirm-btn:active{transform:translateY(4px); box-shadow:0 1px 0 #C43535;}
  /* ปุ่มปิด ✕ มุมบนขวาของ modal (pattern เดียวกับ .sb-x-btn ในสมุดสติกเกอร์ แต่ absolute แทน sticky เพราะ .modal-card ไม่ scroll ตัวเอง) */
  .modal-x-btn{
    position:absolute; top:14px; right:14px; z-index:5;
    width:32px; height:32px; border-radius:50%; border:none; cursor:pointer;
    background:var(--cream-2); color:var(--ink-soft); font-size:15px; font-weight:800; font-family:inherit;
    transition:transform .15s, background .15s;
  }
  .modal-x-btn:active{transform:translateY(2px);}
  /* modal รายละเอียดการอัพเดท */
  .changelog-card{max-width:420px; max-height:82vh; overflow-y:auto;}
  .changelog-body{text-align:left;}
  .changelog-version{font-size:15px; font-weight:800; color:var(--ink); margin-bottom:10px; text-align:center;}
  .changelog-cat{font-size:16px; font-weight:800; color:var(--ink); margin:14px 0 6px;}
  .changelog-cat:first-child{margin-top:0;}
  .changelog-list{margin:0 0 4px; padding-left:20px; color:var(--ink-soft); font-size:15px; font-weight:600; line-height:1.6;}
  .changelog-list li{margin-bottom:4px;}
  /* child chip in header */
  .child-chip{
    display:flex; align-items:center; gap:5px;
    background:var(--white); border:none; border-radius:999px; padding:6px 13px 6px 9px;
    box-shadow:var(--shadow-btn); font-family:inherit; font-weight:800; font-size:15px;
    color:var(--ink); cursor:pointer; transition:transform .15s;
    white-space:nowrap; max-width:130px; overflow:hidden;
  }
  .child-chip:active{transform:translateY(2px); box-shadow:none;}
  #header-child-name{overflow:hidden; text-overflow:ellipsis; max-width:90px; display:inline-block;}
  /* button group: ชื่อเด็ก (ซ้าย, ไซส์เท่าเดิม) + ปุ่มแก้ไข emoji (ขวา) เชื่อมเป็นปุ่มเดียวกัน มีเส้นแบ่งตรงกลาง
     (คงสี/เงา/ฟอนต์ตาม template เดิม แค่เปลี่ยนทรงจาก 2 ปุ่มแยกเป็นกลุ่มเชื่อมต่อ) */
  .child-chip-group{
    display:flex; align-items:stretch;
    background:var(--white); border-radius:999px; box-shadow:var(--shadow-btn); overflow:hidden;
  }
  .child-chip-group .child-chip{
    background:transparent; box-shadow:none; border-radius:0;
  }
  .child-chip-group .child-edit-btn{
    background:transparent; box-shadow:none; border-radius:0; width:auto;
    padding:6px 12px; border-left:2px solid var(--cream-2);
  }
  .child-edit-btn{
    display:flex; align-items:center; justify-content:center;
    width:32px; height:32px; flex-shrink:0;
    background:var(--white); border:none; border-radius:50%;
    box-shadow:var(--shadow-btn); font-size:14px; cursor:pointer; transition:transform .15s;
  }
  .child-edit-btn:active{transform:translateY(2px); box-shadow:none;}
  .child-chip-group .child-edit-btn:active{transform:none; background:rgba(74,63,53,.06);}

  /* ---------- home view ---------- */
  .hero{text-align:center; margin:10px 0 24px;}
  .hero-mascot{font-size:64px; display:inline-block; animation:idleBounce 1.2s ease-in-out infinite alternate;}
  .hero h2{font-size:clamp(28px,7vw,38px); font-weight:800; margin-top:6px; transition:color 2s ease, text-shadow 2s ease;}
  .hero p{font-size:clamp(17px,4.2vw,21px); color:var(--ink-soft); font-weight:600; margin-top:6px; transition:color 2s ease;}
  .hero-age{
    display:inline-block; margin:8px auto 0; padding:5px 16px; border-radius:999px;
    background:var(--cream); border:2.5px solid var(--cream-2);
    font-size:clamp(13px,3.4vw,15px); font-weight:800; color:var(--ink-soft);
  }
  body.night-mode .hero-age{background:#2A3352; border-color:#3B4468; color:#C9D3F5;}

  .cat-section-title{
    display:flex; align-items:center; gap:10px;
    font-size:clamp(18px,4.4vw,22px); font-weight:800; color:var(--ink);
    margin:0 0 14px;
  }
  .cst-icon{width:36px; height:36px; object-fit:contain; display:block; flex-shrink:0;}
  .cat-section-note{
    font-size:clamp(13px,3.2vw,14.5px); font-weight:600; color:var(--ink-soft);
    margin:-8px 0 16px; line-height:1.5;
  }
  .cat-section{margin-bottom:30px;}
  /* auto-fill + max คงที่ (ไม่ใช่ 1fr) ให้การ์ดทุก section ขนาดเท่ากันเป๊ะเสมอไม่ว่าจะมีกี่ใบ หรือ main กว้างแค่ไหน
     — จอกว้างขึ้นแค่ไล่คอลัมน์เพิ่ม ไม่ยืดการ์ดให้ใหญ่เกิน (เดิม .cat-grid ฐานใช้ 1fr ยืดการ์ด แก้ให้ตรงกับทุก section) */
  .cat-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,240px));
    justify-content:center; gap:18px;
  }
  .cat-card{
    position:relative; text-align:left; cursor:pointer; border:none;
    border-radius:var(--radius-xl); padding:22px 18px 20px;
    background:var(--cat-light);
    box-shadow:var(--shadow-card);
    height:275px; box-sizing:border-box;         /* การ์ดเกมสูงเท่ากันเสมอ 275px */
    display:flex; flex-direction:column; align-items:flex-start;  /* icon บน → ชื่อ/เมตา → progress ล่าง */
    opacity:0; transform:scale(.85);
    animation:cardIn .55s cubic-bezier(.34,1.56,.64,1) forwards;
    transition:transform .32s cubic-bezier(.34,1.3,.64,1), box-shadow .32s ease, z-index 0s;
    will-change:transform;
  }
  /* หลัง cardIn animation จบ (ดู animationend listener ใน renderHome()) จะติด class นี้แทนการค้าง animation ไว้
     เพื่อคง transform:scale(1) แบบ normal-priority ให้ :hover (specificity สูงกว่า) override ได้จริง */
  .cat-card.settled{ opacity:1; transform:scale(1); }
  /* shimmer ใช้ background-position animate (ไม่ขยับ element จึงไม่ต้อง overflow:hidden
     และ badge ที่โผล่เกินการ์ด top:-8px จะไม่ถูกตัด) */
  .cat-card:not(.cat-locked)::before{
    content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
    background:linear-gradient(105deg, transparent 44%, rgba(255,255,255,.65) 50%, transparent 56%);
    background-size:300% 100%; background-position:100% 0;
    transition:none;
  }
  .cat-card:not(.cat-locked):hover{
    transform:translateY(-14px) scale(1.13);
    box-shadow:0 28px 54px rgba(74,63,53,.26), 0 10px 20px rgba(74,63,53,.14), 0 0 0 3px rgba(255,255,255,.95), 0 0 0 5px var(--cat-color);
    z-index:4;
  }
  .cat-card:not(.cat-locked):hover::before{
    background-position:0% 0; transition:background-position .55s ease .05s;
  }
  /* emoji wiggle: plays once per hover ด้วย animation ที่รีเซ็ตทันทีตอน unhover */
  .cat-card:not(.cat-locked):hover .cat-emoji{
    animation:emojiWiggle .5s cubic-bezier(.36,.07,.19,.97);
  }
  @keyframes emojiWiggle{
    0%{ transform:scale(1) rotate(0); }
    20%{ transform:scale(1.3) rotate(-12deg); }
    45%{ transform:scale(1.22) rotate(9deg); }
    65%{ transform:scale(1.16) rotate(-5deg); }
    82%{ transform:scale(1.08) rotate(3deg); }
    100%{ transform:scale(1) rotate(0); }
  }
  .cat-card:active{transform:translateY(4px) scale(.97) !important; box-shadow:0 4px 0 rgba(74,63,53,0.10) !important;}
  .cat-card:nth-child(1){animation-delay:.03s;}
  .cat-card:nth-child(2){animation-delay:.10s;}
  .cat-card:nth-child(3){animation-delay:.17s;}
  .cat-card:nth-child(4){animation-delay:.24s;}
  .cat-card:nth-child(5){animation-delay:.31s;}
  .cat-card:nth-child(6){animation-delay:.38s;}
  @keyframes cardIn{ to{opacity:1; transform:scale(1);} }

  .cat-sticker{
    position:absolute; top:14px; right:14px; width:40px; height:40px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:19px;
    background:#EDE6DA; filter:grayscale(1) opacity(.55); z-index:1;
  }
  .cat-sticker-icon{width:22px; height:22px; object-fit:contain; display:block;}
  /* สติกเกอร์ปลดล็อก: วงกลมทองชั้นเดียว + มุมพับครึ่งวงกลมล่างขวา (SVG frame ฝังใน background) icon เอียง 30° + shine กวาดแบบสมุดสติกเกอร์ */
  .cat-sticker.unlocked{
    width:44px; height:44px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M94.8 53.9 A45 45 0 1 0 53.9 94.8 Z' fill='%23FFD75E' stroke='%23E9AE45' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M94.8 53.9 A45 45 0 0 0 53.9 94.8 Z' fill='%23E8A63C' stroke='%23E9AE45' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    border-radius:50%; overflow:hidden; box-shadow:none;
    filter:drop-shadow(0 3px 5px rgba(0,0,0,.28));
    animation:starPop .5s cubic-bezier(.34,1.56,.64,1);
  }
  .cat-sticker.unlocked::after{
    content:''; position:absolute; top:-30%; left:-30%; width:60%; height:160%;
    background:linear-gradient(120deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.65) 50%,rgba(255,255,255,0) 100%);
    transform:skewX(-20deg); pointer-events:none;
    animation:shine 3.5s ease-in-out infinite;
  }
  .cat-sticker.unlocked .cat-sticker-icon{width:24px; height:24px; transform:rotate(30deg);}
  @keyframes starPop{0%{transform:scale(0) rotate(-25deg);} 65%{transform:scale(1.25) rotate(8deg);} 100%{transform:scale(1) rotate(0);}}

  /* แถบไอคอน สูงคงที่ ให้ทุกการ์ด (emoji/รูป) เริ่มบรรทัดชื่อที่ระดับเดียวกัน */
  .cat-emoji{font-size:54px; line-height:1; height:58px; display:flex; align-items:center;}
  .cat-icon-img{width:56px; height:56px; object-fit:contain; display:block;}
  .cat-card > .cat-icon-img{margin:1px 0;}
  .cat-name{
    font-size:clamp(21px,5.4vw,26px); font-weight:800; margin-top:9px; color:var(--ink); line-height:1.2;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  }
  .cat-meta{font-size:16px; color:var(--ink-soft); font-weight:700; margin-top:3px;}
  /* progress / lock ปักไว้ล่างสุดของการ์ดเสมอ (layout เท่ากันทุกใบ) */
  .cat-progress{
    margin-top:auto; display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.75); border-radius:999px; padding:5px 12px;
    font-size:14.5px; font-weight:700; color:var(--ink);
  }
  .cat-progress-new{color:var(--ink-soft);}
  .cat-new-badge{
    position:absolute; top:-8px; left:14px; z-index:1;
    background:linear-gradient(135deg,#FF6B6B,#FF3B6E); color:#fff;
    font-size:12px; font-weight:800; letter-spacing:.5px;
    padding:4px 10px; border-radius:999px; box-shadow:0 3px 8px rgba(255,59,110,.45);
    animation:newBadgePop .5s cubic-bezier(.34,1.56,.64,1) .3s backwards, newBadgePulse 1.8s ease-in-out 1s infinite;
  }
  @keyframes newBadgePop{0%{transform:scale(0) rotate(-15deg); opacity:0;} 100%{transform:scale(1) rotate(-6deg); opacity:1;}}
  @keyframes newBadgePulse{0%,100%{transform:scale(1) rotate(-6deg);} 50%{transform:scale(1.08) rotate(-6deg);}}
  /* ป้ายบอกรางวัลปลดล็อกเปียโน (บนการ์ดเกมดนตรี 3) — absolute ไม่ดันขนาดการ์ด (การ์ดทุกใบเท่ากันเสมอ) */
  .cat-card-tag{
    position:absolute; bottom:-9px; right:12px; z-index:2; white-space:nowrap;
    background:linear-gradient(135deg,#C86FB0,#7B6FD0); color:#fff;
    font-size:12px; font-weight:800; letter-spacing:.2px;
    padding:5px 12px; border-radius:999px; box-shadow:0 4px 12px rgba(123,111,208,.5);
    animation:catTagPop .5s cubic-bezier(.34,1.56,.64,1) .35s backwards;
  }
  @keyframes catTagPop{0%{transform:scale(0); opacity:0;} 100%{transform:scale(1); opacity:1;}}

  /* ---------- quiz view ---------- */
  .quiz-top{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
  .back-btn{
    width:42px;height:42px; flex-shrink:0; border-radius:50%; border:none; cursor:pointer;
    background:var(--white); box-shadow:var(--shadow-btn); font-size:18px;
    display:flex; align-items:center; justify-content:center;
  }
  .back-btn:active{transform:translateY(3px); box-shadow:none;}
  .quiz-top-info{flex:1;}
  .quiz-top-info .cat-label{font-size:16px; font-weight:800; color:var(--cat-color,var(--math)); display:flex; align-items:center; gap:6px;}
  .cat-label-icon{width:20px; height:20px; object-fit:contain; display:block; flex-shrink:0;}
  .progress-track{
    margin-top:5px; height:14px; border-radius:999px; background:#EFE6D6; overflow:hidden;
    box-shadow:inset 0 2px 4px rgba(0,0,0,.08);
  }
  .progress-fill{
    height:100%; border-radius:999px;
    background:linear-gradient(90deg, var(--cat-color,var(--math)), color-mix(in srgb, var(--cat-color,var(--math)) 70%, white));
    transition:width .45s cubic-bezier(.4,0,.2,1);
  }
  .q-counter{
    flex-shrink:0; font-weight:800; font-size:16px; background:var(--white);
    border-radius:999px; padding:6px 12px; box-shadow:var(--shadow-btn);
    color:var(--cat-color,var(--math));
  }

  .question-card{
    background:var(--white); border-radius:var(--radius-xl); padding:28px 22px;
    box-shadow:var(--shadow-card); text-align:center; position:relative;
    animation:qIn .4s cubic-bezier(.34,1.2,.64,1);
  }
  @keyframes qIn{ from{opacity:0; transform:translateY(14px) scale(.97);} to{opacity:1; transform:translateY(0) scale(1);} }
  .q-emoji{font-size:clamp(38px,10vw,54px); margin-bottom:6px; line-height:1;}
  .q-text{font-size:clamp(24px,6.8vw,33px); font-weight:700; line-height:1.5; color:var(--ink);}

  /* ---- เติมแพทเทิร์น: แถวโจทย์เป็นการ์ด emoji + ช่อง ? เต้นตุบๆ ---- */
  .pattern-row{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
    gap:10px; margin:6px 0 12px;
  }
  .pat-tile{
    display:flex; align-items:center; justify-content:center;
    min-width:66px; height:66px; padding:0 9px; border-radius:18px;
    background:var(--cat-light,var(--math-l));
    box-shadow:0 3px 0 rgba(0,0,0,.09), inset 0 2px 0 rgba(255,255,255,.55);
    font-size:38px; line-height:1;
    animation:patTileIn .38s cubic-bezier(.34,1.4,.64,1) backwards;
  }
  .pat-tile:nth-child(2){animation-delay:.06s;} .pat-tile:nth-child(3){animation-delay:.12s;}
  .pat-tile:nth-child(4){animation-delay:.18s;} .pat-tile:nth-child(5){animation-delay:.24s;}
  .pat-tile:nth-child(6){animation-delay:.30s;} .pat-tile:nth-child(7){animation-delay:.36s;}
  @keyframes patTileIn{ from{opacity:0; transform:scale(.4);} to{opacity:1; transform:scale(1);} }
  .pat-tile.pat-multi{font-size:23px; letter-spacing:-3px; padding-right:12px;}
  .pat-tile.pat-missing{
    background:var(--white); border:3px dashed var(--cat-color,var(--math));
    color:var(--cat-color,var(--math)); font-weight:900; font-size:34px;
    animation:patTileIn .38s cubic-bezier(.34,1.4,.64,1) backwards, patPulse 1.15s ease-in-out .9s infinite;
  }
  @keyframes patPulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.12);} }
  .choice-btn.choice-emoji{font-size:clamp(30px,8vw,42px); line-height:1.15; padding:14px 16px;}
  .choice-btn.choice-emoji-multi{font-size:clamp(20px,5.5vw,27px); letter-spacing:-2px;}
  @media (max-width:480px){
    .pat-tile{min-width:52px; height:52px; font-size:30px; border-radius:14px; padding:0 7px;}
    .pat-tile.pat-multi{font-size:18px; letter-spacing:-2px;}
    .pat-tile.pat-missing{font-size:27px;}
    .pattern-row{gap:8px;}
  }

  .choice-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-top:22px;
  }
  @media (max-width:420px){ .choice-grid{grid-template-columns:1fr;} }
  .choice-btn{
    min-height:88px; border-radius:var(--radius-lg); cursor:pointer;
    border:3px solid var(--cat-light,var(--math-l));
    background:var(--white); color:var(--ink);
    font-size:clamp(20px,5.4vw,25px); font-weight:800; padding:18px 20px;
    box-shadow:0 4px 0 var(--cat-light,var(--math-l));
    transition:transform .12s ease, background .15s ease, border-color .15s ease;
    display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.35;
  }
  .choice-btn:active:not(:disabled){transform:translateY(3px);}
  .choice-btn:disabled{}
  .choice-btn.correct{
    background:var(--correct-l); border-color:var(--correct); color:#1F7A46;
    animation:popCorrect .38s ease;
  }
  .choice-btn.wrong{
    background:var(--wrong-l); border-color:var(--wrong); color:#B23636;
    animation:shakeX .45s ease;
  }
  .choice-btn.dim{opacity:.45;}
  @keyframes popCorrect{ 0%{transform:scale(1);} 45%{transform:scale(1.06);} 100%{transform:scale(1);} }
  @keyframes shakeX{
    0%,100%{transform:translateX(0);}
    20%{transform:translateX(-9px);} 40%{transform:translateX(8px);}
    60%{transform:translateX(-6px);} 80%{transform:translateX(5px);}
  }

  .feedback{
    margin-top:18px; border-radius:var(--radius-lg); padding:14px 18px;
    display:flex; align-items:flex-start; gap:10px; text-align:left;
    font-size:19px; font-weight:600; line-height:1.55;
    opacity:0; transform:translateY(6px); transition:opacity .25s ease, transform .25s ease;
  }
  .feedback.show{opacity:1; transform:translateY(0);}
  .feedback.ok{background:var(--correct-l); color:#1F7A46;}
  .feedback.ng{background:var(--wrong-l); color:#B23636;}
  .feedback .fb-face{font-size:26px; flex-shrink:0;}

  .next-btn-wrap{margin-top:18px; text-align:center;}
  .next-btn{
    border:none; cursor:pointer; border-radius:999px; padding:14px 32px;
    font-size:16px; font-weight:800; color:#fff;
    background:var(--cat-color,var(--math));
    background:linear-gradient(135deg, var(--cat-color,var(--math)), color-mix(in srgb, var(--cat-color,var(--math)) 75%, black 10%));
    box-shadow:0 6px 0 var(--cat-color,var(--math));
    box-shadow:0 6px 0 color-mix(in srgb, var(--cat-color,var(--math)) 60%, black 15%);
    opacity:0; transform:translateY(8px) scale(.9); pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;
  }
  .next-btn.show{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
  .next-btn:active{transform:translateY(4px) scale(1);}

  /* mascot */
  .mascot{
    font-size:70px; background:none; border:none; cursor:pointer; padding:0;
    animation:idleBounceSmall 1.4s ease-in-out infinite alternate; filter:drop-shadow(0 8px 8px rgba(0,0,0,.15));
    user-select:none; line-height:1; align-self:flex-end;
  }
  .mascot.happy{animation:jump .7s ease;}
  .mascot.oops{animation:droop .6s ease;}
  @keyframes idleBounce{
    0%  {transform:translateX(-7px) translateY(0)    rotate(-10deg); animation-timing-function:ease-in;}
    50% {transform:translateX(0)    translateY(8px)  rotate(0deg);   animation-timing-function:ease-out;}
    100%{transform:translateX(7px)  translateY(0)    rotate(10deg);}
  }
  @keyframes idleBounceBar{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%    {transform:translateY(-8px) rotate(-4deg);}
  }
  @keyframes idleBounceSmall{
    0%  {transform:translateX(-3px) translateY(0)   rotate(-4deg); animation-timing-function:ease-in;}
    50% {transform:translateX(0)    translateY(4px) rotate(0deg);  animation-timing-function:ease-out;}
    100%{transform:translateX(3px)  translateY(0)   rotate(4deg);}
  }
  @keyframes jump{
    0%,100%{transform:translateY(0) rotate(0);}
    30%{transform:translateY(-30px) rotate(10deg) scale(1.1);}
    55%{transform:translateY(0) rotate(-6deg);}
    75%{transform:translateY(-10px) rotate(4deg);}
  }
  @keyframes droop{
    0%{transform:rotate(0) translateY(0);}
    40%{transform:rotate(-14deg) translateY(6px);}
    100%{transform:rotate(0) translateY(0);}
  }

  /* ---------- result view ---------- */
  .result-card{
    background:var(--white); border-radius:var(--radius-xl); padding:30px 22px;
    box-shadow:var(--shadow-card); text-align:center;
    animation:qIn .45s cubic-bezier(.34,1.2,.64,1);
  }
  .result-emoji{font-size:56px; animation:idleBounce 1s ease-in-out infinite alternate;}
  .result-card h2{font-size:clamp(28px,7vw,36px); font-weight:800; margin-top:8px;}
  .stars-row{display:flex; justify-content:center; gap:8px; margin:16px 0;}
  .stars-row span{font-size:44px; opacity:.25; transform:scale(.5); display:inline-block;
    transition:opacity .3s ease, transform .3s ease;}
  .stars-row span.lit{opacity:1; transform:scale(1); animation:starPop .5s cubic-bezier(.34,1.56,.64,1);}
  .score-line{font-size:23px; font-weight:800; color:var(--ink); margin-top:2px;}
  .score-sub{font-size:18px; color:var(--ink-soft); font-weight:600; margin-top:4px;}

  .sticker-earned{
    margin:18px auto 4px; width:84px; height:84px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-size:40px;
    background:radial-gradient(circle at 35% 30%, #FFF3B0, #FFC93C 70%);
    box-shadow:0 0 0 5px #FFF3D2, 0 8px 16px rgba(255,180,20,.45);
    animation:starPop .6s cubic-bezier(.34,1.56,.64,1);
  }
  .sticker-earned-img{width:56px; height:56px; object-fit:contain; display:block;}
  .sticker-caption{font-size:14.5px; font-weight:700; color:var(--ink-soft); margin-top:8px;}

  .review-wrap{margin-top:22px; text-align:left;}
  .review-title{font-size:15px; font-weight:800; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;}
  .review-item{
    background:var(--cream-2); border-radius:var(--radius-md); padding:10px 14px; margin-bottom:8px;
    font-size:15.5px; line-height:1.5;
  }
  .review-item .rq{font-weight:700; color:var(--ink);}
  .review-item .ra{color:#1F7A46; font-weight:700; margin-top:3px;}
  .review-item .re{color:var(--ink-soft); margin-top:2px;}
  .review-empty{font-size:15.5px; color:var(--ink-soft); font-weight:600; text-align:center; padding:6px 0;}

  .result-actions{display:flex; gap:10px; margin-top:24px; flex-wrap:wrap; justify-content:center;}
  .btn-pill{
    border:none; cursor:pointer; border-radius:999px; padding:15px 26px; font-weight:800; font-size:16.5px;
    box-shadow:var(--shadow-btn); transition:transform .15s ease;
  }
  .btn-pill:active{transform:translateY(3px); box-shadow:none;}
  .btn-retry{background:var(--white); color:var(--ink); border:2px solid #EFE6D6;}
  .btn-home{background:linear-gradient(135deg,#FFC53D,#FF9F3D); color:#5A3A00;}

  footer{text-align:center; padding:20px 0 10px; font-size:12px; color:var(--ink-soft); font-weight:600; position:relative; z-index:1; transition:color 2s ease;}
  footer .footer-privacy{display:block; margin-top:6px; font-size:11px; font-weight:600; opacity:.75;}
  footer .footer-credit{
    display:flex; align-items:center; justify-content:center; gap:6px;
    margin-top:16px; line-height:1;
  }
  .visitor-badge{
    height:16px; border-radius:4px; vertical-align:middle;
    opacity:.85; filter:saturate(.85); transition:opacity .15s;
  }
  .visitor-badge:hover{opacity:1;}
  .bmm-btn{
    display:inline-flex; align-items:center; gap:4px; line-height:1;
    padding:4px 12px; border-radius:999px; border:none;
    background:linear-gradient(135deg,#FFE07A,#FFB020); color:#5A3A00;
    font-family:inherit; font-weight:800; font-size:11px; cursor:pointer;
    box-shadow:0 3px 0 #C47E00; transition:transform .15s, box-shadow .15s;
  }
  .bmm-btn:active{transform:translateY(2px); box-shadow:0 1px 0 #C47E00;}
  .app-version{font-size:11px; opacity:.5; margin-left:8px; letter-spacing:.03em;}

  #confetti-canvas{position:fixed; inset:0; z-index:50; pointer-events:none;}

  /* ===== CLICK STAR SPARK ===== */
  .click-spark{position:fixed; pointer-events:none; z-index:9999; width:0; height:0;}
  .click-spark-ray{
    position:absolute; top:-2px; left:0;
    width:14px; height:4px; border-radius:3px;
    transform-origin:0 50%;
    animation:sparkRay .3s ease-out forwards;
  }
  @keyframes sparkRay{
    0%  {opacity:1; transform:rotate(var(--a)) translateX(2px)  scaleX(.15);}
    45% {opacity:1; transform:rotate(var(--a)) translateX(5px)  scaleX(1);}
    100%{opacity:0; transform:rotate(var(--a)) translateX(18px) scaleX(.5);}
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
  }

  :focus-visible{outline:3px solid #33B7EE; outline-offset:2px;}

  /* ---------- AR sentence-builder game (fullscreen camera background) ---------- */
  body.ar-open{overflow:hidden;}
  #ar-view{position:fixed; inset:0; z-index:70; display:block; isolation:isolate; background:#1a1a2e;}

  .ar-bg-layer{position:fixed; inset:0; z-index:0; background:linear-gradient(160deg,#1a1a2e,#232f6e); overflow:hidden;}
  #ar-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); opacity:.4; z-index:1;}
  #ar-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:2;}
  .ar-camera-msg{
    position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; gap:8px;
    align-items:center; justify-content:center; text-align:center; padding:20px;
    color:#fff; font-weight:700; font-size:14.5px; background:rgba(10,14,40,.55);
  }

  /* on mobile phones the AR camera is skipped entirely (touch-drag only) — let the normal day/night sky theme show through instead of the fixed dark AR gradient. The notice is a one-time toast (see startARGame), not a persistent card, so it can't overlap the hint chip. The persistent page chrome (header/footer) sits behind #ar-view in stacking order and would otherwise bleed through the now-transparent background, so hide it while playing on mobile. */
  body.ar-mobile-nocam #ar-view{background:transparent;}
  body.ar-mobile-nocam .ar-bg-layer{background:transparent;}
  body.ar-mobile-nocam .app-header,
  body.ar-mobile-nocam footer{display:none;}

  .ar-overlay-ui{
    position:relative; z-index:6; min-height:100vh; min-height:100dvh;
    display:flex; flex-direction:column; padding:14px 14px calc(34px + env(safe-area-inset-bottom));
    pointer-events:none;
  }
  .ar-overlay-ui .quiz-top{pointer-events:auto;}
  body.ar-open .owl-widget{z-index:72;}
  body.ar-open .install-link-btn{display:none;}
  .ar-label-chip{
    background:rgba(255,255,255,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    display:inline-block; padding:4px 12px; border-radius:999px;
  }

  .ar-cards-layer{position:fixed; inset:0; z-index:7; pointer-events:none;}
  .ar-card{
    position:absolute; pointer-events:auto;
    cursor:grab; background:rgba(255,255,255,.38); border:2px solid rgba(255,255,255,.65); border-radius:20px;
    backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    padding:16px 26px; display:flex; flex-direction:column; align-items:center; gap:6px;
    min-width:104px;
    font-weight:800; font-size:27px; color:#fff; text-shadow:0 1px 5px rgba(0,0,0,.4);
    box-shadow:0 8px 18px rgba(0,0,0,.25);
    touch-action:none; user-select:none; transition:transform .15s ease, box-shadow .15s ease;
    animation:cardIn .4s cubic-bezier(.34,1.56,.64,1) backwards;
  }
  .ar-card .ar-card-emoji{font-size:46px; line-height:1;}
  .ar-card .ar-card-num{font-size:40px;}
  .ar-card.dragging{
    position:fixed !important; z-index:999; transform:translate(-50%,-50%) scale(1.15);
    background:rgba(255,255,255,.55);
    box-shadow:0 10px 24px rgba(0,0,0,.3); cursor:grabbing; pointer-events:none;
  }
  .ar-card.placed{
    position:static !important; cursor:default; box-shadow:0 2px 8px rgba(0,0,0,.12); border-color:transparent;
    background:rgba(255,255,255,.92); color:var(--ink); text-shadow:none; animation:none;
  }

  .ar-hint-chip{
    margin-top:10px; margin-bottom:12px; align-self:center; max-width:92%;
    background:rgba(255,255,255,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    padding:9px 18px; border-radius:999px; font-size:15px; font-weight:700; color:var(--ink);
    text-align:center; box-shadow:var(--shadow-btn);
  }
  /* in ar-match mode the hint floats at the bottom so it never overlaps the match items */
  body.ar-open .ar-match-wrap ~ * .ar-hint-chip,
  #ar-match-wrap:not([hidden]) ~ .ar-overlay-ui .ar-hint-chip{
    position:fixed; bottom:calc(16px + env(safe-area-inset-bottom));
    left:50%; transform:translateX(-50%);
    margin:0; z-index:20;
  }
  .ar-math-problem{
    align-self:center; margin-bottom:14px;
    background:rgba(255,255,255,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    padding:12px 26px; border-radius:20px;
    font-size:clamp(28px,7.5vw,36px); font-weight:800; color:var(--ink);
    text-align:center; box-shadow:var(--shadow-btn);
  }
  .ar-slot-row{
    align-self:center; display:flex; flex-wrap:wrap; justify-content:center; gap:14px;
    padding:16px; margin-bottom:6px; border-radius:var(--radius-xl); min-height:74px;
    background:rgba(255,255,255,.22); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.45);
    box-shadow:0 8px 26px rgba(0,0,0,.22);
  }
  .ar-slot-row[hidden]{display:none;}

  /* ---------- AR count mode (tablet/desktop only — ล็อกบนมือถือ) ---------- */
  /* keep this stack (hint chip + question + zone) as compact as possible — the more vertical room left over,
     the more room the scattered objects below get (see scatterCountItems() in js/app.js) */
  .ar-count-question{
    align-self:center; margin-bottom:8px;
    background:rgba(255,255,255,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    padding:10px 26px; border-radius:20px;
    font-size:clamp(20px,3vw,26px); font-weight:800; color:var(--ink);
    text-align:center; box-shadow:var(--shadow-btn);
  }
  .ar-count-question[hidden]{display:none;}

  .ar-count-zone{
    position:relative; align-self:center; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
    gap:10px; padding:12px; margin-bottom:4px; border-radius:var(--radius-xl);
    min-height:74px; min-width:280px; max-width:80vw;
    border:3px dashed rgba(255,255,255,.7); background:rgba(255,255,255,.22);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    box-shadow:0 8px 26px rgba(0,0,0,.22);
    transition:border-color .2s ease, background .2s ease;
  }
  .ar-count-zone[hidden]{display:none;}
  .ar-count-zone.wrong-flash{animation:shakeX .4s ease; border-color:var(--wrong); background:rgba(255,97,97,.28);}
  /* label sits as its own full-width row inside the zone (flex-wrap), so scattered/placed cards wrap below it */
  .ar-count-zone-label{flex:0 0 100%; display:flex; flex-direction:column; align-items:center; gap:2px; pointer-events:none;}
  .ar-count-zone-ph{
    font-size:15px; font-weight:700; color:#fff; opacity:.6; text-shadow:0 1px 4px rgba(0,0,0,.35);
  }
  .ar-count-tally{
    font-size:14px; font-weight:700; color:#fff; opacity:.85; text-shadow:0 1px 4px rgba(0,0,0,.35);
  }

  /* bare/plain card variant: คง .ar-card ไว้ให้ selector ของ JS เดิมทำงานต่อได้ แค่ตัดพื้นหลังออก */
  .ar-card.ar-card-plain{
    background:transparent; border:none; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
    padding:6px; min-width:0;
  }
  .ar-card.ar-card-plain .ar-card-emoji{font-size:60px;}
  .ar-card.ar-card-plain.dragging{background:transparent; box-shadow:none;}
  .ar-card.ar-card-plain.placed{
    position:static !important; background:transparent; box-shadow:none; border:none; animation:none;
  }

  /* จอเดสก์ท็อปกว้างขึ้น (>1024px) ให้ตัวหนังสือ/สัญลักษณ์ใหญ่ขึ้นและตะกร้าคำตอบกว้างขึ้น เพราะมีพื้นที่มากกว่า */
  @media (min-width:1025px){
    .ar-count-question{font-size:clamp(22px,2vw,28px); padding:12px 32px;}
    .ar-count-zone{min-height:84px; min-width:340px; gap:14px;}
    .ar-card.ar-card-plain .ar-card-emoji{font-size:72px;}
  }

  /* ---------- AR line-matching mode ---------- */
  .ar-match-wrap{position:fixed; inset:0; z-index:5;}
  .ar-match-svg{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:1;}
  .ar-match-row{
    position:relative; z-index:2; height:100%; box-sizing:border-box;
    display:flex; align-items:center; justify-content:center; gap:clamp(24px,100vw,250px);
    padding:112px 4vw 132px; pointer-events:none;
  }
  /* on screens narrower than ~400px, 100vw in the clamp() above would resolve to nearly the full viewport width and push the left column off-screen — cap the gap so the game stays playable */
  @media (max-width:480px){ .ar-match-row{ gap:clamp(24px,8vw,220px); } }
  /* on large screens, spread the question/answer columns further apart */
  @media (min-width:1001px){ .ar-match-row{ gap:400px; } }
  .ar-match-col{display:flex; flex-direction:column; gap:60px; pointer-events:none;}
  .ar-match-left{align-items:flex-end;}
  .ar-match-right{align-items:flex-start;}
  .ar-match-item{display:flex; align-items:center; gap:18px; pointer-events:none;}
  .ar-match-emoji{
    font-size:46px; line-height:1; background:rgba(255,255,255,.35); border:2px solid rgba(255,255,255,.6);
    border-radius:18px; padding:10px 18px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:0 4px 12px rgba(0,0,0,.2);
  }
  .ar-match-word{
    font-size:clamp(19px,4.4vw,24px); font-weight:800; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.3);
    background:rgba(255,255,255,.35); border:2px solid rgba(255,255,255,.6); border-radius:18px;
    padding:12px 20px; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:0 4px 12px rgba(0,0,0,.2); white-space:nowrap;
  }
  .ar-match-item.matched .ar-match-emoji, .ar-match-item.matched .ar-match-word{
    background:rgba(255,255,255,.92); color:var(--ink); text-shadow:none; border-color:transparent;
  }
  .ar-dot{
    width:32px; height:32px; border-radius:50%; flex-shrink:0;
    background:rgba(255,255,255,.85); border:3px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.3);
    pointer-events:auto; cursor:pointer; touch-action:none;
    transition:transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .ar-dot.active-drag{transform:scale(1.3); border-color:#FFC53D; background:rgba(255,197,61,.5);}
  .ar-dot.matched{background:var(--correct); border-color:var(--correct);}
  .ar-dot.wrong-flash{animation:shakeX .4s ease; border-color:var(--wrong); background:rgba(255,97,97,.6);}
  .ar-match-line{stroke:var(--correct); stroke-width:4; stroke-linecap:round;}
  .ar-slot{
    position:relative; min-width:104px; min-height:104px; padding:6px;
    border-radius:18px; border:3px dashed rgba(255,255,255,.7); background:rgba(255,255,255,.14);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:center;
    transition:border-color .2s ease, background .2s ease, transform .15s ease;
  }
  .ar-slot.filled{border-style:solid; border-color:var(--correct); background:rgba(255,255,255,.3); padding:4px;}
  .ar-slot.wrong-flash{animation:shakeX .4s ease; border-color:var(--wrong); background:rgba(255,97,97,.28);}
  .ar-slot-ph{font-size:22px; font-weight:800; color:#fff; opacity:.65; text-shadow:0 1px 4px rgba(0,0,0,.35);}

  /* mobile phones play AR games by touch only (no camera) — shrink the oversized game text/cards to fit smaller screens */
  @media (max-width:480px){
    .ar-card{font-size:20px; padding:12px 20px; min-width:84px;}
    .ar-card .ar-card-emoji{font-size:34px;}
    .ar-card .ar-card-num{font-size:30px;}
    .ar-slot{min-width:82px; min-height:82px;}
    .ar-slot-ph{font-size:18px;}
    .ar-match-emoji{font-size:34px; padding:8px 14px;}
    .ar-math-problem{padding:10px 20px;}
  }

  .ar-cursor{
    position:fixed; width:30px; height:30px; margin-left:-15px; margin-top:-15px;
    border-radius:50%; border:4px solid #33B7EE; background:rgba(51,183,238,.18);
    pointer-events:none; z-index:998; display:none;
    transition:border-color .1s ease, background .1s ease;
  }
  .ar-cursor.active{display:block;}
  .ar-cursor.hover{border-color:#FFC53D; border-style:dashed; background:rgba(255,197,61,.2);}
  .ar-cursor.miss{border-color:#FF6161; background:rgba(255,97,97,.25);}
  .ar-cursor.grabbed{border-color:#33B76C; background:rgba(51,183,108,.25);}

  /* ---------- เกมฟังประโยคเติมคำ (cloze) ---------- */
  .cloze-board{display:flex; flex-direction:column; align-items:center; gap:16px; padding:10px 16px 40px;}
  .cloze-emoji{font-size:54px; line-height:1;}
  .cloze-sentence{
    display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px 10px;
    background:var(--white); border-radius:var(--radius-xl); box-shadow:var(--shadow-card);
    padding:18px 22px; max-width:min(94vw,720px);
  }
  .cloze-word{font-size:24px; font-weight:800; color:var(--ink);}
  .cloze-blank{
    min-width:96px; min-height:46px; padding:4px 12px; border-radius:14px;
    border:3px dashed var(--cat-color); background:var(--cream);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:24px; font-weight:800; color:var(--cat-color); cursor:pointer;
    transition:transform .15s ease, background .2s ease, border-color .2s ease;
  }
  .cloze-blank.active{border-style:solid; transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.12);}
  .cloze-blank.filled{border-style:solid; background:#fff; color:var(--ink);}
  .cloze-blank.correct{border-color:var(--correct); background:rgba(90,200,140,.18); color:var(--ink);}
  .cloze-blank.wrong{border-color:var(--wrong); background:rgba(255,97,97,.18); animation:shakeX .4s ease;}
  .cloze-cards{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:min(94vw,720px);}
  .cloze-card{
    padding:14px 22px; border-radius:18px; border:3px solid var(--cat-color); background:var(--white);
    font-size:22px; font-weight:800; color:var(--ink); cursor:pointer; box-shadow:var(--shadow-btn);
    transition:transform .15s ease, opacity .2s ease;
  }
  .cloze-card:hover{transform:translateY(-3px);}
  .cloze-card.used{opacity:.35; pointer-events:none; transform:scale(.94);}
  @media (max-width:480px){
    .cloze-word, .cloze-blank, .cloze-card{font-size:19px;}
    .cloze-blank{min-width:76px; min-height:40px;}
    .cloze-card{padding:11px 16px;}
    .cloze-emoji{font-size:44px;}
  }

  /* ---------- เกม ป.4: แผนภูมิแท่ง / พื้นที่ตารางหน่วย / มุม ---------- */
  .chart-board, .area-board, .angle-board{
    display:flex; flex-direction:column; align-items:center; gap:14px; padding:10px 16px 40px;
  }
  .chart-title, .area-q, .angle-q, .chart-q{
    background:rgba(255,255,255,.9); padding:10px 20px; border-radius:18px;
    font-size:18px; font-weight:800; color:var(--ink); text-align:center; box-shadow:var(--shadow-btn); max-width:640px;
  }
  .chart-plot{
    display:flex; align-items:flex-end; justify-content:center; gap:14px;
    background:var(--white); border-radius:var(--radius-xl); box-shadow:var(--shadow-card);
    padding:16px 18px 10px; min-height:220px; width:min(94vw,560px); box-sizing:border-box;
    background-image:repeating-linear-gradient(to top, rgba(0,0,0,.06) 0 1px, transparent 1px 20px);
  }
  .chart-bar-wrap{display:flex; flex-direction:column; align-items:center; gap:6px; flex:1 1 0; min-width:0;}
  .chart-bar{
    width:100%; max-width:52px; border-radius:10px 10px 4px 4px; background:var(--cat-color);
    box-shadow:inset 0 -6px 0 rgba(0,0,0,.12); transition:height .5s cubic-bezier(.34,1.4,.5,1);
  }
  .chart-bar-val{font-size:15px; font-weight:800; color:var(--ink);}
  .chart-bar-label{font-size:22px; line-height:1;}
  .chart-bar-name{font-size:12px; color:var(--ink-soft); text-align:center;}
  .chart-choices{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}
  .chart-choice{
    min-width:96px; padding:14px 22px; border-radius:18px; border:3px solid var(--cat-color);
    background:var(--white); font-size:20px; font-weight:800; color:var(--ink); cursor:pointer;
    box-shadow:var(--shadow-btn); transition:transform .15s ease, background .2s ease;
  }
  .chart-choice:hover{transform:translateY(-3px);}
  .chart-choice.correct{background:var(--correct); color:#fff; border-color:var(--correct);}
  .chart-choice.wrong{background:var(--wrong); color:#fff; border-color:var(--wrong); animation:shakeX .4s ease;}

  .area-grid-wrap{background:var(--white); border-radius:var(--radius-xl); box-shadow:var(--shadow-card); padding:12px;}
  .area-grid{display:grid; gap:3px;}
  .area-cell{
    width:44px; height:44px; border-radius:8px; border:2px solid #E3D9C8; background:#FFFDF7;
    cursor:pointer; padding:0; transition:background .15s ease, transform .12s ease;
  }
  .area-cell:hover{transform:scale(1.06);}
  .area-cell.on{background:var(--cat-color); border-color:var(--cat-color);}
  .area-cell.good{background:var(--correct); border-color:var(--correct);}
  .area-cell.bad{background:var(--wrong); border-color:var(--wrong); animation:shakeX .4s ease;}
  .area-tally{font-size:17px; font-weight:800; color:var(--ink); background:rgba(255,255,255,.85); padding:6px 16px; border-radius:999px;}
  .area-controls{display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:center;}

  .angle-stage{background:var(--white); border-radius:var(--radius-xl); box-shadow:var(--shadow-card); padding:10px;}
  .angle-svg{width:min(86vw,340px); height:auto; touch-action:none;}
  .angle-arm{stroke-linecap:round;}
  .angle-arm-fixed{stroke:#B9AC98; stroke-width:7;}
  .angle-arm-move{stroke:var(--cat-color); stroke-width:8;}
  .angle-vertex{fill:#7A6A55;}
  .angle-handle{fill:#fff; stroke:var(--cat-color); stroke-width:4; cursor:grab;}
  .angle-handle:active{cursor:grabbing;}
  .angle-arc{fill:rgba(255,197,61,.35); stroke:#E8A020; stroke-width:2;}
  .angle-guide{stroke:#E6DCCB; stroke-width:2; stroke-dasharray:4 5;}
  .angle-readout{font-size:26px; font-weight:900; color:var(--cat-color); background:rgba(255,255,255,.9); padding:6px 22px; border-radius:999px; box-shadow:var(--shadow-btn);}
  @media (max-width:480px){
    .area-cell{width:34px; height:34px;}
    .chart-plot{min-height:180px;}
    .chart-title, .area-q, .angle-q, .chart-q{font-size:16px;}
  }

  /* ---------- โหมด "เล่นด้วยมือ" (hand play) ของเกมแบบแตะ ป.3 ----------
     ต่างจาก ar-view: ไม่โชว์ภาพจากกล้อง (จะบังกระดานเกม) วาดแค่มือการ์ตูนบน canvas ทับหน้าจอ
     ทั้งเลเยอร์ pointer-events:none เสมอ ให้แตะหน้าจอเล่นตามปกติได้พร้อมกัน */
  .hp-layer{position:fixed; inset:0; pointer-events:none; z-index:900;}
  .hp-layer[hidden]{display:none;}
  #hp-video{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
  #hp-canvas{position:absolute; inset:0; width:100%; height:100%;}
  .hp-hover{outline:4px dashed #FFC53D; outline-offset:3px;}

  /* ---------- Memory matching game (จับคู่โดมิโน) ---------- */
  /* อยู่ในกล่องเดียวกับ .progress-track (.quiz-top-info) แทนที่จะลอยแยกกลางจอ ให้ความยาวเท่ากับแถบ progress เป๊ะเสมอ */
  .memory-hint-chip{
    margin-top:8px;
    background:rgba(255,255,255,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    padding:9px 18px; border-radius:999px; font-size:15px; font-weight:700; color:var(--ink);
    text-align:center; box-shadow:var(--shadow-btn);
  }
  /* หลุดออกจากกรอบ max-width:820px ของ <main> (full-bleed) เพื่อให้ช่องวางการ์ดกว้างพอใส่การ์ดได้ 4 ใบต่อแถว
     โดยไม่ต้องลดขนาดการ์ดลง — ส่วนอื่นของ memory-view (แถบหัว/hint) ยังคงอยู่ในกรอบ 820px ตามปกติ */
  .memory-board{
    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
    display:flex; gap:20px; justify-content:center; align-items:flex-start;
    flex-wrap:nowrap; padding:8px 24px 40px; box-sizing:border-box;
  }
  .memory-col{
    flex:1 1 0; min-width:0; max-width:600px;
    display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-content:flex-start;
    background:rgba(255,255,255,.5); border-radius:var(--radius-xl);
    padding:14px 10px; box-shadow:var(--shadow-card);
  }

  .memory-card{ width:104px; height:136px; perspective:800px; background:transparent; border:none; padding:0; cursor:pointer; }
  .memory-card-inner{
    position:relative; width:100%; height:100%;
    transform-style:preserve-3d;
    transition:transform .45s cubic-bezier(.4,.2,.2,1);
  }
  .memory-card.flipped .memory-card-inner, .memory-card.matched .memory-card-inner{ transform:rotateY(180deg); }
  .memory-card.matched{ cursor:default; }

  .memory-card-face{
    position:absolute; inset:0; border-radius:var(--radius-md);
    display:flex; align-items:center; justify-content:center;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    box-shadow:var(--shadow-btn); font-weight:800; color:var(--ink);
  }
  .card-face-value{ transform:rotateY(180deg); background:var(--white); font-size:42px; }

  /* ลายหลังการ์ด: ลายทแยงบางๆ ทับสีของหมวด (number-card ใช้สีหมวดเอง ผ่าน --cat-color, dot-card ใช้สีฟ้าประจำแอป) + ไอคอนตรงกลางในวงกลมขาวโปร่ง ให้เข้ากับโทนอบอุ่นของแอป */
  .memory-card-number .card-face-hidden{
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,.20) 0 8px, transparent 8px 18px),
      linear-gradient(145deg, var(--cat-color, #E0764C), #F3A97C);
    border:3px solid rgba(255,255,255,.55);
  }
  .memory-card-dot .card-face-hidden{
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,.20) 0 8px, transparent 8px 18px),
      linear-gradient(145deg, var(--thai), #7FD8FA);
    border:3px solid rgba(255,255,255,.55);
  }
  .memory-card-icon{
    display:flex; align-items:center; justify-content:center;
    width:56px; height:56px;
    background:rgba(255,255,255,.3); border-radius:50%;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
  }
  .memory-card-icon-svg{ width:60%; height:60%; fill:#fff; }

  /* การ์ดจุดแบบโดมิโน: แบ่งครึ่งบน-ล่าง แต่ละครึ่งวางจุดได้สูงสุด 6 จุดตามแพทเทิร์นโดมิโนจริง (ค่าสูงสุดรวม 12) */
  .domino-card{ width:82%; height:88%; display:flex; flex-direction:column; gap:5px; }
  .domino-half{
    flex:1; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr);
    gap:3px; padding:3px;
  }
  .domino-divider{ height:2px; margin:0 8%; border-radius:2px; background:rgba(74,63,53,.25); }
  .domino-pip{
    width:100%; height:100%; max-width:17px; max-height:17px;
    border-radius:50%; background:var(--ink); justify-self:center; align-self:center;
  }
  .pip-tl{ grid-column:1; grid-row:1; }
  .pip-tr{ grid-column:3; grid-row:1; }
  .pip-ml{ grid-column:1; grid-row:2; }
  .pip-c{  grid-column:2; grid-row:2; }
  .pip-mr{ grid-column:3; grid-row:2; }
  .pip-bl{ grid-column:1; grid-row:3; }
  .pip-br{ grid-column:3; grid-row:3; }
  .pip-tc{ grid-column:2; grid-row:1; }   /* 8 จุด/ครึ่ง (โดมิโน ป.2 ถึง 16) */
  .pip-bc{ grid-column:2; grid-row:3; }

  .memory-card.matched .card-face-value{ background:var(--correct-l); box-shadow:0 0 0 3px var(--correct) inset; }
  .memory-card.mismatch .card-face-value{ background:var(--wrong-l); box-shadow:0 0 0 3px var(--wrong) inset; }

  /* ---------- เกมจับคู่สัตว์: ลายหลังการ์ดเขียว (สัตว์) / ม่วง (คำศัพท์) แตกต่างจากโดมิโน ---------- */
  .card-animals-emoji .card-face-hidden{
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 8px, transparent 8px 18px),
      linear-gradient(145deg, #2E8B57, #6ECBA0);
    border:3px solid rgba(255,255,255,.55);
  }
  .card-animals-word .card-face-hidden{
    background:
      repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 8px, transparent 8px 18px),
      linear-gradient(145deg, #7040B8, #B27AE0);
    border:3px solid rgba(255,255,255,.55);
  }
  /* หน้าการ์ดคำศัพท์ภาษาอังกฤษ */
  .card-face-word{
    font-size:17px; font-weight:900; letter-spacing:1.5px;
    color:#4A2C7A; font-family:'Courier New',Courier,monospace;
    word-break:break-all; padding:4px; line-height:1.2;
  }

  /* จอแคบ (มือถือ): จอเล็กเกินกว่าจะให้ 2 คอลัมน์อยู่ซ้าย-ขวาแล้วยังเห็นการ์ดชัดเจน — สลับเป็นวางคอลัมน์บน-ล่างแทน
     ได้พื้นที่กว้างเต็มจอต่อคอลัมน์ จึงขยายขนาดการ์ดกลับขึ้นมาได้ (ไม่ต้องบีบเล็กเท่าตอนบังคับซ้าย-ขวา) */
  @media (max-width:480px){
    .memory-board{ flex-direction:column; align-items:center; gap:14px; padding:6px 6px 30px; }
    .memory-col{ width:100%; max-width:420px; gap:10px; padding:12px 8px; }
    .memory-card{ width:78px; height:102px; }
    .card-face-value{ font-size:30px; }
    .memory-card-icon{ width:44px; height:44px; }
    .domino-pip{ max-width:13px; max-height:13px; }
    .card-face-word{ font-size:12px; letter-spacing:.5px; }
  }

  /* จอกลาง (tablet/481px-1024px): บังคับ 4 การ์ดต่อแถว ลดขนาดการ์ดตามความกว้างจอด้วย CSS grid + aspect-ratio */
  @media (min-width:481px) and (max-width:1024px){
    .memory-col{
      display:grid; grid-template-columns:repeat(4,1fr);
      gap:8px; padding:10px 8px;
    }
    .memory-card{ width:100%; height:auto; aspect-ratio:3/4; }
    .card-face-value{ font-size:clamp(14px,4vw,28px); }
    .domino-pip{ max-width:clamp(4px,1.8vw,17px); max-height:clamp(4px,1.8vw,17px); }
    .memory-card-icon-svg{ width:50%; height:50%; }
    .card-face-word{ font-size:clamp(11px,2.8vw,17px); }
  }

  /* จอกว้าง (เดสก์ท็อป): ขยายการ์ด/ช่องวางการ์ดขึ้นอีก แต่ยังคงเป็นซ้าย-ขวา (สืบทอด flex-wrap:nowrap จาก .memory-board ฐาน) */
  @media (min-width:1025px){
    .memory-card{ width:128px; height:166px; }
    .memory-col{ flex:1 1 420px; max-width:680px; gap:18px; padding:22px; }
    .card-face-value{ font-size:48px; }
    .memory-card-icon{ width:62px; height:62px; }
    .domino-pip{ max-width:21px; max-height:21px; }
    .card-face-word{ font-size:19px; }
  }

  /* ---------- Shadow guessing game (เกมทายเงา) ---------- */
  .shadow-board{
    display:flex; flex-direction:column; align-items:center; gap:24px;
    padding:14px 6px 40px; width:100%; max-width:100%; margin:0 auto;
  }
  /* ===================== EF GAME (นกฮูกสั่ง) ===================== */
  .ef-rule{
    font-size:clamp(14px,3.6vw,17px); font-weight:800; color:var(--ink);
    background:#FFF3DC; border:2.5px solid var(--cat-color,#17A65B); border-radius:14px;
    padding:6px 12px; margin-top:4px; text-align:center; line-height:1.35;
  }
  .ef-rule b{ color:var(--cat-color,#17A65B); }
  body.night-mode .ef-rule{ background:#2A3352; color:#EAF0FF; }
  @keyframes efRuleFlash{ 0%{transform:scale(1);} 30%{transform:scale(1.08); background:#FFE08A;} 100%{transform:scale(1);} }
  .ef-rule.ef-rule-flash{ animation:efRuleFlash .6s ease; }
  .ef-board{
    display:flex; flex-direction:column; align-items:center; gap:22px;
    padding:18px 12px 40px; width:100%; max-width:520px; margin:0 auto;
  }
  .ef-timer-track{
    width:100%; max-width:420px; height:14px; border-radius:10px;
    background:#EADFC6; overflow:hidden; box-shadow:inset 0 2px 4px rgba(0,0,0,.12);
  }
  body.night-mode .ef-timer-track{ background:#2A3352; }
  .ef-timer-fill{
    height:100%; width:100%; border-radius:10px;
    background:linear-gradient(90deg,#5fd6a0,var(--cat-color,#17A65B));
  }
  .ef-item-card{
    background:linear-gradient(180deg,#FFFDF5,#FFF3DC);
    border:4px solid var(--cat-color,#17A65B); border-radius:30px;
    padding:26px 54px; box-shadow:0 8px 0 rgba(0,0,0,.08);
    transition:transform .15s, border-color .2s, background .2s;
  }
  .ef-item{ font-size:clamp(72px,20vw,120px); line-height:1; }
  .ef-item-card:has(.ef-item.ef-correct){ border-color:#3B9E5B; background:linear-gradient(180deg,#EAF9EE,#D3F1DC); }
  .ef-item-card:has(.ef-item.ef-wrong){ border-color:#E45B5B; background:linear-gradient(180deg,#FDECEC,#FAD7D7); }
  .ef-item.ef-correct{ animation:efPop .4s ease; }
  .ef-item.ef-wrong{ animation:efShake .4s ease; }
  @keyframes efPop{ 0%{transform:scale(1);} 50%{transform:scale(1.18);} 100%{transform:scale(1);} }
  @keyframes efShake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-8px);} 75%{transform:translateX(8px);} }
  .ef-feedback{ min-height:26px; font-size:clamp(15px,4vw,18px); font-weight:800; color:var(--ink); text-align:center; }
  body.night-mode .ef-feedback{ color:#EAF0FF; }
  .ef-buttons{ display:flex; gap:16px; width:100%; max-width:420px; }
  .ef-btn{
    flex:1; padding:18px 10px; border-radius:20px; border:none; cursor:pointer;
    font-family:inherit; font-size:clamp(17px,4.6vw,21px); font-weight:800; color:#fff;
    transition:transform .12s, box-shadow .12s, filter .12s;
  }
  .ef-btn:disabled{ opacity:.5; cursor:default; }
  .ef-btn.ef-tap{ background:#3B9E5B; box-shadow:0 5px 0 #2b7a44; }
  .ef-btn.ef-skip{ background:#F0794A; box-shadow:0 5px 0 #c25a30; }
  .ef-btn:not(:disabled):active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.2); }
  @media (max-width:480px){
    .ef-item-card{ padding:20px 36px; }
    .ef-buttons{ gap:12px; }
    .ef-btn{ padding:15px 8px; }
  }
  /* ===================== SCIENCE PREDICT-CHECK AR (นักวิทย์ทายผล — ยกมือค้างซ้าย/ขวา) ===================== */
  body.sci-open{ overflow:hidden; }
  body.sci-open .app-header, body.sci-open footer,
  body.sci-open .install-link-btn, body.sci-open .free-piano-btn{ display:none; }
  body.sci-open .owl-widget{ z-index:78; }
  #science-view{ position:fixed; inset:0; z-index:74; display:block; isolation:isolate; background:linear-gradient(160deg,#123047,#1d5066); overflow:hidden; }
  .sci-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scaleX(-1); opacity:.5; z-index:1; }
  .sci-video-tint{ position:absolute; inset:0; z-index:2; background:radial-gradient(120% 90% at 50% 30%, rgba(10,30,45,.15), rgba(10,30,45,.7)); }
  .sci-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:3; pointer-events:none; }
  /* กล้องปิด/มือถือ = ให้เห็นท้องฟ้าธีมจริง */
  body.sci-nocam #science-view{ background:transparent; }
  body.sci-nocam .sci-video, body.sci-nocam .sci-video-tint{ background:transparent; opacity:0; }
  .sci-ar-ui{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; pointer-events:none; }
  .sci-ar-ui .quiz-top{ pointer-events:auto; }   /* top bar ใช้ธีมเดียวกับเกม AR (ar-label-chip + back-btn + hover) */
  /* คำถาม + ของทดลอง */
  .sci-question-bar{
    margin:6px auto 0; max-width:min(92vw,640px); display:flex; align-items:center; gap:14px;
    justify-content:center; padding:10px 20px; border-radius:22px;
    background:rgba(255,255,255,.92); box-shadow:0 8px 22px rgba(0,0,0,.28);
  }
  body.night-mode .sci-question-bar{ background:rgba(30,40,52,.92); }
  .sci-question{ font-size:clamp(17px,4.4vw,25px); font-weight:900; color:var(--ink); line-height:1.3; text-align:center; }
  body.night-mode .sci-question{ color:#EAF0FF; }
  .sci-obj{
    font-size:clamp(38px,9vw,60px); line-height:1; flex:none;
    filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));
    transition:transform .4s; animation:sciFloatIdle 2.6s ease-in-out infinite;
  }
  @keyframes sciFloatIdle{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }
  .sci-obj.sci-pop{ animation:sciObjPop .7s ease; }
  @keyframes sciObjPop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.35) rotate(-6deg);} 70%{ transform:scale(1.15) rotate(4deg);} 100%{ transform:scale(1);} }
  .sci-obj.sci-float{ animation:sciFloatUp 1s ease forwards; }
  @keyframes sciFloatUp{ from{ transform:translateY(0);} to{ transform:translateY(-16px) scale(1.12);} }
  .sci-obj.sci-sink{ animation:sciSinkDown 1s ease forwards; }
  @keyframes sciSinkDown{ from{ transform:translateY(0);} to{ transform:translateY(16px) scale(.9);} }
  /* คำใบ้ */
  .sci-hint{
    pointer-events:none; align-self:center; margin-top:10px;
    font-size:clamp(13px,3.4vw,16px); font-weight:800; color:#fff;
    background:rgba(20,45,60,.6); border:2px solid rgba(255,255,255,.5); border-radius:999px;
    padding:6px 16px; text-align:center; line-height:1.3; backdrop-filter:blur(2px);
  }
  /* พื้นที่คำตอบครึ่งจอ ซ้าย/ขวา */
  .sci-zones{ flex:1; display:flex; align-items:stretch; gap:0; margin-top:8px; min-height:0; }
  .sci-zone-divider{ width:4px; align-self:stretch; margin:22px 0; border-radius:4px; background:repeating-linear-gradient(#ffffffaa 0 10px, transparent 10px 20px); z-index:6; }
  .sci-zone{
    flex:1; position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    margin:14px; border:none; cursor:pointer; font-family:inherit; pointer-events:auto;
    border-radius:34px; background:rgba(255,255,255,.14);
    border:3px solid rgba(255,255,255,.35);
    box-shadow:inset 0 0 40px rgba(255,255,255,.08);
    transition:background .2s, border-color .2s, transform .2s, box-shadow .2s;
    overflow:hidden;
  }
  .sci-zone-left{ background:linear-gradient(160deg, rgba(95,192,226,.28), rgba(255,255,255,.12)); }
  .sci-zone-right{ background:linear-gradient(160deg, rgba(255,168,120,.28), rgba(255,255,255,.12)); }
  .sci-zone-hand{
    position:absolute; top:14px; left:0; right:0; text-align:center; z-index:3;
    font-size:clamp(14px,3.6vw,20px); font-weight:900; color:#fff;
    text-shadow:0 2px 5px rgba(0,0,0,.5); letter-spacing:.5px;
  }
  body.sci-nocam .sci-zone-hand{ display:none; }   /* โหมดแตะ ไม่ต้องบอกมือ */
  .sci-zone-emoji{ font-size:clamp(48px,13vw,92px); line-height:1; filter:drop-shadow(0 4px 6px rgba(0,0,0,.3)); z-index:2; }
  .sci-zone-lbl{ font-size:clamp(19px,5.4vw,30px); font-weight:900; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.5); z-index:2; }
  /* dwell ring */
  .sci-ring{ position:absolute; width:min(46vw,230px); height:min(46vw,230px); opacity:0; transition:opacity .2s; z-index:1; overflow:visible; }
  .sci-ring-bg{ fill:none; stroke:rgba(255,255,255,.28); stroke-width:8; }
  .sci-ring-fill{ fill:none; stroke:#ffe27a; stroke-width:9; stroke-linecap:round;
    stroke-dasharray:327; stroke-dashoffset:327; transform:rotate(-90deg); transform-origin:60px 60px;
    filter:drop-shadow(0 0 6px #ffe27a); }
  .sci-zone.dwelling{ background:rgba(255,255,255,.3); border-color:#ffe27a; transform:scale(1.03); box-shadow:0 0 34px rgba(255,226,122,.55), inset 0 0 40px rgba(255,255,255,.15); }
  .sci-zone.dwelling .sci-ring{ opacity:1; }
  .sci-zone.dwelling .sci-zone-emoji{ animation:sciZoneBob .8s ease-in-out infinite; }
  @keyframes sciZoneBob{ 0%,100%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(-6px) scale(1.06);} }
  /* เฉลย */
  .sci-zone.sci-correct{ background:rgba(84,214,130,.42); border-color:#5ee08a; box-shadow:0 0 40px rgba(94,224,138,.6); animation:sciZonePulse .6s ease; }
  .sci-zone.sci-wrong{ background:rgba(224,112,112,.4); border-color:#ffa3a3; opacity:.9; }
  @keyframes sciZonePulse{ 0%{ transform:scale(1);} 45%{ transform:scale(1.06);} 100%{ transform:scale(1);} }
  .sci-zone:disabled{ cursor:default; }
  .sci-zone-check{ position:absolute; top:12px; right:16px; font-size:clamp(28px,7vw,46px); z-index:3; animation:sciObjPop .6s ease; }
  /* feedback banner */
  .sci-feedback{
    pointer-events:none; align-self:center; min-height:0; margin:0 14px 20px;
    text-align:center; font-size:clamp(14px,3.8vw,19px); font-weight:800; line-height:1.35;
    max-width:min(92vw,640px); color:#fff; opacity:0; transform:translateY(8px);
    transition:opacity .25s, transform .25s;
  }
  .sci-feedback.show{ opacity:1; transform:translateY(0); }
  .sci-feedback.sci-fb-ok{ background:rgba(43,122,68,.86); }
  .sci-feedback.sci-fb-no{ background:rgba(194,90,48,.86); }
  .sci-feedback.sci-fb-ok, .sci-feedback.sci-fb-no{ padding:10px 20px; border-radius:18px; box-shadow:0 8px 22px rgba(0,0,0,.3); }
  @media (max-width:480px){
    .sci-zone{ margin:9px; border-radius:26px; }
    .sci-question-bar{ padding:8px 14px; gap:10px; }
  }
  @media (min-width:1025px){
    .sci-ring{ width:250px; height:250px; }
  }
  /* ===================== CODE GAME (เรียงคำสั่งหุ่นยนต์) ===================== */
  .code-hint{
    font-size:clamp(13px,3.4vw,16px); font-weight:800; color:var(--ink);
    background:#E6F7F4; border:2.5px solid var(--cat-color,#2BB3A3); border-radius:14px;
    padding:6px 12px; margin-top:4px; text-align:center; line-height:1.35;
  }
  body.night-mode .code-hint{ background:#22343A; color:#EAF0FF; }
  .code-board{
    display:flex; flex-direction:column; align-items:center; gap:14px;
    padding:14px 10px 44px; width:100%; max-width:560px; margin:0 auto;
  }
  /* isometric 2.5D board */
  .code-iso-stage{
    position:relative; width:min(92vw, 420px);
    aspect-ratio:var(--iso-aspect, 1 / 1); margin:2px auto 4px;
  }
  .code-iso-svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
  .code-goal-char{ animation:codeGoalPulse 1.6s ease-in-out infinite; transform-box:view-box; }
  @keyframes codeGoalPulse{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
  .code-char{
    position:absolute; left:50%; top:50%; width:16%;
    transform:translate(-50%,-60%);
    transition:left .38s cubic-bezier(.4,0,.3,1), top .38s cubic-bezier(.4,0,.3,1);
    pointer-events:none;
  }
  .code-char .cchar-svg{ width:100%; height:auto; display:block; overflow:visible; filter:drop-shadow(0 3px 2px rgba(0,0,0,.22)); }
  .code-char::before{  /* เงาสัมผัสพื้นใต้ตัวละคร */
    content:''; position:absolute; left:50%; top:90%; transform:translate(-50%,-50%);
    width:60%; height:11%; border-radius:50%; z-index:-1;
    background:radial-gradient(rgba(0,0,0,.28), rgba(0,0,0,0) 72%);
  }
  .code-char.code-bump{ animation:codeBump .32s ease; }
  @keyframes codeBump{ 0%,100%{transform:translate(-50%,-60%);} 45%{transform:translate(-50%,-54%) scale(.94);} }
  /* animation เดิน: ตัวเด้ง + ขาสลับซ้าย-ขวา */
  .code-char.walking .cchar-svg{ animation:rbBob .46s ease-in-out infinite; }
  .code-char.walking .rb-legL{ animation:rbStep .46s ease-in-out infinite; }
  .code-char.walking .rb-legR{ animation:rbStep .46s ease-in-out infinite; animation-delay:.23s; }
  @keyframes rbBob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-1.6px);} }
  @keyframes rbStep{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-3px);} }
  .rb-arrow{ animation:rbArrowPulse 1s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
  @keyframes rbArrowPulse{ 0%,100%{opacity:.75;} 50%{opacity:1;} }
  .code-program-label{ font-size:13px; font-weight:800; color:var(--ink-soft); align-self:flex-start; margin-left:6px; }
  body.night-mode .code-program-label{ color:#C9D3F5; }
  .code-program{
    display:flex; flex-wrap:wrap; gap:6px; width:100%; min-height:52px;
    background:var(--cream); border:3px dashed var(--cream-2); border-radius:14px; padding:8px;
    align-items:center;
  }
  body.night-mode .code-program{ background:#2A3352; border-color:#3B4468; }
  .code-prog-empty{ font-size:13px; color:var(--ink-soft); font-weight:600; padding:0 6px; }
  body.night-mode .code-prog-empty{ color:#B7C2E8; }
  .code-prog-card{
    position:relative; width:42px; height:42px; border-radius:11px; border:none; cursor:pointer;
    background:var(--cat-color,#2BB3A3); color:#fff; font-size:20px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 3px 0 rgba(0,0,0,.18); transition:transform .12s;
  }
  .code-prog-card .cpc-num{ position:absolute; top:-6px; left:-4px; font-size:10px; font-weight:800; background:#fff; color:var(--cat-color,#2BB3A3); border-radius:50%; width:15px; height:15px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 2px rgba(0,0,0,.2); z-index:1; }
  .code-prog-card .cpc-ico{ display:flex; }
  .code-prog-card .cpc-ico svg{ width:27px; height:27px; display:block; }
  .code-prog-card.active{ transform:translateY(-4px) scale(1.12); box-shadow:0 6px 0 rgba(0,0,0,.18); filter:brightness(1.12); }
  .code-prog-card:active{ transform:scale(.9); }
  .code-repeat-row{ display:flex; align-items:center; gap:12px; justify-content:center; margin:2px 0 4px; flex-wrap:wrap; }
  .code-repeat-row[hidden]{ display:none; }
  .code-repeat-label{ font-size:14px; font-weight:800; color:var(--ink-soft); }
  body.night-mode .code-repeat-label{ color:#C7D2E8; }
  .code-repeat-btn{
    display:inline-flex; align-items:center; gap:4px; padding:8px 18px; border-radius:16px;
    border:3px solid #B06DD8; background:#F3E6FB; color:#7A2FA8; cursor:pointer;
    font-family:inherit; font-size:16px; font-weight:900; box-shadow:0 4px 0 rgba(176,109,216,.4);
    transition:transform .12s, box-shadow .12s;
  }
  body.night-mode .code-repeat-btn{ background:#3A2A4E; color:#EBD8FA; }
  .code-repeat-btn #code-repeat-n{ font-size:20px; min-width:16px; display:inline-block; text-align:center; }
  .code-repeat-btn:not(:disabled):active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(176,109,216,.4); }
  .code-repeat-btn:disabled{ opacity:.5; cursor:default; }
  .code-palette{ display:flex; gap:10px; width:100%; justify-content:center; flex-wrap:wrap; }
  .code-cmd-btn{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    min-width:88px; padding:10px 8px; border-radius:16px; border:3px solid var(--cat-color,#2BB3A3);
    background:#fff; cursor:pointer; font-family:inherit; color:var(--ink);
    box-shadow:0 4px 0 rgba(43,179,163,.35); transition:transform .12s, box-shadow .12s;
  }
  body.night-mode .code-cmd-btn{ background:#222B45; color:#EAF0FF; }
  .code-cmd-btn .ccmd-ico{ display:flex; }
  .code-cmd-btn .ccmd-ico svg{ width:32px; height:32px; display:block; }
  .code-cmd-btn .ccmd-lbl{ font-size:13px; font-weight:800; }
  .code-cmd-btn:not(:disabled):active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(43,179,163,.35); }
  .code-cmd-btn:disabled{ opacity:.5; cursor:default; }
  .code-actions{ display:flex; gap:14px; width:100%; max-width:340px; }
  .code-run-btn, .code-clear-btn{
    flex:1; padding:15px 10px; border-radius:18px; border:none; cursor:pointer;
    font-family:inherit; font-size:clamp(16px,4.4vw,19px); font-weight:800; color:#fff;
    transition:transform .12s, box-shadow .12s;
  }
  .code-run-btn{ background:#3B9E5B; box-shadow:0 5px 0 #2b7a44; flex:2; }
  .code-clear-btn{ background:#E8A33A; box-shadow:0 5px 0 #c07f1e; }
  .code-run-btn:not(:disabled):active, .code-clear-btn:not(:disabled):active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.2); }
  .code-run-btn:disabled, .code-clear-btn:disabled{ opacity:.5; cursor:default; }
  @media (max-width:480px){
    .code-cmd-btn{ min-width:72px; padding:8px 6px; }
    .code-cmd-btn .ccmd-lbl{ font-size:11px; }
    .code-prog-card{ width:38px; height:38px; font-size:18px; }
  }
  .shadow-prompt-card{
    background:linear-gradient(180deg, #FFFDF5, #FFF3DC);
    border:4px solid var(--cat-color, #5D6D9E); border-radius:26px;
    padding:30px 50px; box-shadow:0 8px 0 rgba(0,0,0,.08);
  }
  .shadow-prompt{
    font-size:clamp(100px, 21vw, 152px); line-height:1.15;
    filter:brightness(0); user-select:none;
  }
  /* transition อยู่บน .revealed เท่านั้น: เฉลยสี = ค่อยๆ จาง, ขึ้นข้อใหม่ = ดำทันที (ไม่แว้บสีจริงให้เห็นก่อน) */
  .shadow-prompt.revealed{filter:none; transition:filter .5s ease;}
  /* ทายเงา 2/3: emoji หลายตัวซ้อนเหลื่อมกันเป็นเงาก้อนเดียว (filter brightness(0) อยู่ที่ parent จึงดำทั้งก้อน)
     margin ติดลบหน่วย em = ระยะซ้อน ~40% ยังพอเห็นรูปทรงแต่ละชิ้น — ตัวที่ซ้อนขยับขึ้น/ลงเล็กน้อยให้ดูเป็นธรรมชาติ */
  .shadow-prompt .sp-i{display:inline-block; line-height:1.15;}
  .shadow-prompt.ov2{font-size:clamp(86px, 18vw, 130px);}
  .shadow-prompt.ov2 .sp-i:nth-child(2){margin-left:-.52em; transform:translateY(.1em);}
  .shadow-prompt.ov3{font-size:clamp(72px, 15vw, 108px);}
  .shadow-prompt.ov3 .sp-i:nth-child(2){margin-left:-.5em; transform:translateY(.12em);}
  .shadow-prompt.ov3 .sp-i:nth-child(3){margin-left:-.5em; transform:translateY(-.08em);}
  /* การ์ดตัวเลือกความกว้างคงที่ (width ไม่ใช่ min-width) ให้ flex-wrap ขึ้นบรรทัดใหม่เป็นแถวสมมาตรเสมอ
     (ของเดิมใช้ min-width ทำให้การ์ดกว้างไม่เท่ากันตามความยาวชื่อ ขึ้นบรรทัดสะเปะสะปะ) */
  .shadow-choices{display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:18px; width:100%; max-width:100%; margin:0 auto;}
  .shadow-choice{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    background:#fff; border:3px solid #F3E2C0; border-radius:20px;
    padding:14px 10px 10px; width:150px; cursor:pointer; font-family:inherit;
    box-shadow:0 5px 0 rgba(0,0,0,.07);
    transition:transform .15s ease, border-color .15s ease;
  }
  .shadow-choice:hover{transform:translateY(-4px) scale(1.06); border-color:var(--cat-color, #5D6D9E);}
  .shadow-choice:active{transform:scale(.95);}
  .shadow-choice-emoji{font-size:clamp(44px, 9vw, 60px); line-height:1.15;}
  /* ตัวเลือกแบบชุด 2-3 ชิ้น (ทายเงา 2/3): emoji เล็กลงให้การ์ดไม่บาน, ห้ามตัดขึ้นบรรทัด (nowrap) ให้ icon อยู่แถวเดียวกันเสมอ
     ov3 (3 ชิ้น) ตัวเล็กกว่า ov2 (2 ชิ้น) และการ์ดกว้างกว่า .shadow-choice ฐาน ให้พอดีกับจำนวน icon */
  .shadow-choice-emoji.multi{font-size:clamp(32px, 6.5vw, 44px); letter-spacing:3px; white-space:nowrap;}
  .shadow-choice.ov2{width:172px;}
  .shadow-choice.ov3{width:192px;}
  .shadow-choice.ov3 .shadow-choice-emoji.multi{font-size:clamp(24px, 5vw, 32px); letter-spacing:2px;}
  .shadow-choice-name{font-size:16px; font-weight:700; color:var(--ink-soft); max-width:126px; text-align:center; word-break:break-word;}
  .shadow-choice.ov2 .shadow-choice-name, .shadow-choice.ov3 .shadow-choice-name{max-width:148px;}
  .shadow-choice.correct{border-color:var(--correct); background:var(--correct-l); animation:popCorrect .38s ease;}
  .shadow-choice.wrong{border-color:var(--wrong); background:var(--wrong-l); opacity:.55; cursor:default; animation:shakeX .45s ease;}
  @media (max-width:480px){
    .shadow-prompt-card{padding:20px 30px;}
    .shadow-prompt{font-size:clamp(76px, 28vw, 114px);}
    .shadow-prompt.ov2{font-size:clamp(62px, 22vw, 90px);}
    .shadow-prompt.ov3{font-size:clamp(50px, 18vw, 74px);}
    /* กว้างคงที่ 130px บังคับให้เหลือแค่ 2 การ์ดต่อแถว บนจอแคบ กันแถวสุดท้ายเหลือใบเดียวโดดๆ ไม่สวย */
    .shadow-choice{width:130px; padding:10px 8px 8px;}
    .shadow-choice.ov2{width:150px;}
    .shadow-choice.ov3{width:164px;}
    .shadow-choices{gap:12px; max-width:100%;}
    .shadow-choice-name{max-width:108px; font-size:15px;}
    .shadow-choice.ov2 .shadow-choice-name, .shadow-choice.ov3 .shadow-choice-name{max-width:130px;}
    .shadow-choice-emoji.multi{font-size:clamp(26px, 8vw, 36px); letter-spacing:2px;}
    .shadow-choice.ov3 .shadow-choice-emoji.multi{font-size:clamp(19px, 6vw, 26px); letter-spacing:1.5px;}
  }

  /* ---------- Color mixing game (เกมผสมสี 1/2 — หม้อผสมสีวิเศษ) ---------- */
  .mix-board{
    display:flex; flex-direction:column; align-items:center; gap:22px;
    padding:14px 6px 40px; width:100%; max-width:100%; margin:0 auto;
  }
  .mix-target-card{
    display:flex; align-items:center; gap:20px;
    background:linear-gradient(180deg, #FFFDF5, #FFF3DC);
    border:4px solid var(--cat-color, #E8734C); border-radius:26px;
    padding:18px 30px; box-shadow:0 8px 0 rgba(0,0,0,.08);
  }
  .mix-target-text{font-size:24px; font-weight:800; color:var(--ink);}
  .mix-target-text b{color:var(--cat-color, #E8734C);}
  .mix-target-swatch{
    width:84px; height:84px; border-radius:50%; flex-shrink:0;
    border:5px solid #fff; box-shadow:0 0 0 3px rgba(0,0,0,.1), 0 4px 0 rgba(0,0,0,.08);
  }
  .mix-pot-wrap{display:flex; flex-direction:column; align-items:center; gap:12px; position:relative;}
  .mix-msg{
    background:#fff; border:3px solid var(--cat-color, #E8734C); border-radius:18px;
    padding:9px 18px; font-size:19px; font-weight:800; color:var(--ink);
    box-shadow:0 4px 0 rgba(0,0,0,.08); max-width:420px; text-align:center;
  }
  .mix-msg[hidden]{display:none;}
  .mix-pot{position:relative; padding-top:10px;}
  .mix-pot-rim{
    width:250px; height:26px; margin:0 auto -14px; position:relative; z-index:2;
    background:#5D6D9E; border-radius:999px; box-shadow:0 3px 0 rgba(0,0,0,.12);
  }
  .mix-pot-body{
    position:relative; width:230px; height:165px; margin:0 auto; overflow:hidden;
    background:linear-gradient(180deg, #8394C7, #6C7DB0);
    border-radius:26px 26px 115px 115px; box-shadow:0 8px 0 rgba(0,0,0,.1);
  }
  /* หูหม้อสองข้าง */
  .mix-pot::before, .mix-pot::after{
    content:''; position:absolute; top:38px; width:34px; height:34px; z-index:1;
    background:#5D6D9E; border-radius:50%;
  }
  .mix-pot::before{left:-14px;}
  .mix-pot::after{right:-14px;}
  .mix-pot-liquid{
    position:absolute; left:0; right:0; bottom:0; height:0;
    transition:height .5s ease, background-color .65s ease;
  }
  .mix-pot-liquid.filled{height:74%;}
  .mix-pot-liquid.draining{height:0 !important; transition:height .5s ease;}
  /* ผิวน้ำ: แถบโค้งอ่อนๆ ด้านบนของเหลว */
  .mix-pot-liquid::before{
    content:''; position:absolute; top:0; left:0; right:0; height:14px;
    background:rgba(255,255,255,.28); border-radius:50%;
  }
  /* หน้าหม้อวาดด้วย CSS (ตา/แก้ม/ปาก/น้ำตา) ให้เข้าธีมการ์ตูนแบน — สลับอารมณ์ผ่านคลาสบน #mix-pot */
  .mix-pot-face{
    position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
    width:96px; height:48px; z-index:2; pointer-events:none;
  }
  .mpf-eye{
    position:absolute; top:2px; width:13px; height:13px; border-radius:50%;
    background:#2F3A5C; box-shadow:0 0 0 2px rgba(255,255,255,.3);
  }
  .mpf-eye::after{content:''; position:absolute; top:2px; left:3px; width:4px; height:4px; border-radius:50%; background:#fff;}
  .mpf-eye.l{left:18px;} .mpf-eye.r{right:18px;}
  .mpf-cheek{
    position:absolute; top:17px; width:11px; height:7px; border-radius:50%;
    background:#F6A5B8; opacity:.85;
  }
  .mpf-cheek.l{left:5px;} .mpf-cheek.r{right:5px;}
  .mpf-mouth{
    position:absolute; top:20px; left:50%; transform:translateX(-50%);
    width:30px; height:15px; border:4px solid #2F3A5C; border-top:none;
    border-radius:0 0 30px 30px; box-shadow:0 2px 0 rgba(255,255,255,.25);
    transition:width .2s ease, height .2s ease;
  }
  .mpf-tear{
    position:absolute; top:16px; left:22px; width:10px; height:14px; opacity:0;
    background:#8FD3FF; border-radius:50% 50% 50% 50%/35% 35% 65% 65%;
  }
  /* ตกใจตอนคน: ปากกลม */
  .mix-pot.stirring .mpf-mouth{width:15px; height:15px; border:4px solid #2F3A5C; border-radius:50%;}
  /* ดีใจ: ตาหยีโค้ง + ยิ้มกว้าง */
  .mix-pot.happy .mpf-eye{height:8px; top:6px; border-radius:9px 9px 0 0;}
  .mix-pot.happy .mpf-eye::after{display:none;}
  .mix-pot.happy .mpf-mouth{width:40px; height:20px;}
  /* เศร้า: ปากคว่ำ + น้ำตาไหล */
  .mix-pot.sad .mpf-mouth{border:4px solid #2F3A5C; border-bottom:none; border-radius:30px 30px 0 0; height:12px; top:25px;}
  .mix-pot.sad .mpf-tear{opacity:1; animation:mixTearDrip 1.1s ease-in infinite;}
  @keyframes mixTearDrip{ 0%{transform:translateY(0); opacity:.95;} 70%{opacity:.9;} 100%{transform:translateY(16px); opacity:0;} }
  /* ทัพพีไม้โผล่มาคนตอนผสม */
  .mix-ladle{
    position:absolute; top:-26px; left:50%; width:11px; height:76px; margin-left:-6px;
    background:linear-gradient(180deg, #C99A6A, #8F6238); border-radius:6px;
    transform-origin:50% 92%; opacity:0; z-index:3; pointer-events:none;
    transition:opacity .15s ease;
  }
  .mix-ladle-bowl{
    position:absolute; bottom:-9px; left:50%; margin-left:-12px;
    width:24px; height:24px; border-radius:50%;
    background:#8F6238; border:3px solid #6E4A28;
  }
  .mix-pot.stirring .mix-ladle{opacity:1; animation:ladleStir .47s ease-in-out 2;}
  @keyframes ladleStir{ 0%,100%{transform:translateX(-24px) rotate(-13deg);} 50%{transform:translateX(24px) rotate(13deg);} }
  .mix-pot.stirring{animation:potWobble .95s ease-in-out;}
  @keyframes potWobble{
    0%,100%{transform:rotate(0);} 18%{transform:rotate(-3deg);} 38%{transform:rotate(3deg);}
    58%{transform:rotate(-2deg);} 78%{transform:rotate(2deg);}
  }
  /* ผิวน้ำกระเพื่อมตามจังหวะทัพพี */
  .mix-pot.stirring .mix-pot-liquid::before{animation:mixSlosh .47s ease-in-out 2;}
  @keyframes mixSlosh{ 0%,100%{transform:translateX(-10px);} 50%{transform:translateX(10px);} }
  .mix-pot.happy{animation:popCorrect .38s ease;}
  .mix-pot.sad{animation:shakeX .45s ease;}
  .mix-pot-chips{display:flex; gap:8px; justify-content:center; min-height:30px;}
  .mix-chip{
    width:28px; height:28px; border-radius:50%; padding:0; cursor:default;
    border:2px solid rgba(0,0,0,.18); box-shadow:0 2px 0 rgba(0,0,0,.08);
  }
  .mix-chip.removable{cursor:pointer; outline:3px dashed rgba(0,0,0,.25); outline-offset:2px;}
  .mix-jars{display:flex; flex-wrap:wrap; justify-content:center; gap:14px; max-width:620px;}
  .mix-jar{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    background:#fff; border:3px solid #F3E2C0; border-radius:20px;
    padding:12px 16px 10px; min-width:96px; cursor:pointer; font-family:inherit;
    box-shadow:0 5px 0 rgba(0,0,0,.07);
    transition:transform .15s ease, border-color .15s ease, opacity .2s ease;
  }
  .mix-jar:hover{transform:translateY(-4px) scale(1.05); border-color:var(--cat-color, #E8734C);}
  .mix-jar:active{transform:scale(.95);}
  .mix-jar.used{opacity:.35; cursor:default; transform:none; border-color:#F3E2C0;}
  /* กระปุกสี: ถังสีมีฝา + แววสะท้อน (สีจริงส่งผ่าน CSS var --jc จาก JS) */
  .mix-jar-pot{
    position:relative; display:block; width:52px; height:46px; margin-top:8px;
    background:var(--jc); border:3px solid rgba(0,0,0,.18);
    border-radius:9px 9px 15px 15px;
    box-shadow:inset 0 -7px 0 rgba(0,0,0,.10), inset 0 6px 0 rgba(255,255,255,.18);
  }
  .mix-jar-lid{
    position:absolute; top:-10px; left:-6px; right:-6px; height:11px;
    background:#E9EEF7; border:3px solid #B9C4D8; border-radius:999px;
  }
  .mix-jar-drip{
    position:absolute; top:5px; right:7px; width:9px; height:14px;
    background:rgba(255,255,255,.38);
    border-radius:50% 50% 50% 50%/40% 40% 60% 60%;
  }
  .mix-jar-name{font-size:15px; font-weight:700; color:var(--ink-soft);}
  /* ghost กระปุกลอยไปเทที่ปากหม้อ (สร้าง/ลบโดย JS ตำแหน่ง fixed) */
  .mix-pour-ghost{
    position:fixed; z-index:520; pointer-events:none; box-sizing:border-box;
    background:var(--jc); border:3px solid rgba(0,0,0,.18);
    border-radius:9px 9px 15px 15px;
    box-shadow:inset 0 -7px 0 rgba(0,0,0,.10);
    transition:transform .5s cubic-bezier(.45,-.15,.55,1.1), opacity .24s ease;
  }
  .mix-pour-ghost.poured{opacity:0;}
  @media (max-width:480px){
    .mix-target-card{padding:14px 20px; gap:14px;}
    .mix-target-text{font-size:19px;}
    .mix-target-swatch{width:64px; height:64px;}
    .mix-pot-rim{width:206px;}
    .mix-pot-body{width:188px; height:138px;}
    .mix-pot-face{bottom:10px; transform:translateX(-50%) scale(.82); transform-origin:50% 100%;}
    .mix-msg{font-size:16px; max-width:92vw;}
    .mix-jar{min-width:82px; padding:10px 12px 8px;}
    .mix-jar-pot{width:44px; height:39px;}
    .mix-jars{gap:10px;}
  }

  /* ---------- Listen word-spelling game (เกมฟังคำศัพท์ 1/2) ---------- */
  .listen-board{display:flex; flex-direction:column; align-items:center; gap:28px; padding:12px 6px 40px;}
  .listen-speak-btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 28px; border-radius:999px; border:none; cursor:pointer;
    background:linear-gradient(135deg, var(--cat-color, #6C5CE7), #8E7CC3); color:#fff;
    font-family:inherit; font-weight:800; font-size:19px;
    box-shadow:0 6px 0 rgba(0,0,0,.15); transition:transform .15s, box-shadow .15s;
  }
  .listen-speak-btn:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.15);}
  .listen-symbol{font-size:64px; line-height:1; opacity:0; transform:scale(.8); animation:cardIn .35s ease-out forwards;}
  .listen-symbol[hidden]{display:none;}
  .listen-slots{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
  .listen-slot{
    width:64px; height:64px; border-radius:var(--radius-md);
    display:flex; align-items:center; justify-content:center;
    font-size:32px; font-weight:800; text-transform:uppercase; color:var(--ink);
    background:var(--cream); border:3px dashed var(--cream-2);
    transition:transform .15s, background .15s, border-color .15s;
  }
  .listen-slot.hint{background:var(--cat-color, #6C5CE7); color:#fff; border-style:solid; border-color:transparent;}
  .listen-slot.filled{background:var(--white); border-style:solid; border-color:var(--cat-color,#6C5CE7); cursor:pointer;}
  .listen-slot.filled:active{transform:translateY(3px);}
  .listen-slot.wrong{background:#FFD9D9; border-color:#FF6161; animation:listenShake .4s;}
  @keyframes listenShake{
    0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);}
  }
  .listen-cards{
    display:flex; flex-wrap:wrap; gap:18px; justify-content:center;
    max-width:640px; margin-top:32px; /* เว้นระยะห่างจากโจทย์ (ปุ่มฟังคำศัพท์+ช่องคำตอบ) ลงมาให้ชัดเจนขึ้น */
  }
  .listen-card{
    width:104px; height:104px; border-radius:var(--radius-md);
    background:var(--cream); border:3px solid var(--cream-2);
    font-family:inherit; font-size:46px; font-weight:800; text-transform:uppercase; color:var(--ink);
    cursor:pointer; box-shadow:var(--shadow-btn); transition:transform .15s;
  }
  .listen-card:active{transform:translateY(3px); box-shadow:none;}
  .listen-card.used{visibility:hidden; pointer-events:none;}
  @media (max-width:480px){
    .listen-slot{width:52px; height:52px; font-size:26px;}
    .listen-card{width:80px; height:80px; font-size:34px;}
    .listen-speak-btn{padding:12px 22px; font-size:17px;}
  }

  /* ===== ปุ่มเปียโนของหนู (gimmick มุมล่างซ้าย เหนือปุ่มติดตั้ง) + modal เปียโนอิสระ ===== */
  .free-piano-btn{
    bottom:60px;
    background:linear-gradient(135deg, #C86FB0, #7B6FD0); color:#fff; border-color:transparent;
    box-shadow:0 4px 14px rgba(123,111,208,.38); animation:fpBtnGlow 2.4s ease-in-out infinite;
  }
  body.night-mode .free-piano-btn{ background:linear-gradient(135deg, #C86FB0, #7B6FD0); color:#fff; border-color:transparent; }
  @keyframes fpBtnGlow{0%,100%{box-shadow:0 4px 14px rgba(123,111,208,.38);} 50%{box-shadow:0 4px 22px rgba(200,111,176,.66);}}
  body.music-open .install-link-btn, body.music-open .free-piano-btn{ display:none; }

  .free-piano-card{
    max-width:min(840px, 96vw); width:100%; max-height:92vh; overflow-y:auto;
    text-align:center;
  }
  @media (min-width:1025px){ .free-piano-card{ max-width:min(1120px, 94vw); } }
  .fp-sub{font-size:15px; font-weight:600; color:var(--ink-soft); margin:2px 0 14px;}
  .fp-songs{display:flex; justify-content:center; margin-bottom:14px;}
  .fp-song-select{
    font-family:inherit; font-weight:800; font-size:16px; color:#fff; text-align:center;
    background:linear-gradient(135deg,#C86FB0,#7B6FD0); border:none; border-radius:16px;
    padding:11px 46px 11px 20px; cursor:pointer; max-width:92%;
    box-shadow:0 5px 0 #6a5cbf; -webkit-appearance:none; appearance:none;
    /* ลูกศรวางเป็น layer บนสุด (ต้องมาก่อน gradient ไม่งั้นถูกทับ) */
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"), linear-gradient(135deg,#C86FB0,#7B6FD0);
    background-repeat:no-repeat, no-repeat; background-position:right 15px center, center; background-size:16px, auto;
  }
  .fp-song-select:active{transform:translateY(2px); box-shadow:0 3px 0 #6a5cbf;}
  .fp-song-select option{color:var(--ink); background:#FFF7EA; font-weight:700;}
  .fp-notes-wrap{min-height:44px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
  .fp-notes{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center;}
  /* โน้ตในเปียโนของหนู (modal) เล็กกว่าในเกม เพราะโชว์ทั้งเพลง (โน้ตเยอะ) */
  .fp-notes .music-note-bubble{
    width:clamp(30px,6.5vw,38px); height:clamp(30px,6.5vw,38px);
    font-size:clamp(14px,3.4vw,18px); border-width:2.5px;
  }
  .fp-notes .music-note-bubble .mnb-check{ top:-5px; right:-5px; width:16px; height:16px; font-size:11px; }
  .fp-hint-free{font-size:15px; font-weight:700; color:var(--ink-soft);}
  .fp-tools{margin-bottom:16px;}

  /* ===== เกมดนตรี (เปียโน) — skill-music ===== */
  .music-board{
    display:flex; flex-direction:column; align-items:center; gap:20px;
    padding:14px 4px 44px; width:100%; max-width:100%; margin:0 auto;
  }
  .music-prompt-card{
    display:flex; flex-direction:column; align-items:center; gap:14px;
    background:linear-gradient(180deg, #FFFDF5, #FFF3DC);
    border:4px solid var(--cat-color, #C86FB0); border-radius:26px;
    padding:16px 26px 20px; box-shadow:0 8px 0 rgba(0,0,0,.08);
    max-width:min(680px, 94vw);
  }
  .music-prompt-label{font-size:18px; font-weight:800; color:var(--ink); text-align:center;}
  .music-notes{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center; min-height:58px;}
  .music-note-bubble{
    width:clamp(46px,13vw,58px); height:clamp(46px,13vw,58px); border-radius:50%;
    display:flex; align-items:center; justify-content:center; position:relative;
    font-weight:800; font-size:clamp(22px,6vw,27px);
    background:color-mix(in srgb, var(--key-color,#C86FB0) 16%, #fff);
    border:3px solid var(--key-color,#C86FB0);
    color:color-mix(in srgb, var(--key-color,#C86FB0) 62%, #3a2b2b);
    transition:transform .15s;
  }
  .music-note-bubble.current{
    box-shadow:0 0 0 5px color-mix(in srgb, var(--key-color,#C86FB0) 28%, #fff);
    animation:mnbPulse 1s ease-in-out infinite;
  }
  @keyframes mnbPulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.12);}}
  .music-note-bubble.done{background:var(--key-color,#C86FB0); color:#fff; border-color:var(--key-color,#C86FB0);}
  .music-note-bubble .mnb-check{
    position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:50%;
    background:#43AA8B; color:#fff; font-size:15px; display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 0 rgba(0,0,0,.15);
  }
  .music-note-bubble.mystery{background:#F0EDE6; border:3px dashed #C3B9AC; color:#B4A796;}
  .music-note-bubble.shake{animation:mnbShake .4s;}
  @keyframes mnbShake{0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);}}
  .music-prompt-tools{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
  .music-tool-btn{
    font-family:inherit; font-weight:800; font-size:15px; color:var(--ink);
    background:var(--white,#fff); border:3px solid var(--cat-color,#C86FB0); border-radius:999px;
    padding:9px 18px; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.08); transition:transform .12s;
  }
  .music-tool-btn:active{transform:translateY(3px); box-shadow:none;}
  .music-listen-btn{background:linear-gradient(135deg, var(--cat-color,#C86FB0), color-mix(in srgb, var(--cat-color,#C86FB0) 70%, white)); color:#fff; border-color:transparent;}
  /* ปุ่มฟังเพลงระหว่างเพลงตัวอย่างกำลังเล่น: กลายเป็นปุ่มหยุด (โทนแดง) */
  .music-listen-btn.listening{background:linear-gradient(135deg, #E4574F, #F08A7E);}
  .music-msg{
    background:#fff; border:3px solid var(--cat-color,#C86FB0); border-radius:18px;
    padding:9px 20px; font-size:20px; font-weight:800; color:var(--ink);
    box-shadow:0 4px 0 rgba(0,0,0,.08); text-align:center;
  }
  .music-msg[hidden]{display:none;}
  .music-piano-wrap{width:100%; overflow-x:auto; padding:6px 10px 16px; -webkit-overflow-scrolling:touch;}
  .music-piano{
    position:relative; display:flex; gap:0; height:200px; width:max-content; margin:0 auto;
    touch-action:manipulation; user-select:none;
  }
  .music-key{font-family:inherit; padding:0; cursor:pointer; touch-action:manipulation;}
  .music-white{
    position:relative; flex:0 0 auto; width:clamp(46px,5.6vw,66px); height:100%;
    background:linear-gradient(180deg, #fff 55%, color-mix(in srgb, var(--key-color,#ccc) 22%, #fff));
    border:2px solid color-mix(in srgb, var(--key-color,#ccc) 42%, #fff);
    border-radius:7px 7px 14px 14px; margin-right:-2px;
    box-shadow:0 6px 0 color-mix(in srgb, var(--key-color,#999) 35%, #d8cfc4), inset 0 2px 4px rgba(255,255,255,.9);
    display:flex; align-items:flex-end; justify-content:center; padding-bottom:14px;
    transition:transform .07s, box-shadow .07s, background .1s;
  }
  .music-white .mk-label{
    width:clamp(28px,4vw,38px); height:clamp(28px,4vw,38px); border-radius:50%;
    background:var(--key-color,#C86FB0); color:#fff; font-weight:800; font-size:clamp(16px,2.4vw,21px);
    display:flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,.18);
  }
  .no-key-labels .mk-label{display:none;}
  .music-white.pressed{transform:translateY(5px); box-shadow:0 1px 0 color-mix(in srgb, var(--key-color,#999) 35%, #d8cfc4); background:linear-gradient(180deg, #fff 40%, color-mix(in srgb, var(--key-color,#ccc) 38%, #fff));}
  .music-white.key-wrong{background:linear-gradient(180deg, #FFE1E1, #FFB4B4); border-color:#E8635E;}
  .music-black{
    position:absolute; top:0; z-index:3; transform:translateX(-50%);
    width:clamp(28px,3.4vw,40px); height:62%;
    background:linear-gradient(180deg, #4a4658, #201d2c);
    border:0; border-radius:0 0 8px 8px;
    box-shadow:0 5px 0 rgba(0,0,0,.45), inset 0 -7px 9px rgba(255,255,255,.07);
    transition:transform .07s, box-shadow .07s;
  }
  .music-black.pressed{transform:translateX(-50%) translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.45);}
  @media (min-width:1025px){ .music-piano{height:240px;} }
  @media (max-width:480px){
    .music-prompt-card{padding:13px 16px 16px;}
    .music-prompt-label{font-size:16px;}
    .music-tool-btn{font-size:14px; padding:8px 14px;}
    .music-piano{height:176px;}
  }
  /* เปียโนของหนู (free-piano modal): ให้เห็นเปียโนเต็มความกว้าง ไม่ต้อง scroll — คีย์ขาวยืด/หดพอดี modal */
  .free-piano-card .music-piano-wrap{overflow-x:hidden; padding-left:2px; padding-right:2px;}
  #fp-piano{width:100%; height:238px;}
  #fp-piano .music-white{flex:1 1 0; width:auto; min-width:0; padding-bottom:12px;}
  #fp-piano .music-white .mk-label{width:clamp(15px,2.6vw,25px); height:clamp(15px,2.6vw,25px); font-size:clamp(9px,1.7vw,14px);}
  #fp-piano .music-black{width:clamp(16px,3vw,32px);}
  @media (min-width:1025px){ #fp-piano{height:288px;} }
  @media (max-width:480px){ #fp-piano{height:196px;} }

  /* ---------- Connect dots game (เกมลากเส้นต่อจุด 1/2 — เกมฝึกเขียน) ---------- */
  .dots-board{display:flex; justify-content:center; padding:14px 6px 40px; width:100%; max-width:100%;}
  .dots-stage-card{
    background:linear-gradient(180deg, #FFFDF5, #FFF3DC);
    border:4px solid var(--cat-color, #F08A24); border-radius:26px;
    padding:18px; box-shadow:0 8px 0 rgba(0,0,0,.08);
    width:min(94vw, 66vh, 620px); max-width:100%;
  }
  .dots-stage{
    position:relative; width:100%; aspect-ratio:1/1;
    touch-action:none; user-select:none; -webkit-user-select:none;
  }
  #dots-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;}
  .dots-line{stroke:var(--cat-color, #F08A24); stroke-width:2.1; stroke-linecap:round;}
  #dots-temp{
    stroke:var(--cat-color, #F08A24); stroke-width:2.1; stroke-linecap:round;
    stroke-dasharray:3 2.6; opacity:.7;
  }
  #dots-temp.bad{stroke:var(--wrong); stroke-dasharray:none; opacity:.9;}
  #dots-temp[hidden]{display:none;}
  #dots-fill{fill:var(--cat-light, #FDEBD5); opacity:0; transition:opacity .6s ease;}
  #dots-fill.show{opacity:.9;}
  .dot-pt{
    position:absolute; width:44px; height:44px; transform:translate(-50%,-50%);
    border-radius:50%; background:#FFF; border:3px solid var(--cat-color, #F08A24);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:19px; color:var(--ink);
    box-shadow:0 3px 0 rgba(0,0,0,.10);
  }
  .dot-pt.done{background:var(--correct-l); border-color:var(--correct); color:#2E8F63;}
  .dot-pt.shake{animation:shakeX .45s ease; border-color:var(--wrong); background:var(--wrong-l);}
  /* ตอนเฉลย: จางจุดตัวเลขลงไม่ให้บัง emoji เฉลย (overlay เฉลยอยู่ z-index สูงกว่าจุดเสมอ) */
  .dot-pt{transition:opacity .4s ease;}
  .dots-stage.revealed .dot-pt{opacity:.3;}
  .dots-reveal{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:8px; pointer-events:none; z-index:3;
  }
  .dots-reveal[hidden]{display:none;}
  .dots-reveal-emoji{
    font-size:clamp(88px, 20vw, 136px); line-height:1.1;
    transform:scale(0); transition:transform .45s cubic-bezier(.34,1.56,.64,1);
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.18));
  }
  .dots-reveal.show .dots-reveal-emoji{transform:scale(1);}
  .dots-reveal-name{
    font-size:clamp(20px, 4.5vw, 28px); font-weight:800; color:var(--ink);
    background:rgba(255,255,255,.88); padding:4px 20px; border-radius:16px;
    box-shadow:0 3px 10px rgba(74,63,53,.14);
    opacity:0; transition:opacity .4s ease .15s;
  }
  .dots-reveal.show .dots-reveal-name{opacity:1;}
  @media (min-width:1025px){
    .dots-stage-card{width:min(94vw, 76vh, 760px);}
  }
  @media (max-width:480px){
    .dots-stage-card{padding:12px;}
    .dot-pt{width:37px; height:37px; font-size:16px; border-width:2.5px;}
  }
  /* จอแคบ: นกฮูก fixed มุมขวาล่างทับจุดแถวล่างของกระดานจนแตะไม่ได้ — ย่อ widget หุบลงมุมระหว่างเล่นลากเส้นต่อจุด */
  @media (max-width:768px){
    body.dots-open .owl-widget{transform:scale(.62); transform-origin:bottom right; right:6px; bottom:6px;}
  }

  /* ===== CUSTOM OWL CURSOR (pointer) — ต้องอยู่ท้ายสุดเพื่อ override cursor:pointer ทั้งหมด ===== */
  body button, body a, body [role="button"], body label[for], body select,
  body .cat-card:not(.cat-locked), body .child-card, body .choice-btn:not(:disabled),
  body .memory-card:not(.flipped):not(.matched), body .install-link-btn,
  body .ar-dot, body .ar-card:not(.matched), body .ar-count-item, body .dot-pt {
    /* owl face cursor — hotspot กลาง (18,18) */
    cursor:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIwNDggMjA0OCIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgZmlsbD0icmdiKDE4Miw5Nyw0OSkiIGQ9Ik0gMTc1MS43NSA2MC4yMDMzIEMgMTc2OC41NCA1OS43ODM4IDE3NzQuODMgNjYuOTkxIDE3NzkuNDcgODIuNzM4NyBDIDE3ODQuNTcgMTAyLjM4NSAxNzg4Ljg5IDEyMy41MDYgMTc5MS40NiAxNDMuNzAyIEMgMTc5OC40NyAxOTguNzI4IDE4MDcuNzUgMjUzLjYxOSAxODE1LjU0IDMwOC40NjcgQyAxODIwLjM5IDM0NC4yNjMgMTgyNC45NiAzODAuMDk2IDE4MjkuMjYgNDE1Ljk2MiBDIDE4NDcuMTIgNTQ2LjMyNSAxODYyLjcyIDY3Ni45ODcgMTg3Ni4wNiA4MDcuODkgQyAxODg3Ljg4IDkwOC45MDggMTg5Ny43NSAxMDEwLjE1IDE5MDUuNjUgMTExMS41NSBDIDE5MTUuMTUgMTI0Ny40OCAxOTE2LjQ3IDEzNzQuMzUgMTg2OC4zNiAxNTAzLjY2IEMgMTg1OC4zNiAxNTMwLjU1IDE4NDQuOSAxNTU2LjgyIDE4MzEuMSAxNTgxLjg5IEMgMTgwOC41MSAxNjIzLjUgMTc4MS41MiAxNjYyLjU2IDE3NTAuNTggMTY5OC4zOSBDIDE2NTYuNzIgMTgwNi4xMyAxNTA5LjAxIDE4OTYuMzkgMTM3Mi45OSAxOTM5LjkzIEMgMTI5Ni4wNyAxOTY0LjU1IDExOTcuOTQgMTk4MC4wNyAxMTE3LjgxIDE5ODUuNDUgQyAxMDgyLjgzIDE5ODcuNSAxMDQ3Ljc5IDE5ODguMzYgMTAxMi43NiAxOTg4LjA0IEMgNzY0Ljc3NSAxOTg3Ljc4IDU1Mi41MTYgMTkyNy4xNCAzNjIuOTk1IDE3NjEuNjkgQyAyMTUuODI2IDE2MzYuNjcgMTM1LjY0NCAxNDM1LjkxIDEzNy44MzMgMTI0NC43NiBDIDEzOS4yMzggMTEyMi4wNCAxNTQuNDk3IDk5OS4zMTMgMTY3LjI5MiA4NzcuNDMgQyAxODIuMTg5IDcyNi4zMzkgMTk5Ljc1IDU3NS41MjIgMjE5Ljk2NiA0MjUuMDUgQyAyMjcuOTg3IDM2Ny4xOTIgMjM4LjQzMiAzMDkuNjg0IDI0Ny4yODYgMjUxLjk2NyBDIDI1Mi4xNTIgMjIwLjI0MiAyNjkuMzEzIDk0LjE3NTkgMjgyLjAwOSA3My41ODQ1IEMgMjg2LjI3NSA2Ni42NjU5IDI5Mi40NjIgNjEuOTAzNSAzMDAuNjY2IDYxLjAyNiBDIDMwNy45MjEgNjAuMjQ5OSAzMTQuODYxIDYxLjg5NjUgMzIxLjY0NiA2NC4zMTA4IEMgMzQxLjA2MiA3MS4yMjAxIDM1OS4yODMgODEuODcyNSAzNzcuODA1IDkwLjgxMTMgQyA0MTUuNzQ0IDEwOS4xMjEgNDU1LjkzMSAxMjguMjIzIDQ5NS41MzQgMTQyLjI5NiBDIDUyOS44MzEgMTU0LjQ4MyA1NzIuNTAyIDE2Ni45ODkgNjA3Ljg0NSAxNzUuNTUzIEMgNjIwLjk4IDE3OC43MzYgNjM0LjMzMyAxODAuODYyIDY0Ny40OTIgMTgzLjkxOSBDIDY3NS44NzUgMTkwLjUxNCA3MDIuOTE0IDE5Ny4zOCA3MzEuODE5IDIwMS43NjUgQyA4MzIuMDE2IDIxNi4xOTMgOTMzLjIgMjIyLjY1NiAxMDM0LjQyIDIyMS4wOTIgQyAxMDkwLjYxIDIxOS4zOTMgMTE0Ni43NCAyMTYuMDEzIDEyMDIuNzMgMjEwLjk1NCBDIDEyOTkuNyAyMDMuMTY2IDE0MDguMDUgMTg4Ljc4MiAxNTAxLjUzIDE2MC4xNzQgQyAxNTE4LjQgMTU1LjAxIDE1MzcuMDEgMTQ3LjkzNCAxNTU0LjA4IDE0Mi4yOTggQyAxNTczLjUyIDEzNS44NzggMTU5OC41MiAxMjguOTA0IDE2MTYuNjcgMTIwLjQzMyBDIDE2NTEuOCAxMDQuMDM0IDE2ODYuOTMgODYuMjAyNyAxNzIyLjczIDcxLjE4MzIgQyAxNzMxLjQ5IDY3LjUxMDYgMTc0Mi42OSA2Mi4yNzU2IDE3NTEuNzUgNjAuMjAzMyB6Ii8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIGZpbGw9InJnYigyMzAsMTUxLDgyKSIgZD0iTSAxMDIxLjcyIDQ2OS44MTYgQyAxMDMxLjkzIDQ2MS4yOTcgMTA0MS41OCA0NTEuNjc2IDEwNTEuNjEgNDQyLjg0NCBDIDExNDUuNjUgMzU5Ljk5MiAxMjUxLjI2IDMxMi43MzMgMTM3OC41MiAzMjQuMjc1IEMgMTQ3My44NCAzMzIuMDczIDE1NjMuMjIgMzczLjcwOSAxNjMwLjUxIDQ0MS42NTggQyAxNjU4LjcgNDcwLjIwMyAxNjY5LjYzIDQ4Ni40NyAxNjg5LjIxIDUyMC40MTUgQyAxNzgyLjczIDY4My4xNDQgMTc1NC45NCA4ODMuNTYyIDE2MDcuMDUgMTAwMy42OCBDIDE1MjUuODcgMTA2OS42MSAxNDIyLjY5IDEwOTcuNiAxMzE4Ljk5IDEwODguMjkgQyAxMjY5LjUgMTA4My44NSAxMTc4Ljc4IDEwNTIuMzQgMTEzOS41OSAxMDIxLjc2IEMgMTExNi40MiAxMDYwLjk5IDEwODYuMzEgMTA5Ny4xOSAxMDQ4LjM4IDExMjMgQyAxMDI3LjE4IDExMzguMTMgMTAxMi4xMSAxMTI5LjM2IDk5My40MzIgMTExNS42NCBDIDk1Ny4yMDQgMTA4OS4wMyA5MzAuOTM2IDEwNTQuMjUgOTA3Ljg3MyAxMDE2LjMgQyA4MzQuMzIgMTA2NC4wMiA3MzguNzIyIDEwOTcuMSA2NDkuODg3IDEwODguMzIgQyA2MzUuNTY4IDEwODYuOSA2MjEuMzE3IDEwODQuNCA2MDcuMjQxIDEwODEuMzkgQyA1MDUuNjM3IDEwNjAuNjkgNDE2LjYyNyA5OTkuOTk5IDM2MC4yNDkgOTEyLjk3MyBDIDI0Ny4zMTIgNzM4LjQ3OSAzMTYuNzk5IDQ5Mi4wMDMgNDg4LjUwOCAzODMuMDM3IEMgNTc2Ljg1NyAzMjYuOTcgNjg0LjU5MSAzMDkuMzYzIDc4Ni40OTMgMzMyLjU4NCBDIDg4MS4yMDggMzU0LjA4IDk1MS4zOTYgNDA2LjEzMiAxMDIxLjcyIDQ2OS44MTYgeiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJyZ2IoMjU0LDIxNSw1NSkiIGQ9Ik0gOTA3Ljg3MyAxMDE2LjMgQyA5MDEuMDYxIDEwMDIuODcgODgyLjAwMyA5NjkuNTYzIDg4Ny44NjEgOTU1LjYyNCBDIDg5MC45MjYgOTQ4LjMzMiA5MTEuNzI4IDkyNC4xNTcgOTE4LjA2MiA5MTQuODEgQyA5MzAuNjI3IDg5Ni4yNjYgOTUzLjIxOCA4NzYuNjUgOTczLjg5NiA4NjcuOTc1IEMgMTAwMy42MyA4NTUuMTY2IDEwMzguODYgODUyLjk3MSAxMDY5LjQxIDg2NC40MzIgQyAxMTAzLjM4IDg3Ny4xODEgMTEyMC45NiA5MDMuODkgMTE0Mi4yOCA5MzAuNjAzIEMgMTE2My4zMiA5NTYuOTc2IDExNzAuMzggOTU2LjM5NyAxMTU0LjcyIDk5MS40MDcgQyAxMTUwLjA5IDEwMDEuNzMgMTE0NS4wNCAxMDExLjg1IDExMzkuNTkgMTAyMS43NiBDIDExMTYuNDIgMTA2MC45OSAxMDg2LjMxIDEwOTcuMTkgMTA0OC4zOCAxMTIzIEMgMTAyNy4xOCAxMTM4LjEzIDEwMTIuMTEgMTEyOS4zNiA5OTMuNDMyIDExMTUuNjQgQyA5NTcuMjA0IDEwODkuMDMgOTMwLjkzNiAxMDU0LjI1IDkwNy44NzMgMTAxNi4zIHoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgZmlsbD0icmdiKDI1NSwyNTUsMjU1KSIgZD0iTSAxMzM0LjkyIDQzMS40MDkgQyAxNDg4LjkyIDQxNS41NzYgMTYyNi41NCA1MjcuNjkyIDE2NDIuMTcgNjgxLjcwNyBDIDE2NTcuOCA4MzUuNzIyIDE1NDUuNSA5NzMuMiAxMzkxLjQ3IDk4OC42MjUgQyAxMjM3LjcyIDEwMDQuMDIgMTEwMC41NiA4OTEuOTc5IDEwODQuOTYgNzM4LjI1MiBDIDEwNjkuMzYgNTg0LjUyNSAxMTgxLjIyIDQ0Ny4yMTMgMTMzNC45MiA0MzEuNDA5IHoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgZmlsbD0icmdiKDY5LDIzLDApIiBkPSJNIDEzNTYuNTcgNTU1LjU3OSBDIDE0NDEuOTUgNTUxLjI0OSAxNTE0LjcgNjE2LjkwOSAxNTE5LjExIDcwMi4yODggQyAxNTIzLjUzIDc4Ny42NjYgMTQ1Ny45NCA4NjAuNDggMTM3Mi41NyA4NjQuOTc5IEMgMTI4Ny4wNyA4NjkuNDg1IDEyMTQuMTQgODAzLjc4NSAxMjA5LjcxIDcxOC4yODcgQyAxMjA1LjI5IDYzMi43ODggMTI3MS4wNyA1NTkuOTE2IDEzNTYuNTcgNTU1LjU3OSB6Ii8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIGZpbGw9InJnYigyNTUsMjU1LDI1NSkiIGQ9Ik0gNjU4Ljc1MSA0MzEuODI4IEMgODEyLjY1NSA0MTcuODYgOTQ4LjY4NiA1MzEuNDM1IDk2Mi40MTMgNjg1LjM2MSBDIDk3Ni4xMzkgODM5LjI4NyA4NjIuMzUxIDk3NS4xNCA3MDguNDA0IDk4OC42MjUgQyA1NTQuNzk3IDEwMDIuMDggNDE5LjMxMSA4ODguNTk5IDQwNS42MTUgNzM1LjAxNCBDIDM5MS45MTkgNTgxLjQyOSA1MDUuMTg3IDQ0NS43NjUgNjU4Ljc1MSA0MzEuODI4IHoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgZmlsbD0icmdiKDY5LDIzLDApIiBkPSJNIDY3OS43OSA1NTYuNDk0IEMgNzY0LjY2NiA1NTQuMTYzIDgzNS4zOCA2MjEuMDM5IDgzNy43ODYgNzA1LjkxMiBDIDg0MC4xOTEgNzkwLjc4NSA3NzMuMzc4IDg2MS41NTggNjg4LjUwNyA4NjQuMDM5IEMgNjAzLjUzMSA4NjYuNTIyIDUzMi42NSA3OTkuNjA4IDUzMC4yNDEgNzE0LjYyOSBDIDUyNy44MzMgNjI5LjY1IDU5NC44MDkgNTU4LjgyOCA2NzkuNzkgNTU2LjQ5NCB6Ii8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIGZpbGw9InJnYigyMzAsMTUxLDgyKSIgZD0iTSAzMzAuNjUzIDE1NC4xNjkgQyAzNDkuNDIzIDE1Mi41MTUgMzc3LjIzIDE2Ni4yNjUgMzkzLjg0NSAxNzUuMzcgQyA0NDYuMjg1IDIwNC4xMDggNDk0LjYyIDIxNy45NDggNTUyLjIxMiAyMzMuMDcgQyA1MDcuNDcxIDI1MS42NzcgNDY0LjI2MyAyNzMuNzczIDQyMi45ODUgMjk5LjE1MiBDIDM3Ny4xNDkgMzI2LjIxNSAzMzIuNzU4IDM1NC4wNzYgMjkyLjQ3OSAzODkuMjk3IEMgMjkzLjMyNSAzNTUuMjcyIDMxNy45NjUgMTc0LjY5NSAzMzAuNjUzIDE1NC4xNjkgeiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJyZ2IoMjMwLDE1MSw4MikiIGQ9Ik0gMTcxNC41IDE1My4xOTQgQyAxNzE3LjcyIDE1My4yNTggMTcxNy41OCAxNTMuMDc0IDE3MjAuMjYgMTU0Ljc5MiBDIDE3MzIuMTcgMTczLjgxIDE3NTIuOTcgMzUyLjg1NiAxNzU1LjcgMzg1LjgxNiBDIDE3NTAuNDMgMzgyLjEwNiAxNzQ0Ljk3IDM3Ny41MjggMTczOS45NyAzNzMuNDMgQyAxNzA2LjQyIDM0NS45MSAxNjcyLjEyIDMyMC44NTMgMTYzNC44IDI5OC42OTggQyAxNjI0LjI3IDI5MS41NDggMTYwOS44IDI4My43MDggMTU5OC43NCAyNzcuMzQ5IEMgMTU2Ny4yMiAyNTkuMjM4IDE1MzcuMTUgMjQ0LjE4IDE1MDMuNTMgMjMwLjY5OSBDIDE1MDguNzcgMjI5LjI4NCAxNTE1LjE1IDIyNy45NzYgMTUyMC41IDIyNi45MzMgQyAxNTY1LjQ0IDIxOC4xNiAxNjA1LjI4IDIwMC41MDggMTY0Ni41IDE4MC45OTUgQyAxNjY2LjIyIDE3MS42NTkgMTY5My4zNiAxNTYuNzQ3IDE3MTQuNSAxNTMuMTk0IHoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgZmlsbD0icmdiKDIzMCwxNTEsODIpIiBkPSJNIDExNjIuNjUgMTUyNy4yMyBDIDExNjcuMjMgMTUyOC4zMyAxMTczLjcgMTUzMC45MiAxMTc4LjE5IDE1MzIuNjggQyAxMjQ0LjQyIDE1NTguNTggMTMyMS42NyAxNTYyLjAyIDEzODYuNjggMTUzMC42NiBDIDEzODkuOTMgMTUyOS4wOSAxMzkxLjI3IDE1MjkuMjQgMTM5NC4yOCAxNTMwLjUxIEMgMTQwNC4yMyAxNTQyLjY1IDEzODAuNiAxNTgxLjg4IDEzNzIuNzggMTU5Mi41MyBDIDEzNjUuNDYgMTYwMS41OCAxMzU3LjI2IDE2MDkuODkgMTM0OC4zIDE2MTcuMzQgQyAxMjc1LjU1IDE2NzYuOTEgMTE1Mi44OCAxNjIxLjE4IDExNjIuNjUgMTUyNy4yMyB6Ii8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIGZpbGw9InJnYigyMzAsMTUxLDgyKSIgZD0iTSAxMTM1LjE0IDE2OTUuOTggQyAxMTM5LjcyIDE2OTYuODkgMTE0MS4zIDE3MDEuMjMgMTE0MC43MSAxNzA1LjQ1IEMgMTEyNi4yNiAxODA5LjU1IDEwMDAuMTUgMTg0Ny41IDkzMS45NTYgMTc2Ni4zOCBDIDkxNC45NjUgMTc0NC44NyA5MDkuMDE0IDE3MjIuNjIgOTA2LjgyNSAxNjk1Ljk5IEMgOTIxLjA5MyAxNzAxLjY5IDkzOS45MDggMTcwOS45NiA5NTQuMTM4IDE3MTQuNTUgQyA5OTQuOTkyIDE3MjcuODUgMTAzOC45MyAxNzI4LjM5IDEwODAuMSAxNzE2LjExIEMgMTA5OC40OCAxNzEwLjUyIDExMTYuNTYgMTcwMi4xMiAxMTM1LjE0IDE2OTUuOTggeiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJyZ2IoMjMwLDE1MSw4MikiIGQ9Ik0gODg0LjkwOCAxNTI5Ljk0IEwgODg2LjEyMiAxNTMxLjEzIEMgODg4Ljk3NiAxNTQxLjI3IDg4My4zOSAxNTU2Ljg3IDg3OS4zMzYgMTU2Ni40NiBDIDg3MC43NiAxNTg2Ljc0IDg1Ni4xNTEgMTYwNS4zMSA4MzguNTM5IDE2MTguNTUgQyA4MTMuOTEzIDE2MzcuMyA3ODIuNzU0IDE2NDUuMjkgNzUyLjE0NyAxNjQwLjcxIEMgNzE5LjM3IDE2MzUuOTggNjk4LjM0MiAxNjIyLjcxIDY3OS4wNzQgMTU5Ni43MSBDIDY3Mi4xNTYgMTU4Ni4wMSA2NDcuODA4IDE1NDIuNzkgNjU4LjQ1IDE1MzIuMDcgQyA2NjQuNjAzIDE1MzEuNjEgNjc5LjcxOSAxNTM4IDY4Ni4zMzYgMTU0MC43OCBDIDcyOS44NTMgMTU1OS4wNSA3ODguMTM1IDE1NTguMjcgODMzLjY1MyAxNTQ4Ljc5IEMgODQ3LjUzOCAxNTQ1LjkgODcxLjUxNCAxNTM1Ljg5IDg4NC45MDggMTUyOS45NCB6Ii8+Cjwvc3ZnPg==") 24 24, pointer !important;
  }
  body .cat-card.cat-locked, body .choice-btn:disabled { cursor:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIwNDggMjA0OCIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4KCjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIGZpbGw9InJnYigxODIsOTcsNDkpIiBkPSJNIDE3NTEuNzUgNjAuMjAzMyBDIDE3NjguNTQgNTkuNzgzOCAxNzc0LjgzIDY2Ljk5MSAxNzc5LjQ3IDgyLjczODcgQyAxNzg0LjU3IDEwMi4zODUgMTc4OC44OSAxMjMuNTA2IDE3OTEuNDYgMTQzLjcwMiBDIDE3OTguNDcgMTk4LjcyOCAxODA3Ljc1IDI1My42MTkgMTgxNS41NCAzMDguNDY3IEMgMTgyMC4zOSAzNDQuMjYzIDE4MjQuOTYgMzgwLjA5NiAxODI5LjI2IDQxNS45NjIgQyAxODQ3LjEyIDU0Ni4zMjUgMTg2Mi43MiA2NzYuOTg3IDE4NzYuMDYgODA3Ljg5IEMgMTg4Ny44OCA5MDguOTA4IDE4OTcuNzUgMTAxMC4xNSAxOTA1LjY1IDExMTEuNTUgQyAxOTE1LjE1IDEyNDcuNDggMTkxNi40NyAxMzc0LjM1IDE4NjguMzYgMTUwMy42NiBDIDE4NTguMzYgMTUzMC41NSAxODQ0LjkgMTU1Ni44MiAxODMxLjEgMTU4MS44OSBDIDE4MDguNTEgMTYyMy41IDE3ODEuNTIgMTY2Mi41NiAxNzUwLjU4IDE2OTguMzkgQyAxNjU2LjcyIDE4MDYuMTMgMTUwOS4wMSAxODk2LjM5IDEzNzIuOTkgMTkzOS45MyBDIDEyOTYuMDcgMTk2NC41NSAxMTk3Ljk0IDE5ODAuMDcgMTExNy44MSAxOTg1LjQ1IEMgMTA4Mi44MyAxOTg3LjUgMTA0Ny43OSAxOTg4LjM2IDEwMTIuNzYgMTk4OC4wNCBDIDc2NC43NzUgMTk4Ny43OCA1NTIuNTE2IDE5MjcuMTQgMzYyLjk5NSAxNzYxLjY5IEMgMjE1LjgyNiAxNjM2LjY3IDEzNS42NDQgMTQzNS45MSAxMzcuODMzIDEyNDQuNzYgQyAxMzkuMjM4IDExMjIuMDQgMTU0LjQ5NyA5OTkuMzEzIDE2Ny4yOTIgODc3LjQzIEMgMTgyLjE4OSA3MjYuMzM5IDE5OS43NSA1NzUuNTIyIDIxOS45NjYgNDI1LjA1IEMgMjI3Ljk4NyAzNjcuMTkyIDIzOC40MzIgMzA5LjY4NCAyNDcuMjg2IDI1MS45NjcgQyAyNTIuMTUyIDIyMC4yNDIgMjY5LjMxMyA5NC4xNzU5IDI4Mi4wMDkgNzMuNTg0NSBDIDI4Ni4yNzUgNjYuNjY1OSAyOTIuNDYyIDYxLjkwMzUgMzAwLjY2NiA2MS4wMjYgQyAzMDcuOTIxIDYwLjI0OTkgMzE0Ljg2MSA2MS44OTY1IDMyMS42NDYgNjQuMzEwOCBDIDM0MS4wNjIgNzEuMjIwMSAzNTkuMjgzIDgxLjg3MjUgMzc3LjgwNSA5MC44MTEzIEMgNDE1Ljc0NCAxMDkuMTIxIDQ1NS45MzEgMTI4LjIyMyA0OTUuNTM0IDE0Mi4yOTYgQyA1MjkuODMxIDE1NC40ODMgNTcyLjUwMiAxNjYuOTg5IDYwNy44NDUgMTc1LjU1MyBDIDYyMC45OCAxNzguNzM2IDYzNC4zMzMgMTgwLjg2MiA2NDcuNDkyIDE4My45MTkgQyA2NzUuODc1IDE5MC41MTQgNzAyLjkxNCAxOTcuMzggNzMxLjgxOSAyMDEuNzY1IEMgODMyLjAxNiAyMTYuMTkzIDkzMy4yIDIyMi42NTYgMTAzNC40MiAyMjEuMDkyIEMgMTA5MC42MSAyMTkuMzkzIDExNDYuNzQgMjE2LjAxMyAxMjAyLjczIDIxMC45NTQgQyAxMjk5LjcgMjAzLjE2NiAxNDA4LjA1IDE4OC43ODIgMTUwMS41MyAxNjAuMTc0IEMgMTUxOC40IDE1NS4wMSAxNTM3LjAxIDE0Ny45MzQgMTU1NC4wOCAxNDIuMjk4IEMgMTU3My41MiAxMzUuODc4IDE1OTguNTIgMTI4LjkwNCAxNjE2LjY3IDEyMC40MzMgQyAxNjUxLjggMTA0LjAzNCAxNjg2LjkzIDg2LjIwMjcgMTcyMi43MyA3MS4xODMyIEMgMTczMS40OSA2Ny41MTA2IDE3NDIuNjkgNjIuMjc1NiAxNzUxLjc1IDYwLjIwMzMgeiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJyZ2IoMjMwLDE1MSw4MikiIGQ9Ik0gMTAyMS43MiA0NjkuODE2IEMgMTAzMS45MyA0NjEuMjk3IDEwNDEuNTggNDUxLjY3NiAxMDUxLjYxIDQ0Mi44NDQgQyAxMTQ1LjY1IDM1OS45OTIgMTI1MS4yNiAzMTIuNzMzIDEzNzguNTIgMzI0LjI3NSBDIDE0NzMuODQgMzMyLjA3MyAxNTYzLjIyIDM3My43MDkgMTYzMC41MSA0NDEuNjU4IEMgMTY1OC43IDQ3MC4yMDMgMTY2OS42MyA0ODYuNDcgMTY4OS4yMSA1MjAuNDE1IEMgMTc4Mi43MyA2ODMuMTQ0IDE3NTQuOTQgODgzLjU2MiAxNjA3LjA1IDEwMDMuNjggQyAxNTI1Ljg3IDEwNjkuNjEgMTQyMi42OSAxMDk3LjYgMTMxOC45OSAxMDg4LjI5IEMgMTI2OS41IDEwODMuODUgMTE3OC43OCAxMDUyLjM0IDExMzkuNTkgMTAyMS43NiBDIDExMTYuNDIgMTA2MC45OSAxMDg2LjMxIDEwOTcuMTkgMTA0OC4zOCAxMTIzIEMgMTAyNy4xOCAxMTM4LjEzIDEwMTIuMTEgMTEyOS4zNiA5OTMuNDMyIDExMTUuNjQgQyA5NTcuMjA0IDEwODkuMDMgOTMwLjkzNiAxMDU0LjI1IDkwNy44NzMgMTAxNi4zIEMgODM0LjMyIDEwNjQuMDIgNzM4LjcyMiAxMDk3LjEgNjQ5Ljg4NyAxMDg4LjMyIEMgNjM1LjU2OCAxMDg2LjkgNjIxLjMxNyAxMDg0LjQgNjA3LjI0MSAxMDgxLjM5IEMgNTA1LjYzNyAxMDYwLjY5IDQxNi42MjcgOTk5Ljk5OSAzNjAuMjQ5IDkxMi45NzMgQyAyNDcuMzEyIDczOC40NzkgMzE2Ljc5OSA0OTIuMDAzIDQ4OC41MDggMzgzLjAzNyBDIDU3Ni44NTcgMzI2Ljk3IDY4NC41OTEgMzA5LjM2MyA3ODYuNDkzIDMzMi41ODQgQyA4ODEuMjA4IDM1NC4wOCA5NTEuMzk2IDQwNi4xMzIgMTAyMS43MiA0NjkuODE2IHoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgZmlsbD0icmdiKDI1NCwyMTUsNTUpIiBkPSJNIDkwNy44NzMgMTAxNi4zIEMgOTAxLjA2MSAxMDAyLjg3IDg4Mi4wMDMgOTY5LjU2MyA4ODcuODYxIDk1NS42MjQgQyA4OTAuOTI2IDk0OC4zMzIgOTExLjcyOCA5MjQuMTU3IDkxOC4wNjIgOTE0LjgxIEMgOTMwLjYyNyA4OTYuMjY2IDk1My4yMTggODc2LjY1IDk3My44OTYgODY3Ljk3NSBDIDEwMDMuNjMgODU1LjE2NiAxMDM4Ljg2IDg1Mi45NzEgMTA2OS40MSA4NjQuNDMyIEMgMTEwMy4zOCA4NzcuMTgxIDExMjAuOTYgOTAzLjg5IDExNDIuMjggOTMwLjYwMyBDIDExNjMuMzIgOTU2Ljk3NiAxMTcwLjM4IDk1Ni4zOTcgMTE1NC43MiA5OTEuNDA3IEMgMTE1MC4wOSAxMDAxLjczIDExNDUuMDQgMTAxMS44NSAxMTM5LjU5IDEwMjEuNzYgQyAxMTE2LjQyIDEwNjAuOTkgMTA4Ni4zMSAxMDk3LjE5IDEwNDguMzggMTEyMyBDIDEwMjcuMTggMTEzOC4xMyAxMDEyLjExIDExMjkuMzYgOTkzLjQzMiAxMTE1LjY0IEMgOTU3LjIwNCAxMDg5LjAzIDkzMC45MzYgMTA1NC4yNSA5MDcuODczIDEwMTYuMyB6Ii8+Cgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJyZ2IoNjksMjMsMCkiIGQ9Ik0gMTM1Ni41NyA1NTUuNTc5IEMgMTQ0MS45NSA1NTEuMjQ5IDE1MTQuNyA2MTYuOTA5IDE1MTkuMTEgNzAyLjI4OCBDIDE1MjMuNTMgNzg3LjY2NiAxNDU3Ljk0IDg2MC40OCAxMzcyLjU3IDg2NC45NzkgQyAxMjg3LjA3IDg2OS40ODUgMTIxNC4xNCA4MDMuNzg1IDEyMDkuNzEgNzE4LjI4NyBDIDEyMDUuMjkgNjMyLjc4OCAxMjcxLjA3IDU1OS45MTYgMTM1Ni41NyA1NTUuNTc5IHoiLz4KCjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIGZpbGw9InJnYig2OSwyMywwKSIgZD0iTSA2NzkuNzkgNTU2LjQ5NCBDIDc2NC42NjYgNTU0LjE2MyA4MzUuMzggNjIxLjAzOSA4MzcuNzg2IDcwNS45MTIgQyA4NDAuMTkxIDc5MC43ODUgNzczLjM3OCA4NjEuNTU4IDY4OC41MDcgODY0LjAzOSBDIDYwMy41MzEgODY2LjUyMiA1MzIuNjUgNzk5LjYwOCA1MzAuMjQxIDcxNC42MjkgQyA1MjcuODMzIDYyOS42NSA1OTQuODA5IDU1OC44MjggNjc5Ljc5IDU1Ni40OTQgeiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJyZ2IoMjMwLDE1MSw4MikiIGQ9Ik0gMzMwLjY1MyAxNTQuMTY5IEMgMzQ5LjQyMyAxNTIuNTE1IDM3Ny4yMyAxNjYuMjY1IDM5My44NDUgMTc1LjM3IEMgNDQ2LjI4NSAyMDQuMTA4IDQ5NC42MiAyMTcuOTQ4IDU1Mi4yMTIgMjMzLjA3IEMgNTA3LjQ3MSAyNTEuNjc3IDQ2NC4yNjMgMjczLjc3MyA0MjIuOTg1IDI5OS4xNTIgQyAzNzcuMTQ5IDMyNi4yMTUgMzMyLjc1OCAzNTQuMDc2IDI5Mi40NzkgMzg5LjI5NyBDIDI5My4zMjUgMzU1LjI3MiAzMTcuOTY1IDE3NC42OTUgMzMwLjY1MyAxNTQuMTY5IHoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgZmlsbD0icmdiKDIzMCwxNTEsODIpIiBkPSJNIDE3MTQuNSAxNTMuMTk0IEMgMTcxNy43MiAxNTMuMjU4IDE3MTcuNTggMTUzLjA3NCAxNzIwLjI2IDE1NC43OTIgQyAxNzMyLjE3IDE3My44MSAxNzUyLjk3IDM1Mi44NTYgMTc1NS43IDM4NS44MTYgQyAxNzUwLjQzIDM4Mi4xMDYgMTc0NC45NyAzNzcuNTI4IDE3MzkuOTcgMzczLjQzIEMgMTcwNi40MiAzNDUuOTEgMTY3Mi4xMiAzMjAuODUzIDE2MzQuOCAyOTguNjk4IEMgMTYyNC4yNyAyOTEuNTQ4IDE2MDkuOCAyODMuNzA4IDE1OTguNzQgMjc3LjM0OSBDIDE1NjcuMjIgMjU5LjIzOCAxNTM3LjE1IDI0NC4xOCAxNTAzLjUzIDIzMC42OTkgQyAxNTA4Ljc3IDIyOS4yODQgMTUxNS4xNSAyMjcuOTc2IDE1MjAuNSAyMjYuOTMzIEMgMTU2NS40NCAyMTguMTYgMTYwNS4yOCAyMDAuNTA4IDE2NDYuNSAxODAuOTk1IEMgMTY2Ni4yMiAxNzEuNjU5IDE2OTMuMzYgMTU2Ljc0NyAxNzE0LjUgMTUzLjE5NCB6Ii8+CjxwYXRoIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiIGZpbGw9InJnYigyMzAsMTUxLDgyKSIgZD0iTSAxMTYyLjY1IDE1MjcuMjMgQyAxMTY3LjIzIDE1MjguMzMgMTE3My43IDE1MzAuOTIgMTE3OC4xOSAxNTMyLjY4IEMgMTI0NC40MiAxNTU4LjU4IDEzMjEuNjcgMTU2Mi4wMiAxMzg2LjY4IDE1MzAuNjYgQyAxMzg5LjkzIDE1MjkuMDkgMTM5MS4yNyAxNTI5LjI0IDEzOTQuMjggMTUzMC41MSBDIDE0MDQuMjMgMTU0Mi42NSAxMzgwLjYgMTU4MS44OCAxMzcyLjc4IDE1OTIuNTMgQyAxMzY1LjQ2IDE2MDEuNTggMTM1Ny4yNiAxNjA5Ljg5IDEzNDguMyAxNjE3LjM0IEMgMTI3NS41NSAxNjc2LjkxIDExNTIuODggMTYyMS4xOCAxMTYyLjY1IDE1MjcuMjMgeiIvPgo8cGF0aCB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLDApIiBmaWxsPSJyZ2IoMjMwLDE1MSw4MikiIGQ9Ik0gMTEzNS4xNCAxNjk1Ljk4IEMgMTEzOS43MiAxNjk2Ljg5IDExNDEuMyAxNzAxLjIzIDExNDAuNzEgMTcwNS40NSBDIDExMjYuMjYgMTgwOS41NSAxMDAwLjE1IDE4NDcuNSA5MzEuOTU2IDE3NjYuMzggQyA5MTQuOTY1IDE3NDQuODcgOTA5LjAxNCAxNzIyLjYyIDkwNi44MjUgMTY5NS45OSBDIDkyMS4wOTMgMTcwMS42OSA5MzkuOTA4IDE3MDkuOTYgOTU0LjEzOCAxNzE0LjU1IEMgOTk0Ljk5MiAxNzI3Ljg1IDEwMzguOTMgMTcyOC4zOSAxMDgwLjEgMTcxNi4xMSBDIDEwOTguNDggMTcxMC41MiAxMTE2LjU2IDE3MDIuMTIgMTEzNS4xNCAxNjk1Ljk4IHoiLz4KPHBhdGggdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSIgZmlsbD0icmdiKDIzMCwxNTEsODIpIiBkPSJNIDg4NC45MDggMTUyOS45NCBMIDg4Ni4xMjIgMTUzMS4xMyBDIDg4OC45NzYgMTU0MS4yNyA4ODMuMzkgMTU1Ni44NyA4NzkuMzM2IDE1NjYuNDYgQyA4NzAuNzYgMTU4Ni43NCA4NTYuMTUxIDE2MDUuMzEgODM4LjUzOSAxNjE4LjU1IEMgODEzLjkxMyAxNjM3LjMgNzgyLjc1NCAxNjQ1LjI5IDc1Mi4xNDcgMTY0MC43MSBDIDcxOS4zNyAxNjM1Ljk4IDY5OC4zNDIgMTYyMi43MSA2NzkuMDc0IDE1OTYuNzEgQyA2NzIuMTU2IDE1ODYuMDEgNjQ3LjgwOCAxNTQyLjc5IDY1OC40NSAxNTMyLjA3IEMgNjY0LjYwMyAxNTMxLjYxIDY3OS43MTkgMTUzOCA2ODYuMzM2IDE1NDAuNzggQyA3MjkuODUzIDE1NTkuMDUgNzg4LjEzNSAxNTU4LjI3IDgzMy42NTMgMTU0OC43OSBDIDg0Ny41MzggMTU0NS45IDg3MS41MTQgMTUzNS44OSA4ODQuOTA4IDE1MjkuOTQgeiIvPgo8L3N2Zz4=") 24 24, pointer !important; }

  /* ---------- บ้านของหนู (My House — 3D Three.js) ---------- */
  /* ปุ่มเข้าใน hero หน้าเลือกหมวด (ตำแหน่งชั่วคราวตามข้อเสนอ 1 — รอผู้ใช้ยืนยัน อาจย้ายได้) */
  .house-entry-btn{
    margin-top:14px; display:inline-flex; align-items:center; gap:8px;
    background:linear-gradient(135deg,#FFB74D,#FF8A65); color:#fff;
    border:none; border-radius:999px; padding:12px 26px;
    font-family:inherit; font-size:clamp(17px,4.4vw,21px); font-weight:800;
    box-shadow:var(--shadow-btn); cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  /* บรรทัดนี้จริงๆ แล้ว "ไม่จำเป็น" (เคยเข้าใจผิดว่าจำเป็นตอนปิด HOUSE_FEATURE_OFF v2.0.0 แล้วเทสยืนยันแล้วว่าผิด)
     UA stylesheet ของเบราว์เซอร์คือ [hidden]:not([hidden=until-found i]){display:none !important}
     มี !important จึงชนะ display เดิมของ author เสมอ ไม่ว่า specificity จะเป็นเท่าไหร่
     ⇒ attribute hidden ใช้ซ่อนปุ่มได้เองอยู่แล้ว (เหมือน .icon-btn ที่เป็น display:flex ก็ซ่อนด้วย hidden ได้)
     คงบรรทัดไว้เฉยๆ ไม่มีผลเสีย ลบทิ้งได้ถ้าอยากเก็บกวาด */
  .house-entry-btn[hidden]{display:none;}
  .house-entry-btn:hover{transform:translateY(-2px) scale(1.03);}
  .house-entry-btn:active{transform:scale(.97);}
  .house-entry-icon{width:1.6em; height:1.6em; display:block;}
  .house-entry-new{
    font-size:.62em; font-weight:800; background:#fff; color:#FF7043;
    border-radius:999px; padding:2px 9px;
  }
  .house-entry-desc{
    margin-top:10px; font-size:clamp(13.5px,3.4vw,15.5px); font-weight:600;
    color:var(--ink-soft); line-height:1.55; transition:color 2s ease;
  }
  body.night-mode .house-entry-desc{color:#C9D3F5;}

  /* view เต็มจอแบบเดียวกับ #ar-view — พื้นหลังโปร่งใสให้เห็นท้องฟ้ากลางวัน/กลางคืนของธีมจริง
     (แบบ ar-mobile-nocam) จึงต้องซ่อน header/footer chrome ที่จะทะลุเข้ามา */
  body.house-open{overflow:hidden;}
  body.house-open .app-header,
  body.house-open footer{display:none;}
  body.house-open .install-link-btn{display:none;}
  body.house-open .owl-widget{display:none;}
  #house-view{position:fixed; inset:0; z-index:70; display:block; isolation:isolate; background:transparent;}
  #house-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:1; touch-action:none; display:block;}
  .house-overlay-ui{
    position:relative; z-index:6; min-height:100vh; min-height:100dvh;
    display:flex; flex-direction:column; padding:14px 14px calc(24px + env(safe-area-inset-bottom));
    pointer-events:none;
  }
  .house-overlay-ui .quiz-top{pointer-events:auto;}
  .house-label-chip{
    background:rgba(255,255,255,.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    display:inline-flex; align-items:center; gap:7px; padding:4px 14px; border-radius:999px;
  }
  .house-label-icon{width:21px; height:21px;}
  .house-hint{
    position:fixed; bottom:calc(18px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
    margin:0; z-index:8; pointer-events:none; transition:opacity .6s ease;
  }
  .house-hint.fade-out{opacity:0;}
  /* ป้ายพิกัดมุมขวาล่าง — บอกช่อง (x,z) ที่ตัวละครยืนอยู่ ไว้ใช้ดูตำแหน่งตอนทดสอบแผนที่ */
  .house-pos-chip{
    position:fixed; right:14px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:8;
    padding:5px 12px; border-radius:999px; pointer-events:none;
    background:rgba(255,255,255,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    box-shadow:0 3px 10px rgba(70,40,10,.16);
    font-size:.86rem; font-weight:800; color:var(--ink); letter-spacing:.3px; white-space:nowrap;
  }
  .house-pos-chip[hidden]{display:none;}
  body.night-mode .house-pos-chip{background:rgba(35,42,74,.72); color:#f2f6ff;}
  @media (max-width:480px){ .house-pos-chip{right:10px; font-size:.78rem; padding:4px 10px;} }
  /* เข็มทิศมุมซ้ายล่าง — เข็มชี้ทางบ้าน (JS หมุน #hc-needle ทุกเฟรม) กดแล้วเดินกลับบ้าน */
  .house-compass{
    position:fixed; left:14px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:8;
    width:62px; height:62px; padding:0; border:none; border-radius:50%;
    background:rgba(255,255,255,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    box-shadow:0 4px 14px rgba(70,40,10,.18); cursor:pointer; pointer-events:auto;
    display:flex; align-items:center; justify-content:center;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .house-compass[hidden]{display:none;}
  .house-compass:active{transform:scale(.92);}
  .house-compass svg{width:100%; height:100%; display:block;}
.house-compass .hc-labels text{font-family:inherit; font-size:10px; font-weight:800;}
  body.night-mode .house-compass{background:rgba(35,42,74,.72);}
  @media (max-width:480px){ .house-compass{width:52px; height:52px; left:10px;} }
  /* ---- ยอดเงินนกฮูก: ป้ายกลมยาวข้างเข็มทิศ (โชว์เฉพาะตอนเดินเล่นในโหมดบ้าน) ---- */
  .house-coins{
    position:fixed; left:86px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:8;
    display:flex; align-items:center; gap:7px;
    padding:7px 15px 7px 8px; border-radius:999px;
    background:rgba(255,255,255,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    box-shadow:0 4px 14px rgba(70,40,10,.18);
    color:#8a5a1c; font-size:17px; font-weight:900; line-height:1;
    pointer-events:none; user-select:none; -webkit-user-select:none;
  }
  .house-coins[hidden]{display:none;}
  .house-coins .owl-coin{width:30px; height:30px; display:block; filter:drop-shadow(0 1.5px 1.5px rgba(120,70,10,.28));}
  body.night-mode .house-coins{background:rgba(35,42,74,.72); color:#ffd98a;}
  /* ได้/ใช้เงิน → เด้งหนึ่งครั้งให้เด็กสังเกตเห็น */
  .house-coins.coin-bump{animation:coinBump .42s ease;}
  @keyframes coinBump{
    0%{transform:scale(1);} 35%{transform:scale(1.16);} 70%{transform:scale(.97);} 100%{transform:scale(1);}
  }
  @media (max-width:480px){
    .house-coins{left:70px; font-size:15px; padding:6px 12px 6px 7px;}
    .house-coins .owl-coin{width:26px; height:26px;}
  }
  /* แถบปุ่มควบคุม (ธีม/เพลง/เสียง/เต็มจอ) — คอลัมน์ลอยขวาใต้แถบบน ใช้ .icon-btn ชุดเดียวกับ header */
  .house-ctrl-wrap{
    position:fixed; right:14px; top:78px; z-index:8;
    display:flex; flex-direction:column; gap:10px; pointer-events:auto;
  }
  /* ป้ายชื่อตัวละคร (ชื่อเด็ก) ลอยเหนือหัว — ตำแหน่ง JS อัปเดตทุกเฟรมจาก projection 3D */
  .house-char-name{
    position:fixed; z-index:5; transform:translate(-50%,-100%);
    background:rgba(255,255,255,.88); color:var(--ink);
    font-size:14.5px; font-weight:800; line-height:1;
    padding:6px 13px; border-radius:999px; box-shadow:0 2px 8px rgba(70,40,10,.15);
    pointer-events:none; white-space:nowrap;
  }
  .house-char-name[hidden]{display:none;}

  /* แผงสร้างตัวละคร — bottom sheet โปร่งๆ ตัวละคร 3D โชว์บนพื้นที่ว่างด้านบน */
  .house-creator{
    position:absolute; z-index:7; left:50%; bottom:0; transform:translateX(-50%);
    width:min(600px,100vw); max-height:56vh; max-height:56dvh;
    display:flex; flex-direction:column;
  }
  .house-creator[hidden]{display:none;}
  .house-creator-panel{
    background:rgba(255,255,255,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-radius:26px 26px 0 0; box-shadow:0 -6px 24px rgba(70,40,10,.18);
    padding:16px 18px calc(14px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; gap:8px; overflow:hidden;
  }
  .house-creator-title{font-size:clamp(19px,4.6vw,23px); font-weight:800; color:var(--ink); text-align:center;}
  .house-creator-sub{font-size:14.5px; font-weight:600; color:var(--ink-soft); text-align:center;}
  .house-creator-rows{overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px 2px 8px; min-height:0;}
  .house-row-label{font-size:15.5px; font-weight:800; color:var(--ink); margin-bottom:4px; display:flex; align-items:center; gap:7px;}
  .house-row-ic{flex:0 0 auto; width:24px; height:24px; display:inline-flex;}
  .house-row-ic svg{width:100%; height:100%; display:block;}
  .house-title-ic{width:1.2em; height:1.2em; vertical-align:-.22em; display:inline-block;}
  .house-btn-ic{width:22px; height:22px; display:block;}
  .house-done-ic{width:1.15em; height:1.15em; vertical-align:-.2em; display:inline-block;}
  .house-chip-wrap{display:flex; flex-wrap:wrap; gap:8px;}
  .house-chip{
    min-width:42px; height:42px; border-radius:14px; border:3px solid rgba(0,0,0,.08);
    background:#F6EFE3; color:var(--ink); font-family:inherit; font-size:16px; font-weight:800;
    cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0 10px;
    transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  }
  .house-chip:active{transform:scale(.92);}
  .house-chip.active{border-color:#33B7EE; box-shadow:0 0 0 3px rgba(51,183,238,.25); transform:scale(1.06);}
  .house-chip-color{padding:0; width:42px;}
  .house-done-btn{
    border:none; border-radius:999px; padding:13px 22px; margin-top:2px;
    background:linear-gradient(135deg,#66BB6A,#43A047); color:#fff;
    font-family:inherit; font-size:clamp(17px,4.4vw,20px); font-weight:800;
    box-shadow:var(--shadow-btn); cursor:pointer; transition:transform .15s ease;
  }
  .house-done-btn:active{transform:scale(.96);}

  /* ---------- สัตว์เลี้ยง (บ้านของหนู เฟส 2) ---------- */
/* grid ช่องกว้างเท่ากันทุกใบ (flex-wrap เดิมทำให้ใบสั้น/ยาวไม่เท่ากันตามชื่อสัตว์)
   ตัวการ์ดต้อง min-width:0 กันชื่อยาวดันคอลัมน์ overflow (บทเรียนเดียวกับ #emoji-picker) */
#house-pet-chips{display:grid; grid-template-columns:repeat(auto-fill, minmax(78px,1fr));}
.house-chip.house-pet-chip{flex-direction:column; gap:2px; height:auto; min-width:0; padding:8px 4px;}
.house-pet-chip-emoji{font-size:26px; line-height:1;}
.house-pet-chip-name{font-size:12.5px; font-weight:800;}
.house-pet-name-input{
  width:100%; box-sizing:border-box; border:3px solid rgba(0,0,0,.08); border-radius:14px;
  background:#FFF9EE; color:var(--ink); font-family:inherit;
  font-size:17px; font-weight:800; padding:10px 14px; outline:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.house-pet-name-input:focus{border-color:#33B7EE; box-shadow:0 0 0 3px rgba(51,183,238,.2);}
.house-pet-alt-row{display:flex; gap:10px; justify-content:center; margin-top:8px; flex-wrap:wrap;}
.house-pet-alt-btn{
  border:none; border-radius:999px; padding:9px 16px;
  background:#F1E7D6; color:var(--ink-soft); font-family:inherit;
  font-size:14.5px; font-weight:800; cursor:pointer; transition:transform .12s ease;
}
.house-pet-alt-btn:active{transform:scale(.94);}
.house-pet-name{font-size:12.5px;}          /* ป้ายชื่อสัตว์เล็กกว่าชื่อเด็กหน่อย */
.house-pet-bubble{
  position:fixed; z-index:5; transform:translate(-50%,-100%) scale(.4);
  background:rgba(255,255,255,.92); border-radius:14px; padding:3px 9px;
  font-size:19px; line-height:1.25; box-shadow:0 2px 8px rgba(70,40,10,.15);
  opacity:0; pointer-events:none; transition:opacity .2s ease;
}
.house-pet-bubble.on{opacity:1; animation:petBubblePop .3s ease forwards;}
@keyframes petBubblePop{
  0%{transform:translate(-50%,-100%) scale(.4);}
  60%{transform:translate(-50%,-100%) scale(1.15);}
  100%{transform:translate(-50%,-100%) scale(1);}
}

/* ม่าน fade ขาวตอนเปลี่ยนฉาก/สลับโหมด — .5s ให้รู้สึกนุ่ม ไม่กระตุก */
  .house-fade{
    position:absolute; inset:0; z-index:9; background:#FFF7E8; opacity:0;
    pointer-events:none; transition:opacity .5s ease;
  }
  .house-fade.on{opacity:1;}

  /* ---------- หน้าจอโหลดตอนเข้าบ้านของหนู ----------
     ครั้งแรกที่เข้าเกมต้องสร้างโมเดลทั้งเมือง (หลายพันชิ้น) หน้าจอจะค้างไปสักครู่
     จึงโชว์หน้านี้คั่นไว้ก่อน แล้วค่อยทำงานหนักทีละก้อน (ดู startHouseGame ใน js/house.js)
     ธีมเดียวกับท้องฟ้าหน้าหลัก + โลโก้บ้านตัวเดียวกับปุ่มเข้าเกม (assets/icons/my-house.svg) */
  .house-loading{
    position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center;
    overflow:hidden; opacity:1; transition:opacity .38s ease;
    background:
      radial-gradient(600px circle at 84% -6%, rgba(255,247,214,.7), rgba(255,247,214,0) 60%),
      linear-gradient(180deg, #5FB2EF 0%, #8ED0F5 42%, #C3E9FB 74%, #EAF8FF 100%);
  }
  .house-loading[hidden]{display:none;}          /* .house-loading มี display:flex ต้องกด hidden เอง */
  .house-loading.done{opacity:0;}
  body.night-mode .house-loading{
    background:
      radial-gradient(520px circle at 82% -4%, rgba(180,200,255,.28), rgba(180,200,255,0) 62%),
      linear-gradient(180deg, #17224A 0%, #24346B 48%, #354A86 100%);
  }
  .hl-sky{position:absolute; inset:0; pointer-events:none;}
  .hl-cloud{
    position:absolute; width:120px; height:38px; border-radius:999px; background:rgba(255,255,255,.85);
    box-shadow:34px -14px 0 -6px rgba(255,255,255,.85), -32px -10px 0 -9px rgba(255,255,255,.85);
    animation:hlDrift 14s linear infinite;
  }
  /* หน่วงติดลบ = เมฆลอยอยู่กลางจอตั้งแต่เฟรมแรก ไม่ต้องรอลอยเข้ามาจากขอบซ้าย */
  .hl-cloud1{top:15%; left:-22%; transform:scale(.9); animation-delay:-5s;}
  .hl-cloud2{top:33%; left:-40%; transform:scale(.62); animation-duration:19s; opacity:.75; animation-delay:-12s;}
  .hl-cloud3{top:72%; left:-30%; transform:scale(1.15); animation-duration:23s; opacity:.6; animation-delay:-17s;}
  body.night-mode .hl-cloud{background:rgba(190,205,245,.32); box-shadow:34px -14px 0 -6px rgba(190,205,245,.32), -32px -10px 0 -9px rgba(190,205,245,.32);}
  @keyframes hlDrift{ to{ left:130%; } }

  .hl-box{position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:12px; padding:0 24px; text-align:center;}
  .hl-badge{position:relative; width:184px; height:184px; display:flex; align-items:center; justify-content:center;}
  .hl-ring{
    position:absolute; inset:0; border-radius:50%;
    border:6px dashed rgba(255,255,255,.9); animation:hlSpin 5.5s linear infinite;
  }
  body.night-mode .hl-ring{border-color:rgba(190,210,255,.5);}
  @keyframes hlSpin{ to{ transform:rotate(360deg); } }
  .hl-house{
    width:120px; height:120px; position:relative; z-index:2;
    animation:hlHop 1.15s ease-in-out infinite;
    filter:drop-shadow(0 6px 10px rgba(60,40,10,.22));
  }
  @keyframes hlHop{ 0%,100%{transform:translateY(0) scale(1,1);} 42%{transform:translateY(-14px) scale(.97,1.03);} 70%{transform:translateY(0) scale(1.04,.96);} }
  .hl-ground{
    position:absolute; bottom:18px; width:80px; height:14px; border-radius:50%;
    background:rgba(60,40,10,.18); animation:hlShad 1.15s ease-in-out infinite;
  }
  body.night-mode .hl-ground{background:rgba(10,16,40,.4);}
  @keyframes hlShad{ 0%,100%{transform:scale(1); opacity:.55;} 42%{transform:scale(.72); opacity:.3;} }
  .hl-spark{position:absolute; font-size:1.4rem; animation:hlTwinkle 1.8s ease-in-out infinite;}
  .hl-spark1{top:4px; right:6px;}
  .hl-spark2{bottom:16px; left:0; font-size:1.1rem; animation-delay:.6s;}
  .hl-spark3{top:24px; left:-4px; font-size:1rem; animation-delay:1.1s;}
  @keyframes hlTwinkle{ 0%,100%{transform:scale(.7) rotate(-8deg); opacity:.35;} 50%{transform:scale(1.15) rotate(8deg); opacity:1;} }

  /* การ์ดขาวมนๆ ให้ตัวหนังสืออ่านง่ายบนท้องฟ้าสีอ่อน (สไตล์เดียวกับการ์ดอื่นในแอป) */
  .hl-card{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    width:min(88vw,340px); background:rgba(255,255,255,.92); border-radius:26px; padding:16px 22px 18px;
    box-shadow:0 10px 0 rgba(96,140,180,.25), 0 14px 26px rgba(40,80,120,.18);
  }
  body.night-mode .hl-card{background:rgba(31,44,86,.92); box-shadow:0 10px 0 rgba(10,16,42,.5), 0 14px 26px rgba(4,8,24,.5);}
  .hl-title{font-size:1.72rem; font-weight:900; color:var(--ink); letter-spacing:.5px;}
  .hl-text{font-size:1.02rem; font-weight:800; color:var(--ink-soft); min-height:1.4em;}
  body.night-mode .hl-title{color:#FFE9B8;}
  body.night-mode .hl-text{color:#D6E2FF;}
  .hl-bar{
    width:100%; height:20px; border-radius:999px; overflow:hidden;
    background:rgba(140,190,225,.28); box-shadow:inset 0 2px 5px rgba(60,40,10,.18);
  }
  body.night-mode .hl-bar{background:rgba(12,20,48,.45);}
  .hl-bar-fill{
    display:block; width:6%; height:100%; border-radius:999px;
    background:linear-gradient(90deg, #ffd54f, #ff9f5a); transition:width .3s ease;
    box-shadow:inset 0 5px 0 -2px rgba(255,255,255,.55);      /* ไฮไลต์บนหลอดให้ดูนูนมนแบบของเล่น */
  }
  .hl-dots{display:flex; gap:8px;}
  .hl-dots span{width:10px; height:10px; border-radius:50%; background:#8ecbf0; animation:hlBounce 1s ease-in-out infinite;}
  .hl-dots span:nth-child(2){animation-delay:.15s;}
  .hl-dots span:nth-child(3){animation-delay:.3s;}
  body.night-mode .hl-dots span{background:#7f93cf;}
  @keyframes hlBounce{ 0%,100%{transform:translateY(0); opacity:.55;} 45%{transform:translateY(-7px); opacity:1;} }
  @media (max-width:480px){
    .hl-badge{width:140px; height:140px;}
    .hl-house{width:92px; height:92px;}
    .hl-title{font-size:1.42rem;}
    .hl-text{font-size:.95rem;}
    .hl-card{padding:14px 20px 16px; border-radius:22px;}
  }
  @media (prefers-reduced-motion:reduce){
    .hl-cloud, .hl-ring, .hl-house, .hl-ground, .hl-spark, .hl-dots span{animation:none;}
  }

  @media (max-width:480px){
    .house-creator{max-height:60vh; max-height:60dvh;}
    .house-chip{min-width:38px; height:38px; border-radius:12px;}
    .house-chip-color{width:38px;}
  }
  /* ปุ่มหมุนตัวละครในหน้าสร้างตัวละคร (แทน auto-rotate ตามคำขอผู้ใช้)
     มือถือ: แยกชิดขอบซ้าย-ขวาของจอ (ตรงกลางเป็นตัวละคร วางคู่กลางจะทับเท้า)
     จอใหญ่ (≥768px override ด้านล่าง): คู่กลางใต้ตัวละครฝั่งซ้าย */
  .house-rotate-wrap{
    position:absolute; z-index:7; display:flex; justify-content:space-between;
    left:0; right:0; padding:0 16px; pointer-events:none;
    bottom:calc(56vh + 70px); bottom:calc(56dvh + 70px);
  }
  .house-rotate-wrap[hidden]{display:none;}
  .house-rotate-btn{
    width:56px; height:56px; border-radius:50%; border:3px solid rgba(0,0,0,.08);
    background:rgba(255,255,255,.92); color:var(--ink);
    font-family:inherit; font-size:28px; font-weight:800; line-height:1;
    box-shadow:var(--shadow-btn); cursor:pointer; pointer-events:auto;
    display:inline-flex; align-items:center; justify-content:center;
    transition:transform .12s ease;
  }
  .house-rotate-btn:active{transform:scale(.9);}
  @media (max-width:480px){
    .house-rotate-wrap{bottom:calc(60vh + 70px); bottom:calc(60dvh + 70px);}
    .house-rotate-btn{width:48px; height:48px; font-size:24px;}
  }
  /* ---------- เฟส 3: โหมดตกแต่งบ้าน (edit) ---------- */
  /* ซ่อนปุ่มบนที่ไม่เกี่ยวตอนตกแต่ง (คงปุ่มย้อนกลับ = ปิดโหมดตกแต่ง) */
  body.house-edit #house-pet-btn,
  body.house-edit #house-edit-btn,
  body.house-edit #house-decorate-btn{display:none;}

  /* กล่องเลือกของ — ลิ้นชักด้านล่าง */
  .house-edit-panel{
    position:fixed; left:0; right:0; bottom:0; z-index:8; pointer-events:auto;
    background:rgba(255,255,255,.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border-radius:24px 24px 0 0; box-shadow:0 -6px 24px rgba(70,40,10,.18);
    padding:10px 12px calc(12px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; gap:8px; max-height:46vh; max-height:46dvh;
  }
  .house-edit-panel[hidden]{display:none;}
  .he-panel-title{font-size:14.5px; font-weight:800; color:var(--ink); text-align:center;}
  .he-tabs{display:flex; gap:7px; overflow-x:auto; padding:2px 2px 4px; -webkit-overflow-scrolling:touch;}
  .he-tab{
    flex:0 0 auto; border:3px solid rgba(0,0,0,.06); border-radius:14px; padding:6px 12px;
    background:#F6EFE3; color:var(--ink); font-family:inherit; font-size:13.5px; font-weight:800;
    display:inline-flex; align-items:center; gap:5px; cursor:pointer;
    transition:transform .1s ease, border-color .12s ease, box-shadow .12s ease;
  }
  .he-tab:active{transform:scale(.94);}
  .he-tab.active{border-color:#33B7EE; box-shadow:0 0 0 3px rgba(51,183,238,.22); background:#EAF7FE;}
  .he-tab-emoji{font-size:17px; line-height:1;}
  .he-items{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(72px,1fr)); gap:8px;
    overflow-y:auto; padding:4px 2px 2px; min-height:0;
  }
  .he-item{
    border:3px solid rgba(0,0,0,.06); border-radius:16px; padding:8px 4px 6px;
    background:#FFF9EE; color:var(--ink); font-family:inherit; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    transition:transform .1s ease, border-color .12s ease;
  }
  .he-item:active{transform:scale(.9);}
  .he-item:hover{border-color:#FFCF7A;}
  .he-item-emoji{font-size:28px; line-height:1;}
  .he-item-name{font-size:11.5px; font-weight:800; text-align:center; line-height:1.15;}

  /* แถบเครื่องมือชิ้นที่เลือก (ลอยเหนือกล่อง panel) */
  .house-edit-toolbar{
    position:fixed; left:50%; transform:translateX(-50%); z-index:9; pointer-events:auto;
    bottom:calc(46vh + 12px); bottom:calc(46dvh + 12px);
    display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
    background:rgba(255,255,255,.96); border-radius:999px; padding:6px 10px;
    box-shadow:0 6px 20px rgba(70,40,10,.2); max-width:94vw;
  }
  .house-edit-toolbar[hidden]{display:none;}
  .he-colors{display:flex; gap:5px; flex-wrap:wrap; max-width:60vw;}
  .he-color{
    width:26px; height:26px; border-radius:50%; border:3px solid rgba(0,0,0,.12); cursor:pointer;
    padding:0; transition:transform .1s ease;
  }
  .he-color:active{transform:scale(.86);}
  .he-color.active{border-color:#33B7EE; box-shadow:0 0 0 2px rgba(51,183,238,.3); transform:scale(1.12);}
  .he-tool-btn{
    width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
    background:#EAF7FE; font-size:20px; line-height:1; display:inline-flex; align-items:center; justify-content:center;
    box-shadow:var(--shadow-btn); transition:transform .1s ease;
  }
  .he-tool-btn:active{transform:scale(.9);}
  .he-tool-btn.he-del{background:#FFE4E1;}

  /* ปุ่มเสร็จแล้ว (ลอยกลางบน) — ใหญ่ เด่น สะดุดตา */
  .house-edit-done{
    position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:9; pointer-events:auto;
    border:4px solid #fff; border-radius:999px; padding:15px 38px; cursor:pointer;
    background:linear-gradient(135deg,#5FD36A,#2E9E44); color:#fff;
    font-family:inherit; font-size:22px; font-weight:800; letter-spacing:.3px;
    box-shadow:0 8px 22px rgba(46,158,68,.5), 0 3px 8px rgba(0,0,0,.18);
    transition:transform .12s ease, box-shadow .12s ease;
    animation:houseDonePulse 1.8s ease-in-out infinite;
  }
  .house-edit-done[hidden]{display:none;}
  .house-edit-done:hover{box-shadow:0 10px 26px rgba(46,158,68,.6), 0 3px 8px rgba(0,0,0,.2);}
  .house-edit-done:active{transform:translateX(-50%) scale(.94); animation:none;}
  @keyframes houseDonePulse{
    0%,100%{transform:translateX(-50%) scale(1);}
    50%{transform:translateX(-50%) scale(1.06);}
  }

  /* ฟองอีโมจิเหนือหัวตัวละครตอน interaction */
  .house-char-bubble{
    position:fixed; z-index:6; transform:translate(-50%,-100%) scale(.6);
    background:rgba(255,255,255,.94); border-radius:14px; padding:4px 9px;
    font-size:22px; line-height:1; box-shadow:0 3px 10px rgba(70,40,10,.15);
    opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  }
  .house-char-bubble.on{opacity:1; transform:translate(-50%,-100%) scale(1);}

  /* ---------- ชาวบ้าน (NPC) + กระดานภารกิจ (บ้านของหนู เฟส 8) ---------- */
  /* ฟองคำพูดของ NPC — กว้างกว่าฟองของเด็กเพราะมีทั้งชื่อและประโยคเต็ม */
  .house-npc-bubble{
    position:fixed; z-index:6; transform:translate(-50%,-100%) scale(.6);
    background:rgba(255,255,255,.96); border-radius:16px; padding:7px 12px;
    max-width:min(260px,72vw); text-align:center; color:var(--ink);
    box-shadow:0 4px 14px rgba(70,40,10,.2);
    opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  }
  .house-npc-bubble.on{opacity:1; transform:translate(-50%,-100%) scale(1);}
  .house-npc-bubble b{display:block; font-size:13px; font-weight:800; color:#E07A3F; margin-bottom:2px;}
  .house-npc-bubble span{display:block; font-size:14.5px; font-weight:700; line-height:1.35;}

  .hq-list{display:flex; flex-direction:column; gap:8px; overflow-y:auto; padding:2px 0; min-height:0;}
  .hq-row{
    display:flex; align-items:center; gap:10px;
    background:#F6EFE3; border-radius:16px; padding:10px 13px;
    border:3px solid transparent; transition:background .2s ease, border-color .2s ease;
  }
  .hq-row.done{background:#E4F6E0; border-color:#8ED08A;}
  .hq-ic{flex:0 0 auto; font-size:24px; line-height:1;}
  .hq-txt{flex:1 1 auto; font-size:15px; font-weight:800; color:var(--ink); line-height:1.3;}
  .hq-row.done .hq-txt{text-decoration:line-through; color:var(--ink-soft);}
  .hq-prog{
    flex:0 0 auto; font-size:14px; font-weight:800; color:#fff;
    background:#F0A14B; border-radius:999px; padding:3px 10px;
  }
  .hq-row.done .hq-prog{background:#66BB6A;}
  .hq-stars{text-align:center; font-size:15px; font-weight:800; color:#E07A3F;}
  .hq-close-btn{align-self:center; margin-top:4px;}

  @media (max-width:480px){
    .house-edit-panel{max-height:42vh; max-height:42dvh;}
    .house-edit-toolbar{bottom:calc(42vh + 10px); bottom:calc(42dvh + 10px);}
    .he-items{grid-template-columns:repeat(auto-fill, minmax(64px,1fr)); gap:6px;}
    .he-item-emoji{font-size:24px;}
  }

  /* จอใหญ่ (แท็บเล็ต/เดสก์ท็อป): แผงตัวเลือกย้ายไปชิดขวาเป็นการ์ดแนวตั้ง
     ตัวละครพรีวิวอยู่พื้นที่ว่างฝั่งซ้าย (กล้องเลื่อนให้ใน js/house.js) ไม่โดนแผง/แถบบนทับ */
  @media (min-width:768px){
    .house-creator{
      left:auto; right:18px; transform:none;
      top:80px; bottom:18px; width:min(400px,44vw);
      max-height:none;
    }
    .house-creator-panel{border-radius:26px; height:100%;}
    /* ปุ่มหมุนคู่กลางพื้นที่ว่างฝั่งซ้าย (สูตรเดียวกับตำแหน่งตัวละครใน applyCamera) */
    .house-rotate-wrap{
      left:calc((100vw - min(400px,44vw) - 36px)/2); right:auto;
      transform:translateX(-50%); justify-content:center; gap:16px; padding:0;
      bottom:26px;
    }
  }

  /* ---------- เพื่อนซี้หน้าหลัก (home buddy — ตัวละคร+สัตว์เลี้ยงจากบ้านของหนู ยืนให้กำลังใจใน hero) ---------- */
  .house-buddy{
    position:relative; display:flex; justify-content:center;
    margin:62px auto 0; width:280px; max-width:94vw;  /* เว้นหัวไว้ให้ bubble (top:-30px) ไม่ทับข้อความด้านบน */
  }
  #house-buddy-canvas{
    display:block; width:280px; height:190px; max-width:100%;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .house-buddy-bubble{
    position:absolute; top:-30px; left:50%; transform:translateX(-50%) scale(1);
    background:#fff; color:var(--ink,#5b4636);
    border-radius:16px; padding:7px 14px;
    font-size:15px; font-weight:700; line-height:1.35; text-align:center;
    max-width:min(320px,88vw); width:max-content;
    box-shadow:0 4px 12px rgba(0,0,0,.14);
    z-index:2; pointer-events:none;
    animation:hbBubblePop .35s ease;
  }
  .house-buddy-bubble::after{
    content:''; position:absolute; bottom:-7px; left:50%; transform:translateX(-50%);
    border:8px solid transparent; border-top-color:#fff; border-bottom:none;
  }
  @keyframes hbBubblePop{
    0%{transform:translateX(-50%) scale(.6); opacity:0;}
    60%{transform:translateX(-50%) scale(1.08);}
    100%{transform:translateX(-50%) scale(1); opacity:1;}
  }
  /* หัวใจ/ดาวลอยตอนแตะตัวละคร */
  .hb-float{
    position:absolute; bottom:40%; font-size:22px; z-index:3; pointer-events:none;
    animation:hbFloatUp 1.1s ease-out forwards;
  }
  @keyframes hbFloatUp{
    0%{transform:translateY(0) scale(.6); opacity:0;}
    20%{opacity:1;}
    100%{transform:translateY(-74px) scale(1.15); opacity:0;}
  }
  /* กลางคืน: bubble ยังเป็นการ์ดขาวอ่านง่าย ไม่ต้อง override สี */

  /* ============================= CLOCK GAME (นาฬิกาวิเศษ 1/2/3) ============================= */
  .clock-board{display:flex; flex-direction:column; align-items:center; gap:14px; padding:10px 8px 46px;}
  .clock-task-card{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    background:linear-gradient(180deg, #FFFDF5, #FFF3DC);
    border:4px solid var(--cat-color,#4A9EDF); border-radius:26px;
    padding:14px 26px 16px; box-shadow:0 8px 0 rgba(0,0,0,.08);
    max-width:min(640px,94vw); text-align:center;
  }
  .clock-start-chip{
    background:var(--white,#fff); border:2.5px solid var(--cat-color,#4A9EDF); border-radius:999px;
    padding:6px 18px; font-weight:800; font-size:16px; color:var(--ink);
  }
  .clock-start-chip[hidden]{display:none;}
  .clock-task-text{font-size:clamp(20px,5.5vw,27px); font-weight:800; color:var(--ink); line-height:1.4;}
  .clock-task-text b{color:var(--cat-color,#4A9EDF);}
  /* จองพื้นที่กล่อง feedback ไว้เสมอ — ไม่ให้ layout/ปุ่มตอบกระโดดตอนข้อความโผล่ (เด็กกดพลาด)
     z-index สูงกว่า .clock-frame เพราะ decor กรอบ (หูสัตว์/กลีบ/รัศมี) ยื่นขึ้นมาเหนือหน้าปัด เคยบังข้อความ */
  .clock-msg-slot{min-height:56px; display:flex; align-items:center; justify-content:center; position:relative; z-index:2;}
  .clock-msg{
    background:var(--white,#fff); border:3px solid var(--cat-color,#4A9EDF); border-radius:18px;
    padding:9px 20px; font-size:19px; font-weight:800; color:var(--ink);
    box-shadow:0 4px 0 rgba(0,0,0,.08); text-align:center; animation:qIn .3s ease;
  }
  .clock-msg[hidden]{display:none;}
  .clock-msg.ok{border-color:var(--correct,#43AA8B); background:var(--correct-l,#E2F6EE); color:#1F7A46;}
  .clock-msg.ng{border-color:var(--wrong,#E4574F); background:var(--wrong-l,#FDE4E1); color:#B23636;}

  .clock-stage{display:flex; justify-content:center; width:100%;}
  .clock-frame{
    position:relative; width:min(86vw,50vh,410px); aspect-ratio:1/1;
    --bezel:#F0A24B;
    filter:drop-shadow(0 10px 0 rgba(0,0,0,.10));
  }
  .clock-frame.shake{animation:shakeX .45s ease;}
  #clock-svg{position:relative; z-index:1; width:100%; height:100%; display:block; touch-action:none;}
  .clock-bezel{fill:var(--bezel); stroke:rgba(0,0,0,.14); stroke-width:2.5;}
  .clock-face-bg{fill:#FFFDF6;}
  .clock-tick-major{stroke:#C9BCA4; stroke-width:4; stroke-linecap:round;}
  .clock-tick-minor{stroke:#E9E0CC; stroke-width:2; stroke-linecap:round;}
  .clock-num{font-family:inherit; font-weight:800; font-size:24px; text-anchor:middle;}

  .clock-hand-g{transform-box:view-box; transform-origin:50% 50%; transition:transform .18s cubic-bezier(.34,1.35,.64,1);}
  .clock-hand-g.dragging{transition:none;}
  .clock-hand-grab{stroke:transparent; stroke-width:36; stroke-linecap:round; cursor:grab;}
  .clock-hand{stroke-linecap:round;}
  .clock-hand-hour{stroke:#E4574F; stroke-width:11;}
  .clock-hand-minute{stroke:#4A9EDF; stroke-width:7.5;}
  .clock-hand-tip-hour{fill:#E4574F;}
  .clock-hand-tip-minute{fill:#4A9EDF;}
  .clock-hand-g.active .clock-hand-hour{stroke:#F0756D;}
  .clock-hand-g.active .clock-hand-minute{stroke:#6FB5EC;}
  .clock-hand-g.active .clock-hand-tip{animation:clockTipPulse .7s ease-in-out infinite;}
  @keyframes clockTipPulse{0%,100%{opacity:1;} 50%{opacity:.55;}}
  .clock-cap{fill:#5A4636;}
  .clock-cap-dot{fill:#fff;}

  /* หน้ายิ้มกลางหน้าปัด — default ยิ้ม, .happy ยิ้มกว้าง, .sad หน้าเศร้า */
  .cfe-eye{fill:#5A4636; animation:cfeBlink 4.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center;}
  @keyframes cfeBlink{0%,94%,100%{transform:scaleY(1);} 96%{transform:scaleY(.12);}}
  .cfe-cheek{fill:#F8C8CF;}
  .cfe-mouth{fill:none; stroke:#5A4636; stroke-width:2.6; stroke-linecap:round;}
  .cfe-mouth-sad, .cfe-mouth-grin{opacity:0;}
  #clock-svg.happy .cfe-mouth-smile, #clock-svg.sad .cfe-mouth-smile{opacity:0;}
  #clock-svg.happy .cfe-mouth-grin{opacity:1;}
  #clock-svg.sad .cfe-mouth-sad{opacity:1;}
  #clock-svg.happy{animation:clockHappyBounce .55s ease;}
  @keyframes clockHappyBounce{0%{transform:scale(1);} 35%{transform:scale(1.05) rotate(-2deg);} 70%{transform:scale(1.02) rotate(1.5deg);} 100%{transform:scale(1);}}

  /* ---- กรอบนาฬิกาสุ่ม 5 แบบ (decor อยู่หลังหน้าปัด) ---- */
  .clock-frame-decor{position:absolute; inset:0; z-index:0; pointer-events:none;}
  .clock-frame-decor span{position:absolute;}
  .frame-owl{--bezel:#B9855A;}
  .d-owl-ear{top:-4%; width:24%; height:24%; background:#B9855A; border:3px solid #96683F;}
  .d-owl-ear.l{left:6%; border-radius:75% 25% 40% 60%; transform:rotate(-14deg);}
  .d-owl-ear.r{right:6%; border-radius:25% 75% 60% 40%; transform:rotate(14deg);}
  .d-owl-beak{top:-7%; left:50%; width:11%; height:12%; background:#F5A63C; border:3px solid #D98A20; border-radius:20% 20% 70% 70%; transform:translateX(-50%) rotate(180deg);}
  .frame-cat{--bezel:#8FA7E8;}
  .d-cat-ear{top:-6%; width:24%; height:26%; background:#8FA7E8; border:3px solid #6E87CC;}
  .d-cat-ear.l{left:7%; border-radius:80% 20% 20% 45%; transform:rotate(-10deg);}
  .d-cat-ear.r{right:7%; border-radius:20% 80% 45% 20%; transform:rotate(10deg);}
  .d-whisker{top:48%; width:17%; height:5px; background:#8FA7E8; border-radius:3px;}
  .d-whisker.l{left:-13%;}
  .d-whisker.r{right:-13%;}
  .d-whisker.l.w1{transform:rotate(9deg); top:42%;}
  .d-whisker.l.w2{transform:rotate(-9deg); top:54%;}
  .d-whisker.r.w1{transform:rotate(-9deg); top:42%;}
  .d-whisker.r.w2{transform:rotate(9deg); top:54%;}
  .frame-flower{--bezel:#F08AB8;}
  .d-petal{
    left:50%; top:50%; width:30%; height:48%;
    background:#F9BCD6; border:3px solid #E8709F; border-radius:50%;
    transform:translate(-50%,-50%) rotate(calc(var(--i)*45deg)) translateY(-72%);
  }
  .frame-sun{--bezel:#F5B62E;}
  .d-ray{
    left:50%; top:50%; width:7%; height:24%;
    background:#FFD34E; border:3px solid #E8A81C; border-radius:999px;
    transform:translate(-50%,-50%) rotate(calc(var(--i)*30deg)) translateY(-235%);
  }
  .frame-bear{--bezel:#C98B5E;}
  .d-bear-ear{top:-5%; width:24%; height:24%; background:#C98B5E; border:3px solid #A96D42; border-radius:50%;}
  .d-bear-ear.l{left:5%;}
  .d-bear-ear.r{right:5%;}

  /* z-index กันโดน decor กรอบ (กลีบ/รัศมีด้านล่าง) บังจอดิจิทัล/ปุ่ม เหมือน .clock-msg-slot */
  .clock-bottom-row{display:flex; flex-direction:column; align-items:center; gap:12px; position:relative; z-index:2;}
  .clock-digital{
    background:var(--white,#fff); border:3px solid var(--cat-color,#4A9EDF); border-radius:16px;
    padding:6px 22px; font-size:26px; font-weight:800; letter-spacing:2px;
    color:var(--cat-color,#4A9EDF); box-shadow:0 4px 0 rgba(0,0,0,.08);
    font-variant-numeric:tabular-nums;
  }
  .clock-nudge{display:flex; gap:12px;}
  .clock-nudge[hidden]{display:none;}
  .clock-nudge-btn{
    font-family:inherit; font-weight:800; font-size:16px; color:var(--ink);
    background:var(--white,#fff); border:3px solid var(--cat-color,#4A9EDF); border-radius:999px;
    padding:8px 20px; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.08); transition:transform .12s;
  }
  .clock-nudge-btn:active{transform:translateY(3px); box-shadow:none;}
  .clock-submit-btn{max-width:280px; width:auto; padding-left:44px; padding-right:44px;}

  @media (max-width:480px){
    .clock-task-text{font-size:19px;}
    .clock-digital{font-size:22px;}
    .clock-frame{width:min(88vw,46vh,360px);}
  }

/* ============================= ป.2 engine ใหม่ (money/fraction/balance/calendar) ============================= */
  .money-board, .fraction-board, .balance-board, .calendar-board{
    display:flex; flex-direction:column; align-items:center; gap:16px; width:100%;
    max-width:520px; margin:8px auto 30px; padding:0 12px;
  }
  /* ---- ร้านค้านกฮูก ---- */
  .money-customer{ display:flex; align-items:center; gap:12px; background:#fff; border:3px solid #F2D48A; border-radius:22px; padding:14px 18px; width:100%; box-shadow:0 5px 0 rgba(229,169,59,.25); }
  body.night-mode .money-customer{ background:#222B45; border-color:#7a6534; }
  .money-cust-face{ font-size:52px; line-height:1; flex-shrink:0; }
  .money-bubble{ font-size:18px; font-weight:800; color:var(--ink); line-height:1.5; }
  body.night-mode .money-bubble{ color:#EAF0FF; }
  .money-bubble b{ color:#D98A0A; font-size:22px; }
  .money-give{ font-size:14px; color:var(--ink-soft); font-weight:700; }
  body.night-mode .money-give{ color:#C7D2E8; }
  .money-tray-wrap{ width:100%; display:flex; flex-direction:column; align-items:center; gap:6px; }
  .money-tray{ width:100%; min-height:72px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; background:#FFF6E2; border:3px dashed #E5A93B; border-radius:20px; padding:10px; }
  body.night-mode .money-tray{ background:#2A2E1E; }
  .money-tray-empty{ font-size:14px; color:#B89347; font-weight:700; }
  .money-coin{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; font-weight:900; font-size:18px; color:#5a3e00; border:3px solid rgba(0,0,0,.15); box-shadow:inset 0 -3px 0 rgba(0,0,0,.12); }
  .money-coin.c1{ background:#F4C86B; } .money-coin.c2{ background:#EBB24A; } .money-coin.c5{ background:#E0E4EA; color:#3a3f47; } .money-coin.c10{ background:#F0D06A; }
  .money-tray-coin{ background:none; border:none; cursor:pointer; padding:0; transition:transform .12s; }
  .money-tray-coin:active{ transform:scale(.85); }
  .money-coins{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; width:100%; }
  .money-coin-btn{ display:flex; flex-direction:column; align-items:center; gap:3px; background:#fff; border:3px solid #E5A93B; border-radius:18px; padding:8px 12px; cursor:pointer; font-family:inherit; box-shadow:0 4px 0 rgba(229,169,59,.4); transition:transform .12s, box-shadow .12s; }
  body.night-mode .money-coin-btn{ background:#222B45; }
  .money-coin-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(229,169,59,.4); }
  .money-coin-lbl{ font-size:12px; font-weight:800; color:var(--ink-soft); }
  body.night-mode .money-coin-lbl{ color:#C7D2E8; }
  .money-pay-btn{ padding:14px 34px; border-radius:18px; border:none; background:#3B9E5B; color:#fff; font-family:inherit; font-size:19px; font-weight:900; cursor:pointer; box-shadow:0 5px 0 #2b7a44; transition:transform .12s, box-shadow .12s; }
  .money-pay-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 #2b7a44; }
  /* ---- พิซซ่าเศษส่วน ---- */
  .fraction-q, .balance-q, .calendar-q{ font-size:20px; font-weight:900; color:var(--ink); text-align:center; background:#fff; border-radius:16px; padding:10px 18px; box-shadow:0 3px 10px rgba(0,0,0,.06); }
  body.night-mode .fraction-q, body.night-mode .balance-q, body.night-mode .calendar-q{ background:#222B45; color:#EAF0FF; }
  .fraction-food{ width:min(78vw,300px); }
  .frac-svg{ width:100%; height:auto; display:block; }
  .frac-slice{ cursor:pointer; transition:filter .12s, transform .12s; transform-origin:center; }
  .frac-slice:active{ filter:brightness(1.1); }
  .frac-slice.sel{ filter:brightness(1.05); }
  /* ---- ตาชั่งวิเศษ ---- */
  .balance-scene{ width:100%; display:flex; justify-content:center; padding-top:8px; min-height:190px; }
  .bal-scale{ position:relative; width:280px; height:180px; }
  .bal-beam{ position:absolute; top:20px; left:50%; width:220px; height:10px; margin-left:-110px; background:#8A93A6; border-radius:6px; transform-origin:center; transition:transform .6s cubic-bezier(.5,1.4,.5,1); }
  .bal-left .bal-beam{ transform:rotate(-12deg); } .bal-right .bal-beam{ transform:rotate(12deg); } .bal-level .bal-beam{ transform:rotate(0); }
  .bal-arm{ position:absolute; top:6px; width:2px; }
  .bal-arm-l{ left:6px; } .bal-arm-r{ right:6px; }
  .bal-string{ width:2px; height:34px; background:#8A93A6; margin:0 auto; }
  .bal-pan{ width:84px; height:56px; margin-left:-42px; background:#EBC069; border:3px solid #C99A3E; border-radius:0 0 44px 44px; display:flex; align-items:center; justify-content:center; box-shadow:inset 0 -3px 0 rgba(0,0,0,.1); }
  .bal-pan-content{ font-size:20px; line-height:1.1; text-align:center; word-break:break-word; max-width:78px; }
  .bal-num{ font-size:34px; font-weight:900; color:#3a3f47; }
  .bal-post{ position:absolute; top:20px; left:50%; width:10px; height:150px; margin-left:-5px; background:#A9B0BF; border-radius:5px; }
  .bal-base{ position:absolute; bottom:0; left:50%; width:110px; height:16px; margin-left:-55px; background:#8A93A6; border-radius:8px; }
  .balance-choices, .calendar-choices{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; width:100%; }
  .bal-choice-btn, .cal-choice-btn{ padding:13px 22px; border-radius:16px; border:3px solid var(--cat-color,#7C8CFF); background:#fff; color:var(--ink); font-family:inherit; font-size:18px; font-weight:800; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.12); transition:transform .12s, box-shadow .12s; }
  body.night-mode .bal-choice-btn, body.night-mode .cal-choice-btn{ background:#222B45; color:#EAF0FF; }
  .bal-choice-btn:active, .cal-choice-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.12); }
  .bal-choice-btn.correct, .cal-choice-btn.correct{ background:#3B9E5B; color:#fff; border-color:#2b7a44; }
  .bal-choice-btn.wrong, .cal-choice-btn.wrong{ background:#E15B4C; color:#fff; border-color:#b53f32; }
  /* ---- ปฏิทินวิเศษ ---- */
  .calendar-month{ font-size:22px; font-weight:900; color:var(--ink); }
  body.night-mode .calendar-month{ color:#EAF0FF; }
  .calendar-grid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; width:100%; max-width:400px; background:#fff; border-radius:16px; padding:12px; box-shadow:0 4px 14px rgba(0,0,0,.08); }
  body.night-mode .calendar-grid{ background:#222B45; }
  .cal-head{ text-align:center; font-size:13px; font-weight:900; color:#8A93A6; padding:3px 0; }
  .cal-head.cal-wend{ color:#E67E9C; }
  .cal-cell{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; color:var(--ink); background:#F4F6FB; border-radius:9px; }
  body.night-mode .cal-cell{ background:#2C3552; color:#EAF0FF; }
  .cal-cell.cal-wend{ color:#E67E9C; }
  .cal-cell.cal-blank{ background:transparent; }
  .cal-cell.cal-hl{ background:var(--cat-color,#E67E9C); color:#fff; box-shadow:0 0 0 3px rgba(230,126,156,.4); transform:scale(1.08); }
  /* ---- เส้นเวลามหัศจรรย์ (timeline — Phase 3.3) ---- */
  .timeline-board{ display:flex; flex-direction:column; align-items:center; gap:18px; width:100%; max-width:860px; margin:8px auto 30px; padding:0 12px; }
  .timeline-theme{ font-size:19px; font-weight:800; color:var(--ink); text-align:center; background:#fff; border-radius:16px; padding:10px 20px; box-shadow:0 3px 10px rgba(0,0,0,.06); }
  body.night-mode .timeline-theme{ background:#222B45; color:#EAF0FF; }
  .timeline-theme b{ color:var(--cat-color,#B07A2E); }
  .timeline-track{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; width:100%; }
  .tl-slot{ position:relative; width:120px; min-height:150px; border-radius:20px; background:#fff; border:3px dashed #d9c3a0; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 3px 8px rgba(0,0,0,.05); transition:border-color .2s, transform .15s; }
  body.night-mode .tl-slot{ background:#222B45; border-color:#5a4d33; }
  .tl-slot.tl-filled{ border-style:solid; border-color:var(--cat-color,#B07A2E); background:var(--cat-light,#F5E7CE); }
  body.night-mode .tl-slot.tl-filled{ background:#2C3552; }
  .tl-slot-num{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); width:28px; height:28px; border-radius:50%; background:var(--cat-color,#B07A2E); color:#fff; font-weight:900; font-size:15px; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 4px rgba(0,0,0,.2); }
  .tl-slot-empty{ font-size:14px; font-weight:800; color:#b9a681; }
  body.night-mode .tl-slot-empty{ color:#8a7c5c; }
  .tl-arrow{ font-size:20px; opacity:.7; }
  .tl-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:8px; }
  .tl-card-e{ font-size:44px; line-height:1; }
  .tl-card-l{ font-size:15px; font-weight:800; color:var(--ink); text-align:center; line-height:1.15; }
  body.night-mode .tl-card-l{ color:#EAF0FF; }
  .tl-card-placed{ pointer-events:none; }
  .timeline-tray{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; width:100%; min-height:120px; align-items:center; }
  .tl-tray-empty{ font-size:15px; font-weight:700; color:var(--ink-soft); }
  body.night-mode .tl-tray-empty{ color:#C7D2E8; }
  .tl-card-tray{ width:120px; min-height:118px; border-radius:20px; background:#fff; border:3px solid #eadfca; cursor:pointer; font-family:inherit; box-shadow:0 4px 0 rgba(176,122,46,.28); transition:transform .12s, box-shadow .12s, border-color .15s; }
  body.night-mode .tl-card-tray{ background:#222B45; border-color:#5a4d33; }
  .tl-card-tray:hover{ transform:translateY(-4px); }
  .tl-card-tray:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(176,122,46,.28); }
  .tl-card-tray.tl-selected{ border-color:var(--cat-color,#B07A2E); box-shadow:0 0 0 4px rgba(176,122,46,.3), 0 6px 0 rgba(176,122,46,.3); transform:translateY(-6px) scale(1.04); }
  .tl-slot.tl-correct{ animation:tlPop .45s ease; border-color:#39B54A !important; background:#E4F7E7 !important; }
  body.night-mode .tl-slot.tl-correct{ background:#22402A !important; }
  .tl-slot.tl-wrong{ animation:tlShake .4s ease; border-color:#E14E4E !important; background:#FBE3E1 !important; }
  body.night-mode .tl-slot.tl-wrong{ background:#40222A !important; }
  @keyframes tlPop{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.09);} }
  @keyframes tlShake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-7px);} 60%{transform:translateX(7px);} }
  /* ---- จัดหมวดหมู่ลงตะกร้า (sort — Phase 3.4) ---- */
  .sort-board{ display:flex; flex-direction:column; align-items:center; gap:18px; width:100%; max-width:900px; margin:8px auto 30px; padding:0 12px; }
  .sort-prompt{ font-size:19px; font-weight:800; color:var(--ink); text-align:center; background:#fff; border-radius:16px; padding:10px 20px; box-shadow:0 3px 10px rgba(0,0,0,.06); }
  body.night-mode .sort-prompt{ background:#222B45; color:#EAF0FF; }
  .sort-bins{ display:grid; grid-template-columns:repeat(var(--bin-count,2),minmax(0,1fr)); gap:12px; width:100%; }
  .sort-bin{ min-height:140px; border-radius:22px; background:#fff; border:3px dashed #bcd4dd; display:flex; flex-direction:column; gap:8px; padding:12px 10px; cursor:pointer; transition:border-color .2s, background .2s; }
  body.night-mode .sort-bin{ background:#222B45; border-color:#3d5566; }
  .sort-bin-label{ font-size:16px; font-weight:900; color:var(--cat-color,#3FA9C9); text-align:center; }
  .sort-bin-items{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-content:flex-start; flex:1; }
  .sort-bin-correct{ border-style:solid; border-color:#39B54A !important; background:#E4F7E7 !important; animation:tlPop .45s ease; }
  body.night-mode .sort-bin-correct{ background:#22402A !important; }
  .sort-tray{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; width:100%; min-height:96px; align-items:center; background:#F4F6FB; border-radius:20px; padding:12px; }
  body.night-mode .sort-tray{ background:#2A3350; }
  .sort-tray-empty{ font-size:15px; font-weight:700; color:var(--ink-soft); }
  body.night-mode .sort-tray-empty{ color:#C7D2E8; }
  .sort-chip{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-family:inherit; cursor:pointer;
    background:#fff; border:3px solid #eadfca; border-radius:16px; padding:8px 12px; min-width:64px; box-shadow:0 4px 0 rgba(0,0,0,.1); transition:transform .12s, box-shadow .12s, border-color .15s; }
  body.night-mode .sort-chip{ background:#2C3552; border-color:#4a5878; }
  .sort-chip .sort-e{ font-size:34px; line-height:1; }
  .sort-chip .sort-n{ font-size:12px; font-weight:800; color:var(--ink-soft); }
  body.night-mode .sort-chip .sort-n{ color:#C7D2E8; }
  .sort-chip .sort-t{ font-size:20px; font-weight:800; color:var(--ink); }
  body.night-mode .sort-chip .sort-t{ color:#EAF0FF; }
  .sort-chip-tray:hover{ transform:translateY(-4px); }
  .sort-chip-tray:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.1); }
  .sort-chip-tray.sort-selected{ border-color:var(--cat-color,#3FA9C9); box-shadow:0 0 0 4px rgba(63,169,201,.3), 0 6px 0 rgba(63,169,201,.3); transform:translateY(-5px) scale(1.05); }
  .sort-chip-placed{ box-shadow:0 2px 0 rgba(0,0,0,.08); padding:6px 10px; }
  .sort-chip-placed .sort-e{ font-size:28px; } .sort-chip-placed .sort-t{ font-size:17px; }
  .sort-chip.sort-wrong{ border-color:#E14E4E !important; background:#FBE3E1 !important; animation:tlShake .4s ease; }
  body.night-mode .sort-chip.sort-wrong{ background:#40222A !important; }
  /* ---- โลกหมุน กลางวัน-กลางคืน (world — Phase 3.4b) ---- */
  .world-board{ display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; max-width:560px; margin:8px auto 30px; padding:0 12px; }
  .world-target{ font-size:20px; font-weight:800; color:var(--ink); text-align:center; background:#fff; border-radius:16px; padding:11px 20px; box-shadow:0 3px 10px rgba(0,0,0,.06); }
  body.night-mode .world-target{ color:#EAF0FF; background:#222B45; }
  .world-target b{ color:var(--cat-color,#2E86C1); }
  .world-stage{ position:relative; display:flex; align-items:center; justify-content:center; width:100%; min-height:260px; }
  .world-sun{ position:absolute; left:2%; top:50%; transform:translateY(-50%); font-size:56px; filter:drop-shadow(0 0 18px #FFD65C); animation:worldSunPulse 2.5s ease-in-out infinite; }
  @keyframes worldSunPulse{ 0%,100%{ transform:translateY(-50%) scale(1);} 50%{ transform:translateY(-50%) scale(1.08);} }
  .world-globe{ position:relative; width:220px; height:220px; border-radius:50%;
    background:linear-gradient(90deg, #FFE9A8 0%, #FCD667 48%, #26406B 52%, #16233F 100%);
    box-shadow:inset -10px 0 26px rgba(0,0,0,.35), 0 8px 22px rgba(0,0,0,.2); overflow:visible; transition:box-shadow .3s; }
  .world-terminator{ position:absolute; left:50%; top:0; width:3px; height:100%; margin-left:-1.5px; background:rgba(255,255,255,.35); border-radius:2px; }
  .world-marker{ position:absolute; font-size:34px; transform:translate(-50%,-50%); transition:left .45s cubic-bezier(.5,1.3,.5,1), top .45s cubic-bezier(.5,1.3,.5,1); filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); z-index:2; }
  .world-globe.world-correct{ box-shadow:0 0 0 6px #39B54A, inset -10px 0 26px rgba(0,0,0,.35); animation:tlPop .5s ease; }
  .world-globe.world-shake{ animation:tlShake .4s ease; }
  .world-state{ font-size:17px; font-weight:800; color:var(--ink); }
  body.night-mode .world-state{ color:#EAF0FF; }
  .ws-day{ color:#E8920A; } .ws-night{ color:#5566C4; }
  body.night-mode .ws-night{ color:#9AA8F0; }
  .world-controls{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
  .world-rot-btn{ padding:12px 20px; border-radius:16px; border:3px solid var(--cat-color,#2E86C1); background:#fff; color:var(--ink); font-family:inherit; font-size:17px; font-weight:800; cursor:pointer; box-shadow:0 4px 0 rgba(46,134,193,.35); transition:transform .12s, box-shadow .12s; }
  body.night-mode .world-rot-btn{ background:#222B45; color:#EAF0FF; }
  .world-rot-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(46,134,193,.35); }
  .world-check-btn{ padding:13px 34px; border-radius:18px; border:none; background:#3B9E5B; color:#fff; font-family:inherit; font-size:19px; font-weight:900; cursor:pointer; box-shadow:0 5px 0 #2b7a44; transition:transform .12s, box-shadow .12s; }
  .world-check-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 #2b7a44; }
  /* ---- ขุมทรัพย์พิกัด (coord) ---- */
  .coord-board{ display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; max-width:540px; margin:8px auto 30px; padding:0 12px; }
  .coord-q{ font-size:19px; font-weight:800; color:var(--ink); text-align:center; background:#fff; border-radius:16px; padding:11px 20px; line-height:1.6; box-shadow:0 3px 10px rgba(0,0,0,.06); }
  body.night-mode .coord-q{ color:#EAF0FF; background:#222B45; }
  .coord-q b{ color:var(--cat-color,#C77D2E); font-size:23px; }
  .coord-grid-wrap{ width:100%; overflow-x:auto; display:flex; justify-content:center; }
  .coord-grid{ display:grid; gap:6px; width:100%; max-width:460px; background:#EED9B0; border:4px solid #D9BE85; border-radius:18px; padding:10px; }
  body.night-mode .coord-grid{ background:#3a3320; border-color:#5a4d2f; }
  .coord-head{ display:flex; align-items:center; justify-content:center; font-weight:900; color:var(--cat-color,#C77D2E); font-size:19px; }
  body.night-mode .coord-head{ color:#E8C98A; }
  .coord-corner{ font-size:17px; }
  .coord-cell{ aspect-ratio:1/1; border-radius:12px; background:#F4DEAE; border:2px solid #E3C88C; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:30px; line-height:1; transition:transform .12s, background .2s; }
  body.night-mode .coord-cell{ background:#4a3f27; border-color:#63552f; }
  .coord-cell:hover{ transform:scale(1.05); background:#FBEAC4; }
  .coord-cell.coord-found{ background:#B7E6C0 !important; border-color:#5bbd6f; animation:tlPop .5s ease; }
  body.night-mode .coord-cell.coord-found{ background:#264a2e !important; }
  .coord-cell.coord-miss{ background:#F3C0BB !important; border-color:#e07d72; animation:tlShake .4s ease; }
  body.night-mode .coord-cell.coord-miss{ background:#4a2724 !important; }
  @media (max-width:480px){
    .money-bubble{ font-size:16px; } .money-cust-face{ font-size:42px; }
    .money-coin{ width:38px; height:38px; font-size:16px; }
    .fraction-q, .balance-q, .calendar-q{ font-size:17px; }
    .bal-num{ font-size:28px; } .bal-scale{ transform:scale(.9); }
    .cal-cell{ font-size:13px; } .cal-head{ font-size:11px; }
    .timeline-theme{ font-size:16px; padding:8px 14px; }
    .tl-slot{ width:92px; min-height:120px; } .tl-card-tray{ width:92px; min-height:98px; }
    .tl-card-e{ font-size:34px; } .tl-card-l{ font-size:12px; } .tl-arrow{ font-size:15px; }
    .sort-prompt{ font-size:16px; padding:8px 14px; } .sort-bin-label{ font-size:14px; }
    .sort-chip .sort-e{ font-size:28px; } .sort-chip .sort-t{ font-size:17px; } .sort-chip{ min-width:54px; padding:6px 9px; }
    .world-target{ font-size:16px; padding:9px 14px; } .world-globe{ width:180px; height:180px; }
    .world-sun{ font-size:44px; } .world-marker{ font-size:28px; } .world-rot-btn{ font-size:15px; padding:10px 16px; }
  }

  /* ================= เกมใหม่ ป.5-6: ต่อวงจรไฟฟ้า / แท็งแกรม / กระจกวิเศษ / เรียงลำดับ ================= */
  .circuit-board,.tangram-board,.mirror-board,.order-board{ display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; max-width:900px; margin:8px auto 30px; padding:0 12px; }
  .tangram-title,.mirror-title,.order-title{ font-size:19px; font-weight:800; color:var(--ink); text-align:center; line-height:1.5; }
  body.night-mode .tangram-title, body.night-mode .mirror-title, body.night-mode .order-title{ color:#EAF2FF; }

  /* --- ต่อวงจรไฟฟ้า --- */
  .circuit-grid-wrap{ background:#fff; border-radius:22px; padding:12px; box-shadow:0 6px 0 rgba(0,0,0,.08); }
  .circuit-grid{ display:grid; gap:4px; }
  .circuit-cell{ width:var(--cc,58px); height:var(--cc,58px); border:none; padding:0; background:#F2F5FA; border-radius:10px; cursor:pointer; position:relative; display:flex; align-items:center; justify-content:center; transition:transform .12s, background .2s; }
  .circuit-cell.circuit-fixed{ background:#E6ECF5; cursor:default; }
  .circuit-cell.circuit-live{ background:#FFF3C4; }
  .circuit-cell:active{ transform:scale(.94); }
  .circuit-cell svg{ width:100%; height:100%; display:block; transition:transform .18s; }
  .circuit-node{ font-size:24px; line-height:1; }
  body.night-mode .circuit-grid-wrap{ background:#22304a; }
  body.night-mode .circuit-cell{ background:#31425f; }
  body.night-mode .circuit-cell.circuit-fixed{ background:#3c5075; }
  body.night-mode .circuit-cell.circuit-live{ background:#7a6a2e; }

  /* --- แท็งแกรม --- */
  .tangram-stage{ position:relative; width:280px; height:280px; background:#fff; border-radius:22px; box-shadow:0 6px 0 rgba(0,0,0,.08); }
  body.night-mode .tangram-stage{ background:#22304a; }
  .tangram-slot{ position:absolute; border:none; padding:0; background:transparent; cursor:pointer; transform-origin:center; }
  .tangram-slot .tg-shape{ width:100%; height:100%; display:block; }
  .tangram-slot.tg-empty .tg-shape{ opacity:.28; }
  .tangram-slot.tg-filled .tg-shape{ opacity:1; }
  .tangram-tray{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:640px; }
  .tangram-piece{ width:74px; height:74px; border:3px solid transparent; border-radius:16px; background:#fff; padding:4px; cursor:pointer; transition:transform .12s, border-color .15s; }
  .tangram-piece svg{ width:100%; height:100%; display:block; transition:transform .2s; }
  .tangram-piece.tg-sel{ border-color:var(--cat-color,#7C5CFC); transform:translateY(-4px); }
  body.night-mode .tangram-piece{ background:#2c3c58; }

  /* --- กระจกวิเศษ --- */
  .mirror-grid-wrap{ background:#fff; border-radius:22px; padding:10px; box-shadow:0 6px 0 rgba(0,0,0,.08); }
  body.night-mode .mirror-grid-wrap{ background:#22304a; }
  .mirror-grid{ display:grid; gap:3px; }
  .mirror-cell{ width:var(--mc,30px); height:var(--mc,30px); border:none; border-radius:6px; background:#EFF3F9; padding:0; cursor:pointer; transition:transform .1s; }
  .mirror-cell.mr-left{ cursor:default; }
  .mirror-cell.mr-axis{ border-radius:0; background:repeating-linear-gradient(180deg,#BFD3EE 0 6px,transparent 6px 12px); width:8px; cursor:default; }
  .mirror-cell:active{ transform:scale(.9); }
  .mirror-cell.mr-bad{ animation:mrShake .32s; }
  @keyframes mrShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
  body.night-mode .mirror-cell{ background:#31425f; }
  .mirror-palette{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
  .mirror-swatch{ width:44px; height:44px; border-radius:50%; border:4px solid #fff; cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.15); transition:transform .12s; }
  .mirror-swatch.mr-sel{ transform:scale(1.16); border-color:var(--cat-color,#7C5CFC); }

  /* --- เรียงลำดับวิเศษ --- */
  .order-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
  .order-card{ width:96px; min-height:112px; border:4px solid transparent; border-radius:18px; background:#fff; box-shadow:0 5px 0 rgba(0,0,0,.1); cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px; font-family:inherit; transition:transform .14s, border-color .15s; }
  .order-card .oc-e{ font-size:34px; line-height:1; }
  .order-card .oc-l{ font-size:14px; font-weight:800; color:var(--ink); text-align:center; line-height:1.3; }
  .order-card.oc-sel{ border-color:var(--cat-color,#7C5CFC); transform:translateY(-6px); }
  .order-card.oc-bad{ animation:mrShake .32s; }
  .order-num{ font-size:12px; font-weight:800; color:#9AA6B8; }
  body.night-mode .order-card{ background:#2c3c58; }
  body.night-mode .order-card .oc-l{ color:#EAF2FF; }