:root{--cream:#fffaf3;--brown:#5a4636;--coral:#e78461;--sage:#829166;--blue:#cfe6f3;--pink:#f6d8dc;--yellow:#f7e7a9;--white:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--brown);font-family:Arial,"Noto Sans Thai",sans-serif;line-height:1.55}
a{color:inherit}.game-header{max-width:1050px;margin:auto;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.brand{font-size:1.55rem;font-weight:800;text-decoration:none;color:var(--coral);letter-spacing:-.04em;line-height:.82}.brand span{display:block;color:var(--sage)}
nav{display:flex;gap:18px}nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-weight:800;text-decoration:none}nav a:hover{text-decoration:underline}
main{max-width:820px;margin:auto;padding:28px 22px 80px}.intro{text-align:center}.eyebrow{color:var(--sage);font-size:.78rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
h1{font-size:clamp(2.7rem,8vw,5.3rem);line-height:.98;margin:10px 0 18px;letter-spacing:-.055em}h1 span{color:var(--coral)}
.game-card{margin-top:34px;padding:28px;border:2px solid #f1ded0;border-radius:34px;background:var(--white);box-shadow:0 16px 42px #806c4e17;text-align:center}
.status-row{display:flex;justify-content:space-between;gap:20px}.status-row p{margin:0;font-size:1rem}.progress{height:10px;margin:14px 0 24px;overflow:hidden;border-radius:99px;background:#f4eee8}.progress span{display:block;width:10%;height:100%;border-radius:inherit;background:var(--sage);transition:width .25s ease}
.picture{font-size:clamp(5rem,19vw,8rem);line-height:1.2}.instruction{font-size:1.15rem;font-weight:800}
button,.home-button{font:inherit}.listen-button,.next-button,.home-button{display:inline-block;border:0;border-radius:999px;padding:13px 22px;font-weight:900;cursor:pointer;text-decoration:none}
.listen-button{background:var(--blue);color:var(--brown)}.listen-button:hover{background:#b9dbea}.speech-note{margin:9px 0 20px;font-size:.82rem;color:#796c62}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:560px;margin:auto}.choice{min-height:86px;border:3px solid #eadfd5;border-radius:22px;background:#fff;font-size:2.25rem;font-weight:900;color:var(--brown);cursor:pointer}.choice:hover,.choice:focus-visible{border-color:var(--coral);outline:none;transform:translateY(-2px)}.choice.correct{border-color:var(--sage);background:#e7efdd}.choice.wrong{border-color:var(--coral);background:#fde5df}.choice:disabled{cursor:default;transform:none}
.feedback{min-height:29px;margin:20px 0 12px;font-size:1.08rem;font-weight:900}.next-button{background:var(--coral);color:#fff}.next-button:hover{background:#d87553}.finish{padding:28px 5px}.finish h2{font-size:2.5rem;margin:8px}.celebration{font-size:5rem}.home-button{margin-left:8px;background:var(--yellow)}.parent-note{margin:26px auto 0;padding:20px 24px;border-radius:20px;background:var(--pink)}footer{padding:28px;text-align:center;background:var(--brown);color:#fff}.footer-stack{display:grid;gap:3px;line-height:1.45}.footer-stack span{display:block}.footer-stack a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;color:inherit}
@media(max-width:620px){.brand{font-size:1.2rem}.game-header{align-items:flex-start}.game-header nav{flex-direction:column;gap:4px;text-align:right;font-size:.85rem}main{padding-top:12px}.game-card{padding:20px 16px;border-radius:26px}.choices{gap:9px}.choice{min-height:74px;font-size:1.85rem}.home-button{display:block;width:max-content;margin:12px auto 0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.hub-main{max-width:1050px}.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:38px}.game-tile{position:relative;min-height:310px;padding:30px;border:2px solid #eadfd5;border-radius:30px;background:#fff;box-shadow:0 12px 30px #806c4e12}.game-tile.available{border-color:#b9d3a4;background:linear-gradient(145deg,#fff,#f1f7e9)}.game-tile.upcoming{background:#fffdf9}.tile-icon{font-size:3.2rem}.game-number{margin:12px 0 4px;color:var(--sage);font-size:.75rem;font-weight:900;letter-spacing:.14em}.game-tile h2{margin:4px 0 10px;font-size:1.7rem}.tile-tags{display:flex;flex-wrap:wrap;gap:7px;margin:20px 0}.tile-tags span,.coming{display:inline-block;padding:6px 11px;border-radius:999px;background:var(--blue);font-size:.78rem;font-weight:800}.play-game{display:inline-block;margin-top:5px;padding:12px 19px;border-radius:999px;background:var(--coral);color:#fff;font-weight:900;text-decoration:none}.play-game:hover{background:#d87553}.coming{margin-top:20px;background:#eee7df;color:#75685e}
@media(max-width:700px){.games-grid{grid-template-columns:1fr}.game-tile{min-height:0}}
.vowel-choices{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;max-width:620px;margin:auto}.vowel-choice{min-height:82px;border:3px solid #eadfd5;border-radius:22px;background:#fff;font-size:2.2rem;font-weight:900;color:var(--brown);cursor:pointer}.vowel-choice:hover,.vowel-choice:focus-visible{border-color:var(--coral);outline:none;transform:translateY(-2px)}.vowel-choice.correct{border-color:var(--sage);background:#e7efdd}.vowel-choice.wrong{border-color:var(--coral);background:#fde5df}.vowel-choice:disabled{cursor:default;transform:none}.vowel-a{color:#df6257}.vowel-e{color:#d48939}.vowel-i{color:#6e80b5}.vowel-o{color:#7c65a7}.vowel-u{color:#638d68}.answer-word{font-size:1.35em;letter-spacing:.04em}.answer-word span{color:var(--coral);text-decoration:underline}.short-vowel-card .picture{margin-top:4px}
@media(max-width:620px){.vowel-choices{grid-template-columns:repeat(5,1fr);gap:6px}.vowel-choice{min-height:64px;border-radius:16px;font-size:1.65rem}}
.family-lessons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:28px auto 0}.family-lessons button{display:flex;flex-direction:column;gap:5px;min-height:128px;justify-content:center;padding:15px;border:2px solid #eadfd5;border-radius:20px;background:#fff;color:var(--brown);cursor:pointer}.family-lessons button:hover,.family-lessons button:focus-visible{border-color:var(--coral);outline:none}.family-lessons strong{font-size:1.3rem}.family-lessons span{font-size:.82rem;line-height:1.4}.word-prompt{margin:2px 0 15px;font-size:clamp(2.6rem,10vw,4.5rem);font-weight:900;letter-spacing:.04em}.word-prompt span{color:var(--coral);text-decoration:underline}.family-choice{font-size:1.8rem}.review-box{margin:18px auto 24px;padding:15px;border-radius:16px;background:#fff4e5;max-width:520px}.word-family-card .picture{font-size:clamp(4.5rem,16vw,7rem)}
.word-family-card .picture{height:250px;display:grid;place-items:center}.word-family-card .picture img{display:block;width:250px;height:250px;object-fit:contain}
@media(max-width:620px){.family-lessons{grid-template-columns:1fr}.family-lessons button{min-height:104px;justify-content:center;align-items:center}.family-choices{grid-template-columns:repeat(3,1fr)}.word-family-card .picture{height:190px}.word-family-card .picture img{width:190px;height:190px}}
.sound-prompt{width:88px;height:88px;display:grid;place-items:center;margin:2px auto 8px;border-radius:50%;background:var(--blue);font-size:3rem;font-weight:900;color:var(--coral)}.picture-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:550px;margin:auto}.picture-choice{position:relative;min-height:210px;padding:8px;border:3px solid #eadfd5;border-radius:24px;background:#fff;cursor:pointer;overflow:hidden}.picture-choice img{display:block;width:100%;height:190px;object-fit:contain}.picture-choice:hover,.picture-choice:focus-visible{border-color:var(--coral);outline:none;transform:translateY(-2px)}.picture-choice.correct{border-color:var(--sage);background:#e7efdd}.picture-choice.wrong{border-color:var(--coral);background:#fde5df}.picture-choice:disabled{cursor:default;transform:none}.listen-match-card .feedback strong{color:var(--coral);font-size:1.2em}
@media(max-width:620px){.picture-choices{gap:8px}.picture-choice{min-height:155px;border-radius:18px;padding:5px}.picture-choice img{height:140px}.sound-prompt{width:72px;height:72px;font-size:2.4rem}}
.beginning-word-card .picture{height:250px;display:grid;place-items:center;margin-bottom:8px}.beginning-word-card .picture img{display:block;width:250px;height:250px;object-fit:contain}.beginning-letter-choices{grid-template-columns:repeat(4,1fr);max-width:620px}.beginning-letter-choices .choice{text-transform:lowercase}.beginning-word-card .feedback strong{color:var(--coral);font-size:1.18em}
@media(max-width:620px){.beginning-word-card .picture{height:190px}.beginning-word-card .picture img{width:190px;height:190px}.beginning-letter-choices{grid-template-columns:repeat(4,1fr)}.beginning-letter-choices .choice{min-height:68px;font-size:1.8rem}}
.ending-letter-choices{grid-template-columns:repeat(3,1fr);max-width:520px}.ending-letter-choices .choice{text-transform:lowercase}
.build-word-card .picture{height:230px;display:grid;place-items:center}.build-word-card .picture img{width:230px;height:230px;object-fit:contain}.word-slots{display:flex;justify-content:center;gap:12px;margin:20px 0}.word-slot{width:74px;height:82px;display:grid;place-items:center;border-bottom:5px solid var(--brown);font-size:2.8rem;font-weight:900;text-transform:lowercase}.word-slots.word-correct .word-slot{color:var(--sage);border-color:var(--sage)}.word-slots.word-wrong .word-slot{color:var(--coral);border-color:var(--coral)}.letter-bank{display:flex;justify-content:center;gap:14px;margin:18px auto}.letter-tile{width:82px;height:82px;border:3px solid #eadfd5;border-radius:20px;background:#fff;font-size:2.5rem;font-weight:900;color:var(--brown);cursor:pointer}.letter-tile:hover,.letter-tile:focus-visible{border-color:var(--coral);transform:translateY(-2px);outline:none}.letter-tile:disabled{opacity:.35;cursor:default;transform:none}.clear-word{border:0;background:transparent;color:#796c62;text-decoration:underline;font-weight:800;cursor:pointer}.clear-word:disabled{opacity:.4;cursor:default}.build-word-card .feedback strong{color:var(--coral);font-size:1.2em}
@media(max-width:620px){.build-word-card .picture{height:180px}.build-word-card .picture img{width:180px;height:180px}.word-slot{width:58px;height:66px;font-size:2.2rem}.letter-tile{width:68px;height:68px;font-size:2rem}}
.high-score-message{max-width:520px;margin:14px auto 20px;padding:14px 18px;border-radius:18px;background:var(--yellow);font-size:1.15rem;font-weight:900}.confetti-layer{position:fixed;inset:0;z-index:50;overflow:hidden;pointer-events:none;display:none}.confetti-layer.show{display:block}.confetti-layer i{position:absolute;top:-24px;left:var(--x);width:11px;height:20px;border-radius:3px;opacity:.95;animation:confetti-fall var(--duration) var(--delay) ease-in forwards}@keyframes confetti-fall{0%{transform:translate3d(0,-5vh,0) rotate(0);opacity:1}100%{transform:translate3d(35px,110vh,0) rotate(var(--spin));opacity:.15}}
@media(prefers-reduced-motion:reduce){.confetti-layer i{animation:none}.confetti-layer.show{display:none}}
.score-celebration-overlay{position:fixed;inset:0;z-index:100;overflow:hidden;pointer-events:none}.score-celebration-message{position:absolute;z-index:2;top:50%;left:50%;width:min(88vw,460px);padding:28px 24px;transform:translate(-50%,-50%);border:5px solid #fff;border-radius:30px;background:linear-gradient(145deg,#fff7c9,#f6d8dc);box-shadow:0 22px 70px #4c382955;text-align:center;animation:score-pop .55s cubic-bezier(.2,.9,.3,1.25) both}.score-celebration-message span,.score-celebration-message strong,.score-celebration-message small{display:block}.score-celebration-message span{font-size:4.5rem}.score-celebration-message strong{font-size:clamp(1.8rem,7vw,3rem);color:var(--coral)}.score-celebration-message small{margin-top:7px;font-size:1.25rem;font-weight:900;color:var(--brown)}.score-celebration-overlay>i{position:absolute;top:-24px;left:var(--x);width:12px;height:22px;border-radius:3px;opacity:.95;animation:confetti-fall var(--duration) var(--delay) ease-in forwards}@keyframes score-pop{0%{transform:translate(-50%,-50%) scale(.35);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.score-celebration-message{animation:none}.score-celebration-overlay>i{display:none}}