/* The page every spelling game in this house is drawn on: the canvas, the
   tray and its slots, the badge, the hint and the tracing board. It is the
   engine's (tray.ts, trace.ts build what it styles), and a game's own
   style.css, linked after it, says only what is its own: --ink, the colour of
   the badge's count and the picture's ring; --hint, the opening hint's, when
   it is not --ink; and --wait, what stands in the picture until it has loaded. */
:root{--ink:#2b6b2b;--hint:var(--ink);--wait:none}
*{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}
/* The home button and the badge clear the status bar where the page runs under
   it: added to the home screen, and in the app (viewport-fit=cover). */
#ui{position:fixed;inset:0;pointer-events:none;font-family:"Geeza Pro","Noto Naskh Arabic",sans-serif}
#home{position:absolute;top:calc(10px + env(safe-area-inset-top));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:calc(10px + env(safe-area-inset-top));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:var(--ink)}
#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:var(--hint);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 round's picture at the right, then one slot per letter, right to left */
/* --s is set per round by buildSlots() (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 var(--ink);
  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, tray.ts) the picture is the game's faint --wait,
   never the last round's picture under this round's word */
#prompt.waiting img{display:none}
#prompt.waiting::after{content:var(--wait);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*var(--k,1));pointer-events:auto}
.slot span{opacity:.38;transform:translateY(calc(var(--dy,0)*1em))}
.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)}}
/* the tracing board's word in the tray once it is whole (revealWord, tray.ts): one piece, as the board drew it
   last, where the slots would be and as tall as they are; --c is its first letter's colour. The canvas is held
   off the page-wide canvas rule above, and kept in proportion if a narrow screen squeezes it */
.whole{height:var(--s);max-width:calc(94vw - var(--s)*2);padding:0 calc(var(--s)*.3);border-radius:calc(var(--s)*.5);
  background:#fff;border:3px solid var(--c);display:flex;align-items:center;justify-content:center;pointer-events:auto}
.whole canvas{position:static;height:calc(var(--s)*.8);width:auto;max-width:100%;min-width:0;object-fit:contain}
#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}
/* the tracing board (?trace, trace.ts): the first letter of the word, to draw over with a finger.
   It grows out of the food's picture when the picture is tapped, goes back into it on a tap on the scene,
   and drops into the tray as she serves (transform-origin is the picture, set by place()). --c is the
   consonant's colour. */
#trace{position:absolute;pointer-events:auto;touch-action:none;background:#fff;border-radius:32px;border:4px solid var(--c,var(--ink));
  box-shadow:0 10px 26px rgba(0,0,0,.18);opacity:0;transform:scale(.12);visibility:hidden;
  transition:opacity .25s,transform .35s cubic-bezier(.5,0,.75,0),visibility 0s .35s}
#trace.on{opacity:1;transform:none;visibility:visible;transition:opacity .2s,transform .45s cubic-bezier(.34,1.4,.64,1)}
#trace.out{opacity:0;transform:scale(.15);pointer-events:none;transition:opacity .5s ease-in,transform .55s ease-in}
#trace canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:28px}
/* the picture while the board is in it: it breathes, with a pencil on it */
#prompt{position:relative}
#prompt.draw{animation:breathe 1.6s ease-in-out infinite}
#prompt.draw::before{content:"✏️";position:absolute;top:-14%;right:-16%;font-size:calc(var(--s)*.62);line-height:1;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));pointer-events:none}