._board_1lvj2_1 {
  --bracket-min-width: 68rem;
  --bracket-label-width: 2.05rem;
  --match-height: 5.25rem;
  --section-accent: var(--yellow, #ffd91a);

  position: relative;
  display: grid;
  gap: 0;
  overflow-x: auto;
  padding: 0.125rem 0.125rem 0.75rem;
  color: rgba(255, 255, 255, 0.92);
}

._boardContent_1lvj2_15 {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(2.6rem, 5vw, 3.6rem);
  width: max(100%, var(--bracket-min-width));
}

._section_1lvj2_23 {
  position: relative;
  z-index: 2;
  width: 100%;
}

._sectionWinners_1lvj2_29 {
  --section-accent: var(--yellow);
}

._sectionLosers_1lvj2_33 {
  --section-accent: var(--brand-blue);
}

._sectionHeader_1lvj2_37 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: max-content;
  padding: 0 1.5rem;
  position: relative;
}

._sectionHeader_1lvj2_37::after {
  position: absolute;
  bottom: -0.6rem;
  left: 1.5rem;
  display: block;
  width: 3.6rem;
  height: 0.14rem;
  background: var(--section-accent);
  content: "";
}

._sectionTitle_1lvj2_57 {
  margin: 0;
  font-family: var(--font-tech), var(--font-body), sans-serif;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
}

._sectionTitleUpper_1lvj2_67 {
  color: var(--yellow);
}

._sectionTitleLower_1lvj2_71 {
  color: var(--brand-blue);
}

._sectionViewport_1lvj2_75 {
  padding: 1.2rem 1.5rem 0;
}

._bracketGrid_1lvj2_79 {
  position: relative;
  display: grid;
  column-gap: clamp(2rem, 3.2vw, 3.25rem);
}

._winnersGrid_1lvj2_85 {
  grid-template-columns: repeat(3, minmax(13.5rem, 1fr));
}

._losersGrid_1lvj2_89 {
  grid-template-columns: repeat(4, minmax(12.6rem, 1fr));
}

._roundColumn_1lvj2_93 {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: 1.25rem 1fr;
  gap: 1rem;
  min-width: 0;
}

._roundLabel_1lvj2_102 {
  margin-left: var(--bracket-label-width);
  color: var(--white-dim, rgba(255, 255, 255, 0.68));
  font-family: var(--font-tech), var(--font-body), sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

._matchStack_1lvj2_115 {
  position: relative;
  min-height: 13rem;
}

._winnersGrid_1lvj2_85 ._matchStack_1lvj2_115 {
  min-height: 12.35rem;
}

._matchSlot_1lvj2_124 {
  position: absolute;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: var(--bracket-label-width) minmax(0, 1fr);
  align-items: center;
  min-width: 0;
}

._matchSlotTop_1lvj2_134 {
  top: 0;
}

._matchSlotMiddle_1lvj2_138 {
  top: 50%;
  transform: translateY(-50%);
}

._matchSlotBottom_1lvj2_143 {
  bottom: 0;
}

._matchOrdinal_1lvj2_147 {
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-tech), var(--font-body), sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
}

._matchCell_1lvj2_158 {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1fr;
  height: var(--match-height);
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    var(--navy-deep, #050d1a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    border-color var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
    box-shadow var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
    transform var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
    background var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1));
}

._cellActive_1lvj2_178 {
  border-color: rgba(255, 255, 255, 0.16);
}

/*
 * Grand Final — championship treatment. Yellow frame around the entire cell
 * (not just the bottom) so it can't be misread as highlighting one of the
 * two participant rows. Outline is used so it doesn't conflict with the
 * cellPicked breathing-glow box-shadow when the user picks the champion.
 */
._matchCell_1lvj2_158[data-match-id="GF"] {
  /* single yellow ring (outline) — no border-color override so we don't get a double-line */
  outline: 1.5px solid rgba(255, 220, 0, 0.65);
  outline-offset: 3px;
  border-radius: 0.5rem;
  /* Ambient yellow halo — bumped opacity so it's clearly visible in locked/active states.
     cellPicked breathing keyframes take over box-shadow during picked. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 26px -2px rgba(255, 220, 0, 0.42),
    0 0 52px -8px rgba(255, 220, 0, 0.24);
}

/* Yellow "GRAND FINAL" round label — winners section, last round column */
._winnersGrid_1lvj2_85 > ._roundColumn_1lvj2_93:last-child > ._roundLabel_1lvj2_102 {
  color: var(--yellow);
}

/*
 * Picked-cell glow — two-layer yellow box-shadow stack (1px rim + soft outer bloom).
 * Enters with a 100ms delay after the click commits ("premium tell"), then breathes
 * 70% → 100% intensity on a slow 2800ms loop (alternate). No hue shift, no scale.
 */
._cellPicked_1lvj2_211 {
  border-color: color-mix(in srgb, var(--yellow, #ffd91a) 52%, transparent);
  animation:
    _glowEnter_1lvj2_1 360ms var(--glow-delay, 100ms) cubic-bezier(0.16, 1, 0.3, 1) both,
    _glowBreath_1lvj2_1 1400ms calc(var(--glow-delay, 100ms) + 360ms) ease-in-out infinite alternate;
}

@keyframes _glowEnter_1lvj2_1 {
  from {
    box-shadow:
      inset 0 0 0 1px rgba(255, 220, 0, 0),
      0 0 12px -2px rgba(255, 220, 0, 0),
      0 0 32px -8px rgba(255, 220, 0, 0);
  }
  to {
    box-shadow:
      inset 0 0 0 1px rgba(255, 220, 0, 0.32),
      0 0 12px -2px rgba(255, 220, 0, 0.10),
      0 0 32px -8px rgba(255, 220, 0, 0.07);
  }
}

@keyframes _glowBreath_1lvj2_1 {
  from {
    box-shadow:
      inset 0 0 0 1px rgba(255, 220, 0, 0.32),
      0 0 12px -2px rgba(255, 220, 0, 0.10),
      0 0 32px -8px rgba(255, 220, 0, 0.07);
  }
  to {
    box-shadow:
      inset 0 0 0 1px rgba(255, 220, 0, 0.46),
      0 0 14px -2px rgba(255, 220, 0, 0.16),
      0 0 36px -8px rgba(255, 220, 0, 0.11);
  }
}

._cellLocked_1lvj2_248 {
  border-color: rgba(255, 255, 255, 0.075);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    rgba(4, 10, 21, 0.78);
}

._participantRow_1lvj2_255 {
  position: relative;
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) 1.15rem;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 0 0.78rem;
  border: 0;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  font: inherit;
  text-align: left;
  transform: scale(1);
  transition:
    background var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
    color var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
    opacity var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
    transform 60ms ease-out;
}

._participantRowTop_1lvj2_276 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}

._participantRow_1lvj2_255:not(:disabled) {
  cursor: pointer;
}

/* Anticipation dip on press — restraint key, only 0.985, 60ms */
._participantRow_1lvj2_255:not(:disabled):active {
  transform: scale(0.985);
}

._participantRow_1lvj2_255:focus-visible {
  z-index: 2;
  outline: 2px solid var(--brand-blue, #3a52d9);
  outline-offset: -2px;
}

._rowWinner_1lvj2_295 {
  color: var(--yellow, #ffd91a);
  background: linear-gradient(90deg, rgba(255, 217, 26, 0.15), rgba(255, 217, 26, 0.035));
  animation: _rowPickRebound_1lvj2_1 var(--motion-pick, 280ms) var(--ease-rebound, cubic-bezier(0.34, 1.56, 0.64, 1));
}

/* Rebound on commit — 0.985 → 1.005 → 1.0 — apple-style overshoot, NOT bouncy */
@keyframes _rowPickRebound_1lvj2_1 {
  0%   { transform: scale(0.985); }
  45%  { transform: scale(1.005); }
  100% { transform: scale(1); }
}

._rowWinner_1lvj2_295::before {
  position: absolute;
  top: 0.45rem;
  bottom: 0.45rem;
  left: 0;
  width: 0.16rem;
  border-radius: 0 0.16rem 0.16rem 0;
  background: var(--yellow, #ffd91a);
  content: "";
}

._rowLoser_1lvj2_319 {
  color: rgba(255, 255, 255, 0.48);
}

._rowPlaceholder_1lvj2_323 {
  color: rgba(255, 255, 255, 0.48);
}

._rowDisabled_1lvj2_327 {
  cursor: default;
}

._participantPrefix_1lvj2_331 {
  color: currentColor;
  font-family: var(--font-tech), var(--font-body), sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  opacity: 0.62;
  text-transform: uppercase;
}

._participantName_1lvj2_341 {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-body), sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

._indicator_1lvj2_354 {
  display: inline-grid;
  width: 0.88rem;
  height: 0.88rem;
  place-items: center;
  justify-self: end;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.75);
  transition:
    border-color var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
    background var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
    color var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
    opacity var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1));
}

._indicatorPicked_1lvj2_370 {
  border-color: var(--yellow, #ffd91a);
  background: var(--yellow, #ffd91a);
  color: var(--navy-deep, #050d1a);
}

._indicatorPicked_1lvj2_370 ._checkIcon_1lvj2_376 {
  animation: _checkDraw_1lvj2_1 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes _checkDraw_1lvj2_1 {
  from {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
  }
  to {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

._indicatorEmpty_1lvj2_393 {
  border-color: rgba(255, 255, 255, 0.72);
}

._indicatorLocked_1lvj2_397 {
  border-color: rgba(255, 255, 255, 0.32);
  opacity: 0.62;
}

._checkIcon_1lvj2_376 {
  width: 0.58rem;
  height: 0.58rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

._lockBadge_1lvj2_412 {
  position: absolute;
  top: 0.38rem;
  right: 0.48rem;
  z-index: 3;
  display: inline-grid;
  width: 1.05rem;
  height: 1.05rem;
  place-items: center;
  color: rgba(255, 255, 255, 0.56);
  pointer-events: none;
  transition:
    opacity var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
    transform var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1));
}

._lockBadge_1lvj2_412[data-state="shown"] {
  opacity: 1;
  transform: scale(1);
}

._lockBadge_1lvj2_412[data-state="hidden"] {
  opacity: 0;
  transform: scale(0.7);
}

._lockIcon_1lvj2_438 {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.35;
}

._waitingHint_1lvj2_448 {
  position: absolute;
  right: 0.62rem;
  bottom: 0.24rem;
  z-index: 3;
  max-width: 44%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-tech), var(--font-body), sans-serif;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  pointer-events: none;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  transition:
    opacity var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
    transform var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1));
}

._waitingHint_1lvj2_448[data-state="shown"] {
  opacity: 1;
  transform: translateY(0);
}

._waitingHint_1lvj2_448[data-state="hidden"] {
  opacity: 0;
  transform: translateY(0.25rem);
}

._cellLocked_1lvj2_248 ._participantRow_1lvj2_255 {
  padding-right: 4.9rem;
}

._bracketLines_1lvj2_484 {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

._connectorPath_1lvj2_494 {
  fill: none;
  stroke: rgba(255, 255, 255, 0.24);
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-width: 1.5;
}

._bridgePath_1lvj2_502 {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-dasharray: 4 4;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-width: 1.5;
}

@media (hover: hover) {
  ._cellActive_1lvj2_178:hover {
    border-color: color-mix(in srgb, var(--brand-blue, #3a52d9) 78%, transparent);
    box-shadow:
      0 0 0 1px rgba(58, 82, 217, 0.18),
      0 0 1.25rem rgba(58, 82, 217, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: translateY(-0.04rem);
    transition:
      border-color var(--motion-fast, 140ms) ease-out,
      box-shadow var(--motion-fast, 140ms) ease-out,
      transform var(--motion-fast, 140ms) ease-out,
      background var(--motion-fast, 140ms) ease-out;
  }

  /* Picked cells also lift on hover — but no box-shadow override (would fight the breathing glow) */
  ._cellPicked_1lvj2_211:hover {
    transform: translateY(-0.04rem);
    transition: transform var(--motion-fast, 140ms) ease-out;
  }

  ._participantRow_1lvj2_255:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.055);
  }

  ._rowWinner_1lvj2_295:not(:disabled):hover {
    background: linear-gradient(90deg, rgba(255, 217, 26, 0.2), rgba(255, 217, 26, 0.06));
  }
}

@media (max-width: 48rem) {
  ._board_1lvj2_1 {
    --bracket-min-width: 62rem;
  }

  ._sectionHeader_1lvj2_37 {
    padding-right: 1.1rem;
    padding-left: 1.1rem;
  }

  ._sectionViewport_1lvj2_75 {
    padding-right: 1.1rem;
    padding-left: 1.1rem;
  }
}

/* ============================================================
   MOBILE LAYOUT — round-focus + mini-rail (≤640px)
   Shown only when BracketBoard.tsx detects mobile via useMediaQuery.
   ============================================================ */

._boardMobile_1lvj2_562 {
  --bracket-min-width: auto;
  overflow: visible;
  padding: 0;
}

._boardMobile_1lvj2_562 ._boardContent_1lvj2_15 {
  width: 100%;
  gap: 28px;
}

._sectionMobile_1lvj2_573 {
  width: 100%;
}

._sectionMobile_1lvj2_573 ._sectionHeader_1lvj2_37 {
  padding: 0 0 0.7rem 0;
}

/* Round tabs — horizontal scroll w/ snap, generous tap targets */
._mobileTabs_1lvj2_582 {
  display: flex;
  gap: 6px;
  margin: 12px 0 14px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

._mobileTabs_1lvj2_582::-webkit-scrollbar { display: none; }

._mobileTab_1lvj2_582 {
  position: relative;
  flex: 1 1 0;
  min-width: 88px;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  color: var(--white-mid);
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 9px;
  scroll-snap-align: start;
  isolation: isolate;
  transition: color var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1));
}

._mobileTab_1lvj2_582:hover { color: var(--white-strong); }
._mobileTab_1lvj2_582:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: -2px; }

._mobileTabPill_1lvj2_621 {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: rgba(255, 220, 0, 0.06);
  border: 1.5px solid rgba(255, 220, 0, 0.55);
  z-index: -1;
}

._mobileTabActive_1lvj2_630 {
  color: var(--yellow);
}

._mobileTabDone_1lvj2_634 ._mobileTabLabel_1lvj2_634::after {
  content: " ✓";
  color: var(--yellow);
  opacity: 0.78;
}

._mobileTabLabel_1lvj2_634 { white-space: nowrap; }

/* Body: active round on left, mini-rail on right */
._mobileBody_1lvj2_643 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  column-gap: 12px;
  align-items: start;
  min-height: 0;
}

/* Single-round sections (Lower Bracket has rounds w/ a single match in some
   spots): fall through cleanly; rail just shows what's there. */

._activeRoundWrap_1lvj2_654 {
  position: relative;
  min-height: 0;
}

._activeRoundStack_1lvj2_659 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

._mobileMatchSlot_1lvj2_665 {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

/* Mini-rail: condensed cards listing the OTHER rounds' matches. Tap = activate that round. */
._miniRail_1lvj2_674 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._miniCell_1lvj2_680 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  min-height: 56px;
  padding: 8px 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    var(--navy-deep);
  border: 1px solid var(--border-subtle);
  border-radius: 9px;
  color: var(--white-strong);
  cursor: pointer;
  text-align: left;
  transition:
    border-color var(--motion-fast, 140ms) ease-out,
    background var(--motion-fast, 140ms) ease-out,
    transform var(--motion-fast, 140ms) ease-out;
}

._miniCell_1lvj2_680:hover {
  border-color: var(--border-medium);
  transform: translateY(-1px);
}

._miniCell_1lvj2_680:active { transform: scale(0.97); }

._miniCellLabel_1lvj2_708 {
  display: block;
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white-mid);
  line-height: 1;
}

._miniCellStatus_1lvj2_719 {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--white-strong);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Picked mini-cell: static yellow rim, NO breathing — keeps active surface dominant */
._miniCellPicked_1lvj2_735 {
  border-color: rgba(255, 220, 0, 0.55);
}

._miniCellPicked_1lvj2_735 ._miniCellStatus_1lvj2_719 { color: var(--yellow); }

._miniCellLocked_1lvj2_741 ._miniCellStatus_1lvj2_719 { color: var(--white-mid); opacity: 0.7; }

/* On mobile, the GF outline + ambient halo from the desktop styling is too much
   inside the focused single-cell view. Disable outline; keep the breathing
   yellow glow + label color so it still reads as the championship match. */
._boardMobile_1lvj2_562 ._matchCell_1lvj2_158[data-match-id="GF"] {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 22px -4px rgba(255, 220, 0, 0.30);
}
/*
 * Share Image modal — bigger type, tighter tracking, deeper navy ground.
 * Two-segment toggle, dynamic preview stage that adopts the chosen aspect ratio,
 * crossfade-only format switching (no fake delay), thicker social button borders.
 */

._backdrop_1kb0a_7 {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(2, 6, 18, 0.74);
  backdrop-filter: blur(12px);
  padding: 28px;
}

._modal_1kb0a_18 {
  position: relative;
  width: min(1040px, 100%);
  max-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px 36px;
  /* deep navy ground — closer to the page background, not lifted blue */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 100%),
    var(--navy-deep, #050a20);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  color: var(--white-strong);
  overflow: hidden;
}

._closeBtn_1kb0a_36 {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--border-medium);
  border-radius: 10px;
  background: transparent;
  color: var(--white-mid);
  cursor: pointer;
  transition:
    color var(--motion-fast, 140ms) ease-out,
    border-color var(--motion-fast, 140ms) ease-out,
    background var(--motion-fast, 140ms) ease-out;
}

._closeBtn_1kb0a_36:hover {
  color: var(--white-strong);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
}

._closeBtn_1kb0a_36:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

._closeIcon_1kb0a_66 {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Header */

._header_1kb0a_77 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 56px;
}

._title_1kb0a_84 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 42px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 0.95;
}

._subtitle_1kb0a_95 {
  margin: 0;
  font-family: var(--font-tech);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white-mid);
}

/* Format toggle */

._formatToggle_1kb0a_107 {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
}

._formatBtn_1kb0a_118 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 18px;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--white-mid);
  font: inherit;
  text-align: center;
  cursor: pointer;
  border-radius: 10px;
  transition:
    color var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
    border-color var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1)),
    background var(--motion-snap, 220ms) var(--ease-snap, cubic-bezier(0.32, 0.72, 0, 1));
}

._formatBtn_1kb0a_118:hover {
  color: var(--white-strong);
}

._formatBtn_1kb0a_118:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: -2px;
}

._formatBtn_1kb0a_118._active_1kb0a_147 {
  color: var(--yellow);
  border-color: rgba(255, 220, 0, 0.55);
  background: rgba(255, 220, 0, 0.05);
}

._formatLabel_1kb0a_153 {
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

._formatHint_1kb0a_161 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.78;
}

/* Preview stage — aspect ratio adapts to selected format so there's no blank space */

._previewStage_1kb0a_172 {
  position: relative;
  width: 100%;
  background: #02060f;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: aspect-ratio var(--motion-reveal, 420ms) var(--ease-settle, cubic-bezier(0.16, 1, 0.3, 1));
}

._stageHorizontal_1kb0a_184 {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/*
 * Vertical: drive size from height, derive width from aspect-ratio.
 * That way the image fully fills the stage with no top/bottom letterboxing,
 * and the stage centers itself (with side margins inside the wider modal).
 */
._stageVertical_1kb0a_194 {
  height: 64vh;
  aspect-ratio: 4 / 5;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
}

._previewImage_1kb0a_202 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Loading: subtle dim wash + a thin progress shimmer.
   Only visible while the image is actually network-loading on first show. */

._skeleton_1kb0a_212 {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at center, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0) 70%),
    #02060f;
}

._skeletonShimmer_1kb0a_222 {
  position: absolute;
  left: -40%;
  width: 40%;
  top: 0;
  bottom: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 30%,
    rgba(255, 220, 0, 0.18) 50%,
    rgba(255, 255, 255, 0.04) 70%,
    transparent 100%
  );
  animation: _shimmerSweep_1kb0a_1 1600ms ease-in-out infinite;
}

@keyframes _shimmerSweep_1kb0a_1 {
  from { transform: translateX(0); }
  to   { transform: translateX(350%); }
}

/* Action row */

._actions_1kb0a_246 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

._primaryGroup_1kb0a_254 {
  display: flex;
  align-items: center;
  gap: 12px;
}

._socialGroup_1kb0a_260 {
  display: flex;
  align-items: center;
  gap: 10px;
}

._actionPrimary_1kb0a_266,
._actionGhost_1kb0a_267 {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  padding: 20px 32px;
  border-radius: 12px;
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform var(--motion-fast, 140ms) ease-out,
    background var(--motion-fast, 140ms) ease-out,
    color var(--motion-fast, 140ms) ease-out,
    border-color var(--motion-fast, 140ms) ease-out;
}

._actionPrimary_1kb0a_266 {
  background: var(--yellow);
  color: var(--navy-deep);
  border: 1.5px solid var(--yellow);
}

._actionPrimary_1kb0a_266:hover {
  background: var(--yellow-bright);
  transform: translateY(-1px);
}

._actionPrimary_1kb0a_266:active { transform: scale(0.985); }

._actionGhost_1kb0a_267 {
  background: transparent;
  color: var(--white-strong);
  border: 1.5px solid var(--border-strong);
}

._actionGhost_1kb0a_267:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--white-mid);
  transform: translateY(-1px);
}

._actionGhost_1kb0a_267:active { transform: scale(0.985); }

._actionGhost_1kb0a_267._copied_1kb0a_313 {
  background: var(--yellow);
  color: var(--navy-deep);
  border-color: var(--yellow);
}

._icon_1kb0a_319 {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* Social buttons — thicker borders, larger size */

._socialBtn_1kb0a_332 {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 3px solid var(--white-mid);
  border-radius: 999px;
  color: var(--white-strong);
  cursor: pointer;
  transition:
    transform var(--motion-fast, 140ms) ease-out,
    background var(--motion-fast, 140ms) ease-out,
    border-color var(--motion-fast, 140ms) ease-out,
    color var(--motion-fast, 140ms) ease-out;
}

._socialBtn_1kb0a_332:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--white);
  transform: translateY(-1px);
}

._socialBtn_1kb0a_332:active { transform: scale(0.94); }

._socialBtn_1kb0a_332:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}

._socialIcon_1kb0a_362 {
  width: 22px;
  height: 22px;
  /* fill controlled per-SVG so outline-style icons (Instagram) render correctly */
}
/* Self-hosted fonts */

@font-face {
  font-family: "Fury Sans";
  src: url("/EVOLV/fonts/FURYSans-Regular.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Shuttleblock";
  src: url("/EVOLV/fonts/Shuttleblock-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Shuttleblock";
  src: url("/EVOLV/fonts/Shuttleblock-Demi.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Shuttleblock";
  src: url("/EVOLV/fonts/Shuttleblock-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Shuttleblock";
  src: url("/EVOLV/fonts/Shuttleblock-WideBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Shuttleblock Condensed";
  src: url("/EVOLV/fonts/Shuttleblock-CondensedMedium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Shuttleblock Condensed";
  src: url("/EVOLV/fonts/Shuttleblock-CondensedDemi.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Shuttleblock Condensed";
  src: url("/EVOLV/fonts/Shuttleblock-CondensedBold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Design tokens */

:root {
  /* Palette — darker base, blue used as accent not ground */
  --navy-deep: #050a20;
  --navy-mid: #0a1238;
  --navy-card: #0f1a45;
  --navy-cell: #13204e;
  --navy-cell-locked: #0a1232;
  --navy-elevated: #182a64;

  /* Accents */
  --yellow: #ffdc00;
  --yellow-bright: #ffe340;
  --yellow-dim: rgba(255, 220, 0, 0.6);
  --brand-blue: #3a52d9;
  --brand-blue-soft: rgba(58, 82, 217, 0.18);
  --cyan: #5bc8ff;            /* retained only for the background radial accent */
  --cyan-bright: #7ad6ff;
  --cyan-soft: rgba(91, 200, 255, 0.18);

  /* Text */
  --white: #ffffff;
  --white-strong: rgba(255, 255, 255, 0.94);
  --white-mid: rgba(255, 255, 255, 0.6);
  --white-dim: rgba(255, 255, 255, 0.42);
  --white-faint: rgba(255, 255, 255, 0.18);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.14);
  --border-strong: rgba(255, 255, 255, 0.24);

  /* Fonts */
  --font-display: "Fury Sans", "Shuttleblock", system-ui, sans-serif;
  --font-tech: "Shuttleblock Condensed", "Shuttleblock", system-ui, sans-serif;
  --font-body: "Shuttleblock", system-ui, sans-serif;

  /* Layout */
  --page-max: 1320px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Motion — Apple-style settles, snappy micro-interactions, restrained overshoot */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);      /* iOS expo out — primary */
  --ease-snap: cubic-bezier(0.32, 0.72, 0, 1);       /* Linear/Vercel — micro */
  --ease-rebound: cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle overshoot */
  --ease-corrective: cubic-bezier(0.4, 0, 0.2, 1);   /* fast, flat, no overshoot */

  --motion-fast: 140ms;
  --motion-snap: 220ms;
  --motion-pick: 280ms;
  --motion-propagate: 260ms;
  --motion-reveal: 420ms;
  --motion-celebrate: 700ms;
  --motion-breathe: 2800ms;

  --glow-delay: 100ms;     /* the "premium tell" — glow arrives after the pick commits */
}

/* Reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  margin: 0;
  padding: 0;
  background: var(--navy-deep);
  color: var(--white-strong);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100%;
}

body {
  background:
    radial-gradient(55% 35% at 50% 0%, rgba(58, 82, 217, 0.38) 0%, transparent 65%),
    radial-gradient(35% 28% at 92% 88%, rgba(46, 178, 255, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #050a20 0%, #07112e 50%, #050a20 100%);
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

/* Faceted polygon backdrop — very subtle, abstract */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1200' preserveAspectRatio='none'><g fill='%23ffffff' fill-opacity='0.012'><polygon points='0,1200 0,860 360,690 460,820 200,1080'/><polygon points='1600,1200 1340,1200 1180,950 1420,800'/></g><g fill='%235bc8ff' fill-opacity='0.008'><polygon points='1320,1200 1180,1080 1500,940 1600,1080 1600,1200'/></g></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Subtle halftone matrix dot texture (dimmer this round) */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px
  );
  background-size: 18px 18px;
  z-index: 0;
}

button {
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Page shell */

.page {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter) 0;
}

/*
 * Page-load stagger — each top-level section fades up in sequence on first paint.
 * Header → progress strip → bracket board → action band → footer, ~100ms apart.
 */
@keyframes pageLoadRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page > *:nth-child(1) { animation: pageLoadRise var(--motion-reveal, 420ms) var(--ease-settle, cubic-bezier(0.16, 1, 0.3, 1)) 0ms both; }
.page > *:nth-child(2) { animation: pageLoadRise var(--motion-reveal, 420ms) var(--ease-settle, cubic-bezier(0.16, 1, 0.3, 1)) 100ms both; }
.page > *:nth-child(3) { animation: pageLoadRise var(--motion-reveal, 420ms) var(--ease-settle, cubic-bezier(0.16, 1, 0.3, 1)) 220ms both; }
.page > *:nth-child(4) { animation: pageLoadRise var(--motion-reveal, 420ms) var(--ease-settle, cubic-bezier(0.16, 1, 0.3, 1)) 340ms both; }
.page > *:nth-child(5) { animation: pageLoadRise var(--motion-reveal, 420ms) var(--ease-settle, cubic-bezier(0.16, 1, 0.3, 1)) 440ms both; }

/* Top header — anchored masthead row */

.header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  column-gap: clamp(20px, 3vw, 48px);
  padding-top: clamp(36px, 6vh, 64px);
  padding-bottom: 28px;
  border-bottom: 2px solid rgba(58, 82, 217, 0.85);
  position: relative;
}

.headerLeft {
  display: flex;
  align-items: flex-end;
  gap: clamp(16px, 1.6vw, 28px);
  flex-wrap: wrap;
}

.header::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(58, 82, 217, 1) 25%,
    rgba(58, 82, 217, 1) 75%,
    transparent 100%
  );
  pointer-events: none;
}

.headerHeadline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(64px, 11vw, 144px);
  line-height: 0.84;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--white);
}

.headerChip {
  margin-bottom: clamp(18px, 2.5vh, 30px);
  display: inline-flex;
  align-items: center;
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: clamp(18px, 1.7vw, 26px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-deep);
  background: var(--yellow);
  padding: 7px 18px 5px;
  border-radius: 0;
  white-space: nowrap;
  line-height: 1;
}

.ffLogo {
  height: clamp(80px, 12vh, 140px);
  width: auto;
  max-width: min(420px, 50vw);
  margin-bottom: clamp(8px, 1.4vh, 16px);
}

/* Status row — event meta + progress pill */

.progressStrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 28px 0 28px;
  padding: 0;
  background: transparent;
  border: none;
  flex-wrap: wrap;
}

.eventMeta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.eventMetaLabel {
  color: var(--brand-blue);
  font-weight: 700;
}

.eventMetaValue {
  color: var(--white-mid);
}

.eventMetaDivider {
  color: var(--white-faint);
}

.progressPill {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.progressLabel {
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--white-strong);
}

.progressDots {
  display: inline-flex;
  gap: 9px;
}

.progressDot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1.5px solid var(--border-medium);
  transform: scale(1);
  transition:
    background var(--motion-snap) var(--ease-snap),
    border-color var(--motion-snap) var(--ease-snap);
}

.progressDot.complete {
  background: var(--yellow);
  border-color: var(--yellow);
  animation: dotPop var(--motion-snap) var(--ease-rebound);
}

@keyframes dotPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/*
 * Completion ripple — when picksMade hits totalMatches, every dot lights up
 * in sequence left-to-right with a brief scale + glow bump. This is on top of
 * the per-pick dotPop, so by the time the ripple fires the per-dot pops are done.
 */
.progressDots.complete .progressDot {
  animation: dotRipple var(--motion-celebrate, 700ms) var(--ease-settle, cubic-bezier(0.16, 1, 0.3, 1)) calc(var(--ripple-i, 0) * 40ms) 1;
}

@keyframes dotRipple {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 220, 0, 0); }
  35%  { transform: scale(1.28); box-shadow: 0 0 14px 2px rgba(255, 220, 0, 0.55); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 220, 0, 0); }
}

/* Bottom action band */

.actionBand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 32px 36px;
  margin-top: 36px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.01) 100%
  );
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: background var(--motion-reveal, 420ms) var(--ease-settle, cubic-bezier(0.16, 1, 0.3, 1));
}

.actionBand::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    80% 100% at 100% 50%,
    rgba(255, 220, 0, 0.06) 0%,
    transparent 60%
  );
  pointer-events: none;
  transition: opacity var(--motion-reveal, 420ms) var(--ease-settle, cubic-bezier(0.16, 1, 0.3, 1));
}

/*
 * When ready: no top-border switch (looks AI-ish). Instead, deepen the internal
 * gradient — a soft warm wash from the right side that hints at celebration
 * without crossing into "loud."
 */
.actionBandReady {
  background:
    linear-gradient(
      90deg,
      rgba(255, 220, 0, 0.02) 0%,
      rgba(255, 220, 0, 0.06) 50%,
      rgba(255, 220, 0, 0.14) 100%
    );
}

/*
 * Diagonal yellow gradient sweep — fires once when the bracket completes.
 * NOT a static border. Sweeps from off-screen left to off-screen right over
 * 900ms then disappears. Subtle alpha (0.18) — no aggressive flash.
 */
.actionBand::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 220, 0, 0.18) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  pointer-events: none;
  opacity: 0;
}

.actionBandReady::after {
  animation: bandSweep 900ms var(--ease-settle, cubic-bezier(0.16, 1, 0.3, 1)) 200ms 1;
}

@keyframes bandSweep {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

.actionBandText {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.actionBandHeadline {
  margin: 0;
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white-strong);
  line-height: 1.1;
}

.actionBandSub {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  color: var(--white-mid);
}

.actionBandButtons {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ghostBtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 20px 28px;
  background: transparent;
  color: var(--white-strong);
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  font-family: var(--font-tech);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 160ms ease;
}

.ghostBtn:hover {
  border-color: var(--white-mid);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
}

.ghostBtn span[aria-hidden] {
  font-size: 16px;
  line-height: 1;
}

.primaryBtn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 22px 36px;
  background: var(--yellow);
  color: var(--navy-deep);
  border: none;
  border-radius: 10px;
  font-family: var(--font-tech);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 140ms ease, background 200ms ease;
}

.primaryBtn:hover:not(:disabled) {
  transform: translateY(-1px);
  background: var(--yellow-bright);
}

.primaryBtn:disabled {
  background: rgba(255, 255, 255, 0.07);
  color: var(--white-dim);
  cursor: not-allowed;
  box-shadow: none;
}

.primaryBtn span[aria-hidden] {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

/* Footer — simplified single row */

.siteFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-top: 64px;
  padding: 28px 0 36px;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}

.footerLeft {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footerSnk {
  height: 22px;
  width: auto;
  opacity: 0.85;
}

.footerCopy {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--white-dim);
  max-width: 60ch;
}

.footerLinks {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-tech);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footerLinks a {
  color: var(--white-mid);
  transition: color 160ms ease;
}

.footerLinks a:hover {
  color: var(--yellow);
}

.footerLinks span[aria-hidden] {
  color: var(--white-faint);
}

/* ============================================================
   Mobile reorganization (≤640px) — phone portrait
   - Header: EVO LAS VEGAS full-width, chip + FF logo on a single second row
   - Progress strip: dots-only (no pill background), event date hidden
   - Action band: stacked vertically, Generate Image first via column-reverse
   ============================================================ */

@media (max-width: 640px) {
  .page {
    padding: 0 18px;
  }

  /* Header — tight stack: EVO LAS VEGAS on one line, chip immediately below.
     Fatal Fury logo hidden entirely on mobile (it wasn't earning its space). */
  .header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-top: 26px;
    padding-bottom: 16px;
  }

  .headerLeft {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
  }

  .headerHeadline {
    font-size: clamp(44px, 13vw, 78px);
    line-height: 0.9;
  }

  .headerChip {
    margin-bottom: 0;
    font-size: 13px;
    padding: 6px 12px 4px;
    align-self: flex-start;
  }

  .ffLogo {
    display: none;
  }

  /* Progress strip — slim version of the desktop pill, right-aligned in its row.
     Event date hidden on mobile. */
  .progressStrip {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    margin: 12px 0 18px;
    padding: 0;
    background: transparent;
    border: none;
  }

  .eventMeta {
    display: none;
  }

  .progressPill {
    padding: 8px 14px;
    gap: 10px;
    border-radius: 999px;
  }

  .progressLabel {
    font-size: 11px;
    letter-spacing: 0.2em;
  }

  .progressDots {
    gap: 5px;
  }

  .progressDot {
    width: 9px;
    height: 9px;
    border-width: 1.25px;
  }

  /* Action band — Generate Image as the primary action on its own row,
     Reset Picks below as the secondary. Visual order via column-reverse so
     we don't have to touch the JSX (Reset Picks is first in the DOM). */
  .actionBand {
    flex-direction: column;
    align-items: stretch;
    padding: 22px 22px 24px;
    gap: 14px;
    margin-top: 24px;
  }

  .actionBandText {
    width: 100%;
  }

  .actionBandHeadline {
    font-size: 18px;
    line-height: 1.2;
  }

  .actionBandSub {
    font-size: 13px;
  }

  .actionBandButtons {
    flex-direction: column-reverse;
    width: 100%;
    gap: 10px;
  }

  .ghostBtn,
  .primaryBtn {
    width: 100%;
    justify-content: center;
  }

  .ghostBtn {
    font-size: 15px;
    padding: 16px 22px;
  }

  .ghostBtn svg {
    width: 20px;
    height: 20px;
  }

  .primaryBtn {
    font-size: 19px;
    padding: 19px 28px;
  }

  .siteFooter {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* ============================================================
   Tablet (641-720px) — softer reorganization
   ============================================================ */

@media (min-width: 641px) and (max-width: 720px) {
  .header {
    grid-template-columns: 1fr;
  }

  .headerChip {
    align-self: flex-start;
    margin-bottom: 0;
  }

  .ffLogo {
    justify-self: flex-start;
  }

  .actionBand {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .actionBandButtons {
    justify-content: stretch;
  }

  .ghostBtn,
  .primaryBtn {
    flex: 1;
    justify-content: center;
  }

  .siteFooter {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Reduce motion when the OS asks for it. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Coming Soon splash */
.comingSoon {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  background:
    radial-gradient(55% 35% at 50% 0%, rgba(58, 82, 217, 0.38) 0%, transparent 65%),
    radial-gradient(35% 28% at 92% 88%, rgba(46, 178, 255, 0.18) 0%, transparent 70%),
    linear-gradient(180deg, #050a20 0%, #07112e 50%, #050a20 100%);
  color: #fff;
  font-family: "Shuttleblock Medium", "Helvetica Neue", system-ui, sans-serif;
}
.comingSoonInner {
  max-width: 640px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
}
.comingSoonBrand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.comingSoonHeadline {
  margin: 0;
  font-family: "Fury Sans", "Shuttleblock Bold", sans-serif;
  font-size: clamp(48px, 8vw, 88px);
  letter-spacing: 0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff;
}
.comingSoonChip {
  display: inline-flex;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #cfcfcf;
}
.comingSoonLogo {
  height: clamp(120px, 22vh, 200px);
  width: auto;
  max-width: 86%;
  opacity: 0.92;
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.6));
}
.comingSoonMessage {
  margin: 0;
  font-size: clamp(18px, 2.6vw, 24px);
  font-weight: 600;
  color: #f0f0f0;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.comingSoonSub {
  margin: 0;
  font-size: 14px;
  color: #888;
  letter-spacing: 0.02em;
  font-style: italic;
}

/* Admin dashboard */
.adminLoading { color: #cfcfcf; padding: 48px 24px; font-family: "Shuttleblock Medium", system-ui, sans-serif; }

.adminGate { min-height: 100vh; display: grid; place-items: center; padding: 48px 24px; color: #fff; font-family: "Shuttleblock Medium", system-ui, sans-serif; }
.adminGateInner { max-width: 480px; text-align: center; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.adminGateTitle { margin: 0; font-family: "Fury Sans", sans-serif; font-size: 56px; letter-spacing: 0.04em; }
.adminGateSub { margin: 0; color: #aab; font-size: 15px; }
.adminGateBtn { display: inline-block; background: #5865F2; color: #fff; padding: 12px 28px; border-radius: 8px; font-weight: 700; text-decoration: none; transition: background 0.15s; }
.adminGateBtn:hover { background: #4752c4; }

.adminPage { max-width: 980px; margin: 0 auto; padding: 32px 20px 80px; color: #fff; font-family: "Shuttleblock Medium", system-ui, sans-serif; }
.adminHeader { display: flex; justify-content: space-between; align-items: end; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.adminTitle { margin: 0; font-family: "Fury Sans", sans-serif; font-size: 38px; letter-spacing: 0.03em; }
.adminSub { margin: 4px 0 0; color: #889; font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; }
.adminUser { display: flex; gap: 12px; align-items: center; font-size: 14px; color: #cfcfcf; }
.adminLogoutBtn { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); color: #fff; padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.adminLogoutBtn:hover { background: rgba(255,255,255,0.12); }

.adminErr { background: rgba(255, 60, 60, 0.12); border: 1px solid rgba(255, 80, 80, 0.4); color: #ffbbbb; padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }
.adminOk  { background: rgba(80, 220, 120, 0.10); border: 1px solid rgba(80, 220, 120, 0.4); color: #b8f5cf; padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }

.adminCard { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 20px 22px; margin-bottom: 18px; }
.adminCardHead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.adminCardHead h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: 0.03em; }
.adminHint { margin: 0 0 14px; color: #889; font-size: 13px; line-height: 1.5; }
.adminPill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; }
.adminPill.live { background: rgba(80, 220, 120, 0.18); color: #8ef0a8; border: 1px solid rgba(80, 220, 120, 0.4); }
.adminPill.off  { background: rgba(255, 180, 60, 0.14); color: #ffd393; border: 1px solid rgba(255, 180, 60, 0.4); }

.adminToggleBtn { padding: 10px 22px; border-radius: 8px; border: 0; cursor: pointer; font-weight: 800; font-size: 14px; letter-spacing: 0.05em; }
.adminToggleBtn.go  { background: #2bb673; color: #fff; }
.adminToggleBtn.go:hover { background: #229a60; }
.adminToggleBtn.off { background: #d96a3a; color: #fff; }
.adminToggleBtn.off:hover { background: #b8552a; }
.adminToggleBtn:disabled { opacity: 0.5; cursor: wait; }

.adminAnalyticsEmpty { color: #889; font-size: 13px; }
.adminAnalytics { display: flex; flex-direction: column; gap: 22px; }
.adminAnalyticsStats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.adminStat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 14px 16px; }
.adminStatValue { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; color: #f4f4f6; }
.adminStatLabel { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #889; }

.adminSparklineWrap { display: flex; flex-direction: column; gap: 8px; }
.adminSparklineLabel { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #889; }
.adminSparkline { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 110px; }
.adminSparklineCol { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; }
.adminSparklineBar { width: 100%; min-height: 2px; background: linear-gradient(180deg, rgba(120,180,255,0.85), rgba(80,140,220,0.55)); border-radius: 3px 3px 0 0; }
.adminSparklineCount { font-size: 11px; font-weight: 700; color: #c9c9d0; }
.adminSparklineDay { font-size: 10px; color: #777; letter-spacing: 0.04em; }

@media (max-width: 600px) {
  .adminAnalyticsStats { grid-template-columns: 1fr; }
}

.adminTextarea { width: 100%; padding: 10px 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; color: #fff; font-family: inherit; font-size: 14px; resize: vertical; margin-bottom: 12px; }

.adminSaveBtn { padding: 9px 18px; border-radius: 6px; border: 0; cursor: pointer; background: #3a52d9; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 0.03em; }
.adminSaveBtn:hover { background: #2c40b3; }
.adminSaveBtn:disabled { opacity: 0.5; cursor: wait; }

.adminRosterGrid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.adminRosterRow { display: grid; grid-template-columns: 200px 1.2fr 1fr 70px 70px 1fr; gap: 8px; align-items: center; }
.adminRosterSlot { font-size: 11px; color: #889; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; }
.adminInput { padding: 7px 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.10); border-radius: 5px; color: #fff; font-size: 13px; font-family: inherit; }
.adminInput:focus { outline: none; border-color: rgba(58,82,217,0.6); background: rgba(255,255,255,0.07); }

@media (max-width: 720px) {
  .adminRosterRow { grid-template-columns: 1fr; }
}

/* Admin login button — Discord style */
.adminGateBtn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* Bracket-shaped roster editor */
.adminBracket {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 18px;
}
.adminBracketSection {
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 16px 18px;
}
.adminBracketLabel {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan, #5bc8ff);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(91, 200, 255, 0.18);
}
.adminBracketMatch {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.adminBracketMatch:last-child { margin-bottom: 0; }
.adminBracketMatchTitle {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}
.adminSeedSlot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.adminSeedSlot:last-child { border-bottom: 0; }
.adminSeedBadge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-blue, #3a52d9), #2735a8);
  color: #fff;
  font-family: var(--font-display, "Fury Sans", sans-serif);
  font-weight: 900;
  font-size: 16px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(58, 82, 217, 0.4);
}
.adminSeedInput {
  flex: 1;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  font-weight: 600;
}
.adminSeedInput::placeholder { color: rgba(255, 255, 255, 0.25); font-weight: 400; }
.adminSeedInput:focus { outline: none; border-color: rgba(58,82,217,0.7); background: rgba(255,255,255,0.07); }