:root{--app-height:100dvh;--gold:#d8b264;--dark:#071018}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:var(--app-height);overflow:hidden;background:#020507;color:#fff;font-family:Arial,Helvetica,sans-serif;touch-action:none}
button,input{font:inherit}.hidden{display:none!important}

.boot,.auth{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:linear-gradient(#020609c9,#020609f5),url('/assets/art/v1.2/thanh-van-thon-background.webp') center/cover}
.boot-card,.auth-card{width:min(91vw,440px);padding:26px;text-align:center;background:linear-gradient(145deg,#081018f4,#1a110cf0);border:1px solid var(--gold);box-shadow:0 25px 85px #000}
.boot-card h1,.auth-card h1,.auth-card h2{margin:0 0 10px;color:#f0ce83;letter-spacing:2px}.boot-card p,.auth-card p{color:#cdbb96}
.boot-progress{height:11px;margin:18px 0 8px;background:#0d151c;border:1px solid #73562c;overflow:hidden}.boot-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#7e4e1d,#edcf7b);transition:.2s}
.auth-card input{width:100%;padding:13px;margin-top:10px;background:#071018;border:1px solid #70542d;color:#fff}.auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.auth-card button{width:100%;padding:12px;margin-top:10px;background:linear-gradient(#d7aa55,#80501b);border:1px solid #e8cd84;font-weight:700}

.game-shell,#game{position:fixed;inset:0;width:100%;height:var(--app-height);overflow:hidden}
canvas{display:block!important;width:100%!important;height:100%!important}
#hud{position:fixed;inset:0;z-index:20;pointer-events:none}
.panel{background:linear-gradient(145deg,rgba(5,9,13,.93),rgba(27,18,12,.88));border:1px solid #956f37;box-shadow:inset 0 0 0 1px #000,0 7px 25px #0009}

.profile{position:absolute;left:8px;top:max(8px,env(safe-area-inset-top));width:min(64vw,365px);height:118px;padding:9px;display:flex;gap:9px;clip-path:polygon(0 0,100% 0,93% 100%,0 100%)}
.portrait{width:88px;height:88px;border-radius:50%;border:3px solid var(--gold);object-fit:cover;box-shadow:0 0 17px #000}
.profile-main{flex:1}.profile-title{display:flex;justify-content:space-between;align-items:center}.profile-title strong{font-size:15px}.profile-title span{font-size:11px;color:#ead7aa}
.meter{position:relative;height:15px;margin-top:4px;background:#11171c;border:1px solid #785b30;overflow:hidden;transform:skewX(-12deg)}.meter i{display:block;height:100%}.meter b{position:absolute;inset:0;text-align:center;font-size:10px;line-height:13px;transform:skewX(12deg);text-shadow:0 1px 2px #000}.meter.hp i{background:linear-gradient(#ff6256,#a20f15)}.meter.mp i{background:linear-gradient(#42c9ff,#0f66a2)}.meter.exp i{background:linear-gradient(#ead579,#856323)}
.power{margin-top:4px;color:#e6bd68;font-size:11px;font-style:italic}.power b{font-size:16px}

.minimap{position:absolute;right:8px;top:max(8px,env(safe-area-inset-top));width:112px;padding:7px;text-align:center}.minimap strong,.minimap span{display:block;font-size:10px}.minimap img{width:96px;height:88px;object-fit:cover;border:1px solid #8d7039;margin:4px 0}
.quest{position:absolute;left:8px;top:132px;width:min(63vw,320px);padding:11px}.quest header{display:flex;justify-content:space-between;padding-bottom:7px;border-bottom:1px solid #76582d}.quest header b{color:#f0ce86}.quest header span{font-size:10px;color:#bbaa87}.quest>strong{display:block;margin-top:8px;color:#f1c45e;font-size:12px}.quest p,.quest small{font-size:11px}
.target{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:205px;padding:8px;text-align:center}.target>strong{font-size:12px;color:#ff9e8f}.target-meter{position:relative;height:14px;margin-top:5px;background:#151719;border:1px solid #805d2e}.target-meter i{display:block;height:100%;background:linear-gradient(#f05b52,#8f1014)}.target-meter b{position:absolute;inset:0;font-size:10px;line-height:12px}

.joystick{pointer-events:auto;position:absolute;left:20px;bottom:104px;width:150px;height:150px;border-radius:50%}.joystick>img{width:100%;height:100%;object-fit:contain;opacity:.92}.joystick>i{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#566879,#17212b 70%);border:2px solid #a7844c;box-shadow:0 4px 13px #000}

.utility-button{pointer-events:auto;position:absolute;padding:0;border:0;border-radius:50%;background:transparent;filter:drop-shadow(0 6px 9px #000)}.utility-button img{width:100%;height:100%;object-fit:contain}.target-button{right:19px;bottom:322px;width:60px;height:60px}.talk-button{right:104px;bottom:105px;width:58px;height:58px}.quality-button{right:83px;top:154px;width:48px;height:48px}.quality-button small{position:absolute;left:50%;top:44px;transform:translateX(-50%);font-size:8px;color:#f0d59c;white-space:nowrap}

.combat-button{pointer-events:auto;position:absolute;padding:0;border:0;border-radius:50%;background:transparent;filter:drop-shadow(0 7px 9px #000);overflow:hidden}.combat-button img{width:100%;height:100%;object-fit:contain}.attack-button{right:16px;bottom:103px;width:102px;height:102px}.skill-one{right:102px;bottom:164px;width:67px;height:67px}.skill-two{right:40px;bottom:220px;width:67px;height:67px}.combat-button span{position:absolute;right:4px;bottom:2px;width:19px;height:19px;border-radius:50%;background:#111b;color:#fff;font-size:10px;line-height:19px}.cooldown{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#000b var(--cd,0%),transparent 0);pointer-events:none}

.toast{position:absolute;left:50%;bottom:206px;transform:translateX(-50%);padding:8px 13px;background:#071018e8;border:1px solid var(--gold);border-radius:18px;opacity:0;transition:.2s;white-space:nowrap;font-size:11px}.toast.show{opacity:1}
.loot-feed{position:absolute;right:8px;top:225px;width:175px;display:grid;gap:5px}.loot-line{padding:7px;background:#071018e8;border-left:3px solid var(--gold);font-size:10px;animation:loot-in .25s ease}.loot-line.rare{border-color:#58a7ff;color:#83bdff}.loot-line.epic{border-color:#c56fff;color:#dfa9ff}@keyframes loot-in{from{opacity:0;transform:translateX(22px)}}

.bottom-nav{position:absolute;left:0;right:0;bottom:0;height:86px;display:grid;grid-template-columns:repeat(7,1fr);background:linear-gradient(#081019f6,#03070a);border-top:1px solid #80602f;pointer-events:auto}.bottom-nav button{padding:3px 0;background:transparent;border:0;color:#fff}.bottom-nav img{display:block;width:42px;height:42px;object-fit:contain;margin:0 auto}.bottom-nav span{display:block;font-size:9px;color:#ead3a2}

.dialogue{pointer-events:auto;position:fixed;left:14px;right:14px;bottom:96px;z-index:9998;padding:15px;background:linear-gradient(145deg,#081018f8,#1b120cf8);border:2px solid #a47b3d;box-shadow:0 20px 70px #000}.dialogue header{display:flex;justify-content:space-between;align-items:center}.dialogue header strong{color:#f0cd80}.dialogue header button{width:34px;height:34px;border-radius:50%;background:#21150f;border:1px solid #9c7639;color:#fff}.dialogue p{font-size:12px;line-height:1.6;color:#d8ccb2}.dialogue>button{width:100%;padding:10px;background:linear-gradient(#c99c4c,#734719);border:1px solid #e3c67b;font-weight:700}

.drawer{pointer-events:auto;position:fixed;inset:14px;z-index:9999;overflow:auto;background:linear-gradient(155deg,#081018fa,#1b120cfa);border:2px solid #a47b3d;box-shadow:0 25px 90px #000}.drawer.compact{inset:auto 18px 100px 18px;max-height:55vh}.drawer>header{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:13px 15px;background:#081018f9;border-bottom:1px solid #73562c}.drawer>header strong,.drawer>header span{display:block}.drawer>header strong{color:#f0cd80}.drawer>header span{font-size:11px;color:#c5b38d}.drawer>header button{width:38px;height:38px;border-radius:50%;background:#21150f;border:1px solid #9c7639;color:#fff;font-size:24px}.drawer-body{padding:13px}.drawer-body a{display:block;margin-top:8px;padding:11px;text-align:center;background:#8f6327;color:#fff;text-decoration:none;border:1px solid #ddbd70}
.paper-doll{position:relative;height:285px;background:radial-gradient(circle,#30495c48,#070b0f 70%);border:1px solid #604923;overflow:hidden}.paper-character{position:absolute;left:50%;top:54%;width:205px;height:260px;transform:translate(-50%,-50%);background:url('/assets/art/v1.2/player-idle.png') center/contain no-repeat;filter:drop-shadow(0 9px 10px #000)}.slot{position:absolute;width:103px;min-height:63px;padding:7px;background:#09121bef;border:1px solid #a47b3b;color:#fff}.slot small,.slot strong{display:block}.slot small{font-size:9px;color:#d7b86f}.slot strong{font-size:10px}.robe-slot{left:8px;top:8px}.weapon-slot{right:8px;top:8px}
.stats{margin-top:10px;padding:10px;background:#071018c7;border:1px solid #604923}.stats h3,.inventory h3{margin:0 0 8px;color:#efcb7e}.stats div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #ffffff12;font-size:12px}.inventory{margin-top:11px}.equipment-item{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:9px;margin-top:7px;background:#09121b;border:1px solid #594326}.equipment-item strong,.equipment-item small{display:block}.equipment-item strong{font-size:12px}.equipment-item small{font-size:9px;color:#c8b58c;margin-top:3px}.equipment-item button{padding:8px;background:linear-gradient(#c39849,#744819);border:1px solid #e4c77b;font-weight:700}.rarity-rare{color:#6ab0ff}.rarity-epic{color:#d28aff}

.death{pointer-events:auto;position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#000b}.death>div{width:min(90vw,420px);padding:25px;text-align:center;background:#160f12;border:2px solid #a44747}.death h2{color:#ff7878}.death button{padding:12px 25px;background:#8f2d2d;border:1px solid #eb8b8b;color:#fff}

.low-quality .quality-heavy{display:none!important}
@media(max-width:420px){.profile{width:69vw}.quest{width:67vw}.minimap{width:98px}.minimap img{width:82px;height:77px}.bottom-nav{height:74px}.bottom-nav img{width:34px;height:34px}.joystick{bottom:86px;width:135px;height:135px}.attack-button{bottom:87px;width:92px;height:92px}.skill-one{bottom:146px}.skill-two{bottom:201px}}
@supports not (height:100dvh){:root{--app-height:100vh}}