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

:root {
  --bg: #02040a;
  --electric: #7df9ff;
  --electric-hot: #e8f7ff;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: #cfe8ff;
  font-family: "Orbitron", system-ui, sans-serif;
  cursor: crosshair;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%, #0b1630 0%, transparent 55%),
    radial-gradient(ellipse 90% 60% at 70% 20%, #1a0a3a 0%, transparent 50%),
    linear-gradient(180deg, #010208 0%, #050a18 40%, #0a1228 100%);
}

canvas#sky,
canvas#city,
canvas#fx,
canvas#rain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

canvas#sky { z-index: 1; }
canvas#city { z-index: 2; }
canvas#fx { z-index: 3; }
canvas#rain { z-index: 4; }

.vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.45) 100%);
}

.scanlines {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0.06;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.35) 2px,
    rgba(0, 0, 0, 0.35) 3px
  );
  mix-blend-mode: multiply;
}

.flash {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: radial-gradient(circle at 50% 20%, rgba(200, 230, 255, 0.55), rgba(120, 160, 255, 0.12) 40%, transparent 70%);
  opacity: 0;
  transition: opacity 40ms linear;
}

.flash.on {
  opacity: 1;
}

.title-wrap {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* ---------- name board: THE | cluster | BOYS ---------- */
.names-board {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.35rem, 2.2vw, 1.6rem);
  width: min(96vw, 900px);
  height: min(54vh, 360px);
  pointer-events: auto;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.side-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.15rem, 0.8vh, 0.45rem);
  flex-shrink: 0;
  z-index: 2;
  user-select: none;
  font-weight: 900;
  font-size: clamp(1.35rem, 4.8vw, 2.75rem);
  line-height: 1;
  letter-spacing: 0.06em;
  color: transparent;
  -webkit-text-stroke: 1.3px rgba(140, 170, 210, 0.32);
  background: linear-gradient(
    180deg,
    rgba(22, 30, 48, 0.95) 0%,
    rgba(8, 12, 22, 1) 50%,
    rgba(4, 6, 12, 1) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.85));
  transition:
    filter 0.45s ease,
    -webkit-text-stroke 0.35s ease,
    text-shadow 0.4s ease,
    opacity 0.35s ease;
  opacity: 0.9;
}

.side-word span {
  display: block;
}

.names-board:hover .side-word,
.names-board:focus-visible .side-word,
.names-board.is-active .side-word {
  background: linear-gradient(
    180deg,
    #f5ffff 0%,
    #9ef0ff 28%,
    #4cc9ff 55%,
    #1a6cff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(200, 255, 255, 0.55);
  text-shadow:
    0 0 8px rgba(125, 249, 255, 0.85),
    0 0 22px rgba(80, 180, 255, 0.65),
    0 0 40px rgba(40, 120, 255, 0.4);
  filter: drop-shadow(0 0 16px rgba(125, 249, 255, 0.55));
  opacity: 1;
  animation: letter-pulse 0.55s ease-in-out infinite alternate;
}

.names {
  position: relative;
  flex: 1 1 auto;
  width: min(68vw, 620px);
  height: 100%;
  min-width: 0;
}

.names__stage {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.names__bolts {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140%;
  height: 160%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  transition: opacity 0.15s ease;
}

.letter {
  position: absolute;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: clamp(1.6rem, 6.2vw, 3.6rem);
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
  will-change: transform, filter, color, opacity;
  transform:
    translate(-50%, -50%)
    translate(var(--jx, 0px), var(--jy, 0px))
    rotate(var(--jr, 0deg))
    scale(var(--js, 1));
  transition:
    transform 0.85s cubic-bezier(0.22, 1.15, 0.32, 1),
    color 0.4s ease,
    text-shadow 0.4s ease,
    filter 0.45s ease,
    -webkit-text-stroke 0.35s ease,
    opacity 0.35s ease;
  transition-delay: var(--delay, 0ms);
  /* silhouette default */
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(140, 170, 210, 0.28);
  background: linear-gradient(
    180deg,
    rgba(22, 30, 48, 0.95) 0%,
    rgba(8, 12, 22, 1) 50%,
    rgba(4, 6, 12, 1) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.85));
  opacity: 0.92;
}

/* lined up + electrified */
.names-board:hover .letter,
.names-board:focus-visible .letter,
.names-board.is-active .letter {
  transform:
    translate(-50%, -50%)
    translate(0, 0)
    rotate(0deg)
    scale(1);
  color: transparent;
  background: linear-gradient(
    180deg,
    #f5ffff 0%,
    #9ef0ff 28%,
    #4cc9ff 55%,
    #1a6cff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(200, 255, 255, 0.55);
  text-shadow:
    0 0 8px rgba(125, 249, 255, 0.85),
    0 0 22px rgba(80, 180, 255, 0.65),
    0 0 40px rgba(40, 120, 255, 0.4);
  filter: drop-shadow(0 0 16px rgba(125, 249, 255, 0.55));
  opacity: 1;
  animation: letter-pulse 0.55s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0ms);
}

.names-board:hover .names__bolts,
.names-board:focus-visible .names__bolts,
.names-board.is-active .names__bolts {
  opacity: 1;
}

@keyframes letter-pulse {
  0% {
    filter: drop-shadow(0 0 10px rgba(125, 249, 255, 0.45)) brightness(1);
  }
  100% {
    filter: drop-shadow(0 0 24px rgba(160, 220, 255, 0.95)) brightness(1.2);
  }
}

.hint {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(0.65rem, 1.4vw, 0.85rem);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(160, 190, 230, 0.35);
  pointer-events: none;
  transition: opacity 0.6s ease, letter-spacing 0.6s ease;
}

.names-board:hover ~ .hint,
.names-board:focus-visible ~ .hint,
.names-board.is-active ~ .hint,
.hint.hide {
  opacity: 0;
  letter-spacing: 0.7em;
}

.audio-btn {
  position: fixed;
  z-index: 30;
  top: max(0.85rem, env(safe-area-inset-top, 0px));
  right: max(0.85rem, env(safe-area-inset-right, 0px));
  bottom: auto;
  left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  min-height: 44px;
  border: 1px solid rgba(125, 200, 255, 0.25);
  border-radius: 999px;
  background: rgba(6, 12, 28, 0.78);
  color: rgba(190, 220, 255, 0.85);
  font-family: inherit;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.audio-btn:hover,
.audio-btn[aria-pressed="true"] {
  border-color: rgba(125, 249, 255, 0.55);
  background: rgba(12, 24, 48, 0.88);
  box-shadow: 0 0 24px rgba(80, 180, 255, 0.25);
}

.audio-btn__icon {
  font-size: 1rem;
  line-height: 1;
}

@media (max-width: 480px) {
  .names-board {
    width: min(98vw, 900px);
    height: min(50vh, 320px);
    gap: 0.25rem;
  }

  .side-word {
    font-size: clamp(1.1rem, 5.5vw, 1.6rem);
  }

  .names {
    width: min(62vw, 620px);
  }

  .audio-btn {
    top: max(0.65rem, env(safe-area-inset-top, 0px));
    right: max(0.65rem, env(safe-area-inset-right, 0px));
    padding: 0.5rem 0.75rem;
  }

  .audio-btn__label {
    letter-spacing: 0.12em;
  }

  .hint {
    bottom: max(1.5rem, env(safe-area-inset-bottom, 0px) + 0.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .letter {
    transition-duration: 0.01ms;
  }

  .names-board:hover .letter,
  .names-board:focus-visible .letter,
  .names-board.is-active .letter,
  .names-board:hover .side-word,
  .names-board:focus-visible .side-word,
  .names-board.is-active .side-word {
    animation: none;
  }
}