@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,400&family=Inter:wght@400;500;600;700&display=swap');

/* ============================ TOKENS ============================
   Zwei Themes ueber ein Token-System. Struktur-Tokens (Radius, Ease,
   Gruppen-Akzente) sind global. Farb-Tokens stehen als DARK-Standard in
   :root und werden fuer Light in :root[data-theme="light"] ueberschrieben.
   Komponenten weiter unten nutzen ausschliesslich diese Tokens, damit beide
   Themes konsistent bleiben. Umschaltung via data-theme am <html> (siehe app.js).
   ================================================================ */
:root{
  /* Struktur (themenunabhaengig) */
  --radius:20px;
  --radius-sm:13px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1280px;

  /* Gruppen-Akzente A–L – in beiden Themes gleich */
  --gA:#f2a65a; --gB:#e8636e; --gC:#54c8a4; --gD:#6aa6ff;
  --gE:#cf8cf5; --gF:#ff8f5e; --gG:#5ccfe0; --gH:#f0cd5e;
  --gI:#8b8dff; --gJ:#73d784; --gK:#ff7eb6; --gL:#bda3ff;

  /* ---------------- DARK (Standard) ---------------- */
  color-scheme:dark;
  --bg:#080b11;            /* tiefe Tinte */
  --bg-2:#0b0f17;
  --atmo-1:#0e1626;        /* atmosphaerischer Schimmer */
  --atmo-2:#131d18;
  --atmo-3:#0c1320;
  --surface:rgba(255,255,255,.045);   /* Karten-/Glasflaeche */
  --surface-2:rgba(255,255,255,.07);  /* Hover / aktiv */
  --surface-hi:rgba(255,255,255,.10);
  --surface-solid:#0b0f17;            /* solide Kacheln (Statline etc.) */
  --stroke:rgba(255,255,255,.085);
  --stroke-2:rgba(255,255,255,.16);
  --hairline:rgba(255,255,255,.045);  /* feine Tabellen-/Trennlinien */
  --card-top:rgba(255,255,255,.07);   /* oberer Glanz auf Karten */
  --grid-line:rgba(255,255,255,.018); /* Raster im Hintergrund */
  --text:#eef1f7;
  --muted:#98a2b3;
  --faint:#5d6779;
  --on-accent:#06080c;                /* Text auf farbigen Badges */
  --gold:#e7c67d;                     /* Champagner – Titel / Qualifikation */
  --gold-soft:rgba(231,198,125,.14);
  --gold-line:rgba(231,198,125,.4);
  --qual:#5ad6a3;                     /* qualifiziert (Smaragd) */
  --qual-soft:rgba(90,214,163,.13);
  --qual-line:rgba(90,214,163,.4);
  --out:#7b8597;                      /* neutral / ausgeschieden */
  --live:#ff647c;                     /* live / aktuell */
  --live-soft:rgba(255,100,124,.14);
  --live-line:rgba(255,100,124,.45);
  --shadow:0 18px 50px -22px rgba(0,0,0,.85);
  --shadow-lift:0 26px 70px -26px rgba(0,0,0,.9);
  --focus:var(--gold);
  --selection-bg:var(--gold-soft);
  --selection-fg:#fff;
  --header-bg:linear-gradient(180deg,rgba(8,11,17,.82),rgba(8,11,17,.5));
  --nav-bg:rgba(8,11,17,.7);
  --pop-bg:rgba(13,17,24,.96);
  --scrim:rgba(4,6,10,.66);
  --drawer-bg:linear-gradient(180deg,#0d111a,#0a0e15);
  --drawer-head-bg:rgba(13,17,26,.9);
  --map-bg:radial-gradient(120% 90% at 50% 0%,#0f1626,#0a0e16 70%);
  --map-grat:rgba(255,255,255,.05);
  --map-border:rgba(255,255,255,.13);
  --map-label:rgba(255,255,255,.13);
  --pin-stroke:#0a0e16;
}

/* ---------------- LIGHT (editorial, warmes Papier) ----------------
   Kein invertiertes Dark: solide helle Flaechen, ink-Text, tiefere
   Gold-/Smaragd-/Rot-Toene fuer Lesbarkeit auf hellem Grund. */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#ece9e2;
  --bg-2:#ffffff;
  --atmo-1:#e3e9e4;
  --atmo-2:#efe9dd;
  --atmo-3:#e7eaf1;
  --surface:#ffffff;
  --surface-2:#f1eee7;
  --surface-hi:#e9e5db;
  --surface-solid:#ffffff;
  --stroke:rgba(26,32,46,.12);
  --stroke-2:rgba(26,32,46,.2);
  --hairline:rgba(26,32,46,.08);
  --card-top:rgba(255,255,255,.7);
  --grid-line:rgba(26,32,46,.035);
  --text:#1b2331;
  --muted:#566173;
  --faint:#8b94a3;
  --on-accent:#0b0e14;
  --gold:#9a7726;
  --gold-soft:rgba(154,119,38,.12);
  --gold-line:rgba(154,119,38,.34);
  --qual:#1c916a;
  --qual-soft:rgba(28,145,106,.12);
  --qual-line:rgba(28,145,106,.32);
  --out:#7b8597;
  --live:#cf3a52;
  --live-soft:rgba(207,58,82,.1);
  --live-line:rgba(207,58,82,.3);
  --shadow:0 14px 34px -20px rgba(36,42,58,.3);
  --shadow-lift:0 22px 50px -24px rgba(36,42,58,.34);
  --selection-bg:rgba(154,119,38,.18);
  --selection-fg:#1b2331;
  --header-bg:linear-gradient(180deg,rgba(243,241,235,.9),rgba(243,241,235,.62));
  --nav-bg:rgba(240,238,231,.82);
  --pop-bg:rgba(255,255,255,.98);
  --scrim:rgba(38,40,52,.32);
  --drawer-bg:linear-gradient(180deg,#ffffff,#f6f4ee);
  --drawer-head-bg:rgba(252,251,247,.92);
  --map-bg:radial-gradient(120% 90% at 50% 0%,#eef1ed,#e3e7e0 70%);
  --map-grat:rgba(26,32,46,.06);
  --map-border:rgba(26,32,46,.18);
  --map-label:rgba(26,32,46,.22);
  --pin-stroke:#ffffff;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:15px; line-height:1.5; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; overflow-x:hidden;
  transition:background .4s var(--ease), color .4s var(--ease);
}
/* atmosphärischer Hintergrund */
body::before{
  content:""; position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1100px 720px at 78% -8%, var(--atmo-1) 0%, transparent 60%),
    radial-gradient(900px 700px at 8% 4%, var(--atmo-2) 0%, transparent 55%),
    radial-gradient(1200px 900px at 50% 120%, var(--atmo-3) 0%, transparent 60%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg-2) 100%);
}
body::after{ /* feine Rasterstruktur */
  content:""; position:fixed; inset:0; z-index:-1; opacity:.4; pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px; mask-image:radial-gradient(circle at 50% 30%,#000 0%,transparent 80%);
}
::selection{background:var(--selection-bg); color:var(--selection-fg);}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:6px;}
button{font-family:inherit; cursor:pointer;}
.tnum{font-variant-numeric:tabular-nums lining-nums;}
/* Score-/Kennzahlen einheitlich auf Versalziffern mit fester Breite */
.match-row .score,.scard .res,.tie .ln .sc,table.tbl td.pts,.trow .c.pts,
.scrow .gv,.stat .n,.md-score .mid .sc,.tm-stats .s .n,.tm-match .rescol,
.lead-row .g{font-variant-numeric:tabular-nums lining-nums;}

/* ============================ LAYOUT ============================ */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px;}

/* Header */
header.site{position:sticky; top:0; z-index:60;
  backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%);
  background:var(--header-bg);
  border-bottom:1px solid var(--stroke);}
.site-row{display:flex; align-items:center; gap:16px; padding:13px 0;}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit; flex:0 0 auto;}
.crest{width:42px; height:42px; border-radius:13px; position:relative; flex:0 0 auto;
  background:conic-gradient(from 210deg,#1c2740,#0e1320,#243a31,#1c2740);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--shadow); overflow:hidden;}
.crest::before{content:"26"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:'Fraunces',serif; font-weight:600; font-size:17px; color:#e7c67d;
  letter-spacing:-.02em; text-shadow:0 1px 6px rgba(231,198,125,.4);}
.crest::after{content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.22),transparent 55%);}
.brand b{font-family:'Fraunces',serif; font-weight:600; font-size:18px; letter-spacing:-.01em; line-height:1;}
.brand span{display:block; font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; margin-top:3px;}
.brand .sub{display:none;}
@media(min-width:560px){.brand .sub{display:block;}}

.search{margin-left:auto; position:relative; flex:1 1 240px; max-width:340px;}
.search input{width:100%; background:var(--surface); border:1px solid var(--stroke);
  color:var(--text); border-radius:12px; padding:10px 14px 10px 38px; font-size:13.5px;
  transition:border-color .2s,background .2s;}
.search input::placeholder{color:var(--faint);}
.search input:focus{outline:none; border-color:var(--stroke-2); background:var(--surface-2);}
.search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--faint);}
.search-pop{position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:80;
  background:var(--pop-bg); backdrop-filter:blur(24px); border:1px solid var(--stroke-2);
  border-radius:14px; box-shadow:var(--shadow-lift); overflow:hidden; max-height:60vh; overflow-y:auto; display:none;}
.search-pop.open{display:block;}
.search-pop .sr-group{padding:7px 13px 4px; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);}
.search-pop .sr{display:flex; align-items:center; gap:10px; padding:9px 13px; cursor:pointer; border:none; background:none; width:100%; text-align:left; color:var(--text); font-size:13.5px;}
.search-pop .sr:hover,.search-pop .sr.active{background:var(--surface-2);}
.search-pop .sr .fl{font-size:17px;}
.search-pop .sr small{color:var(--faint); margin-left:auto; font-size:11.5px;}
.search-pop .sr-empty{padding:16px 14px; color:var(--faint); font-size:13px;}

/* Theme-Umschalter */
.theme-toggle{flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  border:1px solid var(--stroke); background:var(--surface); color:var(--muted);
  display:grid; place-items:center; transition:color .18s,background .18s,border-color .18s;}
.theme-toggle:hover{color:var(--text); background:var(--surface-2); border-color:var(--stroke-2);}
.theme-toggle svg{width:18px; height:18px;}
.theme-toggle .i-moon{display:none;}
:root[data-theme="light"] .theme-toggle .i-sun{display:none;}
:root[data-theme="light"] .theme-toggle .i-moon{display:block;}

/* Nav */
nav.tabs{position:sticky; top:67px; z-index:55; background:var(--nav-bg);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--stroke);}
.tabs-row{display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding:8px 0;}
.tabs-row::-webkit-scrollbar{display:none;}
.tab{flex:0 0 auto; border:none; background:none; color:var(--muted); padding:8px 14px; border-radius:10px;
  font-size:13.5px; font-weight:500; white-space:nowrap; transition:color .18s,background .18s; position:relative;}
.tab:hover{color:var(--text);}
.tab[aria-selected="true"]{color:var(--text); background:var(--surface-2);}
.tab[aria-selected="true"]::after{content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,var(--gold),transparent);}

main{padding:30px 0 90px; min-height:60vh;}
.view{display:none; animation:fade .4s var(--ease);}
.view.active{display:block;}
@keyframes fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@media(prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important;}}

/* Section heads */
.sec-head{display:flex; align-items:flex-end; gap:14px; margin:6px 0 18px; flex-wrap:wrap;}
.sec-head h2{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(22px,3.4vw,32px); letter-spacing:-.02em; margin:0; line-height:1;}
.sec-head .eyebrow{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin-bottom:7px;}
.sec-head p{color:var(--muted); font-size:13.5px; margin:0; max-width:46ch;}
.sec-head .spacer{flex:1;}

/* Glass card base */
.card{background:var(--surface); border:1px solid var(--stroke); border-radius:var(--radius);
  box-shadow:var(--shadow); position:relative; backdrop-filter:blur(8px);}
.card::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 var(--card-top);}

/* chips / pills */
.pill{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; letter-spacing:.03em;
  padding:3px 9px; border-radius:999px; border:1px solid var(--stroke-2); color:var(--muted);}
.pill.qual{color:var(--qual); border-color:var(--qual-line); background:var(--qual-soft);}
.pill.gold{color:var(--gold); border-color:var(--gold-line); background:var(--gold-soft);}
.pill.live{color:var(--live); border-color:var(--live-line); background:var(--live-soft);}
.pill.out{color:var(--out); border-color:var(--stroke-2);}
.dot{width:7px; height:7px; border-radius:50%; display:inline-block;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
.dot.live{background:var(--live); box-shadow:0 0 0 0 rgba(255,100,124,.5); animation:pulse 1.6s infinite;}

/* =================== OVERVIEW =================== */
.hero{position:relative; overflow:hidden; padding:30px; margin-bottom:22px;}
.hero .glow{position:absolute; width:520px; height:520px; right:-120px; top:-200px; border-radius:50%;
  background:radial-gradient(circle,var(--gold-soft),transparent 65%); pointer-events:none;}
.hero h1{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(30px,6vw,58px); line-height:.98;
  letter-spacing:-.03em; margin:14px 0 0; max-width:18ch;}
.hero h1 em{font-style:italic; color:var(--gold);}
.hero .lead{color:var(--muted); font-size:15px; margin:16px 0 0; max-width:54ch;}
.stand{display:inline-flex; align-items:center; gap:8px; font-size:12px; color:var(--muted);
  border:1px solid var(--stroke-2); border-radius:999px; padding:5px 12px 5px 10px; background:var(--surface);}
.statline{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:26px;
  background:var(--stroke); border:1px solid var(--stroke); border-radius:16px; overflow:hidden;}
@media(min-width:680px){.statline{grid-template-columns:repeat(4,1fr);}}
@media(min-width:980px){.statline{grid-template-columns:repeat(6,1fr);}}
.stat{background:var(--surface-solid); padding:16px 16px 14px;}
.stat .n{font-family:'Fraunces',serif; font-size:30px; font-weight:500; letter-spacing:-.02em; line-height:1;}
.stat .l{font-size:11px; color:var(--muted); margin-top:6px; letter-spacing:.04em;}
.stat .n.gold{color:var(--gold);} .stat .n.qual{color:var(--qual);}

.ov-grid{display:grid; gap:18px; grid-template-columns:1fr;}
@media(min-width:900px){.ov-grid{grid-template-columns:1.4fr 1fr;}}
.panel{padding:20px;}
.panel h3{font-family:'Fraunces',serif; font-weight:500; font-size:18px; margin:0 0 4px; letter-spacing:-.01em;}
.panel .ph{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.panel .ph .spacer{flex:1;}
.mini-link{font-size:12px; color:var(--gold); background:none; border:none; padding:0;}
.mini-link:hover{text-decoration:underline;}

/* upcoming list */
.match-row{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:13px;
  border:1px solid transparent; transition:background .16s,border-color .16s; cursor:pointer; width:100%; background:none; color:inherit; text-align:left;}
.match-row:hover{background:var(--surface); border-color:var(--stroke);}
.match-row .when{flex:0 0 56px; font-size:11px; color:var(--muted); line-height:1.25;}
.match-row .when b{display:block; color:var(--text); font-size:12.5px; font-weight:600;}
.match-row .side{display:flex; align-items:center; gap:8px; flex:1; min-width:0;}
.match-row .side.h{justify-content:flex-end; text-align:right;}
.match-row .side .nm{font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.match-row .fl{font-size:18px; line-height:1; flex:0 0 auto;}
.match-row .score{flex:0 0 auto; font-family:'Fraunces',serif; font-weight:600; font-size:16px; letter-spacing:.02em; min-width:52px; text-align:center;}
.match-row .vs{flex:0 0 auto; font-size:11px; color:var(--faint); min-width:52px; text-align:center; letter-spacing:.06em;}
.match-row .gtag{flex:0 0 auto; font-size:10px; font-weight:700; width:20px; height:20px; display:grid; place-items:center; border-radius:7px; color:var(--on-accent);}

/* leader board mini */
.lead-row{display:flex; align-items:center; gap:11px; padding:8px 4px;}
.lead-row .rk{font-family:'Fraunces',serif; font-size:14px; color:var(--faint); width:18px; text-align:center;}
.lead-row .fl{font-size:18px;}
.lead-row .nm{font-size:13.5px; font-weight:500;}
.lead-row .tm{font-size:11.5px; color:var(--faint); margin-left:auto;}
.lead-row .g{font-family:'Fraunces',serif; font-weight:600; font-size:16px; color:var(--gold); width:26px; text-align:right;}
.lead-row.head .g{color:var(--gold);}

/* =================== COCKPIT (Übersicht) =================== */
.cockpit{margin-bottom:22px;}
.cockpit-top{display:grid; gap:16px; grid-template-columns:1fr; margin-bottom:16px;}
@media(min-width:900px){.cockpit-top{grid-template-columns:1.05fr 1fr;}}

/* Turnier-Puls */
.pulse{padding:24px 24px 22px; position:relative; overflow:hidden;}
.pulse-glow{position:absolute; width:360px; height:360px; right:-110px; top:-150px; border-radius:50%;
  background:radial-gradient(circle,var(--gold-soft),transparent 65%); pointer-events:none;}
.pulse-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; position:relative;}
.pulse-eyebrow{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);}
.pulse-head .stand{margin-left:auto;}
.pulse-title{font-family:'Fraunces',serif; font-weight:500; font-size:clamp(22px,3vw,29px); letter-spacing:-.02em; margin:13px 0 0; line-height:1.04;}
.pulse-title em{font-style:italic; color:var(--gold);}
.pulse-lead{color:var(--muted); font-size:13px; margin:9px 0 0; max-width:44ch; line-height:1.5;}
.pulse-metrics{display:grid; gap:15px; margin-top:22px; position:relative;}
.pmetric .pm-top{display:flex; align-items:baseline; gap:10px;}
.pmetric .pm-label{font-size:12px; color:var(--muted); letter-spacing:.02em;}
.pmetric .pm-val{margin-left:auto; font-family:'Fraunces',serif; font-weight:600; font-size:21px; letter-spacing:-.01em; color:var(--text); font-variant-numeric:tabular-nums lining-nums;}
.pmetric .pm-val small{font-size:12px; color:var(--faint); font-family:'Inter'; font-weight:500;}
.pmetric .pm-bar{height:6px; border-radius:4px; background:var(--surface-2); overflow:hidden; margin-top:8px; border:1px solid var(--hairline);}
.pmetric .pm-bar i{display:block; height:100%; border-radius:4px; background:var(--gold); transition:width .5s var(--ease);}
.pmetric.m-prog .pm-val{color:var(--gold);}
.pmetric.m-qual .pm-val{color:var(--qual);} .pmetric.m-qual .pm-bar i{background:var(--qual);}
.pmetric.m-open .pm-val{color:var(--live);} .pmetric.m-open .pm-bar i{background:var(--live);}

/* Gruppen-Matrix */
.matrix{padding:18px 18px 16px;}
.matrix-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.matrix-head h3{font-family:'Fraunces',serif; font-weight:500; font-size:17px; margin:0; letter-spacing:-.01em;}
.matrix-head .mx-sub{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);}
.matrix-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
@media(min-width:480px){.matrix-grid{grid-template-columns:repeat(4,1fr);}}
.mtile{position:relative; border:1px solid var(--stroke); border-radius:12px; padding:10px 11px 9px;
  cursor:pointer; background:var(--surface); color:inherit; text-align:left; overflow:hidden;
  transition:transform .18s var(--ease),border-color .18s,box-shadow .18s; display:block;}
.mtile:hover{transform:translateY(-2px); border-color:var(--stroke-2); box-shadow:var(--shadow);}
.mtile::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--acc);}
.mtile .mt-top{display:flex; align-items:center; gap:7px;}
.mtile .mt-badge{width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-family:'Fraunces',serif;
  font-weight:600; font-size:13px; color:var(--on-accent); background:var(--acc);}
.mtile .mt-stat{margin-left:auto; width:8px; height:8px; border-radius:50%; flex:0 0 auto;}
.mtile .mt-stat.done{background:var(--qual);}
.mtile .mt-stat.live{background:var(--live); box-shadow:0 0 0 3px var(--live-soft); animation:pulse 1.6s infinite;}
.mtile .mt-stat.idle{background:var(--faint);}
.mtile .mt-leader{display:flex; align-items:center; gap:6px; margin-top:9px; min-width:0;}
.mtile .mt-leader .fl{font-size:15px; flex:0 0 auto;}
.mtile .mt-leader .nm{font-size:12px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mtile .mt-leader .nm.idle{color:var(--faint); font-style:italic; font-weight:400;}
.mtile .mt-prog{font-size:10.5px; color:var(--faint); margin-top:4px; letter-spacing:.02em; font-variant-numeric:tabular-nums;}
.mx-legend{display:flex; gap:13px; flex-wrap:wrap; align-items:center; margin-top:14px; font-size:10.5px; color:var(--muted);}
.mx-legend span{display:inline-flex; align-items:center; gap:5px;}
.mx-legend i{width:8px; height:8px; border-radius:50%; display:inline-block;}

/* Next Decision Board */
.decision{padding:18px 20px 20px;}
.decision-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px;}
.decision-head h3{font-family:'Fraunces',serif; font-weight:500; font-size:18px; margin:0; letter-spacing:-.01em;}
.decision-head .sub{font-size:12px; color:var(--muted);}
.decision-head .mini-link{margin-left:auto;}
.decision-grid{display:grid; gap:9px; grid-template-columns:1fr; margin-top:13px;}
@media(min-width:620px){.decision-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.decision-grid{grid-template-columns:1fr 1fr 1fr;}}
.dcard{display:flex; flex-direction:column; gap:10px; border:1px solid var(--stroke); border-radius:13px;
  padding:12px 13px; cursor:pointer; background:var(--surface); color:inherit; text-align:left;
  transition:transform .18s var(--ease),border-color .18s,box-shadow .18s;}
.dcard:hover{transform:translateY(-2px); border-color:var(--stroke-2); box-shadow:var(--shadow);}
.dcard .dc-top{display:flex; align-items:center; gap:8px;}
.dcard .dc-when{font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums;}
.dcard .dc-when b{color:var(--text); font-weight:600;}
.dcard .dc-top .gtag{margin-left:auto; flex:0 0 auto; font-size:10px; font-weight:700; width:20px; height:20px; display:grid; place-items:center; border-radius:7px; color:var(--on-accent);}
.dcard .dc-teams{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:9px; min-width:0;}
.dcard .dc-side{display:flex; align-items:center; gap:7px; min-width:0;}
.dcard .dc-side.a{justify-content:flex-end; text-align:right;}
.dcard .dc-side .fl{font-size:18px; flex:0 0 auto;}
.dcard .dc-side .nm{font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.dcard .dc-vs{font-size:11px; color:var(--faint); letter-spacing:.08em;}
.dcard .dc-foot{font-size:11px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
/* K.-o.-/Final-Varianten der Decision-Card */
.dcard .dc-round{margin-left:auto; flex:0 0 auto; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); font-weight:600;}
.dcard .dc-side .nm.tbd{color:var(--faint); font-style:italic; font-weight:400;}

/* Text-Metrik im Puls (z. B. „Aktuelle Runde", „Topscorer") */
.pmetric.is-text .pm-val.txt{font-family:'Inter',sans-serif; font-weight:600; font-size:14px; color:var(--text); letter-spacing:0;}

/* Qualifizierte Teams / Finalstadien als Chips */
.qual-grid{display:grid; grid-template-columns:1fr 1fr; gap:7px;}
.qual-grid.scroll{max-height:330px; overflow-y:auto; padding-right:4px; scrollbar-width:thin;}
.qchip{display:flex; align-items:center; gap:8px; border:1px solid var(--stroke); border-radius:10px;
  padding:7px 9px; background:var(--surface); color:inherit; text-align:left; cursor:pointer; min-width:0;
  transition:border-color .15s,background .15s,transform .15s;}
.qchip:hover{border-color:var(--stroke-2); background:var(--surface-2); transform:translateY(-1px);}
.qchip .fl{font-size:16px; flex:0 0 auto;}
.qchip .nm{font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1;}
.qchip .tag{margin-left:auto; flex:0 0 auto; font-size:9px; font-weight:700; width:16px; height:16px; display:grid; place-items:center; border-radius:5px; color:var(--on-accent);}
.qchip .qmeta{margin-left:auto; flex:0 0 auto; font-size:10px; font-weight:600; color:var(--faint); letter-spacing:.04em;}

/* =================== K.-O.-ZENTRALE (Overview, Phase knockout) =================== */
.ko-center .pulse-title.ko-title{font-size:clamp(20px,2.6vw,26px); margin-top:11px;}
/* prominenter CTA zum vollständigen K.-o.-Baum */
.cta-bracket{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; margin-top:20px;
  border:1px solid var(--gold-line); background:var(--gold-soft); color:var(--gold);
  font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; letter-spacing:.01em;
  padding:12px 16px; border-radius:12px; transition:background .18s,border-color .18s,color .18s,transform .18s;}
.cta-bracket:hover{background:var(--gold); color:var(--on-accent); border-color:var(--gold); transform:translateY(-1px);}
.cta-bracket .cta-arrow{font-size:15px; line-height:1;}

/* Weg zum Finale – verdichteter Pfad-Stepper */
.path-card{padding:18px 18px 16px;}
.path-list{list-style:none; margin:8px 0 0; padding:0;}
.path-step{display:flex; align-items:flex-start; gap:12px; padding:8px 0; position:relative;}
.path-step::before{content:""; position:absolute; left:6px; top:22px; bottom:-8px; width:2px; background:var(--hairline);}
.path-step:last-child::before{display:none;}
.path-step .ps-dot{flex:0 0 auto; width:14px; height:14px; border-radius:50%; margin-top:2px; z-index:1;
  border:2px solid var(--stroke-2); background:var(--surface);}
.path-step.current .ps-dot{border-color:var(--gold); background:var(--gold); box-shadow:0 0 0 4px var(--gold-soft);}
.path-step .ps-body{display:flex; flex-direction:column; gap:2px; min-width:0;}
.path-step .ps-round{font-family:'Fraunces',serif; font-weight:500; font-size:14.5px; color:var(--text); letter-spacing:-.01em;}
.path-step.current .ps-round{color:var(--gold);}
.path-step .ps-meta{font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums;}
.path-final{margin-top:12px; padding-top:11px; border-top:1px solid var(--hairline); font-size:12px; color:var(--muted);}

/* Qualifizierte Teams – Untersektionen + Rangmarker */
.qual-sub{display:flex; align-items:center; gap:8px; margin:16px 0 9px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.qual-sub:first-of-type{margin-top:4px;}
.qual-sub .qs-n{margin-left:auto; font-size:10px; color:var(--faint); letter-spacing:.04em;}
.qchip .qrank{flex:0 0 auto; font-size:10.5px; font-weight:700; width:15px; text-align:center; font-variant-numeric:tabular-nums;}
.qchip.r1 .qrank{color:var(--gold);}
.qchip.r2 .qrank{color:var(--muted);}
.qual-grid.thirds .qchip{border-style:dashed;}
.qual-grid.thirds .qchip .qrank{color:var(--qual);}

/* KO-Spielkarte – Status-Pille */
.dcard .dc-foot.ko{display:flex; align-items:center; gap:8px;}
.dcard .dc-foot.ko .dc-city{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dcard .dc-status{flex:0 0 auto; font-size:9.5px; font-weight:600; letter-spacing:.04em; padding:2px 8px; border-radius:999px; border:1px solid var(--stroke-2); color:var(--muted);}
.dcard .dc-status.live{color:var(--live); border-color:var(--live-line); background:var(--live-soft);}

/* Gruppen-Archiv-Streifen */
.archive-strip{padding:14px 18px 16px;}
.arch-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.arch-title{font-family:'Fraunces',serif; font-weight:500; font-size:15px; letter-spacing:-.01em;}
.arch-sub{font-size:12px; color:var(--muted);}
.arch-chips{display:flex; gap:7px; overflow-x:auto; scrollbar-width:thin; padding-bottom:4px;}
.arch-chip{flex:0 0 auto; display:flex; align-items:center; gap:6px; border:1px solid var(--stroke); border-radius:10px;
  padding:6px 10px 6px 6px; background:var(--surface); color:inherit; cursor:pointer; transition:border-color .15s,background .15s;}
.arch-chip:hover{border-color:var(--stroke-2); background:var(--surface-2);}
.arch-chip .ag{width:18px; height:18px; border-radius:6px; display:grid; place-items:center; font-family:'Fraunces',serif; font-weight:600; font-size:10.5px; color:var(--on-accent); flex:0 0 auto;}
.arch-chip .fl{font-size:14px;}
.arch-chip .nm{font-size:12px; font-weight:500; white-space:nowrap;}

/* Abstände zwischen den KO-Zentrale-Sektionen */
.ko-center > .decision, .ko-center > .qual-card{margin-bottom:16px;}

/* =================== GROUPS =================== */
.groups-grid{display:grid; gap:16px; grid-template-columns:1fr;}
@media(min-width:620px){.groups-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.groups-grid{grid-template-columns:1fr 1fr 1fr;}}
.gcard{padding:0; overflow:hidden; cursor:pointer; transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;}
.gcard:hover{transform:translateY(-3px); border-color:var(--stroke-2); box-shadow:var(--shadow-lift);}
.gcard .gc-head{display:flex; align-items:center; gap:11px; padding:14px 16px 12px; position:relative;}
.gcard .gc-head::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--acc);}
.gcard .gbadge{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; font-family:'Fraunces',serif;
  font-weight:600; font-size:15px; color:var(--on-accent); background:var(--acc); box-shadow:0 4px 14px -4px var(--acc);}
.gcard .gc-head .t{font-size:12px; color:var(--muted); letter-spacing:.04em;}
.gcard .gc-head .t b{display:block; font-size:14px; color:var(--text); font-family:'Fraunces',serif; font-weight:500; letter-spacing:-.01em;}
.gcard .gc-head .st{margin-left:auto;}
table.tbl{width:100%; border-collapse:collapse; font-size:12.5px;}
table.tbl th{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:600; padding:6px 4px; text-align:center; border-bottom:1px solid var(--stroke);}
table.tbl th.l{text-align:left; padding-left:16px;}
table.tbl td{padding:8px 4px; text-align:center; border-bottom:1px solid var(--hairline);}
table.tbl tr:last-child td{border-bottom:none;}
table.tbl td.l{text-align:left; padding-left:16px;}
table.tbl .pos{color:var(--faint); font-family:'Fraunces',serif; font-size:12px; width:26px;}
table.tbl .team{display:flex; align-items:center; gap:8px; font-weight:500; color:var(--text);}
table.tbl .team .fl{font-size:16px;}
table.tbl td.pts{font-weight:700; color:var(--text); font-family:'Fraunces',serif; font-size:14px;}
table.tbl .gd.pos-v{color:var(--qual);} table.tbl .gd.neg-v{color:var(--live);}
table.tbl tr.q1 td:first-child,table.tbl tr.q2 td:first-child{position:relative;}
table.tbl tr.q1 .pos::before,table.tbl tr.q2 .pos::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:2px; background:var(--qual);}
table.tbl tr.q3 .pos::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:2px; background:var(--gold);}
.gcard .gc-foot{padding:9px 16px 13px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; border-top:1px solid var(--stroke);}
.gleg{display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:11px; color:var(--muted); margin-bottom:16px;}
.gleg span{display:inline-flex; align-items:center; gap:6px;}
.gleg i{width:9px; height:9px; border-radius:3px; display:inline-block;}

/* =================== SCHEDULE =================== */
.filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:18px;}
.seg{display:inline-flex; background:var(--surface); border:1px solid var(--stroke); border-radius:11px; padding:3px; gap:2px;}
.seg button{border:none; background:none; color:var(--muted); padding:6px 12px; border-radius:8px; font-size:12.5px; font-weight:500; transition:background .15s,color .15s;}
.seg button[aria-pressed="true"]{background:var(--surface-2); color:var(--text);}
select.fsel{background:var(--surface); border:1px solid var(--stroke); color:var(--text); border-radius:10px; padding:7px 30px 7px 12px; font-size:12.5px; font-family:inherit;
  appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2398a2b3' stroke-width='2'><path d='M2 4l4 4 4-4'/></svg>"); background-repeat:no-repeat; background-position:right 11px center;}
:root[data-theme="light"] select.fsel{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23566173' stroke-width='2'><path d='M2 4l4 4 4-4'/></svg>");}
select.fsel:focus{outline:none; border-color:var(--stroke-2);}
.daygroup{margin-bottom:26px;}
.dayhead{display:flex; align-items:center; gap:12px; margin:0 0 10px; padding-bottom:8px; border-bottom:1px solid var(--stroke);}
.dayhead h4{font-family:'Fraunces',serif; font-weight:500; font-size:16px; margin:0; letter-spacing:-.01em;}
.dayhead .cnt{font-size:11px; color:var(--faint); margin-left:auto;}
.sched-list{display:grid; gap:7px;}
.scard{display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; transition:border-color .18s,box-shadow .18s,transform .18s;}
.scard:hover{border-color:var(--stroke-2); box-shadow:var(--shadow); transform:translateY(-1px);}
.scard .tm-c{display:flex; align-items:center; gap:8px; min-width:0;}
.scard .tm-c.h{justify-content:flex-end; text-align:right;}
.scard .matchteams{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; min-width:0;}
.scard .nm{font-size:14px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.scard .fl{font-size:19px; flex:0 0 auto;}
.scard .res{font-family:'Fraunces',serif; font-weight:600; font-size:18px; min-width:62px; text-align:center; letter-spacing:.03em;}
.scard .res.open{font-size:11px; color:var(--faint); font-family:'Inter'; font-weight:600; letter-spacing:.06em;}
.scard .ko{font-size:11px; color:var(--muted); line-height:1.3; text-align:left; min-width:74px;}
.scard .ko b{color:var(--text); display:block; font-size:12px;}
.scard .meta{font-size:11px; color:var(--faint); text-align:right; line-height:1.35; max-width:150px;}
.scard .meta b{color:var(--muted); font-weight:600;}
@media(max-width:640px){
  .scard{grid-template-columns:1fr; gap:9px;}
  .scard .meta{text-align:left;}
  .scard .ko{display:none;}
}

/* =================== BRACKET =================== */
.bracket-scroll{overflow-x:auto; padding-bottom:14px; scrollbar-width:thin;}
.bracket{display:flex; gap:26px; min-width:1180px; padding:4px;}
.round{display:flex; flex-direction:column; min-width:215px; flex:0 0 auto;}
.round > .rname{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--gold); margin:0 0 14px; padding-left:2px;}
.round .matches{display:flex; flex-direction:column; justify-content:space-around; gap:14px; flex:1;}
.tie{padding:10px 12px; border-radius:13px; cursor:pointer; transition:transform .2s,border-color .2s,box-shadow .2s; background:var(--surface); border:1px solid var(--stroke);}
.tie:hover{transform:translateY(-2px); border-color:var(--stroke-2); box-shadow:var(--shadow);}
.tie .mno{font-size:9.5px; letter-spacing:.1em; color:var(--faint); margin-bottom:6px; display:flex; gap:6px; align-items:center;}
.tie .mno .v{margin-left:auto; color:var(--muted); letter-spacing:.02em;}
.tie .ln{display:flex; align-items:center; gap:8px; padding:4px 0;}
.tie .ln .fl{font-size:15px; width:18px; text-align:center;}
.tie .ln .nm{font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tie .ln .nm.tbd{color:var(--faint); font-style:italic; font-weight:400;}
.tie .ln .sc{margin-left:auto; font-family:'Fraunces',serif; font-weight:600; font-size:13px; color:var(--muted);}
.tie .ln.win .nm{color:var(--qual);}
.tie hr{border:none; border-top:1px solid var(--hairline); margin:2px 0;}
.tie.final{background:linear-gradient(160deg,var(--gold-soft),var(--surface)); border-color:var(--gold-line);}
.tie.final .mno{color:var(--gold);}

/* =================== THIRD PLACE =================== */
.third-wrap{display:grid; gap:18px; grid-template-columns:1fr;}
@media(min-width:880px){.third-wrap{grid-template-columns:1.3fr .9fr;}}
.third-list{padding:8px;}
.trow{display:grid; grid-template-columns:34px 1fr repeat(3,44px) 52px; align-items:center; gap:6px; padding:10px 12px; border-radius:12px; position:relative; transition:background .15s;}
.trow:hover{background:var(--surface);}
.trow.h{padding:6px 12px;}
.trow.h span{font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); text-align:center;}
.trow.h .nm{text-align:left;}
.trow .rk{font-family:'Fraunces',serif; font-size:16px; color:var(--muted); text-align:center;}
.trow .team{display:flex; align-items:center; gap:9px; min-width:0;}
.trow .team .fl{font-size:18px;}
.trow .team .nm{font-size:13.5px; font-weight:500; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.trow .team .gtag{font-size:9px; font-weight:700; width:17px; height:17px; display:grid; place-items:center; border-radius:5px; color:var(--on-accent); flex:0 0 auto;}
.trow .c{font-size:12.5px; text-align:center; color:var(--muted);}
.trow .c.pts{font-family:'Fraunces',serif; font-weight:600; font-size:15px; color:var(--text);}
.trow.in{background:var(--qual-soft);}
.trow.in .rk{color:var(--qual);}
.qual-line{display:flex; align-items:center; gap:10px; margin:6px 8px; color:var(--qual); font-size:11px; letter-spacing:.05em; text-transform:uppercase;}
.qual-line .l{flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--qual),transparent); opacity:.7;}
.third-note{padding:18px 20px;}
.third-note h3{font-family:'Fraunces',serif; font-weight:500; font-size:17px; margin:0 0 10px;}
.third-note p{font-size:13px; color:var(--muted); margin:0 0 10px;}
.third-note .prov{font-size:12px; color:var(--gold); display:flex; gap:8px; align-items:flex-start; padding:11px 13px; border:1px solid var(--gold-line); background:var(--gold-soft); border-radius:11px;}

/* =================== SCORERS =================== */
.scorer-list{display:grid; gap:7px;}

.scrow{display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:12px; padding:12px 16px;}
.scrow .rk{font-family:'Fraunces',serif; font-size:18px; color:var(--faint); text-align:center;}
.scrow.top1 .rk{color:var(--gold);}
.scrow .who{display:flex; align-items:center; gap:11px; min-width:0;}
.scrow .who .fl{font-size:20px;}
.scrow .who .nm{font-size:14.5px; font-weight:600;}
.scrow .who .tm{font-size:12px; color:var(--faint);}
.scrow .goals{display:flex; align-items:center; gap:8px;}
.scrow .bar{width:90px; height:7px; border-radius:4px; background:var(--surface-2); overflow:hidden;}
.scrow .bar i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),#f0d9a3); border-radius:4px;}
.scrow .gv{font-family:'Fraunces',serif; font-weight:600; font-size:19px; width:24px; text-align:right; color:var(--gold);}
@media(max-width:560px){.scrow .bar{width:54px;}}
@media(max-width:560px){.trow{grid-template-columns:24px 1fr 42px 42px 44px; gap:4px; padding:10px 7px;} .trow .c:nth-child(3),.trow.h span:nth-child(3){display:none;} .trow .team .nm{font-size:13px;} .trow .team .gtag{width:16px;height:16px;font-size:8.5px;}}

/* =================== STADIUMS / MAP =================== */
.map-wrap{display:grid; gap:18px; grid-template-columns:1fr;}
@media(min-width:920px){.map-wrap{grid-template-columns:1.5fr 1fr;}}
.mapcard{padding:14px; overflow:hidden;}
.mapsvg{width:100%; height:auto; display:block; border-radius:14px; background:var(--map-bg);}
.mapsvg .grat{stroke:var(--map-grat); stroke-width:.5; fill:none;}
.mapsvg .border{stroke:var(--map-border); stroke-width:1; stroke-dasharray:4 4; fill:none;}
.mapsvg .country-l{fill:var(--map-label); font-size:10px; letter-spacing:.25em; font-family:'Inter'; text-transform:uppercase; font-weight:600;}
.pin{cursor:pointer;}
.pin circle.halo{fill:var(--gold); opacity:.0; transition:opacity .2s;}
.pin:hover circle.halo,.pin.sel circle.halo{opacity:.18;}
.pin circle.dot{stroke:var(--pin-stroke); stroke-width:1.5;}
.pin .lbl{fill:var(--text); font-size:9px; font-weight:600; font-family:'Inter'; opacity:0; transition:opacity .2s; pointer-events:none;}
.pin:hover .lbl,.pin.sel .lbl{opacity:1;}
.venue-list{display:grid; gap:6px; max-height:520px; overflow-y:auto; padding-right:4px; scrollbar-width:thin;}
.vrow{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; cursor:pointer; border:1px solid transparent; background:transparent; color:var(--text); transition:background .15s,border-color .15s;}
.vrow:hover,.vrow.sel{background:var(--surface); border-color:var(--stroke);}
.vrow .vn{min-width:0; flex:1;}
.vrow .vn b{font-size:13.5px; font-weight:600; color:var(--text); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vrow .vn span{font-size:11.5px; color:var(--faint);}
.vrow .flag{font-size:17px;}
.vrow .mc{font-family:'Fraunces',serif; font-size:15px; font-weight:600; color:var(--muted);}
.vrow .mc small{font-size:10px; color:var(--faint); font-family:'Inter'; display:block; text-align:right; font-weight:500;}
.vrow.marquee{background:var(--gold-soft); border-color:var(--gold-line);} .vrow.marquee .mc{color:var(--gold);}

/* =================== MODAL =================== */
.scrim{position:fixed; inset:0; z-index:100; background:var(--scrim); backdrop-filter:blur(7px);
  opacity:0; pointer-events:none; transition:opacity .28s;}
.scrim.open{opacity:1; pointer-events:auto;}
.drawer{position:fixed; z-index:101; top:0; right:0; height:100%; width:min(560px,100%);
  background:var(--drawer-bg); border-left:1px solid var(--stroke-2);
  box-shadow:var(--shadow-lift); transform:translateX(100%); transition:transform .34s var(--ease);
  overflow-y:auto; scrollbar-width:thin;}
.drawer.open{transform:none;}
@media(max-width:560px){.drawer{width:100%; top:auto; bottom:0; height:92vh; border-left:none; border-top:1px solid var(--stroke-2); border-radius:22px 22px 0 0; transform:translateY(100%);} .drawer.open{transform:none;}}
.dr-head{position:sticky; top:0; z-index:2; padding:18px 22px; background:var(--drawer-head-bg); backdrop-filter:blur(14px); border-bottom:1px solid var(--stroke); display:flex; align-items:center; gap:12px;}
.dr-head .ey{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);}
.dr-head h3{font-family:'Fraunces',serif; font-weight:500; font-size:20px; margin:3px 0 0; letter-spacing:-.01em; line-height:1.1;}
.dr-close{margin-left:auto; width:34px; height:34px; border-radius:10px; border:1px solid var(--stroke); background:var(--surface); color:var(--text); font-size:16px; display:grid; place-items:center; flex:0 0 auto;}
.dr-close:hover{background:var(--surface-2);}
.dr-body{padding:20px 22px 40px;}

/* match detail */
.md-score{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; padding:22px 8px 18px;}
.md-score .side{text-align:center;}
.md-score .side .fl{font-size:46px; line-height:1;}
.md-score .side .nm{font-family:'Fraunces',serif; font-size:17px; font-weight:500; margin-top:8px;}
.md-score .mid{text-align:center;}
.md-score .mid .sc{font-family:'Fraunces',serif; font-size:42px; font-weight:600; letter-spacing:.02em; line-height:1;}
.md-score .mid .open{font-size:13px; color:var(--faint); font-weight:600; letter-spacing:.06em;}
.md-score .mid .st{font-size:11px; margin-top:8px;}
.dr-meta{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--stroke); border:1px solid var(--stroke); border-radius:14px; overflow:hidden; margin-top:8px;}
.dr-meta .m{background:var(--surface-solid); padding:13px 15px;}
.dr-meta .m .k{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint);}
.dr-meta .m .v{font-size:13.5px; margin-top:4px; font-weight:500;}
.scorers-box{margin-top:18px;}
.scorers-box h4,.dr-sub{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--gold); margin:22px 0 11px;}
.goal-line{display:flex; align-items:center; gap:9px; font-size:13px; padding:6px 0; color:var(--muted);}
.goal-line .ball{font-size:13px;}
.goal-line b{color:var(--text); font-weight:600;}
.goal-line .mn{margin-left:auto; font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums;}
.empty{color:var(--faint); font-size:13px; padding:8px 0;}

/* team detail */
.tm-hero{display:flex; align-items:center; gap:16px; padding:6px 0 16px;}
.tm-hero .fl{font-size:54px; line-height:1;}
.tm-hero .nm{font-family:'Fraunces',serif; font-size:26px; font-weight:500; letter-spacing:-.01em;}
.tm-hero .gr{font-size:12.5px; color:var(--muted); margin-top:3px;}
.form-row{display:flex; gap:6px; margin:4px 0 4px;}
.fbox{width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:12px; font-weight:700; font-family:'Fraunces',serif;}
.fbox.W{background:var(--qual-soft); color:var(--qual); border:1px solid var(--qual-line);}
.fbox.D{background:var(--surface-2); color:var(--muted); border:1px solid var(--stroke-2);}
.fbox.L{background:var(--live-soft); color:var(--live); border:1px solid var(--live-line);}
.tm-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--stroke); border:1px solid var(--stroke); border-radius:14px; overflow:hidden; margin:14px 0 4px;}
.tm-stats .s{background:var(--surface-solid); padding:13px 8px; text-align:center;}
.tm-stats .s .n{font-family:'Fraunces',serif; font-size:21px; font-weight:600;}
.tm-stats .s .l{font-size:10px; color:var(--faint); margin-top:3px; letter-spacing:.03em;}
.tm-match{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; border:1px solid transparent; cursor:pointer; transition:background .15s;}
.tm-match:hover{background:var(--surface); border-color:var(--stroke);}
.tm-match .rescol{font-family:'Fraunces',serif; font-weight:600; font-size:14px; width:46px; text-align:center;}
.tm-match .rescol.open{font-size:10px; color:var(--faint); font-family:'Inter'; letter-spacing:.05em;}
.tm-match .opp{display:flex; align-items:center; gap:8px; flex:1; min-width:0;}
.tm-match .opp .fl{font-size:17px;} .tm-match .opp .nm{font-size:13.5px;}
.tm-match .res-badge{width:20px; height:20px; border-radius:6px; font-size:11px; font-weight:700; display:grid; place-items:center; font-family:'Fraunces',serif; flex:0 0 auto;}
.tm-match .dt{font-size:11px; color:var(--faint); margin-left:auto; text-align:right;}

/* group detail reuse */
.gd-section{margin-top:6px;}

/* footer */
footer.site{border-top:1px solid var(--stroke); padding:28px 0 60px; color:var(--faint); font-size:12px;}
footer.site .wrap{display:flex; gap:18px; flex-wrap:wrap; align-items:center;}
footer.site a{color:var(--muted); text-decoration:none;}
footer.site a:hover{color:var(--text);}
footer.site .src{flex:1; min-width:240px; line-height:1.6;}

/* favorites star */
.fav{background:none; border:none; color:var(--faint); padding:2px; font-size:15px; line-height:1; transition:color .15s,transform .15s;}
.fav:hover{transform:scale(1.15);}
.fav.on{color:var(--gold);}

.hidden{display:none!important;}
.empty-state{text-align:center; padding:60px 20px; color:var(--faint);}
.empty-state .ic{font-size:30px; opacity:.5; margin-bottom:10px;}
.empty-state b{display:block; color:var(--muted); font-size:15px; font-weight:600; margin-bottom:5px;}