:root{
  --bg:#0b1220;--card:#0f1a2b;--muted:#93a0b8;--text:#e6edf7;--line:#1f2a44;--hl:#22345a;
  --pitch1:#0e5a2b;--pitch2:#093d1e;--lines:#bff3c7;--glow:#2de38b;
  --activeBorder:#3b82f6;
  --lightCard:#f5f7fb;--lightText:#0b1220;--lightLine:#d9e0ef;
  --cl:#d1e7ff;--el:#fff1c1;--ecl:#e4ffd1;--rel:#ffe0e0;--abstieg:#ffc9c9;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);
  font-family:system-ui,Segoe UI,Roboto,Arial;max-width:100%;overflow-x:hidden}
@supports(height:100dvh){html,body{min-height:100dvh}}
.wrap{max-width:1120px;margin:0 auto;padding:14px}
header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
h1{margin:0;font-size:clamp(22px,5vw,36px)}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row.between{justify-content:space-between}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:1000px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:0 16px 40px rgba(0,0,0,.35)}
.card h2{margin:2px 0 8px;font-size:20px}
.chip{background:#0d1829;border:1px solid var(--line);padding:6px 10px;border-radius:999px;color:#93a0b8}
.pill{padding:2px 8px;border-radius:999px;border:1px solid var(--line);background:#0c1730;color:#93a0b8}
.small{font-size:12px}
.center{text-align:center}.right{text-align:right}

/* Light tables */
.lightPanel{background:var(--lightCard);color:var(--lightText);border:1px solid var(--lightLine)}
table{width:100%;border-collapse:collapse}
thead th{position:sticky;top:0;background:#0e1c31;border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;color:#fff;z-index:1}
.lightPanel thead th{background:#eaf0ff;color:var(--lightText);border-bottom:1px solid var(--lightLine)}
tbody td{padding:8px 6px;border-bottom:1px dashed #16243a;vertical-align:top}
.lightPanel tbody td{border-bottom:1px dashed #ccd6ee}
tbody tr:nth-child(even){background:#0c172a}
.lightPanel tbody tr:nth-child(even){background:#f0f4ff}

/* Liga-Highlights */
.cl td{background:var(--cl)!important;}
.el td{background:var(--el)!important;}
.ecl td{background:var(--ecl)!important;}
.rel td{background:var(--rel)!important;}
.abstieg td{background:var(--abstieg)!important;}
tr.hl td{background:var(--hl)}

/* Views (Tabs) */
.view{display:none}
.view.view--active{display:block}

/* Tabs-Bar unten */
.tabsBar{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin:16px 0 0;
}
.tabBtn{
  flex:1 1 auto; min-width:140px;
  font-size:clamp(16px,4vw,22px); font-weight:800;
  padding:10px 14px; border-radius:12px; border:none; cursor:pointer;
  background:#e0e6f5; color:#222;
}
.tabBtn.primary{background:linear-gradient(180deg,#43c7ff,#1aa1ff);color:#fff}
.tabBtn.special{background:linear-gradient(180deg,#5ac8ff,#0077b6);color:#fff}
.tabBtn.danger{background:linear-gradient(180deg,#ff7676,#c62828);color:#fff}

/* Stadion-Scoreboard */
.pitch{
  position:relative;border-radius:16px;padding:16px;
  background: url('stadium-bg.jpg') center/cover no-repeat,
              radial-gradient(circle at center, #064d1d 0%, #03220b 100%);
  border:2px solid var(--lines);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.06), 0 0 60px rgba(0,0,0,.6);
}
#roundTitle{font-size:clamp(22px,6vw,40px);text-align:center;margin:6px 0;color:#fff;text-shadow:0 0 8px rgba(0,0,0,.6)}
.scoreboardWrap{position:relative;min-height:clamp(240px,32vw,380px)}
.scoreboard{
  background:rgba(0,0,0,0.55); border-radius:12px; padding:52px 20px;
  display:flex;align-items:center;justify-content:center;gap:20px;
}
.scoreSide{display:grid;justify-items:center;gap:8px;padding:10px 14px;border:2px solid transparent;border-radius:16px;min-width:0}
.scoreSide.active{border-color:var(--activeBorder); box-shadow:0 0 0 2px rgba(59,130,246,.25)}
.teamName{font-size:clamp(20px,5vw,34px);font-weight:900;color:#fff;text-shadow:0 0 8px rgba(0,0,0,.8)}
.scoreWrap{display:flex;align-items:flex-end;gap:10px}
.scoreBig{font-size:clamp(72px,12vw,140px);line-height:.95;font-weight:1000;letter-spacing:1px;color:#fff;
  text-shadow:0 0 20px rgba(0,0,0,.9), 0 0 40px var(--glow)}
.scoreTemp{font-size:clamp(24px,3.6vw,40px);color:#eafff0;transform:translateY(-6px);text-shadow:0 0 8px rgba(0,0,0,.7)}
.scoreSep{font-size:clamp(72px,12vw,140px);color:#eee;text-shadow:0 0 12px rgba(0,0,0,.7)}

/* StartOverlay – zentriert + großer Button */
#startPanel{
  position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(0,0,0,.40); backdrop-filter: blur(3px); border-radius:16px; gap:12px; padding:16px; z-index:3; text-align:center;
}
#btnStartPanel{
  font-size: clamp(24px, 6.5vw, 40px);
  padding: 18px 28px;
  min-width: min(520px, 92%);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.35);
  letter-spacing: .3px;
}
#btnStartPanel:active{ transform: translateY(1px); }
#startPanel .hint{ color:#d7e6ff; }
.ovStats{display:grid;gap:10px;grid-template-columns:1fr 1fr;width:100%;max-width:900px;margin:0 auto}
@media (max-width:680px){.ovStats{grid-template-columns:1fr}}
.ovCard{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);padding:10px;border-radius:12px;color:#fff}
.ovCard h3{margin:0 0 6px;font-size:clamp(16px,4vw,22px)}

/* KI & Goool-Overlay */
/* KI-Overlay: nur Box, kein Abdunkeln */
#aiOverlay {
  position: fixed;
        
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;   /* Overlay klickt nicht den Hintergrund weg */
  background: transparent; /* kein Abdunkeln */
}

#aiOverlay .overlayCard {
  pointer-events: auto;   /* Box selbst bleibt normal klickbar (falls nötig) */
  background: rgba(15, 23, 42, 0.592); /* dunkle Box */
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 14px 20px;
  color: #f1f5f9;
  font-weight: 600;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}

/* Info-Chips kompakt */
.infoRow{margin:6px 0 2px}

/* Duo-Buttons: Angriff/Sichern */
.actionRow{display:flex;gap:12px;margin-top:8px}
.actionRow .duo{
  flex:1;font-size:clamp(20px,5vw,28px);font-weight:800;border-radius:14px;padding:16px;border:none;color:#fff;
  text-shadow:0 2px 6px rgba(0,0,0,.5);transition:transform .1s ease, box-shadow .1s ease;
}
.actionRow .duo:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
#btnAttack.duo{background:linear-gradient(180deg,#ff4e4e,#b80000)}
#btnDefense.duo{background:linear-gradient(180deg,#4eff8a,#00994c)}

/* Spieltag abschließen unter dem Scoreboard */
.finishUnderBoard{display:flex;justify-content:center;margin-top:10px}
.finishBtn{
  font-size:clamp(18px,4.5vw,24px);
  padding:12px 18px;border-radius:12px;border:0;font-weight:800;
  background:linear-gradient(180deg,#ffd35a,#e6a600);color:#221;
  box-shadow:0 10px 26px rgba(0,0,0,.28);cursor:pointer;
}
.finishBtn:disabled{opacity:.55;cursor:not-allowed}

/* Start-Bar schöner */
.startBar{
  background:linear-gradient(180deg,#f9fbff,#eef3ff);
  border:1px solid #d7e2ff;
}
.startBar .row select,.startBar .row button{height:44px;font-size:16px}
.startBar select{
  -webkit-appearance:none; appearance:none;
  padding:8px 36px 8px 12px; border-radius:10px; border:1px solid #c9d6f9;
  background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 24 24" fill="none" stroke="%23667" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center;
  color:#0b1220;
}
.startBar .chip{background:#fff;color:#0b1220;border-color:#c9d6f9}
.startBar button.primary{background:linear-gradient(180deg,#9dd7ff,#5ab3ff);color:#07222b;font-weight:800}
.startBar button.ghost{background:linear-gradient(180deg,#e7ecf7,#cfd9ee);color:#223;font-weight:700}

/* Mobile: Scoreboard fullscreen, Tabs sticky unten */
@media (max-width:680px){
  #scoreboardView{min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
  }

/* Fix: Saison-Stats hell lesbar */
#tabStatsPane {
  background: var(--lightCard);
  color: var(--lightText);
}

#tabStatsPane h2,
#tabStatsPane h3 {
  color: var(--lightText);
}

#tabStatsPane .card {
  background: #fff;
  border: 1px solid #ccd6ee;
  color: #111;
}

#tabStatsPane .small {
  color: #333;
}
/* ==== Fixed Tabs-Bar im Stadion-/Scoreboard-Look ==== */
.tabsBar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  display: flex; gap: 10px; flex-wrap: nowrap; justify-content: center;
  padding: 10px clamp(8px, 3vw, 16px);
  /* dunkles Glas + leichter Stadionglow */
  background: linear-gradient(180deg, rgba(6,13,26,.65), rgba(3,9,18,.78));
  border-top: 1px solid rgba(191, 243, 199, .25);
  box-shadow: 0 -8px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}

.tabBtn{
  flex: 1 1 auto; min-width: 120px; max-width: 220px;
  font-size: clamp(14px, 2.8vw, 18px); font-weight: 800; letter-spacing:.15px;
  padding: 10px 14px;
  border-radius: 12px; border: 0; cursor: pointer;
  color: #eaf6ff; 
  background: linear-gradient(180deg, #0a274e, #081d3a);
  box-shadow: inset 0 0 0 1px rgba(120,180,255,.25), 0 6px 20px rgba(0,0,0,.35);
  transition: transform .08s ease, box-shadow .12s ease, background .2s ease;
}
.tabBtn:hover{ transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(120,180,255,.35), 0 10px 26px rgba(0,0,0,.42); }
.tabBtn:active{ transform: translateY(0); }

.tabBtn.primary{
  background: linear-gradient(180deg, #1b74d8, #155ab0);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.42);
  color: #fff;
}
.tabBtn.special{
  background: linear-gradient(180deg, #0f7a4a, #0b5c38);
  box-shadow: inset 0 0 0 1px rgba(180,255,210,.22), 0 10px 26px rgba(0,0,0,.42);
  color: #eafff4;
}
.tabBtn.danger{
  background: linear-gradient(180deg, #892020, #631616);
  box-shadow: inset 0 0 0 1px rgba(255,160,160,.22), 0 10px 26px rgba(0,0,0,.42);
  color: #ffecec;
}

/* Platz für feste Tabs-Bar schaffen, damit nichts verdeckt wird */
.wrap{ padding-bottom: calc(82px + env(safe-area-inset-bottom)); }

/* Mobile: Buttons etwas kompakter, aber Leiste bleibt fixed */
@media (max-width: 680px){
  .tabBtn{ min-width: 92px; max-width: none; font-size: 14px; padding: 10px 10px; }
}

/* Tabs-Bar: Scoreboard links, Rest rechts */
.tabsBar { display:flex; align-items:center; }
.tabsBar .push { flex: 1 1 auto; }

/* Simulations-CTA im Spieltag-Header */
.ctaSim{
  font-weight: 900;
  padding: 8px 14px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(180deg, #1b74d8, #155ab0);
  box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.15);
}
.ctaSim:hover{ filter: brightness(1.05); }
.ctaSim:active{ transform: translateY(1px); }

/* Duo-Buttons – moderne Farben + „entleuchten“ nach Spielende */
#btnAttack.duo{
  background: #0f331d;
  box-shadow: 0 8px 24px rgba(200,29,37,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  color: #fff;
}
#btnDefense.duo{
  background: #0f331d;
  box-shadow: 0 8px 24px rgba(21,128,61,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  color: #031a0e;
}
.duo.off{ filter: grayscale(35%) brightness(0.75); box-shadow:none; opacity:.6; }

/* Start-Overlay größer & Buttons darunter abdunkeln, bis „Spiel starten“ */
#startPanel{ padding:22px; background: rgba(0,0,0,.52); }
.actionRow.dim{ opacity:.35; pointer-events:none; transition: opacity .2s ease; }
/* --- vorhandenes Stadion/Scoreboard-Design bleibt --- */

/* Neuer Header-Reset-Button */
.neustart {
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid #c9d6f9;
  background: linear-gradient(180deg,#670000,#5a0000);
  color: #fb1220;
  cursor: pointer;
  margin-left: 12px;
}
.neustart:hover {
  background: linear-gradient(180deg,#eaf2ff,#dbeafe);
}

/* ---------- Pre-Start: nur leeres, schickes Scoreboard sichtbar ---------- */
body.preStart .tabsBar,
body.preStart #matchesSection,
body.preStart #tabTablePane,
body.preStart #tabStatsPane,
body.preStart #finishUnderBoard,
body.preStart .miniLog,
body.preStart .actionRow { display: none !important; }

/* Scoreboard selbst bleibt – aber "ruhig" wirken */
body.preStart #roundTitle { opacity: .85; }
.preStartHint {
  margin: 6px 8px 2px;
  font-size: 12px;
  color: #c7e8d1;
  opacity: .85;
}

/* ---------- Stadion-Flutlicht-Atmosphäre fürs Scoreboard ---------- */
.pitch{
  position:relative;
  background:
    /* Flutlichter von links/rechts oben */
    radial-gradient(120% 90% at 12% -8%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(120% 90% at 88% -8%, rgba(255,255,255,.10), transparent 60%),
    /* dunkler Center-Spot */
    radial-gradient(60% 120% at 50% -20%, rgba(0,0,0,.35), transparent 60%),
    /* Grundrasen */
    linear-gradient(#0a3a1e,#0a3a1e),
    /* Streifen */
    repeating-linear-gradient(0deg, #0d5d2a 0 48px, #0a4a22 48px 96px);
  border:2px solid #134022;
  border-radius:18px;
  padding:12px;
  overflow:hidden;
  box-shadow: inset 0 0 60px rgba(0,0,0,.45), 0 10px 40px rgba(0,0,0,.35);
}
.pitch:before,.pitch:after{
  content:"";
  position:absolute; inset:8px;
  border:2px solid rgba(230,255,230,.35);
  border-radius:12px;
  pointer-events:none;
  opacity:.45;
}

/* Kacheln & Zahlen im Flutlicht */
.side{ background: rgba(0,0,0,.22); box-shadow: inset 0 0 20px rgba(0,0,0,.25); }
.score{ text-shadow: 0 0 16px rgba(50,255,120,.18); }

/* GOOOL Overlay leicht grünlich */
.goalOverlay{
  background: radial-gradient(60% 60% at 50% 40%, rgba(28,180,90,.25), rgba(0,0,0,.35));
  text-shadow: 0 0 20px rgba(80,255,160,.45), 0 2px 18px rgba(0,0,0,.8);
}
/* Teamkacheln etwas „flutlichtiger“ */
.side{ background: rgba(0,0,0,.22); box-shadow: inset 0 0 20px rgba(0,0,0,.25); }

/* Score-Zahlen mit leichter Glow */
.score{ text-shadow: 0 0 16px rgba(50,255,120,.18); }

/* ==== Fullscreen Overlays (Start / KI) ==== */
body.overlayOpen { overflow: hidden; } /* Scroll sperren wenn Overlay offen */

#startPanel,
#aiOverlay {
  position: fixed;          /* über die ganze Seite, nicht nur im Pitch */
  inset: 0;
  display: none;            /* wird via JS auf flex gesetzt */
  align-items: center;
  justify-content: center;
  z-index: 9999;            /* über Tabs, Logs, ALLEM */
  background:
    radial-gradient(65% 55% at 50% 30%, rgba(0,0,0,.35), rgba(0,0,0,.60));
  backdrop-filter: blur(3px);
}

.overlayCard{
  width: min(720px, 92%);
  max-height: 80vh;
  overflow: auto;
  background: linear-gradient(180deg,#0f172a,#0b1220);
  border: 1px solid #223047;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 18px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset;
}

.overlayCard.small{ width: min(380px, 90%); }

/* Inhalt im Overlay */
.ovTeam{ display:none;font-size:14px; margin:4px 0 6px; color:#e2e8f0 }
.ovRow{ display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:4px 0; color:#cbd5e1 }
.ovRow span:first-child{ opacity:.8 }

/* Start-Button im Overlay schön groß */
#btnStartPanel,
#btnStartOverlay {
  background: linear-gradient(180deg, #34d399, #059669);
  color: #fff;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  width: 60%;
  margin-top:50px;
}

/* Pitch in Flutlicht-Rasengrün (dezenter, aber satt) */
.pitch{
  position:relative;
  background:
    radial-gradient(120% 90% at 12% -8%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(120% 90% at 88% -8%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(60% 120% at 50% -20%, rgba(0,0,0,.35), transparent 60%),
    linear-gradient(#0a3a1e,#0a3a1e),
    repeating-linear-gradient(0deg, #0d5d2a 0 48px, #0a4a22 48px 96px);
  border:2px solid #134022;
  border-radius:18px;
  padding:12px;
  overflow:hidden;
  box-shadow: inset 0 0 60px rgba(0,0,0,.45), 0 10px 40px rgba(0,0,0,.35);
}
.pitch:before,.pitch:after{
  content:"";
  position:absolute; inset:8px;
  border:2px solid rgba(230,255,230,.35);
  border-radius:12px;
  pointer-events:none;
  opacity:.45;
}
.side{ background: rgba(0,0,0,.22); box-shadow: inset 0 0 20px rgba(0,0,0,.25); }
.score{ text-shadow: 0 0 16px rgba(50,255,120,.18); }

/* GOOOL Overlay leicht grünlich */
.goalOverlay{
  background: radial-gradient(60% 60% at 50% 40%, rgba(28,180,90,.25), rgba(0,0,0,.35));
  text-shadow: 0 0 20px rgba(80,255,160,.45), 0 2px 18px rgba(0,0,0,.8);
}

/* --- Overlay soll den unteren Bereich (Buttons/Tabs) nicht überdecken --- */
:root{ --overlay-safe-bottom: 180px; } /* Platz für Aktion + Tabs */

/* Start/KI-Overlay: Fullscreen, aber unten frei lassen */
#startPanel,
#aiOverlay{
  position: fixed;
  top: 0; left: 0; right: 0;
  bottom: var(--overlay-safe-bottom);   /* <— lässt unten Platz */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(2px);
}

/* Overlay-Card Höhe an den frei gelassenen Rand anpassen */
.overlayCard{
  width: min(720px, 92%);
  max-height: calc(100vh - var(--overlay-safe-bottom) - 32px);
  overflow: auto;
}

/* Mobil etwas mehr Luft unten (größere Buttons) */
@media (max-width: 640px){
  :root{ --overlay-safe-bottom: 220px; }
}

/* === Mint (Angriff) & Blau (Sichern) — robuste, moderne Akzente === */
#scoreboardView .actionRow #btnAttack.duo,
#scoreboardView .actionRow #btnDefense.duo {
  position: relative;
  padding: 14px 12px;
  border-radius: 14px;
  //border: 1px solid #1f2b3e !important;
  background: #0f331d ;
  color: #f1f5f9 !important;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04) !important;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}

/* Mint-Akzent für Angriff */
#scoreboardView .actionRow #btnAttack.duo::after {
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: 0 0 0 2px rgba(110,231,183,.66) inset, 0 0 22px rgba(110,231,183,.22);
}

/* Blau-Akzent für Sichern */
#scoreboardView .actionRow #btnDefense.duo::after {
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow: 0 0 0 2px rgba(96,165,250,.66) inset, 0 0 22px rgba(96,165,250,.22);
}

/* Hover – sanft anheben */
#scoreboardView .actionRow #btnAttack.duo:hover:not(:disabled),
#scoreboardView .actionRow #btnDefense.duo:hover:not(:disabled){
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Abgeblendet / Spiel vorbei */
#scoreboardView .actionRow .duo.off,
#scoreboardView .actionRow .duo:disabled{
  opacity:.55 !important;
  filter: saturate(.7) brightness(.9);
  transform:none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
/* === Stadion-Hintergrund: deutlich mehr Grün === */
.pitch{
  position: relative;
  border-radius: 18px;
  border: 2px solid #0a3a1e;
  overflow: hidden;
  padding: 14px;
  /* Reihenfolge: Lichter (oben) → Streifen (semi) → Basis (Himmel→Rasen) */
  background:
    /* Flutlicht links/rechts – etwas dezenter */
    radial-gradient(ellipse at 15% -12%, rgba(255,255,255,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 85% -12%, rgba(255,255,255,0.18) 0%, transparent 60%),
    /* Rasen-Streifen (halbtransparent, damit Basis durchscheint) */
    repeating-linear-gradient(
      0deg,
      rgba(25, 110, 55, 0.48) 0 46px,
      rgba(18, 92, 44, 0.48) 46px 92px
    ),
    /* Basis: oben Himmel (dunkel), ab ~38% kräftiger Rasen */
    linear-gradient(
      to bottom,
      #0b1220 0%,
      #0f1a2e 26%,
      #157a3e 78%,
      #0f6a36 100%
    );
  box-shadow: inset 0 0 60px rgba(0,0,0,.55), 0 10px 40px rgba(0,0,0,.45);
}

/* Spielfeld-Linien & leichte Vignette */
.pitch::before{
  content:"";
  position:absolute; inset:8px;
  pointer-events:none; border-radius:14px;
  background:
    /* Mittellinie */
    linear-gradient(to bottom, rgba(240,255,240,.55), rgba(240,255,240,.55)) 50% 55% / 2px 70% no-repeat,
    /* Mittelkreis */
    radial-gradient(circle at 50% 55%, rgba(240,255,240,.45) 0 64px, transparent 66px),
    /* zarte Vignette innen */
    radial-gradient(120% 90% at 50% 60%, rgba(0,0,0,.18), transparent 60%);
  /* Rahmen der Linienfläche */
  box-shadow: inset 0 0 0 2px rgba(230,255,230,.45);
  opacity:.9;
}

/* Score/Boxen bleiben über dem Rasen */
.pitch > *{ position:relative; z-index:1; }

/* KI-Overlay: sehr durchsichtig, Fokus nur auf der Box */
#aiOverlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  background: rgba(0,0,0,0.15);   /* nur leichter Schleier */
  backdrop-filter: blur(1px);     /* ganz leichtes Blur */
  pointer-events: none;           /* blockiert nichts im Hintergrund */
}

#aiOverlay .overlayCard {
  pointer-events: auto;           /* Box bleibt interaktiv falls nötig */
  background: rgba(15, 23, 42, 0.9); /* dunkle, klare Box */
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 14px 20px;
  color: #f1f5f9;
  font-weight: 600;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
#goalOverlay{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  pointer-events:none; z-index:9999;
}
#goalOverlay .txt{
  font-size:clamp(48px,20vw,140px);
  font-weight:900; letter-spacing:2px; color:yellow;
  text-shadow:0 2px 0 #000,0 8px 30px rgba(0,0,0,.5);
}
#goalOverlay .txt::after{ content:"GOOOL!"; }
/* Stacking & Layout-Fix für Overlays vs. InfoRow */
.scoreboardWrap { position: relative; }         /* eigener Stacking-Context */

#startPanel, #aiOverlay {
  position: absolute;
  inset: 0;                 /* über dem gesamten Scoreboard */
  z-index: 30;              /* sicher über der infoRow */
  border-radius: 16px;      /* wie dein Scoreboard */
}

#startPanel { 
  display: none; 
  background: rgba(0,0,0,.40); 
  backdrop-filter: blur(3px);
}

#aiOverlay { 
  display: none; 
  align-items: center; 
  justify-content: center; 
  background: rgba(10,18,32,.45);
}

/* Chips-Leiste: immer UNTER den Overlays */
.infoRow {
  position: relative;
  z-index: 1;               /* deutlich unter 30 */
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
/* Settings Button */
.settingsBtn{
  font-weight:700; padding:6px 14px; border-radius:3px; margin-left:8px;
  border:1px solid #c9d6f9;
  background:linear-gradient(180deg,#0a274e,#081d3a); color:#eaf6ff;
  box-shadow: inset 0 0 0 1px rgba(120,180,255,.25), 0 6px 20px rgba(0,0,0,.35);
  cursor:pointer;
}
.settingsBtn:hover{ filter:brightness(1.05) }
.settingsBtn:active{ transform: translateY(1px) }

/* Overlay */
#settingsOverlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:2000; padding:16px; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }
#settingsOverlay.open{ display:flex; }
.settingsSheet{ width:min(980px,96%); max-height:88vh; overflow:auto; background:var(--lightCard); color:var(--lightText); border:1px solid var(--lightLine); border-radius:16px; padding:16px; box-shadow:0 18px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) inset; }
.sheetHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.sheetHead .ghost{ font-weight:700; padding:6px 12px; border-radius:10px; border:1px solid #c9d6f9; background:linear-gradient(180deg,#e7ecf7,#cfd9ee); color:#223; cursor:pointer; }
.sheetHead .ghost:active{ transform: translateY(1px) }
body.overlayOpen{ overflow:hidden; }


/* === StartCard: grüner Gradient + weiße Schrift (override) === */
.startBar .startCard{
  background: linear-gradient(180deg, #325145, #156935);
  border: 1px solid #254338;
  border-radius: 16px;
  padding: 16px;
  color: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.startBar .startHead h2,
.startBar .startHead .hint,
.startBar label{ color:#fff; }

/* Schöne Selects (Team & Modus) */
.startBar select,
#selTeam, #selBalance{
  -webkit-appearance:none; appearance:none;
  width:100%; height:54px;
  font-size:16px; line-height:1;
  padding:8px 42px 8px 12px;
  border-radius:10px; border:1px solid #c9d6f9;
  background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 24 24" fill="none" stroke="%23667" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center;
  color:#0b1220;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.startBar select:focus,
#selTeam:focus, #selBalance:focus{
  outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.25);
  border-color:#93b7ff;
}

.startBar .chip.small{
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  color: #fff;
}


/* Force overlay to show even if inline style sets display:none */
#settingsOverlay.open{ display:flex !important; }


/* === Mode control placement: start vs settings === */
#settingsMount .settings-mode { display: none; }      /* hidden until start */
body.started #settingsMount .settings-mode { display: block; }

/* When started, we hide start-bar's mode select via JS; fallback: */
body.started #selBalance { visibility: hidden; } /* fallback only; JS will set display:none on its container */



/* === Equal sizing + distinct designs for Team & Mode selects === */

/* Make Team/Mode columns equal width with same control height */
.startBar .startGrid{
  grid-template-columns: 1fr 1fr 1fr !important; /* team | mode | start */
}
@media (max-width:860px){
  .startBar .startGrid{ grid-template-columns: 1fr !important; }
}

/* Unify control height regardless of wrapper padding */
.startBar .field .inputWrap{ min-height: 56px; padding: 0 10px; border-radius: 12px; }
.startBar .field .inputWrap select{ height: 56px; line-height: 56px; }

/* Typography a bit fancier */
.startBar label{
  font-weight: 800;
  letter-spacing: .2px;
}
.startBar select,
#selTeam, #selBalance{
  font-weight: 600;
  letter-spacing: .15px;
  border-radius: 12px;
}

/* TEAM select: dark glass look on green card */
#selTeam{
  -webkit-appearance: none; appearance: none;
  width: 100%;
  padding: 8px 42px 8px 12px;
  background:
    #1a2d24,
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
#selTeam:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.5);
}

/* MODE select: light, crisp */
#selBalance{
  -webkit-appearance: none; appearance: none;
  width: 100%;
  padding: 8px 42px 8px 12px;
  background:
    #fff
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 24 24" fill="none" stroke="%23667" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center;
  color: #0b1220;
  border: 1px solid #c9d6f9;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
#selBalance:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
  border-color: #93b7ff;
}



/* === StartBar layout: 2 equal selects + start button === */
#startBar{
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end;
}
@media (max-width: 860px){
  #startBar{ grid-template-columns: 1fr; }
}

/* Labels nicer */
#startBar > label,
#startBar label[for="selBalance"]{
  display: block;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  margin: 0 0 6px;
}

/* Glasslook for both selects */
#startBar select#selTeam,
#startBar select#selBalance{
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 56px; line-height: 56px;
  padding: 0 44px 0 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(255,255,255,.55);
  background: rgba(12, 24, 32, .948);
  color: #fff;
  font-weight: 600; letter-spacing: .2px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.15);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Focus ring */
#startBar select#selTeam:focus,
#startBar select#selBalance:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.22), 0 10px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.75);
}

/* Start button: keep visible on glass card */
#startBar #btnCareer.primary{
  min-height: 56px;
  border: 2px solid rgba(255,255,255,.65);
  box-shadow: 0 12px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.18);
}



/* === StartBar: two selects on top, button below (full width) === */
#startBar { display:grid; grid-template-columns: 1fr 1fr; gap:12px; align-items:end; }
#startBar .startGrid { display:contents; } /* flatten for CSS grid placement */
#startBar .field:nth-child(1){ grid-column:1; }
#startBar .field:nth-child(2){ grid-column:2; }
#startBar .field.action{ grid-column:1 / -1; }

/* Pretty button */
#startBar .ctaStart{
  display:block; width:100%;
  min-height:58px; border-radius:14px; border:0;
  font-size:clamp(18px,4.5vw,22px); font-weight:900; letter-spacing:.2px;
  background: linear-gradient(180deg,#34d399,#059669);
  color:#fff;
  box-shadow: 0 12px 28px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.15);
  cursor:pointer;
}
#startBar .ctaStart:hover{ filter: brightness(1.05); }
#startBar .ctaStart:active{ transform: translateY(1px); }

@media (max-width: 860px){
  #startBar{ grid-template-columns:1fr; }
  #startBar .field.action{ grid-column:1; }
}



/* === Remove pitch mid-line & circle forcefully === */
.pitch::before{
  content: "";
  background: none !important;
  box-shadow: none !important;
}
@media (max-width: 680px){
  .pitch::before{
    content: "";
    background: none !important;
    box-shadow: none !important;
  }
}



/* === Make Neustart identical to Einstellungen === */
.neustart{
  font-weight:700; padding:6px 14px; border-radius:3px; margin-left:8px;
  border:1px solid #c9d6f9;
  background:linear-gradient(180deg,#0a274e,#081d3a);
  color:#eaf6ff;
  box-shadow: inset 0 0 0 1px rgba(120,180,255,.25), 0 6px 20px rgba(0,0,0,.35);
  cursor:pointer;
}
.neustart:hover{ filter: brightness(1.05); }
.neustart:active{ transform: translateY(1px); }



/* === Settings: Modus-Feld im Overlay (schöner) === */
#settingsMount .settings-mode{ display:block; margin: 8px 0 4px; }
#settingsMount .settings-mode label{
  font-weight:800; letter-spacing:.2px; color:#0b1220;
}
#settingsMount .settings-mode select#selBalanceSettings{
  -webkit-appearance:none; appearance:none;
  width:100%; height:56px; line-height:56px;
  padding:0 44px 0 12px;
  border-radius:3px !important;
  border:1px solid #c9d6f9;
  background:#fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 10px center;
  color:#0b1220;
  font-weight:600; letter-spacing:.2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
#settingsMount .settings-mode select#selBalanceSettings:focus{
  outline:none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.25);
  border-color: #93b7ff;
}

/* === Mini-Game: lesbarer Overlay-Sheet + dunklere Karten === */

/* 1) Container vorbereiten, damit das Sheet darunter liegen kann */
#startPanel .ovStats,
#aiOverlay .ovStats{
  position: relative;
  z-index: 1;
}

/* 2) Halbtransparenter „Sheet“ hinter beiden Karten */
#startPanel .ovStats::before,
#aiOverlay .ovStats::before{
  content: "";
  position: absolute;
  inset: -10px;                    /* etwas Luft um die Karten */
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(4, 9, 18, .82), rgba(8, 16, 28, .66));
  border: 0px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 36px rgba(0,0,0,.55);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  pointer-events: none;
  z-index: 0;
}

/* 3) Karten selbst etwas dunkler + klarere Kontur */
#startPanel .ovCard,
#aiOverlay .ovCard{
  background: rgba(10,18,32,.72);
  border: 0px solid rgba(255,255,255,.818);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 8px 24px rgba(0,0,0,.45);
  color: #eaf2ff;
}

/* 4) Typo in den Zeilen leicht verstärken */
#startPanel .ovCard .ovRow,
#aiOverlay .ovCard .ovRow{ 
  color: #e6eefc;
  font-weight: 600;
  letter-spacing: .15px;
}
#startPanel .ovCard .ovRow span:first-child,
#aiOverlay .ovCard .ovRow span:first-child{
  opacity: .9;
}

/* 5) Mobile: Sheet etwas kräftiger, damit’s sicher lesbar bleibt */
@media (max-width: 680px){
  #startPanel .ovStats::before,
  #aiOverlay .ovStats::before{
   /background: linear-gradient(180deg, rgba(3, 7, 14, .488), rgba(8, 16, 28, .4));
  }
}

/* Mobile: einen Tick heller, Rand bleibt deutlich */
@media (max-width: 680px){
  #startPanel .ovStats::before,
  #aiOverlay .ovStats::before{
    background: linear-gradient(180deg, rgba(16,24,38,.50), rgba(12,20,34,.42));
    border-color: rgba(220,240,255,.92);
  }
  #startPanel .ovCard,
  #aiOverlay .ovCard{
    background: rgba(16,24,38,.62);
    border-color: rgba(220,240,255,.95);
  }
}
/* 1) Überschrift wieder zeigen */
#startPanel .ovTeam,
#aiOverlay .ovTeam{
  display: block !important;
  position: relative;
  z-index: 3;
  color: #fff;
}

/* 2) Layering: Texte sicher über dem Sheet halten */
#startPanel .ovStats,
#aiOverlay .ovStats{
  position: relative;
  z-index: 0; /* eigener Kontext */
}
#startPanel .ovStats::before,
#aiOverlay .ovStats::before{
  z-index: 0; /* Sheet unten */
}
#startPanel .ovCard,
#aiOverlay .ovCard{
  position: relative;
  z-index: 2; /* Karten über dem Sheet */
}
#startPanel .ovCard h3,
#startPanel .ovCard .ovRow,
#aiOverlay .ovCard h3,
#aiOverlay .ovCard .ovRow{
  position: relative;
  z-index: 3;       /* Text ganz oben */
  filter: none !important; /* falls woanders ein Filter greift */
}
/* === Start: Team & Modus gleich groß, gleiche Typo, mobil 2 Spalten === */

/* Grid-Layout: 2 Spalten (Team | Modus), Button darunter */
#startBar{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  align-items:end;
}

/* Labels konsistent */
#startBar > label[for="selTeam"],
#startBar > label[for="selBalance"]{
  display:block;
  margin:0 0 6px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.2px;
}

/* Selects: gleiche Schrift + gleiche Höhe/Breite */
#startBar select#selTeam,
#startBar select#selBalance{
  -webkit-appearance:none; appearance:none;
  width:100%;
  height:56px; line-height:56px;
  padding:0 42px 0 12px;          /* Platz für Pfeil rechts */
  border-radius:12px;
  font-size:16px;
  font-weight:600;
  letter-spacing:.15px;
}

/* Start-Button unter den Feldern, volle Breite */
#startBar #btnCareer{
  grid-column:1 / -1;             /* über beide Spalten */
  min-height:56px;                /* gleiche Höhe wie Selects */
  width:100%;
}

/* Mobil: explizit 2 Spalten (= je 50%) beibehalten */
@media (max-width: 680px){
  #startBar{ grid-template-columns: 1fr 1fr; }
}

/* Falls du eine .startGrid-Wrapper-Struktur hast: entkoppelt trotzdem */
#startBar .startGrid{ display:contents; }
/* === StartBar: Labels für Team & Modus exakt gleich stylen === */
#startBar label,
#startBar > label[for="selTeam"],
#startBar > label[for="selBalance"],
#startBar .field label{
  display:block !important;
  margin:0 0 6px !important;
  font-family: inherit !important;
  font-size:16px !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
  line-height:1.2 !important;
  text-transform:none !important;
  color:#fff !important;           /* wenn du lieber dunkel willst: #0b1220 */
  opacity:1 !important;            /* falls irgendwo ein geringeres Opacity greift */
}


/* Mein Team: KEIN dunkler Balken, aber gelbe Schrift */
#tabTablePane table tbody tr.myTeam,
#tabTablePane table tbody tr.myTeam td {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;              /* falls ein dunkler Filter gesetzt war */
}

/* Eventuelle Deko-Pseudoelemente (leisten/balken) abschalten */
#tabTablePane table tbody tr.myTeam::before,
#tabTablePane table tbody tr.myTeam::after,
#tabTablePane table tbody tr.myTeam td::before,
#tabTablePane table tbody tr.myTeam td::after {
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* rote Schrift beibehalten (ganze Zeile) */
#tabTablePane table tbody tr.myTeam td,
#tabTablePane table tbody tr.myTeam td * {
  color: red !important;
  font-weight: 800;
}
/* Header layout */
header .headerTop{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:6px;
}
header .headerActions{ display:flex; gap:8px; align-items:center; }

/* Status bar unter dem Header */
header .statusBar{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}

@media (max-width: 680px){
  header .headerTop{ flex-wrap:wrap; }
  header .headerActions{ margin-left:auto; }
}
/* ===== Header: Titel links, Buttons rechts (eine Zeile), Status darunter in EINER Zeile ===== */

/* Top-Zeile: nie umbrechen */
header .headerTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap: nowrap !important;     /* verhindert, dass die Buttons runter rutschen */
}
header .headerTop h1{
  flex: 1 1 auto;
  min-width: 0;                      /* erlaubt Schrumpfen, statt Buttons zu schieben */
}
header .headerActions{
  display:flex;
  gap:8px;
  flex: 0 0 auto;
  white-space: nowrap;               /* Buttons immer nebeneinander */
}
header .headerActions .neustart,
header .headerActions .settingsBtn{
  display:inline-flex;
  align-items:center;
}

/* Status-Zeile: unter allem, in EINER Reihe */
header .statusBar{
  display:flex;
  flex-direction: row !important;
  flex-wrap: nowrap !important;      /* verhindert vertikales Stapeln */
  gap:8px;
  align-items:center;
  margin-top:6px;
}
header .statusBar .chip{
  display:inline-flex;
  align-items:center;
}
/* Header in zwei Zeilen stapeln: oben title+buttons, darunter statusBar */
header{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Obere Zeile: Titel links, Buttons rechts (nebeneinander) */
header .headerTop{
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap !important;   /* Buttons bleiben oben rechts */
}

/* Untere Zeile: Status-Werte, volle Breite, dürfen umbrechen */
header .statusBar{
  display: flex !important;
  width: 100%;
  flex-wrap: wrap !important;      /* auf Mobile nicht raus schieben */
  justify-content: flex-start;     /* links ausrichten */
  gap: 8px;
  margin-top: 6px;
}

/* Optional: Mobile etwas mittiger wirken lassen */
@media (max-width: 680px){
  header .statusBar{ justify-content: center; }
}
/* Sichern-Button: Text zentrieren */
#scoreboardView .actionRow #btnDefense.duo,
.actionRow #btnDefense.duo{
  display: inline-flex;              /* zentrierbar machen */
  align-items: center;               /* vertikal zentriert */
  justify-content: center;           /* horizontal zentriert */
  text-align: center !important;     /* falls irgendwo right gesetzt war */
}

/* Falls ein Icon/Span den Text verschiebt, neutralisieren */
#btnDefense.duo > *{
  margin: 0;                         /* keine seitlichen Offsets */
}

/* === Header-Logo-Typo === */
header .headerTop h1{
  /* Goool! groß & „logohaft“ */
  font-size: clamp(30px, 6.2vw, 56px);
  font-weight: 1000;
  letter-spacing: .2px;
  line-height: 1.05;
  margin: 0;
  /* dezenter, edler Verlauf im Text */
  background: linear-gradient(180deg, #ffffff, #cfe4ff 70%, #a9c6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* leichter Schimmer für mehr „Logo“-Feeling */
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
  display: flex;
  align-items: center;
  gap: 10px; /* Platz vor dem Tag */
}

/* Der kleine „Tag“ rechts: Bundesliga Simulation (kleiner, wie Sublogo) */
header .headerTop h1 .pill{
  all: unset; /* globale .pill-Styles hier neutralisieren */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 3px;
  font-size: clamp(11px, 1.4vw, 14px);  /* bewusst kleiner als „Goool!“ */
  font-weight: 800;
  letter-spacing: .25px;
  color: #0b1220;
  /* helles Badge mit klarer Kontur */
  background: linear-gradient(180deg, #f7fbff, #e8f1ff);
  border: none;
  box-shadow: 0 6px 14px rgba(0,0,0,.15), inset 0 0 0 1px rgba(255,255,255,.55);
  transform: translateY(2px); /* optische Basislinie leicht absenken */
}

/* Auf ganz kleinen Screens etwas kompakter, damit nichts umbricht */
@media (max-width: 420px){
  header .headerTop h1{ font-size: clamp(26px, 8vw, 42px); }
  header .headerTop h1 .pill{ font-size: 11.5px; padding: 3px 8px; }
}
/* Badge UNTER dem Goool!-Titel statt daneben */
header .headerTop h1{
  display: block !important;      /* nicht als Flex-Zeile */
}

header .headerTop h1 .pill{
  display: inline-flex !important; /* bleibt hübsch als Badge */
  margin-top:-20px !important;      /* Abstand unter dem Titel */
  transform: none !important;      /* kein Verschieben mehr */
}

/* (Optional) etwas kompakter auf sehr kleinen Screens */
@media (max-width: 420px){
  header .headerTop h1 .pill{
    margin-top: 0px !important;
  }
}
/* Verhindert Pull-to-Refresh / Overscroll-Chaining */
html, body {
  overscroll-behavior: none;         /* x + y */
  overscroll-behavior-y: none;
}
/* Badge unter dem Titel (falls noch nicht gesetzt) */
header .headerTop h1{
  display:block;
}
header .headerTop h1 .pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:-6px;                 /* unter „Goool!“ */
  padding:4px 4px;
  border-radius:3px;

  /* Dunkelgrüner, leichter Verlauf + Glass-Effekt */
  background: linear-gradient(180deg, rgba(10,45,33,.78), rgba(6,33,25,.66));
  border: 0.5px solid rgba(255,255,255,.38);
  box-shadow: 0 6px 18px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.18);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);

  /* Weiße, dünne Schrift (logo-ig) */
  color:#fff;
  font-weight: 200;               /* „dünn“ – bei Bedarf 300 */
  letter-spacing:.3px;
  font-size: clamp(11px, 1.35vw, 14px);
  line-height: 1;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
  white-space: nowrap;
  text-transform: uppercase;
}

/* Optional: leichtes Hover-Highlight */
header .headerTop h1 .pill:hover{
  filter: brightness(1.06);
  border-color: rgba(255,255,255,.5);
}
/* H1 als Positionierungs-Container */
header .headerTop h1{
  position: relative !important;
  display: inline-block !important;   /* damit sich die Breite am Text orientiert */
  padding-bottom: 14px;               /* Platz für den Badge unterhalb schaffen */
  line-height: 1.05;
}

/* Badge unter dem Titel, um 12px nach oben gezogen – NICHT länger */
header .headerTop h1 .pill{
  position: absolute !important;
  left: 0;                 /* links unter "Goool!" */
  top: 100%;
  transform: translateY(-12px) !important;  /* >= 10px höher */
  margin: 0 !important;
  width: auto !important;
  max-width: max-content !important;
  white-space: nowrap !important;
  z-index: 1;              /* sicher über dem Hintergrund */
  padding-top: 3px; padding-bottom: 3px;    /* Höhe bleibt gleich, nicht „länger“ */
}

/* Optional: Badge mittig unter "Goool!" (statt links) */
/*
header .headerTop h1 .pill{
  left: 50%;
  transform: translate(-50%, -12px) !important;
}
*/
/* Titel & Buttons exakt auf einer Höhe */
header .headerTop{
  display:flex;
  align-items:center !important;   /* vertikal zentriert mit H1 */
  justify-content:space-between;
}

/* Button-Gruppe sauber ausrichten */
header .headerActions{
  display:flex;
  gap:8px;
  align-items:center !important;
  margin:0 !important;
}

/* Neustart & Einstellungen: gleiche Optik, dünnere Schrift, leicht dunkelgrün */
header .headerActions .neustart,
header .headerActions .settingsBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:25px;                    /* gleich hoch */
  padding:4px 4px;
  border-radius:9px;
  font-weight:300;                /* dünnere Schrift */
  letter-spacing:.2px;
  color:#f3fff9;
  background: linear-gradient(180deg,#214d3a,#193e2e); /* leicht dunkelgrün */
  border:1px solid rgba(170, 240, 200, .35);
  box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
  text-align:center !important;
  line-height:1;
  transform: translateY(-1px);    /* minimal anheben, falls H1 höher wirkt */
}

/* Hover/Active-Feedback */
header .headerActions .neustart:hover,
header .headerActions .settingsBtn:hover{
  filter: brightness(1.06);
}
header .headerActions .neustart:active,
header .headerActions .settingsBtn:active{
  transform: translateY(0);
}

/* Falls irgendwo etwas die Buttons runterdrückt: Margin resetten */
header .headerActions .neustart,
header .headerActions .settingsBtn{
  margin-top:-10px !important;
  margin-bottom:0 !important;
}
/* Badge: Border entfernen, Glaslook behalten */
header .headerTop h1 .pill{
  border: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.28),
              inset 0 0 0 1px rgba(255,255,255,.18) !important; /* nur innerer Lichtsaum */
}
/* Pitch/Scoreboard erst NACH Saisonstart anzeigen */
body:not(.started) #scoreboardView,
body:not(.started) #roundTitle,
body:not(.started) .finishUnderBoard,
body:not(.started) .actionRow {
  display: none !important;
}

/* === Statusbar: Titel oben (L/M/R), Werte direkt darunter === */
header .statusBar{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
  width: 100%;
  border: 1px solid #cfe4ff;
  Border-Radius: 3px;
  padding:8px 5px;
  margin-bottom: 20px;
}

.statusBar .statusItem{ display: grid; grid-template-rows: auto auto; }
.statusBar .statusItem .stLabel{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #cfe4ff;
  opacity: .9;
  margin-bottom: 2px;
}
.statusBar .statusItem .stValue{
  font-size: clamp(14px, 2.4vw, 18px);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}

/* Ausrichtung: links / Mitte / rechts */
.statusBar .statusItem.left   { text-align: left; }
.statusBar .statusItem.center { text-align: center; }
.statusBar .statusItem.right  { text-align: right; }

/* Mobil: falls es eng wird, trotzdem in einer Zeile lassen */
@media (max-width: 420px){
  .statusBar .statusItem .stLabel{ font-size: 11px; }
  .statusBar .statusItem .stValue{ font-size: 15px; }
}

/* Alles, was dbg heißt, ausblenden (Button/Leiste/Badge etc.) */
#dbg, .dbg, [data-dbg],
#dbgBtn, .dbgBtn, .dbg-button, .btn-dbg,
button[title*="dbg" i], a[title*="dbg" i]{
  display: none !important;
}

/* Abstand Status → Pitch (nur wenn gestartet) enger machen */
body.started header{ margin-bottom: 0 !important; }

body.started header .statusBar{
  margin-bottom: 4px !important;   /* vorher evtl. größer */
}

body.started #roundTitle{
  margin-top: 0 !important;        /* Titel direkt an Status ran */
}

/* Falls bei dir der Container selbst oben noch Luft hat: */
body.started #scoreboardView,
body.started .scoreboardWrap{
  margin-top: 0 !important;
  padding-top: 0 !important;       /* nur falls nötig */
}
/* --- Minimaler Abstand Status → Pitch NUR wenn gestartet --- */
body.started header{ margin-bottom:0 !important; padding-bottom:0 !important; }

body.started header .statusBar{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

body.started #roundTitle{
  margin:0 !important;
  padding:0 !important;
}

body.started #scoreboardView,
body.started .scoreboardWrap,
body.started .pitch{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Falls noch irgendwo Restluft bleibt: leicht „hochziehen“ */
body.started #scoreboardView{ margin-top:-66px !important; }  /* bei Bedarf -4px…-10px feinjustieren */

/* HOWTO-Card */
.howto.card.lightPanel{
  margin-top: 12px;
  border-radius: 16px;
  padding: 14px 16px;
}

.howto h2{
  margin: 0 0 8px;
  font-size: clamp(18px, 3.8vw, 22px);
  font-weight: 900;
}

.howto .steps{
  margin: 0 0 10px 18px;
  padding: 0;
}
.howto .steps li{
  margin: 4px 0;
  line-height: 1.35;
}

/* Zwei kleine Boxen nebeneinander (mobil 1-spaltig) */
.howto .howto-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 700px){
  .howto .howto-grid{ grid-template-columns: 1fr; }
}

.howto .howto-box{
  background: #fff;
  border: 1px solid var(--lightLine);
  border-radius: 12px;
  padding: 10px 12px;
}
.howto .howto-box h3{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--lightText);
}
.howto .howto-box ul{
  margin: 0;
  padding-left: 16px;
}
.howto .howto-box li{
  margin: 3px 0;
  color: #333;
}
/* Tipps-/HowTo-Blöcke nur vor dem Start anzeigen */
body.started #howto,
body.started #miniHowto {
  display: none !important;
}
/* Fußball-Emoji rechts neben "Goool!" sichtbar machen */
header .headerTop h1{
  position: relative !important;
  display: inline-block !important;
  padding-right: 38px !important;   /* Platz fürs Emoji */
  overflow: visible !important;
}

/* Emoji statt altem ::after-Background */
header .headerTop h1::after{
  content: "⚽";
  position: absolute;
  right: 0;
  top: 0.05em;                      /* optisch sauber ausgerichtet */
  font-size: 26px;
  line-height: 1;
  color: #fff !important;           /* eigene Farbe – unabhängig vom transparenten H1 */
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  z-index: 5;
  pointer-events: none;
  background: none !important;      /* falls zuvor ein SVG-Background gesetzt war */
}

/* Kleiner auf sehr schmalen Screens */
@media (max-width: 420px){
  header .headerTop h1{ padding-right: 30px !important; }
  header .headerTop h1::after{ font-size: 22px; }
}
/* Emoji direkt ohne Abstand an "Goool!" kleben */
header .headerTop h1{
  position: relative !important;
  display: inline-block !important;
  padding-right: 0 !important;   /* kein Platz für Icon rechts */
}

header .headerTop h1::after{
  content: "⚽";
  display: inline-block;          /* inline statt absolute */
  position: static !important;
  margin-left: 0 !important;      /* wirklich kein Extra-Abstand */
  font-size: 0.5em;              /* optisch passend – gern anpassen */
  line-height: 1;
  color: #fff !important;         /* eigenes Weiß, da H1 text-transparent ist */
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
  transform: translateY(-0.05em); /* minimal anheben (Feintuning) */
}

/* Falls es auf Miniscreens zu groß wirkt */
@media (max-width: 420px){
  header .headerTop h1::after{ font-size: 0.9em; }
}
/* EINDEUTIGE, letzte Regel: Ball direkt hinter "Goool!", Größe steuerbar */
header .headerTop h1{
  display:inline !important;
  padding-right:0 !important;
}

header .headerTop h1::after{
  content:"⚽";
  position:static !important;     /* inline neben dem Text */
  display:inline-block !important;
  margin-left:0 !important;       /* wirklich kein Abstand */
  line-height:1;
  color:#fff !important;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
  font-size: 0.7em !important;    /* <- HIER Größe ändern (z.B. 0.9em/1.2em) */
}header .headerTop h1 .pill{ 
  box-shadow: 0 6px 18px rgba(200,0,0,.28) !important;  // nur außen, kein inset
}
/* Badge: dunkelgrüner Verlauf, keine Ränder/Innen-Schatten */
header .headerTop h1 .pill{
  background: linear-gradient(180deg, #000000 0%, #0d382c 78%, #134838 100%) !important;
  color: #fff !important;
  font-weight: 400 !important;        /* „dünn“ */
  letter-spacing: .3px;
  border: none !important;
  box-shadow: none !important;        /* kein Rand/Lichtsaum */
  backdrop-filter: none !important;   /* keine Glas-Unschärfe mehr */
  -webkit-backdrop-filter: none !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);  /* nur leichter Außen-Schimmer fürs Weiß */
}
/* GOOOL!-Overlay: größer & etwas transparenter */
.goalOverlay .txt{
  font-size: clamp(102px, 30vw, 350px) !important;      /* GRÖSSE: min | viewport | max */
  color: rgba(255, 255, 0, .578) !important;            /* TRANSPARENZ über RGBA-Gelb */
  text-shadow: 0 2px 0 rgba(0,0,0,.55),
               0 8px 30px rgba(0,0,0,.40);            /* optional: etwas softere Schatten */
}
/* GOOOL!-Overlay: Größe & Transparenz zentral steuern – egal ob Textknoten oder ::after */
#goalOverlay .txt,
#goalOverlay .txt::before,
#goalOverlay .txt::after,
.goalOverlay .txt,
.goalOverlay .txt::before,
.goalOverlay .txt::after{
  font-size: clamp(96px, 26vw, 280px) !important;  /* hier anpassen */
  color: rgba(255,255,0,.78) !important;           /* Transparenz über Alpha */
  line-height: 0.92 !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 8px 30px rgba(0,0,0,.40) !important;
}

/* Falls irgendwo ein transform die Größe beeinflusst: neutralisieren */
#goalOverlay .txt, .goalOverlay .txt{
  transform: none !important;
}

/* Sicherheitshalber: nicht von Eltern „herunterskaliert“ werden */
#goalOverlay, .goalOverlay{
  font-size: inherit !important;
  margin-top:-150px      /* einfach
}

/* GOOOL!-Overlay: größer & etwas transparenter */
.goalOverlay .txt{
  font-size: clamp(102px, 30vw, 350px) !important;      /* GRÖSSE: min | viewport | max */
  color: rgba(255, 255, 0, .578) !important;            /* TRANSPARENZ über RGBA-Gelb */
  text-shadow: 0 2px 0 rgba(0,0,0,.55),
               0 8px 30px rgba(0,0,0,.40);            /* optional: etwas softere Schatten */
}
/* GOOOL!-Overlay: Größe & Transparenz zentral steuern – egal ob Textknoten oder ::after */
#goalOverlay .txt,
#goalOverlay .txt::before,
#goalOverlay .txt::after,
.goalOverlay .txt,
.goalOverlay .txt::before,
.goalOverlay .txt::after{
  font-size: clamp(96px, 26vw, 280px) !important;  /* hier anpassen */
  color: rgba(255,255,0,.78) !important;           /* Transparenz über Alpha */
  line-height: 0.92 !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.55), 0 8px 30px rgba(0,0,0,.40) !important;
}

/* Falls irgendwo ein transform die Größe beeinflusst: neutralisieren */
#goalOverlay .txt, .goalOverlay .txt{
  transform: none !important;
}

/* Sicherheitshalber: nicht von Eltern „herunterskaliert“ werden */
#goalOverlay, .goalOverlay{
  font-size: inherit !important;
  margin-top:-150px      /* einfach
  }

/* === Tabs unten: mobiler Kompaktmodus === */
@media (max-width: 680px){
  .tabsBar{
    gap: 4px !important;
    padding: 8px clamp(6px, 2vw, 10px) !important;
	max-width:100% !important;
  }
  .tabsBar .push{ display:none !important; } /* freien Abstand entfernen */

  .tabBtn{
    min-width: 74px !important;   /* kleiner als vorher */
    max-width: none !important;
    flex: 1 1 0% !important;       /* darf enger zusammenrücken */
    padding: 8px 8px !important;
    font-size: 13px !important;
    letter-spacing: .05px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
  }

  /* Wenn die Leiste dadurch niedriger wird: Boden-Polster reduzieren */
  .wrap{ padding-bottom: calc(64px + env(safe-area-inset-bottom)) !important; }
}
/* Hilfetexte nur vor dem Start zeigen – robust auf allen Geräten */
body.started #howto,
body.started #miniHowto,
body.started .howto,
body[data-started="1"] #howto,
body[data-started="1"] #miniHowto,
body[data-started="1"] .howto{
  display: none !important;
}