/* =====================================================================
   Kids Corner — shared design system              site/games/kids/kids.css
   One bright "sticker book" world (deliberately no dark mode): every colour
   is set explicitly. Components are prefixed kk-. Game-specific styles stay
   inline in each game page.
   ===================================================================== */
:root{
  color-scheme:light;
  /* palette (spec §2) */
  --cream:#FFF6E5; --ink:#22264B; --ink-2:#4A4F7A; --white:#FFFFFF;
  --sun:#FFC53D; --sun-d:#E0A21A; --sun-l:#FFF0C7;
  --coral:#FF6B5B; --coral-d:#D94A3B; --coral-l:#FFE3DE; --coral-ink:#B83224;
  --mint:#22C4A1; --mint-d:#139477; --mint-l:#D5F5EC; --mint-ink:#0B7560;
  --sky:#3B9BFF; --sky-d:#1F74D1; --sky-l:#DCEDFF;
  --grape:#8B5CF6; --grape-d:#6A3DD6; --grape-l:#ECE4FF;
  --pink:#FF8FB1; --pink-d:#E0668C;
  --sand:#F7D9A0; --sand-d:#E6BF77; --palm:#2E9E6B; --palm-d:#1F7A50;
  --date:#7A3B17; --date-hi:#B5652F;
  --night:#141A4A; --night-2:#2B2F8F; --oasis-sky:#BFE6FF;
  --grey:#ECE6DA; --grey-d:#D6CDBB; --grey-ink:#8E8778;
  --line:rgba(34,38,75,.10);
  /* per-game key colour (themes below) */
  --accent:var(--grape); --accent-d:var(--grape-d); --accent-l:var(--grape-l); --accent-tc:#FFFFFF;
  /* shape */
  --shadow-sticker:0 10px 0 -2px rgba(34,38,75,.12),0 18px 40px -18px rgba(34,38,75,.35);
  --shadow-soft:0 6px 0 -1px rgba(34,38,75,.10);
  --edge:0 4px 0 rgba(34,38,75,.13);
  --r-card:24px; --r-tile:20px;
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  /* type (spec §3) */
  --font-fun:'Baloo Bhaijaan 2','IBM Plex Sans Arabic',Tahoma,system-ui,sans-serif;
  --font-body:'IBM Plex Sans Arabic','Baloo Bhaijaan 2',Tahoma,system-ui,sans-serif;
  --fs-13:13px; --fs-15:15px; --fs-18:18px; --fs-24:24px; --fs-32:32px; --fs-44:44px;
  --fs-q:clamp(56px,14vw,96px);
  /* layout */
  --gutter:16px; --col:720px; --wide:1080px;
}
.kk-theme-rocket{--accent:var(--sky); --accent-d:var(--sky-d); --accent-l:var(--sky-l); --accent-tc:var(--ink)}
.kk-theme-share{--accent:#3DBE7A; --accent-d:#26965A; --accent-l:#DBF3E5; --accent-tc:var(--ink)}
.kk-theme-shapes{--accent:#FF9F43; --accent-d:#C96A12; --accent-l:#FFE9D2; --accent-tc:var(--ink)}
.kk-theme-bakery{--accent:var(--pink); --accent-d:#C94A73; --accent-l:#FFE3EC; --accent-tc:var(--ink)}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--cream)}
body{margin:0;min-height:100vh;background-color:var(--cream);
  background-image:radial-gradient(rgba(34,38,75,.055) 1.4px,transparent 1.7px);background-size:22px 22px;
  color:var(--ink);font-family:var(--font-fun);font-size:var(--fs-18);line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
:focus-visible{outline:4px solid var(--grape);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
::selection{background:var(--sun);color:var(--ink)}
html.kk-lock,html.kk-lock body{overflow:hidden}
.kk-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.kk-tab{font-variant-numeric:tabular-nums}
/* a run made only of numbers and signs ("٣ / ١٣") — keeps logical LTR order with Eastern digits too */
.kk-nums{display:inline-block;direction:ltr;unicode-bidi:bidi-override;white-space:nowrap;font-variant-numeric:tabular-nums}
.kk-ico{display:inline-block;width:1.2em;height:1.2em;vertical-align:middle;flex:none}
html[dir="rtl"] .kk-flip{transform:scaleX(-1)}

/* ---------- layout helpers ---------- */
.kk-main{width:100%;max-width:calc(var(--col) + 2*var(--gutter));margin:0 auto;padding:16px var(--gutter) 40px}
.kk-main--wide{max-width:calc(var(--wide) + 2*var(--gutter))}
.kk-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.kk-stack{display:flex;flex-direction:column;gap:16px}
.kk-center{text-align:center}
.kk-screen{display:block}

/* ---------- type ---------- */
.kk-h1{font:800 var(--fs-44)/1.1 var(--font-fun)}
.kk-h2{font:800 var(--fs-32)/1.15 var(--font-fun)}
.kk-h3{font:800 var(--fs-24)/1.2 var(--font-fun)}
.kk-lead{font:600 var(--fs-18)/1.5 var(--font-fun);color:var(--ink-2)}
.kk-small{font:400 var(--fs-15)/1.75 var(--font-body);color:var(--ink-2)}
.kk-tiny{font:500 var(--fs-13)/1.6 var(--font-body);color:var(--ink-2)}
.kk-kicker{display:inline-flex;align-items:center;gap:8px;padding:4px 14px;border-radius:999px;background:#fff;box-shadow:var(--edge);font:700 var(--fs-15)/1.4 var(--font-fun);color:var(--ink-2)}
/* big title with a white sticker outline */
.kk-sticker-text{text-shadow:
  3px 0 0 #fff,-3px 0 0 #fff,0 3px 0 #fff,0 -3px 0 #fff,
  2.2px 2.2px 0 #fff,-2.2px 2.2px 0 #fff,2.2px -2.2px 0 #fff,-2.2px -2.2px 0 #fff,
  0 8px 0 rgba(34,38,75,.14)}

/* ---------- header (sticky, one line at 360 px) ---------- */
.kk-header{position:sticky;top:0;z-index:40;background:var(--cream);border-bottom:3px solid rgba(34,38,75,.06);box-shadow:0 8px 18px -16px rgba(34,38,75,.45)}
.kk-header-in{display:flex;align-items:center;gap:10px;max-width:calc(var(--wide) + 2*var(--gutter));min-height:62px;margin:0 auto;padding:8px var(--gutter)}
.kk-back{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding-block:6px;padding-inline:10px 16px;border-radius:999px;background:#fff;box-shadow:var(--edge);
  font:700 var(--fs-15)/1 var(--font-fun);color:var(--ink);text-decoration:none;white-space:nowrap;transition:transform .08s,box-shadow .08s,background .15s}
.kk-back:hover{background:var(--sun-l)}
.kk-back:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(34,38,75,.13)}
.kk-back .kk-ico{width:22px;height:22px}
.kk-title{flex:1;min-width:0;font:800 var(--fs-24)/1.15 var(--font-fun);color:var(--ink);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kk-toggles{display:flex;gap:6px;flex:none}
.kk-tog{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 8px;border-radius:14px;background:#fff;box-shadow:var(--edge);touch-action:manipulation;
  font:800 var(--fs-15)/1 var(--font-fun);color:var(--ink);font-variant-numeric:tabular-nums;transition:transform .08s,box-shadow .08s,background .15s,color .15s}
.kk-tog:hover{background:var(--sun-l)}
.kk-tog:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(34,38,75,.13)}
.kk-tog .kk-ico{width:24px;height:24px}
.kk-tog.is-off{color:var(--grey-ink)}
.kk-header--hub .kk-title{opacity:0;transition:opacity .2s}
.kk-header--hub.is-past .kk-title{opacity:1}
@media (max-width:420px){
  .kk-header-in{gap:8px}
  .kk-back{width:44px;padding:0;justify-content:center}
  .kk-back-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .kk-title{font-size:20px}
  .kk-tog{padding:0 6px}
  .kk-header--hub .kk-back{width:auto;padding-inline:10px 14px}
  .kk-header--hub .kk-back-label{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
  .kk-header--hub .kk-title{display:none}
  .kk-header--hub .kk-toggles{margin-inline-start:auto}
}

/* ---------- candy buttons ---------- */
.kk-btn{--c:var(--sun);--cd:var(--sun-d);--tc:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;margin-bottom:6px;padding:8px 26px;
  border-radius:999px;background:var(--c);color:var(--tc);box-shadow:0 6px 0 var(--cd);
  font:800 var(--fs-18)/1.1 var(--font-fun);text-decoration:none;text-align:center;white-space:nowrap;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;transition:transform .08s ease,box-shadow .08s ease,filter .15s}
.kk-btn:hover{filter:brightness(1.05) saturate(1.05)}
.kk-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--cd)}
.kk-btn .kk-ico{width:24px;height:24px}
.kk-btn--coral{--c:var(--coral);--cd:var(--coral-d)}
.kk-btn--mint{--c:var(--mint);--cd:var(--mint-d)}
.kk-btn--sky{--c:var(--sky);--cd:var(--sky-d)}
.kk-btn--grape{--c:var(--grape-d);--cd:#4C25AE;--tc:#fff}   /* the darker grape: white text on it is 6.5:1 */
.kk-btn--pink{--c:var(--pink);--cd:var(--pink-d)}
.kk-btn--accent{--c:var(--accent);--cd:var(--accent-d);--tc:var(--accent-tc)}
.kk-btn--white{--c:#fff;--cd:rgba(34,38,75,.16)}
.kk-btn--ink{--c:var(--ink);--cd:#0E1130;--tc:#fff}
.kk-btn--lg{min-height:64px;padding:10px 32px;font-size:var(--fs-24)}
.kk-btn--lg .kk-ico{width:28px;height:28px}
.kk-btn--sm{min-height:44px;margin-bottom:4px;padding:6px 18px;font-size:var(--fs-15);box-shadow:0 4px 0 var(--cd)}
.kk-btn--sm:active{transform:translateY(3px);box-shadow:0 1px 0 var(--cd)}
.kk-btn--sm .kk-ico{width:20px;height:20px}
.kk-btn--block{display:flex;width:100%}
.kk-btn--icon{width:56px;padding:0}
.kk-btn--icon.kk-btn--sm{width:44px}
.kk-btn[disabled],.kk-btn[aria-disabled="true"]{filter:grayscale(.7);opacity:.55;cursor:not-allowed}
.kk-btn[disabled]:active,.kk-btn[aria-disabled="true"]:active{transform:none;box-shadow:0 6px 0 var(--cd)}
/* the in-play hint: one look in both games (sun candy + bulb), a full 56-px target; the word shows on wider screens.
   (Stop / Exit in the same bar stay 44 px on purpose: a smaller, quieter target the child does not hit by accident,
   and it only opens a "Stop this round?" question.) */
.kk-hintbtn{flex:none;min-width:56px;height:56px;min-height:56px;padding:0 18px;gap:8px}
.kk-hintbtn .kk-ico{width:28px;height:28px}
@media (max-width:420px){
  .kk-hintbtn{width:56px;padding:0}
  .kk-hint-l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* start-screen actions, same in both games: Play spans the row on phones, Learn | Play | Challenge from 600 px */
.kk-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 12px;max-width:560px;margin:18px auto 0}
.kk-actions .kk-btn{white-space:normal;line-height:1.15;padding-inline:12px}
.kk-actions .kk-act-play{grid-column:1/-1}
@media (min-width:600px){
  .kk-actions{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);align-items:end;max-width:none}
  .kk-actions .kk-act-play{grid-column:auto}
  .kk-actions .kk-act-learn{order:-1}
}
.kk-linkbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 4px;font:600 var(--fs-15)/1.4 var(--font-body);color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.kk-linkbtn:hover{color:var(--ink)}
.kk-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 12px;border-radius:999px;background:var(--accent-l);color:var(--ink);font:700 var(--fs-15)/1.5 var(--font-fun)}
.kk-chip .kk-ico{width:18px;height:18px}

/* ---------- sticker cards, panels, scenes ---------- */
.kk-card{position:relative;background:#fff;border:4px solid #fff;border-radius:var(--r-card);box-shadow:var(--shadow-sticker)}
.kk-card--pad{padding:20px}
@media (max-width:400px){.kk-card--pad{padding:16px 12px}}
.kk-panel{background:#fff;border-radius:var(--r-tile);padding:16px;box-shadow:var(--shadow-soft)}
.kk-tilt-l,.kk-tilt-r{transition:transform .28s var(--ease-pop)}
.kk-tilt-l{transform:rotate(-1.5deg)}
.kk-tilt-r{transform:rotate(1.5deg)}
.kk-tilt-l:hover,.kk-tilt-l:focus-within,.kk-tilt-r:hover,.kk-tilt-r:focus-within{transform:rotate(0) translateY(-4px)}
.kk-scene{position:relative;overflow:hidden;border-radius:var(--r-card);border:4px solid #fff;box-shadow:var(--shadow-sticker);isolation:isolate}
.kk-scene--night{background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%)}
.kk-scene--night::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 28% 62%,#fff 98%,transparent),
    radial-gradient(2px 2px at 44% 30%,#FFE9A8 98%,transparent),radial-gradient(1.3px 1.3px at 63% 14%,#fff 98%,transparent),
    radial-gradient(1.7px 1.7px at 78% 48%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 90% 22%,#fff 98%,transparent),
    radial-gradient(1.5px 1.5px at 18% 84%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 55% 78%,#fff 98%,transparent),
    radial-gradient(1.8px 1.8px at 86% 82%,#FFE9A8 98%,transparent),radial-gradient(1.1px 1.1px at 36% 8%,#fff 98%,transparent);
  animation:kk-twinkle 3.2s ease-in-out infinite alternate}
.kk-scene--oasis{background:linear-gradient(180deg,var(--oasis-sky) 0%,#E3F4FF 58%,var(--sand) 58%,#F2CD8B 100%)}

/* ---------- segmented control (Choices ⇄ Type) ---------- */
.kk-seg{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 3px var(--line),0 4px 0 rgba(34,38,75,.08)}
.kk-seg-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:6px 18px;border-radius:999px;
  font:800 var(--fs-18)/1 var(--font-fun);color:var(--ink-2);transition:background .15s,color .15s,box-shadow .15s}
.kk-seg-btn .kk-ico{width:22px;height:22px}
.kk-seg-keys{padding:3px 6px;border-radius:7px;background:var(--grey);font-size:var(--fs-13);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.kk-seg-btn[aria-pressed="true"]{background:var(--grape-d);color:#fff;box-shadow:0 4px 0 #4C25AE}
.kk-seg-btn[aria-pressed="true"] .kk-seg-keys{background:rgba(255,255,255,.22)}
.kk-seg-btn:not([aria-pressed="true"]):hover{background:var(--grape-l);color:var(--ink)}

/* ---------- table picker ---------- */
.kk-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media (min-width:560px){.kk-picker{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}}
.kk-pick{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-width:0;min-height:98px;padding:8px 2px 8px;
  border-radius:var(--r-tile);background:#fff;border:3px solid #fff;box-shadow:0 5px 0 rgba(34,38,75,.12);
  transition:transform .12s var(--ease-pop),box-shadow .12s,background .15s,border-color .15s;touch-action:manipulation}
.kk-pick:hover{background:#FFFCF3}
.kk-pick:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(34,38,75,.12)}
.kk-pick[aria-pressed="true"]{background:var(--sun-l);border-color:var(--sun);box-shadow:0 5px 0 var(--sun-d);transform:translateY(-3px)}
.kk-pick-art{position:relative;display:grid;place-items:center;width:100%;max-width:56px;aspect-ratio:1/1}
.kk-pick-art svg{width:100%;height:100%;display:block;overflow:visible}
/* white numbers with a solid ink outline: readable on every planet, the pale ×0 and the yellow ×1 included */
.kk-pick-num{position:absolute;inset:0;display:grid;place-items:center;font:800 24px/1 var(--font-fun);color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),1.5px 1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px -1.5px 0 var(--ink),0 3px 0 var(--ink)}
.kk-pick-num.is-ringed{padding-bottom:12%}
/* ÷ tiles: the number is "served" on a plate */
.kk-picker--div .kk-pick-art svg{position:absolute;left:0;right:0;bottom:0;height:auto}
.kk-picker--div .kk-pick-num{inset:0 0 26% 0;font-size:27px;color:var(--date);
  text-shadow:2px 0 0 #fff,-2px 0 0 #fff,0 2px 0 #fff,0 -2px 0 #fff,1.5px 1.5px 0 #fff,-1.5px 1.5px 0 #fff,1.5px -1.5px 0 #fff,-1.5px -1.5px 0 #fff}
.kk-picker--div .kk-pick--mix .kk-pick-art svg{bottom:4%}
.kk-pick-word{font:800 var(--fs-15)/1.1 var(--font-fun);color:var(--ink)}
.kk-pick-mix{position:relative;display:block;width:100%;height:100%}
.kk-pick-mix svg{position:absolute;width:58%;height:58%}
.kk-pick-mix svg:nth-child(1){top:0;left:4%}
.kk-pick-mix svg:nth-child(2){top:8%;right:0}
.kk-pick-mix svg:nth-child(3){bottom:0;left:24%}
.kk-pick--mix .kk-pick-art{max-width:50px}
.kk-pick .kk-stars{margin-top:auto}
/* the smallest phones (320 px): slimmer tiles and switch, so the start screens never scroll sideways */
@media (max-width:340px){
  .kk-picker{gap:6px}
  .kk-pick{min-height:88px;padding:6px 1px;border-radius:16px}
  .kk-pick-num{font-size:21px}
  .kk-picker--div .kk-pick-num{font-size:23px}
  .kk-seg-btn{gap:6px;padding:6px 14px}
  .kk-seg-keys{display:none}
  /* fold-phone cover screens (~280px): the hub's back pill drops to its arrow like the games' */
  .kk-header--hub .kk-back{width:44px;padding:0;justify-content:center}
  .kk-header--hub .kk-back-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---------- math expressions + the answer box ---------- */
.kk-expr{direction:ltr;unicode-bidi:isolate;display:inline-flex;align-items:center;justify-content:center;gap:.22em;white-space:nowrap;
  font-family:var(--font-fun);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.kk-x-op{color:var(--accent-d)}
.kk-x-t{font-weight:700}
.kk-blank{display:inline-grid;place-items:center;min-width:1.3em;height:1.18em;padding:.06em .16em 0;border-radius:.22em;background:#fff;color:var(--grape);
  border:.05em dashed var(--grape);box-shadow:0 .06em 0 rgba(34,38,75,.12);font-variant-numeric:tabular-nums;transition:background .15s,color .15s,border-color .15s}
.kk-blank.is-typing{color:var(--ink);border-style:solid;border-color:var(--grape)}
.kk-blank.is-right{background:var(--mint);border:.05em solid var(--mint-d);color:var(--ink)}
.kk-blank.is-reveal{background:var(--mint-l);border:.05em solid var(--mint);color:var(--mint-ink)}
.kk-blank.is-wrong{background:var(--coral-l);border:.05em solid var(--coral);color:var(--coral-ink)}
.kk-q{display:flex;justify-content:center;align-items:center;max-width:100%;font-size:var(--fs-q);font-weight:800;line-height:1;color:var(--ink);white-space:nowrap}

/* ---------- answer pad: bubbles ---------- */
.kk-pad{width:100%}
.kk-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kk-bubble{--e:var(--sky);--ed:var(--sky-d);position:relative;min-height:72px;margin-bottom:6px;border-radius:22px;background:#fff;border:3px solid var(--e);box-shadow:0 6px 0 var(--ed);
  font:800 var(--fs-44)/1 var(--font-fun);color:var(--ink);font-variant-numeric:tabular-nums;touch-action:manipulation;
  transition:transform .08s ease,box-shadow .08s ease,background .15s,opacity .2s}
.kk-bubble span{display:block;padding-top:.08em}
.kk-bubble--c1{--e:var(--grape);--ed:var(--grape-d)}
.kk-bubble--c2{--e:var(--sun);--ed:var(--sun-d)}
.kk-bubble--c3{--e:var(--pink);--ed:var(--pink-d)}
.kk-bubble:hover{background:#FBFAFF}
.kk-bubble:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ed)}
.kk-bubble.is-armed{background:var(--sun-l);transform:translateY(-3px);box-shadow:0 9px 0 var(--ed)}
.kk-bubble.is-wrong{--e:var(--grey-d);--ed:var(--grey-d);background:var(--grey);color:var(--grey-ink);cursor:default}
.kk-bubble.is-wrong.kk-shake{--e:var(--coral);--ed:var(--coral-d);background:var(--coral-l);color:var(--coral-ink)}
.kk-bubble.is-right{--e:var(--mint-d);--ed:var(--mint-d);background:var(--mint);color:var(--ink)}
.kk-bubble.is-reveal{--e:var(--mint);--ed:var(--mint-d);background:var(--mint-l);color:var(--ink);animation:kk-glow 1.3s ease-in-out infinite}
.kk-bubble:disabled{cursor:default}
.kk-bubble:disabled:not(.is-wrong):not(.is-right):not(.is-reveal){opacity:.45}
@media (max-width:380px){.kk-choices{gap:10px}.kk-bubble{min-height:64px;font-size:var(--fs-32)}}

/* ---------- answer pad: keypad ---------- */
.kk-keypad{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;direction:ltr}
.kk-key{display:grid;place-items:center;min-width:0;min-height:56px;margin-bottom:5px;border-radius:16px;background:#fff;border:3px solid #fff;box-shadow:0 5px 0 rgba(34,38,75,.16);
  font:800 var(--fs-32)/1 var(--font-fun);color:var(--ink);font-variant-numeric:tabular-nums;touch-action:manipulation;transition:transform .07s ease,box-shadow .07s ease,background .12s}
.kk-key:hover{background:#FBFAFF}
.kk-key:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(34,38,75,.16);background:var(--sun-l)}
.kk-key .kk-ico{width:30px;height:30px}
.kk-key--back{background:var(--grey);border-color:var(--grey);color:var(--ink-2)}
.kk-key--back:hover{background:#E4DCCB}
.kk-key--ok{background:var(--mint);border-color:var(--mint);box-shadow:0 5px 0 var(--mint-d);color:var(--ink)}
.kk-key--ok:hover{background:#2FD3AF}
.kk-key--ok:active{box-shadow:0 1px 0 var(--mint-d);background:var(--mint)}
.kk-pad[data-mode="type"] .kk-key[aria-disabled="true"]{opacity:.7}
.kk-display{display:flex;justify-content:center;margin-bottom:12px;font-size:var(--fs-44);line-height:1}
@media (max-width:380px){.kk-keypad{gap:6px}.kk-key{font-size:var(--fs-24);border-radius:14px}.kk-key .kk-ico{width:26px;height:26px}}

/* ---------- stars ---------- */
.kk-stars{display:inline-flex;align-items:center;gap:.1em;direction:ltr;line-height:1}
.kk-star{display:inline-block;width:1em;height:1em;overflow:visible;fill:var(--grey);stroke:var(--grey-d);stroke-width:1.4;stroke-linejoin:round}
.kk-star.is-on{fill:var(--sun);stroke:var(--sun-d)}
.kk-stars--xs{font-size:13px}
.kk-stars--sm{font-size:18px}
.kk-stars--md{font-size:24px}
.kk-stars--lg{font-size:44px;gap:.12em}
.kk-stars--xl{font-size:clamp(56px,17vw,84px);gap:.1em}
.kk-stars--lg .kk-star,.kk-stars--xl .kk-star{stroke:#fff;stroke-width:2;filter:drop-shadow(0 3px 0 rgba(34,38,75,.16))}
.kk-stars--lg .kk-star.is-on,.kk-stars--xl .kk-star.is-on{filter:drop-shadow(0 4px 0 var(--sun-d))}
.kk-stars--xl .kk-star:nth-child(2){transform:translateY(-14%)}
.kk-star.is-pop{animation:kk-star-pop .55s var(--ease-pop) both}
.kk-stars--xl .kk-star.is-pop:nth-child(2){animation-name:kk-star-pop-mid}

/* ---------- feedback line, toast, sparkles, confetti ---------- */
.kk-feedback{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;font:800 var(--fs-24)/1.2 var(--font-fun);text-align:center;color:var(--ink-2)}
.kk-feedback .kk-ico{width:28px;height:28px}
.kk-feedback.is-ok{color:var(--mint-ink)}
.kk-feedback.is-oops{color:var(--coral-ink)}
.kk-feedback.is-hint{color:var(--grape-d)}
.kk-feedback.is-in{animation:kk-pop-in .35s var(--ease-pop)}
.kk-toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));z-index:90;display:flex;align-items:center;gap:8px;width:max-content;max-width:calc(100vw - 32px);
  padding:10px 20px;border-radius:999px;background:var(--ink);color:#fff;font:700 var(--fs-18)/1.25 var(--font-fun);box-shadow:0 14px 30px -12px rgba(34,38,75,.7);
  transform:translate(-50%,160%);opacity:0;transition:transform .28s var(--ease-pop),opacity .2s;pointer-events:none}
.kk-toast.is-in{transform:translate(-50%,0);opacity:1}
.kk-toast .kk-ico{width:22px;height:22px;color:var(--sun)}
.kk-toast.is-ok .kk-ico{color:var(--mint)}
.kk-spark{position:fixed;z-index:96;width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none;animation:kk-spark .85s cubic-bezier(.2,.7,.3,1) forwards}
.kk-spark .kk-star,.kk-spark .kk-star.is-on{width:18px;height:18px;fill:currentColor;stroke:#fff;stroke-width:1.6}
.kk-confetti{position:fixed;inset:0;width:100%;height:100%;z-index:95;pointer-events:none}

/* ---------- round progress dots + challenge timer ---------- */
.kk-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;direction:ltr}
.kk-steps i{width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px rgba(34,38,75,.2);transition:background .2s,transform .2s}
.kk-steps i.is-done{background:var(--mint);box-shadow:inset 0 0 0 2px var(--mint-d)}
.kk-steps i.is-now{background:var(--sun);box-shadow:0 0 0 3px rgba(255,197,61,.35),inset 0 0 0 2px var(--sun-d);transform:scale(1.2)}
.kk-timer{display:flex;align-items:center;gap:10px;direction:ltr}
.kk-timer-ico .kk-ico{width:26px;height:26px;color:var(--ink-2)}
.kk-timer-bar{flex:1;height:16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px var(--line);overflow:hidden}
.kk-timer-bar i{display:block;height:100%;border-radius:inherit;background:var(--sun)}
.kk-timer-n{min-width:2.4ch;font:800 var(--fs-24)/1 var(--font-fun);text-align:center;font-variant-numeric:tabular-nums}
.kk-timer.is-low .kk-timer-bar i{background:var(--coral)}
.kk-timer.is-low .kk-timer-n{color:var(--coral-ink);animation:kk-pulse 1s ease-in-out infinite}

/* ---------- progress board ---------- */
.kk-board-sum{font:800 var(--fs-18)/1.3 var(--font-fun);color:var(--ink);margin-bottom:10px}
/* the grid fits a 320-px phone (cells ≈ 15 px; their numbers show from 600 px). If it ever has to scroll,
   the box is LTR like the table, so it opens on the row numbers in both languages. */
.kk-board-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;direction:ltr}
.kk-board{width:100%;border-collapse:separate;border-spacing:2px;table-layout:fixed;font-variant-numeric:tabular-nums}
.kk-board th{padding:3px 0;font:700 var(--fs-13)/1 var(--font-fun);color:var(--ink-2);text-align:center;white-space:nowrap}
@media (max-width:400px){.kk-board{border-spacing:1.5px}.kk-board th{font-size:12px;letter-spacing:-.02em}}
.kk-board .kk-board-corner{font-size:var(--fs-18);color:var(--accent-d)}
.kk-cell{height:24px;padding:0;overflow:hidden;border-radius:6px;text-align:center;vertical-align:middle;font:700 var(--fs-13)/1 var(--font-fun);color:var(--ink)}
.kk-cell.is-unseen{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(34,38,75,.12)}
.kk-cell.is-learning{background:var(--sun)}
.kk-cell.is-mastered{background:var(--mint)}
.kk-cell-n{opacity:0}
.kk-board tr.is-focus th{color:var(--accent-d);font-weight:800}
.kk-board tr.is-focus .kk-cell.is-unseen{box-shadow:inset 0 0 0 2px var(--accent)}
@media (min-width:600px){
  .kk-cell{height:34px}
  .kk-cell-n{opacity:1}
  .kk-cell.is-unseen .kk-cell-n{color:var(--grey-ink)}
}
.kk-board-note{margin:-4px 0 12px}
.kk-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font:600 var(--fs-15)/1.4 var(--font-fun);color:var(--ink-2)}
.kk-legend li{display:inline-flex;align-items:center;gap:6px}
.kk-sw{display:inline-block;width:16px;height:16px;border-radius:5px}
.kk-sw.is-unseen{background:#fff;box-shadow:inset 0 0 0 1.5px rgba(34,38,75,.25)}
.kk-sw.is-learning{background:var(--sun)}
.kk-sw.is-mastered{background:var(--mint)}

/* ---------- overlay / modal sheet ---------- */
.kk-overlay{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;padding:16px;background:rgba(34,38,75,0);transition:background .18s}
.kk-overlay.is-in{background:rgba(34,38,75,.5)}
@media (min-width:600px){.kk-overlay{align-items:center}}
.kk-modal{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;
  padding:22px 20px 16px;border-radius:28px;background:#fff;border:4px solid #fff;box-shadow:var(--shadow-sticker);
  opacity:0;transform:translateY(28px) scale(.98);transition:transform .24s var(--ease-pop),opacity .18s}
.kk-overlay.is-in .kk-modal{opacity:1;transform:none}
.kk-modal--sm{max-width:420px}
.kk-modal--lg{max-width:760px}
.kk-modal-x{position:absolute;top:12px;inset-inline-end:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--grey);color:var(--ink)}
.kk-modal-x:hover{background:#E2D9C6}
.kk-modal-x .kk-ico{width:22px;height:22px}
.kk-modal-title{padding-inline-end:56px;margin-bottom:12px;font:800 var(--fs-24)/1.25 var(--font-fun)}
.kk-modal-body{font-size:var(--fs-18)}
.kk-modal--confirm .kk-modal-body{font:500 var(--fs-15)/1.8 var(--font-body);color:var(--ink-2)}
.kk-modal-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-top:18px}

/* ---------- end-of-round screen ---------- */
.kk-end{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 0 16px;text-align:center}
.kk-end-stars{display:flex;justify-content:center;min-height:clamp(64px,19vw,96px);padding-top:8px}
.kk-end-title{font:800 var(--fs-44)/1.1 var(--font-fun);color:var(--ink);text-wrap:balance;text-shadow:3px 0 0 #fff,-3px 0 0 #fff,0 3px 0 #fff,0 -3px 0 #fff,0 7px 0 rgba(34,38,75,.12)}
.kk-end-line{max-width:34ch;font:600 var(--fs-18)/1.5 var(--font-fun);color:var(--ink-2)}
.kk-end-best{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:999px;background:#fff;box-shadow:var(--edge);font:800 var(--fs-18)/1.3 var(--font-fun);color:var(--ink-2)}
.kk-end-best.is-new{background:var(--sun-l);color:var(--ink)}
.kk-end-best .kk-ico{width:24px;height:24px;color:var(--sun-d)}
.kk-end-score b{display:block;font:800 var(--fs-q)/1 var(--font-fun);color:var(--ink);font-variant-numeric:tabular-nums;text-shadow:0 6px 0 var(--sun)}
.kk-end-score span{display:block;margin-top:6px;font:700 var(--fs-18)/1.3 var(--font-fun);color:var(--ink-2)}
.kk-end-missed{width:100%;max-width:520px;padding:14px 16px;border-radius:var(--r-tile);background:#fff;box-shadow:var(--shadow-soft)}
.kk-end-missed h3{margin-bottom:10px;font:800 var(--fs-18)/1.3 var(--font-fun);color:var(--ink-2)}
.kk-factlist{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.kk-factlist li{padding:7px 14px 5px;border-radius:14px;background:var(--cream);font-size:var(--fs-24)}
.kk-end-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 12px;margin-top:6px}

/* ---------- floating × ÷ = ★ decoration ---------- */
.kk-floaters{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.kk-floaters span{position:absolute;font:800 var(--fs-44)/1 var(--font-fun);opacity:.3;animation:kk-float 7s ease-in-out infinite alternate}
.kk-floaters span:nth-child(5n+1){color:var(--sky)}
.kk-floaters span:nth-child(5n+2){color:var(--coral)}
.kk-floaters span:nth-child(5n+3){color:var(--grape)}
.kk-floaters span:nth-child(5n+4){color:var(--sun-d)}
.kk-floaters span:nth-child(5n+5){color:var(--mint)}
.kk-floaters span:nth-child(1){top:12%;left:6%;font-size:56px;animation-duration:7.5s}
.kk-floaters span:nth-child(2){top:8%;right:10%;font-size:44px;animation-duration:6.4s;animation-delay:-2s}
.kk-floaters span:nth-child(3){top:58%;left:3%;font-size:40px;animation-duration:8.2s;animation-delay:-4s}
.kk-floaters span:nth-child(4){top:64%;right:5%;font-size:52px;animation-duration:7s;animation-delay:-1s}
.kk-floaters span:nth-child(5){top:30%;left:18%;font-size:32px;animation-duration:6.8s;animation-delay:-3s}
.kk-floaters span:nth-child(6){top:34%;right:20%;font-size:36px;animation-duration:7.7s;animation-delay:-5s}
.kk-floaters span:nth-child(7){top:82%;left:13%;font-size:32px;animation-duration:6.2s;animation-delay:-2.5s}
.kk-floaters span:nth-child(8){top:80%;right:14%;font-size:30px;animation-duration:8.6s;animation-delay:-6s}
@media (max-width:560px){.kk-floaters span:nth-child(n+5){display:none}.kk-floaters span{font-size:34px!important}}

/* ---------- footer ---------- */
.kk-footer{padding:24px var(--gutter) 36px;text-align:center;font:500 var(--fs-15)/1.6 var(--font-body);color:var(--ink-2)}
.kk-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin-bottom:4px}
.kk-footer a{display:inline-flex;align-items:center;min-height:44px;font:700 var(--fs-15)/1.4 var(--font-fun);color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}

/* ---------- players (v2): avatars, header chip, the player sheet, picture passcode, strip, lines ---------- */
/* an animal sticker: round, white sticker border, soft shadow (the SVG fills it; ears may be cropped by the circle) */
.kk-av{--av:40px;position:relative;display:inline-grid;place-items:center;flex:none;width:var(--av);height:var(--av);border-radius:50%;overflow:hidden;
  background:#fff;border:3px solid #fff;box-shadow:0 3px 0 rgba(34,38,75,.13),0 8px 16px -10px rgba(34,38,75,.45)}
.kk-av svg{display:block;width:100%;height:100%}
.kk-av--xs{--av:28px;border-width:2px;box-shadow:0 2px 0 rgba(34,38,75,.13)}
.kk-av--sm{--av:34px;border-width:2px;box-shadow:0 2px 0 rgba(34,38,75,.13)}
.kk-av--chip{--av:36px;border-width:2px;box-shadow:none}
.kk-av--md{--av:56px}
.kk-av--lg{--av:68px}
.kk-av--xl{--av:104px;border-width:5px}
/* "+ New player": a dashed empty sticker with a plus */
.kk-av--add{background:var(--cream);border:3px dashed var(--grey-d);box-shadow:none;color:var(--ink-2)}
.kk-av--add .kk-ico{width:44%;height:44%}

/* header chip, before the toggles. Above 560 px it shows the first name, and the name gives way (ellipsis) before the
   page title does: the title keeps a floor wide enough for its longest word on its 2 lines */
.kk-pchip{display:inline-flex;align-items:center;gap:8px;flex:0 1 auto;min-width:44px;max-width:170px;height:44px;padding-block:0;padding-inline:4px 14px;border-radius:999px;background:#fff;box-shadow:var(--edge);
  font:800 var(--fs-15)/1 var(--font-fun);color:var(--ink);touch-action:manipulation;transition:transform .08s,box-shadow .08s,background .15s}
.kk-pchip:hover{background:var(--sun-l)}
.kk-pchip:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(34,38,75,.13)}
.kk-pchip-name{min-width:0;max-width:7em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:.1em}
.kk-header.has-pchip .kk-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.1}
@media (min-width:561px){.kk-header.has-pchip .kk-title{min-width:3.5em}}
@media (max-width:560px){
  /* room for the chip: the back pills drop to their arrow and the chip to its avatar (labels stay for screen readers) */
  .kk-header.has-pchip .kk-back,.kk-header--hub.has-pchip .kk-back{width:44px;padding:0;justify-content:center}
  .kk-header.has-pchip .kk-back-label,.kk-header--hub.has-pchip .kk-back-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .kk-header.has-pchip .kk-title{font-size:20px}
  .kk-pchip{flex:none;width:44px;padding:0;justify-content:center}
  .kk-pchip-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media (max-width:420px){
  .kk-header.has-pchip .kk-title{font-size:18px}
  /* the hub's title stays hidden on phones (the hero carries the name), as without the chip */
  .kk-header--hub.has-pchip .kk-title{display:none}
  .kk-header--hub.has-pchip .kk-pchip{margin-inline-start:auto}
  .kk-header--hub.has-pchip .kk-toggles{margin-inline-start:0}
}
@media (max-width:340px){
  /* small phones: a little less air around the stickers so the game's title keeps its two lines */
  .kk-header.has-pchip .kk-header-in{gap:5px;padding-inline:10px}
  .kk-header.has-pchip .kk-toggles{gap:4px}
  .kk-header.has-pchip .kk-title{font-size:16px}
}
@media (max-width:315px){
  /* a folded phone's cover screen (≈280 px): no room for a readable title beside the stickers — it stays for screen readers */
  .kk-header.has-pchip .kk-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .kk-header.has-pchip .kk-pchip{margin-inline-start:auto}
}
/* installed on the home screen: a child stays inside Kids Corner */
html.kk-standalone .kk-header--hub .kk-back,html.kk-standalone .kk-footer nav,html.kk-standalone .kk-standalone-hide{display:none!important}
html.kk-standalone .kk-header--hub .kk-pchip,html.kk-standalone .kk-header--hub .kk-title{margin-inline-start:0}

/* the sheet: a back arrow mirrors the ✕ */
.kk-psheet{max-width:520px}
.kk-psheet-back{position:absolute;top:12px;inset-inline-start:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--grey);color:var(--ink)}
.kk-psheet-back:hover{background:#E2D9C6}
.kk-psheet-back .kk-ico{width:22px;height:22px}
.kk-psheet.has-back .kk-modal-title{padding-inline-start:56px}
.kk-psheet .kk-modal-title{min-height:44px;display:flex;align-items:center;overflow-wrap:anywhere}
@media (max-width:420px){.kk-psheet .kk-modal-title{font-size:21px}}

/* who's playing: big avatar buttons */
.kk-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;padding-top:6px}
.kk-pbtn,.kk-ptile{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:10px 4px 9px;border-radius:var(--r-tile);
  background:#fff;border:3px solid var(--line);box-shadow:0 4px 0 rgba(34,38,75,.08);touch-action:manipulation;transition:transform .12s var(--ease-pop),background .15s,border-color .15s}
.kk-pbtn:hover,.kk-ptile:hover{background:#FFFCF3}
.kk-pbtn:active,.kk-ptile:active{transform:translateY(3px)}
.kk-pbtn.is-on,.kk-ptile.is-on{background:var(--sun-l);border-color:var(--sun);box-shadow:0 4px 0 var(--sun-d)}
.kk-pbtn-name,.kk-ptile-n{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:800 var(--fs-15)/1.3 var(--font-fun);color:var(--ink)}
.kk-pbtn--new .kk-pbtn-name,.kk-ptile--new .kk-ptile-n{color:var(--ink-2);white-space:normal;line-height:1.15;text-align:center}
.kk-pnow{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:2px 9px;border-radius:999px;background:var(--mint);color:var(--ink);
  font:800 var(--fs-13)/1.4 var(--font-fun);white-space:nowrap;box-shadow:0 2px 0 var(--mint-d)}
.kk-pnow--in{position:static;transform:none;margin-inline-start:auto}
.kk-pmax{margin-top:12px;text-align:center}
.kk-psheet-foot{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:18px}
.kk-pguest{gap:10px;justify-content:flex-start;padding-inline:10px 18px}
.kk-pguest.is-on{--c:var(--sun-l);--cd:var(--sun)}
.kk-pmanage .kk-ico{width:18px;height:18px}

/* sheet heads: an avatar + a short line */
.kk-phead{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 14px}
.kk-phead-t{font:700 var(--fs-18)/1.35 var(--font-fun);color:var(--ink-2)}
.kk-phead-n{display:block;color:var(--ink);font-weight:800;overflow-wrap:anywhere}
.kk-pname{margin:-4px 0 12px;text-align:center;color:var(--ink)}
/* new-player steps: the dots fill in the reading direction, like the passcode slots */
.kk-pdots{margin:0 0 14px;direction:inherit}
/* the step's picture cue on the avatar: choose (grape pictures), again (sun arrow), didn't match (coral pictures) —
   a child who cannot read yet still sees that step 4 asks for the same pictures again */
.kk-pcue-wrap{position:relative;display:inline-grid;flex:none;margin-inline-end:8px}
.kk-pcue{position:absolute;bottom:-6px;inset-inline-end:-10px;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:3px solid #fff;
  box-shadow:0 2px 0 rgba(34,38,75,.16);color:var(--ink)}
.kk-pcue .kk-ico{width:18px;height:18px}
.kk-pcue--choose{background:var(--grape-l);color:var(--grape-d)}
.kk-pcue--repeat{background:var(--sun);animation:kk-pop-in .4s var(--ease-pop)}
.kk-pcue--repeat .kk-ico{width:20px;height:20px;stroke-width:3}
.kk-pcue--retry{background:var(--coral-l);color:var(--coral-ink);animation:kk-pop-in .4s var(--ease-pop)}
.kk-pforgot{margin-top:2px}

/* the picture passcode: 3 slots + a big back key, then the 3×3 pad (same layout in both languages) */
.kk-code{display:flex;flex-direction:column;align-items:center;gap:12px}
.kk-code-top{display:flex;align-items:center;justify-content:center;gap:12px}
.kk-code-slots{display:flex;gap:10px}
.kk-code-slot{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--cream);box-shadow:inset 0 0 0 3px var(--grey-d);transition:background .15s,box-shadow .15s}
.kk-code-slot.is-next{box-shadow:inset 0 0 0 3px var(--grape),0 0 0 4px var(--grape-l)}
.kk-code-slot.is-full{background:#fff;box-shadow:inset 0 0 0 3px var(--sun),0 4px 0 var(--sun-d);animation:kk-pop-in .3s var(--ease-pop)}
.kk-code-slot svg{width:44px;height:44px}
.kk-code-slots.is-wrong .kk-code-slot{background:var(--coral-l);box-shadow:inset 0 0 0 3px var(--coral)}
/* the 3 chosen pictures turn face down, and the "again" slots turn back up empty */
.kk-code-slots.is-flip .kk-code-slot{animation:kk-flip-out .24s ease-in forwards}
.kk-code-slots.is-flipin .kk-code-slot{animation:kk-flip-in .32s var(--ease-pop) both}
.kk-code-slots.is-flip .kk-code-slot:nth-child(2),.kk-code-slots.is-flipin .kk-code-slot:nth-child(2){animation-delay:.07s}
.kk-code-slots.is-flip .kk-code-slot:nth-child(3),.kk-code-slots.is-flipin .kk-code-slot:nth-child(3){animation-delay:.14s}
.kk-code-slots.is-repeat .kk-code-slot:not(.is-full){background:var(--sun-l)}
@keyframes kk-flip-out{to{transform:perspective(200px) rotateY(90deg)}}
@keyframes kk-flip-in{from{transform:perspective(200px) rotateY(-90deg)}to{transform:perspective(200px) rotateY(0)}}
.kk-code-back{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:var(--grey);color:var(--ink-2);box-shadow:0 4px 0 var(--grey-d);touch-action:manipulation;transition:transform .08s,box-shadow .08s,opacity .15s}
.kk-code-back:active{transform:translateY(3px);box-shadow:0 1px 0 var(--grey-d)}
.kk-code-back .kk-ico{width:30px;height:30px}
.kk-code-back:disabled{opacity:.4;cursor:default}
.kk-code-back:disabled:active{transform:none;box-shadow:0 4px 0 var(--grey-d)}
.kk-code-padwrap{position:relative;width:100%;display:flex;justify-content:center}
.kk-code-pad{display:grid;grid-template-columns:repeat(3,minmax(64px,92px));gap:10px;width:100%;max-width:296px;direction:ltr}
.kk-code-key{display:grid;place-items:center;aspect-ratio:1/1;min-height:64px;border-radius:20px;background:#fff;border:3px solid var(--line);box-shadow:0 5px 0 rgba(34,38,75,.14);
  touch-action:manipulation;transition:transform .07s ease,box-shadow .07s ease,background .12s}
.kk-code-key svg{width:76%;height:76%;pointer-events:none}
.kk-code-key:hover{background:#FFFCF3}
.kk-code-key:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(34,38,75,.14);background:var(--sun-l)}
.kk-code-key:disabled{opacity:.35;cursor:default}
.kk-code-msg{min-height:30px;font:800 var(--fs-18)/1.35 var(--font-fun);text-align:center;color:var(--ink-2)}
.kk-code-msg.is-oops{color:var(--coral-ink)}
.kk-code-msg.is-ok{color:var(--mint-ink)}
/* the 30-second pause after 5 wrong tries: a slow breathing circle and the seconds */
.kk-code-wait{position:absolute;inset:-6px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:24px;background:rgba(255,246,229,.94);text-align:center}
.kk-code-breath{position:absolute;width:184px;height:184px;border-radius:50%;background:var(--sky-l);animation:kk-breathe 5s ease-in-out infinite;z-index:0}
.kk-code-wait > :not(.kk-code-breath){position:relative;z-index:1}
.kk-code-secs{font:800 var(--fs-44)/1 var(--font-fun);color:var(--sky-d);font-variant-numeric:tabular-nums}
.kk-code-wait-t{font:800 var(--fs-24)/1.25 var(--font-fun);color:var(--ink)}
.kk-code-wait small{font:600 var(--fs-15)/1.4 var(--font-fun);color:var(--ink-2)}
@keyframes kk-breathe{0%,100%{transform:scale(.72)}50%{transform:scale(1)}}
/* a folded phone's cover screen (≈280 px): the slots and back key shrink so the row stays inside the sheet */
@media (max-width:300px){
  .kk-code-top{gap:8px}
  .kk-code-slots{gap:8px}
  .kk-code-slot,.kk-code-back{width:48px;height:48px;border-radius:15px}
  .kk-code-slot svg{width:36px;height:36px}
  .kk-code-back .kk-ico{width:26px;height:26px}
}

/* new player: the name field and the animals */
.kk-field-l{display:block;margin-bottom:8px;font:700 var(--fs-18)/1.35 var(--font-fun);color:var(--ink-2)}
.kk-field{display:block;width:100%;min-height:60px;padding:8px 16px;border-radius:18px;border:3px solid var(--grey-d);background:#fff;
  font:800 var(--fs-24)/1.3 var(--font-fun);color:var(--ink);-webkit-appearance:none;appearance:none}
.kk-field:focus{outline:none;border-color:var(--grape);box-shadow:0 0 0 4px var(--grape-l)}
.kk-field.is-bad{border-color:var(--coral);box-shadow:0 0 0 4px var(--coral-l)}
.kk-field-err{min-height:26px;margin-top:6px;font:700 var(--fs-15)/1.45 var(--font-fun);color:var(--coral-ink)}
.kk-field-note{display:flex;align-items:center;gap:6px;margin:0 0 14px}
.kk-field-note .kk-ico{width:16px;height:16px;color:var(--mint-ink)}
.kk-avgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 8px}
@media (max-width:300px){.kk-avgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* a sticker never spills out of its button on a very narrow sheet */
.kk-pbtn .kk-av,.kk-avbtn .kk-av{width:min(var(--av),100%);height:auto;aspect-ratio:1/1}
.kk-avbtn{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;min-height:64px;padding:8px 2px 6px;border-radius:18px;background:#fff;border:3px solid var(--line);touch-action:manipulation;transition:background .15s,border-color .15s,transform .12s var(--ease-pop)}
.kk-avbtn:active{transform:translateY(3px)}
.kk-avbtn[aria-pressed="true"]{background:var(--sun-l);border-color:var(--sun)}
.kk-avbtn-n{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 var(--fs-13)/1.3 var(--font-fun);color:var(--ink-2)}
.kk-pdone{display:flex;flex-direction:column;align-items:center;gap:12px;margin:4px 0 16px;text-align:center}
.kk-pdone .kk-av{animation:kk-pop-in .45s var(--ease-pop)}
.kk-padopt{margin:0 0 4px;padding:14px 14px 8px;border-radius:var(--r-tile);background:var(--sun-l);text-align:center}
.kk-padopt-q{font:800 var(--fs-18)/1.35 var(--font-fun)}
.kk-padopt-s{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font:800 var(--fs-24)/1 var(--font-fun)}
.kk-padopt-s .kk-star{width:26px;height:26px}
.kk-padopt-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin-top:12px}
.kk-pkept{display:flex;align-items:center;justify-content:center;gap:8px;margin:-4px 0 14px;font:800 var(--fs-18)/1.35 var(--font-fun);color:var(--ink)}
.kk-pkept .kk-ico{color:var(--sun-d)}

/* grown-up check */
.kk-gate-t{text-align:center}
.kk-gate-q{display:flex;justify-content:center;margin:12px 0 6px;font-size:var(--fs-44)}
.kk-gate-q .kk-expr{gap:.2em}
/* a phone-style pad (1 2 3 / 4 5 6 / 7 8 9 / ⌫ 0 ✓): keys stay wide on every phone */
.kk-gate-pad{grid-template-columns:repeat(3,minmax(0,1fr));max-width:330px;margin:6px auto 0}

/* manage players */
.kk-pman{display:flex;flex-direction:column;gap:8px}
.kk-prow{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:8px 12px;border-radius:18px;background:var(--cream);text-align:start;transition:background .15s}
.kk-prow:hover{background:var(--sun-l)}
.kk-prow-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font:800 var(--fs-18)/1.25 var(--font-fun)}
.kk-prow-n small{display:block;font:500 var(--fs-13)/1.4 var(--font-body);color:var(--ink-2)}
.kk-prow-s{display:inline-flex;align-items:center;gap:4px;font:800 var(--fs-15)/1 var(--font-fun);color:var(--ink-2)}
.kk-prow-s .kk-star{width:18px;height:18px}
.kk-prow > .kk-ico{width:20px;height:20px;color:var(--ink-2)}
.kk-pman-note{margin-top:14px}
.kk-pedit-head{display:flex;align-items:center;gap:14px;margin:2px 0 16px}
.kk-pedit-info{min-width:0}
.kk-pedit-n{font:800 var(--fs-24)/1.2 var(--font-fun);overflow-wrap:anywhere}
.kk-pedit-s{display:flex;flex-direction:column;gap:2px;margin-top:4px}
.kk-pstars{display:inline-flex;align-items:center;gap:6px;font:700 var(--fs-15)/1.4 var(--font-fun);color:var(--ink-2)}
.kk-pstars .kk-star{width:16px;height:16px}
.kk-pstars-g{min-width:6.5em}
.kk-pacts{display:flex;flex-direction:column;gap:4px}
.kk-pact{justify-content:flex-start;gap:12px;min-height:52px;padding-inline:18px}
.kk-pconfirm{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}

/* the hub's "Who's playing?" strip */
.kk-pstrip-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 12px;margin-bottom:14px;text-align:center}
.kk-pstrip-sub{font:600 var(--fs-15)/1.4 var(--font-fun);color:var(--ink-2)}
.kk-pstrip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 10px}
.kk-ptile{width:96px;padding-top:12px}
@media (max-width:400px){.kk-ptile{width:88px}.kk-pstrip-row{gap:14px 8px}}

/* a game's start screen: "Playing: Sara · switch" */
.kk-pline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;margin:12px auto 0;font:700 var(--fs-15)/1.3 var(--font-fun);color:var(--ink-2)}
.kk-pline b{color:var(--ink);font-weight:800}
.kk-pline-dot{color:var(--grey-ink)}
.kk-pline-sw{min-height:44px;padding-inline:6px;font-family:var(--font-fun);font-weight:800;color:var(--grape-d)}
/* the end screen: "Saved to Sara's stars" */
.kk-psaved{display:inline-flex;align-items:center;gap:8px;padding-block:4px;padding-inline:4px 14px;border-radius:999px;background:#fff;box-shadow:var(--edge);font:700 var(--fs-15)/1.3 var(--font-fun);color:var(--ink-2)}
.kk-psaved-ico{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mint-l);color:var(--mint-ink)}
.kk-psaved-ico .kk-ico{width:18px;height:18px}

/* ---------- v3: fractions, remainders, words inside expressions ---------- */
/* a stacked fraction: numerator over a bar over denominator — never "3/4" inline, so RTL/LTR cannot flip it */
.kk-frac{display:inline-flex;flex-direction:column;align-items:stretch;justify-content:center;vertical-align:middle;direction:ltr;unicode-bidi:isolate;
  line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.kk-frac-n,.kk-frac-d{display:block;text-align:center;padding:0 .14em}
.kk-frac-n{padding-bottom:.06em}
.kk-frac-d{padding-top:.1em}
.kk-frac-bar{display:block;height:.09em;min-height:2px;border-radius:.05em;background:currentColor}
.kk-frac .kk-blank{min-width:1.15em;height:1.08em}
.kk-expr .kk-frac{font-size:.6em}
.kk-frac--in{margin:0 .12em;font-size:.95em}
.kk-x-w{font-size:.55em;font-weight:700;color:var(--ink-2);padding:0 .08em}
.kk-sign{font-weight:800;direction:ltr;unicode-bidi:isolate}
/* "47 ÷ 5 = 9 R 2" — Arabic: the LTR expression, then «والباقي ٢» in the sentence's direction */
.kk-qrx{display:inline-flex;align-items:center;gap:.22em;white-space:nowrap}
/* «والباقي» is the key word of a remainder: never below 18 px, in ink (AA on cream and white) */
.kk-qrx-w{font-size:max(.45em,18px);font-weight:800;line-height:1.6;color:var(--ink)}
.kk-factlist .kk-qrx-w,.kk-recap .kk-qrx-w{font-size:max(.7em,15px)}
.kk-qr{display:inline-flex;align-items:baseline;justify-content:center;gap:.22em;white-space:nowrap;font-variant-numeric:tabular-nums}
.kk-qr small{font-size:.5em;font-weight:700;color:var(--ink-2)}
/* the box of a two-part answer that the keypad is filling */
.kk-blank.is-active{border-style:solid;border-color:var(--grape);background:#FBF8FF;box-shadow:0 0 0 .09em var(--grape-l),0 .06em 0 rgba(34,38,75,.12)}
.kk-blank[data-kk-tap]{cursor:pointer}
.kk-display--two{font-size:var(--fs-44)}
.kk-display--two .kk-frac{font-size:.72em}

/* ---------- v3: answer bubbles for remainders, fractions, words, signs and pictures ---------- */
.kk-bubble .kk-bv{display:flex;align-items:center;justify-content:center;min-height:100%;padding:0}
.kk-bubble .kk-frac{display:inline-flex}
.kk-bubble .kk-frac-n,.kk-bubble .kk-frac-d{padding-top:0}
.kk-bubble .kk-frac-d{padding-top:.1em}
.kk-bubble .kk-frac-bar{display:block}
.kk-bubble .kk-qr{display:inline-flex}
.kk-bubble .kk-sign{display:inline}
.kk-bubble--qr{font-size:var(--fs-32)}
.kk-bubble--frac{min-height:92px;font-size:30px}
.kk-bubble--word{min-height:64px;padding:8px 10px;font-size:var(--fs-24);line-height:1.15;text-wrap:balance}
.kk-bubble--sign{font-size:52px}
.kk-bubble--pic{min-height:108px;padding:6px}
.kk-bubble .kk-pickpic{display:block;width:84px;max-width:100%;height:84px}
/* the bubble's place (1–4): the key that picks it — shown where there is a keyboard */
.kk-bubble-k{position:absolute;top:5px;inset-inline-start:9px;display:none;font:700 12px/1 var(--font-fun);font-style:normal;color:var(--grey-ink)}
@media (hover:hover) and (pointer:fine){.kk-bubble-k{display:block}}
.kk-choices--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:380px){.kk-bubble--frac{min-height:84px;font-size:26px}.kk-bubble--word{font-size:var(--fs-18)}.kk-bubble--sign{font-size:44px}.kk-bubble--qr{font-size:28px}}
/* two-part Type mode: [→ the other box] on a row of its own, then the Level-1 keys 1 2 3 4 5 ⌫ / 6 7 8 9 0 ✓ */
.kk-key--sw{grid-column:1/-1;min-height:44px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;background:var(--grape-l);border-color:var(--grape-l);
  box-shadow:0 5px 0 #CBB8F7;font:800 var(--fs-15)/1.1 var(--font-fun);color:var(--grape-d)}
.kk-key--sw:hover{background:#E2D6FF}
.kk-key--sw .kk-ico{width:18px;height:18px}
.kk-key--sw span{white-space:nowrap;line-height:1.6}

/* ---------- v3: Level switch + stage / topic picker ---------- */
.kk-lvl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;max-width:560px;margin:0 auto;padding:6px;border-radius:26px;background:#fff;
  box-shadow:inset 0 0 0 3px var(--line),0 4px 0 rgba(34,38,75,.08)}
.kk-lvl-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:64px;padding:8px 10px;border-radius:20px;
  color:var(--ink-2);text-align:center;touch-action:manipulation;transition:background .15s,color .15s,box-shadow .15s,transform .08s}
.kk-lvl-btn b{font:800 var(--fs-18)/1.15 var(--font-fun)}
.kk-lvl-btn small{font:600 var(--fs-13)/1.3 var(--font-fun)}
.kk-lvl-btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-tc);box-shadow:0 5px 0 var(--accent-d)}
.kk-lvl-btn:not([aria-pressed="true"]):hover{background:var(--accent-l);color:var(--ink)}
.kk-lvl-btn:active{transform:translateY(3px)}
.kk-stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:560px){.kk-stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}}
@media (min-width:760px){.kk-stages--geo,.kk-stages--frac{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kk-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;min-height:124px;padding:12px 8px 10px;border-radius:var(--r-tile);
  background:#fff;border:3px solid #fff;box-shadow:0 5px 0 rgba(34,38,75,.12);text-align:center;touch-action:manipulation;
  transition:transform .12s var(--ease-pop),box-shadow .12s,background .15s,border-color .15s}
.kk-stage:hover{background:#FFFCF3}
.kk-stage:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(34,38,75,.12)}
.kk-stage[aria-pressed="true"]{background:var(--sun-l);border-color:var(--sun);box-shadow:0 5px 0 var(--sun-d);transform:translateY(-3px)}
.kk-stage-n{position:absolute;top:7px;inset-inline-start:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent-l);
  font:800 var(--fs-13)/1 var(--font-fun);color:var(--ink);font-variant-numeric:tabular-nums}
.kk-stage-art{display:flex;align-items:center;justify-content:center;width:100%;height:50px;font-size:25px;color:var(--ink)}
.kk-stage-art > svg{width:auto;max-width:76%;height:100%}
.kk-stage-art > .kk-fm--bar,.kk-stage-art > .kk-fm--line{width:84%;height:auto;max-height:100%}
.kk-stage-art .kk-expr .kk-frac{font-size:.72em}
.kk-stage-trio{display:flex;align-items:center;justify-content:center;gap:4px;height:100%}
.kk-stage-trio svg{width:auto;height:72%}
.kk-stage-mix .kk-ico{width:40px;height:40px;color:var(--accent-d)}
.kk-stage-name{font:800 var(--fs-15)/1.2 var(--font-fun);color:var(--ink);text-wrap:balance}
.kk-stage .kk-stars{margin-top:auto}

/* ---------- v3: shapes, solids, objects, angles, grids (SVG; size them with the box they sit in) ---------- */
.kk-shape,.kk-solid,.kk-obj,.kk-angle,.kk-net,.kk-grid,.kk-fm{display:block;width:100%;height:auto;overflow:visible}
.kk-sh-ax{stroke:var(--grape-d);stroke-width:2.6;stroke-dasharray:6 4;stroke-linecap:round;opacity:0;transition:opacity .25s}
.kk-sh-ax.is-on{opacity:1}
.kk-sh-ax.is-hl{opacity:1;stroke:var(--coral-d);stroke-width:3.4}
.kk-sh-side{fill:none;stroke:transparent;stroke-width:7;stroke-linecap:round;transition:stroke .2s}
.kk-sh-side.is-on{stroke:var(--mint-d)}
.kk-sh-side.is-hl{stroke:var(--coral)}
.kk-sh-v{fill:#fff;stroke:var(--ink);stroke-width:2.4;opacity:0;transition:opacity .2s}
.kk-sh-v.is-on{opacity:1}
.kk-sh-v.is-hl{opacity:1;fill:var(--sun);stroke-width:3}
.kk-sh-ra{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round;opacity:0}
.kk-sh-ra.is-on{opacity:1}
.kk-sh-ra.is-hl{opacity:1;stroke:var(--coral-d);stroke-width:3}
.kk-so-face{stroke:none;transition:fill .2s,fill-opacity .2s}
.kk-so-face.is-back{fill:none}
.kk-so-face.is-hl{fill:var(--sun);fill-opacity:.9}
.kk-so-face.is-back.is-hl{fill:var(--sun);fill-opacity:.4}
.kk-so-curve{stroke:none}
.kk-so-line{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.kk-so-edge{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s,stroke-width .2s}
.kk-so-edge.is-back{stroke-width:1.8;stroke-dasharray:4 3.5;opacity:.7}
.kk-so-edge.is-hl{stroke:var(--coral-d);stroke-width:4.4;opacity:1}
.kk-so-vert{fill:#fff;stroke:var(--ink);stroke-width:2;opacity:0;transition:opacity .2s}
.kk-so-vert.is-back{stroke-dasharray:2 1.6}
.kk-so-vert.is-on{opacity:1}
.kk-so-vert.is-hl{opacity:1;fill:var(--sun);stroke-width:2.6}
.kk-net-f{transition:filter .2s}
.kk-net-f.is-hl{filter:brightness(1.15) drop-shadow(0 0 3px rgba(255,197,61,.9))}
.kk-ang-ray{fill:none;stroke:var(--ink);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.kk-ang-mark{fill:var(--sun-l);stroke:var(--sun-d);stroke-width:2;stroke-linejoin:round}
.kk-grid-l{font-family:var(--font-fun);font-weight:800;fill:var(--ink)}
.kk-grid-c{transition:fill .2s}
.kk-grid-c.is-hl{fill:var(--mint)}

/* ---------- v3: fraction pictures + the maker (tap to colour / tap a mark) ---------- */
.kk-fm-l{font:800 8px var(--font-fun);fill:var(--ink)}
.kk-fmk{max-width:300px;margin:0 auto;border-radius:22px;transition:filter .25s}
.kk-fmk--bar{max-width:440px}
.kk-fmk--set{max-width:380px}
.kk-fmk--line{max-width:620px}
.kk-fm--tap .kk-fm-p{cursor:pointer;transition:fill .15s}
.kk-fm--tap .kk-fm-p:hover{filter:brightness(.96)}
.kk-fm-p:focus{outline:none}
.kk-fm--tap .kk-fm-p:focus-visible{stroke:var(--grape-d);stroke-width:3.6}
.kk-fm--line.kk-fm--tap .kk-fm-p:focus-visible{stroke-width:1.4;fill:rgba(139,92,246,.14)}
.kk-fmk.is-right{filter:drop-shadow(0 0 12px rgba(34,196,161,.6))}
.kk-fmk.is-right .kk-fm-p.is-on{fill:var(--mint)}
.kk-fmk.is-reveal .kk-fm-p.is-on{fill:var(--mint-l);stroke:var(--mint-d)}
.kk-fmk.is-right .kk-fm-dot,.kk-fmk.is-reveal .kk-fm-dot{fill:var(--mint)}
.kk-fmk.is-wrong{filter:drop-shadow(0 0 10px rgba(255,107,91,.55))}
/* a question's answer recap (end screen "practise these"): a little picture + the words */
.kk-recap{display:inline-flex;align-items:center;gap:8px;font:700 var(--fs-18)/1.3 var(--font-fun);color:var(--ink)}
.kk-recap-pic{display:block;flex:none;width:34px;height:34px}
/* wide fraction models keep their shape: a readable number line, a whole chocolate bar, a row of dates */
.kk-recap-pic.kk-fm--line{width:120px;height:auto}
.kk-recap-pic.kk-fm--bar,.kk-recap-pic.kk-fm--set{width:72px;height:auto}
.kk-recap .kk-frac{font-size:.95em}

/* ---------- Times Rocket, Level 2 learn: area model (.tr-am), sum row (.tr-sum, fitted to its width), column method (.tr-cm),
   ×10 strip (.tr-strip). Kept in the shared sheet, which every page caches, so the game page stays well under its size
   budget; .kk-theme-rocket scopes it and gives it the one class of weight it had as the page's own, later stylesheet ---------- */
.kk-theme-rocket .tr-chip--new{gap:8px;font:700 var(--fs-15)/1.2 var(--font-fun)}
.kk-theme-rocket .tr-chip--new .kk-ico{width:20px;height:20px;color:var(--grape-d)}
.kk-theme-rocket .tr-chip--new .kk-expr{font-size:var(--fs-18)}
.kk-theme-rocket .tr-tabs{display:flex;width:fit-content;max-width:100%;gap:4px;margin:12px auto 2px;padding:5px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 3px var(--line)}
.kk-theme-rocket .tr-tab{min-height:44px;padding:6px 16px;border-radius:999px;font:700 var(--fs-15)/1.2 var(--font-fun);color:var(--ink-2)}
.kk-theme-rocket .tr-tab[aria-selected="true"]{background:var(--grape-d);color:#fff;box-shadow:0 4px 0 #4C25AE}
.kk-theme-rocket .tr-tab:not([aria-selected="true"]):hover{background:var(--grape-l);color:var(--ink)}
.kk-theme-rocket .tr-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px}
.kk-theme-rocket .tr-strip-i{display:inline-flex;align-items:center;gap:6px}
.kk-theme-rocket .tr-strip-x{padding:6px 10px 4px;border-radius:12px;background:var(--cream);font-size:var(--fs-18)}
.kk-theme-rocket .tr-strip-x.is-at{background:var(--sky-l);box-shadow:inset 0 0 0 2px var(--sky)}
.kk-theme-rocket .tr-strip .kk-ico{width:18px;height:18px;color:var(--ink-2)}
.kk-theme-rocket .tr-strip-cap{margin-top:6px;font-size:var(--fs-15)}
.kk-theme-rocket .tr-am{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:30px auto;width:min(100%,440px);margin:12px auto 0;direction:ltr}
.kk-theme-rocket .tr-am-x{display:grid;place-items:center;font:800 var(--fs-18)/1 var(--font-fun);color:var(--accent-d)}
.kk-theme-rocket .tr-am-cl,.kk-theme-rocket .tr-am-rl{display:grid;gap:4px;font:800 var(--fs-18)/1 var(--font-fun)}
.kk-theme-rocket .tr-am-cl span,.kk-theme-rocket .tr-am-rl span{display:grid;place-items:center;min-width:0;min-height:0}
.kk-theme-rocket .tr-am-cl span{margin:0 3px 5px;border-bottom:3px solid var(--line)}
.kk-theme-rocket .tr-am-rl span{margin:3px 5px 3px 0;border-right:3px solid var(--line)}
.kk-theme-rocket .tr-am-bx{display:grid;gap:4px;min-width:0}
.kk-theme-rocket .tr-am-b{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:0;overflow:hidden;padding:2px;border-radius:12px;border:2.5px dashed rgba(34,38,75,.3);background:#fff;color:var(--ink-2);transition:background .3s,border-color .3s,transform .12s;touch-action:manipulation}
.kk-theme-rocket button.tr-am-b:hover{background:#FFFCF3;border-color:var(--accent)}
.kk-theme-rocket button.tr-am-b:active{transform:scale(.97)}
.kk-theme-rocket .tr-am-b.is-on{border-style:solid;color:var(--ink)}
.kk-theme-rocket .tr-am-sky.is-on,.kk-theme-rocket .tr-t--sky{background:var(--sky-l);border-color:var(--sky)}
.kk-theme-rocket .tr-am-grape.is-on,.kk-theme-rocket .tr-t--grape{background:var(--grape-l);border-color:var(--grape)}
.kk-theme-rocket .tr-am-mint.is-on,.kk-theme-rocket .tr-t--mint{background:var(--mint-l);border-color:var(--mint)}
.kk-theme-rocket .tr-am-sun.is-on,.kk-theme-rocket .tr-t--sun{background:var(--sun-l);border-color:var(--sun)}
.kk-theme-rocket .tr-am-e{position:relative;font-size:var(--fs-13)}
.kk-theme-rocket .is-big .tr-am-e{font-size:var(--fs-15)}
.kk-theme-rocket .tr-am-v{position:relative;font:800 clamp(18px,5.4vw,26px)/1 var(--font-fun);font-variant-numeric:tabular-nums}
.kk-theme-rocket .tr-am-b.is-new .tr-am-v,.kk-theme-rocket .tr-t--sum,.kk-theme-rocket .tr-cm-d.is-new{animation:kk-pop-in .45s var(--ease-pop)}
.kk-theme-rocket .tr-am-sub{position:absolute;inset:0;background:linear-gradient(to right,rgba(34,38,75,.22) 2px,transparent 2px) -1px 0/calc(100% / var(--nx)) 100%,linear-gradient(rgba(34,38,75,.22) 2px,transparent 2px) 0 -1px/100% calc(100% / var(--ny))}
.kk-theme-rocket .tr-qm{display:inline-grid;place-items:center;min-width:1.2em;height:1.12em;padding-top:.06em;border:.06em dashed var(--grape);border-radius:.22em;background:#fff;color:var(--grape)}
.kk-theme-rocket .tr-sum{display:flex;justify-content:center;justify-content:safe center;margin-top:12px;font-size:clamp(19px,5.6vw,26px)}
.kk-theme-rocket .tr-sum .kk-expr{white-space:nowrap}
.kk-theme-rocket .tr-t{padding:.1em .28em 0;border-radius:.3em}
.kk-theme-rocket .tr-t--sum{background:var(--mint)}
.kk-theme-rocket .tr-cap2{min-height:2.9em}
.kk-theme-rocket .tr-cap2 .kk-expr{margin-inline:3px;font-size:1.1em}
.kk-theme-rocket .tr-swap{margin-top:4px;font-size:var(--fs-15);color:var(--grape-d)}
.kk-theme-rocket .tr-steprow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;margin-top:8px}
.kk-theme-rocket .tr-steprow .kk-btn{margin-bottom:4px}
.kk-theme-rocket .tr-steprow .kk-linkbtn{font:700 var(--fs-15)/1.4 var(--font-fun)}
.kk-theme-rocket .tr-cm{position:relative;margin:14px auto 2px;font:800 clamp(32px,9.5vw,42px)/1 var(--font-fun);font-variant-numeric:tabular-nums}
.kk-theme-rocket .tr-cm-d{position:absolute;display:grid;place-items:center;width:.7em;height:1.06em;border-radius:.16em;transition:transform .75s cubic-bezier(.3,1.2,.5,1),opacity .3s}
.kk-theme-rocket .tr-cm-d small{font-size:.52em;color:var(--coral-ink)}
.kk-theme-rocket .tr-cm-d.is-x{color:var(--accent-d)}
.kk-theme-rocket .tr-cm-d.is-hl{background:var(--sun-l);box-shadow:inset 0 0 0 2px var(--sun)}
.kk-theme-rocket .tr-cm-d.is-dim{opacity:.2}
.kk-theme-rocket .tr-cm-rule{position:absolute;left:0;height:3px;border-radius:2px;background:var(--ink)}
.kk-theme-rocket .tr-ov2 .tr-am{width:min(100%,330px);margin-top:8px}
.kk-theme-rocket .tr-ov2 .tr-cap2{min-height:0;margin-top:6px;font-size:var(--fs-15)}
.kk-theme-rocket .tr-ov2 .tr-cm{margin-top:8px;font-size:30px}

/* ---------- motion ---------- */
.kk-shake{animation:kk-shake .45s ease-in-out}
.kk-pop{animation:kk-pop .45s var(--ease-pop)}
.kk-flame{transform-box:fill-box;transform-origin:50% 0;animation:kk-flame .16s ease-in-out infinite alternate}
@keyframes kk-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
@keyframes kk-pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes kk-pop-in{0%{transform:scale(.75);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes kk-star-pop{0%{transform:scale(0) rotate(-45deg)}60%{transform:scale(1.3) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@keyframes kk-star-pop-mid{0%{transform:translateY(-14%) scale(0) rotate(-45deg)}60%{transform:translateY(-14%) scale(1.3) rotate(8deg)}100%{transform:translateY(-14%) scale(1) rotate(0)}}
@keyframes kk-glow{0%,100%{box-shadow:0 6px 0 var(--ed),0 0 0 0 rgba(34,196,161,0)}50%{box-shadow:0 6px 0 var(--ed),0 0 0 9px rgba(34,196,161,.28)}}
@keyframes kk-pulse{50%{transform:scale(1.14)}}
@keyframes kk-flame{from{transform:scaleY(1) scaleX(1)}to{transform:scaleY(.8) scaleX(.94)}}
@keyframes kk-float{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-16px) rotate(8deg)}}
@keyframes kk-twinkle{from{opacity:.55}to{opacity:1}}
@keyframes kk-spark{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(1) rotate(160deg);opacity:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .kk-floaters span,.kk-flame,.kk-scene--night::before,.kk-code-breath{animation:none!important}
}