/* ===== Mock Draft page styles (uses the colors defined in style.css) ===== */

[hidden] { display: none !important; }

/* ----- Header & buttons ----- */
.draft-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.draft-header .page-title { margin: 0; }
.page-title span {
  margin-left: .4rem;
  font-size: .6em;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

.draft-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
@media (max-width: 600px) {
  .draft-controls .btn { padding: .45rem .8rem; font-size: .85rem; }
}

.btn {
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .6rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .5; cursor: default; }

.btn-primary {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.btn-primary:hover { background: var(--red-dark); }

.btn-small {
  padding: .35rem .8rem;
  font-size: .8rem;
}

.status {
  margin: 0 0 1rem;
  font-weight: 600;
}
.status:empty { display: none; }
.status.error { color: var(--red); }

/* ----- Layout ----- */
.draft-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* keeps wide content from stretching the page on phones */
  gap: 1.5rem;
}

/* On phones the player pane sits above the board while drafting */
.player-pane { order: -1; }

@media (min-width: 900px) {
  .draft-layout.drafting {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .player-pane {
    order: 0;
    position: sticky;
    top: calc(var(--nav-height) + 1rem);
  }
  .draft-layout.drafting .board {
    max-height: calc(100vh - var(--nav-height) - 9rem);
    overflow-y: auto;
    padding-right: .25rem;
  }
}

/* ----- Draft board ----- */
.pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  align-items: start;   /* an expanded card doesn't stretch its neighbors */
  gap: .5rem;
}

/* Before/after the draft, show picks in a multi-column grid on wide screens */
.draft-layout:not(.drafting) .pick-list {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.pick-row {
  display: grid;
  grid-template-columns: 2.25rem 44px 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--team, var(--line));   /* team color */
  border-radius: 10px;
  background: var(--surface);
}
.pick-row.current {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
  background: var(--red-soft);
}

.pick-num {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

.team-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.team-logo.large {
  width: 56px;
  height: 56px;
}

/* Shown if a logo file can't be found */
.logo-fallback {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--team, var(--black));
  color: var(--team-ink, var(--white));
  box-shadow: inset 0 0 0 2px var(--team-2, transparent);
  font-size: .8rem;
  font-weight: 700;
}

.pick-info { min-width: 0; }
.team-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
}
.team-name { font-weight: 700; }
.via {
  font-size: .8rem;
  font-weight: 400;
  color: var(--muted);
}

/* Before the draft starts there's no expand arrow, so drop its column */
.pick-row.no-expand { grid-template-columns: 2.25rem 44px 1fr; }

/* ----- Head coach & general manager ----- */
.staff {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem 1rem;
  margin-top: .2rem;
  font-size: .85rem;
  color: var(--muted);
}
.staff-label {
  margin-right: .3rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--red);
}
.staff-name {
  font-weight: 600;
  color: var(--text);
}
.pick-details .staff {
  grid-column: 1 / -1;
  margin-top: 0;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}

/* ----- Team needs tags ----- */
.needs {
  display: inline-flex;
  flex-wrap: nowrap;   /* one line: extra needs fold into "+N" */
  gap: .25rem;
}
.need-tag.more { border-style: dashed; cursor: help; }
.need-tag {
  padding: .05rem .4rem;
  border: 1px solid var(--red);
  border-radius: 4px;
  background: var(--card);
  color: var(--red);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.4;
}
.need-tag.filled {
  border-color: var(--line-strong);
  background: var(--surface-2);
  color: var(--subtle);
  text-decoration: line-through;
}
.on-clock .needs { margin-top: .3rem; }

/* ----- Expand arrow ----- */
.expand-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  cursor: pointer;
}
.expand-btn:hover { border-color: var(--red); }
.chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s;
}
.pick-row.open .chevron { transform: translateY(2px) rotate(-135deg); }

/* ----- Offseason details panel ----- */
.pick-details {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: .25rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}
.fa-col h3 {
  margin: 0 0 .4rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.fa-col .count {
  display: inline-block;
  min-width: 1.4rem;
  margin-left: .25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-size: .7rem;
  text-align: center;
}
.fa-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fa-row {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  column-gap: .5rem;
  align-items: center;
  padding: .3rem 0;
  border-bottom: 1px solid var(--line);
}
.fa-row .pos-tag {
  grid-row: span 2;
  margin: 0;
  text-align: center;
}
.fa-name {
  font-size: .9rem;
  font-weight: 600;
}
.fa-meta {
  font-size: .78rem;
  color: var(--muted);
}
.fa-type { font-weight: 700; }
.show-all {
  margin-top: .4rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--red);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.show-all:hover { text-decoration: underline; }
.fa-empty {
  margin: 0;
  font-size: .85rem;
  color: var(--muted);
}

.selection {
  font-size: .9rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.selection:empty { display: none; }
.selection strong { color: var(--text); }
.selection em { color: var(--red); font-style: normal; font-weight: 600; }

.pos-tag {
  display: inline-block;
  margin-right: .35rem;
  padding: .1rem .4rem;
  border-radius: 4px;
  background: var(--black);
  color: var(--white);
  font-size: .7rem;
  font-weight: 700;
  vertical-align: middle;
}

/* ----- Player pane ----- */
.player-pane {
  padding: 1rem;
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: 10px;
  background: var(--surface);
  scroll-margin-top: calc(var(--nav-height) + 1rem);
}

.on-clock {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}
.on-clock .label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--red);
}
.on-clock .team {
  font-size: 1.2rem;
  font-weight: 700;
}
.on-clock-info {
  flex: 1;
  min-width: 0;
}

/* ----- Draft clock ----- */
.draft-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  flex-shrink: 0;
  padding: .45rem .7rem;
  border-radius: 10px;
  background: var(--black);
  color: var(--white);
}
.clock-time {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* Last 30 seconds: the clock turns red */
.draft-clock.warning { background: var(--red); }
.draft-clock.paused .clock-time { opacity: .5; }
.clock-btn {
  padding: .15rem .55rem;
  border-color: var(--white);
  background: transparent;
  color: var(--white);
  font-size: .68rem;
}
.clock-btn:hover { background: rgba(255, 255, 255, .15); }

/* ----- Round headings in the draft board ----- */
.round-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .75rem;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--red);
}
.round-heading:first-child { margin-top: 0; }
.round-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Marks a pick made automatically when the clock ran out */
.auto-tag {
  display: inline-block;
  margin-left: .25rem;
  padding: 0 .35rem;
  border: 1px solid var(--red);
  border-radius: 4px;
  color: var(--red);
  font-size: .65rem;
  font-weight: 700;
  vertical-align: middle;
}

/* ----- Setup prompt (rounds + clock) ----- */
.setup-dialog {
  width: min(92vw, 420px);
  padding: 0;
  border: none;
  border-top: 4px solid var(--red);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
  color: var(--text);
  font-family: inherit;
}
.setup-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.setup-dialog form { padding: 1.5rem; }
.setup-dialog h2 {
  margin: 0 0 1.25rem;
  font-size: 1.35rem;
}

.setup-field {
  display: block;
  margin: 0 0 1.25rem;
  padding: 0;
  border: none;
}
.setup-label {
  display: block;
  margin-bottom: .4rem;
  padding: 0;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--red);
}
.setup-field select {
  width: 100%;
  padding: .6rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  font: inherit;
  font-weight: 600;
}
.setup-hint {
  margin: 0 0 .6rem;
  font-size: .85rem;
  color: var(--muted);
}
.setup-options {
  display: grid;
  gap: .4rem;
}
.setup-option {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.setup-option:has(input:checked) {
  border-color: var(--red);
  background: var(--red-soft);
}
.setup-option input { accent-color: var(--red); }

.setup-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}

.filters {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  margin-bottom: .5rem;
}
.filter-btn {
  flex-shrink: 0;
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  padding: .35rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  cursor: pointer;
}
.filter-btn.active {
  background: var(--black);
  border-color: var(--ink);
  color: var(--white);
}

#playerSearch {
  width: 100%;
  font: inherit;
  padding: .6rem .8rem;
  margin-bottom: .75rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.player-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 55vh;
  overflow-y: auto;
}
@media (min-width: 900px) {
  .player-list { max-height: calc(100vh - var(--nav-height) - 20rem); }
}

.player-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  align-items: center;
  gap: .6rem;
  padding: .55rem .25rem;
  border-bottom: 1px solid var(--line);
}
.player-rank {
  font-weight: 700;
  color: var(--subtle);
  text-align: center;
}
.player-name { font-weight: 700; }
.player-meta {
  font-size: .85rem;
  color: var(--muted);
}

.empty {
  padding: 1rem;
  text-align: center;
  color: var(--muted);
}

/* ----- Setup prompt: team picker ----- */
.setup-dialog { width: min(94vw, 640px); max-height: 92vh; }
.setup-dialog form { max-height: 92vh; overflow-y: auto; }

.team-pick-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: .5rem;
}
.link-btn {
  padding: 0;
  border: none;
  background: none;
  color: var(--red);
  font: inherit;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }
.team-count {
  margin-left: auto;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .35rem;
  max-height: 260px;
  overflow-y: auto;
  padding: .2rem;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.team-check {
  display: grid;
  grid-template-columns: auto 28px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: .45rem;
  padding: .35rem .5rem;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.team-check:hover { background: var(--surface); }
.team-check:has(input:checked) {
  border-color: var(--red);
  background: var(--red-soft);
}
.team-check input {
  grid-row: span 2;
  accent-color: var(--red);
}
.team-check .team-logo.small,
.team-check .logo-fallback {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  font-size: .55rem;
}
.team-check-name {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
}
.team-check-picks {
  font-size: .7rem;
  color: var(--subtle);
}
.team-check.disabled {
  opacity: .45;
  cursor: not-allowed;
}

.setup-error {
  margin: 0 0 .75rem;
  color: var(--red);
  font-size: .85rem;
  font-weight: 700;
}
.setup-error:empty { display: none; }

/* ----- The user's teams on the board ----- */
.pick-row.mine { box-shadow: inset 0 0 0 1px var(--red-line); }
.you-tag {
  padding: 0 .4rem;
  border-radius: 4px;
  background: var(--red);
  color: var(--white);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ----- Computer's turn: drafting graphic instead of the player list ----- */
.player-pane.cpu-turn .filters,
.player-pane.cpu-turn #playerSearch { display: none; }

.cpu-drafting {
  display: grid;
  justify-items: center;
  gap: .75rem;
  padding: 1.5rem 1rem;
  text-align: center;
}
.drafting-img {
  display: block;
  width: min(100%, 320px);
  max-height: 240px;
  object-fit: contain;
  border-radius: 10px;
}
.cpu-text {
  margin: 0;
  font-weight: 700;
}
/* Shown if images/drafting.jpg can't be found */
.drafting-fallback {
  padding: 1rem 1.5rem;
  border-radius: 10px;
  background: var(--black);
  color: var(--white);
  font-size: 1.1rem;
  font-weight: 700;
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
  50% { opacity: .55; }
}

/* ----- "Needs:" label before the team needs tags ----- */
.needs-label {
  align-self: center;
  margin-right: .1rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ----- Setup prompt: single clock checkbox, more room for teams ----- */
.team-grid { max-height: min(46vh, 380px); }
.clock-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 0 1.25rem;
  font-weight: 700;
  cursor: pointer;
}
.clock-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
}
.setup-hint-inline {
  font-weight: 400;
  font-size: .85rem;
  color: var(--muted);
}

/* ----- Computer's turn: pause / skip buttons, paused look ----- */
.cpu-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.cpu-drafting.paused .drafting-img,
.cpu-drafting.paused .drafting-fallback {
  opacity: .4;
  filter: grayscale(1);
  animation: none;
}

/* ----- Trade pop-up ----- */
.trade-dialog { width: min(96vw, 820px); }

.trade-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
  margin: 1rem 0 .75rem;
}
.trade-side-box {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}
.trade-role {
  display: block;
  margin-bottom: .3rem;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.trade-role span { color: var(--subtle); font-weight: 600; text-transform: none; letter-spacing: 0; }
.trade-team-select {
  width: 100%;
  margin-bottom: .5rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  font: inherit;
  font-weight: 600;
}
.trade-arrows {
  align-self: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--red);
}

.trade-picks {
  display: grid;
  gap: .25rem;
  max-height: min(36vh, 320px);
  overflow-y: auto;
  padding: .3rem;
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
}
.trade-year {
  position: sticky;
  top: -.3rem;
  z-index: 1;
  margin: .1rem -.3rem 0;
  padding: .35rem .6rem;
  background: var(--surface-2);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.trade-year span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--subtle); }
.trade-pick {
  display: grid;
  grid-template-columns: auto 1fr auto;
  column-gap: .5rem;
  align-items: center;
  padding: .35rem .55rem;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.trade-pick:hover { background: var(--surface); }
.trade-pick:has(input:checked) {
  border-color: var(--red);
  background: var(--red-soft);
}
.trade-pick input {
  grid-row: span 2;
  width: 17px;
  height: 17px;
  accent-color: var(--red);
}
.trade-pick-label { font-weight: 700; }
.trade-pick-pts {
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.trade-pick-note {
  grid-column: 2 / 4;
  font-size: .72rem;
  color: var(--subtle);
}
.trade-pick-note b { color: var(--red); }
.trade-total {
  display: flex;
  justify-content: space-between;
  padding: .45rem .7rem;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--surface);
  font-size: .85rem;
}
.trade-total { gap: .75rem; }
.trade-total span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-total b { flex: none; font-variant-numeric: tabular-nums; }

/* Chance Team B says yes */
.trade-verdict {
  margin: 0 0 .5rem;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-left: 5px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  font-size: .88rem;
}
.trade-verdict.empty p { margin: 0; color: var(--muted); }
.trade-verdict.good { border-left-color: var(--green); }
.trade-verdict.mid { border-left-color: #d58a00; }
.trade-verdict.bad { border-left-color: var(--red); }
.trade-verdict-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .4rem;
  font-size: 1rem;
}
.trade-verdict-top span { font-weight: 700; font-variant-numeric: tabular-nums; }
.trade-meter {
  position: relative;
  height: 10px;
  margin-bottom: .55rem;
  border-radius: 5px;
  background: var(--surface-2);
  overflow: hidden;
}
.trade-meter i {
  display: block;
  height: 100%;
  border-radius: 5px;
  background: #bbb;
  transition: width .25s ease;
}
.trade-verdict.good .trade-meter i { background: var(--green); }
.trade-verdict.mid .trade-meter i { background: #d58a00; }
.trade-verdict.bad .trade-meter i { background: var(--red); }
.trade-meter em {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(0, 0, 0, .35);
}
.trade-verdict ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .2rem; color: var(--ink); }
.trade-tip { margin: .5rem 0 0; font-weight: 600; }
.trade-verdict.shake { animation: trade-shake .4s; }
@keyframes trade-shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
#tradeSubmit:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 600px) {
  .trade-sides { grid-template-columns: minmax(0, 1fr); }
  .trade-arrows { justify-self: center; transform: rotate(90deg); }
  .trade-picks { max-height: 30vh; }
}

/* ----- Save pop-up ----- */
.save-dialog { width: min(94vw, 520px); }
.save-body { padding: 1.5rem; max-height: 92vh; overflow-y: auto; }
.save-body form { padding: 0; }
.save-name {
  width: 100%;
  margin-bottom: .4rem;
  padding: .6rem .8rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
}
.save-name:disabled { background: var(--surface-2); color: var(--subtle); }
.save-slots { margin-bottom: 1rem; }
.save-full {
  margin-bottom: 1rem;
  padding: .85rem;
  border: 1px solid var(--red-line);
  border-radius: 8px;
  background: var(--red-soft);
}
.save-full p { margin: 0 0 .6rem; font-size: .9rem; }
.save-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.save-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem .65rem;
  border-radius: 6px;
  background: var(--card);
}
.save-list-name { font-weight: 700; overflow-wrap: anywhere; }
.save-list-meta { font-size: .78rem; color: var(--muted); }
.btn-danger { border-color: var(--red); color: var(--red); background: var(--card); }
.btn-danger:hover { background: var(--red-soft); }
a.btn { display: inline-flex; align-items: center; text-decoration: none; }
.save-body .setup-actions { flex-wrap: wrap; }

/* Prospect names open the Player Data page in a new tab */
.player-link { color: inherit; text-decoration: none; }
.player-link:hover { color: var(--red); text-decoration: underline; }

/* ----- Setup: advanced settings ----- */
.advanced {
  margin: 0 0 1.25rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.advanced summary {
  padding: .7rem .9rem;
  font-weight: 700;
  cursor: pointer;
}
.advanced[open] summary { border-bottom: 1px solid var(--line); }
.advanced > .setup-hint { margin: .75rem .9rem 0; }
.adv-row {
  display: grid;
  gap: .3rem;
  margin: 0;
  padding: .75rem .9rem 0;
  border: none;
}
.adv-row small { color: var(--muted); font-size: .78rem; }
.adv-row .setup-label { display: flex; justify-content: space-between; gap: .5rem; }
.adv-row output { font-weight: 600; color: var(--muted); font-size: .85rem; }
.adv-row select, .dnd-pick select, .dnd-pick input {
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  font: inherit;
}
.adv-row input[type="range"] { width: 100%; accent-color: var(--red); }
.dnd { padding-bottom: .9rem; }
.dnd legend { padding: .75rem 0 .3rem; }
.dnd-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: .5rem; margin-top: .3rem; }
.dnd-results, .dnd-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .25rem; }
.dnd-results button {
  width: 100%;
  padding: .4rem .6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.dnd-results button:hover { border-color: var(--red); background: var(--red-soft); }
.dnd-results small, .dnd-list small { color: var(--subtle); }
.dnd-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  border-radius: 6px;
  background: var(--red-soft);
  font-size: .88rem;
}
.dnd-list li.dnd-empty, .dnd-results li.dnd-empty { background: none; padding: .2rem 0; color: var(--subtle); font-size: .85rem; }
@media (max-width: 600px) { .dnd-pick { grid-template-columns: minmax(0, 1fr); } }

/* Trades turned off for this mock */
#tradeBtn:disabled { opacity: .45; cursor: not-allowed; }

/* Why the computer made a pick (pick details) */
.pick-why {
  margin: 0 0 .6rem;
  padding: .5rem .7rem;
  border-left: 3px solid var(--red);
  background: var(--surface);
  font-size: .85rem;
}
.pick-why span {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--subtle);
}

/* ----- Computer's turn: the war room card ----- */
.war-room { gap: .9rem; padding: .5rem .25rem 1rem; }
.wr-clock {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.wr-clock i {
  display: block;
  height: 100%;
  background: var(--team, var(--red));
  transform-origin: left;
  animation: wr-clock linear forwards;
}
.war-room.paused .wr-clock i { animation: none; transform: scaleX(.3); opacity: .5; }
@keyframes wr-clock { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.pick-is-in {
  width: 100%;
  display: grid;
  gap: .2rem;
  padding: .85rem 1rem;
  border-radius: 10px;
  border-left: 6px solid var(--team-2, var(--red));
  background: var(--team, var(--black));
  color: var(--team-ink, var(--white));
  text-align: left;
  animation: pick-in .45s ease-out;
}
.pii-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.pick-is-in strong { font-family: var(--display); font-stretch: 72%; font-style: italic; font-size: 1.45rem; line-height: 1.05; text-transform: uppercase; }
.pii-meta { display: flex; align-items: center; gap: .4rem; font-size: .85rem; opacity: .9; }
.pick-is-in em { font-style: normal; font-size: .82rem; opacity: .85; }
@keyframes pick-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.recent-picks { list-style: none; width: 100%; margin: 0; padding: 0; display: grid; gap: .25rem; text-align: left; }
.recent-picks li {
  display: grid;
  grid-template-columns: 2rem 2.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
  padding: .3rem .5rem;
  border-radius: 6px;
  background: var(--card);
  font-size: .85rem;
}
.rp-num { font-weight: 700; color: var(--subtle); text-align: right; }
.rp-team {
  padding: .05rem .3rem;
  border-radius: 4px;
  background: var(--team);
  color: var(--team-ink);
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
}
.rp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }

/* The pick that just came in flashes on the board */
.pick-row.fresh { animation: fresh 1.2s ease-out; }
@keyframes fresh { 0% { background: var(--red-soft); box-shadow: inset 0 0 0 2px var(--team, var(--red)); } 100% { background: var(--surface); } }
@media (prefers-reduced-motion: reduce) {
  .pick-row.fresh, .pick-is-in, .wr-clock i { animation: none; }
}

/* Phones: keep "on the clock" pinned and the computer's card compact, so the board stays in view */
@media (max-width: 900px) {
  .draft-layout.drafting .on-clock {
    position: sticky;
    top: var(--nav-height);
    z-index: 5;
    margin: -1rem -1rem 1rem;
    padding: .6rem 1rem;
    background: var(--card);
    border-bottom: 1px solid var(--line);
  }
  .player-pane.cpu-turn .recent-picks,
  .player-pane.cpu-turn .cpu-text { display: none; }
  .player-pane.cpu-turn .war-room { padding: 0; gap: .6rem; }
  .player-pane.cpu-turn .pick-is-in strong { font-size: 1.15rem; }
}

/* ----- Report card ----- */
.report-dialog { width: min(96vw, 820px); }
.report-body { position: relative; padding: 1.5rem; max-height: 92vh; overflow-y: auto; }
.rc-title { margin: 0 0 .4rem; font-family: var(--display); font-stretch: 72%; font-style: italic; font-size: 2.2rem; text-transform: uppercase; }
.rc-mine { display: grid; gap: 1rem; margin: 1rem 0 1.25rem; }
.rc-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.rc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .9rem 1.1rem;
  background: linear-gradient(120deg, var(--team), color-mix(in srgb, var(--team) 55%, #000));
  border-bottom: 5px solid var(--team-2);
  color: var(--team-ink);
}
.rc-kicker { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.rc-head strong { font-family: var(--display); font-stretch: 72%; font-style: italic; font-size: 1.8rem; text-transform: uppercase; line-height: 1; }
.rc-grade { font-family: var(--display); font-stretch: 72%; font-style: italic; font-weight: 800; font-size: 3.4rem; line-height: 1; }
.rc-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; padding: .7rem 1.1rem; font-size: .88rem; color: var(--muted); border-bottom: 1px solid var(--line); }
.rc-stats b { color: var(--ink); }
.rc-picks { list-style: none; margin: 0; padding: .4rem .7rem; display: grid; gap: .25rem; }
.rc-picks li { display: grid; grid-template-columns: 5.2rem auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .35rem .4rem; border-radius: 6px; }
.rc-picks li:nth-child(odd) { background: var(--surface); }
.rc-pick { font-size: .8rem; font-weight: 700; color: var(--subtle); }
.rc-name { font-weight: 700; min-width: 0; }
.rc-name small { display: block; font-weight: 400; color: var(--subtle); font-size: .76rem; }
.rc-tag { padding: .1rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.rc-tag.steal { background: var(--green); color: #fff; }
.rc-tag.value { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
.rc-tag.fair { background: var(--surface-2); color: var(--muted); }
.rc-tag.reach { background: color-mix(in srgb, #d58a00 22%, transparent); color: #b06f00; }
.rc-tag.big-reach { background: var(--red); color: #fff; }
.rc-notes { margin: .2rem 1.1rem .7rem; font-size: .84rem; color: var(--muted); }
.rc-card .btn-small { margin: 0 1.1rem 1rem; }
.rc-sub { margin: 0 0 .5rem; font-size: 1rem; }
.rc-all { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .35rem; }
.rc-all li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .45rem; padding: .35rem .5rem; border: 1px solid var(--line); border-left: 4px solid var(--team); border-radius: 8px; background: var(--card); font-size: .85rem; }
.rc-all li.mine { box-shadow: inset 0 0 0 1px var(--red); }
.rc-chip { padding: .05rem .3rem; border-radius: 4px; background: var(--team); color: var(--team-ink); font-size: .68rem; font-weight: 700; }
.rc-all-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-all-val { color: var(--subtle); font-size: .78rem; }
.rc-all-grade { font-family: var(--display); font-stretch: 72%; font-style: italic; font-size: 1.2rem; min-width: 2ch; text-align: right; }
@media (max-width: 600px) {
  .rc-picks li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .rc-picks .rc-pick { grid-column: 1 / -1; }
}

.team-page-link { display: inline-block; margin-bottom: .5rem; color: var(--red); font-size: .82rem; font-weight: 700; text-decoration: none; }
.team-page-link:hover { text-decoration: underline; }