:root {
    --background-dots: 
        radial-gradient(circle, #fff69f 25%, transparent 26%), 
        linear-gradient( 0deg, transparent 47%, rgba(180, 180, 160, 0.5) 48% 52%, transparent 53%), 
        linear-gradient(90deg, transparent 47%, rgba(180, 180, 160, 0.5) 48% 52%, transparent 53%);
    --backgound-gradient: linear-gradient(0deg, rgb(13, 42, 172) 0%, rgb(72, 108, 249) 50%, rgb(42, 79, 244) 100%);
    --backgound-gradient-dark: linear-gradient(0deg, rgb(11, 36, 149) 0%, rgb(65, 97, 225) 50%, rgb(37, 69, 215) 100%);

    --box-shadow-inset: inset 0px 0px 0.5em rgba(0 0 0 / 1);

    --border-orange: solid 0.5rem orange;
    --border-radius: 2rem;
}

main {
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20vh;
	height: 100%;
	user-select: none;

    > .titles {
		
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
		transform-style: preserve-3d;

        h2 {
            font-size: 1.5rem;
            margin: 0;
        }
    
        h1 {
            font-size: min(10rem, 20vh);
            margin: 1rem;
			
            transform: perspective(400px) scaleY(1.5) rotateX(20deg);
            text-align: center;

        }
    }

	> .buttons {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2rem;
	}
}

body, input[type="text"] {
    font-size: 2rem;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: white;
    /* text-shadow: ; */
	text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 2px 2px black;
}

body {
    background-color: #0068ff;
    background: linear-gradient(0deg, rgba(0,104,255,1) 0%, rgba(87,156,255,1) 50%, rgba(0,104,255,1) 100%);
    
    background:
        linear-gradient( 45deg, transparent 47%, rgba(180, 180, 160, 0.2) 48% 52%, transparent 53%), 
        linear-gradient(-45deg, transparent 47%, rgba(180, 180, 160, 0.2) 48% 52%, transparent 53%);
    background-size: 1em 1em;
    background-color: #0068ff;

	animation: 2s infinite background-animation;
    animation-timing-function: linear;

    overflow: hidden;
}

@keyframes background-animation {
	from {
		background-position: 0 0;
	}

	to {
		background-position: 0 1em;
	}
}

.background-animation-container {

	position: fixed;
	top: 0;
	width: 100vw;
	height: 100vh;
	user-select: none;
	/* z-index: -1; */

	> div {
		font-size: 5rem;
		position: absolute;
		animation: 20s infinite background-emoji-animation;
    	animation-timing-function: linear;
	}
}

@keyframes background-emoji-animation {
	from {
		bottom: calc(0vh - 5rem);
	}

	to {
		bottom: 100vh;
	}
}


input[type="text"] {
    background: none;
    outline: none;
    border: none;
}

.stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
	height: 100vh;
    /* gap: 5vh; */
}



.strikes {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5vw;
    z-index: 999;

    visibility: hidden;

	&.revealed {
		visibility: visible;
	}

    > .strike {
        display: block;
        width: 20vh;
        height: 20vh;
        border: solid 2.5vh rgb(217, 4, 4);
        border-radius: var(--border-radius);
        background: 
            linear-gradient( 45deg, transparent 45%, rgb(217, 4, 4) 45% 55%, transparent 55%), 
            linear-gradient(-45deg, transparent 45%, rgb(217, 4, 4) 45% 55%, transparent 55%);

        box-shadow: 0px 0px 0.5em rgba(0 0 0 / 1);
    }
}

.podiums {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 100vw;
    /* gap: 5vw; */
}

.face-off-podiums {
    display: flex;
    gap: 2vw;

    .podium {
        width: 4em;
        height: 4em;
        background: var(--backgound-gradient-dark);
        border-radius: var(--border-radius);
        border: var(--border-orange);
        box-shadow: inset 0px 0px 0.5em rgba(0 0 0 / 1), 0px 0px 0.5em rgba(0 0 0 / 1);
        z-index: 1;
    }
    
    .podium-0, .podium-1 {
        background: var(--background-dots);
        background-size: 1em 1em;
        background-color: #6036fc;
        box-shadow: inset 0px 0px 0.5em rgba(0 0 0 / 1), 0px 0px 0.5em rgba(0 0 0 / 1);
        z-index: 1;
    }

    .podium-host {
        display: flex;
        align-items: center;
        justify-content: center;
  
    }
}

.avatar-container {
	position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    user-select: none;
    cursor: default;
	height: 10rem;

    .avatar {
		position: relative;
        transition: all 0.5s ease-in-out;
        padding-bottom: 0.25em;
        /* z-index: -1; */

        > .player-avatar {
            font-size: 5rem;
        }
        > .player-name {
            font-size: 0.75em;
            text-transform: uppercase;
        }

        &.sink {
            margin-bottom: -8em;
            z-index: -1;
        }

		&.faceoff-player::before {
			content: '';
			width: 1em;
			height: 1em;
			border-left: 0.20em solid black;
			border-bottom: 0.20em solid black;
			position: absolute;
			transform: rotateZ(-45deg);
			top: -1.5em;
			left: calc(50% - 0.5em);
		}
		&.faceoff-player::after {
			content: '';
			width: 1em;
			height: 1em;
			border-left: 0.25em solid crimson;
			border-bottom: 0.25em solid crimson;

			position: absolute;
			transform: rotateZ(-45deg);
			top: -1.75em;
			left: calc(50% - 0.5em);
		}

		&.active-player::before {
			content: '';
			width: 1em;
			height: 1em;
			border-left: 0.20em solid black;
			border-bottom: 0.20em solid black;
			position: absolute;
			transform: rotateZ(-45deg);
			top: -1.5em;
			left: calc(50% - 0.5em);
		}
		&.active-player::after {
			content: '';
			width: 1em;
			height: 1em;
			border-left: 0.25em solid limegreen;
			border-bottom: 0.25em solid limegreen;

			position: absolute;
			transform: rotateZ(-45deg);
			top: -1.75em;
			left: calc(50% - 0.5em);
		}


    }

    &.team-0 {
        flex-direction: row-reverse;
    }
}



.team-podium {
    height: 4em;
    border-radius: var(--border-radius);
    border: var(--border-orange);
    box-shadow: inset 0px 0px 0.5em rgba(0 0 0 / 1), 0px 0px 0.5em rgba(0 0 0 / 1);
    background: var(--backgound-gradient);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    user-select: none;
    cursor: pointer;

    z-index: 1;

    > input[type="text"] {
        font-size: 1.5em;
        text-align: center;
        text-transform: uppercase;

        &:read-only {
            user-select: none;
            cursor: pointer;
        }
    }
}

#board {
    position: relative;
    --width: clamp(10em, 30vw, 15em);
    --height: 2em;
    background: var(--background-dots);
    background-size: 1em 1em;
    background-color: #6036fc;
    border-radius: 100%;
    border: var(--border-orange);
    box-shadow: var(--box-shadow-inset), 0px 0px 0.5em rgba(0 0 0 / 1);
    width: calc(var(--width) * 2 + 12em);
    height: calc(var(--height) * 10);

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    justify-content: center;

    user-select: none;
    cursor: default;

	/* transform: scale(0.75); */



    > .round-points, 
    > .team-0-points,
    > .team-1-points,
    > .title {
        border: var(--border-orange);
        box-shadow: var(--box-shadow-inset), 0px 0px 0.5em rgba(0 0 0 / 1);
        border-radius: var(--border-radius);
        background-color: black;
        padding: 0.5em 1em;
        position: absolute;
    }

    > .round-points {
        top: 1em;
    }
    > .team-0-points {
        left: 1em;
    }
    > .team-1-points {
        right: 1em;
    }

    .title {
		text-align: center;
        /* font-size: 2em; */
        padding: 0.25em 1em;
        bottom: -0.5em;

		.pre {
			font-style: italic;
		}
    }

	.season {
		position: absolute;
		bottom: -3rem;
		font-size: 1.2rem;
	}

    > .results-container {
        --gap: 0.5em;
        width:  calc(var(--width)  * 2 + var(--gap)*1);
        height: calc(var(--height) * 4 + var(--gap)*3);

        padding: calc(var(--gap) * 1.5);
        gap: var(--gap);

        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        justify-items: center;

        background-color: black;

        border: var(--border-orange);
        box-shadow: var(--box-shadow-inset), 0px 0px 0.5em rgba(0 0 0 / 1);
        border-radius: var(--border-radius);

        
        
        .result {
            width:  var(--width);
            height: var(--height);

            transform-style: preserve-3d;
        
            > .result-side-top,
            > .result-side-bottom,
            > .result-index,
            > .result-info {
                
                box-sizing: border-box;
                display: flex;
                position: absolute;
                width:  var(--width);
                height: var(--height);
                outline: 4px solid rgb(194, 194, 194);
                background: var(--backgound-gradient);
                box-shadow: var(--box-shadow-inset);
        
                transform-origin: center center calc(var(--height) * -0.5);
                transition: transform 0.5s ease-in-out;
				transition-delay: 0.8s;
                align-items: center;
            }
        
            > .result-index {
                transform: rotateX(0deg);
                justify-content: center;
            }
            > .result-side-top {
                transform: rotateX(90deg);
            }
            > .result-info {
                transform: rotateX(180deg);
            }
            > .result-side-bottom {
                transform: rotateX(270deg); 
            }
        
            &.revealed {
                > .result-index {
                    transform: rotateX(-180deg);
                }
                > .result-side-top {
                    transform: rotateX(-90deg); 
                }
                > .result-info {
                    transform: rotateX(0deg); 
                }
                > .result-side-bottom {
                    transform: rotateX(90deg); 
                }
            }

            > .result-index {
				color: rgb(222, 222, 222);
				font-style: italic;
                > span {
                    width: calc(var(--height) * 0.75);
                    height: calc(var(--height) * 0.75);
                    line-height: calc(var(--height) * 0.75);
                    border-radius: 100%;
                    background-color: rgb(37, 69, 215);
                    border: 2px solid rgba(12, 14, 20, 1);
                    justify-content: center;
                    text-align: center;
                    box-shadow: inset 0px 0px 0.5em rgba(0 0 0 / 1), 0px 0px 0.1em rgba(0 0 0 / 1);
                    font-weight: 800;

					color: white;
					font-style: normal;
                }
            }
        
        
            > .result-info {
                display: flex;
                flex-direction: row;
                align-items: stretch;
        
                > .result-answer {
                    padding-left: 0.5em;
                    padding-right: 0.5em;
                    /* display: flex; */
                    flex-grow: 1;
                    background: rgb(30, 62, 204);
                    background: var(--backgound-gradient-dark);
                    box-shadow: var(--box-shadow-inset);
                    align-items: center;
                    line-height: var(--height);
                    /* vertical-align: middle; */
                    /* text-align: center; */

                    overflow: hidden;
                    white-space: nowrap;
                    text-wrap: nowrap;
                    text-overflow: ellipsis;
                }
        
                > .result-number {
                    display: flex;
                    box-sizing: border-box;
                    flex-grow: 0;
                    background: var(--backgound-gradient);
                    border: 1px solid rgb(194, 194, 194);
                    box-shadow: var(--box-shadow-inset);
                    width: 3.5ch;
                    align-items: center;
                    justify-content: center;
                    
                    /* padding-right: 0.5em;
                    padding-left: 0.5em; */
                    text-align: right;
                }
            }
        }

    }
}

.stage.round-end .results-container .result {
	> .result-side-top,
	> .result-side-bottom,
	> .result-index,
	> .result-info {
		transition-delay: 0s !important; 
	}
}


.button {
    font-size: 5rem;
    border-radius: var(--border-radius);
    border: var(--border-orange);
    box-shadow: inset 0px 0px 0.5rem rgba(0 0 0 / 1), 0px 0px 0.5rem rgba(0 0 0 / 1);
    background: var(--backgound-gradient);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    user-select: none;
    cursor: pointer;
    text-transform: uppercase;
    padding: 0 1em;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 2px 2px black;

    position: relative;

    &:hover {
        box-shadow: inset 0px 0px 0.5rem rgba(0 0 0 / 1), 0px 0px 0.75rem rgba(0 0 0 / 1);
    }
    &:active {
        top: 0.25rem;
    }
}

.active-player {
	transform: translateY(0) scale(1.2);
	animation: 0.6s infinite alternate bounce;
	animation-timing-function: ease-in-out;
}

.controls {
    /* position: fixed; */
    width: 100vw;
    /* left: 0; */
    /* bottom: 0; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 1rem;
    gap: 2rem;
    /* outline: solid 1px black; */
    overflow: hidden;
    /* height: clamp(10rem, 25vh, 20rem); */
    /* height: 10em; */


	.inputs {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 2rem;
	}

    .player-name {
        /* background-color: #5b9cff;
        outline: 4px solid rgb(194, 194, 194);
        padding-left: 0.5em;
        padding-right: 0.5em;
        box-shadow: inset 0px 0px 0.1em rgba(0 0 0 / 1), 0px 0px 0.2em rgba(0 0 0 / 1);
        width: 8em;
        font-size: 5rem;
        text-transform: uppercase; */

        width: 7em;

        font-size: 5rem;
        border-radius: var(--border-radius);
        /* border: var(--border-orange); */
        box-shadow: inset 0px 0px 0.5rem rgba(0 0 0 / 0.5);
        /* background: var(--backgound-gradient); */
		background-color: azure;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: center;
        user-select: none;
        text-transform: uppercase;
        /* padding: 0 1em; */
        text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black, 2px 2px black;
    
        position: relative;
		transition: all 0.1s ease-out;
		caret-color: rgba(0 0 0 / 0.5);
    
        &:hover {
            box-shadow: inset 0px 0px 0.5rem rgba(0 0 0 / 1);
			/* outline: 1px solid orange; */
        }

        &::placeholder {
            color: rgb(211, 214, 242);
			text-shadow: none;
        }
    }

    .player-avatars {
		max-width: 100vw;
        font-size: 5rem;
		padding: 0.0rem;
        display: flex;
        flex-direction: row;
        /* flex-wrap: wrap; */
        align-items: center;
        justify-content: center;
        user-select: none;
        overflow-x: auto;
		overflow-y: hidden;
        scrollbar-color: orange rgb(0,104,255);

        > div {
            position: relative;
            cursor: pointer;
            transition: all 0.1s ease-out;

            &:hover {
                transform: translateY(-0.1em);
            }

            &.chosen {
                transform: translateY(0) scale(1.2);
                animation: 0.6s infinite alternate bounce;
                animation-timing-function: ease-in-out;
            }

            &:active {
                transform: translateY(0em) scale(0.9);
            }
        }
    }

    .buzzer {
        position: relative;
        width:  10em;
        height: 6em;
        border-radius: 100%;
        background-color: red;
        box-shadow: inset 0px 0px 4em rgba(0 0 0 / 1), 0px 0.5em 0.5em rgba(0 0 0 / 0.9);
        cursor: pointer;
		border-bottom: 1em solid rgb(83, 0, 0);
		transition: all 0.1s ease-out;

        &:hover {
            box-shadow: inset 0px 0px 3.5em rgba(0 0 0 / 1), 0px 0.5em 0.5em rgba(0 0 0 / 1);
        }
        &:active {
            top: 0.25em;
        }
    }

    /* > * {
        display: none !important;

        &.show {
            display: unset !important;
        }
    } */
}

@keyframes bounce {
    from {
      translate: 0 -0.05em;
    }
  
    to {
      translate: 0 0;
    }
  }


.stage.lobby {
	#board {transform: scale(0.75);margin: -5vh 0;}
	.face-off-podiums .faceoff-podium-0 {display: none;}
	.face-off-podiums .faceoff-podium-1 {display: none;}
	.face-off-podiums .host-podium {}
	.team-podium-container-0 {}
	.team-podium-container-1 {}
}
.stage.faceoff {
	#board {transform: scale(0.75);margin: -5vh 0;}
	.face-off-podiums .faceoff-podium-0 {}
	.face-off-podiums .faceoff-podium-1 {}
	.face-off-podiums .host-podium {}
	.team-podium-container-0 {display: none;}
	.team-podium-container-1 {display: none;}
}
.stage.round-0, .stage.round-1 {
	#board {transform: scale(0.75);margin: -5vh 0;}
	.face-off-podiums .faceoff-podium-0 {display: none;}
	.face-off-podiums .faceoff-podium-1 {display: none;}
	.face-off-podiums .host-podium {}
	.team-podium-container-0 {}
	.team-podium-container-1 {}
}
.stage.round-0 {
	.team-podium-container-0 {transform: scale(1);}
	.team-podium-container-1 {display: none;}
}
.stage.round-1 {
	.team-podium-container-0 {display: none;}
	.team-podium-container-1 {transform: scale(1);}
}
.stage.survey-says, .stage.round-end {
	#board {transform: scale(1);margin: -5vh 0;}
	.face-off-podiums .faceoff-podium-0 {display: none;}
	.face-off-podiums .faceoff-podium-1 {display: none;}
	.face-off-podiums .host-podium {display: none;}
	.team-podium-container-0 {display: none;}
	.team-podium-container-1 {display: none;}
}