/* AUTO-GENERATED — do not edit.
 * Built by scripts/build-chrome-css.py from:
 *   shared/css/tokens.css
 *   shared/css/reset.css
 *   shared/css/components.css
 *   platform/topbar.css
 *   platform/footer.css
 * Re-run that script (or scripts/bump-assets.py) after editing sources.
 */


/* === shared/css/tokens.css === */
/**
 * Design tokens.
 *
 * The only place platform-wide colours, fonts and spacing are defined.
 * Games may read these but should define their own board colours locally,
 * namespaced under their root class, so they stay portable.
 *
 * All token names are prefixed `--pd-` to guarantee they never collide with
 * the unprefixed custom properties games declare for themselves.
 *
 * Bundled into shared/css/chrome.css — after editing run:
 *   python3 scripts/build-chrome-css.py
 * (also run by scripts/bump-assets.py).
 */

:root,
html[data-theme="light"] {
  color-scheme: light;

  /* Typography
     Baloo 2 — game titles, playable letters/numbers, score figures.
     Source Sans 3 — product UI (hub chrome, modals, CTAs, copy). */
  --pd-font-ui: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --pd-font-body: "Baloo 2", system-ui, -apple-system, sans-serif;
  --pd-font-heading: "Baloo 2", system-ui, -apple-system, sans-serif;
  --pd-font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --pd-weight-regular: 400;
  --pd-weight-medium: 500;
  --pd-weight-bold: 700;
  --pd-weight-black: 800;

  /* Colour */
  --pd-colour-background: #ffffff;
  --pd-colour-surface: #ffffff;
  --pd-colour-text: #1a1a1a;
  --pd-colour-heading: #161613;
  --pd-colour-muted: #6b6b66;
  --pd-colour-border: #c8c8c8;
  --pd-colour-border-strong: #1a1a1a;
  --pd-colour-accent: #2e9e5b;
  --pd-colour-accent-hover: #278a4f;
  --pd-colour-accent-shadow: transparent;
  --pd-colour-danger: #f22f2c;
  /* Overlay shells stay transparent; wash is #pd-page-frost.
     Mobile/light fade vs desktop dark dim are swapped in CSS by breakpoint. */
  --pd-colour-backdrop: transparent;
  --pd-colour-backdrop-frost: rgba(255, 255, 255, 0.82);
  --pd-colour-backdrop-dim: rgba(0, 0, 0, 0.55);
  /* Legacy solid token — kept as page-tone stand-in (no more dim toolbars). */
  --pd-colour-backdrop-solid: #ffffff;
  --pd-colour-press: rgba(26, 26, 26, 0.08);

  /* Flat page fill — no gradients (they read as a shadow band at the top). */
  --pd-page-background-color: #ffffff;
  --pd-page-background-image: none;
  --pd-page-background: var(--pd-page-background-color);
  /* Modal sheets — clean white + hairline border */
  --pd-modal-surface: #ffffff;

  /* Hub card / game welcome tones */
  --pd-tone-18words: #dceee3;
  --pd-tone-9words: #d4ebe8;
  --pd-tone-wordsnake: #f2ddd2;
  --pd-tone-themiddle: #f2e6c4;
  --pd-tone-zanagrams: #dce4f5;
  --pd-tone-zanagramsmaster: #fde4cc;
  --pd-tone-sunflowers: #f4edbe;
  --pd-tone-sunflowersmaster: #f4edbe;
  --pd-tone-headlines: #e0e8d4;
  --pd-tone-definitions: #e0e8d4;
  --pd-tone-experiments: #f0d4d2;

  /* Radius */
  --pd-radius-small: 8px;
  --pd-radius-medium: 16px;
  --pd-radius-large: 24px;
  --pd-radius-pill: 999px;

  /* Spacing */
  --pd-spacing-1: 4px;
  --pd-spacing-2: 8px;
  --pd-spacing-3: 12px;
  --pd-spacing-4: 16px;
  --pd-spacing-5: 24px;
  --pd-spacing-6: 32px;
  --pd-spacing-7: 48px;
  --pd-spacing-8: 64px;

  /* Layout */
  --pd-content-width: 1403px;
  --pd-reading-width: 34rem;

  /* Elevation — kept flat so page transitions don't smear soft shadows. */
  --pd-shadow-card: none;
  --pd-shadow-modal: none;

  /* Modal shell — one language for platform + every game overlay card */
  --pd-modal-radius: 20px;
  --pd-modal-border: 1px solid color-mix(in srgb, var(--pd-colour-heading) 12%, transparent);
  --pd-modal-pad: 28px 22px 24px;
  --pd-modal-max-width: 400px;
  --pd-modal-title-size: 26px;
  --pd-modal-close-size: 48px;

  /* Motion */
  --pd-transition-fast: 0.12s ease;
  --pd-transition-base: 0.15s ease;
  --pd-ease-rise: cubic-bezier(0.22, 1, 0.36, 1);

  /* Stacking. Kept together so the order is reviewable in one place. */
  --pd-z-toast: 12000;
  --pd-z-modal: 10000;
}

/* Site-wide dark theme. Games remap their local board vars under the same
   `html[data-theme="dark"]` switch so chrome + puzzles stay in sync. */
html[data-theme="dark"] {
  color-scheme: dark;

  --pd-colour-background: #141412;
  --pd-colour-surface: #1c1c19;
  /* Soft warm greys — readable on #141412, less harsh than near-white. */
  --pd-colour-text: #c9c7bb;
  --pd-colour-heading: #dddace;
  --pd-colour-muted: #8e8e86;
  --pd-colour-border: #3a3a35;
  --pd-colour-border-strong: #a09e94;
  --pd-colour-accent: #3cb87a;
  --pd-colour-accent-hover: #2e9e5b;
  --pd-colour-accent-shadow: transparent;
  --pd-colour-danger: #ef5b58;
  --pd-colour-backdrop: transparent;
  --pd-colour-backdrop-frost: rgba(20, 20, 18, 0.72);
  --pd-colour-backdrop-dim: rgba(0, 0, 0, 0.7);
  --pd-colour-backdrop-solid: #141412;
  --pd-colour-press: rgba(255, 255, 255, 0.08);
  --pd-modal-surface: #1c1c19;

  --pd-page-background-color: #141412;
  --pd-page-background-image: none;
  --pd-page-background: var(--pd-page-background-color);

  --pd-tone-18words: #24362c;
  --pd-tone-9words: #243834;
  --pd-tone-wordsnake: #3a2c26;
  --pd-tone-themiddle: #3a3424;
  --pd-tone-zanagrams: #2a3142;
  --pd-tone-zanagramsmaster: #3a2c22;
  --pd-tone-sunflowers: #3a3420;
  --pd-tone-sunflowersmaster: #3a3420;
  --pd-tone-headlines: #2c3526;
  --pd-tone-definitions: #2c3526;
  --pd-tone-experiments: #3a2628;

  --pd-shadow-card: none;
  --pd-shadow-modal: none;
  --pd-modal-border: 1px solid color-mix(in srgb, var(--pd-colour-heading) 16%, transparent);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--pd-page-background-color, var(--pd-colour-background)) !important;
  color: var(--pd-colour-text);
}

/* Full-bleed page paint so wide viewports never show light gutters beside
   max-width game shells. Fill lives on html; body stays clear over it. */
html[data-theme="dark"] body.pd-game,
html[data-theme="dark"] body.pd-hub,
html[data-theme="dark"] .pd-game-root {
  background: transparent !important;
}

/* === shared/css/reset.css === */
/** Minimal reset. Deliberately small — it must not surprise game styles. */

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

/* Installed iPhone: percentage width can settle narrower than the screen
   after the first paint and leave the webview's white canvas on the right.
   The large viewport width stays the full screen. Safari tabs are unchanged. */
@media (display-mode: standalone) and (pointer: coarse) {
  html,
  body {
    width: 100lvw;
  }
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* Block iOS long-press loupe / callout across the site. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /* Disable double-tap zoom without swallowing quick successive taps/clicks. */
  touch-action: manipulation;
  /* Solid page fill (no gradients — they read as a band at the top). */
  background-color: var(--pd-page-background-color, var(--pd-colour-background));
  background-image: none;
  background-attachment: scroll;
  background-repeat: no-repeat;
  overscroll-behavior-y: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background-color: var(--pd-page-background-color, var(--pd-colour-background));
  color: var(--pd-colour-text);
  font-family: var(--pd-font-body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  overscroll-behavior-y: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Framed on a partner's page (class set by chrome-boot.js): `none` above would
   stop every swipe and wheel at the edge of the frame, so the partner's page
   could not be scrolled from over the game. */
html.pd-framed,
html.pd-framed body {
  overscroll-behavior: auto !important;
}

body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Hide scrollbars everywhere; pages and sheets still scroll. */
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Keep real text entry selectable / pasteable.
   !important so game-level `* { user-select: none }` cannot win — that
   combination blocks the space key in textareas on some mobile browsers. */
input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default;
}

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

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

/* No focus "black box" on click / tap. Keyboard users still get input
   carets and control state; chrome tools suppress their own rings. */
:focus {
  outline: none;
}

:focus-visible {
  outline: none;
}

/* === shared/css/components.css === */
/**
 * Platform primitives.
 *
 * Every class here is `pd-` prefixed. Game stylesheets must not restyle these;
 * if a game needs a different button, it declares its own inside its own
 * namespace. That keeps a game liftable into a standalone project.
 */

/* --- Buttons ------------------------------------------------------------ */

.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 18px;
  border: none;
  border-radius: var(--pd-radius-pill);
  font-family: var(--pd-font-ui);
  font-weight: var(--pd-weight-black);
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background var(--pd-transition-base),
    color var(--pd-transition-base),
    border-color var(--pd-transition-base),
    box-shadow var(--pd-transition-base),
    transform 0.06s ease;
}

.pd-btn:active {
  transform: scale(0.98);
}

.pd-btn svg {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.pd-btn-primary {
  background: var(--pd-colour-accent);
  color: #fff;
  box-shadow: none;
}

.pd-btn-secondary {
  padding: 13px 36px;
  background: transparent;
  color: var(--pd-colour-text);
  border: 3px solid var(--pd-colour-border-strong);
}

/* Hover invert only where a real pointer exists — on touch it sticks. */
@media (hover: hover) and (pointer: fine) {
  .pd-btn-primary:hover {
    background: var(--pd-colour-accent-hover);
  }
  .pd-btn-secondary:hover {
    background: var(--pd-colour-border-strong);
    color: var(--pd-colour-surface, #fff);
  }
}

@media (hover: none), (pointer: coarse) {
  .pd-btn-secondary:active {
    background: var(--pd-colour-press);
    transform: scale(0.97);
  }
}

/* --- Modal -------------------------------------------------------------- */

html.pd-modal-open,
html.pd-modal-open body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/*
  Freeze the page in place (top/position also set inline in modal.js).
  Avoid touch-action:none on html/body — it blocks bottom-sheet swipe on iOS.
*/
body.pd-modal-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
  padding-right: var(--pd-scroll-lock-pad, 0px);
}

html.pd-modal-open .pd-chrome {
  padding-right: var(--pd-scroll-lock-pad, 0px);
}

/*
  Modal cards and sheets on a game page are zoomed by the game's own scale
  (--pd-modal-scale, set by platform/fit-viewport.js: the stage scale,
  capped so the tallest card fits a short window), so their text and
  buttons match the board behind them. Viewport units and safe-area insets
  inside a zoomed box are multiplied by the zoom as well, so card sizes use
  these instead: calc(90 * var(--pd-ui-dvh)) is 90% of the screen at any
  scale. Off game pages the scale is 1 and they equal 1dvh / 1vw / env().
*/
:root {
  --pd-ui-dvh: calc(1dvh / var(--pd-modal-scale, 1));
  --pd-ui-vh: calc(1vh / var(--pd-modal-scale, 1));
  --pd-ui-vw: calc(1vw / var(--pd-modal-scale, 1));
  --pd-ui-safe-top: calc(env(safe-area-inset-top, 0px) / var(--pd-modal-scale, 1));
  --pd-ui-safe-bottom: calc(env(safe-area-inset-bottom, 0px) / var(--pd-modal-scale, 1));
}

.pd-modal {
  position: fixed;
  inset: 0;
  z-index: var(--pd-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  /* Fade wash is on #pd-page-frost; this layer catches clicks. */
  background: transparent;
  opacity: 0;
  transition: opacity var(--pd-transition-base);
  touch-action: none;
}

.pd-modal[hidden] {
  display: none;
}

.pd-modal.is-open {
  opacity: 1;
}

.pd-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--pd-modal-max-width, 400px);
  /* Leave room for Safari toolbars + safe areas so the card isn't clipped. */
  max-height: min(calc(70 * var(--pd-ui-dvh)), calc(100 * var(--pd-ui-dvh) - 48px - var(--pd-ui-safe-top) - var(--pd-ui-safe-bottom)));
  zoom: var(--pd-modal-scale, 1);
  /* The card clips; only .pd-modal-scroll moves. This is what stops iOS
     rubber-banding the page behind an open modal. */
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--pd-modal-surface, var(--pd-colour-surface));
  border: var(--pd-modal-border);
  border-radius: var(--pd-modal-radius, 22px);
  box-shadow: var(--pd-shadow-modal);
  box-sizing: border-box;
  transform: translateY(14px) scale(0.98);
  transition:
    transform 0.28s var(--pd-ease-rise, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity 0.22s ease;
  font-family: var(--pd-font-ui);
  color: var(--pd-colour-text);
}

.pd-modal.is-open .pd-modal-card {
  transform: none;
}

/* Desktop close: fade the wash only — don't reverse the enter slide. */
@media (min-width: 769px) {
  .pd-modal:not(.is-open) .pd-modal-card {
    transform: none;
    transition: none;
  }
}

.pd-modal-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--pd-modal-pad, 28px 22px 24px);
  overflow-x: hidden;
  overflow-y: auto;
  /* none > contain: stop scroll chaining and cut rubber-band bleed. */
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  background: transparent;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pd-modal-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.pd-modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: var(--pd-modal-close-size, 48px);
  height: var(--pd-modal-close-size, 48px);
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  color: var(--pd-colour-muted);
  cursor: pointer;
  transition: background var(--pd-transition-base), color var(--pd-transition-base);
}

.pd-modal-x:focus,
.pd-modal-x:focus-visible,
.pd-modal-x:active {
  outline: none;
  box-shadow: none;
}

.pd-modal-x:hover {
  background: var(--pd-colour-press);
  color: var(--pd-colour-heading);
}

.pd-modal-title {
  margin: 0 0 var(--pd-spacing-3);
  padding: 0 48px; /* keep title clear of the close control */
  font-family: var(--pd-font-heading);
  font-weight: 800;
  font-size: var(--pd-modal-title-size, 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--pd-colour-heading);
  box-sizing: border-box;
}

.pd-modal-message {
  margin: 0;
  font-family: var(--pd-font-ui);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--pd-colour-muted, #6b6b66);
  text-align: center;
}

.pd-modal-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 28px;
}

.pd-modal-actions .pd-btn {
  width: 100%;
  min-width: 0;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 17px;
  border-radius: 14px;
}

.pd-modal-actions .pd-btn-secondary {
  border-width: 1.5px;
  padding: 14px 28px;
}

.pd-dialog .pd-modal-title {
  margin-bottom: 12px;
}

.pd-how-copy {
  margin: 0;
}

.pd-modal:has(.pd-how-copy) .pd-modal-title,
.pd-modal-settings .pd-modal-title,
.pd-modal-feedback .pd-modal-title {
  margin-bottom: 30px;
}

@media (min-width: 769px) {
  .pd-modal-actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .pd-modal-actions .pd-btn {
    width: auto;
    min-width: 9.5rem;
  }
}

/* Mobile: full-width bottom sheet (slide up / down via .is-open) */
@media (max-width: 768px) {
  .pd-modal {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
    /* Keep sheet visible while it slides down — don't fade the whole layer. */
    opacity: 1;
    transition: none;
  }

  .pd-modal.is-open {
    opacity: 1;
  }

  .pd-modal-card,
  .pd-share-dialog .pd-modal-card,
  .pd-modal-archive .pd-modal-card,
  .pd-account-modal .pd-modal-card,
  .pd-plus-modal .pd-modal-card,
  .pd-complete-help-modal .pd-modal-card {
    --pd-sheet-y: 110%;
    width: 100%;
    max-width: none;
    height: calc(90 * var(--pd-ui-dvh));
    max-height: calc(90 * var(--pd-ui-dvh));
    border-radius: var(--pd-modal-radius, 20px) var(--pd-modal-radius, 20px) 0 0;
    border-bottom: 0;
    transform: translateY(var(--pd-sheet-y, 110%));
    transition: transform 0.34s var(--pd-ease-rise, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .pd-modal.is-open .pd-modal-card {
    --pd-sheet-y: 0px;
    transform: translateY(var(--pd-sheet-y, 0px));
  }

  .pd-modal-card.is-sheet-dragging {
    transition: none !important;
  }

  .pd-modal-handle {
    display: none;
  }

  .pd-modal-card {
    padding-top: 12px;
    /* Let JS own vertical drag; nested .pd-modal-scroll still pans when needed. */
    touch-action: none;
  }

  .pd-modal-scroll {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: calc(22px + var(--pd-ui-safe-bottom));
  }

  /* Spacers shrink away when the sheet overflows, so long content
     still starts at the top and remains scrollable. The after spacer
     has an 80px basis so the block sits ~40px above true center. */
  .pd-modal-scroll::before,
  .pd-modal-scroll::after {
    content: "";
    flex: 1 1 0;
    min-height: 0;
    pointer-events: none;
  }

  .pd-modal-scroll::after {
    flex-basis: 80px;
  }

  .pd-modal-title,
  .pd-modal-body {
    flex-shrink: 0;
    width: 100%;
  }

  /* Title / top of sheet: always dismissible (don't let pan-y steal). */
  .pd-modal-title,
  .pd-modal-handle,
  .pd-modal-x {
    touch-action: none;
  }
}

@media (min-width: 769px) {
  .pd-modal-handle {
    display: none;
  }
}

/* --- Share score (desktop) --------------------------------------------- */

.pd-share-dialog .pd-modal-card {
  max-width: 420px;
}

@media (max-width: 768px) {
  .pd-share-dialog .pd-modal-card,
  .pd-complete-help-modal .pd-modal-card {
    width: 100%;
    max-width: none;
    height: calc(90 * var(--pd-ui-dvh));
    max-height: calc(90 * var(--pd-ui-dvh));
  }
}

.pd-share-modal {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.pd-share-preview {
  margin: 0;
  padding: 16px 18px;
  max-height: min(calc(36 * var(--pd-ui-dvh)), 280px);
  overflow: auto;
  box-sizing: border-box;
  border: 2px solid var(--pd-colour-border-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pd-colour-heading) 6%, var(--pd-colour-surface));
  color: var(--pd-colour-text);
  font-family: var(--pd-font-ui);
  font-size: 15px;
  font-weight: var(--pd-weight-bold);
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  text-align: left;
}

.pd-share-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.pd-share-action {
  width: 100%;
  margin: 0;
}

.pd-share-action svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.pd-share-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
}

.pd-share-social .pd-share-action {
  gap: 8px;
  padding: 14px 12px;
  border: none;
  color: #fff;
  box-shadow: none;
}

.pd-share-social .pd-share-action svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.pd-share-fb {
  background: #1877f2;
}

.pd-share-x {
  background: #000;
}

@media (hover: hover) and (pointer: fine) {
  .pd-share-fb:hover {
    background: #166fe5;
  }
  .pd-share-x:hover {
    background: #222;
  }
}

/* --- Toast -------------------------------------------------------------- */

/* Zoomed by the game's scale (only published on game pages) so feedback
   matches the board; screen-sized lengths are divided back out. */
.pd-toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px) / var(--pd-stage-scale, 1));
  width: fit-content;
  max-width: calc((100vw - 32px) / var(--pd-stage-scale, 1));
  z-index: var(--pd-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--pd-spacing-2);
  transform: translateX(-50%);
  pointer-events: none;
  zoom: var(--pd-stage-scale, 1);
}

.pd-toast {
  width: fit-content;
  max-width: 100%;
  display: inline-block;
  padding: 12px 18px;
  border-radius: var(--pd-radius-pill);
  background: var(--pd-colour-text);
  color: #fff;
  font-family: var(--pd-font-ui);
  font-weight: var(--pd-weight-bold);
  font-size: 15px;
  box-shadow: var(--pd-shadow-card);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--pd-transition-base), transform var(--pd-transition-base);
  text-align: center;
}

.pd-toast.is-visible {
  opacity: 1;
  transform: none;
}

.pd-toast-success {
  background: var(--pd-colour-accent);
}

.pd-toast-error {
  background: var(--pd-colour-danger);
}

/* --- Archive calendar --------------------------------------------------- */

.pd-modal-archive .pd-modal-card {
  max-width: 440px;
  max-height: min(calc(78 * var(--pd-ui-dvh)), calc(100 * var(--pd-ui-dvh) - 48px));
}

@media (max-width: 768px) {
  .pd-modal-archive .pd-modal-card {
    width: 100%;
    max-width: none;
    height: calc(90 * var(--pd-ui-dvh));
    max-height: calc(90 * var(--pd-ui-dvh));
    padding-top: 0;
    border-radius: var(--pd-modal-radius, 20px) var(--pd-modal-radius, 20px) 0 0;
    border-bottom: 0;
  }
}

.pd-modal-archive .pd-modal-scroll {
  padding-top: 52px;
  padding-bottom: 28px;
  padding-right: 20px;
}

.pd-modal-archive .pd-modal-title {
  display: none !important;
}

.pd-modal-archive .pd-modal-x {
  top: 12px;
  right: 8px;
  z-index: 3;
}

.pd-pause-panel:has(.pd-archive) .pd-pause-panel-title {
  display: none !important;
}

.pd-pause-panel:has(.pd-archive) {
  padding-top: 24px;
}

.pd-archive-icon {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 18px;
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
}

.pd-archive-icon[hidden] {
  display: none !important;
}

.pd-archive {
  padding-top: 4px;
  padding-bottom: 10px;
}

.pd-archive-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 20px;
  box-sizing: border-box;
}

.pd-archive-month {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-family: var(--pd-font-heading);
  font-weight: 800;
  font-size: clamp(1.02rem, calc(4.2 * var(--pd-ui-vw)), 1.28rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--pd-colour-heading);
  white-space: nowrap;
}

.pd-archive-nav-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 44px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--pd-colour-muted, #6b6b66);
  cursor: pointer;
  transition: color var(--pd-transition-fast), transform var(--pd-transition-fast), opacity var(--pd-transition-fast);
}

.pd-archive-nav-btn svg {
  width: 22px;
  height: 22px;
  display: block;
}

.pd-archive-nav-btn:hover:not(:disabled),
.pd-archive-nav-btn:focus,
.pd-archive-nav-btn:focus-visible {
  background: none;
  background-color: transparent;
  box-shadow: none;
  color: var(--pd-colour-heading);
}

.pd-archive-nav-btn:active:not(:disabled) {
  background: none;
  background-color: transparent;
  box-shadow: none;
  transform: scale(0.92);
}

.pd-archive-nav-btn:disabled {
  opacity: 0.28;
  cursor: default;
}

.pd-archive-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* 6 weeks always rendered — locks height across months */
  grid-template-rows: repeat(6, auto);
  gap: 7px;
}

.pd-archive-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  /* Match 18 Words empty progress squares */
  background: var(--pd-archive-day-bg, #d9d5c8);
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-family: var(--pd-font-ui);
  color: var(--pd-colour-text);
  cursor: pointer;
  transition: background var(--pd-transition-fast), border-color var(--pd-transition-fast), transform var(--pd-transition-fast), filter var(--pd-transition-fast);
}

.pd-archive-cell:hover:not(:disabled):not(.is-pad) {
  filter: brightness(0.96);
}

.pd-archive-cell:active:not(:disabled):not(.is-pad) {
  transform: scale(0.96);
}

.pd-archive-cell.is-pad {
  background: transparent;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
  filter: none;
}

.pd-archive-cell.is-disabled {
  opacity: 0.28;
  cursor: default;
  background: transparent;
  filter: none;
}

.pd-archive-cell.is-empty {
  background: var(--pd-archive-day-bg, #d9d5c8);
  color: var(--pd-colour-text);
}

.pd-archive-cell.is-complete {
  background: #2e9e5b;
  border-color: transparent;
  color: #fff;
}

.pd-archive-cell.is-progress {
  background: #f59e0b;
  border-color: transparent;
  color: #fff;
}

.pd-archive-cell.is-failed {
  background: #e0524a;
  border-color: transparent;
  color: #fff;
}

.pd-archive-cell.is-today {
  box-shadow: inset 0 0 0 2px var(--pd-colour-text);
}

.pd-archive-cell.is-today.is-complete,
.pd-archive-cell.is-today.is-progress,
.pd-archive-cell.is-today.is-failed {
  box-shadow: inset 0 0 0 2px #fff;
}

.pd-archive-num {
  font-weight: 800;
  font-size: 18px;
  line-height: 1;
}

html[data-theme="dark"] {
  --pd-archive-day-bg: #2e2c28;
}

html[data-theme="dark"] .pd-archive-cell:hover:not(:disabled):not(.is-pad) {
  filter: brightness(1.12);
}

/* --- Error state -------------------------------------------------------- */

.pd-error-state {
  max-width: var(--pd-reading-width);
  margin: var(--pd-spacing-8) auto;
  padding: var(--pd-spacing-5);
  text-align: center;
}

.pd-error-title {
  margin: 0 0 var(--pd-spacing-3);
  font-family: var(--pd-font-heading);
  font-weight: var(--pd-weight-black);
  font-size: 1.5rem;
}

.pd-error-body {
  margin: 0 0 var(--pd-spacing-5);
  color: var(--pd-colour-muted);
  line-height: 1.5;
}

.pd-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pd-spacing-3);
  justify-content: center;
}

/* --- Demo skip ---------------------------------------------------------- */

.pd-demo-skip {
  display: block;
  margin: var(--pd-spacing-5) auto;
  padding: 10px 18px;
  background: var(--pd-colour-danger);
  color: #fff;
  border: none;
  border-radius: var(--pd-radius-pill);
  font-weight: var(--pd-weight-bold);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Help menu + feedback ---------------------------------------------- */

.pd-help-menu {
  position: fixed;
  z-index: 8000;
  min-width: 176px;
  padding: 6px;
  background: var(--pd-colour-surface);
  border: 2px solid var(--pd-colour-border-strong);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-sizing: border-box;
}

.pd-help-menu[hidden] {
  display: none !important;
}

.pd-help-menu button {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--pd-colour-text);
  font-family: var(--pd-font-ui);
  font-size: 0.98rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.pd-help-menu button:hover,
.pd-help-menu button:focus-visible {
  background: var(--pd-colour-press);
  outline: none;
}

.pd-complete-help {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.pd-complete-help-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
}

.pd-complete-help-modal .pd-modal-card {
  max-width: 360px;
}

/* --- Pause overlay (covers game board) --------------------------------- */

.pd-pause-overlay {
  position: fixed;
  inset: 0;
  z-index: 7500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: transparent;
  box-sizing: border-box;
}

.pd-pause-overlay[hidden] {
  display: none !important;
}

.pd-pause-modal {
  position: relative;
  max-width: 392px;
  width: min(392px, calc(100 * var(--pd-ui-vw) - 40px));
  zoom: var(--pd-modal-scale, 1);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 28px 22px 22px;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--pd-colour-accent) 10%, transparent), transparent 55%),
    var(--pd-modal-surface, var(--pd-colour-surface, #fff));
  border: var(--pd-modal-border);
  border-radius: var(--pd-modal-radius, 22px);
  box-shadow: var(--pd-shadow-modal);
  color: var(--pd-colour-text, #161613);
  font-family: var(--pd-font-ui);
  animation: pd-pause-in 0.28s var(--pd-ease-rise, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

@keyframes pd-pause-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile pause — same bottom sheet as other modals (must follow base rules). */
@media (max-width: 768px) {
  .pd-pause-overlay {
    align-items: flex-end;
    justify-content: stretch;
    padding: 0;
  }

  .pd-pause-modal {
    --pd-sheet-y: 110%;
    width: 100%;
    max-width: none;
    height: calc(90 * var(--pd-ui-dvh));
    max-height: calc(90 * var(--pd-ui-dvh));
    border-radius: var(--pd-modal-radius, 20px) var(--pd-modal-radius, 20px) 0 0;
    border-bottom: 0;
    padding: 18px 20px calc(18px + var(--pd-ui-safe-bottom));
    overflow: hidden;
    animation: none;
    transform: translateY(var(--pd-sheet-y, 110%));
    transition: transform 0.34s var(--pd-ease-rise, cubic-bezier(0.22, 1, 0.36, 1));
  }

  .pd-pause-overlay.is-open .pd-pause-modal {
    --pd-sheet-y: 0px;
    transform: translateY(var(--pd-sheet-y, 0px));
  }

  .pd-pause-overlay.is-closing .pd-pause-modal {
    --pd-sheet-y: 110%;
    transform: translateY(var(--pd-sheet-y, 110%));
  }

  .pd-pause-modal.is-sheet-dragging {
    transition: none !important;
  }

  .pd-pause-overlay.is-panel .pd-pause-modal {
    overflow: hidden;
  }

  .pd-pause-overlay.is-panel .pd-pause-panel-body:has(.pd-pause-legal) {
    max-height: none;
  }
}

.pd-pause-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  width: 100%;
  min-height: var(--pd-modal-close-size, 48px);
  margin: -10px -6px 0;
}

.pd-pause-home {
  display: grid;
  place-items: center;
  width: var(--pd-modal-close-size, 48px);
  height: var(--pd-modal-close-size, 48px);
  margin: 0;
  padding: 0;
  border-radius: 50%;
  color: var(--pd-colour-muted, #616162);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.pd-pause-home:hover {
  background: var(--pd-colour-press);
  color: var(--pd-colour-heading, #161613);
}

.pd-pause-home:focus,
.pd-pause-home:focus-visible {
  outline: none;
}

.pd-pause-home-icon {
  width: 26px;
  height: 26px;
  display: block;
}

.pd-pause-overlay.is-panel .pd-pause-home {
  display: none;
}

.pd-pause-x {
  position: relative;
  top: auto;
  right: auto;
  margin-left: auto;
  width: var(--pd-modal-close-size, 48px);
  height: var(--pd-modal-close-size, 48px);
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--pd-colour-muted, #616162);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--pd-transition-base), color var(--pd-transition-base);
}

.pd-pause-x svg {
  width: 24px;
  height: 24px;
  display: block;
}

.pd-pause-x:hover {
  background: var(--pd-colour-press);
  color: var(--pd-colour-heading, #161613);
}

.pd-pause-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 22px;
  width: 100%;
  margin: 0;
  flex: 1;
  min-height: 0;
}

.pd-pause-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding-top: 4px;
}

.pd-pause-icon {
  display: block;
  width: 80px;
  height: 80px;
  margin: 0;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  filter: none;
}

.pd-pause-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.pd-pause-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  margin: 0;
  font-family: var(--pd-font-heading);
  font-size: clamp(22px, calc(5.8 * var(--pd-ui-vw)), 28px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--pd-colour-heading, #161613);
  text-align: center;
  white-space: nowrap;
}

.pd-pause-brand {
  display: inline-flex;
  align-items: baseline;
  margin-left: 0.28em;
  white-space: nowrap;
}

.pd-pause-brand-pzl {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: -0.06em;
}

.pd-pause-brand-games {
  margin-left: 0.16em;
  font-family: var(--pd-font-ui);
  font-size: 0.52em;
  font-weight: 500;
  color: var(--pd-colour-muted, #6b6b66);
}

.pd-pause-message {
  margin: 0;
  max-width: 18em;
  font-family: var(--pd-font-ui);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--pd-colour-muted, #616162);
  text-align: center;
}

.pd-pause-line {
  display: block;
}

.pd-pause-actions {
  display: none;
}

.pd-pause-overlay.is-submodal {
  pointer-events: none;
}

.pd-pause-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 2px 0 4px;
  background: transparent;
  overflow: visible;
}

.pd-pause-menu-btn {
  --pd-pause-tile: var(--pd-tone-18words, #dceee3);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 88px;
  margin: 0;
  padding: 12px 10px 10px;
  border: 0;
  border-radius: 14px;
  background: var(--pd-pause-tile);
  color: var(--pd-colour-heading, #161613);
  font-family: var(--pd-font-ui);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  transition: transform 0.18s var(--pd-ease-rise, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Alternating hues so neighbours in the 2-col grid stay distinct */
.pd-pause-menu-btn[data-pause-action="howto"] { --pd-pause-tile: var(--pd-tone-18words); }
.pd-pause-menu-btn[data-pause-action="giveup"] { --pd-pause-tile: var(--pd-tone-wordsnake); }
.pd-pause-menu-btn[data-pause-action="archive"] { --pd-pause-tile: var(--pd-tone-zanagrams); }
.pd-pause-menu-btn[data-pause-action="moregames"] { --pd-pause-tile: var(--pd-tone-sunflowers); }
.pd-pause-menu-btn[data-pause-action="settings"] { --pd-pause-tile: var(--pd-tone-zanagramsmaster); }
.pd-pause-menu-btn[data-pause-action="feedback"] { --pd-pause-tile: var(--pd-tone-9words); }
.pd-pause-menu-btn[data-pause-action="account"] { --pd-pause-tile: var(--pd-tone-experiments); }
.pd-pause-menu-btn[data-pause-action="resume"] { --pd-pause-tile: var(--pd-tone-themiddle); }

.pd-pause-menu-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: transparent;
  color: var(--pd-colour-heading, #161613);
}

.pd-pause-menu-icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

.pd-pause-menu-label {
  display: block;
  max-width: 9.5em;
  font-family: var(--pd-font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--pd-colour-heading, #161613);
}

.pd-pause-menu-btn:hover {
  transform: translateY(-2px);
}

.pd-pause-menu-btn:active {
  transform: translateY(0) scale(0.98);
}

.pd-pause-menu-btn:focus,
.pd-pause-menu-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pd-colour-heading, #161613) 18%, transparent);
}

.pd-pause-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: auto;
  padding: 2px 0 0;
}

.pd-pause-footer-link {
  margin: 0;
  padding: 4px 2px;
  border: 0;
  background: none;
  color: var(--pd-colour-muted, #616162);
  font-family: var(--pd-font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.pd-pause-footer-link:hover,
.pd-pause-footer-link:focus-visible {
  color: var(--pd-colour-heading, #161613);
  outline: none;
}

.pd-pause-about {
  padding-top: 4px;
}

.pd-pause-legal {
  padding-top: 4px;
  padding-bottom: 12px;
}

.pd-pause-panel-body .pd-legal-part {
  scroll-margin-top: 8px;
}

/* In-pause panel (howto / archive / feedback) replaces the menu in-place */
.pd-pause-panel {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  flex: 1;
  min-height: 0;
  text-align: left;
}

.pd-pause-overlay.is-panel .pd-pause-hero,
.pd-pause-overlay.is-panel .pd-pause-menu,
.pd-pause-overlay.is-panel .pd-pause-footer {
  display: none;
}

.pd-pause-overlay.is-panel .pd-pause-panel {
  display: flex;
}

.pd-pause-overlay.is-panel .pd-pause-modal {
  max-height: min(calc(720px / var(--pd-modal-scale, 1)), calc(100 * var(--pd-ui-dvh) - 40px));
}

.pd-pause-overlay.is-panel .pd-pause-body {
  overflow: hidden;
}

.pd-pause-overlay.is-panel .pd-pause-panel-body:has(.pd-pause-legal) {
  max-height: min(calc(56 * var(--pd-ui-vh)), 480px);
}

.pd-pause-panel-title {
  margin: 0 0 30px;
  padding: 4px 48px 0;
  font-family: var(--pd-font-heading);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--pd-colour-heading, #161613);
  text-align: center;
}

.pd-pause-panel-title:empty,
.pd-pause-panel-title[hidden] {
  display: none !important;
}

.pd-pause-panel-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.pd-pause-dialog .pd-modal-message {
  text-align: left;
}

@media (max-width: 768px) {
  .pd-pause-body {
    gap: 20px;
    justify-content: center;
    justify-content: safe center;
    /* Extra bottom padding lifts the block ~40px above true center. */
    padding: 8px 0 88px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .pd-pause-overlay.is-panel .pd-pause-body {
    justify-content: center;
    justify-content: safe center;
  }

  .pd-pause-overlay.is-panel .pd-pause-panel {
    flex: 0 1 auto;
    width: 100%;
    max-height: 100%;
    min-height: 0;
  }

  .pd-pause-overlay.is-panel .pd-pause-panel-body {
    flex: 0 1 auto;
    max-height: 100%;
  }

  .pd-pause-overlay.is-panel .pd-pause-panel-title {
    text-align: center;
    padding-left: 48px;
    padding-right: 48px;
  }

  .pd-pause-overlay.is-panel .pd-feedback-form,
  .pd-pause-overlay.is-panel .pd-feedback-label,
  .pd-pause-overlay.is-panel .pd-feedback-error {
    text-align: center;
  }

  .pd-pause-overlay.is-panel .pd-how-copy,
  .pd-pause-overlay.is-panel .pd-how-copy p,
  .pd-pause-overlay.is-panel .pd-how-list,
  .pd-pause-overlay.is-panel .pd-how-list > li {
    text-align: left;
  }

  .pd-pause-overlay.is-panel:has(.pd-archive) .pd-pause-body,
  .pd-pause-overlay.is-panel:has(.pd-pause-legal) .pd-pause-body {
    justify-content: flex-start;
    padding-bottom: 8px;
  }

  .pd-pause-overlay.is-panel:has(.pd-archive) .pd-pause-panel,
  .pd-pause-overlay.is-panel:has(.pd-pause-legal) .pd-pause-panel {
    flex: 1 1 auto;
  }

  .pd-pause-overlay.is-panel:has(.pd-archive) .pd-pause-panel-body,
  .pd-pause-overlay.is-panel:has(.pd-pause-legal) .pd-pause-panel-body {
    flex: 1 1 auto;
  }

  /* Same 90dvh sheet as Game settings, with the copy truly centered.
     Skip the extra 88px bottom pad so a long how-to doesn't end in a white band. */
  .pd-pause-overlay.is-panel:has(.pd-how-copy) .pd-pause-body {
    justify-content: center;
    justify-content: safe center;
    padding: 8px 0;
  }

  .pd-modal:has(.pd-how-copy) .pd-modal-scroll::after {
    flex-basis: 0;
  }

  .pd-pause-menu {
    gap: 10px;
    max-width: 420px;
  }

  .pd-pause-menu-btn {
    min-height: 92px;
    padding: 12px 10px 10px;
    border-radius: 14px;
  }

  .pd-pause-menu-icon {
    width: 34px;
    height: 34px;
    border-radius: 0;
    background: transparent;
  }

  .pd-pause-menu-icon svg {
    width: 30px;
    height: 30px;
  }

  .pd-pause-menu-label {
    font-family: var(--pd-font-ui);
    font-size: 14px;
    font-weight: 700;
  }
}

html[data-theme="dark"] .pd-pause-modal {
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--pd-colour-accent) 16%, transparent), transparent 55%),
    var(--pd-modal-surface, var(--pd-colour-surface, #1c1c19));
}

html[data-theme="dark"] .pd-pause-menu-btn {
  border-color: color-mix(in srgb, #fff 10%, transparent);
  background: color-mix(in srgb, var(--pd-pause-tile) 78%, var(--pd-modal-surface, #1c1c19));
}

html[data-theme="dark"] .pd-pause-menu-icon {
  background: transparent;
  color: var(--pd-colour-heading, #f5f4ed);
}

.pd-modal-back,
.pd-pause-back {
  position: absolute;
  top: 16px;
  left: 14px;
  z-index: 1;
  margin: 0;
  padding: 6px 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--pd-colour-muted, #616162);
  font-family: var(--pd-font-ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--pd-transition-base), color var(--pd-transition-base);
}

.pd-modal-back:hover,
.pd-pause-back:hover {
  background: var(--pd-colour-press);
  color: var(--pd-colour-heading, #161613);
}

.pd-modal-back:focus,
.pd-modal-back:focus-visible,
.pd-pause-back:focus,
.pd-pause-back:focus-visible {
  outline: none;
}

.pd-modal-card.has-back .pd-modal-scroll {
  padding-left: 22px;
  padding-right: 22px;
}

.pd-modal-card.has-back .pd-modal-title {
  padding-left: 48px;
  padding-right: 36px;
}

.pd-pause-back {
  top: 12px;
  left: 12px;
}

.pd-feedback-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.pd-feedback-form[hidden] {
  display: none !important;
}

.pd-feedback-honey {
  position: absolute;
  left: -9999px;
}

.pd-feedback-label {
  font-family: var(--pd-font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--pd-colour-muted);
  margin-bottom: -6px;
}

.pd-feedback-input {
  width: 100%;
  border: 2px solid var(--pd-colour-border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--pd-colour-text);
  background: var(--pd-colour-surface);
  font-family: var(--pd-font-ui);
  box-sizing: border-box;
  -webkit-user-select: text !important;
  user-select: text !important;
}

.pd-feedback-textarea {
  min-height: 140px;
  resize: vertical;
}

.pd-feedback-input:focus {
  outline: none;
  border-color: var(--pd-colour-border-strong);
}

.pd-feedback-error {
  margin: 0;
  color: var(--pd-colour-danger);
  font-family: var(--pd-font-ui);
  font-size: 14px;
  font-weight: 700;
}

.pd-feedback-error[hidden] {
  display: none !important;
}

.pd-feedback-submit {
  width: 100%;
  margin-top: 6px;
  background: var(--pd-colour-border-strong);
  color: var(--pd-colour-surface, #fff);
  box-shadow: none;
}

.pd-feedback-submit:hover {
  background: #333;
}

html[data-theme="dark"] .pd-feedback-submit {
  background: var(--pd-colour-heading, #f5f4ed);
  color: var(--pd-colour-background, #141412);
}

html[data-theme="dark"] .pd-feedback-submit:hover {
  background: #e4e2d8;
}

.pd-feedback-submit:disabled {
  opacity: 0.65;
  cursor: default;
}

.pd-feedback-success {
  text-align: center;
  padding: 18px 6px 6px;
}

.pd-feedback-success[hidden] {
  display: none !important;
}

.pd-feedback-success-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--pd-colour-accent);
  color: #fff;
  font-size: 34px;
  line-height: 60px;
  font-weight: 800;
}

.pd-feedback-success p {
  margin: 0;
  font-family: var(--pd-font-ui);
  font-size: 17px;
  font-weight: 700;
  color: var(--pd-colour-text);
}

.pd-how-copy p {
  margin: 0 0 18px;
  font-family: var(--pd-font-ui);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pd-colour-text);
  text-align: left;
}

.pd-how-copy p:last-child {
  margin-bottom: 0;
}

/* --- Site bar (homepage + editorial) ----------------------------------- */

.pd-site-bar {
  width: 100%;
  max-width: var(--pd-content-width);
  margin: 0 auto;
  padding: 48px 48px 0;
  box-sizing: border-box;
}

.pd-hub-logo-row {
  --pd-hub-gap: clamp(28px, 4vw, 48px);
  --pd-hub-card: 220px;
  --pd-hub-grid-width: calc(var(--pd-hub-card) * 3 + var(--pd-hub-gap) * 2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--pd-hub-grid-width);
  margin: 0 auto;
}

.pd-hub-logo {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  line-height: 1;
  color: var(--pd-colour-heading, #161613);
  text-decoration: none;
  white-space: nowrap;
  visibility: hidden;
}

.pd-hub-auth {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pd-hub-auth .pd-game-login,
.pd-hub-auth .pd-game-signup {
  padding: 4px 0;
  font-size: 15px;
}

html.pd-fonts-ready .pd-hub-logo {
  visibility: visible;
}

html.pd-fonts-ready .pd-hub-logo:hover {
  opacity: 0.85;
}

.pd-hub-logo:focus,
.pd-hub-logo:focus-visible {
  outline: none;
}

.pd-hub-logo-pzl {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: clamp(30px, 5.6vw, 40px);
  font-weight: 700;
  letter-spacing: -0.06em;
}

.pd-hub-logo-games {
  margin-left: 0.18em;
  font-family: var(--pd-font-ui);
  font-size: clamp(15px, 2.7vw, 19px);
  font-weight: 500;
  color: var(--pd-colour-muted, #6b6b66);
}

@media (max-width: 1100px) {
  .pd-site-bar {
    padding-left: 28px;
    padding-right: 28px;
  }
}

@media (max-width: 768px) {
  .pd-site-bar {
    padding: 32px 20px 0;
  }

  .pd-hub-logo-row {
    --pd-hub-gap: 20px;
  }

  .pd-hub-logo-pzl {
    font-size: 34px;
  }

  .pd-hub-logo-games {
    display: inline;
    font-size: 17px;
  }

  .pd-hub-auth {
    gap: 8px;
  }

  .pd-hub-auth .pd-game-login,
  .pd-hub-auth .pd-game-signup {
    font-size: 13px;
  }
}

/* --- Privacy and terms ------------------------------------------------- */

.pd-legal {
  text-align: left;
}

.pd-legal-meta {
  margin: 0 0 18px;
  font-family: var(--pd-font-ui);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--pd-colour-muted);
}

.pd-legal-part {
  margin: 36px 0 12px;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, var(--pd-colour-muted) 28%, transparent);
  font-family: var(--pd-font-heading);
  font-size: clamp(1.2rem, 2.6vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pd-colour-heading);
  scroll-margin-top: 88px;
}

.pd-legal-part:first-of-type {
  margin-top: 8px;
  padding-top: 0;
  border-top: none;
}

.pd-legal-sub {
  margin: 22px 0 8px;
  font-family: var(--pd-font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pd-colour-heading);
}

.pd-legal p {
  margin: 0 0 12px;
  font-family: var(--pd-font-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pd-colour-text);
}

.pd-legal p:last-child {
  margin-bottom: 0;
}

.pd-legal a {
  color: var(--pd-colour-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pd-legal a:hover {
  color: var(--pd-colour-accent-hover);
}

/* Beat the per-game `* { margin:0; padding:0 }` resets so discs keep an indent. */
.pd-legal ul {
  margin: 0 0 12px !important;
  padding: 0 0 0 1.5em !important;
  list-style: disc outside !important;
}

.pd-legal li {
  margin: 0 0 6px;
  font-family: var(--pd-font-ui);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pd-colour-text);
}

.pd-legal-updated {
  margin: 28px 0 0;
  font-family: var(--pd-font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--pd-colour-muted);
}

/* Beat per-game `* { margin:0; padding:0 }` resets so discs keep an indent. */
ul.pd-how-list,
.pd-how-copy .pd-how-list,
.pd-modal-body .pd-how-list,
.pd-how-list {
  margin: 0 !important;
  padding: 2px 6px 6px 1.7em !important;
  list-style: disc outside !important;
  list-style-position: outside !important;
  text-align: left;
}

ul.pd-how-list > li,
.pd-how-list > li {
  margin: 0 0 12px !important;
  padding: 0 !important;
  font-family: var(--pd-font-ui);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--pd-colour-text);
}

.pd-how-list .hsf-swatch {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.35em;
  border-radius: 4px;
  vertical-align: -0.1em;
}

/* Headlines colour key — lives on body modals, outside .game-headlines */
.pd-how-list .hsf-swatch-green { background: #6aaa64; }
.pd-how-list .hsf-swatch-orange { background: #c9b458; }
.pd-how-list .hsf-swatch-grey { background: #787c7e; }

html[data-theme="dark"] .pd-how-list .hsf-swatch-green { background: #538d4e; }
html[data-theme="dark"] .pd-how-list .hsf-swatch-orange { background: #b59f3b; }
html[data-theme="dark"] .pd-how-list .hsf-swatch-grey { background: #3a3a3c; }

html.pd-high-contrast .pd-how-list .hsf-swatch-green,
html[data-theme="dark"].pd-high-contrast .pd-how-list .hsf-swatch-green {
  background: #f5793a;
}
html.pd-high-contrast .pd-how-list .hsf-swatch-orange,
html[data-theme="dark"].pd-high-contrast .pd-how-list .hsf-swatch-orange {
  background: #85c0f9;
}

/* Tutorial instruction copy + skip (game-local boards stay Baloo). */
.tut-text,
.tut-banner,
.tut-banner-text,
.ws-tut-text,
.tut-modal-skip,
.ws-tut-skip {
  font-family: var(--pd-font-ui) !important;
}

ul.pd-how-list > li:last-child,
.pd-how-list > li:last-child {
  margin-bottom: 0 !important;
}

/* === platform/topbar.css === */
/** Shared site chrome — hub and game pages.
 *  Bundled into shared/css/chrome.css — after editing run:
 *    python3 scripts/build-chrome-css.py
 *  (also run by scripts/bump-assets.py).
 */

/* MPA view transitions off: they crossfade snapshots and flash content/chrome
   on iOS PWA. */
@view-transition {
  navigation: none;
}

/* --- Top bar ------------------------------------------------------------ */

/* TEMP public-beta notice — enable with body.pd-beta-on (see SHOW_BETA_BAR). */
:root {
  --pd-beta-bar-content: 28px;
  /* Extra paint above the viewport so iOS rubber-band can’t flash page content. */
  --pd-chrome-overscroll-pad: 50vh;
}

.pd-beta-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 201;
  width: 100%;
  min-height: calc(var(--pd-beta-bar-content) + env(safe-area-inset-top, 0px));
  margin: calc(-1 * var(--pd-chrome-overscroll-pad)) 0 0;
  padding: calc(var(--pd-chrome-overscroll-pad) + env(safe-area-inset-top, 0px)) 16px 0;
  box-sizing: border-box;
  border: 0;
  background: #F3E6AE;
  color: #2B281C;
  font-family: "Source Sans 3", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: var(--pd-beta-bar-content);
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

body.pd-beta-on .pd-beta-bar {
  display: block;
}

.pd-beta-bar:hover,
.pd-beta-bar:focus-visible {
  background: #ecd989;
}

.pd-beta-bar:focus,
.pd-beta-bar:focus-visible {
  outline: none;
}

.pd-beta-underline {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

html {
  --pd-chrome-height: env(safe-area-inset-top, 0px);
  --pd-play-top: 62px;
}

.pd-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above page content; below modals (10000). */
  z-index: 200;
  width: 100%;
  box-sizing: border-box;
  /* Pull the box up, then pad back down so the bar paints into overscroll. */
  margin-top: calc(-1 * var(--pd-chrome-overscroll-pad));
  padding-top: calc(var(--pd-chrome-overscroll-pad) + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid color-mix(in srgb, var(--pd-colour-heading, #161613) 10%, transparent);
  box-shadow: none;
  background: var(--pd-colour-background, #fff);
  font-family: "Baloo 2", system-ui, -apple-system, sans-serif;
  color: var(--pd-colour-text, #1a1a1a);
  text-align: left;
}

/* Retired page-level tools wrapper — hide a cached chrome-boot copy. */
body.pd-game .pd-chrome--tools-only,
.pd-chrome--tools-only {
  display: none !important;
}

/* When the beta strip is on, it owns the safe-area and chrome sits underneath. */
body.pd-beta-on .pd-chrome {
  top: calc(var(--pd-beta-bar-content) + env(safe-area-inset-top, 0px));
  margin-top: calc(-1 * var(--pd-chrome-overscroll-pad));
  padding-top: var(--pd-chrome-overscroll-pad);
}

.pd-chrome-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: var(--pd-content-width);
  margin: 0 auto;
  min-height: 58px;
  padding: 10px 20px;
  box-sizing: border-box;
}

@media (min-width: 769px) {
  .pd-chrome-inner {
    min-height: 64px;
    padding: 12px 48px;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .pd-chrome-inner {
    padding-left: 28px;
    padding-right: 28px;
  }
}

.pd-chrome-left {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  z-index: 1;
}

/* While paused, keep the ? menu control — never swap it for Log in / Sign up
   (Change puzzle / other pause panels must not look like the welcome chrome). */
body.pd-game:has(.is-paused) #pd-chrome-tools {
  display: flex !important;
}

body.pd-game:has(.is-paused) .pd-game-login,
body.pd-game:has(.is-paused) .pd-game-signup {
  display: none !important;
}

/* Completion: hide hint / help / archive. Keep the burger in the game
   column (same top-left as play). Auth stays in .pd-chrome-right. */
body.pd-done #pd-chrome-tools > *:not(#pauseBtnTop):not(#pauseBtnBurger),
body.pd-game:has(.is-done) #pd-chrome-tools > *:not(#pauseBtnTop):not(#pauseBtnBurger),
html.pd-done #pd-chrome-tools > *:not(#pauseBtnTop):not(#pauseBtnBurger) {
  display: none !important;
}

/* Play: hide leftover help / archive / settings — burger + "?" stay.
   Note: some games reuse .help-btn / .w18-help on #pauseBtnTop — exclude it. */
body.pd-game:not(.pd-done):not(:has(.is-done)) #pd-chrome-tools > .pd-chrome-archive,
body.pd-game:not(.pd-done):not(:has(.is-done)) #pd-chrome-tools > .pd-chrome-settings,
body.pd-game:not(.pd-done):not(:has(.is-done)) #pd-chrome-tools > [aria-label="Help"]:not(#pauseBtnTop):not(#pauseBtnBurger),
body.pd-game:not(.pd-done):not(:has(.is-done)) #pd-chrome-tools > .help-btn:not(#pauseBtnTop):not(#pauseBtnBurger),
body.pd-game:not(.pd-done):not(:has(.is-done)) #pd-chrome-tools > .w18-help:not(#pauseBtnTop):not(#pauseBtnBurger),
body.pd-game:not(.pd-done):not(:has(.is-done)) #pd-chrome-tools > #helpBtn,
body.pd-game:not(.pd-done):not(:has(.is-done)) #pd-chrome-tools > #helpBtnTop,
body.pd-game:not(.pd-done):not(:has(.is-done)) #pd-chrome-tools > #w18HelpBtn,
body.pd-game:not(.pd-done):not(:has(.is-done)) #pd-chrome-tools > #hlsHelpBtn,
body.pd-game:not(.pd-done):not(:has(.is-done)) #pd-chrome-tools > #hsfHelpBtn {
  display: none !important;
}

/* Settings gear retired — dark mode lives in pause / settings. */
#pd-chrome-tools .pd-chrome-settings,
.pd-chrome-settings {
  display: none !important;
}

.pd-chrome-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
  margin-left: auto;
  z-index: 1;
}

.pd-chrome-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

.play-topbar-start {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.play-topbar-end {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pd-remove-ads {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.pd-remove-ads svg {
  width: 30px;
  height: 30px;
  display: block;
}

body.pd-plus .pd-remove-ads {
  display: none !important;
}

/*
  TEMP: hide the NO ADS icon until ads are live.
  Markup is still injected by mountRemoveAdsControl() in platform/plus.js.
  To show it again: delete this rule and rebuild chrome.css
  (python3 scripts/build-chrome-css.py). Plus subscribers stay hidden via
  body.pd-plus .pd-remove-ads above.
*/
.pd-remove-ads {
  display: none !important;
}

body.pd-game #pd-chrome-tools {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 200;
  width: auto;
  margin: 0;
  padding: var(--pd-play-top, 62px) 12px 8px 8px;
  pointer-events: auto;
}

.pd-chrome-tools:empty {
  display: none;
}

/* Shared sizing for game control icons once adopted into chrome */
.pd-chrome-tools .top-icon,
.pd-chrome-tools .w18-help,
.pd-chrome-tools .help-btn,
.pd-chrome-tools .rotate-btn,
.pd-chrome-tools .hint-btn,
.pd-chrome-tools .menu-btn,
.pd-chrome-tools .hl-icon-btn,
.pd-chrome-tools .hls-icon-btn,
.pd-chrome-tools .pd-chrome-archive,
.pd-chrome-tools .pd-chrome-settings,
.pd-chrome-tools .pd-remove-ads {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--pd-colour-heading, #161613);
  cursor: pointer;
  text-decoration: none;
}

/* Tools live outside each game root, so game :focus rules never reach them.
   Suppress the global black focus box (it flashes when typing moves focus here). */
.pd-chrome-tools button:focus,
.pd-chrome-tools button:focus-visible,
.pd-chrome-tools a:focus,
.pd-chrome-tools a:focus-visible {
  outline: none;
}

.pd-chrome-tools svg {
  width: 30px;
  height: 30px;
  display: block;
}

.pd-chrome-tools .play-tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

.pd-chrome-tools .play-tools[hidden] {
  display: none !important;
}

/* Hint-count badges (tools live outside game roots, so styles live here) */
.pd-chrome-tools .hint-badge,
.pd-chrome-tools .hl-hint-badge,
.pd-chrome-tools .icon-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  z-index: 1;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: #e0524a;
  color: #fff;
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 800;
  font-size: 11px;
  line-height: 1;
  box-shadow: none;
  pointer-events: none;
}

.pd-chrome-tools .icon-badge {
  top: 0;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e8b028;
  font-size: 0.82rem;
  line-height: 20px;
}

/* Log in / Sign up / Profile — text links in the top-right chrome */
.pd-game-login,
.pd-game-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 8px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--pd-font-ui);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--pd-colour-heading, #161613);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  /* Hidden until Source Sans is ready — same gate as the brand. */
  opacity: 0;
  transition: color 0.15s ease;
}

html.pd-fonts-ready .pd-game-login,
html.pd-fonts-ready .pd-game-signup {
  opacity: 1;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.pd-game-signup[hidden] {
  display: none !important;
}

/* Hide auth on active play only — completion keeps Log in / Sign up / Profile. */
body.pd-game.pd-playing:not(.pd-done):not(:has(.is-done)) .pd-game-login,
body.pd-game.pd-playing:not(.pd-done):not(:has(.is-done)) .pd-game-signup {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  html.pd-fonts-ready .pd-game-login:hover,
  html.pd-fonts-ready .pd-game-signup:hover {
    opacity: 0.7;
  }
}

.pd-game-login:focus,
.pd-game-login:focus-visible,
.pd-game-signup:focus,
.pd-game-signup:focus-visible {
  outline: none;
}

/* --- Drawer ------------------------------------------------------------- */

/* Soft fade over page (modals / pause). Above chrome, below modals. */
.pd-page-frost {
  position: fixed;
  inset: 0;
  z-index: 210;
  pointer-events: none;
  background: var(--pd-colour-backdrop-frost, rgba(255, 255, 255, 0.82));
  opacity: 0;
  visibility: hidden;
  /* Fade in with the sheet; clear instantly when dismissing. */
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.pd-page-frost.is-on {
  opacity: 1;
  visibility: visible;
}

.pd-page-frost:not(.is-on) {
  transition: none;
}

@media (min-width: 769px) {
  .pd-page-frost {
    background: var(--pd-colour-backdrop-dim, rgba(0, 0, 0, 0.55));
  }
}

/* --- Layout hooks ------------------------------------------------------- */

body.pd-game .pd-chrome {
  display: none !important;
}

body.pd-game .pd-game-root {
  flex: 1 1 auto;
  min-height: 0;
}

body.pd-game:has(.is-done) .pd-game-root {
  flex: none;
  min-height: auto;
  height: auto;
}

/* --- Account dialog ----------------------------------------------------- */
/* Opened from hub/about Log in / Sign up, or from pause → Account.
   Markup is built in platform/account.js. */

.pd-account {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 24rem;
}

.pd-account-compose {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pd-account-compose[hidden] {
  display: none !important;
}

.pd-account-intro {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500; /* match how-to-play modal body */
  line-height: 1.55;
  text-align: center;
  color: var(--pd-colour-text);
}

.pd-account-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pd-account-session-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 16px;
}

.pd-account-session-links .pd-account-signout-link,
.pd-account-session-links .pd-account-manage-link,
.pd-account-session-links .pd-account-danger-link {
  font-size: 13px;
}

.pd-account-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pd-account-input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  font: inherit;
  font-size: 1rem; /* 16px keeps iOS Safari from zooming on focus */
  color: var(--pd-colour-text);
  background: var(--pd-colour-surface);
  border: 2px solid var(--pd-colour-border);
  border-radius: var(--pd-radius-small);
  box-sizing: border-box;
}

.pd-account-input:focus-visible {
  outline: none;
  border-color: var(--pd-colour-border-strong);
}

.pd-account-submit {
  margin-top: 0.25rem;
  width: 100%;
}

.pd-account-submit:disabled {
  opacity: 0.65;
  cursor: default;
}

.pd-account-status:empty {
  display: none;
}

.pd-account-status {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: center;
  color: var(--pd-colour-muted);
}

.pd-account-status.is-error {
  color: var(--pd-colour-danger);
}

.pd-account-switch {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  text-align: center;
  color: var(--pd-colour-muted);
}

.pd-account-switch-btn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  color: var(--pd-colour-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pd-account-switch-btn:hover {
  color: var(--pd-colour-accent-hover, var(--pd-colour-accent));
}

/* Same success treatment as the feedback modal. */
.pd-account-sent {
  text-align: center;
  padding: 18px 6px 6px;
}

.pd-account-sent[hidden] {
  display: none !important;
}

.pd-account-sent-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--pd-colour-accent);
  color: #fff;
  font-size: 34px;
  line-height: 60px;
  font-weight: 800;
}

.pd-account-sent-title {
  margin: 0 0 8px;
  font-family: var(--pd-font-ui);
  font-size: 17px;
  font-weight: 700;
  color: var(--pd-colour-text);
}

.pd-account-sent-detail {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pd-colour-text);
  overflow-wrap: anywhere;
}

.pd-account-sent-dev {
  margin: 12px 0 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--pd-colour-muted);
}

.pd-account-sent-dev[hidden] {
  display: none !important;
}

.pd-account-email {
  overflow-wrap: anywhere;
}

.pd-account-modal .pd-modal-card {
  max-width: 380px;
  max-height: min(calc(90 * var(--pd-ui-dvh)), calc(100 * var(--pd-ui-dvh) - 48px - var(--pd-ui-safe-top) - var(--pd-ui-safe-bottom)));
}

@media (max-width: 768px) {
  .pd-account-modal .pd-modal-card {
    width: 100%;
    max-width: none;
    height: calc(90 * var(--pd-ui-dvh));
    max-height: calc(90 * var(--pd-ui-dvh));
    border-radius: var(--pd-modal-radius, 20px) var(--pd-modal-radius, 20px) 0 0;
    border-bottom: 0;
  }
}

.pd-account-modal .pd-modal-title {
  font-size: 28px;
  line-height: 1.15;
  text-align: center;
  margin-bottom: 10px;
}

.pd-account-panel {
  max-width: none;
  gap: 0.75rem;
}

.pd-account-panel-intro {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--pd-colour-muted, #6b6b66);
}

.pd-account-panel-intro .pd-account-email {
  font-weight: 700;
  color: var(--pd-colour-heading, #161613);
}

.pd-account-games-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-account-games-heading {
  margin: 10px 0 2px;
  font-family: var(--pd-font-heading);
  font-size: 1.05rem;
  font-weight: var(--pd-weight-black);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--pd-colour-heading, #161613);
}

.pd-account-games {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-account-game {
  --pd-account-tone: var(--pd-colour-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 10px;
  border: 1px solid color-mix(in srgb, var(--pd-colour-heading, #161613) 12%, transparent);
  border-radius: 12px;
  background: var(--pd-account-tone);
  box-sizing: border-box;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.pd-account-game:hover {
  transform: translateY(-1px);
  box-shadow: none;
}

.pd-account-game:focus,
.pd-account-game:focus-visible {
  outline: none;
}

.pd-account-game--18words { --pd-account-tone: var(--pd-tone-18words); }
.pd-account-game--9words { --pd-account-tone: var(--pd-tone-9words); }
.pd-account-game--wordsnake { --pd-account-tone: var(--pd-tone-wordsnake); }
.pd-account-game--themiddle { --pd-account-tone: var(--pd-tone-themiddle); }
.pd-account-game--zanagrams { --pd-account-tone: var(--pd-tone-zanagrams); }
.pd-account-game--zanagramsmaster { --pd-account-tone: var(--pd-tone-zanagramsmaster); }
.pd-account-game--sunflowers { --pd-account-tone: var(--pd-tone-sunflowers); }
.pd-account-game--sunflowersmaster { --pd-account-tone: var(--pd-tone-sunflowersmaster); }
.pd-account-game--headlines { --pd-account-tone: var(--pd-tone-headlines); }
.pd-account-game--definitions { --pd-account-tone: var(--pd-tone-definitions); }
.pd-account-game--crowdle { --pd-account-tone: var(--pd-tone-experiments); }

.pd-account-game-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
}

.pd-account-game-icon {
  display: block;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.pd-account-game-name {
  margin: 0;
  min-width: 0;
  font-family: var(--pd-font-heading);
  font-size: 1.2rem;
  font-weight: var(--pd-weight-black);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--pd-colour-heading, #161613);
}

.pd-account-stats-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  padding: 6px 4px 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--pd-colour-surface) 72%, transparent);
}

.pd-account-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 2px;
}

.pd-account-stat-value {
  font-family: var(--pd-font-body);
  font-size: clamp(1.15rem, calc(4 * var(--pd-ui-vw)), 1.4rem);
  font-weight: var(--pd-weight-black);
  line-height: 1.1;
  color: var(--pd-colour-heading, #161613);
  font-variant-numeric: tabular-nums;
}

.pd-account-stat-label {
  font-family: var(--pd-font-ui);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--pd-colour-muted, #6b6b66);
  letter-spacing: 0.01em;
  text-align: center;
}

.pd-account-signout-link {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: inherit;
  font-weight: 600;
  line-height: inherit;
  color: var(--pd-colour-muted, #6b6b66);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.pd-account-signout-link:hover {
  color: var(--pd-colour-heading, #161613);
}

/* Profile footer. Understated — findable without competing with the games. */
.pd-account-danger {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--pd-colour-border, #c8c8c8);
  text-align: center;
}

.pd-account-danger-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 18px;
}

.pd-account-manage-link {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font-family: var(--pd-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--pd-colour-muted, #6b6b66);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.pd-account-manage-link:hover {
  color: var(--pd-colour-heading, #161613);
}

.pd-account-danger-link {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font-family: var(--pd-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--pd-colour-muted, #6b6b66);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.pd-account-danger-link:hover {
  color: var(--pd-colour-danger, #f22f2c);
}

.pd-account-danger-copy {
  margin: 0 0 12px;
  font-family: var(--pd-font-ui);
  font-size: 13px;
  line-height: 1.45;
  color: var(--pd-colour-muted, #6b6b66);
}

.pd-account-danger-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.pd-account-danger-btn {
  background: var(--pd-colour-danger, #f22f2c);
  border-color: var(--pd-colour-danger, #f22f2c);
  color: #fff;
}

.pd-account-danger-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* --- PZL Plus dialog ---------------------------------------------------- */
/* Opened from ?pzlplustest for now. Markup is built in platform/plus.js. */

.pd-plus-modal .pd-modal-card {
  max-width: 380px;
  max-height: min(calc(90 * var(--pd-ui-dvh)), calc(100 * var(--pd-ui-dvh) - 48px - var(--pd-ui-safe-top) - var(--pd-ui-safe-bottom)));
}

@media (max-width: 768px) {
  .pd-plus-modal .pd-modal-card {
    width: 100%;
    max-width: none;
    height: calc(90 * var(--pd-ui-dvh));
    max-height: calc(90 * var(--pd-ui-dvh));
    border-radius: var(--pd-modal-radius, 20px) var(--pd-modal-radius, 20px) 0 0;
    border-bottom: 0;
  }
}

.pd-plus-modal .pd-modal-title {
  font-size: 28px;
  line-height: 1.15;
  text-align: center;
  margin-bottom: 22px;
}

/* Scoped: body.pd-plus marks a subscriber's page and must not match. */
:where(.pd-plus-modal) .pd-plus {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
  max-width: 24rem;
}

.pd-plus-intro {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
  color: var(--pd-colour-text);
}

.pd-plus-benefits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.pd-plus-benefits li {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  font-family: var(--pd-font-ui);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--pd-colour-heading, #161613);
}

.pd-plus-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--pd-colour-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}

.pd-plus-deal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  gap: 0.55rem;
}

.pd-plus-price {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 0.7rem;
  row-gap: 0.55rem;
  margin: 0;
}

.pd-plus-price-now {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 0.4rem;
}

.pd-plus-price-amount {
  font-family: var(--pd-font-heading);
  font-size: 2.35rem;
  font-weight: var(--pd-weight-black);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--pd-colour-heading, #161613);
}

.pd-plus-price-period {
  font-family: var(--pd-font-ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--pd-colour-muted, #6b6b66);
}

.pd-plus-subscribe {
  width: 100%;
  box-sizing: border-box;
  margin-top: 0;
}

.pd-plus-subscribe[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
}

.pd-plus-fine {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
  color: var(--pd-colour-muted, #6b6b66);
}

.pd-plus-success {
  align-items: center;
  padding-top: 8px;
}

.pd-plus-success-mark {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pd-colour-accent);
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  line-height: 56px;
  text-align: center;
}

.pd-plus-success .pd-plus-intro {
  max-width: 20rem;
}

.pd-plus-success .pd-plus-subscribe {
  margin-top: 4px;
}

/* Off-screen, not opacity/clip. iOS Safari paints a white autofill box
   over the wordmark when a clipped field sits at the top of the page.
   Keep it in the DOM so the auth modal can still adopt the field. */
.pd-autofill-host {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  pointer-events: none;
}

/* --- Page hold ---------------------------------------------------------- */

/*
  Incoming page: hide hub/game/about content until ready(). Outgoing
  `pd-nav-hold` uses the same static “Loading” so the label does not jump.
*/

body.pd-hub:not(.pd-content-ready) .pd-hub-main,
body:has(> .pd-game-root):not(.pd-content-ready) .pd-game-root,
body.pd-about:not(.pd-content-ready) .pd-about-main {
  visibility: hidden;
}

/* Outgoing click: wipe the current page. Descendants that set
   `visibility: visible` (hub cards, sheets) must not win. */
body.pd-nav-hold * {
  visibility: hidden !important;
}

/* Soft shadows smear during document swaps — keep hub / holds flat. */
body.pd-hub *,
body.pd-about *,
body.pd-hub:not(.pd-content-ready) *,
body:has(> .pd-game-root):not(.pd-content-ready) *,
body.pd-about:not(.pd-content-ready) * {
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/*
  Hold before ready: lock html + body + chrome to the SAME solid page colour.
*/
html:has(body.pd-hub:not(.pd-content-ready)),
html:has(body:has(> .pd-game-root):not(.pd-content-ready)),
html:has(body.pd-about:not(.pd-content-ready)),
html:has(body.pd-game:not(.pd-content-ready)),
html:has(body.pd-nav-hold),
body.pd-hub:not(.pd-content-ready),
body.pd-about:not(.pd-content-ready),
body.pd-game:not(.pd-content-ready),
body.pd-nav-hold,
body.pd-hub:not(.pd-content-ready) .pd-chrome,
body.pd-about:not(.pd-content-ready) .pd-chrome,
body.pd-game:not(.pd-content-ready) .pd-chrome {
  background: var(--pd-colour-background, #fff) !important;
  background-color: var(--pd-colour-background, #fff) !important;
  background-image: none !important;
  background-attachment: scroll !important;
  box-shadow: none !important;
}

body.pd-nav-hold {
  pointer-events: none;
}

/* Solid veil above chrome / pause / modals so only Loading remains. */
body.pd-nav-hold::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--pd-colour-background, #fff);
  pointer-events: none;
  z-index: 100000;
}

/* Same label — outgoing hold and incoming game/about must match.
   Centre of the safe area. Chrome on iOS can paint the first frame of a
   cold page shifted up under its toolbar, then snap it down; the page
   cannot see or undo that, so the label moves with it. */
body.pd-nav-hold::after,
body:has(> .pd-game-root):not(.pd-content-ready)::after,
body.pd-about:not(.pd-content-ready)::after {
  content: "Loading...";
  position: fixed;
  top: calc(50% - 8px + (env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) / 2);
  left: 0;
  right: 0;
  bottom: auto;
  width: 100%;
  height: 16px;
  margin: 0;
  transform: none;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 16px;
  text-align: center;
  color: color-mix(in srgb, var(--pd-colour-text, #1a1a1a) 48%, transparent);
  pointer-events: none;
  z-index: 100001;
}

/* About / privacy: content is static — no hold-and-enter (hub/games keep that). */

/* --- Settings modal ----------------------------------------------------- */

.pd-settings {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pd-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
}

.pd-settings-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.pd-settings-label {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--pd-colour-heading, #161613);
}

.pd-settings-hint {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--pd-colour-muted, #6b6b66);
}

.pd-settings-switch {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--pd-colour-border-strong, #1a1a1a);
  border-radius: 999px;
  background: var(--pd-colour-press, rgba(26, 26, 26, 0.08));
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.pd-settings-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pd-colour-heading, #161613);
  transition: transform 0.15s ease, background 0.15s ease;
}

.pd-settings-switch.is-on {
  background: var(--pd-colour-accent, #2e9e5b);
  border-color: var(--pd-colour-accent, #2e9e5b);
}

.pd-settings-switch.is-on .pd-settings-switch-knob {
  transform: translateX(20px);
  background: var(--pd-colour-surface, #fff);
}

.pd-settings-switch:focus,
.pd-settings-switch:focus-visible {
  outline: none;
}

/* === platform/footer.css === */
/**
 * Shared site footer. Bundled into shared/css/chrome.css.
 *
 * One band for the homepage, about, blog, privacy, and quizzes.
 * Aligns to the same three-card measure as the hub masthead.
 */

.pd-site-footer {
  --pd-hub-gap: clamp(28px, 4vw, 48px);
  --pd-hub-card: 220px;
  --pd-hub-grid-width: calc(var(--pd-hub-card) * 3 + var(--pd-hub-gap) * 2);
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(32px, 4vw, 44px) clamp(20px, 4vw, 48px) calc(22px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid color-mix(in srgb, var(--pd-colour-heading, #161613) 10%, transparent);
  background: color-mix(in srgb, var(--pd-colour-heading, #161613) 3.5%, var(--pd-colour-background, #ffffff));
  font-family: var(--pd-font-ui);
  color: var(--pd-colour-text);
}

.pd-site-footer-panel {
  width: 100%;
  max-width: var(--pd-hub-grid-width);
  margin-inline: auto;
}

.pd-site-footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "brand brand"
    "explore studio"
    "games games";
  gap: 28px 20px;
}

.pd-site-footer-brand { grid-area: brand; }
.pd-site-footer-explore { grid-area: explore; }
.pd-site-footer-games { grid-area: games; }
.pd-site-footer-studio { grid-area: studio; }

.pd-site-footer-logo {
  display: inline-flex;
  align-items: baseline;
  color: var(--pd-colour-heading, #161613);
  text-decoration: none;
  line-height: 1;
}

.pd-site-footer-logo:hover {
  opacity: 0.85;
}

.pd-site-footer-mark {
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.06em;
}

.pd-site-footer-mark-rest {
  margin-left: 0.18em;
  font-size: 16px;
  font-weight: 500;
  color: var(--pd-colour-muted, #6b6b66);
}

.pd-site-footer-tag {
  margin: 10px 0 0;
  max-width: 22em;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--pd-colour-muted, #6b6b66);
}

.pd-site-footer-mail {
  display: inline-block;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--pd-colour-heading, #161613);
  text-decoration: none;
}

.pd-site-footer-heading {
  margin: 0 0 8px;
  font-family: var(--pd-font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--pd-colour-muted, #6b6b66);
}

.pd-site-footer-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-site-footer-col a,
.pd-site-footer-col button,
.pd-site-footer-account button {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 5px 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--pd-colour-heading, #161613);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.pd-site-footer a:hover,
.pd-site-footer button:hover,
.pd-site-footer a:focus-visible,
.pd-site-footer button:focus-visible {
  color: var(--pd-colour-accent, #2e9e5b);
}

.pd-site-footer a:focus-visible,
.pd-site-footer button:focus-visible {
  outline: 2px solid var(--pd-colour-accent, #2e9e5b);
  outline-offset: 3px;
  border-radius: 4px;
}

.pd-site-footer a[aria-current="page"] {
  color: var(--pd-colour-accent, #2e9e5b);
}

.pd-site-footer-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--pd-colour-heading, #161613) 10%, transparent);
}

.pd-site-footer-copy {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--pd-colour-muted, #6b6b66);
}

.pd-site-footer-account {
  display: flex;
  align-items: center;
  gap: 4px 16px;
}

.pd-site-footer-account [hidden] {
  display: none !important;
}

@media (max-width: 899px) {
  .pd-site-footer-games .pd-site-footer-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }

  .pd-site-footer-col a,
  .pd-site-footer-col button,
  .pd-site-footer-account button {
    min-height: 40px;
    padding: 6px 0;
  }
}

@media (max-width: 768px) {
  .pd-site-footer-brand,
  .pd-site-footer-col {
    text-align: center;
  }

  .pd-site-footer-logo {
    justify-content: center;
  }

  .pd-site-footer-tag {
    margin-inline: auto;
  }

  .pd-site-footer-list {
    align-items: center;
  }

  .pd-site-footer-games .pd-site-footer-list {
    justify-items: center;
  }

  .pd-site-footer-col a,
  .pd-site-footer-col button,
  .pd-site-footer-account button {
    justify-content: center;
    text-align: center;
  }

  .pd-site-footer-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

@media (min-width: 900px) {
  .pd-site-footer-top {
    grid-template-columns: minmax(148px, 176px) minmax(96px, 0.55fr) minmax(300px, 1.7fr) minmax(96px, 0.55fr);
    grid-template-areas: "brand explore games studio";
    align-items: start;
    gap: 8px 22px;
  }

  .pd-site-footer-col {
    min-width: 0;
  }

  .pd-site-footer-games .pd-site-footer-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 18px;
  }

  .pd-site-footer-games a {
    white-space: nowrap;
  }

  .pd-site-footer-tag {
    max-width: 14em;
  }
}