/* /Styles/Core/Site.css */

/* =========================
   Global tokens
   ========================= */
:root {
  /* Site defaults */
  --baseline-font-size: 16.5px;
  --narrative-line-height: 1.6;

  /* Layout scaler: scalars (overridden by JS) */
  --site-typography-scale: 1;
  --site-layout-metric-scale: 1;
  --site-content-width-scale: 1;

  /* Layout: spacing base values (design viewport) */
  --page-gap-base: 64px;
  --content-gap-base: 32px;

  /* Derived spacing: scaled by layout scaler */
  --page-gap: calc(var(--page-gap-base) * var(--site-layout-metric-scale));
  --content-gap: calc(var(--content-gap-base) * var(--site-layout-metric-scale));

  /* Typography: font families */
  --font-family-guide: "Figtree", sans-serif; /* titles / headings / labels / etc */
  --font-family-narrative: "Comfortaa", ui-rounded, sans-serif;
  --font-family-monospaced: "Source Code Pro", monospace;
  --font-family-redacted: "RedactedScript";

  /* Typography: font weights */
  --font-weight-thin: 100;
  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;
  --font-weight-black: 900;

  /* Site colors */
  --color-background: hsl(232 53% 12%);
  --color-narrative: hsl(265 100% 84%);
  --color-guide: hsl(232 100% 94%);
  --color-highlight: hsl(252 100% 75%);
  --color-modal-background: hsl(232 27% 6%);

  /* Legacy metrics (deprecated) */
  --space-s-base: 12px;
  --space-m-base: 16px;
  --space-s: calc(var(--space-s-base) * var(--site-layout-metric-scale));
  --space-m: calc(var(--space-m-base) * var(--site-layout-metric-scale));
  --radius-s-base: 6px;
  --radius-m-base: 8px;
  --radius-s: calc(var(--radius-s-base) * var(--site-layout-metric-scale));
  --radius-m: calc(var(--radius-m-base) * var(--site-layout-metric-scale));

  /* Decorative background ink */
  --background-ink-color: hsl(246 44% 17%);

  /* Dividers (base + scaled) */
  --divider-thickness-prominent-base: 3px;
  --divider-thickness-moderate-base: 2px;
  --divider-thickness-subtle-base: 1px;

  --divider-thickness-prominent: calc(var(--divider-thickness-prominent-base) * var(--site-layout-metric-scale));
  --divider-thickness-moderate: calc(var(--divider-thickness-moderate-base) * var(--site-layout-metric-scale));
  --divider-thickness-subtle: calc(var(--divider-thickness-subtle-base) * var(--site-layout-metric-scale));

  --divider-gradient-moderate:
    linear-gradient(
      to right,
      transparent 0%,
      var(--color-guide) 20%,
      var(--color-guide) 80%,
      transparent 100%);
  --divider-opacity-moderate: 0.5;
  --divider-gradient-subtle:
    linear-gradient(
      to right,
      transparent 0%,
      transparent 20%,
      var(--color-guide) 50%,
      transparent 80%,
      transparent 100%);
  --divider-opacity-subtle: 0.5;

  /* Swapscotch title gradient */
  --swapscotch-title-gradient:
    linear-gradient(
      180deg,
      hsl(33 100% 67%) 0%,
      hsl(33 100% 67%) 13%,
      hsl(20 100% 70%) 42%,
      hsl(342 100% 67%) 71%,
      hsl(332 43% 56%) 100%);

  /* Title + subtitle bases (design viewport) */
  --site-title-font-size-base: 48px;
  --header-subtitle-offset-x-base: 55px;
  --header-subtitle-gap-base: 5px;
  --header-subtitle-tile-size-base: 30px;
  --header-subtitle-shift-y-base: 8px;

  /* Scaled title + subtitle (use global typography scale) */
  --site-title-font-size: calc(var(--site-title-font-size-base) * var(--site-typography-scale));
  --header-subtitle-offset-x: calc(var(--header-subtitle-offset-x-base) * var(--site-typography-scale));
  --header-subtitle-gap: calc(var(--header-subtitle-gap-base) * var(--site-typography-scale));
  --header-subtitle-tile-size: calc(var(--header-subtitle-tile-size-base) * var(--site-typography-scale));
  --header-subtitle-shift-y: calc(var(--header-subtitle-shift-y-base) * var(--site-typography-scale));

  /* Content heading font sizes (base + scaled) */
  --content-title-font-size-base: 40px;
  --content-subtitle-font-size-base: 36px;
  --content-heading-primary-font-size-base: 30px;
  --content-heading-secondary-font-size-base: 22.5px;

  --content-title-font-size: calc(var(--content-title-font-size-base) * var(--site-typography-scale));
  --content-subtitle-font-size: calc(var(--content-subtitle-font-size-base) * var(--site-typography-scale));
  --content-heading-primary-font-size: calc(var(--content-heading-primary-font-size-base) * var(--site-typography-scale));
  --content-heading-secondary-font-size: calc(var(--content-heading-secondary-font-size-base) * var(--site-typography-scale));

  /* Content title icon size (base + scaled) */
  --content-title-icon-size-base: 44px;
  --content-title-icon-size: calc(var(--content-title-icon-size-base) * var(--site-typography-scale));

  /* Subtitle icon size (base + scaled) */
  --subtitle-icon-size-base: 40px;
  --subtitle-icon-size: calc(var(--subtitle-icon-size-base) * var(--site-typography-scale));

  /* Shared heading icon gap (titles + subtitles) */
  --heading-icon-gap-inline: 0.5ch;

  /* Footer typography + icons: base values + derived scaled values */
  --footer-link-font-size-base: 24px;
  --social-icon-size-base: 32px;
  --footer-link-font-size: calc(var(--footer-link-font-size-base) * var(--site-typography-scale));
  --social-icon-size: calc(var(--social-icon-size-base) * var(--site-typography-scale));

  /* Breadcrumbs typography (base + scaled) */
  --breadcrumbs-font-size-base: 16px;
  --breadcrumbs-font-size: calc(var(--breadcrumbs-font-size-base) * var(--site-typography-scale));

  /* Help text typography (base + scaled) */
  --help-text-font-size-base: 14px;
  --help-text-font-size: calc(var(--help-text-font-size-base) * var(--site-typography-scale));

  /* Content widths (percentages; base values are design viewport intent) */
  --content-width-normal-base: 75;
  --content-width-wide-base: 90;
  --content-width-narrow-base: 60;
  --content-width-extra-narrow-base: 50;

  /* Header / footer inner width base (for now, same as wide content width) */
  --header-footer-width-base: var(--content-width-wide-base);

  /* Social link row geometry (base + scaled) */
  --social-links-gap-base: 16px;
  --social-links-gap: calc(var(--social-links-gap-base) * var(--site-layout-metric-scale));

  /* Shadows (base + scaled) */
  --drop-shadow-subtle-offset-y-base: 2px;
  --drop-shadow-subtle-blur-base: 6px;
  --drop-shadow-subtle-offset-y: calc(var(--drop-shadow-subtle-offset-y-base) * var(--site-layout-metric-scale));
  --drop-shadow-subtle-blur: calc(var(--drop-shadow-subtle-blur-base) * var(--site-layout-metric-scale));
  --drop-shadow-subtle: 0 var(--drop-shadow-subtle-offset-y) var(--drop-shadow-subtle-blur) hsl(0 0% 0% / 0.28);

  /* Images */
  --image-frame-color: hsl(0 0% 100% / 0.15);
  --image-corner-radius-base: 18px;
  --image-corner-radius: calc(var(--image-corner-radius-base) * var(--site-layout-metric-scale));
  --image-background-gradient:
    linear-gradient(
      to bottom,
      hsl(0 0% 7%),
      hsl(0 0% 10%));

  /* Controls (geometry scales with typography) */
  --control-font-family: var(--font-family-guide);
  --control-font-size-base: 16px;
  --control-font-size: calc(var(--control-font-size-base) * var(--site-typography-scale));
  --control-font-weight: var(--font-weight-semi-bold);
  --control-radius: var(--radius-m);
  --control-pad-y: 0.5em;        /* vertical padding, relative to control font size */
  --control-pad-x: 0.75em;       /* horizontal padding, relative to control font size */
  --control-gap: 0.25lh;         /* spacing between control + label, etc */

  /* Backdrop veil (base + scaled feather radius) */
  --backdrop-veil-color: color-mix(in hsl, var(--color-background) 67%, transparent);
  --backdrop-veil-feather-radius-base: 24px;
  --backdrop-veil-feather-radius: calc(var(--backdrop-veil-feather-radius-base) * var(--site-layout-metric-scale));

  /* Countdown timer: shared theme + base metrics */
  --countdown-digits-font: var(--font-family-guide);
  --countdown-digits-weight: var(--font-weight-extra-bold);
  --countdown-digit-size: 32px;
  --countdown-card-padding-x: 0.1em;

  --countdown-labels-font: var(--font-family-narrative);
  --countdown-labels-weight: var(--font-weight-bold);
  --countdown-label-size: 11px;

  --countdown-slot-gap: 0.05em;
  --countdown-unit-gap: 0.25em;
  --countdown-digit-gap: 0.0625em;

  --countdown-corner-radius-proportion: 0.625;
  --countdown-edge-thickness-scale: 1;
  --countdown-seam-thickness-scale: 1;

  /* Header countdown label metrics (base + scaled) */
  --header-countdown-label-row-gap-base: 6px;
  --header-countdown-label-font-size-base: 19px;
  --header-countdown-label-row-gap: calc(var(--header-countdown-label-row-gap-base) * var(--site-typography-scale));
  --header-countdown-label-font-size: calc(var(--header-countdown-label-font-size-base) * var(--site-typography-scale));

  /* ---------- Callout panel theme (shared across quotes, bios, etc.) ---------- */
  --callout-panel-padding-base: 20px;
  --callout-panel-radius-base: 24px;
  --callout-panel-padding: calc(var(--callout-panel-padding-base) * var(--site-layout-metric-scale));
  --callout-panel-radius: calc(var(--callout-panel-radius-base) * var(--site-layout-metric-scale));
  --callout-panel-border-color: hsl(232 33.3% 37.5% / 0.5);
  --callout-panel-background:
    linear-gradient(
      180deg,
      hsl(232 33.3% 37.5% / 0.25),
      hsl(232 33.3% 18.8% / 0.25)
    );

  /* ---------- Donation/support panel width (sitewide overrideable) ---------- */
  --donation-panel-width-base: 50; /* percent at design viewport */
  --donation-panel-width: calc(var(--donation-panel-width-base) * var(--site-content-width-scale) * 1%);

  /* Lists: indentation in ch units */
  --list-indent-base: 2ch;  /* indent of first level from left edge */
  --list-indent-step: 3ch;  /* additional indent per deeper level */

  /* ---------- Global row accent (tables) ---------- */
  --highlighted-row-ring-color: var(--color-highlight);
  --highlighted-row-ring-thickness-base: 1px;
  --highlighted-row-ring-thickness: calc(var(--highlighted-row-ring-thickness-base) * var(--site-layout-metric-scale));
  --highlighted-row-band:
    linear-gradient(
      0deg,
      color-mix(in hsl, var(--color-highlight), transparent 80%),
      transparent);

  /* ---------- Tables: cell padding (base + scaled) ---------- */
  --table-cell-padding-y-base: 10px;
  --table-cell-padding-x-base: 12px;
  --table-cell-padding-y: calc(var(--table-cell-padding-y-base) * var(--site-layout-metric-scale));
  --table-cell-padding-x: calc(var(--table-cell-padding-x-base) * var(--site-layout-metric-scale));

  /* ---------- Site Play New Game button font size ---------- */
  --site-play-new-game-button-font-size-base: 20px;
  --site-play-new-game-button-font-size: calc(var(--site-play-new-game-button-font-size-base) * var(--site-typography-scale));

  /* ---------- Play New Game button colors (shared) ---------- */
  --play-new-game-button-label-color: hsl(0 0% 8%);
  --play-new-game-button-top-color: hsl(20 87% 62%);
  --play-new-game-button-middle-color: hsl(342 100% 61%);
  --play-new-game-button-bottom-color: hsl(332 53% 46%);
  --fully-rounded: 999px;

  /* ---------- Shared tile spacing bases ---------- */
  --tile-gap-column-base: 3px;   /* horizontal spacing between tiles */
  --tile-gap-row-base: 24px;     /* vertical spacing between tiles */

  /* Glyphy puzzle tile size multipliers */
  --glyphy-puzzle-tile-scale-mini:   calc(1/2);   /* 0.5 × normal */
  --glyphy-puzzle-tile-scale-small:  calc(3/4);   /* 0.75 × normal */
  --glyphy-puzzle-tile-scale-normal: 1;           /* 1.0 × normal */
  --glyphy-puzzle-tile-scale-large:  calc(4/3);   /* ~1.333 × normal */

  /* Pushbutton colors */
  --lock-button-label-color: hsl(291 67% 13%);
  --lock-button-top-color: hsl(324 100% 70%);
  --lock-button-bottom-color: hsl(290 60% 39%);
  --share-button-label-color: hsl(235 100% 10%);
  --share-button-top-color: hsl(225 100% 70%);
  --share-button-bottom-color: hsl(244 63% 52%);

  /* Icon inks */
  --ink-swap: linear-gradient(180deg, hsl(225 100% 70%), hsl(244 63% 51%));
  --ink-lock: linear-gradient(180deg, hsl(324 100% 70%), hsl(290 60% 39%));
}

/* =========================
   Resets
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

/* Text-like form controls inherit site typography */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea {
  font: inherit;
  line-height: inherit;
  color: inherit;
}

/* Prevent mobile browsers from auto-boosting text size */
html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* =========================
   Web fonts
   ========================= */
@font-face {
  font-family: "Figtree";
  src: url("/Assets/Fonts/Figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  font-feature-settings: 'ss01' 1;
}
@font-face {
  font-family: "Comfortaa";
  src: url("/Assets/Fonts/Comfortaa.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("/Assets/Fonts/SourceCodePro.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Code Pro";
  src: url("/Assets/Fonts/SourceCodePro-Italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "RedactedScript";
  src: url("/Assets/Fonts/RedactedScript-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Base text & page colors
   ========================= */
body {
  font-family: var(--font-family-narrative);
  font-weight: var(--font-weight-regular);
  font-size: calc(var(--baseline-font-size) * var(--site-typography-scale));
  color: var(--color-narrative);
  background-color: var(--color-background);
}

/* =========================
   Formated content
   ========================= */
.formatted-content {
  line-height: var(--narrative-line-height);
}

/* Highlighted */
.formatted-content .highlighted {
  color: var(--color-highlight);
  font-weight: var(--font-weight-bold);
}

/* Paragraph */
p { line-height: var(--narrative-line-height); }

/* Default link color */
a { color: var(--color-highlight); }

/* =========================
   Lists (4 levels, in ch units)
   ========================= */

/* Level 1 */
.formatted-content ul,
.formatted-content ol {
  /* indent the list as a block; bullets hang outside this margin */
  margin-inline-start: var(--list-indent-base);
  padding-inline-start: 0;
  list-style-position: outside;
}

/* Level 2 */
.formatted-content ul ul,
.formatted-content ul ol,
.formatted-content ol ul,
.formatted-content ol ol {
  margin-inline-start: var(--list-indent-step);
  padding-inline-start: 0;
}

/* Level 3 */
.formatted-content ul ul ul,
.formatted-content ul ul ol,
.formatted-content ul ol ul,
.formatted-content ul ol ol,
.formatted-content ol ul ul,
.formatted-content ol ul ol,
.formatted-content ol ol ul,
.formatted-content ol ol {
  margin-inline-start: var(--list-indent-step);
  padding-inline-start: 0;
}

/* Level 4 */
.formatted-content ul ul ul ul,
.formatted-content ul ul ul ol,
.formatted-content ul ul ol ul,
.formatted-content ul ul ol ol,
.formatted-content ul ol ul ul,
.formatted-content ul ol ul ol,
.formatted-content ul ol ol ul,
.formatted-content ul ol ol {
  margin-inline-start: var(--list-indent-step);
  padding-inline-start: 0;
}

/* =========================
   Quote
   ========================= */
.quote {
  width: calc(2/3 * 100%);
  margin-inline: auto;
  margin-block: var(--content-gap);

  padding: var(--callout-panel-padding);

  border: thin solid var(--callout-panel-border-color);
  border-radius: var(--callout-panel-radius);
  background: var(--callout-panel-background);

  display: grid;
  row-gap: 0.25lh;
}
.quote .quotation > p + p {
  margin-top: 1lh;
}
.quote .attribution {
  font-family: var(--font-family-guide);
  font-weight: var(--font-weight-medium);
  color: var(--color-guide);
}
.quote .attribution::before {
  content: "⁓ ";
}

/* Backdrop veil */
.backdrop-veil {
  position: relative;
  z-index: 0;
  /* default: veils visible unless overridden */
  --backdrop-veil-visibility: visible;
}
.backdrop-veil::before {
  content: "";
  position: absolute;
  inset: 0;
  visibility: var(--backdrop-veil-visibility);
  background-color: var(--backdrop-veil-color);
  box-shadow: 0 0 var(--backdrop-veil-feather-radius)
                 var(--backdrop-veil-feather-radius)
                 var(--backdrop-veil-color);
  z-index: -1;
}

/* =========================
   Decorative backdrop image
   ========================= */
.backdrop-image{
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100vmax;
  height: 100vmax;
  transform: translate(-50%, -50%) var(--backdrop-orientation, rotate(0deg) scale(1,1));
  transform-origin: 50% 50%;
  pointer-events: none;
  z-index: 0;
  color: var(--background-ink-color);
}
.backdrop-orientation-0 { --backdrop-orientation: rotate(0deg) scale(1,1); }
.backdrop-orientation-1 { --backdrop-orientation: rotate(90deg) scale(1,1); }
.backdrop-orientation-2 { --backdrop-orientation: rotate(180deg) scale(1,1); }
.backdrop-orientation-3 { --backdrop-orientation: rotate(270deg) scale(1,1); }
.backdrop-orientation-4 { --backdrop-orientation: rotate(0deg) scale(-1,1); }
.backdrop-orientation-5 { --backdrop-orientation: rotate(0deg) scale(1,-1); }
.backdrop-orientation-6 { --backdrop-orientation: rotate(90deg) scale(-1,1); }
.backdrop-orientation-7 { --backdrop-orientation: rotate(90deg) scale(1,-1); }

/* =========================
   Page layout shell
   ========================= */

.page-shell {
  display: flex;
  flex-direction: column;

  min-height: 100vh;   /* fallback */
  min-height: 100svh;  /* small viewport: avoids mobile URL bar jank */

  /* ensure content sits above the fixed backdrop image */
  position: relative;
  z-index: 1;
}

.page-shell > .site-header + .content {
  margin-top: var(--page-gap);
}

.page-shell > .page-spacer {
  height: calc(var(--page-gap) * 2);
  flex: 1 0 auto; /* expands only when content is short to push footer down */
}

/* safety: footer sits after the spacer; no extra margins compete with gaps */
.page-shell > .site-footer {
  margin-block: 0;
}

/* =========================
   Content widths + rhythm
   ========================= */
.content {
  width: calc(var(--content-width-normal-base) * var(--site-content-width-scale) * 1%);
  margin-inline: auto;

  display: grid;
  row-gap: var(--content-gap);
}
.content.wide {
  width: calc(var(--content-width-wide-base) * var(--site-content-width-scale) * 1%);
}
.content.narrow {
  width: calc(var(--content-width-narrow-base) * var(--site-content-width-scale) * 1%);
}
.content.extra-narrow {
  width: calc(var(--content-width-extra-narrow-base) * var(--site-content-width-scale) * 1%);
}

/* =========================
   Titles & headings
   ========================= */

/* Content title */
.content-title {
  font-family: var(--font-family-guide);
  font-weight: var(--font-weight-bold);
  font-size: var(--content-title-font-size);
  line-height: normal;
  color: var(--color-guide);
}

/* Content title with leading icon */
.content-title.with-icon {
  position: relative;
  padding-inline-start: calc(var(--content-title-icon-size) + var(--heading-icon-gap-inline));
}
.content-title .content-title-icon {
  position: absolute;
  inset-inline-start: 0;
  top: calc((1lh - var(--content-title-icon-size)) / 2);
  width: var(--content-title-icon-size);
  height: var(--content-title-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

/* Subsection title */
.content-subtitle {
  font-family: var(--font-family-guide);
  font-size: var(--content-subtitle-font-size);
  font-weight: var(--font-weight-semi-bold);
  line-height: normal;
  color: var(--color-guide);
}

/* Subsection title with optional leading icon */
.content-subtitle.with-icon {
  position: relative;
  padding-inline-start: calc(var(--subtitle-icon-size) + var(--heading-icon-gap-inline));
}
.content-subtitle .subtitle-icon {
  position: absolute;
  inset-inline-start: 0;
  top: calc((1lh - var(--subtitle-icon-size)) / 2);
  width: var(--subtitle-icon-size);
  height: var(--subtitle-icon-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

/* Primary heading */
.content-heading-primary {
  font-family: var(--font-family-guide);
  font-weight: var(--font-weight-bold);
  font-size: var(--content-heading-primary-font-size);
  line-height: normal;
  color: var(--color-guide);
}

/* Secondary heading */
.content-heading-secondary {
  font-family: var(--font-family-guide);
  font-weight: var(--font-weight-semi-bold);
  font-size: var(--content-heading-secondary-font-size);
  line-height: normal;
  color: var(--color-guide);
}

/* =========================
   Dividers
   ========================= */

.divider-prominent {
  width: 100%;
  margin-block: calc(var(--content-gap) * 2);
  height: var(--divider-thickness-prominent);
  background: var(--color-highlight);
  border-radius: var(--divider-thickness-prominent);
}

.divider-moderate {
  width: 100%;
  height: var(--divider-thickness-moderate);
  margin-block: calc(var(--content-gap) * 2);
  background-image: var(--divider-gradient-moderate);
  border-radius: var(--divider-thickness-moderate);
  opacity: var(--divider-opacity-moderate);
}

.divider-subtle {
  width: 100%;
  height: var(--divider-thickness-subtle);
  margin-block: calc(var(--content-gap) * 1.5);
  background-image: var(--divider-gradient-subtle);
  opacity: var(--divider-opacity-subtle);
}

/* =========================
   Breadcrumbs
   ========================= */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--breadcrumbs-font-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-narrative);
}
.breadcrumbs .sep { opacity: 0.6; user-select: none; }

/* =========================
   Header
   ========================= */
.site-header { position: relative; z-index: 1; }
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: calc(var(--page-gap) * 0.5);
  width: calc(var(--header-footer-width-base) * var(--site-content-width-scale) * 1%);
  margin-inline: auto;
}

/* Left: title + optional subtitle tiles */
.site-title-link {
  display: inline-grid;
  grid-auto-rows: min-content;
  gap: 0px;
  text-decoration: none;
  color: inherit;
}
.game-title,
.site-title-text {
  font-family: var(--font-family-guide);
  font-weight: var(--font-weight-extra-bold);
  line-height: normal;
  background: var(--swapscotch-title-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.site-title-text { font-size: var(--site-title-font-size); }

.site-subtitle-tiles {
  display: inline-flex;
  align-items: flex-end;
  gap: var(--header-subtitle-gap);
  margin-left: var(--header-subtitle-offset-x);
}
.site-subtitle-tiles puzzle-tile.is-shifted {
  transform: translateY(var(--header-subtitle-shift-y));
}

/* Right: countdown or Play button (overlaid in one slot, right-aligned) */
.site-header-right {
  display: grid;
  align-items: center;
  justify-items: end;
}
.site-header-right > * {
  grid-area: 1 / 1;
}

/* Countdown wrapper (header link) — structure only; shared visuals via .countdown-unit */
.site-countdown-link {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  color: inherit;
}

/* ---------- Countdown unit (header) ---------- */
.site-header-right .countdown-unit{
  display: grid;
  place-items: center;
  row-gap: var(--header-countdown-label-row-gap);
}
.site-header-right .countdown-unit .countdown-label{
  font-family: var(--countdown-labels-font);
  font-weight: var(--countdown-labels-weight);
  font-size: var(--header-countdown-label-font-size);
  color: var(--color-narrative);
  text-align: center;
}

/* Countdown variant (header component theming) */
#header-countdown {
  color: var(--color-highlight);

  --digits-font: var(--countdown-digits-font);
  --digits-weight: var(--countdown-digits-weight);
  --digit-size: calc(var(--countdown-digit-size) * var(--site-typography-scale));
  --card-padding-x: calc(var(--countdown-card-padding-x) * var(--site-typography-scale));

  --labels-font: var(--countdown-labels-font);
  --labels-weight: var(--countdown-labels-weight);
  --label-size: calc(var(--countdown-label-size) * var(--site-typography-scale));

  --slot-gap: calc(var(--countdown-slot-gap) * var(--site-typography-scale));
  --unit-gap: calc(var(--countdown-unit-gap) * var(--site-typography-scale));
  --digit-gap: calc(var(--countdown-digit-gap) * var(--site-typography-scale));

  --corner-radius-proportion: var(--countdown-corner-radius-proportion);
  --edge-thickness-scale: var(--countdown-edge-thickness-scale);
  --seam-thickness-scale: var(--countdown-seam-thickness-scale);
}

/* =========================
   Footer
   ========================= */
.site-footer {
  padding-inline: 0;
  padding-bottom: var(--page-gap);
}
.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(var(--header-footer-width-base) * var(--site-content-width-scale) * 1%);
  margin-inline: auto;
}
.site-footer-links {
  display: inline-flex;
  align-items: center;
  gap: 0.75ch;
  font-family: var(--font-family-guide);
  font-size: var(--footer-link-font-size);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-guide);
  white-space: nowrap;
}
.site-footer-link {
  text-decoration: none;
  color: inherit;
}
.site-social-links {
  display: inline-flex;
  align-items: center;
  gap: var(--social-links-gap);
}
.site-social-link {
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  color: var(--color-highlight);
}
.site-social-icon {
  width: var(--social-icon-size);
  height: var(--social-icon-size);
  display: inline-block;
}

/* =========================
   Common controls
   ========================= */

/* Text input fields */
input,
textarea {
  background-color: hsl(220 12.5% 15%);
  color: var(--color-narrative);
  border: thin solid color-mix(in hsl, var(--color-guide) 50%, transparent);
  border-radius: var(--control-radius);
  padding-inline: var(--control-pad-x);
  padding-block: var(--control-pad-y);
  box-shadow: none;
}
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-guide);
}
textarea {
  min-height: 15lh;
  resize: vertical;
  line-height: var(--narrative-line-height);
}

/* Select */
select {
  appearance: none;
  width: fit-content;
  background-color: hsl(220 12.5% 15%);
  color: var(--color-guide);
  border: thin solid color-mix(in hsl, var(--color-guide) 50%, transparent);
  border-radius: var(--control-radius);
  box-shadow: none;
  font-size: var(--control-font-size);
  font-weight: var(--control-font-weight);

  padding-inline-start: var(--control-pad-x);
  padding-inline-end: calc(var(--control-pad-x) + 1em);
  padding-block: var(--control-pad-y);

  /* arrow geometry relative to control font size so it scales cleanly */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-guide) 50%),
    linear-gradient(135deg, var(--color-guide) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 1.125em) 50%,
    calc(100% - 0.75em) 50%,
    0 0;
  background-size: 0.375em 0.375em, 0.375em 0.375em, 100% 100%;
  background-repeat: no-repeat;
}
select:focus {
  outline: none;
  border-color: var(--color-guide);
}

/* Unified labels & help text */
label {
  font-family: var(--font-family-guide);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-guide);
}
.field > label {
  font-family: var(--font-family-guide);
  font-weight: var(--font-weight-semi-bold);
}
.help-text {
  color: hsl(220 12.5% 70%);
  font-size: var(--help-text-font-size);
}

/* ---------- Forms: layout primitives ---------- */
.field {
  display: grid;
  gap: var(--control-gap);
}
.form-row {
  display: flex;
  align-items: center;
  gap: var(--control-gap);
}
.form-row-narrow { max-width: 40rem; }
.checkbox-line {
  display: flex;
  align-items: center;
  gap: var(--control-gap);
}

/* Form block spacing container */
.form-blocks {
  display: grid;
  gap: var(--content-gap);
}

/* ---------- Details / disclosure ---------- */
.disclosure {
  border: thin solid hsl(220 12.5% 25%);
  border-radius: var(--control-radius);
  background-color: hsl(0 0% 100% / 0.02);
  padding: 0;
}
.disclosure[open] { background-color: hsl(0 0% 100% / 0.03); }
.disclosure > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--control-gap);
  padding-inline: var(--control-pad-x);
  padding-block: var(--control-pad-y);
  color: var(--color-guide);
  font-family: var(--font-family-guide);
  font-weight: var(--font-weight-semi-bold);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--color-guide);
}
.disclosure[open] > summary::after { content: '▴'; }

/* ---------- Forms: validation & messaging ---------- */
.form-error {
  color: red;
}
.invalid {
  outline: none;
  box-shadow: none;
  border-color: red;
}
.form-error-panel {
  border: thin solid red;
  padding: 0.75rem 1rem;
  border-radius: var(--control-radius);
  font-size: 0.95em;
  margin-bottom: var(--content-gap);
}
.inline-form {
  display: inline-block;
}

/* ---------- Pushbuttons ---------- */
push-button {
  font-family: var(--control-font-family);
  --push-button-font-size: var(--control-font-size);
}

/* Site-only Play Swapscotch button metric hook */
.site-play-new-game-button {
  --push-button-font-size: var(--site-play-new-game-button-font-size);
}

/* Play new game button colors (shared between site & puzzle) */
.play-new-game-button {
  --push-button-label-color: var(--play-new-game-button-label-color);
  --push-button-top-color: var(--play-new-game-button-top-color);
  --push-button-middle-color: var(--play-new-game-button-middle-color);
  --push-button-bottom-color: var(--play-new-game-button-bottom-color);
}

/* =========================
   Tables
   ========================= */
table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  background-color: hsl(220 12.5% 15%);
  border: thin solid hsl(220 12.5% 25%);
  border-radius: var(--control-radius);
  overflow: hidden;
  box-shadow: var(--drop-shadow-subtle);
}

/* prevent auto hyphenation / mid-word hyphens in all table content */
table, table * { hyphens: none; }

table thead th {
  background-color: hsl(0 0% 100% / 0.03);
  color: var(--color-guide);
  text-align: left;
  font-family: var(--font-family-guide);
  font-weight: var(--font-weight-semi-bold);
  padding-inline: var(--table-cell-padding-x);
  padding-block: var(--table-cell-padding-y);
  border-bottom: thin solid hsl(220 12.5% 25%);
  white-space: nowrap;
}

table td {
  padding-inline: var(--table-cell-padding-x);
  padding-block: var(--table-cell-padding-y);
  border-top: thin solid hsl(220 12.5% 25%);
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Let links wrap naturally at spaces, but also break long URLs if needed */
table td a {
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

/* narrow action clusters: keep on one line & shrink */
.actions-cell { white-space: nowrap; width: 1%; }

/* ---------- Global table row accent utility ---------- */
tr.highlighted > td {
  background: var(--highlighted-row-band);
}
tr.highlighted {
  outline: var(--highlighted-row-ring-thickness) solid var(--highlighted-row-ring-color);
  outline-offset: calc(-1 * var(--highlighted-row-ring-thickness));
}

/* =========================
   Anchored popout
   ========================= */
anchored-popout{
  font-family: var(--font-family-guide);
  font-weight: var(--font-weight-medium);
  line-height: var(--narrative-line-height);
  --background: var(--color-modal-background);
  --text: var(--color-guide);
  --border-color: var(--color-guide);
  z-index: 3;
}

/* =========================
   Drop sign
   ========================= */
drop-sign{
  font-family: var(--font-family-guide);
  font-weight: var(--font-weight-medium);
  line-height: var(--narrative-line-height);
  --sign-background: var(--color-modal-background);
  --sign-text: var(--color-guide);
  --sign-frame: var(--color-guide);
  --rope-color: var(--color-highlight);
  z-index: 4;
}

/* =========================
   Utilities
   ========================= */
.hidden { display: none !important; }
.nowrap { white-space: nowrap !important; }

/* ---------- Shared callout panel utility ---------- */
.callout-panel{
  padding: var(--callout-panel-padding);
  border: thin solid var(--callout-panel-border-color);
  border-radius: var(--callout-panel-radius);
  background: var(--callout-panel-background);
}

/* ---------- Body scroll lock (used by embed modals like Ko-fi) ---------- */
body.is-scroll-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  top: var(--scroll-lock-top, 0px);
}

/* =========================
   Glyphy base layout
   ========================= */

/* flow-root = contains floats + keeps child margins (no collapsing) */
glyphy-renderer {
  display: flow-root;
  --puzzle-tile-scale: var(--site-typography-scale);
}

/* keep the “even vertical space between glyphy blocks” behavior,
   but do NOT apply it to dividers or to the element that follows a divider */
glyphy-renderer > :where(:not(.divider-moderate):not(.divider-subtle):not(.divider-prominent))
  + :where(:not(.divider-moderate):not(.divider-subtle):not(.divider-prominent)) {
  margin-block-start: 1lh;
}

/* dividers inside glyphy must break past floated images */
glyphy-renderer > .divider-moderate,
glyphy-renderer > .divider-subtle,
glyphy-renderer > .divider-prominent {
  clear: both;
}

/* =========================
   Glyphy images
   ========================= */

/* outer container — no frame, no padding */
glyphy-renderer .image {
  display: inline-block;
  max-width: 100%;
  margin-block: var(--content-gap);
}

/* media body gets the frame (default = framed) */
glyphy-renderer .image:not(.unframed) .image-body {
  border: thin solid var(--image-frame-color);
  border-radius: var(--image-corner-radius);
  background: var(--image-background-gradient);
  overflow: hidden;
}

/* unframed → no border/gradient/radius on media box */
glyphy-renderer .image.unframed .image-body {
  border: none;
  background: none;
  border-radius: 0;
}

/* media body structure */
glyphy-renderer .image .image-body {
  position: relative;
  display: block;
}

/* links around the image should be block so widths apply cleanly */
glyphy-renderer .image .image-body > a {
  display: block;
}

/* actual image: no stretch, no repeat */
glyphy-renderer .image .image-body > img,
glyphy-renderer .image .image-body > a > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ---------- sizing ---------- */

/* small image */
glyphy-renderer .image.small {
  display: block;
  width: calc(1/3 * 100%);
  max-width: 100%;
}

/* medium image */
glyphy-renderer .image.medium {
  display: block;
  width: 50%;
  max-width: 100%;
}

/* large image */
glyphy-renderer .image.large {
  display: block;
  width: 75%;
  max-width: 100%;
}

/* full width image (keeps intrinsic ratio) */
glyphy-renderer .image.full {
  display: block;
  width: 100%;
  max-width: 100%;
}

/* full-width = 100% + forced 16:9 box */
glyphy-renderer .image.full-width {
  display: block;
  width: 100%;
  max-width: 100%;
}
glyphy-renderer .image.full-width .image-body {
  aspect-ratio: 16/9;
}
glyphy-renderer .image.full-width .image-body > img,
glyphy-renderer .image.full-width .image-body > a > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* unspecified size → intrinsic */
glyphy-renderer .image:not(.large):not(.medium):not(.small):not(.full-width) {
  width: auto;
}

/* ---------- positioning ---------- */

glyphy-renderer .image,
glyphy-renderer .image.centered {
  display: block;
  margin-inline: auto;
}

glyphy-renderer .image.aligned-left {
  display: block;
  margin-left: 0;
  margin-right: auto;
}

glyphy-renderer .image.aligned-right {
  display: block;
  margin-left: auto;
  margin-right: 0;
}

glyphy-renderer .image.floated-left {
  float: left;
  margin-right: var(--content-gap);
  margin-bottom: var(--content-gap);
}

glyphy-renderer .image.floated-right {
  float: right;
  margin-left: var(--content-gap);
  margin-bottom: var(--content-gap);
}

/* ---------- caption ---------- */
glyphy-renderer .image .caption {
  margin-top: 0.25lh;
  text-align: center;
  font-family: var(--font-family-guide);
  font-weight: var(--font-weight-semi-bold);
  color: var(--color-guide);
}

/* =========================
   Glyphy external embeds
   ========================= */

glyphy-renderer > codepen-pen-embed,
glyphy-renderer > github-gist-embed,
glyphy-renderer > youtube-video-embed {
  display: block;
  width: 100%;
}

glyphy-renderer > instagram-post-embed,
glyphy-renderer > twitter-tweet-embed {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* =========================
   Glyphy puzzle tiles
   ========================= */
/* Treat embedded <puzzle-tile> as blocks; base scale follows site typography. */
glyphy-renderer puzzle-tile {
  display: block;
}

/* Size presets (Glyphy-only) */
glyphy-renderer puzzle-tile[size="mini"] {
  --puzzle-tile-scale: calc(
    var(--site-typography-scale) * var(--glyphy-puzzle-tile-scale-mini)
  );
}
glyphy-renderer puzzle-tile[size="small"] {
  --puzzle-tile-scale: calc(
    var(--site-typography-scale) * var(--glyphy-puzzle-tile-scale-small)
  );
}
glyphy-renderer puzzle-tile[size="normal"],
glyphy-renderer puzzle-tile[size=""] {
  --puzzle-tile-scale: calc(
    var(--site-typography-scale) * var(--glyphy-puzzle-tile-scale-normal)
  );
}
glyphy-renderer puzzle-tile[size="large"] {
  --puzzle-tile-scale: calc(
    var(--site-typography-scale) * var(--glyphy-puzzle-tile-scale-large)
  );
}

/* =========================
   Glyphy puzzle tile groups
   ========================= */
/* Base: group-managed spacing follows site typography. */
glyphy-renderer puzzle-tile-group {
  display: block;
  width: fit-content;
  margin-inline: auto;
  --puzzle-tile-scale: var(--site-typography-scale);
}

/* Group size presets (scale tiles + gaps together) */
glyphy-renderer puzzle-tile-group[size="mini"] {
  --puzzle-tile-scale: calc(
    var(--site-typography-scale) * var(--glyphy-puzzle-tile-scale-mini)
  );
}
glyphy-renderer puzzle-tile-group[size="small"] {
  --puzzle-tile-scale: calc(
    var(--site-typography-scale) * var(--glyphy-puzzle-tile-scale-small)
  );
}
glyphy-renderer puzzle-tile-group[size="normal"],
glyphy-renderer puzzle-tile-group[size=""] {
  --puzzle-tile-scale: calc(
    var(--site-typography-scale) * var(--glyphy-puzzle-tile-scale-normal)
  );
}
glyphy-renderer puzzle-tile-group[size="large"] {
  --puzzle-tile-scale: calc(
    var(--site-typography-scale) * var(--glyphy-puzzle-tile-scale-large)
  );
}

/* =========================
   Glyphy Swapscotch puzzle embed
   ========================= */
glyphy-renderer swapscotch-puzzle-embed {
  clear: both;
}

/* =========================
   Ko-fi button
   ========================= */
.kofi-button {
  display: block;
  width: fit-content;
  margin-inline: auto;
  --push-button-color: hsl(32 70% 95%);
}

/* =========================
   Ko-fi dialog skin
   ========================= */
dialog.embed-modal.kofi-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: min(420px, 90vw);
  height: min(720px, 80vh);
  padding: 8px;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  background: #fff;
}
@supports (height: 100dvh) {
  dialog.embed-modal.kofi-dialog {
    height: min(720px, 80dvh);
  }
}
dialog.embed-modal.kofi-dialog::backdrop {
  background: rgba(0,0,0,.5);
}

/* =========================
   Breakpoints: small vs large
   ========================= */

/* Large viewports: section-level veils on, group-level veils off */
@media (min-width: 720px) {
  /* Header/footer group containers: veil off */
  .site-header-inner.backdrop-veil,
  .site-footer-inner.backdrop-veil {
    --backdrop-veil-visibility: hidden;
  }

  /* Individual header/footer sections: veil on */
  .site-header-left.backdrop-veil,
  .site-header-right.backdrop-veil,
  .site-footer-links.backdrop-veil,
  .site-social-links.backdrop-veil {
    --backdrop-veil-visibility: visible;
  }
}

/* Small viewports: group-level veils on, section-level veils off, stacked layout */
@media not (min-width: 720px) {
  /* Header/footer group containers: veil on */
  .site-header-inner.backdrop-veil,
  .site-footer-inner.backdrop-veil {
    --backdrop-veil-visibility: visible;
  }

  /* Individual header/footer sections: veil off */
  .site-header-left.backdrop-veil,
  .site-header-right.backdrop-veil,
  .site-footer-links.backdrop-veil,
  .site-social-links.backdrop-veil {
    --backdrop-veil-visibility: hidden;
  }

  /* Header layout: stacked and centered */
  .site-header-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--content-gap);
  }

  .site-header-left {
    text-align: center;
  }

  .site-header-right {
    justify-items: center;
  }

  /* Footer layout: stacked and centered */
  .site-footer-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--content-gap);
  }

  /* Explicit ordering: current order = links above, social below */
  .site-footer-links {
    order: 1;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
  }

  .site-social-links {
    order: 2;
  }
}