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

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: #39ff14;
  color: #000;
  font-family: "VT323", "Courier New", monospace;
  font-size: 20px;
  line-height: 1.2;
  overflow-x: hidden;
  cursor: default;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  user-select: none;
  animation: screen-drift 12s steps(24, end) infinite;
}

@keyframes screen-drift {
  0%,
  100% { filter: brightness(1); }
  50% { filter: brightness(0.97); }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* CRT atmosphere */
.crt-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 900;
  background:
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.28) 100%);
}

.scanlines {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 901;
  opacity: 0.12;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.35) 0px,
    rgba(0, 0, 0, 0.35) 1px,
    transparent 1px,
    transparent 3px
  );
  animation: scanline-flicker 8s steps(2, end) infinite;
}

@keyframes scanline-flicker {
  0%,
  100% { opacity: 0.1; }
  50% { opacity: 0.14; }
}


/* main layout */
.site {
  position: relative;
  z-index: 1;
  height: 100dvh;
  max-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: clamp(0.35rem, 1.5vh, 0.85rem);
  padding: clamp(0.5rem, 2vh, 1.25rem) clamp(0.75rem, 3vw, 1.5rem);
  text-align: center;
  overflow: hidden;
}

.site__header {
  margin: 0;
  width: 100%;
  padding-top: clamp(1rem, 4vh, 2.25rem);
}

.site__title {
  margin: 0;
}

.site__headline {
  font-size: clamp(1.1rem, min(4.2vh, 7.5vw), 2.75rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 0.95;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
}

.site__subtitle {
  margin: 0.15em 0 0;
  font-size: clamp(0.85rem, 2vh, 1.15rem);
  letter-spacing: 0.04em;
}

/* illustration */
.scene {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene__stack {
  position: relative;
  width: min(85vw, calc((100dvh - 7.5rem) * 2861 / 4096));
  aspect-ratio: 2861 / 4096;
  max-height: calc(100dvh - 7.5rem);
}

.scene__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.scene__road {
  cursor: pointer;
  z-index: 0;
}

.scene__hitchhiker-art {
  cursor: pointer;
  z-index: 1;
  /* clip to figure bounds so road clicks pass through elsewhere */
  clip-path: inset(48% 20% 24% 54%);
}

.scene__hitchhiker-art:hover,
.scene__hitchhiker-art:focus {
  outline: none;
  filter: contrast(1.08) brightness(0.92);
  animation: hitchhiker-hover 2.4s steps(8, end) infinite;
}

@keyframes hitchhiker-hover {
  0%,
  100% { filter: contrast(1.08) brightness(0.92); }
  50% { filter: contrast(1.12) brightness(0.88); }
}

/* CTA */
.site__cta {
  margin: clamp(-0.5rem, -1.5vh, -0.15rem) 0 0;
  width: 100%;
  white-space: nowrap;
  padding-bottom: clamp(1rem, 4vh, 2.25rem);
  animation: cta-blink 6s steps(2, end) infinite;
}

@keyframes cta-blink {
  0%,
  92%,
  100% { opacity: 1; }
  94%,
  96% { opacity: 0.55; }
}

/* nothing toast */
.nothing-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  padding: 8px 14px;
  background: #000;
  color: #39ff14;
  border: 2px solid #000;
  font-size: 16px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  animation: toast-fade 2.2s steps(6, end) forwards;
}

@keyframes toast-fade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* Windows 98 dialog */
.retro-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
}

.retro-dialog[hidden] {
  display: none;
}

.retro-dialog__window {
  width: min(360px, 92vw);
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  box-shadow:
    inset 1px 1px 0 #dfdfdf,
    4px 4px 0 rgba(0, 0, 0, 0.5);
  font-family: "VT323", "MS Sans Serif", Tahoma, sans-serif;
  color: #000;
  animation: dialog-pop 0.5s steps(6, end);
}

@keyframes dialog-pop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.retro-dialog__titlebar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}

.retro-dialog__icon {
  width: 14px;
  height: 14px;
  background: #ffff00;
  border: 1px solid #000;
  image-rendering: pixelated;
}

.retro-dialog__title {
  flex: 1;
  text-align: left;
}

.retro-dialog__close {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  background: #c0c0c0;
  color: #000;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.retro-dialog__close:active {
  border-color: #000 #fff #fff #000;
}

.retro-dialog__body {
  padding: 16px 18px 12px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
}

.retro-dialog__folder-scene {
  position: relative;
  width: 64px;
  height: 56px;
}

.retro-dialog__folder {
  position: absolute;
  bottom: 0;
  left: 4px;
  width: 52px;
  height: 40px;
}

.retro-dialog__folder-tab {
  width: 22px;
  height: 8px;
  background: #ffff00;
  border: 2px solid #000;
  border-bottom: none;
}

.retro-dialog__folder-body {
  width: 100%;
  height: 32px;
  background: #ffff00;
  border: 2px solid #000;
}

.retro-dialog__papers {
  position: absolute;
  inset: 0;
}

.paper {
  position: absolute;
  width: 14px;
  height: 18px;
  background: #fff;
  border: 2px solid #000;
  opacity: 0;
}

.retro-dialog.is-downloading .paper {
  animation: paper-fly 2.4s steps(12, end) infinite;
}

.paper--1 { left: 28px; top: 18px; animation-delay: 0s; }
.paper--2 { left: 32px; top: 14px; animation-delay: 0.15s; }
.paper--3 { left: 24px; top: 12px; animation-delay: 0.3s; }
.paper--4 { left: 36px; top: 10px; animation-delay: 0.45s; }
.paper--5 { left: 30px; top: 8px; animation-delay: 0.6s; }

@keyframes paper-fly {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
  }
  15% {
    opacity: 1;
    transform: translate(-8px, -6px) rotate(-12deg);
  }
  45% {
    opacity: 1;
    transform: translate(18px, -28px) rotate(18deg);
  }
  100% {
    opacity: 0;
    transform: translate(34px, -48px) rotate(32deg);
  }
}

.retro-dialog__message {
  margin: 0;
  font-size: 20px;
  text-align: left;
}

.retro-dialog__progress {
  grid-column: 1 / -1;
  height: 16px;
  background: #fff;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  padding: 2px;
}

.retro-dialog__progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: #000080;
  transition: width 1.8s steps(18, end);
}

.retro-dialog.is-complete .retro-dialog__progress-fill {
  width: 100%;
}

.retro-dialog__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px 12px;
}

.retro-dialog__btn {
  min-width: 72px;
  padding: 4px 12px;
  border: 2px solid;
  border-color: #fff #000 #000 #fff;
  background: #c0c0c0;
  font-family: inherit;
  font-size: 18px;
  cursor: pointer;
}

.retro-dialog__btn:active {
  border-color: #000 #fff #fff #000;
}

.retro-dialog__btn:disabled {
  color: #808080;
  cursor: default;
}

/* mobile */
@media (max-width: 480px) {
  .site__headline {
    font-size: clamp(0.72rem, min(3.6vh, 4.8vw), 2.75rem);
    letter-spacing: 0.04em;
  }

  .scene__stack {
    width: min(90vw, calc((100dvh - 6.5rem) * 2861 / 4096));
    max-height: calc(100dvh - 6.5rem);
  }

  .retro-dialog__body {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .retro-dialog__message {
    text-align: center;
  }
}