/* Early Learning Games — landing page (games live at /early, kiosk-style). */

.el { display:flex; flex-direction:column; gap:26px; margin-top:6px; }

.el_hero { text-align:center; padding:10px 0 4px; }
.el_play {
	display:inline-block;
	font-size:26px; font-weight:bold; text-decoration:none; color:#fff;
	background:var(--accent_5, #2b9fe0);
	border-radius:16px;
	padding:16px 44px;
	box-shadow:0 6px 0 rgba(0,0,0,.18);
}
.el_play:active { transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.18); }
.el_heronote { color:#667; max-width:560px; margin:12px auto 0; }

.el_h2 { margin:0; font-size:20px; }

.el_grid {
	display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
	gap:14px;
}
.el_tile {
	display:flex; flex-direction:column; gap:4px;
	background:#fff; border:2px solid #dde5ee; border-radius:14px;
	padding:14px 16px; text-decoration:none; color:#334;
	transition:transform .12s, border-color .12s;
}
.el_tile:hover { transform:translateY(-2px); border-color:var(--accent_5, #2b9fe0); }
.el_icon { font-size:30px; line-height:1.2; }
.el_name { font-weight:bold; font-size:17px; }
.el_desc { font-size:13px; color:#68788c; line-height:1.45; }

.el_cols { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; }
.el_panel { background:#f5f8fb; border-radius:14px; padding:16px 20px; }
.el_panel h2 { margin:0 0 8px; font-size:17px; }
.el_list { margin:0; padding-left:20px; }
.el_list li { margin:6px 0; line-height:1.5; }

@media (max-width: 520px){
	.el_play { font-size:21px; padding:14px 30px; }
}