/* Màn Bảng chữ cái: tấm bảng treo tường, 29 chữ theo thứ tự bảng chữ cái và hàng chữ số 0..10.
   Vừa một màn, không cuộn trang: hai khối (chữ cái, chữ số) chia chiều cao còn lại, lưới ô vuông minmax(0, 1fr) + aspect-ratio 1;
   máy quá thấp thì lưới tự cuộn (overflow-y: auto) chứ không cuộn cả trang. Cột: 6 ở điện thoại, 8 máy tính bảng dọc, 10 ngang.
   Màu ô theo trạng thái flowerState: nụ (mờ), hôm nay (vàng + hộp quà), nở (hồng), thuộc (xanh lá + lấp lánh), rũ (hồng đậm viền).
   Thẻ nghe lại dùng chung .map-card của map.css. */

.screen.alphabet {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  gap: 12px;
  background: linear-gradient(180deg, #FFF6E3 0%, #FDE7F0 55%, #F3E9FF 100%);
  --o-gap: 6px;                                   /* khe giữa các ô */
  --o-cot: 6;                                     /* số cột của lưới chữ cái */
  --o-cot-so: 6;                                  /* số cột của lưới chữ số (10 là ô rộng gấp đôi: 0..10 = 12 ô) */
}
.screen.alphabet > .abc-bar { flex-shrink: 0; }
/* Hai khối đứng sát nhau, căn giữa chỗ còn lại; thiếu chỗ thì khối chữ cái co lại (lưới cuộn), khối chữ số giữ nguyên */
.abc-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.abc-block { display: flex; flex-direction: column; min-height: 0; gap: 4px; }
.abc-block.is-letter { flex: 0 1 auto; }
.abc-block.is-number { flex: 0 0 auto; }

/* Tiêu đề khối: nhỏ, chạm là đọc lên (mọi chữ hiện cho bé đều có tiếng), cao đủ 44px để chạm */
.abc-title { align-self: flex-start; min-height: var(--tap); padding: 0 10px; display: flex; align-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--violet-600); border-radius: 999px; }
.abc-title:active { background: rgba(255, 255, 255, 0.6); }

/* Lưới ô: cột chia đều, ô vuông; khối bị ép thấp thì lưới cuộn bên trong */
/* Lưới cuộn cắt mọi thứ vượt ra ngoài hộp: bóng ô đổ xuống 16px, vòng sáng ô hôm nay 8px, ô đang đọc phóng 10% + sáng 16px,
   nên đệm 22px (và lề âm bù lại để bố cục không đổi); đệm 4px trước đây làm hàng đầu mất viền, hàng cuối mất bóng ở mọi máy. */
.abc-grid { display: grid; grid-template-columns: repeat(var(--o-cot), minmax(0, 1fr)); gap: var(--o-gap); align-content: start; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 22px; margin: -22px; scrollbar-width: thin; }
.abc-grid.is-number { grid-template-columns: repeat(var(--o-cot-so), minmax(0, 1fr)); }

/* Một ô: chữ thường to giữa ô, chữ hoa nhỏ góc trên phải */
.abc-tile {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 14px;
  background: var(--paper);
  color: var(--violet-600);
  box-shadow: var(--shadow-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  transition: transform 120ms ease, box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
}
.abc-tile:active { transform: scale(0.94); }
.abc-tile.is-wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.abc-tile .lo { position: relative; z-index: 1; }
.abc-tile .up { position: absolute; top: 3px; right: 6px; font-size: 0.75rem; line-height: 1; color: var(--ink-faint); }
.screen.alphabet.no-upper .abc-tile .up, .screen.alphabet.no-upper .abc-card .up { display: none; }
.abc-tile .gift, .abc-tile .sparkle { position: absolute; left: 2px; top: 2px; width: 36%; height: 36%; pointer-events: none; }
.abc-tile .gift svg, .abc-tile .sparkle svg { width: 100%; height: 100%; }
/* Hình minh họa (móc nhớ: a là con gà) ở góc dưới phải ô đã học; chữ hơi dịch lên trái để hai thứ không đè nhau */
.abc-tile .mh { position: absolute; right: 3px; bottom: 3px; width: 44%; height: 44%; pointer-events: none; object-fit: contain; }
.abc-tile.has-mh .lo { transform: translate(-12%, -8%); }
/* Chế độ xem hình (nút trên thanh trên): hình to giữa ô, chữ nhỏ ở góc trên trái, chữ hoa vẫn góc phải */
.screen.alphabet.is-pictures .abc-tile.has-mh .mh { right: 8%; bottom: 6%; width: 72%; height: 72%; }
.screen.alphabet.is-pictures .abc-tile.has-mh .lo { position: absolute; left: 6px; top: 4px; transform: none; font-size: 0.55em; }
.abc-view.is-on { background: var(--violet-600); color: #fff; }

/* Trạng thái theo flowerState */
.abc-tile.is-nu { opacity: 0.45; color: var(--ink-faint); background: rgba(255, 255, 255, 0.7); box-shadow: none; }
.abc-tile.is-nu .up { color: var(--ink-faint); }
.abc-tile.is-hom_nay { background: var(--gold-100); color: var(--gold-700); box-shadow: 0 0 0 2px var(--gold-400), var(--shadow-btn); animation: abc-glow 1500ms ease-in-out infinite; }
.abc-tile.is-hom_nay .gift { filter: drop-shadow(0 0 4px rgba(242, 184, 75, 0.9)); animation: abc-bob 1100ms ease-in-out infinite alternate; }
.abc-tile.is-no { background: var(--pink-100); color: var(--pink-600); }
.abc-tile.is-thuoc { background: rgba(91, 196, 142, 0.22); color: var(--green-600); }
.abc-tile.is-thuoc .sparkle { color: var(--gold-400); width: 30%; height: 30%; filter: drop-shadow(0 0 3px #FFF1D6); }
.abc-tile.is-ru { background: var(--pink-200); color: var(--pink-700); box-shadow: 0 0 0 2px var(--pink-600), var(--shadow-btn); }
/* Ô đang được đọc trong "Đọc cả bảng" */
.abc-tile.is-reading { z-index: 2; opacity: 1; transform: scale(1.1); box-shadow: 0 0 0 3px var(--gold-400), 0 0 16px 4px rgba(242, 184, 75, 0.6); }
@keyframes abc-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--gold-400), 0 0 0 0 rgba(242, 184, 75, 0.55); }
  50% { box-shadow: 0 0 0 2px var(--gold-400), 0 0 0 8px rgba(242, 184, 75, 0); }
}
@keyframes abc-bob { from { transform: translateY(0); } to { transform: translateY(-10%); } }

/* Nút loa "Đọc cả bảng" trên thanh trên: đang đọc thì nhấp nháy như nút loa các màn khác */
.abc-read.is-playing { background: var(--pink-400); color: #fff; animation: pulse 700ms ease-in-out infinite alternate; }

/* Thẻ nghe lại: thêm chữ hoa nhỏ cạnh chữ thường; hình minh họa từ assets.illustration */
.abc-card .glyph { display: inline-flex; align-items: flex-start; gap: 4px; }
.abc-card .glyph .up { font-size: 1rem; line-height: 1; color: var(--ink-faint); }
.abc-card .mh.illus.is-fallback .glyph { font-size: 1.5rem; }
.abc-card .mh.illus.is-fallback .word { display: none; }

/* ---------- Cỡ màn ---------- */
@media (max-height: 760px) and (orientation: portrait) {
  .screen.alphabet { gap: 8px; --o-gap: 5px; }
  .abc-body { gap: 6px; }
  .abc-tile { font-size: 1.5rem; }
}
/* Máy tính bảng dựng dọc: 8 cột */
@media (min-width: 600px) and (orientation: portrait) {
  .screen.alphabet { --o-cot: 8; --o-cot-so: 8; --o-gap: 8px; }
  .abc-tile { font-size: 2rem; border-radius: 16px; }
  .abc-tile .up { font-size: 0.875rem; top: 4px; right: 8px; }
}
/* Máy tính bảng nằm ngang: chữ cái 10 cột (3 hàng), chữ số 12 ô một hàng */
@media (min-width: 820px) and (orientation: landscape) and (min-height: 500px) {
  .screen.alphabet { --o-cot: 10; --o-cot-so: 12; --o-gap: 8px; gap: 10px; }
  .abc-tile { font-size: 2rem; border-radius: 16px; }
  .abc-tile .up { font-size: 0.875rem; top: 4px; right: 8px; }
}
@media (min-width: 820px) and (orientation: landscape) and (min-height: 500px) and (max-height: 700px) {
  .screen.alphabet { --o-gap: 6px; gap: 8px; }
  .abc-body { gap: 4px; }
  .abc-tile { font-size: 1.625rem; }
}

@media (prefers-reduced-motion: reduce) {
  .abc-tile.is-hom_nay, .abc-tile.is-hom_nay .gift, .abc-read.is-playing { animation: none; }
}