.wc-section {
  margin: 32px 0;
  padding: 28px;
  border: 2px solid #000;
  background: #fff;
  color: #000;
}

/* FAN-580: founder usability pass — the heavy 2px black frame read as
   amateur on the focused/general blocks; match the songbook-row grey
   border token (var(--fc-rule)) used elsewhere instead. */
.wc-section--focused,
.wc-section--general {
  border: 1px solid var(--fc-rule, #ececea);
}

.wc-section__header {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

/* FAN-590: on team pages the focused header reads top-down — team label,
   then the title left-aligned, then the subline. */
.wc-section--focused .wc-section__header {
  display: block;
}

.wc-section--focused .wc-section__header h2 {
  margin-bottom: 6px;
}

/* FAN-580: a subline (unlike the eyebrow) must sit under the full-width
   heading, not float beside it in the space-between row. */
.wc-section__header .wc-section__sub {
  flex-basis: 100%;
}

.wc-section__header h2,
.wc-contender h3 {
  margin: 0;
  color: #000;
}

.wc-section__header h2 {
  font-family: var(--fc-font-display, sans-serif);
  font-size: clamp(28px, 4vw, 44px);
  line-height: .98;
}

.wc-section__eyebrow {
  margin: 0 0 8px;
  color: var(--fc-volt, #E6FF1A);
  font-family: var(--fc-font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
}

/* FAN-580: the focused block's "your team" identity — ink, not volt, and a
   real flag instead of the illegible eyebrow label. */
.wc-section__team-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  color: var(--fc-black);
  font-family: var(--fc-font-mono, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.wc-section__team-flag {
  width: 18px;
  height: auto;
  font-size: 18px;
  vertical-align: middle;
}

.wc-section__sub {
  margin: 8px 0 0;
  color: rgba(0, 0, 0, .64);
  font-size: 15px;
}

.wc-contender-list {
  display: grid;
  gap: 14px;
}

.wc-contender {
  display: grid;
  grid-template-columns: minmax(190px, .8fr) minmax(280px, 1.7fr) auto;
  align-items: center;
  gap: 20px;
  padding: 18px;
  border: 1px solid rgba(0, 0, 0, .22);
  background: #fff;
}

.wc-contender--focused {
  grid-template-columns: minmax(190px, .75fr) minmax(280px, 1.5fr) auto;
}

.wc-contender__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.wc-contender__flag,
.wc-general-card__flag {
  flex: 0 0 auto;
  font-size: 34px;
  line-height: 1;
  width: 34px;
  height: auto;
  vertical-align: middle;
}

.wc-contender h3 {
  font-family: var(--fc-font-display, sans-serif);
  font-size: 25px;
  line-height: 1;
}

.wc-contender__identity p {
  margin: 6px 0 0;
  color: rgba(0, 0, 0, .64);
  font-size: 13px;
}

.wc-contender__chants {
  display: grid;
  min-width: 0;
}

.wc-contender__chants > div + div {
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.wc-contender .fc-chant-row {
  padding: 9px 0;
  background: transparent;
}

.wc-ringtone-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 18px;
  /* FAN-580: pink, bigger — was a small black/mono button. Black ink for
     contrast: 8.16:1 on bubblegum; white ink only reaches 2.57:1. */
  background: var(--fc-bubblegum);
  color: var(--fc-black);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.wc-ringtone-button:hover,
.wc-ringtone-button:focus-visible {
  background: var(--fc-volt, #E6FF1A);
  color: #000;
}

/* FAN-580: founder preference for the focused block's CTA — volt over
   pink here (black ink: 18.68:1 contrast). Hover swaps to electric/white
   since the resting state already occupies volt. */
.wc-section--focused .wc-ringtone-button {
  background: var(--fc-volt, #E6FF1A);
  color: var(--fc-black);
}

.wc-section--focused .wc-ringtone-button:hover,
.wc-section--focused .wc-ringtone-button:focus-visible {
  background: var(--fc-electric, #5000FF);
  color: #fff;
}

.wc-contender .fc-chant-row__play.is-playing {
  background: #000;
  color: #fff;
}

.wc-section .share-row {
  margin-top: 20px;
}

/* FAN-580: the share strip stretched to the full (wide) block width,
   leaving dead space after the buttons that read as lopsided/asymmetrical.
   Hug its own content instead, like it does in narrower contexts elsewhere. */
.wc-section--focused .share-row {
  display: inline-flex;
  max-width: 100%;
}

.wc-section--general {
  max-width: 820px;
}

.wc-section__header--compact {
  margin-bottom: 16px;
}

.wc-section__header--compact h2 {
  font-size: clamp(23px, 3vw, 32px);
}

.wc-general-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.wc-general-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 76px;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, .18);
  color: #000;
  text-decoration: none;
}

.wc-general-card:hover,
.wc-general-card:focus-visible {
  border-color: #000;
  background: var(--fc-volt, #E6FF1A);
}

.wc-general-card strong,
.wc-general-card small {
  display: block;
}

.wc-general-card strong {
  font-family: var(--fc-font-display, sans-serif);
  font-size: 18px;
  line-height: 1;
}

.wc-general-card small {
  margin-top: 5px;
  color: rgba(0, 0, 0, .62);
  font-size: 11px;
  line-height: 1.2;
}

.wc-see-all {
  display: inline-block;
  margin-top: 15px;
  color: #000;
  font-family: var(--fc-font-mono, monospace);
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 840px) {
  .wc-contender,
  .wc-contender--focused {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .wc-ringtone-button {
    justify-self: start;
  }

  .wc-general-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .wc-section {
    margin: 22px 0;
    padding: 20px;
  }

  .wc-section__header {
    display: block;
  }
}