/* Supplied carved frame: a transparent, low-resolution overlay along the bottom. */
@font-face { font-family: 'Optimus Princeps'; src: url(fonts/optimus-princeps/OptimusPrinceps.ttf) format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Optimus Princeps'; src: url(fonts/optimus-princeps/OptimusPrincepsSemiBold.ttf) format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
:root { --hud-b: 80px; }

body.framed #world { inset: 0; width: 100vw; height: 100vh; }
body.framed .screen-shade { inset: 0; }
body.framed .gamebar, body.framed .controls { display: none !important; }
body.framed .topline { left: 0; right: 0; }
body.framed .crosshair { left: 50%; top: 46%; }
body.framed .hint, body.framed .notice, body.framed .area-title { left: 50%; }
body.framed .area-title { top: 27%; }
body.framed .notice { bottom: calc(var(--hud-b) + 16px); }
body.editing .hud-frame, body.editing .hud-help { display: none; }
body.editing.framed #world, body.editing.framed .screen-shade { inset: 0; width: 100%; height: 100%; }
body.editing.framed .crosshair { left: 50%; top: 46%; }

.hud-frame { position: fixed; inset: 0; z-index: 4; pointer-events: none; color: #d8ccb0; font: 12px/1.25 Georgia, serif; image-rendering: pixelated; }
.hud-frame * { image-rendering: pixelated; }
.crosshair {
  width: 48px; height: 32px; color: transparent; font-size: 0;
  background: url(textures/hud/hud-crosshair-1.webp) center / 500% 500% no-repeat;
  mix-blend-mode: screen;
}
.crosshair.carry-target {
  width: 72px; height: 48px;
  background-image: url(textures/hud/hud-crosshair-2.png);
  background-size: 100% 100%;
}
.area-title {
  isolation: isolate; gap: 0; width: min(92vw, 1100px); padding: 8px 18px 12px;
  background: none;
}
.area-title::before { display: none; }                  /* the name alone, no ornament over it */
.area-title::after {
  content: ""; position: absolute; z-index: -1; inset: 12% 12% 0;
  display: block; width: auto; height: auto; border-radius: 50%; filter: blur(24px);
  background: radial-gradient(ellipse, #03040675 0, #0304064d 58%, transparent 100%);
  pointer-events: none;
}
.area-title-kicker { display: none; }
.area-name-wrap { position: relative; display: inline-block; margin-top: -6px; }
.area-title-name {
  display: block; color: transparent;
  font: 400 clamp(24px, 3.4vw, 42px)/1.08 'Optimus Princeps', Georgia, serif;
  letter-spacing: .025em;
}
.area-name-wrap canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; filter: drop-shadow(0 2px 4px #000d);
}
.hud-bottom {
  position: absolute; left: 50%; bottom: -11px; width: min(calc(63vw - 10px), 1000px);
  height: var(--hud-b);
  transform: translateX(-50%);
}
/* After Hunt: health in three segments on the brass rail, stamina on a smaller rail beneath. */
.hud-vitals {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  width: min(38vw, 560px); display: flex; flex-direction: column; align-items: center;
  filter: drop-shadow(0 2px 4px #000c);
}
.hud-rail { position: relative; width: 100%; height: 56px; display: flex; gap: 1.2%; padding: 0 7.8%; box-sizing: border-box; }
.hud-rail::after { content: ""; position: absolute; inset: 0; background: url(textures/hud/hud-energy-frame.webp) center / 100% 100% no-repeat; pointer-events: none; }
.hud-rail-energy { width: 72%; height: 34px; margin-top: -24px; }
.hud-seg { position: relative; flex: 1; margin-top: 23.5px; height: 7px; background: #120a08cc; box-shadow: inset 0 0 0 1px #000; }
.hud-rail-energy .hud-seg { margin-top: 14.4px; height: 4px; }
.hud-seg i { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #d0352a, #8d1712 60%, #b52a20); transition: width .16s linear; }
.hud-rail-energy .hud-seg i { background: linear-gradient(180deg, #f0d275, #a9782c 55%, #e8bd59); box-shadow: 0 0 4px #d7af4f88; }
body.editing .hud-vitals { display: none; }
.hud-hurt { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 72% 68% at 50% 48%, transparent 22%, #9a0c0780 55%, #b8140ef0 100%); }
body.editing .hud-hurt { display: none; }
.hud-col, .hud-corner, .hud-gargoyle, .hud-arcade, .hud-demon { display: none; }
.hud-log, .hud-info, .hud-date-bottom { display: none !important; }
.hud-log { left: 18.5%; top: 48%; width: 13%; height: 32%; padding: 2px 6px; }
.hud-log ol { width: 100%; margin: 0; padding: 0; list-style: none; color: #dbcfb8; font: 10px/1.25 Georgia, serif; }
.hud-log li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hud-log li:not(:last-child) { opacity: .7; }
.hud-log li.dim { color: #b2a58d; font-style: italic; }
.hud-info { left: 34%; top: 47%; width: 32%; height: 34%; gap: 2px; padding: 2px 10px; color: #c8b99c; font: 10px/1.2 Georgia, serif; }
.hud-info b { color: #ead9b5; font-size: 13px; }
.hud-date { display: none; }
.hud-date-bottom { left: 68%; top: 48%; width: 13%; height: 32%; color: #d0c2a2; font: 9px/1.3 Georgia, serif; }
.hud-date-bottom b { display: block; color: #ead9b5; font-size: 14px; }
.hud-help { position: fixed; z-index: 4; left: 50%; top: 42%; transform: translate(-50%, -50%); display: none; grid-template-columns: 1fr 1fr; gap: 6px 22px; padding: 18px 24px; color: #d8ccb0; font: 13px Georgia, serif; background: #0d0c0be8; border: 2px ridge #8a7448; box-shadow: 0 10px 40px #000; pointer-events: none; }
.hud-help.open { display: grid; }
.hud-help b { grid-column: 1 / -1; letter-spacing: .2em; color: #e3cf9f; text-align: center; }
.hud-help kbd { display: inline-block; min-width: 44px; margin-right: 8px; padding: 1px 5px; color: #e3cf9f; border: 1px solid #6f6250; font: 700 10px Arial, sans-serif; text-align: center; }

@media (max-width: 760px) {
  :root { --hud-b: 140px; }
  .hud-bottom { width: calc(77vw - 10px); }
  .hud-vitals { width: 62vw; }
  .hud-log { left: 17%; width: 17%; }
  .hud-info { left: 34%; width: 32%; font-size: 8px; }
  .hud-info b { font-size: 10px; }
  .hud-date-bottom { left: 67%; width: 16%; font-size: 8px; }
  .hud-date-bottom b { font-size: 12px; }
}
@media (max-width: 420px) {
  :root { --hud-b: 112px; }
  .hud-bottom { width: calc(86vw - 10px); }
  .hud-vitals { width: 70vw; }
  .hud-info { left: 29%; width: 42%; top: 50%; font-size: 7px; }
  .hud-info b { font-size: 9px; }
  .hud-date-bottom { left: 72%; width: 17%; top: 50%; font-size: 7px; }
  .hud-date-bottom b { font-size: 10px; }
}