/* ============================================================
   Kuai Le Mandarin — Design System (candy / glassmorphism)
   Single drop-in stylesheet. Link this one file.
   Tokens are ported verbatim from the Claude Design bundle
   "kuai-le-mandarin-design-system"; component classes are the
   plain-CSS recreations of its React primitives (no frameworks,
   no build step — Netlify drag-drop safe).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Noto+Sans+SC:wght@500;700;900&display=swap');

/* ---- COLOUR TOKENS ---------------------------------------- */
:root {
  /* BLUE — primary brand */
  --blue: #0C70E0;  --blue-lite: #3E97F5;  --blue-lip: #0853AD;  --blue-glow: rgba(12,112,224,.40);
  /* GOLD — accent / secondary */
  --gold: #F7AE2A;  --gold-lite: #FFC95A;  --gold-lip: #D2860A;  --gold-glow: rgba(247,174,42,.45);
  /* GREEN — correct */
  --green: #37C26B; --green-lite: #5FD98C; --green-lip: #2A9655; --green-glow: rgba(55,194,107,.40);
  /* RED — wrong / record */
  --red: #F1604F;   --red-lite: #FB8475;   --red-lip: #C23B2E;   --red-glow: rgba(241,96,79,.40);

  /* tone accents */
  --tone-1: #3E97F5; --tone-2: #37C26B; --tone-3: #F7AE2A; --tone-4: #F1604F; --tone-neutral: #8E9BB3;

  /* neutrals / ink */
  --ink: #22324B; --ink-soft: #3C4D6B; --muted: #8E9BB3; --white: #FFFFFF;

  /* glass / surface tints */
  --glass-top: rgba(255,255,255,.92);
  --glass-bot: rgba(238,245,255,.80);
  --glass-edge: rgba(255,255,255,.90);
  --glass-tint-blue: rgba(225,238,255,.72);
  --glass-tint-gold: rgba(255,243,222,.72);

  /* daylight field */
  --sky-1: #EAF3FF; --sky-2: #DCEAFF; --sky-glow-blue: #DCEBFF; --sky-glow-gold: #FFF0D4;

  /* semantic aliases */
  --text-body: var(--ink);
  --text-muted: var(--muted);
  --text-on-fill: var(--white);
  --text-heading: var(--blue);
  --text-pinyin: var(--ink-soft);
  --surface-card: var(--glass-top);
  --surface-page: var(--sky-1);
  --action-primary: var(--blue);
  --action-secondary: var(--gold);
  --state-correct: var(--green);
  --state-wrong: var(--red);
  --state-selected: var(--blue);
  --reward-xp: var(--gold);
  --reward-streak: var(--red);
  --reward-stars: var(--gold);

  /* ---- TYPOGRAPHY ---- */
  --font-ui: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-hanzi: 'Noto Sans SC', var(--font-ui);
  --w-body: 700; --w-strong: 800; --w-black: 900;
  --fs-eyebrow: 11px; --fs-caption: 13px; --fs-body: 15px; --fs-button: 17px;
  --fs-h3: 20px; --fs-h2: 24px; --fs-h1: 30px;
  --fs-pinyin: 15px; --fs-hanzi: 26px; --fs-hanzi-xl: 46px; --fs-display: 64px;
  --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.55;
  --ls-eyebrow: 0.10em; --ls-heading: -0.01em;

  /* ---- SPACING / RADII / FRAME ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px;
  --radius-pill: 999px; --radius-chip: 14px; --radius-btn: 20px;
  --radius-card: 26px; --radius-sheet: 30px; --radius-frame: 38px;
  --frame-max: 420px; --frame-pad: 20px; --tap-min: 44px;

  /* ---- SHADOWS / LIPS ---- */
  --lip-blue: 0 7px 0 var(--blue-lip), 0 12px 22px var(--blue-glow);
  --lip-blue-press: 0 3px 0 var(--blue-lip), 0 6px 12px var(--blue-glow);
  --lip-gold: 0 7px 0 var(--gold-lip), 0 12px 22px var(--gold-glow);
  --lip-gold-press: 0 3px 0 var(--gold-lip), 0 6px 12px var(--gold-glow);
  --lip-green: 0 7px 0 var(--green-lip), 0 12px 22px var(--green-glow);
  --lip-green-press: 0 3px 0 var(--green-lip), 0 6px 12px var(--green-glow);
  --lip-red: 0 7px 0 var(--red-lip), 0 12px 22px var(--red-glow);
  --lip-red-press: 0 3px 0 var(--red-lip), 0 6px 12px var(--red-glow);
  --shadow-tile: 0 7px 0 rgba(180,200,232,.60), 0 12px 22px rgba(40,80,150,.14);
  --shadow-tile-press: 0 3px 0 rgba(180,200,232,.60), 0 6px 12px rgba(40,80,150,.12);
  --shadow-soft: 0 6px 18px rgba(30,64,128,.12);
  --shadow-lift: 0 14px 34px rgba(30,64,128,.18);
  --shadow-frame: 0 24px 70px rgba(20,40,80,.35);
  --shadow-sheet: 0 -16px 40px rgba(20,40,80,.18);
  --gloss: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));

  /* ---- EFFECTS ---- */
  --glass-fill: linear-gradient(180deg, var(--glass-top), var(--glass-bot));
  --glass-border: 1.5px solid var(--glass-edge);
  --glass-blur: blur(10px);
  --bg-app:
    radial-gradient(120% 55% at 12% 0%,  var(--sky-glow-blue) 0, rgba(220,235,255,0) 55%),
    radial-gradient(120% 45% at 92% 10%, var(--sky-glow-gold) 0, rgba(255,240,212,0) 50%),
    linear-gradient(180deg, var(--sky-1), var(--sky-2));
  --ease-pop: cubic-bezier(.34, 1.30, .50, 1);
  --ease-sheet: cubic-bezier(.25, 1.25, .40, 1);
  --ease-press: cubic-bezier(.2, .8, .3, 1);
  --dur-press: .06s; --dur-pop: .35s; --dur-sheet: .40s;
}

/* ---- KEYFRAMES (the only three the system uses) ----------- */
@keyframes kl-pop  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kl-bop  { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes kl-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.kl {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg-app);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.kl .hanzi, .kl-zh-cn { font-family: var(--font-hanzi); }

/* decorative blurred blobs for depth */
.kl-blob { position: fixed; border-radius: 50%; filter: blur(40px); opacity: .5; pointer-events: none; z-index: 0; }
.kl-blob.b1 { width: 340px; height: 340px; background: var(--blue-lite); top: -130px; right: -90px; }
.kl-blob.b2 { width: 320px; height: 320px; background: var(--gold-lite); bottom: -130px; left: -100px; }

/* mobile-first frame */
.kl-frame {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--frame-max);
  margin: 0 auto; min-height: 100vh;
  display: flex; flex-direction: column;
}
@media (min-width: 520px) {
  .kl-frame.kl-phone {
    min-height: auto; height: min(880px, 94vh); margin: 24px auto;
    border-radius: var(--radius-frame);
    background: linear-gradient(180deg, #EFF5FF, #E2ECFD);
    box-shadow: var(--shadow-frame);
    border: 1.5px solid rgba(255,255,255,.9);
    overflow: hidden;
  }
}

.kl-pop { animation: kl-pop var(--dur-pop) var(--ease-pop) both; }
.kl-bop { animation: kl-bop .5s var(--ease-pop) both; }

/* ============================================================
   Zh — stacked pinyin over hanzi (the iron rule unit)
   ============================================================ */
.kl-zh { display: inline-flex; flex-direction: column; align-items: center; line-height: var(--lh-tight); gap: 3px; }
.kl-zh-py { font-family: var(--font-ui); font-weight: var(--w-strong); font-size: var(--fs-pinyin); color: var(--text-muted); letter-spacing: .01em; }
.kl-zh-cn { font-family: var(--font-hanzi); font-weight: 700; font-size: var(--fs-hanzi); color: var(--ink); }
.kl-zh.sm .kl-zh-py { font-size: 12px; } .kl-zh.sm .kl-zh-cn { font-size: 20px; }
.kl-zh.lg .kl-zh-py { font-size: 18px; } .kl-zh.lg .kl-zh-cn { font-size: 34px; }
.kl-zh.xl .kl-zh-py { font-size: 20px; } .kl-zh.xl .kl-zh-cn { font-size: var(--fs-hanzi-xl); }
.kl-zh.on-fill .kl-zh-cn { color: var(--white); }

/* ============================================================
   PuffyButton — signature 3D candy action button
   ============================================================ */
.kl-puffy {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; cursor: pointer; color: var(--text-on-fill);
  font-family: var(--font-ui); font-weight: var(--w-black); font-size: var(--fs-button);
  padding: 16px 26px; min-height: var(--tap-min);
  border-radius: var(--radius-btn);
  transition: transform var(--dur-press) var(--ease-press), box-shadow var(--dur-press) var(--ease-press);
  text-decoration: none;
}
.kl-puffy::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 5px; height: 42%;
  border-radius: var(--radius-pill); background: var(--gloss); pointer-events: none;
}
.kl-puffy > * { position: relative; }
.kl-puffy.full { width: 100%; }
.kl-puffy.uppercase { text-transform: uppercase; letter-spacing: .04em; }
.kl-puffy.sm { padding: 11px 18px; font-size: 14px; border-radius: var(--radius-pill); }
.kl-puffy.lg { padding: 20px 30px; font-size: 20px; }
.kl-puffy.blue  { background: linear-gradient(180deg, var(--blue-lite), var(--blue));   box-shadow: var(--lip-blue); }
.kl-puffy.gold  { background: linear-gradient(180deg, var(--gold-lite), var(--gold));   box-shadow: var(--lip-gold); }
.kl-puffy.green { background: linear-gradient(180deg, var(--green-lite), var(--green)); box-shadow: var(--lip-green); }
.kl-puffy.red   { background: linear-gradient(180deg, var(--red-lite), var(--red));     box-shadow: var(--lip-red); }
.kl-puffy.blue:active  { transform: translateY(4px); box-shadow: var(--lip-blue-press); }
.kl-puffy.gold:active  { transform: translateY(4px); box-shadow: var(--lip-gold-press); }
.kl-puffy.green:active { transform: translateY(4px); box-shadow: var(--lip-green-press); }
.kl-puffy.red:active   { transform: translateY(4px); box-shadow: var(--lip-red-press); }
.kl-puffy:disabled, .kl-puffy.is-disabled {
  opacity: .55; cursor: default; pointer-events: none;
  box-shadow: 0 4px 0 rgba(0,0,0,.12); transform: none;
}

/* ============================================================
   SoundButton — round-square speaker (A blue / B gold)
   ============================================================ */
.kl-sound {
  position: relative; overflow: hidden; width: 66px; height: 66px;
  border: none; cursor: pointer; border-radius: var(--radius-btn);
  color: var(--text-on-fill); font-size: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-press) var(--ease-press), box-shadow .2s ease;
}
.kl-sound::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 6px; height: 38%;
  border-radius: var(--radius-pill); background: var(--gloss); pointer-events: none;
}
.kl-sound > * { position: relative; line-height: 1; }
.kl-sound.sm { width: 52px; height: 52px; font-size: 22px; }
.kl-sound.lg { width: 84px; height: 84px; font-size: 35px; }
.kl-sound.blue { background: linear-gradient(180deg, var(--blue-lite), var(--blue)); box-shadow: 0 7px 0 var(--blue-lip), 0 12px 22px var(--blue-glow); }
.kl-sound.gold { background: linear-gradient(180deg, var(--gold-lite), var(--gold)); box-shadow: 0 7px 0 var(--gold-lip), 0 12px 22px var(--gold-glow); }
.kl-sound.blue:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--blue-lip), 0 6px 12px var(--blue-glow); }
.kl-sound.gold:active { transform: translateY(4px); box-shadow: 0 3px 0 var(--gold-lip), 0 6px 12px var(--gold-glow); }
.kl-sound.playing { animation: kl-bop .9s ease-in-out infinite alternate; }
.kl-sound .kl-sound-tag {
  position: absolute; top: 7px; right: 9px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); font-weight: var(--w-black); font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(20,40,80,.25);
}
.kl-sound.blue .kl-sound-tag { color: var(--blue); }
.kl-sound.gold .kl-sound-tag { color: var(--gold); }

/* ============================================================
   GlassTile — frosted translucent surface
   ============================================================ */
.kl-glass {
  position: relative; overflow: hidden; padding: var(--space-5);
  border: var(--glass-border); border-radius: var(--radius-card);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-tile);
}
.kl-glass.tint-blue { background: linear-gradient(180deg, rgba(255,255,255,.92), var(--glass-tint-blue)); }
.kl-glass.tint-gold { background: linear-gradient(180deg, rgba(255,255,255,.92), var(--glass-tint-gold)); }
.kl-glass::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 4px; height: 30%;
  border-radius: var(--radius-pill); background: var(--gloss); pointer-events: none; opacity: .7;
}
.kl-glass > * { position: relative; }
.kl-eyebrow {
  font-family: var(--font-ui); font-weight: 800; font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--gold-lip);
}

/* ============================================================
   LessonCard — topic tile on the hub
   ============================================================ */
.kl-lesson-card {
  position: relative; overflow: hidden; width: 100%; text-align: left;
  display: flex; align-items: center; gap: var(--space-4); padding: 14px 16px;
  border: var(--glass-border); border-radius: var(--radius-card);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  cursor: pointer; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-tile);
  transition: transform var(--dur-press) var(--ease-press), box-shadow .18s ease;
}
.kl-lesson-card:active { transform: translateY(4px); box-shadow: var(--shadow-tile-press); }
.kl-lesson-card.locked { cursor: default; }
.kl-lesson-card::before {
  content: ""; position: absolute; left: 6%; right: 6%; top: 4px; height: 34%;
  border-radius: var(--radius-pill); background: var(--gloss); pointer-events: none; opacity: .7;
}
.kl-lesson-card > * { position: relative; }
.kl-lesson-card .kl-lc-icon {
  width: 64px; height: 64px; border-radius: var(--radius-btn); flex-shrink: 0;
  object-fit: cover; box-shadow: 0 6px 14px rgba(40,80,150,.22);
}
.kl-lesson-card .kl-lc-body { flex: 1; min-width: 0; }
.kl-lesson-card .kl-lc-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: var(--w-black); font-size: var(--fs-h3); color: var(--text-heading);
}
.kl-lesson-card .kl-lc-sub { display: flex; align-items: baseline; gap: 7px; margin-top: 2px; }
.kl-lesson-card .kl-lc-sub .py { font-weight: 700; font-size: 13px; color: var(--muted); }
.kl-lesson-card .kl-lc-sub .cn { font-family: var(--font-hanzi); font-weight: 700; font-size: 16px; color: var(--ink-soft); }
.kl-lesson-card .kl-lc-track {
  display: block; height: 8px; margin-top: 10px; border-radius: 99px;
  background: rgba(140,160,195,.28); overflow: hidden;
}
.kl-lesson-card .kl-lc-track > span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--gold), var(--blue));
  transition: width .5s var(--ease-pop);
}
.kl-lesson-card .kl-lc-chev { color: var(--blue); font-size: 22px; font-weight: 900; }
.kl-lesson-card .kl-lc-done { color: var(--green); font-size: 18px; }

.kl-lockchip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 99px;
  background: var(--glass-tint-gold); border: 1px solid rgba(210,134,10,.35);
  color: var(--gold-lip); font-weight: 800; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase;
}

/* ============================================================
   ChoiceButton — frosted answer tile + states
   ============================================================ */
.kl-choice {
  position: relative; overflow: hidden; flex: 1 1 0; min-height: 64px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 18px; border: 1.5px solid var(--glass-edge); border-radius: var(--radius-card);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--ink); font-family: var(--font-ui); font-weight: var(--w-strong); font-size: var(--fs-button);
  cursor: pointer;
  box-shadow: 0 7px 0 rgba(180,200,232,.6), 0 12px 22px rgba(40,80,150,.14);
  transition: transform var(--dur-press) var(--ease-press), box-shadow .18s ease;
}
.kl-choice::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: 5px; height: 38%;
  border-radius: var(--radius-pill); background: var(--gloss); pointer-events: none; opacity: .8;
}
.kl-choice > * { position: relative; }
.kl-choice.full { flex: 1 1 100%; width: 100%; }
.kl-choice:not(.selected):not(.correct):not(.wrong):active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(180,200,232,.6), 0 6px 12px rgba(40,80,150,.12); }
.kl-choice.selected { background: linear-gradient(180deg, var(--blue-lite), var(--blue));   border-color: rgba(255,255,255,.5); color: var(--white); box-shadow: 0 7px 0 var(--blue-lip), 0 12px 22px rgba(40,80,150,.14); backdrop-filter: none; -webkit-backdrop-filter: none; }
.kl-choice.correct  { background: linear-gradient(180deg, var(--green-lite), var(--green)); border-color: rgba(255,255,255,.5); color: var(--white); box-shadow: 0 7px 0 var(--green-lip), 0 12px 22px rgba(40,80,150,.14); backdrop-filter: none; -webkit-backdrop-filter: none; }
.kl-choice.wrong    { background: linear-gradient(180deg, var(--red-lite), var(--red));     border-color: rgba(255,255,255,.5); color: var(--white); box-shadow: 0 7px 0 var(--red-lip), 0 12px 22px rgba(40,80,150,.14); backdrop-filter: none; -webkit-backdrop-filter: none; }
.kl-choice.is-disabled { pointer-events: none; }

/* ============================================================
   ToneTile — glass tone-mark tile / tappable answer
   ============================================================ */
.kl-tone {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 14px 16px; border: 2.5px solid var(--glass-edge); border-radius: var(--radius-card);
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 7px 0 rgba(180,200,232,.6), 0 12px 22px rgba(40,80,150,.14);
  cursor: pointer;
  transition: transform var(--dur-press) var(--ease-press), box-shadow .18s ease, border-color .18s ease;
}
.kl-tone:active { transform: translateY(4px); box-shadow: 0 3px 0 rgba(180,200,232,.6), 0 6px 12px rgba(40,80,150,.14); }
.kl-tone .kl-tone-art { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-chip); overflow: hidden; }
.kl-tone .kl-tone-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kl-tone .kl-tone-num {
  position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 50%;
  color: var(--white); font-weight: 900; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(20,40,80,.3);
}
.kl-tone[data-tone="1"] .kl-tone-num { background: var(--tone-1); }
.kl-tone[data-tone="2"] .kl-tone-num { background: var(--tone-2); }
.kl-tone[data-tone="3"] .kl-tone-num { background: var(--tone-3); }
.kl-tone[data-tone="4"] .kl-tone-num { background: var(--tone-4); }
.kl-tone .kl-tone-label { font-weight: 900; font-size: 20px; color: var(--ink); }
.kl-tone .kl-tone-desc { font-weight: 800; font-size: 12px; color: var(--muted); }
.kl-tone.selected { border-color: var(--blue);  box-shadow: 0 7px 0 var(--blue-lip), 0 12px 22px var(--blue-glow); }
.kl-tone.correct  { border-color: var(--green); box-shadow: 0 7px 0 var(--green-lip), 0 12px 22px var(--green-glow); }
.kl-tone.wrong    { border-color: var(--red);   box-shadow: 0 7px 0 var(--red-lip), 0 12px 22px var(--red-glow); }

/* ============================================================
   ProgressTrack + TopBar
   ============================================================ */
.kl-progress {
  display: block; width: 100%; height: 16px; border-radius: var(--radius-pill);
  background: rgba(140,160,195,.30); box-shadow: inset 0 2px 4px rgba(40,80,150,.18);
  overflow: hidden; position: relative;
}
.kl-progress > span {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--gold), var(--blue));
  transition: width .55s var(--ease-pop); position: relative;
}
.kl-progress > span::after {
  content: ""; position: absolute; left: 8%; right: 8%; top: 2px; height: 40%;
  border-radius: var(--radius-pill); background: var(--gloss);
}
.kl-topbar { display: flex; align-items: center; gap: var(--space-3); padding: 14px 16px; }
.kl-topbar .kl-close {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  border: var(--glass-border); background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 4px 10px rgba(40,80,150,.14);
  color: var(--muted); font-size: 20px; font-weight: 900; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none;
}
.kl-topbar .kl-topbar-track { flex: 1; }

/* ============================================================
   StatChip — reward pill (xp / streak / stars / accuracy)
   ============================================================ */
.kl-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: var(--radius-pill);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 4px 10px rgba(40,80,150,.10); font-family: var(--font-ui);
}
.kl-chip.sm { padding: 5px 11px; }
.kl-chip .kl-chip-glyph { font-size: 17px; line-height: 1; }
.kl-chip .kl-chip-val { font-weight: 900; font-size: 16px; }
.kl-chip .kl-chip-label { font-weight: 700; font-size: 13px; opacity: .8; }
.kl-chip.sm .kl-chip-glyph { font-size: 14px; }
.kl-chip.sm .kl-chip-val { font-size: 13px; }
.kl-chip.sm .kl-chip-label { font-size: 10px; }
.kl-chip.xp       { background: var(--glass-tint-gold);       border: 1.5px solid rgba(210,134,10,.32); color: var(--gold-lip); }
.kl-chip.stars    { background: var(--glass-tint-gold);       border: 1.5px solid rgba(210,134,10,.32); color: var(--gold-lip); }
.kl-chip.streak   { background: rgba(255,231,227,.78);        border: 1.5px solid rgba(194,59,46,.30);  color: var(--red-lip); }
.kl-chip.accuracy { background: rgba(224,246,232,.80);        border: 1.5px solid rgba(42,150,85,.30);  color: var(--green-lip); }

/* ============================================================
   StarRating
   ============================================================ */
.kl-stars { display: inline-flex; gap: 8px; }
.kl-stars .kl-star { font-size: 44px; line-height: 1; color: rgba(140,160,195,.4); display: inline-block; }
.kl-stars .kl-star.on { color: var(--gold); text-shadow: 0 4px 10px var(--gold-glow); }
.kl-stars.animate .kl-star.on { animation: kl-bop .5s var(--ease-pop) both; }
.kl-stars.animate .kl-star:nth-child(2) { animation-delay: .12s; }
.kl-stars.animate .kl-star:nth-child(3) { animation-delay: .24s; }

/* ============================================================
   FeedbackSheet — slide-up slam sheet
   ============================================================ */
.kl-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  border-top-left-radius: var(--radius-sheet); border-top-right-radius: var(--radius-sheet);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-sheet); padding: 22px 22px 26px;
  animation: kl-rise var(--dur-sheet) var(--ease-sheet) both;
}
.kl-sheet.correct { background: rgba(224,246,232,.96); border-top: 2px solid var(--green); }
.kl-sheet.wrong   { background: rgba(255,234,231,.96); border-top: 2px solid var(--red); }
.kl-sheet .kl-sheet-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.kl-sheet.has-tip .kl-sheet-head { margin-bottom: 12px; }
.kl-sheet .kl-sheet-badge {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  color: var(--white); font-size: 26px; font-weight: 900;
  display: inline-flex; align-items: center; justify-content: center;
  animation: kl-bop .45s var(--ease-pop) both;
}
.kl-sheet.correct .kl-sheet-badge { background: linear-gradient(180deg, var(--green), var(--green-lip)); box-shadow: 0 6px 14px rgba(55,194,107,.4); }
.kl-sheet.wrong   .kl-sheet-badge { background: linear-gradient(180deg, var(--red), var(--red-lip));     box-shadow: 0 6px 14px rgba(241,96,79,.4); }
.kl-sheet .kl-sheet-title { font-weight: 900; font-size: 24px; }
.kl-sheet.correct .kl-sheet-title { color: var(--green-lip); }
.kl-sheet.wrong   .kl-sheet-title { color: var(--red-lip); }
.kl-sheet .kl-sheet-tip { font-weight: 700; font-size: 15px; line-height: var(--lh-body); color: var(--ink-soft); margin-bottom: 16px; }

@media (prefers-reduced-motion: reduce) {
  .kl-pop, .kl-bop, .kl-sound.playing, .kl-sheet, .kl-sheet .kl-sheet-badge, .kl-stars.animate .kl-star { animation: none !important; }
}