/* Ocean (surface) - Pixel Art Sea Interface */

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

* {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Surface Ocean Palette */
:root {
    --sky-dawn: #b8a890;
    --sky-light: #889aa8;
    --sky-mid: #3e5468;
    --sea-shallow: #14344a;
    --sea-mid: #061d2c;
    --sea-deep: #020a12;
    --foam: #e8eef4;
    --foam-dim: rgba(232, 238, 244, 0.55);
    --sun: #f0e0b8;
    --sun-glow: rgba(240, 224, 184, 0.55);
    --text-light: #e8eef4;
    --text-dark: #020a12;
    --danger: #d04a30;
}

body {
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace;
    background: var(--sea-deep);
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    color: var(--text-light);
}

/* Scene Container - Sky-to-Sea Gradient */
.scene-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background:
        linear-gradient(
            to bottom,
            var(--sky-dawn) 0%,
            var(--sky-light) 14%,
            var(--sky-mid) 36%,
            var(--sea-shallow) 50%,
            var(--sea-mid) 70%,
            var(--sea-deep) 100%
        );
    overflow: hidden;
    cursor: default;
}

/* Horizon line — subtle band where sky meets sea */
.scene-container::before {
    content: '';
    position: absolute;
    top: 48%;
    left: 0;
    width: 100%;
    height: 2px;
    background: rgba(232, 238, 244, 0.32);
    box-shadow: 0 0 12px rgba(232, 238, 244, 0.25);
    pointer-events: none;
    z-index: 2;
}

/* Sun glitter on the horizon */
.sun {
    position: absolute;
    top: 15%;
    right: 18%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(
        circle at center,
        var(--sun) 0%,
        rgba(240, 224, 184, 0.6) 40%,
        transparent 70%
    );
    box-shadow:
        0 0 40px var(--sun-glow),
        0 0 80px rgba(240, 224, 184, 0.3);
    z-index: 3;
    animation: sunPulse 5s infinite ease-in-out;
    pointer-events: none;
}

@keyframes sunPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.06); opacity: 0.9; }
}

/* Sun glitter trail on water */
.sun-trail {
    position: absolute;
    top: 48%;
    right: 12%;
    width: 14%;
    height: 22%;
    background: linear-gradient(
        to bottom,
        rgba(240, 224, 184, 0.55) 0%,
        rgba(240, 224, 184, 0.15) 60%,
        transparent 100%
    );
    filter: blur(6px);
    pointer-events: none;
    z-index: 3;
    animation: trailShimmer 4s infinite ease-in-out;
}

@keyframes trailShimmer {
    0%, 100% { opacity: 0.7; transform: scaleX(1); }
    50%      { opacity: 1; transform: scaleX(1.08); }
}

/* Wave Layers — big sinuous SVG swells, slowly drifting across the sea.
   Three layers create parallax depth: back is darkest + slowest, front is
   brightest + fastest. Each layer also gently bobs vertically. */
.wave-layer {
    position: absolute;
    left: 0;
    width: 100%;
    height: 220px;
    pointer-events: none;
    background-repeat: repeat-x;
}

.wave-layer .strip {
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    background-size: 1200px 220px;
}

.wave-layer.back {
    top: 48%;
    height: 240px;
    z-index: 3;
}
.wave-layer.back .strip {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 240' preserveAspectRatio='none'><path d='M0,120 C150,60 300,180 450,120 C600,60 750,180 900,120 C1050,60 1200,180 1200,120 L1200,240 L0,240 Z' fill='%23051625' opacity='0.9'/></svg>");
    background-size: 1200px 240px;
    animation: waveDrift 90s infinite linear, waveBob 11s infinite ease-in-out;
}

.wave-layer.mid {
    top: 58%;
    height: 220px;
    z-index: 4;
}
.wave-layer.mid .strip {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'><path d='M0,110 C120,40 280,180 420,100 C560,30 720,190 880,110 C1020,50 1140,170 1200,110 L1200,220 L0,220 Z' fill='%230a2236' opacity='0.92'/></svg>");
    background-size: 1200px 220px;
    animation: waveDriftReverse 64s infinite linear, waveBob 9s infinite ease-in-out;
}

.wave-layer.front {
    top: 70%;
    height: 200px;
    z-index: 5;
}
.wave-layer.front .strip {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'><path d='M0,100 C140,30 260,170 400,90 C540,20 700,180 840,100 C980,40 1120,160 1200,90 L1200,200 L0,200 Z' fill='%2310344c' opacity='0.95'/><path d='M0,100 C140,30 260,170 400,90 C540,20 700,180 840,100 C980,40 1120,160 1200,90' stroke='%23c8d4dc' stroke-width='1.2' fill='none' opacity='0.5'/></svg>");
    background-size: 1200px 200px;
    animation: waveDrift 42s infinite linear, waveBob 7s infinite ease-in-out;
}

@keyframes waveDrift {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-1200px); }
}

@keyframes waveDriftReverse {
    0%   { transform: translateX(-1200px); }
    100% { transform: translateX(0); }
}

@keyframes waveBob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -6px; }
}

/* Waves — horizontal bands rolling across the sea half of the screen */
.wave {
    position: absolute;
    left: -10%;
    width: 130%;
    height: 80px;
    background: radial-gradient(
        ellipse at center,
        rgba(232, 238, 244, 0.25) 0%,
        rgba(232, 238, 244, 0.1) 35%,
        transparent 70%
    );
    filter: blur(4px);
    pointer-events: none;
    z-index: 4;
    animation: waveRoll 14s infinite linear;
}

.wave:nth-of-type(2n) {
    height: 60px;
    animation-duration: 18s;
    animation-direction: reverse;
    opacity: 0.7;
}

.wave:nth-of-type(3n) {
    height: 100px;
    animation-duration: 22s;
    opacity: 0.5;
}

@keyframes waveRoll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(12%); }
}

/* Seafoam — tiny bright particles drifting upward (bubbles surfacing) */
.seafoam {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--foam);
    border-radius: 50%;
    opacity: 0.8;
    pointer-events: none;
    z-index: 5;
    animation: foamRise 14s infinite linear;
    box-shadow: 0 0 4px var(--foam-dim);
}

@keyframes foamRise {
    0%   { transform: translate(0, 110vh); opacity: 0; }
    15%  { opacity: 0.8; }
    85%  { opacity: 0.6; }
    100% { transform: translate(-15px, -10vh); opacity: 0; }
}

/* Sea critters — playful weird creatures bobbing near the surface.
   Clickable: hover scales them up, .active gives a sustained wobble. */
.sea-critter {
    position: absolute;
    width: var(--size, 70px);
    height: var(--size, 70px);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    z-index: 10;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.sea-critter:hover {
    transform: scale(1.12);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.sea-critter.active {
    animation: critterWobble 1.6s infinite ease-in-out !important;
    filter: drop-shadow(0 0 8px rgba(240, 224, 184, 0.5)) drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4));
}

@keyframes critterWobble {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50%      { transform: rotate(6deg) translateY(-4px); }
}

/* Comb jelly (ctenophore) — translucent oblong with comb ridges; pulses */
.sea-critter.comb-jelly {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 80'><ellipse cx='20' cy='40' rx='13' ry='34' fill='%234a5868' opacity='0.55' stroke='%236a7888' stroke-width='0.6'/><path d='M11 18 Q9 40 11 62' stroke='%23a8b8c4' stroke-width='0.8' fill='none' opacity='0.45'/><path d='M15 12 Q13 40 15 68' stroke='%23a8b8c4' stroke-width='0.8' fill='none' opacity='0.45'/><line x1='20' y1='10' x2='20' y2='70' stroke='%23a8b8c4' stroke-width='0.8' opacity='0.45'/><path d='M25 12 Q27 40 25 68' stroke='%23a8b8c4' stroke-width='0.8' fill='none' opacity='0.45'/><path d='M29 18 Q31 40 29 62' stroke='%23a8b8c4' stroke-width='0.8' fill='none' opacity='0.45'/><circle cx='20' cy='10' r='2.2' fill='%23d4c8a0' opacity='0.7'/></svg>");
    animation: combJellyPulse 5s infinite ease-in-out;
}

@keyframes combJellyPulse {
    0%, 100% { transform: translateY(0)    scaleY(1); }
    50%      { transform: translateY(-8px) scaleY(0.9); }
}

/* Sea angel (Clione) — small ghostly winged creature, drifts side-to-side */
.sea-critter.sea-angel {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 70'><ellipse cx='30' cy='40' rx='8' ry='25' fill='%237088a0' opacity='0.65' stroke='%2398b0c8' stroke-width='0.5'/><path d='M22 28 Q8 22 4 40 Q12 38 22 40 Z' fill='%2388a0b8' opacity='0.65'/><path d='M38 28 Q52 22 56 40 Q48 38 38 40 Z' fill='%2388a0b8' opacity='0.65'/><ellipse cx='30' cy='18' rx='4' ry='6' fill='%23a8b8c4' opacity='0.7'/><circle cx='30' cy='17' r='1.6' fill='%23d4c8a0' opacity='0.7'/></svg>");
    animation: angelFlutter 4s infinite ease-in-out;
}

@keyframes angelFlutter {
    0%, 100% { transform: translate(0, 0)    rotate(-4deg); }
    50%      { transform: translate(2px, -6px) rotate(4deg); }
}

/* Siphonophore — long colony of bells trailing down on a string, sways gently */
.sea-critter.siphonophore {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 100'><line x1='15' y1='5' x2='15' y2='95' stroke='%23586878' stroke-width='1' opacity='0.6'/><ellipse cx='15' cy='12' rx='9' ry='7' fill='%23586878' opacity='0.72'/><ellipse cx='15' cy='28' rx='7' ry='6' fill='%23586878' opacity='0.68'/><ellipse cx='15' cy='42' rx='8' ry='6' fill='%23586878' opacity='0.68'/><ellipse cx='15' cy='56' rx='6' ry='5' fill='%23586878' opacity='0.65'/><ellipse cx='15' cy='70' rx='7' ry='6' fill='%23586878' opacity='0.65'/><ellipse cx='15' cy='84' rx='5' ry='4' fill='%23586878' opacity='0.62'/><circle cx='15' cy='12' r='2' fill='%23d4c8a0' opacity='0.6'/></svg>");
    animation: siphoSway 7s infinite ease-in-out;
    transform-origin: 50% 5%;
}

@keyframes siphoSway {
    0%, 100% { transform: rotate(-5deg); }
    50%      { transform: rotate(5deg); }
}

/* Bristle worm — segmented worm with bristles, slow undulation */
.sea-critter.bristle-worm {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'><g fill='%23685e48' opacity='0.85'><ellipse cx='12' cy='15' rx='8' ry='5'/><ellipse cx='22' cy='15' rx='8' ry='5'/><ellipse cx='32' cy='15' rx='8' ry='5'/><ellipse cx='42' cy='15' rx='8' ry='5'/><ellipse cx='52' cy='15' rx='8' ry='5'/><ellipse cx='62' cy='15' rx='8' ry='5'/><ellipse cx='70' cy='15' rx='6' ry='4'/></g><g stroke='%2398886c' stroke-width='1' opacity='0.6'><line x1='12' y1='10' x2='10' y2='2'/><line x1='12' y1='20' x2='10' y2='28'/><line x1='22' y1='10' x2='20' y2='2'/><line x1='22' y1='20' x2='20' y2='28'/><line x1='32' y1='10' x2='30' y2='2'/><line x1='32' y1='20' x2='30' y2='28'/><line x1='42' y1='10' x2='40' y2='2'/><line x1='42' y1='20' x2='40' y2='28'/><line x1='52' y1='10' x2='50' y2='2'/><line x1='52' y1='20' x2='50' y2='28'/><line x1='62' y1='10' x2='60' y2='2'/><line x1='62' y1='20' x2='60' y2='28'/></g></svg>");
    animation: wormUndulate 5s infinite ease-in-out;
}

@keyframes wormUndulate {
    0%, 100% { transform: translateX(0)    skewY(-2deg); }
    50%      { transform: translateX(-3px) skewY(2deg); }
}

/* Hatchetfish — flat silver-grey hatchet shape with belly photophores */
.sea-critter.hatchetfish {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 40'><path d='M5 20 L25 5 L45 5 L55 20 L45 35 L25 35 Z' fill='%235e6e7e' opacity='0.85'/><path d='M55 20 L65 12 L65 28 Z' fill='%235e6e7e' opacity='0.85'/><circle cx='20' cy='30' r='1.2' fill='%23d4c8a0' opacity='0.6'/><circle cx='28' cy='32' r='1.2' fill='%23d4c8a0' opacity='0.6'/><circle cx='36' cy='32' r='1.2' fill='%23d4c8a0' opacity='0.6'/><circle cx='44' cy='30' r='1.2' fill='%23d4c8a0' opacity='0.6'/><line x1='28' y1='14' x2='42' y2='14' stroke='%23020a12' stroke-width='1' opacity='0.5'/></svg>");
    animation: hatchetGlide 6s infinite ease-in-out;
}

@keyframes hatchetGlide {
    0%, 100% { transform: translate(0, 0)    rotate(-2deg); }
    50%      { transform: translate(4px, -3px) rotate(2deg); }
}

/* Drifting bottle — pixel-art message-in-a-bottle bobbing on the swells.
   Ambient (not part of the interactive critter set); takes over the role
   buoys had as the third layer of scene decoration. */
.bottle {
    position: absolute;
    width: var(--size, 36px);
    height: var(--size, 50px);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'><rect x='10' y='14' width='20' height='30' rx='3' fill='%236a5a3e' opacity='0.85'/><rect x='14' y='5' width='12' height='10' fill='%236a5a3e' opacity='0.85'/><rect x='14' y='2' width='12' height='4' fill='%23a88a5a'/><rect x='15' y='22' width='10' height='18' fill='%23e0caa0' opacity='0.92'/><line x1='17' y1='26' x2='23' y2='26' stroke='%23a88a5a' stroke-width='0.6'/><line x1='17' y1='30' x2='23' y2='30' stroke='%23a88a5a' stroke-width='0.6'/><line x1='17' y1='34' x2='22' y2='34' stroke='%23a88a5a' stroke-width='0.6'/><rect x='12' y='17' width='1.5' height='24' fill='%23ffffff' opacity='0.35'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 6;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.4));
    animation: bottleBob 5s infinite ease-in-out;
}

.bottle.tilted { animation: bottleBobTilted 6s infinite ease-in-out; }

@keyframes bottleBob {
    0%, 100% { transform: translateY(0)    rotate(-12deg); }
    50%      { transform: translateY(-6px) rotate(-6deg); }
}

@keyframes bottleBobTilted {
    0%, 100% { transform: translateY(0)    rotate(20deg); }
    50%      { transform: translateY(-5px) rotate(10deg); }
}

/* Sea creatures (shared base) */
.sea-creature {
    position: absolute;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 15;
}

/* Tall ship — multi-masted sailing vessel, the centerpiece of the scene.
   Uses an inline SVG background so we get a proper silhouette without a ton
   of pseudo-element acrobatics. */
.sea-creature.tall-ship {
    width: 130px;
    height: 110px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'><rect x='32' y='14' width='1.5' height='52' fill='%23020a12'/><rect x='52' y='8' width='1.5' height='58' fill='%23020a12'/><rect x='72' y='14' width='1.5' height='52' fill='%23020a12'/><path d='M53.5 8 L62 10 L53.5 13 Z' fill='%23e8a96a'/><path d='M15 20 Q33 18 33 32 L33 60 Q24 62 15 60 Z' fill='%23d8dee6' stroke='%23020a12' stroke-width='0.6'/><path d='M37 14 Q53 12 53 28 L53 64 Q44 66 37 64 Z' fill='%23d8dee6' stroke='%23020a12' stroke-width='0.6'/><path d='M58 18 Q73 16 73 30 L73 60 Q64 62 58 60 Z' fill='%23d8dee6' stroke='%23020a12' stroke-width='0.6'/><path d='M73 22 L92 28 L73 30 Z' fill='%23d8dee6' stroke='%23020a12' stroke-width='0.6'/><path d='M6 66 L94 66 L84 80 L16 80 Z' fill='%23020a12'/><rect x='14' y='70' width='72' height='2' fill='%23e8a96a' opacity='0.7'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    animation: shipRock 7s infinite ease-in-out;
}

/* Distant sailboat — smaller schooner riding the horizon for depth */
.sea-creature.sailboat {
    width: 50px;
    height: 44px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 36'><rect x='12' y='6' width='1' height='22' fill='%23020a12'/><rect x='22' y='6' width='1' height='22' fill='%23020a12'/><path d='M6 10 Q13 9 13 16 L13 26 Q9 27 6 26 Z' fill='%23d8dee6' stroke='%23020a12' stroke-width='0.4'/><path d='M16 8 Q23 7 23 14 L23 28 Q19 29 16 28 Z' fill='%23d8dee6' stroke='%23020a12' stroke-width='0.4'/><path d='M3 28 L37 28 L33 34 L7 34 Z' fill='%23020a12'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.75;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    animation: shipRockSubtle 9s infinite ease-in-out;
}

/* Houseboat — small wooden ship: curved hull with plank lines, wooden cabin
   with mullioned windows and door, low-pitch roof, terracotta chimney with
   smoke, flag on a bow pole, deck railing. */
.sea-creature.houseboat {
    width: 170px;
    height: 110px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 90'><path d='M 8 56 Q 8 50 14 50 L 122 50 Q 132 50 134 56 L 132 70 Q 130 76 122 76 L 16 76 Q 10 76 8 70 Z' fill='%235c4020'/><path d='M 10 60 L 132 60' stroke='%23381f0a' stroke-width='0.6' opacity='0.7'/><path d='M 12 66 L 130 66' stroke='%23381f0a' stroke-width='0.6' opacity='0.7'/><rect x='10' y='49' width='124' height='2' fill='%23a17240'/><rect x='10' y='51' width='124' height='1' fill='%23381f0a'/><rect x='26' y='24' width='80' height='26' fill='%237a5a30'/><line x1='26' y1='32' x2='106' y2='32' stroke='%235a3e1c' stroke-width='0.5' opacity='0.6'/><line x1='26' y1='40' x2='106' y2='40' stroke='%235a3e1c' stroke-width='0.5' opacity='0.6'/><line x1='48' y1='24' x2='48' y2='50' stroke='%235a3e1c' stroke-width='0.4' opacity='0.5'/><line x1='66' y1='24' x2='66' y2='50' stroke='%235a3e1c' stroke-width='0.4' opacity='0.5'/><line x1='84' y1='24' x2='84' y2='50' stroke='%235a3e1c' stroke-width='0.4' opacity='0.5'/><path d='M 22 24 L 66 14 L 110 24 Z' fill='%233a2a12'/><line x1='22' y1='24' x2='110' y2='24' stroke='%231a1208' stroke-width='0.5' opacity='0.6'/><g stroke='%23381f0a' stroke-width='0.5'><rect x='32' y='32' width='10' height='10' fill='%23d4c8a0' opacity='0.92'/><rect x='50' y='32' width='10' height='10' fill='%23d4c8a0' opacity='0.92'/><rect x='68' y='32' width='10' height='10' fill='%23d4c8a0' opacity='0.92'/><rect x='86' y='32' width='10' height='10' fill='%23d4c8a0' opacity='0.92'/></g><g stroke='%23381f0a' stroke-width='0.3' opacity='0.7'><line x1='37' y1='32' x2='37' y2='42'/><line x1='32' y1='37' x2='42' y2='37'/><line x1='55' y1='32' x2='55' y2='42'/><line x1='50' y1='37' x2='60' y2='37'/><line x1='73' y1='32' x2='73' y2='42'/><line x1='68' y1='37' x2='78' y2='37'/><line x1='91' y1='32' x2='91' y2='42'/><line x1='86' y1='37' x2='96' y2='37'/></g><rect x='62' y='44' width='8' height='6' fill='%232a1c08'/><circle cx='68' cy='47' r='0.6' fill='%23d4c8a0'/><rect x='92' y='14' width='4' height='10' fill='%23a04028'/><rect x='91' y='12' width='6' height='2.5' fill='%237c2c1c'/><ellipse cx='95' cy='8' rx='3' ry='1.5' fill='%23d8dee6' opacity='0.55'/><ellipse cx='99' cy='5' rx='4' ry='2' fill='%23d8dee6' opacity='0.4'/><ellipse cx='104' cy='2' rx='5' ry='2' fill='%23d8dee6' opacity='0.28'/><line x1='120' y1='50' x2='120' y2='30' stroke='%23381f0a' stroke-width='1'/><path d='M 120 30 L 128 32 L 120 36 Z' fill='%23e8a96a'/><line x1='112' y1='50' x2='128' y2='50' stroke='%23a17240' stroke-width='0.5'/><line x1='112' y1='46' x2='128' y2='46' stroke='%23a17240' stroke-width='0.5'/><line x1='115' y1='46' x2='115' y2='50' stroke='%23a17240' stroke-width='0.4'/><line x1='121' y1='46' x2='121' y2='50' stroke='%23a17240' stroke-width='0.4'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
    animation: houseboatBob 8s infinite ease-in-out;
}

@keyframes houseboatBob {
    0%, 100% { transform: translate(0, 0)    rotate(-1.5deg); }
    50%      { transform: translate(2px, -2px) rotate(1.5deg); }
}

@keyframes shipRock {
    0%, 100% { transform: translate(0, 0) rotate(-2.5deg); }
    50%      { transform: translate(3px, -3px) rotate(2.5deg); }
}

@keyframes shipRockSubtle {
    0%, 100% { transform: translate(0, 0) rotate(-1.5deg); }
    50%      { transform: translate(1px, -1px) rotate(1.5deg); }
}

.sea-creature.tall-ship:hover,
.sea-creature.sailboat:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}

/* Clouds — soft puffy shapes drifting slowly across the sky.
   Several .cloud divs at different heights and drift speeds. */
.cloud {
    position: absolute;
    pointer-events: none;
    z-index: 3;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 70'><ellipse cx='35' cy='48' rx='30' ry='16' fill='%23d8dee6' opacity='0.9'/><ellipse cx='78' cy='36' rx='44' ry='24' fill='%23d8dee6' opacity='0.92'/><ellipse cx='120' cy='42' rx='38' ry='20' fill='%23d8dee6' opacity='0.9'/><ellipse cx='155' cy='46' rx='30' ry='16' fill='%23d8dee6' opacity='0.88'/><ellipse cx='178' cy='50' rx='20' ry='11' fill='%23d8dee6' opacity='0.82'/><ellipse cx='90' cy='52' rx='55' ry='10' fill='%2392a0ae' opacity='0.55'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    width: 240px;
    height: 80px;
    opacity: 0.95;
    animation: cloudDrift 120s infinite linear;
}

.cloud.small  { width: 150px; height: 50px; opacity: 0.85; animation-duration: 160s; }
.cloud.medium { width: 220px; height: 75px; animation-duration: 130s; }
.cloud.large  { width: 320px; height: 110px; opacity: 0.92; animation-duration: 200s; }
.cloud.wispy  { width: 180px; height: 55px; opacity: 0.55; animation-duration: 180s; }

@keyframes cloudDrift {
    0%   { transform: translateX(-110vw); }
    100% { transform: translateX(110vw); }
}

/* Seagull — small V silhouette gliding across the sky */
.sea-creature.seagull {
    width: 24px;
    height: 10px;
    background: transparent;
    animation: gullGlide 14s infinite linear;
}

.sea-creature.seagull::before,
.sea-creature.seagull::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 12px;
    height: 2px;
    background: var(--text-dark);
    border-radius: 50%;
}

.sea-creature.seagull::before {
    left: 0;
    transform: rotate(-18deg);
    transform-origin: right center;
    animation: gullFlapLeft 0.6s infinite ease-in-out;
}

.sea-creature.seagull::after {
    right: 0;
    transform: rotate(18deg);
    transform-origin: left center;
    animation: gullFlapRight 0.6s infinite ease-in-out;
}

@keyframes gullFlapLeft {
    0%, 100% { transform: rotate(-18deg); }
    50%      { transform: rotate(-4deg); }
}

@keyframes gullFlapRight {
    0%, 100% { transform: rotate(18deg); }
    50%      { transform: rotate(4deg); }
}

@keyframes gullGlide {
    0%   { transform: translate(-10vw, 0); }
    100% { transform: translate(110vw, -20px); }
}

/* Radio Element */
.radio-element {
    position: absolute;
    width: 100px;
    height: 80px;
    background: var(--sea-deep);
    border: 3px solid var(--foam);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.1);
    animation: radioIdle 6s infinite ease-in-out;
}

.radio-element::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(50% + 3px);
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent var(--sun);
    filter: drop-shadow(0 0 10px var(--sun-glow));
    transition: all 0.3s ease;
}

.radio-element::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    height: 15px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 2px;
}

.radio-element.playing::before {
    content: '';
    left: 50%;
    width: 6px;
    height: 22px;
    border-style: solid;
    border-width: 0 6px 0 6px;
    border-color: transparent var(--sun) transparent var(--sun);
    filter: drop-shadow(0 0 10px var(--sun-glow));
}

.radio-element.playing {
    animation: radioPlaying 2s infinite ease-in-out;
    border-color: var(--sun);
}

@keyframes radioIdle {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.02); }
}

@keyframes radioPlaying {
    0%, 100% {
        box-shadow:
            0 4px 0 rgba(0, 0, 0, 0.3),
            inset 0 2px 0 rgba(255, 255, 255, 0.1),
            0 0 20px var(--sun-glow);
    }
    50% {
        box-shadow:
            0 4px 0 rgba(0, 0, 0, 0.3),
            inset 0 2px 0 rgba(255, 255, 255, 0.1),
            0 0 30px var(--sun);
    }
}

.radio-element:hover {
    transform: translate(-50%, -50%) scale(1.05);
    border-color: var(--sun);
    box-shadow:
        0 4px 0 rgba(0, 0, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.1),
        0 0 20px var(--sun-glow);
}

.radio-element:active {
    transform: translate(-50%, -50%) scale(0.95);
    box-shadow:
        0 2px 0 rgba(0, 0, 0, 0.3),
        inset 0 2px 0 rgba(255, 255, 255, 0.1);
}

/* Pixel Art Text */
.pixel-text {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-light);
    text-shadow:
        2px 2px 0 var(--sea-deep),
        0 0 10px rgba(244, 249, 255, 0.3);
    image-rendering: pixelated;
}

/* Song Display */
.song-display {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 20px;
    background: rgba(13, 58, 92, 0.85);
    border: 2px solid var(--sun);
    border-radius: 4px;
    z-index: 30;
    min-width: 200px;
    max-width: 80%;
    text-align: center;
    box-shadow:
        0 0 0 1px var(--sea-deep),
        0 4px 0 rgba(0, 0, 0, 0.3),
        0 0 15px var(--sun-glow);
    transition: all 0.3s ease;
    user-select: none;
}

.song-display:hover {
    transform: translateX(-50%) translateY(-5px);
    box-shadow:
        0 0 0 1px var(--sea-deep),
        0 6px 0 rgba(0, 0, 0, 0.3),
        0 0 25px var(--sun-glow);
}

.song-display:active {
    transform: translateX(-50%) translateY(-3px);
}

.song-display.generating {
    animation: generatingPulse 2s infinite;
}

@keyframes generatingPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px var(--sea-deep),
            0 4px 0 rgba(0, 0, 0, 0.3),
            0 0 15px var(--sun-glow);
    }
    50% {
        box-shadow:
            0 0 0 1px var(--sea-deep),
            0 4px 0 rgba(0, 0, 0, 0.3),
            0 0 25px var(--sun);
    }
}

.song-display .pixel-text {
    font-size: 12px;
    line-height: 1.4;
    word-wrap: break-word;
    display: block;
}

/* Startup Overlay */
.startup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 58, 92, 0.96);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    transition: opacity 0.5s ease-out;
}

.startup-message {
    text-align: center;
    padding: 30px 40px;
    background: rgba(13, 58, 92, 0.92);
    border: 3px solid var(--sun);
    border-radius: 8px;
    box-shadow:
        0 0 0 2px var(--sea-deep),
        0 8px 0 rgba(0, 0, 0, 0.4),
        0 0 30px var(--sun-glow);
}

.startup-message .pixel-text {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--sun);
    text-shadow:
        2px 2px 0 var(--sea-deep),
        0 0 15px var(--sun-glow);
}

.startup-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 24px;
    color: var(--sun);
}

.startup-dots span {
    animation: startupDotPulse 1.4s infinite;
    animation-delay: calc(var(--dot-index, 0) * 0.2s);
}

.startup-dots span:nth-child(1) { --dot-index: 0; }
.startup-dots span:nth-child(2) { --dot-index: 1; }
.startup-dots span:nth-child(3) { --dot-index: 2; }

@keyframes startupDotPulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 1; transform: scale(1.2); }
}

/* Status Indicator */
.status-indicator {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 6px 12px;
    background: rgba(13, 58, 92, 0.85);
    border: 2px solid var(--sun);
    border-radius: 4px;
    z-index: 30;
    box-shadow:
        0 0 0 1px var(--sea-deep),
        0 2px 0 rgba(0, 0, 0, 0.3);
}

.status-indicator.online {
    border-color: var(--sun);
    animation: statusPulse 2s infinite;
}

.status-indicator.offline {
    border-color: var(--danger);
}

@keyframes statusPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px var(--sea-deep),
            0 2px 0 rgba(0, 0, 0, 0.3),
            0 0 10px var(--sun-glow);
    }
    50% {
        box-shadow:
            0 0 0 1px var(--sea-deep),
            0 2px 0 rgba(0, 0, 0, 0.3),
            0 0 20px var(--sun);
    }
}

/* Ripple Effect on Click */
.ripple {
    position: absolute;
    border-radius: 50%;
    background: var(--foam-dim);
    transform: scale(0);
    animation: rippleEffect 0.6s ease-out;
    pointer-events: none;
    z-index: 100;
}

@keyframes rippleEffect {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .sea-creature {
        display: none;
    }

    .sea-critter {
        --size: 56px;
    }

    .bottle {
        --size: 30px;
    }

    .radio-element {
        width: 100px;
        height: 80px;
    }

    .song-display {
        bottom: max(100px, env(safe-area-inset-bottom) + 85px);
        padding: 10px 16px;
        min-width: 150px;
        max-width: 90%;
    }

    .pixel-text {
        font-size: 12px;
    }

    .status-indicator {
        top: max(15px, env(safe-area-inset-top) + 10px);
        right: 15px;
    }

    .sun {
        width: 50px;
        height: 50px;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}