/* ---------- Tập viết ---------- */
.letter-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(8px, 1.6vmin, 14px); width: min(860px, 100%); }
@media (orientation: portrait) { .letter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } }
.letter-card { display: flex; flex-direction: column; align-items: center; padding: 6px 4px 8px; animation: pop .4s ease backwards; animation-delay: calc(var(--k) * .02s); }
.letter-card b { font-size: clamp(26px, 5.4vmin, 44px); line-height: 1.05; color: var(--c); text-shadow: 0 3px 0 color-mix(in srgb, var(--c) 70%, black); }
.letter-card b small { font-size: .78em; margin-left: 2px; }
.letter-card .lv-stars i { width: 14px; height: 14px; }
/* Chọn chế độ tập viết: ABC / 123 / từ */
.w-tabs { display: flex; gap: clamp(8px, 2vmin, 16px); }
.w-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px 6px 8px; min-height: 56px; color: #7c3aed; }
.w-tab.on { color: #fff; }
.w-tab b { font-size: clamp(18px, 3.2vmin, 24px); }
.num-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(640px, 100%); }
.num-grid .letter-card b { font-size: clamp(34px, 7vmin, 60px); }
.word-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(760px, 100%); }
.word-grid .letter-card { gap: 2px; padding-top: 8px; }
.word-grid .letter-card b { font-size: clamp(22px, 4vmin, 34px); }
@media (orientation: portrait) {
  .num-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .word-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .w-tab { padding: 4px 10px 4px 6px; }
  .w-tab b { font-size: 15px; }
}
/* Tập viết từ: chữ đang tô nổi bật */
.tw-letters { display: inline-flex; gap: 2px; }
.tw-letters i { font-style: normal; color: #b8c4d6; }
.tw-letters i.cur { color: var(--c); transform: scale(1.25); display: inline-block; }
.tw-letters i.done { color: var(--ink); }

.trace-top { display: flex; align-items: center; gap: 14px; }
.trace-word { display: flex; align-items: center; gap: 6px; padding: 4px 14px 4px 6px; }
.trace-word b { font-size: clamp(18px, 3vmin, 24px); color: var(--ink); }
.trace-pad { position: relative; width: clamp(240px, 56vmin, 460px); aspect-ratio: 1; padding: 0; overflow: hidden; border: 5px solid color-mix(in srgb, var(--c) 40%, white); }
.trace-svg { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; }
.trace-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.trace-svg .t-base { stroke: color-mix(in srgb, var(--c) 16%, white); stroke-width: 16; }
.trace-svg .t-dash { stroke: #c9d4e4; stroke-width: 1.6; stroke-dasharray: 2 3; }
.trace-svg .t-dash.cur { stroke: var(--c); stroke-width: 2; }
.trace-svg .t-ink { stroke: var(--c); stroke-width: 13; transition: stroke-dashoffset .06s linear; }
.trace-svg .t-arrow { stroke: var(--c); stroke-width: 2.2; }
.trace-svg .t-start circle { fill: #2fcf6a; stroke: #fff; stroke-width: 2; }
.trace-svg .t-start text { fill: #fff; font: 800 7.5px var(--font); text-anchor: middle; pointer-events: none; }
.trace-svg .t-start { animation: tstart 1.2s ease-in-out infinite; }
@keyframes tstart { 50% { opacity: .55; } }
.trace-pad.miss .t-start circle { fill: #ff9f1c; }
.trace-pad.miss { animation: shake .4s ease; }
.trace-pad.bump { animation: bump .6s ease; }
@media (orientation: portrait) { .trace-pad { width: min(86vw, 50vh); } }

/* Chữ cái vẽ bằng nét */
.lsvg { display: block; overflow: visible; }
.lsvg path { fill: none; stroke: var(--c, #3aa0ff); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.pic.letter b { font-size: calc(var(--s) * .52); line-height: 1; font-weight: 800; color: var(--c); text-shadow: 0 calc(var(--s) * .03) 0 color-mix(in srgb, var(--c) 70%, black); }
.lsvg.xl { width: clamp(120px, 30vmin, 240px); height: auto; }

/* Mục Chữ cái ABC: 7 thẻ → 4 cột gọn */
.abc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(900px, 100%); }
.abc-grid .game-card { width: auto; padding: 12px 8px; }
.abc-grid .game-card .pic.lg { --s: clamp(56px, 12vmin, 100px); }
@media (orientation: portrait) {
  .abc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .abc-grid .game-card { width: auto; }
  .abc-grid .game-card .pic.lg { --s: 48px; }
}

/* Phonics */
.ph-card { flex-direction: row; gap: clamp(8px, 2vmin, 18px); }
.ph-letters { display: flex; align-items: flex-end; }
.ph-letters .lsvg { width: clamp(90px, 22vmin, 170px); height: auto; }
.phonics .en-word .first { color: var(--c); -webkit-text-stroke: 2px #fff; }

/* Ghép chữ */
.match-board { display: flex; flex-direction: column; gap: clamp(18px, 5vmin, 44px); }
.m-row { display: flex; justify-content: center; gap: clamp(8px, 2vmin, 18px); }
.m-card { padding: 8px; width: clamp(62px, 14vmin, 120px); aspect-ratio: 1; display: grid; place-items: center; }
.m-card .lsvg { width: 100%; height: 100%; }
.m-card.sel { box-shadow: 0 8px 0 #f2b23a, 0 0 0 6px #ffc21f, 0 14px 24px rgba(0, 0, 0, .16); transform: translateY(-6px); }
.m-card.done { box-shadow: 0 8px 0 #22a454, 0 0 0 6px var(--good); opacity: .55; pointer-events: none; }
.m-card.wrong { animation: shake .45s ease; }

/* Bong bóng chữ */
.bubbles .main { justify-content: flex-start; }
.bub-target { width: clamp(56px, 11vmin, 84px); aspect-ratio: 1; padding: 6px; display: grid; place-items: center; }
.bub-target .lsvg { width: 100%; height: 100%; }
.bubble-field { position: relative; flex: 1; width: 100%; overflow: hidden; border-radius: var(--radius); }
.bub {
  position: absolute; bottom: calc(-1 * var(--sz)); width: var(--sz); height: var(--sz); border-radius: 50%; padding: calc(var(--sz) * .17);
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 8%, rgba(255, 255, 255, .35) 22%, color-mix(in srgb, var(--c) 22%, transparent) 70%, color-mix(in srgb, var(--c) 45%, transparent));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .7), 0 6px 14px rgba(40, 80, 140, .15);
  animation: rise var(--dur) linear forwards, sway 2.4s ease-in-out infinite alternate;
}
.bub .lsvg { width: 100%; height: 100%; pointer-events: none; }
@keyframes rise { to { bottom: calc(100% + var(--sz)); } }
.bub.wobble { animation: rise var(--dur) linear forwards, shake .4s ease; }
.bub.popped { animation: none; transform: scale(1.5); opacity: 0; transition: transform .25s, opacity .25s; }

/* Phân loại chữ */
.sort-card { padding: clamp(10px, 2vmin, 18px); }
.basket-c { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 8px; }
.basket-c b { font-size: clamp(20px, 4vmin, 32px); color: #7c3aed; letter-spacing: 2px; }
.basket-c.small b { color: #db2777; }

/* Ghép mảnh chữ */
.puzzle-q { display: flex; flex-direction: column; align-items: center; }
.pz-top .lsvg, .pz-piece .lsvg { width: clamp(110px, 26vmin, 200px); height: auto; overflow: hidden; }
/* cùng một màu cho mọi mảnh để bé phải nhìn hình dạng chữ, không đoán theo màu */
.puzzle-q .lsvg, .pz-piece .lsvg { --c: #7a6bff !important; }
.pz-slot { width: clamp(110px, 26vmin, 200px); aspect-ratio: 100 / 48; border: 4px dashed #c3cfdf; border-radius: 16px; }
.pz-full .lsvg { width: clamp(110px, 26vmin, 200px); height: auto; animation: pop .5s ease; }
.pz-piece { display: block; padding: 6px 4px; }