@font-face {
	font-family: "Fredoka";
	src: url("fonts/Fredoka.ttf") format("truetype");
	font-weight: 300 700;
	font-display: swap;
}

:root {
	color-scheme: light only;
	--tomato: #D9482B;
	--tomato-dark: #B23A22;
	--flour: #F6EBD9;
	--flour-light: #FBF5EC;
	--basil: #4E8B3A;
	--wood: #7A4A2A;
	--ember: #F2A03D;
	--ink: #3E2414;
	--radius: 22px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
	font-weight: 400;
	color: var(--ink);
	background-color: var(--flour);
	/* tovaglia a quadri, molto tenue */
	background-image:
		linear-gradient(90deg, rgba(217, 72, 43, 0.06) 50%, transparent 50%),
		linear-gradient(rgba(217, 72, 43, 0.06) 50%, transparent 50%);
	background-size: 64px 64px;
	line-height: 1.55;
}

a { color: var(--tomato-dark); }
a:hover { color: var(--tomato); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* --- Intestazione --- */
header.hero {
	text-align: center;
	padding: 56px 0 40px;
}
header.hero .logo { width: min(640px, 92%); height: auto; }
.tagline {
	font-size: clamp(1.15rem, 2.6vw, 1.5rem);
	color: var(--wood);
	margin: 18px 0 0;
	font-weight: 500;
}

/* --- Schede --- */
.card {
	background: var(--flour-light);
	border: 4px solid var(--ink);
	border-radius: var(--radius);
	box-shadow: 0 8px 0 rgba(62, 36, 20, 0.18);
	padding: 32px clamp(20px, 4vw, 44px);
	margin: 0 0 36px;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 12px; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); color: var(--tomato); font-weight: 700; }
h3 { font-size: 1.2rem; color: var(--wood); font-weight: 600; }

.game {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 28px;
	align-items: center;
}
.game p { margin: 0 0 16px; font-size: 1.08rem; }
.badge {
	display: inline-block;
	background: var(--basil);
	color: #fff;
	font-weight: 600;
	border-radius: 999px;
	padding: 4px 14px;
	font-size: 0.9rem;
	margin-bottom: 12px;
}
.btn {
	display: inline-block;
	background: var(--tomato);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	font-size: 1.05rem;
	padding: 12px 24px;
	border-radius: 14px;
	border: 3px solid var(--ink);
	box-shadow: 0 5px 0 var(--ink);
	transition: transform 0.1s, box-shadow 0.1s;
}
.btn:hover { color: #fff; transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); }
.btn.soon { background: var(--wood); cursor: default; }
.btn.soon:hover { transform: none; box-shadow: 0 5px 0 var(--ink); }

.shot {
	width: 100%;
	height: auto;
	border-radius: 14px;
	border: 4px solid var(--ink);
	display: block;
}
.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 24px;
}

/* --- Storia --- */
.story { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: start; }
.story img { width: 120px; height: 120px; }
.story p { margin: 0 0 12px; font-size: 1.08rem; }

/* --- Social --- */
.social {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 16px 0 0;
}
.social a {
	display: inline-block;
	text-decoration: none;
	color: var(--ink);
	background: var(--flour);
	border: 3px solid var(--ink);
	border-radius: 12px;
	padding: 8px 16px;
	font-weight: 600;
}
.social a:hover { background: var(--ember); color: var(--ink); }

footer {
	text-align: center;
	padding: 8px 0 48px;
	color: var(--wood);
	font-size: 0.95rem;
}
footer a { color: var(--wood); }

/* --- Pagine di testo (privacy) --- */
.doc h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); color: var(--tomato); }
.doc h2 { font-size: 1.35rem; color: var(--wood); margin-top: 28px; }
.doc p, .doc li { font-size: 1.05rem; }
.back { display: inline-block; margin: 28px 0 20px; font-weight: 600; }

@media (max-width: 760px) {
	.game { grid-template-columns: 1fr; }
	.gallery { grid-template-columns: 1fr; }
	.story { grid-template-columns: 1fr; }
	.story img { width: 96px; height: 96px; }
}