:root {
  /* Compliance tokens: Condense Condensed** labels Interprets hostile subterranean */
  --cave-black: #02040A;
  --void: #07111F;
  --cyan: #38F8FF;
  --lichen: #B8FF4D;
  --amethyst: #8A5CFF;
  --magenta: #C42B7A;
  --bone: #E6E1CF;
  --orange: #FF6A2A;
  --scan-progress: 0;
  --cursor-x: 50vw;
  --cursor-y: 50vh;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: #02040A;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(56, 248, 255, .12), transparent 18rem),
    linear-gradient(90deg, #02040A 0%, #07111F 44%, #02040A 100%);
  color: #E6E1CF;
  font-family: "IBM Plex Sans Condensed", "Arial Narrow", "Inter", system-ui, sans-serif;
  letter-spacing: .035em;
}

body.awake .boot-void { opacity: 0; pointer-events: none; transform: scale(1.04); }
body.locked { background: radial-gradient(circle at 50% 50%, rgba(184,255,77,.14), #07111F 38%, #02040A 70%); }

.boot-void {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #02040A;
  transition: opacity 1200ms ease, transform 1600ms ease;
}

.boot-coord {
  position: absolute;
  top: 1.1rem;
  right: 1.35rem;
  color: #38F8FF;
  font: 500 .72rem "Oxanium", ui-monospace, monospace;
  text-transform: uppercase;
  animation: blink 1.4s steps(2) infinite;
}

.pressure-tremor {
  position: absolute;
  left: 8vw;
  right: 8vw;
  top: 7vh;
  height: 1px;
  background: linear-gradient(90deg, transparent, #E6E1CF, #38F8FF, transparent);
  filter: drop-shadow(0 0 10px #38F8FF);
  animation: tremor .16s infinite alternate;
}

.grain, .scanline-geology, .sonar-cursor, .sonar-pulse { pointer-events: none; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 12;
  opacity: .19;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 18% 29%, rgba(230,225,207,.25) 0 1px, transparent 1px),
    radial-gradient(circle at 68% 72%, rgba(56,248,255,.16) 0 1px, transparent 1px),
    radial-gradient(circle at 43% 51%, rgba(196,43,122,.16) 0 1px, transparent 1px);
  background-size: 41px 53px, 67px 71px, 97px 83px;
}

.scanline-geology {
  position: fixed;
  inset: 0;
  z-index: 5;
  background:
    repeating-linear-gradient(178deg, transparent 0 13px, rgba(56,248,255,.12) 14px, transparent 16px),
    repeating-linear-gradient(92deg, transparent 0 121px, rgba(184,255,77,.06) 122px, transparent 124px);
  clip-path: polygon(0 16%, 12% 21%, 20% 15%, 37% 30%, 50% 22%, 64% 36%, 79% 27%, 100% 40%, 100% 100%, 0 100%);
  transform: translateX(calc(var(--scan-progress) * -7vw));
  opacity: .45;
  animation: geologyCrawl 9s linear infinite;
}

.sonar-cursor {
  position: fixed;
  left: var(--cursor-x);
  top: var(--cursor-y);
  width: 12px;
  height: 12px;
  z-index: 20;
  border: 1px solid #38F8FF;
  transform: translate(-50%, -50%) rotate(45deg);
  filter: drop-shadow(0 0 12px #38F8FF);
}

.sonar-pulse {
  position: fixed;
  left: var(--cursor-x);
  top: var(--cursor-y);
  width: 2px;
  height: 2px;
  z-index: 4;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(56,248,255,.28), 0 0 0 0 rgba(196,43,122,.18);
  transform: translate(-50%, -50%);
}

.sonar-pulse.pinging { animation: sonar 1.15s ease-out; }

.depth-ruler {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 15;
  width: 4.2rem;
  border-right: 1px solid rgba(230,225,207,.19);
  background: linear-gradient(180deg, rgba(7,17,31,.92), rgba(2,4,10,.72));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5.4rem .45rem 4rem;
  color: #E6E1CF;
  font: 600 .65rem "Oxanium", ui-monospace, monospace;
}

.depth-ruler span::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 1px;
  margin-right: 5px;
  vertical-align: middle;
  background: #38F8FF;
}

.coordinate-dial {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 18;
  width: 8rem;
  height: 8rem;
  border: 1px solid rgba(56,248,255,.5);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(7,17,31,.85), rgba(2,4,10,.38));
  box-shadow: inset 0 0 25px rgba(56,248,255,.12), 0 0 35px rgba(56,248,255,.08);
  transition: transform .5s ease;
}

.coordinate-dial::before, .coordinate-dial::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(230,225,207,.22);
  border-radius: 50%;
}

.coordinate-dial::after { inset: 48%; border-radius: 0; border-color: #FF6A2A; transform: rotate(45deg); }

.coordinate-dial button {
  position: absolute;
  width: 1.65rem;
  height: 1.65rem;
  border: 1px solid rgba(230,225,207,.35);
  background: #02040A;
  color: #E6E1CF;
  font: 700 .7rem "Orbitron", "Oxanium", monospace;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.coordinate-dial button:nth-child(1) { left: 50%; top: -5px; transform: translateX(-50%); }
.coordinate-dial button:nth-child(2) { right: 2px; top: 29%; }
.coordinate-dial button:nth-child(3) { right: 19px; bottom: 3px; }
.coordinate-dial button:nth-child(4) { left: 19px; bottom: 3px; }
.coordinate-dial button:nth-child(5) { left: 2px; top: 29%; }
.coordinate-dial button.active { color: #B8FF4D; border-color: #B8FF4D; box-shadow: 0 0 18px rgba(184,255,77,.35); }

.negative-atlas {
  width: 100%;
  min-height: 100vh;
}

.field {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 18vh 9vw 14vh max(8rem, 10vw);
  background:
    radial-gradient(circle at 75% 35%, color-mix(in srgb, var(--glow) 16%, transparent), transparent 18rem),
    linear-gradient(110deg, #02040A, #07111F 48%, #02040A);
  isolation: isolate;
}

.field::before {
  content: "";
  position: absolute;
  inset: -8vh -10vw;
  z-index: -2;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(196,43,122,.13), transparent 30%),
    linear-gradient(120deg, transparent 0 38%, rgba(230,225,207,.05) 39% 40%, transparent 41%),
    repeating-linear-gradient(12deg, rgba(230,225,207,.035) 0 1px, transparent 1px 36px);
  clip-path: polygon(0 10%, 14% 20%, 28% 14%, 36% 28%, 47% 19%, 58% 36%, 72% 24%, 86% 32%, 100% 26%, 100% 100%, 0 100%);
  transform: translateX(calc((var(--scan-progress) - .5) * -10vw));
}

.field::after {
  content: "DEPTH " attr(style);
  position: absolute;
  right: -4rem;
  bottom: 10vh;
  transform: rotate(90deg);
  color: rgba(230,225,207,.09);
  font: 800 5rem "Orbitron", Impact, sans-serif;
  letter-spacing: .14em;
  pointer-events: none;
}

.field-index {
  color: var(--glow);
  font: 700 .75rem "Oxanium", ui-monospace, monospace;
  letter-spacing: .24em;
  margin-bottom: 1.4rem;
  text-shadow: 0 0 18px color-mix(in srgb, var(--glow) 55%, transparent);
}

h1, h2 {
  margin: 0;
  max-width: 11ch;
  font-family: "Orbitron", "Oxanium", "Arial Black", system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  line-height: .9;
  color: #E6E1CF;
  text-shadow: 0 0 3px #02040A, 0 0 34px color-mix(in srgb, var(--glow) 38%, transparent);
}

h1 { font-size: clamp(3rem, 10vw, 10rem); max-width: 9ch; word-break: break-word; }
h2 { font-size: clamp(2.7rem, 8vw, 7.6rem); }

.field-note {
  position: relative;
  max-width: 34rem;
  margin: 2rem 0 0;
  padding-left: 1.1rem;
  border-left: 1px solid var(--glow);
  color: rgba(230,225,207,.82);
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.45;
}

.serif { font-family: "Noto Serif Display", Georgia, "Times New Roman", serif; font-style: italic; letter-spacing: .02em; }

.hud-fragment, .coord-readout, .fracture-pocket, .annotation-needle, .lichen-glyphs, .river-reflection, .status-strip {
  font-family: "Oxanium", ui-monospace, monospace;
  text-transform: uppercase;
}

.ceiling-slit {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--aperture);
  background: linear-gradient(180deg, rgba(230,225,207,.72), rgba(56,248,255,.24) 18%, rgba(2,4,10,.1));
  clip-path: polygon(0 0, 100% 0, 100% 22%, 82% 35%, 67% 23%, 48% 36%, 31% 20%, 16% 32%, 0 19%);
  filter: blur(.2px) drop-shadow(0 0 24px rgba(56,248,255,.3));
}

.top-left { position: absolute; left: max(8rem, 10vw); top: 9vh; color: #38F8FF; font-size: .68rem; }
.coord-readout { position: absolute; right: 11vw; bottom: 12vh; color: #B8FF4D; font-size: .74rem; }

.fault-slice {
  position: absolute;
  inset: 0;
  background: linear-gradient(132deg, transparent 0 28%, rgba(255,106,42,.18) 29% 36%, rgba(2,4,10,.6) 37% 46%, transparent 47%);
  clip-path: polygon(0 12%, 32% 0, 41% 40%, 100% 10%, 100% 100%, 73% 80%, 57% 100%, 29% 72%, 0 87%);
}

.fracture-pocket {
  position: absolute;
  max-width: 18rem;
  padding: .8rem;
  border: 1px solid rgba(255,106,42,.55);
  background: rgba(2,4,10,.62);
  color: #FF6A2A;
  font-size: .72rem;
  clip-path: polygon(0 0, 88% 0, 100% 32%, 91% 100%, 6% 100%, 0 76%);
}
.pocket-a { right: 12vw; top: 27vh; }
.pocket-b { left: 45vw; bottom: 18vh; color: #E6E1CF; border-color: rgba(230,225,207,.35); }

.waveform { position: absolute; left: 14vw; bottom: 13vh; display: flex; gap: .7rem; align-items: center; }
.waveform i { width: 2px; height: 4rem; background: #FF6A2A; display: block; animation: wave 1.6s ease-in-out infinite; box-shadow: 0 0 14px #FF6A2A; }
.waveform i:nth-child(2n) { animation-delay: -.4s; height: 7rem; }
.waveform i:nth-child(3n) { animation-delay: -.8s; height: 2rem; }

.black-river {
  position: absolute;
  left: -10vw;
  right: -10vw;
  bottom: 8vh;
  height: 39vh;
  background: radial-gradient(ellipse at 50% 0, rgba(56,248,255,.22), transparent 13%), linear-gradient(#02040A, #000);
  border-top: 1px solid rgba(56,248,255,.45);
  border-radius: 50% 50% 0 0 / 35% 35% 0 0;
  box-shadow: inset 0 18px 35px rgba(56,248,255,.08), 0 -20px 45px rgba(56,248,255,.08);
}
.river-reflection { position: absolute; right: 9vw; bottom: 10vh; transform: scaleY(-1); color: rgba(56,248,255,.34); font-size: 1.1rem; letter-spacing: .2em; }
.eel-trace { position: absolute; left: 42vw; top: 43vh; width: 34vw; height: 10vh; }
.eel-trace span { position: absolute; inset: 0; border-top: 2px solid #38F8FF; border-radius: 50%; animation: eel 3s ease-in-out infinite; filter: drop-shadow(0 0 10px #38F8FF); }
.eel-trace span:nth-child(2) { top: 18px; border-color: #C42B7A; animation-delay: -.8s; }
.eel-trace span:nth-child(3) { top: 36px; border-color: #B8FF4D; animation-delay: -1.3s; }
.annotation-needle { position: absolute; color: #38F8FF; font-size: .65rem; }
.annotation-needle::before { content: ""; display: block; width: 7rem; height: 1px; background: currentColor; transform: rotate(-28deg); transform-origin: left; }
.needle-one { top: 23vh; right: 18vw; }
.needle-two { bottom: 29vh; left: 23vw; }

.mineral-plates span {
  position: absolute;
  width: 32vw;
  height: 54vh;
  left: 46vw;
  top: 18vh;
  background: linear-gradient(145deg, rgba(138,92,255,.3), rgba(56,248,255,.08), rgba(196,43,122,.18));
  border: 1px solid rgba(230,225,207,.22);
  clip-path: polygon(28% 0, 100% 18%, 82% 100%, 0 74%);
  mix-blend-mode: screen;
  animation: plate 6s ease-in-out infinite;
}
.mineral-plates span:nth-child(2) { transform: translate(-7vw, 4vh) rotate(8deg); animation-delay: -.7s; }
.mineral-plates span:nth-child(3) { transform: translate(7vw, -3vh) rotate(-12deg); animation-delay: -1.4s; }
.mineral-plates span:nth-child(4) { transform: translate(-14vw, 12vh) rotate(18deg); animation-delay: -2.1s; }
.mineral-plates span:nth-child(5) { transform: translate(13vw, 9vh) rotate(22deg); animation-delay: -2.8s; }
.pressure-bubbles i { position: absolute; border: 1px solid rgba(138,92,255,.75); border-radius: 50%; box-shadow: inset 0 0 14px rgba(138,92,255,.18), 0 0 18px rgba(138,92,255,.22); animation: bubble 4s ease-in-out infinite; }
.pressure-bubbles i:nth-child(1) { width: 4rem; height: 4rem; left: 18vw; bottom: 20vh; }
.pressure-bubbles i:nth-child(2) { width: 2rem; height: 2rem; left: 28vw; top: 25vh; animation-delay: -.5s; }
.pressure-bubbles i:nth-child(3) { width: 7rem; height: 7rem; right: 10vw; bottom: 26vh; animation-delay: -1s; }
.pressure-bubbles i:nth-child(4) { width: 1.2rem; height: 1.2rem; right: 35vw; top: 17vh; animation-delay: -1.8s; }
.pressure-bubbles i:nth-child(5) { width: 3rem; height: 3rem; right: 21vw; top: 50vh; animation-delay: -2.4s; }
.lichen-glyphs { position: absolute; left: 10vw; bottom: 11vh; color: #B8FF4D; font-size: .78rem; animation: glyph 3s steps(3) infinite; }

.coordinate-field { display: grid; place-items: center; text-align: center; padding-left: max(8rem, 10vw); }
.coordinate-field .field-index, .coordinate-field .field-note { justify-self: center; }
.coordinate-field h2 { max-width: 12ch; }
.coordinate-field .field-note { border-left: 0; padding-left: 0; }
.coordinate-cage { position: absolute; inset: 16vh 18vw; border: 1px solid rgba(184,255,77,.38); transform: perspective(700px) rotateX(58deg) rotateZ(45deg); box-shadow: 0 0 70px rgba(184,255,77,.08); }
.coordinate-cage span { position: absolute; inset: 12%; border: 1px solid rgba(56,248,255,.25); transform: translateZ(0); }
.coordinate-cage span:nth-child(2) { inset: 24%; border-color: rgba(196,43,122,.32); }
.coordinate-cage span:nth-child(3) { inset: 36%; border-color: rgba(255,106,42,.36); }
.coordinate-cage span:nth-child(4) { inset: 48%; border-color: #B8FF4D; }
.lock-button {
  margin-top: 2.4rem;
  position: relative;
  z-index: 2;
  border: 1px solid #B8FF4D;
  background: rgba(2,4,10,.72);
  color: #B8FF4D;
  padding: 1rem 1.35rem;
  font: 800 .78rem "Orbitron", "Oxanium", monospace;
  letter-spacing: .18em;
  cursor: pointer;
  box-shadow: inset 0 0 20px rgba(184,255,77,.1), 0 0 25px rgba(184,255,77,.14);
}
.final-mark { position: absolute; bottom: 11vh; left: 50%; transform: translateX(-50%); font: 800 clamp(1.5rem, 4vw, 4.5rem) "Orbitron", sans-serif; letter-spacing: .35em; color: rgba(230,225,207,.14); }
.answer-bloom { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #B8FF4D; opacity: 0; box-shadow: 0 0 0 0 rgba(184,255,77,.35), 0 0 0 0 rgba(56,248,255,.25), 0 0 0 0 rgba(138,92,255,.22); }
body.locked .answer-bloom { opacity: 1; animation: bloom 2.4s ease-out forwards; }
.triangulation { position: absolute; width: min(70vw, 42rem); height: min(70vw, 42rem); stroke: #B8FF4D; fill: none; opacity: .4; filter: drop-shadow(0 0 20px rgba(184,255,77,.24)); }

.contours { position: absolute; inset: auto 0 4vh 6vw; width: 92vw; height: 45vh; fill: none; stroke: var(--glow); stroke-width: 1.2; opacity: .46; filter: drop-shadow(0 0 9px color-mix(in srgb, var(--glow) 60%, transparent)); }
.contours path { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw 7s ease-in-out infinite; }
.contours path:nth-child(2) { animation-delay: .6s; opacity: .72; }
.contours path:nth-child(3) { animation-delay: 1.1s; opacity: .46; }

.status-strip {
  position: fixed;
  left: 4.2rem;
  right: 0;
  bottom: 0;
  z-index: 18;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 1rem;
  border-top: 1px solid rgba(230,225,207,.2);
  background: rgba(2,4,10,.78);
  color: rgba(230,225,207,.7);
  font-size: .68rem;
}
.status-strip b { color: #38F8FF; font-weight: 800; }

@keyframes blink { 50% { opacity: .18; } }
@keyframes tremor { from { transform: translateX(-2px) scaleY(1); } to { transform: translateX(3px) scaleY(1.7); } }
@keyframes sonar { to { box-shadow: 0 0 0 14rem rgba(56,248,255,0), 0 0 0 22rem rgba(196,43,122,0); opacity: 0; } }
@keyframes geologyCrawl { to { background-position: 160px 0, -120px 0; } }
@keyframes draw { 0% { stroke-dashoffset: 1200; opacity: .05; } 35%, 70% { stroke-dashoffset: 0; opacity: .66; } 100% { stroke-dashoffset: -1200; opacity: .08; } }
@keyframes wave { 50% { transform: scaleY(.28); opacity: .45; } }
@keyframes eel { 50% { transform: translateX(5vw) scaleY(.35); opacity: .35; } }
@keyframes plate { 50% { filter: hue-rotate(20deg) brightness(1.2); opacity: .65; } }
@keyframes bubble { 50% { transform: translateY(-1rem) scale(1.2); opacity: .45; } }
@keyframes glyph { 50% { text-shadow: 0 0 18px #B8FF4D; opacity: .35; } }
@keyframes bloom { to { box-shadow: 0 0 0 18rem rgba(184,255,77,0), 0 0 0 28rem rgba(56,248,255,0), 0 0 0 38rem rgba(138,92,255,0); transform: rotate(180deg); } }

@media (max-width: 760px) {
  .depth-ruler { width: 2.8rem; font-size: .52rem; padding-left: .2rem; }
  .field { padding-left: 4.2rem; padding-right: 1.2rem; }
  .coordinate-dial { transform: scale(.72); transform-origin: top right; }
  .status-strip { left: 2.8rem; font-size: .52rem; flex-wrap: wrap; }
  .fracture-pocket, .coord-readout, .top-left { position: relative; inset: auto; margin-top: 1rem; display: block; }
  .mineral-plates span { left: 38vw; width: 48vw; }
}