:root{--red:#e58a3e;--red-text:#a84e15;--cream:#fff3e0;--blue:#2f6fd0;--sky:#cfe5ff;--pink:#f7a8b8;--yellow:#ffc93c;--ink:#0f1b33;--ink-soft:#1d2b45;--white:#fff;--line:3px solid var(--ink);--lift:0 4px 0 var(--ink);--radius:16px;--radius-lg:24px;--ease-pop:cubic-bezier(.34, 1.56, .64, 1);--font:"Kanit", system-ui, -apple-system, "Segoe UI", sans-serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*,:before,:after{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0}body{--chrome:96px;--stage-w:min(100%, calc(100vh - var(--chrome)));padding:12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));font-family:var(--font);color:var(--ink);background:var(--sky);-webkit-text-size-adjust:100%;grid-template:auto minmax(0,1fr)/minmax(0,1fr);justify-items:center;gap:10px;font-weight:500;line-height:1.4;display:grid;overflow:hidden}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.hud{width:var(--stage-w);align-items:center;gap:8px;display:flex}.pill{background:var(--white);border:var(--line);min-height:44px;box-shadow:var(--lift);font-variant-numeric:tabular-nums;border-radius:999px;align-items:center;gap:6px;margin:0;padding:0 14px;font-size:1.15rem;font-weight:800;display:flex}.counter-pill img{display:block}.counter-pill .logo{border:2px solid var(--ink);border-radius:50%}.counter-pill .label{font-size:.95rem;font-weight:700}.timer-pill{margin-left:auto}.dots{gap:4px;margin-left:4px;display:flex}.dots i{background:var(--cream);border:2px solid var(--ink);width:12px;height:12px;transition:background .3s, scale .3s var(--ease-pop);border-radius:50%;display:block}.dots i.on{background:var(--yellow);scale:1.2}.icon-btn{border:var(--line);background:var(--white);width:44px;height:44px;color:var(--ink);box-shadow:var(--lift);font:inherit;cursor:pointer;border-radius:999px;flex:none;place-items:center;padding:0;font-weight:700;transition:transform .15s ease-out,box-shadow .15s ease-out,background .15s ease-out;display:grid}.icon-btn.lang{width:auto;min-width:44px;padding:0 10px}.icon-btn svg{width:22px;height:22px}.icon-btn[aria-pressed=true]{background:var(--yellow)}.icon-btn .icon-off,.icon-btn.muted .icon-on{display:none}.icon-btn.muted .icon-off{display:block}#stage{width:var(--stage-w);aspect-ratio:1;border-radius:var(--radius-lg);box-shadow:0 0 0 4px var(--ink), 0 8px 0 4px var(--ink);background:var(--cream);-webkit-user-select:none;user-select:none;position:relative;overflow:hidden}#viewport{position:absolute;inset:0;overflow:hidden}#scene{width:100%;height:100%;transition:filter .6s;position:relative}#scene.blurred{filter:blur(14px)saturate(1.2)}#scene>img{width:100%;height:100%;display:block}@media (aspect-ratio<=4/5){.hud{width:100%}#stage{aspect-ratio:auto;width:100%;height:100%}#scene{aspect-ratio:1;width:auto;height:100%;position:absolute;top:0;left:50%;transform:translate(-50%)}}@media (width<=719px){.dots{display:none}}@media (width<=479px){.counter-pill .label{display:none}.pill{padding:0 10px;font-size:1rem}}.kongi{cursor:pointer;-webkit-tap-highlight-color:transparent;position:absolute;translate:-50% -100%}.kongi:before{content:"";width:max(100%,40px);height:max(100%,40px);position:absolute;top:50%;left:50%;translate:-50% -50%}.kongi .flip{display:block;position:relative}.kongi.mirror .flip{scale:-1 1}.rig{aspect-ratio:432/912;--t:.7s;display:block;position:relative}.rig img,.rig .upper{-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;inset:0}.rig .upper{animation:rig-bob var(--t) ease-in-out var(--d,0s) infinite}.rig .leg-l{transform-origin:26.6% 84.6%;--kick:20deg;animation:rig-step var(--t) var(--d,0s) infinite}.rig .leg-r{transform-origin:75% 84.6%;--kick:-20deg;animation:rig-step var(--t) calc(var(--d,0s) - var(--t) / 2) infinite}.rig .arm-r{transform-origin:73.8% 55.3%;--fwd:24deg;--back:-10deg;animation:rig-pump var(--t) ease-in-out var(--d,0s) infinite}.rig .arm-l{transform-origin:22.9% 55%;--fwd:-24deg;--back:10deg;animation:rig-pump var(--t) ease-in-out calc(var(--d,0s) - var(--t) / 2) infinite}.kongi.found .rig{transform-origin:50% 100%;animation:pop .4s var(--ease-pop), breathe 2.4s ease-in-out .4s infinite alternate}.kongi.found .rig :is(.upper,img){animation:none}.preview .rig{width:46px;margin:0 auto}.ring{aspect-ratio:1;pointer-events:none;width:max(160%,44px);height:auto;position:absolute;top:50%;left:50%;overflow:visible;translate:-50% -50%}.ring circle{fill:none;stroke:var(--yellow);stroke-width:7px;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100px;filter:drop-shadow(0 0 1px var(--ink)) drop-shadow(0 0 1px var(--ink))}.kongi.found{cursor:default}.kongi.found .ring circle{animation:.5s ease-out forwards draw}.reveal .kongi:not(.found) .ring circle{stroke:var(--pink);stroke-dasharray:6 4;stroke-dashoffset:0;animation:.7s ease-in-out infinite alternate glow}.overlay{background:#0f1b3340;place-items:center;padding:12px;display:grid;position:absolute;inset:0}.card{text-align:center;background:var(--cream);border:4px solid var(--ink);border-radius:var(--radius-lg);width:min(100%,400px);max-height:100%;box-shadow:0 8px 0 var(--ink);animation:pop .35s var(--ease-pop);padding:16px 20px 20px;overflow:auto}.card h1,.card h2{margin:2px 0 4px;font-size:clamp(1.5rem,4vw,2.1rem);font-weight:800;line-height:1.15}.card p{margin:4px 0 12px}.catchphrase{color:var(--red-text);font-size:1.1rem;font-weight:800}.card .catchphrase{margin:0}.big{color:var(--blue);font-variant-numeric:tabular-nums;font-size:clamp(2rem,6vw,3rem);font-weight:800;line-height:1.1}.card .big{margin:0}.archive-link{color:var(--ink-soft);margin-top:12px;font-weight:700;display:inline-block}.btn{border:var(--line);background:var(--blue);width:100%;min-height:48px;color:var(--white);box-shadow:var(--lift);font:inherit;cursor:pointer;border-radius:999px;padding:0 22px;font-size:1.15rem;font-weight:800;transition:transform .15s ease-out,box-shadow .15s ease-out}.btn:disabled{opacity:.5;cursor:not-allowed}@media (orientation:landscape) and (height<=500px){body{--chrome:92px}.hud{width:auto}.dots,.counter-pill .label{display:none}.timer-pill{margin-left:0}.preview{display:none}.card{padding:10px 16px 14px}}@media (hover:hover){.btn:hover:not(:active,:disabled),.icon-btn:hover:not(:active){box-shadow:0 6px 0 var(--ink);transform:translateY(-2px)}}button:active:not(:disabled){box-shadow:0 1px 0 var(--ink);transform:translateY(3px)}button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}@keyframes breathe{0%{transform:scale(1)}to{transform:scale(1.02,1.035)}}@keyframes pop{0%{opacity:0;scale:.6}60%{opacity:1;scale:1.15}to{scale:1}}@keyframes draw{to{stroke-dashoffset:0}}@keyframes glow{0%{opacity:.35}to{opacity:1}}@keyframes rig-bob{0%{transform-origin:75% 98%;transform:rotate(0)scaleY(.96)}25%{transform-origin:75% 98%;transform:rotate(12deg)translateY(-2%)scaleY(1.02)}49.9%{transform-origin:75% 98%;transform:rotate(0)scaleY(.96)}50%{transform-origin:25% 98%;transform:rotate(0)scaleY(.96)}75%{transform-origin:25% 98%;transform:rotate(-12deg)translateY(-2%)scaleY(1.02)}to{transform-origin:25% 98%;transform:rotate(0)scaleY(.96)}}@keyframes rig-step{0%{animation-timing-function:cubic-bezier(.2,.7,.4,1);transform:translateY(0)rotate(0)}22%{transform:translateY(-3%) rotate(var(--kick)) scale(1.15);animation-timing-function:cubic-bezier(.6,0,.9,.5)}46%{transform:translateY(.3%)rotate(0)scale(1.08,.92)}54%,to{transform:translateY(0)rotate(0)}}@keyframes rig-pump{0%,50%,to{transform:rotate(0)translateY(0)}25%{transform:rotate(var(--fwd)) translateY(-5%) scale(1.1)}75%{transform:rotate(var(--back)) translateY(1.5%) scale(.96)}}body.reel{grid-template:minmax(0,1fr)/minmax(0,1fr);gap:0;padding:0}body.reel :is(.hud,#intro,#done,.ring){display:none!important}body.reel #stage{aspect-ratio:auto;width:100%;height:100%;box-shadow:none;border-radius:0}body.reel #scene{transition:none}.reel-title{z-index:30;text-align:center;color:var(--white);text-shadow:0 2px 3px #000000bf,0 0 12px #00000073;pointer-events:none;justify-items:center;gap:2px;margin:0;padding:0 16px;line-height:1.25;display:grid;position:fixed;top:6%;left:0;right:0}.reel-title [lang=th]{font-size:2.2rem;font-weight:800}.reel-title [lang=en]{font-size:1.7rem;font-weight:700}.reel-handle{z-index:30;color:var(--white);opacity:.55;text-shadow:0 1px 2px #0009;pointer-events:none;margin:0;font-size:.95rem;font-weight:600;animation:40s ease-in-out infinite handle-drift;position:fixed;top:0;left:0}@keyframes handle-drift{0%,to{translate:12vw 20vh}20%{translate:58vw 32vh}40%{translate:18vw 52vh}60%{translate:60vw 68vh}80%{translate:22vw 86vh}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}