/* style.css — "Bạn Nhỏ". PHẦN MÀU do game-artist (khối :root bên dưới, khớp COLORS trong js/art.js và klx.COLOR).
   Layout/bố cục: game-engineer thêm phía dưới, KHÔNG xoá khối --c-* này. Trắng/xám luôn cần viền (--ink) trên nền kệ. */
:root {
  --c-red: #E5483E; --c-yellow: #F8CF3A; --c-blue: #3F8FD8; --c-green: #4DAF5A; --c-orange: #F28C28; --c-purple: #8E5BC0;
  --c-pink: #F59BBD; --c-brown: #9A6238; --c-black: #2B2B2E; --c-white: #FFFFFF; --c-grey: #9AA1A8;
  /* màu nền/viền dùng chung với art.js */
  --ink: #3B2A20;            /* viền nét đồng nhất */
  --bg: #FFF8E7;             /* nền ấm */
  --shelf: #E8D5B5;          /* nền kệ thẻ item (đủ tương phản cho item trắng/xám khi có viền) */
  --pad-glow: #FFF1A8; --pad-ring: #F2B84B;
  --dodo-body: #6FA8C9; --dodo-belly: #F3E9D2; --dodo-beak: #F2B84B;
  --monmon-body: #B9784B; --monmon-face: #F5DDBF; --monmon-bow: #F28DB2;
}

/* ---- game-artist: hiệu ứng thẻ gợi ý (sai >= 3). Viền sáng thở nhẹ, KHÔNG rung/đỏ.
   FX-V2 2026-10-08: bỏ @keyframes animate box-shadow (paint lại mỗi khung) → nhịp thở nằm ở
   `.card.card-glow::before` trong game.css (chỉ transform + opacity, chu kỳ 2.000 ms = 0,5 Hz). ---- */
.card-glow { outline: 4px solid var(--pad-ring); outline-offset: 2px; border-radius: 16px; }

/* ---- nút nổi đổi chế độ chạm ↔ thẻ NFC giữa lúc chơi (inputui.js) ---- */
.livemode { position: fixed; right: 10px; bottom: 64px; z-index: 18; min-width: 56px; min-height: 56px; padding: 4px 8px; border-radius: 18px; border: 3px solid var(--ink, #3B2A20); background: #fff; color: #3B2A20; font-weight: 800; font-size: 12px; line-height: 1.1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: 0 3px 8px rgba(59, 42, 32, .25); cursor: pointer; }
.livemode[hidden] { display: none; }
.livemode .ie { font-size: 22px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.livemode small { font-weight: 600; font-size: 9px; opacity: .85; }
.livemode:active { transform: scale(.95); }
.livemode:focus-visible { outline: 4px solid var(--pad-ring, #E58A3A); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .livemode, .livemode:active { transition: none; transform: none; } }