/*
 * F95TO catalog stylesheet — own design (f95-handoff §5: different layout and
 * markup from f95zones-to). Dark slate + teal/amber, system font stack.
 */

:root {
	--fg-bg: #0d1117;
	--fg-panel: #161c26;
	--fg-panel-2: #1c2431;
	--fg-border: #26303f;
	--fg-text: #d7e0ea;
	--fg-muted: #8b98a8;
	--fg-teal: #3fc9a9;
	--fg-teal-dim: #2b8f77;
	--fg-amber: #e5b455;
	--fg-red: #ba4545;
	--fg-rose: #e2708a;
	--fg-radius: 12px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--fg-bg);
	color: var(--fg-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

a { color: var(--fg-teal); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* ---------- Header / footer (theme) ---------- */
.fg-site-header {
	border-bottom: 1px solid var(--fg-border);
	background: var(--fg-panel);
	position: sticky;
	top: 0;
	z-index: 10;
}
.fg-site-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}
.fg-site-title {
	margin: 0;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: 0.5px;
}
/* Brand in the f95zone spirit: white "F95" + red "TO" (logo colors) */
.fg-site-title a { color: #ffffff; }
.fg-site-title a span { color: var(--fg-red); }

.fg-top-links { margin-left: auto; display: flex; gap: 16px; font-size: 14px; }
.fg-top-links a { color: var(--fg-muted); }
.fg-top-links a:hover { color: var(--fg-teal); }

/* ---------- Nav ---------- */
.fg-nav {
	max-width: 1200px;
	margin: 12px auto 0;
	padding: 0 16px;
}
.fg-nav ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.fg-nav a {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid var(--fg-border);
	border-radius: 999px;
	color: var(--fg-text);
	font-size: 13px;
	background: var(--fg-panel);
}
.fg-nav a:hover { border-color: var(--fg-teal); color: var(--fg-teal); text-decoration: none; }

/* ---------- Layout ---------- */
main, .fg-archive, article.fg-game {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px;
}

/* ---------- Hero (home) ---------- */
.fg-hero {
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	background: linear-gradient(135deg, var(--fg-panel) 0%, var(--fg-panel-2) 100%);
	border: 1px solid var(--fg-border);
	border-radius: var(--fg-radius);
	padding: 28px;
	margin-bottom: 20px;
}
.fg-hero-brand {
	font-size: 34px;
	font-weight: 800;
	margin: 0;
	color: #ffffff;
	letter-spacing: 0.5px;
}
.fg-hero-brand span { color: var(--fg-red); }
.fg-hero-sub {
	margin: 6px 0 0;
	max-width: 560px;
	color: var(--fg-muted);
}
.fg-search { display: flex; gap: 8px; }
.fg-search input {
	background: var(--fg-bg);
	border: 1px solid var(--fg-border);
	border-radius: 8px;
	padding: 10px 14px;
	color: var(--fg-text);
	min-width: 240px;
}
.fg-search button {
	background: var(--fg-teal);
	border: 0;
	border-radius: 8px;
	padding: 10px 18px;
	color: #06281f;
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Archive head ---------- */
.fg-archive-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 18px;
}
.fg-archive-title { font-size: 24px; margin: 0; }

/* ---------- Card grid ---------- */
.fg-card-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}
.fg-card {
	background: var(--fg-panel);
	border: 1px solid var(--fg-border);
	border-radius: var(--fg-radius);
	overflow: hidden;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.fg-card:hover { border-color: var(--fg-teal-dim); transform: translateY(-2px); }
.fg-card-link { display: flex; flex-direction: column; height: 100%; color: var(--fg-text); }
.fg-card-link:hover { text-decoration: none; }
.fg-card-cover {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--fg-panel-2);
}
.fg-card-body { display: flex; flex-direction: column; gap: 8px; padding: 12px; flex: 1; }
.fg-card-title { font-weight: 700; font-size: 15px; line-height: 1.35; }
.fg-card-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.fg-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.fg-tag {
	font-size: 11px;
	color: var(--fg-muted);
	border: 1px solid var(--fg-border);
	padding: 1px 8px;
	border-radius: 999px;
}
.fg-card-btn {
	margin-top: auto;
	display: block;
	text-align: center;
	background: var(--fg-teal-dim);
	color: #fff;
	border-radius: 8px;
	padding: 7px 10px;
	font-size: 13px;
	font-weight: 600;
}
.fg-card:hover .fg-card-btn { background: var(--fg-teal); }

/* ---------- Chips ---------- */
.fg-chip {
	display: inline-block;
	font-size: 12px;
	padding: 1px 9px;
	border-radius: 999px;
	border: 1px solid var(--fg-border);
	color: var(--fg-muted);
	background: var(--fg-panel-2);
}
.fg-chip-ver { color: var(--fg-amber); border-color: rgba(229, 180, 85, 0.4); }
.fg-chip-official { color: var(--fg-teal); border-color: rgba(63, 201, 169, 0.4); }
.fg-chip-18 { color: var(--fg-rose); border-color: rgba(226, 112, 138, 0.5); }
.fg-chip-dev { color: var(--fg-text); }

/* ---------- Single game ---------- */
.fg-breadcrumbs { font-size: 13px; color: var(--fg-muted); margin-bottom: 14px; }
.fg-breadcrumbs span { margin: 0 6px; }

.fg-top {
	display: grid;
	grid-template-columns: minmax(280px, 420px) 1fr;
	gap: 24px;
	margin-bottom: 24px;
}
@media (max-width: 800px) { .fg-top { grid-template-columns: 1fr; } }

.fg-cover-wrap { align-self: start; }
.fg-cover {
	width: 100%;
	border-radius: var(--fg-radius);
	border: 1px solid var(--fg-border);
	display: block;
}
.fg-cover-fallback {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--fg-panel), var(--fg-panel-2));
	font-size: 64px;
	font-weight: 800;
	color: var(--fg-teal-dim);
}

.fg-title { font-size: 30px; line-height: 1.2; margin: 0 0 10px; }
.fg-meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

/* At a glance */
.fg-glance {
	border: 1px solid var(--fg-border);
	border-radius: var(--fg-radius);
	background: var(--fg-panel);
	padding: 14px 16px;
	margin-bottom: 16px;
}
.fg-glance-title { font-weight: 700; margin-bottom: 8px; color: var(--fg-amber); }
.fg-glance-grid { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
@media (max-width: 600px) { .fg-glance-grid { grid-template-columns: 1fr; } }
.fg-glance-grid dt {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--fg-muted);
}
.fg-glance-grid dd { margin: 0; font-size: 14px; }

/* Buttons */
.fg-buttons { display: flex; flex-direction: column; gap: 12px; }
.fg-btn {
	display: flex;
	flex-direction: column;
	border-radius: 10px;
	padding: 10px 16px;
	border: 1px solid var(--fg-border);
}
.fg-btn:hover { text-decoration: none; }
.fg-btn-official {
	background: var(--fg-teal-dim);
	border-color: var(--fg-teal-dim);
	color: #fff;
}
.fg-btn-official:hover { background: var(--fg-teal); }
.fg-btn-main { font-weight: 700; font-size: 16px; }
.fg-btn-sub { font-size: 12px; opacity: 0.85; }
.fg-dl-group-title { font-size: 12px; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px; }
.fg-dl-group-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-btn-mirror {
	flex-direction: row;
	background: var(--fg-panel-2);
	color: var(--fg-text);
	font-size: 14px;
	padding: 7px 14px;
}
.fg-btn-mirror:hover { border-color: var(--fg-teal); color: var(--fg-teal); }

.fg-devlinks { font-size: 13px; color: var(--fg-muted); }

/* Description */
.fg-description h2, .fg-gallery h2, .fg-gameinfo h2, .fg-faq h2, .fg-howto h2, .fg-related h2 {
	font-size: 20px;
	border-bottom: 1px solid var(--fg-border);
	padding-bottom: 8px;
	margin: 28px 0 14px;
}

/* Gallery */
.fg-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}
.fg-gallery-grid img {
	border-radius: 8px;
	border: 1px solid var(--fg-border);
	width: 100%;
}

/* Details table */
.fg-meta-table { border-collapse: collapse; width: 100%; max-width: 720px; }
.fg-meta-table th, .fg-meta-table td {
	text-align: left;
	padding: 8px 12px;
	border-bottom: 1px solid var(--fg-border);
	vertical-align: top;
}
.fg-meta-table th { color: var(--fg-muted); width: 140px; font-weight: 500; }

/* Rating */
.fg-rating { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.fg-rating-label { font-size: 12px; color: var(--fg-muted); text-transform: uppercase; }
.fg-rating-stars { display: flex; gap: 2px; }
.fg-star {
	background: none;
	border: 0;
	font-size: 20px;
	color: var(--fg-border);
	cursor: pointer;
	padding: 0;
}
.fg-star.active { color: var(--fg-amber); }
.fg-rating-value { font-weight: 700; color: var(--fg-amber); }
.fg-rating-count { font-size: 13px; color: var(--fg-muted); }

/* FAQ */
.fg-faq-item {
	border: 1px solid var(--fg-border);
	border-radius: 10px;
	background: var(--fg-panel);
	margin-bottom: 8px;
	overflow: hidden;
}
.fg-faq-item summary {
	cursor: pointer;
	padding: 12px 16px;
	font-weight: 600;
	list-style-position: inside;
}
.fg-faq-item p { margin: 0; padding: 0 16px 14px; color: var(--fg-text); }

/* Changelog / howto / source */
.fg-changelog details { border: 1px solid var(--fg-border); border-radius: 10px; padding: 12px 16px; background: var(--fg-panel); }
.fg-changelog summary { cursor: pointer; font-weight: 600; }
.fg-source { font-size: 13px; color: var(--fg-muted); }

/* Pagination */
.fg-pagination { margin: 24px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.fg-pagination .page-numbers {
	padding: 6px 12px;
	border: 1px solid var(--fg-border);
	border-radius: 8px;
	color: var(--fg-text);
}
.fg-pagination .page-numbers.current { background: var(--fg-teal-dim); border-color: var(--fg-teal-dim); }
.fg-empty { color: var(--fg-muted); }

/* ---------- Footer (theme) ---------- */
.fg-site-footer {
	border-top: 1px solid var(--fg-border);
	background: var(--fg-panel);
	margin-top: 40px;
	padding: 24px 16px;
}
.fg-site-footer-inner { max-width: 1200px; margin: 0 auto; font-size: 13px; color: var(--fg-muted); }
.fg-site-footer a { color: var(--fg-muted); }
.fg-footer-18 { color: var(--fg-rose); font-weight: 600; }

/* Static pages (trust pages) */
.fg-page { max-width: 760px; margin: 0 auto; padding: 16px; }
.fg-page h1 { font-size: 28px; }