/* ============================================================
   bada.moe — Pixel Ocean Adventure
   Seapunk meets Pixel Art — vertical descent through ocean zones
   ============================================================ */

:root {
    --sky:       #87ceeb;
    --surface:   #40e0d0;
    --mid:       #1a8fa0;
    --deep:      #0a3d5c;
    --abyss:     #060d1a;
    --pink:      #ff69b4;
    --neon:      #39ff14;
    --sand:      #f5deb3;
    --bubble:    #ffffff;
    --gold:      #ffd700;

    --pix: 4px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

html {
    scroll-behavior: auto;
    background: var(--abyss);
}

body {
    font-family: "Quicksand", sans-serif;
    color: var(--bubble);
    background: var(--sky);
    overflow-x: hidden;
    min-height: 100vh;
    line-height: 1.6;
    font-weight: 400;
}

/* ============================================================
   DEPTH METER (fixed right side)
   ============================================================ */

#depth-meter {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 240px;
    z-index: 200;
    display: flex;
    pointer-events: none;
}

#depth-meter-track {
    position: relative;
    width: 16px;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid var(--bubble);
    box-shadow:
        0 0 0 2px var(--abyss),
        4px 4px 0 0 rgba(0, 0, 0, 0.6);
}

#depth-meter-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(
        to bottom,
        var(--sky) 0%, var(--sky) 20%,
        var(--surface) 20%, var(--surface) 40%,
        var(--mid) 40%, var(--mid) 60%,
        var(--deep) 60%, var(--deep) 80%,
        var(--abyss) 80%, var(--abyss) 100%
    );
    transition: height 120ms steps(8);
}

#depth-meter-arrow {
    position: absolute;
    left: -10px;
    top: 0%;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--gold);
    filter: drop-shadow(0 0 0 var(--abyss));
    transition: top 120ms steps(8);
}

#depth-labels {
    position: absolute;
    left: 22px;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: "Press Start 2P", monospace;
    font-size: 0.5rem;
    color: var(--bubble);
    text-shadow: 1px 1px 0 var(--abyss);
    line-height: 1;
    white-space: nowrap;
}

.depth-label {
    transform: translateY(-4px);
    opacity: 0.7;
    transition: opacity 80ms steps(2), color 80ms steps(2);
}

.depth-label.active {
    opacity: 1;
    color: var(--gold);
}

/* ============================================================
   PIXEL BUBBLES
   ============================================================ */

#bubbles-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    overflow: hidden;
}

.pixel-bubble {
    position: absolute;
    bottom: -20px;
    width: 8px;
    height: 8px;
    background: transparent;
    /* stepped-circle pixel bubble using box-shadow squares */
    box-shadow:
         0   -8px 0 0 rgba(255, 255, 255, 0.9),
         8px  0   0 0 rgba(255, 255, 255, 0.9),
         0    8px 0 0 rgba(255, 255, 255, 0.9),
        -8px  0   0 0 rgba(255, 255, 255, 0.9);
    animation: bubble-rise linear infinite;
    opacity: 0.85;
}

.pixel-bubble.bubble-small {
    width: 4px;
    height: 4px;
    box-shadow:
         0   -4px 0 0 rgba(255, 255, 255, 0.85),
         4px  0   0 0 rgba(255, 255, 255, 0.85),
         0    4px 0 0 rgba(255, 255, 255, 0.85),
        -4px  0   0 0 rgba(255, 255, 255, 0.85);
}

.pixel-bubble.bubble-large {
    width: 12px;
    height: 12px;
    box-shadow:
         0   -12px 0 0 rgba(255, 255, 255, 0.95),
         12px  0   0 0 rgba(255, 255, 255, 0.95),
         0    12px 0 0 rgba(255, 255, 255, 0.95),
        -12px  0   0 0 rgba(255, 255, 255, 0.95),
         12px -12px 0 0 rgba(255, 255, 255, 0.6),
        -12px -12px 0 0 rgba(255, 255, 255, 0.6),
         12px  12px 0 0 rgba(255, 255, 255, 0.6),
        -12px  12px 0 0 rgba(255, 255, 255, 0.6);
}

@keyframes bubble-rise {
    0%   { transform: translateY(0)     translateX(0); }
    25%  { transform: translateY(-25vh) translateX(-6px); }
    50%  { transform: translateY(-50vh) translateX(6px); }
    75%  { transform: translateY(-75vh) translateX(-4px); }
    100% { transform: translateY(-110vh) translateX(0); }
}

/* ============================================================
   SHARED ZONE STYLING
   ============================================================ */

.ocean-zone {
    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 64px 32px 96px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.zone-header {
    position: relative;
    z-index: 10;
    text-align: center;
    margin-top: 24px;
    margin-bottom: 24px;
}

.zone-title {
    font-family: "Silkscreen", monospace;
    font-weight: 400;
    font-size: clamp(1.5rem, 4vw, 3rem);
    color: var(--bubble);
    text-shadow:
        4px 4px 0 var(--abyss),
        -2px -2px 0 var(--deep);
    letter-spacing: 2px;
}

.zone-depth-label {
    font-family: "Press Start 2P", monospace;
    font-size: 0.65rem;
    color: var(--gold);
    margin-top: 12px;
    text-shadow: 2px 2px 0 var(--abyss);
}

.zone-description {
    position: relative;
    z-index: 10;
    max-width: 540px;
    text-align: center;
    margin: 12px auto 32px;
    padding: 16px 20px;
    background: rgba(6, 13, 26, 0.45);
    border: 2px solid rgba(255, 255, 255, 0.35);
    box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.4);
    color: var(--bubble);
    font-size: 1rem;
    line-height: 1.6;
}

/* ============================================================
   ZONE 1 — SURFACE (HERO)
   ============================================================ */

#zone-surface {
    background:
        linear-gradient(
            to bottom,
            #87ceeb 0%, #87ceeb 30%,
            #a8e0f0 30%, #a8e0f0 50%,
            #b9eaf2 50%, #b9eaf2 60%,
            var(--surface) 60%, var(--surface) 100%
        );
    justify-content: center;
}

.pixel-sky {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* pixel clouds via repeating box-shadow */
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.8) 0 4px, transparent 4px),
        radial-gradient(circle at 28% 28%, rgba(255,255,255,0.7) 0 4px, transparent 4px),
        radial-gradient(circle at 70% 12%, rgba(255,255,255,0.85) 0 4px, transparent 4px),
        radial-gradient(circle at 86% 22%, rgba(255,255,255,0.75) 0 4px, transparent 4px);
    background-size: 100% 100%;
}

.surface-content {
    position: relative;
    z-index: 20;
    text-align: center;
    transform: translateY(-40px);
}

#site-title {
    font-family: "Silkscreen", monospace;
    font-weight: 700;
    font-size: clamp(3rem, 10vw, 7rem);
    color: var(--bubble);
    letter-spacing: 6px;
    text-shadow:
        4px 4px 0 var(--deep),
        8px 8px 0 var(--mid),
        12px 12px 0 rgba(0,0,0,0.25);
    animation: title-bob 1.6s steps(4) infinite;
}

@keyframes title-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.subtitle {
    font-family: "Press Start 2P", monospace;
    font-size: 0.65rem;
    color: var(--deep);
    margin-top: 24px;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 var(--bubble);
}

#bouncing-anchor {
    margin: 32px auto 0;
    width: 32px;
    height: 32px;
    animation: anchor-bounce 1.2s steps(3) infinite;
}

@keyframes anchor-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(8px); }
}

/* Pixel anchor sprite via box-shadow ----------------------- */
.pixel-anchor {
    width: 4px;
    height: 4px;
    background: transparent;
    margin: 0 auto;
    position: relative;
    /* anchor (8x8 pattern, scaled with 4px pixels) */
    box-shadow:
        /* top ring */
         12px  0   0 0 var(--abyss),
         16px  0   0 0 var(--abyss),
         12px  4px 0 0 var(--bubble),
         16px  4px 0 0 var(--bubble),
        /* shaft */
         12px  8px 0 0 var(--abyss),
         16px  8px 0 0 var(--abyss),
         12px 12px 0 0 var(--abyss),
         16px 12px 0 0 var(--abyss),
         12px 16px 0 0 var(--abyss),
         16px 16px 0 0 var(--abyss),
        /* crossbar */
         4px  8px 0 0 var(--abyss),
         8px  8px 0 0 var(--abyss),
         20px 8px 0 0 var(--abyss),
         24px 8px 0 0 var(--abyss),
        /* curved bottom */
         4px  20px 0 0 var(--abyss),
         8px  24px 0 0 var(--abyss),
         12px 24px 0 0 var(--abyss),
         16px 24px 0 0 var(--abyss),
         20px 24px 0 0 var(--abyss),
         24px 20px 0 0 var(--abyss);
}

/* ----- PIXEL WAVES (stepped sine waves) ----- */
.pixel-waves {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 96px;
    pointer-events: none;
}

.wave-row {
    position: absolute;
    left: 0;
    width: 200%;
    height: 16px;
    animation: wave-shift linear infinite;
}

.wave-row-1 {
    bottom: 64px;
    background:
        repeating-linear-gradient(
            to right,
            var(--bubble) 0 16px,
            transparent 16px 32px,
            var(--bubble) 32px 48px,
            transparent 48px 64px
        );
    animation-duration: 4s;
    opacity: 0.85;
}

.wave-row-2 {
    bottom: 32px;
    background:
        repeating-linear-gradient(
            to right,
            var(--surface) 0 24px,
            var(--mid) 24px 48px
        );
    animation-duration: 3s;
    animation-direction: reverse;
}

.wave-row-3 {
    bottom: 0;
    height: 32px;
    background:
        repeating-linear-gradient(
            to right,
            var(--mid) 0 16px,
            var(--deep) 16px 32px
        );
    animation-duration: 5s;
}

@keyframes wave-shift {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================================
   CORAL STRIP DIVIDERS
   ============================================================ */

.coral-strip {
    position: relative;
    width: 100%;
    height: 56px;
    background-image:
        repeating-linear-gradient(
            to right,
            var(--pink) 0 8px,
            var(--gold) 8px 16px,
            var(--neon) 16px 24px,
            var(--pink) 24px 32px,
            #ff8c00 32px 40px,
            var(--neon) 40px 48px
        );
    background-size: 48px 8px;
    background-repeat: repeat-x;
    background-position: bottom;
    border-top: 4px solid var(--abyss);
    border-bottom: 4px solid var(--abyss);
}

.coral-strip-surface { background-color: var(--surface); }
.coral-strip-twilight { background-color: var(--mid); }
.coral-strip-midnight { background-color: var(--deep); }

/* draw stepped coral silhouettes via box-shadow “teeth” using a pseudo-element */
.coral-strip::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background:
        repeating-linear-gradient(
            to right,
            var(--abyss) 0 4px,
            transparent 4px 12px,
            var(--abyss) 12px 16px,
            transparent 16px 28px,
            var(--abyss) 28px 32px,
            transparent 32px 44px
        );
    opacity: 0.5;
}

/* ============================================================
   ZONE 2 — SUNLIGHT
   ============================================================ */

#zone-sunlight {
    background:
        linear-gradient(
            to bottom,
            var(--surface) 0%, var(--surface) 40%,
            #2bb6c4 40%, #2bb6c4 75%,
            var(--mid) 75%, var(--mid) 100%
        );
}

.coral-reef {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0 32px;
    z-index: 4;
    pointer-events: none;
}

.pixel-coral {
    width: 32px;
    height: 64px;
    position: relative;
}

.pixel-coral::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 4px;
    height: 4px;
}

.coral-pink::before {
    box-shadow:
         0   -4px 0 0 var(--pink),  4px -4px 0 0 var(--pink),
         8px  -4px 0 0 var(--pink), 12px -4px 0 0 var(--pink),
         4px -8px 0 0 var(--pink),  8px -8px 0 0 var(--pink),
         0  -12px 0 0 var(--pink), 12px -12px 0 0 var(--pink),
         4px -16px 0 0 #ff8cc8,    8px -16px 0 0 #ff8cc8,
         0  -20px 0 0 #ff8cc8,    12px -20px 0 0 #ff8cc8,
         4px -24px 0 0 #ffaadc,    8px -24px 0 0 #ffaadc,
         0   0   0 0 var(--pink), 12px  0   0 0 var(--pink),
         4px  0   0 0 var(--pink),  8px  0   0 0 var(--pink),
         16px  0  0 0 var(--pink), 20px  0   0 0 var(--pink);
}

.coral-orange::before {
    box-shadow:
         0   -4px 0 0 #ff8c00,  4px -4px 0 0 #ff8c00,
         0   -8px 0 0 #ff8c00,  4px -8px 0 0 #ff8c00,
         0  -12px 0 0 #ff8c00,  4px -12px 0 0 #ff8c00,
         8px -8px 0 0 #ff8c00, 12px -8px 0 0 #ff8c00,
        -4px -16px 0 0 #ffaa55, 0   -16px 0 0 #ffaa55,
         8px -20px 0 0 #ffaa55,12px -20px 0 0 #ffaa55,
         16px -8px 0 0 #ff8c00, 16px -4px 0 0 #ff8c00,
         0   0   0 0 #ff8c00,  4px  0   0 0 #ff8c00,
         8px  0   0 0 #ff8c00, 12px  0   0 0 #ff8c00,
         16px 0   0 0 #ff8c00;
}

.coral-green::before {
    box-shadow:
         4px -4px 0 0 var(--neon),  8px -4px 0 0 var(--neon),
         4px -8px 0 0 var(--neon),  8px -8px 0 0 var(--neon),
         0  -12px 0 0 var(--neon), 12px -12px 0 0 var(--neon),
         4px -12px 0 0 var(--neon), 8px -12px 0 0 var(--neon),
         4px -16px 0 0 #88ff66,    8px -16px 0 0 #88ff66,
         0  -20px 0 0 #88ff66,    12px -20px 0 0 #88ff66,
         4px -24px 0 0 #ccffaa,    8px -24px 0 0 #ccffaa,
         0   0   0 0 var(--neon), 12px  0   0 0 var(--neon),
         4px  0   0 0 var(--neon),  8px  0   0 0 var(--neon);
}

.coral-purple::before {
    box-shadow:
         0   -4px 0 0 #b266ff,  4px -4px 0 0 #b266ff,
         8px -4px 0 0 #b266ff, 12px -4px 0 0 #b266ff,
         0   -8px 0 0 #b266ff,  4px -8px 0 0 #b266ff,
         8px -8px 0 0 #b266ff, 12px -8px 0 0 #b266ff,
        -4px -12px 0 0 #b266ff, 16px -12px 0 0 #b266ff,
         0  -16px 0 0 #cc88ff, 12px -16px 0 0 #cc88ff,
         4px -20px 0 0 #cc88ff, 8px -20px 0 0 #cc88ff,
         0   0   0 0 #b266ff, 12px  0   0 0 #b266ff,
         4px  0   0 0 #b266ff,  8px  0   0 0 #b266ff,
         16px  0  0 0 #b266ff;
}

/* ============================================================
   ZONE 3 — TWILIGHT
   ============================================================ */

#zone-twilight {
    background:
        linear-gradient(
            to bottom,
            var(--mid) 0%, var(--mid) 30%,
            #135f73 30%, #135f73 60%,
            var(--deep) 60%, var(--deep) 100%
        );
    color: var(--bubble);
}

#zone-twilight .zone-description {
    border-color: var(--neon);
    box-shadow: 4px 4px 0 0 rgba(57, 255, 20, 0.35);
}

/* ============================================================
   ZONE 4 — MIDNIGHT
   ============================================================ */

#zone-midnight {
    background:
        linear-gradient(
            to bottom,
            var(--deep) 0%, var(--deep) 40%,
            #051f33 40%, #051f33 70%,
            var(--abyss) 70%, var(--abyss) 100%
        );
}

#zone-midnight .zone-description {
    border-color: var(--neon);
    box-shadow:
        4px 4px 0 0 rgba(0,0,0,0.5),
        0 0 0 4px rgba(57, 255, 20, 0.18);
    color: #d8ffe6;
}

#zone-midnight .zone-title {
    color: var(--neon);
    text-shadow:
        4px 4px 0 var(--abyss),
        0 0 12px rgba(57, 255, 20, 0.6);
}

/* ============================================================
   ZONE 5 — ABYSS + COLLECTION GRID
   ============================================================ */

#zone-abyss {
    background: var(--abyss);
    padding-bottom: 64px;
}

#zone-abyss .zone-title {
    color: var(--gold);
    text-shadow: 4px 4px 0 var(--deep), 0 0 16px rgba(255, 215, 0, 0.4);
}

#collection-header {
    text-align: center;
    margin: 40px 0 24px;
    z-index: 10;
    position: relative;
}

.collection-title {
    font-family: "Silkscreen", monospace;
    font-size: clamp(1.2rem, 3vw, 2rem);
    color: var(--gold);
    letter-spacing: 2px;
    text-shadow: 3px 3px 0 var(--deep);
}

.collection-subtitle {
    font-family: "Press Start 2P", monospace;
    font-size: 0.55rem;
    color: var(--bubble);
    margin-top: 10px;
    letter-spacing: 1px;
    opacity: 0.85;
}

#creature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 80px);
    gap: 4px;
    justify-content: center;
    max-width: 720px;
    width: 100%;
    margin: 24px auto 48px;
    padding: 16px;
    background: rgba(10, 61, 92, 0.5);
    border: 4px solid var(--bubble);
    box-shadow:
        0 0 0 4px var(--abyss),
        0 0 0 6px var(--gold),
        8px 8px 0 0 rgba(0, 0, 0, 0.5);
    z-index: 10;
    position: relative;
}

.creature-cell {
    width: 80px;
    height: 96px;
    background: var(--deep);
    border: 2px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 6px 2px;
    position: relative;
    cursor: pointer;
    transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}

.creature-cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px var(--gold), 4px 4px 0 0 rgba(0,0,0,0.6);
    background: #0e4a72;
}

.creature-cell.glow {
    box-shadow: 0 0 0 2px var(--gold), 0 0 12px var(--gold);
    background: #0e4a72;
}

.creature-sprite {
    width: 32px;
    height: 32px;
    margin-top: 6px;
    margin-bottom: 4px;
    position: relative;
    image-rendering: pixelated;
}

.creature-name {
    font-family: "Silkscreen", monospace;
    font-size: 0.55rem;
    color: var(--bubble);
    text-align: center;
    letter-spacing: 0.5px;
    line-height: 1.1;
    margin-top: 2px;
}

.creature-rarity {
    font-family: "Press Start 2P", monospace;
    font-size: 0.4rem;
    margin-top: 2px;
    padding: 1px 3px;
    letter-spacing: 0.5px;
}

.rarity-common    { color: #cccccc; }
.rarity-uncommon  { color: var(--neon); }
.rarity-rare      { color: var(--surface); text-shadow: 0 0 4px var(--surface); }
.rarity-legendary { color: var(--gold);   text-shadow: 0 0 6px var(--gold); animation: legendary-pulse 1.6s steps(4) infinite; }

@keyframes legendary-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* ============================================================
   PIXEL CREATURE SPRITES (box-shadow rendered)
   Every sprite uses 4px pixel size, drawn from a 1x1 base.
   ============================================================ */

.creature-sprite::before,
.swimmer::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    background: transparent;
    top: 0;
    left: 0;
}

/* ----- FISH ----- */
.sprite-fish::before {
    box-shadow:
        /* row 1 */ 16px 8px 0 0 var(--surface), 20px 8px 0 0 var(--surface),
        /* row 2 */ 12px 12px 0 0 var(--surface), 16px 12px 0 0 var(--bubble), 20px 12px 0 0 var(--surface), 24px 12px 0 0 var(--surface),
                    28px 12px 0 0 var(--surface),
        /* row 3 */  8px 16px 0 0 var(--surface), 12px 16px 0 0 var(--surface), 16px 16px 0 0 var(--surface),
                    20px 16px 0 0 var(--surface), 24px 16px 0 0 var(--bubble), 28px 16px 0 0 var(--abyss),
        /* row 4 */ 12px 20px 0 0 var(--surface), 16px 20px 0 0 var(--surface), 20px 20px 0 0 var(--surface),
                    24px 20px 0 0 var(--surface),
        /* tail */   4px 16px 0 0 var(--surface),  4px 20px 0 0 var(--surface),
                     8px 20px 0 0 var(--surface);
}

/* ----- JELLYFISH ----- */
.sprite-jellyfish::before {
    box-shadow:
        /* dome */ 12px 4px 0 0 var(--pink), 16px 4px 0 0 var(--pink), 20px 4px 0 0 var(--pink),
                    8px 8px 0 0 var(--pink), 12px 8px 0 0 var(--bubble), 16px 8px 0 0 var(--pink),
                   20px 8px 0 0 var(--bubble), 24px 8px 0 0 var(--pink),
                    8px 12px 0 0 var(--pink), 12px 12px 0 0 var(--pink), 16px 12px 0 0 var(--pink),
                   20px 12px 0 0 var(--pink), 24px 12px 0 0 var(--pink),
        /* fringe */ 8px 16px 0 0 var(--pink), 16px 16px 0 0 var(--pink), 24px 16px 0 0 var(--pink),
        /* tentacles */ 8px 20px 0 0 var(--pink), 16px 20px 0 0 var(--pink), 24px 20px 0 0 var(--pink),
                       12px 24px 0 0 var(--pink), 20px 24px 0 0 var(--pink),
                        8px 28px 0 0 var(--pink), 16px 28px 0 0 var(--pink), 24px 28px 0 0 var(--pink);
}

/* ----- SEAHORSE ----- */
.sprite-seahorse::before {
    box-shadow:
        16px 4px 0 0 var(--gold), 20px 4px 0 0 var(--gold),
        12px 8px 0 0 var(--gold), 16px 8px 0 0 var(--abyss), 20px 8px 0 0 var(--gold),
        16px 12px 0 0 var(--gold), 20px 12px 0 0 var(--gold), 24px 12px 0 0 var(--gold),
        12px 16px 0 0 var(--gold), 16px 16px 0 0 var(--gold), 20px 16px 0 0 var(--gold),
        12px 20px 0 0 var(--gold), 16px 20px 0 0 var(--gold),
        16px 24px 0 0 var(--gold), 20px 24px 0 0 var(--gold),
        12px 28px 0 0 var(--gold), 20px 28px 0 0 var(--gold);
}

/* ----- OCTOPUS ----- */
.sprite-octopus::before {
    box-shadow:
        12px 4px 0 0 var(--pink), 16px 4px 0 0 var(--pink), 20px 4px 0 0 var(--pink),
         8px 8px 0 0 var(--pink), 12px 8px 0 0 var(--bubble), 16px 8px 0 0 var(--pink),
        20px 8px 0 0 var(--bubble), 24px 8px 0 0 var(--pink),
         8px 12px 0 0 var(--pink), 12px 12px 0 0 var(--pink), 16px 12px 0 0 var(--pink),
        20px 12px 0 0 var(--pink), 24px 12px 0 0 var(--pink),
         4px 16px 0 0 var(--pink), 12px 16px 0 0 var(--pink), 20px 16px 0 0 var(--pink), 28px 16px 0 0 var(--pink),
         4px 20px 0 0 var(--pink),  8px 20px 0 0 var(--pink),
        24px 20px 0 0 var(--pink), 28px 20px 0 0 var(--pink),
         0  24px 0 0 var(--pink), 16px 24px 0 0 var(--pink), 28px 24px 0 0 var(--pink);
}

/* ----- TURTLE ----- */
.sprite-turtle::before {
    box-shadow:
        24px 8px 0 0 var(--neon), 28px 8px 0 0 var(--abyss),
        24px 12px 0 0 var(--neon), 28px 12px 0 0 var(--neon),
         8px 12px 0 0 var(--neon), 12px 12px 0 0 var(--neon), 16px 12px 0 0 var(--neon), 20px 12px 0 0 var(--neon),
         4px 16px 0 0 var(--neon),  8px 16px 0 0 #88ff66, 12px 16px 0 0 #88ff66, 16px 16px 0 0 #88ff66,
        20px 16px 0 0 #88ff66, 24px 16px 0 0 var(--neon),
         4px 20px 0 0 var(--neon),  8px 20px 0 0 var(--neon), 12px 20px 0 0 #88ff66, 16px 20px 0 0 #88ff66,
        20px 20px 0 0 var(--neon), 24px 20px 0 0 var(--neon),
         8px 24px 0 0 var(--neon), 20px 24px 0 0 var(--neon),
         4px 28px 0 0 var(--neon), 24px 28px 0 0 var(--neon);
}

/* ----- WHALE ----- */
.sprite-whale::before {
    box-shadow:
         8px 8px 0 0 var(--mid),
         4px 12px 0 0 var(--mid),  8px 12px 0 0 var(--mid), 12px 12px 0 0 var(--mid),
        16px 12px 0 0 var(--mid), 20px 12px 0 0 var(--mid), 24px 12px 0 0 var(--mid),
        28px 12px 0 0 var(--mid),
         0  16px 0 0 var(--mid),  4px 16px 0 0 var(--mid),  8px 16px 0 0 var(--bubble),
        12px 16px 0 0 var(--mid), 16px 16px 0 0 var(--mid), 20px 16px 0 0 var(--mid),
        24px 16px 0 0 var(--mid), 28px 16px 0 0 var(--mid),
         0  20px 0 0 var(--mid),  4px 20px 0 0 var(--mid),  8px 20px 0 0 var(--mid),
        12px 20px 0 0 var(--mid), 16px 20px 0 0 var(--mid), 20px 20px 0 0 var(--mid),
        24px 20px 0 0 var(--mid),
         8px 24px 0 0 var(--mid), 16px 24px 0 0 var(--mid);
}

/* ----- CRAB ----- */
.sprite-crab::before {
    box-shadow:
         4px 4px 0 0 var(--pink), 28px 4px 0 0 var(--pink),
         8px 8px 0 0 var(--pink), 12px 8px 0 0 var(--pink), 16px 8px 0 0 var(--pink),
        20px 8px 0 0 var(--pink), 24px 8px 0 0 var(--pink),
         4px 12px 0 0 var(--pink),  8px 12px 0 0 var(--bubble), 12px 12px 0 0 var(--pink),
        16px 12px 0 0 var(--pink), 20px 12px 0 0 var(--bubble), 24px 12px 0 0 var(--pink),
        28px 12px 0 0 var(--pink),
         8px 16px 0 0 var(--pink), 12px 16px 0 0 var(--pink), 16px 16px 0 0 var(--pink),
        20px 16px 0 0 var(--pink), 24px 16px 0 0 var(--pink),
         0  20px 0 0 var(--pink),  4px 20px 0 0 var(--pink), 12px 20px 0 0 var(--pink),
        20px 20px 0 0 var(--pink), 28px 20px 0 0 var(--pink);
}

/* ----- STARFISH ----- */
.sprite-starfish::before {
    box-shadow:
        16px 4px 0 0 var(--gold),
        12px 8px 0 0 var(--gold), 16px 8px 0 0 var(--gold), 20px 8px 0 0 var(--gold),
         4px 12px 0 0 var(--gold),  8px 12px 0 0 var(--gold), 12px 12px 0 0 var(--gold),
        16px 12px 0 0 var(--gold), 20px 12px 0 0 var(--gold), 24px 12px 0 0 var(--gold),
        28px 12px 0 0 var(--gold),
         8px 16px 0 0 var(--gold), 12px 16px 0 0 var(--gold), 16px 16px 0 0 var(--gold),
        20px 16px 0 0 var(--gold), 24px 16px 0 0 var(--gold),
        12px 20px 0 0 var(--gold), 20px 20px 0 0 var(--gold),
         8px 24px 0 0 var(--gold), 24px 24px 0 0 var(--gold);
}

/* ----- MERMAID ----- */
.sprite-mermaid::before {
    box-shadow:
        12px 4px 0 0 var(--pink), 16px 4px 0 0 var(--pink), 20px 4px 0 0 var(--pink),
         8px 8px 0 0 var(--pink), 12px 8px 0 0 var(--bubble), 16px 8px 0 0 var(--pink),
        20px 8px 0 0 var(--bubble), 24px 8px 0 0 var(--pink),
        12px 12px 0 0 var(--pink), 16px 12px 0 0 var(--pink), 20px 12px 0 0 var(--pink),
         8px 16px 0 0 var(--surface), 12px 16px 0 0 var(--surface), 16px 16px 0 0 var(--surface),
        20px 16px 0 0 var(--surface), 24px 16px 0 0 var(--surface),
        12px 20px 0 0 var(--surface), 16px 20px 0 0 var(--surface), 20px 20px 0 0 var(--surface),
         8px 24px 0 0 var(--surface), 24px 24px 0 0 var(--surface),
         4px 28px 0 0 var(--surface), 12px 28px 0 0 var(--surface),
        20px 28px 0 0 var(--surface), 28px 28px 0 0 var(--surface);
}

/* ----- ANGLERFISH ----- */
.sprite-angler::before {
    box-shadow:
         8px  4px 0 0 var(--neon),
        12px  8px 0 0 var(--neon),
         8px 12px 0 0 var(--abyss), 12px 12px 0 0 var(--abyss), 16px 12px 0 0 var(--abyss),
        20px 12px 0 0 var(--abyss), 24px 12px 0 0 var(--abyss),
         4px 16px 0 0 var(--abyss),  8px 16px 0 0 var(--abyss), 12px 16px 0 0 var(--abyss),
        16px 16px 0 0 var(--neon), 20px 16px 0 0 var(--abyss), 24px 16px 0 0 var(--abyss),
        28px 16px 0 0 var(--abyss),
         4px 20px 0 0 var(--abyss),  8px 20px 0 0 var(--abyss), 12px 20px 0 0 var(--abyss),
        16px 20px 0 0 var(--abyss), 20px 20px 0 0 var(--abyss), 24px 20px 0 0 var(--abyss),
        28px 20px 0 0 var(--bubble),
         8px 24px 0 0 var(--abyss), 12px 24px 0 0 var(--bubble), 20px 24px 0 0 var(--bubble),
        24px 24px 0 0 var(--abyss);
}

/* ----- SQUID ----- */
.sprite-squid::before {
    box-shadow:
        12px 4px 0 0 var(--pink), 16px 4px 0 0 var(--pink), 20px 4px 0 0 var(--pink),
         8px 8px 0 0 var(--pink), 12px 8px 0 0 var(--pink), 16px 8px 0 0 var(--bubble),
        20px 8px 0 0 var(--pink), 24px 8px 0 0 var(--pink),
         8px 12px 0 0 var(--pink), 12px 12px 0 0 var(--pink), 16px 12px 0 0 var(--pink),
        20px 12px 0 0 var(--pink), 24px 12px 0 0 var(--pink),
        12px 16px 0 0 var(--pink), 16px 16px 0 0 var(--pink), 20px 16px 0 0 var(--pink),
         4px 20px 0 0 var(--pink), 12px 20px 0 0 var(--pink), 20px 20px 0 0 var(--pink),
        28px 20px 0 0 var(--pink),
         4px 24px 0 0 var(--pink),  8px 24px 0 0 var(--pink), 24px 24px 0 0 var(--pink),
        28px 24px 0 0 var(--pink),
         0  28px 0 0 var(--pink), 12px 28px 0 0 var(--pink), 20px 28px 0 0 var(--pink),
        28px 28px 0 0 var(--pink);
}

/* ----- PUFFERFISH ----- */
.sprite-pufferfish::before {
    box-shadow:
        12px 4px 0 0 var(--gold), 16px 4px 0 0 var(--gold), 20px 4px 0 0 var(--gold),
         8px 8px 0 0 var(--gold), 12px 8px 0 0 var(--gold), 16px 8px 0 0 var(--gold),
        20px 8px 0 0 var(--gold), 24px 8px 0 0 var(--gold),
         4px 12px 0 0 var(--gold),  8px 12px 0 0 var(--gold), 12px 12px 0 0 var(--bubble),
        16px 12px 0 0 var(--gold), 20px 12px 0 0 var(--bubble), 24px 12px 0 0 var(--gold),
        28px 12px 0 0 var(--gold),
         4px 16px 0 0 var(--gold),  8px 16px 0 0 var(--gold), 12px 16px 0 0 var(--abyss),
        16px 16px 0 0 var(--gold), 20px 16px 0 0 var(--abyss), 24px 16px 0 0 var(--gold),
        28px 16px 0 0 var(--gold),
         8px 20px 0 0 var(--gold), 12px 20px 0 0 var(--gold), 16px 20px 0 0 var(--gold),
        20px 20px 0 0 var(--gold), 24px 20px 0 0 var(--gold),
         4px 24px 0 0 var(--gold), 12px 24px 0 0 var(--gold), 20px 24px 0 0 var(--gold),
        28px 24px 0 0 var(--gold),
         8px 28px 0 0 var(--gold), 12px 28px 0 0 var(--gold), 20px 28px 0 0 var(--gold),
        24px 28px 0 0 var(--gold);
}

/* ============================================================
   SWIMMING CREATURES (animated across screens)
   ============================================================ */

.swimmer {
    position: absolute;
    width: 32px;
    height: 32px;
    pointer-events: none;
    z-index: 6;
    animation: swim-across linear infinite;
    will-change: transform;
}

@keyframes swim-across {
    0%   { transform: translateX(-80px) translateY(0); }
    50%  { transform: translateX(50vw) translateY(-12px); }
    100% { transform: translateX(110vw) translateY(0); }
}

@keyframes swim-back {
    0%   { transform: translateX(110vw) translateY(0) scaleX(-1); }
    50%  { transform: translateX(50vw) translateY(12px) scaleX(-1); }
    100% { transform: translateX(-80px) translateY(0) scaleX(-1); }
}

/* Surface fish */
.swimmer-fish-1 {
    top: 28%;
    animation: swim-across 10s steps(40) infinite;
    animation-delay: -2s;
}
.swimmer-fish-1::before {
    box-shadow:
        16px 8px 0 0 var(--surface), 20px 8px 0 0 var(--surface),
        12px 12px 0 0 var(--surface), 16px 12px 0 0 var(--bubble),
        20px 12px 0 0 var(--surface), 24px 12px 0 0 var(--surface), 28px 12px 0 0 var(--surface),
         8px 16px 0 0 var(--surface), 12px 16px 0 0 var(--surface),
        16px 16px 0 0 var(--surface), 20px 16px 0 0 var(--surface),
        24px 16px 0 0 var(--bubble), 28px 16px 0 0 var(--abyss),
        12px 20px 0 0 var(--surface), 16px 20px 0 0 var(--surface), 20px 20px 0 0 var(--surface),
         4px 16px 0 0 var(--surface), 4px 20px 0 0 var(--surface), 8px 20px 0 0 var(--surface);
}

.swimmer-fish-2 {
    top: 38%;
    animation: swim-back 13s steps(50) infinite;
    animation-delay: -5s;
}
.swimmer-fish-2::before {
    box-shadow:
        16px 8px 0 0 var(--gold), 20px 8px 0 0 var(--gold),
        12px 12px 0 0 var(--gold), 16px 12px 0 0 var(--bubble),
        20px 12px 0 0 var(--gold), 24px 12px 0 0 var(--gold), 28px 12px 0 0 var(--gold),
         8px 16px 0 0 var(--gold), 12px 16px 0 0 var(--gold),
        16px 16px 0 0 var(--gold), 20px 16px 0 0 var(--gold),
        24px 16px 0 0 var(--bubble), 28px 16px 0 0 var(--abyss),
        12px 20px 0 0 var(--gold), 16px 20px 0 0 var(--gold), 20px 20px 0 0 var(--gold),
         4px 16px 0 0 var(--gold), 4px 20px 0 0 var(--gold), 8px 20px 0 0 var(--gold);
}

.swimmer-fish-3 {
    top: 48%;
    animation: swim-across 8s steps(32) infinite;
    animation-delay: -1s;
}
.swimmer-fish-3::before {
    box-shadow:
        16px 8px 0 0 var(--pink), 20px 8px 0 0 var(--pink),
        12px 12px 0 0 var(--pink), 16px 12px 0 0 var(--bubble),
        20px 12px 0 0 var(--pink), 24px 12px 0 0 var(--pink), 28px 12px 0 0 var(--pink),
         8px 16px 0 0 var(--pink), 12px 16px 0 0 var(--pink),
        16px 16px 0 0 var(--pink), 20px 16px 0 0 var(--pink),
        24px 16px 0 0 var(--bubble), 28px 16px 0 0 var(--abyss),
        12px 20px 0 0 var(--pink), 16px 20px 0 0 var(--pink), 20px 20px 0 0 var(--pink),
         4px 16px 0 0 var(--pink), 4px 20px 0 0 var(--pink), 8px 20px 0 0 var(--pink);
}

/* Sunlight zone swimmers */
.swimmer-seahorse {
    top: 24%;
    animation: swim-across 12s steps(48) infinite;
    animation-delay: -3s;
}
.swimmer-seahorse::before {
    box-shadow:
        16px 4px 0 0 var(--gold), 20px 4px 0 0 var(--gold),
        12px 8px 0 0 var(--gold), 16px 8px 0 0 var(--abyss), 20px 8px 0 0 var(--gold),
        16px 12px 0 0 var(--gold), 20px 12px 0 0 var(--gold), 24px 12px 0 0 var(--gold),
        12px 16px 0 0 var(--gold), 16px 16px 0 0 var(--gold), 20px 16px 0 0 var(--gold),
        12px 20px 0 0 var(--gold), 16px 20px 0 0 var(--gold),
        16px 24px 0 0 var(--gold), 20px 24px 0 0 var(--gold),
        12px 28px 0 0 var(--gold), 20px 28px 0 0 var(--gold);
}

.swimmer-turtle {
    top: 60%;
    animation: swim-across 15s steps(60) infinite;
    animation-delay: -7s;
    width: 40px;
    height: 40px;
}
.swimmer-turtle::before {
    box-shadow:
        24px 8px 0 0 var(--neon), 28px 8px 0 0 var(--abyss),
        24px 12px 0 0 var(--neon), 28px 12px 0 0 var(--neon),
         8px 12px 0 0 var(--neon), 12px 12px 0 0 var(--neon), 16px 12px 0 0 var(--neon), 20px 12px 0 0 var(--neon),
         4px 16px 0 0 var(--neon),  8px 16px 0 0 #88ff66, 12px 16px 0 0 #88ff66,
        16px 16px 0 0 #88ff66, 20px 16px 0 0 #88ff66, 24px 16px 0 0 var(--neon),
         4px 20px 0 0 var(--neon),  8px 20px 0 0 var(--neon), 12px 20px 0 0 #88ff66,
        16px 20px 0 0 #88ff66, 20px 20px 0 0 var(--neon), 24px 20px 0 0 var(--neon),
         8px 24px 0 0 var(--neon), 20px 24px 0 0 var(--neon),
         4px 28px 0 0 var(--neon), 24px 28px 0 0 var(--neon);
}

.swimmer-jellyfish-1 {
    top: 38%;
    animation: jelly-float 11s steps(44) infinite;
    animation-delay: -1s;
}
.swimmer-jellyfish-1::before {
    box-shadow:
        12px 4px 0 0 var(--pink), 16px 4px 0 0 var(--pink), 20px 4px 0 0 var(--pink),
         8px 8px 0 0 var(--pink), 12px 8px 0 0 var(--bubble), 16px 8px 0 0 var(--pink),
        20px 8px 0 0 var(--bubble), 24px 8px 0 0 var(--pink),
         8px 12px 0 0 var(--pink), 12px 12px 0 0 var(--pink), 16px 12px 0 0 var(--pink),
        20px 12px 0 0 var(--pink), 24px 12px 0 0 var(--pink),
         8px 16px 0 0 var(--pink), 16px 16px 0 0 var(--pink), 24px 16px 0 0 var(--pink),
         8px 20px 0 0 var(--pink), 16px 20px 0 0 var(--pink), 24px 20px 0 0 var(--pink),
        12px 24px 0 0 var(--pink), 20px 24px 0 0 var(--pink),
         8px 28px 0 0 var(--pink), 16px 28px 0 0 var(--pink), 24px 28px 0 0 var(--pink);
}

@keyframes jelly-float {
    0%   { transform: translateX(-80px) translateY(0); }
    25%  { transform: translateX(25vw) translateY(-20px); }
    50%  { transform: translateX(50vw) translateY(0); }
    75%  { transform: translateX(75vw) translateY(-20px); }
    100% { transform: translateX(110vw) translateY(0); }
}

/* Twilight swimmers */
.swimmer-jellyfish-glow {
    top: 30%;
    animation: jelly-float 14s steps(56) infinite;
    animation-delay: -2s;
    filter: drop-shadow(0 0 6px var(--neon));
}
.swimmer-jellyfish-glow::before {
    box-shadow:
        12px 4px 0 0 var(--neon), 16px 4px 0 0 var(--neon), 20px 4px 0 0 var(--neon),
         8px 8px 0 0 var(--neon), 12px 8px 0 0 var(--bubble), 16px 8px 0 0 var(--neon),
        20px 8px 0 0 var(--bubble), 24px 8px 0 0 var(--neon),
         8px 12px 0 0 var(--neon), 12px 12px 0 0 var(--neon), 16px 12px 0 0 var(--neon),
        20px 12px 0 0 var(--neon), 24px 12px 0 0 var(--neon),
         8px 16px 0 0 var(--neon), 16px 16px 0 0 var(--neon), 24px 16px 0 0 var(--neon),
         8px 20px 0 0 var(--neon), 16px 20px 0 0 var(--neon), 24px 20px 0 0 var(--neon),
        12px 24px 0 0 var(--neon), 20px 24px 0 0 var(--neon),
         8px 28px 0 0 var(--neon), 16px 28px 0 0 var(--neon), 24px 28px 0 0 var(--neon);
}

.swimmer-squid {
    top: 55%;
    animation: swim-across 9s steps(36) infinite;
    animation-delay: -4s;
}
.swimmer-squid::before {
    box-shadow:
        12px 4px 0 0 var(--pink), 16px 4px 0 0 var(--pink), 20px 4px 0 0 var(--pink),
         8px 8px 0 0 var(--pink), 12px 8px 0 0 var(--pink), 16px 8px 0 0 var(--bubble),
        20px 8px 0 0 var(--pink), 24px 8px 0 0 var(--pink),
         8px 12px 0 0 var(--pink), 12px 12px 0 0 var(--pink), 16px 12px 0 0 var(--pink),
        20px 12px 0 0 var(--pink), 24px 12px 0 0 var(--pink),
        12px 16px 0 0 var(--pink), 16px 16px 0 0 var(--pink), 20px 16px 0 0 var(--pink),
         4px 20px 0 0 var(--pink), 12px 20px 0 0 var(--pink), 20px 20px 0 0 var(--pink),
        28px 20px 0 0 var(--pink),
         4px 24px 0 0 var(--pink),  8px 24px 0 0 var(--pink),
        24px 24px 0 0 var(--pink), 28px 24px 0 0 var(--pink),
         0  28px 0 0 var(--pink), 12px 28px 0 0 var(--pink),
        20px 28px 0 0 var(--pink), 28px 28px 0 0 var(--pink);
    filter: drop-shadow(0 0 4px var(--pink));
}

.swimmer-angler {
    top: 70%;
    animation: swim-back 16s steps(64) infinite;
    animation-delay: -6s;
}
.swimmer-angler::before {
    box-shadow:
         8px  4px 0 0 var(--neon),
        12px  8px 0 0 var(--neon),
         8px 12px 0 0 var(--abyss), 12px 12px 0 0 var(--abyss), 16px 12px 0 0 var(--abyss),
        20px 12px 0 0 var(--abyss), 24px 12px 0 0 var(--abyss),
         4px 16px 0 0 var(--abyss),  8px 16px 0 0 var(--abyss), 12px 16px 0 0 var(--abyss),
        16px 16px 0 0 var(--neon), 20px 16px 0 0 var(--abyss), 24px 16px 0 0 var(--abyss),
        28px 16px 0 0 var(--abyss),
         4px 20px 0 0 var(--abyss),  8px 20px 0 0 var(--abyss), 12px 20px 0 0 var(--abyss),
        16px 20px 0 0 var(--abyss), 20px 20px 0 0 var(--abyss), 24px 20px 0 0 var(--abyss),
        28px 20px 0 0 var(--bubble),
         8px 24px 0 0 var(--abyss), 12px 24px 0 0 var(--bubble),
        20px 24px 0 0 var(--bubble), 24px 24px 0 0 var(--abyss);
    filter: drop-shadow(0 0 6px var(--neon));
}

/* Midnight swimmers */
.swimmer-whale {
    top: 35%;
    width: 56px;
    height: 40px;
    animation: swim-across 18s steps(72) infinite;
    animation-delay: -3s;
}
.swimmer-whale::before {
    box-shadow:
         8px 8px 0 0 var(--mid),
         4px 12px 0 0 var(--mid),  8px 12px 0 0 var(--mid), 12px 12px 0 0 var(--mid),
        16px 12px 0 0 var(--mid), 20px 12px 0 0 var(--mid), 24px 12px 0 0 var(--mid),
        28px 12px 0 0 var(--mid), 32px 12px 0 0 var(--mid), 36px 12px 0 0 var(--mid),
        40px 12px 0 0 var(--mid),
         0  16px 0 0 var(--mid),  4px 16px 0 0 var(--mid),  8px 16px 0 0 var(--bubble),
        12px 16px 0 0 var(--mid), 16px 16px 0 0 var(--mid), 20px 16px 0 0 var(--mid),
        24px 16px 0 0 var(--mid), 28px 16px 0 0 var(--mid), 32px 16px 0 0 var(--mid),
        36px 16px 0 0 var(--mid), 40px 16px 0 0 var(--mid),
         0  20px 0 0 var(--mid),  4px 20px 0 0 var(--mid),  8px 20px 0 0 var(--mid),
        12px 20px 0 0 var(--mid), 16px 20px 0 0 var(--mid), 20px 20px 0 0 var(--mid),
        24px 20px 0 0 var(--mid), 28px 20px 0 0 var(--mid), 32px 20px 0 0 var(--mid),
        36px 20px 0 0 var(--mid),
         8px 24px 0 0 var(--mid), 16px 24px 0 0 var(--mid), 24px 24px 0 0 var(--mid);
    filter: drop-shadow(0 0 4px var(--surface));
}

.swimmer-deep-jelly {
    top: 60%;
    animation: jelly-float 14s steps(56) infinite;
    animation-delay: -8s;
    filter: drop-shadow(0 0 8px var(--gold));
}
.swimmer-deep-jelly::before {
    box-shadow:
        12px 4px 0 0 var(--gold), 16px 4px 0 0 var(--gold), 20px 4px 0 0 var(--gold),
         8px 8px 0 0 var(--gold), 12px 8px 0 0 var(--bubble), 16px 8px 0 0 var(--gold),
        20px 8px 0 0 var(--bubble), 24px 8px 0 0 var(--gold),
         8px 12px 0 0 var(--gold), 12px 12px 0 0 var(--gold), 16px 12px 0 0 var(--gold),
        20px 12px 0 0 var(--gold), 24px 12px 0 0 var(--gold),
         8px 16px 0 0 var(--gold), 16px 16px 0 0 var(--gold), 24px 16px 0 0 var(--gold),
         8px 20px 0 0 var(--gold), 16px 20px 0 0 var(--gold), 24px 20px 0 0 var(--gold),
        12px 24px 0 0 var(--gold), 20px 24px 0 0 var(--gold),
         8px 28px 0 0 var(--gold), 16px 28px 0 0 var(--gold), 24px 28px 0 0 var(--gold);
}

/* ============================================================
   FOOTER / OCEAN FLOOR
   ============================================================ */

#ocean-floor {
    position: relative;
    width: 100%;
    background: var(--abyss);
    padding: 32px 16px 64px;
    text-align: center;
    border-top: 4px solid var(--deep);
}

.sand-floor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background:
        repeating-linear-gradient(
            to right,
            var(--sand) 0 8px,
            #e0c79a 8px 16px,
            var(--sand) 16px 24px,
            #d8be88 24px 32px
        );
    border-bottom: 4px solid var(--deep);
}

.footer-text {
    font-family: "Silkscreen", monospace;
    font-size: 1rem;
    color: var(--gold);
    margin-top: 32px;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 var(--deep);
}

.footer-sub {
    font-family: "Press Start 2P", monospace;
    font-size: 0.55rem;
    color: var(--bubble);
    margin-top: 12px;
    letter-spacing: 1px;
    opacity: 0.7;
}

/* ============================================================
   RESPONSIVE TWEAKS
   ============================================================ */

@media (max-width: 640px) {
    #depth-meter {
        right: 8px;
        width: 28px;
        height: 200px;
    }
    #depth-labels {
        font-size: 0.4rem;
        left: 18px;
    }
    #site-title {
        letter-spacing: 4px;
    }
    .ocean-zone {
        padding: 48px 16px 80px;
    }
    #creature-grid {
        grid-template-columns: repeat(auto-fill, 72px);
    }
    .creature-cell {
        width: 72px;
        height: 90px;
    }
}