/* Self-hosted so nothing third-party can block them. Ad blockers, Little
   Snitch and Safari's privacy settings all routinely block fonts.googleapis.com,
   and when they do the page silently falls back to Georgia and system sans.
   All families are OFL licensed, which permits self-hosting. Latin subsets
   only, split the same way Google splits them so latin-ext is fetched only
   when a page actually needs it. */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/nunito-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/nunito-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0f0f11;
  --surface: #17171b;
  --surface2: #1e1e24;
  --border: rgba(255,255,255,0.07);
  --text: #e8e4dd;
  --muted: #7a7570;
  --accent: #73FA79;
  --accent2: #8fa89e;
  --glow: rgba(115,250,121,0.12);
  /* ui-rounded is a CSS generic family, not a font file. On Apple platforms
     Safari resolves it to SF Pro Rounded, the same face Spite & Malice uses,
     so the site matches the app on the devices its players are actually on,
     with nothing downloaded. Apple's font licence forbids embedding or serving
     the SF files; it says nothing about asking the OS for its own system font,
     which is the same mechanism as -apple-system. Everywhere else falls through
     to Nunito, which is close enough that the two read as the same idea. */
  --display: ui-rounded, 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 999;
  opacity: 0.5;
}

/* ---------------------------------------------------------------- nav */

nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 0.85rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(15,15,17,0.72);
  border-bottom: 1px solid var(--border);
}

.logo img { height: 30px; width: auto; display: block; }

.nav-links {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  align-items: center;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s;
  white-space: nowrap;
}

.nav-links a:hover { color: var(--text); }
.nav-links a.nav-cta { color: var(--accent); }

/* Subpage titles. Smaller than the home h1: these sit above dense reference
   copy, and Nunito 800 carries a lot more weight than the serif these sizes
   were originally set for. */
.page-title {
  font-size: clamp(1.9rem, 4.6vw, 2.6rem);
  margin-bottom: 1.25rem;
}

/* ---------------------------------------------------------------- layout */

section {
  padding: 5rem 2.5rem;
  max-width: 980px;
  margin: 0 auto;
}

section.narrow { max-width: 700px; }

h1 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6.4vw, 4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

h2 {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

a { color: var(--accent); }

.divider { width: 100%; height: 1px; background: var(--border); max-width: 980px; margin: 0 auto; }

.btn {
  padding: 0.75rem 1.75rem;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 400;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s;
  display: inline-block;
}

.btn-primary { background: var(--accent); color: #0f0f11; border: none; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px var(--glow); }

/* ---------------------------------------------------------------- hero */

#home {
  padding-top: 7rem;
  padding-bottom: 3.5rem;
  position: relative;
  isolation: isolate;
}

.hero-copy { max-width: 33rem; position: relative; z-index: 2; }

/* ------------------------------------------------- the card table

   A game running behind the hero: build piles climb 1 to 12 and clear, which
   is the actual rule. Colours are sampled from the app - felt #16341f, and
   fills bucketed by rank the way the deck does it (1-4 red, 5-8 green,
   9-12 blue, wild gold). Purely decorative, so aria-hidden and never
   interactive. Held well back so the copy stays the thing you read. */

.table {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Break out of the 980px section so the felt bleeds edge to edge. Clipped to
     the container it showed a hard rectangle where the gradient ran out. */
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(105% 85% at 78% 42%, #1e4a2c 0%, #16341f 34%, rgba(15,15,17,0) 76%);
  opacity: 0;
  transition: opacity 1.2s ease 0.2s;
}

.table.lit { opacity: 1; }

/* Scrim sits between the felt and the cards, so it mutes the green without
   greying out the cards on top of it. Vertical on mobile, where the copy runs
   the full width; horizontal on desktop, where the copy is left and the table
   is right. */
.table::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom,
    var(--bg) 0%, rgba(15,15,17,0.82) 34%, rgba(15,15,17,0.34) 100%);
}

.pile {
  position: absolute;
  z-index: 2;
  width: var(--cw);
  aspect-ratio: 5 / 7;
  opacity: 0.9;
}

@media (min-width: 820px) {
  .table::after {
    background: linear-gradient(to right,
      var(--bg) 0%, rgba(15,15,17,0.9) 34%, rgba(15,15,17,0.25) 62%, rgba(15,15,17,0.1) 100%);
  }
}

.tcard {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--cw) * 0.16);
  border: calc(var(--cw) * 0.055) solid #fff;
  background: var(--fill);
  color: #fff;
  display: grid;
  place-items: center;
  /* Same rounded face as the headings, which is the same face the real cards
     use in the app: SF Pro Rounded on Apple, Nunito everywhere else. */
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(var(--cw) * 0.46);
  line-height: 1;
  /* Down and to the left, tight. Was centred, wide and heavy. */
  box-shadow: calc(var(--cw) * -0.045) calc(var(--cw) * 0.06)
              calc(var(--cw) * 0.12) rgba(0,0,0,0.32);
  transition: transform 620ms cubic-bezier(0.22, 0.78, 0.28, 1),
              opacity 520ms ease;
  will-change: transform, opacity;
}

/* rank in the corners, the second one mirrored, same as the real card */
.tcard b,
.tcard i {
  position: absolute;
  font-size: calc(var(--cw) * 0.17);
  font-weight: 700;
  font-style: normal;
}

.tcard b { top: 6%; left: 7%; }
.tcard i { bottom: 6%; right: 7%; transform: rotate(180deg); }

/* Narrow screens have no clear space beside the copy, so the table runs behind
   it and goes out of focus. Blurred, it reads as depth rather than as detail
   competing with the text. Blur is applied per card, not to a wrapper: each
   card is already its own layer thanks to will-change, so the raster area
   stays small instead of re-blurring one big layer on every frame. */
@media (max-width: 819px) {
  .tcard { box-shadow: none; }
  .pile {
    /* Blur the PILE, not each card. Per-card blur spreads a halo past every
       card's edge, and a stack of three overlapping halos compounds into
       something visibly denser than a single card. Blurring here composites
       the stack first, so it is always exactly one blur no matter how deep
       the pile is. Heavy enough to read as a pool of colour rather than a
       blurry rectangle sitting on the copy. */
    filter: blur(calc(var(--cw) * 0.22));
    opacity: 0.34;
  }
  .table::after {
    background: linear-gradient(to bottom,
      var(--bg) 0%, rgba(15,15,17,0.66) 34%, rgba(15,15,17,0.28) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .table { transition: none; }
  .tcard { transition: none; }
}

/* Icon and title on one line. Icon tracks the title's size so the pairing
   holds together from phone to desktop. */
.hero-app {
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 1.6vw, 1.15rem);
  margin-bottom: 0.35rem;
}

.hero-app img {
  width: clamp(50px, 8.5vw, 74px);
  height: clamp(50px, 8.5vw, 74px);
  border-radius: 22%;
  display: block;
  flex: none;
}

.hero-app h1 { margin: 0; }

.hero-lead {
  font-size: 1.1rem;
  color: var(--muted);
  margin-top: 1rem;
  max-width: 30rem;
}

.rating {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* Two layers, so the row can show a fraction. A 4.6 used to round up to five
   solid stars next to the text "4.6", which overstates it. The fill layer is
   clipped to --pct = rating / 5. */
.stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  --pct: 100%;
}

.stars .row { display: flex; gap: 2px; }
.stars svg { width: 15px; height: 15px; display: block; }
.stars .base svg { fill: rgba(255,255,255,0.16); }

.stars .fill {
  position: absolute;
  inset: 0;
  width: var(--pct);
  overflow: hidden;
}

.stars .fill svg { fill: var(--accent); }

.rating-text { font-size: 0.88rem; color: var(--muted); }

.hero-cta { margin-top: 1.6rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.hero-meta {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.appstore-badge { display: inline-block; transition: opacity 0.2s ease, transform 0.2s ease; }
.appstore-badge:hover { opacity: 0.85; transform: translateY(-1px); }

/* ---------------------------------------------------------------- facts */

.facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.5rem 1.5rem;
  margin-top: 2.75rem;
  padding: 0;
}

.facts li {
  color: var(--muted);
  font-size: 0.95rem;
  position: relative;
  padding-left: 1.15rem;
}

.facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

/* ---------------------------------------------------------------- gallery */

.gallery {
  display: grid;
  grid-auto-flow: column;
  /* 62% reads right on a phone, but at a 700-800px window it balloons to
     400-500px per card. Cap it so a card is never bigger than it should be. */
  grid-auto-columns: min(62%, 260px);
  gap: 0.85rem;
  margin-top: 1.75rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  /* bleed to the screen edge so the strip reads as scrollable */
  margin-inline: -1.25rem;
  padding-inline: 1.25rem;
}

.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  scroll-snap-align: start;
}

.gallery::-webkit-scrollbar { height: 6px; }
.gallery::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ---------------------------------------------------------------- rules */

.eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.steps { list-style: none; counter-reset: step; margin: 1.5rem 0 0; padding: 0; }

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  margin-bottom: 1.35rem;
  color: var(--muted);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1em;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.steps strong { color: var(--text); font-weight: 400; display: block; }

.rulebox {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1.6rem;
  margin-top: 1.5rem;
}

.rulebox h3 { margin-bottom: 0.6rem; }
.rulebox ul { list-style: none; padding: 0; margin: 0; }

.rulebox li {
  color: var(--muted);
  font-size: 0.95rem;
  position: relative;
  padding-left: 1.15rem;
  margin-bottom: 0.4rem;
}

.rulebox li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.55;
}

.rules-media { margin-top: 2rem; text-align: center; }
.rules-media img { width: 100%; max-width: 260px; height: auto; border-radius: 14px; }

/* ---------------------------------------------------------------- faq */

.faq { margin-top: 1.5rem; border-top: 1px solid var(--border); }

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  cursor: pointer;
  padding: 1.1rem 2rem 1.1rem 0;
  font-size: 1rem;
  color: var(--text);
  list-style: none;
  position: relative;
}

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

.faq summary::after {
  content: '+';
  position: absolute;
  right: 0.25rem;
  top: 1rem;
  color: var(--accent);
  font-size: 1.1rem;
}

.faq details[open] summary::after { content: '\2212'; }

.faq .answer { padding: 0 0 1.25rem; color: var(--muted); font-size: 0.95rem; }
.faq .answer p { margin-bottom: 0.6rem; }

/* ---------------------------------------------------------------- press */

.factsheet { margin-top: 1.5rem; }

.factsheet div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.5rem 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
}

.factsheet dt { color: var(--muted); }
.factsheet dd { color: var(--text); margin: 0; }

.downloads { display: grid; gap: 0.6rem; margin-top: 1.5rem; }

.download {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.95rem 1.25rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

.download:hover { border-color: rgba(115,250,121,0.35); }
.download span { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }

/* ---------------------------------------------------------------- cta strip */

.cta-strip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem;
  margin-top: 3rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cta-strip img { width: 56px; height: 56px; border-radius: 13px; display: block; }
.cta-strip h3 { margin-bottom: 0.25rem; }
.cta-strip p { color: var(--muted); font-size: 0.9rem; }
.cta-strip .grow { flex: 1 1 14rem; }

/* ---------------------------------------------------------------- reviews */

.reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}

.review {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
}

.review blockquote {
  font-size: 0.96rem;
  color: var(--text);
  line-height: 1.65;
}

.review .stars { margin-bottom: 0.85rem; }

.review cite {
  display: block;
  margin-top: 0.9rem;
  font-style: normal;
  font-size: 0.8rem;
  color: var(--muted);
}

.reviews-note { margin-top: 1.25rem; font-size: 0.8rem; color: var(--muted); opacity: 0.75; }

/* ---------------------------------------------------------------- about + legal */

#about p { font-size: 1.05rem; color: var(--muted); max-width: 540px; margin-bottom: 0.5rem; }

.legal-content { color: var(--muted); font-size: 0.92rem; }

.legal-content h3 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--text);
  margin: 1.5rem 0 0.5rem;
}

.legal-content h3:first-child { margin-top: 0; }
.legal-content p { margin-bottom: 0.6rem; }

.back-link {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}

.back-link:hover { color: var(--text); }

.apple-trademark {
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.6;
  opacity: 0.35;
  margin-top: 2.5rem;
}

footer {
  text-align: center;
  padding: 2.5rem;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--text); }

/* ---------------------------------------------------------------- motion */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}

.hero-copy { opacity: 0; animation: fadeUp 0.8s 0.1s forwards; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy { animation: none; opacity: 1; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------- responsive */

@media (min-width: 820px) {
  #home {
    padding-top: 8.5rem;
    padding-bottom: 5rem;
  }
  .gallery {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: auto;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
    gap: 1rem;
  }
  .factsheet div { grid-template-columns: 11rem 1fr; }
}

@media (max-width: 600px) {
  nav { padding: 0.75rem 1.25rem; }
  .nav-links { gap: 1.1rem; }
  .nav-links a { font-size: 0.75rem; }
  section { padding: 4rem 1.25rem; }
  #home { padding-top: 6rem; padding-bottom: 2.5rem; }
}

@media (max-width: 400px) {
  .nav-links a.nav-about { display: none; }
}