/*
 * Cozy Steam Times — overrides loaded on top of the-new-steam-times.css.
 *
 * Activates when the view sets cozy_mode=True (currently: all_tags is exactly "Cozy").
 * Triggered by adding .cozy to the top-level .nst-page wrapper. All rules below MUST
 * be scoped via `.nst-page.cozy ...` so they're inert on the regular page.
 *
 * Palette + fonts cribbed from design_handoff_cozy_steam_times/README.md.
 */

.nst-page.cozy {
	--cozy-ink: oklch(0.24 0.04 250);
	--cozy-ink-soft: oklch(0.36 0.04 250);
	--cozy-cream: oklch(0.96 0.02 80);
	--cozy-accent: oklch(0.62 0.16 35);
	--cozy-accent-deep: oklch(0.5 0.16 32);
	--cozy-gold: oklch(0.8 0.13 78);
	--cozy-rule: rgba(31, 42, 64, 0.55);
}

/* Sky-blue painted broadsheet background. */
body:has(.nst-page.cozy) {
	background: linear-gradient(
		180deg,
		oklch(0.86 0.06 235) 0%,
		oklch(0.92 0.05 230) 40%,
		oklch(0.95 0.035 220) 100%
	);
}

/* ===== CLOUD BANDS =====
 *
 * Three SVG cloud bands fixed to the viewport, drifting at different speeds for
 * a parallax sky. z-index: -1 keeps them inside .nst-page's stacking context
 * (created by its `isolation: isolate`) but behind the unpositioned content.
 */
.nst-page.cozy .cozy-clouds {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}
.nst-page.cozy .cloud-band {
	position: absolute;
	left: -10%;
	width: 220%;
	display: block;
	will-change: transform;
	filter: blur(3px);
}
.nst-page.cozy .cloud-band-a { top: 4%; }
.nst-page.cozy .cloud-band-b { top: 22%; }
.nst-page.cozy .cloud-band-c { top: 48%; }

@keyframes cozy-drift-a {
	from { transform: translateX(-8%); }
	to   { transform: translateX(0%); }
}
@keyframes cozy-drift-b {
	from { transform: translateX(0%); }
	to   { transform: translateX(-12%); }
}

.nst-page.cozy .cloud-band-a { animation: cozy-drift-a 18s ease-in-out infinite alternate; }
.nst-page.cozy .cloud-band-b { animation: cozy-drift-b 28s ease-in-out infinite alternate; }
.nst-page.cozy .cloud-band-c { animation: cozy-drift-a 40s ease-in-out infinite alternate; }

/* ===== MASTHEAD ===== */

.nst-page.cozy .nst-mast {
	border-bottom: 1.5px solid var(--cozy-ink);
	padding-bottom: 14px;
	margin-bottom: 8px;
}

.nst-page.cozy .nst-mast-kicker {
	font-family: "Newsreader", serif;
	font-style: italic;
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cozy-accent-deep);
	margin-bottom: 6px;
}

.nst-page.cozy .nst-mast-title {
	font-family: "Berkshire Swash", serif;
	font-weight: 400;
	font-size: 90px;
	line-height: 1;
	letter-spacing: -0.005em;
	color: var(--cozy-ink);
	text-shadow:
		0 2px 0 rgba(255, 255, 255, 0.35),
		0 8px 24px rgba(31, 42, 64, 0.12);
}

.nst-page.cozy .nst-mast-rule {
	text-transform: none;
	color: var(--cozy-ink);
}

.nst-page.cozy .nst-mast-rule span {
	font-family: "DM Mono", "Courier New", monospace;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.18em;
}

/* Tagline (middle span) — kept as-is per design call. Only nudge the font so it doesn't
 * fight the new neighbors visually; tweak or remove if it reads worse than the original.
 */
.nst-page.cozy .nst-mast-rule .nst-mast-rule-mid {
	font-family: "Newsreader", serif;
	font-style: italic;
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0;
	color: var(--cozy-ink-soft);
}

/* ===== SECTION LABEL ROW (Selected Releases pill + subtitle) ===== */

.nst-page.cozy .nst-subhead {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	font-family: "Newsreader", serif;
	font-style: italic;
	font-weight: 400;
	font-size: 26px;
	color: var(--cozy-ink);
	margin: 26px 0 28px;
}

/* The green Bootstrap-ish toggle becomes a terracotta painted "tag" pill.
 * !important on padding to beat the inline style="padding-top: 3px; padding-bottom: 5px;"
 * on the <button> itself.
 */
.nst-page.cozy #latest-toggle {
	font-family: "Newsreader", serif;
	font-style: italic;
	font-weight: 600;
	font-size: 26px;
	line-height: 1;
	color: var(--cozy-cream);
	background-color: var(--cozy-accent);
	padding: 8px 22px 9px 22px !important;
	border-radius: 4px;
	border: none;
	transform: rotate(-1.2deg);
	box-shadow:
		0 4px 0 var(--cozy-accent-deep),
		0 8px 20px rgba(31, 42, 64, 0.14);
	vertical-align: middle;
}

.nst-page.cozy #latest-toggle:hover,
.nst-page.cozy #latest-toggle:focus-visible {
	background-color: var(--cozy-accent-deep);
}

.nst-page.cozy #latest-toggle .latest-caret {
	font-size: 14px;
	margin-left: 4px;
	color: var(--cozy-cream);
}

/* ===== FILTER CARD (.cw-card and friends) =====
 *
 * Strategy: the card uses a small set of CSS custom properties (--cw-ink,
 * --cw-sepia, --cw-brass, --cw-card-stock, etc.). Redefining them under
 * .nst-page.cozy swaps the whole palette in one shot — dark-brown ink → navy,
 * sepia → terracotta-deep, brass → gold, paper textures keep their warmth.
 * A few hard-coded colors in the slider/chip rules need targeted overrides.
 */

.nst-page.cozy {
	--cw-ink: oklch(0.24 0.04 250);          /* navy (was dark brown) */
	--cw-soft-ink: oklch(0.36 0.04 250);     /* softer navy */
	--cw-sepia: oklch(0.5 0.16 32);          /* terracotta-deep (was sepia brown) */
	--cw-brass: oklch(0.8 0.13 78);          /* gold (was brass) */
	--cw-paper: oklch(0.96 0.02 80);         /* cream (mostly unused but kept consistent) */
	--cw-card-stock: oklch(0.96 0.02 80);    /* same warm cream — broadsheet feel intact */
}

/* Slider track: was a warm tan #e3d3a8. Now a slightly darker sky-blue. */
.nst-page.cozy .cw-card .noUi-target {
	background: oklch(0.8 0.05 235);
}

/* Slider fill stripe: was sepia → mid-brown crosshatch. Now a deep-blue crosshatch. */
.nst-page.cozy .cw-card .noUi-connect {
	background: repeating-linear-gradient(135deg, oklch(0.45 0.1 235) 0 2px, oklch(0.38 0.1 235) 2px 4px);
}

/* Slider handle: was brass coin (highlight → brass → dark brown). Now gold coin. */
.nst-page.cozy .cw-card .noUi-horizontal .noUi-handle {
	background: radial-gradient(circle at 35% 30%, oklch(0.92 0.1 85), var(--cw-brass) 55%, oklch(0.5 0.12 75) 100%);
}

/* Slider ticks: was dark-brown at 55% alpha. Match new ink. */
.nst-page.cozy .cw-slider-tick {
	background: rgba(45, 54, 78, 0.55);
}

/* Chip background: was a near-white warm cream. Stay near-white but cooler. */
.nst-page.cozy .cw-chip {
	background-color: oklch(0.985 0.005 230);
}

/* ===== GAME CAPSULES (.nst-cap and friends) =====
 *
 * Re-skin only. No DOM reordering, no element additions, no JS changes.
 * Map: dark-brown plate → navy gradient. Red rubric → terracotta. Warm cream
 * → cozy cream. Playfair/Courier → Newsreader/DM Mono. Discount red → gold.
 */

.nst-page.cozy .nst-cap {
	background: linear-gradient(178deg, oklch(0.23 0.035 248) 0%, oklch(0.18 0.035 250) 100%);
	color: var(--cozy-cream);
	border: 1px solid oklch(0.14 0.035 250);
	box-shadow:
		0 1px 0 rgba(255,255,255,0.06) inset,
		0 14px 30px -10px rgba(31, 42, 64, 0.35),
		0 30px 60px -30px rgba(31, 42, 64, 0.5);
	isolation: isolate;
	transition: transform 0.28s cubic-bezier(.2,.7,.3,1.4), box-shadow 0.28s ease;
}

.nst-page.cozy .nst-cap:hover {
	transform: translateY(-5px) rotate(-0.05deg);
}

/* Painted noise overlay. ~0.06 opacity + screen blend = subtle "painted" feel
 * over the navy. inset:0 fills the whole card; overflow:hidden on .nst-cap clips it.
 */
.nst-page.cozy .nst-cap::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.94 0 0 0 0 0.88 0 0 0 .25 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: screen;
	opacity: 0.06;
	pointer-events: none;
	z-index: 0;
}

.nst-page.cozy .nst-cap:has(.nst-cap-toplink:hover) {
	box-shadow:
		0 1px 0 rgba(255,255,255,0.10) inset,
		0 22px 36px -10px rgba(31, 42, 64, 0.4),
		0 40px 70px -30px rgba(31, 42, 64, 0.55);
}

/* Header strip — was red rubric (#a8231a), now terracotta accent. */
.nst-page.cozy .nst-cap-head {
	background: var(--cozy-accent);
	color: var(--cozy-cream);
}

.nst-page.cozy .nst-cap-head::after {
	background: linear-gradient(90deg, transparent, var(--cozy-accent-deep), transparent);
}

.nst-page.cozy .nst-cap-kicker {
	font-family: "DM Mono", "Courier Prime", monospace;
	font-size: 10.5px;
	letter-spacing: 0.12em;
	opacity: 0.9;
}

/* All three title variants (a/b/c by appid % 3) unify under one cozy style.
 * Single specificity bump (.nst-page.cozy beats the variant-only rules).
 */
.nst-page.cozy .nst-cap-title,
.nst-page.cozy .nst-cap--a .nst-cap-title,
.nst-page.cozy .nst-cap--b .nst-cap-title,
.nst-page.cozy .nst-cap--c .nst-cap-title {
	font-family: "Newsreader", serif;
	font-style: italic;
	font-weight: 700;
	font-size: 28px;
	line-height: 1.05;
	letter-spacing: -0.005em;
	color: var(--cozy-cream);
}

.nst-page.cozy .nst-cap-hero {
	filter: saturate(1.05);
	border-bottom-color: rgba(255,255,255,0.12);
}

/* Stats row — transparent so navy gradient shows; hairline white separators. */
.nst-page.cozy .nst-cap-stat {
	background: transparent;
	border-bottom-color: rgba(255,255,255,0.12);
}
.nst-page.cozy .nst-cap-stat > * {
	border-right-color: rgba(255,255,255,0.14);
}

.nst-page.cozy .nst-stat-score {
	font-family: "Newsreader", serif;
	font-style: italic;
	font-weight: 600;
	color: var(--cozy-cream);
}
.nst-page.cozy .nst-stat-score-sub {
	font-family: "DM Mono", monospace;
	letter-spacing: 0.18em;
	color: rgba(245, 239, 227, 0.7);
}
.nst-page.cozy .nst-stat-noreviews {
	font-family: "Newsreader", serif;
	font-style: italic;
	color: rgba(245, 239, 227, 0.75);
}

.nst-page.cozy .nst-stat-mid {
	font-family: "Newsreader", serif;
	font-style: italic;
	color: rgba(245, 239, 227, 0.85);
}

.nst-page.cozy .nst-price-final {
	font-family: "Newsreader", serif;
	font-style: italic;
	font-weight: 700;
	color: var(--cozy-cream);
}
.nst-page.cozy .nst-price-orig {
	font-family: "DM Mono", monospace;
	color: rgba(245, 239, 227, 0.55);
}
.nst-page.cozy .nst-price-disc {
	font-family: "DM Mono", monospace;
	color: var(--cozy-gold);
	font-weight: 400;
}

.nst-page.cozy .nst-cap-video {
	border-bottom-color: rgba(255,255,255,0.12);
}

/* Body copy — Inria Sans stays as a fine cream serif-ish neutral; swap to Newsreader
 * to match the rest of the cozy aesthetic. Headings/blockquotes/lists in body get
 * cozy-accent instead of red rubric.
 */
.nst-page.cozy .nst-cap-body p,
.nst-page.cozy .nst-cap-body div {
	font-family: "Newsreader", serif;
	font-size: 16px;
	line-height: 1.55;
	color: var(--cozy-cream);
}
.nst-page.cozy .nst-cap-body strong,
.nst-page.cozy .nst-cap-body b { color: var(--cozy-cream); }
.nst-page.cozy .nst-cap-body em,
.nst-page.cozy .nst-cap-body i { color: var(--cozy-cream); }

.nst-page.cozy .nst-cap-body a {
	color: var(--cozy-cream);
	text-decoration-color: var(--cozy-accent);
}
.nst-page.cozy .nst-cap-body a:hover { text-decoration-color: var(--cozy-cream); }

.nst-page.cozy .nst-cap-body h1,
.nst-page.cozy .nst-cap-body h2,
.nst-page.cozy .nst-cap-body h3,
.nst-page.cozy .nst-cap-body h4,
.nst-page.cozy .nst-cap-body h5,
.nst-page.cozy .nst-cap-body h6 {
	font-family: "Newsreader", serif;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--cozy-accent);
	border-bottom-color: rgba(255,255,255,0.14);
}

.nst-page.cozy .nst-cap-body blockquote {
	font-family: "Newsreader", serif;
	font-style: italic;
	border-left-color: var(--cozy-accent);
	color: var(--cozy-cream);
}

.nst-page.cozy .nst-cap-body li { color: rgba(245, 239, 227, 0.85); }
.nst-page.cozy .nst-cap-body li::before { color: var(--cozy-accent); }

.nst-page.cozy .nst-cap-body img {
	border-color: rgba(255,255,255,0.14);
	filter: saturate(1.05);
}

/* Drop cap (variant-a body via JS-tagged .nst-drop-cap): swap to gold Berkshire Swash. */
.nst-page.cozy .nst-cap--a .nst-drop-cap::first-letter {
	font-family: "Berkshire Swash", serif;
	color: var(--cozy-gold);
}

/* Footer — handoff doesn't have one, but ours does. Keep it, recolor for cozy. */
.nst-page.cozy .nst-cap-foot {
	border-top-color: rgba(255,255,255,0.14);
	background: linear-gradient(180deg, transparent, rgba(255,255,255,0.03));
}
.nst-page.cozy .nst-foot-meta {
	font-family: "DM Mono", monospace;
	color: rgba(245, 239, 227, 0.6);
}
.nst-page.cozy .nst-foot-meta strong {
	color: var(--cozy-cream);
}
.nst-page.cozy .nst-foot-cta {
	font-family: "Newsreader", serif;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: oklch(0.18 0.035 250);
	background: var(--cozy-cream);
}
.nst-page.cozy .nst-foot-cta:hover {
	background: oklch(0.92 0.02 80);
}