
/* Keep both eyes inside the stage even on short, narrow portrait phones. */
.audio-status{font-size:14px;line-height:1.5;text-align:center;padding:0 20px;color:#93a99b;overflow-wrap:anywhere}
@media(max-height:750px) and (max-width:599px){#stage{height:clamp(300px,96vw,350px)}}
*{box-sizing:border-box} :root{font-family:"Noto Sans Thai",Tahoma,system-ui,sans-serif;color:#263e34;background:#eeeae1;font-synthesis:none}body{margin:0;min-height:100svh;background:#eeeae1}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #e6c77c;outline-offset:5px}[hidden]{display:none!important}.game{position:relative;isolation:isolate;max-width:510px;min-height:100svh;margin:auto;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#fffdf5,#f7f5ed 70%);transition:background .45s,color .45s;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}.topbar{height:74px;padding:15px 22px 9px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}.brand{font-size:10px;letter-spacing:2px;font-weight:800;color:#50745b}.brand span{font-weight:400;letter-spacing:1px;margin-left:5px}.icon-button{width:44px;height:44px;display:grid;place-items:center;border:1px solid #36563b15;border-radius:50%;background:#ffffff50;color:inherit;flex-shrink:0}.icon-button svg{height:22px;width:22px;fill:currentColor}.icon-button .stroke{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.sound-off{display:none}#mute[aria-pressed=false] .sound-on{display:none}#mute[aria-pressed=false] .sound-off{display:block}.heading{position:relative;z-index:3;text-align:center;height:122px;padding:8px 14px 0}.eyebrow{font-size:12px;letter-spacing:.3px;margin:0 0 7px;color:#748775}h1{font-size:clamp(34px,10.2vw,46px);font-weight:900;line-height:1.18;margin:0;letter-spacing:-1.6px}.edition{font-size:19px;font-weight:500;letter-spacing:-.5px;color:#81a669;margin-left:7px}.subtitle{margin:10px 0 0;font-size:15px;color:#647a69}.stage{position:relative;height:clamp(300px,96vw,465px);width:100%;margin-top:-3px;touch-action:pan-y}.stage canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block;pointer-events:none}.halo{position:absolute;left:10%;right:10%;top:16%;bottom:5%;background:radial-gradient(ellipse,#cddca659,transparent 69%);transition:background .5s}.teeth{position:absolute;inset:0;z-index:2;pointer-events:none}.tooth{position:absolute;transform:translate(-50%,-50%);width:44px;height:49px;border:0;background:transparent;border-radius:45%;pointer-events:auto;touch-action:manipulation;padding:0;color:transparent}.tooth:disabled{pointer-events:none}.tooth:focus-visible{outline:2px solid #f4d486;background:#f8df9129}.tooth[hidden]{display:none}.lower{position:relative;z-index:3;text-align:center;padding:0 28px 12px;min-height:213px}.welcome{margin-top:-6px}.welcome>p:first-child{font-size:14px;line-height:1.75;margin:0 0 14px;color:#697f6f}.welcome strong{font-weight:600;color:#33543f}.primary{width:100%;min-height:59px;border-radius:19px;background:linear-gradient(130deg,#75ae63,#467d46);box-shadow:inset 0 2px 1px #d9edb65c,0 6px 0 #345e36,0 12px 24px #284a2822;border:1px solid #5c9352;color:#fffef4;font-size:20px;font-weight:700;display:flex;justify-content:center;align-items:center;gap:12px;transition:transform .1s,filter .2s}.primary:active{transform:translateY(4px);box-shadow:inset 0 2px 1px #d9edb65c,0 2px 0 #345e36}.primary:disabled{opacity:.5}.play-icon{font-size:19px}.fine{font-size:10px!important;color:#8a9889!important;margin:17px 0 0!important}.footer{font-size:9px;letter-spacing:.2px;margin:19px 0 2px;color:#909c90}.playing{padding-top:0;min-height:137px}.remaining{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#ffffff10;border:1px solid #aab9b138;border-radius:30px;min-width:119px;padding:9px 20px;font-size:16px;color:#f5f6ea;backdrop-filter:blur(8px)}.pulse-dot{width:6px;height:6px;border-radius:50%;background:#c3df96;box-shadow:0 0 13px #c3df9680}.playing>p{color:#9fb4a7;font-size:12px;margin:17px 0 8px;min-height:20px}.text-button{font-size:11px;min-height:40px;padding:7px 16px;background:transparent;border:0;color:#8ea697}.result{background:#faf7ed;border-radius:25px;padding:22px 19px 23px;color:#294336;box-shadow:0 15px 60px #0002}.result-eyebrow{font-size:11px;color:#8b947c;margin:0 0 7px}.result-copy{font-size:14px;margin:0 0 19px}.result .primary{font-size:18px}.result .primary>span{font-size:28px}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#f7f5ed;z-index:4;font-size:13px;color:#61805c}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.error{position:absolute;z-index:9;inset:190px 20px auto;padding:24px;background:#f8f5e9;color:#284637;border-radius:20px;text-align:center;box-shadow:0 15px 60px #0003}.error p{font-size:14px}.error a{color:#467d46}.impact{position:absolute;inset:0;pointer-events:none;z-index:3;opacity:0}.impact i{position:absolute;display:block;width:7px;height:35px;background:#e5d68e;border-radius:6px;top:25%;left:12%;transform:rotate(-30deg)}.impact i:nth-child(2){left:6%;top:36%;height:19px;transform:rotate(-62deg)}.impact i:nth-child(3){left:auto;right:12%;top:22%;transform:rotate(28deg)}.impact i:nth-child(4){left:auto;right:5%;top:36%;height:21px;transform:rotate(60deg)}.impact i:nth-child(5){left:20%;top:12%;height:14px;transform:rotate(-19deg)}.impact i:nth-child(6){left:auto;right:22%;top:10%;height:15px;transform:rotate(20deg)}body[data-screen=playing] .game,body[data-screen=result] .game{background:radial-gradient(ellipse at 50% 39%,#31463b,#172b29 64%,#142624);color:#fffdf2}body[data-screen=playing] .brand,body[data-screen=result] .brand{color:#a8b9a7}body[data-screen=playing] .icon-button,body[data-screen=result] .icon-button{background:#ffffff07;border-color:#ffffff15}body[data-screen=playing] .eyebrow,body[data-screen=result] .eyebrow{color:#d2dfcb;font-size:17px;margin-bottom:8px}body[data-screen=playing] h1{font-size:clamp(29px,8.5vw,39px);color:#bce291}body[data-screen=playing] .subtitle,body[data-screen=result] .subtitle{color:#9caf9c;font-size:12px}body[data-screen=playing] .halo,body[data-screen=result] .halo{background:radial-gradient(ellipse,#99bd5929,transparent 70%)}body[data-screen=playing] .footer,body[data-screen=result] .footer{color:#80958a}body[data-screen=result] h1{font-size:65px;color:#c2e799;transform:rotate(-5deg);text-shadow:0 4px 0 #608b4f}body[data-screen=result] .eyebrow{font-size:11px;color:#9aad9a}body[data-screen=result] .subtitle{font-size:18px;color:#fffdf2;margin-top:6px}.game.is-impact .impact{animation:impact .6s ease-out}.game.is-impact .stage{animation:shake .38s linear}.game.is-impact .heading{animation:headline .5s cubic-bezier(.16,1,.3,1)}.game.is-tense .pulse-dot{animation:throb .75s ease-in-out infinite}.game.is-tense .halo{background:radial-gradient(ellipse,#d1b85930,transparent 70%)}@keyframes impact{0%{opacity:0;transform:scale(.8)}20%,55%{opacity:1}100%{opacity:0;transform:scale(1.15)}}@keyframes shake{0%,100%{transform:translate(0)}15%{transform:translate(-5px,3px)}30%{transform:translate(5px,-2px)}45%{transform:translate(-4px,2px)}60%{transform:translate(3px,0)}80%{transform:translate(-1px,-1px)}}@keyframes headline{0%{transform:scale(.82)}65%{transform:scale(1.08)}100%{transform:scale(1)}}@keyframes throb{50%{opacity:.4;box-shadow:0 0 19px #f5cf91}}@media(min-width:600px){body{padding:22px}.game{min-height:880px;border-radius:34px;box-shadow:0 20px 70px #142e2425}.stage{height:445px}.topbar{height:80px}.lower{padding-left:43px;padding-right:43px}}@media(max-height:750px) and (max-width:599px){.topbar{height:61px;padding-top:9px}.heading{height:105px;padding-top:3px}.stage{height:clamp(270px,85vw,350px)}.lower{padding-left:24px;padding-right:24px}.welcome>p:first-child{margin-bottom:10px}.primary{min-height:53px}.fine{margin-top:14px!important}.footer{margin-top:13px}.result{padding:15px 17px 19px}.result-copy{margin-bottom:13px}.playing{min-height:121px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
