/* DefEar — Festival */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;600;800;900&family=Syne+Mono&display=swap');

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

html, body {
  width: 100%;
  height: 100%;
  background: #03010a;
  overflow: hidden;
  font-family: 'Unbounded', 'Helvetica Neue', Arial, sans-serif;
  color: rgba(255, 255, 255, 0.55);
  user-select: none;
  -webkit-user-select: none;
}

/* Plasma backdrop — full screen WebGL layer */
#plasma {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#plasma canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

#c {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  cursor: grab;
}

#c:active { cursor: grabbing; }

/* Hidden YouTube players — audio-only by positioning offscreen */
#yt-players {
  position: fixed;
  left: -10000px;
  top: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

#yt-players > div {
  width: 640px;
  height: 360px;
}

/* HUD — top left brand */
.hud-brand {
  position: fixed;
  top: 24px;
  left: 28px;
  z-index: 10;
  pointer-events: none;
}

.hud-brand img {
  height: 26px;
  opacity: 0.75;
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.3));
}

.hud-tag {
  position: fixed;
  top: 60px;
  left: 28px;
  z-index: 10;
  pointer-events: none;
  font-family: 'Syne Mono', monospace;
  font-size: 9px;
  letter-spacing: 4px;
  color: rgba(255, 255, 255, 0.22);
  text-transform: uppercase;
}

/* HUD — bottom center instruction */
.hud-hint {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  pointer-events: none;
  font-family: 'Syne Mono', monospace;
  font-size: 9px;
  letter-spacing: 5px;
  color: rgba(255, 255, 255, 0.22);
  text-transform: uppercase;
  text-align: center;
}

.hud-hint span {
  display: inline-block;
  margin: 0 12px;
}

/* Tap to start overlay — dismissed on first interaction */
#tap-to-start {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: radial-gradient(ellipse at center, rgba(10, 4, 24, 0.72) 0%, rgba(3, 1, 10, 0.92) 75%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 1.8s ease;
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
}

#tap-to-start.hidden {
  opacity: 0;
  pointer-events: none;
}

.tap-logo {
  width: clamp(110px, 15vw, 180px);
  margin-bottom: 48px;
  filter: drop-shadow(0 0 32px rgba(255, 255, 255, 0.55))
          drop-shadow(0 0 80px rgba(220, 140, 255, 0.4))
          drop-shadow(0 0 160px rgba(180, 80, 255, 0.25));
  animation: pulse 3.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

.tap-title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 8vw, 92px);
  color: rgba(255, 255, 255, 0.97);
  letter-spacing: -2px;
  line-height: 0.9;
  margin-bottom: 18px;
  text-shadow:
    0 0 40px rgba(220, 150, 255, 0.5),
    0 0 120px rgba(180, 80, 255, 0.3);
  background: linear-gradient(180deg, #ffffff 0%, #e0c8ff 60%, #b880ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tap-sub {
  font-family: 'Syne Mono', monospace;
  font-size: 11px;
  letter-spacing: 8px;
  color: rgba(220, 180, 255, 0.55);
  text-transform: uppercase;
  margin-bottom: 72px;
}

.tap-btn {
  font-family: 'Syne Mono', monospace;
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #03010a;
  background: rgba(255, 255, 255, 0.92);
  padding: 16px 48px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: breathe 2s ease-in-out infinite;
}

.tap-btn:hover {
  background: #fff;
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.2);
}

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
  50% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.15); }
}

.tap-note {
  margin-top: 24px;
  font-family: 'Syne Mono', monospace;
  font-size: 9px;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.25);
  text-transform: uppercase;
}