/* Single hand-written stylesheet -- no build tooling, per the project's tech decisions. */

:root {
  --ink: #1b1f24;
  --muted: #6b7480;
  --line: #e3e6ea;
  --bg: #f7f8fa;
  --card: #ffffff;
  --accent: #1f5f3f;
  --accent-soft: #eaf3ee;

  /* Hairline for the board grid: present enough to align by, quiet enough
     that names read as floating on it rather than boxed in. */
  --hair: #edeff2;

  /* Tint behind a ticked sandbox row. Deliberately neutral: on this board,
     hue is reserved for position and nothing else. */
  --picked-row: #eef1f4;

  /* Position palette, defined once. Each position has a solid colour for
     resolved cells and a desaturated one for projections, so "fact" and
     "guess" differ by saturation rather than by hue. */
  --qb:  #d94f6e;  --qb-soft:  #7c4553;
  --rb:  #2e9e8f;  --rb-soft:  #35635d;
  --wr:  #3d7fc1;  --wr-soft:  #3c5570;
  --te:  #e08640;  --te-soft:  #7a5636;
  --k:   #9a7bc8;  --k-soft:   #56496b;
  --def: #6b7a88;  --def-soft: #464f57;

  /* The board's own dark ground, distinct from the light page around it. */
  --board-bg: #1e242b;
  --board-line: #2b333c;
  --board-cell: #232a32;
  --board-ink: #8b97a4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

main {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

/* Header ------------------------------------------------------------------ */

.site-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 0.85rem 1.25rem;
  background: var(--accent);
  color: #fff;
}

.site-header a { color: #fff; text-decoration: none; }
.site-header a:hover { text-decoration: underline; }
.brand { font-weight: 700; letter-spacing: 0.02em; }

.site-header nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.site-header nav form { margin: 0; }
.who { opacity: 0.75; font-size: 0.9rem; }

.linkish {
  background: none;
  border: 0;
  color: #fff;
  font: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* Typography -------------------------------------------------------------- */

h1 { margin: 0 0 0.25rem; font-size: 1.6rem; }
.subtle { color: var(--muted); }
.note { color: var(--muted); font-size: 0.9rem; max-width: 60ch; }
.error { color: #a12a2a; }
code { background: #eef0f3; padding: 0.1em 0.35em; border-radius: 3px; font-size: 0.9em; }

/* Tables ------------------------------------------------------------------ */

table.data {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

table.data th,
table.data td {
  text-align: left;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--line);
}

table.data th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: #fbfcfd;
}

table.data tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; }
table.data tr.mine { background: var(--accent-soft); }
table.data tr.undrafted td { color: var(--muted); }
table.data tr.undrafted td strong { color: var(--ink); }
table.data a { color: var(--accent); font-weight: 600; }

/* Finishing position: narrow, bold, and quiet enough not to shout over the
   team names, which are what people actually scan for. */
table.data td.rank {
  width: 3.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

table.data tr:first-child td.rank { color: var(--accent); }

/* Position chips ---------------------------------------------------------- */

.pos {
  display: inline-block;
  min-width: 2.6em;
  text-align: center;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 700;
  background: #eef0f3;
  color: #46505c;
}

.pos-QB  { background: #e7e0f7; color: #4b3b7a; }
.pos-RB  { background: #dcefe2; color: #23603c; }
.pos-WR  { background: #dde8f7; color: #23486e; }
.pos-TE  { background: #f9e6d5; color: #7a4a1e; }
.pos-K   { background: #f3e2e6; color: #7a2f42; }
.pos-DEF { background: #e2e5e8; color: #414a54; }

/* Status pills ------------------------------------------------------------ */

.pill {
  display: inline-block;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.pill-yes     { background: #dcefe2; color: #23603c; }
.pill-no      { background: #f7dcdc; color: #802626; }
.pill-pending { background: #f4ecd6; color: #6d5716; }

/* Callout ----------------------------------------------------------------- */

.callout {
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  padding: 0.8rem 1rem;
  margin: 1.25rem 0;
  font-size: 0.94rem;
}

/* Rendered markdown (the rules page) -------------------------------------- */

.prose {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.5rem 1.75rem;
}

.prose h1 { font-size: 1.7rem; margin-top: 0; }
.prose h2 { font-size: 1.25rem; margin-top: 2rem; border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; }
.prose h3 { font-size: 1.05rem; margin-top: 1.5rem; }
.prose li { margin-bottom: 0.3rem; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
.prose em { color: var(--muted); }
.prose table { border-collapse: collapse; margin: 1rem 0; width: 100%; }
.prose th, .prose td { border: 1px solid var(--line); padding: 0.4rem 0.6rem; text-align: left; font-size: 0.92rem; }
.prose th { background: #fbfcfd; }
.prose blockquote { margin: 1rem 0; padding-left: 1rem; border-left: 3px solid var(--line); color: var(--muted); }

/* Draft board ------------------------------------------------------------- */

main.wide { max-width: 1500px; }

.board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.round-toggle {
  flex: 0 0 auto;
  align-self: center;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.round-toggle:hover { border-color: var(--accent); }

/* Board controls: simulate, clear, round toggle -- one row, right of the title. */
.board-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.board-btn {
  padding: 0.35rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.board-btn:hover:not(:disabled) { filter: brightness(1.15); }
.board-btn:disabled { opacity: 0.55; cursor: default; }

/* The secondary action reads as an outline, so "simulate" stays the one filled
   button on the page. */
.board-btn.ghost {
  background: var(--card);
  border-color: var(--line);
  color: var(--accent);
}

.board-btn.ghost:hover { border-color: var(--accent); }

/* Destructive, so it reads warm rather than green -- but still an outline, not
   a filled button. It clears your own private notes, not the league's data. */
.board-btn.ghost.danger { color: #a8442c; }
.board-btn.ghost.danger:hover { border-color: #a8442c; }

/* The reset form is a flex item alongside the buttons; without this it would
   introduce its own block box and break the row. */
.board-controls form { display: inline-flex; margin: 0; }

/* Team picker on the roster page. Shares .board-head's layout, so it sits on
   the right of the title the same way the board's controls do. */
.team-picker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  font-size: 0.82rem;
}

.team-picker label { color: var(--muted); font-weight: 600; }

.team-picker select {
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  font: inherit;
  font-size: 0.82rem;
  max-width: 16rem;
}

.sim-error,
.sim-done {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid #b4462f;
  background: #fdf1ee;
  color: #7d2f1e;
  font-size: 0.85rem;
}

/* Same box, good news. "Your mock draft is finished" is not a failure. */
.sim-done {
  border-left-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}


/* Pick modal (mock draft) -------------------------------------------------- */

/* Anchored under the cell being drafted, not centred over the board.
   Absolute (page coordinates), not fixed, so it travels with the cell it
   belongs to when the page scrolls. board.js sets top/left; everything about
   where it lands is computed there, since only JS knows where the cell is. */
.pick-panel {
  position: absolute;
  z-index: 100;
  width: min(30rem, calc(100vw - 2rem));
}

.pick-panel[hidden] { display: none; }

.modal {
  display: flex;
  flex-direction: column;
  /* Bounded so the panel cannot swallow the board below it. The list inside
     scrolls; the panel itself stays a readable size. */
  max-height: min(26rem, 52vh);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 14px 38px rgba(16, 20, 25, 0.28);
  overflow: hidden;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--accent-soft);
  cursor: grab;                 /* the header is the drag handle */
  user-select: none;
}

.pick-panel.dragging .modal-head { cursor: grabbing; }

/* While a drag is in progress, stop the pointer selecting text across the page
   -- otherwise a quick drag highlights half the board. */
body.dragging-panel { user-select: none; }

/* A small pointer up at the cell the panel belongs to, so the association is
   visible rather than inferred from proximity. Hidden when the panel has been
   dragged away or flipped above its cell. */
.pick-panel::before {
  content: '';
  position: absolute;
  top: -6px;
  left: var(--tail-x, 1.5rem);
  width: 10px;
  height: 10px;
  background: var(--accent-soft);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  transform: rotate(45deg);
}

.pick-panel.detached::before { display: none; }

/* The cell whose pick is being made. Same green as the own-column marker, so
   "this is yours, right now" reads as an intensification of "this is yours". */
.cell.on-the-clock {
  box-shadow: inset 0 0 0 2px #7ac8a0, 0 0 0 3px rgba(122, 200, 160, 0.35);
}

.modal-head h2 { margin: 0; font-size: 1rem; }

.modal-close {
  border: 0;
  background: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}

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

.modal-tools { padding: 0.7rem 1rem 0.4rem; }

.modal-tools input[type="search"] {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 0.9rem;
}

.pick-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}

.chip {
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

/* The active chip is outlined, not filled: the position chips already carry
   their own hue, and filling them would put two colour languages in one row. */
.chip.active { border-color: var(--accent); color: var(--accent); }

.modal-hint {
  margin: 0;
  padding: 0.2rem 1rem 0.5rem;
  font-size: 0.76rem;
  color: var(--muted);
}

.pick-list {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0;
  padding: 0 0.5rem;
  list-style: none;
}

.pick-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pick-row:hover { background: var(--accent-soft); }

.pick-name { flex: 1 1 auto; font-weight: 600; }

.pick-team {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}

.pick-adp {
  flex: 0 0 auto;
  min-width: 5rem;
  text-align: right;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.pick-none { padding: 0.8rem 0.5rem; color: var(--muted); font-size: 0.85rem; }

.modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--line);
}

.board-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin: 1.1rem 0 1.5rem;
}

/* At the default eight rounds the grid fits without scrolling. The overflow
   rule only bites once "all rounds" is on, or on a narrow screen. */
.board-scroll {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
  background: var(--board-bg);
  border: 1px solid var(--board-line);
  border-radius: 8px;
  padding: 2px;
}

table.board {
  border-collapse: separate;
  border-spacing: 2px;
  width: 100%;
  table-layout: fixed;      /* ten equal columns, no content-driven widths */
  font-size: 0.75rem;
}

table.board thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--board-bg);
  padding: 0.4rem 0.35rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--board-ink);
}

.slot-num {
  display: block;
  font-size: 0.62rem;
  color: #5d6874;
  font-weight: 700;
}

th.round-head {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 2.4rem;
  background: var(--board-bg);
  color: var(--board-ink);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

thead th.round-head { z-index: 4; }

.arrow {
  display: block;
  font-size: 0.62rem;
  line-height: 1;
  color: #4d5762;
  font-weight: 400;
}

/* Cells ------------------------------------------------------------------- */

.cell {
  position: relative;
  height: 4.4rem;
  padding: 0.9rem 0.35rem 0.25rem;
  border-radius: 5px;
  background: var(--board-cell);
  vertical-align: top;
  overflow: hidden;
}

.own-col { box-shadow: inset 0 0 0 1px rgba(122, 200, 160, 0.35); }
thead th.own-col { color: #7ac8a0; box-shadow: none; }

/* Pick number, quiet in the corner. */
.pick-label {
  position: absolute;
  top: 0.2rem;
  left: 0.4rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: #5a646f;
  letter-spacing: 0.02em;
}

/* Resolved cells: solid position colour, name first. --------------------- */

.cell.filled { color: #fff; }
.cell.filled .pick-label { color: rgba(255, 255, 255, 0.72); }

.filled-name {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filled-sub {
  display: block;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  opacity: 0.85;
}

/* Solid = fact (declared or locked). Desaturated = projection. */
.pos-bg-QB  { background: var(--qb); }
.pos-bg-RB  { background: var(--rb); }
.pos-bg-WR  { background: var(--wr); }
.pos-bg-TE  { background: var(--te); }
.pos-bg-K   { background: var(--k); }
.pos-bg-DEF { background: var(--def); }

.cell.projected.pos-bg-QB  { background: var(--qb-soft); }
.cell.projected.pos-bg-RB  { background: var(--rb-soft); }
.cell.projected.pos-bg-WR  { background: var(--wr-soft); }
.cell.projected.pos-bg-TE  { background: var(--te-soft); }
.cell.projected.pos-bg-K   { background: var(--k-soft); }
.cell.projected.pos-bg-DEF { background: var(--def-soft); }
.cell.projected { color: #cfd6dd; }
.cell.projected .filled-name { font-weight: 600; }

/* A projected cell has a player in it, so the "who could be kept here" list
   underneath it would be noise. Clearing the simulation brings it back --
   nothing is removed from the DOM, only hidden. */
.cell.projected .cands,
.cell.projected .more,
.cell.projected .more-count { display: none; }

/* The fill is appended after the cell's <details>, which carries the padding
   on its summary, so it pays for its own. */
.sim-fill { display: block; padding: 0 0.35rem 0.3rem; }

/* A pick I made myself in a mock draft. Full position colour, and the same
   solid ring a lock wears: on this board hue means position and the ring means
   certainty, and an explicit choice of mine is certain in a way an ADP guess
   never is. */
.cell.mine-pick {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
  color: #fff;
}

.cell.mine-pick .cands,
.cell.mine-pick .more,
.cell.mine-pick .more-count { display: none; }

/* A locked/declared call is louder than a projection: full-strength colour
   plus a ring, so the two never read the same at a glance. */
.cell.locked {
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(0, 0, 0, 0.3);
}

.cell.own-col.locked { box-shadow: inset 0 0 0 2px #fff; }

/* "You called it" -- a small tick on a revealed keeper this user predicted.
   Deliberately quiet: it is a private footnote on a public board, not a score. */
.called-tick {
  position: absolute;
  bottom: 0.15rem;
  right: 0.3rem;         /* bottom corner: the top-right one is the trade badge */
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Candidate names --------------------------------------------------------- */

.cell .cands { margin: 0; padding: 0; list-style: none; }

.cell .cand {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  margin-bottom: 1px;
  padding: 0 0.25rem;
  border-radius: 2px;
  line-height: 1.35;
  font-size: 0.66rem;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
}

.cand-name { overflow: hidden; text-overflow: ellipsis; }
.cand-team { opacity: 0.7; font-size: 0.58rem; font-weight: 700; }
.cell .cand.pending { opacity: 0.5; }

.pending-tag {
  flex: 0 0 auto;
  font-weight: 700;
  cursor: help;
  opacity: 0.85;
}

.shift-mark {
  flex: 0 0 auto;
  font-size: 0.56rem;
  font-weight: 700;
  opacity: 0.85;
  cursor: help;
}

.cell .more { margin-top: 1px; }

.cell .more summary {
  cursor: pointer;
  font-size: 0.6rem;
  color: #6d7883;
  list-style: none;
  padding-left: 0.25rem;
}

.cell .more summary::-webkit-details-marker { display: none; }
.cell .more summary:hover { color: #a9b4bf; }

/* Traded ------------------------------------------------------------------ */

.cell .badge {
  position: absolute;
  top: 0.18rem;
  right: 0.3rem;
  padding: 0 0.25em;
  border-radius: 2px;
  background: rgba(224, 134, 64, 0.22);
  color: #e6a86b;
  font-size: 0.58rem;
  font-weight: 700;
}

.cell.filled .badge { background: rgba(0, 0, 0, 0.25); color: #fff; }

/* Sandbox burn highlight -- classes added and removed by board.js.
   The background comes from the same .pos-bg-* class every other filled cell
   uses, so a kept RB is RB-teal here exactly as it is anywhere else. What
   marks a burn as provisional is the RING, not the hue: dashed means "you are
   trying this, nothing is saved", against the solid ring of a locked call and
   the ringless desaturation of a projection. */
.cell.burned {
  color: #fff;
  outline: 2px dashed rgba(255, 255, 255, 0.92);
  outline-offset: -3px;
}
.cell.burned .pick-label { color: rgba(255, 255, 255, 0.8); }

.burn-tag {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  white-space: normal;
}

.burn-tag em {
  display: block;
  font-weight: 400;
  font-style: normal;
  font-size: 0.6rem;
  opacity: 0.85;
}

/* Prediction popover ------------------------------------------------------ */

.cell-pop { position: static; }

.cell-pop > summary {
  display: block;
  cursor: pointer;
  list-style: none;
  height: 100%;
}

.cell-pop > summary::-webkit-details-marker { display: none; }
.cell:has(.cell-pop) { padding: 0; }
.cell-pop > summary { padding: 0.9rem 0.35rem 0.25rem; }
.cell-pop[open] > summary { outline: 2px solid #7ac8a0; outline-offset: -2px; border-radius: 5px; }

/* The menu escapes the cell, which is why the cell does not clip it. */
.cell:has(.cell-pop[open]) { overflow: visible; z-index: 20; }

.pop-menu {
  position: absolute;
  top: calc(100% - 0.2rem);
  left: 0;
  z-index: 30;
  min-width: 13rem;
  padding: 0.4rem;
  border-radius: 6px;
  background: #12171c;
  border: 1px solid #39434e;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  text-align: left;
}

/* The menu hangs below its cell, and .board-scroll clips anything outside it.
   Absolutely-positioned content does not extend a scroll area, so on the last
   row the menu is not merely off-screen -- it cannot be scrolled to at all,
   which reads as "Round 8 cells don't respond to clicks". Flip it upward on the
   bottom two rows, and inward on the last two columns for the same reason. */
.board tbody tr:nth-last-child(-n + 2) .pop-menu {
  top: auto;
  bottom: calc(100% - 0.2rem);
}

.board tbody td:nth-last-child(-n + 2) .pop-menu {
  left: auto;
  right: 0;
}

.pop-head {
  margin: 0 0 0.3rem;
  padding: 0 0.2rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #74808d;
}

.pop-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  padding: 0.28rem 0.3rem;
  border: 0;
  border-radius: 4px;
  background: none;
  color: #dfe5ec;
  font: inherit;
  font-size: 0.72rem;
  text-align: left;
  cursor: pointer;
}

.pop-item:hover { background: #232c35; }

.pop-pos {
  flex: 0 0 auto;
  min-width: 2.1em;
  padding: 0 0.25em;
  border-radius: 2px;
  font-size: 0.6rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
}

.pop-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pop-team { flex: 0 0 auto; font-size: 0.62rem; color: #8b97a4; font-weight: 700; }
.pop-cost { flex: 0 0 auto; font-size: 0.66rem; font-weight: 700; color: #a9b4bf; }

.pop-item.unlock { justify-content: center; color: #e08a8a; font-weight: 600; }
.pop-item.unlock:hover { background: #32222a; }

.more-count {
  display: block;
  padding-left: 0.25rem;
  font-size: 0.6rem;
  color: #6d7883;
}

/* A predicted cell is a call, not a fact: same colour, dashed ring. */
.cell.predicted.locked {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.col-warn {
  display: inline-block;
  margin-left: 0.2rem;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  border-radius: 50%;
  background: #b4462f;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  cursor: help;
}

/* Legend ------------------------------------------------------------------ */

.board-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  align-items: center;
  margin: 0.6rem 0 0;
  font-size: 0.74rem;
  color: var(--muted);
}

.legend-key {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 2px;
  vertical-align: -1px;
  margin-right: 0.25rem;
}

.legend-projected { background: var(--rb-soft); }

/* Same teal as a real RB cell, wearing the sandbox's dashed ring -- the key
   has to show the ring, since the ring is the whole distinction. */
.legend-trying {
  background: var(--rb);
  outline: 1.5px dashed #fff;
  outline-offset: -2px;
}

/* The simulator's assumptions, folded away until asked for. */
.sim-legend {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.sim-legend summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.sim-legend ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.sim-legend li { margin: 0.15rem 0; }


/* Sandbox sidebar --------------------------------------------------------- */

.sandbox {
  flex: 0 0 18rem;
  position: sticky;
  top: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.9rem 1rem 0.8rem;
}

.sandbox h2 { font-size: 0.95rem; margin: 0 0 0.1rem; }
.sandbox-list { list-style: none; margin: 0.7rem 0 0.6rem; padding: 0; }

.sandbox-list li {
  border-radius: 4px;
  margin-bottom: 0.1rem;
  font-size: 0.8rem;
}

.sandbox-list li.disabled { opacity: 0.4; }

.sandbox-list label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.3rem;
  cursor: pointer;
}

.sandbox-list li.disabled label { cursor: default; }
.sandbox-list li:not(.disabled):hover { background: #f5f7f8; }

/* The swatch is invisible until picked, then takes that player's POSITION
   colour -- the same one his burned cell wears on the board. board.js adds the
   .pos-bg-* class; there is no separate sidebar palette to keep in sync. */
.swatch {
  flex: 0 0 auto;
  width: 0.55rem;
  height: 1.1rem;
  border-radius: 2px;
  background: transparent;
}

.sandbox-list li.picked { font-weight: 600; background: var(--picked-row); }

.sandbox-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-cost {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: 0.74rem;
  color: #4a535e;
}

.sandbox-cost.shifted { color: #8a6a2f; cursor: help; }

.kept-count {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 700;
  color: #7a5bbf;
  cursor: help;
}

.sandbox-result {
  border-top: 1px solid var(--line);
  padding-top: 0.55rem;
  font-size: 0.8rem;
}

.sandbox-result ul { margin: 0.25rem 0 0; padding-left: 1.05rem; }
.sandbox-result li { margin-bottom: 0.15rem; }
.sandbox-good { color: var(--accent); font-weight: 600; margin: 0; }
.sandbox-bad { color: #a12a2a; font-weight: 600; margin: 0; }
.sandbox-warn { color: #7a5b12; }

.sandbox .note { font-size: 0.72rem; margin: 0.6rem 0 0; }

@media (max-width: 860px) {
  .board-layout { flex-direction: column; }
  .sandbox { flex: 1 1 auto; width: 100%; position: static; }
  .board-scroll { max-height: none; width: 100%; }
}


/* Login ------------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.25rem;
}

.login-form { max-width: 22rem; margin-top: 1rem; }
.login-form p { margin: 0 0 0.9rem; }
.login-form label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.2rem; }

.login-form input {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid #c8cdd4;
  border-radius: 4px;
  font: inherit;
}

button[type="submit"] {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 0.5rem 1.1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.helptext, .login-form ul { color: var(--muted); font-size: 0.85rem; }

footer {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem 2rem;
  color: var(--muted);
  font-size: 0.85rem;
}