/* Time stepper, tournament bracket and champion crown. Motion uses transform/opacity only. */

.time-stepper__control { display:grid; grid-template-columns:58px minmax(104px,1fr) 58px; align-items:stretch; gap:8px; }
.time-stepper__button {
  display:grid; min-height:58px; place-items:center; padding:0;
  color:var(--primary-dark); background:var(--surface); border:1px solid var(--line-strong); border-radius:13px; box-shadow:var(--shadow-xs);
  font:inherit; font-size:30px; font-weight:800; line-height:1; cursor:pointer;
  touch-action:manipulation; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  transition:transform 120ms var(--ease-out), background-color 120ms;
}
.time-stepper__button span { pointer-events:none; }
.time-stepper__button:hover:not(:disabled) { background:var(--primary-soft); }
.time-stepper__button:active:not(:disabled) { transform:scale(.94); }
.time-stepper__button:disabled { opacity:.38; cursor:not-allowed; box-shadow:none; }
.time-stepper__value {
  display:flex; min-height:58px; flex-direction:column; align-items:center; justify-content:center;
  color:var(--navy); background:var(--surface); border:1px solid var(--line-strong); border-radius:13px; font-variant-numeric:tabular-nums;
}
.time-stepper__value strong { font-size:23px; font-weight:850; letter-spacing:-.01em; }
.time-stepper__value small { color:var(--ink-soft); font-size:12px; font-weight:700; }
.time-stepper__value small:empty { display:none; }

/* Status line above the bracket */
#setupTournament .bracket-view p { margin:0; }
.bracket-status { display:grid; gap:6px; margin-bottom:6px; }
.setup-bracket-class { margin-bottom:8px !important; color:var(--ink-soft); font-size:13px; }
.bracket-next-line { font-size:16px; }
.bracket-next-line strong { color:var(--primary-dark); }
.bracket-time { color:var(--ink-soft); font-size:13px; font-weight:700; }
.bracket-champion {
  position:relative; display:flex; align-items:center; gap:14px; overflow:hidden; padding:12px 18px 12px 12px;
  color:#4d3200; background:linear-gradient(118deg,#fff8d6,#ffe38f 60%,#ffd25e); border:2px solid #e6a900; border-radius:16px;
  box-shadow:0 10px 26px rgba(184,120,0,.18);
}
.bracket-champion small { display:block; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; opacity:.8; }
.bracket-champion p { font-size:18px; }
.bracket-champion strong { font-size:22px; font-weight:900; }
.bracket-champion__crown { display:block; width:64px; flex:0 0 auto; filter:drop-shadow(0 4px 5px rgba(125,74,0,.3)); }
.bracket-champion::after {
  content:''; position:absolute; inset:0 auto 0 0; width:40%;
  background:linear-gradient(100deg,transparent,var(--glass),transparent); transform:translateX(-120%); pointer-events:none;
}
.crown-svg { display:block; width:100%; height:auto; overflow:visible; }

/* Tree layout: each match spans the rows of the two matches that feed it (explicit rows; auto-placement would shift later columns down). */
.bracket-view .bracket { --bracket-gap:30px; display:grid; grid-auto-columns:minmax(212px,1fr); column-gap:var(--bracket-gap); row-gap:10px; align-items:center; margin:14px 0 12px; padding:14px 12px 10px; overflow:auto; }
#setupTournament .bracket-view .bracket { gap:10px var(--bracket-gap); padding:14px 12px 10px; }
.bracket-view .bracket section { display:contents; }
.bracket-round__matches { display:contents; }
.bracket-view .bracket h3 { grid-column:calc(var(--round) + 1); grid-row:1; align-self:end; margin:0 0 4px; color:var(--ink-2); font-size:14px; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.bracket-view .bracket-match {
  position:relative; grid-column:calc(var(--round) + 1); align-self:center;
  margin:0; padding:11px 12px; background:var(--paper); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow-xs);
}
.bracket-view .bracket-match.is-complete::after {
  content:''; position:absolute; top:50%; left:100%; width:var(--bracket-gap); height:3px; margin-top:-1.5px;
  background:var(--primary); border-radius:3px; transform-origin:left center;
}
.bracket-view .bracket-round:last-child .bracket-match::after { display:none; }
.bracket-slots { display:grid; margin:0; padding:0; gap:4px; list-style:none; }
.bracket-slot { display:flex; min-width:0; align-items:center; gap:8px; padding:6px 9px; background:var(--surface-soft); border-radius:9px; font-weight:750; }
.bracket-slot__name { min-width:0; overflow-wrap:anywhere; }
.bracket-slot b { margin-left:auto; font-variant-numeric:tabular-nums; }
.bracket-slot small { color:var(--red); font-size:11px; font-weight:800; }
.bracket-slot.is-empty { color:var(--ink-soft); font-weight:600; font-style:italic; background:transparent; border:1px dashed var(--line-strong); }
.bracket-slot.is-winner { color:var(--green-ink); background:var(--green-tint); box-shadow:inset 4px 0 0 var(--green); }
.bracket-slot.is-winner .bracket-slot__name::after { content:' ✓'; }
.bracket-slot.is-loser { opacity:.55; }
.bracket-slot__crown { display:block; width:26px; flex:0 0 auto; margin:-6px 0 -2px; transform:rotate(-12deg); }
.bracket-match__status { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px; margin-top:8px !important; color:var(--ink-soft); font-size:13px; }
.bracket-match__status strong { font-weight:750; }
.bracket-match__time { padding:2px 7px; color:var(--ink-2); background:var(--surface-soft); border-radius:99px; font-size:11px; font-weight:800; }
.bracket-view .bracket-match.is-bye { background:var(--surface-soft); }
.bracket-view .bracket-match--pending { color:var(--ink-soft); background:var(--surface-soft); border-style:dashed; box-shadow:none; }
.bracket-view .bracket-match.is-upcoming { border-color:var(--line-strong); }

/* The next match is unmistakable: accent frame, badge, pulse and its own start action. */
.bracket-view .bracket-match.is-next {
  z-index:1; margin-top:10px; padding-top:18px;
  background:linear-gradient(180deg,var(--surface),var(--brand-tint)); border:2px solid var(--primary);
  box-shadow:0 0 0 4px var(--primary-soft), 0 14px 30px rgba(29, 79, 159,.22);
}
.bracket-view .bracket-match.is-next::before {
  content:''; position:absolute; inset:-7px; z-index:-1; border-radius:18px; pointer-events:none;
  box-shadow:0 0 0 3px rgba(29, 79, 159,.5), 0 0 26px 6px rgba(29, 79, 159,.4); opacity:.55;
  animation:bracket-pulse 1.8s ease-in-out infinite;
}
.bracket-view .bracket-match.is-next .bracket-slot { color:var(--navy); background:var(--surface); border:1px solid var(--line); font-size:16px; font-weight:850; }
.bracket-match__badge {
  position:absolute; top:-12px; left:12px; padding:4px 10px; color:#fff; background:var(--primary); border-radius:99px;
  box-shadow:0 4px 10px rgba(29, 79, 159,.35); font-size:11px; font-weight:900; letter-spacing:.07em; text-transform:uppercase;
}
.bracket-match__start { width:100%; min-height:50px; margin-top:10px; }

/* Every card names its round, so the column heading never needs a scroll back up. */
.bracket-match__round { display:block; margin:-3px 0 6px; color:var(--ink-soft); font-size:11px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.bracket-view .bracket-match.is-next .bracket-match__round { color:var(--primary-dark); }
.bracket-view .bracket-match.is-next { cursor:zoom-in; }
.bracket-view .bracket-match.is-zoomed { opacity:.3; transition:opacity 240ms ease; }

/* Next-match zoom: the card grows out of the bracket so the back row can read who plays and where to stand. */
.bracket-zoom { position:fixed; inset:0; z-index:40; pointer-events:none; }
.bracket-zoom__scrim { position:absolute; inset:0; background:rgba(6,14,28,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.bracket-zoom__card {
  position:absolute; inset:0; display:grid; width:min(1120px, calc(100vw - 32px)); height:fit-content; max-height:calc(100dvh - 32px); margin:auto;
  overflow:auto; padding:clamp(20px,3vw,36px); gap:clamp(12px,2vh,22px); justify-items:center; box-sizing:border-box; pointer-events:auto;
  color:var(--navy); background:linear-gradient(180deg,var(--surface),var(--brand-tint)); border:3px solid var(--primary); border-radius:28px;
  box-shadow:0 0 0 8px var(--primary-soft), 0 30px 80px rgba(18,14,40,.45); transform-origin:center; text-align:center;
}
.bracket-zoom__close {
  position:absolute; top:12px; right:12px; display:grid; width:52px; height:52px; place-items:center; padding:0;
  color:var(--ink-2); background:var(--surface); border:1px solid var(--line-strong); border-radius:50%; box-shadow:var(--shadow-xs);
  font:inherit; font-size:30px; line-height:1; cursor:pointer;
}
.bracket-zoom__close:hover { background:var(--primary-soft); }
.bracket-zoom__kicker { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:0; padding:0 56px; }
.bracket-zoom__round {
  padding:7px 18px; color:#fff; background:var(--primary); border-radius:99px; box-shadow:0 6px 16px rgba(29, 79, 159,.35);
  font-size:clamp(17px,2.2vw,26px); font-weight:900; letter-spacing:.06em; text-transform:uppercase;
}
.bracket-zoom__next { color:var(--ink-soft); font-size:clamp(14px,1.6vw,19px); font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.bracket-zoom__versus { display:grid; width:100%; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:clamp(10px,2vw,22px); }
.bracket-zoom__side {
  --zoom-side:var(--player-a); --zoom-ink:var(--player-a-ink);
  display:flex; min-width:0; align-items:center; gap:clamp(8px,1.4vw,16px); padding:clamp(14px,2.4vw,26px) clamp(12px,2vw,22px);
  color:var(--zoom-ink); background:color-mix(in srgb, var(--zoom-side) 13%, var(--surface)); border:3px solid var(--zoom-side); border-radius:24px;
  box-shadow:0 8px 0 color-mix(in srgb, var(--zoom-side) 35%, transparent);
}
.bracket-zoom__side.side-1 { --zoom-side:var(--player-b); --zoom-ink:var(--player-b-ink); }
.bracket-zoom__side--left { justify-content:flex-start; text-align:left; }
.bracket-zoom__side--right { justify-content:flex-end; text-align:right; }
/* Names shrink until their longest word fits the side box, so they wrap only between words. */
.bracket-zoom__who { display:grid; flex:1 1 0; min-width:0; gap:4px; container-type:inline-size; }
.bracket-zoom__name { display:block; overflow-wrap:break-word; font-size:min(clamp(28px,6vw,104px), calc(100cqi / (.76 * var(--word, 6)))); font-weight:900; line-height:1.05; letter-spacing:-.01em; }
.bracket-zoom__name.is-numbered { white-space:nowrap; }
.bracket-zoom__place { font-size:clamp(14px,1.7vw,20px); font-weight:850; letter-spacing:.04em; text-transform:uppercase; opacity:.85; }
.bracket-zoom__arrow { flex:none; color:var(--zoom-side); font-size:clamp(30px,5vw,64px); line-height:1; }
.bracket-zoom__side--left .bracket-zoom__arrow { animation:zoom-arrow-left 1.2s ease-in-out infinite; }
.bracket-zoom__side--right .bracket-zoom__arrow { animation:zoom-arrow-right 1.2s ease-in-out infinite; }
@keyframes zoom-arrow-left { 50% { transform:translateX(-10px); } }
@keyframes zoom-arrow-right { 50% { transform:translateX(10px); } }
.bracket-zoom__vs {
  display:grid; width:clamp(48px,6vw,76px); aspect-ratio:1; place-items:center; color:#4d3200;
  background:radial-gradient(circle at 35% 30%,#fff3b0,#f6be1a 60%,#c47a00); border-radius:50%;
  box-shadow:0 6px 16px rgba(184,120,0,.35); font-size:clamp(16px,2vw,24px); font-weight:900;
}
.bracket-zoom__hint { margin:0; color:var(--ink-soft); font-size:clamp(14px,1.6vw,18px); font-weight:700; }
.bracket-zoom__start { min-width:min(320px,100%); min-height:58px; font-size:clamp(17px,2vw,21px); }
.bracket-zoom.is-closing { pointer-events:none; }
.bracket-zoom.is-closing .bracket-zoom__card { pointer-events:none; }
@media (max-width: 600px) {
  .bracket-zoom__card { width:calc(100vw - 24px); padding:18px 14px; border-radius:22px; }
  .bracket-zoom__kicker { padding:0 48px 0 0; justify-content:flex-start; }
  .bracket-zoom__versus { gap:8px; }
  .bracket-zoom__side { flex-direction:column; gap:6px; padding:12px 8px; border-radius:18px; }
  .bracket-zoom__side--left { align-items:flex-start; }
  .bracket-zoom__side--right { flex-direction:column-reverse; align-items:flex-end; }
  .bracket-zoom__who { flex:none; width:100%; }
  .bracket-zoom__name { font-size:min(clamp(20px,7vw,30px), calc(100cqi / (.76 * var(--word, 6)))); }
  .bracket-zoom__place { font-size:12px; }
  .bracket-zoom__arrow { font-size:30px; }
  .bracket-zoom__vs { width:40px; font-size:14px; }
}
body.reduced-motion .bracket-zoom__arrow { animation:none; }
@media (prefers-reduced-motion: reduce) { body:not(.motion-on) .bracket-zoom__arrow { animation:none; } }

/* Result screen: the tournament champion wears the crown. */
.arena-scores--final .arena-side.is-champion { position:relative; overflow:visible; }
.champion-crown {
  position:absolute; top:-34px; left:50%; z-index:2; display:block; width:76px; pointer-events:none;
  transform:translateX(-50%) rotate(-9deg); filter:drop-shadow(0 6px 8px rgba(125,74,0,.35));
}
.arena-result--champion .arena-scores--final { padding-top:26px; }

/* Motion */
@keyframes bracket-in { from { opacity:0; transform:translateY(14px) scale(.96); } }
@keyframes bracket-pulse { 0%,100% { opacity:.35; transform:scale(.985); } 50% { opacity:1; transform:scale(1.015); } }
@keyframes bracket-win { 0% { transform:scale(1); } 35% { transform:scale(1.06); } 100% { transform:scale(1); } }
@keyframes bracket-lose { from { opacity:1; } }
@keyframes bracket-connector { from { transform:scaleX(0); } }
@keyframes bracket-advance { from { opacity:0; transform:translateX(-34px); } 70% { opacity:1; transform:translateX(4px); } }
@keyframes crown-drop { 0% { opacity:0; transform:translateY(-46px) rotate(-24deg) scale(.6); } 60% { opacity:1; transform:translateY(4px) rotate(6deg) scale(1.08); } 100% { transform:none; } }
@keyframes crown-land { 0% { opacity:0; transform:translate(-50%,-60px) rotate(-30deg) scale(.5); } 65% { opacity:1; transform:translate(-50%,6px) rotate(0) scale(1.1); } 100% { transform:translateX(-50%) rotate(-9deg); } }
@keyframes crown-shine { to { transform:translateX(330%); } }
.bracket-view--intro .bracket-match { animation:bracket-in 460ms var(--ease-out) both; animation-delay:calc(var(--round) * 140ms + var(--order) * 32ms); }
.bracket-view--intro .bracket h3 { animation:bracket-in 360ms var(--ease-out) both; animation-delay:calc(var(--round) * 140ms); }
.bracket-match.is-fresh .bracket-slot.is-winner { animation:bracket-win 700ms var(--ease-out) 120ms both; }
.bracket-match.is-fresh .bracket-slot.is-loser { animation:bracket-lose 600ms ease-out both; }
.bracket-view .bracket-match.is-fresh::after { animation:bracket-connector 420ms var(--ease-out) 420ms both; }
.bracket-slot.is-fresh .bracket-slot__name { display:inline-block; animation:bracket-advance 620ms var(--ease-out) 760ms both; }
.bracket-champion.is-fresh .bracket-champion__crown { animation:crown-drop 900ms var(--ease-bounce) 200ms both; }
.bracket-champion.is-fresh::after { animation:crown-shine 1100ms ease-in-out 700ms both; }
.champion-crown { animation:crown-land 950ms var(--ease-bounce) 350ms both; }

/* Tournament start: the bracket dims, byes step back and the first playable match zooms in under a spotlight. */
.bracket-view .bracket-match { transition:opacity 520ms ease, filter 520ms ease, transform 520ms var(--ease-out); }
.bracket-view--spotlight .bracket-match:not(.is-spotlit) { opacity:.34; filter:saturate(.55); }
.bracket-view--spotlight .bracket-match.is-bye { opacity:.2; transform:scale(.93); }
.bracket-view--spotlight .bracket h3 { opacity:.5; transition:opacity 520ms ease; }
.bracket-view .bracket-match.is-spotlit { z-index:2; animation:bracket-spotlight 1250ms var(--ease-out) 260ms both; }
.bracket-view .bracket-match.is-spotlit .bracket-match__badge { animation:bracket-badge 900ms var(--ease-bounce) 720ms both; }
@keyframes bracket-spotlight {
  0% { opacity:0; transform:scale(.82); box-shadow:0 0 0 0 rgba(29, 79, 159,.55), 0 14px 30px rgba(29, 79, 159,.22); }
  45% { opacity:1; transform:scale(1.09); box-shadow:0 0 0 14px rgba(29, 79, 159,.22), 0 22px 44px rgba(29, 79, 159,.35); }
  70% { transform:scale(.985); }
  100% { opacity:1; transform:scale(1); box-shadow:0 0 0 4px var(--primary-soft), 0 14px 30px rgba(29, 79, 159,.22); }
}
@keyframes bracket-badge { from { opacity:0; transform:translateY(8px) scale(.6); } }

body.reduced-motion .bracket-view *, body.reduced-motion .bracket-view *::before, body.reduced-motion .bracket-view *::after,
body.reduced-motion .bracket-view::after, body.reduced-motion .champion-crown { animation:none !important; }
body.reduced-motion .bracket-view .bracket-match.is-next::before { opacity:.8; }
@media (prefers-reduced-motion: reduce) {
  body:not(.motion-on) .bracket-view *, body:not(.motion-on) .bracket-view *::before, body:not(.motion-on) .bracket-view *::after,
  body:not(.motion-on) .champion-crown { animation:none !important; }
  body:not(.motion-on) .bracket-view .bracket-match.is-next::before { opacity:.8; }
}

@media (max-width: 600px) {
  .bracket-view .bracket { --bracket-gap:22px; grid-auto-columns:minmax(190px,78vw); }
  .bracket-champion { gap:10px; padding:10px 12px 10px 8px; }
  .bracket-champion__crown { width:50px; }
  .bracket-champion strong { font-size:19px; }
  .time-stepper__control { grid-template-columns:56px minmax(90px,1fr) 56px; }
}