/* ==========================================================================
   Playtech Slot — site stylesheet (style.css)
   One file for every page.
     1. Shared theme  — "arcade ticket" design system: tokens, header, buttons, headings,
                        FAQ, footer, scroll-reveal, inner-page hero, breadcrumb, cards, bands.
                        Applies to every page.
     2. Page sections — rules that exist on one page only, each prefixed with that page's
                        body class (body.page-games, body.page-demo, body.page-download,
                        body.page-about, body.page-legal) so pages cannot affect each other.
   ========================================================================== */

/* ==========================================================================
   1. SHARED THEME
   ========================================================================== */

:root {
  /* palette taken from the logo / icon: deep navy + white, with blue tints */
  --paper: #f2f4fb;
  --paper-2: #e2e8f7;
  --white: #ffffff;
  --ink: #141a4d;
  /* logo navy */
  --ink-2: #262e6b;
  --muted: #4a5080;
  --blue: #1f2fa0;
  /* royal navy for big colour blocks */
  --accent: #3d56f0;
  /* bright brand blue: shadows, zigzags, meters */
  --accent-lt: #7d8fff;
  /* same blue, lifted for dark backgrounds */
  --tint: #c4cfff;
  /* pale periwinkle: stickers, highlights */

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --max: 1200px;
  --header-h: 72px;

  /* paper grain and the footer's zigzag edge are inline SVG */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .075 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --zig-tint: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='10'><path d='M0 8 L7 2 L14 8 L21 2 L28 8' fill='none' stroke='%23c4cfff' stroke-width='3' stroke-linejoin='miter'/></svg>");
  color-scheme: light;
}

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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--grain), var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: var(--tint);
  color: var(--ink);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

[hidden] {
  display: none !important;
}

p {
  color: var(--muted);
}

a {
  color: var(--blue);
  text-decoration: none;
}

p a,
dd a,
.tips-col li a,
.steps-list li a,
.spec-list li a,
.feature-copy a,
.accordion-panel a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--tint);
  text-underline-offset: 3px;
  transition: background 0.15s ease;
}

p a:hover,
dd a:hover,
.tips-col li a:hover,
.steps-list li a:hover,
.spec-list li a:hover,
.feature-copy a:hover,
.accordion-panel a:hover {
  background: var(--tint);
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

#features :focus-visible,
.apk-section :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible {
  outline-color: var(--tint);
}

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font);
  font-weight: 800;
  font-stretch: 108%;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
}

main h2:not(.sr-only) {
  font-size: clamp(2.05rem, 4.8vw, 3.9rem);
  font-stretch: 114%;
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin-bottom: 48px;
  text-wrap: balance;
}

h3 {
  font-size: 1.2rem;
  margin-bottom: 14px;
}

.section {
  position: relative;
  padding: clamp(72px, 9vw, 128px) 0;
}

.section-lead {
  max-width: 60ch;
  margin: -20px 0 44px;
  font-size: 1.12rem;
  color: var(--muted);
}

.apk-eyebrow,
.faq-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- Buttons: pressable, hard-shadowed ---------- */
.btn {
  --sh: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font: 700 0.98rem/1 var(--font);
  font-stretch: 108%;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--sh);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.btn:hover {
  text-decoration: none;
  background: var(--white);
  color: var(--ink);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--sh);
}

.btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--sh);
}

.btn-primary {
  background: var(--tint);
}

.btn-primary:hover {
  background: #d6deff;
}

.btn-outline {
  background: var(--white);
}

.btn-outline:hover {
  background: var(--paper-2);
}

.button-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--grain), var(--paper);
  border-bottom: 2px solid var(--ink);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 28px;
  height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
}

/* The supplied logo is navy on white; multiply drops the white box on paper. */
.site-header .site-logo {
  width: 150px;
  height: auto;
  mix-blend-mode: multiply;
}

.primary-nav ul {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.primary-nav a {
  display: block;
  padding: 9px 14px;
  border: 2px solid transparent;
  border-radius: 6px;
  color: var(--ink);
  font: 500 0.8rem/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  background: var(--tint);
  border-color: var(--ink);
  text-decoration: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-register {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background-color: var(--ink);
  /* light sweep that glides across the button every few seconds */
  background-image: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%);
  background-repeat: no-repeat;
  background-size: 250% 100%;
  background-position: 160% 0;
  color: var(--white);
  font: 700 0.92rem/1 var(--font);
  font-stretch: 108%;
  box-shadow: 3px 3px 0 var(--accent);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  animation: cta-sheen 3.6s ease-in-out infinite, cta-hop 6s ease-in-out 1.5s infinite;
}

/* expanding ring: a soft "look here" pulse */
.header-register::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 8px;
  pointer-events: none;
  animation: cta-ring 2.4s ease-out infinite;
}

.header-register:hover {
  text-decoration: none;
  color: var(--white);
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--accent);
  animation: none;
}

.header-register:hover::after {
  animation: none;
}

.register-arrow {
  display: inline-block;
  font-size: 1.05em;
  line-height: 1;
  animation: cta-arrow 1.5s ease-in-out infinite;
}

.header-register:hover .register-arrow {
  animation: none;
  transform: translate(2px, -2px);
}

@keyframes cta-sheen {
  0% {
    background-position: 160% 0;
  }

  45%,
  100% {
    background-position: -60% 0;
  }
}

@keyframes cta-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(61, 86, 240, 0.75);
  }

  70%,
  100% {
    box-shadow: 0 0 0 15px rgba(61, 86, 240, 0);
  }
}

@keyframes cta-arrow {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(3px, -3px);
  }
}

/* every few seconds the button hops and wobbles once */
@keyframes cta-hop {

  0%,
  62%,
  100% {
    transform: none;
  }

  68% {
    transform: translateY(-5px) rotate(-2.5deg);
  }

  74% {
    transform: translateY(0) rotate(2deg);
  }

  80% {
    transform: translateY(-3px) rotate(-1.5deg);
  }

  86% {
    transform: translateY(0) rotate(1deg);
  }

  92% {
    transform: none;
  }
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-toggle .bar {
  display: block;
  width: 20px;
  height: 2.5px;
  background: var(--ink);
  transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.45, 1), opacity 0.2s ease, background 0.3s ease;
}

.nav-toggle {
  transition: background 0.3s ease;
}

.nav-toggle[aria-expanded="true"] {
  background: var(--ink);
  animation: toggle-pop 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.nav-toggle[aria-expanded="true"] .bar {
  background: var(--tint);
}

@keyframes toggle-pop {
  0% {
    transform: scale(1) rotate(0);
  }

  35% {
    transform: scale(0.8) rotate(-10deg);
  }

  70% {
    transform: scale(1.1) rotate(4deg);
  }

  100% {
    transform: scale(1) rotate(0);
  }
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

@media (max-width: 900px) {
  :root {
    --header-h: 66px;
  }

  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .nav-toggle {
    display: inline-flex;
  }

  /* menu = a full yellow poster of oversized links.
     It is revealed by a zigzag "payline" edge that sweeps down the screen. */
  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    padding: 12px 24px 40px;
    background: var(--grain), var(--tint);
    border-top: 2px solid var(--ink);
    overflow-y: auto;
    visibility: hidden;
    clip-path: polygon(0 0, 100% 0, 100% -24px, 90% 0px, 80% -24px, 70% 0px, 60% -24px, 50% 0px, 40% -24px, 30% 0px, 20% -24px, 10% 0px, 0% -24px);
    transition: clip-path 0.5s cubic-bezier(0.7, 0, 0.84, 0), visibility 0s linear 0.5s;
  }

  .primary-nav.is-open {
    visibility: visible;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 90% calc(100% + 24px), 80% 100%, 70% calc(100% + 24px), 60% 100%, 50% calc(100% + 24px), 40% 100%, 30% calc(100% + 24px), 20% 100%, 10% calc(100% + 24px), 0% 100%);
    transition: clip-path 0.8s cubic-bezier(0.55, 0.05, 0.2, 1), visibility 0s;
  }

  /* each link flips down into place like a slot reel coming to rest */
  .primary-nav ul {
    flex-direction: column;
    gap: 0;
    perspective: 800px;
  }

  .primary-nav li {
    opacity: 0;
    transform: rotateX(-88deg) translateY(26px);
    transform-origin: 50% 0;
    transition: opacity 0.2s ease, transform 0.25s ease;
  }

  .primary-nav.is-open li {
    opacity: 1;
    transform: none;
    transition: opacity 0.35s ease, transform 0.95s cubic-bezier(0.3, 1.5, 0.45, 1);
  }

  .primary-nav.is-open li:nth-child(1) {
    transition-delay: 0.2s;
  }

  .primary-nav.is-open li:nth-child(2) {
    transition-delay: 0.28s;
  }

  .primary-nav.is-open li:nth-child(3) {
    transition-delay: 0.36s;
  }

  .primary-nav.is-open li:nth-child(4) {
    transition-delay: 0.44s;
  }

  .primary-nav.is-open li:nth-child(5) {
    transition-delay: 0.52s;
  }

  .primary-nav a {
    padding: 18px 4px;
    border: 0;
    border-bottom: 2px solid var(--ink);
    border-radius: 0;
    font: 800 clamp(1.9rem, 9vw, 2.6rem)/1 var(--font);
    font-stretch: 118%;
    letter-spacing: -0.03em;
    text-transform: none;
  }

  .primary-nav a:hover {
    background: var(--ink);
    color: var(--tint);
    border-color: var(--ink);
    padding-left: 14px;
  }

  .primary-nav a[aria-current="page"] {
    background: var(--ink);
    color: var(--tint);
    padding-left: 14px;
  }

  .header-register {
    padding: 0 16px;
  }

  .site-header .site-logo {
    width: 124px;
  }
}

/* ---------- Hero: same structure, now a poster ---------- */
.hero {
  padding: 28px 24px 0;
}

.hero-inner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  max-width: var(--max);
  min-height: clamp(540px, 74vh, 680px);
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) clamp(24px, 5.5vw, 72px) clamp(112px, 11vw, 140px);
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 20px;
  box-shadow: 8px 8px 0 var(--ink);
  background: var(--ink) url("/images/background.webp") 62% center / cover no-repeat;
}

.hero-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.13) 1.1px, transparent 1.5px) 0 0 / 9px 9px,
    linear-gradient(90deg, rgba(20, 26, 77, 0.96) 0%, rgba(20, 26, 77, 0.86) 36%, rgba(20, 26, 77, 0.3) 68%, rgba(20, 26, 77, 0.02) 100%);
}


.hero-content {
  max-width: 720px;
  animation: pop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.hero h1 {
  font-size: clamp(1.8rem, 4.3vw, 3.4rem);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--white);
  text-shadow: 2px 2px 0 var(--accent);
  text-wrap: balance;
}

.hero-subheading {
  max-width: 56ch;
  margin-top: 28px;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.7;
  color: #e6e9fa;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 38px;
}

.hero .btn {
  --sh: var(--accent);
  border-color: var(--ink);
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Card reel: image-only strip of the supplied slot art (no text) ---------- */
.reel {
  overflow: hidden;
  padding: 52px 0 72px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.reel-track {
  display: flex;
  width: max-content;
  gap: 30px;
  padding-left: 30px;
  animation: reel 80s linear infinite;
  will-change: transform;
}

/* script.js takes over: it drifts the strip itself and lets you drag it (mouse or touch) */
.reel.is-js {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.reel.is-js.is-dragging {
  cursor: grabbing;
}

.reel.is-js .reel-track {
  animation: none;
}

.reel.is-js .reel-track img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.reel-track img {
  flex: none;
  width: 300px;
  height: auto;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transform: rotate(-1.6deg);
}

.reel-track img:nth-child(even) {
  transform: translateY(10px) rotate(1.4deg);
}

.reel-track img:nth-child(3n) {
  transform: translateY(-4px) rotate(-0.6deg);
}

@keyframes reel {
  to {
    transform: translateX(-50%);
  }
}

/* ---------- About: yellow block, four press-me tiles ---------- */
#about {
  background: var(--grain), var(--tint);
  border-block: 2px solid var(--ink);
}

.about-explorer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "text topics";
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.about-detail-area {
  grid-area: text;
  align-self: start;
  padding-top: clamp(0px, 3vw, 40px);
}

.about-detail-area h2 {
  margin-bottom: 32px !important;
}

.about-wheel {
  grid-area: topics;
  justify-self: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: min(100%, 460px);
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 9px 9px 0 var(--ink);
}

.about-slice {
  display: flex;
  min-width: 0;
  min-height: 0;
}

.about-slice h3 {
  flex: 1;
  display: flex;
  margin: 0;
  font-size: inherit;
  letter-spacing: inherit;
  font-stretch: inherit;
}

.about-slice button {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 20px;
  border: 0;
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: 800 clamp(0.95rem, 1.7vw, 1.15rem)/1.15 var(--font);
  font-stretch: 110%;
  letter-spacing: -0.02em;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.about-slice:nth-child(odd) button {
  border-right: 3px solid var(--ink);
}

.about-slice:nth-child(-n + 2) button {
  border-bottom: 3px solid var(--ink);
}

/* mirrored around the centre cross: every number badge sits the same distance from the centre line,
   labels grow away from it (top row stacks upward, bottom row downward), clear of the curved edge */
.about-slice:nth-child(1) button {
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: right;
  padding: 20px 18px 24px 56px;
}

.about-slice:nth-child(2) button {
  flex-direction: column-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding: 20px 56px 24px 18px;
}

.about-slice:nth-child(3) button {
  justify-content: flex-start;
  align-items: flex-end;
  text-align: right;
  padding: 24px 18px 20px 56px;
}

.about-slice:nth-child(4) button {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  padding: 24px 56px 20px 18px;
}

.about-slice button:hover {
  background: var(--tint);
}

.about-slice button:focus-visible {
  outline-offset: -7px;
}

.about-slice button[aria-expanded="true"] {
  background: var(--ink);
  color: var(--paper);
}

.about-slice-number {
  padding: 5px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.14em;
}

.about-slice button[aria-expanded="true"] .about-slice-number {
  background: var(--tint);
}

.about-detail>* {
  animation: pop 0.65s cubic-bezier(0.22, 0.8, 0.2, 1) both;
}

.about-detail>p {
  animation-delay: 0.09s;
}

@media (min-width: 861px) {
  .about-detail {
    min-height: 11rem;
  }

  /* the tallest topic at any desktop width is about 10.8rem: keeps the layout still while topics change */
}

.about-detail-number {
  display: block;
  margin-bottom: 6px;
  font: 800 clamp(2.8rem, 5vw, 4.5rem)/0.9 var(--font);
  font-stretch: 125%;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}

.about-detail p {
  max-width: 46ch;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--ink);
}

.about-detail p a {
  text-decoration-color: var(--ink);
}

@media (max-width: 860px) {
  .about-explorer {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "topics";
  }
}

/* ---------- Features: blue block, tabs + paper card ---------- */
#features {
  background: var(--grain), var(--blue);
  border-block: 2px solid var(--ink);
}

#features h2 {
  color: var(--white);
}

.feature-numbers {
  display: none;
}

.feature-panel {
  position: relative;
  margin-bottom: 14px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}

.feature-panel summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  font: 800 1.1rem/1.25 var(--font);
  font-stretch: 108%;
  list-style: none;
  cursor: pointer;
}

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

.feature-panel summary span {
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--blue);
}

.feature-panel summary::after {
  content: "+";
  margin-left: auto;
  font: 700 1.6rem/1 var(--mono);
  color: var(--ink);
}

.feature-panel[open] summary::after {
  content: "−";
}

.feature-copy {
  position: relative;
  padding: 4px 22px 28px;
}

.feature-panel-index {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 9px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--tint);
  font: 500 0.74rem/1 var(--mono);
  letter-spacing: 0.14em;
}

.feature-copy h3 {
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  font-stretch: 114%;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}

.feature-copy p {
  max-width: 50ch;
  font-size: 1.12rem;
  line-height: 1.75;
  color: var(--muted);
}

@media (min-width: 769px) {
  .is-enhanced .feature-stage {
    display: grid;
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.7fr);
    gap: clamp(28px, 4vw, 60px);
    align-items: stretch;
  }

  .is-enhanced .feature-numbers {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .feature-numbers button {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 19px 20px;
    border: 2px solid var(--paper);
    border-radius: 10px;
    background: transparent;
    color: var(--white);
    font: 700 1.05rem/1.25 var(--font);
    font-stretch: 106%;
    text-align: left;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;
  }

  .feature-nav-number {
    font: 500 0.78rem/1 var(--mono);
    letter-spacing: 0.14em;
    opacity: 0.85;
  }

  .feature-nav-arrow {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .feature-numbers button:hover {
    background: rgba(255, 255, 255, 0.14);
  }

  .feature-numbers button[aria-current] {
    border-color: var(--ink);
    background: var(--tint);
    color: var(--ink);
    transform: translate(-3px, -3px);
    box-shadow: 5px 5px 0 var(--ink);
  }

  .feature-numbers button[aria-current] .feature-nav-arrow {
    opacity: 1;
  }

  .is-enhanced .feature-panel summary {
    display: none;
  }

  .is-enhanced .feature-panel:not([open]) {
    display: none;
  }

  .is-enhanced .feature-panels {
    display: flex;
  }

  .is-enhanced .feature-panel {
    border-radius: 20px;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 360px;
    margin: 0;
    box-shadow: 8px 8px 0 var(--ink);
  }

  /* halftone fade in the corner of the card */
  .is-enhanced .feature-panel::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46%;
    background: radial-gradient(circle at 2px 2px, rgba(31, 47, 160, 0.5) 1.8px, transparent 2.3px) 0 0 / 12px 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
    mask-image: linear-gradient(90deg, transparent, #000);
    pointer-events: none;
  }

  .is-enhanced .feature-copy {
    z-index: 1;
    padding: clamp(32px, 5vw, 64px);
  }

  .is-enhanced .feature-panel[open] .feature-copy>* {
    animation: pop 0.65s cubic-bezier(0.22, 0.8, 0.2, 1) both;
  }

  .is-enhanced .feature-panel[open] .feature-copy> :nth-child(2) {
    animation-delay: 0.07s;
  }

  .is-enhanced .feature-panel[open] .feature-copy> :nth-child(3) {
    animation-delay: 0.14s;
  }
}

/* Where the accordion header is visible (phones, or no JavaScript) it already carries the title,
   so the repeated "01 / 04" tag and heading inside the panel are not shown a second time. */
@media (max-width: 768px) {
  .feature-numbers {
    display: none !important;
  }

  .feature-copy .feature-panel-index,
  .feature-copy h3 {
    display: none;
  }
}

.feature-track:not(.is-enhanced) .feature-copy .feature-panel-index,
.feature-track:not(.is-enhanced) .feature-copy h3 {
  display: none;
}

/* ---------- Popular slots: perforated tickets ---------- */
.game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px 24px;
  padding: 0 6px 8px 0;
}

.game-card {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.game-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}

.game-card>a {
  display: block;
  overflow: hidden;
  background: var(--ink);
}

.game-card-thumb {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.game-card:hover .game-card-thumb {
  transform: scale(1.05);
}

.game-card-header {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 20px 18px 20px;
  border-top: 2px dashed var(--ink);
}

/* ticket notches */
.game-card-header::before,
.game-card-header::after {
  content: "";
  position: absolute;
  top: -13px;
  width: 24px;
  height: 24px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

.game-card-header::before {
  left: -14px;
}

.game-card-header::after {
  right: -14px;
}

.game-card h3 {
  margin: 0;
  font-size: 1.25rem;
  font-stretch: 108%;
  letter-spacing: -0.03em;
}

.game-card h3 a {
  color: var(--ink);
}

.game-card h3 a:hover {
  color: var(--blue);
  text-decoration: none;
}

.rtp-badge {
  justify-self: start;
  padding: 5px 9px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--tint);
  color: var(--ink);
  font: 500 0.74rem/1 var(--mono);
  letter-spacing: 0.1em;
}

/* arcade power-meter: segmented fill */
.rtp-progress {
  height: 16px;
  padding: 2px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--paper);
}

.rtp-progress-fill {
  display: block;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 10px);
}

@media (max-width: 768px) {
  .game-card.is-active {
    box-shadow: 9px 9px 0 var(--ink);
    transform: translate(-3px, -3px);
  }
}

/* ---------- APK: ink block with a ticket stub ---------- */
.apk-section {
  background: var(--grain), var(--ink);
  color: var(--paper);
  border-block: 2px solid var(--ink);
}

.apk-section p {
  color: #cfd5f2;
}

.apk-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  overflow: hidden;
  border: 2px solid var(--paper);
  border-radius: 20px;
}

.apk-overview {
  padding: clamp(32px, 5vw, 64px);
}

.apk-eyebrow {
  color: var(--tint);
}

.apk-overview h2 {
  color: var(--paper);
  margin-bottom: 22px !important;
  font-size: clamp(2rem, 4vw, 3.2rem) !important;
}

.apk-intro {
  max-width: 44ch;
  font-size: 1.1rem;
}

.apk-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 56px;
  margin: 34px 0 26px;
  padding: 24px 0;
  border-block: 2px dashed rgba(242, 244, 251, 0.4);
}

.apk-specs dt {
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b9c0e6;
  margin-bottom: 8px;
}

.apk-specs dd {
  font: 800 3.4rem/1 var(--font);
  font-stretch: 118%;
  letter-spacing: -0.05em;
  color: var(--tint);
}

.apk-specs dd span {
  margin-left: 5px;
  font: 500 0.9rem var(--mono);
  letter-spacing: 0;
  color: var(--paper);
}

.apk-devices {
  margin-top: 8px;
  font: 500 0.82rem/1.6 var(--mono);
  letter-spacing: 0.04em;
  color: #b9c0e6 !important;
}

.apk-section p a,
.apk-section dd a {
  color: var(--tint);
  text-decoration-color: var(--tint);
}

.apk-section p a:hover {
  background: var(--tint);
  color: var(--ink);
}

.apk-download {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 52px);
  background: var(--tint);
  color: var(--ink);
  border-left: 3px dashed var(--ink);
}

/* stub notches */
.apk-download::before,
.apk-download::after {
  content: "";
  position: absolute;
  left: -15px;
  width: 26px;
  height: 26px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--ink);
}

.apk-download::before {
  top: -14px;
}

.apk-download::after {
  bottom: -14px;
}

.apk-section .apk-download p {
  color: var(--ink-2);
}

.apk-file-label {
  display: flex;
  justify-content: space-between;
  font: 500 0.74rem/1 var(--mono);
  letter-spacing: 0.16em;
}

.apk-download-symbol {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 32px 0 22px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
  color: var(--tint);
  font-size: 2rem;
  box-shadow: 4px 4px 0 var(--accent);
}

.apk-download h3 {
  margin-bottom: 8px;
  font-size: 1.9rem;
  font-stretch: 114%;
  letter-spacing: -0.04em;
}

.apk-download>p {
  margin-bottom: 28px;
}

.apk-download-button {
  --sh: var(--accent);
  width: 100%;
  min-height: 58px;
  margin-top: auto;
  background: var(--ink);
  color: var(--paper);
  font-size: 1.02rem;
}

.apk-download-button:hover {
  background: var(--ink-2);
  color: var(--paper);
}

.apk-guide-link {
  margin-top: 18px;
  text-align: center;
  color: var(--ink);
  font: 500 0.8rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.apk-guide-link:hover {
  color: var(--ink);
  background: rgba(20, 26, 77, 0.1);
}

.apk-install {
  margin-top: 64px;
}

.apk-install-heading {
  margin-bottom: 28px;
}

.apk-install-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-bottom: 30px;
}

.apk-install-steps li {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 26px;
  border: 2px dashed rgba(242, 244, 251, 0.5);
  border-radius: 14px;
}

.apk-step-number {
  font: 800 3.6rem/0.95 var(--font);
  font-stretch: 125%;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--tint);
}

.apk-install-steps p {
  font-size: 0.98rem;
}

/* ---------- Steps (demo + login): big outlined numerals ---------- */
.steps-list {
  counter-reset: step;
}

.steps-list>li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px 20px;
  align-items: center;
  padding: 22px 0;
  border-top: 2px solid var(--ink);
  color: var(--ink-2);
  font-size: 1.12rem;
  line-height: 1.65;
}

.steps-list>li:last-child {
  border-bottom: 2px solid var(--ink);
}

.steps-list>li::before {
  content: counter(step);
  grid-row: 1 / span 3;
  align-self: start;
  font: 800 3.4rem/0.95 var(--font);
  font-stretch: 125%;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
}

.steps-list h3 {
  margin-bottom: 4px;
  font-size: 1.3rem;
}

.steps-list p {
  font-size: 1.02rem;
  color: var(--muted);
}

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

/* CTA boxes */
.cta-box {
  position: relative;
  padding: 32px;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--ink);
}

.cta-box h3 {
  font-size: 1.6rem;
  font-stretch: 112%;
  letter-spacing: -0.035em;
}

.cta-box p {
  margin-bottom: 22px;
}

/* demo card: blue block with fanned game art */
.home-demo-art {
  display: grid;
  gap: 30px;
  justify-items: center;
  padding-top: 44px;
  background:
    radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.22) 1.6px, transparent 2.1px) 0 0 / 12px 12px,
    var(--blue);
}

.art-fan {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 8.6;
}

.art-fan img {
  position: absolute;
  width: 54%;
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.art-fan .fan-a {
  left: 0;
  top: 16%;
  transform: rotate(-8deg);
}

.art-fan .fan-b {
  right: 0;
  top: 16%;
  transform: rotate(8deg);
}

.art-fan .fan-c {
  left: 20%;
  top: 0;
  z-index: 2;
  width: 60%;
}

.home-demo-art:hover .fan-a {
  transform: rotate(-12deg) translateX(-8px);
}

.home-demo-art:hover .fan-b {
  transform: rotate(12deg) translateX(8px);
}

.home-demo-art:hover .fan-c {
  transform: translateY(-6px);
}

.home-demo-art .button-stack {
  justify-content: center;
}

/* ---------- Login ---------- */
#login {
  background: var(--grain), var(--paper-2);
  border-block: 2px solid var(--ink);
}

#login .steps-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 36px;
  padding-right: 6px;
}

#login .steps-list>li,
#login .steps-list>li:last-child {
  display: block;
  padding: 24px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 5px 5px 0 var(--ink);
}

#login .steps-list>li::before {
  display: block;
  margin-bottom: 14px;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  padding-right: 6px;
}

.tips-col {
  padding: 28px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 6px 6px 0 var(--ink);
}

.tips-col h3 {
  font-size: 1.3rem;
  margin-bottom: 18px;
  letter-spacing: -0.03em;
}

.tips-col li {
  position: relative;
  padding: 0 0 12px 28px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

.tips-col li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border: 2px solid var(--ink);
  background: var(--accent);
  transform: rotate(45deg);
}

#login .cta-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--paper);
  background: linear-gradient(160deg, var(--blue) 0%, var(--ink) 85%);
}

#login .cta-box h3 {
  color: var(--paper);
}

#login .cta-box p {
  color: #dbe0f7;
}

#login .cta-box {
  box-shadow: 7px 7px 0 var(--accent);
}

#login .cta-box .btn {
  --sh: var(--accent);
}

#login .cta-box .button-stack {
  flex-wrap: nowrap;
  gap: 12px;
}

#login .cta-box .button-stack .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 12px;
}

/* Responsible gaming: serious, ink card */
#responsible-gaming .cta-box {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 7px 7px 0 var(--accent);
}

#responsible-gaming .cta-box h3 {
  color: var(--tint);
}

#responsible-gaming .cta-box p {
  margin-bottom: 0;
  color: #dbe0f7;
}

/* ---------- FAQ ---------- */
#faq .container {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}

.faq-intro {
  position: sticky;
  top: calc(var(--header-h) + 32px);
}

.faq-eyebrow {
  padding: 6px 10px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--paper-2);
  color: var(--ink);
}

.faq-intro h2 {
  margin-bottom: 22px !important;
  font-size: clamp(2.4rem, 5vw, 4.2rem) !important;
  line-height: 0.96;
}

.faq-intro h2 span {
  display: inline-block;
  padding: 0 0.14em 0.06em;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--tint);
  transform: rotate(-2deg);
  box-shadow: 4px 4px 0 var(--ink);
}

.faq-intro p {
  max-width: 34ch;
  font-size: 1.1rem;
}

.accordion {
  display: grid;
  gap: 14px;
  padding: 0 6px 6px 0;
}

.accordion-item {
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--white);
  box-shadow: 4px 4px 0 var(--ink);
  transition: background 0.35s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.accordion-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

.accordion-item.is-open {
  background: var(--tint);
}

.accordion-trigger {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.faq-number {
  font: 500 0.82rem/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--blue);
}

.accordion-item.is-open .faq-number {
  color: var(--ink);
}

.faq-question {
  font: 700 1.1rem/1.35 var(--font);
  font-stretch: 104%;
  letter-spacing: -0.015em;
}

.faq-category {
  display: block;
  margin-bottom: 4px;
  font: 500 0.7rem/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.accordion-item.is-open .faq-category {
  color: var(--ink-2);
}

.accordion-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  font: 700 1.4rem/1 var(--mono);
  transition: transform 0.4s cubic-bezier(0.22, 0.8, 0.2, 1), background 0.3s ease, color 0.3s ease;
}

.accordion-item.is-open .accordion-icon {
  transform: rotate(45deg);
  background: var(--ink);
  color: var(--tint);
}

.accordion-panel {
  padding: 0 20px 24px 70px;
}

.accordion-panel p {
  max-width: 60ch;
  font-size: 1.04rem;
  line-height: 1.75;
  color: var(--ink);
}

.accordion-panel a {
  text-decoration-color: var(--ink);
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  padding: 88px 0 44px;
  background: var(--grain), var(--ink);
  color: var(--paper);
}

/* payline edge along the top */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: var(--zig-tint) repeat-x 0 0 / 28px 10px;
}

.site-footer p {
  color: #b9c0e6;
}

.site-footer p a {
  color: var(--tint);
  text-decoration-color: var(--tint);
}

.site-footer p a:hover {
  color: var(--ink);
}

.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 52px;
}

.footer-brand p {
  max-width: 36ch;
  margin-top: 20px;
  font-size: 0.98rem;
}

.site-footer .site-logo {
  width: 150px;
  height: auto;
}

.footer-col h3 {
  margin-bottom: 18px;
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tint);
}

.footer-col li {
  margin-bottom: 12px;
}

.footer-col a {
  color: var(--paper);
  font-size: 1rem;
  font-weight: 500;
}

.footer-col a:hover {
  color: var(--tint);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-disclaimer {
  padding: 26px 0;
  border-top: 2px dashed rgba(242, 244, 251, 0.3);
}

.footer-disclaimer h2 {
  margin: 0 0 10px !important;
  font: 500 0.78rem/1 var(--mono) !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tint);
}

.footer-disclaimer p {
  max-width: 90ch;
  font-size: 0.92rem;
}

.footer-age-notice {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 0;
  border-top: 2px dashed rgba(242, 244, 251, 0.3);
}

.footer-age-notice p {
  font-size: 0.92rem;
}

.footer-age-notice strong {
  color: var(--paper);
}

.age-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--tint);
  color: var(--ink);
  font: 800 1rem var(--font);
  box-shadow: 3px 3px 0 var(--accent);
}

.footer-copy {
  padding-top: 22px;
  border-top: 2px dashed rgba(242, 244, 251, 0.3);
  font: 500 0.8rem/1.5 var(--mono);
  letter-spacing: 0.04em;
  color: #b9c0e6;
}

/* ---------- Scroll reveal (class added by script.js, homepage only) ---------- */
.reveal:not(.is-in) {
  opacity: 0;
}

.reveal.is-in {
  animation: reveal-up 0.9s cubic-bezier(0.22, 0.8, 0.2, 1) var(--d, 0s) backwards;
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(34px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .apk-panel {
    grid-template-columns: 1fr;
  }

  .apk-download {
    border-left: 0;
    border-top: 3px dashed var(--ink);
  }

  .apk-download::before,
  .apk-download::after {
    left: auto;
    top: -15px;
    bottom: auto;
  }

  .apk-download::before {
    left: -14px;
  }

  .apk-download::after {
    right: -14px;
  }

  #login .steps-list,
  .tips-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }

  #faq .container {
    grid-template-columns: 1fr;
  }

  .faq-intro {
    position: static;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .hero {
    padding: 16px 14px 0;
  }

  /* phones: the artwork sits on top, undimmed, and the text starts below it */
  .hero-inner {
    min-height: 0;
    padding: 272px 22px 40px;
    border-radius: 16px;
    box-shadow: 5px 5px 0 var(--ink);
    background: var(--ink) url("/images/background.webp") 79% 0 / auto 250px no-repeat;
  }

  .hero-inner::before {
    background: linear-gradient(180deg, rgba(20, 26, 77, 0) 0, rgba(20, 26, 77, 0) 165px, var(--ink) 252px);
  }

  /* the text column and the button row always span the whole panel, so the two buttons share it edge to edge */
  .hero-content,
  .games-art-copy,
  .demo-hero-copy {
    width: 100%;
    max-width: none;
  }

  .hero-cta {
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
  }

  .hero-cta .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 8px;
    font-size: 0.86rem;
  }

  .reel {
    padding: 36px 0 52px;
  }

  .reel-track img {
    width: 232px;
  }


  .about-wheel {
    width: min(100%, 340px);
    box-shadow: 6px 6px 0 var(--ink);
  }

  .about-slice button {
    gap: 7px;
    font-size: 0.86rem;
  }

  .about-slice-number {
    padding: 4px 8px;
    font-size: 0.7rem;
  }

  .about-slice:nth-child(1) button {
    padding: 14px 12px 18px 38px;
  }

  .about-slice:nth-child(2) button {
    padding: 14px 38px 18px 12px;
  }

  .about-slice:nth-child(3) button {
    padding: 18px 12px 14px 38px;
  }

  .about-slice:nth-child(4) button {
    padding: 18px 38px 14px 12px;
  }

  .game-grid {
    gap: 22px 14px;
  }

  .game-card {
    box-shadow: 4px 4px 0 var(--ink);
  }

  .game-card-header {
    padding: 16px 12px;
    gap: 10px;
  }

  .game-card-header::before {
    left: -14px;
  }

  .game-card h3 {
    font-size: 1.02rem;
  }

  .apk-install-steps {
    grid-template-columns: 1fr;
  }

  .apk-specs dd {
    font-size: 2.7rem;
  }

  .steps-list>li {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 4px 14px;
    font-size: 1.02rem;
  }

  .steps-list>li::before {
    font-size: 2.6rem;
  }

  .cta-box {
    padding: 24px;
    box-shadow: 5px 5px 0 var(--ink);
  }

  .accordion-trigger {
    grid-template-columns: 1fr auto;
    padding: 16px;
  }

  .faq-number {
    display: none;
  }

  .accordion-panel {
    padding: 0 16px 22px;
  }

  /* logo + blurb on top, then Pages (left) and Information (right) side by side */
  .footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 20px;
  }

  .footer-col a {
    font-size: 0.95rem;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {

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

  .reel-track {
    animation: none;
  }

  .header-register,
  .header-register::after,
  .register-arrow {
    animation: none;
  }

  .reveal:not(.is-in) {
    opacity: 1;
  }
}

/* ==========================================================================
   Shared inner-page components (games, demo, and the pages still to come)
   ========================================================================== */

/* ---------- Breadcrumb ---------- */
.breadcrumb-bar {
  background: var(--paper-2);
  border-bottom: 2px solid var(--ink);
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 0;
  font: 500 0.78rem/1.4 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.breadcrumb-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.breadcrumb-list li:not(:last-child)::after {
  content: "/";
  color: var(--accent);
  font-weight: 500;
}

.breadcrumb-list a {
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease;
}

.breadcrumb-list a:hover {
  background: var(--tint);
  color: var(--ink);
  text-decoration: none;
}

.breadcrumb-list li[aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

/* ---------- Inner-page hero: the homepage poster panel, copy left / artwork right ---------- */
.games-art-layout,
.demo-hero-layout {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(44px, 6vw, 80px) clamp(24px, 5.5vw, 72px);
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
}

.games-art-layout::before,
.demo-hero-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.13) 1.1px, transparent 1.5px) 0 0 / 9px 9px,
    radial-gradient(55% 90% at 88% 50%, rgba(61, 86, 240, 0.55), transparent 72%),
    radial-gradient(40% 60% at 0% 0%, rgba(31, 47, 160, 0.6), transparent 70%);
}

.games-art-copy,
.demo-hero-copy {
  min-width: 0;
  max-width: 640px;
  animation: pop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ---------- Overview: numbered point cards ---------- */
.content-grid {
  padding-right: 6px;
}

.point-list {
  counter-reset: entry;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.point-list li {
  counter-increment: entry;
  padding: 28px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 6px 6px 0 var(--ink);
}

.point-list li::before {
  content: counter(entry, decimal-leading-zero);
  display: inline-block;
  margin-bottom: 16px;
  padding: 5px 10px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--tint);
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.14em;
}

.point-list h3 {
  margin-bottom: 10px;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}

.point-list p {
  font-size: 1.02rem;
}

/* ---------- Spec lists (RTP data, why-choose) ---------- */
.spec-list {
  display: grid;
  gap: 18px;
  margin-bottom: 36px;
  padding-right: 6px;
}

.spec-list li {
  padding: 18px 22px;
  border: 2px solid var(--ink);
  border-left-width: 8px;
  border-radius: 12px;
  background: var(--white);
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
  box-shadow: 4px 4px 0 var(--ink);
}

.spec-list li strong {
  margin-right: 6px;
  color: var(--ink);
  font-weight: 800;
}

/* centred CTA: royal block with the two buttons side by side */
.cta-box-centered {
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 300px;
  color: var(--paper);
  background:
    radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.2) 1.6px, transparent 2.1px) 0 0 / 12px 12px,
    linear-gradient(160deg, var(--blue) 0%, var(--ink) 90%);
  box-shadow: 8px 8px 0 var(--accent);
}

.cta-box-centered p {
  margin-bottom: 26px;
  color: #e1e5f8;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
}

.cta-box-centered .btn {
  --sh: var(--accent);
}

.cta-box-centered .button-stack {
  flex-wrap: nowrap;
  gap: 12px;
}

.cta-box-centered .button-stack .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 12px;
}

/* ---------- Inner-page responsive ---------- */
@media (max-width: 900px) {

  .games-art-layout,
  .demo-hero-layout {
    grid-template-columns: 1fr;
  }

  .point-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {

  .games-art-layout,
  .demo-hero-layout {
    padding: 32px 22px 36px;
    border-radius: 16px;
    box-shadow: 5px 5px 0 var(--ink);
  }

  .point-list li {
    padding: 22px;
  }

  .spec-list li {
    padding: 16px 18px;
  }

  .cta-box-centered {
    min-height: 0;
  }
}

/* the last block in a section never adds its own margin on top of the section's bottom padding */
.section .container> :last-child {
  margin-bottom: 0;
}

.feature-panels>.feature-panel:last-child {
  margin-bottom: 0;
}

/* ---------- Inline code ---------- */
code {
  padding: 2px 7px;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  background: var(--tint);
  color: var(--ink);
  font: 500 0.86em/1.4 var(--mono);
  overflow-wrap: anywhere;
}

/* ---------- Alternate section band (paper-2) ---------- */
.section-alt {
  background: var(--grain), var(--paper-2);
  border-block: 2px solid var(--ink);
}

/* ---------- Inner-page hero: homepage poster panel, copy only (about, download) ---------- */
.page-hero {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  padding-top: clamp(44px, 6vw, 80px);
  padding-bottom: clamp(44px, 6vw, 80px);
}

.page-hero>* {
  max-width: 720px;
  animation: pop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.page-hero>.hero-subheading {
  animation-delay: 0.08s;
}

.page-hero>.hero-cta {
  animation-delay: 0.16s;
}

@media (max-width: 680px) {
  .cta-box-centered {
    box-shadow: 5px 5px 0 var(--accent);
  }

  .cta-box-centered p {
    font-size: 1.15rem;
  }

  .page-hero {
    align-items: stretch;
  }

  .page-hero>* {
    max-width: 100%;
  }

  /* phones: artwork on top, text below it (same as the homepage hero) */
  .page-hero {
    padding: 272px 22px 40px;
  }
}

/* ---------- Closing CTA ---------- */
.article-card-centered {
  padding: clamp(40px, 6vw, 76px) clamp(22px, 4vw, 56px);
  border: 2px solid var(--ink);
  border-radius: 20px;
  text-align: center;
  color: var(--paper);
  background:
    radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.2) 1.6px, transparent 2.1px) 0 0 / 12px 12px,
    linear-gradient(160deg, var(--blue) 0%, var(--ink) 90%);
  box-shadow: 8px 8px 0 var(--accent);
}

.article-card-centered h2 {
  margin-bottom: 20px;
  color: var(--white);
}

.article-card-centered .section-lead {
  margin: 0 auto;
  color: #e1e5f8;
}

.article-card-centered .section-lead a {
  color: var(--tint);
  text-decoration-color: var(--tint);
}

.article-card-centered .section-lead a:hover {
  background: var(--tint);
  color: var(--ink);
}

.article-card-centered .hero-cta {
  justify-content: center;
  margin-top: 30px;
}

.article-card-centered .btn {
  --sh: var(--accent);
}

/* ---------- Inner-page hero extras: "Updated" tag and highlighted name (about, privacy, terms) ---------- */
.freshness-tag {
  display: inline-block;
  margin-bottom: 22px;
  padding: 8px 14px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--tint);
  color: var(--ink);
  font: 500 0.76rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--accent);
  transform: rotate(-2deg);
}

.page-hero h1 .hl {
  display: inline-block;
  padding: 0 0.12em 0.06em;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--tint);
  color: var(--ink);
  text-shadow: none;
  box-shadow: 4px 4px 0 var(--accent);
}

@media (max-width: 680px) {
  .freshness-tag {
    margin-bottom: 18px;
    font-size: 0.7rem;
  }
}

/* ---------- 21+ notice inside an article (about, privacy) ---------- */
.age-notice {
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 880px;
  margin-top: 34px;
  padding: 24px 28px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--tint);
  box-shadow: 6px 6px 0 var(--ink);
}

.age-notice .age-badge {
  width: 68px;
  height: 68px;
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-size: 1.25rem;
  box-shadow: 4px 4px 0 var(--accent);
}

.age-notice p {
  margin: 0;
  max-width: none;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.7;
}

.age-notice p a {
  color: var(--blue);
  text-decoration-color: var(--ink);
}

.age-notice p a:hover {
  background: var(--white);
  color: var(--ink);
}

@media (max-width: 680px) {
  .age-notice {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    box-shadow: 4px 4px 0 var(--ink);
  }
}

@media (max-width: 680px) {

  .hero-cta .btn,
  .button-stack .btn {
    font-size: 0.86rem;
  }
}

/* Paired CTA buttons: a long label wraps onto a second line instead of running past the button edge. */
.hero-cta .btn,
.button-stack .btn {
  white-space: normal;
  line-height: 1.2;
  padding-block: 10px;
}

/* Tablets (681-900px): the hero artwork is still a background, so keep the copy in the darker left part. */
@media (min-width: 681px) and (max-width: 900px) {
  .hero-inner::before {
    background:
      radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.13) 1.1px, transparent 1.5px) 0 0 / 9px 9px,
      linear-gradient(90deg, rgba(20, 26, 77, 0.97) 0%, rgba(20, 26, 77, 0.92) 52%, rgba(20, 26, 77, 0.45) 100%);
  }

  .hero-content,
  .page-hero>* {
    max-width: 68%;
  }

  .hero-content .hero-cta,
  .page-hero>.hero-cta {
    flex-wrap: nowrap;
  }
}

/* Two-column heroes (games, demo): the button pair stays on one row beside the artwork. */
@media (min-width: 901px) {

  .games-art-copy .hero-cta,
  .demo-hero-copy .hero-cta {
    flex-wrap: nowrap;
  }
}

/* ==========================================================================
   2. PAGE — Games page  (/games/)  ·  scope: body.page-games
   ========================================================================== */

body.page-games .games-art-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  max-width: 420px;
  justify-self: end;
}

body.page-games .games-art-showcase img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 3px solid var(--white);
  border-radius: 14px;
  background: var(--ink);
  box-shadow: 5px 5px 0 var(--accent);
  transform: rotate(-3deg);
  transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}

body.page-games .games-art-showcase img:nth-child(2) {
  transform: translateY(16px) rotate(2.5deg);
}

body.page-games .games-art-showcase img:nth-child(3) {
  transform: rotate(2deg);
}

body.page-games .games-art-showcase img:nth-child(4) {
  transform: translateY(16px) rotate(-2.5deg);
}

body.page-games .games-art-showcase:hover img {
  transform: rotate(0deg) translateY(0);
}

/* ---------- Lobby: category tabs + game tiles ---------- */
body.page-games .lobby-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 34px;
  padding: 0 6px 6px 0;
}

body.page-games .lobby-tabs[hidden] {
  display: none;
}

body.page-games .lobby-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font: 700 0.95rem/1 var(--font);
  font-stretch: 106%;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.25s ease, color 0.25s ease;
}

body.page-games .lobby-tab:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
  background: var(--tint);
}

body.page-games .lobby-tab.is-active {
  background: var(--ink);
  color: var(--white);
  box-shadow: 4px 4px 0 var(--accent);
}

body.page-games .lobby-count {
  min-width: 26px;
  padding: 4px 7px;
  border: 2px solid currentColor;
  border-radius: 999px;
  font: 500 0.72rem/1 var(--mono);
  text-align: center;
  letter-spacing: 0.04em;
}

body.page-games .lobby-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 26px 22px;
  padding: 0 6px 8px 0;
}

body.page-games .lobby-tile[hidden] {
  display: none;
}

body.page-games .lobby-tile {
  display: flex;
}

body.page-games .lobby-tile a {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  text-align: center;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.page-games .lobby-tile a:hover,
body.page-games .lobby-tile a:focus-visible {
  text-decoration: none;
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0 var(--ink);
}

body.page-games .lobby-thumb {
  display: block;
  overflow: hidden;
  background: var(--ink);
  border-bottom: 2px dashed var(--ink);
}

body.page-games .lobby-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.5s ease;
}

body.page-games .lobby-tile a:hover img {
  transform: scale(1.07);
}

body.page-games .lobby-name {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 11px 10px 13px;
  font: 700 0.84rem/1.3 var(--font);
  font-stretch: 104%;
  letter-spacing: -0.01em;
}

body.page-games .lobby-note {
  max-width: 70ch;
  margin-top: 36px;
  font: 500 0.82rem/1.7 var(--mono);
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ---------- Top 5 by RTP: leaderboard on a navy block ---------- */
body.page-games #top-games {
  background: var(--grain), var(--ink);
  color: var(--paper);
  border-block: 2px solid var(--ink);
}

body.page-games #top-games h2 {
  color: var(--white);
}

body.page-games #top-games .section-lead,
body.page-games #top-games .top-note {
  color: #cfd5f2;
}

body.page-games .top-panel {
  margin: 0;
}

body.page-games .top-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px 20px;
  padding: 16px 6px 8px 8px;
}

body.page-games .top-card {
  position: relative;
  display: flex;
}

/* each card is a column: thumbnail, then the name (takes any spare height), then RTP and
   "View details" pinned to the bottom, so they line up across a row whatever the name's length */
body.page-games .top-card-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 14px 14px 18px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--accent);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}

body.page-games .top-card-btn:hover,
body.page-games .top-card-btn:focus-visible {
  text-decoration: none;
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--accent);
}

body.page-games .top-card.is-open .top-card-btn {
  background: var(--tint);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--accent-lt);
}

body.page-games .top-rank {
  position: absolute;
  top: -16px;
  left: -12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--tint);
  color: var(--ink);
  font: 800 1.15rem/1 var(--font);
  font-stretch: 112%;
  box-shadow: 3px 3px 0 var(--ink);
}

body.page-games .top-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--ink);
}

body.page-games .top-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 14px;
}

body.page-games .top-name {
  display: block;
  flex: 1;
  margin-bottom: 12px;
  font: 800 1rem/1.3 var(--font);
  font-stretch: 106%;
  letter-spacing: -0.02em;
}

body.page-games .top-rtp {
  display: inline-block;
  margin-top: 0;
  padding: 5px 9px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--tint);
  font: 500 0.74rem/1 var(--mono);
  letter-spacing: 0.1em;
}

body.page-games .top-card.is-open .top-rtp {
  background: var(--white);
}

body.page-games .top-more {
  display: block;
  margin-top: 14px;
  font: 500 0.76rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
}

body.page-games .top-more::after {
  content: " \25BE";
}

body.page-games .top-card.is-open .top-more::after {
  content: " \25B4";
}

body.page-games .top-card-btn:hover .top-more {
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.page-games .top-details {
  display: grid;
  gap: 22px;
  margin-top: 34px;
  padding-right: 8px;
}

body.page-games .top-detail[hidden] {
  display: none;
}

body.page-games .top-detail {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  padding: 28px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--accent);
}

body.page-games .top-detail-thumb {
  display: block;
  width: 220px;
  height: 220px;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-2deg);
}

body.page-games .top-detail-rank {
  display: inline-block;
  padding: 5px 9px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--tint);
  font: 500 0.74rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.page-games .top-detail h3 {
  margin: 14px 0 18px;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-stretch: 114%;
  line-height: 1;
  letter-spacing: -0.04em;
}

body.page-games .top-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
}

body.page-games .top-stats>div {
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: 10px;
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
}

body.page-games .top-stats dt {
  font: 500 0.7rem/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

body.page-games .top-stats dd {
  margin: 6px 0 0;
  font: 800 1.1rem/1.2 var(--font);
  font-stretch: 108%;
  letter-spacing: -0.02em;
}

body.page-games .top-detail-body p {
  max-width: 62ch;
  margin-bottom: 4px;
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--muted);
}

body.page-games .top-note {
  max-width: 70ch;
  margin-top: 34px;
  font: 500 0.82rem/1.7 var(--mono);
  letter-spacing: 0.02em;
}

body.page-games .pick-more {
  margin-top: 16px;
}

body.page-games .pick-more a {
  color: var(--tint);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

body.page-games .pick-more a:hover {
  background: var(--tint);
  color: var(--ink);
}

/* ---------- Key features: reuse the royal block, two white cards ---------- */
body.page-games #features .tips-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.page-games #features .tips-col h3 {
  color: var(--ink);
}

body.page-games #why-how {
  background: var(--grain), var(--paper-2);
  border-block: 2px solid var(--ink);
}

body.page-games #why-how h3 {
  margin: 0 0 22px;
  font-size: 1.5rem;
  font-stretch: 112%;
  letter-spacing: -0.035em;
}

/* cards: the bold label sits on its own line above the sentence instead of running into it */
body.page-games .spec-list li strong {
  display: block;
  margin: 0 0 6px;
  font-size: 1.1rem;
}

/* ---- layout: the left wrapper dissolves so its four children join the section grid ----
   row 1 = the two sub-headings, row 2 = the two card lists side by side, row 3 = the CTA banner */
body.page-games #why-how .two-col {
  align-items: stretch;
}

body.page-games #why-how .spec-list,
body.page-games #why-how .steps-list {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0 8px 8px 0;
}

/* "Why Choose Playtech": white cards with a navy edge */
body.page-games #why-how .spec-list li {
  padding: 20px 24px;
}

/* "How to Play": periwinkle cards, number on the left, text centred beside it */
body.page-games #why-how .steps-list>li {
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-rows: auto;
  gap: 0 14px;
  align-items: center;
  padding: 18px 24px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--tint);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 1.02rem;
  line-height: 1.6;
}

body.page-games #why-how .steps-list>li:last-child {
  border-bottom: 2px solid var(--ink);
}

body.page-games #why-how .steps-list>li::before {
  grid-row: 1;
  align-self: center;
  font-size: 2.7rem;
  line-height: 1;
}

/* CTA: full-width banner, sentence on the left, the two buttons on the right */
body.page-games #why-how .cta-box-centered {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  min-height: 0;
  margin-top: 48px;
  padding: clamp(24px, 3vw, 40px) clamp(24px, 4vw, 52px);
}

body.page-games #why-how .cta-box-centered p {
  margin: 0;
  max-width: 30ch;
  line-height: 1.4;
}

body.page-games #why-how .cta-box-centered .button-stack {
  flex: none;
  flex-wrap: nowrap;
  gap: 14px;
}

body.page-games #why-how .cta-box-centered .button-stack .btn {
  flex: none;
  padding: 0 28px;
}

@media (min-width: 901px) {
  body.page-games #why-how .two-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 4vw, 56px);
    row-gap: 0;
  }

  body.page-games #why-how .two-col>div:first-child {
    display: contents;
  }

  body.page-games #why-how .two-col>div>h3:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
  }

  body.page-games #why-how .two-col>div>.spec-list {
    grid-column: 1;
    grid-row: 2;
  }

  body.page-games #why-how .two-col>div>h3:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
  }

  body.page-games #why-how .two-col>div>.steps-list {
    grid-column: 2;
    grid-row: 2;
  }

  body.page-games #why-how .two-col>.cta-box {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (max-width: 900px) {
  body.page-games #why-how .two-col>div>h3:nth-of-type(2) {
    margin-top: 44px;
  }

  body.page-games #why-how .spec-list,
  body.page-games #why-how .steps-list {
    grid-template-rows: none;
  }

  body.page-games #why-how .cta-box-centered {
    margin-top: 40px;
    flex-direction: column;
    align-items: stretch;
  }

  body.page-games #why-how .cta-box-centered p {
    max-width: none;
  }

  body.page-games #why-how .cta-box-centered .button-stack .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 12px;
  }
}

@media (max-width: 680px) {
  body.page-games #why-how .spec-list li {
    padding: 16px 18px;
  }

  body.page-games #why-how .cta-box-centered .button-stack .btn {
    white-space: normal;
    padding: 10px 8px;
    line-height: 1.2;
    font-size: 0.86rem;
  }

  body.page-games #why-how .steps-list>li {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0 10px;
    padding: 14px 16px;
    font-size: 1.02rem;
  }

  body.page-games #why-how .steps-list>li::before {
    font-size: 2.1rem;
  }
}

/* FAQ heading is longer here than on the homepage */
body.page-games #faq .faq-intro h2 {
  font-size: clamp(2rem, 3.8vw, 3.2rem) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  body.page-games .top-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.page-games .games-art-showcase {
    order: -1;
    justify-self: center;
    max-width: 300px;
    margin-bottom: 8px;
  }

  body.page-games #features .tips-grid {
    grid-template-columns: 1fr;
  }

  body.page-games .top-detail {
    grid-template-columns: 1fr;
    text-align: left;
  }

  body.page-games .top-detail-thumb {
    width: 180px;
    height: 180px;
  }
}

@media (max-width: 680px) {
  body.page-games .games-art-showcase {
    gap: 14px;
    max-width: 270px;
  }

  body.page-games .games-art-showcase img {
    box-shadow: 4px 4px 0 var(--accent);
  }

  body.page-games .lobby-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 14px;
  }

  body.page-games .lobby-name {
    padding: 8px 6px 10px;
    font-size: 0.72rem;
  }

  body.page-games .lobby-tile a {
    box-shadow: 3px 3px 0 var(--ink);
  }

  /* phones: the three category tabs share one row; they shrink to fit instead of wrapping */
  body.page-games .lobby-tabs {
    flex-wrap: nowrap;
    gap: 8px;
    padding-right: 4px;
  }

  body.page-games .lobby-tab {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 8px;
    font-size: 0.84rem;
    white-space: nowrap;
    box-shadow: 3px 3px 0 var(--ink);
  }

  body.page-games .lobby-tab.is-active {
    box-shadow: 3px 3px 0 var(--accent);
  }

  body.page-games .lobby-count {
    min-width: 0;
    padding: 3px 6px;
    border-width: 1.5px;
    font-size: 0.66rem;
  }

  body.page-games .top-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 16px;
  }

  body.page-games .top-card:last-child {
    grid-column: 1 / -1;
    width: calc(50% - 8px);
    justify-self: center;
  }

  body.page-games .top-detail {
    padding: 22px;
    gap: 22px;
    box-shadow: 5px 5px 0 var(--accent);
  }

  body.page-games .top-stats>div {
    padding: 8px 12px;
  }

}

@media (prefers-reduced-motion: reduce) {
  body.page-games .games-art-showcase img {
    transition: none;
  }
}

/* ==========================================================================
   2. PAGE — Demo page  (/demo/)  ·  scope: body.page-demo
   ========================================================================== */

/* ---------- Hero: full-width, the same as the homepage ---------- */
/* Hero runs the full width of the screen: no card, rounded corners or shadow. The text keeps the same left edge as the
   sections below it (the padding recreates the 1200px container's gutter). */
body.page-demo .hero {
  padding: 0;
}

body.page-demo .demo-hero-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: none;
  margin: 0;
  border-width: 0 0 2px;
  border-radius: 0;
  box-shadow: none;
  padding-inline: max(24px, calc((100% - var(--max)) / 2 + 24px));
}

body.page-demo .demo-hero-layout::before {
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.13) 1.1px, transparent 1.5px) 0 0 / 9px 9px,
    radial-gradient(48% 90% at 78% 50%, rgba(61, 86, 240, 0.55), transparent 72%),
    radial-gradient(40% 60% at 0% 0%, rgba(31, 47, 160, 0.6), transparent 70%);
}

/* the copy stops before the artwork instead of running underneath it */
body.page-demo .demo-hero-copy {
  position: relative;
  z-index: 1;
  max-width: min(560px, 52%);
}

body.page-demo .demo-hero-copy .hero-cta {
  flex-wrap: nowrap;
}

/* The artwork is a transparent character cut-out, so it floats on the panel: no frame, just a soft shadow. It is taken
   out of the grid and stands on the right, bleeding past the 1200px content edge, with the same size and position as
   the homepage artwork. The panel hugs its content: equal space above and below, shorter minimum height. */
body.page-demo .demo-hero-media {
  position: absolute;
  top: 50%;
  right: max(8px, calc((100% - var(--max)) / 2 - 40px));
  width: 48%;
  height: calc(100% - 16px);
  transform: translateY(-50%);
  pointer-events: none;
}

body.page-demo .demo-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(0 14px 26px rgba(8, 12, 48, 0.5));
}

@media (min-width: 681px) {
  body.page-demo .demo-hero-layout {
    min-height: clamp(400px, 52vh, 520px);
    padding-block: clamp(36px, 4.5vw, 60px);
  }
}

@media (min-width: 681px) and (max-width: 900px) {
  body.page-demo .demo-hero-media {
    width: 40%;
  }

  body.page-demo .demo-hero-copy {
    max-width: 56%;
  }
}

/* Wide screens have room: the artwork grows to 760px and bleeds further past the 1200px content edge. */
@media (min-width: 1300px) {
  body.page-demo .demo-hero-media {
    width: min(52%, 760px);
    right: max(8px, calc((100% - var(--max)) / 2 - 120px));
  }
}

/* ---------- Featured demo launchers: royal block, ticket rows ---------- */
body.page-demo #demo-grid {
  background: var(--grain), var(--blue);
  border-block: 2px solid var(--ink);
}

body.page-demo #demo-grid h2 {
  color: var(--white);
}

body.page-demo .demo-list {
  display: grid;
  gap: 26px;
  padding: 0 8px 8px 0;
}

body.page-demo .demo-list-item {
  position: relative;
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  padding: 24px 28px 24px 24px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 8px 8px 0 var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.page-demo .demo-list-item:hover {
  transform: translate(-3px, -3px);
  box-shadow: 10px 10px 0 var(--ink);
}

/* the 01 / 02 / 03 / 04 tag sits on the ticket's top-left corner */
body.page-demo .demo-list-index {
  position: absolute;
  top: -15px;
  left: 18px;
  z-index: 2;
  padding: 6px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--tint);
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.14em;
  box-shadow: 3px 3px 0 var(--ink);
}

body.page-demo .demo-game-art {
  display: block;
  width: 190px;
  height: 190px;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-2deg);
  transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}

body.page-demo .demo-list-item:nth-child(even) .demo-game-art {
  transform: rotate(2deg);
}

body.page-demo .demo-list-item:hover .demo-game-art {
  transform: rotate(0deg) scale(1.03);
}

body.page-demo .demo-list-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-bottom: 14px;
}

body.page-demo .demo-list-header h3 {
  margin: 0;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-stretch: 114%;
  line-height: 1;
  letter-spacing: -0.04em;
}

body.page-demo .category-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 11px;
  border: 2px dashed var(--ink);
  border-radius: 6px;
  background: var(--white);
  font: 500 0.74rem/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body.page-demo .demo-list-body p {
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--muted);
}

body.page-demo #demo-grid .section-cta {
  margin-top: 60px;
}

body.page-demo #demo-grid .section-cta .btn {
  --sh: var(--ink);
}

/* ---------- Pros and limitations ---------- */
body.page-demo .comparison-box {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  padding: 0 8px 8px 0;
}

body.page-demo .comparison-col {
  padding: 28px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 6px 6px 0 var(--ink);
}

body.page-demo .comparison-unverified {
  background: var(--tint);
}

body.page-demo .comparison-col h3 {
  margin-bottom: 22px;
  font-size: 1.3rem;
  font-stretch: 112%;
  letter-spacing: -0.035em;
}

body.page-demo .comparison-col li {
  position: relative;
  padding: 0 0 16px 44px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

body.page-demo .comparison-unverified li {
  color: var(--ink-2);
}

body.page-demo .comparison-col li::before {
  position: absolute;
  top: -1px;
  left: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font: 800 0.8rem/1 var(--font);
}

body.page-demo .comparison-verified li::before {
  content: "\2713";
  background: var(--accent);
  color: var(--white);
}

body.page-demo .comparison-unverified li::before {
  content: "\2715";
  background: var(--white);
  color: var(--ink);
}

/* ---------- How-to: paper block, steps + centred CTA ---------- */
body.page-demo #how-to {
  background: var(--grain), var(--paper-2);
  border-block: 2px solid var(--ink);
}

body.page-demo #how-to .two-col {
  align-items: start;
}

body.page-demo #how-to .steps-list>li {
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
}

body.page-demo #how-to .steps-list>li::before {
  grid-row: 1 / span 2;
}

body.page-demo #how-to .steps-list h3 {
  margin-bottom: 6px;
  font-size: 1.3rem;
}

body.page-demo #how-to .cta-box-centered {
  position: sticky;
  top: calc(var(--header-h) + 28px);
}

/* ---------- Demo vs real-money table ---------- */
body.page-demo .comparison-table-wrap {
  overflow-x: auto;
  margin-right: 8px;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--ink);
}

body.page-demo .comparison-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  text-align: left;
}

body.page-demo .comparison-table thead th {
  padding: 18px 24px;
  background: var(--ink);
  color: var(--tint);
  font: 500 0.78rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.page-demo .comparison-table th+th,
body.page-demo .comparison-table td+td {
  border-left: 2px dashed var(--ink);
}

body.page-demo .comparison-table thead th+th {
  border-left-color: rgba(196, 207, 255, 0.4);
}

body.page-demo .comparison-table tbody td {
  padding: 20px 24px;
  border-top: 2px solid var(--ink);
  color: var(--ink-2);
  font-size: 1.04rem;
  line-height: 1.5;
}

body.page-demo .comparison-table tbody td:first-child {
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  font-stretch: 106%;
  letter-spacing: -0.01em;
}

body.page-demo .comparison-table tbody tr:nth-child(even) td:not(:first-child) {
  background: #f5f7ff;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  body.page-demo #how-to .cta-box-centered {
    position: static;
  }
}

@media (max-width: 900px) {
  body.page-demo .demo-list-item {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 22px;
  }

  body.page-demo .demo-game-art {
    width: 150px;
    height: 150px;
  }

  body.page-demo .comparison-box {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {

  /* phones: the artwork sits centred above the copy, the same slot as on the homepage */
  body.page-demo .demo-hero-layout {
    min-height: 0;
    padding-block: 272px 40px;
  }

  body.page-demo .demo-hero-layout::before {
    background:
      radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.13) 1.1px, transparent 1.5px) 0 0 / 9px 9px,
      radial-gradient(75% 260px at 50% 130px, rgba(61, 86, 240, 0.55), transparent 75%);
  }

  body.page-demo .demo-hero-media {
    top: 18px;
    right: 0;
    left: 0;
    width: auto;
    height: 240px;
    max-width: calc(100% - 28px);
    margin-inline: auto;
    transform: none;
  }

  body.page-demo .demo-hero-media img {
    object-position: center;
  }

  body.page-demo .demo-hero-copy {
    max-width: none;
  }

  body.page-demo .demo-list {
    gap: 34px;
  }

  body.page-demo .demo-list-item {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 20px 22px;
    box-shadow: 5px 5px 0 var(--ink);
  }

  body.page-demo .demo-game-art {
    width: 140px;
    height: 140px;
  }

  body.page-demo .demo-list-item .demo-game-art {
    transform: rotate(-2deg);
  }

  body.page-demo .comparison-col {
    padding: 24px;
    box-shadow: 4px 4px 0 var(--ink);
  }

  body.page-demo #how-to .steps-list>li {
    grid-template-columns: 70px minmax(0, 1fr);
  }

  body.page-demo .comparison-table-wrap {
    box-shadow: 4px 4px 0 var(--ink);
  }

  /* both CTA buttons stay side by side; their labels wrap onto two lines instead of overlapping */
  body.page-demo .cta-box-centered .button-stack .btn {
    white-space: normal;
    padding: 10px 8px;
    line-height: 1.2;
    font-size: 0.86rem;
  }

  /* all three table columns fit the screen, no sideways scrolling */
  body.page-demo .comparison-table-wrap {
    overflow: hidden;
  }

  /* clips the table to the rounded corners; the columns already fit */
  body.page-demo .comparison-table {
    min-width: 0;
    table-layout: fixed;
  }

  body.page-demo .comparison-table thead th {
    padding: 14px 10px;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
  }

  body.page-demo .comparison-table tbody td {
    padding: 14px 10px;
    font-size: 0.86rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  body.page-demo .comparison-table tbody td:first-child {
    font-size: 0.82rem;
  }

  body.page-demo .comparison-table th:first-child,
  body.page-demo .comparison-table td:first-child {
    width: 34%;
  }
}

/* ==========================================================================
   2. PAGE — APK download page  (/download/)  ·  scope: body.page-download
   ========================================================================== */

/* the poster panel and the dark APK block would touch: leave a paper gap */
body.page-download .hero+.apk-section {
  margin-top: 72px;
}

/* ---------- APK panel: both halves share one padding and one top line ---------- */
body.page-download .apk-panel {
  --apk-pad: clamp(32px, 4.5vw, 60px);
}

body.page-download .apk-overview {
  padding: var(--apk-pad);
}

body.page-download .apk-overview>.apk-eyebrow {
  display: block;
  margin-bottom: 20px;
  line-height: 1;
}

body.page-download .apk-overview h2 {
  margin-bottom: 18px !important;
}

body.page-download .apk-specs {
  margin: 28px 0 24px;
  padding: 22px 0;
  gap: 14px 56px;
}

body.page-download .apk-specs dd {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

body.page-download .apk-specs dd span {
  margin-left: 0;
}

/* ticket stub: label on the same top line as the left eyebrow, everything else one centred stack */
body.page-download .apk-download {
  justify-content: center;
  padding: calc(var(--apk-pad) + 44px) var(--apk-pad) var(--apk-pad);
}

body.page-download .apk-file-label {
  position: absolute;
  top: var(--apk-pad);
  left: var(--apk-pad);
  right: var(--apk-pad);
}

body.page-download .apk-download-symbol {
  width: 88px;
  height: 88px;
  margin: 0 0 26px;
  font-size: 2.4rem;
}

body.page-download .apk-download h3 {
  margin-bottom: 10px;
  font-size: clamp(1.8rem, 2.6vw, 2.3rem);
}

body.page-download .apk-download>p {
  margin-bottom: 30px;
  line-height: 1.7;
}

body.page-download .apk-download-button {
  margin-top: 0;
}

body.page-download .apk-guide-link {
  margin-top: 22px;
}

/* ---------- iPhone / iPad note inside the APK panel ---------- */
body.page-download .apk-ios {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 2px dashed rgba(242, 244, 251, 0.4);
}

body.page-download .apk-ios .apk-eyebrow {
  margin-bottom: 12px;
  color: var(--tint);
}

body.page-download .apk-ios p {
  max-width: 48ch;
  font-size: 1.02rem;
}

body.page-download .apk-ios a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 16px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--tint);
  color: var(--ink);
  font: 700 0.92rem/1 var(--font);
  font-stretch: 106%;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--accent);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

body.page-download .apk-ios a:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--accent);
  background: var(--tint);
  color: var(--ink);
}

/* ---------- Generic article blocks ---------- */
body.page-download .article-card {
  position: relative;
}

body.page-download .article-flow>h3 {
  margin: 40px 0 12px;
  font-size: 1.5rem;
  font-stretch: 112%;
  letter-spacing: -0.035em;
}

body.page-download .article-flow>p {
  max-width: 72ch;
  font-size: 1.1rem;
  line-height: 1.8;
}

body.page-download .article-flow>p+p,
body.page-download .article-flow>ul+p,
body.page-download .article-flow>ol+p,
body.page-download .article-flow>dl+p,
body.page-download .article-flow>details+p {
  margin-top: 18px;
}

body.page-download .section-alt .point-list {
  padding-right: 6px;
}

body.page-download .section-alt .point-list+p,
body.page-download #before-install .point-list+p {
  margin-top: 32px;
}

/* ---------- Checksum card ---------- */
body.page-download #verify .article-card {
  margin-right: 8px;
  padding: clamp(24px, 4vw, 52px);
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--ink);
}

/* two columns: heading + plain-language note on the left, the values and expanders on the right */
body.page-download #verify .article-card.article-flow {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
  column-gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

body.page-download #verify .article-flow>h2 {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 28px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.04;
}

body.page-download #verify .article-flow>.plain-note {
  grid-column: 1;
  grid-row: 2 / span 8;
  margin: 0;
  max-width: none;
}

body.page-download #verify .article-flow> :not(h2):not(.plain-note) {
  grid-column: 2;
  max-width: none;
}

body.page-download #verify .article-flow>.hash-list {
  grid-row: 1 / span 2;
  margin: 0;
}

body.page-download #verify .article-flow>.hash-list+p {
  margin-top: 28px;
}

body.page-download #verify .hash-list dd:not(.hash-help) {
  font-size: clamp(0.8rem, 1.05vw, 0.92rem);
  letter-spacing: 0;
}

body.page-download .plain-note {
  max-width: 72ch;
  margin: 0 0 26px;
  padding: 18px 22px;
  border: 2px solid var(--ink);
  border-left-width: 10px;
  border-radius: 12px;
  background: var(--tint);
  color: var(--ink-2);
  font-size: 1.1rem;
  line-height: 1.7;
}

body.page-download .plain-note strong {
  color: var(--ink);
  font-weight: 800;
}

body.page-download .hash-list {
  display: grid;
  gap: 18px;
  margin: 0 0 26px;
}

body.page-download .hash-list>div {
  padding: 18px 20px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
}

body.page-download .hash-list dt {
  margin-bottom: 10px;
  font: 500 0.74rem/1.3 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

body.page-download .hash-list dd {
  margin: 0;
  color: var(--ink);
  font: 500 1rem/1.55 var(--mono);
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
  word-break: break-all;
}

body.page-download .hash-list dd span {
  font: 500 0.9rem/1.5 var(--font);
  color: var(--muted);
  word-break: normal;
}

body.page-download .hash-list dd.hash-help {
  margin-top: 10px;
  color: var(--muted);
  font: 400 0.9rem/1.6 var(--font);
  word-break: normal;
  overflow-wrap: normal;
}

/* ---------- "Advanced" expandable blocks ---------- */
body.page-download .advanced {
  margin-top: 22px;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  transition: background 0.3s ease;
}

body.page-download .advanced[open] {
  background: var(--white);
}

body.page-download .advanced>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font: 800 1.08rem/1.3 var(--font);
  font-stretch: 106%;
  letter-spacing: -0.015em;
  list-style: none;
  cursor: pointer;
}

body.page-download .advanced>summary::-webkit-details-marker {
  display: none;
}

body.page-download .advanced>summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  font: 700 1.3rem/1 var(--mono);
  transition: transform 0.35s cubic-bezier(0.22, 0.8, 0.2, 1), background 0.3s ease;
}

body.page-download .advanced[open]>summary::after {
  content: "+";
  transform: rotate(45deg);
  background: var(--tint);
}

body.page-download .advanced>summary:hover {
  background: rgba(196, 207, 255, 0.35);
  border-radius: 10px;
}

body.page-download .advanced>summary:focus-visible {
  outline-offset: -5px;
}

/* content: padded whether or not script.js has wrapped it for the smooth open/close */
body.page-download .advanced> :not(summary):not(.advanced-body) {
  margin-inline: 22px;
}

body.page-download .advanced> :last-child {
  margin-bottom: 22px;
}

body.page-download .advanced-body {
  padding: 2px 22px 24px;
}

body.page-download .advanced-body> :last-child {
  margin-bottom: 0;
}

body.page-download .advanced h3 {
  margin: 24px 0 12px;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}

body.page-download .advanced h3:first-child {
  margin-top: 4px;
}

body.page-download .advanced p {
  max-width: 70ch;
  margin-top: 16px;
  font-size: 1.02rem;
  line-height: 1.65;
}

body.page-download .advanced .hash-list {
  margin: 0 0 8px;
}

body.page-download .check-steps {
  counter-reset: cs;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin: 18px 0 0;
}

body.page-download .check-steps li {
  counter-increment: cs;
  position: relative;
  min-width: 0;
  padding: 3px 0 0 48px;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.65;
}

body.page-download .check-steps li::before {
  content: counter(cs);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--tint);
  font: 500 0.82rem/1 var(--mono);
}

body.page-download .cmd-block {
  max-width: 100%;
  margin: 14px 0 0;
  padding: 18px 20px;
  overflow-x: auto;
  border: 2px solid var(--ink);
  border-radius: 12px;
  background: var(--ink);
  color: var(--tint);
  font: 500 0.88rem/1.8 var(--mono);
  box-shadow: 4px 4px 0 var(--accent);
}

body.page-download .cmd-block code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  overflow-wrap: normal;
  white-space: pre;
}

/* ---------- H5 vs APK comparison table ---------- */
body.page-download .compare-wrap {
  margin: 8px 8px 8px 0;
  overflow-x: auto;
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 8px 8px 0 var(--ink);
}

body.page-download .compare-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
}

body.page-download .compare-table thead th,
body.page-download .compare-table thead td {
  padding: 18px 22px;
  background: var(--ink);
  color: var(--tint);
  font: 500 0.78rem/1.2 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

body.page-download .compare-table thead td:first-child {
  width: 20%;
}

body.page-download .compare-table tbody th,
body.page-download .compare-table tbody td {
  padding: 18px 22px;
  border-top: 2px solid var(--ink);
  vertical-align: top;
  color: var(--ink-2);
  font-size: 1.02rem;
  line-height: 1.55;
}

body.page-download .compare-table tbody th {
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  font-stretch: 106%;
  letter-spacing: -0.01em;
  text-align: left;
}

body.page-download .compare-table th+td,
body.page-download .compare-table td+td,
body.page-download .compare-table th+th {
  border-left: 2px dashed var(--ink);
}

body.page-download .compare-table thead th+th {
  border-left-color: rgba(196, 207, 255, 0.4);
}

body.page-download .compare-table tbody tr:nth-child(even) td {
  background: #f5f7ff;
}

/* ---------- Install steps (on paper, unlike the homepage's dark version) ---------- */
body.page-download #install.apk-install {
  margin-top: 0;
}

body.page-download #install .apk-install-heading {
  margin-bottom: 36px;
}

body.page-download #install .apk-eyebrow {
  color: var(--blue);
}

body.page-download #install .apk-install-heading h2 {
  margin: 0;
}

body.page-download #install .apk-install-steps {
  gap: 26px;
  padding: 0 8px 8px 0;
  margin-bottom: 0;
}

body.page-download #install .apk-install-steps li {
  gap: 6px;
  padding: 28px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.page-download #install .apk-install-steps li:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}

body.page-download #install .apk-step-number {
  -webkit-text-stroke: 2px var(--ink);
}

body.page-download #install .apk-install-steps h3 {
  margin: 10px 0 8px;
  font-size: 1.3rem;
  font-stretch: 110%;
  letter-spacing: -0.03em;
}

body.page-download #install .apk-install-steps p {
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  body.page-download #verify .article-card.article-flow {
    display: block;
  }

  body.page-download .article-flow>p {
    font-size: 1.04rem;
  }

  body.page-download #verify .article-flow>h2 {
    margin-bottom: 24px;
  }

  body.page-download #verify .article-flow>.plain-note {
    margin-bottom: 26px;
  }

  body.page-download #verify .article-flow>.hash-list {
    margin: 0 0 26px;
  }
}

@media (max-width: 680px) {
  body.page-download .hero+.apk-section {
    margin-top: 48px;
  }

  body.page-download .apk-download-symbol {
    width: 72px;
    height: 72px;
    font-size: 2rem;
    margin-bottom: 20px;
  }

  body.page-download #verify .article-card {
    padding: 22px 18px;
    box-shadow: 5px 5px 0 var(--ink);
  }

  body.page-download .plain-note {
    padding: 14px 16px;
  }

  body.page-download .hash-list>div {
    padding: 14px 14px;
  }

  body.page-download .hash-list dd {
    font-size: 0.86rem;
  }

  body.page-download .advanced>summary {
    padding: 15px 16px;
    font-size: 1rem;
  }

  body.page-download .advanced> :not(summary):not(.advanced-body) {
    margin-inline: 16px;
  }

  body.page-download .advanced-body {
    padding: 2px 16px 20px;
  }

  body.page-download .cmd-block {
    padding: 14px 14px;
    font-size: 0.8rem;
  }

  /* phones: commands stay on one line each and scroll sideways. The block spans the full width of the
     card (back across the step's number indent) so as much of each command as possible is visible. */
  body.page-download .cmd-block {
    margin-left: -48px;
    width: calc(100% + 48px);
    max-width: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--tint) transparent;
  }

  body.page-download .cmd-block code {
    white-space: pre;
  }

  /* all three columns fit the screen */
  body.page-download .compare-wrap {
    overflow: hidden;
    box-shadow: 4px 4px 0 var(--ink);
  }

  /* clips the table to the rounded corners; the columns already fit */
  body.page-download .compare-table thead th,
  body.page-download .compare-table thead td {
    padding: 12px 8px;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
  }

  body.page-download .compare-table thead td:first-child {
    width: 27%;
  }

  body.page-download .compare-table tbody th,
  body.page-download .compare-table tbody td {
    padding: 12px 8px;
    font-size: 0.8rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  body.page-download .compare-table tbody th {
    overflow-wrap: normal;
    word-break: normal;
    font-size: 0.74rem;
    letter-spacing: -0.02em;
  }

  body.page-download .compare-table thead td:first-child {
    width: 29%;
  }

  body.page-download #install .apk-install-steps li {
    padding: 22px;
    box-shadow: 4px 4px 0 var(--ink);
  }
}

@media (max-width: 380px) {
  body.page-download .compare-table tbody th {
    padding-inline: 6px;
    font-size: 0.66rem;
  }

  body.page-download .compare-table tbody td {
    padding-inline: 6px;
    font-size: 0.76rem;
  }
}

/* ==========================================================================
   2. PAGE — About page  (/about/)  ·  scope: body.page-about
   ========================================================================== */

/* ---------- Hero: plain navy panel, no banner artwork ---------- */
/* The shared .hero-inner paints the artwork as its background; this page keeps only the dot texture. */
body.page-about .hero-inner {
  background: var(--ink);
}

body.page-about .hero-inner::before {
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.13) 1.1px, transparent 1.5px) 0 0 / 9px 9px;
}

/* tablets: nothing to keep the copy clear of, so it gets its normal width back */
@media (min-width: 681px) and (max-width: 900px) {
  body.page-about .page-hero>* {
    max-width: 720px;
  }
}

/* phones: no artwork on top, so drop the 272px gap above the text */
@media (max-width: 680px) {
  body.page-about .page-hero {
    padding: 44px 22px 40px;
  }
}

/* ---------- Article blocks ---------- */
body.page-about .article-card>p:not(.section-lead) {
  max-width: 70ch;
  font-size: 1.1rem;
  line-height: 1.8;
}

body.page-about .article-card>p:not(.section-lead)+p {
  margin-top: 20px;
}

body.page-about .article-card>p a {
  color: var(--blue);
}

body.page-about .article-card .section-lead+.point-list {
  margin-top: 0;
}

body.page-about .article-card .point-list,
body.page-about .article-card .steps-list {
  padding-right: 6px;
}

/* the three review steps become ticket cards on the alternate band */
body.page-about .section-alt .steps-list {
  display: grid;
  gap: 26px;
  padding-bottom: 8px;
}

body.page-about .section-alt .steps-list>li {
  position: relative;
  padding: 26px 28px 26px 112px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.page-about .section-alt .steps-list>li::before {
  position: absolute;
  top: 18px;
  left: 28px;
  grid-row: auto;
}

body.page-about .section-alt .steps-list>li:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--ink);
}

body.page-about .section-alt .steps-list>li:last-child {
  border-bottom: 2px solid var(--ink);
}

body.page-about .section-alt .steps-list>li {
  display: block;
}

body.page-about .section-alt .steps-list h3 {
  margin-bottom: 8px;
  font-size: 1.3rem;
  font-stretch: 112%;
  letter-spacing: -0.035em;
}

body.page-about .section-alt .steps-list p {
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.65;
}

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
  body.page-about .article-card>p {
    font-size: 1.04rem;
  }

  body.page-about .section-alt .steps-list>li {
    padding: 22px 20px 22px 86px;
    box-shadow: 4px 4px 0 var(--ink);
  }

  body.page-about .section-alt .steps-list>li::before {
    top: 14px;
    left: 18px;
  }

}

/* ==========================================================================
   2. PAGE — Privacy Policy + Terms pages  (/privacy/, /terms/)  ·  scope: body.page-legal
   ========================================================================== */

/* ---------- Hero: plain navy panel, no banner artwork ---------- */
/* The shared .hero-inner paints the artwork as its background; these two pages keep only the dot texture. */
body.page-legal .hero-inner {
  background: var(--ink);
}

body.page-legal .hero-inner::before {
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.13) 1.1px, transparent 1.5px) 0 0 / 9px 9px;
}

/* tablets: nothing to keep the copy clear of, so it gets its normal width back */
@media (min-width: 681px) and (max-width: 900px) {
  body.page-legal .page-hero>* {
    max-width: 720px;
  }
}

/* phones: no artwork on top, so drop the 272px gap above the text */
@media (max-width: 680px) {
  body.page-legal .page-hero {
    padding: 44px 22px 40px;
  }
}

body.page-legal .article-card {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  column-gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

body.page-legal .article-card>h2 {
  grid-column: 1;
  grid-row: 1 / span 12;
  position: sticky;
  top: calc(var(--header-h) + 28px);
  margin: 0;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.05;
}

body.page-legal .article-card> :not(h2) {
  grid-column: 2;
}

body.page-legal .article-card>p {
  max-width: 68ch;
  margin: 0 0 22px;
  padding-left: clamp(20px, 3vw, 34px);
  border-left: 3px dashed var(--ink);
  color: var(--ink-2);
  font-size: 1.1rem;
  line-height: 1.8;
}

body.page-legal .article-card>p:last-child {
  margin-bottom: 0;
}

body.page-legal .article-card>p a {
  color: var(--blue);
  font-weight: 700;
}

body.page-legal .article-card>p strong {
  color: var(--ink);
  font-weight: 800;
}

body.page-legal .article-card>.age-notice {
  margin-top: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  body.page-legal .article-card {
    display: block;
  }

  body.page-legal .article-card>h2 {
    position: static;
    margin-bottom: 26px;
  }

  body.page-legal .article-card>p {
    padding-left: 18px;
    font-size: 1.04rem;
  }
}

@media (max-width: 680px) {
  body.page-legal .article-card>p {
    padding-left: 16px;
    line-height: 1.75;
  }
}

@media (max-width: 360px) {
  body.page-games .lobby-tabs {
    gap: 6px;
  }

  body.page-games .lobby-tab {
    padding: 0 5px;
    gap: 3px;
    font-size: 0.72rem;
    letter-spacing: -0.02em;
  }

  body.page-games .lobby-count {
    padding: 2px 4px;
    font-size: 0.6rem;
    letter-spacing: 0;
    border-width: 1.5px;
  }
}

/* ==========================================================================
   2. PAGE — Home page  (/)  ·  scope: body.page-home
   ========================================================================== */

/* Hero runs the full width of the screen: no card, rounded corners or shadow. The text keeps the same left
   edge as the sections below it (the padding recreates the 1200px container's gutter). */
body.page-home .hero {
  padding: 0;
}

body.page-home .hero-inner {
  max-width: none;
  margin: 0;
  border-width: 0 0 2px;
  border-radius: 0;
  box-shadow: none;
  padding-left: max(24px, calc((100% - var(--max)) / 2 + 24px));
  padding-right: max(24px, calc((100% - var(--max)) / 2 + 24px));
}

/* Hero artwork: a transparent character cut-out (an <img>, so it carries alt text) stands on the right over the plain
   ink panel, with the same dot texture and blue glow as the games / demo heroes. The shared .hero-inner rule still
   paints background.webp for the legal / about / download heroes, so the override is scoped here. */
body.page-home .hero-inner {
  background: var(--ink);
}

/* The tall panel and the extra bottom padding only existed to leave room for the old wide background art. With the
   cut-out artwork the panel hugs its content: equal space above and below, shorter minimum height. Phones keep the
   shared rule (their top padding makes room for the artwork). */
@media (min-width: 681px) {
  body.page-home .hero-inner {
    min-height: clamp(400px, 52vh, 520px);
    padding-top: clamp(36px, 4.5vw, 60px);
    padding-bottom: clamp(36px, 4.5vw, 60px);
  }
}

body.page-home .hero-inner::before {
  background:
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.13) 1.1px, transparent 1.5px) 0 0 / 9px 9px,
    radial-gradient(48% 90% at 78% 50%, rgba(61, 86, 240, 0.55), transparent 72%),
    radial-gradient(40% 60% at 0% 0%, rgba(31, 47, 160, 0.6), transparent 70%);
}

body.page-home .hero-art {
  position: absolute;
  top: 50%;
  right: max(8px, calc((100% - var(--max)) / 2 - 40px));
  width: 48%;
  height: auto;
  max-height: calc(100% - 16px);
  object-fit: contain;
  object-position: right center;
  transform: translateY(-50%);
  pointer-events: none;
  filter: drop-shadow(0 14px 26px rgba(8, 12, 48, 0.5));
}

/* the copy stops before the artwork instead of running underneath it */
body.page-home .hero-content {
  position: relative;
  z-index: 1;
  max-width: min(560px, 52%);
}

@media (min-width: 681px) and (max-width: 900px) {
  body.page-home .hero-art {
    width: 40%;
  }

  body.page-home .hero-content {
    max-width: 56%;
  }
}

/* Wide screens have room: the artwork grows to 760px and bleeds further past the 1200px content edge. The copy column
   is capped at 560px from the content's left edge, so the gap between the two stays about the same at any width. */
@media (min-width: 1300px) {
  body.page-home .hero-art {
    width: min(52%, 760px);
    right: max(8px, calc((100% - var(--max)) / 2 - 120px));
  }
}

@media (max-width: 680px) {

  /* phones: the artwork sits centred above the copy, the same slot the old background image used */
  body.page-home .hero-inner::before {
    background:
      radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.13) 1.1px, transparent 1.5px) 0 0 / 9px 9px,
      radial-gradient(75% 260px at 50% 130px, rgba(61, 86, 240, 0.55), transparent 75%);
  }

  body.page-home .hero-art {
    top: 18px;
    right: 0;
    left: 0;
    width: auto;
    height: 240px;
    max-width: calc(100% - 28px);
    max-height: none;
    margin-inline: auto;
    object-position: center;
    transform: none;
  }

  body.page-home .hero-content {
    max-width: none;
  }
}

/* ---------- APK section: just the install guide (the download panel lives on /download/) ---------- */
/* The guide's heading is the section's H2 and its steps are H3s, styled like the H3 / H4 they replaced. */
body.page-home .apk-install {
  margin-top: 0;
}

body.page-home .apk-install-heading h2 {
  margin: 0;
  color: var(--paper);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-stretch: 114%;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

body.page-home .apk-install-steps h3 {
  margin: 10px 0 6px;
  color: var(--paper);
  font-size: 1.2rem;
}