:root {
    /* theme pink  */
    --pink: #F896D8;
    --dark-pink: #DC70B8;
    --black: #000;
    --black-gray: #1c1c1c;
    --darkgray: #3c3939;
    --screen-off: #2a302a;
    --bg: #EDF67D;

    /* theme blue */
    --blue: #5CD6E1;
    --dark-blue: #43B9C4;
    --bg2: #F19DC8;
    /* styling */
    --size-gameboy: clamp(1rem, .8rem + 2vw, 2rem);

    /* game */
    /* inspiratie voor beweging: https://mtdvlpr.github.io/CSSttR-assignment/
    mijn expiriment van bewegend balletje: https://codepen.io/Jacco01/pen/GgjNOqr?editors=0100
    Ik had het expirement met behulp van Cyd afgemaakt die had ontdekt dat de groote van de player niet het juiste formaat was. */
    /* sets the size of the screen by mutliplying the grid and player size, 4 * 50px...  */
    --size-grid: 4;
    --size-player: 75px;

    --size-screen: calc( var(--size-grid) * var(--size-player));

    --transition-stop: 10000s linear;
    --transition-player: 1.5s linear;

    /* Let Ai help me explain some details of the code:
    calculates how many steps steps there by saying grid * grid or 4 * 4 which is 16 steps */
    --steps: calc( var(--size-grid) * var(--size-grid));
    /* calculates which step the player is currently on out of 16. So if --x is 0.5 and steps are 16, than 0.5 * 16 = step 8.
       So if the player is on x position; 0.5 and y position 0.25 than you multiply both numbers by 16. 0.5 * 16 = 8, 0.25 * 16 = 4. So the user is on column: 8 and row: 4. 
       syntax fouten uit mijn code gehaald met Ai*/
    --x-steps: max(calc( var(--x, 0) * var(--steps) + 0.49), 1);
    --y-steps: max(calc( var(--y, 0) * var(--steps) + 0.49), 1);

    &:has(article input[type=radio]:first-of-type:checked),
    &:has(article input[type=radio]:nth-of-type(3):checked) {
        transition: --x var(--transition-stop), --y var(--transition-player);
    }

    &:has(article input[type=radio]:nth-of-type(2):checked),
    &:has(article input[type=radio]:nth-of-type(4):checked) {
        transition: --x var(--transition-player), --y var(--transition-stop);
    }

    /* Ai kwam erachter de ik nth-of-type(2) 3 keer had geschreven waardoor het niet werkten */
    /* up */
    &:has(article input[type=radio]:first-of-type:checked) {
        --y: 0.00001;
    }

    /* left */
    &:has(article input[type=radio]:nth-of-type(4):checked) {
        --x: 0.00001;
    }

    /* right */
    &:has(article input[type=radio]:nth-of-type(2):checked) {
        --x: 1;
    }

    /* down */
    &:has(article input[type=radio]:nth-of-type(3):checked) {
        --y: 1;
    }  
}

@font-face {
    font-family: 'title';
    src: url(./font/Play-Bold.ttf);
}

@font-face {
    font-family: 'text';
    src: url(./font/Play-Regular.ttf);
}

html {
    container-type: style;
    container-name: --theme-container;
}

body {
    margin: 2rem;
    background-color: var(--bg);
}

main {
    display: flex;
    justify-content: center;
    width: 800px;
    justify-self: center;
}

h1 {
    font-size: calc( var(--size-gameboy) * .8);
    font-family: 'title', sans-serif;
    text-align: center;
    margin: 0;
    color: var(--dark-pink);
    pointer-events: none;
}

h2 {
    font-family: 'title';
}

p, label {
    font-family: 'text';
}

figure {
    width: calc( var(--size-gameboy) * 9);
    height: 40px;
    border-radius: 50px;
    margin: .5rem;
    background-color: var(--pink);
    border: solid 5px var(--dark-pink);
    display: flex;
    justify-content: center;
    align-self: center;
    align-items: center;
}

/**********
 * gameboy *
***********/
article {
    width:  calc( var(--size-gameboy) * 12);
    height: 620px;
    padding: 2rem;
    background-color: var(--pink);
    display: flex;
    flex-direction: column;
    justify-self: center;
    justify-content: center;
    border: solid 4px var(--black);
    border-radius: 3px;
    anchor-name:--anchor;
    position: relative;
    transform: rotateY(-10deg);

    section {
    width: 100%;
    margin-bottom: 1rem;
    background-color: var(--black);
    }
}

article::before {
    content: "";
    width: 3vw;
    height: 100%;
    padding-left: 0;
    background-color: var(--dark-pink);
    border-style: solid;
    border-width: 4px;
    border-color: var(--black);
    border-radius: 3px;
    transform-origin: left;
    position: absolute;
    left: 100%;
    transform: skewY(45deg);
}

article::after {
    content: "";
    width: 100%;
    height: 3vw;
    background-color: var(--dark-pink);
    border-style: solid;
    border-width: 4px;
    border-color: var(--black);
    border-radius: 3px;
    transform-origin: top;
    position: absolute;
    top: 100%;
    left: -5px;
    transform: skewX(45deg);
}

/* Nils had aangeboden om een 3d look te geven doormiddel van een box-shadow een 2 triangles te gebruiken, ik heb dit geprobeert te doen, maar heb toch voor een andere manier gekozen */
/* article::before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 17px 0px 0px 15px;
    border-color: var(--black) transparent transparent transparent;
    border-radius: 2rem;
    transform: rotate(0deg);

    position: absolute;
    top: 97.66%;
    left: 17.8em;
} */

/*********
 * Power *
**********/
main > input[type=checkbox]:first-of-type {
    appearance: none;
    width: 1em;
    height: 1em;
    background-color: var(--black);
    border-radius: 3px 3px 0px 0px;
    position: absolute;
    position-anchor:--anchor;
    top:anchor(top);
    left:anchor(left);
    translate: .5em -1em;
    transition: .3s;

    &:checked {
    translate: 3em -1em;

    }
}

main label[for=power] {
    position: absolute;
    position-anchor: --anchor;
    top:anchor(top);
    left:anchor(left);
    translate: .5em .5em;
    z-index: 1;
}

/************
 * controls *
*************/
article section:nth-of-type(2) {
    height: 18.75em;
    background-color: transparent;
    margin: 0;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 10rem 7rem;
    
    justify-items: center;
    align-items: center;

    div {
        width: calc( var(--size-gameboy) * 5);
        display: flex;
    }
}

button {
    width: 20px;
    height: 20px;
    background-color: var(--darkgray);
    border-radius: 100%;
    border: none;
    /* box shadow bedacht met behulp van Ai
    prompt: i want to add 2 borders around this button. it's a button form a gameboy. I want to give a 3d look, so one border on the top half of the button and one around the box-shadow or bottom part.  */
    box-shadow: inset -2px -5px 0px 0px var(--black),  0px 0px 0 3px var(--black-gray);

    &:active {
        box-shadow: inset 0px 0px 0px 0px var(--black),  0px 0px 0 3px var(--black-gray);
    }
}

input[type=radio] {
    appearance: none;
    width: 20px;
    height: 10px;
    background-color: var(--darkgray);
    border-radius: 100%;
}

/* Arrows */
section:nth-of-type(2) > div:first-of-type {
    height: 100%;
    display: grid;
    grid-template-columns: 33.33% 33.33% 33.33%;
    grid-template-rows: 33.33% 33.33% 33.33%;
    justify-self: start;
    justify-items: end;
    align-items: center;
}

section:nth-of-type(2) div:first-of-type input[type=radio] {
    width: calc( var(--size-gameboy) * 1.5);
    height: calc( var(--size-gameboy) * 1.3);
    border-radius: 3px;
    border-radius: 0;
    box-shadow: inset -2px -5px 0px 0px var(--black),  0px 0px 0 3px var(--black-gray);

    &:active {
        box-shadow: inset 0px 0px 0px 0px var(--black),  0px 0px 0 3px var(--black-gray);
    }
}

section:nth-of-type(2) div:first-of-type input[type=radio]:first-of-type {
    grid-column: 2;
}

section:nth-of-type(2) div:first-of-type input[type=radio]:nth-of-type(2) {
    grid-row: 2;
    grid-column: 3;
}

section:nth-of-type(2) div:first-of-type input[type=radio]:nth-of-type(3) {
    grid-column: 2;
    grid-row: 3;
}

section:nth-of-type(2) div:first-of-type input[type=radio]:nth-of-type(4) {
    grid-column: 1;
    grid-row: 2;
}

section:nth-of-type(2) div:first-of-type button:first-of-type, section:nth-of-type(2) div:first-of-type button:nth-of-type(3) {
    rotate: 90deg;
}

/* A & B */
section:nth-of-type(2) div:nth-of-type(2) {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;

    ul {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: end;
        align-items: end;
    }

    ul li {
        width: 5em;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    input[type=checkbox] {
        width: calc( var(--size-gameboy) * 1.5);
        height: calc( var(--size-gameboy) * 1.5);
        appearance: none;
        background-color: var(--darkgray);
        border-radius: 100%;
        border: none;
        box-shadow: inset -2px -5px 0px 0px var(--black),  0px 0px 0 3px var(--black-gray);

        &:active {
            box-shadow: inset 0px 0px 0px 0px var(--black),  0px 0px 0 3px var(--black-gray);
        }
        
    }

    ul li:not(:first-of-type) p {
        margin-bottom: 2em;
    }

    /* bron voor uitleg: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer */
    @layer p {
        justify-self: start;
        align-self: start;
        margin: 0;
    }
}

/* change theme when pressing A checkbox */
html:has(section:nth-of-type(2) div:nth-of-type(2) ul li:first-of-type input[type=checkbox]:checked) {
    --scheme: thema;
}


/* start and select */
section:nth-of-type(2) div:nth-of-type(3) {
    grid-column: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-self: end;

    button {
        border-radius: 10px;
        width: calc( var(--size-gameboy) * 1.6);
        margin: 1em;
        grid-row: 1;
        margin-bottom: 0;
    }

    input[type=checkbox] {
        appearance: none;
        border-radius: 10px;
        width: calc( var(--size-gameboy) * 1.6);
        margin: 1em;
        grid-row: 1;
        margin-bottom: 0;

        background-color: var(--darkgray);
        border: none;
        box-shadow: inset -2px -5px 0px 0px var(--black),  0px 0px 0 3px var(--black-gray);

        &:active {
            box-shadow: inset 0px 0px 0px 0px var(--black),  0px 0px 0 3px var(--black-gray);
        }
    }

    p {
        text-align: center;
    }
}

/**********
 * screen *
***********/
article > section:first-of-type {
    height: 22em;
    background-color: var(--black);
    border-radius: 3px 3px 40px 3px;
    display: grid;
    place-items: center;
    margin: 0;
    container-type: inline-size;


    > section {
        /* width:  calc( var(--size-gameboy) * 10); */
        max-width: 300px;
        height: 300px;
        background-color: var(--screen-off);
        margin: 0;
        display: grid;
        justify-content: center;
        align-items: center;
    }

    section h2 {
        opacity: 0;
        text-align: center;
        align-self: center;
    }
}

/* maak scherm grote kleiner */
@container (width < 350px) {
    article > section:first-of-type > section {
        width: 200px;
        height: 200px;
        background: #3c3939;
    }
}

main:has(> input[type=checkbox]:first-of-type:checked) section:has(section) section {
    background-color: white;
    transition: 2s;
}

main:has(> input[type=checkbox]:first-of-type:checked) section:has(section) section h2 {
    opacity: 1;
    transition: 4s;
}

/********
 * Game *
*********/
/* press start */
article > section:first-of-type div {
    width: var(--size-player);
    height: var(--size-player);
    background-color: black;
    border-radius: 100%;

    translate:
    calc(( var(--size-screen) - var(--size-player)) * var(--x, 0))
    calc(( var(--size-screen) - var(--size-player)) * var(--y, 0));


    display: none;
}

article:has(section:nth-of-type(2) div:nth-of-type(3) input[type=checkbox]:checked) > section:first-of-type > section {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    place-items: center;

    h2 {
        display:none;
    }

    div {
        display: block;
    }
}

@property --y {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --x {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --x-steps {
    syntax: "<integer>";
    inherits: true;
    initial-value: 0;
}

@property --y-steps {
    syntax: "<integer>";
    inherits: true;
    initial-value: 0;
}

/* Uitgelegd door Diego die ook container queries gebruikt om thema's te veranderen. */
/* Ik had met Ai nog wat fouten uit mijn code gehaald, alleen maar syntax fouten van de container en scheme namen. Prompt: "Why does the style container not work"  */
@container --theme-container style(--scheme: thema) {
    body {
       background-color: var(--pink); 
    }

    h1 {
        color: var(--dark-blue)
    }

    figure {
        background-color: var(--blue);
        border: solid 5px var(--dark-blue)
    }
    
    article {
        background-color: var(--blue);
    }

    article::before {
        background-color: var(--dark-blue);
    }

    article::after {
        background-color: var(--dark-blue);
    }

    article:has(sectio n:nth-of-type(2) div:nth-of-type(3) input[type="checkbox"]:checked) > section:first-of-type > section div {
        background-color: var(--blue)
    }
}

 @media (max-width: 706px) {
    :root {
        --size-player: 50px;
    }
}