/* supertedo.com - шарено, космическо, за деца. Цветовете - от иконата на Space Poachers. Без външни шрифтове.
   Темата следва настройката на браузъра / телефона (prefers-color-scheme): тъмна - „космос", светла - „дневно небе".
   Всеки цвят е променлива; светлата тема подменя само променливите (най-долу). */
:root {
	color-scheme: dark light;

	--space: #0d1030;
	--space-2: #161a45;
	--card: #1d2257;
	--text: #f4f6ff;
	--muted: #b9bfe8;
	--link: #4fd8ff;
	--glow-1: #3a2a8a;
	--glow-2: #0f4a6e;
	--stars-opacity: .8;
	--title-gradient: linear-gradient(90deg, #ffd23f, #ff4fa3, #4fd8ff);
	--heading-accent: #ffd23f;
	--plain-border: #ffffff1a;
	--shadow: #00000088;

	--pink: #ff4fa3;
	--purple: #8a5cff;
	--cyan: #4fd8ff;
	--green: #4cd964;
	--yellow: #ffd23f;
	--radius: 22px;
}

@media (prefers-color-scheme: light) {
	:root {
		--space: #f3f6ff;
		--space-2: #e4e9ff;
		--card: #ffffff;
		--text: #1b1f4a;
		--muted: #545b8c;
		--link: #0b7db3;
		--glow-1: #ffd3ea;
		--glow-2: #c4efff;
		--stars-opacity: .45;
		--title-gradient: linear-gradient(90deg, #ff4fa3, #8a5cff, #0aa5d8);
		--heading-accent: #c46a00;
		--plain-border: #1b1f4a24;
		--shadow: #2a2f6b2e;
	}
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	min-height: 100vh;
	background: radial-gradient(ellipse at 20% -10%, var(--glow-1) 0, transparent 55%),
		radial-gradient(ellipse at 90% 10%, var(--glow-2) 0, transparent 50%), var(--space);
	color: var(--text);
	font: 18px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	overflow-x: hidden;
}

.stars {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(2px 2px at 10% 20%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 30% 70%, #fff, transparent),
		radial-gradient(2px 2px at 55% 35%, #ffd23f, transparent),
		radial-gradient(1.5px 1.5px at 75% 80%, #fff, transparent),
		radial-gradient(2px 2px at 85% 25%, #4fd8ff, transparent),
		radial-gradient(1.5px 1.5px at 45% 90%, #fff, transparent),
		radial-gradient(1.5px 1.5px at 65% 10%, #ff4fa3, transparent);
	background-size: 420px 420px;
	opacity: var(--stars-opacity);
}

@media (prefers-color-scheme: light) {
	/* Денем белите звезди не се виждат - остават само цветните искрици. */
	.stars {
		background-image:
			radial-gradient(3px 3px at 55% 35%, #ffd23f, transparent),
			radial-gradient(3px 3px at 85% 25%, #4fd8ff, transparent),
			radial-gradient(3px 3px at 65% 10%, #ff4fa3, transparent),
			radial-gradient(3px 3px at 20% 60%, #8a5cff, transparent),
			radial-gradient(3px 3px at 35% 85%, #4cd964, transparent);
	}
}

img { max-width: 100%; height: auto; }

a { color: var(--link); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }

h2 {
	font-size: clamp(1.6rem, 4vw, 2.2rem);
	text-align: center;
	margin-bottom: 1em;
}

/* --- Hero --- */
.hero {
	text-align: center;
	padding: 48px 16px 40px;
}

.hero-logo {
	width: 140px;
	height: 140px;
	border-radius: 32px;
	background: #000;
	padding: 10px;
	box-shadow: 0 0 0 4px var(--purple), 0 0 40px var(--pink);
}

.hero h1 {
	font-size: clamp(2.2rem, 7vw, 4rem);
	margin-top: 18px;
	background: var(--title-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.tagline { font-size: 1.3rem; color: var(--muted); margin: 0 0 24px; }

.hero-small { padding-top: 80px; padding-bottom: 80px; }

.big-emoji { font-size: 5rem; margin: 0; }

/* --- Бутони --- */
.buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.btn {
	display: inline-block;
	padding: 14px 24px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 1.05rem;
	text-decoration: none;
	color: #1a1530;
	transition: transform .12s ease, box-shadow .12s ease;
}

.btn:hover, .btn:focus-visible { transform: translateY(-3px); }

.btn:active { transform: translateY(1px); }

.btn-yellow { background: var(--yellow); box-shadow: 0 5px 0 #b38d00; }
.btn-purple { background: var(--purple); color: #fff; box-shadow: 0 5px 0 #5a35b8; }
.btn-green { background: var(--green); box-shadow: 0 5px 0 #2e9a43; }

/* --- Секции --- */
main { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

.section { padding: 36px 0; }

.game {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 0;
	background: var(--card);
	border-radius: var(--radius);
	overflow: hidden;
	border: 3px solid var(--pink);
	box-shadow: 0 12px 40px var(--shadow);
}

.game-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

.game-body { padding: 24px; }

.game-title { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }

.game-title img { border-radius: 16px; flex: none; }

.game-title h3 { font-size: 1.6rem; margin: 0; }

.chips { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }

.chips span {
	background: var(--space-2);
	border-radius: 999px;
	padding: 2px 10px;
	font-size: .85rem;
	color: var(--muted);
}

.features { list-style: none; padding: 0; margin: 0 0 20px; }

.features li { padding: 3px 0; }

.soon {
	margin-top: 20px;
	text-align: center;
	background: repeating-linear-gradient(45deg, var(--space-2), var(--space-2) 14px, var(--card) 14px, var(--card) 28px);
	border: 3px dashed var(--yellow);
	border-radius: var(--radius);
	padding: 24px;
}

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}

.card {
	display: block;
	background: var(--card);
	border-radius: var(--radius);
	padding: 24px;
	color: var(--text);
	text-decoration: none;
	border: 3px solid transparent;
	box-shadow: 0 8px 24px var(--shadow);
	transition: transform .12s ease;
}

a.card:hover, a.card:focus-visible { transform: translateY(-4px); }

.card-purple { border-color: var(--purple); }
.card-green { border-color: var(--green); }
.card-plain { border-color: var(--plain-border); }

.card-emoji { font-size: 2.4rem; }

.card h3 { font-size: 1.4rem; margin-top: 6px; }

.parents h3 { color: var(--heading-accent); }

.small { font-size: .85rem; color: var(--muted); }

/* --- Новини (обявленията от Discord) --- */
.center { text-align: center; margin-top: 24px; }

.news-date { margin: 0 0 6px; font-size: .9rem; font-weight: 700; color: var(--muted); }

.card-news { border-color: var(--cyan); display: flex; flex-direction: column; }

.card-news h3 { margin-top: 0; }

.card-news .more { margin: auto 0 0; padding-top: 8px; font-weight: 800; color: var(--link); }

.hero-logo-small { width: 88px; height: 88px; border-radius: 22px; padding: 6px; }

.hero-news { padding-bottom: 24px; }

.news-list { max-width: 860px; }

.news-post {
	background: var(--card);
	border-radius: var(--radius);
	border: 3px solid var(--yellow);
	box-shadow: 0 12px 40px var(--shadow);
	padding: 28px;
	margin: 0 0 28px;
	scroll-margin-top: 16px;
}

.news-post h2 { text-align: left; margin-bottom: .4em; }

.news-body h3 { font-size: 1.35rem; margin-top: 1em; }

.news-body h4 { font-size: 1.15rem; margin-top: 1em; color: var(--heading-accent); }

.news-body p { margin: 0 0 .8em; }

.news-body hr { border: 0; border-top: 2px dashed var(--plain-border); margin: 20px 0; }

.news-body blockquote {
	margin: 0 0 1em;
	padding: 8px 16px;
	border-left: 5px solid var(--cyan);
	background: var(--space-2);
	border-radius: 0 14px 14px 0;
}

.news-body blockquote p { margin: 0; }

.news-sub { font-size: .85rem; color: var(--muted); }

.news-buttons { justify-content: flex-start; margin: 18px 0 4px; }

code {
	font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
	background: var(--space-2);
	color: var(--heading-accent);
	padding: .05em .4em;
	border-radius: 8px;
	font-weight: 800;
}

/* --- Футър --- */
.footer {
	text-align: center;
	padding: 40px 16px 56px;
	color: var(--muted);
}

.footer-logo { border-radius: 12px; background: #000; padding: 4px; }

.footer .links a { text-decoration: none; }

@media (max-width: 760px) {
	.game { grid-template-columns: 1fr; }
	.hero { padding-top: 32px; }
	body { font-size: 17px; }
	.news-post { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn, .card { transition: none; }
}