:root {
  --h2-height: 25px;
  --header-height: 35px;
}

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    font-family: 'Roboto';
    font-size: 16px;
}

html {
    height: 100dvh;
    width: 100%;
	touch-action: manipulation;       /* disables double-tap zoom */
    -webkit-text-size-adjust: none;   /* prevents font scaling */
    overscroll-behavior: none;        /* stops bounce/overscroll zoom */
}

body {
    height: 100dvh;
    width: 100%;
	overflow: hidden;
	background: linear-gradient(45deg, #ff0000, #004cff); 
	
	touch-action: manipulation;       /* disables double-tap zoom */
    -webkit-text-size-adjust: none;   /* prevents font scaling */
    overscroll-behavior: none;        /* stops bounce/overscroll zoom */
	pointer-events: auto;
    user-select: none;
}

header {
	width: 100%;
	height: var( --header-height );
	position: fixed;
	top: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 3px solid black;
	padding: 0 10px;
	z-index: 9;
	
	.header-game-control {
		display: none;
		&.visible {
			display: block;
		}
	}
	
	.container-menu {
		border: 3px solid;
        border-top: none;
		display: flex;
		flex-direction: column;
		gap: 10px;
		align-items: center;
		position: fixed;
        top: var( --header-height );
        left: 0;
        height: calc(100% - var( --header-height ) );
        width: 100%;
        background: linear-gradient(45deg, #ff0000, #004cff);
		text-align: center;
        backdrop-filter: blur( 3px );
		transform: translateX( 100% );
		transition: transform 400ms cubic-bezier(.47, 1.64, .41, .8);
		padding: 10px;
		&.visible {
			transform: translateX( 0 );
		}
		h2 {
			width: 100%;
			max-width: 275px;
		}
		button {
			width: 80px;
			&.arrow {
				width: 50px;
			}
			
			&.button-quit {
				display: none;
				&.visible {
					display: block;
				}
			}
		}
		.container, form {
			width: 100%;
			display: flex;
			gap: 10px;
			justify-content: center;
			&.column {
				flex-direction: column;
				align-items: center;
			}
			&.form-logout {
				height: 100%;
				.button-logout {	
					margin-top: auto;
				}
			}
			
			img {
				height: 80px;
			}
			span {
				display: flex;
                height: 80px;
                width: 80px;
                font-size: 45px;
                justify-content: center;
                align-items: center;
			}
		}
	}
	
	
	
}

section {
	display: grid;
	position: absolute;
	height: calc( 100% - var( --header-height ) );
	width: 100%;
	top: 0;
	transform: translateY( 100% );
	opacity: 0;
	transition: transform 400ms cubic-bezier( .47, 1.64, .41, .8 ); 
	backdrop-filter: blur( 3px );
	padding: calc( var( --header-height ) + 10px ) 10px 10px 10px;
	gap: 10px;
	
	grid-template-rows: 1fr 50%;
	
	&.visible {
		transform: translateY( 0 ) !important;
		opacity: 1;
	}
	
	button, input {
		border: 3px solid black;
	}
	
	&.login {
		grid-template-rows: auto;
        justify-content: space-evenly;
        align-items: center;
		
		.form-login {
			display: flex;
            flex-direction: column;
            gap: 7px;
			input {
				padding: 6px;
			}
		}
	}
	
	&.lobby {
		
		z-index: 0;
	}
	&.room {
		z-index: 1;
	}
	
	&.game {
		z-index: 2;
	}
	.container-top {
		display: grid;
		gap: 10px;
				
		&.lobby {
			grid-template-columns: 100px 1fr;
		}
		&.room {
			position: relative;
			/* overflow: hidden; */
			grid-template-columns: 100% 100%;
			transition: transform 400ms cubic-bezier( .47, 1.64, .41, .8 ); 
			&.started {
				transform: translateX( calc( -100% - 10px ) ); 
			}
			
			.container-room {
				height: 100%;
				grid-template-rows: var(--h2-height) 1fr 30px 30px;
			}
			
			.container-game-card {
				
				display: grid;
				grid-template-columns: 1fr 25%;
				grid-template-rows: 1fr;
				justify-content: center;
                align-items: center;
				/* gap: 10px; */
				
				@media ( max-width: 950px ) {
					grid-template-columns: 1fr;
					grid-template-rows: 1fr 25%;
				}
										
				.game-card {
					position: relative;
                    aspect-ratio: 3 / 1;
                    display: grid;
                    grid-template-columns: repeat(9, 1fr);
                    grid-template-rows: repeat(3, 1fr);
                    /* margin-bottom: auto; */
									
					canvas {
						position: absolute;
						width: 100%;
						aspect-ratio: 3 / 1;
						pointer-events: none;
					}
									
					.cell {
						cursor: pointer;
						container-type: inline-size;
						display: flex;
						justify-content: center;
						align-items: center;
						background: hsl( 0deg 0% 100% / 100% );
						border-radius: 50%;
						border: 0.3cqi solid black;
                        margin: 2px;
                        font-size: clamp(0.5rem, 5cqi, 4rem);
                        font-weight: 600;
						&.empty {
							background: hsl(0deg 0% 100% / 50%);
						}
						&.stamped {
							background: red;
						}
						
					}
					.stamp {
						height: calc( 100% / 4.333333333333333 );
                        width: calc( 100% / 13 );
                        position: absolute;
                        /* background-image: url(https://www.shit-hot.uk/bingo/assets/images/stamp-1.png); */
                        background-size: contain;
                        transform: translate(-50%, -50%);
                        pointer-events: none;
                        background-position: center;
                        background-repeat: no-repeat;
                        opacity: 0.9;
					}
				}
				.container-numbers {
					display: grid;
                    grid-template-columns: 1fr;
                    grid-template-rows: repeat(5, 1fr);
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
					
					@media ( max-width: 950px ) {
						grid-template-columns: repeat(5, 1fr);
                        grid-template-rows: 1fr;
					}
					
					.numbers-previous {
						margin: auto;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        
                        border-radius: 50%;
						
                        aspect-ratio: 1 / 1;
                        container-type: inline-size;
                        font-size: clamp(0.5rem, 5cqi, 3rem);
                        font-weight: 600;
                        max-width: 80px;
                        width: 100%;
						
						&.active {
							background: blue;
							border: 2px solid black;	
						}
						
					}
					#numbers_previous_1.active {
						background: red;
					}
					
								
				}
                	
			}
            .container-countdown, .container-bingo, .container-win-lose {
                display: flex;
				flex-direction: column;
                justify-content: center;
                align-items: center;
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
				
				gap: 10px;
                width: 100vw;
				
				
				
                z-index: 9999;
                backdrop-filter: blur( 3px );
				transform: translateX( 200vw );
				transition: transform 150ms ease-in-out;
				
				&.visible {
					transform: translateX( 94vw );
				}
				.span-countdown {
                    font-size: 170px;
                    /* -webkit-text-stroke: 5px #000000; */
                    color: white;
					text-shadow:
					   3px 3px 0 #000,
					 -1px -1px 0 #000,  
					  1px -1px 0 #000,
					  -1px 1px 0 #000,
					   1px 1px 0 #000;
				}
				
				.button-bingo {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 75%;
					aspect-ratio: 1;
					background: red;
					border-radius: 50%;
					border: 10px solid black;
					container-type: inline-size;
					font-size: clamp(0.5rem, 5cqi, 4rem);
					border: 0.3cqi solid black;
				}
				
				img {
					width: 100%;
				}
				
				.button-end-game {
					display: none;
					padding: 10px;
					&.visible{
						display: block;
					}
				}
            }	
		}
		
		.container-online {
			display: grid;
			grid-template-rows: var(--h2-height) 1fr;
			gap: 3px;
		}
		
		.container-room {
			display: grid;
			gap: 3px;
			
			&.lobby {
				grid-template-rows: var(--h2-height) 1fr 30px 30px;
			}
		}
		
	}	
}

.container-bottom {		
	display: grid;
	grid-template-rows: var(--h2-height) auto;
	gap: 3px;
}

.container-chat-inputs {

	position: fixed;
    bottom: 0;
	width: 100%;

	border: 3px solid black;
	display: flex;
	
	z-index: 3;
	
	.text-chat {
		width: 100%;
	}
	
	.button-chat {
		width: 70px;
		height: 30px;
	}
}




h2 {
	text-align: center;
	border: 3px solid black;
}

ul {
	list-style: none;
    overflow-y: scroll;
    border: 3px solid black;
	padding: 4px;
	background: #ffffffd6;
}

li {
	padding: 2px 0;
	&.selected {
		background: #03a9f4;
	}
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="text"] {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 0;          /* reset any existing rounding */
}


.hamburger {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 35px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1000;
}

.hamburger-line {
  position: absolute;
  left: 0;
  width: 35px;
  height: 2px;
  background: black;
  border-radius: 2px;
  transition: all 0.4s ease;
  pointer-events: none; /* clicks pass through to the button */
}

.top {
  top: 8px;
}

.middle {
  top: 16px;
}

.bottom {
  top: 24px;
}

/* When active (cross) */
.hamburger.active .top {
  transform: rotate(45deg) translate(8px, 6px);
}

.hamburger.active .middle {
  opacity: 0;
  transform: translateX(-20px); /* slide out a bit */
}

.hamburger.active .bottom {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Optional: hover effect */
.hamburger:hover .hamburger-line {
  background: #333;
}