@import"https://fonts.googleapis.com/css2?family=Mitr:wght@400;500;600&family=Sarabun:wght@400;600;700&display=swap";:root{--paper: #f1dfb7;--ink: #352719;--gold: #c79a50;--gold-hi: #ffe3a0;--leather: #34251f;--navy: #171c32;--cream: #fff2d4;--font-head: "Mitr", "Thonburi", sans-serif;--font-body: "Sarabun", "Thonburi", sans-serif;--outline: 0 2px 3px #120f20, 1px 0 #120f20, -1px 0 #120f20;--rim: 0 0 0 1px #312016, 0 0 0 3px #9a6b32, 0 4px 12px #100b1680}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#000}#game{position:fixed;inset:0;width:100vw;height:100vh;image-rendering:pixelated;outline:none;display:block}#hud{position:fixed;inset:0;pointer-events:none;color:var(--cream);font:14px var(--font-body)}#hud .interactive{pointer-events:auto}#hud button{font:inherit;color:inherit;cursor:pointer}#hud button:focus-visible{outline:3px solid #b6eeff;outline-offset:5px}.panel{border:1px solid var(--gold-hi);border-radius:10px;background:linear-gradient(145deg,#28304b,var(--navy));box-shadow:var(--rim)}.party{position:absolute;left:22px;top:24px;width:264px}.member{display:grid;grid-template-columns:74px 1fr;align-items:center;gap:10px;position:relative}.member .pt{position:relative;width:74px;height:80px;border-radius:50%;border:3px solid var(--gold-hi);background:radial-gradient(ellipse at 45% 25%,#416688,#182c49 70%);box-shadow:var(--rim),inset 0 0 0 3px #8d602c}.member .pt:before{content:"◆";position:absolute;top:-16px;left:25px;color:var(--gold-hi);text-shadow:0 2px #533715;font-size:21px;z-index:2}.member .pt i{position:absolute;inset:4px;border-radius:50%;background-repeat:no-repeat;background-size:1848px 825px;background-position:-34px -27px;image-rendering:pixelated}.member .key{position:absolute;right:-4px;bottom:-8px;background:#233759;border:1px solid var(--gold-hi);border-radius:3px 3px 8px 8px;color:var(--cream);min-width:22px;padding:1px 5px;text-align:center;box-shadow:0 1px 3px #16101a;font-size:12px}.member .info{min-width:0;padding:5px 7px 6px;background:linear-gradient(110deg,#2c201cf5,#171c30f5);border:1px solid var(--gold);border-radius:3px 12px 12px 3px;box-shadow:0 3px 8px #100b1680}.member .name{display:flex;align-items:baseline;justify-content:space-between;gap:4px;margin:-10px -10px 5px;padding:4px 9px;background:linear-gradient(110deg,#ffe9ba,#e0c28e 80%,#f5e3bd);color:var(--ink);border:1px solid #9d763e;border-radius:3px 8px 2px 3px;box-shadow:0 2px 2px #120f2080;font:500 15px var(--font-head)}.member .name span{font:11px var(--font-body)}.member.down .pt i{filter:grayscale(1) brightness(.55)}.member.down .pt:after{content:"×";position:absolute;inset:0;display:grid;place-items:center;font-size:35px;color:#ffb7a6;text-shadow:var(--outline)}.bar{position:relative;overflow:hidden;height:14px;margin-top:4px;border:1px solid #a98249;border-radius:5px;background:#1a1420;box-shadow:inset 0 1px 3px #000}.bar i{display:block;height:100%;width:var(--v, 100%);transition:width .16s ease-out}.bar.hp i,.boss .bar i{background:linear-gradient(#ffb38c,#e95747 26%,#b72e35 75%,#762030)}.member.low .hp{outline:1px solid #ffc9a5}.member.low .hp i{background:linear-gradient(#ff7d53,#b41436)}.bar.mp i{background:linear-gradient(#a5e8ff,#47a9e3 30%,#2862a9)}.bar .hv,.bar .mv,.bar .pct{position:absolute;inset:0 5px 0 0;display:flex;align-items:center;justify-content:flex-end;font-size:11px;line-height:1;color:#fff9e9;text-shadow:0 1px 2px #000,1px 0 2px #000;font-variant-numeric:tabular-nums;z-index:1}.bar .sh{position:absolute;inset:0 auto 0 0;width:var(--v, 0%);background:repeating-linear-gradient(120deg,#ffe5a9aa 0 4px,#fff4d655 4px 7px)}.bar.ult{height:5px;border-color:#7e6986}.bar.ult i{background:linear-gradient(90deg,#7962b4,#ddc2ff)}.bar.ult.full i{background:var(--gold-hi)}.ult-label{color:#eed4a6;text-align:right;font-size:10px;margin-top:2px;line-height:1.2}.navigation{position:absolute;top:18px;right:22px;width:166px;display:flex;flex-direction:column;align-items:center;gap:7px}.chip{text-align:center;max-width:100%;padding:5px 10px;font:500 12px var(--font-head);color:var(--ink);background:linear-gradient(110deg,#ffe9bd,#ddc499,#ffedc8);border-radius:3px}.chip small{display:block;font:10px var(--font-body);color:#65503a;margin-top:1px}.minimap{width:132px;height:132px;border-radius:50%;border:3px solid var(--gold-hi);box-shadow:var(--rim),inset 0 0 0 3px #664928;background:#171e2a;padding:3px}.minimap:empty{display:none}.minimap svg{width:100%;height:100%;display:block;border-radius:50%}.boss{position:absolute;left:50%;top:23px;transform:translate(-50%);width:min(440px,calc(100vw - 640px));min-width:240px;padding:8px 16px 6px;border-radius:15px 3px}.boss:before,.boss:after{content:"◆";position:absolute;top:23px;color:var(--gold-hi);font-size:15px}.boss:before{left:-8px}.boss:after{right:-8px}.boss .title{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.boss .bn{font:500 16px var(--font-head)}.boss .ph{color:var(--gold-hi);font-size:12px;white-space:nowrap}.boss .bar{height:16px}.boss .bar i{position:relative}.boss .bar .lag{position:absolute;inset:0 auto 0 0;width:var(--v, 100%);background:#ffe0b4;transition:width .5s .25s}.boss .armor{min-height:16px;margin-top:3px;text-align:center;font-size:11px;color:#c9d5ff}.skills{position:absolute;right:22px;bottom:22px;display:grid;grid-template-columns:repeat(3,68px);gap:9px;padding:14px;border-radius:15px 8px;border-color:#ddb879;background:repeating-linear-gradient(15deg,#ffffff03 0 1px,transparent 1px 4px),linear-gradient(130deg,#594132,#2f211d 65%,#4b3428);box-shadow:var(--rim),inset 0 0 0 5px #231a17,inset 0 0 0 6px #967144}.skills:before{content:"✦";position:absolute;left:-10px;top:45%;color:var(--gold-hi);background:#704d29;border:1px solid var(--gold);border-radius:50%;padding:1px 4px}.skills[data-count="4"]{grid-template-columns:repeat(2,68px)}.skill{position:relative;height:79px;color:#ffdb86;background:linear-gradient(130deg,#fff0cc,#ba9361);border:1px solid #e7cca0;border-radius:5px;box-shadow:0 2px 3px #100d14,inset 0 0 0 3px #a07a49}.skill .icon{position:absolute;inset:5px 5px 22px;display:grid;place-items:center;border:1px solid #5b3d28;border-radius:2px;background:radial-gradient(ellipse at 40% 80%,#495474,#141d32 80%);box-shadow:inset 0 0 8px #0008;overflow:hidden}.skill .icon svg{width:42px;height:42px;filter:drop-shadow(0 0 4px #9ddfff70)}.skill[data-icon=guard],.skill[data-icon=frost],.skill[data-icon=crescent],.skill[data-icon=charge],.skill[data-icon=chain],.skill[data-icon=storm]{color:#abe5ff}.skill[data-icon=heal],.skill[data-icon=revive],.skill[data-icon=healer]{color:#cfffbc}.skill .k{position:absolute;left:50%;bottom:14px;transform:translate(-50%);padding:0 5px;background:linear-gradient(#ffedc5,#d3b080);color:#362318;border:1px solid #6e4928;border-radius:3px;font-size:12px;font-weight:700;line-height:19px;white-space:nowrap;z-index:2;box-shadow:0 1px 2px #231623}.skill .n{position:absolute;bottom:1px;left:1px;right:1px;text-align:center;color:#3e2919;font-size:10px;line-height:12px;white-space:nowrap}.skill .cd{position:absolute;inset:5px 5px 22px;border-radius:2px;background:linear-gradient(to top,#0c1224d9 var(--p, 0%),#0c122430 0);display:flex;align-items:center;justify-content:center;color:#fff4d8;font-size:22px;font-weight:700;text-shadow:var(--outline)}.skill:has(.cd:not([style*="display: none"])) .cd{font-variant-numeric:tabular-nums}.skill.ready-ult{outline:2px solid #ffdf8e;box-shadow:0 0 13px #ecc16d88}.skill.nomp .icon{filter:saturate(.25)}.skill.nomp:after{content:"MP ไม่พอ";position:absolute;top:8px;left:6px;right:6px;padding:2px 0;background:#142236e8;color:#bdeaff;text-align:center;font-size:9px;z-index:3}.autosw{position:absolute;right:22px;bottom:22px;display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 10px;background:linear-gradient(#514032,#241b18);border-radius:18px;color:#dccab0}.in-combat .autosw{bottom:223px}.autosw .lbl{color:var(--gold-hi);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.autosw .track{width:30px;height:16px;border:1px solid #bb935b;border-radius:12px;background:#151b2b;padding:1px}.autosw .track i{display:block;width:12px;height:12px;border-radius:50%;background:linear-gradient(#fff0bd,#ad7937);transition:transform .15s ease-out}.autosw.on .track i{transform:translate(13px)}.autosw.on .st{color:#c8eea0}.autosw .st{width:23px;font-size:11px}.autosw .k{border:1px solid #7c6341;border-radius:3px;font-size:10px;padding:1px 4px}.journal{position:absolute;left:22px;bottom:22px;min-height:70px;width:100px;padding:7px 8px 8px 15px;background:repeating-linear-gradient(0deg,#fff1 0 1px,transparent 1px 4px),linear-gradient(120deg,#674730,#30221d);border:2px solid #c49b58;border-left:7px solid #88613b;border-radius:4px 9px 9px 4px;box-shadow:var(--rim),inset 0 0 0 3px #241c19}.journal span{display:block;color:var(--gold-hi);font:27px Georgia,serif;line-height:25px}.journal b{font-size:11px;font-weight:600}.journal small{display:block;color:#dac49f;font-size:10px}.journal[aria-expanded=true]{border-color:#ffdf9a}.hint{position:absolute;left:22px;bottom:113px;width:min(340px,calc(100vw - 44px));padding:14px 16px;color:var(--ink);background:linear-gradient(115deg,#f7e8c5,#e5cda3);font-size:13px;line-height:1.7;z-index:5}.hint b{color:#654425}.hint.hidden{visibility:hidden}.prompt{position:absolute;transform:translate(-50%,-100%);padding:5px 9px;font-size:13px;white-space:nowrap;border-radius:5px}.prompt b{color:var(--ink);background:var(--paper);padding:1px 5px;border-radius:3px;margin-right:5px}.dialog{position:absolute;left:50%;bottom:24px;transform:translate(-50%);width:min(600px,calc(100vw - 44px));padding:16px 22px 12px;color:var(--ink);background:linear-gradient(115deg,#fff0cd,#e7cda2);z-index:8}.dialog .who{font:500 16px var(--font-head);color:#704725}.dialog .text{font-size:17px;line-height:1.6;min-height:54px}.dialog .next{text-align:right;font-size:11px;color:#715d44}.dmg{position:absolute;font:700 17px var(--font-body);color:#fff1ce;text-shadow:var(--outline);transform:translate(-50%,-50%);animation:rise .8s ease-out forwards;white-space:nowrap}.dmg.crit{color:#ffe19a;font-size:23px}.dmg.heal{color:#c3ffb2}.dmg.hurt{color:#ffaaa0}@keyframes rise{0%{opacity:1;transform:translate(-50%,-40%)}20%{transform:translate(-50%,-90%)}to{opacity:0;transform:translate(-50%,-170%)}}.banner{position:absolute;top:24%;left:50%;transform:translate(-50%);text-align:center;animation:bannerIn 2.4s ease-out forwards;white-space:nowrap}.banner .big{font:500 32px var(--font-head);color:#fff3d3;text-shadow:var(--outline)}.banner .small{display:inline-block;margin-top:6px;padding:3px 15px;border-block:1px solid #d5b574;color:#ffe3ad;background:#171c30e8}@keyframes bannerIn{0%{opacity:0}15%,85%{opacity:1}to{opacity:0}}.result{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:25px 28px;text-align:center;width:min(430px,calc(100vw - 44px));z-index:10}.result h2{margin:0 0 8px;font:500 30px var(--font-head);color:var(--gold-hi)}.result.lose h2{color:#ffb3a4}.result p{line-height:1.6;margin:0 0 20px}.result button{border:1px solid var(--gold);border-radius:5px;background:linear-gradient(#5c4630,#34251d);min-height:40px;padding:7px 18px;margin:4px}.result button:hover{background:#674a30}.fade{position:fixed;inset:0;pointer-events:none;opacity:0}.fade.swirl{background:radial-gradient(circle at var(--fx, 50%) var(--fy, 50%),#f0e6fff2 0%,#966effd9 18%,#1e1450f2 60%);transition:opacity .6s ease-in}.fade.white{background:#fff;transition:opacity .2s}.fade.on{opacity:1}.mbar{position:absolute;width:46px;height:7px;transform:translate(-50%,-100%);background:#1b1530;border:1px solid #977449;border-radius:3px;overflow:hidden}.mbar i{display:block;height:100%;background:linear-gradient(#ffa3c4,#d33c6a);transition:width .12s}@media(max-width:1000px){.party{width:230px;left:16px;top:20px}.member{grid-template-columns:60px 1fr;gap:8px}.member .pt{width:60px;height:68px}.member .pt i{background-size:1232px 550px;background-position:-20px -17px}.member .pt:before{left:19px}.member .name{font-size:13px}.member .name span{font-size:10px}.navigation{right:16px;width:146px}.minimap{width:108px;height:108px}.boss{left:calc(50% + 35px);width:calc(100vw - 440px);min-width:230px}.boss .bn{font-size:14px}}@media(max-width:700px){.party{left:12px;top:15px;width:212px}.member .name span{display:none}.navigation{top:12px;right:12px;width:125px}.minimap{display:none}.chip{font-size:11px}.chip small{font-size:9px}.boss{left:50%;top:120px;width:min(380px,calc(100vw - 32px));min-width:0;padding:5px 12px}.boss .armor{font-size:10px;min-height:0}.skills{right:12px;bottom:12px;grid-template-columns:repeat(3,57px);gap:6px;padding:10px}.skills[data-count="4"]{grid-template-columns:repeat(2,57px)}.skill{height:68px}.skill .icon svg{width:33px;height:33px}.skill .n{font-size:9px}.skill .k{font-size:11px;line-height:17px}.autosw{right:12px;bottom:12px}.in-combat .autosw{bottom:183px}.journal{left:12px;bottom:12px;width:90px}.hint{left:12px;bottom:98px;max-height:calc(100vh - 220px);overflow-y:auto;pointer-events:auto}.dialog{bottom:12px}.banner .big{font-size:25px}}@media(max-width:370px){.party{width:192px}.navigation{width:100px}}@media(max-height:520px)and (min-width:701px){.minimap{display:none}.skills{grid-template-columns:repeat(6,56px);gap:6px;padding:9px;right:16px;bottom:14px}.skills[data-count="4"]{grid-template-columns:repeat(4,56px)}.skill{height:68px}.in-combat .autosw{bottom:112px;right:16px}.hint{max-height:calc(100vh - 220px);overflow-y:auto;pointer-events:auto}}@media(prefers-reduced-motion:reduce){#hud *,.fade{animation:none!important;transition:none!important}}