:root{--app-height:100dvh;--gold:#ddb96b}
*{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,.screen{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:radial-gradient(circle at top,#203648,#020609 75%)}
.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}
.boot-error{max-height:170px;overflow:auto;text-align:left;white-space:pre-wrap;color:#ff9e9e;background:#120b0d;border:1px solid #7b3333;padding:9px;font-size:11px}.boot-card>button{margin-top:10px;padding:10px 20px;background:#8b5d24;border:1px solid #e4c273;color:#fff}
.auth-card input{width:100%;padding:13px;margin-top:10px;background:#071018;border:1px solid #70542d;color:#fff}.row{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,#webgl{position:fixed;inset:0;width:100%;height:var(--app-height);display:block}
#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);display:grid;place-items:center;background:radial-gradient(circle,#456179,#101820 72%);color:#efd082;font-weight:800}
.profile-main{flex:1}.profile-title{display:flex;justify-content:space-between}.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)}.hp i{background:linear-gradient(#ff6256,#a20f15)}.mp i{background:linear-gradient(#42c9ff,#0f66a2)}.exp i{background:linear-gradient(#ead579,#856323)}
.power{margin-top:4px;color:#e6bd68;font-size:11px}.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}.mini-map{position:relative;width:96px;height:88px;margin:4px 0;background:linear-gradient(135deg,#274132,#173047);border:1px solid #8d7039;overflow:hidden}.road{position:absolute;left:43px;top:-10px;width:20px;height:120px;background:#9e8c68;transform:rotate(9deg)}.player-dot,.wolf-dot{position:absolute;width:9px;height:9px;border-radius:50%;box-shadow:0 0 7px currentColor}.player-dot{left:47px;top:58px;background:#52eb68;color:#52eb68}.wolf-dot{left:70px;top:25px;background:#ff6058;color:#ff6058}
.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,.quest p,.quest small{font-size:10px}.quest>strong{display:block;margin-top:8px;color:#f1c45e;font-size:12px}
.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:145px;height:145px;border-radius:50%}.joystick-ring{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#17212b99 0 30%,#05080aa8 31% 100%);border:2px solid #a9854c}.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%,#61788b,#18232d 70%);border:2px solid #c6a15c}
.utility-button,.combat-button{pointer-events:auto;position:absolute;padding:0;border-radius:50%;border:3px solid var(--gold);background:radial-gradient(circle,#24323e,#070b0f 74%);color:#fff;filter:drop-shadow(0 7px 9px #000);overflow:hidden}.target-button{right:18px;bottom:322px;width:58px;height:58px;font-size:26px}.talk-button{right:110px;bottom:106px;width:58px;height:58px;font-size:20px}
.attack-button{right:16px;bottom:103px;width:102px;height:102px}.skill-button{right:103px;bottom:165px;width:67px;height:67px}.dash-button{right:40px;bottom:221px;width:67px;height:67px}.sword-mark{font-size:45px;color:#ffe4a4}.skill-mark{font-size:34px;color:#bfeaff}.dash-mark{font-size:32px;color:#bdcfff}.combat-button>b{position:absolute;right:4px;bottom:2px;width:19px;height:19px;border-radius:50%;background:#111c;font-size:10px;line-height:19px}.cooldown{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#000b var(--cd,0%),transparent 0)}
#damage-layer{position:fixed;inset:0;pointer-events:none}.damage-number{position:absolute;z-index:200;color:#fff;font-size:25px;font-weight:800;text-shadow:0 3px 3px #000;animation:damage-up .75s ease-out forwards}.damage-number.critical{color:#ffd459;font-size:31px}@keyframes damage-up{to{transform:translateY(-70px) scale(1.15);opacity:0}}
.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}.loot-line.rare{border-color:#58a7ff}.loot-line.epic{border-color:#c56fff}
.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:4px 0;background:transparent;border:0;color:#fff}.nav-icon{display:grid;place-items:center;width:38px;height:38px;margin:auto;border:1px solid #b7904d;border-radius:50%;background:#17212a;color:#efd18a;font-size:18px}.bottom-nav small{display:block;font-size:8px;color:#ead3a2;margin-top:2px}
.dialogue{pointer-events:auto;position:fixed;left:14px;right:14px;bottom:96px;z-index:9998;padding:15px;background:linear-gradient(145deg,#081018fa,#1b120cfa);border:2px solid #a47b3d}.dialogue header{display:flex;justify-content:space-between}.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}.dialogue>button{width:100%;padding:10px;background:linear-gradient(#c99c4c,#734719);border:1px solid #e3c67b}
.drawer{pointer-events:auto;position:fixed;inset:14px;z-index:9999;overflow:auto;background:linear-gradient(155deg,#081018fa,#1b120cfa);border:2px solid #a47b3d}.drawer.compact{inset:auto 18px 100px 18px;max-height:60vh}.drawer>header{position:sticky;top:0;display:flex;justify-content:space-between;padding:13px 15px;background:#081018fa}.drawer>header strong,.drawer>header span{display:block}.drawer>header span{font-size:11px}.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;padding:10px;background:#8f6327;color:#fff;text-align:center;text-decoration:none}.model-preview{height:230px;display:grid;place-items:center;background:radial-gradient(circle,#2f4b5c55,#070b0f 70%);border:1px solid #604923}.model-preview span{font-size:32px;color:#e3c376}.stats{margin-top:10px;padding:10px;background:#071018c7;border:1px solid #604923}.stats div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #ffffff12}.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 small{font-size:9px;color:#c8b58c}.equipment-item button{padding:8px;background:linear-gradient(#c39849,#744819);border:1px solid #e4c77b}.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}
@media(max-width:420px){.profile{width:69vw}.quest{width:67vw}.minimap{width:98px}.bottom-nav{height:74px}.nav-icon{width:32px;height:32px}.joystick{bottom:86px;width:135px;height:135px}.attack-button{bottom:87px;width:92px;height:92px}.skill-button{bottom:146px}.dash-button{bottom:201px}}
@supports not (height:100dvh){:root{--app-height:100vh}}