/* --- Compact pro scorecard styling --- */
.cfs-wrap { 
    max-width: 980px; 
    margin: 12px auto; 
    font-family: "Helvetica Neue", Arial, sans-serif; 
}

/* Card */
.cfs-card {
  background: linear-gradient(#16181b,#121315);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  color: #e6eef6;

}

/* header */
.cfs-header {
  display:flex;
 justify-content: start;
  align-items:center;
  padding:6px 12px;
  background:#2e343a;
  color:#c9d2db;
  font-size:12px;
  text-transform: capitalize;
}

/* live badge */
.cfs-live-badge {
  display:inline-block;
  background:#e02020;
  color:#fff;
  font-weight:600;
  padding:4px 8px;
  border-radius:3px;
  margin-right:8px;
  box-shadow: 0 2px 8px rgba(224,32,32,0.28);
  animation: cfs-pulse 1.2s infinite;
  text-transform: capitalize;
}
@keyframes cfs-pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.85; }
  100% { transform: scale(1); opacity: 1; }
}
.cfs-live-wrap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.cfs-phase {
  display: block;
  margin: 0;
  padding: 0;
  line-height: 1.1; /* keeps height tight */
}


.cfs-live-badge {
  background: #e02020;
  color: #fff;
  padding: 4px 8px;
  border-radius: 3px;
  font-weight: 600;
}

.cfs-info {
  text-align: right;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.cfs-phase {
  font-weight: 600;
}

.cfs-trailing {
  color: #aeb6bf;
  font-size: 11px;
 text-align: left;
}
.cfs-live-badge {
  margin-right: 10px;    /* spacing between LIVE and phase block */
}


/* body layout compact */
.cfs-body {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 14px;
  min-height:70px;
}

/* team blocks */
.team-block { 
    width:150px; 
    text-align:center; 
}

.cfs-score-large { 
    font-size:24px; 
    font-weight:700; 
    color:#f8fafc; 
    line-height:1; 
}

.cfs-overs, 
.cfs-overs-right { 
    font-size:11px; 
    color:#9fb6cc; 
    margin-top:3px; 
}
/* Middle container */
.cfs-middle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

/* Horizontal layout: Logo – VS – Logo */
.cfs-vs-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
}

/* Each team’s logo + name */
.cfs-team-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Logos */
.cfs-team-col img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.08);
    background: #fff;
}

/* Team names under logo */
.cfs-team-name {
    color: #e6eef6;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    text-align: center;
}

/* VS Circle */
.cfs-vs {
    background: #fff;
    color: #1f2937;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
    text-transform: capitalize;
}

/* logos */
.cfs-logos { 
    display:flex; 
    gap:16px; 
    align-items:center; 
    justify-content:center; 
    margin-top:3px; 
}
.cfs-logos img { 
    width:42px; 
    height:42px; 
    border-radius:50%; 
    border:3px solid rgba(255,255,255,0.08); 
    background:#fff; 
}

/* footer */
.cfs-footer { 
    padding:8px 12px; 
    background:rgba(255,255,255,0.02);
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    gap:10px; 
    flex-wrap:wrap; 
    font-size:12px; 
    color:#c7d3db; 
    text-transform: capitalize;
}

.cfs-innings-summary { 
    flex:1; 
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

/* innings pills */
.cfs-innings-summary .cfs-pill {
  background: rgba(255,255,255,0.05);
  padding:4px 8px;
  border-radius:4px;
  color:#eaf4ff;
  font-weight:600;
  font-size:12px;
  text-transform: capitalize;
}
/* --- Last 6 Balls --- */
.cfs-balls-wrapper {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.cfs-balls-row {
    display: flex;
    gap: 6px;
}

.cfs-ball {
    width: 28px;
    height: 28px;
    background: #222;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* GREEN = RUNS, RED = WICKET */
.cfs-ball-run {
    color: #ffeb3b;
}

.cfs-ball[data-wicket="1"] {
    background: #d50000;
}

/* --- Commentary --- */
.cfs-commentary-wrapper {
    margin-top: 12px;
}

.cfs-com-row {
    padding: 6px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    display: flex;
    gap: 10px;
}

.cfs-com-over {
    min-width: 40px;
    color: #9bb7d1;
    font-weight: 600;
}

.cfs-com-text {
    flex: 1;
    color: #e6eef6;
}
/* responsive */
@media (max-width:720px) {

  .team-block { width:100px; }

  .cfs-body { 
      padding:8px; 
      min-height:60px; 
  }

  .cfs-score-large { font-size:20px; }

  .cfs-logos img { width:32px; height:32px; }

  .cfs-team-name { font-size:12px; }

  /* innings summary becomes 1 item per row */
  .cfs-innings-summary {
      flex-direction: column;
      gap:8px;
  }

  .cfs-innings-summary .cfs-pill {
      width: 100%;
      text-align:center;
  }
	.cfs-phase, .cfs-trailing { 

  
	font-size:10px;
}
	
     .cfs-vs-row {
        gap: 14px;
    }

    .cfs-team-col img {
        width: 34px;
        height: 34px;
    }

    .cfs-team-name {
        font-size: 11px;
    }

    .cfs-vs {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
	 .cfs-balls-row {
        gap: 4px;
    }
    .cfs-ball {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
}