/* Match prediction — explicit grid areas (no conflicting span classes) */

.pred-page-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@media (min-width: 640px) {
  .pred-page-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 2.25rem;
    padding-bottom: 1.75rem;
  }
}

.pred-page-header-text {
  min-width: 0;
  flex: 1;
}

.pred-header-btn {
  padding: 0.4rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  width: auto;
  align-self: flex-start;
}

@media (min-width: 640px) {
  .pred-header-btn {
    margin-top: 0.35rem;
  }
}

.pred-grid {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "hasil"
    "score"
    "tips"
    "stats"
    "h2h"
    "form"
    "tactical"
    "odds"
    "provider";
}

#card-hasil { grid-area: hasil; }
#card-skor { grid-area: score; }
#card-tips { grid-area: tips; }
#card-stats { grid-area: stats; }
#card-h2h { grid-area: h2h; }
#card-form { grid-area: form; }
#card-tactical { grid-area: tactical; }
#card-odds { grid-area: odds; }
#card-api-pred { grid-area: provider; }

.pred-grid-extra {
  display: grid;
  gap: 0.875rem;
  grid-template-columns: 1fr;
  margin-top: 0.875rem;
}

.pred-grid-extra:not(:has(.pred-card:not(.is-empty))) {
  display: none;
}

@media (min-width: 640px) {
  .pred-grid-extra {
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
  }

  #card-live-stats {
    grid-column: 1 / -1;
  }
}

@media (min-width: 640px) {
  .pred-grid {
    gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "hasil hasil"
      "score score"
      "tips tips"
      "stats stats"
      "h2h h2h"
      "form form"
      "tactical tactical"
      "odds provider";
  }

  #card-skor .pred-score-hero {
    min-height: 6rem;
  }
}

@media (min-width: 768px) {
  .pred-grid {
    grid-template-areas:
      "hasil score"
      "tips stats"
      "h2h h2h"
      "form form"
      "tactical tactical"
      "odds provider";
  }
}

@media (min-width: 1024px) {
  .pred-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "hasil hasil hasil hasil hasil hasil hasil hasil score score score score"
      "tips tips tips tips tips tips stats stats stats stats stats stats"
      "h2h h2h h2h h2h h2h h2h h2h h2h h2h h2h h2h h2h"
      "form form form form form form form form form form form form"
      "tactical tactical tactical tactical tactical tactical tactical tactical tactical tactical tactical tactical"
      "odds odds odds odds odds odds provider provider provider provider provider provider";
  }
}

.pred-card {
  min-width: 0;
  min-height: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
}

.pred-card--optional.is-empty {
  display: none !important;
}

.pred-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.pred-card-head h2 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(103 232 249 / 0.9);
  letter-spacing: 0.02em;
}

.pred-card-tag {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.35);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.pred-score-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  text-align: center;
  gap: 0.35rem;
}

@media (min-width: 768px) {
  .pred-score-hero {
    min-height: 100%;
    min-height: 7.5rem;
  }
}

.pred-score-hero #pred-score-mount {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  line-height: 1;
  background: linear-gradient(135deg, #fff 30%, rgb(103 232 249 / 0.85));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pred-score-hero #pred-score-mount.is-placeholder {
  background: none;
  color: rgba(255, 255, 255, 0.35);
}

.pred-score-label {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.pred-bar-row {
  display: grid;
  grid-template-columns: minmax(5rem, 32%) 1fr 2.75rem;
  align-items: center;
  gap: 0.5rem;
}

.pred-bar-track {
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}

.pred-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.45s ease;
}

/* Always 2×2 inside stat card — avoids overlap in narrow columns */
.pred-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 1024px) {
  .pred-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.pred-stat-tile {
  padding: 0.55rem 0.65rem;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
}

.pred-stat-tile-label {
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.35rem;
  line-height: 1.25;
  word-break: break-word;
}

.pred-stat-tile-values {
  display: flex;
  justify-content: space-between;
  gap: 0.35rem;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
}

.pred-stat-tile-values span {
  min-width: 0;
}

.pred-stat-tile-values span:first-child {
  color: rgb(103 232 249 / 0.9);
}

.pred-stat-tile-values span:last-child {
  color: rgb(52 211 153 / 0.9);
}

.pred-tip-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.5rem;
  align-items: start;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pred-tip-row:last-child {
  border-bottom: none;
}

.pred-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  width: 2.5rem;
  padding-top: 0.1rem;
}

.pred-dot {
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.35);
}

.pred-dot.on {
  background: rgb(168, 85, 247);
}

.pred-tip-key {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.3;
}

.pred-tip-val {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.35;
  word-break: break-word;
}

.pred-form-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.pred-form-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto auto;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: 0.6875rem;
  padding: 0.35rem 0.5rem;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.15);
}

.pred-form-date {
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

.pred-form-opp {
  color: rgba(255, 255, 255, 0.75);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pred-form-score {
  font-family: ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.85);
}

.pred-form-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.35rem;
  font-size: 0.625rem;
  font-weight: 700;
}

.pred-form-badge--w {
  background: rgba(34, 197, 94, 0.2);
  color: rgb(74 222 128);
}

.pred-form-badge--d {
  background: rgba(251, 191, 36, 0.2);
  color: rgb(251 191 36);
}

.pred-form-badge--l {
  background: rgba(248, 113, 113, 0.2);
  color: rgb(248 113 113);
}

.pred-form-empty {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
  padding: 0.5rem;
  text-align: center;
  border-radius: 0.5rem;
  border: 1px dashed rgba(255, 255, 255, 0.08);
}

.pred-table tbody tr:last-child {
  border-bottom: none;
}

.pred-table th,
.pred-table td {
  padding: 0.45rem 0.4rem;
}

.pred-odds-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.pred-odds-chip {
  text-align: center;
  padding: 0.55rem 0.35rem;
  border-radius: 0.65rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.pred-odds-chip-label {
  display: block;
  font-size: 0.625rem;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.2rem;
}

.pred-odds-chip-val {
  font-family: ui-monospace, monospace;
  font-size: 0.9375rem;
  font-weight: 700;
  color: rgb(103 232 249 / 0.95);
}

.pred-provider-pct {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.pred-provider-pill {
  font-size: 0.6875rem;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(103, 232, 249, 0.1);
  border: 1px solid rgba(103, 232, 249, 0.2);
  color: rgba(255, 255, 255, 0.8);
}

.pred-team-block {
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pred-team-block:last-child {
  border-bottom: none;
}

.pred-muted {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}