/* ===== Giao diện mới (xem thử): "Ngọc bích hoàng gia" =====
   Giữ chất game tối, giàu chi tiết (hoa văn vàng, bụi sao, thẻ giấy da) nhưng bỏ bộ màu dễ gợi Halloween
   (đen + cam + tím phát sáng): nền đen → xanh đêm ngọc bích, vàng cam → vàng sâm-panh, bỏ quầng tím.
   Hình nền / màn chờ Muse vẽ được "pha xanh" bằng blend screen: chỗ đen thành xanh đêm, chỗ vàng giữ nguyên.
   Chỉ có tác dụng khi <html> có class "bm" (bật bằng ?giaodien=binhminh hoặc trong Tài khoản). */
html.bm {
  --bg0: #0c1a3d; --bg1: #132650; --bg2: #1c3570;
  --gold: #f2cf6b; --gold2: #c9a043; --gold3: #8a6a1e;
  --text: #f3eedf; --muted: #b9c3dc;
  --night: #16295f; --royal: #1f3a7a; --royal2: #2c4fa3; --royal3: #0f1f4a; --vermil: #c8462e;
  /* Sử thi: tím xanh dịu (hợp nền xanh) thay tím đậm; Huyền thoại: vàng nắng thay cam */
  --t2: #8b7be6; --t2d: #3e3492; --t2l: #d5cffa;
  --t3: #f2c14e; --t3d: #a8740f; --t3l: #fff1c4;
}
/* Nền: bộ hình mới của Muse (assets/v2): khung khảm vàng Đền Tạm — trái lựu, ô-li-ve, hoa hạnh — quanh trời đêm xanh chàm */
html.bm body { background: #0e1238 url('../assets/v2/bg-landscape.webp?v=9') center/cover fixed; }
html.bm #app {
  background:
    radial-gradient(ellipse at 50% 108%, rgba(242,193,78,.16), transparent 55%),
    url('../assets/v2/bg-portrait.webp?v=9') center/100% 100% no-repeat,
    #0e1238;
  box-shadow: 0 0 60px rgba(4,10,30,.8), 0 0 0 1px rgba(242,207,107,.25);
}

/* Thanh trên / menu dưới: xanh hoàng gia, viền vàng */
html.bm .topbar { background: linear-gradient(180deg, rgba(31,58,122,.96), rgba(15,31,74,.88)); border-bottom: 2px solid rgba(242,207,107,.6); }
html.bm .nav { background: linear-gradient(0deg, #0a1633, #15306a); border-top: 2px solid rgba(242,207,107,.55); }
html.bm .gold-pill { background: linear-gradient(180deg, #23418a, #13275a); }
html.bm .avatar { background: url('../assets/emblem.webp') center/82% no-repeat, radial-gradient(circle, #2a4a96, #0f1f4a); }
html.bm .stars i { color: #4a5a85; }

/* Bảng, ô, hộp thoại: xanh đêm trong suốt thay nâu đen */
html.bm .panel { background: linear-gradient(180deg, rgba(34,60,128,.86), rgba(13,27,64,.92)); border-color: rgba(242,207,107,.35); box-shadow: inset 0 1px 0 rgba(200,220,255,.12), 0 6px 20px rgba(4,10,30,.45); }
html.bm .gold-pill, html.bm .modal, html.bm .tour, html.bm .tip, html.bm .sndpanel { border-color: var(--gold2); }
html.bm .modal, html.bm .tour, html.bm .tip, html.bm .sndpanel { background: linear-gradient(180deg, #24448f, #0f1f4a); }
html.bm .modal-bg { background: rgba(4,10,30,.7); }
html.bm .tour-bg { background: radial-gradient(ellipse at 50% 30%, rgba(40,80,170,.5), rgba(4,10,30,.9) 70%); }
html.bm .toast { background: rgba(15,31,74,.96); }
html.bm select option { background: #13275a; }
html.bm .tabs button.on { background: linear-gradient(180deg, var(--royal2), var(--royal3)); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(242,207,107,.55); }

/* Trang chủ: ô chế độ khối màu đậm như huy hiệu — Luyện tập xanh trời, Đấu thẻ đỏ son, còn lại ngọc bích */
html.bm .mode { background: linear-gradient(160deg, #2a4c9e, #12285e); border: 1.5px solid rgba(242,207,107,.6); box-shadow: inset 0 1px 0 rgba(200,220,255,.2), 0 8px 22px rgba(4,10,30,.5); }
html.bm .mode.practice { background: linear-gradient(160deg, #2f7fd0, #123f80); }
html.bm .mode.pvp { background: linear-gradient(160deg, #d0573a, var(--vermil) 45%, #6e1d10); }
html.bm .mode b { color: #fff4cf; }
html.bm .mode span { color: #d6deef; }
html.bm .nextstep { background: linear-gradient(120deg, rgba(242,193,78,.22), rgba(15,31,74,.9)); }
html.bm .guestbar { background: rgba(110,40,30,.55); }
html.bm .installbar { background: linear-gradient(120deg, rgba(120,170,255,.2), rgba(15,31,74,.9)); }

/* Thẻ câu hỏi: bỏ quầng tím / cam, chỉ bóng đổ sâu và ánh vàng nhẹ cho Huyền thoại */
html.bm .card.t2 .face { box-shadow: 0 calc(1.5 * var(--cq, 1cqw)) calc(5 * var(--cq, 1cqw)) rgba(4,10,30,.6); }
html.bm .card.t3 .face { box-shadow: 0 0 calc(4 * var(--cq, 1cqw)) rgba(242,207,107,.35), 0 calc(1.5 * var(--cq, 1cqw)) calc(5 * var(--cq, 1cqw)) rgba(4,10,30,.6); }
html.bm .card.t2 .front::after { opacity: .3; }
html.bm .card.t2 .front .frame.img, html.bm .card.t2 .back .bkimg { filter: saturate(.8) hue-rotate(-12deg); }
/* Huyền thoại: ruy băng trắng ngà chữ mật ong thay đỏ sẫm */
html.bm .card.t3 .paper .bk { background: linear-gradient(180deg, #fffaf0, #f1e2bf); border-top-color: #f2c14e; border-bottom-color: #c9902f; box-shadow: inset 0 0 calc(2 * var(--cq, 1cqw)) rgba(168,112,15,.25); }
html.bm .card.t3 .paper .bk span { background-image: linear-gradient(180deg, #c98a1d, #7a4c08); filter: none; }

/* Màn chờ và màn chào: hình Muse mới (assets/v2) — đêm sao trên đồi cát, thành Giê-ru-sa-lem cổ ửng bình minh, ma-na như sương trên cát */
html.bm #splash { background: #0b1033; }
html.bm #splash .sp-art { background: linear-gradient(180deg, rgba(11,16,51,.1), rgba(11,16,51,0) 30%, rgba(11,16,51,0) 62%, rgba(11,16,51,.6)), url('../assets/v2/splash-doc.webp') center/cover no-repeat, #0b1033; }
@media (orientation: landscape) and (min-width: 700px) {
  html.bm #splash .sp-art { background: linear-gradient(180deg, rgba(11,16,51,.1), rgba(11,16,51,0) 30%, rgba(11,16,51,0) 62%, rgba(11,16,51,.6)), url('../assets/v2/splash-ngang.webp') center/cover no-repeat, #0b1033; }
}
html.bm .welcome.splash-bg { background: linear-gradient(180deg, rgba(11,16,51,.3), rgba(11,16,51,.55) 30%, rgba(11,16,51,.75)), url('../assets/v2/splash-doc.webp') center/cover no-repeat, #0b1033; }
html.bm .welcome .panel { background: rgba(13,27,64,.86); }
html.bm .wc-skip .btn.ghost { background: rgba(13,27,64,.92); }
html.bm .sp-bar { background: rgba(4,10,30,.6); }

/* ===== Bộ hình mới của Muse (assets/v2) ===== */
html.bm .avatar { background: url('../assets/v2/logo-the.webp?v=1') center/86% no-repeat, radial-gradient(circle, #2a4a96, #0f1f4a); }
html.bm .hero .emblem { background-image: url('../assets/v2/logo-the.webp?v=1'); }
/* Khung Sử thi mới đã đúng điều tím trầm: bỏ bộ lọc làm dịu */
html.bm .card.t2 .front .frame.img, html.bm .card.t2 .back .bkimg { filter: none; }
/* Ô chữ nằm đúng ô giấy của 4 khung mới (đo trên assets/v2/frame-*.webp, chừa 1,5–2% lề) */
html.bm .card .front .frame.img ~ .paper { left: 21%; right: 21%; top: 19%; bottom: 19%; }
html.bm .card.t1 .front .frame.img ~ .paper { left: 21%; right: 21%; top: 23.5%; bottom: 23%; }
html.bm .card.t2 .front .frame.img ~ .paper { left: 19%; right: 19%; top: 18.5%; bottom: 18.5%; }
html.bm .card.t3 .front .frame.img ~ .paper { left: 20%; right: 20%; top: 22%; bottom: 23%; }
html.bm .card.t3 .pts { left: calc(4.5 * var(--cq, 1cqw)); top: calc(4.5 * var(--cq, 1cqw)); }
html.bm .card.fn .front .frame.img ~ .paper { left: 21%; right: 21%; top: 23%; bottom: 25%; }

/* Ô giấy trong khung Muse (dot6) đã là giấy da thật: chỉ cho chữ "ăn mực" vào giấy */
html.bm .card .front .frame.img ~ .paper { z-index: 2; }
html.bm .card .front .frame.img ~ .paper .q,
html.bm .card .front .frame.img ~ .paper .fnname,
html.bm .card .front .frame.img ~ .paper .fndesc { color: #2a1606; text-shadow: 0 0 calc(.25 * var(--cq, 1cqw)) rgba(70,36,6,.45); mix-blend-mode: multiply; }
html.bm .card.fn .paper .fnname { text-shadow: 0 0 calc(.25 * var(--cq, 1cqw)) rgba(70,36,6,.45); }
/* Thẻ chức năng: bỏ mảng giấy trắng sau mô tả (giấy da đã đủ sáng), canh giữa, chữ to hơn */
html.bm .card.fn .front .frame.img ~ .paper { top: 22%; bottom: 22%; justify-content: center; }
html.bm .card.fn .paper .fndesc { background: none; box-shadow: none; padding: 0 calc(1 * var(--cq, 1cqw)); font-size: calc(5.4 * var(--cq, 1cqw)); }
html.bm .card.fn .paper .fnname { font-size: calc(7.6 * var(--cq, 1cqw)); }

/* Dễ đọc trên nền khung hoa văn sáng: các thanh ở Trang chủ đặc (không trong suốt) + làm mờ nền phía sau;
   tiêu đề và dòng phụ có bóng tối viền quanh chữ */
html.bm .nextstep, html.bm .guestbar, html.bm .installbar, html.bm .panel, html.bm .mode {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
html.bm .nextstep { background: linear-gradient(120deg, #3a3a7a, #14275c 55%, #0f1f4a); border-color: rgba(242,207,107,.75); }
html.bm .guestbar { background: linear-gradient(120deg, #6a2418, #3e140c); border: 1.5px solid rgba(255,170,130,.55); }
html.bm .installbar { background: linear-gradient(120deg, #22408a, #10224f); border-color: rgba(242,207,107,.5); }
html.bm .nextstep b, html.bm .guestbar b, html.bm .installbar b { color: #fff4cf; }
html.bm .nextstep span:last-child, html.bm .guestbar span, html.bm .installbar span { color: #dfe6f5; }
/* chữ tiêu đề tô vàng bằng background-clip nên dùng drop-shadow (text-shadow sẽ đè lên chữ) */
html.bm .hero h1, html.bm .screen-title {
  text-shadow: none; filter: drop-shadow(0 2px 0 #0a1433) drop-shadow(0 0 6px #0a1433) drop-shadow(0 0 12px rgba(10,20,51,.9));
}
html.bm .hero p, html.bm .screen-sub {
  color: #eef2fb; display: inline-block; padding: 2px 10px; border-radius: 99px; background: rgba(10,20,51,.78);
}
/* Tiêu đề màn hình: chữ vàng đặc trên dải xanh đêm (bỏ kiểu tô vàng bằng background-clip để có nền sau chữ) */
html.bm .screen-title {
  width: fit-content; padding: 1px 12px 3px; margin-left: -4px; border-radius: 12px;
  background: rgba(10,20,51,.85); -webkit-background-clip: border-box; background-clip: border-box;
  color: #f6d77f; filter: none; text-shadow: 0 1px 0 #6a4a12; box-shadow: 0 0 14px rgba(10,20,51,.8);
}

/* Độ tương phản chữ: chữ phụ gần trắng, đậm hơn, lớn hơn chút; ô bị khóa không còn bị làm mờ (chỉ hiện ổ khóa) */
html.bm { --muted: #dbe3f3; --text: #fbf8ef; }
html.bm .mode b { color: #fff1c2; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
html.bm .mode span { font-size: 13px; font-weight: 600; color: #eef2fb; text-shadow: 0 1px 2px rgba(0,0,0,.55); }
html.bm .mode.locked { filter: none; }
html.bm .mode.locked span:last-child { color: #ffe08a; }
html.bm .nav button { color: #e3e9f6; font-size: 11.5px; font-weight: 700; }
html.bm .nav button.on { color: #ffd970; }
html.bm .who small { color: #ffd970; font-weight: 600; }
html.bm .stars i { color: #8494c4; }
html.bm .small { font-size: 13px; }
html.bm .panel, html.bm .modal, html.bm .tip, html.bm .tour { color: #f6f3ea; }
html.bm .screen-sub { font-size: 13.5px; font-weight: 500; }
/* Logo sách mở (dot8) chi tiết hơn bản cũ: cho to hơn ở Trang chủ */
html.bm .hero .emblem { width: 128px; height: 128px; }
/* Màn chơi (luyện tập, đấu, mở gói): bỏ khung cột vàng của nền để thẻ nổi lên — chỉ trời đêm xanh chàm + sao mờ */
html.bm #app.focus {
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.7), transparent 2px),
    radial-gradient(1px 1px at 78% 9%, rgba(255,255,255,.6), transparent 2px),
    radial-gradient(1.5px 1.5px at 64% 32%, rgba(255,255,255,.55), transparent 2px),
    radial-gradient(1px 1px at 30% 62%, rgba(255,255,255,.5), transparent 2px),
    radial-gradient(1px 1px at 88% 74%, rgba(255,255,255,.55), transparent 2px),
    radial-gradient(1.5px 1.5px at 8% 86%, rgba(255,255,255,.5), transparent 2px),
    radial-gradient(ellipse at 50% 28%, #22377a, #121d4c 55%, #0a1030),
    #0a1030;
}

/* ===== 4 ô trả lời: bảng ngọc bích viền vàng, chữ cái trên đồng xu vàng =====
   Đúng: hào quang vàng + vệt sáng quét + lấp lánh (không dùng xanh lá). Sai: đỏ rượu nho trầm + rung (không đỏ chói). */
html.bm .ans {
  color: #f6f1e2; font-weight: 600; border-radius: 14px; border: 1.5px solid #c9a043; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 42%),
    linear-gradient(160deg, #2c4fa3, #18306c 55%, #0f1f4a);
  box-shadow: inset 0 0 0 3px rgba(10,20,51,.65), inset 0 0 0 4px rgba(242,207,107,.35), 0 4px 12px rgba(4,10,30,.55);
  transition: transform .1s, opacity .3s, box-shadow .2s, filter .2s;
}
html.bm .ans .k {
  width: 30px; height: 30px; color: #3a2206; font-size: 14px;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #f2c14e 45%, #a8740f);
  box-shadow: 0 0 0 1.5px #7a4c08, 0 2px 4px rgba(0,0,0,.45), inset 0 -2px 3px rgba(122,76,8,.45);
}
@media (hover: hover) { html.bm .ans:hover:not(:disabled) { filter: brightness(1.12); box-shadow: inset 0 0 0 3px rgba(10,20,51,.65), inset 0 0 0 4px rgba(242,207,107,.7), 0 0 14px rgba(242,207,107,.35), 0 4px 12px rgba(4,10,30,.55); } }
html.bm .ans.picked { outline: none; animation: chon 1s ease-in-out infinite alternate; }
@keyframes chon { to { box-shadow: inset 0 0 0 3px rgba(10,20,51,.65), inset 0 0 0 4px #f2cf6b, 0 0 18px rgba(242,207,107,.6), 0 4px 12px rgba(4,10,30,.55); } }
html.bm .ans.gone { opacity: .28; filter: grayscale(.6); }
html.bm .ans.hint { box-shadow: inset 0 0 0 3px rgba(10,20,51,.65), 0 0 0 2px #9cc8ff, 0 0 18px rgba(156,200,255,.6); }

/* Đúng: tấm vàng sáng, hào quang thở, vệt sáng quét qua, hạt sáng bung ra; đồng xu thành dấu ✓ */
html.bm .ans.right {
  color: #2a1606; border-color: #fff1b8;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%), linear-gradient(160deg, #ffe9a0, #f2c14e 50%, #c98a1d);
  animation: dungNay .45s cubic-bezier(.3,1.6,.5,1), dungSang 1.4s ease-in-out .45s infinite alternate;
  box-shadow: 0 0 0 2px #f2cf6b, 0 0 22px rgba(255,214,110,.75), 0 0 46px rgba(255,214,110,.35);
}
html.bm .ans.right::before { /* vệt sáng quét */
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.85), transparent); animation: quet .9s ease-out .1s both;
}
html.bm .ans.right::after { /* hạt sáng như ma-na */
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 30%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 30% 80%, #fff 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 55% 18%, #fff 0 1.6px, transparent 2.6px), radial-gradient(circle at 78% 70%, #fff 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 90% 28%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 44% 60%, #fff 0 1px, transparent 2px);
  animation: lapLanh 1.6s ease-in-out .3s infinite;
}
html.bm .ans.right .k { font-size: 0; background: radial-gradient(circle at 35% 30%, #fffbe6, #f6d77f 50%, #b98418); }
html.bm .ans.right .k::after { content: '✓'; font-size: 17px; font-weight: 900; color: #5a3806; }
@keyframes dungNay { 0% { transform: scale(1); } 50% { transform: scale(1.07); } 100% { transform: scale(1.02); } }
@keyframes dungSang { from { box-shadow: 0 0 0 2px #f2cf6b, 0 0 16px rgba(255,214,110,.55), 0 0 30px rgba(255,214,110,.25); } to { box-shadow: 0 0 0 2px #fff1b8, 0 0 26px rgba(255,214,110,.9), 0 0 56px rgba(255,214,110,.4); } }
@keyframes quet { to { left: 120%; } }
@keyframes lapLanh { 0%, 100% { opacity: .2; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-2px); } }

/* Sai: đỏ rượu nho trầm, rung, mờ dần; đồng xu thành dấu ✕ màu đồng sẫm */
html.bm .ans.wrong {
  color: #f3d6d2; border-color: #a8483c;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%), linear-gradient(160deg, #6e1f2a, #4a1019 55%, #2c0910);
  box-shadow: inset 0 0 0 3px rgba(20,4,8,.6), inset 0 0 0 4px rgba(214,120,100,.35), 0 0 16px rgba(160,40,40,.45);
  animation: saiRung .45s ease-in-out, saiMo .6s ease-out .45s forwards;
}
html.bm .ans.wrong .k { font-size: 0; background: radial-gradient(circle at 35% 30%, #e9b9a8, #a8483c 55%, #4a1019); box-shadow: 0 0 0 1.5px #2c0910; }
html.bm .ans.wrong .k::after { content: '✕'; font-size: 15px; font-weight: 900; color: #fff0ea; }
@keyframes saiRung { 15% { transform: translateX(-7px) rotate(-1deg); } 35% { transform: translateX(6px) rotate(1deg); } 55% { transform: translateX(-4px); } 75% { transform: translateX(3px); } 100% { transform: none; } }
@keyframes saiMo { to { filter: saturate(.75) brightness(.85); } }

/* Menu dưới: icon vàng đồng có bóng, mục đang chọn nằm trên huy hiệu tròn sáng (tạm, chờ bộ icon Muse) */
html.bm .nav button svg { color: #e8c46a; filter: drop-shadow(0 1px 0 #3a2206) drop-shadow(0 0 3px rgba(4,10,30,.8)); }
html.bm .nav button.on svg { color: #fff1c2; filter: drop-shadow(0 0 6px rgba(242,207,107,.9)); }

/* ===== Khung thẻ kiểu TCG (dot9: viền kim loại bo góc, vòng tròn điểm, thanh tiêu đề, ô giấy da lớn) =====
   Tọa độ đo trên frame-*.webp 600x840: 1cq = 6px ngang. Tên sách (.bk) đặt tuyệt đối vào thanh tiêu đề,
   tính từ góc ô giấy (.paper); điểm (.pts) nằm gọn trong vòng tròn của khung. */
html.bm .card .front .frame.img ~ .paper { left: 17.3%; right: 17.3%; top: 21.8%; bottom: 18.1%; }
html.bm .card.t1 .front .frame.img ~ .paper { left: 14.3%; right: 14%; top: 19%; bottom: 16.6%; }
html.bm .card.t2 .front .frame.img ~ .paper { left: 15.2%; right: 14%; top: 19.6%; bottom: 16.8%; }
html.bm .card.t3 .front .frame.img ~ .paper { left: 17.3%; right: 15.5%; top: 18.9%; bottom: 15.6%; }
html.bm .card .front .frame.img ~ .paper .bk {
  position: absolute; margin: 0; padding: 0 calc(2 * var(--cq, 1cqw)); display: flex; align-items: center; justify-content: center;
  background: none; border: 0; box-shadow: none; clip-path: none;
  left: calc(6.9 * var(--cq, 1cqw)); top: calc(-23 * var(--cq, 1cqw)); width: calc(67.2 * var(--cq, 1cqw)); height: calc(10.8 * var(--cq, 1cqw));
  font-size: calc(5.8 * var(--cq, 1cqw)); white-space: nowrap;
}
html.bm .card.t1 .front .frame.img ~ .paper .bk { left: calc(8.2 * var(--cq, 1cqw)); top: calc(-19.6 * var(--cq, 1cqw)); width: calc(69.5 * var(--cq, 1cqw)); height: calc(9.7 * var(--cq, 1cqw)); }
html.bm .card.t2 .front .frame.img ~ .paper .bk { left: calc(5.6 * var(--cq, 1cqw)); top: calc(-20.2 * var(--cq, 1cqw)); width: calc(72.5 * var(--cq, 1cqw)); height: calc(11.2 * var(--cq, 1cqw)); }
html.bm .card.t3 .front .frame.img ~ .paper .bk { left: calc(6 * var(--cq, 1cqw)); top: calc(-19 * var(--cq, 1cqw)); width: calc(68.3 * var(--cq, 1cqw)); height: calc(9.7 * var(--cq, 1cqw)); background: none; }
/* chữ tên sách: vàng ép kim trên thanh tối; Sử thi (thanh tím nhạt) chữ ngà viền tối; Huyền thoại (thanh vàng) chữ nâu khắc */
html.bm .card.t2 .front .frame.img ~ .paper .bk span { background-image: linear-gradient(180deg, #fffdf4, #f3e6c4); filter: drop-shadow(0 calc(.3 * var(--cq, 1cqw)) 0 #2a1650) drop-shadow(0 0 calc(.8 * var(--cq, 1cqw)) rgba(42,22,80,.8)); }
html.bm .card.t3 .front .frame.img ~ .paper .bk span { background-image: linear-gradient(180deg, #6a3f08, #3a2004); filter: drop-shadow(0 calc(.25 * var(--cq, 1cqw)) 0 rgba(255,240,190,.7)); }
/* điểm: viên ngọc vừa khít vòng tròn của khung (bỏ vòng viền riêng vì khung đã có) */
html.bm .card .front .frame.img ~ .pts, html.bm .card .pts {
  left: calc(9.5 * var(--cq, 1cqw)); top: calc(7.3 * var(--cq, 1cqw)); width: calc(10.3 * var(--cq, 1cqw)); height: calc(10.3 * var(--cq, 1cqw));
  font-size: calc(4.8 * var(--cq, 1cqw)); box-shadow: inset 0 calc(-.6 * var(--cq, 1cqw)) calc(1 * var(--cq, 1cqw)) rgba(0,0,0,.45), 0 0 calc(2 * var(--cq, 1cqw)) var(--tc);
}
html.bm .card.t1 .pts { left: calc(8 * var(--cq, 1cqw)); top: calc(8 * var(--cq, 1cqw)); width: calc(9 * var(--cq, 1cqw)); height: calc(9 * var(--cq, 1cqw)); font-size: calc(4.3 * var(--cq, 1cqw)); }
html.bm .card.t2 .pts { left: calc(8.5 * var(--cq, 1cqw)); top: calc(9 * var(--cq, 1cqw)); width: calc(8.3 * var(--cq, 1cqw)); height: calc(8.3 * var(--cq, 1cqw)); font-size: calc(4.1 * var(--cq, 1cqw)); }
html.bm .card.t3 .pts { left: calc(10.3 * var(--cq, 1cqw)); top: calc(8.3 * var(--cq, 1cqw)); width: calc(9.3 * var(--cq, 1cqw)); height: calc(9.3 * var(--cq, 1cqw)); font-size: calc(4.4 * var(--cq, 1cqw)); }
html.bm .card.big .pts { font-size: calc(4.6 * var(--cq, 1cqw)); }
/* thẻ chức năng dùng khung Huyền thoại: nội dung trong ô giấy */
html.bm .card.fn .front .frame.img ~ .paper { left: 17.3%; right: 15.5%; top: 19.5%; bottom: 16%; justify-content: center; }
html.bm .card.t0 .front .frame.img ~ .paper .bk span { background-image: linear-gradient(180deg, #fffbe6, #f6e3a8); filter: drop-shadow(0 calc(.3 * var(--cq, 1cqw)) 0 #1f2a0c) drop-shadow(0 0 calc(.8 * var(--cq, 1cqw)) rgba(20,30,8,.8)); }

/* Menu dưới: icon chạm vàng của Muse; mục đang chọn to hơn, sáng hào quang */
html.bm .nav button .navimg { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)) brightness(.88) saturate(.9); transition: transform .2s, filter .2s; }
html.bm .nav button.on .navimg { transform: translateY(-3px) scale(1.15); filter: drop-shadow(0 0 7px rgba(242,207,107,.85)) drop-shadow(0 2px 2px rgba(0,0,0,.5)); }

/* ===== Khung dot10 (hoa văn chạm nổi, mỗi bậc bố cục hơi khác): tọa độ đo trên frame-*.webp 600x840, 1cq = 6px ===== */
html.bm .card .front .frame.img ~ .paper { left: 17.7%; right: 16.8%; top: 28.9%; bottom: 19.2%; }
html.bm .card.t1 .front .frame.img ~ .paper { left: 18.2%; right: 16.7%; top: 23.5%; bottom: 15.7%; }
html.bm .card.t2 .front .frame.img ~ .paper { left: 17.2%; right: 15%; top: 22.1%; bottom: 15.2%; }
html.bm .card.t3 .front .frame.img ~ .paper { left: 15.3%; right: 17.3%; top: 25.5%; bottom: 16.1%; }
html.bm .card .front .frame.img ~ .paper .bk { left: calc(20.3 * var(--cq, 1cqw)); top: calc(-23.5 * var(--cq, 1cqw)); width: calc(48.7 * var(--cq, 1cqw)); height: calc(10.5 * var(--cq, 1cqw)); font-size: calc(5.4 * var(--cq, 1cqw)); }
html.bm .card.t1 .front .frame.img ~ .paper .bk { left: calc(13.5 * var(--cq, 1cqw)); top: calc(-22.6 * var(--cq, 1cqw)); width: calc(59.2 * var(--cq, 1cqw)); height: calc(11.3 * var(--cq, 1cqw)); }
html.bm .card.t2 .front .frame.img ~ .paper .bk { left: calc(13.1 * var(--cq, 1cqw)); top: calc(-19.6 * var(--cq, 1cqw)); width: calc(59.2 * var(--cq, 1cqw)); height: calc(10 * var(--cq, 1cqw)); }
html.bm .card.t3 .front .frame.img ~ .paper .bk { left: calc(18.9 * var(--cq, 1cqw)); top: calc(-21 * var(--cq, 1cqw)); width: calc(55.8 * var(--cq, 1cqw)); height: calc(9.8 * var(--cq, 1cqw)); }
/* Hiếm: thanh tiêu đề bạc sáng → chữ xanh chàm khắc */
html.bm .card.t1 .front .frame.img ~ .paper .bk span { background-image: linear-gradient(180deg, #1f3a7a, #0b1a44); filter: drop-shadow(0 calc(.25 * var(--cq, 1cqw)) 0 rgba(255,255,255,.75)); }
html.bm .card .pts { left: calc(13.3 * var(--cq, 1cqw)); top: calc(15.5 * var(--cq, 1cqw)); width: calc(13 * var(--cq, 1cqw)); height: calc(13 * var(--cq, 1cqw)); font-size: calc(5.8 * var(--cq, 1cqw)); }
html.bm .card.t1 .pts { left: calc(10.3 * var(--cq, 1cqw)); top: calc(9.2 * var(--cq, 1cqw)); width: calc(14.3 * var(--cq, 1cqw)); height: calc(14.3 * var(--cq, 1cqw)); font-size: calc(6.2 * var(--cq, 1cqw)); }
html.bm .card.t2 .pts { left: calc(10.1 * var(--cq, 1cqw)); top: calc(9.25 * var(--cq, 1cqw)); width: calc(13.5 * var(--cq, 1cqw)); height: calc(13.5 * var(--cq, 1cqw)); font-size: calc(6 * var(--cq, 1cqw)); }
html.bm .card.t3 .pts { left: calc(10.9 * var(--cq, 1cqw)); top: calc(12.9 * var(--cq, 1cqw)); width: calc(12.5 * var(--cq, 1cqw)); height: calc(12.5 * var(--cq, 1cqw)); font-size: calc(5.6 * var(--cq, 1cqw)); }
html.bm .card.big .pts { font-size: calc(5.8 * var(--cq, 1cqw)); }
html.bm .card.fn .front .frame.img ~ .paper { left: 15.3%; right: 17.3%; top: 26%; bottom: 16.5%; }
/* điểm dot10: cùng độ ưu tiên với quy tắc dot9 (.frame.img ~ .pts) để thay thế nó */
html.bm .card.t0 .front .frame.img ~ .pts, html.bm .card.t0 .pts { left: calc(13.3 * var(--cq, 1cqw)); top: calc(15.5 * var(--cq, 1cqw)); width: calc(13 * var(--cq, 1cqw)); height: calc(13 * var(--cq, 1cqw)); font-size: calc(5.8 * var(--cq, 1cqw)); }
html.bm .card.t1 .front .frame.img ~ .pts, html.bm .card.t1 .pts { left: calc(10.3 * var(--cq, 1cqw)); top: calc(9.2 * var(--cq, 1cqw)); width: calc(14.3 * var(--cq, 1cqw)); height: calc(14.3 * var(--cq, 1cqw)); font-size: calc(6.2 * var(--cq, 1cqw)); }
html.bm .card.t2 .front .frame.img ~ .pts, html.bm .card.t2 .pts { left: calc(10.1 * var(--cq, 1cqw)); top: calc(9.25 * var(--cq, 1cqw)); width: calc(13.5 * var(--cq, 1cqw)); height: calc(13.5 * var(--cq, 1cqw)); font-size: calc(6 * var(--cq, 1cqw)); }
html.bm .card.t3 .front .frame.img ~ .pts, html.bm .card.t3 .pts { left: calc(10.9 * var(--cq, 1cqw)); top: calc(12.9 * var(--cq, 1cqw)); width: calc(12.5 * var(--cq, 1cqw)); height: calc(12.5 * var(--cq, 1cqw)); font-size: calc(5.6 * var(--cq, 1cqw)); }

/* ===== Tên cấp thẻ trên thanh tiêu đề (.bk.cap): chữ khắc / ép kim kiểu thẻ sưu tầm =====
   In hoa giãn chữ, hai bên có hoa văn thoi + đường kẻ; màu kim loại theo cấp */
html.bm .card .front .frame.img ~ .paper .bk.cap { gap: calc(2.2 * var(--cq, 1cqw)); }
html.bm .card .paper .bk.cap span {
  font-family: var(--font-title); font-weight: 900; font-size: calc(5.6 * var(--cq, 1cqw)); line-height: 1;
  text-transform: uppercase; letter-spacing: .2em; padding-left: .2em; /* bù khoảng giãn cuối chữ cho cân */
}
html.bm .card .paper .bk.cap::before, html.bm .card .paper .bk.cap::after {
  content: ''; flex: none; width: calc(7 * var(--cq, 1cqw)); height: calc(2.2 * var(--cq, 1cqw));
  background:
    linear-gradient(45deg, transparent 38%, var(--orn) 38% 62%, transparent 62%) right center / calc(2.2 * var(--cq, 1cqw)) calc(2.2 * var(--cq, 1cqw)) no-repeat,
    linear-gradient(-45deg, transparent 38%, var(--orn) 38% 62%, transparent 62%) right center / calc(2.2 * var(--cq, 1cqw)) calc(2.2 * var(--cq, 1cqw)) no-repeat,
    linear-gradient(90deg, transparent, var(--orn)) left center / calc(100% - 2.6 * var(--cq, 1cqw)) calc(.35 * var(--cq, 1cqw)) no-repeat;
  filter: drop-shadow(0 calc(.25 * var(--cq, 1cqw)) 0 var(--orn-sh));
}
html.bm .card .paper .bk.cap::after { transform: scaleX(-1); }
/* Thường: đồng ép kim trên nền ô-li-ve */
html.bm .card.t0 .paper .bk.cap { --orn: #e7b877; --orn-sh: rgba(20,28,6,.8); }
html.bm .card.t0 .paper .bk.cap span { background-image: linear-gradient(180deg, #fff1cf 0%, #f2c27e 45%, #b8742c 55%, #f7d6a0 100%); filter: drop-shadow(0 calc(.35 * var(--cq, 1cqw)) 0 #1c2408) drop-shadow(0 0 calc(1 * var(--cq, 1cqw)) rgba(20,28,6,.7)); }
/* Hiếm: xanh chàm khắc chìm vào bạc (bóng sáng phía dưới như chữ đục) */
html.bm .card.t1 .paper .bk.cap { --orn: #1f3f8a; --orn-sh: rgba(255,255,255,.8); }
html.bm .card.t1 .paper .bk.cap span { background-image: linear-gradient(180deg, #0b1d4e 0%, #2a55b8 55%, #0d2260 100%); filter: drop-shadow(0 calc(.3 * var(--cq, 1cqw)) 0 rgba(255,255,255,.9)) drop-shadow(0 calc(-.2 * var(--cq, 1cqw)) 0 rgba(10,20,50,.35)); }
/* Sử thi: vàng ép kim trên nền tím, viền tím đậm */
html.bm .card.t2 .paper .bk.cap { --orn: #f2cf6b; --orn-sh: rgba(40,16,70,.9); }
html.bm .card.t2 .paper .bk.cap span { background-image: linear-gradient(180deg, #fffbe6 0%, #ffe08a 45%, #d49b2a 56%, #fff0b8 100%); filter: drop-shadow(0 calc(.35 * var(--cq, 1cqw)) 0 #2a1046) drop-shadow(0 0 calc(1.2 * var(--cq, 1cqw)) rgba(42,16,70,.85)); }
/* Huyền thoại: nâu đồng khắc vào vàng, có vệt sáng chạy qua chữ */
html.bm .card.t3 .paper .bk.cap { --orn: #7a4a0c; --orn-sh: rgba(255,240,190,.7); }
html.bm .card.t3 .paper .bk.cap span {
  background-image: linear-gradient(100deg, #4a2a04 0%, #7a4a0c 40%, #fff2c0 50%, #7a4a0c 60%, #4a2a04 100%);
  background-size: 250% 100%; animation: anhKim 3.2s ease-in-out infinite;
  filter: drop-shadow(0 calc(.3 * var(--cq, 1cqw)) 0 rgba(255,244,200,.85));
}
@keyframes anhKim { 0% { background-position: 100% 0; } 60%, 100% { background-position: 0 0; } }
/* hoa văn hai bên: đường kẻ nhạt dần + viên thoi ◆ (không dùng hình chéo dễ giống dấu thập) */
html.bm .card .paper .bk.cap::before, html.bm .card .paper .bk.cap::after {
  content: '◆'; width: auto; height: auto; transform: none; filter: drop-shadow(0 calc(.25 * var(--cq, 1cqw)) 0 var(--orn-sh));
  font-size: calc(2.4 * var(--cq, 1cqw)); line-height: 1; color: var(--orn);
  background: linear-gradient(90deg, transparent, var(--orn)) left center / calc(5 * var(--cq, 1cqw)) calc(.35 * var(--cq, 1cqw)) no-repeat;
  padding-left: calc(5.6 * var(--cq, 1cqw));
}
html.bm .card .paper .bk.cap::after {
  background: linear-gradient(270deg, transparent, var(--orn)) right center / calc(5 * var(--cq, 1cqw)) calc(.35 * var(--cq, 1cqw)) no-repeat;
  padding-left: 0; padding-right: calc(5.6 * var(--cq, 1cqw));
}
/* Huyền thoại: chữ dài nhất → nhỏ hơn, giãn ít hơn, hoa văn ngắn lại */
html.bm .card.t3 .paper .bk.cap { gap: calc(1.4 * var(--cq, 1cqw)); }
html.bm .card.t3 .paper .bk.cap span { font-size: calc(4.7 * var(--cq, 1cqw)); letter-spacing: .12em; padding-left: .12em; }
html.bm .card.t3 .paper .bk.cap::before { background-size: calc(3 * var(--cq, 1cqw)) calc(.35 * var(--cq, 1cqw)); padding-left: calc(3.4 * var(--cq, 1cqw)); }
html.bm .card.t3 .paper .bk.cap::after { background-size: calc(3 * var(--cq, 1cqw)) calc(.35 * var(--cq, 1cqw)); padding-right: calc(3.4 * var(--cq, 1cqw)); }
/* Huyền thoại (đã cắt viền trắng trên/dưới, ảnh giãn dọc ~3%): canh lại ô giấy, tên cấp, điểm */
html.bm .card.t3 .front .frame.img ~ .paper { top: 25.2%; bottom: 14.5%; }
html.bm .card.t3 .front .frame.img ~ .paper .bk { top: calc(-21.6 * var(--cq, 1cqw)); height: calc(10.1 * var(--cq, 1cqw)); }
html.bm .card.t3 .front .frame.img ~ .pts, html.bm .card.t3 .pts { top: calc(12.1 * var(--cq, 1cqw)); }
/* tên riêng có gạch nối (Ba-la-am, Áp-ra-ham…) không bị ngắt giữa chừng xuống dòng */
.nw { white-space: nowrap; }

/* Huyền thoại: ảnh khung gốc lệch (mép phải có viền vàng trơn, mép trái không) → phủ một viền vàng vát cạnh đều 4 phía */
html.bm .card.t3 .front::before {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  box-shadow:
    inset 0 0 0 calc(.5 * var(--cq, 1cqw)) #5a3a08,
    inset 0 0 0 calc(1.3 * var(--cq, 1cqw)) #d9ad4a,
    inset 0 0 0 calc(1.6 * var(--cq, 1cqw)) #fff0b8,
    inset 0 0 0 calc(2 * var(--cq, 1cqw)) #8a5e14,
    inset 0 0 calc(3.5 * var(--cq, 1cqw)) calc(2 * var(--cq, 1cqw)) rgba(60,36,4,.35);
}

/* ===== Mặt sau thẻ: ảnh Muse là tranh tràn mép, bo góc làm mất các góc → đặt tranh vào trong một viền kim loại theo cấp ===== */
html.bm .card .back { background: linear-gradient(135deg, var(--m1), var(--m2) 30%, var(--m1) 52%, var(--m3) 78%, var(--m1)); }
html.bm .card.t0 .back { --m1: #d9a46a; --m2: #7a4a1c; --m3: #a8703a; }
html.bm .card.t1 .back { --m1: #f4f6f9; --m2: #8d96a4; --m3: #c3cad4; }
html.bm .card.t2 .back { --m1: #f6d98a; --m2: #8a5e14; --m3: #c99a3a; }
html.bm .card.t3 .back, html.bm .card.fn .back { --m1: #fff0b8; --m2: #a8740f; --m3: #e2b54e; }
html.bm .back .bkimg { top: calc(2.6 * var(--cq, 1cqw)); right: calc(2.6 * var(--cq, 1cqw)); bottom: calc(2.6 * var(--cq, 1cqw)); left: calc(2.6 * var(--cq, 1cqw));
  border-radius: calc(3.4 * var(--cq, 1cqw)); box-shadow: 0 0 0 calc(.4 * var(--cq, 1cqw)) rgba(40,24,4,.55), inset 0 0 calc(3 * var(--cq, 1cqw)) rgba(0,0,0,.35); }
html.bm .back .tiertag { bottom: calc(5 * var(--cq, 1cqw)); }

/* ===== Tên cấp thẻ: font Lora đậm (dấu tiếng Việt rõ ở cỡ nhỏ). Chữ tô màu kim loại bằng background-clip nên
   vùng tô phải cao đủ chỗ dấu (Ề, Ạ…): line-height rộng + đệm trên, nếu không dấu bị cắt mất ===== */
html.bm .card .paper .bk.cap span {
  font-family: 'Lora', Georgia, serif; font-weight: 700; font-size: calc(5.2 * var(--cq, 1cqw));
  line-height: 1.55; padding: .12em .1em 0 .26em; letter-spacing: .16em;
}
html.bm .card.t3 .paper .bk.cap span { font-size: calc(4.6 * var(--cq, 1cqw)); letter-spacing: .1em; padding-left: .14em; }

/* ===== Thẻ nhỏ: tên sách nằm trong giấy (thanh tiêu đề đã ghi tên cấp), bỏ nhãn cấp ở đáy cho đỡ lặp ===== */
html.bm .card:not(.big) .paper .bkname { font-family: var(--font-title); font-weight: 800; font-size: calc(6.4 * var(--cq, 1cqw)); line-height: 1.15; color: #2a1606; text-align: center; margin-top: calc(1 * var(--cq, 1cqw)); }
html.bm .card:not(.big) .paper { justify-content: center; gap: calc(.6 * var(--cq, 1cqw)); }
html.bm .card:not(.big) .paper .q:empty { display: none; }
/* Thẻ chức năng (khung Huyền thoại): thanh tiêu đề ghi "CHỨC NĂNG", vòng tròn có viên ngọc ✦ */
html.bm .card.fn .front .frame.img ~ .paper .bk { left: calc(18.9 * var(--cq, 1cqw)); top: calc(-22.7 * var(--cq, 1cqw)); width: calc(55.8 * var(--cq, 1cqw)); height: calc(10.1 * var(--cq, 1cqw)); }
html.bm .card.fn .paper .bk.cap { --orn: #7a4a0c; --orn-sh: rgba(255,240,190,.7); gap: calc(1.4 * var(--cq, 1cqw)); }
html.bm .card.fn .paper .bk.cap span { font-size: calc(4.6 * var(--cq, 1cqw)); letter-spacing: .1em; padding-left: .14em; background-image: linear-gradient(180deg, #6a3f08, #3a2004); filter: drop-shadow(0 calc(.25 * var(--cq, 1cqw)) 0 rgba(255,240,190,.75)); }
html.bm .card.fn .paper .bk.cap::before { background-size: calc(3 * var(--cq, 1cqw)) calc(.35 * var(--cq, 1cqw)); padding-left: calc(3.4 * var(--cq, 1cqw)); }
html.bm .card.fn .paper .bk.cap::after { background-size: calc(3 * var(--cq, 1cqw)) calc(.35 * var(--cq, 1cqw)); padding-right: calc(3.4 * var(--cq, 1cqw)); }
html.bm .card.fn .pts { --tl: #fff1c4; --tc: #e2a83a; --td: #8a5a10; left: calc(10.9 * var(--cq, 1cqw)); top: calc(12.1 * var(--cq, 1cqw)); width: calc(12.5 * var(--cq, 1cqw)); height: calc(12.5 * var(--cq, 1cqw)); font-size: calc(6 * var(--cq, 1cqw)); }
html.bm .card.fn .front .frame.img ~ .pts { left: calc(10.9 * var(--cq, 1cqw)); top: calc(12.1 * var(--cq, 1cqw)); width: calc(12.5 * var(--cq, 1cqw)); height: calc(12.5 * var(--cq, 1cqw)); font-size: calc(6 * var(--cq, 1cqw)); }


/* ===== Logo trang chủ: hào quang thở, tia sáng xoay chậm, vệt sáng lướt qua mặt logo, hạt ma-na lấp lánh rơi ===== */
html.bm .hero .emfx { position: relative; width: 150px; height: 150px; margin: 0 auto 2px; display: grid; place-items: center; animation: floaty 4s ease-in-out infinite; }
html.bm .hero .emfx .emblem { position: relative; z-index: 2; width: 128px; height: 128px; margin: 0; animation: none;
  filter: drop-shadow(0 0 10px rgba(255,214,110,.75)) drop-shadow(0 6px 10px rgba(4,10,30,.7)); }
html.bm .emfx i { position: absolute; pointer-events: none; font-style: normal; }
/* tia sáng: 12 tia mảnh xoay chậm phía sau, mờ dần ra ngoài */
html.bm .emfx .em-rays { inset: -38px; z-index: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,226,140,.38) 0deg 4deg, transparent 4deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 18%, rgba(0,0,0,.6) 40%, transparent 68%); mask: radial-gradient(circle, #000 18%, rgba(0,0,0,.6) 40%, transparent 68%);
  animation: emSpin 24s linear infinite; }
/* hào quang vàng thở */
html.bm .emfx .em-halo { inset: 8px; z-index: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,236,170,.75) 0%, rgba(242,193,78,.4) 38%, rgba(242,193,78,0) 68%);
  animation: emBreath 3.2s ease-in-out infinite; }
/* vệt sáng lướt qua đúng hình logo (mặt nạ = ảnh logo) */
html.bm .emfx .em-shine { width: 128px; height: 128px; z-index: 3; mix-blend-mode: screen;
  -webkit-mask: url('../assets/v2/logo-the.webp?v=1') center/contain no-repeat; mask: url('../assets/v2/logo-the.webp?v=1') center/contain no-repeat;
  background: linear-gradient(110deg, transparent 35%, rgba(255,250,225,.95) 48%, rgba(255,255,255,.2) 54%, transparent 62%) 0 0 / 300% 100% no-repeat;
  animation: emShine 4.5s ease-in-out infinite; }
/* hạt ma-na: chấm sáng li ti rơi chậm, lấp lánh */
html.bm .emfx .em-dust { inset: -10px -20px 0; z-index: 4;
  background:
    radial-gradient(circle at 12% 10%, #fff 0 1.3px, transparent 2.2px), radial-gradient(circle at 30% 0%, #fff6d0 0 1px, transparent 2px),
    radial-gradient(circle at 52% 6%, #fff 0 1.5px, transparent 2.5px), radial-gradient(circle at 70% 2%, #ffeab0 0 1.1px, transparent 2px),
    radial-gradient(circle at 88% 12%, #fff 0 1.3px, transparent 2.3px), radial-gradient(circle at 42% 18%, #fff 0 .9px, transparent 1.8px);
  animation: emFall 5s linear infinite; opacity: 0; }
html.bm .emfx .em-dust.d2 { transform: scaleX(-1); animation-delay: 2.5s; }
@keyframes emSpin { to { transform: rotate(360deg); } }
@keyframes emBreath { 0%, 100% { transform: scale(.88); opacity: .65; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes emShine { 0%, 45% { background-position: 120% 0; } 75%, 100% { background-position: -40% 0; } }
@keyframes emFall { 0% { transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: .9; } 100% { transform: translateY(120px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.bm .emfx, html.bm .emfx i { animation: none !important; } }

/* ===== Hình tên game (Muse): chỉ dùng ở giao diện Ngọc bích; chữ h1 giữ cho trình đọc màn hình và giao diện cũ ===== */
.ten-img { display: none; }
html.bm .ten-img { display: block; margin: 0 auto; width: min(100%, 340px); height: auto; filter: drop-shadow(0 6px 14px rgba(4,10,30,.8)); }
html.bm .ten-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.bm .hero h1, html.bm .sp-title h1, html.bm .wc-head h1 { background: none; filter: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; margin: 0 0 4px; line-height: 0; }
html.bm .hero .ten-img { width: min(86%, 300px); margin-top: -6px; }
html.bm .sp-title .ten-img, html.bm .wc-head .ten-img { width: min(92%, 380px); }
/* hình không tải được: hiện lại chữ như cũ */
html.bm h1.noimg { line-height: 1.1; }
html.bm .hero h1.noimg, html.bm .sp-title h1.noimg, html.bm .wc-head h1.noimg { background: linear-gradient(180deg, #fff7d6, #f0c45a 50%, #a8701e); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.bm h1.noimg .ten-txt { position: static; width: auto; height: auto; overflow: visible; clip: auto; }

/* Trang chủ: logo và tên game nằm ngang hàng cho gọn (đỡ chiếm chiều cao), câu khẩu hiệu bên dưới */
html.bm .hero { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 2px; padding: 2px 0 4px; }
html.bm .hero .emfx { width: 104px; height: 104px; margin: 0; }
html.bm .hero .emfx .emblem, html.bm .hero .emfx .em-shine { width: 88px; height: 88px; }
html.bm .hero .emfx .em-rays { inset: -22px; }
html.bm .hero h1 { margin: 0; }
html.bm .hero .ten-img { width: min(52vw, 200px); margin: 0; }
html.bm .hero > p { grid-column: 1 / -1; justify-self: center; margin-top: 4px; }
/* logo thẻ (Gemini): rộng hơn logo tròn cũ → cho to hơn chút; ánh sáng + hạt ma-na do hiệu ứng phía sau vẽ */
html.bm .hero .emfx { width: 128px; height: 116px; }
html.bm .hero .emfx .emblem, html.bm .hero .emfx .em-shine { width: 124px; height: 124px; }
html.bm .hero .emfx .em-rays { inset: -26px; }
/* logo thẻ nhiều mảng màu kem: hào quang dịu lại để 3 thẻ không bị chói lẫn vào nhau */
html.bm .hero .emfx .em-halo { inset: 14px; opacity: .45; background: radial-gradient(circle, rgba(255,226,140,.55) 0%, rgba(242,193,78,.25) 40%, rgba(242,193,78,0) 70%); }
html.bm .hero .emfx .em-rays { opacity: .55; }
html.bm .hero .emfx .emblem { filter: drop-shadow(0 0 6px rgba(255,214,110,.45)) drop-shadow(0 4px 8px rgba(4,10,30,.8)); }
html.bm .hero .emfx .em-shine { opacity: .6; }

/* ===== Điểm của thẻ: mặt men chìm trong vòng kim loại của khung, chữ số đúc kim loại cùng màu khung =====
   Tâm + bán kính đo trên frame-*.webp 600x840 (1cq = 6px): Thường (131,132) r51 · Hiếm (104,99) r49 · Sử thi (101,99) r47 · Huyền thoại (100,105) r43.
   Mỗi bậc: --e1/--e2 men (sáng/tối), --m1/--m2/--m3 kim loại của chữ số, --mg viền tối khắc quanh chữ */
html.bm .card .front .frame.img ~ .pts, html.bm .card .pts {
  --e1: #5c6a34; --e2: #252c10; --m1: #fff6d8; --m2: #e3c27a; --m3: #9a6a2c; --mg: #1c1f08;
  left: calc(13.33 * var(--cq, 1cqw)); top: calc(13.5 * var(--cq, 1cqw)); width: calc(17 * var(--cq, 1cqw)); height: calc(17 * var(--cq, 1cqw));
  display: grid; place-items: center; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 38% at 50% 14%, rgba(255,255,255,.28), rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 42%, var(--e1) 0%, var(--e2) 78%);
  box-shadow: inset 0 calc(1.1 * var(--cq, 1cqw)) calc(1.6 * var(--cq, 1cqw)) rgba(0,0,0,.65), inset 0 calc(-.5 * var(--cq, 1cqw)) calc(.8 * var(--cq, 1cqw)) rgba(255,240,200,.18);
  text-shadow: none; color: var(--m2);
  font-family: var(--font-title); font-weight: 900; font-size: calc(8 * var(--cq, 1cqw)); letter-spacing: -.03em; line-height: 1;
}
/* chữ số đúc kim loại: dải sáng – tối như mặt kim loại, viền khắc tối + bóng đổ chìm vào men */
html.bm .card .pts b {
  display: block; font: inherit; padding-top: calc(.4 * var(--cq, 1cqw));
  background: linear-gradient(180deg, var(--m1) 0%, var(--m2) 46%, var(--m3) 54%, var(--m2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(.35 * var(--cq, 1cqw)) 0 var(--mg)) drop-shadow(0 0 calc(.5 * var(--cq, 1cqw)) rgba(0,0,0,.55));
}
/* vệt sáng lướt qua chậm (chỉ Sử thi, Huyền thoại, thẻ chức năng) */
html.bm .card .pts::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.38) 50%, rgba(255,255,255,0) 65%); background-size: 260% 100%; }
html.bm .card.t2 .pts::after, html.bm .card.t3 .pts::after, html.bm .card.fn .pts::after { opacity: 1; animation: ptsGlint 5.5s ease-in-out infinite; }
@keyframes ptsGlint { 0%, 62% { background-position: 130% 0; } 92%, 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { html.bm .card .pts::after { animation: none !important; opacity: 0 !important; } }

/* Hiếm: men xanh chàm, chữ bạc */
html.bm .card.t1 .front .frame.img ~ .pts, html.bm .card.t1 .pts {
  --e1: #2c4f9a; --e2: #0a1840; --m1: #ffffff; --m2: #dfe7f3; --m3: #8d9bb3; --mg: #06102c;
  left: calc(9.17 * var(--cq, 1cqw)); top: calc(8.33 * var(--cq, 1cqw)); width: calc(16.33 * var(--cq, 1cqw)); height: calc(16.33 * var(--cq, 1cqw)); font-size: calc(7.7 * var(--cq, 1cqw));
}
/* Sử thi: men tím, chữ vàng */
html.bm .card.t2 .front .frame.img ~ .pts, html.bm .card.t2 .pts {
  --e1: #6a3fa6; --e2: #20093f; --m1: #fff7d6; --m2: #f2cf6b; --m3: #a8741c; --mg: #1a0733;
  left: calc(9 * var(--cq, 1cqw)); top: calc(8.67 * var(--cq, 1cqw)); width: calc(15.67 * var(--cq, 1cqw)); height: calc(15.67 * var(--cq, 1cqw)); font-size: calc(7.4 * var(--cq, 1cqw));
}
/* Huyền thoại + thẻ chức năng (cùng khung): men đỏ hồng ngọc, chữ vàng ròng */
html.bm .card.t3 .front .frame.img ~ .pts, html.bm .card.t3 .pts, html.bm .card.fn .front .frame.img ~ .pts, html.bm .card.fn .pts {
  --e1: #a3243a; --e2: #3a0612; --m1: #fffbe6; --m2: #ffd760; --m3: #b07a12; --mg: #2a0410;
  left: calc(9.5 * var(--cq, 1cqw)); top: calc(10.33 * var(--cq, 1cqw)); width: calc(14.33 * var(--cq, 1cqw)); height: calc(14.33 * var(--cq, 1cqw)); font-size: calc(6.9 * var(--cq, 1cqw));
}
html.bm .card.big .front .frame.img ~ .pts b, html.bm .card.big .pts b { padding-top: calc(.3 * var(--cq, 1cqw)); }
/* Thường: men xanh ô-liu, chữ đồng (ghi rõ .t0 để thắng các quy tắc vị trí cũ cùng độ ưu tiên) */
html.bm .card.t0 .front .frame.img ~ .pts, html.bm .card.t0 .pts {
  left: calc(13.33 * var(--cq, 1cqw)); top: calc(13.5 * var(--cq, 1cqw)); width: calc(17 * var(--cq, 1cqw)); height: calc(17 * var(--cq, 1cqw)); font-size: calc(8 * var(--cq, 1cqw));
}