/* ── BOARD TABS ─────────────────────────────────── */
.board-tabs {
  flex-shrink: 0;
  display: flex;
  gap: .4rem;
  padding: .45rem .85rem;
  border-bottom: 1px solid var(--b);
  background: var(--bg);
}

.btab {
  padding: .3rem .85rem;
  border-radius: 6px;
  border: 1px solid var(--b2);
  background: transparent;
  color: var(--t2);
  font-family: 'Inter', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .13s;
}
.btab:hover { color: var(--t1); border-color: var(--blue); }
.btab.on    { background: var(--blue); color: #0b0e16; border-color: var(--blue); }
/* Not available yet (Prediction vs reality before Swiss ends): still gets
   hover / tap so it can explain itself — see js/ui/predVsReality.js. */
.btab.locked, .btab.locked:hover { color: var(--t3); border-color: var(--b2); border-style: dashed; cursor: not-allowed; }
.btab.locked::before { content: '🔒 '; }

@media (max-width: 760px) {
  .board-tabs { flex-wrap: wrap; }
}

/* ── BOARD MODE SWITCHING ───────────────────────── */
.board.round-mode > .detail { display: none; }

/* On mobile .standings is position:fixed so hiding it breaks the roster drawer */
@media (min-width: 761px) {
  .board.round-mode > .standings { display: none; }
}

.round-sim { display: none; }
.board.round-mode .round-sim {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

/* ── SPLIT PANES ────────────────────────────────── */
.rsim-left {
  border-right: 1px solid var(--b);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.rsim-right { overflow-y: auto; }

.rsim-panel-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--b);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}

.rsim-label {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t3);
  white-space: nowrap;
}

/* ── PAIRING CARDS ──────────────────────────────── */
/*  grid: [player-left] [win-A] [draw] [win-B] [player-right]  */
.pairing-card {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  gap: .45rem;
  padding: .75rem .85rem;
  border-bottom: 1px solid var(--b);
  transition: background .1s;
}
.pairing-card:not(.locked):hover { background: rgba(56,189,248,.03); }
.pairing-card.locked { background: rgba(255,255,255,.007); }

.pairing-player {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}
.pairing-player.right {
  text-align: right;
  align-items: flex-end;
}

.pairing-handle {
  font-weight: 600;
  font-size: .82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
  transition: color .12s;
  color: var(--t1);
}
.pairing-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
  color: var(--t3);
  white-space: nowrap;
}

/* ── WIN BUTTONS (pending picks) ─────────────────── */
.win-btn {
  min-width: 54px;
  height: 36px;
  padding: 0 .6rem;
  border-radius: 6px;
  border: 1px solid var(--b2);
  background: transparent;
  color: var(--t3);
  font-family: 'Inter', sans-serif;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .13s;
  white-space: nowrap;
}
.win-btn:hover                { border-color: var(--green); color: var(--green); background: rgba(74,222,128,.06); }
.win-btn.active               { background: rgba(74,222,128,.18); color: var(--green); border-color: var(--green); }

/* DRAW button */
.draw-btn {
  min-width: 44px;
  height: 26px;
  padding: 0 .45rem;
  border-radius: 4px;
  border: 1px solid var(--b2);
  background: transparent;
  color: var(--t3);
  font-family: 'Inter', sans-serif;
  font-size: .57rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .13s;
}
.draw-btn:hover  { border-color: var(--yellow); color: var(--yellow); background: rgba(251,191,36,.06); }
.draw-btn.active { background: rgba(251,191,36,.18); color: var(--yellow); border-color: var(--yellow); }

/* player name tints when a pick is active (pending cards) */
.pairing-card:not(.locked).pick-w1 .pairing-player:not(.right) .pairing-handle { color: var(--green); }
.pairing-card:not(.locked).pick-w2 .pairing-player.right       .pairing-handle { color: var(--green); }
.pairing-card:not(.locked).pick-d  .pairing-handle                             { color: var(--yellow); }
.pairing-card:not(.locked).pick-w1 .pairing-player.right       .pairing-handle { color: var(--t3); }
.pairing-card:not(.locked).pick-w2 .pairing-player:not(.right) .pairing-handle { color: var(--t3); }

/* ── LOCKED RESULT BADGES ────────────────────────── */
.lock-badge {
  font-family: 'Inter', sans-serif;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .28rem .6rem;
  border-radius: 5px;
  text-align: center;
  white-space: nowrap;
}
.lock-badge.won  { background: rgba(74,222,128,.13);  color: var(--green);  border: 1px solid rgba(74,222,128,.25); }
.lock-badge.lost { background: transparent;            color: var(--t3);     border: 1px solid var(--b2); }
.lock-badge.draw { background: rgba(251,191,36,.13);  color: var(--yellow); border: 1px solid rgba(251,191,36,.25); }
.lock-badge.bye  { background: rgba(56,189,248,.11);  color: var(--blue);   border: 1px solid rgba(56,189,248,.25); }

.lock-center {
  font-size: .7rem;
  color: var(--t3);
  opacity: .45;
  text-align: center;
  line-height: 1;
}

/* locked card: winner name green, loser dimmed */
.pairing-card.locked.pick-w1 .pairing-player:not(.right) .pairing-handle { color: var(--green); }
.pairing-card.locked.pick-w2 .pairing-player.right       .pairing-handle { color: var(--green); }
.pairing-card.locked.pick-d  .pairing-handle                             { color: var(--yellow); }
.pairing-card.locked.pick-w1 .pairing-player.right       .pairing-handle { opacity: .4; }
.pairing-card.locked.pick-w2 .pairing-player:not(.right) .pairing-handle { opacity: .4; }

.pairing-card.bye .pairing-player.right { opacity: .2; }

/* ── PROJECTED STANDINGS TABLE ───────────────────── */
.proj-table {
  width: 100%;
  border-collapse: collapse;
}
.proj-table th {
  padding: .45rem .75rem;
  text-align: left;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t3);
  border-bottom: 1px solid var(--b);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}
.proj-table td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--b);
  vertical-align: middle;
}

.proj-row {
  border-left: 3px solid transparent;
  transition: background .1s;
}
.proj-row:hover    { background: rgba(56,189,248,.04); }
.proj-row.in-cut   { background: rgba(251,191,36,.03); }
.proj-row.promoted { border-left-color: var(--green); }
.proj-row.relegated{ border-left-color: var(--red); }

.proj-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  color: var(--t3);
  width: 28px;
}
.proj-pts {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  color: var(--t2);
  white-space: nowrap;
}
.proj-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  text-align: right;
  white-space: nowrap;
}
.proj-delta.up   { color: var(--green); }
.proj-delta.down { color: var(--red); }
.proj-delta.same { color: var(--t3); }

.proj-pcut {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  text-align: right;
  white-space: nowrap;
}
.proj-pcut-val.good { color: var(--green); }
.proj-pcut-val.mid  { color: var(--yellow); }
.proj-pcut-val.bad  { color: var(--red); }

.proj-cut-line td { padding: 0; border: none; }

/* ── OVERVIEW MODE — own tab now, not the "nobody selected"
   fallback of Analysis. #d-overview only ever shows here. ── */
.board.overview-mode #d-placeholder,
.board.overview-mode #d-content { display: none !important; }
.board.overview-mode #d-overview { display: flex !important; }

/* ── POOL MODE ───────────────────────────────────── */
.board.pool-mode #d-placeholder,
.board.pool-mode #d-content { display: none !important; }

#d-pool-content {
  display: none;
  flex-direction: column;
  flex: 1;
}
.board.pool-mode #d-pool-content { display: flex; }

.pool-header {
  flex-shrink: 0;
  padding: 1.1rem 1.5rem .9rem;
  border-bottom: 1px solid var(--b);
  background: linear-gradient(135deg, rgba(56,189,248,.07) 0%, transparent 60%);
  position: sticky;
  top: 0;
  z-index: 5;
}
[data-theme="light"] .pool-header {
  background: linear-gradient(135deg, rgba(28,95,184,.07) 0%, transparent 60%);
}

.pool-player-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--t1);
  letter-spacing: .02em;
}
.pool-player-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: .62rem;
  color: var(--t3);
  margin-top: .2rem;
}

.pool-section { border-bottom: 1px solid var(--b); }

.pool-section-title {
  padding: .65rem 1.5rem .35rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pool-section-title.blue   { color: var(--blue); }
.pool-section-title.green  { color: var(--green); }
.pool-section-title.yellow { color: var(--yellow); }

.pool-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: .55rem;
  font-weight: 700;
  padding: .1rem .35rem;
  border-radius: 3px;
  background: var(--b2);
  color: var(--t3);
  letter-spacing: .04em;
}

.pool-table { width: 100%; border-collapse: collapse; }
.pool-table th {
  padding: .3rem .75rem;
  text-align: left;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t3);
  border-bottom: 1px solid var(--b2);
}
.pool-table td {
  padding: .45rem .75rem;
  border-bottom: 1px solid var(--b);
  vertical-align: middle;
}
.pool-row { cursor: pointer; transition: background .1s; }
.pool-row:hover { background: rgba(56,189,248,.04); }

.pool-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  color: var(--t3);
  width: 28px;
}
.pool-name {
  font-size: .8rem;
  font-weight: 500;
  color: var(--t1);
  max-width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pool-rec {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  color: var(--t2);
}
.pool-pts {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  font-weight: 700;
  color: var(--green);
}
.pool-omw {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  color: var(--purple);
}
.pool-delta {
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  font-weight: 700;
}
.pool-delta.up   { color: var(--green); }
.pool-delta.down { color: var(--red); }
.pool-delta.same { color: var(--t3); }

.pool-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: var(--t3);
  padding: 3rem 2rem;
}
.pool-placeholder-icon { font-size: 3rem; opacity: .25; }
.pool-placeholder p { font-size: .8rem; letter-spacing: .06em; text-align: center; }

/* ── POOL TAB BAR ────────────────────────────────── */
.pool-tab-bar {
  flex-shrink: 0;
  display: flex;
  gap: .35rem;
  padding: .5rem .85rem;
  border-bottom: 1px solid var(--b);
  background: var(--bg);
}

.pool-tab {
  padding: .28rem .75rem;
  border-radius: 5px;
  border: 1px solid var(--b2);
  background: transparent;
  color: var(--t2);
  font-family: 'Inter', sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .13s;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.pool-tab:hover { color: var(--t1); border-color: var(--blue); }
.pool-tab.on    { background: var(--blue); color: #0b0e16; border-color: var(--blue); }

.pool-tab-live {
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--yellow);
  border: 1px solid rgba(251,191,36,.4);
  border-radius: 3px;
  padding: .05rem .3rem;
}
.pool-tab.on .pool-tab-live { color: #0b0e16; border-color: rgba(11,14,22,.3); }

/* ── MOBILE ──────────────────────────────────────── */
@media (max-width: 760px) {
  .board.round-mode .round-sim {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .rsim-left {
    border-right: none;
    border-bottom: 1px solid var(--b);
    overflow-y: visible;
  }
  .rsim-right { overflow-y: visible; }
  .pairing-handle { max-width: 100px; font-size: .75rem; }
  .win-btn { min-width: 44px; font-size: .6rem; }
}