/* ====================================================================
   Games index (list) — slate redesign (2026-06-01)
   Ported from design_handoff_games/games.css (.gx-* + per-game accents)
   and wired to the real per-game live data. Tokens (--surface, --border,
   --text-*, --font-serif, --warning, --radius-*) come from
   extensions/index_new/styles.css; this file only adds the page-specific
   .gx-* layer + the per-game [data-game] accent map + the in-app offset.
   Scoped under .mv-root so it can't leak into the legacy chrome.
   ==================================================================== */

/* ---- Per-game accent tokens (set on each .gx-card via [data-game]) ----
   Each game owns one color: --g (solid), --g-2 (gradient partner),
   --g-ink (text/icon on the accent), --g-soft (tinted wash). Verbatim
   from the handoff so index → launch → play stays one color. */
.mv-root [data-game]              { --g: var(--accent); --g-2: var(--accent-strong); --g-ink:#fff; --g-soft: var(--accent-soft); }
.mv-root [data-game="crossword"]    { --g:#222B3D; --g-2:#0B1426; --g-ink:#fff; --g-soft:rgba(34,43,61,.07); }
.mv-root [data-game="scriptle"]     { --g:#7C3AED; --g-2:#5B21B6; --g-ink:#fff; --g-soft:rgba(124,58,237,.14); }
.mv-root [data-game="associations"] { --g:#E11D48; --g-2:#9F1239; --g-ink:#fff; --g-soft:rgba(225,29,72,.13); }
.mv-root [data-game="thorns"]       { --g:#E0992A; --g-2:#B45309; --g-ink:#231400; --g-soft:rgba(224,153,42,.16); }
.mv-root [data-game="categories"]   { --g:#8B5CF6; --g-2:#6D28D9; --g-ink:#fff; --g-soft:rgba(139,92,246,.14); }
.mv-root [data-game="match"]        { --g:#0EA5C5; --g-2:#0E7490; --g-ink:#04222B; --g-soft:rgba(14,165,197,.14); }
.mv-root [data-game="striker"]      { --g:#3B82F6; --g-2:#1E40AF; --g-ink:#fff; --g-soft:rgba(59,130,246,.14); }
.mv-root [data-game="sort"]         { --g:#10B981; --g-2:#047857; --g-ink:#04261B; --g-soft:rgba(16,185,129,.14); }
/* Dark-theme brightening so the accents hold contrast on the deep bg. */
.mv-root.theme-dark [data-game="crossword"] { --g:#6B7790; --g-2:#3F4A60; --g-ink:#fff; --g-soft:rgba(255,255,255,.06); }
.mv-root.theme-dark [data-game="thorns"]    { --g:#F2B23E; --g-ink:#231400; }
.mv-root.theme-dark [data-game="match"]     { --g:#22D3EE; --g-ink:#04222B; }
.mv-root.theme-dark [data-game="sort"]      { --g:#34D399; --g-ink:#04261B; }

/* ---- Page-local theme props (mirror the practice_history --ph-v* pattern)
   --gx-on-fill: white text that sits on a colored/dark fill (stays white in
   both themes). --gx-resume: the "Continue" chip green (status pair).
   --gx-thorns-a/-b: the Beat-the-Thorns deep-navy artwork backdrop — purely
   DECORATIVE cover-art, so it stays static (no dark override). Defined as
   separate stops so the gradient tokenizes (gradient-after-colon gotcha). */
.mv-root.gx-root {
	--gx-on-fill: #FFFFFF;
	--gx-resume: #047857;
	--gx-thorns-a: #0F1237;
	--gx-thorns-b: #242660;
}
.mv-root.gx-root.theme-dark,
html[data-theme='dark'] .mv-root.gx-root,
html:not([data-theme]) .mv-root.gx-root.theme-dark {
	--gx-resume: #34D399;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme]) .mv-root.gx-root:not(.theme-light):not(.theme-dark) {
		--gx-resume: #34D399;
	}
}

/* ---- Root + in-app shell offset (same model as resources/.rsc-inapp)
   60px icon rail + 224px home_loggedin secondary nav = 284px, + 68px top bar. */
.gx-root { min-height: 100%; }
.mv-root.gx-inapp {
	margin-left: 284px;
	padding-top: 68px;
	min-height: calc(100vh - 68px);
}
@media (max-width: 1180px) { .mv-root.gx-inapp { margin-left: 60px; } }
@media (max-width: 880px)  { .mv-root.gx-inapp { margin-left: 0; } }
/* iPad-portrait gutter fix: rail off-canvas via tlp- (768–1180px portrait); the reset above only fires <=880, so re-assert across the full tablet-portrait range (iPad Pro 12.9" = 1024px). Landscape keeps its rail. */
@media only screen and (min-device-width: 768px) and (max-device-width: 1180px) and (orientation: portrait) { .mv-root.gx-inapp { margin-left: 0; } }
@media (max-width: 768px)  { .mv-root.gx-inapp { padding-top: 64px; } }
@media (max-width: 560px)  { .mv-root.gx-inapp { padding-top: 60px; } }

/* ---- Page wrapper + header ---- */
.gx { box-sizing: border-box; padding: 40px 64px 64px; max-width: 1440px; margin-left: auto; margin-right: auto; }
@media (max-width: 1600px) { .gx { padding-left: 48px; padding-right: 48px; } }
@media (max-width: 1180px) { .gx { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 767px)  { .gx { padding-left: 16px; padding-right: 16px; } }
.gx-head { margin-bottom: 30px; }
.gx-eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-sans); font-size: 12px; font-weight: 700;
	letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
	margin-bottom: 14px;
}
.gx-eyebrow .dot { width: 7px; height: 7px; border-radius: 99px; background: var(--brand); }
.gx-head h1 {
	font-family: var(--font-serif); font-weight: 600; font-size: 44px;
	line-height: 1.05; letter-spacing: -0.02em; color: var(--text-1); margin: 0 0 10px;
}
.gx-head h1 em { font-style: italic; font-weight: 500; color: var(--brand); }
.gx-head p { font-size: 15.5px; line-height: 1.6; color: var(--text-3); max-width: 44em; margin: 0; }

/* ---- Grid + cards ---- */
.gx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gx-card {
	position: relative; overflow: hidden; text-decoration: none;
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: var(--surface);
	box-shadow: var(--shadow-card);
	display: flex; flex-direction: column;
	transition: transform .16s, box-shadow .16s, border-color .16s;
}
.gx-card:hover {
	transform: translateY(-3px);
	border-color: color-mix(in oklab, var(--g) 40%, var(--border));
	box-shadow: 0 22px 50px -22px color-mix(in oklab, var(--g) 60%, black);
}
.gx-art {
	height: 132px; position: relative;
	background: linear-gradient(150deg, var(--g), var(--g-2));
	display: flex; align-items: center; justify-content: center;
}
.gx-art::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(circle at 78% 18%, rgba(255,255,255,.22), transparent 55%),
	            repeating-linear-gradient(45deg, transparent 0 16px, rgba(255,255,255,.05) 16px 17px);
}
/* Real game artwork sits directly on the accent band, lifted with a soft
   drop-shadow (replaces the old frosted line-icon chip). */
.gx-artwork {
	position: relative; z-index: 1;
	display: flex; align-items: center; justify-content: center;
	filter: drop-shadow(0 6px 14px rgba(0,0,0,.30));
}
.gx-artwork svg { width: 58px; height: 58px; display: block; }
.gx-artwork .gx-art-img { height: 54px; width: auto; display: block; }
/* Beat the Thorns: the gold vine needs its native deep-navy backdrop to read
   (it would vanish on the gold accent). The gold --g still drives the card's
   hover glow + streak chip, so the game keeps its identity. */
.mv-root [data-game="thorns"] .gx-art { background: linear-gradient(180deg,var(--gx-thorns-a) 0%,var(--gx-thorns-b) 100%); }
.gx-tag {
	position: absolute; top: 13px; right: 13px; z-index: 2;
	display: inline-flex; align-items: center; gap: 5px;
	font-family: var(--font-sans); font-size: 10px; font-weight: 700;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--gx-on-fill); background: rgba(0,0,0,.32);
	padding: 5px 10px; border-radius: var(--radius-pill); backdrop-filter: blur(3px);
}
.gx-tag svg { width: 12px; height: 12px; }
.gx-foot { padding: 17px 20px 19px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.gx-card-name {
	font-family: var(--font-serif); font-size: 21px; font-weight: 600;
	letter-spacing: -0.012em; color: var(--text-1);
}
.gx-card-name .former {
	display: block; font-family: var(--font-sans); font-size: 11px; font-weight: 600;
	color: var(--g); letter-spacing: .02em; margin-top: 2px;
}
.gx-card-desc { font-size: 13px; line-height: 1.45; color: var(--text-3); }

/* ---- Live-state chip (continue / new-soon / streak / played-today) ---- */
.gx-card-meta { margin-top: 10px; display: flex; align-items: center; gap: 8px; }
.gx-chip {
	display: inline-flex; align-items: center; gap: 5px;
	font-family: var(--font-sans); font-size: 11px; font-weight: 600;
	padding: 3px 9px; border-radius: var(--radius-pill);
	color: var(--text-2); background: var(--surface-2);
}
.gx-chip svg { width: 12px; height: 12px; }
.gx-chip.is-resume { color: var(--gx-resume); background: rgba(16,185,129,.14); }
.gx-chip.is-streak { color: var(--warning); background: var(--warning-soft); }

@media (max-width: 1024px) { .gx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px)  { .gx { padding-top: 32px; padding-bottom: 56px; } }
@media (max-width: 620px)  { .gx-grid { grid-template-columns: minmax(0, 1fr); } .gx-head h1 { font-size: 38px; } }

/* Phone portrait: hide the hero eyebrow/pill above the main H1 (section eyebrows stay). */
@media (max-width: 560px) { .mv-root .gx-eyebrow { display: none !important; } }