/* thunderkick-demo.com — in the look of Thunderkick's own site (thunderkick.com, 22.10.2026): cream #FFFDEE pages with black type (the home opens like their home),
   a black rail like the header of their dark games page, light boards and a light demo window, lime #D6FE85 for the current item, raspberry #AD0E51 for links and arrow
   squares, flat blocks split by thin black rules, 4px corners. Their palette, their menu face (Prompt) and their Space Mono for buttons,
   labels and figures; headings in Space Grotesk (their Nudica is a commercial face), running text in Schibsted Grotesk (easier to read than mono). The page structure is this site's own. */
@layer reset, base, shell, blocks, demo, pages, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
  body, h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0 }
  ol[class], ul[class] { list-style: none; padding: 0 }
  img, svg, video, iframe, picture { display: block; max-width: 100% }
  img { height: auto }
  button, input { font: inherit; color: inherit }
  button { cursor: pointer }
  table { border-collapse: collapse }
}

@layer base {
  :root {
    --black: #000; --cream: #fffdee; --line: #ebe9dd; --gray: #696969; --gray-dark: #959595;
    --lime: #d6fe85; --rasp: #ad0e51; --aqua: #9ce6f0; --pink: #fe6eab; --lilac: #c883fd; --violet: #9300ff; --plum: #654280; --wine: #760032;
    --lime-2: #ecfec4; --aqua-2: #dcf6f9; --pink-2: #ffd3e6; --lilac-2: #eedcfe;
    --r: 4px;
    --rule: 1px solid var(--black);
    --f-head: 'Space Grotesk', 'Arial Narrow', Arial, sans-serif;
    --f-menu: 'Prompt', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --f-mono: 'Space Mono', ui-monospace, Consolas, Menlo, monospace;
    --f-text: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --rail: 248px;
    --gap: 32px;
    color-scheme: light;
  }
  html { background: var(--cream); scroll-padding-top: 20px }
  body { min-height: 100vh; font-family: var(--f-text); font-size: 17px; line-height: 1.65; color: var(--black); background: var(--cream) }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px }
  a:hover { color: var(--rasp) }
  :focus-visible { outline: 3px solid var(--rasp); outline-offset: 3px; border-radius: var(--r) }
  h1, h2, h3 { font-family: var(--f-head); font-weight: 700; line-height: 1.06; letter-spacing: -.02em }
  h1 { font-size: clamp(40px, 4.8vw, 66px); letter-spacing: -.03em }
  h2 { font-size: clamp(28px, 2.9vw, 38px); margin: 0 0 .5em }
  h3 { font-size: 21px; margin: 1.5em 0 .45em; letter-spacing: -.01em }
  p + p { margin-top: 1em }
  strong, b { font-weight: 700 }
  .sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
  .mono { font-family: var(--f-mono) }
  .skip { position: absolute; left: 12px; top: -80px; z-index: 90; padding: 10px 16px; border-radius: var(--r); background: var(--lime); color: var(--black); font-weight: 700 }
  .skip:focus { top: 12px }
}

@layer shell {
  /* desktop: a black rail on the left, like the dark header of Thunderkick's games page */
  .rail {
    position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--rail); display: flex; flex-direction: column; gap: 24px;
    padding: 28px 18px 18px; overflow: hidden auto; scrollbar-width: thin; background: var(--black); color: var(--cream);
  }
  .rail-brand { display: block; padding: 2px 6px }
  .rail-brand img { width: 206px; height: 44px }
  .nav { display: flex; flex-direction: column; gap: 2px }
  .nav a {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r);
    color: var(--cream); font-family: var(--f-menu); font-size: 18px; font-weight: 600; line-height: 1.2; text-decoration: none; transition: color .15s, background .15s;
  }
  .nav svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
  /* hover and current: the lime of their menu; current also gets a lime bar on the left */
  .nav a:hover { color: var(--lime); background: rgba(255, 253, 238, .06) }
  .nav a[aria-current] { color: var(--lime) }
  .nav a[aria-current]::before { content: ""; position: absolute; left: -18px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 2px 2px 0; background: var(--lime) }
  /* the note: a thin-ruled card with the pink 18+ seal (tools/make_age.py) */
  .rail-note { margin-top: auto; padding: 12px 14px 14px; border: 1px solid rgba(255, 253, 238, .24); border-radius: var(--r); color: rgba(255, 253, 238, .82); font-size: 13.5px; line-height: 1.5 }
  .rail-note-head { display: flex; align-items: center; gap: 6px; margin: -4px 0 6px -6px }
  .rail-note-head img { flex: none; width: 58px; height: 58px; transform: rotate(-9deg) }
  .rail-note-head b { color: var(--cream); font-family: var(--f-head); font-size: 20px; line-height: 1; letter-spacing: -.01em }
  /* back to top: a cream button like their Client Area, filling with lime as the page is read (--read from site.js) */
  .rail-top {
    position: relative; isolation: isolate; display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 12px 6px 6px; overflow: hidden;
    border: 0; border-radius: var(--r); background: var(--cream); color: var(--black);
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility 0s linear .2s;
  }
  .rail-top::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lime); transform-origin: left; transform: scaleX(var(--read, 0)) }
  .rail-top.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s, visibility 0s }
  .rail-top-coin { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r); background: var(--black); color: var(--cream); transition: background .15s }
  .rail-top:hover .rail-top-coin { background: var(--rasp) }
  .rail-top svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
  .rail-top b { font-family: var(--f-mono); font-size: 14px; font-weight: 700; line-height: 1 }
  .rail-top-pct { margin-left: auto; font-family: var(--f-mono); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums }
  /* reading progress: on wide screens the Top button shows it; on phones a bar above the tab bar (see the phone block) */
  .rail-meter { display: none; pointer-events: none }
  .rail-meter i { display: block; width: 100%; height: 100%; background: var(--lime); transform-origin: top; transform: scaleY(var(--read, 0)) }

  .app { margin-left: var(--rail); min-height: 100vh; padding: 32px var(--gap) 32px }
  .page { max-width: 1060px; margin: 0 auto }
  .topbar { display: none }

  /* footer: one black block with three ruled tiles and a closing line */
  .colophon { max-width: 1060px; margin: 80px auto 0; padding: 34px 34px 24px; border-radius: var(--r); background: var(--black); color: var(--cream) }
  .colophon-tiles { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px }
  .tile { padding: 18px 20px 16px; border: 1px solid rgba(255, 253, 238, .22); border-radius: var(--r) }
  .tile h2 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.01em }
  .tile p, .tile li { font-size: 14.5px; line-height: 1.55; color: rgba(255, 253, 238, .84) }
  .tile ul { display: grid; gap: 6px }
  .tile a { color: var(--cream) }
  .tile a:hover { color: var(--lime) }
  .tile--age { border-color: var(--pink); background: var(--pink); color: var(--black) }
  .tile--age p, .tile--age a { color: var(--black) }
  .tile--age a:hover { color: var(--rasp) }
  .tile--age .age { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0 0 10px; border-radius: var(--r); background: var(--black); color: var(--cream); font-family: var(--f-mono); font-weight: 700 }
  .colophon-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin: 22px 2px 0; padding-top: 16px; border-top: 1px solid rgba(255, 253, 238, .18); font-family: var(--f-mono); font-size: 12px; color: var(--gray-dark) }
}

@layer blocks {
  /* sections: flat on the cream page; a section opens with its heading over a thin black rule, as on thunderkick.com */
  .sheet { position: relative; color: var(--black) }
  .sheet a:hover { color: var(--rasp) }
  .block { margin: 80px 0 0 }
  .block > h2:first-child { margin: 0 0 22px; padding-bottom: 16px; border-bottom: var(--rule) }
  .sheet ul:not([class]), .sheet ol:not([class]) { padding-left: 1.3em; margin: .6em 0 1em }
  .sheet ul:not([class]) li, .sheet ol:not([class]) li { margin: .3em 0 }
  .sheet li::marker { color: var(--rasp) }
  .lead { font-size: 19px; line-height: 1.6 }

  /* hero boards (home and reviews): big black type on the cream page, like thunderkick.com's home, closed by a thin black rule */
  .board { padding: 14px 0 40px; border-bottom: var(--rule) }
  .title-board { padding: 4px 0 36px; border-bottom: var(--rule) }

  /* buttons: black blocks with Space Mono, like their primary button */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 0; border-radius: var(--r);
    background: var(--black); color: var(--cream); font-family: var(--f-mono); font-size: 15px; font-weight: 700; line-height: 1.1; letter-spacing: .01em;
    text-decoration: none; transition: background .15s, color .15s;
  }
  .btn:hover { background: var(--rasp); color: var(--cream) }
  .btn svg { width: 22px; height: 22px; flex: none }
  /* the main button: label on the left, the raspberry arrow square of thunderkick.com on the right */
  .btn--go { justify-content: space-between; padding-right: 9px }
  .btn-go { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; background: var(--rasp); color: var(--cream); transition: background .15s, color .15s }
  .btn-go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
  .btn--go:hover .btn-go { background: var(--cream); color: var(--rasp) }
  /* the second button: outlined, lime on hover */
  .btn--ghost { background: transparent; color: var(--black); box-shadow: inset 0 0 0 1px var(--black) }
  .btn--ghost:hover { background: var(--lime); color: var(--black) }

  /* chips: cream tags with a colour bar on top, the colours of their palette */
  .chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
  .chip { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px 11px; border: var(--rule); border-top: 4px solid var(--lime); border-radius: var(--r); background: var(--cream); color: var(--black); line-height: 1.2 }
  .chip b { font-family: var(--f-head); font-size: 21px; letter-spacing: -.01em }
  .chip span { font-family: var(--f-mono); font-size: 11.5px; color: var(--gray) }
  .chip:nth-child(4n+2) { border-top-color: var(--aqua) }
  .chip:nth-child(4n+3) { border-top-color: var(--lilac) }
  .chip:nth-child(4n) { border-top-color: var(--pink) }

  /* volatility meter: four steps, Low → Very high */
  .vol { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap }
  .vol i { display: inline-flex; gap: 3px }
  .vol i::before, .vol i::after { content: none }
  .vol s { display: block; width: 11px; height: 14px; border: 1px solid var(--black); border-radius: 2px; background: transparent; text-decoration: none }
  .vol s.on:nth-child(1) { background: var(--aqua) }
  .vol s.on:nth-child(2) { background: var(--lilac) }
  .vol s.on:nth-child(3) { background: var(--pink) }
  .vol s.on:nth-child(4) { background: var(--rasp) }
  .vol em { font-style: normal; font-size: 13px; color: var(--black) }

  /* breadcrumbs */
  .crumbs { margin: 0 0 16px; font-family: var(--f-mono); font-size: 13px; color: var(--gray) }
  /* one line; what does not fit runs under a soft fade on the right and scrolls sideways with a finger */
  .crumbs ol {
    display: flex; flex-wrap: nowrap; padding: 0 0 4px; list-style: none; white-space: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
  }
  .crumbs ol::-webkit-scrollbar { display: none }
  .crumbs li { flex: none }
  .crumbs li:last-child { padding-right: 34px }
  .crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--rasp) }
  .crumbs a { color: var(--black) }
  .crumbs a:hover { color: var(--rasp) }

  /* tables */
  .table-wrap { margin: 20px 0 26px; overflow-x: auto; border: var(--rule); border-radius: var(--r) }
  .table { width: 100%; font-size: 15.5px; line-height: 1.5; font-variant-numeric: tabular-nums }
  .table caption { caption-side: top; padding: 13px 16px 12px; border-bottom: var(--rule); text-align: left; font-family: var(--f-head); font-size: 18px; font-weight: 700; letter-spacing: -.01em }
  .table th, .table td { padding: 11px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line) }
  .table thead th { background: var(--black); color: var(--cream); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border-bottom: 0 }
  .table tbody th { font-weight: 700 }
  .table tbody tr:last-child > * { border-bottom: 0 }
  .table tfoot th, .table tfoot td { border-top: var(--rule); background: var(--lime); font-weight: 700 }
  .table .num { white-space: nowrap }
  .table small { display: block; font-size: 12.5px; color: var(--gray) }

  /* answer: the one-paragraph reply on a lime card */
  .answer { margin: 8px 0 32px; padding: 22px 24px 20px; border-radius: var(--r); background: var(--lime) }
  .answer h2 { margin: 0 0 8px; font-size: 24px }
  .answer p { margin: 0; font-size: 17px }

  /* figures: plain 4px frames, a mono caption with a raspberry square */
  .shot { margin: 26px 0 30px }
  .shot-pic { overflow: hidden; border-radius: var(--r); background: var(--black) }
  .shot-pic img, .shot-pic video, .shot-pic svg { width: 100%; height: auto }
  .band { margin: 24px 0 30px; overflow: hidden; border-radius: var(--r); background: var(--line) }
  .band img { width: 100%; height: auto }
  .shot figcaption { display: flex; gap: 10px; margin: 10px 2px 0; font-size: 14.5px; line-height: 1.5; color: var(--gray) }
  .shot figcaption::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 6px; border-radius: 2px; background: var(--rasp) }

  /* FAQ: ruled rows, a raspberry square that turns black when open */
  .faq { display: grid; margin: 18px 0 6px; border-bottom: var(--rule) }
  .faq details { border-top: var(--rule) }
  .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; list-style: none; cursor: pointer; font-family: var(--f-head); font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em }
  .faq summary:hover { color: var(--rasp) }
  .faq summary::-webkit-details-marker { display: none }
  .faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r); background: var(--rasp); color: var(--cream); font-family: var(--f-mono); font-size: 18px; font-weight: 700 }
  .faq details[open] summary::after { content: "−"; background: var(--black); color: var(--lime) }
  .faq .faq-a { padding: 0 46px 20px 0; font-size: 16.5px }

  /* plain-English glossary */
  .terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 8px }
  .terms div { padding: 16px 18px 14px; border: var(--rule); border-radius: var(--r) }
  .terms dt { margin: 0 0 4px; font-family: var(--f-head); font-size: 18px; font-weight: 700; letter-spacing: -.01em }
  .terms dd { margin: 0; font-size: 15.5px; line-height: 1.55 }
}

@layer pages {
  /* ---------- home: the board ---------- */
  .board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); grid-template-areas: "h1 h1" "lead art" "chips chips"; column-gap: 34px; align-items: center }
  .board h1 { grid-area: h1; margin: 0 0 26px }
  .board .lead { grid-area: lead; margin: 0 }
  .board .chips { grid-area: chips; margin: 32px 0 0 }
  .board-art { grid-area: art; margin: -10px -14px -10px 0 }
  .board-art img { width: 100%; height: auto }
  .wall { grid-area: art; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px }
  .wall a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--r); background: var(--black); transition: transform .15s }
  .wall img { width: 100%; height: 100%; object-fit: cover }
  .wall a:hover { transform: translateY(-3px) }
  .wall span { position: absolute; inset: auto 6px 6px; padding: 3px 7px; border-radius: var(--r); background: var(--cream); color: var(--black); font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; line-height: 1.3; opacity: 0; transition: opacity .15s }
  .wall a:hover span, .wall a:focus-visible span { opacity: 1 }

  /* ---------- home: the slot index ---------- */
  .dex-tools { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 16px }
  .dex-tools button { padding: 7px 13px; border: var(--rule); border-radius: var(--r); background: transparent; color: var(--black); font-family: var(--f-mono); font-size: 13.5px; font-weight: 700; line-height: 1.2; transition: background .15s }
  .dex-tools button:hover { background: var(--lime) }
  .dex-tools button[aria-pressed="true"] { background: var(--black); color: var(--cream) }
  .dex-tools button[aria-pressed="true"]::after { content: " ↓"; font-family: var(--f-mono) }
  /* search by name: a magnifier square; its field slides out to the right over the sort buttons */
  .dex-tools .dex-find-btn { flex: none; display: grid; place-items: center; width: 33px; height: 33px; padding: 0 }
  .dex-find-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
  .dex-find-btn .x { display: none }
  .dex-tools.is-finding .dex-find-btn { background: var(--black); color: var(--cream) }
  .dex-tools.is-finding .dex-find-btn .o { display: none }
  .dex-tools.is-finding .dex-find-btn .x { display: block }
  .dex-find-input {
    position: absolute; top: 0; left: 41px; z-index: 6; width: min(480px, calc(100% - 41px)); height: 33px; padding: 0 12px; border: var(--rule); border-radius: var(--r);
    background: var(--cream); color: var(--black); font-family: var(--f-mono); font-size: 14px; font-weight: 700; outline: none;
    clip-path: inset(0 100% 0 0); visibility: hidden; transition: clip-path .35s cubic-bezier(.2, .8, .25, 1), visibility 0s linear .35s;
  }
  .dex-tools.is-finding .dex-find-input { clip-path: inset(0); visibility: visible; transition: clip-path .35s cubic-bezier(.2, .8, .25, 1), visibility 0s }
  .dex-find-input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lime) }
  .dex-find-input::placeholder { color: var(--gray); font-weight: 400 }
  .dex-find-input::-webkit-search-cancel-button { display: none }
  .dex-row[hidden] { display: none }
  .dex-none { margin: 16px 0 0; padding: 14px 16px; border-radius: var(--r); background: var(--line); font-size: 15px }
  .dex-keys { display: flex; flex-wrap: wrap; gap: 8px }
  .dex-pick { display: none }
  .dex { border-top: var(--rule); border-bottom: var(--rule) }
  .dex-head, .dex-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) 92px 104px 150px 86px 32px; align-items: center; gap: 16px; padding: 12px 6px }
  .dex-head { padding-top: 10px; padding-bottom: 10px; border-bottom: var(--rule); font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray) }
  .dex-head span:first-child { grid-column: 1 / 3 }
  .dex-row { position: relative; border-bottom: 1px solid var(--line); transition: background .15s }
  .dex-row:last-child { border-bottom: 0 }
  .dex-row:hover { background: var(--lime-2) }
  .dex-pic { width: 76px; height: 76px; border-radius: var(--r); object-fit: cover; background: var(--black) }
  .dex-name { min-width: 0 }
  .dex-name a { display: block; color: var(--black); font-family: var(--f-head); font-size: 21px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; text-decoration: none }
  .dex-name a::after { content: ""; position: absolute; inset: 0 }
  .dex-row:hover .dex-name a { color: var(--rasp) }
  .dex-name small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--gray) }
  .dex-cell { font-family: var(--f-mono); font-size: 14.5px; font-weight: 700; white-space: nowrap }
  .dex-cell small { display: none }
  .dex-cell .na { font-size: 12.5px; font-weight: 400; color: var(--gray) }
  /* the arrow square of their "See All Games" */
  .dex-go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r); background: var(--rasp); color: var(--cream); transition: background .15s }
  .dex-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
  .dex-row:hover .dex-go { background: var(--black) }

  /* ---------- home: catalogue charts ---------- */
  .bars { display: grid; gap: 9px; margin: 18px 0 10px }
  .bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 54px; align-items: center; gap: 14px; font-size: 14.5px; font-variant-numeric: tabular-nums }
  .bar b { font-weight: 700 }
  .bar span { display: block; height: 18px; border-radius: 2px; background: var(--line); overflow: hidden }
  .bar span i { display: block; height: 100%; background: var(--pink) }
  .bar:nth-child(4n+2) span i { background: var(--lilac) }
  .bar:nth-child(4n+3) span i { background: var(--aqua) }
  .bar:nth-child(4n) span i { background: var(--lime) }
  .bar em { font-style: normal; font-weight: 700; text-align: right }
  .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 10px 0 0 }
  .panel { padding: 20px 22px 16px; border: var(--rule); border-radius: var(--r) }
  .panel h3 { margin: 0 0 8px; font-size: 20px }
  .panel p { font-size: 15.5px }

  /* ---------- home: demo guide steps ---------- */
  .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0 28px; counter-reset: step }
  .steps li { position: relative; padding: 54px 16px 16px; border: var(--rule); border-radius: var(--r); font-size: 15.5px; line-height: 1.5; counter-increment: step }
  .steps li::before { content: counter(step); position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r); background: var(--black); color: var(--lime); font-family: var(--f-mono); font-size: 14px; font-weight: 700 }
  .steps b { display: block; margin-bottom: 6px; font-family: var(--f-head); font-size: 18px; line-height: 1.2; letter-spacing: -.01em }

  /* ---------- home: studio dossier ---------- */
  .dossier { display: grid; grid-template-columns: 210px minmax(0, 1fr); margin: 20px 0 22px; border: var(--rule); border-radius: var(--r); overflow: hidden }
  .dossier dt, .dossier dd { padding: 12px 16px; border-bottom: 1px solid var(--line) }
  .dossier dt { background: var(--line); font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom-color: #dcd9cb }
  .dossier dd { font-size: 15.5px; line-height: 1.55 }
  .dossier dd small { display: block; margin-top: 3px; font-size: 12px; color: var(--gray) }
  .dossier dt:last-of-type, .dossier dd:last-of-type { border-bottom: 0 }

  /* ---------- review: title board, reading grid, fact file ---------- */
  .title-board h1 { margin: 0 0 26px; font-size: clamp(38px, 4.4vw, 60px) }
  .title-board .lead { margin: 26px 0 0; font-size: 19px }
  .title-board .chips { margin: 28px 0 0 }
  .title-art { overflow: hidden; border-radius: var(--r); background: var(--line) }
  .title-art img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover }
  .meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 18px 0 0; font-family: var(--f-mono); font-size: 12.5px; color: var(--gray) }
  .meta b { color: var(--black) }
  .read { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; margin: 56px 0 0 }
  .read-main { min-width: 0 }
  .read-main > h2 { margin-top: 1.8em; padding-bottom: 14px; border-bottom: var(--rule) }
  .read-main > h2:first-child { margin-top: 0 }
  .read-main ul, .read-main ol { padding-left: 1.3em; margin: .6em 0 1em }
  .read-main li { margin: .3em 0 }
  .read-main li::marker { color: var(--rasp) }
  .read-side { position: sticky; top: 24px; display: grid; gap: 16px }
  .factfile { padding: 20px 20px 16px; border: var(--rule); border-radius: var(--r) }
  .factfile-head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px }
  .factfile-head img { width: 54px; height: 54px; border-radius: var(--r); object-fit: cover }
  .factfile-head b { display: block; font-family: var(--f-head); font-size: 18px; line-height: 1.15; letter-spacing: -.01em }
  .factfile-head span { font-family: var(--f-mono); font-size: 11px; color: var(--gray) }
  .factfile dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0; border-top: var(--rule) }
  .factfile dt, .factfile dd { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums }
  .factfile dt { padding-right: 12px; font-size: 11px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: .04em }
  .factfile dd { font-weight: 700; text-align: right }
  .factfile-src { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--gray) }
  .toc { padding: 16px 18px; border: var(--rule); border-radius: var(--r) }
  .toc b { display: block; margin: 0 0 8px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--rasp) }
  .toc ol { counter-reset: toc; display: grid; gap: 5px }
  .toc li { counter-increment: toc; font-size: 14.5px; line-height: 1.4 }
  .toc li::before { content: counter(toc, decimal-leading-zero) " "; font-size: 11px; color: var(--rasp) }
  .toc a { color: var(--black); text-decoration: none }
  .toc a:hover { text-decoration: underline; color: var(--rasp) }

  /* our session: tiles and the balance chart */
  .tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0 22px }
  .tally li { padding: 14px 14px 12px; border: var(--rule); border-top: 4px solid var(--aqua); border-radius: var(--r) }
  .tally b { display: block; font-family: var(--f-head); font-size: 24px; line-height: 1.15; letter-spacing: -.01em }
  .tally span { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--gray) }
  .tally li:nth-child(2) { border-top-color: var(--lilac) }
  .tally li:nth-child(3) { border-top-color: var(--pink) }
  .tally li:nth-child(4) { border-top-color: var(--lime) }
  .shot--chart .shot-pic { background: var(--cream); border: var(--rule) }

  /* related slots */
  .next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 18px 0 28px }
  .next a { display: flex; align-items: center; gap: 12px; padding: 10px; border: var(--rule); border-radius: var(--r); color: var(--black); font-family: var(--f-head); font-weight: 700; font-size: 16px; line-height: 1.25; letter-spacing: -.01em; text-decoration: none; transition: background .15s }
  .next a:hover { background: var(--lime); color: var(--black) }
  .next img { flex: none; width: 52px; height: 52px; border-radius: var(--r); object-fit: cover }

  /* about page */
  .about-head h1 { margin: 0 0 .35em }
  .note { margin: 22px 0; padding: 16px 18px; border-radius: var(--r); background: var(--line); font-size: 15.5px }
}

/* ---------- tablet: a narrower rail; the fact file joins the column ---------- */
@media (max-width: 1180px) {
  :root { --rail: 212px; --gap: 24px }
  .rail { padding: 22px 14px 16px }
  .rail-brand img { width: 176px; height: 38px }
  .nav a { font-size: 16.5px; padding: 9px 10px }
  .nav a[aria-current]::before { left: -14px }
  .read { grid-template-columns: minmax(0, 1fr) }
  .read-side { position: static; grid-row: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .dex-head, .dex-row { grid-template-columns: 64px minmax(0, 1fr) 84px 96px 132px 32px }
  .dex-head span:nth-child(5), .dex-row > .dex-cell--buy { display: none }
  .dex-pic { width: 64px; height: 64px }
}
@media (max-width: 960px) {
  .board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h1" "lead" "art" "chips" }
  .board .lead { margin: 0 0 18px }
  .board-art { justify-self: center; width: 100%; max-width: 620px; margin: 0 }
  .wall { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .colophon-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .colophon-tiles .tile:first-child { grid-column: 1 / -1 }
}

/* ---------- phones: a black top bar with the logo, a black tab bar at the bottom, one column ---------- */
@media (max-width: 760px) {
  :root { --gap: 14px }
  html { scroll-padding-top: 16px }
  body { font-size: 16.5px; line-height: 1.62 }
  .rail { position: static; inset: auto; width: auto; padding: 0; border: 0; background: none; display: contents }
  .rail-brand, .rail-note, .rail-top { display: none }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--black) }
  .topbar img { width: 174px; height: 38px }
  .topbar b { display: inline-grid; place-items: center; height: 30px; padding: 0 10px; border-radius: var(--r); background: var(--lime); color: var(--black); font-family: var(--f-mono); font-size: 12px }
  .rail-meter { display: block; position: fixed; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); left: 0; right: 0; height: 3px; z-index: 46 }
  .rail-meter i { transform-origin: left; transform: scaleX(var(--read, 0)) }
  .nav {
    position: fixed; inset: auto 0 0 0; z-index: 45; flex-direction: row; gap: 0; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--black);
  }
  .nav a { flex: 1 1 0; flex-direction: column; gap: 3px; min-width: 0; padding: 7px 2px 6px; border-radius: var(--r); color: rgba(255, 253, 238, .82); font-size: 11px; font-weight: 600; text-align: center }
  .nav a span { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
  .nav svg { width: 22px; height: 22px }
  .nav a[data-wide] { display: none }
  .nav a:hover { background: transparent; color: var(--lime) }
  .nav a[aria-current] { color: var(--lime); background: rgba(214, 254, 133, .1) }
  .nav a[aria-current]::before { left: 20%; right: 20%; top: -6px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 2px 2px }
  .app { margin-left: 0; padding: 16px var(--gap) calc(92px + env(safe-area-inset-bottom, 0px)) }
  .board { padding: 4px 0 28px }
  .title-board { padding: 0 0 26px }
  .block { margin-top: 56px }
  h1 { font-size: clamp(34px, 10.5vw, 46px) }
  h2 { font-size: 28px }
  .lead, .board .lead, .title-board .lead { font-size: 17.5px }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .board .chips, .title-board .chips { margin-top: 22px }
  .title-board .lead { margin-top: 20px }
  .title-art img { aspect-ratio: 16 / 10 }
  .read { margin-top: 40px }
  .band { margin: 20px 0 24px }
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .wall span { display: none }
  .dex-head { display: none }
  /* phones: a ruled button shows the current order; the four choices open in a card under it */
  .dex-tools { gap: 10px; margin: 14px 0 12px }
  .dex-find-input { left: 43px; width: calc(100% - 43px); font-size: 16px }
  .dex-pick { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 14px; border: var(--rule); border-radius: var(--r); background: transparent; color: var(--black); font-family: var(--f-mono); font-size: 14px; font-weight: 700; line-height: 1.2 }
  .dex-pick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s }
  .dex-tools.is-open .dex-pick { background: var(--black); color: var(--cream) }
  .dex-tools.is-open .dex-pick svg { transform: rotate(180deg) }
  .dex-keys { position: absolute; top: calc(100% + 6px); left: 0; display: none; flex-direction: column; gap: 2px; min-width: 210px; padding: 6px; border-radius: var(--r); background: var(--black) }
  .dex-tools.is-open .dex-keys { display: flex }
  .dex-keys button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: var(--r); background: none; color: var(--cream); text-align: left; font-size: 14px }
  .dex-keys button:hover { background: rgba(255, 253, 238, .1) }
  .dex-keys button[aria-pressed="true"] { background: transparent; color: var(--lime) }
  .dex-keys button[aria-pressed="true"]::after { content: ""; width: 11px; height: 6px; margin: -3px 2px 0 0; border-left: 2.4px solid var(--lime); border-bottom: 2.4px solid var(--lime); transform: rotate(-45deg) }
  /* phones: each slot is a big tile with the name and arrow beside it, then the line and a 4-cell spec strip across */
  .dex { border-bottom: 0 }
  .dex-row { grid-template-columns: 92px minmax(0, 1fr) 32px; grid-template-areas: "pic name go" "line line line" "stats stats stats"; gap: 12px 14px; padding: 18px 0; border-bottom: var(--rule) }
  .dex-row:last-child { border-bottom: var(--rule) }
  .dex-row:hover { background: none }
  .dex-row > .dex-pic { grid-area: pic; width: 92px; height: 92px }
  .dex-row > .dex-name { display: contents }
  .dex-name a { grid-area: name; font-size: 22px; line-height: 1.08 }
  .dex-name small { grid-area: line; margin: 0; font-size: 15px; line-height: 1.5; color: var(--black) }
  .dex-row > .dex-go { grid-area: go }
  .dex-row > .dex-cell { display: none }
  .bar { grid-template-columns: 104px minmax(0, 1fr) 44px; gap: 10px; font-size: 13.5px }
  .split, .terms, .steps, .next, .colophon-tiles { grid-template-columns: minmax(0, 1fr) }
  .colophon-tiles .tile:first-child { grid-column: auto }
  .colophon { margin-top: 56px; padding: 22px 16px 18px }
  .dossier { grid-template-columns: minmax(0, 1fr) }
  .dossier dt { border-bottom: 0; padding-bottom: 4px }
  .dossier dd { padding-top: 4px }
  .read-side { grid-template-columns: minmax(0, 1fr) }
  .toc { display: none }
  .tally { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .table { font-size: 14.5px }
  .table th, .table td { padding: 9px 12px }
  .faq summary { font-size: 17.5px }
  .faq .faq-a { padding-right: 0 }
}
/* the spec strip of a slot on phones: four equal cells with the palette bars on top, label over figure */
.dex-mini { grid-area: stats; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px }
.dex-mini > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px 7px; border: var(--rule); border-top: 4px solid var(--aqua); border-radius: var(--r); text-align: center; font-family: var(--f-mono); font-size: 13.5px; font-weight: 700; line-height: 1.15 }
.dex-mini > span:nth-child(2) { border-top-color: var(--pink) }
.dex-mini > span:nth-child(3) { border-top-color: var(--lilac) }
.dex-mini > span:nth-child(4) { border-top-color: var(--lime) }
.dex-mini > span small { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray) }
.dex-mini abbr { text-decoration: none }
@media (max-width: 370px) {
  .dex-row { grid-template-columns: 80px minmax(0, 1fr) 30px }
  .dex-row > .dex-pic { width: 80px; height: 80px }
  .dex-name a { font-size: 20px }
  .dex-mini { gap: 4px }
  .dex-mini > span { font-size: 12px; padding: 7px 2px 6px }
}
@media (min-width: 761px) {
  .dex-mini { display: none }
}

@layer demo {
  /* the demo window, light: a ruled cream frame around the dark game screen and its bar, the partner offer on a grey card beside it
     (under it on narrow screens). One black main button with the raspberry arrow square, an outlined second one; the bonus is a light card, not a button. */
  .demo { margin: 32px 0 0 }
  .demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 264px; grid-template-areas: "screen offer" "bar offer"; gap: 12px 16px; padding: 14px; border: var(--rule); border-radius: var(--r); background: var(--cream) }
  .demo-screen { grid-area: screen; position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: #000; isolation: isolate; container: screen / inline-size }
  .demo-screen:fullscreen { aspect-ratio: auto; border-radius: 0 }
  .demo-screen picture, .demo-poster { position: absolute; inset: 0; width: 100%; height: 100% }
  .demo-poster { object-fit: cover }
  .demo-screen::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .3); pointer-events: none }
  /* start: a cream plate with the raspberry play square */
  .demo-start { position: absolute; left: 50%; top: 50%; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 8px 22px 8px 8px; border: 0; border-radius: var(--r); background: var(--cream); color: var(--black); transform: translate(-50%, -50%); transition: background .15s }
  .demo-start:hover { background: var(--lime) }
  .demo-start-disc { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 3px; background: var(--rasp); transition: background .15s }
  .demo-start:hover .demo-start-disc { background: var(--black) }
  .demo-start-disc svg { width: 24px; height: 24px; margin-left: 3px; fill: var(--cream) }
  .demo-start-text { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left }
  .demo-start-text b { font-family: var(--f-head); font-size: 22px; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap }
  .demo-start-text small { font-family: var(--f-mono); font-size: 11.5px; color: var(--gray) }
  .demo-frame { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; border: 0; background: #000 }
  .demo.is-live .demo-screen picture, .demo.is-live .demo-start, .demo.is-live .demo-screen::before { display: none }

  /* gift sticker in the corner of the screen; the card slides out on hover */
  .demo-gift { position: absolute; top: 14px; right: 14px; z-index: 5; display: flex; flex-direction: row-reverse; align-items: center; gap: 10px; color: var(--black); text-decoration: none }
  .demo-gift:popover-open { inset: 14px 14px auto auto; margin: 0; padding: 0; border: 0; background: none; overflow: visible }
  .demo-gift-face { display: grid; place-items: center; width: 54px; height: 54px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55)); animation: gift-wiggle 6s ease-in-out infinite }
  .demo-gift-face svg { width: 100%; height: 100% }
  .demo-gift-card { display: flex; flex-direction: column; max-width: 210px; padding: 9px 13px; border-radius: var(--r); background: var(--lime); opacity: 0; transform: translateX(12px); pointer-events: none; transition: opacity .18s, transform .18s }
  .demo-gift-card b { font-family: var(--f-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase }
  .demo-gift-card span { font-family: var(--f-head); font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em }
  .demo-gift:hover .demo-gift-card, .demo-gift:focus-visible .demo-gift-card { opacity: 1; transform: none }
  .demo-gift:hover .demo-gift-face { animation: none; transform: rotate(-8deg) scale(1.05) }
  .demo-full-mini { display: none }

  /* reminder: a compact card inside the game screen. After a minute of play it unfolds from the gift's spot and the gift flies up
     into it with star sparks, a lime glow and one sweep of light; "Keep playing the demo", the veil or Escape fold it back.
     Full screen is never left: the screen block itself may be the full-screen element (phones, our Full screen button), and over
     the game's own full screen the layer becomes a manual popover in the top layer, like the gift. */
  .demo-pop { position: absolute; inset: 0; z-index: 6 }
  .demo-pop:popover-open { inset: 0; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: hidden }
  .demo-pop[hidden] { display: none }
  .demo-pop-veil { position: absolute; inset: 0; background: radial-gradient(50% 60% at 50% 50%, rgba(214, 254, 133, .18), transparent 72%), rgba(0, 0, 0, .64); opacity: 0; transition: opacity .4s ease; cursor: pointer }
  .demo-pop.is-open .demo-pop-veil { opacity: 1 }
  .demo-pop-card { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: 12px; width: min(400px, calc(100% - 24px)); height: fit-content; max-height: calc(100% - 16px); margin: auto; padding: 16px 18px 14px; overflow: hidden auto; scrollbar-width: none; border-radius: var(--r); background: var(--cream); color: var(--black); box-shadow: 0 0 0 1px var(--black), 0 18px 44px rgba(0, 0, 0, .45); transform-origin: 0 0; outline: none }
  .demo-pop-head > :not(.demo-pop-slot), .demo-pop-main { opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease }
  .demo-pop.is-landed .demo-pop-head > :not(.demo-pop-slot), .demo-pop.is-landed .demo-pop-main { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s ease }
  .demo-pop.is-landed .demo-pop-main { transition-delay: .08s }
  .demo-pop-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .8) 50%, transparent 62%); transform: translateX(-110%); pointer-events: none }
  .demo-pop.is-landed .demo-pop-card::after { animation: pop-shine 1.1s ease .15s both }
  .demo-pop-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "slot tag" "slot title"; align-items: center; gap: 6px 14px }
  .demo-pop-slot { grid-area: slot; position: relative; width: 56px; height: 56px }
  .demo-pop-slot::before { content: ""; position: absolute; inset: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(214, 254, 133, .95) 0, rgba(214, 254, 133, .45) 40%, rgba(214, 254, 133, 0) 70%); opacity: 0; transform: scale(.3) }
  .demo-pop.is-landed .demo-pop-slot::before { animation: pop-halo 1.2s ease-out both, pop-glow 3.2s ease-in-out 1.2s infinite }
  .demo-pop-gift { position: absolute; z-index: 3; display: grid; place-items: center; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .3)); pointer-events: none }
  .demo-pop-gift svg { width: 100%; height: 100% }
  .demo-pop-slot > .demo-pop-gift { inset: 0; z-index: 1; animation: pop-bob 3.2s ease-in-out infinite }
  .demo-pop-head .demo-tag { grid-area: tag; justify-self: start; align-self: end }
  .demo-pop-title { grid-area: title; align-self: start; font-family: var(--f-head); font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em }
  .demo-pop-main { display: flex; flex-direction: column; gap: 10px }
  .demo-pop-main > *, .demo-pop-head > * { margin: 0 }
  .demo-pop-text { font-size: 14px; line-height: 1.45 }
  .demo-pop-bonus { padding: 8px 12px; border-radius: var(--r); background: var(--lime); font-family: var(--f-head); font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em }
  .demo-pop-actions { display: flex; flex-wrap: wrap; gap: 8px }
  .demo-pop-actions .btn { flex: 1 1 150px; min-height: 42px; padding: 9px 14px; font-size: 13.5px }
  .demo-pop-actions .btn--go { padding-right: 7px }
  .demo-pop .demo-small { font-size: 11px }
  .demo-tag { align-self: flex-start; padding: 4px 10px; border-radius: var(--r); background: var(--black); font-family: var(--f-mono); font-size: 11px; font-weight: 700; color: var(--lime) }
  .demo-small { font-size: 12px; line-height: 1.45; color: var(--gray) }
  /* star sparks (site.js adds and removes them) */
  .demo-spark { position: absolute; z-index: 9; width: 16px; height: 16px; margin: -8px 0 0 -8px; background: var(--c); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); pointer-events: none; animation: spark-fly .9s cubic-bezier(.15, .8, .3, 1) both }
  .demo-gift.is-away { visibility: hidden }
  .demo-gift.is-back .demo-gift-face { animation: gift-back .6s cubic-bezier(.3, 1.5, .5, 1) }
  /* small desktop screens (narrow windows): a tighter card */
  @media (min-width: 761px) {
    @container screen (max-width: 600px) {
      .demo-pop-card { gap: 8px; padding: 12px 14px 10px }
      .demo-pop-head { grid-template-columns: 46px minmax(0, 1fr) }
      .demo-pop-slot { width: 46px; height: 46px }
      .demo-pop-title { font-size: 19px }
      .demo-pop-text { font-size: 13px }
      .demo-pop-bonus { padding: 6px 10px; font-size: 16px }
      .demo-pop-main { gap: 8px }
      .demo-pop-actions .btn { min-height: 38px; padding: 7px 12px; font-size: 12.5px }
    }
  }

  /* bar under the screen: the game name and an outlined full-screen button */
  .demo-bar { grid-area: bar; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 2px }
  .demo-bar-name { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
  .demo-bar-name b { font-family: var(--f-head); font-size: 20px; line-height: 1.15; letter-spacing: -.01em }
  .demo-bar-name span { font-family: var(--f-mono); font-size: 11.5px; color: var(--gray) }
  .demo-full { flex: none; min-height: 40px; padding: 8px 14px; font-size: 13.5px; background: transparent; color: var(--black); box-shadow: inset 0 0 0 1px var(--black) }
  .demo-full svg { width: 18px; height: 18px }
  .demo-full:hover { background: var(--lime); color: var(--black) }
  .demo-full:disabled { opacity: .4; cursor: default; background: transparent }

  /* offer card: country, logo with the casino name, the bonus on cream with a raspberry bar on top (like the chips; a filled colour looked like a button), the main button and the outlined bonus button */
  .demo-offer { grid-area: offer; display: grid; grid-template-columns: 60px minmax(0, 1fr); grid-template-areas: "geo geo" "brand casino" "bonus bonus" "real real" "take take" "small small"; align-content: start; align-items: center; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--line); color: var(--black) }
  .demo-geo { grid-area: geo; display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 12px; font-weight: 700 }
  .demo-geo img { width: 24px; height: 16px; border-radius: 2px; box-shadow: 0 0 0 1px var(--black); object-fit: cover }
  .demo-brand { grid-area: brand; display: grid; place-items: center; width: 60px; height: 60px; border: var(--rule); border-radius: var(--r); background: #fff; overflow: hidden }
  .demo-brand img { width: 100%; height: 100%; object-fit: cover }
  .demo-brand svg { width: 44px; height: 44px }
  .demo-casino { grid-area: casino; font-size: 14.5px; line-height: 1.4 }
  .demo-bonus { grid-area: bonus; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-top: 4px solid var(--rasp); border-radius: var(--r); background: var(--cream); color: var(--black) }
  .demo-bonus span { font-family: var(--f-mono); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rasp) }
  .demo-bonus b { font-family: var(--f-head); font-size: 18px; line-height: 1.25; letter-spacing: -.01em }
  .demo-real { grid-area: real; width: 100% }
  .demo-take { grid-area: take; width: 100% }
  .demo-take svg { width: 28px; height: 28px; margin: -6px 0 -6px -6px }
  .demo-offer .demo-small { grid-area: small }
  .demo-offer > * { margin: 0 }

  @keyframes spark-fly { 0% { opacity: 1; transform: translate(0, 0) scale(0) rotate(0) } 35% { opacity: 1; transform: translate(calc(var(--dx) * .6), calc(var(--dy) * .6)) scale(var(--s)) rotate(80deg) } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0) rotate(200deg) } }
  @keyframes pop-shine { to { transform: translateX(110%) } }
  @keyframes pop-halo { 0% { opacity: 0; transform: scale(.3) } 45% { opacity: 1; transform: scale(1.15) } 100% { opacity: .55; transform: scale(1) } }
  @keyframes pop-glow { 0%, 100% { opacity: .55; transform: scale(1) } 50% { opacity: .85; transform: scale(1.08) } }
  @keyframes pop-bob { 0%, 100% { transform: translateY(0) rotate(-3deg) } 50% { transform: translateY(-5px) rotate(3deg) } }
  @keyframes gift-back { 0% { transform: scale(.55) } 55% { transform: scale(1.14) rotate(-6deg) } 100% { transform: none } }
  @keyframes gift-wiggle { 0%, 84%, 100% { transform: none } 88% { transform: rotate(-9deg) scale(1.06) } 92% { transform: rotate(6deg) } 96% { transform: rotate(-3deg) } }

  @media (max-width: 960px) {
    .demo-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "screen" "bar" "offer" }
    .demo-offer { grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "geo geo geo" "brand casino casino" "bonus bonus bonus" "real real take" "small small small" }
  }
  @media (max-width: 760px) {
    .demo { margin-top: 24px }
    .demo-grid { padding: 10px; gap: 10px }
    .demo-screen { aspect-ratio: 2 / 3 }
    .demo.is-live .demo-screen { aspect-ratio: 9 / 16 }
    .demo-screen:fullscreen { aspect-ratio: auto }
    /* phones: the start button becomes a bar across the middle of the tall poster */
    .demo-start { inset: 50% 10px auto 10px; padding: 7px 12px 7px 7px; gap: 10px; transform: translateY(-50%) }
    .demo-start-disc { width: 46px; height: 46px }
    .demo-start-disc svg { width: 20px; height: 20px }
    .demo-start-text { min-width: 0 }
    /* scales with the phone (16px at 300px wide, 20px from 370px) and may wrap on the narrowest ones */
    .demo-start-text b { font-size: clamp(16px, 5.4vw, 20px); white-space: normal; text-wrap: balance }
    .demo-start-text small { font-size: 10.5px; line-height: 1.45 }
    .demo-gift { top: 10px; right: 10px }
    .demo-gift-face { width: 44px; height: 44px }
    .demo-gift-card { display: none }
    .demo-gift:popover-open { inset: 10px 10px auto auto }
    .demo.is-live .demo-full-mini { position: absolute; top: 10px; left: 10px; z-index: 5; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r); background: var(--cream); color: var(--black) }
    .demo-full-mini svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
    .demo-screen:fullscreen .demo-full-mini { display: none }
    .demo-bar .demo-full { display: none }
    .demo-pop-card { width: calc(100% - 20px); max-width: 380px; padding: 14px 14px 12px }
    .demo-pop-title { font-size: 20px }
    .demo-pop-actions .btn { flex: 1 1 100% }
    .demo-offer { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "geo geo" "brand casino" "bonus bonus" "real real" "take take" "small small"; padding: 14px }
    .demo-brand { width: 56px; height: 56px }
  }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important }
  }
}

/* ---------- pages of the slot index (23.10.2026): mono keys like the sort buttons under the dex, the current page black with lime
   (the colours of the rail), the position on the left in the head face of the table. Page 2+ opens with a short title board. ---------- */
@layer blocks {
  .dex-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0 }
  .dex-pager-pos { flex: 1 1 auto; font-family: var(--f-mono); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gray) }
  .dex-pager-pos b { font-size: 14px; color: var(--black) }
  .dex-pager-list { display: flex; align-items: center; gap: 6px }
  .dex-pager a, .dex-pager .cell { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 10px; border: var(--rule); border-radius: var(--r); color: var(--black); font-family: var(--f-mono); font-size: 14.5px; font-weight: 700; text-decoration: none; transition: background .15s }
  .dex-pager a:hover { background: var(--lime); color: var(--black) }
  .dex-pager .is-current { background: var(--black); color: var(--lime) }
  .dex-pager .is-off { border-color: var(--line); color: var(--gray-dark) }
  .dex-pager .gap { min-width: 20px; color: var(--gray); font-family: var(--f-mono); font-weight: 700 }
  .dex-pager svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round }
  .board--list h1 { font-size: clamp(30px, 3.6vw, 42px) }
  @media (max-width: 760px) {
    .dex-pager { justify-content: center }
    .dex-pager-pos { flex-basis: 100%; text-align: center }
  }
}