/* ==========================================================================
   PITBORN — events.css
   The calendar, the event page and the fight viewer: styles for views/events.js,
   views/event.js and views/fight.js, layered on app.css (tokens, .panel, .table,
   .badge, .fv-* bars and log, .bodymap live there).
   Sections: 1 calendar (years, seasons, rows, crowns held) · 2 event page (head,
   bracket columns, rounds list, standings, bouts, placements, teams) · 3 fight
   viewer (stage, sides, body maps, controls, scrub, log, detail, report) ·
   4 responsive · 5 motion
   ========================================================================== */

/* 1. Calendar -------------------------------------------------------------- */
.ev-empty { max-width: 720px; margin: 4vh auto 0; text-align: center; padding: 36px 28px; }
.ev-empty h1 { color: var(--gold-bright); }
.ev-empty .lede { font-size: 1.05rem; max-width: 46ch; margin: 0 auto 16px; }
.ev-empty .row { justify-content: center; }
.ev-filters { margin-bottom: 14px; }
.ev-filters .check { font-size: 0.84rem; white-space: nowrap; }
.ev-count { white-space: nowrap; }
.ev-body { display: flex; flex-direction: column; gap: 12px; }
.ev-none { padding: 24px; text-align: center; font-style: italic; }
.ev-holders { margin-bottom: 14px; }
.ev-holder-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.ev-holder { display: flex; flex-direction: column; gap: 1px; padding: 4px 0; border-bottom: 1px dashed var(--line-soft); min-width: 0; }
.ev-holder-name { font-family: var(--font-display); font-size: 0.98rem; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-holder-title { font-size: 0.78rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-holder-title a { color: var(--parchment-soft); }

.ev-year { border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); box-shadow: var(--shadow-soft); overflow: hidden; }
.ev-year-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; list-style: none;
  font-family: var(--font-display); color: var(--gold-bright); font-size: 1.15rem; user-select: none;
}
.ev-year-head::-webkit-details-marker { display: none; }
.ev-year-head .ico { color: var(--gold-dim); transition: transform var(--t) var(--ease); transform: rotate(-90deg); flex: none; }
.ev-year[open] > .ev-year-head .ico { transform: rotate(0deg); }
.ev-year-head:hover { background: rgba(224, 164, 88, 0.05); }
.ev-year-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.ev-year-meta { font-family: var(--font-ui); margin-left: auto; text-align: right; }
.ev-year-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.ev-season { border-left: 2px solid var(--line); padding-left: 12px; }
.ev-season.latest { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(224, 164, 88, 0.07), transparent 40%); border-radius: 0 var(--radius) var(--radius) 0; padding-top: 6px; padding-bottom: 6px; }
.ev-season-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 6px; }
.ev-season-name { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.ev-season.latest .ev-season-name { color: var(--gold-bright); }
.ev-season .table-wrap { background: var(--bg-1); }
.ev-name { font-family: var(--font-display); font-size: 0.98rem; color: var(--text-strong); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ev-name:hover { color: var(--gold-bright); }
.ev-tier { font-family: var(--font-display); letter-spacing: 0.06em; color: var(--text-muted); }
.ev-tier.t3 { color: var(--gold); } .ev-tier.t4 { color: var(--gold-bright); text-shadow: 0 0 8px rgba(245, 207, 133, 0.45); }
.ev-crown { color: var(--gold); }
.ev-champion { font-family: var(--font-display); }
.ev-venue { white-space: nowrap; }

/* 2. Event page ------------------------------------------------------------ */
.evp-head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px 28px; align-items: start; margin-bottom: var(--gap); }
.evp-title { min-width: 0; }
.evp-name { margin: 0 0 8px; font-size: clamp(1.6rem, 3.4vw, 2.4rem); line-height: 1.1; }
.evp-summary { margin: 12px 0 0; font-size: 1rem; line-height: 1.55; max-width: 60ch; }
.evp-facts { font-size: 0.86rem; align-self: start; }
.evp-facts dd { min-width: 0; }
.evp-rules-desc { margin-top: 2px; max-width: 48ch; line-height: 1.45; }
.evp-champion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.evp-champion-name { font-family: var(--font-display); font-size: 1.05rem; color: var(--gold-bright); }
.evp-actions { grid-column: 1 / -1; }
.evp-house { display: inline-flex; align-items: center; gap: 6px; }
.evp-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.evp-grid > .stack { min-width: 0; }
.warn-text { color: #ffd88a; }

/* bracket: one column per round, matches vertically centred against the round before */
.evb-wrap { overflow-x: auto; padding-bottom: 8px; }
.evb { display: flex; align-items: stretch; gap: 22px; padding: 4px 2px; }
/* fixed-width columns: long names truncate inside a card instead of widening the round (a 16-draw fits at 1280; a 32-draw scrolls) */
.evb-round { display: flex; flex-direction: column; flex: 0 0 230px; width: 230px; min-width: 0; }
.evb-match { max-width: 100%; }
.evb-round-label { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dim); font-weight: 700; margin: 0 0 8px; }
.evb-matches { display: flex; flex-direction: column; justify-content: space-around; flex: 1 1 auto; gap: 10px; }
.evb-match {
  position: relative; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-1);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.evb-match:hover { border-color: var(--line-strong); }
.evb-match.final { border-color: var(--gold-dim); box-shadow: var(--glow-gold); }
.evb-match.final::before { content: "the final"; position: absolute; top: -9px; right: 8px; padding: 0 6px; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright); background: var(--bg-2); border: 1px solid var(--gold-dim); border-radius: 3px; }
.evb-match.is-bye { opacity: 0.7; border-style: dashed; }
.evb-label { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); padding: 0 2px; }
.evb-side {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: var(--radius-sm);
  color: var(--text); font-size: 0.86rem; line-height: 1.25; min-width: 0; text-decoration: none;
}
.evb-side:hover { background: rgba(224, 164, 88, 0.08); text-decoration: none; color: var(--text-strong); }
.evb-side .evb-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); }
.evb-seed { flex: none; min-width: 1.4em; text-align: right; font: 600 0.62rem var(--font-mono); color: var(--text-faint); }
.evb-side.win { color: var(--gold-bright); background: rgba(224, 164, 88, 0.09); }
.evb-side.win .evb-nm { font-weight: 600; }
.evb-side.lose { color: var(--text-muted); }
.evb-side.lose .evb-nm { text-decoration: line-through; text-decoration-color: rgba(143, 131, 113, 0.5); text-decoration-thickness: 1px; }
.evb-side.dead { color: #f0a0a4; }
.evb-side.bye { color: var(--text-faint); font-style: italic; font-size: 0.78rem; justify-content: center; border: 1px dashed var(--line-soft); }
.evb-tick { flex: none; color: var(--gold); font-weight: 700; }
.evb-dead { flex: none; color: var(--blood-bright); }
.evb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px 6px 0; font-size: 0.72rem; color: var(--text-muted); border-top: 1px dashed var(--line-soft); margin-top: 2px; }
.evb-watch { display: inline-flex; align-items: center; gap: 3px; color: var(--gold); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; white-space: nowrap; }
.evb-watch .ico { width: 12px; height: 12px; }
.evb-team .evb-side.team .evb-nm { font-size: 0.92rem; }
.evb-duels { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--line-soft); font-size: 0.74rem; }
.evb-duel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; color: var(--text-muted); }
.evb-duel a.win { color: var(--gold-bright); } .evb-duel a.lose { color: var(--text-muted); }
.evb-list { display: flex; flex-direction: column; gap: 12px; }
.evb-list-round .evb-round-label { margin-bottom: 4px; }
.evb-lines { margin: 0; padding: 0 0 0 1.6em; font-size: 0.88rem; display: flex; flex-direction: column; gap: 3px; }
.evb-line { padding: 2px 0; }
.evb-line a.win { color: var(--gold-bright); font-family: var(--font-display); }
.evb-line a.lose { color: var(--text-muted); }
.evb-line.is-walkover { opacity: 0.75; }
.evb-line .evb-watch { margin-left: 4px; }

/* standings, bouts, placements, teams */
.evp-place { display: inline-block; min-width: 1.6em; font-family: var(--font-display); color: var(--text-muted); text-align: right; }
.evp-place.first { color: var(--gold-bright); }
.evp-bouts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.evp-bout { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line-soft); border-left: 3px solid var(--line); border-radius: var(--radius); background: var(--bg-1); }
.evp-bout.final { border-left-color: var(--gold); }
.evp-bout.blood { border-left-color: var(--blood-bright); }
.evp-bout.reduced { opacity: 0.8; }
.evp-bout.lost { opacity: 0.6; }
.evp-bout-n { font: 600 0.7rem var(--font-mono); color: var(--text-faint); text-align: right; }
.evp-bout-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.evp-bout-headline { font-family: var(--font-display); font-size: 1rem; color: var(--text-strong); line-height: 1.25; }
.evp-bout-headline:hover { color: var(--gold-bright); }
.evp-bout-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.evp-watch { white-space: nowrap; }
.evp-placements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.evp-placement { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: var(--radius-sm); font-size: 0.9rem; }
.evp-placement:nth-child(even) { background: rgba(255, 220, 160, 0.02); }
.evp-placement.champion { background: linear-gradient(90deg, rgba(224, 164, 88, 0.16), transparent 70%); border: 1px solid var(--gold-dim); font-size: 1rem; }
.evp-placement.champion .evp-place { color: var(--gold-bright); font-size: 1.15rem; }
.evp-placement.champion a { color: var(--gold-bright); font-family: var(--font-display); }
.evp-placement.dead a { color: var(--text-muted); }
.evp-placement-name { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.evp-placement-name a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evp-teams { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.evp-team { padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-1); }
.evp-team.champion { border-color: var(--gold-dim); background: rgba(224, 164, 88, 0.06); }
.evp-team-members { color: var(--text-muted); margin-top: 4px; }

/* 3. Fight viewer ---------------------------------------------------------- */
.fight-view .fv-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 18px; margin-bottom: var(--gap); }
.fight-view .fv-title { flex: 1 1 420px; min-width: 0; }
.fight-view .fv-headline { margin: 0 0 8px; font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.15; }
.fv-actions { flex: none; }
.fv-stage { margin-bottom: var(--gap); }
.fv-stage .fv { gap: 18px; }
.fv-side { display: flex; flex-direction: column; min-width: 0; }
.fv-side .fv-name { font-size: 1.25rem; line-height: 1.2; }
.fv-side .fv-name a { color: var(--text-strong); }
.fv-side .fv-name a:hover { color: var(--gold-bright); }
.fv-crown { color: var(--gold); }
.fv-sub { margin-top: 2px; }
.fv-kit { margin-top: 2px; font-family: var(--font-display); font-style: italic; }
.fv-val { font-family: var(--font-mono); color: var(--text-strong); letter-spacing: 0; }
.fv-side.b .fv-bar-label { flex-direction: row-reverse; }
.fv-map { margin-top: 12px; max-width: 220px; padding: 6px; align-self: flex-start; }
.fv-side.b .fv-map { align-self: flex-end; }
.fv-map svg { max-height: 380px; }
/* a hit lights the part, a wound stays as a marker, a severed part dims */
.fv .bodymap.lit [data-part].hit { fill: #ff7a5c; }
.fv .bodymap.lit [data-part] { transition: fill 320ms var(--ease); }
.fv .bodymap [data-part].fv-lost { opacity: 0.22; filter: grayscale(1); }
.fv .bodymap .fv-inj { pointer-events: auto; transform-box: fill-box; transform-origin: center; animation: fv-pulse 1.6s ease-in-out infinite; }
.fv-vs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 6px; min-width: 96px; text-align: center; }
.fv-vs-word { font-family: var(--font-display); color: var(--blood-bright); font-size: 1.5rem; letter-spacing: 0.12em; white-space: nowrap; }
.fv-vs.done .fv-vs-word { color: var(--gold-bright); text-shadow: 0 0 12px rgba(245, 207, 133, 0.45); }
.fv-vs-result { font-family: var(--font-display); font-size: 0.95rem; color: var(--text-strong); line-height: 1.3; }
.fv-vs-result a { color: var(--gold-bright); }
.fv-pos { white-space: nowrap; }
.fight-view .fv-controls { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.fv-controls .btn-icon { font-size: 0.85rem; }
.fv-speed-wrap { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.fv-scrub { flex: 1 1 200px; min-width: 140px; accent-color: var(--gold); height: 22px; cursor: pointer; }
.fv-keys { white-space: nowrap; }
.fv-log-panel { margin-bottom: var(--gap); }
.fv-detail { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; margin-bottom: 8px; font-size: 0.84rem; color: var(--parchment-soft); background: var(--bg-1); border: 1px solid var(--line-soft); border-radius: var(--radius); min-height: 38px; }
.fv-d-k { font: 600 0.66rem var(--font-mono); letter-spacing: 0.1em; color: var(--gold-dim); }
.fv-d-dmg { font-family: var(--font-mono); color: var(--ember-hot); }
.fight-view .fv-log { max-height: 360px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-1); scroll-behavior: smooth; }
.fight-view .fv-ex { display: grid; grid-template-columns: 2em minmax(0, 1fr); gap: 8px; cursor: pointer; }
.fight-view .fv-ex:hover { background: rgba(224, 164, 88, 0.05); }
.fv-ex-n { font: 600 0.66rem var(--font-mono); color: var(--text-faint); text-align: right; padding-top: 4px; }
.fv-ex.current .fv-ex-n { color: var(--gold); }
.fv-ex-text { min-width: 0; }
.fight-view.playing .fv-ex.current { animation: fv-reveal 320ms var(--ease); }
.fv-report { padding: 0; }
.fv-report > summary { cursor: pointer; margin: 0; padding: 12px 18px; list-style: none; border-bottom: 0; }
.fv-report > summary::-webkit-details-marker { display: none; }
.fv-report[open] > summary { border-bottom: 1px solid var(--line); }
.fv-report-body { padding: 14px 18px 18px; }
.fv-report-body .fv-headline { font-size: 1.4rem; margin-bottom: 6px; }
.fv-result { font-size: 1rem; color: var(--parchment); }
.fv-narration { font-size: 1.02rem; }
.fv-flags, .fv-moments { margin-bottom: 12px; }
.fv-moments .caps { margin-right: 4px; }
.fv-deaths { font-family: var(--font-display); }
.fv-report-grid h4 { margin-bottom: 6px; font-size: 0.95rem; color: var(--gold); }
.fv-injuries { list-style: none; margin: 0; padding: 0; font-size: 0.84rem; }
.fv-injuries li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px dashed var(--line-soft); }
.fv-injuries li:last-child { border-bottom: 0; }
.fv-injuries li.lost { color: #f0a0a4; }
.fv-injuries .legend-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--gold)); }
.fv-injuries .part { color: var(--text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
.fv-injuries .fv-jump { margin-left: auto; padding: 0 6px; font-size: 0.64rem; }
.fv-deltas { margin-top: 12px; }
.fv-deltas th:first-child { text-align: left; }
.fv-reduced .fv-headline { font-size: clamp(1.3rem, 2.8vw, 1.9rem); }

/* 4. Responsive ------------------------------------------------------------ */
@media (max-width: 1100px) {
  .evp-head { grid-template-columns: minmax(0, 1fr); }
  .evp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .ev-year-head { font-size: 1rem; padding: 10px 12px; flex-wrap: wrap; }
  .ev-year-meta { margin-left: 26px; flex-basis: 100%; text-align: left; }
  .ev-year-body { padding: 4px 10px 12px; }
  .ev-season { padding-left: 8px; }
  .evb-round { min-width: 200px; }
  .fv-stage .fv { grid-template-columns: 1fr; gap: 14px; }
  .fv-vs { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 6px 0; border-top: 1px dashed var(--line-soft); border-bottom: 1px dashed var(--line-soft); }
  .fv-side.b .fv-bar-label { flex-direction: row; }
  .fv-side.b .fv-map { align-self: flex-start; }
  .fv-map { max-width: 180px; margin-top: 8px; }
  .fv-map svg { max-height: 300px; }
  .fv-scrub { flex-basis: 100%; }
  .fv-keys { display: none; }
  .evp-bout { grid-template-columns: 2em minmax(0, 1fr); }
  .evp-bout .evp-watch { grid-column: 2; justify-self: start; }
  .fv-report-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 5. Motion ---------------------------------------------------------------- */
@keyframes fv-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(1.45); } }
@keyframes fv-reveal { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .fv .bodymap .fv-inj, .fight-view.playing .fv-ex.current { animation: none !important; }
  .fight-view .fv-log { scroll-behavior: auto; }
}