body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background: var(--bg, #0f1113);
    color: #fff;
    -webkit-font-smoothing: antialiased;
}
:root {
  --bg: #0b0d10;
  --card: #111418;
  --muted: #8b95a5;
  --accent: #4f8cff;
  --live: #ff4d4f;
  --score: #ffd166;
  --line: #1f2329;
}
.grid {
  visibility: hidden;
}
.grid .card {
  display: none; 
}

.header {
  background: #0f1113;
  padding: 16px;
  border-bottom: 1px solid #1f2329;
  text-align: center;
}

.header h1 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .6px;
}
.container {
    max-width: 1100px;
    margin: 18px auto;
    padding: 0 14px;
}
.controls {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.select {
    background: #0f1113;
    border: 1px solid var(--line);
    padding: 8px 10px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
}
.today-btn {
  background: #1e2a52;
  color: #c7d2fe;
  border: 1px solid #3a5fbd;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
}

.today-btn:hover {
  background: #2c3f7a;
  color: #fff;
}
.live-badge {
  background: rgba(255,77,79,0.15);
  color: #ff9a9a;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
}
@media(max-width: 940px) {
    .grid {
        grid-template-columns: 1fr;
    }
}
.card {
  background: linear-gradient(180deg, #111418, #0e1115);
  border-radius: 14px;
  padding: 14px;
  border: 1px solid #1c2128;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  transition: transform .25s ease, box-shadow .25s ease;
  gap: 12px;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.title-row {
    display: flex;
    flex-wrap: wrap;          
    justify-content: space-between;
    align-items: center;
    gap: 6px;                 
    margin-bottom: 10px;
}
.title-row h2 {
    flex: 1 1 auto;           
    min-width: 120px;         
    display: flex;
    align-items: center;
    gap: 6px;                 
    font-size: 18px; 
}
.updated {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 8px;
}

.day {
    padding: 6px 4px;
    font-weight: 700;
    color: var(--accent);
    border-bottom: 1px dashed #232526;
    margin-top: 8px;
    font-size: 13px;
}

.match {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 44px;
    padding: 4px 6px;
    border-bottom: 1px solid #101113;
    width: 100%;
    box-sizing: border-box;
}
.match:last-child {
    border-bottom: none;
}
.matches-container {
  min-height: 60px;        
  margin-top: 6px;         
}

.team {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 0;
    overflow: hidden;
}
.team.left {
    justify-content: flex-start;
}
.team.right {
    justify-content: flex-end;
    text-align: right;
}

.name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    font-size: 13px;
    color: #e9eef2;
}

.crest {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 4px;
    background: transparent;
}

.center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 60px;
    flex-shrink: 0;
}

.score {
    padding: 4px 8px;
    font-weight: 700;
    font-size: 14px;
    color: var(--score);
    border-radius: 6px;
    background: transparent;
    text-align: center;
    min-width: 50px;
}
.score-pulse {
    animation: scorePulse 0.9s ease;
    box-shadow: 0 8px 28px rgba(255, 213, 79, 0.12);
}
@keyframes scorePulse {
    0% { transform: scale(1) }
    25% { transform: scale(1.12) }
    60% { transform: scale(1.04) }
    100% { transform: scale(1) }
}

.live-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--live);
    box-shadow: 0 0 8px rgba(255, 77, 79, 0.9);
    display: inline-block;
    animation: livePulse 1.2s infinite;
}
.live-btn:hover {
    background: #e04344;
}
.date-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px; 
}

.date-filters button {
  background: #141617;
  border: 1px solid #232526;
  color: #9aa4af;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.date-filters button.active,
.date-filters button:hover {
  background: #1e90ff;
  border-color: #1e90ff;
  color: #fff;
}
@keyframes livePulse {
    0% { transform: scale(1); opacity: 1 }
    50% { transform: scale(1.45); opacity: 0.6 }
    100% { transform: scale(1); opacity: 1 }
}

.small {
    font-size: 12px;
    color: var(--muted);
}

.empty {
    padding: 20px 12px;  
    color: var(--muted);
    text-align: center;
}
.score.finished {
    color: #fff;       
    font-weight: 800;  
}

.score.upcoming {
    color: var(--accent); 
    font-weight: 700;
}

.match-time {
    font-size: 12px;
    color: var(--muted);
    margin-left: 4px;
    min-width: 50px;
    text-align: center;
    flex-shrink: 0;
}


.league-section {
    background: var(--card);
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    width: 100%;
}

.league-section table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.league-section thead {
    background: #0f1113;
}

.league-section th {
    padding: 8px 6px;
    font-size: 12px;
    font-weight: 700;
    color: #9aa4af;
    text-transform: uppercase;
    border-bottom: 1px solid #1c1c1f;
    white-space: nowrap;
}

.league-section td {
    padding: 6px 6px;
    border-bottom: 1px solid #1a1c1f;
    white-space: nowrap;
    color: #e0e6ed;
}

.league-section tr:last-child td {
    border-bottom: none;
}

.league-section tr:hover {
    background: #16181a;
}

[id^="matches-"] {
    padding: 12px 0;
    min-height: 60px;
}
.league-section td.pos {
    width: 30px;
    font-weight: 700;
    text-align: center;
    border-right: 1px solid #1c1c1f;
}

.league-section td.club {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}

.league-section td.club img {
    width: 20px;
    height: 20px;
}

.league-section td.points {
    font-weight: 700;
    color: var(--accent);
}
.other-btn {
    background: transparent;
    color: #9aa4af;
    border: 1px solid #232526;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.other-btn:hover {
    background: #16181a;
    color: #fff;
    border-color: #2a2d31;
}
.fav-toggle {
  cursor: pointer;
  margin-right: 8px;
  font-size: 18px;
  color: #9aa4af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transition: background .2s, color .2s;
}

.fav-toggle:hover {
  background: rgba(255,255,255,0.08);
}

.fav-toggle.active {
  color: #ffd166;
}
.standings-btn {
  background: transparent;
  color: #c7d2fe;
  border: 1px solid #2b3a67;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s ease;
  flex-shrink: 0;
}

.standings-btn:hover {
  background: #1e2a52;
  color: #fff;
  border-color: #3a5fbd;
}
/* CLASSEMENTS */

/* Liga */
td.pos.pd-1,
td.pos.pd-2,
td.pos.pd-3,
td.pos.pd-4 {
    background: #0d1f4c; 
    color: #fff;
}
td.pos.pd-5 {
    background: #962f2fff; 
    color: #fff;
}
td.pos.pd-6 {
    background: #ff9800;
    color: #fff;
}
td.pos.pd-18,
td.pos.pd-19,
td.pos.pd-20 {
    background: #b71c1c; 
    color: #fff;
}

/* Premier league */
td.pos.pl-1,
td.pos.pl-2,
td.pos.pl-3,
td.pos.pl-4 {
    background: #0d1f4c; 
    color: #fff;
}
td.pos.pl-5 {
    background: #962f2fff; 
    color: #fff;
}
td.pos.pl-18,
td.pos.pl-19,
td.pos.pl-20 {
    background: #b71c1c; 
    color: #fff;
}

/* Liga NOS */
td.pos.ppl-1 {
    background: #0d1f4c;
    color: #fff;
}

td.pos.ppl-2 {
    background: #1e3fa3; 
    color: #fff;
}

td.pos.ppl-3 {
    background: #962f2fff; 
    color: #fff;
}

td.pos.ppl-4 {
    background: #ff9800; 
    color: #000;
}

td.pos.ppl-16,
td.pos.ppl-17,
td.pos.ppl-18 {
    background: #b71c1c;
    color: #fff;
}

/* Ligue 1 */
td.pos.l1-1, td.pos.l1-2, td.pos.l1-3 { background:#0d1f4c;color:#fff }
td.pos.l1-4 { background:#3a5fbd;color:#fff }
td.pos.l1-5 { background:#962f2fff;;color:#fff }
td.pos.l1-6 { background:#ff9800;color:#fff }
td.pos.l1-16 { background:#b71c1c;;color:#fff }
td.pos.l1-17, td.pos.l1-18 { background:#b71c1c;color:#fff }

/* LDC */
td.pos.cl-1, td.pos.cl-2, td.pos.cl-3, td.pos.cl-4,
td.pos.cl-5, td.pos.cl-6, td.pos.cl-7, td.pos.cl-8 {
  background:#0d1f4c;color:#fff;
}
td.pos.cl-9, td.pos.cl-10, td.pos.cl-11, td.pos.cl-12,
td.pos.cl-13, td.pos.cl-14, td.pos.cl-15, td.pos.cl-16,
td.pos.cl-17, td.pos.cl-18, td.pos.cl-19, td.pos.cl-20,
td.pos.cl-21, td.pos.cl-22, td.pos.cl-23, td.pos.cl-24 {
  background:#3a5fbd;color:#fff;
}
/* Serie A */
td.pos.sa-1, td.pos.sa-2, td.pos.sa-3, td.pos.sa-4 {
    background: #0d1f4c; 
    color: #fff;
}
td.pos.sa-5 {
    background: #962f2fff;  
    color: #fff;
}
td.pos.sa-6 {
    background: #ff9800; 
    color: #fff;
}
td.pos.sa-18, td.pos.sa-19, td.pos.sa-20 {
    background: #b71c1c;  
    color: #fff;
}

/* BundesLiga */
td.pos.bl1-1, td.pos.bl1-2, td.pos.bl1-3, td.pos.bl1-4 {
    background: #0d1f4c;  
    color: #fff;
}
td.pos.bl1-5 {
    background: #962f2fff;  
    color: #fff;
}
td.pos.bl1-6 {
    background: #ff9800; 
    color: #fff;
}
td.pos.bl1-16, td.pos.bl1-17, td.pos.bl1-18 {
    background: #b71c1c;  
    color: #fff;
}

/* CLASSEMENTS */

.filters {
    position: sticky;
    top: 0;
    background: #0f1113;
    padding: 8px 0;
    z-index: 20;
    margin-bottom: 12px; 
}
#teamSearch {
  background: #0f1113;
  border: 1px solid #2a2f36;
  color: #fff;
  padding: 7px 12px;
  border-radius: 10px;
  font-size: 13px;
  margin-left: auto;
  min-width: 200px;
}

#teamSearch::placeholder {
  color: #8b95a5;
}
.grid {
    margin-top: 6px;
}
.card.has-live {
    border-color: #ff4d4f;
    box-shadow: 0 0 0 1px rgba(255,77,79,0.3);
}
.card.favorite {
  border-color: #ffd166;
  box-shadow: 0 0 0 1px rgba(255,209,102,.35);
}

.filters button {
    background: #141617;
    color: #9aa4af;
    border: 1px solid #232526;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.filters button.active,
.filters button:hover {
    background: #1e90ff;
    color: #fff;
    border-color: #1e90ff;
}

/* Mobile */
@media(max-width: 768px){
    .league-section table {
        font-size: 12px;
    }
    .league-section th, .league-section td {
        padding: 5px 4px;
    }
    .league-section td.club img {
        width: 18px;
        height: 18px;
    }
}
@media(max-width: 480px) {
    .card { padding: 10px; }

    .filters, .date-filters {
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 8px;
    }

    .title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .title-row h2 { font-size: 14px; }

    .standings-btn, .updated {
        font-size: 11px;
        margin-left: 0;
        flex-shrink: 0;
    }

    .updated { text-align: left; }

    .match {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 4px;
        padding: 4px 6px;
    }

    .team.left, .team.right {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
    }

    .team.left .name, .team.right .name {
        font-size: 12px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        line-height: 1.2;
    }

    .center {
        flex-shrink: 0;
        min-width: 50px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
    }

    .score {
        font-size: 12px;
        min-width: 40px;
        padding: 3px 6px;
        text-align: center;
    }

    .match-time {
        font-size: 11px;
        min-width: 40px;
        text-align: center;
    }

    .day {
        font-size: 12px;
        padding: 4px 2px;
    }

    #teamSearch {
        width: 100%;
        margin-left: 0;
        font-size: 12px;
    }

    .date-filters button, .filters button {
        font-size: 11px;
        padding: 5px 10px;
        margin-bottom: 4px;
    }

    .league-section table {
        font-size: 11px;
    }

    .league-section th, .league-section td {
        padding: 4px 3px;
    }

    .league-section td.club img {
        width: 16px;
        height: 16px;
    }

    .grid {
        margin-top: 6px;
        gap: 10px;
    }

    .score-pulse {
        box-shadow: 0 6px 20px rgba(255, 213, 79, 0.12);
    }
}