/* Phone and PC are both base layouts.
   Widths: <640 stack and card. 640 tabular strips. 768 two-up boards.
   1024 side nav. 1280 wider shell.
   Safe area comes from env(). Portrait Zoom Off is about 62pt top and 34pt
   bottom on iPhone Pro Max; those numbers are not padding constants.
   Category strips switch with @container board (min-width: 600px). */

:root {
  --bg: #12150e;
  --bg-raise: #1b2116;
  --line: #343c2b;
  --text: #f4f1e6;
  --muted: #b4b09d;
  --gold: #e4b34a;
  --gold-ink: #241c0a;
  --iron: #e4b34a;
  --ok: #9cba78;
  --risk: #e39a45;
  --avoid: #d26555;
  --strong: #9cba78;
  --weak: #d48478;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --pad-top: 12px;
  --pad-x: 16px;
  --pad-bottom: 20px;
  --tap: 44px;
  --nav-bar: 56px;
  --nav-offset: calc(var(--nav-bar) + var(--safe-bottom));
  --dock-clearance: 64px;
  --content-clearance: calc(var(--nav-offset) + var(--dock-clearance));
  --shell-max: 100%;
  --shell-cols: minmax(0, 1fr);
  --shell-gap: 0px;
  --detail-size: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  max-width: 100%;
  overflow-x: clip;
  background:
    radial-gradient(1200px 400px at 10% -10%, rgba(228, 179, 74, 0.08), transparent 50%),
    var(--bg);
  color: var(--text);
  font-family: "Avenir Next", "PingFang HK", "Noto Sans CJK TC", "Noto Sans TC", "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

button, input, select { font: inherit; color: inherit; }

button { cursor: pointer; touch-action: manipulation; }

button,
.btn,
.btn-gold,
.btn-taken,
.btn-quiet,
a.btn,
.nav-link,
select,
summary {
  min-height: var(--tap);
  min-width: var(--tap);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]) {
  min-height: var(--tap);
}

.shell {
  width: min(var(--shell-max), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--shell-cols);
  gap: var(--shell-gap);
  align-items: start;
  min-width: 0;
  padding:
    calc(var(--pad-top) + var(--safe-top))
    calc(var(--pad-x) + var(--safe-right))
    calc(var(--pad-bottom) + var(--content-clearance))
    calc(var(--pad-x) + var(--safe-left));
}

.nav,
.main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
}

.nav {
  position: fixed;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  align-items: stretch;
  padding:
    6px
    calc(4px + var(--safe-right))
    calc(6px + var(--safe-bottom))
    calc(4px + var(--safe-left));
  background: var(--bg-raise);
  border-top: 1px solid var(--line);
  box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.28);
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 4px 2px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--muted);
  text-decoration: none;
  text-align: center;
  font-size: 12px;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
}

.nav-link.active {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: transparent;
  font-weight: 700;
}

.main { min-width: 0; }

.score-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  margin: 8px 0;
}

.score-pair > * {
  min-width: 0;
  background: #12150e;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
}

.score-pair .kicker { margin: 0; }
.score-pair strong {
  display: block;
  margin-top: 2px;
  font-size: clamp(1.75rem, 8vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
.matchups .team-name {
  font-size: clamp(1.15rem, 4.8vw, 1.35rem);
  overflow-wrap: anywhere;
}

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
  margin-bottom: 16px;
  min-width: 0;
}

.brand { flex: 1 1 100%; min-width: 0; }

.kicker {
  margin: 0 0 4px;
  color: var(--gold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}

h1, h2, h3, p { overflow-wrap: break-word; }

h1 {
  margin: 0;
  font-size: clamp(1.75rem, 8vw, 2.125rem);
  font-weight: 650;
  letter-spacing: -0.03em;
  white-space: normal;
}

.cats, .sub {
  margin: 6px 0 0;
  color: var(--muted);
}

.pick-box, .tools, .adds-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.pick-box .btn,
.tools .btn,
.tools .btn-quiet,
.adds-row .btn,
.adds-row .btn-quiet,
.adds-row select,
.pick-box input {
  width: 100%;
}

.yahoo-bar {
  flex: 1 1 100%;
  display: grid;
  gap: 8px;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-raise);
}

.yahoo-bar .hint,
.yahoo-bar .stale-banner {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.yahoo-bar > .btn,
.yahoo-bar > .btn-gold,
.yahoo-bar > .btn-quiet,
.yahoo-bar > a.btn {
  width: 100%;
}

.yahoo-bar > .btn-gold:first-of-type {
  position: fixed;
  z-index: 28;
  left: calc(var(--pad-x) + var(--safe-left));
  right: calc(var(--pad-x) + var(--safe-right));
  bottom: calc(var(--nav-offset) + 8px);
  width: auto;
  min-height: 48px;
  margin: 0;
  box-shadow: var(--shadow);
}

a.bookmark-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-align: center;
}

.pick-box label, .field-label {
  color: var(--muted);
  font-size: 13px;
}

.pick-box input {
  width: 100%;
  max-width: 100%;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 22px;
}

.round-label {
  margin: 0;
  min-width: 0;
  color: var(--text);
}

.draft-order {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.order-seat {
  display: flex;
  gap: 6px;
  align-items: baseline;
  min-width: 0;
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 8px;
}

.order-seat.mine { border-color: var(--gold); }
.order-seat.on-clock { background: #3a3218; }

.order-num {
  color: var(--gold);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.order-name { font-size: 14px; overflow-wrap: anywhere; }

.btn, .btn-gold, .btn-taken, .btn-quiet, a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-raise);
  min-height: var(--tap);
  padding: 8px 14px;
  text-decoration: none;
}

.btn-gold {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: transparent;
  font-weight: 700;
  min-height: 48px;
}

.btn-taken { background: #3a2420; border-color: #6d3a32; }
.btn-quiet { color: var(--muted); }

.btn:disabled, .btn-gold:disabled, .btn-taken:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: var(--tap);
  min-width: var(--tap);
  color: var(--muted);
}

.toggle input {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  min-width: 0;
}

.search-wrap {
  position: sticky;
  top: var(--safe-top);
  z-index: 4;
  background: linear-gradient(var(--bg) 70%, rgba(18, 21, 14, 0));
  padding: 8px 0 14px;
}

.search-wrap input[type="search"] {
  width: 100%;
  background: #242b1c;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 22px;
}

.search-wrap input:focus,
.pick-box input:focus,
select:focus,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.results {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  min-width: 0;
}

.result, .rec, .slot, .taken-row {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-width: 0;
}

.result.wire-row,
.result,
.taken-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px 12px;
  align-items: stretch;
  padding: 10px 12px;
}

.who, .name, .meta, .why, .note, .hint { min-width: 0; }

.name { font-size: 18px; font-weight: 650; overflow-wrap: anywhere; }

.meta, .note, .why, .slot-label, .hint, .status-line { color: var(--muted); }

.note { margin: 4px 0 0; }

.actions, .rec-actions, .yahoo-cta, .sim-controls {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.actions > *,
.rec-actions > *,
.yahoo-cta > *,
.sim-controls > * {
  width: 100%;
  max-width: 100%;
  min-height: var(--tap);
}

.yahoo-cta {
  display: grid;
}

select,
select.avail,
select.drop-for,
select.drafted-by,
#my-slot,
#week-opponent,
#punt-choice,
.punt-choice select,
.slot .actions select {
  background: #12150e;
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: var(--tap);
  max-width: 100%;
  padding: 0 8px;
}

.tag {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 13px;
  border: 1px solid currentColor;
}

.tag-鐵 { color: var(--iron); }
.tag-可 { color: var(--ok); }
.tag-險 { color: var(--risk); }
.tag-避 { color: var(--avoid); }

.layout,
.wire-layout,
.analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  min-width: 0;
}

.panel-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 12px;
  align-items: baseline;
  margin: 8px 0;
  min-width: 0;
}

.panel-title h2 { margin: 0; font-size: 22px; }

.cats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}

.build-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin: 0 0 12px;
  min-width: 0;
}

.punt-choice {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: var(--tap);
  color: var(--muted);
}

.punt-choice select { flex: 1 1 auto; min-width: 0; }

.build-row .hint { margin: 0; }

.cat {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 6px;
  min-width: 0;
  min-height: var(--tap);
  text-align: center;
}

.cat strong { display: block; font-size: 13px; }
.tone-Strong, .tone-Ahead { color: var(--strong); }
.tone-Weak, .tone-Behind { color: var(--weak); }
.tone-Mid, .tone-Close { color: var(--muted); }
.slot.il { outline: 1px dashed #3d4a32; }
.slot.il-bad { outline: 1px dashed var(--avoid); }

.punt {
  background: #2c2616;
  border: 1px solid #6d5a2e;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.punt p { margin: 0 0 8px; }

.recs { display: grid; gap: 12px; min-width: 0; }

.rec {
  padding: 14px 14px 12px;
  border-left: 5px solid var(--line);
  box-shadow: var(--shadow);
}

.rec.tag-鐵 { border-left-color: var(--iron); }
.rec.tag-可 { border-left-color: var(--ok); }
.rec.tag-險 { border-left-color: var(--risk); }
.rec.tag-避 { border-left-color: var(--avoid); }

.rec-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 10px;
  align-items: baseline;
  min-width: 0;
}

.rec .name { font-size: 22px; }

.why { margin: 8px 0; color: var(--text); }

.slot-label { margin: 2px 0 0; color: var(--gold); }

details { color: var(--muted); font-size: 14px; }

.taken > summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 20px;
  font-weight: 650;
  margin-bottom: 8px;
}

.roster, .taken-list { display: grid; gap: 8px; min-width: 0; }

.slot {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 10px;
  align-items: center;
}

.slot-id { font-weight: 700; color: var(--muted); }
.slot.empty { opacity: 0.72; }
.slot.gap { outline: 1px dashed #6d5a2e; }
.slot.thin { outline: 1px dashed #6d4a42; }

.taken { margin-top: 18px; }

.taken input[type="search"] {
  width: 100%;
  margin: 8px 0;
  background: #242b1c;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}

.hint, .status-line, .loading, .empty { color: var(--muted); }

.status-line { min-height: 1.4em; margin: 8px 0; overflow-wrap: anywhere; }

.rules {
  margin-top: 22px;
  color: var(--muted);
  font-size: 14px;
}

.clock-line { color: var(--gold); }

.move-log-wrap { display: block; margin: 8px 0 18px; min-width: 0; }
.move-log-wrap h2, .taken h2 { margin: 0 0 8px; font-size: 22px; }
.move-log p { margin: 0 0 4px; }
.move { border-left-color: var(--gold); }

#wire-search {
  width: 100%;
  margin: 8px 0;
  background: #242b1c;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 18px;
}

.league { margin-top: 28px; min-width: 0; }

.league-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.team-card, .trade {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  min-width: 0;
  max-width: 100%;
}

.trade { border-color: #3d4a32; background: #1c2418; }
.trade p { margin: 0; }

.trades { display: grid; gap: 8px; margin: 8px 0 14px; }

.team-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
  min-width: 0;
}

.team-name {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 650;
}

.slot-badge {
  color: var(--gold);
  font-size: 13px;
  white-space: normal;
}

.team-tones { margin: 8px 0; }
.team-tones .cat { min-width: 0; padding: 8px 6px; }

.team-picks { display: grid; gap: 6px; }
.team-pick {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
}
.team-pick .name { font-size: 16px; }
.team-pick button { min-height: var(--tap); min-width: var(--tap); width: 100%; }

.analysis { min-width: 0; }
.analysis h2 { font-size: 22px; margin: 18px 0 8px; }
.analysis .panel-title h2 { margin: 0; }

.cat-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

.cat-card {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 0;
}
.cat-card p { margin: 4px 0 0; font-size: 15px; color: var(--muted); }
.cat-card-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}
.cat-sum { color: var(--muted); font-size: 14px; }
.cat-card.punt-cat { outline: 1px dashed #6d5a2e; }
.build-notes { margin: 0 0 8px; padding-left: 18px; }
.build-notes li { margin: 4px 0; }
.player-line { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.field-list { display: grid; gap: 8px; min-width: 0; }

.stale-banner {
  flex: 1 1 100%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #3a2a18;
  color: #f4e6c4;
  border: 1px solid #8a6230;
}

.today-card {
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 8px 0 18px;
  min-width: 0;
}

.today-card h2 { margin: 0; }
.deploy-title { margin: 14px 0 6px; font-size: 18px; }
.deploy-row { margin: 4px 0; }
.signal-clear { color: var(--ok); }
.signal-lean { color: var(--ok); }
.signal-close { color: var(--gold); }
.signal-sit { color: var(--risk); }
.signal-none { color: var(--muted); }

.power-grid,
.claim-queue,
.matchups,
.today-card,
.stream-paths,
.usable-schedule {
  min-width: 0;
  max-width: 100%;
}

.power-detail,
.lean .power-detail,
.power-strip .lean > .power-detail,
.board-sticky .power-detail {
  display: block;
  color: var(--muted);
  font-size: var(--detail-size);
  line-height: 1.4;
  font-style: normal;
  font-weight: 450;
  overflow-wrap: anywhere;
}

.power-grid, .claim-queue { margin: 12px 0 18px; }
.cost-line { margin: 4px 0; color: var(--muted); font-size: 16px; }
.wire-guide {
  margin: 8px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-raise);
  min-width: 0;
}
.wire-guide .why { margin: 0 0 6px; }
.wire-tag {
  display: inline-block;
  margin: 0 4px;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: 0.06em;
  vertical-align: 1px;
}
.wire-tag-fa { color: var(--ok); border-color: var(--ok); }
.wire-tag-w { color: var(--risk); border-color: var(--risk); }
.wire-claims { margin-top: 18px; }
.wire-claim { border-color: var(--risk); }

.board-scroll {
  container-type: inline-size;
  container-name: board;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.board-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.board-head { display: none; }

.power-strip.board-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-raise);
  min-width: 0;
}

.power-strip .board-sticky {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
  margin-bottom: 6px;
}

.power-strip .board-sticky .power-detail {
  margin-top: 4px;
  font-weight: 450;
}

.power-strip .lean {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  grid-template-areas:
    "label value"
    "label detail";
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  min-height: var(--tap);
  min-width: 0;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.power-strip .lean > span:not(.power-detail) {
  grid-area: label;
  color: var(--muted);
  font-size: 15px;
}

.power-strip .lean > strong {
  grid-area: value;
  font-size: 17px;
}

.power-strip .lean > .power-detail { grid-area: detail; }

.board-note { margin: 0; }

.lean-strip:not(.power-strip) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin: 8px 0;
  min-width: 0;
}

.lean {
  min-width: 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #12150e;
  text-align: left;
}

.lean-strip:not(.power-strip) .lean {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: var(--tap);
}

.lean span {
  display: block;
  color: var(--muted);
  font-size: 15px;
  letter-spacing: 0.04em;
}

.lean strong { font-size: 17px; }
.lean-you { border-color: var(--ok); }
.lean-you strong { color: var(--ok); }
.lean-opp { border-color: var(--avoid); }
.lean-opp strong { color: var(--avoid); }
.lean-tie strong, .lean-none strong, .lean-side strong { color: var(--text); }

.usable-schedule, .stream-paths { margin: 12px 0 18px; }
.schedule-day {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raise);
  margin: 8px 0;
  min-width: 0;
}
.schedule-day p { margin: 0; }
.minutes-line { color: var(--muted); margin: 4px 0 0; font-size: 15px; }
.plan-block { margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--line); min-width: 0; }
.digest-status { margin-top: 0; }

.rec,
.result,
.today-card,
.team-card,
.analysis,
.claim-queue,
.power-grid {
  container-type: inline-size;
  container-name: panel;
}

@container panel (min-width: 560px) {
  .score-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-pick {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .team-pick button { width: auto; }
}

@container panel (min-width: 480px) {
  .actions,
  .rec-actions,
  .yahoo-cta,
  .sim-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .actions > *,
  .rec-actions > *,
  .yahoo-cta > .btn,
  .yahoo-cta > .btn-quiet,
  .sim-controls > * {
    width: auto;
    flex: 0 1 auto;
  }
  .yahoo-cta { flex: 1 1 16rem; }
  .actions > select,
  .sim-controls > select { flex-basis: 100%; }
}

@container panel (min-width: 640px) {
  .cat-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container panel (min-width: 960px) {
  .cat-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container board (min-width: 600px) {
  .board-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: max-content;
    min-width: 100%;
  }
  .board-head,
  .board-grid > .power-strip.board-row {
    display: grid;
    grid-template-columns: 9.25rem repeat(var(--board-cols, 9), minmax(6.75rem, 1fr));
    width: max-content;
    min-width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    gap: 0;
  }
  .board-head { display: grid; }
  .board-h,
  .board-corner,
  .board-grid .board-sticky {
    position: static;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--tap);
    min-width: 0;
    margin: 0;
    padding: 8px 10px;
    background: var(--bg-raise);
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    font-size: 15px;
  }
  .board-grid .board-sticky,
  .board-corner {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg);
  }
  .board-corner { z-index: 2; }
  .board-h {
    color: var(--muted);
    letter-spacing: 0.04em;
    font-weight: 650;
  }
  .board-grid .power-strip .lean {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 6.75rem;
    min-height: var(--tap);
    padding: 8px 10px;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    background: var(--bg-raise);
  }
  .board-grid .power-strip .lean > span:not(.power-detail) { display: none; }
  .board-note {
    grid-column: 2 / -1;
    margin: 0;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
  }
  .lean-strip:not(.power-strip) {
    grid-auto-flow: column;
    grid-auto-columns: minmax(6.5rem, 1fr);
    grid-template-columns: none;
    width: max-content;
    min-width: 100%;
    gap: 8px;
  }
  .lean-strip:not(.power-strip) .lean {
    display: block;
    min-width: 6.5rem;
    text-align: center;
  }
  .lean-strip:not(.power-strip) .lean:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--bg);
  }
}

@media (hover: hover) and (pointer: fine) {
  .nav-link:hover { color: var(--text); }
  .btn:hover,
  .btn-quiet:hover,
  a.btn:hover { border-color: var(--gold); }
  .btn-gold:hover { filter: brightness(1.05); }
}

@media (min-width: 640px) {
  :root {
    --pad-x: 18px;
    --dock-clearance: 0px;
  }
  .yahoo-bar > .btn-gold:first-of-type {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    box-shadow: none;
  }
  .cats-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .build-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
}

@media (min-width: 768px) {
  :root {
    --pad-x: 22px;
    --pad-top: 18px;
  }
  .pick-box,
  .tools,
  .adds-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
  }
  .pick-box .btn,
  .tools .btn,
  .tools .btn-quiet,
  .adds-row .btn,
  .adds-row .btn-quiet,
  .adds-row select {
    width: auto;
  }
  .pick-box input { width: 92px; }
  .yahoo-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
  }
  .yahoo-bar .hint { flex: 1 1 16rem; }
  .yahoo-bar > .btn,
  .yahoo-bar > .btn-gold,
  .yahoo-bar > .btn-quiet,
  .yahoo-bar > a.btn {
    width: auto;
    flex: 1 1 11rem;
  }
  .league-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  :root {
    --shell-max: 1180px;
    --shell-cols: 180px minmax(0, 1fr);
    --shell-gap: 22px;
    --pad-top: 22px;
    --pad-bottom: 64px;
    --pad-x: 0px;
    --nav-offset: 0px;
    --dock-clearance: 0px;
    --content-clearance: 0px;
  }
  .shell {
    width: min(var(--shell-max), calc(100% - 28px));
  }
  .nav {
    position: sticky;
    top: calc(12px + var(--safe-top));
    bottom: auto;
    left: auto;
    right: auto;
    z-index: 2;
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1;
    grid-template-columns: none;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .main { grid-column: 2; }
  .nav-link {
    justify-content: flex-start;
    text-align: left;
    padding: 0 14px;
    border: 1px solid var(--line);
    font-size: 17px;
    line-height: 1.2;
    white-space: nowrap;
  }
  h1 {
    font-size: 34px;
    white-space: nowrap;
  }
  .result:not(.wire-row),
  .taken-row {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem);
    align-items: center;
  }
  .layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr); }
  .wire-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.8fr); }
  .analysis-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); }
  .cats-row { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  :root {
    --shell-max: 1240px;
    --shell-gap: 28px;
  }
  .league-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}