* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: fixed;
            /* Fullscreen CSS for PWA */
            -webkit-user-select: none;
            user-select: none;
            touch-action: none;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            overflow: hidden;
            font-family: 'Arial', sans-serif;
            background: linear-gradient(to bottom, #1a4d6d 0%, #0a2540 100%);
            touch-action: none;
            -webkit-user-select: none;
            user-select: none;
            position: fixed;
            width: 100%;
            height: 100%;
        }

        #gameCanvas {
            display: block;
            background: radial-gradient(ellipse at center, #1e5a7a 0%, #0d3d5c 100%);
        }

        #lobby {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, #2d5a7b 0%, #1a3d5c 50%, #0a1e2e 100%);
            color: white;
            text-align: center;
            z-index: 100;
            display: none;
            overflow: hidden;
        }
        
        /* Parallax Background Layers */
        .parallax-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        .parallax-bubbles {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
            animation: floatUp linear infinite;
        }
        
        @keyframes floatUp {
            0% {
                transform: translateY(100vh) translateX(0);
                opacity: 0;
            }
            10% {
                opacity: 0.6;
            }
            90% {
                opacity: 0.6;
            }
            100% {
                transform: translateY(-100px) translateX(var(--drift));
                opacity: 0;
            }
        }
        
        .light-ray {
            position: absolute;
            top: -50%;
            width: 2px;
            height: 150%;
            background: linear-gradient(180deg, 
                rgba(79, 195, 247, 0) 0%,
                rgba(79, 195, 247, 0.08) 30%,
                rgba(79, 195, 247, 0.05) 70%,
                rgba(79, 195, 247, 0) 100%);
            animation: sway 6s ease-in-out infinite;
            transform-origin: top center;
        }
        
        @keyframes sway {
            0%, 100% { transform: rotate(-2deg); }
            50% { transform: rotate(2deg); }
        }
        
        /* Lobby Content Container */
        .lobby-content {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 40px 20px;
            animation: fadeIn 0.6s ease-out;
        }
        
        /* Mobile: Compact layout */
        @media (max-width: 768px) {
            .lobby-content {
                padding: 15px 10px;
                justify-content: flex-start;
                padding-top: 8vh;
            }
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        #lobby h1 {
            font-size: 56px;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #4fc3f7 0%, #26c6da 50%, #00acc1 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: bold;
            letter-spacing: 2px;
            animation: slideUp 0.5s ease-out 0.2s both;
        }
        
        /* Mobile: Smaller title */
        @media (max-width: 768px) {
            #lobby h1 {
                font-size: 28px;
                margin-bottom: 5px;
                letter-spacing: 0.5px;
                line-height: 1.2;
            }
        }
        
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        #lobby .tagline {
            font-size: 18px;
            margin-bottom: 50px;
            color: rgba(255, 255, 255, 0.7);
            font-style: italic;
            letter-spacing: 1px;
            animation: slideUp 0.5s ease-out 0.4s both;
        }
        
        /* Mobile: Smaller tagline */
        @media (max-width: 768px) {
            #lobby .tagline {
                font-size: 12px;
                margin-bottom: 15px;
                letter-spacing: 0.5px;
            }
        }
        
        .character-selection-title {
            font-size: 20px;
            color: #4fc3f7;
            margin-bottom: 30px;
            font-weight: 600;
            animation: slideUp 0.5s ease-out 0.6s both;
        }
        
        /* Mobile: Smaller selection title */
        @media (max-width: 768px) {
            .character-selection-title {
                font-size: 14px;
                margin-bottom: 10px;
                font-weight: 500;
            }
        }

        #joinButton {
            padding: 20px 40px;
            font-size: 24px;
            background: #4fc3f7;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            color: white;
            font-weight: bold;
        }

        #joinButton:active {
            background: #29b6f6;
        }

        .mode-button {
            padding: 20px 40px;
            font-size: 24px;
            background: linear-gradient(135deg, #4fc3f7 0%, #26c6da 100%);
            border: none;
            border-radius: 16px;
            cursor: pointer;
            color: white;
            font-weight: bold;
            margin: 10px;
            width: 280px;
            max-width: 90%;
            box-shadow: 0 8px 24px rgba(79, 195, 247, 0.4);
            transition: all 0.3s ease;
            animation: slideUp 0.5s ease-out 1.2s both, buttonPulse 2s ease-in-out 2s infinite;
        }
        
        /* Mobile: Smaller button */
        @media (max-width: 768px) {
            .mode-button {
                padding: 14px 30px;
                font-size: 18px;
                width: 220px;
                margin: 8px;
                border-radius: 12px;
                box-shadow: 0 4px 16px rgba(79, 195, 247, 0.4);
            }
        }
        
        @keyframes buttonPulse {
            0%, 100% {
                box-shadow: 0 8px 24px rgba(79, 195, 247, 0.4);
            }
            50% {
                box-shadow: 0 8px 32px rgba(79, 195, 247, 0.7);
            }
        }

        .mode-button:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(79, 195, 247, 0.6);
        }
        
        .mode-button:active {
            transform: translateY(0);
            box-shadow: 0 4px 16px rgba(79, 195, 247, 0.4);
        }
        
        .install-button {
            padding: 16px 32px;
            font-size: 18px;
            background: linear-gradient(135deg, #26c6da 0%, #00acc1 100%);
            border: none;
            border-radius: 16px;
            cursor: pointer;
            color: white;
            font-weight: bold;
            margin: 10px;
            width: 280px;
            max-width: 90%;
            box-shadow: 0 4px 16px rgba(38, 198, 218, 0.3);
            transition: all 0.3s ease;
            animation: slideUp 0.5s ease-out 1.3s both;
        }
        
        /* Mobile: Smaller install button */
        @media (max-width: 768px) {
            .install-button {
                padding: 12px 24px;
                font-size: 16px;
                width: 220px;
                margin: 6px;
                border-radius: 12px;
            }
        }
        
        .install-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(38, 198, 218, 0.5);
        }
        
        .install-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 12px rgba(38, 198, 218, 0.3);
        }
        
        .settings-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(96, 125, 139, 0.6);
            border: none;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            font-size: 24px;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(4px);
            transition: all 0.3s ease;
            z-index: 20;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
            animation: slideUp 0.5s ease-out 1.3s both;
        }
        
        .settings-button:hover {
            background: rgba(96, 125, 139, 0.8);
            transform: rotate(90deg) scale(1.1);
        }
        
        /* Mobile: Smaller settings button */
        @media (max-width: 768px) {
            .settings-button {
                width: 40px;
                height: 40px;
                font-size: 18px;
                bottom: 15px;
                right: 15px;
            }
        }

        /* Character Selection */
        .character-scroll-container {
            width: 100%;
            max-width: 900px;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
            scrollbar-color: rgba(79, 195, 247, 0.5) rgba(255, 255, 255, 0.1);
            padding: 20px 0;
            margin: 0 auto 40px;
        }
        
        /* Mobile: Less padding */
        @media (max-width: 768px) {
            .character-scroll-container {
                padding: 10px 0;
                margin: 0 auto 25px; /* Increased from 15px to 25px */
            }
        }
        
        .character-scroll-container::-webkit-scrollbar {
            height: 6px;
        }
        
        .character-scroll-container::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }
        
        .character-scroll-container::-webkit-scrollbar-thumb {
            background: rgba(79, 195, 247, 0.5);
            border-radius: 3px;
        }
        
        .character-scroll-container::-webkit-scrollbar-thumb:hover {
            background: rgba(79, 195, 247, 0.8);
        }
        
        .character-scroll-wrapper {
            display: flex;
            gap: 30px;
            padding: 0 20px;
            justify-content: center;
            min-width: min-content;
        }
        
        /* Mobile: Smaller gap */
        @media (max-width: 768px) {
            .character-scroll-wrapper {
                gap: 15px;
                padding: 0 10px;
            }
        }
        
        .character-card {
            background: rgba(20, 50, 70, 0.6);
            border: 3px solid transparent;
            border-radius: 20px;
            padding: 24px;
            width: 220px;
            min-width: 220px;
            flex-shrink: 0;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            -webkit-tap-highlight-color: rgba(79, 195, 247, 0.3);
            touch-action: manipulation;
            user-select: none;
            -webkit-user-select: none;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            animation: cardSlideUp 0.5s ease-out both;
        }
        
        /* Mobile: Much more compact cards */
        @media (max-width: 768px) {
            .character-card {
                width: 130px;
                min-width: 130px;
                padding: 12px;
                border-radius: 12px;
                border-width: 2px;
            }
        }
        
        .character-card:nth-child(1) {
            animation-delay: 0.7s;
        }
        
        .character-card:nth-child(2) {
            animation-delay: 0.8s;
        }
        
        .character-card:nth-child(3) {
            animation-delay: 0.9s;
        }
        
        @keyframes cardSlideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Breathing animation for cards */
        .character-card {
            animation: cardSlideUp 0.5s ease-out both, breathe 2s ease-in-out infinite;
        }
        
        .character-card:nth-child(1) {
            animation: cardSlideUp 0.5s ease-out 0.7s both, breathe 2s ease-in-out 0s infinite;
        }
        
        .character-card:nth-child(2) {
            animation: cardSlideUp 0.5s ease-out 0.8s both, breathe 2s ease-in-out 0.3s infinite;
        }
        
        .character-card:nth-child(3) {
            animation: cardSlideUp 0.5s ease-out 0.9s both, breathe 2s ease-in-out 0.6s infinite;
        }
        
        @keyframes breathe {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.02);
            }
        }
        
        /* Mobile-specific adjustments */
        @media (max-width: 768px) {
            #lobby h1 {
                font-size: 40px;
            }
            
            .character-scroll-wrapper {
                gap: 20px;
            }
            
            .character-card {
                width: 180px;
                min-width: 180px;
                padding: 20px;
            }
            
            .character-preview {
                width: 100px !important;
                height: 100px !important;
            }
        }
        
        .character-card:hover {
            transform: scale(1.05) !important;
            border-color: rgba(79, 195, 247, 0.5);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }
        
        .character-card.selected {
            border-color: #4fc3f7;
            background: rgba(79, 195, 247, 0.2);
            box-shadow: 0 0 30px rgba(79, 195, 247, 0.6);
            animation: cardSlideUp 0.5s ease-out both, selectedGlow 1.5s ease-in-out infinite;
        }
        
        @keyframes selectedGlow {
            0%, 100% {
                box-shadow: 0 0 20px rgba(79, 195, 247, 0.4);
            }
            50% {
                box-shadow: 0 0 40px rgba(79, 195, 247, 0.8);
            }
        }
        
        .character-preview {
            background: rgba(10, 50, 80, 0.5);
            border-radius: 10px;
            margin-bottom: 15px;
            display: block;
        }
        
        /* Mobile: Smaller character preview */
        @media (max-width: 768px) {
            .character-preview {
                width: 90px !important;
                height: 90px !important;
                margin-bottom: 8px;
                border-radius: 8px;
            }
        }
        
        .character-name {
            font-size: 18px;
            font-weight: bold;
            color: #4fc3f7;
            margin: 10px 0 8px 0;
        }
        
        /* Mobile: Smaller text */
        @media (max-width: 768px) {
            .character-name {
                font-size: 13px;
                margin: 6px 0 4px 0;
            }
        }
        
        .character-stats {
            font-size: 14px;
            color: #80deea;
            margin: 5px 0;
        }
        
        /* Mobile: Smaller stats */
        @media (max-width: 768px) {
            .character-stats {
                font-size: 10px;
                margin: 3px 0;
            }
        }
        
        .character-special {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
            font-style: italic;
            margin-top: 5px;
        }
        
        /* Mobile: Smaller special text */
        @media (max-width: 768px) {
            .character-special {
                font-size: 9px;
                margin-top: 3px;
            }
        }

        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            font-size: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
            z-index: 10;
        }

        #gameOver {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(135deg, rgba(10, 30, 50, 0.95) 0%, rgba(20, 50, 70, 0.95) 100%);
            padding: 50px;
            border-radius: 24px;
            color: white;
            text-align: center;
            display: none;
            z-index: 20;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
                        0 0 0 1px rgba(79, 195, 247, 0.1);
            animation: gameOverSlide 0.4s ease-out;
            max-width: 90%;
        }
        
        @keyframes gameOverSlide {
            from {
                opacity: 0;
                transform: translate(-50%, -45%);
            }
            to {
                opacity: 1;
                transform: translate(-50%, -50%);
            }
        }

        #gameOver h2 {
            font-size: 48px;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #4fc3f7 0%, #26c6da 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 4px 12px rgba(79, 195, 247, 0.3);
            font-weight: bold;
            letter-spacing: 1px;
        }
        
        #gameOver p {
            color: rgba(255, 255, 255, 0.9);
        }

        #gameOver button {
            margin-top: 20px;
            padding: 16px 32px;
            font-size: 18px;
            background: linear-gradient(135deg, #4fc3f7 0%, #26c6da 100%);
            border: none;
            border-radius: 12px;
            cursor: pointer;
            color: white;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(79, 195, 247, 0.3);
        }
        
        #gameOver button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(79, 195, 247, 0.5);
        }
        
        #gameOver button:active {
            transform: translateY(0);
        }

        .mobile-controls {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 10;
        }

        .joystick-container {
            width: 120px;
            height: 120px;
            background: rgba(79, 195, 247, 0.2);
            border: 3px solid rgba(79, 195, 247, 0.4);
            border-radius: 50%;
            position: fixed;
            transform: translate(-50%, -50%);
            touch-action: none;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.15s ease-out;
            z-index: 1000;
        }

        .joystick-knob {
            width: 50px;
            height: 50px;
            background: rgba(79, 195, 247, 0.6);
            border: 3px solid rgba(79, 195, 247, 0.9);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            box-shadow: 0 2px 8px rgba(79, 195, 247, 0.3);
        }

        #gameOver button {
            margin: 10px;
            padding: 15px 30px;
            font-size: 18px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            color: white;
            font-weight: bold;
            transition: all 0.3s ease;
            min-width: 180px;
            /* Mobile improvements */
            touch-action: manipulation;
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
        }
        
        #gameOver button:active {
            transform: scale(0.95);
        }

        /* Toggle Switch */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: 0.4s;
            border-radius: 34px;
        }
        
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: 0.4s;
            border-radius: 50%;
        }
        
        input:checked + .toggle-slider {
            background-color: #4fc3f7;
        }
        
        input:checked + .toggle-slider:before {
            transform: translateX(26px);
        }

        /* Splash Screen - Fullscreen Image */
        #splashScreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, #2d5a7b 0%, #1a3d5c 50%, #0a1e2e 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.3s ease-out;
        }

        #splashScreen.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .splash-title {
            font-size: 48px;
            background: linear-gradient(135deg, #4fc3f7 0%, #26c6da 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: bold;
            letter-spacing: 2px;
            margin-bottom: 40px;
        }
        
        @media (max-width: 768px) {
            .splash-title {
                font-size: 32px;
                letter-spacing: 1px;
            }
        }

        .splash-loader {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(79, 195, 247, 0.2);
            border-top-color: #4fc3f7;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- Splash Screen -->
    <div id="splashScreen">
        <div class="splash-title">Sea Turtle Adventure</div>
        <div class="splash-loader"></div>
    </div>

    <canvas id="gameCanvas"></canvas>
    
    <!-- Lobby Screen -->
    <div id="lobby">
        <!-- Parallax Background Layers -->
        <div class="parallax-layer" id="parallax-far"></div>
        <div class="parallax-layer" id="parallax-mid"></div>
        <div class="parallax-layer" id="parallax-near"></div>
        
        <!-- Lobby Content -->
        <div class="lobby-content">
            <h1>Sea Turtle Adventure</h1>
            <div class="tagline">~ Dive into the deep ~</div>
            
            <!-- Character Selection -->
            <div class="character-selection-title">Choose Your Character</div>
            
            <div class="character-scroll-container">
                <div class="character-scroll-wrapper">
                    <!-- Sea Turtle -->
                    <div class="character-card selected" data-character="turtle" onclick="selectCharacter('turtle')" ontouchend="event.preventDefault(); selectCharacter('turtle');">
                        <canvas class="character-preview" id="preview-turtle" width="140" height="140"></canvas>
                        <div class="character-name">Sea Turtle</div>
                        <div class="character-stats">Speed: ⭐⭐⭐⭐</div>
                        <div class="character-special">Balanced & Steady</div>
                    </div>
                    
                    <!-- Stingray -->
                    <div class="character-card" data-character="stingray" onclick="selectCharacter('stingray')" ontouchend="event.preventDefault(); selectCharacter('stingray');">
                        <canvas class="character-preview" id="preview-stingray" width="140" height="140"></canvas>
                        <div class="character-name">Stingray</div>
                        <div class="character-stats">Speed: ⭐⭐⭐⭐⭐</div>
                        <div class="character-special">Swift & Agile</div>
                    </div>
                    
                    <!-- Pufferfish -->
                    <div class="character-card" data-character="pufferfish" onclick="selectCharacter('pufferfish')" ontouchend="event.preventDefault(); selectCharacter('pufferfish');">
                        <canvas class="character-preview" id="preview-pufferfish" width="140" height="140"></canvas>
                        <div class="character-name">Pufferfish</div>
                        <div class="character-stats">Speed: ⭐⭐⭐</div>
                        <div class="character-special">Upward Burst</div>
                    </div>
                </div>
            </div>
            
            <button id="startButton" class="mode-button">🎮 Start Game</button>
            <button id="installButton" class="install-button" style="display: none;">📥 Install Game</button>
        </div>
        
        <!-- Settings Button (subtle, bottom-right) -->
        <button class="settings-button" onclick="openSettings()">⚙️</button>
    </div>

    <!-- Settings Modal -->
    <!-- Settings Modal -->
    <div id="settingsModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 30, 46, 0.95); backdrop-filter: blur(10px); z-index: 150; align-items: center; justify-content: center;">
        <div style="background: linear-gradient(135deg, rgba(20, 50, 70, 0.95) 0%, rgba(30, 60, 80, 0.95) 100%); padding: 40px; border-radius: 24px; max-width: 420px; width: 90%; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(79, 195, 247, 0.2); backdrop-filter: blur(10px);">
            <h2 style="background: linear-gradient(135deg, #4fc3f7 0%, #26c6da 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-top: 0; margin-bottom: 30px; text-align: center; font-size: 32px; font-weight: bold; letter-spacing: 1px;">Settings</h2>
            
            <!-- Music Toggle -->
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px; background: rgba(79, 195, 247, 0.1); border: 1px solid rgba(79, 195, 247, 0.2); border-radius: 16px; margin-bottom: 15px; transition: all 0.3s ease;">
                <div>
                    <div style="color: white; font-size: 18px; font-weight: bold; margin-bottom: 5px;">🎵 Music</div>
                    <div style="color: rgba(255, 255, 255, 0.6); font-size: 13px;">Underwater ambience</div>
                </div>
                <label class="toggle-switch">
                    <input type="checkbox" id="musicToggle" checked onchange="toggleMusic()">
                    <span class="toggle-slider"></span>
                </label>
            </div>
            
            <!-- Sound Effects Toggle -->
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px; background: rgba(79, 195, 247, 0.1); border: 1px solid rgba(79, 195, 247, 0.2); border-radius: 16px; margin-bottom: 15px; transition: all 0.3s ease;">
                <div>
                    <div style="color: white; font-size: 18px; font-weight: bold; margin-bottom: 5px;">🔊 Sound Effects</div>
                    <div style="color: rgba(255, 255, 255, 0.6); font-size: 13px;">Vibration feedback</div>
                </div>
                <label class="toggle-switch">
                    <input type="checkbox" id="sfxToggle" checked onchange="toggleSFX()">
                    <span class="toggle-slider"></span>
                </label>
            </div>
            
            <!-- Night Mode Toggle -->
            <div style="display: flex; justify-content: space-between; align-items: center; padding: 20px; background: rgba(79, 195, 247, 0.1); border: 1px solid rgba(79, 195, 247, 0.2); border-radius: 16px; margin-bottom: 30px; transition: all 0.3s ease;">
                <div>
                    <div style="color: white; font-size: 18px; font-weight: bold; margin-bottom: 5px;">🌙 Night Mode</div>
                    <div style="color: rgba(255, 255, 255, 0.6); font-size: 13px;">Bioluminescent creatures</div>
                </div>
                <label class="toggle-switch">
                    <input type="checkbox" id="nightModeToggle" onchange="toggleNightMode()">
                    <span class="toggle-slider"></span>
                </label>
            </div>
            
            <button onclick="closeSettings()" style="width: 100%; padding: 16px; background: linear-gradient(135deg, #4fc3f7 0%, #26c6da 100%); border: none; border-radius: 12px; color: white; font-size: 18px; font-weight: bold; cursor: pointer; box-shadow: 0 4px 12px rgba(79, 195, 247, 0.3); transition: all 0.3s ease;">Close</button>
        </div>
    </div>

    <!-- Waiting Screen -->
    <div id="waiting">
        <h2>Finding Player...</h2>
        <div class="spinner"></div>
        <p>Waiting for another player to join...</p>
    </div>

    <!-- Game UI -->
    <div id="ui" style="display: none; 
                        position: absolute; 
                        top: 15px; 
                        left: 15px;
                        background: rgba(0, 0, 0, 0.3);
                        padding: 8px 16px;
                        border-radius: 20px;
                        backdrop-filter: blur(2px);
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
                        font-size: 16px;
                        font-weight: bold;
                        white-space: nowrap;">
        <span style="color: #ffd700;">🏆 <span id="highScore">0</span></span>
        <span style="color: #aaa; margin: 0 12px;">|</span>
        <span style="color: #4fc3f7; font-size: 18px;"><span id="yourScore">0</span></span>
        <span style="color: #aaa; margin: 0 12px;">|</span>
        <span style="color: white;">🦈 <span id="sharkCount">1</span></span>
    </div>

    <!-- Game Over -->
    <div id="gameOver">
        <h2>Game Over!</h2>
        <p style="font-size: 24px; margin: 20px 0;">Final Score: <span id="finalYourScore">0</span></p>
        <p id="winnerText" style="font-size: 24px; margin-top: 20px; color: #ffd700;"></p>
        <button onclick="playAgain()" style="margin: 10px;">🔄 Play Again</button>
        <button onclick="changeCharacter()" style="margin: 10px; background: #26c6da;">🐠 Change Character</button>
    </div>

    <!-- Countdown -->
    <div id="countdown" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 50, 70, 0.95); z-index: 30; align-items: center; justify-content: center; pointer-events: none;">
        <div style="text-align: center;">
            <div id="countdownNumber" style="font-size: 150px; font-weight: bold; color: #4fc3f7; text-shadow: 0 0 30px rgba(79, 195, 247, 0.8), 0 0 60px rgba(79, 195, 247, 0.5); animation: pulse 0.5s ease-in-out;">3</div>
            <div style="font-size: 32px; color: #80deea; margin-top: 20px; text-shadow: 0 0 20px rgba(128, 222, 234, 0.6);">Get Ready! 🐢</div>
        </div>
    </div>

    <style>
        @keyframes pulse {
            0% { transform: scale(0.8); opacity: 0.5; }
            50% { transform: scale(1.2); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
    </style>

    <!-- Mobile Controls -->
    <div class="mobile-controls" style="display: none;" id="mobileControls">
        <div class="joystick-container" id="joystick">
            <div class="joystick-knob" id="joystickKnob"></div>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // Normalized game world size (virtual coordinates) - MUST BE FIRST
        const GAME_WIDTH = 1000;
        const GAME_HEIGHT = 1000;
        
        // Scale factors for converting between screen and game coordinates
        let scaleX = 1;
        let scaleY = 1;
        
        function updateScale() {
            scaleX = canvas.width / GAME_WIDTH;
            scaleY = canvas.height / GAME_HEIGHT;
        }
        
        // Convert screen coordinates to game coordinates
        function toGameCoords(screenX, screenY) {
            return {
                x: screenX / scaleX,
                y: screenY / scaleY
            };
        }
        
        // Convert game coordinates to screen coordinates
        function toScreenCoords(gameX, gameY) {
            return {
                x: gameX * scaleX,
                y: gameY * scaleY
            };
        }
        
        // Resize canvas
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            updateScale(); // Update scale factors when canvas resizes
        }
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);
        window.addEventListener('orientationchange', resizeCanvas);

        // Game state
        let gameRunning = false;
        let gameMode = 'single';
        let selectedCharacter = 'turtle'; // Character selection: turtle, stingray, pufferfish
        let yourScore = 0;
        const keys = {};
        let nightMode = false; // Night mode with bioluminescent creatures
        
        // Joystick state
        let joystickActive = false;
        let joystickDeltaX = 0;
        let joystickDeltaY = 0;

        // High score tracking
        let highScore = 0;

        // Load high score
        function loadHighScore() {
            const savedHighScore = localStorage.getItem('turtleHighScore');
            if (savedHighScore) {
                highScore = parseInt(savedHighScore);
            }
        }
        loadHighScore();

        // Update high score if beaten
        function updateHighScore(newScore) {
            if (newScore > highScore) {
                highScore = newScore;
                localStorage.setItem('turtleHighScore', highScore.toString());
                return true; // New high score!
            }
            return false;
        }
        
        // Turtle sizes - increased for better visibility with normalized coordinates
        const turtle = {
            x: GAME_WIDTH / 2,
            y: GAME_HEIGHT / 2,
            size: 35, // Increased from 25
            speed: 4, // Increased from 3 for better feel
            vx: 0,
            vy: 0,
            rotation: 0,
            alive: true
        };
        
        // Get actual collision radius for player - matches visual size
        function getPlayerCollisionRadius() {
            // Visual size varies by character:
            // Turtle: shell is 0.6 of size (60%)
            // Stingray: body is 0.7 of size (70%)
            // Pufferfish: body is 0.8 of size (80%)
            
            let visualPercent;
            if (selectedCharacter === 'turtle') {
                visualPercent = 0.6; // Shell width
            } else if (selectedCharacter === 'stingray') {
                visualPercent = 0.7; // Diamond body
            } else {
                visualPercent = 0.8; // Round pufferfish
            }
            
            return turtle.size * visualPercent;
        }

        // Entity counts - increased for fuller ocean with normalized coordinates
        const fish = [];
        const fishCount = 15; // Increased from 12
        const sharks = [];
        const jellyfish = [];
        const jellyfishCount = 3; // Increased from 2 (still manageable)
        const bubbles = [];
        const bubbleCount = 25; // Increased from 20
        const deathParticles = []; // Explosion particles on death
        const spawnWarnings = []; // Visual warnings for shark spawns
        const ripples = []; // Water ripples from movement
        let rippleTimer = 0; // Timer to control ripple spawning rate
        const kelp = []; // Kelp/seaweed at bottom
        const kelpCount = 15; // Number of kelp strands

        // Audio setup - Simple audio file playback
        let ambientAudio = null;
        let audioFadeInterval = null;
        
        // Settings state
        let isMusicEnabled = true;
        let isSFXEnabled = true;
        
        // Initialize audio element
        function initAudio() {
            if (ambientAudio) return; // Already initialized
            
            ambientAudio = new Audio('underwater.mp3'); // Your audio file
            ambientAudio.loop = true; // Loop continuously
            ambientAudio.volume = 0.1; // 10% volume (adjusted per user request)
            
            console.log('🔊 Audio initialized');
        }
        
        // Settings functions
        function openSettings() {
            document.getElementById('settingsModal').style.display = 'flex';
        }
        
        function closeSettings() {
            document.getElementById('settingsModal').style.display = 'none';
        }
        
        function toggleMusic() {
            isMusicEnabled = document.getElementById('musicToggle').checked;
            console.log('🎵 Music:', isMusicEnabled ? 'ON' : 'OFF');
            
            if (!isMusicEnabled && ambientAudio && !ambientAudio.paused) {
                stopAmbientSound();
            }
        }
        
        function toggleSFX() {
            isSFXEnabled = document.getElementById('sfxToggle').checked;
            console.log('🔊 Sound Effects:', isSFXEnabled ? 'ON' : 'OFF');
        }
        
        function toggleNightMode() {
            nightMode = document.getElementById('nightModeToggle').checked;
            console.log('🌙 Night Mode:', nightMode ? 'ON - Bioluminescent!' : 'OFF - Daytime');
            
            // Update lobby background immediately
            const lobby = document.getElementById('lobby');
            const startButton = document.getElementById('startButton');
            const installButton = document.getElementById('installButton');
            const settingsButton = document.querySelector('.settings-button');
            
            if (nightMode) {
                // Dark lobby background
                lobby.style.background = 'linear-gradient(180deg, #0a0a1a 0%, #050510 50%, #000000 100%)';
                
                // Softer, deeper blue buttons
                startButton.style.background = 'linear-gradient(135deg, #2d5a6b 0%, #1a4a5a 100%)';
                startButton.style.boxShadow = '0 8px 24px rgba(45, 90, 107, 0.3)';
                
                installButton.style.background = 'linear-gradient(135deg, #1a4a5a 0%, #0d3a4a 100%)';
                installButton.style.boxShadow = '0 4px 16px rgba(26, 74, 90, 0.3)';
                
                // Softer settings button
                settingsButton.style.background = 'rgba(70, 90, 100, 0.5)';
                settingsButton.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.5)';
            } else {
                // Day mode - bright colors
                lobby.style.background = 'linear-gradient(180deg, #2d5a7b 0%, #1a3d5c 50%, #0a1e2e 100%)';
                
                // Bright cyan buttons
                startButton.style.background = 'linear-gradient(135deg, #4fc3f7 0%, #26c6da 100%)';
                startButton.style.boxShadow = '0 8px 24px rgba(79, 195, 247, 0.4)';
                
                installButton.style.background = 'linear-gradient(135deg, #26c6da 0%, #00acc1 100%)';
                installButton.style.boxShadow = '0 4px 16px rgba(38, 198, 218, 0.3)';
                
                // Normal settings button
                settingsButton.style.background = 'rgba(96, 125, 139, 0.6)';
                settingsButton.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.3)';
            }
            
            // Add haptic feedback
            hapticFeedback('light');
        }
        
        // Start ambient sound
        function startAmbientSound() {
            if (!isMusicEnabled) return; // Don't start if music disabled
            
            if (!ambientAudio) {
                initAudio();
            }
            
            if (ambientAudio) {
                ambientAudio.volume = 0.1; // Reset volume in case it was faded
                ambientAudio.play().then(() => {
                    console.log('🎵 Ambient sound playing');
                }).catch(err => {
                    console.log('⚠️ Audio play failed (user interaction required):', err);
                });
            }
        }
        
        // Stop ambient sound with fade out
        function stopAmbientSound() {
            if (ambientAudio && !ambientAudio.paused) {
                // Clear any existing fade
                if (audioFadeInterval) {
                    clearInterval(audioFadeInterval);
                }
                
                // Fade out over 500ms
                const fadeStep = ambientAudio.volume / 20; // 20 steps
                audioFadeInterval = setInterval(() => {
                    if (ambientAudio.volume > fadeStep) {
                        ambientAudio.volume -= fadeStep;
                    } else {
                        ambientAudio.volume = 0;
                        ambientAudio.pause();
                        ambientAudio.currentTime = 0; // Reset to beginning
                        ambientAudio.volume = 0.1; // Reset volume for next play
                        clearInterval(audioFadeInterval);
                        console.log('🔇 Ambient sound faded out');
                    }
                }, 25); // 25ms per step = 500ms total
            }
        }
        
        // Toggle audio on/off (legacy - now handled by settings)
        function toggleAudio() {
            toggleMusic();
        }

        // Character selection function
        function selectCharacter(character) {
            selectedCharacter = character;
            
            // Update selected visual
            document.querySelectorAll('.character-card').forEach(card => {
                card.classList.remove('selected');
            });
            const selectedCard = document.querySelector(`[data-character="${character}"]`);
            if (selectedCard) {
                selectedCard.classList.add('selected');
                
                // Scroll selected card into view (smooth)
                const container = document.querySelector('.character-scroll-container');
                if (container) {
                    const cardRect = selectedCard.getBoundingClientRect();
                    const containerRect = container.getBoundingClientRect();
                    const scrollLeft = selectedCard.offsetLeft - (container.offsetWidth / 2) + (selectedCard.offsetWidth / 2);
                    
                    container.scrollTo({
                        left: scrollLeft,
                        behavior: 'smooth'
                    });
                }
            }
            
            // Update character name display
            const nameDisplay = document.getElementById('currentCharacterName');
            if (nameDisplay) {
                if (character === 'turtle') {
                    nameDisplay.textContent = 'Sea Turtle';
                } else if (character === 'stingray') {
                    nameDisplay.textContent = 'Stingray';
                } else if (character === 'pufferfish') {
                    nameDisplay.textContent = 'Pufferfish';
                }
            }
            
            // Update turtle speed based on character
            if (character === 'stingray') {
                turtle.speed = 5; // Faster
            } else if (character === 'pufferfish') {
                turtle.speed = 3; // Slower
            } else {