/* Site fixes, pages and content (2026-11-03; briefs/site-fixes-pages-2026-11-03.md, audit reports/site-audit-2026-11-02.md items 1, 3 to 8).
   Loaded on every page after keyhole.css. No animation is added here, so Calm mode and reduced motion have nothing to switch off. */

/* F4: the hero's tumbler letters are drawn by CSS, so the H1's text is the real words (keyhole.js puts the letter in data-c) */
.kgtw-s b::before { content: attr(data-c); }

/* F4: the home hero as a launcher. Desktop: the Launch Party band sits close above the hero, so Join and Host are in the first
   900 px; phones: the band is one compact card (every term kept, smaller type), so the hero starts higher. */
@media (min-width: 900px) {
  .kg-home > .kg-lp { margin-bottom: 1.6rem; }
  .kg-home > .kg-hero { padding-top: clamp(1.2rem, 2.4vw, 2.2rem); }
  .kg-hero .kg-launcher { margin-top: 2.2rem; }
}
@media (max-width: 640px) {
  .kg-lp { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.7rem; padding: 0.6rem 0.75rem; }
  .kg-lp-in { flex: 1 1 100%; }
  .kg-lp-t { font-size: 0.84rem; line-height: 1.35; }
  .kg-lp-f { font-size: 0.76rem; line-height: 1.3; margin-top: 0.25rem !important; }
  .kg-lp-badge { width: 1.6rem; height: 1.6rem; font-size: 0.56rem; }
  .kg-lp-go { align-self: center; min-height: 44px; }
}

/* F3: /games/ shows games first on phones and tablets: a one-line lede, no prop beside the title, filter rows that scroll sideways */
.cat-lede { max-width: 44rem; }
.cat-about { margin: 0 0 clamp(2.5rem, 6vw, 4rem); max-width: 48rem; }
.cat-about h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
@media (max-width: 859px) {
  .cat-page .head-prop { display: none; }
  .cat-page .page-head { padding-bottom: 0.4rem; }
}
@media (max-width: 559px) {
  .cat-filters { padding: 0.7rem; gap: 0.5rem; }
  .cat-filters .cat-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .cat-filters .cat-row::-webkit-scrollbar { display: none; }
  .cat-filters .cat-row .filter-label { min-width: auto; flex: none; }
  .cat-filters .cat-row .btn { flex: none; }
}

/* F5 and F6: the email capture (one field, a clear promise, no popup) */
.kgm { margin: clamp(1.6rem, 4vw, 2.6rem) 0; }
.kgm .kgm-f { max-width: 40rem; margin: 0; padding: 1.1rem 1.2rem; border: 1px solid #4b5254; border-left: 4px solid var(--gold, #e3a72f); border-radius: 0.6rem;
  background: linear-gradient(180deg, rgba(43, 49, 51, 0.92), rgba(22, 25, 26, 0.92)); color: #ece4d2; gap: 0.55rem; }
.kgm .kgm-f h2 { font-size: 1.45rem; margin: 0; color: #efe6d0; }
.kgm .kgm-line { margin: 0; color: #cfc6b2; }
.kgm .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kgm .kgm-row .btn { min-height: 3rem; }
.kgm .tick { color: #d8cfba; }
.kgm .fine a, .kgm .tick a { color: #f0c25a; }
.kgm .out:empty { display: none; }
.guide .kgm .kgm-f, .game-page .kgm .kgm-f { max-width: none; }

/* F8: /party-pack-01/ */
.kgp-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.4rem 0; }
.kgp-buy { display: grid; gap: 1.2rem 2rem; align-items: center; margin: 0.6rem 0 clamp(1.5rem, 4vw, 2.5rem); padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid #4b5254; border-radius: 0.8rem; background: linear-gradient(160deg, rgba(43, 49, 51, 0.9), rgba(18, 21, 22, 0.95)); }
.kgp-buy h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0; color: #efe6d0; }
.kgp-buy p { margin: 0; }
.kgp-poster { width: 100%; max-width: 15rem; height: auto; border-radius: 0.6rem; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5); justify-self: center; }
.kgp-now { padding: 0.55rem 0.8rem; border-radius: 0.5rem; border: 1px solid #3f7a52; background: #1d3424; color: #e9f5ec; }
.kgp-now b { color: #bff0cc; }
.kgp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.5rem; }
.kgp-price .pl-now { font-family: var(--display); font-weight: 900; font-size: 2.2rem; line-height: 1; color: #f0c25a; }
.kgp-cur, .kgp-buy .small { font-size: 0.86rem; }
.kgp-buy a:not(.btn) { color: #f0c25a; }
@media (min-width: 760px) { .kgp-buy { grid-template-columns: 15rem 1fr; } }
@media (max-width: 759px) { .kgp-poster { max-width: 8.5rem; } }