/* Caminho verde — superfície e registros */

body.realm-superior {
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-page="superior-gate"] {
  --observer: clamp(140px, 32vw, 220px);
}

body.realm-superior .stage {
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  min-height: 100dvh;
  padding: clamp(2.2rem, 7vh, 4rem) 1.4rem 3.2rem;
}

body[data-page="superior-gate"] .observer--green {
  opacity: 0;
  touch-action: manipulation;
  transition: opacity 2.4s var(--ease-out), filter 0.8s ease;
}

body[data-page="superior-gate"] .observer--green.is-visible {
  opacity: 1;
}

body[data-page="superior-gate"] .observer--green.is-withdrawn {
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
  transition: opacity 1.15s var(--ease-out), filter 1.15s var(--ease-out);
}

body[data-page="superior-gate"] .observer--green.is-disturbed .observer__svg {
  animation: observer-breathe 5.5s ease-in-out infinite, glitch-slice 200ms steps(2, jump-none);
  filter: drop-shadow(0 0 8px rgba(92, 255, 157, 0.08));
}

.field {
  position: relative;
  z-index: 2;
  width: min(74vw, 430px);
  height: min(74vw, 430px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.constellation {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.constellation.is-active {
  opacity: 1;
}

.constellation__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.constellation__link {
  fill: none;
  stroke: #1e4a32;
  stroke-width: 0.45;
  opacity: 0;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  transition: opacity 0.9s ease, stroke-dashoffset 1.1s var(--ease-out);
}

.constellation__link--spoke {
  stroke: #163224;
  stroke-width: 0.32;
}

.constellation__link.is-visible {
  opacity: 0.7;
  stroke-dashoffset: 0;
}

.constellation.is-settled .constellation__link:not(.constellation__link--spoke) {
  opacity: 0.28;
}

.node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  color: #5cff9d;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.node.is-visible {
  opacity: 0.92;
  transform: scale(1);
}

.node.is-arriving {
  animation: node-arrive 360ms steps(2, jump-none);
}

.node svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: miter;
  filter: drop-shadow(0 0 5px rgba(92, 255, 157, 0.18));
}

.copy-well {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(36rem, 90vw);
  margin-top: clamp(1.4rem, 4vh, 2.2rem);
  min-height: 4.6rem;
}

.surface-line,
.channel-line {
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  font-weight: 300;
  text-align: center;
}

.surface-line {
  max-width: 26em;
  font-size: clamp(0.92rem, 2.4vw, 1.08rem);
  line-height: 1.85;
  letter-spacing: 0.14em;
  color: #8a948c;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 2s var(--ease-out), transform 2s var(--ease-out), filter 1s ease;
}

.surface-line.is-visible {
  opacity: 0.82;
  transform: none;
}

.surface-line.is-withdrawn {
  opacity: 0;
  filter: blur(4px);
  position: absolute;
  width: 100%;
  pointer-events: none;
}

.late-hint {
  margin-top: 1.6rem;
  max-width: 26em;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  font-weight: 300;
  font-size: clamp(0.8rem, 2vw, 0.92rem);
  line-height: 1.85;
  letter-spacing: 0.12em;
  color: #2f4a3a;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 2.2s var(--ease-out), transform 2.2s var(--ease-out);
}

.late-hint.is-visible {
  opacity: 0.72;
  transform: none;
}

.late-hint--spoil {
  margin-top: 1.1rem;
  color: #4a7a5c;
}

.late-hint--spoil.is-visible {
  opacity: 0.9;
}

body.is-record-open .late-hint,
body.is-observing .late-hint {
  opacity: 0;
  pointer-events: none;
}

.channel-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.channel-line {
  font-size: clamp(0.88rem, 2.2vw, 1.02rem);
  line-height: 1.75;
  letter-spacing: 0.16em;
  color: #6d8a76;
  max-width: 26em;
  margin-top: 0.95rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.7s var(--ease-out), transform 1.7s var(--ease-out);
}

.channel-line:first-child {
  margin-top: 0;
}

.channel-line.is-visible {
  opacity: 0.88;
  transform: none;
}

.channel-line.is-withdrawn {
  opacity: 0;
}

.channel-line--coda {
  margin-top: 1.6rem;
  letter-spacing: 0.12em;
  color: #8a948c;
}

.channel-line--coda.is-visible {
  opacity: 0.9;
}

.inscription {
  margin-top: 1.35rem;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  font-weight: 300;
  font-size: clamp(0.84rem, 2.1vw, 0.98rem);
  line-height: 1.75;
  letter-spacing: 0.16em;
  color: #4a7a5c;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 0.32em;
  text-decoration-thickness: 1px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 2s var(--ease-out), transform 2s var(--ease-out), color 0.4s ease;
}

.inscription.is-visible {
  opacity: 0.92;
  transform: none;
  pointer-events: auto;
}

.inscription:hover,
.inscription:focus-visible {
  color: #6d8a76;
}

.index-mark {
  position: fixed;
  right: clamp(1rem, 4vw, 2.2rem);
  bottom: clamp(1rem, 4vh, 2rem);
  z-index: 6;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.32em;
  color: #1e4a32;
  opacity: 0;
  transition: opacity 2.2s var(--ease-out);
  user-select: none;
  pointer-events: none;
}

.index-mark.is-visible {
  opacity: 0.7;
}

.obs-iris-marks {
  fill: none;
  stroke: #5cff9d;
  stroke-width: 1.05;
  opacity: 0;
  transition: opacity 2.2s ease;
}

.observer.is-marked .obs-iris-marks {
  opacity: 0.42;
}

/* ——— Registro interno (terminal) ——— */

body.is-record-open {
  overflow: hidden;
}

body.is-record-open,
body.is-record-open.is-pointer {
  cursor: text;
}

body.is-record-open .cursor-ghost {
  display: none;
}

.record-layer {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 80;
  display: none;
  flex-direction: column;
  height: 100dvh;
  background: #050807;
  color: #3d5c48;
  font-family: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  font-weight: 300;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.02em;
  transition: opacity 0.5s ease;
}

.record-layer.is-open {
  display: flex;
}

.record-layer__log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.4rem 1.15rem 0.8rem;
}

.record-line {
  white-space: pre-wrap;
  word-break: break-word;
  color: #3a5644;
  opacity: 0;
  transform: translateY(4px);
  animation: record-in 0.55s var(--ease-out) forwards;
}

.record-line--dim {
  color: #2a3d31;
}

.record-line--signal {
  color: #4a7a5c;
}

.record-line--echo {
  color: #2f4a3a;
}

.record-line--input {
  color: #6d8a76;
  margin-top: 0.7rem;
}

.record-layer__form {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.15rem calc(0.85rem + env(safe-area-inset-bottom));
  border-top: 1px solid #101810;
  background: #050807;
}

.record-layer__prompt {
  color: #2f6144;
  user-select: none;
}

.record-layer__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: #6d8a76;
  font: inherit;
  caret-color: #3d8b5c;
}

.record-layer__input:disabled {
  opacity: 0.45;
}

@keyframes record-in {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes node-arrive {
  0% {
    transform: translate(-1px, 0) scale(1);
    filter: brightness(1.6);
  }
  50% {
    transform: translate(2px, 1px) scale(1.05);
  }
  100% {
    transform: none;
    filter: none;
  }
}

@media (max-width: 720px) {
  .field {
    width: min(84vw, 340px);
    height: min(84vw, 340px);
  }

  .node {
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
  }

  .surface-line {
    letter-spacing: 0.08em;
    padding: 0 0.6rem;
  }

  .channel-copy {
    min-height: 10rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="superior-gate"] .observer--green,
  .surface-line,
  .channel-line,
  .node,
  .constellation__link {
    opacity: 1;
    transform: none;
    transition: none;
  }
}