/* Served from this site so the app opens without a connection. Latin only: any
   other character in a player's name falls back to the system font. Figtree is
   one variable file for every weight. */
@font-face {
  font-family: 'Figtree Variable';
  font-weight: 300 900;
  font-display: swap;
  src: url('/assets/figtree-latin-wght-normal-D_ZTVpCC.woff2') format('woff2');
}

/* The optical-size cut, so headings keep the same shapes they had on Google Fonts. */
@font-face {
  font-family: Fraunces;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fraunces-latin-opsz-normal-DihXLNYH.woff2') format('woff2');
}

/* Ink and Chalk: an ink-dark table, chalk-white controls, colour kept for players and time states. */
:root {
  color-scheme: dark;
  /* One family for text, labels, buttons and clocks, with plain zeros; Fraunces for titles only. */
  --font-ui: 'Figtree Variable', system-ui, sans-serif;
  --font-display: Fraunces, Georgia, serif;
  /* Screens settle without overshoot; the pieces on the table keep their spring. */
  --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-turn: cubic-bezier(0.3, 1.25, 0.5, 1);
  --dur-snap: 380ms;
  --dur-turn: 450ms;
  --dur-fade: 150ms;
  --target: 48px;
  --radius-card: 18px;
  /* A button with no outline: a step off whatever it sits on, in every theme. */
  --tonal: color-mix(in srgb, var(--chalk) 9%, transparent);
  /* Buttons go without an outline, except in high contrast. */
  --button-edge: transparent;

  --ink: #111317;
  --surface-1: #1a1d23;
  --surface-2: #242830;
  --outline: #3a404b;
  --outline-strong: #4a505c;
  --chalk: #f4f1ea;
  --chalk-muted: #b9b4a8;
  --on-chalk: #111317;
  --warn: #ffb020;
  --warn-track: #2a2616;
  --time-up: #ff5a36;
  --time-up-deep: #7a2412;
  --track: #2a2e36;
  --scrim: rgba(6, 7, 9, 0.62);
  --pin-edge: #111317;
  /* The end screen's calmer buttons: changing seats, and a new game. */
  --seats-bg: #1d2b3f;
  --seats-ink: #bcd8ff;
  --new-bg: #1b3428;
  --new-edge: #2f5a43;
  --new-ink: #b4e7c6;
  /* A score below zero on the final tally. */
  --negative: #ff7a70;
  /* First, second and third once a round is in. */
  --gold: #f2c94c;
  --silver: #c3ccd8;
  --bronze: #e39a62;
}

[data-theme='light'] {
  color-scheme: light;
  --ink: #f6f3ec;
  --surface-1: #ffffff;
  --surface-2: #ece7dc;
  --outline: #c9c2b4;
  --outline-strong: #8f887a;
  --chalk: #16181d;
  --chalk-muted: #4a4e57;
  --on-chalk: #f6f3ec;
  --warn: #8a5a00;
  --warn-track: #f1e3c4;
  --time-up: #b3261e;
  --time-up-deep: #f3c8c2;
  --track: #ddd6c8;
  --scrim: rgba(20, 20, 20, 0.4);
  --pin-edge: #16181d;
  --seats-bg: #dfeaf8;
  --seats-ink: #173a66;
  --new-bg: #dcf0e3;
  --new-edge: #a8d2b6;
  --new-ink: #1b4d30;
  --negative: #b3261e;
  --gold: #8a6500;
  --silver: #56606e;
  --bronze: #9a4d1c;
}

[data-theme='contrast'] {
  --tonal: transparent;
  --button-edge: #ffffff;
  --ink: #000000;
  --surface-1: #0b0b0b;
  --surface-2: #161616;
  --outline: #ffffff;
  --outline-strong: #ffffff;
  --chalk: #ffffff;
  --chalk-muted: #e6e6e6;
  --on-chalk: #000000;
  --warn: #ffc23d;
  --warn-track: #332600;
  --time-up: #ff6a4d;
  --time-up-deep: #6b1a0c;
  --track: #3a3a3a;
  --scrim: rgba(0, 0, 0, 0.8);
  --pin-edge: #ffffff;
  --seats-bg: #001a40;
  --seats-ink: #ffffff;
  --new-bg: #00301a;
  --new-edge: #8be3b0;
  --new-ink: #ffffff;
  --negative: #ff8a80;
  --gold: #ffd84d;
  --silver: #e8eef5;
  --bronze: #ffa766;
}

/* Game presets, recent games and the helper list */

.helper-art {
  flex-shrink: 0;
}

.helper-art.is-small {
  width: 46px;
  height: 75px;
}

.helper-art.is-tiny {
  width: 28px;
  height: 46px;
}

/* A screen's header with a back button before the title */
.presets-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.presets-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 40px;
  line-height: 1.1;
}

.presets-facts {
  margin: -10px 0 0;
  font-size: 18px;
}

.presets-section,
.helper-section,
.recent {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.presets-later {
  margin: 0;
  font-size: 15px;
  text-wrap: pretty;
}

/* Preset cards: one column on phones, up to three across when there's room, in rows when there are more */
.preset-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.preset-card {
  width: 100%;
  height: 100%;
  min-height: 140px;
  padding: 16px 20px 16px 16px;
  border: 2px solid transparent;
  border-radius: var(--radius-card);
  background: var(--surface-1);
  color: var(--chalk);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform var(--dur-snap) var(--ease-snap), border-color var(--dur-fade);
}

.preset-card:hover {
  border-color: var(--outline);
}

.preset-card:active {
  transform: scale(0.97);
}

.preset-card-words {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.preset-card-label {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}

.preset-card-note {
  font-size: 16px;
  color: var(--chalk-muted);
  text-wrap: pretty;
}

.preset-card-helper {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--chalk-muted);
}

@media (min-width: 720px) {
  .screen:has(.preset-cards) {
    max-width: 960px;
  }

  .preset-cards {
    grid-template-columns: repeat(auto-fit, minmax(max(200px, calc((100% - 28px) / 3)), 1fr));
  }

  .preset-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 18px;
  }
}

/* What a preset will look like, with its specifics underneath */
.preset-picture {
  width: 104px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.preset-picture svg {
  width: auto;
  height: 88px;
}

.preset-picture-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

/* Recent games on Home */
.recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.recent-history {
  min-height: var(--target);
  padding: 0 16px;
  font-size: 15px;
}

.recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Rows divided by a line, rather than each in a card of its own. */
.recent-row {
  width: 100%;
  min-height: 64px;
  padding: 8px 4px 8px 0;
  border: none;
  border-bottom: 1px solid var(--outline);
  border-radius: 0;
  background: transparent;
  color: var(--chalk);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
}

.recent-words {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.recent-name {
  font-weight: 800;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-sub {
  font-size: 15px;
  color: var(--chalk-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-when {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--chalk-muted);
}

.recent-clear {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.recent-clear-ask {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  font-weight: 600;
}

.recent-clear-btn {
  border-color: transparent;
  color: var(--chalk-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The helper list */
.helper-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.helper-row {
  width: 100%;
  min-height: var(--target);
  padding: 12px 4px 12px 0;
  border: none;
  border-bottom: 1px solid var(--outline);
  border-radius: 0;
  background: transparent;
  color: var(--chalk);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
}

.helper-row.is-later {
  border-bottom: 1.5px dashed var(--outline);
}

.helper-row.is-later .helper-art {
  opacity: 0.7;
}

.helper-words {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.helper-name {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
}

.helper-blurb {
  font-size: 15px;
  color: var(--chalk-muted);
  text-wrap: pretty;
}

/* Home's tile into the list: a little fan of helpers */
.more-helpers-art {
  position: relative;
  width: 76px;
  height: 124px;
  flex-shrink: 0;
}

.more-helpers-art .helper-art {
  position: absolute;
  width: 50px;
  height: 82px;
  top: 21px;
}

.more-helpers-art .helper-art:nth-child(1) {
  left: 0;
  transform: rotate(-9deg);
}

.more-helpers-art .helper-art:nth-child(2) {
  left: 26px;
  transform: rotate(8deg);
}

.more-helpers-art .helper-art:nth-child(3) {
  left: 13px;
  top: 34px;
}

/* The helper list's presets cards: card-table felt for timers and a score pad for scores, with a hand of real games
   fanned out. They break from the rows above on purpose, to point people to search, so their colours stay put in
   every theme. On the felt the game cards turn pale, like real playing cards. */
.presets-card {
  --card-bg: #1f5c43;
  --card-ink: #f4f1ea;
  --card-chalk: #111317;
  width: 100%;
  min-height: 172px;
  margin-top: 4px;
  padding: 20px 14px 20px 20px;
  border: none;
  border-radius: var(--radius-card);
  background-color: var(--card-bg);
  color: var(--card-ink);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform var(--dur-snap) var(--ease-snap);
}

/* Ruled like a score pad, with its red margin line. */
.presets-card.is-score {
  --card-bg: #f1e7cf;
  --card-ink: #111317;
  --card-chalk: #f4f1ea;
  background-image:
    linear-gradient(to right, transparent 10px, color-mix(in srgb, #d2453a 60%, transparent) 10px 12px, transparent 12px),
    repeating-linear-gradient(to bottom, transparent 0 25px, color-mix(in srgb, var(--card-ink) 18%, transparent) 25px 26px);
  background-position:
    0 0,
    0 8px;
  background-repeat: no-repeat;
}

/* Paper on a paper-coloured page needs an edge. */
[data-theme='light'] .presets-card.is-score {
  box-shadow: 0 0 0 1.5px var(--outline-strong);
}

.presets-card:active {
  transform: scale(0.97);
}

/* Clear of the fanned hand, whose rotated cards reach past its box. The button may run into the gap. */
.presets-card-words {
  flex: 1;
  min-width: 0;
  padding-right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.presets-card-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.05;
  text-wrap: balance;
}

.presets-card-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: pretty;
}

/* Looks like the search bar it opens, in ink. */
.presets-card-cta {
  margin-top: 6px;
  min-height: 40px;
  padding: 0 16px 0 12px;
  border-radius: 10px;
  background: var(--card-ink);
  color: var(--card-chalk);
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.presets-card-cta .icon {
  width: 20px;
  height: 20px;
}

/* Three games held like cards, each with a player's token in its corner. */
.presets-card-hand {
  position: relative;
  width: 112px;
  height: 140px;
  flex-shrink: 0;
}

.presets-card-game {
  position: absolute;
  left: 12px;
  bottom: 2px;
  width: 88px;
  height: 120px;
  padding: 9px 8px;
  border: 2px solid var(--card-chalk);
  border-radius: 12px;
  background: var(--card-ink);
  color: var(--card-chalk);
  box-shadow: 0 6px 14px rgba(17, 19, 23, 0.3);
  display: flex;
  flex-direction: column;
  gap: 5px;
  transform-origin: 50% 115%;
  transition: transform var(--dur-snap) var(--ease-snap);
}

.presets-card-game:nth-child(1) {
  transform: rotate(-15deg);
}

.presets-card-game:nth-child(2) {
  transform: rotate(-3deg);
}

.presets-card-game:nth-child(3) {
  transform: rotate(10deg);
}

/* The hand opens a little when pointed at or focused. */
.presets-card:focus-visible .presets-card-game:nth-child(1) {
  transform: rotate(-22deg);
}

.presets-card:focus-visible .presets-card-game:nth-child(3) {
  transform: rotate(16deg);
}

@media (hover: hover) {
  .presets-card:hover .presets-card-game:nth-child(1) {
    transform: rotate(-22deg);
  }

  .presets-card:hover .presets-card-game:nth-child(3) {
    transform: rotate(16deg);
  }
}

.presets-card-pip {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: #ff80bf;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.presets-card-game:nth-child(2) .presets-card-pip {
  background: #56b4ff;
  clip-path: circle(50%);
}

.presets-card-game:nth-child(3) .presets-card-pip {
  background: #2fd1b5;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.presets-card-name {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.presets-card-label {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  color: color-mix(in srgb, var(--card-chalk) 72%, var(--card-ink));
}

/* High contrast: no lines behind the words, a white edge, and full-strength labels. */
[data-theme='contrast'] .presets-card {
  background-image: none;
  box-shadow: 0 0 0 2px #ffffff;
}

[data-theme='contrast'] .presets-card-label {
  color: var(--card-chalk);
}


/* The colours a score sheet gives its rows, for the app's Scorecard (scorecard.css) and the printable sheets on
   the game pages (src/pages/sheet.css). Every row also names its colour in words. */
.scorecard,
.sheet-table {
  /* Qwixx's row colours. */
  --qwixx-red: #ff6b6b;
  --qwixx-yellow: #ffd23f;
  --qwixx-green: #3ddc84;
  --qwixx-blue: #5aa9ff;
  /* Cascadia's habitats. */
  --cascadia-mountain: #a3acb9;
  --cascadia-forest: #3fae63;
  --cascadia-prairie: #e8c547;
  --cascadia-wetland: #5cc8b0;
  --cascadia-river: #4fa3f0;
  /* 7 Wonders' card colours. */
  --wonders-red: #ff6b6b;
  --wonders-blue: #5aa9ff;
  --wonders-yellow: #ffd23f;
  --wonders-purple: #c58bd9;
  --wonders-green: #3ddc84;
}

[data-theme='light'] :is(.scorecard, .sheet-table) {
  --qwixx-red: #c62828;
  --qwixx-yellow: #a67c00;
  --qwixx-green: #1b7f3b;
  --qwixx-blue: #1f5fbf;
  --cascadia-mountain: #5f6b7a;
  --cascadia-forest: #1e7a3e;
  --cascadia-prairie: #9a7a00;
  --cascadia-wetland: #1b7f6c;
  --cascadia-river: #1f62b8;
  --wonders-red: #c62828;
  --wonders-blue: #1f5fbf;
  --wonders-yellow: #a67c00;
  --wonders-purple: #7b3f99;
  --wonders-green: #1b7f3b;
}

[data-theme='contrast'] :is(.scorecard, .sheet-table) {
  --qwixx-red: #ff8080;
  --qwixx-yellow: #ffe066;
  --qwixx-green: #66ff99;
  --qwixx-blue: #80bfff;
  --cascadia-mountain: #d0d6e0;
  --cascadia-forest: #66ff99;
  --cascadia-prairie: #ffe066;
  --cascadia-wetland: #70ffe0;
  --cascadia-river: #80bfff;
  --wonders-red: #ff8080;
  --wonders-blue: #80bfff;
  --wonders-yellow: #ffe066;
  --wonders-purple: #e0b0ff;
  --wonders-green: #66ff99;
}

/* Paper is white whatever the theme, so a printed sheet takes the light colours. */
@media print {
  html[data-theme] .sheet-table {
    --qwixx-red: #c62828;
    --qwixx-yellow: #a67c00;
    --qwixx-green: #1b7f3b;
    --qwixx-blue: #1f5fbf;
    --cascadia-mountain: #5f6b7a;
    --cascadia-forest: #1e7a3e;
    --cascadia-prairie: #9a7a00;
    --cascadia-wetland: #1b7f6c;
    --cascadia-river: #1f62b8;
    --wonders-red: #c62828;
    --wonders-blue: #1f5fbf;
    --wonders-yellow: #a67c00;
    --wonders-purple: #7b3f99;
    --wonders-green: #1b7f3b;
  }
}

/* The game pages (gamePages.ts): the app's presets screen, as a web page. The fonts, tokens and the app's own
   preset cards (presets.css) come first. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: 600px;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.4;
}

@media (min-width: 600px) {
  body {
    padding-inline: 24px;
  }
}

/* Three setups across, as the app shows them on a wide screen. */
@media (min-width: 720px) {
  body:has(.preset-cards) {
    max-width: 960px;
  }
}

.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.muted {
  color: var(--chalk-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}

:focus-visible {
  outline: 3px solid var(--chalk);
  outline-offset: 3px;
}

h1 {
  margin: 20px 0 0;
  font-size: clamp(32px, 9vw, 44px);
  line-height: 1.1;
  text-wrap: balance;
}

/* What Turnabout is for this game, labelled under its name: "clock", "life counter and scorekeeper". */
.h1-tool {
  display: block;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 700;
  color: var(--chalk-muted);
}

/* The words are lower case, as they also sit mid-sentence; as a label they start with a capital. */
.h1-tool::first-letter {
  text-transform: uppercase;
}

h2.display {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.2;
}

.section-label {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--chalk-muted);
}

.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--chalk);
  color: var(--on-chalk);
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

/* The same buttons as the app. */
.btn {
  min-height: var(--target);
  padding: 0 20px;
  border-radius: 14px;
  border: 1.5px solid var(--button-edge);
  background: var(--tonal);
  color: var(--chalk);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.btn-primary {
  background: var(--chalk);
  border-color: var(--chalk);
  color: var(--on-chalk);
  font-weight: 800;
}

.btn-large {
  min-height: 56px;
  padding-inline: 28px;
  font-size: 18px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand {
  min-height: var(--target);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  text-decoration: none;
}

.brand img {
  border-radius: 9px;
}

.crumbs ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  color: var(--chalk-muted);
  font-size: 15px;
}

.crumbs li + li::before {
  content: '›';
  margin: 0 8px;
}

.crumbs a {
  color: var(--chalk-muted);
}

main {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Players and length, under the title as in the app. */
.facts {
  margin: -14px 0 0;
  font-size: 18px;
}

.aka {
  margin: -18px 0 0;
}

/* The app's preset cards, as links. */
a.preset-card {
  text-decoration: none;
}

.cta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

.source {
  margin: 0;
  font-size: 15px;
}

.related,
.jump ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.related a,
.jump a {
  min-height: var(--target);
  padding: 0 18px;
  border-radius: 999px;
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  text-decoration: none;
}

.related a:hover,
.jump a:hover {
  text-decoration: underline;
}

/* The A to Z. */
.jump a {
  min-width: var(--target);
  padding: 0;
  justify-content: center;
}

.letter {
  margin-top: 12px;
  font-size: 32px;
}

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

.games li {
  padding: 12px 0;
  border-bottom: 1.5px solid var(--outline);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.games a {
  align-self: flex-start;
  font-size: 19px;
  font-weight: 600;
}

.games .muted {
  font-size: 15px;
}

.site-footer {
  margin-top: 48px;
  padding-top: 12px;
  border-top: 1.5px solid var(--outline);
  color: var(--chalk-muted);
  font-size: 15px;
}

.footer-links {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 4px;
}

.footer-links a {
  min-height: var(--target);
  padding-right: 16px;
  display: inline-flex;
  align-items: center;
}

@media (forced-colors: active) {
  .btn,
  .preset-card,
  .related a,
  .jump a {
    border: 1px solid CanvasText;
  }
}

/* The printable score sheets (sheets.ts). On screen, the sheet as the app's Scorecard draws it; on paper, black
   lines on white across one side of A4 or US Letter. sheets.ts sizes the rows to the room this leaves. */
.rule {
  margin: -18px 0 0;
}

/* Room for a sheet's columns on a wide screen. */
@media (min-width: 720px) {
  body:has(.sheet-scroll) {
    max-width: 960px;
  }
}

/* A sheet wider than a phone scrolls inside itself, never the page, hidden player labels included. */
.sheet-scroll {
  position: relative;
  overflow-x: auto;
  border: 2px solid var(--outline);
  border-radius: var(--radius-card);
  background: var(--surface-1);
}

.sheet-table {
  width: 100%;
  min-width: calc(var(--across) * 3px);
  border-collapse: collapse;
  border-style: hidden;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}

.sheet-table th,
.sheet-table td {
  height: 44px;
  padding: 2px 8px;
  border: 1px solid var(--outline);
  font-size: 15px;
}

.sheet-table thead th {
  height: 64px;
  background: var(--surface-2);
}

.sheet-corner,
.sheet-table tbody th,
.sheet-table tfoot th {
  font-weight: 700;
  text-align: left;
}

.is-numbered tbody th {
  color: var(--chalk-muted);
  text-align: center;
}

/* The player's shape, as at the top of their column in the app, and a line to write their name on. */
.sheet-player {
  vertical-align: top;
}

.sheet-shape {
  width: 22px;
  height: 22px;
  display: block;
  margin: 4px auto 0;
}

.sheet-shape .pin-edge {
  fill: var(--pin-edge);
}

.sheet-name {
  display: block;
  height: 18px;
  margin: 4px 2px 0;
  border-bottom: 1.5px solid var(--outline-strong);
}

.sheet-table .sheet-subhead th {
  height: 28px;
  padding: 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--chalk-muted);
}

/* Where each player has more than one box, a heavier line between players. */
.is-split colgroup + colgroup {
  border-left: 2px solid var(--outline-strong);
}

.sheet-label {
  display: block;
}

.sheet-hint {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--chalk-muted);
}

/* A row's colour, as on the app's sheet, beside the label that also names it. */
.has-tone th {
  box-shadow: inset 6px 0 0 var(--tone);
  padding-left: 14px;
}

.sheet-section th {
  height: 32px;
  background: var(--surface-2);
  font-weight: 800;
}

.sheet-sum th,
.sheet-sum td {
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}

.sheet-total th,
.sheet-total td {
  border-top: 2px solid var(--chalk);
  font-weight: 800;
}

/* A box for a count rather than points, like Ticket to Ride's longest route, says what it counts. */
.is-count {
  background: var(--surface-2);
  text-align: right;
  vertical-align: bottom;
}

.sheet-unit {
  font-size: 12px;
  color: var(--chalk-muted);
}

/* What each count scores, like Qwixx's crosses. */
.sheet-key-scroll {
  overflow-x: auto;
}

.sheet-key {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.sheet-key th,
.sheet-key td {
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  border: 1px solid var(--outline);
  text-align: center;
}

.sheet-key th {
  text-align: left;
}

.sheet-mark {
  margin: -10px 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--chalk-muted);
  font-size: 15px;
  font-weight: 600;
}

.sheet-mark img {
  border-radius: 4px;
}

@media (forced-colors: active) {
  .sheet-scroll {
    border-color: CanvasText;
  }

  .has-tone th {
    box-shadow: none;
  }
}

@page {
  margin: 12mm;
}

@media print {
  /* Paper is white whatever the theme. */
  html[data-theme] {
    color-scheme: light;
    --ink: #ffffff;
    --surface-1: #ffffff;
    --surface-2: #ececec;
    --outline: #8a8a8a;
    --outline-strong: #000000;
    --chalk: #000000;
    --chalk-muted: #3d3d3d;
    --pin-edge: #000000;
  }

  html,
  body {
    background: #ffffff;
  }

  body {
    max-width: none;
    padding: 0;
    color: #000000;
    font-size: 10pt;
  }

  .skip,
  .site-header,
  .crumbs,
  .site-footer,
  .cta {
    display: none;
  }

  main {
    display: block;
  }

  h1 {
    margin: 0;
    font-size: 20pt;
  }

  h1 .h1-tool {
    display: inline;
    margin: 0 0 0 3mm;
    font-size: 11pt;
  }

  .facts,
  .rule {
    margin: 1.5mm 0 0;
    font-size: 10pt;
  }

  .sheet-scroll {
    margin-top: 4mm;
    overflow: visible;
    border: 1.5pt solid #000000;
    border-radius: 3mm;
    break-inside: avoid;
  }

  .sheet-table {
    min-width: 0;
  }

  .sheet-table th,
  .sheet-table td {
    height: var(--row);
    padding: 0 1.5mm;
    font-size: 9pt;
  }

  .sheet-table thead th {
    height: 16mm;
  }

  .sheet-table .sheet-subhead th {
    height: 6mm;
    padding: 0 0.5mm;
    font-size: 8pt;
  }

  .is-split colgroup + colgroup {
    border-left-width: 1.25pt;
  }

  .sheet-shape {
    width: 5mm;
    height: 5mm;
    margin-top: 1.5mm;
    print-color-adjust: exact;
  }

  .sheet-name {
    height: 5mm;
    margin: 1.5mm 0.5mm 0;
    border-bottom-width: 0.75pt;
  }

  .sheet-hint {
    font-size: 7pt;
  }

  .has-tone th {
    box-shadow: inset 2mm 0 0 var(--tone);
    padding-left: 3.5mm;
    print-color-adjust: exact;
  }

  .sheet-section th {
    height: 7mm;
  }

  .sheet-total th,
  .sheet-total td {
    height: 10mm;
    border-top: 1.5pt solid #000000;
  }

  .sheet-sum th,
  .sheet-sum td,
  .sheet-section th,
  .sheet-table thead th,
  .is-count {
    print-color-adjust: exact;
  }

  .sheet-unit {
    font-size: 7pt;
  }

  .sheet-key-scroll {
    overflow: visible;
  }

  .sheet-key {
    margin-top: 3mm;
    break-inside: avoid;
  }

  .sheet-key th,
  .sheet-key td {
    min-width: 0;
    width: 9mm;
    height: 6mm;
    font-size: 8pt;
  }

  .sheet-mark {
    margin: 2mm 0 0;
    font-size: 8pt;
  }

  .sheet-mark img {
    width: 4mm;
    height: 4mm;
  }
}