@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap');

#wcup26-game-container { 
	position: relative;
	overflow: hidden;
	touch-action: manipulation;
}
#wcup26GameCanvas { 
	/* border: 3px solid #333;  */
	border-radius: 1.5rem;
	/* box-shadow: 0 10px 20px rgba(0,0,0,0.2);  */
	background-color: transparent; 
	display: block;
	max-width: 1200px;
	height: auto;
	width: 100%;
}
@media (max-width: 991px) {
	#wcup26GameCanvas { 
		border-radius: 0.75rem;
		aspect-ratio: 4 / 1.5;
	}
}
@media (max-width: 575px) {
    #wcup26GameCanvas {
        aspect-ratio: 4 / 2;
    }
}
#wcup26-ui-layer { 
	position: absolute; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%); 
	font-family: "Pixelify Sans", arial, sans-serif;
	font-weight: 400;
	/* font-size: calc(12px + (20 - 12) * (100vw - 320px) / (1920 - 320)); */
	font-size: clamp(12px, 1.5vw, 20px);
	color: #1a1a1a; 
	text-align: center; 
	text-transform: uppercase;
	letter-spacing: 1px;
	pointer-events: none;
	z-index: 10;
	width: 100%;
    max-width: 90%;
}

#wcup26-ui-layer.wcup26-start-position {
    top: 45%;
    transform: translate(-50%, -50%);
}
#wcup26-ui-layer.wcup26-gameover-position {
    top: 55%;
    transform: translate(-50%, -50%);
}

.wcup26-start-ui {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(6px + (15 - 6) * (100vw - 320px) / (1920 - 320));
}
.wcup26-start-ui .wcup26-ball {
	width: calc(15px + (26 - 15) * (100vw - 320px) / (1920 - 320));
	animation: ballBounce 0.8s infinite ease-in-out;
}
.wcup26-start-ui .wcup26-start-text {
	font-family: 'Pixelify Sans', arial, sans-serif;
	font-size: calc(10px + (20 - 10) * (100vw - 320px) / (1920 - 320));
	line-height: calc(10px + (20 - 10) * (100vw - 320px) / (1920 - 320));
	animation: pop 1.2s infinite;
}

.wcup26-gameover-ui {
	font-family: 'Pixelify Sans', sans-serif;
	text-align: center;
}
.wcup26-gameover-ui .wcup26-title {
	font-size: calc(14px + (32 - 14) * (100vw - 320px) / (1920 - 320));
	line-height: calc(14px + (32 - 14) * (100vw - 320px) / (1920 - 320));
	margin-bottom: calc(2px + (5 - 2) * (100vw - 320px) / (1920 - 320));
}
.wcup26-gameover-ui .wcup26-score {
	font-size: calc(10px + (20 - 10) * (100vw - 320px) / (1920 - 320));
	line-height: calc(10px + (20 - 10) * (100vw - 320px) / (1920 - 320));
	margin-bottom: calc(10px + (20 - 10) * (100vw - 320px) / (1920 - 320));
}
.wcup26-gameover-ui .wcup26-retry {
	font-size: calc(8px + (16 - 8) * (100vw - 320px) / (1920 - 320));
	line-height: calc(8px + (16 - 8) * (100vw - 320px) / (1920 - 320));
	animation: blink 1.2s infinite;
}


@keyframes ballBounce {
	0%, 100% { transform: translateY(2px); }
	50% { transform: translateY(-2px); }
}
@keyframes textGlow {
	0% { text-shadow: 0 0 2px #000; }
	100% { text-shadow: 0 0 8px #333; }
}
@keyframes pop {
	0%,100% { transform: scale(1.02); }
	50% { transform: scale(0.98); }
}
@keyframes blink {
	0%,100% { opacity: 1; }
	50% { opacity: 0.4; }
}