:root {
  --shadow-card: 4px 4px 0 rgba(42, 24, 16, 0.85); /* one offset shadow per card (DESIGN.md, « Couleurs ») */
  --cover: #3a1d12; /* dark hardwood: the cover of this volume (dark hardwood on pantheonfoot.com) */
  --cover-deep: #27130b;
  --paper: #f1e4c8;
  --paper-shade: #e2d1ae;
  --card: #fffdf6;
  --ink: #2a1810;
  --ink-soft: #6b6754;
  --red: #cf3a25;
  --red-strong: #b3301d; /* wrong or lost, behind light text and for small red text on the paper: 5:1 */
  --orange: #e0641c; /* ball orange: the site's own color (logo, marks), what the red is on pantheonfoot.com; never for « wrong » */
  --orange-strong: #a3430b; /* the main action (.primary) and small orange text: 4.9:1 on the paper */
  --gold: #d8a323;
  --green: #147a4d;
  --rule: #c9b78f;
  --sand: #b8ad92; /* secondary text on the dark hardwood (--cover): 6.9:1 */
  --gold-soft: #f6e9c4; /* a pale gold behind ink text (14:1): hints given, loans */
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  background: var(--cover); /* plain: no stripes nor gradient (DESIGN.md, « Couleurs ») */
  min-height: 100vh;
}

.masthead {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 20px;
  border-bottom: 3px solid var(--gold);
  background: var(--cover-deep);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--paper);
}

.logo-mark {
  display: block;
  width: 44px;
  height: 44px;
  flex: none;
}

.logo-words strong {
  display: block;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.logo-words small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-wrap: balance; /* on two even lines when the six games leave it little room */
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 3px;
}

.tabs {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.tab {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 14px;
  border: 2px solid rgba(241, 228, 200, 0.35);
  background: transparent;
  color: rgba(241, 228, 200, 0.75);
  cursor: pointer;
}

.tab:hover {
  color: var(--paper);
  border-color: var(--paper);
}

.tab.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--cover-deep);
}

.score {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  min-width: 78px;
  text-align: right;
}

.page {
  max-width: 680px;
  margin: 26px auto 60px;
  padding: 26px 22px 34px;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(42, 24, 16, 0.05) 1px, transparent 1px);
  background-size: 4px 4px;
  border: 1px solid var(--rule);
  box-shadow: 0 22px 0 -10px rgba(0, 0, 0, 0.25), 0 30px 60px rgba(0, 0, 0, 0.45);
}

.page-head {
  text-align: center;
  border-bottom: 3px double var(--rule);
  padding-bottom: 14px;
  margin-bottom: 18px;
}

.page-head h1,
.page-head .page-title {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 34px;
  margin: 0;
}

.page-sub {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.slots {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
}

.slot {
  flex: 1 1 0;
  min-width: 0;
  max-width: 106px;
  height: 58px;
  border: 2px dashed var(--rule);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4px 3px;
  font-size: 11px;
  line-height: 1.1;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.35);
  position: relative;
}

.slot em {
  font-style: normal;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 20px;
  opacity: 0.55; /* faint like an empty box, still readable (3.5:1) */
}

.slot--current {
  border-style: solid;
  border-color: var(--orange);
  box-shadow: inset 0 0 0 3px rgba(224, 100, 28, 0.15);
}

.slot--solved,
.slot--failed {
  border: 2px solid var(--ink);
  white-space: nowrap;
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transform: rotate(-1.5deg);
  box-shadow: 2px 3px 0 rgba(42, 24, 16, 0.5);
}

.slot--solved {
  background: linear-gradient(118deg, #ffe9a8 0%, #fff8e2 26%, #f6d97a 45%, #fffdf6 62%, #ffe9a8 100%);
}

.slot--failed {
  background: repeating-linear-gradient(
    45deg,
    #ded2b8 0 6px,
    #d3c5a6 6px 12px
  );
  color: rgba(42, 24, 16, 0.5);
  text-decoration: line-through;
}

.sticker,
.summary-recap {
  background: var(--card);
  border: 2px solid var(--ink);
  padding: 22px;
  position: relative;
  box-shadow: var(--shadow-card);
}

.sticker-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 16px;
}

.badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--paper);
  background: var(--ink); /* one red per screen, the main action's (DESIGN.md, « Couleurs ») */
  padding: 5px 10px;
  line-height: 1.35;
}

.serial {
  white-space: nowrap;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.chrono {
  text-align: center;
  margin: 0 0 14px;
  line-height: 1;
}

.chrono-bug {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: 'Anton', Impact, sans-serif;
  text-transform: uppercase;
}

.chrono-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  background: var(--gold);
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.14em;
}

.chrono-label::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.is-running .chrono-label::before {
  animation: chrono-pulse 1s steps(2, jump-none) infinite;
}

.is-stopped .chrono-label::before {
  background: var(--ink);
}

.chrono-time {
  min-width: 3.2em;
  padding: 6px 12px 5px;
  background: var(--ink);
  color: var(--paper);
  font-size: 24px;
  letter-spacing: 0.08em;
  text-align: center;
}

@keyframes chrono-pulse {
  from { opacity: 1; }
  to { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .is-running .chrono-label::before {
    animation: none;
  }
}

.start {
  text-align: center;
}

.start-note {
  margin: 22px auto 0;
  max-width: 34em;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-soft);
}

.start-title {
  margin: 8px 0 0;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* The sheet in three figures, like the back of a sticker: big figure in Anton, caption under it. */
.start-facts {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 16px auto 24px;
  padding: 0;
  list-style: none;
}

.start-facts li {
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 118px;
  padding: 4px 18px;
}

.start-facts li + li {
  border-left: 2px solid var(--rule);
}

/* One height for the three figures, the clock emoji included, so the captions line up below. */
.start-facts b {
  display: grid;
  place-items: center;
  height: 38px;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1;
  color: var(--orange-strong);
}

.start-facts li:last-child b {
  font-size: 28px;
}

.start-facts span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.start-go {
  font-size: 22px;
  padding: 14px 30px;
}

@media (max-width: 560px) {
  .start-facts li {
    min-width: 0;
    padding: 4px 10px;
  }

  .start-facts span {
    font-size: 10px; /* at least 10 px (audit of 22 October 2026) */
    letter-spacing: 0.08em;
  }
}

.record {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 27px;
  line-height: 1.18;
  letter-spacing: 0.005em;
  margin: 0 0 20px;
}

.guesses {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 7px;
}

/* A guess read against the answer: the name, then country, position and era in three columns,
   under their titles (.guess-head). */
.guess-row,
.guess-head {
  display: grid;
  grid-template-columns: minmax(64px, 0.8fr) repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
}

/* Every cell the same size, whatever it holds (one line, or a value with its reason). */
.guess-row .chip {
  align-self: stretch;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.guess-row {
  padding: 7px 10px;
  background: #fdf3d4;
  border-left: 4px solid var(--rule);
}

.guess-head {
  margin: 0 0 6px;
  padding: 0 10px 0 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

.guess-head-title {
  grid-column: 1 / -1;
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
}

.guess-name {
  font-weight: 700;
  font-size: 14px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.chip {
  font-size: 12px;
  line-height: 1.3;
  padding: 4px 6px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink-soft);
  text-align: center;
  min-width: 0;
  overflow-wrap: anywhere;
}

.chip small {
  display: block;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.chip s {
  text-decoration-color: var(--red);
  text-decoration-thickness: 1.5px;
}

.chip--exact {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.chip--close {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* Wrong: the red of the charter behind light text (--red-strong, 5:1), a white ✘, like the green ✓. */
.chip--wrong {
  background: var(--red-strong);
  border-color: var(--red-strong);
  color: #fff;
}

@media (max-width: 420px) {
  .guess-row,
  .guess-head {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .guess-name {
    grid-column: 1 / -1;
  }

  /* Narrower cells: room for a long country on two lines and its reason (République dominicaine). */
  .guess-row .chip {
    min-height: 68px;
  }

  .guess-head-name {
    display: none;
  }
}

.guess {
  display: flex;
  gap: 8px;
}

.combo {
  position: relative;
  flex: 1;
}

#guess {
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 13px 14px;
  border: 2px solid var(--ink);
  background: #fffdf6;
  color: var(--ink);
}

#guess::placeholder {
  color: rgba(42, 24, 16, 0.62); /* 4.6:1 on the card (0.4 was 2.4:1) */
}

#guess:focus {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.suggestions {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--card);
  border: 2px solid var(--ink);
  z-index: 10;
  max-height: 258px;
  overflow-y: auto;
  box-shadow: 5px 6px 0 rgba(42, 24, 16, 0.75);
}

.suggestion {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid rgba(42, 24, 16, 0.12);
  font-weight: 600;
}

.suggestion:last-child {
  border-bottom: 0;
}

.suggestion small {
  color: var(--ink-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 400;
}

.suggestion.is-active {
  background: var(--gold);
}

/* Hover with a mouse only: on a phone it stays on the last name touched, which then reads as chosen
   when the list is drawn again (audit of 22 October 2026). Same for the buttons and the cards below. */
@media (hover: hover) {
  .suggestion:hover {
    background: var(--gold);
  }
}

/* Two kinds of buttons, one height: side by side, the main action and the secondary one line up. */
.primary,
.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 46px;
  box-sizing: border-box;
  text-align: center;
}

.primary {
  font: inherit;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 17px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 22px;
  border: 2px solid var(--ink);
  background: var(--orange-strong);
  color: var(--paper);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}

@media (hover: hover) {
  .primary:hover {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--ink);
  }
}

.primary:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

/* Secondary: a paper sticker, ink outline and a small offset shadow (the orange button keeps the lead). */
.ghost {
  font: inherit;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 18px;
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
}

@media (hover: hover) {
  .ghost:hover:not(:disabled) {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--ink);
  }
}

.ghost:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--ink);
}

/* One look for a button that cannot be used yet, in every game (« Retirer le dernier » of Le Lien looked active). */
.ghost:disabled {
  opacity: 0.4;
  cursor: default;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.lives {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.feedback {
  margin: 18px 0 0;
  font-size: 16px;
  font-weight: 600;
  min-height: 22px;
}

.feedback--good {
  color: var(--green);
}

.feedback--bad {
  color: var(--red);
}

.feedback--warn {
  color: #7a5500; /* 5.3:1 on the paper (#9a6b00 was 3.7:1) */
}

.next {
  margin-top: 14px;
}

.recap {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 0;
}

.recap li {
  font-size: 14px;
  line-height: 1.45;
  padding: 11px 2px;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
}

.recap li:last-child {
  border-bottom: 1px solid var(--rule);
}

.recap .mark {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 17px;
  line-height: 1.3;
}

.recap .mark--ok {
  color: var(--green);
}

.recap .mark--ko {
  color: var(--red);
}

.recap strong {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.stats {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 16px 0 0;
}

@media (max-width: 560px) {
  .masthead {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
  }

  .logo-words small {
    display: none;
  }

  .tabs {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .tab {
    flex: 1;
    text-align: center;
    min-height: 44px;
    padding: 9px 6px;
  }

  .score {
    margin-left: auto;
  }

  .page {
    margin: 12px auto 40px;
    padding: 20px 15px 26px; /* with its 1px border, 16px from the screen edge */
  }

  .page-head h1 {
    font-size: 27px;
  }

  .record {
    font-size: 22px;
  }

  .slots {
    gap: 6px;
  }

  .slot {
    height: 52px;
    font-size: 10px;
  }

  .guess {
    flex-direction: column;
  }

  .row {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .lives {
    flex: 1 1 100%;
    letter-spacing: 0.06em;
  }
}

.langs {
  display: flex;
  border: 2px solid rgba(241, 228, 200, 0.35);
}

.lang {
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  color: rgba(241, 228, 200, 0.7);
  cursor: pointer;
}

.lang:hover {
  color: var(--paper);
}

.lang.is-active {
  background: var(--paper);
  color: var(--cover-deep);
}

.help-button {
  font: inherit;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 15px;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(241, 228, 200, 0.35);
  background: transparent;
  color: rgba(241, 228, 200, 0.75);
  cursor: pointer;
  line-height: 1;
}

.help-button:hover {
  color: var(--paper);
  border-color: var(--paper);
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 14, 8, 0.82);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 40;
  overflow-y: auto;
}

.overlay[hidden] {
  display: none;
}

.rules-card {
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 7px 8px 0 var(--gold);
  padding: 26px 24px;
  max-width: 480px;
  width: 100%;
}

.rules-card h2 {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 18px;
  border-bottom: 3px double var(--rule);
  padding-bottom: 12px;
}

.rules-list {
  list-style: none;
  counter-reset: rule;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 16px;
}

.rules-list li {
  counter-increment: rule;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
}

.rules-list li::before {
  content: counter(rule);
  font-family: 'Anton', Impact, sans-serif;
  font-size: 19px;
  color: var(--paper);
  background: var(--orange);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  transform: rotate(-3deg);
}

.rules-list strong {
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.rules-card .primary {
  width: 100%;
}

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

/* Gold on the dark hardwood (7:1), ink on the paper and the cards: gold there was 1.8:1, under the 3:1 a
   focus ring needs (WCAG 1.4.11; audit of 22 October 2026). The dark-hardwood bands inside a page keep gold. */
.page :focus-visible,
.overlay :focus-visible {
  outline-color: var(--ink);
}

.page .end-next :focus-visible,
.overlay .end-next :focus-visible {
  outline-color: var(--gold);
}

.masthead :focus-visible {
  outline-color: var(--paper);
}

.sticker.is-good {
  border-color: var(--green);
  box-shadow: 6px 7px 0 var(--green);
  animation: verdict 0.3s ease-out;
}

.sticker.is-bad {
  border-color: var(--red);
  box-shadow: 6px 7px 0 var(--red);
  animation: verdict 0.3s ease-out;
}

@keyframes verdict {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.015);
  }
  100% {
    transform: scale(1);
  }
}

.feedback {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
}

.verdict-mark {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 22px;
  line-height: 1;
}

.feedback--good .verdict-mark,
.feedback--bad .verdict-mark {
  color: var(--paper);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex: none;
  transform: rotate(-3deg);
}

.feedback--good .verdict-mark {
  background: var(--green);
}

.feedback--bad .verdict-mark {
  background: var(--red);
}

.feedback .next {
  flex: 1 1 100%;
}

/* The message stays beside its mark, on as many lines as it needs. */
.feedback > .verdict-mark + span {
  flex: 1 1 0;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sticker.is-good,
  .sticker.is-bad {
    animation: none;
  }
}

/* Phone (DESIGN.md, « Saisie »): the five questions on one line, so that the question and the
   field show without scrolling; a name found shrinks to fit its box (fitSlotNames, src/main.js). */
@media (max-width: 560px) {
  .slots {
    flex-wrap: nowrap;
    margin-bottom: 12px;
  }

  .slot {
    flex: 1 1 0;
    max-width: none;
    height: 44px;
    font-size: 10px;
  }

  .slot em {
    font-size: 18px;
  }

  .chrono {
    margin-bottom: 10px;
  }
}

.help-button--wide {
  width: auto;
  padding: 0 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stats-card {
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 7px 8px 0 var(--gold);
  padding: 26px 24px;
  max-width: 480px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

.stats-card h2 {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 18px;
  border-bottom: 3px double var(--rule);
  padding-bottom: 12px;
}

.stats-card h3 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 22px 0 10px;
}

.figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  text-align: center;
}

.figure strong {
  display: block;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
}

.figure span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}

.bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.bars li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bars .note {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 15px;
  width: 14px;
  flex: none;
}

.bars .bar {
  background: var(--rule);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 7px;
  text-align: right;
  min-height: 22px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.bars .bar--last {
  background: var(--gold);
}

.history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.history li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
}

.time-mini {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.stats-best-time {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 12px 0 0;
}

.grid-mini {
  letter-spacing: 2px;
  font-size: 13px;
}

.grid-mini--words {
  letter-spacing: 0;
  color: var(--ink-soft);
}

.stats-empty,
.stats-note {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 18px 0 0;
}

.stats-card .primary {
  width: 100%;
  margin-top: 20px;
}

.rule-demo {
  display: block;
  margin: 10px 0 8px;
}

.rule-demo .guess-row {
  border-left-color: var(--gold);
}

.rule-read {
  display: block;
  font-size: 13px;
  color: var(--ink-soft);
}

.rule-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}

.rule-key {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.key-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--rule);
}

.key-dot--exact { background: var(--green); border-color: var(--green); }
.key-dot--close { background: var(--gold); border-color: var(--gold); }
.key-dot--wrong { background: var(--card); }

.flag {
  margin-left: auto;
  white-space: nowrap;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 0 2px 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.flag:hover {
  color: var(--orange);
}

#report-form {
  display: grid;
  gap: 6px;
}

/* Turnstile's widget (src/contact.js): empty, and so without room, unless Cloudflare asks for a click. */
.report-human:not(:empty) {
  margin: 0 0 12px;
}

.report-quote {
  margin: 0 0 12px;
  padding: 9px 11px;
  background: #fdf3d4;
  border-left: 4px solid var(--gold);
  font-size: 13px;
  line-height: 1.5;
}

.report-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 6px;
}

#report-subject,
#report-message,
#report-email {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 16px; /* below 16 px, the iPhone zooms into the page when the field gets the focus */
  padding: 9px 11px;
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
}

#report-message {
  resize: vertical;
}

#report-submit {
  margin-top: 12px;
}

.report-done {
  margin: 0;
  padding: 12px;
  background: #e8f3ec;
  border-left: 4px solid var(--green);
  font-weight: 700;
}

#report-close {
  margin-top: 10px;
  width: 100%;
}

.site-foot {
  padding: 26px 16px 40px;
  text-align: center;
}

.foot-link {
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-shade);
  cursor: pointer;
  padding: 6px 10px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.foot-link:hover {
  color: var(--gold);
}

/* The notice, on its own line under the links, then the release (DESIGN.md, pied de page). */
.foot-copy {
  display: block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--paper-shade);
}

/* The release online (tools/release.sh, written at build): small, on its own line under the links. */
.foot-version {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--paper-shade);
}

.ad-slot:empty {
  display: none;
}

.ad-slot {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  min-height: 100px;
}

.ad-label {
  margin: 0 0 6px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-soft);
}

.legal {
  margin-bottom: 60px;
}

.legal a {
  color: var(--gold);
}

.legal .legal-part {
  margin-top: 40px;
}

.legal-langs,
.legal-date,
.legal-back {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--paper-shade);
}

.legal-langs {
  margin-top: 24px;
}

.page-title {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 34px;
  margin: 0;
}

.about {
  max-width: 660px;
  margin: 34px auto 0;
  padding: 0 20px;
  color: var(--paper-shade);
}

.about-title {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 22px;
  color: var(--paper);
  margin: 0 0 12px;
}

.about h3 {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 24px 0 8px;
}

.about p,
.about li {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 10px;
}

.about ul {
  margin: 0;
  padding-left: 18px;
}

.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding: 14px 20px;
  background: var(--cover-deep);
  border-top: 3px solid var(--gold);
}

.consent-text {
  margin: 0;
  flex: 1 1 320px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--paper);
}

.consent-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.consent-actions button {
  flex: 1 1 auto;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .consent-actions {
    width: 100%;
  }
}

.consent-actions .ghost,
.consent-actions .primary {
  min-width: 118px;
  padding: 10px 18px;
  font-size: 14px;
}

.consent-actions .ghost {
  color: var(--paper);
  border: 2px solid var(--paper);
  background: none;
  box-shadow: none;
}

.consent-actions .ghost:hover {
  background: var(--paper);
  color: var(--cover-deep);
  transform: none;
  box-shadow: none;
}

.consent[hidden],
.foot-link[hidden],
.guess-head[hidden],
.guess[hidden],
.row[hidden],
.report-quote[hidden],
#report-form[hidden],
.report-done[hidden],
.about-inner[hidden] {
  display: none;
}

/* Le Quiz stats: the players found so far, each with the fact that first found him. */
.found-count {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink-soft);
}

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
  max-height: 46vh;
  overflow-y: auto;
}

.card {
  width: 100%;
  height: 100%;
  font: inherit;
  color: var(--ink);
  text-align: left;
  min-height: 62px;
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  border: 2px solid var(--ink);
  background: linear-gradient(135deg, #f7e6a8 0%, #fff8dc 45%, #e3c96a 100%);
  box-shadow: 2px 2px 0 var(--ink);
}

button.card {
  cursor: pointer;
}

button.card[aria-pressed='true'] {
  outline: 3px solid var(--orange);
  outline-offset: 1px;
}

.cards li {
  list-style: none;
}

.found-fact {
  min-height: 2.9em;
  margin: 0 0 10px;
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.45;
  background: #fff6d6;
  border-left: 3px solid var(--gold);
}


.card-name {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.25;
}

.card-meta {
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Accueil : les jeux présentés comme les vignettes d'une page d'album */

.home-langs {
  margin-left: auto;
}

.page-sub::first-letter {
  text-transform: uppercase;
}

.games {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
}

.game {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 18px 20px;
  color: var(--ink);
  text-decoration: none;
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
  .game:hover {
    transform: translate(-2px, -3px) rotate(-0.4deg);
    box-shadow: 6px 6px 0 rgba(42, 24, 16, 0.85);
  }
}

.game .sticker-top {
  margin-bottom: 14px;
}

.badge--gold {
  background: var(--gold);
  color: var(--cover-deep);
  transform: rotate(1deg);
}

/* A game still in beta (DESIGN.md, "Bêta"): a small gold tag after its name, on the home card and in
   the page title. */
.beta-tag {
  display: inline-block;
  vertical-align: 0.35em;
  margin-left: 0.2em;
  padding: 4px 7px 3px;
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cover-deep);
  background: var(--gold);
  transform: rotate(-2deg);
}

.game-art {
  display: grid;
  place-items: center;
  height: 118px;
  margin-bottom: 14px;
  border: 2px solid var(--ink);
  overflow: hidden;
}

.game-name {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

.game-pitch {
  margin: 6px 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  flex: 1;
}

/* The status of a game, a pill (DESIGN.md, « Accueil ») : to play, in progress (gold), done (green). */
.game-status {
  align-self: flex-start;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.game-status.is-done {
  background: var(--green);
  border-color: var(--green);
  color: var(--card);
}

.game-status.is-started {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

/* The whole card is the link: no Play button, no numbered corner. */
.game .sticker-top,
.game-go {
  display: none;
}

/* The short label in the pill, phone and computer alike (« À jouer », « En cours », « ✓ 4/5 »); the
   long one stays for screen readers. */
.status-long {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.status-short {
  white-space: nowrap;
}

.game-go {
  align-self: flex-start;
}

/* Phone (DESIGN.md, « Accueil »): one game a line, the six on one screen. The drawing shrinks
   to a 56 px thumbnail (its small drawing, src/game-art.js), the name and the pitch in the middle, the
   status on the right; the whole line is the link, so the Play button and the corner go. */
@media (max-width: 560px) {
  .games {
    gap: 8px;
  }

  .game {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: 'art name status' 'art pitch pitch';
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    padding: 12px;
    box-shadow: 4px 4px 0 rgba(42, 24, 16, 0.85);
  }

  .game-art {
    grid-area: art;
    width: 56px;
    height: 56px;
    margin: 0;
  }

  .games .game .game-name {
    grid-area: name;
    align-self: center;
    font-size: clamp(15px, 4.9vw, 20px); /* « LOS GOLEADORES » down to 320 px */
  }

  /* The whole sentence, on as many lines as it needs: never cut. */
  .game-pitch {
    grid-area: pitch;
    align-self: start;
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
  }

  .game-status {
    grid-area: status;
    margin: 0;
    align-self: center;
    padding: 3px 9px;
    font-size: 12px;
    max-width: 104px;
    text-align: center;
  }

}

.games {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.games .game-name {
  font-size: 25px;
}




/* Quatre jeux : deux vignettes par ligne sur ordinateur */
.games {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ————————————————————————————————————————————————
   Navigation et mise en page communes à toutes les pages
   ———————————————————————————————————————————————— */

:root {
  --page-width: 760px;
}

@media (min-width: 1280px) {
  :root {
    --page-width: 920px;
  }
}

.masthead {
  gap: 16px 24px;
}

/* The games menu (DESIGN.md, « Structure d'une page de jeu », 1): one button, ≡ « Jeux », at the left
   of the masthead, on computers and phones alike; it opens a drawer from the left (src/menu.js). */
.nav-toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px 0 12px;
  border: 2px solid rgba(241, 228, 200, 0.35);
  background: transparent;
  color: var(--paper);
  font-family: 'Anton', Impact, sans-serif;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.nav-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
}

.nav-toggle-icon {
  position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-toggle-icon::before {
  top: -6px;
}

.nav-toggle-icon::after {
  top: 6px;
}

.masthead .langs {
  margin-left: auto;
}

/* The drawer: the dark hardwood of the masthead, a gold edge, over a darkened page. */
.games-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 50; /* above the dialogs (40), under the consent banner (60) */
  width: min(400px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 24px;
  background: var(--cover-deep);
  border-right: 3px solid var(--gold);
  box-shadow: 12px 0 32px rgba(0, 0, 0, 0.4);
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform 0.25s ease-out, visibility 0s linear 0.25s;
}

.masthead.is-open .games-nav {
  transform: none;
  visibility: visible;
  transition: transform 0.25s ease-out;
}

.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(30, 14, 8, 0.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0s linear 0.25s;
}

.masthead.is-open .menu-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s;
}

html.has-menu {
  overflow: hidden;
}

.menu-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 0 8px 0 20px;
  background: var(--cover-deep);
  border-bottom: 3px solid var(--gold);
}

.menu-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.menu-close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--paper);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

.menu-close:hover {
  color: var(--gold);
}

/* One line per game: its drawing (44 px, as on the end card), its name in Anton, its pitch, ✓ in a
   green disc once played today; the game on screen in gold, with a gold bar on the left. */
.menu-game {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas: 'art name done' 'art pitch done';
  align-items: center;
  column-gap: 14px;
  row-gap: 3px;
  padding: 12px 16px 12px 20px;
  border-top: 1px solid rgba(241, 228, 200, 0.08);
  text-decoration: none;
  color: var(--paper);
  transition: background 0.15s;
}

.menu-head + .menu-game {
  border-top: 0;
}

.menu-game::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  background: var(--gold);
  transform: scaleY(0);
  transition: transform 0.2s ease-out;
}

.menu-game:hover,
.menu-game:focus-visible {
  background: rgba(241, 228, 200, 0.06);
}

.masthead .menu-game:focus-visible {
  outline-offset: -3px;
}

.menu-game:hover::before,
.menu-game:focus-visible::before {
  transform: scaleY(0.6);
  opacity: 0.6;
}

.menu-game.is-active {
  background: rgba(216, 163, 35, 0.12);
}

.menu-game.is-active::before {
  transform: scaleY(1);
  opacity: 1;
}

.menu-name {
  grid-area: name;
  align-self: end;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 19px;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.menu-game.is-active .menu-name {
  color: var(--gold);
}

.menu-pitch {
  grid-area: pitch;
  align-self: start;
  font-size: 13px;
  line-height: 1.35;
  color: var(--sand);
}

.menu-done {
  grid-area: done;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: var(--card);
  font-size: 14px;
  font-weight: 800;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle,
  .games-nav,
  .masthead.is-open .games-nav,
  .menu-backdrop,
  .masthead.is-open .menu-backdrop,
  .menu-game,
  .menu-game::before {
    transition: none;
  }

  /* The bounce of a row or a box just added, in every game. */
  .is-new {
    animation: none;
  }
}

/* la barre de chaque jeu : les modes à gauche, les outils à droite, alignés sur la page */
.gamebar {
  max-width: var(--page-width);
  margin: 18px auto 0;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.gamebar .tabs {
  margin-left: 0;
}

.gamebar-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.gamebar .score {
  min-width: 0;
  margin-right: 6px;
}

.gamebar .score:empty {
  display: none;
}

.page {
  max-width: var(--page-width);
}

.gamebar + .page {
  margin-top: 12px;
}

.about {
  max-width: var(--page-width);
}

/* l'accueil prend toute la largeur utile : trois jeux par ligne sur grand écran, comme sur le foot ;
   en dessous, ils se rangent seuls (.games, auto-fit) ; une ligne chacun sur téléphone (plus bas) */
.page.home {
  max-width: min(1180px, calc(100% - 40px));
}

@media (min-width: 1100px) {
  .page.home .games {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .masthead {
    flex-wrap: nowrap;
    padding: 12px 14px 10px;
  }

  .masthead .logo-words small {
    display: none;
  }

  .langs {
    margin-left: auto;
  }

  /* Sur tous les téléphones, chaque langue est une cible de 44 px. */
  .lang {
    min-width: 44px;
    min-height: 44px;
    padding: 0 4px;
  }

  /* Only the current language, until a tap unfolds the three (src/menu.js). */
  .langs:not(.is-open):has(.is-active) .lang:not(.is-active) {
    display: none;
  }

  .langs:not(.is-open) .lang.is-active::after {
    content: ' ▾';
  }

  .gamebar {
    margin: 12px 14px 0;
  }

  .page.home {
    max-width: none;
  }
}

/* Petits téléphones (320 à 400 px) : l'en-tête se resserre pour que le logo, les trois langues et le burger
   (cibles de 44 px, voir plus haut) tiennent sur une ligne sans défilement horizontal. */
@media (max-width: 400px) {
  .masthead {
    gap: 6px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .logo {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 44px;
    gap: 6px;
  }

  .logo-mark {
    width: 30px;
    height: 30px;
  }

  .logo-words {
    min-width: 0;
    overflow: hidden;
  }

  .logo-words strong {
    font-size: 15px;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .langs {
    flex: none;
  }
}

/* La barre de jeu garde son ordre sur téléphone : les modes d'abord, les outils ensuite */
.gamebar .tabs {
  order: 0;
  width: auto;
  flex: 0 1 auto;
}

@media (max-width: 560px) {
  .gamebar .tabs {
    flex: 1 1 auto;
  }
}

.nowrap {
  white-space: nowrap;
}

/* Consentement : une fenêtre au milieu de l'écran, impossible à manquer.
   « Refuser » et « Accepter » ont exactement la même taille et le même style (exigence de la CNIL). */
.consent {
  top: 50%;
  bottom: auto;
  left: 50%;
  right: auto;
  width: min(460px, calc(100% - 32px));
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  padding: 26px 24px 22px;
  background: var(--cover-deep);
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 100vmax rgba(30, 14, 8, 0.72), 8px 9px 0 rgba(0, 0, 0, 0.35);
  z-index: 60;
}

.consent-text {
  flex: none;
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

.consent-actions {
  width: 100%;
  gap: 12px;
}

.consent-actions .ghost,
.consent-actions .primary {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 10px;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cover-deep);
  background: var(--paper);
  border: 2px solid var(--paper);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
  transform: none;
}

.consent-actions .ghost:hover,
.consent-actions .primary:hover {
  color: var(--cover-deep);
  background: var(--gold);
  border-color: var(--gold);
}

.consent-actions .ghost:hover {
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
}

/* Quand un jeu ne se charge pas : la cause, quoi faire, et les autres jeux en attendant */
.failure {
  padding: 26px 12px 18px;
  text-align: center;
}

.failure-title {
  margin: 0 0 8px;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 24px;
  text-transform: uppercase;
  color: var(--red);
}

.failure-text {
  max-width: 460px;
  margin: 0 auto 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.failure-others {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.failure-others a {
  color: var(--ink);
  font-weight: 700;
}

/* Previous days of Le Onze and Les Buteurs (src/archive.js): a column of the album's index. */
.archive {
  margin-top: 28px;
}

.archive h2 {
  margin: 0 0 10px;
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.archive-back {
  margin: 0 0 10px;
  font-size: 14px;
}

.archive-back a {
  color: var(--orange-strong);
  font-weight: 700;
}

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

.archive-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 9px 12px;
  background: var(--card);
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
}

.archive-list a:hover,
.archive-list a:focus-visible {
  border-color: var(--ink);
}

.archive-list .is-current a {
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(42, 24, 16, 0.6);
}

.archive-number {
  font-weight: 700;
  font-size: 14px;
}

.archive-date {
  grid-column: 1;
  font-size: 12px;
  color: var(--ink-soft);
}

.archive-status {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
}

.archive-status.is-done {
  color: var(--green);
  font-weight: 700;
}

/* A link dressed as the main button ("Play today's career"). */
a.primary {
  text-decoration: none;
}

/* Le Quiz: "See the career path" under the answer, towards Le Parcours. */
.career-link {
  flex: 1 1 100%;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  text-decoration-color: var(--orange);
  text-underline-offset: 3px;
}

/* Home: the streak shared by the four games, a strip of the album's paper. */
.home-streak {
  margin: 0 0 18px;
  padding: 8px 14px;
  border: 1px dashed var(--rule);
  background: rgba(255, 253, 246, 0.6);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
}

.home-streak.is-alive {
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  box-shadow: 3px 3px 0 rgba(42, 24, 16, 0.6);
}

/* The end-of-game card shared by the four games (src/end-card.js). */
.end-card {
  position: relative;
  margin-bottom: 22px;
  padding: 16px 18px 18px;
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-card);
  text-align: center;
  animation: end-appear 0.4s ease-out;
}

/* It spans the page: it slides in without growing, so it never overflows. */
@keyframes end-appear {
  from { transform: translateY(8px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .end-card {
    animation: none;
  }
}

.end-card .sticker-top {
  text-align: left;
}

.end-verdict {
  margin: 10px 0 0;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 40px;
  line-height: 1.05;
  text-transform: uppercase;
}

/* The time of a timed game, as large as the score it belongs to. */
.end-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 18px;
  padding-left: 18px;
  border-left: 2px solid var(--rule);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.end-time span {
  font-size: 0.6em;
}

.end-card.is-won .end-verdict {
  color: var(--green);
}

.end-card.is-lost .end-verdict {
  color: var(--red-strong);
}

/* The one answer of the game (Le Parcours, Le Joueur mystère), found or not: in a dark hardwood band
   with a gold rule, like the bands of the boards, the name in gold, large. */
.end-answer {
  margin: 14px 0 0;
  padding: 12px 16px 14px;
  background: var(--cover);
  border-bottom: 4px solid var(--gold);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.end-answer span {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--sand);
}

.end-answer strong {
  display: block;
  margin-top: 10px;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 38px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gold);
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .end-answer strong {
    font-size: 30px;
  }
}

.end-score {
  margin: 6px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

/* The result in words, one box per count: never the emoji grid, which only shows in the share. */
.end-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  max-width: 420px;
  margin: 14px auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.end-stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  background: var(--paper-shade);
  color: var(--ink);
}

.end-stats li.is-good {
  background: var(--green);
  color: var(--card);
}

.end-stats b {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
}

.end-stats span {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
}

/* The narrowest phones (320 px): each box as wide as its longest word, the others share the rest
   (« titulares encontrados » in Spanish no longer runs out of its box). */
@media (max-width: 360px) {
  .end-stats {
    display: flex;
  }

  .end-stats li {
    flex: 1 1 0;
  }
}

/* What the Share button copies, as the friends will read it (in the share sheet, src/share.js). */
.end-share-label {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.end-share-text {
  margin: 0;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.end-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
}

a.ghost {
  text-decoration: none;
}

.end-streak {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}

.end-streak.is-alive {
  color: var(--ink);
}

.end-next {
  margin: 12px 0 0;
}

.end-next h2 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.end-next ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 6px;
}

.end-next a {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  height: 100%;
  padding: 8px 4px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}

.end-next a:hover,
.end-next a:focus-visible {
  border-color: var(--ink);
}

.end-next strong {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.end-countdown {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}

.end-countdown b {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.end-countdown a {
  position: relative;
  z-index: 1;
  color: var(--orange-strong);
  font-weight: 700;
}

@media (max-width: 420px) {
  .end-verdict {
    font-size: 32px;
  }
}






/* ---------- Album page and stickers, shared by La Grille and Le Lien (DESIGN.md, « Vignettes ») ---------- */

/* The board as an album page: dotted paper, its page number in the corner. */
.album-page {
  position: relative;
  padding: 22px 20px 24px;
  background:
    radial-gradient(circle at 1px 1px, rgba(42, 24, 16, 0.07) 1px, transparent 1.5px) 0 0 / 9px 9px,
    var(--card);
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-card);
}

.album-page[data-page]::before {
  content: attr(data-page);
  text-transform: uppercase;
  position: absolute;
  top: 8px;
  right: 12px;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--rule);
}

/* A sticker: white frame, gold foil, name in Anton, red band, slightly tilted, stuck with a small bounce. */
.stk {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 5px;
  background: #fff;
  border: 1px solid rgba(42, 24, 16, 0.25);
  box-shadow: 2px 3px 0 rgba(42, 24, 16, 0.55);
  transform: rotate(var(--tilt, 0deg));
}

/* Only the sticker just stuck bounces: the page is drawn again after every guess. */
.stk.is-new {
  animation: stk-stick 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes stk-stick {
  from { transform: rotate(var(--tilt, 0deg)) scale(1.12) translateY(-6px); opacity: 0; }
}

.stk-foil {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  min-height: 50px;
  padding: 6px 4px;
  text-align: center;
  background: linear-gradient(135deg, #f7e6a8 0%, #fff8dc 45%, #e3c96a 100%);
}

.stk-name {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.stk-sub {
  font-size: 10px; /* at least 10 px (audit of 22 October 2026) */
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.stk-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: var(--orange-strong);
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stk-band:only-child,
.stk-band.is-centred {
  justify-content: center;
}

/* Its number, in a dot on the corner, off the name. */
.stk-no {
  position: absolute;
  top: -9px;
  left: -6px;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'Anton', Impact, sans-serif;
  font-size: 10px;
}

/* The big ones: the two ends of Le Lien. */
.stk--big .stk-foil {
  min-height: 80px;
  background: linear-gradient(135deg, #55291a 0%, var(--cover) 60%, #24110a 100%);
}

.stk--big .stk-name {
  font-size: 18px;
  color: var(--paper);
}

/* A place still empty, waiting for its sticker. */
.stk-slot {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 6px 4px;
  border: 2px dashed var(--rule);
  background: rgba(241, 228, 200, 0.35);
  color: var(--rule);
  text-align: center;
}

.stk-slot b {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
}

.stk-slot span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* A criterion or a caption, as a label pasted on the page: the same for every club and country. */
.crit {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-height: 64px;
  padding: 8px 6px;
  text-align: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}

.crit b {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: break-word;
  hyphens: auto;
}

.crit small {
  font-size: 10px; /* at least 10 px (audit of 22 October 2026) */
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 560px) {
  .album-page {
    padding: 18px 10px 20px;
  }

  .stk-name {
    font-size: 12px;
  }

  .stk--big .stk-name {
    font-size: 15px;
  }

  .stk--big .stk-band {
    flex-direction: column;
    gap: 0;
    text-align: center;
  }

  .crit {
    padding: 6px 3px;
  }

  .crit b {
    font-size: 11px;
  }

  .crit small {
    font-size: 10px; /* at least 10 px (audit of 22 October 2026) */
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stk.is-new {
    animation: none;
  }
}

/* ---------- Home page: what Pantheon is, then one card per game ---------- */

.about--home {
  max-width: min(1180px, calc(100% - 40px));
  padding: 0;
}

.about-title--site {
  position: relative;
  font-size: 30px;
  margin-bottom: 14px;
  padding-bottom: 12px;
}

.about-title--site::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  background: var(--gold);
}

.about-lead {
  max-width: 44em;
  margin: 0 0 26px !important;
  font-size: 16px !important;
  line-height: 1.65;
  color: var(--paper);
}

.about-games {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.about-game {
  padding: 16px 18px 14px;
  background: rgba(241, 228, 200, 0.05);
  border: 1px solid rgba(241, 228, 200, 0.14);
  border-top: 3px solid var(--gold);
}

.about .about-game h3 {
  margin: 0 0 8px;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold);
}

.about-game h3 a {
  color: inherit;
  text-decoration: none;
}

.about-game h3 a:hover,
.about-game h3 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.about .about-game p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .about--home {
    max-width: none;
    padding: 0 16px;
  }

  .about-title--site {
    font-size: 25px;
  }
}

/* Phone: the small controls keep their look, but a finger gets at least 44 px to tap
   (an invisible margin around them, no wider than the gap to their neighbour). */
@media (max-width: 560px) {
  .help-button,
  .flag {
    position: relative;
  }

  .help-button::after,
  .flag::after {
    content: '';
    position: absolute;
    inset: -9px 0;
  }

  .help-button::after {
    inset: -7px -4px;
  }

  .flag::after {
    inset: -14px 0 -14px -10px;
  }

  .foot-link {
    padding: 15px 10px;
  }

  /* Les liens vers les jeux, en bas de l'accueil : 44 px de haut sans décaler le texte. */
  .about-game h3 a {
    display: inline-block;
    padding: 8px 0;
    margin: -8px 0;
  }
}

/* The field under the board (DESIGN.md, « Saisie »): it stays in the flow of the page, on phones as on
   a computer (decided on 19 October 2026). On phones the message goes above the field; the list of
   suggestions opens downwards, as on a computer, capped by the room left above the keyboard
   (--dock-room, src/dock.js). */
/* Phones only (≤ 760 px). */
@media (max-width: 760px) {
  .dock {
    display: flex;
    flex-direction: column;
  }

  .dock .guess {
    position: relative;
    flex-direction: row;
  }

  .dock .guess .primary {
    flex: none;
    padding-inline: 16px;
  }

  .dock .row {
    margin-top: 8px;
    row-gap: 6px;
    flex-wrap: wrap;
  }

  /* The counter shares its line with a single button, and goes above two on a phone. */
  .dock .lives {
    flex: 1 1 130px;
  }

  /* The message goes above the field: when it shows up, the bar grows upwards and the field the
     finger is on does not move. */
  .dock > [role='status'] {
    order: -1;
    min-height: 0;
    margin: 0 0 8px;
  }

  .dock > [role='status']:empty {
    display: none;
  }

  /* The list spans the whole width of the field and Valider. */
  .dock .combo {
    position: static;
  }

  .dock .suggestions {
    left: 0;
    right: 0;
    max-height: min(258px, max(var(--dock-room, 258px), 120px));
  }
}

/* Maquettes du 13 octobre 2026 (DESIGN.md, « Espacement et vignettes »): the boards are plain cards,
   the players placed are flat boxes, a clean frame and the name in Anton; no dotted paper, no page
   number, no gold foil, no tilt. What a box brings (points) is a small gold pill. */
.album-page {
  background: var(--card);
}

.album-page[data-page]::before {
  content: none;
}

.stk {
  padding: 0;
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: none;
  transform: none;
}

@keyframes stk-stick {
  from { transform: scale(1.06); opacity: 0; }
}

.stk-foil {
  background: none;
  min-height: 0;
  padding: 8px 4px 4px;
}

.stk-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.stk-band {
  justify-self: center;
  margin: 0 0 8px;
  padding: 1px 7px;
  background: var(--gold);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: none;
}

.stk-no {
  display: none;
}

/* Game boards: the day and its number are in the label above the title, not in the corner. */
:is(.xi-card, .verso, .bt-card, .gr-card, .ln-card, .hl-card) .sticker-top .serial {
  display: none;
}

/* Le Quiz: the fact in capitals, as on the mockups. */
.record {
  text-transform: uppercase;
}

/* The end card as on the maquettes (DESIGN.md, « Structure d'une page de jeu », 6): read from the
   left, Partager across the card, the boxes and the share at full width, the streak in a band, the
   other games of the day as lines. */
.end-card {
  text-align: left;
}

.end-stats {
  max-width: none;
  margin-inline: 0;
}

.end-actions {
  justify-content: stretch;
  flex-wrap: nowrap;
  gap: 8px;
}

/* One equal share per button, like the boxes above (50 % for two, 33 % for three). */
.end-actions > * {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 420px) {
  .end-actions {
    flex-wrap: wrap;
  }

  .end-actions > * {
    flex-basis: calc(50% - 4px);
  }
}

.end-streak {
  padding: 10px 12px;
  border-top: 0;
  background: var(--paper-shade);
  font-weight: 600;
  color: #5d5948; /* --ink-soft is 3.8:1 on the shade; this 4.7:1 (the live streak stays --ink) */
}

/* The other games of the day (DESIGN.md, « Carte de fin »): a dark-hardwood band, like the drawings of
   the home page, and a small card per game: its small drawing (44 px), its name and the same pill as
   on the home page (« À jouer », « En cours » in gold, « ✓ 4/5 » in green), one under the other.
   Five a line, two rows for the ten other games; two a line on a phone. */
.end-next {
  margin: 14px -2px 0;
  padding: 14px 14px 12px;
  background: var(--cover);
}

.end-next h2 {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.end-next ul {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.end-next a {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 'art' 'name' 'status';
  justify-items: center;
  align-items: start;
  row-gap: 8px;
  min-height: 64px;
  padding: 12px 8px 10px;
  text-align: center;
  border: 0;
  background: var(--card);
  box-shadow: none;
  transition: transform 0.12s ease;
}

.end-next a:hover,
.end-next a:focus-visible {
  border: 0;
  background: var(--card);
  transform: translateY(-2px);
}

:is(.end-next, .games-nav) .game-art {
  grid-area: art;
  width: 44px;
  height: 44px;
  margin: 0;
  outline: 1px solid var(--gold);
  outline-offset: -1px;
}

.end-next strong {
  grid-area: name;
  align-self: center;
  font-size: 16px;
  line-height: 1.1;
}

.end-next .game-status {
  grid-area: status;
  max-width: none;
  white-space: nowrap;
  margin: 0;
  padding: 2px 8px;
  border-width: 1.5px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--ink);
}

.end-next .game-status.is-done {
  color: var(--card);
}

.end-next .end-countdown {
  margin: 10px 0 0;
  color: var(--paper);
  opacity: 0.85;
}

.end-next .end-countdown b {
  color: var(--gold);
}

/* The link back to today's game (an archive game): a plain link, not one of the game cards above. */
.end-next .end-countdown a {
  display: inline;
  min-height: 0;
  padding: 0;
  background: none;
  box-shadow: none;
  color: var(--gold);
  text-decoration: underline;
}

.end-next .end-countdown a:hover,
.end-next .end-countdown a:focus-visible {
  transform: none;
  background: none;
}

/* Phone: two cards a line; the drawing (32 px) and the pill on top, the name under them, full width. */
@media (max-width: 600px) {
  .end-next {
    padding: 12px 10px 10px;
  }

  .end-next ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .end-next a {
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: 'art status' 'name name';
    justify-items: stretch;
    align-items: center;
    column-gap: 8px;
    row-gap: 6px;
    padding: 8px;
    text-align: left;
  }

  .end-next .game-status {
    justify-self: end;
  }

  .end-next .game-art {
    width: 32px;
    height: 32px;
  }

  .end-next .game-status {
    align-self: center;
  }

  .end-next strong {
    align-self: start;
    font-size: 15px;
  }
}

/* Narrow phone: no room for the pill beside the drawing (« ✓ 12 intentos »), it goes under the name. */
@media (max-width: 400px) {
  .end-next a {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'art' 'name' 'status';
    align-items: start;
  }

  .end-next .game-status {
    justify-self: start;
  }
}

/* The drawing of each game (DESIGN.md, « Accueil »): an SVG of src/game-art.js on the dark hardwood,
   gold for what matters. The large form on the home cards, the small one (drawn for 32 to 48 px, not
   shrunk) on the phone lines of the home page, the end card and the games menu. */
.game-art {
  border: 0;
  background: var(--cover);
}

.game-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.game-art .art-small,
:is(.end-next, .games-nav) .game-art .art-big {
  display: none;
}

:is(.end-next, .games-nav) .game-art .art-small {
  display: block;
}

@media (max-width: 560px) {
  .games .game-art .art-big {
    display: none;
  }

  .games .game-art .art-small {
    display: block;
  }
}

.ga-g { fill: var(--gold); }
.ga-p { fill: var(--paper); }
.ga-r { fill: var(--red); }
.ga-o { fill: var(--orange); }
.ga-e { fill: #6b3c27; } /* a box still empty, on the dark hardwood */
.ga-ring { fill: none; stroke: var(--paper); }
.ga-line { fill: none; stroke: #8a5638; } /* the lines of a court, on the dark hardwood */
.ga-anton { font-family: 'Anton', Impact, sans-serif; font-weight: 400; }
.ga-min { font-weight: 600; }

/* ————————————————————————————————————————————————
   L'accueil comme sur la maquette du 13 octobre 2026 (DESIGN.md, « Accueil »)
   ———————————————————————————————————————————————— */

/* The date above, the title on the left. */
.page.home .page-head {
  display: flex;
  flex-direction: column;
  text-align: left;
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 16px;
}

.page.home .page-head .page-sub {
  order: -1;
  margin: 0 0 4px;
}

/* The streak: the days in a row in large, the games finished today, a dot per game. */
.page.home .home-streak {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 0;
  background: var(--paper-shade);
  box-shadow: none;
  color: var(--ink);
  text-align: left;
  font-weight: 400;
}

.home-streak b {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
}

.home-streak > span:not(.streak-dots) {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.3;
}

.home-streak strong {
  font-weight: 600;
}

.home-streak small {
  font-size: 13px;
  font-weight: 600;
  color: #5d5948; /* 4.7:1 on the shade (--ink-soft: 3.8:1) */
}

.streak-dots {
  display: flex;
  gap: 4px;
}

.streak-dots i {
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.streak-dots i.is-done {
  border-color: var(--green);
  background: var(--green);
}

.game-hook {
  display: none;
}

.home-next {
  margin: 16px 0 0;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}

.home-next:empty {
  display: none;
}

/* Phone: the six games in one card, one line each, with a short sentence and the status. */
@media (max-width: 560px) {
  .page.home .page-title {
    font-size: 32px;
    line-height: 1.05;
  }

  /* The page right under the bar, as on the maquette. */
  .page.home {
    margin-top: 0;
  }

  .page.home .games {
    gap: 0;
    background: var(--card);
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-card);
  }

  .page.home .games li + li .game {
    border-top: 1px solid var(--rule);
  }

  .page.home .games .game {
    grid-template-columns: 48px minmax(0, 1fr) auto;
    grid-template-areas: 'art name status' 'art hook status';
    column-gap: 12px;
    row-gap: 2px;
    min-height: 74px;
    padding: 0 12px;
    border: 0;
    box-shadow: none;
  }

  .page.home .games .game:hover {
    transform: none;
    box-shadow: none;
    background: var(--paper);
  }

  .page.home .games .game-art {
    width: 48px;
    height: 48px;
  }

  .page.home .games .game .game-name {
    align-self: end;
    font-size: 19px;
    line-height: 1.15;
  }

  .page.home .games .game-pitch {
    display: none;
  }

  .page.home .games .game-hook {
    grid-area: hook;
    display: block;
    align-self: start;
    font-size: 13px;
    line-height: 1.3;
    color: var(--ink-soft);
  }

  .page.home .games .game-status {
    align-self: center;
  }
}

/* The narrowest phones (320 px): the names a size smaller, so the longest word (« MISTERIOSO »)
   fits beside a long status (« ✓ Abandonado »). */
@media (max-width: 360px) {
  .page.home .games .game .game-name {
    font-size: 17px;
  }
}

/* Computer: the title on the left and the streak on the right of the same line; the cards three by
   three, the drawing, the name with its status, the sentence. */
@media (min-width: 561px) {
  .page.home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 16px;
    align-items: end;
  }

  .page.home > :not(.page-head):not(.home-streak) {
    grid-column: 1 / -1;
  }

  .page.home .page-title {
    font-size: 40px;
    line-height: 1.05;
  }

  .page.home .games .game {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'art art' 'name status' 'pitch pitch';
    align-items: center;
    gap: 10px 8px;
    padding: 16px;
  }

  .page.home .games .game-art {
    grid-area: art;
    height: 110px;
    margin: 0;
  }

  .page.home .games .game .game-name {
    grid-area: name;
    font-size: 24px;
  }

  .page.home .games .game-status {
    grid-area: status;
    margin: 0;
  }

  .page.home .games .game-pitch {
    grid-area: pitch;
    margin: 0;
  }
}

/* ————————————————————————————————————————————————
   La barre du haut comme sur la maquette (DESIGN.md, « Structure d'une page de jeu », 1)
   ———————————————————————————————————————————————— */

/* Phone: 56 px high, the menu (≡ alone), the logo and the name on the left; the language (« FR ▾ »)
   on the right; plain 44 px targets on the dark hardwood, no frame. */
@media (max-width: 760px) {
  .masthead {
    min-height: 56px;
    padding: 0 6px;
    gap: 4px;
  }

  .masthead .logo {
    flex: 1 1 auto;
    gap: 8px;
  }

  .masthead .logo-mark {
    width: 32px;
    height: 32px;
  }

  .masthead .logo-words strong {
    font-size: 19px;
    line-height: 1.25;
    letter-spacing: 0.04em;
  }

  .masthead .langs {
    border: 0;
  }

  .masthead .lang,
  .masthead .lang.is-active {
    background: transparent;
    color: var(--paper);
    font-size: 13px;
    letter-spacing: 0.08em;
  }

  .masthead .langs.is-open .lang.is-active {
    background: var(--paper);
    color: var(--cover-deep);
  }

  .nav-toggle {
    justify-content: center;
    width: 44px;
    padding: 0;
    border: 0;
  }

  .nav-toggle-label {
    display: none;
  }
}

/* Computer: the three languages small, the current one on the paper. */
@media (min-width: 761px) {
  .masthead .langs {
    border: 0;
    gap: 2px;
  }

  .masthead .lang {
    min-height: 32px;
    padding: 0 8px;
    color: var(--sand);
  }

  .masthead .lang.is-active {
    background: var(--paper);
    color: var(--cover-deep);
  }
}

/* ————————————————————————————————————————————————
   Harmonisation du 13 octobre 2026 (DESIGN.md) : plus rien d'incliné ni de feuille dorée, un seul
   rouge par écran (le bouton principal).
   ———————————————————————————————————————————————— */

/* Le Quiz, the five boxes, a progress strip: rounded; still to come, dashed with its number; the
   question in play, dark hardwood with its number in gold; found, green with the name in Anton (green
   says « found », as in Les Buteurs and on the home page); missed, the name struck through, faint. */
.slot {
  border-radius: 8px;
  border: 2px dashed rgba(58, 29, 18, 0.3);
  background: rgba(58, 29, 18, 0.04);
}

.slot em {
  color: var(--ink-soft); /* 5.6:1 on the card, still lighter than a box played (ink at 45% was 2.8:1) */
}

.slot--current {
  border: 2px solid var(--cover);
  background: var(--cover);
  box-shadow: 0 3px 0 rgba(39, 19, 11, 0.25);
}

.slot--current em {
  color: var(--gold);
  opacity: 1;
}

.slot--solved,
.slot--failed {
  transform: none;
  box-shadow: none;
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.03em;
}

.slot--solved {
  background: var(--green);
  border: 2px solid var(--green);
  color: var(--card);
}

.slot--failed {
  background: rgba(58, 29, 18, 0.06);
  border: 2px solid transparent;
  color: var(--ink-soft);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

@media (max-width: 560px) {
  .slot--solved,
  .slot--failed {
    font-size: 13px;
  }
}

/* A name still too long at 10 px (fitSlotNames, src/main.js): on two lines, cut where it must. */
.slot--wrap {
  white-space: normal;
  line-height: 1.05;
}

/* The line under the field after an answer, in every game with one (src/verdict.js, DESIGN.md,
   « Indices et erreurs »): Le Quiz's ✓ or ✘ square before the words, smaller beside a short line. */
.has-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
}

.has-verdict .verdict-mark {
  width: 22px;
  height: 22px;
  font-size: 15px;
}

.has-verdict > .verdict-mark + span {
  flex: 1 1 0;
  min-width: 0;
}

/* One red for the words and the square, the one small red text needs on the paper (5:1). */
.feedback--bad,
.has-verdict.feedback--bad {
  color: var(--red-strong);
}

.feedback--bad .verdict-mark {
  background: var(--red-strong);
}

.has-verdict.feedback--good {
  color: var(--green);
}

/* Le Quiz, the ✓ or ✘ after an answer: a plain square. */
.feedback--good .verdict-mark,
.feedback--bad .verdict-mark {
  transform: none;
}

/* The numbers of the rules, in the six games: dark hardwood and gold, no more red nor tilt. */
.rules-list li::before {
  transform: none;
  background: var(--cover);
  color: var(--gold);
}

/* Le Quiz stats, the players already found: light boxes framed in gold. */
.card {
  background: var(--card);
  border: 2px solid var(--gold);
  box-shadow: none;
}

/* Home: the beta tag and the gold badge straight, a card lifts on hover without turning. */
.beta-tag,
.badge--gold {
  transform: none;
}

@media (hover: hover) {
  .game:hover {
    transform: translateY(-3px);
  }
}

/* The verdict takes the focus at the end of a game (revealEndCard), without a ring: it is not a control. */
.end-verdict:focus {
  outline: none;
}

/* The share sheet (src/share.js): the networks as round marks on a computer, the system sheet stays on phones. */
.share-card {
  max-width: 420px;
}

.share-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 6px;
  margin: 0 0 20px;
}

.share-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.share-dot {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--tile);
  color: #fff;
  box-shadow: 2px 2px 0 var(--ink);
}

.share-dot svg {
  width: 26px;
  height: 26px;
}

@media (hover: hover) {
  .share-tile:hover .share-dot {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 var(--ink);
  }
}

.share-card .end-share-text {
  margin-bottom: 16px;
}

.share-card .ghost {
  width: 100%;
  margin-top: 10px;
}