:root {
  --accent: var(--green);
  --accent-dark: var(--green-dark);
  --accent-soft: var(--soft-green);
}
#setup-section { display: none !important; }

.live-page { overflow: hidden; }
.live-section { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 2rem; border-top: 1px solid var(--line); padding-top: 4rem; padding-bottom: 5rem; }
.live-section:first-child { border-top: 0; }
.live-section.draft-section { display: block; }
.section-content { min-width: 0; }
.section-number { color: var(--accent); font: .75rem 'DM Mono', monospace; }
.section-heading, .draft-header, .card-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.section-heading h1 { margin: .35rem 0 0; }
.section-note { max-width: 25rem; color: var(--muted); line-height: 1.5; }
.setup-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; }
.setup-grid > label, .slot-grid label, .draft-config-controls label, .edit-dialog-form > label { display: grid; gap: .45rem; color: var(--muted); font: .72rem 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
.setup-grid select, .setup-grid input, .draft-config-controls select, .player-filters input, .player-filters select, .edit-dialog-form select, .edit-dialog-form input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: .8rem; font: inherit; }
.slot-field { grid-column: 1 / -1; border: 0; border-top: 1px solid var(--line); padding: 1.5rem 0 0; margin: .5rem 0 0; }
.slot-field legend { color: var(--muted); font: .72rem 'DM Mono', monospace; text-transform: uppercase; }
.slot-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }
.ranking-status-panel, .saved-drafts-panel, .draft-config-panel { grid-column: 1 / -1; display: grid; gap: .85rem; border: 1px solid var(--line); padding: 1rem 1.15rem; background: var(--surface); }
.ranking-status-panel { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ranking-status-panel > div, .saved-drafts-panel > div:first-child, .draft-config-panel > div:first-child { display: grid; gap: .3rem; }
.ranking-status-panel span, .saved-drafts-panel span, .draft-config-panel span, .form-status { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.draft-config-controls { display: flex; flex-wrap: wrap; gap: .5rem; }
.draft-config-controls .saved-configs { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: .5rem; }
.draft-config-controls .saved-config-button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: .7rem .85rem; cursor: pointer; }
.draft-config-controls .saved-config-button.is-selected, .draft-config-controls .saved-config-button:hover, .draft-config-controls .saved-config-button:focus-visible { border-color: var(--green); background: var(--soft-green); color: var(--green-dark); }
.draft-config-controls .saved-config-empty { align-self: center; color: var(--muted); font: .65rem 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .03em; }
.draft-config-controls button { padding: .7rem .85rem; }
.start-button { grid-column: 1 / -1; justify-self: start; }
.form-status { grid-column: 1 / -1; min-height: 1.2rem; margin: 0; }
.saved-drafts-list { display: grid; gap: .55rem; }
.saved-draft-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding-top: .65rem; }
.saved-draft-label { display: grid; gap: .25rem; min-width: 0; }
.saved-draft-label strong { overflow-wrap: anywhere; }
.saved-draft-label small { color: var(--muted); font: .65rem 'DM Mono', monospace; }
.saved-draft-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.draft-section { padding-bottom: 4rem; }
.live-header { align-items: start; }
.live-header h2 { margin: .35rem 0 .2rem; }
.draft-substatus, .draft-save-status { margin: 0; color: var(--muted); font: .68rem 'DM Mono', monospace; }
.draft-actions { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.turn-banner { display: flex; align-items: center; gap: .8rem; margin-top: 1.25rem; border-left: 3px solid var(--accent); background: var(--soft-green); padding: .85rem 1rem; }
.turn-banner strong { font: .72rem 'DM Mono', monospace; text-transform: uppercase; }
.turn-banner span { color: var(--muted); font-size: .85rem; }
.turn-banner.is-waiting { border-left-color: #c47a2c; background: #f8e7ce; }
.mobile-tabs { display: none; }
.live-board-wrap { grid-column: 1 / -1; grid-row: 1; min-width: 0; overflow: hidden; }
.live-board, .draft-board { display: grid; width: 100%; min-width: 0; grid-template-columns: repeat(var(--team-count), minmax(0, 1fr)); grid-template-rows: auto repeat(var(--draft-rounds), minmax(58px, auto)); overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 12px 30px rgb(15 20 18 / .06); }
.team-heading { position: sticky; top: 0; z-index: 2; min-height: 3rem; box-sizing: border-box; display: grid; place-items: center; border-right: 1px solid rgb(255 255 255 / .18); background: var(--ink); color: var(--surface); padding: .55rem .3rem; text-align: center; font: .6rem 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .04em; overflow-wrap: anywhere; }
.team-heading.is-user { background: var(--accent); color: #fff; }
.pick-cell { position: relative; display: block; min-width: 0; min-height: 72px; box-sizing: border-box; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .4rem; color: var(--ink); transition: background-color .2s ease, box-shadow .2s ease; }
.pick-cell:not(.empty) { cursor: pointer; }
.pick-cell:not(.empty):focus-visible { z-index: 2; outline: 2px solid var(--accent); outline-offset: -2px; }
.pick-cell .pick-player { position: absolute; top: .4rem; right: .4rem; left: .4rem; display: block; padding-right: 1.9rem; overflow: hidden; font-size: .64rem; font-weight: 600; line-height: 1.05; text-overflow: ellipsis; white-space: normal; }
.pick-first-name, .pick-last-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-player-image { position: absolute; right: .25rem; bottom: .2rem; width: 2rem; height: 2rem; object-fit: contain; border-radius: 50%; }
.pick-cell .pick-cell-meta { position: absolute; right: .4rem; bottom: .4rem; left: .4rem; display: flex; align-items: center; gap: .3rem; padding-right: 1.8rem; color: inherit; font: .55rem 'DM Mono', monospace; }
.pick-cell .pick-cell-meta small { display: inline; color: inherit; font: inherit; }
.pick-cell .pick-cell-meta em { display: inline-flex; align-items: center; gap: .2rem; color: inherit; font: normal .55rem 'DM Mono', monospace; text-transform: uppercase; }
.pick-position-dot { width: .32rem; height: .32rem; border-radius: 50%; background: currentColor; }
.pick-cell.empty small, .pick-cell.skipped small { position: absolute; right: .4rem; bottom: .4rem; left: .4rem; color: inherit; font: .6rem 'DM Mono', monospace; }
.pick-cell.empty { background: color-mix(in srgb, var(--surface) 88%, var(--line)); color: var(--ink); }
.pick-cell.skipped { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); color: var(--ink); }
.pick-cell.is-current { z-index: 1; box-shadow: inset 0 0 0 2px var(--accent); }
.pick-cell.is-user-pick { box-shadow: inset 3px 0 0 var(--accent); }
.pick-cell.is-current.is-user-pick { box-shadow: inset 0 0 0 2px var(--accent), inset 3px 0 0 var(--accent); }
.pick-cell.position-qb, .pick-cell.position-rb, .pick-cell.position-wr, .pick-cell.position-te, .pick-cell.position-k, .pick-cell.position-dst { color: #14201a; }
.pick-cell.position-qb { background: #d7f3f0; }.pick-cell.position-rb { background: #f1e4ff; }.pick-cell.position-wr { background: #fff1b8; }.pick-cell.position-te { background: #ffe0c2; }.pick-cell.position-k { background: #e4e7ff; }.pick-cell.position-dst { background: #e8e8e8; }

.draft-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); grid-template-rows: auto auto; gap: 1.5rem; margin-top: 1.5rem; }
.draft-sidebar { display: grid; grid-column: 1; grid-row: 2; align-content: start; gap: 1rem; min-width: 0; }
.draft-card { min-width: 0; border: 1px solid var(--line); background: var(--surface); padding: 1rem; }
.card-heading h3 { margin: .3rem 0 0; }
.recommendations-status { display: block; margin-top: .35rem; color: var(--accent); font: .62rem 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .03em; }
.recommendations-list { display: grid; gap: .35rem; margin-top: 1rem; }
.recommendation-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: .65rem; align-items: center; min-height: 4.35rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.recommendation-row > img { width: 48px; height: 48px; object-fit: contain; border-radius: 50%; }
.recommendation-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: .12rem; min-width: 0; overflow: hidden; }
.recommendation-type { color: var(--accent); font: .56rem 'DM Mono', monospace; letter-spacing: .04em; text-transform: uppercase; }
.recommendation-player-trigger { display: grid; gap: .1rem; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.recommendation-player-trigger strong { overflow: hidden; font: 600 .9rem 'Space Grotesk', sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.recommendation-player-trigger span { overflow: hidden; color: var(--muted); font: .64rem 'DM Mono', monospace; text-overflow: ellipsis; white-space: nowrap; }
.recommendation-detail { color: var(--muted); font: .58rem 'DM Mono', monospace; white-space: nowrap; }
.recommendation-context { display: block; color: var(--muted); font: .58rem 'DM Mono', monospace; line-height: 1.35; white-space: normal; }
.roster-list { display: grid; gap: 1rem; margin-top: 1rem; }
.roster-group { display: grid; gap: .35rem; }
.roster-group + .roster-group { border-top: 1px solid var(--line); padding-top: .65rem; }
.roster-group h4 { margin: 0; color: var(--muted); font: .65rem 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .04em; }
.roster-slot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.5rem; border-bottom: 1px solid var(--line); padding: .5rem 0; font-size: .85rem; }
.roster-slot-player { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: .4rem; overflow: hidden; }
.roster-slot-player > small { flex: 0 0 3rem; color: var(--muted); font: .68rem 'DM Mono', monospace; text-transform: uppercase; }
.roster-player-image { width: 30px; height: 30px; margin-right: .35rem; vertical-align: middle; object-fit: contain; border-radius: 50%; }
.roster-player-name { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; color: var(--ink); font-size: .92rem; font-weight: 600; overflow: hidden; }
.roster-player-details { display: grid; min-width: 0; gap: .1rem; }
.roster-player-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-bye { color: var(--muted); font: .58rem 'DM Mono', monospace; white-space: nowrap; }
.roster-slot > span:last-child { color: var(--muted); font: .58rem 'DM Mono', monospace; white-space: nowrap; }
.roster-slot.empty { color: var(--muted); }
.roster-slot.empty .roster-slot-player { width: 100%; }
.roster-needs { margin: .9rem 0 0; color: var(--muted); font: .62rem 'DM Mono', monospace; }
.roster-needs strong { color: var(--accent); font-weight: 500; }

.available-card { grid-column: 2; grid-row: 2; align-self: start; }
.player-filters { display: flex; align-items: center; gap: .5rem; margin: .75rem 0; }
.player-filters input { flex: 1 1 12rem; min-width: 8rem; }
.player-filters select { flex: 0 0 100px; padding: .65rem .45rem; }
.player-search-toggle { flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.player-search-toggle:hover, .player-search-toggle:focus-visible { border-color: var(--accent); color: var(--accent); }
.position-filter-buttons { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.position-filter-buttons::-webkit-scrollbar { display: none; }
.position-filter-button { flex: 0 0 3.25rem; display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border: 2px solid transparent; border-radius: 50%; color: #111; padding: .2rem; cursor: pointer; }
.position-filter-button strong { font: .65rem 'DM Mono', monospace; }
.position-filter-button span { font: .58rem 'DM Mono', monospace; }
.position-filter-button.position-all { border-color: var(--line); background: var(--surface); color: var(--muted); }
.position-filter-button.position-qb { background: #d7f3f0; }.position-filter-button.position-rb { background: #f1e4ff; }.position-filter-button.position-wr { background: #fff1b8; }.position-filter-button.position-te { background: #ffe0c2; }.position-filter-button.position-flex, .position-filter-button.position-superflex { background: #d9ead3; }.position-filter-button.position-k { background: #e4e7ff; }.position-filter-button.position-dst { background: #e8e8e8; }
.position-filter-button[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
.available-list { max-height: 460px; overflow: auto; }
.available-player { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; gap: .65rem; align-items: center; border-bottom: 1px solid var(--line); padding: .65rem 0; }
.available-player > img { width: 38px; height: 38px; object-fit: contain; border-radius: 50%; }
.player-info-trigger { min-width: 0; border: 0; background: transparent; color: var(--ink); padding: 1px 6px; text-align: left; cursor: pointer; }
.player-info-trigger strong { display: block; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.player-info-trigger span { display: block; margin-top: 0; color: var(--muted); font-size: .75rem; }
.available-player-summary { display: block; margin-top: .2rem; color: var(--muted); font: .62rem 'DM Mono', monospace; white-space: normal; }
.player-info-trigger .available-player-summary-value { display: inline; margin-top: 0; color: var(--accent); font-size: .75rem; }
.player-context-ranks { display: grid; gap: .1rem; }
.player-context-history, .player-context-current { display: block; white-space: nowrap; }
.player-context-availability { display: block; margin-top: .15rem; color: var(--muted); }
.player-context-availability.availability-probably-available { color: #176238; }
.player-context-availability.availability-maybe { color: #8a6500; }
.player-context-availability.availability-probably-taken { color: #b42318; }
.available-player > em { color: var(--accent); font: normal .7rem 'DM Mono', monospace; white-space: nowrap; }
.available-player-bye.bye-warning-red { color: #b42318; font-weight: 700; }
.available-player-bye.bye-warning-yellow { color: #8a6500; font-weight: 700; }
.available-player-metrics { display: grid; gap: .15rem; color: var(--muted); font: .6rem 'DM Mono', monospace; text-align: right; }
.available-player-metrics strong { color: var(--accent); font-weight: 500; }
.draft-player-button { border: 1px solid var(--accent); background: var(--accent); color: #fff; padding: .5rem .7rem; font: .7rem 'DM Mono', monospace; text-transform: uppercase; cursor: pointer; }
.draft-player-button:hover, .draft-player-button:focus-visible { border-color: var(--accent-dark); background: var(--accent-dark); }
.draft-player-button:disabled { border-color: var(--line); background: var(--surface); color: var(--muted); cursor: default; }
.empty-state { color: var(--muted); font-size: .85rem; }

@media (min-width: 801px) {
  .draft-layout { grid-template-columns: minmax(0, 235px) minmax(0, 1fr) minmax(0, 300px); grid-template-rows: auto auto; }
  .draft-layout > .draft-board-wrap { grid-column: 1 / -1; grid-row: 1; overflow: hidden; }
  .draft-sidebar { grid-column: 1; grid-row: 2; }
  .recommendations-card { grid-column: 3; grid-row: 2; }
  .available-card { grid-column: 2; grid-row: 2; }
  .available-card .player-filters { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 100px; }
  .available-card .player-search-toggle { grid-column: 1; grid-row: 1; }
  .available-card #player-search { grid-column: 1 / 3; grid-row: 1; min-width: 0; }
  .available-card #sort-players { grid-column: 3; grid-row: 1; }
  .available-card .position-filter-buttons { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; overflow-x: visible; }
  .recommendations-list { grid-template-columns: 1fr; gap: .35rem; }
  .recommendation-row { min-width: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .25rem .65rem; }
  .recommendation-row { border-right: 0; }
  .recommendation-row:last-child { border-bottom: 0; }
}

.complete-summary { color: var(--muted); line-height: 1.5; }
.completed-roster-wrap, .completed-board-wrap { margin-top: 1.5rem; }
.completed-roster-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.completed-team { border: 1px solid var(--line); background: var(--surface); }
.completed-team.is-user { border-color: var(--accent); }
.completed-team-heading { display: flex; justify-content: space-between; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.completed-team-heading h3 { margin: 0; }
.completed-team-heading span { color: var(--muted); font: .62rem 'DM Mono', monospace; }
.completed-team .roster-list { margin: 0; padding: .75rem 1rem; }
.completed-board-scroll { overflow-x: auto; border: 1px solid var(--line); background: var(--surface); }
.completed-board { width: 100%; min-width: 620px; border-collapse: collapse; }
.completed-board th, .completed-board td { border-bottom: 1px solid var(--line); padding: .65rem .75rem; text-align: left; }
.completed-board thead th { background: var(--ink); color: var(--surface); font: .62rem 'DM Mono', monospace; text-transform: uppercase; }
.completed-board tbody th { color: var(--muted); font: .65rem 'DM Mono', monospace; }

.action-dialog { width: min(440px, calc(100% - 2rem)); box-sizing: border-box; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 0; box-shadow: 10px 10px 0 var(--accent); }
.action-dialog::backdrop { background: rgb(15 20 18 / .52); backdrop-filter: blur(2px); }
.action-dialog-form { display: grid; gap: .8rem; padding: 1.5rem; }
.action-dialog-form h3, .action-dialog-form p { margin: 0; }
.action-dialog-form > p:not(.chart-overline) { color: var(--muted); line-height: 1.5; }
.action-dialog-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .5rem; }
.action-dialog-actions button { border: 1px solid var(--line); padding: .7rem .9rem; cursor: pointer; }
.action-dialog-actions .secondary-button { background: var(--surface); color: var(--ink); }
.action-dialog-actions .primary-button { border-color: var(--accent); background: var(--accent); color: #fff; }
.action-dialog-actions .primary-button:hover, .action-dialog-actions .primary-button:focus-visible { border-color: var(--accent-dark); background: var(--accent-dark); }
.player-dialog, .edit-dialog { width: min(680px, calc(100% - 2rem)); max-height: min(780px, calc(100dvh - 2rem)); box-sizing: border-box; overflow-y: auto; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 1rem; }
.player-dialog::backdrop, .edit-dialog::backdrop { background: rgb(15 20 18 / .55); backdrop-filter: blur(2px); }
.dialog-close { position: absolute; top: .65rem; right: .7rem; border: 0; background: transparent; color: var(--muted); font-size: 1.5rem; cursor: pointer; }
.live-report-card { border: 1px solid var(--line); background: var(--surface); }
.live-report-head { display: flex; align-items: center; gap: .9rem; border-bottom: 1px solid var(--line); padding: 1.1rem; }
.live-report-head img { width: 68px; height: 68px; object-fit: contain; background: var(--soft-green); }
.live-report-head h3 { margin: 0 0 .2rem; }
.live-report-head p { margin: 0; color: var(--muted); font: .65rem 'DM Mono', monospace; }
.live-report-actions { display: flex; justify-content: flex-end; padding: .9rem 1.1rem; border-top: 1px solid var(--line); }
.live-report-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.live-report-tabs button { border: 0; background: var(--surface); color: var(--muted); padding: .75rem .4rem; font: .62rem 'DM Mono', monospace; text-transform: uppercase; cursor: pointer; }
.live-report-tabs button.is-selected { background: var(--ink); color: var(--surface); }
.live-report-panel { display: none; }
.live-report-panel.is-selected { display: block; }
.grade-list { list-style: none; margin: 0; padding: 0; }
.grade-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 55px; border-bottom: 1px solid var(--line); padding: .6rem 1.1rem; cursor: pointer; }
.grade-row > div { min-width: 0; }
.grade-row span { display: block; font: .8rem 'Space Grotesk', sans-serif; }
.grade-row small { display: block; margin-top: .2rem; color: var(--muted); font: .58rem 'DM Mono', monospace; }
.grade-row .grade-calculation { display: none; line-height: 1.4; }
.grade-row.is-expanded .grade-calculation { display: block; }
.grade-value { display: grid; place-items: center; width: 42px; min-width: 42px; height: 30px; font: 700 .9rem 'Space Grotesk', sans-serif; }
.grade-Aplus, .grade-A, .grade-Aminus { background: #b7eac6; color: #0c5b38; }.grade-Bplus, .grade-B, .grade-Bminus { background: #e7f0d2; color: #47612b; }.grade-Cplus, .grade-C, .grade-Cminus { background: #f6edc8; color: #78631b; }.grade-Dplus, .grade-D, .grade-Dminus { background: #f5d9bd; color: #8b4d25; }.grade-F, .grade-NslashA { background: var(--paper); color: var(--muted); }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.detail-metric { display: grid; gap: .25rem; min-height: 62px; padding: .75rem 1rem; background: var(--surface); }
.detail-metric span { color: var(--muted); font: .58rem 'DM Mono', monospace; text-transform: uppercase; }
.detail-metric strong { font: 1rem 'Space Grotesk', sans-serif; }
.detail-note { margin: 1rem; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.edit-dialog-form { display: grid; gap: .8rem; padding: .8rem; }
.edit-dialog-form h3, .edit-dialog-form p { margin: 0; }
.edit-player-list { max-height: 360px; overflow: auto; border-top: 1px solid var(--line); }
.edit-player-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--line); padding: .6rem 0; }
.edit-player-row strong { font-size: .78rem; }
.edit-player-row small { display: block; color: var(--muted); font: .6rem 'DM Mono', monospace; }
.edit-remove-button { justify-self: start; border-color: #b64a3a; color: #a43b2d; }
.mobile-sheet-handle { display: none; }
.is-hidden { display: none !important; }

@media (max-width: 900px) {
  .setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .draft-layout { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, .9fr); }
  .recommendations-list { grid-template-columns: 1fr; }
  .available-player { grid-template-columns: 38px minmax(0, 1fr) 4.5rem auto; }
  .available-player > img { width: 38px; height: 38px; }
}

@media (max-width: 800px) {
  .live-section { grid-template-columns: 1fr; gap: 1rem; padding: 2.5rem 1rem 3.5rem; }
  .section-number { order: -1; }
  .section-heading, .draft-header { align-items: start; flex-direction: column; }
  .section-heading h1 { font-size: clamp(2.8rem, 13vw, 5rem); }
  .ranking-status-panel { align-items: start; flex-direction: column; }
  .draft-actions { width: auto; justify-content: flex-end; gap: .35rem; }
  .draft-save-status { display: none; }
  .draft-actions .secondary-button { padding: .45rem .5rem; font-size: .62rem; }
  .completed-roster-grid { grid-template-columns: 1fr; }
  .saved-draft-row { align-items: start; flex-direction: column; }
  .saved-draft-actions { justify-content: flex-start; }

  body.is-drafting { --draft-mobile-header-height: 6rem; overflow: hidden; }
  body.is-drafting .site-header, body.is-drafting .site-footer { display: none; }
  body.is-drafting .live-page { height: 100dvh; overflow: hidden; }
  body.is-drafting .draft-section { height: 100%; min-height: 100dvh; box-sizing: border-box; padding-top: 0; padding-bottom: 0; overflow: hidden; }
  body.is-drafting .draft-section > .section-number { display: none; }
  body.is-drafting .draft-section > .section-content { width: 100%; height: 100%; }
  body.is-drafting .draft-header { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; flex-direction: row; align-items: center; justify-content: space-between; box-sizing: border-box; height: var(--draft-mobile-header-height); min-height: 0; margin: 0; padding: .65rem 1rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(12px); }
  body.is-drafting .draft-header h2 { font-size: 1.35rem; letter-spacing: 0; }
  body.is-drafting .turn-banner { display: none; }
  body.is-drafting .draft-layout { position: relative; display: block; min-height: calc(100dvh - var(--draft-mobile-header-height)); margin-top: 0; }
  body.is-drafting .draft-sidebar { display: contents; }
  body.is-drafting .draft-board-wrap { position: fixed; inset: var(--draft-mobile-header-height) 0 0; z-index: 1; overflow: auto; padding-bottom: 0; background: var(--surface); }
  body.is-drafting .draft-board { display: grid; width: var(--draft-board-width); min-width: var(--draft-board-width); grid-template-columns: repeat(var(--team-count), 7rem); grid-template-rows: auto repeat(var(--draft-rounds), minmax(58px, auto)); gap: .35rem; padding: .35rem; border: 0; background: transparent; box-sizing: border-box; }
  body.is-drafting .draft-board .team-heading, body.is-drafting .draft-board .pick-cell { border: 1px solid var(--line); border-radius: 8px; }
  body.is-drafting .draft-board .pick-cell { position: relative; display: block; overflow: hidden; padding: .2rem .45rem .45rem; }
  body.is-drafting .draft-board .pick-player { top: .2rem; right: .45rem; left: .45rem; padding-right: 2.75rem; white-space: nowrap; }
  body.is-drafting .draft-board .pick-cell-meta { right: .45rem; bottom: .4rem; left: .45rem; padding-right: 2.2rem; }
  body.is-drafting .draft-board .pick-player-image { right: .25rem; bottom: .2rem; width: 2.75rem; height: 2.75rem; }
  body.is-drafting .draft-board .team-heading { border-bottom: 1px solid var(--line); }
  body.is-drafting .mobile-tabs { position: sticky; top: -.75rem; z-index: 11; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; height: auto; margin: -.5rem -1rem .35rem; padding: .5rem .75rem; border-bottom: 1px solid var(--line); background: var(--surface); box-shadow: 0 8px 20px rgb(15 20 18 / .08); backdrop-filter: blur(12px); }
  body.is-drafting .mobile-tabs button { min-height: 2.25rem; border: 0; border-radius: 6px; background: transparent; color: var(--muted); padding: .25rem .2rem; font: .62rem 'DM Mono', monospace; text-transform: uppercase; }
  body.is-drafting .mobile-tabs button.is-selected { background: var(--accent); color: #fff; }
  body.is-drafting .mobile-sheet-card { position: fixed; top: calc(40dvh + 3.6rem); right: 0; bottom: 0; left: 0; z-index: 10; display: block !important; height: calc(60dvh - 3.6rem); max-height: none; margin: 0; overflow: auto; padding: 0 1rem calc(4.5rem + env(safe-area-inset-bottom)); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--surface); box-shadow: 0 -10px 30px rgb(15 20 18 / .14); transform: none; transition: top .22s ease, height .22s ease; }
  body.is-drafting .mobile-sheet-card[data-mobile-active="false"] { display: none !important; }
  body.is-drafting .draft-layout[data-sheet-state="half"] .draft-board-wrap { bottom: calc(60dvh - 3.6rem); }
  body.is-drafting .draft-layout[data-sheet-state="collapsed"] .draft-board-wrap { bottom: 4.35rem; }
  body.is-drafting .draft-layout[data-sheet-state="expanded"] .draft-board-wrap { bottom: var(--draft-mobile-header-height); }
  body.is-drafting .draft-layout[data-sheet-state="collapsed"] .mobile-sheet-card { top: calc(100dvh - 4.35rem); height: 4.35rem; }
  body.is-drafting .draft-layout[data-sheet-state="expanded"] .mobile-sheet-card { top: var(--draft-mobile-header-height); height: calc(100dvh - var(--draft-mobile-header-height)); }
  body.is-drafting .mobile-sheet-card.is-dragging { transition: none; will-change: top, height; }
  body.is-drafting .mobile-sheet-handle { position: sticky; top: 0; z-index: 6; display: block; width: 100%; height: 2.1rem; min-height: 2.1rem; margin: 0 auto .15rem; padding: 0; border: 0; background: transparent; cursor: grab; touch-action: none; }
  body.is-drafting .mobile-sheet-handle::after { content: ""; display: block; width: 3rem; height: .3rem; margin: auto; border-radius: 999px; background: var(--muted); opacity: .55; }
  body.is-drafting .mobile-sheet-handle:active { cursor: grabbing; }
  body.is-drafting .mobile-sheet-card .card-heading { display: none; }
  body.is-drafting .mobile-sheet-card .sort-status { display: none; }
  body.is-drafting .mobile-sheet-card .player-filters { position: sticky; top: 2.6rem; z-index: 12; display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) 5rem; gap: .3rem; margin: 0 -.75rem .35rem; padding: .25rem .75rem; background: var(--surface); backdrop-filter: blur(12px); }
  body.is-drafting .mobile-sheet-card .player-search-toggle { grid-column: 1; grid-row: 1; }
  body.is-drafting .mobile-sheet-card #player-search { grid-column: 1 / 3; grid-row: 1; min-width: 0; }
  body.is-drafting .mobile-sheet-card #sort-players { grid-column: 3; grid-row: 1; min-width: 0; }
  body.is-drafting .mobile-sheet-card .position-filter-buttons { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
  body.is-drafting .mobile-sheet-card .position-filter-buttons::-webkit-scrollbar { display: none; }
  body.is-drafting .mobile-sheet-card .position-filter-button { flex: 0 0 2.35rem; width: 2.35rem; height: 2.35rem; padding: .1rem; border-width: 1px; }
  body.is-drafting .mobile-sheet-card .position-filter-button strong { font-size: .52rem; }
  body.is-drafting .mobile-sheet-card .position-filter-button span { font-size: .48rem; }
  body.is-drafting .mobile-sheet-card .player-search-toggle { width: 2.35rem; min-width: 2.35rem; height: 2.35rem; padding: .25rem; }
  body.is-drafting .draft-layout[data-mobile-view="players"] .available-list { max-height: none; overflow: visible; }
  body.is-drafting .available-card { padding: 0 1rem calc(4.5rem + env(safe-area-inset-bottom)); }
  body.is-drafting .available-player { grid-template-columns: 64px minmax(0, 1fr) auto; min-height: 92px; gap: .75rem; padding: .75rem 0; }
  body.is-drafting .available-player > img { width: 64px; height: 64px; }
  body.is-drafting .available-player > em { display: none; }
  body.is-drafting .available-player-metrics { display: none; }
  body.is-drafting .available-player .player-info-trigger strong { font-size: .95rem; }
  body.is-drafting .available-player .player-info-trigger > span { margin-top: .2rem; font-size: .72rem; }
  body.is-drafting .available-player .player-info-trigger .available-player-summary-value { font-size: .72rem; }
  body.is-drafting .draft-player-button { min-width: 4.5rem; align-self: stretch; }
  body.is-drafting .recommendation-row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: .75rem; min-height: 96px; box-sizing: border-box; padding: .75rem 0; }
  body.is-drafting .recommendation-row > img { width: 64px; height: 64px; }
  body.is-drafting .recommendation-player-trigger strong { font-size: .95rem; }
  body.is-drafting .recommendation-player-trigger span { margin-top: .2rem; font-size: .72rem; }
  body.is-drafting .recommendation-detail { display: none; }
  body.is-drafting .recommendation-row .draft-player-button { align-self: stretch; min-width: 4.5rem; padding-inline: .7rem; }
  body.is-drafting .roster-slot { min-height: 92px; box-sizing: border-box; }
  body.is-drafting .roster-slot { position: relative; display: block; padding: 0; overflow: hidden; background: #050505; }
  body.is-drafting .roster-slot-player { display: flex; align-items: center; min-height: 76px; margin: 8px 8px 8px 16px; padding: .35rem .7rem .35rem .4rem; border-radius: 6px; color: #111; box-sizing: border-box; }
  body.is-drafting .roster-slot.position-qb .roster-slot-player { background: #a8c9a1; }
  body.is-drafting .roster-slot.position-rb .roster-slot-player { background: #d98c8c; }
  body.is-drafting .roster-slot.position-wr .roster-slot-player { background: #9bbfe3; }
  body.is-drafting .roster-slot.position-te .roster-slot-player { background: #e3c66b; }
  body.is-drafting .roster-slot.position-k .roster-slot-player { background: #c1a7d9; }
  body.is-drafting .roster-slot.position-dst .roster-slot-player { background: #b7b9b5; }
  body.is-drafting .roster-slot.position-flex .roster-slot-player, body.is-drafting .roster-slot.position-superflex .roster-slot-player { background: #b7d5a8; }
  body.is-drafting .roster-slot.position-bench .roster-slot-player { background: #d6d2c8; }
  body.is-drafting .roster-slot.empty .roster-slot-player { background: #d6d2c8 !important; color: #111; }
  body.is-drafting .roster-slot > span:last-child { position: absolute; top: 14px; right: 18px; display: grid; justify-items: end; color: #111; font: .68rem 'DM Mono', monospace; text-align: right; }
  body.is-drafting .roster-slot-player > small, body.is-drafting .roster-player-name, body.is-drafting .roster-player-name small { color: #111; }
  body.is-drafting .roster-slot-player { gap: 0; }
  body.is-drafting .roster-slot-position { flex: 0 0 2.5rem; width: 2.5rem; margin-right: 0; white-space: nowrap; }
  body.is-drafting .roster-player-image { width: 64px; height: 64px; margin-right: 0; }
  body.is-drafting .player-dialog, body.is-drafting .edit-dialog { width: 100%; max-width: none; max-height: min(82dvh, 720px); margin: auto 0 0; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 1rem 1rem 0 0; }
}

@media (max-width: 480px) {
  .setup-grid { grid-template-columns: 1fr 1fr; }
  .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.is-drafting { --draft-mobile-header-height: 8rem; }
  body.is-drafting .draft-header { flex-direction: column; align-items: flex-start; justify-content: center; gap: .25rem; }
  body.is-drafting .draft-actions { width: 100%; justify-content: flex-start; }
  .draft-actions .secondary-button { padding-inline: .35rem; font-size: .58rem; }
}