/*
 * quackpath.com/play/ (the Weekly Challenge index and the per-game landings). The app's look: a flat surface
 * with one purple wash from the top-left (BlobBackdrop), flat panels in each game's deep ink, Plus Jakarta Sans,
 * the fixed purple/orange pair, no outlines, no shadows, no emoji.
 *
 * The pages carry a strict CSP (no third-party fonts, no inline style attributes): Plus Jakarta Sans is self-hosted
 * under /play/fonts/ (SIL OFL 1.1, fonts/OFL.txt) and each game's ink is a class, never a style="" attribute.
 */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/play/fonts/jakarta-600.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/play/fonts/jakarta-700.woff2") format("woff2");
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/play/fonts/jakarta-800.woff2") format("woff2");
}

.ink--hatch {
  --ink: #1B0F3A;
}

.ink--flock {
  --ink: #0E2433;
}

.ink--echo {
  --ink: #26102F;
}

.ink--dash {
  --ink: #33170C;
}

:root {
  --bg: #fdfdfd;
  --on: #191919;
  --muted: #5a5a5a;
  --soft: #eeeef2;
  --purple: #6a1cf6;
  --purple-ink: #6a1cf6;
  --wash: rgba(106, 28, 246, 0.21);
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191919;
    --on: #f7f7f7;
    --muted: #b8b8b8;
    --soft: #2c2c31;
    --purple-ink: #b99cff;
    --wash: rgba(106, 28, 246, 0.5);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--on);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

.wash {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(130% 62% at 0% 0%, var(--wash) 0%, rgba(106, 28, 246, 0) 72%);
}

[dir="rtl"] .wash {
  background: radial-gradient(130% 62% at 100% 0%, var(--wash) 0%, rgba(106, 28, 246, 0) 72%);
}

.top,
.wrap,
.foot {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

.top {
  display: flex;
  align-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px 8px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  font-size: 20px;
}

.brand img {
  display: block;
}

.wrap {
  flex: 1 0 auto;
  padding: 8px 16px 32px;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0 4px;
}

.title {
  margin: 4px 0 10px;
  font-size: clamp(34px, 9vw, 56px);
  font-weight: 800;
  line-height: 1.08;
}

.eyebrow {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--purple-ink);
}

.wordmark {
  margin: 0;
  font-size: clamp(60px, 18vw, 104px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
}

.lede {
  max-width: 32em;
  margin: 10px auto 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--soft);
  font-weight: 700;
  font-size: 15px;
}

[dir="rtl"] .chip {
  padding: 6px 6px 6px 14px;
}

.chip img {
  border-radius: 50%;
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 28px 0 32px;
}

@media (min-width: 640px) {
  .cards {
    grid-template-columns: 1fr 1fr;
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 20px 22px;
  border-radius: 28px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  transition: transform 250ms cubic-bezier(0.237, 0.138, 0.235, 1.024);
}

.card:active {
  transform: scale(0.98);
}

.card .art {
  align-self: center;
  width: 100%;
  max-width: 272px;
  height: auto;
  margin: 2px 0 12px;
}

.card-title {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
}

.card-line {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0.9;
}

.card-langs {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0.62;
}

.stage {
  width: 100%;
  max-width: 360px;
  margin: 24px auto 22px;
  padding: 22px;
  border-radius: 30px;
  background: var(--ink);
}

.stage .art {
  display: block;
  width: 100%;
  height: auto;
}

.get {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 16px;
  text-decoration: none;
  transition: transform 250ms cubic-bezier(0.237, 0.138, 0.235, 1.024);
}

.btn:active {
  transform: scale(0.96);
}

.btn--primary {
  min-width: 240px;
  background: var(--purple);
  color: #fff;
}

.btn--soft {
  background: var(--soft);
  color: var(--on);
}

.hero .btn--primary {
  margin-bottom: 12px;
}

.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Play in the browser (play.quackpath.com): the first thing to do here, no account. */
.btn--play {
  gap: 10px;
}

.btn--play .ico {
  width: 18px;
  height: 18px;
}

.hero .note--play,
.get .note--play {
  margin: 0 auto 18px;
}

/* The store badges: the black pill with the store's own mark, like quackpath.com's buttons and the official
   badges. A hairline keeps the edge visible on the dark surface. */
.store {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 170px;
  min-height: 54px;
  padding: 0 20px 0 16px;
  border-radius: 999px;
  background: #0b0b0f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  color: #fff;
  text-decoration: none;
  text-align: start;
}

.store-mark {
  display: grid;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  place-items: center;
}

.store--play .store-mark {
  width: 23px;
  height: 23px;
}

.store-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.store-text small,
.store-text strong {
  display: block;
  white-space: nowrap;
}

.store-text small {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  opacity: 0.82;
}

.store-text strong {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.05;
}

/* Next week's ballot: look here, vote in the app (vote.md 5). The track of the cycle, the tiles, the count. */
.ballot {
  max-width: 560px;
  margin: 0 auto 28px;
  padding: 16px;
  border-radius: 28px;
  background: var(--soft);
}

.ballot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 2px 12px;
}

.ballot-eyebrow {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.ballot-when {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.track {
  display: flex;
  justify-content: space-between;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.stop-disc {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent, #6a1cf6);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.stop--ballot .stop-disc,
.stop--tbd .stop-disc {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--muted);
  color: var(--muted);
}

.stop--played .stop-disc {
  opacity: 0.45;
}

.stop--live .stop-disc {
  box-shadow: 0 0 0 4px rgba(255, 119, 51, 0.55);
}

.vote-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 8px;
}

.vote-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  min-height: 140px;
  padding: 10px;
  border: 0;
  border-radius: 20px;
  background: var(--ink, #1b0f3a);
  color: #fff;
  font: inherit;
  text-align: start;
  cursor: pointer;
  overflow: hidden;
}

/* A guest's pick is a bookmark, not a vote: a dashed outline, never the app's accent ring and post-it. */
.vote-tile--picked {
  outline: 2px dashed rgba(255, 255, 255, 0.85);
  outline-offset: -6px;
}

.vote-art {
  position: relative;
  display: block;
  width: 100%;
  flex: 1 1 auto;
  min-height: 64px;
  margin-bottom: 6px;
}

.vote-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Sized by the art's height, centred: sized by the width, the decided ballot's one wide tile grew a disc taller than
   the tile itself. */
.vote-blob {
  position: absolute;
  left: 50%;
  top: 6%;
  height: 88%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent, #6a1cf6);
  opacity: 0.55;
  transform: translateX(-50%);
}

.vote-title {
  max-width: 100%;
  font-size: 18px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.vote-blurb {
  max-width: 100%;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  opacity: 0.75;
  overflow-wrap: anywhere;
}

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

.ballot-count {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.ballot-count::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-inline-end: 8px;
  border-radius: 50%;
  background: #ff7733;
  vertical-align: middle;
}

.ballot-foot .btn--primary {
  min-width: 0;
}

.ballot-pick-note,
.ballot-closed {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--muted);
}

.ballot-closed {
  margin: 0;
  font-weight: 700;
}

/* This week's leaderboard and last week's winners (play.js fills it from the public board; data-nosnippet). One flat
   panel like the ballot; each row a light version of the app's nameplate: the rank or the post-it the place holds,
   initials on the player's banner colour (a soft wash from the reading start), the flag and name of the language
   played, points. Logical properties throughout, so Arabic mirrors; numbers stay left to right. */
.board {
  max-width: 560px;
  margin: 0 auto 28px;
  padding: 18px 14px 20px;
  border-radius: 28px;
  background: var(--soft);
}

.board-title {
  margin: 0 4px 14px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.board-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0 4px 10px;
}

.board-h {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.board-game {
  color: var(--on);
  letter-spacing: 0.02em;
  text-transform: none;
}

.board-when {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.brows,
.podium,
.tried {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brow {
  display: grid;
  grid-template-columns: 32px 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding-block: 6px;
  padding-inline: 8px 14px;
  border-radius: 18px;
  background: linear-gradient(90deg, var(--banner, rgba(0, 0, 0, 0)) 0%, rgba(0, 0, 0, 0) 58%), var(--bg);
}

[dir="rtl"] .brow {
  background: linear-gradient(270deg, var(--banner, rgba(0, 0, 0, 0)) 0%, rgba(0, 0, 0, 0) 58%), var(--bg);
}

.brow + .brow {
  margin-top: 6px;
}

.brow-lead {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.brow-rank {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.brow-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--banner-solid, var(--purple));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.brow--anon .brow-disc,
.pod--anon .brow-disc,
.tried-item--anon .brow-disc {
  background: var(--soft);
  color: var(--muted);
}

.brow-disc svg {
  display: block;
  width: 18px;
  height: 18px;
}

.brow-who,
.pod-who,
.tried-who {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
}

.board-lang {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flag {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.brow-pts,
.pod-pts {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* The post-it notes: an outline chip on This week (who holds the place now), filled on Last week (who won it). */
.pi {
  display: block;
  width: 32px;
  height: 32px;
  font-family: var(--font);
}

.pi--outline {
  color: var(--on);
}

.board-note,
.board-empty,
.board-next {
  margin: 12px 4px 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--muted);
}

.board-empty,
.board-next {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--on);
}

.board-last {
  margin-top: 22px;
}

/* Between weeks with no next week scheduled: last week's winners sit right under the title. */
.board-week:empty + .board-last {
  margin-top: 0;
}

/* Last week's podium: gold in the middle and a step taller, silver at the reading start, bronze at the end (the grid
   mirrors in Arabic). The DOM keeps 1, 2, 3 for screen readers. */
.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
}

.pod {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  grid-row: 1;
  min-width: 0;
  padding: 12px 6px 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--banner, rgba(0, 0, 0, 0)) 0%, rgba(0, 0, 0, 0) 70%), var(--bg);
  text-align: center;
}

.pod--silver {
  grid-column: 1;
}

.pod--gold {
  grid-column: 2;
  padding-block: 18px 22px;
}

.pod--bronze {
  grid-column: 3;
}

.pod-note .pi {
  width: 44px;
  height: 44px;
}

.pod--gold .pod-note .pi {
  width: 52px;
  height: 52px;
}

/* A narrow tile puts the language's name under its flag and lets a long one wrap, never cut to "Por...". */
.pod-who {
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 6px;
  max-width: 100%;
  font-size: 13px;
  line-height: 1.2;
}

.pod-who .board-lang {
  max-width: 100%;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  text-align: center;
}

/* "I tried" (places 4 to 13): compact pills, the place, the initials and the flag. */
.tried-h {
  display: flex;
  margin: 18px 4px 10px;
}

/* The "I tried" note: soft lilac paper, purple ink, a small tilt (the same in both themes, like the duck item). */
.tried-note {
  display: inline-block;
  padding: 5px 12px 6px;
  border-radius: 4px 4px 12px 4px;
  background: #e6dbff;
  color: #6a1cf6;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  transform: rotate(-2deg);
}

[dir="rtl"] .tried-note {
  border-radius: 4px 4px 4px 12px;
  transform: rotate(2deg);
}

.tried {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tried-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  padding-block: 3px;
  padding-inline: 10px 8px;
  border-radius: 999px;
  background: var(--bg);
}

.tried-rank {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.tried-disc {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.tried-who .flag {
  width: 16px;
  height: 16px;
}

.board-join {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  text-align: center;
}

.board-join-line {
  max-width: 26em;
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

/* While a slow answer is on its way: calm placeholder rows, a slow fade and nothing that slides or shines. */
.brow--skel .brow-disc {
  background: var(--soft);
}

.skel {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: var(--soft);
}

.skel--head {
  width: 40%;
  height: 10px;
  background: var(--bg);
}

.skel--line {
  width: 70%;
}

.skel--pts {
  width: 28px;
}

.board[aria-busy="true"] .brows--skel {
  animation: board-wait 1.1s ease-in-out infinite alternate;
}

@keyframes board-wait {
  from {
    opacity: 1;
  }

  to {
    opacity: 0.55;
  }
}

/* Read by screen readers, never drawn ("Points: 164", the note a podium place won). */
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 359px) {
  .board {
    padding-inline: 10px;
  }

  .brow {
    grid-template-columns: 28px 30px minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: 6px 10px;
  }

  .brow-lead {
    width: 28px;
  }

  .brow-disc {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .brow-lead .pi {
    width: 28px;
    height: 28px;
  }

  .pod-note .pi {
    width: 38px;
    height: 38px;
  }

  .pod--gold .pod-note .pi {
    width: 44px;
    height: 44px;
  }
}

.note {
  max-width: 30em;
  margin: 14px auto 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--muted);
}

.get .note {
  margin: 0 auto 4px;
}

/* The claim page without a usable code: the route in the app as numbered steps on one flat panel (the app's
   surface language: no outline, no shadow), each number in a purple disc. Logical properties, so Arabic mirrors. */
body[data-page="claim"] .stores {
  margin-top: 18px;
}

.steps-box {
  width: 100%;
  max-width: 460px;
  margin: 22px auto 18px;
  padding: 18px 18px 20px;
  border-radius: 24px;
  background: var(--soft);
  text-align: start;
}

.steps-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--purple-ink);
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--on);
  counter-increment: step;
}

.steps li + li {
  margin-top: 12px;
}

.steps li::before {
  content: counter(step);
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-top: -2px;
  place-items: center;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.others {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.others a {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}

.others a.all {
  background: var(--soft);
  color: var(--on);
}

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  padding: 20px 16px calc(24px + env(safe-area-inset-bottom));
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.foot a {
  color: inherit;
  text-decoration: none;
}

/* The index in each language (/play/ and /play/<code>/, the pages people find in search). The h1 names the Weekly
   Challenge, then says what it is on a smaller second line: one visible heading whose text is the search h1. Then,
   all visible, never folded away: what the game is (.about), the questions people ask (.faq) and every language
   version of the page (.langs). Logical properties throughout, so Arabic mirrors. */
.title--seo {
  overflow-wrap: break-word;
}

.title-lead,
.title-sub {
  display: block;
  text-wrap: balance;
}

/* ウィークリーチャレンジ is one 11-character word with no space to break at: a size that keeps it on one line on a
   phone (balanced wrapping splits it after ウィークリー at 320 px). */
.title-lead:lang(ja) {
  font-size: clamp(26px, 7.4vw, 56px);
}

.hero > .lede + .btn--play {
  margin-top: 20px;
}

.title-sub {
  margin-top: 6px;
  font-size: clamp(21px, 5.6vw, 30px);
  line-height: 1.2;
  color: var(--purple-ink);
}

.chip--lang {
  margin: 0 0 6px;
  color: var(--on);
  text-decoration: none;
}

.about,
.faq,
.langs {
  max-width: 680px;
  margin-inline: auto;
}

.about {
  margin-block: 0 32px;
}

.about p {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  text-align: start;
}

.faq {
  margin-block: 40px 0;
  text-align: start;
}

.faq-title {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}

.faq-item {
  padding: 16px 18px 18px;
  border-radius: 24px;
  background: var(--soft);
}

.faq-item + .faq-item {
  margin-block-start: 10px;
}

.faq h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

.faq-item p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--muted);
}

.langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-block: 36px 0;
}

.langs a {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--on);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.langs a[aria-current="page"] {
  background: var(--purple);
  color: #fff;
}

/* "How to play" and "Learning a language?" on the language pages, and the game pages' sections (SEO_PLAN
   2026-10-14): the same flat panels and type as the FAQ, all visible, never folded away. Logical properties, so
   Arabic mirrors. */
.howto,
.learn,
.rules,
.why,
.langs-box {
  max-width: 680px;
  margin-inline: auto;
  text-align: start;
}

.howto,
.learn,
.why,
.langs-box {
  margin-block: 40px 0;
}

/* The app section follows "Learning a language?" on the language pages. */
.learn {
  margin-block-end: 32px;
}

.howto-title,
.learn-title,
.rules-title,
.why-title,
.langs-title {
  margin: 0 0 14px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
}

.howto-item {
  padding: 16px 18px 18px;
  border-radius: 24px;
  background: var(--soft);
  scroll-margin-top: 16px;
}

.howto-item + .howto-item {
  margin-block-start: 10px;
}

.howto-item h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
}

.howto-item p,
.why p,
.learn p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--muted);
}

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

.how-list li {
  position: relative;
  padding-inline-start: 22px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
}

.how-list li + li {
  margin-block-start: 10px;
}

.how-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--purple);
}

.learn-main {
  max-width: 100%;
  margin-block: 16px 0;
  padding: 12px 22px;
  gap: 10px;
  text-align: center;
  line-height: 1.3;
}

.learn-main .ico {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.learn p.learn-choose {
  margin-block: 20px 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--purple-ink);
}

.learn-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.learn-langs a {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--on);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.rules {
  margin-block: 40px 0;
}

.rules-note {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--muted);
}

.rules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .rules-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.rule {
  padding: 14px 16px 16px;
  border-radius: 20px;
  background: var(--soft);
}

.rule h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}

.rule p {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--muted);
}

.rule p.rule-nums {
  color: var(--purple-ink);
  font-weight: 800;
}

.langs-box .langs {
  margin-block: 0;
  justify-content: flex-start;
}

/* A game page: the game's name is the big wordmark, what it is the purple line under it. */
.title--game .title-lead {
  font-size: clamp(56px, 16vw, 96px);
  line-height: 1;
  letter-spacing: -0.01em;
}

.title--game .title-sub {
  margin-top: 10px;
}

.hero--game .chip--lang {
  margin: 16px 0 0;
}

.hero--game + .about {
  margin-block-start: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .btn {
    transition: none;
  }

  .board[aria-busy="true"] .brows--skel {
    animation: none;
  }
}