/* Field instruments share one matte material. Text, bars and map stay live. */
#game #minimap-panel,#game #bottom-bar .vitals{isolation:isolate;background:#242321!important;border:1px solid #736d5f;border-radius:0;box-shadow:0 1px 0 #090a09;filter:none}
#game #minimap-panel::before,#game #bottom-bar .vitals::before{content:'';position:absolute;inset:0;z-index:-1;background:url('../public/assets/hud-paper-v1.webp') repeat;background-size:256px 256px;opacity:.65;pointer-events:none}
#game #minimap-panel header{border-bottom:1px solid #6963566b}
#game #minimap-panel #zone{color:#ede9de;font:600 12px/1.4 system-ui}
#game #minimap-panel #online{color:#aca89c;font-size:12px}
#game #minimap-panel .minimap-viewport{margin:7px 8px 3px;background:#34352e;border:1px solid #0e100e;box-shadow:none}
#game #minimap-panel :is(#map-btn,#channel-btn){color:#d3cec0;font:12px/1.4 system-ui}
#game #minimap-panel #channel-btn{overflow:hidden;text-overflow:ellipsis}
#game #minimap-panel #map-btn{border-left:1px solid #6963566b}
#game #minimap-panel :is(#map-btn,#channel-btn):hover{background:#e6dfc411!important}
#game #minimap-panel #map-btn kbd{color:#b4ad98}
body #bottom-bar{background:#1b1c1b;border-top:1px solid #555448;box-shadow:none}
#game #bottom-bar .vitals{position:relative;top:auto;left:auto;right:auto;bottom:auto;padding:8px 10px;align-self:center}
#game #bottom-bar .identity{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:7px;margin:0 0 6px;align-items:baseline}
#game #bottom-bar .level{font:12px/16px system-ui;color:#c6bd9f}
#game #bottom-bar #player-name{font:600 13px/16px system-ui;color:#f1ede3}
#game #bottom-bar #gold{grid-row:auto;grid-column:3;max-width:80px;overflow:hidden;text-overflow:ellipsis;color:#bfb394;font:12px/16px system-ui}
#game #bottom-bar .vital-bars{display:grid;gap:4px}
#game #bottom-bar .vital-line{display:grid;grid-template-columns:23px minmax(0,1fr);align-items:center;gap:5px}
#game #bottom-bar .vital-line>small{font:600 12px/16px system-ui;color:#d4c8b8}
#game #bottom-bar .vital-line:has(.mana)>small{color:#b7c7d2}
#game #bottom-bar .meter{height:17px;margin:0;border:1px solid #080b09;border-radius:0;background:#101310;overflow:hidden;box-shadow:none}
#game #bottom-bar .meter i{box-shadow:inset 0 1px #ffffff20;transition:width .18s linear}
#game #bottom-bar .hp i{background:#9d5143}
#game #bottom-bar .mana i{background:#4c7992}
#game #bottom-bar .meter span{padding-right:5px;text-align:right;font:600 12px/15px system-ui;font-variant-numeric:tabular-nums;color:#fff5e8;text-shadow:0 1px #000;white-space:nowrap}
@container game-viewport (max-height:520px) or (max-width:900px){
 body #game #bottom-bar .vitals{padding:5px 7px}
 body #game #bottom-bar .identity{margin-bottom:4px;gap:5px}
 body #game #bottom-bar .meter{height:15px}
 body #game #bottom-bar .meter span{line-height:13px}
}
@media(prefers-reduced-motion:reduce){#game #bottom-bar .meter i{transition:none}}