:root{
  --stage-width:1080;
  --stage-height:1920;
  --stage-scale:1;
  --gold:#d6ad62;
  --gold-dark:#765126;
  --ink:#060b10;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#03070a;color:#fff;font-family:Arial,Helvetica,sans-serif}
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(#02070ac7,#02070af0),
    url('/assets/art/v1.1/thanh-van-thon-vertical-slice.webp') center/cover;
}
.boot-card,.auth-card{
  width:min(90vw,440px);padding:28px;
  background:linear-gradient(145deg,#081018f4,#17100cf1);
  border:1px solid var(--gold);box-shadow:0 26px 80px #000;
  text-align:center;
}
.boot-card h1,.auth-card h1,.auth-card h2{
  margin:0 0 10px;color:#efca7c;letter-spacing:2px
}
.boot-card p,.auth-card p{color:#cdbb95}
.boot-bar{height:11px;margin:18px 0 8px;background:#0d141b;border:1px solid #69502b;overflow:hidden}
.boot-bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,#7c4c1c,#eccb76);transition:.25s}
.auth-card input{
  width:100%;margin-top:10px;padding:13px;
  border:1px solid #70562f;background:#080e14;color:#fff
}
.auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-card button{
  width:100%;margin-top:11px;padding:12px;
  border:1px solid #e3c376;background:linear-gradient(#d5a953,#80521d);
  color:#0d0b08;font-weight:700
}

.viewport{position:fixed;inset:0;overflow:hidden;background:#020506}
.stage{
  position:absolute;left:50%;top:50%;width:1080px;height:1920px;
  transform:translate(-50%,-50%) scale(var(--stage-scale));
  transform-origin:center;overflow:hidden;background:#071018
}
.scene-plate{position:absolute;inset:0;width:1080px;height:1920px;object-fit:cover;user-select:none;pointer-events:none}
.cinematic-light{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 49% 48%,transparent 0 30%,rgba(0,0,0,.08) 60%,rgba(0,0,0,.42) 100%),
    linear-gradient(180deg,rgba(255,181,76,.05),transparent 35%,rgba(14,45,61,.12));
  mix-blend-mode:multiply
}
.leaf-field{position:absolute;inset:0;pointer-events:none}
.leaf{
  position:absolute;width:11px;height:6px;border-radius:100% 0 100% 0;
  background:#d9a078;opacity:.68;animation:leaf-fall linear infinite
}
@keyframes leaf-fall{
  from{transform:translate3d(0,-80px,0) rotate(0)}
  to{transform:translate3d(130px,2000px,0) rotate(720deg)}
}

.glass{
  background:linear-gradient(145deg,rgba(5,9,13,.91),rgba(27,18,12,.83));
  border:1px solid #9b7439;box-shadow:inset 0 0 0 1px #000,0 10px 35px #0009
}
.live-profile{
  position:absolute;left:20px;top:18px;width:410px;height:153px;padding:11px;
  display:flex;gap:13px;clip-path:polygon(0 0,100% 0,91% 100%,0 100%)
}
.profile-portrait{
  width:116px;height:116px;border-radius:50%;border:4px solid #d8b66f;
  background:url('/assets/art/v1.1/thanh-van-thon-vertical-slice.webp') 6.7% 2.2%/1080px 1920px;
  box-shadow:0 0 20px #000
}
.profile-data{flex:1;padding-top:3px}.name-row{display:flex;justify-content:space-between;align-items:center}
.name-row strong{font-size:25px}.name-row span{font-size:18px;color:#e8d4a5}
.bar{position:relative;height:22px;margin-top:7px;background:#0e1419;border:1px solid #80612f;overflow:hidden;transform:skewX(-13deg)}
.bar i{display:block;height:100%}.bar b{position:absolute;inset:0;text-align:center;line-height:20px;font-size:15px;text-shadow:0 2px 3px #000;transform:skewX(13deg)}
.bar.hp i{background:linear-gradient(#ff5e4f,#a60e13)}
.bar.mp i{background:linear-gradient(#38c9ff,#08619f)}
.bar.exp i{background:linear-gradient(#e7d27a,#806123)}
.combat-power{margin-top:7px;color:#e6bc67;font-style:italic;font-size:18px}.combat-power b{font-size:25px}

.live-quest{
  position:absolute;left:8px;top:276px;width:355px;padding:16px 17px
}
.live-quest header{display:flex;justify-content:space-between;border-bottom:1px solid #72552b;padding-bottom:10px}
.live-quest header strong{font-size:24px;color:#f2d28e}.live-quest header span{font-size:17px;color:#b8a57f}
.live-quest h3{margin:17px 0 10px;color:#f0c35d;font-size:20px}
.live-quest p{font-size:19px}.live-quest small{color:#dcc291;font-size:16px}

.target-panel{
  position:absolute;left:50%;top:36px;transform:translateX(-50%);
  width:285px;padding:10px;text-align:center;background:#080c10e8;border:1px solid #9d7136
}
.target-panel strong{color:#ff9d89;font-size:19px}
.target-hp{position:relative;height:20px;margin-top:7px;background:#17191b;border:1px solid #866131}
.target-hp i{display:block;height:100%;background:linear-gradient(#f5544e,#8e1014)}
.target-hp b{position:absolute;inset:0;font-size:14px;line-height:18px}

.player-live-label{
  position:absolute;left:505px;top:758px;transform:translateX(-50%);
  padding:3px 9px;background:#071018b8;border-radius:4px;
  color:#fff;font-size:19px;text-shadow:0 2px 4px #000
}

.hotspot{position:absolute;border:0;background:transparent;cursor:pointer;pointer-events:auto}
.hotspot:active{background:rgba(255,211,111,.08)}
.target-hotspot{left:944px;top:1025px;width:110px;height:110px;border-radius:50%}
.attack-hotspot{left:875px;top:1400px;width:175px;height:175px;border-radius:50%}
.skill-one-hotspot{left:845px;top:1190px;width:120px;height:120px;border-radius:50%}
.skill-two-hotspot{left:765px;top:1275px;width:120px;height:120px;border-radius:50%}
.character-hotspot{left:0;bottom:0;width:160px;height:150px}
.equipment-hotspot{left:360px;bottom:0;width:160px;height:150px}
.settings-hotspot{right:0;bottom:0;width:160px;height:150px}

.slash-effect{
  position:absolute;left:760px;top:746px;width:220px;height:110px;
  opacity:0;pointer-events:none;transform:rotate(-24deg);
  border-top:14px solid rgba(255,234,194,.95);
  border-radius:50%;filter:drop-shadow(0 0 17px #ff7b28)
}
.slash-effect.play{animation:slash .32s ease-out}
@keyframes slash{
  0%{opacity:0;transform:scale(.45) rotate(-40deg)}
  35%{opacity:1}
  100%{opacity:0;transform:scale(1.3) rotate(5deg)}
}
.damage-layer{position:absolute;inset:0;pointer-events:none}
.damage{
  position:absolute;left:790px;top:700px;font-weight:800;font-size:31px;
  color:#fff;text-shadow:0 3px 0 #000,0 0 9px #000;animation:damage-up .8s ease-out forwards
}
.damage.critical{color:#ffd75d;font-size:38px}
@keyframes damage-up{to{transform:translateY(-90px) scale(1.18);opacity:0}}

.loot-feed{position:absolute;right:25px;top:330px;width:250px;display:grid;gap:7px}
.loot{
  padding:10px;background:#071018e8;border-left:4px solid #d8b566;
  font-size:15px;animation:loot-in .25s ease
}
.loot.rare{border-color:#4da3ff;color:#83baff}.loot.epic{border-color:#c26dff;color:#dfa7ff}
@keyframes loot-in{from{opacity:0;transform:translateX(35px)}}

.toast{
  position:absolute;left:50%;bottom:265px;transform:translateX(-50%);
  padding:10px 17px;background:#071018e8;border:1px solid #d2aa5c;
  border-radius:20px;opacity:0;transition:.2s;white-space:nowrap;font-size:18px
}
.toast.show{opacity:1}

.drawer{
  position:absolute;inset:45px 40px 55px;z-index:50;
  background:linear-gradient(155deg,#081018f8,#1b120cf8);
  border:2px solid #a57c3c;box-shadow:0 30px 100px #000;
  overflow:auto
}
.drawer.compact{inset:500px 120px}
.drawer>header{
  position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;
  align-items:center;padding:18px 22px;background:#081018f8;border-bottom:1px solid #76582d
}
.drawer>header strong{display:block;color:#efcb7d;font-size:27px}.drawer>header span{font-size:18px;color:#bfae8a}
.drawer>header button{width:48px;height:48px;border-radius:50%;border:1px solid #9e7639;background:#221611;color:#fff;font-size:31px}
.drawer-body{padding:20px}
.drawer-body a{display:block;padding:14px;text-align:center;background:#9a6c2b;color:#fff;text-decoration:none;border:1px solid #e2c57c}

.paper-doll{position:relative;height:520px;background:radial-gradient(circle,#314a5e44,#070b0f 70%);border:1px solid #604824}
.paper-ring{position:absolute;left:50%;bottom:60px;width:340px;height:105px;transform:translateX(-50%);border:4px solid #69bfff;border-radius:50%;box-shadow:0 0 38px #2d8cff88}
.paper-silhouette{
  position:absolute;left:50%;top:55%;width:210px;height:360px;transform:translate(-50%,-50%);
  background:url('/assets/art/v1.1/thanh-van-thon-vertical-slice.webp') 49% 45%/1080px 1920px;
  clip-path:polygon(29% 0,69% 0,78% 17%,88% 37%,76% 100%,27% 100%,15% 38%,24% 17%);
  filter:drop-shadow(0 13px 13px #000)
}
.slot{
  position:absolute;width:180px;min-height:78px;padding:10px;
  background:#09121bec;border:1px solid #a7803e;color:#fff
}
.slot small,.slot strong{display:block}.slot small{color:#d6b66e}.slot strong{margin-top:4px}
.robe-slot{left:16px;top:25px}.weapon-slot{right:16px;top:25px}
.stats{margin-top:18px;padding:15px;background:#071018c9;border:1px solid #604824}
.stats h3,.inventory h3{color:#efcb7d}.stats div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #ffffff14;font-size:20px}
.inventory{margin-top:18px}.equipment-item{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:13px;margin-top:9px;background:#09121b;border:1px solid #594326}
.equipment-item strong,.equipment-item small{display:block}.equipment-item small{margin-top:4px;color:#c8b58d}.equipment-item button{padding:11px 16px;background:linear-gradient(#c79a4b,#744819);border:1px solid #e6c87e;font-weight:700}
.rarity-rare{color:#6db1ff}.rarity-epic{color:#d58bff}

.death-panel{
  position:absolute;inset:0;z-index:80;display:grid;place-items:center;background:#000b
}
.death-panel>div{width:520px;padding:35px;text-align:center;background:#160f12;border:2px solid #a34747}
.death-panel h2{color:#ff7777;font-size:36px}.death-panel p{font-size:20px}.death-panel button{padding:14px 30px;background:#8f2d2d;color:#fff;border:1px solid #ed8d8d;font-size:20px}