/* The draft game. Sits on top of style.css, which owns the colours. */

/* Wider than the comparison page. Fifteen cards need the room, and the whole
   point of a card is that every number on it can be read at a glance. */
body {
  max-width: 1040px;
}

h2 {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 36px 0 14px;
}

/* The deck you get when the money is gone. Coloured so it is obvious this is
   not the ordinary table. */
h2.is-scrap {
  color: var(--accent);
}

/* --- budget, round, score --- */

#bar {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
}

.meter {
  flex: 1;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.meter-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.meter-value {
  display: block;
  margin-top: 4px;
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* --- the five slots --- */

#roster {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.slot {
  position: relative;
  min-height: 166px;
  padding: 10px;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
}

.slot.is-filled {
  border-style: solid;
  border-color: var(--accent);
}

.slot-pos {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.slot-photo {
  width: 36px;
  height: 54px;
  margin-top: 8px;
}

.slot-name {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
}

.slot-season {
  display: block;
  margin-top: 2px;
  font-size: 0.62rem;
  color: var(--muted);
}

/* The stat line, kept out of the way until you ask for it. The slot has to
   stay small enough that five fit across, so hovering is where the detail
   lives. Sits above the slot so it never covers the deck underneath. */
.slot-stats {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 5;
  width: max-content;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--accent);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.slot-stats .card-line {
  margin-top: 0;
  font-size: 0.85rem;
}

.slot-stats .card-line + .card-line {
  margin-top: 5px;
}

.slot.is-filled:hover .slot-stats {
  opacity: 1;
  visibility: visible;
}

/* Same man, same salary, different box. Quiet until you want it. */
.slot-move {
  font: inherit;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 8px;
  padding: 4px 8px;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.slot-move:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* Selling is the one thing here you cannot undo, so it does not look like the
   move button sitting next to it. */
.slot-move.is-sell {
  margin-left: 4px;
}

.slot-move.is-sell:hover {
  border-color: var(--gold);
}

/* What he plays, his own position first -- so a man sitting in the box he
   does not belong to still says where he does belong. */
.slot-plays {
  display: block;
  margin-top: 4px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--stat);
}

.slot-plays-alt {
  color: var(--muted);
}

.slot-empty {
  display: block;
  margin-top: 24px;
  color: var(--line);
  font-size: 1.2rem;
}

/* --- the deck --- */

#top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

#reveal {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.reveal-option {
  font: inherit;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 10px;
  color: var(--muted);
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.reveal-option.is-on {
  background: var(--line);
  color: var(--text);
}

.hint {
  margin-left: 5px;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
}

.reveal-option.is-on .hint {
  color: var(--accent);
}

.card-worth {
  display: block;
  margin-top: 8px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* --- the lifelines --- */

#deck-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

#lifelines {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
  margin: 36px 0 14px;
}

/* Says once what would otherwise have to be repeated on all five buttons. */
#lifeline-label {
  align-self: center;
  padding-right: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.lifeline {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 8px 12px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s ease;
}

.lifeline:hover:not(:disabled) {
  border-color: var(--gold);
}

.lifeline-hint {
  display: block;
  margin-top: 3px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}

/* Spent stays on the screen rather than disappearing, so you can see what you
   have left without counting. */
.lifeline:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.lifeline.is-spent {
  text-decoration: line-through;
}

/* Sell is armed and waiting for you to point at somebody. */
.lifeline.is-armed {
  color: #12141a;
  background: var(--gold);
  border-color: var(--gold);
}

.lifeline.is-armed .lifeline-hint {
  color: #12141a;
}

#deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

/* Holds the card and the magnifying glass that sits on its corner. */
.card-wrap {
  position: relative;
}

.peek {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 0.85rem;
  line-height: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.12s ease, border-color 0.12s ease;
}

.peek:hover {
  opacity: 1;
  border-color: var(--gold);
}

.card {
  font: inherit;
  color: var(--text);
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 11px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.card:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.card.is-broke {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Why this one is out of reach, when the reason is not the money. */
.card-why {
  color: var(--accent);
}

/* The other position he can play. Same colour as the first one: it is not a
   footnote, it is somewhere he can actually be moved to. */
.card-alt {
  color: inherit;
}


.card-pos {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* 120x180 is what the source sends, and 72x108 is the same shape half the
   size -- any other pair of numbers would squash a face. */
.card-photo {
  width: 72px;
  height: 108px;
  margin-top: 10px;
}

.card-name {
  display: block;
  margin-top: 10px;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
}

.card-season {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--muted);
}

/* The numbers you actually play on. Bigger and brighter than the rest of the
   card, because everything else -- name, season, team -- is decoration next
   to these six figures. */
.card-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 4px;
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--stat);
  font-variant-numeric: tabular-nums;
}

.stat {
  display: block;
  white-space: nowrap;
}

/* The unit is not the number. Small and grey so the eye lands on the figure
   and only reads "reb" if it needs to. */
.stat-label {
  margin-left: 3px;
  font-size: 0.68em;
  color: var(--muted);
}

.card-price {
  display: block;
  margin-top: 14px;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.tag {
  display: block;
  margin-top: 2px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Cost is what you pay and score is what you got: never the same colour, so
   the number in the slot cannot be mistaken for the other one. */
.slot-numbers {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
}

.slot-cost,
.slot-score {
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* What you paid stays grey, what you got is the orange one. */
.slot-cost {
  color: var(--muted);
}

.slot-score {
  color: var(--accent);
}

.slot-score.is-hidden {
  color: var(--line);
}

/* --- the end --- */

#finish {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* The record is the headline and the score is the footnote, not the other way
   round. 55-27 is a season you can picture; 134.9 is arithmetic. */
#verdict {
  margin: 0 0 18px;
}

#verdict strong {
  display: block;
  color: var(--accent);
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.verdict-team {
  display: block;
  margin-top: 8px;
  font-size: 1.15rem;
  color: var(--gold);
}

/* Past the real record there is no team to compare you to. */
.verdict-team.is-unheard {
  color: var(--accent);
  font-weight: 700;
}

/* The whole lineup's night, in the same columns the cards used. */
.verdict-team-line {
  display: block;
  max-width: 380px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.verdict-team-line .card-line {
  font-size: 1.1rem;
}

.verdict-tail {
  display: block;
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--muted);
}

/* Second to the play button, because copying a link is what you do after you
   are done, not instead of playing. */
#share {
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin-left: 8px;
  padding: 11px 20px;
  color: var(--text);
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

#share:hover {
  border-color: var(--gold);
}

/* --- somebody else's team, opened from a link --- */

/* A visitor cannot pick, cannot spend and cannot hide a score, so none of the
   controls are shown to them. What is left is a record, a stat line and five
   men -- which is the whole of what a shared team is. */
#game.is-shared #bar,
#game.is-shared #deck-head,
#game.is-shared #deck,
#top.is-shared #reveal {
  display: none;
}

/* The verdict has moved to the top, so it loses the rule that separated it
   from the deck and gains room underneath instead. */
#game.is-shared #finish {
  margin: 0 0 28px;
  padding-top: 0;
  border-top: none;
}

#game.is-shared #roster {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

/* Nothing above it any more, so the record starts the page. */
#game.is-shared #verdict strong {
  font-size: 3.6rem;
}

/* Nobody is drafting here, so the boxes are evidence rather than slots. */
#game.is-shared .slot {
  border-style: solid;
}

#again {
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 11px 20px;
  color: #12141a;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

@media (max-width: 640px) {
  #roster {
    grid-template-columns: repeat(2, 1fr);
  }
}