/* Sausage Studios, site v4 (October 2026). Bright and playful, short, original art.
   Type: Urbanist (Quizmo's face) and, only where Anagrow speaks, Fraunces 72pt Bold; both the apps' own files under the
   SIL Open Font License (/fonts), subset to what the site uses by dev/build_fonts.py.
   Colour: cream base; each section keeps to its own accent (studio cream and purple, Quizmo sky, Anagrow gold and green).
   The homepage is light only (<html class="light-only">): its art is drawn for cream skies. Support, privacy and 404 keep
   a warm plum dark mode.
   Shape rule: cards 24px, tiles and inputs 14px, buttons, chips and pills fully round, app icons 22.4%.
   z-index scale: decor 0, content 1, masthead 20, skip link 30. */

@font-face{ font-family:"Urbanist"; src:url("/fonts/urbanist-sub.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face{ font-family:"Fraunces 72pt"; src:url("/fonts/fraunces72-sub.woff2") format("woff2"); font-weight:700; font-display:swap; }

:root{
  --bg:#FFF8E8; --surface:#FFFDF6; --surface-2:#FBF1D9;
  --ink:#0F2A1B; --ink-soft:#46574B; --rule:rgba(15,42,27,.13);
  --head:#0C5A2E; --brand:#04301C;
  --sky:#3EA7EC;  --sky-soft:#DDF1FD;  --sky-ink:#0A4F80;
  --leaf:#3C9A4E; --leaf-soft:#E3F4DE; --leaf-ink:#1F5E2C;
  --gold:#FFC233; --gold-soft:#FFF0C4; --gold-ink:#6E4A00;
  --plum:#8C6CF0; --plum-soft:#EEE8FF; --plum-ink:#4B2FA8;
  --btn:#0C5A2E; --btn-ink:#FFFBEF; --focus:#0A4F80;
  --shadow:0 2px 0 rgba(15,42,27,.06), 0 20px 40px -26px rgba(12,90,46,.45);
  --shadow-pop:0 3px 0 rgba(15,42,27,.07), 0 24px 46px -24px rgba(10,79,128,.42);
  --r-card:24px; --r-tile:14px;
  --wrap:min(1180px, 100% - 2rem);
  --sans:"Urbanist", ui-rounded, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --anagrow:"Fraunces 72pt", Georgia, "Times New Roman", serif;
  color-scheme:light dark;
}
:root.light-only{ color-scheme:light; }
@media (prefers-color-scheme: dark){
  :root:not(.light-only){
    --bg:#241A2E; --surface:#2E2239; --surface-2:#382A45;
    --ink:#FFF3DC; --ink-soft:#D5C9D6; --rule:rgba(255,243,220,.14);
    --head:#FFD45C; --brand:#FFF3DC;
    --sky:#62BDF5;  --sky-soft:#1C3354;  --sky-ink:#A9DBFF;
    --leaf:#62C374; --leaf-soft:#22382A; --leaf-ink:#A6E3AE;
    --gold:#FFC94D; --gold-soft:#3D3020; --gold-ink:#FFD98A;
    --plum:#A991FF; --plum-soft:#352A55; --plum-ink:#D6CBFF;
    --btn:#FFC94D; --btn-ink:#2A1B05; --focus:#FFD45C;
    --shadow:0 2px 0 rgba(0,0,0,.25), 0 20px 40px -24px rgba(0,0,0,.7);
    --shadow-pop:0 3px 0 rgba(0,0,0,.3), 0 24px 46px -22px rgba(0,0,0,.75);
  }
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-weight:500;
  font-size:clamp(1.02rem, .98rem + .2vw, 1.1rem); line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;
}
h1,h2,h3{ margin:0; line-height:1.05; letter-spacing:-.025em; font-weight:900; text-wrap:balance; }
p{ margin:0 0 1rem; text-wrap:pretty; } p:last-child{ margin-bottom:0; }
a{ color:inherit; text-underline-offset:.2em; }
img,svg{ max-width:100%; height:auto; display:block; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; border-radius:8px; }
.wrap{ width:var(--wrap); margin-inline:auto; position:relative; z-index:1; }
.skip{ position:absolute; left:-9999px; top:0; z-index:30; background:var(--btn); color:var(--btn-ink); padding:.7rem 1.1rem; border-radius:0 0 var(--r-tile) 0; font-weight:800; text-decoration:none; }
.skip:focus{ left:0; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.nowrap{ white-space:nowrap; }

/* ---------- masthead: a type lockup that reads at any size, and a nav that fits on a phone ---------- */
.masthead{
  position:sticky; top:0; z-index:20; border-bottom:1px solid var(--rule);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(150%) blur(12px); -webkit-backdrop-filter:saturate(150%) blur(12px);
}
.masthead .wrap{ display:flex; align-items:center; gap:.75rem; min-height:64px; }
.lockup{ display:inline-flex; flex-direction:column; text-decoration:none; color:var(--brand); line-height:1; margin-right:auto; }
.lockup .l1{ font-weight:900; font-size:1.42rem; letter-spacing:-.03em; }
.lockup .l2{ font-weight:800; font-size:.72rem; letter-spacing:.34em; margin-top:.18rem; color:var(--head); padding-left:.06em; }
.nav{ display:flex; align-items:center; gap:.15rem; font-weight:700; font-size:.98rem; }
.nav a{ text-decoration:none; color:var(--ink); padding:.5rem .75rem; border-radius:999px; white-space:nowrap; }
.nav a:hover{ background:var(--surface-2); }
.nav a.help{ background:var(--gold-soft); color:var(--gold-ink); }
.nav a.help:hover{ background:color-mix(in srgb, var(--gold) 40%, var(--gold-soft)); }
.nav a[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:3px; text-decoration-color:var(--gold); }
@media (max-width:720px){
  .nav .wide{ display:none; }
  .nav{ font-size:.95rem; } .nav a{ padding:.5rem .6rem; }
  .lockup .l1{ font-size:1.3rem; }
}
/* Below 375px the header's links and lockup need a little less room, or the page scrolls sideways at 320. */
@media (max-width:374px){ .nav{ font-size:.9rem; gap:0; } .nav a{ padding:.45rem .42rem; } }

/* ---------- buttons, store badges, QR ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:48px; padding:0 1.25rem;
  border:0; border-radius:999px; background:var(--btn); color:var(--btn-ink); font:inherit; font-weight:800;
  text-decoration:none; cursor:pointer; white-space:nowrap; box-shadow:0 4px 0 color-mix(in srgb, var(--btn) 55%, #000);
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(2px); box-shadow:0 2px 0 color-mix(in srgb, var(--btn) 55%, #000); }
.btn.ghost{ background:var(--surface); color:var(--ink); box-shadow:0 4px 0 var(--rule), inset 0 0 0 2px var(--rule); }
/* Apple: the official badge, unmodified, at least 40px tall, clear space of a quarter of its height on every side. */
.store{ display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.badge{ display:inline-block; line-height:0; padding:12px; margin:-12px; border-radius:16px; }
.badge img{ height:48px; width:auto; }
.qr{ display:none; align-items:center; gap:.7rem; color:var(--ink); font-size:.86rem; font-weight:700; line-height:1.25;
  padding:.35rem .9rem .35rem .35rem; border-radius:16px; background:var(--surface); box-shadow:var(--shadow); }
.qr svg{ width:76px; height:76px; border-radius:10px; background:#fff; padding:5px; }
@media (min-width:900px) and (hover:hover){ .qr{ display:flex; } }
.soon{ display:inline-flex; align-items:center; min-height:48px; padding:0 1.2rem; border-radius:999px; border:2px dashed currentColor; font-weight:800; }
html[data-quizmo-ios="soon"] .qz-ios-live, html[data-quizmo-ios="live"] .qz-ios-soon, html[data-quizmo-android="off"] .qz-android{ display:none !important; }

/* ---------- footer ---------- */
.foot{ padding:2.25rem 0 2.75rem; font-size:.92rem; color:var(--ink-soft); border-top:1px solid var(--rule); }
.foot .row{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; }
.foot .lockup{ margin-right:0; } .foot .lockup .l1{ font-size:1.2rem; } .foot .lockup .l2{ font-size:.66rem; }
.foot nav{ display:flex; gap:1.25rem; flex-wrap:wrap; }
.foot a{ color:var(--ink); text-decoration:none; font-weight:700; }
.foot a:hover{ text-decoration:underline; }
.foot .copy{ margin-left:auto; }
.foot .tm{ margin:1rem 0 0; font-size:.8rem; line-height:1.45; max-width:70ch; }
@media (max-width:640px){ .foot .copy{ margin-left:0; width:100%; } }

/* ---------- document pages (support, privacy, 404): calm and readable ---------- */
.doc main{ padding:clamp(2.25rem, 6vw, 4.25rem) 0 clamp(3rem, 7vw, 5rem); }
.doc .wrap.narrow{ width:min(780px, 100% - 2rem); }
.doc h1{ font-size:clamp(2.3rem, 6vw, 3.5rem); color:var(--head); margin-bottom:1rem; }
.doc h2{ font-size:clamp(1.45rem, 3vw, 1.9rem); margin:3rem 0 .9rem; scroll-margin-top:90px; color:var(--head); }
.doc h3{ font-size:1.16rem; margin:2rem 0 .5rem; font-weight:800; scroll-margin-top:90px; }
.doc h4{ font-size:1.02rem; margin:1.4rem 0 .4rem; font-weight:800; }
.doc ul, .doc ol{ margin:0 0 1rem; padding-left:1.3rem; } .doc li{ margin-bottom:.45rem; }
.doc .updated{ color:var(--ink-soft); margin-bottom:2rem; font-size:1.06rem; }
.doc main a{ color:var(--ink); text-decoration-color:var(--sky); text-decoration-thickness:2px; }
.doc .card{ background:var(--surface); border-radius:var(--r-card); padding:1.3rem 1.5rem; margin:0 0 1.1rem; box-shadow:var(--shadow); }
.doc .jump{ display:flex; flex-wrap:wrap; gap:.75rem; margin:0 0 2.5rem; padding:0; list-style:none; }
.doc .jump a{ display:flex; align-items:center; gap:.7rem; padding:.55rem 1.1rem .55rem .55rem; border-radius:999px; text-decoration:none; font-weight:800; box-shadow:var(--shadow); }
.doc .jump a.qz{ background:var(--sky-soft); } .doc .jump a.ag{ background:var(--gold-soft); }
.doc .jump img{ width:40px; height:40px; border-radius:22.4%; }
.doc .game-head{ display:flex; align-items:center; gap:1rem; margin:3.25rem 0 .75rem; padding:1rem 1.25rem; border-radius:var(--r-card); scroll-margin-top:84px; }
.doc .game-head.qz{ background:var(--sky-soft); } .doc .game-head.ag{ background:var(--gold-soft); }
.doc .game-head img{ width:60px; height:60px; border-radius:22.4%; flex:none; box-shadow:var(--shadow); }
.doc .game-head h2{ margin:0; }
.doc .anagrow-name{ font-family:var(--anagrow); font-weight:700; letter-spacing:-.01em; }
.doc table{ width:100%; border-collapse:collapse; margin:0 0 1.2rem; font-size:.97rem; }
.doc th, .doc td{ text-align:left; vertical-align:top; padding:.7rem .75rem .7rem 0; }
.doc thead th{ border-bottom:2px solid var(--rule); font-weight:800; }
.doc tbody tr + tr td, .doc tbody tr + tr th{ border-top:1px solid var(--rule); }
.doc tbody th{ font-weight:800; width:28%; }
@media (max-width:640px){
  .doc table, .doc tbody, .doc tr, .doc th, .doc td{ display:block; width:100%; }
  .doc thead{ display:none; }
  .doc tbody tr{ padding:.75rem 0; border-top:1px solid var(--rule); }
  .doc tbody tr + tr td, .doc tbody tr + tr th{ border-top:0; }
  .doc th, .doc td{ padding:.2rem 0; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}