@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap";:root{font-family:DM Sans,Noto Sans Thai,sans-serif;color:#342c2a;background:#f5e6d5;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #dc745a;outline-offset:5px}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}.grain{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,247,232,.97),rgba(255,247,232,.76) 26%,transparent 61%)}body.playing .grain{background:linear-gradient(180deg,#fff4e03a,transparent 25%)}header{position:fixed;top:max(26px,env(safe-area-inset-top));left:4%;right:4%;display:flex;align-items:center;justify-content:space-between;z-index:4}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#342c2a;font-size:21px;font-weight:700;letter-spacing:3px}.brand small{display:block;font-size:9px;letter-spacing:4px;margin-top:3px}.brand-icon{font-size:42px;color:#d97f77}.top-right{display:flex;gap:12px;align-items:center}.location{font-size:10px;letter-spacing:2px;margin-right:14px}.top-right button{border:1px solid #ffffffa6;background:#fff6e5b8;border-radius:50%;width:39px;height:39px;font-size:20px}.panel{position:fixed;top:24%;left:8%;z-index:2}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:700;color:#b67456}h1{font-family:Playfair Display,Georgia,serif;font-size:clamp(52px,6.8vw,99px);font-weight:600;line-height:1.03;letter-spacing:-4px;margin:22px 0}h1 i{color:#c86d53}.thai-title{font-size:20px;margin:22px 0 12px;font-weight:600}.description{font-size:14px;line-height:1.9;color:#817066}.primary{background:#b95840;color:#fff9ee;border:0;border-radius:8px;padding:17px 24px;font-size:15px;font-weight:600;min-width:235px;box-shadow:0 8px 24px #98533a24;margin-top:18px}.primary:hover{background:#a54832;transform:translateY(-1px)}.primary span{float:right;margin-left:50px}.instructions{display:flex;gap:17px;font-size:10px;color:#80746b;margin-top:24px}.mobile-tip{font-size:10px;color:#948378;margin-top:9px}.record{margin-top:35px;font-size:9px;letter-spacing:2px;color:#89796c}.record b{margin-left:20px;color:#44382e;font-size:12px}.scene-label{position:fixed;bottom:100px;right:5%;font-size:10px;letter-spacing:2px;text-align:right}.scene-label small{display:block;font-size:8px;margin-top:8px;color:#7d7564}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#c16f48;margin-right:8px}footer{position:fixed;bottom:26px;left:4%;right:4%;border-top:1px solid #8c72502b;padding-top:17px;display:flex;justify-content:space-between;font-size:8px;letter-spacing:2px;color:#8d7760}footer b{color:#b96246;margin-left:12px}#hud{position:fixed;top:100px;left:5%;right:5%;display:flex;justify-content:space-between;pointer-events:none}.stat{padding:12px 20px;border:1px solid #fff8;background:#fff8e5d9;border-radius:13px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.stat small{display:block;font-size:9px;letter-spacing:2px;color:#a06a4a}.stat strong{font-size:27px}.stat em{font-size:13px;font-style:normal}.modal{position:fixed;inset:0;z-index:6;display:grid;place-items:center;background:#43312d42;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.card{text-align:center;background:#fff6e9;border:1px solid white;border-radius:24px;padding:40px;max-width:90vw;width:380px;box-shadow:0 20px 80px #4d302733}.card h2{font-size:26px}.card p{line-height:1.8;color:#806455;white-space:pre-line}.text-button{display:block;margin:20px auto 0;background:none;border:0;color:#96725f;font-size:12px}#toast{position:fixed;top:190px;left:50%;transform:translate(-50%);background:#fff5d9eb;padding:12px 22px;border-radius:30px;font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}#touch-controls{position:fixed;bottom:max(22px,env(safe-area-inset-bottom));left:5%;right:5%;display:flex;gap:10px;z-index:4}#touch-controls span{flex:1}#touch-controls button{width:53px;height:53px;border:1px solid #fff9;border-radius:17px;background:#fff5e6d9;color:#735345;font-size:25px;touch-action:none;-webkit-user-select:none;user-select:none}.playing .scene-label{bottom:90px}.playing footer{display:none}[hidden]{display:none!important}@media(max-width:700px){header{top:max(18px,env(safe-area-inset-top))}.brand{font-size:17px}.brand-icon{font-size:34px}.location{display:none}.top-right{gap:7px}.top-right button{width:34px;height:34px}.grain{background:linear-gradient(180deg,#fff3e5ed 0%,#fff3e5a8 32%,transparent 58%,#fff3e5ee 100%)}.panel{top:15%;left:7%;right:7%;pointer-events:none}.panel button{pointer-events:auto}.eyebrow{font-size:8px;letter-spacing:1.7px}h1{font-size:58px;letter-spacing:-2.5px;margin:12px 0}.thai-title{font-size:15px;margin:13px 0 8px}.description{font-size:11px;line-height:1.7}.primary{margin-top:10px;padding:14px 19px;min-width:210px}.instructions{margin-top:13px;font-size:9px;gap:13px}.record{margin-top:13px}.scene-label{bottom:65px;font-size:8px}footer{bottom:19px;font-size:6px;letter-spacing:1px}footer span:first-child{max-width:45%}#hud{top:78px}.stat{padding:9px 14px}.stat strong{font-size:23px}.stat small{font-size:8px}.mobile-tip{font-size:9px}.card{padding:30px 22px}}@media(max-height:680px){.panel{top:17%}h1{font-size:49px;margin:10px 0}.description{margin:5px 0}.record{margin-top:10px}.scene-label{bottom:58px}.instructions{margin-top:12px}}@media(min-width:701px)and (max-height:800px){.panel{top:20%}h1{font-size:76px;margin:17px 0}.thai-title{margin-top:18px}.record,.instructions{margin-top:17px}}@media(max-width:700px){.grain{background:linear-gradient(180deg,#fff3e5fc 0%,#fff3e5eb 28%,#fff3e58a 49%,transparent 68%,#fff3e5dc 100%)}.playing .grain{background:linear-gradient(180deg,#fff4e042,transparent 25%)}}#hud{display:block;max-width:520px;left:50%;right:auto;transform:translate(-50%);width:90%;top:85px}.run-stats{display:flex;justify-content:space-between;align-items:center;background:#fff6e4e8;padding:10px 17px;border:1px solid #fff9;border-radius:17px;box-shadow:0 4px 20px #3d3c2d0b}.run-stats small{display:block;color:#8a7561;font-size:10px}.run-stats strong{font-size:24px}.run-stats .time-stat{text-align:center}.time-stat strong{font-size:25px;line-height:1}.uni-stat{text-align:right}#hearts{color:#df7395;letter-spacing:3px;font-size:21px}.chase-label{display:flex;justify-content:space-between;color:#405153;font-size:10px;font-weight:600;margin:10px 6px 5px}.chase-track,.fever-track{height:7px;background:#fff5dfd9;border-radius:8px;position:relative}.chase-track i,.fever-track i{display:block;height:100%;width:0;background:#739c89;border-radius:8px;transition:width .12s linear}.chase-track>span{position:absolute;right:-2px;top:-9px;font-size:20px}#event-banner{text-align:center;margin-top:13px;padding:10px;background:#fff0cbf5;border:1px solid #ffcb6d;border-radius:12px;color:#8c4d2a;font-size:12px;font-weight:600}#event-banner.active{background:#ba563ded;color:#fff;border-color:#f1b585}#fever-hud{position:fixed;bottom:92px;left:50%;transform:translate(-50%);width:min(90%,520px);pointer-events:none}.fever-label{display:flex;justify-content:space-between;font-size:10px;margin-bottom:6px;color:#5a4648;background:#fff3e0c9;border-radius:7px;padding:5px 8px}.fever-track i{background:linear-gradient(90deg,#ee91ba,#efa247)}body.fever .grain{box-shadow:inset 0 0 90px #f980b18a;background:linear-gradient(180deg,#ffc6de40,transparent 30%)}body.fever #combo{color:#ba316e}body.fever .fever-track i{background:#ee7bab}body.hit #game{filter:sepia(.3) saturate(1.5)}.playing .scene-label{display:none}#toast{top:245px;font-size:12px;max-width:92vw;white-space:normal;text-align:center;z-index:5}body.cinematic .grain{background:linear-gradient(180deg,#1c252428,transparent 30%,transparent 65%,#1c25244d)}body.cinematic header,body.cinematic footer,body.cinematic .scene-label{display:none}#story{position:fixed;inset:0;z-index:4;pointer-events:none;border-top:13px solid #2d3534;border-bottom:13px solid #2d3534}.story-top{position:absolute;top:18px;left:5%;right:5%;display:flex;align-items:center;justify-content:space-between;color:#3c4948;font-size:9px;font-weight:700;letter-spacing:2px}.story-top>span{background:#fff4dece;padding:9px 12px;border-radius:8px}.story-top button{pointer-events:auto;border:1px solid #fff9;border-radius:30px;background:#fff4e4ed;color:#715346;font-size:12px;padding:10px 17px;min-height:44px}.story-dialog{position:absolute;bottom:max(26px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);width:min(90%,620px);padding:19px 26px 17px;background:#fff7eaf0;border:1px solid #ffffffa0;border-radius:18px;box-shadow:0 8px 30px #26323220}.story-dialog small{font-size:11px;font-weight:700;letter-spacing:1px;color:#b96568}.story-dialog p{font-size:19px;font-weight:600;margin:8px 0 15px;line-height:1.5}.story-track{height:3px;background:#d9c7b5;border-radius:3px;overflow:hidden}.story-track i{display:block;height:100%;background:#c98484;width:0}#modal{z-index:8}@media(max-width:700px){#hud{top:72px}.run-stats{padding:9px 13px}.run-stats strong{font-size:21px}#hearts{font-size:18px}.chase-label{font-size:9px}#event-banner{font-size:11px}#toast{top:235px;font-size:11px}.story-dialog{padding:16px 20px}.story-dialog p{font-size:16px}.story-top{font-size:7px;letter-spacing:1px}.story-top button{font-size:11px}.story-top>span{padding:9px}#fever-hud{bottom:max(90px,calc(env(safe-area-inset-bottom) + 72px))}}@media(max-height:540px){#hud{top:65px;width:65%}.run-stats{padding:4px 14px}.run-stats small{font-size:8px}.chase-label{margin-top:4px}#event-banner{margin-top:6px;padding:6px}#toast{top:170px}#fever-hud{width:40%;bottom:25px}.story-dialog{bottom:12px;padding:10px 18px}.story-dialog p{margin:4px 0 8px;font-size:14px}}.chase-track i{transition:none}#catch-prompt{margin-top:14px;padding:12px 18px;text-align:center;background:#fff1c9f5;border:2px solid #eeae53;border-radius:15px;box-shadow:0 5px 24px #df925433;color:#854c27}#catch-prompt strong{display:block;font-size:19px}#catch-prompt span{display:block;font-size:10px;margin-top:4px}body.catch-ready .chase-track i{background:#eaa24d}body.catch-ready #event-banner{display:none}body.catch-ready #touch-controls button[data-action=jump]{width:112px;background:#ffc66d;border-color:#fff7dd;color:#633c27;font-size:17px;font-weight:700;box-shadow:0 0 0 5px #ffe4a644}@media(max-height:540px){#catch-prompt{margin-top:7px;padding:7px}#catch-prompt strong{font-size:16px}}#run-feedback{position:fixed;left:50%;bottom:max(143px,calc(env(safe-area-inset-bottom) + 123px));transform:translate(-50%);width:min(90%,520px);display:grid;z-index:5;pointer-events:none}#run-feedback>div{grid-area:1/1;align-self:end;position:static;transform:none;width:100%;max-width:none;margin:0;border-radius:12px;padding:9px 13px;font-size:12px;line-height:1.5;text-align:center;box-shadow:0 3px 14px #3d302016}#run-feedback #toast{white-space:normal;background:#fff5d9ed}#run-feedback #catch-prompt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3px 14px;border-width:1px}#run-feedback #catch-prompt strong{font-size:14px}#run-feedback #catch-prompt span{font-size:10px;margin:0}#run-feedback:has(#catch-prompt:not([hidden])) #toast,#run-feedback:has(#catch-prompt:not([hidden])) #event-banner,#run-feedback:has(#event-banner:not([hidden])) #toast{visibility:hidden}body:not([data-mode=playing]) #run-feedback{display:none}@media(max-width:700px){#run-feedback>div{font-size:11px;padding:8px 11px}}@media(max-height:540px){#run-feedback{bottom:88px;width:min(65%,520px)}#run-feedback>div{padding:6px 10px}}
