:root {
    --background-color: var(--black2-color);
    --text-color: var(--white2-color);
    --primary-color: #CB2040;
    --primary-color-rgb: 203, 32, 64;
    --gradient-color: linear-gradient(90deg,
            var(--primary-color, #CB2040) 0%,
            rgba(137, 59, 133, 0.7) 100%);
    --border-hover-color: rgba(203, 32, 64, 0.3);
    --card-background: linear-gradient(135deg,
            rgba(30, 30, 39, 0.4) 0%,
            rgba(20, 20, 24, 0) 100%);

    /* Common values */
    --card-border-radius: 1rem;
    --card-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    --transition-standard: all 0.3s ease;
    --header-padding: 1.25rem 1.5rem;
    --content-padding: 1.5rem;

    /* Secondary colors */
    --defense-color: rgba(21, 101, 153, 0.8);
    --utility-color: rgba(137, 59, 133, 0.8);
    --passive-color: rgba(60, 64, 93, 0.8);
}

/* Common hover glow effect class */
.hover-glow {
    position: relative;
    --glow-opacity: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
                rgba(255, 255, 255, 0.07),
                rgba(255, 255, 255, 0.03) 30%,
                transparent 60%);
        opacity: var(--glow-opacity);
        transition: opacity 0.4s ease;
        pointer-events: none;
        mix-blend-mode: overlay;
    }

    &:hover {
        box-shadow: 0 15px 25px rgba(0, 0, 0, 0.15);
        transform: translateY(-3px);

        &::before {
            opacity: 1;
        }
    }
}

body {
    background-color: var(--background-color);
}

/* Base card styles - Unified class names */
.card {
    background: var(--card-background);
    border-radius: var(--card-border-radius);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: var(--transition-standard);
    position: relative;
    height: 100%;
    padding: 1.75rem;

    @media (max-width: 1025px) {
        padding: 1.5rem;
    }

    &:hover {
        .card-header h3::after {
            width: 100%;
        }
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 1.5rem;
        position: relative;

        h3 {
            font-size: 1.25rem;
            font-weight: 500;
            letter-spacing: 0.02em;
            position: relative;
            display: inline-block;

            &::after {
                content: '';
                position: absolute;
                bottom: -0.5rem;
                left: 0;
                width: 50%;
                height: 2px;
                background: var(--primary-color, #CB2040);
                opacity: 0.8;
                transform-origin: left;
                transition: width 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
            }
        }
    }
}


/* Unified meter/progress bar base */
.meter {
    height: 6px;
    background: rgba(7, 7, 8, 0.5);
    border-radius: 3px;
    overflow: hidden;
    position: relative;

    .meter-fill {
        height: 100%;
        background: var(--gradient-color);
        border-radius: inherit;
        transition: all 0.3s ease;
        position: relative;
    }
}

/* Character section with improved mobile sidebar */
.character {
    padding-top: 2%;
    position: relative;

    .character-detail {
        display: flex;
        max-width: min(1600px, 90vw);
        margin: 0 auto;
        position: relative;

        @media (max-width: 1025px) {
            flex-direction: column;
            gap: 1rem;
            padding: 0;
        }

        .sidebar {
            position: sticky;
            top: 100px;
            height: fit-content;
            max-height: calc(100vh - 120px);
            align-self: flex-start;
            background: rgba(16, 16, 20, 0.3);
            border-radius: 1rem;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            padding: 1.5rem 0.5rem;
            min-width: 180px;

            @media (max-width: 1025px) {
                flex: none;
                position: sticky;
                top: 0;
                z-index: 3;
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                padding: 0;
                margin: 0 -1rem 1.5rem;
                background: rgba(16, 16, 20, 0.9);
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
                border-radius: 0;
                max-height: none;
                width: calc(100% + 2rem);
                min-width: unset;
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            }

            /* Improved navigation container for mobile */
            .nav-container {
                display: flex;
                flex-direction: column;
                width: 100%;
                max-width: 500px;

                @media (max-width: 1025px) {
                    flex-direction: row;
                    overflow-x: auto;
                    overflow-y: hidden;
                    scrollbar-width: none;
                    -webkit-overflow-scrolling: touch;
                    scroll-snap-type: x mandatory;
                    padding: 2px 0;
                    margin: 0 auto;
                    width: 100%;

                    &::-webkit-scrollbar {
                        display: none;
                    }
                }
            }

            a {
                display: block;
                color: var(--white-color);
                text-decoration: none;
                margin-bottom: 1.5rem;
                font-size: clamp(1rem, 1.1vw, 1.2rem);
                font-weight: 300;
                opacity: 0.4;
                transition: all 0.3s ease-out;
                padding: 0.5rem 1rem;
                border-radius: 0.5rem;

                /* Hide icon by default on desktop */
                &::before {
                    display: none;
                }

                /* Hide touch target by default on desktop */
                .touch-target {
                    display: none;
                }

                @media (max-width: 1025px) {
                    position: relative;
                    margin: 0;
                    padding: 0.6rem 0;
                    flex: 1 0 auto;
                    min-width: max-content;
                    font-weight: 400;
                    font-size: 0.75rem;
                    letter-spacing: 0.02em;
                    opacity: 1;
                    text-align: center;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    scroll-snap-align: center;
                    width: 25%;

                    /* Show icon on mobile */
                    &::before {
                        content: "";
                        display: block;
                        width: 20px;
                        height: 20px;
                        background-position: center;
                        background-repeat: no-repeat;
                        background-size: contain;
                        margin-bottom: 0.25rem;
                        opacity: 0.7;
                        transition: all 0.3s ease;
                    }

                    /* Show touch target on mobile */
                    .touch-target {
                        display: block;
                        position: absolute;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        z-index: 1;
                    }

                    /* Custom icons for each section */
                    &[href="#info"]::before {
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FFFFFF' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z' /%3E%3C/svg%3E");
                    }

                    &[href="#stat"]::before {
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FFFFFF' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5' /%3E%3C/svg%3E");
                    }

                    &[href="#equipment"]::before {
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FFFFFF' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z' /%3E%3C/svg%3E");
                    }

                    &[href="#skill"]::before {
                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23FFFFFF' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z' /%3E%3C/svg%3E");
                    }

                    /* Active indicator line */
                    &::after {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%) scaleX(0);
                        width: 60%;
                        height: 3px;
                        background: var(--primary-color);
                        border-radius: 3px 3px 0 0;
                        opacity: 0;
                        transition: transform 0.3s ease, opacity 0.3s ease;
                    }
                }

                &:last-child {
                    @media (min-width: 769px) {
                        margin-bottom: 0;
                    }
                }

                &:hover {
                    color: var(--primary-hover-color);
                    opacity: 1;
                    font-weight: 400;
                    background: rgba(203, 32, 64, 0.1);
                    transform: translateX(5px);

                    @media (max-width: 1025px) {
                        transform: none;
                        background: none;

                        &::before {
                            opacity: 1;
                            transform: translateY(-2px);
                        }
                    }
                }

                &.active {
                    color: var(--primary-color);
                    opacity: 1;
                    font-weight: 500;
                    transform: none;

                    @media (max-width: 1025px) {
                        &::before {
                            opacity: 1;
                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23CB2040' stroke-width='1.75'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z' /%3E%3C/svg%3E");
                        }

                        &[href="#stat"].active::before {
                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23CB2040' stroke-width='1.75'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5' /%3E%3C/svg%3E");
                        }

                        &[href="#equipment"].active::before {
                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23CB2040' stroke-width='1.75'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M11.42 15.17L17.25 21A2.652 2.652 0 0021 17.25l-5.877-5.877M11.42 15.17l2.496-3.03c.317-.384.74-.626 1.208-.766M11.42 15.17l-4.655 5.653a2.548 2.548 0 11-3.586-3.586l6.837-5.63m5.108-.233c.55-.164 1.163-.188 1.743-.14a4.5 4.5 0 004.486-6.336l-3.276 3.277a3.004 3.004 0 01-2.25-2.25l3.276-3.276a4.5 4.5 0 00-6.336 4.486c.091 1.076-.071 2.264-.904 2.95l-.102.085m-1.745 1.437L5.909 7.5H4.5L2.25 3.75l1.5-1.5L7.5 4.5v1.409l4.26 4.26m-1.745 1.437l1.745-1.437m6.615 8.206L15.75 15.75M4.867 19.125h.008v.008h-.008v-.008z' /%3E%3C/svg%3E");
                        }

                        &[href="#skill"].active::before {
                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23CB2040' stroke-width='1.75'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z' /%3E%3C/svg%3E");
                        }

                        &::after {
                            transform: translateX(-50%) scaleX(1);
                            opacity: 1;
                        }
                    }
                }
            }
        }

        .content {
            flex: 1;
            max-width: 100%;
            padding-left: 2rem;
            min-height: 1000px;

            @media (max-width: 1025px) {
                padding: 0;
            }

            .content-section {
                display: none;
                opacity: 0;
                transition: opacity 0.3s ease-out;

                &.active {
                    display: block;
                    animation: fadeIn 0.4s ease-out forwards;
                }

                &.fade-out {
                    display: block;
                    animation: fadeOut 0.3s ease-out forwards;
                }
            }
        }
    }
}

/* Common grid layout */
.grid-layout {
    display: grid;
    gap: 2rem;

    @media (max-width: 992px) {
        gap: 1.5rem;
    }
}

/* Info section - New Design */
.info-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    margin-bottom: 2rem;

    @media (max-width: 992px) {
        gap: 1.5rem;
    }

    /* Grid layout for info cards */
    .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;

        @media (max-width: 992px) {
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }
    }

    .info-primary,
    .info-secondary {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        @media (max-width: 992px) {
            gap: 1.5rem;
        }
    }

    .info-full-width {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        margin-top: 1rem;

        @media (max-width: 1025px) {
            gap: 1.5rem;
        }
    }
}

/* Profile card with stats - Enhanced style */
.character-profile {
    position: relative;

    .profile-content {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .profile-row {
        display: flex;
        font-size: 0.9rem;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        transition: all 0.3s ease;
        border-left: 3px solid transparent;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg,
                    rgba(203, 32, 64, 0.1) 0%,
                    rgba(16, 16, 20, 0) 100%);
            transition: width 0.3s ease;
            pointer-events: none;
        }

        &:last-child {
            border-bottom: none;
        }

        &:hover {
            background: rgba(16, 16, 20, 0.3);
            border-left: 3px solid rgba(203, 32, 64, 0.8);

            &::before {
                width: 100%;
            }

            .profile-value {
                color: rgba(255, 255, 255, 0.95);
            }
        }
    }

    .profile-label {
        width: 30%;
        font-weight: 500;
        letter-spacing: 0.05em;
        position: relative;
    }

    .profile-value {
        width: 70%;
        color: rgba(255, 255, 255, 0.85);
        font-weight: 300;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        position: relative;
    }

    .profile-phonetic {
        opacity: 0.6;
        font-style: italic;
    }

    .status-indicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgb(32, 203, 85);
        position: relative;

        &::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            background: rgba(32, 203, 85, 0.4);
            animation: pulse 2s infinite;
        }
    }

    .profile-footer {
        margin-top: 1.25rem;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
    }

    .profile-badge {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: linear-gradient(90deg,
                rgba(16, 16, 20, 0.7) 0%,
                rgba(203, 32, 64, 0.1) 100%);
        padding: 0.65rem 0.75rem;
        border-radius: 4px;
        transition: all 0.3s ease;
        flex: 1;
        min-width: 45%;
        max-width: calc(50% - 0.5rem);
        position: relative;
        overflow: hidden;

        &:hover {
            background: linear-gradient(90deg,
                    rgba(16, 16, 20, 0.8) 0%,
                    rgba(203, 32, 64, 0.15) 100%);
        }

        .badge-icon {
            width: 18px;
            height: 18px;
            color: rgba(203, 32, 64, 0.8);
            flex-shrink: 0;
        }

        .badge-text {
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            color: rgba(255, 255, 255, 0.7);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Badge variants */
        &.security,
        &.research {
            .badge-icon {
                color: rgba(32, 140, 203, 0.8);
            }

            &:hover {
                background: linear-gradient(90deg,
                        rgba(16, 16, 20, 0.8) 0%,
                        rgba(32, 140, 203, 0.15) 100%);
            }
        }

        &.security {
            background: linear-gradient(90deg,
                    rgba(16, 16, 20, 0.7) 0%,
                    rgba(32, 140, 203, 0.1) 100%);
        }

        &.research {
            background: linear-gradient(90deg,
                    rgba(16, 16, 20, 0.7) 0%,
                    rgba(137, 59, 133, 0.1) 100%);

            .badge-icon {
                color: rgba(137, 59, 133, 0.8);
            }

            &:hover {
                background: linear-gradient(90deg,
                        rgba(16, 16, 20, 0.8) 0%,
                        rgba(137, 59, 133, 0.15) 100%);
            }
        }
    }
}

/* Attributes card with characteristics - Enhanced style */
.character-attributes {
    position: relative;
    overflow: hidden;

    .attributes-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        position: relative;
        padding-top: 1rem;
    }

    .attribute {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        position: relative;
        transition: transform 0.3s ease;

        &:hover {
            transform: translateX(5px);

            .attribute-header {
                .attribute-label {
                    color: rgba(255, 255, 255, 0.95);
                }

                .attribute-value {
                    color: var(--primary-color);
                }
            }

            .attribute-annotation {
                opacity: 1;
            }
        }

        .attribute-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .attribute-label {
                color: rgba(255, 255, 255, 0.9);
                font-weight: 400;
                transition: color 0.3s ease;
            }

            .attribute-value {
                font-weight: 600;
                color: rgba(255, 255, 255, 0.8);
                transition: all 0.3s ease;
                font-variant-numeric: tabular-nums;

                .value-percent {
                    font-size: 0.75rem;
                    opacity: 0.7;
                    margin-left: 1px;
                }
            }
        }

        .attribute-annotation {
            font-size: 0.75rem;
            font-weight: 200;
            font-style: italic;
            transition: opacity 0.3s ease;
            opacity: 0.5;
        }
    }
}

/* Background card */
.background-card {
    .card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;

        @media (min-width: 1025px) {
            flex-direction: row;
            align-items: center;
        }
    }

    .context-selector {
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        margin-left: auto;
        background: rgba(16, 16, 20, 0.5);
        backdrop-filter: blur(5px);
        padding: 0.25rem;
        border-radius: 0.75rem;
        border: 1px solid rgba(255, 255, 255, 0.05);
        width: 100%;
        max-width: 420px;
        font-size: 0.85rem;

        @media (min-width: 1025px) {
            width: auto;
        }

        .context-selector-btn {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: transparent;
            color: rgba(255, 255, 255, 0.6);
            border: none;
            padding: 0.5rem 0.75rem;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            justify-content: center;

            @media (min-width: 1025px) {
                flex: 0 0 auto;
                padding: 0.5rem 1rem;
            }

            .selector-icon {
                width: 18px;
                height: 18px;
                opacity: 0.7;
                transition: all 0.3s ease;
                background-position: center;
                background-repeat: no-repeat;
                background-size: contain;
                flex-shrink: 0;

                &.overview-icon {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23CB2040' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z' /%3E%3C/svg%3E");
                }

                &.personality-icon {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23CB2040' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z' /%3E%3C/svg%3E");
                }

                &.objectives-icon {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23CB2040' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605' /%3E%3C/svg%3E");
                }
            }

            .selector-label {
                @media (max-width: 480px) {
                    display: none;
                }
            }

            &:hover {
                color: rgba(255, 255, 255, 0.9);
                background-color: rgba(255, 255, 255, 0.05);

                .selector-icon {
                    opacity: 1;
                }
            }

            &.active {
                background-color: rgba(203, 32, 64, 0.15);
                color: rgba(255, 255, 255, 0.9);

                .selector-icon {
                    opacity: 1;
                    transform: scale(1.1);
                }
            }
        }
    }

    .background-content {
        transition: opacity 0.4s ease, transform 0.4s ease;

        &.changing {
            opacity: 0;
            transform: translateY(10px);
        }

        &.active {
            opacity: 1;
            transform: translateY(0);
            animation: fadeInBackground 0.4s ease forwards;
        }

        .info-text {
            text-indent: 3em;
        }
    }
}

/* Quote styling */
.info-quote-container {
    display: flex;
    margin-top: 1rem;

    @media (max-width: 1025px) {
        flex-direction: column;
    }

    .info-quote {
        flex: 1;
        position: relative;
        width: 100%;
    }

    blockquote p {
        min-height: 3.2em;
        width: 100%;
    }

    .quote-decoration {
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;

        @media (max-width: 1025px) {
            display: none;
        }

        .quote-glyph {
            width: 80px;
            height: 80px;
            position: relative;
            opacity: 0.1;

            &::before {
                content: '"';
                position: absolute;
                top: 0;
                left: 0;
                font-size: 150px;
                line-height: 0;
                font-family: Georgia, serif;
                color: var(--primary-color);
            }
        }
    }

    blockquote {
        background: linear-gradient(135deg,
                rgba(16, 16, 20, 0.4) 0%,
                rgba(25, 25, 30, 0.7) 100%);
        border-radius: 1rem;
        padding: 1.75rem 2rem;
        margin: 0;
        border-left: 3px solid var(--primary-color);
        position: relative;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 100%;
        will-change: transform, box-shadow;
        /* Optimize for animation */

        &.fading {
            opacity: 0.3;
            /* transform: translateY(5px); */
            transition: opacity 0.2s ease-out, transform 0.2s ease-out;
        }

        &:hover {
            border-left-width: 8px;
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }

        &.clickable {
            cursor: pointer;

            &::after {
                content: '';
                position: absolute;
                bottom: 15px;
                right: 15px;
                width: 20px;
                height: 20px;
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23CB2040' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.25 19.25 4.75 4.75M19.25 4.75v14.5h-14.5'/%3E%3C/svg%3E");
                background-size: contain;
                background-repeat: no-repeat;
                opacity: 0.5;
                transition: all 0.3s ease;
            }

            &:hover::after {
                opacity: 0.8;
                transform: scale(1.1);
            }
        }

        p {
            font-style: italic;
            line-height: 1.6;
            margin: 0;
            color: var(--white2-color);
            word-wrap: break-word;
            max-width: 1100px;
        }

        cite {
            display: block;
            margin-top: 1rem;
            font-style: normal;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.9);
            text-align: right;
            width: 100%;
        }
    }
}

/* Stats section */
.stat-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .stat-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
        width: 100%;

        @media (max-width: 1025px) {
            grid-template-columns: 1fr;
        }

        .card {
            padding: 1.25rem;

            .stat-info {
                flex: 1;

                .stat-number {
                    font-size: 1.75rem;
                    text-shadow: 0 0 5px rgba(255, 255, 255, 0.15);
                }

                .meter {
                    margin-bottom: 0.75rem;
                }

                .stat-desc {
                    font-size: 0.85rem;
                    opacity: 0.7;
                    line-height: 1.4;
                }
            }
        }
    }

    .visualization {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3rem;
        margin-top: 1.5rem;
        padding: 1.5rem;
        background: linear-gradient(135deg,
                rgba(203, 32, 64, 0.3) 0%,
                rgba(16, 16, 20, 0.85) 100%);
        border-radius: 0.75rem;
        transition: transform 0.3s ease,
            box-shadow 0.3s ease;
        position: relative;

        &:hover {
            .arcai-shard .shard-svg {
                filter: drop-shadow(0 0 15px rgba(203, 32, 64, 0.4));
                transform: scale(1.05);
            }
        }

        @media (max-width: 992px) {
            flex-direction: column;
            text-align: center;
            gap: 2rem;
        }

        .arcai-shard {
            position: relative;
            width: 180px;
            height: 180px;
            flex-shrink: 0;
            transition: transform 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: scale(1.8);

            .shard-svg {
                width: 100%;
                height: 100%;
                filter: drop-shadow(0 0 10px rgba(203, 32, 64, 0.3));
                transition: filter 0.3s ease, transform 0.3s ease;
            }

            &:hover .shard-svg {
                filter: drop-shadow(0 0 15px rgba(203, 32, 64, 0.4));
                transform: scale(1.05);
            }
        }

        .viz-details {
            flex: 1;

            h3 {
                font-size: clamp(1.2rem, 1.4vw, 1.4rem);
                margin-bottom: 1rem;
                font-weight: 400;
            }
        }
    }
}

/* Equipment section */
.equipment-section {
    position: relative;
    margin: 0 -1rem;
    padding: 0 1rem;

    .equipment-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 1.5rem;
    }

    .card {
        display: flex;
        flex-direction: column;

        &:hover {
            .equipment-header h3::after {
                width: 100%;
            }

            .equipment-image img {
                filter: drop-shadow(0 0 15px rgba(203, 32, 64, 0.5));
                transform: scale(1.05);
            }
        }

        &:nth-child(1) {
            .equipment-image {
                img {
                    max-width: 75%;
                }
            }
        }
    }

    .equipment-content {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .equipment-image {
        height: 130px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 2rem 0 1rem 0;

        img {
            max-width: 60%;
            height: auto;
            object-fit: contain;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease;
            /* position: fixed; */
        }
    }

    .equipment-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        margin-top: 2rem;
        margin-bottom: 0.5rem;
    }

    .equipment-desc {
        font-size: 0.9rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.8);
        font-weight: 300;
        margin-bottom: 1.5rem;
    }

    .spec-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        margin-top: auto;

        li {
            display: flex;
            flex-direction: column;
            padding: 0.5rem 0.75rem;
            border-radius: 0.25rem;
            background: rgba(255, 255, 255, 0.05);
            transition: background-color 0.3s ease;

            &:hover {
                background: rgba(203, 32, 64, 0.1);
            }

            span {
                font-size: 0.95rem;
                font-weight: 200;

                &:first-child {
                    color: var(--primary-color);
                    font-size: 0.75rem;
                    margin-bottom: 0.25rem;
                    font-weight: 600;
                }
            }
        }
    }

    @media (min-width: 992px) {
        .equipment-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 1025px) and (max-width: 991px) {
        .equipment-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 767px) {
        .equipment-grid {
            grid-template-columns: 1fr;
        }
    }
}

/* Skills section */
.skill-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: relative;
    margin-top: 1rem;

    .skill-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;

        @media (max-width: 992px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 576px) {
            grid-template-columns: 1fr;
        }
    }

    .skill-card-wrapper {
        transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);

        &:hover {
            transform: translateY(-5px);
        }

        &.passive-wrap,
        &.ultimate-wrap {
            width: 100%;
        }
    }

    .card {
        .card-header {
            h3 {
                padding-right: 60px;
            }
        }

        .skill-details {
            p {
                font-size: 0.9rem;
            }
        }

        &.main {
            min-height: 500px;

            &:hover {
                .skill-icon {
                    background: rgba(255, 255, 255, 0.05);

                    img {
                        transform: scale(1.1);
                        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
                    }

                    .skill-icon-glow {
                        opacity: 0.7;
                        transform: scale(1.1);
                    }
                }

                .skill-desc {
                    color: rgba(255, 255, 255, 0.95);
                }

                .skill-stat {
                    .stat-label {
                        color: rgba(255, 255, 255, 0.8);
                    }

                    .stat-value {
                        color: rgba(255, 255, 255, 0.7);
                    }

                    .meter .meter-fill {
                        box-shadow: 0 0 5px rgba(203, 32, 64, 0.5);
                    }
                }
            }
        }

        &.passive {
            background: linear-gradient(135deg,
                    rgba(60, 64, 93, 0.3) 0%,
                    rgba(16, 16, 20, 0.85) 100%);
            min-height: 180px;

            .skill-content {
                display: flex;
                align-items: center;
                gap: 1rem;

                @media (max-width: 1025px) {
                    flex-direction: column;
                    text-align: center;
                    gap: 0.5rem;
                }
            }

            .skill-icon {
                min-width: 140px;
                height: 100%;
                padding: 0 2rem;

                img {
                    max-height: 160px;
                    filter: drop-shadow(0 0 10px rgba(60, 64, 93, 0.5));
                }
            }

            .skill-details {
                width: auto;

                h3 {
                    margin-bottom: 1rem;
                    font-size: 1.25rem;
                    font-weight: 500;
                    letter-spacing: 0.02em;
                    position: relative;

                    &::after {
                        content: '';
                        position: absolute;
                        bottom: -0.5rem;
                        left: 0;
                        width: 3rem;
                        height: 2px;
                        background: rgba(60, 64, 93, 0.7);
                        transition: width 0.3s ease;

                        @media (max-width: 1025px) {
                            left: 50%;
                            transform: translateX(-50%);
                        }
                    }
                }

                p {
                    line-height: 1.6;
                    color: rgba(255, 255, 255, 0.8);
                    font-weight: 300;
                }
            }

            &:hover {
                background: linear-gradient(135deg,
                        rgba(60, 64, 93, 0.35) 0%,
                        rgba(16, 16, 20, 0.9) 100%);

                .skill-icon img {
                    filter: drop-shadow(0 0 15px rgba(60, 64, 93, 0.8));
                    transform: scale(1.05);
                }

                .skill-details h3::after {
                    width: 5rem;
                }
            }
        }

        &.ultimate {
            background: linear-gradient(135deg,
                    rgba(203, 32, 64, 0.3) 0%,
                    rgba(16, 16, 20, 0.85) 100%);
            min-height: 220px;

            .skill-content {
                display: flex;
                flex-direction: column;

                .skill-body {
                    flex-direction: row;

                    @media (max-width: 1025px) {
                        flex-direction: column;
                    }

                    .skill-icon {
                        max-width: 180px;
                        width: 50%;
                        height: 100%;

                        @media (max-width: 1025px) {
                            max-width: unset;
                            width: 100%;
                            height: 150px;
                        }
                    }

                    .skill-details {
                        display: flex;
                        flex-direction: column;

                        .skill-desc {
                            color: #fff;
                            ;
                        }

                        .skill-stats {
                            grid-template-columns: auto;
                            gap: 0;
                            margin-top: 20px;
                        }
                    }
                }
            }

            img {
                filter: drop-shadow(0 0 15px rgba(203, 32, 64, 0.6));
                transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            }
        }
    }

    .skill-category {
        position: absolute;
        top: 1.5rem;
        right: 1rem;
        font-size: 0.7rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 0.25rem 0.65rem;
        border-radius: 4px;
        transition: all 0.3s ease;
        color: white;

        &.passive-cat {
            background: var(--passive-color);
            box-shadow: 0 3px 8px rgba(60, 64, 93, 0.2);
        }

        &.offense-cat {
            background: rgba(203, 32, 64, 0.8);
            box-shadow: 0 3px 8px rgba(203, 32, 64, 0.2);
        }

        &.defense-cat {
            background: var(--defense-color);
            box-shadow: 0 3px 8px rgba(21, 101, 153, 0.2);
        }

        &.utility-cat {
            background: var(--utility-color);
            box-shadow: 0 3px 8px rgba(137, 59, 133, 0.2);
        }

        &.ultimate-cat {
            background: linear-gradient(90deg, #CB2040, #893B85);
            box-shadow: 0 3px 10px rgba(203, 32, 64, 0.3);
        }
    }

    .skill-content {
        position: relative;
        height: 100%;

        .skill-header {
            min-height: 60px;
            align-items: baseline;
            padding: 0;

        }

        .skill-body {
            height: 90%;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            padding-top: 0.8rem;

            .skill-icon {
                height: 100px;
                margin-bottom: 0.6rem;
                border-radius: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                background: rgba(255, 255, 255, 0.03);
                position: relative;
                overflow: hidden;

                img {
                    height: 150%;
                    width: auto;
                    object-fit: contain;
                    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                        filter 0.4s ease;
                    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
                    position: relative;
                }

                .skill-icon-glow {
                    position: absolute;
                    width: 80%;
                    height: 80%;
                    border-radius: 50%;
                    background: radial-gradient(rgba(255, 255, 255, 0.15), transparent 70%);
                    opacity: 0.5;
                    transition: opacity 0.3s ease, transform 0.3s ease;
                }
            }

            .skill-desc {
                font-size: 0.9rem;
                line-height: 1.5;
                color: rgba(255, 255, 255, 0.75);
                transition: color 0.3s ease;
                margin-bottom: auto;
            }

            .skill-stats {
                margin-bottom: 0.5rem;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 0.75rem;
                margin-top: auto;

                .skill-stat {
                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;

                    .stat-label {
                        font-size: 0.7rem;
                        text-transform: uppercase;
                        letter-spacing: 0.05em;
                        color: rgba(255, 255, 255, 0.6);
                        transition: color 0.3s ease;
                    }

                    .stat-value {
                        font-size: 0.7rem;
                        color: rgba(255, 255, 255, 0.5);
                        text-align: right;
                        transition: color 0.3s ease;
                    }
                }
            }
        }
    }
}



/* Background content transition */
.background-content {
    transition: opacity 0.4s ease;
}

@keyframes fadeInBackground {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animations */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Animation for active status indicator */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.3);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}