/* Shared color roles. Reuse these instead of adding component-specific text colors.
   Team lettering and result badges deliberately retain their own palettes. */
:root {
  --text-primary: #fffce8;
  --text-secondary: #aeb8ce;
  --text-emphasis: #ffdc60;
  --text-error: #ffb5b5;
  --text-result-win: #a6e3a1;
  --text-result-loss: #ffaaaa;
  --text-on-light: #101850;
  --text-on-neutral: #182144;
  --text-on-neutral-muted: #45516b;
  --text-placeholder: #858585;
  --banner: #a32d3c;
  --banner-highlight: #ce6975;
  --banner-shadow: #5e1d2b;
  --result-win-border: #16832b;
  --result-win-fill: #d3e4d5;
  --result-loss-border: #ba1825;
  --result-loss-fill: #ead4d6;
  --radius-control: 4px;
  --radius-panel: 2px;
  --radius-tag: 3px;
  --week-tag-height: 34px;
  --heading-control-width: 128px;
  --heading-control-height: 32px;
  --section-heading-gap: 4px;
}

:root {
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --paper: #080b08;
  --surface: #131614;
  --surface-2: #1b201d;
  --line: #2a312c;
  --green: #baf36b;
  --green-soft: #203b1f;
  --win: #baf36b;
  --win-soft: #203b1f;
  --red: #ff7770;
  --red-soft: #482d34;
  --gold: #ffc857;
  --gold-soft: #4a3d20;
  --shadow: none;
  --radius-lg: 12px;
  --radius-md: 12px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
}
:root {
  color-scheme: dark;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
}
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.shell {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
}

.hero {
  padding: 24px 0;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.submit-picks {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 2px solid var(--green);
  border-radius: var(--radius-md);
  background: var(--green);
  color: var(--paper);

  text-decoration: none;
}
.submit-picks:hover {
  background: var(--green-soft);
  color: var(--green);
}
.submit-picks:active {
  transform: translateY(1px);
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1 {
  margin-bottom: 0;
}

main {
  padding: 24px 0 48px;
}
main > section + section {
  margin-top: 32px;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: var(--section-heading-gap);
}

.section-heading h2 {
  margin-bottom: 0;
}

.section-heading p {
  margin-bottom: 0;
  color: var(--muted);
}

.summary-grid {
  display: grid;
  width: min(100%, 610px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.summary-card {
  display: grid;
  grid-template-columns: 54px 1fr 92px;
  align-items: center;
  min-height: 42px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
}

.summary-card:last-child {
  border-bottom: 0;
}
.summary-card.is-leader {
  background: var(--green-soft);
  box-shadow: none;
}

.summary-rank {
  color: var(--muted);
}

.summary-card.is-leader .summary-rank {
  color: var(--text-primary);
}

.summary-name {
  margin: 0;
}

.summary-points {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  min-width: 92px;
  margin: 0;
}

.summary-points span {
  color: var(--muted);
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.table-wrap {
  overflow-x: auto;
  border-radius: inherit;
}

.scoreboard {
  width: 100%;
  min-width: 790px;
  border-collapse: collapse;
}

.scoreboard th,
.scoreboard td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
}

.scoreboard thead th {
  padding-top: 18px;
  padding-bottom: 18px;
  color: var(--muted);
  background: var(--surface-2);
}

.scoreboard thead th:first-child,
.scoreboard tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 190px;
  text-align: left;
}

.scoreboard thead th:first-child {
  z-index: 3;
  background: var(--surface-2);
}

.scoreboard tbody td:first-child {
  background: var(--surface);
}

.scoreboard tbody tr:last-child td {
  border-bottom: 0;
}

.week-label {
  display: block;
}

.week-phase {
  display: block;
  margin-top: 2px;
  color: var(--muted);
}

.pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  min-height: 30px;
  padding: 5px 9px;
  border-radius: 6px;
}

.pick.win {
  color: var(--win);
  background: var(--win-soft);
}
.pick.loss {
  color: var(--red);
  background: var(--red-soft);
}
.pick.pending.own-pick {
  color: var(--gold);
  background: var(--gold-soft);
}
.pick.pending:not(.own-pick),
.pick.tie,
.pick.canceled {
  color: var(--muted);
  background: var(--surface-2);
}
.pick.no-pick {
  color: var(--muted);
  background: var(--surface-2);
}
.pick.future {
  color: var(--muted);
  background: transparent;
}

.mobile-picks,
.mobile-availability {
  display: none;
}

.mobile-picks-controls {
  display: none;
}

.picks-heading .mobile-picks-controls {
  margin-left: auto;
}

.mobile-picks-controls button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 150px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: var(--surface-2);
}

#week-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* Optical alignment of the pixel capitals within the centered line box. */
  transform: translateY(1px);
}

.mobile-availability-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  margin-bottom: 12px;
}

.mobile-availability-tab {
  min-height: 44px;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
}

.mobile-availability-tab.active {
  color: var(--text-primary);
  background: var(--green-soft);
}

.mobile-team-table {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.mobile-team-table-header,
.mobile-team-table-row {
  display: grid;
  grid-template-columns: 64px repeat(6, minmax(0, 1fr));
  align-items: center;
}

.mobile-team-table-header {
  position: sticky;
  top: 0;
  z-index: 4;
  border-radius: 11px 11px 0 0;
  box-shadow: 0 1px var(--line);
  min-height: 43px;
  color: var(--muted);
  background: var(--surface-2);

  text-align: center;
}

.mobile-team-table-header span:first-child {
  padding-left: 12px;
  text-align: left;
}
.mobile-team-table-header span:not(:first-child) {
  width: 25px;
  justify-self: center;
  text-align: center;
}

.mobile-division-row {
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-2);
}

.mobile-team-table-row {
  min-height: 45px;
  border-top: 1px solid var(--line);
}

.mobile-team-table-row > * {
  min-width: 0;
  text-align: center;
}
.mobile-team-table-row > .availability-mark {
  justify-self: center;
}

.mobile-team-table-row .mobile-team-name {
  overflow: hidden;
  padding: 7px 8px 7px 12px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-team-name strong {
  display: block;
  color: var(--ink);
}

.mobile-team-table-row .availability-mark {
  width: 25px;
  height: 21px;
}

.mobile-pick-week {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.mobile-pick-week + .mobile-pick-week {
  margin-top: 12px;
}

.mobile-week-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.mobile-week-header small {
  color: var(--muted);
}

.mobile-pick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.mobile-pick-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}

.mobile-pick-entry:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.mobile-pick-entry:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.mobile-pick-player {
  overflow: hidden;
  color: var(--muted);

  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-pick-entry .pick {
  min-width: 56px;
  min-height: 28px;
  padding: 4px 6px;
}

.availability-panel {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.availability-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.availability-table th,
.availability-table td {
  height: 39px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

/* Reserve tag height even when every player still has this team available.
   16px covers the existing vertical padding, divider, and rounding allowance. */
.availability-table tbody td {
  height: calc(var(--week-tag-height) + 16px);
}
.availability-table .availability-mark {
  vertical-align: middle;
}

.availability-table thead th {
  padding-top: 14px;
  padding-bottom: 14px;
  color: var(--muted);
  background: var(--surface-2);
}

.availability-table th:first-child,
.availability-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 200px;
  text-align: left;
}

.availability-table thead th:first-child {
  z-index: 3;
  padding-left: 14px;
  background: var(--surface-2);
}
.availability-table tbody td:first-child {
  background: var(--surface);
}
.availability-table tbody tr:last-child td {
  border-bottom: 0;
}

.division-row th {
  height: 31px;
  padding: 8px 12px;
  color: var(--muted);
  background: var(--surface-2);

  text-align: left;
}

.team-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.team-label strong {
  flex: 0 0 40px;
  width: 40px;
  color: var(--ink);
}

.availability-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 23px;
  border-radius: 6px;
}

.availability-mark.used {
  color: var(--muted);
  background: var(--surface-2);
}

@media (max-width: 1120px) {
  .summary-grid {
    width: min(100%, 610px);
  }
}

@media (max-width: 760px) {
  .summary-grid {
    width: 100%;
  }
  .scoreboard th,
  .scoreboard td {
    padding-right: 9px;
    padding-left: 9px;
  }
  .scoreboard thead th:first-child,
  .scoreboard tbody td:first-child {
    width: 125px;
  }
  .desktop-picks,
  .availability-panel {
    display: none;
  }
  .mobile-picks-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }
  .picks-heading {
    display: flex;
    align-items: center;
  }
  .picks-heading h2 {
    margin-bottom: 0;
  }
  .mobile-picks,
  .mobile-availability {
    display: block;
  }
  .pick-action {
    display: none;
  }
}

@media (max-width: 430px) {
  .summary-card {
    grid-template-columns: 40px 1fr 82px;
  }
  .summary-points {
    min-width: 82px;
  }
}
.dialog-close {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.week-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(480px, calc(100% - 32px));
  max-height: 85vh;
  max-height: 85dvh;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 24px 80px #0006;
}
.week-dialog[open] {
  display: flex;
  flex-direction: column;
}
.week-dialog::backdrop {
  background: #0009;
}
.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.dialog-header h2 {
  margin: 0;
}
.week-options {
  padding: 16px 16px max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.week-options h3 {
  margin: 20px 0 10px;

  color: var(--muted);
}
.week-options h3:first-child {
  margin-top: 0;
}
.week-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.week-grid.playoffs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.week-option {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  background: var(--surface-2);
}
.week-option small {
  color: var(--muted);
}
.week-option[aria-pressed='true'] {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--green);
}
.week-option:disabled {
  background: transparent;
  color: var(--muted);
  border-style: dashed;
  opacity: 0.55;
}
@media (max-width: 760px) {
  .week-dialog {
    inset: auto 0 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
  }
}

a:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
:root {
  --radius-lg: 2px;
  --radius-md: 2px;
}
:is(button, .pick, .availability-mark, .mobile-team-table-header, .week-dialog) {
  border-radius: 2px;
}

/* Fixed app theme and original pixel font. */

:root {
  color-scheme: dark;
  --paper: #104828;
  --surface: #101850;
  --surface-2: #202868;
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: #5868a8;
  --green: var(--text-emphasis);
  --green-soft: #283078;
  --win: #88f888;
  --win-soft: #164830;
  --red: #ff9ca0;
  --red-soft: #502038;
  --gold: var(--text-emphasis);
  --gold-soft: #483c18;
  --radius-lg: 0;
  --radius-md: 0;
}
body {
  background-color: var(--paper);
  background-image: none;
}
.shell {
  max-width: 1100px;
}
.hero {
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}
.hero > .shell {
  position: relative;
  width: 100%;
  max-width: none;
}
.hero .app-nav {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 6px;
  width: auto;
  margin: 0;
  padding: 0;
}
.hero .app-nav a,
.hero .app-nav button {
  padding-top: 2px;
  padding-bottom: 2px;
}
.hero .account-controls {
  width: auto;
}
.hero #sign-out {
  margin-left: 0;
}
.retro-masthead {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  padding: 8px 16px 28px;
  background: #101850;
  border: 3px solid #fffce8;
  box-shadow: none;
}
.submit-picks {
  border-radius: 0;
  background: #ffdc60;
  color: var(--text-on-light);

  box-shadow: 3px 3px 0 #080c28;
}

h1 {
  color: var(--text-primary);
}
.retro-ball {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  image-rendering: auto;
}
main {
  padding-top: 16px;
}
.hero + main {
  position: relative;
  isolation: isolate;
}
.hero + main::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 98px, #e8ffdc25 98px 100px),
    repeating-linear-gradient(0deg, #0000 0 100px, #0002 100px 200px);
  /* A fixed tile keeps bottom-up gradients independent of the content height. */
  background-size: 100% 200px;
  background-position: center top;
  background-repeat: repeat-y;
  pointer-events: none;
}
.section-heading {
  min-height: 44px;
  padding: 4px 10px;
  border-radius: var(--radius-panel);
  background: var(--banner);
  border: 2px solid var(--banner-highlight);
  border-right-color: var(--banner-shadow);
  border-bottom-color: var(--banner-shadow);
  box-shadow: 3px 3px #080c28;
  gap: 8px;
}
.section-heading h2 {
  color: var(--text-primary);
}
.summary-grid {
  width: 100%;
}
:root[data-style='retro']
  :is(
    .summary-grid,
    .panel,
    .mobile-pick-week,
    .mobile-team-table,
    .availability-panel,
    .watch-panel
  ) {
  border: 2px solid #b8c0e0;
  border-radius: var(--radius-panel);
  box-shadow: 4px 4px #080c28;
}
.summary-card {
  min-height: 46px;
  grid-template-columns: 40px 1fr 82px;
}
.summary-card.is-leader {
  background: #283078;
  box-shadow: none;
}
.summary-points {
  color: var(--text-emphasis);
}
.mobile-week-header {
  background: #283880;
  border-bottom: 2px solid #5868a8;
}
.mobile-pick-player {
  color: var(--text-primary);
}
.mobile-pick-entry {
  min-height: 48px;
  gap: 4px;
  padding: 8px;
}
:root[data-style='retro'] .pick {
  min-height: 28px;

  border-radius: 0;
}
.mobile-pick-entry .pick {
  min-width: 50px;
  padding: 2px 4px;
}
:root[data-style='retro'] :is(button, .mobile-team-table-header, .availability-mark, .week-dialog) {
  border-radius: 0;
}
.mobile-picks-controls button {
  width: 128px;

  border: 2px solid #b8c0e0;
  background: #101850;
}
.mobile-availability-tabs {
  padding: 0;
  gap: 2px;
  border: 2px solid #b8c0e0;
  background: #080c28;
  border-radius: 0;
  box-shadow: 3px 3px #080c28;
}
.mobile-availability-tab.active {
  box-shadow: none;
}
.mobile-team-table-row .availability-mark {
  width: 28px;
}
:root[data-style='retro'] .availability-mark.used {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  width: 32px;
  height: var(--week-tag-height);
  border: 1px solid #a4aec4;
  color: var(--text-on-neutral);
  background: #dfe2e8;
  box-shadow: 2px 2px 0 #080c28;
}
:root[data-style='retro'] .availability-mark.used[data-result='win'] {
  border-color: var(--result-win-border);
  background: var(--result-win-fill);
}
:root[data-style='retro'] .availability-mark.used[data-result='loss'] {
  border-color: var(--result-loss-border);
  background: var(--result-loss-fill);
}
.used-week-label {
  color: var(--text-on-neutral-muted);
}
.mobile-division-row,
.division-row th {
  color: var(--text-primary);
  background: #080c28;
}
.week-dialog {
  border: 3px solid #b8c0e0;
  box-shadow: 6px 6px #080c28;
}
.dialog-header {
  background: var(--banner);
  border-bottom: 3px solid var(--banner-shadow);
}
.week-option {
  border-width: 2px;
}
.week-option:disabled {
  opacity: 0.6;
}
/* Original team-colored lettering; tuned for legibility on these panels. */
:root[data-style='retro'] :is(.team-wordmark, .pick-hidden-mark) {
  display: inline-block;
  color: var(--team-face);
}
/* Reserve the same slot for plates and empty markers so their centers align. */
:root[data-style='retro'] .pick {
  box-sizing: border-box;
  width: 72px;
  min-width: 72px;
  flex-shrink: 0;
  gap: 6px;
}
.pick.submitted {
  --result-border: #858585;
  --result-ink: #454545;
}
.pick-hidden-mark {
  --team-face: #eeeeee;
  --team-edge: #454545;
  --team-shadow: #858585;
}
.pick.win {
  --result-border: var(--result-win-border);
  --result-ink: #165a30;
  --result-fill: var(--result-win-fill);
}
.pick.loss {
  --result-border: var(--result-loss-border);
  --result-ink: #8c1830;
  --result-fill: var(--result-loss-fill);
}
.pick.pending.own-pick {
  --result-border: #ffda32;
  --result-ink: #644600;
  --result-fill: #e9e0bd;
}
.pick.pending:not(.own-pick),
.pick.tie,
.pick.canceled {
  --result-border: #77859e;
  --result-ink: #45516b;
}
:root[data-style='retro'] .pick:is(.win, .loss, .pending, .tie, .canceled, .submitted) {
  border: 3px solid var(--result-border);
  border-radius: var(--radius-tag);
  background: var(--result-fill, #dfe2e8);
  color: var(--result-ink);
  box-shadow: none;
}
@media (forced-colors: active) {
  :root[data-style='retro'] :is(.team-wordmark, .pick-hidden-mark) {
    color: CanvasText;
  }
}
@media (max-width: 360px) {
  .retro-ball {
    width: 40px;
    height: 40px;
  }
  .mobile-pick-grid {
    grid-template-columns: 1fr;
  }
  .mobile-pick-entry:nth-child(odd) {
    border-right: 0;
  }
  .mobile-pick-entry:nth-last-child(2) {
    border-bottom: 1px solid var(--line);
  }
}
@media (min-width: 361px) and (max-width: 430px) {
  .retro-ball {
    width: 48px;
    height: 48px;
  }
}

/* Match the empty marker used for future picks. */
:root[data-style='retro'] .availability-mark.available {
  color: var(--muted);
}

/* Keep loading feedback accessible without adding a temporary row above the board. */
#scoreboard-page[aria-busy='true'] #page-status:not(.error) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
[data-scoreboard-section][aria-hidden='true'] .pick {
  min-height: 44px;
}
[data-scoreboard-section][aria-hidden='true'] .mobile-pick-entry .pick {
  min-height: 38px;
}
[data-scoreboard-section][aria-hidden='true'] :is(.team-label, .mobile-team-name) strong {
  color: var(--muted);
}

/* Selected corner treatment: subtle panels, rounder controls, and rounded week tags. */
:root[data-style='retro']
  :is(
    .pick-action-link,
    .mobile-picks-controls button,
    .mobile-availability-tabs,
    .mobile-availability-tab,
    .week-option,
    .dialog-close
  ) {
  border-radius: var(--radius-control);
}

/* Header controls share a compact footprint without changing banner height. */
.mobile-picks-controls button,
.conference-controls {
  width: var(--heading-control-width);
  height: var(--heading-control-height);
  min-height: var(--heading-control-height);
  flex-shrink: 0;
}
.mobile-picks-controls button {
  padding: 2px 10px;
}
.week-selector-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 27px;
  height: 20px;
  border-left: 1px solid #b8c0e066;
  margin-right: -4px;
  padding-left: 6px;
}
.week-selector-icon svg {
  display: block;
  width: 12px;
  height: 12px;
}
.conference-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-left: auto;
  gap: 0;
  border: 2px solid #b8c0e0;
  border-radius: var(--radius-control);
  background: var(--surface);
  overflow: hidden;
}
:root[data-style='retro'] .conference-controls button {
  min-height: 0;
  padding: 2px;
  border-radius: 0;
}
.availability-heading > div:first-child {
  min-width: 0;
}
.mobile-team-table {
  overflow: clip;
}
:root[data-style='retro'] .availability-mark.used {
  border-radius: var(--radius-tag);
}
:root[data-style='retro']
  :is(button, .pick-action-link, .submit-picks, .availability-mark.used, .pick) {
  box-shadow: none;
}
@media (max-width: 360px) {
  :root {
    --heading-control-width: 96px;
  }
  .mobile-picks-controls button {
    padding: 2px 5px;
    gap: 2px;
  }
  .week-selector-icon {
    width: 20px;
    margin-right: -2px;
    padding-left: 4px;
  }
}

@media (max-width: 360px) {
  .conference-controls {
    width: 64px;
  }
}

/* Anchored week picker: content stays in place and only the page scrolls. */
.week-overlay-anchor {
  position: relative;
}
.week-picker {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  max-height: none;
  overflow: visible;
  box-shadow: 3px 4px #080c28;
  padding: 12px;
  background: #101850;
}
.week-picker[hidden],
#mobile-picks[hidden] {
  display: none;
}
.week-picker .week-options {
  padding: 0;
  overflow: visible;
}
.week-picker h3 {
  margin: 20px 0 10px;
}
.week-picker h3:first-child {
  margin-top: 0;
}
.week-picker .week-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.week-picker .week-option {
  min-width: 0;
  min-height: 52px;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid #5868a8;
  background: #141e54;
  color: var(--text-primary);
  box-shadow: none;
}
.week-picker .week-option[aria-pressed='true'] {
  background: #283880;
  border-color: #b8c0e0;
}
.week-picker .week-option small {
  color: var(--text-secondary);
}
.week-picker .week-option[aria-pressed='true'] small {
  color: var(--text-primary);
}
.week-picker .week-option:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 2px;
}
#mobile-week-select[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

/* Relevant games stay in kickoff order, with compact centered desktop rows. */
.watch-panel {
  background: #101850;
  border: 2px solid #080d30;
  border-radius: var(--radius-panel);
  overflow: hidden;
}
.watch-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  align-items: stretch;
}
.watch-tile {
  display: grid;
  grid-template-rows: auto 1fr 1fr;
  min-width: 0;
  padding: 8px;
  background: #182758;
  border: 2px solid #53648c;
  border-radius: var(--radius-tag);
  color: var(--text-primary);
}
.watch-status {
  min-height: 30px;
  margin-bottom: 8px;
  color: var(--text-secondary);
}
.watch-live {
  color: var(--text-primary);
}
.watch-grid-team {
  margin-top: 6px;
  min-width: 0;
}
.watch-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px 32px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  gap: 5px;
}
.watch-score {
  text-align: right;
  color: var(--text-emphasis);
}
.watch-followers {
  display: flex;
  flex-wrap: wrap;
  column-gap: 7px;
  row-gap: 2px;
  align-content: start;
  min-height: 18px;
  padding-top: 3px;
  color: var(--text-primary);
}
.watch-own-game {
  border-color: #ffda32;
  box-shadow: inset 0 0 0 1px #ffda32;
  background: #282c43;
}
.watch-viewer-name {
  color: var(--text-emphasis);
}
@supports (grid-template-rows: subgrid) {
  .watch-tile {
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}
@media (max-width: 1000px) {
  .watch-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 761px) {
  .watch-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .watch-tile {
    flex: 1 1 calc((100% - 40px) / 6);
    max-width: 320px;
    grid-template-rows: auto 1fr 1fr;
  }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .watch-tile {
    flex-basis: calc((100% - 16px) / 3);
  }
}
@media (max-width: 760px) {
  .watch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 8px;
  }
  .watch-status {
    min-height: 15px;
  }
}

.watch-possession {
  display: flex;
  align-items: center;
  color: var(--text-primary);
}
.watch-ball {
  width: 14px;
  height: 12px;
  display: block;
}
.watch-result-win {
  color: var(--text-result-win);
}
.watch-result-loss {
  color: var(--text-result-loss);
}
.watch-result-tie,
.watch-result-canceled {
  color: var(--text-secondary);
}

/* First-paint loading scenes, shown for at least 500ms. */
main[data-page-loading] {
  min-height: calc(100vh - 160px);
}
main[data-page-loading] > :not(#page-loader):not(script) {
  display: none !important;
}
[data-scoreboard-section][aria-hidden='true'] {
  display: none;
}
.loading-scene {
  display: grid;
  place-items: center;
  min-height: 190px;
  margin: 20px auto;
  width: 180px;
  position: relative;
}
.loading-scene svg {
  display: block;
  width: 80px;
  height: 80px;
  overflow: visible;
}
.loading-scene .scene-shadow {
  position: absolute;
  bottom: 42px;
  width: 48px;
  height: 5px;
  background: #082e1b;
  opacity: 0.6;
  border-radius: 50%;
}
.loading-scene .runner {
  animation: run-travel 850ms ease-in-out infinite alternate;
}
.runner .stride-a {
  animation: stride 220ms steps(1, end) infinite;
}
.runner .stride-b {
  animation: stride 220ms steps(1, end) infinite reverse;
}
.runner .runner-body {
  animation: run-bob 220ms steps(2, end) infinite;
}
.loading-scene .ball-shape {
  transform-origin: 24px 24px;
}
@keyframes stride {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}
@keyframes run-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}
@keyframes run-travel {
  from {
    transform: translateX(-18px);
  }
  to {
    transform: translateX(18px);
  }
}
/* Loading scenes intentionally play regardless of the device motion preference. */

/* Read the gesture in the first 300ms, then hold it briefly. */
.ref-arm-left {
  transform-origin: 17px 24px;
  animation: ref-left 1100ms ease-in-out infinite;
}
.ref-arm-right {
  transform-origin: 31px 24px;
  animation: ref-right 1100ms ease-in-out infinite;
}
@keyframes ref-left {
  0%,
  100% {
    transform: rotate(-108deg);
  }
  30%,
  78% {
    transform: rotate(0);
  }
}
@keyframes ref-right {
  0%,
  100% {
    transform: rotate(108deg);
  }
  30%,
  78% {
    transform: rotate(0);
  }
}
/* Alternate which end hits the turf: hop, tip, squash, and bounce back. */
.loading-scene .ball {
  animation: ball-hop 1100ms ease-in-out infinite;
}
.ball .ball-shape {
  animation: ball-tilt 1100ms ease-in-out infinite;
}
@keyframes ball-hop {
  0%,
  100% {
    transform: translate(-12px, 5px);
  }
  25% {
    transform: translate(0, -17px);
  }
  50% {
    transform: translate(12px, 5px);
  }
  75% {
    transform: translate(0, -17px);
  }
}
@keyframes ball-tilt {
  0%,
  100% {
    transform: rotate(-34deg) scale(1.06, 0.9);
  }
  25%,
  75% {
    transform: rotate(0) scale(1);
  }
  50% {
    transform: rotate(34deg) scale(1.06, 0.9);
  }
}
.loading-scene .kicker,
.loading-scene .catch,
.loading-scene .flag {
  width: 112px;
}
.kick-leg {
  transform-origin: 22px 35px;
  animation: kick-leg 1100ms ease-out infinite;
}
.kick-ball {
  transform-origin: 35px 37px;
  animation: kick-flight 1100ms ease-out infinite;
}
@keyframes kick-leg {
  0%,
  100% {
    transform: rotate(15deg);
  }
  20%,
  65% {
    transform: rotate(-65deg);
  }
}
@keyframes kick-flight {
  0%,
  12% {
    transform: translate(0, 0) rotate(-20deg);
    opacity: 1;
  }
  65% {
    transform: translate(27px, -31px) rotate(220deg);
    opacity: 1;
  }
  80%,
  100% {
    transform: translate(32px, -39px) rotate(280deg);
    opacity: 0;
  }
}
.catch-player {
  transform-origin: 28px 27px;
  animation: catch-dive 1100ms ease-out infinite;
}
.catch-ball {
  animation: catch-flight 1100ms ease-out infinite;
}
@keyframes catch-dive {
  0%,
  100% {
    transform: translate(-9px, 3px) rotate(-12deg);
  }
  28%,
  78% {
    transform: translate(4px, -3px) rotate(5deg);
  }
}
@keyframes catch-flight {
  0% {
    transform: translate(26px, -13px);
  }
  28%,
  78% {
    transform: translate(4px, -3px);
  }
  100% {
    transform: translate(26px, -13px);
  }
}
.flag-arm {
  transform-origin: 28px 26px;
  animation: flag-toss 1100ms ease-out infinite;
}
.flying-flag {
  transform-origin: 39px 19px;
  animation: flag-flight 1100ms ease-out infinite;
}
@keyframes flag-toss {
  0%,
  100% {
    transform: rotate(15deg);
  }
  24%,
  70% {
    transform: rotate(-60deg);
  }
}
@keyframes flag-flight {
  0%,
  8% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
  40% {
    transform: translate(13px, -16px) rotate(140deg);
    opacity: 1;
  }
  78% {
    transform: translate(20px, 17px) rotate(290deg);
    opacity: 1;
  }
  88%,
  100% {
    transform: translate(20px, 17px) rotate(290deg);
    opacity: 0;
  }
}

/* A plant-and-release pass, readable before the half-second transition. */
.loading-scene .pass,
.loading-scene .kickoff {
  width: 112px;
}
.loading-scene .cans {
  width: 128px;
}
.throw-arm {
  transform-origin: 12px 25px;
  animation: throw-release 1200ms ease-out infinite;
}
.qb-plant {
  transform-origin: 17px 42px;
  animation: qb-plant 1200ms ease-out infinite;
}
.pass-ball {
  transform-origin: 15px 11px;
  animation: pass-flight 1200ms ease-out infinite;
}
.pass-trail {
  animation: pass-trail 1200ms linear infinite;
}
@keyframes throw-release {
  0%,
  100% {
    transform: rotate(-20deg);
  }
  24%,
  75% {
    transform: rotate(110deg);
  }
}
@keyframes qb-plant {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  24%,
  75% {
    transform: rotate(5deg);
  }
}
@keyframes pass-flight {
  0%,
  10% {
    transform: translate(0, 0) rotate(-20deg);
    opacity: 1;
  }
  18% {
    transform: translate(12px, 0) rotate(0);
    opacity: 1;
  }
  55% {
    transform: translate(48px, -10px) rotate(180deg);
    opacity: 1;
  }
  70%,
  100% {
    transform: translate(60px, -13px) rotate(240deg);
    opacity: 0;
  }
}
@keyframes pass-trail {
  0%,
  19%,
  65%,
  100% {
    opacity: 0;
  }
  25%,
  55% {
    opacity: 0.5;
  }
}
.kickoff-player {
  animation: kickoff-approach 1200ms ease-out infinite;
}
.kickoff-leg {
  transform-origin: 21px 35px;
  animation: kickoff-swing 1200ms ease-out infinite;
}
.kickoff-ball {
  transform-origin: 37px 36px;
  animation: kickoff-flight 1200ms ease-out infinite;
}
@keyframes kickoff-approach {
  0%,
  100% {
    transform: translateX(-8px);
  }
  22%,
  80% {
    transform: translateX(7px);
  }
}
@keyframes kickoff-swing {
  0% {
    transform: rotate(30deg);
  }
  22%,
  75% {
    transform: rotate(-72deg);
  }
  100% {
    transform: rotate(30deg);
  }
}
@keyframes kickoff-flight {
  0%,
  19% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
  60% {
    transform: translate(28px, -32px) rotate(180deg);
    opacity: 1;
  }
  75%,
  100% {
    transform: translate(41px, -46px) rotate(260deg);
    opacity: 0;
  }
}
/* Backyard target practice: impact happens inside the first half second. */
.can-ball {
  transform-origin: 15px 11px;
  animation: can-throw 1200ms linear infinite;
}
.can-left {
  transform-origin: 56px 42px;
  animation: can-left 1200ms ease-out infinite;
}
.can-right {
  transform-origin: 67px 42px;
  animation: can-right 1200ms ease-out infinite;
}
.can-top {
  transform-origin: 62px 25px;
  animation: can-top 1200ms ease-out infinite;
}
.can-spark {
  animation: can-spark 1200ms linear infinite;
}
@keyframes can-throw {
  0%,
  10% {
    transform: translate(0, 0) rotate(-20deg);
    opacity: 1;
  }
  26% {
    transform: translate(44px, 16px) rotate(100deg);
    opacity: 1;
  }
  65% {
    transform: translate(54px, 29px) rotate(220deg);
    opacity: 1;
  }
  85%,
  100% {
    transform: translate(54px, 29px) rotate(220deg);
    opacity: 0;
  }
}
@keyframes can-left {
  0%,
  25%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  62%,
  85% {
    transform: translate(-9px, 0) rotate(-72deg);
  }
}
@keyframes can-right {
  0%,
  25%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  62%,
  85% {
    transform: translate(7px, 0) rotate(72deg);
  }
}
@keyframes can-top {
  0%,
  25%,
  100% {
    transform: translate(0, 0) rotate(0);
  }
  62%,
  85% {
    transform: translate(8px, 14px) rotate(125deg);
  }
}
@keyframes can-spark {
  0%,
  24%,
  42%,
  100% {
    opacity: 0;
  }
  26%,
  36% {
    opacity: 1;
  }
}

.loading-scene .punter {
  width: 112px;
}
.punt-leg {
  transform-origin: 27px 36px;
  animation: punt-swing 1200ms ease-out infinite;
}
.punt-ball {
  transform-origin: 39px 28px;
  animation: punt-flight 1200ms ease-out infinite;
}
@keyframes punt-swing {
  0%,
  10%,
  100% {
    transform: rotate(20deg);
  }
  26%,
  70% {
    transform: rotate(-98deg);
  }
}
@keyframes punt-flight {
  0% {
    transform: translate(0, -2px) rotate(-15deg);
    opacity: 1;
  }
  18% {
    transform: translate(0, 8px) rotate(0);
    opacity: 1;
  }
  58% {
    transform: translate(26px, -28px) rotate(220deg);
    opacity: 1;
  }
  75%,
  100% {
    transform: translate(38px, -43px) rotate(300deg);
    opacity: 0;
  }
}

/* Account controls arrive with the content, after the initial scene finishes. */
body:has(main[data-page-loading]) #account-controls {
  visibility: hidden;
}