/**
 * ASN SurfScore Live Widget — styling
 *
 * (2026-08-29, Sam's explicit call): does NOT re-theme to the broadcast
 * overlay's live theme (GromPatrol etc). Always renders in the SAME
 * fixed visual identity as the Overtime widget so every ASN video-post
 * score widget (padel, surf, whatever comes next) reads as one
 * consistent "ASN Live Score" product on the site, independent of
 * whatever branding is live on the broadcast/overlay side that week:
 *   bpaBlack #111111, bpaGrey #2A2A2A, bpaGreen #B5CAAF, bpaWhite #FBFCFB
 *   Heading font: Poppins (bold, uppercase, tracking-wide)
 *   Body font: Questrial
 * Sharp corners throughout, no border-radius on structural blocks --
 * same ASN UI convention as the Overtime widget and the rest of the site.
 */

.asn-surfscore-widget {
  font-family: 'Questrial', Lato, sans-serif;
  --ss-bg: #111111;
  --ss-border: #2A2A2A;
  --ss-header-bg: #111111;
  --ss-accent: #B5CAAF;
  --ss-accent2: #B5CAAF;
  --ss-text-main: #FBFCFB;
  --ss-text-dim: rgba(251, 252, 251, 0.5);
  --ss-live-dot: #B5CAAF;
}

.asn-surfscore-widget.asn-ss-hidden {
  display: none !important;
}

.asn-ss-card {
  background: var(--ss-bg);
  border: 1px solid var(--ss-border);
  border-top: 3px solid var(--ss-accent2);
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.asn-ss-logo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  background: var(--ss-header-bg);
  border-bottom: 1px solid var(--ss-border);
  flex: 0 0 auto;
}

.asn-ss-logo-word {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ss-text-main);
}

.asn-ss-timer {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--ss-text-main);
}

.asn-ss-tabs {
  display: flex;
  border-bottom: 1px solid var(--ss-border);
  flex: 0 0 auto;
}

.asn-ss-tab {
  flex: 1 1 50%;
  background: transparent;
  border: none;
  border-right: 1px solid var(--ss-border);
  padding: 9px 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ss-text-dim);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.asn-ss-tab:last-child {
  border-right: none;
}

.asn-ss-tab:hover {
  color: var(--ss-text-main);
}

.asn-ss-tab--active {
  color: var(--ss-bg);
  background: var(--ss-accent);
}

.asn-ss-tab--active:hover {
  color: var(--ss-bg);
}

.asn-ss-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  overflow-y: auto;
}

.asn-ss-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.asn-ss-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: var(--ss-live-dot);
  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  animation: asn-ss-pulse 1.6s infinite;
}

@keyframes asn-ss-pulse {
  0%   { box-shadow: 0 0 0 0 var(--ss-live-dot); opacity: 1; }
  70%  { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0); opacity: 0.55; }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); opacity: 1; }
}

.asn-ss-label {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ss-accent);
  text-transform: uppercase;
}

.asn-ss-event {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ss-text-main);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  line-height: 1.3;
}

/* Score tab: per-athlete card, place + color + name + total score,
   counted waves, and needs */
.asn-ss-athletes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.asn-ss-athlete-card {
  border: 1px solid var(--ss-border);
  padding: 10px 12px;
}

.asn-ss-athlete-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.asn-ss-color-dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.25);
}

.asn-ss-place {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--ss-accent);
  flex-shrink: 0;
}

.asn-ss-athlete-name {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ss-text-main);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asn-ss-athlete-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.asn-ss-score-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.asn-ss-score-value {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--ss-text-main);
  line-height: 1;
}

/* The two counted waves that make up the total score above, shown
   inline next to it -- consolidated onto the Score tab (2026-08-29,
   Sam's call) instead of requiring a tab switch to see them. */
.asn-ss-counted-waves {
  display: flex;
  gap: 6px;
}

.asn-ss-counted-wave {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--ss-text-dim);
  border: 1px solid var(--ss-border);
  padding: 2px 5px;
}

.asn-ss-needs {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ss-text-dim);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Waves tab: EVERY wave ridden by each athlete this heat, as a row of
   score chips. Counted waves (the two forming the total) are
   highlighted in the accent color; the rest are dimmed. */
.asn-ss-waves-panel {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.asn-ss-waves-empty {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  color: var(--ss-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 0;
}

.asn-ss-athlete-waves {
  border-top: 1px solid var(--ss-border);
  padding-top: 10px;
}

.asn-ss-athlete-waves:first-of-type {
  border-top: none;
  padding-top: 0;
}

.asn-ss-athlete-waves-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.asn-ss-wave-name {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ss-text-main);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asn-ss-wave-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.asn-ss-wave-chip {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--ss-text-dim);
  border: 1px solid var(--ss-border);
  padding: 3px 7px;
  min-width: 30px;
  text-align: center;
}

.asn-ss-wave-chip--counted {
  color: var(--ss-bg);
  background: var(--ss-accent);
  border-color: var(--ss-accent);
}

/* Desktop: sit beside the player. The row uses align-items: flex-start
   so the video is NEVER stretched -- it always keeps its own natural
   aspect-ratio height. The widget's own height is capped in JS
   (syncHeightToPlayer in surfscore-widget.js) to an explicit pixel
   value matching the player's real rendered height; that gives the
   widget a DEFINITE height (not just a max), so percentage-height
   children below can fill it and .asn-ss-body scrolls internally
   instead of ever growing the row taller than the video (found live,
   2026-08-29 -- a naive align-items:stretch or align-self:stretch both
   recreate this bug because the row's cross-size is set by the TALLEST
   child, which becomes circular once the widget itself is tall). */
@media (min-width: 992px) {
  .asn-ss-player-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0;
  }

  .asn-ss-player-wrap > .player-wrapper {
    flex: 1 1 0%;
    min-width: 0;
  }

  .asn-surfscore-widget {
    flex: 0 0 320px;
    max-width: 320px;
    overflow: hidden;
  }

  .asn-ss-card {
    height: 100%;
  }

  .asn-ss-body {
    min-height: 0;
  }
}

/* Mobile / tablet: stack below the player, full width */
@media (max-width: 991.98px) {
  .asn-surfscore-widget {
    margin-top: 0;
    max-height: 420px;
    height: auto !important;
  }
}