/* ImageGen art supplies the frames and fills; native progress retains semantics. */
:root{--hud-frame:url('../../assets/games/survival/ui/hud-frame-v1.webp');--hp-fill:url('../../assets/games/survival/ui/hud-health-v1.webp');--xp-fill:url('../../assets/games/survival/ui/hud-xp-v1.webp');--hud-dark:#24372f;--hud-text:#fff5cf}
.pixel-frame{border:8px solid #a6874c;border-image:var(--hud-frame) 16 / 8px / 0 stretch;image-rendering:pixelated}
.music-toggle{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:4px;color:#ffeab0;background:#3b5141;border-width:6px;border-image-width:6px}.music-toggle svg{width:22px;height:22px;shape-rendering:crispEdges}.music-toggle:hover{background:#51674a}.music-toggle .sound-off{display:none}.music-toggle[aria-pressed="false"]{color:#c0c3ae;background:#384339}.music-toggle[aria-pressed="false"] .sound-waves{display:none}.music-toggle[aria-pressed="false"] .sound-off{display:block}.panel-heading .music-toggle{margin-left:auto}.panel-heading #panelTag{letter-spacing:1px}.topbar{gap:12px}
.battle{border:0;background:var(--hud-dark);box-shadow:4px 4px #35423750}
.hud-shell{position:relative;padding:5px 10px 9px;background:var(--hud-dark);color:var(--hud-text);border-width:10px;border-image-width:10px}
.hud-shell .hud{display:flex;height:auto;min-height:44px;gap:18px;padding:0;margin-bottom:7px}
.hud-shell .meter-group{display:flex;align-items:center;gap:8px;min-width:0}
.hud-shell .health{max-width:none;flex:1}
.hud-shell .stat-icon,.hud-shell .xp-icon{position:static;flex:0 0 26px;width:26px;height:26px;object-fit:contain;image-rendering:pixelated}
.meter{position:relative;flex:1;min-width:0;height:30px;background:#14271f;background-clip:padding-box;border-width:6px;border-image-width:6px}
.meter progress{display:block;appearance:none;-webkit-appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:0;background:#14271f;overflow:hidden;image-rendering:pixelated}
.meter progress::-webkit-progress-bar{background:#14271f}
.meter progress::-webkit-progress-value{background:#d65250 var(--hp-fill) left center / 192px 100% repeat-x}
.meter progress::-moz-progress-bar{background:#d65250 var(--hp-fill) left center / 192px 100% repeat-x}
.meter .meter-value{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:#fffbe7;font:700 12px/1 Consolas,'Courier New',monospace;font-variant-numeric:tabular-nums;white-space:nowrap;text-shadow:1px 1px #18291f,-1px -1px #18291f,1px -1px #18291f,-1px 1px #18291f;letter-spacing:0}
.hud-shell .counter{gap:3px;min-width:42px;text-align:center}
.hud-shell .counter small{color:#c4caad;font-size:10px;line-height:1.2}
.hud-shell .counter strong{color:var(--hud-text);font:700 20px/1.1 Consolas,'Courier New',monospace;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.hud-shell #pause{display:grid;place-items:center;width:44px;height:44px;flex:0 0 44px;margin:0;background:#3b5141;border:7px solid #a6874c;border-image:var(--hud-frame) 16 / 7px / 0 stretch}
.pause-glyph{display:block;width:14px;height:17px;border-left:5px solid #ffeab0;border-right:5px solid #ffeab0;filter:drop-shadow(1px 2px #18291f)}
.hud-shell #pause:not(:disabled):hover{background:#51674a}.hud-shell #pause:active{transform:translateY(1px)}
.hud-shell .experience{position:static;height:auto;background:none;gap:8px}
.hud-shell .experience .meter{height:22px;border-width:5px;border-image-width:5px}
.hud-shell .experience progress::-webkit-progress-value{background:#169ec6 var(--xp-fill) left center / 192px 100% repeat-x}
.hud-shell .experience progress::-moz-progress-bar{background:#169ec6 var(--xp-fill) left center / 192px 100% repeat-x}
.hud-shell #level{position:static;flex:0 0 auto;min-width:42px;text-align:left;color:#d8ecd3;font:700 12px/1 Consolas,'Courier New',monospace;white-space:nowrap}
.hud-shell[data-low-health="true"] .health .meter{background-color:#5f2322;box-shadow:0 0 0 2px #df7763}
.hud-shell[data-low-health="true"] .health .meter-value{color:#fff4b9}
.boss-hud{position:absolute;top:12px;left:50%;transform:translateX(-50%);width:65%;max-width:340px;z-index:1;pointer-events:none;display:grid;gap:5px;justify-items:center}
.boss-name{color:#fff3cd;background:#442b2beb;padding:3px 12px;font-size:11px;font-weight:bold;box-shadow:2px 2px #24372f66}
.boss-hud .meter{width:100%;height:25px}.boss-hud .meter-value{font-size:11px}
dialog{border:12px solid #a6874c;border-image:var(--hud-frame) 16 / 12px / 0 stretch;image-rendering:pixelated;padding:22px;box-shadow:6px 6px #24372f66}
.primary{border:8px solid #a6874c;border-image:var(--hud-frame) 16 / 8px / 0 stretch;background:#ffe28a;box-shadow:3px 3px #354237;image-rendering:pixelated}
.choice{border:2px solid #aebc98;box-shadow:2px 2px #b6bea2}.choice:hover{transform:translateY(-2px);box-shadow:2px 4px #b6bea2}.choice:active{transform:translateY(0)}
@media(min-width:701px){.battle{width:min(100%,calc(100dvh - 245px))}}
@media(max-width:700px){.hud-shell{padding:2px 3px 5px;border-width:8px;border-image-width:8px}.hud-shell .hud{gap:8px;margin-bottom:5px}.hud-shell .stat-icon,.hud-shell .xp-icon{flex-basis:22px;width:22px;height:22px}.hud-shell .meter-group{gap:5px}.hud-shell .health{min-width:0}.hud-shell .counter{min-width:34px}.hud-shell .counter strong{font-size:17px}.hud-shell .counter small{font-size:9px}.meter .meter-value{font-size:10px}.hud-shell #level{min-width:36px;font-size:11px}.hud-shell .experience{gap:5px}.hud-shell #pause{width:44px;height:44px}.boss-hud{top:8px;width:72%}.boss-hud .meter{height:22px}.boss-name{font-size:10px}}
@media(max-width:359px){.hud-shell .hud{gap:5px}.hud-shell .stat-icon,.hud-shell .xp-icon{flex-basis:18px;width:18px;height:18px}.hud-shell .counter strong{font-size:15px}.hud-shell .counter{min-width:30px}.meter{border-width:4px;border-image-width:4px}.hud-shell .meter-group{gap:3px}}
@media(max-height:500px) and (orientation:landscape){.shell{max-width:680px}.topbar{display:flex;position:absolute;left:12px;top:8px;min-height:24px;border:0}.topbar span,.heading{display:none}.battle{width:min(100%,calc(100dvh - 110px));min-width:280px}.hud-shell{padding:1px 3px 4px;border-width:7px;border-image-width:7px}.hud-shell .hud{gap:5px;min-height:44px;margin-bottom:2px}.hud-shell .counter strong{font-size:15px}.hud-shell .stat-icon,.hud-shell .xp-icon{width:18px;height:18px;flex-basis:18px}.hud-shell .counter{min-width:30px}.hud-shell .meter-group{gap:3px}.hud-shell .experience .meter{height:19px}.hud-shell .meter-value{font-size:10px}.hud-shell #level{font-size:10px;min-width:32px}}