/* Hyperion - studio site. Dark with the logo's gold. Plain CSS, no build step. */
:root {
	--bg: #0b0b0d;
	--bg-raised: #141418;
	--bg-card: #18181d;
	--line: #2a2a31;
	--text: #ecebe8;
	--muted: #a3a1a8;
	--gold: #e2c27f;
	--gold-light: #f6e3b4;
	--gold-dark: #b8914c;
	--radius: 14px;
	--max: 1180px;
	--font-head: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* one font site-wide, as the games' UI */
	--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--gold);
	text-decoration: none;
}

a:hover {
	color: var(--gold-light);
}

h1,
h2,
h3 {
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.15;
	margin: 0 0 0.5em;
	text-transform: uppercase;
}

h1 {
	font-size: clamp(2.4rem, 6vw, 4.2rem);
}

h2 {
	font-size: clamp(1.6rem, 3.4vw, 2.2rem);
}

h3 {
	font-size: 1.25rem;
}

p {
	margin: 0 0 1em;
}

.wrap {
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 20px;
}

.muted {
	color: var(--muted);
}

.gold {
	color: var(--gold);
}

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: rgba(11, 11, 13, 0.85);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.site-header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 68px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--text);
	/* The Hyperion wordmark is Inter, as in the games' UI (user, 2026-10-23) */
	font-family: var(--font-body);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.brand:hover {
	color: var(--gold-light);
}

.brand img {
	width: 38px;
	height: 38px;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 22px;
	font-weight: 600;
	font-size: 0.95rem;
}

.site-nav a {
	color: var(--muted);
}

.site-nav a:hover {
	color: var(--text);
}

.icon-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 50%;
}

.icon-link svg {
	width: 16px;
	height: 16px;
	fill: var(--text);
}

.icon-link:hover {
	border-color: var(--gold);
}

@media (max-width: 560px) {
	.site-nav .text-link {
		display: none;
	}
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 26px;
	border-radius: 999px;
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: transform 0.15s ease, background 0.15s ease;
}

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

.btn-gold {
	/* The games' Bonus Buy BUY / CONFIRM button (medieval-fortune BuyBonusModal .card-btn): a 3-stop tonal gradient
	   from one gold seed (darker near the top, lighter past the bottom), saturated, with a faint light border */
	--accent: #f3cf89;
	background: linear-gradient(
		173deg,
		color-mix(in srgb, var(--accent) 90%, #000) 8.7%,
		var(--accent) 55%,
		color-mix(in srgb, var(--accent) 78%, #fff) 125%
	);
	filter: saturate(1.35);
	border: 2px solid rgba(216, 205, 205, 0.3);
	color: #000;
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: 0.02em;
	transition: filter 0.15s, transform 0.15s;
}

.btn-gold:hover {
	color: #000;
	filter: saturate(1.35) brightness(1.15) drop-shadow(0 0 7px rgba(255, 255, 255, 0.4))
		drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 45%, transparent));
}

.btn-gold:active {
	filter: saturate(1.35) brightness(0.9);
	transform: translateY(0);
}

.btn-ghost {
	border: 2px solid color-mix(in srgb, #f3cf89 70%, transparent);
	color: var(--gold-light);
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: 0.02em;
}

.btn-ghost:hover {
	background: rgba(243, 207, 137, 0.1);
	color: var(--gold-light);
}

.btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ---------- Home hero ---------- */
.studio-hero {
	position: relative;
	padding: 90px 0 70px;
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	background:
		radial-gradient(ellipse at 50% -20%, rgba(226, 194, 127, 0.18), transparent 60%),
		var(--bg);
}

.studio-hero .wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.studio-hero img.mark {
	width: 96px;
	height: 96px;
	margin-bottom: 22px;
	filter: drop-shadow(0 0 30px rgba(226, 194, 127, 0.35));
}

.studio-hero h1 {
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: 0.08em;
}

.studio-hero p {
	max-width: 620px;
	color: var(--muted);
	font-size: 1.1rem;
}

/* ---------- Game grid ---------- */
.section {
	padding: 64px 0;
}

.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 26px;
}

.game-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 22px;
}

.game-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--bg-card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--text);
	transition: transform 0.2s ease, border-color 0.2s ease;
}

a.game-card:hover {
	transform: translateY(-4px);
	color: var(--text);
}

.game-card .art {
	position: relative;
	aspect-ratio: 767 / 1068;
	overflow: hidden;
}

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

.game-card .art .title-overlay {
	position: absolute;
	inset: auto 0 0 0;
	padding: 60px 16px 18px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
	font-family: var(--font-head);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
}

.badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 11px;
	border-radius: 999px;
	font-family: var(--font-head);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.badge-live {
	background: #2f9e5b;
	color: #fff;
}

.badge-soon {
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid var(--gold-dark);
	color: var(--gold-light);
}

.game-card .info {
	padding: 16px 18px 18px;
}

.game-card .tagline {
	margin: 0 0 12px;
	color: var(--muted);
	font-size: 0.92rem;
	line-height: 1.45;
}

.stat-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 14px;
	margin: 0;
	font-size: 0.85rem;
}

.stat-list dt {
	color: var(--muted);
}

.stat-list dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

.game-card.is-soon .art img {
	filter: saturate(0.75) brightness(0.8);
}

/* ---------- About strip ---------- */
.about-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 22px;
}

.about-item {
	padding: 22px;
	background: var(--bg-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

.about-item p {
	margin: 0;
	color: var(--muted);
}

/* ---------- Game page ---------- */
.game-hero {
	position: relative;
	min-height: 560px;
	display: flex;
	align-items: flex-end;
	border-bottom: 1px solid var(--line);
}

.game-hero .hero-art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.game-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 11, 13, 0.1) 30%, rgba(11, 11, 13, 0.92) 85%, var(--bg));
}

.game-hero .wrap {
	position: relative;
	z-index: 1;
	padding-top: 180px;
	padding-bottom: 40px;
}

.game-hero p.lead {
	max-width: 640px;
	font-size: 1.12rem;
	color: #d8d6d2;
}

.facts {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 28px 0 0;
}

.fact {
	padding: 14px 16px;
	background: rgba(20, 20, 24, 0.85);
	border: 1px solid var(--line);
	border-radius: 12px;
}

.fact span {
	display: block;
	color: var(--muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.fact strong {
	font-family: var(--font-head);
	font-size: 1.35rem;
	color: var(--gold-light);
}

@media (max-width: 720px) {
	.facts {
		grid-template-columns: repeat(2, 1fr);
	}
	.game-hero .wrap {
		padding-top: 140px;
	}
}

.content {
	max-width: 820px;
}

.content section {
	padding: 40px 0 0;
}

.content ul {
	margin: 0 0 1em;
	padding-left: 1.2em;
}

.content li {
	margin-bottom: 0.45em;
}

.content li::marker {
	color: var(--gold);
}

.table-scroll {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: 12px;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}

th,
td {
	padding: 12px 16px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

tr:last-child td {
	border-bottom: 0;
}

th {
	background: var(--bg-raised);
	color: var(--gold-light);
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

td:first-child {
	font-weight: 600;
	white-space: nowrap;
}

.callout {
	margin: 36px 0 0;
	padding: 28px;
	border: 1px solid var(--gold-dark);
	border-radius: var(--radius);
	background: radial-gradient(ellipse at top, rgba(226, 194, 127, 0.12), transparent 70%), var(--bg-raised);
	text-align: center;
}

details {
	padding: 16px 20px;
	margin-bottom: 10px;
	background: var(--bg-raised);
	border: 1px solid var(--line);
	border-radius: 12px;
}

summary {
	cursor: pointer;
	font-weight: 600;
}

details p {
	margin: 10px 0 0;
	color: var(--muted);
}

/* ---------- Footer ---------- */
.site-footer {
	margin-top: 80px;
	padding: 40px 0 50px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.9rem;
}

.site-footer .top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.age-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-right: 10px;
	border: 2px solid #c94a4a;
	border-radius: 50%;
	color: #e06a6a;
	font-weight: 700;
	font-size: 0.85rem;
	vertical-align: middle;
}

.site-footer .legal {
	max-width: 860px;
	font-size: 0.82rem;
	line-height: 1.6;
}

/* The cover art's character stands on the left: on wide screens the hero text sits on the right, over the sky */
@media (min-width: 900px) {
	.game-hero.art-left .hero-copy {
		max-width: 560px;
		margin-left: auto;
	}
	.game-hero.art-left::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		background: linear-gradient(90deg, transparent 35%, rgba(11, 11, 13, 0.75) 75%);
	}
}

/* Phones and tablets: the art on top, the text under it (over the art it covered the character) */
@media (max-width: 899px) {
	.game-hero {
		display: block;
		min-height: 0;
	}
	.game-hero .hero-art {
		position: relative;
		height: auto;
		aspect-ratio: 16 / 9;
	}
	.game-hero::after {
		inset: 0 0 auto 0;
		height: 56.25vw;
		background: linear-gradient(180deg, transparent 55%, var(--bg));
	}
	.game-hero .wrap {
		padding-top: 8px;
	}
}

/* ---------- Card hover: a light beam running around the border ---------- */
/* As minecraftslot.site's casino cards: the 2px border is a conic gradient that turns slowly all the time (so hovering
   never restarts it), plain border colour all round except one wide, soft highlight. Hovering fades that highlight
   from the border colour up to gold, so the beam glides in rather than appearing. @property makes both animatable. */
@property --beam-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@property --beam-color {
	syntax: '<color>';
	initial-value: transparent;
	inherits: false;
}

a.game-card {
	--beam-color: var(--line);
	border: 2px solid transparent;
	background:
		linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
		conic-gradient(
				from var(--beam-angle),
				var(--line) 0%,
				var(--line) 38%,
				var(--beam-color) 50%,
				var(--line) 62%,
				var(--line) 100%
			)
			border-box;
	animation: beam-spin 6s linear infinite;
	transition:
		transform 0.2s ease,
		--beam-color 0.4s ease;
}

a.game-card:hover,
a.game-card:focus-visible {
	--beam-color: var(--gold-light);
	border-color: transparent;
}

@keyframes beam-spin {
	to {
		--beam-angle: 360deg;
	}
}

/* No turning for people who've asked their device to reduce motion: a still gold border on hover instead */
@media (prefers-reduced-motion: reduce) {
	a.game-card {
		animation: none;
	}
	a.game-card:hover {
		background:
			linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
			linear-gradient(var(--gold-dark), var(--gold-dark)) border-box;
	}
}