/* Reset and base styles */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
	background: radial-gradient(1200px 800px at 50% 50%, #0f172a 0%, #020617 70%);
	color: #e2e8f0;
	overscroll-behavior: none;
	touch-action: none; /* allow multi-touch tracking */
}

.app {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

.overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(2,6,23,0.2), rgba(2,6,23,0.05));
}

.message {
	text-align: center;
	backdrop-filter: blur(2px);
	padding: 16px 20px;
	border-radius: 12px;
	background: rgba(2,6,23,0.25);
	border: 1px solid rgba(226,232,240,0.08);
	box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.message .title {
	display: block;
	font-weight: 700;
	font-size: 20px;
}
.message .subtitle {
	display: block;
	opacity: 0.8;
	margin-top: 6px;
}

.touch {
	position: absolute;
	width: 100px;
	height: 100px;
	margin-left: -50px;
	margin-top: -50px;
	border-radius: 9999px;
	box-shadow: 0 0 0 0 rgba(255,255,255,0.6);
	filter: drop-shadow(0 0 20px rgba(0,0,0,0.5));
	transition: transform 120ms ease;
}

.touch::before,
.touch::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 9999px;
}

/* inner solid circle */
.touch::before {
	background: currentColor;
	opacity: 0.25;
	border: 2px solid currentColor;
}

/* pulsing ring */
.touch::after {
	border: 3px solid currentColor;
	box-shadow: 0 0 36px currentColor, 0 0 90px currentColor inset;
	animation: pulse 1.2s ease-in-out infinite;
	opacity: 0.95;
}

@keyframes pulse {
	0% { transform: scale(0.9); opacity: 1; }
	50% { transform: scale(1.15); opacity: 0.55; }
	100% { transform: scale(0.9); opacity: 1; }
}

.winner {
	animation: winnerPulse 0.8s ease-in-out infinite;
}

@keyframes winnerPulse {
	0% { transform: scale(1.05); filter: drop-shadow(0 0 20px currentColor); }
	50% { transform: scale(1.35); filter: drop-shadow(0 0 45px currentColor); }
	100% { transform: scale(1.05); filter: drop-shadow(0 0 20px currentColor); }
}

/* full-screen winner color overlay */
.winner-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: transparent;
	opacity: 0;
	transition: opacity 250ms ease;
}
.winner-bg.show { opacity: 0.8; }

/* static touch styling */
.touch.static-touch {
	opacity: 0.9;
	cursor: pointer;
}
.touch.static-touch::after {
	animation: staticPulse 2.5s ease-in-out infinite;
}
@keyframes staticPulse {
	0% { transform: scale(0.95); opacity: 0.8; }
	50% { transform: scale(1.1); opacity: 0.6; }
	100% { transform: scale(0.95); opacity: 0.8; }
}

.toast {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	background: rgba(15,23,42,0.9);
	color: #e2e8f0;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid rgba(226,232,240,0.12);
	font-weight: 600;
	box-shadow: 0 10px 30px rgba(0,0,0,0.4);
	opacity: 0;
	transition: opacity 200ms ease, transform 200ms ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }