/* Trò chơi (làn TRÒ CHƠI sở hữu file này). Mỗi trò một khối .game-<id>. Kích thước hình chính nhân var(--ui), cỡ chữ theo rem. */

/* ===== Chung cho các trò ===== */
.game { position: relative; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; width: 100%; }
.game-prompt { display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 6px; border-radius: 20px; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.game-prompt .text { flex-grow: 1; font-size: 1rem; font-weight: 800; line-height: 1.3; }
.game .rounds { display: flex; justify-content: center; gap: 10px; }
.game .rounds .dot { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px dashed var(--violet-200); }
.game .rounds .dot.is-now { border: 0; background: var(--gold-400); box-shadow: 0 0 0 4px rgba(242, 184, 75, 0.3); }
.game .rounds .dot.is-done { border: 0; background: var(--green-400); }

/* Thẻ chữ: nút to, kéo được (touch-action none để ngón tay kéo không cuộn trang) */
.game-tile { position: relative; width: calc(88px * var(--ui)); height: calc(88px * var(--ui)); border-radius: 22px; background: var(--paper); border: 4px solid var(--violet-200); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: calc(48px * var(--ui)); line-height: 1; color: var(--violet-600); box-shadow: var(--shadow-soft); transition: box-shadow 150ms ease, border-color 150ms ease, opacity 300ms ease; }
.game-tile.is-wide { font-size: calc(38px * var(--ui)); }
.game-tile.is-drag { touch-action: none; cursor: grab; }
.game-tile.is-dragging { z-index: 5; box-shadow: 0 16px 32px rgba(122, 62, 140, 0.3); cursor: grabbing; }
.game-tile.is-picked { border-color: var(--gold-400); box-shadow: 0 0 0 6px rgba(242, 184, 75, 0.32); }
.game-tile.is-locked { pointer-events: none; }
.game-tile .g { display: block; }
.game-tile .tick { position: absolute; right: -10px; top: -10px; width: 32px; height: 32px; border-radius: 50%; background: var(--green-400); display: flex; align-items: center; justify-content: center; }
.game-tile .tick svg { width: 18px; height: 18px; color: #fff; }

/* Gợi ý sau lần chưa đúng thứ hai: vòng sáng vàng lan ra và chữ hoặc hình bên trong nhún */
.game .is-hint { animation: game-hint 700ms ease-in-out infinite alternate; }
.game .is-hint > .g, .game .is-hint > .illus, .game .is-hint > .animals, .game .is-hint > .inner { animation: game-nudge 600ms ease-in-out infinite alternate; }
@keyframes game-hint { from { box-shadow: 0 0 0 0 rgba(242, 184, 75, 0); } to { box-shadow: 0 0 0 10px rgba(242, 184, 75, 0.45); } }
@keyframes game-nudge { from { transform: translateY(0) scale(1); } to { transform: translateY(-6px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .game .is-hint, .game .is-hint > * { animation: none; box-shadow: 0 0 0 8px rgba(242, 184, 75, 0.45); } }

/* Máy tính bảng nằm ngang: nội dung trò không rộng quá 1024, bong bóng bay trong bầu trời thấp hơn */
@media (min-width: 820px) and (orientation: landscape) and (min-height: 500px) {
  .game { max-width: 1024px; margin: 0 auto; }
  .game-bong_bong .sky { min-height: calc(240px * var(--ui)); }
}

/* ===== Bắt bong bóng chữ ===== */
.game-bong_bong .sky { position: relative; flex: 1 1 auto; min-height: calc(280px * var(--ui)); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(180deg, #DDF3FF 0%, #F3E9FF 60%, #FDE7F0 100%); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.7); }
.game-bong_bong .bb { position: absolute; bottom: 0; margin-left: calc(-48px * var(--ui)); width: calc(96px * var(--ui)); height: calc(96px * var(--ui)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: calc(50px * var(--ui)); line-height: 1; color: var(--violet-600); will-change: transform;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.55) 18%, rgba(214, 190, 242, 0.5) 62%, rgba(176, 139, 196, 0.75) 100%);
  box-shadow: inset -6px -8px 14px rgba(122, 62, 140, 0.18), 0 8px 18px rgba(122, 62, 140, 0.16); transform: translateY(120%); }
.game-bong_bong .bb.is-wide { font-size: calc(40px * var(--ui)); }
.game-bong_bong .bb .skin { position: absolute; inset: 0; }
.game-bong_bong .bb .skin svg { width: 100%; height: 100%; display: block; }
.game-bong_bong .bb .g { position: relative; }
.game-bong_bong .bb.is-dim { opacity: 0.35; transition: opacity 300ms ease; }
.game-bong_bong .bb.is-pop { background: var(--gold-100); color: var(--pink-600); }
.game-bong_bong .bb.is-hint { animation: game-hint 700ms ease-in-out infinite alternate; }

/* ===== Ghép chữ với hình ===== */
/* Nối chữ hoa với chữ thường: thẻ chữ HOA bên trái, ô chữ thường bên phải (cùng khuôn với Ghép chữ với hình) */
.game-noi_hoa .board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1 1 auto; align-content: center; width: 100%; max-width: 560px; margin: 0 auto; }
.game-noi_hoa .col { display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 12px; }
.game-noi_hoa .slot { position: relative; width: calc(104px * var(--ui)); height: calc(104px * var(--ui)); border-radius: 26px; background: var(--paper); border: 4px dashed var(--violet-200); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); transition: border-color 200ms ease, background 200ms ease; }
.game-noi_hoa .slot .g { font-family: var(--font-display); font-weight: 800; font-size: calc(56px * var(--ui)); line-height: 1; color: var(--violet-600); }
.game-noi_hoa .slot.is-matched { border-style: solid; border-color: var(--green-400); background: var(--gold-50); }
.game-noi_hoa .slot.is-hint { border-color: var(--gold-400); }
.game-noi_hoa .slot .stuck { position: absolute; left: -12px; top: -12px; width: calc(48px * var(--ui)); height: calc(48px * var(--ui)); border-radius: 50%; background: var(--pink-400); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: calc(28px * var(--ui)); line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(240, 98, 146, 0.4); animation: game-pop-in 400ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.game-noi_hoa .game-tile.is-upper .g { color: var(--pink-600); }
.game-ghep_hinh .board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; flex: 1 1 auto; align-content: center; width: 100%; max-width: 560px; margin: 0 auto; }
.game-ghep_hinh .col { display: flex; flex-direction: column; align-items: center; justify-content: space-around; gap: 12px; }
.game-ghep_hinh .slot { position: relative; width: calc(120px * var(--ui)); height: calc(120px * var(--ui)); border-radius: 26px; background: var(--paper); border: 4px dashed var(--violet-200); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); transition: border-color 200ms ease, background 200ms ease; }
.game-ghep_hinh .slot.is-matched { border-style: solid; border-color: var(--green-400); background: var(--gold-50); }
.game-ghep_hinh .slot .stuck { position: absolute; left: -12px; top: -12px; width: calc(48px * var(--ui)); height: calc(48px * var(--ui)); border-radius: 50%; background: var(--pink-400); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: calc(28px * var(--ui)); line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(240, 98, 146, 0.4); animation: game-pop-in 400ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes game-pop-in { from { transform: scale(0); } to { transform: scale(1); } }

/* ===== Đưa số về rổ ===== */
.game-dan .pens { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 10px; flex: 1 1 auto; align-content: center; width: 100%; max-width: 640px; margin: 0 auto; }
.game-dan .pen { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; border-radius: 22px; background: rgba(255, 255, 255, 0.72); border: 4px dashed var(--violet-200); transition: border-color 200ms ease; }
.game-dan .pen .animals { width: 100%; max-width: calc(150px * var(--ui)); }
.game-dan .pen .count-set { max-width: 100%; }
.game-dan .pen .count-set g[id*="item-"] { cursor: default; }
.game-dan .pen .count-set.is-fallback { grid-template-columns: repeat(3, 1fr); gap: 3px; min-height: 0; }
.game-dan .pen .count-set.is-fallback .gem { padding: 2px; border-radius: 6px; }
.game-dan .pen .count-set.is-fallback .zero { width: auto; font-size: 4rem; }
/* Rổ: vẽ tạm bằng CSS (đan nan) cho tới khi có svg/tro-choi/ro.svg */
.game-dan .pen .ro { width: 100%; max-width: calc(150px * var(--ui)); height: calc(36px * var(--ui)); margin-top: -6px; border-radius: 4px 4px 18px 18px; background: repeating-linear-gradient(90deg, #E9BE82 0 9px, #D49A55 9px 18px); box-shadow: inset 0 6px 0 #C98A12, inset 0 -3px 0 rgba(0, 0, 0, 0.12); }
.game-dan .pen .ro.has-svg { height: auto; background: none; box-shadow: none; }
.game-dan .pen .ro svg { width: 100%; height: auto; display: block; }
.game-dan .pen .slot { width: calc(64px * var(--ui)); height: calc(64px * var(--ui)); margin-top: 4px; border-radius: 50%; border: 3px dashed var(--pink-200); background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: calc(34px * var(--ui)); line-height: 1; color: var(--pink-600); }
.game-dan .pen.is-matched { border-style: solid; border-color: var(--green-400); background: var(--gold-50); }
.game-dan .pen.is-matched .slot { border-style: solid; border-color: var(--green-400); }
.game-dan .cards { display: flex; justify-content: center; gap: 16px; padding: 6px 4px 8px; }

/* ===== Lật thẻ tìm đôi ===== */
.game-lat_the .grid { display: grid; grid-template-columns: repeat(3, minmax(0, calc(124px * var(--ui)))); justify-content: center; gap: 12px; flex: 1 1 auto; align-content: center; width: 100%; }
.game-lat_the .card { position: relative; width: 100%; aspect-ratio: 4 / 5; perspective: 900px; border-radius: 18px; }
.game-lat_the .card .inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 380ms cubic-bezier(0.3, 0.9, 0.4, 1); }
.game-lat_the .card.is-open .inner { transform: rotateY(180deg); }
.game-lat_the .card .face { position: absolute; inset: 0; border-radius: 18px; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); overflow: hidden; }
.game-lat_the .card .back { border: 4px solid #fff; background: var(--pink-200) radial-gradient(circle, #fff 0 3px, transparent 3.5px) 4px 4px / 22px 22px; }
.game-lat_the .card .back::after { content: ''; position: absolute; inset: 10px; border-radius: 12px; border: 2px dashed rgba(255, 255, 255, 0.85); }
.game-lat_the .card .back.has-svg { border: 0; background: none; }
.game-lat_the .card .back.has-svg::after { display: none; }
.game-lat_the .card .back svg { width: 100%; height: 100%; display: block; }
/* Mặt trước mang màu của cặp (--pair / --pair-bg / --pair-dark / --pair-glow đặt inline trên .card từ lat_the.js); giá trị dưới là dự phòng */
.game-lat_the .card { --pair: var(--violet-300); --pair-bg: var(--violet-100); --pair-dark: var(--violet-600); --pair-glow: rgba(176, 139, 196, 0.35); }
.game-lat_the .card .front { transform: rotateY(180deg); background: var(--pair-bg); border: 4px solid var(--pair); font-family: var(--font-display); font-weight: 800; font-size: calc(50px * var(--ui)); line-height: 1; color: var(--pair-dark); transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease; }
.game-lat_the .card .front .g.is-wide { font-size: calc(38px * var(--ui)); }
.game-lat_the .card .front .illus { width: 78% !important; height: 78% !important; border-radius: 22%; box-sizing: border-box; transition: background-color 220ms ease, padding 220ms ease; }
/* Đúng đôi: cả hai thẻ đổi sang màu đậm của cặp, chữ trắng, hình nằm trên tấm trắng bo góc, vòng sáng cùng màu và nhún "gật" về phía nhau */
.game-lat_the .card.is-matched { pointer-events: none; box-shadow: 0 0 0 6px var(--pair-glow); animation: lat-match-pop 420ms cubic-bezier(0.3, 0.9, 0.4, 1) both; }
.game-lat_the .card.is-matched .front { background: var(--pair); border-color: var(--pair-dark); color: #fff; }
.game-lat_the .card.is-matched .front .illus { background: #fff; padding: 5%; }
@keyframes lat-match-pop {
  0% { transform: scale(1) translate(0, 0) rotate(0deg); }
  50% { transform: scale(1.12) translate(var(--nod-x, 0px), var(--nod-y, 0px)) rotate(var(--nod-r, 0deg)); }
  100% { transform: scale(1) translate(0, 0) rotate(0deg); }
}
.game-lat_the .card.is-hint { animation: game-hint 700ms ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) {
  .game-lat_the .card .inner { transition: none; }
  .game-lat_the .card.is-matched { animation: none; }
  .game-lat_the .card .front, .game-lat_the .card .front .illus { transition: none; }
}

/* ===== Cái nào khác ===== */
.game-khac .choices { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; align-content: center; gap: 12px; flex: 1 1 auto; padding: 8px 4px; }
.game-khac .game-tile { width: min(calc(104px * var(--ui)), calc(28vw - 12px)); height: auto; aspect-ratio: 1; font-size: min(calc(58px * var(--ui)), 15vw); }
.game-khac .game-tile.is-wide { font-size: calc(44px * var(--ui)); }
.game-khac .game-tile.is-right { border-color: var(--gold-400); background: var(--gold-100); color: var(--pink-600); }
.game-khac .game-tile.is-dim { opacity: 0.4; }

/* ===== Chung giai đoạn 3: thanh tiến độ (thử thách khu), ba sao kết thúc (thử thách khu, lễ hội) ===== */
.game-progress { display: flex; justify-content: center; gap: 6px; padding: 2px 0; }
.game-progress .cell { width: clamp(26px, 9vw, 44px); height: 12px; border-radius: 6px; background: #fff; border: 2px dashed var(--violet-200); transition: background 200ms ease, border-color 200ms ease; }
.game-progress .cell.is-now { border: 2px solid var(--gold-400); box-shadow: 0 0 0 3px rgba(242, 184, 75, 0.3); }
.game-progress .cell.is-done { border: 2px solid var(--gold-400); background: var(--gold-400); }
.game-stars { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center; gap: calc(10px * var(--ui)); pointer-events: none; }
.game-stars .star { width: calc(84px * var(--ui)); height: calc(84px * var(--ui)); color: var(--violet-200); opacity: 0.5; transition: color 200ms ease, opacity 200ms ease; }
.game-stars .star:nth-child(2) { margin-top: calc(-22px * var(--ui)); }
.game-stars .star svg { width: 100%; height: 100%; display: block; }
.game-stars .star.is-on { color: var(--gold-400); opacity: 1; filter: drop-shadow(0 6px 12px rgba(242, 184, 75, 0.55)); }
.game-stars .star.is-off { opacity: 0.35; }

/* ===== Cặp sinh đôi ===== */
/* Mỗi lượt 2–3 thẻ của một nhóm dễ nhầm (--n), cột co theo bề rộng màn để không tràn ở 360px; chữ to, hình nhỏ dưới chữ làm móc nhớ */
.game-sinh_doi .pair { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, calc(124px * var(--ui)))); justify-content: center; align-content: center; gap: 12px; flex: 1 1 auto; padding: 8px 2px; }
.game-sinh_doi .twin { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 6px 6px 8px; border-radius: 24px; background: rgba(255, 255, 255, 0.72); border: 3px solid var(--violet-200); box-shadow: var(--shadow-soft); transition: border-color 200ms ease, background 200ms ease, opacity 300ms ease; }
.game-sinh_doi .twin .g { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: 20px; background: var(--paper); font-family: var(--font-display); font-weight: 800; font-size: min(calc(60px * var(--ui)), 15vw); line-height: 1; color: var(--violet-600); }
.game-sinh_doi .twin.is-wide .g { font-size: min(calc(44px * var(--ui)), 11vw); }
.game-sinh_doi .twin .pic { display: flex; align-items: center; justify-content: center; height: calc(56px * var(--ui)); }
.game-sinh_doi .twin .pic .illus { max-width: 100%; }
.game-sinh_doi .twin .pic .illus.is-fallback .glyph { font-size: 1.5rem; }
.game-sinh_doi .twin .pic .illus.is-fallback .word { display: none; }
.game-sinh_doi .twin.is-right { border-color: var(--gold-400); background: var(--gold-100); }
.game-sinh_doi .twin.is-right .g { color: var(--pink-600); }
.game-sinh_doi .twin.is-dim { opacity: 0.4; }

/* ===== Thử thách khu ===== */
.game-thu_thach .arena { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.game-thu_thach .choices { display: grid; grid-template-columns: repeat(3, minmax(0, calc(112px * var(--ui)))); justify-content: center; gap: 12px; padding: 8px 2px; }
.game-thu_thach .choices .game-tile { width: 100%; height: auto; aspect-ratio: 1; font-size: min(calc(56px * var(--ui)), 14vw); }
.game-thu_thach .choices .game-tile.is-wide { font-size: min(calc(42px * var(--ui)), 10vw); }
.game-thu_thach .game-tile.is-right { border-color: var(--gold-400); background: var(--gold-100); color: var(--pink-600); }
.game-thu_thach .game-tile.is-dim { opacity: 0.4; }
.game-thu_thach .slots { display: grid; grid-template-columns: repeat(3, minmax(0, calc(120px * var(--ui)))); justify-content: center; gap: 12px; padding: 0 2px; }
.game-thu_thach .slot { position: relative; width: 100%; aspect-ratio: 1; border-radius: 26px; background: var(--paper); border: 4px dashed var(--violet-200); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft); transition: border-color 200ms ease, background 200ms ease; }
.game-thu_thach .slot .illus { width: 80% !important; height: 80% !important; }
.game-thu_thach .slot .illus.is-fallback .glyph { font-size: 2rem; }
.game-thu_thach .slot .illus.is-fallback .word { display: none; }
.game-thu_thach .slot.is-matched { border-style: solid; border-color: var(--green-400); background: var(--gold-50); }
.game-thu_thach .slot .stuck { position: absolute; left: -12px; top: -12px; width: calc(48px * var(--ui)); height: calc(48px * var(--ui)); border-radius: 50%; background: var(--pink-400); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: calc(28px * var(--ui)); line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(240, 98, 146, 0.4); animation: game-pop-in 400ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.game-thu_thach .hand { display: flex; justify-content: center; padding: 6px 0 4px; }
.game-thu_thach .arena[data-kind="xong"] { min-height: calc(160px * var(--ui)); }
/* Hàng 5 chữ của khu, ngay dưới thanh tiến độ: câu mở gọi tên khu nên bé phải thấy đủ năm chữ, dù mỗi lượt chỉ hiện ba thẻ.
   Chữ nào trả lời đúng thì chip sáng vàng. Cỡ theo vw để năm chip luôn nằm một hàng, kể cả máy 320px. */
.game-thu_thach .stage-letters { display: flex; justify-content: center; align-items: center; gap: clamp(4px, 1.6vw, 10px); padding: 2px 0; flex-wrap: nowrap; transition: opacity 300ms ease; }
.game-thu_thach .stage-letters .gl { flex: 0 0 auto; width: clamp(30px, 9.5vw, 42px); height: clamp(30px, 9.5vw, 42px); border-radius: 50%; background: #fff; border: 2px dashed var(--violet-200); color: var(--violet-300); font-family: var(--font-display); font-weight: 800; font-size: clamp(0.9375rem, 4.6vw, 1.375rem); line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 240ms ease; }
.game-thu_thach .stage-letters .gl.is-wide { font-size: clamp(0.6875rem, 3.4vw, 1rem); }
.game-thu_thach .stage-letters .gl.is-on { border: 2px solid var(--gold-400); background: var(--gold-400); color: #fff; box-shadow: 0 0 0 3px rgba(242, 184, 75, 0.3); }
.game-thu_thach .stage-letters.is-done { opacity: 0.5; }

/* ===== Lễ hội Bingo ===== */
.game-le_hoi .board { display: grid; grid-template-columns: repeat(3, minmax(0, calc(112px * var(--ui)))); justify-content: center; align-content: center; gap: 10px; flex: 1 1 auto; padding: 6px 2px; }
.game-le_hoi .cell { position: relative; width: 100%; aspect-ratio: 1; border-radius: 20px; background: var(--paper); border: 4px solid var(--violet-200); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: min(calc(52px * var(--ui)), 13vw); line-height: 1; color: var(--violet-600); box-shadow: var(--shadow-soft); transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease, opacity 300ms ease; }
.game-le_hoi .cell.is-wide { font-size: min(calc(38px * var(--ui)), 9vw); }
.game-le_hoi .cell .g { display: block; transition: opacity 200ms ease; }
.game-le_hoi .cell .stamp { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; }
.game-le_hoi .cell .stamp svg { width: 72%; height: 72%; filter: drop-shadow(0 3px 6px rgba(201, 138, 18, 0.45)); }
.game-le_hoi .cell.is-marked { border-color: var(--gold-400); background: var(--gold-100); pointer-events: none; }
.game-le_hoi .cell.is-marked .g { opacity: 0.3; }
.game-le_hoi .cell.is-marked .stamp { opacity: 1; animation: game-pop-in 400ms cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.game-le_hoi .cell.is-line { border-color: var(--pink-400); background: var(--pink-100); box-shadow: 0 0 0 5px rgba(240, 98, 146, 0.3); }
.game-le_hoi .board.is-won .cell:not(.is-line) { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .game-le_hoi .cell.is-marked .stamp, .game-thu_thach .slot .stuck { animation: none; } }

/* ===== Tô màu chữ ===== */
.game-to_mau .paper { position: relative; width: 100%; max-width: 640px; align-self: center; background: var(--paper); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 12px; touch-action: none; }
.game-to_mau canvas { display: block; width: 100%; border-radius: 16px; touch-action: none; cursor: crosshair; }
.game-to_mau .palette { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 4px; }
/* Ô màu là chỗ chạm: không nhỏ hơn 64px dù máy thu hình lại */
.game-to_mau .swatch { width: max(64px, calc(60px * var(--ui))); height: max(64px, calc(60px * var(--ui))); border: 4px solid #fff; box-shadow: var(--shadow-soft); }
.game-to_mau .swatch.is-on { transform: scale(1.12); }
.game-to_mau .btn-primary { width: auto; min-width: 200px; max-width: 300px; align-self: center; padding: 0 28px; }