/* Global Page Configurations */
@font-face {
    font-family: 'Ovo';
    src: url('https://raw.githubusercontent.com/DamoTheDonut/7WondersScoreCard/refs/heads/main/font/Ovo-Regular.ttf');
}

[hidden] {
  display: none !important; /* to ensure it stays hidden */
}

* {
    font-family: 'Ovo', serif;
    margin: 0;
}
body {
    height: -webkit-fill-available;
    height: 100dvh;
    width: -webkit-fill-available;
    width: 100dvw;
    overflow: hidden;

    background-image: url(images/Backgrounds/default.webp);
    background-position: center;
    background-size: cover;
    backdrop-filter: brightness(80%) blur(3px) saturate(150%);

    
    display: flex;
    flex-direction: column;
}

button {
    padding: 0px 1rem;
    border-radius: 1.5rem;
    border: none;
    background-color: #FFFFFF10;
    color: white;
    font-weight: bold;
    box-shadow: inset 0.2rem 0.2rem 0.1rem rgba(255, 255, 255, 0.2), inset -0.2rem -0.2rem 0.1rem rgba(0, 0, 0, 0.3); 
}
button:hover{
    background-color: #FFFFFF20;
}
button:active{
    box-shadow: inset 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.3), inset -0.1rem -0.1rem 0.1rem rgba(255, 255, 255, 0.2); 
}



/* Header Configurations */
header {
    height: 3rem;
    flex: 0 0 3rem;
    padding: 0.5rem;
    background-color: #00000050;
    box-shadow:  0 0.2rem 0.2rem hsl(49, 95%, 65%), 0 0.3rem hsl(42, 92%, 50%);
    margin-bottom: 0.3rem;
    font-size: 1rem;

    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    color: white;
}



/* Main Content Configurations */
main {
    flex-grow: 1;
    font-size: 3vmin;

    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 3rem;
}

input {
    outline: none;
    background-color: #00000050;
    border: none;
    border-radius: 1.4vmin;
    appearance: textfield;
    color: inherit;
    box-shadow: inset 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.3), inset -0.1rem -0.1rem 0.1rem rgba(255, 255, 255, 0.2); 
}

.fadeOut {
    opacity: 0% !important;
    transform: translateZ(0);
    pointer-events: none;
}

/* Score Card configuration */
.scoreCard {
    display: flex;
    text-align: center;
    flex-grow: 1;
    max-height: 66dvw;
    
    border: black 0.2rem solid;
    border-radius: 3vmin;   
    color: white;
    box-shadow: 0.3rem 0.3rem 0.8rem hsla(0, 0%, 0%, 50%);
    transition: opacity 600ms ease;
}
.scoreCardIcons, .scoreCardPlayer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    flex-shrink: 1;
}

.scoreCardIcons {
    flex: 0 1 120px;
}
.scoreCardPlayer {
    flex: 1 1 120px;
    container-type: size;
}

.scoreCard > * > * { /* all the div's in score card player and icons*/
    flex: 1 1;
    container-type: size;
}

.scoreCard img {
    margin-top: 10cqh;
    max-height: 80cqh;
    max-width: 90cqw;
}


.scoreCard > *:not(:first-child) { /* Adds vertical lines to scoreCard */
    border-left: black 0.2rem solid;
}

.scoreCard > * > *:not(:first-child) { /* Adds horizontal lines*/
    border-top: black 0.2rem solid;
}

.scoreCardPlayer > div {
    display: flex;
    align-items: stretch;
    justify-content: center;
}
.scoreCardPlayer >   :first-child, .scoreCardPlayer > :last-child {
    font-size: min(18cqw, 5cqh);
    font-weight: bolder;
    display: grid;
    place-items: center;
    padding: 0;
}
.scoreCardPlayer input {
    flex: 1 1;
    width: 0;
    margin: 20cqh;
    font-size: 30cqh;
    text-align: center;
}

.sum {
    color: transparent;
    transition: ease color 2s;
}

.revealed {
    color: white !important ;
}

/* Scoreboard Colors */
.scoreCard > * > * {
    background-color: #00030050;
}
.scoreCard > * > *:nth-child(2) {
    background-color: hsla(0, 100%, 50%, 0.4);
}
.scoreCard > * > *:nth-child(5) {
    background-color: hsla(220, 100%, 50%, 0.4);
}
.scoreCard > * > *:nth-child(6) {
    background-color: hsla(40, 100%, 50%, 0.4);
}
.scoreCard > * > *:nth-child(7) {
    background-color: hsla(270, 100%, 50%, 0.4);
}
.scoreCard > * > *:nth-child(8) {
    background-color: hsla(110, 100%, 50%, 0.4);
}

.scoreCard > *:nth-child(even) {
  box-shadow: inset 100cqw 0 hsla(0, 0%, 0%, 0.3);
}

.scoreCard > :last-child {
    border-radius:  0 calc(3vmin - 0.2rem) calc(3vmin - 0.2rem) 0;
}

/* Scoreboard Round Corners */
.scoreCard > :first-child > :first-child{
    border-radius: calc(3vmin - 0.2rem) 0 0 0;
}

.scoreCard > :first-child > :last-child{
    border-radius: 0 0 0 calc(3vmin - 0.2rem);
}

.scoreCard > :last-child > :first-child{
    border-radius: 0 calc(3vmin - 0.2rem) 0 0;
}

.scoreCard > :last-child > :last-child{
    border-radius: 0 0 calc(3vmin - 0.2rem) 0;
}

/* New Game Options */
.gameOptions {

    display: flex;
    flex-direction: column;
    container-type: size;
    flex-grow: 1;
    max-height: 66dvw;
    padding: 2rem;
    margin: 0 10dvw;
    max-width: 70dvh;
    text-align: center;
    
    border-radius: 6vmin;   
    color: white;
    box-shadow: 0.3rem 0.3rem 0.8rem hsla(0, 0%, 0%, 50%);
    background-color: #00030050;
    box-shadow:
        inset 0.3rem 0.3rem 0.3rem hsla(0, 0%, 100%, 0.3),
        inset -0.5rem -0.5rem 0.3rem rgba(0, 0, 0, 0.4),
        0.3rem 0.3rem 0.8rem hsla(0, 0%, 0%, 50%); 
    transition: opacity 600ms ease;
    
}

.gameOptions > :last-child {
    display: flex;
    gap: 1em;
}

.gameOptions > :last-child > button {
    height: min(3rem, 10cqh);
    container-type: size;
    flex-grow: 1;
}
.gameOptions > :last-child  > button > p {
    font-size: min(50cqh, 16cqw);
}

#playerList {
    margin: 0.5rem 0;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    flex-grow: 1;
    gap: 3%;
}

#addPlayer {
    flex: 1 1;
    max-height: 2rem;
    container-type: size;
}

#addPlayer > p {
    font-size: min(50cqh, 10cqw);
}

.playerPanel {
    display: flex;
    flex: 1 1;
    max-height: 3rem;
    container-type: size;
}

.playerPanel > input {
    border-radius: 2rem 0 0 2rem;
    flex: 1 1 3rem;
    width: 0;
    font-size: 100%;
    padding: 0 1rem;
}

.playerPanel > button {
    max-width: 3.5rem;
    font-size: 100%;
    flex: 0 1 calc(100cqh + 2rem);
    border-radius: 0 2rem 2rem 0;
}

.playerPanel > .arrowButtonUp, .playerPanel > .arrowButtonDown {
    font-size: 80%;
    border-radius: 0px;
}

#playerList > :first-child > .arrowButtonUp {
    color: hsla(0, 0%, 60%, 0.2);
}

#playerList > :nth-last-child(2) > .arrowButtonDown {
    color: hsla(0, 0%, 60%, 0.2);
}

.hideRemovePlayerButton > :nth-last-child(2) {
    
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}

.hideRemovePlayerButton > :last-child {
    display: none;
}