@property --mode-switch-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.mode-switch {
    display: grid;
    gap: 6px;
    border: 1px solid rgba(188, 211, 230, 0.16);
    border-radius: 14px;
    padding: 6px;
    background: rgba(76, 83, 99, 0.48);
    backdrop-filter: blur(10px);
}

.mode-switch-option {
    --mode-accent-a: #4fd4ee;
    --mode-accent-b: #fcacd3;
    position: relative;
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    color: rgba(245, 247, 250, 0.72);
    background: linear-gradient(180deg, rgba(66, 73, 88, 0.96), rgba(43, 49, 62, 0.96));
    font-size: 0.82rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.mode-switch-option > * {
    position: relative;
    z-index: 1;
}

.mode-switch-option[data-mode="season"] {
    --mode-accent-a: #59f5ff;
    --mode-accent-b: #ff77dc;
}

.mode-switch-option[data-mode="pvp"] {
    --mode-accent-a: #ff4f6d;
    --mode-accent-b: #ffb1bd;
}

.mode-switch-option[data-mode="pve"] {
    --mode-accent-a: #51e88a;
    --mode-accent-b: #c5f95d;
}

.mode-switch-option[data-mode="arena"] {
    --mode-accent-a: #4f8dff;
    --mode-accent-b: #6ce7ff;
}

.mode-switch-option::before {
    content: none;
}

@supports ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .mode-switch-option::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        padding: 1px;
        background: conic-gradient(
            from var(--mode-switch-angle),
            transparent 0 18%,
            var(--mode-accent-a) 28%,
            var(--mode-accent-b) 42%,
            transparent 54% 100%
        );
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
    }

    .mode-switch-option[data-mode="season"]::before {
        background: conic-gradient(
            from var(--mode-switch-angle),
            transparent 0 8%,
            #58f5ff 16%,
            #fff 24%,
            #ff77dc 34%,
            #a986ff 44%,
            #dffcff 53%,
            transparent 64% 100%
        );
    }
}

.mode-switch-option:hover,
.mode-switch-option:focus-visible {
    color: #fff;
    border-color: color-mix(in srgb, var(--mode-accent-a) 58%, transparent);
    background: linear-gradient(180deg, rgba(78, 86, 102, 0.98), rgba(50, 57, 71, 0.98));
    text-decoration: none;
}

.mode-switch-option:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--mode-accent-a) 82%, white);
    outline-offset: 3px;
}

.mode-switch-option-active {
    color: #fff;
    border-color: color-mix(in srgb, var(--mode-accent-a) 68%, transparent);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--mode-accent-a) 14%, rgba(68, 75, 90, 0.98)),
        color-mix(in srgb, var(--mode-accent-a) 7%, rgba(42, 49, 62, 0.98))
    );
    box-shadow: 0 0 18px color-mix(in srgb, var(--mode-accent-a) 24%, transparent);
}

:root[data-theme="dark"] .mode-switch {
    border-color: rgba(188, 211, 230, 0.12);
    background: transparent;
}

:root[data-theme="dark"] .mode-switch-option {
    color: rgba(241, 244, 248, 0.68);
    background: linear-gradient(180deg, rgba(35, 40, 51, 0.98), rgba(18, 22, 30, 0.98));
}

:root[data-theme="dark"] .mode-switch-option:hover,
:root[data-theme="dark"] .mode-switch-option:focus-visible {
    background: linear-gradient(180deg, rgba(45, 51, 64, 0.98), rgba(24, 29, 38, 0.98));
}

:root[data-theme="dark"] .mode-switch-option-active {
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--mode-accent-a) 12%, rgba(38, 44, 56, 0.98)),
        color-mix(in srgb, var(--mode-accent-a) 6%, rgba(18, 22, 30, 0.98))
    );
}

.mode-switch-option-active::before,
.mode-switch-option:hover::before,
.mode-switch-option:focus-visible::before {
    opacity: 0.92;
    animation: modeSwitchBorderSpin 2.8s linear infinite;
}

.mode-switch-label-compact {
    display: none;
}

.menu-label-compact {
    display: none;
}

@keyframes modeSwitchBorderSpin {
    to { --mode-switch-angle: 1turn; }
}

@media (prefers-reduced-motion: reduce) {
    .mode-switch-option::before {
        animation: none !important;
        --mode-switch-angle: 24deg;
    }
}

@media (max-width: 700px) {
    .player-profile-mode-switch .mode-switch-label-full {
        display: none;
    }

    .player-profile-mode-switch .mode-switch-label-compact {
        display: inline;
    }
}

@media (max-width: 575.98px) {
    .menu-label-full {
        display: none;
    }

    .menu-label-compact {
        display: inline;
    }
}