/*======================================================================================================================
    Fonts
======================================================================================================================*/
@font-face {
    font-family: "RefrigeratorDeluxe";
    src: url('../font/RefrigeratorDeluxe-Light.woff2') format('woff2');
    font-style: normal;
    font-weight: 300;
}

@font-face {
    font-family: "RefrigeratorDeluxe";
    src: url('../font/RefrigeratorDeluxe.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: "RefrigeratorDeluxe";
    src: url('../font/RefrigeratorDeluxe-Bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: "RefrigeratorDeluxe";
    src: url('../font/RefrigeratorDeluxe-ExtraBold.woff2') format('woff2');
    font-style: normal;
    font-weight: 800;
}

@font-face {
    font-family: "RefrigeratorDeluxe";
    src: url('../font/RefrigeratorDeluxe-Heavy.woff2') format('woff2');
    font-style: normal;
    font-weight: 900;
}

@font-face {
    font-family: "NunitoSansCondensed";
    src: url('../font/nunito-sans-10pt-condensed-medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "NunitoSansCondensed";
    src: url('../font/nunito-sans-10pt-condensed-medium-italic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "NunitoSansCondensed";
    src: url('../font/nunito-sans-10pt-condensed-bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/*======================================================================================================================
    Vars
======================================================================================================================*/
:root {
    --logo-color: #283150;
    --logo-font-size: 60px;

    --hero-class-icon-color: #728aa6;
}

/*======================================================================================================================
    Reset defaults
======================================================================================================================*/
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
}

/*======================================================================================================================
    Page background + cursor
======================================================================================================================*/
body {
    background-image:
        url("../img/background-top-left.png"),
        url("../img/background-bottom-right.png"),
        url("../img/background.png");

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;

    background-size:
        300px,
        210px,
        cover;

    background-position:
        left top,
        right -80px bottom,
        center;

    background-attachment: fixed;
    cursor: url("../img/cursor.png"), auto;
}

/*======================================================================================================================
    Root container
======================================================================================================================*/
#container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    min-width: 100vw;
}

/*======================================================================================================================
    Countdown overlay
======================================================================================================================*/
#countdown-overlay-container {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    flex-direction: column;
    gap: 16px;
    font-family: "RefrigeratorDeluxe", sans-serif;
}

#countdown-overlay-container.visible {
    display: flex;
}

#countdown-overlay-container__text {
    font-size: 180px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow:
            0 0 80px rgba(254, 222, 50, 1),
            0 0 30px rgba(239, 198, 37, 0.7);
    will-change: transform, opacity;
    transition: font-size 0s, letter-spacing 0s;
}

#countdown-overlay-container__text.phrase-mode {
    font-size: clamp(36px, 7vw, 78px);
    letter-spacing: 0.25em;
}

/*======================================================================================================================
    Header
======================================================================================================================*/
#header-container {
    margin-top: 50px;
    margin-bottom: 25px;
    font-family: "RefrigeratorDeluxe", sans-serif;
    font-weight: 900;
    font-size: var(--logo-font-size);
    color: var(--logo-color);
    font-style: oblique;
}

/*======================================================================================================================
    Main
======================================================================================================================*/
#main-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100vw;
    gap: 30px;
    margin-bottom: 50px;
}

.team-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 450px;
    flex: 0 0 auto;
}

#hero-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

/*======================================================================================================================
    Teams
======================================================================================================================*/
.team-container__header {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: 53px;
    width: 100%;
    background-color: #717c98;
    overflow: hidden;
}

.team-container__name {
    height: 100%;
    max-width: 60%;
    text-align: left;
    font-family: "RefrigeratorDeluxe", ui-sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20pt;
    color: white;
    background: #525f7e;
    border: none;
    cursor: url('../img/marvel-rivals/Img_Cursor.png'), auto;
    padding-left: 13px;
    text-transform: uppercase;
}

.team-container__name:focus {
    outline: none;
    background: #525f7e;
}

/*======================================================================================================================
    Player card
======================================================================================================================*/
.player-card {
    height: 92px;
    width: 100%;
    background-color: white;
    border-top: 5px solid #e4e6f6;
    border-bottom: 5px solid #e4e6f6;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-left: 13px;
    padding-right: 13px;
    gap: 15px;
}

.player-card__role-icon {
    display: block;
    width: 42px;
    height: 42px;
}

.player-card__hero-icon-wrapper {
    min-width: 64px;
    width: 64px;
    height: 64px;
    border: 2px solid #9fa6b9;
    background-color: #b1a2a8;
    overflow: hidden;
}

.player-card__hero-icon {
    width: 100%;
    height: 100%;
}

.player-card__name {
    background: none;
    border: none;
    height: 100%;
    width: 225px;
    text-align: left;
    font-weight: 600;
    font-family: "NunitoSansCondensed", ui-sans-serif;
    font-style: normal;
    font-size: 20pt;
    color: #161c26;
    cursor: url('../img/marvel-rivals/Img_Cursor.png'), auto;
}

.player-card__name.spinning {
    color: #faa542;
}

.player-card__name:focus {
    background: none;
    outline: none;
}

.player-card__spin-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    width: 48px;
    height: 48px;
    background: none;
    border: none;
    cursor: url('../img/marvel-rivals/Img_Cursor.png'), auto;
    padding: 0;
}

.player-card__spin-button img {
    transition: transform 0.3s ease;
}

.player-card__spin-button:disabled {
    opacity: 0.5;

}

.player-card__spin-button:not(:disabled):hover img {
    /*transform: scale(1.1);*/
    /*box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.3);*/
    /*filter: drop-shadow(0 0 5px #b7e4bb);*/
    /*transform: rotate(180deg);*/
    transform: rotate(90deg);
}

/*======================================================================================================================
    Team 1
======================================================================================================================*/
#team1-container {
    margin-left: 30px;
}

/*======================================================================================================================
    Hero roster
======================================================================================================================*/
#hero-container__header {
    height: 53px;
    width: 100%;
    background-color: #191c25;
}

#hero-container__header span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    font-family: "RefrigeratorDeluxe", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20pt;
    color: white;
    text-transform: uppercase;
}

#hero-container__main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    overflow-y: auto;
    background-color: #a2acc8;
    flex: 1;
    min-width: 0;
    gap: 20px;
    padding: 20px;
}

#hero-container__footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 96px;
    width: 100%;
    background-color: #191c25;
    gap: 25px;
}

/*======================================================================================================================
    Hero card
======================================================================================================================*/
.hero-card {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    /*box-shadow: 2px 2px 5px 5px rgb(251 219 40);*/
    position: relative;
}

.hero-card.dimmed {
    opacity: 0.15;
    filter: grayscale(1);
    transform: scale(0.97);
}

.hero-card.highlighted {
    /*border-color: #c8c4ff;
    transform: scale(1.12);
    z-index: 2;
    box-shadow: 0 0 16px rgba(180, 175, 255, 0.45);
    opacity: 1;
    filter: none;*/
    animation: pulse 0.25s ease;
}

.hero-card.winner {
    border-color: #ffd700;
    transform: scale(1.25);
    z-index: 3;
    box-shadow: 0 0 25px 25px rgba(255, 215, 0, 0.55);
    opacity: 1;
    filter: none;
}

.hero-card__background {
    display: block;
    width: 100%;
    height: 100%;
    /*background-color: rgb(27, 27, 31, 0.7);*/
    background-image: url('../img/hero-icon-background.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
}

.hero-card__icon {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
}

.hero-card__border {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("/img/marvel-rivals/hero-border.png");
    position: absolute;
}

/*======================================================================================================================
    Hero roster buttons
======================================================================================================================*/
#role-swap-button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    border: none;
    background: url("../img/marvel-rivals/btn1.png");
    width: 367px;
    height: 67px;
    gap: 10px;
    font-family: "RefrigeratorDeluxe", ui-sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20pt;
    color: white;
    text-transform: uppercase;
    cursor: url("../img/marvel-rivals/Img_Cursor.png"), auto;
}

#role-swap-button:hover {
    outline: none;
    /*transform: scale(1.01);*/
    /* Start the shake animation and make the animation last for 0.5 seconds */
    animation: shake 0.6s;

    /* When the animation is finished, start again */
    animation-iteration-count: infinite;
}

#spin-all-button {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    border: none;
    background: url("../img/marvel-rivals/btn4-sm.png");
    width: 367px;
    height: 67px;
    gap: 10px;
    font-family: "RefrigeratorDeluxe", ui-sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20pt;
    color: #181a26;
    text-transform: uppercase;
    cursor: url("../img/marvel-rivals/Img_Cursor.png"), auto;
}

#spin-all-button:hover {
    outline: none;
    transform: scale(1.01);
}

/*======================================================================================================================
    Team 2
======================================================================================================================*/
#team2-container {
    margin-right: 30px;
}

/*======================================================================================================================
    Footer
======================================================================================================================*/
#footer-container {
    height: 75px;
    width: 100%;
    background-color: #0f101c;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#footer-container__copyright {
    color: #c6c2c5;
    font-size: 12pt;
    font-weight: 600;
    font-family: "NunitoSansCondensed", sans-serif;
}

#footer-container__copyright-netease {
    color: #c6c2c5;
    font-size: 10pt;
    font-weight: 600;
    font-family: "NunitoSansCondensed", sans-serif;
}

/*======================================================================================================================
    Animations
======================================================================================================================*/
@keyframes pulse {
    0% {
        transform: scale(1.00);
    }
    40% {
        transform: scale(1.22);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1.00);
    }
}

@keyframes winner-scale {
    0% {
        transform: scale(1.00);
    }
    40% {
        transform: scale(1.45);
    }
    70% {
        transform: scale(1.18);
    }
    100% {
        transform: scale(1.28);
    }
}

@keyframes winner-glow {
    from {
        box-shadow:
                0 0 10px gold,
                0 0 25px gold;
        filter: brightness(1);
    }
    to {
        box-shadow:
                0 0 20px gold,
                0 0 45px orange,
                0 0 70px gold;
        filter: brightness(1.3);
    }
}

/*
  3-phase animation:
  [0–18%]  rushes in from tiny              — fast ease-out
  [18–50%] hovers at "face level", slows    — very gentle ease
  [50–100%] accelerates outward, dissolves  — ease-in, grows huge
*/
@keyframes countdown-zoom {
    0% {
        transform: scale(0.08);
        opacity: 0;
        animation-timing-function: cubic-bezier(0.1, 0, 0.25, 1);
    }
    18% {
        transform: scale(1.05);
        opacity: 1;
        animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
    }
    50% {
        transform: scale(1.18);
        opacity: 1;
        animation-timing-function: cubic-bezier(0.4, 0, 1, 0.7);
    }
    100% {
        transform: scale(9);
        opacity: 0;
    }
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }
    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }
    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }
    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }
    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }
    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }
    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }
    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }
    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }
    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }
    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}