/* =====================================================================
   elftipp — Zentrale Design-Tokens "Mitternacht" + Saira Condensed (WOFF2)
   Quelle der Wahrheit: DESIGN.md §1–§6.
   ---------------------------------------------------------------------
   WICHTIG: Diese Tokens nutzen das Präfix --mn- ("Mitternacht").
   Grund: Bestehende Screens tragen noch eigene Inline-Tokens (Alt-Palette)
   und sollen optisch NICHT umgebaut werden. Neue Komponenten referenzieren
   ausschließlich --mn-*, damit sie garantiert in der neuen Palette erscheinen,
   egal in welcher Seite sie eingebettet sind. Der große Umbau (alle Screens
   auf --mn-* umstellen) kommt später separat.
   ===================================================================== */

/* ── Saira Condensed 700 — selbst gehostet (DSGVO, Beamer-Lesbarkeit) ── */
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/SairaCondensed-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Saira Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/SairaCondensed-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Basis & Flächen (immer dunkel) — DESIGN.md §1 */
  --mn-canvas:    #0B1422;
  --mn-surface:   #14233A;
  --mn-surface2:  #1B2C46;  /* erhöht: Modals/Floating */
  --mn-border:    #25364E;

  /* Text */
  --mn-text:      #EAF0F7;
  --mn-text2:     #8FA0B6;
  --mn-on-blue:   #04324A;  /* dunkelster Ton auf Blau-Fläche */
  --mn-on-gruen:  #0C3B1C;
  --mn-on-gold:   #412402;

  /* Marke / interaktiv = BLAU (Buttons, Links, Aktiv-States, Wortmarke) */
  --mn-blue:      #38BDF8;
  --mn-blue-d:    #0EA5E9;  /* Hover/gedrückt */
  --mn-blue-fl:   #0C2230;  /* dezente Blau-Fläche (Tags/Hinweise) */
  --mn-beamer:    #7DD3FC;  /* beamer-hell: NUR sehr große Live-Zahlen/Akzente */

  /* Erfolg / richtig / Live-Punkte = GRÜN */
  --mn-gruen:     #2DD46A;
  --mn-gruen-d:   #22A957;
  --mn-gruen-fl:  #0E2A1A;

  /* Gewinnen = GOLD (nur Sieger, Captain, Preis-Zonen — Funke, keine Fläche) */
  --mn-gold:      #FBBF24;
  --mn-gold-fl:   #2A2010;

  /* Semantik */
  --mn-warn:      #F59E0B;  /* nur kurzlebige Warn-Hinweise, nie flächig */
  --mn-err:       #EF4444;
  --mn-info:      #38BDF8;  /* = Marke */

  /* Radius — DESIGN.md §4 */
  --mn-r-sm: 6px;   /* Inputs/Tags */
  --mn-r-md: 10px;  /* Buttons/Cards */
  --mn-r-lg: 16px;  /* Modals/Hero */

  /* Spacing (8px-Raster) */
  --mn-xs: 4px; --mn-sm: 8px; --mn-md: 16px; --mn-lg: 24px; --mn-xl: 32px; --mn-2xl: 48px;

  /* Schatten (blau-getönt) — DESIGN.md §4 */
  --mn-sh-1:    0 1px 2px rgba(56,189,248,0.05);
  --mn-sh-card: 0 4px 12px rgba(0,0,0,0.40), 0 1px 3px rgba(56,189,248,0.08);
  --mn-sh-float:0 12px 32px rgba(0,0,0,0.50), 0 2px 8px rgba(56,189,248,0.12);

  /* Schrift */
  --mn-head: 'Saira Condensed','Roboto Condensed','Oswald','Arial Narrow',system-ui,sans-serif;
  --mn-body: system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Transition (nie transition-all) */
  --mn-tr: transform .2s ease, background-color .2s ease, opacity .2s ease, border-color .2s ease, color .2s ease;
}

/* =====================================================================
   Aufstellungs-Builder (Paket A) — Komponenten in Mitternacht-Tokens.
   Eigener .mnb-/.mn-sheet-Namensraum: greift NICHT in bestehende Screens ein.
   ===================================================================== */
.mnb { font-family: var(--mn-body); color: var(--mn-text); }
.mnb h2 { font-family: var(--mn-head); letter-spacing:-.02em; margin:0 0 4px; }
.mnb .mnb-lead { color: var(--mn-text2); margin:0 0 var(--mn-md); line-height:1.5; }

/* Spielwert-Kopf (Live-Punkte = grün) */
.mnb-total { display:flex; align-items:baseline; justify-content:space-between; gap:var(--mn-sm);
  background:var(--mn-surface); border:1px solid var(--mn-border); border-radius:var(--mn-r-md);
  padding:12px 16px; margin-bottom:var(--mn-md); box-shadow:var(--mn-sh-1); }
.mnb-total .lbl { font-family:var(--mn-head); font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:var(--mn-text2); }
.mnb-total .val { font-family:var(--mn-head); font-size:2rem; font-weight:700; line-height:1; color:var(--mn-gruen); }
.mnb-total .val small { font-size:.6rem; color:var(--mn-text2); font-weight:400; letter-spacing:.04em; }

/* Spielfeld */
.mnb-pitch { background:linear-gradient(160deg,#0c2033,#0a1828); border:1px solid var(--mn-border);
  border-radius:var(--mn-r-lg); padding:18px 12px; box-shadow:var(--mn-sh-card); }
.mnb-line { display:flex; flex-direction:column; align-items:center; margin:14px 0; }
.mnb-line-label { color:var(--mn-text2); font-family:var(--mn-head); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.12em; margin-bottom:10px; }
.mnb-row { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; width:100%; }

/* Slot = runder Tap-Knopf (min 44px erfüllt: 84px) */
.mnb-slot { background:none; border:none; padding:0; margin:0; width:auto; min-height:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px; font-family:var(--mn-body);
  transition:var(--mn-tr); }
.mnb-slot:hover { transform:translateY(-2px); }
.mnb-slot:active { transform:scale(.98); }
.mnb-slot:focus-visible { outline:2px solid var(--mn-blue); outline-offset:3px; border-radius:var(--mn-r-md); }
.mnb-circle { position:relative; width:84px; height:84px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; box-shadow:var(--mn-sh-card); }
.mnb-slot.empty .mnb-circle { background:var(--mn-blue-fl); border:2px dashed var(--mn-blue); }
.mnb-slot.empty .mnb-plus { font-family:var(--mn-head); font-size:2.2rem; font-weight:700; color:var(--mn-blue); line-height:1; }
.mnb-slot.filled .mnb-circle { border:2px solid rgba(255,255,255,.18); }
.mnb-num { font-family:var(--mn-head); font-size:2rem; font-weight:700; line-height:1; }
.mnb-name { font-family:var(--mn-body); font-size:.82rem; font-weight:600; color:var(--mn-text); max-width:104px;
  text-align:center; line-height:1.15; }
.mnb-live { position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); background:var(--mn-gruen);
  color:var(--mn-on-gruen); font-family:var(--mn-head); font-weight:700; font-size:.9rem; line-height:1;
  padding:3px 8px; border-radius:20px; box-shadow:var(--mn-sh-card); min-width:22px; text-align:center; }
.mnb-cap { position:absolute; top:-4px; right:-4px; width:26px; height:26px; border-radius:50%;
  background:var(--mn-gold); color:var(--mn-on-gold); font-family:var(--mn-head); font-weight:700;
  font-size:1rem; display:flex; align-items:center; justify-content:center; box-shadow:var(--mn-sh-card);
  border:2px solid var(--mn-canvas); }
.mnb-slot.locked { cursor:default; }
.mnb-slot.locked:hover { transform:none; }
.mnb-slot.locked .mnb-circle:after { content:'\01F512'; position:absolute; top:-4px; left:-4px; font-size:.8rem;
  background:var(--mn-surface2); border-radius:50%; width:22px; height:22px; display:flex; align-items:center;
  justify-content:center; border:2px solid var(--mn-canvas); }

/* Captain-Hinweis + Validierung */
.mnb-hint { font-size:.82rem; color:var(--mn-text2); background:var(--mn-blue-fl); border:1px solid var(--mn-border);
  border-left:3px solid var(--mn-blue); border-radius:var(--mn-r-sm); padding:10px 12px; margin:var(--mn-md) 0; line-height:1.5; }
.mnb-hint b { color:var(--mn-gold); }
.mnb-missing { font-size:.88rem; background:rgba(245,158,11,.12); border:1px solid var(--mn-warn); color:var(--mn-text);
  border-radius:var(--mn-r-sm); padding:11px 12px; margin-top:var(--mn-sm); }
.mnb-missing ul { margin:6px 0 0; padding-left:18px; } .mnb-missing li { margin:2px 0; }
.mnb-saved { font-size:.9rem; min-height:1.1em; margin-top:8px; }
.mnb-saved.ok { color:var(--mn-gruen); } .mnb-saved.err { color:#fca5a5; }

/* Speichern-Button (Marke = blau) */
.mnb-save { font-family:var(--mn-head); font-size:1.1rem; font-weight:700; padding:14px 18px;
  border:none; border-radius:var(--mn-r-md); background:var(--mn-blue); color:var(--mn-on-blue); width:100%;
  margin-top:var(--mn-md); cursor:pointer; min-height:48px; transition:var(--mn-tr); }
.mnb-save:hover { background:var(--mn-blue-d); transform:translateY(-1px); }
.mnb-save:active { transform:scale(.99); }
.mnb-save:focus-visible { outline:2px solid var(--mn-blue); outline-offset:2px; }
.mnb-save:disabled { opacity:.5; cursor:not-allowed; }

/* ── Picker (Bottom-Sheet) ── */
.mn-sheet-backdrop { position:fixed; inset:0; background:rgba(4,8,16,.66); z-index:50; display:flex;
  align-items:flex-end; justify-content:center; opacity:0; transition:opacity .2s ease; }
.mn-sheet-backdrop.open { opacity:1; }
.mn-sheet { background:var(--mn-surface2); border:1px solid var(--mn-border); border-bottom:none;
  border-radius:var(--mn-r-lg) var(--mn-r-lg) 0 0; box-shadow:var(--mn-sh-float); width:100%; max-width:520px;
  max-height:86vh; display:flex; flex-direction:column; transform:translateY(100%); transition:transform .24s ease; }
.mn-sheet-backdrop.open .mn-sheet { transform:translateY(0); }
@media (min-width:560px){ .mn-sheet-backdrop { align-items:center; } .mn-sheet { border-radius:var(--mn-r-lg); border-bottom:1px solid var(--mn-border); } }
.mn-sheet-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 10px; }
.mn-sheet-head h3 { font-family:var(--mn-head); font-size:1.25rem; margin:0; }
.mn-sheet-x { background:none; border:none; color:var(--mn-text2); font-size:1.6rem; line-height:1; width:44px;
  height:44px; border-radius:var(--mn-r-sm); cursor:pointer; transition:var(--mn-tr); }
.mn-sheet-x:hover { color:var(--mn-text); background:var(--mn-blue-fl); }
.mn-sheet-x:focus-visible { outline:2px solid var(--mn-blue); outline-offset:2px; }

.mn-cur { display:flex; align-items:center; gap:10px; padding:0 18px 12px; }
.mn-cur-actions { display:flex; gap:8px; padding:0 18px 12px; flex-wrap:wrap; }
.mn-act { font-family:var(--mn-head); font-weight:700; font-size:.92rem; padding:10px 14px; min-height:44px;
  border-radius:var(--mn-r-sm); border:1px solid var(--mn-border); background:var(--mn-surface); color:var(--mn-text);
  cursor:pointer; transition:var(--mn-tr); }
.mn-act:hover { transform:translateY(-1px); border-color:var(--mn-blue); }
.mn-act:focus-visible { outline:2px solid var(--mn-blue); outline-offset:2px; }
.mn-act.cap { border-color:var(--mn-gold); color:var(--mn-gold); }
.mn-act.cap.on { background:var(--mn-gold); color:var(--mn-on-gold); }
.mn-act.danger:hover { border-color:var(--mn-err); color:#fca5a5; }

/* Flaggen-Chips (Nationen-Filter), horizontal scrollbar bei vielen Teams */
.mn-chips { display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:4px 18px 12px;
  border-bottom:1px solid var(--mn-border); }
.mn-chip { flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--mn-body);
  font-size:.88rem; font-weight:600; padding:8px 12px; min-height:40px; border-radius:20px; cursor:pointer;
  background:var(--mn-surface); border:1.5px solid var(--mn-border); color:var(--mn-text2); white-space:nowrap;
  transition:var(--mn-tr); }
.mn-chip:hover { transform:translateY(-1px); color:var(--mn-text); }
.mn-chip:focus-visible { outline:2px solid var(--mn-blue); outline-offset:2px; }
.mn-chip.active { background:var(--mn-blue-fl); border-color:var(--mn-blue); color:var(--mn-blue); }
.mn-chip .fl { font-size:1.1rem; line-height:1; }

/* Spielerliste */
.mn-plist { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:6px 10px 18px; flex:1 1 auto; min-height:0; }
.mn-cur .nm b { line-height:1.2; } .mn-cur .nm .sub { font-size:.74rem; color:var(--mn-text2); }
.mn-prow { display:flex; align-items:center; gap:12px; width:100%; padding:10px 8px; min-height:56px;
  background:none; border:none; border-radius:var(--mn-r-sm); cursor:pointer; text-align:left; color:var(--mn-text);
  font-family:var(--mn-body); transition:var(--mn-tr); }
.mn-prow:hover { background:var(--mn-blue-fl); }
.mn-prow:focus-visible { outline:2px solid var(--mn-blue); outline-offset:-2px; }
.mn-prow.disabled { opacity:.42; cursor:not-allowed; }
.mn-prow.disabled:hover { background:none; }
.mn-prow .nm { flex:1; min-width:0; }
.mn-prow .nm b { display:block; font-weight:600; line-height:1.2; }
.mn-prow .nm .sub { font-size:.74rem; color:var(--mn-text2); }
.mn-prow .st { font-size:.72rem; font-family:var(--mn-head); font-weight:700; color:var(--mn-text2); }

/* Trikot-Chip (Nationalfarbe + Nummer) — Marken-DNA aus DESIGN.md §2 */
.mn-pchip { flex:0 0 auto; width:42px; height:42px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-family:var(--mn-head); font-weight:700; font-size:1.05rem;
  border:1.5px solid rgba(255,255,255,.16); }
.mn-empty { text-align:center; color:var(--mn-text2); padding:24px 10px; }

/* =====================================================================
   Punkte-Aufschlüsselung (Paket D) — EINE wiederverwendbare Komponente.
   Wird identisch genutzt: eigene „Meine Punkte"-Ansicht + Klick in der Tabelle.
   ===================================================================== */
.mnp { font-family:var(--mn-body); color:var(--mn-text); }
.mnp-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--mn-sm); margin-bottom:var(--mn-md); }
.mnp-head .who { font-family:var(--mn-head); font-size:1.3rem; font-weight:700; }
.mnp-head .tot { font-family:var(--mn-head); font-weight:700; font-size:2rem; line-height:1; color:var(--mn-gold); }
.mnp-head .tot small { font-size:.58rem; color:var(--mn-text2); font-weight:400; letter-spacing:.04em; display:block; text-align:right; }
.mnp-sec { font-family:var(--mn-head); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mn-text2); margin:var(--mn-md) 0 8px; border-bottom:1px solid var(--mn-border); padding-bottom:6px; }
.mnp-sec .sub { color:var(--mn-gruen); }

/* Tipp-Zeile */
.mnp-tip { background:var(--mn-surface); border:1px solid var(--mn-border); border-radius:var(--mn-r-md);
  padding:12px 14px; margin-bottom:10px; box-shadow:var(--mn-sh-1); }
.mnp-tip .top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.mnp-tip .teams { font-family:var(--mn-head); font-weight:700; font-size:1.05rem; flex:1; min-width:0; }
.mnp-tip .res { font-family:var(--mn-head); font-weight:700; color:var(--mn-text2); }
.mnp-tip .res b { color:var(--mn-text); }
.mnp-tip .mine { font-size:.82rem; color:var(--mn-text2); margin-top:4px; }
.mnp-tip .mine b { color:var(--mn-text); }
.mnp-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.mnp-chip { font-size:.76rem; font-family:var(--mn-body); padding:4px 9px; border-radius:20px;
  background:var(--mn-surface2); border:1px solid var(--mn-border); color:var(--mn-text2); display:inline-flex; gap:6px; align-items:center; }
.mnp-chip b { font-family:var(--mn-head); }
.mnp-chip.hit { background:var(--mn-gruen-fl); border-color:var(--mn-gruen); color:var(--mn-gruen); } /* erzielt = grün */
.mnp-chip.miss { opacity:.7; } /* 0 Punkte */
.mnp-tip .tipsum { font-family:var(--mn-head); font-weight:700; font-size:1.1rem; margin-left:8px; }
.mnp-tip .tipsum.pos { color:var(--mn-gruen); } .mnp-tip .tipsum.zero { color:var(--mn-text2); }
.mnp-open { font-size:.8rem; color:var(--mn-text2); margin-top:8px; }

/* Aufstellung im Panel */
.mnp-pl { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--mn-border); }
.mnp-pl .nm { flex:1; min-width:0; font-weight:600; line-height:1.2; }
.mnp-pl .nm .sub { display:block; font-size:.74rem; color:var(--mn-text2); font-weight:400; }
.mnp-pl .lv { font-family:var(--mn-head); font-weight:700; font-size:1.25rem; min-width:2.2rem; text-align:right; color:var(--mn-gruen); }
.mnp-pl.out { opacity:.45; } .mnp-pl.out .lv { color:var(--mn-text2); }
.mnp-pl .cmark { background:var(--mn-gold); color:var(--mn-on-gold); font-family:var(--mn-head); font-weight:700;
  font-size:.66rem; border-radius:4px; padding:1px 5px; margin-left:6px; }
.mnp-foot { font-size:.72rem; color:var(--mn-text2); margin-top:10px; text-align:center; }
.mnp-warn { background:var(--mn-gold-fl); border:1px dashed var(--mn-gold); border-radius:var(--mn-r-sm);
  padding:10px; font-size:.84rem; color:var(--mn-text); margin-top:8px; }