/* Small native material frame and the original red/blue PANEL gauge pixels. */
body.desktop-client:not(.touch-client) #target-card,body.desktop-client.touch-client #target-card{
 --target-meter-width:200px;position:absolute;top:50px;left:50%;right:auto;transform:translateX(-50%);
 width:220px;min-height:0;padding:5px 8px 7px;border:2px solid transparent;
 border-image:url('/assets/ui/native-detail-frame.png') 7 / 2px / 0 stretch;
 border-radius:0;background:linear-gradient(#14211bed,#0b1413e8);box-shadow:0 2px 5px #0006;
 color:#f0dfb3;pointer-events:none;user-select:none;
}
body.desktop-client #target-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font:600 12px/16px var(--font-title);letter-spacing:.025em;text-shadow:0 1px 2px #000}
body.desktop-client #target-card .meter.enemy{position:relative;height:13px;margin:4px 0 0;border:1px solid #7d6945;border-radius:2px;background:#101e30;overflow:hidden;box-shadow:inset 0 1px 2px #0009}
body.desktop-client #target-card .meter.enemy::before{content:'';position:absolute;inset:0;background:url('/assets/ui/top-2-0.png') left center/var(--target-meter-width) 100% no-repeat;opacity:.35;pointer-events:none}
body.desktop-client #target-bar{position:relative;display:block;height:100%;max-width:100%;background:#c83e51 url('/assets/ui/top-1-0.png') left center/var(--target-meter-width) 100% no-repeat;transition:width .18s ease-out}
body.desktop-client #target-hp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;height:100%;margin:0;padding:0;float:none;background:none;color:#fff4dc;font:600 10px/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:.03em;text-shadow:0 1px 2px #000,1px 0 #000,-1px 0 #000;white-space:nowrap}
body.desktop-client.touch-client #target-card{--target-meter-width:178px;top:calc(max(28px,var(--native-hud-height)) + 12px + env(safe-area-inset-top,0px));width:196px;padding:4px 7px 6px}
body.desktop-client.touch-client #target-name{font-size:11px;line-height:15px}
body.desktop-client.touch-client #target-card .meter.enemy{height:12px;margin-top:3px}
body.desktop-client.touch-client #target-hp{font-size:9px}
@media(prefers-reduced-motion:reduce){body.desktop-client #target-bar{transition:none}}

/* 2026-10-16（使用者：怪物血量改到任務欄下面）：橫向觸控時，怪物目標框放在左上任務欄正下方（portrait-mode.js 量任務欄底部寫進 --ls-target-top），不再擋畫面中間。 */
html:not([data-portrait="true"]) body.desktop-client.touch-client #target-card{left:var(--ls-quest-left,160px)!important;right:auto!important;transform:none!important;top:var(--ls-target-top,130px)!important}
/* 2026-10-16（使用者：資訊欄大小跟任務欄切齊）：寬度跟任務欄一樣，血條隨之縮放。 */
html:not([data-portrait="true"]) body.desktop-client.touch-client #target-card{box-sizing:border-box!important;width:var(--ls-quest-width,196px)!important;--target-meter-width:calc(var(--ls-quest-width,196px) - 18px)!important}