/*
author: David den Uyl (djdenuyl@gmail.com)
date: 2022-10-19
*/
:root {
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap');

    --white: white;
	--black: #000000;
	--blue: #264653;
	--teal:	#2A9D8F;
	--yellow: #E9C46A;
	--orange: #F4A261;
    --red: #E76F51;

    --size: 5vw;
    --white-tile: var(--white);
    --black-tile: var(--orange);

    --menu-button-background: var(--orange);
}

@media (min-aspect-ratio: 1300/750) {
    :root {
        --size: 4vw !important;
    }
}

@media (max-aspect-ratio: 1/1) {
    :root {
        --size: 5vh !important;
    }
}

@media (max-aspect-ratio: 450/750) {
    :root {
        --size: 4vh !important;
    }

    .clocks {
        height: calc(.5 * var(--size)) !important;
        width: calc(6.5 * var(--size)) !important;
        margin-left: 0 !important;
        margin-top: calc(10 * var(--size)) !important;
        flex-direction: row !important;
        justify-content: space-between;
    }
}


body, html {
    margin: 0;
    padding: 0;
}

#app-container {
    background: var(--blue);
    display: grid;
    place-items: center;
    height: 100vh;
    width: 100vw;
}

#menu {
    grid-area: 1 / 1 / 1 / 1;
    height: calc(.5 * var(--size));
    width: calc(6.5 * var(--size));
    margin-bottom: calc(10 * var(--size));
    display: flex;
    justify-content: center;
    gap: var(--size);
}

.menu-item {
    height: 100%;
    aspect-ratio: 1;
    color: var(--blue);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0;
}

.menu-item:active {
    filter: brightness(75%);
}

.menu-item > img {
    height: 60%;
    aspect-ratio: 1;
    filter: sepia(1);
}

.new {
    background: var(--teal);
}

.help {
    background: var(--menu-button-background);
}

.timer {
    background: var(--menu-button-background);
    font-size: calc(.3 * var(--size));
}


.on {
    --menu-button-background: var(--teal);
}

#indicator {
    grid-area: 1 / 1 / 1 / 1;
    height: calc(6.5 * var(--size));
    width: calc(.5 * var(--size));
    margin-right: calc(10 * var(--size));
}

.signal {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    background: var(--yellow);
    border-radius: 50%;
    top: calc(6 * var(--size));
    transition: 0.5s;
    /* animation: bounce 1s ease-out infinite; */
}

.move {
    top: 0;
    transition: 0.5s;
}

@keyframes bounce {
    90% {transform: translateX(calc(-0.2 * var(--size)));}
}

.check {
    background: var(--red);
}

.checkmate {
    background: var(--black);
}

.clocks {
    grid-area: 1 / 1 / 1 / 1;
    width: calc(.5 * var(--size));
    height: calc(6.5 * var(--size));
    margin-left: calc(10 * var(--size));
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--size);
    visibility: hidden;
}

.clocks.visible {
    visibility: visible;
}

.clock {
    color: var(--white);
    font-family: 'Open Sans', sans-serif;
}


.promotion-tile {
    display: grid;
    grid-template: repeat(2, calc(.5 * var(--size))) / repeat(2, calc(.5 * var(--size)));
    place-items: center;
    font-size: calc(.4 * var(--size));
    color: var(--blue);
    overflow: hidden;
    z-index: 1;
}

.promotion-tile > button {
    all: unset;
    cursor: pointer;
    justify-self: stretch;
    display: grid;
    place-items: center;
}

.promotion-tile > button:hover {
    background: var(--teal);
}

#border {
    grid-area: 1 / 1 / 1 / 1;
    height: calc(9 * var(--size));
    aspect-ratio: 1;
    background: var(--red);
    border-radius: calc(0.05 * var(--size));
    display: grid;
    grid-template-columns: 1fr 16fr 1fr;
    grid-template-rows: 1fr 16fr 1fr;
    grid-template-areas:
        ". t ."
        "l . r"
        ". b .";
}

.label {
    font-size: calc(.2 * var(--size));
    font-family: 'Open Sans', sans-serif;
    color: var(--blue);
}

.top {grid-area: t;}
.rgt {grid-area: r;}
.btm {grid-area: b;}
.lft {grid-area: l;}

.letters {
    display: grid;
    grid-template: 1fr / repeat(8, 1fr);
}

.numbers {
    display: grid;
    grid-template: repeat(8, 1fr) / 1fr;
}

.label > * {
    display: grid;
    place-items: center;
}

#chessboard, #promotion {
    display: grid;
    grid-area: 1 / 1 / 1 / 1;
    grid-template: repeat(8, var(--size)) / repeat(8, var(--size));
}

button {
    font-size: calc(.6 * var(--size));
    /* font-family: 'Noto Sans Symbols 2', sans-serif; */
    color: var(--blue);
}

.tile {
    border: none;
    padding: 0;
    display: grid;
    place-items: center;
}


.⬜ {
    background-image: linear-gradient(0deg, var(--white-tile), var(--white-tile));
}

.⬛ {
    background-image: linear-gradient(0deg, var(--black-tile), var(--black-tile));
}

.selected > svg {
    animation: throb 1s infinite;
}

@keyframes throb {
    50% {scale: 0.75}
}

.valid-move {
    background-blend-mode: multiply;
    background-color: var(--yellow);
}

.thrthr {
    background-blend-mode: multiply;
    background-color: var(--red);
    position: relative;
    animation: bth 2s infinite;
}

@keyframes bth {
    50% {
        background-color: var(--teal);
    }
}

.threatened {
    background-blend-mode: multiply;
    background-color: var(--red);
}

.threatening {
    background-blend-mode: multiply;
    background-color: var(--teal);
}

/* STYLING THE ICONS */
.new-icon, .help-icon, .timer-icon {
    height: 70%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.new-icon .outer {
  border-radius: 50%;
  height: 100%;
  aspect-ratio: 1;
  background: var(--blue);
  display: grid;
  place-items: center;
  position: relative;
}

.new-icon .inner {
   aspect-ratio: 1;
   height: 70%;
   border-radius: 50%;
   background: var(--teal);
}

.new-icon .gap {
  border-radius: 50%;
  border: 1px solid var(--teal);
  height: 100%;
  aspect-ratio: 1;
  background: var(--teal);
  display: grid;
  place-items: center;
  position: absolute;
  clip-path:polygon(
    50% 50%,
    150% 0%,
    100% 0%,100% 50%,
    100% 70%,
    50% 50%
  );
}

.new-icon .arrowhead {
  position: absolute;
  width: 30%;
  aspect-ratio: 1;
  background: var(--blue);
  right: 4%;
  top: 10%;
  clip-path: polygon(
    100% 0%,
    0% 100%,
    100% 100%
  )
}

/* info*/
.help-icon .letter {
  height: 100%;
  aspect-ratio: 1;
  background: inherit;
  position: relative;
}

.help-icon .dot {
  height: 100%;
  aspect-ratio: 1;
  background: var(--blue);
  clip-path: circle(10% at 50% 10%);
  position: absolute;
}

.help-icon .stem {
  height: 100%;
  aspect-ratio: 1;
  background: var(--blue);
  position: absolute;
  clip-path: polygon(
    25% 100%,
    25% 90%,
    40% 90%,
    40% 40%,
    30% 40%,
    30% 30%,
    40% 30%,
    60% 30%,
    60% 90%,
    75% 90%,
    75% 100%
  );
}

/* timer */
.timer-icon .v {
  height: 100%;
  aspect-ratio: 1;
  background: var(--blue);
  position: relative;
  clip-path: polygon(
    15% 100%,
    40% 50%,
    15% 0%,
    85% 0%,
    60% 50%,
    85% 100%
  )
}

.timer-icon .sand-top {
  position: absolute;
  height: 100%;
  aspect-ratio: 1;
  background: var(--menu-button-background);
  clip-path: polygon(
    32% 10%,
    68% 10%,
    50% 45%
  )
}

.timer-icon .sand-bottom {
  position: absolute;
  height: 100%;
  aspect-ratio: 1;
  background: var(--menu-button-background);
  clip-path: polygon(
    41% 70%,
    59% 70%,
    50% 55%
  )
}

.piece {
    height: 60%;
    aspect-ratio: 1;
}