* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: Impact, "Arial Black", sans-serif;
  color: #fff;
  background: #050015;
  cursor: default;
}

/* ---------- layer -2: blurred background video ---------- */
#bg-video {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  filter: blur(8px) brightness(0.45) saturate(1.4);
  z-index: -2;
  pointer-events: none;
}

/* ---------- layer -1: scrolling WHALE wallpaper ---------- */
.wallpaper {
  position: fixed;
  inset: -20vh -20vw;
  z-index: -1;
  pointer-events: none;
  opacity: 0.18;
  overflow: hidden;
  transform: rotate(-12deg);
}
.wallpaper-strip {
  font-family: Impact, sans-serif;
  font-size: 8vw;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: normal;
  word-break: keep-all;
  color: #fff;
  -webkit-text-stroke: 2px #ff00aa;
  animation: drift 40s linear infinite;
}
@keyframes drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(-15vw, -15vh); }
}

/* ---------- marquees ---------- */
.top-marquee, .bottom-marquee {
  position: fixed;
  left: 0;
  width: 100%;
  font-size: 2.2rem;
  padding: 8px 0;
  background: rgba(0, 0, 0, 0.55);
  border-top: 4px dashed #ffea00;
  border-bottom: 4px dashed #ffea00;
  text-shadow: 0 0 10px #ff00aa, 0 0 20px #00eaff;
  z-index: 5;
}
.top-marquee { top: 0; }
.bottom-marquee {
  bottom: 0;
  font-family: "Comic Sans MS", "Comic Sans", cursive;
  font-weight: bold;
  font-size: 1.6rem;
  color: #fff;
  text-shadow: 0 0 8px #00ff88;
}

/* ---------- main content ---------- */
main {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 90px 16px 90px;
  gap: 1rem;
}

.title {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(2.5rem, 7vw, 6rem);
  margin: 0;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, #ff00aa, #ffea00, #00eaff, #00ff88, #ff00aa);
  background-size: 400% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hueShift 6s linear infinite, wobble 2.4s ease-in-out infinite;
  text-shadow: 0 0 30px rgba(255, 0, 170, 0.3);
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.5));
}
@keyframes hueShift {
  from { background-position: 0% 50%; }
  to   { background-position: 400% 50%; }
}
@keyframes wobble {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

.subtitle {
  font-family: "Comic Sans MS", cursive;
  font-size: 1.3rem;
  color: #ffea00;
  text-shadow: 0 0 10px #ff00aa;
  margin: 0;
}

/* ---------- whale frame ---------- */
.whale-frame {
  position: relative;
  padding: 14px;
  border: 6px dashed #ff00aa;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.4);
  box-shadow:
    0 0 30px #ff00aa,
    0 0 60px #00eaff,
    inset 0 0 20px rgba(255,255,255,0.1);
  animation: spinBorder 12s linear infinite, glowPulse 2.2s ease-in-out infinite;
  transition: transform 0.1s;
}
.whale-frame:hover {
  animation: spinBorder 12s linear infinite, glowPulse 2.2s ease-in-out infinite, shake 0.3s linear infinite;
}
.whale-frame video {
  display: block;
  max-width: min(80vw, 720px);
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #000;
}
@keyframes spinBorder {
  from { border-color: #ff00aa; }
  25%  { border-color: #ffea00; }
  50%  { border-color: #00eaff; }
  75%  { border-color: #00ff88; }
  to   { border-color: #ff00aa; }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 30px #ff00aa, 0 0 60px #00eaff, inset 0 0 20px rgba(255,255,255,0.1); }
  50%      { box-shadow: 0 0 60px #00eaff, 0 0 100px #ff00aa, inset 0 0 30px rgba(255,255,255,0.2); }
}
@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  20% { transform: translate(-4px, 2px) rotate(-1deg); }
  40% { transform: translate(4px, -2px) rotate(1deg); }
  60% { transform: translate(-3px, -3px) rotate(-0.5deg); }
  80% { transform: translate(3px, 3px) rotate(0.5deg); }
}

/* ---------- floating tilted labels ---------- */
.floating-label {
  position: fixed;
  font-family: "Comic Sans MS", cursive;
  font-size: clamp(0.9rem, 1.4vw, 1.4rem);
  padding: 4px 10px;
  background: #ffea00;
  color: #c00;
  border: 2px solid #c00;
  border-radius: 6px;
  box-shadow: 3px 3px 0 #000;
  z-index: 2;
  pointer-events: none;
  text-shadow: none;
  white-space: nowrap;
  animation: bobble 3.2s ease-in-out infinite;
}
@keyframes bobble {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -8px; }
}

/* ---------- emoji rain (spawned by JS) ---------- */
.emoji-rain {
  position: fixed;
  bottom: -10vh;
  font-size: clamp(1.5rem, 3vw, 3rem);
  pointer-events: none;
  z-index: 4;
  user-select: none;
  will-change: transform, opacity;
}

/* ---------- cursor trail bubbles (spawned by JS) ---------- */
.cursor-bubble {
  position: fixed;
  font-size: 1.2rem;
  pointer-events: none;
  z-index: 9;
  user-select: none;
  animation: bubblePop 0.8s ease-out forwards;
}
@keyframes bubblePop {
  from { opacity: 1; transform: scale(0.6); }
  to   { opacity: 0; transform: scale(1.4) translateY(-30px); }
}

/* ---------- vibes hint button ---------- */
#vibes-hint {
  position: fixed;
  right: 16px;
  bottom: 80px;
  z-index: 10;
  font-family: "Comic Sans MS", cursive;
  font-size: 1rem;
  padding: 10px 14px;
  background: #00eaff;
  color: #000;
  border: 3px solid #ff00aa;
  border-radius: 30px;
  box-shadow: 0 0 20px #00eaff;
  cursor: pointer;
  animation: bobble 1.4s ease-in-out infinite;
}
#vibes-hint.hidden { display: none; }

/* ---------- konami overdrive ---------- */
body.overdrive,
body.overdrive * {
  animation-duration: 0.25s !important;
}
body.overdrive .title {
  font-size: clamp(3rem, 10vw, 9rem);
}