/* =========================================================
   FCK-Freunde Idarwald – Saison-Spielplan (c) by Tobias Lüdorf
   Block-Version: 1.2
   Die Logos sind Eigentum der jeweiligen Vereine
   ========================================================= */

/* ---------------------------------------------------------
   1) Globale Einstellungen / Grafik-URLs
   --------------------------------------------------------- */
:root{
  --fck-goal-icon-url: url("https://fck-freunde-idarwald.de/webp/fussball.webp");
  --fck-yellowcard-icon-url: url("https://fck-freunde-idarwald.de/webp/gelbekarte.webp");
  --fck-redcard-icon-url: url("https://fck-freunde-idarwald.de/webp/rotekarte.webp");
  --fck-team-redcard-left-url: url("https://fck-freunde-idarwald.de/webp/l-rotekarte.webp");
  --fck-team-redcard-right-url: url("https://fck-freunde-idarwald.de/webp/r-rotekarte.webp");

  --team-redcard-gap-left: 4px;
  --team-redcard-gap-right: 4px;
  --team-redcard-y-left: -8px;
  --team-redcard-y-right: -8px;
  --team-redcard-size-left: 10px;
  --team-redcard-size-right: 10px;

  --fck-league-logo-url: url("https://fck-freunde-idarwald.de/webp/2bundesliga.webp");

  --pill-h: 26px;
  --pill-fs: 13px;
  --pill-pad-y: 2px;
  --pill-pad-x: 10px;

  --pill-result-h: 24px;
  --pill-result-fs: 16px;
  --pill-result-pad-y: 0px;
  --pill-result-pad-x: 7.5px;

  --league-logo-h: 46px;
  --league-logo-w: 46px;
  --league-nudge-x: 0px;

  /* Letzte 5 Spiele */
  --fck-recent-gap: 3px;            /* Abstand zwischen Icons */
  --fck-recent-icon-size: 14px;     /* Icon-Größe */
  --fck-mini-gap-top: 8px;          /* Abstand nach Tabelle -> Letzte5 */
  --fck-mini-gap-bottom: 19px;      /* Abstand Letzte5 -> Dropdown */

  /* Dropdown-Aussehen */
  --fck-select-radius: 10px;        /* Abrundung */
  --fck-select-bg: #fff;            /* Hintergrund */
  --fck-select-border: #eee;        /* Randfarbe */

  /* Sicherheits-Innenabstand */
  --header-safe-pad: max(0px, calc((var(--league-logo-h) - var(--pill-h)) / 4));
}

/* ---------------------------------------------------------
   2) Kartenverpackung
   --------------------------------------------------------- */
.fck-cards{
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  font-family: "Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------
   3) Übersicht (Oben)
   --------------------------------------------------------- */
.fck-overview{
  margin-bottom: 18px;
  border: 1px solid #e3e3e3;
  border-radius: var(--fck-select-radius) !important;
  padding: 12px;
  box-shadow: 2px 2px 4px rgba(0,0,0,.06);
  background:linear-gradient(180deg, #eee, #fff);
  font-family: Arial, sans-serif;
}

.fck-overview-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
  gap:8px;
}

.fck-overview-title h2{
  margin:0;
  font-size:18px;
  font-weight:500 !important;
  color:#e30511;
  font-family:"Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fck-overview-badge{
  padding:2px 10px;
  border-radius:999px;
  background:#fff;
  border:1.5px solid #e30511;
  color:#e30511;
  font-size:var(--pill-fs);
  font-weight:600;
  font-family:"Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fck-overview-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  align-items:stretch;
}

.fck-mini-table,
.fck-extra-stats-box,
.fck-jump-box{
  background:#fff;
  border-radius:10px;
  padding:10px 12px;
  border:1px solid #eee;
  height:100%;
  display:flex;
  flex-direction:column;
}

.fck-mini-table h3,
.fck-extra-stats-box h3,
.fck-jump-box h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:500;
  color:#e30511;
  font-family:"Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fck-mini-table dl,
.fck-extra-stats-box dl{
  display:grid;
  grid-template-columns:auto auto;
  column-gap:12px;
  row-gap:6px;
  margin:0;
  font-size:13px;
  font-family:"Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.fck-mini-table dt,
.fck-extra-stats-box dt{
  margin:0;
  color:#777;
  font-weight:400;
}

.fck-mini-table dd,
.fck-extra-stats-box dd{
  margin:0;
  text-align:right;
  font-weight:600;
  color:#777;
}

.fck-mini-table .fck-points{
  font-weight:600;
  color:#e30511;
}

/* ---------------------------------------------------------
   3.1) Letzte 5 Spiele: Text links, Icons rechts (NICHT strecken)
   --------------------------------------------------------- */
.fck-recent-wrap{
  margin-top: var(--fck-mini-gap-top);
  margin-bottom: var(--fck-mini-gap-bottom);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.fck-recent-label{
  margin:0;
  font-size:13px;
  font-weight:500;
  color:#e30511;
  font-family:"Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space:nowrap;
}

.fck-recent-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: var(--fck-recent-gap);
  flex:0 0 auto;
  width:auto;
}

.fck-recent-row .fck-recent-icon{
  width: var(--fck-recent-icon-size);
  height: var(--fck-recent-icon-size);
  flex: 0 0 auto;
  display:block;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  margin:0;
  padding:0;
}

/* ---------------------------------------------------------
   3.2) Dropdown
   --------------------------------------------------------- */
.fck-jump-select-wrapper{
  position:relative;
  margin-top:auto;
}

.fck-jump-select-wrapper select{
  width:100%;
  padding:10px 36px 10px 12px;
  border-radius: var(--fck-select-radius) !important;
  border:1px solid var(--fck-select-border);
  font-size:13px;
  font-weight:400 !important;
  color:#777;
  background: var(--fck-select-bg);
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  font-family:"Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 2px 2px 4px rgba(0,0,0,.06);
}

.fck-jump-select-wrapper::after{
  content:"▾";
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:13px;
  color:#777;
  pointer-events:none;
}

.fck-jump-select-wrapper select:focus{
  outline:none;
  border-color:#e30511;
  background:#fff;
}

/* ---------------------------------------------------------
   4) Spielkarte + Kopfbereich
   --------------------------------------------------------- */
.fck-card{
  border:1px solid #e3e3e3;
  border-radius: var(--fck-select-radius) !important;
  padding:12px;
  box-shadow:2px 2px 4px rgba(0,0,0,.06);
  background:linear-gradient(180deg, #eee, #fff);
  transition:transform .2s ease, box-shadow .2s ease;
  cursor:pointer;
}

.fck-card header{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding-top:var(--header-safe-pad);
  padding-bottom:8px;
  margin-top:-2px;
  margin-bottom:8px;
}

.fck-league-badge{
  position:absolute;
  left:50%;
  top:var(--header-safe-pad);
  transform:translateX(calc(-50% + var(--league-nudge-x)));
  height:var(--league-logo-h);
  width:var(--league-logo-w);
  background-image:var(--fck-league-logo-url);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  pointer-events:none;
  z-index:1;
}

.fck-card header .tag,
.fck-card header .meta{
  position:relative;
  z-index:2;
  height:var(--pill-h);
}

.tag, .meta{
  display:inline-flex;
  align-items:center;
  height:var(--pill-h);
  padding:var(--pill-pad-y) var(--pill-pad-x);
  border-radius:999px;
  background:#fff;
  border:1.5px solid #e30511;
  color:#e30511;
  font-size:var(--pill-fs);
  font-weight:600;
}

/* ---------------------------------------------------------
   4.1) Teams / Ergebnis
   --------------------------------------------------------- */
.teams{
  font-weight:500 !important;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  margin:10px 0;
  font-family:"Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:#2d2d2d !important;
  font-size:18px;
}

.club{
  display:flex;
  align-items:center;
  gap:10px;
}

.club.left{ justify-self:start; }

.club.right{
  justify-self:end;
  flex-direction:row-reverse;
  text-align:right;
}
.club.right strong{ text-align:right; }

.club-logo{ width:46px; height:46px; object-fit:contain; }
.vs{ display:none; }

.result-center{
  text-align:center;
  height:var(--pill-result-h);
  padding:var(--pill-result-pad-y) var(--pill-result-pad-x);
  border-radius:8px;
  background:#fff;
  border:1.5px solid #777;
  font-weight:600 !important;
  font-size:var(--pill-result-fs);
  color:#777 !important;
  font-family:"Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------------------------------------------------------
   4.2) Datum / Zeit / Stadion / Spielart
   --------------------------------------------------------- */
.row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  font-family:"Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight:500;
  color:#777;
  font-size:13px;
  margin-bottom:6px;
}

.row div{
  border:1px solid #eee;
  padding:6px 8px;
  border-radius: var(--fck-select-radius) !important;
  text-align:center;
  background:#fff!important;
}

.result{
  font-family:"Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight:500 !important;
  color:#777;
  font-size:13px;
  border:1px solid #eee;
  padding:6px 8px;
  border-radius: var(--fck-select-radius) !important;
  background:#fff!important;
}

/* ---------------------------------------------------------
   5) Klappfunktion / Extra-Bereich
   --------------------------------------------------------- */
.fck-card-extra{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease, padding-top .25s ease;
}

.fck-card.is-open .fck-card-extra{
  max-height:2000px;
  padding-top:8px;
}

.fck-card-extra-inner{
  padding:6px 8px 10px;
  font-family:"Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:13px;
}

/* ---------------------------------------------------------
   5.1) Extra-Stats in der aufgeklappten Karte
   --------------------------------------------------------- */
.fck-card-stats-box{ width: 100%; }

.fck-extra-row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin: 2px 0;
}

.fck-extra-cell{
  font-weight: 600;
  color: #777;
  font-size: 13px!important;
}

.fck-extra-label{
  font-weight: 400;
  color: #777;
  font-size: 13px!important;
  text-align: center;
}

.fck-extra-row span:nth-child(1){ text-align: left; }
.fck-extra-row span:nth-child(3){ text-align: right; }

/* ---------------------------------------------------------
   5.2) Boxen (Tore / Gelbe Karte / Rote Karte / Extra-Stats)
   --------------------------------------------------------- */
.fck-goals-pill{
  width:100%;
  border:1px solid #eee;
  background:#fff!important;
  border-radius: var(--fck-select-radius) !important;
  padding:10px 12px;
  margin:10px 0 12px;
}

.fck-goals-row{
  margin:0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:10px;
  font-family:"Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:13px!important;
  color:#777;
  font-weight:500 !important;
}

.fck-goals-left, .fck-goals-right{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.fck-goals-left{ text-align:left; }
.fck-goals-right{ text-align:right; }

.fck-goals-center{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  margin-top:2px;
}

.fck-goals-icon{
  width:14px;
  height:14px;
  background-image:var(--fck-goal-icon-url);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:.9;
}

.fck-yellowcard-icon{
  width:14px;
  height:14px;
  background-image:var(--fck-yellowcard-icon-url);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:.95;
}

.fck-redcard-icon{
  width:14px;
  height:14px;
  background-image:var(--fck-redcard-icon-url);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:.95;
}

.fck-card:not(.is-open) .fck-goals-row{ display:none; }

/* ---------------------------------------------------------
   6) Rote Karte neben Teamnamen
   --------------------------------------------------------- */
.fck-team-redcard{
  display:inline-block;
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:.95;
  line-height:1;
  vertical-align:middle;
}

.club.left .fck-team-redcard.is-left{
  background-image:var(--fck-team-redcard-left-url);
  width:var(--team-redcard-size-left);
  height:var(--team-redcard-size-left);
  margin-left:var(--team-redcard-gap-left);
  transform:translateY(var(--team-redcard-y-left));
}

.club.right .fck-team-redcard.is-right{
  background-image:var(--fck-team-redcard-right-url);
  width:var(--team-redcard-size-right);
  height:var(--team-redcard-size-right);
  margin-right:var(--team-redcard-gap-right);
  transform:translateY(var(--team-redcard-y-right));
}

/* ---------------------------------------------------------
   7) Hervorhebung
   --------------------------------------------------------- */
.fck-card-highlight{
  box-shadow:2px 2px 4px rgba(0,0,0,.06), 0 0 0 2px #e30511 inset;
}

/* ---------------------------------------------------------
   8) Pagination
   --------------------------------------------------------- */
.fck-pagination{
  margin-top:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-family:"Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:14px;
}

.fck-page-btn, .fck-page-number{
  min-width:30px;
  height:30px;
  padding:0 5px;
  border-radius:999px;
  border:1px solid #eee;
  background:#fff;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}

.fck-page-number.is-active{
  border-color:#e30511;
  color:#e30511;
  font-weight:700;
  background:#fff;
}

.fck-page-btn[disabled]{ opacity:.4; cursor:default; }
.fck-page-numbers{ display:flex; gap:10px; }

/* ---------------------------------------------------------
   4.3) Spieler-Statistik (Aussehen wie bei Gesamt-Statistik)
   --------------------------------------------------------- */
#fck-player-box{
  font-size: 13px;
  font-family: "Roboto Slab", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

#fck-player-box > div{
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 12px;
  align-items: center;
  line-height: 1.45;
  margin-bottom: 4px;
}

#fck-player-box .fck-player-name{
  font-weight: 400;
  color: #777;
  text-align: left;
}

#fck-player-box .fck-player-val,
#fck-player-box .fck-player-yellow,
#fck-player-box .fck-player-red{
  font-weight: 600;
  color: #777;
  text-align: center;
  min-width: 15px;
}

#fck-player-box .fck-player-head{
  font-weight: 500;
  color: #e30511;
  margin-bottom: 9px;
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */
@media (max-width:1200px){
  .fck-cards{ grid-template-columns:1fr; }
}

@media (max-width:700px){
  .fck-overview-grid{ grid-template-columns:1fr; }
  .fck-mini-table, .fck-extra-stats-box, .fck-jump-box{ height:auto; }
  .fck-recent-label{ font-size:13px; }
}