/*
 * Avendor Hero Rig 0.4.0
 * Walk-test-only character and Town Center map rendering overrides.
 * Loaded AFTER avendor.css so the cinematic/title stylesheet remains untouched.
 */

.walk-stage {
  touch-action: none;
  isolation: isolate;
}

.walk-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4500;
  background: #070a0d;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}

.walk-stage.map-transitioning::after {
  opacity: 1;
}

/*
 * Phase 1 world-time lighting.
 * Geometry and source art stay identical between dayparts; only presentation changes.
 */
.walk-stage > .stage-art,
.walk-stage .scene-occluder image {
  transition: filter 1.15s ease;
}

.walk-stage[data-daypart="day"] > .stage-art,
.walk-stage[data-daypart="day"] .scene-occluder image {
  filter: brightness(1.15) saturate(.90) contrast(.96) hue-rotate(-3deg);
}

.walk-stage[data-daypart="dawn"] > .stage-art,
.walk-stage[data-daypart="dawn"] .scene-occluder image {
  filter: brightness(.98) saturate(.89) contrast(.97) hue-rotate(-7deg);
}

.walk-stage[data-daypart="dusk"] > .stage-art,
.walk-stage[data-daypart="dusk"] .scene-occluder image {
  filter: none;
}

.walk-stage[data-daypart="night"] > .stage-art,
.walk-stage[data-daypart="night"] .scene-occluder image {
  filter: brightness(.58) saturate(.72) contrast(1.04) hue-rotate(9deg);
}

.daypart-overlay {
  position: absolute;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
  opacity: 0;
  background: transparent;
  transition: opacity 1.15s ease, background 1.15s ease;
}

.walk-stage[data-daypart="day"] .daypart-overlay {
  opacity: .18;
  background: rgba(191, 216, 231, .20);
  mix-blend-mode: screen;
}

.walk-stage[data-daypart="dawn"] .daypart-overlay {
  opacity: .36;
  background: linear-gradient(
    180deg,
    rgba(123, 102, 144, .42) 0%,
    rgba(203, 148, 112, .26) 42%,
    rgba(67, 83, 109, .18) 100%
  );
  mix-blend-mode: soft-light;
}

.walk-stage[data-daypart="dusk"] .daypart-overlay {
  opacity: .16;
  background: linear-gradient(
    180deg,
    rgba(78, 86, 130, .18) 0%,
    rgba(142, 91, 69, .15) 44%,
    rgba(32, 42, 61, .16) 100%
  );
  mix-blend-mode: soft-light;
}

.walk-stage[data-daypart="night"] .daypart-overlay {
  opacity: .74;
  background: linear-gradient(
    180deg,
    rgba(18, 41, 76, .74) 0%,
    rgba(8, 23, 48, .78) 54%,
    rgba(4, 12, 28, .86) 100%
  );
  mix-blend-mode: multiply;
}

.scene-occluder {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  image-rendering: pixelated;
  pointer-events: none;
  user-select: none;
}

.scene-occluder image {
  image-rendering: pixelated;
}

.map-debug-layer {
  position: absolute;
  inset: 0;
  z-index: 4000;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, visibility 0s linear .16s;
}

.map-debug-layer.show {
  opacity: 1;
  visibility: visible;
  transition: opacity .16s ease;
}

.player,
.map-npc {
  --perspective-scale: 1;
  position: absolute;
  width: 8.83%;
  aspect-ratio: 128 / 240;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) scale(var(--perspective-scale));
  filter: none;
  image-rendering: pixelated;
  user-select: none;
  pointer-events: none;
}

.player {
  left: 42%;
  top: 70%;
}

.player::before,
.map-npc::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1.5%;
  width: 47%;
  height: 4.8%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(8,10,12,.48) 0%,
    rgba(8,10,12,.25) 48%,
    rgba(8,10,12,0) 76%
  );
  z-index: 0;
}

.player-canvas,
.map-npc-canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  z-index: 1;
}

/* Disable the old two-step bob. The atlas owns the gait now. */
.player.walking { animation: none; }

.player.confused {
  animation: hero-rig-confused 1.5s ease-in-out;
}

.confusion-mark {
  z-index: 4100;
}

.walk-help {
  width: 52%;
  z-index: 5000;
}

.dev-badge {
  z-index: 5000;
  background: rgba(7,10,13,.76);
  letter-spacing: .04em;
}

.hero-rig-controls {
  position: absolute;
  left: 2.2%;
  top: 5.8%;
  z-index: 5000;
  display: flex;
  align-items: center;
  gap: .35em;
  padding: .38em .46em;
  border: 1px solid rgba(211,173,99,.42);
  border-radius: 3px;
  background: rgba(6,9,12,.78);
  font: 700 clamp(7px, .72vw, 12px)/1 ui-monospace, Consolas, monospace;
  color: #c9b27e;
}

.hero-rig-controls button {
  padding: .38em .58em;
  border: 1px solid rgba(211,173,99,.4);
  border-radius: 2px;
  background: rgba(36,41,46,.88);
  color: #d8c69d;
  font: inherit;
  cursor: pointer;
}

.hero-rig-controls button:hover,
.hero-rig-controls button:focus-visible {
  border-color: #d9b66f;
  color: #fff0bf;
  outline: none;
}

.hero-rig-controls button.selected {
  border-color: #e0ba70;
  color: #fff0bf;
  background: rgba(104,76,37,.88);
  box-shadow: inset 0 0 8px rgba(224,186,112,.14);
}

#daypart-cycle {
  min-width: 8.6em;
  text-transform: capitalize;
}

.interaction-prompt {
  position: absolute;
  left: 50%;
  bottom: 4.2%;
  z-index: 5000;
  max-width: 55%;
  padding: .42em .72em;
  transform: translateX(-50%) translateY(8px);
  border: 1px solid rgba(224,186,112,.62);
  border-radius: 3px;
  background: rgba(6,9,12,.88);
  color: #fff0bf;
  font: 700 clamp(8px, .82vw, 14px)/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: .025em;
  text-align: center;
  text-shadow: 1px 2px 0 #000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}

.interaction-prompt.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
  transition: opacity .14s ease, transform .14s ease;
}

.sr-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes hero-rig-confused {
  0%,100% { rotate: 0deg; }
  18% { rotate: -3deg; }
  36% { rotate: 3deg; }
  54% { rotate: -2deg; }
  72% { rotate: 2deg; }
}

@media (prefers-reduced-motion: reduce) {
  .walk-stage > .stage-art,
  .walk-stage .scene-occluder image,
  .daypart-overlay {
    transition: none;
  }
}