/* ===== Baustein D · Chart-Vollansicht (§15b) + Multikill-Karte (§15c) ===== */
/* =====================================================================
   BAUSTEIN D — Chart-Vollansicht (§15b) + Multikill-Karte (§15c)
   ---------------------------------------------------------------------
   Nur neue Styles. Alles läuft über die vorhandenen CSS-Variablen
   (--canvas, --ink/--ink2/--ink3, --lo/--hi, --cyan, --violet, --grid,
   --axis, --r/--rw, --gap/--pad/--padx) — deshalb trägt der Baustein in
   BEIDEN Skins automatisch die richtige Optik. Für „bento" gibt es nur
   dort Nachzieher, wo der Skin generell von Doppelschatten auf 1px-Kanten
   umstellt (--lo/--hi sind dann transparent).

   Wiederverwendet werden die bestehenden Klassen .card, .well, .swell,
   .chead, .seg, .selwrap/select, .btn, .empty, .frow/.ftrack/.fbar,
   .chart/.grid-l/.axis-l/.tick/.dlabel/.reflabel und das globale #tip.
   ===================================================================== */

/* ---------- Auslöser: Diagramm anklickbar + Vergrößern-Symbol ---------- */
/* .cmz kommt per JS an die Karte (bzw. die Kachel) — nur dort wird
   position:relative gesetzt, damit nichts Bestehendes verrutscht. */
.cmz{position:relative}
.cmzoom{
  position:absolute;top:10px;right:11px;z-index:3;
  width:24px;height:24px;padding:0;border:0;cursor:zoom-in;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;background:var(--canvas);color:var(--ink3);
  box-shadow:3px 3px 7px var(--lo),-2px -2px 6px var(--hi);
  opacity:0;transform:scale(.9);
  transition:opacity .14s ease,transform .14s ease,color .14s ease;
}
.cmz:hover>.cmzoom,.cmz:focus-within>.cmzoom{opacity:1;transform:scale(1)}
.cmzoom:hover{color:var(--cyan)}
.cmzoom:focus-visible{opacity:1;transform:scale(1);outline:2px solid var(--cyan);outline-offset:2px}
/* Touch/Stift: kein Hover → dauerhaft dezent sichtbar. */
@media (hover:none){.cmz>.cmzoom{opacity:.55;transform:scale(1)}}

/* Das Diagramm selbst ist der eigentliche Klickbereich. */
.cmtrig{cursor:zoom-in}
.cmtrig:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:var(--rw)}

/* ---------- Overlay ---------- */
.cmback{
  position:fixed;inset:0;z-index:90;display:none;
  align-items:flex-start;justify-content:center;padding:34px 22px;overflow:auto;
  background:rgba(0,0,0,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.cmback.show{display:flex}
/* .cmwin trägt zusätzlich .card → Fläche, Radius und Schatten kommen aus
   dem Skin, hier steht nur die Geometrie des Dialogs. */
.cmwin{
  width:min(1180px,96vw);height:max-content;
  animation:cmIn .16s ease-out;
}
@keyframes cmIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .cmwin{animation:none}
  .cmzoom{transition:none}
  /* Der Ladekreis der Build-Reihenfolge hört auf zu drehen — die Meldung
     und die mitlaufende Sekundenzahl daneben bleiben. */
  .bospin{animation:none}
}

.cmhead{display:flex;align-items:flex-start;gap:16px}
.cmhead .chead{flex:1;min-width:0}
.cmclose{
  flex:0 0 auto;width:32px;height:32px;padding:0;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font:inherit;font-size:15px;font-weight:700;line-height:1;
  border-radius:11px;background:var(--canvas);color:var(--ink3);
  box-shadow:4px 4px 9px var(--lo),-3px -3px 8px var(--hi);
}
.cmclose:hover{color:var(--loss)}
.cmclose:active{box-shadow:inset 3px 3px 7px var(--lo),inset -3px -3px 7px var(--hi)}
.cmclose:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------- Werkzeugleiste (Metrik-Auswahl, Fenster, Legende) ---------- */
.cmbar{display:flex;align-items:center;gap:0 14px;flex-wrap:wrap;margin-bottom:12px}
.cmbar .fgroup{display:flex;align-items:center;gap:7px;padding:3px 0}
.cmbar .fgroup+.fgroup{border-left:1px solid rgba(0,0,0,.34);padding-left:14px;box-shadow:-1px 0 0 var(--hi)}
.cmbar select{max-width:min(300px,52vw)}
.cmlegend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-left:auto;font-size:11px;color:var(--ink3)}
.cmlegend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cmlg{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.cmlg.line{width:16px;height:0;border-radius:0;border-top:2px solid currentColor}
.cmlg.dash{width:16px;height:0;border-radius:0;border-top:1.5px dashed currentColor}

/* ---------- Kopfzahlen (n, Zeitraum, Ø, Median, Best, Schlechtest) ---------- */
/* .swell ist bereits in beiden Skins definiert — hier nur das Raster. */
.cmstats{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:var(--gap)}
.cmstats .swell{padding:10px 12px}
.cmstats .swell .val{font-size:18px}
.cmstats .swell .val.sm{font-size:14px;font-weight:650}
/* background:transparent gehoert zum Button-Reset dazu: ohne die Zeile malt
   der Browser seine eigene helle Knopffläche (ButtonFace) unter „Bestes“ und
   „Schlechtestes“ — heller Grund unter hellem Text, also unlesbar. Fiel bei
   den Telefonbildern auf, galt aber genauso am Rechner (28.07.2026). */
.cmstats .swell.link{cursor:pointer;border:0;background:transparent;font:inherit;
  text-align:left;color:inherit;width:100%}
.cmstats .swell.link:hover .val{color:var(--cyan)}
.cmstats .swell.link:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

/* ---------- Plotfläche ---------- */
.cmplot{padding:10px 12px 8px}
.cmplot .chart{width:100%;height:auto;display:block}
.cmplot .chart:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:8px}
.cmhit{cursor:pointer}
.cmcross{stroke:var(--axis);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.cmmean{stroke-dasharray:6 5;stroke-width:1.4;fill:none;pointer-events:none}
.cmma{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.cmpt{pointer-events:none}
.cmmark{pointer-events:none}
.cmxlbl{font-size:9.5px;fill:var(--ink3)}

/* Bildunterschrift: zeigt den Punkt unter dem Cursor bzw. der Tastatur-
   Auswahl — dadurch ist die Vollansicht auch ohne Maus bedienbar. */
.cmcap{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:10px;min-height:20px;font-size:11.5px;color:var(--ink2)}
.cmcap b{color:var(--ink)}
.cmcap .w{color:var(--win);font-weight:700}
.cmcap .l{color:var(--loss);font-weight:700}
.cmcap .hint{margin-left:auto;color:var(--ink3);font-size:10.5px}
.cmcap .dot{color:var(--ink3)}

/* Match-Vorschau im Overlay (falls das Match nicht in der History steht) */
.cmmatch:empty{display:none}
.cmmatch{margin-top:var(--gap)}

/* ---------- Multikill-Karte (§15c) ---------- */
.mkgrid{display:grid;grid-template-columns:minmax(120px,.85fr) 1.15fr;gap:12px;align-items:stretch}
.swell.mkhero{display:flex;flex-direction:column;justify-content:center}
.swell.mkhero .val{font-size:34px;line-height:1.05;color:var(--violet)}
.swell.mkhero .val.zero{color:var(--ink3)}
.swell.mkhero .note{margin-top:4px}
.mkbars{padding:8px 10px}
.mktot{display:flex;align-items:baseline;gap:8px;margin-top:10px;font-size:11.5px;color:var(--ink3)}
.mktot b{color:var(--ink);font-size:13px;font-weight:650}
@media (max-width:900px){.mkgrid{grid-template-columns:1fr}}

/* ---------- Reaktion auf schmale Fenster ---------- */
@media (max-width:1000px){
  .cmstats{grid-template-columns:repeat(3,1fr)}
  .cmlegend{margin-left:0;width:100%}
}
@media (max-width:620px){
  .cmback{padding:14px 10px}
  .cmstats{grid-template-columns:repeat(2,1fr)}
}

/* =====================================================================
   SKIN „bento" — flach, 1px-Kanten statt Doppelschatten.
   (--lo/--hi sind dort transparent, deshalb brauchen nur die Elemente
   mit eigenem Schatten einen Nachzieher.)
   ===================================================================== */
.skin-bento .cmback{background:rgba(0,0,0,.72)}
.skin-bento .cmzoom,.skin-bento .cmclose{
  background:var(--inset);border:1px solid var(--line);border-radius:6px;box-shadow:none}
.skin-bento .cmzoom:hover,.skin-bento .cmclose:hover{border-color:var(--cyan)}
.skin-bento .cmwin{box-shadow:0 18px 44px rgba(0,0,0,.68)}
.skin-bento .cmbar .fgroup+.fgroup{border-left:1px solid var(--line);box-shadow:none}
/* .cmstats .swell.link setzt border:0 (Button-Reset) — im Bento-Skin lebt
   die Form aber genau von dieser 1px-Kante, deshalb hier zurückgeholt. */
.skin-bento .cmstats .swell.link{border:1px solid var(--line);background:var(--inset)}
.skin-bento .cmstats .swell.link:hover{border-color:var(--cyan)}
.skin-bento .cmstats .swell{padding:8px 10px}
.skin-bento .cmstats .swell .val{font-size:16px}
.skin-bento .swell.mkhero .val{font-size:30px}
.skin-bento .cmtrig:focus-visible,.skin-bento .cmplot .chart:focus-visible{border-radius:6px}

/* Der Stats-Tab ist im Bento-Skin ein 12-Spalten-Raster; die letzte Reihe
   („Muster & Verhalten") war 4+5+3. Mit der Multikill-Karte sind es vier
   Karten — deshalb hier auf 3+3+3+3 gebracht. Diese Regeln müssen NACH dem
   Stylesheet von index.html stehen (gleiche Spezifität, spätere Regel
   gewinnt) — siehe Einbau-Anleitung. */
.skin-bento [data-b="obj"]{grid-column:span 3}
.skin-bento [data-b="streaks"]{grid-column:span 3}
.skin-bento [data-b="ff"]{grid-column:span 3}
.skin-bento [data-b="mk"]{grid-column:span 3}
/* Schmale Karte → Hero und Balken untereinander. */
.skin-bento .mkgrid{grid-template-columns:1fr}
@media(max-width:1180px){
  .skin-bento [data-b="obj"]{grid-column:span 12}
  .skin-bento [data-b="streaks"],.skin-bento [data-b="ff"],
  .skin-bento [data-b="mk"]{grid-column:span 6}
}
@media(max-width:820px){
  .skin-bento [data-b="mk"]{grid-column:span 12!important}
}