/* public/_kf/pages.css · Game info pages, the all-games hubs and the 404 page (scripts/gamepages.mjs). Loaded after
   /styles.css only on those pages, so the home page does not carry these rules (KFU-121). */
.gpage { padding-block: clamp(28px, 5vw, 64px) clamp(64px, 8vw, 120px); max-width: 760px; }
.crumbs { color: var(--muted); font-weight: 700; margin: 0 0 24px; }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.gpage h1 { font: 800 clamp(40px, 7vw, 72px)/1 var(--display); letter-spacing: -.02em; margin: 0 0 16px; }
.gpage__lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); margin: 0 0 28px; }
.gpage__note { margin: 0; color: var(--sun); font-weight: 700; }
/* The play button sits right under the lead: inside the first screen on phones (CANLI-107). */
.gpage__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 20px; }
.gpage__chips { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.gpage__chips li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-weight: 700; font-size: 14px; }
/* Konfeti's own age guidance (rank.js AGE): first chip, links to the help answer that explains it. */
.gpage__chips li.gpage__age { padding: 0; border-radius: 16px; border-color: rgba(255,194,51,.5); }
.gpage__age a { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; text-decoration: underline; text-underline-offset: 3px; }
.gpage__shots { display: flex; gap: 16px; align-items: flex-start; overflow-x: auto; margin: 0 0 28px; padding-bottom: 6px; scroll-snap-type: x proximity; }
.gpage__shots img { flex: none; scroll-snap-align: start; }
.gpage__again { margin: 40px 0 0; }
.gpage__shot { width: min(280px, 62vw); height: auto; border-radius: 28px; box-shadow: 0 24px 50px -20px rgba(0,0,0,.7); }
.gpage__shot--wide { width: min(560px, 84vw); border-radius: 16px; }
.gpage__facts { display: grid; gap: 12px; margin: 0 0 28px; }
.gpage__facts div { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.03); }
.gpage__facts dt { font-weight: 800; color: var(--sun); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.gpage__facts dd { margin: 6px 0 0; }
.gpage h2 { font: 800 clamp(24px, 3vw, 32px)/1.15 var(--display); letter-spacing: -.015em; margin: 40px 0 12px; }
.gpage__more { list-style: none; padding-left: 0; display: grid; gap: 0; }
.gpage__foot a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.gpage__more a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.gpage__more img { border-radius: 10px; margin-right: 12px; flex: none; }
.gpage__kicker { margin: 0 0 10px; color: var(--sun); font-weight: 800; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; overflow-wrap: anywhere; }
.gpage p { overflow-wrap: anywhere; }
.gpage h3 { font: 800 clamp(18px, 2vw, 21px)/1.3 var(--display); margin: 22px 0 6px; overflow-wrap: anywhere; }
.gpage__steps, .gpage__list { padding-left: 22px; margin: 0 0 8px; display: grid; gap: 8px; }
.gpage__steps li::marker { color: var(--sun); font-weight: 800; }
.gpage__list li::marker { color: var(--coral); }
.gpage__faq p { margin: 0; color: var(--muted); }
.hub { max-width: 980px; }
.hub__jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.hub__jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); font-weight: 700; }
.hub__cat { scroll-margin-top: 88px; }
.hub__catlead { color: var(--muted); margin: 0 0 16px; }
.hub__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.hub__item { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.03); min-width: 0; }
.hub__item img { border-radius: 14px; flex: none; }
.hub__item div { min-width: 0; }
.hub__item h3 { margin: 0 0 4px; }
.hub__item h3 a { text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; }
.hub__item p { color: var(--muted); margin: 0 0 8px; font-size: 15px; }
.hub__play { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--coral); color: #16121A; font-weight: 800; }


/* 404 (CANLI-113): one language, the bar, curated games and the way home. */
.nf { max-width: 720px; padding-block: clamp(32px, 8vw, 96px); text-align: center; }
.nf h1 { font: 800 clamp(64px, 16vw, 120px)/.9 var(--display); letter-spacing: -.05em; margin: 0 0 12px; }
.nf h1 span { color: var(--coral); }
.nf__lead { color: var(--muted); margin: 0 0 24px; }
.nf__list { list-style: none; padding: 0; margin: 0 auto 28px; max-width: 520px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.nf__go { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; }