@font-face {
  font-family: "Satoshi";
  font-weight: 300;
  font-display: block;
  src: url("fonts/satoshi-300.woff2") format("woff2");
}
@font-face {
  font-family: "Satoshi";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/satoshi-400.woff2") format("woff2");
}
@font-face {
  font-family: "VT323";
  font-display: swap;
  src: url("fonts/vt323.woff2") format("woff2");
}
@font-face {
  font-family: "Gentium Book Plus";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/gentium-italic.woff2") format("woff2");
}

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --void: #000;
  --starlight: #eef0f6;
  --scramble: #8fd3d6;
  --pale-dot: #a9cdff;
  --fs: 120px; /* the mark's size, set by JS */
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--void);
  color: var(--starlight);
}

body {
  font-family: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

@media (pointer: fine) {
  body { cursor: none; }
  .chip { cursor: none; }
}

#space {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .25s ease;
}
#space.on { opacity: 1; }


.type-fallback {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fallback {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  font-weight: 300;
  font-size: clamp(48px, 12vw, 160px);
  color: var(--starlight);
}

/* ------------------------------------------------ cockpit */

#hud {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
/* drawn into the picture by the renderer instead */
#hud.gl { visibility: hidden; }

.chip {
  position: fixed;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgb(238 240 246 / .16);
  border-radius: 50%;
  background: rgb(6 8 14 / .32);
  color: rgb(238 240 246 / .55);
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease, background-color .3s ease, opacity .6s ease;
  -webkit-tap-highlight-color: transparent;
}
.chip svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chip:hover { color: rgb(238 240 246 / .95); border-color: rgb(238 240 246 / .4); }
.chip:focus-visible { outline: 1px solid rgb(190 230 255 / .9); outline-offset: 3px; }
.chip[hidden] { display: none; }

.pilot { right: calc(16px + var(--sar)); bottom: calc(16px + var(--sab)); }
.pilot .i-close, .pilot.on .i-ship { display: none; }
.pilot.on .i-close { display: block; }
.pilot.on { background: rgb(6 8 14 / .5); }

.fs { right: calc(16px + var(--sar)); top: calc(16px + var(--sat)); width: 32px; height: 32px; opacity: .7; }
.fs svg { width: 15px; height: 15px; }
.fs .i-out, .fs.on .i-in { display: none; }
.fs.on .i-out { display: block; }
/* the camera switch, only while flying */
.cam { right: calc(64px + var(--sar)); bottom: calc(16px + var(--sab)); display: none; }
body.flying .cam { display: grid; }
.cam .i-cockpit, .cam.on .i-chase { display: none; }
.cam.on .i-cockpit { display: block; }
.chip .k { display: none; }
/* the helm button, the first time it shows */
.pilot.reveal { animation: reveal 1.1s steps(9, end); }
@keyframes reveal {
  0% { opacity: 0; transform: scale(.6); }
  30% { opacity: 1; }
  45% { opacity: .2; }
  60% { opacity: 1; transform: none; }
  75% { opacity: .4; }
}

/* in flight the chips turn into keys of the terminal, in a row up in the top right corner */
body.flying .chip {
  top: calc(12px + var(--sat));
  bottom: auto;
  width: 64px;
  height: 28px;
  border-radius: 2px;
  border-color: rgb(150 255 196 / .36);
  background: rgb(2 12 7 / .4);
  color: rgb(150 255 196 / .82);
  font: 19px/1 "VT323", "Courier New", monospace;
  letter-spacing: .04em;
  text-shadow: 0 0 6px rgb(150 255 196 / .6);
  box-shadow: 0 0 12px rgb(150 255 196 / .1), inset 0 0 10px rgb(150 255 196 / .07);
  filter: blur(.25px);
}
body.flying .chip > svg { display: none !important; }
body.flying .chip .k { display: block; padding-top: 1px; }
body.flying .chip:hover { color: rgb(200 255 222); border-color: rgb(150 255 196 / .7); background: rgb(2 18 10 / .55); }
body.flying .chip:focus-visible { outline: 1px solid rgb(150 255 196 / .9); outline-offset: 2px; }
body.flying .chip:active { background: rgb(150 255 196 / .18); }
body.flying .pilot { right: calc(12px + var(--sar)); }
body.flying .cam { right: calc(84px + var(--sar)); width: 84px; }
body.flying .fs { right: calc(176px + var(--sar)); opacity: 1; }

/* the name for the board: drawn by the instruments, typed into this (invisible, under the box) */
.pilot-name {
  position: fixed;
  z-index: 6;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  opacity: 0;
  font-size: 16px;   /* (no zoom on focus, on a phone) */
  background: transparent;
  color: transparent;
  caret-color: transparent;
  user-select: text;
  -webkit-user-select: text;
}
.pilot-name[hidden] { display: none; }

/* the last two keys of the code, on a touch screen */
.konami {
  position: fixed;
  left: 50%;
  bottom: calc(40px + var(--sab));
  z-index: 6;
  display: flex;
  gap: 30px;
  transform: translateX(-50%);
  animation: boot .5s steps(6, end);
}
.konami[hidden] { display: none; }
.konami button {
  width: 66px;
  height: 66px;
  padding: 0;
  border: 1.5px solid rgb(150 255 196 / .55);
  border-radius: 50%;
  background: rgb(2 12 7 / .45);
  color: rgb(150 255 196 / .95);
  font: 34px/1 "VT323", "Courier New", monospace;
  text-shadow: 0 0 8px rgb(150 255 196 / .7);
  box-shadow: 0 0 16px rgb(150 255 196 / .18), inset 0 0 12px rgb(150 255 196 / .1);
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.konami button.hit { animation: hit .35s ease-out; }
@keyframes hit { from { background: rgb(150 255 196 / .45); } }
@keyframes boot {
  0% { opacity: 0; }
  40% { opacity: .8; }
  55% { opacity: .1; }
}

/* ------------------------------------------------ cursor */

.cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity .4s ease;
}
.cursor i {
  position: absolute;
  left: -14px;
  top: -14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgb(238 240 246 / .32);
}
.cursor::after {
  content: "";
  position: absolute;
  left: -1.5px;
  top: -1.5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgb(238 240 246 / .85);
}
.cursor.pulse i { animation: pulse .7s cubic-bezier(.2, .7, .2, 1); }
@keyframes pulse {
  from { transform: scale(.4); border-color: rgb(238 240 246 / .9); }
}
.cursor.away { opacity: 0; }
@media (pointer: coarse) {
  .cursor { display: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .cursor.pulse i, .pilot.reveal, .konami, .konami button.hit { animation: none; }
}