<style>
    /* CSS Reset and Variables */
    :root {
        --deep-blue: #001a33;
        --electric-blue: #00f2fe;
        --neon-green: #39ff14;
        --warning-red: #ff3131;
        --glass-white: rgba(255, 255, 255, 0.95);
        --accent-orange: #ff7f50;
    }

    html { scroll-behavior: smooth; }
    * { box-sizing: border-box; transition: all 0.3s ease; }

    body {
        font-family: 'Segoe UI', Tahoma, sans-serif;
        line-height: 1.8;
        margin: 0;
        color: #1a2a3a;
        background-color: var(--deep-blue);
        background-image: linear-gradient(rgba(0, 26, 51, 0.85), rgba(0, 26, 51, 0.85)), 
                          url('https://images.unsplash.com/photo-1551244072-5d12893278ab?auto=format&fit=crop&w=1920&q=80');
        background-attachment: fixed;
        background-size: cover;
    }

    nav {
        background: rgba(0, 10, 20, 0.7);
        backdrop-filter: blur(15px);
        padding: 1rem;
        position: sticky;
        top: 0;
        text-align: center;
        z-index: 1000;
        border-bottom: 2px solid var(--electric-blue);
    }

    nav a { color: white; text-decoration: none; margin: 0 20px; font-weight: bold; text-transform: uppercase; font-size: 0.85rem; }
    nav a:hover { color: var(--electric-blue); text-shadow: 0 0 10px var(--electric-blue); }

    header { text-align: center; color: white; padding: 80px 20px; }
    header h1 { font-size: 3.5rem; margin: 0; text-transform: uppercase; letter-spacing: 5px; color: var(--electric-blue); }

    main { max-width: 900px; margin: auto; padding: 20px; }

    section {
        background: var(--glass-white);
        padding: 40px;
        margin-bottom: 40px;
        border-radius: 25px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }

    h2 { color: #005a8e; border-left: 5px solid var(--electric-blue); padding-left: 15px; margin-bottom: 25px; }

    table { width: 100%; border-collapse: collapse; margin: 25px 0; border-radius: 10px; overflow: hidden; }
    th { background: #005a8e; color: white; padding: 15px; text-align: left; }
    td { padding: 15px; border-bottom: 1px solid #ddd; background: white; }

    #game-section { background: #0a0a0a; color: white; border: 2px solid var(--electric-blue); text-align: center; position: relative; }
    
    canvas {
        background: #111;
        border: 3px solid #444;
        border-radius: 15px;
        max-width: 100%;
        cursor: crosshair;
        margin-bottom: 20px;
    }

    .pause-overlay {
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(8px);
        padding: 20px 40px;
        border-radius: 15px;
        border: 1px solid var(--electric-blue);
        display: none;
        z-index: 10;
    }
    .pause-overlay.active { display: block; }
    .pause-text { color: white; font-size: 1.5rem; text-transform: uppercase; font-weight: bold; }

    .stats { font-family: 'Courier New', monospace; font-size: 1.6rem; color: var(--neon-green); display: flex; justify-content: space-around; margin-bottom: 20px; }

    /* --- THE BUTTONS SECTION --- */
    button { 
        padding: 15px 45px; 
        color: white; 
        border: none; 
        border-radius: 10px; 
        font-weight: 900; 
        cursor: pointer; 
        font-size: 1rem; 
        text-transform: uppercase; 
        margin: 10px; 
    }

   #startBtn { 
    background: linear-gradient(45deg, #00b4db, #0083b0) !important; 
    box-shadow: 0 0 15px var(--electric-blue) !important;
    
    /* This adds the "Size" back! */
    padding: 20px 60px !important; 
    font-size: 1.2rem !important;
    font-weight: bold !important;
    border-radius: 15px !important;
    color: white !important;
}

    #startBtn:hover {
        transform: scale(1.05);
        filter: brightness(1.2);
    }

    #pauseBtn { background: transparent; border: 2px solid #666; color: #aaa; display: none; }

    @keyframes swim { from { left: -150px; } to { left: 100vw; } }
    .swimmer { position: fixed; z-index: 1; pointer-events: none; animation: swim linear infinite; font-size: 3rem; opacity: 0.4; }

    footer { text-align: center; color: white; padding: 40px; opacity: 0.6; }
</style>