/* ============================================================
   SEAMHEADS — Homepage
   css/homepage.css
   Loaded after design-system.css and redesign.css
   ============================================================ */


/* ─── HERO: SPLIT LAYOUT ───────────────────────────────────── */

.hp-hero {
  padding: 3.5rem 0 3rem;
  position: relative;
}

/* Diagonal dot grid atmosphere */
.hp-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,183,27,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Gold diagonal slash across hero bottom */
.hp-hero-slash {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--red) 30%, rgba(255,183,27,0.4) 70%, transparent 100%);
  z-index: 2;
}

.hp-hero__layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  align-items: center;
  gap: 3rem;
  position: relative;
  z-index: 1;
}

.hp-hero__left {
  text-align: left;
}

.hp-hero__left .ds-hero__title {
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
}

.hp-hero__left .ds-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.hp-hero__left .ds-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
}

.hp-hero__left .ds-hero__sub {
  max-width: 520px;
  margin: 1rem 0 0;
}

.hp-hero__left .ds-hero__actions {
  justify-content: flex-start;
  margin-top: 1.8rem;
}

/* Right: stat grid */
.hp-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--g700);
  border: 1px solid var(--g700);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.hp-stat-box {
  background: rgba(15,32,68,0.9);
  padding: 1.4rem 1.2rem;
  text-align: center;
  position: relative;
  transition: background 0.2s;
}

.hp-stat-box:hover {
  background: var(--g800);
}

.hp-stat-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,183,27,0.4), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.hp-stat-box:hover::after {
  opacity: 1;
}

.hp-stat-box__val {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  color: var(--red);
  line-height: 1;
  letter-spacing: -0.02em;
}

.hp-stat-box__label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g500);
  margin-top: 0.45rem;
}

@media (max-width: 860px) {
  .hp-hero__layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .hp-hero__left {
    text-align: center;
  }
  .hp-hero__left .ds-hero__eyebrow::before {
    display: none;
  }
  .hp-hero__left .ds-hero__sub {
    margin: 1rem auto 0;
  }
  .hp-hero__left .ds-hero__actions {
    justify-content: center;
  }
  .hp-stat-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 580px) {
  .hp-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ─── TICKER STRIP ─────────────────────────────────────────── */

.hp-ticker {
  background: var(--g900);
  border-top: 1px solid var(--g700);
  border-bottom: 1px solid var(--g800);
  overflow: hidden;
  position: relative;
}

.hp-ticker::before,
.hp-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  width: 100px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.hp-ticker::before {
  left: 0;
  background: linear-gradient(to right, var(--g900), transparent);
}

.hp-ticker::after {
  right: 0;
  background: linear-gradient(to left, var(--g900), transparent);
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hp-ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ticker-scroll 50s linear infinite;
  padding: 0.65rem 0;
}

.hp-ticker__track:hover {
  animation-play-state: paused;
}

.hp-ticker__item {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--g300);
  white-space: nowrap;
  padding: 0 2.5rem;
}

.hp-ticker__label {
  color: var(--red);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.6rem;
  margin-right: 0.4em;
}

.hp-ticker__sep {
  color: var(--g700);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  user-select: none;
}

.hp-ticker__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--red);
  border-radius: 50%;
  margin: 0 1.5rem;
  vertical-align: middle;
  opacity: 0.6;
}


/* ─── SECTION HEADER LAYOUT ─────────────────────────────────── */

.hp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.hp-header__sub {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--g400);
  letter-spacing: 0.08em;
  margin-top: 0.3rem;
}

/* Section entrance stagger */
.ds-section:nth-child(1)  { animation-delay: 0.05s; }
.ds-section:nth-child(2)  { animation-delay: 0.10s; }
.ds-section:nth-child(3)  { animation-delay: 0.15s; }
.ds-section:nth-child(4)  { animation-delay: 0.20s; }
.ds-section:nth-child(5)  { animation-delay: 0.25s; }
.ds-section:nth-child(6)  { animation-delay: 0.30s; }
.ds-section:nth-child(7)  { animation-delay: 0.35s; }
.ds-section:nth-child(8)  { animation-delay: 0.40s; }
.ds-section:nth-child(9)  { animation-delay: 0.45s; }
.ds-section:nth-child(10) { animation-delay: 0.50s; }


/* ─── LIVE SCORES GRID ─────────────────────────────────────── */

.hp-scores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.hp-score {
  display: block;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: 0.9rem 1rem;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.hp-score:hover {
  border-color: var(--g500);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.hp-score__status {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: 0.5rem;
  display: block;
}

.hp-score__status--live  { color: #ef4444; }
.hp-score__status--final { color: var(--g400); }

.hp-score__row {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0;
  font-size: 0.88rem;
}

.hp-score__row--winner   { font-weight: 700; color: var(--white); }
.hp-score__name          { color: var(--g200); }
.hp-score__val           { font-family: var(--font-mono); font-weight: 700; color: var(--g200); }
.hp-score__rank          { font-size: 0.72rem; color: var(--red); font-weight: 700; }


/* ─── DESTINATION CARDS ─────────────────────────────────────── */

.hp-destinations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.hp-dest {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.3rem 1.5rem;
  text-decoration: none;
  color: inherit;
  border-top: 2px solid transparent;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.hp-dest:hover {
  border-top-color: rgba(255,183,27,0.4);
  box-shadow: 0 0 20px rgba(255,183,27,0.05);
  transform: translateY(-1px);
}

.hp-dest__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--g800);
  border: 2px solid var(--g600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
}

.hp-dest:hover .hp-dest__icon {
  border-color: var(--red);
  background: rgba(255,183,27,0.08);
}

.hp-dest__body   { flex: 1; min-width: 0; }

.hp-dest__title {
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.2rem;
}

.hp-dest__desc {
  font-size: 0.82rem;
  color: var(--g400);
  line-height: 1.5;
}

.hp-dest__arrow {
  font-size: 1.2rem;
  color: var(--g500);
  transition: color 0.2s, transform 0.2s;
}

.hp-dest:hover .hp-dest__arrow {
  color: var(--red);
  transform: translateX(4px);
}


/* ─── WHY SEAMHEADS FEATURES ─────────────────────────────────── */

.hp-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.hp-feature {
  padding: 1.4rem;
  border-top: 2px solid transparent;
  transition: border-top-color 0.2s;
}

.hp-feature:hover {
  border-top-color: rgba(255,183,27,0.35);
}

.hp-feature__icon  { font-size: 1.6rem; margin-bottom: 0.8rem; }

.hp-feature__title {
  font-family: var(--font-display);
  font-size: 0.92rem;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.4rem;
}

.hp-feature__desc {
  font-size: 0.85rem;
  color: var(--g400);
  line-height: 1.55;
}


/* ─── MODEL COMPONENTS ─────────────────────────────────────── */

.hp-model__text {
  font-size: 1rem;
  color: var(--g300);
  max-width: 720px;
  line-height: 1.65;
  margin-bottom: 1.5rem;
}

.hp-model__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.hp-model__comp         { padding: 1.1rem; text-align: center; }

.hp-model__comp-pct {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--white);
}

.hp-model__comp-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--g400);
  margin-top: 0.2rem;
}

.hp-model__comp-detail {
  font-size: 0.78rem;
  color: var(--g500);
  margin-top: 0.3rem;
}


/* ─── RANKING MOVERS ─────────────────────────────────────────── */

.hp-movers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.hp-movers__col-title {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--g500);
  margin-bottom: 0.9rem;
}

.hp-mover {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--g800);
}

.hp-mover:last-child { border-bottom: none; }

.hp-mover__rank {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--g500);
  width: 2rem;
  flex-shrink: 0;
  text-align: right;
}

.hp-mover__name {
  flex: 1;
  font-size: 0.9rem;
  color: var(--white);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-mover__conf {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--g600);
  flex-shrink: 0;
}

.hp-mover__delta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  width: 3rem;
  text-align: right;
}

.hp-mover__delta--up   { color: #22c55e; }
.hp-mover__delta--down { color: #ef4444; }
.hp-mover__delta--same { color: var(--g600); }

.hp-movers__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(239,68,68,0.12);
  color: var(--red);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

@media (max-width: 700px) {
  .hp-movers { grid-template-columns: 1fr; }
}


/* ─── CTA SECTION ────────────────────────────────────────────── */

.hp-cta { text-align: center; padding: 2.5rem 2rem; }

.hp-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--g400);
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.hp-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 0.8rem;
}

.hp-cta__text {
  font-size: 1rem;
  color: var(--g300);
  max-width: 560px;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

.hp-cta__badges {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}


/* ─── EMPTY / ERROR STATES ───────────────────────────────────── */

.state--empty,
.state--error {
  padding: 2rem;
  text-align: center;
  color: var(--g500);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}


/* ─── BEST RECORDS BY DAY ────────────────────────────────────── */

.hp-dow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.hp-dow-card { padding: 1.2rem 1.4rem; }

.hp-dow-card__day {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.85rem;
}

.hp-dow-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0;
  border-bottom: 1px solid var(--g800);
}

.hp-dow-row:last-child { border-bottom: none; }

.hp-dow-row__rank {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--g600);
  width: 1.1rem;
  flex-shrink: 0;
  text-align: right;
}

.hp-dow-row__name {
  flex: 1;
  font-size: 0.87rem;
  color: var(--g200);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hp-dow-row__name a { color: inherit; text-decoration: none; }
.hp-dow-row__name a:hover { color: var(--red); }

.hp-dow-row__pct {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--white);
  width: 3.4rem;
  text-align: right;
  flex-shrink: 0;
}

.hp-dow-row__rec {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--g500);
  width: 3.2rem;
  text-align: right;
  flex-shrink: 0;
}

.hp-dow-empty {
  font-size: 0.82rem;
  color: var(--g500);
  padding: 0.25rem 0;
}

@media (max-width: 900px) { .hp-dow-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .hp-dow-grid { grid-template-columns: 1fr; } }


/* ─── TOP ARMS ───────────────────────────────────────────────── */

.hp-arms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 700px) { .hp-arms-grid { grid-template-columns: 1fr; } }

.hp-arm-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--g800);
  flex-wrap: wrap;
}

.hp-arm-row:last-child { border-bottom: none; }

.hp-arm-row__name {
  flex: 1;
  font-size: 0.87rem;
  color: var(--white);
  font-weight: 500;
  min-width: 100px;
}

.hp-arm-row__pos {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--g500);
  white-space: nowrap;
}

.hp-arm-row__team {
  font-size: 0.78rem;
  color: var(--g400);
  min-width: 80px;
}

.hp-arm-row__team a { color: inherit; text-decoration: none; }
.hp-arm-row__team a:hover { color: var(--red); }

.hp-arm-row__stat {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--g300);
  white-space: nowrap;
}

.hp-arm-row__grade { color: var(--red); font-weight: 600; }


/* ─── UPSET ALERT ────────────────────────────────────────────── */

.hp-upset-card { padding: 1.2rem 1.4rem; max-width: 820px; }

.hp-upset-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--g800);
  flex-wrap: wrap;
}

.hp-upset-row:last-child { border-bottom: none; }

.hp-upset-row__team {
  flex: 1;
  font-size: 0.87rem;
  color: var(--white);
  font-weight: 500;
  min-width: 120px;
}

.hp-upset-row__game {
  font-size: 0.78rem;
  color: var(--g500);
  min-width: 140px;
}

.hp-upset-row__odds { font-family: var(--font-mono); font-size: 0.78rem; color: #22c55e; font-weight: 600; white-space: nowrap; }
.hp-upset-row__model { font-family: var(--font-mono); font-size: 0.72rem; color: var(--g300); white-space: nowrap; }
.hp-upset-row__edge  { font-family: var(--font-mono); font-size: 0.72rem; color: var(--red); font-weight: 600; white-space: nowrap; }


/* ─── STREAKS ────────────────────────────────────────────────── */

.hp-streak-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--g800);
}

.hp-streak-row:last-child { border-bottom: none; }

.hp-streak-row__name { flex: 1; font-size: 0.87rem; color: var(--white); }

.hp-streak-row__name a { color: inherit; text-decoration: none; }
.hp-streak-row__name a:hover { color: var(--red); }

.hp-streak-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
  padding: 0.15em 0.5em;
  border-radius: 4px;
}

.hp-streak-badge--win  { background: rgba(34,197,94,0.15); color: #22c55e; }
.hp-streak-badge--loss { background: rgba(239,68,68,0.12); color: #f87171; }


/* ─── ARM BADGE ──────────────────────────────────────────────── */

.hp-arm-badge {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--g800);
  color: var(--g400);
  border: 1px solid var(--g700);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  white-space: nowrap;
}


/* ─── RESPONSIVE GRID OVERRIDES ──────────────────────────────── */

@media (min-width: 901px) {
  .hp-scores         { grid-template-columns: repeat(3, 1fr); }
  .hp-destinations   { grid-template-columns: repeat(3, 1fr); }
  .hp-features       { grid-template-columns: repeat(3, 1fr); }
  .hp-model__grid    { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 600px) {
  .hp-hero      { padding: 3rem 0 2.5rem; }
  .hp-destinations { grid-template-columns: 1fr; }
  .hp-features  { grid-template-columns: 1fr; }
  .hp-scores    { grid-template-columns: repeat(2, 1fr); }
}


/* ═══════════════════════════════════════════════════════════════
   DAILY PREVIEW SECTION  (.hp-dp-*)
   Wired to the same live pipeline as today.js — no static content.
   ═══════════════════════════════════════════════════════════════ */

.hp-dp-section {
  padding: 3rem 0 2.5rem;
  border-top: 2px solid rgba(255,183,27,0.18);
  background: linear-gradient(180deg, rgba(255,183,27,0.025) 0%, transparent 220px);
  position: relative;
}

/* ─── Header ────────────────────────────────────────────────── */
.hp-dp-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}

.hp-dp-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.hp-dp-eyebrow::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
}

.hp-dp-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

.hp-dp-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--g500);
  letter-spacing: 0.06em;
  margin-top: 0.4rem;
}

.hp-dp-notice {
  background: rgba(255,183,27,0.08);
  border: 1px solid rgba(255,183,27,0.25);
  border-radius: 8px;
  padding: 0.6rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--red);
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

/* ─── Chips strip ───────────────────────────────────────────── */
.hp-dp-chips {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.8rem;
}

.hp-dp-chip {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  min-width: 100px;
}

.hp-dp-chip__label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g600);
  margin-bottom: 0.25rem;
}

.hp-dp-chip__val {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
}

.hp-dp-chip__val--premium,
.hp-dp-chip__val--strong { color: #4ade80; }
.hp-dp-chip__val--slight  { color: var(--red); }

/* ─── 3-col matchup card grid ───────────────────────────────── */
.hp-dp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hp-dp-card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color 0.2s, transform 0.18s, box-shadow 0.2s;
}

.hp-dp-card:hover {
  border-color: var(--g500);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

.hp-dp-card--top {
  border-top: 2px solid var(--red);
}

.hp-dp-card--top:hover {
  border-color: var(--red);
  box-shadow: 0 8px 28px rgba(255,183,27,0.12);
}

/* Badges row */
.hp-dp-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.7rem;
}

.hp-dp-badge {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid transparent;
}

.hp-dp-badge--top     { background: rgba(255,183,27,0.15); border-color: rgba(255,183,27,0.4); color: var(--red); }
.hp-dp-badge--live    { background: rgba(239,68,68,0.15);  border-color: rgba(239,68,68,0.4);  color: #ef4444; }
.hp-dp-badge--ranked  { background: rgba(168,85,247,0.15); border-color: rgba(168,85,247,0.4); color: #a855f7; }
.hp-dp-badge--premium { background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.35); color: #4ade80; }
.hp-dp-badge--strong  { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.25); color: #86efac; }
.hp-dp-badge--slight  { background: rgba(255,183,27,0.1);  border-color: rgba(255,183,27,0.3);  color: var(--red); }

/* Matchup row: team | center | team */
.hp-dp-card__matchup {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.hp-dp-card__team {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.hp-dp-card__team--right {
  /* mirror of default — text-align handled by parent */
}

.hp-dp-card__logo {
  display: flex;
  justify-content: center;
  margin-bottom: 0.35rem;
}

.hp-dp-card__logo img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.hp-dp-card__name {
  font-family: var(--font-display);
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-dp-card__rec {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--g500);
  margin-top: 0.1rem;
}

.hp-dp-card__rank {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--red);
  display: block;
  margin-top: 0.15rem;
}

.hp-dp-card__center {
  text-align: center;
  min-width: 60px;
  flex-shrink: 0;
}

.hp-dp-time {
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--white);
}

.hp-dp-vs {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  color: var(--g600);
  letter-spacing: 0.1em;
  margin-top: 0.15rem;
}

.hp-dp-live-score,
.hp-dp-final-score {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--white);
}

.hp-dp-live-label  { display: block; font-family: var(--font-mono); font-size: 0.55rem; color: #ef4444; letter-spacing: 0.1em; margin-top: 0.1rem; }
.hp-dp-final-label { display: block; font-family: var(--font-mono); font-size: 0.55rem; color: var(--g500); letter-spacing: 0.1em; margin-top: 0.1rem; }

/* Prob bar */
.hp-dp-card__prob {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  border-top: 1px solid var(--g800);
  padding-top: 0.65rem;
}

.hp-dp-prob-bar {
  flex: 1;
  height: 5px;
  background: var(--g800);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.hp-dp-prob-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #4ade80, #22d3ee);
  border-radius: 3px;
}

.hp-dp-prob-pct {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--g300);
  min-width: 30px;
}

.hp-dp-odds {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--g500);
  text-align: center;
  margin-bottom: 0.45rem;
}

.hp-dp-odds strong { color: var(--g300); }

/* Blurb */
.hp-dp-card__blurb {
  font-size: 0.78rem;
  color: var(--g400);
  line-height: 1.5;
  border-top: 1px solid var(--g800);
  padding-top: 0.6rem;
  margin-top: 0.3rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ─── Lower 2-col panels ────────────────────────────────────── */
.hp-dp-lower {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.hp-dp-panel {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
}

.hp-dp-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g400);
  border-bottom: 1px solid var(--g800);
  padding-bottom: 0.7rem;
}

.hp-dp-panel__more {
  font-size: 0.6rem;
  color: var(--red);
  text-decoration: none;
  letter-spacing: 0.06em;
}

.hp-dp-panel__more:hover { text-decoration: underline; }

/* Edge rows */
.hp-dp-edge-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--g800);
  font-size: 0.8rem;
}

.hp-dp-edge-row:last-child { border-bottom: none; }

.hp-dp-tier {
  font-family: var(--font-mono);
  font-size: 0.54rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  flex-shrink: 0;
}

.hp-dp-tier--premium { background: rgba(74,222,128,0.12); color: #4ade80; }
.hp-dp-tier--strong  { background: rgba(74,222,128,0.08); color: #86efac; }
.hp-dp-tier--slight  { background: rgba(255,183,27,0.1);  color: var(--red); }

.hp-dp-edge-team {
  font-weight: 600;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.hp-dp-edge-opp {
  font-size: 0.72rem;
  color: var(--g500);
  white-space: nowrap;
}

.hp-dp-edge-val {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #4ade80;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.hp-dp-edge-time {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--g600);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Intel rows */
.hp-dp-intel-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--g800);
  font-size: 0.8rem;
  line-height: 1.45;
}

.hp-dp-intel-row:last-child { border-bottom: none; }

.hp-dp-intel-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.hp-dp-intel-text {
  color: var(--g400);
  font-size: 0.78rem;
}

.hp-dp-intel-text strong { color: var(--white); }

/* Empty states */
.hp-dp-empty {
  font-size: 0.85rem;
  color: var(--g500);
  padding: 1rem 0;
}

.hp-dp-empty a { color: var(--red); }
.hp-dp-empty-sm { font-size: 0.78rem; color: var(--g600); padding: 0.5rem 0; margin: 0; }

/* ─── Big CTA ────────────────────────────────────────────────── */
.hp-dp-cta {
  text-align: center;
}

.hp-dp-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  background: rgba(255,183,27,0.07);
  border: 1px solid rgba(255,183,27,0.3);
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.18s, box-shadow 0.2s;
}

.hp-dp-cta-btn:hover {
  background: rgba(255,183,27,0.14);
  border-color: rgba(255,183,27,0.55);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,183,27,0.12);
}

.hp-dp-cta-arrow {
  font-size: 1.1rem;
  transition: transform 0.2s;
}

.hp-dp-cta-btn:hover .hp-dp-cta-arrow { transform: translateX(4px); }

/* ─── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hp-dp-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .hp-dp-lower { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hp-dp-cards  { grid-template-columns: 1fr; }
  .hp-dp-chips  { gap: 0.4rem; }
  .hp-dp-chip   { min-width: calc(50% - 0.2rem); }
  .hp-dp-cta-btn { width: 100%; justify-content: center; }
}


/* ─── COUNT-UP ANIMATION ─────────────────────────────────────── */

@keyframes count-up-flash {
  from { color: var(--white); }
  to   { color: var(--red); }
}

.hp-stat-box__val.is-counting {
  animation: count-up-flash 0.8s ease-out forwards;
}