@import url('../../fonts/edc-fonts.css');
        
        :root {
            --primary: #00ffaa;
            --secondary: #00d4ff;
        }

        body {
            font-family: 'Outfit', sans-serif;
            background-color: #050505;
            color: #ffffff;
            margin: 0;
            overflow-x: hidden;
        }

        /* POZADÍ KLIKNI */
        #energy-canvas {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            z-index: -1;
            opacity: 0.5;
        }

        /* GLASSMORPHISMUS PRO KARTY */
        .glass-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .item-container:hover .glass-card {
            transform: translateY(-10px);
            border: 1px solid rgba(0, 255, 170, 0.3);
            box-shadow: 0 10px 30px rgba(0, 255, 170, 0.1);
        }

        .text-gradient {
            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* === ZACHOVÁNÍ TVOJÍ ANIMACE BATERIE === */
        .battery {
            width: 70px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            border: 3px solid #455a64;
            border-radius: 10px;
            padding: 4px;
            background: rgba(0, 0, 0, 0.3);
            transition: all 0.5s ease;
        }

        .battery-cap {
            width: 25px;
            height: 8px;
            background: #455a64;
            position: absolute;
            top: -11px;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 3px 3px 0 0;
        }

        .battery-cell {
            width: 100%;
            height: 28%;
            margin-bottom: 6%;
            background: #cfd8dc;
            border-radius: 3px;
            transition: all 0.4s ease;
            opacity: 0.3;
        }

        .battery-cell:last-child { margin-bottom: 0; }

        /* Aktivní/Hover stavy tvé baterie v novém designu */
        .item-container:hover .battery {
            border-color: var(--primary);
            box-shadow: 0 0 20px rgba(0, 255, 170, 0.3);
        }

        .item-container:hover .battery-cell { opacity: 1; }
        .item-container:hover .cell-low { background: #81c784; animation: charge 1.5s infinite 0s; }
        .item-container:hover .cell-mid { background: #66bb6a; animation: charge 1.5s infinite 0.3s; }
        .item-container:hover .cell-high { background: #4caf50; animation: charge 1.5s infinite 0.6s; }

        @keyframes charge {
            0% { filter: brightness(1); }
            50% { filter: brightness(1.4); transform: scaleX(1.05); }
            100% { filter: brightness(1); }
        }

        /* MODÁL STYL KLIKNI */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0; top: 0; width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.9);
            backdrop-filter: blur(10px);
        }

        .modal-content {
            background: rgba(20, 20, 20, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.1);
            margin: 5vh auto;
            padding: 40px;
            border-radius: 32px;
            width: 90%;
            max-width: 800px;
            max-height: 85vh;
            overflow-y: auto;
        }

        .video-wrapper {
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
            overflow: hidden;
            border-radius: 20px;
            background: #000;
            margin: 20px 0;
        }

        .video-wrapper iframe,
        .video-wrapper video {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            border: 0;
            background: #000;
        }

        /* WCAG AAA REŽIM PRO NOVÝ DESIGN */
        [data-theme="wcag-aaa"] {
            background: #000 !important;
        }
        [data-theme="wcag-aaa"] .glass-card {
            background: #000 !important;
            border: 2px solid #fff !important;
        }
        [data-theme="wcag-aaa"] .text-gradient {
            -webkit-text-fill-color: #ffff00 !important;
        }
        /* Styl pro nové logo v headeru */
        .logo-link {
            display: flex;
            align-items: center;
            transition: transform 0.3s ease;
        }

        .logo-link:hover {
            transform: scale(1.05); /* Jemné zvětšení při najetí */
        }

        .logo-img {
            height: 40px; /* Upravte výšku podle potřeby */
            width: auto;
            display: block;
            /* Pokud má logo tmavé barvy, můžete přidat filtr pro lepší viditelnost */
            filter: drop-shadow(0 0 10px rgba(0, 255, 170, 0.2)); 
        }

        /* Responzivní úprava pro mobilní telefony */
        @media (max-width: 480px) {
            .logo-img {
                height: 32px;
            }
        }
        /* --- STYLY PRO BÍLÉ LOGO --- */
        .logo-link {
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .logo-img {
            height: 48px; /* Upraveno pro lepší viditelnost */
            width: auto;
            display: block;
            /* Tento filtr udělá logo kompletně bílým */
            filter: brightness(0) invert(1); 
            transition: transform 0.2s ease, filter 0.2s ease;
        }

        .logo-link:hover .logo-img {
            transform: scale(1.05);
        }

        .hero-reveal {
            opacity: 0;
            animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
        }

        @keyframes fadeUp {
            0% { opacity: 0; transform: translateY(50px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .float-anim { animation: floating 3s ease-in-out infinite; }
        @keyframes floating {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
        }
        /* Styl pro nové logo v headeru */
        .logo-link {
            display: flex;
            align-items: center;
            transition: transform 0.3s ease;
        }

        .logo-link:hover {
            transform: scale(1.05); /* Jemné zvětšení při najetí */
        }

        .logo-img {
            height: 40px; /* Upravte výšku podle potřeby */
            width: auto;
            display: block;
            /* Pokud má logo tmavé barvy, můžete přidat filtr pro lepší viditelnost */
            filter: drop-shadow(0 0 10px rgba(0, 255, 170, 0.2)); 
        }

        /* Responzivní úprava pro mobilní telefony */
        @media (max-width: 480px) {
            .logo-img {
                height: 32px;
            }
        }
        /* --- STYLY PRO BÍLÉ LOGO --- */
        .logo-link {
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .logo-img {
            height: 48px; /* Upraveno pro lepší viditelnost */
            width: auto;
            display: block;
            /* Tento filtr udělá logo kompletně bílým */
            filter: brightness(0) invert(1); 
            transition: transform 0.2s ease, filter 0.2s ease;
        }

        .logo-link:hover .logo-img {
            transform: scale(1.05);
        }

        .hero-reveal {
            opacity: 0;
            animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
        }

        @keyframes fadeUp {
            0% { opacity: 0; transform: translateY(50px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .reveal {
            opacity: 0;
            transform: translateY(50px);
            transition: all 0.8s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        .float-anim { animation: floating 3s ease-in-out infinite; }
        @keyframes floating {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
        }

        /* ===================================================================== */
        /* ===== „DOBITO NAPLNO" PO PROHLÉDNUTÍ KROKU                       ===== */
        /* ===== (drženo jen v paměti stránky → po refreshi zase výchozí)   ===== */
        /* ===================================================================== */

        /* Nabitá baterie – zůstane plná a svítí zeleně */
        .item-container.done .battery { border-color: var(--primary); box-shadow: 0 0 22px rgba(0,255,170,0.45); }
        .item-container.done .battery-cell { opacity: 1; }
        .item-container.done .cell-low  { background: #4caf50; animation: cellFill .35s ease-out .00s both; }
        .item-container.done .cell-mid  { background: #43a047; animation: cellFill .35s ease-out .18s both; }
        .item-container.done .cell-high { background: #388e3c; animation: cellFill .35s ease-out .36s both; }
        /* Po dobití už hover baterii „nepřebliká" – zůstává plná */
        .item-container.done:hover .cell-low,
        .item-container.done:hover .cell-mid,
        .item-container.done:hover .cell-high { animation: none; }
        @keyframes cellFill {
            0%   { transform: scaleY(0.2); transform-origin: bottom; opacity: .3; filter: brightness(1); }
            70%  { transform: scaleY(1.06); opacity: 1; filter: brightness(1.7); }
            100% { transform: scaleY(1); opacity: 1; filter: brightness(1); }
        }

        /* Přebití – zelený puls kolem baterie v okamžiku plného nabití */
        .item-container.done .battery::after {
            content: ""; position: absolute; inset: -3px; border-radius: 10px; pointer-events: none;
            box-shadow: 0 0 0 0 rgba(0,255,170,0.6);
            animation: battPulse .7s ease-out .55s 1;
        }
        @keyframes battPulse { 0%{box-shadow:0 0 0 0 rgba(0,255,170,0.6);} 100%{box-shadow:0 0 0 24px rgba(0,255,170,0);} }

        /* Odletující jiskry (tvoří se v JS) */
        .battery .spark {
            position: absolute; top: 12%; left: 50%; width: 6px; height: 6px; border-radius: 50%;
            background: radial-gradient(circle, #eafff5 0%, #00ffaa 70%); box-shadow: 0 0 8px #00ffaa;
            transform: translate(-50%, -50%); opacity: 0; pointer-events: none; z-index: 5;
            animation: sparkFly .85s ease-out forwards;
        }
        @keyframes sparkFly {
            0%   { opacity: 0; transform: translate(-50%,-50%) scale(1); }
            15%  { opacity: 1; }
            100% { opacity: 0; transform: translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,-40px))) scale(0.4); }
        }

        /* Odznak „dobito" pod baterií */
        .item-container .done-badge {
            align-self: center; background: #00c389; color: #04241c;
            font-size: 0.72rem; font-weight: 800; letter-spacing: .02em;
            padding: 4px 12px; border-radius: 999px; white-space: nowrap;
            box-shadow: 0 6px 16px rgba(0,0,0,0.35);
            transform: scale(0); transform-origin: center;
            animation: badgePop .5s cubic-bezier(.2,1.4,.4,1) .5s forwards;
        }
        @keyframes badgePop { to { transform: scale(1); } }

        /* Ukazatel postupu – malá baterie, co se plní po článcích */
        .batt-progress {
            display: inline-flex; align-items: center; gap: 12px; margin-top: 20px;
            padding: 8px 18px; border-radius: 999px; font-weight: 800; font-size: 0.9rem;
            color: #cfeede; background: rgba(0,195,137,0.12); border: 1px solid rgba(0,195,137,0.35);
        }
        .batt-progress-label { font-weight: 600; opacity: 0.85; }
        .batt-meter { display: inline-flex; align-items: center; gap: 3px; padding: 3px; position: relative;
            border: 2px solid rgba(0,255,170,0.5); border-radius: 5px; }
        .batt-meter::after { content: ""; position: absolute; right: -6px; top: 50%; transform: translateY(-50%);
            width: 3px; height: 10px; background: rgba(0,255,170,0.5); border-radius: 0 2px 2px 0; }
        .batt-seg { width: 9px; height: 16px; border-radius: 2px; background: rgba(255,255,255,0.12); transition: background .4s ease, box-shadow .4s ease; }
        .batt-seg.on { background: #00e39a; box-shadow: 0 0 8px rgba(0,255,170,0.7); }
        .batt-progress.full { background: #00c389; border-color: #00c389; color: #04241c; box-shadow: 0 0 25px rgba(0,195,137,0.5); }
        .batt-progress.full .batt-meter { border-color: #04241c; }
        .batt-progress.full .batt-meter::after { background: #04241c; }

        /* Konfety + toast */
        .confetti-piece {
            position: fixed; width: 9px; height: 14px; z-index: 3000; border-radius: 2px;
            pointer-events: none; opacity: 0; animation: confettiFly 1.2s ease-out forwards;
        }
        @keyframes confettiFly {
            0%   { opacity: 1; transform: translate(-50%,-50%) rotate(0) scale(1); }
            100% { opacity: 0; transform: translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,0px) + 120px)) rotate(var(--rot,360deg)) scale(0.6); }
        }
        .edc-toast {
            position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
            background: #00c389; color: #04241c; font-weight: 800; padding: 14px 26px; border-radius: 14px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.45); z-index: 4000; opacity: 0; max-width: 90%; text-align: center;
            transition: opacity .4s ease, transform .4s ease;
        }
        .edc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

        /* Respekt k „omezit pohyb" */
        @media (prefers-reduced-motion: reduce) {
            .item-container.done .battery-cell,
            .item-container.done .battery::after { animation: none !important; }
            .item-container .done-badge { animation: none; transform: scale(1); }
        }

        /* WCAG kontrast */
        [data-theme="wcag-aaa"] .item-container .done-badge { background: #ffff00 !important; color: #000 !important; }
        [data-theme="wcag-aaa"] .batt-progress { background: #000 !important; border-color: #ffff00 !important; color: #ffff00 !important; }
        [data-theme="wcag-aaa"] .batt-seg.on { background: #ffff00 !important; box-shadow: none !important; }
        [data-theme="wcag-aaa"] .batt-progress.full { background: #ffff00 !important; color: #000 !important; }