@font-face {
            font-family: 'Libras';
            src: url('Libras2020-Regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        :root {
            --ink: #08335f;
            --ink-soft: #17557f;
            --white: #f8feff;
            --gold: #ffd166;
            --gold-deep: #ff9f1c;
            --coral: #ff7b72;
            --mint: #53e0c8;
            --foam: rgba(255, 255, 255, 0.7);
            --card: rgba(8, 51, 95, 0.64);
            --card-border: rgba(255, 255, 255, 0.35);
            --shadow: rgba(2, 23, 56, 0.28);
            --sand-light: #f9db8d;
            --sand-dark: #d08b43;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        body {
            font-family: 'Baloo 2', cursive;
            color: var(--white);
            background:
                radial-gradient(circle at 50% -10%, rgba(181, 244, 255, 0.92), rgba(181, 244, 255, 0.1) 26%, transparent 48%),
                linear-gradient(180deg, #021b45 0%, #06336d 18%, #0a5c96 42%, #1093b8 68%, #63d8df 100%);
        }

        button {
            font: inherit;
        }

        #game-container {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
            isolation: isolate;
            background:
                radial-gradient(circle at 15% 18%, rgba(255, 255, 255, 0.18), transparent 20%),
                radial-gradient(circle at 82% 22%, rgba(255, 255, 255, 0.14), transparent 18%),
                radial-gradient(circle at 50% 0%, rgba(201, 245, 255, 0.26), transparent 38%);
        }

        #game-container::before,
        #game-container::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        #game-container::before {
            background:
                linear-gradient(110deg, transparent 18%, rgba(255, 255, 255, 0.1) 26%, transparent 34%),
                linear-gradient(78deg, transparent 34%, rgba(255, 255, 255, 0.08) 42%, transparent 50%),
                radial-gradient(circle at 25% 32%, rgba(255, 255, 255, 0.09), transparent 18%);
            mix-blend-mode: screen;
            animation: shimmer 18s linear infinite alternate;
            z-index: 0;
        }

        #game-container::after {
            background:
                radial-gradient(circle at 50% 100%, rgba(255, 215, 129, 0.12), transparent 38%),
                linear-gradient(180deg, transparent 72%, rgba(4, 31, 69, 0.24) 100%);
            z-index: 0;
        }

        .ocean-surface {
            position: absolute;
            top: 0;
            left: -5%;
            width: 110%;
            height: 18%;
            background:
                linear-gradient(180deg, rgba(196, 248, 255, 0.9), rgba(174, 238, 250, 0.16) 48%, transparent 100%);
            border-bottom-left-radius: 44% 50%;
            border-bottom-right-radius: 44% 50%;
            filter: blur(6px);
            opacity: 0.82;
            z-index: 1;
        }

        .water-haze {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.12), transparent 30%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 42%, rgba(255, 255, 255, 0.02) 100%);
            z-index: 1;
            pointer-events: none;
        }

        .light-ray {
            position: absolute;
            top: -10%;
            width: 24%;
            height: 78%;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.08) 28%, transparent 100%);
            clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%);
            mix-blend-mode: screen;
            opacity: 0.55;
            filter: blur(2px);
            transform-origin: top center;
            z-index: 1;
            pointer-events: none;
            animation: rayShift 11s ease-in-out infinite alternate;
        }

        .ray-one {
            left: 6%;
        }

        .ray-two {
            left: 34%;
            animation-duration: 13s;
            animation-delay: -4s;
        }

        .ray-three {
            right: 8%;
            animation-duration: 12s;
            animation-delay: -7s;
        }

        .ambient-bubbles {
            position: absolute;
            inset: 0;
            z-index: 2;
            pointer-events: none;
        }

        .ambient-bubbles span {
            position: absolute;
            left: var(--left);
            bottom: -15%;
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            background:
                radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.08) 58%, rgba(255, 255, 255, 0.3) 100%);
            border: 1px solid rgba(255, 255, 255, 0.45);
            box-shadow:
                inset 0 0 10px rgba(255, 255, 255, 0.5),
                0 0 16px rgba(255, 255, 255, 0.12);
            opacity: 0.45;
            animation: ambientRise var(--duration) linear infinite;
            animation-delay: var(--delay);
        }
        .reef {
            position: absolute;
            bottom: 0;
            width: min(30vw, 320px);
            min-width: 220px;
            height: 34vh;
            z-index: 3;
            pointer-events: none;
        }

        .reef-left {
            left: -1%;
        }

        .reef-center {
            left: 38%;
            transform: translateX(-50%);
            width: min(28vw, 300px);
        }

        .reef-right {
            right: -1%;
        }

        .reef-glow {
            position: absolute;
            bottom: 10%;
            left: 8%;
            width: 84%;
            height: 34%;
            background: radial-gradient(circle, rgba(90, 227, 255, 0.2), transparent 70%);
            filter: blur(16px);
        }

        .plant {
            position: absolute;
            bottom: 12%;
            left: var(--left);
            width: var(--width, 22px);
            height: var(--height, 140px);
            border-radius: 28px 28px 10px 10px;
            background: linear-gradient(180deg, #7df3be 0%, #29b27d 48%, #0f6a67 100%);
            transform-origin: bottom center;
            animation: swayPlant 4.8s ease-in-out infinite alternate;
            animation-delay: var(--delay, 0s);
            box-shadow: inset -4px 0 0 rgba(8, 51, 95, 0.12);
            filter: drop-shadow(0 8px 18px rgba(0, 36, 69, 0.22));
        }

        .plant::before,
        .plant::after {
            content: "";
            position: absolute;
            bottom: 30%;
            width: 90%;
            height: 62%;
            border-radius: 28px;
            background: inherit;
            box-shadow: inherit;
        }

        .plant::before {
            left: -85%;
            transform: rotate(-16deg);
            transform-origin: bottom right;
        }

        .plant::after {
            right: -82%;
            transform: rotate(14deg);
            transform-origin: bottom left;
        }

        .coral {
            position: absolute;
            bottom: 11%;
            left: var(--left);
            width: 18px;
            height: var(--height, 110px);
            border-radius: 20px 20px 8px 8px;
            background: linear-gradient(180deg, var(--coral-top), var(--coral-bottom));
            transform-origin: bottom center;
            animation: swayCoral 5.6s ease-in-out infinite alternate;
            animation-delay: var(--delay, 0s);
            filter: drop-shadow(0 10px 18px rgba(45, 20, 42, 0.22));
        }

        .coral::before,
        .coral::after {
            content: "";
            position: absolute;
            bottom: 35%;
            width: 18px;
            height: 70%;
            border-radius: 20px;
            background: inherit;
        }

        .coral::before {
            left: -28px;
            transform: rotate(-24deg);
            transform-origin: bottom right;
        }

        .coral::after {
            right: -28px;
            transform: rotate(24deg);
            transform-origin: bottom left;
        }

        .coral-pink {
            --coral-top: #ff9aa2;
            --coral-bottom: #ff5c8a;
        }

        .coral-orange {
            --coral-top: #ffd27d;
            --coral-bottom: #ff8c42;
        }

        .coral-blue {
            --coral-top: #9deaff;
            --coral-bottom: #38bdf8;
        }

        .rock {
            position: absolute;
            bottom: 8%;
            left: var(--left);
            width: var(--size, 84px);
            height: calc(var(--size, 84px) * 0.56);
            background: linear-gradient(180deg, #88a4bb 0%, #5d7994 52%, #425e76 100%);
            border-radius: 46% 54% 36% 42%;
            box-shadow:
                inset 0 8px 12px rgba(255, 255, 255, 0.16),
                0 12px 18px rgba(3, 23, 51, 0.16);
        }

        .shell {
            position: absolute;
            bottom: 11%;
            left: var(--left);
            width: 44px;
            height: 32px;
            border-radius: 40px 40px 16px 16px;
            background: linear-gradient(180deg, #fff0c9, #ffbb73);
            box-shadow: 0 8px 16px rgba(136, 77, 38, 0.16);
        }

        .shell::before {
            content: "";
            position: absolute;
            left: 8px;
            top: 8px;
            width: 28px;
            height: 2px;
            background: rgba(194, 109, 41, 0.3);
            box-shadow: 0 6px 0 rgba(194, 109, 41, 0.28), 0 12px 0 rgba(194, 109, 41, 0.24);
        }

        .seabed {
            position: absolute;
            bottom: 0;
            left: -2%;
            width: 104%;
            height: 18%;
            background:
                radial-gradient(circle at 20% 24%, rgba(255, 244, 200, 0.54), transparent 16%),
                radial-gradient(circle at 72% 30%, rgba(255, 244, 200, 0.38), transparent 14%),
                linear-gradient(180deg, var(--sand-light) 0%, #f2c667 44%, var(--sand-dark) 100%);
            border-top-left-radius: 45% 70px;
            border-top-right-radius: 45% 70px;
            box-shadow: inset 0 18px 24px rgba(255, 255, 255, 0.14), inset 0 -24px 28px rgba(111, 67, 22, 0.12);
            z-index: 2;
        }

        .copyright {
            position: absolute;
            left: 50%;
            bottom: 0.5%;
            transform: translateX(-50%);
            z-index: 5;
            font-family: 'Fredoka', cursive;
            font-size: clamp(0.78rem, 1.35vw, 0.95rem);
            font-weight: 600;
            letter-spacing: 0.02em;
            color: rgba(10, 43, 76, 0.9);
            text-shadow: 0 1px 0 rgba(255, 244, 204, 0.5);
            white-space: nowrap;
            pointer-events: none;
        }

        .bottom-brand-name {
            position: absolute;
            left: 50%;
            bottom: 3.3%;
            transform: translateX(-50%);
            z-index: 5;
            font-family: 'Fredoka', cursive;
            font-size: clamp(2rem, 3.6vw, 2.5rem);
            font-weight: 700;
            letter-spacing: 0.02em;
            background: linear-gradient(90deg, #7ad7ff 0%, #28b6ff 45%, #0a6bff 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            white-space: nowrap;
            pointer-events: none;
        }

        .creature {
            position: absolute;
            z-index: 4;
            pointer-events: none;
            filter: drop-shadow(0 8px 14px rgba(2, 24, 56, 0.24));
        }

        .fish-one {
            left: -14%;
            bottom: 66%;
            font-size: 3.3rem;
            animation: swimAcross 34s linear infinite reverse;
        }

        .fish-two {
            left: -18%;
            bottom: 46%;
            font-size: 2.7rem;
            opacity: 0.86;
            animation: swimAcross 30s linear infinite reverse;
            animation-delay: -7s;
        }

        .fish-three {
            left: -16%;
            bottom: 78%;
            font-size: 2.3rem;
            opacity: 0.78;
            animation: swimAcross 32s linear infinite reverse;
            animation-delay: -11s;
        }

        .turtle {
            left: -20%;
            bottom: 24%;
            font-size: 3.6rem;
            animation: turtleCruise 42s linear infinite reverse;
            animation-delay: -9s;
        }

        .jellyfish {
            right: 8%;
            bottom: 28%;
            font-size: 3.8rem;
            animation: jellyDrift 12s ease-in-out infinite;
        }

        .crab {
            right: 10%;
            bottom: 9%;
            font-size: 2.7rem;
            animation: crabWalk 10s ease-in-out infinite alternate-reverse;
        }

        #hud {
            position: absolute;
            top: 18px;
            left: 18px;
            right: 18px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            flex-wrap: wrap;
            z-index: 20;
        }

        .hud-strip {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
            justify-content: flex-end;
            flex: 1 1 auto;
        }

        .hud-panel {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 18px;
            border-radius: 28px;
            background:
                linear-gradient(145deg, rgba(7, 43, 89, 0.8), rgba(20, 102, 146, 0.48));
            border: 1px solid var(--card-border);
            box-shadow:
                0 18px 32px var(--shadow),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(16px);
            min-height: 72px;
        }

        .hud-brand {
            min-width: auto;
            padding: 8px 16px;
            border-radius: 20px;
            gap: 10px;
            min-height: 64px;
        }

        .hud-brand-logo {
            width: 87px;
            height: auto;
            display: block;
            flex-shrink: 0;
            border-radius: 0;
            filter: none;
            object-fit: contain;
        }

        .hud-brand-title {
            font-family: 'Fredoka', cursive;
            font-size: clamp(1.05rem, 2.1vw, 1.45rem);
            font-weight: 700;
            letter-spacing: 0.02em;
            line-height: 1;
            background: linear-gradient(90deg, #7ff8ff 0%, #ffe27a 45%, #ff9a4d 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
            white-space: nowrap;
        }

        .hud-icon {
            width: 44px;
            height: 44px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            font-size: 1.45rem;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
            flex-shrink: 0;
        }

        .hud-copy {
            display: flex;
            flex-direction: column;
            line-height: 1;
        }

        .hud-label {
            font-size: 0.88rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(233, 250, 255, 0.74);
        }

        .hud-copy strong {
            margin-top: 6px;
            font-family: 'Fredoka', cursive;
            font-size: 1.55rem;
            color: var(--white);
        }

        .score-panel strong {
            color: #ffe08a;
        }

        .hearts {
            letter-spacing: 0.14em;
            font-size: 1.35rem;
            white-space: nowrap;
        }

        .bubble {
            position: absolute;
            bottom: -180px;
            width: var(--bubble-size, 112px);
            height: var(--bubble-size, 112px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 6;
            touch-action: manipulation;
            border: 2px solid var(--bubble-outline, rgba(255, 255, 255, 0.78));
            background:
                radial-gradient(circle at 28% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.45) 18%, rgba(255, 255, 255, 0.08) 58%, rgba(123, 229, 255, 0.14) 74%, rgba(255, 255, 255, 0.42) 100%);
            box-shadow:
                inset 0 14px 28px rgba(255, 255, 255, 0.72),
                inset 0 -22px 28px rgba(0, 100, 155, 0.18),
                0 14px 30px rgba(0, 37, 73, 0.18),
                0 0 0 10px var(--bubble-glow, rgba(255, 255, 255, 0.08));
        }

        .bubble::before,
        .bubble::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .bubble::before {
            top: 12%;
            left: 16%;
            width: 26%;
            height: 26%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.1) 72%, transparent 100%);
            filter: blur(1px);
        }

        .bubble::after {
            inset: 7%;
            border: 1px solid rgba(255, 255, 255, 0.34);
        }

        .bubble.popped {
            pointer-events: none;
        }

        .bubble-inner {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            animation: wobble var(--wobble-duration, 3s) ease-in-out infinite alternate;
        }

        .bubble-letter {
            font-family: 'Libras', sans-serif;
            font-size: 72px;
            line-height: 1;
            color: #000000;
            font-weight: normal;
            -webkit-text-stroke: 0;
            text-shadow: none;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
            transform: translateY(3px);
        }
        .floating-score {
            position: absolute;
            z-index: 30;
            pointer-events: none;
            font-family: 'Fredoka', cursive;
            font-size: 2rem;
            color: var(--gold);
            text-shadow:
                0 4px 0 rgba(255, 255, 255, 0.95),
                0 10px 16px rgba(0, 34, 61, 0.22);
            animation: floatScore 1s ease-out forwards;
        }

        .modal-overlay {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background:
                radial-gradient(circle at 50% 10%, rgba(179, 241, 255, 0.28), transparent 28%),
                rgba(1, 24, 55, 0.56);
            backdrop-filter: blur(8px);
            z-index: 100;
        }

        .modal-content {
            position: relative;
            width: min(92vw, 620px);
            padding: 34px 34px 36px;
            border-radius: 34px;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(226, 248, 255, 0.9)),
                linear-gradient(140deg, #b7f0ff, #fef7cf);
            border: 1px solid rgba(255, 255, 255, 0.78);
            box-shadow:
                0 26px 60px rgba(2, 27, 58, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.85);
            text-align: center;
            color: var(--ink);
            overflow: hidden;
            animation: modalIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .modal-content::before,
        .modal-content::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .modal-content::before {
            top: -70px;
            right: -30px;
            width: 180px;
            height: 180px;
            background: radial-gradient(circle, rgba(116, 230, 255, 0.34), transparent 70%);
        }

        .modal-content::after {
            bottom: -80px;
            left: -40px;
            width: 220px;
            height: 220px;
            background: radial-gradient(circle, rgba(255, 211, 102, 0.3), transparent 72%);
        }

        .modal-badges,
        .instruction-row {
            position: relative;
            z-index: 1;
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        .modal-badge,
        .instruction-pill {
            border-radius: 999px;
            padding: 8px 14px;
            background: rgba(255, 255, 255, 0.8);
            border: 1px solid rgba(19, 106, 153, 0.12);
            box-shadow: 0 10px 18px rgba(6, 67, 110, 0.08);
            color: var(--ink-soft);
        }

        .modal-badge {
            font-size: 0.9rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .instruction-pill {
            font-size: 1rem;
            font-weight: 700;
        }

        .modal-title {
            position: relative;
            z-index: 1;
            margin: 18px 0 14px;
            font-family: 'Fredoka', cursive;
            font-size: clamp(2.6rem, 6vw, 4.2rem);
            line-height: 0.96;
            color: #06305a;
        }

        .modal-logo {
            position: relative;
            z-index: 1;
            width: clamp(128px, 20vw, 186px);
            height: auto;
            display: block;
            margin: 0 auto 10px;
            border-radius: 0;
            filter: none;
            pointer-events: none;
        }

        #start-screen .modal-content,
        #instruction-screen .modal-content,
        #game-over-screen .modal-content {
            background: linear-gradient(180deg, rgba(4, 24, 52, 0.96), rgba(7, 43, 89, 0.94));
            border: 1px solid rgba(171, 228, 255, 0.24);
            color: #e9f9ff;
        }

        #start-screen .modal-title,
        #instruction-screen .modal-title,
        #game-over-screen .modal-title {
            color: #eaf9ff;
        }

        #start-screen .modal-title span,
        #instruction-screen .modal-title span,
        #game-over-screen .modal-title span {
            color: #80e6ff;
        }

        #start-screen .modal-text,
        #instruction-screen .modal-text,
        #game-over-screen .modal-text {
            color: #c9ecff;
        }

        #start-screen .instruction-pill,
        #instruction-screen .instruction-pill {
            background: rgba(8, 49, 94, 0.7);
            border-color: rgba(173, 231, 255, 0.2);
            color: #dff6ff;
        }

        .instruction-keyboard {
            position: relative;
            z-index: 1;
            width: min(100%, 320px);
            height: auto;
            display: block;
            margin: 0 auto 20px;
            border-radius: 0;
            border: none;
            box-shadow: none;
        }

        #game-over-screen .result-value {
            color: #ffe27a;
        }

        .performance-feedback {
            position: relative;
            z-index: 2;
            margin-top: 2px;
            margin-bottom: 14px;
            font-family: 'Fredoka', cursive;
            font-size: clamp(1.05rem, 2.2vw, 1.25rem);
            line-height: 1.3;
            font-weight: 600;
            color: #d8f3ff;
        }

        .performance-feedback.low {
            color: #ff7a7a;
        }

        .performance-feedback.mid {
            color: #ffdd7f;
        }

        .performance-feedback.high {
            color: #9cf0b8;
        }

        .confetti-layer {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
            z-index: 1;
        }

        .confetti-piece {
            position: absolute;
            top: -14%;
            width: 9px;
            height: 16px;
            border-radius: 3px;
            opacity: 0.94;
            animation: confettiFall var(--fall-duration, 1.8s) linear forwards;
        }

        .modal-title span {
            color: #0b79b0;
        }

        .modal-text {
            position: relative;
            z-index: 1;
            margin-bottom: 24px;
            font-size: clamp(1.15rem, 2.8vw, 1.45rem);
            line-height: 1.32;
            color: #225982;
        }

        .modal-text strong,
        .result-value {
            color: #ff8b2b;
        }

        .btn-play {
            position: relative;
            z-index: 2;
            margin-top: 14px;
            border: none;
            border-radius: 999px;
            padding: 16px 34px;
            background: linear-gradient(180deg, #ffd76e, #ffad2f);
            color: #08335f;
            font-family: 'Fredoka', cursive;
            font-size: clamp(1.3rem, 3.2vw, 1.7rem);
            font-weight: 700;
            cursor: pointer;
            box-shadow:
                0 7px 0 #e58d18,
                0 12px 18px rgba(255, 153, 49, 0.24);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
            touch-action: manipulation;
        }

        .btn-play:hover {
            transform: translateY(-2px);
            box-shadow:
                0 9px 0 #e58d18,
                0 14px 20px rgba(255, 153, 49, 0.3);
        }

        .btn-play:active {
            transform: translateY(4px);
            box-shadow:
                0 3px 0 #e58d18,
                0 7px 14px rgba(255, 153, 49, 0.2);
        }

        .btn-play:focus-visible {
            outline: 3px solid rgba(11, 121, 176, 0.28);
            outline-offset: 4px;
        }

        .screen-flash {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 40;
            opacity: 0;
            transition: opacity 0.24s ease;
        }

        .flash-red {
            background: radial-gradient(circle, rgba(255, 107, 107, 0.26), rgba(255, 107, 107, 0.06) 50%, transparent 78%);
            opacity: 1;
        }

        .flash-gold {
            background: radial-gradient(circle, rgba(255, 221, 89, 0.28), rgba(255, 221, 89, 0.08) 52%, transparent 82%);
            opacity: 1;
        }

        .hidden {
            display: none !important;
        }

        @keyframes shimmer {
            0% {
                transform: translateX(-3%) translateY(-1%);
            }
            100% {
                transform: translateX(3%) translateY(1%);
            }
        }

        @keyframes rayShift {
            0% {
                transform: skewX(-10deg) translateX(-6%);
            }
            100% {
                transform: skewX(10deg) translateX(6%);
            }
        }

        @keyframes ambientRise {
            0% {
                transform: translate3d(0, 0, 0) scale(0.8);
                opacity: 0;
            }
            12% {
                opacity: 0.45;
            }
            100% {
                transform: translate3d(18px, -118vh, 0) scale(1.15);
                opacity: 0;
            }
        }

        @keyframes swayPlant {
            0% {
                transform: rotate(-7deg);
            }
            100% {
                transform: rotate(7deg);
            }
        }

        @keyframes swayCoral {
            0% {
                transform: rotate(-4deg);
            }
            100% {
                transform: rotate(4deg);
            }
        }

        @keyframes swimAcross {
            0% {
                transform: translateX(0) scaleX(1);
            }
            48% {
                transform: translateX(122vw) scaleX(1);
            }
            50% {
                transform: translateX(122vw) scaleX(-1);
            }
            100% {
                transform: translateX(0) scaleX(-1);
            }
        }

        @keyframes turtleCruise {
            0% {
                transform: translateX(0) translateY(0) scaleX(1);
            }
            50% {
                transform: translateX(120vw) translateY(-18px) scaleX(1);
            }
            50.5% {
                transform: translateX(120vw) translateY(-18px) scaleX(-1);
            }
            100% {
                transform: translateX(0) translateY(0) scaleX(-1);
            }
        }

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

        @keyframes crabWalk {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-34px);
            }
        }

        @keyframes floatUp {
            0% {
                transform: translate3d(0, 0, 0) scale(0.96);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            100% {
                transform: translate3d(var(--drift, 0px), -122vh, 0) scale(1.08);
                opacity: 1;
            }
        }

        @keyframes wobble {
            0% {
                transform: translateX(-8px) rotate(-4deg);
            }
            100% {
                transform: translateX(8px) rotate(4deg);
            }
        }

        @keyframes floatScore {
            0% {
                transform: translate(-50%, 0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(-50%, -56px) scale(1.35);
                opacity: 0;
            }
        }

        @keyframes modalIn {
            0% {
                transform: translateY(22px) scale(0.94);
                opacity: 0;
            }
            100% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
        }

        @keyframes confettiFall {
            0% {
                transform: translate3d(0, -10%, 0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.95;
            }
            100% {
                transform: translate3d(var(--drift-x, 0px), 124%, 0) rotate(560deg);
                opacity: 0;
            }
        }

        @media (max-width: 920px) {
            #hud {
                top: 14px;
                left: 14px;
                right: 14px;
            }

            .hud-brand,
            .hud-strip {
                width: 100%;
            }

            .hud-strip {
                justify-content: space-between;
            }

            .reef-center {
                left: 50%;
            }
        }

        @media (max-width: 640px) {
            .hud-panel {
                min-height: 64px;
                padding: 10px 14px;
                border-radius: 22px;
            }

            .hud-brand {
                min-width: 0;
                padding: 7px 12px;
                min-height: 56px;
            }

            .hud-brand-logo {
                width: 69px;
            }

            .hud-brand-title {
                font-size: clamp(0.95rem, 4.8vw, 1.2rem);
            }

            .hud-icon {
                width: 38px;
                height: 38px;
                border-radius: 14px;
                font-size: 1.2rem;
            }

            .hud-copy strong {
                font-size: 1.25rem;
            }

            .hearts {
                letter-spacing: 0.08em;
                font-size: 1.1rem;
            }

            .modal-overlay {
                padding: 18px;
            }

            .modal-content {
                padding: 28px 22px 30px;
                border-radius: 28px;
            }

            .instruction-pill {
                font-size: 0.92rem;
            }

            .reef {
                height: 28vh;
            }

            .fish-one {
                font-size: 2.8rem;
            }

            .fish-two,
            .fish-three {
                font-size: 2.1rem;
            }

            .turtle,
            .jellyfish {
                font-size: 3rem;
            }
        }