:root{--ink:#3b2414;--cream:#fff4dc;--gold:#ffd36a;--text-outline:0 1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 -1px 0 var(--ink), 1px 1px 0 var(--ink), -1px -1px 0 var(--ink)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{color:#fff;-webkit-user-select:none;user-select:none;touch-action:none;background:#8fd3fb;height:100%;margin:0;font-family:Mitr,Noto Sans Thai,system-ui,sans-serif;overflow:hidden}#game{position:fixed;inset:0}#hud{pointer-events:none;position:fixed;inset:0}#hud img{pointer-events:none;-webkit-user-drag:none;display:block}#hud button{pointer-events:auto;cursor:pointer;background:0 0;border:0;padding:0;font-family:inherit}#hud button:active{transform:scale(.94)}#status{top:max(8px, env(safe-area-inset-top));left:max(10px, env(safe-area-inset-left));align-items:center;gap:6px;display:flex;position:absolute}#portrait{flex:none;width:74px;height:74px;position:relative}#portrait .face{object-fit:cover;object-position:50% 20%;border-radius:50%;width:calc(100% - 18px);height:calc(100% - 18px);position:absolute;inset:9px}#portrait .frame{width:100%;height:100%;position:absolute;inset:0}#bars{width:min(250px,40vw)}#name-row{text-shadow:var(--text-outline);margin-bottom:1px;font-size:15px}#lv{color:var(--gold);font-weight:600}.bar{aspect-ratio:640/95;position:relative}.bar.mp{width:82%;margin-top:1px}.bar.mp span{font-size:10px}.bar .frame,#exp .frame{width:100%;height:100%;position:absolute;inset:0}.bar .fill,#exp .fill{clip-path:inset(0 100% 0 0);transition:clip-path .15s;position:absolute}.bar .fill{width:95%;height:72%;top:14%;left:2.5%}.bar .fill img,#exp .fill img{width:100%;height:100%}.bar span,#exp span{text-shadow:var(--text-outline);place-items:center;font-size:12px;display:grid;position:absolute;inset:0}#menu{top:max(8px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));gap:4px;display:flex;position:absolute}#menu button{width:50px;padding-bottom:17px;position:relative}#menu button img{width:50px;height:50px}#menu button:after{content:attr(data-label);letter-spacing:.02em;white-space:nowrap;color:var(--cream);-webkit-text-stroke:3.5px var(--ink);paint-order:stroke fill;font-size:13px;font-weight:600;line-height:1;position:absolute;bottom:0;left:50%;transform:translate(-50%)}#rules,#rule-editor{border-image:url(/assets/ui/panel.webp) 54 fill/22px}#rule-editor .pill,#rule-editor .card,#rule-editor .opt{font:inherit;color:var(--cream);cursor:pointer;background:0 0;border:0;border-image:url(/assets/ui/name-tag.webp) 46 fill/16px}#rule-editor .pill.on,#rule-editor .opt.on,#rules .row.active{color:var(--ink);border-image:url(/assets/ui/row-active.webp) 56 fill/16px}#rules{top:calc(max(8px, env(safe-area-inset-top)) + 76px);right:max(10px, env(safe-area-inset-right));pointer-events:auto;cursor:pointer;width:260px;padding:8px 12px 12px;position:absolute}#rules .title,#rules .row{align-items:center;display:grid;position:relative}#rules .title img{grid-area:1/1;width:100%;height:36px}#rules .title span{text-shadow:var(--text-outline);grid-area:1/1;padding-left:40px;font-weight:600}#rules .row{min-height:24px;text-shadow:var(--text-outline);padding:3px 10px;font-size:12px;line-height:1.25}#rules .row.active{min-height:32px;text-shadow:none;margin:2px -4px;padding:6px 14px;font-size:13px;font-weight:600}#rules .row.off span{opacity:.45;text-decoration:line-through}#rules .row.hint{opacity:.85;margin-top:4px;padding-left:6px;font-size:11px}#rule-editor{z-index:5;pointer-events:auto;width:min(760px,96vw);max-height:94vh;padding:14px 18px;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#rule-editor.show{display:block}#rule-editor-body{flex-direction:column;gap:8px;max-height:calc(94vh - 28px);display:flex;position:relative}#rule-editor .etitle{text-shadow:var(--text-outline);font-size:18px;font-weight:600}#rule-editor .etitle small{opacity:.85;margin-left:6px;font-size:12px;font-weight:400}#rule-editor em{font-style:normal}#rule-editor .targets{text-shadow:var(--text-outline);flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;display:flex}#rule-editor .targets .pill{text-shadow:none}#rule-editor .erows{touch-action:pan-y;flex-direction:column;gap:5px;display:flex;overflow-y:auto}#rule-editor .erow{grid-template-columns:22px 40px 1fr 1fr 36px 36px 52px;align-items:center;gap:6px;display:grid}#rule-editor .erow.empty{grid-template-columns:22px 1fr}#rule-editor .erow>b{text-align:center;color:var(--gold);text-shadow:var(--text-outline);font-size:16px}#rule-editor .erow.off .card{opacity:.5}#rule-editor .pill{white-space:nowrap;min-height:38px;padding:6px 14px;font-size:13px}#rule-editor .pill.wide{opacity:.8;width:100%}#rule-editor .card{text-align:left;align-items:center;gap:6px;min-height:44px;padding:6px 12px;font-size:13px;line-height:1.2;display:flex}#rule-editor .card em{color:var(--gold);flex:none;font-weight:600}#rule-editor .ico{object-fit:contain;flex:none;width:26px;height:26px}#rule-editor .tog{cursor:pointer;background:0 0;border:0;width:40px;height:40px;padding:0;overflow:hidden}#rule-editor .tog img{object-fit:fill;width:200%;height:100%}#rule-editor .tog.checked img{transform:translate(-50%)}#rule-editor .mv{cursor:pointer;background:0 0;border:0;width:36px;height:36px;padding:0}#rule-editor .mv img{width:100%;height:100%}#rule-editor .mv.up img{transform:rotate(-90deg)}#rule-editor .mv.down img{transform:rotate(90deg)}#rule-editor .mv.hide{visibility:hidden}#rule-editor .pill.del{min-height:34px;padding:4px 8px;font-size:12px}#rule-editor .efoot{justify-content:flex-end;gap:8px;display:flex}#rule-editor .efoot .save{min-width:110px;font-weight:600}#rule-editor .picker{border-image:url(/assets/ui/panel.webp) 54 fill/22px;flex-direction:column;gap:8px;padding:12px 14px;display:flex;position:absolute;inset:-6px}#rule-editor .ptitle{text-shadow:var(--text-outline);font-size:16px;font-weight:600}#rule-editor .plist{touch-action:pan-y;flex:1;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-content:start;gap:6px;display:grid;overflow-y:auto}#rule-editor .picker>.pill{align-self:flex-end}#rule-editor .opt{text-align:left;align-items:center;gap:6px;min-height:42px;padding:6px 12px;font-size:13px;display:flex}#death{z-index:6;pointer-events:auto;width:min(560px,92vw);max-height:90vh;color:var(--ink);border-image:url(/assets/ui/dialog-box.webp) 80 fill/34px;padding:28px 34px 22px;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#death.show{display:block}#death .text{flex-direction:column;gap:6px;display:flex}#death b{font-size:18px}#death ul{margin:0;padding:0;font-size:13px;line-height:1.45;list-style:none}#death li i{opacity:.6;min-width:52px;font-style:normal;display:inline-block}#death li.hurt{color:#a3341c}#death p{margin:4px 0 0;font-size:15px;font-weight:600}#death small{opacity:.6;font-size:11px}#controls{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);position:absolute;inset:0}.ctl{position:absolute;transform:translate(-50%,-50%)}.ctl img{width:100%;height:100%}#hud .ctl:active{transform:translate(-50%,-50%)scale(.92)}.skill .cd,.potion .cd{text-shadow:var(--text-outline);place-items:center;font-size:18px;font-weight:600;display:grid;position:absolute;inset:0}.skill .mp{color:#bfe3ff;text-shadow:var(--text-outline);font-size:10px;position:absolute;bottom:-4px;right:-2px}.skill.cooling img,.potion.cooling img,.skill.no-mp img{filter:grayscale(.85)brightness(.6)}.skill.empty img{opacity:.75}.potion .count{text-shadow:var(--text-outline);font-size:13px;font-weight:600;position:absolute;bottom:-6px;right:-4px}.potion.empty img{filter:grayscale()brightness(.5)}#auto-btn{filter:saturate(.35)brightness(.85);width:100%;height:100%;position:relative}#auto-wrap.on #auto-btn{filter:none}#auto-glow{opacity:0;width:180%;height:180%;transition:opacity .25s;position:absolute;inset:-40%}#auto-wrap.on #auto-glow{opacity:1;animation:1.6s ease-in-out infinite pulse}@keyframes pulse{50%{opacity:.55}}#stick-zone{pointer-events:auto;touch-action:none;width:46%;height:72%;position:absolute;bottom:0;left:0}#stick{opacity:.45;width:132px;height:132px;transition:opacity .15s;position:absolute;transform:translate(-50%,-50%)}#stick.active{opacity:.95;transition:none}#stick .base{width:100%;height:100%}#stick .knob{width:46%;height:46%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#exp{left:0;right:0;bottom:max(0px, env(safe-area-inset-bottom));height:16px;position:absolute}#exp .fill{width:98.8%;height:64%;top:18%;left:.6%}#exp span{justify-content:start;padding-left:10px;font-size:11px}#help{white-space:nowrap;text-shadow:var(--text-outline);font-size:12px;position:absolute;top:76px;left:50%;transform:translate(-50%)}#toast,#conn{white-space:nowrap;text-shadow:var(--text-outline);background:url(/assets/ui/name-tag.webp) 50%/100% 100% no-repeat;padding:12px 34px;position:absolute;left:50%;transform:translate(-50%)}#toast{opacity:0;transition:opacity .2s;top:30%}#toast.show{opacity:1}#conn{top:50%}#conn.hidden{display:none}#loading{z-index:5;pointer-events:auto;background:#8fd3fb;place-items:center;display:grid;position:fixed;inset:0}#loading img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}#load-text{text-shadow:var(--text-outline);font-size:20px;position:absolute;bottom:8%}#loading.done{opacity:0;pointer-events:none;transition:opacity .4s}#rotate{display:none}@media (pointer:coarse){#help{display:none}}@media (height<=460px){#rules{top:calc(max(6px, env(safe-area-inset-top)) + 64px);width:210px;padding:4px 8px 6px}#rules .title img{height:26px}#rules .title span{padding-left:30px;font-size:12px}#rules .row:not(.active){display:none}#rules .row.active{min-height:26px;padding:4px 10px;font-size:11px}#rule-editor{padding:8px 12px}#rule-editor-body{gap:5px}#rule-editor .etitle{font-size:15px}#rule-editor .etitle small{display:none}#rule-editor .erows{gap:3px}#rule-editor .erow{grid-template-columns:18px 30px 1fr 1fr 28px 28px 44px;gap:4px}#rule-editor .card,#rule-editor .opt{min-height:32px;padding:3px 10px;font-size:12px}#rule-editor .pill{min-height:30px;padding:3px 10px;font-size:12px}#rule-editor .pill.del{min-height:28px}#rule-editor .tog{width:30px;height:30px}#rule-editor .mv{width:28px;height:28px}#rule-editor .ico{width:20px;height:20px}#menu button,#menu button img{width:40px}#menu button img{height:40px}}@media (width<=900px){#menu button:nth-child(n+5){display:none}}@media (height<=460px){#menu button:after{font-size:9px}}@media (orientation:portrait) and (pointer:coarse){#rotate{z-index:10;text-align:center;text-shadow:var(--text-outline);pointer-events:auto;background:url(/assets/ui/loading.webp) 50%/cover no-repeat;place-items:center;padding:24px;font-size:20px;display:grid;position:fixed;inset:0}#rotate .icon{margin-bottom:8px;font-size:48px}}#map-title{opacity:0;width:min(460px,70vw);display:grid;position:absolute;top:18%;left:50%;transform:translate(-50%)}#map-title img,#map-title span{grid-area:1/1}#map-title img{width:100%}#map-title span{text-shadow:var(--text-outline);place-items:center;padding-left:10%;font-size:22px;font-weight:600;display:grid}#map-title.show{animation:2.6s forwards title-in}@keyframes title-in{0%{opacity:0;transform:translate(-50%,-12px)}15%,75%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%)}}#dialog{aspect-ratio:481/200;pointer-events:auto;width:min(640px,92vw);color:var(--ink);display:none;position:absolute;bottom:12%;left:50%;transform:translate(-50%)}#dialog.show{display:block}#dialog .box{width:100%;height:100%;position:absolute;inset:0}#dialog .face{aspect-ratio:1;width:26%;position:absolute;top:50%;left:5%;transform:translateY(-50%)}#dialog .face img{width:100%;height:100%;position:absolute;inset:0}#dialog #dialog-face{object-fit:cover;object-position:50% 15%;border-radius:50%;width:76%;height:76%;inset:12%}#dialog .text{flex-direction:column;gap:4px;display:flex;position:absolute;inset:18% 6% 14% 35%}#dialog b{font-size:18px}#dialog p{margin:0;font-size:16px;line-height:1.4}#dialog small{opacity:.6;margin-top:auto;font-size:11px}#hud .hidden{display:none!important}#coins{vertical-align:-3px;align-items:center;gap:3px;margin-left:8px;font-size:13px;display:inline-flex}#coins img{width:18px;height:18px}#talk-wrap{flex-direction:column;align-items:center;gap:2px;animation:.25s cubic-bezier(.3,1.6,.6,1) pop-in;display:flex;position:absolute;transform:translate(-50%,-100%)}#talk-btn img{width:var(--talk,68px);height:var(--talk,68px)}#talk-name{white-space:nowrap;text-shadow:var(--text-outline);background:url(/assets/ui/name-tag.webp) 50%/100% 100% no-repeat;padding:4px 14px;font-size:12px}@keyframes pop-in{0%{opacity:0;transform:translate(-50%,-100%)scale(.4)}}#dialog .text{bottom:10%}#dialog-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin-top:auto;display:flex}.dlg-quest{opacity:.85;flex:1 0 100%;font-size:12px}#hud .dlg-btn{color:#fff;text-shadow:var(--text-outline);background:url(/assets/ui/name-tag.webp) 50%/100% 100% no-repeat;padding:7px 20px 8px;font-size:14px}#hud .dlg-btn.yes{color:var(--gold);padding:9px 26px 10px;font-size:16px;font-weight:600}#hud .dlg-btn.next{color:var(--cream)}#tracker{top:calc(max(8px, env(safe-area-inset-top)) + 104px);left:max(14px, env(safe-area-inset-left));width:240px;text-shadow:var(--text-outline);flex-direction:column;gap:4px;display:flex;position:absolute}#tracker .head{color:var(--gold);font-size:13px;font-weight:600}#tracker .q{flex-direction:column;font-size:12px;line-height:1.3;display:flex}#tracker .q b{font-weight:600}#tracker .q.ready span{color:#b6ff8a}#loot-log{left:max(16px, env(safe-area-inset-left));flex-direction:column;gap:3px;display:flex;position:absolute;bottom:220px}.loot{text-shadow:var(--text-outline);align-items:center;gap:6px;font-size:13px;transition:opacity .5s,transform .5s;animation:.3s ease-out loot-in;display:flex}.loot img{object-fit:contain;width:24px;height:24px}.loot.out{opacity:0;transform:translateY(-8px)}@keyframes loot-in{0%{opacity:0;transform:translate(-16px)}}#boss{top:max(10px, env(safe-area-inset-top));text-align:center;width:min(420px,44vw);position:absolute;left:50%;transform:translate(-50%)}#boss .name{color:#cfeaff;text-shadow:var(--text-outline);font-size:16px;font-weight:600}#panel{width:min(440px,92vw);max-height:84vh;color:var(--cream);text-shadow:var(--text-outline);pointer-events:auto;flex-direction:column;padding:10px 18px 18px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#panel .bg{width:100%;height:100%;position:absolute;inset:0}#panel .title{align-items:center;display:grid;position:relative}#panel .title img{grid-area:1/1;width:100%;height:40px}#panel .title span{color:#fff;text-shadow:var(--text-outline);grid-area:1/1;padding-left:44px;font-weight:600}#hud #panel-close{color:#fff;text-shadow:var(--text-outline);background:url(/assets/ui/name-tag.webp) 50%/100% 100% no-repeat;padding:5px 16px;font-size:13px;position:absolute;top:12px;right:18px}#panel-body{min-height:0;margin-top:8px;position:relative;overflow-y:auto}#panel .stats{align-items:center;gap:14px;margin-bottom:8px;font-size:14px;font-weight:600;display:flex}#panel .stats .coins{align-items:center;gap:4px;margin-left:auto;display:flex}#panel .stats img{width:20px;height:20px}#panel .worn-row,#panel .grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}#panel .worn-row{grid-template-columns:repeat(3,64px);margin-bottom:10px}#panel .slot{aspect-ratio:1;position:relative}#panel .slot .frame{width:100%;height:100%;position:absolute;inset:0}#panel .slot .ico{object-fit:contain;width:72%;height:72%;position:absolute;inset:14%}#panel .slot .n{color:#fff;text-shadow:var(--text-outline);font-size:12px;font-weight:600;position:absolute;bottom:3px;right:6px}#panel .slot .lbl{color:var(--ink);text-shadow:none;opacity:.6;place-items:center;font-size:10px;display:grid;position:absolute;inset:0}#panel .info{min-height:42px;margin-top:10px;font-size:12px;line-height:1.4}#panel .info i{color:#b6ff8a;font-style:normal;font-weight:600}#panel .qrow{flex-direction:column;padding:6px 2px;font-size:13px;display:flex}#panel .qrow+.qrow{margin-top:4px}#panel .qrow span{color:var(--gold)}#panel .qrow small{opacity:.8;font-size:11px}#panel .qrow.done{opacity:.55}#panel .sub,#panel .empty{opacity:.8;margin:10px 0 4px;font-size:12px}#lv-banner{opacity:0;text-shadow:var(--text-outline);pointer-events:none;flex-direction:column;align-items:center;display:flex;position:absolute;top:12%;left:50%;transform:translate(-50%)}#lv-banner span{color:var(--gold);font-size:34px;font-weight:600}#lv-banner small{font-size:14px}#lv-banner.show{animation:3s ease-out forwards lv-banner}@keyframes lv-banner{0%{opacity:0;transform:translate(-50%)scale(.5)}12%{opacity:1;transform:translate(-50%)scale(1.12)}20%{transform:translate(-50%)scale(1)}80%{opacity:1;transform:translate(-50%)translateY(0)}to{opacity:0;transform:translate(-50%)translateY(-20px)}}@media (height<=460px){#tracker{top:calc(max(8px, env(safe-area-inset-top)) + 84px);width:200px}#loot-log{bottom:170px}}