/* =========================================================
   ScoreVibe — Match Guide (Standalone CSS)
   File: match-guide.css
   Scope: match-guide.html ONLY
   Safe: No global overrides
========================================================= */

/* ---------- Root tokens ---------- */
:root {
  --bg:#050b18;
  --panel:#0b1428;
  --panel-soft:#101c38;
  --txt:#e7eefb;
  --muted:#9fb0d1;
  --accent:#00e5ff;
  --accent-soft:rgba(0,229,255,.15);
  --ok:#22c55e;
  --warn:#facc15;
  --bad:#ef4444;
  --border:rgba(255,255,255,.12);
  --shadow:0 10px 28px rgba(0,0,0,.35);
  --radius:16px;
  --radius-sm:12px;
}

/* ---------- Reset (local) ---------- */
body[data-page="match-guide"] {
  margin:0;
  font-family:Inter,system-ui,Arial,sans-serif;
  background:var(--bg);
  color:var(--txt);
  overflow-x:hidden;
}

/* ---------- Background ---------- */
.match-bg{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(5,11,24,.65), rgba(5,11,24,.92)),
    url("/images/match-guide-bg.jpg") center/cover no-repeat;
}

/* ---------- Header ---------- */
.match-header{
  position:sticky;
  top:0;
  z-index:1000;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 18px;
  background:rgba(5,11,24,.9);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(10px);
}

.match-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.match-brand img{
  width:42px;
  height:42px;
}
.match-brand h1{
  margin:0;
  font-size:1.35rem;
  font-weight:900;
}
.match-brand p{
  margin:0;
  font-size:.8rem;
  color:var(--muted);
}

.match-nav a{
  text-decoration:none;
  color:var(--accent);
  font-weight:800;
  border:1px solid var(--accent);
  padding:6px 12px;
  border-radius:999px;
}
.match-nav a:hover{
  background:var(--accent);
  color:#012016;
}

/* ---------- Layout ---------- */
.match-container{
  max-width:1180px;
  margin:0 auto;
  padding:18px;
}

/* ---------- Filters ---------- */
.match-filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.match-chip{
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.06);
  font-weight:800;
  font-size:.85rem;
  cursor:pointer;
  user-select:none;
}
.match-chip.active{
  border-color:var(--accent);
  box-shadow:0 0 0 2px var(--accent-soft) inset;
}
.match-chip:hover{
  background:rgba(255,255,255,.1);
}

/* ---------- Fixture Card ---------- */
.match-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-bottom:18px;
  overflow:hidden;
}

/* ---------- Fixture Header ---------- */
.match-card__top{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:14px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.04),
    rgba(0,0,0,.15)
  );
  border-bottom:1px solid var(--border);
}

.team{
  display:flex;
  align-items:center;
  gap:10px;
}
.team.right{
  justify-content:flex-end;
}
.team img{
  width:38px;
  height:38px;
}
.team span{
  font-weight:900;
  font-size:.95rem;
}

.vs{
  font-weight:900;
  font-size:.9rem;
  color:var(--muted);
}

/* ---------- Meta ---------- */
.match-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 14px;
  font-size:.82rem;
  color:var(--muted);
}
.match-meta .league{
  font-weight:900;
  color:var(--accent);
}

/* ---------- Sections Grid ---------- */
.match-sections{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px;
  padding:14px;
}

/* ---------- Info Box ---------- */
.info-box{
  background:var(--panel-soft);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px;
}
.info-box h3{
  margin:0 0 6px;
  font-size:.9rem;
  color:var(--accent);
}
.info-box ul{
  margin:0;
  padding-left:18px;
  font-size:.85rem;
  color:rgba(231,238,251,.88);
}
.info-box li{
  margin:4px 0;
}

/* ---------- Standings ---------- */
.standings-row{
  display:flex;
  justify-content:space-between;
  font-size:.85rem;
  padding:4px 0;
}
.standings-row strong{
  color:var(--txt);
}

/* ---------- AI Insight ---------- */
.ai-box{
  grid-column:1 / -1;
  background:linear-gradient(
    135deg,
    rgba(0,229,255,.12),
    rgba(0,0,0,.25)
  );
  border:1px solid var(--accent);
  border-radius:var(--radius);
  padding:14px;
}

.ai-box h3{
  margin:0 0 6px;
  color:var(--accent);
  font-size:1rem;
}
.ai-box p{
  margin:0;
  font-size:.9rem;
  line-height:1.45;
}

/* ---------- Locked prediction ---------- */
.ai-locked{
  margin-top:10px;
  padding:12px;
  border-radius:12px;
  background:rgba(0,0,0,.35);
  border:1px dashed var(--border);
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.ai-locked span{
  font-weight:900;
  letter-spacing:.5px;
}
.ai-locked button{
  border:none;
  background:var(--accent);
  color:#012016;
  font-weight:900;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
}

/* ---------- Ad Slot ---------- */
.ad-slot{
  margin:18px 0;
  padding:14px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  border:1px dashed var(--border);
  text-align:center;
  color:var(--muted);
  font-size:.85rem;
}

/* ---------- Loading ---------- */
.match-loading{
  text-align:center;
  padding:30px;
  color:var(--muted);
  font-weight:800;
}

/* ---------- Footer ---------- */
.match-footer{
  text-align:center;
  padding:18px;
  color:var(--muted);
  font-size:.8rem;
  border-top:1px solid var(--border);
}

/* ---------- Mobile tweaks ---------- */
@media (max-width:600px){
  .match-card__top{
    grid-template-columns:1fr;
    gap:10px;
    text-align:center;
  }
  .team.right{
    justify-content:center;
  }
  .vs{
    display:none;
  }
}