/* Support, privacy and 404 (site v5): the homepage's look, calmer. Loaded after site.css; the homepage doesn't use it.
   Light only, like the homepage (<html class="light-only">). Reading width about 68 characters, generous line height,
   a clear heading scale, and small reuses of the homepage's generated props as accents. */

.doc{ --measure:68ch; --head-h:72px; }
.doc main{ padding:clamp(1.75rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem); }
.doc main p, .doc main li{ line-height:1.72; }
.doc main p, .doc main ul, .doc main ol, .doc main table{ max-width:var(--measure); }
.doc .nav a[aria-current="page"]{ text-underline-offset:.3em; }
/* No lonely last words in headings, questions or contents entries. */
.doc h1, .doc h2, .doc h3, .doc h4, .faq summary, .toc a, .game-links a{ text-wrap:balance; }
.doc main p, .doc main li{ text-wrap:pretty; }
.doc main [id]{ scroll-margin-top:calc(var(--head-h) + 1.25rem); }
.doc main a{ color:var(--sky-ink); text-decoration-color:color-mix(in srgb, var(--sky) 70%, transparent); text-decoration-thickness:2px; }
.doc main a:hover{ text-decoration-color:var(--sky-ink); }

/* Heading scale: one h1, a strong h2 per part, quieter h3 and h4. */
.doc h1{ font-size:clamp(2.3rem, 6vw, 3.4rem); color:var(--head); margin:0 0 .75rem; }
.doc h2{ font-size:clamp(1.5rem, 3.2vw, 2rem); color:var(--head); margin:3rem 0 .9rem; }
.doc h3{ font-size:clamp(1.15rem, 2vw, 1.3rem); color:var(--ink); margin:2.25rem 0 .55rem; font-weight:800; letter-spacing:-.015em; }
.doc h4{ font-size:1.06rem; color:var(--ink); margin:1.6rem 0 .45rem; font-weight:800; }

/* Page head: title, intro, and a small pair of the homepage's props. */
.page-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:1rem 2rem; align-items:center; margin-bottom:1.75rem; }
.page-head .intro{ font-size:clamp(1.05rem, 1rem + .3vw, 1.2rem); color:var(--ink-soft); margin:0; max-width:52ch; }
.page-head .art{ display:flex; align-items:flex-end; gap:.25rem; }
.page-head .art img{ width:clamp(64px, 11vw, 104px); height:auto; }
.page-head .art img + img{ margin-bottom:.5rem; }
@media (max-width:520px){ .page-head{ grid-template-columns:1fr; } .page-head .art{ display:none; } }
.updated{ color:var(--ink-soft); }
.doc .page-head .updated{ margin:0; }
.page-head .news{ margin:.85rem 0 0; max-width:60ch; color:var(--ink); }
.updated .date{ display:inline-block; margin-top:.4rem; padding:.3rem .8rem; border-radius:999px; background:var(--gold-soft); color:var(--gold-ink); font-weight:800; }

/* Quick links: one chip per game, and the email card. */
.quick{ display:grid; grid-template-columns:minmax(0,1fr); gap:.9rem; margin:0 0 2.5rem; }
@media (min-width:700px){ .quick{ grid-template-columns:auto minmax(0,1fr); align-items:stretch; } }
.doc .game-links{ display:flex; flex-wrap:wrap; gap:.6rem; margin:0; padding:0; list-style:none; align-content:center; }
.doc .game-links li{ margin:0; }
.game-links a{ display:flex; align-items:center; gap:.55rem; min-height:56px; padding:.35rem 1.1rem .35rem .45rem; border-radius:999px; text-decoration:none; color:var(--ink); font-weight:800; box-shadow:var(--shadow); }
.game-links a.qz{ background:var(--sky-soft); } .game-links a.ag{ background:var(--gold-soft); }
.game-links a:hover{ transform:translateY(-1px); }
.game-links img{ width:44px; height:44px; object-fit:contain; }
.game-links .anagrow-name{ font-family:var(--anagrow); font-weight:700; }
.mail-card{ display:flex; flex-direction:column; justify-content:center; gap:.15rem; padding:.9rem 1.25rem; border-radius:var(--r-card); background:var(--plum-soft); color:var(--ink); text-decoration:none; box-shadow:var(--shadow); }
.mail-card b{ font-size:1.1rem; font-weight:900; color:var(--plum-ink); }
.mail-card span{ font-weight:800; color:var(--plum-ink); text-decoration:underline; text-decoration-thickness:2px; text-decoration-color:var(--plum); overflow-wrap:anywhere; }
.doc main a.mail-card{ color:var(--ink); text-decoration:none; }
.mail-card:hover span{ text-decoration-color:var(--plum-ink); }

/* Game heads: icon (the dog appears once, on Quizmo's), name, and the game's prop. */
.doc .game-head{ position:relative; display:flex; align-items:center; gap:1rem; margin:3rem 0 .75rem; padding:.9rem 1.15rem; border-radius:var(--r-card); }
.doc .game-head.qz{ background:var(--sky-soft); } .doc .game-head.ag{ background:var(--gold-soft); }
.doc .game-head > img{ width:56px; height:56px; border-radius:22.4%; flex:none; box-shadow:var(--shadow); }
.doc .game-head h2{ margin:0; }
.doc .game-head .prop{ display:block; flex:none; margin-left:auto; width:clamp(56px, 10vw, 78px); }
.doc .game-head .prop img{ display:block; width:100%; height:auto; border-radius:0; box-shadow:none; }
.doc .anagrow-name{ font-family:var(--anagrow); font-weight:700; letter-spacing:-.01em; }

/* FAQ: native details/summary, each one linkable. */
.faq{ display:grid; gap:.6rem; margin:1.25rem 0 0; max-width:calc(var(--measure) + 2.5rem); }
.faq details{ border-radius:var(--r-tile); background:var(--surface); box-shadow:0 0 0 1px var(--rule); }
.faq details[open]{ box-shadow:0 0 0 2px color-mix(in srgb, var(--sky) 45%, transparent), var(--shadow); }
.faq summary{ display:flex; align-items:center; gap:.8rem; justify-content:space-between; min-height:52px; padding:.75rem 1rem .75rem 1.1rem; cursor:pointer; font-weight:800; font-size:1.05rem; line-height:1.35; border-radius:var(--r-tile); list-style:none; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; flex:none; width:28px; height:28px; border-radius:50%; background:var(--gold-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E4A00' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  transition:transform .2s cubic-bezier(.16,1,.3,1); }
.faq details[open] > summary::after{ transform:rotate(45deg); }
.faq summary:hover{ background:color-mix(in srgb, var(--gold-soft) 45%, transparent); }
.faq .answer{ padding:0 1.1rem 1rem; }
.faq .answer p{ margin:0; }
.howto{ margin-top:1.5rem; }
.howto h3{ margin-top:0; }

/* Cards */
.doc .card{ background:var(--surface); border-radius:var(--r-card); padding:1.3rem 1.5rem; margin:0 0 1.1rem; box-shadow:var(--shadow); max-width:calc(var(--measure) + 3rem); }
.doc .card.contact-card{ background:var(--plum-soft); }

/* Tables stack on phones (site.css); its 28% name column outranks that, so let the name run full width. */
@media (max-width:640px){ .doc tbody th{ width:auto; padding-top:.1rem; } }

/* Privacy: a contents list, sticky beside the text on wide screens. */
.policy{ display:grid; grid-template-columns:minmax(0,1fr); gap:2rem; }
.policy-body > h2:first-child{ margin-top:.4rem; }
.toc{ align-self:start; border-radius:var(--r-card); background:var(--surface); box-shadow:var(--shadow); padding:.3rem 1.1rem .75rem; font-size:.9rem; }
.toc summary{ cursor:pointer; font-weight:900; font-size:1.05rem; padding:.5rem 0; min-height:44px; box-sizing:border-box; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.toc summary::-webkit-details-marker{ display:none; }
.toc summary::after{ content:"\25BE"; font-size:.9em; color:var(--ink-soft); }
.toc details[open] > summary::after{ transform:rotate(180deg); }
.toc ol{ list-style:none; margin:0; padding:0; }
.toc li{ margin:0; line-height:1.35; }
.toc a{ display:block; padding:.22rem 0; color:var(--ink); text-decoration:none; font-weight:600; }
.toc a:hover{ color:var(--sky-ink); text-decoration:underline; }
.toc .game{ margin:.4rem 0 .1rem; }
.toc .game > a{ display:flex; align-items:center; gap:.45rem; font-weight:900; }
.toc .game img{ width:26px; height:26px; object-fit:contain; }
.toc .game ol{ padding-left:2rem; border-left:0; }
.toc .game ol a{ font-size:.95em; color:var(--ink-soft); font-weight:600; padding:.16rem 0; }
@media (min-width:1100px){ .policy{ grid-template-columns:330px minmax(0, 1fr); gap:3rem; } }
/* Sticky only when the whole list fits below the header: the page's script measures it and adds .stick (the list's
   length depends on the Anagrow version and the fonts). Without the script, or in a short window, it stays in place. */
@media (min-width:1100px){ .policy.stick .toc{ position:sticky; top:calc(var(--head-h) + 1rem); } }

/* 404 */
.lost{ text-align:left; }
.lost .dog{ width:min(420px, 92%); height:auto; margin:1.25rem 0 0; }
.lost .game-links{ margin-top:1.4rem; }

@media (prefers-reduced-motion: reduce){ .faq summary::after{ transition:none; } }

/* Anaverse (19 October 2026): its colours (from its icon: the blue, its deep navy, the orange-gold swoosh), its game
   head and link, and its store switch: data-anaverse-ios on <html> (dev/build_site.py ANAVERSE_IOS), "soon" or "live". */
.doc{ --av:#2F6BFF; --av-soft:#E2EAFF; --av-ink:#0B2A8A; --av-flare:#FF8A1E; }
.doc .game-head.av{ background:var(--av-soft); }
.doc .game-head.av h2{ color:var(--av-ink); }
.game-links a.av{ background:var(--av-soft); }
html[data-anaverse-ios="soon"] .av-ios-live, html[data-anaverse-ios="live"] .av-ios-soon{ display:none !important; }