/* Self-hosted fonts (SIL Open Font License 1.1, see fonts/OFL.txt). Latin subset only. */
@font-face{font-family:"Grandstander";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/grandstander-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Grandstander";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/grandstander-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lexend";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/lexend-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lexend";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/lexend-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lexend";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/lexend-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Base */
html{color-scheme:light;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;padding:0}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Layout: one-screen app for a phone propped by the sink. Game switch under the header, a canvas stage (rainbow arc or bug-covered mouth), instruction, one big button. A full-screen collection panel slides over it after each brush. */
:root{
  --bg:#EEF2F8; --surface:#FFFFFF; --ink:#1F2547; --muted:#5E6589;
  --track:#DCE2EE; --line:#BFC7DA; --tooth:#FFFFFF;
  --mouth:#F8D2DA; --lip:#DD7489;
  --glow:#FFC93C; --glow-edge:#D9A21A; --done:#4FAE80; --on-done:#FFFFFF;
  --cloud:#FFFFFF; --cloud-edge:#CCD4E6;
  --frost:rgba(238,242,248,.62); --frost-line:rgba(255,255,255,.9);
  --eye:#FFFFFF; --pupil:#1F2547;
  --r1:#EF5F5F; --r2:#F5913F; --r3:#F5C63C; --r4:#5BBA7C; --r5:#44A0DC; --r6:#6670D6; --r7:#A070D2;
  --display:"Grandstander","Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --body:"Lexend","Segoe UI",system-ui,sans-serif;
  --emoji:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#171B36; --surface:#232852; --ink:#F3F1FF; --muted:#A9AED2;
    --track:#2B3163; --line:#434B85; --tooth:#ECEFFF;
    --mouth:#5A2F50; --lip:#C9688A;
    --glow:#FFD04F; --glow-edge:#E5AE22; --done:#5CC28F; --on-done:#14301F;
    --cloud:#E9ECFF; --cloud-edge:#3A4180;
    --frost:rgba(35,40,82,.66); --frost-line:rgba(160,170,230,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#171B36; --surface:#232852; --ink:#F3F1FF; --muted:#A9AED2;
  --track:#2B3163; --line:#434B85; --tooth:#ECEFFF;
  --mouth:#5A2F50; --lip:#C9688A;
  --glow:#FFD04F; --glow-edge:#E5AE22; --done:#5CC28F; --on-done:#14301F;
  --cloud:#E9ECFF; --cloud-edge:#3A4180;
  --frost:rgba(35,40,82,.66); --frost-line:rgba(160,170,230,.35);
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45}
body.locked{overflow:hidden}
*{box-sizing:border-box}
button{font:inherit;color:inherit}
a{color:var(--r6)}

.app{
  min-height:100vh;min-height:100svh;max-width:620px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;
  padding-top:calc(14px + env(safe-area-inset-top, 0px));
  padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.top{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px 12px;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:800;font-size:1.45rem;margin:0;letter-spacing:.01em}
.col-btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:999px;
  padding:6px 14px 6px 10px;font-size:.9rem;font-weight:500;font-variant-numeric:tabular-nums;
}
.e{font-family:var(--emoji);line-height:1}
.col-btn .e{font-size:1.15rem}
.col-btn:focus-visible{outline:3px solid var(--r5);outline-offset:2px}

.modes{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line)}
.mode{position:relative;cursor:pointer}
.mode input{position:absolute;opacity:0;width:1px;height:1px}
.mode > span{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;font-weight:600;font-size:.95rem;color:var(--muted);user-select:none}
.mode .e{font-size:1.1rem}
.mode input:checked + span{background:var(--ink);color:var(--bg)}
.mode input:focus-visible + span{outline:3px solid var(--r5);outline-offset:2px}
.mode input:disabled + span{cursor:default}
.modes.locked .mode input:not(:checked) + span{opacity:.45}

.stage{position:relative;width:100%;max-width:560px;aspect-ratio:2 / 1.08}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.clock{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;pointer-events:none}
.clock-time{font-family:var(--display);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.clock-sub{color:var(--muted);font-size:.85rem;margin-top:2px;min-height:1.2em}
.mode-bugs .clock{justify-content:center}
.mode-bugs .clock-sub{display:none}

.now{width:100%;display:flex;align-items:center;justify-content:center;gap:18px 24px;flex-wrap:wrap}
.now figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:2px}
.mode-bugs .now figure{display:none}
.mode-bugs .words{align-items:center;text-align:center;max-width:340px}
.now svg{width:clamp(150px,40vw,200px);height:auto;display:block;overflow:visible}
.now figcaption{color:var(--muted);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
.words{min-width:0;max-width:260px;display:flex;flex-direction:column;gap:2px}
.eyebrow{color:var(--muted);font-weight:500;font-size:.95rem}
.big{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,7vw,2.4rem);line-height:1.05;margin:0;text-wrap:balance}
.hint{color:var(--muted);font-size:.95rem;min-height:1.45em;font-variant-numeric:tabular-nums}

.mouth-shell{fill:var(--mouth);stroke:var(--lip);stroke-width:4}
.midline{stroke:var(--lip);stroke-width:2;stroke-dasharray:3 5;opacity:.55}
.tooth{fill:var(--tooth);stroke:var(--line);stroke-width:1.5;transition:fill .35s,stroke .35s}
.zone.current .tooth{fill:var(--glow);stroke:var(--glow-edge)}
.zone.current{animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{50%{opacity:.62}}
.badge{opacity:0;transition:opacity .3s}
.zone.done .badge{opacity:1}
.badge-dot{fill:var(--done)}
.badge-tick{fill:none;stroke:var(--on-done);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

.controls{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.main-btn,.go-btn{
  font-family:var(--display);font-weight:800;font-size:1.5rem;
  border:0;border-radius:999px;padding:14px 44px;min-width:210px;cursor:pointer;
  transition:transform .08s, box-shadow .08s;
}
.main-btn{background:var(--ink);color:var(--bg);box-shadow:0 4px 0 color-mix(in srgb, var(--ink) 55%, var(--bg))}
.main-btn:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb, var(--ink) 55%, var(--bg))}
.ghost-btn{background:none;border:0;color:var(--muted);font-size:.95rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 8px}
.main-btn:focus-visible,.ghost-btn:focus-visible,.go-btn:focus-visible,.close-btn:focus-visible{outline:3px solid var(--r5);outline-offset:3px}

.toggles{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.pill{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:999px;padding:6px 13px;font-size:.85rem;color:var(--muted);user-select:none}
.pill::before{content:"";width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;box-sizing:border-box}
.chip input:checked + .pill{background:var(--surface);color:var(--ink);border-color:var(--ink)}
.chip input:checked + .pill::before{background:var(--r4);border-color:var(--r4)}
.chip input:focus-visible + .pill{outline:3px solid var(--r5);outline-offset:2px}

/* ---------- collection panel ---------- */
.panel{
  position:fixed;inset:0;z-index:20;background:var(--bg);overflow-y:auto;
  padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px);
  animation:rise .35s ease-out;
}
@keyframes rise{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.panel-inner{
  max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:18px;
  padding-block:14px 28px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.panel-head h2{font-family:var(--display);font-weight:800;font-size:1.6rem;margin:0;line-height:1.1}
.panel-head .sub{color:var(--muted);font-size:.9rem;font-variant-numeric:tabular-nums}
.close-btn{background:var(--surface);border:1.5px solid var(--line);border-radius:999px;padding:7px 16px;cursor:pointer;font-size:.9rem;font-weight:500}
.test-tag{display:inline-block;margin-top:4px;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--r6)}

.go-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:var(--surface);border-radius:24px;padding:18px 16px 16px;border:1.5px solid var(--line)}
.go-btn{background:var(--glow);color:#2A2140;box-shadow:0 4px 0 var(--glow-edge);font-size:1.8rem;min-width:180px}
.go-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--glow-edge)}
.go-btn:disabled{background:var(--track);color:var(--muted);box-shadow:none;cursor:default}
.go-msg{color:var(--muted);font-size:.95rem;min-height:1.45em;max-width:46ch}
.go-msg strong{color:var(--ink);font-weight:600}

.set{display:flex;flex-direction:column;gap:10px}
.set.fresh{animation:drop .6s ease-out}
@keyframes drop{from{transform:translateY(-14px);opacity:.3}to{transform:none;opacity:1}}
.set-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.set-head h3{font-family:var(--display);font-weight:800;font-size:1.15rem;margin:0}
.set-head span{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (min-width:560px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.tile-box{
  position:relative;width:100%;aspect-ratio:1;border-radius:18px;overflow:hidden;
  background:var(--surface);border:1.5px solid var(--line);
  display:grid;place-items:center;transition:transform .12s, border-color .12s, box-shadow .12s;
}
.glyph{position:relative;z-index:1;font-family:var(--emoji);font-size:clamp(2.1rem,10vw,2.7rem);line-height:1;transition:filter .5s, opacity .5s}
.tile:not(.found) .glyph{filter:blur(6px) saturate(.35);opacity:.6}
.tile:not(.found) .tile-box::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(circle at 26% 30%, var(--frost-line) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 64%, var(--frost-line) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 62% 22%, var(--frost-line) 0 1px, transparent 2px),
    linear-gradient(150deg, var(--frost), color-mix(in srgb, var(--frost) 60%, transparent));
}
.tile.spin .tile-box{border-color:var(--glow-edge);box-shadow:0 0 0 3px var(--glow);transform:scale(1.06)}
.tile.found .tile-box{border-color:color-mix(in srgb, var(--done) 55%, var(--line))}
.tile.pop .tile-box{animation:pop .6s ease-out}
@keyframes pop{0%{transform:scale(.7)}55%{transform:scale(1.15)}100%{transform:scale(1)}}
.tile-name{font-size:.78rem;color:var(--muted);text-align:center;line-height:1.2;min-height:2.4em;overflow-wrap:anywhere}
.tile.found .tile-name{color:var(--ink);font-weight:500}

/* sparkle prizes: 1 in every 7 */
@property --spin{syntax:'<angle>';inherits:false;initial-value:0deg}
.tile.special .tile-box{
  border:2.5px solid transparent;
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    conic-gradient(from var(--spin), var(--r1),var(--r2),var(--r3),var(--r4),var(--r5),var(--r6),var(--r7),var(--r1)) border-box;
  animation:holo 5s linear infinite;
}
@keyframes holo{to{--spin:360deg}}
.spark{position:absolute;z-index:3;top:5px;right:7px;font-size:1rem;line-height:1;color:var(--glow-edge);animation:twinkle 1.6s ease-in-out infinite}
.spark.two{top:auto;right:auto;bottom:6px;left:8px;font-size:.75rem;animation-delay:.8s;display:none}
.tile.special.found .spark.two{display:block}
@keyframes twinkle{50%{transform:scale(.6) rotate(20deg);opacity:.55}}
.tile.special.found .tile-box::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(circle at 18% 72%, var(--r3) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 80% 30%, var(--r5) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 30% 20%, var(--r7) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 74% 82%, var(--r1) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 52% 10%, var(--glow) 0 1.2px, transparent 2px),
    linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--glow) 22%, transparent) 50%, transparent 70%);
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,250% 100%;
  animation:glitter 3s ease-in-out infinite;
}
@keyframes glitter{0%{background-position:0 0,0 0,0 0,0 0,0 0,100% 0;opacity:.7}50%{opacity:1}100%{background-position:0 0,0 0,0 0,0 0,0 0,-150% 0;opacity:.7}}
.tile.special.found .glyph{filter:drop-shadow(0 0 6px var(--glow))}
.tile.special:not(.found) .tile-name{color:var(--glow-edge);font-weight:600}

.banner{text-align:center;font-family:var(--display);font-weight:800;font-size:1.25rem;background:var(--surface);border-radius:16px;padding:10px 14px;border:1.5px dashed var(--r4)}
.privacy{color:var(--muted);font-size:.85rem;border-top:1.5px solid var(--line);padding-top:14px;max-width:62ch}
.privacy p{margin:0 0 6px}
.privacy summary{cursor:pointer;color:var(--ink);font-weight:500}
.privacy details p{margin-top:8px}

@media (prefers-reduced-motion: reduce){
  .zone.current,.spark,.tile.special .tile-box,.tile.special.found .tile-box::before{animation:none}
  .tooth,.badge,.glyph{transition:none}
  .panel,.set.fresh,.tile.pop .tile-box{animation:none}
}

/* ---------- grown-ups section (below the fold) ---------- */
.noscript{max-width:620px;margin:16px auto;padding:12px 16px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line);text-align:center}
.about{
  max-width:620px;margin:0 auto;
  padding-top:28px;
  padding-bottom:calc(32px + env(safe-area-inset-bottom, 0px));
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  border-top:1.5px solid var(--line);
}
.about h2{font-family:var(--display);font-weight:800;font-size:1.6rem;line-height:1.1;margin:0 0 8px}
.about .lede{margin:0 0 18px;max-width:60ch}
.about-grid{display:grid;gap:12px}
@media (min-width:560px){.about-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.about-card{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:14px 16px}
.about-card h3{font-family:var(--display);font-weight:800;font-size:1.1rem;margin:0 0 4px;line-height:1.2}
.about-card p{margin:0;color:var(--muted);font-size:.95rem}
.about-card strong{color:var(--ink);font-weight:600}
.about-card.wide{grid-column:1 / -1}
.site-foot{margin-top:2.5rem;padding-top:1.25rem;border-top:1.5px solid var(--line);color:var(--muted);font-size:.9rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.site-foot p{margin:0}
.about a:focus-visible,.privacy a:focus-visible{outline:3px solid var(--r5);outline-offset:2px;border-radius:4px}

/* Link colour with AA contrast in both themes */
:root{--link:#4650B5}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--link:#B4B9FF} }
:root[data-theme="dark"]{--link:#B4B9FF}
a{color:var(--link)}

/* Footer privacy note */
.foot-privacy{max-width:30rem}
.foot-privacy summary{cursor:pointer;color:var(--link);text-decoration:underline;text-underline-offset:3px;display:inline}
.foot-privacy summary:focus-visible{outline:3px solid var(--r5);outline-offset:2px;border-radius:4px}
.foot-privacy p{margin-top:.5rem;text-align:left}

/* Link-style buttons */
.linklike{font:inherit;padding:0;border:0;background:none;color:var(--link);text-decoration:underline;text-underline-offset:3px;cursor:pointer;border-radius:4px}
.linklike:focus-visible{outline:3px solid var(--r5);outline-offset:2px}

/* Add-to-home-screen prompt (sits above the collection panel) */
.install{
  position:fixed;left:12px;right:12px;z-index:30;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  max-width:30rem;margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:14px;background:var(--surface);color:var(--ink);
  border:1.5px solid var(--line);border-radius:22px;
  box-shadow:0 12px 32px rgba(20,30,70,.25);text-align:left;
  animation:rise .35s ease-out;
}
.install img{width:44px;height:44px;flex:none;align-self:flex-start;border-radius:10px}
.install-text{flex:1 1 0;min-width:0}
.install-title{margin:0;font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1.25}
.install-body{margin:2px 0 0;font-size:.92rem;color:var(--muted);line-height:1.35}
.install-body svg{width:1.1em;height:1.1em;vertical-align:-.2em}
.install-actions{display:flex;flex-direction:column;gap:6px;flex:none}
.ib-add{background:var(--ink);color:var(--bg);border:0;border-radius:999px;padding:8px 18px;font-weight:600;cursor:pointer}
.ib-later{background:var(--surface);color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.9rem;cursor:pointer}
.ib-add:focus-visible,.ib-later:focus-visible{outline:3px solid var(--r5);outline-offset:2px}
body.has-install .panel-inner{padding-bottom:calc(9rem + env(safe-area-inset-bottom, 0px))}
@media (prefers-reduced-motion: reduce){ .install{animation:none} }