*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
html,body{height:100%;overflow:hidden;background:#BFE9FF;touch-action:none;overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;font-family:"Chalkboard SE","Comic Sans MS",ui-rounded,sans-serif}
canvas{position:fixed;inset:0;display:block;touch-action:none}
#ui{position:fixed;inset:0;pointer-events:none;font-family:"Geeza Pro","Noto Naskh Arabic",sans-serif}
#home{position:absolute;top:10px;left:14px;pointer-events:auto;background:#fff;border-radius:30px;padding:5px 13px;
  font-size:24px;text-decoration:none;box-shadow:0 4px 10px rgba(0,0,0,.15)}
#badge{position:absolute;top:10px;right:14px;background:#fff;border-radius:40px;padding:6px 20px;font-size:32px;
  color:#333;box-shadow:0 4px 10px rgba(0,0,0,.15);display:flex;align-items:center;gap:8px}
#wProg{color:#B5462F}
#badge.pop{animation:bpop .35s}
@keyframes bpop{40%{transform:scale(1.35) rotate(-6deg)}}
#hint{position:absolute;left:50%;top:70%;transform:translateX(-50%);font-size:30px;color:#8a3420;white-space:nowrap;
  background:rgba(255,255,255,.78);padding:10px 26px;border-radius:30px;animation:pulse 1.6s infinite;transition:opacity .5s}
@keyframes pulse{50%{transform:translateX(-50%) scale(1.08)}}
#hint.hidden{opacity:0}
/* the tray: the animal's picture at the right, then one slot per letter, right to left */
/* --s is set per round by buildSlots() (src/tray.ts), from the letter count;
   this is what holds until the first one is dealt */
#tray{--s:clamp(52px,11vmin,78px);position:absolute;left:0;right:0;bottom:calc(2vh + env(safe-area-inset-bottom));
  display:flex;justify-content:center;align-items:center;gap:calc(var(--s)*.5)}
#prompt{width:calc(var(--s)*1.5);height:calc(var(--s)*1.5);border-radius:50%;background:#fff;border:4px solid #B5462F;
  display:flex;align-items:center;justify-content:center;pointer-events:auto}
#prompt img{height:78%;pointer-events:none}
/* until the round's picture has decoded (showPrompt, src/tray.ts) the picture is a faint paw print,
   never the last animal's picture under this round's word */
#prompt.waiting img{display:none}
#prompt.waiting::after{content:"🍽️";font-size:calc(var(--s)*.8);line-height:1;opacity:.3}
.slot{width:var(--s);height:var(--s);border-radius:50%;border:3px dashed var(--c);background:rgba(255,255,255,.9);
  color:var(--c);display:flex;align-items:center;justify-content:center;font-size:calc(var(--s)*.62);pointer-events:auto}
.slot span{opacity:.38}
.need{animation:breathe 1.2s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.12)}}
.pulse{animation:pop .42s}
@keyframes pop{from{transform:scale(1.3)}}
.win{animation:bow .42s}
@keyframes bow{50%{transform:scale(1.26)}}
.slot.filled{background:var(--c);border:3px solid #fff;animation:fill .3s}
.slot.filled span{color:#fff;opacity:1}
@keyframes fill{50%{transform:scale(1.45)}}
#dbg{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.7);color:#7CE26B;font:11px monospace;
  padding:6px 9px;border-radius:8px;white-space:pre;direction:ltr}