/* ==== Fixtures bar (Enhanced Glass + Green Accent • Compact + Top-Right Badge) ==== */
#fx-fixtures{
  /* compact dimensions */
  --fx-card-w: 168px;          /* desktop card width (tight) */
  --fx-team-col: 108px;        /* team column */
  --fx-score-col: 46px;        /* score column */

  position:relative;
  display:flex;
  align-items:center;
  gap:.45rem; /* tighter track gap */
  background: rgba(10, 15, 10, 0.6);           /* darker tint for contrast */
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  color:#f2fff7;
  padding:.45rem .55rem; /* denser bar padding */
  border-bottom:1px solid rgba(0,255,120,0.3);
  overflow:hidden;
  z-index:5;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
}

@media (max-width:782px){
  #fx-fixtures{
    --fx-card-w: 150px;        /* smaller on mobile */
    --fx-team-col: 98px;
    --fx-score-col: 44px;
    padding:.4rem;
  }
}

/* Buttons */
#fx-fixtures .fx-btn{
  border:1px solid rgba(0,255,120,0.35);
  background:rgba(255,255,255,0.08);
  padding:.3rem .5rem;
  border-radius:8px;
  cursor:pointer;
  color:#eafff1;
  font-weight:600;
  transition: all .25s ease;
}
#fx-fixtures .fx-btn:hover{
  background:rgba(0,255,120,0.15);
  box-shadow:0 0 8px rgba(0,255,120,0.35);
}
#fx-fixtures .fx-btn:disabled{ opacity:.45; cursor:default; }

/* Fav active */
#fx-fixtures .fx-favonly{ font-weight:800; }
#fx-fixtures .fx-favonly[aria-pressed="true"]{
  background:rgba(0,255,120,0.3);
  color:#000;
}

/* Track */
#fx-fixtures .fx-track{
  display:flex; gap:.4rem; overflow-x:auto;
  scroll-behavior:smooth; flex:1;
  margin:0 auto; max-width:var(--fx-maxw);
}
#fx-fixtures .fx-track::-webkit-scrollbar{display:none;}

/* Card: frosted glass with green border */
.fx-card{
  display:block;
  position:relative; /* needed for top-right badge */
  flex:0 0 var(--fx-card-w);
  width:var(--fx-card-w);
  min-width:var(--fx-card-w);
  max-width:var(--fx-card-w);
  background: rgba(255,255,255,0.09);
  border:1px solid rgba(0,255,120,0.5);
  border-radius:12px;
  color:#f5fff8;
  text-decoration:none;
  overflow:hidden;
  box-shadow:0 4px 25px rgba(0,0,0,0.25);
  transition:all .3s ease;
}
.fx-card:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,0.14);
  box-shadow:0 6px 28px rgba(0,255,120,0.4);
}

/* Header gradient (denser) */
.fx-card .fx-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.35rem .48rem; /* tighter */
  border-bottom:1px solid rgba(0,255,120,0.35);
  background:linear-gradient(90deg, rgba(0,255,120,0.18), rgba(255,255,255,0.05));
  color:#eafff3;
}

/* League chip + date */
.fx-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-weight:800; font-size:.76rem; color:#6bff9a;
}
.fx-chip img{width:14px;height:14px;object-fit:contain;}
.fx-dttm{font-size:.76rem;color:#d4f8e3;white-space:nowrap;}

/* Teams & score */
.fx-body{padding:.35rem .48rem .45rem;}
.fx-row{
  margin:.16rem 0;
  display:grid;
  grid-template-columns:var(--fx-team-col) var(--fx-score-col);
  align-items:center;
  padding-right:56px;
  column-gap:8px;
}
.fx-team{display:flex;align-items:center;gap:.35rem;min-width:0;}
.fx-team img{width:18px;height:18px;object-fit:contain;}
#fx-fixtures[style*="--fx-crests:0"] .fx-team img{display:none;}
.fx-name{
  font-weight:800;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:88px; /* narrower, avoids clipping */
  font-size:.84rem;color:#ffffff;
}
@media (max-width:782px){ .fx-name{max-width:78px;} }
.fx-score{
  font-variant-numeric:tabular-nums;font-weight:800;font-size:.9rem;
  color:#ffffff;text-align:center;line-height:1.1;
}

/* Status badges — move to top-right of the card */
.fx-status{
  position:absolute !important;
  bottom:6px; right:8px; z-index:2;   /* 👈 moved from top to bottom */
  display:inline-block;
  font-size:.62rem;
  font-weight:700;
  padding:.02rem .32rem;
  border-radius:10px;
  border:1px solid rgba(0,255,120,0.4);
  background:rgba(0,255,120,0.12);
  color:#d9ffe9;
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

/* neutralize old per-row placement */
#fx-fixtures .fx-score .fx-status{ position:static; }

/* States */
.fx-live{
  background:rgba(0,255,120,0.25);
  border-color:#00ff80;
  color:#ffffff;
  box-shadow:0 0 8px rgba(0,255,120,0.35);
}
.fx-upc{
  background:rgba(255,255,255,0.1);
  border-color:rgba(0,255,120,0.4);
  color:#e5fff2;
}
.fx-can{
  background:rgba(255,60,60,0.15);
  border-color:#ff6666;
  color:#ffe5e5;
}

/* Star */
.fx-star{
  margin-left:.1rem;cursor:pointer;user-select:none;
  color:#a0b8ad;background:transparent;border:none;outline:0;line-height:1;
  transition:color .2s ease;
}
.fx-star.active,.fx-star:hover{color:#00ff80;}

/* Loading text */
#fx-fixtures .fx-loading{opacity:.9;padding:.25rem .5rem;color:#e9fff2;}

/* Mobile tweaks already above */



/* ==== Match page ==== */
#fx-match{max-width:1180px;margin:20px auto;padding:0 12px}
@media (max-width:800px){
  #fx-match{max-width:100%;padding:0}
  .fxm-card{border-radius:0;border-left:0;border-right:0;margin:0 0 12px}
}
.fxm-card{background:#fff;border:1px solid #e5e7eb;border-radius:12px;margin:14px 0;overflow:hidden}
.fxm-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #f1f5f9;background:linear-gradient(90deg, rgba(255,152,0,.09), rgba(59,130,246,.06))}
.fxm-head .fxm-league{display:flex;align-items:center;gap:8px;font-weight:800}
.fxm-head .fxm-league img{width:18px;height:18px;object-fit:contain}
.fxm-hero{display:flex;gap:12px;align-items:center}
.fxm-team{display:flex;align-items:center;gap:8px;font-weight:800}
.fxm-team img{width:28px;height:28px;object-fit:contain}
.fxm-kick{color:#374151;font-size:.95rem;font-weight:700}
.fxm-sub{padding:10px 16px;color:#6b7280}
.fxm-card h3{margin:0;padding:12px 16px;border-bottom:1px solid #f1f5f9;font-size:1rem;background:#fafafa;border-left:3px solid var(--fx-accent)}
.fxm-section{padding:14px}
.fxm-tablewrap{overflow:auto;-webkit-overflow-scrolling:touch}
.fxm-table{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden;min-width:560px}
.fxm-table th,.fxm-table td{padding:8px 10px;border-bottom:1px solid #f3f4f6;text-align:left;font-size:.94rem}
.fxm-table th{background:#f9fafb;font-weight:700}
.fxm-table tbody tr:nth-child(even){background:#fcfcfc}
.fxm-teamcell{display:inline-flex;align-items:center;gap:6px}
.fxm-teamcell img.fxm-crest{width:16px;height:16px;object-fit:contain}
.fxm-meter{height:10px;border-radius:999px;background:#eef2f7;overflow:hidden}
.fxm-meter>span{display:block;height:100%}
.fxm-meter.home>span{background:linear-gradient(90deg, var(--fxm-home,#ef4444), #fb7185)}
.fxm-meter.away>span{background:linear-gradient(90deg, var(--fxm-away,#3b82f6), #60a5fa)}
.fxm-barbox{height:44px;border:1px dashed #e5e7eb;background:#fff;border-radius:6px;position:relative;margin:6px 0 2px}
.fxm-bar{position:absolute;left:0;top:6px;height:32px;border-radius:4px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-weight:800;color:#fff}
.fxm-bar.h{background:linear-gradient(90deg, var(--fxm-home,#ef4444), #fb7185)}
.fxm-bar.a{background:linear-gradient(90deg, var(--fxm-away,#3b82f6), #60a5fa)}
.fxm-formnote{color:#9ca3af;font-size:.9rem;margin-top:4px}
.fxm-pills{display:flex;gap:6px;align-items:center}
.fxm-pill{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:#fff}
.fxm-pill.W{background:#10b981}
.fxm-pill.D{background:#fbbf24;color:#111}
.fxm-pill.L{background:#ef4444}
.fxm-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:800px){ .fxm-hero{flex-direction:column;align-items:flex-start} .fxm-split{grid-template-columns:1fr} }

/* ==== Hide navigation buttons on mobile ==== */
@media (max-width:782px){
  #fx-fixtures .fx-prev,
  #fx-fixtures .fx-next {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}