/* m3.css — giao diện M3 (vai chính phủ), dựa trên game3d.css (không sửa tệp đó). Dọc 360x800 trước. */
#hud { padding: 4px 10px 4px; }
.hang-tren { min-height: 28px; }
#ten-game { font-size: 16px; flex: 0 1 auto; margin: 0; }
.vai { font-size: 12px; color: var(--phu); margin-left: auto; text-align: right; line-height: 1.9; }
.vai ruby { line-height: 1; }

/* P3 A1: furigana dài hơn chữ gốc KHÔNG được kéo giãn chữ gốc (mặc định space-around làm giãn chữ trong từ hai chữ Hán). Căn giữa => chữ gốc liền nhau; rt >= 9 px thật (game3d.css để .55em = 6,9-8,8 px). Không sửa cách kt2lib sinh ruby. */
ruby { ruby-align: center; }
rt { font-size: max(9px, .55em); letter-spacing: -.1em; line-height: 1; }

/* con đường mốc */
.duong { list-style: none; margin: 2px 0 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 2px; position: relative; }
.duong::before { content: ""; position: absolute; left: 14px; right: 14px; top: 8px; height: 3px; background: var(--vien); z-index: 0; }
.duong .moc { position: relative; z-index: 1; flex: 1 1 0; text-align: center; font-size: 11.5px; color: var(--phu); min-width: 0; }
.duong .cham { display: block; width: 14px; height: 14px; margin: 1px auto 2px; border-radius: 50%; background: var(--the); border: 3px solid var(--vien); }
.duong .moc.xong .cham { background: var(--chinh); border-color: var(--chinh-dam); }
.duong .moc.hien .cham { background: var(--vang); border-color: var(--nhan-manh); box-shadow: 0 0 0 3px rgba(245,200,75,.45); }
.duong .moc.hien { color: var(--chu); font-weight: 700; }
.duong .nam { display: block; white-space: nowrap; }

/* lá đã ghim */
.ghim { display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; margin: 2px 0 0; min-height: 28px; align-items: center; }
.ghim-rong { font-size: 12px; color: var(--phu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-ghim { background: var(--nhan); border: 1px solid var(--chinh); border-radius: 999px; padding: 0 8px; font-size: 12px; white-space: nowrap; line-height: 1.9; }
.chip-ghim.cu { opacity: .55; border-color: var(--vien); }
.chip-ghim .jp { font-size: 12px; line-height: 1.9; }

/* chữ Nhật dùng lại: gọn hơn mặc định để vừa 360 px */
.jp { font-size: 16px; line-height: 2; }
.so-that { overflow-wrap: anywhere; }

/* thuật ngữ gạch chân, chạm được: vùng chạm >= 44 px */
.the-nut { display: inline-block; vertical-align: middle; min-height: 44px; min-width: 44px; padding: 0 2px; margin: 0; border: 0; border-radius: 6px; background: transparent;
  font: inherit; color: inherit; line-height: 2; text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--chinh); }
.the-nut:hover { background: rgba(47,111,94,.12); }
.the-nut .jp, .the-nut ruby { font: inherit; }

/* tin tới (đầu cảnh) */
.tin { position: absolute; left: 6px; right: 6px; top: 6px; z-index: 4; background: var(--the); border: 2px solid var(--chinh); border-radius: 12px; padding: 2px 8px 4px; box-shadow: 0 3px 10px rgba(0,0,0,.22); max-height: 52%; overflow-y: auto; }
.tin-hang { display: flex; align-items: center; gap: 6px; }
.tin-jp { flex: 1 1 auto; min-width: 0; }
.tin-jp .jp { font-size: 15px; }
.tin-phu { margin-top: 2px; }
.tin-vn { margin: 0 0 4px; font-size: 14px; }
.nut-vn { flex: 0 0 auto; min-height: 44px; min-width: 44px; padding: 2px 8px; font-size: 13px; background: var(--nhan); border-radius: 10px; }
.nut-vn .jp { font-size: 13px; line-height: 1.9; }
.nut-vn[aria-pressed="true"] { background: var(--chinh); color: #fff; border-color: var(--chinh-dam); }
.nut-vn[aria-pressed="true"] rt { color: #fff; }

/* hướng dẫn: bong bóng đặt ở ĐÁY cảnh để không đè tin */
#huong { top: auto; bottom: 8px; left: 6px; right: 6px; }
#huong p { font-size: 14px; }
#huong .jp { font-size: 14px; line-height: 2; }
.huong-lop { margin: 0 0 8px; padding: 6px 8px; border-radius: 10px; background: rgba(245,200,75,.3); font-size: 14.5px; }

/* vùng dưới */
.duoi { flex: 0 0 auto; background: var(--the); border-top: 1px solid var(--vien); padding: 4px 8px calc(4px + env(safe-area-inset-bottom)); max-height: 62%; overflow-y: auto; overflow-x: hidden; }
.thanh-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; }
.thanh-o { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 28px; padding: 0 6px; border-radius: 8px; background: var(--nen); border: 1px solid var(--vien); }
.thanh-o.tot { border-color: var(--chinh); }
.thanh-ten { font-size: 12.5px; line-height: 1.8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thanh-ten .jp { font-size: 12.5px; line-height: 1.8; }
.vach { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.vach i { display: block; width: 9px; height: 10px; border-radius: 2px; background: var(--vien); }
.vach i.on { background: var(--chinh); }
.thanh-o[data-k="lam_phat"] .vach i.on, .thanh-o[data-k="than_thep"] .vach i.on, .thanh-o[data-k="zaibatsu"] .vach i.on, .thanh-o[data-k="ngoai_te"] .vach i.on { background: var(--nhan-manh); }
.thanh-o[data-k="doi_song"] .vach i.on { background: var(--dung); }
.sao-tin { display: inline-flex; gap: 1px; }
.sao-tin i { width: 9px; height: 9px; border-radius: 50%; background: var(--vien); }
.sao-tin i.day { background: var(--vang); }
.sao-tin i.nua { background: linear-gradient(90deg, var(--vang) 50%, var(--vien) 50%); }
.tin-o { padding-right: 4px; }

/* tay bài */
.tay { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
button.la { min-height: 56px; padding: 2px 8px; text-align: left; background: var(--the); border: 2px solid var(--chinh); border-radius: 12px; }
button.la .jp { font-size: 14px; line-height: 2; }
.bang-mo { margin-top: 6px; }
.bang-mo .jp { font-size: 15px; }

/* hàng nút đáy */
.hang-duoi { display: flex; gap: 6px; margin-top: 6px; }
.hang-duoi .nut-nho { flex: 1 1 0; }
.hang-duoi .nut-vuong { flex: 0 0 56px; }

/* lớp hộp thoại */
#lop { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
.lop { position: fixed; inset: 0; background: rgba(20,26,32,.55); display: flex; align-items: center; justify-content: center; padding: 10px; pointer-events: auto; }
.lop .khung-hop { max-height: 92vh; max-height: 92dvh; }
.la-lon .la-jp .jp { font-size: 19px; line-height: 2.1; }
.la-lon .la-vn { margin: 6px 0; padding: 6px 8px; background: var(--nhan); border-radius: 8px; }
.nut-ban-hanh { min-height: 48px; }
.nut-xac-nhan, .nut-ban-hanh, .nut-tiep, .nut-moc-tiep, .nut-choi-lai, .nut-da-hieu, .nut-dd-chot, .nut-dd-tiep, .nut-xep-kiem-tra, .nut-xep-xem, .nut-xep-lam-lai, .nut-xep-xep-lai, .nut-mo-dd, .nut-mo-xep { flex: 1 1 140px; }

/* thẻ thuật ngữ */
.the-tieu .jp { font-size: 22px; }
.the-giai { margin: 6px 0; }
.the-giai .jp { font-size: 16px; }
.the-vn { margin: 4px 0; padding: 6px 8px; background: var(--nhan); border-radius: 8px; }
.the-vn-ten { font-weight: 700; margin: 0 0 4px; }
.the-vn-giai { margin: 0; }
.nguon-the { margin-top: 6px; }
.nguon-the .nguon { margin: 2px 0; font-size: 12.5px; }
.nguon-the a { color: var(--chinh-dam); }
.the-lq { display: flex; flex-wrap: wrap; gap: 6px; }
.the-muc { min-height: 44px; padding: 2px 10px; background: var(--nhan); }
.the-muc .jp { font-size: 15px; line-height: 2; }
.gia-dinh { background: var(--vang); color: #3a2f08; font-weight: 600; }
.hq-vn { margin: 4px 0 8px; }

/* nhãn thực tế lịch sử + trang mốc */
.tieu-su { margin: 2px 0; color: var(--chinh-dam); font-weight: 700; }
.dong-su { margin: 2px 0; }
.dong-vn { margin: 4px 0; padding: 6px 8px; background: var(--nhan); border-radius: 8px; }
.dong-vn .dich { margin: 2px 0; }
.tieu-moc .nam { font-weight: 700; color: var(--chinh); margin-right: 6px; }
.canh-moc { margin: 4px 0; font-size: 14px; color: var(--phu); }
.truoc-sau { margin: 6px 0; }
.ts-dau { font-size: 12.5px; color: var(--phu); text-align: right; }
.ts-hang { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.ts-hang .thanh-ten { flex: 1 1 auto; }
.danh-gia { margin: 6px 0; padding: 8px 10px; border: 2px solid var(--chinh); border-radius: 12px; }
.bang-xong, .bang-trang { padding: 2px 0; }
.nut-moc-qua { display: block; width: 100%; margin: 4px 0; text-align: left; }
.canh-khong { padding: 14px; }

@media (max-height: 640px) { .duoi { max-height: 70%; } }
@media (prefers-reduced-motion: reduce) { .sang { animation: none; } }

/* P3 A2: toast KHÔNG đè nút. game3d.css đặt #bao ở top:10px (đè tin tới + nút bản dịch). Vị trí dọc do datBao() (mp_m3_ui.js) đặt vào khe trống giữa tin tới và bong bóng hướng dẫn; mặc định: gần giữa cảnh; translateX(-50%) lấy từ game3d.css. */
#bao { top: 40%; width: max-content; }

/* M3b: hộp dự đoán cái giá + màn xếp chuỗi nhân quả (mọi nút >= 44 px, không tràn ngang ở 360 px) */
.bang-mo-hop { padding: 2px 0; }
.dd-hoi { margin: 4px 0 6px; font-weight: 600; }
.dd-luoi { display: grid; gap: 6px; margin: 4px 0 8px; }
.dd-thanh { grid-template-columns: 1fr 1fr; }
.dd-huong { grid-template-columns: 1fr 1fr; }
.dd-nut { min-height: 48px; padding: 2px 8px; border: 2px solid var(--vien); border-radius: 12px; background: var(--the); text-align: center; min-width: 0; overflow-wrap: anywhere; }
.dd-nut .jp { font-size: 15px; line-height: 2; }
.dd-nut[aria-pressed="true"] { border-color: var(--chinh); background: var(--nhan); font-weight: 700; }
.dd-kq { margin: 4px 0; padding: 6px 8px; border-radius: 8px; font-weight: 700; }
.dd-kq.dung { background: var(--nhan); color: var(--chinh-dam); }
.dd-kq.sai { background: var(--vang); color: #3a2f08; }
.dd-dapan { margin: 4px 0; }
.dd-gt { margin: 4px 0; }
.dd-gt .jp { font-size: 15px; line-height: 2; }
.dd-gt-vn { margin: 4px 0; padding: 6px 8px; background: var(--nhan); border-radius: 8px; }
.xep-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 8px; }
.xep-o { position: relative; min-height: 56px; padding: 4px 8px 4px 30px; border: 2px solid var(--vien); border-radius: 12px; background: var(--the); text-align: left; min-width: 0; overflow-wrap: anywhere; }
.xep-o .jp { font-size: 14px; line-height: 1.9; }
.xep-o.da { border-color: var(--chinh); background: var(--nhan); }
.xep-o.khoa { opacity: 1; border-color: var(--dung); }          /* ô ✓ đã khoá đúng chỗ (SPEC_M3b §6): không mờ như nút khoá thường — nó là thông tin, không phải thao tác bị chặn */
.xep-o.khoa .xep-so { background: var(--dung); }
.xep-so { position: absolute; left: 6px; top: 6px; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; text-align: center; font-size: 12px; font-weight: 700; color: var(--the); background: var(--chinh); }
.xep-so:empty { display: none; }
.xep-kq { margin: 6px 0; font-weight: 700; font-size: 16px; }
.xep-chuoi { display: flex; flex-direction: column; align-items: stretch; margin: 4px 0 8px; }
.xep-chuoi-o { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 2px 8px; border: 2px solid var(--vien); border-radius: 10px; background: var(--the); min-width: 0; overflow-wrap: anywhere; }
.xep-chuoi-o.dung { border-color: var(--dung); }
.xep-chuoi-o.sai { border-color: var(--sai); background: var(--vang); color: #3a2f08; }
.xep-chuoi-o .jp { font-size: 14px; line-height: 1.9; }
.xep-dau { flex: 0 0 auto; font-weight: 700; }
.xep-chuoi-o.dung .xep-dau { color: var(--dung); }
.xep-chuoi-o.sai .xep-dau { color: var(--sai); }
.xep-mui { text-align: center; line-height: 1.2; color: var(--phu); }