/* TVG Auswertung – Balkendiagramm (Siegerehrung) + Steuerung.
   Farben erben von der Seite; neutrale Grautöne sind halbtransparent,
   damit alles auf hellem UND dunklem Theme lesbar bleibt. */
.tvg-chart {
	color: inherit;
	--tvg-accent: #d9480f;
	--tvg-track: rgba(127,127,127,.16);
	--tvg-line: rgba(127,127,127,.28);
}

.tvg-chart__loading, .tvg-chart__error { padding: 24px; text-align: center; opacity: .6; }

/* Balken */
.tvg-chart__bars {
	display: flex; align-items: flex-end; justify-content: center;
	gap: 2%; height: 60vh; min-height: 320px; padding: 12px 0 4px;
}
.tvg-chart__col {
	flex: 1 1 0; min-width: 0; max-width: 140px;
	display: flex; flex-direction: column; align-items: center; height: 100%;
}
.tvg-chart__value {
	color: inherit;
	font-weight: 800; font-size: clamp(16px, 2.4vw, 30px); line-height: 1.1;
	margin-bottom: 6px; font-variant-numeric: tabular-nums;
}
.tvg-chart__track {
	position: relative; width: 100%; flex: 1 1 auto;
	background: var(--tvg-track); border-radius: 10px 10px 0 0; display: flex; align-items: flex-end;
	overflow: hidden;
}
.tvg-chart__fill {
	width: 100%; border-radius: 10px 10px 0 0;
	transition: height .6s cubic-bezier(.22,1,.36,1);
	box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
}
.tvg-chart__name {
	margin-top: 10px; text-align: center; font-size: clamp(13px, 1.4vw, 18px);
	min-height: 1.6em; font-weight: 600; word-break: break-word; color: inherit;
}
.tvg-chart__rank { font-size: 1.15em; }
.tvg-chart__hidden { opacity: .45; letter-spacing: 2px; font-weight: 700; }

/* Sanftes Einblenden, wenn ein Name aufgedeckt wird */
.tvg-chart__col.is-revealed .tvg-chart__name { animation: tvgReveal .5s ease both; }
@keyframes tvgReveal {
	from { opacity: 0; transform: translateY(8px) scale(.96); }
	to   { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
	.tvg-chart__bars { height: 52vh; gap: 6px; }
}

/* --------------------------------------------------------- Steuerung */
.tvg-ctrl {
	color: inherit;
	--c-accent: #d9480f;
	--c-line: rgba(127,127,127,.28);
	--c-soft: rgba(127,127,127,.16);
	max-width: 560px; font-size: 16px;
}
.tvg-ctrl--locked { padding: 18px; border: 1px dashed var(--c-line); border-radius: 12px; opacity: .75; }
.tvg-ctrl__status { font-size: 15px; opacity: .7; margin-bottom: 4px; }
.tvg-ctrl__next { font-size: 18px; margin-bottom: 14px; min-height: 1.4em; color: inherit; }
.tvg-ctrl__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tvg-ctrl__btn {
	appearance: none; border: 1px solid var(--c-line); background: transparent; color: inherit;
	padding: 12px 16px; border-radius: 10px; font: inherit; cursor: pointer; flex: 1 1 auto; min-width: 120px;
}
.tvg-ctrl__btn:disabled { opacity: .4; cursor: not-allowed; }
.tvg-ctrl__btn--primary { background: var(--c-accent); border-color: var(--c-accent); color: #fff; font-weight: 700; }
.tvg-ctrl__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-line); }
.tvg-ctrl__list li { padding: 10px 4px; border-bottom: 1px solid var(--c-line); display: flex; align-items: center; gap: 8px; color: inherit; }
.tvg-ctrl__list li.is-done { opacity: .5; }
.tvg-ctrl__place { font-size: 12px; background: var(--c-soft); border-radius: 6px; padding: 2px 8px; }
.tvg-ctrl__pts { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }