/* css/pets.css — CHỈ ".pt-root". Không một selector top-level nào ngoài nó.
 *
 * BIẾN KHAI LẠI TRONG .pt-root, KHÔNG Ở :root. Khai ở :root là ghi đè theme của cả app cho
 * mọi trang khác — tools/test.mjs khẳng định điều này cho từng game.
 *
 * BẢNG MÀU SÁNG, và đó là một quyết định chứ không phải sở thích. Năm game kia đều nền tối
 * hoặc nền kem (forge #221d29, rpg #131a2b, cats #14262b, kingdom #2b2016, room #efe2c9);
 * "nhìn màu nền là biết đang ở game nào" là một bất biến thiết kế của repo này. Thú Cưng
 * lấy đồng cỏ sáng, và ba màu nhấn đọc THẲNG từ sprite (đếm pixel, không chọn bằng mắt):
 * viền nâu ấm #643835, cam đất #e2744f, hổ phách #f9ab47. Nhờ vậy khung giao diện và con
 * vật trông như cùng một bộ art thay vì hai thứ dán cạnh nhau.
 *
 * MÀN HÌNH VẼ LẠI TOÀN KHỐI (innerHTML), nên `transition` trên đổi-trạng-thái không bao giờ
 * tìm được khung đầu để chạy. Chỉ :active / :hover / :focus-visible là có tác dụng thật
 * (bài học đã ghi trong README, mục "Making it look like the genre").
 */

.pt-root {
  --bg: #eaf4e2;
  --panel: #fbfdf7;
  --panel2: #e2eed6;
  --ink: #3d3227;
  --line: #cfe0c0;
  --accent: #e2744f;
  --accent-d: #c25c39;
  --gold: #f9ab47;
  --danger: #e8615f;
  --good: #5fb36b;
  --dim: #7c8a72;
  --shadow: 0 3px 0 rgba(100, 56, 53, .16);
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --fs-1: 11px;
  --fs-2: 13px;
  --fs-3: 15px;
  --fs-4: 19px;

  /* Tràn viền: huỷ padding của .view (18px trên, 16px hai bên, 64px dưới). Giống hệt
     bốn game kia — .view là khung của trang học, không phải khung của một cái sân. */
  margin: -18px -16px -64px;
  background: var(--bg);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

.pt-root * { box-sizing: border-box; }

.pt-root #ptApp {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);          /* Safari cũ: dvh chưa có */
  height: calc(100dvh - 60px);
  min-height: 440px;
  overflow: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* ---- header ---- */
.pt-root #ptTop {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 8px 12px;
  padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--panel); border-bottom: 2px solid var(--line);
  flex: 0 0 auto;
}
.pt-root .pt-wallet { display: flex; align-items: center; gap: 6px; font-size: var(--fs-4); font-weight: 800; }
.pt-root .pt-coin { font-size: var(--fs-3); }
.pt-root .pt-top-actions { display: flex; gap: 6px; }
.pt-root .pt-tbtn {
  min-width: 44px; min-height: 44px; border: 2px solid var(--line);
  background: var(--panel2); color: var(--ink); border-radius: var(--r-md);
  font-weight: 800; font-size: var(--fs-2); cursor: pointer; box-shadow: var(--shadow);
}
.pt-root .pt-tbtn:active { transform: translateY(2px); box-shadow: none; }

/* ---- sân / bảng ---- */
.pt-root #ptStage {
  position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden;
  touch-action: none; overscroll-behavior: none;
}
.pt-root #ptCanvas { display: block; width: 100%; height: 100%; }
.pt-root .pt-hud { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px; pointer-events: none; }
.pt-root .pt-hud > * { pointer-events: auto; }

.pt-root .pt-yardbar {
  display: flex; align-items: center; gap: 10px;
  background: rgba(251, 253, 247, .94); border: 2px solid var(--line);
  border-radius: var(--r-lg); padding: 8px 10px; box-shadow: var(--shadow);
}
.pt-root .pt-yardmsg { flex: 1 1 auto; font-size: var(--fs-2); font-weight: 600; }
.pt-root .pt-bathud { display: flex; gap: 6px; justify-content: center; }

/* Bảng HTML thay cho canvas ở bốn tab kia. touch-action: pan-y — đây là thứ CUỘN được,
   ngược với #ptStage vốn phải nuốt hết cử chỉ để không kéo cả trang khi vuốt trên sân. */
.pt-root .pt-panel { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.pt-root .pt-scroll {
  height: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
}
.pt-root .pt-sec { margin-bottom: 16px; }
.pt-root .pt-sec h3 {
  margin: 0 0 8px; font-size: var(--fs-3); font-weight: 800;
  display: flex; align-items: baseline; gap: 8px;
}
.pt-root .pt-sec h3 small { font-weight: 600; font-size: var(--fs-1); color: var(--dim); }
.pt-root .pt-note { margin: 6px 0 0; font-size: var(--fs-1); color: var(--dim); line-height: 1.5; }
.pt-root .pt-note.bad { color: var(--danger); font-weight: 600; }

/* ---- tabs ---- */
.pt-root #ptTabs {
  display: flex; gap: 4px; padding: 6px 8px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 2px solid var(--line); flex: 0 0 auto;
}
.pt-root .pt-tab {
  flex: 1 1 0; min-height: 44px; border: 0; background: transparent;
  color: var(--dim); font-weight: 700; font-size: var(--fs-1);
  border-radius: var(--r-md); cursor: pointer;
}
.pt-root .pt-tab.on { background: var(--panel2); color: var(--ink); box-shadow: var(--shadow); }
.pt-root .pt-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* ---- nút ---- */
.pt-root .pt-btn {
  min-height: 44px; padding: 0 14px; border: 2px solid var(--accent-d);
  background: var(--accent); color: #fff; font-weight: 800; font-size: var(--fs-2);
  border-radius: var(--r-md); cursor: pointer; box-shadow: var(--shadow);
}
.pt-root .pt-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.pt-root .pt-btn:disabled { opacity: .45; cursor: default; }
.pt-root .pt-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pt-root .pt-btn-feed { background: var(--good); border-color: #4a9455; }
/* Bát ăn. Đường dẫn do engine bơm vào `--bowl` chứ KHÔNG viết thẳng vào đây: số phiên bản
   chỉ được khai một chỗ (js/pets/atlas-map.js), nên nâng v1→v2 không để lại một ô trống mà
   không ai grep ra. Cùng cách js/forge/engine.js:250 bơm `--atlas`. */
.pt-root .pt-bowl {
  display: inline-block; width: 24px; height: 24px; margin-right: 7px; vertical-align: -6px;
  background: var(--bowl) center / contain no-repeat;
}
.pt-root .pt-chip {
  min-height: 44px; padding: 0 12px; border: 2px solid var(--line); background: var(--panel);
  color: var(--dim); font-weight: 700; font-size: var(--fs-1);
  border-radius: 999px; cursor: pointer;
}
.pt-root .pt-chip.on { background: var(--accent); border-color: var(--accent-d); color: #fff; }
.pt-root .pt-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

/* ---- thẻ pet ---- */
.pt-root .pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pt-root .pt-grid.small { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); margin-top: 10px; }
.pt-root .pt-card {
  position: relative; border: 2px solid var(--line); background: var(--panel);
  border-radius: var(--r-md); padding: 6px; cursor: pointer; box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.pt-root .pt-card.on { border-color: var(--accent); background: #fff3ec; }
.pt-root .pt-card.hungry { border-color: var(--danger); }
.pt-root .pt-card:active { transform: translateY(2px); box-shadow: none; }
.pt-root .pt-card-art { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.pt-root .pt-card-meta { width: 100%; }
.pt-root .pt-card-name {
  font-size: var(--fs-1); font-weight: 800; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-root .pt-card-row { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 2px; }
.pt-root .pt-lv { font-size: var(--fs-1); font-weight: 700; color: var(--dim); }
.pt-root .pt-badge-hungry {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-weight: 900; font-size: var(--fs-1); line-height: 22px; text-align: center;
  border: 2px solid var(--panel);
}
.pt-root .pt-rar {
  font-size: 10px; font-weight: 900; padding: 1px 6px; border-radius: 999px;
  background: var(--rar); color: #3a2c1e;
}
.pt-root .pt-xp { width: 100%; height: 5px; background: var(--panel2); border-radius: 999px; overflow: hidden; }
.pt-root .pt-xp.big { height: 9px; }
.pt-root .pt-xp i { display: block; height: 100%; background: var(--good); }
.pt-root .pt-xp-lab { font-size: var(--fs-1); color: var(--dim); font-weight: 700; margin-bottom: 3px; }

/* ---- trứng ---- */
.pt-root .pt-slots { display: flex; gap: 8px; flex-wrap: wrap; }
.pt-root .pt-slot {
  flex: 1 1 120px; min-height: 150px; border: 2px dashed var(--line);
  border-radius: var(--r-md); background: var(--panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px;
}
.pt-root .pt-slot.empty { color: var(--dim); font-size: 28px; font-weight: 300; }
.pt-root .pt-slot.ready { border-style: solid; border-color: var(--gold); background: #fff8ea; }

/* HIỆU ỨNG ẤP TRỨNG — bộ art không có nấc nứt, nên tiến độ nói bằng CHUYỂN ĐỘNG.
 *
 * `--wob` do screens/hatch.js đặt theo phần trăm đã ấp: 3.4s lúc mới đặt, 1.2s lúc sắp nở.
 * Quả trứng lắc nhanh dần — đọc được từ xa mà không cần nhìn số.
 *
 * DÙNG @keyframes CHỨ KHÔNG DÙNG transition, và đó là bắt buộc chứ không phải sở thích:
 * màn hình game này vẽ lại bằng innerHTML nên không phần tử nào sống qua hai lần vẽ, mà
 * transition thì cần một khung đầu để chạy từ đó (README, mục "Making it look like the
 * genre"). Animation thì chạy ngay trên phần tử vừa được chèn.
 *
 * Nhịp một giây KHÔNG vẽ lại khối này nữa (engine.patchHatch) — nếu vẽ lại thì animation
 * bị khởi động lại mỗi giây và quả trứng không bao giờ lắc trọn một nhịp.
 */
@keyframes pt-egg-wob {
  0%, 100% { transform: rotate(-3.5deg); }
  50%      { transform: rotate(3.5deg); }
}
@keyframes pt-egg-pop {
  0%, 100% { transform: translateY(0) scale(1); }
  35%      { transform: translateY(-7px) scale(1.05); }
  55%      { transform: translateY(0) scale(0.97); }
}
@keyframes pt-egg-glow {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%      { opacity: .8;  transform: scale(1.08); }
}
.pt-root .pt-egg-art {
  transform-origin: 50% 92%;                 /* xoay quanh ĐÁY: quả trứng lắc trong ổ, không quay quanh tâm */
  animation: pt-egg-wob var(--wob, 3s) ease-in-out infinite;
}
/* Chín rồi thì đổi hẳn ngôn ngữ chuyển động: nảy lên thay vì lắc, cộng một quầng vàng thở
   phía sau. Hai tín hiệu khác loại nên không lẫn với "sắp xong". */
.pt-root .pt-slot.ready { position: relative; }
.pt-root .pt-slot.ready .pt-egg-art { animation: pt-egg-pop 1.1s ease-in-out infinite; }
.pt-root .pt-slot.ready::before {
  content: ""; position: absolute; left: 50%; top: 34%;
  width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 999px;
  background: radial-gradient(circle, rgba(249,171,71,.85) 0%, rgba(249,171,71,0) 70%);
  animation: pt-egg-glow 1.6s ease-in-out infinite;
  pointer-events: none;
}
.pt-root .pt-slot.locked { cursor: pointer; text-align: center; }
.pt-root .pt-slot.locked small { display: block; font-size: var(--fs-1); color: var(--dim); margin-top: 4px; }
.pt-root .pt-slot-time { font-size: var(--fs-1); font-weight: 800; color: var(--dim); }
.pt-root .pt-slot-bar { width: 80%; height: 5px; background: var(--panel2); border-radius: 999px; overflow: hidden; }
.pt-root .pt-slot-bar i { display: block; height: 100%; background: var(--gold); }
.pt-root .pt-egg-buy {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border: 2px solid var(--line); border-radius: var(--r-md); background: var(--panel);
  margin-bottom: 8px; box-shadow: var(--shadow);
}
.pt-root .pt-egg-info { flex: 1 1 auto; min-width: 0; }
.pt-root .pt-egg-name { font-weight: 800; font-size: var(--fs-2); }
.pt-root .pt-egg-sub { font-size: var(--fs-1); color: var(--dim); }
.pt-root .pt-odds { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.pt-root .pt-odd { font-size: 10px; font-weight: 700; color: var(--dim); }
.pt-root .pt-pity-row { display: flex; align-items: center; gap: 8px; font-size: var(--fs-1); margin-bottom: 6px; }
.pt-root .pt-pity-row span { flex: 0 0 auto; font-weight: 700; }
.pt-root .pt-pity { flex: 1 1 auto; height: 8px; background: var(--panel2); border-radius: 999px; overflow: hidden; }
.pt-root .pt-pity i { display: block; height: 100%; background: var(--accent); }

/* ---- bộ sưu tập ---- */
.pt-root .pt-dexrow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: var(--fs-1); }
.pt-root .pt-dexdots { display: flex; gap: 3px; flex: 1 1 auto; flex-wrap: wrap; }
.pt-root .pt-dot { width: 11px; height: 11px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--line); }
.pt-root .pt-dot.on { background: var(--accent); border-color: var(--accent-d); }

/* ---- đội & đối thủ ---- */
.pt-root .pt-tslots { display: flex; gap: 8px; }
.pt-root .pt-tslot {
  flex: 1 1 0; min-height: 110px; border: 2px solid var(--line); border-radius: var(--r-md);
  background: var(--panel); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; cursor: pointer; box-shadow: var(--shadow);
}
.pt-root .pt-tslot.empty { border-style: dashed; color: var(--dim); font-size: 26px; cursor: default; }
.pt-root .pt-tslot.bad { border-color: var(--danger); }
.pt-root .pt-tslot small { font-size: 10px; font-weight: 700; }
.pt-root .pt-foe {
  display: flex; align-items: center; gap: 10px; padding: 8px;
  border: 2px solid var(--line); border-radius: var(--r-md); background: var(--panel);
  margin-bottom: 8px;
}
.pt-root .pt-foe.off { opacity: .5; }
.pt-root .pt-foe-who { flex: 1 1 auto; min-width: 0; }
.pt-root .pt-foe-who b { display: block; font-size: var(--fs-2); }
.pt-root .pt-foe-who small { font-size: var(--fs-1); color: var(--dim); }
.pt-root .pt-foe-pow { font-size: var(--fs-1); color: var(--dim); font-weight: 700; }

/* ---- nhật ký trận ----
   Một dải mỏng, KHÔNG phải một tấm thẻ: nó là câu trả lời cho "sao ví tôi hụt 25 xu",
   không phải một tính năng để ngắm. Vạch màu bên trái mang toàn bộ tin thắng/thua, nên đọc
   được ở khoảng cách cầm điện thoại mà không phải dò chữ. */
.pt-root .pt-logrow {
  display: flex; align-items: baseline; gap: 8px; padding: 8px 10px;
  border-left: 4px solid var(--line); border-radius: var(--r-sm);
  background: var(--panel); margin-bottom: 6px;
}
.pt-root .pt-logrow.win { border-left-color: var(--good); }
.pt-root .pt-logrow.lose { border-left-color: var(--danger); }
.pt-root .pt-log-who { flex: 1 1 auto; min-width: 0; font-size: var(--fs-2); font-weight: 700; }
.pt-root .pt-log-res { flex: 0 0 auto; font-size: var(--fs-1); font-weight: 800; }
.pt-root .pt-log-ago { flex: 0 0 auto; font-size: 10px; color: var(--dim); font-weight: 600; }

/* ---- bảng xếp hạng ---- */
.pt-root .pt-board { border: 2px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.pt-root .pt-brow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.pt-root .pt-brow:last-child { border-bottom: 0; }
.pt-root .pt-brow.me { background: #fff3ec; }
.pt-root .pt-rank { flex: 0 0 26px; font-weight: 900; color: var(--dim); text-align: center; }
.pt-root .pt-bname { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: var(--fs-2); }
.pt-root .pt-bname small { display: block; font-size: 10px; color: var(--dim); font-weight: 600; }
.pt-root .pt-bval { flex: 0 0 auto; font-weight: 800; font-size: var(--fs-2); }

/* ---- modal ---- */
.pt-root #ptModalWrap {
  position: fixed; inset: 0; z-index: 40; display: none;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(61, 50, 39, .5);
}
.pt-root #ptModalWrap.on { display: flex; }
.pt-root #ptModal {
  width: 100%; max-width: 420px; max-height: 86vh; overflow-y: auto;
  overscroll-behavior: contain; touch-action: pan-y;
  background: var(--panel); border: 2px solid var(--line); border-radius: var(--r-lg);
  padding: 14px; box-shadow: 0 12px 40px rgba(61, 50, 39, .3);
}
.pt-root .pt-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.pt-root .pt-modal-title { font-size: var(--fs-4); font-weight: 900; }
.pt-root .pt-pet-hero { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.pt-root .pt-pet-art { flex: 0 0 auto; width: 130px; height: 130px; }
.pt-root .pt-pet-side { flex: 1 1 auto; min-width: 0; }
.pt-root .pt-state { font-weight: 800; font-size: var(--fs-2); margin-bottom: 6px; }
.pt-root .pt-state.good { color: var(--good); }
.pt-root .pt-state.bad { color: var(--danger); }
.pt-root .pt-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 12px; }
.pt-root .pt-stat {
  text-align: center; padding: 6px 2px; background: var(--panel2);
  border-radius: var(--r-sm); font-size: 10px;
}
.pt-root .pt-stat span { display: block; color: var(--dim); font-weight: 700; }
.pt-root .pt-stat b { font-size: var(--fs-2); }
.pt-root .pt-cos-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.pt-root .pt-cos {
  position: relative; border: 2px solid var(--line); background: var(--panel2);
  border-radius: var(--r-sm); padding: 2px; cursor: pointer; opacity: .38;
}
.pt-root .pt-cos.has { opacity: 1; background: var(--panel); }
.pt-root .pt-cos.on { border-color: var(--accent); background: #fff3ec; }
.pt-root .pt-cos:disabled { cursor: default; }
.pt-root .pt-cos canvas { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.pt-root .pt-cos small { display: block; font-size: 9px; font-weight: 800; color: var(--dim); }
.pt-root .pt-help { margin: 0; padding-left: 18px; font-size: var(--fs-2); line-height: 1.7; }
.pt-root .pt-hatched { text-align: center; }
.pt-root .pt-result { text-align: center; }
.pt-root .pt-result-big { font-size: 26px; font-weight: 900; margin-bottom: 12px; }
.pt-root .pt-result.win .pt-result-big { color: var(--good); }
.pt-root .pt-result.lose .pt-result-big { color: var(--danger); }
.pt-root .pt-result-rows { margin-bottom: 14px; }
.pt-root .pt-result-row { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: var(--fs-3); margin-bottom: 6px; }

/* ---- rỗng / toast ---- */
.pt-root .pt-empty { text-align: center; padding: 28px 16px; color: var(--dim); }
.pt-root .pt-empty-ico { font-size: 40px; margin-bottom: 8px; }
.pt-root .pt-toast {
  position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%);
  z-index: 60; max-width: 88vw; padding: 10px 16px;
  background: #3d3227; color: #fff; border-radius: 999px;
  font-size: var(--fs-2); font-weight: 700; box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

/* Ô nhập 16px là chống iOS tự phóng to khi chạm vào — không có ô nhập nào ở đây HÔM NAY,
   nhưng luật để sẵn thì màn tìm bạn thêm sau không phải nhớ lại. */
.pt-root input, .pt-root textarea, .pt-root select { font-size: 16px; }


/* ---- cho ăn bằng từ vựng (111) ----
   Hai màn dùng chung khung modal đã có. Không một selector nào ở đây thoát khỏi .pt-root —
   cùng luật mà tools/test.mjs áp cho toàn bộ file này. */
.pt-root .pt-btn-outline {
  background: var(--panel); color: var(--ink); border-color: var(--line);
}

/* Ngã ba "cho ăn bằng cách nào". Hai nút cao, mỗi nút một dòng phụ nói thẳng phần thưởng:
   người chọn phải thấy được rằng chọn từ vựng là bỏ qua XP. */
.pt-root .pt-vway {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px;
  padding: 12px; margin-top: 10px; text-align: left; cursor: pointer;
  border: 2px solid var(--line); border-radius: var(--r-md); background: var(--panel);
  box-shadow: var(--shadow);
}
.pt-root .pt-vway:active { transform: translateY(2px); box-shadow: none; }
.pt-root .pt-vway-ico { font-size: 28px; flex: 0 0 auto; }
.pt-root .pt-vway-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-root .pt-vway-txt b { font-size: var(--fs-3); color: var(--ink); }
.pt-root .pt-vway-txt small { font-size: var(--fs-1); color: var(--dim); line-height: 1.4; }

/* Ba tầng độ khó. Màu đi từ dịu tới nóng để thứ tự đọc được trước cả khi đọc chữ. */
.pt-root .pt-vtiers { display: grid; gap: 8px; margin: 8px 0 4px; }
.pt-root .pt-vtier {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 44px; padding: 10px 12px; cursor: pointer; text-align: left;
  border: 2px solid var(--line); border-left-width: 6px;
  border-radius: var(--r-md); background: var(--panel); box-shadow: var(--shadow);
}
.pt-root .pt-vtier:active { transform: translateY(2px); box-shadow: none; }
.pt-root .pt-vtier b { font-size: var(--fs-3); }
.pt-root .pt-vtier small { font-size: var(--fs-1); color: var(--dim); }
.pt-root .pt-vtier-basic  { border-left-color: var(--good); }
.pt-root .pt-vtier-hard   { border-left-color: var(--gold); }
.pt-root .pt-vtier-expert { border-left-color: var(--accent); }

.pt-root .pt-vprog { font-size: var(--fs-1); color: var(--dim); font-weight: 700; }
.pt-root .pt-vbar {
  height: 6px; border-radius: 999px; background: var(--panel2); overflow: hidden; margin: 4px 0 12px;
}
.pt-root .pt-vbar i { display: block; height: 100%; background: var(--accent); transition: width .25s; }

.pt-root .pt-vstem { font-size: var(--fs-3); line-height: 1.6; margin: 0 0 12px; }
.pt-root .pt-vopts { display: grid; gap: 8px; }
.pt-root .pt-vopt {
  min-height: 44px; padding: 10px 12px; text-align: left; cursor: pointer;
  border: 2px solid var(--line); border-radius: var(--r-md);
  background: var(--panel); color: var(--ink); font-size: var(--fs-2); font-weight: 700;
}
.pt-root .pt-vopt:active:not(:disabled) { transform: translateY(2px); }
.pt-root .pt-vopt:disabled { cursor: default; }
/* Ô ĐÚNG luôn được tô, kể cả khi học sinh chọn sai — bài giải chỉ có nghĩa khi nhìn thấy
   đáp án đúng nằm ở đâu. */
.pt-root .pt-vopt.ok  { border-color: var(--good); background: #eaf7ec; opacity: 1; }
.pt-root .pt-vopt.bad { border-color: var(--danger); background: #fdecec; opacity: 1; }

.pt-root .pt-vfeed {
  margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md);
  border-left: 4px solid var(--line); background: var(--panel2);
}
.pt-root .pt-vfeed.ok  { border-left-color: var(--good); }
.pt-root .pt-vfeed.bad { border-left-color: var(--danger); }
.pt-root .pt-vfeed b { display: block; font-size: var(--fs-2); margin-bottom: 4px; }
.pt-root .pt-vfeed p { margin: 0; font-size: var(--fs-1); line-height: 1.6; color: var(--ink); }
.pt-root .pt-vocab .pt-btn-buy { width: 100%; margin-top: 12px; }

.pt-root .pt-vquit {
  display: block; width: 100%; min-height: 44px; margin-top: 10px;
  border: 0; background: transparent; color: var(--dim);
  font-size: var(--fs-1); font-weight: 700; text-decoration: underline; cursor: pointer;
}
.pt-root .pt-vquit:active { color: var(--ink); }
.pt-root .pt-vdone { text-align: center; }
.pt-root .pt-vactions { display: grid; gap: 8px; margin-top: 12px; }
.pt-root .pt-vactions .pt-btn { width: 100%; margin-top: 0; }

@media (max-width: 719px) {
  .pt-root { margin-bottom: calc(-72px - env(safe-area-inset-bottom)); }
  /* topbar 60 + tabbar 56 — hai hằng số của vỏ app, giống bốn game kia. */
  .pt-root #ptApp { height: calc(100vh - 124px); }
  .pt-root #ptApp {
    height: calc(100dvh - 60px - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
  .pt-root .pt-stats { grid-template-columns: repeat(5, 1fr); }
  .pt-root .pt-pet-art { width: 108px; height: 108px; }
}

@media (min-width: 720px) {
  .pt-root .pt-scroll { padding: 16px 20px 24px; }
  .pt-root .pt-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .pt-root .pt-btn:active, .pt-root .pt-card:active, .pt-root .pt-tbtn:active { transform: none; }
  /* Tắt HẲN lắc và nảy. Quầng vàng ở lại nhưng đứng yên — nó là thứ DUY NHẤT phân biệt
     "nở được rồi" với "đang ấp" khi chuyển động bị tắt, nên bỏ nó là bỏ mất thông tin. */
  .pt-root .pt-egg-art, .pt-root .pt-slot.ready .pt-egg-art { animation: none; }
  .pt-root .pt-slot.ready::before { animation: none; opacity: .6; }
}

/* ---- body.s8-play: đang chơi ⇒ thanh tab dưới bị ẩn (xem css/ispeak.css) -------------
   .pt-root có lề âm calc(-72px - safe-area) để triệt tiêu padding đáy của .view; padding
   ấy về 0 khi thanh tab ẩn, nên lề âm cũng phải về 0, nếu không sân bị kéo tụt xuống
   khỏi khung nhìn. */
@media (max-width: 979px) {
  body.s8-play .pt-root { margin-bottom: 0; }
}
@media (max-width: 719px) {
  body.s8-play .pt-root #ptApp {
    height: calc(100vh - 60px);
    height: calc(100dvh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}