/* ═══ XPLAY GameHub (template-cluster) ═══ */

.stage {
	position: relative; border-radius: 12px; overflow: hidden; margin-top: 26px;
	min-height: 480px; display: flex; align-items: flex-end;
	background: linear-gradient(118deg, #1a1426 0%, #35205e 45%, #7c3aed 90%, #e100ff 130%);
}
.stage .stage-bg { position: absolute; inset: 0; }
.stage .stage-bg img { width: 100%; height: 100%; object-fit: cover; }
.stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 7, 16, 0.92) 0%, rgba(10, 7, 16, 0.45) 38%, transparent 65%); }
.stage-inner { position: relative; z-index: 1; width: 100%; padding: 40px 44px 76px; display: flex; align-items: flex-end; gap: 32px; }
.stage-info { flex: 1; min-width: 0; color: #fff; }
.stage-info h1 { font-size: 62px; line-height: 0.98; color: #fff; }
.stage-sub { font-size: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.78); margin: 10px 0 0; }
.stage-franchise { display: inline-block; font-size: 14px; font-weight: 700; color: #f0a8ff; margin-top: 8px; }
.stage-franchise:hover { color: #fff; }
.stage-score {
	flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
	background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px);
	border-radius: 12px; padding: 14px 20px; color: #fff;
}
.stage-score .num { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 0.9; font-variant-numeric: tabular-nums; }
.stage-score .num small { font-size: 18px; opacity: 0.7; }
.stage-score .lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; line-height: 1; }

/* Facts bar πάνω στο hero */
.facts-bar {
	position: relative; z-index: 2; margin: -34px 32px 0; background: var(--card); border: 1px solid var(--line);
	border-radius: 12px; box-shadow: 0 18px 40px rgba(23, 20, 31, 0.14); display: flex; align-items: stretch; flex-wrap: wrap;
}
.facts-bar .fact { flex: 1 1 0; min-width: 130px; padding: 16px 22px; border-left: 1px solid var(--line); }
.facts-bar .fact:first-child { border-left: 0; }
.facts-bar dt { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 3px; }
.facts-bar dd { margin: 0; font-weight: 700; font-size: 14.5px; }
.facts-bar .actions { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-left: 1px solid var(--line); }
.btn { display: inline-block; font-size: 13.5px; font-weight: 700; padding: 10px 18px; border-radius: 8px; }
.btn.primary { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: #fff; }
.btn.ghost { border: 1px solid var(--line); color: var(--ink); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Tabs */
.hub-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 34px 0 0; }
.hub-tabs a { font-size: 14px; font-weight: 700; padding: 9px 22px; border-radius: 99px; border: 1px solid var(--line); color: var(--ink-2); }
.hub-tabs a.active { background: linear-gradient(120deg, var(--accent), var(--accent-2)); border-color: transparent; color: #fff; box-shadow: 0 6px 16px rgba(124, 58, 237, 0.35); }
.hub-tabs a:hover:not(.active) { border-color: var(--accent); color: var(--ink); }

/* Feed */
.hub-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; margin-top: 34px; }
.feed { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.feed-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); transition: transform 0.15s, box-shadow 0.15s; }
.feed-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.feed-card .thumb { aspect-ratio: 16/9; border-radius: 0; }
.feed-card .body { padding: 14px 16px 16px; }
.feed-card h3 { font-family: var(--font-body); font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0; }
.feed-card .meta { margin-top: 6px; }

/* FAQ */
.faq details { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 20px; margin-bottom: 10px; background: var(--card); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 15.5px; padding: 15px 0; list-style: none; position: relative; padding-right: 30px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--accent); }
.faq details[open] summary::after { content: "−"; }
.faq .faq-answer { margin: 0 0 16px; font-size: 14.5px; color: var(--ink-2); }
.faq .faq-answer p { margin: 0 0 10px; }

/* Related hubs */
.related-hubs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.rel-hub { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; display: flex; align-items: flex-end; background: linear-gradient(135deg, #241b38, #6D28D9 75%, #E100FF 140%); transition: transform 0.15s; }
.rel-hub:hover { transform: translateY(-4px); }
.rel-hub .thumb { position: absolute; inset: 0; border-radius: 0; }
.rel-hub::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 7, 16, 0.85), transparent 55%); }
.rel-hub .body { position: relative; z-index: 1; padding: 14px 16px; color: #fff; }
.rel-hub h3 { font-size: 21px; margin: 0; color: #fff; }

@media (max-width: 900px) {
	.stage { min-height: 380px; }
	.stage-inner { flex-direction: column; align-items: flex-start; gap: 18px; padding: 26px 22px 52px; }
	.stage-info h1 { font-size: 38px; }
	.facts-bar { margin: -20px 12px 0; }
	.facts-bar .actions { width: 100%; border-left: 0; border-top: 1px solid var(--line); }
	.hub-grid { grid-template-columns: 1fr; }
	.feed { grid-template-columns: 1fr; }
	.related-hubs { grid-template-columns: 1fr; }
}

/* ═══ Collection hub (Signature στήλες: Vault 404, Face to Face) ═══ */
.sig-hero {
	border-radius: 12px; overflow: hidden; margin-top: 26px; position: relative;
	min-height: 340px; display: flex; align-items: flex-end;
	background: linear-gradient(125deg, #131019 0%, #1d1727 55%, var(--sig-accent, #6D28D9) 160%);
}
.sig-hero .sig-bg { position: absolute; inset: 0; opacity: 0.35; }
.sig-hero .sig-bg img { width: 100%; height: 100%; object-fit: cover; }
.sig-hero .in { position: relative; z-index: 1; padding: 40px 44px; color: #fff; }
.sig-hero h1 { font-size: 58px; line-height: 0.98; color: var(--sig-accent, #fff); }
.sig-hero .sig-intro { color: rgba(255, 255, 255, 0.82); font-size: 16px; max-width: 62ch; margin: 12px 0 0; }
.sig-hero .sig-intro p { margin: 0 0 8px; }

.sig-list { counter-reset: ep; }
.sig-list .river-item { grid-template-columns: 56px 220px 1fr; }
.sig-list .river-item::before {
	counter-increment: ep; content: counter(ep, decimal-leading-zero);
	font-family: var(--font-display); font-weight: 800; font-size: 30px;
	color: var(--sig-accent, var(--ink-2)); opacity: 0.7; line-height: 1; padding-top: 4px;
}

@media (max-width: 900px) {
	.sig-hero h1 { font-size: 38px; }
	.sig-list .river-item { grid-template-columns: 34px 110px 1fr; }
}

/* ═══ Company hub ═══ */
.co-games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .co-games { grid-template-columns: 1fr; } }

/* Editorial κείμενο μέσα σε hubs */
.editorial { max-width: 70ch; font-size: 16.5px; line-height: 1.8; }
.editorial p { margin: 0 0 16px; }

/* Follow */
.follow-btn {
	display: inline-block; margin: 14px 12px 0 0; cursor: pointer; font: inherit;
	font-size: 13.5px; font-weight: 700; padding: 9px 20px; border-radius: 99px;
	color: #fff; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(6px);
}
.follow-btn:hover { border-color: #fff; }
.follow-btn.is-following { background: var(--accent-2); border-color: var(--accent-2); }