/* ============================================================
   SAINTFALL - page chrome, loader and HUD

   Typographic identity is deliberately not the site's neon:
   engraved caps and a rationed gold/oxblood palette, so the page
   around the game does not fight the game.
   ============================================================ */

.saintfall-shell {
  --sf-ink: #0b0809;
  --sf-sand: #e9ba79;
  --sf-gold: #d8a441;
  --sf-gold-lit: #f6d585;
  --sf-blood: #8a2230;
  --sf-verd: #4d8c74;
  --sf-bone: #e6dbbd;
  --sf-dim: rgba(230, 219, 189, 0.56);
  background: #0b0809;
  color: var(--sf-bone);
}

.saintfall-page {
  max-width: 1680px;
}

.saintfall-page .game-page__title {
  font-family: "Cinzel", Georgia, serif;
  letter-spacing: 0.14em;
  background: linear-gradient(170deg, var(--sf-gold-lit), var(--sf-gold) 48%, #8a601f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 10px rgba(216, 164, 65, 0.22));
}

.saintfall-page .game-page__sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 16px;
  color: var(--sf-dim);
  letter-spacing: 0.02em;
}

.saintfall-page .rb-standalone-surface {
  --game-aspect: 1.7778;
  --game-aspect-ratio: 16 / 9;
  --game-max-width: 1520px;
  width: 100%;
  max-width: none;
  max-height: none;
  min-height: 0;
  aspect-ratio: var(--game-aspect-ratio);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--sf-ink);
  box-shadow: none;
}

.saintfall-page .game-side__panel--saintfall {
  color: var(--sf-dim);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  line-height: 1.45;
}

.saintfall-page .game-side__panel--saintfall p {
  margin: 0;
}

.saintfall-page .game-side__panel--saintfall p + p {
  margin-top: 9px;
}

/* ------------------------------ stage ------------------------------ */

.sf-stage {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  background: #0b0809;
  border: 1px solid rgba(216, 164, 65, 0.16);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), inset 0 0 90px rgba(0, 0, 0, 0.5);
}

.saintfall-page .sf-stage:not(.is-maxed) {
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.sf-stage.is-maxed {
  position: fixed;
  inset: 0;
  z-index: 9000;
  aspect-ratio: auto;
  border-radius: 0;
  border: 0;
}

html.sf-maximised,
html.sf-maximised body,
body.rb-escape-menu-open {
  overflow: hidden;
}

/* The browser Fullscreen API promotes the stage to the top layer. The
   CSS-only QA/fallback path cannot, so explicitly retire surrounding
   page chrome while it is active; otherwise nav actions intercept the
   cinematic's top-right Skip control. Similarly, when the Tab field menu
   is opened, give it the full screen viewport. */
html.sf-maximised body > .nav,
html.sf-maximised .saintfall-page > .game-page__header,
html.sf-maximised .saintfall-page .game-side,
html.sf-maximised body > .footer,
body.rb-escape-menu-open > .nav,
body.rb-escape-menu-open .saintfall-page > .game-page__header,
body.rb-escape-menu-open .saintfall-page .game-side,
body.rb-escape-menu-open > .footer,
body.rb-escape-menu-open .rb-game-chrome {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.sf-maximised .sf-stage.is-maxed { z-index: 2147483000; }

#sf-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.sf-fs-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 40;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid rgba(216, 164, 65, 0.3);
  background: rgba(11, 8, 9, 0.6);
  color: var(--sf-gold);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.sf-fs-btn:hover { background: rgba(216, 164, 65, 0.16); }

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

#sf-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  font-family: "Share Tech Mono", ui-monospace, Menlo, monospace;
  color: var(--sf-bone);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.sf-hud__district {
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity 320ms ease;
}

.sf-hud__eyebrow {
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(216, 164, 65, 0.72);
  margin-bottom: 6px;
}

.sf-hud__name {
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(18px, 2.4vw, 34px);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--sf-bone);
}
.sf-hud__name::after {
  content: "";
  display: block;
  width: 62%;
  height: 1px;
  margin: 9px auto 0;
  background: linear-gradient(90deg, transparent, rgba(216, 164, 65, 0.75), transparent);
}

.sf-hud__compass {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  width: min(560px, 62%);
  height: 22px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

.sf-hud__strip { position: absolute; inset: 0; }

.sf-hud__tick,
.sf-hud__poi {
  position: absolute;
  top: 3px;
  transform: translateX(-50%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms linear;
}
.sf-hud__tick {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--sf-gold);
}
.sf-hud__poi {
  top: 22px;
  font-size: 9px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(230, 219, 189, 0.62);
}

.sf-hud__needle {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 13px;
  background: linear-gradient(180deg, var(--sf-gold-lit), transparent);
}

.sf-hud__readout {
  position: absolute;
  left: 16px;
  bottom: 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(230, 219, 189, 0.45);
}

/* A fixed-orientation tactical map. Landmarks stay put while the player
   arrow turns to show the current view heading. */
.sf-hud__minimap {
  position: absolute;
  top: 3.7rem;
  right: 1.15rem;
  width: 7rem;
  padding: 0;
  border: 1px solid rgba(216, 164, 65, .55);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.sf-hud__minimap::before,
.sf-hud__minimap::after {
  display: none;
}
.sf-minimap__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .3rem;
  color: rgba(255, 228, 183, .66);
  font-size: .52rem;
  letter-spacing: .18em;
}
.sf-minimap__head b { color: #f2c46e; font-size: .5rem; letter-spacing: .08em; }
#sf-map-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0;
  background: transparent;
  filter: none;
}
.sf-minimap__event {
  margin-top: .38rem;
  padding-top: .34rem;
  border-top: 1px solid rgba(255, 224, 179, .16);
  text-transform: uppercase;
}
.sf-minimap__event > div {
  display: flex;
  justify-content: space-between;
  gap: .35rem;
  align-items: baseline;
  font-size: .51rem;
  letter-spacing: .06em;
  color: rgba(255, 233, 204, .76);
}
.sf-minimap__event > div span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-minimap__event > div b { flex: none; color: #efbb64; font-size: .5rem; }
.sf-minimap__event small {
  display: block;
  overflow: hidden;
  margin-top: .17rem;
  color: rgba(226, 213, 190, .44);
  font-size: .43rem;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-minimap__event > i {
  display: block;
  height: 2px;
  margin-top: .3rem;
  overflow: hidden;
  background: rgba(255, 235, 205, .12);
}
.sf-minimap__event > i em {
  display: block;
  width: 0;
  height: 100%;
  background: #d8a441;
  box-shadow: 0 0 .4rem rgba(255, 167, 69, .8);
  transition: width .12s linear;
}
.sf-minimap__event[data-phase="warning"] > div b,
.sf-minimap__event[data-phase="active"] > div b { color: #ff8b58; }
.sf-minimap__event[data-phase="warning"] > i em,
.sf-minimap__event[data-phase="active"] > i em { background: #f0643e; }
.sf-minimap__event[data-phase="complete"] > div b,
.sf-minimap__event[data-phase="complete"] small { color: #91e5c0; }
.sf-hud__minimap[data-event="1"] {
  border-color: rgba(245, 101, 58, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 118, 66, .08), 0 0 1.2rem rgba(151, 41, 22, .22);
}

.sf-hud__hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(230, 219, 189, 0.62);
  transition: opacity 600ms ease;
  white-space: nowrap;
}
.sf-hud__hint b { color: var(--sf-gold); font-weight: 400; }

.sf-hud__doctrine-cue {
  position: absolute;
  left: 5.25rem;
  bottom: 5.4rem;
  max-width: calc(100% - 6rem);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.32rem 0.65rem 0.32rem 0.5rem;
  border: 1px solid rgba(216, 164, 65, 0.45);
  border-left: 3px solid var(--sf-gold, #d8a441);
  background: linear-gradient(135deg, rgba(216, 164, 65, 0.16), rgba(12, 8, 9, 0.88));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65), 0 0 10px rgba(216, 164, 65, 0.22);
  backdrop-filter: blur(4px);
  color: var(--sf-bone, #f6edd9);
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  z-index: 25;
  animation: sf-doctrine-pulse 2.4s ease-in-out infinite;
  transition: opacity 280ms ease, transform 280ms ease, border-color 200ms ease;
}
.sf-hud__doctrine-cue[hidden],
body.rb-escape-menu-open .sf-hud__doctrine-cue {
  display: none !important;
}
.sf-hud__doctrine-cue:hover,
.sf-hud__doctrine-cue:focus-visible {
  border-color: var(--sf-gold, #d8a441);
  background: linear-gradient(135deg, rgba(216, 164, 65, 0.24), rgba(20, 14, 16, 0.82));
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.75), 0 0 16px rgba(216, 164, 65, 0.42);
  transform: translateY(-1px);
  outline: none;
}
.sf-doctrine-cue__icon {
  color: var(--sf-gold, #d8a441);
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(216, 164, 65, 0.75);
}
.sf-doctrine-cue__copy {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  white-space: nowrap;
}
.sf-doctrine-cue__copy strong {
  color: #ffe6a3;
  font-weight: 700;
  font-size: 12px;
  text-shadow: 0 0 6px rgba(216, 164, 65, 0.6);
}
.sf-doctrine-cue__copy span {
  color: rgba(246, 237, 217, 0.88);
  font-size: 10px;
  letter-spacing: 0.09em;
}
.sf-doctrine-cue__key {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid rgba(216, 164, 65, 0.45);
  background: rgba(0, 0, 0, 0.45);
  color: #ffd27a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  box-shadow: inset 0 -1px 0 rgba(216, 164, 65, 0.3);
}
@keyframes sf-doctrine-pulse {
  0%, 100% {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65), 0 0 10px rgba(216, 164, 65, 0.18);
    border-left-color: var(--sf-gold, #d8a441);
  }
  50% {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.75), 0 0 18px rgba(216, 164, 65, 0.42);
    border-left-color: #ffe6a3;
  }
}
.sf-stage.sf-touch-enabled .sf-hud__doctrine-cue {
  left: max(1rem, calc(env(safe-area-inset-left) + 0.8rem));
  bottom: auto;
  top: max(4.2rem, calc(env(safe-area-inset-top) + 3.8rem));
}

.sf-hud__operative-dock {
  position: absolute;
  left: calc(50% + .75rem);
  width: min(15rem, 24cqw);
  bottom: max(2.35rem, calc(env(safe-area-inset-bottom) + 2.15rem));
  display: flex;
  justify-content: flex-start;
  align-items: center;
  pointer-events: none;
  z-index: 20;
}
.sf-hud__operative-dock[hidden],
body.rb-escape-menu-open .sf-hud__operative-dock {
  display: none !important;
}
.sf-hud__operative-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.18rem 0.45rem;
  border: 1px solid rgba(216, 164, 65, 0.4);
  border-left: 2px solid var(--sf-gold, #d8a441);
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(216, 164, 65, 0.16), rgba(12, 8, 9, 0.9));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  color: var(--sf-bone, #f6edd9);
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sf-hud__operative-item[hidden] {
  display: none !important;
}
.sf-hud__operative-item--teleport {
  border-color: rgba(140, 199, 213, 0.4);
  border-left-color: #8cc7d5;
  background: linear-gradient(135deg, rgba(140, 199, 213, 0.18), rgba(7, 12, 16, 0.9));
}
.sf-hud__operative-item--cast {
  border-color: rgba(225, 174, 80, 0.4);
  border-left-color: #f0c360;
  background: linear-gradient(135deg, rgba(225, 174, 80, 0.18), rgba(16, 10, 8, 0.9));
}
.sf-hud__operative-label b {
  font-weight: 600;
  color: rgba(246, 237, 217, 0.92);
  font-size: 10px;
  letter-spacing: 0.06em;
}
.sf-hud__operative-value {
  font-weight: 700;
  font-size: 10px;
  color: #e8a06a;
  letter-spacing: 0.06em;
}
.sf-hud__operative-item[data-state="active"] .sf-hud__operative-value {
  color: #ffae48;
}
.sf-stage.sf-touch-enabled .sf-hud__operative-dock {
  display: none !important;
}

/* ------------------------------ loader ------------------------------ */

#sf-boot {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(216, 164, 65, 0.10), transparent 62%),
    linear-gradient(180deg, #120c0a, #060405 68%);
  transition: opacity 900ms ease;
  text-align: center;
  padding: 24px;
}
#sf-boot.is-hidden { opacity: 0; pointer-events: none; }

.sf-boot__back {
  position: absolute;
  top: 14px;
  left: 16px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(230, 219, 189, 0.5);
  text-decoration: none;
}
.sf-boot__back:hover { color: var(--sf-gold); }

.sf-boot__mark {
  position: relative;
  width: 118px;
  height: 118px;
  margin-bottom: 6px;
}
.sf-boot__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(216, 164, 65, 0.30);
  border-top-color: rgba(216, 164, 65, 0.9);
  animation: sf-spin 4.6s linear infinite;
}
.sf-boot__ring:nth-child(2) {
  inset: 16px;
  border-color: rgba(77, 140, 116, 0.22);
  border-bottom-color: rgba(130, 189, 163, 0.8);
  animation-duration: 7.2s;
  animation-direction: reverse;
}
@keyframes sf-spin { to { transform: rotate(360deg); } }

.sf-boot__glyph {
  position: absolute;
  inset: 26px;
  width: calc(100% - 52px);
  height: calc(100% - 52px);
  fill: none;
  stroke: rgba(246, 213, 133, 0.85);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sf-boot__title {
  font-family: "Cinzel", Georgia, serif;
  display: inline-block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  box-sizing: content-box;
  font-size: clamp(28px, 4.4vw, 54px);
  letter-spacing: clamp(0.14em, 1.8vw, 0.24em);
  line-height: 1.05;
  padding-right: 0.26em;
  margin: 0;
  background: linear-gradient(170deg, #f6d585, #d8a441 46%, #7a5320);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sf-boot__sub {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(230, 219, 189, 0.62);
  margin: -4px 0 10px;
  letter-spacing: 0.06em;
}

.sf-boot__bar {
  width: min(320px, 70%);
  height: 2px;
  background: rgba(230, 219, 189, 0.14);
  overflow: hidden;
}
.sf-boot__fill {
  width: 2%;
  height: 100%;
  background: linear-gradient(90deg, var(--sf-blood), var(--sf-gold-lit));
  transition: width 260ms ease;
}

.sf-boot__status {
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(216, 164, 65, 0.8);
}

.sf-boot__tip {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 15px;
  color: rgba(230, 219, 189, 0.5);
  max-width: 46ch;
  margin-top: 10px;
  line-height: 1.5;
}

.sf-boot__err {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #e8887a;
  white-space: pre-wrap;
  max-width: 62ch;
  text-align: left;
  margin-top: 12px;
}
#sf-boot:not(.has-error) .sf-boot__err { display: none; }

/* ----------------------------- side panel ----------------------------- */

.sf-brief {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.sf-brief__card {
  border: 1px solid rgba(216, 164, 65, 0.16);
  border-radius: 8px;
  padding: 14px 16px;
  background: linear-gradient(160deg, rgba(216, 164, 65, 0.05), rgba(0, 0, 0, 0.2));
}

.sf-brief__card h3 {
  font-family: "Cinzel", Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--sf-gold);
}

.sf-brief__card p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  color: rgba(230, 219, 189, 0.74);
}

.sf-brief__card ul {
  margin: 0;
  padding-left: 16px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(230, 219, 189, 0.72);
}

@media (max-width: 720px) {
  .sf-hud__hint { font-size: 9px; }
  .sf-hud__compass { width: 84%; }
}

/* ============================================================
   COMBAT HUD
   Everything here is positioned against the viewport and sized in
   rem, so the layout survives the same ultrawide-to-phone range the
   rest of the site does.
   ============================================================ */

.sf-hud__reticle {
  position: absolute; left: 50%; top: 50%;
  width: 112px; height: 112px; margin: -56px 0 0 -56px;
  --sf-reticle-gap: 30px;
  --sf-reticle-arm: 9px;
  pointer-events: none; transition: opacity .2s;
}
.sf-hud__reticle i {
  position: absolute; background: rgba(255, 244, 228, .82);
  box-shadow: 0 0 4px rgba(0, 0, 0, .8);
  transition: left .11s ease-out, top .11s ease-out;
}
.sf-hud__reticle i:nth-child(1) {
  left: calc(50% - 1px);
  top: calc(50% - var(--sf-reticle-gap) - var(--sf-reticle-arm));
  width: 2px; height: var(--sf-reticle-arm);
}
.sf-hud__reticle i:nth-child(2) {
  left: calc(50% - 1px);
  top: calc(50% + var(--sf-reticle-gap));
  width: 2px; height: var(--sf-reticle-arm);
}
.sf-hud__reticle i:nth-child(3) {
  top: calc(50% - 1px);
  left: calc(50% - var(--sf-reticle-gap) - var(--sf-reticle-arm));
  height: 2px; width: var(--sf-reticle-arm);
}
.sf-hud__reticle i:nth-child(4) {
  top: calc(50% - 1px);
  left: calc(50% + var(--sf-reticle-gap));
  height: 2px; width: var(--sf-reticle-arm);
}
.sf-hud__reticle[data-charging="1"] i {
  background: #ffbd3e;
  box-shadow: 0 0 8px rgba(255, 189, 62, .95), 0 0 16px rgba(255, 150, 40, .6);
  filter: brightness(calc(1 + var(--sf-furnace-progress, 0) * .35));
}
.sf-hud__reticle[data-charge-ready="1"] i {
  background: #fff3c6;
  box-shadow: 0 0 10px rgba(255, 243, 198, 1), 0 0 20px rgba(255, 150, 40, .78);
}

/* The damage flash. Driven by a class toggle rather than by an
   inline opacity ramp so the browser owns the timing - a JS-driven
   fade competes with the frame budget exactly when the frame budget
   is under pressure. */
.sf-hud__hurt {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center,
    rgba(180, 20, 24, 0) 42%, rgba(184, 22, 26, .62) 100%);
}
.sf-hud__hurt.is-hit { animation: sf-hurt .52s ease-out 1; }
@keyframes sf-hurt { from { opacity: 1; } to { opacity: 0; } }

/* THE GILDING. A held state like the venom vignette, and deliberately
   the same shape as the boost/shield rows above it so the vitals block
   reads as one column of "what is true about me right now". Absent
   entirely when it is not lit: a permanent empty slot for a
   twenty-second buff is twenty seconds of information and forty of
   furniture. */
.sf-hud__boon {
  display: none;
  margin-top: .4rem;
  padding: .28rem .5rem;
  border: 1px solid rgba(255, 210, 122, .5);
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(120, 78, 20, .42), rgba(60, 38, 10, .22));
  font: 600 11px/1.1 "Share Tech Mono", ui-monospace, monospace;
  letter-spacing: .09em;
  color: #ffe7b4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}
.sf-hud__boon[data-state="on"] { display: block; }
.sf-hud__boon span { opacity: .78; }
.sf-hud__boon strong { float: right; font-weight: 700; }
.sf-hud__boon i {
  display: block; margin-top: .26rem; height: 2px;
  background: rgba(255, 224, 165, .18);
}
.sf-hud__boon em { display: block; height: 100%; background: #ffd27a; }
/* The last few seconds pulse. A bar that simply runs out gives the
   player no moment to decide whether to spend what is left. */
.sf-hud__boon[data-level="fading"] { animation: sf-boon 0.9s ease-in-out infinite; }
@keyframes sf-boon {
  0%, 100% { border-color: rgba(255, 210, 122, .5); }
  50% { border-color: rgba(255, 236, 190, .95); }
}

/* VENOM. Held rather than flashed - it is a condition, not an event -
   so the opacity is driven from the toxin level in JS and only the
   creep of the inner edge is animated here. Green, because green means
   exactly one thing in this game and this is it. The vignette stays
   well clear of the centre: a screen effect that obscures the reticle
   punishes the player twice for the same mistake. */
.sf-hud__toxin {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .35s linear;
  background:
    radial-gradient(ellipse at center,
      rgba(120, 190, 30, 0) 38%, rgba(96, 168, 24, .34) 78%,
      rgba(52, 104, 12, .68) 100%);
}
.sf-hud__toxin[data-state="crit"] {
  animation: sf-toxin 1.6s ease-in-out infinite;
}
@keyframes sf-toxin {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.35) brightness(1.22); }
}

/* SILK. The Distaff's pin and reel hold the trooper's feet, and this
   is how they say so: pale strands closing in from the edges of the
   frame, the web's own colour, held for exactly as long as the hold.
   Same discipline as the venom vignette - it stays clear of the
   centre, because a held player can still shoot and swing and the
   reticle is what they are doing that with. "hauled" pulses, because a
   line dragging you across the sand is a thing in motion. */
.sf-hud__silk {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .22s linear;
  background:
    radial-gradient(ellipse at center,
      rgba(191, 245, 236, 0) 44%, rgba(191, 245, 236, .22) 76%,
      rgba(140, 214, 206, .55) 100%),
    repeating-conic-gradient(from 12deg at 50% 50%,
      rgba(232, 255, 255, 0) 0deg 9.5deg, rgba(232, 255, 255, .11) 10deg 10.6deg);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 42%, #000 82%);
  mask-image: radial-gradient(ellipse at center, transparent 42%, #000 82%);
}
.sf-hud__silk[data-state="hauled"] {
  animation: sf-silk 0.55s ease-in-out infinite;
}
@keyframes sf-silk {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

/* FLATTENED. The Abbess's abdomen landing on you, and anything else
   heavy enough to earn player.applyStun. Deliberately the opposite
   discipline to the silk above: silk keeps the centre clear because a
   held trooper can still shoot, and a stunned one cannot - so this
   closes over the reticle as well, and the ring pulse is the clock
   running out. Rendered warm and dark rather than as another sci-fi
   overlay: it is a concussion, not a status effect. */
.sf-hud__stun {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .12s linear;
  background:
    radial-gradient(ellipse at center,
      rgba(20, 4, 6, .34) 0%, rgba(26, 5, 8, .5) 38%,
      rgba(58, 8, 12, .68) 74%, rgba(6, 1, 2, .88) 100%);
}
.sf-hud__stun[data-state="down"] {
  animation: sf-stun 0.42s ease-in-out infinite;
}
@keyframes sf-stun {
  0%, 100% { filter: brightness(1) saturate(1); transform: scale(1); }
  50% { filter: brightness(1.25) saturate(1.3); transform: scale(1.03); }
}

/* Damage numbers are DOM text anchored to projected world points. The
   heavy shadow and hairline stroke keep two digits readable against
   both noon sand and the almost-black night preset. */
.sf-hud__numbers {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.sf-damage-number {
  position: absolute; left: 50%; top: 50%;
  min-width: 2ch; text-align: center; white-space: nowrap;
  color: #ffe5b5;
  font: 800 clamp(.9rem, 1.45vw, 1.28rem)/1 "Share Tech Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  -webkit-text-stroke: .45px rgba(20, 8, 4, .92);
  text-shadow: 0 2px 2px rgba(0, 0, 0, .96), 0 0 8px rgba(255, 139, 54, .72);
  will-change: transform, opacity;
}
.sf-damage-number.is-head { color: #fff8e9; font-size: clamp(1.05rem, 1.7vw, 1.48rem); }
.sf-damage-number.is-weak {
  color: #ff3b4e;
  font-size: clamp(1.08rem, 1.75vw, 1.52rem);
  text-shadow: 0 2px 2px #000, 0 0 10px rgba(255, 46, 67, .88), 0 0 18px rgba(255, 20, 40, .5);
}
.sf-damage-number.is-strong {
  color: #b9aa8c;
  font-size: clamp(.82rem, 1.28vw, 1.05rem);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .9);
}
.sf-damage-number.is-boost { color: #ffad52; font-size: clamp(1rem, 1.62vw, 1.4rem); }
.sf-damage-number.is-kill { filter: brightness(1.3); }

.sf-hud__vitals,
.sf-hud__charge {
  position: absolute;
  bottom: max(1.15rem, calc(env(safe-area-inset-bottom) + .95rem));
  width: min(15rem, 24cqw);
  pointer-events: none;
}
.sf-hud__vitals {
  right: calc(50% + .75rem);
  left: auto;
}
.sf-hud__charge {
  left: calc(50% + .75rem);
  right: auto;
}
.sf-hud__hplabel {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .2rem;
  color: rgba(255, 232, 200, .64);
  font: 650 .54rem/1.1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: .12em;
}
.sf-hud__hplabel b { color: #eaf5d8; font-size: .58rem; letter-spacing: .04em; }
.sf-hud__hpwrap {
  height: 9px; border: 1px solid rgba(255, 236, 214, .34);
  background: rgba(12, 8, 10, .5); overflow: hidden;
}
.sf-hud__hp {
  height: 100%; width: 100%;
  transition: width .16s linear, background-color .3s;
  background: #7fd08a;
}
.sf-hud__hp[data-state="warn"] { background: #e8b24a; }
.sf-hud__hp[data-state="crit"] { background: #d8443c; }
.sf-hud__jet {
  margin-top: .48rem;
  color: rgba(255, 220, 169, .82);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .92);
}
.sf-hud__jetlabel {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: .2rem;
  font: 650 .58rem/1.1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: .12em;
}
.sf-hud__jetlabel b { color: #ffe2aa; font-size: .6rem; letter-spacing: .05em; }
.sf-hud__jettrack {
  height: 5px; overflow: hidden;
  border: 1px solid rgba(255, 205, 139, .28);
  background: rgba(12, 8, 10, .58);
}
.sf-hud__jettrack i {
  display: block; width: 100%; height: 100%; transform: scaleX(1);
  transform-origin: left center;
  background: linear-gradient(90deg, #9c4b22, #ffae48 62%, #ffe0a0);
  box-shadow: 0 0 8px rgba(255, 148, 54, .55);
  transition: transform .08s linear, filter .18s;
}
.sf-hud__jet[data-state="thrust"] .sf-hud__jettrack i { filter: brightness(1.32); }
.sf-hud__jet[data-state="crit"] .sf-hud__jettrack i {
  background: #a9332d; box-shadow: 0 0 7px rgba(190, 42, 35, .55);
}
.sf-hud__boost,
.sf-hud__shield,
.sf-hud__ability {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: .32rem;
  color: rgba(255, 224, 183, .62);
  font: 650 .54rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: .09em;
}
.sf-hud__boost span b,
.sf-hud__shield span b,
.sf-hud__ability span b { color: #ffe5b5; font-size: .68rem; }
.sf-hud__boost strong,
.sf-hud__shield strong,
.sf-hud__ability strong { color: rgba(255, 224, 183, .78); font-size: .56rem; }
.sf-hud__boost[data-state="ready"],
.sf-hud__shield[data-state="ready"],
.sf-hud__ability[data-state="ready"] { color: #ffe0ac; }
.sf-hud__boost[data-state="ready"] strong,
.sf-hud__shield[data-state="ready"] strong,
.sf-hud__ability[data-state="ready"] strong { color: #9ff1d8; }
.sf-hud__boost[data-state="active"] strong,
.sf-hud__ability[data-state="active"] strong { color: #ffae48; }
.sf-hud__boost[data-state="cooldown"] strong,
.sf-hud__ability[data-state="cooldown"] strong { color: #e8a06a; }
.sf-hud__shield[data-state="active"] strong { color: #ffe39a; text-shadow: 0 0 8px rgba(255, 190, 70, .75); }
.sf-hud__boost[data-state="low"] strong,
.sf-hud__shield[data-state="low"] strong,
.sf-hud__ability[data-state="low"] strong { color: #d95c48; }
.sf-hud__shield[data-state="locked"] strong,
.sf-hud__ability[data-state="locked"] strong { color: #c99c73; }
.sf-hud__jet[data-state="shield"] .sf-hud__jettrack i {
  background: linear-gradient(90deg, #9b5a1d, #ffc34f 62%, #fff0ae);
  filter: brightness(1.28);
}
.sf-hud__vitalrow {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .42rem;
  font: 600 .72rem/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: .08em; color: rgba(255, 238, 220, .8);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}
.sf-hud__vitalrow b { font-size: 1.15rem; color: #fff3e2; }

/* THE HEAT LIMITER.
   Amber while it is a number the player can act on, and it only
   changes colour at the two points where the decision changes: hot
   enough to be worth venting, and locked out. A gauge that reddens
   continuously reads as decoration; one that changes twice reads as
   a warning. */
.sf-heat { display: inline-flex; align-items: center; gap: .46rem; }
.sf-heat__track {
  display: block; width: 5.2rem; height: .42rem; border-radius: .21rem;
  background: rgba(255, 238, 220, .18);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
  overflow: hidden;
}
.sf-heat__track b {
  display: block; height: 100%; border-radius: inherit; font-size: 0;
  background: linear-gradient(90deg, #d8a441, #f6a13a 62%, #ff7a34);
  transition: width .08s linear;
}
.sf-heat u {
  text-decoration: none; font-variant-numeric: tabular-nums;
  min-width: 3.4rem; color: rgba(255, 238, 220, .86);
}
.sf-heat.is-venting u { color: #8fe9d4; }
.sf-heat.is-venting .sf-heat__track b { background: #4fd8bd; }
.sf-heat.is-over u { color: #ff8b5e; animation: sf-heat-alarm .55s steps(2) infinite; }
.sf-heat.is-over .sf-heat__track b { background: #ff6a2c; }
@keyframes sf-heat-alarm { 0%, 100% { opacity: 1; } 50% { opacity: .38; } }

.sf-hud__objective {
  position: absolute; left: 50%; top: 4.6rem; transform: translateX(-50%);
  width: min(30rem, 76vw); text-align: center; pointer-events: none;
  transition: opacity .3s;
}
.sf-hud__tier { color: rgba(216,164,65,.85); letter-spacing: .08em; }
.sf-hud__tier[data-tier="martyr"] { color: #ef633e; }
.sf-hud__tier[data-tier="pilgrim"] { color: rgba(242,229,199,.7); }
.sf-hud__objective[data-event="1"] .sf-hud__objlabel {
  color: #ffd8c2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95), 0 0 10px rgba(209, 54, 30, .36);
}
.sf-hud__objective[data-event="1"] .sf-hud__objbar i { background: #ef633e; }
.sf-hud__objlabel {
  font: 600 .74rem/1.3 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 226, 190, .9); text-shadow: 0 1px 4px rgba(0, 0, 0, .95);
}
.sf-hud__objbar {
  margin: .38rem auto 0; height: 3px; width: 62%;
  background: rgba(12, 8, 10, .55);
}
.sf-hud__objbar i { display: block; height: 100%; width: 0; background: #ff9a44; }

.sf-hud__banner {
  position: absolute; left: 50%; top: 32%; transform: translateX(-50%);
  font: 700 1.5rem/1.2 "Cinzel", Georgia, serif; letter-spacing: .14em;
  color: #ffe9cf; text-shadow: 0 2px 14px rgba(0, 0, 0, .95);
  text-align: center; white-space: nowrap; pointer-events: none;
  transition: opacity .35s;
}

.sf-hud__breach-alert {
  position: absolute;
  left: 50%;
  top: 23%;
  min-width: min(31rem, 78vw);
  padding: .55rem 1.2rem .65rem;
  transform: translate(-50%, -.6rem) scale(.98);
  border-top: 1px solid rgba(239, 99, 62, .58);
  border-bottom: 1px solid rgba(239, 99, 62, .32);
  background: linear-gradient(90deg, transparent, rgba(34, 8, 8, .7) 20%, rgba(34, 8, 8, .7) 80%, transparent);
  text-align: center;
  opacity: 0;
  transition: opacity .26s ease, transform .26s ease;
}
.sf-hud__breach-alert.is-shown { opacity: 1; transform: translate(-50%, 0) scale(1); }
.sf-hud__breach-alert small {
  display: block;
  margin-bottom: .18rem;
  color: #f18a59;
  font-size: .55rem;
  letter-spacing: .28em;
}
.sf-hud__breach-alert strong {
  display: block;
  color: #ffe5d1;
  font: 700 clamp(.95rem, 1.8vw, 1.45rem)/1.1 "Cinzel", Georgia, serif;
  letter-spacing: .14em;
}
.sf-hud__breach-alert[data-boss="1"] {
  border-color: rgba(255, 185, 66, .72);
  background: linear-gradient(90deg, transparent, rgba(51, 23, 5, .76) 20%, rgba(51, 23, 5, .76) 80%, transparent);
}
.sf-hud__breach-alert[data-boss="1"] small { color: #ffc25e; }

.sf-hud__strat {
  position: absolute; right: 1.6rem; bottom: 1.5rem;
  display: flex; flex-direction: column; gap: .34rem;
  pointer-events: none;
}
.sf-hud__stratitem {
  position: relative; overflow: hidden;
  min-width: 11rem; padding: .3rem .55rem;
  background: rgba(10, 7, 9, .48);
  border-left: 2px solid rgba(255, 226, 190, .3);
  font: 600 .66rem/1.35 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: .07em; color: rgba(255, 236, 214, .55);
  display: flex; justify-content: space-between; gap: .8rem;
}
.sf-hud__stratitem[data-ready="1"] {
  color: #fff1de; border-left-color: #ffb057;
}
.sf-hud__stratitem span { letter-spacing: .12em; }
.sf-hud__stratitem i {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: rgba(255, 176, 87, .75);
}

.sf-hud__code {
  position: absolute; left: 50%; bottom: 7.5rem; transform: translateX(-50%);
  display: flex; gap: .5rem; pointer-events: none; transition: opacity .15s;
}
.sf-hud__code b {
  width: 2rem; height: 2rem; display: grid; place-items: center;
  background: rgba(10, 7, 9, .62); border: 1px solid rgba(255, 176, 87, .6);
  color: #ffd7a4; font-size: 1.1rem;
}

/* ============================================================
   TOUCH CONTROLLER

   An authored two-thumb layout: movement stays under the left thumb,
   look owns the open right field, and every action remains in the
   lower-right reach arc. Pointer Events are handled in touch.js; this
   layer is presentation and hit-area geometry only.
   ============================================================ */

#sf-touch {
  position: absolute;
  inset: 0;
  z-index: 32;
  display: none;
  overflow: hidden;
  color: #f5dba5;
  font-family: "Share Tech Mono", ui-monospace, Menlo, monospace;
  pointer-events: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sf-stage.sf-touch-enabled,
.sf-stage.sf-touch-enabled #sf-canvas {
  touch-action: none;
  overscroll-behavior: contain;
}

.sf-stage.sf-touch-enabled #sf-canvas { cursor: default; }
.sf-stage.sf-touch-enabled #sf-touch { display: block; }

.sf-touch__look {
  position: absolute;
  z-index: 1;
  inset: max(3rem, env(safe-area-inset-top)) 0 0 32%;
  display: grid;
  place-items: center;
  pointer-events: auto;
  touch-action: none;
}

.sf-touch__look span {
  margin-bottom: 7.5rem;
  color: rgba(255, 229, 181, .3);
  font-size: .5rem;
  letter-spacing: .18em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95);
  transition: opacity .16s ease;
}

.sf-touch__look.is-held span { opacity: 0; }

.sf-touch__stick {
  position: absolute;
  z-index: 4;
  left: max(.75rem, env(safe-area-inset-left));
  bottom: max(.75rem, env(safe-area-inset-bottom));
  width: clamp(7rem, 30vw, 8.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
}

.sf-touch__stick::before,
.sf-touch__stick::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.sf-touch__stick::before {
  inset: 8%;
  border: 1px solid rgba(226, 174, 74, .38);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(246, 213, 133, .1) 0 16%, transparent 17%),
    conic-gradient(from 45deg,
      rgba(216, 164, 65, .16), transparent 16%,
      rgba(216, 164, 65, .16) 17%, transparent 33%,
      rgba(216, 164, 65, .16) 34%, transparent 50%,
      rgba(216, 164, 65, .16) 51%, transparent 67%,
      rgba(216, 164, 65, .16) 68%, transparent 84%,
      rgba(216, 164, 65, .16) 85%);
  box-shadow:
    inset 0 0 0 .42rem rgba(8, 5, 7, .18),
    inset 0 0 1.8rem rgba(216, 164, 65, .08),
    0 .7rem 1.5rem rgba(0, 0, 0, .34);
  backdrop-filter: blur(3px);
}

.sf-touch__stick::after {
  inset: 21%;
  border: 1px dashed rgba(246, 213, 133, .19);
  border-radius: 50%;
}

.sf-touch__stick-ring {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.sf-touch__stick-knob {
  display: block;
  width: 42%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 231, 177, .72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 240, 194, .34), transparent 28%),
    linear-gradient(145deg, rgba(138, 34, 48, .86), rgba(46, 15, 19, .9));
  box-shadow:
    inset 0 0 0 3px rgba(216, 164, 65, .15),
    0 0 0 3px rgba(8, 5, 7, .25),
    0 .35rem .8rem rgba(0, 0, 0, .58);
  will-change: transform;
}

.sf-touch__stick > span {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: .2rem;
  transform: translateX(-50%);
  display: flex;
  align-items: baseline;
  gap: .28rem;
  white-space: nowrap;
  color: rgba(255, 226, 174, .74);
  font-size: .48rem;
  letter-spacing: .14em;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}

.sf-touch__stick > span small {
  color: rgba(255, 226, 174, .38);
  font-size: .36rem;
  letter-spacing: .06em;
}

.sf-touch__stick.is-held .sf-touch__stick-knob {
  border-color: #ffe5a5;
  box-shadow: 0 0 0 3px rgba(216, 164, 65, .24), 0 0 1.2rem rgba(216, 164, 65, .42);
}

.sf-touch__stick.is-sprinting::before {
  border-color: rgba(255, 199, 80, .9);
  box-shadow: inset 0 0 1.6rem rgba(255, 151, 45, .18), 0 0 1rem rgba(255, 164, 51, .22);
}

.sf-touch__stack,
.sf-touch__strat {
  position: absolute;
  z-index: 5;
  right: max(.75rem, env(safe-area-inset-right));
  bottom: max(.75rem, env(safe-area-inset-bottom));
  width: clamp(9.6rem, 42vw, 10.75rem);
  pointer-events: none;
}

.sf-touch__stack {
  display: flex;
  flex-direction: column;
  gap: .42rem;
}

.sf-touch__utility,
.sf-touch__mobility,
.sf-touch__actions {
  display: grid;
  gap: .32rem;
  pointer-events: none;
}

.sf-touch__utility { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-touch__mobility { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-touch__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sf-touch__button {
  position: relative;
  min-width: 0;
  min-height: 3rem;
  margin: 0;
  padding: .2rem .08rem .18rem;
  display: grid;
  grid-template-rows: 1fr auto auto;
  place-items: center;
  gap: .05rem;
  overflow: hidden;
  border: 1px solid rgba(222, 172, 77, .42);
  border-radius: .25rem;
  background:
    linear-gradient(150deg, rgba(122, 71, 30, .28), transparent 42%),
    rgba(12, 8, 10, .67);
  box-shadow: inset 0 0 0 1px rgba(255, 235, 190, .035), 0 .35rem .8rem rgba(0, 0, 0, .3);
  color: #f4d9a2;
  font: inherit;
  line-height: 1;
  text-shadow: 0 1px 3px #000;
  backdrop-filter: blur(4px);
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  transition: transform .08s ease, border-color .1s ease, background-color .1s ease;
}

.sf-touch__button::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 226, 168, .06);
  clip-path: polygon(0 0, 38% 0, 0 38%);
  pointer-events: none;
}

.sf-touch__button b {
  align-self: end;
  color: #ffd982;
  font-size: .95rem;
  font-weight: 500;
}

.sf-touch__button span {
  max-width: 100%;
  overflow: hidden;
  color: rgba(255, 235, 198, .88);
  font-size: .45rem;
  letter-spacing: .04em;
  text-overflow: clip;
  white-space: nowrap;
}

.sf-touch__button small {
  color: rgba(255, 225, 176, .42);
  font-size: .36rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.sf-touch__actions .sf-touch__button { min-height: 3.55rem; }

.sf-touch__button--fire {
  border-color: rgba(220, 88, 70, .72);
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 105, 61, .18), transparent 48%),
    rgba(74, 17, 24, .82);
}

.sf-touch__button--fire b { color: #ff9a68; }

.sf-touch__button.is-held,
.sf-touch__button.is-tapped {
  transform: scale(.94);
  border-color: rgba(255, 225, 151, .98);
  background-color: rgba(150, 91, 32, .68);
  box-shadow: inset 0 0 1rem rgba(255, 196, 85, .2), 0 0 1rem rgba(216, 164, 65, .3);
}

.sf-touch__button:focus-visible {
  outline: 2px solid #ffe09a;
  outline-offset: 2px;
}

.sf-touch__button.is-tapped { animation: sf-touch-tap .2s ease-out 1; }

.sf-touch__button[data-state="active"] {
  border-color: rgba(255, 222, 139, .9);
  box-shadow: inset 0 0 1rem rgba(255, 188, 64, .18), 0 0 .8rem rgba(255, 181, 53, .2);
}

.sf-touch__button[data-state="timed"] {
  border-color: #ffe6a2;
  color: #fff0bf;
  box-shadow: inset 0 0 1rem rgba(255, 205, 92, .28), 0 0 1rem rgba(255, 198, 72, .42);
}

.sf-touch__button[data-state="low"] {
  border-color: rgba(155, 75, 60, .5);
  color: rgba(228, 171, 143, .52);
  filter: saturate(.65);
}

#sf-touch[data-dead="true"] :is(.sf-touch__button, .sf-touch__stick) {
  opacity: .42;
}

@keyframes sf-touch-tap {
  0% { filter: brightness(1.7); }
  100% { filter: brightness(1); }
}

.sf-touch__strat {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto repeat(3, 3rem);
  gap: .3rem;
  padding: .46rem;
  border: 1px solid rgba(216, 164, 65, .28);
  border-radius: .35rem;
  background: rgba(8, 5, 7, .58);
  box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .42);
  backdrop-filter: blur(5px);
  pointer-events: auto;
}

.sf-touch__strat-title {
  grid-column: 1 / -1;
  color: rgba(255, 221, 157, .68);
  font-size: .48rem;
  letter-spacing: .16em;
  text-align: center;
}

.sf-touch__dir { min-height: 3rem; }
.sf-touch__dir small { display: none; }
.sf-touch__dir--up { grid-column: 2; grid-row: 2; }
.sf-touch__dir--left { grid-column: 1; grid-row: 3; }
.sf-touch__dir--cancel { grid-column: 2; grid-row: 3; border-color: rgba(164, 73, 75, .62); }
.sf-touch__dir--right { grid-column: 3; grid-row: 3; }
.sf-touch__dir--down { grid-column: 2; grid-row: 4; }

#sf-touch.is-strat-entry .sf-touch__stack { display: none; }
#sf-touch.is-strat-entry .sf-touch__strat { display: grid; }
#sf-touch.is-strat-entry .sf-touch__stick {
  opacity: 0;
  pointer-events: none;
}

/* The embedded 16:9 surface is only 219px tall on a 390px phone,
   which cannot hold a playable two-thumb controller. Touch mode gets
   a portrait-capable viewport height while desktop keeps 16:9. */
.saintfall-page .rb-standalone-surface.sf-touch-surface {
  height: clamp(330px, 72svh, 680px);
  min-height: 330px;
  max-height: 680px;
  aspect-ratio: auto;
}

.saintfall-page .rb-standalone-surface.sf-touch-surface .sf-stage {
  height: 100%;
  aspect-ratio: auto;
}

/* Apply the mobile stage geometry before the game finishes loading,
   too. Waiting for touch.js to boot would show a tiny 16:9 loader and
   then jump to the playable height several seconds later. */
@media (hover: none) and (pointer: coarse) {
  .saintfall-page .rb-standalone-surface {
    height: clamp(330px, 72svh, 680px);
    min-height: 330px;
    max-height: 680px;
    aspect-ratio: auto;
  }

  .saintfall-page .rb-standalone-surface .sf-stage {
    height: 100%;
    aspect-ratio: auto;
  }
}

.sf-stage.sf-touch-enabled.is-maxed {
  width: 100dvw;
  height: 100dvh;
  min-height: 100dvh;
}

/* Keep essential telemetry in the upper-left readability band and
   remove desktop-only prose from the thumb zones. */
.sf-stage.sf-touch-enabled :is(.sf-hud__hint, .sf-hud__readout, .sf-hud__strat) {
  display: none;
}

.sf-stage.sf-touch-enabled .sf-fs-btn {
  top: max(.5rem, env(safe-area-inset-top));
  right: max(.5rem, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
}

.saintfall-page .sf-touch-surface > .rb-escape-btn {
  left: max(.5rem, env(safe-area-inset-left));
  top: max(.5rem, env(safe-area-inset-top));
  width: 44px;
  height: 44px;
  z-index: 41;
}

.sf-stage.sf-touch-enabled .sf-hud__compass {
  top: max(1rem, env(safe-area-inset-top));
  width: min(21rem, 58%);
}

.sf-stage.sf-touch-enabled .sf-hud__objective {
  top: max(3.45rem, calc(env(safe-area-inset-top) + 3.45rem));
  width: min(22rem, 56%);
}

.sf-stage.sf-touch-enabled .sf-hud__minimap {
  top: max(5.15rem, calc(env(safe-area-inset-top) + 5.15rem));
  right: max(.55rem, env(safe-area-inset-right));
  width: min(8rem, 33vw);
  padding: .32rem .34rem .38rem;
  background: rgba(7, 5, 7, .6);
}
.sf-stage.sf-touch-enabled .sf-minimap__head { margin-bottom: .15rem; font-size: .42rem; }
.sf-stage.sf-touch-enabled .sf-minimap__head b { font-size: .41rem; }
.sf-stage.sf-touch-enabled .sf-minimap__event { margin-top: .2rem; padding-top: .22rem; }
.sf-stage.sf-touch-enabled .sf-minimap__event > div { font-size: .42rem; }
.sf-stage.sf-touch-enabled .sf-minimap__event > div b { font-size: .41rem; }
.sf-stage.sf-touch-enabled .sf-minimap__event small { font-size: .36rem; }
.sf-stage.sf-touch-enabled .sf-hud__breach-alert {
  top: 25%;
  min-width: min(23rem, 84vw);
  padding: .4rem .8rem .45rem;
}
.sf-stage.sf-touch-enabled .sf-hud__breach-alert small { font-size: .46rem; }
.sf-stage.sf-touch-enabled .sf-hud__breach-alert strong { font-size: clamp(.78rem, 3.4vw, 1.05rem); }

.sf-stage.sf-touch-enabled .sf-hud__objlabel {
  overflow: hidden;
  font-size: .59rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-stage.sf-touch-enabled .sf-hud__vitals {
  left: max(.7rem, env(safe-area-inset-left));
  top: max(5.75rem, calc(env(safe-area-inset-top) + 5.75rem));
  bottom: auto;
  width: min(12.2rem, 47%);
  padding: .38rem .46rem .42rem;
  border-left: 1px solid rgba(216, 164, 65, .25);
  background: linear-gradient(90deg, rgba(8, 5, 7, .62), rgba(8, 5, 7, .08));
}

.sf-stage.sf-touch-enabled .sf-hud__hpwrap { height: 6px; }
.sf-stage.sf-touch-enabled .sf-hud__hplabel { margin-bottom: .12rem; font-size: .45rem; }
.sf-stage.sf-touch-enabled .sf-hud__hplabel b { font-size: .47rem; }
.sf-stage.sf-touch-enabled .sf-hud__jet { margin-top: .28rem; }
.sf-stage.sf-touch-enabled .sf-hud__jetlabel { margin-bottom: .1rem; font-size: .48rem; }
.sf-stage.sf-touch-enabled .sf-hud__jetlabel b { font-size: .5rem; }
.sf-stage.sf-touch-enabled :is(.sf-hud__boost, .sf-hud__shield) {
  margin-top: .18rem;
  font-size: .44rem;
}
.sf-stage.sf-touch-enabled :is(.sf-hud__boost, .sf-hud__shield) span b { font-size: .54rem; }
.sf-stage.sf-touch-enabled :is(.sf-hud__boost, .sf-hud__shield) strong { font-size: .46rem; }
.sf-stage.sf-touch-enabled .sf-hud__vitalrow {
  gap: .35rem;
  margin-top: .24rem;
  font-size: .54rem;
}
.sf-stage.sf-touch-enabled .sf-hud__vitalrow b { font-size: .72rem; }
.sf-stage.sf-touch-enabled .sf-heat { gap: .22rem; }
.sf-stage.sf-touch-enabled .sf-heat__track { width: min(3.4rem, 13vw); height: .3rem; }
.sf-stage.sf-touch-enabled .sf-heat u { min-width: 2.6rem; }

.sf-stage.sf-touch-strat :is(.sf-hud__objective, .sf-hud__vitals) { display: none; }
.sf-stage.sf-touch-strat .sf-hud__code {
  top: max(4.2rem, calc(env(safe-area-inset-top) + 4.2rem));
  bottom: auto;
}

@media (orientation: landscape) and (max-height: 430px) {
  .sf-touch__stick {
    left: max(.45rem, env(safe-area-inset-left));
    bottom: max(.4rem, env(safe-area-inset-bottom));
    width: 7rem;
  }

  .sf-touch__stack,
  .sf-touch__strat {
    right: max(.45rem, env(safe-area-inset-right));
    bottom: max(.4rem, env(safe-area-inset-bottom));
    width: 10rem;
  }

  .sf-touch__stack { gap: .28rem; }
  .sf-touch__utility,
  .sf-touch__mobility,
  .sf-touch__actions { gap: .24rem; }
  .sf-touch__button { min-height: 2.75rem; }
  .sf-touch__actions .sf-touch__button { min-height: 3.05rem; }
  .sf-touch__strat {
    grid-template-rows: auto repeat(3, 2.75rem);
    gap: .24rem;
  }
  .sf-touch__dir { min-height: 2.75rem; }
  .sf-touch__look span { margin-bottom: 3.8rem; }
  .sf-stage.sf-touch-enabled .sf-hud__vitals { top: 5.15rem; }
  .sf-stage.sf-touch-enabled .sf-hud__minimap {
    top: max(.45rem, env(safe-area-inset-top));
    right: max(3.75rem, calc(env(safe-area-inset-right) + 3.75rem));
    width: 5.15rem;
    padding: .24rem .26rem .28rem;
  }
  .sf-stage.sf-touch-enabled .sf-minimap__event small { display: none; }
  .sf-stage.sf-touch-enabled .sf-hud__breach-alert { top: 27%; }
}

@media (max-width: 360px) {
  .sf-touch__stick { width: 7rem; }
  .sf-touch__stack,
  .sf-touch__strat { width: 9.45rem; }
  .sf-touch__button span { font-size: .41rem; }
  .sf-stage.sf-touch-enabled .sf-hud__vitals { width: 46%; }
}

@media (max-width: 720px) {
  .sf-hud__vitals { width: 48vw; left: 1rem; bottom: 1rem; }
  .sf-hud__strat { right: 1rem; bottom: 1rem; }
  .sf-hud__stratitem { min-width: 8.4rem; font-size: .58rem; }
  .sf-hud__banner { font-size: 1.05rem; }
  .sf-hud__minimap { width: 8.2rem; top: 4rem; right: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-hud__jettrack i { transition: none; }
  .sf-damage-number { will-change: auto; }
  .sf-touch__look span,
  .sf-touch__button { transition: none; }
  .sf-touch__button.is-tapped { animation: none; }
  .sf-hud__breach-alert { transition: none; }
  .sf-minimap__event > i em { transition: none; }
}

/* ----------------------- orbital drop cinematic -----------------------

   This layer deliberately looks like instrumentation bolted into a
   reliquary craft, not a generic video-player overlay. The rendered
   scene remains the hero; the UI lives in the quiet corners and opens
   the centre for the pod, planet and hatch compositions. */

#sf-intro {
  --sf-intro-heat: .04;
  --sf-intro-shake: 0;
  --sf-intro-blend: 0;
  position: absolute;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  color: #f2e5c7;
  font-family: "Share Tech Mono", ui-monospace, Menlo, monospace;
  isolation: isolate;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .42s ease, visibility 0s linear .42s;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .95);
}

#sf-intro.is-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* The entry menu is revealed underneath the still-opaque loader before
   that loader begins its crossfade. Make that covered reveal immediate:
   otherwise both layers animate from transparent and the orbital render
   can show through the gap between them. */
.sf-stage:has(> #sf-boot:not(.is-hidden)) > #sf-intro.is-ready {
  transition: none;
}

#sf-intro.is-finished {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .8s cubic-bezier(.25, .7, .2, 1), visibility 0s linear .8s;
}

#sf-intro.is-finished * { pointer-events: none !important; }
#sf-intro.is-finished .sf-intro__gate,
#sf-intro.is-finished .sf-intro__skip {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}

#sf-intro::before,
#sf-intro::after {
  content: "";
  position: absolute;
  inset: 1.25rem;
  z-index: 5;
  border: 1px solid rgba(230, 185, 100, .12);
  clip-path: polygon(0 0, 6rem 0, 6rem 1px, 1px 1px, 1px 5rem, 0 5rem,
    0 100%, 1px 100%, 1px calc(100% - 5rem), 6rem calc(100% - 5rem),
    6rem 100%, 100% 100%, 100% calc(100% - 1px), calc(100% - 6rem) calc(100% - 1px),
    calc(100% - 6rem) calc(100% - 5rem), calc(100% - 1px) calc(100% - 5rem),
    calc(100% - 1px) 5rem, calc(100% - 6rem) 5rem, calc(100% - 6rem) 1px,
    100% 1px, 100% 0);
  pointer-events: none;
}

#sf-intro::after {
  inset: 0;
  border: 0;
  clip-path: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 30%, rgba(3, 1, 3, .16) 72%, rgba(3, 1, 3, .68) 112%),
    linear-gradient(90deg, rgba(4, 2, 4, .42), transparent 24%, transparent 76%, rgba(4, 2, 4, .42));
  z-index: 1;
}

.sf-stage.sf-intro-active #sf-canvas {
  cursor: default;
  filter: saturate(calc(1 + var(--sf-intro-heat) * .22));
  pointer-events: none;
}

/* The shared menu is a sibling of the stage. Keep its trigger and dialog
   above the cinematic, including CSS-max and native-fullscreen modes. */
.saintfall-page .rb-standalone-surface:has(.sf-stage.sf-intro-active) > .rb-escape-btn {
  z-index: 55;
}
.saintfall-page .rb-standalone-surface:has(.sf-stage.is-maxed) > .rb-escape-btn {
  z-index: 2147483645;
}
.saintfall-page .rb-standalone-surface > .rb-escape-menu {
  z-index: 2147483646;
}

.sf-intro__letterbox {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 12;
  height: 6.2%;
  background: #030203;
  box-shadow: 0 0 2.4rem rgba(0, 0, 0, .9);
  transform: scaleY(0);
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

.sf-intro__letterbox--top { top: 0; transform-origin: top; }
.sf-intro__letterbox--bottom { bottom: 0; transform-origin: bottom; }
/* Retracted by the CAMERA BLEND, not by the end of the clock. The
   last two seconds are already the gameplay camera easing into
   place; bars that stay until the cinematic formally ends would
   snap away on a frame where nothing else changes, which is the one
   thing the whole handoff is built to avoid. */
#sf-intro.is-running .sf-intro__letterbox {
  transform: scaleY(calc(1 - var(--sf-intro-blend, 0)));
  transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

.sf-intro__scan,
.sf-intro__heat,
.sf-intro__flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.sf-intro__scan {
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(246, 211, 133, .022) 4px),
    linear-gradient(105deg, transparent 0 43%, rgba(255, 223, 150, .025) 49%, transparent 55%);
  mix-blend-mode: screen;
  opacity: .46;
  animation: sf-intro-scan 6.8s linear infinite;
}

.sf-intro__heat {
  z-index: 2;
  opacity: calc(var(--sf-intro-heat) * .38);
  background:
    radial-gradient(ellipse at 50% 105%, rgba(255, 41, 6, .72), transparent 52%),
    linear-gradient(90deg, rgba(255, 54, 9, .52), transparent 13%, transparent 87%, rgba(255, 88, 15, .48));
  mix-blend-mode: screen;
  transition: opacity .12s linear;
}

.sf-intro__flash { opacity: 0; background: #ffe8bf; mix-blend-mode: screen; }
#sf-intro[data-phase="entry"] .sf-intro__flash {
  animation: sf-intro-entry-flash .65s ease-out 1;
}
#sf-intro[data-phase="impact"] .sf-intro__flash {
  animation: sf-intro-impact-flash .46s cubic-bezier(.1, .7, .3, 1) 1;
}
#sf-intro[data-phase="hatch"] .sf-intro__flash,
#sf-intro[data-phase="egress"] .sf-intro__flash {
  background:
    radial-gradient(circle at 50% 62%, rgba(255, 244, 214, .30), transparent 46%);
  opacity: calc(.55 - var(--sf-intro-blend, 0) * .55);
  animation: none;
}
#sf-intro[data-shot="handoff"] .sf-intro__flash {
  background: #ffdeb0;
  animation: sf-intro-handoff-flash .72s cubic-bezier(.12, .7, .2, 1) 1;
}

.sf-intro__telemetry {
  position: absolute;
  left: max(2.25rem, calc(env(safe-area-inset-left) + 1.4rem));
  top: max(2rem, calc(env(safe-area-inset-top) + 1.35rem));
  z-index: 20;
  width: min(31rem, 48vw);
  /* Readouts, not controls. Both this block and the chapter card sit
     ABOVE the entry menu (z 20 over 10) while invisible, and on a
     phone the chapter card lies exactly over the bottom-anchored menu
     buttons - an invisible element that swallowed every tap on
     OPTIONS. Nothing in either is interactive. */
  pointer-events: none;
  opacity: 0;
  transform: translateY(-.65rem);
  transition: opacity .5s ease .45s, transform .5s ease .45s;
}

#sf-intro.is-running .sf-intro__telemetry {
  opacity: calc(1 - var(--sf-intro-blend, 0));
  transform: none;
}
/* Instrumentation belongs to the descent. Once the trooper is out
   and the camera is becoming the chase rig, the readouts are the
   only thing left on screen that says "cutscene". */
#sf-intro[data-phase="egress"] .sf-intro__telemetry { opacity: .34; }
.sf-intro__eyebrow,
.sf-intro__numbers {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: clamp(.48rem, .78vw, .66rem);
  line-height: 1.2;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.sf-intro__eyebrow { color: rgba(232, 205, 153, .57); }
.sf-intro__eyebrow b {
  color: #8ed9b9;
  font-weight: 400;
  letter-spacing: .08em;
  text-align: right;
}
.sf-intro__rule {
  height: 1px;
  margin: .55rem 0 .5rem;
  background: linear-gradient(90deg, #d39b3d, rgba(211, 155, 61, .22) 68%, transparent);
  box-shadow: 0 0 .8rem rgba(232, 156, 49, .17);
}
.sf-intro__numbers { justify-content: flex-start; color: rgba(225, 207, 171, .48); }
.sf-intro__numbers span { min-width: 8.3rem; }
.sf-intro__numbers b { display: block; margin-top: .2rem; color: #f3ddb2; font-size: 1.08em; font-weight: 400; letter-spacing: .08em; }
.sf-intro__heatbar {
  width: 100%;
  height: 2px;
  margin-top: .55rem;
  overflow: hidden;
  background: rgba(244, 215, 163, .11);
}
.sf-intro__heatbar i {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(.04);
  transform-origin: left;
  background: linear-gradient(90deg, #d09b42 0 42%, #ff6a24 72%, #fff1c5 100%);
  box-shadow: 0 0 1rem rgba(255, 93, 23, .85);
  transition: transform .12s linear;
}

.sf-intro__chapter {
  position: absolute;
  left: max(2.25rem, calc(env(safe-area-inset-left) + 1.4rem));
  bottom: max(2.7rem, calc(env(safe-area-inset-bottom) + 2.2rem));
  z-index: 20;
  display: flex;
  flex-direction: column;
  width: min(38rem, 60vw);
  pointer-events: none;   /* see .sf-intro__telemetry */
  opacity: 0;
  transform: translateY(.8rem);
  transition: opacity .56s ease .55s, transform .56s ease .55s;
}
#sf-intro.is-running .sf-intro__chapter {
  opacity: calc(1 - var(--sf-intro-blend, 0));
  transform: none;
}
.sf-intro__chapter small {
  color: #e5ad52;
  font-size: clamp(.5rem, .82vw, .7rem);
  letter-spacing: .28em;
}
.sf-intro__chapter strong {
  margin: .16rem 0 .06rem;
  color: #f4e2bf;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.55rem, 3.1vw, 3.2rem);
  font-weight: 600;
  letter-spacing: .17em;
  line-height: .98;
  text-shadow: 0 .18rem 1.1rem rgba(0, 0, 0, .95), 0 0 2.2rem rgba(213, 143, 43, .12);
}
.sf-intro__chapter span {
  color: rgba(235, 219, 188, .63);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(.78rem, 1.4vw, 1.15rem);
  font-style: italic;
  letter-spacing: .05em;
}

.sf-intro__gate {
  position: absolute;
  z-index: 30;
  pointer-events: auto;
  transition: opacity .45s ease, transform .65s cubic-bezier(.2, .8, .2, 1);
}
.sf-intro__gate::before,
.sf-intro__gate::after {
  display: none !important;
}
#sf-intro.is-running .sf-intro__gate {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-48%) scale(.985);
  transition-delay: 0s, 0s, .5s;
  pointer-events: none;
}

.sf-intro__crest {
  position: relative;
  width: 3.7rem;
  height: 3.7rem;
  margin: 0 auto .75rem;
  border: 1px solid rgba(230, 185, 98, .34);
  transform: rotate(45deg);
}
.sf-intro__crest i,
.sf-intro__crest b,
.sf-intro__crest em { position: absolute; display: block; background: #d8a441; box-shadow: 0 0 .8rem rgba(216, 164, 65, .28); }
.sf-intro__crest i { left: 50%; top: .45rem; bottom: .45rem; width: 2px; transform: translateX(-50%); }
.sf-intro__crest b { left: .45rem; right: .45rem; top: 50%; height: 2px; transform: translateY(-50%); }
.sf-intro__crest em { inset: 1.32rem; border-radius: 50%; background: #f5d88e; }

.sf-intro__skip {
  position: absolute;
  right: max(2rem, calc(env(safe-area-inset-right) + 1.3rem));
  top: max(2rem, calc(env(safe-area-inset-top) + 1.3rem));
  z-index: 30;
  min-height: 2.75rem;
  padding: .5rem .8rem;
  border: 1px solid rgba(230, 197, 137, .2);
  border-radius: 0;
  background: rgba(7, 4, 6, .48);
  color: rgba(241, 224, 190, .58);
  font: inherit;
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(5px);
  opacity: 0;
  transform: translateY(-.5rem);
  transition: opacity .35s ease 1s, transform .35s ease 1s, border-color .15s ease, color .15s ease;
  pointer-events: none;
  cursor: pointer;
}
.sf-intro__skip span { margin-left: .4rem; color: #d8a441; }
#sf-intro.is-running .sf-intro__skip { opacity: 1; transform: none; pointer-events: auto; }
.sf-intro__skip:hover,
.sf-intro__skip:focus-visible { border-color: rgba(245, 204, 122, .68); color: #f3ddb2; outline: none; }

.sf-intro__pause {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 40;
  padding: .7rem 1.2rem;
  border: 1px solid rgba(239, 190, 92, .5);
  background: rgba(9, 5, 7, .88);
  color: #f2cf87;
  font-size: .7rem;
  letter-spacing: .28em;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .2s ease;
  pointer-events: none;
}
#sf-intro.is-paused .sf-intro__pause { opacity: 1; }

@keyframes sf-intro-scan {
  from { transform: translateY(-8%); }
  to { transform: translateY(8%); }
}
@keyframes sf-intro-entry-flash {
  0% { opacity: .58; }
  18% { opacity: .12; }
  100% { opacity: 0; }
}
@keyframes sf-intro-impact-flash {
  0% { opacity: .92; }
  12% { opacity: .88; }
  42% { opacity: .13; }
  100% { opacity: 0; }
}
@keyframes sf-intro-handoff-flash {
  0% { opacity: .76; }
  22% { opacity: .28; }
  100% { opacity: 0; }
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  #sf-intro::before { inset: .65rem; }
  .sf-intro__letterbox { height: 4.2%; }
  .sf-intro__telemetry {
    left: max(1rem, calc(env(safe-area-inset-left) + .65rem));
    top: max(1rem, calc(env(safe-area-inset-top) + .65rem));
    width: min(23rem, calc(100% - 6rem));
  }
  .sf-intro__numbers { gap: .5rem; }
  .sf-intro__numbers span { min-width: 0; flex: 1; }
  .sf-intro__chapter {
    left: max(1rem, calc(env(safe-area-inset-left) + .65rem));
    bottom: max(1.4rem, calc(env(safe-area-inset-bottom) + 1rem));
    width: min(29rem, calc(100% - 2rem));
  }
  .sf-intro__chapter strong { font-size: clamp(1.3rem, 6vw, 2.25rem); }
  .sf-intro__gate { width: min(31rem, calc(100% - 2rem)); }
  .sf-intro__gate button { min-height: 3.6rem; }
  .sf-intro__skip {
    right: max(.8rem, calc(env(safe-area-inset-right) + .55rem));
    top: max(.8rem, calc(env(safe-area-inset-top) + .55rem));
    min-width: 3rem;
    min-height: 3rem;
    padding: .52rem .65rem;
  }
}

@media (orientation: portrait) and (max-width: 540px) {
  .sf-intro__telemetry { width: calc(100% - 5.2rem); }
  .sf-intro__eyebrow { letter-spacing: .1em; }
  .sf-intro__numbers { flex-wrap: wrap; }
  .sf-intro__numbers span { flex-basis: calc(33.333% - .4rem); font-size: .43rem; }
  .sf-intro__chapter { bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1.25rem)); }
  .sf-intro__gate { padding: 1.45rem 1.1rem 1.15rem; }
  .sf-intro__crest { width: 3.1rem; height: 3.1rem; margin-bottom: .65rem; }
  .sf-intro__crest em { inset: 1.08rem; }
  .sf-intro__gate h2 { font-size: clamp(1.65rem, 9vw, 2.55rem); }
}

@media (orientation: landscape) and (max-height: 430px) {
  .sf-intro__letterbox { height: 3.5%; }
  .sf-intro__telemetry { top: max(.65rem, env(safe-area-inset-top)); width: min(25rem, 52vw); }
  .sf-intro__rule { margin: .3rem 0; }
  .sf-intro__heatbar { margin-top: .3rem; }
  .sf-intro__chapter { bottom: max(.7rem, env(safe-area-inset-bottom)); }
  .sf-intro__chapter strong { font-size: clamp(1.2rem, 4.5vw, 1.9rem); }
  .sf-intro__gate {
    width: min(31rem, calc(100% - 8rem));
    padding: .8rem 1.25rem .75rem;
  }
  .sf-intro__crest { width: 2.35rem; height: 2.35rem; margin-bottom: .42rem; }
  .sf-intro__crest em { inset: .78rem; }
  .sf-intro__gate h2 { margin: .25rem 0 .18rem; font-size: 1.65rem; }
  .sf-intro__gate p { margin-bottom: .55rem; font-size: .78rem; }
  .sf-intro__gate button { min-height: 2.85rem; padding: .5rem .8rem; }
  .sf-intro__sound { display: none; }
  .sf-intro__skip { top: max(.55rem, env(safe-area-inset-top)); }
}

@media (prefers-reduced-motion: reduce) {
  #sf-intro,
  #sf-intro *,
  #sf-intro::before,
  #sf-intro::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .sf-intro__scan { display: none; }
  .sf-intro__flash { display: none; }
  .sf-intro__heat { opacity: calc(var(--sf-intro-heat) * .16); }
  .sf-boot__ring { animation: none; }
}

/* ======================================================================
   PREMIUM HUD + TOUCH OVERHAUL · RELIQUARY COMMAND LITURGY

   This final cascade layer deliberately leaves the original production
   rules intact. Saintfall's interface now reads as engraved field hardware:
   smoked black iron, bone telemetry, brass hierarchy and restrained oxblood
   alarms. All positioning below is edge-safe at the four release viewports.
   ====================================================================== */

.sf-stage {
  --sf-ui-iron: #070506;
  --sf-ui-iron-2: #110c0e;
  --sf-ui-bone: #f2e5c7;
  --sf-ui-bone-dim: rgba(242, 229, 199, .67);
  --sf-ui-brass: #d8a441;
  --sf-ui-gold: #f5d88e;
  --sf-ui-oxblood: #8a2230;
  --sf-ui-threat: #ef633e;
  --sf-ui-verdigris: #76cda7;
  --sf-ui-orbital: #78d4f6;
  --sf-ui-edge-x: max(1.4rem, calc(env(safe-area-inset-left) + 1rem));
  --sf-ui-edge-y: max(1.25rem, calc(env(safe-area-inset-top) + .8rem));
}

#sf-hud {
  color: var(--sf-ui-bone);
  font-variant-numeric: tabular-nums lining-nums;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* Shared instrument construction. The stepped highlights and corner cuts
   create one family without surrounding every value with a heavy box. */
.sf-hud__minimap,
.sf-hud__vitals,
.sf-hud__command {
  box-sizing: border-box;
  border: 1px solid rgba(216, 164, 65, .34);
  border-radius: 2px;
  background:
    linear-gradient(135deg, rgba(245, 216, 142, .08), transparent 24%),
    linear-gradient(180deg, rgba(17, 12, 14, .9), rgba(7, 5, 6, .78));
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 211, .035),
    inset 3px 0 0 rgba(138, 34, 48, .36),
    0 .8rem 2.4rem rgba(0, 0, 0, .38);
  backdrop-filter: blur(7px) saturate(.72);
  -webkit-backdrop-filter: blur(7px) saturate(.72);
}

/* ------------------------------ top rail ----------------------------- */

.sf-hud__compass {
  left: 50%;
  top: var(--sf-ui-edge-y);
  width: min(29rem, 34vw);
  height: 3.1rem;
  transform: translateX(-50%);
  overflow: hidden;
  border-top: 1px solid rgba(216, 164, 65, .19);
  mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}

.sf-hud__compass-label {
  position: absolute;
  left: 50%;
  top: -.05rem;
  z-index: 2;
  transform: translateX(-50%);
  padding: 0 .55rem;
  background: rgba(7, 5, 6, .72);
  color: rgba(245, 216, 142, .52);
  font-size: 11px;
  letter-spacing: .22em;
  line-height: 1.2;
}

.sf-hud__strip {
  inset: 1.05rem 0 0;
  height: 2rem;
}

.sf-hud__tick,
.sf-hud__poi {
  top: .05rem;
  min-width: 2.2rem;
  color: var(--sf-ui-gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
}

.sf-hud__poi {
  top: 1.1rem;
  color: rgba(242, 229, 199, .71);
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: .08em;
}

.sf-hud__needle {
  top: .82rem;
  width: 2px;
  height: 1.65rem;
  background: linear-gradient(180deg, #fff0b4 0 28%, var(--sf-ui-brass) 29% 62%, transparent 100%);
  box-shadow: 0 0 .5rem rgba(245, 216, 142, .38);
}

.sf-hud__objective {
  left: max(4.75rem, calc(env(safe-area-inset-left) + 1.25rem));
  top: var(--sf-ui-edge-y);
  width: min(20.5rem, 25vw);
  transform: none;
  text-align: left;
}

.sf-hud__objhead {
  display: grid;
  gap: .28rem;
  padding-left: .65rem;
  border-left: 2px solid var(--sf-ui-brass);
}

.sf-hud__objhead > span {
  color: rgba(216, 164, 65, .7);
  font-size: 11px;
  letter-spacing: .2em;
  line-height: 1.1;
  text-transform: uppercase;
}

.sf-hud__objlabel {
  overflow: hidden;
  color: var(--sf-ui-bone);
  font: 650 13px/1.32 "Share Tech Mono", ui-monospace, monospace;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-hud__objbar {
  width: 100%;
  height: 3px;
  margin: .48rem 0 0;
  background: rgba(242, 229, 199, .13);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .76);
}

.sf-hud__objbar i {
  background: linear-gradient(90deg, var(--sf-ui-oxblood), var(--sf-ui-brass));
  box-shadow: 0 0 .55rem rgba(216, 164, 65, .36);
}

.sf-hud__objective[data-event="1"] .sf-hud__objhead {
  border-left-color: var(--sf-ui-threat);
}

.sf-hud__objective[data-event="1"] .sf-hud__objbar i {
  background: linear-gradient(90deg, #8e1d27, var(--sf-ui-threat));
}

/* District cards are intentionally not persistent HUD chrome. They occupy
   the upper quiet field only during their brief authored reveal. */
.sf-hud__district {
  top: 12.5%;
  max-width: min(42rem, 58vw);
  filter: drop-shadow(0 .7rem 1.5rem rgba(0, 0, 0, .72));
}

.sf-hud__eyebrow {
  margin-bottom: .48rem;
  color: rgba(245, 216, 142, .69);
  font-size: 11px;
  letter-spacing: .28em;
}

/* ---------------------------- tactical map --------------------------- */

.sf-hud__minimap {
  top: 3.75rem;
  right: max(1.4rem, calc(env(safe-area-inset-right) + 1rem));
  width: 11.5rem;
  padding: .58rem .58rem .64rem;
}

.sf-hud__minimap::before,
.sf-hud__minimap::after {
  width: 1.2rem;
  height: 1.2rem;
  border-color: rgba(245, 216, 142, .72);
}

.sf-minimap__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: .45rem;
  min-height: 1.8rem;
  margin-bottom: .38rem;
  color: var(--sf-ui-bone-dim);
  font-size: 11px;
  letter-spacing: .08em;
  line-height: 1.05;
}

.sf-minimap__head > span {
  display: grid;
  min-width: 0;
  gap: .18rem;
}

.sf-minimap__head small {
  overflow: hidden;
  color: rgba(242, 229, 199, .54);
  font-size: 10px;
  letter-spacing: .11em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-minimap__head strong {
  color: var(--sf-ui-gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
}

.sf-minimap__head b {
  flex: none;
  color: var(--sf-ui-gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}

#sf-map-canvas {
  width: 100%;
  border: 1px solid rgba(216, 164, 65, .12);
  background: radial-gradient(circle, rgba(46, 29, 22, .14), rgba(4, 4, 5, .3));
  box-shadow: inset 0 0 1rem rgba(0, 0, 0, .3);
  filter: drop-shadow(0 0 .55rem rgba(216, 164, 65, .15));
}

.sf-minimap__event {
  margin-top: .5rem;
  padding-top: .46rem;
  border-top-color: rgba(245, 216, 142, .2);
}

.sf-minimap__event > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .5rem;
  color: var(--sf-ui-bone);
  font-size: 11px;
  line-height: 1.15;
}

.sf-minimap__event > div span.sf-minimap__event-title {
  display: grid;
  min-width: 0;
  gap: .14rem;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.sf-minimap__event-title small {
  color: rgba(242, 229, 199, .5);
  font-size: 10px;
  letter-spacing: .08em;
  line-height: 1.1;
  white-space: normal;
}

.sf-minimap__event-title strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--sf-ui-bone);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .045em;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sf-minimap__event > div b {
  color: var(--sf-ui-brass);
  font-size: 11px;
  letter-spacing: .035em;
}

.sf-minimap__event > small {
  display: block;
  overflow: hidden;
  margin-top: .25rem;
  color: rgba(242, 229, 199, .51);
  font-size: 10px;
  letter-spacing: .055em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-minimap__event > i {
  height: 3px;
  margin-top: .38rem;
  background: rgba(242, 229, 199, .13);
}

.sf-minimap__event > i em {
  background: linear-gradient(90deg, var(--sf-ui-oxblood), var(--sf-ui-brass));
}

.sf-hud__minimap[data-event="1"] {
  border-color: rgba(239, 99, 62, .64);
  box-shadow:
    inset 0 0 0 1px rgba(255, 118, 66, .06),
    inset 3px 0 0 rgba(138, 34, 48, .62),
    0 0 1.7rem rgba(151, 41, 22, .24);
}

/* -------------------------- survival cluster ------------------------- */

.sf-hud__vitals {
  left: max(4.75rem, calc(env(safe-area-inset-left) + 1.25rem));
  bottom: max(1.45rem, calc(env(safe-area-inset-bottom) + 1rem));
  width: min(19rem, 27vw);
  padding: .72rem .78rem .74rem .9rem;
}

.sf-hud__vitals::before {
  content: "RELIQUARY / LIFE SUPPORT";
  display: block;
  margin: -.1rem 0 .58rem;
  color: rgba(216, 164, 65, .66);
  font-size: 10px;
  letter-spacing: .13em;
  line-height: 1.2;
}

.sf-hud__hplabel,
.sf-hud__jetlabel {
  margin-bottom: .3rem;
  color: rgba(242, 229, 199, .72);
  font: 600 11px/1.2 "Share Tech Mono", ui-monospace, monospace;
  letter-spacing: .08em;
}

.sf-hud__hplabel b,
.sf-hud__jetlabel b {
  color: var(--sf-ui-bone);
  font-size: 12px;
  font-weight: 600;
}

.sf-hud__hpwrap {
  height: 8px;
  border-color: rgba(242, 229, 199, .34);
  background: rgba(0, 0, 0, .55);
}

.sf-hud__hp {
  background: linear-gradient(90deg, #417d61, var(--sf-ui-verdigris));
  box-shadow: 0 0 .55rem rgba(118, 205, 167, .23);
}

.sf-hud__hp[data-state="warn"] {
  background: linear-gradient(90deg, #8d5e21, #e0ad4a);
}

.sf-hud__hp[data-state="crit"] {
  background: linear-gradient(90deg, #6f1722, var(--sf-ui-threat));
}

.sf-hud__jet {
  margin-top: .64rem;
}

.sf-hud__jettrack {
  height: 6px;
}

.sf-hud__boost,
.sf-hud__shield {
  margin-top: .42rem;
  color: rgba(242, 229, 199, .67);
  font: 600 11px/1.2 "Share Tech Mono", ui-monospace, monospace;
  letter-spacing: .045em;
}

.sf-hud__boost span b,
.sf-hud__shield span b {
  display: inline-grid;
  min-width: 1.25rem;
  min-height: 1.25rem;
  margin-right: .2rem;
  place-items: center;
  border: 1px solid rgba(216, 164, 65, .38);
  color: var(--sf-ui-gold);
  font-size: 11px;
}

.sf-hud__boost strong,
.sf-hud__shield strong {
  color: rgba(242, 229, 199, .78);
  font-size: 11px;
}

.sf-hud__boost[data-state="ready"] strong,
.sf-hud__shield[data-state="ready"] strong {
  color: var(--sf-ui-verdigris);
}

.sf-hud__vitalrow {
  align-items: center;
  gap: .55rem;
  margin-top: .58rem;
  color: rgba(242, 229, 199, .82);
  font: 600 11px/1.2 "Share Tech Mono", ui-monospace, monospace;
  letter-spacing: .035em;
}

.sf-hud__vitalrow b { color: var(--sf-ui-bone); }
.sf-heat { gap: .38rem; }
.sf-heat__track { width: 5.1rem; height: .38rem; }
.sf-heat u { min-width: 3.25rem; }

/* --------------------------- command dock ---------------------------- */

.sf-hud__command {
  position: absolute;
  right: max(1.4rem, calc(env(safe-area-inset-right) + 1rem));
  bottom: max(1.45rem, calc(env(safe-area-inset-bottom) + 1rem));
  width: min(19rem, 28vw);
  padding: .62rem;
  pointer-events: none;
}

.sf-hud__command-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  margin: -.04rem .08rem .52rem;
  padding-bottom: .48rem;
  border-bottom: 1px solid rgba(216, 164, 65, .2);
}

.sf-hud__command-head span {
  color: rgba(216, 164, 65, .71);
  font-size: 10px;
  letter-spacing: .14em;
}

.sf-hud__command-head strong {
  color: rgba(242, 229, 199, .72);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
}

.sf-hud__command-head kbd,
.sf-hud__hint kbd {
  display: inline-grid;
  min-width: 1.8rem;
  min-height: 1.45rem;
  padding: 0 .28rem;
  place-items: center;
  border: 1px solid rgba(245, 216, 142, .42);
  border-bottom-color: rgba(245, 216, 142, .7);
  border-radius: 2px;
  background: rgba(0, 0, 0, .36);
  color: var(--sf-ui-gold);
  font: inherit;
  box-shadow: inset 0 -2px 0 rgba(216, 164, 65, .1);
}

.sf-hud__strat {
  position: static;
  display: grid;
  gap: .36rem;
}

.sf-hud__stratitem {
  position: relative;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  box-sizing: border-box;
  padding: .4rem .52rem;
  overflow: hidden;
  border: 1px solid rgba(242, 229, 199, .1);
  border-left: 2px solid rgba(216, 164, 65, .3);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--sf-command-colour) 8%, transparent), transparent 55%),
    rgba(0, 0, 0, .24);
  color: rgba(242, 229, 199, .58);
  font: 600 11px/1.15 "Share Tech Mono", ui-monospace, monospace;
  letter-spacing: .025em;
}

.sf-hud__stratglyph {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(216, 164, 65, .24);
  color: rgba(242, 229, 199, .47);
}

.sf-hud__stratglyph svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.35;
}

.sf-hud__stratcopy {
  display: grid;
  min-width: 0;
  gap: .14rem;
  letter-spacing: normal !important;
}

.sf-hud__stratcopy b {
  overflow: hidden;
  color: rgba(242, 229, 199, .78);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-hud__stratcopy small {
  overflow: hidden;
  color: rgba(242, 229, 199, .42);
  font-size: 10px;
  letter-spacing: .025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-hud__stratstatus {
  color: rgba(242, 229, 199, .5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .035em;
}

.sf-hud__stratfill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--sf-command-colour, var(--sf-ui-brass));
  box-shadow: 0 0 .45rem currentColor;
}

.sf-hud__stratitem[data-ready="1"] {
  border-left-color: var(--sf-command-colour, var(--sf-ui-brass));
  color: var(--sf-ui-bone);
}

.sf-hud__stratitem[data-ready="1"] .sf-hud__stratglyph {
  border-color: color-mix(in srgb, var(--sf-command-colour) 45%, transparent);
  color: var(--sf-command-colour, var(--sf-ui-gold));
  box-shadow: inset 0 0 .7rem color-mix(in srgb, var(--sf-command-colour) 10%, transparent);
}

.sf-hud__stratitem[data-ready="1"] .sf-hud__stratstatus {
  color: var(--sf-ui-verdigris);
}

/* ------------------------- centre messaging -------------------------- */

.sf-hud__hint {
  bottom: max(1.1rem, calc(env(safe-area-inset-bottom) + .75rem));
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 2.05rem;
  box-sizing: border-box;
  padding: .25rem .62rem;
  border-top: 1px solid rgba(216, 164, 65, .22);
  border-bottom: 1px solid rgba(216, 164, 65, .13);
  background: linear-gradient(90deg, transparent, rgba(7, 5, 6, .7) 12%, rgba(7, 5, 6, .7) 88%, transparent);
  color: rgba(242, 229, 199, .68);
  font-size: 11px;
  letter-spacing: .035em;
}

.sf-hud__hint span { display: flex; align-items: center; gap: .38rem; }
.sf-hud__hint b { color: rgba(242, 229, 199, .82); font-weight: 500; }
.sf-hud__hint i { width: 1px; height: 1rem; background: rgba(216, 164, 65, .27); }

.sf-hud__banner {
  max-width: min(48rem, 82vw);
  white-space: normal;
  color: #fff0d5;
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  line-height: 1.25;
  text-wrap: balance;
}

.sf-hud__breach-alert {
  top: 24%;
  min-width: min(33rem, 78vw);
  box-sizing: border-box;
}

.sf-hud__breach-alert small { font-size: 11px; }
.sf-hud__breach-alert strong { font-size: clamp(1.05rem, 1.8vw, 1.48rem); }

/* Keep QA telemetry obvious when explicitly enabled, while production never
   creates this node. */
.sf-hud__readout {
  left: var(--sf-ui-edge-x);
  bottom: max(.45rem, env(safe-area-inset-bottom));
  padding: .2rem .35rem;
  background: rgba(7, 5, 6, .72);
  font-size: 11px;
}

/* -------------------------- touch command rig ------------------------ */

.sf-stage.sf-touch-enabled #sf-hud .sf-hud__command,
.sf-stage.sf-touch-enabled #sf-hud .sf-hud__hint,
.sf-stage.sf-touch-enabled #sf-hud .sf-hud__readout {
  display: none;
}

.sf-stage.sf-touch-enabled .sf-fs-btn {
  top: max(.5rem, env(safe-area-inset-top));
  right: max(.5rem, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border-radius: 2px;
  background: rgba(7, 5, 6, .82);
  color: var(--sf-ui-gold);
}

.sf-stage.sf-touch-enabled #sf-hud .sf-hud__compass {
  top: max(.65rem, calc(env(safe-area-inset-top) + .35rem));
  width: min(15rem, 58vw);
  height: 2.9rem;
}

.sf-stage.sf-touch-enabled .sf-hud__compass-label,
.sf-stage.sf-touch-enabled .sf-hud__poi { font-size: 11px !important; }
.sf-stage.sf-touch-enabled .sf-hud__poi {
  /* District names need desktop-width separation. On touch layouts the
     north-up tactical map already carries those landmarks, so keeping the
     compass cardinal-only preserves a clean sight line. */
  display: none;
}
.sf-stage.sf-touch-enabled .sf-hud__tick { font-size: 12px; }

.sf-stage.sf-touch-enabled #sf-hud .sf-hud__objective {
  left: max(.75rem, env(safe-area-inset-left));
  top: max(3.85rem, calc(env(safe-area-inset-top) + 3.3rem));
  width: min(14.5rem, 59vw);
}

.sf-stage.sf-touch-enabled .sf-hud__objhead > span { font-size: 11px; }
.sf-stage.sf-touch-enabled .sf-hud__objlabel {
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
}

.sf-stage.sf-touch-enabled .sf-hud__minimap {
  top: max(7rem, calc(env(safe-area-inset-top) + 6.4rem));
  right: max(.65rem, env(safe-area-inset-right));
  width: 7.35rem;
  padding: .42rem;
}

.sf-stage.sf-touch-enabled .sf-minimap__head {
  min-height: 1.3rem;
  margin-bottom: .28rem;
  font-size: 11px;
}

.sf-stage.sf-touch-enabled .sf-minimap__head small { display: none; }
.sf-stage.sf-touch-enabled .sf-minimap__head strong,
.sf-stage.sf-touch-enabled .sf-minimap__head b,
.sf-stage.sf-touch-enabled .sf-minimap__event > div,
.sf-stage.sf-touch-enabled .sf-minimap__event-title small,
.sf-stage.sf-touch-enabled .sf-minimap__event-title strong,
.sf-stage.sf-touch-enabled .sf-minimap__event > div b,
.sf-stage.sf-touch-enabled .sf-minimap__event > small {
  font-size: 11px;
}

.sf-stage.sf-touch-enabled .sf-minimap__event {
  margin-top: .35rem;
  padding-top: .35rem;
}

.sf-stage.sf-touch-enabled .sf-minimap__event > div {
  display: block;
}

.sf-stage.sf-touch-enabled .sf-minimap__event > div b {
  display: block;
  margin-top: .22rem;
}

.sf-stage.sf-touch-enabled .sf-minimap__event > small { display: none; }

.sf-stage.sf-touch-enabled .sf-hud__vitals {
  left: max(.65rem, env(safe-area-inset-left));
  top: max(7rem, calc(env(safe-area-inset-top) + 6.4rem));
  bottom: auto;
  width: min(14.35rem, 59vw);
  padding: .55rem .62rem .58rem .72rem;
}

.sf-stage.sf-touch-enabled .sf-hud__vitals::before {
  margin-bottom: .4rem;
  font-size: 11px;
  letter-spacing: .07em;
}

.sf-stage.sf-touch-enabled .sf-hud__hplabel,
.sf-stage.sf-touch-enabled .sf-hud__jetlabel,
.sf-stage.sf-touch-enabled .sf-hud__boost,
.sf-stage.sf-touch-enabled .sf-hud__shield,
.sf-stage.sf-touch-enabled .sf-hud__vitalrow {
  font-size: 11px;
}

.sf-stage.sf-touch-enabled .sf-hud__hplabel b,
.sf-stage.sf-touch-enabled .sf-hud__jetlabel b,
.sf-stage.sf-touch-enabled .sf-hud__boost strong,
.sf-stage.sf-touch-enabled .sf-hud__shield strong {
  font-size: 11px;
}

.sf-stage.sf-touch-enabled .sf-hud__hpwrap { height: 7px; }
.sf-stage.sf-touch-enabled .sf-hud__jet { margin-top: .48rem; }
.sf-stage.sf-touch-enabled .sf-hud__jettrack { height: 5px; }
.sf-stage.sf-touch-enabled :is(.sf-hud__boost, .sf-hud__shield) { margin-top: .32rem; }
.sf-stage.sf-touch-enabled .sf-hud__vitalrow { margin-top: .42rem; }
.sf-stage.sf-touch-enabled .sf-heat__track { width: 3.7rem; height: .34rem; }
.sf-stage.sf-touch-enabled .sf-heat u { min-width: 3rem; }

.sf-touch__look span {
  color: rgba(245, 216, 142, .38);
  font-size: 11px;
}

.sf-stage.sf-touch-enabled .sf-touch__stick {
  left: max(.65rem, env(safe-area-inset-left));
  bottom: max(.6rem, env(safe-area-inset-bottom));
  width: clamp(7.5rem, 32vw, 8.35rem);
}

.sf-touch__stick::before {
  border-color: rgba(216, 164, 65, .48);
  background:
    radial-gradient(circle, rgba(245, 216, 142, .11) 0 16%, transparent 17%),
    conic-gradient(from 45deg,
      rgba(216, 164, 65, .2), transparent 16%,
      rgba(216, 164, 65, .2) 17%, transparent 33%,
      rgba(216, 164, 65, .2) 34%, transparent 50%,
      rgba(216, 164, 65, .2) 51%, transparent 67%,
      rgba(216, 164, 65, .2) 68%, transparent 84%,
      rgba(216, 164, 65, .2) 85%),
    rgba(7, 5, 6, .24);
}

.sf-touch__stick > span,
.sf-touch__stick > span small {
  color: rgba(245, 216, 142, .78);
  font-size: 11px;
  letter-spacing: .06em;
}

.sf-touch__stick > span small { color: rgba(242, 229, 199, .56); }

.sf-stage.sf-touch-enabled .sf-touch__stack {
  right: max(.65rem, env(safe-area-inset-right));
  bottom: max(.6rem, env(safe-area-inset-bottom));
  width: clamp(10.75rem, 45vw, 11.6rem);
  gap: .38rem;
}

.sf-touch__utility,
.sf-touch__mobility,
.sf-touch__actions { gap: .34rem; }

.sf-touch__button,
.sf-touch__actions .sf-touch__button {
  min-width: 44px;
  min-height: 48px;
  padding: .22rem .14rem;
  border-radius: 2px;
  border-color: rgba(216, 164, 65, .51);
  background:
    linear-gradient(150deg, rgba(216, 164, 65, .12), transparent 42%),
    rgba(7, 5, 6, .76);
  box-shadow:
    inset 0 0 0 1px rgba(255, 235, 190, .04),
    inset 2px 0 0 rgba(138, 34, 48, .35),
    0 .35rem .8rem rgba(0, 0, 0, .34);
}

.sf-touch__button b { color: var(--sf-ui-gold); font-size: 1.05rem; }

.sf-touch__button span {
  color: var(--sf-ui-bone);
  font-size: 11px;
  letter-spacing: .015em;
}

.sf-touch__button small { display: none; }

.sf-touch__button--command {
  border-color: rgba(120, 212, 246, .64);
  background:
    radial-gradient(circle at 50% 25%, rgba(120, 212, 246, .16), transparent 54%),
    rgba(7, 20, 25, .78);
}

.sf-touch__button--command b { color: var(--sf-ui-orbital); }

.sf-touch__button--fire {
  border-color: rgba(239, 99, 62, .76);
  background:
    radial-gradient(circle at 50% 32%, rgba(239, 99, 62, .22), transparent 52%),
    rgba(74, 17, 24, .86);
}

.sf-touch__button.is-held,
.sf-touch__button.is-tapped {
  border-color: var(--sf-ui-gold);
  background-color: rgba(112, 60, 25, .76);
}

.sf-touch__button:focus-visible {
  outline-color: var(--sf-ui-gold);
  outline-width: 3px;
}

/* Portrait phones keep instruments in two readable columns above the lower
   thumb zone. This also covers the 390 x 844 release proof viewport. */
@media (orientation: portrait) and (max-width: 540px) {
  .sf-stage.sf-touch-enabled .sf-hud__compass { width: 58vw; }

  .sf-stage.sf-touch-enabled .sf-hud__objective {
    top: max(4rem, calc(env(safe-area-inset-top) + 3.45rem));
    width: min(14.35rem, 59vw);
  }

  .sf-stage.sf-touch-enabled .sf-hud__minimap,
  .sf-stage.sf-touch-enabled .sf-hud__vitals {
    top: max(8.2rem, calc(env(safe-area-inset-top) + 7.55rem));
  }

  .sf-stage.sf-touch-enabled .sf-hud__breach-alert {
    top: 36%;
    min-width: calc(100% - 1.5rem);
  }

  .sf-stage.sf-touch-enabled .sf-hud__district {
    /* The persistent portrait instruments already identify the current
       directive. Suppress the cinematic district reveal here so its fading
       title never crosses the reticle or the deployment title card. */
    display: none;
  }
}

/* Short landscape phones: reserve the outer 56px for shell controls, then
   fit objective, compass and a 104px map on one rail. The action stack and
   map share the right column without intersecting. */
@media (orientation: landscape) and (max-height: 500px) {
  .sf-stage.sf-touch-enabled .sf-hud__compass {
    top: max(.45rem, env(safe-area-inset-top));
    width: min(15.25rem, 29vw);
  }

  .sf-stage.sf-touch-enabled .sf-hud__objective {
    left: max(4rem, calc(env(safe-area-inset-left) + 3.5rem));
    top: max(.55rem, env(safe-area-inset-top));
    width: min(12rem, 23vw);
  }

  .sf-stage.sf-touch-enabled .sf-hud__objhead { gap: .18rem; }
  .sf-stage.sf-touch-enabled .sf-hud__objbar { margin-top: .3rem; }

  .sf-stage.sf-touch-enabled .sf-hud__minimap {
    top: max(3.7rem, calc(env(safe-area-inset-top) + 3.2rem));
    right: max(12.25rem, calc(env(safe-area-inset-right) + 11.75rem));
    width: 6.5rem;
    padding: .34rem;
  }

  .sf-stage.sf-touch-enabled .sf-minimap__head {
    min-height: 1rem;
    margin-bottom: .2rem;
  }

  .sf-stage.sf-touch-enabled .sf-minimap__event {
    margin-top: .22rem;
    padding-top: .25rem;
  }

  .sf-stage.sf-touch-enabled .sf-minimap__event-title small,
  .sf-stage.sf-touch-enabled .sf-minimap__event > small { display: none; }

  .sf-stage.sf-touch-enabled .sf-minimap__event-title strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sf-stage.sf-touch-enabled .sf-hud__vitals {
    left: max(4rem, calc(env(safe-area-inset-left) + 3.5rem));
    top: max(5.1rem, calc(env(safe-area-inset-top) + 4.55rem));
    width: min(14.35rem, 28vw);
  }

  .sf-stage.sf-touch-enabled .sf-hud__vitals::before { display: none; }

  .sf-stage.sf-touch-enabled .sf-touch__stick {
    left: max(.5rem, env(safe-area-inset-left));
    bottom: max(.45rem, env(safe-area-inset-bottom));
    width: 7.2rem;
  }

  .sf-stage.sf-touch-enabled .sf-touch__stack {
    right: max(.5rem, env(safe-area-inset-right));
    bottom: max(.45rem, env(safe-area-inset-bottom));
    width: 11.5rem;
    gap: .32rem;
  }

  .sf-touch__utility,
  .sf-touch__mobility,
  .sf-touch__actions { gap: .3rem; }

  .sf-touch__button,
  .sf-touch__actions .sf-touch__button { min-height: 48px; }

  .sf-touch__look span { display: none; }
  .sf-stage.sf-touch-enabled .sf-hud__breach-alert { top: 28%; }
}

/* 360px-wide devices retain 44px hit targets and readable labels by reducing
   chrome width rather than type size. */
@media (orientation: portrait) and (max-width: 360px) {
  .sf-stage.sf-touch-enabled .sf-hud__objective,
  .sf-stage.sf-touch-enabled .sf-hud__vitals { width: 58vw; }
  .sf-stage.sf-touch-enabled .sf-hud__minimap { width: 6.75rem; }
  .sf-stage.sf-touch-enabled .sf-touch__stack { width: 10.35rem; }
  .sf-stage.sf-touch-enabled .sf-touch__stick { width: 7.15rem; }
}

/* ------------------------- accessibility hooks ----------------------- */

body.sf-hud-large #sf-hud,
body.sf-hud-scale-large #sf-hud,
body[data-sf-hud-scale="large"] #sf-hud {
  font-size: 18px;
}

body.sf-hud-large :is(.sf-hud__vitals, .sf-hud__charge),
body.sf-hud-scale-large :is(.sf-hud__vitals, .sf-hud__charge),
body[data-sf-hud-scale="large"] :is(.sf-hud__vitals, .sf-hud__charge) {
  transform: scale(1.08);
}

body.sf-hud-large .sf-hud__command,
body.sf-hud-scale-large .sf-hud__command,
body[data-sf-hud-scale="large"] .sf-hud__command {
  transform: translateX(-50%) scale(1.08);
  transform-origin: center bottom;
}

body.sf-hud-large .sf-hud__vitals,
body.sf-hud-scale-large .sf-hud__vitals,
body[data-sf-hud-scale="large"] .sf-hud__vitals { transform-origin: right bottom; }

body.sf-hud-large .sf-hud__charge,
body.sf-hud-scale-large .sf-hud__charge,
body[data-sf-hud-scale="large"] .sf-hud__charge { transform-origin: left bottom; }

body.sf-hud-large .sf-stage.sf-touch-enabled :is(.sf-hud__vitals, .sf-hud__charge),
body.sf-hud-scale-large .sf-stage.sf-touch-enabled :is(.sf-hud__vitals, .sf-hud__charge),
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled :is(.sf-hud__vitals, .sf-hud__charge) {
  transform: none;
}

body.sf-high-contrast .sf-stage,
body.sf-ui-high-contrast .sf-stage,
body[data-sf-contrast="high"] .sf-stage {
  --sf-ui-bone: #fff8e8;
  --sf-ui-bone-dim: rgba(255, 248, 232, .86);
  --sf-ui-gold: #ffe39a;
  --sf-ui-brass: #edb84e;
  --sf-ui-threat: #ff724b;
  --sf-ui-verdigris: #8cebc2;
}

body.sf-high-contrast :is(.sf-hud__minimap, .sf-hud__vitals, .sf-hud__charge, .sf-hud__command),
body.sf-ui-high-contrast :is(.sf-hud__minimap, .sf-hud__vitals, .sf-hud__charge, .sf-hud__command),
body[data-sf-contrast="high"] :is(.sf-hud__minimap, .sf-hud__vitals, .sf-hud__charge, .sf-hud__command) {
  border-color: rgba(255, 227, 154, .72);
  background: rgba(3, 3, 3, .94);
  backdrop-filter: none;
}

body.sf-reduced-motion #sf-hud *,
body.sf-ui-reduced-motion #sf-hud *,
body[data-sf-motion="reduced"] #sf-hud *,
body.sf-reduced-motion #sf-touch *,
body.sf-ui-reduced-motion #sf-touch *,
body[data-sf-motion="reduced"] #sf-touch * {
  animation: none !important;
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  #sf-hud *,
  #sf-touch * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ======================================================================
   FINAL RESPONSIVE COLLISION CORRECTIONS

   These selectors are intentionally more specific than saintfall-ui.css,
   which is loaded after this sheet. They reserve the shell-control rail on
   short landscape screens, give portrait instruments a measured gutter,
   and keep the command wheel's visual ink within the stage.
   ====================================================================== */

@media (orientation: landscape) and (max-height: 500px) {
  #sf-native-ui .sf-menu-trigger {
    top: max(.5rem, env(safe-area-inset-top));
    left: max(.5rem, env(safe-area-inset-left));
    width: 3rem;
    min-width: 3rem;
    height: 3rem;
    min-height: 3rem;
    padding: .55rem;
    justify-content: center;
  }

  #sf-native-ui .sf-menu-trigger span,
  #sf-native-ui .sf-menu-trigger kbd {
    display: none;
  }
}

@media (orientation: portrait) and (max-width: 540px) {
  /* 390px release geometry: vitals 224.25px wide at x=10.4; map 112px
     wide at x=267.6. That leaves a 32.95px panel gutter (about 30px even
     after the minimap's etched corner projects beyond its border). */
  .sf-stage.sf-touch-enabled .sf-hud__vitals {
    width: min(14.05rem, 57.5vw);
  }

  .sf-stage.sf-touch-enabled .sf-hud__minimap {
    width: 7rem;
  }

  .sf-stage.sf-touch-enabled .sf-hud__minimap,
  .sf-stage.sf-touch-enabled .sf-hud__vitals {
    top: max(8.45rem, calc(env(safe-area-inset-top) + 7.8rem));
  }

  /* A compact two-row grid prevents the heat limiter and the long,
     right-aligned reinforcement label from competing for one flex line. */
  .sf-stage.sf-touch-enabled .sf-hud__vitalrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    min-width: 0;
  }
  /* The side cards retain their radial relationship but move 13.6px in
     from either stage edge at 390px. Their content becomes a true two-row
     grid, so REINFORCEMENT DROP and READY no longer occupy the same ink. */
  #sf-native-ui .sf-command-wheel__option {
    width: 10rem;
    min-height: 5.25rem;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    column-gap: .4rem;
    row-gap: .14rem;
    padding: .4rem;
    overflow: hidden;
  }

  #sf-native-ui .sf-command-wheel__option[data-index="1"] {
    left: calc(50% + min(6.3rem, 26vw));
  }

  #sf-native-ui .sf-command-wheel__option[data-index="2"] {
    left: calc(50% - min(6.3rem, 26vw));
  }

  #sf-native-ui .sf-command-wheel__sigil {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 2.2rem;
    height: 2.2rem;
  }

  #sf-native-ui .sf-command-wheel__copy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    align-content: center;
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  #sf-native-ui .sf-command-wheel__copy strong {
    box-sizing: border-box;
    width: 100%;
    padding-right: 0;
    overflow: visible;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: .015em;
    overflow-wrap: normal;
    text-wrap: wrap;
    white-space: normal;
  }

  #sf-native-ui .sf-command-wheel__copy small {
    font-size: 10px;
    line-height: 1.15;
  }

  #sf-native-ui .sf-command-wheel__option > b[data-command-status] {
    position: static;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    font-size: 10px;
    line-height: 1.1;
  }
}

/* Large HUD is a controlled typographic and gauge step on touch screens,
   not a transform. It is visibly larger while retaining the measured panel
   boxes and gutters above. */
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__compass-label,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__poi,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__objhead > span,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-minimap__head strong,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-minimap__head b,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-minimap__event > div,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-minimap__event-title small,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-minimap__event-title strong,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-minimap__event > div b,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__vitals::before,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__hplabel,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__jetlabel,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__boost,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__shield,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__vitalrow,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__hplabel b,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__jetlabel b,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__boost strong,
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__shield strong {
  font-size: 12px !important;
}

body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__tick {
  font-size: 14px;
}

body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__objlabel {
  font-size: 13px;
}

body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__objbar {
  height: 4px;
}

body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__hpwrap {
  height: 9px;
}

body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__jettrack {
  height: 7px;
}

body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-heat__track {
  width: 3rem;
  height: .42rem;
}

body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-heat u {
  min-width: 2.4rem;
}

body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__vitalrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: .3rem;
}
body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__reticle {
  transform: scale(1.16);
  transform-origin: center;
}

@media (orientation: portrait) and (max-width: 380px) {
  body[data-sf-hud-scale="large"] .sf-stage.sf-touch-enabled .sf-hud__vitalrow {
    grid-template-columns: 1fr;
    row-gap: .28rem;
  }
}

/* ======================================================================
   MINIMAL FIELD HUD · 2026-08-11

   The scene carries the spectacle; this layer carries only the next
   decision. Routine labels and READY prose yield to compact rails and
   sigils, while danger, cooldown and mission changes remain explicit.
   ====================================================================== */

.saintfall-page .rb-standalone-surface {
  container-name: saintfall-playfield;
  container-type: inline-size;
}

.sf-stage {
  --sf-hud-inset-x: max(.85rem, calc(env(safe-area-inset-left) + .65rem));
  --sf-hud-inset-y: max(.72rem, calc(env(safe-area-inset-top) + .5rem));
}

.sf-fs-btn {
  top: var(--sf-hud-inset-y);
  right: max(.85rem, calc(env(safe-area-inset-right) + .65rem));
  width: 2.55rem;
  height: 2.55rem;
  border-color: rgba(245, 216, 142, .22);
  border-radius: .8rem;
  background: rgba(7, 5, 6, .64);
  color: rgba(245, 216, 142, .82);
  box-shadow: 0 .35rem 1.2rem rgba(0, 0, 0, .2);
  backdrop-filter: blur(10px) saturate(.75);
}

.sf-fs-btn:hover {
  border-color: rgba(245, 216, 142, .58);
  background: rgba(30, 18, 17, .82);
}

#sf-hud .sf-hud__compass {
  top: var(--sf-hud-inset-y);
  width: min(15.5rem, 27cqw);
  height: 1.7rem;
  overflow: hidden;
  border: 0;
  mask-image: linear-gradient(90deg, transparent, #000 17%, #000 83%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 17%, #000 83%, transparent);
}

#sf-hud .sf-hud__compass-label,
#sf-hud .sf-hud__poi {
  display: none !important;
}

#sf-hud .sf-hud__strip {
  inset: 0;
  height: 1.7rem;
}

#sf-hud .sf-hud__tick {
  top: .18rem;
  min-width: 1.75rem;
  color: rgba(245, 216, 142, .7);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .9);
}

#sf-hud .sf-hud__needle {
  top: 0;
  width: 1px;
  height: 1.55rem;
  background: linear-gradient(180deg, #fff0b4 0 22%, var(--sf-ui-brass) 23% 68%, transparent 100%);
  box-shadow: 0 0 .35rem rgba(245, 216, 142, .32);
}

#sf-hud .sf-hud__objective {
  left: max(.85rem, calc(env(safe-area-inset-left) + .65rem));
  top: var(--sf-hud-inset-y);
  width: min(18rem, 29cqw);
  transform: none;
  text-align: left;
}

#sf-hud .sf-hud__objhead {
  gap: 0;
  padding: 0;
  border: none;
  background: transparent;
}

#sf-hud .sf-hud__objhead > span {
  display: none;
}

#sf-hud .sf-hud__objlabel {
  color: rgba(247, 237, 216, .91);
  font: 600 10px/1.25 "Share Tech Mono", ui-monospace, monospace;
  letter-spacing: .045em;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .95);
}

#sf-hud .sf-hud__objbar {
  display: none;
}

#sf-hud .sf-hud__objective[data-event="1"] .sf-hud__objhead {
  border: none;
  background: transparent;
}

#sf-hud .sf-hud__minimap {
  top: max(3.55rem, calc(env(safe-area-inset-top) + 3.1rem));
  right: max(.85rem, calc(env(safe-area-inset-right) + .65rem));
  width: 7.15rem;
  padding: 0;
  border: 1px solid rgba(216, 164, 65, .55);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#sf-hud .sf-hud__minimap::before,
#sf-hud .sf-hud__minimap::after {
  display: none;
}

#sf-hud .sf-minimap__head {
  position: absolute;
  z-index: 2;
  top: .55rem;
  right: .52rem;
  display: block;
  min-height: 0;
  margin: 0;
}

#sf-hud .sf-minimap__head > span {
  display: none;
}

#sf-hud .sf-minimap__head b {
  display: block;
  padding: .12rem .2rem;
  border-radius: .22rem;
  background: rgba(7, 5, 6, .58);
  color: rgba(245, 216, 142, .72);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .04em;
}

#sf-hud #sf-map-canvas {
  border: 0;
  background: transparent;
  box-shadow: none;
  filter: drop-shadow(0 0 .45rem rgba(216, 164, 65, .12));
}

#sf-hud .sf-minimap__event {
  margin-top: .2rem;
  padding-top: .28rem;
  border-top: 1px solid rgba(245, 216, 142, .12);
}

#sf-hud .sf-minimap__event > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .28rem;
  font-size: 9px;
  line-height: 1.05;
}

#sf-hud .sf-minimap__event > div span.sf-minimap__event-title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
}

#sf-hud .sf-minimap__event-title small,
#sf-hud .sf-minimap__event > small {
  display: none;
}

#sf-hud .sf-minimap__event-title strong {
  display: block;
  overflow: hidden;
  color: rgba(242, 229, 199, .76);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .035em;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#sf-hud .sf-minimap__event > div b {
  color: rgba(245, 216, 142, .74);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .02em;
}

#sf-hud .sf-minimap__event > i {
  height: 2px;
  margin-top: .25rem;
}

#sf-hud .sf-minimap__event[data-phase="dormant"] {
  display: none;
}

#sf-hud .sf-hud__minimap[data-event="1"] {
  outline: 1px solid rgba(239, 99, 62, .5);
  outline-offset: 2px;
  box-shadow: 0 0 1.15rem rgba(151, 41, 22, .2);
}

/* Survival & Energy: Vitality on bottom-center-left, Charge on bottom-center-right.
   Modern and minimal: wide sleek bars with bold tabular readouts, no background boxes or text headers. */
#sf-hud .sf-hud__vitals {
  position: absolute;
  left: auto;
  right: calc(50% + .75rem);
  bottom: max(1.15rem, calc(env(safe-area-inset-bottom) + .95rem));
  width: min(15rem, 24cqw);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

#sf-hud .sf-hud__vitals::before {
  display: none;
}

#sf-hud .sf-hud__hplabel {
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  margin-bottom: .22rem;
  color: #8fe9a4;
  font: 700 20px/1 "Share Tech Mono", ui-monospace, monospace;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95), 0 0 12px rgba(127, 208, 138, .45);
}

#sf-hud .sf-hud__hplabel > span {
  display: none;
}

#sf-hud .sf-hud__hplabel b {
  color: #8fe9a4;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: left;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95), 0 0 12px rgba(127, 208, 138, .45);
}

#sf-hud .sf-hud__hpwrap {
  height: 8px;
  border: 1px solid rgba(216, 164, 65, .38);
  border-radius: 2px;
  background: rgba(7, 5, 6, .65);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  overflow: hidden;
}

#sf-hud .sf-hud__hp {
  border-radius: 1px;
  background: linear-gradient(90deg, #328340, #67c773 65%, #a4f5af);
  box-shadow: 0 0 8px rgba(103, 199, 115, .5);
  transition: width .16s linear, background-color .3s;
}

#sf-hud .sf-hud__hp[data-state="warn"] {
  background: linear-gradient(90deg, #9c6c18, #e8b24a 65%, #ffe18b);
  box-shadow: 0 0 8px rgba(232, 178, 74, .5);
}

#sf-hud .sf-hud__hp[data-state="crit"] {
  background: linear-gradient(90deg, #8a241e, #d8443c 65%, #ff8982);
  box-shadow: 0 0 8px rgba(216, 68, 60, .55);
}

#sf-hud .sf-hud__charge {
  position: absolute;
  left: calc(50% + .75rem);
  right: auto;
  bottom: max(1.15rem, calc(env(safe-area-inset-bottom) + .95rem));
  width: min(15rem, 24cqw);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

#sf-hud .sf-hud__jet {
  margin-top: 0;
}

#sf-hud .sf-hud__jetlabel {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  margin-bottom: .22rem;
  color: #ffe2aa;
  font: 700 20px/1 "Share Tech Mono", ui-monospace, monospace;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95), 0 0 12px rgba(255, 174, 72, .45);
}

#sf-hud .sf-hud__jetlabel > span {
  display: none;
}

#sf-hud .sf-hud__jetlabel b {
  color: #ffe2aa;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  text-align: right;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95), 0 0 12px rgba(255, 174, 72, .45);
}

#sf-hud .sf-hud__jettrack {
  height: 8px;
  border: 1px solid rgba(216, 164, 65, .38);
  border-radius: 2px;
  background: rgba(7, 5, 6, .65);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  overflow: hidden;
}

#sf-hud .sf-hud__jettrack i {
  border-radius: 1px;
  background: linear-gradient(90deg, #9c4b22, #ffae48 60%, #ffe8b5);
  box-shadow: 0 0 8px rgba(255, 174, 72, .5);
  transition: transform .08s linear, filter .18s;
}

#sf-hud .sf-hud__jet[data-state="crit"] .sf-hud__jettrack i {
  background: linear-gradient(90deg, #781c17, #c43229 60%, #ff7c73);
  box-shadow: 0 0 8px rgba(196, 50, 41, .55);
}

#sf-hud .sf-hud__boost {
  display: none;
}

#sf-hud .sf-guard-cue {
  --sf-guard-scale: 1.08;
  --sf-guard-spread: 10px;
  position: absolute;
  left: 0;
  top: 0;
  width: 42px;
  height: 24px;
  color: rgba(255, 70, 64, .96);
  pointer-events: none;
  opacity: .62;
  transform: translate(-50%, -120%) scale(var(--sf-guard-scale));
  transform-origin: 50% 100%;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .92));
  transition: opacity .08s linear, filter .08s linear, transform .06s linear;
  will-change: left, top, transform, opacity;
  z-index: 8;
}

#sf-hud .sf-guard-cue[hidden] { display: none; }

#sf-hud .sf-guard-cue > i {
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 2px;
  height: 9px;
  background: currentColor;
  transform-origin: 50% 100%;
}

#sf-hud .sf-guard-cue > i:nth-child(1) {
  left: calc(50% - var(--sf-guard-spread));
  height: 7px;
  transform: translateX(-50%) rotate(-34deg);
}
#sf-hud .sf-guard-cue > i:nth-child(2) {
  height: 11px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
#sf-hud .sf-guard-cue > i:nth-child(3) {
  left: calc(50% + var(--sf-guard-spread));
  height: 7px;
  transform: translateX(-50%) rotate(34deg);
}

#sf-hud .sf-guard-cue[data-state="ready"] {
  color: rgba(255, 112, 96, 1);
  opacity: .92;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .95)) drop-shadow(0 0 5px rgba(255, 52, 42, .72));
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  #sf-hud .sf-guard-cue {
    width: 38px;
    height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #sf-hud .sf-guard-cue { transition: none; }
}

#sf-hud .sf-hud__vitalrow {
  min-height: .9rem;
  margin-top: .32rem;
  color: rgba(242, 229, 199, .72);
  font: 600 10px/1.1 "Share Tech Mono", ui-monospace, monospace;
  letter-spacing: .03em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

#sf-hud .sf-heat {
  gap: .28rem;
}

#sf-hud .sf-heat__track {
  width: 3.6rem;
  height: .25rem;
}

#sf-hud .sf-heat u {
  min-width: 2.75rem;
}
/* Call actions dock: icons with cooldown visual, centered cleanly above the dual bars.
   No background boxes, no text labels, and no on-screen F button. */
#sf-hud .sf-hud__command {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(4.25rem, calc(env(safe-area-inset-bottom) + 4.05rem));
  display: flex;
  width: max-content;
  max-width: 90cqw;
  padding: 0;
  align-items: center;
  justify-content: center;
  gap: .38rem;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

#sf-hud .sf-hud__command-head {
  display: none !important;
}

#sf-hud .sf-hud__strat {
  display: flex;
  gap: .38rem;
  align-items: center;
}

#sf-hud .sf-hud__stratitem {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: 2.3rem;
  min-width: 2.3rem;
  height: 2.3rem;
  min-height: 2.3rem;
  padding: 0;
  place-items: center;
  border: none;
  border-radius: .45rem;
  background: transparent;
  box-shadow: none;
}

#sf-hud .sf-hud__stratglyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 0;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .95));
}

#sf-hud .sf-hud__stratglyph svg {
  width: 1.45rem;
  height: 1.45rem;
}

#sf-hud .sf-hud__stratcopy {
  display: none;
}

#sf-hud .sf-hud__stratstatus {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: .35rem;
  background: rgba(7, 5, 6, .78);
  color: #ffe2aa;
  font: 700 9px/1 "Share Tech Mono", ui-monospace, monospace;
  letter-spacing: 0;
}

#sf-hud .sf-hud__stratitem[data-ready="1"] .sf-hud__stratstatus {
  display: none;
}

#sf-hud .sf-hud__stratitem:not([data-ready="1"]) .sf-hud__stratglyph {
  opacity: .22;
}

#sf-hud .sf-hud__stratfill {
  display: none;
}

#sf-hud .sf-hud__hint {
  display: none !important;
}

#sf-hud .sf-hud__hint kbd {
  min-width: 1.55rem;
  min-height: 1.15rem;
  border-color: rgba(245, 216, 142, .25);
  font-size: 8px;
}

body.sf-command-open #sf-hud .sf-hud__hint {
  display: none;
}

#sf-hud .sf-hud__district {
  top: 10.5%;
  max-width: min(34rem, 56cqw);
}

#sf-hud .sf-hud__eyebrow {
  margin-bottom: .34rem;
  font-size: 9px;
  letter-spacing: .22em;
}

#sf-hud .sf-hud__name {
  font-size: clamp(1rem, 2.1cqw, 1.8rem);
  letter-spacing: .16em;
}

#sf-hud .sf-hud__breach-alert {
  top: 21%;
  min-width: min(26rem, 68cqw);
  padding: .42rem .8rem .48rem;
}

#sf-hud .sf-hud__breach-alert small {
  font-size: 9px;
}

#sf-hud .sf-hud__breach-alert strong {
  font-size: clamp(.9rem, 1.45cqw, 1.15rem);
}

/* The embedded game is measured by its playfield, not by the wider browser
   that also contains the site sidebar. */
@container saintfall-playfield (max-width: 1180px) {
  #sf-hud .sf-hud__compass { width: min(13.5rem, 25cqw); }
  #sf-hud .sf-hud__objective { width: min(16rem, 28cqw); }
  #sf-hud .sf-hud__minimap { width: 6.55rem; }
  #sf-hud .sf-hud__vitals,
  #sf-hud .sf-hud__charge { width: min(15rem, 24cqw); }
  #sf-hud .sf-hud__command-head kbd,
  #sf-hud .sf-hud__stratitem { width: 2.15rem; min-width: 2.15rem; height: 2.15rem; min-height: 2.15rem; }
}

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

.sf-stage.sf-touch-enabled .sf-hud__command,
.sf-stage.sf-touch-enabled .sf-hud__hint,
.sf-stage.sf-touch-enabled .sf-hud__readout {
  display: none;
}

.sf-stage.sf-touch-enabled .sf-hud__compass {
  top: max(.7rem, env(safe-area-inset-top));
  width: min(9rem, 38cqw);
}

.sf-stage.sf-touch-enabled .sf-hud__objective {
  left: max(.7rem, env(safe-area-inset-left));
  top: max(3.55rem, calc(env(safe-area-inset-top) + 3.15rem));
  width: calc(100% - max(1.4rem, env(safe-area-inset-left) + env(safe-area-inset-right)));
}

.sf-stage.sf-touch-enabled #sf-hud .sf-hud__objbar {
  width: 54%;
}

.sf-stage.sf-touch-enabled #sf-hud .sf-hud__minimap {
  top: max(5.55rem, calc(env(safe-area-inset-top) + 5.1rem));
  right: max(.65rem, env(safe-area-inset-right));
  width: 5.1rem;
  padding: .24rem .26rem .3rem;
}

.sf-stage.sf-touch-enabled #sf-hud .sf-hud__vitals {
  left: max(.7rem, env(safe-area-inset-left));
  top: max(5.55rem, calc(env(safe-area-inset-top) + 5.1rem));
  bottom: auto;
  width: min(9.6rem, 44cqw);
  padding: .42rem .5rem .44rem .58rem;
  border-left-width: 2px;
}

.sf-stage.sf-touch-enabled #sf-hud .sf-hud__hplabel,
.sf-stage.sf-touch-enabled #sf-hud .sf-hud__jetlabel,
.sf-stage.sf-touch-enabled #sf-hud .sf-hud__hplabel b,
.sf-stage.sf-touch-enabled #sf-hud .sf-hud__jetlabel b,
.sf-stage.sf-touch-enabled #sf-hud .sf-hud__vitalrow {
  font-size: 9px;
}

.sf-stage.sf-touch-enabled #sf-hud .sf-hud__hpwrap { height: 5px; }
.sf-stage.sf-touch-enabled #sf-hud .sf-hud__jet { margin-top: .4rem; }
.sf-stage.sf-touch-enabled #sf-hud .sf-hud__jettrack { height: 3px; }

.sf-stage.sf-touch-enabled #sf-hud :is(.sf-hud__boost, .sf-hud__shield) {
  margin-top: .24rem;
  font-size: 8px;
}

.sf-stage.sf-touch-enabled #sf-hud .sf-hud__vitalrow {
  margin-top: .34rem;
}

.sf-stage.sf-touch-enabled .sf-touch__look span {
  margin-bottom: 5rem;
  color: rgba(255, 229, 181, .2);
  font-size: 8px;
  letter-spacing: .12em;
}

#sf-touch.sf-touch-looked .sf-touch__look span {
  opacity: 0;
}

.sf-stage.sf-touch-enabled .sf-touch__stick {
  left: max(.65rem, env(safe-area-inset-left));
  bottom: max(.65rem, env(safe-area-inset-bottom));
  width: clamp(6.25rem, 27cqw, 6.9rem);
  opacity: .82;
}

.sf-stage.sf-touch-enabled .sf-touch__stick > span {
  bottom: -.05rem;
  font-size: 8px;
  letter-spacing: .08em;
}

.sf-stage.sf-touch-enabled .sf-touch__stick > span small {
  display: none;
}

.sf-stage.sf-touch-enabled .sf-touch__stack {
  right: max(.65rem, env(safe-area-inset-right));
  bottom: max(.65rem, env(safe-area-inset-bottom));
  width: 11.35rem;
  gap: .25rem;
}

.sf-stage.sf-touch-enabled :is(.sf-touch__utility, .sf-touch__mobility, .sf-touch__actions) {
  gap: .24rem;
}

.sf-stage.sf-touch-enabled .sf-touch__button,
.sf-stage.sf-touch-enabled .sf-touch__actions .sf-touch__button {
  min-height: 44px;
  height: 44px;
  padding: .18rem .08rem .16rem;
  grid-template-rows: 1fr auto;
  gap: 0;
  border-color: rgba(216, 164, 65, .28);
  border-radius: .72rem;
  background: rgba(7, 5, 6, .54);
  box-shadow: 0 .3rem .9rem rgba(0, 0, 0, .17);
  backdrop-filter: blur(8px) saturate(.72);
}

.sf-stage.sf-touch-enabled .sf-touch__button::after {
  display: none;
}

.sf-stage.sf-touch-enabled .sf-touch__button b {
  color: rgba(255, 224, 159, .88);
  font-size: .82rem;
}

.sf-stage.sf-touch-enabled .sf-touch__button span {
  color: rgba(255, 235, 198, .72);
  font-size: 8px;
  letter-spacing: .025em;
}

.sf-stage.sf-touch-enabled .sf-touch__button small {
  display: none;
}

.sf-stage.sf-touch-enabled .sf-touch__button--fire {
  border-color: rgba(239, 99, 62, .52);
  background: rgba(72, 18, 20, .66);
}

.sf-stage.sf-touch-enabled .sf-touch__button.is-held,
.sf-stage.sf-touch-enabled .sf-touch__button.is-tapped {
  border-color: rgba(255, 225, 151, .84);
  background-color: rgba(122, 72, 29, .7);
}

.sf-stage.sf-touch-enabled #sf-hud .sf-hud__breach-alert {
  top: 25%;
  min-width: min(22rem, 82cqw);
}

/* A short landscape field keeps the full input set, but telemetry and
   controls use compact rows instead of swallowing the centre sightline. */
@media (orientation: landscape) and (max-height: 500px) {
  .sf-stage.sf-touch-enabled #sf-hud .sf-hud__compass {
    top: max(.45rem, env(safe-area-inset-top));
    width: min(8.5rem, 20cqw);
  }

  .sf-stage.sf-touch-enabled #sf-hud .sf-hud__objective {
    left: max(.75rem, calc(env(safe-area-inset-left) + .55rem));
    top: max(.45rem, env(safe-area-inset-top));
    width: min(13.5rem, 29cqw);
  }

  .sf-stage.sf-touch-enabled #sf-hud .sf-hud__minimap {
    top: max(.42rem, env(safe-area-inset-top));
    right: max(.65rem, calc(env(safe-area-inset-right) + .45rem));
    width: 4.35rem;
    padding: .18rem .2rem .22rem;
  }

  .sf-stage.sf-touch-enabled .sf-minimap__event {
    margin-top: .12rem;
    padding-top: .16rem;
  }

  .sf-stage.sf-touch-enabled #sf-hud .sf-hud__vitals {
    left: max(.75rem, calc(env(safe-area-inset-left) + .55rem));
    top: max(3.35rem, calc(env(safe-area-inset-top) + 2.9rem));
    width: min(11.5rem, 25cqw);
    padding: .34rem .44rem .36rem .5rem;
  }

  .sf-stage.sf-touch-enabled .sf-touch__stick {
    width: 6.15rem;
  }

  .sf-stage.sf-touch-enabled .sf-touch__stack {
    width: 10.65rem;
    gap: .18rem;
  }

  .sf-stage.sf-touch-enabled :is(.sf-touch__utility, .sf-touch__mobility, .sf-touch__actions) {
    gap: .18rem;
  }

  .sf-stage.sf-touch-enabled .sf-touch__button,
  .sf-stage.sf-touch-enabled .sf-touch__actions .sf-touch__button {
    min-height: 44px;
    height: 44px;
  }

  .sf-stage.sf-touch-enabled .sf-touch__look span {
    display: none;
  }
}

@media (orientation: portrait) and (max-width: 380px) {
  .sf-stage.sf-touch-enabled #sf-hud .sf-hud__vitals { width: 8.8rem; }
  .sf-stage.sf-touch-enabled #sf-hud .sf-hud__minimap { width: 4.75rem; }
  .sf-stage.sf-touch-enabled .sf-touch__stack { width: 10.55rem; }
}

body.sf-high-contrast #sf-hud :is(.sf-hud__vitals, .sf-hud__minimap),
body.sf-ui-high-contrast #sf-hud :is(.sf-hud__vitals, .sf-hud__minimap),
body[data-sf-contrast="high"] #sf-hud :is(.sf-hud__vitals, .sf-hud__minimap) {
  outline: 1px solid rgba(255, 227, 154, .52);
  background: rgba(3, 3, 3, .92);
  backdrop-filter: none;
}

/* ======================================================================
   ENTRY LITURGY · GENERATED TITLE PLATE + SAVE-AWARE MAIN MENU
   ====================================================================== */

#sf-boot {
  align-items: flex-start;
  justify-content: center;
  gap: .62rem;
  padding: clamp(2.5rem, 7vw, 5.5rem) clamp(1.4rem, 7vw, 6.5rem);
  background: #050405;
  text-align: left;
  isolation: isolate;
}
#sf-boot::before,
#sf-boot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#sf-boot::before {
  z-index: -2;
  background: url("../img/saintfall/saintfall-title-menu.jpg?v=20260816-entry-1") center/cover no-repeat;
  filter: saturate(.82) contrast(1.04);
  transform: scale(1.012);
}
#sf-boot::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 3, 4, .98) 0%, rgba(5, 4, 5, .91) 24%, rgba(5, 4, 5, .36) 57%, rgba(2, 2, 3, .12) 100%),
    linear-gradient(0deg, rgba(2, 2, 3, .62), transparent 42%, rgba(2, 2, 3, .28));
}
#sf-boot > :not(.sf-boot__back):not(.sf-boot__title) { width: min(25rem, 55%); }
#sf-boot .sf-boot__title,
#sf-boot > .sf-boot__title {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  box-sizing: content-box;
  padding-right: .28em;
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  line-height: 1.05;
}
#sf-boot .sf-boot__bar { width: min(25rem, 55%); height: 3px; background: rgba(241, 222, 183, .16); }
#sf-boot .sf-boot__fill { box-shadow: 0 0 1.1rem rgba(234, 177, 71, .52); }
#sf-boot .sf-boot__status { margin-top: .25rem; color: rgba(246, 211, 143, .92); }
#sf-boot .sf-boot__tip { width: min(31rem, 62%); margin-top: 1.25rem; color: rgba(239, 225, 198, .62); }

.sf-intro__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/saintfall/saintfall-title-menu.jpg?v=20260816-entry-1") center/cover no-repeat;
  filter: saturate(.88) contrast(1.04);
  opacity: 1;
  transform: scale(1.008);
  transition: opacity .82s ease, transform 8s ease;
  pointer-events: none;
}
.sf-intro__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 3, 4, .88) 0%, rgba(5, 4, 5, .62) 28%, rgba(5, 4, 5, .15) 60%, rgba(2, 2, 3, .04) 100%),
    linear-gradient(0deg, rgba(2, 2, 3, .45), transparent 45%, rgba(2, 2, 3, .18));
}
#sf-intro.is-ready:not(.is-running) .sf-intro__art { transform: scale(1.02); }
#sf-intro.is-running .sf-intro__art { opacity: 0; transform: scale(1.035); }
#sf-intro:not(.is-running) .sf-intro__scan { opacity: .2; }
#sf-intro:not(.is-running)::after { background: radial-gradient(circle at 67% 43%, transparent 16%, rgba(2,2,3,.28) 72%, rgba(2,2,3,.66)); }

.sf-intro__gate {
  left: clamp(2rem, 6.5vw, 6rem);
  top: 50%;
  /* A flex column, so an open panel SHRINKS to the stage rather than
     spilling past its bottom edge: the list inside scrolls (see
     .sf-entry__panel), the HUD SCALE row is never clipped off. `vh`
     could not do this - the stage is a fraction of the viewport. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: max-content;
  max-width: calc(100% - 3rem);
  max-height: calc(100% - 2.5rem);
  padding: 0;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  text-align: left;
  transform: translateY(-50%);
  overflow: visible;
  z-index: 10;
}
#sf-intro.is-running .sf-intro__gate { transform: translateY(-48%) scale(.985); }
.sf-entry__header { display: block; margin-bottom: 2rem; }
.sf-intro__gate .sf-entry__header h2,
#sf-intro .sf-entry__header h2 {
  margin: 0;
  display: inline-block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
  box-sizing: content-box;
  padding-right: .32em;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(2.6rem, 5.5vw, 4.6rem);
  letter-spacing: clamp(0.14em, 1.8vw, 0.24em);
  line-height: 1.05;
  background: linear-gradient(170deg, #f6d585, #d8a441 46%, #7a5320);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.9));
}
.sf-entry__actions {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  align-items: flex-start;
  width: max-content;
}
.sf-intro__gate .sf-entry__actions > button,
.sf-intro__gate .sf-entry__btn {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  min-height: 2.75rem;
  padding: .45rem 1.25rem .45rem .85rem;
  margin: 0;
  border: none !important;
  border-left: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.2rem, 2.3vw, 1.55rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(246, 230, 195, .92);
  text-shadow: 0 2px 14px rgba(0,0,0,0.95), 0 1px 4px rgba(0,0,0,0.9);
  cursor: pointer;
  transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease, text-shadow .2s ease;
}
.sf-intro__gate .sf-entry__actions > button span,
.sf-intro__gate .sf-entry__btn span {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}
.sf-intro__gate .sf-entry__actions > button:hover,
.sf-intro__gate .sf-entry__actions > button:focus-visible,
.sf-intro__gate .sf-entry__btn:hover,
.sf-intro__gate .sf-entry__btn:focus-visible {
  color: #ffffff;
  border-left-color: #f6d585 !important;
  background: linear-gradient(90deg, rgba(246, 213, 133, .22) 0%, rgba(216, 164, 65, .06) 55%, transparent 100%) !important;
  transform: translateX(8px);
  text-shadow: 0 0 18px rgba(246, 213, 133, .65), 0 2px 12px rgba(0,0,0,0.95);
}
.sf-intro__gate .sf-entry__continue:disabled {
  cursor: not-allowed;
  opacity: .35;
  transform: none !important;
  border-left-color: transparent !important;
  background: transparent !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.sf-intro__gate .sf-entry__continue b {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  font-weight: 400;
  color: rgba(144, 222, 192, .85);
  letter-spacing: .05em;
  text-transform: none;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
  white-space: nowrap;
}
.sf-intro__gate .sf-entry__continue:disabled b {
  color: rgba(220, 200, 170, .45);
}
.sf-intro__gate .sf-entry__tutorial b {
  min-width: 3.4rem;
  color: #8ed9b9;
  font-family: "Share Tech Mono", ui-monospace, monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: left;
  text-shadow: 0 0 12px rgba(121, 216, 178, .34), 0 2px 8px rgba(0, 0, 0, .9);
}
.sf-intro__gate .sf-entry__tutorial[aria-checked="false"] b {
  color: rgba(236, 190, 106, .78);
  text-shadow: 0 0 10px rgba(216, 164, 65, .24), 0 2px 8px rgba(0, 0, 0, .9);
}
.sf-entry__panel[hidden] { display: none !important; }
.sf-intro__gate:not([data-entry-panel="main"]) .sf-entry__actions { display: none; }
.sf-intro__gate:not([data-entry-panel="main"]) .sf-entry__header { margin-bottom: .45rem; }
.sf-intro__gate:not([data-entry-panel="main"]) .sf-entry__header h2,
#sf-intro .sf-intro__gate:not([data-entry-panel="main"]) .sf-entry__header h2 {
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  letter-spacing: .14em;
}
.sf-entry__header { flex: none; }
.sf-entry__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  margin-top: .4rem;
  width: min(26rem, 90vw);
  box-sizing: border-box;
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(226, 184, 96, .38);
  border-radius: 4px;
  background: rgba(9, 8, 10, .93);
  backdrop-filter: blur(20px);
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, .82), inset 0 0 0 1px rgba(255, 240, 207, .05);
  animation: sf-entry-panel .25s ease both;
}
/* "More below": intro.js sets data-scroll-more while the list inside
   has rows under the fold. A fade, not a bar - the overlay scrollbar
   is invisible until touched and the panel is opaque. */
.sf-entry__panel::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 1px;
  height: 2.2rem;
  background: linear-gradient(180deg, rgba(9, 8, 10, 0), rgba(9, 8, 10, .96) 78%);
  border-radius: 0 0 4px 4px;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.sf-entry__panel[data-scroll-more="true"]::after { opacity: 1; }
.sf-entry__panel > header { display: flex; flex: none; align-items: center; justify-content: space-between; margin-bottom: .65rem; color: #e7bb68; font-size: .62rem; letter-spacing: .17em; }
/* Every control INSIDE a panel gets its own base. The main-menu
   actions above are deliberately bare typography floated over the
   art, and the shared `.sf-intro__gate button` base the panels used to
   lean on went with the frame - which left the load slots and option
   switches on user-agent defaults: black `buttontext` on a near-black
   panel, the system sans, and no flex, so ON/OFF wrapped under its
   label. A <button> inherits neither colour nor font unless told to. */
.sf-intro__gate .sf-entry__panel button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  width: 100%;
  min-height: 3rem;
  margin: 0;
  padding: .55rem .75rem;
  border: 1px solid rgba(226, 188, 111, .24);
  border-radius: 0;
  background: rgba(15, 13, 16, .78);
  color: #f3e3bf;
  font: inherit;
  font-size: .6rem;
  letter-spacing: .13em;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
  box-shadow: none;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.sf-intro__gate .sf-entry__panel button:hover,
.sf-intro__gate .sf-entry__panel button:focus-visible {
  border-color: rgba(245, 207, 126, .72);
  background: rgba(44, 31, 24, .88);
  color: #fff0cf;
  outline: none;
}
.sf-intro__gate .sf-entry__panel button:focus-visible { box-shadow: 0 0 0 2px rgba(246, 213, 133, .38); }
.sf-intro__gate .sf-entry__panel button:disabled { cursor: not-allowed; }
.sf-intro__gate .sf-entry__panel button b {
  flex: none;
  color: rgba(255, 226, 168, .7);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .14em;
  white-space: nowrap;
}
.sf-intro__gate .sf-entry__panel > header button { width: 2.35rem; min-height: 2.35rem; padding: 0; justify-content: center; background: rgba(8,7,8,.7); border: 1px solid rgba(226,184,96,.2); color: #f6d585; box-shadow: none; font-size: 1.2rem; cursor: pointer; }
/* `grid-auto-rows: max-content` on both lists: when the panel is
   shrunk to a short stage (see .sf-intro__gate) the list becomes a
   flex item with a DEFINITE height smaller than its rows, and grid's
   `auto` rows then collapse to their minimum contributions - 3rem
   here - so a two-line row painted straight over the row beneath it.
   Rows sized to content cannot collapse; the list scrolls instead. */
.sf-entry__slots { display: grid; grid-auto-rows: max-content; gap: .38rem; max-height: min(18.5rem, 52vh); overflow: auto; overscroll-behavior: contain; }
.sf-entry__slots,
.sf-entry__options,
.sf-entry__characters { scrollbar-width: thin; scrollbar-color: #b77c2b rgba(10,8,8,.7); }
.sf-entry__slots::-webkit-scrollbar,
.sf-entry__options::-webkit-scrollbar,
.sf-entry__characters::-webkit-scrollbar { width: 6px; }
.sf-entry__slots::-webkit-scrollbar-track,
.sf-entry__options::-webkit-scrollbar-track,
.sf-entry__characters::-webkit-scrollbar-track { background: rgba(10,8,8,.7); }
.sf-entry__slots::-webkit-scrollbar-thumb,
.sf-entry__options::-webkit-scrollbar-thumb,
.sf-entry__characters::-webkit-scrollbar-thumb { background: #9a6726; border: 1px solid #d8a441; }
.sf-intro__gate .sf-entry__slots > button {
  min-height: 3.15rem;
  padding: .55rem .7rem;
  border-color: rgba(226, 188, 111, .2);
  background: rgba(15, 13, 16, .75);
  box-shadow: inset 2px 0 0 rgba(216,164,65,.42);
}
.sf-intro__gate .sf-entry__slots > button:disabled { cursor: not-allowed; opacity: .38; }
.sf-entry__slots button > span { display: grid; gap: .16rem; min-width: 0; text-align: left; }
.sf-intro__gate .sf-entry__slots small { color: rgba(232, 195, 126, .62); font-size: .46rem; letter-spacing: .15em; }
.sf-intro__gate[data-entry-panel="characters"] {
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(64rem, calc(100% - 2.5rem));
  max-width: calc(100% - 2.5rem);
  align-items: stretch;
  transition: none;
}
.sf-intro__gate[data-entry-panel="characters"] .sf-entry__header {
  margin-bottom: .35rem;
}
.sf-entry__panel--characters {
  align-self: stretch;
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-height: calc(100% - 1rem);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: .75rem .95rem;
  border-radius: 4px;
  background:
    linear-gradient(110deg, rgba(28, 20, 17, .94), rgba(7, 8, 10, .97) 48%, rgba(15, 12, 14, .96)),
    rgba(9, 8, 10, .96);
  overflow: hidden;
  container-type: inline-size;
  container-name: sf-characters;
}
.sf-entry__character-brief {
  flex: none;
  max-width: 52rem;
  margin: 0 0 .45rem;
  color: rgba(237, 218, 181, .78);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(13px, 1.7cqi, 15px);
  font-style: italic;
  letter-spacing: .025em;
  line-height: 1.3;
}
.sf-entry__characters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: max-content;
  gap: clamp(8px, 1.4cqi, 14px);
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px;
}
.sf-entry__panel--briefing {
  align-self: flex-start;
  width: min(54rem, calc(100vw - 4rem), calc(100% - 3rem));
  max-height: calc(100% - 1rem);
  padding: .9rem 1rem 1rem;
  border-radius: 0;
  background:
    linear-gradient(112deg, rgba(98, 63, 26, .2), transparent 38%),
    rgba(7, 8, 10, .97);
  overflow: hidden;
}
.sf-intro__gate[data-entry-panel="briefing"] { transition: opacity .45s ease; }
.sf-entry__briefing-body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(16rem, .85fr);
  gap: 1rem;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sf-entry__briefing-primary {
  display: grid;
  align-content: start;
  gap: .55rem;
  padding: .8rem .9rem;
  border-left: 3px solid #d8a441;
  background: linear-gradient(110deg, rgba(216, 164, 65, .11), transparent 68%);
}
.sf-entry__briefing-primary > small {
  color: #79d8ed;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .18em;
}
.sf-entry__briefing-primary h3 {
  margin: 0;
  color: #f6e6c4;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(1.25rem, 2.4vw, 2rem);
  font-weight: 550;
  letter-spacing: .1em;
  line-height: 1.1;
}
.sf-entry__briefing-primary p {
  margin: 0;
  color: rgba(239, 226, 202, .76);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(.86rem, 1.3vw, 1rem);
  line-height: 1.35;
}
.sf-entry__briefing-primary p strong { color: #f0d58c; font-family: "Cinzel", Georgia, serif; font-size: .76em; letter-spacing: .08em; }
.sf-entry__briefing-primary .sf-entry__briefing-order { color: #fff0cf; font-style: italic; }
.sf-entry__briefing-directives {
  display: grid;
  align-content: start;
  gap: .42rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf-entry__briefing-directives li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: .55rem;
  min-height: 3.6rem;
  padding: .55rem .65rem;
  border: 1px solid rgba(216, 164, 65, .2);
  background: rgba(2, 5, 7, .56);
}
.sf-entry__briefing-directives li > b { color: rgba(216, 164, 65, .64); font: 600 1rem/1 "Cinzel", Georgia, serif; }
.sf-entry__briefing-directives li > span { display: grid; align-content: center; gap: .18rem; }
.sf-entry__briefing-directives small { color: #79d8ed; font-size: .46rem; letter-spacing: .15em; }
.sf-entry__briefing-directives strong { color: rgba(246, 233, 209, .82); font-family: "Cormorant Garamond", Georgia, serif; font-size: .85rem; font-weight: 600; line-height: 1.18; }
.sf-entry__briefing-actions { display: grid; grid-template-columns: minmax(8rem, .55fr) minmax(14rem, 1fr); gap: .5rem; margin-top: .65rem; }
.sf-intro__gate .sf-entry__panel .sf-entry__briefing-actions button { justify-content: center; min-height: 2.7rem; border-radius: 0; }
.sf-intro__gate .sf-entry__panel .sf-entry__briefing-actions [data-intro-briefing-deploy] {
  border-color: rgba(225, 174, 80, .72);
  background: linear-gradient(90deg, rgba(128, 78, 25, .52), rgba(42, 29, 21, .9), rgba(128, 78, 25, .52));
  color: #ffe3a5;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 650;
}
.sf-intro__gate .sf-entry__panel button.sf-entry__character-card {
  --operative-accent: 216, 164, 65;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 100%;
  align-items: stretch;
  gap: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-color: rgba(var(--operative-accent), .35);
  border-radius: 4px;
  background: rgba(7, 7, 9, .92);
  box-shadow: inset 0 3px 0 rgba(var(--operative-accent), .3);
  text-transform: none;
  overflow: hidden;
  box-sizing: border-box;
}
.sf-intro__gate .sf-entry__character-card--verdigris { --operative-accent: 87, 174, 144; }
.sf-intro__gate .sf-entry__character-card--crimson { --operative-accent: 182, 66, 60; }
.sf-intro__gate .sf-entry__panel button.sf-entry__character-card:hover,
.sf-intro__gate .sf-entry__panel button.sf-entry__character-card:focus-visible,
.sf-intro__gate .sf-entry__panel button.sf-entry__character-card[aria-checked="true"] {
  border-color: rgba(var(--operative-accent), .9);
  background: linear-gradient(180deg, rgba(var(--operative-accent), .15), rgba(12, 10, 11, .97));
  box-shadow: inset 0 3px 0 rgb(var(--operative-accent)), 0 0 12px rgba(var(--operative-accent), .25);
  color: #fff3d8;
}
.sf-entry__character-portrait {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 135px;
  min-height: 70px;
  background: #080709;
  overflow: hidden;
  box-sizing: border-box;
}
.sf-entry__character-portrait::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  background: linear-gradient(0deg, rgba(7, 7, 9, .86), transparent);
  pointer-events: none;
}
.sf-entry__character-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  filter: saturate(.88) contrast(1.04);
  transition: filter .18s ease, transform .3s ease;
}
.sf-entry__character-card:hover .sf-entry__character-portrait img,
.sf-entry__character-card:focus-visible .sf-entry__character-portrait img,
.sf-entry__character-card[aria-checked="true"] .sf-entry__character-portrait img {
  filter: saturate(1) contrast(1.08);
  transform: scale(1.02);
}
.sf-entry__character-copy {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: .55rem .7rem .7rem;
  box-sizing: border-box;
}
.sf-intro__gate .sf-entry__character-copy small {
  color: rgb(var(--operative-accent));
  font-size: clamp(10px, 1.3cqi, 11.5px);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}
.sf-intro__gate .sf-entry__character-copy strong {
  color: #f6e6c4;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(14px, 2.2cqi, 18px);
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.15;
  text-transform: uppercase;
}
.sf-entry__character-copy > span:not(.sf-entry__character-traits) {
  color: rgba(239, 226, 202, .82);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(12.5px, 1.6cqi, 14.5px);
  letter-spacing: .01em;
  line-height: 1.32;
}
.sf-entry__character-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.sf-entry__character-traits > span {
  padding: 2.5px 6px;
  border-left: 2px solid rgba(var(--operative-accent), .82);
  background: rgba(var(--operative-accent), .12);
  color: rgba(246, 233, 209, .88);
  font-size: clamp(9.5px, 1.2cqi, 11px);
  font-weight: 650;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
  border-radius: 1px;
}
.sf-intro__gate .sf-entry__panel button.sf-entry__character-confirm {
  justify-content: center;
  flex: none;
  min-height: 2.5rem;
  margin-top: .5rem;
  padding: .45rem 1rem;
  border-color: rgba(225, 174, 80, .65);
  background: linear-gradient(90deg, rgba(128, 78, 25, .5), rgba(42, 29, 21, .88), rgba(128, 78, 25, .5));
  color: #ffe3a5;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(12px, 1.6cqi, 14px);
  font-weight: 600;
  letter-spacing: .16em;
  text-align: center;
  border-radius: 4px;
}
.sf-entry__options { display: grid; grid-auto-rows: max-content; gap: .35rem; max-height: min(24rem, 62vh); overflow: auto; overscroll-behavior: contain; }
.sf-intro__gate .sf-entry__options > button {
  min-height: 3rem;
  padding: .5rem .7rem;
  border-color: rgba(225, 188, 111, .2);
  background: rgba(15, 13, 16, .78);
  box-shadow: none;
}
.sf-entry__options button > span { display: grid; gap: .14rem; min-width: 0; text-align: left; }
.sf-intro__gate .sf-entry__options button span { font-family: inherit; font-size: .62rem; letter-spacing: .13em; }
.sf-entry__options button small,
.sf-entry__pick > span small { color: rgba(238, 224, 196, .66); font-family: "Cormorant Garamond",Georgia,serif; font-size: .82rem; font-style: italic; letter-spacing: .02em; text-transform: none; }
.sf-intro__gate .sf-entry__options button[aria-checked="true"] { border-color: rgba(121, 216, 178, .42); }
.sf-intro__gate .sf-entry__options button[aria-checked="true"] b { color: #8ed9b9; }
/* Segmented pickers (HUD scale, graphics quality). Two segments sit
   beside their label; a `--wide` row drops the segments onto their
   own line so four of them keep the same panel width. */
.sf-entry__pick,
.sf-entry__scale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .3rem .8rem;
  min-height: 3rem;
  padding: .5rem .7rem;
  border: 1px solid rgba(225,188,111,.2);
  background: rgba(15, 13, 16, .78);
  color: #f3e3bf;
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.sf-entry__pick > span,
.sf-entry__scale > span { display: grid; gap: .14rem; min-width: 0; }
.sf-entry__pick > div,
.sf-entry__scale > div { display: flex; flex-wrap: wrap; gap: .25rem; }
.sf-entry__pick--wide > div { grid-column: 1 / -1; margin-top: .15rem; }
.sf-entry__pick--wide > div button { flex: 1 1 0; }
.sf-intro__gate .sf-entry__pick button,
.sf-intro__gate .sf-entry__scale button { width: auto; min-height: 2rem; padding: .35rem .5rem; justify-content: center; border-color: rgba(225,188,111,.2); background: rgba(0, 0, 0, .28); box-shadow: none; color: rgba(243, 227, 191, .8); font-size: .5rem; letter-spacing: .12em; text-align: center; }
.sf-intro__gate .sf-entry__pick button:hover,
.sf-intro__gate .sf-entry__pick button:focus-visible,
.sf-intro__gate .sf-entry__scale button:hover,
.sf-intro__gate .sf-entry__scale button:focus-visible { color: #fff0cf; border-color: rgba(245, 207, 126, .72); }
.sf-intro__gate .sf-entry__pick button.is-active,
.sf-intro__gate .sf-entry__scale button.is-active { border-color: #e1ae50; background: rgba(150,93,33,.4); color: #ffe0a0; }
.sf-entry__slider { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, 150px); align-items: center; gap: .3rem .8rem; min-height: 2.75rem; padding: .5rem .7rem; border: 1px solid rgba(225,188,111,.2); background: rgba(15, 13, 16, .78); color: #f3e3bf; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; }
.sf-entry__slider > span { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; }
.sf-entry__slider small { color: #e1ae50; font-size: .55rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes sf-entry-panel { from { opacity: 0; transform: translateX(-.5rem); } to { opacity: 1; transform: none; } }

body.sf-high-contrast .sf-intro__gate { border-color: #ffe199; background: rgba(0,0,0,.96); backdrop-filter: none; }
/* The frame moved off the gate and onto the panels; so does the
   high-contrast treatment - stronger border, opaque ground, and every
   secondary text at full brightness. */
body.sf-high-contrast .sf-entry__panel { border-color: #ffe199; background: rgba(0, 0, 0, .97); backdrop-filter: none; }
body.sf-high-contrast .sf-intro__gate .sf-entry__panel button,
body.sf-high-contrast .sf-entry__pick,
body.sf-high-contrast .sf-entry__scale { border-color: rgba(255, 225, 153, .55); background: rgba(0, 0, 0, .9); color: #fff3d6; }
body.sf-high-contrast .sf-entry__options button small,
body.sf-high-contrast .sf-entry__pick > span small,
body.sf-high-contrast .sf-intro__gate .sf-entry__panel button b,
body.sf-high-contrast .sf-intro__gate .sf-entry__pick button,
body.sf-high-contrast .sf-intro__gate .sf-entry__scale button,
body.sf-high-contrast .sf-intro__gate .sf-entry__slots small,
body.sf-high-contrast .sf-entry__character-copy > span:not(.sf-entry__character-traits) { color: #f8edda; }

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  #sf-boot { align-items: center; justify-content: flex-end; padding: 2.25rem 1.35rem 3.2rem; text-align: center; }
  #sf-boot::after { background: linear-gradient(0deg, rgba(3,3,4,.98) 0%, rgba(4,4,5,.8) 38%, rgba(3,3,4,.12) 76%), linear-gradient(90deg, rgba(3,3,4,.28), transparent); }
  #sf-boot > :not(.sf-boot__back):not(.sf-boot__title), #sf-boot .sf-boot__bar, #sf-boot .sf-boot__tip { width: min(28rem, 92%); }
  #sf-boot .sf-boot__title, #sf-boot > .sf-boot__title { font-size: clamp(1.6rem, 7.5vw, 2.4rem); letter-spacing: clamp(0.12em, 2vw, 0.2em); padding-right: .2em; }
  .sf-intro__art, #sf-boot::before { background-position: 66% center; }
  .sf-intro__art::after { background: linear-gradient(0deg, rgba(3,3,4,.96), rgba(4,4,5,.67) 54%, rgba(3,3,4,.22)); }
  .sf-intro__gate {
    left: max(.75rem, env(safe-area-inset-left));
    top: auto;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    width: calc(100% - max(1.5rem, env(safe-area-inset-left) + env(safe-area-inset-right)));
    max-height: calc(100% - max(1.5rem, env(safe-area-inset-top) + env(safe-area-inset-bottom)));
    padding: 0;
    transform: none;
    overflow: visible;
  }
  #sf-intro.is-running .sf-intro__gate { transform: translateY(.4rem) scale(.985); }
  .sf-entry__header { margin-bottom: 1.2rem; }
  .sf-intro__gate .sf-entry__header h2,
  #sf-intro .sf-entry__header h2 { font-size: clamp(1.75rem, 8vw, 2.6rem); }
  .sf-entry__actions { width: 100%; gap: .6rem; }
  .sf-intro__gate .sf-entry__actions > button { min-height: 2.85rem; padding: .4rem .6rem; font-size: clamp(1.05rem, 4.8vw, 1.35rem); }
  .sf-entry__secondary { width: 100%; gap: .8rem; }
  .sf-intro__gate .sf-entry__secondary button { min-height: 2.6rem; font-size: clamp(.9rem, 4vw, 1.1rem); }
}

@container sf-characters (max-width: 640px) {
  .sf-entry__characters {
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: min(34rem, 60vh);
  }
  .sf-intro__gate .sf-entry__panel button.sf-entry__character-card {
    grid-template-columns: minmax(95px, 120px) minmax(0, 1fr);
    grid-template-rows: 1fr;
  }
  .sf-entry__character-portrait {
    aspect-ratio: 1 / 1;
    max-height: none;
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, .08);
  }
  .sf-entry__character-portrait img {
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
  }
  .sf-entry__character-copy {
    padding: 8px 12px;
    gap: 4px;
  }
}

@media (max-width: 720px) {
  .sf-intro__gate[data-entry-panel="characters"] {
    top: .5rem;
    bottom: .5rem;
    left: .5rem;
    right: .5rem;
    transform: none;
    width: auto;
    max-width: none;
    height: calc(100% - 1rem);
    max-height: calc(100% - 1rem);
  }
  .sf-intro__gate[data-entry-panel="characters"] .sf-entry__header {
    display: none;
  }
  .sf-entry__panel--characters { width: 100%; height: 100%; max-height: 100%; padding: .55rem .7rem; }
  .sf-entry__character-brief { margin-bottom: .35rem; font-size: 12px; }
  .sf-entry__characters { grid-template-columns: 1fr; gap: 6px; flex: 1 1 auto; min-height: 0; max-height: none; }
  .sf-intro__gate .sf-entry__panel button.sf-entry__character-card {
    grid-template-columns: minmax(75px, 95px) minmax(0, 1fr);
    grid-template-rows: 1fr;
    min-height: 75px;
  }
  .sf-entry__character-portrait {
    aspect-ratio: auto;
    max-height: none;
    height: 100%;
    width: 100%;
    border-right: 1px solid rgba(255, 255, 255, .08);
  }
  .sf-entry__character-portrait img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center 25%;
  }
  .sf-entry__character-copy { gap: 2px; padding: 6px 10px; min-width: 0; box-sizing: border-box; }
  .sf-intro__gate .sf-entry__character-copy small { font-size: 10px; }
  .sf-intro__gate .sf-entry__character-copy strong { font-size: 13.5px; }
  .sf-entry__character-copy > span:not(.sf-entry__character-traits) { font-size: 11.5px; line-height: 1.22; }
  .sf-entry__character-traits { gap: 2px; }
  .sf-entry__character-traits > span { font-size: 9px; padding: 1.5px 4px; }
  .sf-intro__gate .sf-entry__panel button.sf-entry__character-confirm {
    min-height: 2.2rem;
    margin-top: 5px;
    padding: 5px 12px;
    font-size: 12px;
  }
  .sf-entry__panel--briefing { width: 100%; padding: .7rem; }
  .sf-intro__gate[data-entry-panel="briefing"] {
    left: max(.75rem, env(safe-area-inset-left));
    right: max(.75rem, env(safe-area-inset-right));
    top: .75rem;
    bottom: .75rem;
    width: auto;
    height: auto;
    max-height: none;
    transform: none;
  }
  #sf-intro.is-running .sf-intro__gate[data-entry-panel="briefing"] { transform: none; }
  .sf-intro__gate[data-entry-panel="briefing"] .sf-entry__header { display: none; }
  .sf-intro__gate[data-entry-panel="briefing"] .sf-entry__panel--briefing { height: 100%; max-height: 100%; margin-top: 0; }
  .sf-entry__briefing-body { grid-template-columns: 1fr; gap: .55rem; }
  .sf-entry__briefing-primary { gap: .4rem; padding: .6rem .68rem; }
  .sf-entry__briefing-directives { grid-template-columns: 1fr; }
  .sf-entry__briefing-directives li { min-height: 3.1rem; }
  .sf-entry__briefing-actions { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
}

@media (orientation: landscape) and (max-height: 500px) {
  #sf-boot { justify-content: center; align-items: flex-start; padding: 1.2rem 3rem; text-align: left; }
  #sf-boot > :not(.sf-boot__back):not(.sf-boot__title), #sf-boot .sf-boot__bar, #sf-boot .sf-boot__tip { width: min(23rem, 48%); }
  #sf-boot .sf-boot__title, #sf-boot > .sf-boot__title { font-size: 1.85rem; letter-spacing: 0.18em; padding-right: .18em; }
  #sf-boot .sf-boot__tip { margin-bottom: .35rem; margin-top: .35rem; font-size: .76rem; }
  .sf-intro__gate { left: 1.5rem; top: 50%; bottom: auto; width: min(27rem, calc(100% - 3rem)); max-height: calc(100% - 1rem); padding: 0; transform: translateY(-50%); }
  #sf-intro.is-running .sf-intro__gate { transform: translateY(-48%) scale(.985); }
  .sf-entry__header { margin-bottom: .8rem; }
  .sf-intro__gate .sf-entry__header h2,
  #sf-intro .sf-entry__header h2 { font-size: 1.65rem; }
  .sf-entry__actions { gap: .4rem; }
  .sf-intro__gate .sf-entry__actions > button { font-size: 1.05rem; padding: .25rem .5rem; }
  .sf-entry__secondary { gap: .8rem; margin-top: .2rem; }
  .sf-intro__gate .sf-entry__secondary button { font-size: .95rem; }
  .sf-entry__slots, .sf-entry__options { max-height: 13.75rem; }
  .sf-intro__gate[data-entry-panel="characters"] {
    top: .4rem;
    bottom: .4rem;
    left: .6rem;
    right: .6rem;
    transform: none;
    width: auto;
    max-width: none;
    height: calc(100% - .8rem);
    max-height: calc(100% - .8rem);
  }
  .sf-intro__gate[data-entry-panel="characters"] .sf-entry__header { display: none; }
  .sf-entry__panel--characters { width: 100%; height: 100%; max-height: 100%; padding: .45rem .65rem; }
  .sf-entry__panel--characters > header { margin-bottom: .2rem; }
  .sf-entry__character-brief { display: none; }
  .sf-entry__characters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; flex: 1 1 auto; min-height: 0; max-height: none; }
  .sf-intro__gate .sf-entry__panel button.sf-entry__character-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sf-entry__character-portrait { aspect-ratio: 16 / 9; max-height: 70px; }
  .sf-entry__character-copy { gap: 2px; padding: 4px 6px; }
  .sf-intro__gate .sf-entry__character-copy small { font-size: 9.5px; }
  .sf-intro__gate .sf-entry__character-copy strong { font-size: 12.5px; }
  .sf-entry__character-copy > span:not(.sf-entry__character-traits) {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.15;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .sf-entry__character-traits > span { font-size: 9px; padding: 1.5px 3px; }
  .sf-intro__gate .sf-entry__panel button.sf-entry__character-confirm { min-height: 1.9rem; margin-top: 4px; padding: 4px 8px; font-size: 11.5px; }
  .sf-intro__gate[data-entry-panel="briefing"] { top: .5rem; bottom: .5rem; height: calc(100% - 1rem); max-height: none; transform: none; }
  #sf-intro.is-running .sf-intro__gate[data-entry-panel="briefing"] { transform: none; }
  .sf-intro__gate[data-entry-panel="briefing"] .sf-entry__header { display: none; }
  .sf-entry__panel--briefing { width: min(54rem, calc(100vw - 3rem), calc(100% - 3rem)); padding: .55rem .65rem; }
  .sf-intro__gate[data-entry-panel="briefing"] .sf-entry__panel--briefing { height: 100%; max-height: 100%; margin-top: 0; }
  .sf-entry__panel--briefing > header { margin-bottom: .3rem; }
  .sf-entry__briefing-body { grid-template-columns: minmax(0, 1fr) minmax(16rem, 1fr); gap: .45rem; }
  .sf-entry__briefing-primary { gap: .25rem; padding: .45rem .55rem; }
  .sf-entry__briefing-primary h3 { font-size: 1rem; }
  .sf-entry__briefing-primary p { font-size: .68rem; line-height: 1.18; }
  .sf-entry__briefing-primary p:nth-of-type(2) { display: none; }
  .sf-entry__briefing-directives { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .28rem; }
  .sf-entry__briefing-directives li { grid-template-columns: 1fr; gap: .15rem; min-height: 4.35rem; padding: .35rem .4rem; }
  .sf-entry__briefing-directives li > b { font-size: .72rem; }
  .sf-entry__briefing-directives small { font-size: .35rem; }
  .sf-entry__briefing-directives strong { font-size: .56rem; line-height: 1.08; }
  .sf-entry__briefing-actions { margin-top: .35rem; }
  .sf-intro__gate .sf-entry__panel .sf-entry__briefing-actions button { min-height: 2.2rem; padding: .3rem; font-size: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-intro__art { transform: none !important; }
  .sf-entry__panel { animation: none; }
  .sf-entry__character-portrait img { transition: none; }
  .sf-entry__briefing-primary, .sf-entry__briefing-actions { transition: none; }
}