/* Fantasy Draft page (/draft), in the site's "Broadcast" look: builds on broadcast.css (tokens, site header and
   mode menu, section headers, panels, sheet rows, options, buttons, scorebug, pop-ups, toast) and adds the
   Fantasy Draft's own parts. Its accent is violet, the way gold is 17–0's and red is 151's. Phones first; from
   1000px wide (fantasy.js's wideQuery) the lobby, the draft room and the season sit in columns, and on windows
   560px+ tall they fit the window (the columns scroll inside themselves, the page doesn't). */

:root {
  --violet: #c4b5fd;
  --violet-hover: #d4c8fe;
  --on-violet: #1b1433;
  --on-violet-2: #4a3d7a;
  --violet-tint: rgba(196, 181, 253, 0.14);
  --violet-soft: rgba(196, 181, 253, 0.08);
  --violet-ring: rgba(196, 181, 253, 0.55);
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa3af' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  color-scheme: dark;
}
.fd-page :focus-visible { outline-color: var(--violet); }

/* The menu: Fantasy Draft is this page */
.mode-fd[aria-current="page"] { background: var(--violet); color: var(--on-violet); }
.mode-fd[aria-current="page"] b { color: var(--on-violet); }
.mode-fd[aria-current="page"] > span { color: var(--on-violet-2); }

/* ======================================================================================== page */
.fd-main { grid-area: main; min-width: 0; padding: 0 var(--gutter) 24px; }
.fd-view, .fd-main > .fd-fine, .fd-loading { width: 100%; max-width: 640px; margin-inline: auto; }
.fd-view:not([hidden]) { display: flex; flex-direction: column; }
body[data-view="fd-home"] .fd-sr-h1 { display: none; }
.fd-loading { margin-top: 60px; margin-bottom: 60px; text-align: center; color: var(--muted); }
.fd-fine { margin: 28px auto 0; font-size: 11px; line-height: 1.5; color: var(--subtle); }
.fd-fine-home { display: none; }
.fd-view > .sec:first-child, .fd-view > div > .sec:first-child { margin-top: 18px; }

/* ---------- shared parts ---------- */
.fd-hint { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.fd-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.fd-note:empty { display: none; }
.fd-sec-note { order: 2; font-size: 13px; white-space: nowrap; color: var(--muted); }
.fd-sec-btn { order: 2; font-size: 13px; }
.sec h2 .fd-count { margin-left: 4px; color: var(--muted); }
.btn.violet { background: var(--violet); color: var(--on-violet); }
.btn.violet:hover:not(:disabled) { background: var(--violet-hover); }
.fd-input {
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--tag-border);
  border-radius: 6px;
  background: var(--tag);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px; /* iPhones zoom in on anything smaller */
  transition: border-color 0.15s;
}
.fd-input::placeholder { color: var(--subtle); }
.fd-input:focus { outline: none; border-color: var(--violet); }
.fd-input:disabled { opacity: 0.55; }
input[type="search"].fd-input { -webkit-appearance: none; appearance: none; }
.fd-select {
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 34px 0 12px;
  border: 1px solid var(--tag-border);
  border-radius: 6px;
  background: var(--tag) var(--chevron) no-repeat right 10px center / 16px 16px;
  color: var(--text);
  font-family: var(--rc);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-overflow: ellipsis;
}
.fd-select:hover { border-color: rgba(255, 255, 255, 0.4); }
.fd-select:focus { outline: none; border-color: var(--violet); }
.fd-select option { background: var(--panel); color: var(--text); text-transform: none; }
@media (max-width: 999px), (pointer: coarse) {
  .fd-select { font-size: 16px; } /* iPhones zoom in on a menu under 16px when it's tapped */
}
/* Badges: Host, You, Computer / CPU, Away */
.fd-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  font-family: var(--rc);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.fd-badge.host { color: var(--gold); border-color: rgba(242, 194, 48, 0.5); }
.fd-badge.you { color: var(--violet); border-color: var(--violet-ring); }
.fd-badge.away { color: var(--red-light); border-color: rgba(248, 113, 113, 0.5); }
/* Options a little bigger to tap; .fd-o2 / .fd-o4 are two or four of them, --w wide (phones) */
.opts.fd-o2 { grid-template-columns: repeat(2, var(--w, 80px)); }
.opts.fd-o4 { grid-template-columns: repeat(4, var(--w, 50px)); }
.opts.fd-w44 { --w: 44px; }
.opts.fd-w50 { --w: 50px; }
.opts.fd-w80 { --w: 80px; }
.opts.fd-w92 { --w: 92px; }
.fd-page .opts label > span { min-height: 44px; }
/* A text button on a line of its own (broadcast.css's sits inside rows) */
.fd-page .fd-leave, .fd-page .fd-place-cancel { display: block; margin: 0 auto; font-size: 13.5px; }

/* ======================================================================================== home */
.fd-home-top { padding-top: 18px; }
.fd-h1 { margin: 0; font-family: var(--rc); font-size: 34px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.fd-h1 span { color: var(--violet); }
.fd-intro { margin: 10px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.fd-create { display: flex; flex-direction: column; }
.fd-create-panel { display: contents; }

/* Settings (Start a league, and the host's Edit settings): phones, sheet rows (label left, options right) */
.fd-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-height: 56px;
  padding: 6px 10px 6px 14px;
}
.fd-cell + .fd-cell { border-top: 1px solid var(--line); }
.fd-cell > .lbl { flex: none; }
.fd-cell > .fd-hint { flex-basis: 100%; margin-top: -2px; padding-bottom: 6px; }
.fd-cell-mode .fd-select { flex: 0 1 220px; }
.fd-set-head { padding: 14px 14px 4px; }
.fd-set-head h2 { margin: 0; font-family: var(--rc); font-size: 16px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.fd-set-head + .fd-cell { border-top: 0; }
.fd-set-foot { padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.fd-set-foot .btn { width: 100%; }
.fd-settings { margin-top: 12px; }

/* Your team: name, then defense and offense rows */
.fd-team-form { display: flex; flex-direction: column; }
.fd-name-row { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.fd-name-row + .row { border-top: 1px solid var(--line); }
.fd-create-btn { margin-top: 14px; }

/* Join with a code */
.fd-code-row { display: flex; gap: 8px; }
#j-code { font-family: var(--rc); font-size: 20px; font-weight: 800; letter-spacing: 0.28em; text-transform: uppercase; }
#j-code::placeholder { letter-spacing: 0.28em; }
.fd-code-row .btn { flex: none; height: 44px; padding: 0 16px; font-size: 15px; }

/* Public lobbies, your leagues */
.fd-lobby-list { margin: 0; padding: 0; list-style: none; }
.fd-lobby-row { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 8px 10px 8px 14px; }
.fd-lobby-row + .fd-lobby-row { border-top: 1px solid var(--line); }
.fd-lobby-row > div { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.fd-lobby-row b { overflow: hidden; font-family: var(--rc); font-size: 16px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.fd-lobby-row small { font-size: 12.5px; color: var(--muted); }
.fd-lobby-row .btn { flex: none; height: 44px; padding: 0 14px; font-size: 15px; }
.fd-empty { padding: 14px; font-size: 13px; line-height: 1.45; color: var(--muted); }

/* ======================================================================================== lobby */
.fd-lobby-main, .fd-lobby-teams, .fd-lobby-side { display: flex; flex-direction: column; min-width: 0; }
.fd-invite { display: flex; flex-direction: column; align-items: flex-start; padding-top: 18px; }
.fd-invite > .lbl { font-size: 13px; letter-spacing: 0.06em; }
.fd-code {
  display: inline-flex;
  align-items: center;
  height: 56px;
  margin: 8px 0 10px;
  padding: 0 16px;
  border: 1px solid var(--tag-border);
  border-radius: 6px;
  background: var(--tag);
  font-family: var(--rc);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--violet);
}
.fd-code:empty { display: none; }
#l-summary { font-size: 13px; }
.fd-invite-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; align-self: stretch; margin-top: 14px; }
.fd-invite-actions:has(#l-edit[hidden]) { grid-template-columns: 1fr; }
#l-start { margin-top: 16px; }
#l-leave { margin-top: 14px; }

/* Seats */
.fd-seats { margin: 0; padding: 0; list-style: none; }
.fd-seat { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 8px 8px 12px; }
.fd-seat + .fd-seat { border-top: 1px solid var(--line); }
.fd-seat.me { background: var(--violet-soft); box-shadow: inset 3px 0 0 var(--violet); }
.fd-seat-n {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--tag-border);
  border-radius: 5px;
  background: var(--tag);
  font-family: var(--rc);
  font-size: 16px;
  font-weight: 800;
  color: var(--muted);
}
.fd-seat-info { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.fd-seat-info b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.fd-seat-info small { font-family: var(--rc); font-size: 12.5px; font-weight: 700; text-transform: uppercase; color: var(--subtle); }
.fd-seat.open { min-height: 56px; padding-right: 12px; }
.fd-seat.open .fd-seat-n { border-style: dashed; background: transparent; color: var(--subtle); }
.fd-seat.open .fd-seat-info { font-family: var(--rc); font-size: 15px; font-weight: 800; text-transform: uppercase; color: var(--subtle); }
.fd-seat-tools { display: flex; flex: none; gap: 6px; }
.fd-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ghost-border);
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.fd-icon:hover:not(:disabled) { background: var(--hover); color: var(--text); }
.fd-icon:disabled { opacity: 0.35; cursor: not-allowed; }
.fd-icon.danger { color: var(--red-light); }
.fd-icon.danger:hover:not(:disabled) { color: var(--red); }
.fd-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fd-host-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.fd-host-row .btn { height: auto; min-height: 44px; padding: 6px 10px; line-height: 1.1; white-space: normal; text-align: center; }
.fd-mine-form { display: flex; flex-direction: column; }
/* Phones: one column, the teams right after the league code */
@media (max-width: 999px) {
  #fd-lobby > .fd-lobby-main, #fd-lobby > .fd-lobby-teams { display: contents; }
  .fd-invite { order: 1; }
  #l-note { order: 2; }
  #l-settings { order: 3; }
  .fd-lobby-teams > * { order: 4; }
  #l-mine { order: 5; }
  #l-join { order: 6; }
  #l-start { order: 7; }
  #l-leave { order: 8; }
}
.fd-box-foot { padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.fd-box-foot .btn { width: 100%; height: 44px; font-size: 15px; }

/* ======================================================================================== draft room */
/* Phones: the site header and menu scroll away; the pick clock and the tabs stick to the top. */
.fd-room-bar {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 calc(-1 * var(--gutter));
  padding: 10px var(--gutter);
  background: rgba(8, 11, 15, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 999px) {
  body[data-view="fd-room"] .modes-bar { position: relative; }
}
/* A phone held sideways (under 500px tall): stuck, they'd leave the draft half the screen, so they scroll away too. */
@media (max-width: 999px) and (max-height: 499px) {
  .fd-room-bar { position: static; }
}
/* The pick clock: the builder's scorebug strip (round · pick · who's up · the timer) */
.bug.fd-clock { height: 50px; }
.fd-clock-round, .fd-clock-pick { display: flex; flex: none; flex-direction: column; justify-content: center; gap: 2px; padding: 0 10px; }
.fd-clock-round { background: var(--violet); color: var(--on-violet); }
.fd-clock-pick small { color: var(--muted); }
.fd-clock-round b, .fd-clock-pick b { font-size: 18px; font-weight: 800; white-space: nowrap; }
.fd-clock-round b small, .fd-clock-pick b small { font-size: 12px; font-weight: 700; }
.fd-clock-round:empty, .fd-clock-pick:empty { display: none; }
.fd-up {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  padding: 0 12px;
  border-left: 1px solid var(--tag-border);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.05;
  overflow: hidden;
}
.fd-clock-code { display: none; }
.fd-timer {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  padding: 0 10px;
  border-left: 1px solid var(--tag-border);
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.fd-timer.low { color: var(--red); animation: fd-pulse 1s ease-in-out infinite; }
@keyframes fd-pulse { 50% { opacity: 0.5; } }
.bug.fd-clock.mine { border-color: var(--violet); }
.fd-clock.mine .fd-up { background: var(--violet-tint); color: var(--violet); }
/* "Pick for them" (the host, in a draft with no pick timer): in the timer's cell, which is empty then */
.fd-page .fd-skip { display: flex; flex: none; align-items: center; min-height: 0; margin: 0; padding: 0 12px; border-left: 1px solid var(--tag-border); font-size: 13.5px; white-space: nowrap; }
.fd-away {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--violet-ring);
  border-radius: 6px;
  background: var(--violet-soft);
  font-size: 13.5px;
  line-height: 1.4;
}
.fd-away .btn { flex: none; height: 40px; padding: 0 14px; font-size: 15px; }
/* Tabs (phones) */
.fd-tabs {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  margin-top: 8px;
  border: 1px solid var(--tag-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--tag);
}
.fd-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 44px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--nav);
  font-family: var(--rc);
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
}
.fd-tabs button + button { border-left: 1px solid var(--tag-border); }
.fd-tabs button:hover { background: var(--hover); }
.fd-tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.fd-tabs button:focus-visible { outline-offset: -3px; }
#r-mine-count { font-size: 12px; opacity: 0.7; }
.fd-room-cols { padding-top: 16px; }
.fd-col { display: none; flex-direction: column; min-width: 0; }
.fd-col > .sec:first-child { margin-top: 6px; }
.fd-col.active { display: flex; }

/* The pool */
.fd-pool-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.fd-pool-tools .fd-input { grid-column: 1 / -1; }
#r-pool-note { margin: 10px 0 10px; }
.fd-pool { display: flex; flex-direction: column; gap: 8px; min-height: 120px; margin: 0; padding: 0; list-style: none; }
.fd-mon-btn {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas: "img main" "img stats";
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-family: var(--font);
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.fd-mon-btn:hover { border-color: var(--violet-ring); }
.fd-mon.sel .fd-mon-btn { border-color: var(--violet); background: var(--violet-soft); }
.fd-mon-img { grid-area: img; width: 56px; height: 56px; image-rendering: pixelated; }
.fd-mon-main { grid-area: main; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fd-mon-head { display: flex; align-items: baseline; gap: 6px; min-width: 0; font-family: var(--rc); text-transform: uppercase; }
.fd-mon-head b { overflow: hidden; font-size: 17px; font-weight: 800; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.fd-mon-head .leg { flex: none; font-size: 13px; color: var(--gold); }
.fd-mon-head .num { flex: none; font-size: 12px; font-weight: 700; color: var(--subtle); }
.fd-mon-size { flex: none; margin-left: auto; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.fd-mon-stats { grid-area: stats; }

/* My team: the name and formation, the field, the roster */
.fd-team-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); }
.fd-team-head b { min-width: 0; overflow: hidden; font-family: var(--rc); font-size: 20px; font-weight: 800; line-height: 1.1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.fd-team-count { flex: none; font-family: var(--rc); font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--muted); }
.fd-team-count:empty { display: none; }
.fd-team-panel.watching .row { display: none; }
.fd-team-panel.watching .fd-team-head { border-bottom: 0; }
#r-team-note { margin: 10px 0; }
.fd-room-field { margin: 0 calc(-1 * var(--gutter)); }
.fd-room-field .af-field { border-width: 1px 0; border-radius: 0; }
.fd-roster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; margin-top: 16px; }
.fd-roster h4 { margin: 0 0 4px; font-family: var(--rc); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.fd-roster-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; min-height: 28px; border-top: 1px solid var(--line); font-family: var(--rc); font-size: 14px; text-transform: uppercase; }
.fd-roster-row b { font-weight: 800; }
.fd-roster-row span { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.fd-roster-row.empty span { color: var(--subtle); }
.fd-roster-side:nth-child(1) :is(h4, b) { color: var(--off); }
.fd-roster-side:nth-child(2) :is(h4, b) { color: var(--def); }
.fd-roster-side:nth-child(3) { margin-top: 14px; }
.fd-roster-side:nth-child(3) :is(h4, b) { color: var(--st); }

/* League: up next, the teams */
.fd-next, .fd-team-list { margin: 0; padding: 0; list-style: none; }
.fd-next li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; font-family: var(--rc); text-transform: uppercase; }
.fd-next li + li { border-top: 1px solid var(--line); }
.fd-next li.now { background: var(--violet-soft); box-shadow: inset 3px 0 0 var(--violet); }
.fd-pk { flex: none; min-width: 32px; font-size: 14px; font-weight: 800; color: var(--subtle); }
.fd-next-name { flex: 1; min-width: 0; overflow: hidden; font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.fd-next li.me .fd-next-name { color: var(--violet); }
.fd-now { flex: none; font-size: 12px; font-weight: 800; color: var(--violet); }
.fd-team-list li + li { border-top: 1px solid var(--line); }
.fd-team-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; margin: 0; padding: 8px 12px 8px 14px; border: 0; background: transparent; color: var(--text); text-align: left; }
.fd-team-row:hover { background: var(--hover); }
.fd-team-row-info { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.fd-team-row-info b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.fd-team-row-info small { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.fd-team-row-n { flex: none; font-family: var(--rc); font-size: 15px; font-weight: 800; color: var(--muted); }
.fd-chev { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ======================================================================================== placing a pick */
/* Phones: a sheet over the room with your field and its open spots */
.fd-place {
  position: fixed;
  inset: 64px 0 0 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 var(--gutter) max(16px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--sheet);
  border-top: 1px solid var(--tag-border);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
  animation: sheet-up 0.2s ease-out;
}
.fd-place::before { content: ""; flex: none; width: 36px; height: 4px; margin: 8px auto -6px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
body.fd-placing::after { content: ""; position: fixed; inset: 0; z-index: 39; background: rgba(0, 0, 0, 0.62); }
.fd-place-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-right: -10px; }
.fd-place-head h2 { margin: 0; font-family: var(--rc); font-size: 21px; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.fd-place-card { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--violet); border-radius: 8px; background: var(--tag); }
.fd-place-card:empty { display: none; }
.fd-place-img { flex: none; width: 52px; height: 52px; image-rendering: pixelated; }
.fd-place-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fd-place-main b { overflow: hidden; font-family: var(--rc); font-size: 21px; font-weight: 800; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.fd-callout { margin: 0; padding: 12px; border: 1px dashed rgba(196, 181, 253, 0.6); border-radius: 6px; font-family: var(--rc); font-size: 16px; font-weight: 800; text-align: center; text-transform: uppercase; color: var(--violet); }
.fd-place-spots .af-field { border-radius: 6px; }

/* ======================================================================================== fields (field.js) */
.af-field {
  position: relative;
  flex: none; /* never squashed by a scrolling column */
  width: 100%;
  aspect-ratio: 1536 / 1064;
  overflow: hidden;
  background: #438530;
  border: 1px solid var(--line);
  border-radius: 8px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.af-field canvas { display: block; width: 100%; height: 100%; }
.af-hotspots { position: absolute; inset: 0; }
/* Spots are tapped; only your own players can be dragged (so swipes elsewhere still scroll). */
.af-hotspots .hotspot { cursor: pointer; touch-action: manipulation; }
/* a spot's name tag takes taps over any other spot that reaches across it (field.js gives the tag's box in fractions
   of the spot's border box: 100% + its 2px borders) */
.af-hotspots .hotspot::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(var(--tag-l) * (100% + 4px) - 2px);
  bottom: -2px;
  width: calc(var(--tag-w) * (100% + 4px));
  height: calc(var(--tag-h) * (100% + 4px));
}
.af-hotspots.drags .hotspot.filled { cursor: grab; touch-action: none; }
.af-hotspots .hotspot.picked { border-color: var(--violet); background: rgba(196, 181, 253, 0.14); }
.af-hotspots .hotspot:focus-visible { outline-color: var(--violet); }
/* A field nobody changes here (another team's, the broadcast's, the champion's): its players only show their card */
.af-hotspots.looks .hotspot { cursor: default; }
.af-hotspots.looks .hotspot:not(.filled) { display: none; }
#r-field[hidden] { display: none; }
/* The player card (broadcast.css) adds the player's season once the results are in */
.player-card .pl-season { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.player-card .pl-season-head { font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; text-align: center; color: var(--violet); }
.player-card .pl-season-line { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 2px; }
.player-card .pl-season-line > span { display: flex; flex-direction: column; align-items: center; font-size: 16px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.player-card .pl-season-line i { font-size: 10px; font-style: normal; font-weight: 700; white-space: nowrap; color: var(--subtle); }

/* ======================================================================================== another team's lineup */
dialog.fd-team-sheet .picker-head { align-items: flex-start; }
.fd-team-sheet .picker-title { flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 6px; }
.fd-team-sheet .picker-title h2 { max-width: 100%; font-size: 24px; }
.fd-team-sheet .picker-title .fd-hint { font-size: 13.5px; }
.fd-team-dlg-body { display: flex; flex: 1; flex-direction: column; gap: 16px; min-height: 0; padding: 0 var(--gutter) var(--gutter); overflow-y: auto; overscroll-behavior: contain; }
.fd-team-dlg-body .fd-roster { margin-top: 0; }
/* Once the season is over: Season stats | Lineup */
.fd-dlg-tabs { display: grid; flex: none; grid-template-columns: 1fr 1fr; margin: 0 var(--gutter) 14px; border: 1px solid var(--tag-border); border-radius: 6px; overflow: hidden; background: var(--tag); }
.fd-dlg-tabs button { height: 40px; padding: 0 8px; border: 0; background: transparent; color: var(--nav); font-family: var(--rc); font-size: 15px; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.fd-dlg-tabs button + button { border-left: 1px solid var(--tag-border); }
.fd-dlg-tabs button:hover { background: var(--hover); }
.fd-dlg-tabs button[aria-selected="true"] { background: var(--text); color: var(--bg); }
.fd-dlg-tabs button:focus-visible { outline-offset: -3px; }
/* A team's season stats: offense, defense and the kicker; two columns when there's room */
.fd-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 28px; }
.fd-stats-note { margin-top: -4px; }
.fd-stats-side h4 { margin: 0 0 2px; font-family: var(--rc); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.fd-stats-side.side-o h4, .side-o .fd-stat-top b { color: var(--off); }
.fd-stats-side.side-d h4, .side-d .fd-stat-top b { color: var(--def); }
.fd-stats-side.side-k h4, .side-k .fd-stat-top b { color: var(--st); }
.fd-stat-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 44px; padding: 3px 0; border-top: 1px solid var(--line); }
.fd-stat-img { width: 36px; height: 36px; image-rendering: pixelated; }
.fd-stat-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fd-stat-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-family: var(--rc); text-transform: uppercase; }
.fd-stat-top b { flex: none; min-width: 30px; font-size: 13px; font-weight: 800; }
.fd-stat-top span { overflow: hidden; font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.fd-stat-cells { display: flex; flex-wrap: wrap; gap: 0 12px; font-family: var(--rc); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.fd-stat-cells span { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.fd-stat-cells b { font-size: 15px; font-weight: 800; }
.fd-stat-cells i { font-size: 11px; font-style: normal; font-weight: 700; color: var(--subtle); }
@media (min-width: 700px) {
  .fd-stats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "note note" "o d" "k d"; align-items: start; }
  .fd-stats-note { grid-area: note; }
  .fd-stats-side.side-o { grid-area: o; }
  .fd-stats-side.side-d { grid-area: d; }
  .fd-stats-side.side-k { grid-area: k; }
}

/* ======================================================================================== season */
.fd-season-main, .fd-season-side { display: flex; flex-direction: column; min-width: 0; }
.fd-live { padding-top: 18px; }
.fd-live-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.fd-week { margin: 0; font-family: var(--rc); font-size: 30px; font-weight: 800; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.fd-week .v { color: var(--violet); }
.fd-live-head .text-btn { margin: 0 0 -10px; }
/* Progress: one segment a week, then the final */
.fd-bar { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 3px; margin-top: 12px; }
.fd-bar i { height: 5px; background: linear-gradient(90deg, var(--violet) var(--f, 0%), rgba(255, 255, 255, 0.12) var(--f, 0%)); }
.fd-season-sub { margin-top: 8px; font-size: 12.5px; color: var(--subtle); }
.fd-season-sub:empty { display: none; }
.fd-games { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
/* A game: the scoreboard (scores climb quarter by quarter) and both lineups */
.fd-game { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
.fd-game.mine { border-color: var(--violet-ring); }
.fd-game.big:not(.mine) { border-color: rgba(242, 194, 48, 0.5); }
.fd-game-board { display: grid; grid-template-columns: minmax(0, 1fr) 64px; }
.fd-game-row { display: flex; grid-column: 1; align-items: center; gap: 8px; min-width: 0; min-height: 46px; padding: 0 12px; font-family: var(--rc); text-transform: uppercase; }
.fd-game-row + .fd-game-row { border-top: 1px solid var(--line); }
.fd-game-team { flex: 1; min-width: 0; overflow: hidden; font-size: 16px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.fd-game-score { font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.fd-game.big .fd-game-row { min-height: 56px; }
.fd-game.big .fd-game-score { font-size: 34px; }
.fd-game-row.won :is(.fd-game-team, .fd-game-score) { color: var(--gold); }
.fd-game-score.pop { animation: fd-pop 0.9s ease-out; }
@keyframes fd-pop { 0% { color: var(--violet); transform: scale(1.4); } 100% { transform: scale(1); } }
.fd-game-clock {
  display: flex;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--tag-border);
  background: var(--tag);
  font-family: var(--rc);
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--violet);
}
.fd-game-clock.final { font-size: 15px; color: var(--muted); }
.fd-game-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 0 12px 12px; border-top: 1px solid var(--line); }
@media (min-width: 700px) {
  .fd-game-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.fd-game-field { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.fd-game-field figcaption { padding: 8px 2px 6px; overflow: hidden; font-family: var(--rc); font-size: 13px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.fd-game-field .af-field { border-radius: 6px; }
.fd-game-more { display: flex; justify-content: flex-end; padding: 0 12px; border-top: 1px solid var(--line); }
.fd-game-more .text-btn { margin: 0; }
/* The champion */
.fd-champ {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 18px;
  padding: 22px 14px 14px;
  border: 1px solid rgba(242, 194, 48, 0.6);
  border-radius: 8px;
  background: linear-gradient(rgba(242, 194, 48, 0.1), rgba(242, 194, 48, 0) 170px), var(--panel);
  text-align: center;
}
.fd-champ-trophy { width: 36px; height: 36px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fd-champ-label { margin-top: 8px; font-family: var(--rc); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
#s-champ-name { font-family: var(--rc); font-size: 30px; font-weight: 800; line-height: 1.05; text-transform: uppercase; color: var(--gold); overflow-wrap: anywhere; }
#s-champ-sub { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.fd-champ-field { width: 100%; margin-top: 14px; }
/* Standings */
.fd-table-box { overflow: hidden; }
.fd-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--rc); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.fd-table th { padding: 8px 4px; font-size: 11.5px; font-weight: 700; text-align: right; color: var(--subtle); }
.fd-table td { height: 46px; padding: 0 4px; border-top: 1px solid var(--line); text-align: right; }
.fd-table :is(th, td):first-child { width: 34px; padding-left: 12px; text-align: left; }
.fd-table :is(th, td):last-child { padding-right: 12px; }
.fd-table th:nth-child(3) { width: 52px; }
.fd-table th:nth-child(4), .fd-table th:nth-child(5) { width: 44px; }
.fd-table th:nth-child(6) { width: 58px; }
.fd-table th.fd-tn, .fd-table td.fd-tn { text-align: left; }
.fd-table td:first-child { font-size: 16px; font-weight: 800; color: var(--muted); }
.fd-table:has(#s-score-head:not([hidden])) tbody tr:first-child td:first-child { color: var(--gold); }
.fd-table td:nth-child(3) { font-size: 18px; font-weight: 800; }
.fd-table td:nth-child(4), .fd-table td:nth-child(5) { font-size: 16px; font-weight: 700; color: var(--muted); }
.fd-table td.fd-score { font-size: 18px; font-weight: 800; }
.fd-table tr.me td { background: var(--violet-soft); }
.fd-table tr.me td:first-child { box-shadow: inset 3px 0 0 var(--violet); }
.fd-linkish {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  font-family: var(--rc);
  font-size: 15px;
  font-weight: 800;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.2);
  text-overflow: ellipsis;
  text-transform: uppercase;
  text-underline-offset: 3px;
  white-space: nowrap;
  color: var(--text);
}
.fd-linkish:hover { color: var(--violet); text-decoration-color: currentColor; }
/* Season stats (your team's), Share, Replay season (the host's), New league: two to a row; Share or New league take
   a whole row when there's no button beside them */
.fd-end-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.fd-end-actions .btn { height: 46px; }
.fd-end-actions:has(#s-rematch[hidden]):has(#s-stats[hidden]) #s-share, #s-new { grid-column: 1 / -1; }
.fd-end-actions:not(:has(#s-rematch[hidden], #s-stats[hidden])) #s-new { grid-column: auto; }
.fd-end-actions #s-new { height: 52px; }
.fd-end-actions #s-rematch { height: auto; min-height: 46px; } /* as tall as New league when it's beside it */

/* ======================================================================================== chat */
/* Phones: a bar docked at the bottom of the screen (the page leaves room for it); tapped, it opens as a sheet.
   Wide screens: a panel in the view's side column (its header folds it away). */
.fd-chat { display: flex; flex-direction: column; min-height: 0; }
.fd-chat-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  text-align: left;
  font-family: var(--rc);
  text-transform: uppercase;
  color: var(--text);
}
.fd-chat-head > b { font-size: 15px; font-weight: 800; white-space: nowrap; }
.fd-chat-league { display: none; }
.fd-chat-icon, .fd-chat-chev, .fd-chat-x { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.fd-chat-icon { width: 18px; height: 18px; stroke-width: 2.2; color: var(--violet); }
.fd-chat-chev { width: 16px; height: 16px; margin-left: auto; stroke-width: 2.4; color: var(--muted); }
.fd-chat-x { display: none; width: 20px; height: 20px; stroke-width: 2.2; color: var(--muted); }
.fd-chat-badge { display: grid; place-items: center; flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--violet); color: var(--on-violet); font-size: 12px; font-weight: 800; }
.fd-chat-peek { flex: 1; min-width: 0; overflow: hidden; font-family: var(--font); font-size: 13px; font-weight: 500; text-overflow: ellipsis; text-transform: none; white-space: nowrap; color: var(--muted); }
.fd-chat:not(.min) .fd-chat-peek { display: none; }
.fd-chat-body { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.fd-chat.min .fd-chat-body { display: none; }
.fd-chat-list { display: flex; flex: 1; flex-direction: column; gap: 6px; min-height: 0; margin: 0; padding: 10px 12px; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; list-style: none; scrollbar-width: thin; }
.fd-chat-list li { overflow-wrap: anywhere; }
.fd-msg { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--tag); font-size: 13.5px; line-height: 1.4; }
.fd-msg b { margin-right: 6px; font-family: var(--rc); font-size: 13px; font-weight: 800; text-transform: uppercase; color: var(--nav); }
.fd-msg.me { border-color: rgba(196, 181, 253, 0.25); background: var(--violet-soft); }
.fd-msg.me b { color: var(--violet); }
.fd-msg.pending { opacity: 0.6; }
.fd-chat-pick { display: flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.fd-chat-pick img { flex: none; width: 28px; height: 28px; image-rendering: pixelated; }
.fd-chat-sys { font-size: 12px; text-align: center; color: var(--subtle); }
.fd-chat-empty { margin: auto 0; font-size: 12.5px; text-align: center; color: var(--subtle); }
.fd-chat-form { display: flex; flex: none; gap: 8px; margin: 0; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.fd-chat-form .btn { flex: none; height: 44px; padding: 0 14px; font-size: 15px; }
.fd-chat-slot { display: flex; flex-direction: column; min-height: 0; }
.fd-chat-slot:empty { display: none; }
.fd-chat-slot > .fd-chat { flex: 1; }
.fd-chat-slot > .fd-chat.min { flex: none; }

@media (max-width: 999px) {
  /* the docked bar */
  .fd-chat {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 30;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--tag-border);
    background: rgba(11, 16, 22, 0.96);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .fd-chat-head { height: 44px; padding: 0 12px; border: 1px solid var(--tag-border); border-radius: 6px; background: var(--tag); }
  .fd-chat-head:hover { background: var(--hover); }
  .fd-chat.min .fd-chat-chev { transform: rotate(180deg); }
  body.fd-chat-on .fd-main { padding-bottom: calc(var(--chat-h, 0px) + 24px); }
  body.fd-chat-on:not(.fd-chat-sheet) #toast { bottom: calc(var(--chat-h, 0px) + 12px); }
  /* opened: a sheet, like the site's other pop-ups */
  .fd-chat:not(.min) {
    top: 64px;
    z-index: 45;
    padding: 0 0 env(safe-area-inset-bottom);
    border-radius: 12px 12px 0 0;
    background: var(--sheet);
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    animation: sheet-up 0.2s ease-out;
  }
  .fd-chat:not(.min)::before { content: ""; flex: none; width: 36px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
  .fd-chat:not(.min) .fd-chat-head { height: auto; min-height: 56px; padding: 4px 6px 4px var(--gutter); border: 0; background: none; }
  .fd-chat:not(.min) .fd-chat-head > b { font-size: 22px; }
  .fd-chat:not(.min) .fd-chat-icon { width: 22px; height: 22px; }
  .fd-chat:not(.min) .fd-chat-league { display: inline; }
  .fd-chat:not(.min) :is(.fd-chat-badge, .fd-chat-chev) { display: none; }
  .fd-chat:not(.min) .fd-chat-x { display: block; box-sizing: content-box; margin-left: auto; padding: 12px; border-radius: 6px; }
  .fd-chat:not(.min) .fd-chat-head:hover .fd-chat-x { background: var(--hover); color: var(--text); }
  .fd-chat:not(.min) .fd-chat-list { padding: 4px var(--gutter) 12px; }
  .fd-chat:not(.min) .fd-chat-form { padding: 12px var(--gutter); }
  body.fd-chat-sheet { overflow: hidden; }
  body.fd-chat-sheet::after { content: ""; position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, 0.62); }
}

/* ======================================================================================== tablets: comfortable widths */
@media (min-width: 600px) and (max-width: 999px) {
  .fd-room-field { margin: 0; }
  .fd-room-field .af-field { border-width: 1px; border-radius: 8px; }
}

/* ======================================================================================== wide screens: columns */
/* 1000px+ wide (the same switch as fantasy.js's wideQuery): no tabs; the lobby, room and season in columns. */
@media (min-width: 1000px) {
  .fd-main { padding: 0 28px; }
  .fd-view { max-width: none; }
  .fd-fine-home { display: block; margin: 22px 0 0; }
  body[data-view="fd-home"] .fd-main > .fd-fine { display: none; }
  .fd-main > .fd-fine { max-width: none; margin: 18px 0 14px; text-align: center; }

  /* Home: start a league on the left; join, public lobbies and your leagues on the right */
  #fd-home:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 600px) minmax(0, 520px);
    grid-template-areas: "top top" "create side";
    justify-content: center;
    align-content: start;
    column-gap: 28px;
    padding-bottom: 28px;
  }
  .fd-home-top { grid-area: top; padding-top: 22px; }
  .fd-h1 { font-size: 34px; }
  .fd-intro { margin-top: 8px; font-size: 14px; }
  #fd-create { grid-area: create; }
  .fd-home-side { grid-area: side; display: flex; flex-direction: column; min-width: 0; }
  .fd-home-side .fd-lobby-list { max-height: 260px; overflow-y: auto; }
  /* the whole form is one panel: settings two to a row (label above), then your team, then Create league */
  .fd-create-panel { display: block; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding-bottom: 16px; }
  #fd-create .fd-set, #fd-create .fd-team-box { border: 0; border-radius: 0; background: none; }
  #fd-create .fd-set { padding: 16px 16px 2px; }
  #fd-create .fd-team-sec { margin: 16px 0 0; padding: 14px 16px 0; border-top: 1px solid var(--line); }
  #fd-create .fd-team-sec::after { display: none; }
  #fd-create .fd-create-btn { width: calc(100% - 32px); margin: 4px 16px 0; }
  .fd-set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 16px; }
  #l-settings { padding: 14px 16px 0; }
  #l-settings .fd-set-head, #l-settings .fd-set-foot { grid-column: 1 / -1; padding-inline: 0; }
  #l-settings .fd-set-head { padding-top: 0; }
  #l-settings .fd-set-foot { margin: 2px -16px 0; padding-inline: 16px; }
  .fd-set .fd-cell { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 6px; min-height: 0; padding: 0; border: 0; }
  .fd-set .fd-cell + .fd-cell { border: 0; }
  .fd-set .fd-cell > .fd-hint { margin: 2px 0 0; padding: 0; }
  .fd-set .fd-cell-mode { grid-column: 1 / -1; display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 6px 12px; }
  .fd-set .fd-cell-mode > .lbl { grid-column: 1 / -1; }
  .fd-set .fd-cell-mode > .fd-hint { margin: 0; }
  .fd-set .opts.fd-o2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-set .opts.fd-o4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fd-set .lbl { font-size: 13px; }
  /* your team in the create form: the name across, defense and offense side by side */
  #fd-create .fd-team-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; padding: 12px 16px 14px; }
  #fd-create .fd-name-row { grid-column: 1 / -1; padding: 0; }
  #fd-create .fd-team-form .row { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; min-height: 0; padding: 0; border: 0; }
  #fd-create .fd-team-form .opts.fd-o2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #fd-create .fd-team-form .lbl { font-size: 13px; }

  /* Lobby: the code and your team | the teams | the chat */
  #fd-lobby:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(280px, 340px); align-items: start; gap: 24px; padding-top: 22px; }
  .fd-invite { padding-top: 0; }
  .fd-lobby-teams > .sec:first-child { margin-top: 0; }
  .fd-lobby-side { min-height: 0; }

  /* Draft room: the clock across the top, then pool | my team | up next, teams, chat */
  .fd-room-bar { position: static; margin: 0; padding: 16px 0 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bug.fd-clock { height: 56px; }
  .fd-up { font-size: 18px; }
  .fd-clock-code:not(:empty) { display: flex; flex: none; flex-direction: column; justify-content: center; gap: 2px; padding: 0 12px; border-left: 1px solid var(--tag-border); font-size: 15px; font-weight: 800; letter-spacing: 0.06em; color: var(--muted); }
  .fd-clock-code:not(:empty)::before { content: "League"; font-size: 10px; font-weight: 700; letter-spacing: 0; color: var(--subtle); }
  .fd-timer { font-size: 28px; }
  .fd-tabs { display: none; }
  .fd-room-cols { display: grid; grid-template-columns: clamp(280px, 25vw, 360px) minmax(0, 1fr) clamp(240px, 21vw, 300px); align-items: start; gap: 20px; padding: 16px 0 0; }
  .fd-col, .fd-col.active { display: flex; }
  .fd-col-team { padding-bottom: 8px; }
  .fd-col-league > .sec:first-child { margin-top: 0; }
  .fd-room-field { margin: 0; }
  .fd-room-field .af-field { border-width: 1px; border-radius: 8px; }
  .fd-place { inset: 50% auto auto 50%; width: 720px; max-width: calc(100vw - 64px); max-height: calc(100vh - 64px); padding-top: 16px; border: 1px solid var(--tag-border); border-radius: 10px; transform: translate(-50%, -50%); animation: none; }
  .fd-place::before { display: none; }

  /* Season: the games or the champion | standings, the end actions, the chat */
  #fd-season:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); align-items: start; gap: 24px; padding-top: 22px; }
  .fd-live { padding-top: 0; }
  .fd-week { font-size: 32px; }
  .fd-champ { margin-top: 0; }
  #s-champ-name { font-size: 40px; }
  .fd-champ-trophy { width: 44px; height: 44px; }
  .fd-standings > .sec:first-child { margin-top: 0; }

  /* The chat: a panel in the side column */
  .fd-chat { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); overflow: hidden; }
  .fd-chat-head { min-height: 46px; padding: 12px 14px 10px; border: 0; border-bottom: 1px solid var(--line); background: none; }
  .fd-chat-head:hover { background: var(--hover); }
  .fd-chat-head > b { font-size: 16px; letter-spacing: 0.03em; }
  .fd-chat-icon { width: 17px; height: 17px; }
  .fd-chat.min .fd-chat-head { border-bottom: 0; }
  .fd-chat.min .fd-chat-chev { transform: rotate(180deg); }
  .fd-lobby-side .fd-chat-slot { height: min(560px, calc(100vh - 140px)); }
  #r-chat-slot, #s-chat-slot { margin-top: 18px; }
  #r-chat-slot { min-height: 220px; }
  #s-chat-slot { min-height: 240px; }
  body.fd-chat-min #r-chat-slot, body.fd-chat-min #s-chat-slot { flex: none; min-height: 0; } /* folded away, it gives its room back */
}

/* 1000px+ wide and 560px+ tall: the views fit the window; each column scrolls inside itself */
@media (min-width: 1000px) and (min-height: 560px) {
  .fd-main { display: flex; flex: 1; flex-direction: column; min-height: 0; }
  .fd-main > .fd-view:not([hidden]) { flex: 1; min-height: 0; }
  .fd-main > .fd-fine { flex: none; margin: 10px 0 12px; }
  .fd-main > .fd-loading { flex: 1; }
  #fd-home:not([hidden]) { grid-template-rows: auto minmax(0, 1fr); overflow-y: auto; scrollbar-width: thin; margin-inline: -28px; padding-inline: 28px; }
  /* long lists of public lobbies and your leagues share what's left of the side column (each scrolls inside itself) */
  .fd-home-side, .fd-home-side > section { min-height: 0; }
  .fd-home-side > section:not([hidden]) { display: flex; flex-direction: column; }
  #fd-lobby:not([hidden]), #fd-season:not([hidden]) { align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .fd-lobby-main, .fd-lobby-teams, .fd-season-main, .fd-season-side { min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .fd-lobby-main::-webkit-scrollbar, .fd-lobby-teams::-webkit-scrollbar, .fd-season-main::-webkit-scrollbar { display: none; }
  .fd-lobby-main > *, .fd-lobby-teams > * { flex: none; } /* the column scrolls; Start draft isn't squashed */
  .fd-lobby-side .fd-chat-slot { flex: 1; height: auto; min-height: 0; }
  /* the season's side column fits beside the games or the champion: standings, end buttons, then the chat with what's
     left. The chat gives up lines first (down to 180px, its message box always in view); only on the shortest windows
     do the standings give up rows (they scroll inside their box, under their header) */
  .fd-season-side { display: grid; grid-template-rows: minmax(130px, auto) auto minmax(180px, 1fr); overflow: hidden; }
  body.fd-chat-min .fd-season-side { grid-template-rows: minmax(130px, auto) auto minmax(0, 1fr); }
  .fd-season-side > .fd-standings { grid-row: 1; display: flex; flex-direction: column; min-height: 0; }
  .fd-season-side > .fd-end-actions { grid-row: 2; }
  #s-chat-slot { grid-row: 3; min-height: 0; }
  .fd-standings > .fd-table-box { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .fd-table thead th { position: sticky; top: 0; z-index: 1; background: var(--panel); }
  /* the room: pool | my team | league, each scrolling inside itself under the clock */
  #fd-room:not([hidden]) { display: flex; flex-direction: column; }
  .fd-room-cols { flex: 1; min-height: 0; align-items: stretch; grid-template-rows: minmax(0, 1fr); }
  .fd-col { min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .fd-col-pick { overflow: hidden; }
  .fd-col-pick .fd-pool { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
  /* the league column: Up next and Teams give up rows (they scroll, with a scrollbar) before the chat gets under 30% of
     the window (about 4 lines on a laptop) */
  .fd-col-league { overflow: hidden; }
  .fd-col-league .fd-next { flex: 0 1000 auto; min-height: 88px; overflow-y: auto; scrollbar-width: thin; }
  .fd-col-league .fd-team-list { flex: 0 1000 auto; min-height: 116px; overflow-y: auto; scrollbar-width: thin; }
  .fd-next li { min-height: 34px; }
  .fd-team-row { min-height: 46px; padding-block: 5px; }
  .fd-col-league > .sec, #r-chat-slot { margin-top: 12px; }
  /* ...and on a short window, once they're down to their last rows, the chat gives back what it must (down to
     its old 180px), rather than being cut off below the column with its message box */
  #r-chat-slot { flex: 1 1 max(230px, 30vh); min-height: 180px; }
  /* the champion's whole card fits the window beside the standings */
  .fd-champ-field { width: min(100%, calc((100vh - 360px) * 1536 / 1064)); width: min(100%, calc((100svh - 360px) * 1536 / 1064)); }
}
/* Laptop windows (under 900px tall): the season's standings rows, end buttons and gaps are tighter, so the standings, the
   buttons and the chat all fit beside the champion (1366×768 and 1280×800 screens leave about 657–690px); under 700px
   the chat may shrink to 160px (a couple of lines and its message box) before the standings scroll */
@media (min-width: 1000px) and (min-height: 560px) and (max-height: 899px) {
  #fd-season:not([hidden]) { padding-top: 16px; }
  .fd-table th { padding-block: 6px; }
  .fd-table td { height: 34px; }
  .fd-end-actions { margin-top: 12px; }
  .fd-end-actions .btn { height: 40px; }
  .fd-end-actions #s-new { height: 44px; }
  .fd-end-actions #s-rematch { min-height: 40px; }
  #s-chat-slot { margin-top: 12px; }
}
@media (min-width: 1000px) and (min-height: 560px) and (max-height: 699px) {
  body:not(.fd-chat-min) .fd-season-side { grid-template-rows: minmax(130px, auto) auto minmax(160px, 1fr); }
}
/* 1240px+ wide and under 900px tall (most laptops): the home and the lobby fit too. Start a league puts its settings
   three to a row and your team on one row; the lobby's Your team puts Defense and Offense side by side, and Leave
   league sits beside Start draft; options and text boxes take the builder's laptop size. */
@media (min-width: 1240px) and (min-height: 560px) and (max-height: 899px) {
  #fd-home:not([hidden]) { grid-template-columns: minmax(0, 680px) minmax(0, 520px); padding-bottom: 16px; }
  #fd-create .fd-set { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #fd-create .fd-team-form { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  #fd-create .fd-name-row { grid-column: auto; }
  :is(#fd-create, .fd-lobby-main) .opts label > span { min-height: 36px; }
  :is(#fd-create, .fd-lobby-main) :is(.fd-input, .fd-select), .fd-lobby-main .fd-box-foot .btn { height: 40px; }
  .fd-mine-form .fd-team-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; padding: 12px 14px 14px; }
  .fd-mine-form .fd-name-row { grid-column: 1 / -1; padding: 0; }
  .fd-mine-form .fd-team-form .row { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; min-height: 0; padding: 0; border: 0; }
  .fd-mine-form .fd-team-form .opts.fd-o2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-mine-form .fd-team-form .lbl { font-size: 13px; }
  .fd-lobby-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: start; column-gap: 18px; }
  .fd-lobby-main > * { grid-column: 1 / -1; }
  #l-start:not([hidden]) { grid-column: 1; }
  #l-start:not([hidden]) + #l-leave { grid-column: 2; align-self: center; margin-top: 16px; }
}

/* ======================================================================================== small phones, motion */
@media (max-width: 380px) {
  .fd-h1 { font-size: 30px; }
  .fd-cell { padding-left: 12px; padding-right: 8px; }
  .opts.fd-w92 { --w: 84px; }
  .opts.fd-w80 { --w: 76px; }
  .fd-up { padding: 0 8px; font-size: 14px; }
  .fd-clock-round, .fd-clock-pick { padding: 0 8px; }
  .fd-timer { min-width: 58px; font-size: 22px; }
  .fd-page .fd-skip { width: 74px; padding: 0 8px; white-space: normal; line-height: 1.15; text-align: center; }
  .fd-tabs button { font-size: 14px; }
  .fd-code { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .fd-timer.low, .fd-game-score.pop, .fd-place, .fd-chat:not(.min) { animation: none; }
}

/* Fantasy Draft uses the shared red action color; its content remains the same game mode. */
:root { --violet:#e3350d; --violet-hover:#c82808; --on-violet:#fff; --on-violet-2:#fff0eb; --violet-tint:rgba(227,53,13,.12); --violet-soft:rgba(227,53,13,.06); --violet-ring:rgba(227,53,13,.4); color-scheme:light; }
.fd-page .mode-fd[aria-current="page"] { background:#e3350d; color:#fff; }
.fd-page .mode-fd[aria-current="page"] b, .fd-page .mode-fd[aria-current="page"] > span { color:#fff; }