@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;
}

.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;
}

.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 ---------- */
.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;
}

/* 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: anywhere;
}

/* 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;
}

.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;
}

.fl-cats-table {
  display: grid;
  gap: 6px;
}

.fl-catrow {
  display: grid;
  grid-template-columns: 90px 1fr 90px;
  gap: 14px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 10px;
  background: #1f1f1f;
}
.fl-catrow.lead-home .fl-catrow__val--home {
  color: #ffa31a;
  font-weight: 700;
}
.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;
}

.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-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;
}

.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;
}

.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;
}

/* 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;
  overflow-x: auto;
  padding: 10px 14px;
}
.fl-upnext[hidden] {
  display: none;
}

.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;
}

.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));
}

.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;
}

/* ---------- 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;
}
.fl-board-live__th.is-mine {
  color: #ffa31a;
}

.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 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;
}

.fl-board-live--big {
  font-size: 12px;
  min-width: calc(40px + var(--fl-board-teams, 6) * 90px);
}
.fl-board-live--big .fl-board-live__cell {
  min-height: 46px;
  padding: 6px 8px;
}
.fl-board-live--big .fl-board-live__cell b {
  font-size: 12.5px;
}
.fl-board-live--big .fl-board-live__cell i {
  font-size: 10.5px;
}
.fl-board-live--big .fl-board-live__th {
  font-size: 11px;
  padding: 6px 4px;
}

/* ---------- 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(1100px, 96vw);
  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;
}

.fa-high {
  font-size: 13px;
  color: #9a9a9a;
}
.fa-high b {
  color: #ffa31a;
  font: 800 20px "Orbitron", sans-serif;
  margin: 0 4px;
}

.fa-high__team {
  color: #ccc;
}

.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-catrow {
    grid-template-columns: 64px 1fr 64px;
    gap: 8px;
  }
  .fl-table--pool {
    display: block;
    overflow-x: auto;
  }
}
/* =============================================================
   Beyond-MVP components (win prob, day strip, form, playoff
   picture, draft grades, player-card modal, a11y)
   ============================================================= */
/* ---- win probability ---- */
.fl-winprob {
  padding: 16px 20px;
}

.fl-winprob__nums {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fl-winprob__pct {
  font: 800 22px "Orbitron", sans-serif;
  color: #cfcfcf;
}
.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: 12px;
  border-radius: 7px;
  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);
}

.fl-winprob__teams {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font: 700 12px "Poppins", sans-serif;
  color: #bdbdbd;
}

/* ---- 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 {
    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;
}

/* 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: 1fr 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;
}

.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;
  }
  /* comfortable touch targets for compact controls */
  .fl-btn--xs {
    padding: 10px 12px;
    font-size: 13px;
  }
  .fl-react {
    padding: 6px 11px;
    font-size: 14px;
  }
  .fl-star {
    font-size: 19px;
    padding: 8px 10px;
  }
  .fl-prow__move {
    padding: 10px 14px;
  }
  .fl-datenav__btn {
    width: 42px;
    height: 42px;
  }
  .fl-bell__btn {
    width: 42px;
    height: 34px;
  }
}
/* 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;
  font: 700 12.5px "Poppins", sans-serif;
  color: #eee;
}
.fl-mstart__teamhead.fl-mstart__teamhead--away {
  justify-content: flex-end;
}

.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;
}

/* ---------- 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__panel,
  .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(100vh - 190px);
    overflow-y: auto;
  }
  .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;
  }
  .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, 5vw, 52px)/1 "Orbitron", sans-serif;
  letter-spacing: 0.02em;
}
.fl-vsband__score b i {
  color: #9a9a9a;
  font-style: normal;
  margin: 0 8px;
  font-size: 0.6em;
  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;
  }
}
@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;
}

.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. */
.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;
}

/* ---- 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;
}

/* ---------- Messages page: league chat + 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 {
  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;
  background: none;
  border: 0;
  color: #ffa31a;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px 0 0;
}

.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) so the two surfaces can evolve on
   their own; the league-chat pane here reuses .fl-msg as-is via
   window.FLFeed.buildMsg instead of reimplementing its system cards. */
.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: anywhere;
}

.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;
  }
  .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;
  }
}