/* ==========================================================================
   Statistiche personaggi (pub/statistiche_personaggi.html)
   Caricato da _proto.html solo con statistiche=True; la carta (riquadro,
   tabelle, legenda) viene da forum.css, qui c'e' solo quello che e' suo.

   LE BARRE NON SI TOCCANO: mt2-gauge e' la barra del gioco (stesse immagini
   di static/mema/assets/gauges/) e i giocatori la riconoscono. Il CSS qui sotto
   e' quello che fino al 25/9/2026 stava in un <style> dentro la pagina, con
   due sole differenze: i percorsi relativi al posto del tag static e la
   larghezza, che ora la da' la cella della tabella invece di "100% - 80px".
   ========================================================================== */

/* ---- la carta ---- */
.st-inner .fr-riquadro { margin-bottom: 12px; }
.st-tab col.c-lato { width: 92px; }
.st-tab col.c-classe { width: 78px; }
.st-tab td.lato {
	color: #533a00;
	font-weight: bold;
	white-space: nowrap;
}
.st-tab td.lato.sx { text-align: right; }
.st-tab td.lato.dx { text-align: left; }
.st-tab td.lato .pct { color: #7b1300; }
.st-tab td.classe {
	color: #160400;
	font-size: 12px;
	font-weight: bold;
	padding-left: 9px;
}
.st-tab td.n {
	color: #533a00;
	font-weight: bold;
}
.st-tab td.barra { padding: 8px 4px; }
.st-inner .ranking-nav { margin: 4px 0 6px 0; }

/* ---- le barre del gioco ---- */
.mt2-gauge {
	position: relative;
	width: 100%;
	margin: 0 auto;
	height: 16px;
	--slot-left-w: 32px;
	--slot-right-w: 32px;
	--overlap: 5px;
}
.mt2-gauge__slot-left,
.mt2-gauge__slot-right,
.mt2-gauge__slot-center {
	position: absolute;
	top: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 1;
}
.mt2-gauge__slot-left {
	left: 0;
	width: var(--slot-left-w);
	background: no-repeat left center;
	background-image: url("../mema/assets/gauges/gauge_slot_left.png");
	background-size: contain;
}
.mt2-gauge__slot-right {
	right: 0;
	width: var(--slot-right-w);
	background: no-repeat right center;
	background-image: url("../mema/assets/gauges/gauge_slot_right.png");
	background-size: contain;
}
.mt2-gauge__slot-center {
	left: var(--slot-left-w);
	right: var(--slot-right-w);
	background: repeat-x center;
	background-image: url("../mema/assets/gauges/gauge_slot_center.png");
	background-size: auto 100%;
}
.mt2-gauge__inner {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--slot-left-w) - var(--overlap));
	right: calc(var(--slot-right-w) - var(--overlap));
	overflow: hidden;
	z-index: 2;
}
.mt2-gauge__fill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: var(--fill-pct, 0%);
	background: repeat-x left center;
	background-size: auto 100%;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}
.mt2-gauge__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.7);
	pointer-events: none;
}
.mt2-gauge--red .mt2-gauge__fill { background-image: url("../mema/assets/gauges/gauge_red.png"); }
.mt2-gauge--blue .mt2-gauge__fill { background-image: url("../mema/assets/gauges/gauge_blue.png"); }
.mt2-gauge--pink .mt2-gauge__fill { background-image: url("../mema/assets/gauges/gauge_pink.png"); }
.mt2-gauge--purple .mt2-gauge__fill { background-image: url("../mema/assets/gauges/gauge_purple.png"); }
/* barra divisa maschi/femmine */
.mt2-gauge__fill--right { left: auto; right: 0; }
.mt2-gauge__fill--blue { background-image: url("../mema/assets/gauges/gauge_blue.png"); }
.mt2-gauge__fill--pink { background-image: url("../mema/assets/gauges/gauge_pink.png"); }
.mt2-gauge__half-label {
	position: absolute;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--half-w, 0%);
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.7);
	pointer-events: none;
	z-index: 3;
}
.mt2-gauge__half-label--left { left: 0; }
.mt2-gauge__half-label--right { right: 0; }