/* 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 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;
  }
}