/* Enhanced Prediction Card Styles - The Dink Sheet */
.pred-card {
  background: #0f172a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 0;
  margin: 10px 0;
  overflow: hidden;
  transition: border-color .2s;
}
.pred-card:hover { border-color: rgba(78,205,196,.25); }
.pred-card.picked-t1 { border-left: 3px solid #4ecdc4; }
.pred-card.picked-t2 { border-right: 3px solid #4ecdc4; }
.pred-card.completed.correct-result { border-left: 3px solid #4ecdc4; }
.pred-card.completed.upset-result { border-left: 3px solid #ff3366; }

.pred-card-inner { padding: 14px 16px; }

.pred-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}
.pred-side { display: flex; flex-direction: column; gap: 2px; }
.pred-side.right { text-align: right; align-items: flex-end; }
.pred-side.picked .pred-player-name { color: #4ecdc4; }

.pred-player-name {
  font-size: .95rem;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.2;
}
.pred-seed { font-size: .65rem; color: rgba(255,255,255,.35); font-weight: 600; }
.pred-elo-val { font-size: .75rem; color: rgba(255,255,255,.45); font-weight: 600; }
.pred-vs {
  font-size: .7rem;
  font-weight: 800;
  color: rgba(255,255,255,.2);
  letter-spacing: .1em;
}

.pred-stats {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.pred-stat-side { display: flex; flex-direction: column; gap: 2px; }
.pred-stat-side.right { text-align: right; align-items: flex-end; }
.pred-prob {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1;
}
.pred-prob.high { color: #4ecdc4; }
.pred-prob.mid { color: #ffc107; }
.pred-prob.low { color: #888; }

.pred-odds {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.pred-odds.fav { color: #4ecdc4; }
.pred-odds.dog { color: #ff6b35; }

.pred-separator {
  font-size: .6rem;
  color: rgba(255,255,255,.15);
  text-align: center;
}

.pred-prob-bar {
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  background: #1a1a2e;
  margin-top: 10px;
}
.pred-prob-fill-1 {
  background: linear-gradient(90deg, #4ecdc4, #4ecdc4);
  transition: width .4s;
}
.pred-prob-fill-2 {
  background: linear-gradient(90deg, #ff6b6b, #ff6b35);
  transition: width .4s;
}

.pred-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
  gap: 6px;
}

.pred-conf-badge {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  display: inline-block;
}
.pred-conf-high { background: rgba(0,200,83,.15); color: #4ecdc4; border: 1px solid rgba(0,200,83,.3); }
.pred-conf-moderate { background: rgba(255,193,7,.15); color: #ffc107; border: 1px solid rgba(255,193,7,.3); }
.pred-conf-lean { background: rgba(255,107,53,.15); color: #ff6b35; border: 1px solid rgba(255,107,53,.3); }
.pred-conf-coinflip { background: rgba(136,136,136,.15); color: #888; border: 1px solid rgba(136,136,136,.3); }

.pred-elo-gap {
  font-size: .75rem;
  font-weight: 700;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}
.pred-elo-gap.huge { color: #4ecdc4; }
.pred-elo-gap.big { color: #4ecdc4; }
.pred-elo-gap.med { color: #ffc107; }
.pred-elo-gap.small { color: #888; }

.pred-result-banner {
  text-align: center;
  padding: 5px 10px;
  font-size: .75rem;
  font-weight: 700;
}
.pred-result-banner.correct { background: rgba(0,200,83,.1); color: #4ecdc4; }
.pred-result-banner.upset { background: rgba(255,51,102,.1); color: #ff3366; }

.pred-score-display {
  font-size: .85rem;
  font-weight: 700;
  color: rgba(255,255,255,.6);
}

.pred-h2h-note {
  font-size: .7rem;
  color: rgba(255,255,255,.35);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.04);
}

/* Winner/Loser states */
.pred-side.winner .pred-player-name { color: #4ecdc4; }
.pred-side.winner::after {
  content: '✅';
  font-size: .7rem;
}
.pred-side.loser .pred-player-name {
  color: rgba(255,255,255,.25);
  text-decoration: line-through;
  text-decoration-color: rgba(255,255,255,.15);
}
.pred-side.loser .pred-elo-val,
.pred-side.loser .pred-seed { color: rgba(255,255,255,.15); }

@media (max-width: 640px) {
  .pred-matchup, .pred-stats {
    grid-template-columns: 1fr;
    text-align: center !important;
  }
  .pred-side, .pred-side.right,
  .pred-stat-side, .pred-stat-side.right {
    text-align: center !important;
    align-items: center !important;
  }
  .pred-vs, .pred-separator { margin: 4px 0; }
  .pred-prob { font-size: 1.1rem; }
  .pred-player-name { font-size: .85rem; }
}