/* Hokage Saga — lớp màu & hiệu ứng "đèn lồng vàng" (nạp SAU hokage-theme.css, áp cho mọi trang).
   Muốn tắt toàn bộ: xoá dòng <link ... fx.css> trong template/head.php. Chỉnh độ sáng nhanh: --fx-* bên dưới. */
:root {
  --fx-gold: #ffc35a; --fx-amber: #ff9a2e; --fx-cream: #ffe6b0;
  --fx-border: #ffc766;                         /* viền thẻ */
  --fx-glow: 0 0 0 1px #ffcf7a40, 0 0 18px #ffa83a55, 0 0 42px #ff8f2a22;   /* hào quang ngoài */
  --fx-card: linear-gradient(155deg, #ffcb7a38 0%, #3a261244 26%, #0c14227a 58%, #ff9a3233 100%);
  --text-soft: #e6ebf5; --text-mute: #c4cee0; --text-faint: #a9b6cc;
}

/* ---------- Nền: sáng & ấm hơn, bụi vàng bay ---------- */
.scene { background-image: url('/ui/img/bg/village-warm.webp') !important; background-position: center !important; }
@media (max-width: 720px) { .scene { background-image: url('/ui/img/bg/village-warm-mobile.webp') !important; background-position: center top !important; } }
.scene::before {
  background:
    radial-gradient(ellipse 70% 50% at 50% 105%, #ff9a2e38, transparent 70%),
    radial-gradient(ellipse 40% 35% at 85% 8%, #ffd78a2a, transparent 70%),
    linear-gradient(180deg, #03081100 0%, #03081118 60%, #0308114d 100%) !important;
}
.scene .particles { display: block !important; position: absolute; inset: 0; pointer-events: none; }
:root body .scene .particles { width: auto; height: auto; z-index: 3; filter: none; }
.fx-mote { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #fff3c9 0%, #ffc35a 45%, #ff9a2e00 72%); opacity: 0;
  animation: fx-float var(--d) linear var(--dl) 1; }
@keyframes fx-float {
  0% { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  15% { opacity: var(--o, .85); }
  50% { transform: translate3d(var(--dx), -18vh, 0) scale(1); }
  85% { opacity: var(--o, .85); }
  100% { transform: translate3d(calc(var(--dx) * -.6), -36vh, 0) scale(.7); opacity: 0; }
}

/* ---------- Thẻ kính: nền hổ phách, viền sáng, hào quang ---------- */
.glass { background: var(--fx-card), #0a1222b3; border-color: var(--fx-border); box-shadow: var(--fx-glow), inset 0 1px 1px #fff3cf99, inset 0 -18px 40px -24px #ff9a2e40;
  transition: transform .25s var(--ease); }
.glass .glass { background: #0e18298c; box-shadow: none; }
.glass--overlay, .glass.modal, .search-results, .bell-menu { background: #121b2cf7; }
.glass--hover:hover, a > .glass:hover, .kpi:hover, .float-card:hover {
  transform: translateY(-3px); border-color: #ffe0a0;
  box-shadow: 0 0 0 1px #ffe0a080, 0 0 24px #ffb04a88, 0 0 60px #ff8f2a3a, 0 16px 36px #0008, inset 0 1px 1px #fff6dd;
}
/* viền sáng quét qua khi rê chuột */
.glass { position: relative; }

/* ---------- Sidebar ---------- */
.sidebar { background: linear-gradient(170deg, #ffcf7a26, #140f0c66 22%, #0b1222b8 70%, #ff9a2e22), #0a1222c4;
  border-color: #ffcb6e; box-shadow: 0 0 0 1px #ffcf7a55, 0 0 26px #ffa83a55, 0 0 60px #ff8f2a1f, 0 14px 40px #0008, inset 0 1px 2px #fff3cf; }
.sidebar nav a { font-size: .84rem; min-height: 46px; border-bottom: 1px solid #ffd99a14; border-radius: 10px; }
.sidebar nav a .nm small { font-size: .72rem; color: #efd9b0; }
.sidebar nav a .ico { color: #ffd98f; filter: drop-shadow(0 0 6px #ffb04a66); }
.sidebar nav a:hover { background: linear-gradient(100deg, #ffbc5738, #ffe1bb0a); color: #fff; }
.sidebar nav a[aria-current='page'], .sidebar-links a[aria-current='page'] {
  background: linear-gradient(100deg, #ffbc5780, #ffb04a24 70%, transparent); border-color: #ffd18c;
  box-shadow: inset 3px 0 0 #ffd17b, 0 0 20px #ffad3e55; }
.sidebar .tag { box-shadow: 0 0 12px #ffae4288, inset 0 1px 0 #fff1b0; }
.lb-xu { background: linear-gradient(120deg, #ffc35a3a, #ff9a2e14); border-color: #ffd28a88; box-shadow: 0 0 18px #ffa83a33, inset 0 1px 0 #fff3cf55; }
.lb-xu-val .coin span { color: #fff; text-shadow: 0 0 14px #ffb84d99; }

/* ---------- Thanh trên ---------- */
.pill, .icon-btn, .user-chip, .search input { border-color: #ffc766aa; background: linear-gradient(135deg, #ffcf7a26, #121b2cd0); box-shadow: 0 0 12px #ffa83a33, inset 0 1px 0 #fff0c540; }
.pill:hover, .icon-btn:hover, .user-chip:hover { border-color: #ffe0a0; box-shadow: 0 0 18px #ffb04a77, inset 0 1px 0 #fff0c566; }
.user-chip .avatar { box-shadow: 0 0 14px #ffb04aaa; }

/* ---------- Chữ & số ---------- */
.hello h1, .page-head h1 { text-shadow: 0 2px 24px #ff9a2e33, 0 2px 6px #0009; }
.grad-text { filter: drop-shadow(0 0 18px #ffa83a66); }
.eyebrow { color: #ffd98f !important; text-shadow: 0 0 10px #ffb04a66; }
.kpi .val, .big-num, .stat .stat-value, .num { color: #fff; text-shadow: 0 0 18px #ffb84d55; }
.kpi .k-label { color: #f3e6cc; }
.panel-head h3 svg, .kpi .chip-ico svg, .chip-ico svg { filter: drop-shadow(0 0 6px #ffb04a88); }
.chip-ico { background: linear-gradient(145deg, #ffcf7a30, #1a1a1f99); border-color: #ffcb6e99; box-shadow: 0 0 14px #ffa83a44, inset 0 1px 0 #fff3cf66; }

/* Nhãn chỉ cung cấp thông tin, không giả dạng nút mở danh sách. */
.panel-head .badge--mute { border-color: #ffcb6e88; background: #ffcf7a18; color: #ffe6b0; }

/* ---------- Nút ---------- */
.btn { border-color: #ffc766aa; box-shadow: 0 0 12px #ffa83a33, inset 0 1px 0 #fff0d340; }
.btn:hover { border-color: #ffe0a0; box-shadow: 0 0 20px #ffb04a66, inset 0 1px 0 #fff0d366; transform: translateY(-1px); }
.btn--primary { box-shadow: 0 0 0 1px #ffe5a3, 0 0 22px #ffb84d99, 0 0 50px #ff9d3344, inset 0 1px 2px #fff9d7; }

/* ---------- Thẻ sự kiện nổi bật ---------- */
.float-card { border-color: var(--gold-line) !important; box-shadow: var(--gold-frame) !important; }
.float-card .play { box-shadow: 0 0 0 4px #c6dfa314; }

/* ---------- Xuất hiện dần ---------- */
.fx-in { animation: realm-enter .34s var(--ease) both; }
@keyframes realm-enter { from { opacity: .65; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Máy yếu / người dùng tắt chuyển động */
@media (prefers-reduced-motion: reduce) {
  .fx-mote, .btn--primary::after, .float-card, .float-card .play { animation: none !important; }
  .fx-mote { display: none; } .fx-in { animation: none; }
}
.perf-lite .fx-mote, .effects-paused .fx-mote { display: none; }


/* ---------- Hiệu năng ---------- */
.slot .slot-img { filter: none !important; }                 /* hàng trăm icon: bỏ drop-shadow (tốn GPU khi cuộn) */
.coin svg { filter: none !important; }
.scene { contain: strict; }
.scene .particles { contain: strict; }
/* danh sách dài: chỉ vẽ phần đang nhìn thấy */
.table tbody tr, .rank-rewards, .lb-row, .leaderboard-panel li, .item-grid > *, .slot-grid > * { content-visibility: auto; contain-intrinsic-size: auto 64px; }
/* Không paint-contain details: danh sách gợi ý cần mở vượt mép khung. */

/* ---------- Chữ tiêu đề & chữ nút nổi bật ---------- */
.page-head h1, .hello h1 { background: linear-gradient(180deg, #fffaf0 0%, #ffe7b3 55%, #ffc76a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 14px #ff9a2e55) drop-shadow(0 1px 1px #000a); }
.hello h1 .grad-text { background: linear-gradient(100deg, #ffe7a0, #ffc24e 45%, #ff8a2e); -webkit-background-clip: text; background-clip: text; }
.grad-text { filter: drop-shadow(0 0 16px #ffa83a77); }
.panel-head h3, .glass > h2, .glass > h3, .section-title, .glass .head h3 { color: #ffe9bf; text-shadow: 0 0 14px #ffb04a66, 0 1px 1px #000; letter-spacing: .01em; }
.page-head .eyebrow::before { background: linear-gradient(90deg, transparent, #ffc35a); height: 2px; box-shadow: 0 0 8px #ffb04a; }
.btn { font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 1px #0008, 0 0 10px #ffb04a55; }
.btn--primary, .btn--jade { text-shadow: 0 1px 0 #fff6d6aa; color: #2a1603; }
.btn .icon { filter: drop-shadow(0 0 4px #ffb04a88); }
.tab[aria-selected='true'], .tab.active, .tabs .tab[aria-current] { text-shadow: 0 0 10px #ffb04a88; }
.badge { text-shadow: 0 0 8px #ffb04a44; }
.sidebar nav a .nm-name { font-weight: 700; text-shadow: 0 1px 1px #000a; }
.sidebar nav a[aria-current='page'] .nm-name { color: #fff; text-shadow: 0 0 10px #ffc35acc; }

/* ---------- Mobile: nút Thêm + bảng tất cả chức năng ---------- */
.tabbar .tab-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: none; border: 0; color: var(--text-mute); font: inherit; font-family: var(--font-display); font-weight: var(--fw-display); font-size: .72rem; cursor: pointer; }
.tabbar .tab-more .ico { display: grid; place-items: center; width: 34px; height: 26px; border-radius: 10px; }
.tabbar .tab-more[aria-expanded='true'] { color: var(--text-hi); } .tabbar .tab-more[aria-expanded='true'] .ico { color: #2a1603; background: var(--grad-accent); box-shadow: 0 0 14px #ffb04a99; }
.more-sheet { position: fixed; inset: 0; z-index: 55; }
.more-back { position: absolute; inset: 0; background: #03081199; }
.more-panel { position: absolute; left: 10px; right: 10px; bottom: calc(var(--tabbar-h) + 18px + env(safe-area-inset-bottom)); max-height: calc(100dvh - var(--tabbar-h) - 40px);
  overflow: auto; overscroll-behavior: contain; padding: 14px 14px 16px; border-radius: 22px; background: #0f1828f5 !important; animation: more-up .22s var(--ease); }
@keyframes more-up { from { transform: translateY(24px); opacity: 0; } }
.more-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .more-head b { font-size: 1.05rem; color: #ffe9bf; text-shadow: 0 0 12px #ffb04a66; }
.more-head .icon-btn { width: 40px; height: 40px; }
.more-title { margin: 12px 2px 8px; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #ffd98f; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.more-grid a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; min-height: 84px; border-radius: 14px; text-align: center;
  border: 1px solid #ffcb6e44; background: linear-gradient(160deg, #ffcf7a1f, #0c1424cc); color: var(--text-hi); font-size: .78rem; font-weight: 600; line-height: 1.25; }
.more-grid a .ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #ffd98f; background: #ffcf7a1f; border: 1px solid #ffcb6e55; }
.more-grid a[aria-current='page'] { border-color: #ffd18c; box-shadow: 0 0 16px #ffad3e55; } .more-grid a[aria-current='page'] .ico { color: #2a1603; background: var(--grad-accent); }
.more-grid .tag { position: absolute; top: 6px; right: 6px; font-size: .5rem; padding: 1px 5px; border-radius: 99px; background: linear-gradient(120deg, #ffe49a, #ffad43); color: #301901; font-weight: 700; }
@media (min-width: 981px) { .more-sheet { display: none; } }
@media (max-width: 360px) { .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
html.more-open { overflow: hidden; }