*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#062d48}body{font-family:Arial,"Noto Sans Thai",sans-serif;color:#fff}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffe894;outline-offset:4px}button{border:0;color:inherit}button:disabled{opacity:.5;cursor:wait}[hidden]{display:none!important}#stage{position:relative;width:100%;height:100%;isolation:isolate;overflow:hidden}#game{position:absolute;inset:0;outline:none}#game canvas{display:block}header{position:absolute;top:0;left:0;right:0;padding:28px 3.7%;display:flex;align-items:center;justify-content:space-between;z-index:4;pointer-events:none;background:linear-gradient(#032b4d6b,transparent)}header>*{pointer-events:auto}.wordmark{font-size:27px;font-weight:1000;font-style:italic;text-decoration:none;color:#ffe994;letter-spacing:-1px;text-shadow:0 3px 0 #6a4423,0 4px 10px #183c58}.wordmark span{display:block;font-size:8px;font-style:normal;letter-spacing:3.6px;color:#fff;margin-top:6px;text-shadow:0 1px 3px #1a4767}.top-actions{display:flex;align-items:center;gap:10px}.top-actions button,#retry{width:39px;height:39px;background:#153e5673;border:1px solid #ffffff55;border-radius:50%;font-size:19px;backdrop-filter:blur(8px)}.chapter{font-size:9px;font-weight:bold;letter-spacing:1.8px;margin-right:16px;text-shadow:0 1px 8px #17405b}.chapter i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#fbdd7d;margin:0 12px}.panel{position:absolute;inset:0;background:linear-gradient(90deg,#073556c9 0%,#0a406781 39%,transparent 72%);display:flex;align-items:center;z-index:2}.menu-copy{margin:0 0 0 7%;padding-top:50px;max-width:62%}.kicker{font-size:9px;letter-spacing:2.4px;font-weight:bold;color:#ffedac;display:flex;align-items:center;gap:12px}.kicker>span{height:1px;width:30px;background:#ffe794}.chapter-label{font-size:12px;letter-spacing:7px;margin:32px 0 16px;color:#e3f4ff}h1{font-family:Georgia,serif;font-size:clamp(38px,5.6vw,90px);line-height:1.07;letter-spacing:-2px;font-weight:normal;margin:0;text-shadow:0 3px 20px #10394a44}h1 em{font-weight:normal;color:#ffe59b}.story{font-size:13px;color:#edf9ff;line-height:1.9;margin:24px 0 30px;text-shadow:0 1px 6px #083553}.primary{border-radius:6px;background:linear-gradient(110deg,#ffda74,#fff0b2);padding:17px 25px;color:#433b24;font-size:13px;font-weight:bold;box-shadow:0 5px 0 #b88d40,0 9px 22px #123b5740}.primary:hover{filter:brightness(1.07);transform:translateY(-1px)}.primary span{margin-left:40px}.text-button{background:transparent;margin-left:23px;font-size:12px;border-bottom:1px solid #ffffff70;padding:10px 0}.text-button span{margin-left:18px}.menu-note{margin-top:58px;font-size:8px;letter-spacing:1.8px;color:#deecf0}.menu-note span{display:block;margin-top:9px;font-size:7px;color:#c3d9e3}.dialog{position:absolute;inset:0;z-index:7;display:grid;place-items:center;background:#052b5082;backdrop-filter:blur(7px)}.dialog>div{max-width:600px;margin:24px;background:#103b52f0;padding:44px;border:1px solid #c6eaf34d;border-radius:20px;box-shadow:0 20px 90px #082a6670}.dialog h2{font-family:Georgia,serif;font-size:43px;font-weight:normal;margin:24px 0 14px}.dialog p:not(.kicker){font-size:14px;line-height:1.9;white-space:pre-line;margin-bottom:28px}.route{position:absolute;top:110px;left:3.7%;width:225px;padding:14px 17px;background:#0a3b5375;backdrop-filter:blur(10px);border:1px solid #c6effd50;border-radius:8px}.route>span{font-size:8px;letter-spacing:1.5px}.route strong{float:right;font-size:13px;color:#ffecad}.route>div{height:3px;margin-top:12px;background:#ffffff35;border-radius:8px;overflow:hidden}.route i{display:block;height:100%;width:0;background:#ffdc82}#tip{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);background:#10384e91;border:1px solid #ddf9ff4d;border-radius:30px;padding:12px 20px;font-size:10px;white-space:nowrap;backdrop-filter:blur(10px)}#tip b{margin:0 10px;color:#f6d377}.footer-title{position:absolute;bottom:31px;left:3.7%;font-size:10px;letter-spacing:2px;text-shadow:0 2px 5px #164663}.footer-title small{display:block;font-size:7px;letter-spacing:1.6px;margin-top:9px;color:#e0f6ff}#retry{position:absolute;right:3.7%;bottom:30px}#loading{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0d3653}#loading h2{font-family:Georgia,serif;font-size:29px;font-weight:normal}#loading p{font-size:12px;color:#b9d9e7}.loader-mark{font-size:65px;color:#9ae7fa;animation:pulse 1s infinite alternate}@keyframes pulse{to{opacity:.3;transform:translateY(-8px)}}#touch-controls{position:absolute;left:4%;right:4%;bottom:6%;display:flex;justify-content:space-between;z-index:5;pointer-events:none}#touch-controls>div{display:flex;gap:14px}#touch-controls button{width:66px;height:66px;border:1px solid #ffffff80;border-radius:50%;background:#173a5c85;backdrop-filter:blur(8px);font-size:13px;font-weight:bold;pointer-events:auto;touch-action:none;user-select:none}#touch-controls button.active{background:#ffe39aca;color:#274154}#rotate{display:none;position:absolute;bottom:9px;width:100%;text-align:center;font-size:11px;color:#e6f5fb}body.playing header{padding-top:20px}body.playing .wordmark{font-size:22px}body.playing .chapter{display:none}@media(max-height:600px){header{padding:16px 4%}.wordmark{font-size:21px}.menu-copy{padding-top:50px;margin-left:6%}.chapter-label{margin:15px 0 10px;font-size:9px}.kicker{font-size:7px}h1{font-size:46px}.story{font-size:11px;margin:14px 0 20px}.primary{padding:12px 18px;font-size:11px}.menu-note{margin-top:24px}.chapter{display:none}.route{top:85px;width:180px}.footer-title,#tip{display:none}.dialog>div{padding:24px}.dialog h2{font-size:30px}.dialog p:not(.kicker){font-size:12px;margin-bottom:16px}#touch-controls button{width:53px;height:53px}}@media(orientation:portrait){#rotate{display:block}.chapter{display:none}.menu-copy{max-width:90%;padding-bottom:40px}h1{font-size:46px}.menu-note{margin-top:35px}.story{font-size:11px}.wordmark{font-size:21px}.top-actions{gap:7px}.top-actions button{width:32px;height:32px}.route{top:90px;width:190px}.footer-title,#tip{display:none}#touch-controls{bottom:10%}#retry{bottom:35px}}
