/* Painted HUD art (generated with Meshy). Active when #d-hud has class "art". */
#d-hud.art #d-cluster { left: 6px; bottom: 4px; align-items: flex-end; }
#d-hud.art .d-orb.hp { width: 138px; height: 138px; margin: 0 26px 26px 34px; }
#d-hud.art .d-orb.ult { width: 100px; height: 100px; margin: 0 6px 18px -6px; }
#d-hud.art .orb-frame { background: url(assets/ui/ui_orb_frame.webp) no-repeat center / contain; filter: drop-shadow(0 6px 14px #000); inset: -40% -40% -44% -40%; border-radius: 0; }
#d-hud.art .d-orb.ult .orb-frame { background-image: url(assets/ui/ui_orb_frame2.webp); inset: -27% -27% -26% -32%; }
#d-hud.art .d-orb.hp .orb-frame::before, #d-hud.art .d-orb.hp .orb-frame::after { display: none; }
#d-hud.art .d-bar { width: 640px; height: 99px; padding: 0; margin: 0 0 6px 4px; background: url(assets/ui/ui_skillbar.webp) no-repeat center / 100% 100%; box-shadow: none; border: none; filter: drop-shadow(0 6px 14px #000c); }
#d-hud.art .d-bar::before, #d-hud.art .d-bar::after { display: none; }
#d-hud.art .d-skills { position: absolute; inset: 0; }
#d-hud.art .d-slot { box-shadow: inset 0 0 0 1px #000; background: #050404; }
#d-hud.art .d-slot.ready { box-shadow: inset 0 0 0 1px #000, 0 0 10px #e8b06044; }
#d-hud.art .d-slot.ult.ready { box-shadow: inset 0 0 0 1px #000, 0 0 16px #ff7a2a88; }
#d-hud.art .d-slot .key { bottom: -20px; background: linear-gradient(#2a2420, #120e0c); }
#d-hud.art .d-bar-top { position: absolute; left: 19%; right: 19%; top: -18px; padding: 0; margin: 0; }
#d-hud.art .d-dodges { top: -12px; right: 4%; }
#d-hud.art #d-map .map-frame { padding: 0; background: url(assets/ui/ui_map_frame.webp) no-repeat center / 100% 100%; box-shadow: none; width: 270px; height: 284px; position: relative; filter: drop-shadow(0 6px 14px #000c); }
#d-hud.art #d-map .map-frame canvas { position: absolute; left: 4.5%; top: 10%; width: 91%; height: 84%; }
#d-hud.art #d-map { width: 278px; }

/* ornate panels and buttons */
.panel, .choice.pause, .title-card { border: 46px solid transparent !important; border-image: url(assets/ui/ui_panel.webp) 170 fill / 46px stretch; background: none !important; box-shadow: 0 30px 90px #000 !important; padding: 0; }
.panel-head { background: none; border-bottom: none; position: relative; padding: 0 6px 16px; }
.panel-head::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: -6px; height: 26px; background: url(assets/ui/ui_divider.webp) no-repeat center / contain; }
.panel-body { padding: 14px 8px 4px; }
.btn { border: 14px solid transparent; border-image: url(assets/ui/ui_button.webp) 90 fill / 14px stretch; background: none; box-shadow: none; padding: 2px 16px; color: #f0e2c8; text-shadow: 0 1px 3px #000; }
.btn:hover:not(:disabled) { filter: brightness(1.25); background: none; }
.btn.gold { background: none; filter: sepia(0.4) saturate(1.6) brightness(1.15); }
.btn.big { padding: 4px 18px; font-size: 18px; }
.title-card .logo { height: 120px; background: url(assets/ui/ui_title.webp) no-repeat center / contain; color: transparent; text-shadow: none; font-size: 0; }
.choice:not(.pause) { border-image: none; }