/* Ranking de Equipes — estilos públicos (front-end) */

.re-ranking-wrap {
	--re-radius: 10px;
	--re-border-w: 0px;
	--re-border-color: #000;
	--re-bg: transparent;
	--re-row-bg: #3a3d4d;
	--re-header-start: #e05a8a;
	--re-header-end: #f2905a;
	--re-header-text: #fff;
	--re-position-bg: #4a4d5e;
	--re-position-text: #fff;
	--re-name-color: #fff;
	--re-points-bg: #4a4d5e;
	--re-points-text: #fff;
	--re-toggle-color: #fff;
	--re-activity-title: #c9cbe0;
	--re-panel-bg: #2f3240;
	--re-row-gap: 10px;
	--re-pad-y: 14px;
	--re-pad-x: 18px;
	--re-fs-position: 14px;
	--re-fs-name: 15px;
	--re-fs-points: 16px;
	--re-fs-activity: 13px;
	--re-slot-w: 36px;
	--re-activity-count: 7;

	box-sizing: border-box;
	max-width: 720px;
	width: 100%;
	margin: 0 auto;
	background: var( --re-bg );
	font-family: inherit;
}

.re-ranking-wrap *,
.re-ranking-wrap *::before,
.re-ranking-wrap *::after {
	box-sizing: border-box;
}

/* Cabeçalho */
.re-ranking-header {
	display: grid;
	grid-template-columns: 1fr minmax( 90px, 120px );
	gap: var( --re-row-gap );
	margin-bottom: var( --re-row-gap );
}

.re-col-header {
	background: linear-gradient( 90deg, var( --re-header-start ), var( --re-header-end ) );
	color: var( --re-header-text );
	border-radius: var( --re-radius );
	padding: var( --re-pad-y ) var( --re-pad-x );
	font-weight: 700;
	font-size: var( --re-fs-name );
	letter-spacing: .03em;
	text-align: left;
}

.re-col-pontos {
	text-align: center;
}

/* Lista */
.re-ranking-list {
	display: flex;
	flex-direction: column;
	gap: var( --re-row-gap );
}

.re-item {
	transition: transform .4s ease;
}

/* Linha completa (nome + total) = botão do acordeão */
.re-row {
	display: grid;
	grid-template-columns: 1fr minmax( 90px, 120px );
	gap: var( --re-row-gap );
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.re-row:focus {
	outline: none;
}

.re-row:focus-visible {
	outline: 2px solid var( --re-header-start );
	outline-offset: 2px;
	border-radius: var( --re-radius );
}

.re-row:hover .re-row-left,
.re-row:hover .re-row-right {
	filter: brightness( 1.08 );
}

.re-row-left,
.re-row-right {
	background: var( --re-row-bg );
	border-radius: var( --re-radius );
	border: var( --re-border-w ) solid var( --re-border-color );
	padding: var( --re-pad-y ) var( --re-pad-x );
	display: flex;
	align-items: center;
	transition: filter .2s ease;
}

.re-row-left {
	gap: 10px;
	min-width: 0;
}

/* Espaço único de posição: mostra o número (2º, 3º...), a coroa (1º lugar) ou,
   temporariamente, a seta de subida/descida. A largura é a mesma em todas as
   linhas, então os nomes ficam sempre alinhados. */
.re-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var( --re-slot-w );
	width: var( --re-slot-w );
}

.re-status .re-icon {
	animation: re-fade-in .3s ease;
}

.re-position {
	display: block;
	width: 100%;
	color: var( --re-position-text );
	background: var( --re-position-bg );
	font-size: var( --re-fs-position );
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	padding: 4px 0;
	border-radius: calc( var( --re-radius ) * 0.6 );
	font-variant-numeric: tabular-nums;
}

.re-dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	flex-shrink: 0;
}

.re-name {
	color: var( --re-name-color );
	font-size: var( --re-fs-name );
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 auto;
	min-width: 0;
}

/* Indicador do acordeão (texto + ícone) */
.re-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	margin-left: auto;
	color: var( --re-toggle-color );
	font-size: calc( var( --re-fs-name ) - 2px );
	font-weight: 500;
	opacity: .9;
}

.re-toggle-label {
	white-space: nowrap;
}

.re-toggle-icon {
	display: inline-flex;
	line-height: 0;
	transition: transform .25s ease;
}

.re-item.is-open .re-toggle-chevron .re-toggle-icon {
	transform: rotate( 180deg );
}

.re-item.is-open .re-toggle-plus .re-toggle-icon {
	transform: rotate( 45deg );
}

/* Pontuação total */
.re-row-right {
	justify-content: center;
}

.re-points {
	color: var( --re-points-text );
	background: var( --re-points-bg );
	font-size: var( --re-fs-points );
	font-weight: 700;
	border-radius: calc( var( --re-radius ) * 0.6 );
	padding: 4px 14px;
	min-width: 2.5em;
	text-align: center;
}

/* Painel com as atividades (abre com animação de altura) */
.re-panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s ease;
}

.re-item.is-open .re-panel {
	grid-template-rows: 1fr;
}

.re-panel-inner {
	overflow: hidden;
	min-height: 0;
}

.re-activities {
	display: grid;
	grid-template-columns: repeat( var( --re-activity-count ), minmax( 0, 1fr ) );
	gap: 6px;
	margin-top: var( --re-row-gap );
	padding: 12px;
	background: var( --re-panel-bg );
	border-radius: var( --re-radius );
	border: var( --re-border-w ) solid var( --re-border-color );
}

.re-activity {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 0;
	padding: 8px 2px;
	background: var( --re-points-bg );
	border-radius: calc( var( --re-radius ) * 0.6 );
}

.re-activity-title {
	color: var( --re-activity-title );
	font-size: calc( var( --re-fs-activity ) - 2px );
	font-weight: 600;
	line-height: 1;
}

.re-activity-value {
	color: var( --re-points-text );
	font-size: var( --re-fs-activity );
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	max-width: 100%;
	overflow: hidden;
	text-overflow: clip;
}

.re-icon {
	display: inline-flex;
	line-height: 0;
}

.re-icon-rotate {
	transform: rotate( 180deg );
}

.re-empty {
	color: #999;
	text-align: center;
	padding: 20px;
}

@keyframes re-fade-in {
	from {
		opacity: 0;
		transform: translateY( -3px );
	}
	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* Mobile: o texto do botão some (fica só o ícone), visível apenas para leitores de tela */
@media ( max-width: 600px ) {
	.re-toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
		border: 0;
	}
}

@media ( max-width: 480px ) {
	.re-ranking-header,
	.re-row {
		grid-template-columns: 1fr 80px;
		gap: 8px;
	}

	.re-row-left,
	.re-row-right {
		padding: 10px 12px;
	}

	.re-row-left {
		gap: 8px;
	}

	/* Cabeçalho acompanha o padding reduzido das linhas e não estoura a coluna de pontos */
	.re-col-header {
		padding: 10px 12px;
		font-size: calc( var( --re-fs-name ) - 2px );
		letter-spacing: .02em;
	}

	.re-col-pontos {
		padding-left: 4px;
		padding-right: 4px;
	}

	.re-row-right {
		padding-left: 6px;
		padding-right: 6px;
	}

	.re-points {
		padding: 4px 6px;
		min-width: 0;
		max-width: 100%;
		font-size: calc( var( --re-fs-points ) - 1px );
	}

	.re-name {
		font-size: calc( var( --re-fs-name ) - 1px );
	}

	.re-dot {
		width: 11px;
		height: 11px;
	}

	.re-position {
		padding: 3px 0;
	}

	.re-activities {
		gap: 4px;
		padding: 8px;
		margin-top: 8px;
	}

	.re-activity {
		padding: 6px 0;
		gap: 3px;
	}

	.re-activity-title {
		font-size: calc( var( --re-fs-activity ) - 3px );
	}

	.re-activity-value {
		font-size: calc( var( --re-fs-activity ) - 1px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.re-item,
	.re-panel,
	.re-toggle-icon,
	.re-row-left,
	.re-row-right {
		transition: none;
	}

	.re-status .re-icon {
		animation: none;
	}
}