:root {
  --bg: #0a0a0a;
  --sea: #0f2812;
  --sea2: #143818;
  --foam: #1f6a28;
  --accent: #19ff6d;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--accent);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  overflow: hidden;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.notice {
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: #36ff90;
  opacity: 0.7;
}

.ocean {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 50%;
  background: linear-gradient(to top, var(--sea) 0%, transparent 100%);
}

.wave {
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 60%;
  background-repeat: repeat-x;
  background-size: 160px 32px;
  opacity: 0.9;
}

.wave-back {
  bottom: 8%;
  height: 52%;
  background-image:
    radial-gradient(12px 6px at 20px 10px, var(--foam) 35%, transparent 36%),
    radial-gradient(12px 6px at 100px 12px, var(--sea2) 35%, transparent 36%),
    radial-gradient(12px 6px at 60px 8px, var(--foam) 35%, transparent 36%);
  animation: drift-back 28s linear infinite;
  filter: blur(0.3px);
}

.wave-front {
  bottom: 0;
  background-image:
    radial-gradient(14px 7px at 30px 12px, var(--foam) 38%, transparent 39%),
    radial-gradient(14px 7px at 110px 14px, var(--sea2) 38%, transparent 39%),
    radial-gradient(14px 7px at 70px 10px, var(--foam) 38%, transparent 39%);
  animation: drift-front 16s linear infinite;
}

.ship {
  position: absolute;
  width: min(640px, 60vw);
  max-width: 90%;
  bottom: 24%;
  left: -40%;
  transform-origin: 50% 80%;
  filter: drop-shadow(0 6px 12px rgba(25, 255, 109, 0.15));
  animation:
    sail 42s linear infinite,
    bob 3.6s ease-in-out infinite;
  user-select: none;
  pointer-events: none;
}

/* Animations */
@keyframes drift-front {
  0% { transform: translateX(0); }
  100% { transform: translateX(-160px); }
}
@keyframes drift-back {
  0% { transform: translateX(0); }
  100% { transform: translateX(160px); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(6px) rotate(0.6deg); }
}
@keyframes sail {
  0% { left: -45%; }
  100% { left: 120%; }
}

/* Reduced motion */
.reduced-motion .wave-back,
.reduced-motion .wave-front,
.reduced-motion .ship { animation: none !important; }

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}