.item-art{display:none}
/* Keep neighboring atlas cells out of the illustrated slot. */
.item-art{clip-path:inset(3% 3% 9%)}
html[data-ui-mode="modern"]{--hud-width:min(100vw,1600px);--hud-height:calc(var(--hud-width)/3);--dock-height:calc(var(--hud-height)*.66)}
html[data-ui-mode="modern"] .view{bottom:0}
html[data-ui-mode="modern"] .inventory,html[data-ui-mode="modern"] .status{left:50%;right:auto;bottom:0;top:auto;width:var(--hud-width);height:var(--hud-height);transform:translateX(-50%);pointer-events:none;background:none;border:0;box-shadow:none}
html[data-ui-mode="modern"] .inventory:before{inset:0;clip-path:none;background:url('assets/unified-hud.png') center/100% 100% no-repeat;z-index:-1}
html[data-ui-mode="modern"] .inventory:after,html[data-ui-mode="modern"] .inventory h2{display:none}
html[data-ui-mode="modern"] #inventory{left:22.3%;right:22.3%;top:53.4%;height:25.4%;display:grid;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-columns:calc((100% - 28px)/8);gap:4px;padding:0;overflow-x:auto;scrollbar-width:none;background:#000;pointer-events:auto}
html[data-ui-mode="modern"] .item,html[data-ui-mode="modern"] .empty-slot{width:100%;height:100%;min-height:0;border:3px double #ccc;background:#000;color:#fff;box-shadow:none;clip-path:none;padding:1px;display:flex;justify-content:center;align-items:center}
html[data-ui-mode="modern"] .item:after,html[data-ui-mode="modern"] .empty-slot:after{display:none}
html[data-ui-mode="modern"] .item:hover{outline:0;border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
html[data-ui-mode="modern"] .item[aria-selected=true]{border:3px double white;box-shadow:inset 0 0 0 2px white;background:#000;color:white}
html[data-ui-mode="modern"] .empty-slot{border-color:#666;background:linear-gradient(45deg,transparent 47%,#555 48% 52%,transparent 53%) center/10px 10px no-repeat,#000}
html[data-ui-mode="modern"] .item-name{display:none}
html[data-ui-mode="modern"] .has-item-art .item-icon{display:none}
html[data-ui-mode="modern"] .item-art{display:block;background-image:url('assets/inventory-engraved-atlas.png');background-size:500% 400%;background-repeat:no-repeat;width:calc(var(--hud-width)*.037);height:calc(var(--hud-width)*.037);max-width:100%;max-height:100%;flex-shrink:0;image-rendering:auto}
html[data-ui-mode="modern"] .item-quantity{right:2px;top:1px;padding:0 2px;background:#000;color:white;font:11px/14px monospace}
html[data-ui-mode="modern"] .slot-navigation{top:48%;right:22.4%;pointer-events:auto}
html[data-ui-mode="modern"] .slot-navigation button{background:#000;color:#fff;border:1px solid #ddd;height:20px;width:23px}
html[data-ui-mode="modern"] #selected-item{left:33%;right:33%;top:83.7%;bottom:auto;max-width:none;text-align:center;padding:0;background:#000;color:#fff;font:11px/16px Georgia,serif}
html[data-ui-mode="modern"] .item-actions{top:87%;bottom:auto;left:33%;right:33%;justify-content:center;pointer-events:auto;padding:0;background:#000;gap:6px}
html[data-ui-mode="modern"] .item-actions button{background:#000;color:#fff;border:1px solid #aaa;clip-path:none;font:10px/16px Arial;padding:0 8px;min-height:18px}
html[data-ui-mode="modern"] .item-actions button:hover{background:#fff;color:#000}
html[data-ui-mode="modern"] .status-body{left:23%;right:23%;width:auto;top:95.8%;bottom:auto;height:18px;background:#000;color:#fff;border:0;gap:8px;padding:0;pointer-events:auto}
html[data-ui-mode="modern"] .status-body label{color:#fff;font-size:8px;letter-spacing:.5px;margin-left:3px}
html[data-ui-mode="modern"] #modern-oil{color:#fff;font-size:9px}
html[data-ui-mode="modern"] #speed{color:#fff;background:#000;border-color:#888;height:17px}
html[data-ui-mode="modern"] .vital{top:0;height:100%;width:100%;pointer-events:none;background:none;left:0;right:0}
html[data-ui-mode="modern"] .vital:before{display:none}
html[data-ui-mode="modern"] .orb-well{left:6.3%;top:47.5%;width:9.35%;height:28.05%;z-index:1;background:#000}
html[data-ui-mode="modern"] .vital-hunger .orb-well{left:84.35%}
html[data-ui-mode="modern"] .orb-symbol{font-size:clamp(24px,3vw,48px)}
html[data-ui-mode="modern"] .orb-fill{background:radial-gradient(#000 .65px,transparent .8px) 0 0/3px 3px,#fff;border-top:2px solid #fff}
html[data-ui-mode="modern"] .vital label{left:6.1%;top:81.2%;width:9.7%;font:bold 11px/14px Georgia,serif;letter-spacing:1px;color:#fff;background:#000}
html[data-ui-mode="modern"] .vital strong{left:6.1%;top:85.1%;width:9.7%;font:bold 14px/18px monospace;color:#fff}
html[data-ui-mode="modern"] .vital-hunger label,html[data-ui-mode="modern"] .vital-hunger strong{left:84.2%}
html[data-ui-mode="modern"] .news,html[data-ui-mode="modern"] .movement{bottom:calc(var(--dock-height) + 24px)}
@media(max-width:1100px){html[data-ui-mode="modern"] .item-art{width:calc(var(--hud-width)*.039);height:calc(var(--hud-width)*.039)}html[data-ui-mode="modern"] .vital label{font-size:8px;line-height:11px}html[data-ui-mode="modern"] .vital strong{font-size:11px;line-height:13px}html[data-ui-mode="modern"] #selected-item{font-size:9px;line-height:12px}html[data-ui-mode="modern"] .item-actions button{font-size:8px;line-height:12px;min-height:14px;padding:0 5px}html[data-ui-mode="modern"] .slot-navigation button{height:16px;font-size:10px}html[data-ui-mode="modern"] .status-body{gap:4px;height:14px;font-size:8px}html[data-ui-mode="modern"] .status-body label{font-size:7px}html[data-ui-mode="modern"] #speed{height:14px;font-size:9px}}
/* Narrow screens use crops of the same illustration, keeping the interactive
   wells readable while the two inventory rows continue below them. */
@media(max-width:759px){
 html[data-ui-mode="modern"]{--hud-width:100vw;--hud-height:330px;--dock-height:330px;--orb-size:135px}
 html[data-ui-mode="modern"] .inventory:before{top:100px;background-size:180% 100%;background-position:center bottom;background-color:#000;border-top:3px double #fff}
 html[data-ui-mode="modern"] #inventory{left:14px;right:14px;top:125px;height:148px;grid-auto-columns:calc((100% - 12px)/4);grid-template-rows:repeat(2,minmax(0,1fr))}
 html[data-ui-mode="modern"] .item-art{width:60px;height:60px}
 html[data-ui-mode="modern"] .vital{top:-18px;width:135px;height:135px;left:8px;right:auto}
 html[data-ui-mode="modern"] .vital-hunger{left:auto;right:8px}
 html[data-ui-mode="modern"] .vital:before{display:block;background-image:url('assets/unified-hud.png');background-size:455% auto;background-position:left -69.5px}
 html[data-ui-mode="modern"] .vital-hunger:before{background-position:right -69.5px}
 html[data-ui-mode="modern"] .orb-well,html[data-ui-mode="modern"] .vital-hunger .orb-well{left:28.7%;top:20.5%;width:42%;height:42%;z-index:3}
 html[data-ui-mode="modern"] .orb-symbol{font-size:30px}
 html[data-ui-mode="modern"] .vital label,html[data-ui-mode="modern"] .vital-hunger label{left:27%;top:73%;width:46%;font-size:7px;line-height:9px;z-index:4}
 html[data-ui-mode="modern"] .vital strong,html[data-ui-mode="modern"] .vital-hunger strong{left:27%;top:81%;width:46%;font-size:9px;line-height:10px;z-index:4}
 html[data-ui-mode="modern"] .slot-navigation{top:100px;left:calc(50% - 25px);right:auto}
 html[data-ui-mode="modern"] #selected-item{left:14px;right:auto;top:278px;max-width:100px;font-size:10px;text-align:left}
 html[data-ui-mode="modern"] .item-actions{left:auto;right:14px;top:278px;gap:4px}
 html[data-ui-mode="modern"] .item-actions button{font-size:9px;line-height:18px;min-height:20px;padding:0 5px}
 html[data-ui-mode="modern"] .status-body{top:auto;bottom:6px;left:14px;right:14px;height:18px;font-size:8px;gap:4px}
 html[data-ui-mode="modern"] .status-body label{font-size:7px}
 html[data-ui-mode="modern"] #modern-oil{font-size:8px}
}