/* Exact source-image HUD. Every coordinate is in the supplied 1672 x 941 PNG.
   Only this single plane scales; the original simulation and renderer are untouched. */
body:not(.in-main-menu) { background: #050303; overflow: hidden; }
body:not(.in-main-menu)::before { display: none; }
.site-wrap.reference-hud {
 position: fixed; left: 0; top: 0; width: 1672px; height: 941px;
 max-width: none; margin: 0; padding: 0; isolation: isolate;
 transform: matrix(var(--reference-scale, .5), 0, 0, var(--reference-scale, .5), var(--reference-left, 0), var(--reference-top, 0));
 transform-origin: 0 0; color: #c8a38a;
 font-family: 'KaiTi', 'STKaiti', 'Microsoft YaHei', serif;
}
.reference-hud .reference-patches, .reference-hud #referenceOverlay {
 position: absolute; inset: 0; width: 1672px; height: 941px; display: block;
 pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.reference-hud .reference-patches { z-index: 0; }
.reference-hud #referenceOverlay { z-index: 30; }
.reference-hud :is(.site-header, .header-tools, .site-header nav, main, .game-layout, .player-rail, .player-panel, .game-hud, .health-block, .resources, .stats-section, .sidebar, .map-section, .keepsake-section, .run-meta) {
 display: contents; padding: 0; margin: 0; border: 0; background: none; box-shadow: none;
}
/* The source image supplies these exact decorations and labels. Their DOM text
   remains available to assistive technology, but never duplicates the artwork. */
.reference-hud :is(.hud-environment, .player-portrait, .hud-side-seal, .nav-divider, .map-legend, .dungeon-note > p:last-child, .control-strip > p, .hud-footer-whisper) { display: none; }
.reference-hud :is(.developer-credit, .brand-mark, .brand strong, .section-label, #healthText, #inventoryHint, #chapterSubtitle, .hud-developer, #shopStats, #statsList > .stat-row:nth-child(5)) {
 position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
 clip-path: inset(50%); white-space: nowrap; border: 0;
}
.reference-hud .brand { position: absolute; left: 94px; top: 42px; width: 430px; height: 95px; z-index: 31; }
.reference-hud .brand:hover { background: #e7bc8d08; }
.reference-hud .site-header nav button {
 position: absolute; z-index: 20; border: 0; margin: 0; padding: 0; border-radius: 2px;
 display: flex; align-items: center; justify-content: center; background: transparent;
 font: 20px 'KaiTi', 'STKaiti', serif; color: #dfbd9d; min-height: 0;
}
.reference-hud .site-header nav button:hover { background: #bd765314; }
.reference-hud .site-header nav #headerSettingsButton { left: 1023px; top: 78px; width: 100px; height: 46px; color: transparent; }
.reference-hud #headerSettingsButton > span { visibility: hidden; }
.reference-hud .site-header nav #soundButton { left: 1135px; top: 77px; width: 130px; height: 49px; justify-content: flex-end; }
.reference-hud #soundGlyph { visibility: hidden; }
.reference-hud .site-header nav #soundLabel { display: block; width: 81px; height: 32px; line-height: 32px; font-size: 20px; }
.reference-hud .site-header nav #helpButton { left: 1359px; top: 151px; width: 239px; height: 80px; color: transparent; }
.reference-hud #helpButton > span { visibility: hidden; }
.reference-hud .site-header nav #fullscreenButton { left: 333px; top: 150px; width: 995px; height: 14px; color: transparent; font-size: 0; }
.reference-hud #fullscreenButton:focus-visible { outline-offset: 0; }
.reference-hud .run-meta > span { font-size: 0; }
.reference-hud .run-meta b { position: absolute; margin: 0; z-index: 10; text-align: left; color: #efcd9a; font: 22px/25px Consolas, monospace; letter-spacing: -1px; }
.reference-hud #runTime { left: 1330px; top: 98px; width: 83px; }
.reference-hud #seedLabel { left: 1500px; top: 98px; width: 97px; font-size: 20px; letter-spacing: -1.3px; }
.reference-hud .chapter-heading { position: absolute; left: 121px; top: 151px; width: 184px; height: 43px; display: flex; align-items: center; justify-content: center; padding: 0; transform: rotate(-7deg); z-index: 10; }
.reference-hud .chapter-heading h1 { color: #180b05; font: 700 24px/1.25 'KaiTi', 'STKaiti', serif; text-align: center; letter-spacing: 1px; white-space: nowrap; }
.reference-hud #chapterRoman { font: inherit; margin-left: 1px; }
.reference-hud #hearts { position: absolute; z-index: 10; left: 146px; top: 255px; width: 138px; height: 42px; display: flex; gap: 4px; flex-wrap: wrap; align-content: flex-start; }
.reference-hud .heart { position: relative; display: block; flex: 0 0 var(--reference-heart-width,25px); width: var(--reference-heart-width,25px); height: 29px; font-size: 0; line-height: 0; color: transparent; background: url('assets/hud/heart-full.png') center/100% 100% no-repeat; text-shadow: none; }
.reference-hud .heart.empty, .reference-hud .heart.half { color: transparent; background: url('assets/hud/heart-empty.png') center/100% 100% no-repeat; }
.reference-hud .heart.half::before { content: ''; position: absolute; inset: 0; background: url('assets/hud/heart-full.png') center/100% 100% no-repeat; clip-path: inset(0 50% 0 0); }
.reference-hud .resources > span { display: contents; }
.reference-hud .resources canvas { display: none; }
.reference-hud .resources b { position: absolute; z-index: 10; left: 190px; width: 86px; text-align: left; font: 26px/30px Consolas, monospace; color: #f2efeb; letter-spacing: -1px; }
.reference-hud #coins { top: 307px; }
.reference-hud #bombs { top: 343px; }
.reference-hud #keys { top: 379px; }
.reference-hud #statsList { display: contents; }
.reference-hud #statsList > .stat-row { position: absolute; left: 185px; width: 93px; height: 26px; margin: 0; padding: 0; display: flex; align-items: center; z-index: 10; }
.reference-hud #statsList > .stat-row > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.reference-hud #statsList > .stat-row:nth-child(1) { top: 488px; }
.reference-hud #statsList > .stat-row:nth-child(2) { top: 458px; }
.reference-hud #statsList > .stat-row:nth-child(3) { top: 428px; }
.reference-hud #statsList > .stat-row:nth-child(4) { top: 518px; }
.reference-hud .stat-row b, .reference-build-values output { font: 18px/26px Consolas, monospace; font-weight: 400; color: #be9279; }
.reference-hud .stat-row b.enhanced { color: #d9b391; }
.reference-hud .reference-build-values output { position: absolute; left: 190px; width: 88px; height: 26px; z-index: 10; }
.reference-hud #hudLuck { top: 548px; }
.reference-hud #hudCrit { top: 578px; }
.reference-hud #hudShield { top: 608px; }
/* The window is exactly the alpha opening. Renderer backing pixels and camera
   stay original; the visual canvas covers this aperture without distortion. */
.reference-hud .game-frame { position: absolute; left: 338px; top: 165px; width: 985px; height: 565px; border: 0; background: #0c0b09; box-shadow: none; z-index: 5; }
.reference-hud #canvasWrap { position: absolute; inset: 0; width: 985px; height: 565px; aspect-ratio: auto !important; padding: 0; margin: 0; overflow: hidden; background: #0c0b09; }
.reference-hud #gameCanvas { position: absolute; left: 50%; top: 50%; width: var(--reference-canvas-width, 985px); height: var(--reference-canvas-height, 615.625px); max-width: none; transform: translate(-50%,-50%); outline: 0; display: block; }
.reference-hud #fpsDisplay { top: 8px; right: 8px; min-width: 129px; padding: 5px 8px; border: 1px solid #877447; border-radius: 2px; background: #0c0d06e6; color: #eddfa9; font: 700 14px/21px Consolas,'Microsoft YaHei',monospace; pointer-events: none; }
.reference-hud .game-caption { position: absolute; z-index: 7; left: 10px; right: 10px; bottom: 4px; height: 18px; margin: 0; padding: 0; border: 0; background: transparent; font-size: 9px; color: #c3b692; text-shadow: 0 1px 2px #000; gap: 13px; pointer-events: none; }
.reference-hud #roomProgress { margin-left: auto; font-size: 9px; color: #c3b692; }
.reference-hud .room-status { margin-left: 0; color: #c3b692; font-size: 9px; }
.reference-hud #pauseButton { position: absolute; left: 732px; top: 70px; width: 33px; height: 29px; padding: 0; border: 1px solid #968579; background: #121010; border-radius: 3px; color: #ece7df; font: 19px/27px Georgia,serif; pointer-events: auto; }
.reference-hud #minimap { position: absolute; z-index: 10; left: 1380px; top: 273px; width: 231px; height: 135px; margin: 0; object-fit: contain; }
.reference-hud #inventory { position: absolute; z-index: 10; left: 1379px; top: 493px; width: 234px; height: 150px; padding: 0; margin: 0; display: grid; grid-template-columns: 67px 67px 67px; grid-auto-rows: 68px; column-gap: 16.5px; row-gap: 14px; max-width: none; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; scroll-snap-type: y mandatory; touch-action: pan-y; }
.reference-hud #inventory::-webkit-scrollbar { display: none; }
.reference-hud .item-slot { width: 67px; height: 68px; max-height: none; min-width: 0; border: 0; background: transparent; border-radius: 0; aspect-ratio: auto; padding: 0; scroll-snap-align: start; }
.reference-hud .item-slot.empty::after { content: none; }
.reference-hud .item-slot canvas { width: 56px; height: 56px; }
.reference-hud .item-slot b { right: 4px; bottom: 3px; font-size: 13px; }
.reference-hud .item-slot:hover { background: #d0a47022; }
.reference-hud .item-slot:focus-visible { outline-offset: -5px; }
.reference-hud .control-strip { position: absolute; z-index: 10; left: 494px; top: 774px; width: 580px; height: 39px; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 0; }
.reference-hud .control-strip > div { display: flex; align-items: center; gap: 5px; font: 15px 'KaiTi', 'STKaiti', serif; color: #e4ddd3; white-space: nowrap; }
.reference-hud .control-keys { gap: 2px; }
.reference-hud .control-strip kbd { min-width: 21px; height: 26px; padding: 0 3px; border: 1px solid #999086; border-radius: 3px; color: #ebe9e4; background: linear-gradient(#302f2b,#0c0c0b 45%,#1c1b18); box-shadow: inset 0 0 0 2px #070606,0 1px #000; font: 14px/24px Consolas,'Microsoft YaHei',monospace; }
.reference-hud .control-strip .wide-key { font: 12px/24px 'Microsoft YaHei',sans-serif; }
.reference-hud .control-strip > div:nth-child(5) > span { font-size: 12px; }
.reference-hud .hud-footer { display: contents; }
.reference-hud #shopPanel { position: absolute; z-index: 9; bottom: 27px; left: 12%; right: 12%; margin: 0; padding: 12px 15px 7px; background: #211811f5; border: 1px solid #826044; border-radius: 3px; display: grid; grid-template-columns: 1fr auto; gap: 4px 15px; }
.reference-hud #shopPanel .shop-info { gap: 10px; }
.reference-hud #shopPanel .shop-info strong { font-size: 19px; }
.reference-hud #shopPanel .shop-info p { font-size: 13px; }
.reference-hud #shopPanel .shop-info small { font-size: 12px; }
.reference-hud #shopPanel .shop-actions { grid-row: auto; }
.reference-hud #shopPanel .shop-actions button { min-height: 42px; font-size: 15px; padding: 8px 13px; }
.reference-hud #shopFeedback { font-size: 12px; min-height: 17px; }
.reference-hud .touch-controls { display: none; }
/* Same input elements and bindings. Only their screen presentation is scaled
   with the reference plane; they sit above the decoration and outside combat. */
.reference-hud.reference-touch .touch-controls { display: flex; position: absolute; z-index: 40; left: 44px; top: 708px; width: 1584px; height: 190px; max-width: none; padding: 0; margin: 0; align-items: center; justify-content: space-between; pointer-events: none; }
.reference-hud.reference-touch .touch-side { pointer-events: auto; width: 182px; height: 182px; }
.reference-hud.reference-touch .touch-side > small { display: none; }
.reference-hud.reference-touch .joystick { position: relative; width: 176px; height: 176px; border-radius: 50%; touch-action: none; background: #160f0bbb; border: 2px solid #8e6c48; }
.reference-hud.reference-touch .joystick::before { top: 87px; }
.reference-hud.reference-touch .joystick::after { left: 87px; }
.reference-hud.reference-touch #joystickKnob { position: absolute; width: 64px; height: 64px; left: 55px; top: 55px; border: 1px solid #85704d; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#6a583c,#3b3122); }
.reference-hud.reference-touch .shoot-pad { display: grid; width: 180px; height: 180px; grid-template-columns: repeat(3,60px); grid-template-rows: repeat(3,60px); }
.reference-hud.reference-touch .shoot-pad button { touch-action: none; border: 1px solid #715043; border-radius: 8px; font-size: 30px; background: #211410d9; color: #cd967b; }
.reference-hud.reference-touch .shoot-pad [data-shoot=up] { grid-area: 1/2; }
.reference-hud.reference-touch .shoot-pad [data-shoot=left] { grid-area: 2/1; }
.reference-hud.reference-touch .shoot-pad [data-shoot=right] { grid-area: 2/3; }
.reference-hud.reference-touch .shoot-pad [data-shoot=down] { grid-area: 3/2; }
.reference-hud.reference-touch #touchBomb { width: 75px; height: 75px; border: 1px solid #5a4b35; border-radius: 50%; pointer-events: auto; margin-right: 0; position: absolute; left: 205px; bottom: 0; background: #1f160fd9; font-size: 30px; }
.reference-hud.reference-touch #touchBomb small { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .reference-hud * { transition: none !important; } }