/* 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
 * 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"] {
  /* 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: #f4f3ee;
  --pd-colour-press: rgba(26, 26, 26, 0.08);

  /* Shared page wash (hub + game start). Applied on `html` with
     background-attachment: fixed so body/scrim/nav never disagree. */
  --pd-page-background-color: #ffffff;
  --pd-page-background-image:
    radial-gradient(1200px 480px at 12% -10%, rgba(46, 158, 91, 0.07), transparent 60%),
    radial-gradient(900px 420px at 92% 0%, rgba(22, 22, 19, 0.04), transparent 55%);
  /* Shorthand for components that still set `background` in one go. */
  --pd-page-background:
    var(--pd-page-background-image),
    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-wordsnake: #f2ddd2;
  --pd-tone-themiddle: #f2e6c4;
  --pd-tone-zanagrams: #dce4f5;
  --pd-tone-sunflowers: #f4edbe;
  --pd-tone-newslink: #e4ebe3;
  --pd-tone-headlines: #e9d4f4;
  --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 */
  --pd-shadow-card: 0 4px 14px rgba(22, 22, 19, 0.06);
  --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;
  --pd-z-rotate: 9000;
}

/* 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:
    radial-gradient(1200px 480px at 12% -10%, rgba(60, 184, 122, 0.08), transparent 60%),
    radial-gradient(900px 420px at 92% 0%, rgba(255, 255, 255, 0.03), transparent 55%);
  --pd-page-background:
    var(--pd-page-background-image),
    var(--pd-page-background-color);

  --pd-tone-18words: #24362c;
  --pd-tone-wordsnake: #3a2c26;
  --pd-tone-themiddle: #3a3424;
  --pd-tone-zanagrams: #2a3142;
  --pd-tone-sunflowers: #3a3420;
  --pd-tone-newslink: #2a322a;
  --pd-tone-headlines: #2f2038;
  --pd-tone-experiments: #3a2628;

  --pd-shadow-card: 0 4px 14px rgba(0, 0, 0, 0.28);
  --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. Atmosphere lives on html (fixed); body stays clear. */
html[data-theme="dark"] body.pd-game,
html[data-theme="dark"] body.pd-hub,
html[data-theme="dark"] .pd-game-root {
  background: transparent !important;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pd-transition-fast: 0s;
    --pd-transition-base: 0s;
  }
}

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

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

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;
  /* One fixed wash for hub + game starts — body stays transparent so nav
     never paints a second, misaligned copy of the gradient. */
  background-color: var(--pd-page-background-color, var(--pd-colour-background));
  background-image: var(--pd-page-background-image, none);
  background-attachment: fixed;
  background-repeat: no-repeat;
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  background-color: transparent;
  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;
}

/* Keep real text entry selectable / pasteable. */
input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -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).
  The top bar is always position:fixed; body padding-top already reserves its
  slot, so no extra ::before spacer is needed when a modal opens.
  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);
}

.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(70dvh, calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  /* 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;
}

@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-complete-help-modal .pd-modal-card {
    --pd-sheet-y: 110%;
    width: 100%;
    max-width: none;
    height: 90dvh;
    max-height: 90dvh;
    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 {
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }

  /* 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 (prefers-reduced-motion: reduce) {
    .pd-modal-card,
    .pd-share-dialog .pd-modal-card,
    .pd-modal-archive .pd-modal-card,
    .pd-complete-help-modal .pd-modal-card {
      transition: none;
      --pd-sheet-y: 0px;
      transform: 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: 90dvh;
    max-height: 90dvh;
  }
}

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

.pd-share-preview {
  margin: 0;
  padding: 16px 18px;
  max-height: min(36dvh, 280px);
  overflow: auto;
  box-sizing: border-box;
  border: 2px solid var(--pd-colour-border-strong);
  border-radius: 12px;
  background: #f6f4ef;
  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 -------------------------------------------------------------- */

.pd-toast-host {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom, 0px));
  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;
}

.pd-toast {
  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);
}

.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(78dvh, calc(100dvh - 48px));
}

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

/* No title row — × floats top-right; month nav is centered below */
.pd-modal-archive .pd-modal-scroll {
  padding-top: 22px;
  padding-bottom: 26px;
  padding-right: 20px;
}

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

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

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

.pd-archive-month {
  flex: 0 1 auto;
  min-width: 0;
  text-align: center;
  font-family: var(--pd-font-ui);
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: 0.01em;
  color: var(--pd-colour-heading);
  white-space: nowrap;
}

.pd-archive-nav-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  background: var(--pd-archive-nav-bg, #f4f4f2);
  border: none;
  border-radius: 12px;
  color: var(--pd-colour-text);
  cursor: pointer;
  transition: background var(--pd-transition-fast), color var(--pd-transition-fast);
}

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

.pd-archive-nav-btn:hover:not(:disabled) {
  background: var(--pd-archive-nav-bg-hover, #ebebe8);
  color: var(--pd-colour-heading);
}

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

.pd-archive-dow,
.pd-archive-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.pd-archive-grid {
  /* 6 weeks always rendered — locks height across months */
  grid-template-rows: repeat(6, auto);
}

.pd-archive-dow {
  margin-bottom: 8px;
}

.pd-archive-dow span {
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pd-colour-muted, #9a9a96);
}

.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-nav-bg: #2a2a26;
  --pd-archive-nav-bg-hover: #3a3a35;
  --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(100vw - 40px));
  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);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-pause-modal {
    animation: none;
  }
}

/* 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: 90dvh;
    max-height: 90dvh;
    border-radius: var(--pd-modal-radius, 20px) var(--pd-modal-radius, 20px) 0 0;
    border-bottom: 0;
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    overflow-x: hidden;
    overflow-y: auto;
    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;
  }

  @media (prefers-reduced-motion: reduce) {
    .pd-pause-modal {
      transition: none;
      --pd-sheet-y: 0px;
      transform: none;
    }
  }
}

.pd-pause-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: var(--pd-modal-close-size, 48px);
  height: var(--pd-modal-close-size, 48px);
  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: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: 30px;
  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 {
  margin: 0;
  font-family: var(--pd-font-heading);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--pd-colour-heading, #161613);
}

.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: 12px;
  width: 100%;
  margin: 0;
  padding: 4px 0 8px;
  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: 12px;
  min-height: 112px;
  margin: 0;
  padding: 18px 12px 16px;
  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;
  box-shadow: none;
  transition: transform 0.18s var(--pd-ease-rise, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Soft hub-card tones per action */
.pd-pause-menu-btn[data-pause-action="howto"] { --pd-pause-tile: var(--pd-tone-18words); }
.pd-pause-menu-btn[data-pause-action="archive"] { --pd-pause-tile: var(--pd-tone-zanagrams); }
.pd-pause-menu-btn[data-pause-action="giveup"] { --pd-pause-tile: var(--pd-tone-wordsnake); }
.pd-pause-menu-btn[data-pause-action="feedback"] { --pd-pause-tile: var(--pd-tone-sunflowers); }
.pd-pause-menu-btn[data-pause-action="settings"] { --pd-pause-tile: var(--pd-tone-headlines); }
.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: 48px;
  height: 48px;
  border-radius: 0;
  background: transparent;
  color: var(--pd-colour-heading, #161613);
}

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

.pd-pause-menu-label {
  display: block;
  max-width: 9.5em;
  font-family: var(--pd-font-ui);
  font-size: 15px;
  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);
}

/* In-pause panel (howto / archive / feedback) replaces the menu in-place */
.pd-pause-panel {
  display: none;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  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 {
  display: none;
}

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

.pd-pause-panel-title {
  margin: 0;
  padding: 4px 40px 0 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: left;
}

.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;
}

@media (max-width: 768px) {
  .pd-pause-body {
    gap: 30px;
    justify-content: flex-start;
    padding: 8px 0 0;
  }

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

  .pd-pause-menu-btn {
    min-height: 120px;
    padding: 18px 14px 16px;
    border-radius: 14px;
  }

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

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

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

@media (prefers-reduced-motion: reduce) {
  .pd-pause-menu-btn {
    transition: none;
  }

  .pd-pause-menu-btn:hover,
  .pd-pause-menu-btn:active {
    transform: none;
  }
}

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:
    linear-gradient(
      165deg,
      color-mix(in srgb, var(--pd-pause-tile) 18%, var(--pd-modal-surface, #1c1c19)) 0%,
      var(--pd-modal-surface, #1c1c19) 72%
    );
}

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;
}

.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: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--pd-colour-text);
  text-align: left;
}

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

/* --- 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: 17px;
  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; }

/* 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, especially with our instant spinner handoff. */
@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;
}

.pd-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Above page content; below drawer (250) and 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);
  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;
}

/* 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);
}

/* Reserve chrome height in document flow so content never sits underneath. */
body.pd-has-topbar {
  --pd-chrome-height: calc(58px + env(safe-area-inset-top, 0px));
  padding-top: var(--pd-chrome-height);
}

body.pd-has-topbar.pd-beta-on {
  --pd-chrome-height: calc(var(--pd-beta-bar-content) + 58px + env(safe-area-inset-top, 0px));
}

@media (min-width: 769px) {
  body.pd-has-topbar {
    --pd-chrome-height: calc(64px + env(safe-area-inset-top, 0px));
  }

  body.pd-has-topbar.pd-beta-on {
    --pd-chrome-height: calc(var(--pd-beta-bar-content) + 64px + env(safe-area-inset-top, 0px));
  }
}

.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;
}

.pd-chrome-brand {
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  padding: 0;
  line-height: 1;
  color: var(--pd-colour-heading, #161613);
  text-decoration: none;
  white-space: nowrap;
  /* Avoid fallback→Baloo width jump: stay invisible until fonts are ready. */
  opacity: 0;
}

html.pd-fonts-ready .pd-chrome-brand {
  opacity: 1;
}

html.pd-fonts-ready .pd-chrome-brand:hover {
  opacity: 0.85;
}

.pd-chrome-brand:focus,
.pd-chrome-brand:focus-visible {
  outline: none;
}

.pd-chrome-brand-pzl {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.06em;
}

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

@media (max-width: 768px) {
  .pd-chrome-brand-games {
    display: none;
  }
}

.pd-chrome-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pd-colour-heading, #161613);
  cursor: pointer;
  transition: background 0.15s ease;
}

.pd-chrome-burger:hover,
body.pd-drawer-open .pd-chrome-burger {
  background: rgba(22, 22, 19, 0.04);
}

.pd-chrome-burger-lines {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 14px;
}

.pd-chrome-burger-lines span {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

/* Welcome / home screens: hide game tools */
body.pd-welcome #pd-chrome-tools {
  display: none !important;
}

/* 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: auth only — no pause / help / archive icons */
body.pd-done #pd-chrome-tools,
body.pd-game:has(.is-done) #pd-chrome-tools,
html.pd-done #pd-chrome-tools {
  display: none !important;
}

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

/* Settings gear retired — dark mode lives in the drawer */
#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;
}

.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 {
  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: 0 1px 3px rgba(0, 0, 0, 0.2);
  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 — welcome + completion keep Log in / Sign up / Profile.
   Requires .pd-playing (set when chrome tools show) so home→game boot doesn't
   briefly hide these before .pd-welcome lands. */
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 + top bar (modals / drawer / pause). Above chrome,
   below drawer panel (250) and modals (10000). Mobile: light fade; desktop: dim. */
.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));
  }
}

.pd-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 190; /* with frost, below chrome — click catcher only */
  background: transparent;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.pd-drawer-backdrop:not([hidden]) {
  opacity: 1;
}

/* Drawer stays display:flex while [hidden] so the slide animation can run.
   Force the backdrop fully out of the tree when closed so Safari re-samples
   the bottom toolbar (author display would otherwise fight [hidden]). */
.pd-drawer-backdrop[hidden] {
  display: none !important;
}

.pd-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 250;
  display: flex;
  flex-direction: column;
  width: min(340px, calc(100vw - 48px));
  /* Flush to the screen edges — safe-area lives in the scroll pad so content
     can reach the bottom instead of being clipped by shell padding. */
  padding: 0;
  background: var(--pd-colour-background, #fff);
  box-shadow: 12px 0 40px rgba(22, 22, 19, 0.14);
  text-align: left;
  /* Shell stays put; only .pd-drawer-scroll moves — keeps rubber-band on white. */
  overflow: hidden;
  overscroll-behavior: none;
  transform: translateX(-104%);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  box-sizing: border-box;
  font-family: "Baloo 2", system-ui, -apple-system, sans-serif;
  color: var(--pd-colour-heading, #161613);
}

.pd-drawer:not([hidden]) {
  transform: translateX(0);
}

.pd-drawer-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  background: var(--pd-colour-background, #fff);
  padding: 12px 20px max(16px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

body.pd-drawer-open,
html:has(body.pd-drawer-open) {
  overflow: hidden;
  overscroll-behavior: none;
}

.pd-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  /* Left = scroll pad (20) + game row pad (12) so logo lines up with icons. */
  min-height: calc(58px + env(safe-area-inset-top, 0px));
  padding: calc(10px + env(safe-area-inset-top, 0px)) 20px 10px 32px;
  margin: 0;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(22, 22, 19, 0.1);
}

@media (min-width: 769px) {
  .pd-drawer-head {
    min-height: 64px;
    padding: 12px 20px 12px 32px;
  }
}

.pd-drawer-head-left {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* Logo starts at the burger's left edge (drawer padding matches chrome). */
.pd-drawer-brand-spacer {
  display: none;
}

.pd-drawer-head-right {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.pd-drawer-brand {
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  padding: 0;
  min-width: 0;
  line-height: 1;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
}

html.pd-fonts-ready .pd-drawer-brand {
  opacity: 1;
}

html.pd-fonts-ready .pd-drawer-brand:hover {
  opacity: 0.85;
}

.pd-drawer-brand:focus,
.pd-drawer-brand:focus-visible {
  outline: none;
}

.pd-drawer-brand-pzl {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.06em;
}

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

.pd-drawer-theme {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin: 0 2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pd-colour-heading, #161613);
  cursor: pointer;
  transition: background 0.15s ease, color 0.18s ease;
}

.pd-drawer-theme:hover {
  background: var(--pd-colour-press);
}

.pd-drawer-theme:focus,
.pd-drawer-theme:focus-visible {
  outline: none;
}

.pd-drawer-theme-icons {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
}

.pd-drawer-theme-sun,
.pd-drawer-theme-moon {
  position: absolute;
  inset: 0;
  width: 22px;
  height: 22px;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.18s ease;
}

/* Show the mode you'll switch to: moon in light, sun in dark. */
.pd-drawer-theme-sun {
  color: #c4922a;
  opacity: 0;
  transform: rotate(40deg) scale(0.7);
}

.pd-drawer-theme-moon {
  color: #6b7bb0;
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.pd-drawer-theme.is-on .pd-drawer-theme-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.pd-drawer-theme.is-on .pd-drawer-theme-moon {
  color: #c5d0ff;
  opacity: 0;
  transform: rotate(-40deg) scale(0.7);
}

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

@media (prefers-reduced-motion: reduce) {
  .pd-drawer-theme-sun,
  .pd-drawer-theme-moon {
    transition: opacity 0.15s ease;
  }

  .pd-drawer-theme-sun,
  .pd-drawer-theme.is-on .pd-drawer-theme-sun,
  .pd-drawer-theme-moon,
  .pd-drawer-theme.is-on .pd-drawer-theme-moon {
    transform: none;
  }
}

.pd-drawer-close {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.pd-drawer-close svg {
  width: 18px;
  height: 18px;
  display: block;
}

.pd-drawer-close:hover {
  background: var(--pd-colour-press);
}

.pd-drawer-games {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 22px;
}

.pd-drawer-game {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  transition: background 0.15s ease;
}

.pd-drawer-game:hover,
.pd-drawer-game:focus-visible {
  background: var(--pd-colour-press);
}

.pd-drawer-game:active {
  background: color-mix(in srgb, var(--pd-colour-heading, #161613) 12%, var(--pd-colour-press));
}

.pd-drawer-game.is-current {
  background: var(--pd-colour-press);
}

.pd-drawer-game-icon {
  width: 36px;
  height: 36px;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  background: none;
}

.pd-drawer-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(22, 22, 19, 0.08);
}

.pd-drawer-link[hidden] {
  display: none !important;
}

.pd-drawer-link {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--pd-colour-muted, #6b6b66);
  font-family: var(--pd-font-ui);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
  cursor: pointer;
}

.pd-drawer-link:hover,
.pd-drawer-link:focus-visible {
  background: rgba(22, 22, 19, 0.04);
  color: var(--pd-colour-heading, #161613);
}

.pd-drawer-link.is-current {
  background: rgba(22, 22, 19, 0.04);
  color: var(--pd-colour-heading, #161613);
  font-weight: 600;
}

.pd-drawer-link:focus,
.pd-drawer-link:focus-visible {
  outline: none;
}


@media (prefers-reduced-motion: reduce) {
  .pd-drawer,
  .pd-drawer-backdrop {
    transition: none;
  }
}

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

body.pd-game .pd-chrome {
  flex-shrink: 0;
  align-self: stretch;
}

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 the header Log in / Sign up controls and the drawer rows.
   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-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(90dvh, calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
}

@media (max-width: 768px) {
  .pd-account-modal .pd-modal-card {
    width: 100%;
    max-width: none;
    height: 90dvh;
    max-height: 90dvh;
    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 {
  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 8px;
  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, box-shadow 0.15s ease;
}

.pd-account-game:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--pd-colour-heading, #161613) 10%, transparent);
}

.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--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--sunflowers { --pd-account-tone: var(--pd-tone-sunflowers); }

.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 2px;
  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, 4vw, 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);
}

/* Delete account. Understated until it is opened — it should be findable
   without competing with the games list above it. */
.pd-account-danger {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--pd-colour-border, #c8c8c8);
  text-align: center;
}

.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;
}

.pd-autofill-host {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* --- Page hold (destination only) -------------------------------------- */

/*
  Keep the top bar + shared page wash visible. Hide hub/game content and show
  a small spinner until the destination marks ready. No outbound hold.
*/
@keyframes pd-page-spin {
  to {
    transform: translate(-50%, 0) rotate(360deg);
  }
}

@keyframes pd-page-loader-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

body.pd-hub:not(.pd-content-ready)::after,
body:has(> .pd-game-root):not(.pd-content-ready)::after {
  content: "";
  position: fixed;
  top: calc(var(--pd-chrome-height, 58px) + 96px);
  left: 50%;
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 2px solid color-mix(in srgb, var(--pd-colour-text, #1a1a1a) 12%, transparent);
  border-top-color: color-mix(in srgb, var(--pd-colour-text, #1a1a1a) 48%, transparent);
  border-radius: 50%;
  transform: translate(-50%, 0);
  animation:
    pd-page-spin 0.7s linear infinite,
    pd-page-loader-in 0.1s ease both;
  pointer-events: none;
  z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  body.pd-hub:not(.pd-content-ready)::after,
  body:has(> .pd-game-root):not(.pd-content-ready)::after {
    animation: none;
    opacity: 0.55;
  }
}

/* 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-heading, #161613);
  border-color: var(--pd-colour-heading, #161613);
}

.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;
}