:root{
  --bg-ocean: linear-gradient(180deg, #1e3a5f 0%, #2d5986 50%, #4a7ba7 100%);
  --accent: #ffffff;
  --chip-bg: rgba(255,255,255,0.15);
  --chip-hover: rgba(255,255,255,0.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg-ocean);
  color: var(--accent);
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  overflow-x:hidden;
}

/* Bubble container */
#bubble-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(200, 240, 255, 0.9), rgba(135, 206, 235, 0.5));
  border: 2px solid rgba(255, 255, 255, 0.6);
  animation: rise linear forwards;
  opacity: 0.85;
}

@keyframes rise {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-100vh) translateX(var(--wobble-distance));
    opacity: 0;
  }
}

/* banner */
.banner{
  width:100%;
  max-width:1200px;
  margin:24px 0;
}
.banner-content{
  width:100%;
  background: linear-gradient(135deg, #5fa3d0 0%, #4a90c4 100%);
  border-radius:12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
  padding: 24px;
  display:flex;
  align-items:center;
  gap:24px;
}
.banner-mermaid{
  width:500px;
  height:500px;
  object-fit:contain;
  border-radius:12px;
  cursor:pointer;
  transition: transform 0.2s ease;
}
.banner-mermaid:hover{
  transform: scale(1.02);
}
.banner-text h1{
  margin:0 0 8px 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 48px;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.banner-text p{
  margin:0;
  font-size: 16px;
  color: #ffffff;
  opacity: 0.95;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

@media (max-width: 600px) {
  .banner-content{
    flex-direction:column;
    text-align:center;
  }
  .banner-mermaid{
    width:360px;
    height:360px;
  }
  .banner-text h1{
    font-size: 36px;
  }
  .spotify-embed{
    max-width:100%;
  }
}

/* main container */
.container{
  width:100%;
  max-width:900px;
  padding: 0 16px 48px;
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;
}

/* Spotify players */
.spotify-players{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:center;
  width:100%;
}
.spotify-embed{
  width:100%;
  max-width:450px;
  height:152px;
  border-radius:12px;
  box-shadow: 0 4px 12px rgba(107,46,90,0.1);
}

/* Fish container */
#fish-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}

.fish {
  position: absolute;
  width: 180px;
  height: auto;
  animation: swim linear forwards;
}

.fish.loopy {
  animation: swimLoop linear forwards;
}

@keyframes swim {
  0% {
    transform: translateX(100vw) translateY(0);
  }
  100% {
    transform: translateX(-100px) translateY(var(--swim-wobble));
  }
}

@keyframes swimLoop {
  0% {
    transform: translateX(100vw) translateY(0) rotate(0deg);
  }
  25% {
    transform: translateX(70vw) translateY(var(--swim-wobble)) rotate(0deg);
  }
  35% {
    transform: translateX(60vw) translateY(calc(var(--swim-wobble) - 100px)) rotate(-45deg);
  }
  45% {
    transform: translateX(50vw) translateY(calc(var(--swim-wobble) - 150px)) rotate(-90deg);
  }
  55% {
    transform: translateX(40vw) translateY(calc(var(--swim-wobble) - 100px)) rotate(-180deg);
  }
  65% {
    transform: translateX(30vw) translateY(var(--swim-wobble)) rotate(-270deg);
  }
  75% {
    transform: translateX(20vw) translateY(var(--swim-wobble)) rotate(-360deg);
  }
  100% {
    transform: translateX(-100px) translateY(var(--swim-wobble)) rotate(-360deg);
  }
}

@media (max-width:560px){
  .banner-svg text { font-size:32px }
}