/**
 * Moongate Leaderboard — front-end styles.
 *
 * Designed to sit inside any theme: it uses the theme's own fonts and spacing tokens
 * where sensible, and paints accents with the brand/accent colors the API returns
 * (exposed as --mg-brand / --mg-accent on the wrapper).
 */

.moongate-lb {
	--mg-brand: #3a69af;
	--mg-accent: #be1e2d;
	--mg-columns: 6;
	--mg-radius: 8px;
	--mg-gap: clamp( 0.5rem, 1.2vw, 0.9rem );
	--mg-card-bg: #0b0d12;
	--mg-card-bg-hover: #151925;
	--mg-card-pad: 0px;
	--mg-media-bg: transparent;
	--mg-text: #f5f6fa;
	--mg-muted: #9aa3b2;
	/* Category "bucket" panel — tuned to sit on a black page. */
	--mg-group-bg: #16181f;
	--mg-group-border: rgba( 255, 255, 255, 0.10 );
	--mg-group-radius: 16px;
	--mg-group-pad: clamp( 0.9rem, 2.5vw, 1.5rem );
	width: 100%;
}

.moongate-lb__title {
	text-align: center;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 clamp( 1rem, 3vw, 2rem );
}

/* Each category is a self-contained rounded "bucket" panel. */
.moongate-lb__category {
	background: var( --mg-group-bg );
	border: 1px solid var( --mg-group-border );
	border-radius: var( --mg-group-radius );
	padding: var( --mg-group-pad );
	margin: 0 0 clamp( 1rem, 3vw, 1.75rem );
}

.moongate-lb__category:last-child {
	margin-bottom: 0;
}

/* Title reads as the panel's header, separated from its games by a rule. */
.moongate-lb__category-title {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 0 var( --mg-group-pad );
	padding-bottom: calc( var( --mg-group-pad ) * 0.6 );
	border-bottom: 1px solid var( --mg-group-border );
	font-family: var( --mg-category-font, inherit );
	font-size: clamp( 0.95rem, 1.5vw, 1.35rem );
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --mg-category-color, var( --mg-text ) );
}

/* Accent tab before the title text. */
.moongate-lb__category-title::before {
	content: "";
	flex: 0 0 auto;
	width: 0.3rem;
	height: 1.05em;
	border-radius: 2px;
	background: var( --mg-accent );
}

.moongate-lb__grid {
	display: grid;
	grid-template-columns: repeat( var( --mg-columns ), minmax( 0, 1fr ) );
	gap: var( --mg-gap );
	/* Size each card to its own content so an expanded tile never stretches its neighbours. */
	align-items: start;
}

/* Responsive fallbacks so the fixed desktop column count collapses gracefully. */
@media ( max-width: 1100px ) {
	.moongate-lb__grid { grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); }
}
@media ( max-width: 780px ) {
	.moongate-lb__grid { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
}
@media ( max-width: 520px ) {
	.moongate-lb__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

.moongate-lb__card {
	position: relative;
	border-radius: var( --mg-radius );
	background: var( --mg-card-bg );
	padding: var( --mg-card-pad );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.4 );
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.moongate-lb__card:hover:not( .is-empty ) {
	transform: translateY( -2px );
	box-shadow: 0 0 0 1px var( --mg-brand ), 0 8px 24px rgba( 0, 0, 0, 0.45 );
}

/* Hard reset of the marquee <button> across every state.
   Host themes routinely force padding / border / background / colour onto `button` — that themed
   padding (e.g. 8px 16px) was the "black box" around each marquee, and a themed hover background
   was the "pink". High specificity (.moongate-lb button.moongate-lb__marquee) + !important on the
   layout properties so no host theme can win. */
.moongate-lb button.moongate-lb__marquee,
.moongate-lb button.moongate-lb__marquee:hover,
.moongate-lb button.moongate-lb__marquee:focus,
.moongate-lb button.moongate-lb__marquee:active {
	display: block;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	min-height: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var( --mg-text );
	font: inherit;
	line-height: normal;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.moongate-lb button.moongate-lb__marquee[disabled] {
	cursor: default;
}

.moongate-lb__marquee:focus-visible {
	/* Ring sits OUTSIDE the tile (positive offset), so it never overlays the marquee art
	   — a negative offset painted the accent color on top of light marquees and read as pink. */
	outline: 3px solid var( --mg-brand );
	outline-offset: 2px;
}

.moongate-lb__marquee-media {
	display: block;
	background: var( --mg-media-bg );
	overflow: hidden;
	line-height: 0;
}

.moongate-lb__marquee-media img {
	/* Let each marquee define its own height — the tile hugs the image, so there is never a
	   letterbox "black box" around it, whatever the source dimensions are. */
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.35s ease;
}

.moongate-lb__card:hover:not( .is-empty ) .moongate-lb__marquee-media img {
	transform: scale( 1.04 );
}

.moongate-lb__marquee-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --mg-text );
}

/* Top score strip under the marquee. */
.moongate-lb__topline {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.5rem;
	font-size: 0.78rem;
	border-top: 2px solid var( --mg-brand );
}

.moongate-lb__crown {
	color: var( --mg-accent );
	font-size: 0.95em;
	line-height: 1;
}

.moongate-lb__top-name {
	font-weight: 700;
	color: var( --mg-text );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.moongate-lb__top-score {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: var( --mg-brand );
}

.moongate-lb__chevron {
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	margin-left: 0.35rem;
	border-right: 2px solid var( --mg-muted );
	border-bottom: 2px solid var( --mg-muted );
	transform: rotate( 45deg );
	transition: transform 0.25s ease;
}

.moongate-lb__marquee[aria-expanded="true"] .moongate-lb__chevron {
	transform: rotate( -135deg );
}

/* Expanding panel with the full board. Height is animated in JS via max-height. */
.moongate-lb__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.32s ease;
	background: var( --mg-card-bg-hover );
}

.moongate-lb__panel[hidden] {
	display: block; /* keep it in flow so we can animate; visibility handled by max-height */
}

@media ( prefers-reduced-motion: reduce ) {
	.moongate-lb__panel { transition: none; }
	.moongate-lb__card,
	.moongate-lb__marquee-media img { transition: none; }
}

.moongate-lb__scores {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0.75rem 0.75rem;
	counter-reset: none;
}

.moongate-lb__score {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.3rem 0;
	font-size: 0.88rem;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.06 );
}

.moongate-lb__score:last-child {
	border-bottom: 0;
}

.moongate-lb__rank {
	flex: 0 0 1.5rem;
	text-align: right;
	font-weight: 700;
	color: var( --mg-accent );
	font-variant-numeric: tabular-nums;
}

.moongate-lb__name {
	color: var( --mg-text );
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.moongate-lb__value {
	margin-left: auto;
	color: var( --mg-muted );
	font-variant-numeric: tabular-nums;
}

/* Editor/visitor states. */
.moongate-lb--error,
.moongate-lb--empty,
.moongate-lb__empty {
	padding: 1rem;
	text-align: center;
	color: var( --mg-muted );
}

.moongate-lb--error {
	border: 1px dashed var( --mg-accent );
	border-radius: var( --mg-radius );
}

/* Editor-only diagnostic line under the friendly unavailable message. */
.moongate-lb__diag {
	margin: 0.5rem 0 0;
	font-size: 0.78rem;
	opacity: 0.7;
}

/* Degraded-state footer: shown when the API is unreachable and we're serving a cached copy. */
.moongate-lb__status {
	margin: clamp( 1rem, 3vw, 1.75rem ) 0 0;
	padding-top: 0.85rem;
	border-top: 1px solid var( --mg-group-border );
	text-align: center;
	font-size: 0.8rem;
	letter-spacing: 0.02em;
	color: var( --mg-muted );
}