:root {
  --bg:       #080b08;
  --bg-deep:  #040608;
  --warm:     #f0c04a;
  --eye:      #9dc84a;
  --text:     rgba(218, 200, 168, 0.88);
  --text-dim: rgba(180, 160, 128, 0.45);
  --text-mute:rgba(155, 138, 108, 0.28);
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: 'Special Elite', Georgia, serif;
  color: var(--text);
  cursor: default;
  user-select: none;
}

/* ── Vignette ───────────────────────────────── */

.vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 42%,
    transparent 18%,
    rgba(0,0,0,0.45) 60%,
    rgba(0,0,0,0.82) 100%
  );
  pointer-events: none;
  z-index: 20;
}

/* ── Light string ───────────────────────────── */

.light-string {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  z-index: 15;
}

.wire {
  position: absolute;
  top: 18px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(90,65,30,0.45) 8%,
    rgba(90,65,30,0.45) 92%,
    transparent
  );
}

.light-wrap {
  position: absolute;
  top: 14px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stem {
  width: 1px;
  height: 12px;
  background: rgba(90,65,30,0.45);
}

.bulb {
  width: 7px;
  height: 9px;
  background: var(--warm);
  border-radius: 50% 50% 55% 55%;
  box-shadow:
    0 0 5px  3px  rgba(240,192,74,0.55),
    0 0 14px 6px  rgba(240,192,74,0.22),
    0 0 32px 10px rgba(240,192,74,0.07);
  animation: flicker var(--dur, 3s) var(--delay, 0s) infinite ease-in-out;
}

@keyframes flicker {
  0%   { opacity: 1;    box-shadow: 0 0 5px 3px rgba(240,192,74,0.55), 0 0 14px 6px rgba(240,192,74,0.22), 0 0 32px 10px rgba(240,192,74,0.07); }
  15%  { opacity: 0.78; box-shadow: 0 0 3px 2px rgba(240,192,74,0.32), 0 0  8px 4px rgba(240,192,74,0.12); }
  32%  { opacity: 1;    box-shadow: 0 0 6px 4px rgba(240,192,74,0.60), 0 0 16px 7px rgba(240,192,74,0.25); }
  55%  { opacity: 0.62; box-shadow: 0 0 3px 1px rgba(240,192,74,0.22), 0 0  7px 3px rgba(240,192,74,0.09); }
  72%  { opacity: 0.88; box-shadow: 0 0 5px 3px rgba(240,192,74,0.48), 0 0 13px 5px rgba(240,192,74,0.18); }
  88%  { opacity: 0.72; box-shadow: 0 0 3px 2px rgba(240,192,74,0.28), 0 0  9px 4px rgba(240,192,74,0.11); }
  100% { opacity: 1;    box-shadow: 0 0 5px 3px rgba(240,192,74,0.55), 0 0 14px 6px rgba(240,192,74,0.22), 0 0 32px 10px rgba(240,192,74,0.07); }
}

/* ── Critter eyes ───────────────────────────── */

.eyes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.eye-pair {
  position: absolute;
  display: flex;
  gap: 7px;
  animation: blink var(--bk, 6s) var(--bd, 0s) infinite;
}

.eye-pair::before,
.eye-pair::after {
  content: '';
  display: block;
  width: 5px;
  height: 6px;
  background: var(--eye);
  border-radius: 50% 50% 42% 42%;
  box-shadow:
    0 0 4px 2px rgba(157,200,74,0.4),
    0 0 9px 3px rgba(157,200,74,0.14);
}

@keyframes blink {
  0%, 90%, 95%, 100% { transform: scaleY(1); opacity: 1; }
  92.5%              { transform: scaleY(0.06); opacity: 0.1; }
}

/* ── Water ──────────────────────────────────── */

.water {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg-deep) 70%);
  z-index: 2;
  overflow: hidden;
}

.water::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -100%; right: -100%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 58px,
    rgba(255,255,255,0.013) 58px,
    rgba(255,255,255,0.013) 60px,
    transparent 60px,
    transparent 120px
  );
  animation: shimmer 18s linear infinite;
}

@keyframes shimmer {
  from { transform: translateX(0); }
  to   { transform: translateX(120px); }
}

.water::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(4,6,8,0.75) 100%);
}

/* ── Main content ───────────────────────────── */

main {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding-bottom: 8%;
}

.band-name {
  font-family: 'Rye', serif;
  font-size: clamp(2rem, 5.5vw, 4.2rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  background: linear-gradient(
    90deg,
    #e05252, #f0c04a, #6db56d, #5b9bd5, #9d74c8, #e05252
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbow-shift 6s linear infinite;
  margin-bottom: 0.4rem;
}

@keyframes rainbow-shift {
  from { background-position: 0% center; }
  to   { background-position: 300% center; }
}

.rule {
  width: 160px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--text-dim), transparent);
  margin: 0.5rem 0 1.1rem;
}

.members {
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 1.3rem;
}

.members li {
  font-size: clamp(0.88rem, 1.8vw, 1.05rem);
  letter-spacing: 0.04em;
}

.name       { color: var(--text); }
.instrument { color: var(--text-dim); font-style: italic; }

.members li:nth-child(1) .name { color: #f0c04a; }
.members li:nth-child(2) .name { color: #e05252; }
.members li:nth-child(3) .name { color: #6db56d; }
.members li:nth-child(4) .name { color: #9d74c8; }
.members li:nth-child(5) .name { color: #4ec9b8; }

.vessel {
  font-style: italic;
  font-size: clamp(0.72rem, 1.4vw, 0.88rem);
  color: var(--text-mute);
  letter-spacing: 0.13em;
}

/* ── Tune-in placeholder ────────────────────── */

.tune-in {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
  font-family: 'Rye', serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--text-mute);
  transition: color 0.8s ease;
}

.tune-in.playing {
  color: var(--warm);
}

.tune-icon {
  animation: pulse-icon 2.6s ease-in-out infinite;
}

.tune-in.playing .tune-icon {
  animation: none;
}

@keyframes pulse-icon {
  0%, 100% { opacity: 0.25; }
  50%       { opacity: 0.85; }
}

/* ── ASCII critters ─────────────────────────── */

.critters {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 34%;
  z-index: 3;
  pointer-events: none;
}

.critter {
  position: absolute;
  left: 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: pre;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  opacity: 0.7;
}

.critter-crab {
  bottom: 20%;
  color: #f0c04a;
  text-shadow: 0 0 10px rgba(240,192,74,0.35);
  animation: walk-right 36s linear infinite;
}

.critter-shrimp {
  bottom: 42%;
  color: #e05252;
  text-shadow: 0 0 10px rgba(224,82,82,0.35);
  animation: swim-left 22s linear infinite 7s;
}

.critter-crawdad {
  bottom: 10%;
  color: #9d74c8;
  text-shadow: 0 0 10px rgba(157,116,200,0.35);
  animation: walk-right 52s linear infinite 18s;
}

.critter-barnacle {
  bottom: 3%;
  left: auto;
  right: 17%;
  color: #6db56d;
  text-shadow: 0 0 10px rgba(109,181,109,0.35);
  animation: bob 7s ease-in-out infinite 1s;
}

@keyframes walk-right {
  from { transform: translateX(-15rem); }
  to   { transform: translateX(calc(100vw + 15rem)); }
}

@keyframes swim-left {
  from { transform: translateX(calc(100vw + 15rem)) scaleX(-1); }
  to   { transform: translateX(-15rem) scaleX(-1); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}