/* Pokaz finałowy — ta sama tożsamość co reszta wesela, tylko wyciszona do sali
   z rzutnikiem: ciemna szałwia jako tło, złoto na liderze, kość słoniowa na liczbach.
   Słupki są segmentowane jak wskaźniki wysterowania — czytelne z drugiego końca sali. */

body.replay-open { overflow: hidden; }

.replay {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-rows: 1fr;
  background:
    radial-gradient(130% 90% at 50% -15%, #3b4d38 0%, var(--sage-950) 48%, #18201a 100%);
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}
.replay-stage {
  display: grid; grid-template-rows: auto 1fr;
  gap: clamp(14px, 2.2vh, 34px);
  padding: clamp(18px, 3vh, 44px) clamp(22px, 3vw, 64px);
  min-height: 0;
}

/* pasek czasu */
.replay-chrono { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(18px, 2.4vw, 46px); }
.replay-clock b { display: block; font-size: clamp(30px, 4.4vh, 58px); font-weight: 800; letter-spacing: -.02em; color: var(--gold); line-height: 1; }
.replay-clock span { font-size: clamp(11px, 1.4vh, 14px); color: rgba(248,245,238,.55); }
.replay-total { text-align: right; }
.replay-total b { display: block; font-size: clamp(24px, 3.4vh, 44px); font-weight: 800; line-height: 1; }
.replay-total span { font-size: clamp(11px, 1.4vh, 14px); color: rgba(248,245,238,.55); }

.replay-ribbon {
  position: relative; height: clamp(26px, 3.6vh, 46px); border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.24));
  box-shadow: inset 0 0 0 1px rgba(200,164,93,.2);
}
.replay-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(200,164,93,.18); }
.replay-mark {
  position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: var(--sage-650); box-shadow: 0 0 0 2px rgba(200,164,93,.4);
  transition: transform .4s cubic-bezier(.22,1,.36,1), background .4s, box-shadow .4s;
}
.replay-mark.is-hit { background: var(--gold); box-shadow: 0 0 0 3px rgba(200,164,93,.25), 0 0 18px rgba(200,164,93,.8); transform: scale(1.5); }
.replay-playhead { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--ivory); box-shadow: 0 0 12px rgba(248,245,238,.7); }

/* tabela wyścigu */
.replay-board { display: grid; grid-template-columns: 1fr clamp(270px, 23vw, 420px); gap: clamp(20px, 2.4vw, 52px); min-height: 0; }
.replay-rows { position: relative; }
.replay-row {
  position: absolute; left: 0; right: 0; height: 58px;
  display: grid; grid-template-columns: 2.4ch minmax(7ch, 13ch) 1fr auto;
  align-items: center; gap: clamp(10px, 1.1vw, 22px);
  transition: transform .75s cubic-bezier(.22,1,.36,1), opacity .5s linear;
  will-change: transform;
}
.replay-rank { font-size: clamp(15px, 2vh, 24px); font-weight: 700; color: rgba(248,245,238,.45); text-align: right; }
.replay-who { font-size: clamp(17px, 2.4vh, 30px); font-weight: 800; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replay-track { position: relative; height: clamp(20px, 2.7vh, 34px); border-radius: 2px; background: rgba(255,255,255,.06); overflow: hidden; }
.replay-fill {
  position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--sage-650), var(--sage-200));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 10px);
          mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 10px);
  transition: width .35s linear;
}
.replay-row.is-leader .replay-who { color: var(--gold); }
.replay-row.is-leader .replay-fill { background: linear-gradient(90deg, #8d7333, var(--gold) 72%, #f3e3ba); }
.replay-points { position: relative; font-size: clamp(16px, 2.3vh, 28px); font-weight: 800; color: var(--gold); min-width: 7ch; text-align: right; }
.replay-points i { position: absolute; right: -.2ch; top: -1em; font-style: normal; font-size: .62em; color: var(--ivory); opacity: 0; }
@keyframes replay-gain { 0% {opacity: 0; transform: translateY(6px);} 18% {opacity: 1;} 100% {opacity: 0; transform: translateY(-22px);} }
.replay-points i.is-live { animation: replay-gain 1.15s ease-out forwards; }
/* Powiadomienia nie znikają: nowe wchodzą u góry, starsze zjeżdżają poza dolną
   krawędź kolumny. Maska wygasza je miękko, zamiast ucinać w połowie zdania. */
.replay-side { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.replay-side-head { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(248,245,238,.5); }
.replay-cards {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
}
.replay-idle { font-size: clamp(14px, 1.8vh, 18px); color: rgba(248,245,238,.5); line-height: 1.5; }
.replay-card {
  flex: 0 0 auto; padding: clamp(10px, 1.4vh, 16px) clamp(12px, 1.6vh, 18px); border-radius: 4px;
  background: linear-gradient(180deg, rgba(200,164,93,.14), rgba(24,32,26,.8));
  box-shadow: inset 0 0 0 1px rgba(200,164,93,.32);
  opacity: 0; transform: translateX(26px);
  transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
}
.replay-card.is-in { opacity: 1; transform: none; }
.replay-card-time { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--gold); }
.replay-card h3 { margin: .2em 0 0; font-size: clamp(15px, 2vh, 22px); font-weight: 800; line-height: 1.15; }
.replay-card p { margin-top: .25em; font-size: clamp(12px, 1.5vh, 15px); line-height: 1.35; color: rgba(248,245,238,.72); }
.replay-cat-image { float: right; width: clamp(52px, 7vh, 76px); aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin-left: 12px; box-shadow: 0 0 0 2px rgba(200,164,93,.6); }
.replay-card-join { background: linear-gradient(180deg, rgba(248,245,238,.2), rgba(24,32,26,.82)); box-shadow: inset 0 0 0 2px rgba(248,245,238,.55); }
.replay-card-cats_complete { background: linear-gradient(180deg, rgba(200,164,93,.45), rgba(24,32,26,.85)); box-shadow: inset 0 0 0 2px var(--gold), 0 0 40px rgba(200,164,93,.35); }
.replay-card-lead_change h3 { color: var(--gold); }
.replay-card-purchase h3 { color: rgba(248,245,238,.85); }
.replay-card-rest, .replay-card-rates { background: repeating-linear-gradient(45deg, rgba(248,245,238,.12) 0 8px, rgba(24,32,26,.8) 8px 16px); }

/* finał */
.replay-finale {
  position: fixed; inset: 0; display: none; place-items: center; z-index: 5;
  background: radial-gradient(90% 70% at 50% 28%, rgba(59,77,56,.95), rgba(24,32,26,.99));
}
.replay-finale.is-on { display: grid; }
.replay-ring { position: relative; width: min(58vh, 640px); height: min(58vh, 640px); transition: transform 4.2s cubic-bezier(.12,.72,.14,1); }
.replay-chip {
  position: absolute; left: 50%; top: 50%; padding: .45em 1.1em; border-radius: 2px;
  font-size: clamp(22px, 3.4vh, 46px); font-weight: 800; letter-spacing: -.02em; white-space: nowrap;
  background: rgba(79,99,75,.9); box-shadow: inset 0 0 0 1px rgba(200,164,93,.45);
  transition: transform 1.15s cubic-bezier(.22,1,.36,1), background .6s, box-shadow .6s, color .6s;
}
.replay-chip.is-placed { background: linear-gradient(180deg, rgba(79,99,75,.95), rgba(38,51,37,.98)); }
.replay-chip.is-crowned { background: linear-gradient(180deg, #8d7333, #2b3828); box-shadow: inset 0 0 0 1px var(--gold), 0 0 70px rgba(200,164,93,.35); color: var(--gold); }
.replay-place { display: block; font-size: .3em; font-weight: 700; letter-spacing: .08em; color: rgba(248,245,238,.62); margin-bottom: .35em; opacity: 0; transition: opacity .5s; }
.replay-score { display: block; font-size: .62em; font-weight: 800; color: var(--ivory); margin-top: .18em; opacity: 0; transition: opacity .5s; }
.replay-chip.is-revealed .replay-place, .replay-chip.is-revealed .replay-score { opacity: 1; }

.replay-sheets {
  position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2vw, 40px); padding: clamp(18px, 3vh, 46px) clamp(22px, 3vw, 64px);
  transform: translateY(102%); transition: transform 1s cubic-bezier(.22,1,.36,1);
}
.replay-sheets.is-up { transform: none; }
.replay-sheet { padding: clamp(13px, 1.8vh, 22px); border-radius: 4px; background: rgba(24,32,26,.76); box-shadow: inset 0 0 0 1px rgba(200,164,93,.24); }
.replay-sheet h3 { font-size: clamp(16px, 2.2vh, 25px); font-weight: 800; letter-spacing: -.015em; margin-bottom: .6em; color: var(--gold); }
.replay-sheet dl { display: grid; grid-template-columns: 1fr auto; gap: .42em clamp(10px, 1vw, 20px); font-size: clamp(12px, 1.7vh, 17px); }
.replay-sheet dt { color: rgba(248,245,238,.78); }
.replay-sheet dd { font-weight: 700; }
.replay-sheet .replay-sum { color: var(--gold); font-weight: 800; }

/* sterowanie organizatora */
.replay-deck { position: fixed; left: 18px; bottom: 16px; display: flex; gap: 8px; z-index: 70; opacity: .3; transition: opacity .25s; }
.replay-deck:hover, .replay-deck:focus-within { opacity: 1; }
.replay-deck button {
  font: inherit; font-size: 13px; font-weight: 700; color: var(--ivory);
  background: rgba(79,99,75,.92); border: 1px solid rgba(200,164,93,.35);
  border-radius: 2px; padding: .45em .9em; cursor: pointer;
}
.replay-deck button:hover { background: var(--sage-650); }
.replay-deck button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 900px) {
  .replay-board { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .replay-row { height: 44px; }
  .replay-sheets { grid-template-columns: 1fr; gap: 8px; }
  .replay-sheet dl { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .replay *, .replay-finale * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── suwak i znaczniki na osi ─────────────────────────────── */
.replay-axis { display: grid; gap: 6px; }
.replay-scrub { width: 100%; accent-color: var(--gold); cursor: pointer; }
.replay-band { position: absolute; top: 0; bottom: 0; pointer-events: auto; }
.replay-band-rest {
  background: repeating-linear-gradient(45deg, rgba(248,245,238,.16) 0 6px, transparent 6px 12px);
  box-shadow: inset 0 0 0 1px rgba(248,245,238,.28);
}
.replay-band-rates { width: 2px !important; background: var(--gold); box-shadow: 0 0 10px rgba(200,164,93,.8); }
.replay-phase.is-resting, #replay-phase.is-resting { color: var(--gold); font-weight: 700; }

/* ── role: organizatorzy i wspólne konto pary ─────────────── */
.replay-row.replay-role-organizer .replay-who,
.replay-row.replay-role-couple .replay-who { color: var(--gold); font-style: italic; }
.replay-row.replay-role-organizer .replay-fill,
.replay-row.replay-role-couple .replay-fill {
  background: linear-gradient(90deg, rgba(200,164,93,.35), rgba(200,164,93,.75));
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 8px);
          mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 8px);
}
.replay-row.replay-role-organizer .replay-points,
.replay-row.replay-role-couple .replay-points { color: rgba(200,164,93,.85); }

/* ── finał krok po kroku ──────────────────────────────────── */
.replay-finale { flex-direction: column; }
.replay-slide-wrap { display: grid; place-items: center; width: min(1200px, 92vw); }
.replay-slide {
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
  text-align: center; width: 100%;
}
.replay-slide.is-in { opacity: 1; transform: none; }
.replay-slide h2 { font-size: clamp(30px, 6vh, 74px); font-weight: 800; letter-spacing: -.03em; color: var(--gold); }
.replay-slide p { margin-top: .6em; font-size: clamp(15px, 2vh, 21px); color: rgba(248,245,238,.8); }
.replay-slide-ask h2 { font-size: clamp(34px, 8vh, 96px); }

.replay-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(12px, 2vw, 28px); margin-top: clamp(16px, 3vh, 36px); }
.replay-records article { padding: clamp(14px, 2vh, 24px); border-radius: 4px; background: rgba(24,32,26,.72); box-shadow: inset 0 0 0 1px rgba(200,164,93,.28); text-align: left; }
.replay-records h3 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: rgba(248,245,238,.55); }
.replay-records strong { display: block; margin-top: .35em; font-size: clamp(20px, 3vh, 30px); color: var(--gold); }
.replay-records p { margin-top: .3em; font-size: clamp(13px, 1.7vh, 17px); }

.replay-place-label { font-size: clamp(13px, 1.8vh, 18px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(248,245,238,.6); }
.replay-place-score { display: block; margin-top: .1em; font-size: clamp(34px, 7vh, 84px); font-weight: 800; color: var(--ivory); }
.replay-place-1 h2 { text-shadow: 0 0 60px rgba(200,164,93,.55); }

/* Award reveal: the name and applause take centre stage, details come afterwards. */
.replay-podium-reveal{position:relative;isolation:isolate;min-height:60vh;display:grid;place-items:center}
.replay-podium-reveal::before{content:"";position:absolute;inset:-8%;z-index:-1;background:radial-gradient(ellipse,#c8a45d24,transparent 65%);border-radius:50%;pointer-events:none}
.replay-podium-content{position:relative;z-index:1;max-width:100%;padding:12px}
.replay-podium-medal{font-size:clamp(64px,13vh,148px);font-weight:950;color:var(--gold);line-height:1.1;filter:drop-shadow(0 0 24px #c8a45d55);margin:12px auto}
.replay-podium-reveal .replay-podium-rank{font-size:clamp(18px,2.6vh,30px);letter-spacing:.22em;color:var(--gold);font-weight:800;margin:.2em 0}
.replay-podium-reveal h2{font-size:clamp(40px,8vw,126px);line-height:1.05;overflow-wrap:anywhere;margin:.15em 0;color:#fff4d2}
.replay-podium-reveal .replay-place-score{font-size:clamp(32px,5.7vh,66px)}
.replay-podium-reveal .replay-place-score small{font-size:.35em;color:#d4cebf}
.replay-podium-reveal .replay-podium-cheer{font-size:clamp(16px,2.5vh,27px);color:#e6ce96}
.replay-podium-reveal.is-in .replay-podium-medal{animation:replay-award-stamp .75s cubic-bezier(.2,.8,.2,1) both}
.replay-podium-reveal.is-in h2{animation:replay-award-name .65s .35s cubic-bezier(.16,1,.3,1) both}
.replay-place-1.replay-podium-reveal::before{background:radial-gradient(ellipse,#edbe5355,transparent 68%)}
.replay-place-1.replay-podium-reveal h2{color:#f4d987}
.replay-podium-sparks{position:absolute;inset:0;display:grid;place-items:center;z-index:0;pointer-events:none;overflow:hidden}
.replay-podium-sparks i{position:absolute;width:9px;height:18px;background:#edc76f;border-radius:2px;opacity:0;animation:replay-award-spark 2.8s calc(.3s + var(--delay)) cubic-bezier(.12,.8,.3,1) both}
.replay-podium-sparks i:nth-child(3n){background:#e9ede2;width:7px;height:10px}
.replay-podium-sparks i:nth-child(3n+1){background:#9bb896}
.replay-winner-suspense>span{letter-spacing:.2em;color:#dbc078;font-weight:800}
.replay-winner-suspense h2{font-size:clamp(38px,7vw,92px)}
.replay-suspense-ring{width:clamp(110px,22vh,230px);aspect-ratio:1;border:2px solid #d4af6555;border-radius:50%;display:grid;place-items:center;margin:28px auto;font-size:clamp(64px,12vh,130px);animation:replay-crown-breath .6s ease-in-out infinite alternate}
.replay-suspense-bars{display:flex;justify-content:center;align-items:center;gap:9px;height:65px;margin:22px auto}
.replay-suspense-bars i{display:block;width:10px;height:55px;background:linear-gradient(#ffe8a4,#90732e);transform-origin:center;animation:replay-drum-bar .32s ease-in-out infinite alternate}
.replay-suspense-bars i:nth-child(2n){animation-delay:-.11s}.replay-suspense-bars i:nth-child(3n){animation-delay:-.2s}
.replay-slide-stats{max-height:calc(100dvh - 150px);overflow:auto;padding:12px}
.replay-final-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px auto;text-align:left}
.replay-final-details details{background:#18201ad9;border:1px solid #c8a45d55;border-radius:8px;padding:12px}
.replay-final-details summary{cursor:pointer;font-size:16px;font-weight:750;color:var(--gold);min-height:32px}
.replay-final-details dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;margin:14px 0;font-size:14px}
.replay-final-details dd{text-align:right;font-weight:700}
@keyframes replay-award-stamp{0%{transform:scale(2.2) rotate(-12deg);opacity:0}70%{transform:scale(.93) rotate(3deg);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes replay-award-name{from{transform:translateY(28px) scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes replay-award-spark{0%{transform:translate(0,0) scale(.2);opacity:0}12%{opacity:1}70%{opacity:1}100%{transform:translate(var(--sx),var(--sy)) rotate(var(--turn));opacity:0}}
@keyframes replay-crown-breath{from{transform:scale(.96);box-shadow:0 0 12px #d4af6511}to{transform:scale(1.03);box-shadow:0 0 60px #d4af6544}}
@keyframes replay-drum-bar{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@media(max-width:700px){.replay-final-details{grid-template-columns:1fr}.replay-podium-reveal{min-height:50vh}.replay-podium-reveal h2{font-size:clamp(38px,12vw,70px)}.replay-slide-stats{max-height:calc(100dvh - 230px)}}
@media(prefers-reduced-motion:reduce){.replay-podium-reveal.is-in h2,.replay-podium-reveal.is-in .replay-podium-medal,.replay-suspense-ring,.replay-suspense-bars i{animation:none}.replay-podium-sparks{display:none}}
.replay-cats { font-size: clamp(13px, 1.7vh, 18px); color: rgba(248,245,238,.7); }
.replay-cats.is-complete { color: var(--gold); font-weight: 700; }
.replay-breakdown { margin: clamp(14px, 2.4vh, 30px) auto 0; max-width: 520px; text-align: left; padding: clamp(12px, 1.8vh, 20px); border-radius: 4px; background: rgba(24,32,26,.7); box-shadow: inset 0 0 0 1px rgba(200,164,93,.24); }
.replay-breakdown h3 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(248,245,238,.5); margin-bottom: .6em; }
.replay-breakdown dl { display: grid; grid-template-columns: 1fr auto; gap: .4em 18px; font-size: clamp(13px, 1.7vh, 17px); }
.replay-breakdown dd { font-weight: 700; text-align: right; }
.replay-breakdown .replay-sum { color: var(--gold); font-weight: 800; }

.replay-final-table { max-height: 46vh; overflow: auto; margin-top: clamp(12px, 2vh, 24px); }
.replay-final-table table { width: 100%; border-collapse: collapse; font-size: clamp(13px, 1.9vh, 19px); }
.replay-final-table td { padding: .35em .8em; border-bottom: 1px solid rgba(200,164,93,.14); text-align: left; }
.replay-final-table td:first-child { width: 3ch; color: rgba(248,245,238,.5); }
.replay-final-table td:last-child { text-align: right; font-weight: 700; color: var(--gold); }
.replay-final-table tr.replay-role-organizer td, .replay-final-table tr.replay-role-couple td { color: var(--gold); font-style: italic; }
.replay-qr { margin-top: clamp(14px, 2.4vh, 28px); display: grid; justify-items: center; gap: .6em; }
.replay-qr svg { width: clamp(140px, 22vh, 240px); height: auto; background: var(--ivory); padding: 10px; border-radius: 4px; }

.replay-steps { position: absolute; bottom: clamp(14px, 3vh, 40px); display: flex; gap: 14px; align-items: center; font-size: 14px; color: rgba(248,245,238,.6); }
.replay-steps button { font: inherit; font-weight: 700; color: var(--ivory); background: rgba(79,99,75,.92); border: 1px solid rgba(200,164,93,.4); border-radius: 2px; padding: .55em 1.4em; cursor: pointer; }
.replay-steps button:disabled { opacity: .35; cursor: default; }
.replay-steps button:hover:not(:disabled) { background: var(--sage-650); }

/* ── bąble z kotami ───────────────────────────────────────── */
.replay-burst { position: fixed; inset: 0; pointer-events: none; z-index: 8; display: grid; place-items: center; }
.replay-bubble {
  position: absolute; margin: 0; width: clamp(64px, 9vh, 104px); text-align: center;
  opacity: 0; transform: translate(0,0) scale(.2);
  animation: replay-pop 3.8s cubic-bezier(.16,.8,.3,1) forwards;
}
.replay-bubble img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px rgba(200,164,93,.7), 0 14px 34px rgba(0,0,0,.5); }
.replay-bubble figcaption { margin-top: .35em; font-size: 12px; font-weight: 700; color: var(--ivory); text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.replay-bubble.is-complete img { box-shadow: 0 0 0 4px var(--gold), 0 0 40px rgba(200,164,93,.8); }
@keyframes replay-pop {
  0%   { opacity: 0; transform: translate(0,0) scale(.2); }
  18%  { opacity: 1; transform: translate(calc(var(--dx) * .55), calc(var(--dy) * .55)) scale(1.08); }
  70%  { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) * 1.15 - 40px)) scale(.9); }
}
@media (prefers-reduced-motion: reduce) { .replay-bubble { animation-duration: .01ms; } }

/* Cards and their image must never share a size/shape selector. */
.replay * { box-sizing: border-box; }
.replay-board { grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 460px); }
.replay-side, .replay-axis, .replay-rows { min-width: 0; }
.replay-card { width: 100%; min-width: 0; border-radius: 14px; overflow-wrap: anywhere; display: flow-root; }
.replay-card:first-child { box-shadow: inset 0 0 0 2px var(--gold), 0 6px 26px #0004; }
.replay-card h3 { color: var(--ivory); line-height: 1.3; }
.replay-card p { margin-bottom: 0; }
.replay-stage { padding-bottom: 76px; overflow: auto; }
.replay-deck { opacity: 1; flex-wrap: wrap; }
.replay.is-finale .replay-deck { display: none; }
.replay-finale.is-on { display: flex; overflow: auto; padding: 24px; gap: 24px; justify-content: flex-start; background: radial-gradient(90% 70% at 50% 28%, #3b4d38, #18201a); }
.replay-slide-wrap { margin: auto; flex: 1 0 auto; }
.replay-steps { position: sticky; bottom: 0; flex: 0 0 auto; flex-wrap: wrap; justify-content: center; padding: 12px; background: #18201af5; border-radius: 12px; z-index: 10; }
#replay-stage-select { appearance: none; -webkit-appearance: none; max-width: 220px; padding: 10px 14px; font: inherit; background: #33452f; color: var(--ivory); border: 1px solid var(--gold); border-radius: 6px; }
.replay-steps button:focus-visible, .replay-start button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.replay-breakdown { max-width: 700px; }
.replay-start { position: absolute; inset: 0; z-index: 75; display: grid; place-items: center; background: #18201af5; padding: 24px; text-align: center; }
.replay-start[hidden] { display: none; }
.replay-audio-controls { position: fixed; top: 8px; right: 12px; z-index: 80; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: #18201ae8; color: var(--ivory); font-size: 12px; }
.replay-audio-controls button { cursor: pointer; color: var(--ivory); background: transparent; border: 1px solid #c8a45d80; border-radius: 6px; padding: 5px 8px; }
.replay-audio-controls label { display: flex; align-items: center; gap: 7px; }
#replay-volume { width: 90px; accent-color: var(--gold); }
.replay-stage { padding-top: 64px; }
.replay-finale.is-on { padding-top: 64px; }
.replay-start { padding-top: 64px; }
.replay-start .replay-sound-note { font-size: 14px; color: #d9d4c6; }
.replay.is-highlight .replay-clock b { text-shadow: 0 0 20px #c8a45d55; }
.replay-row.is-spotlight { background: linear-gradient(90deg, #c8a45d24, transparent); border-radius: 9px; }
.replay-row.is-spotlight .replay-who { color: #f3d997; text-shadow: 0 0 15px #c8a45d55; }
.replay-card.is-epic { border: 1px solid var(--gold); background: linear-gradient(135deg, #65572f, #223323); }
.replay-card.is-epic.is-in { animation: replay-epic 1.2s ease-out; }
@keyframes replay-epic { from { box-shadow: 0 0 38px #c8a45d99; } to { box-shadow: inset 0 0 0 2px var(--gold), 0 6px 26px #0004; } }
.replay-start > div { max-width: 700px; }
.replay-start h2 { color: var(--gold); font-size: clamp(30px, 5vw, 64px); }
.replay-start p { font-size: 18px; line-height: 1.6; }
.replay-start button { padding: 14px 24px; margin: 12px 6px; border: 1px solid var(--gold); border-radius: 12px; background: #3b4d38; color: var(--ivory); font: inherit; cursor: pointer; }
#replay-start-button, #replay-next { background: var(--gold); color: #18201a; font-weight: 800; }
@media (max-width: 900px) {
  .replay-board { display: flex; flex-direction: column; gap: 18px; }
  .replay-side { order: -1; min-height: 180px; }
  .replay-cards { flex: none; max-height: 260px; }
  .replay-rows { flex-shrink: 0; }
  .replay-chrono { grid-template-columns: 1fr 1fr; gap: 12px; }
  .replay-axis { grid-row: 2; grid-column: 1 / -1; }
  .replay-total { grid-column: 2; grid-row: 1; }
  .replay-row { grid-template-columns: 2ch minmax(5ch, 10ch) minmax(0,1fr) auto; gap: 6px; }
  .replay-points { min-width: 5ch; }
  .replay-stage { padding: 64px 12px 100px; }
  .replay-finale.is-on { padding: 64px 10px 16px; }
}

/* Final rush: large finish clock, real duels and a sequential automatic finale. */
.replay { font-family: system-ui, sans-serif; }
.replay-stage { grid-template-rows: auto auto minmax(0,1fr); gap: 16px; }
.replay-finish-line { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr); align-items:center; gap:24px; border:1px solid #c8a45d70; border-radius:14px; padding:12px 22px; background:linear-gradient(110deg,#c8a45d1a,#142319); }
.replay-finish-line span,.replay-finish-line em { display:block; font-size:12px; font-style:normal; letter-spacing:.06em; color:#d7d2c4; }
.replay-finish-line b { display:block; font-size:clamp(28px,4vh,46px); line-height:1.18; color:#f3d997; }
.replay-finish-line small { font-size:.4em; color:#ddd7c7; }
#replay-duel { grid-column:3; text-align:right; align-self:center; }
#replay-duel b { font-size:clamp(24px,3.5vh,38px); }
#replay-gap { text-align:center; min-width:0; }
#replay-gap[hidden] { display:none; }
#replay-gap>span { font-size:clamp(12px,1.4vh,16px); font-weight:750; }
#replay-gap>strong { display:block; font-size:clamp(56px,9vh,112px); line-height:1.05; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:#ffe5a5; font-weight:900; }
#replay-gap small { font-size:.38em; }
#replay-gap.is-close>strong { color:#fff0c9; text-shadow:0 0 24px #d8ad6266; }
.replay.is-last-day .replay-finish-line { border-color:#ff695980; box-shadow:0 0 32px #f4433628; background:linear-gradient(110deg,#5b2625,#172c22); overflow:visible; }
.replay.is-last-day #replay-countdown { position:relative; overflow:visible; }
.replay.is-last-day #replay-countdown > span { color:#ff9e92; font-weight:900; }
.replay.is-last-day #replay-countdown .replay-countdown-clock { color:#ff6358; font-size:clamp(72px,7.2vw,140px); line-height:.9; font-weight:950; font-variant-numeric:tabular-nums; letter-spacing:-.065em; white-space:nowrap; margin:8px 0 6px -5px; text-shadow:0 0 28px #ff49375c,0 3px 0 #5c1717; }
.replay.is-last-day #replay-countdown .replay-countdown-clock small { display:block; color:#ffb4a9; font-size:13px; letter-spacing:.18em; line-height:1.4; margin:4px 0 0 6px; text-shadow:none; }
.replay-row { transition:transform .48s cubic-bezier(.22,1,.36,1),opacity .3s; }
.replay-card-overtake { border:1px solid #f3d997; }
@media(min-width:901px){ .replay-row { grid-template-columns:32px clamp(160px,13vw,250px) minmax(0,1fr) 140px; } }
.replay-card-lead_change h3,.replay-card-overtake h3 { color:#ffe7a4; }
.replay-band-closure { width:5px!important; background:#ffdf8a; box-shadow:0 0 14px #ffd471; }
.replay-record-hero { max-width:1050px; margin:auto; padding:36px; border:1px solid #c8a45d55; border-radius:22px; background:linear-gradient(130deg,#13291c,#31402c); }
.replay-record-index { color:#c6cdbf; font-size:16px; letter-spacing:.15em; }
.replay-record-hero h3 { margin:30px 0 8px; font-size:clamp(22px,3.6vh,42px); color:#d9d9c8; }
.replay-record-hero h2 { font-size:clamp(44px,8.5vh,96px); margin:0; line-height:1.1; overflow-wrap:anywhere; }
.replay-record-hero p { font-size:clamp(22px,3vh,34px); line-height:1.5; }
.replay-record-hero.is-epic { border-color:#f7d582; box-shadow:0 0 85px #c8a45d22; }
.replay-intensity { margin:32px auto 0; height:8px; background:#ffffff14; width:80%; border-radius:10px; overflow:hidden; }
.replay-intensity i { display:block; height:100%; background:linear-gradient(90deg,#77986c,#ffe6a0); }
.replay-auto-progress { position:fixed; bottom:0; left:0; height:5px; background:#f2cf78; transform-origin:left; width:100%; transform:scaleX(0); }
@keyframes replay-auto-fill { from{transform:scaleX(0)} to{transform:scaleX(1)} }
.replay-slide-closure h2 { font-size:clamp(44px,10vh,110px); line-height:1; margin:20px 0; }
.replay-slide-closure>b { font-size:clamp(48px,12vh,130px); color:#fff1b7; }
.replay-slide-closure small { font-size:.28em; }
.replay-archive h2 { font-size:clamp(28px,4vh,46px); }
#replay-archive-search { width:min(650px,95%); padding:15px; font:inherit; border:1px solid #c8a45d; background:#14241a; color:#fff5dc; border-radius:8px; margin:20px 0; }
.replay-archive-list { max-height:55vh; overflow:auto; text-align:left; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.replay-archive-list article { border:1px solid #c8a45d50; padding:18px; border-radius:10px; background:#14241a; }
.replay-archive-list article[hidden] { display:none; }
.replay-archive-list strong { color:#f4d991; }
.replay-archive-list p { font-size:16px; }
@media(max-width:900px){
  .replay-finish-line { grid-template-columns:1fr; padding:12px; gap:12px; }
  #replay-duel { grid-column:auto; text-align:left; }
  .replay-record-hero { padding:24px 14px; }
  .replay-record-hero h2 { font-size:42px; }
  .replay-record-hero p { font-size:20px; }
  .replay-archive-list { grid-template-columns:1fr; }
  .replay-stage { grid-template-rows:auto auto auto; }
  .replay-steps { gap:8px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce){ .replay-auto-progress { animation:none!important; } }

.replay-record-members { display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin:24px 0; }
.replay-record-members strong { padding:12px 22px; border:1px solid #e8c67499; border-radius:14px; background:#c8a45d15; color:#f3d997; font-size:clamp(28px,4.5vh,52px); overflow-wrap:anywhere; }
.replay-start>div { display:flex; flex-wrap:wrap; justify-content:center; max-width:1000px; }
.replay.is-awaiting .replay-stage,.replay.is-awaiting .replay-deck { visibility:hidden; }
.replay.is-mystery .replay-who { letter-spacing:.12em; color:#e5dcc3; }

/* Keep content and controls in separate rows, never layered over the QR code. */
.replay-finale.is-on{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;align-items:stretch;justify-items:center;justify-content:stretch;overflow:hidden;gap:16px;padding:64px 24px 20px}
.replay-finale .replay-slide-wrap{width:min(1480px,100%);height:100%;max-height:100%;min-height:0;overflow:auto;margin:0;flex:none;align-self:stretch}
.replay-finale .replay-steps{position:relative;bottom:auto;margin:0;max-width:min(1480px,96vw);align-self:end}
.replay-finale.is-stats .replay-slide-wrap{place-items:stretch}
.replay-slide-stats{display:grid;grid-template-rows:auto minmax(0,1fr);gap:18px;max-height:100%;height:100%;min-height:0;overflow:hidden;padding:0}
.replay-slide-stats h2{font-size:clamp(30px,4.8vh,56px);margin:0}
.replay-stats-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:28px;min-height:0;text-align:left}
.replay-stats-results{min-height:0;min-width:0;overflow:auto;padding-right:6px}
.replay-slide-stats .replay-final-table{max-height:none;overflow:visible;margin-top:0}
.replay-slide-stats .replay-final-table table{min-width:0;table-layout:fixed}
.replay-slide-stats .replay-final-table td:first-child{width:42px}
.replay-slide-stats .replay-final-table td:last-child{width:135px}
.replay-slide-stats .replay-final-table td{overflow-wrap:anywhere}
.replay-slide-stats .replay-final-details{margin:16px 0 8px}
.replay-slide-stats .replay-qr{margin:0;align-self:center;text-align:center;padding:20px 12px;border:1px solid #c8a45d55;border-radius:16px;background:#18201ab0}
.replay-slide-stats .replay-qr h3{color:#e7c677;font-size:21px;margin:0 0 10px}
.replay-slide-stats .replay-qr svg{width:min(220px,100%);height:auto}
.replay-slide-stats .replay-qr p{font-size:15px;line-height:1.5;overflow-wrap:anywhere}

.replay-duo-reveal{position:relative;isolation:isolate;max-width:1300px;margin:auto;padding:14px}
.replay-duo-eyebrow{display:block;color:#f9dc8c;font-size:clamp(16px,2.5vh,28px);font-weight:850;letter-spacing:.17em;margin-bottom:20px}
.replay-duo-cards{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.replay-duo-card{min-width:0;padding:clamp(18px,3vh,36px);border:2px solid #bec6c080;border-radius:24px;background:linear-gradient(150deg,#455249,#15251c);box-shadow:0 12px 40px #0003}
.replay-duo-1{border-color:#efd18a;background:radial-gradient(ellipse at top,#6c592c,#233320 75%);box-shadow:0 0 70px #e5b94f33}
.replay-duo-card>span{display:block;letter-spacing:.15em;font-size:clamp(12px,1.7vh,19px);font-weight:800;color:#e7e2d1}
.replay-duo-medal{font-size:clamp(54px,10vh,112px);line-height:1.1;margin-bottom:12px}
.replay-duo-card h2{font-size:clamp(38px,5.8vw,88px);line-height:1.05;margin:18px 0;color:#f5f0de;overflow-wrap:anywhere}
.replay-duo-1 h2{color:#ffe59b}
.replay-duo-card>b{display:block;font-size:clamp(26px,4.5vh,54px);font-weight:900;font-variant-numeric:tabular-nums;color:#fff1c7}
.replay-duo-card small{font-size:.4em}
.replay-duo-reveal.is-in .replay-duo-cards{animation:replay-award-name .7s cubic-bezier(.16,1,.3,1) both}
.replay-duo-margin{position:relative;z-index:1;display:flex;gap:22px;justify-content:center;align-items:center;margin:22px auto 0}
.replay-duo-margin strong{font-size:clamp(40px,7vh,80px);font-weight:950;color:#f8d98d;line-height:1}
.replay-duo-margin p{font-size:clamp(15px,2vh,22px);text-align:left;margin:0}
.replay-duo-margin p span{color:#d9bb79;font-weight:750}
.replay-duo-reveal .replay-duo-applause{font-size:clamp(16px,2vh,24px);margin-top:20px}

.replay-final-build{position:relative;isolation:isolate}
.replay-final-build::before{content:"";position:absolute;inset:-12%;z-index:-1;background:radial-gradient(ellipse,#c3a55238,transparent 65%);animation:replay-tension-glow 7s ease-in forwards;pointer-events:none}
.replay-final-build .replay-suspense-ring{animation:replay-crown-breath .45s ease-in-out infinite alternate;margin:20px auto}
.replay-suspense-phrases{display:grid;place-items:center;min-height:2.3em;font-size:clamp(30px,5.2vw,74px)}
.replay-suspense-phrases h2{grid-area:1/1;font-size:inherit;line-height:1.12;margin:0;opacity:0;animation:replay-tension-phrase 2.4s ease both}
.replay-suspense-phrases h2:nth-child(2){animation-delay:2.3s}
.replay-suspense-phrases h2:nth-child(3){animation-delay:4.6s}
.replay-final-build .replay-suspense-bars{margin:14px auto;height:48px}
.replay-final-build .replay-suspense-bars i{height:44px;animation-duration:.19s}
.replay-suspense-count{position:relative;height:100px;font-size:90px;line-height:1;font-weight:950;color:#ffe29b}
.replay-suspense-count b{position:absolute;inset:0;opacity:0;animation:replay-tension-count 1s ease both;animation-delay:4s}
.replay-suspense-count b:nth-child(2){animation-delay:5s}.replay-suspense-count b:nth-child(3){animation-delay:6s}
.is-stage-paused .replay-final-build *,.is-stage-paused .replay-final-build::before{animation-play-state:paused}
@keyframes replay-tension-glow{from{opacity:.25;transform:scale(.65)}to{opacity:1;transform:scale(1.15)}}
@keyframes replay-tension-phrase{0%{opacity:0;transform:translateY(14px)}12%,87%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.04)}}
@keyframes replay-tension-count{0%{opacity:0;transform:scale(1.5)}18%,75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
@media(max-width:900px){
  .replay-finale.is-on{padding:64px 10px 12px;gap:10px}
  .replay-slide-stats{display:block;height:auto;max-height:none;overflow:visible}
  .replay-stats-layout{grid-template-columns:1fr;gap:16px;margin-top:18px}
  .replay-stats-results{overflow:visible;padding:0}
  .replay-slide-stats .replay-final-table{overflow:auto}
  .replay-slide-stats .replay-final-table td:last-child{width:100px}
  .replay-slide-stats .replay-qr{max-width:320px;justify-self:center;width:100%}
  .replay-duo-reveal{padding:4px}.replay-duo-cards{gap:10px}
  .replay-duo-card{padding:16px 8px;border-radius:16px}
  .replay-duo-card h2{font-size:clamp(26px,6.5vw,54px);margin:14px 0}
  .replay-duo-card>b{font-size:clamp(20px,4.5vw,38px)}
  .replay-duo-card>span{font-size:10px;letter-spacing:.06em}
  .replay-duo-medal{font-size:56px}
  .replay-duo-margin{gap:12px;margin-top:18px}.replay-duo-margin strong{font-size:42px}.replay-duo-margin p{font-size:13px}
  .replay-duo-eyebrow{font-size:15px;margin-bottom:12px}.replay-duo-reveal .replay-duo-applause{font-size:14px}
  .replay-final-build .replay-suspense-ring{width:110px;font-size:66px}.replay-suspense-count{height:66px;font-size:60px}
}
@media(prefers-reduced-motion:reduce){
  .replay-duo-reveal.is-in .replay-duo-cards,.replay-final-build::before,.replay-final-build .replay-suspense-ring,.replay-suspense-phrases h2,.replay-suspense-count b{animation:none}
  .replay-suspense-phrases h2{display:none}.replay-suspense-phrases h2:last-child{display:block;opacity:1}
  .replay-suspense-count{display:none}
}
.replay-overtake { position:fixed; inset:0; z-index:9; pointer-events:none; overflow:hidden; display:grid; place-items:center; }
.replay-overtake[hidden] { display:none!important; }
.replay-overtake-car { position:absolute; top:22%; font-size:clamp(55px,8vw,130px); animation:replay-drive .9s cubic-bezier(.25,.7,.6,1) both; }
.replay-overtake-car span { display:inline-block; margin-left:-.25em; }
.replay-overtake-badge { display:grid; justify-items:center; gap:6px; padding:20px 44px; max-width:min(90vw,900px); border:3px solid #f5d27d; border-radius:28px; background:#173324f2; box-shadow:0 12px 55px #0007; text-align:center; animation:replay-crown-badge 2.3s ease both; }
.replay-overtake-badge small { font-size:clamp(16px,2vw,25px); font-weight:800; letter-spacing:.08em; color:#ffde8b; }
.replay-overtake-badge strong { font-size:clamp(36px,5vw,70px); line-height:1.1; color:#fff5d8; overflow-wrap:anywhere; }
.replay-overtake-badge>span:last-child { font-size:clamp(16px,2vw,24px); }
.replay-flying-crown { font-size:56px; line-height:1; animation:replay-crown-hop .7s cubic-bezier(.2,.8,.3,1.4) both; }
@keyframes replay-drive { from{transform:translateX(65vw) rotate(-6deg)} to{transform:translateX(-75vw) rotate(3deg)} }
@keyframes replay-crown-hop { from{transform:translateY(-140px) rotate(-35deg) scale(.4)} to{transform:none} }
@keyframes replay-crown-badge { 0%{opacity:0;transform:scale(.85) rotate(-3deg)} 14%,82%{opacity:1;transform:none} 100%{opacity:0;transform:scale(1.05)} }
@media(max-width:600px){ .replay-overtake-badge { padding:18px; } .replay-record-members strong { font-size:28px; padding:10px 16px; } }
@media(prefers-reduced-motion:reduce){ .replay-overtake-car { display:none; } .replay-overtake-badge,.replay-flying-crown { animation:none; } }