/* A bounded game stage with its own unobscured corridor viewport. */
html[data-ui-mode="modern"]{--hud-width:min(100vw,1440px);--dock-height:calc(var(--hud-height)*.63);--map-size:224px}
/* Limit desktop stages to 3:2 so the width-scaled HUD stays proportional
   to the available height, including ultrawide and short browser windows. */
@media(min-width:760px){html[data-ui-mode="modern"]{--hud-width:min(100vw,1440px,150dvh)}}
html[data-ui-mode="modern"] body{background:#151515}
html[data-ui-mode="modern"] .screen-frame,html[data-ui-mode="modern"] .small .screen-frame{width:var(--hud-width);margin:0 auto;box-shadow:0 0 0 1px #000,0 0 60px #0008}
html[data-ui-mode="modern"] .view{bottom:var(--dock-height)}
html[data-ui-mode="modern"] #view{object-fit:fill}
html[data-ui-mode="modern"] .hud-ground{position:absolute;inset:auto 0 0;height:var(--dock-height);z-index:1;border:0;background:#fff;pointer-events:none}
html[data-ui-mode="modern"] .inventory,html[data-ui-mode="modern"] .status{bottom:calc(var(--hud-height)*-.04)}
html[data-ui-mode="modern"] .item-art{background-image:url('assets/inventory-original-inspired.png');clip-path:inset(4% 3% 7%)}
html[data-ui-mode="modern"] .vital-icon{position:absolute;left:29%;top:28%;width:42%;height:42%;fill:#fff;stroke:#111;stroke-width:3;stroke-linejoin:round;filter:drop-shadow(0 0 1px #fff)}
html[data-ui-mode="modern"] .vital-icon .engraving{fill:none;stroke-width:1.3;stroke-linecap:round}
html[data-ui-mode="modern"] .provision-icon{left:25%;width:50%;height:50%;top:25%}
/* Auxiliary values sit above the tray, leaving the stone base flush to the edge. */
html[data-ui-mode="modern"] .status-body{left:50%;right:auto;transform:translateX(-50%);width:560px;max-width:calc(100% - 32px);top:calc(var(--hud-height)*.96 - var(--dock-height) - 64px);bottom:auto;height:48px;padding:7px 16px;background:#fafafa;color:#111;border:5px double #111;box-shadow:0 2px 0 #fff,0 3px 0 #111;gap:9px;font:12px/18px monospace;flex-wrap:nowrap;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)}
html[data-ui-mode="modern"] .status-body:before,html[data-ui-mode="modern"] .status-body:after{content:'';position:absolute;top:0;bottom:0;width:7px;background:url('assets/engraved-rail.svg') center/70px 25px;pointer-events:none}
html[data-ui-mode="modern"] .status-body:before{left:1px}html[data-ui-mode="modern"] .status-body:after{right:1px}
html[data-ui-mode="modern"] .status-body label{font:9px/18px Arial,sans-serif;letter-spacing:.6px;color:#333;margin-left:3px}
html[data-ui-mode="modern"] #speed{width:44px;height:24px;color:#000;background:#fff;border:1px solid #333;font:12px Arial}
html[data-ui-mode="modern"] #weight{width:50px;height:10px;border:1px solid #111}
html[data-ui-mode="modern"] #modern-oil{color:#111;font:10px/18px monospace;white-space:nowrap}
html[data-ui-mode="modern"] .news,html[data-ui-mode="modern"] .movement{bottom:calc(var(--dock-height) + 20px)}
/* Same ink-and-stone frame as the lower console, with live map content. */
html[data-ui-mode="modern"] .minimap-panel{width:var(--map-size);height:calc(var(--map-size) + 36px);right:16px;top:12px;padding:0;background:none;border:0;box-shadow:none;transform:none}
html[data-ui-mode="modern"] .minimap-panel:before{content:'';position:absolute;inset:0 0 auto;height:var(--map-size);background:url('assets/minimap-engraved.png') center/100% 100% no-repeat;pointer-events:none}
html[data-ui-mode="modern"] #minimap-button{position:absolute;left:14%;top:calc(var(--map-size)*.14);width:72%;height:calc(var(--map-size)*.72);border:1px solid #111}
html[data-ui-mode="modern"] .minimap-north{position:absolute;z-index:1;left:calc(50% - 8px);top:calc(var(--map-size)*.14 + 1px);width:16px;background:#fff;color:#111;font:bold 9px/13px monospace;pointer-events:none}
html[data-ui-mode="modern"] #minimap-heading{position:absolute;top:var(--map-size);left:0;right:0;margin:0;font:9px/18px monospace;letter-spacing:.3px;text-align:center;background:#fff;border:1px solid #111}
html[data-ui-mode="modern"] .minimap-legend{position:absolute;top:calc(var(--map-size) + 18px);left:0;right:0;margin:0;font:8px/15px Arial;text-align:center;background:#fff;border:1px solid #111;border-top:0}
/* Keep fixed UI controls aligned with the bounded stage. */
html[data-ui-mode="modern"] .outside{left:calc((100vw - var(--hud-width))/2 + 24px)}
@media(max-width:1100px){html[data-ui-mode="modern"]{--map-size:180px}html[data-ui-mode="modern"] .status-body{width:500px;gap:6px;font-size:11px}html[data-ui-mode="modern"] .status-body label{font-size:8px}}
@media(max-width:759px){
 html[data-ui-mode="modern"]{--dock-height:348px;--map-size:122px}
 html[data-ui-mode="modern"] .inventory,html[data-ui-mode="modern"] .status{bottom:0}
 html[data-ui-mode="modern"] .status-body{top:-64px;height:38px;max-width:calc(100% - 16px);width:440px;padding:3px 8px;gap:4px;font-size:9px;border-width:3px}
 html[data-ui-mode="modern"] .status-body label{font-size:7px;letter-spacing:0;margin:0}
 html[data-ui-mode="modern"] #speed{width:35px;height:23px;font-size:11px}
 html[data-ui-mode="modern"] #weight{width:28px}
 html[data-ui-mode="modern"] #modern-oil{font-size:8px;margin:0}
 html[data-ui-mode="modern"] .minimap-panel{right:6px;top:6px}
 html[data-ui-mode="modern"] #minimap-heading{font-size:7px;letter-spacing:0;line-height:14px}
 html[data-ui-mode="modern"] .minimap-legend{top:calc(var(--map-size) + 14px);font-size:6px;line-height:12px}
 html[data-ui-mode="modern"] .news,html[data-ui-mode="modern"] .movement{bottom:calc(var(--dock-height) + 68px)}
 html[data-ui-mode="modern"] .outside{left:16px}
}
@media(max-height:650px) and (min-width:760px){html[data-ui-mode="modern"]{--map-size:150px}html[data-ui-mode="modern"] .status-body{height:36px;top:calc(var(--hud-height)*.96 - var(--dock-height) - 44px)}}

/* Clipping must not scroll the stage when an inventory control receives focus. */
html[data-ui-mode="modern"] .screen-frame,html[data-ui-mode="modern"] .mac{overflow:clip}
html[data-ui-mode="modern"] .inventory:before,html[data-ui-mode="modern"] .minimap-panel:before{image-rendering:auto}
html[data-ui-mode="modern"] .orb-fill{background:repeating-linear-gradient(135deg,#fff 0 3px,#ddd 3px 4px)}

html[data-ui-mode="modern"] .inventory:before{background-image:url('assets/unified-hud-continuous.png')}
@media(max-width:759px){html[data-ui-mode="modern"] .vital:before{background-image:url('assets/unified-hud-continuous.png')}html[data-ui-mode="modern"] .inventory:before{border-top:0}}

/* Carved inset plaques occupy the frieze on either side of the central scarab. */
.stat-primary,.stat-secondary{display:contents}
html[data-ui-mode="modern"] .status-body{left:22.5%;right:22.5%;width:auto;max-width:none;transform:none;top:39.3%;height:8.3%;padding:0;display:grid;grid-template-columns:1fr 13% 1fr;gap:0;border:0;box-shadow:none;clip-path:none;background:none}
html[data-ui-mode="modern"] .status-body:before,html[data-ui-mode="modern"] .status-body:after{display:none}
html[data-ui-mode="modern"] .stat-primary,html[data-ui-mode="modern"] .stat-secondary{display:flex;align-items:center;justify-content:center;gap:7px;height:100%;padding:2px 8px;background:#fff;border:4px double #111;border-radius:10px;box-shadow:0 0 0 1px #fff,inset 0 0 0 1px #999;color:#111;font:12px/18px monospace;min-width:0}
html[data-ui-mode="modern"] .stat-primary{grid-column:1}html[data-ui-mode="modern"] .stat-secondary{grid-column:3}
html[data-ui-mode="modern"] .status-body label{font:9px/18px Arial,sans-serif;letter-spacing:.4px;margin-left:0}
html[data-ui-mode="modern"] #speed{height:22px;width:40px;font-size:12px}
html[data-ui-mode="modern"] .minimap-panel:before{background-image:url('assets/minimap-bold.png')}
@media(max-width:1100px){html[data-ui-mode="modern"] .stat-primary,html[data-ui-mode="modern"] .stat-secondary{gap:3px;padding:1px 3px;border-width:3px;font-size:10px}html[data-ui-mode="modern"] .status-body label{font-size:7px;letter-spacing:0}html[data-ui-mode="modern"] #speed{width:32px;height:19px;font-size:10px}html[data-ui-mode="modern"] #weight{width:30px}html[data-ui-mode="modern"] #modern-oil{font-size:8px}}
@media(max-width:759px){html[data-ui-mode="modern"] .status-body{left:15px;right:15px;top:101px;height:30px;grid-template-columns:1fr 6px 1fr}html[data-ui-mode="modern"] #inventory{top:139px;height:134px}html[data-ui-mode="modern"] .slot-navigation{top:78px}html[data-ui-mode="modern"] .stat-primary,html[data-ui-mode="modern"] .stat-secondary{font-size:9px;gap:3px;padding:0 4px}html[data-ui-mode="modern"] .news,html[data-ui-mode="modern"] .movement{bottom:calc(var(--dock-height) + 18px)}}
html[data-ui-mode="modern"] .stat-primary>*,html[data-ui-mode="modern"] .stat-secondary>*{position:static;flex-shrink:0;line-height:18px}
/* Preserve the original absolute status layout through the modern grouping. */
html:not([data-ui-mode="modern"]) .stat-primary,html:not([data-ui-mode="modern"]) .stat-secondary{position:static}
html:not([data-ui-mode="modern"]) .stat-primary>*,html:not([data-ui-mode="modern"]) .stat-secondary>*{position:absolute;font-weight:normal;line-height:14px;white-space:nowrap}

/* Live values sit inside recesses drawn into the unified artwork. */
html[data-ui-mode="modern"] .inventory:before{background-image:url('assets/unified-hud-insets.png')}
html[data-ui-mode="modern"] .minimap-panel:before{background-image:url('assets/minimap-heavy.png')}
html[data-ui-mode="modern"] #minimap-button{left:21%;top:calc(var(--map-size)*.21);width:58%;height:calc(var(--map-size)*.58)}
html[data-ui-mode="modern"] .minimap-north{top:calc(var(--map-size)*.21 + 1px)}
html[data-ui-mode="modern"] .stat-primary,html[data-ui-mode="modern"] .stat-secondary{background:none;border:0;border-radius:0;box-shadow:none;padding:0;gap:5px}
@media(min-width:760px){
 html[data-ui-mode="modern"] .status-body{left:25.5%;right:25.5%;top:40%;height:7%;grid-template-columns:38% 24% 38%}
 html[data-ui-mode="modern"] #selected-item{left:26%;right:55%;top:85%;height:5.5%;display:flex;align-items:center;justify-content:center;background:none;color:#111;font:12px/1.2 Georgia,serif}
 html[data-ui-mode="modern"] .item-actions{left:46%;right:26%;top:85%;height:5.5%;align-items:center;gap:4px;background:none}
 html[data-ui-mode="modern"] .item-actions button{background:transparent;color:#111;border:0;border-left:1px solid #777;font:11px/18px Arial;padding:0 7px}
 html[data-ui-mode="modern"] .item-actions button:disabled{opacity:.35}
 html[data-ui-mode="modern"] .item-actions button:hover:not(:disabled){background:#111;color:#fff}
}
@media(min-width:1101px){html[data-ui-mode="modern"]{--map-size:248px}}

/* Slim engraved controls, with live oil and weight meters. */
html[data-ui-mode="modern"] .oil-group{display:flex;align-items:center;gap:4px}
html[data-ui-mode="modern"] #modern-oil{margin:0;font:9px/1 monospace}
html[data-ui-mode="modern"] #modern-oil-bar{appearance:none;width:45px;height:10px;background:#fff;border:1px solid #111;border-radius:0}
html[data-ui-mode="modern"] #modern-oil-bar::-webkit-meter-bar{background:#fff;border:0;border-radius:0}
html[data-ui-mode="modern"] #modern-oil-bar::-webkit-meter-optimum-value{background:#555;border-radius:0}
html[data-ui-mode="modern"] #modern-oil-bar::-moz-meter-bar{background:#555}
html[data-ui-mode="modern"] .vital-icon{left:34%;top:31%;width:32%;height:36%;stroke-width:1.6;filter:drop-shadow(0 0 1px white)}
html[data-ui-mode="modern"] .vital-icon .engraving{stroke-width:.8}
html[data-ui-mode="modern"] .provision-icon{left:31%;top:31%;width:38%;height:38%}
@media(min-width:760px){
 html[data-ui-mode="modern"] .status-body{top:41.5%;height:4%;}
 html[data-ui-mode="modern"] #speed{height:18px;border:0;border-bottom:1px solid #555;background:transparent}
 html[data-ui-mode="modern"] #selected-item,html[data-ui-mode="modern"] .item-actions{top:85.8%;height:3.6%}
 html[data-ui-mode="modern"] .item-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
 html[data-ui-mode="modern"] .item-actions button{height:100%;min-height:16px;padding:0 2px;font:10px/1 Georgia,serif;border:1px solid #333;box-shadow:inset 0 0 0 1px #fff,inset 0 0 0 2px #aaa;background:#eee;color:#111;clip-path:polygon(3px 0,calc(100% - 3px) 0,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0 calc(100% - 3px),0 3px)}
 html[data-ui-mode="modern"] .item-actions button:disabled{opacity:.55}
}
@media(max-width:1100px){html[data-ui-mode="modern"] #modern-oil-bar{width:26px}html[data-ui-mode="modern"] .stat-secondary{gap:3px}}
html[data-ui-mode="modern"] .inventory:before{background-image:url('assets/unified-hud-slim.png')}
html[data-ui-mode="modern"] .minimap-panel:before{background-image:url('assets/minimap-slim.png');filter:grayscale(1)}
html[data-ui-mode="modern"] #minimap-button{left:11.8%;top:calc(var(--map-size)*.128);width:76.2%;height:calc(var(--map-size)*.74)}
html[data-ui-mode="modern"] .minimap-north{top:calc(var(--map-size)*.128 + 1px)}
@media(min-width:760px){
 html[data-ui-mode="modern"] #selected-item{left:26%;right:56%;top:85.2%;height:4.5%}
 html[data-ui-mode="modern"] .item-actions{left:45.2%;right:25.6%;top:85.2%;height:4.5%;gap:6px}
 html[data-ui-mode="modern"] .item-actions button{background:transparent;border:0;box-shadow:none;clip-path:none;font-weight:bold}
 html[data-ui-mode="modern"] .item-actions button:focus-visible{outline:2px solid #111;outline-offset:-3px}
}

/* Align the visual centres, including controls with native browser baselines. */
@media(min-width:760px){
 html[data-ui-mode="modern"] .status-body{top:42.2%;height:3.5%;left:25.6%;right:25.4%;align-items:center}
 html[data-ui-mode="modern"] .stat-primary,html[data-ui-mode="modern"] .stat-secondary{align-self:center;align-items:center;justify-content:center;height:100%;line-height:1}
 html[data-ui-mode="modern"] .stat-primary>*,html[data-ui-mode="modern"] .stat-secondary>*{line-height:1;margin-top:0;margin-bottom:0}
 html[data-ui-mode="modern"] #speed{padding:0 2px;vertical-align:middle;height:16px;line-height:16px}
 html[data-ui-mode="modern"] .oil-group{align-items:center;line-height:1}
}