/* ============================================================
   Hexfolk landing (served at /). Standalone: no framework, no
   inline styles or scripts (the Worker's CSP is `style-src 'self';
   script-src 'self'`).

   Look: a bright, chunky "sticker" style. Saturated colour bands,
   thick ink outlines, hard drop shadows, the game's own art big.
   Everything visual goes through the tokens below; light and dark
   are both defined here (prefers-color-scheme, or the game's own
   saved choice via boot.js → html[data-theme]).
   ============================================================ */

@font-face {
  font-family: 'Hexfolk Lilita';
  src: url('/landing-assets/fonts/lilita-one-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hexfolk Nunito';
  src: url('/landing-assets/fonts/nunito-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hexfolk Nunito';
  src: url('/landing-assets/fonts/nunito-latin-800-normal.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Hexfolk Nunito';
  src: url('/landing-assets/fonts/nunito-latin-900-normal.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ── tokens: light (default) ──
   Contrast (WCAG, measured): ink #1b1440 on sky-2 #3aa0ff 6.3, on sun 11.9, on berry 6.1, on mint 9.0;
   white on grape 5.9, on final 7.4; card muted #4a4270 on white 9.1. */
:root {
  color-scheme: light;

  /* ink = outlines, hard shadows, text on light surfaces */
  --hx-ink: #1b1440;
  --hx-outline: #1b1440;
  --hx-white: #ffffff;

  /* stickers / cards */
  --hx-card: #ffffff;
  --hx-card-text: #1b1440;
  --hx-card-muted: #4a4270;
  --hx-card-sunk: #f1edff;

  /* bands: background pair + text colour */
  --hx-sky-1: #5cc2ff;
  --hx-sky-2: #3aa0ff;
  --hx-on-sky: #1b1440;
  --hx-sun-1: #ffd23f;
  --hx-sun-2: #ffc21a;
  --hx-on-sun: #1b1440;
  --hx-grape-1: #6a3df0;
  --hx-grape-2: #5b2fd6;
  --hx-on-grape: #ffffff;
  --hx-berry-1: #ff6fab;
  --hx-berry-2: #ff5fa2;
  --hx-on-berry: #1b1440;
  --hx-mint-1: #3ddc9a;
  --hx-mint-2: #2fd48f;
  --hx-on-mint: #1b1440;
  --hx-final-1: #5b2fd6;
  --hx-final-2: #3b1fa8;
  --hx-on-final: #ffffff;
  --hx-foot: #1b1440;
  --hx-on-foot: #ffffff;

  /* accents */
  --hx-yellow: #ffd23f;
  --hx-yellow-hover: #ffe070;
  --hx-on-yellow: #1b1440;
  --hx-pink: #ff5fa2;
  --hx-teal: #2fd4c8;
  --hx-accept: #2fd48f;
  /* drawn-in-CSS app UI inside the coloured feature panels: same in both schemes (panels stay bright) */
  --hx-mock-bg: #ffffff;
  --hx-mock-ink: #1b1440;
  --hx-mock-mention: #b3246b;
  /* the app's AI-seat marker (BOT-1: --c-bot = --c-info, glyph --c-on-bot = --c-bg), Artisan light
     values: the landing draws it on light mock surfaces in both schemes. #1f5f9e on white 6.9:1. */
  --hx-bot: #1f5f9e;
  --hx-on-bot: #f3e9d6;
  --hx-bot-soft: #e3ecf5;
  --hx-bot-ring: #ffffff;
  --hx-storm-1: #3b4f9e;
  --hx-storm-2: #2a3a7d;
  --hx-rays: rgb(255 255 255 / 0.14);
  --hx-dots: rgb(255 255 255 / 0.16);
  --hx-glow: rgb(255 255 255 / 0.55);

  /* focus: flips per band (see .hx-band--grape / --final) */
  --hx-focus: #1b1440;

  /* player colours: decorative rings only, never text (palette v2, same as the app's --pc-* tokens) */
  --hx-pc-red: #d6380e;
  --hx-pc-orange: #ff9a4c;
  --hx-pc-yellow: #f8e026;
  --hx-pc-green: #1a8d53;
  --hx-pc-teal: #19bbc9;
  --hx-pc-blue: #157cfc;
  --hx-pc-purple: #7026be;
  --hx-pc-pink: #de488d;

  /* type */
  --hx-font-display: 'Hexfolk Lilita', 'Hexfolk Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --hx-font-body: 'Hexfolk Nunito', ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hx-font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --hx-text-sm: 0.9375rem;
  --hx-text-md: 1.0625rem;
  --hx-text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --hx-text-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --hx-text-h2: clamp(2.25rem, 1.6rem + 2.9vw, 4rem);
  --hx-text-h1: clamp(2.5rem, 1.6rem + 4vw, 4.375rem);
  --hx-stroke: 0.075em;

  /* space */
  --hx-gutter: clamp(16px, 4vw, 32px);
  --hx-section: clamp(4rem, 3rem + 4vw, 7rem);
  --hx-max: 1180px;
  --hx-scallop: 22px;

  /* pixel faces: the sprites are 48 px native (shipped 4x, 192 px, lossless). They are only ever
     drawn at whole multiples (48 or 96 CSS px of picture, plus the ring border), never rotated or
     scaled, so every sprite pixel lands on whole device pixels at DPR 1, 2 and 3. */
  --hx-face-1x: 48px;
  --hx-face-2x: 96px;

  /* shape */
  --hx-border: 3px;
  --hx-border-lg: 4px;
  --hx-radius-sm: 12px;
  --hx-radius-md: 18px;
  --hx-radius-lg: 26px;
  --hx-radius-pill: 999px;
  --hx-hex: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

  /* elevation: hard, cartoon drop shadows */
  --hx-lift-1: 0 3px 0 var(--hx-outline);
  --hx-lift-2: 0 6px 0 var(--hx-outline);
  --hx-lift-3: 0 9px 0 var(--hx-outline);
  --hx-art-shadow: drop-shadow(0 6px 0 rgb(27 20 64 / 0.35));

  /* motion (collapsed under reduced motion, below) */
  --hx-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --hx-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --hx-dur-micro: 150ms;
  --hx-dur-bob: 3.6s;
  --hx-dur-ticker: 70s;
}

/* ── tokens: dark ── same bands, deeper and quieter; cards go night-blue */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --hx-outline: #0a0822;
    --hx-card: #1c1747;
    --hx-card-text: #ffffff;
    --hx-card-muted: #cfc8f5;
    --hx-card-sunk: #2a2360;
    --hx-sky-1: #2352c9;
    --hx-sky-2: #1d49b8;
    --hx-on-sky: #ffffff;
    --hx-sun-1: #c2410c;
    --hx-sun-2: #b34700;
    --hx-on-sun: #ffffff;
    --hx-grape-1: #4a2bc4;
    --hx-grape-2: #3b1fa8;
    --hx-on-grape: #ffffff;
    --hx-berry-1: #b01b67;
    --hx-berry-2: #a3155e;
    --hx-on-berry: #ffffff;
    --hx-mint-1: #0d7f58;
    --hx-mint-2: #0a6b4a;
    --hx-on-mint: #ffffff;
    --hx-final-1: #2c1882;
    --hx-final-2: #1c1060;
    --hx-foot: #0a0822;
    --hx-storm-1: #26356f;
    --hx-storm-2: #1a2555;
    --hx-rays: rgb(255 255 255 / 0.06);
    --hx-dots: rgb(255 255 255 / 0.07);
    --hx-glow: rgb(140 190 255 / 0.3);
    --hx-focus: #ffffff;
    --hx-art-shadow: drop-shadow(0 6px 0 rgb(0 0 0 / 0.45));
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --hx-outline: #0a0822;
  --hx-card: #1c1747;
  --hx-card-text: #ffffff;
  --hx-card-muted: #cfc8f5;
  --hx-card-sunk: #2a2360;
  --hx-sky-1: #2352c9;
  --hx-sky-2: #1d49b8;
  --hx-on-sky: #ffffff;
  --hx-sun-1: #c2410c;
  --hx-sun-2: #b34700;
  --hx-on-sun: #ffffff;
  --hx-grape-1: #4a2bc4;
  --hx-grape-2: #3b1fa8;
  --hx-on-grape: #ffffff;
  --hx-berry-1: #b01b67;
  --hx-berry-2: #a3155e;
  --hx-on-berry: #ffffff;
  --hx-mint-1: #0d7f58;
  --hx-mint-2: #0a6b4a;
  --hx-on-mint: #ffffff;
  --hx-final-1: #2c1882;
  --hx-final-2: #1c1060;
  --hx-foot: #0a0822;
  --hx-storm-1: #26356f;
  --hx-storm-2: #1a2555;
  --hx-rays: rgb(255 255 255 / 0.06);
  --hx-dots: rgb(255 255 255 / 0.07);
  --hx-glow: rgb(140 190 255 / 0.3);
  --hx-focus: #ffffff;
  --hx-art-shadow: drop-shadow(0 6px 0 rgb(0 0 0 / 0.45));
}

/* ── reduced motion: every loop stops, every transition is instant ── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hx-dur-micro: 0ms;
  }
}

/* ============================================================
   Base
   ============================================================ */

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

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--hx-sky-1);
  color: var(--hx-card-text);
  font-family: var(--hx-font-body);
  font-weight: 700;
  font-size: var(--hx-text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--hx-font-display);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

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

.hx-skip {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -4rem;
  z-index: 100;
  padding: 0.625rem 1rem;
  border: var(--hx-border) solid var(--hx-outline);
  border-radius: var(--hx-radius-sm);
  background: var(--hx-yellow);
  color: var(--hx-on-yellow);
  font-weight: 900;
  text-decoration: none;
}

.hx-skip:focus-visible {
  inset-block-start: 1rem;
}

.hx-wrap {
  inline-size: 100%;
  max-inline-size: var(--hx-max);
  margin-inline: auto;
  padding-inline: max(var(--hx-gutter), env(safe-area-inset-left)) max(var(--hx-gutter), env(safe-area-inset-right));
}

/* Big display type: white fill, ink outline painted under the fill, hard drop shadow. */
.hx-display {
  color: var(--hx-white);
  -webkit-text-stroke: var(--hx-stroke) var(--hx-outline);
  paint-order: stroke fill;
  text-shadow: 0 0.09em 0 var(--hx-outline);
}

/* Small sticker label above headings */
.hx-tag {
  display: inline-block;
  padding: 0.3rem 0.85rem 0.25rem;
  border: var(--hx-border) solid var(--hx-outline);
  border-radius: var(--hx-radius-pill);
  background: var(--hx-yellow);
  color: var(--hx-on-yellow);
  box-shadow: var(--hx-lift-1);
  font-family: var(--hx-font-display);
  font-size: 0.9375rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  rotate: -2deg;
}

/* ============================================================
   Buttons (chunky, pressable)
   ============================================================ */

.hx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem 1rem;
  align-items: center;
}

.hx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 3.5rem;
  padding: 0.75rem 1.5rem 0.8rem;
  border: var(--hx-border-lg) solid var(--hx-outline);
  border-radius: var(--hx-radius-md);
  background: var(--hx-card);
  color: var(--hx-card-text);
  box-shadow: var(--hx-lift-2);
  font-family: var(--hx-font-display);
  font-size: 1.3125rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition:
    translate var(--hx-dur-micro) var(--hx-ease-standard),
    box-shadow var(--hx-dur-micro) var(--hx-ease-standard),
    background-color var(--hx-dur-micro) var(--hx-ease-standard);
}

.hx-btn svg {
  inline-size: 1.05em;
  flex: none;
}

.hx-btn:hover {
  translate: 0 -2px;
  box-shadow: var(--hx-lift-3);
}

.hx-btn:active {
  translate: 0 4px;
  box-shadow: 0 2px 0 var(--hx-outline);
}

.hx-btn--primary {
  background: var(--hx-yellow);
  color: var(--hx-on-yellow);
  /* inner top highlight: a little shine, like a game button */
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.45) 0 38%, transparent 38%);
}

.hx-btn--primary:hover {
  background-color: var(--hx-yellow-hover);
}

.hx-btn--small {
  min-block-size: 2.75rem;
  padding: 0.45rem 1rem 0.5rem;
  font-size: 1.125rem;
  border-width: var(--hx-border);
  box-shadow: var(--hx-lift-1);
  background: var(--hx-yellow);
  color: var(--hx-on-yellow);
}

.hx-btn--small:hover {
  box-shadow: 0 5px 0 var(--hx-outline);
}

@media (max-width: 29.99rem) {
  .hx-hero .hx-actions .hx-btn,
  .hx-band--final .hx-actions .hx-btn {
    flex: 1 1 100%;
  }
}

/* ============================================================
   Header
   ============================================================ */

.hx-bar {
  position: relative;
  z-index: 5;
  padding-block: max(0.75rem, env(safe-area-inset-top)) 0.25rem;
  background: var(--hx-sky-1);
}

.hx-bar .hx-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hx-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--hx-white);
  font-family: var(--hx-font-display);
  font-size: 1.75rem;
  line-height: 1;
  text-decoration: none;
  -webkit-text-stroke: 0.08em var(--hx-outline);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--hx-outline);
}

.hx-brand img {
  inline-size: 2.75rem;
  border: var(--hx-border) solid var(--hx-outline);
  border-radius: 14px;
  box-shadow: var(--hx-lift-1);
  rotate: -4deg;
}

/* ============================================================
   Hero
   ============================================================ */

.hx-hero {
  --rays-x: 50%;
  --rays-y: 72%;
  position: relative;
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem) 0;
  color: var(--hx-on-sky);
  background:
    radial-gradient(circle at var(--rays-x) var(--rays-y), var(--hx-glow), transparent 38%),
    repeating-conic-gradient(from 0deg at var(--rays-x) var(--rays-y), var(--hx-rays) 0deg 7deg, transparent 7deg 16deg),
    linear-gradient(180deg, var(--hx-sky-1), var(--hx-sky-2));
  overflow: clip;
}

.hx-hero-grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  align-items: center;
}

.hx-hero-copy {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

.hx-hero h1 {
  font-size: var(--hx-text-h1);
  line-height: 0.98;
  text-wrap: wrap;
}

.hx-pop {
  display: inline-block;
  color: var(--hx-yellow);
  rotate: -2deg;
}

.hx-lede {
  max-inline-size: 34rem;
  font-size: var(--hx-text-lg);
  font-weight: 800;
  line-height: 1.5;
}

.hx-fine {
  font-size: var(--hx-text-sm);
  font-weight: 800;
}

/* The stage: a size container so the island, goodies, figures and speech bubbles scale together. */
.hx-stage {
  position: relative;
  container-type: inline-size;
  inline-size: 100%;
  max-inline-size: 560px;
  justify-self: center;
  aspect-ratio: 1 / 1.02;
}

.hx-island {
  position: absolute;
  inset-inline: 10cqi;
  inset-block-start: 4cqi;
  aspect-ratio: 1;
  border: 1.2cqi solid var(--hx-outline);
  border-radius: 50%;
  overflow: hidden;
  background: #7fd0ff;
  box-shadow:
    inset 0 0 0 1.6cqi rgb(255 255 255 / 0.85),
    0 2cqi 0 var(--hx-outline);
}

.hx-island img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  scale: 1.08;
}

.hx-goodie {
  position: absolute;
  filter: var(--hx-art-shadow);
  animation: hx-bob var(--hx-dur-bob) ease-in-out infinite;
}

.hx-goodie--a {
  inline-size: 23cqi;
  inset-inline-start: -1cqi;
  inset-block-start: 6cqi;
  rotate: -10deg;
}

.hx-goodie--b {
  inline-size: 19cqi;
  inset-inline-end: 0;
  inset-block-start: 0;
  rotate: 12deg;
  animation-delay: -1.2s;
}

.hx-goodie--c {
  inline-size: 17cqi;
  inset-inline-end: -2cqi;
  inset-block-start: 38cqi;
  rotate: -8deg;
  animation-delay: -2.4s;
}

/* Three figures standing on the island's rim. Each bubble is a child of its figure,
   laid out in normal flow above the head: it can't drift away from its speaker. */
.hx-cast {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
}

.hx-char {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4cqi; /* room for the bubble's tail */
  animation: hx-bob var(--hx-dur-bob) ease-in-out infinite;
}

.hx-char img {
  inline-size: 34cqi;
  max-inline-size: none;
  filter: var(--hx-art-shadow);
}

.hx-char--a {
  margin-inline-end: -4cqi;
}

.hx-char--b {
  margin-block-end: 8cqi;
  animation-delay: -1.1s;
}

.hx-char--b img {
  inline-size: 36cqi;
}

.hx-char--c {
  margin-inline-start: -4cqi;
  animation-delay: -2.2s;
}

.hx-bubble {
  position: relative;
  z-index: 1;
  padding: 0.35em 0.75em 0.4em;
  border: max(2px, 0.6cqi) solid var(--hx-outline);
  border-radius: 1em;
  background: #ffffff;
  color: #1b1440;
  font-family: var(--hx-font-display);
  font-size: clamp(0.875rem, 4.3cqi, 1.5rem);
  line-height: 1.1;
  white-space: nowrap;
  filter: drop-shadow(0 max(3px, 0.8cqi) 0 var(--hx-outline));
}

/* tail: a rotated square whose top half hides under the bubble, pointing down at the speaker */
.hx-bubble::after {
  content: '';
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 100%;
  inline-size: 0.8em;
  block-size: 0.8em;
  margin-block-start: calc(-0.4em - max(1px, 0.3cqi));
  background: inherit;
  border-inline-end: inherit;
  border-block-end: inherit;
  border-end-end-radius: 0.2em;
  transform: translateX(-50%) rotate(45deg);
}

@media (min-width: 60rem) {
  .hx-hero {
    --rays-x: 74%;
    --rays-y: 50%;
  }

  .hx-hero-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .hx-stage {
    max-inline-size: 600px;
  }
}

@keyframes hx-bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -2.5%;
  }
}

/* ============================================================
   Ticker strip
   ============================================================ */

/* The strip is its own layer, sitting across the seam between the hero and the next band.
   The wrapper is zero-height and clips sideways only (overflow-x: clip keeps overflow-y visible),
   so the strip can be wider than the screen without a sideways scroll, and its top and bottom
   outlines are never cut by either section. The hero's padding runs its blue down under the
   strip, the next band's purple starts under the strip's middle: the seam is always covered. */
.hx-ticker-wrap {
  position: relative;
  z-index: 3;
  block-size: 0;
  overflow-x: clip;
  overflow-y: visible;
}

.hx-ticker {
  --ticker-tilt: -1.5deg;
  position: absolute;
  inset-inline: -5%;
  inset-block-start: 0;
  padding-block: 0.6rem;
  border-block: var(--hx-border-lg) solid var(--hx-outline);
  background: var(--hx-yellow);
  color: var(--hx-on-yellow);
  box-shadow: var(--hx-lift-2);
  overflow: clip;
  transform: translateY(-50%) rotate(var(--ticker-tilt));
}

/* Wide screens: cap the strip's total rise at about 2.5rem instead of letting a fixed angle turn it
   into a tall wedge (1.5deg across 3440px is a 90px drop). Phones keep the full 1.5deg. */
@supports (rotate: atan2(1px, 1px)) {
  .hx-ticker {
    --ticker-tilt: max(-1.5deg, atan2(-2.5rem, 100vw));
  }
}

/* room above and below the seam for the strip (half its height plus the tilt at the ends) */
.hx-hero {
  padding-block-end: 4rem;
}

.hx-ticker-wrap + .hx-band {
  padding-block-start: calc(var(--hx-section) + 2.5rem);
}

/* no scallops under the strip: they would peek out past its ends */
.hx-ticker-wrap + .hx-band::before {
  display: none;
}

/* Two identical groups, each at least as wide as the strip, slide left by exactly one group:
   the loop is seamless and the strip is always full, at any screen width. */
.hx-ticker-track {
  display: flex;
  inline-size: max-content;
  animation: hx-ticker var(--hx-dur-ticker) linear infinite;
}

.hx-ticker-group {
  display: flex;
  flex: none;
  justify-content: space-around;
  min-inline-size: calc(110vw + 2rem);
}

.hx-ticker-group > span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-inline: 1.25rem;
  font-family: var(--hx-font-display);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
  white-space: nowrap;
}

.hx-ticker-group > span > img {
  inline-size: 2.5rem;
  filter: drop-shadow(0 2px 0 rgb(27 20 64 / 0.4));
}

/* the strip is tilted: turn the face back upright so the sprite isn't resampled */
.hx-ticker .hx-av {
  rotate: calc(-1 * var(--ticker-tilt));
}

@keyframes hx-ticker {
  to {
    translate: -50% 0;
  }
}

/* ============================================================
   Bands (full-width colour sections with a scalloped top edge)
   ============================================================ */

.hx-band {
  --band-1: var(--hx-sky-1);
  --band-2: var(--hx-sky-2);
  --band-text: var(--hx-on-sky);
  position: relative;
  padding-block: var(--hx-section);
  color: var(--band-text);
  background:
    radial-gradient(var(--hx-dots) 1.6px, transparent 2px) 0 0 / 22px 22px,
    linear-gradient(180deg, var(--band-1), var(--band-2));
}

.hx-band::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 100%;
  block-size: var(--hx-scallop);
  background: radial-gradient(circle at 50% 100%, var(--band-1) calc(var(--hx-scallop) - 0.5px), transparent var(--hx-scallop)) 0 0 / calc(var(--hx-scallop) * 2) var(--hx-scallop) repeat-x;
}

.hx-band--grape {
  --band-1: var(--hx-grape-1);
  --band-2: var(--hx-grape-2);
  --band-text: var(--hx-on-grape);
  --hx-focus: #ffffff;
}

.hx-band--sun {
  --band-1: var(--hx-sun-1);
  --band-2: var(--hx-sun-2);
  --band-text: var(--hx-on-sun);
}

.hx-band--berry {
  --band-1: var(--hx-berry-1);
  --band-2: var(--hx-berry-2);
  --band-text: var(--hx-on-berry);
}

.hx-band--mint {
  --band-1: var(--hx-mint-1);
  --band-2: var(--hx-mint-2);
  --band-text: var(--hx-on-mint);
}

.hx-band--sky {
  --band-1: var(--hx-sky-1);
  --band-2: var(--hx-sky-2);
  --band-text: var(--hx-on-sky);
}

.hx-band--final {
  --band-1: var(--hx-final-1);
  --band-2: var(--hx-final-2);
  --band-text: var(--hx-on-final);
  --hx-focus: #ffffff;
}

.hx-head {
  display: grid;
  align-content: start;
  gap: 1rem;
  justify-items: start;
  max-inline-size: 46rem;
  margin-block-end: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.hx-head h2 {
  font-size: var(--hx-text-h2);
}

/* A big piece of game art beside each section heading, where there's room for it. */
.hx-head-deco {
  display: none;
}

/* Wide screens: the header runs the full row and its art is bottom-anchored at the end, straddling
   the header/cards boundary on top of the first row (pointer-events off, so it never blocks a tap).
   It dips ~3rem into the row: the card's top padding and its panel's upper band, never text
   (audited: no overlap with any heading, card title, card text or mock at 1024–2560).
   The heading text keeps its 46rem measure, which leaves the end of the row free for the art. */
@media (min-width: 64rem) {
  .hx-head {
    --head-art: clamp(14rem, 16vw, 18rem);
    position: relative;
    max-inline-size: none;
    margin-block-end: 1.75rem;
  }

  /* heading text never runs under the art */
  .hx-head > :not(.hx-head-deco) {
    max-inline-size: min(46rem, 100% - var(--head-art) - 1.5rem);
  }

  .hx-head-deco {
    display: block;
    position: absolute;
    z-index: 2;
    inset-inline-end: 0.5rem;
    inset-block-end: -3rem;
    inline-size: var(--head-art);
    rotate: 8deg;
    pointer-events: none;
    /* sticker: white cut-out edge, then the hard cartoon shadow */
    filter:
      drop-shadow(3px 0 0 #ffffff) drop-shadow(-3px 0 0 #ffffff)
      drop-shadow(0 3px 0 #ffffff) drop-shadow(0 -3px 0 #ffffff)
      var(--hx-art-shadow);
    animation: hx-bob var(--hx-dur-bob) ease-in-out infinite;
  }

  /* the feature grids keep their own top room for art popping out of the first cards */
  .hx-head + .hx-feats {
    padding-block-start: 1.25rem;
  }
}

.hx-head > p:not(.hx-tag) {
  font-size: var(--hx-text-lg);
  font-weight: 800;
  max-inline-size: 38rem;
}

/* A sticker card: the base for every white panel on the page. */
.hx-day,
.hx-feat,
.hx-look,
.hx-faces,
.hx-origin {
  border: var(--hx-border-lg) solid var(--hx-outline);
  border-radius: var(--hx-radius-lg);
  background: var(--hx-card);
  color: var(--hx-card-text);
  box-shadow: var(--hx-lift-2);
}

.hx-day h3,
.hx-feat h3 {
  font-size: var(--hx-text-h3);
}

.hx-day p,
.hx-feat > p {
  color: var(--hx-card-muted);
}

/* ============================================================
   A week of one game
   ============================================================ */

.hx-week {
  display: grid;
  gap: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.hx-day {
  --day-1: var(--hx-sky-1);
  --day-2: var(--hx-sky-2);
  display: grid;
  overflow: clip;
}

.hx-day--sky { --day-1: #5cc2ff; --day-2: #3aa0ff; }
.hx-day--sun { --day-1: #ffd23f; --day-2: #ffb61e; }
.hx-day--berry { --day-1: #ff7ab3; --day-2: #ff5fa2; }
.hx-day--storm { --day-1: var(--hx-storm-1); --day-2: var(--hx-storm-2); }
.hx-day--mint { --day-1: #3ddc9a; --day-2: #22c98b; }

.hx-day-art {
  position: relative;
  display: grid;
  align-items: center;
  justify-items: end;
  min-block-size: 15rem;
  padding: 1.5rem 1.25rem;
  background:
    radial-gradient(rgb(255 255 255 / 0.22) 1.6px, transparent 2px) 0 0 / 18px 18px,
    linear-gradient(160deg, var(--day-1), var(--day-2));
  border-block-end: var(--hx-border-lg) solid var(--hx-outline);
}

/* Big figure on the start side of each art panel; the UI example sits beside it. */
.hx-day-char {
  position: absolute;
  inset-inline-start: -0.5rem;
  inset-block-end: -0.75rem;
  inline-size: clamp(9.5rem, 38%, 13.5rem);
  max-inline-size: none;
  filter: var(--hx-art-shadow);
}

.hx-day-art > figure {
  position: relative;
  z-index: 1;
  inline-size: min(100%, 16rem);
}

/* Phones and tablets: example UI up top, the figure below it on the start side, so neither hides the other. */
@media (max-width: 63.99rem) {
  .hx-day-art {
    align-items: start;
    min-block-size: 19rem;
  }

  .hx-day-art--scene {
    min-block-size: 15rem;
  }

  .hx-day-char {
    inline-size: 10rem;
  }
}

@media (min-width: 64rem) {
  .hx-day-art > figure {
    inline-size: min(100%, 17.5rem);
  }
}

.hx-day-art--scene {
  padding: 0;
  justify-items: stretch;
}

.hx-day-scene {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 15rem;
  object-fit: cover;
}

.hx-day-art--scene .hx-day-char {
  inline-size: clamp(8rem, 34%, 12rem);
  inset-inline-start: auto;
  inset-inline-end: 0.5rem;
  inset-block-end: -0.25rem;
}

.hx-day-copy {
  display: grid;
  gap: 0.6rem;
  align-content: center;
  justify-items: start;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}

.hx-when {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border: 2px solid var(--hx-outline);
  border-radius: var(--hx-radius-pill);
  background: var(--day-1);
  color: #1b1440;
  font-size: 0.8125rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.hx-day--storm .hx-when {
  color: #ffffff;
}

@media (min-width: 48rem) {
  .hx-day {
    grid-template-columns: 1fr 1fr;
  }

  .hx-day-art {
    min-block-size: 18rem;
    border-block-end: 0;
    border-inline-end: var(--hx-border-lg) solid var(--hx-outline);
  }

  .hx-day:nth-child(even) .hx-day-art {
    order: 2;
    border-inline-end: 0;
    border-inline-start: var(--hx-border-lg) solid var(--hx-outline);
  }

  .hx-day:nth-child(odd) {
    rotate: -0.6deg;
  }

  .hx-day:nth-child(even) {
    rotate: 0.6deg;
  }
}

/* phone-style notification */
.hx-notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.65rem;
  padding: 0.8rem 0.9rem;
  border: var(--hx-border) solid var(--hx-outline);
  border-radius: var(--hx-radius-md);
  background: #ffffff;
  color: #1b1440;
  box-shadow: var(--hx-lift-2);
  font-family: var(--hx-font-ui);
  font-size: 0.875rem;
  line-height: 1.35;
}

.hx-notice > img {
  grid-row: span 2;
  inline-size: 2.25rem;
  border-radius: 9px;
}

.hx-notice-top {
  display: flex;
  justify-content: space-between;
  color: #4a4270;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hx-notice p {
  color: #1b1440;
  font-weight: 500;
}

.hx-notice-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-block-start: 0.5rem;
}

.hx-notice-actions span {
  padding: 0.4rem;
  border: 2px solid var(--hx-outline);
  border-radius: 10px;
  background: var(--hx-card-sunk);
  text-align: center;
  font-weight: 700;
  color: #1b1440;
}

.hx-notice-actions span:first-child {
  background: var(--hx-accept);
}

:root[data-theme='dark'] .hx-notice-actions span:last-child {
  background: #f1edff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .hx-notice-actions span:last-child {
    background: #f1edff;
  }
}

/* chat example */
.hx-chat {
  display: grid;
  gap: 0.6rem;
}

.hx-chat-line {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.hx-chat-line--them {
  flex-direction: row-reverse;
}

.hx-chat-bubble {
  position: relative;
  padding: 0.45rem 0.85rem 0.5rem;
  border: var(--hx-border) solid var(--hx-outline);
  border-radius: 16px 16px 16px 4px;
  background: #ffffff;
  color: #1b1440;
  box-shadow: var(--hx-lift-1);
  font-family: var(--hx-font-display);
  font-size: 1.125rem;
  line-height: 1.15;
}

.hx-chat-line--them .hx-chat-bubble {
  border-radius: 16px 16px 4px 16px;
  background: var(--hx-yellow);
}

.hx-reacts {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
}

.hx-reacts span {
  padding: 0.15rem 0.6rem;
  border: 2px solid var(--hx-outline);
  border-radius: var(--hx-radius-pill);
  background: #ffffff;
  color: #1b1440;
  font-size: 0.8125rem;
  font-weight: 900;
}

/* pixel faces with a player-colour ring */
/* The ring is an inset outline: box-shadow on an <img> paints under the picture. */
.hx-face {
  box-sizing: content-box;
  inline-size: var(--hx-face-1x);
  block-size: var(--hx-face-1x);
  flex: none;
  border: var(--hx-border) solid var(--hx-outline);
  border-radius: 50%;
  background: #fff6e3;
  outline: 3px solid var(--ring, var(--hx-pc-blue));
  outline-offset: -6px;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* No tilt on anything that holds a face: a rotated ancestor resamples the sprite. */
.hx-day:has(.hx-face),
.hx-feats > .hx-feat.hx-feat:has(.hx-face) {
  rotate: none;
}

.ring-red { --ring: var(--hx-pc-red); }
.ring-orange { --ring: var(--hx-pc-orange); }
.ring-yellow { --ring: var(--hx-pc-yellow); }
.ring-green { --ring: var(--hx-pc-green); }
.ring-teal { --ring: var(--hx-pc-teal); }
.ring-blue { --ring: var(--hx-pc-blue); }
.ring-purple { --ring: var(--hx-pc-purple); }
.ring-pink { --ring: var(--hx-pc-pink); }

/* AI seats, drawn exactly like the app (game/BotTag.tsx + BotTag.css): a robot disc on the avatar's
   top end corner, 46% of the avatar, with a thin surface ring; and an "AI" pill next to the name. */
.hx-av {
  position: relative;
  display: inline-grid;
  flex: none;
}

.hx-botbadge {
  position: absolute;
  inset-block-start: -3px;
  inset-inline-end: -4px;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border-radius: 50%;
  background: var(--hx-bot);
  color: var(--hx-on-bot);
  box-shadow: 0 0 0 1.5px var(--hx-bot-ring);
  pointer-events: none;
}

.hx-botbadge svg {
  inline-size: 18px;
}

.hx-bottag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding-block: 1px;
  padding-inline: 4px 6px;
  border-radius: var(--hx-radius-pill);
  background: var(--hx-bot-soft);
  color: var(--hx-bot);
  font-size: 0.75rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.hx-bottag svg {
  inline-size: 1.1em;
}

/* seat example */
.hx-seat {
  display: grid;
  gap: 0.5rem;
}

.hx-seat-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border: var(--hx-border) solid var(--hx-outline);
  border-radius: var(--hx-radius-md);
  background: #ffffff;
  color: #1b1440;
  box-shadow: var(--hx-lift-1);
}

.hx-seat-row p {
  display: grid;
  flex: 1;
  color: #1b1440;
  font-weight: 900;
  line-height: 1.2;
}

.hx-seat-row small {
  color: #4a4270;
  font-size: 0.8125rem;
  font-weight: 700;
}

.hx-seat-row--gone {
  background: #e7e3f5;
}

.hx-seat-row--gone p {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.hx-seat-row--gone .hx-face {
  filter: grayscale(1);
  opacity: 0.7;
}

.hx-outro {
  margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
  max-inline-size: 40rem;
  margin-inline: auto;
  text-align: center;
  font-family: var(--hx-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.2;
  text-wrap: balance;
}

.hx-outro span {
  display: block;
  color: var(--hx-yellow);
  -webkit-text-stroke: 0.07em var(--hx-outline);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--hx-outline);
}

/* ============================================================
   Feature cards (chat, your table, pocket)
   Each card: a coloured art panel (game art that pops out of the top, or a tiny
   drawn-in-CSS piece of the app's UI), then a title and a line or two.
   Mock UI inside the panels is decorative (aria-hidden); the words carry the meaning.
   ============================================================ */

.hx-feats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  grid-auto-flow: dense;
  gap: 2.75rem clamp(1.25rem, 1rem + 1vw, 1.75rem);
  padding-block-start: 1.5rem;
}

@media (min-width: 40rem) {
  .hx-feats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hx-feat--wide {
    grid-column: span 2;
  }

  /* wide cards have twice the panel: draw their mock bigger */
  .hx-feat--wide .hx-feat-art {
    block-size: 11rem;
    font-size: 1.3rem;
  }
}

@media (min-width: 64rem) {
  .hx-feats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.hx-feat {
  --feat: #5cc2ff;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.45rem;
  align-content: start;
  padding: 1rem 1rem 1.35rem;
}

.hx-feat--sky { --feat: #5cc2ff; }
.hx-feat--sun { --feat: #ffd23f; }
.hx-feat--berry { --feat: #ff7ab3; }
.hx-feat--mint { --feat: #3ddc9a; }
.hx-feat--grape { --feat: #a58bff; }
.hx-feat--orange { --feat: #ff9a4c; }

.hx-feats > .hx-feat:nth-child(4n + 1) { rotate: -0.6deg; }
.hx-feats > .hx-feat:nth-child(4n + 3) { rotate: 0.6deg; }

.hx-feat-art {
  position: relative;
  display: grid;
  place-items: center;
  block-size: 9.5rem;
  margin-block-end: 0.5rem;
  padding: 0.75rem;
  border: var(--hx-border) solid var(--hx-outline);
  border-radius: var(--hx-radius-md);
  background:
    radial-gradient(rgb(255 255 255 / 0.3) 1.4px, transparent 1.8px) 0 0 / 16px 16px,
    var(--feat);
  color: var(--hx-mock-ink);
  font-size: 1rem;
  line-height: 1.2;
}

/* game art bursting out of the top of its panel */
.hx-feat-art--pop {
  padding: 0;
  align-items: end;
}

.hx-feat-art--pop img {
  inline-size: 10.5rem;
  margin-block-start: -2.75rem;
  filter: var(--hx-art-shadow);
  transition: rotate var(--hx-dur-micro) var(--hx-ease-standard), scale var(--hx-dur-micro) var(--hx-ease-standard);
}

.hx-feat:hover .hx-feat-art--pop img {
  rotate: -4deg;
  scale: 1.05;
}

/* Phones: a compact row per card (panel beside the words) so twenty-odd cards stay a short scroll. */
@media (max-width: 35.99rem) {
  .hx-feats {
    gap: 1rem;
    padding-block-start: 0;
  }

  .hx-feat {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 0.85rem;
    row-gap: 0.25rem;
    padding: 0.75rem 0.9rem 0.9rem 0.75rem;
  }

  .hx-feat-art {
    grid-row: 1 / span 2;
    align-self: start;
    block-size: auto;
    min-block-size: 7.5rem;
    margin: 0;
    padding: 0.4rem;
    font-size: 0.6875rem;
  }

  .hx-feat-art--pop img {
    inline-size: 7.75rem;
    margin-block-start: -1rem;
  }

  .hx-feat h3 {
    font-size: 1.25rem;
  }

  .hx-feat > p {
    font-size: var(--hx-text-sm);
    line-height: 1.45;
  }
}

@media (max-width: 35.99rem) {
  .hx-feat.hx-feat--wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .hx-feat--wide .hx-feat-art {
    grid-row: auto;
    min-block-size: 0;
  }

  .m-gif-tile:nth-child(n + 4) {
    display: none;
  }

  .hx-feat--gifs .hx-feat-art {
    grid-row: auto;
    padding: 0.7rem 0.5rem;
    font-size: 0.8125rem;
  }
}

/* ── mock UI pieces (sized in em so they scale with the panel) ── */

.m-chip,
.m-wait,
.m-award,
.m-offer-bid {
  display: inline-block;
  padding: 0.3em 0.7em;
  border: 0.14em solid var(--hx-outline);
  border-radius: var(--hx-radius-pill);
  background: var(--hx-mock-bg);
  color: var(--hx-mock-ink);
  font-weight: 900;
  font-size: 0.85em;
  text-align: center;
}

.m-bubble {
  position: relative;
  margin: 0;
  padding: 0.45em 0.8em 0.5em;
  border: 0.16em solid var(--hx-outline);
  border-radius: 1em;
  background: var(--hx-mock-bg);
  color: var(--hx-mock-ink);
  font-family: var(--hx-font-display);
  font-size: 1.25em;
  filter: drop-shadow(0 0.18em 0 var(--hx-outline));
}

.m-bubble::after {
  content: '';
  position: absolute;
  inset-inline-start: 1.2em;
  inset-block-start: 100%;
  inline-size: 0.7em;
  block-size: 0.7em;
  margin-block-start: calc(-0.35em - 0.08em);
  background: inherit;
  border-inline-end: inherit;
  border-block-end: inherit;
  transform: rotate(45deg);
}

.m-bubble--mention b {
  color: var(--hx-mock-mention);
}

/* GIFs: a picker like the app's tray, with real reaction GIFs (landing-assets/clips, sources in the
   README). Reduced motion: <picture> swaps each clip for its still frame. */
.hx-feat--gifs .hx-feat-art {
  block-size: auto;
  padding: 0.9rem;
}

@media (min-width: 40rem) {
  .hx-feat--gifs .m-gif {
    --gif-h: 5em;
  }
}

.m-gif {
  --gif-h: 5.2em;
  display: grid;
  gap: 0.7em;
  justify-items: center;
  inline-size: 100%;
}

.m-search {
  display: flex;
  align-items: center;
  gap: 0.5em;
  inline-size: min(100%, 24em);
  padding: 0.45em 0.9em;
  border: 0.14em solid var(--hx-outline);
  border-radius: var(--hx-radius-pill);
  background: var(--hx-mock-bg);
  color: #5b5578;
  font-weight: 800;
  font-size: 0.95em;
  text-align: start;
}

.m-search::before {
  content: '';
  flex: none;
  inline-size: 0.8em;
  aspect-ratio: 1;
  border: 0.16em solid currentColor;
  border-radius: 50%;
  box-shadow: 0.32em 0.32em 0 -0.22em currentColor;
}

/* one row only: four tiles, three on phones */
.m-gif-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.55em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-gif-tile {
  position: relative;
  flex: none;
  block-size: var(--gif-h);
  border: 0.16em solid var(--hx-outline);
  border-radius: 0.7em;
  background: #fff6e3;
  box-shadow: 0 0.2em 0 var(--hx-outline);
  overflow: clip;
}

.m-gif-tile:nth-child(3n + 1) { rotate: -2deg; }
.m-gif-tile:nth-child(3n + 2) { rotate: 1.5deg; }

.m-gif-tile picture,
.m-gif-tile > img {
  display: block;
  block-size: 100%;
}

.m-gif-tile img {
  block-size: 100%;
  inline-size: auto;
  max-inline-size: none;
}

.m-gif-tile b {
  position: absolute;
  inset-inline-start: 0.3em;
  inset-block-end: 0.3em;
  padding: 0.05em 0.4em;
  border-radius: 0.35em;
  background: var(--hx-outline);
  color: #ffffff;
  font-size: 0.62em;
  font-weight: 900;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.m-gif-tile i {
  position: absolute;
  inset-inline-end: 0.25em;
  inset-block-start: 0.05em;
  color: #ffd23f;
  font-style: normal;
  font-size: 1em;
  -webkit-text-stroke: 0.06em var(--hx-outline);
}

.m-powered {
  margin: 0;
  padding: 0.15em 0.7em;
  border-radius: var(--hx-radius-pill);
  background: var(--hx-mock-bg);
  color: var(--hx-mock-ink);
  font-size: 0.8em;
  font-weight: 800;
}

.m-powered strong {
  font-weight: 900;
  letter-spacing: 0.04em;
}

/* reactions */
.m-reacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45em;
  max-inline-size: 15em;
}

.m-reacts span {
  display: grid;
  place-items: center;
  inline-size: 2.5em;
  aspect-ratio: 1;
  border: 0.14em solid var(--hx-outline);
  border-radius: 50%;
  background: var(--hx-mock-bg);
  box-shadow: 0 0.18em 0 var(--hx-outline);
  font-size: 1.15em;
}

.m-reacts span:nth-child(odd) { rotate: -6deg; }
.m-reacts span:nth-child(even) { rotate: 5deg; translate: 0 -0.2em; }

/* bubble on the board */
.m-board {
  position: relative;
  display: grid;
  place-items: center;
  padding-block-start: 1.6em;
}

.m-hex {
  inline-size: 5.4em;
  filter: drop-shadow(0.12em 0 0 var(--hx-outline)) drop-shadow(-0.12em 0 0 var(--hx-outline)) drop-shadow(0 0.12em 0 var(--hx-outline)) drop-shadow(0 -0.12em 0 var(--hx-outline));
}

.m-hex img {
  inline-size: 100%;
  aspect-ratio: 0.866 / 1;
  object-fit: cover;
  clip-path: var(--hx-hex);
}

.m-bubble--board {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 55%;
  font-size: 1.05em;
  white-space: nowrap;
}

/* status */
.m-status {
  display: grid;
  justify-items: center;
  gap: 0.8em;
}

.m-status .hx-face {
  order: 2;
}

.m-bubble--status {
  font-size: 1em;
}

.m-bubble--status::after {
  inset-inline-start: 50%;
  translate: -50% 0;
}

/* replay player */
.m-player {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: center;
  gap: 0.5em;
  padding: 0.6em 0.8em;
  border: 0.16em solid var(--hx-outline);
  border-radius: 1em;
  background: var(--hx-mock-bg);
  box-shadow: 0 0.2em 0 var(--hx-outline);
}

.m-player-btn {
  display: grid;
  place-items: center;
  inline-size: 2.3em;
  aspect-ratio: 1;
  border: 0.14em solid var(--hx-outline);
  border-radius: 50%;
  background: #f1edff;
  font-weight: 900;
  font-size: 0.9em;
}

.m-player-btn--play {
  background: #ffd23f;
  font-size: 1.1em;
}

.m-player-bar {
  grid-column: 1 / -1;
  position: relative;
  block-size: 0.55em;
  min-inline-size: 7em;
  border: 0.12em solid var(--hx-outline);
  border-radius: 1em;
  background: #f1edff;
}

.m-player-bar span {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 62%;
  border-radius: inherit;
  background: #ff5fa2;
}

/* awards */
.m-awards {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  gap: 0.4em 0.6em;
}

.m-award {
  grid-column: 1;
  background: #ffd23f;
  white-space: nowrap;
  rotate: -3deg;
}

.m-award--b {
  background: var(--hx-mock-bg);
  rotate: 2deg;
}

.m-bars {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: end;
  gap: 0.25em;
  block-size: 4.5em;
  padding: 0.3em;
  border: 0.14em solid var(--hx-outline);
  border-radius: 0.6em;
  background: var(--hx-mock-bg);
}

.m-bars span {
  inline-size: 0.7em;
  border: 0.1em solid var(--hx-outline);
  border-radius: 0.2em 0.2em 0 0;
  background: #5cc2ff;
}

.m-bars span:nth-child(1) { block-size: 35%; }
.m-bars span:nth-child(2) { block-size: 60%; background: #3ddc9a; }
.m-bars span:nth-child(3) { block-size: 45%; background: #ff9a4c; }
.m-bars span:nth-child(4) { block-size: 90%; background: #ff5fa2; }

/* open offer with bids */
.m-offer {
  display: grid;
  gap: 0.3em;
  justify-items: stretch;
  inline-size: min(100%, 12em);
  padding: 0.55em;
  border: 0.16em solid var(--hx-outline);
  border-radius: 0.9em;
  background: var(--hx-mock-bg);
  box-shadow: 0 0.2em 0 var(--hx-outline);
}

.m-offer-head {
  font-family: var(--hx-font-display);
  font-size: 1.05em;
  text-align: center;
}

.m-offer-bid {
  border-radius: 0.5em;
  background: #f1edff;
  font-size: 0.8em;
}

.m-offer-bid--best {
  background: #3ddc9a;
}

/* secret auto-decline */
.m-timer {
  display: grid;
  justify-items: center;
  gap: 0.5em;
}

.m-timer-ring {
  display: grid;
  place-items: center;
  inline-size: 3.2em;
  aspect-ratio: 1;
  border: 0.16em solid var(--hx-outline);
  border-radius: 50%;
  background:
    radial-gradient(var(--hx-mock-bg) 58%, transparent 59%),
    conic-gradient(#ff5fa2 0 68%, #f1edff 68% 100%);
  font-family: var(--hx-font-display);
  font-size: 1.2em;
}

/* waiting */
.m-wait {
  max-inline-size: 13em;
  padding: 0.6em 0.9em;
  border-radius: 0.9em;
  box-shadow: 0 0.2em 0 var(--hx-outline);
  font-size: 1em;
  font-weight: 800;
}

/* seats with bots */
.m-seats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6em 0.9em;
}

.m-seat {
  display: grid;
  justify-items: center;
  gap: 0.25em;
}

.m-seat .hx-bottag {
  font-size: 0.8em;
  border: 0.12em solid var(--hx-outline);
}

.m-seat small {
  padding: 0.05em 0.55em;
  border: 0.12em solid var(--hx-outline);
  border-radius: var(--hx-radius-pill);
  background: var(--hx-mock-bg);
  font-size: 0.8em;
  font-weight: 900;
}

/* languages */
.m-lang {
  display: grid;
  justify-items: center;
  gap: 0.45em;
}

.m-lang span {
  padding: 0.25em 0.8em 0.3em;
  border: 0.16em solid var(--hx-outline);
  border-radius: 0.8em;
  background: var(--hx-mock-bg);
  box-shadow: 0 0.16em 0 var(--hx-outline);
  font-family: var(--hx-font-display);
  font-size: 1.2em;
  rotate: -3deg;
}

.m-lang span[dir='rtl'] {
  background: #ffd23f;
  font-family: 'Arial Hebrew', 'Noto Sans Hebrew', 'Heebo', var(--hx-font-ui);
  font-weight: 800;
  rotate: 2deg;
}

/* install */
.m-install {
  display: grid;
  justify-items: center;
  gap: 0.5em;
}

.m-install img {
  inline-size: 3.6em;
  border: 0.16em solid var(--hx-outline);
  border-radius: 0.9em;
  box-shadow: 0 0.16em 0 var(--hx-outline);
}

/* notifications */
.m-notify {
  display: grid;
  justify-items: center;
  gap: 0.4em;
}

.m-bell {
  font-size: 2.4em;
  line-height: 1;
  rotate: -12deg;
}

/* devices */
.m-devices {
  inline-size: 6.5em;
}

/* keyboard shortcuts */
.m-keys {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 0.4em;
}

.m-keys kbd {
  display: grid;
  place-items: center;
  inline-size: 2.3em;
  aspect-ratio: 1;
  border: 0.14em solid var(--hx-outline);
  border-radius: 0.5em;
  background: var(--hx-mock-bg);
  box-shadow: 0 0.25em 0 var(--hx-outline);
  font-family: var(--hx-font-display);
  font-size: 1.2em;
}

.m-keys kbd:nth-child(2) {
  translate: 0 0.25em;
  box-shadow: 0 0.05em 0 var(--hx-outline);
}

/* light / dark toggle */
.m-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  inline-size: 6em;
  border: 0.16em solid var(--hx-outline);
  border-radius: var(--hx-radius-pill);
  background: linear-gradient(90deg, #fff6e3 50%, #1b1440 50%);
  box-shadow: 0 0.2em 0 var(--hx-outline);
  overflow: clip;
}

.m-toggle span {
  display: grid;
  place-items: center;
  block-size: 2.4em;
  font-size: 1.1em;
}

@media (max-width: 35.99rem) {
  .m-awards {
    grid-template-columns: auto;
    justify-items: center;
  }

  .m-award {
    white-space: normal;
  }

  .m-bars {
    display: none;
  }

  .m-keys {
    grid-template-columns: repeat(2, auto);
  }

  .m-bubble--board {
    inset-inline-start: 35%;
  }
}

/* ============================================================
   Looks
   ============================================================ */

.hx-looks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.5rem;
}

.hx-look {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: clip;
  background: var(--look-bg);
}

.hx-look:nth-child(odd) { rotate: -1deg; }
.hx-look:nth-child(even) { rotate: 1deg; }

@media (max-width: 35.99rem) {
  .hx-looks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 0.75rem;
  }

  .hx-look-scene {
    aspect-ratio: 4 / 3;
  }

  .hx-look.hx-look--cyber h3 {
    font-size: 1.0625rem;
    letter-spacing: 0.03em;
  }

  .hx-look-body {
    padding: 1.9rem 0.8rem 0.9rem;
  }

  .hx-look-hex {
    inset-block-start: -1.9rem;
    inset-inline-start: 0.6rem;
    inline-size: 3.3rem;
  }

  .hx-look h3 {
    font-size: 1.3125rem;
  }

  .hx-look p {
    font-size: 0.875rem;
    line-height: 1.4;
  }
}

.hx-look-scene {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-block-end: var(--hx-border-lg) solid var(--hx-outline);
}

.hx-look-body {
  position: relative;
  display: grid;
  gap: 0.3rem;
  align-content: start;
  padding: 2.4rem 1.25rem 1.25rem;
}

.hx-look-hex {
  position: absolute;
  inset-block-start: -2.4rem;
  inset-inline-start: 1rem;
  inline-size: 4.2rem;
  filter: drop-shadow(0 0 0 var(--hx-outline)) drop-shadow(3px 0 0 var(--hx-outline)) drop-shadow(-3px 0 0 var(--hx-outline)) drop-shadow(0 3px 0 var(--hx-outline)) drop-shadow(0 -3px 0 var(--hx-outline));
}

.hx-look-hex img {
  inline-size: 100%;
  aspect-ratio: 0.866 / 1;
  object-fit: cover;
  clip-path: var(--hx-hex);
}

.hx-look h3 {
  color: var(--look-ink);
  font-size: 1.625rem;
  overflow-wrap: anywhere;
}

.hx-look p {
  color: var(--look-text);
  font-size: var(--hx-text-sm);
}

.hx-swatches {
  display: flex;
  gap: 0.375rem;
  margin-block-start: 0.4rem;
}

.hx-swatches span {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  border: 2px solid var(--hx-outline);
  border-radius: 50%;
}

.hx-swatches span:nth-child(1) { background: var(--s1); }
.hx-swatches span:nth-child(2) { background: var(--s2); }
.hx-swatches span:nth-child(3) { background: var(--s3); }
.hx-swatches span:nth-child(4) { background: var(--s4); }

/* each look in its own voice (colours from its Hexfolk theme; fixed in both page schemes) */
.hx-look--artisan {
  --look-bg: #211913;
  --look-ink: #eeaa45;
  --look-text: #e2d3bd;
  --s1: #16110d; --s2: #2b2119; --s3: #eeaa45; --s4: #f5ecdc;
}

.hx-look--newedge {
  --look-bg: #ffffff;
  --look-ink: #2d46de;
  --look-text: #45526a;
  --s1: #f3f5f9; --s2: #ffffff; --s3: #3451f5; --s4: #0f172a;
}

.hx-look--newedge h3 {
  font-family: var(--hx-font-ui);
  font-weight: 800;
  letter-spacing: -0.03em;
}

.hx-look--neon {
  --look-bg: #0d0a1c;
  --look-ink: #ff6ae0;
  --look-text: #d9d6ea;
  --s1: #07060d; --s2: #151226; --s3: #ff4fd8; --s4: #5ce1ff;
}

.hx-look--neon h3 {
  text-shadow: 0 0 10px rgb(255 79 216 / 0.7), 0 0 22px rgb(255 79 216 / 0.45);
}

.hx-look--cyber {
  --look-bg: #0b0d10;
  --look-ink: #fcee0a;
  --look-text: #d9dee8;
  --s1: #0b0d10; --s2: #1a2027; --s3: #fcee0a; --s4: #2de2e6;
}

.hx-look--cyber h3 {
  font-family: var(--hx-font-ui);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hx-look--cyber .hx-look-body::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 7px;
  background: repeating-linear-gradient(-45deg, #fcee0a 0 10px, #0b0d10 10px 20px);
}

/* faces wall */
.hx-faces {
  display: grid;
  gap: 1.5rem;
  margin-block-start: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}

.hx-faces-head {
  display: grid;
  gap: 0.4rem;
}

.hx-faces-head h3 {
  font-size: var(--hx-text-h3);
}

.hx-faces-head p {
  color: var(--hx-card-muted);
}

.hx-faces ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

@media (min-width: 48rem) {
  .hx-faces ul {
    gap: 12px;
  }

  .hx-faces .hx-face {
    inline-size: var(--hx-face-2x);
    block-size: var(--hx-face-2x);
  }
}

.hx-faces .hx-face {
  outline-width: 4px;
  outline-offset: -8px;
  transition: translate var(--hx-dur-micro) var(--hx-ease-standard);
}

/* hover lifts by whole pixels only (a scale would resample the sprite) */
.hx-faces li:hover .hx-face {
  translate: 0 -4px;
}

/* ============================================================
   How it started
   ============================================================ */

.hx-origin {
  position: relative;
  display: grid;
  gap: 1.5rem;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

.hx-origin-copy {
  display: grid;
  gap: 1rem;
  justify-items: start;
  max-inline-size: 42rem;
}

.hx-origin h2 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.hx-origin p:not(.hx-tag) {
  color: var(--hx-card-muted);
}

.hx-origin a {
  color: var(--hx-card-text);
  font-weight: 900;
}

.hx-origin-art {
  justify-self: center;
  inline-size: 11rem;
  filter: var(--hx-art-shadow);
}

@media (min-width: 48rem) {
  .hx-origin {
    grid-template-columns: 1fr auto;
    align-items: center;
    rotate: -0.5deg;
  }

  .hx-origin-art {
    inline-size: 15rem;
  }
}

/* ============================================================
   Final call
   ============================================================ */

.hx-band--final {
  padding-block-end: 0;
  text-align: center;
}

.hx-band--final .hx-wrap {
  display: grid;
  gap: 1.25rem;
  justify-items: center;
}

.hx-band--final h2 {
  font-size: var(--hx-text-h2);
}

.hx-final-lede {
  max-inline-size: 34rem;
  font-size: var(--hx-text-lg);
  font-weight: 800;
}

.hx-band--final .hx-actions {
  justify-content: center;
}

.hx-parade {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  inline-size: min(100%, 60rem);
  margin-block-start: 1.5rem;
  padding-block-end: 0.5rem;
  border-block-end: var(--hx-border-lg) solid var(--hx-outline);
}

.hx-parade img {
  inline-size: 18%;
  min-inline-size: 0;
  margin-inline: -1.5%;
  margin-block-end: -3%;
  filter: var(--hx-art-shadow);
  animation: hx-bob var(--hx-dur-bob) ease-in-out infinite;
}

.hx-parade img:nth-child(2) { animation-delay: -0.6s; }
.hx-parade img:nth-child(3) { inline-size: 13%; animation-delay: -1.2s; }
.hx-parade img:nth-child(4) { inline-size: 20%; animation-delay: -1.8s; }
.hx-parade img:nth-child(5) { animation-delay: -2.4s; }
.hx-parade img:nth-child(6) { animation-delay: -3s; }

@media (max-width: 35.99rem) {
  .hx-parade img {
    inline-size: 27%;
  }

  .hx-parade img:nth-child(3) {
    inline-size: 20%;
  }

  .hx-parade img:nth-child(4) {
    inline-size: 30%;
  }

  .hx-parade img:is(:nth-child(1), :nth-child(6)) {
    display: none;
  }
}

/* ============================================================
   Footer
   ============================================================ */

.hx-foot {
  padding-block: 1.75rem max(1.75rem, env(safe-area-inset-bottom));
  background: var(--hx-foot);
  color: var(--hx-on-foot);
  font-size: var(--hx-text-sm);
  --hx-focus: #ffffff;
}

.hx-foot .hx-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.5rem;
}

.hx-foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.hx-foot a {
  display: inline-block;
  padding-block: 0.5rem;
}

/* ============================================================
   Reduced motion: stop every loop; the page reads the same without it.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .hx-goodie,
  .hx-char,
  .hx-head-deco,
  .hx-parade img,
  .hx-ticker-track {
    animation: none;
  }

  .hx-btn:hover,
  .hx-btn:active {
    translate: none;
  }
}