/* Darts pages. Hand-maintained - unlike the index.html files beside it, which are
   generated by gen-darts and must not be edited.

   Builds on the variables in /assets/styles.css. The two extra colors come from the
   dart artwork itself (/assets/svg/darts.svg) so the pages and their favicon agree. */

:root {
  --dart-green: #45a945;
  --dart-navy: #003b54;
  --gold: #e8c352;
  --silver: #c3ccd4;
  --bronze: #cd8032;
}

header {
  text-align: center;
  margin-bottom: 1.5rem;
}

header .dart {
  height: 48px;
  width: auto;
  vertical-align: middle;
}

header h1 {
  margin-top: 0.25rem;
}

/* ---- nav between the three pages ---------------------------------------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.tabs a {
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius);
  background: var(--color-bg-secondary);
  color: var(--color-text);
  font-size: 0.95rem;
}

.tabs a:hover {
  background: var(--color-accent);
  color: #fff;
  text-decoration: none;
}

/* ---- tables -------------------------------------------------------------- */

/* Wide content scrolls inside its own box so the page itself never does. The log
   is 6 columns and the board is 9; neither fits a phone without this. */
.scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}

th,
td {
  padding: 0.4rem 0.6rem;
  text-align: left;
  white-space: nowrap;
}

thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--color-bg);
  color: var(--color-primary);
  border-bottom: 2px solid var(--color-accent);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.12);
}

tbody tr:hover {
  background: rgba(255, 136, 62, 0.14);
}

/* Right-align anything numeric and use tabular figures, so columns line up as
   columns rather than as ragged text. */
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---- leaderboard --------------------------------------------------------- */

.board .tosser {
  font-weight: 600;
  color: var(--color-highlight);
}

/* The ranking stat, called out so it reads as the one the order comes from. */
.board .lead {
  font-weight: 700;
  color: var(--color-primary);
}

.board .rankcell {
  color: var(--color-muted);
  width: 2.5rem;
}

.board .rank-1 .rankcell,
.board .rank-2 .rankcell,
.board .rank-3 .rankcell {
  font-weight: 700;
}

.board .rank-1 .rankcell { color: var(--gold); }
.board .rank-2 .rankcell { color: var(--silver); }
.board .rank-3 .rankcell { color: var(--bronze); }

.board .rank-1 .tosser { color: var(--gold); }

/* "wins/played" - the denominator is context, not a headline. */
.board .of {
  color: var(--color-muted);
  font-weight: 400;
}

/* ---- game logs ----------------------------------------------------------- */

.log .winner {
  color: var(--dart-green);
  font-weight: 600;
}

.log .field {
  color: var(--color-muted);
  white-space: normal;
}

/* A game that is logged but scores nothing (see non_scoring_types in darts.json).
   Dimmed rather than hidden: it happened, it just does not count. */
.log tr.nonscoring td {
  opacity: 0.55;
}

.tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.35rem;
  border: 1px solid var(--color-muted);
  border-radius: 3px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
}

/* ---- odds and ends ------------------------------------------------------- */

.summary.foot {
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.loglinks {
  margin: 0;
  padding-left: 1.1rem;
}

.loglinks li {
  margin-bottom: 0.35rem;
}

@media (max-width: 40rem) {
  table {
    font-size: 0.85rem;
  }

  th,
  td {
    padding: 0.35rem 0.45rem;
  }

  header .dart {
    height: 40px;
  }
}