/**
 * Single World template.
 *
 * Scoped to .ralify-world. Uses the Ralify token layer with literal fallbacks
 * so the template still renders correctly if tokens.css fails to load.
 *
 * @package Ralify
 */

.ralify-world {
	--rw-surface: var(--ralify-color-surface, #0b0f17);
	--rw-text: var(--ralify-color-text, #f8fafc);
	--rw-muted: var(--ralify-color-muted, #94a3b8);
	--rw-border: var(--ralify-color-border, #273142);
	--rw-accent: var(--ralify-color-accent, #00e5ff);
	--rw-violet: #885cf6;
	--rw-blue: #2563eb;

	display: grid;
	gap: clamp(28px, 4vw, 48px);
	color: var(--rw-text);
	font-family: var(--ralify-font, "Sora", sans-serif);
}

/* Hero
   ------------------------------------------------------------------------ */

.ralify-world__hero {
	position: relative;
	overflow: hidden;
	min-height: clamp(340px, 42vw, 480px);
	border: 1px solid var(--rw-border);
	border-radius: 20px;
	background: #0b0f17;
	isolation: isolate;
}

.ralify-world__hero-art {
	position: absolute;
	z-index: -3;
	inset: 0;
}

.ralify-world__hero-art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ralify-world__hero-scrim {
	position: absolute;
	z-index: -2;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(5, 7, 11, .96), rgba(5, 7, 11, .78) 52%, rgba(5, 7, 11, .3) 88%),
		linear-gradient(0deg, rgba(5, 7, 11, .92), transparent 62%);
}

.ralify-world__hero.is-artless .ralify-world__hero-scrim {
	background:
		radial-gradient(circle at 76% 26%, rgba(136, 92, 246, .5), transparent 34%),
		linear-gradient(120deg, #17233d, #0b0f17 66%);
}

.ralify-world__hero-body {
	display: flex;
	min-height: inherit;
	max-width: 780px;
	flex-direction: column;
	justify-content: flex-end;
	gap: 14px;
	padding: clamp(22px, 4vw, 44px);
}

.ralify-world__identity {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ralify-world__logo img {
	width: auto;
	max-width: 120px;
	height: auto;
	max-height: 72px;
	object-fit: contain;
}

.ralify-world__kicker {
	margin: 0 0 4px;
	color: var(--rw-muted);
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ralify-world__title {
	max-width: 18ch;
	margin: 0;
	font-size: clamp(2rem, 4vw, 3.4rem);
	letter-spacing: -.04em;
	line-height: 1.04;
	text-wrap: balance;
}

.ralify-world__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.ralify-world__release {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border: 1px solid rgba(148, 163, 184, .2);
	border-radius: 999px;
	background: rgba(11, 15, 23, .62);
	color: #c8d2df;
	font-size: .7rem;
	font-weight: 600;
}

.ralify-world__release small {
	color: var(--rw-accent);
	font-size: .64rem;
	font-weight: 700;
}

.ralify-world__description {
	max-width: 62ch;
	margin: 0;
	color: #d9e1ec;
	font-size: .92rem;
	line-height: 1.6;
}

.ralify-world__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ralify-world__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.ralify-world__action {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	padding: 0 20px;
	border: 1px solid rgba(248, 250, 252, .24);
	border-radius: 10px;
	background: rgba(11, 15, 23, .6);
	color: #fff;
	font-size: .74rem;
	font-weight: 800;
	text-decoration: none;
	transition: border-color .15s ease, transform .15s ease;
}

.ralify-world__action:hover,
.ralify-world__action:focus-visible {
	border-color: var(--rw-accent);
	transform: translateY(-1px);
}

.ralify-world__action.is-primary {
	border: 0;
	background: linear-gradient(135deg, var(--rw-blue), var(--rw-violet));
}

.ralify-world__studio {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 2px 0 0;
	color: var(--rw-muted);
	font-size: .7rem;
}

/* About
   ------------------------------------------------------------------------ */

.ralify-world__about {
	max-width: 72ch;
	color: #d9e1ec;
	font-size: .95rem;
	line-height: 1.7;
}

.ralify-world__about > :first-child {
	margin-top: 0;
}

/* Related sections
   ------------------------------------------------------------------------ */

.ralify-world__section {
	display: grid;
	gap: 16px;
}

.ralify-world__section-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--rw-border);
}

.ralify-world__section-header h2 {
	margin: 0;
	font-size: clamp(1.1rem, 2vw, 1.45rem);
	letter-spacing: -.02em;
}

.ralify-world__section-header a {
	color: var(--rw-accent);
	font-size: .72rem;
	font-weight: 800;
	text-decoration: none;
}

.ralify-world__section-header a:hover,
.ralify-world__section-header a:focus-visible {
	text-decoration: underline;
}

.ralify-world__grid {
	display: grid;
	gap: clamp(14px, 2vw, 22px);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.ralify-world__grid > * {
	min-width: 0;
}

/* Story cards are a two-column media + body layout, so they need meaningfully
   more room than the 280px entity cards above. At 320px the body column was
   collapsing to ~117px. 420px guarantees a readable headline column.

   The Guide card is built the same way (a minmax(220px, 34%) media column next
   to the copy), so it needs the same room and gets it here. In the 280px
   default the 220px media floor left the title roughly 60px wide, which is the
   "guides cards look bad" symptom: the card was never designed for that column.
   Grouping the two selectors keeps guides and news visually identical on the
   same page, which is the point. */
.ralify-world__section--stories .ralify-world__grid,
.ralify-world__section--guides .ralify-world__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
}

/*
 * World cards in the Worlds section, restacked to match the catalogue.
 *
 * The World Card block ships as a horizontal split (art left, copy right). In a
 * 280px grid column that leaves the copy roughly 100px wide, which is why the
 * titles on Universe pages rendered as one clipped letter per line. This is the
 * same restack page-worlds.css applies to its own grid, duplicated here rather
 * than shared because the two files own different shells and neither loads on
 * the other's route.
 */
.ralify-world__section--worlds .ralify-world__grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.ralify-world__section--worlds .ralify-world-card {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr);
	min-height: 0;
}

.ralify-world__section--worlds .ralify-world-card__media {
	aspect-ratio: 3 / 4;
	min-height: 0;
}

.ralify-world__section--worlds .ralify-world-card__hero,
.ralify-world__section--worlds .ralify-world-card__hero-fallback {
	height: 100%;
}

.ralify-world__section--worlds .ralify-world-card__hero-fallback-name {
	font-size: clamp(0.9375rem, 1.4vw, 1.25rem);
}

.ralify-world__section--worlds .ralify-world-card__logo {
	right: var(--ralify-space-3, 12px);
	bottom: var(--ralify-space-3, 12px);
}

.ralify-world__section--worlds .ralify-world-card__logo img {
	max-width: min(80%, 130px);
}

.ralify-world__section--worlds .ralify-world-card__status {
	top: var(--ralify-space-3, 12px);
	left: var(--ralify-space-3, 12px);
}

.ralify-world__section--worlds .ralify-world-card__body {
	justify-content: flex-start;
}

.ralify-world__empty {
	margin: 0;
	padding: 22px;
	border: 1px dashed var(--rw-border);
	border-radius: 14px;
	color: var(--rw-muted);
	font-size: .84rem;
}

/* Footer
   ------------------------------------------------------------------------ */

.ralify-world__footer {
	padding-top: 8px;
}

/* Responsive
   ------------------------------------------------------------------------ */

@media (max-width: 820px) {
	.ralify-world__hero {
		min-height: 420px;
	}

	.ralify-world__hero-body {
		max-width: none;
		gap: 12px;
	}

	.ralify-world__hero-scrim {
		background: linear-gradient(0deg, rgba(5, 7, 11, .96), rgba(5, 7, 11, .55) 70%);
	}
}

@media (max-width: 560px) {
	.ralify-world__hero {
		border-radius: 16px;
	}

	.ralify-world__identity {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.ralify-world__title {
		max-width: none;
		font-size: clamp(1.8rem, 9vw, 2.6rem);
	}

	.ralify-world__actions {
		display: grid;
	}

	.ralify-world__action {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ralify-world__action {
		transition: none;
	}

	.ralify-world__action:hover,
	.ralify-world__action:focus-visible {
		transform: none;
	}
}