:root {
    color-scheme: light;
    font-family: "Noto Sans Khmer", "Khmer OS System", system-ui, sans-serif;
    --ink: #332d4d;
    --muted: #746d89;
    --purple: #6d5bd0;
    --gold: #f4a142;
    --mint: #2fbaa9;
    --danger: #ef627d
}

/* Polished win / try-again experience */
.play-meta{width:100%;display:flex;align-items:center;justify-content:center;position:relative}.play-meta .instruction{margin-inline:auto}.lives{position:absolute;right:4px;display:flex;gap:4px;padding:6px 9px;border:1px solid #eadff3;border-radius:13px;background:#fff;box-shadow:0 5px 14px #53457112}.lives i{color:#ff6f87;font:900 15px/1 system-ui;font-style:normal;transition:.25s}.lives i.lost{color:#ddd6e5;transform:scale(.8);filter:grayscale(1)}
.complete-screen{padding:clamp(18px,4vh,38px);background:radial-gradient(circle at 50% 35%,#fff9,#f5f1ffb8 55%,transparent 75%)}
.complete-card{position:relative;width:min(100%,520px);max-height:none;padding:clamp(26px,4vh,40px) clamp(24px,6vw,50px);border:1px solid #ded7f5;border-radius:38px;background:linear-gradient(160deg,#fff 0%,#fbf9ff 62%,#f3efff 100%);box-shadow:0 28px 65px #51417e24,inset 0 1px #fff;overflow:hidden}
.complete-card::before{content:"";position:absolute;width:240px;height:240px;left:-120px;top:-130px;border-radius:50%;background:#d9fff6}.complete-card::after{content:"";position:absolute;width:230px;height:230px;right:-120px;bottom:-140px;border-radius:50%;background:#fff0cd}
.complete-kicker{position:relative;z-index:2;margin:0 0 14px;padding:8px 15px;border-radius:999px;background:#eeeaff;color:#6858c6;font-size:clamp(12px,2vw,15px);letter-spacing:.1em}
.result-icon{position:relative;z-index:2;width:clamp(100px,17vh,128px);aspect-ratio:1;display:grid;place-items:center;margin:2px auto 14px;border:6px solid #fff;border-radius:35%;background:linear-gradient(145deg,#ffd56c,#ff9866);color:#fff;font:1000 clamp(50px,9vh,72px)/1 system-ui;box-shadow:0 16px 34px #e6845e45,inset 0 3px #fff8;transform:rotate(-4deg);animation:result-pop .6s cubic-bezier(.2,.9,.25,1.2)}
.complete-card h1{position:relative;z-index:2;margin:4px 0;color:#392f54;font-size:clamp(34px,5.7vh,48px);line-height:1.3}.complete-card>p:not(.complete-kicker){position:relative;z-index:2;margin:0 0 18px;color:#776f87;font-size:clamp(15px,2.5vh,19px);line-height:1.5;text-align:center}
.result-score{position:relative;z-index:2;width:min(100%,360px);min-height:62px;display:flex;align-items:center;justify-content:space-between;padding:10px 17px;margin:0 auto 18px;border:1px solid #ebe5f7;border-radius:19px;background:#fff;box-shadow:0 8px 22px #55468112}.result-score>span{color:#8b829a;font:700 15px/1.3 "Game Khmer",sans-serif}.result-score strong{color:#604fb5;font:1000 27px/1 system-ui}.result-score small{font-size:14px}
.result-actions{position:relative;z-index:2;gap:10px}.complete-card .primary-button,.complete-card .secondary-button{border-radius:19px;background-image:none;text-shadow:none;transition:.15s}.complete-card .primary-button{min-height:62px;border:1px solid #ff9a5e;background:linear-gradient(135deg,#ffc05e,#ff8b70);color:#49334f;box-shadow:0 8px 0 #e7765d,0 14px 25px #d9714f30,inset 0 2px #fff8}.complete-card .secondary-button{min-height:55px;border:1px solid #d9d2f3;background:linear-gradient(180deg,#fff,#f2efff);color:#6657b6;box-shadow:0 7px 15px #53467a16}.complete-card .primary-button:active{transform:translateY(6px);box-shadow:0 2px 0 #e7765d}
.result-sparkles i{position:absolute;z-index:1;width:9px;height:9px;border-radius:3px;background:#72d8c3;animation:result-twinkle 1.8s ease-in-out infinite}.result-sparkles i:nth-child(1){left:12%;top:18%}.result-sparkles i:nth-child(2){right:13%;top:22%;background:#ffbd56;animation-delay:.3s}.result-sparkles i:nth-child(3){left:18%;top:46%;background:#9b89eb;animation-delay:.6s}.result-sparkles i:nth-child(4){right:16%;top:49%;background:#ff7c91;animation-delay:.9s}.result-sparkles i:nth-child(5){left:9%;bottom:18%;background:#ffbd56;animation-delay:1.2s}.result-sparkles i:nth-child(6){right:10%;bottom:16%;animation-delay:1.5s}
.complete-screen.is-loss .complete-card{background:linear-gradient(160deg,#fff,#fff8fa 65%,#fff0f3);border-color:#f3d9df}.complete-screen.is-loss .complete-kicker{background:#fff0f3;color:#c25972}.complete-screen.is-loss .result-icon{background:linear-gradient(145deg,#ff9a9f,#ef647d);box-shadow:0 16px 34px #d9537040;transform:rotate(4deg)}.complete-screen.is-loss .result-score strong{color:#b6acbd}.complete-screen.is-loss .result-sparkles{display:none}.complete-screen.is-loss .secondary-button{width:min(100%,360px);min-height:62px;border-color:#ff9aa8;background:linear-gradient(135deg,#ff9da8,#f2738b);color:#fff;box-shadow:0 8px 0 #d95d76,0 14px 25px #d95d7630}
@keyframes result-pop{from{opacity:0;transform:scale(.45) rotate(-18deg)}70%{transform:scale(1.08) rotate(2deg)}}@keyframes result-twinkle{50%{transform:rotate(90deg) scale(1.8);opacity:.35}}
@media(max-height:680px){.complete-card{padding:18px 28px;border-radius:30px}.complete-kicker{margin-bottom:8px}.result-icon{width:88px;margin-bottom:8px}.complete-card h1{font-size:32px}.complete-card>p:not(.complete-kicker){margin-bottom:10px}.result-score{min-height:52px;margin-bottom:11px}.complete-card .primary-button,.complete-card .secondary-button{min-height:51px}.lives{padding:5px 7px}.lives i{font-size:13px}}
@media(max-width:520px){.complete-screen{padding:14px}.complete-card{border-radius:30px;padding-inline:22px}.play-meta{padding-right:75px}.play-meta .instruction{text-align:left}.lives{right:0}}
.special-header .lives{position:static;margin-inline:auto}.special-header{gap:10px}

/* Game screen v2 — shares the visual language of the home screen */
.match-screen{padding:max(18px,env(safe-area-inset-top)) 20px max(14px,env(safe-area-inset-bottom));background:#4a6ce8 url("assets/ui/home_bg.webp") center/cover no-repeat}
.match-screen::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 38%,#7e91f052,transparent 54%)}
.match-screen>*{position:relative;z-index:1}
.match-screen .level-header{height:66px;flex:0 0 66px;gap:74px}
.match-screen .level-pill,.match-screen .iq-pill{height:58px;border:1px solid #ffffff5c;border-radius:20px;background:linear-gradient(180deg,#ffffff32,#ffffff18);box-shadow:inset 0 1px #ffffff75,0 12px 25px #1b2a7d30;backdrop-filter:blur(12px)}
.match-screen .level-pill{width:145px;gap:7px}.match-screen .level-pill span{color:#e4e9ff;font-size:12px}.match-screen .level-pill strong{color:#fff;font-size:29px;text-shadow:0 2px 8px #1c2c82}
.match-screen .iq-pill{width:160px;gap:8px}.match-screen .iq-pill>span{color:#ffd359;font-size:22px}.match-screen .iq-pill small{color:#e5e9ff;font-size:10px}.match-screen .iq-pill strong{color:#fff;font-size:16px;text-shadow:0 2px 7px #1c2c82}
.match-screen .chapter-label{margin-top:2px;padding:5px 13px;border-radius:999px;background:#ffffff20;color:#e6eaff;font-size:10px;box-shadow:inset 0 0 0 1px #ffffff2e}
.match-screen .play-meta{min-height:48px;color:#fff}.match-screen .instruction{margin:5px auto 7px;color:#fff;font-size:clamp(17px,4.4vw,21px);text-shadow:0 2px 9px #2034868c}
.match-screen .lives{right:0;padding:5px 8px;border-color:#ffffff55;background:#ffffffed;box-shadow:0 7px 17px #1f307f30}.match-screen .lives i{font-size:13px}
.match-screen .match-board{width:100%;margin-top:1px;padding:3% 7%;gap:22%;border:0;border-radius:32px;background:radial-gradient(circle at 10% 8%,#bff8ecc8 0 32%,transparent 58%),radial-gradient(circle at 92% 94%,#ffe3aec4 0 30%,transparent 56%),linear-gradient(165deg,#e4e0fb 0%,#d7d2f4 52%,#cfe4f7 100%);box-shadow:0 20px 42px #1c2a7438,inset 0 1px #fffc,inset 0 0 0 2px #c6bee8,inset 0 18px 40px #7a72b81c;overflow:hidden}
.match-screen .match-board::before,.match-screen .match-board::after{content:"";position:absolute;border-radius:50%;pointer-events:none;opacity:.5}.match-screen .match-board::before{width:180px;height:180px;left:-100px;top:-90px;background:#b8fff0}.match-screen .match-board::after{width:190px;height:190px;right:-110px;bottom:-110px;background:#ffe8b4}
.match-screen .match-column{z-index:3}
.match-screen .emoji-node{width:clamp(82px,21vw,105px);border-radius:26px;background-color:#fff;box-shadow:0 7px 0 #c3bbe6,0 14px 20px #5d519a3a,inset 0 1px #fff,inset 0 0 0 1.5px #ece8fa;filter:none;transition:transform .15s,box-shadow .15s,opacity .15s}
.match-screen .emoji-node.custom-icon,.match-screen .emoji-node:not(.custom-icon){filter:none;background-color:#fff}
.match-screen .emoji-node:active,.match-screen .emoji-node.selected{transform:scale(1.08);box-shadow:0 0 0 4px #ffd45f,0 8px 0 #e0b13a,0 14px 22px #594c7928}
.match-screen .emoji-node.matched{opacity:.86;box-shadow:0 0 0 4px #60dbc3,0 6px 0 #3cb9a4,0 12px 20px #45cbb735}
.match-screen .game-footer{height:76px;flex:0 0 76px;grid-template-columns:1fr 1.15fr 126px;gap:8px}
.match-screen .progress-dots{gap:5px;padding:9px 11px;border-radius:999px;background:#ffffff20;justify-content:center}.match-screen .progress-dots i{width:12px;background:#ffffff45;border:2px solid #ffffff72}.match-screen .progress-dots i.done{background:#ffd45f;border-color:#fff2b0;box-shadow:0 0 10px #ffd45f80}
.match-screen .feedback{color:#fff;font-size:15px;text-shadow:0 2px 8px #233785}.match-screen .feedback.bad{color:#ffe0e5}
.match-screen .hint-button{min-height:55px;border:0;border-radius:18px;background-image:none;background:linear-gradient(180deg,#ffe979,#ffc53b 55%,#ffad20);color:#243d8e;font-size:17px;text-shadow:0 1px #fff8;box-shadow:0 6px 0 #db8613,0 12px 22px #182a7738,inset 0 2px #fff9}.match-screen .hint-button:active{transform:translateY(5px);box-shadow:0 1px 0 #db8613}.match-screen .hint-button:disabled{opacity:.55;filter:grayscale(.25)}
@media(max-height:700px){.match-screen{padding-top:12px}.match-screen .level-header{height:58px;flex-basis:58px}.match-screen .level-pill,.match-screen .iq-pill{height:51px}.match-screen .play-meta{min-height:39px}.match-screen .instruction{font-size:16px;margin-block:2px}.match-screen .emoji-node{width:76px;border-radius:23px}.match-screen .game-footer{height:65px;flex-basis:65px}.match-screen .hint-button{min-height:49px}}
@media(max-width:390px){.match-screen{padding-inline:13px}.match-screen .level-header{gap:58px}.match-screen .level-pill{width:125px}.match-screen .iq-pill{width:145px}.match-screen .match-board{padding-inline:4%;gap:16%}.match-screen .game-footer{grid-template-columns:1fr 1fr 104px}.match-screen .hint-button{font-size:15px}}

/* Result screen v3 — visually continuous with the blue home screen */
.complete-screen{padding:max(72px,calc(env(safe-area-inset-top) + 58px)) 20px max(22px,env(safe-area-inset-bottom));background:#4a6ce8 url("assets/ui/home_bg.webp") center/cover no-repeat}
.complete-screen::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 38%,#8fa2ff59,transparent 56%)}
.complete-screen .complete-card{position:relative;z-index:2;width:min(100%,390px);padding:30px 26px 28px;border:1px solid #ffffffb8;border-radius:34px;background:linear-gradient(160deg,#fff 0%,#fbfaff 62%,#f1eeff 100%);box-shadow:0 26px 55px #18286e4d,inset 0 1px #fff;overflow:hidden}
.complete-screen .complete-card::before{width:190px;height:190px;left:-105px;top:-100px;background:#d9fff6}.complete-screen .complete-card::after{width:190px;height:190px;right:-100px;bottom:-110px;background:#fff0c9}
.complete-screen .complete-kicker{margin:0 0 13px;padding:8px 16px;border:1px solid #e2dcff;border-radius:999px;background:#eeeaff;color:#6353bf;font-size:12px;box-shadow:0 6px 16px #6353aa12}
.complete-screen .result-icon{width:104px;margin:0 auto 13px;border:5px solid #fff;border-radius:30px;background:linear-gradient(150deg,#ffd66d,#ff963e);box-shadow:0 12px 0 #e4812b,0 20px 34px #df7d3438,inset 0 3px #fff8;transform:rotate(-3deg)}
.complete-screen .complete-card h1{margin:8px 0 2px;color:#31284f;font-size:clamp(32px,5.5vh,43px)}
.complete-screen .complete-card>p:not(.complete-kicker){margin:0 0 16px;color:#756d89;font-size:16px}
.complete-screen .result-score{width:100%;min-height:58px;margin:0 auto 18px;padding:9px 17px;border:1px solid #e5e0f5;border-radius:18px;background:#fff;box-shadow:0 8px 20px #4e417b14}.complete-screen .result-score>span{color:#898095;font-size:13px}.complete-screen .result-score strong{color:#5948b4;font-size:25px}.complete-screen .result-score small{font-size:13px}
.complete-screen .result-actions{width:100%;gap:12px}
.complete-screen .complete-card .primary-button,.complete-screen .complete-card .secondary-button{position:relative;width:100%;margin:0;border-radius:20px;background-image:none;overflow:hidden}
.complete-screen .complete-card .primary-button{min-height:64px;padding:0 56px 0 24px;border:1px solid #ffd85b;background:linear-gradient(180deg,#ffeb7b 0%,#ffc73c 54%,#ffaf20 100%);color:#263f8b;font-size:24px;text-shadow:0 1px #fff8;box-shadow:0 8px 0 #dd8914,0 16px 27px #c06b2740,inset 0 2px #fff9}
.complete-screen .complete-card .primary-button::before{content:"";position:absolute;left:10%;right:10%;top:7px;height:32%;border-radius:999px;background:linear-gradient(180deg,#fff9,#fff0)}
.complete-screen .complete-card .primary-button::after{content:"›";position:absolute;right:15px;top:50%;width:35px;height:35px;display:grid;place-items:center;border-radius:12px;background:#ffffff70;color:#29428e;font:1000 29px/1 system-ui;transform:translateY(-50%)}
.complete-screen .complete-card .primary-button:active{transform:translateY(6px);box-shadow:0 2px 0 #dd8914,0 8px 14px #c06b2735}
.complete-screen .complete-card .secondary-button{min-height:56px;border:1px solid #ded8f5;background:linear-gradient(180deg,#fff,#f0edff);color:#5d4db1;font-size:18px;box-shadow:0 8px 18px #51447d18,inset 0 1px #fff}
.complete-screen .complete-card .secondary-button::before{content:"↻";display:inline-block;margin-right:9px;color:#806fd4;font:900 19px/1 system-ui}
.complete-screen .complete-card .secondary-button:active{transform:translateY(3px);box-shadow:0 3px 9px #51447d16}
.complete-screen.is-loss .complete-card{background:linear-gradient(160deg,#fff,#fff9fb 64%,#fff0f3);border-color:#fff}.complete-screen.is-loss .result-icon{background:linear-gradient(150deg,#ffabb2,#ef6680);box-shadow:0 12px 0 #ce526c,0 20px 34px #ce526c38,inset 0 3px #fff8}.complete-screen.is-loss .complete-card .secondary-button{min-height:64px;border-color:#ffd85b;background:linear-gradient(180deg,#ffeb7b,#ffc73c 54%,#ffaf20);color:#263f8b;font-size:21px;box-shadow:0 8px 0 #dd8914,0 16px 27px #c06b2740}.complete-screen.is-loss .complete-card .secondary-button::before{content:"↻";color:#29428e}
@media(max-height:700px){.complete-screen{padding-top:65px}.complete-screen .complete-card{padding:20px 24px 22px;border-radius:29px}.complete-screen .complete-kicker{margin-bottom:8px}.complete-screen .result-icon{width:82px;margin-bottom:8px}.complete-screen .complete-card h1{font-size:31px;margin-top:5px}.complete-screen .complete-card>p:not(.complete-kicker){margin-bottom:10px}.complete-screen .result-score{min-height:51px;margin-bottom:12px}.complete-screen .complete-card .primary-button{min-height:55px}.complete-screen .complete-card .secondary-button{min-height:50px}}
@media(max-width:390px){.complete-screen{padding-inline:14px}.complete-screen .complete-card{padding-inline:20px}.complete-screen .complete-card .primary-button{font-size:21px}}

/* Language and sound live on the home screen only. */
.quick-settings{display:none!important}
.match-screen .level-header{gap:14px}.match-screen .level-pill{margin-right:auto}.match-screen .iq-pill{margin-left:auto}

/* Emoji Math mini game */
[hidden]{display:none!important}.home-dock{width:82%;grid-template-columns:repeat(3,1fr)}.home-circle-math .home-glyph{font:1000 24px/1 system-ui;color:#fff1a8}
.math-screen{padding:max(18px,env(safe-area-inset-top)) 20px max(16px,env(safe-area-inset-bottom));background:#4a6ce8 url("assets/ui/home_bg.webp") center/cover no-repeat;color:#fff}
.math-screen::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,#91a5ff55,transparent 55%);pointer-events:none}.math-screen>*{position:relative;z-index:1}
.math-header{width:100%;height:72px;display:grid;grid-template-columns:52px 1fr 70px;align-items:center;gap:10px}.math-header>div:nth-child(2){text-align:center}.math-header small{display:block;color:#dfe5ff;font:800 10px/1.2 "Game Khmer",system-ui}.math-header h1{margin:3px 0 0;color:#fff;font:900 24px/1.3 "Game Khmer",system-ui;text-shadow:0 2px 9px #2034868c}.english .math-header small,.english .math-header h1{font-family:system-ui,sans-serif}.math-back{width:46px;height:46px;border:1px solid #ffffff62;border-radius:16px;background:#ffffff24;color:#fff;font:500 38px/38px system-ui;box-shadow:inset 0 1px #fff6,0 9px 18px #1c2d7933;cursor:pointer}.math-iq{height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #ffffff62;border-radius:16px;background:#ffffff24;box-shadow:inset 0 1px #fff6}.math-iq b{font:900 16px/1 system-ui}.math-iq small{font:800 9px/1 system-ui;letter-spacing:.12em}
.math-progress{height:20px;display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 8px}.math-progress i{width:30px;height:7px;border-radius:999px;background:#ffffff35;transition:.25s}.math-progress i.current{background:#ffd45e;box-shadow:0 0 12px #ffd45e80}.math-progress i.done{background:#72e1ca}
.math-card{width:100%;flex:1 1 0;min-height:0;padding:18px 22px 16px;border:1px solid #fff;border-radius:32px;background:linear-gradient(160deg,#fff,#faf8ff 65%,#f1eeff);color:#342b50;box-shadow:0 22px 45px #19297048,inset 0 1px #fff;overflow:hidden}.math-number{width:max-content;margin:0 auto 12px;padding:7px 14px;border-radius:999px;background:#eeeaff;color:#6655c0;font:800 12px/1 "Game Khmer",system-ui}.english .math-number{font-family:system-ui,sans-serif}.math-number b{font:1000 14px/1 system-ui}
.math-equations{display:flex;flex-direction:column;gap:8px}.math-equations div{min-height:55px;display:flex;align-items:center;justify-content:center;padding:5px 12px;border:1px solid #ece7f6;border-radius:17px;background:#fff;color:#3d3455;font:900 clamp(22px,6vw,30px)/1.2 "Segoe UI Emoji",system-ui;box-shadow:0 7px 16px #50427710}.math-equations div.ask{border-color:#ffcf50;background:linear-gradient(135deg,#fffdf5,#fff3c8);box-shadow:0 0 0 3px #ffd65c38,0 8px 18px #a46e2315}
.math-prompt{margin:13px 0 9px;text-align:center;color:#756d87;font:700 14px/1.4 "Game Khmer",system-ui}.english .math-prompt{font-family:system-ui,sans-serif}.math-answers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.math-answers button{height:55px;border:1px solid #ddd7f4;border-radius:17px;background:linear-gradient(180deg,#fff,#f0edff);color:#5948b4;font:1000 23px/1 system-ui;box-shadow:0 6px 0 #d5ceee,0 10px 18px #52437d16;cursor:pointer;transition:.15s}.math-answers button:active{transform:translateY(4px);box-shadow:0 2px 0 #d5ceee}.math-answers button.correct{border-color:#53d6bb;background:linear-gradient(180deg,#8ff0dc,#52d2b8);color:#174f48;box-shadow:0 6px 0 #2caa94}.math-answers button.wrong{border-color:#ff879b;background:#fff0f3;color:#d64f6a;animation:shake .3s}.math-feedback{height:29px;margin:9px 0 0;text-align:center;color:#5d50af;font:700 13px/1.5 "Game Khmer",system-ui}.english .math-feedback{font-family:system-ui,sans-serif}
.math-footer{width:100%;height:72px;flex:0 0 72px;display:flex;align-items:center;justify-content:space-between}.math-lives{display:flex;gap:6px;padding:9px 12px;border:1px solid #ffffff55;border-radius:16px;background:#ffffff24}.math-lives i{color:#ff91a3;font:900 17px/1 system-ui;font-style:normal;text-shadow:0 2px 6px #243479}.math-lives i.lost{color:#ffffff45;filter:grayscale(1)}.math-hint{min-width:126px;height:52px;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:18px;background:linear-gradient(180deg,#ffeb78,#ffc43b 56%,#ffad20);color:#263f8b;font:900 16px/1 "Game Khmer",system-ui;box-shadow:0 6px 0 #db8613,0 12px 20px #182a7738,inset 0 2px #fff9;cursor:pointer}.english .math-hint{font-family:system-ui,sans-serif}.math-hint span{font-size:20px}.math-hint:active{transform:translateY(5px);box-shadow:0 1px 0 #db8613}.math-hint:disabled{opacity:.55}
.math-result{width:100%;flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;border:1px solid #fff;border-radius:34px;background:linear-gradient(160deg,#fff,#faf8ff 64%,#f0edff);color:#352c50;box-shadow:0 24px 48px #19297048}.math-result-icon{width:100px;aspect-ratio:1;display:grid;place-items:center;margin-bottom:14px;border:5px solid #fff;border-radius:30px;background:linear-gradient(145deg,#ffd86a,#ff9b3f);color:#fff;font:1000 55px/1 system-ui;box-shadow:0 11px 0 #dc812d,0 19px 30px #dc812d35}.math-result>small{color:#6655c0;font:900 11px/1 system-ui;letter-spacing:.12em}.math-result h2{margin:10px 0 4px;font:900 34px/1.4 "Game Khmer",system-ui}.math-result p{margin:0 0 17px;color:#756d87;font:700 15px/1.5 "Game Khmer",system-ui;text-align:center}.english .math-result h2,.english .math-result p{font-family:system-ui,sans-serif}.math-reward{width:100%;height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;margin-bottom:17px;border:1px solid #e4def5;border-radius:18px;background:#fff;box-shadow:0 8px 18px #51447d12}.math-reward span{color:#888093;font:700 13px/1 "Game Khmer",system-ui}.math-reward strong{color:#5b4ab6;font:1000 23px/1 system-ui}.math-result-primary,.math-result-home{width:100%;height:58px;border-radius:19px;font-family:"Game Khmer",system-ui;font-weight:900;cursor:pointer}.english .math-result-primary,.english .math-result-home{font-family:system-ui,sans-serif}.math-result-primary{border:0;background:linear-gradient(180deg,#ffeb78,#ffc43b 56%,#ffad20);color:#263f8b;font-size:19px;box-shadow:0 7px 0 #db8613,0 13px 23px #bd701c35}.math-result-home{height:50px;margin-top:13px;border:1px solid #ddd7f3;background:#fff;color:#6050b2;font-size:16px;box-shadow:0 7px 15px #51447d12}
@media(max-height:700px){.math-screen{padding-top:10px}.math-header{height:60px}.math-header h1{font-size:21px}.math-progress{margin:0 0 5px}.math-card{padding:12px 18px}.math-number{margin-bottom:7px}.math-equations{gap:5px}.math-equations div{min-height:44px;font-size:22px}.math-prompt{margin:8px 0 6px}.math-answers button{height:46px}.math-feedback{margin-top:5px}.math-footer{height:62px;flex-basis:62px}.math-hint{height:46px}.math-result-icon{width:80px}.math-result h2{font-size:29px}}
@media(max-width:390px){.home-dock{width:88%}.math-screen{padding-inline:13px}.math-card{padding-inline:14px}.math-equations div{font-size:20px}.math-answers{gap:7px}.math-header{grid-template-columns:46px 1fr 62px}.math-header h1{font-size:21px}}

/* Emoji Math v2 — larger, colorful and game-like */
.math-card{position:relative;display:flex;flex-direction:column;justify-content:center;padding:24px 24px 22px;border:1px solid #ffffffb8;border-radius:36px;background:linear-gradient(150deg,#c8f5eb 0%,#d5d9ff 48%,#e8cfff 100%);box-shadow:0 24px 50px #18297052,inset 0 2px #fff;overflow:hidden}
.math-card::before,.math-card::after{content:"";position:absolute;border-radius:50%;pointer-events:none}.math-card::before{width:210px;height:210px;left:-115px;top:-105px;background:#9ff4e288}.math-card::after{width:220px;height:220px;right:-120px;bottom:-125px;background:#ffd97975}.math-card>*{position:relative;z-index:1}
.math-number{margin:0 auto 18px;padding:9px 18px;border:1px solid #d8d0ff;border-radius:999px;background:#ffffffb8;color:#5c4bb5;font-size:14px;box-shadow:0 8px 18px #5a4b9a16}.math-number b{font-size:16px}
.math-equations{gap:13px}.math-equations div{min-height:76px;padding:8px 16px;border:1px solid #ffffffd9;border-radius:23px;background:linear-gradient(145deg,#ffffffdb,#f6f3ffcc);color:#352b55;font-size:clamp(29px,8vw,38px);box-shadow:0 9px 0 #cfc8e9,0 15px 24px #594b841b,inset 0 2px #fff;backdrop-filter:blur(8px)}.math-equations div:nth-child(2){background:linear-gradient(145deg,#f5fffcdd,#e3faf3d6);box-shadow:0 9px 0 #b9ddd4,0 15px 24px #3d8c7b18,inset 0 2px #fff}.math-equations div.ask{border:2px solid #ffc83e;background:linear-gradient(145deg,#fff9d9,#ffe9a0);box-shadow:0 9px 0 #e5a927,0 16px 27px #b17a2730,inset 0 2px #fff;animation:math-ask-glow 2s ease-in-out infinite}
.math-prompt{margin:20px 0 12px;color:#554a78;font-size:clamp(15px,3.8vw,18px);font-weight:800}.math-answers{gap:12px}.math-answers button{height:68px;border:1px solid #ffffffc9;border-radius:21px;background:linear-gradient(180deg,#8d7bea,#6956ce);color:#fff;font-size:30px;text-shadow:0 2px 5px #382a8a70;box-shadow:0 8px 0 #4e3cad,0 15px 24px #46358c35,inset 0 2px #fff5}.math-answers button:nth-child(2){background:linear-gradient(180deg,#6edfc8,#3bbba5);box-shadow:0 8px 0 #26917f,0 15px 24px #287d7030,inset 0 2px #fff5}.math-answers button:nth-child(3){background:linear-gradient(180deg,#ffbd68,#ff8d55);box-shadow:0 8px 0 #d76839,0 15px 24px #b95d3430,inset 0 2px #fff5}.math-answers button:active{transform:translateY(6px);box-shadow:0 2px 0 #4e3cad}.math-answers button.correct{background:linear-gradient(180deg,#8ff0dc,#4bcdb4);color:#174f48;text-shadow:none;box-shadow:0 8px 0 #259a86}.math-answers button.wrong{background:linear-gradient(180deg,#ffb0bc,#ef6f87);color:#fff;box-shadow:0 8px 0 #c84e68}
.math-feedback{height:34px;margin:12px 0 0;color:#4f4498;font-size:15px;font-weight:800}
@keyframes math-ask-glow{50%{box-shadow:0 9px 0 #e5a927,0 16px 32px #ffbd3f55,inset 0 2px #fff;transform:scale(1.012)}}
@media(max-height:760px){.math-card{padding:17px 20px}.math-number{margin-bottom:11px;padding-block:7px}.math-equations{gap:8px}.math-equations div{min-height:60px;font-size:28px;border-radius:19px}.math-prompt{margin:13px 0 8px}.math-answers button{height:56px;border-radius:18px;font-size:26px}.math-feedback{height:26px;margin-top:8px}}
@media(max-height:650px){.math-card{padding:11px 17px}.math-number{margin-bottom:6px}.math-equations{gap:5px}.math-equations div{min-height:49px;font-size:23px}.math-prompt{margin:8px 0 5px;font-size:14px}.math-answers button{height:47px;font-size:23px}.math-feedback{margin-top:5px}}
@media(max-width:390px){.math-card{padding-inline:16px}.math-equations div{font-size:27px}.math-answers{gap:8px}.math-answers button{font-size:27px}}

* {
    box-sizing: border-box
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden
}

body {
    background: #edf2fb url("assets/ui/game_bg.webp") center/cover no-repeat;
    color: var(--ink);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none
}

.game-shell {
    position: relative;
    width: min(100vw, 760px);
    height: 100vh;
    height: 100dvh;
    min-height: 560px;
    margin: auto;
    overflow: hidden;
    isolation: isolate;
    background: url("assets/ui/game_bg.webp") center/cover no-repeat;
    box-shadow: 0 0 48px #665b8a26
}

.screen {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    padding: max(18px, env(safe-area-inset-top)) clamp(18px, 4vw, 42px) max(16px, env(safe-area-inset-bottom))
}

.screen.active {
    display: flex;
    animation: screen-in .28s ease-out
}

.level-header {
    width: 100%;
    height: 76px;
    flex: 0 0 76px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.level-pill,
.iq-pill {
    height: 68px;
    background: url("assets/ui/panel_small.webp") center/100% 100% no-repeat
}

.level-pill {
    width: clamp(160px, 28%, 210px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 900
}

.level-pill span {
    color: var(--muted);
    font-size: clamp(14px, 2.5vw, 20px)
}

.level-pill strong {
    color: var(--purple);
    font-size: clamp(28px, 4.5vw, 38px)
}

.iq-pill {
    width: clamp(170px, 30%, 220px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.iq-pill>span {
    color: var(--gold);
    font-size: 28px
}

.iq-pill div {
    display: flex;
    flex-direction: column
}

.iq-pill small {
    color: var(--muted);
    font-weight: 900;
    font-size: 12px;
    line-height: 1
}

.iq-pill strong {
    color: var(--purple);
    font-size: 18px
}

.instruction {
    margin: 10px 0 12px;
    color: var(--muted);
    font-weight: 900;
    font-size: clamp(17px, 3vw, 24px)
}

.match-board {
    position: relative;
    width: 100%;
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24%;
    padding: 3% 8%;
    background: url("assets/ui/panel_game.webp") center/100% 100% no-repeat
}

#line-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.match-column {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around
}

.emoji-node {
    width: clamp(100px, 16vw, 142px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    background: transparent;
    font: 700 clamp(60px, 10vw, 92px)/1 "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
    filter: drop-shadow(0 7px 5px #4b42602b);
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s, filter .15s, opacity .15s
}

.emoji-node:active,
.emoji-node.selected {
    transform: scale(1.13);
    filter: drop-shadow(0 0 16px #f5ae4dcc)
}

.emoji-node.matched {
    transform: scale(.92);
    opacity: .72;
    filter: drop-shadow(0 0 12px #30c0ad99)
}

.emoji-node.wrong {
    animation: shake .3s
}

.emoji-node.hinted {
    animation: hint-pulse .65s ease 3
}

.game-footer {
    width: 100%;
    height: 82px;
    flex: 0 0 82px;
    display: grid;
    grid-template-columns: 1fr 1.4fr 150px;
    align-items: center;
    gap: 12px
}

.progress-dots {
    display: flex;
    gap: 9px
}

.progress-dots i {
    width: 18px;
    aspect-ratio: 1;
    display: block;
    background: url("assets/ui/progress_track.webp") center/100% 100% no-repeat;
    border-radius: 50%
}

.progress-dots i.done {
    background-image: url("assets/ui/progress_fill.webp")
}

.feedback {
    margin: 0;
    text-align: center;
    color: var(--mint);
    font-size: clamp(15px, 2.4vw, 20px);
    font-weight: 900
}

.feedback.bad {
    color: var(--danger)
}

.asset-button {
    border: 0;
    color: #fff;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    font-family: inherit;
    font-weight: 900;
    text-shadow: 0 2px 2px #40305040
}

.asset-button:active {
    transform: translateY(3px) scale(.98)
}

.hint-button {
    width: 100%;
    min-height: 58px;
    background-image: url("assets/ui/btn_hint.webp");
    font-size: 18px;
    color: #174c48
}

.complete-screen {
    justify-content: center;
    text-align: center
}

.complete-kicker {
    margin: 0 0 18px;
    color: var(--purple);
    font-size: clamp(24px, 4vw, 34px);
    font-weight: 900
}

.result-badge {
    width: min(42vw, 260px);
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url("assets/ui/result_badge.webp") center/contain no-repeat
}

.result-badge span {
    color: #573c68;
    font: 1000 clamp(48px, 9vw, 72px)/1 system-ui
}

.result-badge span b {
    font: inherit
}

.result-badge small {
    color: #6b4d70;
    font-size: 25px;
    font-weight: 1000
}

.complete-screen h1 {
    margin: 20px 0 6px;
    font-size: clamp(38px, 7vw, 56px)
}

.complete-screen p:not(.complete-kicker) {
    margin: 0 0 26px;
    color: var(--muted);
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 700
}

.primary-button {
    width: min(92%, 420px);
    min-height: 82px;
    background-image: url("assets/ui/btn_primary.webp");
    color: #57354e;
    font-size: 28px
}

.secondary-button {
    width: min(82%, 370px);
    min-height: 68px;
    margin-top: 8px;
    background-image: url("assets/ui/btn_secondary.webp");
    font-size: 22px
}

@keyframes screen-in {
    from {
        opacity: 0;
        transform: scale(.98)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes shake {
    25% {
        transform: translateX(-10px)
    }

    75% {
        transform: translateX(10px)
    }
}

@keyframes hint-pulse {
    50% {
        transform: scale(1.18);
        filter: drop-shadow(0 0 18px #f5ae4d)
    }
}

@media(max-width:520px) {
    .screen {
        padding-left: 14px;
        padding-right: 14px
    }

    .level-header {
        height: 68px;
        flex-basis: 68px
    }

    .level-pill,
    .iq-pill {
        height: 60px
    }

    .level-pill {
        width: 44%
    }

    .iq-pill {
        width: 48%
    }

    .match-board {
        gap: 17%;
        padding-left: 4%;
        padding-right: 4%
    }

    .emoji-node {
        width: clamp(88px, 24vw, 118px);
        font-size: clamp(54px, 16vw, 76px)
    }

    .game-footer {
        grid-template-columns: 1fr 1.3fr 100px;
        gap: 6px
    }

    .progress-dots {
        gap: 5px
    }

    .progress-dots i {
        width: 14px
    }

    .hint-button {
        font-size: 16px
    }
}

@media(max-height:650px) {
    .instruction {
        margin: 3px 0 6px
    }

    .game-footer {
        height: 66px;
        flex-basis: 66px
    }

    .emoji-node {
        width: 86px;
        font-size: 54px
    }
}

.complete-screen {
    padding: clamp(12px, 3vh, 28px);
    justify-content: center
}

.complete-card {
    width: min(100%, 560px);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 3vh, 28px) clamp(20px, 5vw, 44px);
    background: url("assets/ui/panel_game.webp") center/100% 100% no-repeat
}

.complete-kicker {
    margin: 0 0 clamp(8px, 1.5vh, 14px);
    font: 900 clamp(15px, 2.5vw, 21px)/1.2 system-ui, sans-serif;
    letter-spacing: .08em
}

.complete-card .result-badge {
    width: clamp(128px, 24vh, 190px);
    flex: 0 0 auto
}

.complete-card .result-badge span {
    font-size: clamp(40px, 8vh, 64px)
}

.complete-card .result-badge small {
    font-size: clamp(16px, 3vh, 23px)
}

.complete-card h1 {
    margin: clamp(8px, 1.6vh, 15px) 0 2px;
    font-family: "Khmer OS Battambang", "Khmer OS", sans-serif;
    font-size: clamp(30px, 6vh, 46px);
    line-height: 1.35
}

.complete-card>p:not(.complete-kicker) {
    margin: 0 0 clamp(12px, 2vh, 20px);
    font-family: "Khmer OS Battambang", "Khmer OS", sans-serif;
    font-size: clamp(15px, 2.7vh, 21px);
    line-height: 1.35
}

.result-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px
}

.complete-card .primary-button {
    width: min(100%, 360px);
    min-height: clamp(54px, 9vh, 70px);
    font-family: "Khmer OS Battambang", "Khmer OS", sans-serif;
    font-size: clamp(20px, 3.8vh, 27px)
}

.complete-card .secondary-button {
    width: min(90%, 320px);
    min-height: clamp(48px, 7.5vh, 60px);
    margin: 0;
    font-family: "Khmer OS Battambang", "Khmer OS", sans-serif;
    font-size: clamp(17px, 3vh, 22px)
}

@media(max-height:680px) {
    .complete-screen {
        padding: 10px
    }

    .complete-card {
        padding: 12px 28px
    }

    .complete-kicker {
        margin-bottom: 6px
    }

    .complete-card .result-badge {
        width: 125px
    }

    .complete-card h1 {
        margin-top: 5px;
        font-size: 31px
    }

    .complete-card>p:not(.complete-kicker) {
        margin-bottom: 8px;
        font-size: 16px
    }

    .complete-card .primary-button {
        min-height: 52px
    }

    .complete-card .secondary-button {
        min-height: 46px
    }
}

@font-face {
    font-family: "Game Khmer";
    src: url("assets/fonts/KhmerOSsiemreap.ttf") format("truetype");
    font-display: swap
}

.instruction,
.feedback,
.hint-button,
.complete-card h1,
.complete-card>p:not(.complete-kicker),
.complete-card .primary-button,
.complete-card .secondary-button {
    font-family: "Game Khmer", "Khmer OS Siemreap", sans-serif
}

.emoji-node.custom-icon {
    background-repeat: no-repeat;
    background-size: 400% 300%;
    background-position: var(--sprite-x) var(--sprite-y);
    filter: drop-shadow(0 9px 7px #392d5530)
}

.tutorial-hand {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 8;
    width: 86px;
    aspect-ratio: 1;
    background: url("assets/game/tutorial-hand.webp") center/contain no-repeat;
    pointer-events: none;
    opacity: 0
}

.tutorial-hand.show {
    opacity: 1
}

.emoji-node.tutorial-target {
    border-radius: 28px;
    outline: 5px solid #69d741;
    outline-offset: -5px;
    filter: drop-shadow(0 0 15px #69d74180)
}

.special-screen {
    justify-content: flex-start
}

.special-header {
    width: 100%;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.special-tag {
    padding: 12px 22px;
    border-radius: 999px;
    background: #ff6f91;
    color: #fff;
    font: 900 16px/1 system-ui;
    letter-spacing: .08em;
    box-shadow: 0 6px 14px #d94c7138
}

.special-progress {
    display: flex;
    gap: 10px;
    margin: 14px 0
}

.special-progress i {
    width: 54px;
    height: 10px;
    border-radius: 20px;
    background: #ddd7ed
}

.special-progress i.done {
    background: #47cdb8
}

.special-card {
    width: min(100%, 620px);
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: url("assets/ui/panel_game.webp") center/100% 100% no-repeat
}

.special-card>p {
    margin: 0;
    color: var(--muted);
    font: 700 18px/1.4 "Game Khmer", sans-serif
}

.special-card h2 {
    margin: 8px 0 28px;
    text-align: center;
    color: var(--ink);
    font: 700 clamp(25px, 4vw, 36px)/1.5 "Game Khmer", sans-serif
}

.choice-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px
}

.choice-item {
    width: 100%;
    aspect-ratio: 1;
    border: 0;
    border-radius: 28px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 400% 300%;
    background-position: var(--sprite-x) var(--sprite-y);
    box-shadow: 0 7px 18px #665b8a20, inset 0 0 0 3px #e4def5;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s
}

.choice-item:active {
    transform: scale(.94)
}

.choice-item.correct {
    box-shadow: 0 0 0 6px #55d34b, 0 8px 20px #55d34b3d;
    animation: choice-pop .35s
}

.choice-item.wrong {
    box-shadow: 0 0 0 6px #f2647e;
    animation: shake .3s
}

.special-feedback {
    height: 42px;
    margin: 10px 0 0;
    color: var(--mint);
    font: 700 20px/1.4 "Game Khmer", sans-serif
}

.special-feedback.bad {
    color: var(--danger)
}

@keyframes choice-pop {
    50% {
        transform: scale(1.1)
    }
}

@media(max-width:520px) {
    .choice-grid {
        gap: 8px
    }

    .choice-item {
        border-radius: 20px
    }

    .special-card {
        padding: 16px
    }

    .special-card h2 {
        margin-bottom: 18px
    }
}

.quick-settings {
    position: absolute;
    z-index: 60;
    left: 50%;
    top: max(28px, env(safe-area-inset-top));
    display: flex;
    gap: 7px;
    transform: translateX(-50%)
}

.quick-settings button {
    height: 36px;
    min-width: 45px;
    padding: 0 11px;
    border: 0;
    border-radius: 18px;
    background: #fff;
    color: var(--purple);
    font: 900 13px/1 system-ui;
    box-shadow: 0 4px 12px #5b4c8126;
    cursor: pointer
}

.quick-settings button:active {
    transform: scale(.92)
}

.chapter-label {
    margin-top: -5px;
    color: var(--purple);
    font: 900 clamp(11px, 1.8vw, 14px)/1 system-ui;
    letter-spacing: .08em
}

.english .instruction,
.english .feedback,
.english .special-card p,
.english .special-card h2,
.english .special-feedback,
.english .complete-card h1,
.english .complete-card p,
.english .asset-button {
    font-family: system-ui, sans-serif
}

.fx-layer {
    position: absolute;
    inset: 0;
    z-index: 55;
    pointer-events: none;
    overflow: hidden
}

.spark {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: #ffcb50;
    animation: spark-out .65s ease-out forwards
}

.spark:nth-child(3n) {
    background: #ff6f91;
    border-radius: 50%
}

.spark:nth-child(3n+1) {
    background: #52d9c2;
    transform: rotate(45deg)
}

.emoji-node.entering,
.choice-item.entering {
    animation: node-in .45s cubic-bezier(.2, .9, .3, 1.25) both
}

.emoji-node.match-pop {
    animation: match-pop .42s ease-out
}

.emoji-node:not(.entering):not(.matched):not(.selected):not(.wrong):not(.hit-stop):not(.snap-ready) {
    animation-name: gentle-float;
    animation-duration: 3.4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out
}

.match-column .emoji-node:nth-child(2) {
    animation-delay: .35s
}

.match-column .emoji-node:nth-child(3) {
    animation-delay: .7s
}

.match-column .emoji-node:nth-child(4) {
    animation-delay: 1.05s
}

@keyframes node-in {
    from {
        opacity: 0;
        transform: translateY(22px) scale(.72)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes match-pop {
    50% {
        transform: scale(1.22) rotate(4deg)
    }
}

@keyframes gentle-float {
    50% {
        transform: translateY(-5px)
    }
}

@keyframes spark-out {
    to {
        opacity: 0;
        transform: translate(var(--dx), var(--dy)) rotate(180deg) scale(.25)
    }
}

@media(prefers-reduced-motion:reduce) {

    .emoji-node,
    .choice-item,
    .spark,
    .title-float i,
    .title-screen .primary-button,
    #daily-button.ready {
        animation: none !important
    }

    .tutorial-hand {
        display: none
    }
}

.screen {
    z-index: 2
}

.game-shell {
    transition: filter .5s
}

.game-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    transition: background .55s ease
}

.game-shell[data-chapter="0"]::before {
    background: linear-gradient(180deg, #fff6d820, #cde8ff18 55%, transparent)
}

.game-shell[data-chapter="1"]::before {
    background: linear-gradient(180deg, #ffe2b428, #ffd4a318 40%, #c8f0d814)
}

.game-shell[data-chapter="2"]::before {
    background: linear-gradient(180deg, #2a215e22, #6b5bd028 35%, #1a144018)
}

.title-screen {
    justify-content: center;
    text-align: center;
    z-index: 3
}

.title-float {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0
}

.title-float i {
    position: absolute;
    font-size: clamp(36px, 8vw, 58px);
    opacity: .82;
    filter: drop-shadow(0 8px 8px #392d5530);
    animation: gentle-float 3.2s ease-in-out infinite
}

.title-float i:nth-child(1) {
    left: 10%;
    top: 18%
}

.title-float i:nth-child(2) {
    right: 12%;
    top: 22%;
    animation-delay: .4s
}

.title-float i:nth-child(3) {
    left: 14%;
    bottom: 22%;
    animation-delay: .8s
}

.title-float i:nth-child(4) {
    right: 16%;
    bottom: 20%;
    animation-delay: 1.1s
}

.title-float i:nth-child(5) {
    left: 44%;
    top: 12%;
    animation-delay: .2s
}

.title-float i:nth-child(6) {
    left: 46%;
    bottom: 14%;
    animation-delay: .6s
}

.title-kicker {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    color: var(--purple);
    font: 900 clamp(13px, 2.2vw, 16px)/1 system-ui;
    letter-spacing: .14em
}

.title-screen h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: "Game Khmer", "Khmer OS Siemreap", sans-serif;
    font-size: clamp(42px, 8vh, 68px);
    line-height: 1.25;
    color: var(--ink)
}

.title-screen #title-tag {
    position: relative;
    z-index: 1;
    margin: 8px 0 0;
    color: var(--muted);
    font: 700 clamp(18px, 3.2vh, 24px)/1.4 "Game Khmer", sans-serif
}

.title-screen .primary-button {
    position: relative;
    z-index: 1;
    width: min(86%, 380px);
    min-height: clamp(64px, 10vh, 82px);
    margin-top: 34px;
    font-family: "Game Khmer", sans-serif;
    font-size: clamp(24px, 4.4vh, 32px);
    animation: btn-wait 1.6s ease-in-out infinite
}

@keyframes btn-wait {
    50% {
        transform: translateY(-4px) scale(1.03)
    }
}

.emoji-node.selected {
    transform: scale(1.16) rotate(-3deg)
}

.emoji-node.hit-stop {
    animation: none;
    transform: scale(1.08);
    filter: brightness(1.35) drop-shadow(0 0 22px #fff4c8)
}

.emoji-node.snap-ready {
    transform: scale(1.18);
    filter: drop-shadow(0 0 18px #ffd75ecc)
}

.match-board.busy .emoji-node {
    width: clamp(72px, 13.5vw, 112px);
    font-size: clamp(44px, 8vw, 70px)
}

.fx-layer.hit-flash {
    background: #fff4
}

.choice-item {
    font: 700 clamp(44px, 8vw, 70px)/1 "Segoe UI Emoji", "Apple Color Emoji", sans-serif
}

.choice-item.custom-icon {
    font-size: 0;
    color: transparent;
    background-color: transparent
}

.emoji-node:not(.custom-icon),
.choice-item:not(.custom-icon) {
    background-color: transparent;
    filter: drop-shadow(0 9px 7px #392d5530)
}

#daily-button.ready {
    box-shadow: none;
    animation: none
}

.english .title-screen h1,
.english .title-screen #title-tag,
.english .title-screen .primary-button {
    font-family: system-ui, sans-serif
}

@media(max-width:520px) {
    .title-screen .primary-button {
        min-height: 64px
    }

    .match-board.busy {
        gap: 12%;
        padding-left: 2%;
        padding-right: 2%
    }
}

@media(max-height:650px) {
    .match-board.busy .emoji-node {
        width: 62px;
        font-size: 38px
    }

    .title-screen h1 {
        font-size: 40px
    }

    .title-screen .primary-button {
        margin-top: 18px;
        min-height: 56px
    }
}

body {
    background: #14183a
}

.game-shell {
    width: min(100vw, 460px);
    height: 100vh;
    height: 100dvh
}

@media(min-aspect-ratio:10/16) {
    body {
        display: grid;
        place-items: center
    }

    .game-shell {
        height: min(100dvh, calc(min(100vw, 460px)*1.72));
        /* border-radius: 28px; */
        box-shadow: 0 0 0 3px #2b3478, 0 28px 70px #0007
    }
}

.game-shell.home .quick-settings {
    display: none
}

.game-shell.home::before {
    display: none
}

.title-screen .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    font-size: 1px;
    color: transparent
}

.title-screen {
    justify-content: space-between;
    align-items: center;
    text-align: center;
    z-index: 3;
    gap: 0;
    padding: max(18px, env(safe-area-inset-top)) 22px max(16px, env(safe-area-inset-bottom));
    background: #4a6ce8 url("assets/ui/home_bg.webp") center/cover no-repeat;
    overflow: hidden
}

.home-bar {
    width: 100%;
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    pointer-events: none
}

.home-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 2px;
    color: #fff;
    font: 800 13px/1 "Game Khmer", system-ui;
    text-shadow: 0 1px 2px #0c1848, 0 2px 8px #0c1848cc
}

.home-stat i {
    color: #ffd45e;
    font-style: normal;
    font-size: 11px
}

.home-stat-iq {
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    padding: 2px 0
}

.home-stat-iq b {
    font: 900 18px/1 system-ui
}

.home-stat-iq small {
    color: #d7ddff;
    font: 800 9px/1 system-ui;
    letter-spacing: .16em
}

.home-logo {
    position: relative;
    z-index: 2;
    width: min(78%, 340px);
    height: auto;
    margin: 6px auto 0;
    filter: drop-shadow(0 10px 14px #1a267a50);
    pointer-events: none
}

.title-screen #title-tag {
    position: relative;
    z-index: 2;
    margin: 2px 0 0;
    color: #eef2ff;
    font: 700 15px/1.4 "Game Khmer", sans-serif;
    text-shadow: 0 2px 8px #24348c90
}

.home-hero {
    position: relative;
    z-index: 2;
    width: 90%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px 4px;
    margin: 10px auto 0;
    background: none;
    box-shadow: none
}

.hero-slot {
    width: 88px;
    height: 88px;
    flex: 0 0 88px;
    display: grid;
    place-items: center;
    background: none;
    box-shadow: none
}

.hero-slot-flower,
.hero-slot-bee {
    background: none
}

.hero-icon {
    width: 78px;
    aspect-ratio: 1;
    background-image: url("assets/game/emoji-sprites-v1.webp");
    background-repeat: no-repeat;
    background-size: 400% 300%;
    filter: drop-shadow(0 10px 10px #1a267a55);
    animation: home-float 3s ease-in-out infinite
}

.hero-flower {
    background-position: 33.333% 50%
}

.hero-bee {
    background-position: 0 50%;
    animation-delay: .4s
}

.hero-path {
    position: relative;
    width: 92px;
    height: 48px;
    flex: 1 1 92px;
    max-width: 118px
}

.hero-path svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible
}

.hero-path path {
    animation: dash-flow 1.1s linear infinite
}

.hero-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffd86a, #ff8f2e);
    color: #fff;
    font: 1000 16px/1 system-ui;
    transform: translate(-50%, -50%);
    box-shadow: 0 6px 12px #e17a5248;
    animation: check-pulse 2s ease-in-out infinite
}

.home-cta {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: auto;
    padding-top: 18px
}

.home-play {
    position: relative;
    z-index: 2;
    display: block;
    width: min(56%, 230px);
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: #1e3a8a;
    font: 900 22px/1 "Game Khmer", sans-serif;
    text-shadow: 0 2px 0 #fff8, 0 1px 0 #c9a00c;
    cursor: pointer;
    filter: drop-shadow(0 10px 12px #1a267a48);
    animation: btn-wait 1.8s ease-in-out infinite
}

.home-play-art {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none
}

.home-play span {
    position: absolute;
    left: 30%;
    right: 9%;
    top: 8%;
    bottom: 18%;
    display: grid;
    place-items: center;
    letter-spacing: .02em
}

.home-play:active {
    animation: none;
    transform: translateY(5px) scale(.98);
    filter: drop-shadow(0 4px 8px #1a267a40)
}

.home-stage {
    margin: 14px 0 16px;
    color: #eef2ff;
    font: 800 15px/1 "Game Khmer", system-ui;
    text-shadow: 0 2px 8px #24348c90
}

.home-dock {
    width: 88%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px 0 8px;
    background: none;
    box-shadow: none
}

.home-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer
}

.home-glyph {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff, #eef1ff);
    color: #4a5fe0;
    font: 900 14px/1 system-ui;
    box-shadow: 0 6px 0 #c9d0ee, 0 12px 16px #1d2c8038, inset 0 2px #fff
}

.home-dock .home-glyph {
    background: #10183ed4;
    border: 1.5px solid #ffffff58;
    box-shadow: 0 8px 16px #08103870, inset 0 1px #ffffff35;
    backdrop-filter: blur(12px);
    color: #fff
}

.home-dock .home-glyph img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px #0006) drop-shadow(0 0 6px #fff5)
}

.home-math-icon {
    font-size: 34px;
    font-weight: 800;
    color: #ffe56a;
    text-shadow: 0 2px 0 #c48a10, 0 4px 10px #0005
}

.home-circle-math .home-glyph {
    font-size: 34px;
    filter: none
}

#daily-button .home-glyph,
#home-settings .home-glyph {
    background: #10183ed4
}

#home-sfx .home-glyph {
    color: #4a5fe0;
    font-size: 15px
}

#home-music .home-glyph {
    color: #6d5bd0;
    font-size: 22px
}

#home-lang .home-glyph {
    color: #4a5fe0
}

#home-lang-glyph {
    font-size: 11px;
    font-family: "Game Khmer", sans-serif
}

.english #home-lang-glyph {
    font-size: 15px;
    font-family: system-ui, sans-serif
}

.home-circle:active .home-glyph {
    transform: translateY(3px) scale(.96);
    box-shadow: none
}

.home-circle small {
    font: 700 12px/1.2 "Game Khmer", sans-serif;
    text-shadow: 0 1px 4px #24348c80
}

#daily-button.ready .home-glyph {
    animation: hint-pulse 1.1s ease infinite
}

.english .title-screen #title-tag,
.english .home-play,
.english .home-stage,
.english .home-stat,
.english .home-circle small,
.english .settings-card h2,
.english .settings-row small,
.english .settings-row strong {
    font-family: system-ui, sans-serif
}

.settings-overlay {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    visibility: hidden
}

.settings-overlay.open {
    pointer-events: auto;
    visibility: visible
}

.settings-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: #14183a66;
    opacity: 0;
    transition: opacity .2s ease;
    cursor: pointer
}

.settings-overlay.open .settings-backdrop {
    opacity: 1
}

.settings-card {
    position: relative;
    z-index: 1;
    width: 88%;
    margin-bottom: max(18px, env(safe-area-inset-bottom));
    padding: 22px 16px 14px;
    border-radius: 28px;
    background: linear-gradient(180deg, #fff, #f4f1ff);
    box-shadow: 0 18px 40px #1a267a45;
    transform: translateY(28px);
    opacity: 0;
    transition: transform .22s ease, opacity .22s ease
}

.settings-overlay.open .settings-card {
    transform: none;
    opacity: 1
}

.settings-card h2 {
    margin: 0 8px 14px;
    color: #2c3a9a;
    font: 900 22px/1.2 "Game Khmer", sans-serif
}

.settings-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #eef0ff;
    color: #4a5fe0;
    font: 700 22px/1 system-ui;
    cursor: pointer
}

.settings-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    padding: 10px 12px;
    border: 1.5px solid #d4d0ee;
    border-radius: 22px;
    background: #e8eaff;
    color: #2c3a9a;
    text-align: left;
    box-shadow: 0 4px 0 #d0ccea;
    cursor: pointer
}

.settings-row:active {
    transform: scale(.98)
}

.settings-row.is-off {
    background: #eceef6;
    border-color: #dddfe8
}

.settings-row.is-off strong {
    color: #8b93c2
}

.settings-row span {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.settings-row small {
    color: #7b88d4;
    font: 700 12px/1 "Game Khmer", sans-serif
}

.settings-row strong {
    font: 800 18px/1.2 "Game Khmer", sans-serif
}

.settings-row .home-glyph {
    flex: 0 0 54px;
    border: 1.5px solid #cfd6f5
}

@keyframes home-float {
    50% {
        transform: translateY(-5px)
    }
}

@keyframes dash-flow {
    to {
        stroke-dashoffset: -17
    }
}

@keyframes check-pulse {
    50% {
        box-shadow: 0 6px 12px #e17a5248, 0 0 0 8px #ffd86a33
    }
}

@media(max-height:700px) {
    .home-logo {
        width: min(70%, 280px)
    }

    .hero-slot {
        width: 72px;
        height: 72px;
        flex-basis: 72px
    }

    .hero-icon {
        width: 64px
    }

    .home-play {
        font-size: 20px;
        width: min(62%, 210px)
    }

    .home-glyph {
        width: 46px;
        height: 46px
    }

    .home-hero {
        padding: 12px 10px;
        width: 86%
    }

    .home-dock {
        padding: 8px 4px
    }
}

@media(prefers-reduced-motion:reduce) {
    .hero-icon,
    .hero-path path,
    .hero-center,
    .home-play,
    #daily-button.ready .home-glyph,
    .settings-backdrop,
    .settings-card {
        animation: none !important;
        transition: none !important
    }
}

/* Polished win / try-again experience */
.play-meta{width:100%;display:flex;align-items:center;justify-content:center;position:relative}.play-meta .instruction{margin-inline:auto}.lives{position:absolute;right:4px;display:flex;gap:4px;padding:6px 9px;border:1px solid #eadff3;border-radius:13px;background:#fff;box-shadow:0 5px 14px #53457112}.lives i{color:#ff6f87;font:900 15px/1 system-ui;font-style:normal;transition:.25s}.lives i.lost{color:#ddd6e5;transform:scale(.8);filter:grayscale(1)}
.complete-screen{padding:clamp(18px,4vh,38px);background:radial-gradient(circle at 50% 35%,#fff9,#f5f1ffb8 55%,transparent 75%)}
.complete-card{position:relative;width:min(100%,520px);max-height:none;padding:clamp(26px,4vh,40px) clamp(24px,6vw,50px);border:1px solid #ded7f5;border-radius:38px;background:linear-gradient(160deg,#fff 0%,#fbf9ff 62%,#f3efff 100%);box-shadow:0 28px 65px #51417e24,inset 0 1px #fff;overflow:hidden}
.complete-card::before{content:"";position:absolute;width:240px;height:240px;left:-120px;top:-130px;border-radius:50%;background:#d9fff6}.complete-card::after{content:"";position:absolute;width:230px;height:230px;right:-120px;bottom:-140px;border-radius:50%;background:#fff0cd}
.complete-kicker{position:relative;z-index:2;margin:0 0 14px;padding:8px 15px;border-radius:999px;background:#eeeaff;color:#6858c6;font-size:clamp(12px,2vw,15px);letter-spacing:.1em}
.result-icon{position:relative;z-index:2;width:clamp(100px,17vh,128px);aspect-ratio:1;display:grid;place-items:center;margin:2px auto 14px;border:6px solid #fff;border-radius:35%;background:linear-gradient(145deg,#ffd56c,#ff9866);color:#fff;font:1000 clamp(50px,9vh,72px)/1 system-ui;box-shadow:0 16px 34px #e6845e45,inset 0 3px #fff8;transform:rotate(-4deg);animation:result-pop .6s cubic-bezier(.2,.9,.25,1.2)}
.complete-card h1{position:relative;z-index:2;margin:4px 0;color:#392f54;font-size:clamp(34px,5.7vh,48px);line-height:1.3}.complete-card>p:not(.complete-kicker){position:relative;z-index:2;margin:0 0 18px;color:#776f87;font-size:clamp(15px,2.5vh,19px);line-height:1.5;text-align:center}
.result-score{position:relative;z-index:2;width:min(100%,360px);min-height:62px;display:flex;align-items:center;justify-content:space-between;padding:10px 17px;margin:0 auto 18px;border:1px solid #ebe5f7;border-radius:19px;background:#fff;box-shadow:0 8px 22px #55468112}.result-score>span{color:#8b829a;font:700 15px/1.3 "Game Khmer",sans-serif}.result-score strong{color:#604fb5;font:1000 27px/1 system-ui}.result-score small{font-size:14px}
.result-actions{position:relative;z-index:2;gap:10px}.complete-card .primary-button,.complete-card .secondary-button{border-radius:19px;background-image:none;text-shadow:none;transition:.15s}.complete-card .primary-button{min-height:62px;border:1px solid #ff9a5e;background:linear-gradient(135deg,#ffc05e,#ff8b70);color:#49334f;box-shadow:0 8px 0 #e7765d,0 14px 25px #d9714f30,inset 0 2px #fff8}.complete-card .secondary-button{min-height:55px;border:1px solid #d9d2f3;background:linear-gradient(180deg,#fff,#f2efff);color:#6657b6;box-shadow:0 7px 15px #53467a16}.complete-card .primary-button:active{transform:translateY(6px);box-shadow:0 2px 0 #e7765d}
.result-sparkles i{position:absolute;z-index:1;width:9px;height:9px;border-radius:3px;background:#72d8c3;animation:result-twinkle 1.8s ease-in-out infinite}.result-sparkles i:nth-child(1){left:12%;top:18%}.result-sparkles i:nth-child(2){right:13%;top:22%;background:#ffbd56;animation-delay:.3s}.result-sparkles i:nth-child(3){left:18%;top:46%;background:#9b89eb;animation-delay:.6s}.result-sparkles i:nth-child(4){right:16%;top:49%;background:#ff7c91;animation-delay:.9s}.result-sparkles i:nth-child(5){left:9%;bottom:18%;background:#ffbd56;animation-delay:1.2s}.result-sparkles i:nth-child(6){right:10%;bottom:16%;animation-delay:1.5s}
.complete-screen.is-loss .complete-card{background:linear-gradient(160deg,#fff,#fff8fa 65%,#fff0f3);border-color:#f3d9df}.complete-screen.is-loss .complete-kicker{background:#fff0f3;color:#c25972}.complete-screen.is-loss .result-icon{background:linear-gradient(145deg,#ff9a9f,#ef647d);box-shadow:0 16px 34px #d9537040;transform:rotate(4deg)}.complete-screen.is-loss .result-score strong{color:#b6acbd}.complete-screen.is-loss .result-sparkles{display:none}.complete-screen.is-loss .secondary-button{width:min(100%,360px);min-height:62px;border-color:#ff9aa8;background:linear-gradient(135deg,#ff9da8,#f2738b);color:#fff;box-shadow:0 8px 0 #d95d76,0 14px 25px #d95d7630}
@keyframes result-pop{from{opacity:0;transform:scale(.45) rotate(-18deg)}70%{transform:scale(1.08) rotate(2deg)}}@keyframes result-twinkle{50%{transform:rotate(90deg) scale(1.8);opacity:.35}}
@media(max-height:680px){.complete-card{padding:18px 28px;border-radius:30px}.complete-kicker{margin-bottom:8px}.result-icon{width:88px;margin-bottom:8px}.complete-card h1{font-size:32px}.complete-card>p:not(.complete-kicker){margin-bottom:10px}.result-score{min-height:52px;margin-bottom:11px}.complete-card .primary-button,.complete-card .secondary-button{min-height:51px}.lives{padding:5px 7px}.lives i{font-size:13px}}
.special-header .lives{position:static;margin-inline:auto}.special-header{gap:10px}

.game-shell .complete-screen {
    justify-content: center;
    padding: max(22px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom));
    background: #4a6ce8 url("assets/ui/home_bg.webp") center / cover no-repeat
}

.game-shell .complete-card {
    width: min(92%, 340px);
    padding: 22px 18px 16px;
    border: 1px solid #ffffff55;
    border-radius: 32px;
    background: linear-gradient(180deg, #fffffff0, #f3f0ffe8);
    box-shadow: 0 22px 44px #1a267a45, inset 0 1px #fff
}

.game-shell .result-actions {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%
}

.img-btn {
    position: relative;
    display: block;
    flex: 1 1 0;
    width: auto;
    max-width: 148px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #1e3a8a;
    font: 900 13px/1 "Game Khmer", sans-serif;
    text-shadow: 0 2px 0 #fff8, 0 1px 0 #c9a00c55;
    cursor: pointer;
    filter: drop-shadow(0 6px 8px #1a267a40)
}

.img-btn img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none
}

.img-btn span {
    position: absolute;
    top: 8%;
    bottom: 16%;
    display: grid;
    place-items: center;
    text-align: center
}

.img-btn-go span {
    left: 8%;
    right: 30%
}

.img-btn-back {
    font-size: 10px;
    text-shadow: 0 1px 0 #fff
}

.img-btn-back span {
    left: 26%;
    right: 8%
}

.img-btn:active {
    transform: translateY(4px) scale(.98);
    filter: drop-shadow(0 3px 6px #1a267a35)
}

.english .img-btn {
    font-family: system-ui, sans-serif
}

.english .img-btn-back {
    font-size: 9px;
    letter-spacing: 0
}

.game-shell .complete-screen.is-loss .result-actions {
    justify-content: center
}

.game-shell .complete-screen.is-loss .img-btn-back {
    flex: 0 1 auto;
    width: min(56%, 168px);
    max-width: 168px
}

.game-shell .match-screen .level-pill,
.game-shell .match-screen .iq-pill,
.game-shell .special-screen .level-pill {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    pointer-events: none;
    gap: 6px
}

.game-shell .match-screen .level-pill span,
.game-shell .special-screen .level-pill span {
    color: #dce3ff;
    font: 800 12px/1 "Game Khmer", system-ui;
    text-shadow: 0 1px 4px #102050
}

.game-shell .match-screen .level-pill strong,
.game-shell .special-screen .level-pill strong {
    color: #fff;
    font: 900 26px/1 system-ui;
    text-shadow: 0 2px 8px #102050
}

.game-shell .match-screen .iq-pill>span {
    font-size: 14px;
    color: #ffd45e;
    text-shadow: 0 1px 4px #102050
}

.game-shell .match-screen .iq-pill small {
    color: #d7ddff;
    font: 800 10px/1 system-ui;
    letter-spacing: .08em
}

.game-shell .match-screen .iq-pill strong {
    color: #fff;
    font: 900 16px/1 system-ui;
    text-shadow: 0 2px 8px #102050
}

.game-shell .match-screen .chapter-label {
    margin-top: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    color: #d7ddff;
    box-shadow: none;
    pointer-events: none;
    text-shadow: 0 1px 4px #102050
}

.game-shell .match-screen .lives,
.game-shell .special-screen .lives {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    pointer-events: none
}

.game-shell .match-screen .lives i,
.game-shell .special-screen .lives i {
    font-size: 16px;
    filter: drop-shadow(0 1px 3px #10205080)
}

.game-shell .match-screen .progress-dots {
    gap: 7px;
    padding: 0;
    border-radius: 0;
    background: none;
    pointer-events: none
}

.game-shell .match-screen .progress-dots i {
    width: 9px;
    background: #ffffff50;
    border: 0;
    box-shadow: none
}

.game-shell .match-screen .progress-dots i.done {
    background: #ffd45f;
    border: 0;
    box-shadow: 0 0 8px #ffd45f90
}

.game-shell .match-screen .hint-button {
    min-height: 52px;
    border: 5px solid #1e3a8a;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffe97a 0%, #ffc53b 52%, #ffad20 100%);
    background-image: none;
    color: #1e3a8a;
    font: 900 17px/1 "Game Khmer", sans-serif;
    text-shadow: 0 1px #fff8;
    box-shadow: 0 5px 0 #152a68, 0 10px 18px #1a267a40, inset 0 2px #fff8;
    cursor: pointer
}

.game-shell .match-screen .hint-button:active {
    transform: translateY(4px);
    box-shadow: 0 1px 0 #152a68, 0 4px 10px #1a267a30
}

.english .game-shell .match-screen .hint-button,
.english .game-shell .match-screen .level-pill span,
.english .game-shell .match-screen .chapter-label {
    font-family: system-ui, sans-serif
}

.game-shell .special-screen .special-tag {
    background: none;
    border: 0;
    box-shadow: none;
    color: #ffe08a;
    pointer-events: none;
    text-shadow: 0 1px 4px #102050
}

.pause-btn {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: 1.5px solid #ffffff60;
    border-radius: 50%;
    background: #10183ed4;
    box-shadow: 0 6px 12px #08103870, inset 0 1px #ffffff35;
    backdrop-filter: blur(12px);
    cursor: pointer
}

.pause-btn i {
    width: 5px;
    height: 14px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 1px 2px #0006
}

.pause-btn:active {
    transform: scale(.92)
}

.pause-overlay {
    position: absolute;
    inset: 0;
    z-index: 85;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    visibility: hidden
}

.pause-overlay.open {
    pointer-events: auto;
    visibility: visible
}

.pause-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: #14183a72;
    cursor: pointer
}

.pause-card {
    position: relative;
    z-index: 1;
    width: 86%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 22px 16px 16px;
    border-radius: 28px;
    background: linear-gradient(180deg, #fff, #f4f1ff);
    box-shadow: 0 18px 40px #1a267a45
}

.pause-card h2 {
    margin: 0 0 4px;
    color: #2c3a9a;
    font: 900 22px/1.2 "Game Khmer", sans-serif
}

.pause-card .img-btn {
    flex: 0 0 auto;
    width: min(92%, 210px);
    max-width: 210px;
    font-size: 16px
}

.pause-card .img-btn-play span {
    left: 28%;
    right: 8%
}

.pause-card .img-btn-back {
    font-size: 14px
}

.english .pause-card h2 {
    font-family: system-ui, sans-serif
}

/* Emoji Math mini game */
[hidden]{display:none!important}.home-dock{width:82%;grid-template-columns:repeat(3,1fr)}.home-circle-math .home-glyph{font:1000 24px/1 system-ui;color:#fff1a8}
.math-screen{padding:max(18px,env(safe-area-inset-top)) 20px max(16px,env(safe-area-inset-bottom));background:#4a6ce8 url("assets/ui/home_bg.webp") center/cover no-repeat;color:#fff}
.math-screen::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 38%,#91a5ff55,transparent 55%);pointer-events:none}.math-screen>*{position:relative;z-index:1}
.math-header{width:100%;height:72px;display:grid;grid-template-columns:52px 1fr 70px;align-items:center;gap:10px}.math-header>div:nth-child(2){text-align:center}.math-header small{display:block;color:#dfe5ff;font:800 10px/1.2 "Game Khmer",system-ui}.math-header h1{margin:3px 0 0;color:#fff;font:900 24px/1.3 "Game Khmer",system-ui;text-shadow:0 2px 9px #2034868c}.english .math-header small,.english .math-header h1{font-family:system-ui,sans-serif}.math-back{width:46px;height:46px;border:1px solid #ffffff62;border-radius:16px;background:#ffffff24;color:#fff;font:500 38px/38px system-ui;box-shadow:inset 0 1px #fff6,0 9px 18px #1c2d7933;cursor:pointer}.math-iq{height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #ffffff62;border-radius:16px;background:#ffffff24;box-shadow:inset 0 1px #fff6}.math-iq b{font:900 16px/1 system-ui}.math-iq small{font:800 9px/1 system-ui;letter-spacing:.12em}
.math-progress{height:20px;display:flex;align-items:center;justify-content:center;gap:8px;margin:2px 0 8px}.math-progress i{width:30px;height:7px;border-radius:999px;background:#ffffff35;transition:.25s}.math-progress i.current{background:#ffd45e;box-shadow:0 0 12px #ffd45e80}.math-progress i.done{background:#72e1ca}
.math-card{width:100%;flex:1 1 0;min-height:0;padding:18px 22px 16px;border:1px solid #fff;border-radius:32px;background:linear-gradient(160deg,#fff,#faf8ff 65%,#f1eeff);color:#342b50;box-shadow:0 22px 45px #19297048,inset 0 1px #fff;overflow:hidden}.math-number{width:max-content;margin:0 auto 12px;padding:7px 14px;border-radius:999px;background:#eeeaff;color:#6655c0;font:800 12px/1 "Game Khmer",system-ui}.english .math-number{font-family:system-ui,sans-serif}.math-number b{font:1000 14px/1 system-ui}
.math-equations{display:flex;flex-direction:column;gap:8px}.math-equations div{min-height:55px;display:flex;align-items:center;justify-content:center;padding:5px 12px;border:1px solid #ece7f6;border-radius:17px;background:#fff;color:#3d3455;font:900 clamp(22px,6vw,30px)/1.2 "Segoe UI Emoji",system-ui;box-shadow:0 7px 16px #50427710}.math-equations div.ask{border-color:#ffcf50;background:linear-gradient(135deg,#fffdf5,#fff3c8);box-shadow:0 0 0 3px #ffd65c38,0 8px 18px #a46e2315}
.math-prompt{margin:13px 0 9px;text-align:center;color:#756d87;font:700 14px/1.4 "Game Khmer",system-ui}.english .math-prompt{font-family:system-ui,sans-serif}.math-answers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.math-answers button{height:55px;border:1px solid #ddd7f4;border-radius:17px;background:linear-gradient(180deg,#fff,#f0edff);color:#5948b4;font:1000 23px/1 system-ui;box-shadow:0 6px 0 #d5ceee,0 10px 18px #52437d16;cursor:pointer;transition:.15s}.math-answers button:active{transform:translateY(4px);box-shadow:0 2px 0 #d5ceee}.math-answers button.correct{border-color:#53d6bb;background:linear-gradient(180deg,#8ff0dc,#52d2b8);color:#174f48;box-shadow:0 6px 0 #2caa94}.math-answers button.wrong{border-color:#ff879b;background:#fff0f3;color:#d64f6a;animation:shake .3s}.math-feedback{height:29px;margin:9px 0 0;text-align:center;color:#5d50af;font:700 13px/1.5 "Game Khmer",system-ui}.english .math-feedback{font-family:system-ui,sans-serif}
.math-footer{width:100%;height:72px;flex:0 0 72px;display:flex;align-items:center;justify-content:space-between}.math-lives{display:flex;gap:6px;padding:9px 12px;border:1px solid #ffffff55;border-radius:16px;background:#ffffff24}.math-lives i{color:#ff91a3;font:900 17px/1 system-ui;font-style:normal;text-shadow:0 2px 6px #243479}.math-lives i.lost{color:#ffffff45;filter:grayscale(1)}.math-hint{min-width:126px;height:52px;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:18px;background:linear-gradient(180deg,#ffeb78,#ffc43b 56%,#ffad20);color:#263f8b;font:900 16px/1 "Game Khmer",system-ui;box-shadow:0 6px 0 #db8613,0 12px 20px #182a7738,inset 0 2px #fff9;cursor:pointer}.english .math-hint{font-family:system-ui,sans-serif}.math-hint span{font-size:20px}.math-hint:active{transform:translateY(5px);box-shadow:0 1px 0 #db8613}.math-hint:disabled{opacity:.55}
.math-result{width:100%;flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;border:1px solid #fff;border-radius:34px;background:linear-gradient(160deg,#fff,#faf8ff 64%,#f0edff);color:#352c50;box-shadow:0 24px 48px #19297048}.math-result-icon{width:100px;aspect-ratio:1;display:grid;place-items:center;margin-bottom:14px;border:5px solid #fff;border-radius:30px;background:linear-gradient(145deg,#ffd86a,#ff9b3f);color:#fff;font:1000 55px/1 system-ui;box-shadow:0 11px 0 #dc812d,0 19px 30px #dc812d35}.math-result>small{color:#6655c0;font:900 11px/1 system-ui;letter-spacing:.12em}.math-result h2{margin:10px 0 4px;font:900 34px/1.4 "Game Khmer",system-ui}.math-result p{margin:0 0 17px;color:#756d87;font:700 15px/1.5 "Game Khmer",system-ui;text-align:center}.english .math-result h2,.english .math-result p{font-family:system-ui,sans-serif}.math-reward{width:100%;height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 17px;margin-bottom:17px;border:1px solid #e4def5;border-radius:18px;background:#fff;box-shadow:0 8px 18px #51447d12}.math-reward span{color:#888093;font:700 13px/1 "Game Khmer",system-ui}.math-reward strong{color:#5b4ab6;font:1000 23px/1 system-ui}.math-result-primary,.math-result-home{width:100%;height:58px;border-radius:19px;font-family:"Game Khmer",system-ui;font-weight:900;cursor:pointer}.english .math-result-primary,.english .math-result-home{font-family:system-ui,sans-serif}.math-result-primary{border:0;background:linear-gradient(180deg,#ffeb78,#ffc43b 56%,#ffad20);color:#263f8b;font-size:19px;box-shadow:0 7px 0 #db8613,0 13px 23px #bd701c35}.math-result-home{height:50px;margin-top:13px;border:1px solid #ddd7f3;background:#fff;color:#6050b2;font-size:16px;box-shadow:0 7px 15px #51447d12}
@media(max-height:700px){.math-screen{padding-top:10px}.math-header{height:60px}.math-header h1{font-size:21px}.math-progress{margin:0 0 5px}.math-card{padding:12px 18px}.math-number{margin-bottom:7px}.math-equations{gap:5px}.math-equations div{min-height:44px;font-size:22px}.math-prompt{margin:8px 0 6px}.math-answers button{height:46px}.math-feedback{margin-top:5px}.math-footer{height:62px;flex-basis:62px}.math-hint{height:46px}.math-result-icon{width:80px}.math-result h2{font-size:29px}}
@media(max-width:390px){.home-dock{width:88%}.math-screen{padding-inline:13px}.math-card{padding-inline:14px}.math-equations div{font-size:20px}.math-answers{gap:7px}.math-header{grid-template-columns:46px 1fr 62px}.math-header h1{font-size:21px}}


/* Emoji Math v2 — larger, colorful and game-like */
.math-card{position:relative;display:flex;flex-direction:column;justify-content:center;padding:24px 24px 22px;border:1px solid #ffffffb8;border-radius:36px;background:linear-gradient(150deg,#c8f5eb 0%,#d5d9ff 48%,#e8cfff 100%);box-shadow:0 24px 50px #18297052,inset 0 2px #fff;overflow:hidden}
.math-card::before,.math-card::after{content:"";position:absolute;border-radius:50%;pointer-events:none}.math-card::before{width:210px;height:210px;left:-115px;top:-105px;background:#9ff4e288}.math-card::after{width:220px;height:220px;right:-120px;bottom:-125px;background:#ffd97975}.math-card>*{position:relative;z-index:1}
.math-number{margin:0 auto 18px;padding:9px 18px;border:1px solid #d8d0ff;border-radius:999px;background:#ffffffb8;color:#5c4bb5;font-size:14px;box-shadow:0 8px 18px #5a4b9a16}.math-number b{font-size:16px}
.math-equations{gap:13px}.math-equations div{min-height:76px;padding:8px 16px;border:1px solid #ffffffd9;border-radius:23px;background:linear-gradient(145deg,#ffffffdb,#f6f3ffcc);color:#352b55;font-size:clamp(29px,8vw,38px);box-shadow:0 9px 0 #cfc8e9,0 15px 24px #594b841b,inset 0 2px #fff;backdrop-filter:blur(8px)}.math-equations div:nth-child(2){background:linear-gradient(145deg,#f5fffcdd,#e3faf3d6);box-shadow:0 9px 0 #b9ddd4,0 15px 24px #3d8c7b18,inset 0 2px #fff}.math-equations div.ask{border:2px solid #ffc83e;background:linear-gradient(145deg,#fff9d9,#ffe9a0);box-shadow:0 9px 0 #e5a927,0 16px 27px #b17a2730,inset 0 2px #fff;animation:math-ask-glow 2s ease-in-out infinite}
.math-prompt{margin:20px 0 12px;color:#554a78;font-size:clamp(15px,3.8vw,18px);font-weight:800}.math-answers{gap:12px}.math-answers button{height:68px;border:1px solid #ffffffc9;border-radius:21px;background:linear-gradient(180deg,#8d7bea,#6956ce);color:#fff;font-size:30px;text-shadow:0 2px 5px #382a8a70;box-shadow:0 8px 0 #4e3cad,0 15px 24px #46358c35,inset 0 2px #fff5}.math-answers button:nth-child(2){background:linear-gradient(180deg,#6edfc8,#3bbba5);box-shadow:0 8px 0 #26917f,0 15px 24px #287d7030,inset 0 2px #fff5}.math-answers button:nth-child(3){background:linear-gradient(180deg,#ffbd68,#ff8d55);box-shadow:0 8px 0 #d76839,0 15px 24px #b95d3430,inset 0 2px #fff5}.math-answers button:active{transform:translateY(6px);box-shadow:0 2px 0 #4e3cad}.math-answers button.correct{background:linear-gradient(180deg,#8ff0dc,#4bcdb4);color:#174f48;text-shadow:none;box-shadow:0 8px 0 #259a86}.math-answers button.wrong{background:linear-gradient(180deg,#ffb0bc,#ef6f87);color:#fff;box-shadow:0 8px 0 #c84e68}
.math-feedback{height:34px;margin:12px 0 0;color:#4f4498;font-size:15px;font-weight:800}
@keyframes math-ask-glow{50%{box-shadow:0 9px 0 #e5a927,0 16px 32px #ffbd3f55,inset 0 2px #fff;transform:scale(1.012)}}
@media(max-height:760px){.math-card{padding:17px 20px}.math-number{margin-bottom:11px;padding-block:7px}.math-equations{gap:8px}.math-equations div{min-height:60px;font-size:28px;border-radius:19px}.math-prompt{margin:13px 0 8px}.math-answers button{height:56px;border-radius:18px;font-size:26px}.math-feedback{height:26px;margin-top:8px}}
@media(max-height:650px){.math-card{padding:11px 17px}.math-number{margin-bottom:6px}.math-equations{gap:5px}.math-equations div{min-height:49px;font-size:23px}.math-prompt{margin:8px 0 5px;font-size:14px}.math-answers button{height:47px;font-size:23px}.math-feedback{margin-top:5px}}
@media(max-width:390px){.math-card{padding-inline:16px}.math-equations div{font-size:27px}.math-answers{gap:8px}.math-answers button{font-size:27px}}


/* Larger, clearer equation emoji */
.math-equations div{gap:10px}.math-token-emoji{display:inline-grid;place-items:center;min-width:1.25em;font-size:1.35em;line-height:1;filter:drop-shadow(0 5px 5px #493d7029);transform:translateY(-1px)}.math-token-symbol{display:inline-block;font-family:system-ui,sans-serif;font-size:.82em;line-height:1}.math-token-cloud{min-width:1.55em;padding:.08em .12em;border-radius:999px;background:radial-gradient(ellipse at 50% 58%,#ffffff 0 45%,#cce9ff 76%,#8fcaff 100%);font-size:1.55em;filter:drop-shadow(0 5px 5px #3984b54a) saturate(1.35);text-shadow:0 1px 0 #fff}
@media(max-width:390px){.math-equations div{gap:7px}.math-token-emoji{font-size:1.28em}.math-token-cloud{font-size:1.45em}}

/* Playfield well — tiles sit on tinted board, not white-on-white */
.game-shell .match-screen .match-board {
    background:
        radial-gradient(circle at 10% 8%, #bff8ecc8 0 32%, transparent 58%),
        radial-gradient(circle at 92% 94%, #ffe3aec4 0 30%, transparent 56%),
        linear-gradient(165deg, #e4e0fb 0%, #d7d2f4 52%, #cfe4f7 100%);
    box-shadow:
        0 20px 42px #1c2a7438,
        inset 0 1px #fffc,
        inset 0 0 0 2px #c6bee8,
        inset 0 18px 40px #7a72b81c
}

.game-shell .match-screen .emoji-node,
.game-shell .match-screen .emoji-node.custom-icon,
.game-shell .match-screen .emoji-node:not(.custom-icon) {
    background-color: #fff;
    filter: none;
    box-shadow:
        0 7px 0 #c3bbe6,
        0 14px 20px #5d519a3a,
        inset 0 1px #fff,
        inset 0 0 0 1.5px #ece8fa
}

.game-shell .match-screen .emoji-node:active,
.game-shell .match-screen .emoji-node.selected {
    box-shadow: 0 0 0 4px #ffd45f, 0 8px 0 #e0b13a, 0 14px 22px #594c7928
}

.game-shell .match-screen .emoji-node.matched {
    box-shadow: 0 0 0 4px #60dbc3, 0 6px 0 #3cb9a4, 0 12px 20px #45cbb735
}

.game-shell .special-screen .special-card {
    border-radius: 32px;
    background:
        radial-gradient(circle at 10% 8%, #bff8ecc8 0 32%, transparent 58%),
        radial-gradient(circle at 92% 94%, #ffe3aec4 0 30%, transparent 56%),
        linear-gradient(165deg, #e4e0fb 0%, #d7d2f4 52%, #cfe4f7 100%);
    box-shadow:
        0 20px 42px #1c2a7438,
        inset 0 1px #fffc,
        inset 0 0 0 2px #c6bee8
}

.game-shell .special-screen .choice-item {
    background-color: #fff;
    box-shadow:
        0 7px 0 #c3bbe6,
        0 14px 20px #5d519a3a,
        inset 0 0 0 1.5px #ece8fa
}

/* Compact in-game HUD — one glass bar, quiet prompt */
.game-shell .match-screen,
.game-shell .special-screen {
    padding-top: max(14px, env(safe-area-inset-top))
}

.game-shell .match-screen .level-header,
.game-shell .special-screen .special-header {
    width: 100%;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 10px 7px 7px;
    border: 1px solid #ffffff30;
    border-radius: 20px;
    background: #121a42d4;
    box-shadow: 0 10px 22px #08103848, inset 0 1px #ffffff22;
    backdrop-filter: blur(18px)
}

.game-shell .match-screen .hud-cluster,
.game-shell .special-screen .hud-cluster {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px
}

.game-shell .match-screen .hud-cluster-end {
    flex-direction: row;
    align-items: center;
    gap: 10px
}

.game-shell .match-screen .level-pill,
.game-shell .special-screen .level-pill {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    gap: 5px;
    justify-content: flex-start;
    pointer-events: none
}

.game-shell .match-screen .level-pill span,
.game-shell .special-screen .level-pill span {
    color: #c9d2f5;
    font: 800 10px/1 "Game Khmer", system-ui;
    letter-spacing: .06em;
    text-shadow: none
}

.game-shell .match-screen .level-pill strong,
.game-shell .special-screen .level-pill strong {
    color: #fff;
    font: 900 22px/1 system-ui;
    text-shadow: none
}

.game-shell .match-screen .chapter-label {
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #aeb8e6;
    background: none;
    box-shadow: none;
    font: 700 10px/1.2 "Game Khmer", system-ui;
    letter-spacing: .02em;
    text-overflow: ellipsis;
    text-shadow: none;
    white-space: nowrap;
    pointer-events: none
}

.game-shell .match-screen .iq-pill {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    gap: 5px;
    align-items: center;
    pointer-events: none
}

.game-shell .match-screen .iq-pill div {
    display: contents
}

.game-shell .match-screen .iq-pill>span {
    font-size: 11px;
    color: #ffd45e;
    text-shadow: none
}

.game-shell .match-screen .iq-pill small {
    display: none
}

.game-shell .match-screen .iq-pill strong {
    color: #fff;
    font: 900 14px/1 system-ui;
    text-shadow: none
}

.game-shell .match-screen .lives,
.game-shell .special-screen .lives {
    position: static;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    gap: 3px;
    pointer-events: none
}

.game-shell .match-screen .lives i,
.game-shell .special-screen .lives i {
    font-size: 14px;
    filter: none
}

.game-shell .match-screen .pause-btn,
.game-shell .special-screen .pause-btn {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    background: #ffffff24;
    border: 1px solid #ffffff45;
    box-shadow: none
}

.game-shell .match-screen .instruction {
    width: 100%;
    min-height: 0;
    margin: 9px 0 8px;
    color: #dce3ff;
    font: 700 13px/1.3 "Game Khmer", system-ui;
    text-align: center;
    text-shadow: none
}

.game-shell .special-screen .special-tag {
    width: max-content;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #ffe08a;
    font: 800 10px/1 "Game Khmer", system-ui;
    letter-spacing: .04em;
    text-shadow: none;
    pointer-events: none
}

.english .game-shell .match-screen .instruction,
.english .game-shell .match-screen .chapter-label,
.english .game-shell .match-screen .level-pill span,
.english .game-shell .special-screen .level-pill span,
.english .game-shell .special-screen .special-tag {
    font-family: system-ui, sans-serif
}

@media (max-height: 700px) {
    .game-shell .match-screen .level-header,
    .game-shell .special-screen .special-header {
        min-height: 0
    }

    .game-shell .match-screen .instruction {
        margin: 6px 0 6px;
        font-size: 12px
    }
}


/* Clean in-game HUD v2 */
.game-shell .match-screen .level-header{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:9px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
.game-shell .match-screen .pause-btn{width:44px;height:44px;border:1px solid #ffffff66;border-radius:15px;background:#ffffff24;box-shadow:inset 0 1px #ffffff75,0 8px 18px #15266c2e}
.game-shell .match-screen .hud-cluster-level{height:44px;display:flex;justify-content:center;padding:0 14px;border:1px solid #ffffff5c;border-radius:15px;background:#ffffff20;box-shadow:inset 0 1px #ffffff66,0 8px 18px #15266c28;backdrop-filter:blur(12px)}
.game-shell .match-screen .level-pill{width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:7px}
.game-shell .match-screen .level-pill span{color:#dce3ff;font-size:10px;letter-spacing:.08em}
.game-shell .match-screen .level-pill strong{color:#fff;font-size:24px}
.game-shell .match-screen .chapter-label{display:none}
.game-shell .match-screen .hud-cluster-end{display:flex;flex-direction:row;align-items:center;gap:8px}
.game-shell .match-screen .lives{height:34px;display:flex;align-items:center;gap:3px;padding:0 9px;border:1px solid #ffffff55;border-radius:13px;background:#ffffffed;box-shadow:0 7px 16px #17296e26}
.game-shell .match-screen .lives i{font-size:12px;text-shadow:none}
.game-shell .match-screen .iq-pill{height:44px;display:flex;align-items:center;gap:5px;padding:0 12px;border:1px solid #ffffff5c;border-radius:15px;background:#ffffff20;box-shadow:inset 0 1px #ffffff66,0 8px 18px #15266c28;backdrop-filter:blur(12px)}
.game-shell .match-screen .iq-pill>span,.game-shell .match-screen .iq-pill small{display:none}
.game-shell .match-screen .iq-pill div{display:block}
.game-shell .match-screen .iq-pill strong{display:flex;align-items:baseline;gap:3px;color:#fff;font-size:14px;white-space:nowrap}
.game-shell .match-screen .instruction{width:max-content;max-width:90%;margin:9px auto 8px;padding:6px 13px;border:1px solid #ffffff38;border-radius:999px;background:#ffffff18;color:#eef2ff;font-size:13px;font-weight:700;box-shadow:inset 0 1px #ffffff35}
@media(max-width:390px){.game-shell .match-screen .level-header{grid-template-columns:40px minmax(0,1fr) auto;gap:6px}.game-shell .match-screen .pause-btn{width:40px;height:40px}.game-shell .match-screen .hud-cluster-level{height:40px;padding-inline:9px}.game-shell .match-screen .level-pill strong{font-size:21px}.game-shell .match-screen .lives{height:31px;padding-inline:7px}.game-shell .match-screen .lives i{font-size:11px}.game-shell .match-screen .iq-pill{height:40px;padding-inline:9px}.game-shell .match-screen .iq-pill strong{font-size:13px}}

/* Compact pause popup — matches the clean card system */
.pause-backdrop{background:#11183c78;backdrop-filter:blur(7px)}
.pause-card{width:min(78%,270px);max-width:270px;gap:12px;padding:20px 20px 22px;border:1px solid #ffffffc9;border-radius:26px;background:linear-gradient(155deg,#ffffff 0%,#f5f2ff 64%,#ece8ff 100%);box-shadow:0 26px 58px #10194f55,inset 0 1px #fff}
.pause-card::before{content:"";position:absolute;top:0;left:22%;right:22%;height:4px;border-radius:0 0 999px 999px;background:linear-gradient(90deg,#70dfc8,#8c79e8)}
.pause-card h2{margin:0 0 3px;color:#312b62;font-size:18px;letter-spacing:.04em}
.pause-card .img-btn{position:relative;width:190px;max-width:190px;height:52px;min-height:52px;border-radius:17px;filter:none;overflow:hidden}
.pause-card .img-btn img{display:none}
.pause-card .img-btn span{position:relative;inset:auto;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0 16px;font-size:14px;text-shadow:none}
.pause-card .img-btn-play{border:1px solid #ffd75d;background:linear-gradient(180deg,#ffeb79,#ffc53a 56%,#ffad20);color:#253e8a;box-shadow:0 6px 0 #d98613,0 12px 20px #c0712430,inset 0 2px #fff9}
.pause-card .img-btn-play::before{content:"▶";position:absolute;left:13px;top:50%;z-index:2;width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:#294894;color:#fff;font:900 12px/1 system-ui;transform:translateY(-50%);box-shadow:inset 0 1px #ffffff55}
.pause-card .img-btn-play span{padding-left:38px}
.pause-card .img-btn-back{height:46px;min-height:46px;border:1px solid #ddd7f3;background:linear-gradient(180deg,#fff,#efecff);color:#5c4cad;box-shadow:0 6px 14px #51447d18,inset 0 1px #fff}
.pause-card .img-btn-back::before{content:"⌂";position:absolute;left:15px;top:50%;z-index:2;color:#7565c8;font:900 21px/1 system-ui;transform:translateY(-54%)}
.pause-card .img-btn-back span{padding-left:30px;font-size:12px}
.pause-card .img-btn:active{transform:translateY(4px) scale(.985);filter:none}.pause-card .img-btn-play:active{box-shadow:0 2px 0 #d98613,0 6px 12px #c0712428}
@media(max-width:390px){.pause-card{width:min(82%,250px);padding:18px}.pause-card .img-btn{width:178px;max-width:178px}}

/* Pause popup v3 — larger and more polished */
.pause-card{width:min(86%,330px);max-width:330px;gap:14px;padding:28px 24px 27px;border:1px solid #ffffffd9;border-radius:32px;background:radial-gradient(circle at 15% 10%,#d6fff5 0 18%,transparent 40%),linear-gradient(150deg,#fff 0%,#f6f3ff 58%,#ebe7ff 100%);box-shadow:0 30px 70px #0d154c66,inset 0 2px #fff}
.pause-card::before{left:25%;right:25%;height:5px;background:linear-gradient(90deg,#62d8c1,#8874e5)}
.pause-card h2{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 0 5px;color:#332c67;font-size:23px;letter-spacing:.06em}
.pause-card h2::before{content:"Ⅱ";width:56px;height:56px;display:grid;place-items:center;border:1px solid #ffffffbb;border-radius:19px;background:linear-gradient(145deg,#7d6de0,#5748b7);color:#fff;font:1000 24px/1 system-ui;letter-spacing:2px;box-shadow:0 8px 0 #44369b,0 15px 25px #473b8a35,inset 0 2px #fff5}
.pause-card .img-btn{width:244px;max-width:244px;height:62px;min-height:62px;border-radius:20px}
.pause-card .img-btn span{font-size:17px}
.pause-card .img-btn-play{box-shadow:0 8px 0 #d98613,0 16px 26px #c0712438,inset 0 2px #fff9}
.pause-card .img-btn-play::before{left:15px;width:36px;height:36px;border-radius:11px;font-size:15px}
.pause-card .img-btn-play span{padding-left:45px}
.pause-card .img-btn-back{height:54px;min-height:54px;border-radius:18px;box-shadow:0 7px 17px #51447d1c,inset 0 1px #fff}
.pause-card .img-btn-back::before{left:18px;font-size:24px}
.pause-card .img-btn-back span{padding-left:34px;font-size:15px}
@media(max-width:390px){.pause-card{width:min(88%,306px);padding:24px 20px}.pause-card h2::before{width:50px;height:50px}.pause-card .img-btn{width:224px;max-width:224px;height:58px;min-height:58px}.pause-card .img-btn-back{height:51px;min-height:51px}}

/* Unified game buttons — same bold 3D language as the Home PLAY button */
.pause-card .img-btn{
    width:252px;max-width:252px;height:66px;min-height:66px;
    border:5px solid #19357e;border-radius:999px;
    overflow:visible;filter:drop-shadow(0 9px 9px #1724663d)
}
.pause-card .img-btn img{display:none}
.pause-card .img-btn span{
    position:relative;inset:auto;width:100%;height:100%;padding:0 20px;
    font-size:17px;font-weight:900;letter-spacing:.02em
}
.pause-card .img-btn-play{
    border-color:#19357e;
    background:linear-gradient(180deg,#ffe878 0%,#ffc333 55%,#ffab18 100%);
    color:#173b91;box-shadow:0 6px 0 #10275f,inset 0 3px #fff9,inset 0 -3px #ed8d0f
}
.pause-card .img-btn-play::before{
    left:10px;width:39px;height:39px;border-radius:12px;
    background:linear-gradient(145deg,#285ab4,#123577);font-size:16px
}
.pause-card .img-btn-play span{padding-left:47px}
.pause-card .img-btn-back{
    height:60px;min-height:60px;border-color:#4d3ca7;
    background:linear-gradient(180deg,#fff 0%,#f2efff 62%,#e5dfff 100%);
    color:#5341ac;box-shadow:0 6px 0 #34277c,inset 0 3px #fff,inset 0 -2px #d6cef5
}
.pause-card .img-btn-back::before{left:16px;font-size:25px;color:#5e4cba}
.pause-card .img-btn-back span{padding-left:36px;font-size:16px}
.pause-card .img-btn:active{transform:translateY(5px) scale(.985);filter:drop-shadow(0 3px 4px #17246635)}
.pause-card .img-btn-play:active{box-shadow:0 1px 0 #10275f,inset 0 3px #fff9}
.pause-card .img-btn-back:active{box-shadow:0 1px 0 #34277c,inset 0 3px #fff}

.game-shell .match-screen .hint-button{
    min-width:132px;min-height:58px;padding-inline:24px;
    border:5px solid #19357e;border-radius:999px;
    background:linear-gradient(180deg,#ffe878 0%,#ffc333 55%,#ffab18 100%);
    color:#173b91;box-shadow:0 6px 0 #10275f,0 10px 18px #17246642,inset 0 3px #fff9,inset 0 -3px #ed8d0f
}
.game-shell .match-screen .hint-button::before{content:"✦";margin-right:8px;color:#fff;text-shadow:0 1px 3px #b46b00}
.game-shell .match-screen .hint-button:active{transform:translateY(5px);box-shadow:0 1px 0 #10275f,0 3px 7px #17246630}

@media(max-width:390px){
    .pause-card .img-btn{width:232px;max-width:232px;height:62px;min-height:62px}
    .pause-card .img-btn-back{height:57px;min-height:57px}
    .game-shell .match-screen .hint-button{min-width:122px;min-height:54px;padding-inline:19px}
}

/* Emoji Math result actions — unified with Home PLAY and game controls */
.math-result-primary,
.math-result-home{
    position:relative;width:min(76%,270px);flex:0 0 auto;
    border:5px solid #19357e;border-radius:999px;
    font-weight:900;letter-spacing:.015em;
    filter:drop-shadow(0 9px 9px #1724663d);
    transition:transform .12s ease,box-shadow .12s ease,filter .12s ease
}
.math-result-primary{
    height:66px;
    background:linear-gradient(180deg,#ffe878 0%,#ffc333 55%,#ffab18 100%);
    color:#173b91;font-size:18px;
    box-shadow:0 6px 0 #10275f,inset 0 3px #fff9,inset 0 -3px #ed8d0f
}
.math-result-primary::before{
    content:"↻";position:absolute;left:11px;top:50%;width:39px;height:39px;
    display:grid;place-items:center;border-radius:12px;
    background:linear-gradient(145deg,#285ab4,#123577);color:#fff;
    font:900 24px/1 system-ui;transform:translateY(-50%);
    box-shadow:inset 0 2px #ffffff55
}
.math-result-home{
    height:60px;margin-top:16px;
    border-color:#4d3ca7;
    background:linear-gradient(180deg,#fff 0%,#f2efff 62%,#e5dfff 100%);
    color:#5341ac;font-size:16px;
    box-shadow:0 6px 0 #34277c,inset 0 3px #fff,inset 0 -2px #d6cef5
}
.math-result-home::before{
    content:"⌂";position:absolute;left:18px;top:50%;
    color:#5e4cba;font:900 24px/1 system-ui;transform:translateY(-54%)
}
.math-result-primary:active,
.math-result-home:active{transform:translateY(5px) scale(.985);filter:drop-shadow(0 3px 4px #17246635)}
.math-result-primary:active{box-shadow:0 1px 0 #10275f,inset 0 3px #fff9}
.math-result-home:active{box-shadow:0 1px 0 #34277c,inset 0 3px #fff}

@media(max-width:390px){
    .math-result-primary,.math-result-home{width:min(82%,248px)}
    .math-result-primary{height:62px;font-size:17px}
    .math-result-home{height:57px}
}