/* ===== GLOBAL ===== */
        body {
            margin: 0;
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #000000, #0a0f2c);
            color: white;
        }

        /* NAV */
        .nav {
            display: flex;
            justify-content: space-around;
            padding: 15px;
            backdrop-filter: blur(14px);
            background: rgba(0, 255, 255, 0.05);
            border-bottom:
                1px solid rgba(255, 215, 0, 0.08);

            position: relative;
            z-index: 9999;
        }

        .nav button {
            font-family: 'Exo 2', sans-serif;

            font-size: 1rem;
            font-weight: 600;

            letter-spacing: 1px;

            color: white;

            background: transparent;
            border: none;

            padding: 12px 20px;

            cursor: pointer;

            transition: all 0.3s ease;

            text-transform: uppercase;
        }

        .nav button:hover {

            color: gold;

            text-shadow:
                0 0 8px rgba(255, 215, 0, 0.8),
                0 0 18px rgba(255, 215, 0, 0.5),
                0 0 28px rgba(255, 215, 0, 0.35);

            transform: translateY(-2px);
        }
        

        /* THEME TOGGLE BUTTON */
        #themeToggle {
            position: fixed;
            bottom: 20px;
            left: 20px;

            padding: 14px 20px;

            border: none;
            border-radius: 16px;

            background: rgba(0, 255, 255, 0.18);

            color: white;

            font-family: 'Orbitron', sans-serif;
            font-weight: 700;
            font-size: 0.95rem;

            cursor: pointer;

            z-index: 99999;

            backdrop-filter: blur(12px);

            box-shadow:
                0 0 12px rgba(0, 255, 255, 0.25);

            transition: all 0.3s ease;
        }

        #themeToggle:hover {
            transform: scale(1.05);
        }

        /* ================================
   PREMIUM LIGHT MODE MASTER THEME
================================ */

        body.light-mode {
            background:
                linear-gradient(135deg,
                    #f8f4e8 0%,
                    #fcfaf5 45%,
                    #f1ebdf 100%) !important;

            color: #111;

            background-attachment: fixed;
        }

        /* GLASS PANELS */
        body.light-mode .glass,
        body.light-mode .pb-item,
        body.light-mode .metric-box,
        body.light-mode .chart-container,
        body.light-mode .howto-card,
        body.light-mode .tip-card,
        body.light-mode .req-card,
        body.light-mode .angle-card,
        body.light-mode .footage-chip,
        body.light-mode .avoid-card {
            background:
                linear-gradient(145deg,
                    rgba(255, 255, 255, 0.88),
                    rgba(248, 244, 232, 0.82));

            backdrop-filter: blur(18px);

            border:
                1px solid rgba(255, 255, 255, 0.55);

            box-shadow:
                0 8px 32px rgba(0, 0, 0, 0.08),
                0 2px 8px rgba(255, 255, 255, 0.65) inset;

            color: #111;
        }

        /* PRIMARY BUTTONS */
        body.light-mode .btn {
            background:
                linear-gradient(135deg,
                    #ffffff,
                    #f1ede4);

            color: #111;

            border:
                1px solid rgba(0, 0, 0, 0.08);

            box-shadow:
                0 4px 12px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.7);

            border-radius: 14px;

            font-weight: 700;

            transition: all 0.3s ease;
        }

        body.light-mode button:hover {
            transform: translateY(-2px) scale(1.02);

            box-shadow:
                0 8px 22px rgba(0, 119, 255, 0.15);
        }


        /* HEADINGS */
        body.light-mode h1,
        body.light-mode h2,
        body.light-mode h3,
        body.light-mode .title,
        body.light-mode .overview-title {
            color: #111;

            font-weight: 800;

            letter-spacing: -0.5px;

            text-shadow: none;
        }

        /* SUBTEXT */
        body.light-mode .subtitle,
        body.light-mode .quote,
        body.light-mode p,
        body.light-mode label {
            color: rgba(0, 0, 0, 0.72);
        }

        /* CHART TITLES */
        body.light-mode .chart-title {
            color: #e63946;
            font-weight: 800;
        }

        /* READINESS BARS */
        body.light-mode .readiness-bar {
            background:
                rgba(0, 0, 0, 0.08);

            border-radius: 999px;
        }

        /* PREMIUM HOVER */
        body.light-mode .pb-item:hover,

        /* PAGE DEPTH */
        body.light-mode::before {
            content: "";

            position: fixed;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            pointer-events: none;

            background:
                radial-gradient(circle at top left,
                    rgba(255, 180, 80, 0.12),
                    transparent 40%),
                radial-gradient(circle at bottom right,
                    rgba(0, 119, 255, 0.06),
                    transparent 45%);

            z-index: -1;
        }


        /* ================================
   PROFILE OVERVIEW
================================ */

        body.light-mode .overview-card,
        body.light-mode .profile-card,
        body.light-mode .athlete-summary {
            background:
                linear-gradient(145deg,
                    rgba(255, 255, 255, 0.92),
                    rgba(248, 244, 232, 0.88));

            color: #111;

            box-shadow:
                0 10px 28px rgba(0, 0, 0, 0.08);
        }

        /* PROFILE HEADINGS */
        body.light-mode .overview-title,
        body.light-mode .overview-name,
        body.light-mode .overview-info,
        body.light-mode #profile h2,
        body.light-mode #profile h3 {
            color: #111 !important;
            text-shadow: none !important;
        }

        /* PROFILE DETAILS */
        body.light-mode .overview-info,
        body.light-mode .profile-meta,
        body.light-mode .profile-stat {
            color: rgba(0, 0, 0, 0.72) !important;
        }

        /* =====================================
   KEEP ORIGINAL STROKE CARD COLORS
===================================== */

        body.light-mode .stroke-card.elite,
        body.light-mode .stroke-card.gold,
        body.light-mode .stroke-card.silver,
        body.light-mode .stroke-card.bronze,
        body.light-mode .stroke-card.normal {
            color: inherit !important;
            filter: none !important;
        }


        /* BODY MAP + WAR ROOM */
        body.light-mode .body-legend,
        body.light-mode .readiness-label,
        body.light-mode .chart-title {
            color: #111 !important;
        }

        /* TOOLTIP */
        body.light-mode #bodyTooltip {
            background: rgba(255, 255, 255, 0.96);
            color: #111;
            border: 1px solid rgba(0, 0, 0, 0.08);
        }


        /* GLASS */
        .glass {
            width: 85%;
            max-width: 1100px;

            margin: 40px auto;
            padding: 45px;

            border-radius: 28px;

            background:
                linear-gradient(135deg,
                    rgba(10, 18, 45, 0.88),
                    rgba(5, 10, 30, 0.94));

            backdrop-filter: blur(22px);

            box-shadow:
                0 0 35px rgba(0, 255, 255, 0.08),
                0 0 80px rgba(0, 150, 255, 0.05);

            border:
                1px solid rgba(0, 255, 255, 0.12);

            color: white;
        }

        /* =========================================
   MASTER PAGE SYSTEM FIX
========================================= */

        /* Hide all pages */
        .page {
            display: none !important;

            width: 100% !important;
            min-height: 100vh !important;

            margin: 0 !important;
            padding: 0 !important;
        }

        /* Show only active page */
        .page.active {
            display: block !important;
        }

        /* Home page only when active */
        #home.page.active {
            display: block !important;
        }

        /* Hide home completely when inactive */
        #home.page:not(.active) {
            display: none !important;
        }

        /* ===== HERO TITLE ===== */
        .hero-title {
            font-family: 'Michroma', sans-serif;
            font-size: 5.3rem;
            font-weight: 800;
            letter-spacing: 6px;

            margin-bottom: 18px;

            text-shadow:
                0 0 8px rgba(0, 191, 255, 0.55),
                0 0 16px rgba(0, 191, 255, 0.45),
                0 0 28px rgba(0, 140, 255, 0.35),
                0 0 42px rgba(0, 110, 255, 0.25);

            transition: all 0.4s ease;

            position: relative;
            top: -35px;
            /* pushes SWIMTICS slightly upward */
        }

        /* ===== SUBTITLE ===== */
        .hero-subtitle {
            font-family: 'Orbitron', sans-serif;
            /* EPIC futuristic option */

            font-size: 1.7rem;
            font-weight: 600;
            letter-spacing: 2px;

            margin-bottom: 14px;
            position: relative;
            top: -20px;
        }

        /* ===== TAGLINE ===== */
        .hero-tagline {
            font-family: 'Rajdhani', sans-serif;
            /* sleek elite performance look */

            font-size: 1.15rem;
            font-weight: 500;
            letter-spacing: 5px;
            text-transform: uppercase;

            margin-bottom: 34px;
            position: relative;
            top: -15px;

            opacity: 0.9;
        }

        /* ===== QUOTE ===== */
        .hero-quote {
            font-family: 'Inter', sans-serif;
            font-size: 1.15rem;
            font-style: italic;
            font-weight: 400;

            margin: 0 auto;

            opacity: 0.82;
            max-width: 850px;
            line-height: 1.8;
            text-align: center; 
        }

        /* PB CARD */
        .pb-item {
            width: 100%;
            padding: 20px;
            margin-bottom: 22px;

            border-radius: 18px;

            background: rgba(255, 255, 255, 0.04);

            border: 1px solid rgba(0, 255, 255, 0.25);

            overflow: visible !important;

            height: auto !important;
            min-height: unset !important;

            display: block !important;
        }

        /* HEADER */
        .pb-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 12px;
        }

        /* TITLE */
        .pb-title {
            font-size: 1.8rem;
            font-weight: 700;
        }

        /* BUTTON AREA */
        .pb-controls {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        /* CHART SECTION */
        .chart-container {
            width: 100%;
            margin-top: 20px;
            height: 320px;

            position: relative;

            padding: 20px;

            border-radius: 14px;

            background: rgba(255, 255, 255, 0.03);

            display: block;

            overflow: hidden;
        }

        /* CANVAS WRAPPER */
        .chart-wrapper {
            position: relative;
            width: 100%;
            height: 320px;
        }

        /* CANVAS */
        .chart-wrapper canvas {
            width: 100% !important;
            height: 100% !important;
        }

        /* ===== ATHLETE OVERVIEW CARD UPGRADE ===== */

        /* MAIN CARD */
        .overview-card {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            padding: 35px;
            border-radius: 22px;

            background: linear-gradient(145deg,
                    rgba(25, 25, 35, 0.96),
                    rgba(10, 15, 35, 0.92));

            box-shadow:
                0 0 20px rgba(0, 255, 255, 0.08),
                0 0 40px rgba(255, 215, 0, 0.08);

            overflow: hidden;
        }

        /* HEADER */
        .overview-title {
            width: 100%;
            text-align: center;

            font-size: 34px;
            font-weight: 800;

            font-family: 'Orbitron', sans-serif;

            color: white;

            margin-bottom: 25px;

            text-shadow:
                0 0 8px rgba(255, 215, 0, 0.25);
        }

        /* NAME */
        .overview-name {
            font-size: 38px;
            font-weight: 900;

            font-family: 'Bebas Neue', sans-serif;

            color: #FFD700;

            letter-spacing: 1px;

            text-shadow:
                0 0 5px rgba(0, 0, 0, 0.9),
                0 0 12px rgba(255, 215, 0, 0.35);

            margin-bottom: 12px;
        }

        /* GENERAL TEXT */
        .overview-info {
            font-size: 22px;
            line-height: 1.6;

            font-family: 'Rajdhani', sans-serif;

            color: #f2f2f2;
        }

        /* PROFILE IMAGE BOX */
        .profile-upload-box {
            width: 180px;
            height: 220px;

            border: 2.5px dashed rgba(255, 215, 0, 0.6);

            border-radius: 18px;

            display: flex;
            justify-content: center;
            align-items: center;

            background: rgba(255, 255, 255, 0.03);

            cursor: pointer;

            color: rgba(255, 255, 255, 0.65);

            font-family: 'Rajdhani', sans-serif;
            font-size: 20px;
            font-weight: 700;

            text-align: center;

            transition: 0.3s;
            overflow: hidden;
        }

        .profile-upload-box:hover {
            border-color: #FFD700;

            box-shadow:
                0 0 15px rgba(255, 215, 0, 0.35);

            color: #FFD700;
        }

        /* PROFILE IMAGE */
        .profile-upload-box img {
            width: 100%;
            height: 100%;

            object-fit: cover;

            border-radius: 18px;
        }

        .stroke-card {
            width: 220px;
            height: 320px;
            border-radius: 20px;
            position: relative;
            overflow: hidden;

            /* 🔥 DARK GOLD BACKGROUND */
            background: linear-gradient(145deg, #1a1400, #000);

            /* 🔥 GOLD GLOW */
            box-shadow:
                0 0 10px rgba(255, 215, 0, 0.6),
                0 0 25px rgba(255, 215, 0, 0.5),
                0 0 50px rgba(255, 215, 0, 0.3);

            color: white;

        }

        .stroke-card.elite {
            border: 3.5px solid rgba(255, 80, 0, 0.95);

            animation: eliteFireGlow 1.2s infinite alternate;

            box-shadow:
                0 0 15px rgba(255, 80, 0, 0.9),
                0 0 35px rgba(255, 40, 0, 0.8),
                0 0 70px rgba(255, 140, 0, 0.7);

            position: relative;
        }

        @keyframes eliteFireGlow {
            0% {
                box-shadow:
                    0 0 10px rgba(255, 80, 0, 0.8),
                    0 0 25px rgba(255, 40, 0, 0.7),
                    0 0 50px rgba(255, 140, 0, 0.6);
            }

            50% {
                box-shadow:
                    0 0 18px rgba(255, 120, 0, 1),
                    0 0 40px rgba(255, 60, 0, 0.9),
                    0 0 70px rgba(255, 180, 0, 0.8);
            }

            100% {
                box-shadow:
                    0 0 12px rgba(255, 80, 0, 0.9),
                    0 0 30px rgba(255, 50, 0, 0.8),
                    0 0 60px rgba(255, 160, 0, 0.7);
            }
        }

        .stroke-card.elite::after {
            content: "";

            position: absolute;
            inset: -4px;

            border-radius: 22px;

            background: linear-gradient(45deg,
                    rgba(255, 80, 0, 0.25),
                    rgba(255, 140, 0, 0.15),
                    rgba(255, 40, 0, 0.25));

            filter: blur(8px);

            z-index: -1;

            animation: eliteFireGlow 1s infinite alternate;

            pointer-events: none;
        }

        .fire-overlay {
            position: absolute;

            bottom: -35px;
            /* 🔥 pushes flames downward */
            left: 0;

            width: 100%;
            height: 45%;
            /* 🔥 shorter flame height */

            background: url('../fire.gif') center bottom / cover no-repeat;

            mix-blend-mode: screen;

            opacity: 0.9;

            pointer-events: none;

            z-index: 4;
        }

        .fire-overlay::after {
            content: "";
            position: absolute;
            inset: 0;

            background:
                radial-gradient(circle, rgba(255, 200, 50, 0.7) 2px, transparent 3px);

            animation: sparksRise 2s linear infinite;
        }

        .stroke-card.gold {
            border: 5px solid rgba(255, 215, 0, 0.9);

            box-shadow:
                0 0 10px rgba(255, 215, 0, 0.6),
                0 0 25px rgba(255, 215, 0, 0.5),
                0 0 50px rgba(255, 215, 0, 0.3);
        }

        .stroke-card.silver {
            border: 5px solid rgba(220, 220, 220, 0.9);

            box-shadow:
                0 0 10px rgba(220, 220, 220, 0.7),
                0 0 25px rgba(180, 180, 180, 0.6),
                0 0 50px rgba(150, 150, 150, 0.4);
        }

        .stroke-card.bronze {
            border: 5px solid rgba(205, 127, 50, 0.9);

            box-shadow:
                0 0 10px rgba(205, 127, 50, 0.7),
                0 0 25px rgba(160, 82, 45, 0.6),
                0 0 50px rgba(139, 69, 19, 0.4);
        }

        .stroke-card.normal {
            border: 5px solid rgba(80, 80, 80, 0.4);

            box-shadow:
                0 0 5px rgba(80, 80, 80, 0.3);
        }

        .stroke-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 20px;

            background: radial-gradient(circle at top left,
                    rgba(255, 215, 0, 0.3),
                    transparent 60%);

            pointer-events: none;
        }


        /* SCORE */
        .stroke-score {
            font-size: 38px;
            /* 🔥 slightly bigger */
            font-weight: 900;

            /* 🔥 solid readable gold */
            color: #FFD700;

            /* 🔥 strong contrast (THIS is key) */
            text-shadow:
                0 0 2px #000,
                0 0 6px rgba(0, 0, 0, 0.8),
                0 0 12px rgba(0, 0, 0, 0.6);

            /* 🔥 subtle glow (not overpowering) */
            filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5));
        }

        /* STROKE NAME */
        .stroke-name {
            font-size: 25px;
            /* 🔥 bigger */
            font-weight: 800;
            /* 🔥 bold */

            color: #00ffff;

            letter-spacing: 1px;

            margin-top: 10px;

            text-shadow:
                0 0 10px rgba(0, 255, 255, 0.6),
                0 0 20px rgba(0, 255, 255, 0.3);
        }

        /* FLAG + CLUB */
        .stroke-meta {
            font-size: 18px;
            /* 🔥 bigger club text */
            font-weight: 500;

            opacity: 0.9;

            text-shadow:
                0 0 3px rgba(0, 0, 0, 0.8);
        }

        /* TIMES */
        .stroke-times {
            position: absolute;
            bottom: 45px;
            /* 🔥 bring it UP */
            left: 0;
            width: 100%;

            text-align: center;

            font-family: 'Bebas Neue', sans-serif;

            font-size: 19px;
            /* slightly tighter */
            line-height: 1.4;
            /* prevents clipping */

            color: #F8E9A1;

            text-shadow:
                0 0 3px rgba(0, 0, 0, 0.95),
                0 0 6px rgba(0, 0, 0, 0.85),
                0 0 12px rgba(255, 215, 0, 0.35);

            letter-spacing: 0.5px;

            z-index: 5;
        }

        /* HOVER EFFECT */
        .stroke-card:hover {
            transform: scale(1.05);
            transition: 0.3s;
        }

        /* ===== CARD IMAGE CONTAINER ===== */
        .card-image-container {
            position: absolute;
            top: 0;
            right: 0;
            width: 70%;
            height: 55%;
            overflow: hidden;
            border-top-right-radius: 15px;
            pointer-events: auto;
        }

        /* ===== BACKGROUND IMAGE ===== */
        .card-bg-image {
            position: absolute;
            top: 0;
            right: 0;

            width: 100%;
            /* 🔥 FULL WIDTH */
            height: 65%;
            /* 🔥 more visible */

            z-index: 1;
            pointer-events: none;
            /* prevents blocking */
        }

        .card-bg-image img {
            width: 100%;
            height: 100%;

            object-fit: cover;
            object-position: top right;

            opacity: 0.95;
            /* 🔥 makes it visible again */

            mask-image: linear-gradient(to bottom,
                    rgba(0, 0, 0, 1) 40%,
                    rgba(0, 0, 0, 0) 100%);

            -webkit-mask-image: linear-gradient(to bottom,
                    rgba(0, 0, 0, 1) 40%,
                    rgba(0, 0, 0, 0) 100%);
        }