/*
 * Puzzle Picnic site pages (privacy, terms, support, ...; the start page is the web app). Direction: PAPER & INK, same tokens as the app (src/shell/theme.css).
 * Warm newsprint ground, near-black ink, one signal colour, hairline rules, hard offset shadows.
 * System fonts only; no external requests. Light and dark follow the OS.
 */

:root {
  --paper: #f2ecdf;
  --paper-raised: #faf6ec;
  --paper-sunk: #e7dfcd;
  --ink: #1c1a16;
  --ink-soft: #4f493e;
  --rule: rgb(28 26 22 / 0.16);
  --rule-strong: rgb(28 26 22 / 0.88);
  --signal: #c8402a;
  --on-signal: #fffaf0;
  --hue-sudoku: #27427a;
  --hue-bridges: #a8681a;
  --hue-ships: #1d6a72;
  --game: var(--ink);
  --card: #1c1a16;
  --on-card: #efe7d6;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, "Noto Serif", Georgia, serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;

  --text-sm: 0.875rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem);
  --text-display: clamp(2.5rem, 1.7rem + 4.2vw, 4.25rem);
  --track-eyebrow: 0.16em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --radius-m: 12px;
  --radius-l: 22px;
  --offset: 6px;
  --measure: 68ch;
  --page: 70rem;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #15130f;
    --paper-raised: #1e1b16;
    --paper-sunk: #0f0d0a;
    --ink: #efe7d6;
    --ink-soft: #c2baa8;
    --rule: rgb(239 231 214 / 0.16);
    --rule-strong: rgb(239 231 214 / 0.85);
    --signal: #ff7f5f;
    --on-signal: #1a0f0a;
    --hue-sudoku: #8fa8e6;
    --hue-bridges: #e0a85a;
    --hue-ships: #6fc4cc;
    --card: #efe7d6;
    --on-card: #1c1a16;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

main:focus {
  outline: none;
}

[data-game="sudoku"] { --game: var(--hue-sudoku); }
[data-game="bridges"] { --game: var(--hue-bridges); }
[data-game="ships"] { --game: var(--hue-ships); }

img,
svg {
  max-width: 100%;
}

a {
  color: var(--ink);
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--signal);
}

:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection {
  background: var(--signal);
  color: var(--on-signal);
}

.skip {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 10;
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-m);
}

.skip:focus {
  top: var(--space-3);
}

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: max(var(--space-5), env(safe-area-inset-left, 0px)) max(var(--space-5), env(safe-area-inset-right, 0px));
}

/* ---- Type ---- */
h1,
h2,
h3,
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 {
  font-size: var(--text-display);
  text-wrap: balance;
}

h2 {
  font-size: var(--text-xl);
  padding-top: var(--space-4);
  border-top: 2px solid var(--rule-strong);
  margin-bottom: var(--space-4);
}

h3 {
  font-size: var(--text-lg);
}

p {
  margin: 0 0 var(--space-4);
}

.lede {
  font-size: var(--text-md);
  color: var(--ink-soft);
  max-width: 46ch;
}

.muted {
  color: var(--ink-soft);
  font-size: var(--text-sm);
}

.eyebrow {
  margin: 0 0 var(--space-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
}

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--paper-sunk);
  padding: 0.1em 0.4em;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

/* ---- Masthead ---- */
.masthead {
  border-bottom: 1px solid var(--rule-strong);
  padding-top: env(safe-area-inset-top, 0px);
}

.masthead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

/* The wordmark: the app's Picnic Arcade logo. Rounded, heavy, upright; the site loads no web font. */
.brand-name {
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

/* The mark's brand colours are fixed (scripts/store-assets/lib/brand.mjs), not the page's hues. */
.logo-mark {
  --mk-edge: #221b35;
  --mk-sudoku: #3a54c9;
  --mk-bridges: #b9520a;
  --mk-ships: #08767e;
  --mk-lines: #9131b0;
  flex: none;
  overflow: visible;
}
.mk-depth { fill: var(--mk-edge); }
.mk-tile { stroke: var(--mk-edge); stroke-width: 26px; }
.mk-sudoku { fill: var(--mk-sudoku); }
.mk-bridges { fill: var(--mk-bridges); }
.mk-ships { fill: var(--mk-ships); }
.mk-lines { fill: var(--mk-lines); }
@media (prefers-color-scheme: dark) {
  .logo-mark {
    --mk-edge: #07050f;
    --mk-sudoku: #93a9ff;
    --mk-bridges: #ffae5c;
    --mk-ships: #4fd6cf;
    --mk-lines: #e39cf8;
  }
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 600;
  font-size: var(--text-sm);
}

.nav a {
  display: inline-block;
  padding-block: var(--space-2);
  text-decoration: none;
}

.nav a:hover,
.nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.lang-switch {
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: var(--space-1) var(--space-4) !important;
}

/* ---- Store links (plain text links, styled as ticket stubs) ---- */
.stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
}

.store,
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  background: var(--paper-raised);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 120ms ease-out, box-shadow 120ms ease-out;
}

.store:hover,
.btn:hover {
  color: var(--ink);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.store-soon {
  font-weight: 500;
  color: var(--ink-soft);
}

.btn {
  background: var(--signal);
  color: var(--on-signal);
  border-color: var(--signal);
  box-shadow: 4px 4px 0 var(--ink);
}

.btn:hover {
  color: var(--on-signal);
}

/* ---- Article pages (privacy, terms, support, delete-data, delete-account, 404) ---- */
.prose {
  padding-block: var(--space-7);
}

.prose > * {
  max-width: var(--measure);
}

.prose .table-wrap {
  max-width: none;
}

.article-head {
  margin-bottom: var(--space-6);
}

.article-head h1 {
  font-size: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
}

.article-head .lede {
  margin-top: var(--space-4);
}

.article-head .muted {
  margin-top: var(--space-4);
}

.prose section {
  margin-top: var(--space-6);
}

.prose ul,
.prose ol {
  padding-left: 1.3rem;
  margin: 0 0 var(--space-4);
}

.prose li {
  margin-bottom: var(--space-2);
}

.prose li::marker {
  color: var(--signal);
  font-weight: 700;
}

.summary {
  background: var(--paper-raised);
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  padding: var(--space-5);
  box-shadow: var(--offset) var(--offset) 0 var(--hue-ships);
}

.summary h2 {
  border-top: 0;
  padding-top: 0;
}

.toc ul {
  list-style: none;
  padding: 0;
}

.toc li {
  border-bottom: 1px solid var(--rule);
  margin: 0;
}

.toc a {
  display: block;
  padding: var(--space-3) 0;
  text-decoration: none;
  font-weight: 600;
}

.faq {
  scroll-margin-top: var(--space-5);
}

.contact-card {
  background: var(--paper-raised);
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  padding: var(--space-5);
  box-shadow: var(--offset) var(--offset) 0 var(--signal);
}

.contact-card h2 {
  border-top: 0;
  padding-top: 0;
}

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

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.steps li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--signal);
}

.link-list {
  list-style: none;
  padding: 0 !important;
}

.link-list a {
  display: inline-block;
  padding-block: var(--space-2);
  font-weight: 600;
}

/* ---- Tables (privacy, delete-data) ---- */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-m);
  background: var(--paper-raised);
}

table {
  width: 100%;
  min-width: 44rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--rule);
}

thead th {
  font-size: 0.75rem;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-strong);
}

tbody th {
  font-weight: 600;
  min-width: 14rem;
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

/* ---- Footer ---- */
.footer {
  margin-top: var(--space-7);
  border-top: 2px solid var(--rule-strong);
  padding-block: var(--space-6) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  font-size: var(--text-sm);
}

.footer-grid {
  display: grid;
  gap: var(--space-6);
}

.footer-brand {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  margin: 0 0 var(--space-2);
}

.footer .muted {
  margin: 0 0 var(--space-1);
}

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

.footer-list a {
  display: inline-block;
  padding-block: var(--space-1);
}

/* ---- Wider screens ---- */
@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
}

@media (max-width: 30rem) {
  .store {
    width: 100%;
    justify-content: center;
  }
}

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

  .store:hover,
  .btn:hover {
    transform: none;
  }
}

@media print {
  .masthead,
  .footer,
  .skip,
  .stores {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ---- Account deletion forms (/delete-account) ---- */
.account-form {
  display: grid;
  gap: var(--space-4);
  max-width: 32rem;
  margin-block: var(--space-4) var(--space-6);
}

.account-form[hidden],
.account-form [hidden] {
  display: none;
}

/* Continue with Apple / Google: the providers' own colours (brand rules), not the site's. */
.account-form button[data-provider] {
  border: 2px solid #000;
  background: #000;
  color: #fff;
  box-shadow: none;
}

.account-form button[data-provider="google"] {
  border-color: #747775;
  background: #fff;
  color: #1f1f1f;
}

.account-form label {
  display: grid;
  gap: var(--space-2);
  font-weight: 700;
}

.account-form input:not([type="checkbox"]),
.account-form textarea {
  width: 100%;
  padding: var(--space-3);
  border: 2px solid var(--rule-strong);
  border-radius: var(--radius-m);
  background: var(--paper-raised);
  color: var(--ink);
  font: inherit;
}

.account-form .check {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  font-weight: 400;
}

.account-form .check input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--signal);
}

.account-form button {
  justify-self: start;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.account-form button.btn-plain {
  display: inline-flex;
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  background: var(--paper-raised);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.account-form button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.account-form .status {
  min-height: 1.5em;
  margin: 0;
}

/* Honeypot: off-screen for people, a field like any other for bots. */
.account-form .trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Creators (/creators and the stats page /creator-stats/<token>): the colourful parts ----
 * Colour comes from the game hues through [data-game], as elsewhere. The site had three; these are the app's other
 * three (src/shell/theme.css), so trail gives a green for "paid". */
:root {
  --hue-lines: #9131b0;
  --hue-stars: #b02a5f;
  --hue-trail: #3a7a14;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hue-lines: #e39cf8;
    --hue-stars: #ff8fbd;
    --hue-trail: #9bdc6a;
  }
}

[data-game="lines"] { --game: var(--hue-lines); }
[data-game="stars"] { --game: var(--hue-stars); }
[data-game="trail"] { --game: var(--hue-trail); }

/* Tiles: a tinted, bubbly card per figure; the hue also casts the offset shadow. */
.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: 0 0 var(--space-6);
  padding: 0 !important;
  list-style: none;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 !important;
  padding: var(--space-4);
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--game) 22%, var(--paper-raised));
  box-shadow: 4px 4px 0 var(--game);
}

.tile-value,
.tile dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.tile-label,
.tile dt {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.tile dt {
  order: -1;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}

/* The one figure that matters most: solid hue, paper text. */
.tile-lead {
  grid-column: 1 / -1;
  background: var(--game);
  box-shadow: var(--offset) var(--offset) 0 var(--ink);
}

.tile-lead dt,
.tile-lead dd {
  color: var(--paper);
}

.tile-lead dd {
  font-size: var(--text-display);
  line-height: 1;
}

@media (min-width: 40rem) {
  .tiles-stats {
    grid-template-columns: 1.35fr 1fr 1fr;
  }

  .tiles-stats .tile-lead {
    grid-column: 1;
    grid-row: span 2;
    justify-content: flex-end;
  }
}

/* A pill: a game name, a payout status. The dot and the word carry it, never the colour alone. */
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: 0 !important;
  list-style: none;
}

.pills li {
  margin: 0;
}

.pill {
  --game: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.15em 0.75em;
  border: 1.5px solid var(--game);
  border-radius: 999px;
  background: color-mix(in srgb, var(--game) 14%, var(--paper-raised));
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.pill::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--game);
}

.pill[data-game="sudoku"] { --game: var(--hue-sudoku); }
.pill[data-game="bridges"] { --game: var(--hue-bridges); }
.pill[data-game="ships"] { --game: var(--hue-ships); }
.pill[data-game="lines"] { --game: var(--hue-lines); }
.pill[data-game="stars"] { --game: var(--hue-stars); }
.pill[data-game="trail"] { --game: var(--hue-trail); }

/* Numbered steps with a coloured marker each (extends .steps). */
.steps-color li {
  grid-template-columns: 2.75rem 1fr;
  align-items: start;
  padding-block: var(--space-4);
}

.steps-color li::before {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--game);
  color: var(--paper);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 2px 2px 0 var(--ink);
}

.steps-color li:nth-child(3n + 1) { --game: var(--hue-sudoku); }
.steps-color li:nth-child(3n + 2) { --game: var(--hue-bridges); }
.steps-color li:nth-child(3n + 3) { --game: var(--hue-ships); }

.steps-color h3 {
  margin: 0.2rem 0 var(--space-2);
}

.steps-color p {
  margin: 0;
}

.steps-color p + p {
  margin-top: var(--space-2);
}

.rules h3 {
  margin: var(--space-5) 0 var(--space-2);
}

/* A long email address wraps inside its card on a phone. */
.contact-card a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

/* A checklist: a green tick per thing to do; .checklist-no puts a red cross per thing not to do. */
.checklist {
  --game: var(--hue-trail);
  list-style: none;
  padding: 0 !important;
}

.checklist-no {
  --game: var(--signal);
}

.checklist li {
  position: relative;
  padding-left: 2.1rem;
}

.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--game);
  color: var(--paper);
  font-size: 0.8rem;
  font-weight: 800;
}

.checklist-no li::before {
  content: "\2715";
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-6);
}

.contact-card .cta-row {
  margin: var(--space-5) 0 0;
}

/* ---- Creator stats (/creator-stats/<token>, rendered by the Worker) ----
 * The tiles above, then every block in the summary card: hairline rows like .toc, the scrollable table. */
.portal-totals h2 {
  border-top: 0;
  padding-top: 0;
}

.ledger {
  margin: 0 0 var(--space-4);
}

.ledger > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.ledger > div:last-child {
  border-bottom: 0;
}

.ledger dt {
  min-width: 4rem;
  font-weight: 600;
}

.ledger dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Every block is the site's summary card; .portal-card only trims it. A table inside runs to the card's edges, so the
 * card is its frame. */
.portal-card {
  overflow-wrap: break-word;
}

.portal-card > :last-child {
  margin-bottom: 0;
}

.portal-card > .stats-wrap {
  margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  border: 0;
  border-top: 1px solid var(--rule-strong);
  border-radius: 0 0 calc(var(--radius-m) - 2px) calc(var(--radius-m) - 2px);
}

/* A shadow on the right edge while there are more columns to scroll to; the cover scrolls with the table. */
.stats-wrap {
  background:
    linear-gradient(to left, var(--paper-raised) 40%, transparent) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, var(--rule), transparent) right / 0.9rem 100% no-repeat scroll,
    var(--paper-raised);
}

.stats-table {
  min-width: 34rem;
}

.stats-table th,
.stats-table td {
  padding-inline: 0.6rem;
  vertical-align: middle;
}

.stats-table th:first-child {
  padding-left: var(--space-4);
}

.stats-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Headers wrap (whole words) and track a little tighter, so six columns fit the reading column in Dutch too. */
.stats-table thead th {
  letter-spacing: 0.06em;
}

.stats-table thead .num {
  white-space: normal;
}

/* The month or period stays in view while the figures scroll sideways on a phone. */
.stats-table th:first-child {
  position: sticky;
  left: 0;
  min-width: 0;
  white-space: nowrap;
  background: var(--paper-raised);
  box-shadow: inset -1px 0 0 var(--rule);
}

/* The month's earnings with a bar beside the figure, in tenths of the best month (no inline style: data-w is 1..10). */
.earn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.bar-track {
  display: block;
  flex: none;
  width: 2.75rem;
  height: 6px;
  border-radius: 3px;
  background: var(--rule);
  overflow: hidden;
}

.bar {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--hue-ships);
}

.bar[data-w="1"] { width: 10%; }
.bar[data-w="2"] { width: 20%; }
.bar[data-w="3"] { width: 30%; }
.bar[data-w="4"] { width: 40%; }
.bar[data-w="5"] { width: 50%; }
.bar[data-w="6"] { width: 60%; }
.bar[data-w="7"] { width: 70%; }
.bar[data-w="8"] { width: 80%; }
.bar[data-w="9"] { width: 90%; }
.bar[data-w="10"] { width: 100%; }

.portal-retry {
  margin-block: var(--space-5) var(--space-6);
}

.portal-note {
  margin-top: var(--space-5);
}

/* ---- Game pages (/sudoku, /bridges, ...: src/render/games.js) ---- */
.game-play {
  margin-block: var(--space-5) var(--space-2);
}

.game-banner {
  display: block;
  width: 100%;
  height: auto;
  margin-block: var(--space-6);
  border: 2px solid var(--ink);
  border-radius: var(--radius-m);
  box-shadow: 4px 4px 0 var(--ink);
}

/* "Also known as ...": the other names a search may use, right under the h1. */
.aka {
  margin-top: var(--space-2);
  font-weight: 700;
  color: var(--ink-soft);
}

/* First moves and questions: each an h3 with its answer block. */
.game-page h3 {
  margin-block: var(--space-5) var(--space-2);
}

.sources a {
  overflow-wrap: anywhere;
}

.game-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

/* Brand, games, legal, help and work: five columns once there is room. */
@media (min-width: 64rem) {
  .footer-grid {
    grid-template-columns: 1.5fr repeat(4, 1fr);
  }
}