:root {
  --bg: #0b0a08;
  --ink: #ece3cf;
  --dim: rgba(236, 227, 207, 0.5);
  --pad: clamp(16px, 2.4vw, 32px);
}

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

html,
body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}

body {
  font: 500 11px/1.55 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* Vignette */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
}

/* Film grain */
body::after {
  content: "";
  position: fixed;
  inset: -100%;
  z-index: 3;
  pointer-events: none;
  opacity: 0.09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  17%  { transform: translate(-4%, 3%); }
  33%  { transform: translate(3%, -5%); }
  50%  { transform: translate(-6%, -2%); }
  67%  { transform: translate(5%, 4%); }
  83%  { transform: translate(-2%, 6%); }
  100% { transform: translate(0, 0); }
}

.corner {
  position: fixed;
  z-index: 2;
  transition: opacity 1.2s ease;
}

/* The dust draws the corner credits first; the real text fades in over it (main.js lifts this). */
.dust-forming .corner { opacity: 0; }

.tl { top: var(--pad); left: var(--pad); }
.tr { top: var(--pad); right: var(--pad); text-align: right; font-variant-numeric: tabular-nums; }
.bl { bottom: var(--pad); left: var(--pad); }
.br { bottom: var(--pad); right: var(--pad); text-align: right; }

.dim { color: var(--dim); }

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(236, 227, 207, 0.3);
  transition: border-color 0.3s;
}

a:hover,
a:focus-visible {
  border-color: var(--ink);
  outline: none;
}

.hint {
  position: fixed;
  z-index: 2;
  left: 50%;
  bottom: var(--pad);
  transform: translateX(-50%);
  color: var(--dim);
  white-space: nowrap;
  transition: opacity 1.6s ease;
}

.hint.gone { opacity: 0; }

/* After its first showing the hint hides, with a generous hover target: wander over the bottom
   of the screen and it comes back, Controls link included. */
.hint.secret {
  opacity: 0;
  padding: 40px 120px 0;
  transition: opacity 0.5s ease;
}

.hint.secret:hover,
.hint.secret:focus-within { opacity: 1; }

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

@media (max-width: 820px) {
  body { font-size: 10px; }
  .hint { display: none; }
}

/* Phones: clear of the notch and home bar, with the two bottom credits stacked in one column
   instead of squeezed side by side. */
@media (max-width: 600px) and (orientation: portrait) {
  :root {
    --pad: 20px;
    --top: max(var(--pad), env(safe-area-inset-top));
    --bottom: max(var(--pad), env(safe-area-inset-bottom));
  }

  body { font-size: 11px; }

  .tl, .tr { top: var(--top); }

  .br {
    left: var(--pad);
    right: var(--pad);
    bottom: var(--bottom);
    text-align: left;
  }

  /* The email is the one thing to tap: larger, with a full-height target. */
  .br a {
    display: inline-block;
    margin-top: 4px;
    padding: 6px 0 4px;
    font-size: 13px;
    letter-spacing: 0.06em;
  }

  .bl { bottom: calc(var(--bottom) + 72px); }

  .hint {
    display: block;
    bottom: calc(var(--bottom) + 150px);
    font-size: 10px;
  }
}

@media (max-width: 600px) and (orientation: portrait) and (prefers-reduced-motion: reduce) {
  .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .hint { display: none; }
}