/* ═══════════════════════════════════════════════════════════════════════
   ERCI Game Center – Frontend CSS v1.5
   ═══════════════════════════════════════════════════════════════════════ */
:root{
    --e9:#00246B; --e8:#003F8F; --e7:#1565C0; --e6:#1976D2;
    --e5:#2196F3; --e4:#42A5F5;
    --e1:#E3F2FD; --e0:#F0F7FF;
    --ecard:#FFFFFF; --etxt:#0D1B2E; --etxt2:#4A6080;
    --ebr:#C5D8F0; --ebr2:#ddeaf8;
    --eshadow:0 1px 6px rgba(0,63,143,.07);
    --eshadow2:0 6px 20px rgba(0,63,143,.14);
    --ecal-home:#1565C0;
    --ecal-away:#00246B;
}
@media(prefers-color-scheme:dark){
    :root{
        --e9:#1a3a6b; --e8:#1d4ed8; --e7:#2563eb; --e6:#3b82f6;
        --e5:#60a5fa; --e4:#93c5fd;
        --e1:#1e2e44; --e0:#131f30;
        --ecard:#16222E; --etxt:#E0EAF6; --etxt2:#7A9BBD;
        --ebr:#253649; --ebr2:#1e304a;
        --eshadow:0 1px 6px rgba(0,0,0,.25);
        --eshadow2:0 6px 20px rgba(0,0,0,.4);
        --ecal-home:#1d4ed8;
        --ecal-away:#1a3a6b;
    }
}

/* ── BASE ────────────────────────────────────────────────────────────── */
*{ box-sizing:border-box; }
.erci-gc{
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color:var(--etxt); max-width:860px; width:100%;
}
.erci-no-game{ color:var(--etxt2); font-style:italic; text-align:center; }

/* ── SAISON TABS ─────────────────────────────────────────────────────── */
.erci-season-bar{ margin-bottom:14px; }
.erci-season-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.erci-season-tab{
    display:inline-flex; align-items:center; gap:5px;
    padding:7px 16px; border-radius:10px;
    border:2px solid var(--ebr); background:var(--ecard); color:var(--etxt2);
    font-size:.82rem; font-weight:700; text-decoration:none; transition:all .2s;
}
.erci-season-tab:hover{ border-color:var(--e7); color:var(--e7); text-decoration:none; }
.erci-season-tab.active{
    background:var(--e8); border-color:var(--e8); color:#fff;
}
.erci-season-star{ font-size:.7rem; opacity:.7; }

/* ── TOOLBAR ─────────────────────────────────────────────────────────── */
.erci-toolbar{
    display:flex; gap:6px; flex-wrap:wrap;
    align-items:center; margin-bottom:18px;
}
.erci-filter-btn{
    padding:6px 14px; border-radius:20px;
    border:2px solid var(--ebr); background:var(--ecard); color:var(--etxt2);
    font-size:.75rem; font-weight:700; cursor:pointer; transition:all .2s;
    text-transform:uppercase; letter-spacing:.3px; text-decoration:none; display:inline-block;
}
.erci-filter-btn:hover{ border-color:var(--e7); color:var(--e7); }
.erci-filter-btn.active{ border-color:var(--e8); background:var(--e8); color:#fff; }
.erci-view-toggle{ display:flex; gap:3px; }
.erci-view-btn{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:8px;
    border:2px solid var(--ebr); background:var(--ecard);
    color:var(--etxt2); text-decoration:none; font-size:.88rem; transition:all .2s;
}
.erci-view-btn:hover{ border-color:var(--e7); }
.erci-view-btn.active{ background:var(--e8); border-color:var(--e8); color:#fff; }
.erci-ical-wrap{ margin-left:auto; display:flex; gap:6px; flex-shrink:0; }
.erci-ical-btn{
    display:inline-flex; align-items:center; gap:5px;
    padding:6px 14px; border-radius:20px;
    background:var(--e1); color:var(--e8);
    border:2px solid var(--ebr);
    font-size:.75rem; font-weight:700; cursor:pointer;
    text-decoration:none; transition:all .2s; white-space:nowrap;
}
.erci-ical-btn:hover{ background:var(--e8); color:#fff; border-color:var(--e8); }

/* ── SECTION LABEL ───────────────────────────────────────────────────── */
.erci-section-label{
    display:flex; align-items:center; gap:10px; margin:20px 0 8px;
}
.erci-section-label::before,
.erci-section-label::after{ content:''; flex:1; height:1px; background:var(--ebr); }
.erci-section-label span{
    font-size:.65rem; font-weight:800; letter-spacing:1.2px;
    text-transform:uppercase; color:var(--etxt2); white-space:nowrap;
}

/* ════════════════════════════════════════════════════════════════════════
   SPIELKARTE – wie im Screenshot: Datum | Logo Team VS Logo Team | Action
   ════════════════════════════════════════════════════════════════════════ */
.erci-game-list{ display:flex; flex-direction:column; gap:8px; }

.erci-game-card{
    display:grid;
    grid-template-columns:110px 1fr 50px;
    align-items:stretch;
    background:var(--ecard);
    border:1px solid var(--ebr);
    border-radius:14px;
    box-shadow:var(--eshadow);
    overflow:hidden;
    transition:box-shadow .2s, transform .15s;
    position:relative;
}
/* Linker Farbstreifen nach Wettbewerb */
.erci-game-card::before{
    content:''; position:absolute; left:0; top:0;
    width:3px; height:100%;
    background:var(--e8);
}
.erci-game-card[data-competition="CHL"]::before      { background:#D45A00; }
.erci-game-card[data-competition="Preseason"]::before{ background:#00875A; }
.erci-game-card[data-competition="Pokal"]::before    { background:#6A0DAD; }
.erci-game-card[data-competition="Sonstiges"]::before{ background:#546E7A; }
.erci-game-card.is-live::before{ animation:erci-stripe 1s infinite; }
.erci-game-card:hover{
    box-shadow:var(--eshadow2);
    transform:translateY(-1px);
}
.erci-game-card.is-past{ opacity:.75; }
.erci-game-card.is-past:hover{ opacity:1; }
.erci-game-card.is-today{ border-color:var(--e6); }

@keyframes erci-stripe{ 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes erci-pdot{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.6);opacity:.5} }
@keyframes erci-pulse{ 0%,100%{opacity:1} 50%{opacity:.55} }
@keyframes erci-live{ 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── DATUM SPALTE ────────────────────────────────────────────────────── */
.erci-card-date{
    display:flex; flex-direction:column;
    justify-content:center; align-items:flex-start;
    padding:12px 10px 12px 16px;
    border-right:1px solid var(--ebr2);
    background:var(--e0);
    gap:2px;
}
.erci-card-weekday{
    font-size:.65rem; font-weight:700;
    color:var(--etxt2); text-transform:uppercase; letter-spacing:.6px;
}
.erci-card-day{
    font-size:.9rem; font-weight:800; color:var(--etxt); line-height:1.1;
}
.erci-card-time{
    font-size:.72rem; color:var(--etxt2); font-weight:500;
}
/* Wettbewerb Badge */
.erci-card-comp{
    display:inline-block; margin-top:4px;
    padding:2px 7px; border-radius:8px;
    font-size:.6rem; font-weight:800;
    text-transform:uppercase; letter-spacing:.4px;
    background:var(--e1); color:var(--e8);
}
.erci-card-comp[data-comp="CHL"]      { background:#FFF0E6; color:#c04d00; }
.erci-card-comp[data-comp="Preseason"]{ background:#E6FAF0; color:#006640; }
.erci-card-comp[data-comp="Pokal"]    { background:#F3E6FF; color:#6A0DAD; }
.erci-card-comp[data-comp="Sonstiges"]{ background:#ECEFF1; color:#455A64; }
.erci-card-live-pill{
    display:inline-block; margin-top:4px;
    padding:2px 7px; border-radius:8px;
    font-size:.6rem; font-weight:800; letter-spacing:.4px;
    background:var(--e8); color:#fff;
    animation:erci-pulse 1s infinite;
}

/* ── MATCHUP SPALTE ──────────────────────────────────────────────────── */
.erci-card-matchup{
    display:grid;
    grid-template-columns:1fr 72px 1fr;
    align-items:center;
    padding:10px 12px;
    gap:8px;
}

/* Team */
.erci-card-team{
    display:flex; align-items:center; gap:10px;
}
.erci-card-team-away{
    flex-direction:row-reverse;
}
/* Logo */
.erci-card-logo{
    width:52px; height:52px; flex-shrink:0;
    background:#FFFFFF;
    border:1.5px solid var(--ebr);
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    padding:4px;
    box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.erci-card-logo img{ width:100%; height:100%; object-fit:contain; }
.erci-card-logo-ph{ font-size:1.4rem; opacity:.25; }

.erci-card-team-name{
    font-size:.8rem; font-weight:700; color:var(--etxt);
    line-height:1.25; word-break:break-word;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden;
}
.erci-card-team-away .erci-card-team-name{ text-align:right; }
.erci-card-team-name.won { color:var(--e7); font-weight:800; }
.erci-card-team-name.lost{ color:var(--etxt2); }

/* Score Center */
.erci-card-vs{
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:1px;
}
.erci-card-score{
    display:flex; align-items:center; gap:4px;
    font-size:1.65rem; font-weight:900;
    line-height:1; font-variant-numeric:tabular-nums;
    color:var(--e8);
}
.erci-card-score .s-win  { color:var(--e7); }
.erci-card-score .s-loss { color:var(--e5); }
.erci-card-score-colon{
    font-size:1.4rem; color:var(--e8); font-weight:900; margin:0 1px;
}
.erci-card-score-note{
    font-size:.6rem; font-weight:700;
    color:var(--etxt2); text-transform:uppercase; letter-spacing:.3px;
}
.erci-card-vs-txt{
    font-size:.75rem; font-weight:700;
    color:var(--ebr); letter-spacing:.5px; text-align:center;
}

/* ── ACTION SPALTE ───────────────────────────────────────────────────── */
.erci-card-action{
    display:flex; align-items:center; justify-content:center;
    padding:0 8px; border-left:1px solid var(--ebr2);
    background:var(--e0);
}
.erci-card-btn{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; width:36px; height:36px; border-radius:10px;
    background:var(--e1); color:var(--e8);
    border:1.5px solid var(--ebr); cursor:pointer;
    font-size:.75rem; font-weight:700; transition:all .2s; padding:0;
}
.erci-card-btn:hover{ background:var(--e8); color:#fff; border-color:var(--e8); }
.erci-card-btn-live{
    background:var(--e8); color:#fff; border-color:var(--e8);
    animation:erci-pulse 1.5s infinite;
    font-size:.6rem; font-weight:800; letter-spacing:.3px;
    height:44px;
}
.erci-live-dot{
    width:7px; height:7px; border-radius:50%;
    background:#60a5fa; animation:erci-pdot 1.2s infinite;
}
.erci-card-chevron{
    font-size:1.3rem; color:var(--ebr); font-weight:300; line-height:1;
}

/* ── NÄCHSTES SPIEL BANNER ───────────────────────────────────────────── */
.erci-next-game-wrap{
    background:linear-gradient(135deg,var(--e9) 0%,var(--e8) 55%,var(--e7) 100%);
    border-radius:16px; padding:22px 24px;
    box-shadow:0 8px 32px rgba(0,63,143,.3);
    color:#fff; width:100%;
}
.erci-next-label{
    font-size:.65rem; font-weight:800; letter-spacing:1.5px;
    text-transform:uppercase; opacity:.7; margin-bottom:16px;
    display:flex; align-items:center; gap:8px;
}
.erci-next-label-dot{
    width:7px; height:7px; border-radius:50%; background:var(--e4);
    animation:erci-pdot 1.4s infinite; display:inline-block; flex-shrink:0;
}
.erci-next-matchup{
    display:grid; grid-template-columns:1fr auto 1fr;
    align-items:center; gap:12px;
}
.erci-next-club{
    display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0;
}
.erci-next-logo-wrap{
    width:64px; height:64px; background:#FFFFFF;
    border-radius:12px; display:flex; align-items:center; justify-content:center;
    padding:6px; box-shadow:0 4px 14px rgba(0,0,0,.2);
    border:2px solid rgba(255,255,255,.2); flex-shrink:0;
}
.erci-next-logo-wrap img{ width:100%; height:100%; object-fit:contain; }
.erci-next-club-name{
    font-size:.8rem; font-weight:700; text-align:center;
    word-break:break-word; line-height:1.2; padding:0 4px;
}
.erci-next-center{ text-align:center; min-width:0; }
.erci-next-kickoff{
    font-size:.63rem; font-weight:700; opacity:.6;
    text-transform:uppercase; letter-spacing:1px; margin-bottom:5px;
}
.erci-next-datetime{ font-size:.95rem; font-weight:800; line-height:1.2; }
.erci-next-time{ font-size:.85rem; opacity:.8; margin-top:3px; }
.erci-next-venue{
    font-size:.63rem; opacity:.5; margin-top:8px;
    display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap;
}
.erci-countdown{
    display:inline-flex; gap:4px; margin-top:12px;
    font-size:.68rem; font-weight:700; opacity:.75;
    flex-wrap:wrap; justify-content:center;
}
.erci-count-unit{
    background:rgba(255,255,255,.14); border-radius:6px; padding:4px 7px;
}

/* ── KALENDER ────────────────────────────────────────────────────────── */
.erci-cal-month{
    margin-bottom:20px; background:var(--ecard);
    border:1px solid var(--ebr); border-radius:14px;
    overflow:hidden; box-shadow:var(--eshadow);
}
.erci-cal-month-header{
    background:linear-gradient(135deg,var(--e9),var(--e8));
    color:#fff; padding:11px 16px;
    font-weight:800; font-size:.95rem;
}
.erci-cal-grid{
    display:grid; grid-template-columns:repeat(7,1fr);
    gap:1px; background:var(--ebr);
}
.erci-cal-wd{
    background:var(--e0); text-align:center; padding:7px 2px;
    font-size:.63rem; font-weight:800; color:var(--etxt2); text-transform:uppercase;
}
.erci-cal-day{
    background:var(--ecard); min-height:72px; padding:5px; position:relative;
}
.erci-cal-empty{ background:var(--e0); opacity:.4; }
.erci-cal-today{ background:var(--e1); }
.erci-cal-today .erci-cal-daynr{
    background:var(--e8); color:#fff; border-radius:50%;
    width:20px; height:20px;
    display:inline-flex; align-items:center; justify-content:center;
    font-weight:800; font-size:.68rem;
}
.erci-cal-daynr{
    font-size:.68rem; font-weight:700; color:var(--etxt2); display:block; margin-bottom:3px;
}
.erci-cal-has-game{ background:var(--e0); }
.erci-cal-event{
    border-radius:6px; padding:4px 5px; font-size:.63rem; margin-bottom:3px;
    cursor:pointer; transition:all .2s; display:flex; flex-direction:column;
    gap:2px; color:#fff; position:relative; overflow:hidden;
}
.erci-cal-event.is-home{ background:var(--ecal-home); }
.erci-cal-event.is-home:hover{ background:#1976D2; transform:translateY(-1px); }
.erci-cal-event.is-away{ background:var(--ecal-away); }
.erci-cal-event.is-away:hover{ background:#003F8F; transform:translateY(-1px); }
.erci-cal-event.is-live{ animation:erci-live 1s infinite; }
.erci-cal-opp-logo{
    position:absolute; top:3px; right:3px;
    width:18px; height:18px; object-fit:contain;
    background:#FFFFFF; border-radius:3px; padding:1px;
    box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.erci-cal-event-comp{
    font-size:.56rem; font-weight:800; opacity:.75;
    text-transform:uppercase; padding-right:22px;
}
.erci-cal-event-matchup{
    display:flex; align-items:center; gap:3px; padding-right:22px;
}
.erci-cal-away-marker{
    font-size:.58rem; font-weight:900;
    background:rgba(255,255,255,.25); border-radius:3px; padding:0 3px; flex-shrink:0;
}
.erci-cal-event-teams{
    font-weight:700; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex:1;
}
.erci-cal-event-score{ font-weight:900; font-size:.68rem; }
.erci-cal-event-score.score-win { color:#90CAF9; }
.erci-cal-event-score.score-loss{ color:rgba(255,255,255,.55); }
.erci-cal-event-time{ opacity:.75; font-size:.6rem; }
.erci-cal-live-badge{
    display:inline-block; background:rgba(255,255,255,.2);
    border-radius:3px; padding:1px 4px;
    font-size:.55rem; font-weight:800; align-self:flex-start;
}

/* Popup */
body.erci-popup-open{ overflow:hidden; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media(max-width:640px){
    .erci-game-card{ grid-template-columns:90px 1fr 42px; }
    .erci-card-matchup{ grid-template-columns:1fr 58px 1fr; padding:8px; gap:6px; }
    .erci-card-logo{ width:42px; height:42px; border-radius:8px; }
    .erci-card-score{ font-size:1.35rem; }
    .erci-card-team-name{ font-size:.72rem; }
    .erci-card-day{ font-size:.8rem; }
    .erci-card-date{ padding:10px 8px 10px 14px; }
    .erci-ical-wrap{ margin-left:0; width:100%; margin-top:4px; }
    .erci-ical-btn{ flex:1; justify-content:center; }
    .erci-view-toggle{ margin-left:auto; }
}

@media(max-width:420px){
    .erci-game-card{ grid-template-columns:78px 1fr 36px; }
    .erci-card-matchup{ grid-template-columns:1fr 48px 1fr; padding:6px 8px; gap:4px; }
    .erci-card-logo{ width:34px; height:34px; border-radius:6px; padding:2px; }
    .erci-card-score{ font-size:1.1rem; }
    .erci-card-score-colon{ font-size:.9rem; }
    .erci-card-team-name{ font-size:.65rem; }
    .erci-card-day{ font-size:.72rem; }
    .erci-card-comp{ font-size:.55rem; }
    .erci-card-btn{ width:30px; height:30px; border-radius:8px; font-size:.65rem; }
    .erci-next-logo-wrap{ width:50px; height:50px; }
    .erci-next-club-name{ font-size:.72rem; }
    .erci-next-datetime{ font-size:.85rem; }
    .erci-cal-day{ min-height:52px; padding:3px; }
    .erci-cal-event{ font-size:.56rem; padding:3px 4px; }
    .erci-cal-opp-logo{ width:14px; height:14px; }
    .erci-cal-event-comp{ display:none; }
}