/* ---------- Hệ màu & kiểu chữ (design tokens) ----------
   Bảng màu lấy cảm hứng từ 3 nguyên tố cốt lõi của thế giới tu tiên:
   TÍM (linh khí/tu vi đang lưu chuyển), VÀNG KIM (đẳng cấp, thành tựu,
   ấn triện) và NGỌC BÍCH (sinh khí, khí huyết). Chữ hiển thị dùng Noto
   Serif (nét bút lông cổ điển) ghép với Be Vietnam Pro (font Việt hiện
   đại, dễ đọc ở cỡ nhỏ) — không dùng font trang trí Latin thuần vì tiêu
   đề tiếng Việt có dấu (Ê, Ý...) cần bộ ký tự đầy đủ. */
:root {
    --font-display: "Noto Serif", "Segoe UI", serif;
    --font-body: "Be Vietnam Pro", "Segoe UI", Tahoma, sans-serif;
    --clr-qi: #a855f7;
    --clr-qi-deep: #7c3aed;
    --clr-gold: #d4af37;
    --clr-gold-soft: #f3d98a;
    --clr-jade: #4ade80;
    --clr-ink: #e8dfff;
    --clr-ink-dim: #9d8ab8;
    --clr-danger: #ef4444;
}

* { box-sizing: border-box; }

/* Ẩn hoàn toàn thanh cuộn trên toàn bộ trang (vẫn cuộn được bằng chuột/chạm,
   chỉ là không hiển thị thanh nữa), đồng thời chặn tràn ngang ngoài ý muốn
   (vì không còn thanh cuộn để nhận biết mà kéo). */
html {
    -webkit-text-size-adjust: 100%;
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* IE/Edge cũ */
    overflow-x: hidden;
}
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar, *::-webkit-scrollbar { display: none; } /* Chrome/Safari/Edge mới */

/* Toàn bộ giao diện dùng góc vuông (không bo tròn) */
*, *::before, *::after { border-radius: 0 !important; }

body {
    margin: 0;
    overflow-x: hidden;
    font-family: var(--font-body);
    background: radial-gradient(circle at top, #1b1330 0%, #0a0714 60%, #050409 100%);
    color: var(--clr-ink);
    min-height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

a { color: #c9a0ff; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Trạng thái focus rõ ràng cho điều hướng bàn phím — trước đây chưa có,
   khiến người dùng Tab qua trang không biết đang ở đâu. Chỉ hiện khi
   focus bằng bàn phím (:focus-visible), không hiện khi bấm chuột. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--clr-qi);
    outline-offset: 2px;
}

.wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 24px 16px 60px;
    position: relative;
}

/* Nút chuông thông báo — nằm ngay trong thanh nav, cạnh nút Đăng Xuất */
.notif-wrap {
    position: relative;
    display: inline-flex;
    z-index: 10;
}

.notif-bell {
    position: relative;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(120, 70, 200, 0.18);
    border: 1px solid rgba(180, 130, 255, 0.35);
    box-shadow: none;
    padding: 6px 14px;
    color: #e8dfff;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.15s ease;
}

.notif-bell:hover { filter: brightness(1.25); transform: translateY(-1px); }
.notif-bell:active { transform: translateY(0); }

.notif-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border: 2px solid #0a0714;
    animation: notifPulse 1.6s ease-in-out infinite;
}

@keyframes notifPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

.notif-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    max-width: calc(100vw - 24px);
    max-height: min(360px, 70vh);
    overflow-y: auto;
    background: #1b1330;
    border: 1px solid rgba(160, 110, 255, 0.35);
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
    padding: 10px;
    z-index: 40;
    text-align: left;
}

.notif-dropdown.open { display: block; }

.notif-dropdown .flash { margin-bottom: 8px; }
.notif-dropdown .flash:last-child { margin-bottom: 0; }

.notif-empty {
    color: #9d8ab8;
    font-size: 13px;
    text-align: center;
    padding: 10px 0;
}

@media (max-width: 640px) {
    .notif-bell { padding: 6px 10px; font-size: 13px; }
    .notif-dropdown { width: 240px; }
    .nav-menu .notif-wrap { width: 100%; }
    .nav-menu .notif-wrap .notif-bell { width: 100%; }
    .nav-menu .notif-dropdown { left: 0; right: 0; width: auto; }
}

.site-title {
    display: block;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: 4px;
    color: #d8bfff;
    text-shadow: 0 0 12px rgba(180, 120, 255, 0.6);
    margin-bottom: 4px;
    text-decoration: none;
    cursor: pointer;
}
.site-title:hover { text-decoration: none; filter: brightness(1.15); }

.site-sub {
    text-align: center;
    color: #9d8ab8;
    margin-bottom: 24px;
    font-style: italic;
    font-size: 14px;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
}

.nav a, .nav span {
    background: rgba(120, 70, 200, 0.18);
    border: 1px solid rgba(180, 130, 255, 0.35);
    padding: 6px 14px;
    font-size: 14px;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.nav a:hover { background: rgba(150, 100, 220, 0.3); text-decoration: none; }

.nav a.active {
    background: rgba(180, 130, 255, 0.45);
    border-color: rgba(210, 170, 255, 0.75);
    font-weight: 600;
}

/* Menu gọn: trên desktop hiển thị đầy đủ như cũ, trên di động thu vào 1 nút bấm để mở */
.nav-menu > summary {
    display: none;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::marker { content: ''; }
.nav-menu .nav { display: flex !important; }

.card {
    position: relative;
    background: rgba(30, 20, 50, 0.65);
    border: 1px solid rgba(160, 110, 255, 0.25);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 0 25px rgba(90, 40, 160, 0.15);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    /* Cho phép cuộn ngang bên trong card (vd: bảng rộng) thay vì phá layout trang trên màn hình nhỏ */
    overflow-x: auto;
}
/* Chỉ áp dụng hover trên thiết bị thực sự có con trỏ chuột — tránh trạng
   thái "kẹt" hover khi chạm trên điện thoại/máy tính bảng. */
@media (hover: hover) {
    .card:hover { border-color: rgba(180, 130, 255, 0.4); box-shadow: 0 0 30px rgba(120, 60, 200, 0.22); }
}



.card h2 {
    margin-top: 0;
    font-family: var(--font-display);
    font-weight: 600;
    color: #d8bfff;
    font-size: 18px;
    border-bottom: 1px solid rgba(160,110,255,0.25);
    padding-bottom: 8px;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

/* Mỗi mục thống kê là một "thẻ" riêng (nhãn nhỏ phía trên, giá trị lớn nổi
   bật phía dưới) thay vì một dòng chữ phẳng — dễ quét mắt hơn, đồng bộ với
   phong cách thẻ bài dùng ở trang nhân vật (.stat-plate). */
.stat-grid > div {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(160, 110, 255, 0.2);
    padding: 10px 14px;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) {
    .stat-grid > div:hover { border-color: rgba(180, 130, 255, 0.55); transform: translateY(-2px); }
}
.stat-grid div span.label { display: block; color: #a08bc7; font-size: 12px; margin-bottom: 4px; }
.stat-grid div span.value { display: block; color: #fff; font-weight: 700; font-size: 19px; }

.bar-bg {
    background: rgba(255,255,255,0.08);
    height: 16px;
    overflow: hidden;
    margin: 8px 0 4px;
}

.bar-fill {
    background: linear-gradient(90deg, #7c3aed, #c084fc);
    height: 100%;
}

/* Thanh tu vi khi đang chờ đại đột phá cảnh giới (khác màu để nổi bật) */
.bar-fill-major {
    background: linear-gradient(90deg, #ea580c, #fbbf24);
}

/* ---------- Tầng (level) trong cảnh giới ---------- */

.realm-level {
    display: inline-block;
    font-size: 10px;
    padding: 0 6px;
    margin-left: 4px;
    border: 1px solid rgba(160, 110, 255, 0.35);
    color: #cbb8ea;
    vertical-align: middle;
}

.realm-level-max {
    color: #fde047;
    border-color: rgba(250, 204, 21, 0.6);
    animation: glow-pulse 1.6s ease-in-out infinite;
}

.level-track {
    display: flex;
    gap: 4px;
    margin: 10px 0 2px;
}

.level-dot {
    flex: 1 1 auto;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(160, 110, 255, 0.2);
}

.level-dot.filled {
    background: linear-gradient(90deg, #7c3aed, #c084fc);
    border-color: rgba(192, 132, 252, 0.6);
}

.breakthrough-box {
    margin-top: 18px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(160, 110, 255, 0.2);
}

.breakthrough-box h3 { margin: 0 0 8px; font-size: 15px; color: #e8dfff; }

.breakthrough-box.major {
    border-color: rgba(251, 191, 36, 0.4);
    background: rgba(251, 191, 36, 0.06);
}

.btn {
    display: inline-block;
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    border: none;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    /* Kích thước chạm tối thiểu thân thiện cho mobile */
    min-height: 40px;
    line-height: 1.2;
    transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}

@media (hover: hover) {
    .btn:hover { filter: brightness(1.15); text-decoration: none; box-shadow: 0 2px 14px rgba(124, 58, 237, 0.4); }
    .btn.secondary:hover { box-shadow: 0 2px 14px rgba(124, 58, 237, 0.18); }
    .btn.danger:hover { box-shadow: 0 2px 14px rgba(239, 68, 68, 0.35); }
}
.btn:active { transform: translateY(1px); filter: brightness(1.05); }
.btn.secondary { background: rgba(120,70,200,0.25); border: 1px solid rgba(180,130,255,0.4); }
.btn.danger { background: linear-gradient(135deg, #b91c1c, #ef4444); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn:disabled:active { transform: none; }

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.actions .btn { flex: 1 1 auto; }

form.form-box input, form.form-box select {
    width: 100%;
    padding: 10px;
    margin: 6px 0 14px;
    border: 1px solid rgba(180,130,255,0.35);
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 16px; /* >=16px tránh iOS Safari tự zoom khi focus input */
}

label { color: #cdb8ef; font-size: 14px; }

.flash {
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
}
.flash.success { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.4); color: #86efac; }
.flash.error { background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.4); color: #fca5a5; }
.flash.info { background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.4); color: #93c5fd; }

.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.auto-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(160, 110, 255, 0.15);
    padding: 12px;
}

.auto-form { width: 100%; }
.auto-form .btn { width: 100%; }

.auto-badge {
    font-size: 13px;
    padding: 4px 10px;
    border: 1px solid rgba(160, 110, 255, 0.3);
    display: inline-block;
}

.auto-badge.on {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.1);
    animation: auto-pulse 1.6s ease-in-out infinite;
}

.auto-badge.off { color: #9d8ab8; }

.badge { display:inline-block; padding:2px 8px; font-size:12px; }
.badge.admin { background: rgba(239,68,68,0.2); color:#fca5a5; }
.badge.role-gm { background: rgba(239,68,68,0.25); color:#fca5a5; font-weight:bold; }
.badge.role-manager { background: rgba(56,189,248,0.2); color:#7dd3fc; }
.badge.role-player { background: rgba(148,163,184,0.15); color:#cbd5e1; }
.badge.role-banned { background: rgba(107,33,33,0.35); color:#f87171; text-decoration: line-through; }

@keyframes auto-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

table { width: 100%; border-collapse: collapse; }
table th, table td {
    text-align: left;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(160,110,255,0.15);
    font-size: 14px;
    white-space: nowrap;
}
table th {
    color: var(--clr-ink-dim);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
}
/* Hover từng hàng để dễ dò dữ liệu theo chiều ngang — chỉ bật khi bảng còn
   hiển thị dạng bảng thật (trên breakpoint 900px bảng chuyển sang xếp
   chồng dạng thẻ, lúc đó hover theo hàng không còn ý nghĩa). */
@media (hover: hover) and (min-width: 901px) {
    table tbody tr:hover td, table tr:hover td { background: rgba(160, 110, 255, 0.06); }
}

.item-type { color: #9d8ab8; font-size: 12px; white-space: normal; }
.tag-equipped { color: #86efac; font-size: 12px; }

.log-line { font-size: 13px; color: #cbb8ea; padding: 3px 0; border-bottom: 1px dashed rgba(160,110,255,0.12); }

/* ---------- Avatar / Danh hiệu / Hiệu ứng tên theo Cảnh Giới ---------- */

.char-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    vertical-align: middle;
}

.char-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(180, 120, 255, 0.5));
}

.char-name-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.char-name {
    font-weight: 700;
    letter-spacing: 0.5px;
}

.title-badge {
    display: inline-block;
    font-size: 11px;
    padding: 1px 8px;
    border: 1px solid currentColor;
    line-height: 1.6;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.realm-label {
    font-size: 11px;
    color: #9d8ab8;
    letter-spacing: 0.5px;
}

.title-badge.title-rainbow {
    border: 1px solid transparent;
    background: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f472b6, #f87171);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    border-image: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f472b6) 1;
    animation: rainbow-shift 4s linear infinite;
}

/* Bậc 1: Luyện Khí - Trúc Cơ — chưa có hiệu ứng nổi bật */
.realm-t1 { color: #e8dfff; }

/* Bậc 2: Kim Đan - Nguyên Anh — ánh sáng xanh dịu */
.realm-t2 {
    color: #93c5fd;
    text-shadow: 0 0 6px rgba(96, 165, 250, 0.6);
}

/* Bậc 3: Hóa Thần - Luyện Hư — ánh sáng lục ngọc */
.realm-t3 {
    color: #6ee7b7;
    text-shadow: 0 0 8px rgba(52, 211, 153, 0.7);
}

/* Bậc 4: Hợp Thể - Đại Thừa — hào quang cam vàng, nhấp nháy nhẹ */
.realm-t4 {
    color: #fdba74;
    text-shadow: 0 0 10px rgba(251, 146, 60, 0.85);
    animation: glow-pulse 2.4s ease-in-out infinite;
}

/* Bậc 5: Độ Kiếp — hào quang đỏ tía uy nghiêm */
.realm-t5 {
    color: #fca5a5;
    text-shadow: 0 0 8px rgba(239, 68, 68, 0.9), 0 0 16px rgba(239, 68, 68, 0.5);
    animation: glow-pulse 1.8s ease-in-out infinite;
}

/* Bậc 6: Tán Tiên — chữ cầu vồng huyền ảo, tối cao */
.realm-t6 {
    background: linear-gradient(90deg, #f87171, #fbbf24, #4ade80, #38bdf8, #a78bfa, #f472b6, #f87171);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow-shift 4s linear infinite, glow-pulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(240, 171, 252, 0.7));
}

@keyframes glow-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes rainbow-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* Lưới chọn avatar */
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap: 8px;
    margin: 10px 0 4px;
}

.avatar-option {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    padding: 8px 0;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(180, 130, 255, 0.25);
    cursor: pointer;
    min-height: 44px;
}

.avatar-option:hover { border-color: rgba(180, 130, 255, 0.6); }
.avatar-option.selected { border-color: #c084fc; background: rgba(124, 58, 237, 0.25); }
.avatar-option input { display: none; }

/* Avatar do người chơi tự tải lên (ảnh thật thay vì biểu tượng emoji) —
   dùng biến CSS --avatar-px truyền từ PHP để đặt kích thước, tương tự cách
   .char-avatar dùng font-size inline cho emoji. */
img.char-avatar-img {
    width: var(--avatar-px, 32px);
    height: var(--avatar-px, 32px);
    object-fit: cover;
    border-radius: 10px;
    vertical-align: middle;
}

/* Danh sách danh hiệu */
.title-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

.title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(160, 110, 255, 0.2);
    flex-wrap: wrap;
}

.title-row.locked { opacity: 0.45; }
.title-row .title-desc { font-size: 12px; color: #9d8ab8; }
.title-row .title-info { display: flex; flex-direction: column; gap: 4px; }

/* Bảng xếp hạng */
.rank-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(160, 110, 255, 0.15);
}

.rank-row .char-badge {
    min-width: 0;
    flex: 1 1 auto;
}

.rank-row .char-name-block {
    min-width: 0;
}

.rank-row .char-name {
    overflow-wrap: anywhere;
}

.rank-num {
    width: 28px;
    text-align: center;
    font-weight: 700;
    color: #cdb8ef;
    flex-shrink: 0;
}

.rank-realm { margin-left: auto; font-size: 12px; color: #9d8ab8; white-space: nowrap; }

@media (max-width: 640px) {
    .char-badge { gap: 8px; }
    .avatar-option { font-size: 22px; padding: 6px 0; }
    .rank-realm { width: 100%; margin-left: 0; text-align: left; }
}

/* ---------- Trang Nhân Vật: bảng bài (character HUD) ----------
   Bộ khung riêng cho index.php — mô phỏng bảng thông tin nhân vật trong
   game online thật: mề đay avatar phát hào quang theo cảnh giới, ô chỉ số
   dạng "thẻ bài", thanh tu vi có vạch chia từng Tầng, và nút bật tự động
   dạng "phù" (rune) thay vì nút bấm phẳng thông thường. */

.hero-panel { padding: 24px 20px; }

.hero-top {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Mề đay avatar: 2 vòng hào quang xoay chậm ngược chiều nhau quanh avatar,
   màu vòng đổi theo bậc cảnh giới (dùng chung biến --tier-color truyền từ
   PHP) — hiệu ứng "linh khí bao quanh thân" thay vì avatar phẳng trong ô
   vuông như giao diện cũ. */
.avatar-medallion {
    position: relative;
    width: 92px;
    height: 92px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-medallion .aura-ring {
    position: absolute;
    inset: 0;
    border: 1px solid var(--tier-color, var(--clr-qi));
    box-shadow: 0 0 16px 1px var(--tier-glow, rgba(168, 85, 247, 0.5));
    animation: aura-spin 12s linear infinite;
}
.avatar-medallion .aura-ring.outer {
    inset: -8px;
    border-style: dashed;
    opacity: 0.55;
    animation-direction: reverse;
    animation-duration: 18s;
}
@keyframes aura-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.avatar-medallion .char-avatar {
    position: relative;
    width: 68px;
    height: 68px;
    background: radial-gradient(circle, rgba(120,70,200,0.35), rgba(10,7,20,0.6));
    border: 2px solid var(--tier-color, var(--clr-qi));
    font-size: 34px !important;
}

.hero-identity {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.hero-identity .char-name { font-size: 22px; }
.hero-identity .realm-label { font-size: 13px; }

/* Thẻ chỉ số: mỗi thẻ có icon SVG nét mảnh, viền lõm góc trên-trái/dưới-phải
   giống khung mề đay, thay cho .stat-grid liệt kê dạng "nhãn: giá trị". */
.stat-plates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin: 20px 0;
}

.stat-plate {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(160, 110, 255, 0.2);
}
.stat-plate .stat-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--clr-gold-soft);
}
.stat-plate .stat-icon.jade { color: var(--clr-jade); }
.stat-plate .stat-text { display: flex; flex-direction: column; min-width: 0; }
.stat-plate .stat-label { font-size: 11px; color: var(--clr-ink-dim); letter-spacing: 0.3px; }
.stat-plate .stat-value { font-size: 16px; font-weight: 700; color: #fff; }

/* Thanh tu vi kiểu "gauge" trò chơi: có 10 vạch chia tương ứng 10 Tầng, dải
   sáng chạy nhẹ trên phần đã lấp đầy mô phỏng linh khí đang lưu chuyển. */
.exp-gauge { margin-top: 18px; }
.exp-gauge-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--clr-ink-dim);
    margin-bottom: 6px;
}
.exp-gauge-track {
    position: relative;
    height: 18px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(160,110,255,0.3);
    overflow: hidden;
}
.exp-gauge-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--clr-qi-deep), var(--clr-qi));
    position: relative;
    overflow: hidden;
}
.exp-gauge-fill.major { background: linear-gradient(90deg, #ea580c, var(--clr-gold-soft)); }
.exp-gauge-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
    background-size: 220% 100%;
    animation: qi-shimmer 3.2s ease-in-out infinite;
}
@keyframes qi-shimmer {
    0% { background-position: 120% 0; }
    100% { background-position: -20% 0; }
}
.exp-gauge-ticks {
    position: absolute;
    inset: 0;
    display: flex;
}
.exp-gauge-ticks span { flex: 1; border-right: 1px solid rgba(5,4,9,0.45); }
.exp-gauge-ticks span:last-child { border-right: none; }

/* Nút "phù" bật/tắt tự động: ô vuông có góc ấn triện, phát sáng vàng kim khi
   đang bật — thay cho .auto-box phẳng, gợi cảm giác kích hoạt trận pháp. */
.rune-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}
.rune-toggle {
    /* Bản thân nút <button> chính là "thẻ phù" — reset toàn bộ style mặc
       định của trình duyệt cho button rồi vẽ lại giống mọi khung khác. */
    appearance: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    position: relative;
    width: 100%;
    padding: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(160,110,255,0.2);
    text-align: center;
}
.rune-toggle .stat-icon {
    width: 30px;
    height: 30px;
    margin: 0 auto 8px;
    color: var(--clr-ink-dim);
}
.rune-toggle.on { border-color: rgba(212, 175, 55, 0.65); box-shadow: inset 0 0 20px rgba(212,175,55,0.12); }
.rune-toggle.on .stat-icon { color: var(--clr-gold-soft); filter: drop-shadow(0 0 5px rgba(212,175,55,0.7)); }
.rune-toggle .rune-label { font-size: 13px; margin-bottom: 10px; display: block; }
.rune-toggle .rune-status { font-size: 11px; color: var(--clr-ink-dim); }
.rune-toggle.on .rune-status { color: var(--clr-gold-soft); }

/* Sổ nhật ký: viền trên răng cưa mô phỏng mép giấy da xé, thay cho khung
   vuông vức như các card khác — chỉ dùng riêng cho bảng nhật ký sự kiện. */
.scroll-panel {
    padding-top: 26px;
}
.scroll-panel::before, .scroll-panel::after { display: none; }
.scroll-panel .scroll-edge {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 10px;
    background:
        linear-gradient(135deg, transparent 50%, rgba(30,20,50,0.65) 50%) 0 0/10px 10px repeat-x,
        linear-gradient(-135deg, transparent 50%, rgba(30,20,50,0.65) 50%) 0 0/10px 10px repeat-x;
    background-color: transparent;
}

@media (max-width: 640px) {
    .hero-top { justify-content: center; text-align: center; }
    .hero-identity { align-items: center; }
    .avatar-medallion { margin: 0 auto; }
}

/* ---------- Responsive: máy tính bảng / điện thoại ---------- */
@media (max-width: 640px) {
    .wrap { padding: 16px 12px 48px; }
    .site-title { font-size: 22px; letter-spacing: 2px; }
    .site-sub { font-size: 12px; margin-bottom: 16px; }
    .card { padding: 14px; }
    .card h2 { font-size: 16px; }
    .nav { gap: 6px; margin-bottom: 16px; }
    .nav a, .nav span { padding: 6px 10px; font-size: 13px; }

    .nav-menu > summary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        background: rgba(120, 70, 200, 0.25);
        border: 1px solid rgba(180, 130, 255, 0.4);
        padding: 8px 14px;
        font-size: 14px;
        margin-bottom: 10px;
    }
    .nav-menu:not([open]) .nav { display: none !important; }
    .nav-menu[open] .nav {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 16px;
    }
    .nav-menu .nav a, .nav-menu .nav span { text-align: center; }
    .stat-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 14px; }
    .actions { flex-direction: column; }
    .actions .btn, .actions a.btn { width: 100%; }
}

/* Bảng dạng "xếp chồng": mỗi hàng trở thành 1 khối co giãn theo chiều rộng
   màn hình, không còn cần kéo ngang để xem hết bảng (trước đây bảng rộng
   giữ nguyên cột + overflow-x:auto trong .card, buộc phải kéo qua kéo lại).
   Ô đầu (.td-title) đóng vai trò tiêu đề dòng, các ô có [data-th] hiện nhãn
   cột phía trước giá trị, ô cuối (.td-actions) chứa nút bấm. Dùng chung một
   breakpoint 900px cho cả tablet lẫn di động thay vì lặp lại 2 khối media
   query giống hệt nhau (đã gộp lại để giảm trùng lặp CSS). */
@media (max-width: 900px) {
    table { border: none; }
    table tr:first-child { display: none; }
    table, table tr, table td { display: block; width: 100%; }
    table tr {
        margin-bottom: 12px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(160, 110, 255, 0.25);
    }
    table tr:last-child { margin-bottom: 0; border-bottom: none; }
    table td {
        border-bottom: none;
        white-space: normal;
        word-break: break-word;
        font-size: 13px;
        padding: 4px 5px;
    }
    table td.td-title {
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        padding-bottom: 6px;
    }
    table td[data-th] {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
    }
    table td[data-th]::before {
        content: attr(data-th);
        flex-shrink: 0;
        color: var(--clr-ink-dim);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.3px;
        padding-top: 2px;
    }
    table td.td-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 8px;
    }
    table td.td-actions form,
    table td.td-actions .btn,
    table td.td-actions a.btn { flex: 1 1 auto; }
    table td.td-actions form .btn { width: 100%; }
}

@media (max-width: 400px) {
    .site-title { font-size: 19px; }
    .stat-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Trang quản trị (admin) ----------
   Trước đây khối này được nhúng trực tiếp bằng thẻ <style> lặp lại ở MỌI
   trang admin (tải lại từ đầu, không cache được vì nằm trong HTML). Gộp vào
   đây để trình duyệt chỉ tải + cache style.css một lần cho toàn bộ khu vực
   quản trị, các lần chuyển trang sau đó không tốn thêm băng thông cho CSS. */
.admin-wrap { max-width: 1000px; }
table.admin th, table.admin td { padding: 8px; }
/* .badge / .badge.role-* dùng chung với định nghĩa gốc phía trên, không lặp lại ở đây */
.admin-wrap input, .admin-wrap select, .admin-wrap textarea { font-family: inherit; }
.inline-form { display: inline; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 20px; }
.admin-input-sm { width: 100%; max-width: 140px; padding: 6px; border: 1px solid rgba(180,130,255,0.35); background: rgba(255,255,255,0.05); color: #fff; font-size: 15px; }
.search-input { padding: 8px; border: 1px solid rgba(180,130,255,0.35); background: rgba(255,255,255,0.05); color: #fff; width: 100%; max-width: 260px; font-size: 16px; }

@media (max-width: 640px) {
    .grid-2 { grid-template-columns: 1fr; }
    table.admin th, table.admin td { padding: 6px; font-size: 13px; }
    .inline-form { display: block; margin-top: 6px; }
}

/* ---------- Utility classes ----------
   Thay cho các thuộc tính style="..." lặp lại rải rác nhiều nơi trong HTML —
   gom về đây để trình duyệt cache 1 lần trong style.css, HTML gọn hơn, và
   sửa màu/khoảng cách chỉ cần đổi ở một chỗ duy nhất. */
.text-muted { color: #9d8ab8; }
.text-subtle { color: #cdb8ef; }
.text-danger { color: #fca5a5; }
.text-success { color: #86efac; }
.text-dim { color: #6b5a85; font-size: 13px; }
.text-center { text-align: center; }
.cursor-default { cursor: default; }
.w-full { width: 100%; }
.mt-6 { margin-top: 6px; }
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mb-10 { margin-bottom: 10px; }
.mb-14 { margin-bottom: 14px; }
.span-full { grid-column: 1 / -1; }
.stack-full { flex-direction: column; align-items: stretch; }