/* The colours of the games, from web/css/style.css (decision 136). */
:root {
  --table: #e4ebf0;
  --ink: #10212e;
  --ink-soft: #3d5363;
  --face: #ffffff;
  --face-ink: #10212e;
  --red: #b0102a;
  --edge: #10212e;
  --button: #ffffff;
  --button-ink: #10212e;
  --primary: #0b5cad;
  --primary-ink: #ffffff;
  /* The groups of the buttons of poker (decision 95): bets, folding and the next hand. */
  --bet: #f2c14e;
  --bet-ink: #10212e;
  --fold: #8c1d2b;
  --fold-ink: #ffffff;
  --go: #1b6e3a;
  --go-ink: #ffffff;
  /* Rosie and Neagra lit in turn at the double up of video poker (decision 106). */
  --call-red: #b0102a;
  --call-red-ink: #ffffff;
  --call-black: #10212e;
  --call-black-ink: #ffffff;
  --focus: #0b5cad;
  --shadow: rgba(16, 33, 46, 0.18);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --table: #0d1821;
    --ink: #e7eef3;
    --ink-soft: #a8b9c6;
    --face: #f3f5f7;
    --face-ink: #10212e;
    --red: #b0102a;
    --edge: #f3f5f7;
    --button: #1b2c3a;
    --button-ink: #e7eef3;
    --primary: #79b8f3;
    --primary-ink: #0d1821;
    --bet: #e0b247;
    --bet-ink: #0d1821;
    --fold: #e07a85;
    --fold-ink: #0d1821;
    --go: #6fd08c;
    --go-ink: #0d1821;
    --call-red: #e07a85;
    --call-red-ink: #0d1821;
    --call-black: #f3f5f7;
    --call-black-ink: #10212e;
    --focus: #79b8f3;
    --shadow: rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

/* The presentation site of pont.ro (decisions 136, 152 and 157): pages that are read, not played.
   The colours are those of the games: tools/build_site.mjs puts them above these lines, from
   web/css/style.css, where tools/check_contrast.py checks every pair used here, in the light theme
   and in the dark one. The look of decision 152, on every page since decision 157: dark bands in the
   colour of the text of the cards, the same in both themes, with the gold of the bets of poker; white
   cards on the table of the games. The order of every page, read by the screen reader, stays that of
   decision 115; what is only seen is hidden from it in the HTML. Sizes are in rem, so the page grows
   with the text size chosen on the phone; the drawings of the bands do not, so they never leave the
   screen. */

/* Text size follows the phone setting (Dynamic Type on iPhone), as in the games. */
html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
}
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--table);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}
/* The headings, and the big text only seen at the end of the page of a game: a word too long for its
   line breaks, instead of leaving the screen. */
h1, h2, h3, h4,
.closing-title {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
p { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* The width of every page, as Acasa (decision 157); the side gutter also clears the rounded corners
   of the phone. */
.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding-left: max(1rem, env(safe-area-inset-left, 0px));
  padding-right: max(1rem, env(safe-area-inset-right, 0px));
}

/* Links are blue and underlined on the light grounds and have the colour of the text on the dark
   bands; the buttons have their own colours. */
a { color: var(--primary); text-underline-offset: 0.18em; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  overflow-wrap: anywhere;
}

/* The pause between the two labels of a game, which only the screen reader hears. */
.between {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The small labels above some headings of Acasa, only seen. */
.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The dark bands, in the colour of the text of the cards, the same in both themes, with the text in
   the colour of a card. On most, a faint light of the blue of the games in a corner, checked by
   tools/check_contrast.py as a ground for that text, and a fine grain, only seen. */
.top-links,
.band,
.game-group {
  position: relative;
  color: var(--face);
  background: var(--face-ink);
}
.band,
.game-group {
  overflow: hidden;
  background: radial-gradient(60rem 30rem at 85% -10%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 70%), var(--face-ink);
}
.top-links::before,
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.06;
  background-image: radial-gradient(circle at 1px 1px, var(--face) 1px, transparent 0);
  background-size: 22px 22px;
}
.top-links > *,
.band > * { position: relative; }
.top-links a,
.band a:not(.button-gold) { color: var(--face); }
.top-links :focus-visible,
.band :focus-visible,
.game-group > :focus-visible { outline-color: var(--face); }

/* The top row of every page but Acasa (decision 115), joined to the band with the main heading:
   Acasa, with the drawing of Pont.Ro, at least 44 by 44 pixels to tap (WCAG 2.5.5). */
.top-links .wrap { display: flex; padding-block: 0.5rem; }
.top-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.75rem;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
}
.site-logo,
.brand-logo {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 0.6rem;
}

/* The gold button, to the games: on the bands, with an arrow drawn through a mask, only seen. As on
   every button, a word too long for the button breaks inside it, instead of leaving it. */
.button-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  max-width: 100%;
  min-height: 3rem;
  padding: 0.7rem 1.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  color: var(--bet-ink);
  background: var(--bet);
  border: 2px solid var(--bet);
  border-radius: 999px;
}
.button-gold::after {
  content: "";
  width: 1.1em;
  height: 1.1em;
  flex: none;
  background-color: var(--bet-ink);
  -webkit-mask: url(../icons/arrow.svg) center / contain no-repeat;
  mask: url(../icons/arrow.svg) center / contain no-repeat;
}

/* Acasa (decision 152): the band at the top, with the drawing and the name, only seen, since the
   main heading says it; the small label, the name with its gold dot, what the games are, Joaca
   acum and what it costs; and the fan of cards. */
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-top: 1rem;
  font-size: 1.2rem;
  font-weight: 800;
}
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 2rem;
  padding-block: 2rem 4.5rem;
}
.hero .eyebrow { margin-bottom: 1rem; color: var(--bet); }
.hero h1 { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 800; }
.hero h1 .dot { color: var(--bet); }
.lead { font-size: 1.25rem; line-height: 1.5; }
.hero .lead { max-width: 32rem; margin-top: 1.25rem; }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.hero-note { font-size: 0.95rem; }

/* The fan, only seen: five cards of the games (decision 96) turned around a point under them, with
   two chips in the gold of the bets. Its size is in pixels, so it stays inside the band whatever the
   size of the text; when the band has one column, on a tablet or a phone, it is not shown, so the
   words come first (decision 168). */
.fan {
  position: relative;
  height: 300px;
}
.fan-card {
  position: absolute;
  left: 50%;
  bottom: 32px;
  width: 130px;
  height: 195px;
  margin-left: -65px;
  transform-origin: 50% 120%;
  filter: drop-shadow(0 2px 3px var(--shadow)) drop-shadow(0 12px 18px var(--shadow));
}
.fan-card:nth-of-type(1) { transform: rotate(-26deg) translateX(-48px); }
.fan-card:nth-of-type(2) { transform: rotate(-13deg) translateX(-24px); }
.fan-card:nth-of-type(4) { transform: rotate(13deg) translateX(24px); }
.fan-card:nth-of-type(5) { transform: rotate(26deg) translateX(48px); }
.chip {
  position: absolute;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--bet) 0 15deg, var(--face) 15deg 30deg);
  box-shadow: 0 8px 18px var(--shadow);
}
.chip::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--bet);
  border: 2px dashed var(--face);
}
.chip-1 { top: 6%; right: 6%; }
.chip-2 { bottom: 8px; left: 6%; width: 52px; height: 52px; }
.chip-2::after { inset: 7px; }

/* The cards are dealt once, when Acasa opens, in less than a second; with Reduce motion on, they
   simply stand there. */
@media (prefers-reduced-motion: no-preference) {
  .fan-card { animation: deal 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .fan-card:nth-of-type(2) { animation-delay: 0.06s; }
  .fan-card:nth-of-type(3) { animation-delay: 0.12s; }
  .fan-card:nth-of-type(4) { animation-delay: 0.18s; }
  .fan-card:nth-of-type(5) { animation-delay: 0.24s; }
}
@keyframes deal {
  from { opacity: 0; transform: translateY(32px); }
}

/* The four short facts, only seen, on a white strip over the edge of the band; when the text is too
   big for the width, the words go under the drawing. */
.facts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: -2.5rem;
  color: var(--button-ink);
  background: var(--button);
  border-radius: 1.1rem;
  box-shadow: 0 1px 2px var(--shadow), 0 8px 24px var(--shadow);
}
.fact {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
  padding: 1.25rem;
}
.fact > div { flex: 1 1 6rem; min-width: 0; }
.fact + .fact { border-left: 1px solid var(--table); }
.fact-drawing {
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  padding: 0.45rem;
  color: var(--primary);
  background: var(--table);
  border-radius: 0.7rem;
}
.fact b { display: block; font-size: 1.05rem; line-height: 1.25; }
.fact span { display: block; margin-top: 0.15rem; font-size: 0.92rem; line-height: 1.4; color: var(--ink-soft); }

/* The parts of Acasa: Ce sunt jocurile and Ce nu iti trebuie with the heading on the left and the
   text on the right, the first sentence bigger; the headings of the games and of Cum incepi above
   their cards. */
.section { padding-top: 4.5rem; }
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1.5rem 3rem;
}
.split h2,
.section-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); font-weight: 800; }
.section-head { margin-bottom: 2rem; }
.split .eyebrow,
.section-head .eyebrow { margin-bottom: 0.6rem; color: var(--primary); }
.prose {
  display: grid;
  gap: 1rem;
  font-size: 1.08rem;
  color: var(--ink-soft);
}
.prose p:first-child { font-size: 1.2rem; line-height: 1.5; color: var(--ink); }

/* The games, each on a white card with a card in its corner, only seen: its drawing and name, which
   lead to its page, its summary, its two labels and the button to the game. A card alone on its row
   takes the whole row. */
.games {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.game-card,
.step {
  position: relative;
  min-width: 0;
  color: var(--button-ink);
  background: var(--button);
  border-radius: 1.1rem;
  box-shadow: 0 1px 2px var(--shadow), 0 8px 24px var(--shadow);
}
.game-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem 1.4rem 1.4rem;
}
.game-card > p { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.game-card > p:last-child { margin-top: auto; padding-top: 0.25rem; }
.game-heading a {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 2.75rem;
  color: var(--button-ink);
  text-decoration: none;
}
.game-heading a:hover { text-decoration: underline; }
.game-card h3 { font-size: 1.4rem; font-weight: 800; }
.game-card h4 { font-size: 1.25rem; font-weight: 800; }
.game-icon {
  width: 3.75rem;
  height: 3.75rem;
  flex: none;
}
.corner {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ink-soft);
}
.corner-hearts,
.corner-diamonds { color: var(--call-red); }

/* A suit, drawn through its mask: pica and trefla in the softer colour of the text, inima rosie and
   romb in the red of the games, light in the dark theme. */
.suit {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  flex: none;
  background-color: var(--ink-soft);
  -webkit-mask: url(../icons/suit-spades.svg) center / contain no-repeat;
  mask: url(../icons/suit-spades.svg) center / contain no-repeat;
}
.suit-hearts {
  background-color: var(--call-red);
  -webkit-mask-image: url(../icons/suit-hearts.svg);
  mask-image: url(../icons/suit-hearts.svg);
}
.suit-clubs {
  -webkit-mask-image: url(../icons/suit-clubs.svg);
  mask-image: url(../icons/suit-clubs.svg);
}
.suit-diamonds {
  background-color: var(--call-red);
  -webkit-mask-image: url(../icons/suit-diamonds.svg);
  mask-image: url(../icons/suit-diamonds.svg);
}

/* The two labels of a game: light on the white cards, outlined on the dark band of its page. */
.tags {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tag {
  padding: 0.2rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  color: var(--ink-soft);
  background: var(--table);
  border-radius: 999px;
}
/* The button to a game on its card, and the button of the form: the main button of the games. */
.card-play,
.send-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 2.75rem;
  padding: 0.55rem 1.3rem;
  font: inherit;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  color: var(--primary-ink);
  background: var(--primary);
  border: 2px solid var(--primary);
  border-radius: 999px;
}

/* The three games of poker, gathered on a dark panel, under Poker with its drawing. */
.game-group {
  grid-column: 1 / -1;
  display: grid;
  gap: 1.25rem;
  padding: 1.75rem;
  border-radius: 1.5rem;
}
.game-group > .game-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  font-size: 1.6rem;
  font-weight: 800;
}
.game-group > .game-heading .game-icon { width: 3.25rem; height: 3.25rem; }
.game-group > p { margin-top: -0.75rem; }
.games-poker {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* Cum incepi: the two steps, numbered, each on a white card with its heading. */
.steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.step {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding: 1.5rem;
}
.step-number {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  font-weight: 800;
  color: var(--primary-ink);
  background: var(--primary);
  border-radius: 50%;
}
.step h3 { font-size: 1.2rem; }
.step p { color: var(--ink-soft); }

/* The band at the end of Acasa and of the page of a game, with the gold button. */
.closing-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 5rem;
  padding: 2.5rem;
  border-radius: 1.5rem;
}
.closing-band h2,
.closing-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.15; }
.closing-text p { margin-top: 0.4rem; }
.page-game .closing-band { margin-top: 3rem; }

.sources,
.examples { margin: 0; padding-left: 1.25rem; }
.sources li { margin: 0 0 0.35rem; }

/* The form of the page Contact (decision 138): the fields of the games, each with its label above
   it and its error, when it has one, between the two; the error is said in words and also makes
   the edge of the field thicker, so it never rests on a colour. On the white card, the fields have
   the colour of the table. The trap field stays hidden even if a rule here would show it. */
.contact-form { margin: 1rem 0 0; }
.field { margin: 0 0 1rem; }
.field label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
}
.field input,
.field textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.7rem;
  font: inherit;
  color: var(--ink);
  background: var(--table);
  border: 2px solid var(--edge);
  border-radius: 0.6rem;
}
.field textarea {
  min-height: 10rem;
  resize: vertical;
}
.field [aria-invalid="true"] { border: 4px solid var(--edge); }
.field-error {
  margin: 0 0 0.3rem;
  font-weight: 600;
}
.send-button {
  display: flex;
  width: 100%;
  min-height: 3rem;
  margin: 1rem 0 0;
}
/* What happened to a message that did not go, first on the card of the form. */
.form-status {
  margin: 0 0 1.5rem;
  padding: 0 1rem 0.25rem;
  border: 3px solid var(--edge);
  border-radius: 0.75rem;
}
.form-status h2 { margin: 0.75rem 0 0.5rem; font-size: 1.3rem; }
.form-errors { margin: 0 0 0.75rem; padding-left: 1.25rem; }

/* The same three links at the end of every page (decision 115), on a white strip, in the colour of
   the buttons in the dark theme, with the name of the site, only seen. */
.site-footer {
  margin-top: 4rem;
  padding-block: 1.25rem max(1.25rem, env(safe-area-inset-bottom, 0px));
  color: var(--button-ink);
  background: var(--button);
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer a {
  font-weight: 600;
  color: var(--button-ink);
  text-decoration: none;
}
.site-footer a:hover { text-decoration: underline; }
.footer-note { font-size: 0.9rem; color: var(--ink-soft); }

/* Every page but Acasa (decision 157), in the look of Acasa: the band at the top laid out as the
   one of Acasa, with the words on the left and a drawing on the right, only seen; then the first
   part on a white card over the edge of the band, as the four facts of Acasa. */
.page-band .hero { padding-block: 2.25rem 4.75rem; }
/* On a narrow phone, the main heading shrinks a little with the screen, so that its longest word,
   confidentialitate in the title of the privacy policy, keeps its line. */
.page-band h1 { font-size: min(clamp(2.4rem, 5.5vw, 3.6rem), 9.3vw); font-weight: 800; }
.page-band .lead { max-width: 34rem; margin-top: 1rem; }
.page-band .tags { margin-top: 1.25rem; }
.page-band .tag {
  color: var(--face);
  background: transparent;
  border: 1px solid var(--face);
}
.page-band .updated { margin-top: 0.9rem; font-size: 1.1rem; }
.page-band .hero-actions { margin-top: 1.75rem; }
.game-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  color: var(--bet);
}
.eyebrow-icon {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  padding: 0.3rem;
  background: var(--face);
  border-radius: 0.75rem;
}
/* A fan of two cards, as those of Texas Hold'em and Blackjack. */
.fan-2 .fan-card:nth-of-type(1) { transform: rotate(-12deg) translateX(-40px); }
.fan-2 .fan-card:nth-of-type(2) { transform: rotate(10deg) translateX(40px); }

/* The drawing of the pages of text: a card of the games, with a suit in two corners and a drawing in
   lines in its middle, over the back of a card; in pixels, as the fan. */
.art {
  position: relative;
  height: 280px;
}
.art-back,
.art-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 225px;
  margin: -112px 0 0 -75px;
}
.art-back {
  transform: rotate(-14deg) translateX(-46px);
  filter: drop-shadow(0 2px 3px var(--shadow)) drop-shadow(0 12px 18px var(--shadow));
}
.art-card {
  display: grid;
  place-items: center;
  transform: rotate(7deg) translateX(34px);
  color: var(--face-ink);
  background: var(--face);
  border-radius: 12px;
  box-shadow: 0 2px 3px var(--shadow), 0 12px 18px var(--shadow);
}
.art-drawing { width: 86px; height: 86px; }
.art-corner {
  position: absolute;
  display: flex;
}
.art-corner-top { top: 12px; left: 12px; }
.art-corner-bottom { right: 12px; bottom: 12px; transform: rotate(180deg); }
.art .suit {
  width: 22px;
  height: 22px;
  background-color: var(--face-ink);
}
.art .suit-hearts,
.art .suit-diamonds { background-color: var(--red); }

/* In a grid, a block may be narrower than its longest word, so that the word breaks inside it on a
   narrow phone with big text, instead of pushing the page sideways. */
.prose,
.rule-card,
.side-card,
.contact-side { grid-template-columns: minmax(0, 1fr); }

/* The white cards of the pages: the first part, over the edge of the band, the parts of the rules,
   the form and the two cards beside it. */
.intro-card,
.rule-card,
.form-card,
.side-card {
  position: relative;
  min-width: 0;
  color: var(--button-ink);
  background: var(--button);
  border-radius: 1.1rem;
  box-shadow: 0 1px 2px var(--shadow), 0 8px 24px var(--shadow);
}
.intro-card {
  margin-top: -2.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.intro-card .prose,
.part .prose { color: var(--ink-soft); }
.intro-card .prose p:first-child { color: var(--button-ink); }
.intro-card > p + p { margin-top: 0.9rem; }
.intro-card h2 { font-size: clamp(1.75rem, 3.2vw, 2.4rem); font-weight: 800; }

/* Cum se joaca: under its heading, Pe scurt on a dark panel, each paragraph a point of its own, then
   every other part on a white card with a suit, the cards in two columns on a wide screen. */
.summary-band {
  margin-bottom: 1.25rem;
  padding: 1.75rem;
  border-radius: 1.5rem;
}
.summary-band h3 {
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--bet);
}
.summary-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}
.summary-points p {
  position: relative;
  padding: 1rem 1.15rem;
  border-radius: 0.9rem;
}
/* The fine edges of the points of Pe scurt and the lines between the parts of the pages of text:
   the colour of the text over its ground, faint, so that only the colours of the games are used. */
.summary-points p::before,
.part::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid var(--face);
  border-radius: inherit;
  opacity: 0.3;
}
.rule-cards { columns: 2; column-gap: 1.25rem; }
.rule-card {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 1.5rem;
  break-inside: avoid;
}
.rule-card h3,
.side-card h2 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.25rem;
  font-weight: 800;
}
.rule-card p,
.side-card p { color: var(--ink-soft); }
.suit-tile {
  display: inline-grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  flex: none;
  background: var(--table);
  border-radius: 0.7rem;
}
.suit-tile .suit { width: 1.05rem; height: 1.05rem; }
.sources-heading { margin-top: 0.5rem; font-size: 1.1rem; color: var(--ink); }

/* The parts of the privacy policy and of the terms after Pe scurt: the heading on the left and the
   text on the right, with a fine line between two parts. */
.parts { padding-top: 1.5rem; }
.part {
  position: relative;
  padding-block: 2.5rem;
}
.part::before {
  inset: 0 0 auto;
  border: 0;
  border-top: 1px solid var(--ink);
  opacity: 0.15;
}
.part:first-child::before { display: none; }
.part h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); }
.part .prose p:first-child { font-size: 1.08rem; line-height: 1.6; color: var(--ink-soft); }

/* Contact: the form on a white card over the edge of the band, the address and the company on two
   white cards beside it, under it on a narrow screen. */
.contact-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.9fr);
  align-items: start;
  gap: 1.25rem;
  margin-top: -2.5rem;
}
.form-card { padding: clamp(1.5rem, 4vw, 2.5rem); }
.form-card > h2 { margin-bottom: 0.75rem; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; }
.form-card > p,
.contact-form p { margin-bottom: 0.9rem; color: var(--ink-soft); }
.contact-side { display: grid; gap: 1.25rem; }
.side-card { display: grid; gap: 0.6rem; padding: 1.5rem; }

/* Under the mouse, the cards of the games rise a little and the buttons a bit less; never with Reduce
   motion on, nor on a phone. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .game-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .game-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px var(--shadow), 0 16px 36px var(--shadow);
  }
  .button-gold,
  .card-play { transition: transform 0.15s ease; }
  .button-gold:hover,
  .card-play:hover { transform: translateY(-1px); }
}

/* From a tablet up, a card alone on its row of two takes the whole row; from a computer up, it lays
   its parts side by side, with the button on the right. */
@media (min-width: 35em) {
  .game-card-wide { grid-column: 1 / -1; }
}
@media (min-width: 54em) {
  .game-card-wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 2rem;
  }
  .game-card-wide > * { grid-column: 1; }
  .game-card-wide > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
    margin: 0;
    padding: 0 3rem 0 0;
  }
  .game-card-wide .game-heading a { flex-direction: row; align-items: center; }
}

/* Just wider than a tablet, the column of the fan is narrower than the fan, whose last card touched
   the edge of the screen: there the fan is smaller (decision 168). */
@media (min-width: 54.01em) and (max-width: 64em) {
  .fan { transform: scale(0.84); }
}
/* A tablet: the band in one column, without the fan, so the name and what the games are come first
   (decision 168); the facts two by two; the parts of Acasa one under the other; the games of poker
   one under the other. */
@media (max-width: 54em) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: 1.75rem 4.5rem; }
  .fan { display: none; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { border-left: 0; }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--table); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .games-poker { grid-template-columns: minmax(0, 1fr); }
}

/* A phone: everything in one column. */
@media (max-width: 35em) {
  body { font-size: 1rem; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact + .fact { border-left: 0; border-top: 1px solid var(--table); }
  .games,
  .steps { grid-template-columns: minmax(0, 1fr); }
  .game-group { padding: 1.25rem; }
  .closing-band { padding: 1.75rem; }
  .section { padding-top: 3.5rem; }
}

/* Big text on a narrow screen (decision 152, points 2 and 15): when a line of the page holds fewer
   than 16 em of its text, as on a phone with the biggest sizes of text, the headings grow less than
   the text, as those of the iPhone do, and the spaces around the words shrink, so that the words keep
   their lines; the arrow of the gold buttons, only seen, goes away. The em of a container query is
   that of the text of the page, so this follows the setting of the phone, which the widths of the
   media queries above do not. Browsers without container queries keep the sizes above. */
.page { container: page / inline-size; }
@container page (max-width: 16em) {
  .wrap {
    padding-left: max(0.6rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.6rem, env(safe-area-inset-right, 0px));
  }
  .hero h1 { font-size: 1.7rem; }
  .split h2,
  .section-head h2,
  .closing-band h2,
  .closing-title { font-size: 1.25rem; }
  .game-card h3,
  .game-group > .game-heading { font-size: 1.2rem; }
  .game-card h4,
  .step h3 { font-size: 1.1rem; }
  .lead,
  .prose p:first-child { font-size: 1.1rem; }
  .fact,
  .game-card,
  .step,
  .closing-band { padding: 0.75rem; }
  .game-group { padding: 0.5rem; }
  .game-group,
  .closing-band { border-radius: 1rem; }
  .game-group > .game-heading .game-icon { width: 2.5rem; height: 2.5rem; }
  .form-status { padding: 0 0.6rem 0.25rem; }
  .tag { padding: 0.15rem 0.5rem; }
  .card-play { padding: 0.5rem 0.75rem; }
  .button-gold { padding: 0.6rem 1rem; }
  .button-gold::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* The pages of decision 157 on a tablet and on a phone: the band without its drawing, as on Acasa
   (decision 168), the cards of the rules and of Contact in one column. */
@media (max-width: 54em) {
  .page-band .hero { padding-block: 1.75rem 4.5rem; }
  .art { display: none; }
  .rule-cards { columns: 1; }
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 35em) {
  .summary-band { padding: 1.25rem; }
  .part { padding-block: 2rem; }
}
@container page (max-width: 16em) {
  .page-band h1 { font-size: 1.4rem; }
  .intro-card h2,
  .form-card > h2 { font-size: 1.25rem; }
  .part h2,
  .rule-card h3,
  .side-card h2,
  .summary-band h3 { font-size: 1.1rem; }
  .intro-card,
  .rule-card,
  .summary-band,
  .summary-points p,
  .form-card,
  .side-card { padding: 0.75rem; }
  .summary-band { border-radius: 1rem; }
  /* The suit stands at the start of the first line of its heading, as a letter would. */
  .rule-card h3,
  .side-card h2 { display: block; }
  .suit-tile { width: 1.6rem; height: 1.6rem; margin-right: 0.4rem; vertical-align: -0.3em; border-radius: 0.5rem; }
  .suit-tile .suit { width: 0.9rem; height: 0.9rem; }
}