*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{color:#fff;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#2a1830;font-family:Kanit,system-ui,sans-serif}.backdrop{height:100%}.stage{touch-action:none;background:#f6c9dc;width:100%;height:100dvh;position:relative;overflow:hidden}.canvas-host{position:absolute;inset:0}.canvas-host canvas{width:100%;height:100%;display:block}.btn{font:inherit;color:#fff;cursor:pointer;background:linear-gradient(#ff7aa2,#e8467a);border:3px solid #fff;border-radius:999px;padding:12px 40px;font-size:22px;font-weight:800;box-shadow:0 5px #a3264f}.btn:active{transform:translateY(3px);box-shadow:0 2px #a3264f}.quiz{top:calc(112px + env(safe-area-inset-top));pointer-events:none;flex-direction:column;align-items:center;gap:8px;padding:0 10px;animation:.35s ease-out drop;display:flex;position:absolute;left:0;right:0}@keyframes drop{0%{opacity:0;transform:translateY(-30px)}}.quiz-card{color:#4a2340;text-align:center;background:#fffdfe;border-radius:20px;width:100%;padding:10px 10px 8px;box-shadow:0 6px #0002,0 0 0 4px #ff7aa2}.quiz-tag{color:#fff;background:#ff7aa2;border-radius:999px;padding:1px 10px;font-size:12px;font-weight:800;display:inline-block}.quiz-question{margin:4px 0 8px;font-size:clamp(17px,5.2vw,23px);font-weight:800;line-height:1.3}.quiz-choices{grid-template-columns:repeat(3,1fr);gap:6px;display:grid}.chip{background:#f6eef8;border:3px solid #0000;border-radius:14px;padding:3px 2px 5px;font-size:clamp(14px,4.4vw,19px);font-weight:800;line-height:1.2;transition:transform .12s,background .12s}.chip-lane{opacity:.6;font-size:11px;font-weight:600;display:block}.chip-active{background:#ffe1ec;border-color:#ff7aa2;transform:scale(1.06)}.chip-locked{background:#ffd166;border-color:#e0a100;transform:scale(1.06)}.chip-right{background:#c9f5cf;border-color:#36b24a}.chip-wrong{background:#ffd4d2;border-color:#e2524f}.chip-dim{opacity:.45}.quiz-hint{opacity:.7;margin-top:5px;font-size:12px}.quiz-result{color:#4a2340;text-align:center;background:#fff;border-radius:16px;padding:6px 16px;font-size:20px;font-weight:800;animation:.3s ease-out pop;box-shadow:0 4px #0002}.quiz-result.ok{color:#1f8a33}.quiz-result.bad{color:#c2332f}.quiz-explain{color:#4a2340;font-size:14px;font-weight:400}@keyframes pop{0%{opacity:0;transform:scale(.6)}}.btn-big{padding:14px 56px;font-size:28px}.btn-alt{background:linear-gradient(#b98bff,#8a5ce6);padding:9px 28px;font-size:18px;box-shadow:0 5px #5b3aa3}.btn-alt:active{box-shadow:0 2px #5b3aa3}.icon-btn{pointer-events:auto;cursor:pointer;background:#ff7aa2cc;border:3px solid #fff;border-radius:50%;width:46px;height:46px;font-size:22px;box-shadow:0 3px #0003}.link-btn{font:inherit;color:#4a2340;opacity:.7;cursor:pointer;background:0 0;border:none;margin-top:2px;text-decoration:underline}.screen{padding:calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));flex-direction:column;align-items:center;display:flex;position:absolute;inset:0}.screen.dim{background:#2a183088;justify-content:center;animation:.25s fade}@keyframes fade{0%{opacity:0}}.top-right{top:calc(12px + env(safe-area-inset-top));position:absolute;right:12px}.home{justify-content:space-between}.logo{text-align:center;margin-top:12%;animation:.5s ease-out drop}.logo-en{color:#fff;text-shadow:0 4px #e8467a,0 8px #0002;letter-spacing:-1px;font-size:clamp(34px,11vw,52px);font-weight:800;line-height:1}.logo-th{color:#4a2340;margin-top:8px;font-size:clamp(18px,5.6vw,26px);font-weight:800}.logo-th span{color:#3f8a2a;display:block}.home-bottom{flex-direction:column;align-items:center;gap:12px;display:flex}.howto{text-align:center;color:#4a2340;background:#fffc;border-radius:14px;padding:6px 12px;font-size:13px;line-height:1.5}.best{color:#4a2340;background:#fffc;border-radius:999px;padding:2px 12px;font-size:15px;font-weight:600}.hud{padding:calc(10px + env(safe-area-inset-top)) 12px 0;pointer-events:none;flex-direction:column;gap:6px;display:flex;position:absolute;top:0;left:0;right:0}.hud-row{justify-content:space-between;align-items:flex-start;display:flex}.hud-score .score{text-shadow:0 3px #e8467a;font-size:30px;font-weight:800;line-height:1}.hud-score .sub{color:#4a2340;font-size:14px;font-weight:600}.danger{background:#ffffffd9;border-radius:999px;align-self:center;align-items:center;gap:6px;padding:3px 10px;display:flex;box-shadow:0 3px #0002}.danger-icon{font-size:20px}.danger-pips{gap:4px;display:flex}.pip{background:#e6d9ea;border-radius:6px;width:22px;height:12px;transition:background .2s}.pip.on{background:#7cc35a}.danger-3 .pip.on,.danger-4 .pip.on{background:#e2524f}.danger-4{animation:.4s infinite shake}@keyframes shake{50%{transform:translate(2px)}}.vignette{pointer-events:none;animation:1s infinite pulse;position:absolute;inset:0;box-shadow:inset 0 0 60px 10px #e2524f88}.vignette.v4{animation-duration:.6s;box-shadow:inset 0 0 90px 24px #e2524fbb}@keyframes pulse{50%{opacity:.5}}.panel{color:#4a2340;background:#fffdfe;border-radius:26px;flex-direction:column;align-items:center;gap:10px;width:min(100%,340px);padding:20px 18px;animation:.3s ease-out pop;display:flex;box-shadow:0 8px #0003,0 0 0 5px #ff7aa2}.panel h2{font-size:28px;font-weight:800}.panel .btn{width:100%}.panel-row{gap:8px;display:flex}.caught{color:#3f8a2a;font-size:30px;font-weight:800}.new-best{color:#e8467a;font-weight:800;animation:1s infinite pulse}.final-score{color:#e8467a;font-size:54px;font-weight:800;line-height:1}.stats{grid-template-columns:repeat(3,1fr);gap:6px;width:100%;display:grid}.stats div{background:#f6eef8;border-radius:14px;flex-direction:column;align-items:center;padding:6px 2px;display:flex}.stats b{font-size:22px;font-weight:800}.stats span{opacity:.7;font-size:12px}.toast{color:#1f8a33;font-size:14px;font-weight:600}.screen.over{background:linear-gradient(#0000 35%,#2a183099);justify-content:flex-end;animation:.4s fade}.panel-compact{gap:7px;padding:14px 16px}.panel-compact .final-score{font-size:44px}.panel-compact .caught{font-size:24px}@media (aspect-ratio>=1) and (width>=700px){.hud{padding:16px 24px 0}.hud-row{align-items:center}.hud-score .score{font-size:38px}.hud-score .sub{font-size:16px}.danger{padding:6px 16px;position:absolute;top:20px;left:50%;transform:translate(-50%)}.danger-4{animation:.4s infinite shake-c}.pip{width:34px;height:14px}.danger-icon{font-size:24px}.icon-btn{width:52px;height:52px;font-size:24px}.quiz{top:84px}.quiz-card{max-width:720px;padding:12px 18px 10px}.quiz-question{font-size:28px}.chip{font-size:22px}.logo{margin-top:3%}.logo-en{font-size:64px}.logo-th{font-size:28px}.logo-th span{margin-left:.3em;display:inline}.howto{font-size:15px}.screen.over{background:linear-gradient(90deg,#0000 45%,#2a183088);justify-content:center;align-items:flex-end;padding-right:6%}}@keyframes shake-c{50%{transform:translate(calc(2px - 50%))}}.shot *{animation:none!important}