/* Nền tảng: màu chủ đạo, phông chữ, khung 3D, hiệu ứng dùng chung */
:root {
  --bg: #1a110b;
  --card: rgba(36, 24, 16, 0.94);
  --glass: rgba(26, 17, 10, 0.72);   /* nền mờ của thanh, nút, bảng */
  --line: rgba(232, 181, 74, 0.32);  /* viền mảnh */
  --gold: #e8b54a;
  --gold-dim: #a9803a;
  --text: #f4e9d8;
  --muted: #c7b49a;
  --shadow: 0 8px 28px rgba(0, 0, 0, .45);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bar-h: 64px;                      /* chiều cao thanh nút dưới cùng trên điện thoại */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; touch-action: none; user-select: none; }
[hidden] { display: none !important; }
/* Điện thoại: chạm nhanh hai lần vào nút không phóng to màn hình; ô nhập chữ từ 16px để iPhone không tự phóng to khi chạm vào */
button, input, textarea, select, label { touch-action: manipulation; }
@media (pointer: coarse) { input, textarea, select { font-size: 16px !important; } }
#app { position: fixed; inset: 0; }
#app canvas { display: block; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Hiện lên nhẹ nhàng mỗi khi một bảng được mở (dùng thuộc tính translate nên không đè transform sẵn có) */
@keyframes rise { from { opacity: 0; translate: 0 14px; } }
@keyframes fadeIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }