/* Safe-area HUD, designed for short Android browser viewports as well as portrait. */
:root{--gilt:#d8b773;--ink:#121c29;--glass:linear-gradient(135deg,#142334f5,#101621dd)}
#brand{display:none}
#combat-panel{position:fixed;left:max(12px,env(safe-area-inset-left));top:12px;width:212px;padding:10px 14px 11px 54px;background:var(--glass);border:1px solid #d8b77388;border-radius:4px 15px 4px 15px;box-shadow:0 6px 16px #0005;display:block;font-size:10px}
#combat-panel:before{content:'V';position:absolute;left:9px;top:12px;width:34px;height:34px;display:grid;place-items:center;font-family:Georgia,serif;font-size:25px;color:#f3d393;border:1px solid var(--gilt);border-radius:45% 45% 20% 20%;background:linear-gradient(160deg,#493347,#171c2a)}
#hero-name{font-family:Georgia,serif;font-size:16px;letter-spacing:.08em;color:#f7dfac;margin-bottom:3px}
#player-hp-label{font-size:10px;color:#e0e8eb}
#combat-panel progress{display:block;width:100%;height:7px;margin:5px 0 0;appearance:none;-webkit-appearance:none;border:0;background:#080f19;border-radius:5px;overflow:hidden}
#combat-panel progress::-webkit-progress-bar{background:#080f19;border:1px solid #7a8a9555;border-radius:5px}
#combat-panel progress::-webkit-progress-value{background:linear-gradient(90deg,#285e64,#72d7c3);border-radius:5px}
#combat-panel progress::-moz-progress-bar{background:#72d7c3;border-radius:5px}
#target-frame{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:160px;background:var(--glass);border:1px solid #94795877;padding:6px 10px;border-radius:3px 10px;display:none;text-align:center;font-size:10px}
.training #target-frame{display:block}
#target-hp::-webkit-progress-value{background:linear-gradient(90deg,#803c51,#df8194)!important}
#target-hp::-moz-progress-bar{background:#df8194!important}
#combat-result{position:fixed;left:50%;top:78px;transform:translateX(-50%);color:#ffe2a2;font-size:12px;pointer-events:none}
#training-repeat{position:fixed;left:50%;top:105px;transform:translateX(-50%);border-radius:5px;padding:7px 14px;font-size:11px;display:none;pointer-events:auto;background:var(--glass)}
#training-toggle{position:fixed;left:12px;top:94px;border-radius:4px 10px;padding:8px 12px;font-size:10px;letter-spacing:.04em;background:var(--glass);border:1px solid #d8b77377;pointer-events:auto}
#area{top:12px;right:12px;border-radius:4px 12px;background:var(--glass);border:1px solid #b8d9dd33;font-size:10px;padding:7px 10px}
#minimap{top:53px;right:12px;width:82px;height:82px;border:1px solid #c7ac78aa;box-shadow:0 5px 18px #0005}
#quest{top:144px;right:12px;font-size:9px;padding:5px 8px}
#help{top:134px;left:12px;font-size:10px;max-width:200px}
#combat-actions{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:140px;width:150px;height:160px;display:none;pointer-events:none}
#combat-actions button{position:absolute;pointer-events:auto;white-space:pre-line;font-size:10px;font-weight:700;line-height:1.25;border:1px solid #e4c98caa;box-shadow:inset 0 0 0 3px #13233366,0 4px 15px #0005;background:radial-gradient(circle at 38% 25%,#2d485be8,#101c2ef5)}
#attack{right:0;bottom:0;width:72px;height:72px;color:#ffe0a0;touch-action:none}
#skill-area{right:82px;bottom:9px;width:56px;height:56px;color:#d6c0ff;background:radial-gradient(circle at 40% 25%,#605486ee,#201b3bed)!important}
#evade{right:82px;bottom:80px;width:52px;height:52px;color:#a9f1f0}
#combat-actions button[aria-disabled=true]{opacity:.55}
#combat-float{position:fixed;left:0;top:0;pointer-events:none;display:none;font-weight:800;color:#ffe3a3;text-shadow:0 2px 3px #000;font-size:18px;will-change:transform,opacity;z-index:3}
#actions{right:max(14px,env(safe-area-inset-right));bottom:22px}
#dash{width:60px;height:60px;font-size:10px;background:var(--glass)}
#transform{width:76px;height:76px;font-size:11px;background:radial-gradient(circle at 40% 25%,#5c517de8,#1a2544f5);border:1px solid #bba2eb}
#joy{left:max(22px,env(safe-area-inset-left));background:radial-gradient(circle,#acc6d31c,#d5e2ff08);box-shadow:inset 0 0 20px #11243a20;border:1px solid #e9f3ff66}
#nub{box-shadow:0 3px 16px #0003;background:#e4eef65c;border:1px solid #e9f3ff99}
.training #message{bottom:auto;top:195px;max-width:80%;font-size:11px;background:var(--glass)}
@media(orientation:portrait){
 #combat-panel{width:184px;padding-left:49px}
 #target-frame{top:96px;left:12px;transform:none;width:168px}
 #training-toggle{top:148px}
 #help{display:none}
 #area{max-width:43vw}
 #minimap{width:82px;height:82px}
 .training #message{top:242px}
}
@media(max-height:550px){
 #combat-panel{width:206px;padding:7px 12px 9px 51px}
 #combat-panel:before{top:10px;width:31px;height:31px;font-size:23px}
 #hero-name{font-size:14px}
 #training-toggle{top:81px;padding:6px 10px}
 #combat-actions{right:14px;bottom:94px;width:144px;height:120px}
 #attack{width:66px;height:66px}
 #skill-area{right:78px;bottom:5px;width:52px;height:52px}
 #evade{right:78px;bottom:67px;width:50px;height:50px}
 #actions{bottom:14px}
 #transform{width:64px;height:64px}
 #dash{width:52px;height:52px}
 .training #message{top:70px;max-width:38%;font-size:10px;padding:6px 10px}
}
@media(max-height:360px){
 #area{right:82px;max-width:145px;font-size:9px;padding:6px}
 #minimap{top:12px;width:60px;height:60px}
 #combat-actions{bottom:86px;height:110px}
 #attack{width:62px;height:62px}
 #skill-area{right:72px;width:48px;height:48px}
 #evade{right:72px;bottom:61px;width:48px;height:48px}
 #joy{width:86px;height:86px;bottom:12px}
 #nub{left:21px;top:21px;width:42px;height:42px}
 #combat-result{top:58px;font-size:10px}
 #training-repeat{top:80px}
}
.training #interact{right:174px;bottom:146px;width:54px;height:54px;font-size:10px;background:var(--glass);border:1px solid var(--gilt)}
@media(max-height:550px){.training #interact{right:164px;bottom:108px;width:52px;height:52px}}
@media(orientation:portrait){#combat-panel{width:min(184px,49vw)}}