@charset "UTF-8";
/* =============================================================
   Draft lottery -- "The Draw". Namespaced entirely under .fl-lotto.

   Sass modules don't share scope backward: fhl.scss's $fl-amber isn't
   visible here even though fhl.scss @use's this file. Re-declaring the
   same house-amber token locally (rather than a bare hex in the rules
   below) keeps every colour in this partial named and swappable in one
   place if the token ever moves.
   ============================================================= */
.fl-lotto {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 8px 0 40px;
}

/* full-page amber wash on the pick-1 landing */
.fl-lotto__wash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  background: radial-gradient(60% 50% at 50% 20%, rgba(255, 163, 26, 0.55), transparent 70%);
}
.fl-lotto__wash.is-active {
  animation: fl-lotto-wash 1.2s ease-out forwards;
}

@keyframes fl-lotto-wash {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.18;
  }
  100% {
    opacity: 0;
  }
}
.fl-lotto .fl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* persistent sound toggle -- sits above every stage (lobby/countdown/draw)
   so it never needs rebinding when the stagehost is swapped */
.fl-lotto__soundtoggle {
  position: absolute;
  top: 8px;
  right: 0;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 0;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #9a9a9a;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.fl-lotto__soundtoggle .fl-lotto__soundmute {
  display: block;
}
.fl-lotto__soundtoggle .fl-lotto__soundwave {
  display: none;
}
.fl-lotto__soundtoggle:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
.fl-lotto__soundtoggle:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.fl-lotto__soundtoggle[aria-pressed=true] {
  color: #ffa31a;
  border-color: rgba(255, 163, 26, 0.4);
}
.fl-lotto__soundtoggle[aria-pressed=true] .fl-lotto__soundmute {
  display: none;
}
.fl-lotto__soundtoggle[aria-pressed=true] .fl-lotto__soundwave {
  display: block;
}

.fl-lotto__eyebrow {
  display: inline-block;
  font: 700 11px "Poppins", sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffa31a;
  margin-bottom: 8px;
}

.fl-lotto__title {
  font: 800 clamp(24px, 4.2vw, 38px) "Orbitron", sans-serif;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}

.fl-lotto__rule {
  color: #9a9a9a;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

.fl-lotto__head {
  text-align: center;
  margin-bottom: 24px;
}

.fl-lotto__head--compact {
  text-align: left;
  margin-bottom: 16px;
}

/* ---------------------------------------------------------- lobby ---- */
.fl-lotto__teamgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.fl-lotto__teamcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 18px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #242424, #1d1d1d);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.fl-lotto__teamcard.is-me {
  border-color: #ffa31a;
  box-shadow: 0 0 0 1px rgba(255, 163, 26, 0.35) inset;
}

.fl-lotto__teamname {
  font: 700 14px "Poppins", sans-serif;
  color: #fff;
}

.fl-lotto__owner {
  font-size: 12px;
  color: #9a9a9a;
}

.fl-lotto__presence {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 11.5px;
  color: #9a9a9a;
}
.fl-lotto__presence i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #666;
  flex: 0 0 auto;
}
.fl-lotto__presence.is-present {
  color: #34d399;
}
.fl-lotto__presence.is-present i {
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.7);
}

.fl-lotto__lobbyfoot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fl-lotto__roomcount {
  margin: 0;
}

/* ------------------------------------------------------- countdown --- */
.fl-lotto__stage--countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0 20px;
}

.fl-lotto__crestrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 34px;
  max-width: 640px;
}

.fl-lotto__crestrow--compact {
  margin-bottom: 22px;
}

.fl-lotto .fl-ava--xs {
  width: 20px;
  height: 20px;
  font-size: 7px;
  opacity: 0.9;
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.fl-lotto .fl-ava--xs.is-done {
  opacity: 0.32;
  filter: grayscale(0.6);
}

.fl-lotto__countwrap {
  position: relative;
  width: 150px;
  height: 150px;
}

.fl-lotto__ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.fl-lotto__ringtrack {
  fill: none;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 3;
}

.fl-lotto__ringsweep {
  fill: none;
  stroke: #ffa31a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 339.3;
  stroke-dashoffset: 339.3;
  filter: drop-shadow(0 0 5px rgba(255, 163, 26, 0.6));
}

.fl-lotto__countnum {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 56px "Orbitron", sans-serif;
  color: #fff;
}
.fl-lotto__countnum.is-entering {
  animation: fl-lotto-digit 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fl-lotto__countnum.is-done {
  opacity: 0;
  transition: opacity 400ms ease;
}

@keyframes fl-lotto-digit {
  0% {
    transform: scale(1.15);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.fl-lotto__quiet {
  color: #9a9a9a;
  font-size: 13.5px;
  margin: 18px 0 0;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------ draw --- */
.fl-lotto__stage {
  min-width: 0;
}

.fl-lotto__stage--draw {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* background watermark -- the last-landed team's crest, huge and faint,
   sits behind the card/board and never intercepts clicks. Opacity lives on
   the two children (not this wrapper) so the glow and the crest can fade to
   different targets independently. */
.fl-lotto__watermark {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  right: 4%;
  bottom: -6%;
  width: min(60vw, 420px);
  aspect-ratio: 1/1;
  transform: rotate(8deg);
}

.fl-lotto__watermark-glow {
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, var(--wm, #ffa31a) 0%, transparent 70%);
  transition: opacity 600ms ease;
}

.fl-lotto__watermark-mark {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
}
.fl-lotto__watermark-mark img, .fl-lotto__watermark-mark svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.fl-lotto__watermark.is-in .fl-lotto__watermark-mark {
  opacity: 0.1;
}
.fl-lotto__watermark.is-in .fl-lotto__watermark-glow {
  opacity: 0.12;
}

.fl-lotto__watermark.is-out .fl-lotto__watermark-mark, .fl-lotto__watermark.is-out .fl-lotto__watermark-glow {
  opacity: 0;
  transition: opacity 400ms ease;
}

.fl-lotto__body {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.fl-lotto__boardwrap {
  position: relative;
  min-width: 0;
  overflow: visible;
}

.fl-lotto__board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fl-lotto__rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.fl-lotto__rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
}
.fl-lotto__rail.is-filled::before {
  background: var(--team, #ffa31a);
  box-shadow: 0 0 8px var(--team, #ffa31a);
}
.fl-lotto__rail--first {
  border-color: rgba(255, 163, 26, 0.4);
}

.fl-lotto__railpick {
  flex: 0 0 auto;
  font: 700 11px "Orbitron", sans-serif;
  color: #9a9a9a;
  letter-spacing: 0.04em;
  width: 58px;
}

.fl-lotto__railteam {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 13px "Poppins", sans-serif;
  color: #fff;
  min-width: 0;
  flex: 1 1 auto;
}

.fl-lotto__railname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fl-lotto__railempty {
  color: #555;
  font-size: 13px;
}

.fl-lotto__firstchip {
  flex: none;
  margin-left: auto;
  font: 700 9.5px "Orbitron", sans-serif;
  letter-spacing: 0.04em;
  color: #131313;
  background: #ffa31a;
  padding: 3px 8px;
  border-radius: 999px;
}

.fl-lotto__stagecard {
  position: relative;
  perspective: 1200px;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fl-lotto__card {
  position: relative;
  width: 260px;
  height: 180px;
  transform-style: preserve-3d;
  transition: transform 600ms ease-out;
}
.fl-lotto__card.is-flipped {
  transform: rotateY(180deg);
}
.fl-lotto__card.is-instant-flip {
  transition: none;
}

/* pick 1's reveal -- no crest strip (only one team left); a ring of light
   expands from the settled card once the beat finishes */
.fl-lotto__finalring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  border: 2px solid var(--team, #ffa31a);
}
.fl-lotto__finalring.is-active {
  animation: fl-lotto-finalring 900ms ease-out;
}

@keyframes fl-lotto-finalring {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}
.fl-lotto__cardface {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, #242424, #1d1d1d);
  text-align: center;
  padding: 12px;
}

.fl-lotto__cardface--front.is-charging {
  border-color: rgba(255, 163, 26, 0.45);
  background: linear-gradient(120deg, transparent 20%, rgba(255, 163, 26, 0.22) 50%, transparent 80%), linear-gradient(180deg, #242424, #1d1d1d);
  background-size: 220% 100%, 100% 100%;
  animation: fl-lotto-charge 2s linear infinite;
}

@keyframes fl-lotto-charge {
  0% {
    background-position: 120% 0, 0 0;
  }
  100% {
    background-position: -20% 0, 0 0;
  }
}
.fl-lotto__cardface--back {
  transform: rotateY(180deg);
  border-color: color-mix(in srgb, var(--team, #ffa31a) 55%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--team, #ffa31a) 30%, transparent);
}
.fl-lotto__cardface--back .fl-ava {
  width: 52px;
  height: 52px;
  font-size: 15px;
}
.fl-lotto__cardface--back.is-finalbeat {
  animation: fl-lotto-finalbeat 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes fl-lotto-finalbeat {
  0% {
    transform: rotateY(180deg) scale(0.6);
    opacity: 0;
    box-shadow: 0 0 0 transparent;
  }
  60% {
    transform: rotateY(180deg) scale(1.04);
    opacity: 1;
    box-shadow: 0 0 46px var(--team, #ffa31a);
  }
  100% {
    transform: rotateY(180deg) scale(1);
    opacity: 1;
    box-shadow: 0 0 30px color-mix(in srgb, var(--team, #ffa31a) 30%, transparent);
  }
}
.fl-lotto__stagepick {
  font: 700 12px "Orbitron", sans-serif;
  letter-spacing: 0.06em;
  color: #ffa31a;
}
.fl-lotto__stagepick.is-pulseonce {
  animation: fl-lotto-pulseonce 500ms ease;
}
.fl-lotto__stagepick.is-presenting-pulse {
  animation: fl-lotto-presentpulse 1.2s ease-in-out;
}

@keyframes fl-lotto-pulseonce {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fl-lotto-presentpulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(1);
  }
  25%, 75% {
    opacity: 1;
    transform: scale(1.05);
  }
  50% {
    opacity: 0.5;
    transform: scale(1);
  }
}
.fl-lotto__stagehint {
  color: #9a9a9a;
  font-size: 13px;
  margin: 0;
}
.fl-lotto__stagehint.is-presenting-pulse {
  animation: fl-lotto-presentpulse 1.2s ease-in-out;
}

/* the run -- a strip of crest tiles scrolling behind the pick label, in
   flow between .fl-lotto__stagepick and .fl-lotto__stagehint so it never
   overlaps them. Reserves its height even when idle (opacity 0) so the
   card doesn't reflow when a run starts. */
.fl-lotto__run {
  width: 100%;
  height: 64px;
  position: relative;
  opacity: 0;
  transition: opacity 300ms ease;
}
.fl-lotto__run.is-running {
  opacity: 1;
}

.fl-lotto__runrail {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

.fl-lotto__runtrack {
  display: flex;
  align-items: center;
  gap: 12px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -32px;
  will-change: transform;
}

.fl-lotto .fl-ava--run {
  width: 64px;
  height: 64px;
  font-size: 20px;
  flex: 0 0 64px;
}
.fl-lotto .fl-ava--run.is-landed {
  box-shadow: 0 0 16px var(--c);
}

.fl-lotto__runpointer {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 2;
  transform: translateX(-50%);
  pointer-events: none;
  background: #ffa31a;
  box-shadow: 0 0 8px rgba(255, 163, 26, 0.7);
}
.fl-lotto__runpointer::before, .fl-lotto__runpointer::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  transform: translateX(-50%);
}
.fl-lotto__runpointer::before {
  top: -2px;
  border-top: 6px solid #ffa31a;
}
.fl-lotto__runpointer::after {
  bottom: -2px;
  border-bottom: 6px solid #ffa31a;
}

.fl-lotto__cardback-name {
  font: 800 17px "Poppins", sans-serif;
  color: #fff;
}

.fl-lotto__cardback-label {
  font: 700 11px "Orbitron", sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffa31a;
}

/* travelling clone used to slide a revealed card into its board rail */
.fl-lotto__flyer {
  position: fixed;
  z-index: 6;
  pointer-events: none;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, #242424, #1d1d1d);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font: 700 13px "Poppins", sans-serif;
  color: #fff;
  transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 500ms ease;
}

/* particle burst on the #1 pick landing */
.fl-lotto__particles {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.fl-lotto__particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffa31a;
  opacity: 0;
  animation: fl-lotto-particle 1.4s ease-out forwards;
}
.fl-lotto__particle.is-white {
  background: #fff;
}

@keyframes fl-lotto-particle {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }
  15% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx, 0), -70px) scale(1);
  }
}
.fl-lotto__foot {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------- void --- */
.fl-lotto__void {
  text-align: center;
  padding: 40px 20px;
}

/* ---------------------------------------------------------- mobile --- */
@media (max-width: 760px) {
  .fl-lotto__teamgrid {
    grid-template-columns: 1fr;
  }
  .fl-lotto__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .fl-lotto__boardwrap {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .fl-lotto__board {
    flex-direction: row;
    padding-bottom: 4px;
  }
  .fl-lotto__rail {
    flex: 0 0 190px;
    width: 190px;
  }
  .fl-lotto__stagecard {
    min-height: 180px;
  }
  .fl-lotto__card {
    width: 220px;
    height: 150px;
  }
  .fl-lotto__countwrap {
    width: 120px;
    height: 120px;
  }
  .fl-lotto__countnum {
    font-size: 44px;
  }
}
/* under this width even a truncated name crowds the chip -- drop it below */
@media (max-width: 420px) {
  .fl-lotto__rail {
    flex-wrap: wrap;
    row-gap: 4px;
  }
  .fl-lotto__firstchip {
    flex: 0 0 100%;
    margin-left: 68px;
  }
}
/* ---------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .fl-lotto__card {
    transition: none;
  }
  .fl-lotto__cardface--front.is-charging {
    animation: none;
  }
  .fl-lotto__stagepick.is-pulseonce {
    animation: none;
  }
  .fl-lotto__stagepick.is-presenting-pulse,
  .fl-lotto__stagehint.is-presenting-pulse {
    animation: none;
  }
  .fl-lotto__cardface--back.is-finalbeat {
    animation: fl-lotto-finalbeat-reduced 200ms ease;
  }
  @keyframes fl-lotto-finalbeat-reduced {
    from {
      transform: rotateY(180deg);
      opacity: 0;
    }
    to {
      transform: rotateY(180deg);
      opacity: 1;
    }
  }
  .fl-lotto__finalring.is-active {
    display: none;
  }
  .fl-lotto__wash.is-active {
    animation: none;
    opacity: 0;
  }
  .fl-lotto__particle {
    display: none;
  }
  .fl-lotto__flyer {
    transition: opacity 150ms ease;
  }
  .fl-lotto .fl-ava--xs {
    transition: none;
  }
  .fl-lotto__run {
    display: none;
  }
  .fl-lotto__watermark-mark, .fl-lotto__watermark-glow {
    transition: none;
  }
}
/* =============================================================
   5V5 Fantasy Leagues (apps.fhl) — dark/amber design system
   ============================================================= */
/* =============================================================
   Commissioner panel v2: scoped entirely under .fl-cm so nothing
   here leaks onto any other fhl page. Tokens match the design
   handoff (.tmp/design/README.md) exactly.
   ============================================================= */
.fl-cm {
  background: #141414;
  color: #e8e8e8;
  font-family: "Barlow", "Poppins", sans-serif;
  margin: -20px -20px 0;
  padding-bottom: 24px;
  --fl-site-header-h: 86px;
  --fl-cm-nav-h: 44px;
}
.fl-cm [hidden] {
  display: none !important;
}
.fl-cm input[type=checkbox], .fl-cm input[type=radio] {
  accent-color: #ffa31a;
}
.fl-cm a {
  color: #ffa31a;
  text-decoration: none;
}
.fl-cm a:hover {
  color: #ffb84d;
  text-decoration: underline;
}
.fl-cm button {
  font-family: "Barlow", "Poppins", sans-serif;
}
.fl-cm input, .fl-cm select, .fl-cm textarea {
  font-family: "Barlow Condensed", "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-size: 14px;
  color: #e8e8e8;
  background: #242424;
  border: 1px solid #333333;
  border-radius: 4px;
  padding: 5px 8px;
}
.fl-cm input:focus-visible, .fl-cm select:focus-visible, .fl-cm textarea:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.fl-cm input::placeholder, .fl-cm textarea::placeholder {
  font-weight: 500;
  color: #7a7a7a;
}

/* ---------------- header ---------------- */
.fl-cm__header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 9px 20px;
  background: #1b1b1b;
  border-bottom: 1px solid #2a2a2a;
  position: sticky;
  top: 0;
  z-index: 20;
}

.fl-cm__brand {
  width: 28px;
  height: 28px;
  background: #ffa31a;
  color: #141414;
  display: grid;
  place-items: center;
  font: 700 14px "Barlow Condensed", "Poppins", sans-serif;
  border-radius: 4px;
  flex: none;
}

.fl-cm__title {
  font: 700 17px/1.1 "Barlow Condensed", "Poppins", sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fl-cm__sub {
  font-size: 11px;
  color: #9a9a9a;
  margin-top: 2px;
}

.fl-cm__headerright {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fl-cm-statchip {
  font-size: 11px;
  color: #c2c2c2;
  border: 1px solid #333333;
  background: #242424;
  padding: 3px 8px;
  border-radius: 3px;
}
.fl-cm-statchip--open {
  color: #34d27e;
  border-color: #2a4a38;
  background: rgba(52, 210, 126, 0.08);
}
.fl-cm-statchip--frozen {
  color: #ffa31a;
  border-color: #4a3a1a;
  background: rgba(255, 163, 26, 0.08);
}

.fl-cm-flash {
  font-size: 11px;
  font-weight: 700;
  color: #141414;
  background: #34d27e;
  padding: 3px 9px;
  border-radius: 3px;
  transition: opacity 0.3s ease;
}
.fl-cm-flash--error {
  background: #f08a8a;
}
.fl-cm-flash.is-leaving {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .fl-cm-flash {
    transition: none;
  }
}

/* ---------------- tab nav ---------------- */
.fl-cm__nav {
  display: flex;
  gap: 2px;
  padding: 0 20px;
  background: #1b1b1b;
  border-bottom: 1px solid #2a2a2a;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 47px;
  z-index: 19;
  /* This always scrolled -- it just never said so. On a 375px screen the
     strip runs to x=836, so Draft, Schedule, Transactions and Teams sit
     off the right edge with no hint they exist, and a commissioner on a
     phone concluded those sections were missing. A thin visible track and
     a fade at the edge are the whole fix. */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.fl-cm__nav::-webkit-scrollbar {
  height: 3px;
}
.fl-cm__nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 2px;
}
@media (max-width: 760px) {
  .fl-cm__nav {
    padding: 0 12px;
    background: linear-gradient(to left, #1b1b1b 40%, rgba(0, 0, 0, 0)) right/26px 100% no-repeat local, #1b1b1b;
  }
}

.fl-cm__tab {
  flex: none;
  font: 600 14px/1 "Barlow Condensed", "Poppins", sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 10px 12px;
  background: none;
  color: #9a9a9a;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.fl-cm__tab:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.fl-cm__tab:hover {
  color: #fff;
}
.fl-cm__tab[aria-selected=true] {
  color: #fff;
  border-bottom-color: #ffa31a;
}
.fl-cm__tab--danger {
  color: #f08a8a;
}
.fl-cm__tab--danger[aria-selected=true] {
  border-bottom-color: #f08a8a;
}

.fl-cm__body {
  padding: 12px 20px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ---------------- cards ---------------- */
.fl-cm-card {
  background: #1d1d1d;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
}

.fl-cm-card--danger {
  border-color: #4a2a2a;
}

.fl-cm-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #2a2a2a;
  flex-wrap: wrap;
}

.fl-cm-card__title {
  font: 700 15px/1.2 "Barlow Condensed", "Poppins", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.fl-cm-card__title--danger {
  color: #f08a8a;
}

.fl-cm-card__note {
  margin-left: auto;
  font-size: 11px;
  color: #9a9a9a;
}

.fl-cm-card__note--warn {
  color: #ffa31a;
}

.fl-cm-card__badge {
  font-size: 11px;
  font-weight: 700;
  color: #141414;
  background: #ffa31a;
  border-radius: 9px;
  padding: 1px 7px;
}

.fl-cm-card__body {
  padding: 10px 12px;
}

.fl-cm-note {
  font-size: 12px;
  color: #9a9a9a;
  margin: 0;
  padding: 10px 12px;
}

/* ---------------- overview: status chips ---------------- */
.fl-cm-chipgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.fl-cm-chip {
  text-align: left;
  background: #1d1d1d;
  border: 1px solid #2a2a2a;
  border-radius: 5px;
  padding: 8px 12px;
  cursor: pointer;
  color: inherit;
  font-family: "Barlow", "Poppins", sans-serif;
}
.fl-cm-chip:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.fl-cm-chip:hover {
  border-color: #ffa31a;
}

.fl-cm-chip__label {
  font-size: 10px;
  color: #9a9a9a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fl-cm-chip__row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.fl-cm-chip__value {
  font: 700 22px "Barlow Condensed", "Poppins", sans-serif;
  color: #e8e8e8;
}
.fl-cm-chip__value--attn {
  color: #ffa31a;
}

.fl-cm-chip__sub {
  font-size: 11px;
  color: #9a9a9a;
}

/* ---------------- overview: queue + activity ---------------- */
.fl-cm-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

@media (max-width: 860px) {
  .fl-cm-cols {
    grid-template-columns: 1fr;
  }
}
.fl-cm-queuerow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid #232323;
  flex-wrap: wrap;
}
.fl-cm-queuerow:last-child {
  border-bottom: none;
}

.fl-cm-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #333333;
  color: #c2c2c2;
  flex: none;
}
.fl-cm-tag--orange {
  color: #ffa31a;
  border-color: #4a3a1a;
}
.fl-cm-tag--green {
  color: #34d27e;
  border-color: #2a4a38;
}

.fl-cm-queuerow__body {
  min-width: 0;
  flex: 1;
}

.fl-cm-queuerow__title {
  font-size: 13px;
  font-weight: 600;
}

.fl-cm-queuerow__detail {
  font-size: 11px;
  color: #9a9a9a;
}

.fl-cm-btn {
  font-size: 11px;
  font-weight: 700;
  border: none;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
}
.fl-cm-btn:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.fl-cm-btn--approve {
  color: #141414;
  background: #34d27e;
}
.fl-cm-btn--approve:hover {
  background: #5fe39b;
}
.fl-cm-btn--decline {
  font-weight: 600;
  color: #f08a8a;
  background: none;
  border: 1px solid #4a2a2a;
}
.fl-cm-btn--link {
  font-weight: 600;
  color: #ffa31a;
  background: none;
  border: 1px solid #4a3a1a;
}
.fl-cm-btn--link:hover {
  background: rgba(255, 163, 26, 0.08);
}

.fl-cm-activity {
  display: flex;
  flex-direction: column;
}

.fl-cm-activity__row {
  display: flex;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid #232323;
}
.fl-cm-activity__row:last-child {
  border-bottom: none;
}

.fl-cm-activity__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffa31a;
  margin-top: 5px;
  flex: none;
}

.fl-cm-activity__detail {
  font-size: 12px;
  line-height: 1.35;
}

.fl-cm-activity__time {
  font-size: 10px;
  color: #9a9a9a;
}

.fl-cm-card__link {
  margin-left: auto;
  font-size: 11px;
  color: #ffa31a;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.fl-cm-card__link:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

/* ---------------- forms ---------------- */
.fl-cm-fieldgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 8px 10px;
  padding: 10px 12px;
}

.fl-cm-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fl-cm-field--wide {
  grid-column: span 2;
}

.fl-cm-label {
  font-size: 10px;
  color: #9a9a9a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fl-cm-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #c2c2c2;
  font-family: "Barlow", "Poppins", sans-serif;
}

.fl-cm-checkrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px 10px;
  flex-wrap: wrap;
}

.fl-cm-checkrow--top {
  padding: 10px 12px 4px;
  gap: 16px;
}

.fl-cm-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  flex-wrap: wrap;
}

.fl-cm-actions--end {
  justify-content: flex-end;
}

.fl-cm-save {
  font-size: 12px;
  font-weight: 700;
  color: #141414;
  background: #ffa31a;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  cursor: pointer;
}
.fl-cm-save:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.fl-cm-save:hover {
  background: #ffb84d;
}

.fl-cm-ghost {
  font-size: 12px;
  font-weight: 600;
  color: #e8e8e8;
  background: #242424;
  border: 1px solid #333333;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.fl-cm-ghost:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.fl-cm-ghost:hover {
  background: #2c2c2c;
}
.fl-cm-ghost--xs {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 3px;
}

.fl-cm-dangerbtn {
  font-size: 11px;
  color: #f08a8a;
  background: none;
  border: 1px solid #4a2a2a;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
}
.fl-cm-dangerbtn:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.fl-cm-dangerbtn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fl-cm-segrow {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.fl-cm-radio, .fl-cm-checkline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-family: "Barlow", "Poppins", sans-serif;
}

.fl-cm-radio:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.fl-cm-catcols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.fl-cm-catlabel {
  font-size: 10px;
  color: #9a9a9a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}

.fl-cm-catlist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.fl-cm-cat {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #c2c2c2;
  font-family: "Barlow", "Poppins", sans-serif;
}

.fl-cm-ptgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 6px;
}

.fl-cm-ptcell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fl-cm-ptcell span {
  font-size: 10px;
  color: #9a9a9a;
}

.fl-cm-ptcell input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
}

.fl-cm-slotrow {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  flex-wrap: wrap;
}

.fl-cm-slotcell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 56px;
}
.fl-cm-slotcell span {
  font-size: 10px;
  color: #9a9a9a;
  text-align: center;
}
.fl-cm-slotcell input {
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
  padding: 4px;
}

.fl-cm-inlineform {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

/* type-to-filter box that fhlSelectSearch.js inserts above a long select.
   Sits on its own row inside the inline form so it reads as belonging to
   the select beneath it rather than as another field in the sequence. */
.fl-selsearch {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 200px;
  min-width: 160px;
}

.fl-selsearch__input {
  flex: 1 1 auto;
  min-width: 0;
}

.fl-selsearch__count {
  font: 600 10.5px "IBM Plex Mono", monospace;
  color: #9a9a9a;
  white-space: nowrap;
}
.fl-selsearch__count.is-empty {
  color: #f87171;
}

.fl-cm-subhead {
  font-size: 10px;
  color: #9a9a9a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 5px;
}

/* ---------------- starting-keeper row editor (task 3) ---------------- */
.fl-cm-formerr {
  border: 1px solid #4a2a2a;
  background: rgba(240, 138, 138, 0.08);
  border-radius: 4px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.fl-cm-formerr ul {
  margin: 0;
  padding-left: 18px;
}
.fl-cm-formerr li {
  font-size: 12px;
  color: #f08a8a;
  line-height: 1.5;
}

.fl-cm-keeperrows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.fl-cm-keeperrow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #191919;
  border: 1px solid #2a2a2a;
  border-radius: 5px;
}

.fl-cm-keeperrow__team {
  flex: 0 0 170px;
  min-width: 0;
}

.fl-cm-keeperrow__cost {
  flex: 0 0 90px;
  min-width: 0;
}

.fl-cm-keeperrow__years {
  flex: 0 0 90px;
  min-width: 0;
}

.fl-cm-keeperrow__remove {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
}

.fl-cm-playerpick {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
}

.fl-cm-playerpick__input {
  width: 100%;
  box-sizing: border-box;
}

.fl-cm-playerpick__results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  background: #1d1d1d;
  border: 1px solid #333333;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  max-height: 220px;
  overflow-y: auto;
}

.fl-cm-playerpick__result {
  display: block;
  width: 100%;
  text-align: left;
  font-family: "Barlow", "Poppins", sans-serif;
  font-size: 13px;
  color: #e8e8e8;
  background: none;
  border: none;
  padding: 7px 10px;
  cursor: pointer;
}
.fl-cm-playerpick__result:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.fl-cm-playerpick__result:hover, .fl-cm-playerpick__result:focus-visible {
  background: #242424;
}
.fl-cm-playerpick__result span {
  margin-left: 6px;
  font-size: 11px;
  color: #9a9a9a;
}

.fl-cm-playerpick__status {
  padding: 8px 10px;
  font-size: 12px;
  color: #9a9a9a;
}

.fl-cm-pastefallback {
  margin-top: 8px;
}
.fl-cm-pastefallback summary {
  cursor: pointer;
}
.fl-cm-pastefallback form {
  padding-top: 8px;
}

/* ---------------- teams ---------------- */
.fl-cm-invitebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #232323;
  flex-wrap: wrap;
}

.fl-cm-invitebar__code {
  font-size: 12px;
  color: #c2c2c2;
}
.fl-cm-invitebar__code b {
  color: #ffa31a;
  letter-spacing: 0.08em;
}

.fl-cm-invitebar input {
  flex: 1;
  min-width: 180px;
  font-size: 13px;
  color: #c2c2c2;
}

.fl-cm-tablewrap {
  overflow-x: auto;
}

.fl-cm-tablehead {
  display: grid;
  grid-template-columns: minmax(130px, 1.6fr) minmax(90px, 1.2fr) 70px 56px 56px 60px 84px;
  gap: 8px;
  padding: 6px 12px;
  min-width: 560px;
  border-bottom: 1px solid #2a2a2a;
  font-size: 10px;
  color: #9a9a9a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fl-cm-teamrow__main {
  display: grid;
  grid-template-columns: minmax(130px, 1.6fr) minmax(90px, 1.2fr) 70px 56px 56px 60px 84px;
  gap: 8px;
  padding: 5px 12px;
  min-width: 560px;
  border-bottom: 1px solid #232323;
  align-items: center;
}

.fl-cm-teamrow__name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-cm-teamrow__name--muted {
  color: #9a9a9a;
}

.fl-cm-teamrow__cell {
  font-size: 12px;
  color: #c2c2c2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-cm-teamrow__chip {
  font-size: 10px;
  font-weight: 700;
  color: #34d27e;
}

.fl-cm-teamrow__manage {
  font-size: 11px;
  color: #c2c2c2;
  background: #242424;
  border: 1px solid #333333;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
  justify-self: end;
}
.fl-cm-teamrow__manage:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.fl-cm-teamrow__manage:hover {
  background: #2c2c2c;
}
.fl-cm-teamrow__manage[aria-expanded=true] {
  border-color: #ffa31a;
  color: #ffa31a;
}

.fl-cm-teamrow__expand {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #191919;
  border-bottom: 1px solid #232323;
  flex-wrap: wrap;
}

.fl-cm-teamrow.is-open .fl-cm-teamrow__expand {
  display: flex;
}

.fl-cm-teamrow__expand input, .fl-cm-teamrow__expand select {
  font-size: 13px;
  padding: 3px 6px;
  border-radius: 3px;
}

.fl-cm-expandfield {
  display: flex;
  gap: 4px;
  align-items: center;
}

.fl-cm .fl-popmenu:not([open]) .fl-popmenu__panel,
.fl-cm .fl-popmenu:not([open]) .fl-popmenu__panel--wide {
  display: none;
}

/* ---------------- danger ---------------- */
.fl-cm-dangeritem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid #232323;
  flex-wrap: wrap;
}
.fl-cm-dangeritem:last-child {
  border-bottom: none;
}

.fl-cm-dangeritem__body {
  flex: 1;
  min-width: 180px;
}

.fl-cm-dangeritem__title {
  font-size: 13px;
  font-weight: 600;
}

.fl-cm-dangeritem__note {
  font-size: 11px;
  color: #9a9a9a;
  display: block;
}

/* ---------------- sticky offset under the site's fixed mobile header ----------------
   The site's own nav switches from sticky (desktop, >1024px) to a fixed 86px
   header (<=1024px -- core/static/scss/_mobile.scss toggles .navigation off
   and .header on at that width, not the 900px this was first scoped to).
   Below that width .fl-cm__header also wraps to two lines and can no longer
   share the top:0 sticky slot with the site header, so it goes fully static
   here and only the tab nav stays stuck, offset below the real header. */
@media (max-width: 1024px) {
  .fl-cm__header {
    position: static;
  }
  .fl-cm__nav {
    position: sticky;
    top: var(--fl-site-header-h, 86px);
  }
  .fl-cm-panel {
    scroll-margin-top: calc(var(--fl-site-header-h, 86px) + var(--fl-cm-nav-h, 44px));
  }
}
/* ---------------- clearance for the fixed bottom nav ---------------- */
@media (max-width: 760px) {
  .fl-cm__body {
    padding-bottom: 77px;
  }
}
/* ---------------- mobile (narrow panel) ---------------- */
@media (max-width: 640px) {
  .fl-cm {
    margin: -12px -12px 0;
  }
  .fl-cm__header, .fl-cm__nav, .fl-cm__body {
    padding-left: 12px;
    padding-right: 12px;
  }
  .fl-cm-fieldgrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .fl-cm-field--wide {
    grid-column: 1/-1;
  }
  .fl-cm-field,
  .fl-cm-field input, .fl-cm-field select, .fl-cm-field textarea {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }
  .fl-cm-ptcell {
    min-width: 0;
  }
  .fl-cm-slotrow {
    flex-wrap: wrap;
  }
  .fl-cm-slotcell {
    min-width: 0;
  }
  .fl-cm-chipgrid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 62%);
    grid-template-columns: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .fl-cm button:not(.fl-infodot):not(.fl-cm__tab),
  .fl-cm input, .fl-cm select, .fl-cm textarea {
    min-height: 40px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .fl-cm__tab {
    min-height: 44px;
  }
  .fl-cm .fl-infodot {
    position: relative;
  }
  .fl-cm .fl-infodot::after {
    content: "";
    position: absolute;
    inset: -6px;
  }
  .fl-cm-chip__label, .fl-cm-activity__time, .fl-cm-label {
    font-size: 11px;
  }
  .fl-cm-keeperrow {
    flex-direction: column;
    align-items: stretch;
  }
  .fl-cm-keeperrow__team, .fl-cm-keeperrow__cost, .fl-cm-keeperrow__years,
  .fl-cm-playerpick {
    flex: none;
    width: 100%;
  }
  .fl-cm-keeperrow__remove {
    align-self: flex-end;
  }
}
.fl {
  color: #fff;
  padding: 18px clamp(12px, 3vw, 36px) 60px;
  font-family: "Poppins", sans-serif;
}
.fl a {
  text-decoration: none;
}
.fl.fl--narrow {
  max-width: 980px;
  margin: 0 auto;
}

/* ---------- flash messages ---------- */
.fl-flash {
  margin-bottom: 14px;
  display: grid;
  gap: 8px;
}

.fl-flash__item {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  border: 1px solid rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.08);
  color: #b9f3dd;
}
.fl-flash__item.fl-flash__item--error {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
  color: #ffd2d2;
}
.fl-flash__item.fl-flash__item--warning {
  border-color: rgba(255, 163, 26, 0.4);
  background: rgba(255, 163, 26, 0.08);
  color: #ffdfae;
}

/* ---------- staff league-admin banner + console ---------- */
/* Stand-in drafter -- someone drafting a team they do not own, through a
   link, with no account. Deliberately the same shape as .fl-staffbar: both
   say "you are not who this page normally belongs to", and a manager who has
   seen one should recognise the other. Sits where the league nav would be,
   because for a stand-in there is no league nav. */
.fl-standin {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 163, 26, 0.55);
  background: rgba(255, 163, 26, 0.1);
  color: #ffdfae;
  font-size: 0.86rem;
}
.fl-standin b {
  color: #fff;
}
.fl-standin__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: #ffa31a;
  box-shadow: 0 0 8px #ffa31a;
}
.fl-standin__text {
  flex: 1 1 260px;
}

/* The invite card in the draft lobby. */
.fl-standinlink {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 163, 26, 0.07);
  border: 1px solid rgba(255, 163, 26, 0.35);
}
.fl-standinlink input {
  width: 100%;
  margin: 6px 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
}
.fl-standinlink__label {
  margin: 0;
  font: 700 11px "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffa31a;
}

.fl-standinlist {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.fl-standinlist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 11px;
  border-radius: 10px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
}
.fl-standinlist form {
  margin: 0;
}

.fl-standinlist__who {
  display: grid;
  min-width: 0;
}
.fl-standinlist__who b {
  color: #fff;
}
.fl-standinlist__who i {
  color: #9a9a9a;
  font-style: normal;
  font-size: 11px;
}

.fl-note--warn {
  color: #ffa31a;
}

.fl-staffbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 163, 26, 0.55);
  background: rgba(255, 163, 26, 0.1);
  color: #ffdfae;
  font-size: 0.86rem;
}
.fl-staffbar b {
  color: #fff;
}
.fl-staffbar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffa31a;
  box-shadow: 0 0 8px #ffa31a;
}
.fl-staffbar__text {
  flex: 1;
  min-width: 200px;
}
.fl-staffbar__exit {
  border: 1px solid rgba(255, 163, 26, 0.6);
  border-radius: 8px;
  background: transparent;
  color: #ffa31a;
  cursor: pointer;
  padding: 4px 12px;
  font: inherit;
  font-weight: 600;
}
.fl-staffbar__exit:hover {
  background: rgba(255, 163, 26, 0.15);
}

.fl-staffadmin__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.fl-staffadmin__sub {
  margin: 6px 0 0;
  color: #9a9a9a;
  font-size: 13px;
  max-width: 640px;
}

.fl-staffadmin__filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fl-staffadmin__filters .fl-input {
  max-width: 280px;
}

.fl-staffadmin__actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.fl-staffadmin__actions form {
  display: inline;
}

.fl-staffadmin__pager {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  color: #9a9a9a;
  font-size: 13px;
}

.fl-staffadmin__empty {
  color: #9a9a9a;
}

/* ---------- buttons / inputs / chips ---------- */
.fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  font: 600 14px "Poppins", sans-serif;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.fl-btn.fl-btn--primary {
  background: #ffa31a;
  color: #131313;
}
.fl-btn.fl-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 163, 26, 0.35);
}
.fl-btn.fl-btn--primary:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.fl-btn.fl-btn--ghost {
  background: #181818;
  color: #eee;
  border-color: rgba(255, 255, 255, 0.09);
}
.fl-btn.fl-btn--ghost:hover {
  border-color: rgba(255, 163, 26, 0.6);
  color: #ffa31a;
}
.fl-btn.fl-btn--ghost:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.fl-btn.fl-btn--danger {
  background: rgba(248, 113, 113, 0.12);
  color: #ff9d9d;
  border-color: rgba(248, 113, 113, 0.4);
}
.fl-btn.fl-btn--danger:hover {
  background: rgba(248, 113, 113, 0.22);
}
.fl-btn.fl-btn--danger:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.fl-btn.fl-btn--lg {
  padding: 14px 30px;
  font-size: 16px;
}
.fl-btn.fl-btn--xs {
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 8px;
}
.fl-btn.fl-btn--block {
  width: 100%;
}

.fl-input {
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
  font: 400 14px "Poppins", sans-serif;
  min-width: 0;
}
.fl-input::placeholder {
  color: #6f6f6f;
}
.fl-input:focus {
  outline: none;
  border-color: #ffa31a;
  box-shadow: 0 0 0 3px rgba(255, 163, 26, 0.2);
}
.fl-input.fl-input--sm {
  height: 34px;
  font-size: 13px;
}
.fl-input.fl-input--xs {
  height: 30px;
  font-size: 12px;
}

select.fl-input {
  appearance: none;
  padding-right: 26px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a9a9a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.fl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: #232323;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #cfcfcf;
}
.fl-chip b {
  color: #ffa31a;
  font-weight: 700;
}
.fl-chip.fl-chip--status {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  font-weight: 700;
}
.fl-chip.fl-chip--setup {
  color: #7dd3fc;
  border-color: rgba(125, 211, 252, 0.35);
}
.fl-chip.fl-chip--drafting {
  color: #ffa31a;
  border-color: rgba(255, 163, 26, 0.4);
}
.fl-chip.fl-chip--active {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
}
.fl-chip.fl-chip--complete {
  color: #bbb;
}
.fl-chip.fl-chip--bot {
  color: #a78bfa;
  border-color: rgba(167, 139, 250, 0.4);
  font-size: 9.5px;
  padding: 2px 7px;
}
.fl-chip.fl-chip--auto {
  color: #ffa31a;
  border-color: rgba(255, 163, 26, 0.4);
  font-size: 9.5px;
  padding: 2px 7px;
  letter-spacing: 0.04em;
}
.fl-chip.fl-chip--waiver {
  color: #ffa31a;
  border-color: rgba(255, 163, 26, 0.35);
}
.fl-chip.fl-chip--fa {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.3);
}
.fl-chip.fl-chip--mine {
  color: #131313;
  background: #ffa31a;
  border-color: #ffa31a;
  font-weight: 700;
}
.fl-chip.fl-chip--executed {
  color: #34d399;
}
.fl-chip.fl-chip--vetoed, .fl-chip.fl-chip--rejected, .fl-chip.fl-chip--cancelled {
  color: #f87171;
}
.fl-chip.fl-chip--soon {
  color: #ffa31a;
  border-color: rgba(255, 163, 26, 0.5);
  font-weight: 700;
}

.fl-ava {
  --c: #ffa31a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex: 0 0 auto;
  font: 800 12px "Orbitron", sans-serif;
  letter-spacing: 0.02em;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, #1b1b1b);
  border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
}
.fl-ava.fl-ava--sm {
  width: 26px;
  height: 26px;
  font-size: 9px;
}
.fl-ava.fl-ava--lg {
  width: 52px;
  height: 52px;
  font-size: 15px;
}
.fl-ava.fl-ava--logo svg {
  width: 58%;
  height: 58%;
  display: block;
}
.fl-ava.fl-ava--empty {
  --c: #9a9a9a;
  border-style: dashed;
  background: transparent;
  opacity: 0.7;
}
.fl-ava .fl-ava__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.fl-ava[data-logo-zoom] {
  cursor: zoom-in;
}
.fl-ava[data-logo-zoom]:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

/* invite link bar (commissioner teams panel) */
.fl-invitebar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: color-mix(in srgb, #ffa31a 6%, transparent);
  border: 1px solid color-mix(in srgb, #ffa31a 30%, rgba(255, 255, 255, 0.09));
  border-radius: 12px;
}
.fl-invitebar__code {
  font-size: 13px;
  color: #9a9a9a;
}
.fl-invitebar__code b {
  color: #ffa31a;
  font: 700 13px "Orbitron", sans-serif;
  letter-spacing: 0.04em;
}
.fl-invitebar__link {
  flex: 1 1 220px;
  min-width: 0;
}

.fl-table__openrow {
  color: #9a9a9a;
}
.fl-table__openrow td {
  opacity: 0.85;
}

.fl-headshot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: #2a2a2a;
  border: 1px solid rgba(255, 255, 255, 0.09);
  flex: 0 0 auto;
}
.fl-headshot.fl-headshot--xs {
  width: 22px;
  height: 22px;
}

/* small inline NHL team logo next to a team abbreviation */
.fl-nhl {
  width: 15px;
  height: 15px;
  object-fit: contain;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 3px;
}

/* ---------- cards ---------- */
.fl-card {
  background: linear-gradient(180deg, #242424, #1d1d1d);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.fl-card--attention {
  border-color: rgba(255, 163, 26, 0.45);
  box-shadow: 0 0 24px rgba(255, 163, 26, 0.08);
}

.fl-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.fl-card__title {
  font: 700 16px "Poppins", sans-serif;
  color: #fff;
  margin: 0;
}

.fl-card__more {
  color: #ffa31a;
  font-size: 13px;
  font-weight: 600;
}
.fl-card__more:hover {
  text-decoration: underline;
}

.fl-note {
  color: #9a9a9a;
  font-size: 13.5px;
  line-height: 1.55;
  margin: 6px 0 12px;
}
.fl-note b {
  color: #ffa31a;
}
.fl-note a {
  color: #ffa31a;
}

.fl-note-inline {
  color: #9a9a9a;
  font-size: 12.5px;
}

.fl-teamlink {
  color: inherit;
  text-decoration: none;
}
.fl-teamlink:hover, .fl-teamlink:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fl-teamlink:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
  border-radius: 2px;
}

.fl-standings-legend {
  margin: 10px 0 0;
  padding: 0 2px;
}

.fl-subtitle {
  font-size: 13px;
  color: #9a9a9a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 16px 0 8px;
}

.fl-empty {
  padding: 26px 10px;
  text-align: center;
  color: #9a9a9a;
  font-size: 14px;
}
.fl-empty.fl-empty--row {
  padding: 12px;
}

/* ---------- league header + tabs (compact: content first) ---------- */
.fl-lghead {
  margin-bottom: 2px;
}

.fl-lghead__row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.fl-lghead__title {
  font: 800 clamp(19px, 2.2vw, 24px) "Poppins", sans-serif;
  color: #fff;
  margin: 0;
}

.fl-lghead__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-left: auto;
}

.fl-tabs {
  /* wrap instead of scroll: the More dropdown needs overflow visible, and
     under 760px the bottom nav replaces these tabs entirely */
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 10px 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  padding-bottom: 0;
}

.fl-tabs__link {
  padding: 10px 14px;
  color: #bdbdbd;
  font-size: 13.5px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.fl-tabs__link:hover {
  color: #fff;
}
.fl-tabs__link.is-active {
  color: #ffa31a;
  border-bottom-color: #ffa31a;
}
.fl-tabs__link.fl-tabs__link--commish {
  color: #a78bfa;
}
.fl-tabs__link.fl-tabs__link--commish.is-active {
  color: #ffa31a;
}

/* ---------- hub ---------- */
.fl-hero {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 34px;
  padding: clamp(24px, 4vw, 52px) 0 clamp(20px, 3vw, 40px);
  align-items: center;
}

.fl-hero__title {
  font: 800 clamp(32px, 5vw, 54px)/1.08 "Poppins", sans-serif;
  margin: 14px 0;
}

.fl-hero__lead {
  color: #c9c9c9;
  font-size: 15.5px;
  line-height: 1.65;
  max-width: 60ch;
}

.fl-hero__actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
  align-items: center;
}

.fl-joinform {
  display: flex;
  gap: 8px;
}
.fl-joinform.fl-joinform--page {
  margin-top: 16px;
}

.fl-hero__points {
  display: grid;
  gap: 12px;
}

.fl-point {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, #242424, #1d1d1d);
  display: grid;
  gap: 4px;
}
.fl-point b {
  color: #ffa31a;
  font: 700 12px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fl-point span {
  color: #cfcfcf;
  font-size: 13.5px;
  line-height: 1.5;
}

.fl-section {
  margin: 26px 0;
}

.fl-section__title {
  font: 700 20px "Poppins", sans-serif;
  margin-bottom: 14px;
}

.fl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}

/* Column, not grid. As a grid the card's rows inherited the default
   `align-content: stretch`, so a card with fewer rows than its neighbour
   absorbed the leftover row height into its own gaps: side by side, three
   cards put their title, crest and record on three different baselines.
   A flex column keeps every row at its natural height and stacks from the
   top, so the rows line up across the row no matter how many each card has. */
.fl-lgcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: linear-gradient(180deg, #242424, #1d1d1d);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  color: #fff;
  transition: transform 0.16s ease, border-color 0.16s ease;
}
.fl-lgcard:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 163, 26, 0.55);
}

.fl-lgcard__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.fl-lgcard__name {
  font-weight: 700;
  font-size: 16px;
}

.fl-lgcard__team {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d9d9d9;
  font-size: 14px;
}

.fl-lgcard__record {
  margin-left: auto;
  color: #ffa31a;
  font-weight: 700;
}

.fl-lgcard__matchup {
  /* the footer strip sits on the card's bottom edge, so the divider rules
     line up across a row of cards of differing content length */
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 10px;
  color: #9a9a9a;
  font-size: 13px;
}
.fl-lgcard__matchup b {
  color: #fff;
  font-size: 15px;
}

.fl-vs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.fl-vs__card {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, #242424, #1d1d1d);
  display: grid;
  gap: 6px;
}
.fl-vs__card b {
  color: #fff;
  font-size: 14.5px;
}
.fl-vs__card span {
  color: #9a9a9a;
  font-size: 13px;
  line-height: 1.55;
}

/* ---------- create wizard ---------- */
.fl-wizard {
  display: grid;
  gap: 4px;
}

.fl-wizard__submit {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
}

.fl-step {
  display: inline-flex;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  background: rgba(255, 163, 26, 0.14);
  color: #ffa31a;
  font: 700 13px "Orbitron", sans-serif;
}

.fl-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.fl-form-grid.fl-form-grid--settings {
  align-items: end;
}

.fl-field {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: #cfcfcf;
}
.fl-field span {
  font-weight: 600;
}
.fl-field.fl-field--submit {
  align-self: end;
}
.fl-field.fl-field--wide {
  grid-column: 1/-1;
}

.fl-formats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.fl-format {
  display: block;
  cursor: pointer;
}
.fl-format input {
  position: absolute;
  opacity: 0;
}
.fl-format .fl-format__body {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #181818;
  display: grid;
  gap: 6px;
  height: 100%;
}
.fl-format .fl-format__body b {
  font-size: 15px;
}
.fl-format .fl-format__body span {
  color: #9a9a9a;
  font-size: 13px;
  line-height: 1.5;
}
.fl-format input:checked + .fl-format__body {
  border-color: #ffa31a;
  box-shadow: 0 0 0 3px rgba(255, 163, 26, 0.18);
}
.fl-format input:checked + .fl-format__body b {
  color: #ffa31a;
}

.fl-advanced {
  margin-top: 14px;
}
.fl-advanced summary {
  color: #ffa31a;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}

.fl-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 12px;
}
.fl-cats h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #9a9a9a;
  margin-bottom: 8px;
}

.fl-cats__group {
  display: block;
}

.fl-cat {
  display: inline-flex;
  align-items: center;
  margin: 0 6px 8px 0;
  cursor: pointer;
}
.fl-cat input {
  position: absolute;
  opacity: 0;
}
.fl-cat span {
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #bbb;
}
.fl-cat input:checked + span {
  background: rgba(255, 163, 26, 0.13);
  border-color: rgba(255, 163, 26, 0.6);
  color: #ffa31a;
  font-weight: 600;
}

/* ---------- key-value blocks (settings/join) ---------- */
.fl-kv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.fl-kv > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  padding: 10px 12px;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  font-size: 13.5px;
}
.fl-kv > div span {
  color: #9a9a9a;
}
.fl-kv > div b {
  color: #fff;
  text-align: right;
}
.fl-kv.fl-kv--tight > div {
  padding: 7px 10px;
  font-size: 12.5px;
}

.fl-catchips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fl-catchip {
  padding: 6px 12px;
  border-radius: 999px;
  font: 600 12.5px "IBM Plex Mono", monospace;
  background: rgba(255, 163, 26, 0.1);
  border: 1px solid rgba(255, 163, 26, 0.4);
  color: #ffa31a;
}
.fl-catchip.fl-catchip--goalie {
  background: rgba(125, 211, 252, 0.08);
  border-color: rgba(125, 211, 252, 0.4);
  color: #7dd3fc;
}

/* ---------- league home (feed + rail) ---------- */
.fl-home {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: start;
}

/* A grid track's automatic minimum is its item's min-content, and the feed
   composer's text input carries a 221px intrinsic minimum of its own. Added
   to the two buttons, the gaps and the card padding that came to 392px, so
   the 1fr track refused to fit a 375px phone and pushed the whole document
   sideways -- the page scrolled horizontally, not just the composer. Letting
   the track take the width it is given is enough: the input's own flex
   sizing then shrinks it, and nothing is clipped. */
.fl-home__feed, .fl-home__rail {
  min-width: 0;
}

.fl-home__rail {
  position: sticky;
  top: 80px;
}

.fl-feed {
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

.fl-feed__stream {
  flex: 1;
  overflow-y: auto;
  max-height: 62vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 6px;
}

.fl-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13.5px;
}

.fl-msg__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.fl-msg__author {
  font-weight: 700;
  font-size: 12.5px;
  color: #ffa31a;
}

.fl-msg__text {
  color: #e6e6e6;
  overflow-wrap: break-word;
}

/* B5: GIFs in chat -- src only ever comes from a server-validated payload */
.fl-gif {
  display: block;
  max-height: 240px;
  max-width: 100%;
  border-radius: 10px;
  margin-top: 4px;
}

.fl-msg__time {
  margin-left: auto;
  color: #6f6f6f;
  font-size: 11px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.fl-msg--system {
  background: rgba(255, 163, 26, 0.05);
  border-color: rgba(255, 163, 26, 0.14);
  align-items: center;
}
.fl-msg--system .fl-msg__text {
  color: #d9d9d9;
}

.fl-msg__badge {
  font: 700 9.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 163, 26, 0.14);
  color: #ffa31a;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.fl-msg__badge-ico {
  width: 10px;
  height: 10px;
  flex: none;
}

.fl-msg--trade .fl-msg__badge, .fl-msg--trade_offer .fl-msg__badge,
.fl-msg--block .fl-msg__badge {
  background: rgba(167, 139, 250, 0.16);
  color: #a78bfa;
}

.fl-msg--block.is-removed {
  opacity: 0.55;
}

/* A7: trade-block feed card -- player id + note, mirrors .fl-tradep */
.fl-blockcard {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* ---------- roster-move feed cards (trades, waivers, adds, drops) ----------
   Same visual language as .fl-blockcard above: a headshot, the club crest
   and the position, so a trade reads as a trade rather than a sentence. */
.fl-pchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px 9px 4px 4px;
  border-radius: 999px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.07);
  cursor: pointer;
  max-width: 100%;
}
.fl-pchip:hover {
  border-color: rgba(255, 163, 26, 0.4);
}
.fl-pchip:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.fl-pchip .fl-headshot--xs {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.fl-pchip .fl-headshot--blank {
  background: #2a2a2a;
}
.fl-pchip .fl-nhl {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 3px;
}

.fl-pchip__id {
  display: grid;
  line-height: 1.2;
  min-width: 0;
}

.fl-pchip__name {
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fl-pchip__meta {
  font-size: 10.5px;
  color: #9a9a9a;
}

.fl-pchip--pick {
  padding: 5px 10px;
  color: #d8d8d8;
  font-size: 12px;
  font-weight: 600;
  cursor: default;
}
.fl-pchip--pick:hover {
  border-color: rgba(255, 255, 255, 0.07);
}

.fl-dealcard {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 8px;
}
@media (max-width: 560px) {
  .fl-dealcard {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.fl-dealcard__side {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
}

.fl-dealcard__team {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.fl-dealcard__gets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fl-dealcard__lbl {
  font: 700 9.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-right: 2px;
}

.fl-dealcard__none {
  color: #666;
  font-size: 12px;
  font-style: italic;
}

.fl-dealcard__swap {
  align-self: center;
  color: #ffa31a;
  font-size: 18px;
  line-height: 1;
}
@media (max-width: 560px) {
  .fl-dealcard__swap {
    justify-self: center;
    transform: rotate(90deg);
  }
}

.fl-movecard {
  display: grid;
  gap: 7px;
  margin-top: 6px;
}

.fl-movecard__team {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.fl-movecard__got, .fl-movecard__lost {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.fl-movecard__lost {
  opacity: 0.72;
}

.fl-movecard__lbl {
  font: 700 9.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.fl-blockcard__id {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.fl-blockcard__name {
  font-weight: 600;
  font-size: 13.5px;
  color: #fff;
}

.fl-blockcard__meta {
  color: #9a9a9a;
  font-size: 11.5px;
}
.fl-blockcard__meta .fl-nhl {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: -2px;
}

.fl-blockcard__note {
  color: #9a9a9a;
  font-size: 12.5px;
  font-style: italic;
}

.fl-msg__interest {
  margin-top: 6px;
}

.fl-block__edit {
  display: inline-block;
}
.fl-block__edit summary {
  list-style: none;
  cursor: pointer;
}
.fl-block__edit summary::-webkit-details-marker {
  display: none;
}
.fl-block__edit[open] .fl-inlineform {
  margin-top: 6px;
}

.fl-msg--waiver .fl-msg__badge, .fl-msg--add .fl-msg__badge {
  background: rgba(52, 211, 153, 0.14);
  color: #34d399;
}

.fl-msg--drop .fl-msg__badge {
  background: rgba(248, 113, 113, 0.13);
  color: #f87171;
}

/* A6: commissioner-action cards get a shield mark on the badge and name
   the acting commissioner's team (or "Commissioner") next to it. The
   shield is an inline SVG (.fl-msg__badge-ico) rendered by the template
   and by fhlFeed.js buildMsg, not CSS-generated content. */
.fl-msg__actor {
  font-weight: 700;
  font-size: 12.5px;
  color: #ffa31a;
  flex: 0 0 auto;
}

.fl-feed__composer {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.fl-feed__composer .fl-input {
  flex: 1;
}

.fl-composer__hint {
  color: #9a9a9a;
  font-size: 11px;
  margin: 4px 0 0;
}

.fl-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.9);
  animation: fl-pulse 2s infinite;
}

@keyframes fl-pulse {
  50% {
    opacity: 0.35;
  }
}
.fl-minis {
  display: grid;
  gap: 8px;
}

.fl-mini {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #ddd;
  font-size: 13px;
}
.fl-mini:hover {
  border-color: rgba(255, 163, 26, 0.5);
}
.fl-mini.is-current {
  border-color: #ffa31a;
}

.fl-mini__team {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
}
.fl-mini__team.is-leading {
  color: #ffa31a;
}

.fl-mini__score {
  font: 700 13px "Orbitron", sans-serif;
  color: #fff;
}

.fl-standings-mini {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.fl-standings-mini li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: #ddd;
  padding: 6px 8px;
  border-radius: 8px;
}
.fl-standings-mini li b {
  margin-left: auto;
  color: #fff;
}
.fl-standings-mini li.is-me {
  background: rgba(255, 163, 26, 0.08);
}
.fl-standings-mini li.is-eliminated {
  opacity: 0.6;
}

.fl-standings-mini__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fl-rank {
  font: 700 11px "Orbitron", sans-serif;
  color: #9a9a9a;
  width: 22px;
  flex: 0 0 auto;
  text-align: center;
}

.fl-txns-mini {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.fl-txns-mini li {
  font-size: 12.5px;
  color: #cfcfcf;
  line-height: 1.45;
}

.fl-txn-kind {
  display: inline-block;
  font: 700 9.5px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 5px;
  background: #262626;
  color: #9a9a9a;
  margin-right: 4px;
}
.fl-txn-kind.fl-txn-kind--trade {
  color: #a78bfa;
}
.fl-txn-kind.fl-txn-kind--add, .fl-txn-kind.fl-txn-kind--waiver {
  color: #34d399;
}
.fl-txn-kind.fl-txn-kind--drop {
  color: #f87171;
}
.fl-txn-kind.fl-txn-kind--draft {
  color: #ffa31a;
}

/* ---------- roster ---------- */
.fl-roster__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.fl-roster__team {
  display: flex;
  align-items: center;
  gap: 13px;
}

.fl-roster__name {
  font: 700 20px "Poppins", sans-serif;
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.fl-roster__sub {
  color: #9a9a9a;
  font-size: 13px;
}

.fl-rename {
  position: relative;
}
.fl-rename summary {
  list-style: none;
  cursor: pointer;
  color: #9a9a9a;
  padding: 4px 8px;
}
.fl-rename summary:hover {
  color: #ffa31a;
}
.fl-rename .fl-rename__form {
  position: absolute;
  z-index: 30;
  top: 100%;
  left: 0;
  margin-top: 6px;
  display: flex;
  gap: 6px;
  padding: 10px;
  background: #222;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  flex-wrap: wrap;
  max-width: 340px;
}
.fl-rename .fl-rename__form .fl-input {
  width: 180px;
}
.fl-rename .fl-rename__form .fl-input--xs {
  width: 60px;
}
.fl-rename .fl-rename__logo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #9a9a9a;
  width: 100%;
}
.fl-rename .fl-rename__logo input[type=file] {
  font-size: 11.5px;
  color: #ccc;
  max-width: 240px;
}
.fl-rename .fl-rename__remove {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #9a9a9a;
  cursor: pointer;
}
.fl-rename .fl-rename__remove input {
  accent-color: #ffa31a;
}

.fl-roster__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fl-datenav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fl-datenav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
}
.fl-datenav__btn:hover {
  border-color: #ffa31a;
  color: #ffa31a;
}
.fl-datenav__btn.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.fl-datenav__date {
  font: 600 14px "Poppins", sans-serif;
  min-width: 150px;
  text-align: center;
}
.fl-datenav__date.is-today {
  color: #ffa31a;
}

.fl-locknote {
  color: #7dd3fc;
  font-size: 13px;
  margin: 0 0 12px;
}

/* ---------- Autopilot (opt-in auto lineups) ----------
   Lives inline in .fl-roster__nav now (moved up out of the full-width card
   it used to be); the explanation that used to sit here as a paragraph is
   an infodot tooltip instead, see fl-infodot/.fl-infopop. */
.fl-autopilot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.fl-autopilot .fl-error {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  margin: 4px 0 0;
  width: max-content;
  max-width: 220px;
}

.fl-autopilot__ran {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #ffa31a;
  font-size: 13px;
  margin: 0 0 12px;
}
.fl-autopilot__ran svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* A real switch: the state has to read at a glance, because this one runs
   without the manager watching. */
.fl-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}
.fl-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.fl-switch__track {
  position: relative;
  width: 40px;
  height: 22px;
  flex: none;
  border-radius: 999px;
  background: #2b2b2b;
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: background 0.15s, border-color 0.15s;
}

.fl-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #8a8a8a;
  transition: transform 0.15s, background 0.15s;
}

.fl-switch__text {
  font: 600 13.5px "Poppins", sans-serif;
}

.fl-switch input:checked + .fl-switch__track {
  background: rgba(255, 163, 26, 0.3);
  border-color: rgba(255, 163, 26, 0.55);
}
.fl-switch input:checked + .fl-switch__track .fl-switch__knob {
  transform: translateX(18px);
  background: #ffa31a;
}

.fl-switch input:focus-visible + .fl-switch__track {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

.fl-switch input:disabled + .fl-switch__track {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .fl-switch__track, .fl-switch__knob {
    transition: none;
  }
}
.fl-hint {
  color: #ffa31a;
  font-size: 13px;
  margin: 0 0 12px;
}
.fl-hint b {
  font-weight: 700;
}

/* .fl-champs/.fl-champ__* (full-size banners hung inside the hero) were
   superseded by the compact rafter pennant strip (.fl-rafter/.fl-pennant*,
   see the hero pennant strip section below) — only the two rules other
   pages still use survive here. */
.fl-champ__file {
  font-size: 11px;
  color: #9a9a9a;
  display: grid;
  gap: 3px;
}

.fl-error {
  color: #f87171;
  font-size: 13px;
  margin: 0 0 12px;
}

/* commish → championship banner manager */
.fl-banneradmin {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.fl-banneradmin__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 11px;
}

.fl-banneradmin__thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #241d0e, #171717);
  border: 1px solid rgba(255, 163, 26, 0.4);
  color: #ffa31a;
  overflow: hidden;
}
.fl-banneradmin__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fl-banneradmin__thumb svg {
  width: 22px;
  height: 22px;
}

.fl-banneradmin__meta {
  display: grid;
  gap: 1px;
  margin-right: auto;
  min-width: 0;
}
.fl-banneradmin__meta b {
  font-size: 13.5px;
  color: #fff;
}

.fl-lineup {
  padding: 12px 14px;
}

.fl-lineup__rows {
  display: grid;
  gap: 5px;
}

/* Bench/IR spot-count chip: sits after the card title inside .fl-card__head
   (already flex-wrap: wrap), so it wraps under the title on narrow phones. */
.fl-card__count {
  font: 700 12px "Orbitron", sans-serif;
  letter-spacing: 0.02em;
  color: #9a9a9a;
  background: #232323;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 2px 9px;
}
.fl-card__count.fl-card__count--full {
  color: #ffa31a;
  border-color: rgba(255, 163, 26, 0.4);
}
.fl-card__count.fl-card__count--over {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
}

.fl-prow {
  display: grid;
  align-items: center;
  gap: 12px;
  grid-template-columns: 44px minmax(200px, 1.4fr) minmax(120px, 1fr) 74px minmax(120px, 0.8fr) auto;
  padding: 8px 10px;
  border-radius: 11px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
}
.fl-prow.fl-prow--empty {
  opacity: 0.6;
  background: transparent;
  border-style: dashed;
}
.fl-prow.is-moving {
  border-color: #ffa31a;
  box-shadow: 0 0 0 2px rgba(255, 163, 26, 0.25);
}
.fl-prow.is-target {
  border-color: rgba(52, 211, 153, 0.7);
  cursor: pointer;
}
.fl-prow.is-target:hover {
  background: rgba(52, 211, 153, 0.08);
}

.fl-prow__empty {
  color: #777;
  font-size: 12.5px;
  grid-column: 2/-1;
}

.fl-slot {
  font: 700 11px "Orbitron", sans-serif;
  color: #bbb;
  text-align: center;
  padding: 6px 0;
  border-radius: 8px;
  background: #262626;
}
.fl-slot.fl-slot--G {
  color: #7dd3fc;
}
.fl-slot.fl-slot--BN {
  color: #8a8a8a;
}
.fl-slot.fl-slot--IR {
  color: #f87171;
}
.fl-slot.fl-slot--UTIL {
  color: #ffa31a;
}

.fl-prow__player {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fl-prow__id {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.fl-prow__name {
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-prow__meta {
  color: #9a9a9a;
  font-size: 11.5px;
}
.fl-prow__meta b {
  color: #ddd;
}

.fl-prow__off {
  color: #666;
}

.fl-prow__line {
  color: #9a9a9a;
  font-size: 12px;
}
.fl-prow__line.is-played {
  color: #34d399;
  font-weight: 600;
}

.fl-prow__gw {
  color: #9a9a9a;
  font-size: 11.5px;
  text-align: center;
}

.fl-prow__season {
  color: #bdbdbd;
  font-size: 12px;
}
.fl-prow__season i {
  color: #6f6f6f;
  font-style: normal;
}

.fl-prow__move {
  padding: 6px 12px;
  border-radius: 8px;
  background: #181818;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #ffa31a;
  font: 600 12px "Poppins", sans-serif;
}
.fl-prow__move:hover {
  border-color: #ffa31a;
}

/* column headers — same grid template as .fl-prow so labels align to cells */
.fl-prowhead {
  display: grid;
  align-items: center;
  gap: 12px;
  grid-template-columns: 44px minmax(200px, 1.4fr) minmax(120px, 1fr) 74px minmax(120px, 0.8fr) auto;
  padding: 2px 10px 6px;
  margin-bottom: 1px;
  font: 700 10px "Poppins", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7a7a7a;
}
.fl-prowhead span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-prowhead .fl-prowhead__slot, .fl-prowhead .fl-prowhead__c {
  text-align: center;
}

.fl-sitstart {
  border-color: rgba(255, 163, 26, 0.35);
  padding: 14px 18px;
}

.fl-sitstart__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.fl-sitstart__list li {
  font-size: 13px;
  color: #cfcfcf;
  line-height: 1.5;
}
.fl-sitstart__list li b {
  color: #ffa31a;
}

/* ---------- matchup ---------- */
.fl-matchup__banner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 22px 24px;
}

.fl-matchup__side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #fff;
  text-align: center;
}
.fl-matchup__side b {
  font-size: 16px;
}
.fl-matchup__side:hover b {
  color: #ffa31a;
}

.fl-matchup__record {
  color: #9a9a9a;
  font-size: 12.5px;
}

.fl-matchup__score {
  text-align: center;
  display: grid;
  gap: 6px;
}

.fl-matchup__nums {
  font: 800 44px "Orbitron", sans-serif;
  color: #fff;
}
.fl-matchup__nums i {
  color: #555;
  font-style: normal;
  padding: 0 8px;
}
.fl-matchup__nums.is-left {
  color: #ffa31a;
}
.fl-matchup__nums.is-left i, .fl-matchup__nums.is-left {
  text-shadow: none;
}

.fl-matchup__nums.is-left {
  color: #fff;
}
.fl-matchup__nums.is-left::first-line {
  color: inherit;
}

.fl-matchup__status {
  color: #9a9a9a;
  font-size: 12.5px;
}

.fl-final {
  color: #34d399;
}

.fl-live {
  color: #ffa31a;
  animation: fl-pulse 2s infinite;
}

/* Players page on a phone: the filter block was 252px of controls sized for
   a mouse, stacked above a 597px week planner. Between them the list this
   page exists for started below the fold. Nothing is removed -- the controls
   are just sized for a thumb rather than for a desktop row.

   The search box keeps 16px deliberately: iOS zooms the whole page when a
   text field under 16px takes focus, and the zoom does not come back. The
   selects and buttons have no such rule, so they shrink. */
@media (max-width: 560px) {
  .fl-poolfilters {
    gap: 6px;
  }
  .fl-poolfilters .fl-input {
    min-height: 34px;
    height: 34px;
    padding: 0 9px;
  }
  .fl-poolfilters input.fl-input {
    font-size: 16px;
  }
  .fl-poolfilters select.fl-input {
    font-size: 13px;
  }
  .fl-poolfilters .fl-btn {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
  }
  .fl-poolfilters .fl-seg {
    padding: 2px;
    gap: 2px;
  }
  .fl-poolfilters .fl-seg label,
  .fl-poolfilters .fl-seg__btn {
    min-height: 30px;
    padding: 0 8px;
    font-size: 12px;
  }
  .fl-plannercard .fl-planner {
    gap: 6px;
  }
}
/* `pan-y` hands the browser the vertical axis and keeps the horizontal one
   for the swipe. Without it the first few pixels of a sideways drag can be
   eaten by a scroll attempt before the handler claims the gesture, which is
   what makes a hand-rolled swipe feel sticky. Touch devices only -- it is
   inert with a mouse. */
@media (hover: none) and (pointer: coarse) {
  .fl-matchup {
    touch-action: pan-y;
  }
}
/* Matchup carousel: arrows plus one dot per matchup in the week. Sits
   directly under the hero so the score stays the first thing read. Tap
   targets are 44px even though the dot itself is 8px, because a dot you
   cannot hit is decoration. */
.fl-mnav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: -4px 0 14px;
}

.fl-mnav__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #ffa31a;
  text-decoration: none;
  font: 700 22px/1 "Poppins", sans-serif;
}
.fl-mnav__arrow:hover {
  background: rgba(255, 163, 26, 0.12);
}
.fl-mnav__arrow.is-off {
  color: #3a3a3a;
  pointer-events: none;
}

.fl-mnav__dots {
  display: flex;
  align-items: center;
  gap: 2px;
}

.fl-mnav__dot {
  display: inline-flex;
  width: 26px;
  height: 44px;
  position: relative;
}
.fl-mnav__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4b5563;
  transition: background 0.15s ease, width 0.15s ease;
}
.fl-mnav__dot:hover::before {
  background: #6b7280;
}
.fl-mnav__dot.is-current::before {
  background: #ffa31a;
  width: 20px;
  border-radius: 4px;
}

/* League bar: which league am I in, and the way out of it. One markup, two
   readings -- on desktop the back link is labelled, because a bare chevron in
   a wide page is a guess; on a phone it collapses to the chevron alone, which
   is the convention there and what the app does. */
/* Phones only. On desktop the back control lives at the head of the tab row
   (.fl-tabs__back) instead, so the hero stays the first thing on the page: a
   full-width strip above it pushed the score down for a control used once a
   session. */
.fl-leaguebar {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 4px 6px;
  border-radius: 12px;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.fl-tabs__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin-right: 4px;
  padding: 5px 9px;
  border-radius: 8px;
  color: #9a9a9a;
  text-decoration: none;
  font: 700 12px "Poppins", sans-serif;
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.fl-tabs__back:hover {
  color: #ffa31a;
  border-color: rgba(255, 163, 26, 0.45);
}

.fl-leaguebar__back, .fl-leaguebar__cog {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 9px;
  color: #ffa31a;
  text-decoration: none;
  flex: 0 0 auto;
}
.fl-leaguebar__back:hover, .fl-leaguebar__cog:hover {
  background: rgba(255, 163, 26, 0.12);
}

.fl-leaguebar__cog {
  color: #9a9a9a;
  margin-left: auto;
}
.fl-leaguebar__cog:hover {
  color: #ffa31a;
}

.fl-leaguebar__backtext {
  font: 700 12.5px "Poppins", sans-serif;
}

.fl-leaguebar__id {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.fl-leaguebar__crest {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: rgba(255, 163, 26, 0.14);
  border: 1px solid rgba(255, 163, 26, 0.45);
  color: #ffa31a;
  font: 800 10.5px "Orbitron", sans-serif;
  letter-spacing: 0.02em;
}

.fl-leaguebar__name {
  font: 700 14.5px "Poppins", sans-serif;
  color: #f0f0f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 560px) {
  .fl-leaguebar {
    display: flex;
  }
  .fl-tabs__back {
    display: none;
  }
  /* chevron only, and the name centres between the two controls the way the
     app does it */
  .fl-leaguebar__backtext {
    display: none;
  }
  .fl-leaguebar__back, .fl-leaguebar__cog {
    padding: 0 8px;
  }
  .fl-leaguebar__id {
    flex: 1 1 auto;
    justify-content: center;
  }
  .fl-leaguebar__cog {
    margin-left: 0;
  }
  .fl-leaguebar__name {
    font-size: 13.5px;
  }
}
/* Week summary above the lineup: games played / scheduled, and the projected
   week total in a points league. Mirrors the row beneath it -- home, label,
   away -- so the eye reads it as one more line of the same table. */
.fl-wksum {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 2px 0 10px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #1b1b1b;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.fl-wksum__side {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.fl-wksum__side b {
  font: 700 15px "Orbitron", sans-serif;
  color: #f0f0f0;
}
.fl-wksum__side b i {
  font-style: normal;
  font-size: 11.5px;
  color: #9a9a9a;
}
.fl-wksum__side em {
  font-style: normal;
  font: 700 11px "IBM Plex Mono", monospace;
  color: #ffa31a;
}
.fl-wksum__side--away {
  align-items: flex-end;
  text-align: right;
}

.fl-wksum__label {
  font: 700 10px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
  text-align: center;
}

@media (max-width: 560px) {
  .fl-wksum {
    gap: 6px;
    padding: 6px 8px;
  }
  .fl-wksum__side b {
    font-size: 13.5px;
  }
  .fl-wksum__label {
    font-size: 9px;
    letter-spacing: 0.04em;
  }
}
/* Trade finder: a picker and chips, not a checkbox per rostered player. A
   20-man roster meant 20 boxes to read before the question could be asked,
   and the two that mattered were lost among them. */
.fl-tfpick {
  display: grid;
  gap: 7px;
  margin-bottom: 10px;
}

.fl-tfpick__label {
  font: 700 10px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.fl-tfchips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 34px;
  align-items: center;
  padding: 5px;
  border-radius: 10px;
  background: #171717;
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

.fl-tfchips__empty {
  color: #9a9a9a;
  font-size: 12px;
  padding: 0 4px;
}

.fl-tfchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 10px;
  border-radius: 999px;
  background: rgba(255, 163, 26, 0.12);
  border: 1px solid rgba(255, 163, 26, 0.4);
}
.fl-tfchip b {
  font: 700 12.5px "Poppins", sans-serif;
  color: #f2f2f2;
}
.fl-tfchip i {
  font-style: normal;
  font: 600 10.5px "IBM Plex Mono", monospace;
  color: #9a9a9a;
}
.fl-tfchip .fl-tfchip__last {
  display: none;
}
.fl-tfchip {
  /* The checkbox rows this replaced carried a headshot; keeping it means the
     chip still reads as a player rather than as a word. */
}
.fl-tfchip .fl-headshot--xs {
  width: 20px;
  height: 20px;
  margin-left: -4px;
}

.fl-tfchip__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  color: #d0d0d0;
  font: 700 14px/1 "Poppins", sans-serif;
  cursor: pointer;
  padding: 0;
}
.fl-tfchip__x:hover {
  background: rgba(248, 113, 113, 0.25);
  color: #fff;
}

.fl-finder__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.fl-finder__controls .fl-tfpick__label {
  margin-left: 2px;
}

@media (max-width: 560px) {
  .fl-finder__controls {
    gap: 6px;
  }
  .fl-finder__controls .fl-input {
    flex: 1 1 100px;
    min-width: 0;
  }
  .fl-finder__controls .fl-btn {
    flex: 1 1 100%;
  }
  /* A full-name chip is ~193px inside a 306px card, so three picks cost
     three rows. Surname plus slot is ~120px and two sit side by side. */
  .fl-tfchip {
    padding: 4px 5px 4px 8px;
    gap: 5px;
  }
  .fl-tfchip .fl-tfchip__full, .fl-tfchip .fl-tfchip__nhl {
    display: none;
  }
  .fl-tfchip .fl-tfchip__last {
    display: inline;
  }
  .fl-tfchip {
    /* The headshot is 20px plus a gap, which is the difference between two
       chips to a row and one: surname + slot + close is ~120px and a pair
       fits the 306px card, ~160px with the photo and it does not. Desktop
       keeps it. */
  }
  .fl-tfchip .fl-headshot--xs {
    display: none;
  }
}
/* Swiping the header swaps the matchup header instantly and then lets the
   page navigate underneath it. For the moment in between, the body belongs
   to the PREVIOUS matchup while the header already shows the next one, so
   it is dimmed: without this the old lineup reads as the new matchup's,
   which is worse than reading as loading. Pointer-events go too, so a tap
   cannot act on a row that is about to be replaced. */
.fl-matchup.is-swapping {
  opacity: 0.32;
  pointer-events: none;
  transition: opacity 0.18s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .fl-matchup.is-swapping {
    transition: none;
  }
}
.fl-cats-table {
  display: grid;
  gap: 6px;
}

/* Scoped to its table on purpose. `.fl-catrow` is ALSO the trade analyzer's
   category row further down this file, a four-column
   `1fr 52px 52px 78px` grid. Same class, same specificity, declared later,
   so it won: the matchup's home value was handed a 539px column, the label
   and bars were crushed into 52px and pushed against the away value, and a
   78px column sat empty on the end. Scoping to the parent takes this to
   (0,2,0) and out of that fight. The two components should not share a name
   at all, but renaming the trade analyzer's reaches further than this fix. */
.fl-cats-table .fl-catrow {
  /* The bar is capped and the two values sit against it rather than against
     the card edges. At 90px/1fr/90px on a wide card the numbers ended up
     ~500px apart with the bar stranded between them, so nothing tied a value
     to its side of the comparison. */
  display: grid;
  grid-template-columns: 1fr minmax(0, 340px) 1fr;
  gap: 14px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: #1f1f1f;
  /* the trade analyzer rule also sets these two; neither belongs here */
  border: 0;
  font-size: 15px;
}
.fl-cats-table .fl-catrow.lead-home .fl-catrow__val--home {
  color: #ffa31a;
  font-weight: 700;
}
.fl-cats-table .fl-catrow.lead-away .fl-catrow__val--away {
  color: #ffa31a;
  font-weight: 700;
}

.fl-catrow__val {
  font: 600 15px "Poppins", sans-serif;
  color: #ddd;
  text-align: center;
}

/* Goalie starts, sitting as the last row of the table. Set apart with a rule
   above it because it is a requirement rather than a category you win: a side
   short of the minimum forfeits the goalie categories outright, so it is
   marked in red rather than given the amber leader treatment. */
.fl-cats-table .fl-catrow--gs {
  margin-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0 0 10px 10px;
}
.fl-cats-table .fl-catrow--gs .fl-catrow__label {
  color: #bdbdbd;
}
.fl-cats-table .fl-catrow--gs {
  /* These two are gauges, not shares, so each anchors to its own side. The
     base rule right-aligns the home bar (correct when the pair fills the
     track between them); left unchanged here, a half-full home gauge floated
     into the middle and read as the away side's. */
}
.fl-cats-table .fl-catrow--gs .fl-catrow__bar--home {
  margin-left: 0;
  margin-right: auto;
  border-radius: 4px;
}
.fl-cats-table .fl-catrow--gs .fl-catrow__bar--away {
  margin-left: auto;
  border-radius: 4px;
}
.fl-cats-table .fl-catrow--gs .fl-catrow__val.is-short {
  color: #f87171;
}
.fl-cats-table .fl-catrow--gs .fl-catrow__val.is-forfeit {
  color: #f87171;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* each value hugs the bar it belongs to */
.fl-cats-table .fl-catrow__val--home {
  text-align: right;
}

.fl-cats-table .fl-catrow__val--away {
  text-align: left;
}

.fl-catrow__mid {
  display: grid;
  gap: 5px;
}

.fl-catrow__label {
  text-align: center;
  font: 700 10.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  color: #9a9a9a;
}

.fl-catrow__bars {
  display: flex;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: #141414;
  gap: 2px;
}

.fl-catrow__bar {
  display: block;
  height: 100%;
}
.fl-catrow__bar.fl-catrow__bar--home {
  background: #ffa31a;
  border-radius: 4px 0 0 4px;
  margin-left: auto;
}
.fl-catrow__bar.fl-catrow__bar--away {
  background: #4b5563;
  border-radius: 0 4px 4px 0;
}

/* ---------- scoreboard / matchups week nav ---------- */
.fl-weeknav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
}

.fl-weeknav__label {
  text-align: center;
  font: 700 17px "Poppins", sans-serif;
}
.fl-weeknav__label i {
  display: block;
  color: #9a9a9a;
  font: 400 12px "Poppins", sans-serif;
  margin-top: 2px;
}

/* ---------- matchups grid (Sleeper-style matchup cards) ---------- */
.fl-mgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.fl-mcard {
  display: grid;
  gap: 8px;
  color: #fff;
  margin-bottom: 0;
}
.fl-mcard:hover {
  border-color: rgba(255, 163, 26, 0.55);
}
.fl-mcard.fl-mcard--mine {
  border-color: #ffa31a;
  box-shadow: 0 0 0 1px rgba(255, 163, 26, 0.3);
}
.fl-mcard.fl-mcard--bye {
  opacity: 0.85;
}

.fl-mcard__chips {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.fl-mcard__side {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fl-mcard__side.is-leading .fl-mcard__pts {
  color: #ffa31a;
}

.fl-mcard__id {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.fl-mcard__id span {
  display: block;
  min-width: 0;
}
.fl-mcard__id b {
  display: block;
  font: 700 14px "Poppins", sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-mcard__id span span {
  font-size: 11px;
  color: #9a9a9a;
}

.fl-mcard__pts {
  font: 700 20px "Orbitron", sans-serif;
  color: #ddd;
  border-radius: 6px;
  flex: 0 0 auto;
}

.fl-mcard__pts.is-bump {
  animation: fl-bump 1.1s ease;
}

.fl-mcard__today {
  display: block;
  margin-top: -4px;
  color: #9a9a9a;
  font-size: 11px;
}

.fl-mcard__wp {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0;
}

.fl-mcard__wp .fl-winprob__bar {
  flex: 1;
  height: 7px;
}

.fl-mcard__wp .fl-note-inline {
  flex: 0 0 auto;
  font-weight: 700;
}

.fl-mcard__estlabel {
  display: block;
  text-align: center;
  margin-top: -6px;
}

.fl-mcard__ties {
  display: block;
  text-align: center;
}

@media (max-width: 640px) {
  .fl-mgrid {
    grid-template-columns: 1fr;
  }
}
/* ---------- tables ---------- */
.fl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.fl-table th {
  text-align: center;
  padding: 9px 8px;
  color: #9a9a9a;
  font: 700 11px "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.fl-table td {
  text-align: center;
  padding: 9px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #ddd;
  font-variant-numeric: tabular-nums;
}
.fl-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.015);
}
.fl-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}
.fl-table tr.is-me td {
  background: rgba(255, 163, 26, 0.06);
}
.fl-table tr.is-eliminated td {
  opacity: 0.6;
}
.fl-table .fl-sort {
  color: inherit;
  text-decoration: none;
}
.fl-table .fl-sort:hover {
  color: #ffa31a;
}
.fl-table .fl-sort.is-active {
  color: #ffa31a;
}
.fl-table .fl-table__rankcol {
  width: 46px;
  color: #9a9a9a;
  font: 700 12px "Orbitron", sans-serif;
}
.fl-table .fl-table__teamcol, .fl-table .fl-table__playercol {
  text-align: left;
}
.fl-table .fl-table__actioncol {
  text-align: right;
}

.fl-table__cutline td {
  padding: 3px 8px;
  background: transparent !important;
  border-bottom: 1px dashed rgba(255, 163, 26, 0.5);
}
.fl-table__cutline td span {
  font: 700 9.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.12em;
  color: #ffa31a;
}

.fl-teamcell {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-weight: 600;
}
.fl-teamcell:hover .fl-teamcell__name {
  color: #ffa31a;
}

.fl-playercell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.fl-playercell span {
  display: grid;
  gap: 1px;
}
.fl-playercell b {
  color: #fff;
  font-size: 13.5px;
}
.fl-playercell i {
  color: #9a9a9a;
  font-style: normal;
  font-size: 11.5px;
}

.fl-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 14px;
  color: #9a9a9a;
  font-size: 13px;
}

/* ---------- players pool ---------- */
.fl-poolfilters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fl-poolfilters .fl-input[name=q], .fl-poolfilters .fl-input[type=text] {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}

.fl-seg {
  display: inline-flex;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.fl-seg__btn {
  padding: 7px 13px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #bbb;
  font: 600 12.5px "Poppins", sans-serif;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.fl-seg__btn:hover {
  color: #fff;
}
.fl-seg__btn.is-active {
  background: #ffa31a;
  color: #131313;
}
.fl-seg__btn input[type=radio] {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}
.fl-seg__btn:focus-within {
  outline: 2px solid rgba(255, 163, 26, 0.55);
  outline-offset: 1px;
}

.fl-seg--sm .fl-seg__btn {
  padding: 5px 9px;
  font-size: 11.5px;
}

.fl-popmenu {
  position: relative;
  display: inline-block;
}
.fl-popmenu summary {
  list-style: none;
  display: inline-flex;
}
.fl-popmenu summary::-webkit-details-marker {
  display: none;
}
.fl-popmenu .fl-popmenu__panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 85;
  margin-top: 6px;
  width: 240px;
  padding: 13px;
  border-radius: 12px;
  background: #222;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  display: grid;
  gap: 10px;
  text-align: left;
  font-size: 12.5px;
  color: #ccc;
}
.fl-popmenu .fl-popmenu__panel label {
  display: grid;
  gap: 4px;
  font-weight: 600;
}
.fl-popmenu .fl-popmenu__panel p {
  margin: 0;
  line-height: 1.5;
}

.fl-popmenu__title {
  margin: 0 0 2px;
  font-size: 13px;
  color: #fff;
  line-height: 1.4;
}
.fl-popmenu__title b {
  color: #ffa31a;
}
.fl-popmenu__title i {
  font-style: normal;
}

.fl-faabhint {
  background: transparent;
  border: 0;
  padding: 0;
  margin: -6px 0 0;
  color: #ffa31a;
  font: 600 12px "Poppins", sans-serif;
  text-align: left;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: pointer;
}
.fl-faabhint:hover {
  color: #fff;
}
.fl-faabhint:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- info help dots + floating popover ---------- */
.fl-card__titlewrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.fl-infodot {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 163, 26, 0.5);
  background: rgba(255, 163, 26, 0.12);
  color: #ffa31a;
  font: italic 700 10px/1 "Poppins", sans-serif;
  cursor: help;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.fl-infodot:hover, .fl-infodot:focus-visible {
  background: rgba(255, 163, 26, 0.28);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 163, 26, 0.16);
}
.fl-field span .fl-infodot {
  margin-left: 5px;
}

.fl-infopop {
  position: fixed;
  z-index: 200;
  max-width: 264px;
  padding: 11px 13px;
  border-radius: 11px;
  background: #222;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  font-size: 12.5px;
  line-height: 1.5;
  color: #ccc;
  display: grid;
  gap: 4px;
  pointer-events: none;
}
.fl-infopop[hidden] {
  display: none;
}
.fl-infopop .fl-infopop__title {
  color: #ffa31a;
  font-weight: 700;
  font-size: 13px;
}

/* ---------- matchup points breakdown popover (fhlMatchup.js) ---------- */
.fl-breakdown {
  position: fixed;
  z-index: 200;
  width: 220px;
  max-width: calc(100vw - 24px);
  padding: 11px 13px;
  border-radius: 11px;
  background: #222;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  font-size: 12.5px;
  color: #ccc;
  display: grid;
  gap: 8px;
}
.fl-breakdown[hidden] {
  display: none;
}

.fl-breakdown__lines {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fl-breakdown__lines li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: baseline;
}
.fl-breakdown__lines li span:first-child {
  color: #eee;
}
.fl-breakdown__lines li span:nth-child(2) {
  color: #9a9a9a;
  font-size: 11px;
}
.fl-breakdown__lines li span:last-child {
  font: 700 12.5px "Poppins", sans-serif;
  color: #ddd;
  text-align: right;
}

.fl-breakdown__empty {
  margin: 0;
  color: #9a9a9a;
}

.fl-breakdown__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.fl-breakdown__total span {
  color: #9a9a9a;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.fl-breakdown__total b {
  color: #ffa31a;
  font: 700 14px "Poppins", sans-serif;
}

/* ---------- inline SVG charts (standings race, matchup race) ---------- */
.fl-race {
  display: grid;
  gap: 10px;
}

.fl-race__svg {
  width: 100%;
  height: auto;
  display: block;
}

.fl-race__grid {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}

.fl-race__lab {
  fill: #9a9a9a;
  font: 600 10px "IBM Plex Mono", monospace;
}

.fl-race__line {
  stroke-width: 2;
  opacity: 0.75;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.fl-race__line.is-mine {
  stroke: #ffa31a;
  stroke-width: 3;
  opacity: 1;
}
.fl-race__line.fl-race__line--away {
  stroke: #9a9a9a;
}

.fl-race__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
}

.fl-race__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9a9a9a;
  font: 600 11.5px "IBM Plex Mono", monospace;
}
.fl-race__key i {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}
.fl-race__key.is-mine {
  color: #ffa31a;
}

/* week planner (off-night streaming) */
.fl-planner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

.fl-planner__day {
  display: grid;
  gap: 4px;
  padding: 10px 10px 12px;
  border-radius: 11px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  align-content: start;
}
.fl-planner__day.is-off {
  border-color: rgba(255, 163, 26, 0.5);
  background: linear-gradient(180deg, #241d0e, #1d1d1d);
}

.fl-planner__dow {
  font: 700 12px "Poppins", sans-serif;
  color: #fff;
}
.fl-planner__dow i {
  color: #9a9a9a;
  font-style: normal;
  font-weight: 500;
}

.fl-planner__games {
  font: 700 13px "Orbitron", sans-serif;
  color: #ddd;
}

.fl-planner__off {
  font: 700 9px "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
  color: #ffa31a;
}

.fl-planner__mine {
  color: #9a9a9a;
  font-size: 11px;
}

.fl-planner__stream {
  color: #34d399;
  font-size: 11.5px;
  cursor: pointer;
}
.fl-planner__stream:hover {
  text-decoration: underline;
}

/* trade block */
.fl-block {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.fl-block__row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 12px;
  background: #1f1f1f;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.fl-block__note {
  color: #9a9a9a;
  font-size: 12.5px;
  font-style: italic;
  flex: 1 1 160px;
}

.fl-block__actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* playoff odds cell: mini bar + % */
.fl-odds {
  white-space: nowrap;
}
.fl-odds b {
  font-size: 12.5px;
  color: #ddd;
}
.fl-odds b.is-lock {
  color: #34d399;
}
.fl-odds b.is-out {
  color: #9a9a9a;
}

.fl-odds__bar {
  display: inline-block;
  vertical-align: middle;
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  margin-right: 7px;
  overflow: hidden;
}
.fl-odds__bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #ffa31a;
}
.fl-odds__bar i.is-lock {
  background: #34d399;
}
.fl-odds__bar i.is-out {
  background: rgba(255, 255, 255, 0.18);
}

/* thin in-cell bars behind PF / PA numbers */
.fl-cellbar {
  position: relative;
}
.fl-cellbar i {
  position: absolute;
  left: 13%;
  bottom: 5px;
  height: 3px;
  max-width: 74%;
  border-radius: 2px;
  background: rgba(255, 163, 26, 0.55);
  pointer-events: none;
}
.fl-cellbar.fl-cellbar--pa i {
  background: rgba(255, 255, 255, 0.22);
}

/* h2h matrix column heads: avatar + abbrev (touch has no title tooltips) */
.fl-h2h__colhead {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.fl-h2h__colhead i {
  font: 600 9.5px "IBM Plex Mono", monospace;
  color: #9a9a9a;
  font-style: normal;
}

/* draft-room error toast (replaces alert()) */
.fl-drafterr {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 8px);
  z-index: 220;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 13px;
  background: rgba(248, 113, 113, 0.14);
  color: #ffd2d2;
  border: 1px solid rgba(248, 113, 113, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fl-drafterr.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.fl-composer__err {
  color: #f87171;
  font-size: 12px;
  align-self: center;
}

.fl-claims__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.fl-claims__list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #1f1f1f;
  border-radius: 10px;
  font-size: 13px;
}
.fl-claims__list li b {
  color: #ffa31a;
}

/* ---------- trades ---------- */
.fl-tradecard {
  padding: 12px 14px;
  border-radius: 12px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.fl-tradecard p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
}
.fl-tradecard p i {
  color: #ffa31a;
  font-style: normal;
}

.fl-good {
  color: #34d399 !important;
}

.fl-bad {
  color: #f87171 !important;
}

.fl-tradecard__msg {
  display: block;
  color: #9a9a9a;
  font-size: 12.5px;
  margin-top: 6px;
  flex-basis: 100%;
  font-style: italic;
}

.fl-tradecard__actions {
  display: flex;
  gap: 8px;
}

/* An offer card carries a full deal card now, so it stacks instead of
   laying its parts out in one row (the base .fl-tradecard above is still a
   flex row, used by the history list). */
.fl-tradecard--offer {
  display: block;
}
.fl-tradecard--offer .fl-tradecard__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13.5px;
  margin-bottom: 10px;
}
.fl-tradecard--offer .fl-tradecard__msg {
  margin: 8px 0 0;
}
.fl-tradecard--offer .fl-tradecard__actions {
  margin-top: 12px;
}

.fl-tradecard__deal {
  flex: 1 1 320px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.fl-tradecard__swap {
  color: #ffa31a;
  font-size: 18px;
  align-self: center;
}

.fl-tradeside {
  flex: 1 1 0;
  min-width: 0;
}

.fl-tradeside__team {
  display: block;
  font: 600 11px "Poppins", sans-serif;
  color: #9a9a9a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.fl-tradeside__players {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.fl-tradeside__players .fl-tradeside__none {
  color: #777;
  font-style: italic;
  font-size: 13.5px;
}

.fl-tradep {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  border-radius: 9px;
  padding: 4px 6px;
  background: #191919;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.fl-tradep:hover {
  border-color: rgba(255, 163, 26, 0.5);
}
.fl-tradep:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 1px;
}
.fl-tradep .fl-headshot--xs {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: #262626;
}

.fl-tradep__id {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.fl-tradep__name {
  font-weight: 600;
  font-size: 13.5px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-tradep__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #9a9a9a;
}
.fl-tradep__meta .fl-nhl {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.fl-partnerpick select {
  min-width: 180px;
}

.fl-builder__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.fl-builder__col h3 {
  font-size: 13px;
  color: #9a9a9a;
  margin-bottom: 10px;
}
.fl-builder__col h3 .fl-builder__team {
  color: #ffa31a;
}

.fl-pickrow {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  color: #ddd;
}
.fl-pickrow input {
  accent-color: #ffa31a;
}
.fl-pickrow i {
  color: #9a9a9a;
  font-style: normal;
  font-size: 11.5px;
}
.fl-pickrow:hover {
  background: rgba(255, 255, 255, 0.03);
}

.fl-builder__footer {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.fl-builder__footer .fl-input {
  flex: 1;
}

/* draft-pick trading */
.fl-builder__picks {
  margin: 10px 0 4px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.fl-pickrow--pick {
  color: #eee;
}

.fl-pickchip {
  font: 700 9.5px "Orbitron", sans-serif;
  letter-spacing: 0.04em;
  color: #ffa31a;
  border: 1px solid rgba(255, 163, 26, 0.5);
  border-radius: 5px;
  padding: 2px 5px;
  flex: 0 0 auto;
}

.fl-pickgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fl-pickpill {
  font-size: 12.5px;
  color: #ddd;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  padding: 5px 12px;
}
.fl-pickpill.is-acquired {
  border-color: rgba(255, 163, 26, 0.5);
  color: #ffa31a;
}

.fl-tradehistory {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.fl-tradehistory li {
  font-size: 13px;
  color: #cfcfcf;
}

/* ---------- transactions ---------- */
.fl-txnlog {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fl-txnlog li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13.5px;
}

.fl-txnlog__detail {
  color: #e2e2e2;
}

.fl-txnlog__time {
  margin-left: auto;
  color: #6f6f6f;
  font-size: 12px;
  white-space: nowrap;
}

/* ---------- draft ---------- */
.fl-lobbyteams {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 14px 0;
}

.fl-lobbyteam {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  font-size: 13px;
}
.fl-lobbyteam i {
  color: #9a9a9a;
  font-style: normal;
}
.fl-lobbyteam.fl-lobbyteam--empty {
  border-style: dashed;
  color: #777;
}

.fl-lobbyactions, .fl-actionrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.fl-inlineform {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.fl-draft__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 20px;
}

/* The clock is the one thing a manager cannot afford to scroll away from,
   and the pool below it is long. Scoped to .fl-draft__topbar.fl-card for
   the same reason .fl-upnext.fl-card is: the card HUD rule far below sets
   `position: relative` on every card, same specificity and later in the
   file, so a bare `position: sticky` here was silently overruled.
   z-index sits UNDER the site nav's 60 -- that nav auto-hides on
   scroll-down (nav_scroll.js), which is exactly when this bar matters, so
   letting it win on the way back up would only cover the page header. */
.fl-draft__topbar.fl-card {
  position: sticky;
  top: 0;
  z-index: 55;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
@media (max-height: 560px) {
  .fl-draft__topbar.fl-card {
    position: relative;
    box-shadow: none;
  }
}

.fl-otc {
  display: grid;
  gap: 2px;
}

.fl-otc__label {
  font: 700 10px "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
  color: #9a9a9a;
  text-transform: uppercase;
}

.fl-otc__team {
  font-size: 18px;
  color: #fff;
}
.fl-otc__team.is-me {
  color: #ffa31a;
}

.fl-otc__pick {
  color: #9a9a9a;
  font-size: 12.5px;
}

.fl-clock {
  font: 800 34px "Orbitron", sans-serif;
  color: #fff;
  min-width: 84px;
  text-align: center;
}
.fl-clock.is-mine {
  color: #ffa31a;
}
.fl-clock.is-urgent {
  color: #f87171;
  animation: fl-pulse 1s infinite;
}

.fl-draft__progress {
  display: grid;
  gap: 3px;
  text-align: right;
  font-size: 13px;
  color: #9a9a9a;
}

.fl-draft__untilme {
  color: #ffa31a;
  font-weight: 700;
}

/* sticky warning shown while a team is missing picks and autodrafting --
   same amber-warning palette as .fl-flash__item--warning for consistency */
.fl-autodraft-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid rgba(255, 163, 26, 0.4);
  background: rgba(255, 163, 26, 0.08);
  color: #ffdfae;
  font-size: 13.5px;
}
.fl-autodraft-banner[hidden] {
  display: none;
}

.fl-autodraft-banner__text {
  font-weight: 600;
}

/* connection-health banner -- same shape/role as .fl-autodraft-banner above,
   but a distinct, non-amber palette: amber already signals active/selected
   here, so "reconnecting" borrows the neutral $fl-muted tone and a hard
   failure borrows the $fl-neg tone already used by .fl-flash__item--error. */
.fl-stale-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid rgba(154, 154, 154, 0.35);
  background: rgba(154, 154, 154, 0.09);
  color: #d8d8d8;
  font-size: 13.5px;
}
.fl-stale-banner[hidden] {
  display: none;
}
.fl-stale-banner.is-hardfail {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
  color: #ffd2d2;
}

.fl-stale-banner__text {
  font-weight: 600;
}

/* commissioner-paused banner -- same shape as .fl-autodraft-banner and
   .fl-stale-banner above, but the $fl-neg palette: a pause is a hard stop
   (nobody can act until the commissioner resumes), unlike autodraft (still
   running) or a stale connection (recovers on its own). */
.fl-paused-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
  color: #ffd2d2;
  font-size: 13.5px;
}
.fl-paused-banner[hidden] {
  display: none;
}

.fl-paused-banner__text {
  font-weight: 600;
}

/* per-manager reminder prefs: sound / tab-title flash / browser notification
   for the signed-in manager's own turn only. Each toggle is independently
   mutable and persisted in localStorage. */
.fl-alertprefs {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0 0;
  padding: 8px 14px;
  border-radius: 10px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 12.5px;
  color: #9a9a9a;
}

.fl-alertprefs__label {
  font: 700 10px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.fl-alertprefs__opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: #ddd;
}
.fl-alertprefs__opt input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: #ffa31a;
  cursor: pointer;
}
.fl-alertprefs__opt input[type=checkbox]:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

/* sliding on/off switch -- deliberately not a checkbox: handing your picks
   to the computer is a mode, not a preference, and it should read as one */
.fl-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  margin-left: auto;
  color: #ddd;
}
.fl-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.fl-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 19px;
  border-radius: 999px;
  background: #2c2c2c;
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.fl-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #8a8a8a;
  transition: transform 0.15s ease, background 0.15s ease;
}

.fl-switch__text {
  font-weight: 600;
}

.fl-switch input:checked + .fl-switch__track {
  background: rgba(255, 163, 26, 0.3);
  border-color: rgba(255, 163, 26, 0.65);
}
.fl-switch input:checked + .fl-switch__track .fl-switch__thumb {
  transform: translateX(15px);
  background: #ffa31a;
}

.fl-switch input:checked ~ .fl-switch__text {
  color: #ffa31a;
}

.fl-switch input:focus-visible + .fl-switch__track {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .fl-switch__track, .fl-switch__thumb {
    transition: none;
  }
}
/* loading skeletons: pool + sidebar panels before the first successful
   poll. CSS-only shimmer, replaced by real markup on first render (the
   setHTML guard treats it like any other stale subtree). */
.fl-skel {
  display: block;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.05);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.11) 37%, rgba(255, 255, 255, 0.05) 63%);
  background-size: 400% 100%;
  animation: fl-skel-shimmer 1.4s ease infinite;
}
.fl-skel.fl-skel--card {
  height: 54px;
  margin-bottom: 5px;
  border-radius: 10px;
}
.fl-skel.fl-skel--row {
  height: 28px;
}
.fl-skel.fl-skel--board {
  height: 160px;
}
.fl-skel.fl-skel--cell {
  height: 18px;
  margin: 7px 0;
  border-radius: 5px;
}

@keyframes fl-skel-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fl-skel {
    animation: none;
    background-image: none;
    background-color: rgba(255, 255, 255, 0.07);
  }
}
.fl-upnext {
  display: flex;
  gap: 10px;
  padding: 10px 14px;
}
.fl-upnext[hidden] {
  display: none;
}

/* This strip is a .fl-card, and the card HUD rule far below sets
   `overflow: hidden` on every card -- same specificity, later in the file,
   so it beat the `overflow-x: auto` that used to live in the block above.
   In a 12-team league that silently clipped the last two teams with no way
   to scroll to them. Scoped to .fl-upnext.fl-card so it outranks the card
   rule wherever it lands in the cascade. */
.fl-upnext.fl-card {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a transparent;
}
.fl-upnext.fl-card::-webkit-scrollbar {
  height: 6px;
}
.fl-upnext.fl-card::-webkit-scrollbar-thumb {
  background: #3a3a3a;
  border-radius: 3px;
}

/* Below ~860px a 12-team round cannot fit however it is sliced, so shrink
   the chips as well as scrolling -- fewer swipes to reach your own pick. */
@media (max-width: 860px) {
  .fl-upnext {
    gap: 6px;
    padding: 8px 10px;
  }
  .fl-upnext__item {
    padding: 4px 8px 4px 5px;
    gap: 5px;
  }
  .fl-upnext__meta b {
    font-size: 11px;
  }
  .fl-upnext__meta i {
    font-size: 9px;
  }
}
.fl-upnext__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 6px 12px 6px 7px;
  border-radius: 999px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.fl-upnext__item.is-otc {
  border-color: rgba(255, 163, 26, 0.55);
  box-shadow: 0 0 14px rgba(255, 163, 26, 0.12);
}
.fl-upnext__item.is-mine .fl-upnext__meta b {
  color: #ffa31a;
}

.fl-upnext__meta {
  display: grid;
  line-height: 1.15;
}
.fl-upnext__meta b {
  font-size: 12px;
  color: #fff;
}
.fl-upnext__meta i {
  font-style: normal;
  font-size: 10px;
  color: #9a9a9a;
}

/* recent-picks strip: 5 cards across the top of the draft room, mirroring
   the mock draft tool's recent-picks row. Grid on wide viewports; scrolls
   horizontally in its own track on narrow ones so the strip -- not the
   page -- carries the overflow. */
.fl-recentwrap {
  margin-bottom: 4px;
}

.fl-recentwrap__title {
  font: 700 11px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin: 0 0 8px;
}

.fl-recent-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 900px) {
  .fl-recent-strip {
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 1fr);
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
  }
}

.fl-recentcard {
  --fl-pick-c: #ffa31a;
  position: relative;
  overflow: hidden;
  min-height: 88px;
  padding: 9px 11px;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--fl-pick-c) 22%, transparent) 0%, color-mix(in srgb, var(--fl-pick-c) 6%, transparent) 40%, #1f1f1f 78%);
  border: 1px solid color-mix(in srgb, var(--fl-pick-c) 35%, rgba(255, 255, 255, 0.09));
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.fl-recentcard:hover {
  border-color: color-mix(in srgb, var(--fl-pick-c) 60%, rgba(255, 255, 255, 0.09));
  transform: translateY(-1px);
}
.fl-recentcard:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.fl-recentcard.is-mine {
  border-color: rgba(255, 163, 26, 0.5);
  box-shadow: 0 0 16px rgba(255, 163, 26, 0.12);
}
.fl-recentcard.is-auto {
  border-style: dashed;
}
.fl-recentcard.fl-recentcard--empty {
  opacity: 0.4;
  cursor: default;
}
.fl-recentcard > * {
  position: relative;
  z-index: 1;
}

/* The washed-out crest is the FANTASY team that made the pick -- league
   branding on the league's own draft board. Sized and placed exactly as the
   NHL crest used to be, so the cards read the same, just with a different
   badge behind them. */
.fl-recentcard__crest {
  position: absolute;
  right: -18px;
  bottom: -14px;
  z-index: 0;
  width: 92px;
  height: 92px;
  object-fit: contain;
  opacity: 0.15;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.4));
}

/* a team with no uploaded logo still gets a mark, from its initials */
.fl-recentcard__crest--text {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 34px "Orbitron", sans-serif;
  color: var(--fl-pick-c, #ffa31a);
  opacity: 0.16;
  letter-spacing: -0.02em;
}

/* the player's real NHL club, small and quiet in the opposite corner */
.fl-recentcard__nhlmark {
  position: absolute;
  left: 7px;
  bottom: 6px;
  z-index: 0;
  width: 26px;
  height: 26px;
  object-fit: contain;
  opacity: 0.3;
  pointer-events: none;
}

.fl-recentcard__body {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.fl-recentcard__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.fl-recentcard__meta {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font: 700 10px "IBM Plex Mono", monospace;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.fl-recentcard__team.is-mine {
  color: #ffa31a;
}

.fl-recentcard__name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-recentcard__sub {
  font-size: 11px;
  color: #9a9a9a;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.fl-recentcard__auto {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #131313;
  background: #ffa31a;
  padding: 1px 5px;
  border-radius: 3px;
}

.fl-draft__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: start;
}

/* ---------- sidebar tabs (Roster / Queue / Draft Board / All picks) ----------
   Static tab bar + 4 panels; JS only toggles [hidden] + aria state on these
   nodes so the poll's setHTML-guarded re-renders inside a panel never touch
   (or reset) which tab is showing. */
.fl-sidetabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 5px;
  margin-bottom: 14px;
}

.fl-sidetab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 8px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #bbb;
  font: 600 12.5px "Poppins", sans-serif;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-sidetab:hover {
  color: #fff;
}
.fl-sidetab.is-active {
  background: #ffa31a;
  color: #131313;
}
.fl-sidetab.is-active .fl-sidetab__badge {
  background: rgba(19, 19, 19, 0.18);
  color: #131313;
}

.fl-sidetab__badge {
  font: 700 10px "IBM Plex Mono", monospace;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 163, 26, 0.16);
  color: #ffa31a;
  flex: 0 0 auto;
  min-width: 16px;
  text-align: center;
}
.fl-sidetab__badge[hidden] {
  display: none;
}

.fl-sidepanel[hidden] {
  display: none;
}

.fl-poolcontrols {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* max-height matched to the side column's bottom (queue/board cards +
   .fl-draftchat at height: 420px below): 260px covers the site header,
   the on-the-clock bar, and the pool's own search/filter controls. */
.fl-pool {
  display: grid;
  gap: 5px;
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  padding-right: 4px;
}

.fl-poolrow {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.fl-poolrow .fl-rank {
  flex: 0 0 40px;
}
.fl-poolrow b {
  font-size: 13.5px;
}
.fl-poolrow i {
  display: block;
  color: #9a9a9a;
  font-style: normal;
  font-size: 11.5px;
  margin-top: 1px;
}

.fl-poolrow__id {
  flex: 1;
  min-width: 0;
}

.fl-poolrow__actions {
  display: flex;
  gap: 7px;
}

.fl-picks, .fl-queue, .fl-mypicks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.fl-picks li, .fl-queue li, .fl-mypicks li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #ddd;
  padding: 6px 8px;
  background: #1f1f1f;
  border-radius: 8px;
}
.fl-picks li b, .fl-queue li b, .fl-mypicks li b {
  color: #fff;
}
.fl-picks li i, .fl-queue li i, .fl-mypicks li i {
  color: #9a9a9a;
  font-style: normal;
}

.fl-picks__team {
  margin-left: auto;
  color: #9a9a9a;
  font-size: 11px;
}

.fl-queue__empty {
  color: #777 !important;
  background: transparent !important;
}

.fl-queue__rm {
  margin-left: auto;
  background: none;
  border: 0;
  color: #f87171;
  font-size: 15px;
  cursor: pointer;
  padding: 0 4px;
}

.fl-queue__namewrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

/* queue rows: drag handle, position chip, per-row Draft button */
.fl-queue__row {
  cursor: default;
}

.fl-queue__row.is-dragging {
  opacity: 0.45;
  outline: 1px dashed #ffa31a;
}

.fl-queue__grip {
  flex: 0 0 auto;
  cursor: grab;
  color: #9a9a9a;
  letter-spacing: -2px;
  font-size: 13px;
  line-height: 1;
  padding: 2px 1px;
  user-select: none;
}
.fl-queue__grip:hover {
  color: #ffa31a;
}
.fl-queue__grip:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
  border-radius: 4px;
}
.fl-queue__grip:active {
  cursor: grabbing;
}

.fl-queue__rank {
  flex: 0 0 16px;
  text-align: right;
  color: #9a9a9a;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.fl-queue__draft {
  margin-left: auto;
  flex: 0 0 auto;
}

.fl-queue__draft + .fl-queue__rm {
  margin-left: 0;
}

/* ---------- roster panel team filter ---------- */
.fl-rosterteam {
  width: 100%;
  margin: 0 0 10px;
}

#fl-rosterpanel .fl-mypicks {
  margin-top: 8px;
}

/* ---------- live draft board (compact, in the room's side column) ---------- */
.fl-boardcard__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fl-board-expand {
  display: inline-flex;
  padding: 4px;
  border-radius: 6px;
  background: none;
  border: 0;
  color: #9a9a9a;
  cursor: pointer;
}
.fl-board-expand:hover {
  color: #ffa31a;
}
.fl-board-expand:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

/* the board tab panel can run to 20+ rounds; cap it and let the existing
   expand button (below) be the way to see the whole thing at once */
#fl-panel-board .fl-board-live-scroll {
  max-height: 60vh;
  overflow-y: auto;
}

.fl-board-live-scroll {
  overflow-x: auto;
  padding-bottom: 2px;
}

.fl-board-live {
  display: grid;
  gap: 2px;
  font-size: 10px;
  min-width: calc(34px + var(--fl-board-teams, 6) * 44px);
}

.fl-board-live__row {
  display: grid;
  gap: 2px;
}

.fl-board-live__rlabel {
  display: flex;
  align-items: center;
  color: #7a7a7a;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.fl-board-live__th {
  padding: 3px 2px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  color: #9a9a9a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.fl-board-live__th.is-mine {
  color: #ffa31a;
}

.fl-board-live__crest {
  width: 14px;
  height: 14px;
  object-fit: contain;
  flex: 0 0 auto;
}

.fl-board-live__thname {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the expanded board has room for a proper badge */
.fl-board-live--big .fl-board-live__crest {
  width: 20px;
  height: 20px;
}

/* Freeze the team-name row: by round 8 the board scrolls far enough that
   every column is an anonymous strip of names. The background has to be
   opaque, not the card's gradient, or the rows scroll through it. */
.fl-board-live__head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #242424;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09);
}

.fl-board-live__cell {
  position: relative;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  padding: 3px 4px;
  min-height: 30px;
  overflow: hidden;
  line-height: 1.15;
}
.fl-board-live__cell b {
  display: block;
  color: #e5e7eb;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.fl-board-live__cell b:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 1px;
}
.fl-board-live__cell b .fl-headshot--xs {
  width: 14px;
  height: 14px;
  vertical-align: -3px;
  margin-right: 3px;
}
.fl-board-live__cell i {
  color: #9a9a9a;
  font-style: normal;
  font-size: 9px;
}
.fl-board-live__cell.is-mine {
  border-color: rgba(255, 163, 26, 0.4);
  background: rgba(255, 163, 26, 0.05);
}
.fl-board-live__cell.is-current {
  border-color: rgba(255, 163, 26, 0.75);
  background: rgba(255, 163, 26, 0.1);
}
.fl-board-live__cell .fl-board-live__pending {
  color: #555;
  font-size: 9px;
}

/* expanded (modal) board: every column wide enough for a full name, so the
   grid scrolls sideways past ~10 teams rather than truncating to "N. M…" */
.fl-board-live--big {
  font-size: 12px;
  gap: 3px;
  min-width: calc(40px + var(--fl-board-teams, 6) * 140px);
}
.fl-board-live--big .fl-board-live__row {
  gap: 3px;
}
.fl-board-live--big .fl-board-live__cell {
  min-height: 62px;
  padding: 7px 8px 7px 8px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
}
.fl-board-live--big .fl-board-live__cell b {
  grid-column: 2;
  font-size: 13px;
  line-height: 1.15;
  /* full name, wrapped onto a second line rather than "N. M..." */
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fl-board-live--big .fl-board-live__cell b .fl-headshot--xs {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  margin: 0;
  vertical-align: baseline;
}
.fl-board-live--big .fl-board-live__cell i {
  grid-column: 2;
  font-size: 11px;
}
.fl-board-live--big .fl-board-live__cell .fl-board-live__pending {
  grid-column: 1/-1;
  font-size: 11px;
}
.fl-board-live--big .fl-board-live__th {
  font-size: 12px;
  padding: 8px 4px;
}
.fl-board-live--big .fl-board-live__rlabel {
  font-size: 11px;
  justify-content: center;
}

.fl-board-live-scroll--big {
  max-height: calc(90vh - 48px);
  overflow: auto;
}

/* ---------- full drafted-players list ----------
   Narrowed for its sidebar tab: 4 columns instead of the full board's 6
   (Rd + # merge into "Pick", NHL crest/abbrev folds into the Player cell)
   plus its own scroller, so a long draft never pushes the page sideways. */
.fl-draftedlist__scroll {
  overflow-x: auto;
}

#fl-panel-picks .fl-draftedlist__scroll {
  max-height: 60vh;
  overflow-y: auto;
}

#fl-panel-picks .fl-poolcontrols {
  flex-direction: column;
  align-items: stretch;
}

#fl-panel-picks .fl-input {
  width: 100%;
}

.fl-draftedtable {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
}
.fl-draftedtable th {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 11px;
  color: #9a9a9a;
  white-space: nowrap;
}
.fl-draftedtable td {
  padding: 7px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #ddd;
  white-space: nowrap;
}
.fl-draftedtable tr.is-mine td {
  background: rgba(255, 163, 26, 0.06);
}
.fl-draftedtable tr.is-mine {
  color: #ffa31a;
}

.fl-draftedtable__pick {
  color: #9a9a9a;
  font: 700 11px "IBM Plex Mono", monospace;
}
.fl-draftedtable__pick i {
  display: block;
  color: #6f6f6f;
  font-style: normal;
  font-size: 10px;
}

.fl-draftedtable__name {
  cursor: pointer;
  color: #fff;
  font-weight: 600;
}
.fl-draftedtable__name .fl-headshot--xs {
  vertical-align: -5px;
  margin-right: 6px;
}
.fl-draftedtable__name i {
  color: #9a9a9a;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 400;
  margin-left: 4px;
}
.fl-draftedtable__name:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

.fl-modal--board .fl-modal__panel {
  width: min(1760px, 97vw);
  max-height: 90vh;
}

/* ---------- draft board ---------- */
.fl-board-scroll {
  overflow-x: auto;
}

.fl-board {
  border-collapse: collapse;
  min-width: 100%;
}
.fl-board th {
  padding: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 11px;
  color: #9a9a9a;
}
.fl-board .fl-board__rnd {
  width: 40px;
  text-align: center;
  color: #9a9a9a;
  font: 700 11px "Orbitron", sans-serif;
}

.fl-board__teamname {
  font-size: 11px;
}

.fl-board__cell {
  min-width: 130px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
  border-radius: 4px;
}
.fl-board__cell b {
  display: block;
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}
.fl-board__cell b .fl-headshot--xs {
  width: 18px;
  height: 18px;
  vertical-align: -5px;
  margin-right: 5px;
}
.fl-board__cell i {
  color: #9a9a9a;
  font-style: normal;
  font-size: 10.5px;
}
.fl-board__cell.is-mine {
  background: rgba(255, 163, 26, 0.08);
}
.fl-board__cell.fl-board__cell--pending {
  color: #555;
  text-align: center;
}
.fl-board__cell.fl-pos--G {
  box-shadow: inset 3px 0 0 rgba(125, 211, 252, 0.55);
}
.fl-board__cell.fl-pos--D {
  box-shadow: inset 3px 0 0 rgba(167, 139, 250, 0.5);
}
.fl-board__cell.fl-pos--C, .fl-board__cell.fl-pos--L, .fl-board__cell.fl-pos--R {
  box-shadow: inset 3px 0 0 rgba(255, 163, 26, 0.45);
}

/* ---------- keepers ---------- */
.fl-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #cfcfcf;
  cursor: pointer;
  line-height: 1.5;
}
.fl-check input {
  margin-top: 2px;
  accent-color: #ffa31a;
  flex: 0 0 auto;
}
.fl-check b {
  color: #fff;
}

.fl-kdetails {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  margin: 8px 0;
  background: #1b1b1b;
  overflow: hidden;
}
.fl-kdetails > summary {
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  font-size: 13.5px;
  color: #fff;
}
.fl-kdetails > summary::-webkit-details-marker {
  display: none;
}
.fl-kdetails > summary::before {
  content: "+";
  color: #9a9a9a;
  font-size: 15px;
  width: 12px;
}
.fl-kdetails[open] > summary::before {
  content: "−";
}
.fl-kdetails .fl-kdetails__count {
  margin-left: auto;
  color: #9a9a9a;
  font-size: 12px;
  font-weight: 400;
}
.fl-kdetails .fl-table {
  margin: 0 8px 10px;
}
.fl-kdetails .fl-note {
  padding: 0 12px 10px;
}

.fl-table--keeper tr.is-keeper td {
  background: rgba(255, 163, 26, 0.09);
}
.fl-table--keeper tr.is-keeper td b {
  color: #ffa31a;
}

/* ---------- auction draft ---------- */
.fl-auction {
  display: grid;
  gap: 16px;
}

.fl-auction__stage {
  display: grid;
  gap: 14px;
}

.fl-auction__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fl-auction__phase {
  font: 700 13px "Poppins", sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.fl-auction__phase.is-bidding {
  color: #ffa31a;
}
.fl-auction__phase.is-nominate {
  color: #7dd3fc;
}

.fl-auction__progress {
  font-size: 12.5px;
  color: #9a9a9a;
}

.fl-auction__lot {
  min-height: 62px;
  display: flex;
  align-items: center;
}

.fl-auction__empty {
  color: #888;
  font-size: 14px;
}

.fl-auction__player {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fl-auction__player .fl-headshot--xs {
  width: 52px;
  height: 52px;
}

.fl-auction__pid {
  display: grid;
  gap: 2px;
}
.fl-auction__pid b {
  font: 800 20px "Poppins", sans-serif;
  color: #fff;
}
.fl-auction__pid i {
  font-style: normal;
  color: #9a9a9a;
  font-size: 12.5px;
}

.fl-auction__line {
  color: #bbb;
  font-size: 12px;
}

.fl-auction__bidbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 12px;
}

.fa-controls {
  display: grid;
  gap: 8px;
}
.fa-controls[hidden] {
  display: none;
}

/* who's winning the lot -- amber-lit when it's the viewer */
.fa-leader {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  padding: 9px 14px 9px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(135deg, #242424, #1d1d1d);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fa-leader.is-mine {
  border-color: rgba(255, 163, 26, 0.6);
  background: linear-gradient(135deg, rgba(255, 163, 26, 0.18), rgba(255, 163, 26, 0.04));
  box-shadow: 0 0 0 1px rgba(255, 163, 26, 0.25), 0 0 26px rgba(255, 163, 26, 0.2);
}
.fa-leader.is-bump {
  animation: fa-leader-bump 0.45s ease-out;
}

.fa-leader__ava {
  width: 40px;
  height: 40px;
  font-size: 12px;
}

.fa-leader__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.fa-leader__label {
  font: 700 10.5px "Poppins", sans-serif;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.is-mine .fa-leader__label {
  color: #ffa31a;
}

.fa-leader__team {
  font: 700 14px "Poppins", sans-serif;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fa-leader__amt {
  margin-left: auto;
  padding-left: 8px;
  font: 800 24px "Orbitron", sans-serif;
  color: #ffa31a;
  font-variant-numeric: tabular-nums;
}

@keyframes fa-leader-bump {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.045);
  }
  100% {
    transform: scale(1);
  }
}
.fa-mybudget {
  margin: 0 0 10px;
}

.fa-slots {
  margin-bottom: 12px;
}

.fa-bidrow {
  display: flex;
  gap: 8px;
  align-items: center;
}

.fa-bidamt {
  width: 110px;
}

.fa-nominatehint {
  color: #7dd3fc;
  font-size: 13px;
}
.fa-nominatehint b {
  color: #fff;
}
.fa-nominatehint[hidden] {
  display: none;
}

.fl-auction__grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}

.fa-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
  max-height: 340px;
  overflow-y: auto;
}

.fa-board__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  background: #1f1f1f;
  border-radius: 8px;
  font-size: 12.5px;
}
.fa-board__row.is-full {
  opacity: 0.5;
}

.fa-board__name {
  color: #eee;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fa-board__name i {
  color: #9a9a9a;
  font-style: normal;
}

.fa-board__nums {
  text-align: right;
  line-height: 1.15;
}
.fa-board__nums b {
  color: #ffa31a;
  font: 700 13px "Orbitron", sans-serif;
  display: block;
}
.fa-board__nums i {
  color: #9a9a9a;
  font-style: normal;
  font-size: 10px;
}

.fa-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

.fa-results__team {
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 12px 14px;
}
.fa-results__team.is-mine {
  border-color: rgba(255, 163, 26, 0.5);
}

.fa-results__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.fa-results__spent {
  font: 800 15px "Orbitron", sans-serif;
  color: #ffa31a;
}
.fa-results__spent i {
  color: #9a9a9a;
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
}

.fa-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
}
.fa-results__list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: #ddd;
  padding: 3px 4px;
  border-radius: 6px;
}
.fa-results__list li b {
  color: #fff;
}
.fa-results__list li i {
  color: #9a9a9a;
  font-style: normal;
  font-size: 11px;
  margin-left: auto;
}
.fa-results__list li.fl-pos--G {
  box-shadow: inset 3px 0 0 rgba(125, 211, 252, 0.5);
}
.fa-results__list li.fl-pos--D {
  box-shadow: inset 3px 0 0 rgba(167, 139, 250, 0.45);
}

.fa-results__price {
  font: 700 12px "Orbitron", sans-serif;
  color: #ffa31a;
  flex: 0 0 42px;
}

/* ---------- draft room chat (snake + auction) ----------
   Desktop: a fixed-height card in the room's side column with its own
   scroll, stacked under the queue/board/picks tabs (snake) or Recent
   (auction) -- reuses .fl-msg/.fl-card so a message looks the same here as
   in the league feed. Mobile (<720px, .fl-draftchat__toggle): a bottom-
   sheet the "Chat" tab opens over the board, with an unread badge while
   closed. */
.fl-draftchat {
  display: flex;
  flex-direction: column;
  height: 420px;
}

.fl-draftchat__online {
  color: #9a9a9a;
  font-size: 11.5px;
}

.fl-draftchat__stream {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 6px;
}

.fl-draftchat__composer {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.fl-draftchat__composer textarea {
  flex: 1;
  resize: none;
  min-height: 38px;
  max-height: 110px;
}

.fl-draftchat__nomember {
  margin: 8px 0 0;
}

.fl-draftchat__toggle, .fl-draftchat__backdrop {
  display: none;
}

/* mobile (<720px) rules for these live in the existing
   @media (max-width: 720px) block further down (kept to one block per
   breakpoint so a naive "find the 720px block" regex/test still finds a
   single, complete one). */
/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .fl-home {
    grid-template-columns: 1fr;
  }
  .fl-home__rail {
    position: static;
  }
  .fl-draft__grid {
    grid-template-columns: 1fr;
  }
  .fl-auction__grid {
    grid-template-columns: 1fr;
  }
  .fl-hero {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
@media (max-width: 760px) {
  .fl-prow {
    grid-template-columns: 40px 1fr auto;
    row-gap: 4px;
  }
  .fl-prow .fl-slot {
    grid-column: 1;
    grid-row: 1;
  }
  .fl-prow .fl-prow__player {
    grid-column: 2;
    grid-row: 1;
  }
  .fl-prow .fl-prow__actions {
    grid-column: 3;
    grid-row: 1;
  }
  .fl-prow .fl-prow__line {
    grid-column: 2/-1;
    grid-row: 2;
    font-size: 11.5px;
  }
  .fl-prow .fl-prow__gw, .fl-prow .fl-prow__season {
    display: none;
  }
  .fl-prowhead {
    display: none;
  }
  .fl-matchup__banner {
    grid-template-columns: 1fr;
  }
  .fl-matchup__nums {
    font-size: 32px;
  }
  .fl-builder__cols {
    grid-template-columns: 1fr;
  }
  .fl-cats {
    grid-template-columns: 1fr;
  }
  .fl-cats-table .fl-catrow {
    grid-template-columns: 64px 1fr 64px;
    gap: 8px;
  }
  /* The player pool was fifteen columns in a sideways scroller: 742px of
     table inside a 274px viewport, with the Add button in the last cell of
     the last column, rendering at x=737 on a 375px screen. It was not
     broken, it was unreachable -- you had to drag the table through
     fourteen columns of stats to find it, which is why "add a player" was
     reported as not working at all.

     So on a phone the row stops being a table row and becomes a card: the
     player and the action on the first line, everything else wrapping
     underneath as labelled chips. Nothing is hidden and nothing scrolls
     sideways. The labels come from data-label, because a stacked cell with
     no column header above it is just a loose number. */
  .fl-table--pool {
    display: block;
  }
  .fl-table--pool thead {
    display: none;
  }
  .fl-table--pool tbody {
    display: block;
  }
  .fl-table--pool tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 11px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .fl-table--pool tr:last-child {
    border-bottom: 0;
  }
  .fl-table--pool td {
    display: block;
    padding: 0;
    border: 0;
    white-space: normal;
    text-align: left;
    font-size: 12px;
  }
  .fl-table--pool {
    /* line 1: who, and what you can do about him.
       The identity cell SHRINKS (flex-basis 0 + min-width 0) rather than
       growing, so the action cell always keeps its place on the first
       line. Letting the name grow instead pushed Add onto a second row --
       274px of row against 250 + 94 of content. The name truncates; the
       full one is a tap away on the player card. */
  }
  .fl-table--pool .fl-table__playercol {
    /* A floor, not min-width: 0. Letting this shrink freely collapsed it
       to just the headshot -- the player's name disappeared entirely,
       which is a worse bug than the one being fixed. 140px holds a name
       and the position line; anything longer ellipsises. */
    order: 1;
    flex: 1 1 0;
    min-width: 140px;
  }
  .fl-table--pool .fl-table__playercol .fl-playercell {
    min-width: 0;
  }
  .fl-table--pool .fl-table__playercol .fl-playercell > span {
    min-width: 0;
  }
  .fl-table--pool .fl-table__playercol b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  .fl-table--pool .fl-table__playercol i {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  .fl-table--pool .fl-table__actioncol {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    /* The watchlist star is a 40px target elsewhere; here it shares a
       274px row with Add. 36 is the floor worth holding and it still
       fits: 36 + 48 + a 140px identity cell leaves room to spare. */
  }
  .fl-table--pool .fl-table__actioncol .fl-star {
    min-width: 36px;
    min-height: 36px;
    padding: 0;
  }
  .fl-table--pool {
    /* line 2+: the numbers, as chips that wrap */
  }
  .fl-table--pool .fl-pool__status {
    order: 3;
    flex: 0 0 auto;
  }
  .fl-table--pool .fl-pool__gm {
    order: 4;
    flex: 0 0 auto;
  }
  .fl-table--pool .fl-pool__stat {
    order: 5;
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #ddd;
    font-size: 11px;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
  }
  .fl-table--pool .fl-pool__stat::after {
    content: " " attr(data-label);
    color: #9a9a9a;
    font-size: 9.5px;
    letter-spacing: 0.03em;
  }
  .fl-table--pool .fl-pool__stat {
    /* A default league mixes skater and goalie categories, so every
       skater carries dead W / GAA / SV% / SO chips and every goalie the
       reverse -- four to six chips of pure "—" per card, which is what
       pushed a row past 150px tall. The column has to stay on desktop
       (the grid needs the cell) but on a phone an empty chip is noise. */
  }
  .fl-table--pool .fl-pool__stat.is-empty {
    display: none;
  }
  .fl-table--pool .fl-playercell {
    gap: 8px;
  }
  .fl-table--pool .fl-headshot {
    width: 30px;
    height: 30px;
  }
  /* ---- M7: the draft pool row was 188px tall on a phone --------------
     Four players per screen in the one place where you are on a clock and
     scanning for a name. The row is a flex line built for a 600px column;
     at 270px the rank, the identity and the two buttons each claimed their
     own line. Two lines instead: who and what you do about him up top, the
     stat line underneath. */
  .fl-poolrow {
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 7px 9px;
    row-gap: 2px;
  }
  .fl-poolrow .fl-rank {
    flex: 0 0 30px;
    font-size: 11px;
  }
  .fl-poolrow .fl-pcard__shot {
    flex: 0 0 auto;
  }
  .fl-poolrow .fl-headshot--xs {
    width: 26px;
    height: 26px;
  }
  .fl-poolrow .fl-poolrow__id {
    flex: 1 1 0;
    min-width: 120px;
    order: 1;
  }
  .fl-poolrow .fl-poolrow__id b {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  .fl-poolrow .fl-poolrow__id {
    /* the stat line drops to its own row so the name never competes
       with it for width */
  }
  .fl-poolrow .fl-poolrow__id i {
    font-size: 10.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .fl-poolrow .fl-poolrow__actions {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    gap: 5px;
  }
  .fl-poolrow .fl-poolrow__actions .fl-btn {
    min-height: 32px;
    padding: 0 9px;
    font-size: 11.5px;
  }
  /* the pool's own scroller: give it most of the screen rather than the
     desktop cap, since on a phone it IS the page */
  #fl-pool {
    max-height: none;
  }
  /* ---- My Team: 876px of scrolling before you reached your lineup -----
     The page's own header restates what the hero directly above it already
     says -- team name, record, FAAB -- at 20px with a 2-line "Edit team &
     logo" button beside it. It cannot simply be hidden, because this page
     also shows OTHER managers' rosters and then it is the only thing
     naming whose roster you are looking at. So it compacts instead. */
  .fl-roster__head {
    gap: 8px;
    margin-bottom: 10px;
  }
  .fl-roster__head .fl-btn {
    white-space: nowrap;
  }
  .fl-roster__team {
    gap: 9px;
    min-width: 0;
  }
  .fl-roster__team .fl-ava {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
  }
  .fl-roster__name {
    font-size: 15px;
    flex-wrap: wrap;
  }
  .fl-roster__sub {
    font-size: 11.5px;
  }
  .fl-roster__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .fl-roster__nav .fl-input {
    flex: 1 1 140px;
    min-width: 0;
  }
  /* Your lineup comes first. The advisory cards (suggested moves, goalie
     decisions) are 251px of "here is what you might do" sitting above the
     thing you opened the page to do, which on a phone put the first roster
     slot 817px down. They keep their place on desktop, where there is room
     for both above the fold. Matched with :has() because the wrapper this
     lives in carries no class of its own. */
  .fl-roster > div:has(> .fl-lineup) {
    display: flex;
    flex-direction: column;
  }
  .fl-roster > div:has(> .fl-lineup) > .fl-optgrid {
    order: 2;
  }
  /* ---- Standings: the sticky team column was eating the table --------
     164px of a 274px row went to the team name, so pinning it (which is
     what makes the table readable at all) left almost nothing for the
     numbers you came to compare. */
  .fl-table .fl-table__teamcol {
    max-width: 104px;
  }
  .fl-table .fl-table__teamcol .fl-teamcell, .fl-table .fl-table__teamcol span {
    min-width: 0;
  }
  .fl-table .fl-table__teamcol b, .fl-table .fl-table__teamcol a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 104px;
  }
  /* ---- M6: the pool filters ate 230px before a single player ----------
     Seven controls stacked one per line. Search stays full width because
     it is the one you actually type in; the segmented pickers scroll in
     their own track; the three selects pair up two to a row. */
  .fl-poolfilters {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .fl-poolfilters > .fl-input[type=text], .fl-poolfilters > .fl-seg {
    grid-column: 1/-1;
  }
  .fl-poolfilters .fl-seg {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .fl-poolfilters .fl-seg::-webkit-scrollbar {
    display: none;
  }
  .fl-poolfilters .fl-seg__btn {
    flex: 0 0 auto;
    min-height: 34px;
  }
  .fl-poolfilters {
    /* pairs with the last select rather than claiming its own row -- every
       other control auto-submits on change, so this button only really
       matters for the free-text search */
  }
  .fl-poolfilters button[type=submit], .fl-poolfilters .fl-btn {
    grid-column: auto;
  }
  /* ---- M6: the league hero is 173px on every page, mostly padding and
     decorative wash. Doubled up as `.fl-hudhero.fl-hudhero--league` so it
     outranks the component block further down the file -- a bare
     `.fl-hudhero` here has the same specificity and loses on source order,
     which is why the first attempt at this changed nothing. */
  .fl-hudhero.fl-hudhero--league {
    padding: 10px 12px;
  }
  .fl-hudhero.fl-hudhero--league .fl-hudhero__crest {
    width: 40px;
    height: 40px;
  }
  .fl-hudhero.fl-hudhero--league .fl-hudhero__title {
    font-size: 19px;
  }
  .fl-hudhero.fl-hudhero--league .fl-hudhero__sub {
    font-size: 12.5px;
  }
  .fl-hudhero.fl-hudhero--league .fl-hudhero__spotlight, .fl-hudhero.fl-hudhero--league .fl-hudhero__wash {
    display: none;
  }
  .fl-hudhero.fl-hudhero--league {
    /* The hero stacked four rows -- league chip, team name, presence, stat
       chips -- and cost 177px on EVERY page before you saw any content.
       The two meta lines share a row instead: nothing is hidden, the hero
       just stops spending a full line on each of two short strings. */
  }
  .fl-hudhero.fl-hudhero--league .fl-hudhero__body {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
  }
  .fl-hudhero.fl-hudhero--league .fl-hudhero__body .fl-hudhero__id {
    order: 1;
    flex: 1 1 100%;
  }
  .fl-hudhero.fl-hudhero--league .fl-hudhero__body .fl-hudhero__eyebrow {
    order: 2;
  }
  .fl-hudhero.fl-hudhero--league .fl-hudhero__body .fl-presence-line {
    order: 3;
  }
  .fl-hudhero.fl-hudhero--league .fl-hudstats {
    gap: 6px;
  }
  .fl-hudhero.fl-hudhero--league .fl-hudstat {
    padding: 4px 8px;
  }
  /* ---- M2: standings is twelve columns of numbers -------------------
     A card layout would destroy it -- the whole point is comparing teams
     down a column. So the table keeps scrolling, but the team name stays
     pinned to the left edge, which is the difference between "scroll and
     lose track of whose row this is" and a usable stats table. */
  .fl-table .fl-table__rankcol, .fl-table .fl-table__teamcol {
    position: sticky;
    z-index: 1;
    background: #1d1d1d;
  }
  .fl-table .fl-table__rankcol {
    left: 0;
  }
  .fl-table .fl-table__teamcol {
    left: 26px;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.09);
  }
  .fl-table thead .fl-table__rankcol, .fl-table thead .fl-table__teamcol {
    z-index: 2;
  }
  /* ---- M4: the rename popover opened left-anchored from a control that
     already sits two thirds across, so it ran 200px past the edge ------ */
  .fl-rename .fl-rename__form {
    left: auto;
    right: 0;
    max-width: calc(100vw - 24px);
  }
  .fl-rename .fl-rename__form .fl-input {
    width: 100%;
  }
  .fl-rename .fl-rename__form .fl-input--xs {
    width: 72px;
  }
  /* ---- M5: a tap target floor ---------------------------------------
     Not applied to chips and badges, which are labels rather than
     controls -- only to the things a thumb is meant to hit. */
  .fl-btn, .fl-seg__btn, select.fl-input, input[type=text].fl-input,
  input[type=number].fl-input, input[type=search].fl-input {
    min-height: 40px;
  }
  .fl-btn--xs, .fl-btn--sm {
    min-height: 36px;
  }
  .fl-star {
    min-width: 40px;
    min-height: 40px;
  }
}
/* =============================================================
   Beyond-MVP components (win prob, day strip, form, playoff
   picture, draft grades, player-card modal, a11y)
   ============================================================= */
/* ---- win probability ---- */
/* One line, not a panel: crest + percentage, the bar, then percentage +
   crest. It sits directly above the score and is read at a glance, so the
   vertical padding is trimmed to what keeps the crests off the card edge. */
/* .fl-card.fl-winprob, not .fl-winprob: a later `.fl-card { padding: 12px 13px }`
   inside the 760px block matches at the same specificity and was winning on
   phones, which is how this strip ended up TALLER on mobile (47px) than on
   desktop (31px). */
.fl-card.fl-winprob {
  padding: 4px 14px;
}

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

.fl-winprob__row .fl-winprob__bar {
  flex: 1;
}

/* On a phone the crests and percentages leave the bar about 120px of a
   316px card, so the part carrying the information is the part that gets
   squeezed. Tightening the type and the gaps hands it back ~40px. */
@media (max-width: 560px) {
  .fl-card.fl-winprob {
    padding: 4px 10px;
  }
  .fl-winprob__row {
    gap: 7px;
  }
  .fl-winprob__side {
    gap: 5px;
  }
  .fl-winprob__side .fl-ava {
    width: 16px;
    height: 16px;
  }
  .fl-winprob__pct {
    font-size: 14px;
  }
}
.fl-winprob__side {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #cfcfcf;
  /* The crest replaces the abbrev here. Sized to sit inside the percentage's
     line box so the strip stays one row tall. */
}
.fl-winprob__side .fl-ava {
  width: 18px;
  height: 18px;
  font-size: 7px;
  flex: 0 0 auto;
  margin: 0;
}
.fl-winprob__side.is-lead {
  color: #ffa31a;
}

.fl-winprob__pct {
  font: 800 17px "Orbitron", sans-serif;
  color: inherit;
}
.fl-winprob__pct.is-lead {
  color: #ffa31a;
}

.fl-winprob__label {
  font: 700 10.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.fl-winprob__label i {
  font-style: normal;
  opacity: 0.7;
}

.fl-winprob__bar {
  position: relative;
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  background: #4b5563;
}

.fl-winprob__fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  background: linear-gradient(90deg, #ffb84d, #ffa31a);
}

.fl-winprob__divider {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: #131313;
  transform: translateX(-1px);
}

/* ---- day-by-day strip ---- */
.fl-days {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.fl-day {
  flex: 1 0 46px;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 8px 4px;
  border-radius: 10px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.fl-day.lead-home {
  box-shadow: inset 0 -3px 0 rgba(255, 163, 26, 0.6);
}
.fl-day.lead-away {
  box-shadow: inset 0 -3px 0 rgba(75, 85, 99, 0.9);
}

.fl-day__date {
  font-size: 10.5px;
  color: #9a9a9a;
  text-align: center;
}
.fl-day__date i {
  display: block;
  font-style: normal;
  font-size: 9.5px;
  opacity: 0.7;
}

.fl-day__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 56px;
}

.fl-day__bar {
  width: 9px;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.fl-day__bar.fl-day__bar--home {
  background: #ffa31a;
}
.fl-day__bar.fl-day__bar--away {
  background: #4b5563;
}

.fl-day__vals {
  font: 700 11px "Orbitron", sans-serif;
}
.fl-day__vals b {
  color: #ffa31a;
}
.fl-day__vals i {
  color: #9ca3af;
  font-style: normal;
  margin-left: 3px;
}

/* ---- standings streak + form ---- */
.fl-streak {
  display: inline-block;
  font: 700 11px "Orbitron", sans-serif;
  padding: 3px 8px;
  border-radius: 6px;
  background: #262626;
  color: #9a9a9a;
}
.fl-streak.fl-streak--w {
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
}
.fl-streak.fl-streak--l {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
}

.fl-form {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.fl-form__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3a3a3a;
  display: inline-block;
}
.fl-form__dot.fl-form__dot--W {
  background: #34d399;
}
.fl-form__dot.fl-form__dot--L {
  background: #f87171;
}
.fl-form__dot.fl-form__dot--T {
  background: #9ca3af;
}

/* ---- playoff picture ---- */
.fl-picture {
  display: grid;
  gap: 8px;
}

.fl-picture__pair {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 11px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
}

.fl-picture__team {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
}
.fl-picture__team.fl-picture__team--low {
  color: #cfcfcf;
}

.fl-picture__vs {
  font: 700 10.5px "IBM Plex Mono", monospace;
  color: #9a9a9a;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fl-picture__vs.fl-picture__bye {
  color: #ffa31a;
}

/* ---- playoff bracket ---- */
.fl-bracket-scroll {
  overflow-x: auto;
}

.fl-bracket {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-width: max-content;
  padding: 6px 4px 14px;
}

.fl-bracket__round {
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: 0 20px;
  position: relative;
}
.fl-bracket__round:not(:first-child) {
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.fl-bracket__roundhead {
  text-align: center;
  font: 700 11px "Poppins", sans-serif;
  color: #9a9a9a;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}
.fl-bracket__roundhead i {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  color: #9a9a9a;
  opacity: 0.7;
  margin-top: 2px;
}

.fl-bracket__slots {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex: 1 1 auto;
  gap: 16px;
}

.fl-bracket__slot {
  position: relative;
}

.fl-bracket__game {
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  overflow: hidden;
}

.fl-bracket__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.fl-bracket__row:last-child {
  border-bottom: none;
}
.fl-bracket__row.is-winner {
  background: rgba(255, 163, 26, 0.1);
}
.fl-bracket__row.is-winner .fl-bracket__name, .fl-bracket__row.is-winner .fl-bracket__score {
  color: #ffa31a;
  font-weight: 700;
}
.fl-bracket__row.is-tbd .fl-bracket__name {
  color: #9a9a9a;
  font-style: italic;
  font-weight: 500;
}
.fl-bracket__row.is-me {
  box-shadow: inset 0 0 0 1px rgba(255, 163, 26, 0.55);
}

.fl-bracket__seed {
  font: 700 10px "IBM Plex Mono", monospace;
  color: #9a9a9a;
  width: 14px;
  text-align: center;
  flex: 0 0 auto;
}

.fl-bracket__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: #ddd;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fl-bracket__score {
  font: 700 14px "Orbitron", sans-serif;
  color: #999;
  flex: 0 0 auto;
}

.fl-bracket__bye-tag {
  font: 700 10.5px "Poppins", sans-serif;
  color: #ffa31a;
}

.fl-bracket__champion {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  color: #ffa31a;
  font-size: 13.5px;
  background: rgba(255, 163, 26, 0.1);
  border: 1px solid rgba(255, 163, 26, 0.35);
}
.fl-bracket__champion b {
  font-weight: 700;
}

.fl-bracket__consolation {
  margin-top: 14px;
}
.fl-bracket__consolation summary {
  color: #ffa31a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 760px) {
  .fl-bracket__round {
    min-width: 160px;
    padding: 0 12px;
  }
}
/* ---- hub lineup-gap alert ---- */
.fl-lgcard__alert {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: #ffa31a;
}
.fl-lgcard__alert svg {
  flex: 0 0 auto;
}

/* ---- draft grades ---- */
.fl-grades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.fl-grade {
  padding: 14px;
  border-radius: 14px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.fl-grade.is-mine {
  border-color: rgba(255, 163, 26, 0.5);
}

.fl-grade__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}

.fl-grade__letter {
  font: 800 20px "Orbitron", sans-serif;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.06);
  color: #cfcfcf;
}
.fl-grade__letter.fl-grade__letter--a {
  color: #34d399;
  background: rgba(52, 211, 153, 0.14);
}
.fl-grade__letter.fl-grade__letter--b {
  color: #9ae6b4;
  background: rgba(154, 230, 180, 0.1);
}
.fl-grade__letter.fl-grade__letter--c {
  color: #ffa31a;
  background: rgba(255, 163, 26, 0.14);
}
.fl-grade__letter.fl-grade__letter--d, .fl-grade__letter.fl-grade__letter--f {
  color: #f87171;
  background: rgba(248, 113, 113, 0.12);
}

.fl-grade__team {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
}

.fl-grade__body {
  display: grid;
  gap: 4px;
}

.fl-grade__pick {
  margin: 0;
  font-size: 12.5px;
  color: #d4d4d4;
}
.fl-grade__pick b {
  font-weight: 700;
}
.fl-grade__pick i {
  font-style: normal;
  color: #9a9a9a;
}
.fl-grade__pick.fl-grade__pick--value b {
  color: #34d399;
}
.fl-grade__pick.fl-grade__pick--reach b {
  color: #f87171;
}

/* ---- clickable player cell ---- */
.fl-pcard {
  cursor: pointer;
}
.fl-pcard:hover .fl-prow__name, .fl-pcard:hover b {
  color: #ffa31a;
}
.fl-pcard:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ---- player card modal ---- */
body.fl-modal-open {
  overflow: hidden;
}

.fl-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.fl-modal[hidden] {
  display: none;
}

.fl-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.66);
  backdrop-filter: blur(2px);
}

.fl-modal__panel {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, #242424, #1d1d1d);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  animation: fl-modal-in 0.16s ease-out;
}

@keyframes fl-modal-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}
.fl-modal__x {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  background: none;
  border: 0;
  color: #9a9a9a;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.fl-modal__x:hover {
  color: #fff;
}

.fl-modal__loading {
  padding: 30px 0;
  text-align: center;
  color: #9a9a9a;
}

.fl-pc__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.fl-pc__photo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  background: #2a2a2a;
  border: 2px solid rgba(255, 163, 26, 0.5);
  flex: 0 0 auto;
}

.fl-pc__id h3 {
  margin: 0 0 3px;
  font-size: 19px;
}

.fl-pc__id span {
  color: #9a9a9a;
  font-size: 12.5px;
}

.fl-pc__season {
  padding: 10px 12px;
  border-radius: 10px;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #ffa31a;
  font-weight: 600;
  font-size: 13px;
  margin: 0 0 14px;
}

.fl-pc__subhead {
  font: 700 10.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin: 0 0 8px;
}

.fl-pc__log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}
.fl-pc__log li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  background: #1f1f1f;
  border-radius: 8px;
  font-size: 12.5px;
}

.fl-pc__date {
  color: #9a9a9a;
  white-space: nowrap;
}
.fl-pc__date i {
  font-style: normal;
  color: #7a7a7a;
}

.fl-pc__line {
  color: #e2e2e2;
  text-align: right;
}

.fl-pc__empty {
  color: #9a9a9a;
  font-size: 13px;
}

/* ---- a11y: visible focus rings on interactive fl controls ---- */
.fl-btn:focus-visible, .fl-tabs__link:focus-visible,
.fl-seg__btn:focus-visible, .fl-input:focus-visible,
.fl-datenav__btn:focus-visible, .fl-prow__move:focus-visible,
.fl-sidetab:focus-visible, .fl-sidepanel:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

/* every element wired to open the player card (pool rows, roster/queue
   rows, board cells, drafted-list names) shares one cursor + focus rule
   instead of a dozen ad-hoc per-component overrides */
[data-player-card] {
  cursor: pointer;
}

[data-player-card]:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
  border-radius: 6px;
}

.fl-mypicks li[data-player-card]:hover,
.fl-queue__namewrap:hover,
.fl-poolrow__id:hover,
.fl-board-live__cell b:hover,
.fl-draftedtable__name:hover {
  color: #ffa31a;
}

@media (prefers-reduced-motion: reduce) {
  .fl-modal__panel {
    animation: none;
  }
  .fl-live-dot, .fl-live, .fl-clock.is-urgent, .fa-leader.is-bump {
    animation: none;
  }
}
@media (max-width: 760px) {
  .fl-grades {
    grid-template-columns: 1fr;
  }
  .fl-day {
    flex-basis: 40px;
  }
}
/* =============================================================
   Commissioner panel — settings editors & power tools
   ============================================================= */
.fl-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.fl-subnav a {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #cfcfcf;
}
.fl-subnav a:hover {
  border-color: rgba(255, 163, 26, 0.55);
  color: #ffa31a;
}

.fl-checkline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #cfcfcf;
}
.fl-checkline input {
  accent-color: #ffa31a;
}

.fl-inlineform--wide {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.fl-inlineform--wide .fl-input {
  flex: 1;
  min-width: 220px;
}

.fl-inlineform--wrap {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.fl-segrow {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.fl-radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  color: #ddd;
  cursor: pointer;
}
.fl-radio input {
  accent-color: #ffa31a;
}

.fl-ptgrid, .fl-slotgrid {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

.fl-ptcell, .fl-slotcell {
  display: grid;
  gap: 4px;
  font-size: 11.5px;
  color: #9a9a9a;
  text-align: center;
}
.fl-ptcell span, .fl-slotcell span {
  font: 700 11px "IBM Plex Mono", monospace;
  letter-spacing: 0.05em;
}
.fl-ptcell input, .fl-slotcell input {
  text-align: center;
}

.fl-forfeits {
  display: grid;
  gap: 8px;
}

.fl-forfeit {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: 10px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
}
.fl-forfeit span {
  min-width: 110px;
  font-weight: 600;
}

.fl-popmenu__panel--wide {
  width: 280px;
  display: grid;
  gap: 9px;
}
.fl-popmenu__panel--wide .fl-inlineform {
  display: flex;
  gap: 6px;
  align-items: center;
}
.fl-popmenu__panel--wide .fl-input, .fl-popmenu__panel--wide select.fl-input {
  flex: 1;
}

.fl-danger {
  border-color: rgba(248, 113, 113, 0.4);
  box-shadow: 0 0 24px rgba(248, 113, 113, 0.06);
}

.fl-danger__grid {
  display: grid;
  gap: 10px;
}

.fl-danger__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.fl-danger__item b {
  color: #fff;
  font-size: 13.5px;
}
.fl-danger__item span {
  display: block;
  color: #9a9a9a;
  font-size: 12px;
  margin-top: 2px;
}

.fl-txn-kind--commish, .fl-txn-kind--settings {
  color: #a78bfa;
}

.fl-form-grid--settings {
  gap: 14px;
}

@media (max-width: 760px) {
  .fl-danger__item {
    flex-direction: column;
    align-items: flex-start;
  }
  .fl-popmenu__panel--wide {
    width: 240px;
  }
}
/* =============================================================
   Chat-native feed — reactions, polls, poll builder
   ============================================================= */
/* message becomes a column: row + reactions + poll */
.fl-msg {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.fl-msg__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.fl-msg--system .fl-msg__row {
  align-items: center;
}

/* reactions */
.fl-msg__reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-left: 36px;
  position: relative;
}

.fl-msg--system .fl-msg__reactions {
  padding-left: 0;
}

.fl-react {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12.5px;
  background: #232323;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #ddd;
  line-height: 1.4;
  transition: border-color 0.12s ease;
}
.fl-react b {
  color: #9a9a9a;
  font-weight: 700;
  font-size: 11px;
}
.fl-react:hover {
  border-color: rgba(255, 163, 26, 0.5);
}
.fl-react.is-mine {
  background: rgba(255, 163, 26, 0.14);
  border-color: rgba(255, 163, 26, 0.55);
}
.fl-react.is-mine b {
  color: #ffa31a;
}
.fl-react.fl-react--add {
  color: #9a9a9a;
  font-weight: 700;
  padding: 2px 9px;
}
.fl-react.fl-react--add:hover {
  color: #ffa31a;
}

.fl-reactpicker {
  position: absolute;
  bottom: 100%;
  left: 36px;
  margin-bottom: 6px;
  z-index: 20;
  display: flex;
  gap: 2px;
  padding: 6px;
  border-radius: 12px;
  background: #262626;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.fl-reactpicker button {
  background: none;
  border: 0;
  font-size: 18px;
  cursor: pointer;
  padding: 4px 5px;
  border-radius: 8px;
  line-height: 1;
}
.fl-reactpicker button:hover {
  background: rgba(255, 163, 26, 0.15);
}

/* poll widget */
.fl-poll {
  display: grid;
  gap: 5px;
  margin: 4px 0 2px;
}

.fl-poll__q {
  font-weight: 600;
  font-size: 13.5px;
  color: #fff;
}

.fl-pollopt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9px;
  cursor: pointer;
  overflow: hidden;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #e6e6e6;
  font-size: 13px;
  text-align: left;
}
.fl-pollopt:hover {
  border-color: rgba(255, 163, 26, 0.4);
}
.fl-pollopt.is-mine {
  border-color: rgba(255, 163, 26, 0.6);
}
.fl-pollopt:disabled {
  cursor: default;
}

.fl-pollopt__bar {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  background: rgba(255, 163, 26, 0.16);
}
.fl-pollopt.is-mine .fl-pollopt__bar {
  background: rgba(255, 163, 26, 0.28);
}

.fl-pollopt__label {
  position: relative;
  z-index: 1;
  flex: 1;
}

.fl-pollopt__pct {
  position: relative;
  z-index: 1;
  font: 700 12px "Orbitron", sans-serif;
  color: #cfcfcf;
}

.fl-poll__total {
  font-size: 11.5px;
  color: #9a9a9a;
}

.fl-msg--poll .fl-msg__badge {
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
}

/* poll builder */
.fl-pollbuilder {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.fl-pollbuilder[hidden] {
  display: none;
}

.fl-pollbuilder__actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.fl-btn--icon {
  padding: 0 11px;
}

.fl-feed__composer {
  align-items: center;
}

/* =============================================================
   Power rankings · league history · trade analyzer
   ============================================================= */
/* power rankings */
.fl-power {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  counter-reset: pr;
}
.fl-power li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 11px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13.5px;
}
.fl-power li.is-me {
  background: rgba(255, 163, 26, 0.08);
  border-color: rgba(255, 163, 26, 0.3);
}

.fl-power__rank {
  font: 800 15px "Orbitron", sans-serif;
  color: #ffa31a;
  width: 26px;
  text-align: center;
  flex: 0 0 auto;
}

.fl-power__name {
  font-weight: 600;
  color: #fff;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fl-power__form {
  display: inline-flex;
  gap: 3px;
}

.fl-power__move {
  font: 700 11px "Orbitron", sans-serif;
  width: 34px;
  text-align: right;
}
.fl-power__move.fl-power__move--up {
  color: #34d399;
}
.fl-power__move.fl-power__move--down {
  color: #f87171;
}
.fl-power__move.fl-power__move--flat {
  color: #6f6f6f;
}

.fl-power__score {
  font: 800 15px "Orbitron", sans-serif;
  color: #fff;
  width: 40px;
  text-align: right;
}

/* A5: weekly award tiles (recap card) and podium row (power card).
   auto-fit + minmax stacks to one column at 375px with no extra media
   query, matching .fl-trophies above. */
.fl-award-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 4px;
  width: 100%;
}

.fl-award {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 11px;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
}

.fl-award__label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9a9a9a;
}

.fl-award__team {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-weight: 600;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.fl-recap__prose {
  color: #9a9a9a;
  font-size: 12.5px;
  margin: 6px 0 0;
  line-height: 1.5;
}

.fl-podium {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 4px;
  width: 100%;
}

.fl-podium__slot {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 11px;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-width: 0;
}

.fl-podium__rank {
  font: 800 14px "Orbitron", sans-serif;
  color: #ffa31a;
  flex: 0 0 auto;
}

.fl-podium__name {
  font-weight: 600;
  color: #fff;
  font-size: 12.5px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* trophies */
.fl-trophies {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.fl-trophy {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.fl-trophy b {
  display: block;
  color: #fff;
  font-size: 14px;
}
.fl-trophy span {
  color: #9a9a9a;
  font-size: 12.5px;
}
.fl-trophy.fl-trophy--gold {
  border-color: rgba(255, 163, 26, 0.45);
  background: rgba(255, 163, 26, 0.06);
}

.fl-trophy__icon {
  font-size: 26px;
  flex: 0 0 auto;
}

/* B1: all-time champions row -- horizontal scroll on mobile rather than
   stacking, since the whole point is scanning across seasons. */
.fl-champions-scroll {
  overflow-x: auto;
}

.fl-champions {
  display: flex;
  gap: 12px;
  padding-bottom: 2px;
}

.fl-champions__card {
  flex: 0 0 auto;
  min-width: 220px;
}

/* head-to-head matrix */
.fl-h2h-scroll {
  overflow-x: auto;
}

.fl-h2h {
  border-collapse: collapse;
  font-size: 12.5px;
}
.fl-h2h th, .fl-h2h td {
  padding: 7px 9px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.fl-h2h thead th {
  background: #1c1c1c;
}
.fl-h2h td {
  color: #cfcfcf;
}

.fl-h2h__rowlabel {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  color: #fff;
  font-weight: 600;
  text-align: left;
}

.fl-h2h__self {
  color: #555;
  background: #161616;
}

.fl-h2h__w {
  color: #34d399;
  background: rgba(52, 211, 153, 0.08);
  font-weight: 700;
}

.fl-h2h__l {
  color: #f87171;
  background: rgba(248, 113, 113, 0.07);
}

/* trade analyzer */
.fl-analyzer {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #181818;
  border: 1px solid rgba(255, 163, 26, 0.3);
}

.fl-analyzer__head {
  font: 700 11px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffa31a;
  margin-bottom: 10px;
}
.fl-analyzer__head span {
  color: #9a9a9a;
}

.fl-analyzer__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.fl-analyzer__title {
  font: 700 13px "Poppins", sans-serif;
  color: #fff;
  margin-bottom: 8px;
}

.fl-analyzer__values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.fl-anval {
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 9px;
  padding: 8px 11px;
  display: grid;
  gap: 1px;
}
.fl-anval__lbl {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9a9a9a;
}
.fl-anval__total {
  font: 800 18px "Orbitron", sans-serif;
  color: #ffa31a;
}
.fl-anval__sub {
  font-size: 10.5px;
  color: #9a9a9a;
}
.fl-anval__sub i {
  color: #cfcfcf;
  font-style: normal;
}

.fl-catrow {
  display: grid;
  grid-template-columns: 1fr 52px 52px 78px;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
}
.fl-catrow__lbl {
  color: #ddd;
}
.fl-catrow__give {
  text-align: right;
  color: #f87171;
  opacity: 0.8;
  font-variant-numeric: tabular-nums;
}
.fl-catrow__get {
  text-align: right;
  color: #34d399;
  opacity: 0.9;
  font-variant-numeric: tabular-nums;
}
.fl-catrow__edge {
  text-align: right;
  font: 700 12px "Orbitron", sans-serif;
  color: #9a9a9a;
}
.fl-catrow.fl-catrow--good .fl-catrow__edge {
  color: #34d399;
}
.fl-catrow.fl-catrow--bad .fl-catrow__edge {
  color: #f87171;
}

.fl-delta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 9px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
}
.fl-delta span {
  color: #9a9a9a;
}
.fl-delta b {
  font: 700 13px "Orbitron", sans-serif;
  color: #cfcfcf;
}
.fl-delta.fl-delta--good b {
  color: #34d399;
}
.fl-delta.fl-delta--bad b {
  color: #f87171;
}

/* =============================================================
   Trade analyzer v2 · trade finder · detailed optimizer
   ============================================================= */
/* team needs */
.fl-needs__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fl-needchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: #232323;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #ddd;
}
.fl-needchip i {
  font-style: normal;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.fl-needchip.fl-needchip--weak {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
}
.fl-needchip.fl-needchip--strong {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.08);
}

.fl-anval__note {
  grid-column: 1/-1;
  margin: 2px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: #9a9a9a;
}
.fl-anval__note b {
  color: #ddd;
}
.fl-anval__note--warn {
  color: #ffa31a;
}
.fl-anval__note--warn b {
  color: #ffa31a;
}

/* fairness gauge — where the deal sits between the two sides. A bar rather
   than another number: "12% gap" is precise and tells you nothing about
   which way, and the marker does that at a glance before anyone reads a
   digit. Tone colours the marker so it agrees with the verdict above it. */
.fl-gauge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font: 600 10.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.fl-gauge__end {
  flex: 0 0 auto;
}

.fl-gauge__track {
  position: relative;
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(248, 113, 113, 0.35), rgba(255, 255, 255, 0.1), rgba(52, 211, 153, 0.35));
}

.fl-gauge__mark {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: #ffa31a;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(27, 27, 27, 0.9);
  transition: left 0.25s ease;
}
.fl-gauge--good .fl-gauge__mark {
  background: #34d399;
}
.fl-gauge--bad .fl-gauge__mark {
  background: #f87171;
}

/* the explanation under the totals */
.fl-why {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 12.5px;
  line-height: 1.6;
  color: #9a9a9a;
}
.fl-why p {
  margin: 0 0 6px;
}
.fl-why p:last-child {
  margin-bottom: 0;
}
.fl-why strong {
  color: #fff;
  font-weight: 700;
}
.fl-why {
  /* The breakdown head sits directly under the last sentence and has only a
     bottom margin of its own, so without this the section label reads as
     part of the paragraph above it. */
}
.fl-why + .fl-analyzer__head {
  margin-top: 14px;
}

/* verdict */
.fl-analyzer__verdict {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.fl-analyzer__verdict b {
  font-size: 15px;
}
.fl-analyzer__verdict.fl-verdict--good b {
  color: #34d399;
}
.fl-analyzer__verdict.fl-verdict--bad b {
  color: #f87171;
}
.fl-analyzer__verdict.fl-verdict--fair b {
  color: #ffa31a;
}

.fl-verdict__val {
  color: #9a9a9a;
  font-size: 12.5px;
}
.fl-verdict__val i {
  color: #ddd;
  font-style: normal;
  font-weight: 700;
}

/* trade finder */
.fl-finder__give {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.fl-finder__controls {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}

.fl-finder__results {
  display: grid;
  gap: 8px;
}

.fl-target {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 11px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.fl-target__main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fl-target__main b {
  color: #fff;
  font-size: 13.5px;
}

.fl-target__main i {
  display: block;
  color: #9a9a9a;
  font-style: normal;
  font-size: 11.5px;
}

.fl-target__helps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.fl-findchip {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: rgba(52, 211, 153, 0.12);
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.3);
}
.fl-findchip.fl-findchip--none {
  background: #262626;
  color: #9a9a9a;
  border-color: rgba(255, 255, 255, 0.09);
}

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

.fl-target__val {
  font: 700 14px "Orbitron", sans-serif;
  color: #fff;
}

.fl-target__diff {
  font-size: 11.5px;
  color: #9a9a9a;
}

/* detailed optimizer */
.fl-optgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.fl-swaps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.fl-swaps li {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 11px;
  border-radius: 10px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
}

.fl-swap__in {
  color: #34d399;
}
.fl-swap__in b {
  color: #fff;
}
.fl-swap__in i {
  color: #9a9a9a;
  font-style: normal;
}

.fl-swap__out {
  color: #f87171;
}
.fl-swap__out b {
  color: #ddd;
}
.fl-swap__out i {
  color: #9a9a9a;
  font-style: normal;
}

.fl-swap__gain {
  font: 700 13px "Orbitron", sans-serif;
  color: #ffa31a;
  text-align: right;
}

/* The card applying its own advice. Right-aligned so it reads as the
   conclusion of the list rather than another row in it. */
.fl-swaps__apply {
  margin-top: 8px;
  margin-left: auto;
  display: block;
}

/* "On the wire": same row grammar as the swaps above it, because it is the
   same question asked of a different pool -- a manager should not have to
   learn a second layout to read it. */
.fl-adds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  /* The swaps above use 1fr 1fr auto because both halves are a player. Here
     the second column is only "over <name>", which hugs its text -- giving
     it an equal share strands a phone-width row in whitespace. */
}
.fl-adds li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 11px;
  border-radius: 10px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
}

.fl-adds__who {
  color: #34d399;
  text-decoration: none;
  display: grid;
}
.fl-adds__who b {
  color: #fff;
}
.fl-adds__who i {
  color: #9a9a9a;
  font-style: normal;
  font-size: 11px;
}
.fl-adds__who:hover b {
  color: #ffa31a;
}

.fl-adds__over {
  color: #9a9a9a;
}
.fl-adds__over b {
  color: #ddd;
}
.fl-adds__over i {
  color: #9a9a9a;
  font-style: normal;
}

.fl-goaldec {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.fl-goaldec li {
  display: grid;
  grid-template-columns: 1.3fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 11px;
  border-radius: 10px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12.5px;
}

.fl-goaldec__name {
  color: #fff;
  font-weight: 600;
}
.fl-goaldec__name i {
  color: #9a9a9a;
  font-weight: 400;
  font-style: normal;
}

.fl-goaldec__opp {
  color: #9a9a9a;
}

.fl-goaldec__rec {
  text-align: right;
  font-weight: 600;
}

.fl-goaldec--start .fl-goaldec__rec {
  color: #34d399;
}

.fl-goaldec--monitor .fl-goaldec__rec {
  color: #ffa31a;
}

.fl-goaldec--off .fl-goaldec__rec {
  color: #6f6f6f;
}

.fl-prow__proj {
  color: #7dd3fc;
  font-weight: 600;
  font-size: 12px;
}

.fl-confirm {
  color: #34d399;
  font-weight: 700;
}

@media (max-width: 760px) {
  .fl-optgrid {
    grid-template-columns: 1fr;
  }
  .fl-target {
    grid-template-columns: 1fr auto;
  }
  .fl-target__helps {
    grid-column: 1/-1;
  }
}
/* =============================================================
   Notifications bell · streaming planner · watchlist ·
   trending · all-play
   ============================================================= */
/* notifications bell */
.fl-bell {
  position: relative;
  display: inline-flex;
}

.fl-bell__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  padding: 0;
  background: #232323;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  color: #cfcfcf;
  cursor: pointer;
}
.fl-bell__btn:hover {
  border-color: rgba(255, 163, 26, 0.5);
  color: #ffa31a;
}
.fl-bell__btn.has-unread {
  color: #ffa31a;
  border-color: rgba(255, 163, 26, 0.5);
}

.fl-bell__badge {
  position: absolute;
  top: -5px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #f87171;
  color: #fff;
  font: 700 10px "Poppins", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.fl-bell__panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  margin-top: 8px;
  width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: #222;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.fl-bell__head {
  padding: 11px 14px;
  font: 700 12px "Poppins", sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  color: #fff;
}

.fl-bell__list {
  list-style: none;
  margin: 0;
  padding: 6px;
  display: grid;
  gap: 4px;
}

.fl-notif {
  border-radius: 9px;
}
.fl-notif a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  color: #ddd;
}
.fl-notif:not(:has(a)) {
  padding: 8px 10px;
  color: #9a9a9a;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
}
.fl-notif:hover {
  background: rgba(255, 255, 255, 0.03);
}
.fl-notif.is-unread {
  background: rgba(255, 163, 26, 0.06);
}
.fl-notif.fl-notif--empty {
  color: #9a9a9a;
  text-align: center;
  display: block;
  padding: 18px;
}

.fl-notif__kind {
  font: 700 9px "IBM Plex Mono", monospace;
  padding: 2px 6px;
  border-radius: 5px;
  background: #2a2a2a;
  color: #9a9a9a;
  text-transform: uppercase;
}
.fl-notif__kind.fl-notif__kind--trade {
  color: #a78bfa;
}
.fl-notif__kind.fl-notif__kind--waiver {
  color: #34d399;
}
.fl-notif__kind.fl-notif__kind--announce {
  color: #ffa31a;
}

.fl-notif__text {
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.fl-notif__time {
  color: #6f6f6f;
  font-size: 10.5px;
  white-space: nowrap;
}

/* streaming games-per-week cell */
.fl-gmwk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  background: #262626;
  color: #cfcfcf;
}
.fl-gmwk.fl-gmwk--good {
  color: #ffa31a;
  background: rgba(255, 163, 26, 0.12);
}
.fl-gmwk.fl-gmwk--hot {
  color: #131313;
  background: #ffa31a;
}
.fl-gmwk.fl-gmwk--none {
  color: #6f6f6f;
}

/* watchlist star */
.fl-starform {
  display: inline;
}

.fl-star {
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  color: #4a4a4a;
  padding: 2px 4px;
  line-height: 1;
}
.fl-star:hover {
  color: #ffa31a;
}
.fl-star.is-on {
  color: #ffa31a;
}

/* trending */
.fl-trending__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.fl-trendrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 13px;
}
.fl-trendrow b {
  color: #fff;
}
.fl-trendrow i {
  color: #9a9a9a;
  font-style: normal;
  font-size: 11.5px;
}
.fl-trendrow .fl-trendrow__n {
  margin-left: auto;
  font: 700 12px "Orbitron", sans-serif;
}
.fl-trendrow .fl-trendrow__n.fl-trendrow__n--up {
  color: #34d399;
}
.fl-trendrow .fl-trendrow__n.fl-trendrow__n--down {
  color: #f87171;
}
.fl-trendrow {
  /* B7: site-wide add count beside the league-local chip */
}
.fl-trendrow .fl-trendrow__site {
  font-size: 10.5px;
  color: #ffa31a;
  white-space: nowrap;
}

/* B7: "Hot across 5V5" -- collapsed behind a native <details> toggle */
.fl-hotsite {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fl-hotsite summary {
  cursor: pointer;
  list-style: none;
}
.fl-hotsite summary::-webkit-details-marker {
  display: none;
}
.fl-hotsite summary::before {
  content: "▸ ";
  color: #9a9a9a;
}
.fl-hotsite[open] summary::before {
  content: "▾ ";
}

/* all-play in standings */
.fl-allplay {
  font-weight: 600;
}

.fl-allplay__pct {
  color: #9a9a9a;
  font-style: normal;
  font-size: 11px;
}

@media (max-width: 760px) {
  .fl-trending__cols {
    grid-template-columns: 1fr;
  }
  .fl-bell__panel {
    width: 280px;
  }
}
/* upward-scroll loading indicator in the feed */
.fl-feed__older {
  text-align: center;
  color: #9a9a9a;
  font-size: 11.5px;
  padding: 8px 0;
}

/* =============================================================
   Design pass: simplest-UX refinements
   ============================================================= */
/* hub bar for returning users (leagues first, actions inline) */
.fl-section--first {
  margin-top: 8px;
}

.fl-hubbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.fl-hubbar .fl-section__title {
  margin-bottom: 0;
}

.fl-hubbar__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* small button size (used by trade finder etc.) */
.fl-btn--sm {
  padding: 8px 14px;
  font-size: 13px;
}

@media (max-width: 760px) {
  /* every data table scrolls horizontally instead of breaking layout */
  .fl-card > .fl-table, .fl-card > table.fl-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  /* inputs >=16px so iOS doesn't auto-zoom on focus */
  .fl-input, select.fl-input {
    font-size: 16px;
  }
  /* Touch targets: big enough to hit, and not one pixel bigger. A 36px
     min-height already guarantees the target, so the padding on top of it
     was buying nothing but height. */
  .fl-btn--xs {
    padding: 6px 11px;
    font-size: 13px;
  }
  .fl-react {
    padding: 5px 10px;
    font-size: 14px;
  }
  .fl-star {
    font-size: 18px;
    padding: 4px 8px;
  }
  .fl-prow__move {
    padding: 7px 12px;
  }
  .fl-datenav__btn {
    width: 38px;
    height: 38px;
  }
  .fl-bell__btn {
    width: 38px;
    height: 32px;
  }
  /* ---- vertical rhythm ------------------------------------------------
     Measured across eight pages, card padding + card margins + card-head
     margins came to 1,580px of pure spacing -- 472px of it on the draft
     room alone, across eight cards. These are the desktop values, applied
     unchanged to a 375px screen. Same visual language, one step tighter:
     the card still reads as a card, it just stops spending 36px of
     vertical padding to say so. */
  /* NOTE, so nobody re-adds it: `.fl-hudhero { min-height: 0 }` here does
     nothing. Four rules set min-height on that element and the one that
     wins is `.fl-hudhero--rafter { min-height: 0 }`, globally, which the
     league hero always carries -- so it is already content-sized at every
     width. The ~16px by which its scrollHeight exceeds clientHeight is the
     decorative crest artwork, not clipped content, and it is there on
     desktop too. */
  .fl-card {
    padding: 12px 13px;
    margin-bottom: 10px;
    border-radius: 13px;
  }
  .fl-card__head {
    margin-bottom: 9px;
    gap: 8px;
  }
  .fl-card__title {
    font-size: 14.5px;
  }
  /* section headings and notes carry desktop margins too */
  .fl-note, .fl-note-inline {
    margin-top: 6px;
    margin-bottom: 6px;
  }
  .fl-subtitle {
    margin: 8px 0 6px;
  }
  /* the draft room stacks eight of these; its own banners are the same
     story -- 12px of padding around a single line of text */
  .fl-autodraft-banner, .fl-stale-banner, .fl-paused-banner {
    margin: 8px 0;
    padding: 8px 12px;
    font-size: 12.5px;
  }
  .fl-recentwrap__title {
    margin-bottom: 5px;
  }
  /* ---- the draft room's own chrome ------------------------------------
     This is the page you sit on with a clock running, and 220px of it was
     spent on a four-item toolbar and a four-toggle preference row. Both
     keep every control; they just stop giving each one its own line. */
  .fl-draft__topbar {
    gap: 6px 10px;
    padding: 9px 12px;
  }
  .fl-draft__topbar .fl-otc__label {
    font-size: 9px;
  }
  .fl-draft__topbar .fl-otc__team {
    font-size: 15px;
  }
  .fl-draft__topbar .fl-otc__pick {
    font-size: 11px;
  }
  .fl-draft__topbar .fl-clock {
    font-size: 26px;
    min-width: 56px;
  }
  .fl-draft__topbar .fl-draft__progress {
    font-size: 11.5px;
    gap: 1px;
  }
  .fl-draft__topbar .fl-inlineform .fl-btn {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }
  .fl-alertprefs {
    margin-top: 6px;
    padding: 6px 10px;
    gap: 6px 12px;
    /* "ON-THE-CLOCK ALERTS" costs a whole line to say what the three
       checkboxes beside it already say */
  }
  .fl-alertprefs .fl-alertprefs__label {
    display: none;
  }
  .fl-alertprefs .fl-alertprefs__opt {
    font-size: 12px;
    gap: 5px;
  }
  .fl-alertprefs .fl-switch {
    margin-left: 0;
  }
  .fl-alertprefs .fl-switch__text {
    font-size: 12px;
  }
}
/* hidden-attribute must always win over component display rules */
.fl-bell__badge[hidden] {
  display: none;
}

/* =============================================================
   Sleeper-style: matchup starters · tabs More dropdown ·
   mobile bottom nav + sheet
   ============================================================= */
/* ---------- matchup starter-vs-starter rows ---------- */
.fl-mstart__cols,
.fl-mstart__row,
.fl-mstart__total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px 44px 52px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.fl-mstart__cols {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.fl-mstart__teamhead {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font: 700 12.5px "Poppins", sans-serif;
  color: #eee;
}
.fl-mstart__teamhead.fl-mstart__teamhead--away {
  justify-content: flex-end;
}

/* Full name where there is room for it; the abbrev takes over on a phone,
   where this column is ~125px and a name would ellipse to nothing. */
.fl-mstart__teamname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fl-mstart__teamabbr {
  display: none;
}

@media (max-width: 560px) {
  .fl-mstart__teamname {
    display: none;
  }
  .fl-mstart__teamabbr {
    display: inline;
  }
}
.fl-mstart__row {
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.fl-mstart__row:last-child {
  border-bottom: 0;
}

.fl-mstart__player {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  border-radius: 8px;
  padding: 2px 4px;
}
.fl-mstart__player:hover {
  background: rgba(255, 255, 255, 0.04);
}
.fl-mstart__player:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 1px;
}
.fl-mstart__player.fl-mstart__player--away {
  flex-direction: row-reverse;
  text-align: right;
}
.fl-mstart__player.fl-mstart__player--empty {
  color: #565656;
  font-size: 12px;
  cursor: default;
}
.fl-mstart__player.fl-mstart__player--empty:hover {
  background: none;
}

.fl-mstart__who {
  min-width: 0;
}
.fl-mstart__who b {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #f2f2f2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-mstart__who i {
  font-style: normal;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #9a9a9a;
  white-space: nowrap;
  overflow: hidden;
}
.fl-mstart__who em {
  font-style: normal;
  color: #c9c9c9;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-mstart__who .fl-mstart__conf {
  color: #34d399;
  font-weight: 700;
}

.fl-mstart__player--away .fl-mstart__who i {
  justify-content: flex-end;
}

.fl-mstart__pts {
  text-align: center;
  font: 700 14px "Poppins", sans-serif;
  color: #ddd;
}
.fl-mstart__pts.is-lead {
  color: #ffa31a;
}

/* points leagues render this as a <button> (the points breakdown popover
   trigger); reset the native button chrome back to the plain-text look and
   add the states a control needs that a span never did. */
button.fl-mstart__pts {
  width: 100%;
  background: none;
  border: 0;
  padding: 2px 0;
  margin: 0;
  cursor: pointer;
  border-radius: 6px;
}
button.fl-mstart__pts:hover {
  background: rgba(255, 163, 26, 0.1);
  color: #ffa31a;
}
button.fl-mstart__pts:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 1px;
}

/* settled starters (game over, or none scheduled today) read as done at a
   glance; still-to-play and live rows keep full contrast. */
.fl-mstart__player.is-final {
  opacity: 0.62;
}

.fl-mstart__slot {
  text-align: center;
  font: 700 10px "Poppins", sans-serif;
  color: #9a9a9a;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  padding: 4px 0;
  letter-spacing: 0.04em;
}

.fl-mstart__total {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.fl-mstart__totalpts {
  text-align: center;
  font: 700 15px "Poppins", sans-serif;
  color: #ddd;
  grid-column: span 2;
}
.fl-mstart__totalpts.is-lead {
  color: #ffa31a;
}
.fl-mstart__totalpts:first-child {
  grid-column: 1/span 2;
}

.fl-mstart__totallabel {
  text-align: center;
  font-size: 10.5px;
  color: #9a9a9a;
  grid-column: 3;
}

.fl-mstart__total .fl-mstart__totalpts:last-child {
  grid-column: 4/span 2;
}

.fl-mstart__bench {
  margin-top: 10px;
}
.fl-mstart__bench summary {
  cursor: pointer;
  list-style: none;
  font: 600 12px "Poppins", sans-serif;
  color: #9a9a9a;
  padding: 6px 0;
}
.fl-mstart__bench summary::-webkit-details-marker {
  display: none;
}
.fl-mstart__bench summary::after {
  content: " ▾";
}
.fl-mstart__bench summary:hover {
  color: #ffa31a;
}
.fl-mstart__bench[open] summary::after {
  content: " ▴";
}

/* ---------- desktop tabs "More" dropdown ---------- */
.fl-tabs__more {
  position: relative;
}
.fl-tabs__more summary {
  list-style: none;
  user-select: none;
}
.fl-tabs__more summary i {
  font-style: normal;
  font-size: 10px;
}
.fl-tabs__more summary::-webkit-details-marker {
  display: none;
}
.fl-tabs__more[open] summary {
  color: #ffa31a;
}

.fl-tabs__morepanel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 70;
  min-width: 170px;
  padding: 6px;
  display: grid;
  gap: 2px;
  background: #212121;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}
.fl-tabs__morepanel a {
  padding: 9px 12px;
  border-radius: 8px;
  color: #ddd;
  font-size: 13.5px;
}
.fl-tabs__morepanel a:hover {
  background: #2a2a2a;
  color: #ffa31a;
}
.fl-tabs__morepanel a.is-active {
  color: #ffa31a;
}
.fl-tabs__morepanel a {
  /* keeps the colour it had as a top-level tab */
}
.fl-tabs__morepanel a.is-commish {
  color: #a78bfa;
}
.fl-tabs__morepanel a.is-commish.is-active {
  color: #ffa31a;
}

/* ---------- mobile bottom nav + more sheet ---------- */
.fl-bottomnav {
  display: none;
}

.fl-sheet {
  display: none;
}

.fl-sheet[hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .fl-tabs {
    display: none;
  }
  .fl {
    padding-bottom: 96px;
  }
  .fl-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: rgba(19, 19, 19, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .fl-bottomnav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: 600 10.5px "Poppins", sans-serif;
    color: #9a9a9a;
  }
  .fl-bottomnav__link svg {
    width: 21px;
    height: 21px;
  }
  .fl-bottomnav__link.is-active {
    color: #ffa31a;
  }
  .fl-bottomnav__link:focus-visible {
    outline: 2px solid #ffa31a;
    outline-offset: -2px;
    border-radius: 8px;
  }
  .fl-popmenu .fl-popmenu__panel,
  .fl-popmenu .fl-popmenu__panel--wide {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    width: auto;
    bottom: calc(96px + env(safe-area-inset-bottom));
    margin-top: 0;
    max-height: calc(100dvh - 190px);
    overflow-y: auto;
    /* Docked full-width it reads as a sheet, so it gets a sheet's weight
       rather than a dropdown's. */
    padding: 14px;
    border-radius: 14px;
    gap: 12px;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.6);
    /* Every control in here is a real target now that there is room for
       them: the panel carries a drop-select, a note field and the confirm. */
  }
  .fl-popmenu .fl-popmenu__panel .fl-input,
  .fl-popmenu .fl-popmenu__panel select,
  .fl-popmenu .fl-popmenu__panel input[type=text],
  .fl-popmenu .fl-popmenu__panel input[type=number],
  .fl-popmenu .fl-popmenu__panel--wide .fl-input,
  .fl-popmenu .fl-popmenu__panel--wide select,
  .fl-popmenu .fl-popmenu__panel--wide input[type=text],
  .fl-popmenu .fl-popmenu__panel--wide input[type=number] {
    width: 100%;
    min-height: 44px;
    font-size: 16px; /* under 16px iOS zooms the page on focus */
  }
  .fl-popmenu .fl-popmenu__panel .fl-btn,
  .fl-popmenu .fl-popmenu__panel--wide .fl-btn {
    min-height: 44px;
    width: 100%;
  }
  .fl-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 90;
  }
  .fl-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
  }
  .fl-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    background: #202020;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px 16px 0 0;
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
  }
  .fl-sheet__panel a {
    padding: 13px 12px;
    border-radius: 10px;
    color: #ddd;
    font-size: 14px;
  }
  .fl-sheet__panel a:hover {
    background: #2a2a2a;
  }
  .fl-sheet__panel a.is-active {
    color: #ffa31a;
  }
  .fl-sheet__grab {
    grid-column: 1/-1;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #3a3a3a;
    margin: 0 auto 6px;
  }
  /* lift the site chat launcher (core _hockey_pages.scss, bottom: 20px)
     clear of the bottom nav — fhl.css only loads on league pages, but the
     core sheet wins the cascade order, hence the !important */
  .chat-widget-fab {
    bottom: 86px !important;
  }
  /* starter rows: tighter center columns, smaller detail text */
  .fl-mstart__cols,
  .fl-mstart__row,
  .fl-mstart__total {
    grid-template-columns: minmax(0, 1fr) 38px 34px 38px minmax(0, 1fr);
    gap: 2px;
  }
  /* Points leagues only (a categories row has three children, not five).
     Five columns left each name 85px of a 375px screen, so every player read
     "Macklin Celeb...". Dropping the points under the name instead of beside
     it gives the name the whole half-row and costs one short line. */
  .fl-mstart:not(.fl-mstart--cats) .fl-mstart__row {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    grid-template-areas: "hwho slot awho" "hpts slot apts";
    row-gap: 0;
    align-items: center;
  }
  .fl-mstart:not(.fl-mstart--cats) .fl-mstart__row > :nth-child(1) {
    grid-area: hwho;
  }
  .fl-mstart:not(.fl-mstart--cats) .fl-mstart__row > :nth-child(2) {
    grid-area: hpts;
    justify-self: start;
  }
  .fl-mstart:not(.fl-mstart--cats) .fl-mstart__row > :nth-child(3) {
    grid-area: slot;
  }
  .fl-mstart:not(.fl-mstart--cats) .fl-mstart__row > :nth-child(4) {
    grid-area: apts;
    justify-self: end;
  }
  .fl-mstart:not(.fl-mstart--cats) .fl-mstart__row > :nth-child(5) {
    grid-area: awho;
  }
  /* the points line is secondary to the name above it */
  .fl-mstart:not(.fl-mstart--cats) .fl-mstart__row .fl-mstart__pts {
    font-size: 11.5px;
    padding: 0 2px;
    min-height: 0;
  }
  /* The headshot sat inside the name block and took ~35px of a 125px column,
     so names still ellipsed ("Macklin Cele...") even after the restructure.
     The name is what the row is for; the crest beside the slot chip already
     carries the visual. */
  .fl-mstart:not(.fl-mstart--cats) .fl-mstart__row .fl-headshot--xs {
    display: none;
  }
  .fl-mstart__who b {
    font-size: 12px;
  }
  .fl-mstart__who i {
    font-size: 10px;
  }
  .fl-mstart__pts {
    font-size: 12.5px;
  }
}
/* ---------- live scoring (fhlMatchup.js) ---------- */
.fl-mstart__pts {
  border-radius: 6px;
}

.fl-mstart__pts.is-bump {
  animation: fl-bump 1.1s ease;
}

@keyframes fl-bump {
  0% {
    background: rgba(255, 163, 26, 0.4);
  }
  100% {
    background: transparent;
  }
}
.fl-live::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  margin: 0 4px 1px 0;
  vertical-align: middle;
  animation: fl-livepulse 1.6s ease-in-out infinite;
}

@keyframes fl-livepulse {
  50% {
    opacity: 0.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fl-mstart__pts.is-bump {
    animation: none;
  }
  .fl-mcard__pts.is-bump {
    animation: none;
  }
  .fl-live::before {
    animation: none;
  }
}
/* ---------- category leagues: starters card without FP columns ---------- */
.fl-mstart--cats .fl-mstart__cols,
.fl-mstart--cats .fl-mstart__row {
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
}
.fl-mstart--cats .fl-mstart__who i {
  white-space: normal;
}

@media (max-width: 760px) {
  .fl-mstart--cats .fl-mstart__cols,
  .fl-mstart--cats .fl-mstart__row {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
  }
}
/* =============================================================
   ICE HUD — EA-NHL / broadcast-HUD design layer
   Broadcast hero band with transparent team-logo backdrop +
   player-headshot cutouts, angular panels, glowing edges.
   ============================================================= */
/* full-bleed helper: cancels the .fl container padding so a band
   spans edge to edge, then re-pads its own content */
.fl-lp, .fl-hudhero--hub, .fl-hudhero--league {
  margin-left: calc(-1 * clamp(12px, 3vw, 36px));
  margin-right: calc(-1 * clamp(12px, 3vw, 36px));
}

/* ---------- the broadcast hero band ---------- */
.fl-hudhero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  background: radial-gradient(120% 140% at 12% -20%, rgba(255, 163, 26, 0.16), transparent 55%), radial-gradient(90% 120% at 100% 120%, rgba(125, 211, 252, 0.1), transparent 60%), linear-gradient(115deg, #141414 0%, #1f1f1f 52%, #171717 100%);
  padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 34px);
  min-height: 168px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* diagonal HUD grid texture */
}
.fl-hudhero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: repeating-linear-gradient(-24deg, rgba(255, 163, 26, 0.045) 0 1px, transparent 1px 26px);
  mask-image: linear-gradient(90deg, #000 0%, transparent 78%);
  pointer-events: none;
}
.fl-hudhero {
  /* glowing amber top edge + angled corner slash */
}
.fl-hudhero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 4;
  background: linear-gradient(90deg, transparent, #ffa31a 30%, #ffa31a 60%, transparent);
  opacity: 0.85;
  pointer-events: none;
}

/* team-logo watermark(s) behind everything */
.fl-hudhero__logos {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.fl-hudhero__logos img {
  position: absolute;
  object-fit: contain;
  filter: grayscale(1) brightness(1.7) contrast(0.8);
  opacity: 0.06;
}
.fl-hudhero__logos img:nth-child(1) {
  width: 360px;
  height: 360px;
  right: -40px;
  top: 50%;
  transform: translateY(-50%) rotate(-8deg);
  opacity: 0.08;
}
.fl-hudhero__logos img:nth-child(2) {
  width: 190px;
  height: 190px;
  right: 220px;
  top: -30px;
  transform: rotate(10deg);
}
.fl-hudhero__logos img:nth-child(3) {
  width: 150px;
  height: 150px;
  right: 320px;
  bottom: -30px;
  transform: rotate(-14deg);
}

/* headshot cutout cast, anchored bottom-right, emerging from the floor */
.fl-hudhero__cast {
  position: absolute;
  right: clamp(10px, 3vw, 40px);
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 62%, transparent 98%);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%);
}
.fl-hudhero__cast img {
  height: clamp(120px, 15vw, 176px);
  width: auto;
  object-fit: contain;
  object-position: bottom;
  margin-left: -34px;
  filter: grayscale(0.85) brightness(0.9) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.55));
  opacity: 0.62;
}
.fl-hudhero__cast img:last-child {
  filter: drop-shadow(-6px 8px 16px rgba(0, 0, 0, 0.6));
  opacity: 1;
  margin-left: -20px;
  height: clamp(140px, 17vw, 200px);
}

/* foreground content — the lower-third */
.fl-hudhero__body {
  position: relative;
  z-index: 3;
  max-width: 62%;
  display: grid;
  gap: 10px;
}

.fl-hudhero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  font: 700 11px "IBM Plex Mono", monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffa31a;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 163, 26, 0.1);
  border: 1px solid rgba(255, 163, 26, 0.35);
}
.fl-hudhero__eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffa31a;
  box-shadow: 0 0 10px #ffa31a;
  animation: fl-livepulse 1.8s ease-in-out infinite;
}

.fl-hudhero__title {
  font: 800 clamp(26px, 4.4vw, 46px)/1.02 "Poppins", sans-serif;
  letter-spacing: -0.01em;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.fl-hudhero__title b {
  color: #ffa31a;
}

.fl-hudhero__sub {
  color: #cfcfcf;
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 54ch;
  margin: 0;
}

/* Draft / lottery-draw countdown chips (Task 10) -- .fl-chip--soon (amber,
   under an hour) is reused from the trade-offer expiry chip. */
.fl-hero-countdowns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.fl-hero-countdowns .fl-chip {
  cursor: pointer;
}
.fl-hero-countdowns .fl-chip:hover {
  border-color: rgba(255, 163, 26, 0.5);
  color: #fff;
}
.fl-hero-countdowns .fl-chip:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

/* HUD stat tiles (angular, glowing) */
.fl-hudstats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.fl-hudstat {
  position: relative;
  padding: 8px 14px 8px 13px;
  min-width: 78px;
  background: rgba(20, 20, 20, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  backdrop-filter: blur(4px);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.fl-hudstat b {
  display: block;
  font: 800 18px "Orbitron", sans-serif;
  color: #fff;
  line-height: 1.1;
}
.fl-hudstat span {
  display: block;
  font: 600 9.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-top: 2px;
}
.fl-hudstat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: #ffa31a;
  box-shadow: 0 0 8px rgba(255, 163, 26, 0.6);
}
.fl-hudstat.is-cyan::before {
  background: #7dd3fc;
  box-shadow: 0 0 8px rgba(125, 211, 252, 0.6);
}

.fl-hudhero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  align-items: center;
}

/* crest + identity cluster inside a hero */
.fl-hudhero__id {
  display: flex;
  align-items: center;
  gap: 14px;
}

.fl-hudhero__crest {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 8px 20px rgba(0, 0, 0, 0.5);
}
.fl-hudhero__crest .fl-ava, .fl-hudhero__crest .fl-ava__img {
  width: 100%;
  height: 100%;
}

/* ---------- card HUD polish (broadcast panel) ---------- */
.fl-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 90px), linear-gradient(180deg, #242424, #1d1d1d);
}
.fl-card::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
  pointer-events: none;
}

/* The overflow:hidden above keeps the layered HUD gradients inside the card
   radius, but it also clips absolutely-positioned children -- which silently
   swallowed every popmenu panel that opened past the card's edge. On the
   championship banner manager the swallowed part was the foot of the panel,
   where "Take down banner" lives, so the delete control looked missing
   rather than clipped. Only cards that actually host a popmenu opt out. */
.fl-card:has(.fl-popmenu) {
  overflow: visible;
}

/* broadcast tick before card titles */
.fl-card__title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.fl-card__title::before {
  content: "";
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ffa31a, rgba(255, 163, 26, 0.4));
  box-shadow: 0 0 8px rgba(255, 163, 26, 0.5);
  flex: 0 0 auto;
}

/* angular primary button (HUD cut corner) */
.fl-btn--primary {
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ---------- matchup VS hero ---------- */
.fl-hudhero--vs {
  min-height: 210px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.fl-vsband {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.fl-vsband__team {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.fl-vsband__team.is-away {
  flex-direction: row-reverse;
  text-align: right;
}

.fl-vsband__crest {
  width: 66px;
  height: 66px;
  border-radius: 16px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 10px 24px rgba(0, 0, 0, 0.5);
}
.fl-vsband__crest .fl-ava, .fl-vsband__crest .fl-ava__img {
  width: 100%;
  height: 100%;
}

.fl-vsband__meta {
  min-width: 0;
}
.fl-vsband__meta b {
  display: block;
  font: 800 clamp(16px, 2vw, 22px)/1.1 "Poppins", sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-vsband__meta span {
  font: 600 12px "IBM Plex Mono", monospace;
  color: #9a9a9a;
}

.fl-vsband__meta .fl-vsband__today {
  display: block;
  margin-top: 2px;
  font: 600 10.5px "Poppins", sans-serif;
  color: #9a9a9a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fl-vsband__score {
  display: grid;
  justify-items: center;
  gap: 4px;
}
.fl-vsband__score b {
  font: 800 clamp(30px, 5.4vw, 64px)/1 "Orbitron", sans-serif;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.fl-vsband__score b i {
  color: #9a9a9a;
  font-style: normal;
  margin: 0 6px;
  font-size: 0.5em;
  vertical-align: middle;
}
.fl-vsband__score > span {
  font: 700 10px "IBM Plex Mono", monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.fl-vsband__score .is-live {
  color: #ffa31a;
  background: rgba(255, 163, 26, 0.12);
}
.fl-vsband__score .is-final {
  color: #9a9a9a;
  background: rgba(255, 255, 255, 0.06);
}

.fl-vsband__vs {
  font: 900 15px "Orbitron", sans-serif;
  color: #ffa31a;
  text-shadow: 0 0 12px rgba(255, 163, 26, 0.6);
}

/* two-sided headshot cast for VS heroes */
.fl-hudhero__cast--split {
  left: 0;
  right: 0;
  justify-content: space-between;
  padding: 0 clamp(6px, 4vw, 60px);
}
.fl-hudhero__cast--split .fl-hudhero__side {
  display: flex;
  align-items: flex-end;
}
.fl-hudhero__cast--split .fl-hudhero__side.is-away img {
  transform: scaleX(-1);
}

/* ---------- hub showcase hero ---------- */
.fl-hudhero--hub {
  min-height: clamp(280px, 34vw, 380px);
}

.fl-hudhero--hub .fl-hudhero__title {
  font-size: clamp(34px, 6vw, 64px);
}

.fl-hudhero--hub .fl-hudhero__body {
  max-width: 60%;
}

.fl-hudhero--hub .fl-hudhero__cast img {
  height: clamp(160px, 22vw, 300px);
}

.fl-hudhero--hub .fl-hudhero__cast img:last-child {
  height: clamp(190px, 25vw, 340px);
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .fl-hudhero__body {
    max-width: 100%;
  }
  .fl-hudhero__cast {
    opacity: 0.4;
    right: -10px;
  }
  .fl-hudhero--hub .fl-hudhero__body {
    max-width: 78%;
  }
  .fl-vsband {
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
  }
  .fl-vsband__crest {
    width: 48px;
    height: 48px;
  }
  .fl-vsband__meta b {
    font-size: 15px;
  }
}
@media (max-width: 560px) {
  .fl-hudhero__cast {
    display: none;
  }
  .fl-hudhero__body {
    max-width: 100%;
  }
  .fl-hudhero--hub .fl-hudhero__body {
    max-width: 100%;
  }
  .fl-hudhero__title {
    font-size: clamp(24px, 8vw, 34px);
  }
  .fl-vsband__meta span {
    display: none;
  }
  .fl-vsband__meta .fl-vsband__today {
    display: block;
  }
  /* At phone width the three-column band squeezed each team column to 55px --
     a 48px crest plus a name ellipsised to nothing -- and left the score no
     room to grow. Giving the score its own full-width row fixes both at once:
     the digits get the band's whole 349px, and the teams get ~170px each. */
  .fl-vsband {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "score score" "home away";
    gap: 12px 10px;
  }
  .fl-vsband__score {
    grid-area: score;
  }
  .fl-vsband__team {
    grid-area: home;
  }
  .fl-vsband__team.is-away {
    grid-area: away;
  }
  /* Same selector and specificity as the base rule, declared later, so this
     wins. 12vw is 45px at 375px, which measures ~294px wide -- inside 349. */
  .fl-vsband__score b {
    font-size: clamp(32px, 9.4vw, 44px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fl-hudhero__eyebrow i {
    animation: none;
  }
}
/* ---------- league hero variant (top of every league page) ---------- */
.fl-hudhero--league {
  margin-top: -18px;
  margin-bottom: 16px;
  border-radius: 0 0 20px 20px;
  border-top: 0;
  padding-left: clamp(18px, 3vw, 40px);
  padding-right: clamp(18px, 3vw, 40px);
  min-height: 156px;
}
.fl-hudhero--league .fl-bell {
  position: absolute;
  top: 16px;
  right: clamp(16px, 3vw, 36px);
  z-index: 5;
}
.fl-hudhero--league .fl-hudhero__crest {
  width: 52px;
  height: 52px;
}
.fl-hudhero--league .fl-hudhero__title {
  font-size: clamp(22px, 3.4vw, 36px);
}

/* hub hero full-bleed at the top of the page */
.fl-hudhero--hub {
  margin-top: -18px;
  margin-bottom: 22px;
  border-radius: 0 0 22px 22px;
  border-top: 0;
  padding-left: clamp(20px, 4vw, 56px);
  padding-right: clamp(20px, 4vw, 56px);
}

.fl-hudhero--hub .fl-hudhero__sub {
  font-size: 15.5px;
  max-width: 46ch;
}

/* ---------- hero entrance (refined via 21st.dev: "Glassmorphism Trust
   Hero" #9950 — its signature staggered fade-slide-up entrance) ---------- */
@keyframes fl-fadeslide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fl-castrise {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.fl-hudhero__body > * {
  animation: fl-fadeslide 0.7s ease-out both;
}

.fl-hudhero__body > *:nth-child(1) {
  animation-delay: 0.02s;
}

.fl-hudhero__body > *:nth-child(2) {
  animation-delay: 0.09s;
}

.fl-hudhero__body > *:nth-child(3) {
  animation-delay: 0.16s;
}

.fl-hudhero__body > *:nth-child(4) {
  animation-delay: 0.23s;
}

.fl-hudstats .fl-hudstat {
  animation: fl-fadeslide 0.6s ease-out both;
}

.fl-hudstats .fl-hudstat:nth-child(1) {
  animation-delay: 0.23s;
}

.fl-hudstats .fl-hudstat:nth-child(2) {
  animation-delay: 0.28s;
}

.fl-hudstats .fl-hudstat:nth-child(3) {
  animation-delay: 0.33s;
}

.fl-hudstats .fl-hudstat:nth-child(4) {
  animation-delay: 0.38s;
}

.fl-hudstats .fl-hudstat:nth-child(5) {
  animation-delay: 0.43s;
}

.fl-hudstats .fl-hudstat:nth-child(6) {
  animation-delay: 0.48s;
}

.fl-hudhero__cast {
  animation: fl-castrise 0.9s ease-out both;
  animation-delay: 0.15s;
}

.fl-vsband > * {
  animation: fl-fadeslide 0.7s ease-out both;
}

.fl-vsband > *:nth-child(1) {
  animation-delay: 0.05s;
}

.fl-vsband > *:nth-child(2) {
  animation-delay: 0.14s;
}

.fl-vsband > *:nth-child(3) {
  animation-delay: 0.23s;
}

@media (prefers-reduced-motion: reduce) {
  .fl-hudhero__body > *, .fl-hudstats .fl-hudstat,
  .fl-hudhero__cast, .fl-vsband > * {
    animation: none;
  }
}
/* =============================================================
   Sleeper-style lineup moves: tap to pick up, tap a glowing
   spot to drop. Ineligible rows dim; eligible rows + slot pulse.
   ============================================================= */
.fl-prow {
  transition: opacity 0.18s ease, transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.fl-prow__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.fl-prow__grip {
  display: flex;
  color: #3a3a3a;
  transition: color 0.16s ease;
}

.fl-prow__lock {
  display: flex;
  color: #9a9a9a;
}

/* weekly-league locked player: dimmed, not tappable */
.fl-prow.is-locked {
  opacity: 0.66;
}

.fl-roster[data-editable="1"] .fl-prow.is-locked[data-player] {
  cursor: default;
}

.fl-roster[data-editable="1"] .fl-prow.is-locked[data-player]:hover {
  border-color: rgba(255, 255, 255, 0.09);
  background: transparent;
}
.fl-roster[data-editable="1"] .fl-prow.is-locked[data-player]:hover .fl-prow__lock {
  color: #9a9a9a;
}

.fl-prow__info {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: #181818;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #9a9a9a;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.fl-prow__info:hover {
  color: #ffa31a;
  border-color: rgba(255, 163, 26, 0.6);
}
.fl-prow__info:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 1px;
}

/* the whole row is tappable to pick a player up (editable rosters only) */
.fl-roster[data-editable="1"] .fl-prow[data-player] {
  cursor: pointer;
}

.fl-roster[data-editable="1"] .fl-prow[data-player]:hover {
  border-color: rgba(255, 163, 26, 0.4);
  background: #242424;
}
.fl-roster[data-editable="1"] .fl-prow[data-player]:hover .fl-prow__grip {
  color: #ffa31a;
}

/* while a player is picked up, dim everything that isn't a valid drop */
.fl-roster.is-selecting .fl-prow:not(.is-target):not(.is-moving) {
  opacity: 0.38;
}

/* the picked-up player */
.fl-prow.is-moving {
  opacity: 1 !important;
  border-color: #ffa31a;
  box-shadow: 0 0 0 2px rgba(255, 163, 26, 0.4), 0 12px 30px rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}
.fl-prow.is-moving .fl-slot {
  color: #ffa31a;
}
.fl-prow.is-moving .fl-prow__grip {
  color: #ffa31a;
}

/* eligible drop targets glow green; their slot badge pulses */
.fl-prow.is-target {
  opacity: 1 !important;
  cursor: pointer;
  border-color: rgba(52, 211, 153, 0.65);
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.4), 0 0 22px rgba(52, 211, 153, 0.13);
}
.fl-prow.is-target:hover {
  background: rgba(52, 211, 153, 0.1);
  border-color: rgba(52, 211, 153, 0.9);
}
.fl-prow.is-target .fl-slot {
  color: #34d399;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.5);
  animation: fl-slotpulse 1.2s ease-in-out infinite;
}

@keyframes fl-slotpulse {
  50% {
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.28);
  }
}
.fl-prow.is-committing {
  opacity: 0.6;
  pointer-events: none;
}

/* helper text + sticky action bar */
.fl-movetip {
  color: #9a9a9a;
  font-size: 12.5px;
  margin: 2px 0 10px;
}

.fl-movebar {
  position: sticky;
  top: 8px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 11px 15px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 163, 26, 0.18), rgba(255, 163, 26, 0.06));
  border: 1px solid rgba(255, 163, 26, 0.45);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  font-size: 14px;
  color: #fff;
}
.fl-movebar b {
  color: #ffa31a;
}
.fl-movebar .fl-btn {
  margin-left: auto;
}

.fl-movebar[hidden] {
  display: none;
}

.fl-movebar__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ffa31a;
  box-shadow: 0 0 10px #ffa31a;
  flex: 0 0 auto;
  animation: fl-livepulse 1.6s ease-in-out infinite;
}

@media (max-width: 760px) {
  /* keep the grip out of the way on mobile; info button stays */
  .fl-prow__grip {
    display: none;
  }
  .fl-prow__actions {
    justify-content: flex-end;
  }
  .fl-movebar {
    top: 4px;
    font-size: 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fl-prow.is-target .fl-slot, .fl-movebar__dot {
    animation: none;
  }
}
/* =============================================================
   Team-coloured league hero — the fantasy team's crest, name and
   colour (no NHL imagery). Falls back to amber when no team colour.
   ============================================================= */
.fl-hudhero--team {
  --team: #ffa31a;
  /* Second crest colour when the logo has one; brand amber otherwise, so a
     single-colour crest still gets a two-tone wash rather than a flat one. */
  --team2: #ffa31a;
}
.fl-hudhero--team::after {
  background: linear-gradient(90deg, transparent, var(--team) 30%, var(--team) 60%, transparent);
}

.fl-hudhero__wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* two washes: the crest's primary from the top-left, its secondary from
     the bottom-right, so an uploaded logo colours the whole band */
  background: radial-gradient(120% 150% at 8% -30%, color-mix(in srgb, var(--team) 42%, transparent), transparent 56%), radial-gradient(90% 130% at 106% 128%, color-mix(in srgb, var(--team2) 26%, transparent), transparent 62%);
}

/* the team's own crest, blown up and faded, as the backdrop -- z-index: 0
   keeps it under the beam (2) and the banner rack (3); position: absolute
   keeps it out of layout; pointer-events: none keeps it non-interactive;
   .fl-hudhero's own overflow: hidden clips it to the hero. */
.fl-hudhero__crestbg {
  position: absolute;
  right: clamp(-34px, 2vw, 22px);
  top: 50%;
  z-index: 0;
  transform: translateY(-50%) rotate(-7deg);
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
}
.fl-hudhero__crestbg .fl-ava {
  width: clamp(160px, 24vw, 290px);
  height: clamp(160px, 24vw, 290px);
  border: 0;
  background: transparent;
  opacity: 0.16;
}
.fl-hudhero__crestbg .fl-ava svg {
  width: 94%;
  height: 94%;
}

/* recolour the amber accents to the team colour */
.fl-hudhero--team .fl-hudhero__eyebrow {
  color: var(--team);
  background: color-mix(in srgb, var(--team) 13%, transparent);
  border-color: color-mix(in srgb, var(--team) 42%, transparent);
}
.fl-hudhero--team .fl-hudhero__eyebrow i {
  background: var(--team);
  box-shadow: 0 0 10px var(--team);
}

.fl-hudhero--team .fl-hudstat::before {
  background: var(--team);
  box-shadow: 0 0 8px color-mix(in srgb, var(--team) 60%, transparent);
}

.fl-hudhero--team .fl-hudstat.is-cyan::before {
  background: #7dd3fc;
  box-shadow: 0 0 8px rgba(125, 211, 252, 0.6);
}

.fl-hudhero--team .fl-hudhero__crest {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--team) 48%, transparent), 0 8px 22px rgba(0, 0, 0, 0.5);
}

/* rafter beam + banner rack layout, added only when my_team is set (the
   league/matchup hero variants keep their existing column layout -- see
   .fl-rafterbeam/.fl-bannerrack/.fl-banner* for the beam and banner
   anatomy itself). CSS Grid rather than flex: below 720px the stats row
   moves out of .fl-hudhero__body to become its own full-width row under
   the wrapped identity+rack line (see _league_hero.html and the 720px
   block below), so .fl-hudstats has to be a grid sibling of .fl-hudhero__
   body here too, placed back into body's own column/row on desktop via
   explicit grid-column/grid-row rather than DOM nesting. */
.fl-hudhero--rafter {
  padding-top: 0;
  padding-bottom: 24px;
  display: grid;
  /* left column (identity + stats) floors at 380px and takes any leftover
     width; right column (banner rack) sizes to its own content and hugs
     the hero's right edge via .fl-bannerrack's own margin-left: auto --
     same visual split as the old flex row (body flex: 1 0 380px, rack
     flex: 1 1 auto), just as two explicit grid columns. */
  grid-template-columns: minmax(380px, 1fr) auto;
  column-gap: 24px;
  /* matches .fl-hudhero__body's own former internal gap (below) so the
     seam between the identity block and the now-separate stats row reads
     the same as when they were both rows in one grid. */
  row-gap: 18px;
  min-height: 0;
}

.fl-hudhero--rafter .fl-hudhero__body {
  grid-column: 1;
  grid-row: 1;
  max-width: 100%;
  padding-top: 40px;
  align-content: center;
  /* a bit more breathing room than the shared 10px .fl-hudhero__body gap --
     needed to land the rafter hero's overall height in the 235-250px
     target band at 1440 with the beam(16)+~24 top and 24 bottom padding. */
  gap: 18px;
}

.fl-hudhero--rafter .fl-hudstats {
  grid-column: 1;
  grid-row: 2;
  /* replaces the fade-in .fl-hudstats lost by moving out of .fl-hudhero__
     body's `> *` nth-child(3) rule above -- same timing. */
  animation: fl-fadeslide 0.7s ease-out both;
  animation-delay: 0.16s;
}

.fl-hudhero--rafter .fl-bannerrack {
  grid-column: 2;
  /* spans both rows; .fl-bannerrack's own align-self: flex-start (below)
     keeps it pinned to the top of that span at its natural content
     height, same as it sat top-aligned in the old stretched flex row. */
  grid-row: 1/3;
}

/* Hot/Cold/Clinched etc sit inline with the Record/Week/FAAB tiles as
   trailing items in the same flex row (see .fl-hudstats), not on their
   own row below -- team_badges is only ever non-empty when my_team is
   set, so this only ever fires on the rafter hero. */
.fl-hudhero--rafter .fl-hudstats .fl-badges {
  align-self: center;
  margin-top: 0;
}

.fl-hudhero__spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(58% 62% at 70% -4%, rgba(255, 206, 140, 0.16), transparent 62%);
}

/* matchup VS hero: home colour glows from the left, away from the right */
.fl-hudhero--vs {
  --home: #ffa31a;
  --away: #ffa31a;
}

.fl-hudhero__vswash {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(80% 150% at -6% 50%, color-mix(in srgb, var(--home) 36%, transparent), transparent 52%), radial-gradient(80% 150% at 106% 50%, color-mix(in srgb, var(--away) 36%, transparent), transparent 52%);
}

.fl-hudhero--vs .fl-vsband__crest {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 10px 24px rgba(0, 0, 0, 0.5);
}

/* =============================================================
   Player scouting dashboard (click-to-open modal)
   ============================================================= */
.fl-modal--wide .fl-modal__panel {
  width: min(760px, 100%);
  padding: 20px 22px;
}

.fl-pd {
  display: grid;
  gap: 14px;
}

.fl-pd .fl-pc__head {
  align-items: center;
}

.fl-pc__badge {
  margin-left: auto;
  text-align: center;
  padding: 6px 12px;
  border-radius: 12px;
  background: rgba(255, 163, 26, 0.1);
  border: 1px solid rgba(255, 163, 26, 0.4);
}
.fl-pc__badge b {
  display: block;
  font: 800 22px "Orbitron", sans-serif;
  color: #ffa31a;
  line-height: 1;
}
.fl-pc__badge span {
  font: 600 9px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.fl-pd__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: -4px;
}

.fl-pd__flag {
  font: 700 11px "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  color: #ddd;
  background: #232323;
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.fl-pd__flag.is-pp1 {
  color: #131313;
  background: #ffa31a;
  border-color: #ffa31a;
}
.fl-pd__flag.fl-pd__flag--muted {
  color: #9a9a9a;
}

.fl-pd__form {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
}
.fl-pd__form.fl-pd__form--hot {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}
.fl-pd__form.fl-pd__form--cold {
  background: rgba(125, 211, 252, 0.15);
  color: #7dd3fc;
}

.fl-pc__draftbtn {
  margin-left: auto;
  align-self: center;
}

.fl-pd__tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.fl-pd__tiles--sec {
  grid-template-columns: repeat(3, minmax(0, 200px));
}

.fl-pd__tile {
  position: relative;
  padding: 9px 11px;
  border-radius: 10px;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.fl-pd__tile b {
  display: block;
  font: 800 18px "Orbitron", sans-serif;
  color: #fff;
  line-height: 1.05;
}
.fl-pd__tile span {
  display: block;
  font: 600 9px "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-top: 3px;
}
.fl-pd__tile i {
  display: flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 10.5px;
  color: #bdbdbd;
  margin-top: 3px;
}
.fl-pd__tile i em {
  font-style: normal;
}
.fl-pd__tile i em.up {
  color: #34d399;
}
.fl-pd__tile i em.down {
  color: #f87171;
}
.fl-pd__tile.is-good {
  border-color: rgba(52, 211, 153, 0.5);
}
.fl-pd__tile.is-good b {
  color: #34d399;
}
.fl-pd__tile.is-hot span, .fl-pd__tile.is-hot b {
  color: #f87171;
}
.fl-pd__tile.is-hot {
  border-color: rgba(248, 113, 113, 0.45);
}
.fl-pd__tile.is-cold {
  border-color: rgba(125, 211, 252, 0.45);
}
.fl-pd__tile.is-cold b {
  color: #7dd3fc;
}

.fl-pd__charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.fl-pd__chart {
  padding: 12px 14px 10px;
  border-radius: 12px;
  background: #191919;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.fl-pd__chart h4 {
  margin: 0 0 8px;
  font: 700 12px "Poppins", sans-serif;
  color: #eee;
}
.fl-pd__chart h4 i {
  font-style: normal;
  color: #9a9a9a;
  font-weight: 400;
  font-size: 11px;
  margin-left: 4px;
}

.fl-pd__svg {
  width: 100%;
  height: auto;
  display: block;
}

.fl-pd__base {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
}

.fl-pd__axis {
  fill: #6f6f6f;
  font: 8px "IBM Plex Mono", monospace;
}

.fl-pd__seasonavg {
  stroke: #7dd3fc;
  stroke-width: 1.5;
}

.fl-pd__chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.fl-pd__chart-head h4 {
  margin: 0;
}
.fl-pd__chart-head select {
  width: auto;
}

.fl-pd__chartlegend {
  margin: 6px 0 0;
  font-size: 10px;
  color: #9a9a9a;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.fl-pd__chartlegend i {
  display: inline-block;
  width: 10px;
  height: 3px;
  margin-right: 4px;
  vertical-align: middle;
  border-radius: 2px;
}

.fl-pd__legend-bar {
  background: rgba(255, 163, 26, 0.35);
}

.fl-pd__legend-roll {
  background: #ffa31a;
}

.fl-pd__legend-season {
  background: #7dd3fc;
}

.fl-pd__chart--rat {
  grid-column: 1/-1;
}

/* Floating on-the-clock pill. z-index above .fl-modal (1000), because the
   whole point is that it survives a player card opening over the room. */
.fl-floatclock {
  position: fixed;
  z-index: 1100;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.96);
  border: 1px solid rgba(255, 163, 26, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
  pointer-events: none; /* never steals a tap from what is underneath */
}
.fl-floatclock[hidden] {
  display: none;
}
.fl-floatclock.is-urgent {
  border-color: rgba(248, 113, 113, 0.75);
  animation: fl-pulse 1s infinite;
}

.fl-floatclock__label {
  font: 700 9.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffa31a;
}

.fl-floatclock__time {
  font: 800 22px "Orbitron", sans-serif;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fl-floatclock.is-urgent .fl-floatclock__time {
  color: #f87171;
}

@media (max-width: 760px) {
  /* clear of the fixed bottom nav */
  .fl-floatclock {
    right: 12px;
    left: auto;
    bottom: calc(72px + env(safe-area-inset-bottom));
    padding: 7px 12px;
  }
  .fl-floatclock .fl-floatclock__time {
    font-size: 19px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fl-floatclock.is-urgent {
    animation: none;
  }
}
/* draft-room actions on the card head: Queue and Draft side by side */
.fl-pc__draftactions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.fl-pc__queuebtn.is-on {
  border-color: rgba(255, 163, 26, 0.6);
  color: #ffa31a;
}

/* card action row: drop / trade block, Sleeper-style */
.fl-pc__actions {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 2px 0 4px;
}

.fl-pc__act {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fl-pc__act svg {
  flex: 0 0 auto;
}
.fl-pc__act.is-on {
  border-color: rgba(255, 163, 26, 0.6);
  color: #ffa31a;
}

.fl-pc__act--drop {
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.08);
  color: #ffb4b4;
}
.fl-pc__act--drop:hover {
  border-color: rgba(248, 113, 113, 0.75);
  background: rgba(248, 113, 113, 0.14);
}

.fl-pc__blocked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #ffa31a;
}

.fl-pc__actmsg {
  font-size: 12px;
  color: #9a9a9a;
}
.fl-pc__actmsg.is-good {
  color: #34d399;
}
.fl-pc__actmsg.is-bad {
  color: #f87171;
}

/* Scouting region: the part of the card that needs the public 5V5 API.
   It arrives after the rest, so it owns a fixed slot in the layout and
   shows skeletons rather than letting the card reflow under the reader. */
.fl-pd__scout {
  grid-column: 1/-1;
  display: contents;
}

.fl-pd__scoutload {
  grid-column: 1/-1;
  display: grid;
  gap: 8px;
  padding: 4px 0;
}

.fl-pd__scoutnote {
  grid-column: 1/-1;
  margin: 6px 0 0;
  color: #9a9a9a;
  font-size: 12.5px;
}

.fl-pd__rrow {
  display: grid;
  grid-template-columns: 92px 1fr 34px;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}

.fl-pd__rlab {
  font-size: 12px;
  color: #cfcfcf;
}

.fl-pd__rtrack {
  height: 8px;
  border-radius: 999px;
  background: #262626;
  overflow: hidden;
}

.fl-pd__rfill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.4s ease;
}

.fl-pd__rval {
  font: 700 13px "Orbitron", sans-serif;
  color: #fff;
  text-align: right;
}

.fl-pd__spark {
  width: 68px;
  height: 20px;
}

.fl-pd__sched h4, .fl-pd__logwrap h4 {
  margin: 0 0 8px;
  font: 700 12px "Poppins", sans-serif;
  color: #eee;
}
.fl-pd__sched h4 i, .fl-pd__logwrap h4 i {
  font-style: normal;
  color: #9a9a9a;
  font-weight: 400;
  font-size: 11px;
  margin-left: 4px;
}

.fl-pd__schedrow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fl-pd__game {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 9px;
  background: #1c1c1c;
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 12px;
}
.fl-pd__game img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}
.fl-pd__game i {
  font-style: normal;
  color: #ddd;
}
.fl-pd__game em {
  font-style: normal;
  color: #9a9a9a;
}

.fl-pd__logwrap {
  overflow-x: auto;
}

table.fl-pd__log {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 520px;
}
table.fl-pd__log th {
  text-align: right;
  font: 700 9.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9a9a9a;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
table.fl-pd__log th:first-child, table.fl-pd__log th:nth-child(2), table.fl-pd__log th:nth-child(3), table.fl-pd__log th:nth-child(4) {
  text-align: left;
}
table.fl-pd__log td {
  padding: 6px;
  text-align: right;
  color: #ddd;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
table.fl-pd__log td:first-child, table.fl-pd__log td:nth-child(2), table.fl-pd__log td:nth-child(3), table.fl-pd__log td:nth-child(4) {
  text-align: left;
  color: #cfcfcf;
}
table.fl-pd__log .fl-pd__opp {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
table.fl-pd__log .fl-pd__opp img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}
table.fl-pd__log .fl-pd__dk {
  color: #ffa31a;
  font-weight: 700;
}
table.fl-pd__log tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

@media (max-width: 620px) {
  .fl-pd__tiles {
    grid-template-columns: repeat(3, 1fr);
  }
  .fl-pd__tiles--sec {
    grid-template-columns: repeat(3, 1fr);
  }
  .fl-pd__charts {
    grid-template-columns: 1fr;
  }
  .fl-pc__badge {
    margin-left: 0;
  }
}
/* ---------- public league browser + join requests ---------- */
/* Cards: 3 desktop, 2 tablet, 1 at mobile widths (see media queries below),
   matching the .fl-how__steps collapse pattern used on this same page. */
.fl-browse {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.fl-browse__card {
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, #242424, #1d1d1d);
  display: grid;
  gap: 8px;
  align-content: start;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.fl-browse__card b {
  color: #fff;
  font-size: 14.5px;
}
.fl-browse__card:hover {
  border-color: rgba(255, 163, 26, 0.45);
  transform: translateY(-2px);
}
.fl-browse__card.fl-browse__card--full {
  opacity: 0.6;
}
.fl-browse__card.fl-browse__card--full:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.09);
}

.fl-browse__pitch {
  color: #9a9a9a;
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.fl-browse__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fl-browse__seats {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fl-browse__seatlabel {
  color: #9a9a9a;
  font-size: 12px;
  white-space: nowrap;
}

.fl-browse__when {
  margin: 0;
  color: #ffa31a;
  font-size: 12.5px;
  font-weight: 600;
}

.fl-browse__approval {
  align-self: start;
}

/* thin seat meter: the bar itself is amber (open seats), a muted overlay
   grows from the left to cover the taken portion */
.fl-seatmeter {
  position: relative;
  flex: 1 1 auto;
  height: 5px;
  min-width: 40px;
  border-radius: 3px;
  overflow: hidden;
  background: #ffa31a;
}
.fl-seatmeter.fl-seatmeter--full {
  background: rgba(255, 255, 255, 0.09);
}

.fl-seatmeter__taken {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  background: rgba(255, 255, 255, 0.14);
}

/* ---- filter chip groups (segmented, links only, no JS required) ------- */
.fl-browsefilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin: 0 0 20px;
}

.fl-browsefilters__group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.fl-browsefilters__label {
  color: #9a9a9a;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.fl-browsefilters__opts {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fl-browsefilters__opts::-webkit-scrollbar {
  display: none;
}

.fl-browsefilters__toggle {
  cursor: pointer;
}
.fl-browsefilters__toggle:hover {
  border-color: rgba(255, 163, 26, 0.5);
  color: #fff;
}
.fl-browsefilters__toggle:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.fl-browsefilters__toggle.is-active {
  background: #ffa31a;
  color: #131313;
  border-color: #ffa31a;
  font-weight: 700;
}
.fl-browsefilters__toggle.is-active:hover {
  color: #131313;
}

.fl-browse__clear {
  color: #9a9a9a;
  font-size: 12.5px;
  text-decoration: underline;
}
.fl-browse__clear:hover {
  color: #ffa31a;
}
.fl-browse__clear:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

.fl-joinreq {
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 10px;
}
.fl-joinreq:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.fl-joinreq__who {
  color: #9a9a9a;
  font-size: 13.5px;
}
.fl-joinreq__who b {
  color: #fff;
}

@media (max-width: 900px) {
  .fl-browse {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .fl-browse {
    grid-template-columns: 1fr;
  }
  .fl-browsefilters {
    gap: 12px;
  }
}
/* ---- Find-a-league mobile touch targets (scoped to #find-a-league so
   the shared .fl-seg / .fl-chip components elsewhere keep their sizing) --- */
@media (max-width: 640px) {
  #find-a-league .fl-browsefilters__group {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1 1 100%;
  }
  #find-a-league .fl-browsefilters__label {
    font-size: 12px;
  }
  #find-a-league .fl-browsefilters__opts {
    width: 100%;
  }
  #find-a-league .fl-seg__btn {
    min-height: 40px;
    padding: 0 14px;
  }
  #find-a-league .fl-chip.fl-browsefilters__toggle {
    min-height: 40px;
    padding: 0 14px;
    box-sizing: border-box;
  }
  #find-a-league .fl-browse__clear {
    min-height: 40px;
    padding: 0 14px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #181818;
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #eee;
    text-decoration: none;
  }
  #find-a-league .fl-browse__clear:hover {
    border-color: rgba(255, 163, 26, 0.6);
    color: #ffa31a;
  }
  #find-a-league .fl-browse__card .fl-btn {
    min-height: 44px;
  }
}
/* ---- Draft countdown (league-home pre-draft card) ---------------------- */
.fl-countdown {
  margin: 0 0 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, #242424, #1d1d1d);
  text-align: center;
}

.fl-countdown__label {
  display: block;
  color: #9a9a9a;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fl-countdown__when {
  display: block;
  margin: 2px 0 10px;
  color: #fff;
  font: 600 13px "Poppins", sans-serif;
}

.fl-countdown__clock {
  display: flex;
  justify-content: center;
  gap: 10px;
  color: #9a9a9a;
  font-size: 13px;
}

.fl-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 44px;
}
.fl-countdown__unit b {
  font: 700 22px "Orbitron", "Poppins", sans-serif;
  color: #ffa31a;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.fl-countdown__unit i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* the room link renders disabled until the lead window opens */
.fl-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: default;
}

.fl-draftwhen {
  margin: 10px 0 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.fl-draftwhen .fl-inlineform {
  margin-top: 6px;
}

/* ---- Draft room: player cards + roster slot tracker ------------------- */
/* Pool rows become cards in the mock-draft idiom: a large team crest faded
   into the back, the headshot lifted in front of it. */
.fl-pcard {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 163, 26, 0.1) 0%, #1f1f1f 58%);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.fl-pcard:hover {
  border-color: rgba(255, 163, 26, 0.35);
  transform: translateY(-1px);
}
.fl-pcard > * {
  position: relative;
  z-index: 1;
}

.fl-pcard__crest {
  position: absolute;
  right: -26px;
  top: 50%;
  width: 108px;
  height: 108px;
  transform: translateY(-50%);
  object-fit: contain;
  opacity: 0.13;
  z-index: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.45));
}

.fl-pcard__shot {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
}
.fl-pcard__shot .fl-headshot {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.07);
  object-fit: cover;
  object-position: top center;
}

/* roster slot tracker: one row per configured slot, pip per opening */
.fl-slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.fl-slot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border-radius: 8px;
  background: #1f1f1f;
  font-size: 12.5px;
}
.fl-slot.is-done {
  background: rgba(52, 211, 153, 0.08);
}
.fl-slot.is-done .fl-slot__code {
  color: #34d399;
}

.fl-slot__code {
  flex: 0 0 34px;
  font: 700 11px "Orbitron", "Poppins", sans-serif;
  letter-spacing: 0.04em;
  color: #ffa31a;
}

.fl-slot__pips {
  display: flex;
  gap: 3px;
  flex: 1;
}

.fl-slot__pip {
  width: 14px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
}
.fl-slot__pip.is-filled {
  background: #ffa31a;
}

.fl-slot__n {
  color: #9a9a9a;
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}

/* ======================================================================
   Fantasy Leagues hub — landing
   Typography-led. The previous hero scaled 150px source art up to 360px,
   which is what read as "blurry"; nothing here renders a raster above its
   intrinsic size, so the page is pixel-sharp at every breakpoint.
   ====================================================================== */
.fl-vh { /* visually hidden, still read */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.fl-lp {
  position: relative;
  overflow: hidden;
  /* full-bleed band: cancel the .fl gutter and re-apply it inside, so the
     background runs edge to edge while the text stays on the page grid */
  margin-top: -18px;
  margin-bottom: 56px;
  padding: clamp(48px, 8vw, 104px) clamp(12px, 3vw, 36px) clamp(40px, 6vw, 72px);
  /* Base sits ON the page colour, so the band has no visible vertical seam
     where it meets the background; the lift comes only from a soft radial
     that has already faded out by the edges. */
  background: radial-gradient(78% 118% at 50% 0%, rgba(255, 163, 26, 0.13) 0%, transparent 62%), #1b1b1b;
  /* divider that fades at both ends instead of butting into the edge */
}
.fl-lp::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.09) 12%, rgba(255, 255, 255, 0.09) 88%, transparent 100%);
}

/* Landing sections share one centred measure. */
/* The measure is declared once, on the OUTERMOST block of each section, and
   nothing inside re-declares it. That is the whole alignment contract for
   this page: hero copy, card grid, mission card, FAQ rows and closing CTA
   all resolve to the same two verticals.

   It used to be applied to the inner blocks instead, which broke two ways:
   `.fl-how__steps { margin: 0 }` is declared later in this file and silently
   cancelled the centring, so the card grid sat 19px left of everything above
   it; and the mission/CTA cards carried a wider max-width that never bound,
   so they ran the full width of the page gutter instead. */
.fl-lp__inner,
.fl-how,
.fl-mission,
.fl-faq,
.fl-lpcta {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
}

/* crest band: native 150px art, never upscaled, low contrast texture */
.fl-lp__crests {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(18px, 4vw, 56px);
  padding-bottom: 18px;
  opacity: 0.07;
  pointer-events: none;
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.fl-lp__crests img {
  width: 150px;
  height: 100px;
  object-fit: contain;
  flex: 0 0 auto;
}

.fl-lp__inner {
  position: relative;
  z-index: 1;
}

/* Hero borrows the site landing page's display treatment (Anton + amber
   outline + mono kicker) so the two pages read as one product. Only the
   sizing is tuned down: this is a section hero, not a full-viewport one. */
.fl-xhero__title {
  margin: 18px 0 0;
  font-size: clamp(3rem, 7.4vw, 7.2rem) !important;
}

.fl-xhero__sub {
  /* lp-xhero__sub caps at 40ch for the homepage's stacked kicker; this one
     is a single separator-joined line, so let it run */
  margin: 20px 0 0 !important;
  max-width: none !important;
  color: #ffa31a;
}

.fl-xhero__lead {
  /* .lp-lead ships margin: 18px 0 0, which leaves it flush left inside a
     centred column, so the inline margins have to be reclaimed here. */
  margin: 16px auto 0;
}

.fl-lp__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 26px;
}

/* The hero is centred, like every section head below it. It was the last
   left-aligned block on the page: display type hard against the left gutter,
   sitting on a centred crest band, above centred heads. Nothing else moved,
   so the page read as two layouts stacked on each other. */
.fl-xhero .fl-lp__inner {
  text-align: center;
}

.fl-xhero .fl-lp__actions,
.fl-xhero .fl-lp__chips {
  justify-content: center;
}

/* Section heads are centred. The site landing page left-aligns its heads
   (lp-tools__head uses align-items: flex-start) and centres only the closing
   CTA, but mixing the two here read as broken alignment, so every head on
   this page is centred and the eyebrow/title/lead stack is centred with it. */
.fl-lp__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 26px;
}
.fl-lp__head .lp-section-title {
  margin-top: 14px;
}
.fl-lp__head .lp-lead {
  margin-left: auto;
  margin-right: auto;
}

.fl-lp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

.fl-lp__note {
  /* clears the crest band so the two never visually collide */
  margin: 18px 0 clamp(56px, 7vw, 88px);
  color: #9a9a9a;
  font-size: 13px;
}

/* ---- closing CTA ----------------------------------------------------- */
.fl-lpcta {
  margin-top: 8px;
  padding: clamp(34px, 5vw, 60px) 26px;
  border-radius: 16px;
  border: 1px solid rgba(255, 163, 26, 0.24);
  text-align: center;
  background: radial-gradient(90% 160% at 50% 0%, rgba(255, 163, 26, 0.15) 0%, transparent 62%), linear-gradient(180deg, #242424, #1d1d1d);
}
.fl-lpcta h2 {
  margin: 0;
  font: 800 clamp(22px, 3.2vw, 34px)/1.2 "Orbitron", "Poppins", sans-serif;
  color: #fff;
}
.fl-lpcta p {
  margin: 12px auto 24px;
  max-width: 52ch;
  color: #b6b6b6;
  font-size: 15px;
}

@media (max-width: 560px) {
  .fl-lp__crests {
    gap: 14px;
    opacity: 0.05;
  }
  .fl-lp__actions .fl-btn,
  .fl-lp__actions .fl-joinform {
    width: 100%;
  }
}
/* ---- how it works ---------------------------------------------------- */
.fl-how__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  counter-reset: step;
}

.fl-how__step {
  position: relative;
  padding: 22px 20px 24px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, #242424, #1d1d1d);
}
.fl-how__step h3 {
  margin: 12px 0 0;
  font: 700 16.5px/1.3 "Poppins", sans-serif;
  color: #fff;
}
.fl-how__step p {
  margin: 9px 0 0;
  color: #b0b0b0;
  font-size: 13.5px;
  line-height: 1.6;
}

.fl-how__num {
  display: block;
  font: 800 13px "Orbitron", "Poppins", sans-serif;
  letter-spacing: 0.1em;
  color: #ffa31a;
}

/* ---- mission --------------------------------------------------------- */
.fl-mission {
  padding: clamp(28px, 4vw, 44px) clamp(22px, 3.5vw, 44px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 3px solid #ffa31a;
  background: radial-gradient(90% 180% at 0% 0%, rgba(255, 163, 26, 0.1) 0%, transparent 58%), linear-gradient(180deg, #242424, #1d1d1d);
}
.fl-mission h2 {
  margin: 12px 0 0;
  font: 800 clamp(21px, 3vw, 31px)/1.22 "Orbitron", "Poppins", sans-serif;
  color: #fff;
}
.fl-mission p {
  margin: 16px 0 0;
  color: #bdbdbd;
  font-size: 15px;
  line-height: 1.7;
}

/* two columns on wide screens: the claim on the left, the argument on the
   right, so the block reads editorially instead of trailing off into space */
.fl-mission__inner {
  display: grid;
  gap: clamp(20px, 4vw, 52px);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: start;
}

.fl-mission__body p:first-child {
  margin-top: 0;
}

.fl-mission__call {
  margin-top: 20px !important;
  color: #ffa31a !important;
  font-weight: 600;
  font-size: 16px !important;
}

@media (max-width: 900px) {
  .fl-mission__inner {
    grid-template-columns: 1fr;
  }
}
/* ---- FAQ ------------------------------------------------------------- */
.fl-faq__list {
  display: grid;
  gap: 10px;
}

.fl-faq__item {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: linear-gradient(180deg, #242424, #1d1d1d);
  transition: border-color 0.2s ease;
}
.fl-faq__item[open] {
  border-color: rgba(255, 163, 26, 0.3);
}
.fl-faq__item:hover {
  border-color: rgba(255, 163, 26, 0.22);
}
.fl-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none; /* hide default marker */
  font: 600 15px/1.4 "Poppins", sans-serif;
  color: #fff;
}
.fl-faq__item summary::-webkit-details-marker {
  display: none;
}
.fl-faq__item summary {
  /* chevron drawn in CSS so there is no icon dependency */
}
.fl-faq__item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid #ffa31a;
  border-bottom: 2px solid #ffa31a;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
.fl-faq__item[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
.fl-faq__item summary:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: -2px;
  border-radius: 12px;
}
.fl-faq__item p {
  margin: 0;
  padding: 0 18px 18px;
  max-width: 74ch;
  color: #b4b4b4;
  font-size: 14px;
  line-height: 1.68;
}

@media (max-width: 900px) {
  .fl-how__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .fl-how__steps {
    grid-template-columns: 1fr;
  }
  .fl-mission h2 {
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fl-faq__item, .fl-faq__item summary::after {
    transition: none;
  }
}
/* ---- commissioner: schedule + theme weeks ---------------------------- */
.fl-rivals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.fl-rival {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 163, 26, 0.28);
  background: rgba(255, 163, 26, 0.07);
  font-size: 12.5px;
  color: #eee;
}
.fl-rival b {
  color: #fff;
}
.fl-rival i {
  color: #9a9a9a;
  font-style: normal;
  font-size: 11.5px;
}

.fl-schedule {
  display: grid;
  gap: 7px;
}

.fl-wk {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background: #1f1f1f;
}
.fl-wk.is-current {
  border-color: rgba(255, 163, 26, 0.34);
}
.fl-wk summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  cursor: pointer;
  list-style: none;
  font-size: 13.5px;
  color: #fff;
}
.fl-wk summary::-webkit-details-marker {
  display: none;
}
.fl-wk summary:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: -2px;
}

.fl-wk__n {
  font: 700 12px "Orbitron", "Poppins", sans-serif;
  color: #ffa31a;
}

.fl-wk__theme {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(255, 163, 26, 0.16);
  color: #ffa31a;
  font-size: 11.5px;
  font-weight: 600;
}

.fl-wk__lock {
  margin-left: auto;
  color: #9a9a9a;
  font-size: 11.5px;
}

.fl-wk__games {
  list-style: none;
  margin: 0;
  padding: 0 13px 10px;
  display: grid;
  gap: 4px;
}
.fl-wk__games li {
  color: #ccc;
  font-size: 12.5px;
}
.fl-wk__games i {
  color: #9a9a9a;
  font-style: normal;
  padding: 0 4px;
}

.fl-wk__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 13px 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* ---- rookie marker ---------------------------------------------------- */
/* Small enough to sit inside a name without disturbing the line, but it
   carries a title so it is not a bare unexplained letter. */
/* injury flag from the Daily Faceoff report. Three states, three weights:
   OUT reads as a hard stop, IR as a warning, DTD as a note -- a manager
   scanning the pool should be able to tell them apart without reading. */
.fl-inj {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  padding: 0 4px;
  height: 14px;
  border-radius: 4px;
  font: 700 9px "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
  vertical-align: middle;
  white-space: nowrap;
}
.fl-inj--out {
  border: 1px solid rgba(248, 113, 113, 0.6);
  background: rgba(248, 113, 113, 0.16);
  color: #ffb4b4;
}
.fl-inj--ir {
  border: 1px solid rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.1);
  color: #ffcfcf;
}
.fl-inj--dtd {
  border: 1px solid rgba(250, 204, 21, 0.45);
  background: rgba(250, 204, 21, 0.1);
  color: #f5dd80;
}

.fl-rook {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  border-radius: 4px;
  border: 1px solid rgba(255, 163, 26, 0.55);
  background: rgba(255, 163, 26, 0.14);
  color: #ffa31a;
  font: 700 9.5px/1 "Orbitron", "Poppins", sans-serif;
  vertical-align: middle;
  cursor: help;
}

/* ---- hero rafter banners ------------------------------------------------ */
/* Championships hang as arena-style rafter banners from a steel beam
   pinned to the team hero's top edge (.fl-hudhero--rafter, added only
   when my_team is set -- see .fl-hudhero--team below for the scoping).
   An uploaded banner (c.banner) IS the banner (object-fit: contain, no
   caption) and opens the lightbox. No banner falls back to a pure-CSS
   pennant in the fixed rafter palette,
   not clickable. Newest first, capped at 5 in the markup (older ones live
   on the full history page, no "+N" overflow tile); mobile hides the 4th
   and 5th via .fl-banner:nth-child(n+4) in the 720px block below rather
   than a second template branch. Markup:
   _league_hero.html + _championship_banner.html. */
.fl-rafterbeam {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  height: 16px;
  background: linear-gradient(#3a3a3a, #1c1c1c 70%, #101010);
  border-bottom: 1px solid rgba(0, 0, 0, 0.8);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.fl-rafterbeam::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.14) 0 3px, transparent 3px 42px);
}

.fl-bannerrack {
  position: relative;
  z-index: 3;
  /* grow: 1 so the rack can claim the width the identity column (flex-basis
     380px, grow: 0) doesn't need, instead of staying content-sized and
     forcing every banner to shrink even when there's spare room. No
     overflow/mask here -- a masked element is rasterized into its own
     compositing layer by the browser, which flattened the hero's wash and
     texture into a visibly darker rectangle behind the banners and put a
     hard edge through their drop shadows. Banners now always shrink to
     fit (see .fl-banner below) instead of needing a fade to hide overflow,
     so the clip box is no longer needed on either breakpoint. */
  flex: 1 1 auto;
  justify-content: flex-end;
  align-self: flex-start;
  margin-left: auto;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  min-width: 0;
  padding-top: 16px;
  padding-right: 56px;
}

.fl-banner {
  /* shrink evenly (up to 8 banners) before any of them dissolve into the
     fade -- flex-basis 96px, floor 60px so a pennant never gets too small
     to read. */
  flex: 0 1 96px;
  min-width: 60px;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transform-origin: 50% -20px;
  animation: fl-sway 6.6s ease-in-out infinite;
  border-radius: 4px;
}
.fl-banner:nth-child(5n+2) {
  animation-duration: 7.5s;
  animation-delay: -1.4s;
}
.fl-banner:nth-child(5n+3) {
  animation-duration: 8.2s;
  animation-delay: -2.6s;
}
.fl-banner:nth-child(5n+4) {
  animation-duration: 7s;
  animation-delay: -0.8s;
}
.fl-banner:nth-child(5n+5) {
  animation-duration: 7.9s;
  animation-delay: -3.2s;
}
.fl-banner[data-lightbox] {
  cursor: pointer;
}
.fl-banner:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 3px;
}

.fl-banner__straps {
  display: flex;
  justify-content: space-between;
  width: 62%;
  height: 22px;
}
.fl-banner__straps i {
  display: block;
  width: 3px;
  background: linear-gradient(#585858, #2b2b2b);
}

.fl-banner:nth-child(5n+2) .fl-banner__straps {
  height: 38px;
}

.fl-banner:nth-child(5n+3) .fl-banner__straps {
  height: 16px;
}

.fl-banner:nth-child(5n+4) .fl-banner__straps {
  height: 44px;
}

.fl-banner:nth-child(5n+5) .fl-banner__straps {
  height: 28px;
}

.fl-banner__hang {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.55));
}

.fl-banner__rod {
  height: 7px;
  margin: 0 -5px;
  border-radius: 3px;
  background: linear-gradient(#5a5a5a, #222);
}

.fl-banner__pennant {
  position: relative;
  width: 100%;
  aspect-ratio: 96/122;
  background: #ff7f1f;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  /* the pennant is a query container so its own inline size (not the
     viewport) drives the inner artwork's scale -- a 96px pennant reads
     the handoff proportions exactly, and a shrunk one (see .fl-banner
     flex-shrink above) scales down with it instead of the text
     overflowing a smaller box. */
  container-type: inline-size;
}

.fl-banner__keyline {
  position: absolute;
  inset: 5.2cqw;
  background: #f3ecdd;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
}

.fl-banner__field {
  position: absolute;
  inset: 8.3cqw;
  background: #0e0e0e;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.1cqw;
  padding-top: 13.5cqw;
  overflow: hidden;
}

.fl-banner__pretitle {
  font: 700 9.4cqw "IBM Plex Mono", monospace;
  letter-spacing: 0.2em;
  color: #ff9b3f;
}

.fl-banner__year {
  font: 800 22.9cqw "Orbitron", sans-serif;
  color: #fff;
  line-height: 1;
}

.fl-banner__label {
  font: 700 9.4cqw "IBM Plex Mono", monospace;
  letter-spacing: 0.24em;
  color: #ffb45e;
}

.fl-banner__icon {
  margin-top: 3.1cqw;
}

.fl-banner__icon svg {
  width: 17.7cqw;
  height: 17.7cqw;
}

/* An uploaded banner (c.banner) IS the banner -- no CSS trim/keyline/field
   pennant wraps it (that produced a banner-inside-a-banner when the art is
   itself a complete pennant with its own rod and trim). The .fl-banner__hang
   wrapper and its steel .fl-banner__rod ARE reused above the image so every
   banner in the rack hangs from the same rod, even though the art also
   carries its own (smaller) rod and finials drawn into the image itself. */
.fl-banner--art {
  flex: 0 1 calc(122px * var(--fl-art-ar, 1219) / 1000);
  min-width: calc(60px * var(--fl-art-ar, 1219) / 1000);
  width: calc(122px * var(--fl-art-ar, 1219) / 1000);
  margin-left: -10px;
  margin-right: -10px;
  container-type: inline-size;
}

.fl-banner__artimg {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: none;
  filter: drop-shadow(0 16px 18px rgba(0, 0, 0, 0.55));
}

@keyframes fl-sway {
  0%, 100% {
    transform: rotate(-1.1deg);
  }
  50% {
    transform: rotate(1.25deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fl-banner {
    animation: none;
  }
}
@media (max-width: 720px) {
  /* row that wraps -- line 1 is the identity column (left) plus the
     banner rack (right, pushed there by .fl-bannerrack's own margin-
     left: auto below); line 2 is .fl-hudstats, forced onto its own full-
     width line by flex: 0 0 100% below. Replaces the old column-reverse
     (rack stacked above identity) stack. */
  .fl-hudhero--rafter {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
  }
  .fl-hudhero--rafter .fl-hudhero__body {
    flex: 1 1 0;
    min-width: 0;
    /* body's own grid (eyebrow row + id row) is otherwise an implicit
       auto-sized column, which sizes to its widest row's max-content
       (the eyebrow pill's un-truncated text) and can overflow past the
       flex item's own shrunk box -- minmax(0, 1fr) lets the column (and
       so the eyebrow/title inside it) actually shrink with it. */
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0;
    /* the rack sits at the top of the row (padding-top: 14px on
       .fl-bannerrack below) -- nudging the identity block down puts the
       name roughly level with the middle of the banners instead of the
       rod at the very top of the row. */
    margin-top: 8px;
    gap: 6px;
  }
  .fl-hudhero--rafter .fl-hudhero__id {
    min-width: 0;
  }
  .fl-hudhero--rafter .fl-hudhero__title {
    font: 800 16px/1.1 "Poppins", sans-serif;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .fl-hudhero--rafter .fl-hudhero__crest {
    width: 30px;
    height: 30px;
  }
  .fl-hudhero--rafter .fl-hudhero__eyebrow {
    font-size: 8.5px;
    padding: 4px 10px;
    /* the identity column shrinks to make room for the rack (see
       .fl-hudhero__body above) -- cap the pill itself so it can't force
       the row wider than the hero; the actual truncation happens on
       .fl-hudhero__eyebrow-text below. */
    max-width: 100%;
  }
  /* text-overflow: ellipsis on the flex container itself (the pill) just
     clips the text mid-letter with no "…" -- the eyebrow is display:
     inline-flex with the pulse dot (<i>) as a sibling flex item, and
     ellipsis only reliably renders on a normal inline/block box, not a
     flex item's own overflow. Wrapping the text in its own span (see
     _league_hero.html) and truncating that instead gives a real
     ellipsis; min-width: 0 is what lets it shrink below its content's
     natural width in the first place. */
  .fl-hudhero--rafter .fl-hudhero__eyebrow-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  /* .fl-hudstats now lives outside .fl-hudhero__body (see _league_hero.
     html) -- flex: 0 0 100% is what forces it onto its own line below
     the identity+rack line above, spanning the full hero width. */
  .fl-hudhero--rafter .fl-hudstats {
    flex: 0 0 100%;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }
  .fl-hudhero--rafter .fl-hudstats::-webkit-scrollbar {
    display: none;
  }
  .fl-hudhero--rafter .fl-hudstat {
    padding: 5px 8px;
    min-width: 0;
    flex: none;
  }
  .fl-hudhero--rafter .fl-hudstat b {
    font-size: 12px;
  }
  .fl-hudhero--rafter .fl-hudstat span {
    font-size: 7.5px;
    letter-spacing: 0.06em;
  }
  .fl-hudhero--rafter .fl-hudstats .fl-badges {
    flex: none;
    margin-top: 0;
  }
  /* the rack moves to the top right instead of stacking above the
     identity column -- flex: 0 0 auto keeps it sized to its own 3
     banners rather than growing to fill the row (.fl-bannerrack's base
     justify-content: flex-end and align-self: flex-start apply
     unchanged), margin-left: auto pushes it to the end of the wrapped
     line it shares with the identity column, padding-right clears the
     notification bell pinned in the corner. */
  .fl-bannerrack {
    flex: 0 0 auto;
    margin-left: auto;
    /* guard against the rack claiming the whole row when the identity
       column has already shrunk to nothing -- 140px keeps at least a
       readable sliver of the crest/eyebrow column, and the banners
       themselves shrink (see .fl-banner below) rather than overflow if
       three of them still don't fit inside what's left. */
    max-width: calc(100% - 140px);
    gap: 6px;
    padding-top: 14px;
    padding-right: 48px;
  }
  /* only the 3 newest survive below 720px -- the rack still renders all
     5 (one markup list on every breakpoint), CSS just hides the 4th and
     5th. */
  .fl-banner:nth-child(n+4) {
    display: none;
  }
  /* 40px basis for the generated pennant, whose aspect-ratio: 96/122
     (above) makes it ~51px tall -- the art banner below is pinned to
     that same 51px height instead of a matching width basis, so a
     wider- or narrower-than-96/122 upload still hangs level with the
     generated ones instead of rendering taller or shorter. */
  /* min-width: 0 overrides the base rule's 60px floor -- with flex-shrink
     already 0 above, that floor only mattered as a shrink limit, but it
     also clamped this fixed 40px basis up to 60px, which is what made
     the generated pennants render taller than the art banner's fixed
     51px height. */
  .fl-banner {
    flex: 0 0 40px;
    min-width: 0;
    width: auto;
  }
  .fl-banner--art {
    /* width follows the image's own ratio at a fixed 51px height (see
       .fl-banner__artimg below) rather than the desktop/pre-720px
       width-basis calc, which made art noticeably larger than the
       generated pennants whenever --fl-art-ar ran wide. */
    flex: 0 0 auto;
    width: auto;
    /* the base rule's min-width: calc(60px * ar/1000) was a shrink floor
       for the old width-basis approach -- meaningless (and liable to
       force extra width past the image's real rendered size) now that
       width just follows the image at a fixed height. */
    min-width: 0;
    /* the base rule's container-type: inline-size applies CSS size
       containment, which makes an auto/content-based width compute to
       ~0 -- fine when width was an explicit calc() (desktop, and the
       pre-720px mobile rule this replaces), broken now that width has
       to follow the image's own intrinsic ratio at a fixed height. */
    container-type: normal;
    margin-left: -3px;
    margin-right: -3px;
  }
  .fl-banner--art .fl-banner__artimg {
    width: auto;
    height: 51px;
  }
  /* rod and straps are hardware, not artwork -- shrink them a step below
     720px rather than scaling with the (much smaller) pennant. */
  .fl-banner__rod {
    height: 5px;
  }
  .fl-banner__straps,
  .fl-banner:nth-child(5n+2) .fl-banner__straps,
  .fl-banner:nth-child(5n+3) .fl-banner__straps,
  .fl-banner:nth-child(5n+4) .fl-banner__straps,
  .fl-banner:nth-child(5n+5) .fl-banner__straps {
    height: 2px;
  }
  /* ---- draft room chat: bottom-sheet toggle instead of the side panel ---- */
  .fl-draftchat {
    display: none;
  }
  .fl-draftchat.is-open {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64vh;
    z-index: 90;
    border-radius: 16px 16px 0 0;
    margin-bottom: 0;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  .fl-draftchat__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 85;
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    background: #ffa31a;
    color: #131313;
    font: 700 13.5px "Poppins", sans-serif;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    cursor: pointer;
  }
  .fl-draftchat__badge {
    background: #131313;
    color: #ffa31a;
    font: 700 11px "IBM Plex Mono", monospace;
    border-radius: 999px;
    padding: 1px 7px;
    min-width: 16px;
    text-align: center;
  }
  .fl-draftchat__badge[hidden] {
    display: none;
  }
  .fl-draftchat__backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 89;
    background: rgba(0, 0, 0, 0.55);
  }
  .fl-draftchat__backdrop[hidden] {
    display: none !important;
  }
  /* the desktop calc() assumes a side column that has been reflowed to
     full-width stacked cards on mobile -- cap instead of chasing it. */
  .fl-pool {
    max-height: 60vh;
  }
}
/* ---- championship lightbox (base_league.html #fl-pennant-lightbox) ---- */
.fl-modal--lightbox .fl-modal__panel {
  width: auto;
  max-width: 92vw;
  padding: 20px;
  text-align: center;
}

.fl-lightbox__img {
  display: block;
  max-width: 92vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  margin: 0 auto 12px;
}

.fl-lightbox__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fl-lightbox__meta b {
  font: 800 15px "Orbitron", sans-serif;
  color: #ffa31a;
}
.fl-lightbox__meta span {
  font-size: 13.5px;
  color: #fff;
}
.fl-lightbox__meta i {
  font-size: 12px;
  color: #9a9a9a;
  font-style: normal;
}

/* Collectible banner provenance block, shown under .fl-lightbox__meta when
   the opened pennant is a collectible (fhlPennants.js). */
.fl-lightbox__provenance {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  text-align: left;
}
.fl-lightbox__provenance p {
  margin: 0 0 3px;
  font-size: 12.5px;
  color: #9a9a9a;
}
.fl-lightbox__provenance b {
  color: #fff;
  font-weight: 600;
  margin-right: 4px;
}

.fl-lightbox__nontransfer {
  color: #ffa31a !important;
  font-style: italic;
}

/* ---- team logo lightbox (base_league.html #fl-logo-lightbox) ---- */
.fl-logo-lightbox__img {
  max-width: 70vmin;
  max-height: 70vmin;
}

/* ---- hero badge row (Feature B8) --------------------------------------- */
/* Compact achievement/status pills under the record, same shape as
   .fl-trophy above but tone-coloured rather than team-coloured, since a
   "Clinched" or "Cold" badge means the same thing in every team's colour. */
.fl-badges {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.fl-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: #ddd;
  cursor: help;
}
.fl-badge b {
  font: 700 11.5px "Poppins", sans-serif;
  letter-spacing: 0.01em;
}
.fl-badge.fl-badge--gold {
  border-color: rgba(255, 163, 26, 0.55);
  background: rgba(255, 163, 26, 0.16);
  color: #ffa31a;
}
.fl-badge.fl-badge--amber {
  border-color: rgba(255, 163, 26, 0.35);
  background: rgba(255, 163, 26, 0.09);
  color: #ffa31a;
}
.fl-badge.fl-badge--cool {
  border-color: rgba(125, 211, 252, 0.4);
  background: rgba(125, 211, 252, 0.1);
  color: #7dd3fc;
}
.fl-badge.fl-badge--red {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.1);
  color: #f87171;
}
.fl-badge.fl-badge--green {
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.1);
  color: #34d399;
}
.fl-badge.fl-badge--tiny {
  padding: 1px 8px;
  font: 700 9.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: default;
  flex: none;
}

.fl-badge__ico {
  width: 12px;
  height: 12px;
  flex: none;
}

@media (max-width: 560px) {
  .fl-badges {
    gap: 5px;
    margin-top: 8px;
  }
  .fl-badge {
    padding: 3px 9px 3px 7px;
  }
  .fl-badge b {
    font-size: 10.5px;
  }
}
/* the team-edit disclosure is where the logo upload lives, so it reads as a
   labelled control rather than a bare pencil glyph */
.fl-rename > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #9a9a9a;
  font-size: 12px;
  cursor: pointer;
  list-style: none;
}
.fl-rename > summary::-webkit-details-marker {
  display: none;
}
.fl-rename > summary:hover {
  border-color: #ffa31a;
  color: #ffa31a;
}
.fl-rename > summary:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}
.fl-rename > summary svg {
  width: 13px;
  height: 13px;
  flex: none;
}

.fl-rename__logo small {
  display: block;
  margin-top: 4px;
  color: #9a9a9a;
  font-size: 11.5px;
  line-height: 1.45;
}

/* ---- commissioner player notes & nicknames (B3) ------------------------ */
/* Nickname rides right after a player's name wherever it renders (rosters,
   matchups, the player pool, the player card); the notedot is a small amber
   glyph that carries the full note text in its title/aria-label so nothing
   is hidden behind a hover-only affordance. */
.fl-nick {
  color: #9a9a9a;
  font-weight: 400;
  font-style: italic;
}

.fl-notedot {
  display: inline-flex;
  align-items: center;
  color: #ffa31a;
  cursor: help;
  vertical-align: middle;
}

.fl-notedot__ico {
  width: 12px;
  height: 12px;
  flex: none;
}

.fl-pc__commishnote {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 163, 26, 0.1);
  border: 1px solid rgba(255, 163, 26, 0.3);
  color: #ddd;
  font-size: 12.5px;
}
.fl-pc__commishnote b {
  color: #ffa31a;
  margin-right: 6px;
}

.fl-notelist {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.fl-notelist__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 12px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  font-size: 13px;
}

.fl-notelist__who {
  flex: 0 0 auto;
}

.fl-notelist__note {
  color: #9a9a9a;
  flex: 1 1 auto;
}

.fl-notelist__actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* ---------- presence (online now) ---------- */
.fl-onlinedot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 5px rgba(52, 211, 153, 0.7);
  vertical-align: middle;
  flex: 0 0 auto;
}
.fl-onlinedot.is-off {
  display: none;
}

.fl-presence-line {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 12.5px;
  color: #9a9a9a;
}
.fl-presence-line .fl-onlinedot {
  width: 8px;
  height: 8px;
}

.fl-hero-viewing {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: #9a9a9a;
}
.fl-hero-viewing a {
  color: #ffa31a;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fl-hero-viewing a:hover {
  text-decoration: none;
}
.fl-hero-viewing a:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

.fl-online-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 10px 0 2px;
  font-size: 12px;
  color: #9a9a9a;
}

.fl-online-row__label {
  margin-right: 4px;
}

.fl-ava.fl-ava--xs {
  width: 18px;
  height: 18px;
  font-size: 7px;
  margin-left: -6px;
  border-color: #1b1b1b;
}
.fl-ava.fl-ava--xs:first-of-type {
  margin-left: 0;
}

/* ---------- Recent-activity preview (league_home; full chat lives on the
   Chat page) ---------- */
.fl-activity__list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 62vh;
  overflow-y: auto;
}

.fl-activity__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 13px;
}

.fl-activity__author {
  font-weight: 700;
  font-size: 12.5px;
  color: #ffa31a;
  flex: 0 0 auto;
}

.fl-activity__text {
  color: #e6e6e6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.fl-activity__time {
  margin-left: auto;
  color: #6f6f6f;
  font-size: 11px;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* A roster move as a card rather than a sentence: who did it, with their
   crest, then the players with headshots and club. The payload has carried
   all of this since feed.player_cards was written; nothing rendered it, so a
   transaction read as grey prose next to a trade-block listing that showed a
   headshot and a crest. */
.fl-actcard {
  display: grid;
  gap: 7px;
  align-items: stretch;
  border-left: 3px solid rgba(255, 255, 255, 0.08);
}

.fl-actcard--add {
  border-left-color: rgba(52, 211, 153, 0.55);
}

.fl-actcard--drop {
  border-left-color: rgba(248, 113, 113, 0.5);
}

.fl-actcard--waiver,
.fl-actcard--trade {
  border-left-color: rgba(167, 139, 250, 0.55);
}

.fl-actcard__head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.fl-actcard__head .fl-ava {
  width: 20px;
  height: 20px;
  font-size: 8px;
  margin: 0;
  flex: 0 0 auto;
}

.fl-actcard__team {
  font: 700 12.5px "Poppins", sans-serif;
  color: #f0f0f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.fl-actcard__moves {
  display: grid;
  gap: 4px;
}

.fl-actmove {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px 7px;
  border-radius: 8px;
  background: #191919;
}
.fl-actmove b {
  font: 600 12.5px "Poppins", sans-serif;
  color: #e9e9e9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-actmove em {
  font-style: normal;
  font: 600 10.5px "IBM Plex Mono", monospace;
  color: #9a9a9a;
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.fl-actmove .fl-headshot--xs {
  flex: 0 0 auto;
}
.fl-actmove {
  /* The direction marker carries the meaning when the row is read quickly,
     so it is not left to colour alone. */
}
.fl-actmove__arrow {
  font: 800 12px "Orbitron", sans-serif;
  width: 11px;
  text-align: center;
  flex: 0 0 auto;
}
.fl-actmove--in .fl-actmove__arrow {
  color: #34d399;
}
.fl-actmove--out {
  opacity: 0.72;
}
.fl-actmove--out b {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.fl-actmove--out__arrow {
  color: #f87171;
}

/* ---------- Chat page: league chat (reused #fl-feed) + private DMs, Sleeper-style ---------- */
.fl-dm {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  min-height: 560px;
  align-items: start;
}

.fl-dm__list, .fl-dm__pane {
  min-width: 0;
}

.fl-dm__list {
  background: linear-gradient(180deg, #242424, #1d1d1d);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 74vh;
  overflow-y: auto;
}

.fl-dm__listhead {
  padding: 4px 8px 8px;
}

.fl-dm__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fl-dm__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font: inherit;
}
.fl-dm__row:hover {
  background: #1f1f1f;
}
.fl-dm__row.is-active {
  background: rgba(255, 163, 26, 0.1);
  border-color: rgba(255, 163, 26, 0.3);
}
.fl-dm__row.fl-dm__row--pinned {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px 12px 0 0;
  margin-bottom: 4px;
}

.fl-dm__rowbody {
  display: grid;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.fl-dm__rowname {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fl-dm__rowpreview {
  color: #9a9a9a;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fl-dm__badge {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ffa31a;
  color: #131313;
  font: 700 10.5px "IBM Plex Mono", monospace;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* .fl-dm__pane is just the right-hand grid track now -- it holds two
   alternately-visible children, the reused #fl-feed panel (untouched, its
   own .fl-card.fl-feed styling) and .fl-dm__thread below (this page's own
   DM view). A plain [hidden] attribute toggles between them; both classes
   set their own `display`, so the [hidden] override below is required or
   the browser's default `[hidden] { display: none }` would lose to them. */
#fl-feed[hidden], .fl-dm__thread[hidden] {
  display: none;
}

.fl-dm__thread {
  background: linear-gradient(180deg, #242424, #1d1d1d);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-height: 560px;
}

.fl-dm__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  margin-bottom: 10px;
}

.fl-dm__headname {
  font: 700 15px "Poppins", sans-serif;
  color: #fff;
}

.fl-dm__back {
  display: none;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  color: #ffa31a;
  font: 600 13px "Poppins", sans-serif;
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
}

.fl-dm__stream {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
  max-height: 58vh;
}

/* Sleeper-style bubbles for direct messages -- deliberately separate from
   .fl-msg (the league feed's row style, reused untouched on #fl-feed) so
   the two surfaces can evolve on their own. */
.fl-msg2 {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 78%;
}

.fl-msg2--theirs {
  align-self: flex-start;
}

.fl-msg2--mine {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.fl-msg2__bubble {
  background: #232323;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: #e6e6e6;
  display: grid;
  gap: 3px;
}

.fl-msg2--mine .fl-msg2__bubble {
  background: rgba(255, 163, 26, 0.16);
  border-color: rgba(255, 163, 26, 0.35);
}

.fl-msg2__text {
  overflow-wrap: break-word;
}

.fl-msg2__time {
  color: #6f6f6f;
  font-size: 10.5px;
}

.fl-dm__seenby {
  display: flex;
  justify-content: flex-end;
  margin-top: -2px;
}

.fl-dm__composer {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.fl-dm__composer .fl-input {
  flex: 1;
}

@media (max-width: 760px) {
  .fl-dm {
    grid-template-columns: 1fr;
  }
  /* The message row is badge + text + timestamp on one flex line. At 375px
     that left the text ~150px of a 272px row, so a 36-character message
     wrapped to three lines and long words broke mid-word. Badge and time
     keep the first line; the text drops to its own full-width line. */
  .fl-msg__row {
    flex-wrap: wrap;
  }
  .fl-msg__time {
    order: 1;
    margin-left: auto;
  }
  .fl-msg__text, .fl-msg__body {
    order: 2;
    flex: 1 1 100%;
    min-width: 0;
  }
  .fl-dm__list {
    max-height: none;
  }
  .fl-dm__pane {
    display: none;
  }
  .fl-dm__back {
    display: inline-flex;
  }
  .fl-dm.is-thread-open .fl-dm__list {
    display: none;
  }
  .fl-dm.is-thread-open .fl-dm__pane {
    display: flex;
  }
  /* ---------------------------------------------------------------
     Chat as a messaging screen, not a squeezed desktop pane.

     The pane above is `display: flex` with no direction, so it laid the
     back button and the conversation out SIDE BY SIDE. On a 375px screen
     that left the message input 60px wide -- it rendered as "Mes:". The
     column here is the whole fix for that; everything below it is what
     makes the result behave like a chat app rather than a card on a page.
     --------------------------------------------------------------- */
  .fl-dm.is-thread-open .fl-dm__pane {
    flex-direction: column;
    gap: 0;
    /* Fill what is left below the site header and above the bottom nav so
       the STREAM scrolls and the composer stays put. Without this the page
       scrolls as a whole and the input leaves the screen the moment there
       are a few messages.

       The height itself is MEASURED, not written here: it is the viewport
       minus however tall the hero and tab row happen to be above it, which
       moves with team name length, badge rows and orientation. A hardcoded
       calc() was wrong by 17px on the first phone it met and pushed the
       composer off the bottom of the screen. fhlChat.js sets --fl-chat-h;
       the dvh fallback below only covers the moment before it runs.

       dvh, not vh: on iOS Safari the URL bar collapses on scroll and 100vh
       is the TALLER of the two states, so a vh-sized shell hides its own
       composer behind the browser chrome until you scroll. */
    height: var(--fl-chat-h, calc(100dvh - 300px));
    min-height: 320px;
  }
  /* .fl-feed carries .fl-card, and the second .fl-card declaration
     (overflow: hidden; position: relative) wins on equal specificity, so
     this has to be written as a two-class selector or the sticky header
     below silently does nothing. */
  .fl-feed.fl-card,
  .fl-dm__thread {
    flex: 1 1 auto;
    min-height: 0; /* a flex child will not shrink without it */
    padding: 0;
    margin: 0;
    border-radius: 14px;
    overflow: hidden;
  }
  /* Conversation header: sticks to the top of the thread while it scrolls,
     so you always know which room you are in. */
  .fl-feed.fl-card > .fl-card__head,
  .fl-dm__head {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0;
    padding: 10px 12px;
    background: #242424;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }
  .fl-feed__stream,
  .fl-dm__stream {
    flex: 1 1 auto;
    min-height: 0;
    /* The desktop caps (62vh / 58vh) fight a flex-sized parent: whichever
       is smaller wins and the stream stops short of the composer. */
    max-height: none;
    padding: 10px 12px;
    gap: 6px;
    /* Keep a flick at the top of the list from scrolling the page behind. */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  /* Composer pinned to the bottom of the conversation. */
  .fl-feed__composer,
  .fl-dm__composer {
    margin: 0;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 6px;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    background: #1d1d1d;
  }
  .fl-feed__composer .fl-input,
  .fl-dm__composer .fl-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
    /* 16px is the threshold below which iOS zooms the page on focus and
       never zooms back out. */
    font-size: 16px;
    border-radius: 999px;
    padding: 0 14px;
  }
  .fl-feed__composer,
  .fl-dm__composer {
    /* 44px tap targets, without making the buttons visually heavier. */
  }
  .fl-feed__composer .fl-btn,
  .fl-dm__composer .fl-btn {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
  }
  /* The GIF hint costs a line of chat and repeats on every load. It sits
     under the composer where it is furthest from where a link is pasted,
     so it is dropped on mobile rather than shrunk. */
  .fl-composer__hint {
    display: none;
  }
  /* Message rows: the reference is denser than the desktop card. */
  .fl-msg {
    padding: 6px 8px;
    gap: 8px;
    background: transparent;
    border-color: transparent;
    border-radius: 10px;
  }
  .fl-msg__row {
    gap: 8px;
  }
  .fl-msg__author {
    font-size: 12px;
  }
  .fl-msg__text {
    font-size: 14px;
    line-height: 1.45;
  }
  /* Time moves up beside the author instead of taking the row's far edge,
     which on a narrow screen stole width from the message itself. */
  .fl-msg__time {
    font-size: 10.5px;
  }
  .fl-msg__reactions {
    padding-left: 32px;
  }
  /* Online row and list head are chrome the conversation does not need
     once it is full-screen. */
  .fl-online-row {
    display: none;
  }
  /* Back control reads as a nav row above the conversation. */
  .fl-dm__back {
    min-height: 44px;
    margin: 0 0 6px;
    padding: 0 2px;
  }
}
/* =============================================================
   Find-in-conversation (league chat)
   Searches the messages already in the stream; see fhlChatSearch.js.
   ============================================================= */
/* The magnifier in the conversation header. */
.fl-chatsearch__open {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: #9a9a9a;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.fl-chatsearch__open:hover {
  color: #ffa31a;
}
.fl-chatsearch__open[aria-expanded=true] {
  color: #ffa31a;
  border-color: rgba(255, 163, 26, 0.45);
}
.fl-chatsearch__open:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

.fl-chatsearch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: #242424;
}

/* This class sets its own `display`, which beats the browser's built-in
   `[hidden] { display: none }` on equal specificity -- so the bar shipped
   permanently open until this was added. Same trap the .fl-dm pane comment
   above records; it is the second time in this file. */
.fl-chatsearch[hidden] {
  display: none;
}

.fl-chatsearch__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  background: #1b1b1b;
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.fl-chatsearch__field:focus-within {
  border-color: #ffa31a;
}

.fl-chatsearch__ico {
  flex: 0 0 auto;
  color: #9a9a9a;
}

.fl-chatsearch__input {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  color: #fff;
  /* 16px or iOS zooms the page on focus and does not zoom back. */
  font-size: 16px;
  outline: none;
}
.fl-chatsearch__input::placeholder {
  color: #9a9a9a;
}
.fl-chatsearch__input {
  /* Safari's own clear affordance would sit next to ours. */
}
.fl-chatsearch__input::-webkit-search-cancel-button {
  display: none;
}

.fl-chatsearch__clear {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #ddd;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.fl-chatsearch__clear:hover {
  background: rgba(255, 255, 255, 0.2);
}

.fl-chatsearch__nav {
  display: inline-flex;
  gap: 2px;
  flex: 0 0 auto;
}
.fl-chatsearch__nav button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #232323;
  color: #ddd;
  cursor: pointer;
}
.fl-chatsearch__nav button:hover {
  color: #ffa31a;
  border-color: rgba(255, 163, 26, 0.45);
}
.fl-chatsearch__nav button:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 1px;
}

.fl-chatsearch__count {
  flex: 0 0 auto;
  font: 600 11.5px "IBM Plex Mono", monospace;
  color: #9a9a9a;
  font-variant-numeric: tabular-nums;
}

.fl-chatsearch__cancel {
  flex: 0 0 auto;
  border: 0;
  background: none;
  color: #ffa31a;
  font: 600 13px "Poppins", sans-serif;
  cursor: pointer;
  padding: 0 2px;
}
.fl-chatsearch__cancel:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

/* A hit, and the one currently stepped to. Amber is the house accent, so
   the CURRENT hit inverts to solid rather than getting a second hue. */
mark.fl-chatsearch__hit {
  background: rgba(255, 163, 26, 0.28);
  color: inherit;
  border-radius: 3px;
  padding: 0 1px;
}
mark.fl-chatsearch__hit.is-current {
  background: #ffa31a;
  color: #1b1b1b;
  font-weight: 600;
}

@media (max-width: 760px) {
  /* The bar sits under the sticky conversation header, so it has to stick
     too or it scrolls away mid-search. */
  .fl-chatsearch {
    position: sticky;
    top: 46px;
    z-index: 2;
  }
  /* Touch targets. The count is dropped rather than shrunk -- at 375px the
     bar is already carrying a field, two arrows and Cancel. */
  .fl-chatsearch__open {
    width: 44px;
    height: 44px;
  }
  .fl-chatsearch__nav button {
    width: 36px;
    height: 36px;
  }
  .fl-chatsearch__count {
    display: none;
  }
}
/* =============================================================
   Roster-move comparison (_move_compare.html)
   One layout for a waiver add and a start/sit, because they are the
   same question asked of a different pair.
   ============================================================= */
.fl-move {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 12px;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.fl-move__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

/* The outgoing side reads as subordinate: same layout, less weight, so the
   eye lands on what you would gain before what you would give up. */
.fl-move__row--drop {
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  opacity: 0.82;
}

.fl-move__badge {
  flex: 0 0 auto;
  font: 700 9.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
}
.fl-move__badge--add {
  background: rgba(52, 211, 153, 0.16);
  color: #34d399;
}
.fl-move__badge--drop {
  background: rgba(248, 113, 113, 0.14);
  color: #f87171;
}

.fl-move__dim {
  opacity: 0.6;
}

.fl-move__who {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 2px;
}

.fl-move__name {
  color: #fff;
  font-size: 13px;
}
.fl-move__name--drop {
  color: #ddd;
}

.fl-move__meta {
  color: #9a9a9a;
  font-style: normal;
  font-size: 11px;
}

/* Per-game rates. They wrap rather than scroll: a hidden stat is one the
   manager will not factor in, which defeats the point of showing it. */
.fl-move__rates {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.fl-move__rate {
  font: 500 10px "IBM Plex Mono", monospace;
  color: #9a9a9a;
  background: #262626;
  border-radius: 5px;
  padding: 1px 5px;
}
.fl-move__rate b {
  color: #ddd;
  font-weight: 700;
}

.fl-move__score {
  flex: 0 0 auto;
  display: grid;
  gap: 1px;
  text-align: right;
}

.fl-move__pts {
  font: 700 13px "Orbitron", sans-serif;
  color: #fff;
  white-space: nowrap;
}
.fl-move__pts--drop {
  color: #9a9a9a;
}

.fl-move__sub {
  color: #9a9a9a;
  font-style: normal;
  font-size: 10px;
}

.fl-move__diff {
  flex: 0 0 auto;
  align-self: center;
  font: 700 11.5px "Orbitron", sans-serif;
  padding: 3px 7px;
  border-radius: 999px;
}
.fl-move__diff.is-up {
  background: rgba(52, 211, 153, 0.16);
  color: #34d399;
}
.fl-move__diff.is-down {
  background: rgba(248, 113, 113, 0.14);
  color: #f87171;
}

.fl-move__details {
  margin-top: 2px;
}

.fl-move__summary {
  cursor: pointer;
  list-style: none;
  font: 700 10px "IBM Plex Mono", monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9a9a9a;
  padding: 4px 0;
}
.fl-move__summary::-webkit-details-marker {
  display: none;
}
.fl-move__summary::before {
  content: "▸";
}
.fl-move__summary:hover {
  color: #ffa31a;
}
.fl-move__summary:focus-visible {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

.fl-move__details[open] .fl-move__summary::before {
  content: "▾";
}

.fl-movetable {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  /* Columns of figures only line up if the digits do. */
  font-variant-numeric: tabular-nums;
}
.fl-movetable th {
  font: 700 9.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a9a9a;
  text-align: right;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.fl-movetable td {
  text-align: right;
  padding: 3px 6px;
  color: #ddd;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.fl-movetable__add {
  color: #34d399;
}
.fl-movetable__drop {
  color: #f87171;
}
.fl-movetable__lbl {
  text-align: left;
  color: #9a9a9a;
}
.fl-movetable__net {
  font-weight: 700;
}
.fl-movetable__net.is-up {
  color: #34d399;
}
.fl-movetable__net.is-down {
  color: #f87171;
}
.fl-movetable__section td {
  text-align: center;
  font: 700 9.5px "IBM Plex Mono", monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #9a9a9a;
  padding-top: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.fl-move__note {
  margin: 6px 0 0;
  font-size: 10.5px;
  line-height: 1.5;
  color: #ffa31a;
}

.fl-move__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 11.5px;
  color: #ffa31a;
  text-decoration: none;
}
.fl-move__link:hover {
  text-decoration: underline;
}

/* The two host cards stop being single-line lists once each row carries a
   comparison, so their items need the full width.
   Scoped through the list class to outrank the base `.fl-adds li` /
   `.fl-swaps li` rules (0,1,1) without !important. Overriding `display`
   alone was not enough and is what squeezed the card to 205px inside a
   417px column: the base also sets grid-template-columns, so the
   comparison kept landing in a `1fr` track beside the link. */
.fl-swaps li.fl-swaps__item,
.fl-adds li.fl-adds__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  padding: 8px;
  align-items: stretch;
}

.fl-swap__line {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: center;
}

@media (max-width: 760px) {
  .fl-swap__line {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .fl-move__rates {
    gap: 3px;
  }
  .fl-move__rate {
    font-size: 9.5px;
  }
  .fl-movetable {
    font-size: 11px;
  }
  /* It is a real tap target, so it gets the 44px minimum. */
  .fl-move__summary {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}
/* Per-player detail inside the trade analyzer's value boxes. Reuses
   .fl-move__rate / .fl-move__rates so a player reads identically here and
   on the roster-move cards. */
.fl-tradeplayers {
  display: grid;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.fl-tradeplayer {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.fl-tradeplayer__top {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 0;
}
.fl-tradeplayer__top b {
  color: #fff;
  font-size: 12.5px;
}
.fl-tradeplayer__top i {
  color: #9a9a9a;
  font-style: normal;
  font-size: 10.5px;
}

/* =============================================================
   Mobile audit fixes
   Found by sweeping all 20 FHL pages at 375px and measuring, rather
   than by eye. Each rule below is a measured failure, not a guess.
   ============================================================= */
@media (max-width: 760px) {
  /* --- iOS focus zoom ------------------------------------------------
     Safari zooms the whole page when a control smaller than 16px takes
     focus, and does NOT zoom back out when it blurs -- the page is just
     left magnified and scrolled sideways. Measured at 13px on .fl-input--sm
     across 8 pages and 12px on --xs, so every typable control and select
     gets the floor. It costs a little width in dense toolbars, which is
     the cheaper of the two problems.

     The modifier selectors have to carry .fl-input as well. They are
     declared nested (`&.fl-input--sm` inside `.fl-input`), so they compile
     to `.fl-input.fl-input--sm` at (0,2,0) and a bare modifier at (0,1,0)
     loses -- which is exactly what happened on the first attempt here. */
  .fl-input,
  .fl-input.fl-input--sm,
  .fl-input.fl-input--xs,
  select.fl-input,
  textarea.fl-input {
    font-size: 16px;
  }
  /* --- tap targets ---------------------------------------------------
     Measured under the 44px minimum. The visual size is deliberately left
     alone and the HIT area is grown with a pseudo-element instead, so the
     compact mobile layout stays compact. Only applied where there is room:
     the gap to the nearest other control was measured first, because
     overlapping targets cause worse mis-taps than small ones do. */
  /* 38x32, nearest control 61px away. */
  .fl-bell__btn {
    position: relative;
  }
  .fl-bell__btn::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  /* 30x30, nearest control 35px away -- 7px of growth each side still
     leaves 21px between them. */
  .fl-prow__info {
    position: relative;
  }
  .fl-prow__info::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  /* 38x38 but sitting FLUSH against the date input (measured gap: 0), so
     this one grows vertically only and buys its horizontal room with a
     margin rather than by overlapping its neighbour. */
  .fl-datenav__btn {
    min-height: 44px;
    margin-inline: 2px;
  }
}
/* Wide data tables between the phone breakpoint and a comfortable laptop.
   The horizontal-scroll treatment stopped at 760px, but the players pool
   still needs ~704px of columns, so at 768 the table spilled out of its
   card and pushed the document to 770 -- a horizontal scrollbar on the
   whole page, with the Add column sitting under the edge of the viewport.
   Measured: docW 770 at 768, 985 at 1000, 1425 at 1440, so the band that
   actually breaks is just above the phone breakpoint.

   This is the SCROLL treatment only, deliberately not the phone
   card-stack: turning tablet rows into stacked cards would be a bigger
   change than the problem, and a table that scrolls is what a tablet
   expects. `overflow-x: auto` shows a scrollbar only when it is needed, so
   the wider end of this range is unaffected. */
@media (min-width: 761px) and (max-width: 1024px) {
  .fl-card > .fl-table,
  .fl-card > table.fl-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}
/* Remaining tap targets from the audit sweep.
   Height only, deliberately. The player-pool row is already 89px tall so
   vertical room is free, but the measured horizontal gaps are tight -- 34px
   from the player cell to the star, and only 6px from the star to Add.
   Widening to 44 would eat that 6px and turn two targets into one
   ambiguous one, which causes worse mis-taps than a short target does. */
@media (max-width: 760px) {
  .fl-star,
  .fl-playercell,
  .fl-prow__player,
  summary.fl-btn,
  .fl-btn.fl-btn--sm,
  .fl-btn.fl-btn--xs {
    min-height: 44px;
  }
  /* These two are inline text links, so they need to become a box before a
     height means anything. */
  .fl-card__more,
  .fl-teamlink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
/* Final audit round. Every selector here is written to MATCH the
   specificity of the rule it has to beat -- checked in the compiled CSS
   first, because in this stylesheet a later rule routinely loses. Heights
   only: the horizontal gaps in these rows were measured at 6px. */
@media (max-width: 760px) {
  /* beats `.fl-table--pool .fl-table__actioncol .fl-star` (0,3,0) */
  .fl-table--pool .fl-table__actioncol .fl-star {
    min-height: 44px;
  }
  /* an explicit height: 30px, so it needs min-height (which wins) rather
     than the font-size bump that was enough for the selects */
  .fl-input.fl-input--xs {
    min-height: 44px;
  }
  /* Disclosure summaries inside FHL carry no class of their own (the
     rename control, the pool's Add menu), so they cannot be reached by a
     class selector. */
  .fl details > summary {
    min-height: 44px;
  }
  /* the "Add on the Players page" link on the move cards */
  .fl-move__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
@media (max-width: 760px) {
  /* The team-logo picker is a native file input, whose browser-drawn
     "Choose file" button came out 18px tall. It carries no class, so it is
     reached through its label. */
  .fl-rename__logo input[type=file] {
    min-height: 44px;
  }
}
@media (max-width: 760px) {
  /* Trade-builder rows are <label>s wrapping a native 13px checkbox, so the
     label IS the target: the checkbox size is irrelevant. Measured at 36px,
     8px short. They are block siblings, so growing them cannot overlap a
     neighbour -- it only lengthens the list. */
  .fl-pickrow {
    min-height: 44px;
  }
  /* Deal-card player chips carry role="button" and open the player card.
     `--pick` variants are inert labels (cursor: default, no role), so they
     are excluded rather than padded out for nothing. The two-class selector
     also clears the flat `.fl-pchip` base. Flex gap between chips is 6px,
     so the 6px of added height cannot collide with a neighbour. */
  .fl-pchip:not(.fl-pchip--pick) {
    min-height: 44px;
  }
  /* A standings team link is 26px tall inside a 45px row -- visually it owns
     the row, but only the text was tappable.
     The pseudo-element trick used elsewhere in this file does NOT work here:
     Chromium does not hit-test a pseudo that overflows a table cell, which
     was verified by probing with elementFromPoint (the box computes at the
     right size and still takes no taps). So the link is grown for real, and
     the growth is cancelled with a matching negative margin -- the anchor's
     border box becomes 44px while the cell contributes the same 26px it did
     before, so the row height and the page length are unchanged.
     Only the standings link is an <a>; every other .fl-teamcell is a <span>
     with nothing to tap, hence the element-qualified selector. */
  a.fl-teamcell {
    min-height: 44px;
    margin-block: -9px;
  }
}
@media (max-width: 760px) {
  /* "Pause draft" was pinned to 32px by `.fl-draft__topbar .fl-inlineform
     .fl-btn` (0,3,0), so the override has to match that, not `.fl-btn--sm`.
     This is a real height rather than a pseudo hit area: the topbar is
     sticky and the page content sits directly beneath it, so an overhanging
     invisible box would take taps meant for the row below. */
  .fl-draft__topbar .fl-inlineform .fl-btn {
    min-height: 44px;
  }
  /* Alert checkboxes: the <label> is the target (the box itself is 15px).
     The three options sit on ONE row, so growing them cannot collide with
     each other -- measured 235px of options in a 301px strip. */
  .fl-alertprefs__opt {
    min-height: 44px;
  }
  /* Position filters: "C", "D" and "G" came out 26-27px wide. The segment
     is 207px inside a 273px parent, so 36px each adds 20px and still fits
     without wrapping. Centred because the label no longer fills the box. */
  .fl-seg__btn {
    min-width: 36px;
    justify-content: center;
  }
  /* Short club names ("Bot 0") made a 29px-wide link. The name column is
     157px with 125px to spare, so widening the target costs no layout.
     Left-aligned deliberately -- it is a name in a list, not a button. */
  .fl-teamlink {
    min-width: 44px;
  }
  /* Lottery sound toggle: an icon button in a header row whose neighbours
     are all non-interactive, so the hit area can be expanded without
     disturbing the layout or stealing taps. */
  .fl-lotto__soundtoggle {
    position: relative;
  }
  .fl-lotto__soundtoggle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}
@media (max-width: 760px) {
  /* The pool's position filters were pinned to 34px by
     `.fl-poolfilters .fl-seg__btn` (0,2,0), so the earlier flat
     `.fl-seg__btn` rule could not reach them. They sit in their own
     horizontal scroll track, so height is free here. */
  .fl-poolfilters .fl-seg__btn {
    min-height: 44px;
  }
}
/* Goalie-start minimum strip on the matchup page. One row for both sides:
   what a manager needs is whether HIS side is short, and a single strip
   reads faster than a badge buried in each column. Amber while short (still
   fixable), red once the week has closed and the categories are gone. */
.fl-gsmin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 8px 0 0;
  padding: 7px 11px;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 9px;
  font-size: 12px;
  color: #ccc;
}

.fl-gsmin__label {
  font: 700 10px "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9a9a;
}

.fl-gsmin__side.is-short {
  color: #ffa31a;
}
.fl-gsmin__side.is-forfeit {
  color: #ff6b6b;
  font-weight: 600;
}

/* Collapsible advice card on My Team. Suggested moves, On the wire and
   Goalie decisions now load CLOSED: they sit above the lineup and pushed the
   thing people came for below the fold, while being read once a day at most.
   Native <details> rather than JS, so it works with scripts blocked and is
   keyboard-operable for free. The head keeps its flex layout; the marker
   follows .fl-kdetails' +/- idiom rather than inventing a third one. */
.fl-cardfold > summary {
  list-style: none;
  cursor: pointer;
}
.fl-cardfold > summary::-webkit-details-marker {
  display: none;
}
.fl-cardfold > summary::after {
  /* not margin-left:auto -- the count pill owns that when present, and
     .fl-card__head's space-between still pins this right without one */
  content: "+";
  margin-left: 8px;
  color: #9a9a9a;
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
}
.fl-cardfold {
  /* closed, the head's 14px bottom margin is just dead space under a title */
}
.fl-cardfold:not([open]) > summary {
  margin-bottom: 0;
}
.fl-cardfold {
  /* .fl-card__head wraps, and the count's auto margin eats the free space,
     so a long descriptive note ("Free agents who beat a starter tonight")
     pushed the +/- marker onto a second line by itself -- measured at 46px
     against 18px for the other heads. Shrinking the note alone does not fix
     it while the auto margin is there to absorb the slack, so the row is
     pinned to one line and the note, the least important thing in it,
     truncates instead. */
}
.fl-cardfold > summary {
  flex-wrap: nowrap;
}
.fl-cardfold {
  /* The title must not be the thing that gives: with nowrap it shrank below
     its own text and wrapped to two lines instead, which is the same 36px
     problem wearing a different hat. */
}
.fl-cardfold > summary > .fl-card__title {
  flex: 0 0 auto;
}
.fl-cardfold > summary > .fl-note-inline {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-cardfold[open] > summary::after {
  content: "−";
}

/* How many suggestions are inside, so a collapsed card still answers the
   question it exists to answer. margin-left:auto carries the marker to the
   right edge with it. Zero is shown rather than hidden: on a closed card
   "0" IS the useful answer (nothing to do today), and an absent badge reads
   as "not loaded" instead. */
.fl-cardfold__count {
  margin-left: auto;
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(255, 163, 26, 0.14);
  border: 1px solid rgba(255, 163, 26, 0.35);
  color: #ffa31a;
  font: 700 11.5px "IBM Plex Mono", monospace;
  text-align: center;
}
.fl-cardfold__count.is-none {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.09);
  color: #9a9a9a;
}
.fl-cardfold__count.is-forfeit {
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.4);
  color: #f87171;
}