/**
 * Game Progress Tracker — base styles.
 *
 * Everything is driven by CSS variables so each game can re-skin the tracker
 * via its own "Custom CSS" field. Defaults below are a clean neon-dark theme.
 */

.cs-tracker,
.cs-archive {
	/* Inherit the global site theme by default; a per-game override (accent
	   colors / Custom CSS) replaces only these on that game's page. The
	   fallbacks mirror css/site-theme.css :root so the tracker still renders
	   on-brand if the site theme stylesheet ever fails to load. */
	--cs-accent: var(--site-accent, #8b5cf6);
	--cs-accent-2: var(--site-accent-2, #c084fc);
	--cs-bg: transparent;
	--cs-surface: var(--site-surface, rgba(255, 255, 255, 0.04));
	--cs-surface-2: var(--site-surface-2, rgba(139, 92, 246, 0.10));
	--cs-border: var(--site-border, rgba(139, 92, 246, 0.20));
	--cs-text: var(--site-text, #ece9f5);
	--cs-text-dim: var(--site-text-dim, #b3a8d4);
	--cs-on-accent: var(--site-on-accent, #fff);
	--cs-ok: var(--site-ok, #86efac);
	--cs-err: var(--site-err, #fca5a5);
	--cs-warn-rgb: var(--site-warn-rgb, 246, 196, 83);
	--cs-radius: var(--site-radius, 14px);

	max-width: 1100px;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
	color: var(--cs-text);
	background: var(--cs-bg);
	border-radius: var(--cs-radius);
}

.cs-tracker *,
.cs-archive * {
	box-sizing: border-box;
}

/* --- Hero ---------------------------------------------------------------- */
.cs-hero {
	display: grid;
	grid-template-columns: minmax(0, 280px) 1fr;
	gap: 1.75rem;
	align-items: start;
	margin-bottom: 2.5rem;
}

.cs-hero__cover img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cs-radius);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.cs-hero__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1.1;
	background: linear-gradient(90deg, var(--cs-accent), var(--cs-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.cs-hero__desc {
	color: var(--cs-text-dim);
	margin-bottom: 1.25rem;
	line-height: 1.6;
}

/* --- Progress bars ------------------------------------------------------- */
.cs-progress {
	margin: 1rem 0;
}

.cs-progress__bar {
	height: 14px;
	border-radius: 999px;
	background: var(--cs-surface-2);
	overflow: hidden;
	border: 1px solid var(--cs-border);
}

.cs-progress__fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--cs-accent), var(--cs-accent-2));
	transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
	min-width: 0;
}

.cs-progress__label {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0.5rem 0 0;
	font-size: 0.95rem;
	color: var(--cs-text-dim);
}

.cs-progress__percent {
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--cs-accent);
}

/* --- Login CTA ----------------------------------------------------------- */
.cs-login-cta {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	background: var(--cs-surface);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
}

.cs-login-cta p {
	margin: 0 0 0.5rem;
}

/* .cs-btn, .cs-btn--ghost and .cs-btn--sm are defined once, globally, in
   css/site-theme.css so a tracker button and any other site button are
   identical. Don't redefine them here. */

/* --- Sections + items ---------------------------------------------------- */
.cs-section {
	margin-bottom: 1.75rem;
	background: var(--cs-surface);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	overflow: hidden;
}

.cs-section__head {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.cs-section__toggle {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0.9rem 1.25rem;
	background: var(--cs-surface-2);
	border: 0;
	border-bottom: 1px solid var(--cs-border);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.cs-section__toggle:hover {
	background: color-mix(in srgb, var(--cs-surface-2) 80%, var(--cs-accent) 20%);
}

.cs-section__toggle:focus-visible {
	outline: 2px solid var(--cs-accent);
	outline-offset: -2px;
}

.cs-section__chevron {
	flex: none;
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid var(--cs-text-dim);
	border-bottom: 2px solid var(--cs-text-dim);
	transform: rotate(45deg); /* expanded: pointing down */
	transition: transform 0.2s ease;
}

.cs-section.is-collapsed .cs-section__chevron {
	transform: rotate(-45deg); /* collapsed: pointing right */
}

.cs-section__title {
	flex: 1 1 auto;
	margin: 0;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.cs-section__count {
	flex: none;
	font-variant-numeric: tabular-nums;
	color: var(--cs-text-dim);
	font-weight: 600;
}

/* Green "section complete" check — only shown when every item is done. */
.cs-section__check {
	display: none;
	flex: none;
	position: relative;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background: #34d399;
}

.cs-section.is-complete .cs-section__check {
	display: inline-block;
}

.cs-section__check::after {
	content: "";
	position: absolute;
	top: 45%;
	left: 50%;
	width: 0.3em;
	height: 0.55em;
	border: solid #06120d;
	border-width: 0 2px 2px 0;
	transform: translate(-50%, -50%) rotate(45deg);
}

.cs-section.is-complete .cs-section__count {
	color: #34d399;
}

.cs-section.is-collapsed .cs-list {
	display: none;
}

.cs-list {
	list-style: none;
	margin: 0;
	padding: 0.4rem;
}

.cs-item {
	border-radius: 10px;
	transition: background 0.15s ease;
}

.cs-item:hover {
	background: var(--cs-surface-2);
}

.cs-item__label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.7rem 0.85rem;
	cursor: pointer;
}

/* .cs-item__check inherits the global custom checkbox from css/site-theme.css
   (input[type="checkbox"]) — same box, accent fill and checkmark as every
   other checkbox on the site. No tracker-specific overrides needed. */

.cs-item__text {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.6rem;
}

.cs-item__name {
	font-weight: 600;
}

.cs-item.is-done .cs-item__name {
	color: var(--cs-text-dim);
	text-decoration: line-through;
	text-decoration-color: var(--cs-accent);
}

.cs-item__desc {
	flex-basis: 100%;
	color: var(--cs-text-dim);
	font-size: 0.9rem;
	line-height: 1.5;
}

.cs-item__callouts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0.1rem 0.85rem 0.7rem;
}

.cs-badge {
	--cs-callout-rgb: 139, 92, 246; /* fallback: --site-accent */
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.12rem 0.5rem;
	border-radius: 999px;
	background: rgba(var(--cs-callout-rgb), 0.15);
	color: rgb(var(--cs-callout-rgb));
	border: 1px solid rgba(var(--cs-callout-rgb), 0.4);
}

.cs-item.is-saving {
	opacity: 0.6;
}

.cs-item.is-error .cs-item__name {
	color: var(--cs-err);
}

.cs-empty {
	padding: 2rem;
	text-align: center;
	color: var(--cs-text-dim);
}

/* --- Archive grid -------------------------------------------------------- */
.cs-archive__head {
	text-align: center;
	margin-bottom: 2rem;
}

.cs-archive__title {
	margin: 0 0 0.4rem;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	background: linear-gradient(90deg, var(--cs-accent), var(--cs-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.cs-archive__sub {
	color: var(--cs-text-dim);
	margin: 0;
}

.cs-grid {
	display: grid;
	/* Fixed-width, centered cards so the same game renders at a consistent
	   size in every context (full-width "Most tracked" vs. the narrower
	   "Newest games" column vs. the archive). auto-fit collapses empty
	   tracks so a lone card centers instead of clinging to one track; the
	   min() keeps cards from overflowing very narrow viewports. */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 240px));
	justify-content: start;
	gap: 1.5rem;
}

.cs-card {
	display: flex;
	flex-direction: column;
	background: var(--cs-surface);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.cs-card:hover {
	transform: translateY(-4px);
	border-color: var(--cs-accent);
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}

.cs-card__cover {
	aspect-ratio: 4 / 5;
	background: var(--cs-surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.cs-card__cover img {
	width: 100%;
	height: 100%;
	/* Show the whole cover art instead of cropping it to fill. */
	object-fit: contain;
}

.cs-card__placeholder {
	font-size: 3rem;
	opacity: 0.5;
}

.cs-card__body {
	padding: 1rem;
}

.cs-card__title {
	margin: 0 0 0.6rem;
	font-size: 1.1rem;
}

/* Non-game search results: span the full grid width and read as a normal
   content card rather than a fixed-aspect cover tile. */
.cs-card--post {
	grid-column: 1 / -1;
	display: block;
	cursor: default;
}

.cs-card--post:hover {
	transform: none;
	border-color: var(--cs-border);
	box-shadow: none;
}

.cs-card--post .entry-summary {
	color: var(--cs-text-dim);
	margin-top: 0.4rem;
}

.cs-progress--mini .cs-progress__bar {
	height: 8px;
}

.cs-progress--mini .cs-progress__percent {
	font-size: 0.95rem;
}

/* --- Hero meta ----------------------------------------------------------- */
.cs-hero__meta {
	color: var(--cs-text-dim);
	font-size: 0.9rem;
	margin: -0.4rem 0 0.9rem;
	letter-spacing: 0.02em;
}

/* --- Run bar (profiles + modes) ------------------------------------------ */
.cs-runbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.6rem;
	margin-top: 1.25rem;
	padding: 0.85rem 1rem;
	background: var(--cs-surface);
	border: 1px solid var(--cs-border);
	border-radius: var(--cs-radius);
}

.cs-runbar__group {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.cs-runbar__lbl {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cs-text-dim);
}

/* .cs-runbar select inherits the global <select> styling from
   css/site-theme.css — same surface, border and radius as every other field. */

/* .cs-btn--sm lives once in css/site-theme.css (global) — don't redefine it
   here or the two declarations race on load order. */

/* --- Toolbar: search, filters, spoiler ----------------------------------- */
.cs-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	align-items: center;
	margin: 0 0 1.25rem;
}

/* `.cs-tracker` prefix raises specificity above the _s base rule
   `input[type="search"]{color:#666}`, which would otherwise win. */
.cs-tracker .cs-search {
	flex: 1 1 220px;
	min-width: 160px;
	background: var(--cs-surface);
	color: var(--cs-text);
	caret-color: var(--cs-accent);
	border: 1px solid var(--cs-border);
	border-radius: 999px;
	padding: 0.55rem 1rem;
	font-size: 0.95rem;
}

/* _s also sets `input[type="search"]:focus{color:#111}` — keep theme text on focus. */
.cs-tracker .cs-search:focus {
	color: var(--cs-text);
}

.cs-tracker .cs-search::placeholder {
	color: var(--cs-text-dim);
}

.cs-filters {
	display: inline-flex;
	gap: 0.25rem;
	background: var(--cs-surface);
	border: 1px solid var(--cs-border);
	border-radius: 999px;
	padding: 0.2rem;
}

.cs-filter {
	border: 0;
	background: transparent;
	color: var(--cs-text-dim);
	padding: 0.35rem 0.8rem;
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
}

.cs-filter.is-active {
	background: var(--cs-accent);
	color: var(--cs-on-accent);
}

.cs-spoiler-toggle {
	border: 1px solid var(--cs-border);
	background: var(--cs-surface);
	color: var(--cs-text);
	border-radius: 999px;
	padding: 0.45rem 0.9rem;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
}

/* --- Item layout (override base for the richer row) ---------------------- */
.cs-item__main {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0.85rem;
}

.cs-item__label {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.6rem;
	padding: 0;
	cursor: pointer;
}

.cs-item__actions {
	display: flex;
	gap: 0.2rem;
	flex: 0 0 auto;
}

.cs-icon-btn {
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 0.3rem;
	border-radius: 6px;
	opacity: 0.6;
	position: relative;
}

.cs-icon-btn:hover {
	opacity: 1;
	background: var(--cs-surface-2);
}

.cs-note-btn.has-note {
	opacity: 1;
}

/* Edit-item link is an <a> but should match the icon buttons. */
.cs-edit-btn {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.cs-tips-count {
	font-size: 0.65rem;
	font-weight: 700;
	background: var(--cs-accent-2);
	color: #04121a; /* fixed near-black for contrast on the light accent-2 pill */
	border-radius: 999px;
	padding: 0 0.3rem;
	margin-left: 0.1rem;
	vertical-align: super;
}

/* --- Spoilers ------------------------------------------------------------ */
.cs-item__desc {
	margin: 0 0.85rem 0.6rem 3.45rem;
}

.cs-spoiler__text {
	color: var(--cs-text-dim);
	font-size: 0.9rem;
	line-height: 1.5;
	display: none;
}

.cs-spoiler__veil {
	display: inline-block;
	font-size: 0.85rem;
	font-style: italic;
	color: var(--cs-text-dim);
	background: var(--cs-surface-2);
	border: 1px dashed var(--cs-border);
	border-radius: 8px;
	padding: 0.2rem 0.6rem;
	cursor: pointer;
}

.cs-tracker.cs-spoilers-on .cs-spoiler__veil,
.cs-spoiler.is-revealed .cs-spoiler__veil {
	display: none;
}

.cs-tracker.cs-spoilers-on .cs-spoiler__text,
.cs-spoiler.is-revealed .cs-spoiler__text {
	display: block;
}

/* Location breakdown lists inside item descriptions */
.cs-spoiler__text p {
	margin: 0.45rem 0 0.15rem;
	color: var(--cs-text);
}

.cs-spoiler__text p:first-child {
	margin-top: 0;
}

.cs-spoiler__text ul {
	margin: 0 0 0.25rem;
	padding-left: 1.25rem;
	list-style: disc;
}

.cs-spoiler__text li {
	margin: 0.1rem 0;
}

/* --- Notes --------------------------------------------------------------- */
.cs-note,
.cs-tips {
	margin: 0 0.85rem 0.7rem 3.45rem;
}

/* Bg / border / radius / padding come from the global <textarea> rule in
   css/site-theme.css; only the full width + vertical resize are local. */
.cs-note__input,
.cs-tips__input {
	width: 100%;
	resize: vertical;
}

.cs-note__row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.4rem;
}

.cs-note__status {
	color: var(--cs-accent);
	font-size: 0.85rem;
}

/* --- Tips ---------------------------------------------------------------- */
.cs-tip {
	background: var(--cs-surface);
	border: 1px solid var(--cs-border);
	border-radius: 8px;
	padding: 0.5rem 0.7rem;
	margin-bottom: 0.4rem;
}

.cs-tip__meta {
	font-size: 0.78rem;
	color: var(--cs-text-dim);
	margin-bottom: 0.2rem;
}

.cs-tip__body p {
	margin: 0;
	font-size: 0.9rem;
}

.cs-tips__empty {
	color: var(--cs-text-dim);
	font-size: 0.9rem;
	font-style: italic;
}

.cs-tips__form {
	margin-top: 0.4rem;
}

.cs-tips__form .cs-btn {
	margin-top: 0.4rem;
}

.cs-noresults {
	text-align: center;
	color: var(--cs-text-dim);
	padding: 1.5rem;
}

/* --- Community: feed + leaderboard (shortcodes, profile, landing) -------- */
.cs-feed,
.cs-leaderboard {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cs-feed__item {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--cs-border);
	color: var(--cs-text-dim);
}

.cs-feed__item strong { color: var(--cs-text); }
.cs-feed__user { color: var(--cs-accent); font-weight: 700; text-decoration: none; }
.cs-feed__time { font-size: 0.8rem; opacity: 0.7; }

.cs-leaderboard__row {
	display: flex;
	justify-content: space-between;
	padding: 0.55rem 0.75rem;
	border-radius: 8px;
	counter-increment: cs-rank;
}

.cs-leaderboard__row:nth-child(odd) { background: var(--cs-surface); }
.cs-leaderboard__row::before { content: counter(cs-rank) ". "; color: var(--cs-text-dim); margin-right: 0.4rem; }
.cs-leaderboard { counter-reset: cs-rank; }
.cs-leaderboard__row a { color: var(--cs-text); text-decoration: none; font-weight: 600; }
.cs-leaderboard__score { color: var(--cs-accent); font-weight: 700; }

/* --- Public profile page ------------------------------------------------- */
.cs-profile-page { max-width: 1000px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.cs-profile-head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.cs-profile-head img { border-radius: 50%; }
.cs-profile-name { margin: 0; font-size: 2rem; }
.cs-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 2rem; }
.cs-badge-card {
	display: flex; align-items: center; gap: 0.5rem;
	background: var(--cs-surface); border: 1px solid var(--cs-border);
	border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.9rem;
}
.cs-badge-card__icon { font-size: 1.3rem; }

/* --- Landing sections ---------------------------------------------------- */
.cs-landing { max-width: 1100px; margin: 0 auto; padding: 1rem 1.25rem 4rem; }
.cs-landing__hero { text-align: center; padding: 2.5rem 1rem; }
.cs-landing__hero h1 {
	font-size: clamp(2rem, 5vw, 3.2rem);
	margin: 0 0 0.5rem;
	background: linear-gradient(90deg, var(--cs-accent), var(--cs-accent-2));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.cs-landing__cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
.cs-landing__panel { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: 14px; padding: 1.25rem; }
.cs-landing h2 { margin-top: 0; }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 760px) {
	.cs-landing__cols { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.cs-hero { grid-template-columns: 1fr; }
	.cs-hero__cover { max-width: 220px; }
	.cs-item__desc,
	.cs-note,
	.cs-tips { margin-left: 0.85rem; }
}