/* Stake App AR — palette follows the Stake product UI */
:root {
  --bg-0: #0f212e;
  --bg-1: #1a2c38;
  --bg-2: #213743;
  --bg-3: #2f4553;
  --line: #2f4553;
  --text: #ffffff;
  --muted: #b1bad3;
  --dim: #8496a6;
  --blue: #1475e1;
  --blue-hi: #3d8ff0;
  --green: #00e701;
  --red: #ed4163;
  --radius: 14px;
  --radius-lg: 22px;
  --wrap: 1200px;
  --gutter: 16px;
  --header-h: 64px;
  --tabbar-h: 62px;
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-1);
  color: var(--muted);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-hi); text-underline-offset: 3px; }
a:hover { color: #fff; }
h1, h2, h3, strong, th, dt { color: var(--text); }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); font-weight: 800; margin-bottom: 24px; text-wrap: balance; }
h3, .h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.45rem); font-weight: 700; margin: 40px 0 16px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--blue-hi); outline-offset: 2px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap--narrow { --wrap: 880px; }
.muted { color: var(--dim); font-size: .95rem; margin: 16px 0 0; }

/* Buttons */
.btn {
  --b: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 22px; border: 0; border-radius: 10px;
  background: var(--b); color: #fff; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: background-color .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: color-mix(in srgb, var(--b), #fff 12%); color: #fff; }
.cta-line { margin: 8px 0 16px; min-width: 240px; }
.btn:active { transform: translateY(1px); }
.btn--ghost { --b: var(--bg-3); }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: .95rem; }
.btn--xs { min-height: 32px; padding: 4px 10px; font-size: .85rem; border-radius: 8px; flex: 1; }
.btn--store { min-height: 60px; justify-content: flex-start; padding: 10px 20px; text-align: left; line-height: 1.2; box-shadow: 0 10px 30px -10px rgb(20 117 225 / .7); }
.btn--store span { white-space: nowrap; }
.btn--store small { display: block; font-size: .8rem; font-weight: 500; opacity: .8; }
.btn--store svg { fill: currentColor; flex: none; }
.btn--store.btn--ghost { box-shadow: none; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px -16px #000;
}
.site-header::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transform-origin: 0 50%; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .site-header::after { animation: progress linear both; animation-timeline: scroll(root); }
}
@keyframes progress { to { transform: scaleX(1); } }
.site-header__bar { display: flex; align-items: center; gap: 12px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-weight: 800; font-size: .95rem; letter-spacing: .02em; margin-right: auto; }
.brand span { padding: 3px 8px; border-radius: 6px; background: var(--bg-3); font-size: .75rem; text-transform: uppercase; }
.brand:hover { color: var(--text); }
.menu-toggle { order: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--bg-2); color: var(--text); cursor: pointer; }
.site-nav { margin: 0; border: 0; padding: 0; }
.site-nav:popover-open {
  position: fixed; inset: var(--header-h) 0 auto 0; width: auto;
  background: var(--bg-0); padding: 12px var(--gutter) 24px; box-shadow: 0 24px 40px -10px #000;
}
.site-nav ul { list-style: none; display: grid; gap: 4px; }
.site-nav a { display: block; padding: 12px 14px; border-radius: 10px; color: var(--text); font-weight: 600; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current], .site-nav a.is-active { background: var(--bg-2); }
.site-nav a[aria-current], .site-nav a.is-active { box-shadow: inset 3px 0 0 var(--green); }
.site-header__cta { display: none; }

/* Sticky app bar, shown after the hero leaves the viewport */
/* Bottom tab bar on phones and tablets, like the brand's own mobile navigation */
.tabbar {
  position: fixed; inset: auto 0 0; z-index: 45;
  background: var(--bg-1); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -10px 30px -12px #000;
}
.tabbar ul { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); height: var(--tabbar-h); max-width: 640px; margin-inline: auto; }
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%;
  color: var(--muted); font-size: .78rem; font-weight: 700; text-decoration: none; position: relative;
}
.tabbar svg { fill: currentColor; }
.tabbar a:hover, .tabbar a[aria-current], .tabbar a.is-active { color: #fff; }
.tabbar a[aria-current]::before, .tabbar a.is-active::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 44px; height: 3px; margin-left: -22px; border-radius: 0 0 3px 3px; background: var(--green);
}

.appbar {
  position: fixed; inset: auto 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 40;
  background: color-mix(in srgb, var(--bg-0) 92%, transparent); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  translate: 0 110%; transition: translate .35s cubic-bezier(.2,.8,.2,1);
}
.appbar.is-visible { translate: 0 0; }
.appbar__inner { display: flex; align-items: center; gap: 12px; padding-block: 10px; }
.appbar img { border-radius: 10px; }
.appbar p { margin: 0 auto 0 0; line-height: 1.2; font-size: .9rem; }
.appbar strong { display: block; }

/* Hero: app store page */
.hero {
  position: relative; isolation: isolate;
  padding: 20px 0 40px;
  background:
    radial-gradient(60% 50% at 85% 10%, rgb(20 117 225 / .35), transparent 70%),
    radial-gradient(40% 40% at 0% 100%, rgb(0 231 1 / .08), transparent 70%),
    var(--bg-0);
}
.hero__grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stats" "cta" "shots" "lead" "art"; }
.hero__grid > * { min-width: 0; }
.app-head { grid-area: head; display: flex; gap: 16px; align-items: center; }
.app-head__icon { width: 84px; height: 84px; border-radius: 22%; box-shadow: 0 12px 30px -8px rgb(20 117 225 / .6), 0 0 0 1px rgb(255 255 255 / .08); flex: none; }
.app-head h1 { font-size: clamp(1.6rem, 1.1rem + 2.6vw, 3rem); font-weight: 900; }
.app-head h1 span { display: block; font-size: .5em; font-weight: 700; color: var(--green); letter-spacing: 0; margin-top: 4px; }
.app-head__sub { margin: 4px 0 6px; font-size: .9rem; color: var(--muted); line-height: 1.35; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { padding: 2px 9px; border-radius: 999px; background: var(--bg-2); color: var(--text); font-size: .75rem; font-weight: 700; }

.stats { grid-area: stats; display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; }
.stats div { display: flex; flex-direction: column-reverse; align-items: center; text-align: center; padding: 2px 4px; }
.stats div + div { border-left: 1px solid var(--line); }
.stats dd { white-space: nowrap; margin: 0; display: flex; align-items: center; gap: 4px; color: var(--text); font-weight: 800; font-size: 1.05rem; }
.stats dd svg { fill: currentColor; }
.stats dt { color: var(--dim); font-size: .75rem; font-weight: 500; white-space: nowrap; }

.hero__cta { grid-area: cta; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero__cta .btn--store { padding-inline: 14px; gap: 10px; font-size: .95rem; min-width: 0; }
@media (max-width: 23.4375em) {
  .hero__cta { gap: 8px; }
  .hero__cta .btn--store { padding-inline: 10px; gap: 7px; font-size: .84rem; }
  .hero__cta .btn--store span { white-space: normal; }
  .hero__cta .btn--store svg { width: 20px; height: 20px; }
  .btn--store small { font-size: .72rem; }
  .stats dt { font-size: .68rem; }
  .stats dd { font-size: .95rem; }
  .app-head__icon { width: 72px; height: 72px; }
}
.hero__lead { grid-area: lead; margin: 0; color: var(--muted); }
.hero__art { grid-area: art; width: 100%; border-radius: var(--radius-lg); }

.shots { grid-area: shots; min-width: 0; }
.shots__title { font-size: 1rem; font-weight: 700; margin: 0 0 10px; color: var(--muted); }
.shots__list {
  list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 42%;
  gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.shots__list::-webkit-scrollbar { display: none; }
.shots__list li { scroll-snap-align: start; }
.shots__list img { border-radius: 16px; aspect-ratio: 1 / 2; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / .06); }

/* Inner page header */
.page-hero {
  position: relative; isolation: isolate; padding: 16px 0 40px;
  background:
    radial-gradient(55% 60% at 90% 0%, rgb(20 117 225 / .3), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgb(0 231 1 / .07), transparent 70%),
    var(--bg-0);
}
.page-hero__grid { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.page-hero__grid > * { min-width: 0; }
.page-hero h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); font-weight: 900; margin: 14px 0 16px; text-wrap: balance; }
.page-hero__lead { font-size: 1.08rem; max-width: 62ch; }
.page-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 14px; }
.page-hero__cta .btn--primary:not(.btn--store) { min-height: 54px; padding-inline: 28px; box-shadow: 0 10px 30px -10px rgb(20 117 225 / .7); }
.page-hero__meta { margin: 0; font-size: .88rem; color: var(--dim); }
.page-hero__art { width: 100%; border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px #000; }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: .85rem; }
.crumbs li { display: flex; align-items: center; }
.crumbs li + li::before { content: "/"; margin: 0 8px; color: var(--bg-3); }
.crumbs a { color: var(--dim); text-decoration: none; font-weight: 600; }
.crumbs a:hover { color: #fff; }
.crumbs a[aria-current] { color: var(--muted); }

/* On-this-page navigation */
.toc { position: sticky; top: var(--header-h); z-index: 30; background: color-mix(in srgb, var(--bg-1) 94%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.toc ol { list-style: none; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px 0; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.toc ol::-webkit-scrollbar { display: none; }
.toc a { display: block; white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--bg-2); color: var(--muted); font-size: .85rem; font-weight: 600; text-decoration: none; }
.toc a:hover { background: var(--bg-3); color: #fff; }
.toc + .section { padding-top: 48px; }

/* Link tiles and link cards */
.tiles { list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin-top: 8px; }
.tile { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 0 0 20px; border-radius: var(--radius-lg); background: var(--bg-2); color: var(--muted); text-decoration: none; overflow: hidden; transition: background-color .2s, translate .2s; }
.tile:hover { background: var(--bg-3); color: var(--muted); translate: 0 -3px; }
.tile img { aspect-ratio: 1200 / 760; object-fit: cover; width: 100%; margin-bottom: 10px; }
.tile__title, .tile__text { padding-inline: 20px; }
.tile__title { color: var(--text); font-weight: 800; font-size: 1.1rem; line-height: 1.25; }
.tile__title::after { content: " →"; color: var(--green); }
.tile__text { font-size: .93rem; line-height: 1.5; }
.tiles--compact .tile { padding-top: 20px; border-left: 3px solid var(--blue); }
.section--band .tile { background: var(--bg-1); }
.section--band .tile:hover { background: var(--bg-2); }
.related { border-top: 1px solid var(--line); }

.features--links li { display: flex; flex-direction: column; }
.features--links p { flex: 1; margin-bottom: 14px; }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--green); text-decoration: none; }
.more::after { content: "→"; transition: translate .2s; }
.more:hover { color: #fff; }
.more:hover::after { translate: 4px 0; }
.more-line { margin: 20px 0 0; }
.callout { padding: 16px 20px; border-radius: var(--radius); background: color-mix(in srgb, var(--blue) 14%, var(--bg-2)); border-left: 3px solid var(--blue); color: var(--text); }
table.card { padding: 0; }
table.kv.card { border-collapse: separate; padding: 8px 24px 12px; }
table.kv caption { text-align: left; margin: 0; padding: 22px 0 6px; caption-side: top; }
table.kv.card caption { padding: 22px 24px 6px; background: var(--bg-2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.h3--flush { margin-top: 0; }

/* Sections */
.section { padding: 64px 0; }
.section--tight { padding: 40px 0; }
.section--band { background: var(--bg-0); }
.prose { max-width: 72ch; }
.prose > :last-child { margin-bottom: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
.split > * { min-width: 0; }
.split > .prose h3:first-child, .split > div > h3:first-child { margin-top: 0; }
.split + .split, .steps + .split, .features + h3 { margin-top: 8px; }
.table-scroll + .split { margin-top: 40px; }
.media { width: 100%; border-radius: var(--radius-lg); box-shadow: 0 30px 60px -30px #000; }
.card { background: var(--bg-2); border-radius: var(--radius-lg); padding: 24px; }
.card > h2.h3 { margin: 0 0 16px; }

/* Ratings */
.rating { display: grid; gap: 16px; }
.rating__score { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; margin: 0; }
.rating__score strong { font-size: 3.4rem; font-weight: 900; line-height: 1; grid-row: span 2; }
.rating__score .stars { color: var(--green); letter-spacing: 2px; font-size: 1.05rem; }
.rating__score span:last-child { color: var(--dim); font-size: .9rem; }
.rating__bars { margin: 0; display: grid; gap: 6px; }
.rating__bars div { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: center; }
.rating__bars dt { font-size: .85rem; font-weight: 700; }
.rating__bars dd { margin: 0; }
meter { width: 100%; height: 8px; display: block; appearance: none; border-radius: 99px; background: var(--bg-3); }
meter::-webkit-meter-bar { background: var(--bg-3); border: 0; border-radius: 99px; height: 8px; }
meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: 99px; }
meter::-moz-meter-bar { background: linear-gradient(90deg, var(--blue), var(--green)); border-radius: 99px; }

/* Strengths and weak points */
#pros-cons { padding-top: 0; }
.proscons { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.pc-card { --accent: var(--green); background: var(--bg-2); border-radius: var(--radius-lg); padding: 22px 22px 8px; border-top: 3px solid var(--accent); }
.pc-card--cons { --accent: var(--red); }
.pc-card h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 1.2rem; }
.pc-card h3 span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: var(--bg-0); font-weight: 900; font-size: 1.3rem; line-height: 1; }
.pc-card ul { list-style: none; }
.pc-card li { padding: 14px 0; border-top: 1px solid var(--line); font-size: .95rem; line-height: 1.55; }
.pc-card li strong { display: block; margin-bottom: 3px; font-size: 1rem; }
.pc-tag {
  display: inline-block; margin-bottom: 6px; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}

/* Tables */
table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.kv th, .kv td { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.kv th { width: 42%; padding-right: 16px; font-weight: 600; color: var(--dim); }
.kv td { color: var(--text); }
.kv tr:last-child > * { border-bottom: 0; }
.table-scroll { overflow-x: auto; border-radius: var(--radius); margin-top: 8px; }
.compare { background: var(--bg-2); border-radius: var(--radius); overflow: hidden; min-width: 520px; }
.split--even .compare { min-width: 420px; }
.compare th, .compare td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { background: var(--bg-3); font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.compare tbody th { font-weight: 600; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare tbody tr:hover { background: color-mix(in srgb, var(--bg-2), #fff 3%); }
.compare .yes, .compare .no { font-weight: 600; }
.compare .yes { color: var(--green); }
.compare .no { color: var(--dim); }
.section--band .compare { background: var(--bg-1); }

/* Facts */
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 0; }
.facts div { background: var(--bg-2); border-radius: var(--radius); padding: 16px 18px; border-left: 3px solid var(--blue); }
.facts dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); font-weight: 700; }
.facts dd { margin: 4px 0 0; color: var(--text); font-weight: 600; overflow-wrap: anywhere; }

/* Lists */
.list-num { list-style: none; counter-reset: n; display: grid; gap: 12px; margin-bottom: 1em; }
.list-num li { counter-increment: n; position: relative; padding-left: 46px; min-height: 32px; }
.list-num li::before {
  content: counter(n); position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--bg-3); color: var(--text); font-weight: 800; font-size: .9rem;
}
.list-num--cols { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.list-num--cols li { background: var(--bg-1); border-radius: var(--radius); padding: 18px 18px 18px 62px; }
.list-num--cols li::before { left: 16px; top: 16px; background: var(--blue); }
.list-check, .list-cross { list-style: none; display: grid; gap: 10px; margin-bottom: 1em; }
.list-check li, .list-cross li { position: relative; padding-left: 32px; }
.list-check li::before, .list-cross li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 20px; height: 20px; border-radius: 6px;
  background: var(--green) center / 14px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230f212e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.list-cross li::before {
  background-color: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7l10 10m0-10L7 17' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Illustrated steps */
.steps {
  list-style: none; counter-reset: step;
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 280px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin;
  margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 16px; scroll-padding-inline: var(--gutter);
}
.steps li { counter-increment: step; scroll-snap-align: start; background: var(--bg-2); border-radius: var(--radius-lg); overflow: hidden; }
.section--band .steps li { background: var(--bg-1); }
.steps img { width: 100%; aspect-ratio: 3 / 5; object-fit: cover; }
.steps p { margin: 0; padding: 16px 18px 20px; font-size: .95rem; }
.steps strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.steps strong::before { content: counter(step) ". "; color: var(--green); }

/* Game rails */
.rail { margin-top: 40px; }
.rail__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rail__head h3 { margin: 0; }
.rail__nav { display: flex; }
.rail__btn { width: 44px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.rail__btn:first-child { border-radius: 999px 0 0 999px; }
.rail__btn:last-child { border-radius: 0 999px 999px 0; border-left: 0; }
.rail__btn:first-child svg { rotate: 180deg; }
.rail__btn:hover:not(:disabled) { background: var(--bg-2); }
.rail__btn:disabled { opacity: .35; cursor: default; }
.rail__text { margin: 10px 0 16px; max-width: 72ch; }
.rail__list {
  list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 12px) / 2.6);
  gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.rail__list::-webkit-scrollbar { display: none; }
.game { scroll-snap-align: start; position: relative; }
.game img { border-radius: 10px; aspect-ratio: 168 / 225; object-fit: cover; width: 100%; transition: transform .25s; }
.game p { margin: 6px 0 0; font-size: .8rem; color: var(--dim); display: flex; align-items: center; gap: 6px; }
.game p::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.game__actions { display: flex; gap: 6px; margin-top: 8px; }

/* Feature grid */
.features { list-style: none; display: grid; gap: 14px; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.features li { background: var(--bg-1); border-radius: var(--radius-lg); padding: 22px; position: relative; overflow: hidden; }
.features li::after {
  content: ""; position: absolute; inset: auto -40% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(20 117 225 / .22), transparent 65%); pointer-events: none;
}
.features h3 { margin: 0 0 8px; font-size: 1.15rem; }
.features p { margin: 0; font-size: .97rem; }

/* Notes and responsible gaming */
.note { margin-top: 16px; font-size: .9rem; color: var(--dim); }
.rg-card { background: linear-gradient(160deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; }
.rg-card__age { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--red); color: var(--text); font-weight: 900; font-size: 1.3rem; }
.rg-card__phone { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.4rem); font-weight: 900; margin: 0 0 16px; }
.rg-card__phone a { color: var(--green); text-decoration: none; }

/* Troubleshooting */
.trouble { display: grid; gap: 12px; margin: 0; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.trouble div { background: var(--bg-2); border-radius: var(--radius); padding: 18px 20px; }
.trouble dt { font-weight: 700; margin-bottom: 6px; }
.trouble dd { margin: 0; font-size: .97rem; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--bg-1); border-radius: var(--radius); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 56px 18px 20px; position: relative; color: var(--text); font-weight: 700; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted); rotate: 45deg; transition: rotate .25s;
}
.faq details[open] summary::after { rotate: 225deg; margin-top: -2px; }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size .3s, content-visibility .3s allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq details p { margin: 0; padding: 0 20px 20px; }

/* Footer */
.site-footer { background: var(--bg-0); border-top: 1px solid var(--line); padding: 48px 0 calc(40px + 70px + var(--tabbar-h)); font-size: .93rem; }
.site-footer__top { display: grid; gap: 14px; max-width: 640px; }
.site-footer__top p { margin: 0; }
.site-footer__nav { display: grid; gap: 28px 24px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 36px 0; }
.site-footer__title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); margin: 0 0 12px; }
.site-footer nav ul { list-style: none; display: grid; gap: 8px; }
.site-footer nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
.site-footer nav a:hover { color: #fff; }
.site-footer__legal { border-top: 1px solid var(--line); padding-top: 24px; color: var(--dim); }
.site-footer__legal a { color: var(--green); }
.age { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--red); margin-right: 8px; font-size: .8rem; vertical-align: middle; }

/* Scroll-driven reveal where supported */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .media, .steps li, .features li, .facts div, .trouble div, .card {
      animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%;
    }
  }
  .game:hover img { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@keyframes rise { from { opacity: 0; translate: 0 32px; } }

/* Tablet */
@media (min-width: 40em) {
  :root { --gutter: 24px; }
  .shots__list { grid-auto-columns: 28%; }
  .rail__list { grid-auto-columns: calc((100% - 4 * 12px) / 4.6); }
  .steps { grid-auto-columns: 260px; }
}

/* Desktop */
@media (min-width: 60em) {
  :root { --header-h: 72px; }
  .site-header__cta { display: inline-flex; margin-left: 12px; }

  .page-hero { padding: 24px 0 64px; }
  .page-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .page-hero h1 { margin-top: 20px; }
  .toc ol { margin-inline: 0; padding-inline: 0; }

  .hero { padding: 48px 0 56px; }
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 48px; row-gap: 26px;
    grid-template-areas: "head art" "stats art" "cta art" "lead art" "shots shots";
    align-items: start;
  }
  .hero__art { align-self: center; margin-block: -24px; }
  .app-head { gap: 24px; }
  .app-head__icon { width: 128px; height: 128px; }
  .app-head__sub { font-size: 1.05rem; }
  .tags li { font-size: .8rem; padding: 3px 11px; }
  .stats { max-width: 560px; }
  .stats dd { font-size: 1.25rem; }
  .stats dt { font-size: .82rem; }
  .hero__cta { grid-template-columns: repeat(2, minmax(0, 250px)); gap: 14px; }
  .hero__cta .btn--store { font-size: 1.05rem; padding-inline: 20px; }
  .hero__lead { font-size: 1.1rem; max-width: 56ch; }
  .shots { margin-top: 16px; }
  .shots__list { grid-auto-columns: calc((100% - 4 * 16px) / 5); gap: 16px; margin: 0; padding: 0; overflow: visible; }

  .split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split > .media { position: sticky; top: calc(var(--header-h) + 24px); }

  .steps { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 4px 0 8px; }
  .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; }
  .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .rail__list { grid-auto-columns: calc((100% - 7 * 14px) / 8); gap: 14px; margin-inline: 0; padding-inline: 0; }
  .game__actions { position: absolute; inset: 0 0 auto; aspect-ratio: 168 / 225; margin: 0; padding: 12px; flex-direction: column; justify-content: center; gap: 8px; border-radius: 10px; background: rgb(15 33 46 / .78); opacity: 0; transition: opacity .2s; }
  .game__actions .btn--xs { flex: none; min-height: 38px; }
  .game:hover .game__actions, .game:focus-within .game__actions { opacity: 1; }

  .appbar, .tabbar { display: none; }
  .site-footer { padding-bottom: 48px; }
}

/* Wide desktop: the full navigation fits in the header */
@media (min-width: 75em) {
  .menu-toggle { display: none; }
  .site-nav, .site-nav:not(:popover-open) { display: block; position: static; background: none; padding: 0; inset: auto; }
  .site-nav ul { display: flex; gap: 2px; }
  .site-nav a { padding: 8px 11px; font-size: .93rem; color: var(--muted); }
  .site-nav a:hover { color: #fff; background: var(--bg-2); }
  .site-nav a[aria-current], .site-nav a.is-active { color: #fff; background: var(--bg-2); }
}