/* ===============================================================
   Bad Bets — Hub v2 redesign
   Time-aware hero strip + Lock of the Day + streaks bar
   =============================================================== */

/* ===== Hero strip ===== */
.bb-hero {
  position: relative;
  overflow: hidden;
  margin-top: 14px;
  padding: 22px 24px;
  border-radius: 18px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255,170,0,0.10) 0%, transparent 50%),
    radial-gradient(120% 100% at 100% 100%, rgba(40,214,112,0.08) 0%, transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
}
.bb-hero[data-mood="morning"]  { border-color: rgba(255,170,0,0.22); }
.bb-hero[data-mood="live"]     { border-color: rgba(40,214,112,0.30); }
.bb-hero[data-mood="evening"]  { border-color: rgba(120,160,255,0.25); }
.bb-hero[data-mood="late"]     { border-color: rgba(140,140,160,0.22); }

.bb-hero-pulse {
  position: absolute;
  inset: -2px;
  pointer-events: none;
  background: radial-gradient(60% 50% at 80% 50%, rgba(40,214,112,0.06) 0%, transparent 70%);
  animation: bb-hero-pulse 8s ease-in-out infinite;
  opacity: 0;
}
.bb-hero[data-mood="live"] .bb-hero-pulse { opacity: 1; }
@keyframes bb-hero-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.bb-hero-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 6px;
}
.bb-hero-mood {
  padding: 3px 9px; border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.bb-hero[data-mood="morning"] .bb-hero-mood { background: rgba(255,170,0,0.16); color: var(--amber); }
.bb-hero[data-mood="live"]    .bb-hero-mood { background: rgba(40,214,112,0.16); color: var(--green); }
.bb-hero[data-mood="evening"] .bb-hero-mood { background: rgba(120,160,255,0.16); color: #9ab4ff; }
.bb-hero[data-mood="late"]    .bb-hero-mood { background: rgba(140,140,160,0.16); color: var(--text-2); }
.bb-hero-time { color: var(--muted); }

.bb-hero-headline {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 4.2vw, 44px);
  letter-spacing: -0.5px;
  line-height: 1.05;
  margin: 0 0 6px 0;
}
.bb-hero-sub {
  font-size: 14px;
  color: var(--text-2);
  display: flex; flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
}
.bb-hero-sub b { color: var(--text); font-weight: 800; font-family: var(--font-display); letter-spacing: 0.5px; }
.bb-hero-sub .bb-hero-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(255,255,255,0.05);
  font-size: 12px;
}
.bb-hero-sub .bb-hero-chip.green { background: rgba(40,214,112,0.12); color: var(--green); }
.bb-hero-sub .bb-hero-chip.red   { background: rgba(255,80,80,0.12); color: #ff8080; }
.bb-hero-sub .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: bb-live-pulse 1.6s ease-in-out infinite;
  display: inline-block;
}
@keyframes bb-live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.bb-hero-refresh {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-2);
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 800; font-size: 12px; letter-spacing: 1px;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s;
}
.bb-hero-refresh:hover { color: var(--text); background: rgba(255,255,255,0.10); }
.bb-hero-refresh.spinning .bb-hero-refresh-icon {
  display: inline-block;
  animation: bb-spin 0.8s linear;
}
@keyframes bb-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ===== Lock of the Day ===== */
.bb-lod {
  margin-top: 18px;
}
.bb-lod-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 8px;
}
.bb-lod-flame { font-size: 14px; }
.bb-lod-edge {
  margin-left: auto;
  background: rgba(255,170,0,0.16);
  color: var(--amber);
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
}
.bb-lod-card {
  padding: 22px;
  border-radius: 16px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,170,0,0.10) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,170,0,0.25);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
}
.bb-lod-skeleton { color: var(--muted); font-size: 13px; text-align: center; padding: 12px; }
.bb-lod-teams {
  display: flex; flex-direction: column; gap: 4px;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 900;
}
.bb-lod-matchup {
  display: flex; align-items: center; gap: 12px;
  font-size: 32px;
  letter-spacing: 1px;
}
.bb-lod-matchup .vs { color: var(--muted); font-size: 18px; font-weight: 700; }
.bb-lod-pitchers {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.bb-lod-pick {
  display: flex; flex-direction: column;
  gap: 6px;
  text-align: center;
  padding: 12px 18px;
  border-left: 1px solid var(--border);
}
.bb-lod-pick-label {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
}
.bb-lod-pick-team {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: 1px;
}
.bb-lod-pick-edge {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  color: var(--amber);
}
.bb-lod-reason {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-2);
  max-width: 220px;
  text-align: left;
  border-left: 1px solid var(--border);
  padding-left: 16px;
}
.bb-lod-reason-label {
  font-family: var(--font-display);
  font-size: 9px; letter-spacing: 2px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.bb-lod-cta {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 1.5px;
  color: var(--amber); text-decoration: none;
  text-transform: uppercase;
}

@media (max-width: 800px) {
  .bb-lod-card {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .bb-lod-pick, .bb-lod-reason {
    border-left: 0; border-top: 1px solid var(--border);
    padding: 12px 0 0;
    max-width: none;
    text-align: center;
  }
}

/* ===== Streak bar ===== */
.bb-streak-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.bb-streak-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
}
.bb-streak-card:hover { border-color: rgba(255,255,255,0.12); }
.bb-streak-k {
  font-family: var(--font-display);
  font-size: 10px; letter-spacing: 2px;
  color: var(--muted); text-transform: uppercase;
  font-weight: 800;
}
.bb-streak-v {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: 0.5px;
  color: var(--text);
}
.bb-streak-v.up    { color: var(--green); }
.bb-streak-v.down  { color: #ff8080; }
.bb-streak-v.hot   { color: var(--amber); text-shadow: 0 0 20px rgba(255,170,0,0.4); }
.bb-streak-sub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}

/* Streak fire indicator */
.bb-streak-card.hot::after {
  content: "🔥";
  position: absolute;
  top: 8px; right: 10px;
  font-size: 14px;
  animation: bb-flame-flicker 1.4s ease-in-out infinite;
}
@keyframes bb-flame-flicker {
  0%, 100% { transform: scale(1) rotate(0); opacity: 0.9; }
  50%      { transform: scale(1.1) rotate(-3deg); opacity: 1; }
}
.bb-streak-card.cold::after {
  content: "🧊";
  position: absolute;
  top: 8px; right: 10px;
  font-size: 14px;
  opacity: 0.7;
}

@media (max-width: 800px) {
  .bb-streak-bar { grid-template-columns: repeat(2, 1fr); }
  .bb-hero {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .bb-hero-refresh-label { display: none; }
  .bb-hero-refresh {
    position: absolute; top: 14px; right: 14px;
    padding: 6px 10px;
  }
}