/* pages.css — page-specific sections built from the primitives in base.css and the components… */
/* Ambient canvas */
.ambient {
  position: fixed;
  inset: 0;
  z-index: var(--z-ambient);
  pointer-events: none;
  width: 100%;
  height: 100%;
}
/* Hero — asymmetric 7/5, phone seated in an arch that breaks the section edge */
.hero { position: relative; padding-block: clamp(48px, 7vw, 96px) clamp(64px, 8vw, 116px); overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
  background-image: radial-gradient(80% 70% at 62% 30%, var(--lattice), transparent 74%);
  -webkit-mask: var(--jaali) 0 0/var(--jaali-size) repeat;
  mask: var(--jaali) 0 0/var(--jaali-size) repeat;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-lamp);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 7fr 5fr; }
}
.hero__copy { max-width: 40rem; }
.hero h1 { margin-bottom: var(--s-5); }
/* prose must never sit on lattice */
.hero__copy p, .hero__copy .kicker { position: relative; }
.hero__lead { max-width: 46ch; }
.hero .btn-row { margin-top: var(--s-7); }
.hero__reassure {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
  list-style: none;
  padding: 0;
  font-size: var(--t-sm);
  color: var(--pearl-soft);
}
.hero__reassure li { display: inline-flex; align-items: center; gap: var(--s-2); margin: 0; }
.hero__reassure svg { width: 15px; height: 15px; color: var(--ink-jade); flex: 0 0 auto; }
.hero__stage { position: relative; }
.hero__frame {
  position: relative;
  width: min(330px, 82%);
  margin-inline: auto;
  border-radius: var(--arch-hero) var(--arch-hero) 14px 14px;
  border: 1px solid var(--foil-soft);
  background: var(--panel);
  box-shadow: var(--lift-3);
  /* the arch head is a tympanum, not a crop: the screenshot sits below it so
     no part of the app UI is cut away by the curve */
  padding: 80px var(--s-3) var(--s-3);
  overflow: hidden;
}
/* lattice screen filling the arch head */
.hero__frame::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 92px;
  pointer-events: none;
  background-image: radial-gradient(70% 100% at 50% 100%, var(--lattice), transparent 76%);
  -webkit-mask: var(--jaali) 0 0/var(--jaali-size) repeat;
  mask: var(--jaali) 0 0/var(--jaali-size) repeat;
}
/* single centred rosette at the apex */
.hero__frame::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 26px;
  translate: -50% 0;
  width: 14px;
  height: 14px;
  background-color: var(--foil-soft);
  -webkit-mask: var(--rosette) 0 0/14px 14px no-repeat;
  mask: var(--rosette) 0 0/14px 14px no-repeat;
  pointer-events: none;
  transition: background-color var(--d-base) var(--ease-out);
}
.hero__stage:hover .hero__frame::after { background-color: var(--foil); }
@media (min-width: 1024px) {
  /* the arch breaks past the section edge */
  .hero__stage { margin-block: calc(var(--s-8) * -1); }
  .hero__frame { width: min(330px, 100%); margin-right: 0; }
}
.hero__frame img { width: 100%; height: auto; border-radius: 20px; }
/* Hanging lamp-chips: outer node is parallaxed by JS, inner node sways. */
.lamp-chip { position: absolute; z-index: var(--z-raised); will-change: transform; }
.lamp-chip__body {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--arch-sm);
  background: var(--panel-2);
  border: 1px solid var(--foil-soft);
  box-shadow: var(--lift-2);
  white-space: nowrap;
}
.lamp-chip__body::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -14px;
  width: 1px;
  height: 14px;
  background: var(--foil-soft);
}
.lamp-chip strong { font-size: var(--t-sm); color: var(--pearl); font-weight: 700; }
.lamp-chip .num { color: var(--ink-jade); font-weight: 600; font-size: var(--t-sm); }
.lamp-chip small { display: block; font-size: 11px; color: var(--pearl-dim); }
.lamp-chip--a { top: 12%; left: -6%; }
.lamp-chip--b { bottom: 16%; right: -4%; }
@media (max-width: 640px) {
  .lamp-chip--a { top: 4%; left: -2%; }
  .lamp-chip--b { bottom: 6%; right: -2%; }
  .lamp-chip__body { padding: var(--s-2) var(--s-3); }
}
/* Stats bar — numerals cut into brass */
.stats {
  position: relative;
  background: var(--midnight-2);
  border-block: 1px solid var(--foil-faint);
  padding-block: var(--s-7);
}
.stats__grid {
  display: grid;
  gap: var(--s-5) var(--gutter);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
}
@media (min-width: 760px) {
  .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.stat__value { font-size: var(--t-stat); line-height: 1.1; margin-bottom: var(--s-3); }
.stat__label { letter-spacing: .12em; color: var(--pearl-soft); }
/* Features — 3-up, the middle card raised, wider, fully foil-framed */
.features__grid { display: grid; gap: var(--gutter); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) {
  .features__grid { grid-template-columns: 1fr 1.18fr 1fr; }
  .features__grid > :nth-child(2) { margin-top: calc(var(--s-7) * -1); }
}
.feature {
  padding: var(--s-7) var(--s-6) var(--s-6);
  border-radius: var(--arch);
  background: var(--panel);
  border: var(--hairline);
  box-shadow: var(--lift-1);
  transition: transform var(--d-base) var(--ease-arch), border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out);
}
.feature:hover { transform: translateY(-4px); border-color: var(--foil); }
.feature--raised {
  border-color: var(--foil);
  background: var(--panel-2);
  box-shadow: var(--lift-3);
  padding-top: var(--s-8);
}
.feature { text-align: center; }
.feature p { color: var(--pearl-soft); margin-bottom: 0; }
.feature h3 { margin-bottom: var(--s-3); }
.feature .medallion { margin: 0 auto var(--s-5); }
.card .medallion { margin-bottom: var(--s-5); }
.member .medallion { margin: 0 auto var(--s-4); }
/* Games grid — an arcade of arches; every 5th bay is wide and tall */
.games__grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) {
  .games__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .games__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .games__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .games__grid > .game:nth-child(5n) { grid-column: span 2; }
  .games__grid > .game:nth-child(5n) .game__shot { aspect-ratio: 16 / 11; }
}
.game {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform var(--d-base) var(--ease-arch), border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out), opacity var(--d-base) var(--ease-out);
}
.game:hover { transform: translateY(-6px); border-color: var(--foil); box-shadow: var(--lift-2); }
/* rosettes stay invisible at rest so the grid never reads as sticker-covered */
.game::before, .game::after {
  content: "";
  position: absolute;
  top: 10px;
  width: 14px;
  height: 14px;
  background-color: var(--foil);
  -webkit-mask: var(--rosette) 0 0/14px 14px no-repeat;
  mask: var(--rosette) 0 0/14px 14px no-repeat;
  opacity: 0;
  z-index: var(--z-raised);
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out);
}
.game::before { left: 10px; }
.game::after { right: 10px; }
.game:hover::before, .game:hover::after { opacity: 1; }
.game__shot {
  position: relative;
  aspect-ratio: 211 / 260;
  overflow: hidden;
  background: var(--midnight-2);
  border-radius: 17px 17px 0 0;
}
.game__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--ease-arch);
}
.game:hover .game__shot img { transform: scale(1.05); }
.game__badge { position: absolute; top: var(--s-3); left: var(--s-3); z-index: var(--z-base); }
.game:hover .game__badge { animation: badge-pop var(--d-slow) var(--ease-arch); }
.game__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4);
}
.game__name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--pearl);
  margin: 0;
}
.game__cat {
  display: block;
  font-size: 11px;
  color: var(--pearl-dim);
  font-family: var(--font-mono);
  letter-spacing: .06em;
  margin-top: 3px;
}
.game__rtp { flex: 0 0 auto; font-size: var(--t-xs); padding: .3em .55em; }
.games__empty {
  padding: var(--s-8) var(--s-5);
  text-align: center;
  color: var(--pearl-soft);
  border: 1px dashed var(--foil-soft);
  border-radius: var(--arch-sm);
}
.games__empty[hidden] { display: none; }
[data-games] > [role="tabpanel"] > .section:first-child { padding-top: var(--s-6); }
.games__toolbar { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
@media (min-width: 760px) {
  [data-games] > [role="tabpanel"] > .section:first-child { padding-top: var(--s-6); }
.games__toolbar { grid-template-columns: 1fr 300px; align-items: end; }
}
/* Countdown */
.countdown {
  position: relative;
  padding: var(--s-8) var(--s-6);
  border-radius: var(--arch);
  background: var(--panel);
  border: 1px solid var(--foil-soft);
  box-shadow: var(--lift-3);
  text-align: center;
}
.countdown .lead { margin-inline: auto; }
.countdown__clock {
  display: flex;
  justify-content: center;
  gap: var(--s-3);
  margin: var(--s-6) 0 var(--s-7);
  flex-wrap: wrap;
}
.digit {
  position: relative;
  min-width: 74px;
  padding: var(--s-4) var(--s-3) var(--s-3);
  border-radius: var(--r-well);
  border: 1px solid var(--foil-faint);
  background: linear-gradient(180deg, rgba(230,193,109,.09), rgba(230,193,109,.02) 62%), var(--midnight-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -8px 14px -10px rgba(0,0,0,.55);
  overflow: hidden;
}
.digit::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(230,193,109,.45), transparent);
  opacity: 0;
  pointer-events: none;
}
.digit__v {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--foil);
}
.digit__k {
  display: block;
  font-size: 10px;
  letter-spacing: .16em;
  margin-top: var(--s-2);
  color: var(--pearl-dim);
}
@media (max-width: 420px) {
  .digit { min-width: 62px; }
}
/* Testimonials — hanging cloth panels */
.testimonials {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: var(--fade-x);
  mask-image: var(--fade-x);
}
.testimonials__track {
  display: flex;
  gap: var(--gutter);
  width: max-content;
  padding-block: var(--s-6);
  animation: marquee-slide 62s linear infinite;
}
.testimonials:hover .testimonials__track, .testimonials__track[data-paused="true"] {
  animation-play-state: paused;
}
.testimonials__group { display: flex; gap: var(--gutter); flex: 0 0 auto; }
.tcard { flex: 0 0 auto; width: min(330px, 78vw); padding: var(--s-6); }
.tcard__stars {
  color: var(--ink-marigold);
  letter-spacing: .12em;
  font-size: var(--t-sm);
  margin-bottom: var(--s-3);
}
.tcard__quote { color: var(--pearl-soft); margin-bottom: var(--s-5); font-size: var(--t-sm); }
.tcard__who { display: flex; align-items: center; gap: var(--s-3); }
.tcard__name { font-weight: 700; font-size: var(--t-sm); }
.tcard__city { font-size: var(--t-xs); color: var(--pearl-dim); }
/* Long-form SEO block — two-column editorial with a sticky arched side rail */
.editorial { display: grid; gap: clamp(36px, 5vw, 64px); align-items: start; }
@media (min-width: 900px) {
  .editorial { grid-template-columns: minmax(0, 1fr) 320px; }
}
.editorial__rail { position: relative; }
@media (min-width: 900px) {
  .editorial__rail { position: sticky; top: 108px; }
}
.rail { padding: var(--s-6); }
.rail h3 { color: var(--ink-marigold); margin-bottom: var(--s-4); }
.rail dl { margin: 0; }
.rail dt {
  font-size: var(--t-xs);
  color: var(--pearl-dim);
  font-family: var(--font-mono);
  letter-spacing: .06em;
}
.rail dd {
  margin: 2px 0 var(--s-4);
  font-weight: 700;
  color: var(--pearl);
  font-size: var(--t-sm);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--foil-faint);
}
.rail dd:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
/* Page hero (inner pages) */
.pagehead {
  position: relative;
  padding-block: clamp(52px, 7vw, 92px) clamp(40px, 5vw, 64px);
  overflow: hidden;
}
.pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(70% 100% at 50% 0%, var(--lattice), transparent 76%);
  -webkit-mask: var(--jaali) 0 0/var(--jaali-size) repeat;
  mask: var(--jaali) 0 0/var(--jaali-size) repeat;
}
.pagehead__inner { position: relative; z-index: var(--z-base); max-width: 60ch; }
.pagehead h1 { margin-bottom: var(--s-4); }
.pagehead .lead { margin-bottom: 0; }
.pagehead .btn-row { margin-top: var(--s-6); }
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--pearl-dim);
}
.crumbs li { margin: 0; display: inline-flex; align-items: center; gap: var(--s-2); }
.crumbs li + li::before { content: "/"; color: var(--foil-soft); }
.crumbs a { color: var(--pearl-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink-marigold); }
/* Download steps */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--gutter);
}
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.step {
  position: relative;
  margin: 0;
  padding: var(--s-6) var(--s-6) var(--s-6) calc(var(--s-6) + 62px);
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-arch);
}
.step:hover { border-color: var(--foil); transform: translateY(-3px); }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: var(--s-6);
  top: var(--s-6);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-well);
  border: 1px solid var(--foil-faint);
  background: var(--midnight-2);
  color: var(--foil);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-sm);
}
.step h3 { margin-bottom: var(--s-2); }
.step p { color: var(--pearl-soft); margin-bottom: 0; font-size: var(--t-sm); }
.callout {
  padding: var(--s-6);
  border-radius: var(--arch-sm);
  border: 1px solid var(--foil-soft);
  background: var(--midnight-2);
}
.callout--warn { border-color: var(--ember); }
.callout--warn h3 { color: var(--ink-ember); }
.callout h3 { margin-bottom: var(--s-3); }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
/* Contact */
.contact__grid { display: grid; gap: clamp(36px, 5vw, 60px); align-items: start; }
@media (min-width: 900px) {
  .contact__grid { grid-template-columns: 1fr 1fr; }
}
.channels { display: grid; gap: var(--s-4); }
.channel {
  display: flex;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-arch);
}
.channel:hover { border-color: var(--foil); transform: translateY(-3px); }
.channel strong { display: block; font-size: var(--t-body); }
.channel span { font-size: var(--t-sm); color: var(--pearl-soft); }
/* About */
.team { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.member { text-align: center; padding: var(--s-6); }
.member h3 { margin-bottom: var(--s-1); font-size: var(--t-h4); }
.member .meta { margin-bottom: var(--s-3); }
.member p { font-size: var(--t-sm); color: var(--pearl-soft); margin: 0; }
/* Sitemap */
.sitemap { display: grid; gap: var(--gutter); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.sitemap__col { padding: var(--s-6); }
.sitemap__col h2 { font-size: var(--t-h4); margin-bottom: var(--s-4); }
.sitemap__col ul { list-style: none; padding: 0; margin: 0; }
.sitemap__col li { margin-bottom: var(--s-3); }
.sitemap__col a { color: var(--pearl-soft); text-decoration: none; font-size: var(--t-sm); }
.sitemap__col a:hover { color: var(--ink-marigold); }
/* 404 */
.notfound { text-align: center; padding-block: clamp(72px, 12vw, 150px); }
.notfound .well { font-size: clamp(3rem, 12vw, 6rem); margin-bottom: var(--s-6); }
.notfound .btn-row { justify-content: center; }
/* CTA band */
.ctaband {
  position: relative;
  padding: clamp(48px, 6vw, 78px) var(--s-6);
  border-radius: var(--arch);
  background: var(--panel);
  border: 1px solid var(--foil-soft);
  box-shadow: var(--lift-2);
  text-align: center;
  overflow: hidden;
}
.ctaband::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-lamp);
  pointer-events: none;
}
.ctaband > * { position: relative; z-index: var(--z-base); }
.ctaband .btn-row { justify-content: center; margin-top: var(--s-6); }
.ctaband p { color: var(--pearl-soft); max-width: 56ch; margin-inline: auto; }
/* Legal pages — table of contents rail reuses .editorial */
.toc { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: var(--s-2); }
.toc a {
  display: block;
  font-size: var(--t-sm);
  color: var(--pearl-soft);
  text-decoration: none;
  padding: 4px 0;
}
.toc a:hover { color: var(--ink-marigold); }