/* Thành phần dùng chung giữa các tính năng: chấm tiến độ, thẻ từ lớn, chữ tiếng Anh, nút điều khiển, micro, thanh buổi học. */

/* Nhãn song ngữ: dòng tiếng Anh nhỏ dưới dòng tiếng Việt (ô trang chủ, thẻ trò chơi, màn mở đầu) */
.tile .en { font-size: clamp(11px, 1.9vmin, 15px); font-weight: 700; opacity: .9; margin-top: -2px; }
.game-card .en { font-style: normal; font-weight: 800; font-size: clamp(13px, 2.2vmin, 16px); color: color-mix(in srgb, var(--d) 70%, white); line-height: 1.1; }
.hint .en { font-size: .85em; opacity: .8; }
.hint .en::before { content: ' · '; }
/* ---------- Học từ & Luyện nói ---------- */
.dots { display: flex; gap: 8px; }
.dots i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .7); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .12); transition: .3s; }
.dots i.done { background: var(--good); }
.dots i.cur { background: var(--c, #ff9f1c); transform: scale(1.35); }
.stage { touch-action: pan-y; }
.word-card {
  padding: clamp(14px, 3vmin, 28px); display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 5px solid color-mix(in srgb, var(--c) 45%, white);
  min-width: clamp(200px, 44vmin, 360px);
}
.word-card.in-r { animation: in-r .45s cubic-bezier(.2, 1.4, .4, 1); }
.word-card.in-l { animation: in-l .45s cubic-bezier(.2, 1.4, .4, 1); }
.word-card.wiggle { animation: wiggle .5s ease; }
@keyframes in-r { from { transform: translateX(60px) rotate(6deg) scale(.8); opacity: 0; } }
@keyframes in-l { from { transform: translateX(-60px) rotate(-6deg) scale(.8); opacity: 0; } }
@keyframes wiggle { 25% { transform: rotate(-4deg) scale(1.04); } 50% { transform: rotate(4deg) scale(1.04); } 75% { transform: rotate(-2deg); } }
.count-row { display: flex; flex-wrap: wrap; justify-content: center; max-width: 260px; gap: 2px; }
.word-info { text-align: center; }
.en-word { font-size: clamp(40px, 9vmin, 76px); font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 4px 0 var(--d), 0 8px 14px rgba(0, 0, 0, .2); }
.en-sentence { font-size: clamp(26px, 5.5vmin, 46px); font-weight: 800; line-height: 1.15; color: #fff; text-shadow: 0 3px 0 var(--d), 0 6px 12px rgba(0, 0, 0, .2); max-width: 680px; }
.say { margin-top: 4px; display: inline-block; padding: 2px 14px; border-radius: 99px; background: rgba(255, 255, 255, .8); color: var(--ink-soft); font-size: clamp(14px, 2.4vmin, 18px); }
.say b { color: var(--ink); }
.controls { display: flex; align-items: center; gap: clamp(10px, 2.4vmin, 22px); padding-bottom: 8px; }

.mic-btn { width: clamp(96px, 19vmin, 140px); height: clamp(96px, 19vmin, 140px); border-radius: 50%; display: grid; place-items: center; }
.mic-btn .rings { position: absolute; inset: 0; pointer-events: none; }
.mic-btn .rings i { position: absolute; inset: 0; border-radius: 50%; border: 4px solid var(--c); opacity: 0; }
.speak.ready .mic-btn { animation: pulse 1.2s ease-in-out infinite; }
.speak.listening .mic-btn .rings i { animation: ring 1.4s ease-out infinite; }
.speak.listening .mic-btn .rings i:nth-child(2) { animation-delay: .7s; }
.speak.listening .mic-btn { filter: saturate(1.3); }
@keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }

.session-bar { display: flex; align-items: center; gap: 4px; padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .7); }
.session-bar > i { width: 22px; height: 4px; border-radius: 4px; background: #cfdcec; }
.session-bar .sb { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #e9f0f8; opacity: .55; }
.session-bar .sb.done { background: #c9f3d8; opacity: 1; }
.session-bar .sb.cur { background: #fff1c9; opacity: 1; transform: scale(1.2); box-shadow: 0 0 0 3px #ffc21f; }