/* ==========================================================================
   Bouncy Comet - design system: "cozy game night"
   Inside: a warm, lamp-lit games room - cream paper, wood, soft toy colours.
   Outside the window: the night sky Comet flies through. The art (all night
   scenes) is always shown framed - a window, a photo, a postcard stamp - and
   the darker "night" bands (screens, footer) are the view outside.
   Hand-written, no framework, no @import, no build step, no third-party request.
   Sections:
     01  Fonts + tokens (light room, night scope)
     02  Reset
     03  Page background (paper)
     04  Typography
     05  Layout helpers + sections (scalloped edges, night bands)
     06  Skip link + focus
     07  Buttons (toy buttons) + store badge + social icons
     08  Chips: eyebrow, pill, badge, status
     09  Header + navigation
     10  Hero (home) + page banner + floating toys
     11  Panels, cards, grids
     12  Game cards (photos) + rail (carousel)
     13  Ways to play, genres, features
     14  Dice icons, steps, cross marks
     15  Phone frame + screenshot gallery + lightbox
     16  Game sections (Dice Duo page)
     17  FAQ
     18  Prose (legal pages) + documents
     19  CTA postcard + dividers
     20  Forms + contact routes + community
     21  Footer
     22  Utilities
     23  Reveal + motion + reduced motion + print
   ========================================================================== */


/* ==========================================================================
   01  FONTS + TOKENS
   Both fonts are the game's own UI fonts, self-hosted (SIL Open Font License,
   see assets/fonts/). No third-party font request is made.
   ========================================================================== */

@font-face {
  font-family: "Lilita One";
  src: url("../assets/fonts/LilitaOne-Regular.woff") format("woff"),
       url("../assets/fonts/LilitaOne-Regular.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../assets/fonts/Nunito-Bold.woff") format("woff"),
       url("../assets/fonts/Nunito-Bold.ttf") format("truetype");
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- The room --- */
  --cream: #FFF6EA;              /* page */
  --oat: #FBEBD6;                /* tinted band */
  --oat-deep: #F4DDBF;
  --paper: #FFFCF6;              /* cards */
  --paper-edge: #EEDCC2;         /* the thick edge under a card */
  --wood: #C8834C;
  --wood-dark: #8E532A;
  --wood-light: #E4A86F;

  /* --- Ink --- */
  --plum: #2B1A3B;               /* headings: 14.9:1 on cream */
  --ink: #3B2A49;                /* body: 12.2:1 on cream */
  --ink-soft: #66547A;           /* secondary: 6.3:1 on cream, 5.8:1 on oat */

  /* --- Comet, the mascot (colours sampled from the art) --- */
  --comet: #8C3CFA;
  --comet-ink: #6A25D6;          /* violet words: 6.9:1 on cream, 6.3:1 on oat */
  --comet-deep: #561BA5;
  --comet-night: #2E0755;
  --lilac: #C9A6FF;
  --lilac-wash: #F1E7FF;
  --lava: #F0455D;
  --lava-core: #FBDF97;
  --lime: #B7F26A;

  /* --- Toy colours (the five games) --- */
  --red: #E5392F;
  --yellow: #FFC61A;
  --butter: #FFD873;
  --apricot: #FF9F5C;
  --green: #3DBE3D;
  --mint: #7FD8B4;
  --sky: #4EA6F2;
  --rose: #FF8FB4;
  --white: #FFFFFF;

  /* --- The night outside --- */
  --night: #24163A;
  --night-deep: #170D29;
  --night-violet: #3A2160;
  --lamp: #FFC77D;

  /* --- Theme roles (redefined inside .night scopes) --- */
  --bg: var(--cream);
  --heading: var(--plum);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --accent: var(--comet-ink);
  --surface: var(--paper);
  --line: rgba(59, 42, 73, .14);
  --line-strong: rgba(59, 42, 73, .3);

  /* --- Spacing --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* --- Radii --- */
  --r-sm: 12px;
  --r: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* --- Shadows: warm, soft, from a lamp above --- */
  --sh-1: 0 6px 16px -8px rgba(92, 52, 24, .32);
  --sh-2: 0 18px 36px -20px rgba(92, 52, 24, .42);
  --sh-3: 0 34px 60px -26px rgba(70, 36, 14, .5);
  --paper-lip: 0 4px 0 var(--paper-edge);

  /* --- Layout --- */
  --maxw: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 76px;

  /* --- Motion --- */
  --ease: cubic-bezier(.22, .68, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 140ms;
  --t: 240ms;
  --t-slow: 560ms;

  /* --- Fonts: rounded system face first where the device has one --- */
  --font-body: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", var(--font-body);
  --font-ui: "Nunito", var(--font-body);

  /* --- Textures (inline, no request) --- */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --dots: radial-gradient(circle, rgba(59, 42, 73, .13) 1.6px, transparent 2.2px);

  color-scheme: light;
}

/* The night: the showcase band, the footer, the lightbox. Every role flips to light-on-dark. */
.night,
.section--dark,
.site-footer,
.lb {
  --heading: #FFFFFF;
  --text: #F1E9FA;               /* 14.2:1 on --night */
  --text-soft: #CDBFE0;          /* 9.7:1 on --night */
  --accent: #D9C2FF;             /* 10.4:1 on --night */
  --surface: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .16);
  --line-strong: rgba(255, 255, 255, .32);
  color-scheme: dark;
}

/* The first band of a legal page is a light title band, not the night. */
main > .section--dark:first-child {
  --heading: var(--plum);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --accent: var(--comet-ink);
  --surface: var(--paper);
  --line: rgba(59, 42, 73, .14);
  --line-strong: rgba(59, 42, 73, .3);
  color-scheme: light;
}

/* The account-deletion page promises system fonts only. */
.sysfont {
  --font-display: var(--font-body);
  --font-ui: var(--font-body);
}


/* ==========================================================================
   02  RESET
   ========================================================================== */

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

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol { margin: 0; }

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

img, picture, svg, video, canvas {
  display: block;
  max-width: 100%;
}

img { height: auto; }

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

button { background: none; border: 0; padding: 0; cursor: pointer; }

a { color: inherit; }

[hidden] { display: none !important; }

[id] { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }


/* ==========================================================================
   03  PAGE BACKGROUND - warm paper with a little grain and a lamp glow at the top
   ========================================================================== */

body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background-color: var(--cream);
  background-image:
    radial-gradient(1200px 520px at 78% -6%, rgba(255, 199, 125, .38), transparent 70%),
    radial-gradient(900px 520px at -8% 18%, rgba(201, 166, 255, .22), transparent 70%),
    var(--grain);
  background-repeat: no-repeat, no-repeat, repeat;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection {
  background: var(--butter);
  color: var(--plum);
}


/* ==========================================================================
   04  TYPOGRAPHY
   ========================================================================== */

.h1, .h2, .h3,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;              /* a bold fallback until Lilita One arrives */
  color: var(--heading);
  letter-spacing: .01em;
}

.h1, h1 {
  font-size: clamp(2.5rem, 4.4vw + 1rem, 4.6rem);
  line-height: 1.02;
}

.h2, h2 {
  font-size: clamp(1.9rem, 2.4vw + 1rem, 3rem);
  line-height: 1.08;
}

.h3, h3 {
  font-size: clamp(1.3rem, .6vw + 1.15rem, 1.6rem);
  line-height: 1.18;
}

h4 {
  font-size: 1.15rem;
  line-height: 1.25;
}

/* A word in comet violet, underlined by a soft butter highlighter stroke. */
.pop {
  color: var(--comet-ink);
  background: linear-gradient(180deg, transparent 64%, rgba(255, 216, 115, .85) 64%, rgba(255, 216, 115, .85) 90%, transparent 90%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 .06em;
}

.night .pop,
.section--dark:not(main > :first-child) .pop,
.site-footer .pop {
  color: var(--lilac);
  background: linear-gradient(180deg, transparent 70%, rgba(140, 60, 250, .55) 70%, rgba(140, 60, 250, .55) 92%, transparent 92%);
}

.balance { text-wrap: balance; }

p { text-wrap: pretty; }

.lead {
  font-size: clamp(1.1rem, .5vw + 1rem, 1.3rem);
  line-height: 1.6;
  color: var(--text);
  max-width: 62ch;
}

.muted { color: var(--text-soft); }

a:not([class]) {
  color: var(--accent);
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}

a:not([class]):hover { color: var(--heading); text-decoration-color: var(--apricot); }

strong { color: var(--heading); }


/* ==========================================================================
   05  LAYOUT HELPERS + SECTIONS
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: calc(860px + var(--gutter) * 2); }

.section {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px);
}

.section--tight { padding-block: clamp(40px, 5vw, 72px); }

/* Words always sit above loose toys. */
.section > .wrap,
.cta-band > .wrap {
  position: relative;
  z-index: 3;
}

/* A tinted band, its top and bottom edges scalloped like a tablecloth. */
.section--tint {
  --band: var(--oat);
  background:
    var(--dots) 0 0 / 26px 26px,
    var(--oat);
  margin-block: 18px;
}

.section--tint::before,
.section--tint::after,
.section--dark:not(main > :first-child)::before,
.section--dark:not(main > :first-child)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 18px;
  pointer-events: none;
  background: radial-gradient(circle at 18px 18px, var(--band) 17.5px, transparent 18.5px) 0 0 / 36px 18px repeat-x;
}

.section--tint::before,
.section--dark:not(main > :first-child)::before { top: -17px; }

.section--tint::after,
.section--dark:not(main > :first-child)::after {
  bottom: -17px;
  transform: scaleY(-1);
}

/* The night band: the view outside the window. */
.section--dark:not(main > :first-child) {
  --band: var(--night);
  margin-block: 18px;
  color: var(--text);
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(140, 60, 250, .35), transparent 70%),
    radial-gradient(800px 420px at 0% 100%, rgba(255, 159, 92, .14), transparent 70%),
    var(--night);
}

/* Soft stars in the night band. */
.section--dark:not(main > :first-child) > .wrap::before {
  content: "";
  position: absolute;
  inset: -60px 0;
  z-index: -1;
  pointer-events: none;
  opacity: .8;
  background-image:
    radial-gradient(circle at 24px 36px, rgba(255, 255, 255, .9) 0 1px, transparent 1.7px),
    radial-gradient(circle at 132px 84px, rgba(255, 255, 255, .55) 0 .8px, transparent 1.5px),
    radial-gradient(circle at 212px 158px, rgba(255, 226, 160, .9) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 64px 228px, rgba(255, 255, 255, .7) 0 .9px, transparent 1.6px),
    radial-gradient(circle at 286px 262px, rgba(255, 226, 160, .7) 0 1px, transparent 1.8px);
  background-size: 320px 320px;
}

/* Legal pages: the title band is light paper and the text card follows it closely. */
main > .section--dark:first-child {
  padding-top: clamp(48px, 7vw, 88px);
  padding-bottom: 0;
  background: none;
}

main > .section--dark:first-child + .section { padding-top: 48px; }
main > .section--dark:first-child .section__head { max-width: 860px; margin-bottom: 0; }

.section__head {
  max-width: 760px;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.section__head > * + * { margin-top: var(--s-4); }

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__head--center .lead { margin-inline: auto; }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }

.stack > * + * { margin-top: var(--s-4); }
.stack--lg > * + * { margin-top: var(--s-5); }

.grid {
  display: grid;
  gap: var(--s-5);
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1023px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .split,
  .split--wide-left { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   06  SKIP LINK + FOCUS
   ========================================================================== */

.skip {
  position: absolute;
  left: var(--s-4);
  top: -80px;
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  background: var(--plum);
  color: var(--white);
  font-family: var(--font-ui);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}

.skip:focus { top: var(--s-4); }

:focus:not(:focus-visible) { outline: none; }

/* Violet ring on the room (6.3:1 on cream), lime ring outside at night (12:1 on --night). */
:focus-visible {
  outline: 3px solid var(--comet-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.night :focus-visible,
.section--dark:not(main > :first-child) :focus-visible,
.site-footer :focus-visible,
.lb :focus-visible { outline-color: var(--lime); }


/* ==========================================================================
   07  BUTTONS - chunky toy buttons, like the game's big green Roll button
   ========================================================================== */

/* One rule for colour, on every page:
     green   the page's main action
     violet  contact and partnership (the Contact button in the menu, "Talk publishing")
     paper   the second choice (cream on the room, glass at night)
   White labels on green and violet keep a dark halo, as in the game: 4.6:1 or more. */
.btn {
  --btn-top: #2A9E33;
  --btn-mid: #197923;
  --btn-low: #14651D;
  --btn-lip: #0D4A15;
  --btn-halo: #093A10;
  --btn-text: var(--white);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 10px 26px 12px;
  border-radius: 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1.1;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  color: var(--btn-text);
  text-shadow:
    0 2px 0 var(--btn-halo), 0 -1px 0 var(--btn-halo),
    1.5px 0 0 var(--btn-halo), -1.5px 0 0 var(--btn-halo),
    1.2px 1.6px 0 var(--btn-halo), -1.2px 1.6px 0 var(--btn-halo),
    1.2px -1px 0 var(--btn-halo), -1.2px -1px 0 var(--btn-halo);
  background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-mid) 26%, var(--btn-low) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .5),
    inset 0 -3px 0 rgba(0, 0, 0, .14),
    0 6px 0 var(--btn-lip),
    0 16px 24px -10px rgba(70, 36, 14, .55);
  transform: translateY(0);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The gloss: a soft light band across the top quarter, ending above the letters. */
.btn::before {
  content: "";
  position: absolute;
  inset: 3px 6px auto 6px;
  height: 27%;
  border-radius: 13px 13px 22px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.btn > * { position: relative; }

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .5),
    inset 0 -3px 0 rgba(0, 0, 0, .14),
    0 8px 0 var(--btn-lip),
    0 22px 30px -12px rgba(70, 36, 14, .6);
}

.btn:active {
  transform: translateY(4px);
  filter: brightness(.97);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .4),
    inset 0 -2px 0 rgba(0, 0, 0, .14),
    0 2px 0 var(--btn-lip),
    0 6px 12px -6px rgba(70, 36, 14, .5);
}

.btn--primary { /* green, the default */ }

/* Comet violet. White label: 5.0:1 on the lightest violet behind the letters. */
.btn--comet {
  --btn-top: #8548F0;
  --btn-mid: #7B38E8;
  --btn-low: #6226CC;
  --btn-lip: #34117F;
  --btn-halo: var(--comet-night);
}

/* Paper: a cream toy button with plum letters. The second choice in the room. */
.btn--ghost,
.btn--light {
  --btn-top: #FFFFFF;
  --btn-mid: #FFF9F0;
  --btn-low: #F8EAD6;
  --btn-lip: #DCC09B;
  --btn-text: var(--plum);
  text-shadow: none;
  box-shadow:
    inset 0 0 0 2px rgba(59, 42, 73, .16),
    inset 0 2px 0 #FFFFFF,
    0 6px 0 var(--btn-lip),
    0 16px 24px -12px rgba(70, 36, 14, .45);
}

.btn--ghost:hover,
.btn--light:hover {
  filter: none;
  box-shadow:
    inset 0 0 0 2px rgba(106, 37, 214, .55),
    inset 0 2px 0 #FFFFFF,
    0 8px 0 var(--btn-lip),
    0 22px 30px -14px rgba(70, 36, 14, .5);
}

.btn--ghost:active,
.btn--light:active {
  box-shadow: inset 0 0 0 2px rgba(106, 37, 214, .55), 0 2px 0 var(--btn-lip);
}

/* At night the second choice is glass with a white rim. */
.night .btn--ghost,
.section--dark:not(main > :first-child) .btn--ghost,
.site-footer .btn--ghost {
  --btn-text: var(--white);
  text-shadow: 0 2px 0 rgba(10, 4, 24, .55);
  background: rgba(255, 255, 255, .1);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .55),
    0 6px 0 rgba(10, 4, 24, .55),
    0 14px 24px -8px rgba(0, 0, 0, .5);
}

.night .btn--ghost:hover,
.section--dark:not(main > :first-child) .btn--ghost:hover,
.site-footer .btn--ghost:hover {
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 2px #FFFFFF, 0 8px 0 rgba(10, 4, 24, .55), 0 20px 30px -10px rgba(0, 0, 0, .6);
}

/* On a green or violet button the ring is plum: it stands off both the button and the room. */
.btn--primary:focus-visible,
.btn--comet:focus-visible { outline-color: var(--plum); }
.night .btn:focus-visible,
.site-footer .btn:focus-visible { outline-color: var(--lime); }

.btn--lg {
  min-height: 60px;
  padding: 12px 32px 14px;
  border-radius: 20px;
  font-size: 1.3rem;
}

.btn--sm {
  min-height: 44px;
  padding: 7px 20px 9px;
  border-radius: 15px;
  font-size: 1.02rem;
}

.btn--sm::before { border-radius: 10px 10px 18px 18px; }

.btn--wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .btn--wrap.btn--ghost,
  .btn--wrap.btn--comet { padding-inline: 14px; font-size: 1rem; }
  .btn--lg { min-height: 56px; padding-inline: 20px; font-size: 1.1875rem; }
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-4);
}

.btn-row--center { justify-content: center; }

.arrow {
  width: 1em;
  height: 1em;
  flex: none;
}

/* --- Store badge: Google's official "Get it on Google Play" artwork, self-hosted and unchanged.
   The file (646x250) carries its own transparent clear space: 41px round a 564x168 badge. The negative
   margin lets the visible badge line up with the buttons beside it; --badge is the visible height.
   Google asks for at least 28px of badge height and a quarter of it as clear space: the row gap gives that. */
.play-badge {
  --badge: 52px;
  display: inline-block;
  flex: none;
  line-height: 0;
  border-radius: 12px;
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}

.play-badge img {
  width: auto;
  height: calc(var(--badge) * 250 / 168);
  max-width: none;
  margin: calc(var(--badge) * -41 / 168);
}

.play-badge--lg { --badge: 60px; }
.play-badge--sm { --badge: 44px; }

.play-badge:hover { transform: translateY(-2px); filter: drop-shadow(0 10px 12px rgba(70, 36, 14, .35)); }
.play-badge:active { transform: translateY(2px); filter: none; }
.play-badge:focus-visible { outline-offset: 4px; }

@media (max-width: 480px) {
  .play-badge--lg { --badge: 56px; }
}

/* --- Social icons: calm round tiles. The brand marks inside are left exactly as the brands
   ask: Facebook's blue circle logo, Instagram's glyph in one solid colour, never rotated. --- */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.social__link {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--plum);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .14), 0 3px 0 var(--paper-edge);
  transition: transform var(--t) var(--spring), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.site-footer .social__link,
.night .social__link {
  color: var(--white);
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28);
}

.social__link svg { width: 26px; height: 26px; }
.social__link--fb svg { width: 30px; height: 30px; }

.social__link:hover { transform: translateY(-3px); }
.site-footer .social__link:hover,
.night .social__link:hover { background: rgba(255, 255, 255, .18); }
.social__link:active { transform: translateY(2px); }


/* ==========================================================================
   08  CHIPS: eyebrow, pill, badge, status
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* A little comet in front of every eyebrow: a violet rock trailing three warm dashes. */
.eyebrow::before {
  content: "";
  flex: none;
  width: 38px;
  height: 10px;
  background:
    radial-gradient(circle at calc(100% - 5px) 50%, var(--lava-core) 0 1.3px, var(--lava) 1.9px 2.5px, var(--comet) 3.1px 4.6px, transparent 5.2px),
    linear-gradient(90deg, var(--apricot) 0 6px, transparent 6px 10px, var(--butter) 10px 16px, transparent 16px 20px, var(--mint) 20px 26px, transparent 26px) 0 50% / 100% 3px no-repeat;
}

.section__head--center .eyebrow { justify-content: center; }

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.pill,
.badge,
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 34px;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .9rem;
  line-height: 1.2;
}

.pill {
  color: var(--text);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}

.badge {
  color: var(--white);
  background: linear-gradient(180deg, #7B38E8, #6226CC);
  box-shadow: 0 3px 0 #34117F;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .76rem;
}

.badge--blue {
  background: linear-gradient(180deg, #2A6FE0, #1B56C8);
  box-shadow: 0 3px 0 #123B8E;
}

.badge--green {
  background: linear-gradient(180deg, #2A9E33, #197923);
  box-shadow: 0 3px 0 #0D4A15;
}

/* "Out now" sticker: a mint dot that breathes. */
.status {
  color: var(--plum);
  background: #E6F8EF;
  box-shadow: inset 0 0 0 1.5px #8FD9B6;
}

.status::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1F9D61;
  box-shadow: 0 0 0 0 rgba(31, 157, 97, .5);
  animation: pulse 2.4s var(--ease) infinite;
}

.night .status,
.section--dark:not(main > :first-child) .status {
  color: var(--white);
  background: rgba(127, 216, 180, .14);
  box-shadow: inset 0 0 0 1.5px rgba(127, 216, 180, .6);
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(31, 157, 97, .5); }
  70%, 100% { box-shadow: 0 0 0 10px rgba(31, 157, 97, 0); }
}


/* ==========================================================================
   09  HEADER + NAVIGATION
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255, 246, 234, .86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.site-header.is-stuck,
.nav-open .site-header {
  background: rgba(255, 246, 234, .96);
  box-shadow: 0 1px 0 rgba(59, 42, 73, .1), 0 14px 30px -20px rgba(92, 52, 24, .45);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 100%;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  text-decoration: none;
  color: var(--heading);
}

.nav__logo-mark {
  flex: none;
  width: 46px;
  height: 46px;
  filter: drop-shadow(0 6px 8px rgba(86, 27, 165, .35));
  transition: transform var(--t-slow) var(--spring);
}

.nav__logo:hover .nav__logo-mark { transform: translate(3px, -3px) rotate(-8deg); }

.nav__logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
}

.nav__logo-text span { color: var(--comet-ink); }
.site-footer .nav__logo-text span { color: var(--lilac); }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(2px, 1vw, 10px);
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}

.nav__link:hover {
  color: var(--plum);
  background: rgba(255, 216, 115, .45);
}

.nav__link.is-active {
  color: var(--plum);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .14), 0 3px 0 var(--paper-edge);
}

/* A little die pip under the active page, in the comet's violet. */
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--comet);
}

.nav__cta { margin-left: var(--s-2); }

.nav__burger {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--paper);
  box-shadow: inset 0 0 0 2px rgba(59, 42, 73, .16), 0 4px 0 var(--paper-edge);
}

.nav__burger span {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 3px;
  border-radius: 3px;
  background: var(--plum);
  transition: transform var(--t) var(--ease), opacity var(--t-fast) var(--ease);
}

.nav__burger span:nth-child(1) { top: 15px; }
.nav__burger span:nth-child(2) { top: 22.5px; }
.nav__burger span:nth-child(3) { top: 30px; }

.nav-open .nav__burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav-open .nav__burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 899px) {
  /* Without JavaScript the links simply wrap under the logo. */
  .site-header { height: auto; min-height: var(--header-h); }
  .nav { flex-wrap: wrap; padding-block: 12px; }

  .js .site-header { height: var(--header-h); }
  .js .nav { flex-wrap: nowrap; padding-block: 0; }
  .js .nav__burger { display: block; }

  .js .nav__links {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    padding: var(--s-4) var(--gutter) var(--s-6);
    background: var(--cream);
    border-radius: 0 0 28px 28px;
    box-shadow: 0 1px 0 rgba(59, 42, 73, .1) inset, 0 30px 50px -20px rgba(70, 36, 14, .45);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility 0s linear var(--t);
  }

  .js .nav-open .nav__links,
  .js.nav-open .nav__links,
  .nav-open .nav__links {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  main,
  .site-footer { transition: filter var(--t) var(--ease); }

  .nav-open main,
  .nav-open .site-footer { filter: brightness(.6) saturate(.8) blur(1px); }

  .js .nav__link {
    min-height: 56px;
    padding: 0 var(--s-5);
    border-radius: var(--r);
    font-family: var(--font-display);
    font-size: 1.35rem;
    background: var(--paper);
    box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .1), 0 3px 0 var(--paper-edge);
  }

  .js .nav__link.is-active {
    background: var(--lilac-wash);
    box-shadow: inset 0 0 0 2px rgba(106, 37, 214, .4), 0 3px 0 #D8C4F7;
  }

  .js .nav__link.is-active::after {
    left: auto;
    right: var(--s-5);
    top: 50%;
    bottom: auto;
    width: 12px;
    height: 12px;
    margin: -6px 0 0;
  }

  .js .nav__cta {
    margin: var(--s-3) 0 0;
    min-height: 56px;
    font-size: 1.25rem;
  }
}


/* ==========================================================================
   10  HERO (home) + PAGE BANNER + FLOATING TOYS
   ========================================================================== */

/* Art that fills its box. */
.backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Home hero: the words in the warm room, the night sky in an arched window --- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(28px, 4vw, 56px) clamp(48px, 6vw, 88px);
}

.hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.hero__copy > * + * { margin-top: var(--s-5); }
.hero__copy > .eyebrow + * { margin-top: var(--s-4); }

.hero .h1 { font-size: clamp(2.6rem, 4vw + 1.1rem, 4.8rem); }

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .95rem;
  color: var(--text-soft);
}

.hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero__meta li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 6px;
  background:
    radial-gradient(circle, #fff 0 22%, transparent 26%) 50% 50% / 100% 100% no-repeat,
    linear-gradient(160deg, #F2574B, var(--red));
  box-shadow: 0 2px 0 #9C1D16;
}

.hero__meta li:nth-child(2)::before {
  background:
    radial-gradient(circle, #fff 0 22%, transparent 26%) 26% 26% / 50% 50% no-repeat,
    radial-gradient(circle, #fff 0 22%, transparent 26%) 74% 74% / 50% 50% no-repeat,
    linear-gradient(160deg, #6FB8F7, var(--sky));
  box-shadow: 0 2px 0 #2366A8;
}

.hero__meta li:nth-child(3)::before {
  background:
    radial-gradient(circle, #fff 0 22%, transparent 26%) 22% 22% / 44% 44% no-repeat,
    radial-gradient(circle, #fff 0 22%, transparent 26%) 50% 50% / 44% 44% no-repeat,
    radial-gradient(circle, #fff 0 22%, transparent 26%) 78% 78% / 44% 44% no-repeat,
    linear-gradient(160deg, #58CF58, var(--green));
  box-shadow: 0 2px 0 #1F7A1F;
}

/* The window. */
.hero__window {
  position: relative;
  justify-self: center;
  width: min(100%, 470px);
  padding: 34px 26px 0;
}

.window {
  position: relative;
  aspect-ratio: 2 / 2.75;
  border-radius: 999px 999px 34px 34px;
  padding: 14px;
  background: linear-gradient(160deg, #FFFDF8, #F5E4CB);
  box-shadow:
    inset 0 2px 0 #FFFFFF,
    inset 0 -4px 0 rgba(142, 83, 42, .14),
    0 10px 0 var(--paper-edge),
    var(--sh-3);
}

.window__glass {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 999px 999px 24px 24px;
  background: var(--night);
  box-shadow: inset 0 0 0 3px rgba(59, 42, 73, .2);
}

.window__glass img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}

/* The window bars: a cross of warm wood, very light so the art stays the star. */
.window__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - 3px), rgba(255, 252, 246, .55) calc(50% - 3px) calc(50% + 3px), transparent calc(50% + 3px)),
    linear-gradient(180deg, transparent 44%, rgba(255, 252, 246, .55) 44% calc(44% + 6px), transparent calc(44% + 6px)),
    radial-gradient(120% 70% at 20% 0%, rgba(255, 255, 255, .22), transparent 60%);
  mix-blend-mode: screen;
}

/* The sill. */
.window::after {
  content: "";
  position: absolute;
  left: -22px;
  right: -22px;
  bottom: -18px;
  height: 24px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--wood-light), var(--wood) 55%, var(--wood-dark));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 6px 0 #6E3E1C, 0 18px 24px -10px rgba(70, 36, 14, .55);
}

/* String lights draped over the window (an inline SVG in the page). */
.lights {
  position: absolute;
  left: -6%;
  top: 6px;
  z-index: 2;
  width: 112%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.lights circle {
  animation: twinkle 3.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.lights circle:nth-of-type(3n + 2) { animation-delay: -1.1s; }
.lights circle:nth-of-type(3n) { animation-delay: -2.2s; }

@keyframes twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* A sticky note on the window: "Out now". */
.hero__note {
  position: absolute;
  left: -6px;
  bottom: 18%;
  z-index: 4;
  padding: 12px 16px 14px;
  max-width: 172px;
  border-radius: 6px 6px 18px 6px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--plum);
  background: linear-gradient(180deg, #FFE59A, var(--butter));
  box-shadow: 0 12px 20px -10px rgba(70, 36, 14, .55), inset 0 -3px 0 rgba(142, 83, 42, .14);
  transform: rotate(-6deg);
}

.hero__note small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .8rem;
  color: #6B4A12;
}

.hero__window .floater { z-index: 4; }

@media (max-width: 1023px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { max-width: 640px; }
  .hero__window { width: min(100%, 400px); }
}

@media (max-width: 480px) {
  .hero .btn-row { gap: 14px; }
  .hero__window { width: min(100%, 330px); padding-inline: 18px; }
  .hero__note { font-size: 1rem; max-width: 140px; left: -4px; }
}

/* --- Inner pages: a calm title band on paper ----------------------------- */
.banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-bottom: clamp(32px, 5vw, 64px);
}

/* The night-sky pictures behind page titles belong to the old theme: the room has none. */
.banner > .backdrop:not(.banner--scene > .backdrop),
.banner__shade { display: none; }

.banner__inner {
  position: relative;
  z-index: 3;
  padding-top: clamp(40px, 6vw, 80px);
}

.banner__copy { max-width: 720px; }
.banner__copy > * + * { margin-top: var(--s-4); }
.banner__copy > .btn-row,
.banner__copy > .pill-row { margin-top: var(--s-5); }

.banner__art {
  position: relative;
  justify-self: center;
}

.banner--split .banner__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}

/* A soft lamp-lit circle behind the art beside a page title. */
.banner--split .banner__art::before,
.banner--split .toy-heap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 118%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 216, 115, .55), rgba(255, 199, 125, .18) 55%, transparent 70%);
}

@media (max-width: 899px) {
  .banner--split .banner__inner { grid-template-columns: minmax(0, 1fr); }
  .banner__art:not(.phone-pair) { width: min(56vw, 240px); }
}

/* A little heap of toys beside a page title (Games). */
.toy-heap {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 4 / 3;
  justify-self: end;
}

.toy-heap picture {
  position: absolute;
  width: var(--w);
  filter: drop-shadow(0 18px 14px rgba(70, 36, 14, .3));
}

.toy-heap img {
  width: 100%;
  height: auto;
  animation: bob var(--bob, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@media (max-width: 899px) {
  .toy-heap { display: none; }
}

/* --- About: the workshop picture in a big framed window, the words beside it on paper --- */
.banner--scene {
  padding-top: clamp(32px, 4vw, 56px);
}

.banner--scene .backdrop {
  position: relative;
  inset: auto;
  width: min(calc(100% - var(--gutter) * 2), var(--maxw));
  margin-inline: auto;
  aspect-ratio: 16 / 7.4;
  border-radius: 36px;
  border: 12px solid var(--paper);
  box-shadow: 0 8px 0 var(--paper-edge), var(--sh-3);
}

.banner--scene .backdrop img { object-position: 30% 50%; }

.banner--scene .banner__inner {
  margin-top: clamp(-120px, -8vw, -56px);
  padding-top: 0;
}

.banner--scene .banner__copy {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--r-lg);
  text-align: center;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .08), var(--paper-lip), var(--sh-2);
}

.banner--scene .banner__copy .eyebrow { justify-content: center; }
.banner--scene .banner__copy .lead { margin-inline: auto; }
.banner--scene .banner__copy .btn-row,
.banner--scene .banner__copy .pill-row { justify-content: center; }

@media (max-width: 639px) {
  .banner--scene .backdrop { aspect-ratio: 4 / 3; border-width: 8px; border-radius: 26px; }
  .banner--scene .backdrop img { object-position: 12% 50%; }
  .banner--scene .banner__inner { margin-top: -40px; }
}

/* --- Loose toys drifting around a section. Decoration only. ----------------- */
.floaters {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.floater {
  position: absolute;
  width: var(--size, 96px);
  transform: translate3d(0, calc(var(--shift, 0) * var(--depth, .2) * 1px), 0);
  will-change: transform;
}

.floater img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 12px rgba(70, 36, 14, .3));
  animation: bob var(--bob, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
  50% { transform: translateY(-12px) rotate(calc(var(--tilt, 0deg) + 5deg)); }
}

@media (max-width: 1099px) {
  .section > .floaters { display: none; }
}

@media (max-width: 760px) {
  .floater--wide { display: none; }
  .floater { width: calc(var(--size, 96px) * .7); }
}


/* ==========================================================================
   11  PANELS, CARDS, GRIDS - thick paper cards with a warm edge
   ========================================================================== */

.panel,
.card {
  position: relative;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow:
    inset 0 0 0 1.5px rgba(59, 42, 73, .08),
    var(--paper-lip),
    var(--sh-2);
}

.night .card,
.section--dark:not(main > :first-child) .card { box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); }

.card {
  padding: clamp(22px, 2.4vw, 32px);
}

.card > * + * { margin-top: var(--s-3); }

.card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--heading);
}

.card__text { color: var(--text); }

.card__icon {
  display: block;
  margin-bottom: var(--s-4);
}


/* ==========================================================================
   12  GAME CARDS (instant photos with washi tape) + RAIL (carousel)
   ========================================================================== */

.gcard {
  --tape: var(--sky);
  --tilt: -1.6deg;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 10px 10px 0;
  border-radius: 22px;
  text-decoration: none;
  color: var(--text);
  background: var(--paper);
  box-shadow:
    inset 0 0 0 1.5px rgba(59, 42, 73, .08),
    var(--paper-lip),
    var(--sh-2);
  transform: rotate(var(--tilt));
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease);
}

.gcard:nth-child(even) { --tilt: 1.4deg; }
.gcard:nth-child(3n) { --tilt: -.6deg; }

/* A strip of tape holding the photo down. */
.gcard::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -10px;
  z-index: 3;
  width: 74px;
  height: 22px;
  margin-left: -37px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 12px),
    var(--tape);
  opacity: .9;
  transform: rotate(-4deg);
  box-shadow: 0 2px 4px rgba(70, 36, 14, .18);
}

.gcard--grid-war { --tape: #7EC0F6; }
.gcard--diceback { --tape: #FFB07A; }
.gcard--roll-race { --tape: #8EDB8E; }
.gcard--six-spots { --tape: #FFD873; }
.gcard--scoop-stack { --tape: #FFA9C8; }

.gcard__art {
  position: relative;
  display: block;
  aspect-ratio: 3 / 3.4;
  overflow: hidden;
  border-radius: 14px;
  background: var(--night);
}

.gcard__art picture {
  position: absolute;
  inset: 0;
}

.gcard__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  transition: transform var(--t-slow) var(--ease);
}

/* The name, written on the white strip under the photo. */
.gcard__name {
  display: block;
  position: absolute;
  inset: auto 0 0 0;
  padding: 40px 14px 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 1vw + 1.05rem, 1.65rem);
  line-height: 1.05;
  color: var(--white);
  text-shadow: 0 2px 0 rgba(23, 13, 41, .7);
  background: linear-gradient(180deg, rgba(23, 13, 41, 0), rgba(23, 13, 41, .78) 70%);
}

.gcard__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  padding: 14px 8px 16px;
}

.gcard__pitch {
  font-size: .95rem;
  line-height: 1.45;
  color: var(--text);
}

.gcard__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .92rem;
  color: var(--comet-ink);
}

.gcard__go .arrow { transition: transform var(--t) var(--ease); }

.gcard:hover,
.gcard:focus-visible {
  transform: translateY(-10px) rotate(0deg);
  box-shadow:
    inset 0 0 0 2px var(--tape),
    0 4px 0 var(--paper-edge),
    var(--sh-3);
}

.gcard:focus-visible { outline-offset: 6px; border-radius: 22px; }
.gcard:hover .gcard__art img { transform: scale(1.06); }
.gcard:hover .gcard__go .arrow { transform: translateX(5px); }

/* --- Rail: a row that turns into a swipeable carousel when it does not fit --- */

.rail { position: relative; }

.rail__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--rail-min, 212px), 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  /* Room for the tape, the tilt, the lift and the focus ring. */
  padding: 28px var(--gutter) 38px;
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: none;
}

.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }

.rail.is-scrollable .rail__track {
  --fade-l: 48px;
  --fade-r: 64px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), rgba(0, 0, 0, 0) 100%);
}

.rail.is-scrollable.at-start .rail__track { --fade-l: 0px; }
.rail.is-scrollable.at-end .rail__track { --fade-r: 0px; }

.rail__controls {
  display: none;
  justify-content: flex-end;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.rail.is-scrollable .rail__controls { display: flex; }

.rail__btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: var(--white);
  background: linear-gradient(180deg, #8548F0, #7B38E8 55%, #6226CC);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 5px 0 #34117F, 0 10px 18px -8px rgba(70, 36, 14, .5);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}

.rail__btn svg { width: 22px; height: 22px; }
.rail__btn:hover { transform: translateY(-2px); }
.rail__btn:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 2px 0 #34117F; }

.rail__btn[aria-disabled="true"] {
  color: var(--text-soft);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  cursor: default;
  transform: none;
}

.rail--phone > .rail__track {
  overflow: visible;
  padding: 0;
  margin: 0;
}

@media (max-width: 639px) {
  .rail--phone > .rail__track {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--rail-col, 78vw);
    justify-content: start;
    gap: 14px;
    overflow-x: auto;
    padding: 26px var(--gutter) 34px;
    margin-inline: calc(var(--gutter) * -1);
  }

  .rail--phone > .rail__track > * { max-width: none; min-width: 0; }
}

/* Larger cards with the rules of thumb under the picture (Games page). */
.gamegrid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 2.4vw, 30px);
}

.gtile {
  --tape: var(--sky);
  position: relative;
  flex: 1 1 320px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .08), var(--paper-lip), var(--sh-2);
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease);
}

.gtile:hover {
  transform: translateY(-6px) rotate(-.6deg);
  box-shadow: inset 0 0 0 2px var(--tape), var(--paper-lip), var(--sh-3);
}

.gtile.gcard--grid-war { --tape: #7EC0F6; }
.gtile.gcard--diceback { --tape: #FFB07A; }
.gtile.gcard--roll-race { --tape: #8EDB8E; }
.gtile.gcard--six-spots { --tape: #FFD873; }
.gtile.gcard--scoop-stack { --tape: #FFA9C8; }

.gtile__art {
  position: relative;
  aspect-ratio: 4 / 4.3;
  overflow: hidden;
  border-radius: 20px;
  background: var(--night);
}

.gtile__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.gtile__body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
  padding: 18px 14px 14px;
}

.gtile__tag {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--comet-ink);
}

.gtile__win {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 2px dashed var(--line);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .95rem;
  color: var(--heading);
}

.gtile__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--comet-ink);
  text-decoration: none;
}

.gtile__link:hover { color: var(--plum); }
.gtile__link:hover .arrow { transform: translateX(5px); }
.gtile__link .arrow { transition: transform var(--t) var(--ease); }


/* ==========================================================================
   13  WAYS TO PLAY, GENRES, FEATURES
   ========================================================================== */

/* A paper tile with its toy popping out of the top. */
.mode {
  --tint: rgba(78, 166, 242, .16);
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 70px;
  padding: 104px 24px 28px;
  border-radius: var(--r-lg);
  text-align: center;
  background: linear-gradient(180deg, var(--tint), transparent 70%), var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .08), var(--paper-lip), var(--sh-2);
}

.mode:nth-child(2) { --tint: rgba(140, 60, 250, .14); }
.mode:nth-child(3) { --tint: rgba(61, 190, 61, .14); }
.mode:nth-child(4) { --tint: rgba(255, 143, 180, .18); }

.night .mode,
.section--dark:not(main > :first-child) .mode {
  background: linear-gradient(180deg, var(--tint), transparent 70%), rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
}

.mode__art {
  position: absolute;
  left: 50%;
  top: -70px;
  width: 168px;
  margin-left: -84px;
  filter: drop-shadow(0 16px 12px rgba(70, 36, 14, .3));
  transition: transform var(--t-slow) var(--spring);
}

.mode:hover .mode__art { transform: translateY(-8px) rotate(-4deg) scale(1.05); }
.mode > * + * { margin-top: var(--s-3); }

.mode__note {
  margin-top: auto !important;
  padding-top: 12px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .88rem;
  color: var(--text-soft);
}

/* Home: the four ways as toys standing on a wooden shelf. */
.shelf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-7) var(--s-4);
}

.shelf__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.shelf__art {
  position: relative;
  z-index: 1;
  width: 148px;
  margin-bottom: 30px;
  filter: drop-shadow(0 12px 8px rgba(70, 36, 14, .28));
  transition: transform var(--t-slow) var(--spring);
}

.shelf__item:hover .shelf__art { transform: translateY(-8px) rotate(-4deg); }

/* The shelf: one plank under each toy, overlapping the gap so they read as one board. */
.shelf__item::before {
  content: "";
  position: absolute;
  left: calc(var(--s-4) / -2);
  right: calc(var(--s-4) / -2);
  top: 148px;
  height: 18px;
  background: linear-gradient(180deg, var(--wood-light), var(--wood) 45%, var(--wood-dark));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 6px 0 #6E3E1C, 0 18px 18px -10px rgba(70, 36, 14, .5);
}

.shelf__item:first-child::before { border-radius: 9px 0 0 9px; left: 0; }
.shelf__item:last-child::before { border-radius: 0 9px 9px 0; right: 0; }

.shelf__item .mode__note { margin-top: 6px !important; padding-top: 0; }

@media (max-width: 760px) {
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf__art { width: 116px; margin-bottom: 26px; }
  .shelf__item::before { top: 114px; }
  .shelf__item:nth-child(odd)::before { border-radius: 9px 0 0 9px; left: 0; }
  .shelf__item:nth-child(even)::before { border-radius: 0 9px 9px 0; right: 0; }
  .shelf__item .h3 { font-size: 1.2rem; }
}

@media (max-width: 639px) {
  .mode {
    margin-top: 0;
    padding: 20px 18px 20px 128px;
    min-height: 148px;
    text-align: left;
  }

  .mode__art {
    left: 8px;
    top: 50%;
    width: 112px;
    margin: -56px 0 0;
  }

  .mode > * + * { margin-top: var(--s-2); }
  .mode__note { padding-top: 6px; }
}

/* Genres: icon beside a name and one line. */
.genres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5) var(--s-6);
}

.genre {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: center;
}

.genre__icon {
  width: 96px;
  filter: drop-shadow(0 10px 8px rgba(70, 36, 14, .28));
  transition: transform var(--t-slow) var(--spring);
}

.genre:hover .genre__icon { transform: rotate(-6deg) scale(1.08); }
.genre p { font-size: .98rem; color: var(--text-soft); line-height: 1.5; }
.genre h3 { font-size: 1.25rem; }

@media (max-width: 639px) {
  .genres--long .more { display: none; }
}

.genres--long { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-7); }
.genres--long .genre { align-items: start; grid-template-columns: 96px minmax(0, 1fr); }
.genres--long .genre__icon { width: 96px; }
.genres--long .genre p { margin-top: var(--s-2); font-size: 1rem; color: var(--text); line-height: 1.6; }

/* Features: a big toy icon, a title, a few lines, on a paper card. */
.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

.features--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.feature {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--s-5);
  align-items: center;
  padding: 22px 26px 22px 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .08), var(--paper-lip), var(--sh-2);
}

.night .feature,
.section--dark:not(main > :first-child) .feature { box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); }

.feature__icon {
  width: 96px;
  filter: drop-shadow(0 10px 8px rgba(70, 36, 14, .28));
  transition: transform var(--t-slow) var(--spring);
}

.feature:hover .feature__icon { transform: translateY(-6px) rotate(5deg); }
.feature p { margin-top: var(--s-2); color: var(--text); font-size: 1rem; line-height: 1.55; }

.features--3 .feature {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-content: start;
  gap: var(--s-3);
  align-items: start;
  padding: 24px;
}

.features--3 .feature__icon { width: 96px; margin: -44px 0 0 -6px; }
.features--3 { row-gap: 56px; margin-top: 44px; }

/* Home "four rules": one page of a rulebook - ruled lines, a margin, four rules. */
.features--plain {
  position: relative;
  gap: 0 clamp(32px, 5vw, 72px);
  padding: clamp(28px, 4vw, 52px) clamp(22px, 4vw, 56px);
  border-radius: 30px;
  background:
    linear-gradient(90deg, transparent 0 calc(clamp(22px, 4vw, 56px) - 18px), rgba(240, 69, 93, .35) calc(clamp(22px, 4vw, 56px) - 18px) calc(clamp(22px, 4vw, 56px) - 16px), transparent calc(clamp(22px, 4vw, 56px) - 16px)),
    var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .08), 0 6px 0 var(--paper-edge), 0 12px 0 -2px #E6CFAF, var(--sh-3);
}

.features--plain .feature {
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
  padding: 28px 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  border-top: 2px dashed rgba(59, 42, 73, .16);
}

.features--plain .feature__icon { width: 88px; }
.features--plain .feature:nth-child(-n + 2) { border-top: 0; padding-top: 0; }
.features--plain .feature:nth-last-child(-n + 2) { padding-bottom: 0; }

@media (max-width: 1023px) {
  .genres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .genres,
  .genres--long,
  .features { grid-template-columns: minmax(0, 1fr); }
  .feature { grid-template-columns: 80px minmax(0, 1fr); gap: var(--s-4); padding: 18px; }
  .feature__icon { width: 80px; }
  .features--plain .feature { grid-template-columns: 72px minmax(0, 1fr); padding: 22px 0; }
  .features--plain .feature__icon { width: 72px; }
  .features--plain .feature:nth-child(2) { border-top: 2px dashed rgba(59, 42, 73, .16); padding-top: 22px; }
  .features--plain .feature:nth-last-child(2) { padding-bottom: 22px; }
  .genres--long .genre { grid-template-columns: 72px minmax(0, 1fr); }
  .genres--long .genre__icon { width: 72px; }
}

@media (max-width: 560px) {
  .features--3 { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   14  DICE ICONS, STEPS, CROSS MARKS - drawn in CSS, no emoji, no images
   ========================================================================== */

.die {
  --pip: radial-gradient(circle, #fff 0 56%, rgba(255, 255, 255, 0) 62%);
  --pips: var(--pip) 50% 50%;
  display: inline-block;
  flex: none;
  width: var(--die, 48px);
  aspect-ratio: 1;
  border-radius: 24%;
  background: var(--pips), linear-gradient(160deg, #F2574B 0%, var(--red) 46%, #C92A21 100%);
  background-repeat: no-repeat;
  background-size: 22% 22%, 22% 22%, 22% 22%, 22% 22%, 22% 22%, 22% 22%, 100% 100%;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .5),
    inset 0 -3px 0 rgba(0, 0, 0, .18),
    0 4px 0 #9C1D16,
    0 10px 14px -6px rgba(70, 36, 14, .45);
}

.die--1 { --pips: var(--pip) 50% 50%; background-size: 22% 22%, 100% 100%; }
.die--2 { --pips: var(--pip) 24% 24%, var(--pip) 76% 76%; background-size: 22% 22%, 22% 22%, 100% 100%; }
.die--3 { --pips: var(--pip) 22% 22%, var(--pip) 50% 50%, var(--pip) 78% 78%; background-size: 22% 22%, 22% 22%, 22% 22%, 100% 100%; }
.die--4 { --pips: var(--pip) 24% 24%, var(--pip) 76% 24%, var(--pip) 24% 76%, var(--pip) 76% 76%; background-size: 22% 22%, 22% 22%, 22% 22%, 22% 22%, 100% 100%; }
.die--5 { --pips: var(--pip) 22% 22%, var(--pip) 78% 22%, var(--pip) 50% 50%, var(--pip) 22% 78%, var(--pip) 78% 78%; background-size: 22% 22%, 22% 22%, 22% 22%, 22% 22%, 22% 22%, 100% 100%; }
.die--6 { --pips: var(--pip) 26% 20%, var(--pip) 74% 20%, var(--pip) 26% 50%, var(--pip) 74% 50%, var(--pip) 26% 80%, var(--pip) 74% 80%; }

.cross {
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--cross, 44px);
  aspect-ratio: 1;
}

.cross::before,
.cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 26%;
  margin: -13% 0 0 -50%;
  border-radius: 99px;
  background: linear-gradient(180deg, #F2574B, var(--red));
  box-shadow: 0 3px 0 #9C1D16;
  transform: rotate(45deg);
}

.cross::after { transform: rotate(-45deg); box-shadow: none; }

.steps {
  display: grid;
  gap: var(--s-4);
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
}

.step .die { margin-top: 2px; }
.step h3, .step h4 { color: var(--heading); }
.step p { margin-top: 4px; color: var(--text); }

/* --- The path (About, "four steps"): four dice climbing a dashed comet trail. --- */
.path {
  position: relative;
  padding-top: 8px;
}

.path__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 4%;
}

.path__trail {
  position: absolute;
  left: 0;
  top: 8px;
  width: 100%;
  height: 160px;
  overflow: visible;
  pointer-events: none;
}

.path__step {
  position: relative;
  text-align: center;
}

.path__step:nth-of-type(1) { margin-top: 96px; }
.path__step:nth-of-type(2) { margin-top: 64px; }
.path__step:nth-of-type(3) { margin-top: 32px; }

.path__step .die {
  --die: 64px;
  display: block;
  margin: 0 auto var(--s-5);
  transform: rotate(-8deg);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .5),
    inset 0 -3px 0 rgba(0, 0, 0, .18),
    0 4px 0 #9C1D16,
    0 0 0 8px var(--paper),
    0 0 0 10px rgba(140, 60, 250, .22),
    0 16px 22px -6px rgba(70, 36, 14, .4);
}

.path__step:nth-of-type(even) .die { transform: rotate(7deg); }
.path__step h3 { font-size: 1.35rem; }
.path__step p { margin-top: var(--s-3); color: var(--text); font-size: 1rem; line-height: 1.6; }

@media (max-width: 899px) {
  .path { padding-top: 0; }
  .path__steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-6); }
  .path__trail { display: none; }

  .path::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 28px;
    bottom: 28px;
    width: 0;
    border-left: 4px dashed rgba(140, 60, 250, .45);
  }

  .path__step,
  .path__step:nth-of-type(n) {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: var(--s-4);
    margin-top: 0;
    text-align: left;
  }

  .path__step .die { --die: 56px; margin: 0; }
  .path__step p { margin-top: var(--s-2); }
}

/* --- The house rules (About): one cream game board in a blue tray, ruled like Grid War. --- */
.board {
  padding: clamp(12px, 1.5vw, 20px);
  border-radius: 40px;
  background: linear-gradient(180deg, #5C93F4 0%, #2D6BE0 38%, #1E55C2 100%);
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .45),
    inset 0 -6px 0 rgba(0, 0, 0, .2),
    0 10px 0 #143F95,
    var(--sh-3);
}

.board__sheet {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 24px;
  overflow: hidden;
  color: var(--plum);
  background: #FFF8E9;
  box-shadow: inset 0 5px 12px rgba(20, 30, 70, .25);
}

.rule {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: start;
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.6vw, 34px);
  border-top: 2px dashed rgba(43, 26, 59, .22);
}

.rule:nth-child(-n + 2) { border-top: 0; }
.rule:nth-child(odd) { border-right: 2px dashed rgba(43, 26, 59, .22); }

.rule:nth-child(odd):not(:nth-last-child(-n + 2))::after {
  content: "";
  position: absolute;
  right: -10px;
  bottom: -10px;
  z-index: 1;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--plum);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25);
}

.rule .cross { --cross: 44px; margin-top: 2px; }
.rule h3 { font-size: 1.3rem; color: var(--plum); }
.rule p { margin-top: 6px; font-size: 1rem; line-height: 1.55; color: var(--ink); }
.rule strong { color: var(--plum); }
.rule a:not([class]) { color: var(--comet-ink); font-weight: 700; }

@media (max-width: 760px) {
  .board { border-radius: 30px; }
  .board__sheet { grid-template-columns: minmax(0, 1fr); border-radius: 18px; }
  .rule:nth-child(odd) { border-right: 0; }
  .rule:nth-child(2) { border-top: 2px dashed rgba(43, 26, 59, .22); }
  .rule:nth-child(odd):not(:nth-last-child(-n + 2))::after { display: none; }
  .rule { grid-template-columns: 40px minmax(0, 1fr); }
  .rule .cross { --cross: 36px; }
}


/* ==========================================================================
   15  PHONE FRAME + SCREENSHOT GALLERY + LIGHTBOX
   ========================================================================== */

.phone {
  position: relative;
  width: min(100%, var(--phone, 250px));
  padding: 9px;
  border-radius: 36px;
  background: linear-gradient(150deg, #5A4470 0%, #3B2A49 40%, #24163A 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .22),
    inset 0 0 0 4px rgba(23, 13, 41, .85),
    0 30px 46px -20px rgba(70, 36, 14, .55);
}

.night .phone,
.section--dark:not(main > :first-child) .phone {
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, .28),
    inset 0 0 0 4px rgba(23, 13, 41, .9),
    0 30px 50px -18px rgba(0, 0, 0, .7),
    0 0 60px -18px rgba(255, 199, 125, .45);
}

.phone img {
  width: 100%;
  height: auto;
  border-radius: 28px;
  background: var(--sky);
}

.phone--tilt-l { transform: rotate(-6deg); }
.phone--tilt-r { transform: rotate(5deg); }

.phone-pair {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: var(--s-5);
}

.phone-pair .phone + .phone { margin: 70px 0 0 -52px; }

@media (max-width: 480px) {
  .phone-pair { --phone: 44vw; }
  .phone-pair .phone { width: min(100%, 44vw) !important; padding: 7px; border-radius: 28px; }
  .phone-pair .phone img { border-radius: 22px; }
  .phone-pair .phone + .phone { margin: 48px 0 0 -30px; }
  .phone-pair .phone:only-child { width: min(100%, 56vw) !important; }
}

/* Showcase: phones in a rail, every other one a step lower. */
.showcase .rail__track {
  grid-auto-columns: minmax(212px, 240px);
  justify-content: start;
  padding-top: 30px;
  padding-bottom: 36px;
}

.showcase.is-scrollable + .btn-row { margin-top: -54px !important; }

@media (min-width: 1100px) {
  .showcase .rail__track {
    margin-right: calc((100vw - min(100vw, var(--maxw) + var(--gutter) * 2)) / -2 - var(--gutter));
    padding-right: calc((100vw - min(100vw, var(--maxw) + var(--gutter) * 2)) / 2 + var(--gutter));
  }
}

.showcase__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
}

.showcase__item:nth-child(even) { margin-top: 40px; }

.showcase__cap {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .98rem;
  color: var(--heading);
  text-align: center;
}

.showcase__cap span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .9rem;
  color: var(--text-soft);
}

/* Gallery of every screen; each tile opens the lightbox. */
.shots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2vw, 24px);
}

.shot {
  flex: 0 1 calc(16.666% - 20px);
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 8px 8px 14px;
  border-radius: 24px;
  text-align: center;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .08), var(--paper-lip), var(--sh-2);
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease);
}

.night .shot,
.section--dark:not(main > :first-child) .shot { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); }

.shot img {
  width: 100%;
  border-radius: 17px;
  background: var(--sky);
}

.shot__cap {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .95rem;
  color: var(--heading);
}

.shot:hover,
.shot:focus-visible {
  transform: translateY(-8px) rotate(-1deg);
  box-shadow: inset 0 0 0 2px var(--comet), var(--paper-lip), var(--sh-3);
}

.shot:focus-visible { border-radius: 24px; }

@media (max-width: 639px) {
  .rail--phone > .rail__track.shots { --rail-col: 44vw; }
}

/* --- Lightbox (built by js/main.js) --- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: var(--s-5);
  background: rgba(23, 13, 41, .94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lb__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  max-width: 100%;
}

.lb__img {
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  width: auto;
  max-width: min(100%, 520px);
  border-radius: 26px;
  box-shadow: 0 0 0 8px var(--paper), 0 40px 80px rgba(0, 0, 0, .7);
}

.lb__cap {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--white);
  text-align: center;
}

.lb__btn {
  position: fixed;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 17px;
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--white);
  background: linear-gradient(180deg, #8548F0, #7B38E8 55%, #6226CC);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 5px 0 #34117F, 0 12px 20px -6px rgba(0, 0, 0, .7);
  transition: transform var(--t-fast) var(--ease);
}

.lb__btn:hover { transform: translateY(-2px); }
.lb__btn:active { transform: translateY(3px); }
.lb__btn svg { width: 24px; height: 24px; }
.lb__close { top: var(--s-4); right: var(--s-4); }
.lb__prev { left: var(--s-4); top: 50%; margin-top: -26px; }
.lb__next { right: var(--s-4); top: 50%; margin-top: -26px; }

.lb-open { overflow: hidden; }

@media (max-width: 639px) {
  .lb__prev, .lb__next { top: auto; bottom: var(--s-4); margin-top: 0; }
  .lb__img { max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); }
}


/* ==========================================================================
   16  GAME SECTIONS (Dice Duo page)
   ========================================================================== */

.dd-title {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2.1rem);
  line-height: 1.1;
}

.dd-title img {
  width: min(100%, 520px);
  height: auto;
  margin: -4% 0 -5% -2%;
  filter: drop-shadow(0 14px 16px rgba(70, 36, 14, .3));
}

@media (max-width: 760px) {
  .dd-title img { margin-left: -1%; }
}

.tagline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 1vw + 1.1rem, 1.8rem);
  line-height: 1.15;
  color: var(--comet-ink);
}

.night .tagline,
.section--dark:not(main > :first-child) .tagline { color: var(--lilac); }

/* Jump links to the five games: paper chips. */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.jump a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 4px 18px 4px 8px;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--heading);
  text-decoration: none;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .12), 0 3px 0 var(--paper-edge);
  transition: transform var(--t) var(--spring), box-shadow var(--t-fast) var(--ease);
}

.jump a:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 2px var(--comet-ink), 0 3px 0 var(--paper-edge);
}

.jump img { width: 42px; height: 42px; }

/* Three facts in a row: big numbers on paper. */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-4);
}

.fact {
  padding: 20px 16px;
  border-radius: var(--r);
  text-align: center;
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .08), var(--paper-lip);
}

.fact b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 3vw + 1rem, 3.4rem);
  line-height: 1;
  color: var(--comet-ink);
}

.fact span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
}

/* One game: art + a real screenshot on one side, the rules on the other. */
.game {
  --tape: var(--sky);
  --kicker: #1F6FB8;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
  padding-block: clamp(36px, 5vw, 64px);
}

.game + .game { border-top: 2px dashed var(--line); }

.game--grid-war { --tape: #7EC0F6; --kicker: #1F6FB8; }
.game--diceback { --tape: #FFB07A; --kicker: #B4501A; }
.game--roll-race { --tape: #8EDB8E; --kicker: #227A22; }
.game--six-spots { --tape: #FFD873; --kicker: #8A6400; }
.game--scoop-stack { --tape: #FFA9C8; --kicker: #B52E66; }

.game:nth-of-type(even) .game__media { order: 2; }

.game__media {
  position: relative;
  justify-self: center;
  width: min(100%, 540px);
  padding: 0 90px 30px 0;
}

.game:nth-of-type(even) .game__media { padding: 0 0 30px 90px; }

/* The illustration as an instant photo, taped down. */
.game__card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 12px solid var(--paper);
  border-bottom-width: 40px;
  background: var(--night);
  transform: rotate(-2.5deg);
  box-shadow: inset 0 0 0 1px rgba(59, 42, 73, .08), 0 6px 0 var(--paper-edge), var(--sh-3);
}

.game__media::before {
  content: "";
  position: absolute;
  left: 34%;
  top: -12px;
  z-index: 3;
  width: 96px;
  height: 26px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .28) 0 6px, transparent 6px 12px),
    var(--tape);
  opacity: .9;
  transform: rotate(-5deg);
  box-shadow: 0 2px 4px rgba(70, 36, 14, .18);
}

.game:nth-of-type(even) .game__media::before { left: auto; right: 34%; transform: rotate(4deg); }

.game:nth-of-type(even) .game__card { transform: rotate(2.5deg); }

.game__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game__phone {
  position: absolute;
  right: 0;
  bottom: -10px;
  z-index: 4;
  --phone: 38%;
  width: 38%;
  transform: rotate(4deg);
}

.game:nth-of-type(even) .game__phone { right: auto; left: 0; transform: rotate(-4deg); }

.game__phone.phone { padding: 6px; border-radius: 24px; }
.game__phone.phone img { border-radius: 19px; }

.game__head {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.game__icon {
  flex: none;
  width: 84px;
  height: 84px;
  filter: drop-shadow(0 10px 10px rgba(70, 36, 14, .3));
}

.game__kicker {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--kicker);
}

.night .game__kicker,
.section--dark:not(main > :first-child) .game__kicker { color: var(--tape); }

.game__body > * + * { margin-top: var(--s-5); }

.game__win {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 14px 18px;
  border-radius: var(--r);
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--heading);
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--tape), 0 3px 0 var(--paper-edge);
}

.game__win picture { flex: none; }
.game__win img { width: 34px; height: 34px; }

.rules__toggle { display: none; }

@media (max-width: 899px) {
  .game,
  .game:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
  .game:nth-of-type(even) .game__media { order: 0; }
  .game__media { width: min(100%, 440px); }
}

@media (max-width: 639px) {
  .js .rules__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    width: 100%;
    min-height: 52px;
    padding: 8px 12px 8px 18px;
    border-radius: var(--r);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    text-align: left;
    color: var(--heading);
    background: var(--paper);
    box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .12), 0 3px 0 var(--paper-edge);
  }

  .js .rules__toggle::after {
    content: "";
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background:
      linear-gradient(var(--white), var(--white)) 50% 50% / 14px 3px no-repeat,
      linear-gradient(var(--white), var(--white)) 50% 50% / 3px 14px no-repeat,
      linear-gradient(180deg, #8548F0, #6226CC);
    box-shadow: 0 3px 0 #34117F;
  }

  .js .rules.is-open .rules__toggle::after {
    background:
      linear-gradient(var(--white), var(--white)) 50% 50% / 14px 3px no-repeat,
      linear-gradient(180deg, #8548F0, #6226CC);
  }

  .js .rules:not(.is-open) > .steps { display: none; }
  .js .rules.is-open > .steps { margin-top: var(--s-4); }
  .game__body > * + * { margin-top: var(--s-4); }
}

@media (max-width: 639px) {
  .game__media { width: min(100%, 290px); padding: 0 44px 24px 0; }
  .game:nth-of-type(even) .game__media { padding: 0 0 24px 44px; }
  .game__card { border-width: 8px; border-bottom-width: 26px; }
  .game__icon { width: 64px; height: 64px; }
}


/* ==========================================================================
   17  FAQ - paper cards that unfold
   ========================================================================== */

.faq {
  display: grid;
  gap: var(--s-3);
}

.faq details {
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .08), 0 3px 0 var(--paper-edge);
  transition: box-shadow var(--t) var(--ease);
}

.faq details[open] { box-shadow: inset 0 0 0 2px rgba(106, 37, 214, .45), 0 3px 0 var(--paper-edge), var(--sh-2); }

.night .faq details,
.section--dark:not(main > :first-child) .faq details { box-shadow: inset 0 0 0 1px var(--line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 64px;
  padding: 14px 22px;
  border-radius: var(--r);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.1rem, .4vw + 1.02rem, 1.3rem);
  line-height: 1.25;
  color: var(--heading);
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background:
    linear-gradient(var(--white), var(--white)) 50% 50% / 14px 3px no-repeat,
    linear-gradient(var(--white), var(--white)) 50% 50% / 3px 14px no-repeat,
    linear-gradient(180deg, #8548F0, #6226CC);
  box-shadow: 0 3px 0 #34117F;
  transition: transform var(--t) var(--spring);
}

.faq details[open] summary::after {
  background:
    linear-gradient(var(--white), var(--white)) 50% 50% / 14px 3px no-repeat,
    linear-gradient(180deg, #8548F0, #6226CC);
  transform: rotate(180deg);
}

.faq details > p,
.faq details > div {
  padding: 0 22px 22px;
  color: var(--text);
  max-width: 76ch;
}


/* ==========================================================================
   18  PROSE (legal pages) + DOCUMENTS - a clean sheet of paper
   ========================================================================== */

.prose {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(24px, 4.4vw, 60px);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .08), 0 6px 0 var(--paper-edge), var(--sh-2);
}

.prose > * + * { margin-top: var(--s-4); }

.prose h2,
.prose .h2 {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 2px dashed var(--line);
  font-size: clamp(1.45rem, 1vw + 1.15rem, 1.9rem);
}

.prose > h2:first-child { border-top: 0; padding-top: 0; }

.prose h3,
.prose .h3 {
  margin-top: var(--s-6);
  font-size: 1.25rem;
}

.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: var(--s-2); }
.prose li::marker { color: var(--comet); }
.prose .lead { max-width: none; }

.card .prose,
.plain {
  max-width: none;
  padding: 0;
  background: none;
  box-shadow: none;
}

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

.doc {
  max-width: 860px;
  margin-inline: auto;
}

.doc > * + * { margin-top: var(--s-5); }

.doc__card {
  padding: clamp(22px, 3.4vw, 40px);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .08), 0 6px 0 var(--paper-edge), var(--sh-2);
}

.doc__card > * + * { margin-top: var(--s-4); }
.doc__card h1 { font-size: clamp(2rem, 3vw + 1rem, 3rem); }
.doc__card h2 { font-size: clamp(1.4rem, 1vw + 1.15rem, 1.8rem); }
.doc__card ul, .doc__card ol { padding-left: 1.4em; }
.doc__card li + li { margin-top: var(--s-2); }
.doc__card li::marker { color: var(--comet); font-weight: 700; }

.doc__email {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.15rem;
}

.doc__small { font-size: .92rem; }

.doc__notice {
  padding: 16px 20px;
  border-radius: var(--r);
  border-left: 6px solid var(--comet);
  background: var(--lilac-wash);
  box-shadow: inset 0 0 0 1px rgba(106, 37, 214, .2);
  color: var(--plum);
}

.doc__foot {
  padding: 0 var(--s-2);
  font-size: .92rem;
  color: var(--text-soft);
}


/* ==========================================================================
   19  CTA POSTCARD + DIVIDERS
   ========================================================================== */

.cta-band {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px);
}

.cta-band > .wrap {
  position: relative;
  isolation: isolate;
  max-width: calc(1040px + var(--gutter) * 2);
}

/* A postcard: cream card, airmail stripes round the edge, a stamp in the corner. */
.cta {
  position: relative;
  padding: clamp(32px, 5vw, 64px);
  border-radius: 30px;
  overflow: hidden;
  background:
    radial-gradient(520px 320px at 100% 0%, rgba(255, 216, 115, .35), transparent 70%),
    radial-gradient(520px 340px at 0% 100%, rgba(201, 166, 255, .28), transparent 70%),
    var(--paper);
  box-shadow:
    inset 0 0 0 10px var(--paper),
    inset 0 0 0 16px transparent,
    0 8px 0 var(--paper-edge),
    var(--sh-3);
}

/* The airmail border, drawn as a frame of diagonal stripes. */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  padding: 10px;
  background: repeating-linear-gradient(-45deg, #E5434F 0 14px, var(--paper) 14px 22px, #3B78E0 22px 36px, var(--paper) 36px 44px);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: .85;
  pointer-events: none;
}

.cta > * { position: relative; z-index: 1; }
.cta > * + * { margin-top: var(--s-4); }
.cta > .btn-row { margin-top: var(--s-6); }
.cta .lead { max-width: 56ch; }

.cta--with-art,
.cta--with-toys { padding-right: clamp(32px, 32%, 400px); }

.cta > .floaters {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}

/* The mascot on a perforated stamp, with a postmark over its corner. */
.cta__art {
  position: absolute;
  right: clamp(30px, 5vw, 80px);
  top: 50%;
  z-index: 2;
  width: clamp(190px, 22vw, 268px);
  padding: 18px;
  transform: translateY(-50%) rotate(4deg);
  pointer-events: none;
  background: radial-gradient(circle at 7px 7px, transparent 5px, #FFFFFF 5.6px) -7px -7px / 14px 14px;
  filter: drop-shadow(0 14px 16px rgba(70, 36, 14, .3));
}

.cta__art::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 0;
  border-radius: 4px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 199, 125, .35), transparent 50%),
    radial-gradient(circle at 24px 30px, rgba(255, 255, 255, .8) 0 1px, transparent 1.6px) 0 0 / 60px 60px,
    linear-gradient(160deg, var(--night-violet), var(--night));
}

/* The postmark: two inked rings and three wavy cancel lines running off to the left. */
.cta__art::after {
  content: "";
  position: absolute;
  left: -120px;
  bottom: -10px;
  z-index: 3;
  width: 210px;
  height: 92px;
  opacity: .5;
  background:
    radial-gradient(circle at calc(100% - 46px) 50%, transparent 37px, #3B2A49 37.5px 39.5px, transparent 40px 44px, #3B2A49 44.5px 46px, transparent 46.5px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='92'%3E%3Cg fill='none' stroke='%233B2A49' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 30q15-10 30 0t30 0 30 0 30 0'/%3E%3Cpath d='M4 46q15-10 30 0t30 0 30 0 30 0'/%3E%3Cpath d='M4 62q15-10 30 0t30 0 30 0 30 0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 130px 92px no-repeat;
  transform: rotate(-10deg);
}

.cta__art img,
.cta__art picture { position: relative; z-index: 1; }
.cta__art img { animation: bob 6s ease-in-out infinite; }

@media (max-width: 760px) {
  .cta--with-toys { padding-right: clamp(32px, 5vw, 64px); }
  .cta--with-art { padding-right: clamp(28px, 5vw, 64px); padding-top: 196px; }
  .cta__art { top: 26px; right: 30px; width: 150px; padding: 14px; transform: rotate(5deg); }
  .cta__art::after { left: -112px; bottom: -22px; transform: rotate(-10deg) scale(.75); }
}

/* A dashed comet path between two sections. */
.trail {
  position: relative;
  z-index: 0;
  max-width: 1100px;
  height: clamp(44px, 7vw, 90px);
  margin: clamp(-24px, -2vw, -8px) auto clamp(-48px, -3vw, -16px);
  padding-inline: var(--gutter);
  pointer-events: none;
}

.trail svg { width: 100%; height: 100%; overflow: visible; }
.trail img,
.trail picture { display: none; }


/* ==========================================================================
   20  FORMS + CONTACT ROUTES + COMMUNITY
   ========================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

@media (max-width: 899px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}

.form {
  display: grid;
  gap: var(--s-5);
  padding: clamp(22px, 3vw, 36px);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .08), 0 6px 0 var(--paper-edge), var(--sh-2);
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5);
}

@media (max-width: 560px) {
  .form__row { grid-template-columns: minmax(0, 1fr); }
}

.field {
  display: grid;
  gap: var(--s-2);
}

.field__label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .98rem;
  color: var(--heading);
}

.req { color: var(--lava); }

.field__input,
.field__area {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 2px solid rgba(59, 42, 73, .22);
  border-radius: 15px;
  background-color: #FFFFFF;
  color: var(--plum);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.field__input::placeholder,
.field__area::placeholder { color: #75637F; }

.field__area {
  min-height: 170px;
  resize: vertical;
  line-height: 1.55;
}

select.field__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--comet-ink) 50%),
    linear-gradient(135deg, var(--comet-ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 15px) 50%;
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}

select.field__input option { color: var(--plum); background: var(--white); }

.field__input:hover,
.field__area:hover { border-color: rgba(59, 42, 73, .45); }

.field__input:focus-visible,
.field__area:focus-visible {
  outline: none;
  border-color: var(--comet-ink);
  box-shadow: 0 0 0 4px rgba(140, 60, 250, .2);
  border-radius: 15px;
}

.field__input.is-touched:invalid,
.field__area.is-touched:invalid {
  border-color: #D23A2F;
  box-shadow: 0 0 0 4px rgba(229, 57, 47, .16);
}

.form__hint {
  font-size: .93rem;
  color: var(--text-soft);
}

.form__note {
  padding: 14px 18px;
  border-radius: 15px;
  font-family: var(--font-ui);
  font-weight: 700;
  color: #14532D;
  background: #E3F7EA;
  box-shadow: inset 0 0 0 2px #86D3A2;
}

.form__note--error {
  color: #7F1D1D;
  background: #FDE6E3;
  box-shadow: inset 0 0 0 2px #F2A39A;
}

/* Contact routes: one row per mailbox, a toy-coloured tab on the left. */
.routes {
  display: grid;
  gap: var(--s-3);
}

.route {
  --stripe: var(--sky);
  position: relative;
  padding: 18px 20px 18px 34px;
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .08), 0 3px 0 var(--paper-edge);
}

.route::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  bottom: 16px;
  width: 8px;
  border-radius: 8px;
  background: var(--stripe);
}

.route:nth-child(6n + 2) { --stripe: #A66BFF; }
.route:nth-child(6n + 3) { --stripe: var(--green); }
.route:nth-child(6n + 4) { --stripe: var(--rose); }
.route:nth-child(6n + 5) { --stripe: var(--red); }
.route:nth-child(6n + 6) { --stripe: var(--apricot); }

.route h3 { font-size: 1.2rem; }
.route p { margin-top: 6px; font-size: .98rem; color: var(--text); }
.route a { font-family: var(--font-ui); font-weight: 700; }

/* Community: big friendly cards for Google Play, Instagram, Facebook and e-mail. */
.community {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.chan {
  --brand: var(--comet);
  --wash: var(--lilac-wash);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 24px 22px 22px;
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--text);
  background: linear-gradient(180deg, var(--wash), var(--paper) 62%);
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .08), var(--paper-lip), var(--sh-2);
  transition: transform var(--t) var(--spring), box-shadow var(--t) var(--ease);
}

.chan:nth-child(odd) { transform: rotate(-.8deg); }
.chan:nth-child(even) { transform: rotate(.8deg); }

.chan:hover,
.chan:focus-visible {
  transform: translateY(-6px) rotate(0deg);
  box-shadow: inset 0 0 0 2px var(--brand), var(--paper-lip), var(--sh-3);
}

.chan__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  color: var(--white);
  background: var(--brand);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 rgba(0, 0, 0, .25);
}

.chan__icon svg { width: 28px; height: 28px; }

.chan__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chan__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--heading);
}

.chan__handle {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .9rem;
  color: var(--text-soft);
  overflow-wrap: anywhere;
}

.chan p { font-size: .98rem; line-height: 1.5; }

.chan__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .95rem;
  color: var(--comet-ink);
}

.chan:hover .chan__go .arrow { transform: translateX(5px); }
.chan__go .arrow { transition: transform var(--t) var(--ease); }

.chan--play { --brand: #197923; --wash: #E6F6E8; }
.chan--ig { --brand: #C1358F; --wash: #FDE7F3; }
.chan--fb { --brand: #0866FF; --wash: #E6F0FE; }
.chan--mail { --brand: #E07A2E; --wash: #FFEEDD; }

/* Brand marks stay as the brands supply them: the Facebook logo on white, the Instagram glyph in one colour. */
.chan--ig .chan__icon,
.chan--fb .chan__icon {
  color: var(--brand);
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1.5px rgba(59, 42, 73, .12), 0 4px 0 var(--paper-edge);
}

.chan--fb .chan__icon svg { width: 34px; height: 34px; }
.chan--mail .chan__icon { color: var(--plum); background: var(--apricot); }

@media (max-width: 1023px) {
  .community { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .community { grid-template-columns: minmax(0, 1fr); }
  .chan { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: var(--s-4); }
  .chan__icon { flex: none; }
  .chan__title { flex: 1; min-width: 0; }
  .chan p { flex-basis: 100%; }
}


/* ==========================================================================
   21  FOOTER - the night outside, with stars, Comet and the ways to find us
   ========================================================================== */

.site-footer {
  --band: var(--night);
  position: relative;
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(56px, 6vw, 88px);
  background:
    radial-gradient(900px 420px at 90% 0%, rgba(140, 60, 250, .32), transparent 70%),
    radial-gradient(circle at 24px 36px, rgba(255, 255, 255, .85) 0 1px, transparent 1.7px) 0 0 / 320px 320px,
    radial-gradient(circle at 212px 158px, rgba(255, 226, 160, .85) 0 1.1px, transparent 1.9px) 0 0 / 320px 320px,
    radial-gradient(circle at 132px 254px, rgba(255, 255, 255, .5) 0 .8px, transparent 1.5px) 0 0 / 320px 320px,
    var(--night);
  color: var(--text);
}

/* A scalloped top edge, like the hem of a curtain. */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -17px;
  height: 18px;
  background: radial-gradient(circle at 18px 18px, var(--night) 17.5px, transparent 18.5px) 0 0 / 36px 18px repeat-x;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
}

.footer__brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4) var(--s-5);
  align-items: start;
  align-content: start;
}

.footer__brand .nav__logo { grid-column: 1 / -1; color: var(--white); }

.footer__mascot {
  width: 104px;
  margin: -6px 0 0 -10px;
}

.footer__mascot img { animation: bob 6.5s ease-in-out infinite; }

.footer__tag {
  max-width: 34ch;
  font-size: .98rem;
  color: var(--text-soft);
}

.footer__follow {
  grid-column: 1 / -1;
  display: grid;
  gap: var(--s-3);
}


.footer__head {
  margin-bottom: var(--s-3);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.footer__follow .footer__head { margin-bottom: 0; }

.footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--t-fast) var(--ease);
}

.footer__links a:hover {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--apricot);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
  margin-top: var(--s-7);
  padding-block: var(--s-5) var(--s-6);
  border-top: 1px solid var(--line);
  font-size: .92rem;
  color: var(--text-soft);
}

@media (max-width: 899px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   22  UTILITIES
   ========================================================================== */

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mt-5 { margin-top: var(--s-5) !important; }
.mt-6 { margin-top: var(--s-6) !important; }
.mt-7 { margin-top: var(--s-7) !important; }
.mb-4 { margin-bottom: var(--s-4) !important; }
.mb-6 { margin-bottom: var(--s-6) !important; }

.hide-sm { }

@media (max-width: 760px) {
  .hide-sm { display: none !important; }
}


/* ==========================================================================
   23  REVEAL + MOTION + REDUCED MOTION + PRINT
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .floater { transform: none; }
}

@media print {
  *,
  *::before,
  *::after {
    color: #000 !important;
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    animation: none !important;
    transition: none !important;
  }

  .site-header,
  .skip,
  .floaters,
  .trail,
  .backdrop,
  .hero__window,
  .banner__shade,
  .toy-heap,
  .cta__art,
  .cta-band .btn-row,
  .footer__mascot,
  .footer__follow,
  .rail__controls,
  .path__trail,
  .card__icon,
  .cross,
  .die,
  .status::before,
  .eyebrow::before,
  .lb { display: none !important; }

  html,
  body { background: #fff !important; }

  a { text-decoration: underline; }

  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .section--tint::before, .section--tint::after,
  .section--dark::before, .section--dark::after,
  .site-footer::before, .cta::before { display: none !important; }

  .section,
  .cta-band { padding-block: 16px; }

  .prose,
  .doc__card,
  .card,
  .cta,
  .board__sheet { border: 1px solid #999; }

  .rail__track {
    display: flex;
    flex-wrap: wrap;
    overflow: visible;
  }

  .rules__toggle { display: none !important; }
  .js .rules:not(.is-open) > .steps { display: grid !important; }

  h2, h3 { break-after: avoid; }
}


/* ==========================================================================
   24  SMALL EXTRAS
   ========================================================================== */

[tabindex="-1"]:focus-visible { outline: none; }

/* Star bullets. */
.ticks {
  display: grid;
  gap: var(--s-3);
}

.ticks li {
  position: relative;
  padding-left: 36px;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .12em;
  width: 24px;
  height: 24px;
  background: linear-gradient(180deg, #FFE38A, #FFB627);
  clip-path: polygon(50% 2%, 62% 35%, 98% 36%, 69% 58%, 80% 93%, 50% 72%, 20% 93%, 31% 58%, 2% 36%, 38% 35%);
}

.figure {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--s-3);
}

.figure figcaption {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .95rem;
  color: var(--text-soft);
  text-align: center;
}

.float-slow img { animation: bob 6.5s ease-in-out infinite; }

/* The two redirect pages (privacy-policy.html, terms-of-service.html). */
.stub {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--gutter);
  text-align: center;
  font-family: var(--font-ui);
  font-weight: 700;
}

/* The 404 page: one screen tall, never taller than it needs to be. */
.banner--404 {
  display: flex;
  align-items: center;
  min-height: min(calc(100vh - var(--header-h)), 720px);
  min-height: min(calc(100svh - var(--header-h)), 720px);
}

.banner--404 .banner__inner { width: 100%; padding-top: var(--s-6); }

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.card__top img { width: 72px; height: 72px; filter: drop-shadow(0 10px 8px rgba(70, 36, 14, .28)); }

.note {
  max-width: 70ch;
  margin-inline: auto;
  text-align: center;
  color: var(--text-soft);
}


/* ==========================================================================
   25  PHONE: keep the long pages short
   ========================================================================== */

@media (max-width: 639px) {
  .shots {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding: 14px var(--gutter) 28px;
    scrollbar-width: none;
  }

  .shots::-webkit-scrollbar { display: none; }

  .shot {
    flex: 0 0 58%;
    scroll-snap-align: start;
  }
}

@media (max-width: 560px) {
  .features--3 {
    row-gap: var(--s-4);
    margin-top: 0;
  }

  .features--3 .feature {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--s-4);
    align-items: center;
    padding: 18px;
  }

  .features--3 .feature__icon {
    width: 72px;
    margin: 0;
  }

  .footer__col:last-child { grid-column: 1 / -1; }
}


/* ==========================================================================
   25b  DETAILS - layout and accessibility fixes found by the audit
   ========================================================================== */

/* A row that is a grid on wide screens (.grid--3) and a swipe rail only on a phone. */
@media (min-width: 640px) {
  .rail--phone > .rail__track.grid { grid-auto-flow: row; grid-auto-columns: auto; }
}

.card__top picture { flex: none; }
.badge { white-space: nowrap; }

/* Five game photos side by side on a wide screen, no cut-off sixth sliver. */
@media (min-width: 1100px) {
  .rail[data-label="games"] .rail__track { grid-auto-columns: minmax(0, 1fr); }
}

/* Footer: e-mail addresses never split; three columns until there is room for four. */
.footer__links a { min-height: 44px; }
.footer__links a[href^="mailto:"] { overflow-wrap: normal; white-space: nowrap; }

@media (max-width: 1099px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__links a[href^="mailto:"] { white-space: normal; overflow-wrap: anywhere; }
}

/* Text zoomed to 200% on a small phone: the wordmark shrinks before the menu button leaves the screen. */
.nav__logo { min-width: 0; }
.nav__logo-text { overflow: hidden; text-overflow: ellipsis; }
.nav__burger { flex: none; }

@media (max-width: 420px) {
  .nav__logo-text { font-size: clamp(1.15rem, 1rem + 1.5vw, 1.5rem); }
}

/* The open phone menu holds the page still behind it. */
@media (max-width: 899px) {
  body.nav-open { overflow: hidden; }
}

/* 14px is the floor for labels. */
.eyebrow,
.footer__head,
.gtile__tag,
.game__kicker,
.mode__note { font-size: .875rem; }
.badge { font-size: .8125rem; }

/* Comfortable reading length on the legal and document pages. */
.prose > p,
.prose > ul,
.prose > ol,
.doc__card > p,
.doc__card > ul,
.doc__card > ol { max-width: 70ch; }

@media (max-width: 480px) {
  .prose { padding: 22px 18px; }
  .doc__card { padding: 22px 18px; }
}

/* Long centred notes read better left-aligned on a phone. */
@media (max-width: 639px) {
  .note { text-align: left; }
}


/* ==========================================================================
   26  PAGE EXTRAS - small additions for single pages
   ========================================================================== */

/* --- from games-about.css --- */
/* games.html + about.html only. */

/* About banner: the pill that links to Google Play. */
a.pill {
  text-decoration: none;
  transition: box-shadow var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

a.pill:hover {
  color: var(--heading);
  box-shadow: inset 0 0 0 2px var(--comet-ink);
}


/* Games "In the lab": .rail__track flows its cards into one row; from tablet up,
   let .grid--3 wrap them into rows (3 + 3 wide, 2 + 2 + 2 on a tablet). */
@media (min-width: 640px) {
  #lab .rail__track { grid-auto-flow: row; }
}

/* --- from legal-misc.css --- */
/* account-deletion.html (the only page with html.sysfont): its CSP allows no data: images
   (img-src 'self'), so the inline paper-grain texture is left out there. */
html.sysfont { --grain: none; }

/* contact.html: the "Follow us" row under "Reach us directly".
   The icons reuse .social / .social__link from css/style.css. */
.follow-us {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-6);
}

.follow-us__label {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}