/* ==========================================================================
   ESA ARCADE - Tournament screens
   Participant select, intro, hub, game draw, fixtures, standings, bracket,
   the final and the champion.
   ========================================================================== */

/* Small circular character face used across every tournament screen. */
.t-face {
  --cc: var(--gold-500);
  display: inline-block;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--x-e9ddc6);
  border: 2px solid var(--cc);
  box-shadow: 0 3px 8px var(--x-000000-a40);
  vertical-align: middle;
}
.t-face img { width: 100%; height: 100%; object-fit: cover; }
.t-face.sm { width: 30px; height: 30px; border-width: 2px; }
.t-face.xs { width: 22px; height: 22px; border-width: 1.5px; }

/* Shared panel look */
.hub-panel, .st-table-wrap, .br-wrap {
  border-radius: 18px;
  background:
    repeating-linear-gradient(180deg, var(--x-ffffff-a2b) 0 1px, transparent 1px 3px),
    linear-gradient(170deg, var(--x-143a63-a82), var(--x-040d19-a94));
  border: 1px solid var(--x-f3c35a-a30);
  box-shadow: 0 8px 0 var(--x-020810), 0 22px 44px var(--x-000000-a45);
}

.is-shake { animation: shake .4s ease-in-out; }
@keyframes shake {
  0%, 100% { translate: 0 0; }
  20%, 60% { translate: -6px 0; }
  40%, 80% { translate: 6px 0; }
}

/* --------------------------------------------------------------------------
   PARTICIPANT SELECT
   -------------------------------------------------------------------------- */
.ps-inner {
  width: min(1100px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vh, 16px);
}
.ps-roster-wrap {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow-x: hidden;          /* V4.1: rows only, never a horizontal scroll */
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.ps-tile {
  --cc: var(--gold-400);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ps-tile-img {
  display: block;
  width: var(--tile);
  height: var(--tile);
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--cc) 40%, var(--navy-600)), var(--navy-800) 75%);
  border: 3px solid var(--x-ffffff-a10);
  box-shadow: 0 5px 0 var(--x-020810);
  filter: grayscale(.85) brightness(.55);
  transition: filter .18s, border-color .18s, transform .15s var(--ease-out), box-shadow .18s;
}
.ps-tile-name {
  font-family: var(--font-display);
  font-size: clamp(11px, calc(var(--tile) * .11), 16px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.ps-check {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--navy-700);
  border: 2px solid var(--x-ffffff-a25);
  box-shadow: 0 3px 0 var(--x-000000-a50);
  transition: background .15s, border-color .15s, transform .2s var(--ease-back);
}
.ps-check::after {
  content: "";
  width: 9px;
  height: 15px;
  margin-top: -4px;
  border: solid transparent;
  border-width: 0 4px 4px 0;
  transform: rotate(45deg);
}
.ps-tile.is-on .ps-tile-img {
  filter: none;
  border-color: var(--gold-400);
  box-shadow: 0 5px 0 var(--x-020810), 0 0 22px var(--x-f3c35a-a40);
}
.ps-tile.is-on .ps-tile-name { color: var(--cream); }
.ps-tile.is-on .ps-check { background: var(--gold-400); border-color: var(--x-fff1c8); transform: scale(1.1); }
.ps-tile.is-on .ps-check::after { border-color: var(--x-2a1a02); }
/* Focus / selection never resizes or moves a card (outline is drawn outside layout). */
.ps-tile.is-focus .ps-tile-img { outline: 3px solid var(--p1); outline-offset: 3px; }
@media (hover: hover) {
  .ps-tile:hover .ps-tile-img { transform: translateY(-3px); }
}

.ps-note {
  align-self: center;
  max-width: 720px;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
  color: var(--gold-100);
  background: var(--x-c0871f-a14);
  border: 1px dashed var(--x-f3c35a-a50);
}

.ps-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--x-05101f-a82);
  border: 1px solid var(--x-f3c35a-a30);
}
.ps-count { display: flex; align-items: center; gap: 10px; flex: none; }
.ps-count b {
  font-family: var(--font-digits);
  font-size: 34px;
  line-height: 1;
  min-width: 52px;
  text-align: center;
  color: var(--gold-300);
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--x-020810);
  box-shadow: inset 0 0 10px var(--x-f3c35a-a20);
}
.ps-count span {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cream);
}
.ps-format {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
}
.ps-format b {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.ps-actions { display: flex; gap: 10px; flex: none; }

/* --------------------------------------------------------------------------
   TOURNAMENT INTRO
   -------------------------------------------------------------------------- */
.ti-inner {
  width: min(980px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2.2vh, 22px);
  text-align: center;
}
.ti-kicker {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--muted);
}
.ti-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 58px);
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--cream);
}
.ti-title span {
  font-size: 1.3em;
  background: linear-gradient(180deg, var(--x-fffaf0) 10%, var(--gold-300) 50%, var(--gold-600));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 var(--x-3a2a08));
}
.ti-faces { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 900px; }
.ti-face { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ti-face .t-face { width: clamp(46px, 7vh, 64px); height: clamp(46px, 7vh, 64px); border-width: 3px; }
.ti-face small { font-family: var(--font-display); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ti-format { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.ti-step {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--x-071728-a85);
  border: 2px solid var(--x-f3c35a-a45);
  box-shadow: 0 5px 0 var(--x-020810);
}
.ti-step b { font-family: var(--font-display); font-size: 17px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300); }
.ti-step small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ti-arrow { width: 0; height: 0; border-left: 10px solid var(--gold-500); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.ti-rules { font-size: 13px; color: var(--muted); max-width: 640px; }
.ti-rules b { color: var(--gold-300); }

#tourIntroScreen.is-playing .ti-face { animation: dealIn .45s var(--ease-back) backwards; animation-delay: calc(.15s + var(--i) * .07s); }
#tourIntroScreen.is-playing .ti-step,
#tourIntroScreen.is-playing .ti-arrow { animation: riseIn .45s var(--ease-out) backwards; animation-delay: calc(.5s + var(--i) * .14s); }
@keyframes dealIn {
  from { opacity: 0; transform: translateY(-40px) rotate(-20deg) scale(.6); }
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   HUB
   -------------------------------------------------------------------------- */
.hub-inner {
  width: min(1180px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.8vh, 18px);
}
.hub-head { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.hub-phase {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--gold-400);
}
.hub-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.6vw, 42px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1;
}
.hub-progress { display: flex; align-items: center; gap: 0; margin-top: 6px; }
.hp-step {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: .14em;
  padding: 3px 9px;
  border-radius: 6px;
  color: var(--muted-dim);
  border: 1px solid var(--x-ffffff-a12);
}
.hp-step.is-done { color: var(--gold-500); border-color: var(--x-f3c35a-a35); }
.hp-step.is-now { color: var(--x-1a0f00); background: var(--gold-400); border-color: var(--x-fff1c8); box-shadow: 0 0 14px var(--x-f3c35a-a60); }
.hp-link { width: 14px; height: 2px; background: var(--x-f3c35a-a30); }

.hub-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(12px, 2vw, 22px);
}
.hub-panel { min-height: 0; overflow: auto; padding: 16px 18px; }
.screen.is-active .hub-panel { animation: riseIn .45s var(--ease-out) backwards; }
.screen.is-active .hub-side { animation-delay: .08s; }

.hr-game {
  --accent: var(--gold-400);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, var(--navy-800)), var(--navy-800));
  border: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
}
.hr-game.is-pending { border-style: dashed; border-color: var(--x-f3c35a-a35); background: var(--x-071728-a60); }
.hr-game-art {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--gold-400);
}
.hr-game-art svg, .hr-game-art img { width: 100%; height: 100%; object-fit: contain; }
.hr-game-text { display: flex; flex-direction: column; }
.hr-game-text small { font-family: var(--font-display); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.hr-game-text b { font-family: var(--font-display); font-size: 22px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); }

.hr-list { display: flex; flex-direction: column; gap: 7px; }
.hr-match {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: var(--x-030b16-a55);
  border: 1px solid var(--x-ffffff-a6);
}
.hr-match.is-next {
  border-color: var(--gold-400);
  background: var(--x-c0871f-a14);
  box-shadow: 0 0 18px var(--x-f3c35a-a20);
}
.hr-match.is-bye { opacity: .75; border-style: dashed; }
.hr-p { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-display); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); }
.hr-p span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-p.b { justify-content: flex-end; text-align: right; }
.hr-p.is-winner { color: var(--gold-300); }
.hr-p.is-loser { opacity: .5; }
.hr-score {
  min-width: 64px;
  text-align: center;
  font-family: var(--font-digits);
  font-size: 15px;
  letter-spacing: .1em;
  color: var(--gold-300);
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--x-020810);
}
.hr-score i { font-style: normal; color: var(--gold-700); margin: 0 4px; }
.hr-match.is-next .hr-score { color: var(--x-1a0f00); background: var(--gold-400); animation: arcadeBlink 1.05s steps(1) infinite; }
.hr-tag {
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--navy-500);
  color: var(--gold-100);
}

.hs-title {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 8px;
}

.mini-table { width: 100%; border-collapse: collapse; font-family: var(--font-display); }
.mini-table th {
  font-size: 10px;
  letter-spacing: .16em;
  font-weight: 700;
  color: var(--muted-dim);
  padding: 4px 4px 6px;
  text-align: center;
}
.mini-table td {
  font-size: 14px;
  letter-spacing: .06em;
  padding: 5px 4px;
  text-align: center;
  color: var(--x-c4d4e5);
  border-top: 1px solid var(--x-ffffff-a6);
  font-variant-numeric: tabular-nums;
}
.mini-table .l { text-align: left; }
.mini-table td.l { display: flex; align-items: center; gap: 8px; text-transform: uppercase; color: var(--cream); }
.mini-table td.pts { color: var(--gold-300); font-weight: 700; }
.mini-table tr.is-q td:first-child { color: var(--gold-400); }
.mini-table tr.q-edge td { border-bottom: 2px dashed var(--x-f3c35a-a55); }
.mini-legend { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.mini-legend i { width: 18px; border-top: 2px dashed var(--x-f3c35a-a70); }

.mini-ko { display: flex; flex-direction: column; gap: 10px; }
.mini-ko-name { font-family: var(--font-display); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 4px; }
.mini-ko-name span { color: var(--muted); letter-spacing: .1em; margin-left: 6px; }
.mini-ko-match { padding: 4px 8px; margin-bottom: 4px; border-radius: 8px; background: var(--x-030b16-a55); }
.mini-ko-line { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-family: var(--font-display); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }
.mini-ko-line span { flex: 1; }
.mini-ko-line b { font-family: var(--font-digits); color: var(--gold-300); }
.mini-ko-line.is-loser { opacity: .45; }
.mini-ko-line.is-winner { color: var(--gold-300); }

.hub-actions { display: flex; justify-content: center; align-items: center; gap: 14px; }

/* --------------------------------------------------------------------------
   GAME DRAW
   -------------------------------------------------------------------------- */
.draw-inner {
  --accent: var(--gold-400);
  width: min(1100px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 18px);
  text-align: center;
}
.draw-kicker { font-family: var(--font-display); font-size: 12px; letter-spacing: .36em; text-transform: uppercase; color: var(--gold-400); }
.draw-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 56px);
  letter-spacing: .16em;
  margin-right: -.16em;
  text-transform: uppercase;
  color: var(--cream);
  line-height: 1;
}
.draw-machine {
  width: 100%;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--gold-600), var(--gold-700));
  box-shadow: 0 10px 0 var(--x-3a2a08), 0 30px 60px var(--x-000000-a55), inset 0 2px 0 var(--x-fff6e4-a50);
}
.draw-window {
  position: relative;
  height: clamp(190px, 32vh, 260px);
  overflow: hidden;
  border-radius: 14px;
  background:
    repeating-linear-gradient(180deg, var(--x-ffffff-a3) 0 1px, transparent 1px 3px),
    var(--x-020810);
  box-shadow: inset 0 0 40px var(--x-000000-a90);
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--x-000000) 18%, var(--x-000000) 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--x-000000) 18%, var(--x-000000) 82%, transparent);
}
.draw-reel {
  position: absolute;
  left: 0;
  top: 50%;
  display: flex;
  gap: 18px;
  margin-top: calc(clamp(150px, 26vh, 210px) / -2);
  will-change: transform;
}
.reel-card {
  --accent: var(--gold-400);
  width: 210px;
  height: clamp(150px, 26vh, 210px);
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, var(--navy-600)), var(--x-050f1d));
  border: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.rc-art { width: 46%; height: 46%; display: grid; place-items: center; }
.rc-art svg, .rc-art img { width: 100%; height: 100%; object-fit: contain; }
.rc-title { font-family: var(--font-display); font-size: 20px; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); }
.reel-card.is-picked {
  border-color: var(--x-fff1c8);
  box-shadow: 0 0 0 3px var(--accent), 0 0 50px color-mix(in srgb, var(--accent) 70%, transparent);
  animation: pickedSlam .5s var(--ease-back);
}
.reel-card.is-picked .art-move { animation: artIdle 1.4s var(--ease-in-out) infinite; }
@keyframes pickedSlam {
  0% { transform: scale(1); filter: brightness(2.4); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1.06); filter: none; }
}
.draw-selector { position: absolute; inset: 0; pointer-events: none; }
.draw-selector::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 236px;
  margin-left: -118px;
  border-radius: 16px;
  border: 3px solid var(--gold-400);
  box-shadow: 0 0 24px var(--x-f3c35a-a55), inset 0 0 24px var(--x-f3c35a-a20);
}
.draw-selector i {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  margin-left: -12px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}
.draw-selector i:first-child { top: -2px; border-top: 16px solid var(--gold-300); }
.draw-selector i:last-child { bottom: -2px; border-bottom: 16px solid var(--gold-300); }

.draw-excluded {
  font-size: 13px;
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px dashed var(--x-e8584f-a55);
  background: var(--x-e8584f-a8);
}
.draw-excluded b { color: var(--x-ffb3ae); text-transform: uppercase; letter-spacing: .08em; text-decoration: line-through; }

.draw-result { min-height: 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0; transform: scale(.8); }
.dr-kicker { font-family: var(--font-display); font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-400); }
.dr-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 60px);
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
  background: linear-gradient(180deg, var(--x-fffaf0) 10%, var(--gold-300) 55%, var(--gold-600));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 var(--x-3a2a08));
}
.dr-sub { font-size: 13px; color: var(--muted); }
#drawScreen.is-landed .draw-result { animation: resultPop .45s var(--ease-back) forwards; }
@keyframes resultPop { to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   FIXTURES
   -------------------------------------------------------------------------- */
.fx-inner {
  width: min(860px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 16px);
  text-align: center;
}
.fx-kicker { font-family: var(--font-display); font-size: 12px; letter-spacing: .36em; text-transform: uppercase; color: var(--gold-400); }
.fx-title { font-family: var(--font-display); font-size: clamp(28px, 4vw, 48px); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); line-height: 1; }
.fx-game { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.fx-game b { color: var(--gold-300); font-family: var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.fg-art { width: 30px; height: 30px; display: grid; place-items: center; }
.fg-art svg, .fg-art img { width: 100%; height: 100%; object-fit: contain; }

.fx-shuffle { display: flex; justify-content: center; gap: 10px; min-height: 76px; }
.fx-card {
  display: grid;
  place-items: center;
  width: 62px;
  height: 76px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--navy-500), var(--navy-800));
  border: 2px solid var(--gold-500);
  animation: cardFlip .26s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.07s);
}
.fx-card .t-face { width: 44px; height: 44px; }
@keyframes cardFlip { from { transform: rotateY(0) translateY(0); } to { transform: rotateY(160deg) translateY(-6px); } }
#fixtureScreen.is-revealed .fx-shuffle { display: none; }

.fx-list { width: 100%; display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 0; }
.fx-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--x-143a63-a85), var(--x-040d19-a90), var(--x-143a63-a85));
  border: 1px solid var(--x-f3c35a-a30);
  opacity: 0;
  transform: scale(.9);
}
.fx-row.is-bye { border-style: dashed; }
#fixtureScreen.is-revealed .fx-row { animation: fxIn .4s var(--ease-back) forwards; animation-delay: calc(var(--i) * .16s); }
@keyframes fxIn {
  0% { opacity: 0; transform: scale(1.3); filter: brightness(2); }
  100% { opacity: 1; transform: none; filter: none; }
}
.fx-p { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: clamp(16px, 2vw, 22px); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); min-width: 0; }
.fx-p span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-p.b { justify-content: flex-end; }
.fx-p.b span { color: var(--cream); }
.fx-row.is-bye .fx-p.b span { color: var(--muted); font-size: 13px; letter-spacing: .14em; }
.fx-vs { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--gold-400); }
.seed {
  font-family: var(--font-digits);
  font-size: 11px;
  color: var(--gold-300);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--x-f3c35a-a50);
}
#fxContinueBtn { opacity: .55; }
#fixtureScreen.is-revealed #fxContinueBtn { opacity: 1; }

/* --------------------------------------------------------------------------
   STANDINGS
   -------------------------------------------------------------------------- */
.st-inner {
  width: min(960px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 14px);
  text-align: center;
}
.st-kicker { font-family: var(--font-display); font-size: 12px; letter-spacing: .36em; text-transform: uppercase; color: var(--gold-400); }
.st-title { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 44px); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); line-height: 1; }
.st-table-wrap { width: 100%; min-height: 0; overflow: auto; padding: 8px 14px 12px; }
.st-table { --row-h: 46px; position: relative; width: 100%; }
.st-row {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--row-h);
  display: grid;
  grid-template-columns: 44px minmax(150px, 1fr) repeat(6, 52px) 64px 104px;
  align-items: center;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--x-c4d4e5);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--x-ffffff-a6);
  transform: translateY(calc(var(--y) * var(--row-h)));
  transition: transform .75s cubic-bezier(.5, 0, .2, 1), background .3s, opacity .3s;
}
.st-headrow { --y: 0; font-size: 11px; letter-spacing: .18em; color: var(--muted-dim); text-transform: uppercase; }
.st-row .c-pos { color: var(--muted); }
.st-row .c-name { display: flex; align-items: center; gap: 10px; text-align: left; text-transform: uppercase; color: var(--cream); min-width: 0; }
.st-row .c-name b { font-weight: 700; letter-spacing: .1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-row .c-pts { font-size: 20px; color: var(--gold-300); }
.st-row .c-tag { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: 0; transition: opacity .3s .1s; }
.st-row.is-q .c-pos { color: var(--gold-400); }
.mv { font-style: normal; font-size: 10px; letter-spacing: 0; opacity: 0; transition: opacity .3s; }
.mv.up { color: var(--x-5fd49a); }
.mv.down { color: var(--x-ff8a80); }
.mv.same { color: var(--muted-dim); }
.st-table.is-settled .mv { opacity: 1; }

.st-qline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
  border-top: 2px dashed var(--x-f3c35a-a75);
  transform: translateY(calc(var(--y) * var(--row-h)));
}
.st-qline span {
  position: absolute;
  right: 0;
  top: -9px;
  padding: 0 8px;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-400);
  background: var(--navy-800);
}
.st-table.is-final.is-settled .st-row.is-out { opacity: .45; }
.st-table.is-final.is-settled .st-row .c-tag { opacity: 1; }
.st-table.is-final.is-settled .st-row.is-q { background: linear-gradient(90deg, var(--x-f3c35a-a14), transparent 70%); }
.st-table.is-final .st-row.is-q .c-tag { color: var(--gold-300); }
.st-table.is-final .st-row.is-out .c-tag { color: var(--x-ff8a80); }
.st-row.by-lot { animation: lotFlicker .12s steps(2) 8; }
@keyframes lotFlicker { 50% { background: var(--x-f3c35a-a25); } }

.st-banner {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--gold-100);
  background: var(--x-c0871f-a16);
  border: 1px solid var(--x-f3c35a-a50);
  opacity: 0;
}
#standingsScreen.is-settled .st-banner { animation: riseIn .4s var(--ease-out) forwards; }
#stContinueBtn { opacity: .4; pointer-events: none; transition: opacity .3s; }
#standingsScreen.is-settled #stContinueBtn { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------------------
   KNOCKOUT BRACKET
   -------------------------------------------------------------------------- */
.br-inner {
  width: min(1240px, 100%);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vh, 14px);
  text-align: center;
}
.br-kicker { font-family: var(--font-display); font-size: 12px; letter-spacing: .36em; text-transform: uppercase; color: var(--gold-400); }
.br-title { font-family: var(--font-display); font-size: clamp(26px, 3.6vw, 44px); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); line-height: 1; }
.br-wrap { width: 100%; flex: 1; min-height: 0; overflow: auto; padding: 14px 18px; }
.bracket {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(170px, 1fr));
  gap: 34px;
  min-height: 100%;
}
.br-col { display: flex; flex-direction: column; min-height: 0; }
.br-col-name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: 8px;
}
.br-col-name small { font-size: 10px; letter-spacing: .14em; color: var(--muted); }
.br-col-body { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 14px; }
.br-pair { position: relative; display: flex; flex-direction: column; justify-content: space-around; gap: 16px; flex: 1; }
.br-pair.is-single { justify-content: center; }

.br-match {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: var(--x-030b16-a80);
  border: 1px solid var(--x-f3c35a-a35);
  box-shadow: 0 4px 0 var(--x-020810);
}
.br-match.is-tbd { opacity: .45; border-style: dashed; }
.br-entrant {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream);
  text-align: left;
}
.br-entrant + .br-entrant { border-top: 1px solid var(--x-ffffff-a7); }
.br-seed { width: 16px; font-family: var(--font-digits); font-size: 10px; color: var(--gold-500); flex: none; }
.br-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-score { font-family: var(--font-digits); color: var(--gold-300); min-width: 18px; text-align: right; }
.br-entrant.is-winner { background: linear-gradient(90deg, var(--x-f3c35a-a22), transparent); color: var(--gold-300); }
.br-entrant.is-loser { opacity: .42; }
.br-entrant.is-tbd .br-name { color: var(--muted-dim); }

/* Connector: joins two matches and runs to the next column. */
.br-join {
  position: absolute;
  right: -18px;
  top: 25%;
  bottom: 25%;
  width: 18px;
  border: 2px solid var(--x-f3c35a-a60);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  transform-origin: 0 50%;
}
.br-join::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 16px;
  border-top: 2px solid var(--x-f3c35a-a60);
}
.br-pair.is-single .br-match::after {
  content: "";
  position: absolute;
  right: -34px;
  top: 50%;
  width: 34px;
  border-top: 2px solid var(--x-f3c35a-a60);
}
.br-pair.is-single .br-match { overflow: visible; }

.br-champ {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: auto 0;
  padding: 14px;
  border-radius: 14px;
  border: 2px dashed var(--x-f3c35a-a40);
  font-family: var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.br-champ svg { width: 54px; height: 54px; opacity: .5; }
.br-champ b { font-size: 18px; }
.br-champ.is-crowned { border-style: solid; border-color: var(--gold-400); color: var(--gold-300); box-shadow: 0 0 34px var(--x-f3c35a-a40); }
.br-champ.is-crowned svg { opacity: 1; animation: artIdle 2s var(--ease-in-out) infinite; }

#bracketScreen.is-playing .br-col { animation: riseIn .45s var(--ease-out) backwards; animation-delay: calc(var(--c) * .14s); }
#bracketScreen.is-playing .br-join { animation: drawLine .5s var(--ease-out) backwards; animation-delay: calc(.35s + var(--c, 0) * .14s); }
#bracketScreen.is-playing .br-col .br-join { animation-delay: .55s; }
#bracketScreen.is-playing .br-match.just-filled { animation: advanceIn .6s var(--ease-back) .5s backwards; }
#bracketScreen.is-playing .br-champ.is-crowned { animation: advanceIn .7s var(--ease-back) .6s backwards; }
@keyframes drawLine { from { transform: scaleX(0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes advanceIn {
  0% { opacity: 0; transform: translateX(-40px) scale(.9); filter: brightness(2); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* --------------------------------------------------------------------------
   THE FINAL
   -------------------------------------------------------------------------- */
.final-screen { overflow: hidden; }
.fn-rays, .ch-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180vmax;
  height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
  background: repeating-conic-gradient(from 0deg, var(--x-f3c35a-a7) 0deg 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, var(--x-000000) 0%, transparent 55%);
          mask-image: radial-gradient(circle, var(--x-000000) 0%, transparent 55%);
  animation: raysSpin 60s linear infinite;
  pointer-events: none;
}
@keyframes raysSpin { to { transform: rotate(360deg); } }
.fn-side {
  --cc: var(--gold-400);
  position: absolute;
  bottom: 0;
  width: 38%;
  height: 86%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 5vh;
}
.fn-side.a { left: 2%; }
.fn-side.b { right: 2%; }
.fn-art { max-height: 64vh; max-width: 90%; object-fit: contain; filter: drop-shadow(0 0 30px color-mix(in srgb, var(--cc) 60%, transparent)) drop-shadow(0 20px 30px var(--x-000000-a60)); }
.fn-side.b .fn-art { transform: scaleX(-1); }
.fn-name { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 58px); letter-spacing: .12em; text-transform: uppercase; color: var(--cream); text-shadow: 0 4px 0 var(--x-030b16-a80); }
.fn-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.fn-kicker { font-family: var(--font-display); font-size: 12px; letter-spacing: .4em; text-transform: uppercase; color: var(--gold-400); }
.fn-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 120px);
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: .9;
  background: linear-gradient(180deg, var(--x-fffaf0) 8%, var(--gold-300) 45%, var(--gold-600));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 0 var(--x-3a2a08)) drop-shadow(0 0 40px var(--x-f3c35a-a45));
}
.fn-vs { font-family: var(--font-display); font-style: italic; font-size: 34px; color: var(--gold-300); }
.final-screen.is-playing .fn-title { animation: vsSlam .5s var(--ease-back) .2s backwards; }
.final-screen.is-playing .fn-side.a { animation: vsArt .7s var(--ease-out) .35s backwards; }
.final-screen.is-playing .fn-side.b { animation: vsArtR .7s var(--ease-out) .35s backwards; }
.final-screen.is-playing .fn-center .btn { animation: riseIn .4s var(--ease-out) .8s backwards; }

/* --------------------------------------------------------------------------
   CHAMPION
   -------------------------------------------------------------------------- */
.champion-screen { overflow: hidden; }
.ch-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ch-confetti i {
  position: absolute;
  top: -20px;
  left: var(--x);
  width: 8px;
  height: 14px;
  background: var(--c);
  border-radius: 2px;
  opacity: 0;
  animation: confettiFall var(--t) linear var(--d) 2;
}
@keyframes confettiFall {
  0% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
  100% { opacity: .9; transform: translate3d(40px, 110vh, 0) rotate(var(--r)); }
}
.ch-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1vh, 10px); text-align: center; }
.ch-kicker { font-family: var(--font-display); font-size: 13px; letter-spacing: .5em; text-transform: uppercase; color: var(--gold-400); }
.ch-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7.4vw, 100px);
  letter-spacing: .12em;
  margin-right: -.12em;
  text-transform: uppercase;
  line-height: .9;
  background: linear-gradient(180deg, var(--x-fffaf0) 8%, var(--gold-300) 45%, var(--gold-600));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 0 var(--x-3a2a08)) drop-shadow(0 0 40px var(--x-f3c35a-a50));
}
.ch-stage {
  position: relative;
  width: clamp(220px, 40vh, 380px);
  height: clamp(220px, 40vh, 380px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ch-emblem { position: absolute; inset: 6% 6% auto; width: 88%; opacity: .32; filter: drop-shadow(0 0 40px var(--x-f3c35a-a60)); animation: emblemFloat 6s ease-in-out infinite; }
.ch-art { position: relative; z-index: 2; max-height: 100%; max-width: 80%; object-fit: contain; filter: drop-shadow(0 0 26px color-mix(in srgb, var(--cc, var(--gold-400)) 60%, transparent)) drop-shadow(0 18px 24px var(--x-000000-a60)); }
.ch-trophy { position: absolute; z-index: 3; right: -4%; bottom: 0; width: 34%; filter: drop-shadow(0 10px 16px var(--x-000000-a60)); }
.ch-name {
  font-family: var(--font-display);
  font-size: clamp(32px, 4.6vw, 60px);
  letter-spacing: .16em;
  margin-right: -.16em;
  text-transform: uppercase;
  color: var(--cream);
  text-shadow: 0 4px 0 var(--x-030b16-a80);
  line-height: 1;
}
.ch-record { font-size: 14px; color: var(--muted); }
.ch-record b { color: var(--gold-300); }
.ch-actions { display: flex; gap: 12px; margin-top: 6px; }
.champion-screen.is-playing .ch-title { animation: vsSlam .55s var(--ease-back) .15s backwards; }
.champion-screen.is-playing .ch-art { animation: championRise .9s var(--ease-back) .35s backwards; }
.champion-screen.is-playing .ch-trophy { animation: dealIn .6s var(--ease-back) .9s backwards; }
.champion-screen.is-playing .ch-name,
.champion-screen.is-playing .ch-record,
.champion-screen.is-playing .ch-actions { animation: riseIn .45s var(--ease-out) 1.1s backwards; }
@keyframes championRise { from { opacity: 0; transform: translateY(60px) scale(.7); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .hub-grid { grid-template-columns: 1fr; overflow: auto; }
  .st-row { grid-template-columns: 34px minmax(120px, 1fr) repeat(6, 38px) 48px 0; font-size: 14px; }
  .st-row .c-tag { display: none; }
  .ps-bar { flex-wrap: wrap; }
}
@media (max-height: 760px) {
  .hub-panel { padding: 12px 14px; }
  .hr-match { padding: 5px 8px; }
  .hr-game { padding: 7px 10px; margin-bottom: 8px; }
  .fx-row { padding: 6px 14px; }
  .fx-shuffle { min-height: 60px; }
  .fx-card { width: 50px; height: 60px; }
  .fx-card .t-face { width: 36px; height: 36px; }
  .ti-step { padding: 7px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-confetti { display: none; }
  .fn-rays, .ch-rays { animation: none; }
}

/* --- QA polish ----------------------------------------------------------- */
.hub-grid { align-items: start; }
.hub-panel { max-height: 100%; }
.st-headrow .c-pts { font-size: 11px; color: var(--muted-dim); }
.fn-side { width: 31%; }
.fn-art { max-height: 56vh; }
.br-champ-col .br-col-body { align-items: center; }
.br-champ { min-width: 170px; }