/* Page classement — charte sombre / or */

.classement {
	--cl-bg: #161b22;
	--cl-bg-elevated: #1e2530;
	--cl-border: #3a4556;
	--cl-text: #e8ecf1;
	--cl-muted: #9aa5b5;
	--cl-accent: #d4a84b;
	--cl-primary: #3d7dd6;
	--cl-success: #3d9a6a;
	--cl-hit: rgba(61, 154, 106, 0.18);
	--cl-radius: 10px;
	--cl-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);

	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--cl-text);
	width: 100%;
	max-width: none;
	margin: 0 0 2rem;
	box-sizing: border-box;
}

.classement__header {
	padding: 1.25rem 1.5rem;
	background: linear-gradient(135deg, #1e2836 0%, #151a22 100%);
	border: 1px solid var(--cl-border);
	border-radius: var(--cl-radius) var(--cl-radius) 0 0;
}

.classement__title {
	margin: 0;
	font-size: clamp(1.25rem, 2.2vw, 1.55rem);
	font-weight: 800;
	color: var(--cl-accent);
}

.classement__subtitle {
	margin: 0.45rem 0 0;
	font-size: 0.88rem;
	color: var(--cl-muted);
	line-height: 1.45;
}

.classement__shell {
	background: var(--cl-bg);
	border: 1px solid var(--cl-border);
	border-top: none;
	border-radius: 0 0 var(--cl-radius) var(--cl-radius);
	box-shadow: var(--cl-shadow);
	padding: 1.15rem 1.25rem 1.35rem;
}

.classement__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--cl-border);
}

.classement__tab {
	padding: 0.55rem 0.9rem;
	font-size: 0.78rem;
	font-weight: 700;
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cl-muted);
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	margin-bottom: -1px;
}

.classement__tab:hover {
	color: var(--cl-text);
}

.classement__tab.is-active {
	color: var(--cl-accent);
	border-bottom-color: var(--cl-accent);
}

.classement__panels {
	position: relative;
}

.classement__panel {
	display: none;
}

.classement__panel.is-active {
	display: block;
}

.classement__meta {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	color: var(--cl-muted);
}

.classement__search {
	margin-bottom: 1rem;
}

.classement__search-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: stretch;
}

.classement__input {
	flex: 1;
	min-width: 160px;
	padding: 0.55rem 0.7rem;
	font-size: 0.9rem;
	font-family: inherit;
	color: var(--cl-text);
	background: var(--cl-bg-elevated);
	border: 1px solid var(--cl-border);
	border-radius: 6px;
}

.classement__input:focus {
	outline: none;
	border-color: var(--cl-primary);
}

.classement__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55rem 1rem;
	font-size: 0.78rem;
	font-weight: 700;
	font-family: inherit;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-radius: 6px;
	border: 1px solid transparent;
	cursor: pointer;
}

.classement__btn--primary {
	color: #1a1510;
	background: var(--cl-accent);
	border-color: var(--cl-accent);
}

.classement__btn--ghost {
	color: var(--cl-text);
	background: var(--cl-bg-elevated);
	border-color: var(--cl-border);
}

.classement__btn--ghost:hover {
	border-color: var(--cl-accent);
	color: var(--cl-accent);
}

.classement__alert {
	padding: 0.75rem 0.9rem;
	margin-bottom: 1rem;
	border-radius: 6px;
	font-size: 0.85rem;
}

.classement__alert--warning {
	color: #e8c96a;
	background: rgba(201, 162, 39, 0.12);
	border: 1px solid rgba(201, 162, 39, 0.35);
}

.classement__table-wrap {
	overflow-x: auto;
	margin-bottom: 1rem;
	border: 1px solid var(--cl-border);
	border-radius: 8px;
}

.classement__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.84rem;
}

.classement__table th,
.classement__table td {
	padding: 0.55rem 0.7rem;
	text-align: left;
	border-bottom: 1px solid var(--cl-border);
	vertical-align: middle;
}

.classement__table th {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--cl-muted);
	background: rgba(0, 0, 0, 0.25);
	white-space: nowrap;
}

.classement__table tbody tr:last-child td {
	border-bottom: none;
}

.classement__row:hover {
	background: rgba(255, 255, 255, 0.02);
}

.classement__row--hit {
	background: var(--cl-hit);
}

.classement__row--top1 .classement__table td:first-child strong,
.classement__row--top1 td:first-child strong {
	color: #ffd700;
}

.classement__row--top2 td:first-child strong {
	color: #c0c0c0;
}

.classement__row--top3 td:first-child strong {
	color: #cd7f32;
}

.classement__empire {
	display: block;
	border-radius: 4px;
}

.classement__muted {
	color: var(--cl-muted);
}

.classement__rewards {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	justify-content: center;
}

.classement__reward-tip {
	position: relative;
	display: inline-block;
	cursor: help;
}

.classement__reward-tip img {
	display: block;
	border-radius: 4px;
	transition: transform 0.15s;
}

.classement__reward-tip:hover img {
	transform: scale(1.08);
}

.classement__reward-tip::after {
	content: attr(data-tip);
	position: absolute;
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
	padding: 0.35rem 0.55rem;
	font-size: 0.72rem;
	font-weight: 600;
	white-space: nowrap;
	color: #ffd700;
	background: #1a1a22;
	border: 1px solid rgba(212, 168, 75, 0.45);
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s, visibility 0.2s;
	z-index: 20;
}

.classement__reward-tip:hover::after {
	opacity: 1;
	visibility: visible;
}

.classement__pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
}

.classement__pager-info {
	font-size: 0.8rem;
	color: var(--cl-muted);
}

/* jQuery UI autocomplete */
.ui-autocomplete {
	max-height: 220px;
	overflow-y: auto;
	background: var(--cl-bg-elevated);
	border: 1px solid var(--cl-border);
	border-radius: 6px;
	font-size: 0.85rem;
	z-index: 2000 !important;
}

.ui-menu-item-wrapper {
	padding: 0.4rem 0.65rem;
	color: var(--cl-text);
}

.ui-state-active,
.ui-menu-item-wrapper.ui-state-active {
	background: var(--cl-accent) !important;
	color: #1a1510 !important;
	border: none;
}

@media (max-width: 640px) {
	.classement__search-row {
		flex-direction: column;
	}

	.classement__btn {
		width: 100%;
	}
}