/* FantasyHQ Playoff Bracket — editorial share card */

.pp-po-share-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.pp-po-share-card {
  --fh-bg: #1e4468;
  --fh-bg-soft: #255278;
  --fh-surface: rgba(255, 255, 255, 0.09);
  --fh-surface-raised: rgba(255, 255, 255, 0.13);
  --fh-border: rgba(255, 255, 255, 0.16);
  --fh-text: #f8fbff;
  --fh-muted: #c5d6e8;
  --fh-blue: #6ec4ff;
  --fh-win: #3dd68c;
  --fh-gold: #e8c04a;
  --fh-afc: #f87171;
  --fh-nfc: #60c2ff;
  --fh-score-w: 1.4rem;
  --fh-abbr-w: 1.85rem;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 28px 18px;
  border-radius: 18px;
  background: linear-gradient(168deg, #255278 0%, var(--fh-bg) 55%, #1a3d5c 100%);
  color: var(--fh-text);
  box-shadow: 0 10px 32px rgba(15, 40, 68, 0.28);
  box-sizing: border-box;
}

.pp-po-share-card.is-capturing {
  overflow: visible !important;
  box-shadow: none;
}

/* Header */
.pp-po-share-card .pp-po-share-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fh-border);
}

.pp-po-share-card .pp-po-share-head-main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.pp-po-share-card .pp-po-share-brand-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
}

.pp-po-share-card .pp-po-share-eyebrow {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fh-muted);
}

.pp-po-share-card .pp-po-share-title {
  margin: 3px 0 0;
  font-family: var(--pp-display);
  font-size: clamp(1.1rem, 1.5vw, 1.28rem);
  font-weight: 800;
  line-height: 1.15;
  color: #fff;
}

.pp-po-share-card .pp-po-share-champion[hidden] {
  display: none;
}

.pp-po-share-card .pp-po-share-champion-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(232, 192, 74, 0.08);
  border: 1px solid rgba(232, 192, 74, 0.42);
  flex-shrink: 0;
}

.pp-po-share-card .pp-po-share-champion-label {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fh-gold);
}

.pp-po-share-card .pp-po-share-champion-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--pp-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
}

/* Champion summary strip */
.pp-po-share-card .pp-po-share-seed-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(232, 192, 74, 0.07);
  border: 1px solid rgba(232, 192, 74, 0.28);
}

.pp-po-share-card .pp-po-share-seed-strip[hidden] {
  display: none;
}

.pp-po-share-card .pp-po-champ-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
  text-align: center;
}

.pp-po-share-card .pp-po-champ-summary-kicker {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fh-gold);
}

.pp-po-share-card .pp-po-champ-summary-line {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--fh-muted);
}

.pp-po-share-card .pp-po-champ-summary-line strong {
  font-family: var(--pp-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
}

.pp-po-share-card .pp-po-seed-strip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.pp-po-share-card .pp-po-seed-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--fh-muted);
}

.pp-po-share-card .pp-po-seed-chip strong {
  font-family: var(--pp-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
}

.pp-po-share-card .pp-po-seed-chip--afc strong {
  color: var(--fh-afc);
}

.pp-po-share-card .pp-po-seed-chip--nfc strong {
  color: var(--fh-nfc);
}

/* Bracket */
.pp-po-share-card .pp-po-studio-bracket {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pp-po-share-card .pp-po-studio-confs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.pp-po-share-card .pp-po-conf--studio {
  border-radius: 14px;
  background: var(--fh-surface);
  border: 1px solid var(--fh-border);
}

.pp-po-share-card .pp-po-conf--studio.pp-po-conf--afc {
  border-top: 3px solid var(--fh-afc);
}

.pp-po-share-card .pp-po-conf--studio.pp-po-conf--nfc {
  border-top: 3px solid var(--fh-nfc);
}

.pp-po-share-card .pp-po-conf-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--fh-border);
}

.pp-po-share-card .pp-po-conf-mark {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

.pp-po-share-card .pp-po-conf-title {
  margin: 0;
  font-family: var(--pp-display);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.pp-po-share-card .pp-po-conf-head--afc .pp-po-conf-title {
  color: #fecaca;
}

.pp-po-share-card .pp-po-conf-head--nfc .pp-po-conf-title {
  color: #bae6fd;
}

/* Round columns + connectors — row height follows WC column only */
.pp-po-share-card .pp-po-rounds--columns {
  display: grid;
  grid-template-columns: 1.35fr 10px 1fr 10px 0.85fr;
  grid-template-rows: auto;
  gap: 0 4px;
  align-items: stretch;
  padding: 10px 12px 8px;
}

.pp-po-share-card .pp-po-round-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pp-po-share-card .pp-po-round-col--div .pp-po-round-body {
  justify-content: space-around;
  flex: 1;
}

.pp-po-share-card .pp-po-round-col--conf .pp-po-round-body {
  justify-content: center;
  flex: 1;
}

.pp-po-share-card .pp-po-round-col--conf {
  margin-top: -2px;
}

.pp-po-share-card .pp-po-connector {
  position: relative;
  align-self: stretch;
  min-height: 0;
}

.pp-po-share-card .pp-po-connector::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  width: 1px;
  transform: translateX(-50%);
  background: rgba(180, 201, 222, 0.28);
}

.pp-po-share-card .pp-po-connector::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 1px;
  transform: translateX(0);
  background: rgba(180, 201, 222, 0.28);
}

.pp-po-share-card .pp-po-conf--afc .pp-po-connector.is-win-path::before,
.pp-po-share-card .pp-po-conf--afc .pp-po-connector.is-win-path::after {
  background: rgba(248, 113, 113, 0.55);
}

.pp-po-share-card .pp-po-conf--nfc .pp-po-connector.is-win-path::before,
.pp-po-share-card .pp-po-conf--nfc .pp-po-connector.is-win-path::after {
  background: rgba(96, 194, 255, 0.55);
}

.pp-po-share-card .pp-po-round-head {
  margin-bottom: 5px;
  font-family: var(--pp-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  color: #dbe8f5;
}

.pp-po-share-card .pp-po-round-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pp-po-share-card .pp-po-round-body--conf {
  gap: 4px;
}

.pp-po-share-card .pp-po-conf-finals-label {
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  color: var(--fh-muted);
}

.pp-po-share-card .pp-po-conf-finals-label.is-set {
  color: var(--fh-gold);
}

/* Matchup row — Logo | Team | Score – Score | Team | Logo */
.pp-po-share-card .pp-po-match--compact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 46px;
  padding: 4px 6px;
  border-radius: 8px;
  background: var(--fh-surface-raised);
  border: 1px solid var(--fh-border);
}

.pp-po-share-card .pp-po-match--conf-final {
  min-height: 52px;
  padding: 5px 7px;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pp-po-share-card .pp-po-m-side {
  display: grid;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 1 1 0;
  padding: 3px 5px;
  border-radius: 5px;
}

.pp-po-share-card .pp-po-m-side--away {
  grid-template-columns: auto var(--fh-abbr-w) var(--fh-score-w);
  justify-content: end;
}

.pp-po-share-card .pp-po-m-side--home {
  grid-template-columns: var(--fh-score-w) var(--fh-abbr-w) auto;
  justify-content: start;
}

.pp-po-share-card .pp-po-m-side--ghost {
  visibility: hidden;
}

.pp-po-share-card .pp-po-m-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-po-share-card .pp-po-m-logo .pp-logo {
  flex: 0 0 auto;
}

.pp-po-share-card .pp-po-m-abbr {
  font-family: var(--pp-body);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--fh-text);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-po-share-card .pp-po-m-score {
  font-family: var(--pp-display);
  font-size: 0.76rem;
  font-weight: 800;
  color: #fff;
  width: var(--fh-score-w);
  text-align: center;
}

.pp-po-share-card .pp-po-m-side.is-winner {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
}

.pp-po-share-card .pp-po-m-side--away.is-winner {
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.35);
}

.pp-po-share-card .pp-po-m-side--home.is-winner {
  box-shadow: inset -3px 0 0 rgba(255, 255, 255, 0.35);
}

.pp-po-share-card .pp-po-m-side.is-winner .pp-po-m-score {
  color: #fff;
}

/* AFC — red winner path */
.pp-po-share-card .pp-po-conf--afc .pp-po-m-side.is-winner {
  background: rgba(248, 113, 113, 0.12);
}

.pp-po-share-card .pp-po-conf--afc .pp-po-m-side--away.is-winner {
  box-shadow: inset 3px 0 0 var(--fh-afc);
}

.pp-po-share-card .pp-po-conf--afc .pp-po-m-side--home.is-winner {
  box-shadow: inset -3px 0 0 var(--fh-afc);
}

.pp-po-share-card .pp-po-conf--afc .pp-po-m-side.is-winner .pp-po-m-abbr,
.pp-po-share-card .pp-po-conf--afc .pp-po-m-side.is-winner .pp-po-m-score {
  color: #fecaca;
}

/* NFC — blue winner path */
.pp-po-share-card .pp-po-conf--nfc .pp-po-m-side.is-winner {
  background: rgba(96, 194, 255, 0.12);
}

.pp-po-share-card .pp-po-conf--nfc .pp-po-m-side--away.is-winner {
  box-shadow: inset 3px 0 0 var(--fh-nfc);
}

.pp-po-share-card .pp-po-conf--nfc .pp-po-m-side--home.is-winner {
  box-shadow: inset -3px 0 0 var(--fh-nfc);
}

.pp-po-share-card .pp-po-conf--nfc .pp-po-m-side.is-winner .pp-po-m-abbr,
.pp-po-share-card .pp-po-conf--nfc .pp-po-m-side.is-winner .pp-po-m-score {
  color: #bae6fd;
}

.pp-po-share-card .pp-po-conf--afc .pp-po-match--conf-final .pp-po-m-side.is-winner {
  background: rgba(248, 113, 113, 0.16);
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.4);
}

.pp-po-share-card .pp-po-conf--nfc .pp-po-match--conf-final .pp-po-m-side.is-winner {
  background: rgba(96, 194, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(96, 194, 255, 0.4);
}

.pp-po-share-card .pp-po-m-side.is-bye {
  background: rgba(232, 192, 74, 0.1);
  box-shadow: inset 0 0 0 1px rgba(232, 192, 74, 0.35);
  grid-template-columns: auto var(--fh-abbr-w);
}

.pp-po-share-card .pp-po-m-side.is-loser {
  opacity: 0.58;
}

.pp-po-share-card .pp-po-m-side.is-loser .pp-po-m-score {
  color: #c5d6e8;
}

.pp-po-share-card .pp-po-m-dash {
  flex: 0 0 auto;
  font-family: var(--pp-display);
  font-size: 0.68rem;
  font-weight: 700;
  color: #a8bfd4;
  padding: 0 1px;
}

.pp-po-share-card .pp-po-m-dash--bye {
  color: var(--fh-gold);
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pp-po-share-card .pp-po-match--tbd {
  opacity: 0.55;
}

/* Super Bowl */
.pp-po-share-card .pp-po-studio-sb {
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top: 3px solid var(--fh-gold);
}

.pp-po-share-card .pp-po-sb-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 16px 12px;
}

.pp-po-share-card .pp-po-sb-label {
  font-family: var(--pp-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fh-gold);
}

.pp-po-share-card .pp-po-sb-scoreboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 520px;
}

.pp-po-share-card .pp-po-sb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--fh-border);
}

.pp-po-share-card .pp-po-sb-row--away,
.pp-po-share-card .pp-po-sb-row--home {
  width: 100%;
}

.pp-po-share-card .pp-po-sb-row-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pp-po-share-card .pp-po-sb-row-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.pp-po-share-card .pp-po-sb-row-name {
  font-family: var(--pp-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-po-share-card .pp-po-sb-row-abbr {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fh-muted);
}

.pp-po-share-card .pp-po-sb-row-score {
  font-family: var(--pp-display);
  font-size: 1.55rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  min-width: 2rem;
  text-align: right;
}

.pp-po-share-card .pp-po-sb-row.is-winner {
  background: rgba(61, 214, 140, 0.14);
  border-color: rgba(61, 214, 140, 0.4);
}

.pp-po-share-card .pp-po-sb-row.is-winner .pp-po-sb-row-score {
  color: var(--fh-gold);
}

.pp-po-share-card .pp-po-sb-row.is-loser {
  opacity: 0.58;
}

.pp-po-share-card .pp-po-sb-champ-line {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fh-muted);
}

.pp-po-share-card .pp-po-sb-champ-line strong {
  font-family: var(--pp-display);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--fh-gold);
}

/* CTA */
.pp-po-share-card .pp-po-share-cta {
  margin-top: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  background: var(--fh-surface);
  border: 1px solid var(--fh-border);
  text-align: center;
}

.pp-po-share-card .pp-po-share-cta-title {
  display: block;
  font-family: var(--pp-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
}

.pp-po-share-card .pp-po-share-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.pp-po-share-card .pp-po-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #f0f7ff;
  font-family: var(--pp-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.pp-po-share-card .pp-po-share-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

.pp-po-share-card .pp-po-share-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pp-po-share-card .pp-po-share-btn--x:hover:not(:disabled) {
  background: #0f0f0f;
  border-color: #0f0f0f;
  color: #fff;
}

.pp-po-share-card .pp-po-share-btn--reddit:hover:not(:disabled) {
  background: #ff4500;
  border-color: #ff4500;
  color: #fff;
}

.pp-po-share-card .pp-po-share-btn--facebook:hover:not(:disabled) {
  background: #1877f2;
  border-color: #1877f2;
  color: #fff;
}

.pp-po-share-card .pp-po-share-btn--download {
  border-color: rgba(110, 196, 255, 0.45);
  color: #dbeafe;
}

.pp-po-share-card .pp-po-share-btn--download:hover:not(:disabled) {
  background: rgba(110, 196, 255, 0.14);
  border-color: rgba(110, 196, 255, 0.6);
}

.pp-po-share-card.is-capturing .pp-po-share-btn {
  pointer-events: none;
}

/* Footer */
.pp-po-share-card .pp-po-share-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--fh-border);
  font-size: 0.68rem;
  color: #b4c9de;
}

.pp-po-share-card .pp-po-share-foot-icon {
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

.pp-po-share-card .pp-po-share-foot-url {
  font-weight: 700;
  color: #e2edf8;
}

.pp-po-share-card .pp-po-studio-empty {
  padding: 1.5rem 0.75rem;
  color: var(--fh-muted);
  font-size: 0.85rem;
  text-align: center;
}

@media (max-width: 900px) {
  .pp-po-share-card .pp-po-rounds--columns {
    grid-template-columns: 1fr 8px 1fr 8px 1fr;
    padding: 8px 10px 6px;
  }
}

@media (max-width: 768px) {
  .pp-playoffs-studio-body {
    padding: 12px;
  }

  .pp-po-share-card {
    padding: 16px 14px 14px;
    border-radius: 14px;
  }

  .pp-po-share-card .pp-po-share-head {
    flex-wrap: wrap;
    gap: 10px;
  }

  .pp-po-share-card .pp-po-studio-confs {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .pp-po-share-card .pp-po-rounds--columns {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 10px 6px;
  }

  .pp-po-share-card .pp-po-connector {
    display: none;
  }

  .pp-po-share-card .pp-po-round-col + .pp-po-round-col {
    padding-top: 4px;
    border-top: 1px solid var(--fh-border);
  }
}