@charset "UTF-8";
/* =============================================================
   5V5 Fantasy Leagues (apps.fhl) — dark/amber design system
   ============================================================= */
.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;
}

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

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

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

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

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

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

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

.fl-hint {
  color: #ffa31a;
  font-size: 13px;
  margin: 0 0 12px;
}
.fl-hint b {
  font-weight: 700;
}

/* ---------- championship banners (hung from the rafters) ---------- */
.fl-champs {
  margin: 4px 0 18px;
}

.fl-champs__rafter {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #3a3a3a 12%, #3a3a3a 88%, transparent);
}

.fl-champs__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 2px;
  justify-content: center;
}

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

.fl-champ__banner {
  position: relative;
  width: 92px;
  padding: 12px 8px 20px;
  text-align: center;
  color: #ffa31a;
  background: linear-gradient(180deg, #241d0e, #1a1a1a);
  border: 1.5px solid rgba(255, 163, 26, 0.55);
  border-top-width: 3px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  /* pennant notch at the bottom */
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
}

.fl-champ__img {
  width: 100%;
  height: 54px;
  object-fit: contain;
  display: block;
  margin-bottom: 4px;
}

.fl-champ__trophy {
  width: 34px;
  height: 34px;
  color: #ffa31a;
}

.fl-champ__year {
  display: block;
  font: 800 17px "Orbitron", sans-serif;
  color: #fff;
  letter-spacing: 0.02em;
}

.fl-champ__title {
  display: block;
  font-size: 10px;
  color: #ffa31a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.25;
  margin-top: 2px;
}

.fl-champ__edit {
  font-size: 11px;
}
.fl-champ__edit > summary {
  cursor: pointer;
  color: #9a9a9a;
  list-style: none;
}
.fl-champ__edit > summary::-webkit-details-marker {
  display: none;
}
.fl-champ__edit > summary:hover {
  color: #ffa31a;
}
.fl-champ__edit form {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  width: 190px;
  background: #1b1b1b;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 10px;
}

.fl-champ__file {
  font-size: 11px;
  color: #9a9a9a;
  display: grid;
  gap: 3px;
}

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

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

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

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

.fl-sbcard {
  display: grid;
  gap: 8px;
  color: #fff;
  margin-bottom: 0;
}
.fl-sbcard:hover {
  border-color: rgba(255, 163, 26, 0.55);
}

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

.fl-sbcard__team {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
}
.fl-sbcard__team span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.fl-sbcard__status {
  color: #9a9a9a;
  font-size: 11.5px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 8px;
}

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

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

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

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

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

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

.fl-pool {
  display: grid;
  gap: 5px;
  max-height: 64vh;
  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;
}

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

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

/* ---- 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 {
  outline: 2px solid #ffa31a;
  outline-offset: 2px;
}

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

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

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

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

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

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

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

/* 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__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;
  }
}
@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;
}
.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;
  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(--team) 20%, transparent), transparent 62%);
}

/* the team's own crest, blown up and faded, as the backdrop */
.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);
}

/* 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__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__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 ---------- */
.fl-browse {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.fl-browse__card {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, #242424, #1d1d1d);
  display: grid;
  gap: 8px;
  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__meta {
  color: #9a9a9a;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fl-browse__cta {
  color: #ffa31a;
  font-size: 13px;
  font-weight: 600;
}

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

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