/* ================================================================
   GIAO DIỆN SƠN MÀI – VÀNG
   Lớp áo cho thanh trên cùng, màn tựa đề và mọi bảng (đội hình, hành trang, cửa hàng, tài khoản...):
   nền gỗ sơn mài tối, viền vàng có góc trang trí, khung màu theo phẩm.
   Nạp sau cùng nên đè lên kiểu giấy sáng cũ trong style.css / hub.css.
   ================================================================ */
:root {
  /* Phông: chữ thường không chân Be Vietnam Pro (dấu tiếng Việt gọn), tiêu đề Playfair Display */
  --font-ui: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --font-title: "Playfair Display", "Be Vietnam Pro", Georgia, serif;
  --tb-h: 56px;                       /* chiều cao thanh trên cùng; bảng bên dưới bắt đầu ngay dưới nó */
  --gold-hi: #f6dc8c;
  --gold-mid: #e9c46a;
  --gold-lo: #b8892f;
  --lac-text: #f1e4c6;
  --lac-soft: #bcab8b;
  --lac-line: rgba(233, 196, 106, .28);
}

/* ---------- Thanh trên cùng ---------- */
#topbar {
  height: var(--tb-h); padding: 0 14px; display: flex; flex-wrap: nowrap; align-items: center; gap: 12px;
  background: linear-gradient(#22170d, #120c07); border-bottom: 1px solid var(--gold-lo);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 8px 24px rgba(0, 0, 0, .5);
}
.tb-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.tb-seal {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 4px;
  font-size: 19px; color: #fff3d6; background: radial-gradient(circle at 40% 35%, #c2392d, #6e1d16);
  border: 1px solid var(--gold-mid); box-shadow: 0 0 10px rgba(233, 196, 106, .25);
}
#chapter-name { flex: initial; min-width: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-res { display: flex; gap: 6px; flex: none; }
.tb-res span {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px 3px 6px; border-radius: 15px;
  font-weight: 700; font-size: 15px; color: var(--gold-hi); text-shadow: none;
  background: rgba(0, 0, 0, .5); border: 1px solid var(--lac-line);
}
.tb-res i { font-style: normal; }
#topbar nav { display: flex; gap: 5px; flex: none; }
#topbar nav button {
  position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px 0 4px;
  border-radius: 19px; font-size: 14px; color: var(--lac-text); white-space: nowrap;
  background: linear-gradient(#2e2014, #1a120a); border: 1px solid rgba(233, 196, 106, .4);
}
#topbar nav button:hover { background: linear-gradient(#45301b, #24180d); border-color: var(--gold-mid); }
#topbar nav button i {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  font-style: normal; font-size: 15px; color: #2a1a0c;
  background: radial-gradient(circle at 35% 30%, #fdeab0, #d3a443 55%, #8a6420);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .35);
}
#topbar nav button span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
#topbar nav button.has-dot::after { top: 1px; right: 1px; }
/* Màn vừa: bỏ tên hồi trước; hẹp hơn thì thu nhỏ chữ trên nút */
@media (max-width: 1250px) { #chapter-name { display: none; } }
@media (max-width: 1290px) {
  #topbar { gap: 8px; padding: 0 8px; }
  #topbar nav { gap: 3px; }
  #topbar nav button { gap: 4px; padding: 0 8px 0 3px; font-size: 12px; height: 34px; }
  #topbar nav button i { width: 26px; height: 26px; font-size: 13px; }
  .tb-res span { font-size: 13px; padding: 2px 9px 2px 5px; }
}
/* Màn vừa (6 nút không đủ chỗ cho chữ): chỉ còn biểu tượng, rê chuột thấy tên */
@media (max-width: 900px) and (min-width: 761px) {
  #topbar nav button span { display: none; }
  #topbar nav button { padding: 0 3px; }
}
/* Điện thoại: 2 hàng, hàng dưới là các nút (ấn ở trên, chữ nhỏ ở dưới) */
@media (max-width: 760px) and (orientation: portrait) {
  :root { --tb-h: 102px; }
  #topbar { flex-wrap: wrap; align-content: center; row-gap: 6px; }
  #chapter-name { display: block; font-size: 14px; }
  #topbar nav { width: 100%; justify-content: space-between; }
  #topbar nav button { flex: 1; flex-direction: column; gap: 1px; height: auto; padding: 3px 0; border-radius: 8px; font-size: 10px; }
  #topbar nav button span { max-width: 100%; }
  #topbar nav { gap: 2px; }
  #topbar nav button { min-width: 0; }   /* 9 nút trên một hàng: chữ dài thì cắt bớt */
}
/* Bảng bắt đầu ngay dưới thanh trên, cuộn bên dưới nó nên không bị che */
.has-topbar .panel-screen { top: var(--tb-h); padding-top: 18px; }
.has-topbar .recruit-box { top: calc(var(--tb-h) + 10px); }

/* ---------- Khung bảng ---------- */
.panel-screen .scene-bg { filter: blur(2px) brightness(.5) saturate(.9); }
.panel {
  --ink: var(--lac-text); --ink-soft: var(--lac-soft); --line: var(--lac-line);
  --paper-2: rgba(255, 236, 190, .07); --red-dark: var(--gold-hi); --blue: #8fc3f0;
  color: var(--lac-text); border-radius: 6px; padding: 20px 24px 22px;
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(160, 95, 40, .22), transparent 60%),
    linear-gradient(rgba(32, 22, 14, .95), rgba(13, 9, 6, .97));
  border: 1px solid var(--gold-lo);
  box-shadow: 0 0 0 3px rgba(12, 8, 5, .92), 0 0 0 4px rgba(233, 196, 106, .45), 0 26px 70px rgba(0, 0, 0, .75);
}
/* Viền trong mảnh + 4 góc vàng hình thước thợ */
.panel::before {
  content: ''; position: absolute; inset: 6px; border: 1px solid rgba(233, 196, 106, .14); border-radius: 3px; pointer-events: none;
}
.panel::after {
  content: ''; position: absolute; inset: -3px; pointer-events: none;
  --c: linear-gradient(var(--gold-mid), var(--gold-mid));
  background:
    var(--c) top left / 26px 2px no-repeat, var(--c) top left / 2px 26px no-repeat,
    var(--c) top right / 26px 2px no-repeat, var(--c) top right / 2px 26px no-repeat,
    var(--c) bottom left / 26px 2px no-repeat, var(--c) bottom left / 2px 26px no-repeat,
    var(--c) bottom right / 26px 2px no-repeat, var(--c) bottom right / 2px 26px no-repeat;
}
.panel h2 {
  margin: 0 0 12px; padding-bottom: 10px; font-size: 28px; letter-spacing: 1px; line-height: 1.2;
  color: var(--gold-hi); background: linear-gradient(#fff3c4, #e9c46a 55%, #b8892f);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  border-bottom: 1px solid; border-image: linear-gradient(90deg, var(--gold-mid), transparent 70%) 1;
}
.panel h2 small { -webkit-text-fill-color: var(--lac-soft); font-size: 14px; margin-left: 6px; }
.panel h3 { color: var(--gold-mid); font-size: 17px; letter-spacing: .5px; margin: 18px 0 8px; }
.panel h3::before { content: '◆ '; font-size: 11px; vertical-align: 2px; color: var(--gold-lo); }
.panel .desc, .panel p { color: var(--lac-soft); }
.panel .desc b, .panel p b { color: var(--lac-text); }
.panel code { padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .45); border: 1px solid var(--lac-line); color: var(--gold-hi); }

/* Nút thường trong bảng: gỗ tối viền vàng (nút đỏ .btn-game giữ nguyên) */
:is(.panel, .title-card) button:where(:not(.btn-game)) {
  color: var(--lac-text); border: 1px solid rgba(233, 196, 106, .42); border-radius: 4px;
  background: linear-gradient(#3a2918, #22170d); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
:is(.panel, .title-card) button:where(:not(.btn-game)):hover:not(:disabled) {
  background: linear-gradient(#4f381f, #2c1e11); border-color: var(--gold-mid);
}
:is(.panel, .title-card) input:not([type="checkbox"]) {
  color: var(--lac-text); background: rgba(0, 0, 0, .42); border: 1px solid rgba(233, 196, 106, .38); border-radius: 4px;
  padding: 10px 12px; font: inherit; outline: none;
}
:is(.panel, .title-card) input:not([type="checkbox"]):focus { border-color: var(--gold-mid); box-shadow: 0 0 0 3px rgba(233, 196, 106, .18); }
:is(.panel, .title-card) input::placeholder { color: #8d7c60; }
.panel .bar { background: rgba(0, 0, 0, .45); }
.panel .bar.xp > i { background: linear-gradient(90deg, #b8892f, #f6dc8c); }

/* Thẻ chuyển trang (Thông tin / Tiềm năng / Trang bị, lọc hành trang, cửa hàng) */
:is(.panel, .hm-box) .fd-tabs { border-bottom: 1px solid var(--lac-line); gap: 2px; }
:is(.panel, .hm-box) .fd-tab {
  padding: 8px 16px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; box-shadow: none;
  color: var(--lac-soft); background: transparent;
}
:is(.panel, .hm-box) .fd-tab:hover:not(:disabled) { color: var(--lac-text); background: rgba(233, 196, 106, .06); border-color: transparent; }
:is(.panel, .hm-box) .fd-tab.on { color: var(--gold-hi); border-bottom-color: var(--gold-mid); background: linear-gradient(transparent, rgba(233, 196, 106, .14)); }

/* ---------- Đội hình ---------- */
.panel .f-head { color: var(--gold-mid); }
.panel .f-cell {
  overflow: hidden; border: 1px dashed rgba(233, 196, 106, .3); border-radius: 8px;
  background: radial-gradient(ellipse 60% 22% at 50% 86%, rgba(233, 196, 106, .14), transparent), rgba(0, 0, 0, .3);
}
.panel .f-cell.filled {
  border: 1px solid var(--g, var(--gold-lo));
  background: radial-gradient(ellipse 70% 26% at 50% 84%, color-mix(in srgb, var(--g, #e9c46a) 45%, transparent), transparent),
    linear-gradient(rgba(255, 236, 190, .05), rgba(0, 0, 0, .35));
}
.panel .f-cell.picked { border-color: var(--gold-hi); box-shadow: 0 0 0 1px var(--gold-hi), 0 0 18px rgba(233, 196, 106, .5); }
.panel .f-cell .thumb, .panel .r-card .thumb { max-width: 100%; object-fit: contain; object-position: bottom; }
.panel .f-name { color: var(--lac-text); }
.panel .f-plus { color: rgba(233, 196, 106, .35); }

.panel .f-detail {
  border: 1px solid var(--lac-line); border-radius: 8px; padding: 12px 16px;
  background: linear-gradient(rgba(255, 236, 190, .05), rgba(0, 0, 0, .22));
}
.panel .fd-head {
  margin: -12px -16px 0; padding: 12px 16px 6px; border-radius: 8px 8px 0 0;
  background: radial-gradient(ellipse 34% 100% at 16% 100%, color-mix(in srgb, var(--g, #e9c46a) 40%, transparent), transparent 75%);
}
.panel .fd-name { font-size: 24px; font-family: var(--font-title); text-shadow: 0 2px 6px rgba(0, 0, 0, .6); }
.panel .fd-role {
  background: rgba(155, 44, 34, .55); border: 1px solid rgba(233, 196, 106, .5); color: var(--gold-hi); padding: 1px 10px;
}
.panel .fd-hint { color: #9c8c6e; }
.panel .skill-list li { border-top-color: rgba(233, 196, 106, .14); color: var(--lac-soft); }
.panel .skill-list li b { color: var(--lac-text); }
.panel .kind-ngoai { color: #f0b27a; } .panel .kind-noi { color: #c9a6ff; }
.panel .kind-tri { color: #8fe0a8; } .panel .kind-ho { color: #f1d38a; }

/* Bảng chỉ số: mỗi chỉ số một ô có ấn chữ màu */
.panel .stats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; margin: 10px 0; }
.panel .stats .st {
  display: flex; align-items: center; gap: 7px; padding: 4px 9px 4px 4px; border-radius: 6px; font-size: 13px;
  color: var(--lac-soft); background: rgba(0, 0, 0, .3); border: 1px solid rgba(233, 196, 106, .14);
}
.panel .stats .st i {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 4px;
  font-style: normal; font-size: 13px; color: #fff; background: var(--sc, #6b5a3a); box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .4);
}
.panel .stats .st b { margin-left: auto; color: var(--lac-text); font-size: 15px; }

/* Tiềm năng */
.panel .attr-free { color: var(--lac-soft); }
.panel .attr-free b { color: var(--gold-hi); font-size: 22px; }
.panel .attr-row {
  grid-template-columns: 96px 40px 1fr auto auto; padding: 6px 8px; border-radius: 6px;
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(233, 196, 106, .14);
}
.panel .attr-row .at-name { color: var(--lac-text); white-space: nowrap; }
.panel .attr-row .at-val { color: var(--gold-hi); font-size: 18px; }
.panel .attr-row small { color: var(--lac-soft); }
.panel .attr-row button {
  min-width: 42px; padding: 3px 0; border-radius: 15px; font-weight: 700; font-size: 13px; color: #2a1a0c;
  background: radial-gradient(circle at 40% 30%, #fde7a6, #c99a3a 70%); border: 1px solid #f6dc8c;
}
.panel .attr-row button:disabled { color: #8d7c60; background: rgba(0, 0, 0, .3); border-color: rgba(233, 196, 106, .2); opacity: 1; }
.panel .attr-actions .toggle.on { background: linear-gradient(#2c4a26, #1a2e16); border-color: #7dc36b; color: #d6f5c8; }

/* Thẻ nhân vật trong danh sách: khung + ánh màu theo phẩm */
.panel .r-card {
  overflow: hidden; border: 1px solid var(--g, var(--gold-lo)); border-radius: 8px; color: var(--lac-text);
  background: linear-gradient(rgba(255, 236, 190, .03) 35%, color-mix(in srgb, var(--g, #e9c46a) 32%, rgba(0, 0, 0, .5)));
  box-shadow: inset 0 0 16px color-mix(in srgb, var(--g, #e9c46a) 22%, transparent);
}
.panel .r-card:hover:not(:disabled) {
  background: linear-gradient(rgba(255, 236, 190, .06) 35%, color-mix(in srgb, var(--g, #e9c46a) 42%, rgba(0, 0, 0, .5)));
  border-color: var(--g);
}
.panel .r-card.picked { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 18px rgba(233, 196, 106, .5); }
.panel .r-name { text-shadow: 0 1px 3px #000; }
.panel .r-lv { color: var(--lac-soft); }

/* Ô trang bị trong bảng nhân vật */
.panel .eq-slot { background: rgba(0, 0, 0, .28); border: 1px solid rgba(233, 196, 106, .14); }
.panel .eq-slot.picked { border-color: var(--gold-mid); }
.panel .eq-label { color: var(--gold-mid); }
.panel .eq-picker { border-color: var(--lac-line); background: rgba(0, 0, 0, .25); }
.panel .eq-pick { color: var(--lac-text); }
.panel .eq-pick .up { color: #8fe07a; } .panel .eq-pick .down { color: #ff8a7a; }
.panel .eq-pick .need, .panel .g-wear-list button small { color: #ff8a7a; }
.panel .g-wear-list button small.ok { color: #9fd88a; }

/* ---------- Đồ vật ---------- */
.ico {
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tier, #e9c46a) 40%, #2a1d12), #110b06 82%);
  border-color: var(--tier, var(--gold-lo));
  box-shadow: 0 0 8px color-mix(in srgb, var(--tier, #e9c46a) 35%, transparent), inset 0 0 8px rgba(0, 0, 0, .6);
}
.ico i { color: var(--tier, var(--gold-mid)); text-shadow: 0 1px 3px #000; }
.panel .g-card {
  color: var(--lac-text); border: 1px solid color-mix(in srgb, var(--tier, #e9c46a) 55%, transparent); border-left: 4px solid var(--tier);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tier, #e9c46a) 20%, transparent), rgba(255, 236, 190, .03) 60%), rgba(0, 0, 0, .25);
}
.panel .g-card:hover:not(:disabled) { background: linear-gradient(90deg, color-mix(in srgb, var(--tier, #e9c46a) 30%, transparent), rgba(255, 236, 190, .05) 60%), rgba(0, 0, 0, .25); border-color: var(--tier); }
.panel .g-card.picked { box-shadow: 0 0 0 1px var(--gold-hi), 0 0 16px rgba(233, 196, 106, .4); }
.panel .g-card small, .panel .g-slot { color: var(--lac-soft); }
.panel .gname { text-shadow: 0 1px 3px #000; }
.panel .g-stats { color: var(--lac-text); }
.panel .g-lvl { color: var(--lac-soft); }
.panel .bag-pot { color: var(--lac-text); background: rgba(0, 0, 0, .3); border-color: var(--lac-line); }

/* ---------- Cửa hàng ---------- */
.panel .shop-say p { color: var(--lac-text); background: rgba(0, 0, 0, .4); border-color: var(--lac-line); }
.panel .shop-say h2 { border: 0; padding: 0; margin: 0 0 6px; }
.panel .hero-card { color: var(--lac-text); background: rgba(0, 0, 0, .28); border: 1px solid var(--lac-line); border-radius: 8px; }

/* ---------- Tài khoản, xếp hạng ---------- */
.panel .acc-card { color: var(--lac-text); background: rgba(0, 0, 0, .3); border: 1px solid var(--lac-line); }
.panel .acc-card.current { background: linear-gradient(rgba(233, 196, 106, .1), rgba(0, 0, 0, .3)); border: 1px solid var(--gold-mid); }
.panel .acc-conflict { color: var(--lac-text); background: rgba(155, 44, 34, .25); border-color: rgba(255, 138, 122, .5); }
.panel .acc-error, .title-card .acc-error { color: #ff8a7a; }
.panel .rank-table td { border-bottom-color: rgba(233, 196, 106, .14); }
.panel .rank-table tr.you td { background: rgba(233, 196, 106, .12); }

/* ---------- Màn tựa đề: thẻ đăng nhập / vào game ---------- */
.title-menu { width: min(380px, 92vw); bottom: 6vh; gap: 0; }
.title-card {
  padding: 18px 22px 14px; text-align: left; color: var(--lac-text); border-radius: 8px;
  background: linear-gradient(rgba(32, 22, 14, .9), rgba(12, 8, 5, .93)); border: 1px solid var(--gold-lo);
  box-shadow: 0 0 0 3px rgba(12, 8, 5, .75), 0 0 0 4px rgba(233, 196, 106, .4), 0 20px 50px rgba(0, 0, 0, .6);
  backdrop-filter: blur(4px);
}
.tc-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; text-align: center;
  font-family: var(--font-title); font-size: 20px; color: var(--gold-hi); letter-spacing: 1px;
}
.tc-head::before, .tc-head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-mid)); }
.tc-head::after { transform: scaleX(-1); }
.tc-who { text-align: center; font-size: 22px; font-weight: 700; }
.tc-tag {
  display: inline-block; vertical-align: middle; padding: 0 8px; border-radius: 8px; font-size: 11px; line-height: 18px;
  color: #10230c; background: #8fe07a;
}
.tc-tag.local { color: #2a1a0c; background: #d6c49a; }
.tc-sum { text-align: center; color: var(--lac-soft); font-size: 14px; margin: 4px 0 14px; }
.title-card .tc-play, .title-card .acc-online .btn-game { width: 100%; font-size: 18px; padding: 12px; }
.title-card .acc-online { max-width: none; }
.title-card .acc-tabs button { padding: 7px; }
.title-card .acc-online[data-mode="login"] .acc-tabs [data-mode="login"],
.title-card .acc-online[data-mode="register"] .acc-tabs [data-mode="register"] {
  color: var(--gold-hi); border-color: var(--gold-mid); background: linear-gradient(#5a2a1a, #33170e);
}
.title-card .acc-check { color: var(--lac-soft); font-size: 13px; }
.tc-or { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; color: #8d7c60; font-size: 12px; }
.tc-or::before, .tc-or::after { content: ''; flex: 1; height: 1px; background: var(--lac-line); }
.tc-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; }
.tc-links.col { flex-direction: column; align-items: center; margin-top: 0; }
.title-card button.link, .panel button.link {
  padding: 2px 4px; border: 0; background: none; box-shadow: none; font-size: 14px;
  color: var(--gold-mid); text-decoration: underline; text-underline-offset: 3px;
}
.title-card button.link:hover { color: var(--gold-hi); background: none; }
.title-card button.link b { color: var(--lac-text); }
.tc-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--lac-soft); }
.tc-note b { color: var(--lac-text); }
.tc-note code { padding: 0 5px; border-radius: 3px; background: rgba(0, 0, 0, .5); color: var(--gold-hi); }
.tc-note .btn-game { width: 100%; margin-top: 8px; padding: 8px; font-size: 14px; }
/* Màn thấp: đưa tên game lên cao, thu nhỏ để thẻ đăng nhập không đè */
@media (max-height: 820px) {
  .title-logo { top: 3%; }
  .title-logo h1 { font-size: clamp(34px, 7vw, 72px); }
  .title-menu { bottom: 3vh; }
}

/* Thẻ đồ: người đang mặc nằm trong thẻ (không đè chữ), nhãn "Mới" ở góc trên */
.bag-screen .g-info { padding-right: 30px; }
.panel .g-wear {
  position: static; align-self: flex-start; margin-top: 3px; font-size: 11px; padding: 1px 8px; border-radius: 8px;
  color: var(--gold-hi); background: rgba(155, 44, 34, .6); border: 1px solid rgba(233, 196, 106, .4);
}
.panel .g-new { top: 6px; bottom: auto; right: 6px; }

/* Nhãn phẩm: chữ tối trên nền màu phẩm, đọc được cả với phẩm Trắng */
.grade-tag { color: #1a120a; text-shadow: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 0 6px color-mix(in srgb, var(--g) 50%, transparent); }

/* Ảnh lớn trong bảng nhân vật không chiếm quá nửa bề ngang (nhân vật cầm gậy dài) */
.panel .fd-head .thumb.big { max-width: 46%; object-fit: contain; object-position: bottom; }
@media (max-width: 560px) {
  .panel { padding: 16px 12px 18px; }
  .panel h2 { font-size: 24px; }
  .panel .f-detail { padding: 10px; }
  .panel .fd-head { margin: -10px -10px 0; padding: 10px 10px 6px; }
  .panel .fd-head .thumb.big { height: 110px; }
  .panel .fd-name { font-size: 20px; }
  .panel .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel .stats .st { font-size: 12px; padding-right: 7px; }
  .panel .attr-row { grid-template-columns: 74px 30px 1fr auto auto; }
  .panel .attr-row small { display: none; }
}

/* ---------- Biểu tượng vẽ (UI.icon) ---------- */
svg { display: block; }
.tb-seal svg { width: 21px; height: 21px; }
#topbar nav button i svg { width: 17px; height: 17px; }
@media (max-width: 1000px) { #topbar nav button i svg { width: 15px; height: 15px; } }
.panel .stats .st i svg { width: 14px; height: 14px; }
.ico i { width: 100%; height: 100%; place-items: center; }
.ico.noimg i { display: grid; }
.ico i svg { width: 56%; height: 56%; }
.node .num svg { width: 60%; height: 60%; margin: auto; }
/* Dòng phụ trên tên game: chữ Việt in hoa, giãn vừa phải */
.title-logo .cn { font-size: clamp(12px, 1.6vw, 18px); letter-spacing: .4em; margin-right: -.4em; text-transform: uppercase; }

/* Nút ải trên bản đồ: không hiện nền giấy khi rê chuột (kiểu nút mặc định cũ) */
.node:hover:not(:disabled), .node:focus { background: none; border-color: transparent; }

/* ---------- Ô đồ đều nhau (hành trang, tiệm): cùng cỡ, chữ không xuống dòng lung tung ---------- */
.panel .g-grid { grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); grid-auto-rows: 1fr; gap: 10px; align-content: start; }
.panel .g-card { height: 100%; min-height: 112px; align-items: center; gap: 10px; padding: 10px 12px; }
.panel .g-card > .ico { width: 56px; height: 56px; }
.panel .g-info { align-self: stretch; justify-content: flex-start; gap: 3px; min-width: 0; }
.panel .g-info > * { min-width: 0; }
.panel .g-slot {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 11px; letter-spacing: .5px; text-transform: none;
}
.panel .g-card .gname { display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .g-info small {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35;
}
.panel .g-wear {
  margin-top: auto; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.panel .g-grid.shop .g-card { min-height: 150px; }
.panel .g-grid.shop .g-info button { margin-top: auto; align-self: flex-end; }

/* Gọn hơn: tiệm không còn mô tả dài trong ô (rê chuột để xem), chủ tiệm và tiêu đề nhỏ lại */
.panel .g-grid.shop .g-card { min-height: 112px; }
.panel .g-grid.shop .g-info button { padding: 3px 16px; }
.shop-head .thumb.keeper { height: 112px; }
.panel h2 { font-size: 25px; }
.panel .shop-say h2 { font-size: 23px; }
/* Khung game không bao giờ bị trình duyệt tự cuộn xô lệch (vd khi chọn chữ, tìm trong trang) */
#app, #screen { overflow: clip; }

/* ---------- Khung bảng vừa đúng một màn hình ----------
   Đầu (tiêu đề, thẻ chuyển trang) và chân (các nút) đứng yên; phần giữa cuộn bên trong khung. */
.panel-screen { overflow: hidden; display: flex; flex-direction: column; padding: 24px 16px 16px; }
.has-topbar .panel-screen { padding-top: 16px; }
.panel-screen > .panel { flex: 0 1 auto; width: 100%; min-height: 0; max-height: 100%; margin: 0 auto; display: flex; flex-direction: column; }
.panel-head { flex: none; }
.panel-head .fd-tabs { margin-bottom: 0; }
.panel-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -12px; padding: 10px 12px 6px;
  scrollbar-width: thin; scrollbar-color: #b8892f rgba(0, 0, 0, .35);
}
.panel-body::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, .35); border-radius: 4px; }
.panel-body::-webkit-scrollbar-thumb { background: linear-gradient(#f6dc8c, #b8892f); border-radius: 4px; }
.panel-foot { flex: none; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--lac-line); }
.panel-foot.f-actions { margin-top: 8px; }
@media (max-width: 560px) {
  .panel-screen { padding: 10px 8px 8px; }
  .has-topbar .panel-screen { padding-top: 10px; }
  .panel-body { margin: 0 -8px; padding: 8px 8px 4px; }
}

/* ---------- Khung game 16:9 nằm giữa trình duyệt, viền đen bao quanh ----------
   Màn ngang đủ rộng mới đóng khung; điện thoại / màn dọc vẫn dùng cả màn hình.
   contain: layout paint -> mọi thứ "position: fixed" bên trong (ảnh nền, thông báo) bám theo khung, không tràn ra viền đen. */
html, body { background: #000; }
@media (min-width: 760px) and (min-height: 560px) and (min-aspect-ratio: 1/1) {
  #app {
    inset: 0; margin: auto;
    width: min(94vw, calc(94vh * 16 / 9)); height: min(94vh, calc(94vw * 9 / 16));
    contain: layout paint; border-radius: 6px;
    outline: 1px solid rgba(233, 196, 106, .35); outline-offset: 0;
    box-shadow: 0 0 60px rgba(0, 0, 0, .9);
  }
}

/* ---------- Cửa hàng: ô anh hùng / bí kíp có ảnh nhân vật, hộp chọn người dùng đan dược ---------- */
.panel .g-card .h-thumb {
  flex: none; width: 56px; height: 78px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
  border-radius: 8px; border: 1px solid var(--tier, var(--gold-lo));
  background: radial-gradient(ellipse at 50% 88%, color-mix(in srgb, var(--tier, #e9c46a) 45%, transparent), rgba(0, 0, 0, .4) 72%);
}
.panel .g-card .h-thumb .thumb { height: 74px; max-width: 100%; object-fit: contain; object-position: bottom; }
.panel .g-card .h-thumb .portrait { width: 46px; height: 46px; font-size: 16px; margin-bottom: 14px; }
.panel .g-card button:disabled { opacity: .55; }
.pick-overlay { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .62); }
.panel.pick-box { width: min(780px, 100%); max-height: 100%; overflow-y: auto; }
.panel.pick-box h3 { margin-top: 0; }
.panel.pick-box .roster { margin: 10px 0 14px; }

/* Đội hình: người đang xem (viền vàng nhạt) khác người đang chọn để chuyển (sáng vàng, nhấp nháy nhẹ) */
.panel .f-cell.viewing, .panel .r-card.viewing { border-color: rgba(246, 220, 140, .75); }
.panel .f-cell.moving, .panel .r-card.moving { animation: move-pulse 1.1s ease-in-out infinite; }
@keyframes move-pulse { 50% { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 26px rgba(246, 220, 140, .75); } }
.panel .f-hint {
  margin: 0 0 10px; padding: 7px 12px; border-radius: 6px; font-size: 14px; color: var(--lac-text);
  background: rgba(233, 196, 106, .12); border: 1px solid rgba(233, 196, 106, .45);
}

/* Khung bảng luôn cao hết chỗ (không co theo nội dung): đổi gian, đổi màn không bị nhảy to nhỏ */
.panel-screen > .panel { height: 100%; }

/* ---------- Mảnh anh hùng ---------- */
.shard-ico { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; color: #f5c84a; }
.shard-ico svg { width: 100%; height: 100%; }
.shard-line { display: inline-flex; align-items: center; gap: 5px; margin-right: 4px; font-weight: 700; color: var(--lac-text); }
.shard-bar { display: inline-block; width: 70px; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(0, 0, 0, .5); border: 1px solid rgba(233, 196, 106, .35); }
.shard-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c98a1a, #ffd24a); }
.result-card li .shard-ico { width: 16px; height: 16px; }

/* ---------- Độ khó ải: Thường / Tím / Cam ---------- */
.sp-modes { display: flex; gap: 6px; margin: 8px 0 4px; }
.sp-mode {
  --mc: #e9c46a; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px;
  font: 700 13px/1.2 var(--font-ui); color: #f3e6c4; cursor: pointer; border-radius: 6px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(233, 196, 106, .3); transition: background .15s, box-shadow .15s;
}
.sp-mode.m-tim { --mc: #b26ef0; color: #d9b8ff; }
.sp-mode.m-cam { --mc: #f5961f; color: #ffcf8f; }
.sp-mode small { font-size: 10px; letter-spacing: 1px; color: #f1d38a; }
.sp-mode:hover:not(.locked) { border-color: var(--mc); }
.sp-mode.on { color: #fff; border-color: var(--mc); background: color-mix(in srgb, var(--mc) 32%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--mc) 55%, transparent); }
.sp-mode.locked { opacity: .45; cursor: default; }
.stage-panel.mode-tim { border-color: #b26ef0; box-shadow: 0 0 0 1px rgba(178, 110, 240, .45), 0 12px 34px rgba(0, 0, 0, .55); }
.stage-panel.mode-cam { border-color: #f5961f; box-shadow: 0 0 0 1px rgba(245, 150, 31, .45), 0 12px 34px rgba(0, 0, 0, .55); }
.stage-panel.mode-tim .sp-title { color: #e2c6ff; }
.stage-panel.mode-cam .sp-title { color: #ffd59c; }
.sp-tag.mode { background: rgba(240, 69, 58, .2); color: #ffd2c4; }
.sp-actions .btn-game.m-tim { background: linear-gradient(#9257d8, #55258f); border-color: #d6b0ff; color: #fff; }
.sp-actions .btn-game.m-cam { background: linear-gradient(#e8922a, #a3520d); border-color: #ffd08a; color: #fff; }
/* Chấm trên nút ải: đã qua Tím / Cam thì sáng màu */
.node-modes { display: flex; justify-content: center; gap: 4px; margin-top: 2px; }
.node-modes i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .55); }
.node-modes i.m-tim.on { background: #b26ef0; box-shadow: 0 0 6px #b26ef0; }
.node-modes i.m-cam.on { background: #f5961f; box-shadow: 0 0 6px #f5961f; }
.mode-chip { font-size: .42em; vertical-align: middle; padding: 3px 12px; border-radius: 999px; color: #fff; letter-spacing: 1px; }
.mode-chip.m-tim { background: #7d3fc4; }
.mode-chip.m-cam { background: #c86b10; }
/* Trong trận: địch ở ải Tím / Cam có quầng sáng màu */
.unit.elite-tim .sprite, .unit.elite-tim .portrait { filter: drop-shadow(0 0 4px rgba(178, 110, 240, .95)) drop-shadow(0 0 12px rgba(178, 110, 240, .55)); }
.unit.elite-cam .sprite, .unit.elite-cam .portrait { filter: drop-shadow(0 0 4px rgba(245, 150, 31, .95)) drop-shadow(0 0 12px rgba(245, 150, 31, .55)); }
.wave-tag.m-tim { color: #e2c6ff; border-color: #b26ef0; }
.wave-tag.m-cam { color: #ffd59c; border-color: #f5961f; }
.sp-lock { margin: 6px 0 2px; padding: 7px 10px; border-radius: 6px; font-size: 13px; line-height: 1.4;
  color: #ffe2b8; background: rgba(0, 0, 0, .35); border: 1px dashed rgba(233, 196, 106, .55); }
.sp-actions .btn-game:disabled { filter: grayscale(.6) brightness(.75); cursor: default; }

/* Thông báo nhanh: hiện giữa phía trên (dưới thanh trên cùng) cho khỏi bị dải chọn hồi ở đáy che */
#toast {
  top: 64px; bottom: auto; transform: translateX(-50%) translateY(-14px); z-index: 600;
  padding: 10px 20px; font-weight: 700; color: #fff3d6; background: rgba(24, 16, 9, .96);
  border: 1px solid #e9c46a; box-shadow: 0 8px 24px rgba(0, 0, 0, .6);
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- Bảng đồ rơi khi rê chuột vào ải ---------- */
.node-tip {
  position: absolute; z-index: 8; width: 360px; max-width: calc(100% - 16px); pointer-events: none;
  padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.35; color: #fff3d6;
  background: rgba(18, 12, 7, .96); border: 1px solid #e9c46a; box-shadow: 0 10px 28px rgba(0, 0, 0, .65);
}
.node-tip .nt-head { font: 700 15px/1.3 var(--font-title); }
.node-tip .nt-head small { font: 700 11px var(--font-ui); letter-spacing: 1px; color: #e9c46a; margin-right: 4px; }
.node-tip .nt-sub { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #e9c46a; margin: 4px 0 2px; }
.node-tip .nt-sec { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(233, 196, 106, .18); }
.node-tip .nt-title { font-weight: 700; color: #f1d38a; }
.node-tip .nt-title.m-tim { color: #d9b8ff; }
.node-tip .nt-title.m-cam { color: #ffcf8f; }
.node-tip .nt-title span { font-weight: 400; color: #d6c6a4; }
.node-tip .nt-title span b { font-weight: 700; }
.node-tip .nt-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 3px; margin-top: 4px; }
.node-tip .nt-cell { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; font-size: 10px; line-height: 1.15; }
.node-tip .nt-cell .ico.sm { width: 30px; height: 30px; }
.node-tip .nt-mini { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
.node-tip .nt-mini .ico.sm { width: 24px; height: 24px; }
.node-tip .nt-line { margin-top: 6px; }
.node-tip .nt-line .ico.sm { width: 22px; height: 22px; vertical-align: middle; margin-right: 3px; }
.node-tip .shard-ico svg { width: 13px; height: 13px; vertical-align: -2px; }

/* ---------- Tạo nhân vật chính ---------- */
.create-screen .cr-layout { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 18px; align-items: start; }
.cr-preview {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 10px;
  background: rgba(0, 0, 0, .28); border: 1px solid color-mix(in srgb, var(--g) 60%, transparent);
}
.cr-figure { height: 220px; display: flex; align-items: flex-end; justify-content: center; }
.cr-figure .thumb.big { height: 210px; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5)); }
.cr-figure .portrait { width: 140px; height: 140px; font-size: 54px; }
.cr-name { font: 700 22px/1.2 var(--font-title); color: var(--g); text-align: center; word-break: break-word; }
.cr-class { font-size: 13px; color: #f1d38a; }
.cr-preview .stats { width: 100%; }
.cr-label { margin: 12px 0 6px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #e9c46a; }
.cr-label:first-child { margin-top: 0; }
.cr-row { display: flex; gap: 8px; }
.cr-pick {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 8px; cursor: pointer;
  font: 700 15px/1.2 var(--font-ui); color: #f3e6c4; background: rgba(255, 255, 255, .05); border: 1px solid rgba(233, 196, 106, .35);
}
.cr-pick small { font-weight: 400; font-size: 12px; color: #d6c6a4; }
.cr-pick:hover { border-color: #e9c46a; }
.cr-pick.on { color: #fff; border-color: #e9c46a; background: rgba(155, 44, 34, .55); box-shadow: 0 0 12px rgba(233, 196, 106, .35); }
.cr-desc { margin: 8px 0 4px; font-size: 13px; color: #e8dcc0; }
.cr-skills { margin: 0; padding-left: 0; list-style: none; font-size: 13px; }
.cr-skills li { padding: 3px 0; border-bottom: 1px dashed rgba(233, 196, 106, .15); }
.cr-lv { display: inline-block; min-width: 58px; font-size: 11px; color: #d6c6a4; }
.cr-lv.now { color: #9fd88a; }
.cr-name-row { display: flex; gap: 8px; }
.cr-name-row input {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px; font: 700 16px var(--font-ui); color: #fff3d6;
  background: rgba(0, 0, 0, .4); border: 1px solid rgba(233, 196, 106, .55); outline: none;
}
.cr-name-row input:focus { border-color: #e9c46a; box-shadow: 0 0 0 2px rgba(233, 196, 106, .25); }
.cr-hint, .cr-note { font-size: 12px; color: #d6c6a4; }
.create-screen .panel-foot { justify-content: flex-end; align-items: center; gap: 12px; }
.create-screen .panel-foot .cr-note { flex: 1; }
@media (max-width: 760px) and (orientation: portrait) {
  .create-screen .cr-layout { grid-template-columns: 1fr; }
  .cr-figure { height: 150px; }
  .cr-figure .thumb.big { height: 140px; }
}

/* ---------- Thế trận (màn Đội hình) ---------- */
.trp-box { margin: 6px 0 12px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(233, 196, 106, .45); overflow: hidden; }
.trp-tabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px; padding: 6px 8px 0; border-bottom: 1px solid rgba(233, 196, 106, .45); }
.trp-label { align-self: center; margin-right: 6px; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #e9c46a; }
.panel .trp-tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 92px;
  padding: 5px 12px 6px; margin-bottom: -1px; border-radius: 6px 6px 0 0; font: 700 13px/1.2 var(--font-ui);
  color: #e8dcc0; background: rgba(255, 255, 255, .04); border: 1px solid rgba(233, 196, 106, .25); border-bottom-color: transparent;
}
.panel .trp-tab small { font-weight: 400; font-size: 11px; color: #d6c6a4; }
.panel .trp-tab i { position: absolute; top: 2px; right: 5px; font-style: normal; font-size: 9px; color: #9fd88a; }
.panel .trp-tab:hover:not(.on) { background: rgba(255, 255, 255, .09); }
.panel .trp-tab.on { color: #fff3d6; background: rgba(155, 44, 34, .55); border-color: rgba(233, 196, 106, .7); border-bottom-color: transparent; }
.panel .trp-tab.locked { opacity: .5; }
.trp-detail { display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(220px, 1.4fr) auto; gap: 8px 16px; align-items: center; padding: 10px 12px; }
.trp-detail.locked .trp-info, .trp-detail.locked .trp-table { opacity: .6; }
.trp-name { font: 700 15px/1.3 var(--font-title); color: #fff3d6; }
.trp-name small { font: 400 12px var(--font-ui); color: #f1d38a; margin-left: 4px; }
.trp-desc { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: #d6c6a4; }
.trp-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.trp-table th, .trp-table td { padding: 3px 6px; text-align: left; vertical-align: top; }
.trp-table thead th { font-size: 10.5px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #e9c46a; border-bottom: 1px solid rgba(233, 196, 106, .25); }
.trp-table tbody th { width: 72px; white-space: nowrap; color: #f1d38a; font-weight: 700; }
.trp-table td { color: #cfe3b0; }
.trp-table td.nx { color: #9fd0ff; }
.trp-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 150px; }
.trp-actions .btn-game { padding: 7px 12px; font-size: 13px; }
.trp-using { text-align: center; font-weight: 700; color: #9fd88a; }
.trp-max { text-align: center; color: #d6c6a4; font-size: 12px; }
.trp-lock { font-size: 12.5px; color: #ffe2b8; }
@media (max-width: 900px) {
  .trp-detail { grid-template-columns: 1fr; }
  .trp-actions { flex-direction: row; flex-wrap: wrap; }
  .panel .trp-tab { min-width: 0; flex: 1; padding: 5px 6px; }
  .trp-label { width: 100%; margin: 0 0 2px; }
}
.f-head .f-tran { display: block; font-size: 10.5px; font-weight: 400; color: #cfe3b0; text-transform: none; letter-spacing: 0; }

/* ---------- Hành trang: khung cố định, danh sách và chi tiết cuộn riêng ---------- */
.bag-screen .panel-body { display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.bag-heroes { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.panel .bh-chip {
  position: relative; flex: none; width: 84px; height: 98px; padding: 4px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px;
  font-size: 11px; line-height: 1.15; color: #e8dcc0; background: rgba(0, 0, 0, .3); border: 1px solid rgba(233, 196, 106, .2);
}
.panel .bh-chip .thumb { height: 52px; max-width: 100%; object-fit: contain; object-position: bottom; flex: none; }
.panel .bh-chip .portrait { width: 44px; height: 44px; font-size: 18px; flex: none; }
.panel .bh-chip span { max-width: 100%; font-weight: 700; color: var(--g); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .bh-chip small { font-size: 10px; color: #d6c6a4; }
.panel .bh-chip.team { border-color: rgba(233, 196, 106, .5); }
.panel .bh-chip:hover:not(.on) { background: rgba(255, 255, 255, .07); }
.panel .bh-chip.on { background: rgba(155, 44, 34, .55); border-color: #e9c46a; box-shadow: 0 0 10px rgba(233, 196, 106, .4); }
.bh-dot {
  position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  font: 700 10px/16px var(--font-ui); font-style: normal; color: #fff; background: #9b2c22;
}
.bag-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-rows: minmax(0, 1fr); align-items: stretch; gap: 14px; }
.bag-list, .bag-side { min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.bag-side .g-detail, .bag-screen .bag-side .g-detail { position: static; margin: 0; min-width: 0; }
/* Đồ giống nhau gộp: số ×N ở góc icon */
.panel .g-count {
  position: absolute; left: 6px; bottom: 6px; z-index: 1; padding: 0 6px; border-radius: 8px;
  font: 700 12px/18px var(--font-ui); color: #fff3d6; background: rgba(0, 0, 0, .78); border: 1px solid var(--tier, #e9c46a);
}
.panel .g-count.inline { position: static; vertical-align: middle; font-size: 13px; }
.panel .g-cmp { margin-top: auto; font-size: 11px; font-weight: 700; }
.panel .g-cmp.up { color: #9fd88a; }
.panel .g-cmp.down { color: #d6a08a; }
.panel .g-cmp.no { color: #ff8a7a; }
.panel .g-card.dim { opacity: .55; }
.panel .shard-card .h-thumb .thumb { height: 52px; }
/* Ô đồ trên người của nhân vật đang chọn */
.be-list { display: flex; flex-direction: column; gap: 6px; }
.be-slot {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px;
  border-radius: 8px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(233, 196, 106, .2);
}
.be-slot.on { border-color: #e9c46a; background: rgba(155, 44, 34, .3); }
.be-label { font-size: 12px; font-weight: 700; color: #e9c46a; }
.be-item { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; }
.be-item small { display: block; color: #d6c6a4; }
.be-item i { color: #998a70; }
.be-btns { display: flex; gap: 4px; }
.panel .be-btns button { padding: 3px 9px; font-size: 12px; }
.be-compare { margin: 8px 0; padding: 8px 10px; border-radius: 8px; font-size: 13px; background: rgba(0, 0, 0, .25); border: 1px dashed rgba(233, 196, 106, .35); }
.be-diff { margin: 4px 0; }
.be-diff .up { color: #9fd88a; }
.be-diff .down { color: #ff8a7a; }
/* Đan kinh nghiệm: mỗi dòng một người / một loại đan, nút uống */
.pill-list { display: flex; flex-direction: column; gap: 5px; }
.pill-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 4px 6px; border-radius: 6px; background: rgba(0, 0, 0, .25); }
.pr-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pr-who .thumb { width: 38px; height: 38px; object-fit: contain; flex: none; }
.pr-who .portrait { width: 34px; height: 34px; font-size: 13px; flex: none; }
.pr-who b { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pr-who small { font-size: 11px; color: #d6c6a4; }
.panel .pill-row button { padding: 3px 9px; font-size: 12px; }
@media (max-width: 760px) and (orientation: portrait) {
  .bag-screen .panel-body { display: block; overflow-y: auto; }
  .bag-layout { display: block; }
  .bag-list, .bag-side { overflow: visible; padding-right: 0; }
  .bag-side { margin-top: 12px; }
}

/* ---------- Nâng phẩm (tab trong bảng nhân vật ở Đội hình) ---------- */
.gu-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0; font-size: 14px; }
.gu-head small { width: 100%; font-size: 12px; color: #d6c6a4; }
.gu-arrow { color: #e9c46a; font-size: 16px; }
.gu-diff { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px 10px; font-size: 12.5px; color: #e8dcc0; }
.gu-diff .up { color: #9fd88a; }
.gm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.panel .gm-card {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 112px; min-width: 0;
  padding: 4px 6px; font-size: 12px; line-height: 1.2; text-align: center; border-radius: 8px;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(233, 196, 106, .25);
}
.panel .gm-card .thumb { height: 56px; max-width: 100%; object-fit: contain; object-position: bottom; flex: none; }
.panel .gm-card span { font-weight: 700; color: var(--g); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .gm-card small { font-size: 10.5px; color: #d6c6a4; }
.panel .gm-card.on { background: rgba(155, 44, 34, .55); border-color: #e9c46a; box-shadow: 0 0 10px rgba(233, 196, 106, .4); }

/* ---------- Nhiệm vụ ---------- */
.q-list { display: flex; flex-direction: column; gap: 8px; }
.q-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 240px) auto; gap: 8px 14px; align-items: center;
  padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(233, 196, 106, .22);
}
.q-row.ready { border-color: #e9c46a; background: rgba(155, 44, 34, .3); box-shadow: 0 0 10px rgba(233, 196, 106, .25); }
.q-row.claimed { opacity: .55; }
.q-row.locked { opacity: .45; }
.q-title { font: 700 15px/1.3 var(--font-title); color: #fff3d6; }
.q-title small { font: 400 12px var(--font-ui); color: #e9c46a; margin-left: 4px; }
.q-desc { font-size: 12.5px; color: #d6c6a4; margin-top: 2px; }
.q-prog { font-size: 12px; color: #e8dcc0; }
.q-prog .q-bar { height: 7px; margin-top: 3px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.q-prog .q-bar i { display: block; height: 100%; background: linear-gradient(90deg, #b8892f, #f1d38a); }
.q-rew { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 5px; font-size: 12px; color: #f1d38a; }
.q-rew .ico.sm { width: 22px; height: 22px; vertical-align: middle; }
.q-rew .q-chip { display: inline-flex; align-items: center; gap: 3px; }
.q-act { display: flex; justify-content: flex-end; }
.panel .q-act button { min-width: 96px; padding: 7px 12px; }
.q-done { font-size: 12px; color: #9fd88a; font-weight: 700; }
.quest-screen .fd-tab .dot, .bag-screen .fd-tab .dot { font-style: normal; }
/* Hộp thư & Mã quà */
.mail-code {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px; border-radius: 10px;
  background: rgba(155, 44, 34, .25); border: 1px solid rgba(233, 196, 106, .45);
}
.mail-code label { font: 700 15px var(--font-title); color: #f1d38a; }
.mail-code input {
  flex: 1; min-width: 160px; max-width: 320px; padding: 8px 12px; border-radius: 8px; font: 700 16px Consolas, monospace;
  letter-spacing: 2px; text-transform: uppercase; color: #fff3d6; background: rgba(0, 0, 0, .45); border: 1px solid rgba(233, 196, 106, .5);
}
.mail-code input:focus { outline: 2px solid #e9c46a; outline-offset: 0; }
.mail-code input::placeholder { letter-spacing: 0; text-transform: none; font: 400 14px var(--font-ui); color: #998a70; }
.quest-screen .sp-label small { text-transform: none; letter-spacing: 0; color: #998a70; margin-left: 6px; }
.mail-row .q-title small { color: #998a70; }
.panel .mail-row { grid-template-columns: minmax(0, 1fr) auto; }
.mail-off { padding: 18px; text-align: center; color: #e8dcc0; }
.q-rew .q-chip small { color: #d6c6a4; }
.q-rew .q-exp { padding: 0 7px; border-radius: 8px; color: #fff3d6; background: rgba(155, 44, 34, .55); border: 1px solid rgba(233, 196, 106, .45); }
/* Nhân vật chính ở chân màn Nhiệm vụ: cấp + thanh kinh nghiệm */
.q-mc { display: flex; align-items: center; gap: 8px; margin-right: auto; min-width: 0; font-size: 13px; color: #fff3d6; }
.q-mc .thumb { height: 46px; width: 40px; object-fit: contain; flex: none; }
.q-mc .portrait { width: 40px; height: 40px; flex: none; }
.q-mc > div { min-width: 150px; }
.q-mc .bar-label { font-size: 11px; color: #d6c6a4; margin-top: 2px; }
@media (max-width: 760px) and (orientation: portrait) { .q-mc { flex-basis: 100%; } }
.q-rew .q-hero .portrait { width: 24px; height: 24px; font-size: 9px; border-width: 1px; }
@media (max-width: 760px) and (orientation: portrait) {
  .q-row { grid-template-columns: 1fr; }
  .q-act { justify-content: flex-start; }
}

/* ---------- Đội hình: ô đội hình trái, chi tiết phải, hàng Đang nghỉ dưới; kéo thả ---------- */
/* Màn rộng: 3 cột đứng cạnh nhau, mỗi cột tự cuộn (kéo ngang từ "Đang nghỉ" sang ô, không phải cuộn trang) */
.formation-screen .panel-body.fm-body { display: flex; flex-direction: column; overflow: hidden; }
.fm-layout {
  /* Cột ô đội hình rộng cố định: .fm-left là container-type: size nên không tự nới theo nội dung (cột auto sẽ teo về 0) */
  flex: 1; min-height: 0; display: grid; grid-template-columns: 324px minmax(170px, 220px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); gap: 14px; align-items: stretch;
}
.fm-left, .fm-right { min-height: 0; overflow-y: auto; padding-right: 2px; scrollbar-width: thin; }
.fm-left { display: flex; flex-direction: column; gap: 8px; container-type: size; }
/* 9 ô (3 cột × 3 hàng) luôn vừa chiều cao khung (không phải cuộn mới thấy hàng dưới khi đang kéo) */
.fm-left .f-grid { grid-auto-rows: auto; grid-template-columns: 24px repeat(3, minmax(0, 1fr)); gap: 6px; }
.panel .fm-left .f-cell { height: clamp(76px, calc((100cqh - 186px) / 3), 150px); min-height: 0; }   /* 186: tên thế trận + ▲ Địch + dòng cộng + hướng dẫn + khe */
.panel .fm-left .f-cell .thumb { height: calc(100% - 34px); }
.panel .fm-left .f-cell .portrait { width: 40px; height: 40px; font-size: 16px; }
.fm-right .f-detail { margin: 0; }
.fm-hint { max-width: 290px; margin: 0; font-size: 12px; line-height: 1.45; color: #d6c6a4; }
.fm-hint b { color: #f1d38a; }
.panel .f-cell.empty .f-empty { font-size: 11px; color: #998a70; }
.panel .f-cell.empty .f-plus { font-size: 22px; color: #b8a27a; }
[data-drag] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
@media (pointer: coarse) { [data-drag] { touch-action: manipulation; } }
.drag-ready { box-shadow: 0 0 0 2px #f6dc8c, 0 0 16px rgba(246, 210, 120, .7) !important; transform: scale(1.04); transition: transform .12s; }
.fm-bench {
  display: flex; flex-direction: column; min-height: 0; padding: 8px 8px 10px; border-radius: 10px;
  background: rgba(0, 0, 0, .22); border: 2px dashed rgba(233, 196, 106, .3); transition: border-color .15s, background .15s;
}
.fm-bench-head { flex: none; margin-bottom: 6px; font: 700 15px/1.3 var(--font-title); color: #f1d38a; }
.fm-bench-head small { display: block; font: 400 11px/1.35 var(--font-ui); color: #d6c6a4; }
.fm-bench-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
/* Xếp theo cấp / phẩm, lọc theo phẩm */
.fm-bench-tools { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 11px; color: #d6c6a4; }
.fm-bench-tools span:not(:first-child) { margin-left: 4px; }
.panel .fb-chip { padding: 1px 8px; border-radius: 10px; font-size: 11px; line-height: 1.6; color: var(--g, #d6c6a4); }
.panel .fb-chip.on, .panel .fb-chip.on:hover:not(:disabled) { color: #2a1a0c; background: var(--g, #e9c46a); border-color: var(--g, #f6dc8c); font-weight: 700; }
/* Thẻ người đang nghỉ: gọn một dòng (ảnh trái, tên + cấp phải) */
.panel .fm-bench .r-card {
  position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 8px;
  align-items: center; height: auto; min-height: 66px; padding: 4px 8px; text-align: left;
}
.panel .fm-bench .r-card .thumb, .panel .fm-bench .r-card .portrait { grid-row: 1 / span 3; height: 58px; width: 46px; object-fit: contain; }
.panel .fm-bench .r-card .r-grade, .panel .fm-bench .r-card .r-name, .panel .fm-bench .r-card .r-lv { position: static; grid-column: 2; }
.panel .fm-bench .r-card .r-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel .fm-bench .r-card .r-lv { font-size: 11px; }
/* Đang kéo: chỗ thả được sáng lên, chỗ đang trỏ vào sáng mạnh */
.formation-screen.dragging .f-cell, .formation-screen.dragging .fm-bench { border-color: rgba(246, 220, 140, .65); }
.formation-screen.dragging .f-cell.empty { background: rgba(233, 196, 106, .1); }
.panel .f-cell.drop-over, .fm-bench.drop-over {
  border-color: #fff3d6 !important; background: rgba(155, 44, 34, .45) !important; box-shadow: 0 0 0 2px #e9c46a, 0 0 18px rgba(233, 196, 106, .55);
}
.drag-src { opacity: .35; }
.fm-ghost {
  position: absolute; z-index: 900; pointer-events: none; transform: translate(-50%, -60%) rotate(-3deg);
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; padding: 6px; border-radius: 10px;
  font: 700 12px var(--font-ui); color: #fff3d6; background: rgba(24, 16, 9, .92); border: 2px solid #e9c46a;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .65);
}
.fm-ghost .thumb { height: 64px; max-width: 100%; object-fit: contain; }
.fm-ghost .portrait { width: 52px; height: 52px; font-size: 20px; }
/* Trạng thái ra trận ngay dưới tên trong bảng nhân vật */
.fd-team { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.fd-team .btn-game { padding: 5px 14px; font-size: 13px; }
.fd-in { font-size: 12.5px; font-weight: 700; color: #9fd88a; }
.fd-out { font-size: 12.5px; font-weight: 700; color: #d6c6a4; }
@media (max-width: 900px) {
  .formation-screen .panel-body.fm-body { display: block; overflow-y: auto; }
  .fm-layout { display: flex; flex-direction: column; }
  .fm-left, .fm-right { overflow: visible; }
  .fm-left { container-type: normal; }
  .panel .fm-left .f-cell { height: 120px; }
  .fm-bench-list { flex-direction: row; flex-wrap: wrap; }
  .panel .fm-bench .r-card { width: 150px; }
  .fm-hint { max-width: none; }
}

/* ---------- Sơ đồ hình người: 6 ô đồ quanh hình nhân vật (Đội hình › Trang bị, Hành trang) ---------- */
.doll {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .9fr) minmax(0, 1fr); gap: 8px 10px; margin: 6px 0 8px;
  grid-template-areas: "helm fig accessory" "armor fig weapon" "boots fig belt";
}
.doll-fig {
  position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 0; border-radius: 50% 50% 14px 14px;
  background: radial-gradient(ellipse at 50% 35%, rgba(233, 196, 106, .22), rgba(0, 0, 0, .35) 70%); border: 1px solid rgba(233, 196, 106, .3);
}
/* Hình cao bằng cả cột, căn giữa; tay, vũ khí thò ra hai bên thì nằm sau các ô đồ */
.doll-pic {
  position: absolute; left: 50%; bottom: 12px; z-index: 0; transform: translateX(-50%);
  height: calc(100% - 22px); width: auto; max-width: none; pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
}
.doll-slot { z-index: 1; }
.doll-fig .portrait { width: 70px; height: 70px; margin: auto; font-size: 26px; }
.doll-count {
  position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 0 8px; border-radius: 9px; white-space: nowrap;
  font-size: 11px; color: #f1d38a; background: rgba(24, 16, 9, .95); border: 1px solid rgba(233, 196, 106, .45);
}
.doll-slot { position: relative; min-width: 0; }
.panel .doll-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 100%; min-height: 70px; padding: 6px 8px; border-radius: 10px;
  text-align: left; font: inherit; color: #fff3d6; cursor: pointer;
  background: #1a110a; border: 1px solid color-mix(in srgb, var(--tier) 65%, transparent);
  box-shadow: inset 0 0 14px color-mix(in srgb, var(--tier) 18%, transparent);
}
.panel .doll-btn:hover { background: #4a1a12; border-color: #e9c46a; }
.doll-slot.empty .doll-btn { border-style: dashed; box-shadow: none; }
.doll-slot.r .doll-btn { flex-direction: row-reverse; text-align: right; }
.doll-btn .ico { width: 52px; height: 52px; flex: none; }
.doll-plus {
  display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 10px; color: #8a7a5a;
  border: 2px dashed rgba(233, 196, 106, .35);
}
.doll-plus svg { width: 26px; height: 26px; }
.doll-plus img { width: 100%; height: 100%; object-fit: contain; opacity: .6; }
.doll-txt { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; line-height: 1.25; }
.doll-label { font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: #e9c46a; }
.doll-txt .gname { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; }
.doll-txt small { font-size: 10.5px; color: #d6c6a4; }
.doll-txt i { font-size: 11.5px; color: #998a70; }
.panel .doll-x {
  position: absolute; top: -6px; width: 20px; height: 20px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  font-size: 11px; line-height: 1; color: #fff3d6; background: #6b2a1c; border: 1px solid #e9c46a; cursor: pointer;
}
.doll-slot.l .doll-x { right: -6px; }
.doll-slot.r .doll-x { left: -6px; }
.panel .doll-x:hover { background: #9b2c22; }
/* Bộ trang bị đang mặc, thông tin bộ ở chi tiết món đồ */
.doll-sets { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.set-box { padding: 6px 10px; border-radius: 8px; background: rgba(0, 0, 0, .28); border: 1px solid rgba(98, 201, 79, .35); }
.set-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: #e8dcc0; margin-bottom: 2px; }
.set-head small { color: #d6c6a4; }
.set-tag {
  display: inline-block; padding: 0 7px; border-radius: 8px; font-size: 11px; font-weight: 700; white-space: nowrap;
  color: #10240c; background: #8fd27a;
}
.set-line { font-size: 12px; color: #8a7a5a; }
.set-line b { color: inherit; }
.set-line.on { color: #9fd88a; }
.set-pieces { display: flex; flex-wrap: wrap; gap: 3px 10px; margin: 2px 0 4px; font-size: 11.5px; color: #998a70; }
.set-piece.on { color: #9fd88a; font-weight: 700; }
/* Dòng phụ ◆ */
.g-subs { display: flex; flex-wrap: wrap; gap: 0 8px; font-size: 11px; color: #8fc3f0; }
.g-subs.big { font-size: 13px; gap: 2px 14px; margin-bottom: 4px; }
.g-card .set-tag { align-self: flex-start; margin-top: 2px; font-size: 10px; }
/* Khung hẹp (Hành trang, điện thoại): biểu tượng trên, chữ dưới, căn giữa */
.doll { container-type: inline-size; }
@container (max-width: 440px) {
  .panel .doll-btn, .doll-slot.r .doll-btn { flex-direction: column; justify-content: center; gap: 3px; padding: 6px 4px; text-align: center; }
  .doll-btn .ico, .doll-plus { width: 42px; height: 42px; }
  .doll-txt { align-items: center; font-size: 11.5px; }
  .doll-txt small { display: none; }
}
@media (max-width: 520px) {
  .doll { grid-template-columns: minmax(0, 1fr) minmax(96px, .9fr) minmax(0, 1fr); gap: 6px; }
}

/* ---------- Bảng chọn đồ ---------- */
.panel.gp-box { width: min(620px, 100%); display: flex; flex-direction: column; gap: 6px; overflow-x: hidden; }
.gp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gp-head h3 { margin: 0; }
.gp-head h3 small { font-size: 13px; color: #d6c6a4; font-weight: 400; }
.gp-cur { font-size: 13px; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, .3); }
.gp-cur .ico.sm { width: 24px; height: 24px; vertical-align: middle; }
/* Món đang mặc ở đầu bảng chọn đồ: cường hoá, tháo ngay tại chỗ */
.gp-worn {
  display: flex; gap: 12px; align-items: flex-start; padding: 8px 10px; border-radius: 10px;
  background: rgba(0, 0, 0, .32); border: 1px solid color-mix(in srgb, var(--tier) 70%, transparent);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--tier) 18%, transparent);
}
.gp-worn > .ico.big { width: 72px; height: 72px; flex: none; }
.gp-worn-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.gp-worn-name { font-size: 15px; }
.gp-worn-name small { font-size: 12px; color: #d6c6a4; }
.gp-worn .fd-hint { margin: 2px 0 0; font-size: 12px; }
.gp-worn-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.panel .gp-worn-btns .btn-game { padding: 6px 14px; font-size: 13px; }
.gp-box .sp-label small { text-transform: none; letter-spacing: 0; color: #998a70; margin-left: 6px; }
.gp-cur small { color: #d6c6a4; }
.gp-note { font-size: 11.5px; color: #998a70; }
.gp-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; padding-right: 4px; }
.gp-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px;
  background: rgba(0, 0, 0, .25); border-left: 4px solid var(--tier);
}
.gp-row.dim { opacity: .5; }
.gp-row > .ico { width: 46px; height: 46px; }
.gp-info { min-width: 0; font-size: 13px; }
.gp-info small { color: #d6c6a4; }
.gp-diff { margin-top: 2px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 2px 10px; color: #d6c6a4; }
.gp-diff .up { color: #9fd88a; }
.gp-diff .down { color: #ff8a7a; }
.panel .gp-row .btn-game { padding: 6px 14px; font-size: 13px; }

/* ---------- Thẻ võ công: loại, mục tiêu, sát thương, hiệu ứng, tuyệt chiêu ---------- */
.sk-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.sk-card {
  --kc: #c0641e; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; line-height: 1.4;
  background: rgba(0, 0, 0, .28); border-left: 4px solid var(--kc); border-top: 1px solid rgba(233, 196, 106, .15);
}
.sk-card.kind-noi { --kc: #8a5ad8; }
.sk-card.kind-tri { --kc: #3fae6a; }
.sk-card.kind-ho { --kc: #3f8fc4; }
.sk-card.ult { box-shadow: 0 0 0 1px rgba(233, 196, 106, .55), 0 0 12px rgba(233, 196, 106, .25); }
.sk-card.later > :not(.sk-lock) { opacity: .6; }   /* chiêu chưa học: mờ, riêng dòng khoá + nút Học ngay vẫn rõ */
.sk-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sk-top b { font-size: 14px; color: #fff3d6; }
.sk-top .sk-kind { font-style: normal; color: var(--kc); font-size: 15px; }
.sk-ult { padding: 0 7px; border-radius: 8px; font-size: 11px; font-weight: 700; color: #2a1a0c; background: #f1d38a; }
.sk-cost { margin-left: auto; font-size: 11.5px; color: #8fc3f0; }
.sk-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; font-size: 12px; color: #f1d38a; }
.sk-meta span + span::before { content: ''; }
.sk-fx { margin: 3px 0 0; padding-left: 16px; color: #cfe3b0; }
.sk-desc { margin-top: 3px; color: #d6c6a4; font-style: italic; }
.sk-lock { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 3px; font-size: 12px; color: #ffe2b8; }
.panel .sk-learn {
  margin-left: auto; padding: 3px 12px; border-radius: 12px; font-size: 12px; font-weight: 700; color: #2a1a0c;
  background: radial-gradient(circle at 40% 30%, #fde7a6, #c99a3a 75%); border: 1px solid #f6dc8c;
}
.panel .sk-learn:hover:not(:disabled) { background: radial-gradient(circle at 40% 30%, #fff0c0, #d8aa48 75%); border-color: #fff3d6; }
.panel .sk-learn.poor { opacity: .45; filter: grayscale(.6); }   /* thiếu bạc: vẫn bấm được để báo thiếu bao nhiêu */
.fd-pills { margin-bottom: 8px; }
.sk-ultnote { margin-top: 3px; font-size: 12px; color: #f1d38a; }
.fd-sum { margin: 6px 0; font-size: 13px; }
.fd-sum small { color: #998a70; }

/* ---------- Hành trang: hàng nhân vật có nút ‹ ›, lăn chuột để cuộn, tên tối đa 2 dòng ---------- */
.bh-strip { flex: none; display: flex; align-items: center; gap: 6px; min-width: 0; }
.bh-strip .bag-heroes { flex: 1; min-width: 0; scroll-behavior: smooth; scrollbar-width: none; }
.bh-strip .bag-heroes::-webkit-scrollbar { display: none; }
.panel .bh-arrow {
  flex: none; width: 34px; height: 98px; padding: 0; display: grid; place-items: center; border-radius: 8px;
  color: #f1d38a; background: rgba(24, 16, 9, .88); border: 1px solid rgba(233, 196, 106, .55);
}
.panel .bh-arrow svg { width: 22px; height: 22px; }
.panel .bh-arrow:hover { background: #6b2a1c; border-color: #e9c46a; }
.panel .bh-chip { width: 96px; height: 106px; }
.panel .bh-chip span {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-align: center; line-height: 1.15; font-size: 11.5px;
}
.panel .bh-chip .thumb { height: 50px; }

/* ---------- Boss thế giới ---------- */
:is(.stage-map, .home-screen) .wb-btn {
  position: absolute; left: 3%; top: 112px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start;
  padding: 6px 14px; border-radius: 10px; font: 700 15px var(--font-title); color: #fff3d6; cursor: pointer;
  background: linear-gradient(#5a1d12, #2a0e08); border: 1px solid #e9c46a; box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
:is(.stage-map, .home-screen) .wb-btn small { font: 400 11.5px var(--font-ui); color: #f1d38a; }
:is(.stage-map, .home-screen) .wb-btn.live { animation: wb-pulse 1.4s ease-in-out infinite; }
:is(.stage-map, .home-screen) .wb-btn:hover { filter: brightness(1.15); }
@keyframes wb-pulse { 50% { box-shadow: 0 0 0 3px rgba(233, 196, 106, .4), 0 0 22px rgba(255, 120, 60, .8); } }
@media (max-width: 760px) and (orientation: portrait) { :is(.stage-map, .home-screen) .wb-btn { top: 92px; font-size: 13px; padding: 4px 10px; } }
/* Ở màn Thành: góc trên bên phải (bên trái là tên Thành) */
.home-screen .wb-btn { left: auto; right: 3%; top: calc(var(--tb-h) + 14px); align-items: flex-end; }
@media (max-width: 760px) and (orientation: portrait) { .home-screen .wb-btn { top: calc(var(--tb-h) + 10px); } }
.wb-layout { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.wb-boss { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.wb-fig { height: 210px; display: flex; align-items: flex-end; justify-content: center; }
.panel .wb-fig .thumb { height: 100%; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .7)); }
.wb-name { font: 700 19px var(--font-title); color: #f5961f; }
.wb-name small { font: 400 12px var(--font-ui); color: #d6c6a4; }
.wb-status { font-size: 13px; color: #e8dcc0; }
.wb-live { color: #ff8a5a; font-weight: 700; }
.wb-me { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
.wb-me > div { padding: 6px; border-radius: 8px; background: rgba(0, 0, 0, .3); border: 1px solid rgba(233, 196, 106, .25); }
.wb-me small { display: block; font-size: 11px; color: #d6c6a4; }
.wb-me b { font-size: 15px; color: #fff3d6; }
.wb-me i { font-size: 11px; font-style: normal; color: #998a70; }
.panel .wb-go { width: 100%; padding: 10px; font-size: 16px; }
.wb-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.wb-table th, .wb-table td { padding: 4px 8px; border-bottom: 1px solid rgba(233, 196, 106, .12); text-align: left; }
.wb-table th { color: #e9c46a; font-weight: 700; }
.wb-table .num { text-align: right; }
.wb-table tr.you td { color: #fff3d6; font-weight: 700; background: rgba(155, 44, 34, .35); }
.wb-rewards { display: flex; flex-direction: column; gap: 5px; }
.wb-rw { padding: 5px 8px; border-radius: 8px; background: rgba(0, 0, 0, .25); border: 1px solid rgba(233, 196, 106, .18); font-size: 12.5px; }
.wb-rw.on { border-color: #e9c46a; background: rgba(155, 44, 34, .35); }
.wb-rw .q-rew { margin-top: 2px; }
.battle .wb-tag { left: 50%; transform: translateX(-50%); background: rgba(90, 29, 18, .9); }
.battle .wb-tag b { color: #ffd27a; font-size: 1.15em; }
@media (max-width: 760px) and (orientation: portrait) { .wb-layout { grid-template-columns: 1fr; } .wb-fig { height: 150px; } }

/* ---------- Đội hình theo hình thế trận: ô ngoài hình tối đi, dòng tên thế trận trên lưới ---------- */
/* Ô thuộc hình thế trận: viền vàng, nền ấm (đứng đây được cộng); ô khác vẫn thả được, trông trung tính */
.panel .f-cell.inshape { box-shadow: inset 0 0 0 1px rgba(246, 210, 120, .7), inset 0 -22px 26px -14px rgba(246, 200, 100, .35); }
.panel .f-cell.empty.inshape { border: 1px solid rgba(246, 210, 120, .55); background: radial-gradient(ellipse 60% 24% at 50% 84%, rgba(246, 200, 100, .3), transparent), rgba(233, 196, 106, .08); }
.f-in { position: absolute; z-index: 2; top: 3px; left: 6px; font-size: 13px; line-height: 1; color: #ffe08a; text-shadow: 0 0 6px rgba(255, 200, 90, .9), 0 1px 1px #000; }
.panel .fm-left .f-name { font-size: 11.5px; line-height: 1.2; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
.panel .fm-left .f-lv { font-size: 10.5px; white-space: nowrap; }
.f-head { font-size: 11.5px; }
.f-shape { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #d6c6a4; white-space: nowrap; }
.f-shape b { color: #ffe9b0; }
.f-shape .link { margin-left: auto; font-size: 12px; }
/* Hình thế trận: lưới 3×3, ô được đứng sáng vàng */
.tshape { flex: none; display: grid; grid-template-columns: repeat(3, 12px); gap: 2px; }
.tshape i { width: 12px; height: 12px; border-radius: 2px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .07); }
.tshape i.on { background: linear-gradient(#ffe39a, #c98a2a); border-color: #fff0b8; box-shadow: 0 0 5px rgba(246, 200, 100, .55); }
.trp-card .tshape { grid-template-columns: repeat(3, 16px); gap: 3px; margin: 2px 0 4px; }
.trp-card .tshape i { width: 16px; height: 16px; border-radius: 3px; }
.tshape.big { grid-row: 2; grid-column: 2; grid-template-columns: repeat(3, 84px); gap: 7px; }
.tshape.big > * {
  width: 84px; height: 84px; border-radius: 9px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.tshape.big > .on {
  background: radial-gradient(ellipse 70% 26% at 50% 86%, rgba(233, 196, 106, .4), transparent), rgba(233, 196, 106, .12);
  border: 1px solid #e9c46a; box-shadow: inset 0 0 14px rgba(246, 200, 100, .2), 0 0 8px rgba(246, 200, 100, .25);
}
.tshape.big > * .thumb { height: 78px; max-width: 100%; object-fit: contain; object-position: bottom; }
.tshape.big > :not(.on) { background: rgba(0, 0, 0, .3); border: 1px dashed rgba(233, 196, 106, .22); }
.tshape.big > * { position: relative; }
/* Lưới lớn: ▲ Địch phía trên, nhãn hàng Trước / Giữa / Sau bên trái */
.tbig { display: grid; grid-template-columns: auto auto; gap: 4px 6px; }
.tb-enemy, .f-enemy { grid-column: 2; text-align: center; font: 700 11.5px var(--font-ui); letter-spacing: 1px; color: #ffb39a; }
.tb-rows { grid-row: 2; display: grid; grid-template-rows: repeat(3, 84px); gap: 7px; }
.tb-rows em, .f-rowlab {
  writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; justify-content: center;
  font: 700 11px var(--font-ui); font-style: normal; letter-spacing: 1px; color: #d6c6a4;
  border-radius: 6px; background: rgba(233, 196, 106, .06);
}
.tb-rows em:first-child, .f-rowlab.front { color: #ffb39a; background: rgba(255, 140, 100, .08); }
.tshape.big > button { padding: 0; font: inherit; color: inherit; cursor: pointer; }
.trp-big .tshape.big > button:hover { background: radial-gradient(ellipse 70% 26% at 50% 86%, rgba(233, 196, 106, .55), transparent), rgba(233, 196, 106, .2); border-color: #fff0b8; }
.trp-big .tshape.big > button.mc { border-color: #fff0b8; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 0 12px rgba(246, 210, 120, .5); }
.tshape.big > .pv .thumb { opacity: .55; filter: grayscale(.35); }
.tb-plus { margin: auto; font-size: 22px; color: #b8a27a; }
.trp-big { gap: 6px; }
.trp-big small { max-width: 290px; text-align: center; font-size: 11.5px; color: #d6c6a4; }
/* Dòng chỉ số cộng của thế trận dưới lưới Xếp đội */
.f-bonus { display: flex; flex-wrap: wrap; gap: 1px 10px; font-size: 11px; line-height: 1.4; color: #cfe3b0; }
.f-bonus b { color: #f1d38a; font-weight: 600; }
/* Thẻ Thế trận: 5 thẻ hình chữ, chi tiết bên dưới */
.trp-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 10px; border-bottom: 1px solid rgba(233, 196, 106, .18); }
.panel .trp-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px 9px; border-radius: 10px;
  color: var(--lac-text); background: rgba(0, 0, 0, .28); border: 1px solid rgba(233, 196, 106, .2);
}
.panel .trp-card b { font: 700 15px var(--font-title); color: #fff3d6; }
.panel .trp-card small { font-size: 11px; color: #d6c6a4; text-align: center; }
.panel .trp-card:hover:not(.on) { background: rgba(255, 255, 255, .06); }
.panel .trp-card.on { border-color: #f6dc8c; background: rgba(155, 44, 34, .38); box-shadow: 0 0 0 1px rgba(246, 220, 140, .35), 0 0 14px rgba(246, 190, 90, .22); }
.panel .trp-card.locked { opacity: .5; }
.panel .trp-card > i { position: absolute; top: 4px; right: 6px; font: 700 10px var(--font-ui); font-style: normal; color: #9fd88a; }
.trp-detail { grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 18px; }
.trp-big { display: flex; flex-direction: column; align-items: center; }
.trp-mid { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.trp-name small { display: block; margin: 2px 0 0; }
@media (max-width: 900px) {
  .trp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trp-detail { grid-template-columns: 1fr; justify-items: center; }
  .trp-mid { width: 100%; }
}
@media (max-width: 560px) {
  .trp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tshape.big { grid-template-columns: repeat(3, 52px); }
  .tb-rows { grid-template-rows: repeat(3, 52px); }
  .tshape.big > * { width: 52px; height: 52px; }
  .tshape.big > * .thumb { height: 48px; }
}

.f-enemy { padding-left: 30px; }   /* canh giữa trên 3 làn (bỏ cột nhãn hàng) */
.f-bonus-h { color: #ffe08a; font-weight: 600; }
.f-shape .ok { color: #9fd88a; } .f-shape .ok b { color: #c9f0b0; }
.f-shape .lock { color: #ffcf9a; }
.panel .trp-card > i.lk { color: #ffcf9a; }