/* Holy Fire UI.
   DOM layered over the canvas, never rendered in WebGL.
   Palette is the portfolio palette so the game reads as one of Nafi's things.
   System font stacks only. No webfonts, no external assets of any kind. */

:root {
  --bg: #080808;
  --bg-raised: #0f0f0f;
  --bg-panel: rgba(10, 10, 10, 0.92);
  --gold: #c9a96e;
  --gold-bright: #e2c68d;
  --gold-dim: #8d7749;
  --cream: #f5f0e8;
  --text: #d4cfc7;
  --text-dim: #857f77;
  --danger: #c0563c;
  --good: #7ba05b;
  --line: rgba(201, 169, 110, 0.22);
  --line-strong: rgba(201, 169, 110, 0.48);
  --shadow: 0 18px 60px rgba(0, 0, 0, 0.75);

  --font-body: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Roboto Mono", monospace;

  --hud-accent: var(--gold);
  --hud-hit: var(--cream);
  --hud-kill: var(--danger);

  --ui-gap: 26px;
}

/* Colour-blind safe accents. Applied by the HUD from settings.colorblindMode. */
.ui-root[data-colorblind="protanopia"],
.ui-root[data-colorblind="deuteranopia"] {
  --hud-accent: #5cc8ff;
  --hud-hit: #ffffff;
  --hud-kill: #ffb000;
}

.ui-root[data-colorblind="tritanopia"] {
  --hud-accent: #ff9d5c;
  --hud-hit: #ffffff;
  --hud-kill: #ff4f6d;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

canvas#scene {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: var(--bg);
  touch-action: none;
  outline: none;
}

noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 40px;
  text-align: center;
  color: var(--cream);
  background: var(--bg);
  z-index: 100;
}

.ui-root {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  user-select: none;
}

.ui-root button,
.ui-root a,
.ui-root [tabindex] {
  pointer-events: auto;
}

/* ---------------------------------------------------------------- HUD ---- */

.hud {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 220ms ease;
}

.hud[hidden] {
  display: none;
}

.hud--dim {
  opacity: 0;
}

.hud__corner {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.hud__corner--bottom-left {
  left: var(--ui-gap);
  bottom: var(--ui-gap);
}

.hud__corner--bottom-right {
  right: var(--ui-gap);
  bottom: var(--ui-gap);
  text-align: right;
}

.hud__corner--top-left {
  left: var(--ui-gap);
  top: var(--ui-gap);
}

.hud__corner--top-right {
  right: var(--ui-gap);
  top: var(--ui-gap);
  text-align: right;
}

.hud__label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--gold-dim);
  margin-bottom: 4px;
}

.hud__health-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.hud__health-value {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.hud__health-bar {
  position: relative;
  width: 210px;
  height: 3px;
  margin-top: 10px;
  background: rgba(245, 240, 232, 0.12);
  overflow: hidden;
}

.hud__health-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width 180ms ease-out;
}

.hud--critical .hud__health-fill {
  background: linear-gradient(90deg, #6b2a1c, var(--danger));
}

.hud__ammo-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
}

.hud__ammo-value {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.hud__ammo-reserve {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-dim);
}

.hud__weapon {
  margin-top: 6px;
  color: var(--gold);
}

.hud__wave {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--cream);
  letter-spacing: 0.04em;
}

.hud__minimap {
  display: block;
  margin-left: auto;
  margin-bottom: 10px;
  border: 1px solid rgba(201, 169, 110, 0.28);
  background: rgba(8, 8, 8, 0.62);
}

.hud__minimap[hidden] {
  display: none;
}

.hud__killfeed {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  max-width: 380px;
}

.hud__kill {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text);
  background: rgba(8, 8, 8, 0.55);
  border-inline-end: 2px solid var(--hud-kill);
  padding: 3px 8px;
  animation: kill-in 200ms ease-out;
}

.hud__kill--headshot {
  color: var(--gold-bright);
  border-inline-end-color: var(--gold);
}

@keyframes kill-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Crosshair. The gap is driven every frame by the real weapon spread state. */

.crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  --gap: 6px;
}

.crosshair__arm {
  position: absolute;
  background: var(--hud-accent);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}

.crosshair__arm--up,
.crosshair__arm--down {
  width: 2px;
  height: 9px;
  left: -1px;
}

.crosshair__arm--left,
.crosshair__arm--right {
  width: 9px;
  height: 2px;
  top: -1px;
}

.crosshair__arm--up { transform: translateY(calc(-100% - var(--gap))); }
.crosshair__arm--down { transform: translateY(var(--gap)); }
.crosshair__arm--left { transform: translateX(calc(-100% - var(--gap))); }
.crosshair__arm--right { transform: translateX(var(--gap)); }

.crosshair__dot {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 2px;
  height: 2px;
  background: var(--hud-accent);
  border-radius: 50%;
  opacity: 0.85;
}

.crosshair[data-style="dot"] .crosshair__arm { display: none; }
.crosshair[data-style="static"] .crosshair__dot { display: none; }
.crosshair[data-style="dynamic"] .crosshair__dot { opacity: 0.5; }

.hitmarker {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  opacity: 0;
}

.hitmarker--on {
  animation: hitmarker 220ms ease-out;
}

.hitmarker--headshot {
  animation-duration: 300ms;
}

.hitmarker__tick {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 2px;
  height: 8px;
  background: var(--hud-hit);
  transform-origin: 1px 1px;
}

.hitmarker--headshot .hitmarker__tick {
  background: var(--gold-bright);
  height: 11px;
}

.hitmarker__tick:nth-child(1) { transform: rotate(45deg) translateY(7px); }
.hitmarker__tick:nth-child(2) { transform: rotate(135deg) translateY(7px); }
.hitmarker__tick:nth-child(3) { transform: rotate(225deg) translateY(7px); }
.hitmarker__tick:nth-child(4) { transform: rotate(315deg) translateY(7px); }

@keyframes hitmarker {
  0% { opacity: 0; transform: scale(1.5); }
  20% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* Damage feedback. Nothing here flashes faster than 3 Hz. */

.hud__damage-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center,
    rgba(140, 30, 16, 0) 45%,
    rgba(140, 30, 16, 0.55) 100%);
  transition: opacity 320ms ease-out;
}

.hud--critical .hud__damage-vignette {
  animation: heartbeat 1.6s ease-in-out infinite;
}

@keyframes heartbeat {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.52; }
}

.hud__damage-arc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 460px;
  height: 460px;
  margin: -230px 0 0 -230px;
  opacity: 0;
  transform: rotate(var(--angle, 0deg));
  background: conic-gradient(from -18deg,
    rgba(192, 86, 60, 0.75) 0deg,
    rgba(192, 86, 60, 0) 36deg,
    rgba(192, 86, 60, 0) 324deg,
    rgba(192, 86, 60, 0.75) 360deg);
  mask-image: radial-gradient(closest-side, transparent 62%, #000 92%);
  -webkit-mask-image: radial-gradient(closest-side, transparent 62%, #000 92%);
}

.hud__damage-arc--on {
  animation: damage-arc 700ms ease-out;
}

@keyframes damage-arc {
  0% { opacity: 0.95; }
  100% { opacity: 0; }
}

/* Stats overlay, toggled with F3. */

.stats {
  position: absolute;
  left: var(--ui-gap);
  top: var(--ui-gap);
  min-width: 216px;
  padding: 12px 14px;
  background: rgba(8, 8, 8, 0.78);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--text);
  letter-spacing: 0.04em;
}

.stats[hidden] {
  display: none;
}

.stats__row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.stats__key {
  color: var(--gold-dim);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.22em;
}

.stats__value {
  color: var(--cream);
  font-variant-numeric: tabular-nums;
}

.stats__value--warn {
  color: var(--danger);
}

/* -------------------------------------------------------------- Menus ---- */

.menu {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px;
  pointer-events: auto;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(201, 169, 110, 0.07), transparent 62%),
    linear-gradient(180deg, rgba(8, 8, 8, 0.94), rgba(8, 8, 8, 0.985));
  animation: menu-in 260ms ease-out;
}

.menu[hidden] {
  display: none;
}

@keyframes menu-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.menu__panel {
  width: min(680px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 44px 46px 40px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.menu__panel--narrow {
  width: min(460px, 100%);
  text-align: center;
}

.menu__eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin: 0 0 14px;
}

.menu__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 6vw, 54px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: var(--cream);
  margin: 0;
}

.menu__rule {
  height: 1px;
  margin: 22px 0 26px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
  border: 0;
}

.menu__blurb {
  margin: 0 0 30px;
  color: var(--text-dim);
  font-size: 15px;
  max-width: 46ch;
}

.menu__group {
  margin-bottom: 26px;
}

.menu__group-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-dim);
  margin-bottom: 12px;
}

.menu__choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  gap: 10px;
}

.choice {
  display: block;
  width: 100%;
  padding: 13px 14px;
  text-align: start;
  background: transparent;
  border: 1px solid rgba(245, 240, 232, 0.13);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.choice:hover,
.choice:focus-visible {
  border-color: var(--line-strong);
  background: rgba(201, 169, 110, 0.06);
  outline: none;
}

.choice[aria-pressed="true"] {
  border-color: var(--gold);
  background: rgba(201, 169, 110, 0.12);
  color: var(--cream);
}

.choice__name {
  display: block;
  font-size: 15px;
  letter-spacing: 0.03em;
}

.choice__note {
  display: block;
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.choice[aria-pressed="true"] .choice__note {
  color: var(--gold-dim);
}

.menu__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.menu__panel--narrow .menu__actions {
  justify-content: center;
}

.btn {
  padding: 13px 30px;
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: #0a0a0a;
  outline: none;
}

.btn--primary {
  border-color: var(--gold);
  color: var(--cream);
}

.btn--ghost {
  border-color: rgba(245, 240, 232, 0.16);
  color: var(--text-dim);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--cream);
}

.menu__hint {
  margin-top: 26px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(133, 127, 119, 0.75);
}

.menu__stat {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--gold);
  margin: 0 0 6px;
}

/* Loading state. */

.loading__bar {
  position: relative;
  height: 2px;
  margin: 26px 0 12px;
  background: rgba(245, 240, 232, 0.1);
  overflow: hidden;
}

.loading__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
  transition: width 220ms ease-out;
}

.loading__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Fatal bootstrap error. Must stay readable with nothing else working. */

.fatal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 32px;
  background: #080808;
  color: #d4cfc7;
  font-family: var(--font-body);
  pointer-events: auto;
}

.fatal__panel {
  width: min(760px, 100%);
  padding: 36px 38px;
  border: 1px solid rgba(192, 86, 60, 0.4);
  background: #0d0b0b;
}

.fatal__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 30px;
  color: #f5f0e8;
}

.fatal__subtitle {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #c0563c;
}

.fatal__detail {
  margin: 0;
  padding: 16px;
  max-height: 44vh;
  overflow: auto;
  background: #060606;
  border: 1px solid rgba(245, 240, 232, 0.08);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: #a89f94;
  white-space: pre-wrap;
  word-break: break-word;
}

.fatal__hint {
  margin: 18px 0 0;
  font-size: 13px;
  color: #857f77;
}

/* Reduce motion. Also applied as a data attribute from the settings object so the
   in-game toggle works without a page reload. */

@media (prefers-reduced-motion: reduce) {
  .ui-root *,
  .fatal * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.ui-root[data-reduce-motion="true"] .hud--critical .hud__damage-vignette,
.ui-root[data-reduce-motion="true"] .menu,
.ui-root[data-reduce-motion="true"] .hud__kill {
  animation: none;
}

@media (max-width: 720px) {
  :root { --ui-gap: 16px; }

  .menu__panel { padding: 30px 24px 28px; }
  .hud__health-value,
  .hud__ammo-value { font-size: 30px; }
  .hud__health-bar { width: 150px; }
}

/* ---------------------------------------------------------------------------
   Settings panel
   Layered over the canvas and over the pause menu, so it owns the highest
   stacking context in the UI root.
   --------------------------------------------------------------------------- */

.settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  background: rgba(4, 4, 4, 0.78);
  backdrop-filter: blur(6px);
  pointer-events: auto;
}

.settings-overlay[hidden] { display: none; }

.settings-panel {
  width: min(720px, 100%);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  color: var(--text);
  font-family: var(--font-body);
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--line);
}

.settings-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--cream);
}

.settings-body {
  overflow-y: auto;
  padding: 0.4rem 1.4rem 1rem;
}

.settings-section { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.settings-section:last-child { border-bottom: 0; }

.settings-section h3 {
  margin: 0 0 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.settings-row {
  display: grid;
  grid-template-columns: 1fr 200px 88px;
  align-items: center;
  gap: 0.9rem;
  padding: 0.34rem 0;
  font-size: 0.92rem;
}

.settings-row label { color: var(--text); cursor: pointer; }

.settings-row input[type="checkbox"] {
  justify-self: start;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--gold);
  cursor: pointer;
}

.settings-row input[type="range"] {
  width: 100%;
  accent-color: var(--gold);
  cursor: pointer;
}

.settings-row select {
  width: 100%;
  padding: 0.32rem 0.5rem;
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}

.settings-value {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: right;
}

.settings-keys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 1.4rem;
}

.settings-key { grid-template-columns: 1fr 120px; }

.settings-bind,
.settings-close,
.settings-reset {
  padding: 0.34rem 0.7rem;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.settings-bind:hover,
.settings-close:hover,
.settings-reset:hover {
  background: rgba(201, 169, 110, 0.14);
  color: var(--gold-bright);
}

.settings-bind:focus-visible,
.settings-close:focus-visible,
.settings-reset:focus-visible,
.settings-row input:focus-visible,
.settings-row select:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.settings-bind.is-capturing {
  background: rgba(201, 169, 110, 0.22);
  color: var(--cream);
  border-color: var(--gold-bright);
}

.settings-footer {
  padding: 0.9rem 1.4rem;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 620px) {
  .settings-row { grid-template-columns: 1fr 120px 68px; font-size: 0.85rem; }
  .settings-keys { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .settings-bind,
  .settings-close,
  .settings-reset { transition: none; }
}


/* ------------------------------------------------------------------ RTL ----
 *
 * Hebrew flips the UI layer through dir="rtl" on the ui root, which handles text
 * and flow on its own. Only the rules that name a physical side need help, plus
 * the two animations that slide content in from a specific edge.
 */

[dir="rtl"] .hud__killfeed {
  align-items: flex-start;
}

[dir="rtl"] .hud__kill {
  animation-name: kill-in-rtl;
}

@keyframes kill-in-rtl {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

[dir="rtl"] .hud__minimap {
  margin-left: 0;
  margin-right: auto;
}

/* Hebrew has no capitals, and the wide tracking that suits Latin small caps makes
 * Hebrew labels hard to read. */
[dir="rtl"] .hud__label,
[dir="rtl"] .menu__group-label,
[dir="rtl"] .menu__eyebrow,
[dir="rtl"] .hud__corner {
  text-transform: none;
  letter-spacing: 0.04em;
}

/* The language row is a short pair of buttons, not a full-width grid. */
.menu__choices--lang {
  grid-template-columns: repeat(2, minmax(0, 120px));
}

.choice--lang {
  text-align: center;
}

/* Crosshair target confirmation. Colour plus a size change, so it still reads under
 * every colour-vision mode rather than relying on red alone. */
.crosshair--hot .crosshair__arm,
.crosshair--hot .crosshair__dot {
  background: var(--hud-kill);
}

.crosshair--hot .crosshair__dot {
  width: 4px;
  height: 4px;
  left: -2px;
  top: -2px;
  opacity: 1;
}