/* V929 — Kids Corner. Everything is scoped under #kc-root; nothing here reaches the shell.

   THE PALETTE IS THEME-AWARE, AND THAT IS A DECISION WITH A SCAR BEHIND IT.
   Device Link shipped at V817 with the mockup's hardcoded light values and read as a
   sheet of white boxes on a dark site; V824 spent a release mapping it onto the house
   tokens. This file does that on day one: SURFACES, TEXT AND LINES follow the site's
   theme (--panel/--text/--line2 from line_escape.css), and only the ACCENTS are fixed.

   The accents are fixed because they are CONTENT, not chrome. A crab is red in both
   themes; the sticker that says "well done" is gold in both. What changes with the
   theme is the paper it sits on. The one exception is the drawing canvas, which is
   white in both themes for the reason a sheet of paper is: it is printed, and a child
   colouring on a dark grey page gets a dark grey picture out of the printer.

   (V818's lesson is live in this file: a close-paren immediately followed by a brace
   and a hash is read by Jinja as the start of a comment and takes the whole page down
   with a TemplateSyntaxError at render time. This is a .css and not a <style> block,
   so it cannot happen here -- which is itself part of why the styles are a file.) */

#kc-root{
  --kc-paper:var(--panel);
  --kc-card:var(--btn);
  --kc-ink:var(--text);
  --kc-mute:var(--muted);
  --kc-line:var(--line2);
  --kc-blossom:#ff7a93; --kc-mango:#ffb454; --kc-leaf:#3fbf7f;
  /*  V945 -- THE SAME COLOUR CANNOT BE BOTH A FILL AND A LABEL.
      The three above were picked to sit on the dark theme's near-black and
      they are lovely there. Used as TEXT on the light theme they measure
      1.49:1 (the star count), 1.61:1 (the move count) and 2.09:1 (Start
      again) against a 4.5 floor -- which is what he reported seeing: words
      the same brightness as the card behind them. The playful FILLS stay
      exactly as they are; only the text sites take the -t tokens, and only
      the light theme redefines them. Measured, not eyeballed: 5.3:1 and
      5.4:1 against the lighter of the two card colours. */
  --kc-mango-t:var(--kc-mango); --kc-blossom-t:#ffa8b8;
  --kc-violet-t:#c4b4ff; --kc-violet-f:#6240d6;
  --kc-lagoon:#35b6d4; --kc-violet:#8a6cf0; --kc-butter:#ffd66b;
  --kc-sh:0 1px 2px rgba(0,0,0,.14), 0 12px 28px -20px rgba(0,0,0,.5);
  --kc-e:cubic-bezier(.2,.8,.2,1);
  --kc-r:18px;
  max-width:1020px;margin:0 auto;color:var(--kc-ink);
  font-weight:600;line-height:1.45;
}
html:not([data-dark]) #kc-root{--kc-sh:0 1px 2px rgba(43,37,70,.06), 0 12px 28px -20px rgba(43,37,70,.45);
  --kc-mango-t:#8a5300; --kc-blossom-t:#b81a3c; --kc-violet-t:#5530c7}
#kc-root *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
#kc-root button{font:inherit;color:inherit}
#kc-root svg{display:block}
#kc-root [hidden]{display:none !important}

/* ---------------------------------------------------------------- header */
/*  V940: .kc-top and .kc-h1 are GONE -- the heading row he circled. The tab row
    below carries everything that was on it. */
#kc-root .kc-icon{width:36px;height:36px;border-radius:11px;border:1px solid var(--kc-line);
  background:var(--kc-card);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
#kc-root .kc-icon:active{transform:scale(.94)}
#kc-root .kc-pill{display:inline-flex;align-items:center;gap:6px;background:var(--kc-card);
  border:1px solid var(--kc-line);border-radius:999px;padding:6px 12px;font-weight:800;font-size:13.5px}
#kc-root .kc-voice{cursor:pointer}
#kc-root .kc-voice.kc-off{opacity:.55}
#kc-root .kc-pi svg,#kc-root .kc-bi svg{width:16px;height:16px}
#kc-root .kc-stars{color:var(--kc-mango-t)}

/* ------------------------------------------------------------------ tabs */
#kc-root .kc-tabs{display:flex;gap:4px;overflow:auto;padding-bottom:4px;margin-bottom:14px;
  scrollbar-width:none}
#kc-root .kc-tabs::-webkit-scrollbar{display:none}
#kc-root .kc-tabs button{flex:0 0 auto;display:flex;align-items:center;gap:7px;border:0;background:none;
  color:var(--kc-mute);font-size:13px;font-weight:800;padding:8px 13px;border-radius:12px;cursor:pointer;
  transition:background .16s var(--kc-e),color .16s var(--kc-e)}
#kc-root .kc-tabs button svg{width:19px;height:19px}
#kc-root .kc-tabs button.kc-on{color:var(--kc-violet-t);background:rgba(138,108,240,.14)}
/*  V940 -- ONE ROW CARRIES ALL OF IT. The spacer pushes Sound, the stars and Full
    screen to the right end. It is `flex:1 1 auto` and NOT `margin-left:auto`,
    because this row scrolls sideways on a phone: an auto margin inside a scrolling
    flex row measures against the SCROLL width, so the pills would have been pushed
    off the end of a 390px screen instead of sitting at the edge of it. */
/*  NOT `.kc-bar` -- that is the progress bar on the Home tiles, and the first cut
    of this used the same name. The wrapper then inherited `height:6px;
    overflow:hidden` and the rendered page sliced the whole row to a 6px sliver
    with the tabs sticking out above it. Found by looking at the screenshot; no
    measurement of the pills would have caught it, because the pills were in the
    right PLACE and simply not visible. */
#kc-root .kc-barrow{display:flex;align-items:center;gap:10px;margin-bottom:14px}
#kc-root .kc-tabs{flex:1 1 auto;margin-bottom:0;min-width:0}
#kc-root .kc-ctl{display:flex;align-items:center;gap:6px;flex:0 0 auto}
#kc-root .kc-ctl .kc-pill{flex:0 0 auto;padding:5px 11px;font-size:12.5px}
#kc-root .kc-fsb{cursor:pointer;border-color:var(--kc-line)}
#kc-root .kc-here{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  padding-right:9px;margin-right:3px;border-right:1px solid var(--kc-line)}
#kc-root .kc-here b{font-size:14px;font-weight:800;letter-spacing:-.2px;white-space:nowrap}
#kc-root .kc-here .kc-icon{width:30px;height:30px;border-radius:9px}
#kc-root .kc-here .kc-icon svg{width:16px;height:16px}

/*  Below 560px the words come off the two widest pills -- the symbols say the same
    thing and the row has to fit a thumb's worth of tab beside them. */
/*  Below 700px the three controls take their own line, right-aligned, rather than
    being pushed off the end of a tab row that scrolls. It costs 34px and still
    leaves the page one row shorter than before V940, because the heading row that
    used to sit above the tabs is gone. */
@media (max-width:700px){
  #kc-root .kc-barrow{display:block}
  #kc-root .kc-tabs{margin-bottom:4px}
  #kc-root .kc-ctl{justify-content:flex-end}
}
@media (max-width:560px){#kc-root .kc-ctl .kc-pill{padding:5px 9px}}

/*  ===================================================== V940 -- FULL SCREEN
    TWO MECHANISMS, and this is the one that works everywhere. `requestFullscreen`
    is not available on an iPhone for anything but video, so the class below is what
    actually delivers the mode and the browser's own full screen is a bonus on the
    platforms that grant it.

    IT HIDES THE SITE'S OWN FURNITURE TOO -- the toolbar and the footer sit OUTSIDE
    #kc-root, which is why these three rules are the only ones in this file not
    scoped to it. That is safe here and nowhere else: kids.css is loaded by exactly
    one template. */
/*  MEASURED, NOT LISTED FROM MEMORY: full screen was built, the page was rendered
    with it on, and everything still painted was read off the DOM. Four things had
    survived that should not have -- the site's floating menu button and its nav,
    the cookie bar, and this tool's OWN control row, which had just been moved out
    of the tab row and so was no longer covered by hiding the tabs. */
html.kc-fsmode .tbar,
html.kc-fsmode footer,
html.kc-fsmode #shell-open,
html.kc-fsmode #shell-nav,
html.kc-fsmode #cookiebar,
html.kc-fsmode #tabbar,
html.kc-fsmode .kc-barrow{display:none !important}
html.kc-fsmode body{padding-top:0;padding-bottom:0}
html.kc-fsmode .kc-fshide{display:none !important}
html.kc-fsmode #kc-root .kc-panel{margin-top:0}

/*  The strip holds the only two controls that must never be unreachable: the sound
    switch and the way out. FIXED, not sticky -- a child who has scrolled down must
    not have to find the top of the page to get out. */
#kc-root .kc-fsbar{position:fixed;top:0;left:0;right:0;z-index:40;
  display:flex;align-items:center;gap:8px;padding:7px 12px;
  background:var(--bg, var(--kc-paper));border-bottom:1px solid var(--kc-line)}
#kc-root .kc-fsbar b{flex:1 1 auto;font-size:14px;font-weight:800;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#kc-root .kc-fsbar .kc-pill{flex:0 0 auto;cursor:pointer}
#kc-root .kc-fsx{background:var(--kc-mango);color:#4a3200;border-color:transparent}

/*  AND THE POINT OF THE MODE: the thing being played with gets the room that the
    hidden controls gave back. Both numbers below come from the rendered page.

    THE PAINTING grows from its 620px cap to the width the panel actually has, and
    is capped by HEIGHT as well -- an 80vh-wide canvas on a wide monitor would put
    the brush buttons below the fold, which is the opposite of the ask.

    THE MEMORY BOARD is capped by height for the same reason, and it HAS to be,
    because the first full-screen render of a 4x4 board ran the score line off the
    bottom of the screen. The row count varies with the size he chose (3, 4, 5 or 6
    rows), so the board cannot be capped by one number: `--kc-mrows` is set by
    newMem() and the width is worked back from the height a row may have. */
html.kc-fsmode #kc-root .kc-cvwrap{max-width:min(100%, calc(100vh - 190px))}
/*  THE 200 IS DERIVED, NOT CHOSEN. With this cap the board's height works out to
    (viewport - 200 + (rows-1) x 10). Above it sits the strip at 48 and the panel's
    own padding; below it the score line at 46. Six rows is the worst case, so the
    constant has to be at least 128 + 50 = 178 for the score to stay on screen --
    200 leaves a margin, and a signed-in child has more room again because the
    sign-in notice that a guest sees is not there. Measured at 1180x900 and 390x760,
    at 16 cards and at 24: the first constant tried was 150 and the score ran off
    the bottom in three of those four. */
html.kc-fsmode #kc-root .kc-mgrid{
  max-width:min(560px, calc((100vh - 200px) * 3 / var(--kc-mrows, 4)))}
html.kc-fsmode #kc-root{padding-top:50px}

/* ---------------------------------------------------------------- screens */
#kc-root .kc-scr{display:none}
#kc-root .kc-scr.kc-on{display:block;animation:kc-rise .28s var(--kc-e) both}
@keyframes kc-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
#kc-root .kc-panel{background:var(--kc-paper);border:1px solid var(--kc-line);border-radius:var(--kc-r);
  padding:15px;box-shadow:var(--kc-sh);margin-bottom:13px}
#kc-root .kc-lab{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--kc-mute);margin:14px 0 8px}
#kc-root .kc-lab:first-child{margin-top:0}
#kc-root .kc-note{color:var(--kc-mute);font-size:12.5px;font-weight:600;display:block}
/* V930 -- the guest line. It sits above everything, it is the only new thing a
   guest sees, and it is gold rather than red: nothing has gone wrong. */
#kc-root .kc-lock{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:12px 14px;
  border:1px solid color-mix(in srgb, var(--kc-mango) 40%, var(--kc-line));
  background:color-mix(in srgb, var(--kc-mango) 10%, transparent);
  border-radius:var(--kc-r);font-size:13.5px;font-weight:700}
#kc-root .kc-lock svg{width:19px;height:19px;color:var(--kc-mango-t);flex:0 0 auto}
#kc-root .kc-lock a{color:inherit;text-decoration:underline;text-underline-offset:2px}
#kc-root .kc-mid{justify-content:center;text-align:center}
#kc-root .kc-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ------------------------------------------------------------------ home */
#kc-root .kc-hello{display:flex;align-items:center;gap:12px;background:var(--kc-paper);
  border:1px solid var(--kc-line);border-radius:var(--kc-r);padding:13px 15px;margin-bottom:14px;
  box-shadow:var(--kc-sh)}
#kc-root .kc-ava{width:48px;height:48px;border-radius:15px;background:var(--kc-card);display:grid;
  place-items:center;font-size:25px;flex:0 0 auto}
#kc-root .kc-who{flex:1;min-width:0}
#kc-root .kc-who b{display:block;font-size:17px;font-weight:800;letter-spacing:-.2px}
#kc-root .kc-who small{color:var(--kc-mute);font-size:12px;font-weight:700}
#kc-root .kc-kids{display:flex;gap:6px;flex:0 0 auto}
#kc-root .kc-kids button{width:35px;height:35px;border-radius:12px;border:1px solid var(--kc-line);
  background:var(--kc-card);font-size:16px;cursor:pointer;display:grid;place-items:center}
#kc-root .kc-kids button.kc-on{box-shadow:0 0 0 2.5px var(--kc-violet);border-color:transparent}
#kc-root .kc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
#kc-root .kc-tile{border:1px solid var(--kc-line);background:var(--kc-paper);border-radius:var(--kc-r);
  padding:11px 11px 13px;text-align:left;cursor:pointer;box-shadow:var(--kc-sh);display:flex;
  flex-direction:column;gap:8px;transition:transform .16s var(--kc-e)}
#kc-root .kc-tile:hover{transform:translateY(-3px)}
#kc-root .kc-tile:active{transform:none}
#kc-root .kc-tile .kc-art{height:84px;border-radius:14px;display:grid;place-items:center;background:var(--kc-tint)}
#kc-root .kc-tile .kc-art svg{width:64px;height:64px}
#kc-root .kc-tile b{font-size:15px;font-weight:800;letter-spacing:-.2px}
#kc-root .kc-tile small{color:var(--kc-mute);font-size:11.5px;font-weight:600;line-height:1.3}
#kc-root .kc-bar{height:6px;background:var(--kc-card);border-radius:99px;overflow:hidden;margin-top:auto}
#kc-root .kc-bar i{display:block;height:100%;border-radius:99px;background:var(--kc-acc)}
#kc-root .kc-parent{margin-top:14px;width:100%;display:flex;align-items:center;gap:11px;
  border:1px dashed var(--kc-line);background:transparent;border-radius:var(--kc-r);padding:13px;
  cursor:pointer;text-align:left}
#kc-root .kc-parent svg{width:21px;height:21px;color:var(--kc-violet-t)}
#kc-root .kc-parent b{font-size:13.5px;font-weight:800;display:block}
#kc-root .kc-parent small{color:var(--kc-mute);font-size:11.5px;font-weight:600}

/* -------------------------------------------------------------- controls */
#kc-root .kc-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:13px}
#kc-root .kc-chip{border:1px solid var(--kc-line);background:var(--kc-card);border-radius:999px;
  padding:8px 15px;font-weight:800;font-size:13px;cursor:pointer;transition:all .16s var(--kc-e)}
#kc-root .kc-chip.kc-on{background:var(--kc-violet-f);border-color:var(--kc-violet-f);color:#fff}
#kc-root .kc-btn{border:1px solid var(--kc-line);background:var(--kc-card);border-radius:13px;
  padding:10px 14px;font-weight:800;font-size:13.5px;cursor:pointer;display:inline-flex;
  align-items:center;gap:7px;transition:transform .13s var(--kc-e)}
#kc-root .kc-btn:active{transform:translateY(2px)}
#kc-root .kc-btn svg{width:16px;height:16px}
#kc-root .kc-btn.kc-on{border-color:var(--kc-violet);box-shadow:inset 0 0 0 1px var(--kc-violet);
  color:var(--kc-violet-t)}
#kc-root .kc-btn.kc-go{background:var(--kc-leaf);border-color:transparent;color:#07301e}
#kc-root .kc-btn.kc-sun{background:var(--kc-mango);border-color:transparent;color:#4a3200}
#kc-root .kc-btn.kc-warn{color:var(--kc-blossom-t)}
#kc-root .kc-in{border:1px solid var(--kc-line);background:var(--kc-card);color:var(--kc-ink);
  border-radius:12px;padding:10px 13px;font:inherit;font-weight:800;width:92px;text-align:center}

/* ----------------------------------------------------------------- paint */
#kc-root .kc-strip{display:flex;gap:9px;overflow:auto;padding:2px 2px 9px;scrollbar-width:thin}
#kc-root .kc-strip button{flex:0 0 auto;border:1px solid var(--kc-line);background:var(--kc-card);
  border-radius:13px;padding:7px 9px;cursor:pointer;display:grid;gap:5px;justify-items:center;width:76px}
#kc-root .kc-strip canvas,#kc-root .kc-sheetbody canvas{border-radius:8px;background:#fff}
#kc-root .kc-strip span{font-size:10.5px;font-weight:800;color:var(--kc-mute);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:62px}
#kc-root .kc-strip button.kc-on{border-color:var(--kc-violet);box-shadow:0 0 0 1px var(--kc-violet)}
#kc-root .kc-strip button.kc-on span{color:var(--kc-violet-t)}
#kc-root .kc-strip .kc-more{background:rgba(138,108,240,.12);border-color:rgba(138,108,240,.4)}
#kc-root .kc-strip .kc-more i{width:48px;height:36px;border-radius:8px;background:var(--kc-card);
  display:grid;place-items:center;color:var(--kc-violet-t);font-weight:900;font-size:14px;font-style:normal}
#kc-root .kc-strip .kc-more span{color:var(--kc-violet-t)}

#kc-root .kc-paint{display:grid;gap:14px;margin-top:4px}
#kc-root .kc-cvwrap{position:relative;background:#fff;border:1px solid var(--kc-line);
  border-radius:var(--kc-r);overflow:hidden;box-shadow:var(--kc-sh)}
#kc-root .kc-cvwrap canvas{display:block;width:100%;height:auto;touch-action:none}

/* THE TOOL CURSORS. His ask, and the reason they are data URIs rather than files:
   a cursor that 404s falls back to the default silently, so a child would see the
   arrow and nobody would ever know which release broke it. These cannot 404.
   Each one is white-filled with a dark outline so it reads on any colour the child
   has already painted, and the hotspot is the working end -- the brush's tip, the
   bucket's lip, the rubber's corner -- not the middle of the picture. */
#kc-root .kc-cvwrap.t-brush canvas{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path d='M4 26 L8 18 L20 5 a3.2 3.2 0 0 1 4.6 4.6 L11.6 22 Z' fill='%23ffffff' stroke='%232b2546' stroke-width='2' stroke-linejoin='round'/><path d='M8 18 L11.6 22' stroke='%232b2546' stroke-width='2'/></svg>") 4 26, crosshair}
#kc-root .kc-cvwrap.t-fill canvas{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path d='M5 25 L3 19 L13 8 l9 9 -10 8 z' fill='%23ffffff' stroke='%232b2546' stroke-width='2' stroke-linejoin='round'/><path d='M10 5 L19 14' stroke='%232b2546' stroke-width='2' stroke-linecap='round'/><path d='M25 17c0 1.8 2 2.8 2 4.6a2.3 2.3 0 0 1-4.6 0c0-1.8 2-2.8 2-4.6 z' fill='%23ffffff' stroke='%232b2546' stroke-width='1.8'/></svg>") 4 25, crosshair}
#kc-root .kc-cvwrap.t-erase canvas{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><g transform='rotate(-38 14 16)'><rect x='4' y='11' width='19' height='11' rx='2.5' fill='%23ffffff' stroke='%232b2546' stroke-width='2'/><path d='M13.5 11 v11' stroke='%232b2546' stroke-width='2'/></g></svg>") 5 25, crosshair}
#kc-root .kc-cvwrap.t-stamp canvas{cursor:copy}

/* THE BADGE. On a tablet there is no cursor at all, so this is the half of his ask
   that actually renders on the device this tool is used on. It names the tool as
   well as drawing it -- an icon alone asks a four-year-old to recognise a bucket. */
#kc-root .kc-cvbadge{position:absolute;top:9px;left:9px;display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.94);border:1px solid rgba(43,37,70,.16);border-radius:999px;
  padding:5px 11px 5px 8px;font-size:12px;font-weight:800;color:#2b2546;pointer-events:none;
  box-shadow:0 2px 8px rgba(43,37,70,.18)}
#kc-root .kc-cvbadge svg{width:15px;height:15px}
#kc-root .kc-cvbadge .kc-dot{width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 1px rgba(43,37,70,.25)}

#kc-root .kc-sw{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}
#kc-root .kc-sw5{grid-template-columns:repeat(5,1fr)}
#kc-root .kc-sw button{aspect-ratio:1;border-radius:50%;border:2px solid var(--kc-paper);cursor:pointer;
  box-shadow:0 0 0 1.5px var(--kc-line);transition:transform .16s var(--kc-e),box-shadow .16s var(--kc-e);padding:0}
#kc-root .kc-sw button:hover{transform:scale(1.08)}
#kc-root .kc-sw button.kc-on{box-shadow:0 0 0 2.5px var(--kc-ink);transform:scale(1.12)}
#kc-root .kc-stk{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
#kc-root .kc-stk button{aspect-ratio:1;font-size:19px;background:var(--kc-card);
  border:1px solid var(--kc-line);border-radius:11px;cursor:pointer}
#kc-root .kc-stk button.kc-on{border-color:var(--kc-violet);box-shadow:0 0 0 1px var(--kc-violet)}
#kc-root .kc-stk button[disabled]{opacity:.32;cursor:default}
#kc-root .kc-save{margin-top:16px}

/* ----------------------------------------------------------------- learn */
#kc-root .kc-lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px}
#kc-root .kc-lgrid button{aspect-ratio:1;border:1px solid var(--kc-line);background:var(--kc-paper);
  border-radius:13px;font-weight:800;font-size:21px;cursor:pointer;box-shadow:var(--kc-sh)}
#kc-root .kc-lgrid button.kc-done{border-color:var(--kc-leaf);color:var(--kc-leaf)}
#kc-root .kc-big{display:flex;gap:14px;align-items:center;background:var(--kc-paper);
  border:1px solid var(--kc-line);border-radius:var(--kc-r);padding:16px;margin-bottom:13px;
  box-shadow:var(--kc-sh)}
#kc-root .kc-letter{font-size:60px;font-weight:900;line-height:.9;color:var(--kc-violet-t)}
#kc-root .kc-bw{flex:1}
#kc-root .kc-bw b{font-size:20px;font-weight:800;display:block}
#kc-root .kc-bw small{color:var(--kc-mute);font-size:12px;font-weight:700}
#kc-root .kc-bemoji{font-size:42px}
#kc-root .kc-ask{font-size:17px;font-weight:800;text-align:center;margin:0 0 13px}
#kc-root .kc-ask b{color:var(--kc-violet-t)}
#kc-root .kc-quiz{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:11px}
#kc-root .kc-quiz2{grid-template-columns:repeat(2,1fr)}
#kc-root .kc-quiz button{border:1px solid var(--kc-line);background:var(--kc-card);border-radius:16px;
  padding:18px 8px;font-weight:900;font-size:28px;cursor:pointer;transition:all .14s var(--kc-e)}
#kc-root .kc-quiz button:active{transform:translateY(2px)}
#kc-root .kc-quiz button.kc-ok{border-color:var(--kc-leaf);color:var(--kc-leaf)}
#kc-root .kc-quiz button.kc-no{border-color:var(--kc-blossom);color:var(--kc-blossom-t)}
/*  V938, HIS ASK: *"in 123, increase the size of images, birds, etc and reduce
    sizwe of optoins"*. The things being counted were 32px and the four answer
    buttons were 28px in an 18px-padded box -- so the buttons were the loudest
    thing on a screen whose question is "how many birds". The objects now scale
    with the viewport and the answers sit back. */
#kc-root .kc-objs{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;
  font-size:clamp(40px,11vw,64px);line-height:1;
  border:1px dashed var(--kc-line);border-radius:14px;padding:18px 16px;min-height:120px;
  align-items:center}
/*  The answers, smaller -- but NOT below the touch floor this site measures
    against, which is why it is the font and the padding coming down and a
    min-height going in rather than a straight shrink. */
#kc-root .kc-quiz.kc-quizs button{font-size:21px;padding:11px 8px;min-height:52px}

/*  V938: the 1-100 wall. The letter wall's grid, narrower boxes -- "100" is three
    characters where "W" is one, so the same 54px minimum would give five across on
    a phone and a lot of empty box. */
#kc-root .kc-wallp{margin-top:11px}
#kc-root .kc-nb{margin-bottom:10px}
#kc-root .kc-ngrid{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))}
#kc-root .kc-ngrid button{font-size:17px}
#kc-root #kc-tcv,#kc-root #kc-ncv{display:block;width:100%;height:auto;background:#fff;
  border:1px solid var(--kc-line);border-radius:14px;touch-action:none}
#kc-root .kc-prog{height:10px;background:var(--kc-card);border-radius:99px;margin-top:11px;overflow:hidden}
#kc-root .kc-prog i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--kc-violet),var(--kc-leaf));transition:width .2s var(--kc-e)}
#kc-root .kc-hint{text-align:center;font-size:12.5px;font-weight:700;color:var(--kc-mute);margin-top:7px}
#kc-root .kc-hint.kc-ok{color:var(--kc-leaf)}

/* ---------------------------------------------------------------- shapes */
#kc-root .kc-shg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#kc-root .kc-shg button{aspect-ratio:1;border:1px solid var(--kc-line);background:var(--kc-card);
  border-radius:14px;display:grid;place-items:center;cursor:pointer;padding:11px;transition:all .18s var(--kc-e)}
#kc-root .kc-shg button.kc-got{opacity:.3;transform:scale(.9)}
#kc-root .kc-shg svg{width:100%;height:100%}

/* ---------------------------------------------------------------- memory */
/*  V938 --- HIS BUG: *"when i click on the card. its not showing any images, its
    black only"*.

    THE PICTURE WAS THERE AND THE CARD WAS THE PROBLEM. A flipped card took
    `--kc-paper`, which in the dark theme is #0f3d2d -- a near-black green -- and
    the glyph sat at a fixed 28px in a card about 120px tall. Beside eleven bright
    purple cards, that reads as an empty black rectangle; on a phone, where the
    card is half the size, it reads as nothing at all.

    SO A TURNED-OVER CARD IS LIGHT IN BOTH THEMES, which is what a turned-over card
    looks like, and the picture is sized OFF THE CARD rather than pinned in pixels.
    The ground is a fixed near-white rather than a theme token on purpose: the whole
    point of the face is that it is the opposite of the back, and a token that goes
    dark at night takes that away. The dark-theme text token cannot be used on it
    either, so the card's own ink is stated with its ground.

    NO CHECK COULD HAVE CAUGHT THIS. The class was applied, the text content was
    right and the computed colour was right. It was only wrong to look at. */
#kc-root .kc-mgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#kc-root .kc-mcard{aspect-ratio:3/4;border-radius:14px;border:1px solid transparent;cursor:pointer;
  background:linear-gradient(145deg,#9b82f5,#7355e0);display:grid;place-items:center;padding:0;
  transition:background .2s var(--kc-e),box-shadow .2s var(--kc-e),transform .12s var(--kc-e)}
#kc-root .kc-mcard:active{transform:scale(.96)}
/*  The face is its own element, hidden outright rather than coloured away --
    `color:transparent` hides an emoji by accident, not by rule, and the next glyph
    that is not an emoji would have shown straight through it. */
#kc-root .kc-mface{visibility:hidden;line-height:1;
  font-size:clamp(30px,8.5vw,54px)}
#kc-root .kc-mcard.kc-up .kc-mface,
#kc-root .kc-mcard.kc-gone .kc-mface{visibility:visible}
#kc-root .kc-mcard.kc-up{background:#fdfcff;box-shadow:0 0 0 3px var(--kc-mango)}
#kc-root .kc-mcard.kc-gone{background:#eef7f0;box-shadow:0 0 0 3px var(--kc-leaf);opacity:.75}
/*  Two players: a matched pair keeps the colour of whoever turned it, so the board
    itself is the scoreboard and neither child has to read a number to know. */
#kc-root .kc-mcard.kc-gone.kc-w1{box-shadow:0 0 0 3px #35b6d4;background:#e8f6fb}
#kc-root .kc-mcard.kc-gone.kc-w2{box-shadow:0 0 0 3px #ff7a93;background:#fdeef1}

/*  V938: the controls row, under the cards -- his *"all three in same row towards
    the buttom"*. It wraps rather than scrolls, because a control that has scrolled
    off a tablet is a control a child cannot find. */
/*  HIS WORDS: *"all three in same row towards the buttom"*. On a laptop it is one
    row and this rule is what keeps it one -- the shared `.kc-row` wraps by default,
    which put New game, the two dropdowns and the score on three lines. It still
    wraps on a phone, deliberately: four controls on a 390px line would each be
    about 85px, and a dropdown a thumb cannot hit is worse than a second line. */
#kc-root .kc-mbar{margin-top:12px;gap:10px;flex-wrap:nowrap;justify-content:center}
@media (max-width:640px){#kc-root .kc-mbar{flex-wrap:wrap}}
#kc-root .kc-sel{display:inline-flex;align-items:center;gap:7px;background:var(--kc-card);
  border:1px solid var(--kc-line);border-radius:999px;padding:5px 7px 5px 13px;
  font-size:13px;font-weight:800;color:var(--kc-ink)}
/*  V945: THROUGH THE SWITCH, not a bare size. This select beat the site's
    iOS ratchet when Kids Zone shipped -- a field under 16px makes Safari
    ZOOM THE PAGE on tap, which on a child's screen full of tiles is the
    worst place for it to happen. His 02-Oct ruling stands either way:
    13.5px on a laptop, 16px on a touch screen, one token, no media query
    of its own. */
#kc-root .kc-sel select{border:0;background:transparent;color:var(--kc-ink);font:inherit;
  font-size:var(--fld-fs,13.5px);font-weight:800;padding:5px 4px;cursor:pointer;min-height:34px}
#kc-root .kc-sel select:focus:not(:focus-visible){ outline: none; }
/*  NOT inline-flex, which is what the first version used and which ate the spaces
    around the <b>: in a flex container the whitespace between items is dropped, so
    "0 flips" rendered as "0flips". inline-block keeps it running text, which is
    what it is. */
#kc-root .kc-mscore{font-size:14px;font-weight:800;color:var(--kc-ink);
  display:inline-block;line-height:34px}
#kc-root .kc-mscore b{color:var(--kc-mango-t)}
/*  The turn line sits between the cards and the controls and changes every turn,
    which is why it is not in the row with two things that never change. */
#kc-root .kc-mturn{margin-top:11px;text-align:center;font-size:15px;font-weight:900;
  border-radius:999px;padding:7px 14px;align-self:center}
#kc-root .kc-mturn.kc-p1{background:#e8f6fb;color:#0d5b73}
#kc-root .kc-mturn.kc-p2{background:#fdeef1;color:#8d1f36}
#kc-root .kc-mturn.kc-mdone{background:var(--kc-mango);color:#2a1e00}

/* ------------------------------------------------- stickers and the fridge */
#kc-root .kc-sgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#kc-root .kc-sgrid div{aspect-ratio:1;border-radius:14px;background:var(--kc-card);
  border:1px solid var(--kc-line);display:grid;place-items:center;font-size:28px}
#kc-root .kc-sgrid div.kc-lock{border-style:dashed;color:var(--kc-mute);font-size:12px;font-weight:800}
#kc-root .kc-fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
#kc-root .kc-fgrid figure{margin:0;border:1px solid var(--kc-line);border-radius:14px;overflow:hidden;
  background:#fff;position:relative}
#kc-root .kc-fgrid img{display:block;width:100%;height:auto}
#kc-root .kc-fgrid figcaption{position:absolute;left:0;right:0;bottom:0;padding:5px 8px;font-size:11px;
  font-weight:800;color:#2b2546;background:rgba(255,255,255,.88)}
#kc-root .kc-fgrid .kc-del{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:9px;
  border:0;background:rgba(255,255,255,.92);color:#b3203a;cursor:pointer;font-weight:900;display:none}
#kc-root .kc-manage .kc-del{display:block}
#kc-root .kc-empty{color:var(--kc-mute);font-size:13px;font-weight:700;text-align:center;padding:18px}

/* ---------------------------------------------------------------- parent */
#kc-root .kc-plist{display:grid;gap:9px;margin-bottom:6px}
#kc-root .kc-prow{display:flex;gap:12px;align-items:center;background:var(--kc-paper);
  border:1px solid var(--kc-line);border-radius:14px;padding:13px;box-shadow:var(--kc-sh)}
#kc-root .kc-prow b{font-size:13.5px;font-weight:800;display:block}
#kc-root .kc-prow small{color:var(--kc-mute);font-size:12px;font-weight:600;display:block;margin-top:1px}
#kc-root .kc-prow .kc-right{margin-left:auto;font-weight:800;font-size:12.5px;color:var(--kc-violet-t);white-space:nowrap}
#kc-root #kc-pkids .kc-krow{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--kc-line)}
#kc-root #kc-pkids .kc-krow:last-child{border-bottom:0}
#kc-root #kc-pkids .kc-krow b{flex:1;font-weight:800;font-size:14px}

/* ------------------------------------------------------------- the picker */
#kc-root .kc-sheet{position:fixed;inset:0;z-index:60;background:rgba(10,12,16,.55)}
#kc-root .kc-sheetin{position:absolute;left:0;right:0;bottom:0;max-height:86%;background:var(--kc-paper);
  border-radius:22px 22px 0 0;display:flex;flex-direction:column;
  animation:kc-up .26s var(--kc-e);padding-bottom:env(safe-area-inset-bottom)}
@keyframes kc-up{from{transform:translateY(36px);opacity:.5}to{transform:none;opacity:1}}
#kc-root .kc-sheethd{display:flex;align-items:center;gap:10px;padding:15px 15px 11px;
  border-bottom:1px solid var(--kc-line)}
#kc-root .kc-sheethd b{font-size:16px;font-weight:800;flex:1}
#kc-root .kc-sheetbody{overflow:auto;padding:13px 15px 22px}
#kc-root .kc-pcat{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--kc-mute);margin:14px 0 8px}
#kc-root .kc-pcat:first-child{margin-top:0}
#kc-root .kc-pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
#kc-root .kc-pgrid button{border:1px solid var(--kc-line);background:var(--kc-card);border-radius:13px;
  padding:7px;cursor:pointer;display:grid;gap:5px;justify-items:center}
#kc-root .kc-pgrid button.kc-on{border-color:var(--kc-violet);box-shadow:0 0 0 1px var(--kc-violet)}
#kc-root .kc-pgrid canvas{width:100%;height:auto}
#kc-root .kc-pgrid span{font-size:11px;font-weight:800;color:var(--kc-mute)}

/* ------------------------------------------------------------------- fx */
#kc-root .kc-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,8px);
  background:#2b2546;color:#fff;padding:10px 17px;border-radius:999px;font-weight:800;font-size:13px;
  z-index:70;opacity:0;pointer-events:none;transition:all .25s var(--kc-e)}
#kc-root .kc-toast.kc-on{opacity:1;transform:translate(-50%,0)}
#kc-root .kc-fx{position:fixed;inset:0;pointer-events:none;z-index:65;overflow:hidden}
#kc-root .kc-fx i{position:absolute;width:9px;height:13px;border-radius:2px;
  animation:kc-fall 1.15s cubic-bezier(.3,.5,.6,1) forwards}
@keyframes kc-fall{to{transform:translateY(640px) rotate(600deg);opacity:0}}
@media (prefers-reduced-motion:reduce){
  #kc-root *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ------------------------------------------------------------- wider than a phone */
@media(min-width:900px){
  #kc-root .kc-grid{grid-template-columns:repeat(4,1fr)}
  #kc-root .kc-tile .kc-art{height:100px}
  #kc-root .kc-tile .kc-art svg{width:74px;height:74px}
  #kc-root .kc-paint{grid-template-columns:minmax(0,1fr) 300px}
  #kc-root .kc-cvwrap{max-width:620px}
  #kc-root #kc-tcv,#kc-root #kc-ncv,#kc-root .kc-prog{max-width:560px;margin-left:auto;margin-right:auto}
  #kc-root .kc-quiz{grid-template-columns:repeat(4,1fr)}
  #kc-root .kc-quiz2{grid-template-columns:repeat(2,1fr);max-width:420px;margin-left:auto;margin-right:auto}
  /*  V938: FOUR ACROSS ON EVERY SCREEN, and the width is capped instead.
      It was eight on a laptop, chosen when the deck was always 12 or 16 -- which
      made 16 cards two rows of eight, and the new sizes ragged (6/6/4 at a
      six-wide grid). He named the shapes himself: 4x3, 4x4, 4x5, 4x6. A grid
      whose dropdown says "4 x 4" and whose screen shows six across is a control
      that lies, so the columns are pinned and the CARDS stop growing instead. */
  #kc-root .kc-mgrid{grid-template-columns:repeat(4,1fr);max-width:560px;margin:0 auto}
  #kc-root .kc-sgrid{grid-template-columns:repeat(8,1fr)}
  #kc-root .kc-shg{grid-template-columns:repeat(6,1fr)}
  #kc-root .kc-fgrid{grid-template-columns:repeat(4,1fr)}
  #kc-root .kc-lgrid{grid-template-columns:repeat(auto-fill,minmax(62px,1fr))}
  #kc-root .kc-sheetin{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);
    width:760px;max-height:78%;border-radius:22px;animation:none}
  #kc-root .kc-pgrid{grid-template-columns:repeat(6,1fr)}
}