styles.css

:root {
	--bg: #0f172a;
	--panel: #111827;
	--muted: #6b7280;
	--text: #e5e7eb;
	--accent: #38bdf8;
	--accent-2: #22c55e;
	--danger: #ef4444;
	--tile: #1f2937;
	--tile-border: #334155;
	--focus: #f59e0b;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
	margin: 0;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
	background: radial-gradient(1200px 800px at 50% -10%, #1e293b, var(--bg));
	color: var(--text);
}

.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px;
}

.site-header {
	background: transparent;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header h1 {
	margin: 8px 0 4px;
	font-weight: 800;
	letter-spacing: 0.5px;
}
.tagline { color: var(--muted); margin-top: 0; }

.controls {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	align-items: end;
	background: rgba(17,24,39,0.6);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	padding: 16px;
	backdrop-filter: blur(6px);
}
.control-group label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.control-group select {
	width: 100%;
	background: var(--panel);
	color: var(--text);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 8px;
	padding: 10px 12px;
}
.score-group { display: flex; gap: 16px; align-items: center; }
.stat { text-align: center; }
.stat span { display: block; font-weight: 700; font-size: 20px; }
.buttons { display: flex; gap: 12px; justify-content: flex-end; }
.btn {
	background: var(--panel);
	color: var(--text);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
	padding: 10px 14px;
	cursor: pointer;
	transition: transform 0.06s ease, background 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.14); }
.btn.primary { background: linear-gradient(135deg, var(--accent), #0ea5e9); border: none; color: #002233; font-weight: 700; }

.game {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 20px 0;
}
.game h2 { margin: 8px 0 12px; font-size: 18px; color: var(--muted); font-weight: 600; }
.pattern, .board {
	background: rgba(17,24,39,0.6);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	padding: 16px;
	min-height: 320px;
}

.grid {
	display: grid;
	gap: 8px;
	user-select: none;
}

.tile {
	background: var(--tile);
	border: 1px solid var(--tile-border);
	border-radius: 10px;
	aspect-ratio: 1 / 1;
	position: relative;
	cursor: pointer;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,0.02);
	transition: transform 0.12s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease, filter 0.25s ease;
}
.tile:focus { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.tile.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(56,189,248,0.4); transform: translateY(-2px); }
.tile.hint { animation: pulse 1s ease-in-out 0s 3; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(56,189,248,0.0);} 50% { box-shadow: 0 0 0 6px rgba(56,189,248,0.35);} }
/* global win shimmer */
.grid.win .tile::before {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 12px;
	background: linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.0) 100%);
	animation: shimmer 1200ms ease;
	opacity: 0.7;
}
@keyframes shimmer { from { transform: translateX(-120%); } to { transform: translateX(120%); } }

/* Animated entry and bump */
.tile.enter { animation: tileEnter 300ms ease; }
.tile.bump { animation: tileBump 260ms ease; }
@keyframes tileEnter { from { transform: scale(0.9); opacity: 0.3; } to { transform: scale(1); opacity: 1; } }
@keyframes tileBump { 0% { transform: translateY(0); } 40% { transform: translateY(-4px); } 100% { transform: translateY(0); } }

/* 3D mode styles */
.grid.is-3d .tile {
	transform-style: preserve-3d;
	box-shadow: 0 8px 20px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.03);
	filter: saturate(1.05) contrast(1.05);
}
.grid.is-3d .tile::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 10px;
	background: linear-gradient( to bottom right, rgba(255,255,255,0.16), rgba(255,255,255,0.02) );
	transform: translateZ(6px);
	pointer-events: none;
}
.grid.is-3d:hover .tile { transform: translateY(-3px) rotateX(3deg) rotateY(-3deg); }
.grid.is-3d .tile.selected { transform: translateY(-6px) rotateX(5deg) rotateY(-5deg); }

.how-to {
	background: rgba(17,24,39,0.6);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 20px;
}

.site-footer {
	border-top: 1px solid rgba(255,255,255,0.06);
	background: rgba(17,24,39,0.65);
	backdrop-filter: blur(8px);
	margin-top: 20px;
}
.site-footer a { color: var(--accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 900px) {
	.controls { grid-template-columns: 1fr 1fr; }
	.buttons { grid-column: 1 / -1; justify-content: flex-start; }
	.game { grid-template-columns: 1fr; }
}

/* Dynamic grid sizes */
.grid.size-3 { grid-template-columns: repeat(3, 1fr); }
.grid.size-4 { grid-template-columns: repeat(4, 1fr); }
.grid.size-5 { grid-template-columns: repeat(5, 1fr); }
.grid.size-6 { grid-template-columns: repeat(6, 1fr); }
.grid.size-7 { grid-template-columns: repeat(7, 1fr); }