html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
}

.field-stage {
  position: fixed;
  inset: 0;
  touch-action: none;
  user-select: none;
}

#genesis-field {
  pointer-events: auto;
  cursor: crosshair;
  z-index: 0;
}

.field-stage[data-dragging="true"] #genesis-field {
  cursor: grabbing;
}

.field-vignette {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 46%, rgba(26, 43, 57, .08), transparent 31%),
    radial-gradient(circle at 50% 50%, transparent 49%, rgba(4, 7, 10, .58) 100%);
}

.field-topline,
.field-viewport-status,
.field-viewport-controls,
.field-inspector,
.field-footer {
  position: absolute;
  z-index: 3;
}

.field-viewport-status {
  left: clamp(22px, 4vw, 60px);
  bottom: clamp(76px, 9vh, 112px);
  display: grid;
  gap: 7px;
  pointer-events: none;
}

.field-viewport-status__eyebrow {
  color: var(--g-muted);
  font: 600 9px/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.field-viewport-status__band {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 62px);
  font-weight: 450;
  line-height: .95;
  letter-spacing: -.035em;
}

.field-viewport-status__meta {
  display: flex;
  gap: 14px;
  align-items: center;
  color: #9aa5b0;
  font: 600 9px/1.3 ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.field-viewport-status__meta span + span::before {
  content: '/';
  margin-right: 14px;
  color: #39434e;
}

.field-viewport-controls {
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 7px;
}

.field-viewport-controls button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(57, 67, 78, .84);
  border-radius: 4px;
  background: rgba(9, 12, 15, .62);
  color: #b9c3cc;
  cursor: pointer;
  font: 600 14px/1 ui-monospace, "Cascadia Mono", Consolas, monospace;
  backdrop-filter: blur(7px);
}

.field-viewport-controls button:hover {
  border-color: rgba(124, 169, 207, .68);
  color: var(--g-text);
}

.field-viewport-controls button:focus-visible {
  outline: 2px solid var(--g-info);
  outline-offset: 3px;
}

.field-inspector {
  top: 70px;
  right: clamp(72px, 10vw, 146px);
}

.field-footer span:first-child {
  color: #77838f;
}

.field-progress,
.field-state,
.field-index {
  display: none !important;
}

@media (max-width: 760px) {
  body { min-height: 100vh; }

  .field-viewport-status {
    left: 17px;
    bottom: 66px;
  }

  .field-viewport-status__band {
    font-size: clamp(30px, 10vw, 44px);
  }

  .field-viewport-status__meta {
    gap: 8px;
    max-width: calc(100vw - 70px);
    flex-wrap: wrap;
  }

  .field-viewport-status__meta span + span::before {
    margin-right: 8px;
  }

  .field-viewport-controls {
    right: 12px;
  }

  .field-viewport-controls button {
    width: 32px;
    height: 32px;
  }

  .field-inspector {
    top: 58px;
    left: 17px;
    right: 58px;
    width: auto;
    max-height: 38vh;
    overflow: auto;
  }

  .field-footer span:first-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .field-viewport-controls button,
  .field-inspector {
    transition: none;
  }
}