@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/InstrumentSans-400-700.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/IBMPlexMono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #d6d2cb;
  --dim: #6f6a62;
  --brass: #a98c5f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #050505;
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  overflow: hidden;
}

#view {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none;
}

#mast {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  left: 24px;
  pointer-events: none;
  mix-blend-mode: screen;
}
#mast h1 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.34em;
  color: var(--ink);
}
#mast .sub {
  margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dim);
}

#hint {
  position: fixed;
  left: 50%;
  bottom: 12vh;
  transform: translateX(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--dim);
  pointer-events: none;
  animation: breathe 4s ease-in-out infinite;
  transition: opacity 1.2s ease;
}
#hint.gone { opacity: 0; }
@keyframes breathe {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.8; }
}

#tech {
  display: block;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #4c4841;
  cursor: pointer;
  pointer-events: auto;
  transition: color 0.5s ease;
}
#tech:hover { color: var(--brass); }

#about {
  position: fixed;
  left: 24px;
  top: 110px;
  max-width: 420px;
  padding: 18px 20px;
  background: rgba(8, 8, 7, 0.88);
  border: 1px solid #1c1a17;
  font-size: 13px;
  line-height: 1.65;
  color: #a8a29a;
  cursor: pointer;
  z-index: 5;
}
#about .keys {
  margin-top: 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #6f6a62;
}
#about[hidden] { display: none; }

#stats {
  position: fixed;
  right: 24px;
  bottom: max(18px, env(safe-area-inset-bottom));
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #4c4841;
  pointer-events: none;
}

#caption {
  position: fixed;
  left: 50%;
  bottom: 18vh;
  transform: translateX(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #85a393;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
#caption.show { opacity: 0.85; }

#controls {
  position: fixed;
  right: 24px;
  top: max(22px, env(safe-area-inset-top));
  display: flex;
  gap: 15px;
  z-index: 4;
}
#controls button {
  padding: 0;
  border: 0;
  background: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #5d5850;
  cursor: pointer;
  transition: color 0.4s ease;
}
#controls button:hover,
#controls button:focus-visible,
#controls button[aria-pressed="true"] { color: #85a393; }
#controls button:focus-visible { outline: 1px solid var(--brass); outline-offset: 5px; }

#door {
  position: fixed;
  left: 24px;
  bottom: max(18px, env(safe-area-inset-bottom));
}
#door a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.6s ease;
}
#door a:hover { color: var(--brass); }

#nogl {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  font-size: 14px;
  color: var(--dim);
}
#nogl a { color: var(--brass); }
#nogl[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  #hint { animation: none; opacity: 0.6; }
}

@media (max-width: 680px) {
  #controls {
    top: auto;
    right: 18px;
    bottom: max(48px, calc(env(safe-area-inset-bottom) + 40px));
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  #stats { display: none; }
}