/* ===
   Yono Game — "High Table"
   pages.css · page-specific sections: hero, stats, floors, games spread,
               screenshots, countdown, editorial SEO, steps, contact, legal, 404
   === */

/* --- HERO ---
   Asymmetric 7/5 split. The phone sits on a large card that overhangs the
   section edge, with two gold chips resting at its corner.
   --- */
.hero { position: relative; padding-block: clamp(40px, 6vw, 82px) var(--sec-y); }
.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}
.hero h1 { color: var(--on-felt); }
.hero h1 .thin {
  display: block;
  font-size: clamp(.95rem, 1.7vw, 1.15rem);
  font-weight: 600;
  letter-spacing: var(--tr-kick);
  text-transform: uppercase;
  font-family: var(--f-mono);
  color: var(--chip-gold);
  margin-bottom: var(--s-4);
}
.hero-sub {
  margin-top: var(--s-5);
  max-width: 56ch;
  color: var(--on-felt-soft);
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
}
.hero-sub strong { color: var(--on-felt); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.hero-tg { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--baize-lit);
  border: 1px solid var(--felt-hair);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--on-felt-soft);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jade); }

.hero-mount { position: relative; }
.hero-mount .mount-card { padding: 16px; }
.hero-mount .shot {
  border-radius: calc(var(--r-card) - 5px);
  overflow: hidden;
  background: var(--bone-2);
}
.hero-mount .shot img { width: 100%; height: auto; }
.hero-chip {
  position: absolute;
  display: grid;
  place-items: center;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--chip-gold);
  color: var(--ink);
  text-align: center;
  font-family: var(--f-mono);
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .03em;
  box-shadow: 0 12px 22px -12px rgba(0,0,0,.7);
  z-index: 3;
}
.hero-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px;
  background: var(--chip-rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
.hero-chip b { display: block; font-size: .78rem; }
.hero-chip.c1 { left: -26px;  bottom: 88px; }
.hero-chip.c2 { left: 16px;   bottom: 18px; }

@media (min-width: 981px) {
  .hero-mount { margin-right: calc(var(--gutter) * -1.4); }
}
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-mount { max-width: 420px; margin-inline: auto; }
}
@media (max-width: 560px) {
  .hero-chip { width: 64px; height: 64px; font-size: .55rem; }
  .hero-chip.c1 { left: -10px; bottom: 74px; }
  .hero-chip.c2 { left: 8px; bottom: 10px; }
}

/* --- STATS --- */
.stat-strip { background: var(--baize-deep); padding-block: var(--s-7); }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}
@media (max-width: 760px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat { display: grid; justify-items: center; gap: 9px; text-align: center; }
.stat .k {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--on-felt-dim);
}

/* --- FLOORS ---
   Category cards. Middle card of each 3-up row is raised and overlaps.
   --- */
.floors { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 900px) { .floors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .floors { grid-template-columns: 1fr; } }
.floor { display: flex; flex-direction: column; gap: var(--s-4); }
.floor .shot { border-radius: calc(var(--r-card) - 5px); overflow: hidden; aspect-ratio: 16/10; background: var(--bone-2); }
.floor .shot img { width: 100%; height: 100%; object-fit: cover; }
.floor .go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  color: var(--pip-red);
  text-transform: uppercase;
}
.floor:hover .go { gap: 12px; }
.floor .go { transition: gap var(--d-ui) var(--e-out); }

/* Three-up fanned hand: middle card raised, larger, overlapping. */
.fan-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); align-items: center; }
@media (min-width: 981px) {
  .fan-3 > :nth-child(2) {
    transform: scale(1.055);
    z-index: 3;
    margin-inline: calc(var(--gutter) * -.42);
  }
  .fan-3 > :nth-child(1) { --tilt: -1.2deg; }
  .fan-3 > :nth-child(3) { --tilt: 1.2deg; }
}
@media (max-width: 980px) { .fan-3 { grid-template-columns: 1fr; } }

/* --- GAMES DEALT SPREAD ---
   Every 5th card spans two columns and rests at a fixed tilt, as if just laid
   down. Flat and single-span on phones.
   --- */
.deal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: var(--gutter);
}
@media (min-width: 760px) {
  .deal-grid > .g-cell:nth-child(5n) { grid-column: span 2; }
  .deal-grid > .g-cell:nth-child(5n) .g-card { --tilt: -1.5deg; --tilt-h: -1.5deg; }
  .deal-grid > .g-cell:nth-child(5n) .g-card {
    display: grid;
    grid-template-columns: 42% minmax(0, 1fr);
    gap: var(--s-4);
    align-items: center;
  }
  .deal-grid > .g-cell:nth-child(5n) .g-meta { padding: 0 10px 0 0; }
  .deal-grid > .g-cell:nth-child(5n) .g-name { font-size: 1.06rem; }
  .deal-grid > .g-cell:nth-child(2n) .g-card { --tilt-h: -1.5deg; }
}
.games-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-6);
}
.search-wrap { position: relative; min-width: min(280px, 100%); }
.search-wrap input {
  background: var(--bone);
  padding-left: 40px;
}
.search-wrap svg {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  fill: var(--ink-dim);
  pointer-events: none;
}
.g-empty {
  padding: var(--s-8) var(--s-6);
  text-align: center;
  color: var(--ink-soft);
}
.cat-block + .cat-block { margin-top: var(--s-9); }
.cat-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-6);
}

/* --- SCREENSHOTS --- */
.screens { background: var(--baize-deep); }

/* --- COUNTDOWN --- */
.countdown { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }
.cd-unit { display: grid; justify-items: center; gap: 8px; }
.cd-digits { display: flex; gap: 5px; }
.digit {
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.7em;
  border-radius: var(--r-input);
  background: var(--readout-bg);
  border: 1px solid var(--readout-edge);
  color: var(--chip-gold);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  font-variant-numeric: tabular-nums;
}
.cd-lbl {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-dim);
}
.card .cd-lbl { color: var(--ink-dim); }

/* --- EDITORIAL ---
   Long-form SEO block: prose card plus a sticky card of key facts.
   --- */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: var(--gutter);
  align-items: start;
}
@media (max-width: 900px) { .editorial { grid-template-columns: minmax(0, 1fr); } }
.editorial-aside { position: sticky; top: 108px; display: grid; gap: var(--s-4); }
@media (max-width: 900px) { .editorial-aside { position: static; } }
.fact-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 11px 0;
  border-bottom: 1px solid var(--bone-edge);
  font-size: var(--t-sm);
}
.fact-row:last-child { border-bottom: 0; }
.fact-row dt { color: var(--ink-dim); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase; }
.fact-row dd { color: var(--ink); font-weight: 700; text-align: right; }

/* Keyword tag cloud kept from the source content. */
.kw-cloud { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--s-7); }
.kw-cloud span {
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: var(--baize-lit);
  border: 1px solid var(--felt-hair);
  font-family: var(--f-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--on-felt-dim);
}

/* --- STEPS --- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.step .n {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--readout-bg);
  border: 1px solid var(--readout-edge);
  color: var(--chip-gold);
  font-family: var(--f-mono);
  font-weight: 700;
  margin-bottom: var(--s-4);
}

/* Vertical timeline used on about.html */
.timeline { display: grid; gap: var(--s-4); }
.tl-item { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--s-5); align-items: start; }
@media (max-width: 640px) { .tl-item { grid-template-columns: 1fr; gap: var(--s-3); } }
.tl-yr {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--chip-gold);
  padding-top: 4px;
}

/* --- SPLIT/MEDIA -- */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4.5vw, 62px);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.media-card { padding: 14px; }
.media-card .shot { border-radius: calc(var(--r-card) - 5px); overflow: hidden; background: var(--bone-2); }
.media-card .shot img { width: 100%; height: auto; }

.mini-stats { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-5); }
.mini-stats div { display: grid; gap: 2px; }
.mini-stats b { font-family: var(--f-mono); font-size: 1.15rem; color: var(--chip-gold); }
.mini-stats span { font-family: var(--f-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); }

/* --- TESTIMONIALS -- */
.t-card {
  width: clamp(268px, 30vw, 340px);
  padding: var(--s-6);
  transform: rotate(var(--tilt, 0deg));
}
.t-card .stars { color: var(--chip-gold); letter-spacing: .12em; margin-bottom: var(--s-3); }
.t-card q { display: block; color: var(--ink-soft); font-style: normal; }
.t-card q::before { content: "\201C"; }
.t-card q::after  { content: "\201D"; }
.t-card .who { margin-top: var(--s-4); display: grid; gap: 1px; }
.t-card .who b { color: var(--ink); font-size: var(--t-sm); }
.t-card .who span { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; color: var(--ink-dim); }

/* --- BANNER --- */
.banner-fig { padding: 14px; }
.banner-fig .shot { border-radius: calc(var(--r-card) - 5px); overflow: hidden; }
.banner-fig .shot img { width: 100%; height: auto; }
.banner-fig figcaption {
  padding-top: 11px;
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  color: var(--ink-dim);
}

/* --- CTA / END --- */
.cta-final { text-align: center; }
.cta-final .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }
.muted { color: var(--ink-dim); font-size: var(--t-xs); }

/* --- CONTACT PAGE -- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--gutter);
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 620px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.info-card + .info-card { margin-top: var(--s-4); }
.info-card h4 { margin-bottom: 6px; }
.channel-list { display: grid; gap: var(--s-3); margin-block: var(--s-5); }
.channel-list li { position: relative; padding-left: 24px; color: var(--ink-soft); font-size: var(--t-sm); }
.channel-list li::before {
  content: "";
  position: absolute;
  left: 4px; top: .58em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--chip-teal);
}
.tg-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--chip-teal);
  margin-bottom: var(--s-3);
}

/* --- PAGE HERO --- */
.page-hero { padding-block: clamp(34px, 5vw, 62px) clamp(40px, 6vw, 76px); }
.page-hero h1 { color: var(--on-felt); }
.page-hero .lead { color: var(--on-felt-soft); max-width: 62ch; margin-top: var(--s-5); }
.page-hero .lead strong { color: var(--on-felt); }

/* --- LEGAL PAGES -- */
.legal-grid {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--gutter);
  align-items: start;
}
@media (max-width: 900px) { .legal-grid { grid-template-columns: minmax(0, 1fr); } }
.toc { position: sticky; top: 108px; }
@media (max-width: 900px) { .toc { position: static; } }
.toc h5 { margin-bottom: var(--s-3); }
.toc a {
  display: block;
  padding: 7px 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
  border-bottom: 1px solid var(--bone-edge);
}
.toc a:last-child { border-bottom: 0; }
.toc a:hover { color: var(--pip-red); }
.legal-meta {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: .05em;
  color: var(--ink-dim);
  margin-bottom: var(--s-6);
}

/* --- SITEMAP ---- */
.sitemap-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--gutter); }
@media (max-width: 900px) { .sitemap-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .sitemap-grid { grid-template-columns: minmax(0,1fr); } }
.sitemap-grid a { display: block; padding: 8px 0; color: var(--ink-soft); border-bottom: 1px solid var(--bone-edge); font-size: var(--t-sm); }
.sitemap-grid a:hover { color: var(--pip-red); }

/* --- 404 --- */
.nf { min-height: 62vh; display: grid; place-items: center; text-align: center; padding-block: var(--sec-y); }
.nf .code {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 15vw, 9rem);
  line-height: 1;
  color: var(--chip-gold);
  letter-spacing: -.03em;
}
.nf .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }

/* --- GAME DETAIL PG --- */
.gd-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--gutter); align-items: start; }
@media (max-width: 900px) { .gd-grid { grid-template-columns: minmax(0,1fr); } }
.gd-art { padding: 14px; }
.gd-art .shot { border-radius: calc(var(--r-card) - 5px); overflow: hidden; aspect-ratio: 4 / 5; background: var(--bone-2); }
.gd-art .shot img { width: 100%; height: 100%; object-fit: cover; }
.gd-specs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-3); margin-block: var(--s-5); }
.gd-spec {
  padding: 12px 14px;
  border-radius: var(--r-input);
  background: var(--bone-2);
  border: 1px solid var(--bone-edge);
}
.gd-spec dt { font-family: var(--f-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-dim); }
.gd-spec dd { font-family: var(--f-mono); font-weight: 700; color: var(--ink); margin-top: 3px; }
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: var(--s-4); }