:root {
  --bg: #05030f;
  --frame: #10071f;
  --panel: rgba(12, 6, 24, 0.78);
  --line: rgba(255, 255, 255, 0.12);
  --text: #fff6d8;
  --muted: #c6bfc7;
  --accent: #ff5f87;
  --accent-2: #3cf7ff;
  --accent-3: #ffd65c;
  --shadow: rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top, rgba(94, 30, 127, 0.4), transparent 40%),
    linear-gradient(180deg, #0f0a1d 0%, #04030b 100%);
  color: var(--text);
  font-family: "Courier New", monospace;
}

body {
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.05) 0,
      rgba(255, 255, 255, 0.05) 1px,
      transparent 1px,
      transparent 4px
    );
  opacity: 0.12;
  mix-blend-mode: screen;
}

.screen-shell {
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
}

.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.crt-frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 55%, rgba(0, 0, 0, 0.28) 100%);
}

.hero-copy {
  position: absolute;
  top: clamp(24px, 5vw, 56px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  display: flex;
  justify-content: center;
  width: 100%;
}

.logo {
  margin: 0;
  display: inline-block;
  transform: skewX(-12deg) rotate(-4deg);
  transform-origin: center top;
  width: min(78vw, 680px);
}

.logo-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 7 / 1.05;
  padding: 2px 4px 4px;
  border: 4px solid #ffe17d;
  background:
    linear-gradient(180deg, #fff7d7 0 34%, #ffd65c 34% 68%, #ff8a80 68% 100%);
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.08),
    0 0 0 4px rgba(10, 5, 18, 0.5),
    8px 8px 0 rgba(10, 5, 18, 0.45);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.scene-frame {
  position: absolute;
  inset: 0;
  background: #080410;
  overflow: hidden;
}

.scene-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.scene-overlay {
  position: absolute;
  inset-inline: 0;
  pointer-events: none;
}

.scene-overlay-top {
  top: 0;
  height: 24%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
}

.scene-overlay-bottom {
  bottom: 0;
  height: 18%;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.22), transparent);
}

.debug-controls {
  position: absolute;
  right: 18px;
  bottom: 72px;
  z-index: 4;
  display: none;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: min(320px, calc(100vw - 36px));
}

.palette-controls {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 4;
  display: none;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: min(420px, calc(100vw - 36px));
}

body.is-dev .debug-controls,
body.is-dev .palette-controls {
  display: flex;
}

.debug-button {
  appearance: none;
  border: 3px solid #ffe17d;
  background: rgba(13, 8, 23, 0.88);
  color: #fff7d7;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 10px;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.06),
    4px 4px 0 rgba(10, 5, 18, 0.55);
}

.debug-button.is-active {
  background: #ff8a80;
  color: #130b1e;
}

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

@media (max-width: 720px) {
  .hero-copy {
    top: max(54px, calc(env(safe-area-inset-top) + 30px));
  }

  .debug-controls {
    right: 12px;
    bottom: 60px;
    gap: 6px;
    max-width: calc(100vw - 24px);
  }

  .palette-controls {
    right: 12px;
    bottom: 12px;
    gap: 6px;
    max-width: calc(100vw - 24px);
  }

  .debug-button {
    font-size: 0.64rem;
    padding: 7px 8px;
  }

  .logo {
    width: min(92vw, 440px, 82svh);
    transform: skewX(-10deg) rotate(-3deg);
  }

  .logo-canvas {
    aspect-ratio: 7 / 2.2;
    padding: 2px;
    border-width: 3px;
    box-shadow:
      inset 0 0 0 3px rgba(255, 255, 255, 0.08),
      0 0 0 3px rgba(10, 5, 18, 0.5),
      6px 6px 0 rgba(10, 5, 18, 0.4);
  }
}

@media (max-width: 480px) {
  .hero-copy {
    top: max(54px, calc(env(safe-area-inset-top) + 30px));
  }

  .logo {
    width: min(92vw, 340px, 68svh);
  }

  .logo-canvas {
    aspect-ratio: 7 / 1.8;
  }
}

@media (max-width: 480px) and (max-height: 700px) {
  .hero-copy {
    top: max(54px, calc(env(safe-area-inset-top) + 30px));
  }

  .logo {
    width: min(88vw, 300px, 56svh);
  }

  .logo-canvas {
    aspect-ratio: 7 / 1.55;
    padding: 1px;
    border-width: 2px;
  }
}