/* #region FUENTES */
@font-face {
    font-family: "SF Arborcrest";
    src: url("../fonts/SF\ Arborcrest.ttf");
}

/* #endregion */

/* #region GENERAL */

:root {
    --font-title: "SF Arborcrest";
    --block-color: #81127bad;
    --block-text: #f3f3f3;
    --block-shadow: #fb0dff46;
    --block-border: #ffa5f7d8;
    --title-color: #00cce7;
    --accent-color: #4bc8b7;
}

::selection {
    background: var(--title-color);
    color: #1a2a1a;
}

::-moz-selection {
    background: var(--title-color);
    color: #1a2a1a;
}

* {
    cursor: url("../cursors/III.cur") 0 0, auto !important;
}

body {
    &::before {
        background-image: url("../images/main/background_VC.webp");
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        transform: scale(1.1);
        z-index: -1;
    }

    &::after {
        content: "";
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 80px;
        background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--block-border) 70%, var(--block-color)));
    }

    & .block,
    #radioInfo {
        background: linear-gradient(135deg,
                #1a0a2ed0 0%,
                #0d1a3ad0 50%,
                #0a2a2ad0 100%);
    }
}

.text-container {
    & h2 {
        text-shadow: 3px 3px 10px #000000;
    }
}

/* #endregion */

/* #region FICHA TÉCNICA */

span.table-platforms {
    text-shadow: 1px 1px 2px #000000
}

/* #endregion */

/* #region 100% CHECKLIST */



/* #endregion */

/* #region ARTWORKS */
/* #endregion */

/* #region HERRAMIENTAS Y MODS */

details.mod summary img {
    clip-path: polygon(50% 0%,
            75% 6.7%,
            93.3% 25%,
            100% 50%,
            93.3% 75%,
            75% 93.3%,
            50% 100%,
            25% 93.3%,
            6.7% 75%,
            0% 50%,
            6.7% 25%,
            25% 6.7%);
    background: radial-gradient(circle 50px at center, #60a5d5, #c77ee8);
}


.mods-container {
    & details {
        &[open] {
            & .mod-expanded {
                & nav {
                    & a {
                        & span {
                            color: color-mix(in srgb, var(--accent-color) 75%, var(--block-text));
                        }

                        &.active {
                            border: 2px solid color-mix(in srgb, var(--block-border) 45%, transparent);
                            background: color-mix(in srgb, var(--block-border) 60%, transparent);
                        }
                    }
                }
            }
        }
    }
}


.tab-content[data-content="info"].active .btn-info,
.tab-content[data-content="download"].active .btn-download {
    background: color-mix(in srgb, var(--block-border) 80%, transparent);

    & .material-symbols-rounded {
        color: color-mix(in srgb, var(--accent-color) 40%, var(--block-text));
    }
}

/* #endregion */

/* #region LOGROS */


/* #endregion */

/* #region MAPA */
.map-wrapper {
    background: linear-gradient(135deg, rgba(41, 2, 51, 0.685) 5%, rgb(0, 0, 0));

    & .map-container {
        background-color: #99caff;
    }
}

/* #endregion */

/* #region RADIO */

#radioGrid {
    transform: skew(-20deg);
    border-radius: 0;
    gap: 2em;
    width: fit-content;
    margin-inline: auto;

    & .radio-card {
        transform: skew(20deg);
    }
}

/* #endregion */

/* #region TRUCOS */


/* #endregion */

/* #region MEDIA QUERIES  */

@media (max-width: 1350px) {

    body {
        &::before {
            background-image: url("../images/main/background_VC-mobile.webp");
        }
    }

    #radioGrid {
        transform: none;

        & .radio-card {
            transform: none;
        }
    }
}

/* #endregion */