/* =====================================================================
   LP (Konzept §3) — Spalte in der Match-History, LP in den Session-Kopf-
   zeilen und die LP-Karte im Stats-Tab.
   Ausschliesslich CSS-Variablen: --win / --loss / --ink* / --cyan liefern
   in BEIDEN Skins die passenden Werte, deshalb steht hier keine einzige
   feste Farbe. Der Bento-Skin flacht Wells und Kanten global ab
   (.skin-bento .well/.swell/.callout weiter oben) — hier bleibt nur das
   Rasterband uebrig, das der Bento-Grid fuer jede Karte braucht.
   ===================================================================== */
.lpv{font-variant-numeric:tabular-nums;font-weight:700}
.lpv.up{color:var(--win)} .lpv.down{color:var(--loss)} .lpv.flat{color:var(--ink2)}
/* Kein Wert = Strich, niemals 0. Der Strich ist bewusst gedaempft, damit er
   sich von einer gemessenen Null unterscheidet. */
.lpna{color:var(--ink3);font-weight:600;cursor:help}
.sess .slp{font-weight:700}
.sess .slp.up{color:var(--win)} .sess .slp.down{color:var(--loss)} .sess .slp.flat{color:var(--ink2)}
.sess .slp small{font-weight:600;color:var(--ink3);margin-left:4px}
.sess .smate{color:var(--ink3)}

/* ---- Karte „LP" ---- */
.lphead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.lphead .lptitle{min-width:0}
.lpqseg{flex:0 0 auto}
.lpgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.lpgrid .swell{display:flex;flex-direction:column;justify-content:flex-start;min-width:0}
.lpgrid .swell .val{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lpgrid .swell .val.rank{font-size:15px;font-weight:650;line-height:1.3;margin-top:4px}
.lpgrid .swell .val.up{color:var(--win)} .lpgrid .swell .val.down{color:var(--loss)}
.lpgrid .swell .val.flat,.lpgrid .swell .val.na{color:var(--ink3)}
/* „Ehrlicher Satz statt Zahl": belegt zwei Rasterplaetze und traegt Fliesstext
   statt einer Kennzahl — dadurch ist auf einen Blick sichtbar, dass hier
   NICHT gerundet, sondern geschwiegen wird. */
.lpgrid .swell.lpsay{grid-column:span 2}
.lpsay .say{font-size:11.5px;line-height:1.45;color:var(--ink2);margin-top:5px;white-space:normal}
.lpgap{margin-top:12px}
.lpgap .big{font-variant-numeric:tabular-nums}
.lpgap.off{color:var(--ink3)}
.lpwell{margin-top:12px}
.lpchart{width:100%;height:auto;display:block;overflow:visible}
.lpchart .lpdot{fill:var(--ink3)}
.lpfoot{margin-top:9px;font-size:10.5px;line-height:1.4;color:var(--ink3)}
@media(max-width:1080px){.lpgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){
  .lpgrid{grid-template-columns:1fr}
  .lpgrid .swell.lpsay{grid-column:span 1}
}
/* Bento: #view-stats ist ein 12-Spalten-Raster, in dem JEDE Karte ihre Breite
   selbst angeben muss — ohne diese Regel waere die LP-Karte eine Spalte breit. */
.skin-bento [data-b="lp"]{grid-column:span 12}
.skin-bento .lpgrid{grid-template-columns:repeat(4,1fr);gap:10px}
.skin-bento .lpgrid .swell .val{font-size:18px}
@media(max-width:1180px){.skin-bento .lpgrid{grid-template-columns:repeat(2,1fr)}}