/* Fredoka, served from here rather than Google Fonts so the game loads nothing
   from another website. One variable file per subset covers weights 300-700.
   Licence: fonts/OFL.txt. */
@font-face{
  font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/fredoka-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(fonts/fredoka-latin.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;
}
:root{
  --ink:#16130F; --paper:#FFE9B8; --panel:#FFFDF7;
  --hero:#F97316; --accent:#4F5FD7; --pack:#34C08A; --alarm:#E23D3D; --crate:#C084FC;
  --foe:#6D28D9;
  --font:'Fredoka','Comic Sans MS','Chalkboard SE','Trebuchet MS',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* document-wide, or a child drumming on the cookie picture zooms the page to
   300% and cannot get back. Pinch-zoom and panning still work. */
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
body{
  margin:0;font-family:var(--font);
  padding:16px;
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
  padding-bottom:max(16px, env(safe-area-inset-bottom));
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  background:var(--paper);
  background-image:radial-gradient(var(--ink) 1.1px,transparent 1.2px);
  background-size:22px 22px;color:var(--ink);
  overscroll-behavior-y:contain;
}
.wrap{max-width:980px;margin:0 auto}
.hide{display:none!important}

/* Tablets: no double-tap zoom delay on the keypad, and nothing selects itself
   into a highlight when a child taps quickly. */
.logo,.iconbtn,.tab,.choice,.go,.undo,.key,.reset,.whybtn,.friend,.saybtn{
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
}

.topbar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.logo{
  font-size:27px;font-weight:700;letter-spacing:-.5px;background:var(--hero);color:#fff;
  min-height:44px;display:inline-flex;align-items:center;
  border:4px solid var(--ink);border-radius:14px;padding:4px 15px;transform:rotate(-2deg);
  box-shadow:5px 5px 0 var(--ink);cursor:pointer;
}
.status{font-size:17px;font-weight:500;opacity:.75;margin-left:auto}
.iconbtn{
  font-family:var(--font);font-size:19px;font-weight:600;background:var(--panel);
  border:4px solid var(--ink);border-radius:14px;padding:5px 13px;cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);color:var(--ink);min-height:44px;
}
.iconbtn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.iconbtn:focus-visible{outline:4px solid var(--accent);outline-offset:3px}
.iconbtn.off{opacity:.35}
.iconbtn.home{background:var(--accent);color:#fff}
.iconbtn.armed{background:var(--alarm);color:#fff;font-size:15px}

.panel{
  background:var(--panel);border:5px solid var(--ink);border-radius:16px;
  box-shadow:7px 7px 0 var(--ink);padding:16px;position:relative;overflow:hidden;
}
h2{font-size:23px;font-weight:600;margin:0 0 12px}

.tabs{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.tab{
  font-family:var(--font);font-size:22px;font-weight:600;background:var(--panel);color:var(--ink);
  border:5px solid var(--ink);border-radius:16px;padding:10px 22px;cursor:pointer;
  box-shadow:6px 6px 0 var(--ink);
}
.tab:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.tab:focus-visible{outline:5px solid var(--accent);outline-offset:4px}
.tab.on{background:var(--hero);color:#fff}

.choice{
  display:block;width:100%;text-align:left;font-family:var(--font);font-size:21px;font-weight:600;
  background:var(--panel);border:5px solid var(--ink);border-radius:16px;padding:12px 16px;
  margin-bottom:11px;cursor:pointer;box-shadow:6px 6px 0 var(--ink);color:var(--ink);
}
.choice:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.choice:focus-visible{outline:5px solid var(--accent);outline-offset:4px}
.choice small{display:block;font-size:15px;font-weight:400;opacity:.65;margin-top:2px}
/* "picked" and "won" used to be the same yellow, which made the word gold
   impossible to learn: the only yellow row was whichever one was selected */
.choice.on{background:#EEF1FF}
/* picking a level scrolls to this button; the pulse is what a child tapping
   with a thumb sees instead of the focus ring they never get */
.choice.nudge{animation:pop .45s ease-out}
.choice.gold{background:#FFF4C9;border-color:#C99A00}
.choice.gold small{color:#8A6400;font-weight:600;opacity:1}
.choice.locked{opacity:.45;cursor:not-allowed;box-shadow:3px 3px 0 var(--ink)}
.choice .row{display:flex;align-items:center;gap:10px;justify-content:space-between}

.menugrid{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;align-items:start}
.jar{display:flex;align-items:center;gap:14px;margin-bottom:6px;min-width:0}
#jarpic{display:block;min-width:0;flex:0 1 auto}
#jarpic svg{max-width:100%;height:auto}
.jarnum{font-size:40px;font-weight:700;line-height:1}
.jarlbl{font-size:16px;opacity:.7}
/* flex, not a fixed grid: a well-fed friend is more than twice the width of a
   peckish one, and the tiles have to size to whoever is standing in them */
.friends{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.friend{
  flex:0 1 128px;min-width:0;
  font-family:var(--font);color:var(--ink);text-align:center;cursor:pointer;
  border:4px solid var(--ink);border-radius:14px;padding:8px 6px;background:#FFF7E2;
  font-size:14px;font-weight:600;box-shadow:4px 4px 0 var(--ink);
}
.friend:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.friend:focus-visible{outline:4px solid var(--accent);outline-offset:3px}
.friend.locked,.friend[disabled]{
  background:#EFEADF;opacity:.7;cursor:not-allowed;box-shadow:2px 2px 0 var(--ink);
}
.friend small{display:block;font-size:12px;font-weight:400;opacity:.75;overflow-wrap:anywhere}
.friend.wobble{animation:wobble 1.8s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.hint{font-size:15px;opacity:.7;margin:-4px 0 10px}
.stickers{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:9px}
.sticker{
  display:flex;align-items:center;gap:8px;
  border:4px solid var(--ink);border-radius:12px;padding:7px 9px;
  background:#EFEADF;opacity:.6;font-size:15px;font-weight:600;
}
.sticker svg{flex:0 0 auto}
.sticker .txt{min-width:0}
.sticker:not(.on) svg{filter:grayscale(1)}
.sticker.on{background:#FFF4C9;opacity:1;box-shadow:3px 3px 0 var(--ink)}
.sticker small{display:block;font-size:12px;font-weight:400;opacity:.8;margin-top:1px}
.sticker.on small{color:var(--pack);font-weight:600}
.saybox{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 12px;padding:10px 12px;
  background:#FFF4C9;border:4px solid var(--ink);border-radius:14px;
  font-size:17px;font-weight:500;line-height:1.35;
}
.saybox > .line{flex:1 1 12ch;min-width:0}
.saybtns{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.saybtn{
  font-family:var(--font);font-size:15px;font-weight:600;color:var(--ink);
  background:var(--panel);border:3px solid var(--ink);border-radius:10px;
  padding:8px 12px;min-height:44px;cursor:pointer;box-shadow:3px 3px 0 var(--ink);
}
/* white on this green is 2.3:1, and this is now the most tapped button in
   the game rather than a one-off yes */
.saybtn.yes{background:var(--pack);color:var(--ink)}
/* not the lilac: that is the party button, two panels down the same screen */
.saybtn.many{background:#F5B814;color:var(--ink)}
/* the way out is grouped apart from the two buttons that spend */
.saybtn.stop{margin-left:14px}
.saybtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.saybtn:focus-visible{outline:4px solid var(--accent);outline-offset:3px}
.friend.asking{background:#FFF4C9;outline:4px solid var(--accent);outline-offset:2px}
.burp{
  flex:0 0 auto;
  background:var(--alarm);color:#fff;border:4px solid var(--ink);border-radius:12px;
  padding:3px 12px;font-size:21px;font-weight:700;transform:rotate(-5deg);
  box-shadow:3px 3px 0 var(--ink);white-space:nowrap;
}
/* the cookie in flight from the jar to whoever is about to eat it */
.fly{
  position:fixed;z-index:60;pointer-events:none;
  transition:transform .6s cubic-bezier(.35,-.2,.6,1.25), opacity .6s ease-in;
}
.quake{animation:quake .65s}
.silly .tab{animation:wobble 1.1s ease-in-out infinite}
/* panels get a far smaller angle: the tall ones would otherwise swing past the
   body padding and scroll the whole page sideways for four seconds */
.silly .panel{animation:tinywobble 1.1s ease-in-out infinite}
@keyframes tinywobble{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}
/* and nothing inside a wobbling panel wobbles as well */
.silly .friend.wobble{animation:none}
/* the logo already sits at -2deg, so it wobbles around that rather than snapping flat */
.silly .logo{animation:wobbletilt 1.1s ease-in-out infinite}
@keyframes wobbletilt{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(1deg)}}
@keyframes quake{
  0%,100%{transform:translate(0,0) rotate(0)}
  12%{transform:translate(-7px,4px) rotate(-.7deg)}
  30%{transform:translate(6px,-5px) rotate(.6deg)}
  50%{transform:translate(-5px,3px) rotate(-.5deg)}
  70%{transform:translate(4px,-2px) rotate(.35deg)}
  86%{transform:translate(-2px,1px) rotate(-.2deg)}
}

.strip{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:stretch}
.shelfrow{display:flex;align-items:flex-end;gap:10px;min-height:100px;flex-wrap:wrap}
/* "and another 77 of them", where drawing all 89 would teach nothing */
.tally{
  align-self:center;font-size:22px;font-weight:700;padding:4px 10px;
  border:3px solid var(--ink);border-radius:10px;background:#FFF7E2;
}
.loose{display:flex;flex-wrap:wrap;gap:5px;max-width:190px;align-content:flex-end}
.tag{font-size:15px;font-weight:600;opacity:.7;margin:12px 0 5px}
.divider{height:4px;background:var(--ink);border-radius:2px;margin:14px 0;opacity:.15}
.who{display:flex;align-items:center;gap:10px}
.name{font-size:20px;font-weight:600}

.trays{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;min-height:110px}
.tray{border:5px solid var(--ink);border-radius:14px;background:#EFEADF;padding:8px;opacity:.45}
.tray.on{opacity:1;background:#FFF4C9}
.traygrid{display:grid;gap:5px}
.arraybox{display:inline-grid;gap:6px;border:5px solid var(--ink);border-radius:14px;background:#FFF4C9;padding:10px}
.arraybox .rowon{outline:4px solid var(--alarm);outline-offset:3px;border-radius:6px}
.count{font-size:30px;font-weight:700;margin-top:12px}
.skip{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.skip span{
  border:3px solid var(--ink);border-radius:10px;padding:3px 11px;font-size:19px;font-weight:600;background:#FFF7E2;
}
.skip span.now{background:var(--hero);color:#fff}

.sum{display:grid;justify-content:center;align-items:end;font-size:46px;font-weight:600;line-height:1.05}
.sum > div{text-align:center;min-height:52px;display:flex;align-items:flex-end;justify-content:center}
.mini{font-size:24px;min-height:30px!important;color:var(--alarm);font-weight:600}
.struck{opacity:.55}
.struck .dig{position:relative}
.struck .dig::after{
  content:"";position:absolute;left:-3px;right:-3px;top:52%;height:5px;
  background:var(--alarm);border-radius:3px;transform:rotate(-14deg);
}
.carry1{font-size:24px;color:var(--alarm);margin-right:1px;align-self:flex-start;line-height:1}
.rule{height:6px;background:var(--ink);border-radius:3px;margin:8px 0 6px;min-height:0!important}
.blank{opacity:.18}
.slot{border:4px dashed var(--ink);border-radius:10px;opacity:.35;width:46px;height:52px}
.slot.active{opacity:1;border-style:solid;background:#FFF4C9}
.slot.good{opacity:1;border-style:solid;background:#E8FBF1}

.flat{display:flex;justify-content:center;align-items:center;gap:14px;font-size:52px;font-weight:600;flex-wrap:wrap;padding:14px 0}
.flat .box{
  min-width:100px;height:70px;border:5px dashed var(--ink);border-radius:14px;opacity:.4;
  display:flex;align-items:center;justify-content:center;
}
.flat .box.typing{opacity:1;border-style:solid;background:#FFF4C9}
.flat .box.good{opacity:1;border-style:solid;background:#E8FBF1}
.repeat{font-size:24px;text-align:center;opacity:.75;margin-top:6px;font-weight:500}

.bubble{
  position:relative;margin:22px 0 0;background:var(--panel);border:5px solid var(--ink);
  border-radius:20px;padding:15px 20px;font-size:22px;font-weight:500;line-height:1.4;
  box-shadow:7px 7px 0 var(--ink);min-height:34px;
}
.bubble::before{content:"";position:absolute;left:44px;top:-22px;border-left:14px solid transparent;border-right:22px solid transparent;border-bottom:22px solid var(--ink)}
.bubble::after{content:"";position:absolute;left:50px;top:-14px;border-left:10px solid transparent;border-right:16px solid transparent;border-bottom:15px solid var(--panel)}
.bubble.alarm{background:#FFEBEB}
.bubble.alarm::after{border-bottom-color:#FFEBEB}
.bubble.win{background:#E8FBF1}
.bubble.win::after{border-bottom-color:#E8FBF1}

.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.go{
  flex:1 1 8em;min-width:0;font-family:var(--font);font-size:27px;font-weight:600;
  background:var(--hero);color:#fff;border:5px solid var(--ink);border-radius:18px;padding:15px 20px;
  cursor:pointer;box-shadow:8px 8px 0 var(--ink);
}
.go:active{transform:translate(5px,5px);box-shadow:3px 3px 0 var(--ink)}
.go:focus-visible{outline:5px solid var(--accent);outline-offset:4px}
.go.rip{background:var(--alarm)}
.go.win{background:var(--pack)}
.undo{
  flex:0 0 auto;font-family:var(--font);font-size:21px;font-weight:600;
  background:var(--panel);color:var(--ink);border:5px solid var(--ink);border-radius:18px;
  padding:15px 20px;cursor:pointer;box-shadow:8px 8px 0 var(--ink);
}
.undo:active{transform:translate(5px,5px);box-shadow:3px 3px 0 var(--ink)}
.undo:focus-visible{outline:5px solid var(--accent);outline-offset:4px}
.undo[disabled]{opacity:.3;cursor:not-allowed;box-shadow:3px 3px 0 var(--ink)}

/* Why is deliberately its own button, and its own bubble: it explains the
   panel without replacing the instruction or advancing anything. */
.whybtn{
  flex:0 0 auto;font-family:var(--font);font-size:19px;font-weight:600;
  background:var(--accent);color:#fff;border:5px solid var(--ink);border-radius:18px;
  padding:15px 18px;cursor:pointer;box-shadow:8px 8px 0 var(--ink);
}
.whybtn:active{transform:translate(5px,5px);box-shadow:3px 3px 0 var(--ink)}
.whybtn:focus-visible{outline:5px solid var(--accent);outline-offset:4px}
.bubble.why{background:#EEF1FF;border-color:var(--accent);margin-top:12px;font-size:20px}
.bubble.why::before{border-bottom-color:var(--accent)}
.bubble.why::after{border-bottom-color:#EEF1FF}

/* --- division ------------------------------------------------------------ */
.plates{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.plate{
  border:4px solid var(--ink);border-radius:14px;background:#FFF7E2;
  padding:8px;min-width:76px;text-align:center;
}
.platetop{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:flex-end;min-height:48px}
.platename{font-size:15px;font-weight:600;margin-top:6px}
.empty{opacity:.4;font-size:16px;font-weight:500}

.pscene{margin-bottom:14px}
.pilerow{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-bottom:10px}
.pscene .plates{justify-content:center}
.pscene .trays{justify-content:center;min-height:0}
.pscene .tag{text-align:center}

.counter{margin-top:14px;border:4px dashed var(--ink);border-radius:14px;padding:8px 11px;background:#EFEADF}
.countertag{font-size:14px;font-weight:600;opacity:.7;margin-bottom:4px}
.counterrow{display:flex;flex-wrap:wrap;gap:5px;min-height:30px;align-items:center}

/* The bus stop. The answer row is padded to line its cells up with the
   dividend's, which sit inside the bracket's border. */
.bus{
  display:inline-grid;grid-template-columns:auto auto;justify-content:center;
  font-size:44px;font-weight:600;line-height:1;
}
/* #paper and #psum carry .sum, and `.sum > div` (0-1-1) outranks a bare class,
   so anything dropped straight into them needs its layout restated here. */
.sum > .bus{display:inline-grid}
.sum > .pscene{display:block}
.sum > .family{display:grid}
.sum > .working{display:block}
.busdiv{display:flex;align-items:flex-end;justify-content:flex-end;padding:0 10px 4px 0}
.busans{display:flex;padding-left:16px}
.busin{
  display:flex;padding:4px 0 0 10px;
  border-left:6px solid var(--ink);border-top:6px solid var(--ink);border-top-left-radius:10px;
}
.buscell{width:58px;min-height:56px;display:flex;align-items:flex-end;justify-content:center}
.ripped{text-align:center;font-size:17px;font-weight:600;color:var(--alarm);margin-top:8px}

.remlbl{font-size:19px;font-weight:500;opacity:.7}
.box.small{min-width:72px}

.family{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:10px;padding:6px 0}
.fact{display:flex;align-items:center;justify-content:center;gap:10px;font-size:29px;font-weight:600}
/* the shared .box look lives under .flat, so the fact rows restate it */
.fact .box{
  min-width:66px;height:54px;font-size:29px;border:5px dashed var(--ink);border-radius:14px;
  opacity:.4;display:flex;align-items:center;justify-content:center;
}
.fact .box.typing{opacity:1;border-style:solid;background:#FFF4C9}
.fact .box.good{opacity:1;border-style:solid;background:#E8FBF1}
.fact .box.done{opacity:1;border-style:solid;background:#FFF7E2}

.working{
  position:relative;font-size:38px;font-weight:600;text-align:center;margin-top:10px;
  padding:14px 10px;border:5px dashed var(--ink);border-radius:16px;background:#FFF4C9;
}
.working.good{background:#E8FBF1;border-style:solid}
.mark{position:absolute;right:12px;top:6px;font-size:32px;font-weight:700}
.mark.bad{color:var(--alarm)}
.mark.good{color:var(--pack)}

.key.wide{grid-column:span 2;font-size:19px}
.key.good{background:var(--pack);color:#fff;font-size:19px}

/* minmax(0,1fr) or the tracks fall back to min-content and stop lining up */
.pad{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:16px}
/* the action row is pushed clear of the digits: Skip used to sit 10px under the
   8 key, and mis-hitting it throws the problem away and breaks the combo */
.pad .key[data-act]{margin-top:14px}
.key{
  font-family:var(--font);font-size:30px;font-weight:600;background:var(--panel);color:var(--ink);
  border:5px solid var(--ink);border-radius:14px;padding:12px 0;cursor:pointer;box-shadow:5px 5px 0 var(--ink);
}
.key:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.key:focus-visible{outline:4px solid var(--accent);outline-offset:3px}
.key.rip{background:var(--alarm);color:#fff;font-size:19px}
.key.help{background:var(--accent);color:#fff;font-size:19px}
.key.next{background:var(--pack);color:#fff;font-size:19px}
/* Skip was the only action key with no class of its own, so it inherited the
   digit keys' white fill and 30px type and looked exactly like an 8. Quiet
   grey and small type say "the way out", not "another number to press" -- and
   it stops the word overflowing its own button on a 360px phone. */
.key.skip{background:#EFEADF;color:#4A4843;font-size:16px;line-height:1.15}
/* divide's judge round fills its one row with two wide verdict buttons, so a
   Skip in that row sits against the red one; this puts it out of reach */
.pad .key.lone{grid-column:5;grid-row:2}
.key.check{background:var(--pack);color:#fff;font-size:19px}
.key.back{font-size:19px}
.key[disabled]{opacity:.3;cursor:not-allowed;box-shadow:2px 2px 0 var(--ink)}

.hud{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:32px}
.watcher{display:flex;align-items:center;flex:0 0 auto}
/* the monster and his sack are sized by the raid, which shrinks him as he
   loses; the blanket .watcher svg clamp below would flatten both */
.foeface,.foesack{display:flex;align-items:center}
#practice{position:relative}
.combo{background:var(--alarm);color:#fff;border:3px solid var(--ink);border-radius:10px;padding:2px 10px;font-size:16px;font-weight:600}
.combo.big{background:var(--pack);font-size:18px;animation:pop .45s ease-out}
/* said inside the hud, where the child is looking, and not only in the
   topbar status line they have learnt to ignore */
.combo.foe{background:var(--foe);animation:pop .45s ease-out}
.combo.foe.nopop{animation:none}
/* "Not eaten yet!" must not arrive in --foe, which is the colour the docket
   uses for a cookie he has taken; it gets the box's dashed treatment instead,
   so pill and box say the same thing in the same moment */
.combo.foe.hold{background:var(--panel);color:var(--ink);border-style:dashed}
/* he lunges when he takes one and flinches when one is taken off him */
.chomp{animation:chomp .5s ease-out}
@keyframes chomp{
  0%{transform:scale(1) rotate(0)}
  30%{transform:scale(1.22) rotate(-8deg)}
  62%{transform:scale(.93) rotate(6deg)}
  100%{transform:scale(1) rotate(0)}
}
.ouch{animation:ouch .5s ease-out}
@keyframes ouch{
  0%,100%{transform:translateX(0) rotate(0)}
  25%{transform:translateX(-6px) rotate(-7deg)}
  60%{transform:translateX(5px) rotate(6deg)}
}
.combo.big.nopop{animation:none}
.heckle{
  display:flex;align-items:center;gap:8px;flex:1 1 100%;font-size:15px;
  border-top:3px solid var(--ink);padding-top:8px;margin-top:2px;opacity:.9;
}
.bar{flex:1;min-width:110px;height:18px;border:3px solid var(--ink);border-radius:10px;background:#EFEADF;overflow:hidden}
.bar span{display:block;height:100%;background:var(--pack)}

.burst{
  position:absolute;right:14px;top:14px;transform-origin:top right;
  font-size:28px;font-weight:700;color:#fff;
  background:var(--alarm);border:4px solid var(--ink);padding:5px 15px;border-radius:12px;
  transform:rotate(9deg);box-shadow:4px 4px 0 var(--ink);
}
.pop{animation:pop .45s ease-out}
@keyframes pop{0%{transform:scale(.4) rotate(-14deg)}60%{transform:scale(1.18) rotate(5deg)}100%{transform:scale(1)}}
.shake{animation:shake .4s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

.reward{text-align:center;padding:30px 16px 26px}
.reward h1{font-size:38px;font-weight:700;margin:12px 0 6px}
.reward p{font-size:20px;margin:0 0 8px;opacity:.8}
/* .dot is display:flex, i.e. block-level, so each legend chip took a line of
   its own hard against the left edge with its sentence centred beneath it */
.reward p .dot{display:inline-flex;vertical-align:-6px;margin-right:6px}
.confettibox{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti{position:absolute;top:-30px;animation:fall 2.6s linear 4;will-change:transform}
@keyframes fall{to{transform:translateY(560px) rotate(420deg)}}

/* --- the shelf ------------------------------------------------------------ */
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:9px}
.shelfitem{
  display:flex;align-items:center;gap:9px;min-width:0;width:100%;
  font-family:var(--font);color:var(--ink);text-align:left;
  border:4px solid var(--ink);border-radius:14px;background:#EFEADF;
  padding:8px 10px;box-shadow:3px 3px 0 var(--ink);cursor:pointer;
}
button.shelfitem:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.shelfitem:focus-visible{outline:4px solid var(--accent);outline-offset:3px}
.pips{display:flex;gap:3px;margin:3px 0 1px}
.pip{
  width:11px;height:11px;border:2px solid var(--ink);border-radius:50%;
  background:var(--panel);
}
.pip.on{background:#F5B814}
/* the same grey the sticker board uses: a prize still to come is drawn in
   full, so its shape is something to aim at rather than an empty square */
.shelfitem:not(.on) svg{filter:grayscale(1)}
.shelfitem.on{background:#FFF4C9;box-shadow:4px 4px 0 var(--ink)}
.shelfitem svg{flex:0 0 auto}
.shelfitem .txt{min-width:0}
.shelfitem b{display:block;font-size:15px;line-height:1.2;overflow-wrap:anywhere}
/* the only information on the panel: it had opacity .62 on the tile and .8
   again on the text, which put it at 3.3:1 against its own background */
.shelfitem small{display:block;font-size:13px;font-weight:500;color:#5C5955}
.shelfitem.on small{color:#1B7A55;font-weight:600}
.choice.big{background:var(--accent);color:#fff}
.choice.big small{opacity:1;color:#E5E7F9}
/* the one button in the game that is not somebody being nice to you */
.choice.snaf{background:var(--foe);color:#fff}
.choice.snaf small{opacity:1;color:#E4D8FB}
/* white on the lilac is 2.6:1; the ink reads at 7:1 and keeps the colour */
.choice.party{background:var(--crate);color:var(--ink);margin-top:12px}

/* --- the big order -------------------------------------------------------- */
.docket{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.dot{
  width:28px;height:28px;flex:0 0 auto;
  border:3px solid var(--ink);border-radius:8px;background:var(--panel);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;line-height:1;
}
.dot.done{background:var(--pack);color:var(--ink)}
/* orange, not the blue: a blue ring sat right beside purple boxes, and the
   two hues are barely a third of a step apart */
.dot.now{background:#FFF4C9;outline:3px solid var(--hero);outline-offset:2px;font-weight:700}
.dot.gone{opacity:.35}
/* his, not skipped: a cookie somebody else is holding, not one waved past */
.dot.ate{background:var(--foe);color:#fff}
/* skipped past in a raid, and coming round again. Deliberately nothing like
   the purple `ate` box and nothing like the faded `gone` one: this cookie is
   still there to be won, so the box keeps its colour and only its edge goes
   dashed, the way a thing waiting its turn should look. No background of its
   own either, or it would paint over the yellow on the box in hand -- which is
   exactly the box a child needs to find when a passed one comes round. */
/* 1.3em, not the digit size: the arrow is a hairline circle in whatever
   symbol font the device falls back to -- Fredoka has no U+21BB -- and at the
   11px of the landscape query it is a smudge unless it fills its box. */
.dot.back{border-style:dashed;font-size:1.3em}
/* A box that was set aside and has come back is both `back` and `now`, and the
   dashed 3px ink border then sits inside a solid 3px orange ring 2px out from
   it, where the eye cannot find it. Dash the ring the eye actually sees. */
.dot.back.now{outline-style:dashed}
.clean{
  background:var(--pack);color:var(--ink);border:3px solid var(--ink);border-radius:10px;
  padding:2px 10px;font-size:15px;font-weight:600;
}
.togo{font-size:16px;font-weight:600}
/* kept off the score beside it, which otherwise read as one run of numbers */
.jarcount{font-size:19px;font-weight:600;border-left:3px solid var(--ink);padding-left:10px}
.wants{font-size:15px;font-weight:600;margin-left:7px}

/* --- the party ------------------------------------------------------------ */
#party{position:relative}
.partyroom{text-align:center;position:relative;overflow:hidden}
.bunting{display:block;margin:-8px -8px 2px}
.partytitle{font-size:30px;font-weight:700;line-height:1.15;margin:6px 0 14px}
.guests{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  align-items:flex-end;min-height:113px;
}
/* flex-shrink would squash eleven faces onto one line at half size rather
   than wrapping them; at a party the friends are the whole point */
.guest{display:flex;flex-direction:column;align-items:center;gap:2px;flex:0 0 auto}
.guest svg{flex:0 0 auto}
.guest b{font-size:15px;font-weight:600}
.cakebox{margin-top:18px}
.caketag{font-size:15px;opacity:.75;margin-top:4px}
.flame{animation:flicker .9s ease-in-out infinite alternate}
@keyframes flicker{from{opacity:.7;transform:translateY(0)}to{opacity:1;transform:translateY(-1.5px)}}

@media (prefers-reduced-motion:reduce){
  .pop,.shake,.confetti,.friend.wobble,.quake,.combo.big,.flame,.choice.nudge,
  .chomp,.ouch,.combo.foe,
  .silly .panel,.silly .logo,.silly .tab{animation:none}
  .silly .logo{transform:rotate(-2deg)}
  .confetti,.fly{display:none}
}

details{
  margin-top:22px;font-size:16px;line-height:1.65;
  background:var(--panel);border:5px solid var(--ink);border-radius:16px;
  box-shadow:7px 7px 0 var(--ink);padding:10px 18px;
}
details[open]{padding-bottom:16px}
summary{
  cursor:pointer;font-weight:600;font-size:18px;padding:8px 0;
  min-height:44px;display:flex;align-items:center;
  list-style:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;
}
summary::-webkit-details-marker{display:none}
summary::before{content:"\25B8";display:inline-block;width:1.1em;font-size:15px}
details[open] summary::before{content:"\25BE"}
summary:focus-visible{outline:4px solid var(--accent);outline-offset:3px;border-radius:8px}
details p{max-width:66ch;margin:10px 0}
.smallprint{
  font-size:14.5px;line-height:1.6;opacity:.8;
  border-top:3px solid var(--ink);padding-top:14px;margin-top:18px!important;
}
.reset.armed{background:var(--alarm);color:#fff}
.reset{
  font-family:var(--font);font-size:15px;background:none;border:3px solid var(--ink);
  border-radius:10px;padding:8px 14px;cursor:pointer;color:var(--ink);min-height:44px;
}

/* the grown-ups' name editor: who they are, what they are called, which voice */
details h3{margin:22px 0 4px;font-size:19px}
.castedit{display:grid;gap:8px;max-width:66ch;margin:6px 0 10px}
.castrow{display:grid;grid-template-columns:28px 1fr minmax(0,12em) auto;gap:8px;align-items:center}
.castrow .swatch{width:24px;height:24px;border-radius:50%;border:3px solid var(--ink)}
.castrow small{opacity:.7;font-size:14px}
.castrow input,.castrow select{
  font-family:var(--font);font-size:16px;color:var(--ink);background:#fff;
  border:3px solid var(--ink);border-radius:10px;padding:6px 10px;min-height:44px;min-width:0;
}
@media (max-width:560px){
  .castrow{grid-template-columns:28px 1fr auto}
  .castrow small{grid-column:2 / -1}
}

/* ----------------------------------------------------------- small screens
   Keyed off the narrow dimension rather than plain width, so a phone held
   sideways keeps the two-column layout it has room for and only loses height. */
@media (max-width:640px){
  .menugrid{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
}
/* ten dots at 28px plus a face and a cookie count is wider than the panel
   well before the phone breakpoint, and a wrapped docket doubles the hud */
@media (max-width:560px){
  /* twelve of these plus a monster and a sack: ten fitted at 25px, twelve do not */
  .dot{width:22px;height:22px;font-size:12px}
  .docket{gap:4px}
  .hud{gap:9px}
}
@media (max-width:420px){
  body{padding:11px;padding-left:max(11px, env(safe-area-inset-left));
       padding-right:max(11px, env(safe-area-inset-right));
       padding-bottom:max(11px, env(safe-area-inset-bottom))}
  /* ten tiles at up to 132px go one per row and make the panel 1700px tall */
  .friend svg{width:64px!important;height:64px!important}
  /* party.js caps the faces at 64 here instead: one blanket size would make
     the last friend bigger than he has earned and the baker smaller */
  .partytitle{font-size:23px}
  .watcher svg{width:32px;height:32px}
  /* the monster at 32px is a featureless blob whose four faces all look
     the same, and he is what the screen is about. The sack shrinks; he does
     not, or the "he gets smaller as you win" cue disappears on a phone. */
  .foeface svg{width:44px!important;height:44px!important}
  .foesack svg{width:28px!important;height:28px!important}
  .friend{flex:1 1 84px}
  /* nine columns of cookies is 348px, and .panel clips rather than scrolls */
  .arraybox{gap:3px;padding:6px}
  .arraybox svg{width:22px;height:22px}
  .mark{font-size:24px}
  .pad{gap:7px}
  /* the gap above drops to 7px here, so the constant that keeps Skip clear of
     the digits has to grow to make up for it */
  .pad .key[data-act]{margin-top:18px}
  .key{font-size:26px;padding:10px 0}
  .key.rip,.key.help,.key.next,.key.check,.key.back,.key.wide,.key.good,
  .key.skip{font-size:14px}
  .saybtn{font-size:14px;padding:8px 10px}
  .go{font-size:22px;padding:12px 14px}
  .undo,.whybtn{font-size:17px;padding:12px 14px}
  .logo{font-size:22px}
  .sum{font-size:38px}
  .sum > div{min-height:44px}
  .slot{width:40px;height:44px}
  .bus{font-size:36px}
  .buscell{width:46px;min-height:46px}
  .fact{font-size:25px}
  .fact .box{min-width:56px;height:46px;font-size:25px}
  .working{font-size:30px}
}

/* A phone on its side has plenty of width and almost no height. */
/* Same problem as #practice: width to spare, no height at all. Without this
   the cake, the speech and the only button all sit below the fold, and the
   docket alone eats 40% of the screen. */
@media (orientation:landscape) and (max-height:540px){
  .guest svg{width:56px!important;height:56px!important}
  .guests{min-height:0;gap:10px}
  .guest b{font-size:13px}
  .partytitle{font-size:22px;margin:2px 0 8px}
  .bunting svg{height:20px}
  .cakebox{margin-top:8px}
  .cakebox svg{width:104px;height:auto}
  .caketag{font-size:13px}
  /* the practice screen is two columns here, so the docket has half the width
     to put twelve boxes in */
  /* a thinner border too, or an 18px box with a 3px one leaves 12px of room
     for the two digits the last three boxes have to show */
  .dot{width:18px;height:18px;font-size:11px;border-width:2px}
  .docket{gap:3px}
  .clean,.togo{font-size:13px}
  .combo.foe{font-size:13px;padding:1px 8px}
  .clean{padding:1px 8px}
  .hud{gap:8px}
}
@media (orientation:landscape) and (max-height:540px){
  body{padding:9px;padding-left:max(9px, env(safe-area-inset-left));
       padding-right:max(9px, env(safe-area-inset-right));
       padding-bottom:max(9px, env(safe-area-inset-bottom))}
  /* there is width to spare and no height at all, so the keypad goes beside
     the question instead of a screen below it */
  #practice{
    display:grid;grid-template-columns:1fr 1fr;
    grid-template-areas:"q pad" "b pad";
    gap:12px;align-items:start;position:relative;
  }
  #practice > .panel{grid-area:q}
  #practice > .bubble{grid-area:b}
  #practice .pad{grid-area:pad;margin-top:0}
  .watcher svg{width:32px;height:32px}
  /* the monster at 32px is a featureless blob whose four faces all look
     the same, and he is what the screen is about. The sack shrinks; he does
     not, or the "he gets smaller as you win" cue disappears on a phone. */
  .foeface svg{width:44px!important;height:44px!important}
  .foesack svg{width:28px!important;height:28px!important}
  .mark{font-size:24px}
  .topbar{margin-bottom:9px}
  .panel{padding:11px}
  .shelfrow{min-height:70px}
  .trays{min-height:80px}
  .sum{font-size:34px}
  .sum > div{min-height:38px}
  .slot{width:38px;height:38px}
  .bubble{margin-top:12px;padding:10px 15px;font-size:18px;min-height:0}
  .bubble::before{top:-18px;border-bottom-width:18px}
  .bubble::after{top:-11px;border-bottom-width:12px}
  .actions{margin-top:10px}
  .go{font-size:22px;padding:10px 16px}
  .undo{font-size:18px;padding:10px 16px}
  .whybtn{font-size:17px;padding:10px 14px}
  .bus{font-size:34px}
  .buscell{width:46px;min-height:42px}
  .platetop{min-height:38px}
  .working{font-size:30px;padding:10px}
  .pad{margin-top:10px;gap:7px}
  .pad .key[data-act]{margin-top:18px}
  .key{font-size:24px;padding:7px 0}
  .reward{padding:16px 14px 14px}
  .reward h1{font-size:28px;margin:8px 0 4px}
}