/* ── Fonts — zelfde @font-face als css/font.css in de game ─────────── */
@font-face 
{
	font-family: "Patrick Hand";
	font-style:  normal;
	font-weight: 400;
	src: url( "https://lingoquest.world/ttf/PatrickHand-Regular.ttf" ) format( "truetype" );
	font-display: swap;
}

@font-face 
{
	font-family: "Cormorant Garamond";
	font-style:  normal;
	font-weight: 400 700;
	src: url( "https://lingoquest.world/ttf/CormorantGaramond-VariableFont_wght.ttf" ) format( "truetype" );
	font-display: swap;
}

:root
{
	--bg:            #1a1410;
	--bg-alt:        #221a14;
	--panel:         #2a2119;
	--border:        #3d2f22;
	--cream:         #f2e8d5;
	--cream-dim:     #cbbca3;
	--terracotta:    #c1502e;
	--terracotta-lt: #d9714f;
	--ochre:         #cf9d2e;
	--olive:         #5b6b4d;
	--font-serif: 'Cormorant Garamond', Georgia, serif;   /* storyline + leestekst — de "face" */
	--font-hand:  'Patrick Hand', cursive;                 /* alleen knoppen/CTA's — dialoog-accent, niet blanket */
	--maxw: 1120px;

}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body
{
	background:var(--bg);
	color:var(--cream);
	font-family:var(--font-serif);
	font-weight:400;
	font-size:1.18rem;      /* Cormorant Garamond is fijn getekend — iets groter voor leesbaarheid */
	line-height:1.75;
	-webkit-font-smoothing:antialiased;
	
}

img{ max-width:100%; display:block; }

.wrap
{
	max-width:var(--maxw);
	margin:0 auto;
	padding:0 24px;
}

a{ color:inherit; }

h1,h2,h3
{
	font-family:var(--font-serif);
	font-weight:600;
	letter-spacing:0.02em;
}

.eyebrow
{
	display:inline-block;
	font-family:var(--font-serif);
	font-style:italic;
	font-weight:500;
	font-size:1.05rem;
	letter-spacing:0.03em;
	color:var(--ochre);
	margin-bottom:14px;
}

.btn
{
	display:inline-block;
	font-family:var(--font-hand);
	font-weight:400;   /* Patrick Hand heeft maar 1 gewicht — geen synthetic bold */
	font-size:1.2rem;
	letter-spacing:0.02em;
	text-decoration:none;
	padding:14px 34px;
	border-radius:4px;
	transition:transform .15s ease, box-shadow .15s ease;
}

.btn-primary
{
	background:var(--terracotta);
	color:#fff8ef;
	box-shadow:0 6px 18px rgba(193,80,46,0.35);
}

.btn-primary:hover{ background:var(--terracotta-lt); transform:translateY(-1px); }

.btn-ghost
{
	color:var(--cream-dim);
	font-size:0.9rem;
	border-bottom:1px solid var(--border);
	padding:4px 0;
	border-radius:0;
}

.btn-ghost:hover{ color:var(--ochre); border-color:var(--ochre); }




/* ---------- NAV ---------- */
header.site{
	position:sticky; top:0; z-index:50;
	background:rgba(26,20,16,0.9);
	backdrop-filter:blur(6px);
	border-bottom:1px solid var(--border);
}
nav.wrap{
	display:flex; align-items:center; justify-content:space-between;
	height:64px;
}
.logo{
	font-family:var(--font-serif);
	font-size:1.15rem;
	letter-spacing:0.06em;
	color:var(--cream);
	text-decoration:none;
}
.logo span{ color:var(--terracotta-lt); }
/* nav-actions bundelt de play-knop + taalswitcher rechts, zodat de
	 ruimteverdeling van nav.wrap (space-between) voorspelbaar blijft:
	 logo links, deze groep rechts, met een vaste gap ertussen — in plaats
	 van drie losse flex-items die elk hun eigen stukje ruimte opeisen.
	 Volgorde binnen de groep: Play Now eerst, .lang-select als laatste
	 (rechterrand) — zo gevraagd i.p.v. select vóór de CTA. */
.nav-actions{
	display:flex;
	align-items:center;
	gap:16px;
}
.lang-select{
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
	background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23cbbca3' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
	color:var(--cream);
	border:1px solid var(--border);
	border-radius:4px;
	padding:7px 28px 7px 12px;
	font-family:var(--font-serif);
	font-size:0.9rem;
	line-height:1.2;
	letter-spacing:0.02em;
	cursor:pointer;
	transition:border-color .15s ease;
}
.lang-select:hover{ border-color:var(--ochre); }
.lang-select:focus{ border-color:var(--ochre); outline:none; }
/* De dichtgeklapte select (hierboven) volgt gewoon --font-serif. De
	 geopende optielijst is op de meeste mobiele browsers (Android Chrome/
	 WebView zeker, Samsung Internet, en varianten daarvan zoals op de
	 Redmi 10) een NATIVE systeem-widget van het OS — die negeert elke
	 custom @font-face/font-family, ook al staat 'ie hieronder wél
	 ingesteld. Dat is een browserbeperking, geen bug in deze CSS; het is
	 ook waarom je de vlag+ISO-code combinatie hierboven ziet i.p.v. alleen
	 de vlag, voor het geval het systeemlettertype de emoji anders toont.
	 Wil je de optielijst zelf ook in Cormorant Garamond, dan moet .lang-
	 select vervangen worden door een eigen HTML/JS-dropdown (div + ul i.p.v.
	 <select>) — dat styled je volledig zelf, maar kost meer code. */
.lang-select option{
	background:var(--panel);
	color:var(--cream);
	font-family:var(--font-serif);
}
nav.wrap .btn-primary{ padding:9px 20px; font-size:0.88rem; }
/* Veiligheidsnet voor smallere telefoons dan de Redmi 10 (~360-393px
	 CSS-breedte) — logo + Play Now + select passen daar mogelijk niet meer
	 zonder overlap op één regel van 64px. Verkleint gap/padding iets;
	 verandert niets aan layout of volgorde. */
@media(max-width:400px){
	.wrap{ padding:0 16px; }
	.nav-actions{ gap:10px; }
	.lang-select{ padding:6px 24px 6px 9px; font-size:0.82rem; background-position:right 8px center; }
	nav.wrap .btn-primary{ padding:8px 14px; font-size:0.8rem; }
	.logo{ font-size:1.02rem; }
}




/* ---------- HERO ---------- */
/* Echte level 1-achtergrond uit de game (GAME.BACKGROUND.SRC, level1.json).
	 Stilstaand — de Ken Burns-pan/zoom is geprobeerd maar oogde niet goed
	 met deze afbeelding (te grote/gedetailleerde compositie voor de crop),
	 dus terug naar de vaste versie. Twee gradient-lagen erbovenop: een
	 linker scrim zodat de (links uitgelijnde) hero-tekst leesbaar blijft, en
	 een onderrand-fade die overloopt in de volgende sectie. */
.hero
{
	position:relative;
	min-height:88vh;
	display:flex;
	align-items:center;
	background-color:var(--bg);
	background-image:
		linear-gradient(180deg, transparent 55%, var(--bg) 100%),
		linear-gradient(90deg, rgba(26,20,16,0.95) 0%, rgba(26,20,16,0.80) 30%, rgba(26,20,16,0.40) 58%, rgba(26,20,16,0.10) 90%),
		url('/jpg/campina-2880x1440-web-jpg-medium-v2.jpg');
	background-size:auto, auto, cover;
	background-position:center, center, center 40%;
	background-repeat:no-repeat;
	border-bottom:1px solid var(--border);
	overflow:hidden;
	
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;	
}

.hero .wrap{ position:relative; z-index:2; padding-top:60px; padding-bottom:60px; }
.hero-inner{ max-width:640px; }

.hero h1
{
	font-size:clamp(2.6rem, 6vw, 4.2rem);
	line-height:1.05;
	color:var(--cream);
	margin-bottom:20px;
}

.hero p.lead
{
	font-size:1.15rem;
	color:var(--cream-dim);
	max-width:520px;
	margin-bottom:34px;
}

.hero-ctas{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; }



/* Mobiel: portrait & landscape crops. De basisfoto hierboven (2880×1440,
	 "cover" met focus center 40%) is gecomponeerd voor brede/liggende
	 viewports. Op een telefoon in portrait valt het grootste deel van die
	 compositie links/rechts buiten beeld; op een telefoon in landscape (weinig
	 hoogte) wordt juist boven/onder afgesneden. Twee losse crops lossen dat
	 op, elk met een eigen 1x/2x-paar — het background-image-equivalent van
	 <img srcset>, via image-set(). @supports zorgt voor een schone fallback:
	 browsers zonder image-set()-support houden gewoon de losse url() hierboven
	 aan.
	 Placeholder-bestandsnamen — vervang door de echte crops zodra die
	 geëxporteerd zijn; zelfde /jpg/-map, zelfde naamconventie als hierboven. */
@media(max-width:700px) and (orientation:portrait){
	.hero{
		background-image:
			linear-gradient(180deg, transparent 55%, var(--bg) 100%),
			linear-gradient(90deg, rgba(26,20,16,0.95) 0%, rgba(26,20,16,0.80) 30%, rgba(26,20,16,0.40) 58%, rgba(26,20,16,0.10) 90%),
			url('/jpg/campina-960x1280-portrait-mobile.jpg');
		background-position:center, center, center 30%;
	}
	@supports (background-image:image-set(url('/jpg/campina-960x1280-portrait-mobile.jpg') 1x)){
		.hero{
			background-image:
				linear-gradient(180deg, transparent 55%, var(--bg) 100%),
				linear-gradient(90deg, rgba(26,20,16,0.95) 0%, rgba(26,20,16,0.80) 30%, rgba(26,20,16,0.40) 58%, rgba(26,20,16,0.10) 90%),
				image-set(
					url('/jpg/campina-960x1280-portrait-mobile.jpg') 1x,
					url('/jpg/campina-1920x2560-portrait-mobile@2x.jpg') 2x
				);
		}
	}
}
@media(max-height:500px) and (orientation:landscape){
	.hero{
		min-height:100vh; /* 88vh laat op een korte landscape-telefoon amper ruimte voor de tekst */
		background-image:
			linear-gradient(180deg, transparent 55%, var(--bg) 100%),
			linear-gradient(90deg, rgba(26,20,16,0.95) 0%, rgba(26,20,16,0.80) 30%, rgba(26,20,16,0.40) 58%, rgba(26,20,16,0.10) 90%),
			url('/jpg/campina-1280x600-landscape-mobile.jpg');
		background-position:center, center, center 40%;
	}
	@supports (background-image:image-set(url('/jpg/campina-1280x600-landscape-mobile.jpg') 1x)){
		.hero{
			background-image:
				linear-gradient(180deg, transparent 55%, var(--bg) 100%),
				linear-gradient(90deg, rgba(26,20,16,0.95) 0%, rgba(26,20,16,0.80) 30%, rgba(26,20,16,0.40) 58%, rgba(26,20,16,0.10) 90%),
				image-set(
					url('/jpg/campina-1280x600-landscape-mobile.jpg') 1x,
					url('/jpg/campina-2560x1200-landscape-mobile@2x.jpg') 2x
				);
		}
	}
}




/* ---------- SECTION SHELL ---------- */
section{ padding:96px 0; }
section.alt{ background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.section-head{ max-width:640px; margin-bottom:52px; }
.section-head h2{ font-size:clamp(1.7rem, 3.4vw, 2.4rem); color:var(--cream); margin-bottom:14px; }
.section-head p{ color:var(--cream-dim); font-size:1.05rem; }




/* ---------- CONCEPT (Quest + Lingo) ---------- */
.concept-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:20px;
}
@media(min-width:760px){ .concept-grid{ grid-template-columns:1fr 1fr; } }
.concept-card{
	background:var(--panel);
	border:1px solid var(--border);
	border-radius:8px;
	padding:32px;
}
.concept-card h3{
	font-size:1.3rem;
	color:var(--ochre);
	margin-bottom:12px;
}
.concept-card p{ color:var(--cream-dim); }
.concept-meet{
	text-align:center;
	margin-top:28px;
	padding:20px;
	border-top:1px dashed var(--border);
	color:var(--cream-dim);
	font-family:var(--font-serif);
	font-size:1.05rem;
	letter-spacing:0.02em;
}
.concept-meet strong{ color:var(--terracotta-lt); }




/* ---------- STORY / CHARACTERS ---------- */
.story-text{ max-width:680px; color:var(--cream-dim); font-size:1.05rem; margin-bottom:48px; }
.story-text::after{ content:""; display:table; clear:both; }  /* vangt de float op, anders lekt-ie in .cast */
.story-text p + p{ margin-top:16px; }

.player-figure{
	float:left;
	width:96px;
	margin:2px 20px 12px 0;
	text-align:center;
}
.player-portrait{
	width:96px; height:96px;
	border-radius:50%;
	border:3px solid var(--terracotta-lt);
	box-shadow:0 4px 14px rgba(193,80,46,0.3);
	background-image:url('/png/elmudo-avatar.png');
	background-repeat:no-repeat;
	background-size: cover;
	background-position: center center;
	image-rendering:pixelated;
}
.player-figure figcaption{
	font-family:var(--font-serif);
	font-style:italic;
	font-size:0.85rem;
	color:var(--ochre);
	margin-top:8px;
}
.cast{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:18px;
}
@media(min-width:640px){ .cast{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:900px){ .cast{ grid-template-columns:repeat(6,1fr); } }
.cast-member{ text-align:center; }
.cast-portrait{
	width:76px; height:76px;
	margin:0 auto 10px;
	border-radius:50%;
	background:linear-gradient(160deg, var(--olive), var(--terracotta));
	border:2px solid var(--border);

}

.cast-portrait--gitana{
	background-image:url('/png/gitana-avatar.png');
	background-repeat:no-repeat;
	background-size: cover;
	background-position: center center;
	image-rendering:pixelated;             /* scherp pixel-art, geen blur bij opschalen */
}

.cast-portrait--nino{
	background-image:url('/png/nino-avatar.png');
	background-repeat:no-repeat;
	background-size: cover;
	background-position: center center;
	image-rendering:pixelated;
}

.cast-portrait--vieja{
	background-image:url('/png/vieja-avatar.png');
	background-repeat:no-repeat;
	background-size: cover;
	background-position: center center;
	image-rendering:pixelated;
}

.cast-portrait--reina{
	background-image:url('/png/reina-avatar.png');
	background-repeat:no-repeat;
	background-size: cover;
	background-position: center center;
	image-rendering:pixelated;
}

.cast-portrait--donquixote{
	background-image:url('/png/donquixote-avatar.png');
	background-repeat:no-repeat;
	background-size: cover;
	background-position: center center;
	image-rendering:pixelated;
}

.cast-portrait--friar{
	background-image:url('/png/friar-avatar.png');
	background-repeat:no-repeat;
	background-size: cover;
	background-position: center center;
	image-rendering:pixelated;
}
.cast-member span{ font-size:0.85rem; color:var(--cream-dim); }




/* ---------- SCREENSHOTS ---------- */
#screenshots .wrap{ }
.shot-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:16px;
}
@media(min-width:640px){ .shot-grid{ grid-template-columns:1fr 1fr; } }
.shot{
	aspect-ratio:16/10;
	border-radius:8px;
	border:1px solid var(--border);
	background:linear-gradient(135deg, var(--panel), var(--bg-alt));
	display:flex; align-items:flex-end;
	overflow:hidden;
	position:relative;
}

.shot--campina{
	background-image:url('/jpg/og-image.jpg');
	background-size:cover;
	background-position:center 35%;
}

.shot--citygate{
	background-image:url('/jpg/og-image-level-2-ss-2.jpg');
	background-size:cover;
	background-position:52% 55%;
}

.shot--plaza{
	background-image:url('/jpg/og-image-level-3-ss-2.jpg');
	background-size:cover;
	background-position:center 60%;
}
/* Echt geëxporteerd gameplay-screenshot (dialoog + antwoordknoppen +
	 score-HUD in de cottage). Staat al live op de server. contain i.p.v.
	 cover: dit is UI (HUD/tekst/knoppen), afsnijden aan de randen zou
	 precies het belangrijkste (score, sluit-knop, antwoordteksten) killen. */
.shot--lingo{
	background-image:url('/png/screenshot-quiz.png');
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}
.shot span{
	display:block;
	width:100%;
	padding:14px 16px;
	background:linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
	font-size:0.85rem;
	color:var(--cream-dim);
}
/* .shot--lingo toont een druk UI-screenshot (HUD/tekst/knoppen) tot in de
	 onderrand — een gradient die naar transparant vervaagt is daar niet
	 genoeg contrast. Effen donkere balk in plaats van gradient. */
.shot--lingo span{
	background:rgba(10,8,6,0.85);
}




/* ---------- FEATURES ---------- */
.feature-grid{
	display:grid;
	grid-template-columns:1fr;
	gap:24px;
}
@media(min-width:640px){ .feature-grid{ grid-template-columns:1fr 1fr; } }
@media(min-width:980px){ .feature-grid{ grid-template-columns:repeat(4,1fr); } }
.feature{ }
.feature .num{
	font-family:var(--font-serif);
	color:var(--terracotta-lt);
	font-size:1.6rem;
	display:block;
	margin-bottom:10px;
}
.feature h3{ font-size:1.05rem; color:var(--cream); margin-bottom:8px; }
.feature p{ color:var(--cream-dim); font-size:0.95rem; }




/* ---------- FINAL CTA ---------- */
.final-cta{
	text-align:center;
	padding:110px 0;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(193,80,46,0.16), transparent 60%),
		var(--bg);
}
.final-cta h2{ font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:16px; }
.final-cta p{ color:var(--cream-dim); margin-bottom:32px; }
.final-cta .fineprint{ margin-top:18px; font-size:0.85rem; color:var(--cream-dim); opacity:0.75; }




/* ---------- FOOTER ---------- */
footer.site
{
	border-top:1px solid var(--border);
	padding:36px 0;
}
footer.site .wrap
{
	display:flex; flex-wrap:wrap; gap:12px;
	align-items:center; justify-content:space-between;
	font-size:0.90rem; color:var(--cream-dim);
}
footer.site a{ text-decoration:none; }
footer.site a:hover{ color:var(--ochre); }

/* Groepeert de donate-link + mail-link samen rechts, zelfde reden als
	 .nav-actions hierboven: copyright blijft links via space-between op
	 footer.site .wrap, deze twee blijven bij elkaar i.p.v. los te wedijveren
	 om de resterende ruimte. Generieke footer-layout — hoort hier, niet in
	 footer-donate.css, want niet specifiek aan de donate-feature gebonden. */
.footer-links
{
	display:flex;
	align-items:center;
	gap:20px;
}