/* GameCache — site.css. Hand-written. The reduced-motion state is the default;
   every transition and keyframe lives in the one no-preference block at the end. */

@font-face { font-family: "Lilita One"; src: url(/assets/fonts/lilita-one-latin.woff2) format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lilita Fallback"; src: local("Arial Rounded MT Bold"), local("Arial Black");
             size-adjust: 94%; ascent-override: 92%; }

/* ------------------------------------------------------------------ tokens */
:root {
  color-scheme: dark;
  /* ground family (icon navy) */
  --navy-900: #092146;
  --navy-800: #12153B;
  --navy-700: #19254E;
  --navy-650: #1E2C58;
  --navy-500: #28436B;
  --navy-450: #2C516D;
  --glow:     #2C6F91;
  /* text */
  --cream: #F7F3EA;
  --ink:   #E4E6F2;
  --muted: #BFC3D9;
  --faint: #8E95B5;
  --faint-ground: #A9AFC9; /* faint text on the bare ground, where the lamp brightens it */
  /* candy */
  --tomato: #D9453F; --sky: #27B1EF; --aqua: #62E4FA; --sun: #F9BC1B; --sun-top: #FFD23F;
  --orange: #E97424; --apple: #3FBF5A;
  /* extended, genre dots only */
  --lilac: #B678F0; --coral: #FF8A5B; --mint: #2ED3B7;
  /* the app's own UI — inside phone frames and tile backs only */
  --screen: #0B0F1F; --card: #141A30; --t-white: #FFFFFF; --t-muted: #9AA3BE; --t-faint: #6B738F;
  /* radii */
  --r-hero: 28px; --r-card: 24px; --r-tile: 18px; --r-small: 14px; --r-pill: 999px;
  /* shadows */
  --sh-toy: inset 0 1px 0 rgba(255,255,255,0.14), inset 0 -1px 0 rgba(0,0,0,0.28),
            0 1px 0 #0B1733, 0 10px 24px -8px rgba(0,0,0,0.55), 0 30px 60px -30px rgba(0,0,0,0.60);
  --sh-toy-hover: inset 0 1px 0 rgba(255,255,255,0.20), inset 0 -1px 0 rgba(0,0,0,0.28),
            0 1px 0 #0B1733, 0 16px 30px -10px rgba(0,0,0,0.60), 0 40px 70px -30px rgba(0,0,0,0.65);
  --sh-chip: 0 2px 0 rgba(9,33,70,0.40), 0 8px 16px -8px rgba(0,0,0,0.50);
  --focus: 3px solid var(--aqua);
  /* type */
  --display: "Lilita One", "Lilita Fallback", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-h1: clamp(40px, 22px + 4.5vw, 84px);
  --fs-wordmark: clamp(36px, 20px + 3vw, 56px);
  --fs-h2: clamp(32px, 18px + 2.6vw, 52px);
  --fs-answer: clamp(40px, 22px + 3.5vw, 64px);
  --fs-h3: clamp(22px, 16px + 1.2vw, 30px);
  --fs-lede: clamp(17px, 15px + 0.5vw, 21px);
  --fs-body: clamp(16px, 15px + 0.2vw, 17px);
  --fs-small: 14px;
  --fs-micro: 13px;
}
:root {
  --g-arcade: var(--tomato);
  --g-puzzle: var(--sky);
  --g-card: var(--apple);
  --g-casino: var(--sun);
  --g-word: var(--orange);
  --g-brain: var(--aqua);
  --g-strategy: var(--lilac);
  --g-sports: var(--coral);
  --g-idle: var(--mint);
}
[data-genre="arcade"] { --c: var(--g-arcade); }
[data-genre="puzzle"] { --c: var(--g-puzzle); }
[data-genre="card"] { --c: var(--g-card); }
[data-genre="casino"] { --c: var(--g-casino); }
[data-genre="word"] { --c: var(--g-word); }
[data-genre="brain"] { --c: var(--g-brain); }
[data-genre="strategy"] { --c: var(--g-strategy); }
[data-genre="sports"] { --c: var(--g-sports); }
[data-genre="idle"] { --c: var(--g-idle); }

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: 56px; } /* the sticky header; tiles add the toolbar below */
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  background: var(--navy-800); color: var(--ink);
  font: 400 var(--fs-body)/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
img { max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: inherit; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
           clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 1260px; margin-inline: auto; padding-inline: 20px; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: var(--r-pill);
        background: var(--cream); color: var(--navy-900); font: 800 14px/1 var(--body); text-decoration: none; }
.skip:focus { top: 12px; outline: var(--focus); outline-offset: 3px; }

.eyebrow { font: 700 12px/1.3 var(--body); text-transform: uppercase; letter-spacing: 0.14em; color: var(--faint-ground); }
.h2 { margin-top: 10px; font: 400 var(--fs-h2)/0.95 var(--display); letter-spacing: 0; color: var(--cream);
      text-shadow: 0 2px 0 rgba(9,33,70,0.60); text-wrap: balance; }
.lede { font-size: var(--fs-lede); line-height: 1.45; color: var(--ink); }
.ulink { color: var(--sky); text-decoration: none;
         background: linear-gradient(var(--sky), var(--sky)) no-repeat 0 100% / 100% 1px; padding-bottom: 1px; }
.ulink:hover { background-size: 100% 2px; }
a:focus-visible, button:focus-visible { outline: var(--focus); outline-offset: 3px; }

/* ------------------------------------------------------------ ground, lamp */
.ground {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: #12153B;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.035 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"),
    radial-gradient(320px 320px at 85% 12%,  rgba(39,177,239,0.10) 0%, rgba(39,177,239,0.05) 45%, transparent 70%),
    radial-gradient(360px 360px at 10% 70%,  rgba(233,116,36,0.09)  0%, rgba(233,116,36,0.04)  45%, transparent 70%),
    radial-gradient(280px 280px at 92% 78%,  rgba(217,69,63,0.08)   0%, rgba(217,69,63,0.04)   45%, transparent 70%),
    linear-gradient(180deg, #19254E 0%, #12153B 45%, #092146 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}
.lamp {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1100px 760px at 14% -6%, rgba(44,111,145,0.62) 0%, rgba(44,111,145,0.18) 42%, transparent 66%);
  will-change: transform;
}

/* ------------------------------------------------------------------ candy */
.candy {
  position: relative; display: inline-block; font-family: var(--display); line-height: 0.95; letter-spacing: 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding: 0.08em 0.06em; margin: -0.08em -0.06em;
}
.candy-gold { background-image: linear-gradient(180deg, #FFD23F 0%, #F9BC1B 46%, #E97424 100%); }
.candy-sky  { background-image: linear-gradient(180deg, #8FF0FF 0%, #62E4FA 40%, #27B1EF 100%); }
.candy::before {
  content: attr(data-text); content: attr(data-text) / ""; position: absolute; inset: 0; padding: inherit; z-index: -1;
  color: #092146; -webkit-text-stroke: 0.13em #092146; paint-order: stroke fill;
  filter: drop-shadow(0 0.05em 0 #061831) drop-shadow(0 0.18em 0.45em rgba(0,0,0,0.50));
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .candy { color: #F9BC1B; background-image: none; }
  .candy-sky { color: #62E4FA; }
  .candy::before { display: none; }
}
@supports not (paint-order: stroke fill) {
  .candy::before { -webkit-text-stroke: 0; text-shadow: 0 0 0.06em #092146, 0 0 0.06em #092146, 0.06em 0 0 #092146, -0.06em 0 0 #092146, 0 0.06em 0 #092146, 0 -0.06em 0 #092146; }
}
/* the stroke layer must paint below the gradient fill: give it a stacking context of its own to sit in */
.h1-line, .wordmark { display: inline-block; isolation: isolate; }

/* -------------------------------------------------------------------- toy */
.toy {
  background: linear-gradient(180deg, var(--navy-650) 0%, var(--navy-700) 100%);
  border-radius: var(--r-card);
  box-shadow: var(--sh-toy);
}

/* ------------------------------------------------------------------- chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
        border-radius: var(--r-pill); background: var(--cream); color: var(--navy-900);
        font: 800 13px/1 var(--body); text-transform: uppercase; letter-spacing: 0.06em;
        box-shadow: var(--sh-chip), inset 0 1px 0 #FFFFFF; }
.chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex: none; }
.chip .ban { position: relative; width: 12px; height: 12px; border-radius: 50%; border: 2.4px solid var(--tomato); flex: none; }
.chip .ban::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.4px; height: 12px;
        background: var(--tomato); transform: translate(-50%,-50%) rotate(45deg); }

/* ------------------------------------------------------------------- pills */
.pill { display: inline-flex; align-items: center; gap: 0; height: 40px; padding: 0 14px 0 12px; white-space: nowrap;
        border-radius: var(--r-pill); background: var(--navy-700); color: var(--cream);
        border: 1px solid rgba(255,255,255,0.10); font: 700 14px/1 var(--body);
        box-shadow: 0 2px 0 #0B1733, 0 8px 14px -8px rgba(0,0,0,0.55); cursor: pointer; text-decoration: none; }
.pill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 8px; flex: none; }
.pill .n { font-weight: 600; color: var(--faint); white-space: pre; }
.pill[data-genre="all"] { --c: var(--cream); }
.pill.is-active, .pill:has(input:checked) { background: var(--cream); color: var(--navy-900); }
.pill.is-active .n, .pill:has(input:checked) .n { color: #4E5675; }
.pill[data-genre="all"]:has(input:checked) { --c: var(--navy-900); }
.pill:has(input:focus-visible) { outline: var(--focus); outline-offset: 3px; }

/* ------------------------------------------------------------ store button */
.store { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 14px; white-space: nowrap;
         border-radius: var(--r-pill); text-decoration: none; color: var(--cream);
         background: linear-gradient(180deg, #0F2B57 0%, #092146 100%);
         border: 1px solid rgba(255,255,255,0.12);
         box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 0 #05152E, 0 14px 24px -10px rgba(0,0,0,0.60); }
.store .glyph { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.25); }
.glyph-ios { background: var(--sky); } .glyph-play { background: var(--apple); }
.store .lbl { display: flex; flex-direction: column; line-height: 1.05; }
.store small { font: 700 11px/1 var(--body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.store b { font: 800 17px/1.1 var(--body); color: var(--cream); }
.store:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 6px 0 #05152E, 0 18px 28px -10px rgba(0,0,0,0.65); }
.store:focus-visible { outline: var(--focus); outline-offset: 3px; }
.store.is-mine { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 6px 0 #05152E, 0 14px 24px -10px rgba(0,0,0,0.60), 0 0 0 2px var(--sun); }
.store.compact { height: 36px; padding: 0 14px; gap: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 3px 0 #05152E; }
.store.compact .glyph, .store.compact small { display: none; }
.store.compact b { font-size: 13px; }
.store.compact.is-mine { box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 3px 0 #05152E, 0 0 0 2px var(--sun); }
.cta { display: flex; flex-direction: column; gap: 10px; }
.cta .store { width: 100%; justify-content: center; }

/* ------------------------------------------------------------------ header */
.site-head { position: sticky; top: 0; z-index: 50; height: 56px;
             background: rgba(18,21,59,0.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
             border-bottom: 1px solid rgba(255,255,255,0.08); }
html.js .home .site-head:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; }
.head-row { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 16px; }
.brand { position: relative; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--cream); min-width: 0; }
.brand img { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.brand-name { font: 400 20px/1 var(--display); text-shadow: 0 2px 0 rgba(9,33,70,0.60); }
.nav { display: none; }
.head-stores { display: flex; gap: 8px; flex: none; }

/* -------------------------------------------------------------------- hero */
/* flow-root keeps the spill's negative bottom margin inside the hero, so the hero ends exactly where Offline
   begins and the two floor overlays never stack (a collapsed margin would overlap them by 40px) */
.hero { position: relative; isolation: isolate; display: flow-root; padding-top: 20px; overflow-x: clip; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
               background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.26) 100%); }
.icon-row { display: flex; align-items: center; gap: 16px; }
.hero-icon { width: 96px; height: 96px; border-radius: 24px; flex: none;
             filter: drop-shadow(0 12px 18px rgba(39,177,239,0.28)) drop-shadow(0 22px 34px rgba(233,116,36,0.22)); }
.wordmark { font-size: var(--fs-wordmark); line-height: 0.95; white-space: nowrap; }
.h1 { margin-top: 16px; font: 400 var(--fs-h1)/0.95 var(--display); letter-spacing: 0; text-wrap: balance; }
.hero .lede { margin-top: 14px; max-width: 34ch; }
.hero .cta { margin-top: 18px; }
.fine { margin-top: 10px; font-size: var(--fs-micro); color: var(--faint-ground); }
.hero .chips { margin-top: 14px; }

/* the spill: one markup, two compositions */
.spill { position: relative; z-index: 2; height: 150px; margin: 28px -20px -40px; --sx: max(0px, calc((100% - 430px) / 2)); }
.spill-glow { position: absolute; inset: -10% -5%; z-index: 0;
              background: radial-gradient(60% 50% at 50% 50%, rgba(44,111,145,0.30), transparent 70%); }
.sp { position: absolute; width: 112px; height: 84px; border-radius: 14px; object-fit: cover; display: block;
      border-top: 1px solid rgba(255,255,255,0.18); box-shadow: var(--sh-toy); background: var(--navy-700);
      transform: rotate(var(--r, 0deg)) scale(var(--s, 1)); }
.sp-1 { left: calc(-12px + var(--sx)); top: 40px;  --r: -12deg; --s: 0.95; z-index: 3; }
.sp-2 { left: calc(68px + var(--sx));  top: 12px;  --r: 5deg;   --s: 1;    z-index: 4; }
.sp-3 { left: calc(160px + var(--sx)); top: 44px;  --r: -6deg;  --s: 1.05; z-index: 5; }
.sp-4 { left: calc(252px + var(--sx)); top: 8px;   --r: 9deg;   --s: 0.9;  z-index: 3; }
.sp-5 { left: calc(336px + var(--sx)); top: 36px;  --r: -10deg; --s: 1;    z-index: 4; }
.sp-6 { left: calc(40px + var(--sx));  top: 108px; --r: 7deg;   --s: 0.85; z-index: 2; }
.sp-7 { left: calc(190px + var(--sx)); top: 118px; --r: -4deg;  --s: 0.9;  z-index: 2; }
.sp-8 { left: calc(300px + var(--sx)); top: 112px; --r: 11deg;  --s: 0.85; z-index: 2; }
.sp-9, .sp-10, .sp-11, .sp-12, .sp-13, .sp-14, .sp-ghost { display: none; }
.spill .prop-die { left: calc(322px + var(--sx)); top: 92px; z-index: 6; --pw: 44px; }
.spill .prop-q { left: calc(10px + var(--sx)); top: 0; z-index: 6; --pw: 36px; }
.spill .prop-card, .spill .prop-chip { display: none; }

/* ------------------------------------------------------------------- props */
.prop { position: absolute; box-shadow: 0 10px 18px -6px rgba(0,0,0,0.6);
        translate: var(--px, 0px) var(--py, 0px); }
.prop::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
               background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.45), transparent 55%);
               background-size: 140% 140%; background-position: var(--hx, 0) var(--hy, 0); }
.prop-die { --pw: 64px; width: var(--pw); height: var(--pw); border-radius: 30%; rotate: -12deg;
  background:
    radial-gradient(6% 6% at 25% 25%, var(--tomato) 96%, transparent 100%),
    radial-gradient(6% 6% at 75% 25%, var(--tomato) 96%, transparent 100%),
    radial-gradient(6% 6% at 50% 50%, var(--tomato) 96%, transparent 100%),
    radial-gradient(6% 6% at 25% 75%, var(--tomato) 96%, transparent 100%),
    radial-gradient(6% 6% at 75% 75%, var(--tomato) 96%, transparent 100%),
    linear-gradient(180deg, #FFFFFF, #E9E6DD); }
.prop-card { --pw: 64px; width: var(--pw); height: calc(var(--pw) * 1.375); border-radius: 8px; background: var(--cream); rotate: 12deg; }
.prop-card .a { position: absolute; left: 9%; top: 5%; font: 800 14px/1 var(--body); color: var(--tomato); }
.prop-card .heart { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; translate: -50% -50%; }
.prop-chip { --pw: 60px; width: var(--pw); height: var(--pw); border-radius: 50%; background: var(--tomato); }
.prop-chip .rim { position: absolute; inset: 0; border-radius: 50%;
                  background: repeating-conic-gradient(#F7F3EA 0 14deg, transparent 14deg 30deg);
                  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 8px), #000 calc(100% - 7px));
                  mask: radial-gradient(circle closest-side, transparent calc(100% - 8px), #000 calc(100% - 7px)); }
.prop-chip .ring { position: absolute; inset: 20%; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.7); }
.prop-q { --pw: 52px; width: var(--pw); height: var(--pw); border-radius: 12px; background: var(--tomato); rotate: -8deg;
          display: grid; place-items: center;
          box-shadow: inset 0 3px 0 rgba(255,255,255,0.35), 0 10px 18px -6px rgba(0,0,0,0.6); }
.prop-q .q { font: 400 calc(var(--pw) * 0.6)/1 var(--display); color: var(--sun-top);
             -webkit-text-stroke: 2px #092146; paint-order: stroke fill; }

/* ----------------------------------------------------------------- offline */
/* the hero's floor shading carries across the boundary and dissolves here: one continuous ground, no band */
.offline { padding: 120px 0 64px; text-align: center; background: linear-gradient(180deg, rgba(0,0,0,0.26) 0, transparent 240px); }
.offline-col { max-width: 840px; }
.offline .lede { max-width: 34ch; margin: 18px auto 0; }
.chips-centred { justify-content: center; margin-top: 22px; }
.second { margin-top: 20px; font-size: 15px; color: var(--muted); }

/* ----------------------------------------------------------------- answers */
.answers { padding: 64px 0; }
.heading-block { max-width: 40rem; }
.answer-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.answer { position: relative; padding: 18px 16px 20px; overflow: hidden; }
.answer::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 4px; background: var(--bar); }
.answer .word { font: 400 var(--fs-answer)/0.95 var(--display); color: var(--cream); text-shadow: 0 2px 0 rgba(9,33,70,0.60); text-wrap: balance; }
.answer .q { margin-top: 8px; font: 700 12px/1.3 var(--body); text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
.answer .a { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.answer .a a { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------------- shelf */
.shelf { padding: 64px 0 56px; }
.shelf-lede { margin-top: 14px; max-width: 62ch; }
.nowrap { white-space: nowrap; }

.toolbar { position: sticky; top: 56px; z-index: 40; background: var(--navy-800); margin-top: 24px; padding: 8px 0 6px;
           border-bottom: 1px solid rgba(255,255,255,0.06); }
.search { position: relative; margin: 0 0 2px; }
.search input { width: 100%; height: 48px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.10);
                background: linear-gradient(180deg, var(--navy-650), var(--navy-700)); box-shadow: var(--sh-toy);
                color: var(--cream); font: 400 16px/1 var(--body); padding: 0 46px 0 42px; -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--faint); opacity: 1; }
.search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search input:focus-visible { outline: var(--focus); outline-offset: 2px; }
.search .glass { position: absolute; left: 16px; top: 50%; width: 13px; height: 13px; translate: 0 -55%;
                 border: 2px solid var(--faint); border-radius: 50%; pointer-events: none; }
.search .glass::after { content: ""; position: absolute; left: 9px; top: 9px; width: 7px; height: 2px; background: var(--faint); border-radius: 1px; rotate: 45deg; transform-origin: 0 50%; }
.search .clear { position: absolute; right: 8px; top: 50%; translate: 0 -50%; width: 32px; height: 32px; border-radius: 50%; border: 0;
                 background: rgba(255,255,255,0.10); color: var(--cream); font: 700 14px/1 var(--body); cursor: pointer; display: grid; place-items: center; }
.search .clear:hover { background: rgba(255,255,255,0.18); }
.toolbar-row { position: relative; }
.pills-wrap { position: relative; margin: 0 -20px; }
.pills-wrap::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 8px; pointer-events: none;
                     background: linear-gradient(90deg, rgba(18,21,59,0), var(--navy-800)); }
.pills { display: flex; gap: 8px; overflow-x: auto; padding: 8px 20px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pills::-webkit-scrollbar { display: none; }
.status-row { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; font-size: var(--fs-micro); }
.status { color: var(--ink); }
.hint { color: var(--muted); }

.empty { margin-top: 16px; padding: 32px; text-align: center; }
.empty-title { font: 700 17px/1.3 var(--body); color: var(--cream); }
.empty-body { margin-top: 6px; font-size: var(--fs-small); color: var(--muted); }
.empty-clear { margin-top: 16px; }

.wall { margin-top: 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tile { position: relative; perspective: 900px; border-radius: var(--r-tile); }
/* anchors and focus land below the sticky toolbar (121px under the header) with a gap; the button is what focus scrolls */
.tile, .tile-btn, .empty { scroll-margin-top: 134px; }
.tile-inner { position: relative; border-radius: var(--r-tile); }
.tile-front, .tile-back { border-radius: var(--r-tile); overflow: hidden; }
.tile-front { background: linear-gradient(180deg, var(--navy-650), var(--navy-700)); box-shadow: var(--sh-toy); }
.tile-front img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.tile-front .rule { height: 3px; background: var(--accent); opacity: 0.9; }
.tile-front .body { padding: 10px 12px 12px; }
.tile-front .kicker { font: 800 10px/1 var(--body); text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
.tile-front .name { margin-top: 4px; font: 800 15px/1.2 var(--body); letter-spacing: -0.01em; color: var(--cream);
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-back { position: absolute; inset: 0; background: var(--card); border-top: 4px solid var(--accent); padding: 12px;
             display: flex; flex-direction: column; gap: 8px; opacity: 0; }
.tile-back .tag { font: 500 13px/1.4 var(--body); color: var(--t-white); }
.tile-back .rec { font: 800 11px/1.3 var(--body); text-transform: uppercase; letter-spacing: 0.08em; color: var(--t-muted); margin-top: auto; }
.tile-back .diff { font: 600 11px/1.3 var(--body); color: var(--t-muted); }
.tile-front, .tile-back { transition: opacity 150ms ease; }
/* JS on: the unflipped back is hidden from assistive tech too, not just faded; visibility flips after the crossfade */
html.js .tile:not(.is-flipped) .tile-back { visibility: hidden; }
html.js .tile-back { transition: opacity 150ms ease, visibility 0s linear 150ms; }
html.js .tile.is-flipped .tile-back { transition-delay: 0s; }
.tile.is-flipped .tile-back { opacity: 1; }
.tile.is-flipped .tile-front { opacity: 0; }
.tile-btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none;
            border-radius: var(--r-tile); cursor: pointer; }
.tile.is-flipped .tile-btn { outline: 2px solid var(--accent); }
.tile-btn:focus-visible { outline: var(--focus); outline-offset: 3px; }
.tile.is-flipped .tile-btn:focus-visible { outline: var(--focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .tile:has(.tile-btn:hover) .tile-front { box-shadow: var(--sh-toy-hover); }
  .tile:has(.tile-btn:hover) .rule { height: 5px; }
}
/* no JS: the back is a plain block under the front; nothing is hidden and there is nothing to press */
html:not(.js) .tile-front { border-radius: var(--r-tile) var(--r-tile) 0 0; }
html:not(.js) .tile-back { position: static; opacity: 1; border-top: 0; border-radius: 0 0 var(--r-tile) var(--r-tile); margin-top: -1px; }
html:not(.js) .tile-btn { display: none; }
html:not(.js) .tile-inner { height: 100%; display: flex; flex-direction: column; }
html:not(.js) .tile-back { flex: 1; }
/* the count and the tap hint are JS-owned; without JS the pills speak for themselves */
html:not(.js) .status-row { display: none; }
/* genre filter without JS: one :has() rule per genre, written by the build */
.shelf:has(#g-arcade:checked) .tile:not([data-genre="arcade"]) { display: none; }
.shelf:has(#g-puzzle:checked) .tile:not([data-genre="puzzle"]) { display: none; }
.shelf:has(#g-card:checked) .tile:not([data-genre="card"]) { display: none; }
.shelf:has(#g-casino:checked) .tile:not([data-genre="casino"]) { display: none; }
.shelf:has(#g-word:checked) .tile:not([data-genre="word"]) { display: none; }
.shelf:has(#g-brain:checked) .tile:not([data-genre="brain"]) { display: none; }
.shelf:has(#g-strategy:checked) .tile:not([data-genre="strategy"]) { display: none; }
.shelf:has(#g-sports:checked) .tile:not([data-genre="sports"]) { display: none; }
.shelf:has(#g-idle:checked) .tile:not([data-genre="idle"]) { display: none; }
.under-grid { margin-top: 24px; text-align: center; font-size: var(--fs-small); color: var(--muted); }

/* ----------------------------------------------------------------- screens */
.screens { padding: 64px 0; overflow-x: clip; }
.screens-head .lede { margin-top: 12px; max-width: 60ch; }
.rail-ctl { display: none; }
.rail-wrap { margin-top: 20px; }
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 20px;
        padding: 8px 20px 24px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline: var(--focus); outline-offset: -3px; border-radius: 8px; }
.rail li { flex: 0 0 244px; scroll-snap-align: start; }
.rail figure { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rail figcaption { font-size: var(--fs-small); color: var(--muted); text-align: center; }
.frame { --w: 220px; position: relative; width: calc(var(--w) + 2 * (0.046 * var(--w)));
         padding: calc(0.008 * var(--w)); border-radius: calc(0.139 * var(--w)); background: var(--navy-900);
         box-shadow: var(--sh-toy), 0 0 0 2px rgba(249,188,27,0.18), inset 1px 1px 0 rgba(249,188,27,0.35); }
.frame .rim { padding: calc(0.016 * var(--w)); border-radius: calc(0.131 * var(--w));
              background: linear-gradient(180deg, #FFD23F, #E97424); opacity: 0.9; }
.frame .bezel { position: relative; padding: calc(0.022 * var(--w)); border-radius: calc(0.115 * var(--w)); background: #000; }
.frame .bezel::after { content: ""; position: absolute; left: 50%; top: calc(0.04 * var(--w)); translate: -50% 0;
                       width: calc(0.42 * var(--w)); height: calc(0.075 * var(--w)); border-radius: var(--r-pill); background: #000; }
.frame img { display: block; width: var(--w); height: auto; aspect-ratio: 660 / 1434; object-fit: cover;
             border-radius: calc(0.085 * var(--w)); background: var(--screen); }
.rail-dots { display: flex; justify-content: center; gap: 8px; }
.rail-dots li { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.rail-dots li.is-on { background: var(--sun); }
.rail-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.10); cursor: pointer;
            background: linear-gradient(180deg, var(--navy-650), var(--navy-700)); box-shadow: var(--sh-toy);
            color: var(--cream); display: grid; place-items: center; }
.rail-btn:hover { box-shadow: var(--sh-toy-hover); }
.rail-readout { font: 700 13px/1 var(--body); letter-spacing: 0.06em; color: var(--muted); min-width: 4em; text-align: center; }

/* ------------------------------------------------------------------ closer */
.closer { position: relative; isolation: isolate; padding: 80px 0 40px; overflow: clip; text-align: center; }
.strip-wrap { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
             -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 100px); mask-image: linear-gradient(180deg, transparent 0, #000 100px); }
.strip-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,21,59,0.2), rgba(18,21,59,0.9)); }
.strip { position: absolute; left: 50%; top: -20px; translate: -50% 0; rotate: -4deg; opacity: 0.22;
         display: grid; grid-template-columns: repeat(7, 112px); gap: 10px; }
.strip img { display: block; width: 112px; height: 84px; border-radius: 12px; object-fit: cover; }
.closer-stage { position: relative; }
.closer-card { position: relative; z-index: 1; border-radius: var(--r-hero); padding: 32px 20px; }
.closer-icon { position: relative; width: 96px; height: 96px; margin: 0 auto 18px; }
.closer-icon img { display: block; width: 96px; height: 96px; border-radius: 24px;
                   filter: drop-shadow(0 12px 18px rgba(39,177,239,0.28)) drop-shadow(0 22px 34px rgba(233,116,36,0.22)); }
.closer-stage .prop-die { right: -12px; top: -22px; z-index: 0; --pw: 56px; }
.closer-stage .prop-chip { left: -12px; bottom: -18px; z-index: 0; --pw: 56px; }
.closer-stage .prop-card { display: none; }
.closer-text .lede { margin: 12px auto 0; max-width: 34rem; font-size: 16px; }
.closer .cta { margin-top: 22px; }
.facts { margin-top: 18px; font: 700 12px/1.7 var(--body); text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
.support { margin-top: 12px; font-size: var(--fs-small); color: var(--muted); }

/* ------------------------------------------------------------------ footer */
.site-foot { border-top: 1px solid rgba(255,255,255,0.08); padding: 24px 0 calc(24px + env(safe-area-inset-bottom));
             font-size: var(--fs-micro); color: var(--faint-ground); }
.foot-row { display: flex; flex-direction: column; gap: 12px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 16px; }
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }
.trademark { margin-top: 14px; }

/* ------------------------------------------------------------------- pages */
.page-main { padding: 48px 0 64px; }
.page-col { width: 100%; max-width: 720px; margin-inline: auto; padding-inline: 20px; }
.page-card { padding: 24px; font-size: 17px; line-height: 1.6; color: var(--ink); }
.page-card p { max-width: 62ch; }
.page-card p + p { margin-top: 1em; }
.page-title { margin-top: 8px; }
.page-meta { margin: 10px 0 22px; font-size: var(--fs-micro); color: var(--faint-ground); }
.page-h2 { margin: 28px 0 8px; font: 700 20px/1.3 var(--body); color: var(--cream); }
.page-back { margin-top: 20px; font-size: 15px; }
.missing-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.missing-card p { max-width: none; }
.missing-icon { width: 96px; height: 96px; border-radius: 24px;
                filter: drop-shadow(0 12px 18px rgba(39,177,239,0.28)) drop-shadow(0 22px 34px rgba(233,116,36,0.22)); }
.missing-card .h2 { margin-top: 4px; }
.missing-card .cta { width: 100%; margin-top: 10px; }
.pill-link { padding: 0 18px; }

/* ------------------------------------------------------------ breakpoints */
@media (max-width: 599px) {
  .answer .word { font-size: 36px; }
}
@media (max-width: 359px) {
  :root { --fs-h1: 34px; --fs-wordmark: 32px; }
  .hero-icon { width: 76px; height: 76px; border-radius: 19px; }
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .answer-grid { grid-template-columns: 1fr; gap: 10px; }
  .answer .word { font-size: 32px; }
  .tile-back { padding: 10px; }
  .tile-back .tag { font-size: 12px; }
}
@media (min-width: 600px) {
  .wall { grid-template-columns: repeat(3, 1fr); }
  .cta { flex-direction: row; }
  .cta .store { width: auto; min-width: 250px; }
  .closer .cta, .missing-card .cta { justify-content: center; }
  .foot-row { flex-direction: row; align-items: center; gap: 32px; }
}
@media (min-width: 900px) {
  html { scroll-padding-top: 64px; }
  .wrap { padding-inline: 40px; }
  .site-head { height: 64px; }
  .head-row { padding-inline: 40px; display: grid; grid-template-columns: 1fr auto 1fr; }
  .brand { justify-self: start; }
  .head-stores { justify-self: end; }
  .brand img { width: 32px; height: 32px; }
  .brand-name { font-size: 24px; }
  .nav { display: flex; gap: 28px; }
  .nav a { font: 700 15px/1 var(--body); color: var(--cream); opacity: 0.8; text-decoration: none; padding: 6px 0 4px;
           background: linear-gradient(var(--sun), var(--sun)) no-repeat 0 100% / 0 2px; }
  .nav a:hover { opacity: 1; }
  .nav a.is-current, .nav a[aria-current] { opacity: 1; background-size: 100% 2px; }
  .head-stores { gap: 10px; }

  .hero { min-height: 640px; padding: 56px 0 0; }
  .hero-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px; align-items: end; }
  .hero-copy { grid-column: 1 / 8; padding-bottom: 96px; container-type: inline-size; }
  .icon-row { gap: 24px; }
  .hero-icon { width: 160px; height: 160px; border-radius: 36px; }
  /* sized against the copy column, not the viewport, so line 1 never breaks between the number and its noun */
  .h1 { margin-top: 24px; font-size: min(var(--fs-h1), 6.2vw); font-size: min(var(--fs-h1), 11.5cqi); }
  .hero .lede { margin-top: 18px; max-width: 34rem; }
  .hero .cta { margin-top: 24px; gap: 14px; }
  .hero .chips { margin-top: 16px; }

  .spill { grid-column: 8 / -1; height: 560px; margin: 0 0 -40px; z-index: auto; align-self: end; }
  .spill-glow { inset: 0; }
  .sp { width: 150px; height: auto; aspect-ratio: 4 / 3; }
  .sp-1  { left: 4%;  top: 6%;  --r: -14deg; --s: 1;    z-index: 3; }
  .sp-2  { left: 36%; top: 0%;  --r: 6deg;   --s: 0.9;  z-index: 2; }
  .sp-3  { left: 66%; top: 4%;  --r: 12deg;  --s: 1.05; z-index: 4; }
  .sp-4  { left: 12%; top: 32%; --r: 4deg;   --s: 1.1;  z-index: 5; }
  .sp-5  { left: 44%; top: 27%; --r: -7deg;  --s: 0.95; z-index: 4; }
  .sp-6  { left: 76%; top: 30%; --r: -3deg;  --s: 0.85; z-index: 3; }
  .sp-7  { left: 0;   top: 60%; --r: 9deg;   --s: 0.9;  z-index: 4; margin-left: -20px; }
  .sp-8  { left: 30%; top: 56%; --r: -11deg; --s: 1.05; z-index: 6; }
  .sp-9  { left: 60%; top: 62%; --r: 3deg;   --s: 1;    z-index: 5; }
  .sp-10 { left: 88%; top: 60%; --r: 14deg;  --s: 0.9;  z-index: 3; }
  .sp-11 { left: 18%; top: 84%; --r: -5deg;  --s: 0.8;  z-index: 4; }
  .sp-12 { left: 48%; top: 86%; --r: 8deg;   --s: 0.95; z-index: 5; }
  .sp-13 { left: 78%; top: 88%; --r: -10deg; --s: 0.85; z-index: 3; }
  .sp-14 { left: 40%; top: 44%; --r: 2deg;   --s: 0.75; z-index: 2; }
  .sp-9, .sp-10, .sp-11, .sp-12, .sp-13, .sp-14, .sp-ghost { display: block; }
  .sp-ghost-a { left: 30%; top: 8%;  width: 260px; --r: -9deg; --s: 1; z-index: 0; opacity: 0.22; filter: blur(7px); }
  .sp-ghost-b { left: 62%; top: 56%; width: 300px; --r: 7deg;  --s: 1; z-index: 0; opacity: 0.18; filter: blur(9px); }
  .spill .prop-die  { left: 8%;  top: 44%; z-index: 7; --pw: 72px; }
  .spill .prop-card { left: 64%; top: 44%; z-index: 6; --pw: 76px; display: block; }
  .spill .prop-chip { left: 28%; top: 20%; z-index: 6; --pw: 72px; display: block; }
  .spill .prop-q    { left: 86%; top: 8%;  z-index: 7; --pw: 60px; }

  .offline { padding: 136px 0 112px; }
  .offline .lede { max-width: none; }
  .second { font-size: 16px; }

  .answers { padding: 112px 0; }
  .answer-grid { margin-top: 32px; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .answer { padding: 26px 26px 28px; }
  .answer .a { font-size: 16px; }

  .shelf { padding: 112px 0 80px; }
  .toolbar { top: 64px; }
  .wall { margin-top: 20px; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .under-grid { margin-top: 32px; }

  .screens { padding: 112px 0; }
  .rail-ctl { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 8px; }
  .rail-wrap { margin-top: 12px; }
  .rail { max-width: 1260px; margin-inline: auto; padding: 8px 40px 28px; gap: 24px; scroll-padding: 40px; }
  .rail li { flex-basis: calc(268px + 2 * (0.046 * 268px)); }
  .frame { --w: 268px; }

  .closer { padding: 128px 0 48px; }
  .strip-wrap { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 160px); mask-image: linear-gradient(180deg, transparent 0, #000 160px); }
  .strip { grid-template-columns: repeat(5, 220px); gap: 20px; opacity: 0.18; }
  .strip img { width: 220px; height: 165px; border-radius: 18px; }
  .closer-card { padding: 48px 40px; }
  .closer .cta { margin-top: 28px; }

  .site-foot { padding-top: 28px; }
  .foot-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .foot-links { justify-content: center; }
  .trademark { font-size: 12px; margin-top: 16px; }

  .page-main { padding: 96px 0 128px; }
  .page-col { padding-inline: 40px; max-width: 760px; }
  .page-card { padding: 40px; }
  .missing-main { min-height: 70vh; display: grid; align-items: center; }
}
@media (min-width: 1180px) {
  .wall { grid-template-columns: repeat(6, 1fr); }

  /* the wide toolbar: search left, pills wrapping right, status beneath; only here is there room for it */
  .toolbar { padding: 12px 0 10px; }
  .toolbar-row { display: flex; gap: 16px; align-items: flex-start; }
  .search { flex: 0 0 420px; margin: 0; }
  .pills-wrap { flex: 1; margin: 0; min-width: 0; }
  .pills-wrap::after { display: none; }
  .pills { flex-wrap: wrap; overflow: visible; padding: 2px 0 0; justify-content: flex-end; }
  .status-row { flex-direction: row; justify-content: flex-end; gap: 14px; margin-top: 10px; }

  /* the two-column closer needs the full 1180 card: below it the stacked card holds both buttons */
  .closer { text-align: left; }
  .closer-card { display: grid; grid-template-columns: 300px 1fr; gap: 48px; align-items: center; padding: 64px; }
  .closer-icon { width: 160px; height: 160px; margin: 0 auto; }
  .closer-icon img { width: 160px; height: 160px; border-radius: 36px; }
  .closer-stage .prop-die  { right: auto; left: 104px; top: calc(50% - 116px); z-index: 2; --pw: 64px; }
  .closer-stage .prop-card { display: block; left: 272px; top: calc(50% + 14px); z-index: 2; --pw: 70px; }
  .closer-stage .prop-chip { left: 92px; top: calc(50% + 52px); bottom: auto; z-index: 2; --pw: 64px; }
  .closer-text .lede { margin: 14px 0 0; font-size: var(--fs-lede); }
  .closer .cta { justify-content: flex-start; }
}

/* ------------------------------------------------------------------ motion
   Everything that moves lives here. The default above is the reduced state. */
@media (prefers-reduced-motion: no-preference) {
  .site-head { transition: background-color 200ms ease, border-color 200ms ease; }
  .nav a, .ulink { transition: background-size 160ms ease, opacity 160ms ease; }
  .store { transition: transform 160ms ease, box-shadow 160ms ease; }
  .store:hover { transform: translateY(-2px); }
  .store:active { transform: translateY(4px); transition-duration: 80ms;
                  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 2px 0 #05152E, 0 6px 12px -6px rgba(0,0,0,0.6); }
  .store.compact:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 1px 0 #05152E; }
  .rail-dots li { transition: background-color 150ms ease; }
  .rail-btn { transition: box-shadow 160ms ease, transform 160ms ease; }
  .rail-btn:active { transform: translateY(2px); }

  /* tile: hover lift, real flip */
  .tile-front { transition: box-shadow 160ms ease-out, transform 160ms ease-out; }
  .tile-front .rule { transition: height 160ms ease-out; }
  @media (hover: hover) and (pointer: fine) {
    .tile:has(.tile-btn:hover) .tile-front { transform: translateY(-3px); }
  }
  html.js .tile-inner { transform-style: preserve-3d; transition: transform 420ms cubic-bezier(0.2,0.8,0.2,1); }
  html.js .tile-front, html.js .tile-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  html.js .tile-back { transform: rotateY(180deg); opacity: 1; transition: visibility 0s linear 420ms; }
  html.js .tile.is-flipped .tile-inner { transform: rotateY(180deg); }
  html.js .tile.is-flipped .tile-front { opacity: 1; }

  /* idle float, hero and closer props */
  html.motion .prop { animation: float 8s ease-in-out infinite alternate; }
  html.motion .prop-card { animation-delay: 0.7s; }
  html.motion .prop-chip { animation-delay: 1.4s; }
  html.motion .prop-q { animation-delay: 2.1s; }

  /* the hero print (JS + motion only; the HTML is already in its final state) */
  html.js.motion .print { animation: print 420ms cubic-bezier(0.2,0.8,0.2,1) backwards; }
  html.js.motion .print-icon { animation-name: print-icon; }
  html.js.motion .print-wordmark { animation-delay: 80ms; }
  html.js.motion .print-l1 { animation-delay: 160ms; }
  html.js.motion .print-l2 { animation-delay: 250ms; }
  html.js.motion .print-lede { animation-delay: 340ms; }
  html.js.motion .print-cta { animation-delay: 400ms; }
  html.js.motion .print-fine { animation-delay: 430ms; }
  html.js.motion .print-chip:nth-child(1) { animation-delay: 460ms; }
  html.js.motion .print-chip:nth-child(2) { animation-delay: 520ms; }
  html.js.motion .print-chip:nth-child(3) { animation-delay: 580ms; }
  html.js.motion .print-chip:nth-child(4) { animation-delay: 640ms; }
  html.js.motion .spill .sp { animation: print-cover 460ms cubic-bezier(0.2,0.8,0.2,1) backwards; }
  html.js.motion .sp-1  { animation-delay: 200ms; }
  html.js.motion .sp-2  { animation-delay: 228ms; }
  html.js.motion .sp-3  { animation-delay: 256ms; }
  html.js.motion .sp-4  { animation-delay: 284ms; }
  html.js.motion .sp-5  { animation-delay: 312ms; }
  html.js.motion .sp-6  { animation-delay: 340ms; }
  html.js.motion .sp-7  { animation-delay: 368ms; }
  html.js.motion .sp-8  { animation-delay: 396ms; }
  html.js.motion .sp-9  { animation-delay: 424ms; }
  html.js.motion .sp-10 { animation-delay: 452ms; }
  html.js.motion .sp-11 { animation-delay: 480ms; }
  html.js.motion .sp-12 { animation-delay: 508ms; }
  html.js.motion .sp-13 { animation-delay: 536ms; }
  html.js.motion .sp-14 { animation-delay: 564ms; }
  html.js.motion .sp-ghost { animation-delay: 200ms; }
  html.js.motion .spill .prop { animation: print-prop 500ms cubic-bezier(0.2,0.8,0.2,1) 500ms backwards,
                                           float 8s ease-in-out infinite alternate; }
  html.js.motion .spill .prop-card { animation-delay: 500ms, 0.7s; }
  html.js.motion .spill .prop-chip { animation-delay: 500ms, 1.4s; }
  html.js.motion .spill .prop-q { animation-delay: 500ms, 2.1s; }

  @keyframes print { from { opacity: 0; transform: translateY(0.35em); } to { opacity: 1; transform: none; } }
  @keyframes print-icon { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
  @keyframes print-cover { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  @keyframes print-prop { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: var(--px, 0px) var(--py, 0px); } }
  @keyframes float { from { transform: translateY(0); } to { transform: translateY(-5px); } }
}