* {
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
}

body {
	background: #ffffff;
	font-family: Arial, sans-serif;
}

/* =================================================
	 10 × 10 GRID
	 ================================================= */

.grid {
	width: 100vw;
	height: 100dvh;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows:	repeat(10, 1fr);
	gap: 0;
	padding: 0;
}

/* =================================================
	 BOX
	 ================================================= */

.box {
	background: #e5e5e5;
	border-radius: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Arial, sans-serif;
	font-size: clamp(12px, 2vw, 24px);
	font-weight: 500;
	color: #555;
	cursor: pointer;
	user-select: none;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}

.box:hover {
	background: #444;
	color: #ffffff;
}

/* =================================================
	 CLICK COUNT
	 ================================================= */

.box .count {
	font-size: inherit;
	line-height: 1;
	display: none;
}

.box.show-count .count {
	display: block;
}

/* 
 * While a clicked number is being held for
 * 3 seconds, keep the number visible even
 * when the pointer leaves the box.
 */

.box.hold-count .count {
	display: block;
}

/*
 * Keep the clicked box highlighted during
 * the 3-second hold.
 */

.box.hold-count {
	background: #444;
	color: #ffffff;
}

/* =================================================
	 CENTER OVERLAY
	 ================================================= */

.center-overlay {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	text-align: center;
	pointer-events: none;
	user-select: none;
	font-family: Arial, sans-serif;
	color: #ef8019;
}

/* =================================================
	 BIGT
	 ================================================= */

#bigt {
	font-size: clamp(40px, 10vw, 120px);
	font-weight: bold;
	line-height: 1;
	white-space: nowrap;
}

/* =================================================
	 COUNTDOWN
	 ================================================= */

#countdownContainer {
	display: none;
}

.countdown-label {
	font-size: clamp(14px, 2vw, 24px);
	margin-bottom: 5px;
	line-height: 1.2;
}

#countdown {
	font-size: clamp(32px, 6vw, 72px);
	font-weight: bold;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}