html, body {
  margin:0; padding:0;
  width:100%; height:100%;
  overflow:hidden;
  font-family:sans-serif;
}
#worldCanvas {
  display:block;
  background:linear-gradient(to bottom, #8CD5FF, #054A91);
  position: relative;
  overflow: hidden;
}
/* Water ripple effect as pseudo-element */
#worldCanvas::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    radial-gradient(rgba(255,255,255,.12), rgba(255,255,255,.05) 2px, transparent 4px),
    radial-gradient(rgba(255,255,255,.08), rgba(255,255,255,.03) 1px, transparent 3px);
  background-size:180px 180px,120px 120px;
  background-position:0 0,20px 20px;
  pointer-events: none;
  animation: waterShimmer 15s infinite linear;
}
@keyframes waterShimmer {
  0% {
    background-position: 0 0, 20px 20px;
  }
  100% {
    background-position: 180px 180px, 140px 140px;
  }
}
#worldCanvas::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  animation: waterGlow 8s infinite ease-in-out;
}
@keyframes waterGlow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
#infoPanel {
  position:absolute; top:16px; right:16px;
  background:rgba(9,24,51,0.75); color:white;
  padding:12px; border-radius:8px;
  font-size:0.9em;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  backdrop-filter: blur(5px);
  max-width: 280px;
  transition: all 0.3s ease;
}
#infoPanel:hover {
  background:rgba(9,24,51,0.85);
}
@keyframes pulseButton {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}