:root{
    --bg:#000;
    --fg:#f7f7f7;
    --cyan:#00e5ff;
    --yellow:#ffe600;
    --green:#00ff6a;
    --red:#ff3b3b;
    --blue:#4aa3ff;
    --magenta:#ff4dff;
    --panel:#0a0a0a;
    --line:rgba(255,255,255,.18);
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing:.3px;
  }
  
  .screen{ max-width:920px; margin:0 auto; padding:14px; position:relative; }
  
  .topbar{
    display:flex; justify-content:space-between; align-items:center;
    border:2px solid var(--line);
    padding:10px 12px;
    background:#050505;
  }
  
  .brand{ display:flex; gap:10px; align-items:baseline; }
  .badge{
    background:var(--yellow); color:#000;
    padding:2px 8px; font-weight:800;
    border:2px solid #000;
  }
  .title{ color:var(--cyan); font-weight:800; text-transform:uppercase; }
  
  .meta{ display:flex; gap:8px; }
  .pill{ border:2px solid var(--line); padding:2px 8px; }
  
  .tabs{
  display:flex; gap:0; margin-top:12px;
  border:2px solid var(--line);
  border-bottom:none;
  background:#050505;
}
.tab{
  flex:1;
  padding:10px 12px;
  border:none;
  border-right:2px solid var(--line);
  background:transparent;
  color:var(--fg);
  font-family:inherit;
  font-size:inherit;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.3px;
  cursor:pointer;
}
.tab:last-child{ border-right:none; }
.tab:hover{ background:#111; }
.tab.is-active{
  background:var(--cyan);
  color:#000;
}

.panel{ border:2px solid var(--line); background:var(--panel); }
  
  .panel-head{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px;
    border-bottom:2px solid var(--line);
    background:#060606;
    text-transform:uppercase;
  }
  .kicker{ color:var(--magenta); font-weight:800; }
  .date{ color:var(--yellow); font-weight:800; }
  .legend{ margin-left:auto; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.8); }
  
  .dot{ width:10px; height:10px; display:inline-block; border:2px solid #000; }
  .dot-live{ background:var(--red); }
  .dot-ft{ background:var(--green); }
  
  .row{
    display:grid;
    grid-template-columns:80px 1fr 90px 1fr 140px;
    border-bottom:1px solid var(--line);
  }
  .row.header{ background:#080808; font-weight:800; }
  .cell{
    padding:10px 12px;
    border-right:1px solid var(--line);
    text-transform:uppercase;
  }
  .cell:last-child{ border-right:none; }
  .time{ color:var(--cyan); }
  .score{ text-align:center; }
  
  .chip{
    display:inline-block;
    padding:2px 8px;
    border:2px solid #000;
    font-weight:800;
    background:#111;
  }
  .chip.live{ background:var(--red); color:#000; }
  .chip.ft{ background:var(--green); color:#000; }
  
  .row.is-live .home,
  .row.is-live .away{
    color:var(--yellow);
  }

  .cell.home,
  .cell.away{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .team-name{ font-weight:800; }
  .scorers{
    font-size:0.75em;
    color:var(--cyan);
    text-transform:none;
    font-weight:400;
  }
  
  .footer{
    display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
    padding:10px 12px;
    border-top:2px solid var(--line);
    background:#050505;
  }
  .keys{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
  .key{
    display:inline-block;
    padding:2px 6px;
    border:2px solid #000;
    font-weight:900; color:#000;
  }
  .key.red{ background:var(--red); }
  .key.green{ background:var(--green); }
  .key.yellow{ background:var(--yellow); }
  .key.blue{ background:var(--blue); }
  a.key{ text-decoration:none; }
  
  /* News section */
.news-panel{ margin-top:12px; }
.news-badge{ margin-left:auto; }

.news-list{ display:flex; flex-direction:column; }

.news-item{
  border-bottom:1px solid var(--line);
}
.news-item:last-child{ border-bottom:none; }

.news-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px;
  color:var(--fg);
  text-decoration:none;
  transition: background .15s;
}
.news-link:hover{
  background:#111;
}
.news-link:hover .news-headline{
  color:var(--cyan);
}

.news-headline{
  font-weight:800;
  text-transform:uppercase;
  line-height:1.3;
}

.news-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.news-time{
  color:var(--yellow);
  font-weight:800;
  font-size:0.85em;
  text-transform:uppercase;
}

/* League Table Standings */
.standings-table{ display:flex; flex-direction:column; }

.standings-row{
  display:grid;
  grid-template-columns: 40px 1fr repeat(7, 40px) 50px;
  border-bottom:1px solid var(--line);
  align-items:center;
}
.standings-row.header{
  background:#080808;
  font-weight:800;
}

.standings-cell{
  padding:10px 8px;
  text-transform:uppercase;
  text-align:center;
}
.standings-cell.pos{
  color:var(--cyan);
  font-weight:800;
}
.standings-cell.team-col{
  text-align:left;
  padding-left:12px;
}
.standings-cell.stat{
  color:rgba(255,255,255,.85);
}
.standings-cell.gd{
  color:var(--cyan);
}
.standings-cell.pts{
  font-weight:800;
  color:var(--yellow);
}

.team-abbrev{ display:none; }
.team-full{ font-weight:800; }

/* Position highlighting based on qualification */
.standings-row.note-ucl .pos{
  background:var(--green);
  color:#000;
}
.standings-row.note-uel .pos{
  background:var(--blue);
  color:#000;
}
.standings-row.note-uecl .pos{
  background:var(--cyan);
  color:#000;
}
.standings-row.note-rel .pos{
  background:var(--red);
  color:#000;
}

/* Legend dots for standings */
.legend .dot.note-ucl{ background:var(--green); }
.legend .dot.note-uel{ background:var(--blue); }
.legend .dot.note-rel{ background:var(--red); }

.scanlines{
    pointer-events:none;
    position:absolute;
    inset:0;
    background: repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.05),
      rgba(255,255,255,.05) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
    mix-blend-mode: overlay;
    opacity:.18;
  }
  
  @media (max-width:720px){
    .screen { padding: 10px; }

    /* Stack tabs on narrow screens */
    .tabs{ flex-wrap:wrap; }
    .tab{
      flex:1 1 45%;
      border-bottom:2px solid var(--line);
      font-size:0.85em;
      padding:8px 10px;
    }
    .tab:nth-child(2){ border-right:none; }

    /* Let the header breathe on narrow screens */
    .topbar { flex-wrap: wrap; gap: 10px; }
    .meta { flex-wrap: wrap; }
  
    /* Hide the table header row on mobile */
    .row.header { display: none; }
  
    /* Each match becomes a “card” */
    .row{
      grid-template-columns: 1fr;
      border-bottom: 2px solid var(--line);
    }
  
    .cell{
      border-right: none;
      padding: 8px 10px;
    }
  
    /* Row order becomes:
       time
       home
       score
       away
       info
    */
    .cell.time{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      border-bottom: 1px solid var(--line);
    }
  
    .cell.home,
    .cell.away{
      font-weight: 800;
    }
  
    .cell.score{
      text-align: left;
      padding-top: 6px;
      padding-bottom: 6px;
    }
  
    .cell.info{
      border-top: 1px solid var(--line);
      color: rgba(255,255,255,.85);
    }
  
    /* Bigger tap-friendly chips */
    .chip{
      padding: 4px 10px;
    }

    .footer { gap: 10px; }

    /* News on mobile */
    .news-link{
      flex-direction:column;
      align-items:flex-start;
      gap:6px;
    }
    .news-headline{
      font-size:0.9em;
    }

    /* Standings table on mobile */
    .standings-row{
      grid-template-columns: 32px 1fr repeat(5, 32px) 42px;
    }
    .standings-cell{
      padding:8px 4px;
      font-size:0.85em;
    }
    .hide-mobile{ display:none; }
    .team-abbrev{ display:inline; }
    .team-full{ display:none; }
  }