:root{--bg: #0a0908;--surface: rgba(20, 16, 12, .82);--foreground: #e8e0d0;--muted: #9c9284;--primary: #e0862c;--danger: #c0392b;--gold: #ffcc4d;--radius: 14px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html.bg,body{background:var(--bg);height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;font-family:Noto Sans Thai,Trebuchet MS,Segoe UI,system-ui,sans-serif;color:var(--foreground);-webkit-user-select:none;user-select:none}#game-root{position:fixed;inset:0;width:100%;height:100%}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.hidden{display:none!important}#hud{position:absolute;inset:0;pointer-events:none;z-index:10}.hud-top{position:absolute;top:calc(var(--safe-top) + 10px);left:calc(var(--safe-left) + 12px);right:calc(var(--safe-right) + 12px);display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.hud-stats{display:flex;flex-direction:column;gap:8px;flex:1;max-width:240px}.hp-bar{position:relative;height:26px;background:var(--surface);border:1px solid rgba(232,224,208,.25);border-radius:var(--radius);overflow:hidden;backdrop-filter:blur(4px)}.hp-fill{position:absolute;inset:0;width:100%;background:linear-gradient(to bottom,#d94f3d,#a02818);transition:width .25s ease;border-radius:var(--radius)}.hp-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;letter-spacing:.06em;text-shadow:0 1px 2px rgba(0,0,0,.8)}.hud-row{display:flex;gap:6px;flex-wrap:wrap}.hud-chip{background:var(--surface);border:1px solid rgba(232,224,208,.18);border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700;letter-spacing:.08em;backdrop-filter:blur(4px)}.hud-chip.gold{color:var(--gold)}#minimap{border-radius:var(--radius);border:1px solid rgba(232,224,208,.22);background:#0a0908bf;backdrop-filter:blur(4px);width:108px;height:108px}#damage-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(192,40,24,.55) 100%);opacity:0;transition:opacity .4s ease}.msg-banner{position:absolute;top:32%;left:50%;transform:translate(-50%);background:var(--surface);border:1px solid rgba(224,134,44,.5);color:var(--primary);border-radius:var(--radius);padding:10px 22px;font-size:15px;font-weight:700;letter-spacing:.05em;opacity:0;transition:opacity .3s ease;text-align:center;max-width:84vw;text-wrap:balance;backdrop-filter:blur(6px)}.msg-banner.show{opacity:1}#controls{position:absolute;inset:0;z-index:20}#joystick-zone{position:absolute;left:0;bottom:0;width:46%;height:55%;touch-action:none}#look-zone{position:absolute;right:0;bottom:0;width:54%;height:72%;touch-action:none}#joystick-base{position:absolute;left:calc(var(--safe-left) + 34px);bottom:calc(var(--safe-bottom) + 42px);width:118px;height:118px;border-radius:50%;background:#14100c66;border:2px solid rgba(232,224,208,.22);backdrop-filter:blur(3px)}#joystick-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;background:#e0862cbf;border:2px solid rgba(255,210,150,.6);transform:translate(-50%,-50%);box-shadow:0 2px 12px #00000080}.action-btn{position:absolute;right:calc(var(--safe-right) + 30px);bottom:calc(var(--safe-bottom) + 52px);width:84px;height:84px;border-radius:50%;border:2px solid rgba(255,210,150,.45);background:#a046148c;color:var(--foreground);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);touch-action:none;z-index:25}.action-btn svg{width:40px;height:40px}.action-btn:active{background:#e0862cd9;transform:scale(.94)}.overlay{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:linear-gradient(to bottom,#0a09088c,#0a0908e0),url(./title-bg.png) center / cover no-repeat}#gameover-screen,#level-screen,#loading-screen{background:#0a0908eb}.title-content{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:24px;max-width:420px}.title-eyebrow{font-size:12px;letter-spacing:.32em;color:var(--muted);font-weight:700}.title-name{font-size:clamp(38px,11vw,60px);line-height:1.05;letter-spacing:.06em;color:var(--foreground);text-shadow:0 0 24px rgba(224,134,44,.45),0 2px 4px rgba(0,0,0,.9);text-wrap:balance}.title-desc{font-size:15px;line-height:1.6;color:var(--muted);text-wrap:pretty}.btn-primary{font-family:inherit;font-size:17px;font-weight:700;letter-spacing:.08em;color:#1a0f05;background:linear-gradient(to bottom,#f0a04c,var(--primary));border:1px solid rgba(255,220,170,.6);border-radius:var(--radius);padding:15px 44px;cursor:pointer;box-shadow:0 4px 22px #e0862c66;transition:transform .12s ease}.btn-primary:active{transform:scale(.96)}.title-help{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}.title-help span{font-size:12px;color:var(--muted);background:#14100ca6;border:1px solid rgba(232,224,208,.15);border-radius:999px;padding:5px 12px}.over-title{font-size:clamp(42px,12vw,64px);letter-spacing:.12em;color:var(--danger);text-shadow:0 0 30px rgba(192,57,43,.5)}.level-title{font-size:clamp(36px,10vw,56px);letter-spacing:.14em;color:var(--primary);text-shadow:0 0 26px rgba(224,134,44,.5)}.loader{width:44px;height:44px;border-radius:50%;border:4px solid rgba(232,224,208,.15);border-top-color:var(--primary);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:768px){#joystick-base{left:60px;bottom:60px}.action-btn{right:60px;bottom:72px}#minimap{width:132px;height:132px}}