/* MainScreen.xml: pixels e camadas do PersonRoot original (370 x 147). */
.mobile-character-hud { position:relative; width:370px; height:147px; flex:none; }
.mobile-hud-art { position:relative; width:370px; height:147px; transform-origin:top left; font-family:Arial,sans-serif; }
.mobile-hud-art > i, .mobile-hud-art > span, .mobile-vital, .mobile-vital > i { position:absolute; display:block; }
.mobile-hud-art i { background-repeat:no-repeat; pointer-events:none; }
.mobile-head-back { left:16px; top:8px; }
.mobile-portrait { left:18px; top:11px; }
.mobile-frame { left:4px; top:4px; z-index:3; }
.mobile-badge { left:22px; top:87px; }
.mobile-vital { z-index:4; }
.mobile-vital i { left:0; top:0; clip-path:inset(0 calc(100% - var(--remaining,100%)) 0 0); transition:clip-path .2s linear; }
.mobile-hp { left:108px; top:51px; width:254px; height:22px; }
.mobile-mp { left:94px; top:77px; width:241px; height:11px; }
/* O fôlego não existe na arte do mobile — lá não se corre. Fica desenhado no
   CSS, na mesma pilha e com o mesmo corte inclinado de vida e mana. */
.mobile-sp { left:100px; top:91px; width:228px; height:7px; background:#120a04; box-shadow:inset 0 0 0 1px #00000080; clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%); }
.mobile-sp i { width:100%; height:100%; background:linear-gradient(180deg,#ffeaa8,#e5ae31 45%,#8a5a12); }
.mobile-name { left:120px; top:20px; max-width:238px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#f3f0e4; font-size:20px; font-weight:400; line-height:25px; text-shadow:0 1px 3px #171008; z-index:4; }
.mobile-level { left:43px; top:79px; width:36px; text-align:center; font-size:20px; line-height:26px; color:#ffffe6; text-shadow:0 1px 2px #251808; z-index:4; }
.mobile-open { position:absolute; inset:4px auto auto 4px; width:110px; height:100px; border:0; padding:0; border-radius:50%; background:transparent; cursor: var(--cur-default), pointer; z-index:5; }
.mobile-open:hover { background:transparent; }
.mobile-open:focus-visible { outline:2px solid #eecb72; outline-offset:3px; }
@media (max-width:540px) {
  .mobile-character-hud { width:296px; height:118px; }
  .mobile-hud-art { transform:scale(.8); }
}