/*
 * BRO RUN — Kurschart oben rechts.
 *
 * Optik nach dem Vorbild der Dashboard-Box: dunkle Karte mit weichem Rand,
 * Coin-Kopf mit Auswahlpfeil, Zeitrahmen-Marke, Kerzen mit Volumen darunter,
 * Preisfahne rechts an der gestrichelten Linie.
 *
 * ⛔ KEIN `backdrop-filter`. Das HUD des Spiels hat seine eigenen Filter aus
 * genau diesem Grund abgeschaltet (`#broGame .bro-pill { backdrop-filter: none
 * !important }`): eine Weichzeichnung ueber einer Leinwand, die 60-mal je
 * Sekunde neu gezeichnet wird, kostet in jedem Bild erneut. Hier wird deshalb
 * mit einer deckenden Flaeche gearbeitet.
 */

#broGame .bro-chart {
	position: absolute;
	top: 96px;
	right: 14px;
	z-index: 19;

	width: 360px;
	padding: 12px 12px 9px;

	border: 1px solid rgba(0, 255, 220, .18);
	border-radius: 14px;
	background: #0b1622;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .38);

	/* Das HUD liegt auf `pointer-events:none`, damit man durch die Anzeigen
	   hindurch spielt. Die Coin-Auswahl braucht Klicks — also hier zurueck. */
	pointer-events: auto;
	user-select: none;
}

/* Auf schmalen Geraeten wuerde die Box die halbe Spielflaeche verdecken. */
@media (max-width: 900px), (max-height: 560px) {
	#broGame .bro-chart { display: none; }
}

/* ---------------------------------------------------------------- Kopf -- */

#broGame .bro-chart__kopf {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 0 0 8px;
	border: 0;
	background: none;
	color: #eafcff;
	font: inherit;
	cursor: pointer;
}

#broGame .bro-chart__logo {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--bro-orange, #f7931a);
	color: #2b1600;
	font-size: 13px;
	font-weight: 700;
}

#broGame .bro-chart__name {
	flex: 1;
	text-align: left;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
}

#broGame .bro-chart__pfeil {
	color: #73929b;
	font-size: 10px;
	transition: transform .16s ease;
}

#broGame .bro-chart.is-offen .bro-chart__pfeil { transform: rotate(180deg); }

/* -------------------------------------------------------------- Auswahl -- */

#broGame .bro-chart__liste {
	display: none;
	grid-template-columns: repeat(2, 1fr);
	gap: 5px;
	margin: 0 0 8px;
}

#broGame .bro-chart.is-offen .bro-chart__liste { display: grid; }

#broGame .bro-chart__coin {
	padding: 6px 8px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 8px;
	background: #111f2e;
	color: #b9cddb;
	font: inherit;
	font-size: 12px;
	cursor: pointer;
}

#broGame .bro-chart__coin:hover { border-color: rgba(0, 255, 220, .4); color: #eafcff; }

#broGame .bro-chart__coin.is-aktiv {
	border-color: rgba(0, 255, 220, .55);
	background: rgba(0, 255, 220, .1);
	color: #00ffdc;
}

/* ---------------------------------------------------------------- Chart -- */

#broGame .bro-chart__flaeche {
	position: relative;
	height: 176px;
}

#broGame .bro-chart__flaeche canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* Zeitrahmen-Marke, wie im Dashboard oben links in der Chartflaeche. */
#broGame .bro-chart__tf {
	position: absolute;
	top: 2px;
	left: 2px;
	padding: 2px 7px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 6px;
	background: rgba(6, 14, 22, .8);
	color: #8fa6b4;
	font-size: 10px;
	letter-spacing: .06em;
}

/* Preisfahne rechts — sitzt auf der Höhe des letzten Kurses. */
#broGame .bro-chart__preis {
	position: absolute;
	right: 0;
	transform: translateY(-50%);
	padding: 3px 7px;
	border-radius: 4px;
	background: #26c281;
	color: #04120a;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	pointer-events: none;
}

#broGame .bro-chart__preis.is-rot { background: #e8506b; color: #2a0710; }

/* Herkunft der Kurse — gehoert sichtbar dazu, nicht ins Kleingedruckte. */
#broGame .bro-chart__quelle {
	margin: 6px 0 0;
	color: #5d7482;
	font-size: 9px;
	letter-spacing: .04em;
	text-align: right;
}