/* Alpha Academy Cambodia — English for Kindergarten
   ---------------------------------------------------------------------------
   The rest of the site is designed for a student who can read. This page is
   designed for one who cannot, so three rules run through everything below.

     1. Nothing important is smaller than a thumb. Every tappable thing is at
        least 64px, and the game answers are far bigger than that.
     2. The picture carries the meaning; the word sits under it as a caption.
        Shrink the window and the caption goes before the picture does.
     3. It has to be bright without becoming unreadable in dark mode, so the
        colour is in the borders, the fills and the emoji, while the text keeps
        using the site's --ink-* ramp, which already inverts itself.

   Namespaced kg-* throughout, because the shared stylesheet already owns
   .card, .tabs, .grid and .opt.                                            */

/* ------------------------------------------------------------- 1. tokens */
.kg-wrap{
  --font-round: "Fredoka", var(--font-display);
  --font-zh: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Heiti SC", var(--font-sans);
  --kg-r: 22px;                 /* the page's rounder corner   */
  --kg-r-lg: 34px;
  --kg-red:#ff5a5f; --kg-orange:#ff9f1c; --kg-yellow:#ffd23f;
  --kg-green:#2ec4b6; --kg-blue:#3a86ff; --kg-purple:#8f5cf7; --kg-pink:#ff70a6;
  --kg-paper: var(--surface);
  --kg-line: var(--ink-200);
  width:min(1180px,100%);margin-inline:auto;padding-inline:var(--gutter);
  font-size:1.05rem;
}
:root[data-theme="dark"] .kg-wrap{
  --kg-red:#ff7b80; --kg-orange:#ffb454; --kg-yellow:#ffdd6b;
  --kg-green:#4ad6c9; --kg-blue:#6ba4ff; --kg-purple:#a985ff; --kg-pink:#ff8fbb;
}

.kg-wrap h2,.kg-wrap h3,.kg-tab,.kg-opt,.kg-big{font-family:var(--font-round,var(--font-display))}

/* ------------------------------------------------- 1b. layout + side rail
   Same shape as the Chinese page: a sticky left column from 1080px, and
   below that a folded block above the lesson that closes again once you have
   picked something. */
.kg-layout{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr)}
.kg-main{min-width:0}

@media (min-width:1080px){
  .kg-layout{grid-template-columns:262px minmax(0,1fr);gap:1.8rem;align-items:start}
  .kg-side{
    position:sticky;top:96px;align-self:start;
    max-height:calc(100vh - 130px);display:flex;flex-direction:column;
  }
  .kg-outline{overflow-y:auto;overscroll-behavior:contain}
}

.kg-side{
  background:var(--kg-paper);border:2px solid var(--kg-line);
  border-radius:var(--kg-r);box-shadow:var(--shadow-xs);overflow:hidden;
}
.kg-side-head{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.6rem .7rem .6rem 1rem;border-bottom:2px solid var(--kg-line);background:var(--surface-2);
}
.kg-side.is-collapsed .kg-side-head{border-bottom:0}
.kg-side-head .ttl{
  font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-400);
}
.kg-side-toggle{
  appearance:none;cursor:pointer;font:inherit;font-size:.8rem;font-weight:700;
  display:inline-flex;align-items:center;gap:.4rem;min-height:40px;
  padding:.35rem .75rem;border-radius:var(--r-pill);
  background:var(--kg-paper);border:2px solid var(--kg-line);color:var(--ink-500);
}
.kg-side-toggle:hover{border-color:var(--kg-blue);color:var(--kg-blue)}
.kg-side-toggle svg{width:16px;height:16px}
.kg-side.is-collapsed .kg-outline{display:none}

.kg-outline{padding:.5rem}
.kg-og + .kg-og{margin-top:.15rem}
.kg-og-link{
  appearance:none;cursor:pointer;font:inherit;text-align:left;width:100%;
  display:flex;align-items:center;gap:.6rem;min-width:0;
  padding:.5rem .6rem;border-radius:14px;min-height:48px;
  font-weight:700;font-size:.98rem;
  background:transparent;border:0;color:var(--ink-700);
  transition:background .15s var(--ease),color .15s var(--ease);
}
.kg-og-link .em{font-size:1.3rem;flex:none;line-height:1}
.kg-og-link .lb{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kg-og-link:hover{background:var(--surface-2);color:var(--c)}
.kg-og.is-on .kg-og-link{background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}

.kg-og-secs{list-style:none;margin:.15rem 0 .3rem;padding:0 0 0 .6rem}
.kg-og-secs li{position:relative}
.kg-og-secs li::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--kg-line);border-radius:2px;
}
.kg-og-secs button{
  appearance:none;cursor:pointer;font:inherit;text-align:left;width:100%;
  padding:.42rem .6rem .42rem .85rem;min-height:40px;border:0;background:none;border-radius:10px;
  font-size:.88rem;line-height:1.4;color:var(--ink-500);
}
.kg-og-secs button:hover{background:var(--surface-2);color:var(--c)}
.kg-og-secs button.is-here{color:var(--c);font-weight:700}
/* Tints the tick beside the section you are reading. :has() is not everywhere
   yet and this rule stands alone so that older browsers drop only this. */
.kg-og-secs li:has(button.is-here)::before{background:var(--c)}

/* --------------------------------------------------------------- 2. tabs */
.kg-tabs{
  display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;
  margin-bottom:1.4rem;
}
@media (min-width:1080px){ .kg-tabs{justify-content:flex-start} }
/* Sized so all seven still sit on one line once the contents rail has taken
   its 262px out of the row. Below that they wrap, which is fine. */
.kg-tab{
  appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:.95rem;
  display:inline-flex;align-items:center;gap:.4rem;
  min-height:54px;padding:.5rem .8rem;border-radius:var(--r-pill);
  background:var(--kg-paper);border:3px solid var(--kg-line);color:var(--ink-700);
  transition:transform .15s var(--ease),border-color .15s,background .15s,color .15s;
}
.kg-tab .em{font-size:1.2rem;line-height:1}
.kg-tab:hover{transform:translateY(-2px);border-color:var(--c,var(--kg-blue))}
.kg-tab[aria-selected="true"]{
  background:var(--c,var(--kg-blue));border-color:var(--c,var(--kg-blue));color:#fff;
  box-shadow:0 8px 0 -2px color-mix(in srgb,var(--c,var(--kg-blue)) 45%,transparent);
}
:root[data-theme="dark"] .kg-tab[aria-selected="true"]{color:#0a1120}

/* ------------------------------------------------------------ 3. sound bar */
.kg-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  background:var(--surface-2);border:2px solid var(--kg-line);border-radius:var(--r-pill);
  padding:.5rem .8rem;margin-bottom:1.6rem;font-size:.92rem;
}
.kg-bar .lab{font-weight:700;color:var(--ink-500)}
.kg-bar .spacer{flex:1 1 auto}
.kg-speed{display:inline-flex;gap:.25rem;background:var(--kg-paper);border-radius:var(--r-pill);padding:.2rem}
.kg-speed button{
  appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:.86rem;
  min-height:40px;padding:.3rem .9rem;border:0;border-radius:var(--r-pill);
  background:none;color:var(--ink-500);
}
.kg-speed button[aria-pressed="true"]{background:var(--kg-blue);color:#fff}
.kg-stop{
  appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:.86rem;
  min-height:40px;padding:.3rem 1rem;border-radius:var(--r-pill);
  border:2px solid var(--kg-line);background:var(--kg-paper);color:var(--ink-700);
}
.kg-stop:hover{border-color:var(--kg-red);color:var(--kg-red)}
.kg-voice{font-size:.8rem;color:var(--ink-400)}
.kg-voice.warn{color:var(--kg-orange);font-weight:600}

/* --------------------------------------------------------- 4. panel & head */
.kg-panel{min-height:50vh}
.kg-sec{margin-bottom:2.6rem;scroll-margin-top:100px}
.kg-sec h3{
  display:flex;align-items:center;gap:.6rem;
  font-size:clamp(1.2rem,3vw,1.6rem);margin:0 0 .4rem;color:var(--ink-900);
}
.kg-sec h3 .em{font-size:1.7rem}
.kg-sec .say{
  margin:0 0 1.2rem;color:var(--ink-500);font-size:1rem;line-height:1.7;max-width:70ch;
}

/* A hint written for the grown-up sitting next to the child. */
.kg-tip{
  display:flex;gap:.7rem;align-items:flex-start;
  background:var(--accent-100);border-radius:var(--kg-r);
  padding:.85rem 1.1rem;margin:0 0 1.4rem;font-size:.93rem;line-height:1.65;color:var(--ink-700);
}
.kg-tip b{color:var(--ink-900)}
.kg-tip .em{font-size:1.3rem;flex:none}

/* ------------------------------------------------- 5. ABC flashcards
   The card is a real flip: letter on the front, picture and word on the back.
   A child taps A, it turns over to the apple and the page says "A … Apple".
   The two speakers and the phonics badge live OUTSIDE the flipping part, so
   the sound of a letter is always one tap away without turning the card.   */
.kg-abc{
  display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(138px,1fr));
}
.kg-card{display:flex;flex-direction:column;gap:.45rem}

/* Square, so 26 of them stay scannable in one screen rather than becoming a
   long column of portraits. min-height covers browsers without aspect-ratio. */
.kg-flip{
  appearance:none;cursor:pointer;font:inherit;padding:0;border:0;background:none;
  display:block;width:100%;aspect-ratio:1/1;min-height:138px;
  perspective:900px;
}
.kg-flip-in{
  /* display matters: this is a <span>, and width/height are ignored on an
     inline box, which collapses both faces to nothing. */
  display:block;position:relative;width:100%;height:100%;
  transform-style:preserve-3d;transition:transform .55s var(--ease);
}
.kg-flip[aria-pressed="true"] .kg-flip-in{transform:rotateY(180deg)}
.kg-flip:hover .kg-flip-in{transform:translateY(-4px)}
.kg-flip[aria-pressed="true"]:hover .kg-flip-in{transform:rotateY(180deg) translateY(-4px)}

.kg-face{
  position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  text-align:center;padding:.7rem .5rem;
  border:3px solid var(--kg-line);border-radius:var(--kg-r);background:var(--kg-paper);
  box-shadow:0 8px 0 -4px color-mix(in srgb,var(--c) 32%,transparent);
}
.kg-front{border-color:color-mix(in srgb,var(--c) 55%,var(--kg-line))}
.kg-back{
  transform:rotateY(180deg);
  border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,var(--kg-paper));
}

.kg-face .pair{
  font-family:var(--font-round,var(--font-display));font-weight:700;line-height:1;
  font-size:clamp(2.8rem,7vw,3.4rem);color:var(--c);letter-spacing:.02em;
}
.kg-face .pair small{font-size:.6em;opacity:.75}
.kg-front .hint{
  display:inline-flex;align-items:center;gap:.25rem;margin-top:.55rem;
  font-size:.74rem;font-weight:700;color:var(--ink-400);
}
.kg-back .em{font-size:clamp(2.4rem,6vw,2.9rem);line-height:1.1}
.kg-back .w{
  font-family:var(--font-round,var(--font-display));font-weight:800;
  font-size:1.02rem;color:var(--ink-900);margin-top:.3rem;line-height:1.25;
}
.kg-back .km{font-size:.85rem;color:var(--ink-500);line-height:1.3}

/* the row under the card — always visible, never flips */
.kg-duo{display:flex;gap:.3rem;align-items:center}
.kg-duo button{
  appearance:none;cursor:pointer;font:inherit;flex:1;min-width:0;
  font-size:.76rem;font-weight:700;min-height:38px;padding:.3rem .2rem;border-radius:10px;
  background:var(--surface-2);color:var(--ink-500);border:1.5px solid var(--kg-line);
}
.kg-duo button:hover{border-color:var(--c);color:var(--c)}
.kg-duo .ph{
  flex:none;padding:.25rem .5rem;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);
  font-weight:800;font-size:.8rem;line-height:1.5;
}
.kg-duo .ph.end::after{content:' ←';font-size:.8em}

/* flip-all controls for a teacher running a drill */
.kg-drill{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.2rem}
.kg-drill button{
  appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:.88rem;
  display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.4rem 1rem;
  border-radius:var(--r-pill);background:var(--kg-paper);border:2px solid var(--kg-line);color:var(--ink-700);
}
.kg-drill button:hover{border-color:var(--kg-blue);color:var(--kg-blue)}

/* -------------------------------------------------------- 6. number cards */
.kg-nums{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.kg-num{
  appearance:none;cursor:pointer;font:inherit;text-align:center;
  background:var(--kg-paper);border:3px solid var(--kg-line);border-radius:var(--kg-r);
  padding:.9rem .7rem 1rem;
  transition:transform .15s var(--ease),border-color .15s,box-shadow .15s;
}
.kg-num:hover{transform:translateY(-4px);border-color:var(--c);box-shadow:0 10px 0 -4px color-mix(in srgb,var(--c) 40%,transparent)}
.kg-num .d{
  font-family:var(--font-round,var(--font-display));font-weight:700;
  font-size:3rem;line-height:1;color:var(--c);
}
.kg-num .dots{
  display:flex;flex-wrap:wrap;gap:.15rem;justify-content:center;
  margin:.5rem 0 .45rem;min-height:2.6rem;align-content:center;font-size:1.05rem;line-height:1;
}
.kg-num .w{display:block;font-weight:700;font-size:1.05rem;color:var(--ink-900);text-transform:capitalize}
.kg-num .km{display:block;font-size:.85rem;color:var(--ink-500)}

/* ------------------------------------------------- 7. colours and shapes */
.kg-cols{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.kg-col{
  appearance:none;cursor:pointer;font:inherit;text-align:center;padding:0;overflow:hidden;
  background:var(--kg-paper);border:3px solid var(--kg-line);border-radius:var(--kg-r);
  transition:transform .15s var(--ease),box-shadow .15s;
}
.kg-col:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.kg-col .chip{
  display:grid;place-items:center;height:96px;font-size:1.6rem;font-weight:800;
  font-family:var(--font-round,var(--font-display));
}
.kg-col .cap{display:block;padding:.6rem .4rem .8rem}
.kg-col .w{display:block;font-weight:700;font-size:1.02rem;color:var(--ink-900);text-transform:capitalize}
.kg-col .km{display:block;font-size:.85rem;color:var(--ink-500)}

.kg-shapes{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
.kg-shape{
  appearance:none;cursor:pointer;font:inherit;text-align:center;
  background:var(--kg-paper);border:3px solid var(--kg-line);border-radius:var(--kg-r);padding:.9rem .6rem 1rem;
  transition:transform .15s var(--ease),border-color .15s,box-shadow .15s;
}
.kg-shape:hover{transform:translateY(-4px);border-color:var(--c);box-shadow:0 10px 0 -4px color-mix(in srgb,var(--c) 40%,transparent)}
.kg-shape svg{width:78px;height:78px;display:block;margin:0 auto .5rem}
.kg-shape svg path{fill:var(--c)}
.kg-shape .w{display:block;font-weight:700;font-size:1.02rem;color:var(--ink-900);text-transform:capitalize}
.kg-shape .km{display:block;font-size:.85rem;color:var(--ink-500)}

/* --------------------------------------------------- 8. vocabulary cards */
.kg-themebar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.kg-themebar button{
  appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:.95rem;
  display:inline-flex;align-items:center;gap:.45rem;min-height:52px;padding:.4rem 1rem;
  border-radius:var(--r-pill);border:2.5px solid var(--kg-line);background:var(--kg-paper);color:var(--ink-700);
}
.kg-themebar button .em{font-size:1.3rem}
.kg-themebar button[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#fff}
:root[data-theme="dark"] .kg-themebar button[aria-pressed="true"]{color:#0a1120}

.kg-words{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.kg-word{
  appearance:none;cursor:pointer;font:inherit;text-align:center;
  background:var(--kg-paper);border:3px solid var(--kg-line);border-radius:var(--kg-r);padding:1rem .6rem 1.05rem;
  transition:transform .15s var(--ease),border-color .15s,box-shadow .15s;
}
.kg-word:hover{transform:translateY(-4px) rotate(-1deg);border-color:var(--c);box-shadow:0 10px 0 -4px color-mix(in srgb,var(--c) 40%,transparent)}
.kg-word .em{display:block;font-size:3.1rem;line-height:1.1}
.kg-word .w{display:block;font-weight:700;font-size:1.08rem;color:var(--ink-900);margin-top:.4rem;text-transform:capitalize}
.kg-word .km{display:block;font-size:.87rem;color:var(--ink-500);min-height:1.2em}

/* ------------------------------------------------------------ 9. phonics */
.kg-fams{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.kg-fam{background:var(--kg-paper);border:3px solid var(--kg-line);border-radius:var(--kg-r);padding:1rem 1.1rem 1.2rem}
.kg-fam .end{
  display:inline-block;font-family:var(--font-round,var(--font-display));font-weight:800;
  font-size:1.5rem;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);
  padding:.15rem .8rem;border-radius:var(--r-pill);margin-bottom:.8rem;
}
.kg-fam .rows{display:flex;flex-direction:column;gap:.5rem}

/* c · a · t  →  cat
   Sized so the whole row fits on one line in a single grid column — the rows
   look ragged when some wrap and some do not. Below 380px it wraps, which is
   fine: the sounds sit on one line and the word underneath. */
.kg-blend{
  display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;
  background:var(--surface-2);border-radius:16px;padding:.5rem .55rem;
}
.kg-blend .em{font-size:1.4rem;flex:none;line-height:1}
.kg-snd{
  appearance:none;cursor:pointer;font:inherit;
  font-family:var(--font-round,var(--font-display));font-weight:800;font-size:1.15rem;
  flex:none;width:34px;height:44px;border-radius:11px;padding:0;
  background:var(--kg-paper);border:2.5px solid var(--kg-line);color:var(--ink-800);
  transition:transform .12s,border-color .12s,background .12s;
}
.kg-snd:hover{border-color:var(--c);color:var(--c)}
.kg-snd.pop{transform:scale(1.22);background:var(--c);border-color:var(--c);color:#fff}
.kg-blend .arrow{color:var(--ink-400);font-weight:800;flex:none}
.kg-whole{
  appearance:none;cursor:pointer;font:inherit;flex:none;
  font-family:var(--font-round,var(--font-display));font-weight:800;font-size:1.1rem;
  padding:.3rem .85rem;min-height:44px;border-radius:12px;
  background:var(--c);border:0;color:#fff;
}
:root[data-theme="dark"] .kg-whole{color:#0a1120}
.kg-blend .km{margin-left:auto;font-size:.85rem;color:var(--ink-500)}

.kg-sight{display:flex;flex-wrap:wrap;gap:.6rem}
.kg-sight button{
  appearance:none;cursor:pointer;font:inherit;
  font-family:var(--font-round,var(--font-display));font-weight:800;font-size:1.2rem;
  min-height:60px;padding:.4rem 1.2rem;border-radius:16px;
  background:var(--kg-paper);border:3px solid var(--kg-line);color:var(--ink-900);
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15;
}
.kg-sight button small{font-family:var(--font-sans);font-weight:500;font-size:.72rem;color:var(--ink-500)}
.kg-sight button:hover{border-color:var(--kg-purple);color:var(--kg-purple)}

/* -------------------------------------------------------------- 10. talk */
.kg-lines{display:flex;flex-direction:column;gap:.7rem}
.kg-line{
  display:flex;align-items:center;gap:.85rem;
  background:var(--kg-paper);border:3px solid var(--kg-line);border-radius:var(--kg-r);
  padding:.8rem 1rem;cursor:pointer;text-align:left;font:inherit;appearance:none;color:inherit;width:100%;
  transition:border-color .15s,transform .15s var(--ease);
}
.kg-line:hover{border-color:var(--c);transform:translateX(4px)}
.kg-line .em{font-size:2rem;flex:none}
.kg-line .txt{flex:1;min-width:0}
.kg-line .s{display:block;font-weight:700;font-size:1.1rem;color:var(--ink-900)}
.kg-line .a{display:block;font-size:1rem;color:var(--c);font-weight:600;margin-top:.15rem}
.kg-line .a::before{content:'↳ ';opacity:.6}
.kg-line .km{display:block;font-size:.88rem;color:var(--ink-500);margin-top:.15rem}
.kg-line .spk{
  flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:color-mix(in srgb,var(--c) 15%,transparent);color:var(--c);font-size:1.2rem;
}

/* ------------------------------------------------------------- 11. games */
.kg-games{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.kg-gcard{
  appearance:none;cursor:pointer;font:inherit;text-align:left;
  background:var(--kg-paper);border:3px solid var(--kg-line);border-radius:var(--kg-r-lg);
  padding:1.2rem 1.2rem 1.3rem;position:relative;overflow:hidden;
  transition:transform .16s var(--ease),border-color .16s,box-shadow .16s;
}
.kg-gcard:hover{transform:translateY(-6px);border-color:var(--c);box-shadow:0 14px 0 -6px color-mix(in srgb,var(--c) 42%,transparent)}
.kg-gcard .em{display:block;font-size:2.8rem;line-height:1}
.kg-gcard h4{margin:.6rem 0 .25rem;font-size:1.15rem;color:var(--ink-900);font-family:var(--font-round,var(--font-display))}
.kg-gcard p{margin:0;font-size:.92rem;line-height:1.6;color:var(--ink-500)}
.kg-gcard .go{
  display:inline-flex;align-items:center;gap:.35rem;margin-top:.85rem;
  font-weight:800;font-size:.95rem;color:var(--c);
}
.kg-gcard .best{
  position:absolute;top:.9rem;right:.9rem;font-size:.78rem;font-weight:800;
  background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);
  padding:.2rem .6rem;border-radius:var(--r-pill);
}

/* the play screen */
.kg-play{
  background:var(--kg-paper);border:4px solid var(--c,var(--kg-blue));border-radius:var(--kg-r-lg);
  padding:clamp(1rem,3vw,1.8rem);
}
.kg-phead{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-bottom:1rem}
.kg-phead h3{margin:0;font-size:1.25rem;flex:1 1 auto;min-width:0}
.kg-count{font-size:.9rem;font-weight:700;color:var(--ink-400);font-variant-numeric:tabular-nums}
.kg-quit{
  appearance:none;cursor:pointer;font:inherit;font-weight:700;font-size:.9rem;
  min-height:46px;padding:.4rem 1.1rem;border-radius:var(--r-pill);
  background:var(--surface-2);border:2px solid var(--kg-line);color:var(--ink-600,var(--ink-700));
}
.kg-quit:hover{border-color:var(--kg-red);color:var(--kg-red)}

.kg-stars{display:flex;flex-wrap:wrap;gap:.25rem;font-size:1.5rem;line-height:1;margin-bottom:1.1rem}
.kg-stars i{filter:grayscale(1);opacity:.32;font-style:normal;transition:transform .35s var(--ease),filter .35s,opacity .35s}
.kg-stars i.on{filter:none;opacity:1;transform:scale(1.18)}

/* the question — a picture, a letter, or a big listen button */
.kg-ask{
  display:grid;place-items:center;gap:.7rem;text-align:center;
  background:var(--surface-2);border-radius:var(--kg-r);padding:1.4rem 1rem;margin-bottom:1.2rem;
}
.kg-ask .big{font-size:clamp(4rem,16vw,6.5rem);line-height:1}
.kg-ask .bigletter{
  font-family:var(--font-round,var(--font-display));font-weight:800;
  font-size:clamp(4rem,16vw,6.5rem);line-height:1;color:var(--c);
}
.kg-ask .swatch{width:min(240px,70vw);height:110px;border-radius:20px;border:3px solid rgba(0,0,0,.12)}
.kg-ask .count{
  display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;align-items:center;
  font-size:clamp(1.8rem,6vw,2.6rem);line-height:1.1;max-width:520px;
}
.kg-ask .ask{margin:0;font-weight:700;font-size:1.1rem;color:var(--ink-700)}
.kg-ask svg.shape{width:120px;height:120px}
.kg-ask svg.shape path{fill:var(--c)}

.kg-listen{
  appearance:none;cursor:pointer;font:inherit;font-weight:800;font-size:1.05rem;
  display:inline-flex;align-items:center;gap:.5rem;
  min-height:58px;padding:.6rem 1.5rem;border-radius:var(--r-pill);
  background:var(--c,var(--kg-blue));border:0;color:#fff;box-shadow:0 6px 0 -1px color-mix(in srgb,var(--c,var(--kg-blue)) 55%,black);
}
:root[data-theme="dark"] .kg-listen{color:#0a1120}
.kg-listen:active{transform:translateY(3px);box-shadow:0 3px 0 -1px color-mix(in srgb,var(--c,var(--kg-blue)) 55%,black)}
.kg-listen .em{font-size:1.5rem}

/* the answers — the biggest thing on the page, on purpose */
.kg-opts{display:grid;gap:.9rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:820px){.kg-opts.four{grid-template-columns:repeat(4,1fr)}}
.kg-opt{
  appearance:none;cursor:pointer;font:inherit;
  display:grid;place-items:center;gap:.3rem;
  min-height:clamp(120px,26vw,168px);padding:1rem .6rem;
  background:var(--surface-2);border:4px solid var(--kg-line);border-radius:var(--kg-r-lg);
  color:var(--ink-900);position:relative;
  transition:transform .14s var(--ease),border-color .14s,background .14s;
}
.kg-opt:hover:not(:disabled){transform:translateY(-4px);border-color:var(--c)}
.kg-opt:disabled{cursor:default}
.kg-opt .em{font-size:clamp(2.6rem,10vw,3.6rem);line-height:1}
.kg-opt .t{
  font-family:var(--font-round,var(--font-display));font-weight:800;
  font-size:clamp(1.4rem,5vw,2rem);line-height:1.1;text-transform:none;
}
.kg-opt .t.small{font-size:clamp(1.05rem,3.6vw,1.3rem)}
.kg-opt .sw{width:70%;height:56px;border-radius:14px;border:2px solid rgba(0,0,0,.12)}
.kg-opt svg.shape{width:64px;height:64px}
.kg-opt svg.shape path{fill:currentColor}
.kg-opt .mark{position:absolute;top:.5rem;right:.7rem;font-size:1.7rem;line-height:1;opacity:0;transition:opacity .2s}

.kg-opt.right{border-color:var(--kg-green);background:color-mix(in srgb,var(--kg-green) 18%,transparent);animation:kg-pop .45s var(--ease)}
.kg-opt.right .mark{opacity:1}
.kg-opt.wrong{border-color:var(--kg-red);background:color-mix(in srgb,var(--kg-red) 15%,transparent);animation:kg-shake .4s}
.kg-opt.wrong .mark{opacity:1}
.kg-opt.show{border-color:var(--kg-green);animation:kg-glow 1s ease-in-out infinite}

@keyframes kg-pop{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes kg-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes kg-glow{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--kg-green) 55%,transparent)}50%{box-shadow:0 0 0 12px transparent}}

/* what the game says back */
.kg-said{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin-top:1.1rem;min-height:56px;font-weight:800;font-size:1.15rem;
  border-radius:var(--r-pill);padding:.5rem 1rem;
}
.kg-said .em{font-size:1.7rem}
.kg-said.ok{background:color-mix(in srgb,var(--kg-green) 18%,transparent);color:var(--kg-green)}
.kg-said.no{background:color-mix(in srgb,var(--kg-orange) 18%,transparent);color:var(--kg-orange)}
.kg-said.idle{background:transparent;color:var(--ink-400);font-weight:600;font-size:1rem}

/* the end of a round */
.kg-done{text-align:center;padding:1rem .5rem 0}
.kg-done .em{font-size:4.5rem;line-height:1}
.kg-done h3{justify-content:center;font-size:clamp(1.4rem,5vw,2rem);margin:.5rem 0 .3rem}
.kg-done .score{
  font-family:var(--font-round,var(--font-display));font-weight:800;
  font-size:clamp(2.4rem,9vw,3.4rem);color:var(--c,var(--kg-blue));line-height:1;
}
.kg-done p{color:var(--ink-500);margin:.5rem auto 1.3rem;max-width:44ch;font-size:1rem}
.kg-again{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.kg-btn{
  appearance:none;cursor:pointer;font:inherit;font-weight:800;font-size:1.05rem;
  min-height:58px;padding:.6rem 1.7rem;border-radius:var(--r-pill);border:0;
  background:var(--c,var(--kg-blue));color:#fff;box-shadow:0 6px 0 -1px color-mix(in srgb,var(--c,var(--kg-blue)) 55%,black);
}
:root[data-theme="dark"] .kg-btn{color:#0a1120}
.kg-btn:active{transform:translateY(3px);box-shadow:0 3px 0 -1px color-mix(in srgb,var(--c,var(--kg-blue)) 55%,black)}
.kg-btn--ghost{
  background:var(--kg-paper);color:var(--ink-700);border:3px solid var(--kg-line);box-shadow:none;
}
:root[data-theme="dark"] .kg-btn--ghost{color:var(--ink-700)}
.kg-btn--ghost:active{transform:none}

/* confetti — pure CSS pieces, thrown once and cleaned up by the script */
.kg-confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.kg-confetti i{
  position:absolute;top:-14px;width:11px;height:16px;border-radius:2px;
  animation:kg-fall linear forwards;
}
@keyframes kg-fall{
  0%{transform:translateY(-10vh) rotate(0deg);opacity:1}
  100%{transform:translateY(105vh) rotate(760deg);opacity:.85}
}

/* --------------------------------------------------- 12. grown-up section */
.kg-grown{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:1.4rem}
.kg-grown article{
  background:var(--kg-paper);border:2px solid var(--kg-line);border-radius:var(--kg-r);padding:1.1rem 1.2rem 1.3rem;
}
.kg-grown .em{font-size:2rem;line-height:1}
.kg-grown h4{margin:.5rem 0 .35rem;font-size:1.05rem;color:var(--ink-900)}
.kg-grown p{margin:0;font-size:.93rem;line-height:1.7;color:var(--ink-500)}

/* ------------------------------------------------- 12b. the Chinese page
   Everything above is shared with the English page. These rules only ever
   apply where the markup asks for them, so one stylesheet still serves both.

   The rule that shapes all of this: pinyin is printed but never spoken, and
   it is a ladder for the grown-up rather than for the child. So it is always
   set smaller and quieter than the characters it sits under — a child who
   leans on the pinyin stops looking at the characters. */
/* Scoped .kg-wrap .kg-hz, not bare .kg-hz, and placed at the end of the file
   on purpose. Several rules above set font-family directly on the very
   elements this has to override — .kg-opt .t, .kg-num .d, .kg-face .pair,
   .kg-col .chip — and a bare .kg-hz loses to every one of them on
   specificity. Matching their (0,2,0) and coming later wins the lot. */
.kg-wrap .kg-hz{font-family:var(--font-zh);font-weight:700;line-height:1.3}

/* pinyin wherever it appears */
.kg-face .py,.kg-word .py,.kg-blend .py,.kg-line .py{
  font-size:.82rem;color:var(--ink-400);font-weight:500;letter-spacing:.01em;
}
.kg-face .py{margin-top:.25rem}
.kg-word .py{display:block;margin-top:.1rem}
.kg-blend .py{flex:none;min-width:4.5em}
.kg-line .py{display:block;margin-top:.05rem}
.kg-line .a i{font-style:normal;font-size:.82rem;color:var(--ink-400);font-weight:500}

/* the character on a flashcard front needs the room a letter does not */
.kg-face .pair.kg-hz{font-size:clamp(3rem,8vw,3.8rem);letter-spacing:0}

/* pinyin under a game answer */
.kg-opt .kg-sub{
  font-family:var(--font-sans);font-size:.92rem;font-weight:600;color:var(--ink-500);
  line-height:1.2;margin-top:.15rem;
}
.kg-opt .t{word-break:keep-all}
/* a two-character answer must not break across the middle of the word */
.kg-opt .t.kg-hz{font-size:clamp(1.7rem,5.5vw,2.3rem);line-height:1.15}
.kg-opt .t.small.kg-hz{font-size:clamp(1.3rem,4vw,1.7rem)}
.kg-ask .bigletter.kg-hz{font-family:var(--font-zh)}

/* the tone cards */
.kg-fam .end .mark{font-size:1.25em;line-height:1;margin-right:.15rem}
.kg-fam-note{
  margin:0 0 .8rem;font-size:.9rem;line-height:1.6;color:var(--ink-500);
}
.kg-sight button .kg-hz{font-size:1.5rem;line-height:1.2}

/* ------------------------------------------------------------- 13. quiet */
@media (prefers-reduced-motion:reduce){
  .kg-num,.kg-word,.kg-col,.kg-shape,.kg-gcard,.kg-opt,.kg-tab,.kg-line{transition:none}
  .kg-num:hover,.kg-word:hover,.kg-col:hover,.kg-shape:hover,
  .kg-gcard:hover,.kg-opt:hover:not(:disabled),.kg-tab:hover,.kg-line:hover{transform:none}
  /* The card still turns over, it just does not spin to get there. */
  .kg-flip-in{transition:none}
  .kg-flip:hover .kg-flip-in{transform:none}
  .kg-flip[aria-pressed="true"]:hover .kg-flip-in{transform:rotateY(180deg)}
  .kg-opt.right,.kg-opt.wrong,.kg-opt.show{animation:none}
  .kg-confetti{display:none}
}

.kg-hide{display:none !important}