/* Tot Reads & Writes (Darya) - the app's Medley. Moved verbatim out of game.html's <style>
   (docs/engineering/13_the-app-front-door.md, task 2.1) so the game can stand on its own page.
   game.html links this file at the exact point the block used to sit, so the cascade is
   unchanged; nothing below was edited in the move. drwPop is also used by another game's
   .wg-consequence in game.html, which is why game.html keeps loading this file. */
    /* ════════════════════════════════════════
       TOT READS AND WRITES
    ════════════════════════════════════════ */

    #sec-tot { padding:1rem 1rem 3rem; }

    .drw-mascot { font-size:4rem; line-height:1; display:inline-block; animation:drwBob 2s ease-in-out infinite; }
    @keyframes drwBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
    .drw-mascot.dance { animation:drwDance .5s ease-in-out 4; }
    @keyframes drwDance { 0%{transform:rotate(0) scale(1)} 25%{transform:rotate(-18deg) scale(1.25)} 75%{transform:rotate(18deg) scale(1.25)} 100%{transform:rotate(0) scale(1)} }

    .drw-title { font-family:'Fredoka One',cursive; font-size:clamp(1.6rem,4vw,2.4rem); color:var(--ink); margin-top:.5rem; text-align:center; }
    .drw-subtitle { font-family:'Nunito',sans-serif; font-size:1rem; color:var(--brown); margin:.2rem 0 1.2rem; text-align:center; }

    .drw-level-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; max-width:480px; width:100%; margin:0 auto; }
    .drw-level-btn { background:var(--cream); border:3px solid var(--warm); border-radius:20px; padding:1.2rem .8rem; cursor:pointer; position:relative; text-align:center; box-shadow:0 4px 0 var(--warm); transition:all .2s; }
    .drw-level-btn:hover:not(.locked) { transform:translateY(-3px); box-shadow:0 7px 0 var(--warm); border-color:#B59FD6; }
    .drw-level-btn.locked { opacity:.5; cursor:not-allowed; }
    .drw-level-emoji { font-size:2rem; }
    .drw-level-name { font-family:'Fredoka One',cursive; font-size:1.1rem; color:var(--ink); margin-top:.3rem; }
    .drw-level-sub { font-size:.8rem; color:var(--brown); margin-top:.1rem; }
    .drw-lock { position:absolute; top:.5rem; right:.6rem; font-size:1.2rem; }

    .drw-stars-bar { font-family:'Fredoka One',cursive; font-size:.95rem; color:var(--brown); text-align:center; margin-top:1.4rem; }

    .drw-game-wrap { width:100%; max-width:560px; display:flex; flex-direction:column; align-items:center; gap:1.1rem; }

    .drw-topbar { display:flex; justify-content:space-between; align-items:center; width:100%; }
    .drw-back-btn { font-family:'Fredoka One',cursive; font-size:.9rem; background:none; border:2px solid var(--warm); border-radius:10px; padding:.3rem .8rem; cursor:pointer; color:var(--brown); transition:all .15s; }
    .drw-back-btn:hover { background:var(--warm); }
    .drw-star-count { font-family:'Fredoka One',cursive; font-size:1rem; color:var(--brown); }

    /* WRITING DIFFICULTY — three chips, all three always on screen.
       It began as one pill in the topbar that cycled on tap, which is fewer pixels and worse:
       a cycling control shows you where you are but never what else there is, so a parent had
       to tap through to discover that Medium and Hard existed at all. Showing all three costs
       one row and answers the question without being asked.
       It lives in the game area on the Trace It screen, outside the tracing box — the thing it
       changes is right underneath it, so no label has to explain the connection. */
    .drw-diff-row { display:flex; gap:.4rem; justify-content:center; align-items:center;
      flex-wrap:wrap; margin:-.3rem 0 .1rem; }
    /* .drw-diff-lbl removed with the label — see drwBuildTraceDiff. */
    .drw-diff-chip { font-family:'Fredoka One',cursive; font-size:clamp(.72rem,3.1vw,.8rem);
      letter-spacing:.01em;
      background:#fff; border:2px solid var(--warm); border-radius:999px;
      padding:.24rem clamp(.5rem,2.6vw,.78rem);
      cursor:pointer; color:var(--brown); line-height:1.3; transition:all .15s;
      display:inline-flex; align-items:center; gap:.32rem; }
    .drw-diff-chip:hover { transform:translateY(-1px); border-color:var(--brown); }
    /* The dot carries the colour when the chip is off, the whole chip carries it when on — so
       the three are told apart by colour either way, and the current one is unmistakable. */
    .drw-diff-chip .dot { width:.62rem; height:.62rem; border-radius:50%; display:inline-block; }
    .drw-diff-chip[data-diff="easy"]   .dot { background:var(--sage); }
    .drw-diff-chip[data-diff="medium"] .dot { background:var(--yellow); }
    .drw-diff-chip[data-diff="hard"]   .dot { background:var(--coral); }
    .drw-diff-chip.is-on { color:#fff; border-color:var(--ink); transform:translateY(-1px); }
    .drw-diff-chip.is-on .dot { background:#fff; }
    .drw-diff-chip.is-on[data-diff="easy"]   { background:var(--sage);   box-shadow:0 3px 0 #4f9265; }
    .drw-diff-chip.is-on[data-diff="medium"] { background:var(--yellow); color:var(--ink); box-shadow:0 3px 0 #c9a01f; }
    .drw-diff-chip.is-on[data-diff="medium"] .dot { background:var(--ink); }
    .drw-diff-chip.is-on[data-diff="hard"]   { background:var(--coral);  box-shadow:0 3px 0 #b85252; }

    .drw-prog-row { display:flex; gap:.45rem; justify-content:center; align-items:center; }
    .drw-prog-dot { width:11px; height:11px; border-radius:50%; background:var(--warm); transition:background .3s, transform .2s; }
    .drw-prog-dot.done { background:#B59FD6; }
    .drw-prog-dot.current { background:var(--orange); transform:scale(1.35); }

    /* Top right of the game, out of the way of the word. On: every word of the level is dealt at
       random, the two opening words included - see drwDealLevel. */
    .drw-game-wrap { position:relative; }
    .drw-shuffle { position:absolute; top:0; right:0; font:700 .8rem/1 'Nunito',sans-serif; color:var(--brown);
                   background:#fff; border:2px solid var(--warm); border-radius:999px; padding:.35rem .7rem; cursor:pointer; }
    .drw-shuffle[aria-pressed="true"] { background:var(--sage); border-color:var(--sage); color:#fff; }
    .drw-shuffle:focus-visible { outline:3px solid var(--ink); outline-offset:2px; }
    .drw-game-label { font-family:'Fredoka One',cursive; font-size:1.2rem; color:#B59FD6; text-align:center; }

    .drw-word-dot-row { display:flex; gap:.35rem; justify-content:center; }
    .drw-word-dot { width:9px; height:9px; border-radius:50%; background:var(--warm); transition:background .3s; }
    .drw-word-dot.done { background:#B59FD6; }
    .drw-word-dot.cur  { background:var(--orange); transform:scale(1.4); }

    /* ─── HEAR IT ─── */
    .drw-hear-choices { display:flex; flex-direction:column; gap:.85rem; width:100%; max-width:300px; }
    .drw-hear-btn { font-family:'Fredoka One',cursive; font-size:2.4rem; letter-spacing:.1em; padding:1rem 1.5rem; border:3.5px solid var(--warm); border-radius:20px; background:var(--cream); cursor:pointer; box-shadow:0 5px 0 var(--warm); transition:transform .15s, box-shadow .15s, border-color .2s; text-align:center; }
    .drw-hear-btn:hover { transform:translateY(-3px); box-shadow:0 8px 0 var(--warm); border-color:#B59FD6; }
    .drw-hear-btn:active { transform:translateY(2px); box-shadow:0 3px 0 var(--warm); }
    .drw-hear-btn.bounce { animation:drwBtnBounce .45s ease; }
    @keyframes drwBtnBounce { 0%,100%{transform:scale(1)} 35%{transform:scale(1.14)} 65%{transform:scale(.96)} }

    /* ─── SPELL IT ─── */
    .drw-spell-display { display:flex; gap:.4rem; justify-content:center; align-items:flex-end; min-height:72px; flex-wrap:wrap; }
    .drw-spell-slot { font-family:'Fredoka One',cursive; font-size:3rem; color:#B59FD6; width:54px; text-align:center; border-bottom:4px solid var(--warm); line-height:1; padding-bottom:.1rem; transition:all .2s; }
    .drw-spell-slot.filled { border-color:#B59FD6; }
    .drw-spell-slot.wrong-shake { animation:shake .4s ease; }
    /* A wrong letter is shown in red, shaken, then faded out — seen, but never entered. */
    .drw-spell-slot.wrong-try { color:#E8524A; animation:spellWrong .7s ease forwards; }
    @keyframes spellWrong {
      0%{transform:translateX(0);opacity:1} 15%{transform:translateX(-8px)} 30%{transform:translateX(8px)}
      45%{transform:translateX(-6px)} 60%{transform:translateX(6px);opacity:1} 100%{transform:translateX(0);opacity:0}
    }
    .drw-spell-space { width:24px; }

    .drw-keyboard { display:grid; grid-template-columns:repeat(7,1fr); gap:.38rem; max-width:430px; width:100%; }
    /* A KEY'S HEIGHT AND ITS WIDTH HAVE TO SCALE TOGETHER. The width comes from the grid — one
       seventh of whatever the container is — and the height came from a fixed .65rem of padding, so
       the two moved independently: on a 360px phone the keys were 36px wide and 48px tall, which is
       the stretched look. Both are viewport-relative now, so a key stays roughly square on a phone
       and goes a little wider than tall on a laptop, where there is room for it.

       NOT aspect-ratio, which would have been the obvious fix and is wrong here: Delete and Enter
       span two grid columns, so a 1:1 ratio would make them twice as tall as every other key. */
    .drw-key { font-family:'Fredoka One',cursive;
               font-size:clamp(1.05rem, 4.4vw, 1.35rem);
               line-height:1.15;
               padding:clamp(.3rem, 1.95vw, .65rem) .2rem;
               border:2.5px solid var(--warm); border-radius:12px; background:var(--cream); cursor:pointer; text-align:center; box-shadow:0 3px 0 var(--warm); transition:all .15s; user-select:none; -webkit-user-select:none; }
    .drw-key:hover { background:#ffe8c8; transform:translateY(-2px); }
    .drw-key:active { transform:translateY(1px); box-shadow:0 1px 0 var(--warm); }
    /* ONE LINE, so the last row is the same height as the other three. At a phone's width these are
       about 76px across and "⌫ Delete" at a flat 1rem wrapped, which made row four taller than rows
       one to three — half of the stretched look, and the half that is easy to miss. */
    .drw-key.bksp, .drw-key.enter { font-size:clamp(.72rem, 3vw, 1rem); white-space:nowrap; }
    .drw-key.bksp { grid-column:span 2; background:#fde8e8; border-color:var(--coral); box-shadow:0 3px 0 #d47070; }
    .drw-key.enter { grid-column:span 2; background:#B59FD6; color:#fff; border-color:#7a5fa8; box-shadow:0 3px 0 #7a5fa8; }
    .drw-key.enter:hover { background:#9a7fc0; }

    /* ─── FIND IT ─── */
    .drw-find-grid { display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; max-width:420px; }
    .drw-find-word { font-family:'Fredoka One',cursive; font-size:1.9rem; letter-spacing:.08em; padding:.75rem 1.3rem; border:3px solid var(--warm); border-radius:16px; background:var(--cream); cursor:pointer; box-shadow:0 4px 0 var(--warm); transition:all .2s; user-select:none; }
    .drw-find-word:not(.found):not(.wrong-tap):hover { border-color:#B59FD6; transform:translateY(-2px); }
    .drw-find-word.found { background:#E8F7EE; border-color:var(--sage); animation:drwPop .4s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
    .drw-find-word.wrong-tap { animation:shake .35s ease; }
    @keyframes drwPop { 0%{transform:scale(1)} 50%{transform:scale(1.35) rotate(6deg)} 100%{transform:scale(1) rotate(0)} }

    /* ─── READ TOGETHER ─── */
    .drw-read-letters { display:flex; gap:.3rem; justify-content:center; flex-wrap:wrap; align-items:baseline; }
    .drw-rl { font-family:'Fredoka One',cursive; font-size:clamp(4rem,13vw,7rem); color:var(--ink); display:inline-block; transition:color .3s, transform .3s; }
    .drw-rl.lit { color:#B59FD6; transform:scale(1.35); }
    .drw-read-btn { font-family:'Fredoka One',cursive; font-size:1.1rem; background:#B59FD6; color:#fff; border:none; border-radius:14px; padding:.7rem 2rem; cursor:pointer; box-shadow:0 4px 0 #7a5fa8; transition:all .15s; margin-top:.5rem; }
    .drw-read-btn:hover { transform:translateY(-2px); box-shadow:0 6px 0 #7a5fa8; }

    /* ─── TRACE IT ─── */
    /* THE BOX NOW HAS TO CARRY ITS OWN HEIGHT. It used to be propped open by an HTML copy of
       the word inside it; the engine draws the word onto the canvas instead, so without a
       height of its own this collapses to nothing. Sized like ABC Time's but taller, because
       a word has to fit across the width and the letters should still be big — at 92vw a
       three-letter word gets roughly a third of the screen each, and the height is what buys
       back the size. The engine measures the word and shrinks to fit, so a wider word simply
       comes out smaller rather than running off the edge. */

    /* ─── FEEDBACK ─── */
    .drw-feedback { font-family:'Fredoka One',cursive; font-size:1.3rem; text-align:center; min-height:1.7rem; color:var(--sage); }
    .drw-feedback.enc { color:var(--orange); }

    /* ─── CELEBRATION / UNLOCK ─── */
    .drw-celebrate { display:flex; flex-direction:column; align-items:center; gap:1rem; padding:2rem 1rem; text-align:center; width:100%; }
    .drw-cel-emoji { font-size:5rem; animation:drwDance .5s ease-in-out 3; }
    .drw-cel-title { font-family:'Fredoka One',cursive; font-size:2rem; color:var(--ink); }
    .drw-cel-sub { font-size:1rem; color:var(--brown); }
    .drw-cel-btn { font-family:'Fredoka One',cursive; font-size:1.15rem; background:#B59FD6; color:#fff; border:none; border-radius:14px; padding:.75rem 2.2rem; cursor:pointer; box-shadow:0 4px 0 #7a5fa8; transition:all .15s; margin-top:.5rem; }
    .drw-cel-btn:hover { transform:translateY(-3px); box-shadow:0 7px 0 #7a5fa8; }

    .drw-sticker-shelf { width:100%; max-width:480px; text-align:center; margin-top:.8rem; }
    .drw-sticker-shelf-title { font-family:'Fredoka One',cursive; font-size:1rem; color:#B59FD6; margin-bottom:.5rem; letter-spacing:.05em; }
    .drw-sticker-shelf-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; background:linear-gradient(135deg,#f9f0ff,#fff5fb,#f0f8ff); border:2px solid #e8d8f8; border-radius:18px; padding:.8rem; }
    .drw-sticker-shelf-empty { font-size:.9rem; color:#c0a8d8; text-align:center; margin-top:.8rem; font-style:italic; }
    .drw-stkr { font-size:2rem; display:inline-block; animation:drwStkrIn .5s cubic-bezier(.34,1.56,.64,1) both; cursor:default; transition:transform .2s; }
    .drw-stkr:hover { transform:scale(1.4) rotate(8deg); }
    @keyframes drwStkrIn { from{transform:scale(0) rotate(-20deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }

    .drw-unlock { background:linear-gradient(135deg,#fff0fb,#f5eeff,#eef8ff); border:3px solid #B59FD6; border-radius:24px; padding:2rem; text-align:center; box-shadow:0 8px 40px rgba(181,159,214,.35); animation:drwPop .5s cubic-bezier(.34,1.56,.64,1); width:100%; max-width:380px; position:relative; overflow:hidden; }
    .drw-unlock::before { content:'✨'; position:absolute; top:.5rem; left:.8rem; font-size:1.4rem; animation:drwBob 1.5s ease-in-out infinite; }
    .drw-unlock::after  { content:'✨'; position:absolute; top:.5rem; right:.8rem; font-size:1.4rem; animation:drwBob 1.5s ease-in-out infinite .4s; }
    .drw-unlock-emoji { font-size:5.5rem; display:block; animation:drwStkrIn .6s cubic-bezier(.34,1.56,.64,1); filter:drop-shadow(0 4px 12px rgba(181,159,214,.6)); }
    .drw-unlock-title { font-family:'Fredoka One',cursive; font-size:1.7rem; color:var(--ink); margin-top:.6rem; }
    .drw-unlock-sub { color:var(--brown); font-size:.95rem; margin-top:.3rem; }
    .drw-unlock-sparkles { font-size:1.5rem; letter-spacing:.3rem; margin-top:.4rem; animation:drwBob 2s ease-in-out infinite; }