:root {
    --content-padding-vertical: 15px;
    --content-padding-horizontal: 20px;

    /* BANNER */
    --badge-border-radius: 20px;
    --badge-padding: 15px;

    --ribbon-width: 90px;
    --ribbon-after-height: 35px;

    /* CARDS */
    --sidebar-padding-horizontal: 14px;
    --sidebar-padding-vertical: 15px;

    --full-card-outline-color: white;
    --full-card-outline-size: 3px;
    --full-card-border-radius: 25px;

    --full-profile-picture-dimension: 65px;
    --full-profile-picture-padding-horizontal: 10px;
    --full-profile-picture-padding-vertical: 10px;

    /* MAIN */
    --board-margin-bottom: 20px;

    /* BTN AREA */
    --team-form-height: 65px;
}

body {
    font-size: 16px;
    background: linear-gradient(135deg, var(--clr-surface-b0), var(--clr-surface-a0));
}

#content {
    display: grid;
    grid-template-columns: auto 1fr auto;

    height: 100vh;
    overflow-x: auto;
    gap: 20px;
    padding: var(--content-padding-vertical) var(--content-padding-horizontal);
}

#content.full-screen {
    display: block;
}

/* SIDEBAR */

#sidebar-left,
#sidebar-right {
    height: calc(100vh - 2 * var(--content-padding-vertical));
    /*
    Since the cards have a slight margin for the outline, we need to increase the
    bottom padding for consistency.
    */
    padding: var(--sidebar-padding-vertical) var(--sidebar-padding-horizontal)
        calc(var(--sidebar-padding-vertical) + var(--full-card-outline-size));
    border-radius: 20px;
}

#sidebar-left {
    background-color: var(--clr-surface-a10);
    box-shadow: 0px 0px 8px var(--clr-surface-a10);
}

#sidebar-right {
    background-color: var(--clr-surface-b10);
    box-shadow: 0px 0px 8px var(--clr-surface-b10);
}

/* FULL CARD */

.full-cards-container {
    display: flex;
    flex-direction: column;

    width: 180px;
    height: 100%;
    gap: 10px;
    border-radius: var(--full-card-border-radius);

    overflow-y: auto;
    font-size: 20px;
}

.full-card {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding: 20px 12px;
    border-radius: var(--full-card-border-radius);
}

.full-card:hover {
    cursor: pointer;
    outline-offset: calc(-1 * var(--full-card-outline-size));
    outline: var(--full-card-outline-size) solid var(--full-card-outline-color);
}

#sidebar-left .full-card {
    background: linear-gradient(
        to bottom,
        var(--clr-surface-a20),
        var(--clr-surface-a50)
    );
}

#sidebar-right .full-card {
    background: linear-gradient(
        to bottom,
        var(--clr-surface-b20),
        var(--clr-surface-b50)
    );
}

.player-strength {
    position: absolute;
    top: 15px;
    left: 15px;

    color: white;
    font-size: 1.1em;
    font-weight: bold;
}

/* PROFILE PICTURE */

.profile-picture-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    width: calc(
        var(--full-profile-picture-dimension) +
            var(--full-profile-picture-padding-horizontal)
    );
    height: calc(
        var(--full-profile-picture-dimension) +
            var(--full-profile-picture-padding-vertical)
    );

    border-radius: 50%;
    border: 3px solid var(--full-card-outline-color);
}

.profile-picture {
    width: var(--full-profile-picture-dimension);
    height: var(--full-profile-picture-dimension);
    border-radius: 50%;
}

#sidebar-left .profile-picture-container {
    background-color: var(--clr-surface-a30);
}

#sidebar-right .profile-picture-container {
    background-color: var(--clr-surface-b30);
}

/* PLAYER NAME */

.full-card .last-name {
    margin-top: 8px;

    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
}

#sidebar-left .full-card .last-name {
    color: var(--clr-primary-a0);
}

#sidebar-right .full-card .last-name {
    color: var(--clr-primary-b0);
}

/* PLAYER STATS */

.stats-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    margin-top: 10px;
    width: 100%;

    user-select: none;
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-description {
    font-size: 0.7em;
    text-transform: uppercase;
}

.stat-value {
    font-size: 0.9em;
    font-family: "Roboto Mono", sans-serif;
    font-weight: bold;
}

#sidebar-left .stat-value {
    color: var(--clr-primary-a0);
}

#sidebar-right .stat-value {
    color: var(--clr-primary-b0);
}

/* MAIN CONTENT */

.main-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* BANNER */

.banner {
    display: flex;
}

.badge {
    display: flex;
    align-items: center;

    gap: 10px;
    padding: 0px 15px;
}

.badge.left {
    flex-direction: row;
    background: linear-gradient(
        90deg,
        var(--clr-surface-a10) 0%,
        var(--clr-surface-a20) 100%
    );
    border-radius: var(--badge-border-radius) 0px 0px var(--badge-border-radius);
}

.badge.right {
    flex-direction: row-reverse;
    background: linear-gradient(
        90deg,
        var(--clr-surface-b20) 0%,
        var(--clr-surface-b10) 100%
    );
    border-radius: 0px var(--badge-border-radius) var(--badge-border-radius) 0px;
}

.badge p {
    width: 220px;

    font-size: 25px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    color: white;
}

.badge .logo {
    width: 40px;
    width: 40px;
}

.ribbon {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: var(--clr-gold);
    width: var(--ribbon-width);

    margin: 0px 0px -10px 0px;
    box-shadow: 0px 0px 8px var(--clr-gold);
}

.ribbon .icon {
    width: 50px;
    height: 50px;
    margin: 5px 0px 8px;
}

.ribbon .score-container {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    user-select: none;
}

.ribbon .score {
    font-family: "Roboto Mono", sans-serif;
    font-size: 18px;
    font-weight: bold;
    width: 100%;
}

.ribbon .score:first-child {
    text-align: right;
}

.ribbon .score:last-child {
    text-align: left;
}

.ribbon .separator {
    min-width: 8px;
    min-height: 2px;
    background-color: black;
}

.ribbon:after {
    position: absolute;
    bottom: calc(-1 * var(--ribbon-after-height));
    left: 50%;
    transform: translateX(-50%);

    content: "";

    border-left: calc(var(--ribbon-width) / 2 + 1px) solid transparent;
    border-right: calc(var(--ribbon-width) / 2 + 1px) solid transparent;
    border-top: calc(1px + var(--ribbon-after-height)) solid var(--clr-gold);

    filter: drop-shadow(1px 1px 5px var(--clr-gold));
}

/* BANNER */

#board {
    display: flex;
    position: relative;
    margin: 80px 0px var(--board-margin-bottom);
}

#board .field {
    height: calc(100vh - 300px);
    border-radius: 10px;
}

#board.full-screen {
    margin: 0px 0px var(--board-margin-bottom);
}

#board.full-screen .field {
    height: calc(
        100vh - 2 * var(--content-padding-vertical) - var(--team-form-height) -
            var(--board-margin-bottom)
    );
    object-fit: contain;
}

.goal-announcement {
    position: absolute;

    top: 50%;
    left: 50%;
    padding: 15px 30px;
    transform: translate(-50%, -50%);

    color: white;
    font-size: 25px;
    text-transform: uppercase;

    border-radius: 20px;

    background: linear-gradient(to top, #ff416c, #ff4b2b);
}

/* MINI CARDS */

.mini-card {
    position: absolute;
    color: red;
    transform: translate(-50%, -50%);

    height: 10%;

    aspect-ratio: 1;
}

.mini-card:hover {
    cursor: pointer;
}

.mini-card.count-5 {
    height: 16%;
}

.mini-card.count-10 {
    height: 14%;
}

.mini-card.count-20 {
    height: 11%;
}

.mini-card.count-50 {
    height: 8%;
}

.mini-card .profile-picture {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid var(--full-card-outline-color);
}

.mini-card.left .profile-picture {
    background-color: var(--clr-surface-a30);
}

.mini-card.right .profile-picture {
    background-color: var(--clr-surface-b30);
}

.mini-card.active .profile-picture {
    border: 4px solid var(--clr-gold);
}

.mini-card .ball {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);

    --dimension: 45%;
    width: var(--dimension);
    height: var(--dimension);
    border-radius: 50%;

    background-color: white;
}

.mini-card.left .ball {
    left: 100%;
}

.mini-card.right .ball {
    left: 0%;
}

/* BUTTON AREA */

.action-area {
    display: flex;
    align-items: center;

    margin-top: auto;
    height: var(--team-form-height);
    gap: 40px;
}

#preferences-form {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;
}

.preferences-container {
    display: flex;
    gap: 15px;
}

.preferences-container select {
    text-align: center;
    padding: 4px 8px;
    border-radius: 5px;
}

.preferences-container select {
    background-color: var(--clr-surface-a50);
}

.btn-container {
    display: flex;
    gap: 20px;
}

.btn-container img {
    transition: filter 0.3s ease;
}

.btn-container button {
    padding: 5px 18px;
    background-color: inherit;

    border-radius: 10px;
    background-color: #ff416c;
}

.btn-container button:hover img {
    filter: invert();
}

.full-screen-btn img {
    --dimension: 20px;
    width: var(--dimension);
    height: var(--dimension);
}

.arrow-btn img {
    --dimension: 24px;
    width: var(--dimension);
    height: var(--dimension);
}

.submit-btn {
    padding: 8px 10px;
    width: 100px;
    border-radius: 10px;

    font-size: 14px;
    letter-spacing: 2%;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    background: linear-gradient(to right, #ff416c, #ff4b2b);
}

.submit-btn:hover {
    outline: 2px solid white;
}

/* DYNAMICS */

@media (max-width: 1400px) {
    #board:not(.full-screen) .field {
        width: calc(50vw);
        height: 100%;
        border-radius: 10px;
    }

    .full-cards-container {
        width: 170px;
        font-size: 18px;
    }

    .badge p {
        width: 180px;
        font-size: 20px;
    }
}

@media (max-width: 1100px) {
    .full-cards-container {
        width: 140px;
        font-size: 16px;
    }

    .profile-picture-container {
        width: calc(
            0.8 * var(--full-profile-picture-dimension) +
                var(--full-profile-picture-padding-horizontal)
        );
        height: calc(
            0.8 * var(--full-profile-picture-dimension) +
                var(--full-profile-picture-padding-vertical)
        );
    }

    .profile-picture {
        width: calc(0.8 * var(--full-profile-picture-dimension));
        height: calc(0.8 * var(--full-profile-picture-dimension));
    }

    .full-card .last-name {
        font-size: 14px;
    }

    .badge p {
        width: 140px;
        font-size: 16px;
    }
}