@font-face { font-family: "VT323"; src: url("assets/VT323-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Nasalization"; src: url("assets/Nasalization Rg.otf") format("opentype"); font-display: swap; } @font-face { font-family: "JedhaAFDomabesh"; src: url("assets/JedhaAFDomabesh.otf") format("opentype"); font-display: swap; } :root { --wire: #33ff66; --wire-dim: #33ff6688; --bg: #000; --scan-alpha: 0.25; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--wire); font-family: "VT323", "Courier New", ui-monospace, monospace; overflow: hidden; } #scene { display: block; width: 100vw; height: 100vh; image-rendering: pixelated; image-rendering: crisp-edges; } #starmap { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; image-rendering: pixelated; image-rendering: crisp-edges; } #starmap[hidden] { display: none; } /* During a starmap burst, hide the terminal HUD so the cartography feed fills the screen */ body.starmap-active .hud, body.starmap-active .frame, body.starmap-active .alien-band { display: none; } /* Boot overlay — first-visit terminal typing sequence */ #boot { position: fixed; inset: 0; z-index: 100; background: #000; color: var(--wire); font-size: 1.3rem; letter-spacing: 0.08em; padding: 0 12vw; display: flex; flex-direction: column; justify-content: center; transition: opacity 500ms ease; overflow: hidden; } #boot.done { opacity: 0; } .boot-line { text-shadow: 0 0 5px var(--wire); white-space: pre; line-height: 1.5; } .boot-cursor { display: inline-block; width: 0.55em; height: 1em; background: var(--wire); box-shadow: 0 0 5px var(--wire); vertical-align: text-bottom; margin-left: 0.15em; animation: boot-blink 0.8s steps(1, end) infinite; } @keyframes boot-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .boot-skip { position: absolute; bottom: 2rem; right: 2rem; color: var(--wire-dim); font-size: 0.75rem; letter-spacing: 0.2em; } /* Corner brackets framing the display */ .frame { position: fixed; inset: 0; pointer-events: none; z-index: 2; } .corner { position: absolute; width: 22px; height: 22px; border: 1px solid var(--wire-dim); box-shadow: 0 0 4px rgba(51, 255, 102, 0.25); } .corner-tl { top: 1.2rem; left: 1.2rem; border-right: none; border-bottom: none; } .corner-tr { top: 1.2rem; right: 1.2rem; border-left: none; border-bottom: none; } .corner-bl { bottom: 1.2rem; left: 1.2rem; border-right: none; border-top: none; } .corner-br { bottom: 1.2rem; right: 1.2rem; border-left: none; border-top: none; } /* HUD panels — dim green low-contrast; the ship stays the focus */ .hud { position: fixed; z-index: 2; letter-spacing: 0.15em; color: var(--wire-dim); text-shadow: 0 0 4px rgba(51, 255, 102, 0.4); pointer-events: none; font-size: 0.7rem; line-height: 1.4; } /* Hide HUD chrome and corner frame until the reveal degauss completes. JS adds `hud-revealed` to after degFx duration (~1800ms). */ .hud, .frame { opacity: 0; transition: opacity 600ms ease-in; } body.hud-revealed .hud, body.hud-revealed .frame { opacity: 1; } .hud-tl { top: 2.6rem; left: 2.6rem; max-width: 20rem; } .hud-tr { top: 2.6rem; right: 2.6rem; max-width: 20rem; text-align: right; } .hud-bl { bottom: 2.6rem; left: 2.6rem; } .hud-br { bottom: 2.6rem; right: 2.6rem; text-align: right; } .hud-block + .hud-block { margin-top: 0.9rem; } .hud-k { font-size: 0.6rem; color: var(--wire-dim); opacity: 0.7; letter-spacing: 0.2em; } .hud-v { font-size: 0.78rem; color: var(--wire); text-shadow: 0 0 5px var(--wire); margin-bottom: 0.35rem; } .hud-right .hud-v { text-align: right; } .hud-tx-rx { letter-spacing: 0.2em; } .tx-rx { color: var(--wire); text-shadow: 0 0 6px var(--wire); display: inline-block; margin: 0 0.15rem 0 0.25rem; } .tx-rx-tx { animation: blink-tx 1.7s steps(1, end) infinite; } .tx-rx-rx { animation: blink-rx 1.1s steps(1, end) infinite; } @keyframes blink-tx { 0%, 42% { opacity: 1; } 43%, 100% { opacity: 0.15; } } @keyframes blink-rx { 0%, 30% { opacity: 0.15; } 31%, 60% { opacity: 1; } 61%, 100% { opacity: 0.15; } } /* NASA / JPL mark */ .hud-mark-line { font-family: "Nasalization", "VT323", ui-monospace, monospace; font-weight: 400; font-size: 1.35rem; letter-spacing: 0.05em; color: var(--wire); text-shadow: 0 0 6px var(--wire); display: inline-block; margin-bottom: 0.4rem; line-height: 1; } .hud-mark-sub { font-size: 0.6rem; letter-spacing: 0.25em; opacity: 0.7; } /* EEG waveform strip */ #eeg { display: block; margin-top: 0.3rem; border: 1px solid var(--wire-dim); background: rgba(0, 0, 0, 0.3); } /* Extraction log — small centered stack near top (moved from bottom to avoid the alien ring) */ .hud-log { top: 2.6rem; left: 50%; transform: translateX(-50%); width: min(48rem, 80vw); text-align: left; font-size: 0.7rem; letter-spacing: 0.15em; } .log-line { color: var(--wire-dim); opacity: 0.25; transition: opacity 400ms ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .log-line.log-fresh { color: var(--wire); opacity: 1; text-shadow: 0 0 5px var(--wire); } .log-line.log-recent { opacity: 0.6; } .log-line.log-old { opacity: 0.35; } #loading { position: fixed; top: 2.6rem; left: 50%; transform: translateX(-50%); z-index: 3; letter-spacing: 0.25em; font-size: 0.75rem; color: var(--wire); text-shadow: 0 0 6px var(--wire); pointer-events: none; } #diag { position: fixed; top: 1.5rem; right: 1.5rem; z-index: 3; padding: 0.9rem 1rem; min-width: 260px; border: 1px solid var(--wire-dim); background: rgba(0, 0, 0, 0.55); color: var(--wire); text-shadow: 0 0 6px var(--wire); letter-spacing: 0.15em; font-size: 0.75rem; box-shadow: 0 0 12px rgba(51, 255, 102, 0.15) inset; } #diag[hidden] { display: none; } .diag-title { font-size: 0.7rem; color: var(--wire-dim); margin-bottom: 0.6rem; border-bottom: 1px dashed var(--wire-dim); padding-bottom: 0.4rem; } .diag-row { display: grid; grid-template-columns: 4rem 1fr 3.5rem; align-items: center; gap: 0.6rem; } .diag-row-fx { grid-template-columns: 4rem 1fr 3.5rem auto; } .diag-btn { appearance: none; -webkit-appearance: none; background: transparent; border: 1px solid var(--wire); color: var(--wire); font-family: inherit; font-size: 0.65rem; letter-spacing: 0.12em; padding: 0.2rem 0.45rem; cursor: pointer; text-shadow: 0 0 4px var(--wire); box-shadow: 0 0 4px rgba(51, 255, 102, 0.2) inset; } .diag-btn:hover { background: rgba(51, 255, 102, 0.12); } .diag-btn:active { background: var(--wire); color: #000; text-shadow: none; } .diag-label { font-size: 0.7rem; } .diag-value { font-size: 0.7rem; text-align: right; color: var(--wire-dim); } #diag input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; height: 1.2rem; cursor: pointer; } #diag input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: var(--wire-dim); } #diag input[type="range"]::-moz-range-track { height: 2px; background: var(--wire-dim); } #diag input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 14px; margin-top: -6px; background: var(--wire); box-shadow: 0 0 6px var(--wire); border: 0; border-radius: 0; } #diag input[type="range"]::-moz-range-thumb { width: 10px; height: 14px; background: var(--wire); box-shadow: 0 0 6px var(--wire); border: 0; border-radius: 0; } .diag-row + .diag-row { margin-top: 0.5rem; } /* Alien script band — Jedha glyphs marqueed around an invisible circle, rendered into a low-res canvas and upscaled with the same pixelation as the main scene. */ /* The alien band is composited into the WebGL scene as a CanvasTexture — this DOM canvas exists only as the texture source, so it must not paint itself. */ .alien-band { display: none; } /* Scanlines overlay */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, var(--scan-alpha)) 3px, rgba(0, 0, 0, var(--scan-alpha)) 3px ); } /* Subtle vignette */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient( ellipse at center, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.6) 100% ); }