/* Variables globales */
:root {
    --main-color: #55A1CF;
    --main-color-darker: #1B6C9D;
    --contrast-color: white;
    --card-size: 7em;
    --card-radius: .5em;
    --base-ui-radius: .3rem;
}

/* Reset rapide */
*, ::after, ::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
input, button, textarea, select {
    font: inherit;
    color: inherit;
}
input:focus, button:focus, textarea:focus, select:focus {
    /* outline: solid 1px black; */
    outline: none;
    box-shadow: inset 0 0 0 4px var(--main-color-darker);
}
::placeholder {
    color: rgba(0,0,0,.5);
}

/* Design */
body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--main-color);
    background: linear-gradient(#8DA1A5, #FEFEFE);

    /* le body doit faire la hauteur du viewport */
    height: 100vh;
    
    /* distribuer verticalement les éléments dans le viewport */
    display: flex;
    flex-direction: column;
}
header {
    margin-top: auto; /* auto sur un margin d'un flex item = distribution de l'espace disponible dans cette direction */
    background-color: white;
    padding: 1rem;
}
main {
    flex-grow: 1; /* on force le flex item à occuper l'espace */
}
.game {
    height: 100%;
    /* le combo de 3 lignes ci dessous place le flex item au centre de son parent ! */
    /* à condition que l'item soit seul */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* GAME STATES */
.game > section { display: none }
[data-game-state="1"] .hall-of-fame { display: flex;}
[data-game-state="2"] .cards { display: flex;}
[data-game-state="3"] .game-over { display: flex;}
[data-game-state="4"] .victory { display: flex;}

.hall-of-fame,
.game-over,
.victory {
    border-radius: var(--base-ui-radius);
    flex-basis: 20em;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgba(255,255,255,.7);
    padding: 2em;
    box-shadow: 0 .9em .5em -.6em rgba(0,0,0,.1);
}
.section-title {
    margin-bottom: 1em;
    text-align: center;
}

/* CARDS */
.cards {
    font-size: 1em;
    display: flex;
    flex-wrap: wrap; /* on autorise les items flex à revenir à la ligne si nécéssaire */
    width: calc(var(--card-size) * 7);
    /* on souhaite 7 items par ligne pour 28 paires, donc on définit la largeur à 7x largeur d'un item */
    justify-content: center;
}

.card-outer {
    width: var(--card-size);
    height: var(--card-size);
    padding: .5em;
    aspect-ratio: 1/1;
    /* 1/1 est un ratio carré, on pourrait utiliser 4/3 par ex. */
    /* cela evite de calculer soi-meme la 2eme dimension */
    perspective: 10em;
    /* L'element card enfant, va pivoter sur l'axe Y, pour donner un effet 3D, on définit une perspective sur le parent */
}


.card-outer .card {
    border-radius: var(--card-radius);
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: center;
    transition:
        rotate 0.4s ease-in-out,
        scale 0.5s ease
    ;
    cursor: pointer;
    box-shadow:
        0 2px 0 rgba(0,0,0,.3),
        0 .7em .5em -.3em rgba(0,0,0,.2)
    ;
}
.card-outer:not(.discovered) .card:hover {
    outline: solid 5px var(--main-color);
}
.card-outer.discovered .card {
    scale: .9;
    cursor: initial;
}
.card-outer.visible .card {
    rotate: y 180deg;
}
.card-outer .face {
    border-radius: var(--card-radius);
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
.card-outer .face.front {
    z-index: 1;
    background-color: white;
    rotate: y -180deg;
    background-image: url(../img/cards.png);
    background-size: 100%;
    background-position: 0 -100%;
}
@media (max-width:400px) {
    .cards {
        font-size: .5em;
    }
    .card-outer {
        padding: .25em;
    }
    .card-outer:not(.discovered) .card:hover {
        outline: none;
    }
}
/* la face de la carte est déterminée par un attribut personnalisé data-card */
/* on fait simplement glisser le sprite pour en afficher la bonne partie */
.card-outer[data-id="1"] .face.front { background-position: 0 -100%; }
.card-outer[data-id="1"] .face.front { background-position: 0 -100%; }
.card-outer[data-id="2"] .face.front { background-position: 0 -200%; }
.card-outer[data-id="3"] .face.front { background-position: 0 -300%; }
.card-outer[data-id="4"] .face.front { background-position: 0 -400%; }
.card-outer[data-id="5"] .face.front { background-position: 0 -500%; }
.card-outer[data-id="6"] .face.front { background-position: 0 -600%; }
.card-outer[data-id="7"] .face.front { background-position: 0 -700%; }
.card-outer[data-id="8"] .face.front { background-position: 0 -800%; }
.card-outer[data-id="9"] .face.front { background-position: 0 -900%; }
.card-outer[data-id="10"] .face.front { background-position: 0 -1000%; }
.card-outer[data-id="11"] .face.front { background-position: 0 -1100%; }
.card-outer[data-id="12"] .face.front { background-position: 0 -1200%; }
.card-outer[data-id="13"] .face.front { background-position: 0 -1300%; }
.card-outer[data-id="14"] .face.front { background-position: 0 -1400%; }
.card-outer[data-id="15"] .face.front { background-position: 0 -1500%; }
.card-outer[data-id="16"] .face.front { background-position: 0 -1600%; }
.card-outer[data-id="17"] .face.front { background-position: 0 -1700%; }
.card-outer[data-id="18"] .face.front { background-position: 0 -1800%; }

.card-outer .face.back {
    z-index: 2;
    background-color: #ccc;
    background-image: url(../img/card-back-01.png);
    background-size: 100% 100%;
    background-position: center;
}

/* HALL OF FAME */
.hall-of-fame {
    flex-basis: 20em;
}
.hall-of-fame ol {
    border-bottom: solid 2px var(--main-color);
    width: 100%;
    list-style-type: none;
}
.hall-of-fame ol li .player{
    display: flex;
    gap: 1em;
    padding: .5em 1em;
    border-top: solid 2px var(--main-color);
}
.hall-of-fame ol li:first-child {
    color: white;
    background-color: #55A1CF;
}
.player-rank {
    
}
.player-name {
    font-weight: bold;
    text-align: start;
}
.player-score {
    margin-left: auto;
}

/* VICTORY */
.victory {
    flex-basis: 30em;
}
.victory form {
   display: flex
}
.victory input {
    border-radius: var(--base-ui-radius) 0 0 var(--base-ui-radius);
    border: none;
    padding: 1em;
}
.victory .btn {
    border-radius: 0 var(--base-ui-radius) var(--base-ui-radius) 0;
    border: none;
    padding: 1em;
}
.victory .message {
    font-size: 1.2em;
    margin-bottom: 1em;
    font-weight: bold;
}

/* GAME OVER */
.game-over {
    padding: 5em;
    position: relative;
}
.game-over .close-btn {
    position: absolute;
    padding: .5em;
    line-height: 1em;
    top: .5em;
    right: .5em;
}

/* UI */
.ui {
    user-select: none;
    padding: 1rem 5rem;
    position: relative;
    display: flex;
    gap: 1em;
    justify-content: space-between;
    align-items: center;
}
.game-title {
    margin-right: auto;
}
.btn {
    cursor: pointer;
    border-radius: var(--base-ui-radius);
    border: none;
    padding: 1em;
    font-weight: bold;
    background-color: var(--main-color);
    color: var(--contrast-color);
}
.btn:hover {
    background-color: var(--main-color-darker);
}
.timer-bar {
    position: absolute;
    top: -.5rem;
    left: 0;
    height: .5rem;
    width: 100%;
    background-color: gray;
    overflow: hidden;
}
.timer-bar .bar {
    height: 100%;
    width: 0%;
    background-color: var(--main-color);
    transition: 0.1s linear;
}

.ui-element {
    display: flex;
    flex-direction: column;
    font-weight: bold;
    line-height: 1.4em;
}
.timer {
    width: 9em;
}
.score {
    width: 10em;
}
.ui-element-title {
    text-transform: uppercase;
    font-size: .8em;
    color: #8DA1A5;
}
.ui-element-content {
    color: var(--main-color);
    font-size: 2em;
}

@media (max-width:400px) {
    .ui {
        font-size: .7em;
        padding: .5rem;
        flex-wrap: wrap;
    }
    .ui .btn {
        margin-top: .5em;
        width: 100%;
        font-size: 1.3em;
    }
    .timer,
    .score {
        width: fit-content;
    }
    .game-title {
        font-size: 1.5em;
        width: 100%;
    }
}