/**
 * We Are Retro — layout and components.
 */

/* ---------------------------------------------------------------- chrome  */

.war-topbar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	gap: 28px;
	height: 74px;
	padding: 0 26px;
	background: rgba(10, 10, 11, 0.92);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--war-line);
}

.admin-bar .war-topbar {
	top: 32px;
}

.war-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 11px;
}

.war-logo img {
	height: 42px;
	width: auto;
}

/* Wordmark fallback, used when no logo image is set. Rebuilds the logo's
   stacked bar in CSS so the brand still reads before media is uploaded. */
.war-logo__mark {
	display: grid;
	grid-template-rows: repeat(5, 3px);
	gap: 2px;
	width: 26px;
}

.war-logo__mark span {
	display: block;
	border-radius: 1px;
}

.war-logo__mark span:nth-child(1) { background: var(--war-red); }
.war-logo__mark span:nth-child(2) { background: var(--war-orange); }
.war-logo__mark span:nth-child(3) { background: var(--war-yellow); }
.war-logo__mark span:nth-child(4) { background: var(--war-green); }
.war-logo__mark span:nth-child(5) { background: var(--war-blue); }

.war-logo__text {
	font-family: var(--war-display);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -0.035em;
	line-height: 1;
}

.war-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 auto 0 12px;
}

.war-nav a {
	position: relative;
	padding: 9px 15px;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--war-text-muted);
	border-radius: var(--war-radius-sm);
	transition: color 0.15s ease, background 0.15s ease;
}

.war-nav a:hover {
	color: var(--war-text);
	background: var(--war-surface);
}

/* The active tab is marked with a slice of the brand spectrum rather than a
   flat underline: it is the one place the full ramp appears in the chrome. */
.war-nav a[aria-current="page"] {
	color: var(--war-text);
}

.war-nav a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 15px;
	right: 15px;
	bottom: -1px;
	height: 2px;
	background: var(--war-spectrum);
	border-radius: 2px;
}

.war-topbar__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.war-iconbtn {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--war-line);
	border-radius: var(--war-radius-sm);
	background: var(--war-surface);
	color: var(--war-text-muted);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.war-iconbtn:hover {
	color: var(--war-text);
	border-color: var(--war-line-strong);
}

/* ----------------------------------------------------------------- shell  */

.war-shell {
	display: grid;
	grid-template-columns: 1fr;
	max-width: var(--war-max);
	margin: 0 auto;
	padding: var(--war-gap) 26px 60px;
	gap: var(--war-gap);
}

.war-shell--sidebar {
	grid-template-columns: var(--war-sidebar) 1fr;
}

.war-sidebar {
	position: sticky;
	top: 96px;
	align-self: start;
	background: var(--war-surface);
	border: 1px solid var(--war-line);
	border-radius: var(--war-radius);
	padding: 12px;
	max-height: calc(100vh - 120px);
	overflow-y: auto;
}

.war-sidebar__group + .war-sidebar__group {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--war-line);
}

.war-sidebar__label {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--war-text-dim);
	padding: 0 10px 8px;
}

.war-sidebar a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 10px;
	border-radius: var(--war-radius-sm);
	font-size: 14px;
	color: var(--war-text-muted);
	transition: background 0.15s ease, color 0.15s ease;
}

.war-sidebar a:hover {
	background: var(--war-surface-raised);
	color: var(--war-text);
}

.war-sidebar a.is-active {
	background: var(--war-surface-raised);
	color: var(--war-text);
	font-weight: 600;
	box-shadow: inset 2px 0 0 var(--war-red);
}

.war-sidebar svg {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	opacity: 0.75;
}

/* ------------------------------------------------------------------ hero  */

.war-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	background: var(--war-surface);
	border: 1px solid var(--war-line);
	border-radius: var(--war-radius);
	overflow: hidden;
	min-height: 340px;
}

/* The spectrum stripe is the signature element: one hairline of the full logo
   ramp across the top of the hero, and nowhere else at this weight. */
.war-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--war-spectrum);
	z-index: 3;
}

.war-hero__body {
	padding: 46px 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 2;
}

.war-eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--war-yellow);
	margin-bottom: 16px;
}

.war-hero__title {
	font-size: clamp(34px, 4.2vw, 54px);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.02;
	margin-bottom: 18px;
}

.war-hero__lede {
	font-size: 16px;
	color: var(--war-text-muted);
	max-width: 42ch;
	margin-bottom: 28px;
}

.war-hero__art {
	position: relative;
	overflow: hidden;
	background: var(--war-surface-raised);
}

.war-hero__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Fade the art into the panel so the join is a gradient rather than a seam. */
.war-hero__art::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--war-surface) 0%, transparent 45%);
}

/* With no featured image the panel would be dead space. Rather than collapse
   it, fill it with scanlines: the one texture every CRT-era player actually
   looked at, tinted with the brand ramp. It reads as belonging to the subject
   instead of as a missing asset. */
.war-hero__art--empty {
	background:
		repeating-linear-gradient(
			0deg,
			rgba(255, 255, 255, 0.035) 0 2px,
			transparent 2px 4px
		),
		var(--war-spectrum);
	background-blend-mode: overlay;
	opacity: 0.5;
}

.war-hero__art--empty::after {
	background:
		linear-gradient(90deg, var(--war-surface) 0%, transparent 55%),
		radial-gradient(ellipse at 65% 50%, transparent 30%, rgba(10, 10, 11, 0.75) 100%);
}

.war-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--war-radius-sm);
	font-family: var(--war-display);
	font-size: 14.5px;
	font-weight: 600;
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, opacity 0.15s ease, border-color 0.15s ease;
}

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

.war-btn--primary {
	background: var(--war-spectrum);
	color: #0a0a0b;
	font-weight: 700;
}

.war-btn--primary:hover {
	opacity: 0.92;
	color: #0a0a0b;
}

.war-btn--ghost {
	background: transparent;
	border-color: var(--war-line-strong);
	color: var(--war-text);
}

.war-btn--ghost:hover {
	border-color: var(--war-text-muted);
}

.war-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ----------------------------------------------------------------- cards  */

.war-grid {
	display: grid;
	gap: var(--war-gap);
	margin-top: var(--war-gap);
}

.war-grid--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.war-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.war-panel {
	background: var(--war-surface);
	border: 1px solid var(--war-line);
	border-radius: var(--war-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.war-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px var(--war-pad);
	border-bottom: 1px solid var(--war-line);
}

.war-panel__title {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--war-text-muted);
}

.war-panel__link {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--war-link);
}

.war-panel__body {
	padding: var(--war-pad);
	flex: 1;
}

.war-panel__body--flush {
	padding: 0;
}

/* ------------------------------------------------------------- game rows  */

.war-row {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 13px var(--war-pad);
	border-bottom: 1px solid var(--war-line);
	transition: background 0.15s ease;
}

.war-row:last-child {
	border-bottom: 0;
}

.war-row:hover {
	background: var(--war-surface-raised);
}

/* Box art is the subject's own artefact and the reason people recognise a
   game at a glance, so it is given a real aspect ratio rather than a square
   crop that would slice the top off every cartridge label. */
.war-thumb {
	width: 42px;
	aspect-ratio: 3 / 4;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: 4px;
	background: var(--war-surface-raised);
	border: 1px solid var(--war-line);
}

.war-thumb--lg {
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: var(--war-radius-sm);
}

.war-row__body {
	min-width: 0;
	flex: 1;
}

.war-row__title {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.war-row__meta {
	font-size: 12px;
	color: var(--war-text-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.war-row__right {
	text-align: right;
	flex-shrink: 0;
}

.war-rank {
	width: 20px;
	flex-shrink: 0;
	font-family: var(--war-mono);
	font-size: 12.5px;
	color: var(--war-text-dim);
	text-align: center;
}

/* Prices are tabular so digits align down a column and can be compared by eye,
   which is the entire point of a market table. */
.war-price {
	font-family: var(--war-mono);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.war-delta {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-family: var(--war-mono);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.war-delta--up { color: var(--war-up); }
.war-delta--down { color: var(--war-down); }
.war-delta--flat { color: var(--war-text-dim); }

/* ------------------------------------------------------------ game cards  */

.war-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
	gap: 16px;
}

.war-card__art {
	position: relative;
	margin-bottom: 10px;
	border-radius: var(--war-radius-sm);
	overflow: hidden;
	border: 1px solid var(--war-line);
	background: var(--war-surface-raised);
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.war-card:hover .war-card__art {
	border-color: var(--war-line-strong);
	transform: translateY(-3px);
}

.war-card__art img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.war-card__platform {
	position: absolute;
	left: 7px;
	bottom: 7px;
	padding: 3px 7px;
	border-radius: 3px;
	background: rgba(10, 10, 11, 0.85);
	backdrop-filter: blur(4px);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--war-text-muted);
}

.war-card__title {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.war-card__meta {
	font-size: 12px;
	color: var(--war-text-dim);
	margin-top: 2px;
}

/* Placeholder art. Most of the catalogue has no cover image yet, so this
   appears in bulk. It has to read as "image pending" without competing with
   the real box art beside it, so it is a single dim spectrum sweep behind the
   platform-style label rather than the full ramp: repeated forty times, the
   full ramp turns a catalogue page into a test card. */
.war-noart {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 3 / 4;
	background: var(--war-surface-raised);
	overflow: hidden;
}

.war-noart::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--war-spectrum);
	opacity: 0.07;
}

.war-noart::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: var(--war-spectrum);
	opacity: 0.55;
}

.war-noart span {
	position: relative;
	font-family: var(--war-display);
	font-weight: 800;
	font-size: 10px;
	letter-spacing: 0.16em;
	color: var(--war-text-dim);
}

/* ----------------------------------------------------------------- stats  */

.war-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--war-line);
	border: 1px solid var(--war-line);
	border-radius: var(--war-radius);
	overflow: hidden;
}

.war-stat {
	position: relative;
	background: var(--war-surface);
	padding: 22px var(--war-pad) 20px;
}

/* The ramp is carried by a rule above each stat rather than by the numerals.
   Colouring the digits themselves costs legibility on the one element whose
   whole job is to be read at a glance, and four differently coloured numbers
   imply a difference in kind that does not exist. */
.war-stat::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
}

.war-stat:nth-child(1)::before { background: var(--war-red); }
.war-stat:nth-child(2)::before { background: var(--war-orange); }
.war-stat:nth-child(3)::before { background: var(--war-green); }
.war-stat:nth-child(4)::before { background: var(--war-blue); }

.war-stat__value {
	font-family: var(--war-display);
	font-size: 30px;
	font-weight: 800;
	letter-spacing: -0.035em;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	color: var(--war-text);
}

.war-stat__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--war-text-dim);
	margin-top: 5px;
}

/* ---------------------------------------------------------------- footer  */

.war-footer {
	border-top: 1px solid var(--war-line);
	margin-top: 50px;
	padding: 44px 26px 34px;
	background: var(--war-surface);
}

.war-footer__inner {
	max-width: var(--war-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.6fr repeat(3, 1fr);
	gap: 40px;
}

.war-footer h4 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--war-text-dim);
	margin-bottom: 13px;
}

.war-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.war-footer li {
	margin-bottom: 8px;
}

.war-footer a {
	font-size: 13.5px;
	color: var(--war-text-muted);
}

.war-footer a:hover {
	color: var(--war-text);
}

.war-footer__note {
	max-width: var(--war-max);
	margin: 34px auto 0;
	padding-top: 22px;
	border-top: 1px solid var(--war-line);
	font-size: 12.5px;
	color: var(--war-text-dim);
}

.war-footer__blurb {
	font-size: 13.5px;
	color: var(--war-text-muted);
	max-width: 34ch;
	margin-top: 14px;
}

/* ------------------------------------------------------------------ misc  */

.war-section-title {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 34px 0 0;
}

.war-empty {
	padding: 34px var(--war-pad);
	text-align: center;
	color: var(--war-text-dim);
	font-size: 13.5px;
}

.war-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ------------------------------------------------------------ responsive  */

@media (max-width: 1200px) {
	.war-grid--3 {
		grid-template-columns: 1fr 1fr;
	}
	.war-stats {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1024px) {
	.war-shell--sidebar {
		grid-template-columns: 1fr;
	}
	.war-sidebar {
		display: none;
	}
	.war-hero {
		grid-template-columns: 1fr;
	}
	.war-hero__art {
		order: -1;
		height: 210px;
	}
	.war-hero__art::after {
		background: linear-gradient(0deg, var(--war-surface) 0%, transparent 60%);
	}
	.war-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 860px) {
	.war-nav {
		display: none;
	}
	.war-grid--3,
	.war-grid--2 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 620px) {
	.war-shell {
		padding: 14px 14px 44px;
	}
	.war-hero__body {
		padding: 30px 24px;
	}
	.war-stats {
		grid-template-columns: 1fr 1fr;
	}
	.war-footer__inner {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.war-cards {
		grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	}
}

/* ------------------------------------------------------- platform tags  */

/* Platform is the first thing a collector needs to know: the same title on
   SNES and Mega Drive is two different objects at two different prices. It
   sits above the title rather than buried in metadata below it. */
.war-platform-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.war-tag {
	display: inline-flex;
	align-items: center;
	padding: 4px 11px;
	border: 1px solid var(--war-line-strong);
	border-radius: 100px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--war-text-muted);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.war-tag:hover {
	color: var(--war-text);
	border-color: var(--war-text-dim);
}

/* ------------------------------------------------------- platform head  */

.war-platform-head {
	position: relative;
	overflow: hidden;
}

.war-platform-head::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: var(--war-spectrum);
}

.war-platform-head__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 26px;
	align-items: center;
}

.war-platform-head__art {
	width: 132px;
	height: auto;
	border-radius: var(--war-radius-sm);
	border: 1px solid var(--war-line);
	background: var(--war-surface-raised);
}

/* --------------------------------------------------------- pagination  */

.war-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: var(--war-gap);
	flex-wrap: wrap;
}

.war-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--war-line);
	border-radius: var(--war-radius-sm);
	background: var(--war-surface);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--war-text-muted);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.war-pagination .page-numbers:hover {
	color: var(--war-text);
	border-color: var(--war-line-strong);
}

.war-pagination .page-numbers.current {
	color: var(--war-text);
	border-color: transparent;
	background: var(--war-surface-raised);
	box-shadow: inset 0 -2px 0 var(--war-red);
}

.war-pagination .dots {
	border-color: transparent;
	background: transparent;
}

/* ------------------------------------------------------------- filters  */

.war-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.war-filters select,
.war-filters input[type="search"] {
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--war-line);
	border-radius: var(--war-radius-sm);
	background: var(--war-surface-raised);
	color: var(--war-text);
	font-family: var(--war-body);
	font-size: 13.5px;
}

.war-filters input[type="search"] {
	min-width: 220px;
}

.war-filters select:focus,
.war-filters input:focus {
	outline: none;
	border-color: var(--war-blue);
}

@media (max-width: 700px) {
	.war-platform-head__inner {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.war-platform-head__art {
		width: 96px;
	}
	.war-filters input[type="search"] {
		min-width: 0;
		flex: 1;
	}
}