/**
 * GET YOUR SAVE layout styles.
 *
 * Site-level spacing, header, footer, and responsive layout primitives.
 */

.gys-site-main,
.site-main,
.content-area {
	width: min(100% - (var(--gutter-desktop) * 2), var(--site-max-width));
	margin-inline: auto;
	padding-block: var(--space-8);
}

.home-main {
	display: grid;
	gap: var(--space-10);
}

.product-main,
.article-main,
.shop-main,
.archive-main {
	display: grid;
	gap: var(--space-5);
}

.product-shell {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.42fr);
	gap: var(--space-5);
	align-items: start;
}

.product-shell > .product-specs-panel,
.product-shell > .product-tabs,
.product-shell > .game-archive-lore,
.product-shell > .related-cartridge-shelf {
	grid-column: 1 / -1;
}

.article-layout,
.archive-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 0.36fr);
	gap: var(--space-5);
	align-items: start;
}

.article-sidebar,
.archive-sidebar {
	display: grid;
	gap: var(--space-4);
}

.home-console {
	position: relative;
}

.code-hero {
	display: grid;
	grid-template-columns: minmax(520px, 1.08fr) minmax(420px, 0.92fr);
	gap: var(--space-5);
	align-items: stretch;
	padding: var(--space-4);
	border: 4px solid #000000;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 36%),
		#d7d7d7;
	box-shadow:
		inset 2px 2px 0 #ffffff,
		inset -2px -2px 0 rgba(0, 0, 0, 0.28);
}

.code-hero__visual {
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: var(--space-3);
	min-width: 0;
	border-right: 2px solid #888888;
	padding-right: var(--space-4);
}

.code-module-title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding-bottom: var(--space-2);
	border-bottom: 2px solid #777777;
	font-family: var(--font-pixel);
	font-size: 0.82rem;
	line-height: 1.4;
	text-transform: uppercase;
}

.code-module-title span {
	color: #e60012;
}

.home-bottom-panels {
	display: grid;
	grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
	gap: var(--space-6);
}

.home-content-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
	gap: var(--space-5);
	align-items: start;
}

.home-sidebar {
	display: grid;
	gap: var(--space-5);
}

.section-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	border: 2px solid #000000;
	border-bottom: 0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
		#e0e0e0;
	padding: var(--space-2) var(--space-3);
	box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.75);
}

.section-title-row::after {
	content: "";
	flex: 1 1 auto;
	height: 2px;
	background: #e60012;
	order: 1;
}

.section-title-row h2 {
	order: 0;
	margin: 0;
	font-family: var(--font-pixel);
	font-size: 0.95rem;
	line-height: 1.45;
}

.section-title-row a {
	order: 2;
	color: #005ca8;
	font-family: var(--font-pixel);
	font-size: 0.58rem;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}

.home-cartridge-shelf,
.home-archive-feed {
	display: grid;
	gap: var(--space-4);
}

.home-cartridge-shelf > h2,
.home-archive-feed > h2 {
	display: inline-flex;
	width: fit-content;
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border: 4px solid #000000;
	background: var(--color-panel-dark);
	color: var(--color-text-inverse);
	font-size: clamp(1rem, 1.8vw, 1.25rem);
	line-height: 1.45;
	text-shadow: 2px 2px 0 #000000;
}

.snes-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	border-bottom: var(--border-hard-thick);
	background: var(--color-console-shell);
	color: var(--color-text-inverse);
}

.gys-console-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: #000000;
	color: #ffffff;
	box-shadow: 0 4px 0 #000000;
}

.gys-console-shell {
	display: grid;
	grid-template-columns: 304px minmax(0, 1fr) 330px;
	align-items: center;
	width: min(100%, 1440px);
	margin-inline: auto;
	border-inline: 4px solid #000000;
	background: #111111;
}

.gys-console-pad,
.gys-console-title-panel,
.gys-console-slot {
	min-height: 104px;
	border: 2px solid #000000;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 44%),
		linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.2)),
		#242424;
	box-shadow:
		inset 3px 3px 0 rgba(255, 255, 255, 0.12),
		inset -3px -3px 0 rgba(0, 0, 0, 0.55);
}

.gys-console-pad {
	display: grid;
	place-items: center;
	padding: var(--space-2);
}

.gys-controller-svg {
	width: 260px;
	max-width: 100%;
	height: auto;
	filter: drop-shadow(3px 3px 0 #000000);
}

.gys-console-title-panel {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--space-6);
	padding: var(--space-3) var(--space-6);
}

.gys-console-power {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-pixel);
	font-size: 0.72rem;
	color: #ffffff;
}

.gys-power-led {
	width: 14px;
	height: 14px;
	border: 2px solid #000000;
	background: #e60012;
	box-shadow: 0 0 0 2px #4a0006, 0 0 12px #e60012;
	animation: gys-power-breathe 1.35s steps(2, end) infinite;
}

.gys-console-title {
	display: grid;
	justify-items: center;
	color: #ffffff;
	text-decoration: none;
}

.gys-console-title span {
	font-family: var(--font-pixel);
	font-size: clamp(1.65rem, 4vw, 3.2rem);
	line-height: 1.05;
	text-transform: uppercase;
	text-shadow: 4px 4px 0 #000000;
}

.gys-console-title strong {
	margin-top: var(--space-1);
	color: #e60012;
	font-family: var(--font-pixel);
	font-size: clamp(0.9rem, 1.8vw, 1.35rem);
	letter-spacing: 0;
	text-shadow: 2px 2px 0 #000000;
}

.gys-console-slot {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 76px;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2);
	background:
		linear-gradient(180deg, #cfcfcf, #9c9c9c),
		#bdbdbd;
	color: #111111;
}

.gys-console-slot span {
	display: grid;
	place-items: center;
	height: 72px;
	border: 2px solid #000000;
	background: #d7d7d7;
	box-shadow:
		inset 3px 3px 0 rgba(255, 255, 255, 0.58),
		inset -3px -3px 0 rgba(0, 0, 0, 0.22);
	font-family: var(--font-pixel);
	font-size: 0.68rem;
	line-height: 1.6;
	text-align: center;
}

.gys-console-slot i {
	display: block;
	height: 72px;
	border: 2px solid #000000;
	background:
		linear-gradient(180deg, #d3d3d3, #8d8d8d);
	box-shadow:
		inset 10px 0 0 rgba(255, 255, 255, 0.25),
		inset -10px 0 0 rgba(0, 0, 0, 0.24);
}

.gys-console-slot i::after {
	content: "";
	display: block;
	width: 52px;
	height: 10px;
	margin: 42px auto 0;
	border: 2px solid #000000;
	background: linear-gradient(90deg, #4b2088, #8e5ae8, #4b2088);
}

@keyframes gys-power-breathe {
	0%,
	100% {
		opacity: 1;
		box-shadow: 0 0 0 2px #4a0006, 0 0 14px #e60012;
	}

	50% {
		opacity: 0.55;
		box-shadow: 0 0 0 2px #4a0006, 0 0 4px #e60012;
	}
}

.gys-console-nav {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--space-3);
	width: min(100%, 1440px);
	min-height: 72px;
	margin-inline: auto;
	padding: 0 var(--space-4);
	border: 4px solid #000000;
	border-top: 0;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 50%),
		#050505;
}

.gys-console-nav__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gys-console-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 190px;
	color: #ffffff;
	text-decoration: none;
}

.gys-console-nav__brand strong,
.gys-console-nav__brand small {
	display: block;
	font-family: var(--font-pixel);
	line-height: 1.2;
	text-transform: uppercase;
}

.gys-console-nav__brand strong {
	font-size: 0.78rem;
}

.gys-console-nav__brand small {
	color: #20bb48;
	font-size: 0.55rem;
}

.gys-nav-flower {
	width: 38px;
	height: 38px;
	border: 2px solid #000000;
	background: #2aa8df;
	box-shadow:
		10px 0 0 #e60012,
		0 10px 0 #f2c230,
		10px 10px 0 #20bb48,
		inset 0 0 0 10px #111111;
}

.gys-console-nav__actions {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: #ffffff;
}

.gys-console-nav__actions a {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: #ffffff;
	text-decoration: none;
}

.gys-console-nav__actions svg {
	width: 28px;
	height: 28px;
	filter: drop-shadow(2px 2px 0 #000000);
}

.gys-cart-icon span {
	position: absolute;
	top: 2px;
	right: 0;
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	border: 2px solid #000000;
	background: #e60012;
	color: #ffffff;
	font-family: var(--font-pixel);
	font-size: 0.55rem;
	line-height: 1;
}

.gys-console-nav__menu a {
	display: inline-flex;
	min-height: 72px;
	align-items: center;
	padding: var(--space-3) clamp(0.75rem, 1.7vw, 1.8rem);
	border-right: 0;
	border-bottom: 4px solid transparent;
	color: #ffffff;
	font-family: var(--font-pixel);
	font-size: 0.72rem;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
}

.gys-console-nav__menu a:hover,
.gys-console-nav__menu .current-menu-item > a {
	background: transparent;
	border-bottom-color: #e60012;
	color: #ffffff;
}

.snes-header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-5);
	width: min(100% - (var(--gutter-desktop) * 2), var(--site-max-width));
	margin-inline: auto;
	padding-block: var(--space-4);
}

.snes-header__brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	min-width: 0;
}

.snes-header__logo {
	color: var(--color-text-inverse);
	font-family: var(--font-pixel);
	font-size: var(--font-size-xs);
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
}

.snes-header__power {
	width: 14px;
	height: 14px;
	border: var(--border-hard);
	background: var(--color-red);
	box-shadow: 0 0 0 2px var(--color-panel-dark);
}

.snes-header__nav {
	min-width: 0;
}

.snes-header__menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.snes-header__menu a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: var(--space-2) var(--space-3);
	border: var(--border-hard);
	background: var(--color-panel);
	box-shadow: var(--shadow-pixel-small);
	color: var(--color-text);
	font-family: var(--font-pixel);
	font-size: 0.625rem;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
}

.snes-header__menu a:hover {
	background: var(--color-yellow);
	color: var(--color-black);
}

.snes-header__buttons {
	display: grid;
	grid-template-columns: repeat(2, 18px);
	gap: var(--space-2);
}

.snes-header__button {
	width: 18px;
	height: 18px;
	border: var(--border-hard);
	box-shadow: var(--shadow-pixel-small);
}

.snes-header__button--red {
	background: var(--color-red);
}

.snes-header__button--blue {
	background: var(--color-blue);
}

.snes-header__button--yellow {
	background: var(--color-yellow);
}

.snes-header__button--green {
	background: var(--color-green);
}

.gys-feature-strip,
.gys-newsletter,
.gys-site-footer {
	width: min(100% - (var(--gutter-desktop) * 2), var(--site-max-width));
	margin-inline: auto;
}

.gys-feature-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin-top: var(--space-6);
	border: 4px solid #000000;
	background: #000000;
}

.gys-feature-strip__item {
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: var(--space-2) var(--space-3);
	align-items: center;
	min-height: 92px;
	padding: var(--space-3);
	border-right: 2px solid #777777;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 48%),
		#e0e0e0;
	box-shadow: inset 2px 2px 0 #ffffff;
}

.gys-feature-strip__item:last-child {
	border-right: 0;
}

.gys-feature-strip__item strong {
	font-family: var(--font-pixel);
	font-size: 0.72rem;
	line-height: 1.35;
}

.gys-feature-strip__item small {
	grid-column: 2;
	font-size: 0.82rem;
	line-height: 1.25;
}

.gys-newsletter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.8fr);
	gap: var(--space-5);
	align-items: center;
	margin-top: var(--space-4);
	padding: var(--space-4);
	border: 4px solid #000000;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 50%),
		#111111;
	color: #ffffff;
}

.gys-newsletter strong {
	font-family: var(--font-pixel);
}

.gys-newsletter p {
	margin: var(--space-1) 0 0;
	color: #d7d7d7;
}

.gys-newsletter__form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 160px;
	gap: var(--space-2);
}

.gys-newsletter__form input,
.gys-newsletter__form button {
	min-height: 40px;
	border: 2px solid #000000;
	border-radius: 0 !important;
}

.gys-newsletter__form button {
	background: #e60012;
	box-shadow: 3px 3px 0 #000000;
	color: #ffffff;
	font-family: var(--font-pixel);
	font-size: 0.68rem;
}

.gys-site-footer {
	margin-top: var(--space-4);
	border: 4px solid #000000;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 40%),
		#111111;
	color: #ffffff;
}

.gys-site-footer__inner {
	display: grid;
	grid-template-columns: minmax(260px, 1.3fr) repeat(3, minmax(140px, 0.7fr)) minmax(190px, 0.9fr);
	gap: var(--space-6);
	padding: var(--space-6);
	border-bottom: 2px solid #000000;
}

.gys-site-footer a {
	color: #d7d7d7;
	text-decoration: none;
}

.gys-site-footer a:hover {
	color: #ffffff;
}

.gys-footer-brand {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	gap: var(--space-3);
	align-content: start;
}

.gys-footer-brand h2 {
	margin: 0;
	color: #ffffff;
	font-size: 1rem;
	line-height: 1.3;
}

.gys-footer-brand strong {
	color: #e60012;
	font-family: var(--font-pixel);
	font-size: 0.72rem;
}

.gys-footer-brand p {
	grid-column: 1 / -1;
	margin: 0;
	color: #d7d7d7;
	font-size: 0.92rem;
}

.gys-footer-column,
.gys-footer-secure {
	display: grid;
	align-content: start;
	gap: var(--space-2);
	border-left: 1px solid #333333;
	padding-left: var(--space-5);
}

.gys-footer-column h3,
.gys-footer-secure h3 {
	margin: 0 0 var(--space-2);
	color: #ffffff;
	font-family: var(--font-pixel);
	font-size: 0.72rem;
}

.gys-card-row,
.gys-social-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.gys-card-row span,
.gys-social-row span {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 32px;
	border: 2px solid #000000;
	background: #efefef;
	color: #111111;
	font-weight: 900;
}

.gys-footer-secure p {
	margin: var(--space-3) 0 0;
	color: #d7d7d7;
	font-family: var(--font-pixel);
	font-size: 0.62rem;
	line-height: 1.7;
}

.gys-footer-powerbar {
	display: grid;
	grid-template-columns: 180px minmax(240px, 1fr) minmax(260px, 0.8fr);
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-4);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 50%),
		#1f1f1f;
}

.gys-footer-powerbar strong {
	justify-self: center;
	padding: var(--space-3) var(--space-8);
	border: 2px solid #000000;
	background: #9c9c9c;
	box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.45);
	color: #111111;
	font-family: var(--font-pixel);
	font-size: 0.72rem;
}

.gys-footer-powerbar small {
	justify-self: end;
	color: #d7d7d7;
	font-family: var(--font-mono);
	font-size: 0.78rem;
}

.gys-footer-buttons {
	display: flex;
	gap: var(--space-3);
}

.gys-footer-buttons span {
	width: 24px;
	height: 24px;
	border: 2px solid #000000;
	background: #e60012;
}

.gys-footer-buttons span:nth-child(2) {
	background: #0072b2;
}

.gys-footer-buttons span:nth-child(3) {
	background: #f2a900;
}

.gys-footer-buttons span:nth-child(4) {
	background: #009b48;
}

.system-status__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-3);
	margin: 0;
}

.system-status__list div {
	border: var(--border-hard);
	background: var(--color-panel);
	color: var(--color-text);
	padding: var(--space-3);
}

.system-status__list dt {
	font-family: var(--font-pixel);
	font-size: 0.625rem;
	margin-bottom: var(--space-2);
}

.system-status__list dd {
	margin: 0;
	font-weight: 800;
}

@media (max-width: 900px) {
	.gys-site-main,
	.site-main,
	.content-area,
	.snes-header__inner,
	.gys-site-footer__inner {
		width: min(100% - (var(--gutter-tablet) * 2), var(--site-max-width));
	}

	.snes-header__inner {
		grid-template-columns: 1fr auto;
	}

	.snes-header__nav {
		grid-column: 1 / -1;
	}

	.snes-header__menu {
		justify-content: flex-start;
	}

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

	.code-hero,
	.home-bottom-panels,
	.home-content-grid,
	.product-shell,
	.article-layout,
	.archive-layout {
		grid-template-columns: 1fr;
	}

	.gys-console-header__top {
		grid-template-columns: 1fr;
	}

	.gys-console-shell {
		grid-template-columns: 1fr;
	}

	.gys-console-title-panel {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
	}

	.gys-console-slot {
		grid-template-columns: 1fr;
	}

	.gys-console-slot i {
		display: none;
	}

	.gys-console-nav {
		flex-wrap: wrap;
		min-height: 0;
		padding-block: var(--space-2);
	}

	.gys-console-nav__menu a {
		min-height: 42px;
	}

	.gys-feature-strip,
	.gys-newsletter,
	.gys-site-footer__inner,
	.gys-footer-powerbar {
		grid-template-columns: 1fr;
	}

	.gys-footer-powerbar strong,
	.gys-footer-powerbar small {
		justify-self: start;
	}
}

@media (max-width: 560px) {
	.gys-site-main,
	.site-main,
	.content-area,
	.snes-header__inner,
	.gys-site-footer__inner {
		width: min(100% - (var(--gutter-mobile) * 2), var(--site-max-width));
	}

	.snes-header__inner {
		grid-template-columns: 1fr;
	}

	.snes-header__buttons {
		display: none;
	}

	.system-status__list {
		grid-template-columns: 1fr;
	}
}