/**
 * idf-deadline - Frontend-Styles (Bestenliste).
 *
 * HINWEIS: Farbwelt, Schrift und Drama-Grad sind als Tokens (:root) gehalten und
 * werden an die finale Stil-Referenz des Spiels angepasst. Struktur (BEM) ist stabil.
 */

.idf-deadline__lb {
	/* Design-Tokens - hier zentral an die Referenz anpassen */
	--dl-black: #1a1a1a;
	--dl-panel: #15181a;
	--dl-panel2: #1f2329;
	--dl-red: #d6204a;
	--dl-blue: #2a6f8a;
	--dl-green: #2da399;
	--dl-yellow: #f2b40a;
	--dl-beige: #e6dbc9;
	--dl-lightblue: #cce0ea;
	--dl-copper: #b8957b;
	--dl-muted: #7d8896;
	--dl-pixel: 'Pixelify Sans', monospace;
	--dl-brand: 'Figtree', system-ui, sans-serif;
	--dl-radius: 10px;

	position: relative;
	max-width: 420px;
	margin: 0 auto;
	color: var(--dl-beige);
	font-family: var(--dl-brand);
	background: linear-gradient(180deg, var(--dl-panel2) 0%, var(--dl-panel) 100%);
	border: 2px solid var(--dl-blue);
	border-radius: var(--dl-radius);
	box-shadow:
		inset 0 0 0 1px rgba(204, 224, 234, 0.08),
		inset 0 2px 0 rgba(255, 255, 255, 0.05),
		0 18px 40px -18px rgba(0, 0, 0, 0.8);
	overflow: hidden;
}

/* Dezente Scanlines binden die Liste an den Spiel-Look */
.idf-deadline__lb::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 2;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px);
	mix-blend-mode: multiply;
}

.idf-deadline__lb-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 18px 12px;
	border-bottom: 2px solid rgba(42, 111, 138, 0.5);
}

.idf-deadline__lb-coin {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	background: var(--dl-yellow);
	border-radius: 50%;
	box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.25);
	animation: idf-deadline-coin 2.4s linear infinite;
}

@keyframes idf-deadline-coin {
	50% { transform: scaleX(0.2); }
}

.idf-deadline__lb-title {
	margin: 0;
	font-family: var(--dl-pixel);
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 1px;
	color: var(--dl-red);
	text-shadow: 2px 2px 0 #6e1126;
}

.idf-deadline__lb-list {
	list-style: none;
	margin: 0;
	padding: 8px 10px 6px;
}

.idf-deadline__lb-row {
	display: grid;
	grid-template-columns: 30px 1fr auto;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 6px;
	font-family: var(--dl-pixel);
	animation: idf-deadline-rowin 0.4s both;
	animation-delay: calc(var(--row-i, 0) * 55ms);
}

.idf-deadline__lb-row + .idf-deadline__lb-row {
	margin-top: 2px;
}

@keyframes idf-deadline-rowin {
	from { opacity: 0; transform: translateX(8px); }
	to { opacity: 1; transform: none; }
}

/* Nach dem ersten Laden bei Auto-Refresh nicht erneut einblenden. */
.idf-deadline__lb[data-loaded] .idf-deadline__lb-row {
	animation: none;
}

.idf-deadline__lb-rank {
	font-size: 16px;
	font-weight: 600;
	text-align: right;
	color: var(--dl-muted);
}

.idf-deadline__lb-who {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.idf-deadline__lb-ini {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--dl-beige);
}

.idf-deadline__lb-lvl {
	font-family: var(--dl-brand);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: var(--dl-lightblue);
	background: rgba(42, 111, 138, 0.25);
	padding: 2px 6px;
	border-radius: 4px;
}

.idf-deadline__lb-score {
	font-size: 18px;
	font-weight: 600;
	color: var(--dl-green);
	font-variant-numeric: tabular-nums;
}

/* Top 3 */
.idf-deadline__lb-row--gold {
	background: linear-gradient(90deg, rgba(242, 180, 10, 0.18), transparent);
	box-shadow: inset 0 0 0 1px rgba(242, 180, 10, 0.35);
}
.idf-deadline__lb-row--gold .idf-deadline__lb-rank,
.idf-deadline__lb-row--gold .idf-deadline__lb-ini,
.idf-deadline__lb-row--gold .idf-deadline__lb-score {
	color: var(--dl-yellow);
}
.idf-deadline__lb-row--silver {
	background: linear-gradient(90deg, rgba(204, 224, 234, 0.12), transparent);
}
.idf-deadline__lb-row--silver .idf-deadline__lb-ini {
	color: var(--dl-lightblue);
}
.idf-deadline__lb-row--bronze {
	background: linear-gradient(90deg, rgba(184, 149, 123, 0.14), transparent);
}
.idf-deadline__lb-row--bronze .idf-deadline__lb-ini {
	color: var(--dl-copper);
}

/* Zustände (Laden / leer / Fehler) */
.idf-deadline__lb-state {
	list-style: none;
	padding: 18px 10px;
	text-align: center;
	font-family: var(--dl-pixel);
	font-size: 14px;
	color: var(--dl-muted);
}
.idf-deadline__lb-state--error {
	color: var(--dl-red);
}

.idf-deadline__lb-foot {
	display: flex;
	justify-content: space-between;
	padding: 10px 18px 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	font-family: var(--dl-brand);
	font-size: 11px;
	letter-spacing: 0.5px;
	color: var(--dl-muted);
}

@media (prefers-reduced-motion: reduce) {
	.idf-deadline__lb-coin,
	.idf-deadline__lb-row {
		animation: none;
	}
}

/* ===== Externe Touch-Steuerung ([deadline-controls]) ===== */
.idf-deadline-controls {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px;
	max-width: 520px;
	margin: 14px auto;
	padding: 0 8px;
	font-family: 'Figtree', system-ui, sans-serif;
	-webkit-user-select: none;
	user-select: none;
}
.idf-deadline-controls__group {
	display: flex;
	gap: 10px;
	align-items: flex-end;
}
.idf-deadline-controls__group--right {
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.idf-deadline-controls__btn {
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	font-size: 22px;
	font-weight: 600;
	color: #2a6f8a;
	background: rgba(26, 26, 26, 0.05);
	border: 2px solid #2a6f8a;
	border-radius: 8px;
	cursor: pointer;
}
.idf-deadline-controls__btn--jump {
	width: 96px;
	height: 64px;
	font-size: 15px;
	letter-spacing: 1px;
}
.idf-deadline-controls__btn--up {
	width: 64px;
	height: 46px;
	font-size: 13px;
}
.idf-deadline-controls__btn.is-pressed,
.idf-deadline-controls__btn:active {
	background: rgba(214, 32, 74, 0.22);
	border-color: #d6204a;
	color: #d6204a;
}