/* Event page: header (scoreline from the hero), momentum line, market tabs and groups. */

.ehead { position: relative; overflow: hidden; padding: 20px 24px 24px; border-radius: var(--radius-l); background: radial-gradient(100% 120% at 80% 0%, #18302a 0%, var(--color-surface-1) 55%), var(--color-surface-1); border: 1px solid var(--color-border-soft); }
.ehead__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ehead__top .pill { text-decoration: none; color: var(--color-text-2); }
.ehead__top .pill:hover { color: var(--color-text); }
.ehead__top .fav { margin-left: auto; border: 1px solid var(--color-border); width: 44px; height: 44px; }
.ehead .fresh { display: flex; align-items: center; gap: 8px; font: 500 var(--fs-xs)/1 var(--font-mono); color: var(--color-text-2); }
.ehead .fresh i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); animation: pulse-ok 2s infinite; }
.ehead .fresh.is-stale i { background: var(--color-warm); animation: none; }
.ehead__cd { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-sm)/1 var(--font-mono); color: var(--color-text-2); }
.ehead__cd .icon { width: 16px; height: 16px; }
.ehead__score { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(12px, 3vw, 40px); margin-top: 24px; }
.ehead__team { text-align: right; min-width: 0; }
.ehead__team--away { text-align: left; }
.ehead__name { font: 800 clamp(1.25rem, .9rem + 1.4vw, 2rem)/1.1 var(--font-display); letter-spacing: -.02em; overflow-wrap: break-word; }
.ehead__team small { display: block; margin-top: 6px; font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--color-text-3); text-transform: uppercase; letter-spacing: .08em; }
.ehead__mid { display: grid; justify-items: center; gap: 10px; }
.ehead .board { display: flex; align-items: center; gap: .14em; font: 700 clamp(3rem, 2rem + 4vw, 5.5rem)/.9 var(--font-mono); letter-spacing: -.06em; }
.ehead .board i { font-style: normal; font-weight: 500; font-size: .5em; color: var(--color-text-3); }
.ehead .board span.is-new { animation: flash-score 1.4s var(--ease); }
.ehead__clock { display: inline-flex; align-items: center; gap: 8px; font: 700 1rem/1 var(--font-mono); color: var(--color-error); }
.ehead__clock--done { color: var(--color-text-2); font-weight: 600; font-size: var(--fs-sm); }
.ehead__sets { display: flex; gap: 6px; font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--color-text-2); }
.ehead__sets span { padding: 5px 8px; border-radius: 6px; background: var(--color-surface-3); }
.ehead__sets .is-cur { background: var(--color-brand-tint); color: var(--color-brand); }
.ehead__ko { display: grid; justify-items: center; gap: 6px; font: 700 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--font-mono); letter-spacing: -.04em; }
.ehead__ko small { font: 600 var(--fs-sm)/1 var(--font-body); letter-spacing: 0; color: var(--color-text-2); }
.ehead__race { display: grid; gap: 8px; margin-top: 18px; }
.ehead__race h1 { font: 800 var(--fs-h1)/1.05 var(--font-display); letter-spacing: -.03em; }
.ehead__race p { color: var(--color-text-2); }
.ehead__race .ehead__ko { justify-items: start; margin-top: 8px; }
.ehead__chart { position: relative; height: 120px; margin: 18px -24px -24px; }
.ehead__chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mo__a { fill: none; stroke: var(--color-brand); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.mo__b { fill: none; stroke: rgb(242 246 243 / .4); stroke-width: 1.5; stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
.mo__area { fill: url(#g-ev); }
.mo__legend { position: absolute; left: 24px; bottom: 12px; display: flex; align-items: center; gap: 8px; font: 500 var(--fs-2xs)/1 var(--font-mono); color: var(--color-text-3); }
.mo__legend i { width: 14px; height: 2px; background: var(--color-brand); }
.mo__legend i.is-b { margin-left: 8px; background: none; border-top: 2px dashed var(--color-text-3); }

/* ── markets ──────────────────────────────────────────────────────────── */
.mkts { margin-top: 24px; }
.mkts__h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mkts__h h2 { font: 800 var(--fs-h2)/1.2 var(--font-display); letter-spacing: var(--tracking-tight); }
.mkts__h h2 small { margin-left: 6px; font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--color-text-3); letter-spacing: 0; }
.mkts__h .btn { margin-left: auto; }
.mkts__tabs { position: sticky; top: 0; z-index: 15; padding: 10px 2px; background: color-mix(in oklab, var(--color-bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mkts__list { display: grid; gap: 10px; margin-top: 6px; }
.mkt { border-radius: var(--radius-l); background: var(--color-surface-1); border: 1px solid var(--color-border-soft); transition: border-color var(--dur-base); }
.mkt[open] { border-color: var(--color-border); }
.mkt summary { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; cursor: pointer; list-style: none; }
.mkt summary::-webkit-details-marker { display: none; }
.mkt summary h3 { font: 700 var(--fs-body)/1.3 var(--font-display); }
.mkt summary > .icon { margin-left: auto; width: 18px; height: 18px; color: var(--color-text-3); transition: transform var(--dur-base) var(--ease); }
.mkt[open] summary > .icon { transform: rotate(180deg); }
.mkt__sus { display: none; align-items: center; gap: 6px; font: 600 var(--fs-2xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--color-warm); }
.mkt__sus .icon { width: 12px; height: 12px; }
.mkt.is-suspended .mkt__sus { display: inline-flex; }
.mkt__sel { display: grid; gap: 6px; padding: 0 16px 16px; }
.mkt__sel--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mkt__sel--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mkt__sel--auto { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.mkt .odd { height: 48px; }
.mkt .odd__lbl { font: 600 var(--fs-xs)/1.2 var(--font-body); color: var(--color-text-2); }
.mkt .odd[aria-pressed="true"] .odd__lbl { color: rgb(11 20 18 / .7); }
.mkts__rules { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: var(--fs-sm); color: var(--color-text-2); }
.mkts__rules .icon { width: 18px; height: 18px; }
.mkts__rules a { color: var(--color-text); font-weight: 700; }

@media (max-width: 767px) {
  .ehead { padding: 16px; }
  .ehead__score { gap: 10px; margin-top: 18px; }
  .ehead__name { font-size: 1.0625rem; }
  .ehead__chart { margin: 14px -16px -16px; height: 100px; }
  .mkts__tabs { top: 60px; margin: 0 -16px; padding: 10px 16px; }
  .mkt__sel--3 .odd, .mkt__sel--2 .odd { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; height: auto; min-height: 56px; padding: 8px 10px; }
  .mkt__sel--3 .odd__lbl, .mkt__sel--2 .odd__lbl { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; text-align: left; }
  .mkt__sel--auto { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) and (max-width: 1279px) { .mkts__tabs { top: 60px; } }
.mkt .odd { height: auto; min-height: 48px; padding-block: 8px; }
.mkt .odd__lbl { white-space: normal; text-align: left; line-height: 1.25; }
/* narrow phones: the board takes its own row so long team names keep whole words */
@media (max-width: 389px) {
  .ehead__score { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "mid mid" "home away"; gap: 14px 12px; }
  .ehead__score .ehead__mid { grid-area: mid; }
  .ehead__score .ehead__team { grid-area: home; text-align: left; }
  .ehead__score .ehead__team--away { grid-area: away; text-align: right; }
}