*{box-sizing:border-box}html,body,#game{margin:0;width:100%;height:100%;overflow:hidden;background:#101620;color:#fff;font-family:Kanit,system-ui,sans-serif}canvas{display:block}.hud{position:fixed;z-index:2;inset:18px 20px auto;pointer-events:none;display:flex;align-items:flex-start;gap:18px}.brand{font-weight:800;font-size:15px;letter-spacing:2px;color:#b9cbd3}.brand span{font-size:27px;color:#ffd34f;letter-spacing:0}.brand small{display:block;font:700 9px system-ui;letter-spacing:2px;color:#77ddd7}.stats{display:grid;grid-template-columns:auto auto;gap:0 8px;align-items:center;background:#111a20cc;border:1px solid #627a7144;padding:8px 14px;border-radius:12px}.stats b{font-size:18px;color:#ffdb65}.stats span{font-size:10px;color:#aec2bd}.xp{position:absolute;top:76px;left:0;right:0;height:5px;background:#ffffff24;border-radius:6px;overflow:hidden}.xp i{display:block;height:100%;width:0;background:linear-gradient(90deg,#4bd5d5,#c3ff8b);transition:width .2s}.help{margin-left:auto;margin-top:7px;font-size:12px;color:#d0e0d7;background:#111a20aa;padding:8px 13px;border-radius:9px}#overlay,#levelup{position:fixed;z-index:5;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,#071012cc,#07101255),radial-gradient(ellipse,#15231acc,#0d151ddd);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#overlay section,#levelup section{width:min(500px,calc(100% - 36px));padding:34px;border:1px solid #9de3cc3b;border-radius:24px;background:#10191ee8;box-shadow:0 22px 80px #0009}.eyebrow{font-size:11px;letter-spacing:3px;color:#70e0d5;font-weight:700}h1{font-size:clamp(42px,9vw,74px);line-height:1;margin:8px 0 16px;color:#ffda57}#overlay section>p:not(.eyebrow){color:#bed0ca;line-height:1.8}.hero-card{display:grid;grid-template-columns:42px 1fr;align-items:center;margin:22px 0;padding:14px;border:1px solid #ffe36d40;border-radius:14px;background:#ffdc5410;font-size:25px}.hero-card span{grid-column:2;font-size:12px;color:#a9c1b7}button{font:inherit;color:#fff;cursor:pointer}#start{width:100%;border:0;border-radius:12px;background:linear-gradient(100deg,#ffd34f,#ff974c);color:#211b12;padding:13px;font-size:18px;font-weight:800;box-shadow:0 6px 25px #eaa6403d}#overlay section>small{display:block;text-align:center;color:#81958e;font-size:11px;margin-top:12px}.hidden{display:none!important}#toast{position:fixed;z-index:3;left:50%;top:19%;transform:translate(-50%,-8px);opacity:0;background:#102326e8;border:1px solid #6de3d7;padding:9px 17px;border-radius:20px;color:#dffff7;transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%)}#levelup{z-index:6;background:#071012bb}#levelup h2{font-size:38px;margin:0 0 18px;color:#ffd34f}.choices{display:grid;gap:9px}.choices button{text-align:left;background:#1b2b2e;border:1px solid #537a73;border-radius:12px;padding:12px}.choices button:hover{background:#24403f;border-color:#a8eea1}.choices b,.choices span{display:block}.choices span{font-size:12px;color:#a9c1b7}#mobile{display:none}@media(max-width:700px){.hud{inset:11px 12px auto;gap:8px}.brand{font-size:10px}.brand span{font-size:21px}.stats{padding:5px 8px;gap:0 5px}.stats b{font-size:15px}.stats span{font-size:8px}.help{position:absolute;top:98px;right:0;font-size:10px;padding:5px 8px}.bars{top:59px}#mobile{display:grid;place-items:center;position:fixed;z-index:4;left:22px;bottom:22px;width:116px;height:116px;border:1px solid #b9e8d555;border-radius:50%;color:#fffa;font-size:36px;background:#101c1c77;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:inset 0 0 0 16px #ffffff09}#mobile:after{content:"ลากเพื่อเดิน";position:absolute;bottom:7px;font-size:9px;color:#bdd4cc}#overlay section,#levelup section{padding:25px}}@media(max-width:700px)and (orientation:portrait){.hud{display:grid;grid-template-columns:auto auto;align-items:start}.brand{grid-column:1}.stats{grid-column:2;justify-self:end}.help{top:82px;left:0;right:auto;max-width:calc(100vw - 24px)}.bars{top:72px}#mobile{left:15px;bottom:18px;width:122px;height:122px}#toast{top:25%}#overlay section,#levelup section{max-height:calc(100dvh - 30px);overflow:auto}}@media(max-width:900px)and (orientation:landscape){.hud{inset:8px 14px auto;gap:12px}.brand span{font-size:22px}.stats{padding:4px 9px}.stats b{font-size:15px}.help{font-size:10px;padding:5px 9px}.bars{top:53px}#mobile{display:grid;left:16px;bottom:12px;width:92px;height:92px;font-size:28px}#mobile:after{font-size:8px;bottom:4px}#toast{top:17%}#overlay section,#levelup section{padding:18px;max-height:calc(100dvh - 20px);overflow:auto}h1{font-size:42px;margin:4px 0 9px}.hero-card{margin:10px 0;padding:8px}#pauseBtn{right:12px;top:8px}}@media(min-width:901px){#mobile{display:none}}.compact-landscape .help{font-size:10px;padding:5px 8px}.bars{position:absolute;top:80px;left:0;right:0;display:grid;gap:4px;pointer-events:none}.health,.xp{position:relative;top:auto;left:auto;right:auto;height:5px;background:#ffffff24;border-radius:8px;overflow:hidden}.health i,.xp i{display:block;height:100%;width:100%;transition:width .2s}.health i{background:linear-gradient(90deg,#fa5e67,#ffb35e)}.xp i{width:0}.stats{grid-template-columns:auto auto auto auto auto auto}.stats span{white-space:nowrap}.xp{height:4px}#pause{position:fixed;z-index:6;inset:0;display:grid;place-items:center;background:#071012bb;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}#pause section{width:min(380px,calc(100% - 36px));padding:28px;border:1px solid #9de3cc3b;border-radius:22px;background:#10191ef2;text-align:center}#pause h2{font-size:38px;margin:5px;color:#ffd34f}#pause p{color:#bbcdc6}#pause button{width:100%;border:0;border-radius:12px;background:linear-gradient(100deg,#ffd34f,#ff974c);color:#211b12;padding:12px;font-weight:800}#pauseBtn{position:fixed;z-index:3;right:20px;top:18px;width:38px;height:38px;border:1px solid #ffffff33;border-radius:11px;background:#111a20bb;font-size:17px}@media(max-width:700px){#pauseBtn{right:12px;top:11px;width:32px;height:32px}.bars{top:61px;right:54px;left:0}.stats{grid-template-columns:auto auto auto auto auto auto}.help{right:45px}}@media(max-width:700px)and (orientation:portrait){.bars{top:72px;right:0}.xp{height:4px}.help{right:auto}}@media(max-width:900px)and (orientation:landscape){.bars{top:53px;right:45px}.pauseBtn{right:12px;top:8px}}.touch-device #mobile{display:grid;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));width:112px;height:112px}.bars{left:50%;right:auto;width:min(320px,32vw);transform:translate(-50%)}@media(max-width:700px){.bars{width:min(230px,52vw)}}@media(max-width:700px)and (orientation:portrait){.bars{top:116px;width:min(190px,48vw)}}@media(max-width:900px)and (orientation:landscape){.bars{top:53px;width:min(220px,30vw)}}@media(max-width:700px)and (orientation:landscape){.bars{width:min(190px,34vw)}}.health{height:5px}.xp{height:3px}@media(max-width:700px)and (orientation:portrait){.bars{width:min(168px,44vw)}.touch-device #mobile{width:clamp(92px,27vw,112px);height:clamp(92px,27vw,112px)}}@media(max-width:900px)and (orientation:landscape){.bars{width:min(176px,28vw)}.touch-device #mobile{width:92px;height:92px}}