/* das-gaming.com/asset/css/style-light.css */
/* ============================================================
   DAs Gaming - Light Theme (Naval Strike Zen)
   Ocean-inspired Light Mode with subtle animations
   ============================================================ */

/* --- Light Theme Variables (Applied via body.theme-light) --- */
body.theme-light {
    --color-bg: #f4fdff;
    --color-text: #006064;
    --color-text-dark: #37474f;
    --color-accent-orange: #ff6f00;
    --color-accent-indigo: #0277bd;
    --color-card-bg: rgba(255, 255, 255, 0.92);
    --color-card-border: rgba(255, 255, 255, 1.0);
}

/* --- Light Theme Background Canvas --- */
body.theme-light #starfield {
    background-color: #e1f5fe;
    background-image:
        /* Vignette (Subtle corner blue) */
        radial-gradient(circle at 50% 50%, transparent 40%, rgba(2, 119, 189, 0.15) 100%),
        /* Surface Light (White warmth) */
        radial-gradient(circle at var(--light-x, 50%) var(--light-y, 30%), #ffffff 0%, #e0f7fa 30%, transparent var(--light-radius, 80%)),
        /* God Rays (Ultra Faint & Fewer) */
        repeating-conic-gradient(from var(--ray-angle, 0deg) at var(--light-x, 50%) var(--light-y, 30%),
            rgba(255, 255, 255, 0.0) 0deg,
            rgba(255, 255, 255, 0.2) 1deg,
            rgba(179, 229, 252, 0.05) 5deg,
            transparent 10deg,
            transparent 30deg);
    background-size: 100% 100%, 100% 100%, 100% 100%;
    animation: wave-light 8s ease-in-out infinite alternate;
}

@keyframes wave-light {
    0% {
        filter: brightness(1) contrast(1);
    }

    100% {
        filter: brightness(1.1) contrast(1.1);
    }
}

/* --- Light Theme Content Overrides --- */
body.theme-light {
    background-color: var(--color-bg);
    color: var(--color-text);
}

body.theme-light .brand-name {
    background-image:
        repeating-linear-gradient(90deg, #ff6f00 0%, #ffca28 50%, #ff6f00 100%),
        repeating-radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 2px);
    background-size: 100% 100%, 3px 3px;
    filter: drop-shadow(0 0 5px rgba(255, 111, 0, 0.6));
}

body.theme-light .text-grunge {
    color: var(--color-text);
}

body.theme-light .footer-links {
    color: var(--color-text-dark);
}

body.theme-light .footer-links a {
    color: var(--color-text-dark);
}

body.theme-light .footer-links a:hover {
    color: var(--color-accent-orange);
}

/* --- Light Theme Cards --- */
body.theme-light .card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-card-border);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

body.theme-light .card:hover {
    background: rgba(255, 255, 255, 0.98);
    border-color: var(--color-accent-orange);
    box-shadow: 0 10px 20px rgba(0, 188, 212, 0.15);
}

body.theme-light .card-title {
    color: var(--color-accent-orange);
}

body.theme-light .card-desc {
    color: var(--color-text-dark);
}

/* --- Light Theme Filter Buttons --- */
body.theme-light .filter-btn {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 96, 100, 0.3);
    color: #455a64;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

body.theme-light .filter-btn:hover {
    background: rgba(255, 255, 255, 1.0);
    border-color: var(--color-accent-orange);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 188, 212, 0.3);
}

body.theme-light .filter-btn.active {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.8), rgba(26, 35, 126, 0.8));
    border-color: var(--color-accent-orange);
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 188, 212, 0.3);
}

/* --- Light Theme Modal --- */
body.theme-light .modal-overlay {
    background: rgba(0, 0, 0, 0.6);
}

body.theme-light .modal-window {
    background: #f4fdff;
    border-color: var(--color-accent-indigo);
}

body.theme-light .modal-header {
    background: rgba(2, 119, 189, 0.1);
    border-bottom: 1px solid rgba(0, 96, 100, 0.2);
}

body.theme-light .modal-title {
    color: var(--color-text);
}

body.theme-light .modal-btn {
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--color-text);
}

body.theme-light .modal-btn:hover {
    background: rgba(0, 188, 212, 0.2);
    border-color: var(--color-accent-orange);
}

/* Light Theme: Modal Body - iframe background */
body.theme-light .modal-body {
    background: #e1f5fe;
}

/* --- Light Theme Misc --- */
body.theme-light .no-tools {
    color: var(--color-text-dark);
}

body.theme-light .tag-badge {
    opacity: 0.6;
}

body.theme-light .card:hover .tag-badge {
    opacity: 1;
}