/*
 * GeekCade page shell: fixed header, optional pinned page bar, independently scrolling <main>,
 * footer anchored to the viewport bottom, plus the common components. Values come from tokens.css.
 */
html, body { height: 100%; }
body {
	margin: 0;
	display: flex;
	flex-direction: column;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;                 /* only <main> scrolls */
	background: var(--gc-bg);
	color: var(--gc-text);
	font-family: var(--gc-font-ui);
	font-weight: var(--gc-fw-body);
	font-size: var(--gc-fs-body);
	line-height: var(--gc-lh);
}
/* CRT scanlines over the whole site (not the Asteroids home, which draws its own screen) */
body:not(.shell-home)::before {
	content: ""; position: fixed; inset: 0; z-index: var(--gc-z-overlay); pointer-events: none;
	background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0, 0, 0, .13) 4px); opacity: .6;
}
.site-header, .page-bar, .site-footer { flex: none; }
#main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; outline: none; position: relative; overscroll-behavior: contain; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { #main { scroll-behavior: auto; } }
.pixel { font-family: var(--gc-font-arcade); line-height: 1.6; }

/* Keyboard focus is always visible */
:focus-visible { outline: 3px solid var(--gc-focus); outline-offset: 2px; }
#main:focus-visible { outline-offset: -3px; }
.skip-link { position: absolute; left: var(--gc-sp-2); top: -4rem; z-index: calc(var(--gc-z-overlay) + 1); padding: var(--gc-sp-2) var(--gc-sp-4);
	background: var(--gc-yellow); color: var(--gc-on-accent); font-weight: var(--gc-fw-heading); }
.skip-link:focus { top: var(--gc-sp-2); color: var(--gc-on-accent); }

/* Header, page bar and footer contents sit in the same centred column as the page content */
.site-header, .page-bar, .site-footer { --gc-edge: max(var(--gc-gutter), calc((100% - var(--gc-max-w)) / 2 + var(--gc-gutter))); padding-left: var(--gc-edge); padding-right: var(--gc-edge); }

/* ---- Header ------------------------------------------------------------------------------ */
.site-header {
	position: relative; z-index: var(--gc-z-header);
	display: flex; align-items: center; gap: 18px;
	min-height: var(--gc-header-h);
	background: var(--gc-header-bg);
	border-bottom: 1px solid var(--gc-line);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; color: var(--gc-yellow); text-decoration: none; }
.brand:hover { border-bottom: 0; color: var(--gc-yellow); }
.brand-logo { height: 39px; width: auto; max-width: 148px; object-fit: contain; mix-blend-mode: lighten; }   /* pac.png has an opaque black background */
.brand-name { font-family: var(--gc-font-arcade); font-size: 16px; white-space: nowrap; text-shadow: var(--gc-glow-yellow); }

.site-menu { display: flex; align-items: center; gap: 18px; flex: 1 1 auto; min-width: 0; }
.site-nav { margin-left: auto; }
.site-search { order: -1; }   /* brand, search, nav, account like the approved prototypes */
.site-nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-nav a, .account-link {
	display: block; padding: var(--gc-sp-2) var(--gc-sp-3);
	border: 0; background: transparent; cursor: pointer;
	color: #c8d9e8; font: inherit; font-size: 14px; font-weight: var(--gc-fw-heading); letter-spacing: 1.6px;
	text-decoration: none; white-space: nowrap;
}
.site-nav a:hover, .account-link:hover { color: var(--gc-cyan); background: var(--gc-hover-bg); border-bottom: 0; }
.site-nav a.active, .account-link.active { color: var(--gc-cyan); box-shadow: inset 0 -3px 0 var(--gc-cyan); }
.account-link { border: 1px solid var(--gc-line-strong); }
.account-name { color: var(--gc-muted); font-weight: var(--gc-fw-body); letter-spacing: 0; margin-left: var(--gc-sp-1); }

.site-search { flex: 1 1 220px; min-width: 135px; max-width: 350px; margin: 0; }
.site-search input[type=search] {
	display: block; width: 100%; box-sizing: border-box; padding: 9px 12px 9px 38px;
	border: 1px solid var(--gc-card-line); border-radius: 0;
	background: #101b2b url('../searchicon.png') no-repeat 10px 50% / 18px 18px;
	color: var(--gc-text); font: inherit; font-size: 16px; font-weight: var(--gc-fw-strong);
}
.site-search input[type=search]::placeholder { color: var(--gc-muted); opacity: 1; }
.site-search input[type=search]:hover, .site-search input[type=search]:focus { border-color: var(--gc-cyan); }

.site-account { display: flex; align-items: center; gap: var(--gc-sp-1); flex: none; }
.site-account form { margin: 0; }
.account-logout { color: var(--gc-muted); }

.nav-toggle { display: none; margin-left: auto; padding: 9px 12px; background: none; color: var(--gc-cyan);
	border: 1px solid var(--gc-line); cursor: pointer; }
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
	display: block; width: 22px; height: 2px; background: currentColor; content: ''; position: relative; }
.nav-toggle-bars::before { top: -7px; position: absolute; }
.nav-toggle-bars::after  { top: 7px;  position: absolute; }

/* Below 1100px the menu collapses behind the toggle; open state is aria-expanded on the toggle */
@media (max-width: 1099.98px) {
	.site-header { flex-wrap: wrap; }
	.nav-toggle { display: block; }
	.site-menu { display: none; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: var(--gc-sp-3); padding: var(--gc-sp-3) 0 var(--gc-sp-4); }
	.site-header.menu-open .site-menu { display: flex; }
	.site-nav { margin: 0; }
	.site-nav ul { flex-direction: column; }
	.site-nav a, .account-link { padding: var(--gc-sp-3); }
	.site-search { max-width: none; flex: none; order: 0; }
	.site-account { justify-content: space-between; }
	.site-header.menu-open { max-height: 80dvh; overflow-y: auto; }
}
@media (max-width: 760px) { .brand-name { font-size: 12px; } .brand-logo { height: 29px; } }
@media (max-width: 470px) { .brand-name { font-size: 10px; } .brand-logo { height: 22px; } .site-header { gap: 8px; } }

/* ---- Pinned page title / sort bar -------------------------------------------------------- */
.page-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gc-sp-2) var(--gc-sp-5);
	min-height: 72px; box-sizing: border-box; padding-top: 16px; padding-bottom: 16px;
	background: var(--gc-title-bg); border-bottom: 1px solid var(--gc-title-border); }
.page-heading { min-width: 0; }
.page-title { margin: 0; font-family: var(--gc-font-arcade); font-weight: var(--gc-fw-body); font-size: var(--gc-fs-title); line-height: 1.5; color: var(--gc-title-color); }
.page-subtitle { margin: 7px 0 0; font-size: 15px; color: var(--gc-muted); }
.page-tools { display: flex; align-items: center; gap: 15px; margin-left: auto; }
.page-count { font-size: 14px; color: var(--gc-muted); }
.sort-bar { display: flex; flex-wrap: wrap; gap: var(--gc-sp-2); margin-left: auto; }
.sort-bar a { padding: var(--gc-sp-1) var(--gc-sp-3); border: 1px solid var(--gc-line); color: var(--gc-text); }
.sort-bar a:hover { color: var(--gc-hover); border-color: var(--gc-hover); }
.sort-bar a.active { color: var(--gc-on-accent); background: var(--gc-yellow); border-color: var(--gc-yellow); }
.sort-select { display: flex; align-items: center; gap: var(--gc-sp-2); }
.sort-select label { color: var(--gc-muted); }
.sort-select select { padding: 7px 10px; background: #0d1827; color: #cbdce9; border: 1px solid #344a60; font: inherit; font-size: 15px; font-weight: var(--gc-fw-strong); cursor: pointer; }
.sort-select select:hover { border-color: var(--gc-cyan); }

/* ---- Footer (the pager lives here on paged pages) ---------------------------------------- */
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px var(--gc-sp-5);
	padding-top: 10px; padding-bottom: 10px; background: var(--gc-footer-bg); border-top: 1px solid var(--gc-line); color: #8fa4b7; font-size: 15px; }
.foot-brand { font-family: var(--gc-font-arcade); font-size: 10px; color: var(--gc-yellow); }
.foot-links a { color: var(--gc-cyan); }
@media (max-width: 740px) { .foot-links { display: none; } .site-footer { justify-content: center; } }
@media (max-width: 620px) { .foot-brand { display: none; } }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; font-size: 14px; letter-spacing: 1px; color: var(--gc-muted); }
.pagination a, .pagination .pager-arrow { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	min-width: 29px; height: 29px; padding: 2px 6px; border: 1px solid transparent; border-radius: var(--gc-radius);
	font-weight: var(--gc-fw-heading); font-size: 14px; color: #b9d4e4; }
.pagination a:hover { color: var(--gc-yellow); border-color: #546778; background: #122033; }
.pagination a.current { color: #08121e; background: var(--gc-yellow); border-color: var(--gc-yellow); }
.pagination .pager-arrow { font-size: 21px; line-height: 19px; border-color: #38536c; color: var(--gc-cyan); margin: 0 6px; }
.pagination .pager-arrow[aria-disabled="true"] { opacity: .25; cursor: default; }
.pagination .pager-gap { padding: 0 3px; color: #7b96ac; }
@media (max-width: 740px) { .pagination { width: 100%; } }

/* ---- Content ------------------------------------------------------------------------------ */
.content { max-width: var(--gc-max-w); margin: 0 auto; padding: 24px var(--gc-gutter) 64px; box-sizing: border-box; }
.heading { font-weight: var(--gc-fw-heading); color: var(--gc-yellow); font-size: var(--gc-fs-lg); margin: 0 0 var(--gc-sp-3); }
.notice { max-width: 40rem; margin: var(--gc-sp-6) auto; padding: var(--gc-sp-5); text-align: center; background: var(--gc-panel); border: 1px solid var(--gc-line); font-size: var(--gc-fs-md); }
.planned { color: var(--gc-muted); }

/* .gc-card: gradient panel (named to avoid Bootstrap's .card) with a cyan corner bracket (tiles, scoreboards) */
.gc-card { position: relative; min-width: 0; background: linear-gradient(145deg, var(--gc-card-from), var(--gc-card-to)); border: 1px solid var(--gc-card-line);
	transition: transform .15s, border-color .15s; }
.gc-card::before { content: ""; position: absolute; top: -1px; left: -1px; width: 12px; height: 12px; border-left: 2px solid var(--gc-cyan); border-top: 2px solid var(--gc-cyan); }
@media (hover: hover) { a.gc-card:hover, .gc-card.hoverable:hover { transform: translateY(-3px); border-color: var(--gc-cyan); } }
@media (prefers-reduced-motion: reduce) { .gc-card { transition: none; } .gc-card:hover { transform: none !important; } }

/* Pixel button */
.cta, .btn-primary {
	display: inline-flex; align-items: center; justify-content: center; padding: 15px 23px;
	border: 2px solid var(--gc-cyan); background: var(--gc-cta-bg); color: var(--gc-cyan); cursor: pointer;
	font: var(--gc-fs-label) var(--gc-font-arcade); letter-spacing: .4px; text-decoration: none; box-shadow: 5px 5px 0 var(--gc-cta-shadow); transition: .15s;
}
.cta:hover, .btn-primary:hover { background: var(--gc-cyan); color: var(--gc-on-accent); transform: translate(-2px, -2px); border-bottom: 2px solid var(--gc-cyan); }
@media (prefers-reduced-motion: reduce) { .cta, .btn-primary { transition: none; } .cta:hover, .btn-primary:hover { transform: none; } }

/* Forms */
.form-card { max-width: 24rem; margin: var(--gc-sp-5) auto; padding: var(--gc-sp-5); background: var(--gc-panel); border: 1px solid var(--gc-line); }
.form-field { margin-bottom: var(--gc-sp-4); }
.form-field label { display: block; margin-bottom: var(--gc-sp-1); color: var(--gc-yellow); font-weight: var(--gc-fw-heading); }
.form-field input { width: 100%; box-sizing: border-box; padding: var(--gc-sp-2) var(--gc-sp-3); background: var(--gc-bg); color: var(--gc-text); border: 1px solid var(--gc-line-strong); font: inherit; }
.form-field input:hover { border-color: var(--gc-cyan); }
.form-error { color: var(--gc-pink); }

/* ---- Marquee tile grid (Scores) ----------------------------------------------------------- */
.content--wide { max-width: var(--gc-max-w); }
.tile-grid { display: grid; gap: var(--gc-grid-gap); grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1150px) { .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 850px)  { .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } }
@media (max-width: 380px)  { .tile-grid { grid-template-columns: 1fr; } }
.tile-grid.is-loading { opacity: .5; transition: opacity .15s; }
.tile-grid:focus { outline: 0; }
.tile-card { display: flex; flex-direction: column; padding: 11px 12px 9px; }
.tile-art { display: flex; align-items: center; justify-content: center; height: 84px; flex: none; margin-bottom: 7px; padding: 8px; }
.tile-art:hover { border-bottom: 0; }
.tile-art img { max-width: 94%; max-height: 76px; object-fit: contain; filter: drop-shadow(0 0 7px rgba(255, 255, 255, .1)); }
.tile-art-name { color: var(--gc-yellow); font: 11px/1.8 var(--gc-font-arcade); text-align: center; overflow-wrap: anywhere; text-transform: uppercase; }
.tile-scores { list-style: none; margin: 5px 0 0; padding: 0; }
.tile-scores li { line-height: 1.3; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px solid #273c50; font-size: 16px; }
.tile-scores li:first-child { border-top-color: #40566d; }
.tile-scores .name { color: var(--gc-cyan); font-weight: var(--gc-fw-heading); }
.tile-scores .name:hover { color: var(--gc-yellow); border-bottom: 0; }
.tile-scores .score { color: #e9f1fb; font-weight: var(--gc-fw-heading); font-family: var(--gc-font-score); font-variant-numeric: tabular-nums; }
.tile-scores li:first-child .score { color: var(--gc-yellow); }
.tile-date { margin: 3px 0 0; padding-top: 7px; border-top: 1px solid #273c50; color: #829eb2; font-size: 12px; }
@media (max-width: 470px) { .tile-card { padding: 9px; } .tile-art { height: 65px; } .tile-art img { max-height: 58px; } .tile-scores li { font-size: 14px; padding: 5px 0; } }

.result-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gc-sp-2) var(--gc-sp-5); padding: var(--gc-sp-2) 0; border-bottom: 1px solid var(--gc-line); font-size: var(--gc-fs-md); }
.result-name { color: var(--gc-yellow); min-width: 7rem; }
.result-label { flex: 1 1 14rem; }

/* ---- Marquee with placeholder (includes/marquee.html, js/marquee.js) -------------------------- */
.marquee { height: 73px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 5px; overflow: hidden;
	background: #05080d; border: 1px solid #233044; border-radius: var(--gc-radius); }
.marquee img { max-width: 100%; max-height: 100%; object-fit: contain; }
.marquee .missing { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px;
	color: #8faabd; text-align: center; border: 1px dashed #405a72; border-radius: 2px;
	background: repeating-linear-gradient(135deg, #0c1625 0, #0c1625 8px, #111f31 8px, #111f31 10px); }
.marquee .missing[hidden] { display: none; }
.missing-icon { color: var(--gc-cyan); font-size: 23px; line-height: 1; }
.missing-label { font-family: var(--gc-font-arcade); font-size: 7px; line-height: 1.6; letter-spacing: .1px; }

/* ---- Search results (Search page) ---------------------------------------------------------- */
.results { display: flex; flex-direction: column; gap: 8px; }
.results.is-loading { opacity: .5; transition: opacity .15s; }
.results:focus { outline: 0; }
.result { display: grid; grid-template-columns: 186px minmax(0, 1fr) 145px 65px 26px; align-items: center; gap: 18px; min-height: 102px; padding: 12px 18px;
	background: linear-gradient(105deg, #101b2c, #0b1321); border: 1px solid #27384e; border-radius: 6px; color: var(--gc-text); text-decoration: none;
	transition: border-color .15s, background .15s; }
.result:hover { border-color: #5f9fb2; background: #142138; color: var(--gc-text); border-bottom: 1px solid #5f9fb2; }
.result .game { min-width: 0; }
.result .name { color: #e9f5ff; font-size: 23px; font-weight: var(--gc-fw-heading); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.result .rom { margin-top: 5px; color: var(--gc-yellow); font-size: 14px; font-weight: var(--gc-fw-heading); letter-spacing: .6px; }
.result .type { color: var(--gc-cyan); font-size: 16px; font-weight: var(--gc-fw-strong); }
.result .year { color: #cbdceb; font-size: 17px; font-weight: var(--gc-fw-heading); text-align: right; }
.result .arrow { color: var(--gc-yellow); font-size: 22px; text-align: right; }
.notice.empty h2 { color: var(--gc-yellow); font-size: 16px; font-weight: var(--gc-fw-body); line-height: 1.6; }
@media (max-width: 1100px) { .result { grid-template-columns: 160px minmax(0, 1fr) 110px 55px 20px; gap: 12px; } }
@media (max-width: 760px) {
	.result { grid-template-columns: 104px minmax(0, 1fr) 20px; gap: 10px; padding: 9px; min-height: 92px; }
	.result .marquee { height: 63px; }
	.result .name { font-size: 19px; }
	.result .rom { font-size: 12px; }
	.result .type, .result .year { display: none; }
}
@media (prefers-reduced-motion: reduce) { .result, .results.is-loading { transition: none; } }

/* ---- Home variant: the Asteroids play area is <main>, between the normal header and footer ------ */
body.shell-home #main { overflow: hidden; display: flex; flex-direction: column; justify-content: space-evenly; }
body.shell-home #main:focus-visible { outline: 0; }
body.shell-home #main { text-shadow: 0 0 6px #000, 0 0 12px #000, 0 0 18px #000; }   /* readable as rocks drift behind the text */

/* Breadcrumb in the page bar (Game Info) */
.crumbs { margin-left: auto; font-size: 14px; color: var(--gc-muted); letter-spacing: .5px; }
.crumbs a { color: var(--gc-cyan); }
.crumbs [aria-current] { color: var(--gc-text); }