/* The easter egg stays inside the hero; page ownership is restored on exit. */
.space-environment { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.space-environment canvas { display: block; width: 100%; height: 100%; }
.hero__portrait { display: flex; min-width: 0; min-height: 0; justify-content: center; transform-origin: 75% 100%; }
.hero__portrait .hero__scene { width: 100%; }
.combat-toggle {
  position: absolute; top: calc(var(--nav-height) + 22px); right: max(var(--gutter), 5vw);
  z-index: 5; width: 42px; height: 42px; display: grid; place-items: center;
  color: #a9aaa5; background: #080b0d80; border: 1px solid #777b7955;
  transition: color .2s, border-color .2s; cursor: pointer;
}
.combat-toggle svg { width: 22px; height: 22px; }
.combat-toggle:hover, .combat-toggle[aria-pressed="true"] { color: #eae9e5; border-color: #d5ae5780; }
.combat-toggle__tip {
  position: absolute; right: 52px; white-space: nowrap; pointer-events: none;
  font: 11px var(--font-mono); color: #eae9e5; background: #151a1f; padding: 8px 12px;
  opacity: 0; visibility: hidden; transition: opacity .2s;
}
.combat-toggle:hover .combat-toggle__tip, .combat-toggle:focus-visible .combat-toggle__tip { opacity: 1; visibility: visible; }
.combat-toggle[aria-pressed="true"] .combat-toggle__tip { display: none; }
.combat-hud {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  color: #b2b5b5; font: 11px/1.7 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.combat-hud p { margin: 0; }
.combat-hud__score { position: absolute; top: 34px; left: max(var(--gutter), 5vw); }
.combat-hud__mode { color: #eae9e5; margin-bottom: 7px !important; }
.combat-hud__mode span { display: inline-block; width: 5px; height: 5px; margin: 0 7px 2px 0; background: #d5ae57; }
.combat-hud__exit { position: absolute; top: 26px; right: max(var(--gutter), 5vw); min-height: 44px; padding: 0 8px; border: 0; background: none; color: #d6d9d7; font: inherit; text-transform: inherit; pointer-events: auto; cursor: pointer; }
.combat-hud__ammo { position: absolute; bottom: 36px; left: max(var(--gutter), 5vw); width: clamp(150px, 18vw, 240px); }
.combat-hud__ammo-label { display: flex; justify-content: space-between; color: #eae9e5; }
.combat-hud__ammo-track { border-top: 1px solid #777b79; margin-top: 8px; padding-top: 7px; height: 18px; }
.combat-hud__ammo-track span { display: block; height: 8px; width: 88px; background: repeating-linear-gradient(90deg,#eae9e5 0 7px,transparent 7px 11px); }
.combat-hud__reload { pointer-events: auto; cursor: pointer; font: inherit; text-transform: uppercase; color: #b2b5b5; background: none; border: 0; min-height: 44px; padding: 8px 0; text-align: left; }
.combat-hud__reload:disabled { cursor: default; color: #8d9298; }
.combat-hud__system { position: absolute; right: max(var(--gutter), 5vw); bottom: 48px; width: 100px; text-align: right; border-bottom: 1px solid #777b79; padding-bottom: 7px; text-shadow: 0 1px 4px #000; }
.combat-hud__system span { display: block; }
.combat-hud__system span:last-child { color: #d5ae57; }
.combat-hud__instruction { position: absolute; bottom: 22px; left: max(var(--gutter), 5vw); white-space: nowrap; font-size: 10px; color: #b2b5b5; }
/* The reference world extends beyond the viewport; the shared world keeps
   the character's feet attached to its crown throughout idle/combat motion. */
@media (min-width: 721px) {
  .hero { --planet-size: clamp(420px, 42vw, 800px); --character-size: clamp(260px, 36svh, 420px); }
  .hero__portrait { position: absolute; right: -3vw; bottom: 0; width: var(--planet-size); height: 100%; transform-origin: 50% 100%; }
  .hero__portrait .hero__scene { height: 100%; padding: 0; }
  .hero__world { position: absolute; bottom: calc(var(--planet-size) * -.6); width: 100%; }
  .hero__dialog { position: absolute; bottom: calc(var(--planet-size) * .4 + var(--character-size) * .945 + 16px); }
  .hero__planet-contact { width: 20%; }
}
.combat-weapon { position: absolute; bottom: -22px; left: 50%; width: clamp(135px, 12vw, 205px); z-index: 3; pointer-events: none; margin-left: clamp(-102.5px, -6vw, -67.5px); }
.combat-weapon__sway, .combat-weapon__recoil { position: relative; transform-origin: 50% 100%; }
.combat-weapon__sway { will-change: transform; }
.combat-weapon__muzzle, .combat-weapon__breech { position: absolute; top: 6.5%; left: 50%; width: 0; height: 0; pointer-events: none; }
.combat-weapon__breech { top: 75%; }
.combat-weapon img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.combat-weapon__flash { position: absolute; top: 6.5%; left: 50%; width: 14px; height: 34px; background: #fff2c3; opacity: 0; clip-path: polygon(50% 0,65% 35%,100% 55%,66% 70%,50% 100%,36% 70%,0 55%,35% 35%); transform: translate(-50%,-50%); }
.combat-crosshair { --aim-color: #eae9e5; position: absolute; z-index: 5; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; color: var(--aim-color); }
.combat-crosshair i { position: absolute; background: currentColor; transform: translateY(calc(-1 * var(--reticle-kick, 0px))); }
.combat-crosshair i:nth-child(1), .combat-crosshair i:nth-child(2) { width: 1px; height: 8px; left: 16px; }
.combat-crosshair i:nth-child(1) { bottom: calc(50% + 7px + var(--reticle-spread, 0px)); }
.combat-crosshair i:nth-child(2) { top: calc(50% + 7px + var(--reticle-spread, 0px)); }
.combat-crosshair i:nth-child(3), .combat-crosshair i:nth-child(4) { height: 1px; width: 8px; top: 16px; }
.combat-crosshair i:nth-child(3) { right: calc(50% + 7px + var(--reticle-spread, 0px)); }
.combat-crosshair i:nth-child(4) { left: calc(50% + 7px + var(--reticle-spread, 0px)); }
.combat-crosshair span { position: absolute; left: 15px; top: 15px; width: 3px; height: 3px; background: currentColor; }
.combat-crosshair__hit { position: absolute; inset: 9px; border: 1px solid #f4d48d; transform: rotate(45deg); opacity: var(--reticle-hit, 0); }
.combat-crosshair.is-protected { color: #b8bcbc; }
.combat-tracers { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.combat-tracers line { stroke-linecap: round; }
.combat-tracers__glow { stroke: #d5ae57; stroke-width: 5; opacity: .35; }
.combat-tracers__core { stroke: #fff2bf; stroke-width: 1.5; }
.combat-crosshair.is-target { --aim-color: #d5ae57; }
.hero.is-combat { cursor: none; }
.hero.is-combat:focus { outline: none; }
.hero.is-combat .hero__frame { pointer-events: none; }
.hero.is-combat .hero__portrait { pointer-events: auto; }
.hero.is-combat .hero__dialog-box { cursor: default; }
.hero.is-combat [data-hero-character], .hero.is-combat [data-hero-dialog-box] { cursor: none !important; }
.hero.is-combat .hero__dialog-tail { opacity: 0; }
.hero.is-combat .hero__dialog-box { min-width: 160px; }
body.is-combat-aiming .pixel-cursor { visibility: hidden !important; }
.combat-toggle:focus-visible, .combat-hud button:focus-visible { outline: 2px solid #d5ae57; outline-offset: 5px; }
.combat-hud button:hover { color: #eae9e5; }
.combat-toggle[hidden], .combat-hud[hidden], .combat-weapon[hidden], .combat-crosshair[hidden] { display: none; }
@media (max-width: 720px), (pointer: coarse) {
  .combat-toggle, .combat-hud, .combat-weapon, .combat-crosshair { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .combat-toggle, .combat-toggle__tip { transition: none; }
}