/**
 * Bid Five — dark court, one decision at a time.
 *
 * Rules this file holds itself to:
 *   - quiet centred screens; the live draft widens only to keep controls visible
 *   - hairline rules instead of boxes; no gradients, no shadows
 *   - ball-orange appears once per screen, on the thing being asked of you;
 *     gold means first place and nothing else
 *   - every figure is tabular mono — salaries, records, clocks, stat lines
 *   - nothing smaller than 14px
 *
 * The ground is a warm brown-black rather than a neutral one. That is doing
 * real work: each round floods the band with one of thirty team colours, and an
 * amber-biased neutral holds all of them without clashing.
 *
 * `--team` / `--on-team` are set per round from web/teams.js. Every pairing in
 * that file clears WCAG AA — run `npm run contrast` after changing one.
 */

:root {
  color-scheme: dark;

  --paper: #14100b;
  --card: #1f1811;
  --sunken: #2a2118;
  --ink: #f5efe6;
  --muted: #a5967f;
  --hair: #3a2e22;
  --hair-strong: #4a3b2c;

  /* Replaced per round; this neutral is what the landing screen wears. */
  --team: #2e2a26;
  --on-team: #ffffff;

  --ball: #e8622a;
  --on-ball: #1b0e06;
  --gold: #e9b949;
  --on-gold: #241b08;

  --ok: #5fa363;
  --warn: #c4453a;

  --col: 34rem;
  --draft-col: 72rem;
  --gap: 1.25rem;

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  /* Every figure in the game. The mono is what makes four GMs' spending
     scannable down a column instead of reading as prose. */
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
p,
ol,
ul {
  margin: 0;
}

/* ---------------------------------------------------------------- layout */

.page {
  width: 100%;
  max-width: calc(var(--draft-col) + 2.5rem);
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 3rem) 1.25rem 4rem;
}

.screen {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: 100%;
  max-width: var(--col);
  margin-inline: auto;
}

#screenDraft {
  max-width: var(--draft-col);
}

.page[data-screen="draft"] {
  padding-top: 1rem;
}

.site-nav {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--draft-col);
  margin: 0 auto 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--hair);
}

.page[data-screen="landing"] .site-nav {
  display: none;
}

.page:not([data-screen="draft"]) .site-nav {
  max-width: var(--col);
}

.site-home {
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.site-home img {
  display: block;
}

.site-wordmark {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.site-wordmark span {
  color: var(--ball);
}

.site-nav-context {
  overflow: hidden;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screen[hidden] {
  display: none;
}

.kicker {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.screen-title {
  font-size: clamp(1.5rem, 4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.lede {
  color: var(--muted);
  font-size: 1rem;
}

.fine {
  color: var(--muted);
  font-size: 0.85rem;
}

.or {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--hair-strong);
  border-radius: 0.55rem;
  background: var(--card);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 80ms ease;
}

.btn:hover:not(:disabled) {
  border-color: var(--ink);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.42;
  cursor: default;
}

.btn-primary {
  border-color: var(--team);
  background: var(--team);
  color: var(--on-team);
}

.btn-primary:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--team);
}

.btn-big {
  padding: 0.9rem 1.2rem;
  font-size: 1.05rem;
}

.btn-huge {
  padding: 1.15rem 1.2rem;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
}

.btn-small {
  padding: 0.5rem 0.4rem;
  font-size: 0.9rem;
}

.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.linkish:hover {
  color: var(--ink);
}

/* ---------------------------------------------------------------- landing */

#screenLanding {
  max-width: 68rem;
}

.landing {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 8vw, 6rem);
  padding-top: clamp(0.5rem, 4vh, 2.5rem);
}

/* The lockup: mark, then the wordmark set in the UI stack rather than shipped
   as outlines, so it stays selectable and crisp at any size. See
   web/brand/README.md for the spec. */
.lockup {
  display: flex;
  gap: 0.85rem;
  align-items: center;
}

.lockup-mark {
  flex: none;
  display: block;
  width: clamp(2.7rem, 9vw, 3.4rem);
  height: auto;
}

.wordmark {
  font-size: clamp(2.5rem, 9vw, 3.8rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.045em;
}

.wordmark span {
  color: var(--ball);
}

.home-hero {
  display: grid;
  gap: 2rem;
}

.home-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-kicker,
.home-section-kicker,
.home-round-kicker,
.home-active-label {
  color: var(--ball);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.home-kicker {
  margin-top: 1.35rem;
}

.home-headline {
  margin-top: 0.6rem;
  font-size: clamp(2.7rem, 11vw, 5.7rem);
  font-weight: 850;
  line-height: 0.92;
  letter-spacing: -0.055em;
}

.home-lede {
  max-width: 36rem;
  margin-top: 1.2rem;
  color: var(--muted);
  font-size: clamp(1rem, 2.4vw, 1.18rem);
}

.home-actions {
  display: grid;
  gap: 0.65rem;
  width: 100%;
  margin-top: 1.7rem;
}

.home-actions .btn {
  width: 100%;
}

.home-actions[hidden] {
  display: none;
}

.home-fine {
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.home-active {
  display: grid;
  gap: 0.9rem;
  width: 100%;
  margin-top: 1.7rem;
  padding: 1rem;
  border: 1px solid var(--ball);
  border-radius: 0.65rem;
  background: color-mix(in srgb, var(--ball) 8%, var(--card));
}

.home-active[hidden] {
  display: none;
}

.home-active > div > p:last-child {
  margin-top: 0.2rem;
  font-weight: 700;
}

.home-round {
  padding: 1.1rem;
  border: 1px solid var(--hair-strong);
  border-radius: 0.8rem;
  background: var(--card);
}

.home-round-kicker {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--hair);
}

.home-round-step {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: 0.8rem;
  align-items: start;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--hair);
}

.home-round-step > span {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.76rem;
}

.home-round-step div {
  display: grid;
  gap: 0.15rem;
}

.home-round-step b {
  font-size: 1rem;
}

.home-round-step small {
  color: var(--muted);
  font-size: 0.85rem;
}

.home-round-step.is-result b {
  color: var(--ball);
}

.home-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 1rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.home-cap strong {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.6rem;
}

.home-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block: 1px solid var(--hair);
}

.home-facts > div {
  display: grid;
  gap: 0.1rem;
  padding: 1.1rem 0.45rem;
  text-align: center;
}

.home-facts > div + div {
  border-left: 1px solid var(--hair);
}

.home-facts strong {
  font-family: var(--mono);
  font-size: clamp(1.35rem, 6vw, 2rem);
}

.home-facts span {
  color: var(--muted);
  font-size: 0.72rem;
}

.home-section {
  display: grid;
  gap: 0.8rem;
}

.home-section h2,
.home-lower h2 {
  font-size: clamp(1.8rem, 6vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.home-cards {
  display: grid;
  gap: 1px;
  margin-top: 0.8rem;
  border: 1px solid var(--hair);
  border-radius: 0.75rem;
  overflow: hidden;
  background: var(--hair);
}

.home-cards article {
  padding: 1.2rem;
  background: var(--card);
}

.home-card-number {
  display: block;
  margin-bottom: 1.25rem;
  color: var(--ball);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.home-cards h3 {
  margin: 0;
  font-size: 1.08rem;
}

.home-cards p,
.home-lower > div > p:last-child {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.home-lower {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

.home-lower h2 {
  margin-top: 0.5rem;
}

.home-board-wrap {
  min-width: 0;
}

.landing-links {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  color: var(--muted);
}

/* ---------------------------------------------------------------- lobby */

.code {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: center;
  padding: 1rem;
  border: 1px dashed var(--hair-strong);
  border-radius: 0.6rem;
  background: var(--card);
  cursor: pointer;
}

.code span {
  font-size: clamp(2rem, 9vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}

.code small {
  color: var(--muted);
  font-size: 0.78rem;
}

.field {
  display: grid;
  gap: 0.35rem;
}

.field > span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.field input {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--hair-strong);
  border-radius: 0.5rem;
  background: var(--card);
}

.field input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.settings summary {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.settings > div,
.settings > p {
  margin-top: 0.8rem;
}

.seats {
  display: grid;
  gap: 1px;
  border: 1px solid var(--hair);
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--hair);
}

.seat {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.7rem 0.85rem;
  background: var(--card);
}

.seat b {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.98rem;
}

.seat .tag {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.seat .tag.is-ready {
  color: var(--ok);
}

/* ---------------------------------------------------------------- the band */

.progress {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.pip {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--hair);
}

.pip.is-done {
  background: var(--ink);
}

.pip.is-live {
  background: var(--team);
}

/* The hairline is load-bearing on a dark ground: Brooklyn (#1A1A1A), Denver and
   Minnesota are near-black, and without an edge the band dissolves into the
   court instead of reading as the round's own surface. */
.band {
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--hair);
  border-radius: 0.7rem;
  background: var(--team);
  color: var(--on-team);
}

.band-kicker,
.band-sub {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.82;
}

.band-sub {
  margin-top: 0.5rem;
  letter-spacing: 0.06em;
}

/* The shared draw is a real prize wheel. The coloured disc turns beneath a
   fixed pointer; the winning team ends centered at twelve o'clock. */
.wheel-wrap {
  position: relative;
  display: none;
  width: min(21rem, 100%);
  aspect-ratio: 1;
  margin: 0.65rem auto 0;
  padding: 0.55rem;
}

.wheel-pointer {
  position: absolute;
  z-index: 4;
  top: -0.1rem;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-right: 0.8rem solid transparent;
  border-left: 0.8rem solid transparent;
  border-top: 1.55rem solid var(--ball);
}

.spin-wheel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 0.4rem solid var(--ink);
  border-radius: 50%;
  outline: 2px solid var(--paper);
  will-change: transform;
}

.spin-wheel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg 29.25deg,
    rgba(255, 255, 255, 0.7) 29.25deg 30deg
  );
  pointer-events: none;
}

.wheel-labels {
  position: absolute;
  z-index: 1;
  inset: 0;
}

.wheel-label {
  position: absolute;
  inset: 0.4rem;
  display: flex;
  justify-content: center;
  padding-top: 0.35rem;
  transform: rotate(var(--angle));
  font-family: var(--mono);
  font-size: clamp(0.925rem, 2.8vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.04em;
}

.wheel-hub {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  width: 47%;
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.75rem;
  transform: translate(-50%, -50%);
  border: 0.35rem solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}

.wheel-hub span {
  font-family: var(--mono);
  font-size: clamp(0.925rem, 3vw, 1rem);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.wheel-hub strong {
  max-width: 100%;
  font-size: clamp(0.925rem, 3.5vw, 1.1rem);
  font-weight: 900;
  line-height: 1.05;
}

.spin-result {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.spin-result span {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.spin-result strong {
  min-width: 0;
  overflow: hidden;
  font-size: clamp(1.75rem, 6.4vw, 2.6rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screenDraft[data-stage="spinning"] .band {
  overflow: hidden;
  background: var(--card);
  color: var(--ink);
  text-align: center;
}

#screenDraft[data-stage="spinning"] .wheel-wrap {
  display: block;
}

#screenDraft[data-stage="spinning"] .spin-result {
  display: none;
}

#screenDraft[data-stage="spinning"] .band-sub {
  margin-top: 0.65rem;
}

.band.is-landing .wheel-hub {
  animation: wheel-settle 420ms cubic-bezier(0.3, 1.5, 0.5, 1);
}

@keyframes wheel-settle {
  0% { transform: translate(-50%, -50%) scale(0.92); }
  65% { transform: translate(-50%, -50%) scale(1.04); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* ---------------------------------------------------------------- the ask */

/* The single sentence saying what is being asked of you right now. */
.ask {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ask .clock {
  color: var(--muted);
  font-weight: 700;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.ask .clock.is-urgent {
  color: var(--warn);
}

/* ---------------------------------------------------------------- the stage */

.stage {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.draft-layout,
.draft-sidebar {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.draft-sidebar {
  align-content: start;
}

.lot {
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--hair-strong);
  border-radius: 0.7rem;
  background: var(--card);
}

.lot-name {
  font-size: clamp(1.35rem, 5vw, 1.7rem);
  font-weight: 850;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.statline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.92rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.statline b {
  color: var(--ink);
  font-weight: 800;
}

.highbid {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hair);
}

.highbid .amount {
  font-size: 1.6rem;
  font-weight: 900;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.highbid .who {
  color: var(--muted);
  font-size: 0.88rem;
}

.consolation-note {
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: 0.87rem;
}

/* Choosable player cards: the pool (host swap) and the consolation board. */
.options {
  display: grid;
  gap: 0.5rem;
}

.option {
  display: grid;
  gap: 0.2rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--hair);
  border-radius: 0.55rem;
  background: var(--card);
  text-align: left;
  cursor: pointer;
}

.option:hover:not(:disabled) {
  border-color: var(--ink);
}

.option:disabled {
  cursor: default;
  opacity: 0.75;
}

.option b {
  font-size: 1rem;
}

.option span {
  color: var(--muted);
  font-size: 0.85rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.option em {
  color: var(--team);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.option.is-picked {
  border-color: var(--team);
  border-width: 2px;
  padding: calc(0.75rem - 1px) calc(0.85rem - 1px);
}

.option.is-contested em {
  color: var(--warn);
}

/* The minimum-contract body: always there, never good. */
.option.is-replacement {
  border-style: dashed;
  background: var(--sunken);
}

.option.is-replacement b {
  color: var(--muted);
}

/* ---------------------------------------------------------------- bidding */

.bidbar[hidden] {
  display: none;
}

/* The offer: a slider whose track is your remaining cap space. */
.offer {
  display: grid;
  gap: 0.7rem;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--hair-strong);
  border-radius: 0.7rem;
  background: var(--card);
}

.offer-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
}

.offer-head span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.offer-head strong {
  flex: none;
  font-size: 1.6rem;
  font-weight: 900;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.offer-track {
  position: relative;
  padding-top: 1.1rem;
}

.offer-track input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--team);
}

/* Where his market value sits along your cap: over it or under it. */
.offer-mark {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.offer-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 0.55rem;
  background: var(--hair-strong);
}

.offer-mark[hidden] {
  display: none;
}

.market-price {
  flex: none;
  display: grid;
  justify-items: end;
  text-align: right;
}

.market-price b {
  font-size: 0.95rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.market-price small,
.market-price em {
  color: var(--muted);
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.market-row.is-picked .market-price b,
.market-row.is-picked .market-price small {
  color: inherit;
}

/* ------------------------------------------------------- how it was won

   This replaces a four-GM x five-slot table. That table could not fit a phone,
   so it grew a horizontal scrollbar and clipped the last column -- which is
   exactly where the lineup with empty slots tended to sit. The most interesting
   thing on the screen was the part you had to scroll to find.

   Now the standings carry the summary and a single head-to-head against the GM
   next to you carries the detail. Nothing scrolls sideways at any width.

   Class names are `h2h-*` throughout. Note the deliberate absence of a bare
   `.slot` -- that name collided with the roster row once already. */

.lineup-strip {
  display: flex;
  flex: none;
  gap: 2px;
}

.lineup-strip i {
  width: 6px;
  height: 15px;
  border-radius: 1px;
  background: var(--sunken);
}

/* Two states only. A third would be noise at 6px wide, and the holes are the
   whole story anyway. */
.lineup-strip i.is-filled {
  background: var(--muted);
}

.lineup-strip i.is-empty {
  background: var(--warn);
  opacity: 0.7;
}

.h2h {
  display: grid;
  margin-top: 0.5rem;
  border: 1px solid var(--hair);
  border-radius: 0.6rem;
  overflow: hidden;
}

.h2h-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.6rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--hair);
  background: var(--card);
  font-size: 0.85rem;
}

.h2h-row:last-child {
  border-bottom: 0;
}

.h2h-mine {
  min-width: 0;
  text-align: right;
}

.h2h-theirs {
  min-width: 0;
}

.h2h-pos {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  text-align: center;
}

.h2h-nm {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.h2h-ct {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.h2h-row.is-win .h2h-mine .h2h-nm {
  color: var(--ok);
}

.h2h-row.is-lose .h2h-mine .h2h-nm {
  color: var(--warn);
}

.h2h-nm.is-empty {
  color: var(--warn);
  font-weight: 500;
}

/* ---------------------------------------------------------------- market */

.market {
  display: grid;
  gap: 1px;
  border: 1px solid var(--hair);
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--hair);
}

.market-row {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border: 0;
  background: var(--card);
  text-align: left;
  cursor: pointer;
}

.market-row:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--ink);
  outline-offset: -3px;
}

.market-row:hover:not(:disabled) {
  background: var(--sunken);
}

.market-row:disabled {
  cursor: default;
  opacity: 0.4;
}

.market-who {
  display: grid;
  min-width: 0;
}

.market-who b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.98rem;
}

.market-who small {
  color: var(--muted);
  font-size: 0.8rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.market-slots {
  flex: none;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* The one you're about to bid on. */
.market-row.is-picked {
  background: var(--team);
  color: var(--on-team);
}

.market-row.is-picked .market-who small,
.market-row.is-picked .market-slots {
  color: inherit;
  opacity: 0.85;
}

/* ---------------------------------------------------------------- reveal */

.auction-outcome {
  padding: 1rem 1.05rem;
  border: 1px solid var(--hair-strong);
  border-left-width: 0.4rem;
  border-radius: 0.7rem;
  background: var(--card);
}

.auction-outcome.is-outbid {
  border-color: var(--warn);
}

.auction-outcome.is-won {
  border-left-color: var(--ok);
}

.auction-outcome.is-fallback {
  border-left-color: var(--ball);
}

.outcome-label {
  color: var(--muted);
  font-size: clamp(1.6rem, 7vw, 2.25rem);
  font-weight: 950;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.is-outbid .outcome-label {
  color: var(--warn);
}

.is-won .outcome-label {
  color: var(--ok);
}

.is-fallback .outcome-label {
  color: var(--ball);
}

.outcome-title {
  margin-top: 0.55rem;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  font-weight: 850;
  overflow-wrap: anywhere;
}

.outcome-detail {
  margin-top: 0.35rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.outcome-stats {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--hair);
}

.fallback-options {
  padding: 0.9rem;
  border: 1px solid var(--hair);
  border-radius: 0.7rem;
  background: var(--card);
}

.fallback-options .fine {
  margin-top: 0.3rem;
  margin-bottom: 0.7rem;
}

.fallback-options .option em {
  color: var(--ink);
}

.fallback-empty {
  padding: 0.8rem 0.9rem;
  border-left: 0.25rem solid var(--hair-strong);
  background: var(--card);
}

.reveal-details {
  margin-top: 0.35rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hair);
}

.reveal-details .bidlist,
.reveal-details .roster {
  margin-top: 0.5rem;
}

.reveal-claims-title {
  margin-top: 1rem;
}

.bidlist {
  display: grid;
  gap: 1px;
  border: 1px solid var(--hair);
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--hair);
}

.bidline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.55rem 0.8rem;
  background: var(--card);
  font-size: 0.9rem;
}

.bidline span {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bidline em {
  font-style: normal;
  font-weight: 800;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.bidline.is-won em {
  color: var(--ok);
}

.bidline.is-you {
  background: var(--sunken);
}

.bidline.is-you b::after {
  content: " · you";
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.slotpick,
.scraps {
  margin-top: 0.4rem;
}

.slotpick-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.slotpick-row .btn {
  flex: 1;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.roster-row.is-you {
  background: var(--sunken);
}

.btn-bid {
  padding: 0.95rem 1rem;
  font-size: 1.1rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.wallet {
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.87rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- rivals */

.rivals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  color: var(--muted);
  font-size: 0.87rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.rivals-panel {
  display: grid;
  gap: 0.45rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hair);
}

.side-kicker {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rival b {
  color: var(--ink);
  font-weight: 700;
}

.rival.is-leader b {
  color: var(--team);
}

.rival.is-out {
  opacity: 0.45;
}

.mine summary {
  color: var(--muted);
  font-size: 0.87rem;
  font-weight: 700;
  cursor: pointer;
}

.roster {
  display: grid;
  gap: 1px;
  margin-top: 0.7rem;
  border: 1px solid var(--hair);
  border-radius: 0.55rem;
  overflow: hidden;
  background: var(--hair);
}

.roster-row {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.55rem 0.75rem;
  background: var(--card);
  font-size: 0.92rem;
}

.roster-row .pos {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.roster-row .who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-row .cost {
  color: var(--muted);
  font-size: 0.84rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.roster-row.is-open .who {
  color: var(--muted);
}

/* ---------------------------------------------------------------- result */

.screen-result {
  padding-top: clamp(0.5rem, 5vh, 3rem);
}

.result-kicker {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
}

/* The one figure that is NOT cap-sheet mono. At this size the record is the
   scoreboard, so it takes the display face at 900 and tight tracking -- a
   monospace has no such weight and its fixed advance fights -0.05em. */
.record {
  margin: 0.4rem 0 0;
  font-size: clamp(4rem, 22vw, 7.5rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.05em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* The one band on a screen that has no team of its own. Gold is a win and
   nothing else -- the moment it decorates, it stops meaning anything. */
.result-band {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--hair);
  border-radius: 0.6rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

.result-band.is-win {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--on-gold);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.24rem 0.6rem;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.pill.is-first {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--on-gold);
}

.placing {
  margin-top: 0.7rem;
  text-align: center;
}

.result-note {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.standings {
  display: grid;
  gap: 1px;
  margin-top: 0.5rem;
  border: 1px solid var(--hair);
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--hair);
}

.standing {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.6rem 0.8rem;
  background: var(--card);
  font-size: 0.92rem;
}

.standing .rank {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.standing.is-first .rank {
  color: var(--gold);
  font-weight: 700;
}

.standing .who {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  min-width: 0;
}

.standing .who b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

/* "you" reads as a tag, not as another name in the column. */
.standing .is-you {
  flex: none;
  padding: 0.08rem 0.34rem;
  border-radius: 3px;
  background: var(--ball);
  color: var(--on-ball);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.standing .figures {
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.standing .rec {
  font-family: var(--mono);
  font-size: 0.85rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.standing .spent {
  min-width: 3.6rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.76rem;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

/* The leaderboard on the landing screen. */
.board {
  display: grid;
  gap: 1px;
  margin-top: 0.5rem;
  border: 1px solid var(--hair);
  border-radius: 0.6rem;
  overflow: hidden;
  background: var(--hair);
}

.board:empty {
  display: none;
}

.board-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.55rem 0.8rem;
  background: var(--card);
  font-size: 0.9rem;
}

.board-row .rank,
.board-row .pts {
  color: var(--muted);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.board-row .who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-head {
  padding: 0.5rem 0.8rem;
  background: var(--sunken);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  max-width: calc(100vw - 2rem);
  padding: 0.6rem 0.95rem;
  border-radius: 0.5rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.toast.is-up {
  opacity: 1;
}

.toast.is-bad {
  background: var(--warn);
}

/* ----------------------------------------------------------- compact draft */

#screenDraft[data-stage="market"] {
  gap: 0.8rem;
  padding-bottom: 10rem;
}

#screenDraft[data-stage="market"] .band {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  grid-template-areas:
    "kicker record"
    "result result";
  gap: 0.15rem 0.75rem;
  align-items: center;
  padding: 0.65rem 0.85rem 0.75rem;
}

#screenDraft[data-stage="market"] .band-kicker {
  grid-area: kicker;
}

#screenDraft[data-stage="market"] .band-sub {
  grid-area: record;
  justify-self: end;
  margin-top: 0;
}

#screenDraft[data-stage="market"] .spin-result {
  grid-area: result;
  margin-top: 0;
}

#screenDraft[data-stage="market"] .spin-result span {
  font-size: 0.92rem;
}

#screenDraft[data-stage="market"] .spin-result strong {
  font-size: 1.65rem;
}

#screenDraft[data-stage="market"] .ask {
  font-size: 0.98rem;
}

/* On a phone, the offer stays attached to the viewport while the roster moves
   behind it. The bottom padding above guarantees the last player is not hidden. */
#screenDraft[data-stage="market"] .bidbar {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: 0.55rem;
  width: min(calc(100vw - 1rem), var(--col));
  transform: translateX(-50%);
}

#screenDraft[data-stage="market"] .offer {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head button"
    "track track"
    "wallet wallet";
  gap: 0.4rem 0.65rem;
  padding: 0.65rem 0.7rem;
  border-color: var(--ink);
}

#screenDraft[data-stage="market"] .offer-head {
  grid-area: head;
}

#screenDraft[data-stage="market"] .offer-track {
  grid-area: track;
  padding-top: 0.75rem;
}

#screenDraft[data-stage="market"] .wallet {
  grid-area: wallet;
  margin-top: 0;
  font-size: 0.76rem;
}

#screenDraft[data-stage="market"] .btn-bid {
  grid-area: button;
  align-self: stretch;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
}

#screenDraft:not([hidden])[data-stage="market"] ~ .toast {
  bottom: 9.5rem;
}

/* ---------------------------------------------------------------- desktop */

@media (min-width: 45rem) {
  :root {
    --gap: 1.5rem;
  }

  .page {
    padding-bottom: 5rem;
  }

  .band {
    padding: 1.5rem 1.6rem 1.6rem;
  }

  .options {
    grid-template-columns: 1fr 1fr;
  }

  .home-actions {
    grid-template-columns: 1fr 1fr;
    max-width: 31rem;
  }

  .home-active {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .home-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-cards article + article {
    border-left: 1px solid var(--hair);
  }
}

@media (min-width: 60rem) {
  .home-hero {
    grid-template-columns: minmax(0, 1.5fr) minmax(17rem, 0.72fr);
    gap: clamp(2.5rem, 7vw, 6rem);
    align-items: end;
  }

  .home-round {
    margin-bottom: 0.35rem;
  }

  .home-lower {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr);
    gap: clamp(2.5rem, 8vw, 6rem);
  }

  .home-board-wrap .board {
    margin-top: 0;
  }

  #screenDraft[data-stage="market"] {
    padding-bottom: 0;
  }

  .draft-layout {
    grid-template-columns: minmax(0, 1fr) 21rem;
    align-items: start;
  }

  .draft-sidebar {
    position: sticky;
    top: 1rem;
  }

  #screenDraft[data-stage="market"] .bidbar {
    position: static;
    width: auto;
    transform: none;
  }

  #screenDraft[data-stage="market"] .offer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "track"
      "wallet"
      "button";
    gap: 0.7rem;
    padding: 0.9rem 1rem 1rem;
    border-color: var(--hair-strong);
  }

  #screenDraft[data-stage="market"] .wallet {
    font-size: 0.82rem;
  }

  #screenDraft[data-stage="market"] .btn-bid {
    padding: 0.85rem 1rem;
    font-size: 1.05rem;
  }

  #screenDraft[data-stage="market"] .market {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    border: 0;
    overflow: visible;
    background: transparent;
  }

  #screenDraft[data-stage="market"] .market-row {
    min-height: 3.7rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--hair);
    border-radius: 0.5rem;
  }

  .mine,
  .rivals-panel {
    padding: 0.85rem;
    border: 1px solid var(--hair);
    border-radius: 0.6rem;
    background: var(--card);
  }

  .rivals-panel {
    padding-top: 0.85rem;
  }

  .mine .roster {
    margin-top: 0.6rem;
  }

  #screenDraft:not([hidden])[data-stage="market"] ~ .toast {
    bottom: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}