/* Text Unselectable: https://www.w3schools.com/howto/howto_css_disable_text_selection.asp */
div {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f3f4f5, #e4eeff);
}

/* Toy */
#toy-container {
    display: flex;
    flex-direction: row;
    width: 95vw;
    max-height: 95vh;
    aspect-ratio: 800 / 500;
    max-width: calc(95vh * 800 / 500);
    border-radius: 8px;
    container-type: inline-size;
}

.toy-section {
    border-radius: 8px;
}

/* Left Side */
#toy-container .toy-section:nth-child(1) {
    flex: 35;
    display: flex;
    flex-direction: row;
    padding: 0.5%;
    gap: 0.4%;
    background-color: #fff025;
}

.toy-choices:nth-child(1) { background-color: #D63636; } /* purple */
.toy-choices:nth-child(2) { background-color: #FA7500; } /* blue */
.toy-choices:nth-child(3) { background-color: #FF7398; } /* green */
.toy-choices:nth-child(4) { background-color: #ED2BAC; } /* orange */
.toy-choices:nth-child(5) { background-color: #422C99; } /* pink */

/* IMAGES */
.toy-choices {
    flex: 1;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    justify-content: space-evenly;
}

.toy-choices-number {
    font-family: 'Comic Sans MS', cursive;
    font-weight: bold;
    font-size: 2.2cqw;
    color: black;
    padding: 1.1cqw;
    margin: 0.3cqw;
    background-color: transparent;
    border-radius: 50%;
    width: 3cqw;
    height: 3cqw;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.5cqw, solid, white;
}

.toy-choices-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1;
    justify-content: center;
}

.toy-choices-item img {
    width: 70%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.toy-choices-item p {
    font-family: 'Comic Sans MS', cursive;
    font-weight: bold;
    font-size: 1.2cqw;
    text-align: center;
    color: black;
}

/* Spine */
#toy-container .toy-section:nth-child(2) {
    flex: 9;
    background-color: #5aabf5;
}

/* Right Side */
#toy-container .toy-section:nth-child(3) {
    flex: 35;
    display: flex;
    flex-direction: column;
    padding: 1%;
    background-color: #fff025;
}

/* Top buttons */
.toy-choice-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 3cqw;
    padding: 1.5cqw;
    padding-top: 4cqw;
}

.toy-choice-buttons div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.toy-choice-buttons button {
    width: 5.25cqw;
    height: 5.25cqw;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.toy-choice-buttons div:nth-child(1) button { background-color: #D63636; }  /* blue */
.toy-choice-buttons div:nth-child(2) button { background-color: #FA7500; }  /* green */
.toy-choice-buttons div:nth-child(3) button { background-color: #FF7398; }  /* purple */
.toy-choice-buttons div:nth-child(4) button { background-color: #ED2BAC; }  /* orange */
.toy-choice-buttons div:nth-child(5) button { background-color: #422C99; }  /* pink */

/* Display */
.toy-choice-display {
    background-color: #828282;
    border-radius: 8px;
    margin: 1cqw;
    padding: 1cqw;
    font-size: 1.7cqw;
    font-family: 'Comic Sans MS', cursive;
    font-weight: bold;
    color: #000000;
    height: 8%;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Sticker */
.toy-drawing {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin: 1cqw;
}

.toy-drawing img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Bottom buttons */
.toy-interactive-buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 3cqw;
    padding: 1.5cqw;
}

.toy-interactive-buttons div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5cqw;
}

.toy-interactive-buttons button {
    width: 5.25cqw;
    height: 5.25cqw;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.toy-interactive-buttons div:nth-child(1) button { background-color: #e74c3c; } /* red */
.toy-interactive-buttons div:nth-child(2) button { background-color: #22c55e; } /* green */

/* Text next to the buttons */
.toy-interactive-buttons p {
    font-family: 'Comic Sans MS', cursive;
    font-size: 1.8cqw;
    font-weight: bold;
}

.toy-interactive-buttons div:nth-child(1) p { color: #e74c3c; }
.toy-interactive-buttons div:nth-child(2) p { color: #22c55e; }