:root{
	--bg: #fff4cf;
	--surface: #fffdf7;
	--surface-soft: #fff1e6;
	--border: #ffd166;
	--text: #3a2a12;
	--muted: #7c5c2e;
	--accent: #ff7f50;
	--accent-hover: #ff5a36;
	--success: #48bfe3;
	--danger: #ef476f;
	--x-color: #3a86ff;
	--o-color: #ef476f;
}

*{
	box-sizing: border-box;
}

body{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin: 0;
	padding: 24px;
	color: var(--text);
	font-family: "Comic Sans MS", "Trebuchet MS", cursive;
	background:
		radial-gradient(circle at top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.55) 30%, transparent 31%),
		radial-gradient(circle at 20% 20%, rgba(72,191,227,0.18) 0 10%, transparent 11%),
		radial-gradient(circle at 80% 18%, rgba(255,127,80,0.18) 0 10%, transparent 11%),
		radial-gradient(circle at 18% 82%, rgba(239,71,111,0.16) 0 10%, transparent 11%),
		radial-gradient(circle at 82% 78%, rgba(255,209,102,0.2) 0 10%, transparent 11%),
		linear-gradient(180deg, #fff7dc 0%, var(--bg) 100%);
}

header h1{
	margin: 0 0 12px;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	color: #d97706;
	text-shadow: 2px 2px 0 rgba(255,255,255,0.7);
}

#buttons-container{
	display:flex;
	gap: 18px;
	align-items: center;
	justify-content: center;
	margin: 12px 0 18px;
}

/* Remove underline and ensure anchor wraps the button cleanly */
#buttons-container a{
	text-decoration: none;
	display: inline-block;
}
#buttons-container a:hover,
#buttons-container a:focus{
	text-decoration: none;
}

#buttons-container button{
	width: min(120px, 18vw);
	aspect-ratio: 1/1;
	font-size: clamp(1.1rem, 2.8vw, 1.6rem);
	font-weight: 800;
	color: var(--text);
	background: linear-gradient(180deg, #fffdf7, #fff0c9);
	border: 3px solid #ffd166;
	border-radius: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition:
		transform 0.16s ease,
		box-shadow 0.16s ease,
		border-color 0.16s ease,
		color 0.16s ease,
		background 0.16s ease;
}

#buttons-container button:hover:not(:disabled){
	transform: translateY(-2px) scale(1.03);
	border-color: var(--accent);
	box-shadow: 0 10px 22px rgba(255, 127, 80, 0.2);
	background: linear-gradient(180deg, #fff8e7, #ffe4b3);
}

#buttons-container button:focus{
	outline: none;
	box-shadow: 0 0 0 4px rgba(255, 127, 80, 0.18);
}

#buttons-container button:disabled{
	cursor: not-allowed;
	opacity: 1;
	background: linear-gradient(180deg, #fff7e6, #ffe8c2);
}

#3x3-button{ background: linear-gradient(180deg,#fff9f2,#ffdede); border-color: rgba(255,107,107,0.28); }
#4x4-button{ background: linear-gradient(180deg,#fffef6,#fff6c8); border-color: rgba(255,209,102,0.28); }
#5x5-button{ background: linear-gradient(180deg,#f3fff6,#dfffe8); border-color: rgba(107,203,119,0.22); }

#buttons-container button.selected{
	color: #fff;
	border-color: transparent;
	background: linear-gradient(180deg, var(--accent), var(--accent-hover));
	box-shadow: 0 16px 28px rgba(255, 91, 51, 0.26);
}

#hint-container{
	width: min(100%, 640px);
	margin-top: 18px;
	padding: 18px 20px;
	text-align: center;
}

#hint-text{
	margin: 0 auto;
	min-height: 88px;
	padding: 14px 16px;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--surface-soft), #ffe8d6);
	border: 3px dashed var(--border);
	color: var(--accent-hover);
	font-weight: 700;
	overflow: hidden;
}

#hint-text-content{
	display: block;
	will-change: transform, opacity;
}

#hint-text-content.hint-enter-right{
	animation: hintEnterRight 0.45s ease both;
}

#hint-text-content.hint-exit-left{
	animation: hintExitLeft 0.35s ease both;
}

@keyframes hintEnterRight{
	from{
		opacity: 0;
		transform: translateX(55%);
	}
	to{
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes hintExitLeft{
	from{
		opacity: 1;
		transform: translateX(0);
	}
	to{
		opacity: 0;
		transform: translateX(-55%);
	}
}

#back-button{
	margin-top: 18px;
	padding: 12px 22px;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #fff;
	border: 3px solid #ff5a36;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--accent), var(--accent-hover));
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(255, 90, 54, 0.2);
	transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

#back-button:hover{ transform: translateY(-1px) scale(1.02); box-shadow: 0 12px 26px rgba(255, 90, 54, 0.26); }

@media (max-width: 520px){
	#buttons-container{ gap: 10px; }
	#buttons-container button{ width: 84px; height: 84px; font-size: 1rem; }
	#hint-text{ min-height: 64px; }
}