/* Gili kerti kalandjai – a játék weboldala. Színek és formák a játék felületéből: föld, deszka, levél, Gili narancsa. */

@font-face { font-family: "Baloo 2"; font-weight: 700; font-display: swap; src: url(fonts/baloo-2-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baloo 2"; font-weight: 700; font-display: swap; src: url(fonts/baloo-2-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap; src: url(fonts/baloo-2-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap; src: url(fonts/baloo-2-latin-ext-800-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson"; font-weight: 400; font-display: swap; src: url(fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson"; font-weight: 400; font-display: swap; src: url(fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson"; font-weight: 700; font-display: swap; src: url(fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson"; font-weight: 700; font-display: swap; src: url(fonts/atkinson-hyperlegible-next-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
	--soil: #3e2716;
	--soil-2: #57391f;
	--soil-3: #6a4727;
	--wood: #8b5527;
	--plank: #c9934f;
	--leaf: #4f9a2e;
	--leaf-dark: #2f6a1a;
	--worm: #f2782c;
	--apple: #d8372b;
	--gold: #ffd34d;
	--sprout: #e9f3d8;
	--bg: #f5f9ee;
	--fg: #2a1c10;
	--muted: #5d4a37;
	--card: #ffffff;
	--focus: #1f63d6;
	--radius-big: 26px;
	--radius: 16px;
	--measure: 64ch;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #1b1610;
		--fg: #f3eadc;
		--muted: #c7b49b;
		--sprout: #22301a;
		--card: #2a2118;
		--focus: #8bb8ff;
	}
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 400 1.0625rem/1.6 "Atkinson", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible, .lang:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-family: "Baloo 2", system-ui, sans-serif; line-height: 1.05; margin: 0; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.9rem); font-weight: 800; color: var(--leaf-dark); }
h3 { font-size: 1.45rem; font-weight: 700; }
@media (prefers-color-scheme: dark) { h2 { color: #9fd16b; } }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* --- fejléc-sáv: nyelvváltó --- */
.topbar { position: absolute; inset: 0 0 auto 0; z-index: 3; }
.topbar .wrap { display: flex; justify-content: flex-end; padding-top: 14px; }
.lang {
	font: 700 0.95rem/1 "Atkinson", system-ui, sans-serif;
	color: #fff; background: rgba(62, 39, 22, 0.72);
	padding: 9px 14px; border-radius: 999px; text-decoration: none;
}
.lang:hover { background: var(--soil); }

/* --- nyitó rész: a pálya, rajta a fa tábla --- */
.hero {
	position: relative;
	background: var(--leaf);
	padding: 72px 0 56px;
	overflow: hidden;
}
.board {
	position: absolute; inset: 28px 16px 28px 16px;
	max-width: 1180px; margin: 0 auto;
	border-radius: 18px;
	background-color: var(--soil-2);
	background-image: conic-gradient(var(--soil-3) 25%, transparent 0 50%, var(--soil-3) 0 75%, transparent 0);
	background-size: 96px 96px;
	box-shadow: inset 0 0 0 10px #d9d6cc, inset 0 0 0 14px #a9a397;
}
.board svg { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
.worm-body { fill: none; stroke: var(--worm); stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
.worm-edge { fill: none; stroke: #9a3f10; stroke-width: 38; stroke-linecap: round; stroke-linejoin: round; }
.worm-draw { stroke-dasharray: var(--len); stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
	.worm-draw { animation: crawl 2.6s cubic-bezier(.45, .05, .35, 1) both 0.3s; }
	.worm-head { animation: head-in 0.4s ease-out both 2.75s; }
	@keyframes crawl { from { stroke-dashoffset: var(--len); } }
	@keyframes head-in { from { opacity: 0; transform: scale(0.6); } }
}
.worm-head { transform-box: fill-box; transform-origin: center; }

.sign {
	position: relative; z-index: 2;
	max-width: 560px;
	background-color: var(--wood);
	background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 46px), linear-gradient(180deg, #9a6230, #7d4a20);
	border: 5px solid var(--soil);
	border-radius: var(--radius-big);
	box-shadow: inset 0 3px 0 rgba(255, 220, 160, 0.35), 0 10px 0 rgba(62, 39, 22, 0.45);
	padding: 28px 28px 30px;
	color: #fff4e2;
}
.sign-top { display: flex; gap: 16px; align-items: center; }
.sign-top img { width: 84px; height: 84px; border-radius: 20px; border: 4px solid var(--soil); flex: none; }
.sign h1 {
	font-size: clamp(2.3rem, 1.4rem + 3.6vw, 3.6rem);
	font-weight: 800;
	color: var(--gold);
	-webkit-text-stroke: 7px var(--soil);
	paint-order: stroke fill;
	letter-spacing: 0.005em;
}
.sign .tagline { font-size: 1.2rem; font-weight: 700; margin: 18px 0 6px; color: #fff; }
.sign p { margin: 0 0 18px; max-width: 46ch; }
.store {
	display: inline-flex; align-items: center; gap: 12px;
	background: var(--soil); color: #fff;
	border-radius: 14px; padding: 10px 18px 10px 14px;
	font: 700 1rem/1.2 "Atkinson", system-ui, sans-serif; text-decoration: none;
	border: 2px solid rgba(255, 255, 255, 0.25);
}
.store svg { width: 26px; height: 26px; flex: none; }
.store small { display: block; font-weight: 400; font-size: 0.8rem; opacity: 0.85; }
a.store:hover { background: #000; }

/* --- világok --- */
.section { padding: 72px 0; }
.section-head { max-width: var(--measure); margin-bottom: 32px; }
.section-head p { color: var(--muted); margin: 12px 0 0; font-size: 1.125rem; }

.worlds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; list-style: none; margin: 0; padding: 0; }
.worlds li { min-width: 0; }
.shot { border: 4px solid var(--soil); border-radius: 22px; overflow: hidden; background: var(--soil); aspect-ratio: 9 / 16; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.worlds h3 { margin: 14px 0 4px; color: var(--soil); }
@media (prefers-color-scheme: dark) { .worlds h3, .extras h3 { color: var(--plank); } }
.worlds p { margin: 0; color: var(--muted); font-size: 1rem; }

/* --- öltöztetés és kert --- */
.extras-wrap { background: var(--sprout); }
.extras { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.pair .shot:last-child { transform: translateY(36px); }
.extras .section-lead { color: var(--muted); font-size: 1.125rem; margin: 12px 0 0; max-width: 46ch; }
.extras dl { margin: 24px 0 0; }
.extras dt { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 700; font-size: 1.35rem; color: var(--soil); margin-top: 18px; }
.extras dd { margin: 2px 0 0; color: var(--muted); max-width: 46ch; }

/* --- szülőknek --- */
.parents { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { position: relative; padding: 14px 0 14px 44px; border-bottom: 2px dashed rgba(93, 74, 55, 0.25); }
.checks li:last-child { border-bottom: 0; }
.checks li::before {
	content: ""; position: absolute; left: 4px; top: 16px; width: 24px; height: 24px; border-radius: 50%;
	background: var(--leaf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.parents .more { margin-top: 18px; }

/* --- lábléc --- */
.foot {
	background-color: var(--soil);
	background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0 2px, transparent 2px 38px);
	color: #f1e3cf; padding: 36px 0 44px; font-size: 0.98rem;
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot p { margin: 0; }

@media (max-width: 900px) {
	.worlds { grid-template-columns: repeat(4, 62%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
	.worlds li { scroll-snap-align: start; }
	.extras, .parents { grid-template-columns: 1fr; gap: 32px; }
	.pair { max-width: 460px; }
}
@media (max-width: 560px) {
	.hero { padding: 62px 0 24px; }
	.board { inset: 10px 8px auto 8px; height: 230px; }
	.sign { margin-top: 170px; padding: 22px 18px 24px; }
	.sign-top img { width: 64px; height: 64px; }
	.section { padding: 52px 0; }
	.worlds { grid-template-columns: repeat(4, 74%); }
	.pair .shot:last-child { transform: translateY(24px); }
}