/* The scoreboard. It wears the look of the day: every colour and font below comes from the --b- settings.
   Ceefax days get teletext, normal days the sticker album. Themed days reuse the album's colours, so they follow by
   themselves; their extra touches are in themes.css.
   Kept plain on purpose (Jordan, 2026-11-01): one font, two sizes (--b-big for your points, --b-size for the rest)
   and one highlight (your row). */

/* Ceefax days: black screen, teletext colours */
body {
  --b-bg: var(--black);
  --b-ink: var(--white);
  --b-soft: var(--grey);
  --b-border: var(--yellow);
  --b-tab: var(--cyan);        /* selected tab and letter buttons */
  --b-tab-ink: var(--black);
  --b-tab-off: var(--black);   /* a tab that isn't selected */
  --b-save: var(--yellow);
  --b-save-ink: var(--black);
  --b-points: var(--green);    /* your points */
  --b-you: var(--green);       /* your row */
  --b-you-ink: var(--black);
  --b-error: var(--red);
  --b-font: var(--teletext-font);
  --b-size: 1.3rem;            /* this font runs small */
  --b-big: 1.7rem;
  --b-bold: 400;               /* bold goes blobby in this font */
  --b-table: 13em;             /* width of the rank, name, score block */
  --b-radius: 0;
}

/* Normal days and themed days: the sticker album */
body[data-theme="sticker"] {
  --b-bg: var(--s-sticker);
  --b-ink: var(--s-ink);
  --b-soft: var(--s-soft);
  --b-border: var(--s-ink);
  --b-tab: var(--s-green);
  --b-tab-ink: var(--s-page);
  --b-tab-off: var(--s-card);
  --b-save: var(--s-red);
  --b-save-ink: var(--s-sticker);
  --b-points: var(--s-red);
  --b-you: var(--s-green);
  --b-you-ink: var(--s-page);
  --b-error: var(--s-red);
  --b-font: var(--body-font);
  --b-size: 1rem;
  --b-big: 1.3rem;
  --b-bold: 700;
  --b-table: 15em;
  --b-radius: 4px;
}

/* Everything in the board uses the same font and size unless a rule below says it's the big one */
.arcade, .board-box {
  font: 400 var(--b-size)/1.3 var(--b-font); color: var(--b-ink);
}
.arcade button, .arcade input, .board-box button { font: var(--b-bold) var(--b-size)/1.2 var(--b-font); letter-spacing: 0; box-shadow: none; }
.arcade { margin: 0 0 12px; padding: 12px; background: var(--b-bg); border: 2px solid var(--b-border); border-radius: var(--b-radius); }

/* Your points */
.points-total { margin: 0; text-align: center; font-size: var(--b-big); font-weight: var(--b-bold); color: var(--b-points); }
.points-parts { margin: 2px 0 0; text-align: center; color: var(--b-soft); }
.board-note { margin: 4px 0 0; text-align: center; }

/* Name entry: three letters with ▲ ▼, and Save beside them */
#name-entry:empty { display: none; }
#name-entry { margin-top: 10px; text-align: center; }
.entry-title { margin: 0 0 6px; font-weight: var(--b-bold); }
.entry-row { display: flex; justify-content: center; align-items: stretch; gap: 6px; }
.entry-slot { display: flex; flex-direction: column; gap: 3px; width: 46px; }
.arcade .entry-step { height: 30px; padding: 0; color: var(--b-tab-ink); background: var(--b-tab); border: 0; border-radius: var(--b-radius); }
.arcade .entry-letter {
  width: 100%; height: 42px; padding: 0; box-sizing: border-box; text-align: center; font-size: var(--b-big);
  color: var(--b-ink); background: var(--b-tab-off); border: 2px solid var(--b-border); border-radius: var(--b-radius); caret-color: transparent;
}
.arcade .entry-save { margin-left: 6px; padding: 0 16px; color: var(--b-save-ink); background: var(--b-save); border: 0; border-radius: var(--b-radius); }
.entry-error { margin: 6px 0 0; font-weight: var(--b-bold); color: var(--b-error); }

/* Tabs */
.board-tabs { display: flex; gap: 4px; margin-top: 10px; }
#board-panel-body .board-tabs { margin-top: 0; }
/* Smaller phones: "Gameweek" is long, so two rows of two tabs */
@media (max-width: 380px) { .board-tabs { display: grid; grid-template-columns: 1fr 1fr; } }
.arcade .board-tab, .board-box .board-tab {
  flex: 1 1 auto; min-width: 0; min-height: 38px; padding: 2px; color: var(--b-ink);
  background: var(--b-tab-off); border: 2px solid var(--b-tab); border-radius: var(--b-radius);
}
.arcade .board-tab[aria-pressed="true"], .board-box .board-tab[aria-pressed="true"] { color: var(--b-tab-ink); background: var(--b-tab); }
.board-title { margin: 8px 0 4px; text-align: center; color: var(--b-soft); }

/* The table: plain rows, only your own row stands out */
.board-table { width: 100%; border-collapse: collapse; font: inherit; color: inherit; }
.board-table td { padding: 2px 6px; }
/* Rank, name and score sit close together in a block in the middle, not spread across the box.
   Fixed column widths, so the block doesn't shift when you change tab. */
.board-table { table-layout: fixed; width: min(100%, var(--b-table)); margin: 0 auto; }
.board-place { width: 3em; color: var(--b-soft); text-transform: uppercase; }
body[data-theme="sticker"] .board-place { text-transform: none; }
.board-name { font-weight: var(--b-bold); white-space: pre; }
/* Album look: this font's capitals sit too close together, so space out the 3 letters, and use 1st not 1ST */
body[data-theme="sticker"] .board-initials { letter-spacing: 0.12em; }
body[data-theme="sticker"] .entry-letter { letter-spacing: 0; }
.board-points { width: 4.5em; text-align: right; }
.board-streak { font-weight: 400; white-space: nowrap; }
.board-table .you td { font-weight: var(--b-bold); color: var(--b-you-ink); background: var(--b-you); }
.board-gap td { padding: 0; line-height: 0.8; text-align: center; color: var(--b-soft); }
.board-empty { margin: 12px 0; text-align: center; }
.board-mock { margin: 8px 0 0; text-align: center; color: var(--b-soft); }
/* End screen: opens the full top 10 */
.arcade .board-more {
  display: block; width: 100%; min-height: 34px; margin: 4px 0 0; padding: 2px;
  color: var(--b-ink); background: none; border: 0; border-radius: 0; text-decoration: underline; cursor: pointer;
}

/* How points work: a fold-out on the end screen, always open in the pop-up. Sentences stay in the easy-to-read font. */
.points-rules { --b-bold: 700; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--b-soft); font-family: var(--body-font); font-size: 1rem; }
.points-rules summary { min-height: 30px; font-weight: var(--b-bold); text-align: center; cursor: pointer; }
.points-table { width: 100%; margin-top: 4px; border-collapse: collapse; font: inherit; color: inherit; }
.points-table td { padding: 2px 6px; }
.points-table td:last-child { text-align: right; font-weight: var(--b-bold); white-space: nowrap; }
.points-notes { margin: 8px 0 0; padding: 0 0 0 20px; }
.points-notes li { margin-top: 3px; }

/* Keyboard focus */
.arcade button:focus-visible, .arcade input:focus-visible, .arcade summary:focus-visible, .board-box button:focus-visible { outline: 3px solid var(--b-points); outline-offset: 2px; }

/* Button that opens the pop-up, under the Milner switch. Ceefax: a Fastext button. Album: a cream tab, like the modes. */
main .board-open {
  order: 6; display: block; width: 100%; margin: 0 0 14px; padding: 6px 4px; font: 400 1.35rem var(--teletext-font);
  color: var(--cyan); background: var(--black); border: 3px solid var(--cyan); box-shadow: none;
}
body[data-theme="sticker"] main .board-open {
  padding: 9px 4px; font: 400 0.9rem var(--s-head-font); letter-spacing: 0.5px; color: var(--s-ink); background: var(--s-card);
  border: 2px solid var(--s-ink); border-radius: 999px; box-shadow: 2px 3px 0 rgba(43, 38, 32, 0.3);
}

/* The pop-up */
#board-panel { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.7); }
#board-panel[hidden] { display: none; } /* the display: flex above would otherwise keep it on screen */
.board-box { width: 100%; max-width: 440px; max-height: 100%; display: flex; flex-direction: column; background: var(--b-bg); border: 3px solid var(--b-border); border-radius: var(--b-radius); overflow: hidden; }
.board-box-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; font-weight: var(--b-bold); color: var(--b-tab-ink); background: var(--b-tab); }
.board-box .board-box-head button { padding: 2px 8px; color: inherit; background: none; border: 0; border-radius: 0; cursor: pointer; }
.board-box-scroll { padding: 12px; overflow-y: auto; }