/*TODO: make rubber field and cards */

/* Главное игровое окно */ 

header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    height: var(--height-header);
    width: 100%;
    background-color: var(--header-color);
}

nav {
    position: relative;
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-content: center;
    align-items: center;
}

nav div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: max(calc((var(--height-header) - 10vh) / 3), 10px);
}

nav img {
    width: 60%;
}

#game-header {
    font-size: 10vmin;
    margin-right: max(calc((var(--height-header) - 10vh) / 3), 10px);
    color: var(--header-title-color);
}

main {
    height: calc(100% - var(--height-header));
    width: 100%;
}

#main {
    height: 100%;
    width: 100%;
    background-color: var(--background-game-color);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

#game-info {
    width: 20%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    margin: calc(var(--height-header) / 6);
}

#score, #left-balls {
    width: 35vmin;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--background-table-color);
}

#score-header, #left-balls-header {
    text-align: center;
    padding: 4%;
    font-size: 3.5vmin;
    color: var(--header-title-table-color);
}

#score-table, #left-balls-table {
    font-size: 2.4vmin;
    width: 100%;
    color: var(--text-table-color);
}

#score-table thead {
    font-family: "Agency FB Extended Bold";
}

#score-table th {
    padding: 3%;
}

#left-balls-table th {
    padding: 3%;
}

#left-balls-table img  {
    width: 60%;
    transition: transform 0.3s;
}

#left-balls-table img:hover {
    transform: scale(1.5, 1.5);
}

#left-balls-table th {
    text-align: center;
}

#game-field {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
}

#field {
    position: relative;
    width: 35vmax; /* 665px */
    height: 35vmax; /* 665px */
    margin: 1vmax; /* 50px */
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.field-part {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    background-color: var(--field-part-color);
    border-radius: 15%;
    transition: transform 1s ease;
}

.notch {
    width: 60%;
    height: 60%;
    background: radial-gradient(var(--notch-first-gradient-color), 60%, var(--notch-second-gradient-color));
    box-shadow: inset 0px 0px 10px var(--notch-shadow-color);
    border-radius: 50%;
}

.notch img {
    width: 100%;
    height: 100%;
}

#cards {
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
}

.card { /* flip-card */
    width: 25vmin;
    height: 25vmin;
    perspective: 1000px;
}

.card-pattern { /* flip-card-inner */
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    /* background-color: var(--background-card-color); */
    border-radius: 15px;
    transform-style: preserve-3d;
    transition: transform 0.8s;
}

.card-pattern div {
    width: 90%;
    height: 90%;
    background-color: var(--background-card-color);
    border-radius: 10px;
    border: 2px solid var(--border-card-color);
    box-shadow: 0px 0px 0px 3px var(--background-card-color), 0px 0px 0px 5px var(--border-card-color); /* крайняя тень находится на самом верху */
}

.card-pattern div img {
    width: 18%;
}

.card-marble { /* flip-card-front */
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    backface-visibility: hidden;
}

.card-back { /* flip-card-back */
    width: 90%;
    height: 90%;
    position: absolute;
    background: url("../imgs/card_back.svg");
    background-repeat: no-repeat;
    background-size: cover;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

/* arrow for rotating */

.arrow {
    position: absolute;
    width: var(--width-of-arrows);
    filter: var(--arrow-color);
} 

.cw-f1 {
    top: calc(0% - var(--width-of-arrows));
    left: 0px;
}

.ccw-f1 { 
    top: 0px;
    left: calc(0% - var(--width-of-arrows));
    transform: rotate(-90deg);
}

.cw-f2 { 
    top: 0px;
    right: calc(0% - var(--width-of-arrows));
    transform: rotate(90deg);
}

.ccw-f2 {
    top: calc(0% - var(--width-of-arrows));
    right: 0px;
}

.cw-f3 {
    bottom: calc(0% - var(--width-of-arrows));
    right: 0px;
    transform: rotate(-180deg);
}

.ccw-f3 {
    bottom: 0px;
    right: calc(0% - var(--width-of-arrows));
    transform: rotate(90deg);
}

.cw-f4 {
    bottom: 0px;
    left: calc(0% - var(--width-of-arrows));
    transform: rotate(-90deg);
}

.ccw-f4 {
    bottom: calc(0% - var(--width-of-arrows));
    left: 0px;
    transform: rotate(180deg);
}

/* header-buttons */

#btn-settings img, #btn-rules img, #btn-stats img {
    transition: transform var(--time-of-highlighting);
}

#btn-settings img:hover {
    transform: rotate(180deg) scale(1.2, 1.2);
}

#btn-stats img:hover {
    transform: scale(1.2, 1.2);
}

#btn-rules img:hover {
    transform: scale(1.2, 1.2);
}

/* burger menu */

#burger-button-toggle {
    display: none;
}

#burger-toggle {
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#burger-button {
    width: 50%;
    height: 50%;
    transition: transform var(--time-of-highlighting);
}

#burger-button,
#burger-button::before,
#burger-button::after {
    display: block;
    position: absolute;
    margin: 0;
    width: 60%;
    height: 10px;
    background-color: var(--burger-menu-color);
}

#burger-button::before {
    content: '';
    width: 100%;
    margin-top: 24px;
}

#burger-button::after {
    content: '';
    width: 100%;
    margin-top: -24px;
}

#burger-toggle:hover #burger-button {
    transform: rotate(90deg);
}

#burger-menu {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    z-index: 2;
}

#burger-menu li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}