/* Source: https://fonts.google.com/specimen/Jost */
@font-face {
    font-family: "Jost";
    src:url("Assets/fonts/Jost-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "JostBold";
    src:url("Assets/fonts/Jost-SemiBold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* gradient gemaakt op https://cssgradient.io/ */
    --background: radial-gradient(circle,rgba(148, 148, 148, 1) 0%, rgba(104, 104, 104, 1) 100%);

    --color-scheme: light dark;

    /* Kleurenpalet wii controller wit:  https://www.retronintendokaufen.de/Files/2/40000/40305/ProductPhotos/Source/1146475106.jpg */
    /* Kleurenpalet wii controller zwart: https://www.retronintendokaufen.de/Files/2/40000/40305/ProductPhotos/Source/1674897526.jpg */
    --wii-color: #efefef;
    --wii-color-text: #000000;
    --wii-button-border-color-shadow: #a7a7a7;

    --wii-red-power: #c19095;
    --wii-controller-blue: #1d95ba;
    --wii-controller-light: #1d95ba;;
    --wii-button-border-color: #c4c7cc;
    --wii-light-off: #67686c;
    --wii-controller-width: 100px;
    --wii-controller-height: 442px;

    --wii-button-shadow: drop-shadow(0 2px 0px var(--wii-button-border-color-shadow));
    --wii-font: 'Jost', sans-serif;

}

body {
    width: 100vw;
    height: 100vh;
    background: var(--background);
}

body.dark-mode {
    --wii-color: #2c3033;
    --wii-color-text: #ffffff;
    --wii-button-border-color-shadow: #1e1e1e;
    --wii-button-shadow: drop-shadow(0 2px 0px var(--wii-button-border-color-shadow));
}

body.light-mode {
    --wii-color: #efefef;
    --wii-color-text: #000000;
    --wii-button-border-color-shadow: #a7a7a7;
    --wii-button-shadow: drop-shadow(0 2px 0px var(--wii-button-border-color-shadow));
}

main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


/******************/
/* Wii controller */
/******************/

/* Wii dimensions: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHNw2Ip8d8CU5oWvMjqvJO2AsS2SEM0ilbTA&s */
#wii {
    width: var(--wii-controller-width);
    height: var(--wii-controller-height);
    border-radius: 10px;
    background-color: var(--wii-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--wii-color-text);
    position: relative;
    font-family: var(--wii-font);
    transition: transform 0.4s ease;

    @media (width > 40em) and (height > 55em) {
        transform: scale(2);
    }


    @media (width > 60em) {
        transform: rotate(-90deg) scale(2);
    }

}

/****************/
/* Power Button */
/****************/
#wii-power-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 5px;
    left: 5px;

    button {
        color: var(--wii-red-power);
        border: 1px solid var(--wii-button-border-color);
        border-radius: 50%;
        padding: 2px;
        aspect-ratio: 1/1;
        background: var(--wii-color);
    }

    p {
        font-size: 50%;
        text-transform: uppercase;
    }
}

/*********/
/* D-Pad */
/*********/
#wii-direction-buttons {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);

    button:nth-of-type(1) {
        grid-area: 1 / 2;
        border: 2px solid var(--wii-button-border-color);
        border-bottom: none;
        aspect-ratio: 1/1;
        width: 20px;
        background: var(--wii-color);
    }

    button:nth-of-type(2) {
        grid-row: 2;
        grid-column: 1;
        border: 2px solid var(--wii-button-border-color);
        border-right: none;
        filter: var(--wii-button-shadow);
        background: var(--wii-color);
    }

    button:nth-of-type(3) {
        grid-row: 2;
        grid-column: 3;
        border: 2px solid var(--wii-button-border-color);
        border-left: none;
        filter: var(--wii-button-shadow);
        background: var(--wii-color);
    }

    button:nth-of-type(4) {
        grid-row: 3;
        grid-column: 2;
        border: 2px solid var(--wii-button-border-color);
        border-top: none;
        filter: var(--wii-button-shadow);
        background: var(--wii-color);
    }

    hr {
        margin: 2px;
        height: 3px;
        border: none;
        background-color: var(--wii-button-border-color);
    }

    button:first-of-type hr,
    button:last-of-type hr {
        transform: rotate(90deg);
    }
}

/* Pressed states using group classes */
/* Selectors opgezet door ChatGPT, properties zelf ingevuld */
/* Na meerdere prompts wilde het pas werken, maar de oorspronkelijk prompt was
Give me a clean way to make sure that when 1 of the buttons of the dpad gets pressed. I can style the other buttons separately. You can use HTML CSS and JS */
/* Top Button */
#wii-direction-buttons.top-pressed #button-top {transform: rotateX(22.5deg);}
#wii-direction-buttons.top-pressed #button-left {filter: drop-shadow(0 4px 0 var(--wii-button-border-color-shadow)); transform: rotateX(22.5deg); margin-top: -2px;}
#wii-direction-buttons.top-pressed #button-right {filter: drop-shadow(0 4px 0 var(--wii-button-border-color-shadow)); transform: rotateX(22.5deg); margin-top: -2px;}
#wii-direction-buttons.top-pressed #button-bottom {filter: drop-shadow(0 6px 0 var(--wii-button-border-color-shadow)); transform: rotateX(-45deg); margin-top: -4px;}

/* Left Button */
#wii-direction-buttons.left-pressed #button-left {transform: rotateY(-30deg);}
#wii-direction-buttons.left-pressed #button-top {filter: drop-shadow(4px 0 0 var(--wii-button-border-color-shadow)); transform:rotateY(22.5deg); margin-left: -2px;}
#wii-direction-buttons.left-pressed #button-bottom {filter: drop-shadow(4px 2px 0 var(--wii-button-border-color-shadow)); transform:rotateY(22.5deg); margin-left: -2px; }
#wii-direction-buttons.left-pressed #button-right {transform: rotateY(-30deg); filter: drop-shadow(3px 2px 0 var(--wii-button-border-color-shadow));  margin-left: -4px;}

/* Right Button */
#wii-direction-buttons.right-pressed #button-right {transform: rotateY(-22.5deg);}
#wii-direction-buttons.right-pressed #button-top { filter: drop-shadow(-4px 0 var(--wii-button-border-color-shadow)); transform:rotateY(-22.5deg); margin-right: -2px;}
#wii-direction-buttons.right-pressed #button-bottom { filter: drop-shadow(-4px 2px 0 var(--wii-button-border-color-shadow)); transform:rotateY(-22.5deg); margin-right: -2px;}
#wii-direction-buttons.right-pressed #button-left {transform: rotateY(30deg); filter: drop-shadow(-3px 2px 0 var(--wii-button-border-color-shadow)); margin-right: -4px;}

/* Bottom Button */
#wii-direction-buttons.bottom-pressed #button-bottom {filter: drop-shadow(0 0px 0 var(--wii-button-border-color-shadow));}
#wii-direction-buttons.bottom-pressed #button-left {filter: drop-shadow(0 -2px 0 var(--wii-button-border-color-shadow)); transform: rotateX(-22.5deg); margin-bottom: -2px;}
#wii-direction-buttons.bottom-pressed #button-right {filter: drop-shadow(0 -2px 0 var(--wii-button-border-color-shadow)); transform: rotateX(-22.5deg); margin-bottom: -2px;}
#wii-direction-buttons.bottom-pressed #button-top { filter: drop-shadow(0 -2px 0 var(--wii-button-border-color-shadow)); transform: rotateX(40deg);}

/************/
/* A Button */
/************/
#wii-a-button {
    button {
        aspect-ratio: 1/1;
        width: 35px;
        border: 2px solid var(--wii-button-border-color);
        border-radius: 50%;
        text-align: center;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        filter: var(--wii-button-shadow);
        background: var(--wii-color);
        color: var(--wii-color-text);
    }

    button:active {
        filter: inner-shadow(0 0 0px var(--wii-button-border-color-shadow));
        transform: translateY(2px);
    }

}



/*****************/
/* Center Button */
/*****************/
/** - Home + **/
#wii-center-buttons {
    display: flex;
    gap: 10px;
    justify-content: space-evenly;
    margin-top: 40px;
}

#wii-center-buttons section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#wii-center-buttons>button,
#wii-center-buttons section>button>i {
    border: 2px solid var(--wii-button-border-color);
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    height: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

#wii-center-buttons>section button {
    border: none;
    background-color: var(--wii-color);
}

#wii-center-buttons section {
    font-size: 10px;
    text-transform: uppercase;

}

#wii-center-buttons i {
    color: var(--wii-controller-blue);
}

#wii-center-buttons {
    >button {
        filter: var(--wii-button-shadow);
        background: var(--wii-color);
        color: var(--wii-color-text);
    }

    >button:active{
        filter: inner-shadow(0 0 0px var(--wii-button-border-color-shadow));
        transform: translateY(2px);
    }
}



/***************/
/* Sound Holes */
/***************/
#wii-sound-holes {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 20px;
}

.wii-hole-big div {
    width: 5px;
}

.wii-hole-medium div {
    width: 3px;
}

.wii-hole-small div {
    width: 1.5px;
}

.wii-hole-small,
.wii-hole-medium,
.wii-hole-big {
    display: flex;
    justify-content: space-around;
    gap: 2px;

    div {
        aspect-ratio: 1/1;
        background: #000000;
        border-radius: 50%;
    }
}


/***************/
/* 1/2 Buttons */
/***************/
#wii-1-2-buttons {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;

    button:active {
        filter: inner-shadow(0 0 0px var(--wii-button-border-color-shadow));
        transform: translateY(2px);
    }
}


#wii-1-2-buttons * {
    border: 2px solid var(--wii-button-border-color);
    border-radius: 50%;
    aspect-ratio: 1/1;
    width: 25px;
    text-align: center;
    filter: var(--wii-button-shadow);
    background: var(--wii-color);
    color: var(--wii-color-text);
}

/*****************/
/* Player Lights */
/*****************/
#wii-player-lights {
    display: flex;
    justify-content: space-between;
    gap: 7px;
    margin-top: 30px;

    * {
        aspect-ratio: 1 / 1;
        width: 8px;
        background: var(--wii-light-off);
    }
}

#player-light {
    background: var(--wii-controller-light);
    filter: drop-shadow(0px 0px 3px var(--wii-controller-light));
}

/************/
/* Wii Text */
/************/
#wii-text {
    margin-top: 5px;
    font-size: 20px;
    font-family: JostBold, sans-serif;
}

/***********/
/* Pop-ups */
/***********/
.popup-inner {
    width: 100%;
    background: var(--wii-color);
    color: var(--wii-color-text);
    border: 5px solid var(--wii-button-border-color);
    border-radius: 20px;
    font-family: var(--wii-font);
    filter: drop-shadow(0 1em 0.5em var(--wii-button-border-color-shadow));
    padding: 1em;
    overflow: hidden;

    opacity: 0;
    translate:-50% -50%;
    scale:0;
    transition: opacity .5s ease, scale .5s ease, overlay .5s ease, display .5s ease;
    transition-behavior: allow-discrete;

    p { 
        margin-top: 1em;
    }

    div ul {
        list-style: none;
    }

    @media (width > 30em) {
        width: 30em;
    }
}

/* When open */
.popup-inner:popover-open {
    opacity: 1;
    scale:1
}

/* Starting state for opening */
@starting-style {
  .popup-inner:popover-open {
    opacity: 0;
    scale:0;
  }
}


article[popover] {
    position: fixed;
    top: 50%;
    left: 50%;
}

#pop-up-other {
    top: 25%;

    p:first-of-type {
        word-break: break-all;
    }
}

/******************/
/* Wii Animations */
/******************/
/* Originele code van animista.net, eigen waardes ingevuld */
/* Rotate clockwise twice */
.rotate-clockwise {
    -webkit-animation: rotate-clockwise 0.6s ease-in-out both;
    animation: rotate-clockwise 0.6s ease-in-out both;
}

@-webkit-keyframes rotate-clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}

@keyframes rotate-clockwise {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
    }
}

/* Rotate counterclockwise twice */
.rotate-counterclockwise {
    -webkit-animation: rotate-counterclockwise 0.6s ease-in-out both;
    animation: rotate-counterclockwise 0.6s ease-in-out both;
}

@-webkit-keyframes rotate-counterclockwise {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-720deg);
        transform: rotate(-720deg);
    }
}

@keyframes rotate-counterclockwise {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(-720deg);
        transform: rotate(-720deg);
    }
}

.controller-shake {
    -webkit-animation: shake-controller 0.3s ease-in-out both;
    animation: shake-controller 0.3s ease-in-out both;
}

@-webkit-keyframes shake-controller {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    33% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    66% {
        -webkit-transform: rotate(-60deg);
        transform: rotate(-60deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes shake-controller {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    33% {
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }

    66% {
        -webkit-transform: rotate(-0deg);
        transform: rotate(-60deg);
    }

    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}