/* Home page. A wide paper spread: the name across with SHQIP crossing it down,
   the playable Mini beside it, then the four games on their own tints, three
   panels on what keeps people coming back, and an ink band to close. Section
   labels are written in squares, a space as a black one. Grid and key colours
   are the app's own tokens. */

:root {
  --grid-cell: #FFFFFF;
  --grid-line: #D8D2C7;
  --grid-cursor: #F3C24F;
  --grid-word: #FCEFCB;
  --grid-number: #8D877D;
  --grid-letter: #1B1A18;
  --grid-solved: #C5DFCD;
  --danger: #CF4A3C;
  --thumb-cell: #FFFFFF;
  --key: #FFFFFF;
  --key-text: #1B1A18;
  --key-action: #D9D4CA;
  --key-panel: #EAE7E0;
  --key-edge: rgba(27, 26, 24, 0.16);
  --tint-full: #E9EEF7;
  --tint-mini: #F0EBF8;
  --tint-paskeme: #FCF4D2;
  --tint-sudoku: #E4F0E8;
  --gold: #E0B341;
  --silver: #B9BEC8;
  --bronze: #CB8A57;
  --shadow: rgba(27, 26, 24, 0.22);
}

:root[data-theme="dark"] {
  --grid-cell: #1F1E1C;
  --grid-line: #34312E;
  --grid-cursor: #F0B54E;
  --grid-word: #3A2F16;
  --grid-number: #8A847B;
  --grid-letter: #F3F0EA;
  --grid-solved: #25452F;
  --danger: #F06B5D;
  --thumb-cell: #2C2A27;
  --key: #2E2C29;
  --key-text: #F3F0EA;
  --key-action: #43403B;
  --key-panel: #161514;
  --key-edge: rgba(0, 0, 0, 0.5);
  --tint-full: #1A2232;
  --tint-mini: #221C30;
  --tint-paskeme: #2E2812;
  --tint-sudoku: #16261C;
  --shadow: rgba(0, 0, 0, 0.6);
}

.page-home .wrap { max-width: 1120px; }
.page-home main { padding-block: 0; }

/* ─── Words in squares (section labels) ────────────────────────────────── */

.eyebrow { margin: 0; line-height: 0; }
.cells { display: inline-flex; }
.cells span {
  position: relative;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  padding-top: 4px;
  /* Each line drawn once: a square owns its right edge, the first its left. */
  border: 1.5px solid var(--ink);
  border-left-width: 0;
  background: var(--surface); color: var(--ink);
  font: 600 14px/1 var(--body);
}
.cells span:first-child { border-left-width: 1.5px; }
.cells span[data-n]::before {
  content: attr(data-n);
  position: absolute; top: 2px; left: 3px;
  font: 600 9px/1 var(--body); color: var(--ink-3);
}
.cells .b { background: var(--block); }

/* ─── Hero ─────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  padding-block: clamp(32px, 6vw, 72px) clamp(8px, 2vw, 24px);
}
.pitch { display: grid; gap: 22px; justify-items: start; min-width: 0; container-type: inline-size; }

/* FJALËKRYQ across and SHQIP down through its Q, on one 9 × 5 lattice. The
   date sits in the empty corner above, the tagline in the one below. */
.masthead {
  --c: clamp(28px, 9.2vw, 54px);
  --c: min(54px, (100cqw - 2px) / 9);
  display: grid;
  grid-template-columns: repeat(9, var(--c));
  grid-template-rows: repeat(5, var(--c)) auto;
}
/* The title is one SVG (build.mjs masthead()), 54 units to a square. */
.xw { grid-area: 1 / 1 / 6 / 10; margin: 0; }
.xw svg { display: block; width: 100%; height: 100%; overflow: visible; }
.xw rect { fill: var(--grid-word); }
.xw .cur rect { fill: var(--grid-cursor); }
.xw text { font: 600 29px var(--display); fill: var(--grid-letter); text-anchor: middle; }
.xw .cur text { fill: #1B1A18; }
.xw text.n { font: 600 10.5px var(--body); fill: var(--grid-number); text-anchor: start; }
/* A square the pointer lifts (home.js): a copy over the lattice, with its own
   border and shadow. */
.xw .lift { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 6px 7px var(--shadow)); }
.xw .lift rect { stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.xw .lift text { transform-box: fill-box; }
.xw .off { pointer-events: none; }
.xw .lines { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.dateline {
  grid-area: 1 / 1 / 3 / 9;
  align-self: end;
  margin: 0 0 12px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2);
}
.tagline {
  grid-area: 4 / 1 / 7 / 9;
  margin: 18px 0 0;
  padding-right: 14px;
  font: 600 calc(var(--c) * 0.86)/1.06 var(--display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.pitch .lede { font-size: clamp(17px, 1.6vw, 19px); max-width: 46ch; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 5px 12px 5px 10px;
}
.chips svg { width: 15px; height: 15px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Store badges (official artwork, only resized) ────────────────────── */

.badges { --bh: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.badge { display: block; line-height: 0; border-radius: 9px; }
a.badge { transition: transform 160ms ease; }
a.badge:hover { transform: translateY(-2px); }
.badge-apple img { height: var(--bh); width: auto; }
/* Google's PNG carries a transparent margin of 41 of its 250 pixels; trim it so
   both badges stand the same height. */
.badge-google { height: var(--bh); overflow: hidden; }
.badge-google img { display: block; height: calc(var(--bh) * 250 / 168); width: auto; margin: calc(var(--bh) * -41 / 168); }
.badges-soon {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.badges-soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* ─── The playable Mini ────────────────────────────────────────────────── */

.demo {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 14px 16px;
  box-shadow: 0 30px 60px -30px var(--shadow), 0 2px 0 var(--line);
  min-width: 0;
  outline: none;
}
.demo:not(.ready) { min-height: 620px; }
.demo-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 0 6px; }
.demo-label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mini); }
.demo-label::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--mini); }
.timer {
  font: 600 14px/1 var(--body); font-variant-numeric: tabular-nums;
  background: var(--sunk); color: var(--ink); border-radius: 4px; padding: 8px 11px; min-width: 52px; text-align: center;
}
.tool {
  all: unset; box-sizing: border-box;
  width: 34px; height: 34px; border-radius: 4px;
  display: grid; place-items: center; cursor: pointer; color: var(--ink-2);
}
.tool:hover { background: var(--sunk); color: var(--ink); }
.tool:focus-visible { outline: 2px solid var(--accent); }
.tool svg, .cluebar svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.board {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px; padding: 2px;
  background: var(--grid-line);
  border-radius: 4px;
  overflow: hidden;
  touch-action: manipulation;
}
.cell {
  all: unset; box-sizing: border-box;
  position: relative; aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--grid-cell); color: var(--grid-letter);
  font: 600 clamp(22px, 6.4vw, 30px)/1 var(--body);
  cursor: pointer;
  transition: background-color 120ms ease;
}
.cell:first-child { border-top-left-radius: 2px; }
.cell:nth-child(5) { border-top-right-radius: 2px; }
.cell:nth-child(21) { border-bottom-left-radius: 2px; }
.cell:last-child { border-bottom-right-radius: 2px; }
.cell.block { background: var(--block); cursor: default; }
.cell.word { background: var(--grid-word); }
.cell.cur { background: var(--grid-cursor); color: #1B1A18; }
.cell .num { position: absolute; top: 4px; left: 5px; font: 600 10px/1 var(--body); color: var(--grid-number); }
.cell.cur .num { color: #1B1A18; opacity: 0.6; }
.cell.wrong .ch { color: var(--danger); }
.cell.wrong::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 50%; height: 2px;
  background: var(--danger); transform: rotate(-35deg); opacity: 0.8;
}
.cell.revealed::after {
  content: ""; position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 0 9px 9px 0; border-color: transparent var(--danger) transparent transparent;
}
.cell .ch.pop { animation: pop-letter 160ms ease-out; }
.board.solved .cell:not(.block) { background: var(--grid-solved); color: var(--grid-letter); animation: wave 600ms ease both; animation-delay: calc(var(--i, 0) * 35ms); }
.board.solved .cell .num { color: var(--grid-number); opacity: 1; }

.cluebar {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center;
  min-height: 66px; border-radius: 4px; background: var(--tint-mini);
}
.cluebar button { all: unset; height: 100%; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); border-radius: 4px; }
.cluebar button:hover { color: var(--ink); }
.cluebar button:focus-visible { outline: 2px solid var(--accent); }
.clue { all: unset; display: block; text-align: center; font-size: 15px; line-height: 1.35; color: var(--ink); cursor: pointer; padding-block: 9px; text-wrap: pretty; }
.clue b { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--mini); }

.kb { display: grid; gap: 7px; background: var(--key-panel); border-radius: 4px; padding: 9px 6px; }
.kb-row { display: flex; justify-content: center; gap: 5px; }
.key {
  all: unset; box-sizing: border-box;
  flex: 1 1 0; max-width: 38px; height: 46px;
  display: grid; place-items: center;
  border-radius: 3px; background: var(--key); color: var(--key-text);
  box-shadow: 0 1.5px 0 var(--key-edge);
  font: 600 16px/1 var(--body); cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.key.back { flex-grow: 1.6; max-width: 60px; background: var(--key-action); }
.key.back svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.key:active, .key.down { transform: translateY(1px); box-shadow: none; background: var(--key-action); }
.key:focus-visible { outline: 2px solid var(--accent); }

.done {
  display: grid; gap: 6px; justify-items: center; text-align: center;
  border-radius: 4px; padding: 20px 16px; background: var(--tint-mini);
}
.done[hidden] { display: none; }
.done p { margin: 0; color: var(--ink-2); }
.done .done-title { margin: 0 0 2px; font: 600 32px/1.1 var(--display); color: var(--ink); }
.done .time { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.again {
  all: unset; margin-top: 8px; cursor: pointer;
  font-weight: 600; font-size: 15px; padding: 10px 18px; border-radius: 4px;
  background: var(--ink); color: var(--on-ink);
}
.again:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.demo-note { margin: 0; text-align: center; font-size: 13px; color: var(--ink-3); }

/* ─── Sections ─────────────────────────────────────────────────────────── */

.section { padding-block: clamp(48px, 8vw, 96px) 0; }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(24px, 4vw, 40px); max-width: 680px; }
.section-title { margin: 0; font: 600 clamp(30px, 4.4vw, 46px)/1.08 var(--display); letter-spacing: -0.01em; text-wrap: balance; }

/* The games, each on its own tint with the app's thumbnail */
.games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.game {
  display: grid; gap: 14px; align-content: start;
  background: var(--tint-soft); border-radius: 0; padding: 22px 20px 24px;
}
.game .art { height: 128px; display: flex; align-items: flex-end; }
.thumb { height: 100%; width: auto; max-width: 100%; transition: transform 300ms cubic-bezier(.2, .7, .2, 1); }
.game:hover .thumb { transform: translateY(-4px) rotate(-2deg); }
.game h3 { margin: 0; font: 600 24px/1.15 var(--display); }
.game p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.g-full { --tint: var(--full); --tint-soft: var(--tint-full); }
.g-mini { --tint: var(--mini); --tint-soft: var(--tint-mini); }
.g-paskeme { --tint: var(--paskeme); --tint-soft: var(--tint-paskeme); }
.g-sudoku { --tint: var(--sudoku); --tint-soft: var(--tint-sudoku); }

.t-frame { fill: var(--grid-line); }
.t-cell { fill: var(--thumb-cell); }
.t-block { fill: var(--tint); }
.t-mark { fill: none; stroke: var(--tint); stroke-linecap: butt; }
.t-digit { fill: var(--tint); font: 600 17px var(--body); }
.thumb .t-block:not(.t-sudoku-frame) { transform-box: fill-box; transform-origin: center; }

/* Three panels: streak, boards, archive */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature {
  display: grid; gap: 14px; align-content: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 0; padding: 20px 20px 24px;
}
.feature .art {
  height: 188px; border-radius: 4px; background: var(--bg);
  display: grid; place-items: center; padding: 16px; overflow: hidden;
}
.feature h3 { margin: 0; font: 600 23px/1.15 var(--display); }
.feature p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }

.streak { display: grid; gap: 16px; justify-items: center; }
.streak-count { display: flex; align-items: center; gap: 8px; font: 600 44px/1 var(--display); font-variant-numeric: tabular-nums; }
.streak-count svg { width: 34px; height: 34px; fill: var(--accent); stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; }
.streak-count small { font: 600 14px/1 var(--body); color: var(--ink-2); margin-left: 2px; }
.week { display: flex; gap: 6px; }
.day { display: grid; gap: 6px; justify-items: center; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.day i {
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 1.5px solid var(--ink); background: var(--ink);
}
.day i svg { width: 16px; height: 16px; fill: none; stroke: var(--on-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.day.today i { background: var(--grid-cursor); border-color: var(--ink); }
.day.today { color: var(--ink); }

.lb { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 300px; display: grid; gap: 7px; }
.lb li {
  display: grid; grid-template-columns: 22px 30px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 7px 10px;
  font-size: 14px;
}
.lb .rk { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #1B1A18; }
.lb .r1 { background: var(--gold); }
.lb .r2 { background: var(--silver); }
.lb .r3 { background: var(--bronze); }
.lb .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #FFFFFF; }
.lb .av1 { background: var(--full); }
.lb .av2 { background: var(--sudoku); }
.lb .av3 { background: var(--mini); }
[data-theme="dark"] .lb .av { color: #111110; }
.lb .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.lb .tm { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 600; }
.bravo {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 700; color: var(--on-ink); background: var(--ink);
  border-radius: 3px; padding: 2px 7px 2px 6px;
}
.bravo svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.cal { display: grid; grid-template-columns: repeat(7, 22px); gap: 5px; }
.cal span { width: 22px; height: 22px; border-radius: 3px; background: var(--sunk); }
.cal .s { background: var(--ink); }
.cal .sf { background: var(--full); }
.cal .sm { background: var(--mini); }
.cal .x { background: transparent; }
.cal .t { background: var(--grid-cursor); box-shadow: 0 0 0 1.5px var(--ink); }

/* Closing band */
.cta {
  position: relative; overflow: hidden;
  margin-block: clamp(56px, 9vw, 112px) clamp(48px, 7vw, 88px);
  background: var(--ink); color: var(--on-ink);
  border-radius: 0; padding: clamp(32px, 6vw, 64px);
  display: grid; gap: 22px; justify-items: start;
}
.cta > * { position: relative; }
.cta .cells span { border-color: var(--ink); }
.cta h2 { margin: 0; font: 600 clamp(32px, 5vw, 54px)/1.05 var(--display); max-width: 14ch; text-wrap: balance; }
.cta p:not(.eyebrow) { margin: 0; color: color-mix(in srgb, var(--on-ink) 72%, transparent); font-size: 17px; max-width: 40ch; }
.cta .badges-soon { color: color-mix(in srgb, var(--on-ink) 80%, transparent); }
/* A fading lattice in the corner, like the edge of a grid. */
.cta::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 60%; height: 140%;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--on-ink) 14%, transparent) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, color-mix(in srgb, var(--on-ink) 14%, transparent) 1.5px, transparent 1.5px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 85% 30%, #000 0%, transparent 65%);
  mask-image: radial-gradient(circle at 85% 30%, #000 0%, transparent 65%);
  transform: rotate(-8deg);
  pointer-events: none;
}

/* ─── Motion ───────────────────────────────────────────────────────────── */

@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes type-in { from { opacity: 0; transform: translateY(-10px) scale(0.92); } }
@keyframes cursor-pass { 0%, 100% { fill: var(--grid-word); } 40% { fill: var(--grid-cursor); } }
@keyframes pop-letter { from { transform: scale(0.6); opacity: 0.2; } }
@keyframes wave { 0% { transform: scale(1); } 40% { transform: scale(0.88); } 100% { transform: scale(1); } }
@keyframes pop { from { opacity: 0; transform: scale(0.3); } }
@keyframes fill-day { from { background: transparent; } }
@keyframes check { from { opacity: 0; transform: scale(0.4); } }
@keyframes slide { from { opacity: 0; transform: translateX(-16px); } }
@keyframes bump { 0% { transform: scale(0.5); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: no-preference) {
  /* The name types into the drawn grid across, then SHQIP down. */
  .xw .c { transform-box: fill-box; transform-origin: center; animation: type-in 420ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--t, 0ms); }
  .xw .c:not(.cur) rect { animation: cursor-pass 420ms ease both; animation-delay: var(--t, 0ms); }
  .xw .c:nth-of-type(2) { --t: 70ms; }
  .xw .c:nth-of-type(3) { --t: 140ms; }
  .xw .c:nth-of-type(4) { --t: 210ms; }
  .xw .c:nth-of-type(5) { --t: 280ms; }
  .xw .c:nth-of-type(6) { --t: 350ms; }
  .xw .c:nth-of-type(7) { --t: 420ms; }
  .xw .c:nth-of-type(8) { --t: 490ms; }
  .xw .c:nth-of-type(9) { --t: 560ms; }
  .xw .c:nth-of-type(10) { --t: 700ms; }
  .xw .c:nth-of-type(11) { --t: 770ms; }
  .xw .c:nth-of-type(12) { --t: 840ms; }
  .xw .c:nth-of-type(13) { --t: 910ms; }
  .dateline, .tagline { animation: rise 700ms 300ms cubic-bezier(.2, .7, .2, 1) both; }
  .pitch > :not(.masthead) { animation: rise 700ms cubic-bezier(.2, .7, .2, 1) both; }
  .pitch > :nth-child(2) { animation-delay: 480ms; }
  .pitch > :nth-child(3) { animation-delay: 580ms; }
  .pitch > :nth-child(4) { animation-delay: 680ms; }
  .demo { animation: rise 800ms 300ms cubic-bezier(.2, .7, .2, 1) both; }

  /* Scroll reveals: home.js adds .pre to what starts below the fold, then .in. */
  .pre { opacity: 0; transform: translateY(28px); }
  .pre.in {
    opacity: 1; transform: none;
    transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  .pre.in .t-block:not(.t-sudoku-frame) { animation: pop 420ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 90ms + 200ms + var(--i, 0) * 12ms); }
  .pre.in .t-mark, .pre.in .t-digit { animation: pop 420ms both; animation-delay: calc(var(--d, 0) * 90ms + 400ms); transform-box: fill-box; transform-origin: center; }
  .pre.in .cells span { animation: type-in 380ms cubic-bezier(.2, .7, .2, 1) both; }
  .pre.in .cells span:nth-child(2) { animation-delay: 60ms; }
  .pre.in .cells span:nth-child(3) { animation-delay: 120ms; }
  .pre.in .cells span:nth-child(4) { animation-delay: 180ms; }
  .pre.in .cells span:nth-child(5) { animation-delay: 240ms; }
  .pre.in .cells span:nth-child(6) { animation-delay: 300ms; }
  .pre.in .cells span:nth-child(7) { animation-delay: 360ms; }
  .pre.in .cells span:nth-child(8) { animation-delay: 420ms; }
  .pre.in .cells span:nth-child(9) { animation-delay: 480ms; }
  .pre.in .day i { animation: fill-day 300ms ease both; }
  .pre.in .day i svg { animation: check 300ms cubic-bezier(.2, .7, .2, 1) both; }
  .pre.in .day:nth-child(1) i, .pre.in .day:nth-child(1) i svg { animation-delay: 300ms; }
  .pre.in .day:nth-child(2) i, .pre.in .day:nth-child(2) i svg { animation-delay: 400ms; }
  .pre.in .day:nth-child(3) i, .pre.in .day:nth-child(3) i svg { animation-delay: 500ms; }
  .pre.in .day:nth-child(4) i, .pre.in .day:nth-child(4) i svg { animation-delay: 600ms; }
  .pre.in .day:nth-child(5) i, .pre.in .day:nth-child(5) i svg { animation-delay: 700ms; }
  .pre.in .day:nth-child(6) i, .pre.in .day:nth-child(6) i svg { animation-delay: 800ms; }
  .pre.in .day:nth-child(7) i { animation: bump 500ms 950ms both; }
  .pre.in .lb li { animation: slide 500ms cubic-bezier(.2, .7, .2, 1) both; }
  .pre.in .lb li:nth-child(1) { animation-delay: 350ms; }
  .pre.in .lb li:nth-child(2) { animation-delay: 470ms; }
  .pre.in .lb li:nth-child(3) { animation-delay: 590ms; }
  .pre.in .bravo { animation: bump 500ms 1000ms both; }
  .pre.in .cal span:not(.x) { animation: pop 360ms both; animation-delay: calc(300ms + var(--i, 0) * 22ms); }
  .pre.in .cal .t { animation: bump 500ms 1100ms both; }
}

/* ─── Layout steps ─────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 880px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .demo { max-width: 440px; width: 100%; justify-self: center; }
}
@media (max-width: 560px) {
  .games { grid-template-columns: minmax(0, 1fr); }
  .game { grid-template-columns: 112px minmax(0, 1fr); column-gap: 18px; row-gap: 6px; align-items: center; padding: 18px; }
  .game .art { grid-row: span 2; height: auto; align-items: center; }
  .game h3 { align-self: end; }
  .game p { align-self: start; }
  .thumb { height: auto; width: 100%; max-height: 112px; }
  .badges { --bh: 44px; }
  .key { height: 44px; }
  .cells span { width: 30px; height: 30px; font-size: 13px; }
}
@media (max-width: 360px) {
  .demo-try { display: none; }
}