@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&display=swap');

/* ========================================================= */
/* TẤT CẢ THANH CUỘN TRONG GAME ĐỀU ĐỂ ẨN (HIDE ALL SCROLLBARS) */
/* Vẫn cuộn chuột mượt mà, cảm ứng trơn tru, ẩn 100% thanh cuộn */
/* ========================================================= */
*,
*::before,
*::after,
html,
body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Ẩn thanh cuộn ở khung game chính và toàn màn hình */
html,
body,
#game-container,
#gameCanvas {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#game-container::-webkit-scrollbar,
#gameCanvas::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* THANH CUỘN KIẾM HIỆP TINH TẾ & MƯỢT MÀ CHO MỌI MODAL & TAB NỘI DUNG DÀI */
* {
    scrollbar-width: thin;
    scrollbar-color: #b45309 rgba(15, 23, 42, 0.7);
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background: rgba(15, 23, 42, 0.7);
}

::-webkit-scrollbar-track {
    background: rgba(10, 15, 25, 0.8);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #b45309, #d97706);
    border-radius: 3px;
    border: 1px solid #f59e0b;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d97706, #f59e0b);
}

body {
    background-color: #0c0a09;
    background-image: radial-gradient(circle at center, #1c1917 0%, #030712 100%);
    color: #f8fafc;
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    touch-action: manipulation;
}

/* GAME CONTAINER */
#game-container {
    position: relative;
    width: 960px;
    height: 540px;
    max-width: 100vw;
    max-height: 100vh;
    background-color: #000;
    overflow: hidden;
    touch-action: none;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.9);
}

#gameCanvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: auto;
    text-rendering: optimizeLegibility;
    touch-action: none;
}

/* TOP-LEFT HUD WITH AUTHENTIC HEAD_BIG BANNER */
#hud-top-left {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    z-index: 10;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
    touch-action: none;
}

#hud-head-banner {
    position: relative;
    width: 216px;
    height: 76px;
    min-height: 76px;
    transition: height 0.15s ease;
}

#hud-head-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 216px;
    height: 80px;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 2;
}

#hud-avatar-clip {
    position: absolute;
    top: 14px;
    left: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #2d1808 0%, #0f172a 100%);
    border: 2px solid #b45309;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.85), 0 0 6px rgba(245, 158, 11, 0.45);
    z-index: 3;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#hud-avatar-clip:hover {
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.8), inset 0 0 6px rgba(245, 158, 11, 0.4);
    transform: scale(1.05);
}

#hud-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
    border-radius: 50%;
    margin: 0;
    pointer-events: none;
}

#hud-level-badge {
    position: absolute;
    top: 8px;
    left: 44px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 900;
    color: #fde047;
    text-shadow: 0 1px 3px #000, 0 0 4px #b45309;
    z-index: 4;
}

#hud-hp-slot {
    position: absolute;
    top: 16px;
    left: 72px;
    width: 136px;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    z-index: 3;
    background: #00242c;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}

#bar-hp {
    height: 100%;
    width: 100%;
    background: url('assets/ui/hp.png') repeat-x left center;
    background-size: auto 100%;
    image-rendering: pixelated;
    transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#hud-mp-slot {
    position: absolute;
    top: 32px;
    left: 72px;
    width: 136px;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    z-index: 3;
    background: #00242c;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}

#bar-mp {
    height: 100%;
    width: 100%;
    background: url('assets/ui/mp.png') repeat-x left center;
    background-size: auto 100%;
    image-rendering: pixelated;
    transition: width 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bar-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 2px #000, 0 0 2px #000;
    pointer-events: none;
    white-space: nowrap;
    font-family: 'Be Vietnam Pro', sans-serif;
    z-index: 4;
}

#hud-ep-slot {
    position: absolute;
    top: 42px;
    left: 72px;
    width: 136px;
    height: 4px;
    overflow: hidden;
    z-index: 3;
    background: #00242c;
}

#bar-ep {
    height: 100%;
    width: 100%;
    background: url('assets/ui/exp.png') repeat-x left center;
    background-size: auto 100%;
    image-rendering: pixelated;
    transition: width 0.15s ease;
}

/* ========================================================= */
/* AUTHENTIC PET & TEAM HUD (DIRECTLY UNDER HERO BANNER)     */
/* ========================================================= */
#hud-pet-team-container {
    margin-top: 3px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 180px;
    pointer-events: auto;
}

/* PET / THÚ CƯNG SLOT */
#hud-pet-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    background: rgba(22, 12, 6, 0.90);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 3px 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

#hud-pet-slot:hover {
    border-color: #f59e0b;
    background: rgba(35, 18, 10, 0.95);
}

.hud-pet-avatar {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: radial-gradient(circle, #251206 0%, #0d0603 100%);
    border: 1.5px solid #b45309;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.8), 0 1px 3px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.hud-pet-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6));
}

.hud-pet-level {
    position: absolute;
    bottom: 0;
    right: 1px;
    font-size: 8px;
    font-weight: 800;
    color: #fef08a;
    text-shadow: 0 1px 2px #000;
    line-height: 1;
}

.hud-pet-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hud-pet-name {
    font-size: 10px;
    font-weight: 700;
    color: #fde047;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hud-pet-badge {
    font-size: 8px;
    font-weight: 600;
    color: #4ade80;
    background: rgba(22, 101, 52, 0.6);
    border: 0.5px solid #22c55e;
    border-radius: 2px;
    padding: 0 3px;
    line-height: 1.1;
}

.hud-pet-bar-wrap {
    width: 100%;
    height: 5px;
    background: #1e293b;
    border-radius: 2px;
    overflow: hidden;
    border: 0.5px solid #0f172a;
}

.hud-pet-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #22c55e);
    border-radius: 2px;
    transition: width 0.2s ease;
}

/* ========================================================= */
/* UNIFIED SIDE PANEL (NHIỆM VỤ & TỔ ĐỘI TABS)               */
/* ========================================================= */
#hud-side-panel {
    width: 100%;
    box-sizing: border-box;
    background: rgba(22, 12, 6, 0.92);
    border: 1px solid #78350f;
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.75);
    overflow: hidden;
    pointer-events: auto;
    transition: border-color 0.15s ease;
}

#hud-side-panel:hover {
    border-color: #f59e0b;
}

#hud-side-panel.collapsed {
    border-color: #78350f;
}

#hud-side-panel.collapsed .hud-side-panel-body {
    display: none !important;
}

.hud-side-tabs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(180deg, #3d1704, #210c03);
    border-bottom: 1px solid #78350f;
    padding: 2px 4px;
    gap: 2px;
    user-select: none;
}

.hud-side-tabs-group {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.hud-side-tab {
    flex: 1;
    min-width: 0;
    background: rgba(41, 18, 5, 0.65);
    border: 1px solid rgba(120, 53, 15, 0.5);
    border-radius: 3px;
    padding: 2.5px 3px;
    color: #a8a29e;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    transition: all 0.15s ease;
    user-select: none;
    line-height: 1.2;
}

.hud-side-tab:hover {
    color: #fef08a;
    background: rgba(120, 53, 15, 0.4);
    border-color: #d97706;
}

.hud-side-tab.active {
    background: linear-gradient(180deg, #92400e, #78350f);
    color: #fef08a;
    border-color: #f59e0b;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    font-weight: 800;
}

.hud-side-tab.has-update::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ef4444;
    margin-left: 3px;
    vertical-align: middle;
    box-shadow: 0 0 4px #ef4444;
}

.hud-side-header-actions {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}

.hud-side-panel-body {
    width: 100%;
    box-sizing: border-box;
}

/* TỔ ĐỘI / TEAM MEMBER LIST (EMBEDDED IN SIDE PANEL) */
#hud-team-slot {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 4px 6px;
    box-shadow: none;
    box-sizing: border-box;
    width: 100%;
    max-height: 140px;
    overflow-y: auto;
}

.hud-team-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 2px;
    margin-bottom: 3px;
    border-bottom: 0.5px solid rgba(120, 53, 15, 0.6);
}

.hud-team-title {
    font-size: 9.5px;
    font-weight: 800;
    color: #cbd5e1;
    letter-spacing: 0.3px;
}

.hud-team-members {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.hud-team-member {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 1px 2px;
    border-radius: 3px;
    transition: background 0.12s;
}

.hud-team-member:hover {
    background: rgba(120, 53, 15, 0.35);
}

.hud-team-leader-icon {
    width: 8px;
    height: 10px;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.hud-team-member-avatar {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 0.5px solid #d97706;
    background: #0f172a;
    object-fit: cover;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.hud-team-member-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.hud-team-member-name {
    font-size: 9px;
    font-weight: 700;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hud-team-hp-bar {
    width: 100%;
    height: 4px;
    background: #1e293b;
    border-radius: 2px;
    overflow: hidden;
    border: 0.5px solid #0f172a;
}

.hud-team-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #f87171);
    border-radius: 2px;
}

#hud-stats-under {
    margin-top: 2px;
    margin-left: 10px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 3px 8px;
    width: fit-content;
}

#hud-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

#hud-name {
    font-size: 11px;
    color: #fef08a;
    text-shadow: 0 1px 2px #000;
}

#hud-sect {
    font-size: 10px;
    color: #38bdf8;
}

.currency-row {
    font-size: 10px;
    color: #facc15;
    margin-top: 2px;
    display: flex;
    gap: 8px;
    text-shadow: 0 1px 2px #000;
}

/* TOP-CENTER TARGET HUD (AUTHENTIC GUAI.PNG BANNER) */
#hud-target {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
    touch-action: none;
    user-select: none;
}

#hud-target-banner {
    position: relative;
    width: 216px;
    height: 70px;
}

#hud-target-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 216px;
    height: 70px;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 1;
}

#target-name {
    position: absolute;
    top: 13px;
    left: 10px;
    width: 140px;
    height: 14px;
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 800;
    color: #fef08a;
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 3;
    pointer-events: none;
}

#target-hp-slot {
    position: absolute;
    top: 30px;
    left: 6px;
    width: 144px;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    z-index: 3;
    background: rgba(22, 6, 12, 0.95);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9);
    border: 0.5px solid rgba(136, 19, 55, 0.5);
}

#target-bar-hp-trail {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #f59e0b;
    border-radius: 4px;
    transition: width 0.4s ease-out;
}

#target-bar-hp {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(180deg, #f87171 0%, #ef4444 50%, #b91c1c 100%);
    box-shadow: 0 0 4px rgba(239, 68, 68, 0.6);
    border-radius: 4px;
    transition: width 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#target-text-hp {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 7px;
    font-weight: 800;
    color: #ffffff;
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
    pointer-events: none;
    white-space: nowrap;
    font-family: 'Be Vietnam Pro', sans-serif;
    z-index: 4;
    line-height: 1;
}

#target-icon-slot {
    position: absolute;
    top: 14px;
    left: 161px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1c1917;
}

#target-icon-img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    object-position: top center;
    image-rendering: pixelated;
}

/* ========================================================= */
/* HUD BUFF & DEBUFF SYSTEM (BẢN THÂN, ĐỊCH & LINH THÚ)     */
/* ========================================================= */
.hud-effects-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    max-width: 220px;
    pointer-events: auto;
    user-select: none;
    z-index: 12;
}

#hud-player-effects {
    position: absolute;
    top: 48px;
    left: 70px;
    max-width: 145px;
    margin: 0;
    padding: 0;
    z-index: 12;
}

.hud-target-effects-row {
    position: absolute;
    top: 42px;
    left: 6px;
    max-width: 146px;
    justify-content: flex-start;
    z-index: 12;
}

/* THANH KỸ NĂNG ĐANG XUẤT CỦA MỤC TIÊU / BOSS */
#target-cast-bar {
    position: relative;
    width: 216px;
    margin-top: 2px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid #f59e0b;
    border-radius: 4px;
    padding: 3px 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.8), 0 0 8px rgba(245, 158, 11, 0.4);
    box-sizing: border-box;
    z-index: 15;
    animation: targetCastPulse 1.2s infinite alternate ease-in-out;
}

@keyframes targetCastPulse {
    0% { border-color: #f59e0b; box-shadow: 0 0 5px rgba(245, 158, 11, 0.4); }
    100% { border-color: #fbbf24; box-shadow: 0 0 12px rgba(251, 191, 36, 0.7); }
}

.target-cast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 2px;
}

.target-cast-icon {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid #fbbf24;
    object-fit: cover;
    background: #000;
    flex-shrink: 0;
}

.target-cast-text {
    flex: 1;
    font-size: 8.5px;
    font-weight: 800;
    color: #fef08a;
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.target-cast-time {
    font-size: 7.5px;
    font-weight: 700;
    color: #cbd5e1;
    text-shadow: 0 1px 2px #000;
    flex-shrink: 0;
}

.target-cast-track {
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 2.5px;
    overflow: hidden;
    border: 0.5px solid rgba(245, 158, 11, 0.5);
}

.target-cast-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #eab308, #f59e0b, #ef4444);
    box-shadow: 0 0 6px #f59e0b;
    border-radius: 2.5px;
    transition: width 0.08s linear;
}

#target-hp-slot.is-casting {
    box-shadow: 0 0 8px #f59e0b, inset 0 0 4px #fbbf24;
    border-color: #f59e0b;
}

.hud-effect-badge {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
}

.hud-effect-badge:hover, .hud-effect-badge:active {
    transform: scale(1.18);
    z-index: 20;
}

.hud-effect-badge.buff {
    border: 1px solid #10b981;
    box-shadow: 0 0 5px rgba(16, 185, 129, 0.6), inset 0 0 3px rgba(16, 185, 129, 0.3);
}

.hud-effect-badge.buff-gold {
    border: 1px solid #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.7), inset 0 0 3px rgba(245, 158, 11, 0.35);
    animation: effectPulseGold 2s infinite alternate ease-in-out;
}

.hud-effect-badge.buff-shield {
    border: 1px solid #38bdf8;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.7), inset 0 0 3px rgba(56, 189, 248, 0.35);
}

.hud-effect-badge.debuff {
    border: 1px solid #ef4444;
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.7), inset 0 0 3px rgba(239, 68, 68, 0.3);
}

.hud-effect-badge.debuff-ice {
    border: 1px solid #06b6d4;
    box-shadow: 0 0 6px rgba(6, 182, 212, 0.7), inset 0 0 3px rgba(6, 182, 212, 0.35);
}

.hud-effect-badge.debuff-stun {
    border: 1px solid #eab308;
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.8), inset 0 0 3px rgba(234, 179, 8, 0.35);
    animation: effectShake 0.6s infinite ease-in-out;
}

.hud-effect-badge .effect-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: pixelated;
    border-radius: 2px;
}

.hud-effect-badge .effect-timer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8.5px;
    line-height: 8.5px;
    font-size: 7px;
    font-weight: 900;
    text-align: center;
    background: rgba(0, 0, 0, 0.82);
    color: #fef08a;
    text-shadow: 0 1px 1px #000;
    font-family: 'Be Vietnam Pro', sans-serif;
    pointer-events: none;
    border-top: 0.5px solid rgba(254, 240, 138, 0.3);
}

.hud-effect-badge .effect-stack {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 7px;
    font-weight: 900;
    background: #b45309;
    color: #ffffff;
    border-radius: 0 0 0 2px;
    padding: 0 2px;
    line-height: 8px;
    border-left: 0.5px solid #f59e0b;
    border-bottom: 0.5px solid #f59e0b;
}

/* THANH HIỆU ỨNG LINH THÚ (PET MINI EFFECTS) */
.hud-pet-effects-mini {
    display: flex;
    gap: 3px;
    align-items: center;
    margin-top: 2px;
    min-height: 16px;
}

.hud-pet-effect-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(15, 23, 42, 0.88);
    border: 1px solid #38bdf8;
    border-radius: 3px;
    padding: 1px 4px 1px 2px;
    font-size: 8px;
    font-weight: 700;
    color: #7dd3fc;
    cursor: pointer;
    box-shadow: 0 0 4px rgba(56, 189, 248, 0.3);
    white-space: nowrap;
    transition: transform 0.1s;
}

.hud-pet-effect-pill:hover {
    transform: scale(1.08);
    border-color: #facc15;
    color: #fef08a;
}

.hud-pet-effect-pill .pet-pill-img {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
}

.hud-pet-effect-pill .pet-pill-text {
    line-height: 1;
}

/* KHUNG TOOLTIP THÔNG SỐ HIỆU ỨNG CHI TIẾT */
.hud-effect-tooltip {
    position: absolute;
    z-index: 1000;
    background: linear-gradient(135deg, rgba(24, 15, 10, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    border: 1.5px solid #d97706;
    border-radius: 6px;
    padding: 8px 10px;
    min-width: 170px;
    max-width: 230px;
    font-family: 'Be Vietnam Pro', sans-serif;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.9), 0 0 12px rgba(217, 119, 6, 0.4);
    pointer-events: none;
    color: #f8fafc;
    font-size: 11px;
    animation: fadeInTooltip 0.15s ease-out;
}

.hud-effect-tooltip .het-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-bottom: 4px;
    border-bottom: 0.5px solid rgba(217, 119, 6, 0.4);
    padding-bottom: 4px;
}

.hud-effect-tooltip .het-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #fde047;
    display: flex;
    align-items: center;
    gap: 4px;
}

.hud-effect-tooltip .het-icon-img {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    object-fit: cover;
    display: inline-block;
    border: 0.5px solid #f59e0b;
}

.hud-effect-tooltip .het-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
}

.hud-effect-tooltip .het-badge.buff {
    background: #065f46;
    color: #6ee7b7;
    border: 0.5px solid #10b981;
}

.hud-effect-tooltip .het-badge.debuff {
    background: #7f1d1d;
    color: #fca5a5;
    border: 0.5px solid #ef4444;
}

.hud-effect-tooltip .het-time {
    font-size: 9.5px;
    color: #fbbf24;
    margin-bottom: 4px;
    font-weight: 700;
}

.hud-effect-tooltip .het-desc {
    font-size: 10px;
    color: #e2e8f0;
    line-height: 1.35;
}

.hud-effect-tooltip .het-pk {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 0.5px dashed rgba(255, 255, 255, 0.15);
    font-size: 9.5px;
    color: #38bdf8;
    font-weight: 600;
}

@keyframes effectPulseGold {
    0% { box-shadow: 0 0 4px rgba(245, 158, 11, 0.4); }
    100% { box-shadow: 0 0 9px rgba(245, 158, 11, 0.85); }
}

@keyframes effectShake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 1px); }
    75% { transform: translate(1px, -1px); }
}

@keyframes fadeInTooltip {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* WORLD BOSS HEALTH BAR (TOP CENTER OVERLAY) */
#hud-world-boss {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 15;
    touch-action: none;
    pointer-events: none;
}

.world-boss-container {
    width: 320px;
    background: linear-gradient(180deg, rgba(24, 15, 10, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
    border: 2px solid #b45309;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.5), inset 0 0 8px rgba(245, 158, 11, 0.3);
    border-radius: 6px;
    padding: 4px 10px 6px 10px;
    text-align: center;
}

.world-boss-crown {
    font-size: 10px;
    font-weight: 800;
    color: #facc15;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px #000;
}

.world-boss-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: bold;
    color: #fca5a5;
    margin: 2px 0;
    text-shadow: 0 1px 2px #000;
}

.world-boss-hp-track {
    width: 100%;
    height: 9px;
    background: #1e1b18;
    border: 1px solid #78350f;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.world-boss-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #b91c1c 0%, #ef4444 60%, #fca5a5 100%);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.8);
    transition: width 0.15s ease-out;
}

/* WORLD EVENT BANNER NOTIFICATION */
#world-event-banner {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    background: linear-gradient(90deg, rgba(180, 83, 9, 0.9) 0%, rgba(220, 38, 38, 0.9) 50%, rgba(180, 83, 9, 0.9) 100%);
    border: 1px solid #fef08a;
    border-radius: 20px;
    padding: 4px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,0,0,0.7), 0 0 10px rgba(250, 204, 21, 0.5);
    animation: bannerPulse 2s infinite ease-in-out;
    pointer-events: none;
}

@keyframes bannerPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.04); }
}

/* ================================================================ */
/* DẢI THÔNG BÁO THẾ GIỚI CHẠY NGANG GÓC TRÊN MÀN HÌNH (TOP MARQUEE) */
/* ================================================================ */
.top-marquee-container {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: min(90vw, 580px);
    height: 26px;
    z-index: 60;
    pointer-events: none;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(20, 8, 4, 0.95) 0%, rgba(45, 18, 6, 0.92) 50%, rgba(20, 8, 4, 0.95) 100%);
    border: 1px solid rgba(245, 158, 11, 0.75);
    border-radius: 13px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.85), inset 0 0 10px rgba(245, 158, 11, 0.25);
    padding: 2px 8px;
    box-sizing: border-box;
    overflow: hidden;
    backdrop-filter: blur(4px);
    transition: opacity 0.3s ease;
}

.top-marquee-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    text-shadow: 0 1px 2px #000;
    border: 1px solid;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Badge variants for 3 notification types */
.top-marquee-badge.badge-top {
    background: linear-gradient(135deg, #78350f 0%, #b45309 100%);
    border-color: #f59e0b;
    color: #fef08a;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.top-marquee-badge.badge-boss-spawn {
    background: linear-gradient(135deg, #7f1d1d 0%, #dc2626 100%);
    border-color: #f87171;
    color: #fee2e2;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
    animation: bossBadgePulse 1.2s infinite ease-in-out;
}

.top-marquee-badge.badge-boss-kill {
    background: linear-gradient(135deg, #064e3b 0%, #059669 100%);
    border-color: #34d399;
    color: #a7f3d0;
    box-shadow: 0 0 8px rgba(52, 211, 153, 0.7);
}

.top-marquee-badge.badge-general {
    background: linear-gradient(135deg, #0c4a6e 0%, #0284c7 100%);
    border-color: #38bdf8;
    color: #e0f2fe;
}

@keyframes bossBadgePulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.06); filter: brightness(1.25); }
}

.top-marquee-track {
    flex: 1;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    mask-image: linear-gradient(90deg, transparent 0%, black 2%, black 98%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 2%, black 98%, transparent 100%);
}

.top-marquee-content {
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    left: 0;
    will-change: transform;
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px #000, 0 0 4px rgba(0, 0, 0, 0.9);
}

.top-marquee-decor-right {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 6px #f59e0b;
    flex-shrink: 0;
    margin-right: 2px;
}

/* Khi có mục tiêu khóa (hud-target không ẩn), đẩy marquee xuống dưới thanh mục tiêu */
#hud-target:not([style*="display: none"]):not([style*="display:none"]) ~ #top-marquee-container {
    top: 108px;
}

/* Responsive adjustment for small mobile screens & landscape devices */
@media (max-width: 600px), (max-height: 500px) {
    .top-marquee-container {
        top: 10px;
        width: min(94vw, 460px);
        height: 24px;
    }
    #hud-target:not([style*="display: none"]):not([style*="display:none"]) ~ #top-marquee-container {
        top: 102px;
    }
    .top-marquee-badge {
        font-size: 8.5px;
        padding: 1px 5px;
    }
    .top-marquee-content {
        font-size: 10px;
    }
}

/* TOP-RIGHT MINIMAP WITH AUTHENTIC SMAPFRAME & TOP MENU BUTTON */
#hud-top-right {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 25;
    pointer-events: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

.hud-top-menu-btn {
    width: 44px;
    height: 44px;
    margin-top: 4px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 35%, #451a03 0%, #1e1108 75%, #0f0804 100%);
    border: 2px solid #b45309;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3), 0 3px 8px rgba(0, 0, 0, 0.85);
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.hud-top-menu-btn:hover {
    border-color: #f59e0b;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4), 0 0 10px rgba(245, 158, 11, 0.6);
}

.hud-top-menu-btn:active {
    transform: scale(0.92);
}

.hud-top-menu-icon {
    font-size: 17px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px #000);
}

.hud-top-menu-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 8px;
    font-weight: 900;
    color: #fde047;
    letter-spacing: 0.5px;
    margin-top: 2px;
    line-height: 1;
    text-shadow: 0 1px 2px #000;
}

.hud-top-bxh-btn {
    background: radial-gradient(circle at 35% 35%, #78350f 0%, #3a1705 75%, #180902 100%) !important;
    border: 2px solid #eab308 !important;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.35), 0 0 10px rgba(234, 179, 8, 0.45) !important;
}

.hud-top-bxh-btn:hover {
    border-color: #fde047 !important;
    box-shadow: inset 0 1px 4px rgba(255, 255, 255, 0.5), 0 0 14px rgba(250, 204, 21, 0.8) !important;
}

.hud-top-bxh-btn .hud-top-menu-label {
    color: #facc15 !important;
    font-weight: 900;
}

#minimap-wrapper {
    position: relative;
    width: 73px;
    height: 77px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

#minimap {
    width: 63px;
    height: 67px;
    background: #0f172a;
    border-radius: 6px;
    display: block;
}

#minimap-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    z-index: 3;
    image-rendering: pixelated;
}

.minimap-info-stack {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 10;
    pointer-events: none;
    width: max-content;
}

#minimap-label {
    position: static !important;
    transform: none !important;
    font-size: 8.5px;
    font-weight: 800;
    color: #fde047;
    white-space: nowrap;
    text-shadow: 0 1px 3px #000;
    background: rgba(15, 10, 6, 0.9);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid #78350f;
    line-height: 1.2;
}

#minimap-pk-badge {
    position: static !important;
    transform: none !important;
    font-size: 7.5px;
    font-weight: 800;
    white-space: nowrap;
    padding: 1px 5px;
    border-radius: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    text-shadow: 0 1px 2px #000;
    line-height: 1.2;
    transition: all 0.25s ease;
    letter-spacing: 0.3px;
}

#minimap-pk-badge.pk-badge-peace {
    color: #6ee7b7;
    background: rgba(6, 78, 59, 0.9);
    border: 1px solid #10b981;
}

#minimap-pk-badge.pk-badge-free {
    color: #fca5a5;
    background: rgba(127, 29, 29, 0.9);
    border: 1px solid #ef4444;
    animation: pkBadgePulseAnim 1.6s infinite ease-in-out;
}

@keyframes pkBadgePulseAnim {
    0%, 100% {
        box-shadow: 0 0 3px rgba(239, 68, 68, 0.6);
        border-color: #ef4444;
    }
    50% {
        box-shadow: 0 0 10px rgba(239, 68, 68, 1), 0 0 18px rgba(220, 38, 38, 0.6);
        border-color: #fca5a5;
    }
}

/* AUTHENTIC TOP QUICK MENU (Defaults.quickMenu: Chat, LeftMenu, RightMenu, Recharge) */
#hud-top-quickmenu {
    display: none !important;
}

.top-menu-btn {
    position: relative;
    width: 48px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.08s ease, filter 0.15s ease;
}

.top-menu-btn:hover {
    filter: brightness(1.2);
}

.top-menu-btn:active {
    transform: scale(0.92);
}

.top-menu-btn .menu-btn-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    image-rendering: pixelated;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}

.top-menu-btn .menu-btn-icon {
    position: relative;
    z-index: 2;
    image-rendering: pixelated;
    max-width: 26px;
    max-height: 14px;
    object-fit: contain;
}

/* TOP-RIGHT SUB-ICONS (STAR REWARD & EMAIL MAILBOX) */
#hud-top-subicons {
    position: absolute;
    top: 86px;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 18;
    user-select: none;
}

.sub-icon-btn {
    position: relative;
    width: 38px;
    height: 38px;
    background: radial-gradient(circle, rgba(120, 53, 15, 0.85) 0%, rgba(28, 18, 12, 0.95) 100%);
    border: 1px solid #d97706;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.7);
    transition: transform 0.08s ease, filter 0.15s ease;
}

.sub-icon-btn:hover {
    filter: brightness(1.25);
    transform: scale(1.06);
}

.sub-icon-btn:active {
    transform: scale(0.92);
}

.sub-icon-img {
    width: 28px;
    height: 24px;
    object-fit: contain;
    image-rendering: pixelated;
}

.sub-icon-mail {
    width: 26px;
    height: 9px;
    object-fit: contain;
    image-rendering: pixelated;
}

.sub-icon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc2626;
    color: #fef08a;
    font-size: 8px;
    font-weight: 900;
    padding: 1px 4px;
    border-radius: 6px;
    border: 1px solid #fef08a;
    box-shadow: 0 1px 3px #000;
    animation: pulseBadge 1.2s infinite ease-in-out;
}

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

/* AUTHENTIC J2ME CAST BAR (CENTERED DIRECTLY ABOVE MINI-CHAT HUD, UNDER CHAT MODAL) */
.hud-cast-bar {
    position: absolute;
    bottom: 98px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    z-index: 16;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.9));
}

.hud-cast-header {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 8, 4, 0.92);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 2px 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.hud-cast-yin {
    width: 14px;
    height: 14px;
    image-rendering: pixelated;
    animation: castYinSpin 2s linear infinite;
}

@keyframes castYinSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.hud-cast-title {
    font-size: 11px;
    font-weight: bold;
    color: #facc15;
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
}

.hud-cast-timer {
    font-size: 10px;
    font-weight: 600;
    color: #38bdf8;
    text-shadow: 0 1px 2px #000;
}

.hud-cast-bar-frame {
    display: flex;
    align-items: center;
    position: relative;
    height: 14px;
}

.hud-cast-corner-left {
    width: 14px;
    height: 14px;
    image-rendering: pixelated;
    margin-right: -4px;
    z-index: 2;
}

.hud-cast-corner-right {
    width: 14px;
    height: 14px;
    image-rendering: pixelated;
    margin-left: -4px;
    z-index: 2;
}

.hud-cast-track {
    position: relative;
    width: 160px;
    height: 10px;
    background: #180d07;
    border-top: 1px solid #78350f;
    border-bottom: 1px solid #78350f;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hud-cast-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    opacity: 0.6;
}

.hud-cast-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #d97706, #facc15, #fef08a);
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.8);
    transition: width 0.05s linear;
    overflow: hidden;
}

.hud-cast-balls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/ui/loadingball.png') repeat-x left center;
    image-rendering: pixelated;
    opacity: 0.9;
}

/* AUTHENTIC BOTTOM-CENTER MINI-CHAT (CROSSCHAT - DIRECTLY ABOVE HOTKEY BAR) */
#hud-bottom-left {
    position: absolute;
    bottom: 56px;
    left: 50%;
    transform: translateX(-50%);
    width: 330px;
    max-width: calc(100vw - 32px);
    height: 38px;
    background: rgba(18, 12, 8, 0.90);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.75);
    z-index: 15;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

#hud-bottom-left:hover {
    background: rgba(28, 18, 12, 0.95);
    border-color: #d97706;
}

.mini-chat-btn {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #451a03;
    border: 1px solid #92400e;
    border-radius: 3px;
    flex-shrink: 0;
}

.mini-chat-icon {
    width: 20px;
    height: 10px;
    image-rendering: pixelated;
}

.mini-chat-ticker {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mini-chat-msg {
    font-size: 9.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #e2e8f0;
    text-shadow: 0 1px 2px #000;
}

.ch-sys { color: #f87171; font-weight: bold; }
.ch-world { color: #fbbf24; font-weight: bold; }
.ch-sect { color: #38bdf8; font-weight: bold; }
.ch-clan { color: #34d399; font-weight: bold; }

/* AUTHENTIC LOTUS VIRTUAL D-PAD */
#virtual-dpad {
    position: absolute;
    bottom: 12px;
    left: 15px;
    width: 124px;
    height: 124px;
    background: url('assets/softkey/key_all.png') no-repeat center / contain;
    image-rendering: pixelated;
    z-index: 20;
    touch-action: none;
    user-select: none;
}

#dpad-glow {
    position: absolute;
    width: 52px;
    height: 50px;
    background: url('assets/softkey/key_s.png') no-repeat center / contain;
    image-rendering: pixelated;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.08s ease;
    z-index: 5;
}

.dpad-zone {
    position: absolute;
    cursor: pointer;
    z-index: 6;
}

#dpad-up {
    top: 0;
    left: 37px;
    width: 50px;
    height: 40px;
}

#dpad-down {
    bottom: 0;
    left: 37px;
    width: 50px;
    height: 40px;
}

#dpad-left {
    top: 37px;
    left: 0;
    width: 40px;
    height: 50px;
}

#dpad-right {
    top: 37px;
    right: 0;
    width: 40px;
    height: 50px;
}

#dpad-ok {
    top: 40px;
    left: 40px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

/* AUTHENTIC QUICK-ACTION SKILLS BAR (BOTTOM-CENTER: CANVAS_WW - 125, CANVAS_H - 53) */
#quick-skills-bar {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 20;
    user-select: none;
    touch-action: none;
}

.skill-slot {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: transform 0.08s ease;
}

.skill-slot:active {
    transform: scale(0.92);
}

@keyframes skillPageFlip {
    0% { transform: scale(0.88); filter: brightness(1.75); }
    50% { transform: scale(1.08); filter: brightness(1.25); }
    100% { transform: scale(1.0); filter: brightness(1.0); }
}

.skill-slot.skill-page-flip {
    animation: skillPageFlip 0.22s ease-out;
}

.skill-box-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    image-rendering: pixelated;
    pointer-events: none;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
}

.skill-tab-dec {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 6px;
    background: url('assets/ui/quickbardec.png') no-repeat center / contain;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 3;
}

.skill-icon {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}

.skill-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 2px;
}

.skill-num {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 10px;
    font-weight: 900;
    color: #fef08a;
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
    font-family: monospace;
    z-index: 10;
    pointer-events: none;
}

.skill-change-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    image-rendering: pixelated;
    z-index: 2;
    pointer-events: none;
}

.skill-cd-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: rgba(0, 0, 0, 0.75);
    color: #f87171;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
    z-index: 5;
    border-radius: 50%;
    pointer-events: none;
}

/* AUTHENTIC RIGHT-HAND SKILL ARC (SLOTS 5, 6, 7 CURVING AROUND ATTACK BUTTON: PointerUtil.QUICK_USE_SKILL_XY) */
#right-skill-arc {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 140px;
    height: 140px;
    pointer-events: none;
    z-index: 20;
    user-select: none;
}

.arc-slot {
    position: absolute;
    width: 36px;
    height: 36px;
    pointer-events: auto;
    border-radius: 50%;
}

/* Slot 5: CANVAS_W - 110, CANVAS_H - 75 */
#skill-arc-5 {
    right: 86px;
    bottom: 52px;
}

/* Slot 6: CANVAS_W - 85, CANVAS_H - 110 */
#skill-arc-6 {
    right: 60px;
    bottom: 86px;
}

/* Slot 7: CANVAS_W - 42, CANVAS_H - 120 */
#skill-arc-7 {
    right: 18px;
    bottom: 96px;
}

/* AUTHENTIC MAIN ACTION / OK BUTTON (BOTTOM-RIGHT: SoftKeyboard.rectData[4]) */
#btn-main-attack {
    position: absolute;
    bottom: 12px;
    right: 15px;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    touch-action: none;
    z-index: 20;
    transition: transform 0.08s ease;
}

/* AUTHENTIC MOUNT BUTTON WITH HORSE HEAD ICON (BOTTOM NEAR ATTACK BUTTON) */
#btn-mount.hud-mount-btn {
    position: absolute;
    bottom: 8px;
    right: 84px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    user-select: none;
    touch-action: none;
    z-index: 22;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #2a1608 0%, #0d0603 100%);
    border: 2px solid #b45309;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.85), inset 0 0 6px rgba(245, 158, 11, 0.35);
    transition: transform 0.08s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#btn-mount.hud-mount-btn:hover {
    border-color: #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.8), inset 0 0 8px rgba(245, 158, 11, 0.5);
}

#btn-mount.hud-mount-btn:active {
    transform: scale(0.92);
}

#btn-mount.hud-mount-btn.active-mounted {
    border-color: #4ade80;
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.9), inset 0 0 8px rgba(34, 197, 94, 0.6);
    animation: mountPulseGlow 1.8s infinite ease-in-out;
}

#mount-btn-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    image-rendering: auto;
    pointer-events: none;
    transition: filter 0.2s ease;
}

#btn-mount.hud-mount-btn.active-mounted #mount-btn-img {
    filter: drop-shadow(0 0 4px #22c55e) brightness(1.1);
}

.mount-btn-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 900;
    color: #fef08a;
    background: rgba(15, 8, 4, 0.92);
    border: 1px solid #b45309;
    border-radius: 8px;
    padding: 0 4px;
    line-height: 11px;
    white-space: nowrap;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
    letter-spacing: 0.3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

#btn-mount.hud-mount-btn.active-mounted .mount-btn-badge {
    color: #86efac;
    border-color: #22c55e;
    background: rgba(6, 30, 15, 0.95);
}

#btn-main-attack:active {
    transform: scale(0.93);
}

#atk-btn-bg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.8));
    pointer-events: none;
}

/* AUTHENTIC RIGHT SOFTKEYS (RIGHT EDGE BELOW MINIMAP: SoftKeyboard.rectData[5]) */
#hud-right-softkeys {
    position: absolute;
    top: 122px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 25;
    user-select: none;
    touch-action: none;
}

.softkey-btn {
    position: relative;
    width: 48px;
    height: 48px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.08s ease;
}

.softkey-btn:active {
    transform: scale(0.92);
}

@keyframes bagBounce {
    0% { transform: scale(1); }
    35% { transform: scale(1.25); filter: drop-shadow(0 0 10px #facc15) brightness(1.2); }
    65% { transform: scale(0.95); }
    100% { transform: scale(1); filter: none; }
}

#btn-bag.bag-bounce {
    animation: bagBounce 0.38s ease-out;
}

.softkey-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.7));
    pointer-events: none;
}

#bag-btn-img {
    image-rendering: auto;
    border-radius: 50%;
    transition: transform 0.12s ease, filter 0.15s ease;
}

#btn-bag:hover #bag-btn-img {
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.85)) brightness(1.08);
}

.softkey-badge {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 900;
    color: #fef08a;
    background: rgba(15, 8, 4, 0.92);
    border: 1px solid #b45309;
    border-radius: 8px;
    padding: 0 4px;
    line-height: 11px;
    white-space: nowrap;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
    letter-spacing: 0.3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.softkey-menu-btn, .softkey-auto-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 35%, #451a03 0%, #1e1108 75%, #0f0804 100%);
    border: 2px solid #b45309;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25), 0 3px 8px rgba(0, 0, 0, 0.85);
    cursor: pointer;
    position: relative;
    transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.softkey-menu-btn:hover, .softkey-auto-btn:hover {
    border-color: #f59e0b;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.35), 0 0 10px rgba(245, 158, 11, 0.5);
}

.softkey-menu-btn:active, .softkey-auto-btn:active {
    transform: scale(0.92);
}

.softkey-menu-icon, .softkey-auto-icon {
    font-size: 17px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px #000);
}

.softkey-menu-label, .softkey-auto-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 8.5px;
    font-weight: 900;
    color: #fde047;
    letter-spacing: 0.5px;
    margin-top: 2px;
    line-height: 1;
    text-shadow: 0 1px 2px #000;
}

/* Active glowing state for Auto Battle button */
.softkey-auto-btn.active-auto {
    background: radial-gradient(circle at 35% 35%, #064e3b 0%, #022c22 75%, #011812 100%);
    border-color: #22c55e;
    box-shadow: 0 0 12px #22c55e, inset 0 0 6px rgba(34, 197, 94, 0.5);
    animation: autoBattlePulse 1.5s infinite alternate;
}

.softkey-auto-btn.active-auto .softkey-auto-label {
    color: #86efac;
    text-shadow: 0 0 6px #22c55e;
}

@keyframes autoBattlePulse {
    0% {
        box-shadow: 0 0 6px #22c55e, inset 0 0 4px rgba(34, 197, 94, 0.4);
    }
    100% {
        box-shadow: 0 0 16px #4ade80, 0 0 5px #fff, inset 0 0 8px rgba(74, 222, 128, 0.6);
    }
}

/* Nút Ảo Mobile Bang Hội & Gia Tộc [Softkey BANG] */
.softkey-guild-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 35%, #78350f 0%, #451a03 75%, #1c0a02 100%);
    border: 2px solid #d97706;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.25), 0 3px 8px rgba(0, 0, 0, 0.85);
    cursor: pointer;
    position: relative;
    user-select: none;
    touch-action: manipulation;
    transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.softkey-guild-btn:hover {
    border-color: #fde047;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.35), 0 0 12px rgba(245, 158, 11, 0.7);
}

.softkey-guild-btn:active {
    transform: scale(0.92);
}

.softkey-guild-icon {
    font-size: 17px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px #000);
}

.softkey-guild-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 8.5px;
    font-weight: 900;
    color: #fef08a;
    letter-spacing: 0.5px;
    margin-top: 2px;
    line-height: 1;
    text-shadow: 0 1px 2px #000;
}

.softkey-guild-btn.has-banner {
    border-color: #facc15;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.8), inset 0 0 6px rgba(245, 158, 11, 0.5);
    animation: autoBattlePulse 1.6s infinite alternate;
}

.softkey-label {
    display: none !important;
}

.softkey-label-attack {
    display: none !important;
}

.softkey-mount-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 12px;
    filter: drop-shadow(0 1px 2px #000);
    pointer-events: none;
}

#btn-mount.active-mounted {
    filter: drop-shadow(0 0 8px #f59e0b) drop-shadow(0 0 14px #fbbf24);
    animation: mountPulse 1.6s infinite alternate;
}

@keyframes mountPulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 6px #f59e0b); }
    100% { transform: scale(1.06); filter: drop-shadow(0 0 12px #fbbf24); }
}

.sub-icon-mount-emoji {
    font-size: 18px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px #000);
}

/* ================================================================ */
/* 🛡️ UNIVERSAL GAME CONTAINER BOUNDARY ENFORCER                    */
/* Đảm bảo 100% tất cả modal, hộp thoại và tab không nhảy ra ngoài   */
/* ================================================================ */
.modal-overlay,
.game-modal {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    background: rgba(0, 0, 0, 0.75);
    display: none;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 100;
}

/* TẤT CẢ KHUNG HỘP THOẠI / MODAL CONTENT KHÔNG BAO GIỜ VƯỢT QUÁ KHUNG HÌNH TRÒ CHƠI */
.modal-overlay > .modal-content,
.modal-overlay > [class*="-box"],
.game-modal > .modal-content,
.game-modal > [class*="-box"] {
    max-width: calc(100% - 16px) !important;
    max-height: calc(100% - 16px) !important;
    box-sizing: border-box !important;
    margin: auto !important;
    overflow: hidden !important;
}

/* ĐẢM BẢO TIÊU ĐỀ VÀ NÚT ĐÓNG / NÚT THAO TÁC LUÔN NẰM NGUYÊN VẸN KHÔNG BỊ CO ÉP */
.modal-overlay [class*="header"],
.modal-overlay [class*="footer"],
.game-modal [class*="header"],
.game-modal [class*="footer"],
.modal-header-antique,
.mosaic-footer,
.sword-footer,
.fate-footer,
.meridian-footer {
    flex-shrink: 0 !important;
}

/* THÂN HỘP THOẠI TỰ ĐỘNG CO DÃN VÀ CUỘN MƯỢT TRONG KHUNG HÌNH */
.modal-overlay [class*="-body"],
.game-modal [class*="-body"],
.modal-overlay [class*="-content"],
.game-modal [class*="-content"] {
    min-height: 0;
}

.modal-content {
    width: 480px;
    background: #18181b;
    border: 2px solid #b45309;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.modal-title {
    font-size: 16px;
    font-weight: bold;
    color: #facc15;
    margin-bottom: 14px;
    text-align: center;
    border-bottom: 1px solid #3f3f46;
    padding-bottom: 8px;
}

.mod-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 13px;
}

.mod-row select, .mod-row input[type="range"] {
    background: #27272a;
    color: #fff;
    border: 1px solid #52525b;
    padding: 4px 8px;
    border-radius: 4px;
}

button {
    background: linear-gradient(180deg, #3f3f46, #27272a);
    color: #fff;
    border: 1px solid #71717a;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}

button:hover {
    filter: brightness(1.15);
}

/* AUTHENTIC NPC DIALOG BOX */
.npc-dialog-box {
    width: 480px;
    max-width: 90vw;
    background: rgba(22, 12, 6, 0.98);
    border: 2px solid #78350f;
    border-radius: 6px;
    padding: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.9);
    overflow: hidden;
}

.npc-body-content {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: rgba(15, 8, 4, 0.85);
    border-bottom: 1px solid #78350f;
}

.npc-avatar-box {
    width: 76px;
    height: 100px;
    flex-shrink: 0;
    background: radial-gradient(circle, #291205 0%, #120702 100%);
    border: 2px solid #b45309;
    border-radius: 6px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8), 0 0 10px rgba(217, 119, 6, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.npc-avatar-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
}

.npc-dialog-text-wrap {
    flex: 1;
}

#npc-text {
    font-size: 13px;
    line-height: 1.65;
    color: #f8fafc;
}

.npc-actions-row {
    padding: 10px 16px;
    display: flex;
    justify-content: flex-end;
    background: rgba(10, 5, 2, 0.95);
}

/* ================================================================
   MOBILE FIRST RESPONSIVE QUERIES FOR TRUE MOBILE EXPERIENCE
   ================================================================ */
/* RESPONSIVE SCALING FOR MOBILE VIEWPORT */
@media (max-width: 1024px) {
    #game-container {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border: none;
    }

    /* Adjust HUD scaling on smaller mobile screens */
    #hud-top-left {
        transform-origin: top left;
        transform: scale(0.9);
        top: 4px;
        left: 4px;
    }

    #hud-top-right {
        transform-origin: top right;
        transform: scale(0.9);
        top: 4px;
        right: 4px;
    }

    #hud-target {
        transform-origin: top center;
        transform: translateX(-50%) scale(0.9);
        top: 4px;
    }

    #virtual-dpad {
        bottom: 12px;
        left: 12px;
        transform-origin: bottom left;
        transform: scale(1.05);
    }

    #btn-main-attack {
        bottom: 8px;
        right: 8px;
        transform-origin: bottom right;
        transform: scale(1.05);
    }

    #quick-skills-bar {
        bottom: 8px;
        transform-origin: bottom center;
        transform: translateX(-50%) scale(1.02);
    }
}

/* ================================================================
   AUTHENTIC MODALS: BACKPACK, CHAT, LOGIN & CHARACTER CREATION
   ================================================================ */

/* Common Antique Modal Headers & Controls */
.modal-header-antique {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 8px 12px 6px;
    border-bottom: 2px solid #78350f;
    background: linear-gradient(180deg, #451a03, #291205);
}

.modal-title-text {
    font-size: 14px;
    font-weight: bold;
    color: #fef08a;
    letter-spacing: 1px;
    text-shadow: 0 1px 3px #000, 0 0 5px #b45309;
    margin: 0 8px;
}

.header-decor-left, .header-decor-right { display: none !important; }

.btn-close-antique {
    position: absolute;
    right: 8px;
    top: 6px;
    background: #7f1d1d;
    color: #fef08a;
    border: 1px solid #b91c1c;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    transition: transform 0.08s;
}

.btn-close-antique:active {
    transform: scale(0.9);
}

.btn-antique-cmd {
    background: linear-gradient(180deg, #78350f, #451a03);
    color: #fef08a;
    border: 1px solid #d97706;
    border-radius: 4px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transition: all 0.1s ease;
}

.btn-antique-cmd:active {
    transform: scale(0.94);
}

.btn-antique-enter {
    background: linear-gradient(180deg, #b91c1c, #7f1d1d);
    color: #fef08a;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    padding: 6px 18px;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0,0,0,0.6);
    letter-spacing: 1px;
    transition: all 0.1s ease;
}

.btn-antique-enter:active {
    transform: scale(0.94);
}

.input-antique {
    background: rgba(18, 12, 8, 0.95);
    border: 1px solid #78350f;
    border-radius: 4px;
    color: #fef08a;
    font-size: 12px;
    padding: 4px 8px;
    outline: none;
    font-family: inherit;
}

.input-antique:focus {
    border-color: #d97706;
    box-shadow: 0 0 6px rgba(217, 119, 6, 0.5);
}

.select-antique {
    background: #291205;
    border: 1px solid #78350f;
    border-radius: 4px;
    color: #fef08a;
    font-size: 11px;
    padding: 3px 6px;
    outline: none;
    font-family: inherit;
}

/* -------------------------------------------------------------
   AUTHENTIC 14-SLOT BACKPACK & EQUIPMENT MODAL (J2ME)
   ------------------------------------------------------------- */
.backpack-box {
    width: 580px;
    max-width: 96vw;
    background: #1c120c;
    border: 2px solid #78350f;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
}

.backpack-body {
    display: flex;
    padding: 8px 10px;
    gap: 10px;
    background: rgba(28, 18, 12, 0.94);
}

/* Character Equip & Silhouette Section */
.char-equip-section {
    width: 230px;
    background: rgba(15, 10, 6, 0.85);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.equip-doll-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 2px 4px;
}

.equip-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.equip-slot {
    width: 30px;
    height: 30px;
    background: url('assets/ui/goodbox_0.png') no-repeat center / contain;
    image-rendering: pixelated;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: filter 0.1s ease;
}

.equip-slot:hover {
    filter: brightness(1.25);
}

.outfit-icon {
    width: 16px;
    height: 16px;
    background-image: url('assets/ui/outfitPos.png');
    image-rendering: pixelated;
    opacity: 0.6;
}

/* Exact J2ME outfitPos.png sprite sheet mappings (16x16 icons) */
.outfit-helm { background-position: 0px 0px; }            /* Mũ / Nón */
.outfit-bracer { background-position: -16px 0px; }        /* Hộ Uyển / Cổ Tay */
.outfit-pants { background-position: -32px 0px; }         /* Hộ Thối / Quần */
.outfit-weapon { background-position: -48px 0px; }        /* Vũ Khí Chính */
.outfit-ring2 { background-position: -64px 0px; }         /* Giới Chỉ 2 / Nhẫn 2 */
.outfit-armor { background-position: -80px 0px; }         /* Y Phục / Áo Giáp */
.outfit-ring1 { background-position: -96px 0px; }         /* Giới Chỉ 1 / Nhẫn 1 */
.outfit-boots { background-position: -112px 0px; }        /* Chiến Hài / Giày */
.outfit-necklace { background-position: -128px 0px; }     /* Hạng Liên / Dây Chuyền */
.outfit-cloak { background-position: -144px 0px; }        /* Phi Phong / Áo Choàng */
.outfit-amulet2 { background-position: -192px 0px; }      /* Hộ Phù 2 / Bùa 2 */
.outfit-belt { background-position: -208px 0px; }         /* Yêu Đái / Thắt Lưng */
.outfit-amulet { background-position: -224px 0px; }       /* Hộ Phù 1 / Bùa 1 */
.outfit-subweapon { background-position: -240px 0px; }    /* Vũ Khí Phụ */

.equip-preview-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.char-preview-box {
    position: relative;
    width: 90px;
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.role-ground-img {
    position: absolute;
    bottom: 0px;
    width: 72px;
    height: 35px;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

#bag-char-sprite {
    position: relative;
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
    z-index: 2;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.7));
}

.char-name-display {
    font-size: 10px;
    font-weight: bold;
    color: #fef08a;
    text-shadow: 0 1px 2px #000;
    margin-top: 2px;
}

.char-sect-display {
    font-size: 9px;
    color: #38bdf8;
    text-shadow: 0 1px 2px #000;
}

.equip-row-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 2px 0;
    border-top: 1px dashed rgba(120, 53, 15, 0.4);
}

.char-stats-summary {
    width: 100%;
    display: flex;
    justify-content: space-around;
    font-size: 9.5px;
    color: #e2e8f0;
    border-top: 1px solid #451a03;
    padding-top: 3px;
}

.char-stats-summary .stat-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.val-gold { color: #fef08a; font-weight: bold; }
.val-green { color: #4ade80; font-weight: bold; }
.val-cyan { color: #38bdf8; font-weight: bold; }

/* Inventory Right Side */
.inventory-grid-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.inventory-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    border-bottom: 1px solid #78350f;
    padding-bottom: 4px;
}

.inv-tab {
    padding: 2px 6px;
    font-size: 9.5px;
    font-weight: bold;
    color: #d1d5db;
    background: #451a03;
    border: 1px solid #78350f;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.inv-tab:hover {
    background: #78350f;
    color: #fef08a;
}

.inv-tab.active {
    background: #92400e;
    color: #fef08a;
    border-color: #d97706;
    box-shadow: 0 0 6px rgba(217, 119, 6, 0.4);
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(6, 30px);
    grid-auto-rows: 30px;
    gap: 4px;
    padding: 4px;
    background: rgba(15, 10, 6, 0.7);
    border: 1px solid #451a03;
    border-radius: 4px;
    min-height: 140px;
}

.inv-item-slot {
    width: 30px;
    height: 30px;
    background: url('assets/ui/goodbox_0.png') no-repeat center / contain;
    image-rendering: pixelated;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.inv-item-slot:hover {
    filter: brightness(1.25);
}

.inv-item-slot.selected {
    background: url('assets/ui/goodbox_1.png') no-repeat center / contain;
}

.inv-item-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
}

.inv-item-icon img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    image-rendering: pixelated;
}

.inv-item-count {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 8.5px;
    font-weight: bold;
    color: #fef08a;
    text-shadow: 0 1px 2px #000;
}

.backpack-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    background: #291205;
    border-top: 1px solid #78350f;
}

.currency-group {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #e2e8f0;
}

/* Legacy chat modal styling superseded by Section 3480 */

/* Legacy chat modal styling superseded by Section 3480 */

.btn-chat-quick {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 26px;
    cursor: pointer;
}

/* CLICKABLE CHAT ITEM LINK */
.chat-link-item {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid #d97706;
    border-radius: 3px;
    padding: 1px 5px;
    margin: 0 2px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: all 0.15s ease;
    vertical-align: baseline;
}

.chat-link-item:hover {
    background: rgba(245, 158, 11, 0.35);
    border-color: #fde047;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.65);
}

.chat-link-item.q-gold { color: #facc15; border-color: #eab308; background: rgba(234, 179, 8, 0.22); }
.chat-link-item.q-purple { color: #c084fc; border-color: #a855f7; background: rgba(168, 85, 247, 0.22); }
.chat-link-item.q-blue { color: #38bdf8; border-color: #0284c7; background: rgba(2, 132, 199, 0.22); }
.chat-link-item.q-green { color: #4ade80; border-color: #16a34a; background: rgba(22, 163, 74, 0.22); }

/* CLICKABLE CHAT TELEPORT POSITION LINK */
.chat-link-pos {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #38bdf8;
    background: rgba(14, 165, 233, 0.18);
    border: 1px solid #0284c7;
    border-radius: 3px;
    padding: 1px 5px;
    margin: 0 2px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: all 0.15s ease;
    vertical-align: baseline;
}

.chat-link-pos:hover {
    background: rgba(14, 165, 233, 0.4);
    border-color: #7dd3fc;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.75);
}

/* QUICK ITEM PICKER MODAL */
.chat-picker-box {
    width: 440px;
    max-width: 95vw;
    background: #1c120c;
    border: 2px solid #78350f;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
}

.chat-picker-body {
    padding: 10px 14px 14px;
    background: rgba(28, 18, 12, 0.94);
    max-height: 280px;
    overflow-y: auto;
}

.chat-picker-tip {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 8px;
}

.chat-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
}

.chat-picker-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    background: rgba(15, 10, 6, 0.85);
    border: 1px solid #78350f;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.chat-picker-item:hover {
    background: rgba(120, 53, 15, 0.4);
    border-color: #f59e0b;
    transform: translateY(-1px);
}

.chat-picker-item img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
    border-radius: 2px;
}

.chat-picker-item-name {
    font-size: 10px;
    font-weight: bold;
    color: #fef08a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -------------------------------------------------------------
   EXTRA AUTHENTIC DIALOGS (STAR, MAIL, QUEST, RECHARGE)
   ------------------------------------------------------------- */
.reward-box, .mail-box, .quest-box, .recharge-box {
    width: 440px;
    max-width: 95vw;
    background: #1c120c;
    border: 2px solid #78350f;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
}

.modal-body-pad {
    padding: 14px 18px;
    background: rgba(28, 18, 12, 0.94);
}

.reward-slot {
    background: rgba(15, 10, 6, 0.85);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 11px;
    color: #fef08a;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mail-item {
    background: rgba(15, 10, 6, 0.85);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 8px 12px;
}

.mail-title {
    font-weight: bold;
    color: #fef08a;
    font-size: 12px;
    margin-bottom: 2px;
}

.mail-from {
    font-size: 10px;
    color: #38bdf8;
    margin-bottom: 4px;
}

.mail-desc {
    font-size: 11px;
    color: #cbd5e1;
    line-height: 1.4;
}

.quest-item {
    background: rgba(15, 10, 6, 0.85);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 10px 14px;
}

/* -------------------------------------------------------------
   AUTHENTIC LOGIN & CHARACTER CREATION MODAL: AE ĐÔNG LÀO
   ------------------------------------------------------------- */
.auth-box {
    width: 620px;
    max-width: 96vw;
    height: auto;
    max-height: calc(100% - 16px);
    background: #1c120c;
    border: 2px solid #78350f;
    border-radius: 6px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.95), 0 0 25px rgba(120, 53, 15, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    touch-action: pan-y;
}

.auth-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 6px 12px 4px;
    background: linear-gradient(180deg, #451a03, #240d04);
    border-bottom: 2px solid #78350f;
    flex-shrink: 0;
}

.auth-logo-container {
    width: 320px;
    max-width: 80%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.85));
}

.auth-logo-svg,
.auth-logo-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.auth-tabs {
    display: flex;
    background: #240d04;
    border-bottom: 1px solid #78350f;
    flex-shrink: 0;
}

.auth-tab-btn {
    flex: 1;
    padding: 7px 10px;
    background: #3f1d0b;
    border: none;
    border-right: 1px solid #78350f;
    color: #d1d5db;
    font-size: 11.5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.12s ease;
}

.auth-tab-btn:last-child {
    border-right: none;
}

.auth-tab-btn.active {
    background: #78350f;
    color: #fef08a;
    box-shadow: inset 0 -2px 0 #f59e0b;
}

.auth-tab-panel {
    flex: 1;
    min-height: 0;
    padding: 10px 14px;
    background: rgba(28, 18, 12, 0.94);
    overflow-y: auto;
}

/* Gateway/login must remain usable on short screens and embedded APK WebViews.
   The old universal modal rule clipped the bottom controls and swallowed touch scroll. */
.modal-overlay:has(> .gateway-screen),
.modal-overlay:has(> #screen-login),
#game-container > .gateway-screen {
    overflow: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    align-items: flex-start !important;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
}
.modal-overlay > .auth-box.gateway-screen,
.modal-overlay > #screen-login,
#screen-login.auth-box {
    width: min(620px, calc(100% - 16px)) !important;
    max-width: calc(100% - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    height: auto !important;
    margin: 8px auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 0 0 auto;
    touch-action: pan-y;
}
.auth-box.gateway-screen .auth-tab-panel,
.auth-box.gateway-screen .auth-form,
.auth-box.gateway-screen .auth-content {
    min-height: 0;
    max-height: none;
    overflow: visible;
}
@media (max-width: 640px), (max-height: 620px) {
    .modal-overlay > .auth-box.gateway-screen,
    .modal-overlay > #screen-login,
    #screen-login.auth-box {
        width: calc(100% - 10px) !important;
        max-width: calc(100% - 10px) !important;
        max-height: calc(100dvh - 10px) !important;
        margin: 5px auto !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* Sect Cards Row */
.sect-cards-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.sect-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(15, 10, 6, 0.85);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 4px 2px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.sect-card:hover {
    background: #451a03;
    border-color: #d97706;
}

.sect-card.active {
    background: linear-gradient(180deg, #78350f, #451a03);
    border-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
    transform: translateY(-2px);
}

.sect-badge-frame {
    position: relative;
    width: 26px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sect-badge-frame img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.sect-name-calligraphy {
    position: absolute;
    width: 30px;
    height: 15px;
    background: url('assets/ui/occupationstr.png') no-repeat;
    image-rendering: pixelated;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    pointer-events: none;
}

.sect-callig-0 { background-position: 0px 0px; }
.sect-callig-1 { background-position: -30px 0px; }
.sect-callig-2 { background-position: -60px 0px; }
.sect-callig-3 { background-position: -90px 0px; }
.sect-callig-4 { background-position: -120px 0px; }
.sect-callig-5 { background-position: -150px 0px; }

.sect-title {
    font-size: 9.5px;
    color: #fef08a;
    margin-top: 3px;
    font-weight: bold;
    text-shadow: 0 1px 2px #000;
}

.create-content-split {
    display: flex;
    gap: 12px;
}

.create-preview-col {
    width: 180px;
    background: rgba(15, 10, 6, 0.85);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
}

.create-pedestal {
    position: relative;
    width: 120px;
    height: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pedestal-img {
    position: absolute;
    bottom: 4px;
    width: 80px;
    height: 40px;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
}

#create-char-sprite {
    position: relative;
    width: 70px;
    height: 70px;
    object-fit: contain;
    image-rendering: pixelated;
    z-index: 2;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.8));
}

.sect-element-badge {
    font-size: 10px;
    font-weight: bold;
    color: #38bdf8;
    background: #291205;
    border: 1px solid #78350f;
    border-radius: 3px;
    padding: 2px 8px;
    margin-top: 2px;
}

.sect-stats-preview {
    width: 100%;
    background: rgba(10, 5, 2, 0.8);
    border: 1px solid #78350f;
    border-radius: 3px;
    padding: 5px 6px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.stat-mini-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    color: #cbd5e1;
}

.stat-mini-row span {
    width: 32px;
    color: #94a3b8;
}

.stat-mini-row .bar-bg {
    flex: 1;
    height: 6px;
    background: #1c1917;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #451a03;
}

.stat-mini-row .bar-fg {
    height: 100%;
    border-radius: 3px;
    transition: width 0.25s ease;
}

.fg-gold  { background: linear-gradient(90deg, #ca8a04, #fef08a); }
.fg-green { background: linear-gradient(90deg, #16a34a, #86efac); }
.fg-cyan  { background: linear-gradient(90deg, #0284c7, #7dd3fc); }

.stat-mini-row b {
    width: 22px;
    text-align: right;
    font-size: 9.5px;
}

.create-options-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sect-desc-text {
    font-size: 11px;
    line-height: 1.4;
    color: #e2e8f0;
    background: rgba(15, 10, 6, 0.6);
    border-left: 3px solid #f59e0b;
    padding: 5px 8px;
    border-radius: 0 4px 4px 0;
    min-height: 46px;
}

.opt-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.opt-label {
    width: 75px;
    font-size: 11px;
    font-weight: bold;
    color: #fef08a;
}

.opt-btn-group {
    display: flex;
    gap: 6px;
}

.opt-btn {
    background: #451a03;
    border: 1px solid #78350f;
    border-radius: 3px;
    color: #d1d5db;
    font-size: 10.5px;
    padding: 3px 8px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.12s ease;
}

.opt-btn.active {
    background: #92400e;
    color: #fef08a;
    border-color: #f59e0b;
}

.input-name-wrap {
    display: flex;
    gap: 6px;
    flex: 1;
}

.btn-dice {
    background: linear-gradient(180deg, #d97706, #78350f);
    border: 1px solid #f59e0b;
    border-radius: 3px;
    color: #fef08a;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.12s ease;
}

.btn-dice:hover {
    background: linear-gradient(180deg, #f59e0b, #92400e);
    transform: scale(1.05);
}

.btn-dice:active {
    transform: scale(0.95);
}

.create-action-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

/* Server & Login Tab */
.server-box {
    background: rgba(15, 10, 6, 0.85);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.server-title {
    font-size: 11px;
    font-weight: bold;
    color: #fef08a;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.server-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.server-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #291205;
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.server-item:hover {
    background: #451a03;
    border-color: #d97706;
}

.server-item.active {
    background: linear-gradient(135deg, #78350f, #3b1706);
    border-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.server-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.server-name {
    font-size: 11px;
    color: #fef08a;
}

.server-desc {
    font-size: 9px;
    color: #94a3b8;
}

.server-tag {
    font-size: 9px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
}

.tag-new  { background: #065f46; color: #6ee7b7; border: 1px solid #059669; }
.tag-hot  { background: #831843; color: #fbcfe8; border: 1px solid #db2777; }
.tag-good { background: #1e3a8a; color: #93c5fd; border: 1px solid #2563eb; }
.tag-soon { background: #374151; color: #d1d5db; border: 1px solid #6b7280; }

.login-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(15, 10, 6, 0.8);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 10px 14px;
}

.form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
}

.form-group label {
    width: auto !important;
    min-width: 0 !important;
    font-size: 11px;
    font-weight: bold;
    color: #fef08a;
    white-space: nowrap !important;
    text-align: left;
}

.form-group input {
    width: 100% !important;
    box-sizing: border-box !important;
}

.login-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 10.5px;
    color: #cbd5e1;
}

.remember-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.curr-server-label {
    font-size: 10.5px;
    color: #cbd5e1;
}

.gateway-screen-title {
    text-align: center;
    font-size: 11.5px;
    font-weight: bold;
    color: #fef08a;
    background: linear-gradient(180deg, #240d04, #180902);
    padding: 5px 10px;
    border-bottom: 1px solid #78350f;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.server-selected-info-box {
    background: rgba(15, 10, 6, 0.85);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 6px 10px;
    margin-top: 6px;
    font-size: 10.5px;
    color: #cbd5e1;
}

.server-info-line {
    font-weight: bold;
    margin-bottom: 3px;
}

.server-info-sub {
    font-size: 9.5px;
    color: #94a3b8;
}

/* Character Selection Slots */
.char-slots-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #cbd5e1;
    padding: 4px 8px;
    margin-bottom: 8px;
    background: rgba(15, 10, 6, 0.7);
    border: 1px solid #78350f;
    border-radius: 4px;
}

.char-slots-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 225px;
    overflow-y: auto;
    padding: 2px;
}

.char-slot-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #291205;
    border: 1.5px solid #78350f;
    border-radius: 5px;
    padding: 8px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.char-slot-card:hover {
    background: #451a03;
    border-color: #d97706;
}

.char-slot-card.active {
    background: linear-gradient(135deg, #5c2406, #2e1203);
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.char-slot-avatar {
    width: 44px;
    height: 44px;
    border: 1.5px solid #78350f;
    border-radius: 4px;
    background: #180902;
    object-fit: contain;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.char-slot-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.char-slot-name {
    font-size: 12px;
    font-weight: bold;
    color: #fef08a;
}

.char-slot-sub {
    font-size: 10px;
    color: #94a3b8;
}

.char-slot-badge {
    font-size: 9.5px;
    padding: 2px 6px;
    border-radius: 3px;
    background: #1e3a8a;
    color: #93c5fd;
    border: 1px solid #2563eb;
    font-weight: bold;
}

.char-slot-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed #78350f;
    border-radius: 5px;
    padding: 14px;
    color: #f59e0b;
    font-size: 11.5px;
    font-weight: bold;
    cursor: pointer;
    background: rgba(20, 10, 5, 0.4);
    transition: all 0.15s ease;
}

.char-slot-empty:hover {
    background: rgba(45, 20, 8, 0.6);
    border-color: #facc15;
    color: #fef08a;
}

.btn-danger {
    background: linear-gradient(180deg, #991b1b, #450a0a) !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}

.btn-danger:hover {
    background: linear-gradient(180deg, #dc2626, #7f1d1d) !important;
    color: #fff !important;
}

/* Loading Transition Screen */
.loading-screen-box {
    background: radial-gradient(circle, #2a1104 0%, #150802 100%) !important;
    justify-content: space-between;
}

.loading-body-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 20px;
    gap: 14px;
}

.loading-ornament-top {
    color: #f59e0b;
    letter-spacing: 6px;
    font-size: 14px;
    text-shadow: 0 0 8px #f59e0b;
    animation: pulseGlow 1.5s infinite alternate;
}

.loading-main-title {
    font-size: 13.5px;
    font-weight: bold;
    color: #fef08a;
    text-shadow: 0 2px 4px #000;
    letter-spacing: 1px;
    text-align: center;
}

.loading-bar-shell {
    width: 82%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.loading-bar-track {
    width: 100%;
    height: 18px;
    background: #120702;
    border: 2px solid #78350f;
    border-radius: 9px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 6px #000;
}

.loading-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #b45309 0%, #f59e0b 50%, #fef08a 100%);
    border-radius: 7px;
    position: relative;
    transition: width 0.08s ease-out;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}

.loading-bar-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmerMove 1.2s infinite;
}

.loading-bar-text {
    font-size: 11px;
    font-weight: bold;
    color: #fef08a;
    text-shadow: 0 1px 2px #000;
}

.loading-tip-container {
    margin-top: 10px;
    max-width: 86%;
    background: rgba(10, 5, 2, 0.7);
    border: 1px solid #5c2406;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 10.5px;
    color: #e2e8f0;
    text-align: center;
    line-height: 1.4;
}

.tip-badge {
    color: #facc15;
    font-weight: bold;
    margin-right: 4px;
}

.tip-content {
    color: #cbd5e1;
}

@keyframes shimmerMove {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes pulseGlow {
    0% { opacity: 0.6; transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1.04); }
}

.auth-footer-notice {
    padding: 5px 12px;
    background: #180902;
    border-top: 1px solid #78350f;
    text-align: center;
    font-size: 9px;
    color: #a8a29e;
    letter-spacing: 1px;
    flex-shrink: 0;
}

/* ========================================================= */
/* AUTHENTIC TOP QUICK MENU (Defaults.quickMenu & t_m_quickMenuback.png) */
/* ========================================================= */
#hud-top-quickmenu {
    position: absolute;
    top: 8px;
    left: 215px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 20;
}

.top-menu-btn {
    position: relative;
    width: 54px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.08s ease, filter 0.15s ease;
}

.top-menu-btn:hover {
    filter: brightness(1.15);
}

.top-menu-btn:active {
    transform: scale(0.92);
}

.top-menu-btn .menu-btn-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    image-rendering: pixelated;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5));
}

.top-menu-btn .menu-btn-icon {
    position: relative;
    width: 20px;
    height: 20px;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
    z-index: 2;
}

/* ========================================================= */
/* TOP-RIGHT SUB-ICONS (STAR REWARD & EMAIL) */
/* ========================================================= */
#hud-top-subicons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
}

.sub-icon-btn {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: rgba(20, 10, 5, 0.7);
    border: 1px solid #78350f;
    border-radius: 4px;
    transition: transform 0.1s ease;
}

.sub-icon-btn:hover {
    border-color: #f59e0b;
}

.sub-icon-btn:active {
    transform: scale(0.92);
}

.sub-icon-img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    image-rendering: pixelated;
    animation: starPulse 1.8s infinite alternate ease-in-out;
}

@keyframes starPulse {
    0% { transform: scale(0.95); filter: drop-shadow(0 0 2px #facc15); }
    100% { transform: scale(1.08); filter: drop-shadow(0 0 6px #facc15); }
}

.sub-icon-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc2626;
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    padding: 0 3px;
    border-radius: 4px;
    border: 1px solid #fca5a5;
}

.sub-icon-mail {
    width: 22px;
    height: 22px;
    object-fit: contain;
    image-rendering: pixelated;
}

/* ========================================================= */
/* AUTHENTIC MODAL HEADERS & GENERIC ANTIQUE BOXES */
/* ========================================================= */
.modal-header-antique {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to bottom, #451a03, #1f0b02);
    padding: 7px 36px 7px 12px;
    border-bottom: 2px solid #78350f;
    min-height: 36px;
    flex-shrink: 0;
}

.header-decor-left, .header-decor-right { display: none !important; }

.modal-title-text {
    color: #fef08a;
    font-size: 13px;
    font-weight: bold;
    text-shadow: 0 1px 2px #000, 0 0 6px rgba(245, 158, 11, 0.5);
    letter-spacing: 0.5px;
    margin: 0 8px;
}

.btn-close-antique {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: #7f1d1d;
    border: 1px solid #b91c1c;
    border-radius: 4px;
    color: #fef08a;
    width: 26px;
    height: 26px;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: all 0.15s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.6);
    z-index: 100;
}

.btn-close-antique:hover {
    background: #dc2626;
    border-color: #fca5a5;
    color: #ffffff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.9);
}

.btn-close-antique:active {
    transform: translateY(-50%) scale(0.95);
    background: #991b1b;
}

.modal-footer-antique {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    background: linear-gradient(to top, #2e1003, #190902);
    border-top: 1px solid #78350f;
    padding: 6px 12px;
    flex-shrink: 0;
}

.btn-modal-close-footer {
    background: linear-gradient(to bottom, #7f1d1d, #450a0a);
    border: 1px solid #b91c1c;
    color: #fef08a;
    font-size: 11px;
    font-weight: bold;
    padding: 5px 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.1s ease;
}

.btn-modal-close-footer:hover {
    background: linear-gradient(to bottom, #b91c1c, #7f1d1d);
    border-color: #ef4444;
    color: #ffffff;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.6);
}

.modal-body-pad {
    padding: 12px 14px;
}

.btn-antique-cmd {
    background: linear-gradient(to bottom, #92400e, #451a03);
    border: 1px solid #d97706;
    color: #fef08a;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: background 0.1s ease;
}

.btn-antique-cmd:hover {
    background: linear-gradient(to bottom, #b45309, #78350f);
    border-color: #f59e0b;
}

.btn-antique-enter {
    background: linear-gradient(to bottom, #b45309, #78350f);
    border: 1px solid #f59e0b;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    padding: 6px 20px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

.btn-antique-enter:hover {
    background: linear-gradient(to bottom, #d97706, #92400e);
}

/* ========================================================= */
/* AUTHENTIC BACKPACK & 14-EQUIPMENT SLOTS LAYOUT */
/* ========================================================= */
.backpack-box {
    width: 685px;
    max-width: 96vw;
    height: 508px;
    max-height: calc(100% - 16px);
    background: rgba(22, 12, 6, 0.98);
    border: 2px solid #78350f;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 25px rgba(120, 53, 15, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: pan-y;
}

.backpack-body {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 10px;
    padding: 6px 10px;
    overflow: hidden;
}

.char-equip-section {
    width: 285px;
    background: rgba(15, 8, 4, 0.75);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    flex-shrink: 0;
    overflow-y: auto;
}

.equip-doll-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 6px;
}

/* ================================================================
   16 VỊ TRÍ TRANG BỊ CHUẨN TÚY GIANG HỒ MOBILE (KHUNG 4x6 J2ME)
   ================================================================ */
.authentic-outfit-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    width: 100%;
}

.outfit-grid-4x6 {
    display: grid;
    grid-template-columns: 48px 58px 58px 48px;
    grid-template-rows: repeat(6, 46px);
    column-gap: 6px;
    row-gap: 4px;
    padding: 6px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 4px;
    position: relative;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.6);
    width: 100%;
    box-sizing: border-box;
}

.outfit-grid-4x6 .equip-slot {
    justify-self: center;
    align-self: center;
}

.equip-slot {
    position: relative;
    width: 46px;
    height: 46px;
    background: url('assets/ui/goodbox_0.png') no-repeat center / 100% 100%;
    image-rendering: pixelated;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 3px;
    box-sizing: border-box;
    transition: transform 0.1s ease, filter 0.1s ease;
}

.equip-slot:hover {
    filter: brightness(1.25);
    transform: scale(1.04);
}

.equipped-item-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.equipped-item-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.75));
}

/* Khung Viền Chọn Màu Vàng [ ] Chuẩn Screenshot Gốc */
.equip-slot.selected-slot {
    box-shadow: 0 0 0 1px #facc15, 0 0 8px rgba(250, 204, 21, 0.6);
}

.equip-slot.selected-slot::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fef08a;
    border-left: 2px solid #fef08a;
    pointer-events: none;
}

.equip-slot.selected-slot::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #fef08a;
    border-right: 2px solid #fef08a;
    pointer-events: none;
}

/* Biểu tượng ô trống (outfitPos.png - 18 frames 16x16) */
.outfit-icon {
    width: 16px;
    height: 16px;
    background-image: url('assets/ui/outfitPos.png');
    background-repeat: no-repeat;
    image-rendering: pixelated;
    opacity: 0.65;
    transform: scale(1.3);
    transform-origin: center;
}

/* 16 Vị Trí Ánh Xạ Chuẩn Theo outFitPosImg & Constants.java */
.outfit-pos-0   { background-position: 0px 0px; }       /* [0]  头部 - Mũ */
.outfit-pos-1   { background-position: -16px 0px; }     /* [1]  胸部 - Áo Giáp */
.outfit-pos-2   { background-position: -32px 0px; }     /* [2]  腿部 - Quần */
.outfit-pos-3   { background-position: -48px 0px; }     /* [3]  脚部 - Giày */
.outfit-pos-4   { background-position: -64px 0px; }     /* [4]  主手 - Vũ Khí Chính */
.outfit-pos-5   { background-position: -80px 0px; }     /* [5]  肩部 - Giáp Vai */
.outfit-pos-6   { background-position: -112px 0px; }    /* [6]  腕部 - Cổ Tay / Hộ Uyển (img 7) */
.outfit-pos-7   { background-position: -96px 0px; }     /* [7]  腰部 - Thắt Lưng / Yêu Đái (img 6) */
.outfit-pos-8   { background-position: -128px 0px; }    /* [8]  戒指1 - Giới Chỉ 1 */
.outfit-pos-9   { background-position: -128px 0px; }    /* [9]  戒指2 - Giới Chỉ 2 */
.outfit-pos-10  { background-position: -144px 0px; }    /* [10] 饰品1 - Trang Sức 1 / Dây Chuyền */
.outfit-pos-11  { background-position: -144px 0px; }    /* [11] 饰品2 - Trang Sức 2 / Ngọc Bội */
.outfit-pos-12  { background-position: -160px 0px; }    /* [12] 背部 - Phi Phong / Áo Choàng */
.outfit-pos-13  { background-position: -160px 0px; }    /* [13] 腰饰1 - Yêu Sức 1 */
.outfit-pos-14  { background-position: -160px 0px; }    /* [14] 腰饰2 - Yêu Sức 2 */
.outfit-pos-15  { background-position: -192px 0px; }    /* [15] 背饰 - Bối Sức / Thần Binh Lưng */

/* Badge Cường Hóa Góc Trên (+25 / Sao) */
.equip-badge-upgrade {
    position: absolute;
    top: 1px;
    right: 1px;
    font-size: 9px;
    font-weight: bold;
    color: #fef08a;
    background: rgba(0, 0, 0, 0.75);
    padding: 1px 3px;
    border-radius: 2px;
    line-height: 11px;
    pointer-events: none;
    text-shadow: 0 1px 1px #000;
    border: 1px solid rgba(254, 240, 138, 0.35);
}

/* Center Avatar Grid Placement (Chiếm 2 cột giữa x 4 hàng) */
.outfit-grid-4x6 .equip-preview-center {
    grid-column: 2 / span 2;
    grid-row: 2 / span 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: visible;
}

/* Dải Thanh Chọn Trang Bị (Chuẩn Screenshot Gốc) */
.outfit-selected-item-bar {
    width: 100%;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 4px;
    padding: 4px 8px;
    margin: 4px 0 6px 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.selected-item-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.selected-item-name {
    font-size: 11px;
    font-weight: bold;
    color: #fde047;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 2px #000;
}

.btn-selected-detail {
    background: rgba(14, 116, 144, 0.5);
    border: 1px solid #38bdf8;
    color: #bae6fd;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.btn-selected-detail:hover {
    background: #0284c7;
    color: #ffffff;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
}

.selected-item-stars {
    font-size: 10px;
    letter-spacing: 1px;
    color: #f59e0b;
    text-shadow: 0 0 4px rgba(245, 158, 11, 0.8);
    display: flex;
    align-items: center;
}

/* Bảng Thuộc Tính Nhân Vật (Chuẩn Screenshot Gốc) */
.outfit-stats-panel {
    width: 100%;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(71, 85, 105, 0.5);
    border-radius: 4px;
    padding: 4px 6px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 10.5px;
    font-family: 'Times New Roman', serif, sans-serif;
}

.outfit-stat-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #94a3b8;
    line-height: 14.5px;
}

.outfit-stat-line .stat-label {
    color: #93c5fd;
    text-shadow: 0 1px 1px #000;
}

.outfit-stat-line .stat-val {
    font-weight: bold;
    color: #e2e8f0;
    text-shadow: 0 1px 2px #000;
}

.stat-val-score { color: #facc15 !important; }
.stat-val-power { color: #f43f5e !important; }
.stat-val-vitality { color: #38bdf8 !important; }
.stat-val-level { color: #4ade80 !important; }

.equip-preview-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 150px;
}

.char-preview-box {
    position: relative;
    width: 140px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bag-char-canvas {
    width: 140px;
    height: 130px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.85));
}

.char-name-display {
    font-size: 11px;
    font-weight: bold;
    color: #fef08a;
    text-shadow: 0 1px 2px #000;
    margin-top: 1px;
}

.char-sect-display {
    font-size: 9.5px;
    color: #38bdf8;
    margin-top: 1px;
}

.char-preview-badge {
    font-size: 8.5px;
    color: #fbbf24;
    background: rgba(45, 26, 12, 0.75);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 10px;
    padding: 2px 8px;
    margin-top: 4px;
    text-align: center;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    animation: pulseBadge 3s infinite ease-in-out;
}

@keyframes pulseBadge {
    0%, 100% { border-color: rgba(245, 158, 11, 0.35); color: #fbbf24; }
    50% { border-color: rgba(251, 191, 36, 0.7); color: #fffbeb; }
}

.bag-anim-controls {
    display: flex;
    gap: 3px;
    margin-top: 4px;
    justify-content: center;
    width: 100%;
}

.bag-anim-btn {
    background: linear-gradient(180deg, #451a03 0%, #1f1008 100%);
    border: 1px solid #92400e;
    border-radius: 3px;
    color: #fde68a;
    font-size: 9.5px;
    font-weight: 600;
    padding: 2px 5px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
    text-shadow: 0 1px 1px #000;
}

.bag-anim-btn:hover {
    border-color: #f59e0b;
    color: #ffffff;
    box-shadow: 0 0 5px rgba(245, 158, 11, 0.4);
}

.bag-anim-btn.active {
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
    border-color: #fbbf24;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.65);
    transform: translateY(-1px);
}

.bag-dir-controls {
    display: flex;
    gap: 3px;
    margin-top: 3px;
    justify-content: center;
    width: 100%;
}

.bag-dir-btn {
    background: rgba(30, 20, 15, 0.85);
    border: 1px solid #78350f;
    border-radius: 2px;
    color: #a8a29e;
    font-size: 8.5px;
    padding: 1px 5px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s ease;
}

.bag-dir-btn:hover {
    border-color: #d97706;
    color: #fde68a;
}

.bag-dir-btn.active {
    background: #78350f;
    border-color: #f59e0b;
    color: #fef08a;
    font-weight: bold;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
}

.equip-row-bottom {
    display: flex;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 2px;
}

.char-stats-summary {
    display: flex;
    width: 100%;
    justify-content: space-around;
    background: rgba(10, 5, 2, 0.85);
    border: 1px solid #78350f;
    border-radius: 3px;
    padding: 4px 6px;
    margin-top: 6px;
    font-size: 10px;
}

.stat-col div {
    margin: 1px 0;
}

/* Inventory Grid Section */
.inventory-grid-section {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.inventory-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
    flex-shrink: 0;
}

.inv-tab {
    background: #291205;
    border: 1px solid #78350f;
    color: #cbd5e1;
    font-size: 10.5px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
}

.inv-tab.active {
    background: #92400e;
    color: #fef08a;
    border-color: #f59e0b;
}

/* Authentic Sect Filter Bar for Inventory */
.inventory-sect-filter-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #92400e #1a0a03;
    flex-shrink: 0;
}

.inventory-sect-filter-bar::-webkit-scrollbar {
    height: 4px;
}
.inventory-sect-filter-bar::-webkit-scrollbar-thumb {
    background: #92400e;
    border-radius: 2px;
}

.inv-sect-btn {
    background: linear-gradient(180deg, #2a1508 0%, #160a03 100%);
    border: 1px solid #78350f;
    color: #e2e8f0;
    font-size: 9.5px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.inv-sect-btn:hover {
    background: linear-gradient(180deg, #451a03 0%, #291205 100%);
    border-color: #f59e0b;
    color: #fef08a;
}

.inv-sect-btn.active {
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
    color: #fef08a;
    border-color: #fbbf24;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
    font-weight: bold;
}

.inv-sect-badge {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 8px;
    padding: 0 4px;
    font-size: 8.5px;
    color: #fde047;
}

.inventory-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(6, 42px);
    grid-auto-rows: 42px;
    justify-content: center;
    gap: 5px;
    background: rgba(10, 5, 2, 0.75);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 6px 4px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    touch-action: pan-y;
}

.inv-item-slot {
    position: relative;
    width: 42px;
    height: 42px;
    background: url('assets/ui/goodbox_0.png') no-repeat center / 100% 100%;
    image-rendering: pixelated;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-sizing: border-box;
}

.inv-item-slot:hover {
    filter: brightness(1.25);
}

.inv-item-slot.selected {
    background: url('assets/ui/goodbox_1.png') no-repeat center / 100% 100%;
}

.inv-item-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    image-rendering: pixelated;
}

.inv-item-icon img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    image-rendering: pixelated;
}

.inv-item-count {
    position: absolute;
    bottom: 1px;
    right: 3px;
    font-size: 9.5px;
    font-weight: bold;
    color: #fef08a;
    text-shadow: 0 1px 2px #000;
}

.backpack-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 8, 4, 0.95);
    border-top: 1px solid #78350f;
    padding: 6px 14px;
}

.currency-group {
    display: flex;
    gap: 16px;
    font-size: 11px;
}

/* ========================================================= */
/* AUTHENTIC 8-CHANNEL CHAT MODAL (Constants.java) */
/* ========================================================= */
.chat-box {
    width: 520px;
    max-width: 95vw;
    max-height: calc(100% - 16px);
    background: rgba(20, 10, 5, 0.98);
    border: 2px solid #78350f;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.9);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.chat-header-actions {
    position: absolute;
    right: 42px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ========================================================= */
/* AUTHENTIC 8-CHANNEL CHAT SYSTEM (BALANCED & EQUAL TABS) */
/* ========================================================= */
.chat-tabs {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    gap: 3px;
    background: rgba(15, 8, 4, 0.95);
    padding: 5px 6px;
    border-bottom: 1px solid #78350f;
}

.chat-tab {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    background: #241106;
    border: 1px solid #5c2909;
    color: #94a3b8;
    font-size: 11px;
    font-weight: bold;
    padding: 5px 1px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
    user-select: none;
}

/* Tab Hover States */
.chat-tab:hover {
    filter: brightness(1.2);
}

/* 8 Distinct, Non-Overlapping Channel Tab Active States */
.chat-tab[data-channel="all"].active {
    background: #78350f;
    border-color: #f59e0b;
    color: #fbbf24;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}
.chat-tab[data-channel="whisper"].active {
    background: #831843;
    border-color: #f472b6;
    color: #fbcfe8;
    box-shadow: 0 0 6px rgba(244, 114, 182, 0.5);
}
.chat-tab[data-channel="team"].active {
    background: #164e63;
    border-color: #22d3ee;
    color: #cffafe;
    box-shadow: 0 0 6px rgba(34, 211, 238, 0.5);
}
.chat-tab[data-channel="sect"].active {
    background: #064e3b;
    border-color: #34d399;
    color: #a7f3d0;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.5);
}
.chat-tab[data-channel="clan"].active {
    background: #581c87;
    border-color: #c084fc;
    color: #e9d5ff;
    box-shadow: 0 0 6px rgba(192, 132, 252, 0.5);
}
.chat-tab[data-channel="area"].active {
    background: #7c2d12;
    border-color: #fb923c;
    color: #fed7aa;
    box-shadow: 0 0 6px rgba(251, 146, 60, 0.5);
}
.chat-tab[data-channel="world"].active {
    background: #0c4a6e;
    border-color: #60a5fa;
    color: #bae6fd;
    box-shadow: 0 0 6px rgba(96, 165, 250, 0.5);
}
.chat-tab[data-channel="sys"].active {
    background: #713f12;
    border-color: #facc15;
    color: #fef08a;
    box-shadow: 0 0 6px rgba(250, 204, 21, 0.5);
}

.chat-history {
    height: 200px;
    overflow-y: auto;
    padding: 8px 10px;
    background: rgba(10, 5, 2, 0.88);
    font-size: 11.5px;
    line-height: 1.6;
}

.chat-line {
    margin-bottom: 4px;
    word-break: break-word;
    text-shadow: 0 1px 2px #000;
}

/* 8 Authentic, Distinct Non-Overlapping Channel Prefix Colors */
.ch-all     { color: #f59e0b; font-weight: bold; } /* Tất Cả - Hổ Phách */
.ch-whisper { color: #f472b6; font-weight: bold; } /* Mật - Hồng Cánh Sen */
.ch-team    { color: #22d3ee; font-weight: bold; } /* Đội - Lam Ngọc Cyan */
.ch-sect    { color: #34d399; font-weight: bold; } /* Phái - Lục Bảo Emerald */
.ch-clan    { color: #c084fc; font-weight: bold; } /* Bang - Tử Sắc Purple */
.ch-area    { color: #fb923c; font-weight: bold; } /* Khu - Cam Lửa Orange */
.ch-world   { color: #38bdf8; font-weight: bold; } /* Thế - Hải Lam Sky Blue */
.ch-sys     { color: #facc15; font-weight: bold; } /* Hệ - Kim Hoàng Yellow */

/* 8 Channel Message Text Colors - Distinct Atmosphere */
.chat-line[data-channel="all"]     { color: #fef3c7; }
.chat-line[data-channel="whisper"] { color: #fce7f3; }
.chat-line[data-channel="team"]    { color: #cffafe; }
.chat-line[data-channel="sect"]    { color: #d1fae5; }
.chat-line[data-channel="clan"]    { color: #f3e8ff; }
.chat-line[data-channel="area"]    { color: #ffedd5; }
.chat-line[data-channel="world"]   { color: #e0f2fe; }
.chat-line[data-channel="sys"]     { color: #fef9c3; }

/* Dynamic Channel Indicator Badge */
.chat-channel-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 3px 6px;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 4px;
    border: 1px solid;
    white-space: nowrap;
    cursor: default;
    user-select: none;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
    transition: all 0.15s ease;
}

.chat-channel-indicator[data-channel="all"],
.chat-channel-indicator.ch-all {
    background: #451a03;
    border-color: #f59e0b;
    color: #fbbf24;
}
.chat-channel-indicator[data-channel="whisper"],
.chat-channel-indicator.ch-whisper {
    background: #500724;
    border-color: #f472b6;
    color: #fbcfe8;
}
.chat-channel-indicator[data-channel="team"],
.chat-channel-indicator.ch-team {
    background: #083344;
    border-color: #22d3ee;
    color: #cffafe;
}
.chat-channel-indicator[data-channel="sect"],
.chat-channel-indicator.ch-sect {
    background: #022c22;
    border-color: #34d399;
    color: #a7f3d0;
}
.chat-channel-indicator[data-channel="clan"],
.chat-channel-indicator.ch-clan {
    background: #3b0764;
    border-color: #c084fc;
    color: #e9d5ff;
}
.chat-channel-indicator[data-channel="area"],
.chat-channel-indicator.ch-area {
    background: #431407;
    border-color: #fb923c;
    color: #fed7aa;
}
.chat-channel-indicator[data-channel="world"],
.chat-channel-indicator.ch-world {
    background: #082f49;
    border-color: #60a5fa;
    color: #bae6fd;
}
.chat-channel-indicator[data-channel="sys"],
.chat-channel-indicator.ch-sys {
    background: #422006;
    border-color: #facc15;
    color: #fef08a;
}

/* Balanced Chat Input Bar */
.chat-input-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: rgba(15, 8, 4, 0.96);
    border-top: 1px solid #78350f;
    box-sizing: border-box;
    width: 100%;
}

#chat-input-text {
    flex: 1 1 auto;
    min-width: 60px;
    background: #1a0e05;
    border: 1px solid #78350f;
    color: #f8fafc;
    font-size: 11.5px;
    padding: 5px 7px;
    border-radius: 4px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

#chat-input-text:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 5px rgba(245, 158, 11, 0.3);
}

.chat-input-bar .btn-antique-cmd,
.chat-input-bar .btn-chat-quick {
    flex-shrink: 0;
    padding: 4px 6px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    border-radius: 4px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

/* Prominent Send Button - Never Cut Off */
.btn-chat-send {
    flex-shrink: 0 !important;
    min-width: 52px;
    height: 28px;
    padding: 4px 9px;
    font-size: 11.5px;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(180deg, #d97706, #78350f);
    border: 1px solid #f59e0b;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.btn-chat-send:hover {
    background: linear-gradient(180deg, #f59e0b, #92400e);
    border-color: #fde047;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
    transform: translateY(-1px);
}

.btn-chat-send:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* Chat Cooldown Status (15s Anti-Spam) */
.btn-chat-send.cooldown {
    background: linear-gradient(180deg, #334155, #1e293b) !important;
    border-color: #64748b !important;
    color: #cbd5e1 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 0.9;
}

.btn-chat-send.cooldown:hover {
    background: linear-gradient(180deg, #334155, #1e293b) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.4) !important;
}

@keyframes chatInputShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.input-cooldown-shake {
    animation: chatInputShake 0.4s ease !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6) !important;
}

@media (max-width: 480px) {
    .chat-tabs {
        padding: 4px 3px;
        gap: 2px;
    }
    .chat-tab {
        font-size: 10px;
        padding: 4px 1px;
    }
    .chat-input-bar {
        padding: 5px 4px;
        gap: 3px;
    }
    .chat-channel-indicator {
        font-size: 9.5px;
        padding: 2px 4px;
    }
    .chat-input-bar .btn-antique-cmd,
    .chat-input-bar .btn-chat-quick {
        padding: 3px 4px;
        font-size: 10px;
    }
    .btn-chat-send {
        min-width: 46px;
        padding: 4px 6px;
        font-size: 11px;
    }
}

/* ========================================================= */
/* REWARD, MAIL, QUEST, RECHARGE MODALS */
/* ========================================================= */
.reward-box, .mail-box, .quest-box, .recharge-box {
    width: 380px;
    max-width: 90vw;
    background: rgba(22, 12, 6, 0.98);
    border: 2px solid #78350f;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.9);
    overflow: hidden;
}

.reward-slot {
    background: #291205;
    border: 1px solid #78350f;
    padding: 6px 8px;
    font-size: 10.5px;
    color: #fef08a;
    border-radius: 4px;
}

.mail-item, .quest-item {
    background: rgba(15, 8, 4, 0.8);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

.mail-item.active {
    border-color: #f59e0b;
}

.mail-title {
    font-size: 11.5px;
    font-weight: bold;
    color: #fef08a;
}

.mail-from {
    font-size: 10px;
    color: #38bdf8;
    margin: 2px 0;
}

.mail-desc {
    font-size: 11px;
    color: #cbd5e1;
    line-height: 1.4;
}

/* ========================================================= */
/* AUTHENTIC QUEST TRACKER HUD (LEFT SIDE WITH MINIMIZE) */
/* ========================================================= */
#hud-quest-tracker {
    position: static;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    transition: opacity 0.15s ease;
}

#hud-quest-tracker:hover {
    filter: brightness(1.08);
}

#hud-quest-tracker.collapsed .quest-tracker-body {
    display: none;
}

.quest-tracker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 3px 6px;
    background: linear-gradient(180deg, #451a03, #291205);
    border-bottom: 1px solid #78350f;
}

.quest-tracker-toggle-btn {
    background: #78350f;
    color: #fef08a;
    border: 1px solid #d97706;
    border-radius: 3px;
    font-size: 11px;
    line-height: 1;
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    font-weight: 900;
    margin-left: auto;
    transition: background 0.15s, color 0.15s;
}

.quest-tracker-toggle-btn:hover {
    background: #b45309;
    color: #ffffff;
}

.quest-tracker-icon {
    font-size: 11px;
}

.quest-tracker-title {
    font-size: 10.5px;
    font-weight: 800;
    color: #fef08a;
    letter-spacing: 0.5px;
}

.quest-tracker-body {
    padding: 5px 8px;
}

.qt-name {
    font-size: 11px;
    font-weight: 700;
    color: #fde047;
    margin-bottom: 2px;
}

.qt-desc {
    font-size: 10px;
    color: #e2e8f0;
    line-height: 1.3;
    margin-bottom: 3px;
}

.qt-progress {
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 2px;
}

.qt-hint {
    font-size: 9px;
    color: #38bdf8;
    text-align: right;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; text-shadow: 0 0 5px #38bdf8; }
}

.btn-qt-act {
    transition: all 0.15s ease;
}
.btn-qt-act:hover {
    filter: brightness(1.25);
    transform: translateY(-1px);
}
#btn-qt-fly {
    animation: flyGlow 2s infinite ease-in-out;
}
@keyframes flyGlow {
    0%, 100% { box-shadow: 0 0 3px #ec4899; }
    50% { box-shadow: 0 0 8px #f43f5e, inset 0 0 4px #fb7185; }
}

/* ================================================================
   ITEM QUALITY COLORS, GLOW BORDERS & BADGES
   ================================================================ */
.q-white { color: #f1f5f9 !important; text-shadow: 0 1px 2px #000; }
.q-green { color: #4ade80 !important; text-shadow: 0 1px 2px #000; }
.q-blue { color: #38bdf8 !important; text-shadow: 0 1px 2px #000; }
.q-purple { color: #c084fc !important; text-shadow: 0 1px 3px #581c87; }
.q-orange { color: #fb923c !important; text-shadow: 0 1px 3px #7c2d12; }
.q-gold { color: #facc15 !important; text-shadow: 0 1px 4px #713f12, 0 0 8px rgba(250, 204, 21, 0.5); }

/* Item Icon Quality Borders */
.q-border-white { border: 1.5px solid #94a3b8; border-radius: 3px; }
.q-border-green { border: 1.5px solid #22c55e; border-radius: 3px; box-shadow: inset 0 0 3px rgba(34, 197, 94, 0.4); }
.q-border-blue { border: 1.5px solid #0284c7; border-radius: 3px; box-shadow: inset 0 0 4px rgba(2, 132, 199, 0.5); }
.q-border-purple { border: 1.5px solid #a855f7; border-radius: 3px; box-shadow: 0 0 5px rgba(168, 85, 247, 0.5), inset 0 0 4px rgba(168, 85, 247, 0.4); }
.q-border-orange { border: 1.5px solid #f97316; border-radius: 3px; box-shadow: 0 0 6px rgba(249, 115, 22, 0.6), inset 0 0 5px rgba(249, 115, 22, 0.5); }
.q-border-gold { 
    border: 1.5px solid #eab308; 
    border-radius: 3px; 
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.8), inset 0 0 6px rgba(250, 204, 21, 0.6);
    animation: goldShimmer 2s infinite alternate ease-in-out;
}

@keyframes goldShimmer {
    0% { box-shadow: 0 0 5px rgba(234, 179, 8, 0.6), inset 0 0 4px rgba(250, 204, 21, 0.4); }
    100% { box-shadow: 0 0 10px rgba(250, 204, 21, 0.9), inset 0 0 8px rgba(254, 240, 138, 0.8); }
}

/* Quality Badges */
.quality-badge {
    display: inline-block;
    font-size: 8.5px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 8px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.qb-white { background: #334155; color: #cbd5e1; border: 1px solid #64748b; }
.qb-green { background: #064e3b; color: #86efac; border: 1px solid #10b981; }
.qb-blue { background: #0c4a6e; color: #7dd3fc; border: 1px solid #0284c7; }
.qb-purple { background: #4c1d95; color: #d8b4fe; border: 1px solid #9333ea; }
.qb-orange { background: #7c2d12; color: #fdba74; border: 1px solid #ea580c; }
.qb-gold { 
    background: linear-gradient(135deg, #713f12 0%, #a16207 100%); 
    color: #fef08a; 
    border: 1px solid #facc15; 
    box-shadow: 0 0 6px rgba(250, 204, 21, 0.4);
}

/* Equipped Doll Slots */
.equipped-item-wrapper {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    box-sizing: border-box;
}
.equipped-item-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.85));
}

/* Backpack Footer Action Buttons */
.backpack-footer-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}
.backpack-footer-btns .btn-antique-cmd {
    font-size: 10px;
    padding: 3px 8px;
    white-space: nowrap;
    text-decoration: none;
}

/* ================================================================
   ITEM DETAIL MODAL (ANTIQUE WUXIA PARCHMENT DIALOG)
   ================================================================ */
.item-detail-box {
    width: 380px;
    max-width: 92vw;
    background: #1c120c;
    border: 2px solid #78350f;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.85);
    border-radius: 6px;
    overflow: hidden;
    animation: zoomModal 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.item-detail-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-detail-top {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(30, 20, 15, 0.7);
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #451a03;
}

.item-icon-frame {
    width: 44px;
    height: 44px;
    background: url('assets/ui/goodbox_0.png') no-repeat center / contain;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.item-icon-frame img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    image-rendering: pixelated;
}

.item-detail-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

#detail-item-name {
    font-size: 14px;
    font-weight: 800;
}

.item-meta-row {
    font-size: 10.5px;
    color: #94a3b8;
}

.item-stats-box {
    background: rgba(15, 10, 6, 0.8);
    border: 1px solid #3b1d0a;
    border-radius: 4px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11.5px;
}

.detail-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(69, 26, 3, 0.4);
    padding-bottom: 2px;
}
.detail-stat-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.item-desc-box {
    background: rgba(25, 16, 11, 0.6);
    border: 1px solid #451a03;
    border-radius: 4px;
    padding: 8px 10px;
}

#detail-item-desc {
    font-size: 11px;
    color: #cbd5e1;
    line-height: 1.45;
    margin: 0;
    font-style: italic;
}

.item-detail-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 14px;
    background: #24140a;
    border-top: 1px solid #78350f;
}

.item-detail-actions button {
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    cursor: pointer;
}

/* =============================================================
   AUTHENTIC SKILL BOOK MODAL (BÍ KÍP VÕ CÔNG LỤC ĐẠI MÔN PHÁI)
   ============================================================= */
.skill-book-box {
    width: 780px;
    max-width: 96%;
    background: #180f0a;
    border: 2px solid #92400e;
    border-radius: 8px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    font-family: 'Be Vietnam Pro', sans-serif;
    max-height: 94vh;
    height: auto;
}

.skill-header-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 14px;
    background: linear-gradient(90deg, #2a160c 0%, #1c0f08 100%);
    border-bottom: 1px solid #78350f;
}

.skill-sect-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 800;
    color: #fef08a;
    text-shadow: 0 1px 2px #000;
}

.skill-sect-icon {
    font-size: 16px;
}

.skill-points-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #cbd5e1;
}

.btn-reset-skills {
    padding: 2px 8px !important;
    font-size: 11px !important;
    background: #451a03 !important;
    border-color: #b45309 !important;
    color: #fef08a !important;
    border-radius: 3px !important;
}

.btn-reset-skills:hover {
    background: #78350f !important;
}

.skill-tabs-bar {
    display: flex;
    background: #130a06;
    border-bottom: 2px solid #78350f;
}

.skill-tab-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 800;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.15s ease;
    letter-spacing: 0.5px;
}

.skill-tab-btn:hover {
    color: #fef08a;
    background: rgba(255, 255, 255, 0.03);
}

.skill-tab-btn.active {
    color: #fef08a;
    border-bottom-color: #f59e0b;
    background: #251208;
    text-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.skill-book-body {
    display: flex;
    flex: 1;
    min-height: 0;
    height: auto;
    background: rgba(20, 12, 8, 0.95);
    overflow: hidden;
}

.skill-list-col {
    width: 320px;
    flex: 0 0 320px;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-right: 1px solid #78350f;
}

.skill-item-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    background: #20130a;
    border: 1px solid #572605;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.skill-item-card:hover {
    background: #311c0f;
    border-color: #b45309;
    transform: translateX(2px);
}

.skill-item-card.selected {
    background: #3a2010;
    border-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
}

.skill-item-card.locked {
    opacity: 0.55;
    filter: grayscale(0.6);
}

.skill-item-icon-wrap {
    width: 38px;
    height: 38px;
    background: url('assets/ui/goodbox_0.png') no-repeat center / contain;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.skill-item-icon-wrap img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    image-rendering: pixelated;
}

.skill-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.skill-item-name {
    font-size: 12.5px;
    font-weight: 800;
    color: #fef08a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skill-item-meta {
    font-size: 10px;
    color: #94a3b8;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.skill-item-level-tag {
    color: #4ade80;
    font-weight: 700;
}

.skill-item-req-tag {
    color: #f87171;
}

.skill-item-equip-badge {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    background: #0284c7;
    color: #ffffff;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.badge-mini-effect {
    font-size: 9px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    white-space: nowrap;
}
.badge-mini-effect.freeze { background: rgba(56, 189, 248, 0.2); color: #7dd3fc; border: 1px solid rgba(56, 189, 248, 0.4); }
.badge-mini-effect.stun { background: rgba(245, 158, 11, 0.2); color: #fde047; border: 1px solid rgba(245, 158, 11, 0.4); }
.badge-mini-effect.slow { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, 0.4); }
.badge-mini-effect.bleed { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.4); }
.badge-mini-effect.knockback { background: rgba(14, 165, 233, 0.2); color: #38bdf8; border: 1px solid rgba(14, 165, 233, 0.4); }
.badge-mini-effect.heal { background: rgba(34, 197, 94, 0.2); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.4); }
.badge-mini-effect.shield { background: rgba(59, 130, 246, 0.2); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.4); }
.badge-mini-effect.buff { background: rgba(234, 179, 8, 0.2); color: #fef08a; border: 1px solid rgba(234, 179, 8, 0.4); }
.badge-mini-effect.passive { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.4); }

/* Detail Panel on Right */
.skill-detail-col {
    flex: 1;
    min-width: 380px;
    padding: 10px 12px 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #190f09;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.skill-detail-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 100%;
}

.skill-detail-header, .skill-detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #78350f;
    flex-shrink: 0;
}

.skill-detail-icon-frame, .skill-detail-icon-wrap {
    width: 44px;
    height: 44px;
    background: url('assets/ui/qu_iconbox0.png') no-repeat center / contain;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.skill-detail-icon-frame img, .skill-detail-icon-wrap img, #detail-skill-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    image-rendering: pixelated;
}

.skill-detail-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.skill-detail-name, #detail-skill-name {
    font-size: 14px;
    font-weight: 800;
    color: #facc15;
    margin: 0;
    text-shadow: 0 1px 2px #000;
}

.skill-detail-sub, .skill-detail-type-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
}

.badge-skill-active {
    background: #991b1b;
    color: #fef08a;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 10px;
    border: 1px solid rgba(248, 113, 113, 0.4);
}

.badge-skill-passive {
    background: #065f46;
    color: #a7f3d0;
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 10px;
    border: 1px solid rgba(52, 211, 153, 0.4);
}

.badge-skill-level {
    font-size: 10.5px;
    font-weight: 800;
}

.skill-detail-meta {
    flex-shrink: 0;
}

.skill-detail-desc, .skill-desc-box {
    font-size: 11px;
    color: #cbd5e1;
    line-height: 1.35;
    background: #110905;
    border: 1px solid #451a03;
    border-radius: 5px;
    padding: 6px 8px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.skill-effects-section {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
    border-top: 1px dashed rgba(120, 53, 15, 0.4);
    padding-top: 4px;
}

.skill-effect-chip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 6px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10.5px;
    background: rgba(0, 0, 0, 0.45);
    border-left: 3px solid #f59e0b;
}

.skill-effect-chip .sec-icon {
    font-size: 12px;
    line-height: 1;
}

.skill-effect-chip .sec-label {
    font-weight: 700;
    color: #fef08a;
}

.skill-effect-chip .sec-val {
    font-weight: 800;
    color: #ffffff;
}

.skill-effect-chip .sec-sub {
    font-size: 9.5px;
    color: #94a3b8;
}

.skill-effect-chip.effect-damage {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}

.skill-effect-chip.effect-freeze {
    border-left-color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
}

.skill-effect-chip.effect-stun {
    border-left-color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
}

.skill-effect-chip.effect-slow {
    border-left-color: #34d399;
    background: rgba(52, 211, 153, 0.12);
}

.skill-effect-chip.effect-bleed {
    border-left-color: #f87171;
    background: rgba(248, 113, 113, 0.12);
}

.skill-effect-chip.effect-knockback {
    border-left-color: #60a5fa;
    background: rgba(96, 165, 250, 0.12);
}

.skill-effect-chip.effect-shield {
    border-left-color: #38bdf8;
    background: rgba(56, 189, 248, 0.12);
}

.skill-effect-chip.effect-heal {
    border-left-color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

.skill-effect-chip.effect-buff-atk {
    border-left-color: #f97316;
    background: rgba(249, 115, 22, 0.12);
}

.skill-effect-chip.effect-buff-def {
    border-left-color: #eab308;
    background: rgba(234, 179, 8, 0.12);
}

.skill-effect-chip.effect-buff-speed {
    border-left-color: #14b8a6;
    background: rgba(20, 184, 166, 0.12);
}

.skill-effect-chip.effect-passive-stat {
    border-left-color: #a855f7;
    background: rgba(168, 85, 247, 0.12);
}

.skill-detail-scaling {
    flex-shrink: 0;
}

.skill-maxed-box {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: 5px;
    padding: 6px 10px;
}

.skill-maxed-banner {
    color: #facc15;
    font-weight: 800;
    font-size: 11.5px;
    text-align: center;
    margin-bottom: 4px;
}

.skill-maxed-summary {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: #cbd5e1;
}

.skill-stats-compare {
    background: #120904;
    border: 1px solid #451a03;
    border-radius: 4px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
}

.skill-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    border-bottom: 1px dashed rgba(120, 53, 15, 0.4);
}

.skill-stat-row:last-child {
    border-bottom: none;
}

.stat-label {
    color: #94a3b8;
}

.stat-curr {
    color: #fef08a;
    font-weight: 700;
}

.stat-next {
    color: #4ade80;
    font-weight: 700;
}

.skill-detail-actions, .skill-action-footer {
    display: flex;
    gap: 10px;
    padding-top: 6px;
    padding-bottom: 2px;
    border-top: 1px solid #78350f;
    flex-shrink: 0;
}

.skill-detail-actions button, .btn-upgrade-skill, .btn-equip-skill-slot {
    flex: 1;
    height: 36px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 800;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    transition: all 0.15s ease;
}

.btn-upgrade-skill:hover {
    background: #d97706;
}

.btn-upgrade-skill:disabled {
    background: #451a03;
    border-color: #78350f;
    color: #64748b;
    cursor: not-allowed;
}

.skill-list-col::-webkit-scrollbar, .skill-detail-col::-webkit-scrollbar {
    width: 5px;
}
.skill-list-col::-webkit-scrollbar-thumb, .skill-detail-col::-webkit-scrollbar-thumb {
    background: #78350f;
    border-radius: 3px;
}
.skill-list-col::-webkit-scrollbar-track, .skill-detail-col::-webkit-scrollbar-track {
    background: #110905;
}

/* Slot Picker Popup */
.slot-picker-box {
    width: 380px;
    background: #1c1109;
    border: 2px solid #b45309;
    border-radius: 6px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95);
    font-family: 'Be Vietnam Pro', sans-serif;
}

.slot-picker-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slot-picker-hint {
    font-size: 12px;
    color: #cbd5e1;
    margin: 0;
    text-align: center;
}

.slot-picker-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #180f0a;
}

.slot-picker-tip {
    font-size: 11px;
    color: #cbd5e1;
    margin: 0 0 4px 0;
}

.slot-picker-section-title {
    font-size: 11px;
    font-weight: 800;
    color: #f59e0b;
    border-bottom: 1px dashed rgba(120, 53, 15, 0.6);
    padding-bottom: 3px;
    margin-bottom: 4px;
}

.slot-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.slot-pick-btn, .picker-slot-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 6px 10px;
    background: #20130a;
    border: 1px solid #78350f;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.slot-pick-btn:hover, .picker-slot-btn:hover {
    background: #3a1d0d;
    border-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.slot-pick-key, .picker-slot-key {
    font-size: 11px;
    font-weight: 900;
    color: #38bdf8;
    background: #0f172a;
    padding: 1px 5px;
    border-radius: 3px;
    margin-bottom: 2px;
}

.slot-pick-label, .picker-slot-label {
    font-size: 11px;
    font-weight: 700;
    color: #fef08a;
}

.slot-pick-current {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 2px;
}



/* ================================================================ */
/* REGIONAL MAP MODAL & AUTO-PATHFINDING SYSTEM (BẢN ĐỒ KHU VỰC)    */
/* ================================================================ */
.regionmap-box {
    width: 940px;
    max-width: calc(100% - 16px);
    height: min(540px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    background: linear-gradient(180deg, #1c140e 0%, #0d0906 100%);
    border: 2px solid #855a2b;
    box-shadow: 0 0 35px rgba(0,0,0,0.95), inset 0 0 20px rgba(251,191,36,0.15);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.btn-regionmap-world-toggle:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
}

.regionmap-body {
    display: flex;
    flex: 1;
    min-height: 0;
    background: #0d0906;
    overflow: hidden;
}

/* Cột Trái: Bản Đồ Trực Quan & Radar */
.regionmap-map-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 2px solid #4a341b;
    overflow: hidden;
    min-width: 0;
    background: #080604;
    position: relative;
}

.regionmap-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: rgba(28, 20, 14, 0.9);
    border-bottom: 1px solid #3d2817;
    font-size: 11px;
    gap: 8px;
    flex-wrap: wrap;
}

.regionmap-status-badge {
    background: rgba(6, 95, 70, 0.6);
    border: 1px solid #10b981;
    color: #a7f3d0;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 11px;
}

.regionmap-status-badge.pk {
    background: rgba(127, 29, 29, 0.6);
    border-color: #ef4444;
    color: #fecaca;
}

.regionmap-coords-info {
    font-size: 11px;
    color: #cbd5e1;
}

.regionmap-hint {
    color: #94a3b8;
    font-style: italic;
    font-size: 10.5px;
}

.regionmap-canvas-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #040302;
    cursor: crosshair;
}

#regionmap-canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    image-rendering: pixelated;
}

.regionmap-canvas-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid #f59e0b;
    color: #fef08a;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,0.8);
    z-index: 10;
    transform: translate(-50%, -120%);
    white-space: nowrap;
}

.regionmap-legend {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 5px 10px;
    background: #140e0a;
    border-top: 1px solid #3d2817;
    font-size: 11px;
    color: #cbd5e1;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.dot-player {
    background: #38bdf8;
    border: 2px solid #ffffff;
    box-shadow: 0 0 6px #38bdf8;
}

.dot-npc {
    background: #facc15;
    border: 1px solid #78350f;
}

.dot-monster {
    background: #ef4444;
    border: 1px solid #7f1d1d;
}

.dot-portal {
    background: #c084fc;
    border: 1px solid #581c87;
}

/* Cột Phải: Danh Sách Thực Thể & Tự Tìm Đường */
.regionmap-sidebar {
    width: 330px;
    max-width: 40%;
    display: flex;
    flex-direction: column;
    background: #120d09;
    overflow: hidden;
}

.regionmap-search-bar {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    background: #1c140e;
    border-bottom: 1px solid #3d2817;
    gap: 4px;
}

.regionmap-search-bar input {
    flex: 1;
    background: #080604;
    border: 1px solid #5a3c1c;
    color: #fef08a;
    padding: 4px 8px;
    font-size: 11.5px;
    border-radius: 4px;
    outline: none;
}

.regionmap-search-bar input:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.3);
}

.regionmap-search-bar button {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 12px;
    padding: 2px 6px;
}

.regionmap-tabs {
    display: flex;
    background: #17100b;
    border-bottom: 1px solid #3d2817;
    padding: 2px 4px 0 4px;
    gap: 2px;
}

.regionmap-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #94a3b8;
    padding: 6px 2px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    white-space: nowrap;
}

.regionmap-tab:hover {
    color: #fbbf24;
}

.regionmap-tab.active {
    color: #fef08a;
    border-bottom-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.regionmap-entity-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.regionmap-entity-card {
    background: rgba(28, 20, 14, 0.85);
    border: 1px solid #4a341b;
    border-radius: 5px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.15s ease;
}

.regionmap-entity-card:hover {
    background: rgba(60, 42, 26, 0.95);
    border-color: #f59e0b;
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.entity-info-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1;
}

.entity-badge-icon {
    font-size: 16px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #080604;
    border: 1px solid #5a3c1c;
    border-radius: 4px;
    flex-shrink: 0;
}

.entity-badge-icon.npc {
    border-color: #d97706;
}

.entity-badge-icon.monster {
    border-color: #dc2626;
}

.entity-badge-icon.portal {
    border-color: #9333ea;
}

.entity-texts {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.entity-title-name {
    font-size: 11.5px;
    font-weight: 700;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-sub-detail {
    font-size: 10px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-nav-btn {
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
    border: 1px solid #f59e0b;
    color: #fef08a;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    margin-left: 6px;
}

.entity-nav-btn:hover {
    filter: brightness(1.2);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.regionmap-sidebar-footer {
    padding: 5px 8px;
    background: #17100b;
    border-top: 1px solid #3d2817;
    font-size: 10.5px;
    color: #94a3b8;
    text-align: center;
}

.regionmap-empty-hint {
    padding: 20px 10px;
    text-align: center;
    color: #64748b;
    font-size: 11.5px;
    font-style: italic;
}

@media (max-width: 768px) {
    .regionmap-body {
        flex-direction: column;
    }
    .regionmap-sidebar {
        width: 100%;
        max-width: 100%;
        height: 180px;
        border-top: 2px solid #4a341b;
    }
}

/* ================================================================ */
/* AUTHENTIC WORLD MAP MODAL (437+ MAPS VIEWER & FAST TRAVEL)      */
/* ================================================================ */
.worldmap-box {
    width: 860px;
    max-width: calc(100% - 16px);
    height: min(504px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    background: linear-gradient(180deg, #1c140e 0%, #0d0906 100%);
    border: 2px solid #855a2b;
    box-shadow: 0 0 30px rgba(0,0,0,0.95), inset 0 0 20px rgba(251,191,36,0.15);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Switcher giữa Bản Đồ Trực Quan và Danh Sách */
.worldmap-view-switcher {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid #5a3c1c;
}

.wm-view-toggle {
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s ease;
}

.wm-view-toggle:hover {
    color: #fbbf24;
}

.wm-view-toggle.active {
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
    color: #fef08a;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

/* Khung Bản Đồ Trực Quan (Visual View) */
.worldmap-visual-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #0d0906;
    overflow: hidden;
    position: relative;
}

.worldmap-zone-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.6);
    border-bottom: 1px solid #4a341b;
    flex-wrap: wrap;
}

.wm-zone-title {
    font-size: 11px;
    font-weight: 700;
    color: #fef08a;
    letter-spacing: 0.5px;
}

.wm-zone-btn {
    background: #24160c;
    border: 1px solid #5a3c1c;
    color: #cbd5e1;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wm-zone-btn:hover {
    background: #3d2311;
    color: #fbbf24;
    border-color: #855a2b;
}

.wm-zone-btn.active {
    background: linear-gradient(180deg, #d97706 0%, #92400e 100%);
    color: #fff;
    border-color: #fbbf24;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

.wm-current-loc-badge {
    margin-left: auto;
    font-size: 11px;
    color: #10b981;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid #10b981;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.worldmap-canvas-container {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #1b130c 0%, #080503 100%);
    overflow: hidden;
}

#worldmap-canvas {
    width: 100%;
    height: 100%;
    max-width: 860px;
    max-height: 440px;
    cursor: grab;
    display: block;
}

#worldmap-canvas:active {
    cursor: grabbing;
}

.worldmap-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 50;
    background: rgba(15, 10, 6, 0.94);
    border: 1px solid #fbbf24;
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8), 0 0 10px rgba(251, 191, 36, 0.3);
    color: #e2e8f0;
    font-size: 11px;
    line-height: 1.4;
    min-width: 180px;
    max-width: 260px;
    transform: translate(-50%, -110%);
    backdrop-filter: blur(4px);
    transition: opacity 0.1s ease;
}

.wm-tt-title {
    font-size: 13px;
    font-weight: 700;
    color: #fef08a;
    border-bottom: 1px dashed #78350f;
    padding-bottom: 3px;
    margin-bottom: 4px;
}

.wm-tt-region {
    font-size: 10px;
    color: #38bdf8;
    margin-bottom: 3px;
}

.wm-tt-desc {
    font-size: 10px;
    color: #94a3b8;
    margin-bottom: 5px;
}

.wm-tt-action {
    font-size: 10px;
    font-weight: 700;
    color: #4ade80;
    text-align: right;
}

.worldmap-bottom-bar {
    width: 100%;
    padding: 4px 12px;
    background: rgba(0, 0, 0, 0.7);
    border-top: 1px solid #4a341b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: #94a3b8;
}

.worldmap-legend-items {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.wm-leg-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dot-gold   { background: #fbbf24; box-shadow: 0 0 4px #fbbf24; }
.dot-green  { background: #22c55e; box-shadow: 0 0 4px #22c55e; }
.dot-red    { background: #ef4444; box-shadow: 0 0 4px #ef4444; }
.dot-purple { background: #a855f7; box-shadow: 0 0 4px #a855f7; }
.dot-blue   { background: #06b6d4; box-shadow: 0 0 4px #06b6d4; }

.beacon-mini {
    width: 9px;
    height: 9px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 6px #10b981;
    animation: beaconPulse 1.2s infinite;
}

@keyframes beaconPulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 10px #10b981; }
    100% { transform: scale(0.9); opacity: 0.7; }
}

.wm-hint-text {
    color: #fef08a;
    font-weight: 600;
}

/* Khung Danh Sách Chi Tiết (List View) */
.worldmap-list-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.worldmap-search-bar {
    padding: 8px 14px;
    background: rgba(0,0,0,0.45);
    border-bottom: 1px solid #4a341b;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#worldmap-search-input {
    width: 100%;
    padding: 6px 12px;
    background: #0f0b08;
    border: 1px solid #7c5324;
    border-radius: 4px;
    color: #fef08a;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
}
#worldmap-search-input:focus {
    border-color: #fbbf24;
    box-shadow: 0 0 6px rgba(251,191,36,0.4);
}

.worldmap-region-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.wm-tab-btn {
    background: #24160c;
    border: 1px solid #5a3c1c;
    color: #d1d5db;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.wm-tab-btn:hover {
    background: #3d2311;
    color: #fbbf24;
    border-color: #855a2b;
}
.wm-tab-btn.active {
    background: linear-gradient(180deg, #92400e 0%, #78350f 100%);
    color: #fef08a;
    border-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245,158,11,0.4);
}

.worldmap-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    background: rgba(0,0,0,0.25);
}

.worldmap-card {
    background: linear-gradient(180deg, #241911 0%, #170f0a 100%);
    border: 1px solid #5a3c1c;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.18s ease;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.worldmap-card:hover {
    border-color: #fbbf24;
    box-shadow: 0 3px 10px rgba(251,191,36,0.25);
    transform: translateY(-2px);
    background: linear-gradient(180deg, #2e2016 0%, #1e140d 100%);
}
.worldmap-card.current-map-card {
    border-color: #10b981;
    box-shadow: 0 0 10px rgba(16,185,129,0.3);
}

.wm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 4px;
}

.wm-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #fef08a;
}
.wm-card-cn {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 1px;
}

.wm-card-badge {
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 3px;
    background: #372010;
    color: #fbbf24;
    border: 1px solid #6b431e;
}

.wm-card-meta {
    font-size: 10px;
    color: #cbd5e1;
    margin: 6px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wm-card-portals {
    font-size: 10px;
    color: #38bdf8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wm-card-btn-teleport {
    background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
    border: 1px solid #fbbf24;
    color: #fff;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.wm-card-btn-teleport:hover {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 0 8px rgba(251,191,36,0.6);
}


/* ================================================================ */
/* HÀO KHÍ ĐÔNG A: AUTHENTIC DRAGON GATEWAY & LOGIN SYSTEM          */
/* ================================================================ */

/* Hide gameplay canvas and all HUD when in gateway */
#game-container.in-gateway #gameCanvas,
#game-container.in-gateway #hud-top-left,
#game-container.in-gateway #hud-top-quickmenu,
#game-container.in-gateway #hud-target,
#game-container.in-gateway #hud-top-right,
#game-container.in-gateway #hud-quest-tracker,
#game-container.in-gateway #hud-cast-bar,
#game-container.in-gateway #hud-bottom-left,
#game-container.in-gateway #quick-skills-bar,
#game-container.in-gateway #right-skill-arc,
#game-container.in-gateway #btn-mount,
#game-container.in-gateway #top-marquee-container,
#game-container.in-gateway #hud-right-softkeys {
    display: none !important;
}

/* Modal overlay covering whole game screen with battlefield background */
#auth-modal {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
    background-color: #050201 !important;
    background-image: url('assets/ui/bg_battlefield.jpg') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
}

/* Master Glorious Game Logo: Ẩn trên auth-modal để không đè lên nút Đăng Nhập */
.gateway-master-logo {
    display: none !important;
}

/* Ambient battlefield ember sparks */
.battlefield-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}
.spark {
    position: absolute;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 8px #f97316, 0 0 16px #ea580c;
    opacity: 0.85;
    animation: sparkFly 6s infinite ease-in-out;
}
.spark.s1 { left: 12%; bottom: -10px; width: 3px; height: 3px; animation-duration: 5.5s; animation-delay: 0s; }
.spark.s2 { left: 32%; bottom: -10px; width: 5px; height: 5px; animation-duration: 7s; animation-delay: 1.2s; }
.spark.s3 { left: 55%; bottom: -10px; width: 4px; height: 4px; animation-duration: 6.2s; animation-delay: 2.5s; }
.spark.s4 { left: 78%; bottom: -10px; width: 3px; height: 3px; animation-duration: 8s; animation-delay: 0.8s; }
.spark.s5 { left: 45%; bottom: -10px; width: 6px; height: 6px; animation-duration: 5s; animation-delay: 3.1s; }

@keyframes sparkFly {
    0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
    20% { opacity: 0.95; }
    80% { opacity: 0.75; }
    100% { transform: translate(90px, -560px) scale(1.4); opacity: 0; }
}

/* Gateway Box Container: Ancient Carved Timber & Imperial Gold */
.auth-box {
    position: relative;
    z-index: 10;
    margin-top: 0 !important;
    background: radial-gradient(circle at center, rgba(38, 22, 13, 0.97) 0%, rgba(16, 9, 4, 0.99) 100%);
    border: 3px solid #854d0e;
    box-shadow: 0 0 0 2px #f59e0b, 0 0 0 4px #451a03, 0 14px 45px rgba(0, 0, 0, 0.98), 0 0 30px rgba(245, 158, 11, 0.45), inset 0 0 35px rgba(0, 0, 0, 0.92);
    border-radius: 8px;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    padding: 8px 24px 12px 24px;
    box-sizing: border-box;
    max-height: 94vh !important;
    animation: authBoxAppear 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes authBoxAppear {
    from { transform: scale(0.94); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Screen widths and overflow control */
#screen-login {
    width: 440px !important;
    max-width: 92vw !important;
    max-height: 94vh !important;
    height: auto !important;
    margin: auto !important;
    padding: 24px 20px 12px 20px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
#screen-login .auth-tab-panel {
    flex: none !important;
    height: auto !important;
    background: transparent !important;
    padding: 2px 0 6px 0 !important;
    overflow: visible !important;
}

#screen-server {
    width: 530px;
    max-width: 94vw;
    height: auto !important;
    overflow: visible !important;
}
#screen-server .auth-tab-panel {
    flex: none !important;
    height: auto !important;
    background: transparent !important;
    padding: 4px 0 !important;
    overflow: visible !important;
}

#screen-char-select {
    width: 540px;
    max-width: 94vw;
    height: auto !important;
    overflow: visible !important;
}
#screen-char-create {
    width: 730px;
    max-width: 96vw;
    height: 486px;
    overflow: visible !important;
    padding: 6px 20px 10px 20px;
}
#screen-loading-transition {
    width: 480px;
    max-width: 92vw;
    height: auto !important;
    overflow: visible !important;
}

/* --- DRAGON HEAD ON TOP & DRAGON CLAWS CLUTCHING ONTO BORDERS --- */
.auth-dragon-head {
    position: absolute;
    top: -36px;
    left: 50%;
    transform: translateX(-50%);
    width: 105px;
    height: auto;
    z-index: 50;
    pointer-events: none;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 16px rgba(245, 158, 11, 0.75));
    animation: dragonHeadBreathe 4s infinite ease-in-out;
}

@keyframes dragonHeadBreathe {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 14px rgba(245, 158, 11, 0.65));
    }
    50% {
        transform: translateX(-50%) scale(1.03);
        filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.98)) drop-shadow(0 0 22px rgba(249, 115, 22, 0.95));
    }
}

.auth-dragon-claw-left,
.auth-dragon-claw-right {
    display: none !important;
}

/* Header & Authentic Vietnamese Logo: HÀO KHÍ ĐÔNG A */
.auth-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 4px;
    padding-bottom: 0px;
    position: relative;
    width: 100%;
}
.auth-logo-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.auth-logo-img {
    width: 290px !important;
    max-width: 88% !important;
    height: auto !important;
    max-height: 80px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 18px rgba(245, 158, 11, 0.8)) !important;
}

.gateway-screen-title {
    font-size: 12px;
    font-weight: 800;
    color: #fef08a;
    text-align: center;
    text-shadow: 0 2px 4px #000, 0 0 12px rgba(245, 158, 11, 0.6);
    letter-spacing: 1px;
    margin-top: 2px;
    margin-bottom: 6px;
}

.auth-tab-panel {
    display: flex;
    flex-direction: column;
}

/* Inputs styling */
.input-antique {
    width: 100%;
    background: #0f0b08;
    border: 1.5px solid #78350f;
    color: #fef08a;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.7);
}
.input-antique:focus {
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.5), inset 0 2px 5px rgba(0,0,0,0.7);
}

.login-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 5px !important;
}
.login-form label {
    font-size: 10.5px;
    font-weight: 700;
    color: #d1d5db;
}

.login-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
    font-size: 10.5px;
}
.remember-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #cbd5e1;
    cursor: pointer;
}
.remember-wrap input[type="checkbox"] {
    accent-color: #f59e0b;
    cursor: pointer;
}

/* Antique Buttons */
.login-action-row, .create-action-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 8px !important;
}

.btn-antique-enter {
    background: linear-gradient(180deg, #d97706 0%, #b45309 50%, #78350f 100%);
    border: 1.5px solid #fde047;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    padding: 5px 16px;
    border-radius: 5px;
    cursor: pointer;
    text-shadow: 0 1px 3px #000;
    box-shadow: 0 3px 8px rgba(0,0,0,0.7), inset 0 1px 2px rgba(255,255,255,0.3);
    transition: all 0.15s ease;
}
.btn-antique-enter:hover {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #92400e 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.6);
    transform: translateY(-1px);
}
.btn-antique-enter:active {
    transform: translateY(1px);
}

.btn-antique-cmd {
    background: linear-gradient(180deg, #2e1d13 0%, #1e120b 100%);
    border: 1.5px solid #78350f;
    color: #e2e8f0;
    font-weight: 700;
    font-size: 11px;
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
    text-shadow: 0 1px 2px #000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transition: all 0.15s ease;
}
.btn-antique-cmd:hover {
    border-color: #fbbf24;
    color: #fef08a;
    background: #3d2314;
    box-shadow: 0 0 10px rgba(251,191,36,0.3);
}
/* BALANCED DUAL BUTTONS IN LOGIN SCREEN */
.login-dual-buttons {
    display: flex !important;
    gap: 14px !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.login-dual-buttons #btn-login-submit,
.login-dual-buttons #btn-fast-register {
    flex: 1 !important;
    max-width: 175px !important;
    height: 38px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.login-dual-buttons #btn-login-submit {
    background: linear-gradient(180deg, #d97706 0%, #b45309 50%, #78350f 100%) !important;
    border: 1.5px solid #fde047 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px #000 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}

.login-dual-buttons #btn-login-submit:hover {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #92400e 100%) !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.6) !important;
    transform: translateY(-1px) !important;
}

.login-dual-buttons #btn-fast-register {
    background: linear-gradient(180deg, #382419 0%, #20140d 100%) !important;
    border: 1.5px solid #b45309 !important;
    color: #fef08a !important;
    text-shadow: 0 1px 3px #000 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.15) !important;
}

.login-dual-buttons #btn-fast-register:hover {
    background: linear-gradient(180deg, #4d3324 0%, #2b1b12 100%) !important;
    border-color: #fde047 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.5) !important;
    transform: translateY(-1px) !important;
}


.auth-footer-notice {
    margin-top: 8px;
    padding-top: 5px;
    border-top: 1px solid rgba(120, 53, 15, 0.5);
    text-align: center;
    font-size: 9px;
    color: #a8a29e;
    letter-spacing: 0.5px;
}

/* Values colors */
.val-gold { color: #fef08a; }
.val-cyan { color: #38bdf8; }
.val-green { color: #4ade80; }

/* --- SCREEN 2: SERVER SELECTION STYLING --- */
.server-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}
.server-item {
    background: #1c130b;
    border: 1.5px solid #78350f;
    border-radius: 5px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}
.server-item:hover {
    border-color: #fbbf24;
    background: #2e1d13;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}
.server-item.active {
    border-color: #f59e0b;
    background: linear-gradient(180deg, #382012 0%, #20130b 100%);
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.45), inset 0 0 8px rgba(245, 158, 11, 0.2);
}
.server-status {
    font-size: 12px;
}
.server-details {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.server-name {
    font-size: 12px;
    color: #fef08a;
}
.server-desc {
    font-size: 10px;
    color: #94a3b8;
}
.server-tag {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 700;
}
.tag-new { background: #15803d; color: #bbf7d0; }
.tag-hot { background: #b91c1c; color: #fecaca; }
.tag-good { background: #0369a1; color: #bae6fd; }
.tag-soon { background: #475569; color: #cbd5e1; }

.server-selected-info-box {
    background: rgba(15, 11, 8, 0.85);
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 10.5px;
}
.server-info-line {
    font-size: 10.5px;
    color: #e2e8f0;
    margin-bottom: 2px;
}
.server-info-sub {
    font-size: 9.5px;
    color: #94a3b8;
}

/* --- SCREEN 3A: CHAR SELECTION STYLING --- */
.char-slots-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: #cbd5e1;
    margin-bottom: 6px;
    background: rgba(15, 11, 8, 0.7);
    padding: 4px 8px;
    border-radius: 3px;
}
.char-slots-grid {
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 170px;
    overflow-y: auto;
}
.char-slot-card {
    background: #1c130b;
    border: 1.5px solid #78350f;
    border-radius: 5px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.char-slot-card:hover {
    border-color: #fbbf24;
    background: #2e1d13;
}
.char-slot-card.active {
    border-color: #f59e0b;
    background: linear-gradient(180deg, #382012 0%, #20130b 100%);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}
.char-slot-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid #f59e0b;
    background: #0f172a;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.char-slot-avatar img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.char-slot-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.char-slot-name {
    font-size: 12px;
    font-weight: 700;
    color: #fef08a;
}
.char-slot-details {
    font-size: 9.5px;
    color: #94a3b8;
}

/* --- SCREEN 3B: CHAR CREATION STYLING --- */
.sect-cards-row {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 6px;
}
.sect-card {
    flex: 1;
    background: #1a110a;
    border: 1.5px solid #78350f;
    border-radius: 5px;
    padding: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.15s ease;
}
.sect-card:hover {
    border-color: #fbbf24;
    background: #2b1a0e;
}
.sect-card.active {
    border-color: #f59e0b;
    background: linear-gradient(180deg, #3a2213 0%, #20130b 100%);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}
.sect-badge-frame {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sect-badge-frame img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.sect-name-calligraphy {
    position: absolute;
    width: 30px;
    height: 15px;
    background-image: url('assets/ui/occupationstr.png') !important;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    pointer-events: none;
}
.sect-callig-0 { background-position: 0px 0px; }
.sect-callig-1 { background-position: -30px 0px; }
.sect-callig-2 { background-position: -60px 0px; }
.sect-callig-3 { background-position: -90px 0px; }
.sect-callig-4 { background-position: -120px 0px; }
.sect-callig-5 { background-position: -150px 0px; }

.sect-title {
    font-size: 9.5px;
    font-weight: 700;
    color: #fef08a;
    margin-top: 1px;
}

.create-content-split {
    display: flex;
    gap: 10px;
    background: rgba(15, 11, 8, 0.7);
    border: 1px solid #78350f;
    border-radius: 5px;
    padding: 6px;
}
.create-preview-col {
    width: 155px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.create-pedestal {
    position: relative;
    width: 90px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pedestal-img {
    position: absolute;
    bottom: 0;
    width: 80px;
    opacity: 0.85;
}
#create-char-sprite {
    position: absolute;
    bottom: 8px;
    width: 44px;
    height: 44px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.8));
}
.sect-element-badge {
    font-size: 9.5px;
    font-weight: 700;
    color: #38bdf8;
    margin: 2px 0;
}
.sect-stats-preview {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 9px;
}
.stat-mini-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.stat-mini-row span {
    width: 26px;
    color: #cbd5e1;
}
.stat-mini-row .bar-bg {
    flex: 1;
    height: 4px;
    background: #1e1b18;
    border-radius: 2px;
    overflow: hidden;
}
.stat-mini-row .bar-fg {
    height: 100%;
    border-radius: 2px;
}
.stat-mini-row .bar-fg.fg-gold { background: #f59e0b; }
.stat-mini-row .bar-fg.fg-green { background: #10b981; }
.stat-mini-row .bar-fg.fg-cyan { background: #0ea5e9; }

.create-options-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
}
.sect-desc-text {
    font-size: 10.5px;
    color: #e2e8f0;
    line-height: 1.35;
    font-style: italic;
    background: rgba(0, 0, 0, 0.4);
    padding: 4px 6px;
    border-radius: 4px;
    border-left: 2px solid #f59e0b;
    min-height: 34px;
}
.opt-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.opt-label {
    width: 60px;
    font-size: 10.5px;
    font-weight: 700;
    color: #cbd5e1;
}
.opt-btn-group {
    display: flex;
    gap: 5px;
}
.opt-btn {
    background: #1e130a;
    border: 1px solid #78350f;
    color: #cbd5e1;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.opt-btn:hover {
    border-color: #fbbf24;
    color: #fef08a;
}
.opt-btn.active {
    border-color: #f59e0b;
    background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
    color: #fff;
}
.input-name-wrap {
    display: flex;
    gap: 5px;
    flex: 1;
}
.btn-dice {
    background: #2e1d13;
    border: 1px solid #78350f;
    color: #fef08a;
    padding: 3px 7px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
}
.btn-dice:hover {
    background: #3d2314;
    border-color: #fbbf24;
}

/* --- TRANSITION LOADING SCREEN STYLING --- */
.loading-body-wrap {
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.loading-ornament-top {
    font-size: 11px;
    color: #fbbf24;
    letter-spacing: 4px;
}
.loading-main-title {
    font-size: 11.5px;
    font-weight: 800;
    color: #fef08a;
    text-shadow: 0 1px 3px #000;
    text-align: center;
}
.loading-bar-shell {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}
.loading-bar-track {
    width: 100%;
    height: 16px;
    background: #0f0b08;
    border: 1.5px solid #78350f;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
    position: relative;
}
.loading-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #b45309 0%, #f59e0b 50%, #fde047 100%);
    border-radius: 7px;
    position: relative;
    transition: width 0.08s linear;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.7);
}
.loading-bar-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.45) 50%, transparent 100%);
    animation: barShimmer 1.5s infinite;
}
@keyframes barShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.loading-bar-text {
    position: absolute;
    right: 12px;
    font-size: 10.5px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 3px #000;
}
.loading-tip-container {
    background: rgba(15, 11, 8, 0.8);
    border: 1px dashed #78350f;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 10px;
    color: #cbd5e1;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.tip-badge {
    color: #fbbf24;
    font-weight: 700;
    margin-right: 4px;
}

/* -------------------------------------------------------------
   CLEAN VIETNAMESE HUD LABELS & SOFTKEY STYLES (NO CHINESE)
   ------------------------------------------------------------- */
.top-menu-btn .top-menu-label {
    position: relative;
    z-index: 3;
    font-size: 11px;
    font-weight: 900;
    color: #451a03;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 0 1px #78350f;
    letter-spacing: 0.5px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 6px;
    user-select: none;
}

.mini-chat-icon-txt {
    font-size: 14px;
    display: inline-block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}

.softkey-label-attack {
    display: none !important;
}

.softkey-label {
    display: none !important;
}

.sect-emblem {
    position: absolute;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
}

/* ================================================================ */
/* ENHANCED CHAT SYSTEM: CHAT, VOICE MIC, PLAYER INTERACTION MENU   */
/* ================================================================ */

/* Chat Header Actions (Voice Mute & Settings) */
.modal-header-antique {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-chat-quick-mute {
    font-size: 10.5px !important;
    padding: 2px 7px !important;
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.btn-chat-quick-mute.muted {
    background: #7f1d1d !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}

.btn-chat-quick-settings {
    font-size: 10.5px !important;
    padding: 2px 7px !important;
    background: #78350f !important;
    border-color: #d97706 !important;
    color: #fef08a !important;
    cursor: pointer;
}

/* Chat Mic Button */
.btn-chat-mic {
    background: #b91c1c !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
    font-weight: bold;
    padding: 3px 8px !important;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-chat-mic:hover {
    background: #dc2626 !important;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.btn-chat-mic.recording {
    background: #ea580c !important;
    border-color: #fdba74 !important;
    animation: mic-pulse 0.8s infinite alternate;
}

@keyframes mic-pulse {
    0% { transform: scale(1); box-shadow: 0 0 5px #ea580c; }
    100% { transform: scale(1.06); box-shadow: 0 0 14px #ef4444; }
}

/* Voice Record Panel */
.voice-record-panel {
    background: linear-gradient(180deg, #2b1104 0%, #150802 100%);
    border: 2px solid #ea580c;
    border-radius: 6px;
    margin: 6px 8px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 4px 18px rgba(234, 88, 12, 0.35);
}

.voice-record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.voice-record-status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.recording-dot {
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
    display: inline-block;
    animation: pulse-dot 0.8s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.25); }
}

.record-title {
    font-size: 11px;
    font-weight: bold;
    color: #fef08a;
    letter-spacing: 0.5px;
}

.record-timer {
    font-size: 12px;
    font-weight: bold;
    color: #f87171;
    font-family: monospace;
    background: #000;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid #78350f;
}

.voice-type-selector {
    display: flex;
    gap: 8px;
}

.voice-type-label {
    font-size: 10.5px;
    color: #e2e8f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
}

.voice-type-label input {
    accent-color: #f97316;
}

/* Waveform Visualizer */
.voice-waveform-preview {
    height: 28px;
    background: #090503;
    border: 1px solid #78350f;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 0 8px;
}

.wave-bar {
    width: 4px;
    background: #f97316;
    border-radius: 2px;
    height: 6px;
    animation: wave-bounce 0.8s ease-in-out infinite alternate;
}

.wave-bar.wb1  { animation-delay: 0.05s; }
.wave-bar.wb2  { animation-delay: 0.15s; }
.wave-bar.wb3  { animation-delay: 0.25s; }
.wave-bar.wb4  { animation-delay: 0.10s; }
.wave-bar.wb5  { animation-delay: 0.35s; }
.wave-bar.wb6  { animation-delay: 0.45s; }
.wave-bar.wb7  { animation-delay: 0.20s; }
.wave-bar.wb8  { animation-delay: 0.55s; }
.wave-bar.wb9  { animation-delay: 0.30s; }
.wave-bar.wb10 { animation-delay: 0.65s; }
.wave-bar.wb11 { animation-delay: 0.15s; }
.wave-bar.wb12 { animation-delay: 0.40s; }
.wave-bar.wb13 { animation-delay: 0.50s; }
.wave-bar.wb14 { animation-delay: 0.25s; }
.wave-bar.wb15 { animation-delay: 0.60s; }
.wave-bar.wb16 { animation-delay: 0.10s; }

@keyframes wave-bounce {
    0%   { height: 4px; background: #ea580c; }
    50%  { height: 22px; background: #facc15; }
    100% { height: 8px; background: #ef4444; }
}

.voice-record-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Chat Voice Messages in Chat History */
.chat-voice-bubble {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #3d1404 0%, #200b02 100%);
    border: 1px solid #b45309;
    border-radius: 12px;
    padding: 3px 10px;
    margin: 2px 0;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    vertical-align: middle;
}

.chat-voice-bubble:hover {
    border-color: #facc15;
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.4);
    background: linear-gradient(135deg, #571e06 0%, #2d1003 100%);
}

.chat-voice-bubble.playing {
    border-color: #38bdf8;
    background: linear-gradient(135deg, #0c4a6e 0%, #082f49 100%);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

.voice-play-icon {
    font-size: 11px;
}

.voice-duration {
    font-size: 10px;
    font-family: monospace;
    color: #fef08a;
    font-weight: bold;
}

.voice-tag {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 6px;
    font-weight: bold;
}

.voice-tag.cmd {
    background: #b91c1c;
    color: #ffffff;
    border: 1px solid #ef4444;
}

.voice-tag.song {
    background: #6b21a8;
    color: #f3e8ff;
    border: 1px solid #c084fc;
}

.voice-tag.talk {
    background: #0369a1;
    color: #e0f2fe;
    border: 1px solid #38bdf8;
}

.voice-muted-badge {
    font-size: 9px;
    color: #ef4444;
    font-style: italic;
    margin-left: 2px;
}

.voice-mini-bars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 12px;
}

.voice-mini-bar {
    width: 2px;
    background: #fef08a;
    border-radius: 1px;
}

.chat-voice-bubble.playing .voice-mini-bar {
    animation: mini-wave 0.6s infinite alternate;
}

@keyframes mini-wave {
    0%   { height: 3px; }
    100% { height: 12px; }
}

/* Clickable Sender Name in Chat */
.chat-sender-name {
    color: #fef08a;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    padding: 0 2px;
    border-radius: 2px;
    transition: all 0.1s ease;
}

.chat-sender-name:hover {
    color: #ffffff;
    background: rgba(234, 179, 8, 0.25);
    text-decoration: underline;
    box-shadow: 0 0 6px rgba(250, 204, 21, 0.4);
}

/* PLAYER CONTEXT MENU */
.player-context-menu {
    position: fixed;
    z-index: 99999;
    background: #190c05;
    border: 2px solid #d97706;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.95), 0 0 14px rgba(217, 119, 6, 0.35);
    min-width: 200px;
    overflow: hidden;
    user-select: none;
    animation: menu-pop 0.15s ease-out;
}

@keyframes menu-pop {
    0%   { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.context-menu-header {
    background: linear-gradient(90deg, #3d1504 0%, #220b02 100%);
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #78350f;
}

.context-avatar-icon {
    font-size: 15px;
}

.context-user-info {
    flex: 1;
}

.context-name {
    font-size: 11.5px;
    font-weight: bold;
    color: #fef08a;
    display: block;
}

.context-title {
    font-size: 9px;
    color: #cbd5e1;
    display: block;
}

.ctx-close-btn {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    padding: 0 2px;
}

.ctx-close-btn:hover {
    color: #ef4444;
}

.context-menu-list {
    display: flex;
    flex-direction: column;
    padding: 4px;
    gap: 2px;
}

.ctx-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: #f1f5f9;
    padding: 5px 8px;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.1s ease;
}

.ctx-btn:hover {
    background: #78350f;
    color: #fef08a;
}

.ctx-btn.ctx-btn-danger:hover {
    background: #7f1d1d;
    color: #fca5a5;
}

.ctx-btn.disabled-perm {
    opacity: 0.45;
    cursor: not-allowed;
}

.ctx-btn.disabled-perm:hover {
    background: transparent;
    color: #94a3b8;
}

.ctx-perm-badge {
    margin-left: auto;
    font-size: 8.5px;
    padding: 1px 5px;
    border-radius: 3px;
    background: #451a03;
    border: 1px solid #78350f;
    color: #fdba74;
}

.ctx-perm-badge.no-perm {
    background: #334155;
    border-color: #64748b;
    color: #cbd5e1;
}

/* CHARACTER INSPECT MODAL */
.char-inspect-box {
    width: 640px;
    max-width: 96vw;
    max-height: calc(100% - 16px);
    background: #180d06;
    border: 2px solid #b45309;
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.92);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.inspect-hero-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(90deg, #2b1104 0%, #150802 100%);
    border-bottom: 1px solid #78350f;
}

.inspect-hero-avatar img {
    width: 46px;
    height: 46px;
    border-radius: 6px;
    border: 2px solid #d97706;
    background: #000;
}

.inspect-hero-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inspect-name {
    font-size: 14px;
    font-weight: bold;
    color: #fef08a;
    text-shadow: 0 1px 3px #000;
}

.badge-sect {
    font-size: 10px;
    background: #065f46;
    color: #6ee7b7;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #059669;
}

.badge-level {
    font-size: 10px;
    background: #1e3a8a;
    color: #93c5fd;
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid #2563eb;
}

.inspect-hero-sub {
    font-size: 10.5px;
    color: #cbd5e1;
    margin-top: 4px;
    display: flex;
    gap: 14px;
}

.inspect-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 12px;
    background: #210d03;
    border-bottom: 1px solid #78350f;
}

.inspect-tab {
    background: #451a03;
    border: 1px solid #78350f;
    color: #d1d5db;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.1s ease;
}

.inspect-tab.active {
    background: #b45309;
    color: #fef08a;
    border-color: #f59e0b;
}

.inspect-tab-content {
    padding: 10px 12px;
    flex: 1;
    min-height: 0;
    max-height: 310px;
    overflow-y: auto;
}

/* Inspect Tab 1: Equipment */
.inspect-equip-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.inspect-doll-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 64px;
}

.inspect-slot {
    width: 54px;
    height: 54px;
    background: url('assets/ui/iconbox0.png') no-repeat center / contain, #1f1107;
    border: 1px solid #78350f;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.1s ease;
}

.inspect-slot img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.inspect-slot:hover {
    border-color: #facc15;
    box-shadow: 0 0 8px #d97706;
}

.ins-slot-name {
    font-size: 8.5px;
    color: #94a3b8;
    text-shadow: 0 1px 2px #000;
}

.inspect-doll-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.inspect-figure-frame {
    width: 150px;
    height: 180px;
    background: radial-gradient(circle, rgba(180,83,9,0.25) 0%, rgba(15,10,6,0.92) 75%);
    border: 1px solid #78350f;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.inspect-figure-frame img {
    width: 64px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
}

.inspect-sect-crest {
    position: absolute;
    bottom: 6px;
    font-size: 9.5px;
    font-weight: bold;
    color: #fdba74;
    letter-spacing: 0.5px;
}

.inspect-attr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 10px;
    width: 90%;
    background: #120904;
    padding: 6px 10px;
    border: 1px solid #451a03;
    border-radius: 4px;
    font-size: 10.5px;
    color: #cbd5e1;
}

/* Inspect Tab 2: Pet */
.inspect-pet-box {
    display: flex;
    gap: 14px;
}

.inspect-pet-left {
    width: 180px;
    text-align: center;
    background: #140a04;
    padding: 10px;
    border: 1px solid #78350f;
    border-radius: 6px;
}

.inspect-pet-avatar img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.8));
}

.badge-pet-quality {
    display: inline-block;
    font-size: 9.5px;
    padding: 2px 8px;
    border-radius: 10px;
    background: #b45309;
    color: #fef08a;
    margin-top: 4px;
    font-weight: bold;
}

.inspect-pet-sub {
    font-size: 10px;
    color: #cbd5e1;
    margin-top: 4px;
}

.inspect-pet-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pet-attr-card, .pet-skills-card {
    background: #140a04;
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 8px 10px;
}

.pet-attr-title {
    font-size: 11px;
    font-weight: bold;
    color: #fef08a;
    border-bottom: 1px solid #451a03;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.pet-attr-row {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: #cbd5e1;
    margin-bottom: 3px;
}

.pet-skill-item {
    display: flex;
    gap: 8px;
    font-size: 10.5px;
    margin-bottom: 6px;
    align-items: flex-start;
}

.pet-sk-icon {
    font-size: 16px;
}

.pet-sk-name {
    font-weight: bold;
    color: #38bdf8;
}

.pet-sk-desc {
    font-size: 9.5px;
    color: #94a3b8;
    line-height: 1.3;
}

/* Inspect Tab 3: Meridian */
.inspect-meridian-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.meridian-overview {
    background: #140a04;
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 8px 10px;
}

.meridian-heading {
    font-weight: bold;
    color: #fef08a;
    font-size: 11.5px;
}

.meridian-tuvi {
    font-size: 11px;
    color: #cbd5e1;
    float: right;
}

.meridian-subtext {
    font-size: 10px;
    color: #94a3b8;
    margin: 4px 0 0 0;
}

.meridian-grid-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}

.meridian-card {
    background: #170d05;
    border: 1px solid #451a03;
    border-radius: 6px;
    padding: 6px 10px;
}

.meridian-card.unlocked {
    border-color: #b45309;
    background: #201006;
}

.meridian-card-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: bold;
    color: #fde047;
    margin-bottom: 4px;
}

.badge-meridian-stat {
    font-size: 9.5px;
    color: #4ade80;
}

.meridian-nodes-bar {
    font-size: 9.5px;
    color: #78350f;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.meridian-nodes-bar .node.active {
    color: #fef08a;
    background: #78350f;
    padding: 1px 5px;
    border-radius: 2px;
}

.meridian-nodes-bar .node.locked {
    color: #64748b;
    background: #0f172a;
    padding: 1px 5px;
    border-radius: 2px;
}

/* TRADE MODAL */
.trade-box {
    width: 520px;
    max-width: 95vw;
    max-height: calc(100% - 16px);
    background: #1a0f08;
    border: 2px solid #b45309;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.trade-body {
    display: flex;
    gap: 10px;
    padding: 12px;
    align-items: center;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.trade-side {
    flex: 1;
    background: #120904;
    border: 1px solid #451a03;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trade-side-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: bold;
}

.trade-role-tag {
    color: #fef08a;
}

.trade-status {
    font-size: 10px;
    color: #38bdf8;
}

.trade-money-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10.5px;
    color: #cbd5e1;
}

.trade-money-row input {
    width: 90px;
    font-size: 10.5px;
    padding: 2px 4px;
}

.trade-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.trade-slot {
    width: 46px;
    height: 46px;
    background: #1f1107;
    border: 1px solid #78350f;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.trade-slot.empty {
    border-style: dashed;
    border-color: #451a03;
}

.trade-slot img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.trade-slot-count {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 9px;
    font-weight: bold;
    color: #fef08a;
    text-shadow: 0 1px 2px #000;
}

.trade-divider {
    font-size: 20px;
    font-weight: bold;
    color: #f59e0b;
}

/* VOICE SETTINGS MODAL */
.voice-settings-box {
    width: 520px;
    max-width: 96vw;
    max-height: calc(100% - 16px);
    background: #180d06;
    border: 2px solid #b45309;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.voice-settings-body {
    flex: 1;
    min-height: 0;
    max-height: calc(540px - 140px);
    overflow-y: auto;
    padding: 10px 12px;
}

.setting-group {
    background: #140a04;
    border: 1px solid #451a03;
    border-radius: 6px;
    padding: 10px;
}

.setting-title {
    font-size: 11.5px;
    font-weight: bold;
    color: #fef08a;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #2b1104;
    padding-bottom: 4px;
}

.setting-row {
    margin-bottom: 8px;
    font-size: 11px;
    color: #cbd5e1;
}

.setting-row.flex-row {
    display: flex;
    gap: 12px;
}

.setting-row.flex-row label {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.setting-desc {
    display: block;
    font-size: 9.5px;
    color: #94a3b8;
    margin-left: 24px;
    margin-top: 2px;
}

.setting-slider-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-tip {
    font-size: 9.5px;
    color: #f59e0b;
    margin: 6px 0 0 0;
    font-style: italic;
}

.blocked-list {
    min-height: 40px;
    max-height: 90px;
    overflow-y: auto;
    background: #0c0602;
    border: 1px solid #291205;
    border-radius: 4px;
    padding: 6px;
    font-size: 10.5px;
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.blocked-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1c0e07;
    padding: 3px 6px;
    border-radius: 3px;
    border: 1px solid #451a03;
}

.btn-unblock {
    background: #78350f;
    border: 1px solid #d97706;
    color: #fef08a;
    padding: 1px 6px;
    border-radius: 2px;
    font-size: 9.5px;
    cursor: pointer;
}

/* ================================================================
   HỆ THỐNG TỔ ĐỘI HÀO KHÍ ĐÔNG A (TEAM / PARTY SYSTEM STYLES)
   ================================================================ */
.hud-team-gear-btn {
    font-size: 10px;
    cursor: pointer;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8));
    transition: transform 0.15s ease;
}

.hud-team-gear-btn:hover {
    transform: rotate(30deg) scale(1.15);
}

.team-modal-box {
    width: 95%;
    max-width: 580px;
    background: linear-gradient(180deg, #1c0f08 0%, #120904 100%);
    border: 2px solid #b45309;
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.85), inset 0 0 15px rgba(180, 83, 9, 0.25);
    padding: 12px 16px 16px;
    color: #f1f5f9;
}

.team-tabs-bar {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #78350f;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.team-tab-btn {
    background: #2b1307;
    border: 1px solid #78350f;
    border-radius: 4px;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    padding: 5px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.team-tab-btn:hover {
    background: #451a03;
    color: #fef08a;
    border-color: #d97706;
}

.team-tab-btn.active {
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
    border-color: #f59e0b;
    color: #fff;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.team-members-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.team-slot-card {
    background: rgba(22, 12, 6, 0.95);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
    position: relative;
    transition: border-color 0.15s;
}

.team-slot-card:hover {
    border-color: #d97706;
}

.team-slot-card.is-leader {
    border-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.25), inset 0 0 10px rgba(0, 0, 0, 0.6);
}

.team-slot-card.is-empty {
    border: 1.5px dashed #522507;
    background: rgba(14, 8, 4, 0.6);
    align-items: center;
    justify-content: center;
    min-height: 100px;
    cursor: pointer;
    color: #94a3b8;
    text-align: center;
}

.team-slot-card.is-empty:hover {
    border-color: #d97706;
    color: #fef08a;
    background: rgba(30, 16, 8, 0.8);
}

.slot-empty-icon {
    font-size: 24px;
    margin-bottom: 2px;
    opacity: 0.7;
}

.slot-empty-text {
    font-size: 11px;
    font-weight: 700;
}

.team-slot-main {
    display: flex;
    gap: 8px;
    align-items: center;
}

.team-slot-avatar-wrap {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.team-slot-avatar {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    border: 1px solid #d97706;
    background: #0f172a;
    object-fit: cover;
    image-rendering: pixelated;
}

.team-slot-crown {
    position: absolute;
    top: -5px;
    left: -4px;
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 1px 2px #000);
}

.team-slot-info {
    flex: 1;
    min-width: 0;
}

.team-slot-name-row {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-slot-name {
    font-size: 11px;
    font-weight: 800;
    color: #fef08a;
}

.team-slot-badge-leader {
    font-size: 8.5px;
    background: #b45309;
    color: #fff;
    padding: 0 4px;
    border-radius: 2px;
    font-weight: 800;
}

.team-slot-meta {
    font-size: 9.5px;
    color: #38bdf8;
    margin-top: 1px;
}

.team-slot-map {
    font-size: 9px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.team-slot-bars {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.team-bar-wrap {
    height: 5px;
    background: #0f172a;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    border: 0.5px solid #334155;
}

.team-bar-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #f87171);
    transition: width 0.2s ease;
}

.team-bar-mp-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #38bdf8);
    transition: width 0.2s ease;
}

.team-slot-actions {
    display: flex;
    gap: 4px;
    margin-top: 2px;
    flex-wrap: wrap;
}

.btn-slot-cmd {
    background: #2b1307;
    border: 1px solid #78350f;
    color: #e2e8f0;
    font-size: 9.5px;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
}

.btn-slot-cmd:hover {
    background: #451a03;
    border-color: #d97706;
    color: #fef08a;
}

.btn-slot-cmd.tele {
    color: #38bdf8;
    border-color: #0284c7;
}

.btn-slot-cmd.tele:hover {
    background: #0369a1;
    color: #fff;
}

.btn-slot-cmd.danger {
    color: #fca5a5;
    border-color: #991b1b;
}

.btn-slot-cmd.danger:hover {
    background: #7f1d1d;
    color: #fff;
}

.team-options-panel {
    background: #0c0602;
    border: 1px solid #451a03;
    border-radius: 6px;
    padding: 8px 10px;
    margin-top: 6px;
}

.team-opt-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.team-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #cbd5e1;
    cursor: pointer;
}

.team-checkbox-label input[type="checkbox"] {
    accent-color: #d97706;
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.team-action-bar {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* TAB 2: RECRUIT LIST */
.recruit-input-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.recruit-input-row input {
    flex: 1;
}

.recruit-list-header {
    font-size: 10px;
    font-weight: 800;
    color: #f59e0b;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.recruit-list {
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recruit-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #180f08;
    border: 1px solid #78350f;
    border-radius: 5px;
    padding: 6px 8px;
    transition: all 0.12s;
}

.recruit-card:hover {
    background: #2b1307;
    border-color: #d97706;
}

.recruit-card-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.recruit-card-avatar {
    width: 32px;
    height: 32px;
    border-radius: 3px;
    border: 1px solid #d97706;
    background: #0f172a;
    image-rendering: pixelated;
}

.recruit-card-info {
    min-width: 0;
}

.recruit-card-name {
    font-size: 11px;
    font-weight: 800;
    color: #fef08a;
}

.recruit-card-sect {
    font-size: 9.5px;
    color: #38bdf8;
}

.recruit-card-desc {
    font-size: 8.5px;
    color: #94a3b8;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* TEAM INVITE PROMPT MODAL */
.team-invite-box {
    width: 90%;
    max-width: 360px;
    background: linear-gradient(180deg, #1c0f08 0%, #120904 100%);
    border: 2px solid #d97706;
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.9), 0 0 15px rgba(217, 119, 6, 0.4);
    padding: 12px 14px;
}

.team-invite-body {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 10px 0;
}

.team-invite-avatar-wrap img {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    border: 1px solid #f59e0b;
    background: #0f172a;
    image-rendering: pixelated;
}

.team-invite-info {
    flex: 1;
}

.team-invite-name {
    font-size: 12px;
    font-weight: 800;
    color: #fef08a;
}

.team-invite-sub {
    font-size: 10px;
    color: #38bdf8;
    margin-bottom: 2px;
}

.team-invite-desc {
    font-size: 9.5px;
    color: #cbd5e1;
}

.team-invite-timer-bar {
    height: 4px;
    background: #0f172a;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
    border: 0.5px solid #334155;
}

.team-invite-timer-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #f59e0b, #eab308);
    transition: width 0.1s linear;
}

.team-invite-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 10px;
}

/* FLOATING FOLLOW STATUS BADGE */
.follow-status-badge {
    position: fixed;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(15, 23, 42, 0.92);
    border: 1px solid #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 11px;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 250;
    animation: pulseTealGlow 2s infinite;
    pointer-events: auto;
}

@keyframes pulseTealGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(56, 189, 248, 0.35); }
    50% { box-shadow: 0 0 15px rgba(56, 189, 248, 0.7); }
}

.btn-cancel-follow {
    background: #991b1b;
    border: 1px solid #ef4444;
    color: #fff;
    border-radius: 12px;
    padding: 1px 8px;
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.12s;
}

.btn-cancel-follow:hover {
    background: #dc2626;
}

/* ================================================================
   AUTHENTIC PET MANAGEMENT MODAL STYLES (HỆ THỐNG LINH THÚ THỜI TRẦN)
   ================================================================ */
.pet-modal-box {
    width: 880px;
    max-width: 96vw;
    height: 550px;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    background: #090e1a;
    border: 2px solid #b45309;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.95), inset 0 0 24px rgba(180, 83, 9, 0.2);
    overflow: hidden;
    user-select: none;
    font-family: 'Be Vietnam Pro', sans-serif;
    animation: zoomModal 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pet-modal-body {
    display: flex;
    flex: 1;
    min-height: 0;
    gap: 10px;
    padding: 10px;
    background: rgba(9, 14, 26, 0.98);
}

.pet-col {
    border-radius: 7px;
    background: rgba(19, 27, 44, 0.75);
    border: 1px solid rgba(202, 138, 4, 0.3);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    padding: 8px;
    min-height: 0;
}

.pet-col-list {
    width: 215px;
    flex-shrink: 0;
}

.pet-col-center {
    width: 335px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.pet-col-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}

.pet-panel-header {
    font-size: 11px;
    font-weight: 700;
    color: #fbbf24;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(202, 138, 4, 0.3);
    margin-bottom: 6px;
}

.pet-list-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-right: 2px;
}

.pet-list-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
    border-radius: 5px;
    margin-bottom: 4px;
    cursor: pointer;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.18);
    transition: all 0.15s;
}

.pet-list-item:hover {
    background: rgba(30, 41, 59, 0.9);
    border-color: rgba(250, 204, 21, 0.5);
    transform: translateX(2px);
}

.pet-list-item.active {
    border-color: #facc15;
    background: rgba(234, 179, 8, 0.16);
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.3), inset 0 0 6px rgba(250, 204, 21, 0.15);
}

.pet-item-icon {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(202, 138, 4, 0.4);
    flex-shrink: 0;
}

.pet-item-info {
    flex: 1;
    font-size: 11px;
    line-height: 1.25;
    min-width: 0;
}

.pet-item-name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pet-item-sub {
    font-size: 9px;
    color: #94a3b8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1px;
}

.pet-badge-active {
    background: #059669;
    color: #ecfdf5;
    font-size: 8px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 3px;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.pet-list-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.btn-pet-action {
    flex: 1;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.btn-hatch {
    background: linear-gradient(135deg, #9a3412, #c2410c);
    border: 1px solid #ea580c;
    color: #ffedd5;
}
.btn-hatch:hover { background: #ea580c; box-shadow: 0 0 8px rgba(234, 88, 12, 0.4); }

.btn-active {
    background: linear-gradient(135deg, #065f46, #047857);
    border: 1px solid #10b981;
    color: #ecfdf5;
}
.btn-active:hover { background: #059669; box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); }

/* Cột giữa: Center Doll & Horizontal Equipment */
.pet-center-header {
    width: 100%;
    text-align: center;
}

.pet-name-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pet-name-row h3 {
    margin: 0;
    font-size: 15px;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.badge-reincarnation {
    font-size: 9px;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(180, 83, 9, 0.35);
    border: 1px solid #d97706;
    border-radius: 4px;
    padding: 1px 5px;
}

.pet-system-tag {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 2px;
}

.pet-stage-frame {
    position: relative;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, rgba(234, 179, 8, 0.22) 0%, rgba(15, 23, 42, 0.85) 70%);
    border: 1.5px solid rgba(234, 179, 8, 0.4);
    border-radius: 50%;
    margin: 2px 0;
    box-shadow: 0 0 20px rgba(0,0,0,0.6), inset 0 0 15px rgba(234, 179, 8, 0.15);
}

.pet-stage-avatar {
    width: 80px;
    height: 80px;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.7));
    z-index: 2;
}

.pet-aura-ring {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px dashed #f59e0b;
    animation: rotateAura 6s linear infinite;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
    z-index: 1;
}

@keyframes rotateAura {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.pet-level-exp-box {
    width: 100%;
}

.pet-level-row {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    margin-bottom: 2px;
}

.pet-exp-bar {
    width: 100%;
    height: 7px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 4px;
    overflow: hidden;
}

.pet-exp-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #34d399);
    transition: width 0.2s;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

/* =============================================================
   HÀNG Ô TRANG BỊ LINH THÚ XẾP NGANG (PET EQUIPMENT ROW)
   ============================================================= */
.pet-equip-section {
    width: 100%;
    margin-top: 2px;
}

.pet-equip-title {
    font-size: 10px;
    font-weight: 700;
    color: #fbbf24;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding: 0 2px;
}

.badge-req-50 {
    font-size: 8.5px;
    color: #f87171;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 3px;
    padding: 1px 5px;
}
.badge-req-50.unlocked {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.4);
}

/* KHUNG CHỨA 5 Ô TRANG BỊ NẰM NGANG */
.pet-equip-slots-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 6px 4px !important;
    background: rgba(15, 23, 42, 0.7) !important;
    border: 1px solid rgba(202, 138, 4, 0.3) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.pet-eq-slot {
    width: 48px !important;
    height: 48px !important;
    background: radial-gradient(circle at center, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    border: 1.5px solid rgba(202, 138, 4, 0.45) !important;
    border-radius: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative !important;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.6) !important;
    flex-shrink: 0 !important;
}

.pet-eq-slot:hover {
    border-color: #facc15 !important;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.5), inset 0 0 8px rgba(250, 204, 21, 0.2) !important;
    transform: translateY(-2px) !important;
}

.pet-eq-slot.equipped {
    border-color: #f59e0b !important;
    background: radial-gradient(circle at center, rgba(60, 40, 15, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.35) !important;
}

.pet-eq-slot img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain !important;
    image-rendering: pixelated !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8)) !important;
}

.pet-eq-placeholder {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.pet-eq-slot-label {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    color: #facc15 !important;
    background: rgba(15, 23, 42, 0.9) !important;
    padding: 0 3px !important;
    border-top-left-radius: 4px !important;
    pointer-events: none !important;
    border-left: 1px solid rgba(202, 138, 4, 0.3) !important;
    border-top: 1px solid rgba(202, 138, 4, 0.3) !important;
}

.pet-center-actions {
    display: flex;
    gap: 6px;
    width: 100%;
    margin-top: 4px;
}

.btn-pet-subaction {
    flex: 1;
    font-size: 9.5px;
    font-weight: 700;
    padding: 6px 4px;
    border-radius: 4px;
    cursor: pointer;
    background: #334155;
    border: 1px solid #64748b;
    color: #f1f5f9;
    transition: all 0.12s;
    text-align: center;
}
.btn-pet-subaction:hover { background: #475569; }

.btn-reincarnate {
    background: linear-gradient(135deg, #7c2d12, #b45309);
    border: 1px solid #f97316;
    color: #ffedd5;
}
.btn-reincarnate:hover { background: #c2410c; }
.btn-reincarnate.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.7);
}

/* =============================================================
   CỘT PHẢI: THUỘC TÍNH, LĨNH NGỘ & TUYỆT KỸ KHOA HỌC
   ============================================================= */
.pet-subcard {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(202, 138, 4, 0.28);
    border-radius: 6px;
    padding: 6px 8px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}

.pet-card-title {
    font-size: 10px;
    font-weight: 700;
    color: #fbbf24;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

/* LƯỚI THUỘC TÍNH 2x2 CÓ ICON KHOA HỌC */
.pet-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.pet-stat-cell {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 5px;
    padding: 4px 6px;
}

.pet-stat-icon {
    font-size: 13px;
    flex-shrink: 0;
}

.pet-stat-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}

.pet-stat-name {
    font-size: 8.5px;
    color: #94a3b8;
}

.pet-stat-text b {
    font-size: 11px;
}

/* LĨNH NGỘ LINH TRÍ */
.pet-stars-row {
    font-size: 16px;
    letter-spacing: 4px;
    color: #facc15;
    text-align: center;
    margin: 2px 0;
    text-shadow: 0 0 8px rgba(250, 204, 21, 0.4);
}

.pet-comp-upgrade-box {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 4px;
    padding: 4px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.pet-rate-info {
    font-size: 9px;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.btn-pet-upgrade {
    background: linear-gradient(135deg, #065f46, #047857);
    border: 1px solid #10b981;
    color: #ecfdf5;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-pet-upgrade:hover {
    background: #059669;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.pet-rule-note {
    font-size: 8px;
    color: #94a3b8;
    margin-top: 3px;
    line-height: 1.25;
}

/* TUYỆT KỸ THẦN THÚ */
.pet-skills-card-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin-bottom: 0;
}

.pet-skills-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-right: 2px;
}

.pet-skill-slot {
    display: flex;
    gap: 6px;
    align-items: center;
    background: rgba(30, 41, 59, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 5px;
    padding: 4px 6px;
    margin-bottom: 3px;
    transition: all 0.15s;
}
.pet-skill-slot:hover {
    background: rgba(30, 41, 59, 0.85);
    border-color: rgba(250, 204, 21, 0.4);
}

.pet-skill-slot.locked {
    opacity: 0.5;
    border-style: dashed;
}

.pet-skill-icon {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    object-fit: contain;
    image-rendering: pixelated;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #ca8a04;
    flex-shrink: 0;
}

.pet-skill-slot.locked .pet-skill-icon {
    border-color: #64748b;
    filter: grayscale(1);
}

.pet-sk-text {
    flex: 1;
    font-size: 9px;
    line-height: 1.25;
    min-width: 0;
}

.pet-sk-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pet-sk-title {
    font-weight: 700;
    color: #fef08a;
}

.pet-badge-10 {
    font-size: 8px;
    font-weight: 700;
    background: #7e22ce;
    color: #f3e8ff;
    border-radius: 2px;
    padding: 1px 4px;
}

.pet-sk-desc {
    color: #94a3b8;
    font-size: 8.5px;
    margin-top: 1px;
}

/* =============================================================
   HỆ THỐNG THÚ CƯỠI - CHIẾN MÃ ĐÔNG A (MOUNT MODAL & EQUIPMENT)
   ============================================================= */
.mount-modal-box {
    width: 660px;
    max-width: 95vw;
    height: min(510px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    background: #180f0a;
    border: 2px solid #b45309;
    border-radius: 8px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.95), inset 0 0 15px rgba(180, 83, 9, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    font-family: 'Be Vietnam Pro', sans-serif;
    animation: zoomModal 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mount-modal-body {
    display: flex;
    gap: 14px;
    padding: 10px 14px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background: rgba(18, 10, 6, 0.96);
}

.mount-stage-column {
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.mount-stage-frame {
    background: radial-gradient(circle at center, #2e160a 0%, #160a04 100%);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}

.mount-badge-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 8px;
}

.mount-rarity-pill.gold {
    background: linear-gradient(135deg, #78350f, #b45309);
    border: 1px solid #f59e0b;
    color: #fef08a;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    text-shadow: 0 1px 2px #000;
}

.mount-sect-mode {
    font-size: 10px;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid #0284c7;
    padding: 2px 7px;
    border-radius: 10px;
}

.mount-display-area {
    position: relative;
    width: 220px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.mount-vfx-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 220px;
    height: 140px;
    z-index: 1;
    pointer-events: none;
}

.mount-anim-canvas {
    position: relative;
    z-index: 2;
    width: 220px;
    height: 140px;
    image-rendering: auto;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.75));
}

.mount-sprite-preview {
    position: relative;
    z-index: 2;
    width: 175px;
    height: auto;
    max-height: 125px;
    object-fit: contain;
    image-rendering: pixelated;
    animation: mountBob 2.2s infinite ease-in-out;
    transition: filter 0.3s ease;
}

/* Elemental Dynamic Aura Glows for mount-sprite-preview */
.mount-display-area.vfx-fire .mount-sprite-preview {
    filter: drop-shadow(0 0 12px rgba(239, 68, 68, 0.9)) drop-shadow(0 0 24px rgba(249, 115, 22, 0.6)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.95));
}
.mount-display-area.vfx-ice .mount-sprite-preview {
    filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.9)) drop-shadow(0 0 24px rgba(186, 230, 253, 0.6)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.95));
}
.mount-display-area.vfx-lightning .mount-sprite-preview {
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.9)) drop-shadow(0 0 24px rgba(192, 132, 252, 0.6)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.95));
}
.mount-display-area.vfx-wind .mount-sprite-preview {
    filter: drop-shadow(0 0 12px rgba(52, 211, 153, 0.9)) drop-shadow(0 0 24px rgba(110, 231, 183, 0.6)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.95));
}
.mount-display-area.vfx-gold .mount-sprite-preview,
.mount-display-area.vfx-holy .mount-sprite-preview {
    filter: drop-shadow(0 0 14px rgba(250, 204, 21, 0.95)) drop-shadow(0 0 26px rgba(254, 240, 138, 0.7)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.95));
}
.mount-display-area.vfx-basic .mount-sprite-preview {
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.65)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.9));
}

/* Card Bóc Tách Hiệu Ứng Thần Mã */
.mount-vfx-info-card {
    background: linear-gradient(180deg, rgba(30, 16, 10, 0.9) 0%, rgba(18, 10, 6, 0.95) 100%);
    border: 1px solid #78350f;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 11px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.mount-vfx-info-title {
    font-size: 11px;
    font-weight: 800;
    color: #facc15;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.vfx-tag-row {
    display: flex;
    gap: 6px;
    margin-bottom: 4px;
}

.vfx-tag {
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid #92400e;
    color: #fef08a;
}

.vfx-desc-text {
    font-size: 10px;
    color: #cbd5e1;
    line-height: 1.4;
    font-style: italic;
}

@keyframes mountBob {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
}

.mount-status-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 8px;
}

.mount-status-badge {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid #451a03;
    border-radius: 4px;
    padding: 4px;
}

.mount-status-badge.riding {
    color: #4ade80;
    border-color: #15803d;
    background: rgba(22, 101, 52, 0.35);
    text-shadow: 0 0 4px rgba(74, 222, 128, 0.5);
}

#btn-mount-modal-toggle {
    width: 100%;
    padding: 7px 0;
    font-size: 12px;
    font-weight: 800;
    background: linear-gradient(180deg, #d97706 0%, #b45309 100%);
    border: 1px solid #f59e0b;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    transition: all 0.15s ease;
}

#btn-mount-modal-toggle:hover {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.mount-sect-rule-card {
    background: rgba(26, 15, 9, 0.7);
    border: 1px solid #572605;
    border-radius: 5px;
    padding: 8px 10px;
    font-size: 10.5px;
}

.mount-sect-rule-title {
    font-weight: 800;
    color: #f59e0b;
    margin-bottom: 4px;
}

.mount-sect-rule-desc {
    color: #cbd5e1;
    line-height: 1.45;
}

.mount-details-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mount-equip-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mount-section-title {
    font-size: 11px;
    font-weight: 800;
    color: #fde047;
    letter-spacing: 0.4px;
    border-bottom: 1px dashed rgba(120, 53, 15, 0.6);
    padding-bottom: 3px;
}

.mount-equip-slots-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.mount-eq-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1e120a;
    border: 1px solid #4a240d;
    border-radius: 5px;
    padding: 6px 8px;
    transition: all 0.15s ease;
    position: relative;
}

.mount-eq-slot:hover {
    background: #2a190e;
    border-color: #b45309;
}

.mount-eq-slot.equipped {
    border-color: #d97706;
    background: #271408;
}

.mount-eq-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: #0f0804;
    border: 1px solid #572605;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.mount-eq-slot.equipped .mount-eq-icon {
    border-color: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.3);
}

.mount-eq-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mount-eq-name {
    font-size: 10.5px;
    font-weight: 700;
    color: #fef08a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mount-eq-stat {
    font-size: 9px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-mount-unequip {
    font-size: 8.5px;
    font-weight: 700;
    padding: 2px 6px;
    background: #7f1d1d;
    border: 1px solid #ef4444;
    color: #fef2f2;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-mount-unequip:hover {
    background: #991b1b;
}

.mount-stats-card {
    background: rgba(18, 10, 5, 0.85);
    border: 1px solid #572605;
    border-radius: 5px;
    padding: 8px 10px;
}

.mount-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 10px;
    font-size: 10px;
    margin-top: 4px;
}

.mount-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px dashed rgba(69, 26, 3, 0.4);
    padding-bottom: 2px;
}

.mount-stat-item:last-child,
.mount-stat-item:nth-last-child(2) {
    border-bottom: none;
}

.mount-stat-item .lbl {
    color: #94a3b8;
}

.mount-stat-item .val.green {
    color: #4ade80;
    font-weight: 700;
}

.mount-inventory-hint {
    font-size: 10px;
    color: #fbbf24;
    background: rgba(120, 53, 15, 0.2);
    border: 1px dashed #78350f;
    border-radius: 4px;
    padding: 5px 8px;
    font-style: italic;
    line-height: 1.35;
}

/* ================================================================
   🐎 THANH CHỌN 12 THÚ CƯỠI KIẾM HIỆP (MOUNT COLLECTION CAROUSEL)
   ================================================================ */
.mount-collection-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: rgba(10, 5, 2, 0.95);
    border-bottom: 1px solid #78350f;
    padding: 8px 12px;
}

.mount-collection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    font-weight: 800;
    color: #facc15;
}

.mount-collection-subtext {
    color: #cbd5e1;
    font-weight: normal;
    font-size: 10px;
}

.mount-carousel-container {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

.mount-carousel-btn {
    width: 28px;
    height: 60px;
    flex-shrink: 0;
    background: linear-gradient(180deg, #78350f 0%, #291102 100%);
    border: 1.5px solid #d97706;
    border-radius: 6px;
    color: #facc15;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.16s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    user-select: none;
    z-index: 10;
}

.mount-carousel-btn:hover {
    background: linear-gradient(180deg, #b45309 0%, #451a03 100%);
    border-color: #facc15;
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.6);
    transform: scale(1.06);
    color: #ffffff;
}

.mount-carousel-btn:active {
    transform: scale(0.94);
}

.mount-selector-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    min-width: 0;
    max-width: 100%;
    padding: 4px 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    user-select: none;
    touch-action: pan-x;
}

.mount-selector-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.mount-card-item {
    flex: 0 0 74px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #1e120a;
    border: 1.5px solid #451a03;
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    transition: all 0.18s ease;
    position: relative;
}

.mount-card-item:hover {
    border-color: #f59e0b;
    transform: translateY(-2px);
    background: #2d180b;
}

.mount-card-item.active {
    border-color: #facc15;
    background: linear-gradient(180deg, #3d1c07 0%, #1f0c02 100%);
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.45);
}

.mount-card-item.riding {
    border-color: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.mount-card-img-wrap {
    width: 62px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    background: radial-gradient(circle, rgba(250, 204, 21, 0.1) 0%, transparent 80%);
    border-radius: 4px;
}

.mount-card-img {
    max-width: 58px;
    max-height: 44px;
    image-rendering: pixelated;
    object-fit: contain;
}

.mount-card-name {
    font-size: 9.5px;
    font-weight: 700;
    color: #e2e8f0;
    text-align: center;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.mount-card-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 7.5px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 6px;
    background: #15803d;
    color: #fff;
    border: 1px solid #4ade80;
}

.mount-title-display {
    font-size: 13px;
    font-weight: 800;
    color: #fef08a;
    text-align: center;
    margin-top: 2px;
}

.mount-element-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    margin-top: 3px;
}

.mount-element-badge.fire { background: rgba(239, 68, 68, 0.2); border: 1px solid #ef4444; color: #fca5a5; }
.mount-element-badge.ice { background: rgba(56, 189, 248, 0.2); border: 1px solid #38bdf8; color: #bae6fd; }
.mount-element-badge.lightning { background: rgba(168, 85, 247, 0.2); border: 1px solid #a855f7; color: #e9d5ff; }
.mount-element-badge.wind { background: rgba(52, 211, 153, 0.2); border: 1px solid #34d399; color: #a7f3d0; }
.mount-element-badge.gold { background: rgba(250, 204, 21, 0.2); border: 1px solid #facc15; color: #fef08a; }
.mount-element-badge.roar { background: rgba(244, 63, 94, 0.2); border: 1px solid #f43f5e; color: #fecdd3; }
.mount-element-badge.basic { background: rgba(148, 163, 184, 0.2); border: 1px solid #94a3b8; color: #cbd5e1; }

/* ================================================================
   🔨 LÒ RÈN HOÀNG KIM (CRAFTING MODAL STYLES)
   ================================================================ */
.crafting-box {
    width: 92%;
    max-width: 680px;
    background: rgba(24, 15, 10, 0.98);
    border: 2px solid #d97706;
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.9), 0 0 15px rgba(217, 119, 6, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #f1f5f9;
    font-family: 'Be Vietnam Pro', sans-serif;
    z-index: 9999;
}

.crafting-notice {
    font-size: 10px;
    color: #fef08a;
    background: rgba(180, 83, 9, 0.25);
    border-bottom: 1px solid rgba(217, 119, 6, 0.35);
    padding: 6px 12px;
    line-height: 1.4;
}

.craft-mode-nav {
    display: flex;
    background: #1c100a;
    border-bottom: 2px solid #b45309;
    padding: 6px 10px;
    gap: 8px;
    overflow-x: auto;
}

.craft-mode-btn {
    background: linear-gradient(180deg, #3f2213 0%, #221208 100%);
    border: 1px solid #78350f;
    color: #e2e8f0;
    font-size: 11.5px;
    font-weight: 800;
    padding: 7px 14px;
    border-radius: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.craft-mode-btn.active, .craft-mode-btn:hover {
    background: linear-gradient(180deg, #ea580c 0%, #9a3412 100%);
    color: #ffffff;
    border-color: #f97316;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.6);
}

.craft-prof-bar-container {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(30, 20, 15, 0.95);
    border-bottom: 1px solid #78350f;
    padding: 6px 14px;
}

.craft-prof-badge {
    background: #0284c7;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.craft-prof-bar-bg {
    flex: 1;
    height: 12px;
    background: #0f172a;
    border: 1px solid #475569;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.craft-prof-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
    transition: width 0.3s ease;
}

.craft-prof-exp-text {
    font-size: 10.5px;
    color: #94a3b8;
    font-weight: 700;
    white-space: nowrap;
}

.crafting-tabs {
    display: flex;
    overflow-x: auto;
    background: rgba(15, 10, 6, 0.9);
    border-bottom: 1px solid #78350f;
    padding: 4px 8px;
    gap: 6px;
    scrollbar-width: thin;
}

.craft-tab-btn {
    background: rgba(45, 26, 15, 0.8);
    border: 1px solid #78350f;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 4px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s ease;
}

.craft-tab-btn.active, .craft-tab-btn:hover {
    background: #d97706;
    color: #ffffff;
    border-color: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.crafting-body {
    display: flex;
    padding: 10px;
    gap: 10px;
    height: 380px;
    overflow: hidden;
}

@media (max-width: 600px) {
    .crafting-body {
        flex-direction: column;
        height: auto;
        max-height: 70vh;
        overflow-y: auto;
    }
}

.crafting-recipes-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 4px;
}

.craft-item-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(35, 20, 12, 0.75);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.craft-item-card:hover {
    background: rgba(60, 32, 18, 0.9);
    border-color: #d97706;
}

.craft-item-card.active {
    background: rgba(120, 53, 15, 0.65);
    border-color: #fbbf24;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}

.craft-card-icon-box {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #92400e;
    border-radius: 4px;
}

.craft-card-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.craft-ready-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    font-size: 7px;
    background: #15803d;
    color: #ffffff;
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: 800;
}

.craft-missing-badge {
    position: absolute;
    bottom: -3px;
    right: -3px;
    font-size: 7px;
    background: #b91c1c;
    color: #ffffff;
    padding: 1px 3px;
    border-radius: 2px;
    font-weight: 800;
}

.craft-card-info {
    flex: 1;
    min-width: 0;
}

.craft-card-name {
    font-size: 11.5px;
    font-weight: 800;
    color: #facc15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.craft-card-slot {
    font-size: 9.5px;
    color: #94a3b8;
}

.craft-card-cost {
    font-size: 9.5px;
    color: #fbbf24;
}

.crafting-detail-pane {
    flex: 1.2;
    background: rgba(15, 10, 6, 0.85);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.craft-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(120, 53, 15, 0.5);
    padding-bottom: 8px;
}

.craft-detail-icon {
    width: 44px;
    height: 44px;
    border: 2px solid #fbbf24;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
}

.craft-detail-title-group {
    flex: 1;
}

.craft-detail-name {
    font-size: 13px;
    font-weight: 900;
    color: #fbbf24;
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}

.craft-detail-sub {
    font-size: 10px;
    color: #38bdf8;
    margin-top: 1px;
}

.craft-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.craft-stat-pill {
    font-size: 9px;
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid #475569;
    color: #38bdf8;
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 700;
}

.craft-desc-box {
    font-size: 10.5px;
    color: #cbd5e1;
    line-height: 1.4;
    font-style: italic;
    background: rgba(0, 0, 0, 0.3);
    padding: 6px 8px;
    border-radius: 4px;
}

.craft-req-header {
    font-size: 11px;
    font-weight: 800;
    color: #f59e0b;
    margin-top: 4px;
}

.craft-req-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.craft-req-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(28, 18, 12, 0.8);
    border: 1px solid #451a03;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 10.5px;
}

.craft-req-row.ready {
    border-color: #15803d;
    color: #86efac;
}

.craft-req-row.missing {
    border-color: #991b1b;
    color: #fca5a5;
}

.craft-req-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.craft-req-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.craft-req-right {
    font-weight: 800;
}

.btn-craft-execute {
    margin-top: auto;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 900;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    border: none;
    letter-spacing: 0.5px;
}

.btn-craft-execute.enabled {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
}

.btn-craft-execute.enabled:hover {
    filter: brightness(1.2);
    transform: scale(1.02);
}

.btn-craft-execute.disabled {
    background: #334155;
    color: #94a3b8;
    cursor: not-allowed;
}

/* ================================================================ */
/* 📜 AUTHENTIC SOFTKEY MENU BUTTON & ALL-IN-ONE GAME MENU MODAL    */
/* ================================================================ */

.softkey-menu-btn {
    background: radial-gradient(circle at 35% 35%, #92400e 0%, #451a03 70%, #1e0d04 100%);
    border: 2px solid #fbbf24;
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.4), 0 4px 8px rgba(0, 0, 0, 0.8);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    transition: transform 0.08s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.softkey-menu-btn:hover {
    border-color: #fef08a;
    box-shadow: 0 0 16px rgba(254, 240, 138, 0.7), inset 0 1px 3px rgba(255, 255, 255, 0.6), 0 4px 10px rgba(0, 0, 0, 0.9);
}

.softkey-menu-btn:active {
    transform: scale(0.92);
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}

.softkey-menu-btn .softkey-menu-icon {
    font-size: 16px;
    line-height: 1;
    filter: drop-shadow(0 1px 2px #000);
    pointer-events: none;
}

.softkey-menu-btn .softkey-menu-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 8px;
    font-weight: 900;
    color: #fef08a;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px #000, 0 0 4px #d97706;
    line-height: 1;
    pointer-events: none;
}

/* GAME MENU MODAL BOX - COMPACT GROUPED CATEGORIES */
.game-menu-box {
    width: 800px;
    max-width: 95vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: #140d07;
    border: 2px solid #b45309;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.95), inset 0 0 18px rgba(180, 83, 9, 0.35);
    border-radius: 8px;
    overflow: hidden;
    animation: gmenuFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes gmenuFadeIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.game-menu-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
}

/* 12 Large Touch-Friendly Buttons Grid */
.gmenu-touch-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.gmenu-touch-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    min-height: 52px;
    background: rgba(36, 22, 15, 0.9);
    border: 1.5px solid #78350f;
    border-radius: 6px;
    color: #f1f5f9;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    text-align: left;
    font-family: inherit;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 5px rgba(0, 0, 0, 0.6);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.gmenu-touch-btn:hover {
    background: rgba(69, 26, 3, 0.95);
    border-color: #f59e0b;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.gmenu-touch-btn:active {
    transform: scale(0.96);
    background: #451a03;
}

.gtouch-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px solid rgba(251, 191, 36, 0.4);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
    flex-shrink: 0;
}

.gtouch-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gtouch-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    color: #fef08a;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
}

.gtouch-desc {
    font-size: 9px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-top: 2px;
}

.gtouch-tag {
    font-size: 7.5px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.65);
    color: #cbd5e1;
    border: 1px solid #475569;
    flex-shrink: 0;
    line-height: 1;
}

.gtouch-tag.hot {
    background: #991b1b;
    color: #fef08a;
    border-color: #ef4444;
}

.gtouch-tag.highlight {
    background: #065f46;
    color: #a7f3d0;
    border-color: #10b981;
}

/* Footer of Game Menu */
.game-menu-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: rgba(10, 6, 3, 0.85);
    border-top: 1px solid #451a03;
    gap: 8px;
}

.gmenu-footer-links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.gmenu-footer-link {
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #93c5fd;
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(30, 58, 138, 0.35);
    border: 1px solid rgba(59, 130, 246, 0.4);
    transition: all 0.15s;
    white-space: nowrap;
}

.gmenu-footer-link:hover {
    background: rgba(30, 58, 138, 0.7);
    color: #bfdbfe;
    border-color: #60a5fa;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .gmenu-touch-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 520px) {
    .gmenu-touch-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tối ưu màn hình điện thoại ngang (Landscape) */
@media (max-height: 520px) {
    .game-menu-box {
        max-height: calc(100% - 10px);
    }
    .game-menu-body {
        padding: 5px 8px;
    }
    .gmenu-touch-grid {
        gap: 5px;
    }
    .gmenu-touch-btn {
        min-height: 42px;
        padding: 4px 6px;
        gap: 6px;
    }
    .gtouch-icon {
        width: 30px;
        height: 30px;
        font-size: 15px;
    }
    .gtouch-title {
        font-size: 11px;
    }
    .gtouch-desc {
        font-size: 8.5px;
    }
    .game-menu-footer {
        padding: 4px 8px;
    }
}

/* =============================================================
   AUTHENTIC REMOTE STORAGE MODAL (KHO ĐỒ TỪ XA)
   ============================================================= */
.storage-box {
    width: 660px;
    max-width: 96vw;
    height: min(510px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    background: #1c120c;
    border: 2px solid #78350f;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
}

.storage-body {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    flex: 1;
    overflow: hidden;
    background: rgba(28, 18, 12, 0.95);
}

.storage-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: rgba(18, 10, 5, 0.7);
    border: 1px solid #451a03;
    border-radius: 5px;
    padding: 8px;
}

.storage-sec-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #78350f;
}

.storage-sec-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: #fde047;
}

.storage-cap-badge {
    font-size: 9.5px;
    font-weight: 700;
    color: #93c5fd;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid #1e3a8a;
    padding: 2px 6px;
    border-radius: 4px;
}

.storage-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    overflow-y: auto;
    max-height: 280px;
    padding: 3px;
}

.storage-slot {
    aspect-ratio: 1;
    min-height: 42px;
    background: rgba(15, 8, 4, 0.9);
    border: 1px solid #572605;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: all 0.12s ease;
}

.storage-slot:hover {
    border-color: #f59e0b;
    background: rgba(69, 26, 3, 0.4);
    transform: scale(1.04);
}

.storage-slot.empty {
    cursor: default;
    opacity: 0.35;
}

.storage-slot img {
    width: 84%;
    height: 84%;
    object-fit: contain;
    image-rendering: pixelated;
}

.storage-slot .slot-count {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 8.5px;
    font-weight: 800;
    color: #fde047;
    text-shadow: 0 1px 2px #000;
}

.storage-footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(10, 5, 2, 0.85);
    border-top: 1px solid #451a03;
}

.storage-footer-note {
    font-size: 10px;
    color: #cbd5e1;
    line-height: 1.3;
}

.storage-footer-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

/* =============================================================
   AUTHENTIC SELL MODAL (TIỆM CẦM ĐỒ & BÁN NHANH THEO PHẨM CHẤT)
   ============================================================= */
.sell-box {
    width: 580px;
    max-width: 96vw;
    height: min(510px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    background: #1c120c;
    border: 2px solid #78350f;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
}

.sell-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    max-height: none;
    background: rgba(28, 18, 12, 0.95);
}

.sell-quick-card {
    background: rgba(18, 10, 5, 0.85);
    border: 1px solid #572605;
    border-radius: 5px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sell-quick-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 900;
    color: #fde047;
    letter-spacing: 0.5px;
}

.sell-quick-desc {
    font-size: 10.5px;
    color: #94a3b8;
    line-height: 1.3;
}

.sell-quality-pills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.sell-quality-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid #451a03;
    cursor: pointer;
    user-select: none;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.15s ease;
}

.sell-quality-pill:hover {
    border-color: #f59e0b;
    background: rgba(120, 53, 15, 0.25);
}

.sell-quality-pill input[type="checkbox"] {
    accent-color: #f59e0b;
    cursor: pointer;
}

.pill-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.q-dot-white { background: #cbd5e1; box-shadow: 0 0 4px #94a3b8; }
.q-dot-green { background: #22c55e; box-shadow: 0 0 5px #22c55e; }
.q-dot-blue { background: #3b82f6; box-shadow: 0 0 5px #3b82f6; }
.q-dot-purple { background: #a855f7; box-shadow: 0 0 5px #a855f7; }

.qp-white .pill-name { color: #e2e8f0; }
.qp-green .pill-name { color: #86efac; }
.qp-blue .pill-name { color: #93c5fd; }
.qp-purple .pill-name { color: #d8b4fe; }

.sell-safety-row {
    font-size: 10.5px;
    color: #cbd5e1;
}

.sell-safety-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.sell-safety-label input[type="checkbox"] {
    accent-color: #3b82f6;
    cursor: pointer;
}

.sell-summary-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(120, 53, 15, 0.25);
    border: 1px dashed #b45309;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 11.5px;
    font-weight: 800;
}

.sell-summary-gold {
    color: #fde047;
    text-shadow: 0 0 6px rgba(245, 158, 11, 0.5);
}

.sell-manual-card {
    background: rgba(18, 10, 5, 0.85);
    border: 1px solid #572605;
    border-radius: 5px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sell-manual-title {
    font-size: 10.5px;
    font-weight: 800;
    color: #fde047;
}

.sell-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    max-height: 180px;
    overflow-y: auto;
    padding: 2px;
}

.sell-item-card {
    background: #140b06;
    border: 1px solid #4a240d;
    border-radius: 4px;
    padding: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.12s ease;
    position: relative;
    min-height: 52px;
}

.sell-item-card:hover {
    border-color: #eab308;
    background: #261409;
    transform: translateY(-1px);
}

.sell-item-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}

.sell-item-price {
    font-size: 8.5px;
    font-weight: 800;
    color: #facc15;
    margin-top: 2px;
    line-height: 1;
}

.sell-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(10, 5, 2, 0.85);
    border-top: 1px solid #451a03;
}

/* =============================================================
   AUTHENTIC AUTO BATTLE SETTINGS MODAL (CÀI ĐẶT TREO MÁY)
   ============================================================= */
.auto-settings-box {
    width: 580px;
    max-width: 95vw;
    height: min(680px, calc(100% - 20px));
    max-height: calc(100% - 20px);
    background: #1c120c;
    border: 2px solid #78350f;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
    padding: 0 !important;
}

.auto-settings-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(28, 18, 12, 0.95);
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.as-card {
    background: rgba(18, 10, 5, 0.85);
    border: 1px solid #572605;
    border-radius: 5px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.as-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    color: #fde047;
    border-bottom: 1px dashed rgba(120, 53, 15, 0.6);
    padding-bottom: 4px;
}

.as-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.as-label {
    font-size: 11px;
    font-weight: 700;
    color: #cbd5e1;
}

.as-select {
    background: #0f0804;
    color: #fde047;
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 700;
    outline: none;
    cursor: pointer;
}

.as-select:focus {
    border-color: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.4);
}

.as-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

.as-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #cbd5e1;
    cursor: pointer;
    user-select: none;
}

.as-checkbox-label input[type="checkbox"] {
    accent-color: #22c55e;
    cursor: pointer;
}

.auto-skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px;
    max-height: 190px;
    overflow-y: auto;
    background: rgba(10, 5, 2, 0.7);
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #78350f;
}

.auto-skill-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(28, 18, 12, 0.9);
    border: 1px solid #572605;
    border-radius: 4px;
    padding: 5px 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.auto-skill-card:hover {
    background: rgba(45, 26, 15, 0.95);
    border-color: #d97706;
}

.auto-skill-card.selected {
    border-color: #22c55e;
    background: rgba(20, 35, 20, 0.75);
}

.auto-skill-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: #334155;
}

.auto-skill-icon-wrap {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 1px solid #ca8a04;
    border-radius: 3px;
    overflow: hidden;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auto-skill-icon-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.auto-skill-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.auto-skill-name {
    font-size: 11px;
    font-weight: bold;
    color: #fef08a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.auto-skill-meta {
    font-size: 9.5px;
    color: #94a3b8;
}

.auto-settings-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 12px;
    background: rgba(10, 5, 2, 0.85);
    border-top: 1px solid #451a03;
}

/* =============================================================
   AUTHENTIC GRAPHICS & VISUAL SETTINGS MODAL (CÀI ĐẶT ĐỒ HỌA)
   ============================================================= */
.graphics-settings-box {
    width: 490px;
    max-width: 95vw;
    height: min(510px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    background: #17110c;
    border: 2px solid #92400e;
    border-radius: 6px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    user-select: none;
}

.graphics-settings-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    background: rgba(23, 17, 12, 0.96);
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}

.gs-card {
    background: rgba(15, 9, 5, 0.88);
    border: 1px solid #572605;
    border-radius: 5px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gs-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    color: #fde047;
    border-bottom: 1px dashed rgba(146, 64, 14, 0.6);
    padding-bottom: 4px;
}

.gs-checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.gs-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #e2e8f0;
    cursor: pointer;
    user-select: none;
}

.gs-label-bold {
    font-weight: 700;
    color: #fef08a;
}

.gs-checkbox-label input[type="checkbox"] {
    accent-color: #22c55e;
    cursor: pointer;
    width: 15px;
    height: 15px;
}

.gs-hint-text {
    font-size: 9.5px;
    color: #94a3b8;
    margin-left: 23px;
    line-height: 1.35;
}

.graphics-settings-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
    padding: 8px 12px;
    background: rgba(10, 5, 2, 0.9);
    border-top: 1px solid #572605;
}

/* ================================================================
   GIAO DIỆN HẢO HỮU & SỔ CỪU THÙ (RELATION MODAL - TOUCH MOBILE)
   ================================================================ */
.relation-modal-box {
    width: 95%;
    max-width: 620px;
    height: min(510px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    background: linear-gradient(180deg, #1c0f08 0%, #120904 100%);
    border: 2px solid #b45309;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(180, 83, 9, 0.3);
    padding: 12px 16px 16px;
    color: #f1f5f9;
    display: flex;
    flex-direction: column;
}

.relation-tabs-bar {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #78350f;
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.relation-tab-btn {
    background: #2b1307;
    border: 1px solid #78350f;
    border-radius: 5px;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.relation-tab-btn:hover {
    background: #451a03;
    color: #fef08a;
    border-color: #d97706;
}

.relation-tab-btn.active {
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
    border-color: #f59e0b;
    color: #fff;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.relation-tab-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.relation-add-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.relation-friends-list,
.relation-enemies-list {
    max-height: 350px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 4px;
    margin-bottom: 12px;
}

/* Scrollbar antique */
.relation-friends-list::-webkit-scrollbar,
.relation-enemies-list::-webkit-scrollbar {
    width: 6px;
}
.relation-friends-list::-webkit-scrollbar-track,
.relation-enemies-list::-webkit-scrollbar-track {
    background: #1a0f07;
}
.relation-friends-list::-webkit-scrollbar-thumb,
.relation-enemies-list::-webkit-scrollbar-thumb {
    background: #78350f;
    border-radius: 3px;
}

/* Friend Card */
.relation-friend-card {
    background: rgba(26, 15, 8, 0.95);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    transition: all 0.15s ease;
}

.relation-friend-card:hover {
    border-color: #f59e0b;
    background: rgba(35, 20, 10, 0.98);
}

.relation-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.relation-card-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.relation-avatar {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    border: 1.5px solid #d97706;
    background: #000;
    object-fit: cover;
}

.relation-info-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #fef08a;
}

.relation-info-meta {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 1px;
}

.relation-info-map {
    font-size: 10.5px;
    color: #38bdf8;
    margin-top: 1px;
}

.relation-intimacy-section {
    background: rgba(15, 8, 4, 0.85);
    border: 1px solid #572605;
    border-radius: 5px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.relation-intimacy-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
}

.relation-tier-badge {
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    font-size: 10.5px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.relation-tele-count-badge {
    color: #38bdf8;
    font-weight: 700;
    font-size: 10.5px;
    background: rgba(2, 132, 199, 0.2);
    border: 1px solid #0284c7;
    padding: 2px 8px;
    border-radius: 4px;
}

.relation-bar-wrap {
    width: 100%;
    height: 6px;
    background: #1e1108;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #451a03;
}

.relation-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #ec4899, #f59e0b);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.relation-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-friend-action {
    background: #2b1307;
    border: 1px solid #78350f;
    border-radius: 4px;
    color: #f1f5f9;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.btn-friend-action:hover {
    background: #451a03;
    border-color: #f59e0b;
}

.btn-friend-action.tele {
    background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
    border-color: #38bdf8;
    color: #fff;
    font-weight: 800;
}

.btn-friend-action.tele:hover {
    background: linear-gradient(180deg, #0369a1 0%, #075985 100%);
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

.btn-friend-action.danger {
    color: #fca5a5;
    border-color: #ef4444;
}

.btn-friend-action.danger:hover {
    background: #450a0a;
    border-color: #dc2626;
}

/* Suggested chips */
.relation-suggest-header {
    font-size: 10.5px;
    font-weight: 700;
    color: #f59e0b;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.relation-suggest-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.relation-chip {
    background: #1f0f06;
    border: 1px solid #78350f;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11px;
    color: #cbd5e1;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    transition: all 0.15s ease;
}

.relation-chip:hover {
    background: #3b180a;
    border-color: #f59e0b;
    color: #fff;
}

/* Enemy List & Cards */
.enemy-header-banner {
    background: linear-gradient(180deg, rgba(69, 10, 10, 0.9) 0%, rgba(30, 5, 5, 0.95) 100%);
    border: 1px solid #ef4444;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    text-align: center;
}

.enemy-banner-title {
    font-size: 12.5px;
    font-weight: 900;
    color: #fca5a5;
    letter-spacing: 1px;
}

.enemy-banner-sub {
    font-size: 10px;
    color: #cbd5e1;
    margin-top: 3px;
    line-height: 1.4;
}

.relation-enemy-card {
    background: rgba(30, 8, 8, 0.95);
    border: 1px solid #991b1b;
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: inset 0 0 12px rgba(185, 28, 28, 0.25);
    transition: all 0.15s ease;
}

.relation-enemy-card:hover {
    border-color: #ef4444;
    background: rgba(45, 10, 10, 0.98);
}

.enemy-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.enemy-identity {
    display: flex;
    align-items: center;
    gap: 10px;
}

.enemy-avatar-skull {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    border: 1.5px solid #ef4444;
    background: #180505;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.enemy-name {
    font-size: 14px;
    font-weight: 900;
    color: #f87171;
}

.enemy-guild {
    font-size: 11px;
    color: #fca5a5;
    margin-top: 1px;
}

.enemy-kill-badge {
    background: #7f1d1d;
    border: 1px solid #ef4444;
    color: #fef2f2;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 800;
}

.enemy-details-box {
    background: rgba(15, 3, 3, 0.8);
    border: 1px solid #571010;
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 10.5px;
    color: #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.enemy-detail-item {
    display: flex;
    justify-content: space-between;
}

.enemy-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.enemy-revenge-notice {
    font-size: 10px;
    color: #f87171;
    font-style: italic;
}

.btn-enemy-hunt {
    background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
    border: 1px solid #f87171;
    border-radius: 4px;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 14px;
    cursor: pointer;
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
}

.btn-enemy-hunt:hover {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.6);
}

.relation-empty-box {
    text-align: center;
    padding: 30px 15px;
    color: #94a3b8;
    font-size: 12px;
    background: rgba(20, 10, 5, 0.5);
    border: 1px dashed #78350f;
    border-radius: 6px;
}

/* ================================================================
   🎒 HIỆU ỨNG TÚI ĐỒ NẨY LÊN KHI VẬT PHẨM BAY VÀO TÚI
   ================================================================ */
@keyframes bagBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.32); filter: drop-shadow(0 0 12px #facc15) brightness(1.3); }
    60% { transform: scale(0.92); }
    80% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

.bag-bounce {
    animation: bagBounce 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* ================================================================
   🚩 HỆ THỐNG BANG HỘI & GIA TỘC THỜI TRẦN (GUILD & CLAN SYSTEM)
   ================================================================ */
.guild-clan-box {
    width: 95%;
    max-width: 680px;
    height: min(510px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1c0e07 0%, #120803 100%);
    border: 2px solid #b45309;
    border-radius: 8px;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(180, 83, 9, 0.25);
    padding: 12px 16px 14px;
    color: #f1f5f9;
    box-sizing: border-box;
}

.guild-clan-tabs-bar {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #78350f;
    padding-bottom: 8px;
    margin-top: 6px;
    margin-bottom: 10px;
    overflow-x: auto;
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 38px;
}

.gclan-tab-btn {
    background: #2b1307;
    border: 1px solid #78350f;
    border-radius: 4px;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    min-height: 30px;
    line-height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gclan-tab-btn:hover {
    background: #451a03;
    color: #fef08a;
    border-color: #d97706;
}

.gclan-tab-btn.active {
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
    border-color: #f59e0b;
    color: #fff;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.45);
}

.guild-clan-body {
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
    min-height: 180px;
    max-height: none;
    -webkit-overflow-scrolling: touch;
}

.guild-clan-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #78350f;
    padding-top: 10px;
    margin-top: 10px;
    font-size: 11px;
    flex-shrink: 0;
}

.gclan-quick-summary {
    color: #94a3b8;
}

.gclan-footer-actions {
    display: flex;
    gap: 8px;
}

/* Card Overview */
.gclan-overview-card {
    background: rgba(26, 14, 8, 0.95);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
}

.gclan-hero-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    border-bottom: 1px dashed #78350f;
    padding-bottom: 10px;
}

.gclan-crest-icon {
    font-size: 32px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #78350f, #b45309);
    border: 2px solid #f59e0b;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
}

.gclan-main-title {
    font-size: 16px;
    font-weight: 900;
    color: #facc15;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.gclan-sub-title {
    font-size: 11px;
    color: #cbd5e1;
    margin-top: 2px;
}

.gclan-level-tag {
    font-size: 10px;
    background: #b45309;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    border: 1px solid #f59e0b;
}

.gclan-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    font-size: 11px;
    margin-bottom: 12px;
    background: rgba(12, 6, 3, 0.6);
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #451a03;
}

.gclan-meta-item .lbl {
    color: #94a3b8;
    margin-right: 4px;
}

.gclan-exp-bar-wrap {
    margin-bottom: 12px;
}

.gclan-exp-bar-text {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #fef08a;
    margin-bottom: 4px;
}

.gclan-exp-track {
    width: 100%;
    height: 8px;
    background: #0f0703;
    border: 1px solid #78350f;
    border-radius: 4px;
    overflow: hidden;
}

.gclan-exp-fill {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #eab308);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
    transition: width 0.3s ease;
}

.gclan-notice-box {
    font-size: 11px;
    background: rgba(18, 9, 4, 0.85);
    border-left: 3px solid #f59e0b;
    padding: 6px 10px;
    margin-bottom: 12px;
    color: #e2e8f0;
    font-style: italic;
}

.gclan-notice-box .notice-label {
    font-weight: 700;
    color: #facc15;
    font-style: normal;
    margin-right: 4px;
}

.gclan-action-row {
    display: flex;
    gap: 8px;
}

/* Members Table */
.gclan-section-title {
    font-size: 12px;
    font-weight: 800;
    color: #facc15;
    margin: 10px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gclan-member-table-wrap {
    background: rgba(14, 7, 3, 0.95);
    border: 1px solid #78350f;
    border-radius: 4px;
    overflow-x: auto;
}

.gclan-member-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 10.5px;
    text-align: left;
}

.gclan-member-table th {
    background: #2b1307;
    color: #fef08a;
    padding: 6px 8px;
    border-bottom: 1px solid #78350f;
    font-weight: 700;
}

.gclan-member-table td {
    padding: 6px 8px;
    border-bottom: 1px solid #2e1406;
    color: #cbd5e1;
}

.gclan-member-table tr:hover {
    background: rgba(180, 83, 9, 0.15);
}

.is-self-row {
    background: rgba(245, 158, 11, 0.12) !important;
}

.tag-self {
    background: #059669;
    color: #fff;
    font-size: 8.5px;
    padding: 1px 4px;
    border-radius: 2px;
    margin-left: 4px;
}

.badge-role {
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 700;
}

.role-leader {
    background: #b91c1c;
    color: #fef08a;
    border: 1px solid #ef4444;
}

.role-deputy {
    background: #6d28d9;
    color: #e9d5ff;
    border: 1px solid #8b5cf6;
}

.role-member {
    background: #1e293b;
    color: #94a3b8;
    border: 1px solid #334155;
}

.status-online {
    color: #4ade80;
    font-weight: 700;
}

.status-offline {
    color: #64748b;
}

/* Sub-Clans Tab */
.gclan-subclan-header {
    background: rgba(26, 14, 8, 0.95);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.subclan-h1 {
    font-size: 13px;
    font-weight: 800;
    color: #facc15;
}

.subclan-desc {
    font-size: 9.5px;
    color: #94a3b8;
    margin-top: 2px;
}

.subclan-slot-counter {
    font-size: 11px;
    background: #120803;
    border: 1px solid #b45309;
    border-radius: 4px;
    padding: 4px 8px;
    white-space: nowrap;
}

.gclan-subclans-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.subclan-card {
    background: rgba(20, 10, 5, 0.95);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.subclan-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.subclan-badge {
    font-size: 22px;
    width: 36px;
    height: 36px;
    background: #3b1706;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subclan-name-area {
    flex: 1;
}

.subclan-name {
    font-size: 13px;
    font-weight: 800;
    color: #38bdf8;
}

.subclan-leader {
    font-size: 10px;
    color: #cbd5e1;
}

.subclan-role-badge {
    background: linear-gradient(135deg, #0369a1, #0284c7);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    border: 1px solid #38bdf8;
}

.subclan-stats-row {
    display: flex;
    gap: 14px;
    font-size: 10.5px;
    color: #cbd5e1;
    background: rgba(10, 5, 2, 0.6);
    padding: 5px 8px;
    border-radius: 3px;
    margin-bottom: 6px;
}

.subclan-notice {
    font-size: 10px;
    color: #94a3b8;
    font-style: italic;
    margin-bottom: 8px;
}

.subclan-action-bar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    align-items: center;
}

.subclan-role-select {
    font-size: 10.5px;
    padding: 3px 6px;
}

.subclan-recruit-box {
    background: rgba(18, 9, 4, 0.9);
    border: 1px dashed #f59e0b;
    border-radius: 6px;
    padding: 10px;
    margin-top: 6px;
}

.recruit-title {
    font-size: 11px;
    font-weight: 800;
    color: #facc15;
    margin-bottom: 6px;
}

.recruit-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.recruit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #2b1307;
    border: 1px solid #78350f;
    border-radius: 4px;
    padding: 6px 10px;
}

.recruit-info {
    font-size: 11px;
    color: #cbd5e1;
}

/* Skills Tab */
.gclan-skills-subtab-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.gclan-subtab-btn {
    flex: 1;
    background: #2b1307;
    border: 1px solid #78350f;
    border-radius: 4px;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gclan-subtab-btn.active {
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
    border-color: #f59e0b;
    color: #fff;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}

.gclan-skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (max-width: 600px) {
    .gclan-skills-grid {
        grid-template-columns: 1fr;
    }
}

.gclan-skill-card {
    background: rgba(22, 11, 6, 0.95);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
}

.skill-card-top {
    display: flex;
    gap: 8px;
    align-items: center;
}

.skill-icon-wrap {
    font-size: 24px;
    width: 38px;
    height: 38px;
    background: #3b1706;
    border: 1px solid #f59e0b;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.skill-title {
    font-size: 12px;
    font-weight: 800;
    color: #fef08a;
}

.skill-lvl-badge {
    background: #b45309;
    color: #fff;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 4px;
    border: 1px solid #f59e0b;
}

.skill-lvl-badge.clan-badge {
    background: #0284c7;
    border-color: #38bdf8;
}

.skill-req {
    font-size: 9.5px;
    color: #94a3b8;
}

.skill-desc {
    font-size: 10px;
    color: #94a3b8;
    line-height: 1.35;
}

.skill-stats-box {
    background: rgba(10, 5, 2, 0.7);
    border: 1px solid #451a03;
    border-radius: 4px;
    padding: 5px 8px;
    font-size: 10px;
}

.stats-active-list {
    color: #4ade80;
    font-weight: 700;
    margin-top: 2px;
}

.skill-upgrade-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
    border-top: 1px dashed #451a03;
    padding-top: 6px;
}

.skill-cost-txt {
    font-size: 9.5px;
    color: #cbd5e1;
}

/* Buffs Tab */
.gclan-buff-header {
    background: rgba(26, 14, 8, 0.95);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.buff-h1 {
    font-size: 13px;
    font-weight: 800;
    color: #facc15;
}

.buff-desc {
    font-size: 9.5px;
    color: #94a3b8;
    margin-top: 2px;
}

.gclan-buffs-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gclan-buff-card {
    background: rgba(22, 11, 6, 0.95);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 10px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6);
}

.buff-active-card {
    border-color: #f59e0b !important;
    background: rgba(35, 17, 8, 0.98) !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.3), inset 0 0 15px rgba(245, 158, 11, 0.15) !important;
}

.buff-card-top {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
}

.buff-icon-badge {
    font-size: 24px;
    width: 40px;
    height: 40px;
    background: #3b1706;
    border: 2px solid #f59e0b;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.buff-title-box {
    flex: 1;
}

.buff-name {
    font-size: 13px;
    font-weight: 800;
    color: #fef08a;
}

.buff-type-badge {
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    font-weight: 700;
}

.bg-guild {
    background: #b45309;
    color: #fff;
    border: 1px solid #f59e0b;
}

.bg-clan {
    background: #0284c7;
    color: #fff;
    border: 1px solid #38bdf8;
}

.buff-status {
    font-size: 10px;
    color: #cbd5e1;
    margin-top: 2px;
}

.status-running {
    color: #4ade80;
    font-weight: 700;
}

.status-ready {
    color: #94a3b8;
}

.buff-desc-content {
    font-size: 10.5px;
    color: #e2e8f0;
    line-height: 1.35;
    margin-bottom: 8px;
    background: rgba(10, 5, 2, 0.5);
    padding: 6px 8px;
    border-radius: 4px;
}

.buff-footer-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #451a03;
    padding-top: 6px;
}

.buff-cost-info {
    font-size: 10px;
    color: #cbd5e1;
}

/* ================================================================
   📱 THIẾT KẾ ĐẶC QUYỀN MOBILE: BANG HỘI & GIA TỘC THỜI TRẦN
   ================================================================ */

/* Thu nhỏ Softkeys cạnh phải trên thiết bị màn hình thấp (Điện thoại cầm ngang) */
@media (max-height: 520px) {
    #hud-right-softkeys {
        top: 96px;
        right: 8px;
        gap: 5px;
    }
    .softkey-btn, .softkey-menu-btn, .softkey-auto-btn, .softkey-guild-btn {
        width: 42px;
        height: 42px;
    }
    .softkey-auto-icon, .softkey-guild-icon {
        font-size: 15px;
    }
    .softkey-auto-label, .softkey-guild-label {
        font-size: 7.5px;
        margin-top: 1px;
    }
}

/* Tối ưu giao diện Hộp Thoại Bang & Tộc cho Mobile (Cầm ngang & Cầm dọc) */
@media (max-width: 768px), (max-height: 520px) {
    .guild-clan-box {
        width: calc(100% - 12px);
        max-width: 640px;
        height: calc(100% - 12px);
        max-height: calc(100% - 12px);
        padding: 8px 10px;
        border-radius: 6px;
    }

    .modal-header-antique {
        padding: 4px 8px;
        min-height: 32px;
    }

    .modal-title-text {
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .btn-close-antique {
        width: 28px;
        height: 28px;
        font-size: 14px;
        right: 4px;
        top: 2px;
    }

    .guild-clan-tabs-bar {
        gap: 4px;
        padding-bottom: 4px;
        margin-top: 4px;
        margin-bottom: 6px;
        min-height: 32px;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .gclan-tab-btn {
        padding: 5px 10px;
        font-size: 10px;
        min-height: 28px;
        line-height: 14px;
        touch-action: manipulation;
    }

    .guild-clan-body {
        min-height: 120px;
        max-height: calc(100% - 82px);
        padding-right: 2px;
        -webkit-overflow-scrolling: touch;
    }

    /* Thẻ Tổng quan Mobile */
    .gclan-overview-card {
        padding: 8px;
        margin-bottom: 8px;
    }

    .gclan-hero-badge {
        gap: 8px;
        margin-bottom: 8px;
    }

    .gclan-crest-icon {
        font-size: 24px;
        width: 36px;
        height: 36px;
    }

    .gclan-main-title {
        font-size: 13px;
    }

    .gclan-sub-title {
        font-size: 10px;
    }

    .gclan-meta-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
        margin-bottom: 8px;
    }

    .gclan-meta-item {
        padding: 4px 6px;
    }

    .gclan-meta-label {
        font-size: 9px;
    }

    .gclan-meta-val {
        font-size: 11px;
    }

    .gclan-action-row {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .gclan-action-row .btn-antique-gold {
        flex: 1;
        min-width: 140px;
        padding: 6px 10px;
        font-size: 11px;
    }

    /* Bảng Thành Viên Mobile: vuốt ngang mượt mà */
    .gclan-member-table-wrap {
        max-height: 160px;
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
    }

    .gclan-member-table th, .gclan-member-table td {
        padding: 4px 6px;
        font-size: 9.5px;
        white-space: nowrap;
    }

    /* Kỹ Năng Bang & Tộc: 1 cột thân thiện với ngón tay */
    .gclan-skills-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .gclan-skill-card {
        padding: 8px;
    }

    .gclan-skill-btn-action {
        padding: 6px 14px;
        font-size: 11px;
        min-height: 32px;
        touch-action: manipulation;
    }

    /* Danh sách Buff Chiến Kỳ Mobile */
    .gclan-buffs-list {
        gap: 8px;
    }

    .gclan-buff-card {
        padding: 8px;
        flex-direction: column;
        align-items: stretch;
    }

    .gclan-buff-left {
        gap: 8px;
    }

    .gclan-buff-icon {
        font-size: 22px;
        width: 36px;
        height: 36px;
    }

    .buff-footer-action {
        margin-top: 6px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .btn-buff-action {
        padding: 6px 14px;
        font-size: 11px;
        min-height: 32px;
        touch-action: manipulation;
    }

    /* Footer Mobile */
    .guild-clan-footer {
        padding-top: 6px;
        margin-top: 6px;
        font-size: 10px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .gclan-quick-summary {
        font-size: 9.5px;
    }

    .gclan-footer-actions {
        gap: 6px;
    }

    .gclan-footer-actions button {
        padding: 5px 10px;
        font-size: 10px;
        min-height: 28px;
    }
}

/* ================================================================ */
/* 👤 MODAL HỒ SƠ ĐẠI HIỆP, ĐỔI AVATAR & CÀI ĐẶT (PROFILE SYSTEM)   */
/* ================================================================ */
.profile-modal-box {
    width: 95%;
    max-width: 620px;
    max-height: 88vh;
    background: linear-gradient(180deg, #1c0f08 0%, #120904 100%);
    border: 2px solid #b45309;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9), inset 0 0 15px rgba(180, 83, 9, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #e2e8f0;
    box-sizing: border-box;
}

.profile-tabs-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: linear-gradient(180deg, #2b1306, #1a0a03);
    border-bottom: 1px solid #78350f;
    flex-shrink: 0;
}

.profile-tab-btn {
    flex: 1;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 4px;
    background: rgba(22, 12, 6, 0.7);
    border: 1px solid rgba(120, 53, 15, 0.6);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.profile-tab-btn:hover {
    color: #fef08a;
    background: rgba(120, 53, 15, 0.4);
    border-color: #d97706;
}

.profile-tab-btn.active {
    background: linear-gradient(180deg, #b45309, #78350f);
    color: #fef08a;
    border-color: #f59e0b;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    font-weight: 800;
}

.profile-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* TAB 1: HERO CARD & STATS */
.profile-hero-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(30, 15, 8, 0.85);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 10px 14px;
}

.profile-avatar-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.profile-avatar-frame {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.profile-avatar-img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    image-rendering: pixelated;
}

.profile-level-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: linear-gradient(180deg, #dc2626, #991b1b);
    color: #ffffff;
    border: 1px solid #f87171;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
    line-height: 1.1;
    box-shadow: 0 1px 3px #000;
}

.profile-quick-change-btn {
    font-size: 9px;
    font-weight: 700;
    background: #78350f;
    color: #fef08a;
    border: 1px solid #d97706;
    border-radius: 3px;
    padding: 2px 6px;
    cursor: pointer;
    transition: background 0.15s;
    line-height: 1.2;
}

.profile-quick-change-btn:hover {
    background: #b45309;
    color: #fff;
}

.profile-hero-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.profile-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.profile-hero-name {
    font-size: 15px;
    font-weight: 900;
    color: #fde047;
    text-shadow: 0 1px 3px #000;
}

.profile-sect-badge {
    font-size: 10px;
    font-weight: 700;
    color: #38bdf8;
    background: rgba(2, 132, 199, 0.25);
    border: 1px solid #0284c7;
    border-radius: 3px;
    padding: 1px 5px;
}

.profile-title-row, .profile-clan-row {
    font-size: 10.5px;
    color: #cbd5e1;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.title-tag, .clan-tag {
    color: #94a3b8;
}

.title-val {
    color: #f472b6;
    font-weight: 700;
}

.profile-title-quick-btn {
    height: 18px;
    padding: 0 6px;
    background: linear-gradient(180deg, #b45309, #78350f);
    color: #fef08a;
    border: 1px solid #f59e0b;
    border-radius: 3px;
    font-size: 8.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
}

.profile-title-quick-btn:hover {
    background: linear-gradient(180deg, #d97706, #b45309);
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.clan-val {
    color: #4ade80;
    font-weight: 700;
}

.clan-sep {
    color: #64748b;
    margin: 0 2px;
}

.profile-bp-banner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(90deg, rgba(180, 83, 9, 0.4), rgba(69, 26, 3, 0.2));
    border: 1px solid #d97706;
    border-radius: 4px;
    padding: 3px 8px;
    margin-top: 2px;
    width: fit-content;
}

.bp-icon {
    font-size: 11px;
    font-weight: 800;
    color: #fde047;
}

.bp-num {
    font-size: 14px;
    font-weight: 900;
    color: #facc15;
    text-shadow: 0 0 6px rgba(250, 204, 21, 0.6);
    letter-spacing: 0.5px;
}

.profile-stats-card {
    background: rgba(20, 10, 5, 0.85);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 8px 12px;
}

.profile-section-title {
    font-size: 11px;
    font-weight: 800;
    color: #fed7aa;
    border-bottom: 1px solid rgba(120, 53, 15, 0.6);
    padding-bottom: 4px;
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    padding: 2.5px 6px;
    background: rgba(41, 18, 5, 0.45);
    border-radius: 3px;
}

.stat-label {
    color: #94a3b8;
}

.stat-val {
    font-weight: 700;
    color: #f1f5f9;
}

.val-atk { color: #f87171 !important; }
.val-def { color: #60a5fa !important; }
.val-crit { color: #fbbf24 !important; }
.val-silver { color: #e2e8f0 !important; }
.val-gold { color: #facc15 !important; }

/* TAB 2: AVATAR CUSTOMIZER */
.avatar-customizer-wrap {
    display: flex;
    gap: 12px;
}

.avatar-preview-box {
    width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: rgba(30, 15, 8, 0.9);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 10px 8px;
    flex-shrink: 0;
}

.preview-title {
    font-size: 10px;
    font-weight: 800;
    color: #fed7aa;
    text-align: center;
}

.preview-frame-wrap {
    padding: 6px;
}

.preview-frame-wrap .profile-avatar-frame {
    width: 76px;
    height: 76px;
}

.preview-frame-wrap .profile-avatar-img {
    width: 68px;
    height: 68px;
}

.preview-avatar-name {
    font-size: 11px;
    font-weight: 800;
    color: #fde047;
    text-align: center;
}

.preview-frame-name {
    font-size: 9.5px;
    color: #94a3b8;
    text-align: center;
}

.avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    margin-top: 4px;
}

.btn-save-avatar {
    height: 32px;
    background: linear-gradient(180deg, #15803d, #166534);
    color: #ffffff;
    border: 1px solid #22c55e;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-save-avatar:hover {
    background: linear-gradient(180deg, #16a34a, #15803d);
    box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
}

.btn-reset-avatar {
    height: 26px;
    background: rgba(41, 18, 5, 0.8);
    color: #cbd5e1;
    border: 1px solid #78350f;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-reset-avatar:hover {
    color: #fef08a;
    border-color: #d97706;
}

.avatar-selectors-box {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.selector-section {
    background: rgba(20, 10, 5, 0.8);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 8px;
}

.selector-title {
    font-size: 10.5px;
    font-weight: 800;
    color: #fed7aa;
    margin-bottom: 6px;
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    max-height: 130px;
    overflow-y: auto;
    padding: 2px;
}

.avatar-choice-card, .avatar-choice-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px;
    background: rgba(35, 17, 8, 0.7);
    border: 1px solid #78350f;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.avatar-choice-card:hover, .avatar-choice-item:hover {
    border-color: #f59e0b;
    transform: translateY(-1px);
    background: rgba(50, 25, 12, 0.8);
}

.avatar-choice-card.selected, .avatar-choice-item.selected {
    border-color: #f59e0b;
    background: rgba(180, 83, 9, 0.45);
    box-shadow: 0 0 6px #f59e0b;
}

.avatar-choice-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    image-rendering: pixelated;
}

.avatar-choice-name {
    font-size: 8px;
    font-weight: 700;
    color: #e2e8f0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.frames-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.frame-choice-card, .frame-choice-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    background: rgba(35, 17, 8, 0.7);
    border: 1px solid #78350f;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;
}

.frame-choice-card:hover, .frame-choice-item:hover {
    border-color: #f59e0b;
    background: rgba(50, 25, 12, 0.8);
}

.frame-choice-card.selected, .frame-choice-item.selected {
    border-color: #f59e0b;
    background: rgba(180, 83, 9, 0.45);
    box-shadow: 0 0 6px #f59e0b;
}

.frame-thumb-box {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0;
}

.frame-thumb-img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain;
    image-rendering: pixelated;
}

.frame-choice-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.frame-choice-name {
    font-size: 9.5px;
    font-weight: 800;
    color: #fde047;
    white-space: nowrap;
}

.frame-choice-desc {
    font-size: 8px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* AVATAR FRAME STYLES */
.frame-wood {
    border: 2px solid #854d0e !important;
    box-shadow: 0 0 4px rgba(133, 77, 14, 0.5) !important;
}

.frame-bronze {
    border: 2px solid #ea580c !important;
    box-shadow: 0 0 6px rgba(234, 88, 12, 0.6) !important;
}

.frame-silver {
    border: 2px solid #94a3b8 !important;
    box-shadow: 0 0 8px rgba(226, 232, 240, 0.8), inset 0 0 4px #e2e8f0 !important;
}

.frame-gold {
    border: 2.5px solid #f59e0b !important;
    box-shadow: 0 0 10px #f59e0b, 0 0 16px rgba(245, 158, 11, 0.4), inset 0 0 5px #fef08a !important;
    animation: goldFrameGlow 2s infinite alternate;
}

.frame-purple {
    border: 2.5px solid #a855f7 !important;
    box-shadow: 0 0 12px #c084fc, 0 0 18px rgba(168, 85, 247, 0.45), inset 0 0 5px #f0abfc !important;
    animation: purpleFrameGlow 2s infinite alternate;
}

@keyframes goldFrameGlow {
    from { box-shadow: 0 0 8px #f59e0b, inset 0 0 4px #fef08a; }
    to { box-shadow: 0 0 14px #fbbf24, 0 0 20px rgba(251, 191, 36, 0.5), inset 0 0 7px #fff; }
}

/* ================================================================ */
/* TAB 2: QUẢN LÝ DANH HIỆU (TITLES MANAGEMENT)                     */
/* ================================================================ */
.titles-panel-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

/* Current Title Card */
.current-title-card {
    background: radial-gradient(circle at center, rgba(45, 20, 8, 0.95) 0%, rgba(20, 10, 5, 0.98) 100%);
    border: 1.5px solid #d97706;
    border-radius: 6px;
    box-shadow: 0 0 12px rgba(217, 119, 6, 0.35), inset 0 0 10px rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(217, 119, 6, 0.4);
    padding-bottom: 4px;
}

.ct-label {
    font-size: 10px;
    font-weight: 800;
    color: #fde047;
    letter-spacing: 0.5px;
}

.btn-unequip-title {
    height: 22px;
    padding: 0 10px;
    background: linear-gradient(180deg, #991b1b, #7f1d1d);
    color: #fecaca;
    border: 1px solid #ef4444;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-unequip-title:hover {
    background: linear-gradient(180deg, #b91c1c, #991b1b);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
    color: #fff;
}

.btn-unequip-title:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #334155;
    border-color: #475569;
    color: #94a3b8;
}

.ct-body {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ct-crest-wrap {
    width: 140px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.current-title-crest-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.7));
    animation: titleCrestPulse 3s infinite alternate ease-in-out;
}

@keyframes titleCrestPulse {
    from { transform: scale(0.97); filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6)); }
    to { transform: scale(1.03); filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.9)); }
}

.ct-meta {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ct-name {
    font-size: 13px;
    font-weight: 900;
    color: #fef08a;
    text-shadow: 0 0 6px rgba(250, 204, 21, 0.6);
}

.ct-category {
    font-size: 9.5px;
    color: #38bdf8;
    font-weight: 700;
}

.ct-stats {
    font-size: 9px;
    color: #4ade80;
    font-weight: 600;
}

/* Titles Inventory Box */
.titles-inventory-box {
    background: rgba(20, 10, 5, 0.85);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.titles-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    font-weight: 800;
    color: #fed7aa;
    border-bottom: 1px solid rgba(120, 53, 15, 0.5);
    padding-bottom: 3px;
    margin-bottom: 2px;
}

.titles-hint {
    font-size: 8.5px;
    color: #94a3b8;
    font-weight: 500;
}

.titles-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

/* Title Item Card */
.title-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(35, 17, 8, 0.7);
    border: 1px solid #78350f;
    border-radius: 4px;
    transition: all 0.15s ease;
    gap: 10px;
}

.title-item-card:hover {
    background: rgba(55, 27, 13, 0.85);
    border-color: #d97706;
}

.title-item-card.equipped {
    border-color: #f59e0b;
    background: rgba(120, 53, 15, 0.45);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.35);
}

.title-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.title-item-crest-thumb {
    width: 100px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px #000);
}

.title-item-details {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.title-item-name {
    font-size: 11px;
    font-weight: 800;
    color: #fde047;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.title-item-desc {
    font-size: 8.5px;
    color: #94a3b8;
}

.title-item-stats {
    font-size: 8.5px;
    color: #4ade80;
    font-weight: 600;
}

.title-item-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-equip-title {
    height: 26px;
    padding: 0 12px;
    background: linear-gradient(180deg, #d97706, #b45309);
    color: #ffffff;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-equip-title:hover {
    background: linear-gradient(180deg, #f59e0b, #d97706);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.7);
}

.badge-equipped {
    height: 24px;
    padding: 0 8px;
    background: rgba(22, 101, 52, 0.5);
    color: #4ade80;
    border: 1px solid #16a34a;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* TAB 3: SETTINGS */
.profile-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (max-width: 540px) {
    .profile-settings-grid {
        grid-template-columns: 1fr;
    }
}

.ps-card {
    background: rgba(20, 10, 5, 0.85);
    border: 1px solid #78350f;
    border-radius: 6px;
    padding: 8px 12px;
}

.ps-card-title {
    font-size: 10.5px;
    font-weight: 800;
    color: #fed7aa;
    border-bottom: 1px solid rgba(120, 53, 15, 0.5);
    padding-bottom: 3px;
    margin-bottom: 6px;
}

.ps-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}

.ps-toggle-label {
    font-size: 10px;
    font-weight: 700;
    color: #e2e8f0;
}

.ps-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.ps-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ps-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #334155;
    border: 1px solid #475569;
    border-radius: 20px;
    transition: 0.2s;
}

.ps-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: 0.2s;
}

.ps-switch input:checked + .ps-slider {
    background-color: #15803d;
    border-color: #22c55e;
}

.ps-switch input:checked + .ps-slider:before {
    transform: translateX(16px);
}

.ps-server-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    color: #cbd5e1;
    margin-bottom: 8px;
}

.server-active-name {
    font-weight: 800;
    color: #4ade80;
}

.ps-account-actions {
    display: flex;
    gap: 8px;
}

.btn-account-switch {
    flex: 1;
    height: 32px;
    background: linear-gradient(180deg, #0369a1, #075985);
    color: #ffffff;
    border: 1px solid #38bdf8;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-account-switch:hover {
    background: linear-gradient(180deg, #0284c7, #0369a1);
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.5);
}

.btn-account-logout {
    flex: 1;
    height: 32px;
    background: linear-gradient(180deg, #991b1b, #7f1d1d);
    color: #ffffff;
    border: 1px solid #ef4444;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-account-logout:hover {
    background: linear-gradient(180deg, #b91c1c, #991b1b);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

.profile-modal-footer {
    padding: 6px 12px 10px;
    border-top: 1px solid rgba(120, 53, 15, 0.6);
    display: flex;
    justify-content: flex-end;
    background: rgba(22, 12, 6, 0.95);
}

/* RESPONSIVE MOBILE LANDSCAPE FOR PROFILE MODAL */
@media (max-height: 520px) {
    .profile-modal-box {
        max-height: calc(100% - 10px);
    }
    .profile-tabs-header {
        padding: 2px 6px;
    }
    .profile-tab-btn {
        height: 25px;
        font-size: 9px;
    }
    .profile-modal-body {
        padding: 4px 6px;
        gap: 4px;
    }
    .profile-hero-card {
        padding: 4px 6px;
        gap: 6px;
    }
    .profile-hero-name {
        font-size: 12px;
    }
    .profile-title-row, .profile-clan-row {
        font-size: 9px;
    }
    .profile-bp-banner {
        padding: 1px 5px;
        margin-top: 0;
    }
    .bp-icon {
        font-size: 9px;
    }
    .bp-num {
        font-size: 11px;
    }
    .profile-stats-card {
        padding: 4px 6px;
    }
    .profile-section-title {
        font-size: 9.5px;
        padding-bottom: 2px;
        margin-bottom: 3px;
    }
    .stat-item {
        padding: 1px 0;
    }
    .stat-label, .stat-val {
        font-size: 8.5px;
    }
    .profile-avatar-frame {
        width: 44px;
        height: 44px;
    }
    .profile-avatar-img {
        width: 38px;
        height: 38px;
    }
    .profile-quick-change-btn {
        height: 16px;
        font-size: 7.5px;
        padding: 0 4px;
    }
    .profile-stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2px 4px;
    }
    .avatar-preview-box {
        width: 105px;
        padding: 4px 2px;
    }
    .preview-frame-wrap .profile-avatar-frame {
        width: 46px;
        height: 46px;
    }
    .preview-frame-wrap .profile-avatar-img {
        width: 40px;
        height: 40px;
    }
    .preview-avatar-name {
        font-size: 9.5px;
    }
    .preview-frame-name {
        font-size: 8px;
    }
    .btn-save-avatar {
        height: 22px;
        font-size: 8.5px;
    }
    .btn-reset-avatar {
        height: 20px;
        font-size: 8px;
    }
    .avatar-grid {
        max-height: 80px;
    }
    .frames-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    .ps-card {
        padding: 4px 6px;
    }
    .ps-card-title {
        font-size: 9.5px;
        margin-bottom: 2px;
        padding-bottom: 1px;
    }
    .ps-toggle-row {
        padding: 1px 0;
    }
    .ps-toggle-label {
        font-size: 9px;
    }
    .ps-switch {
        width: 30px;
        height: 16px;
    }
    .ps-slider:before {
        height: 12px;
        width: 12px;
        left: 2px;
        bottom: 2px;
    }
    .ps-switch input:checked + .ps-slider:before {
        transform: translateX(14px);
    }
    .ct-crest-wrap {
        width: 100px;
        height: 32px;
    }
    .current-title-card {
        padding: 4px 8px;
        gap: 3px;
    }
    .ct-name {
        font-size: 10.5px;
    }
    .ct-category, .ct-stats {
        font-size: 8px;
    }
    .titles-grid {
        max-height: 110px;
    }
    .title-item-card {
        padding: 3px 6px;
    }
    .title-item-crest-thumb {
        width: 75px;
        height: 24px;
    }
    .title-item-name {
        font-size: 9.5px;
    }
    .title-item-desc, .title-item-stats {
        font-size: 7.5px;
    }
    .btn-equip-title {
        height: 22px;
        font-size: 8.5px;
        padding: 0 8px;
    }
    .profile-title-quick-btn {
        height: 16px;
        font-size: 7.5px;
        padding: 0 4px;
    }
    .profile-modal-footer {
        padding: 3px 8px 5px;
    }
    .btn-modal-close-footer {
        height: 24px;
        font-size: 9px;
        padding: 0 10px;
    }
}

/* ================================================================
   🏆 HỆ THỐNG BẢNG XẾP HẠNG GIANG HỒ (LEADERBOARD SYSTEM - BXH)
   ================================================================ */

.leaderboard-box {
    width: 95%;
    max-width: 820px;
    height: min(510px, calc(100% - 16px));
    max-height: calc(100% - 16px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1c0e07 0%, #120803 100%);
    border: 2px solid #b45309;
    border-radius: 8px;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(180, 83, 9, 0.25);
    padding: 10px 14px 12px;
    color: #f1f5f9;
    box-sizing: border-box;
}

.leaderboard-tabs-bar {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #78350f;
    padding-bottom: 6px;
    margin-top: 6px;
    margin-bottom: 8px;
    overflow-x: auto;
    white-space: nowrap;
    flex-shrink: 0;
}

.lb-tab-btn {
    background: #2b1307;
    border: 1px solid #78350f;
    border-radius: 4px;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.lb-tab-btn:hover {
    background: #451a03;
    color: #fef08a;
    border-color: #d97706;
}

.lb-tab-btn.active {
    background: linear-gradient(180deg, #b45309 0%, #78350f 100%);
    color: #ffffff;
    border-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

.lb-sect-filter-bar {
    display: flex;
    gap: 6px;
    padding: 5px 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid #451a03;
    border-radius: 4px;
    margin-bottom: 8px;
    overflow-x: auto;
    flex-shrink: 0;
}

.lb-sect-filter-btn {
    background: #1e1108;
    border: 1px solid #572204;
    border-radius: 3px;
    color: #cbd5e1;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    padding: 3px 9px;
    cursor: pointer;
    transition: all 0.12s ease;
    white-space: nowrap;
}

.lb-sect-filter-btn:hover {
    background: #3b1d0c;
    color: #fef08a;
}

.lb-sect-filter-btn.active {
    background: #78350f;
    color: #fef08a;
    border-color: #facc15;
    font-weight: 700;
}

.leaderboard-table-container {
    flex: 1;
    overflow-y: auto;
    background: rgba(10, 5, 2, 0.7);
    border: 1px solid #451a03;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.leaderboard-table-header {
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, #2b1307, #180902);
    border-bottom: 2px solid #78350f;
    padding: 6px 10px;
    font-weight: 700;
    font-size: 11px;
    color: #facc15;
    position: sticky;
    top: 0;
    z-index: 2;
    letter-spacing: 0.5px;
}

.leaderboard-table-body {
    display: flex;
    flex-direction: column;
}

.lb-row {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid rgba(120, 53, 15, 0.35);
    font-size: 11.5px;
    transition: background 0.12s ease;
}

.lb-row:hover {
    background: rgba(180, 83, 9, 0.15);
}

.lb-row.top-1 {
    background: rgba(234, 179, 8, 0.08);
}

.lb-row.top-2 {
    background: rgba(203, 213, 225, 0.06);
}

.lb-row.top-3 {
    background: rgba(217, 119, 6, 0.06);
}

.lb-player-row {
    background: rgba(234, 179, 8, 0.16) !important;
    border: 1px solid rgba(234, 179, 8, 0.6) !important;
    border-radius: 4px;
    box-shadow: inset 0 0 10px rgba(250, 204, 21, 0.25);
}

.lb-pulse-highlight {
    animation: lbPulse 0.9s infinite alternate;
}

@keyframes lbPulse {
    0% {
        background: rgba(234, 179, 8, 0.2);
        box-shadow: 0 0 15px #eab308;
    }
    100% {
        background: rgba(234, 179, 8, 0.55);
        box-shadow: 0 0 25px #facc15;
    }
}

/* Các cột trong bảng BXH */
.lb-col {
    box-sizing: border-box;
}

.col-rank {
    width: 48px;
    text-align: center;
    flex-shrink: 0;
}

.col-char {
    flex: 2;
    min-width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.col-pet {
    flex: 2;
    min-width: 150px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.col-owner {
    flex: 1.5;
    min-width: 120px;
    display: flex;
    flex-direction: column;
}

.col-sect {
    flex: 1.2;
    min-width: 100px;
    font-size: 11px;
    font-weight: 600;
}

.col-level {
    width: 65px;
    text-align: center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.col-val {
    flex: 1.8;
    min-width: 130px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.col-act {
    width: 115px;
    text-align: center;
    flex-shrink: 0;
}

/* Badges xếp hạng */
.lb-rank-badge {
    display: inline-block;
    min-width: 24px;
    height: 22px;
    line-height: 22px;
    padding: 0 4px;
    text-align: center;
    border-radius: 4px;
    font-weight: 800;
    font-size: 10.5px;
    background: #26160c;
    color: #94a3b8;
    border: 1px solid #451a03;
    box-sizing: border-box;
}

.lb-rank-badge.rank-1 {
    background: linear-gradient(135deg, #eab308, #ca8a04);
    color: #111;
    border-color: #fef08a;
    font-size: 11.5px;
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.6);
}

.lb-rank-badge.rank-2 {
    background: linear-gradient(135deg, #cbd5e1, #94a3b8);
    color: #111;
    border-color: #f8fafc;
    font-size: 11.5px;
    box-shadow: 0 0 6px rgba(203, 213, 225, 0.5);
}

.lb-rank-badge.rank-3 {
    background: linear-gradient(135deg, #d97706, #92400e);
    color: #ffffff;
    border-color: #fde68a;
    font-size: 11.5px;
    box-shadow: 0 0 6px rgba(217, 119, 6, 0.5);
}

.lb-rank-badge.rank-top10 {
    background: #3b1d0c;
    color: #facc15;
    border-color: #b45309;
}

/* Thông tin nhân vật và Pet trong hàng */
.lb-char-title {
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 2px;
    letter-spacing: 0.3px;
}

.lb-char-name-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.lb-char-name {
    font-weight: 700;
    font-size: 12px;
}

.lb-guild-tag {
    font-size: 10px;
    color: #94a3b8;
}

.lb-pet-icon-wrap {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: #0f0703;
    border: 2px solid #78350f;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.lb-pet-img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.lb-pet-text {
    display: flex;
    flex-direction: column;
}

.lb-pet-name {
    font-weight: 700;
    font-size: 11.5px;
}

.lb-pet-sub {
    font-size: 9.5px;
    color: #94a3b8;
}

.lb-comp-tag {
    font-size: 9px;
    color: #a855f7;
    margin-top: 1px;
}

.lb-val-number {
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: 0.3px;
}

.val-combat-power {
    color: #f87171;
    text-shadow: 0 0 6px rgba(248, 113, 113, 0.4);
}

.val-pet-power {
    color: #38bdf8;
    text-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
}

.lb-val-sub {
    font-size: 9.5px;
    color: #94a3b8;
}

.lb-wealth-gold, .lb-wealth-knb {
    font-size: 11px;
    line-height: 1.3;
}

/* Nút tương tác trong bảng */
.lb-actions-group {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.btn-lb-action {
    background: #2b1307;
    border: 1px solid #78350f;
    border-radius: 3px;
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 6px;
    cursor: pointer;
    transition: all 0.12s ease;
}

.btn-lb-action:hover {
    background: #451a03;
    border-color: #f59e0b;
    color: #fef08a;
}

.btn-lb-action.btn-friend:hover {
    border-color: #38bdf8;
    color: #38bdf8;
}

.lb-self-badge {
    display: inline-block;
    background: #14532d;
    border: 1px solid #22c55e;
    color: #86efac;
    border-radius: 3px;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
}

/* Footer BXH */
.leaderboard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #78350f;
    font-size: 11px;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.lb-footer-rank-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: #e2e8f0;
}

.lb-footer-actions {
    display: flex;
    gap: 6px;
}

.btn-lb-footer {
    background: #2b1307;
    border: 1px solid #b45309;
    color: #facc15;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-lb-footer:hover {
    background: #78350f;
    border-color: #facc15;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(250, 204, 21, 0.4);
}

/* Mobile responsive */
@media (max-width: 768px), (max-height: 520px) {
    .leaderboard-box {
        width: calc(100% - 12px);
        max-width: 720px;
        height: calc(100% - 12px);
        max-height: calc(100% - 12px);
        padding: 6px 8px;
    }
    .leaderboard-tabs-bar {
        gap: 4px;
        margin-bottom: 4px;
    }
    .lb-tab-btn {
        font-size: 10px;
        padding: 4px 8px;
    }
    .col-rank {
        width: 36px;
    }
    .col-level {
        width: 50px;
    }
    .col-act {
        width: 90px;
    }
    .btn-lb-action {
        font-size: 9px;
        padding: 2px 4px;
    }
}

/* =========================================================
   ✨ MODAL ẤP NỞ TRỨNG LINH THÚ (DIVINE EGG HATCH CELEBRATION)
   ========================================================= */
.egg-hatch-content {
    position: relative;
    width: 90%;
    max-width: 440px;
    background: radial-gradient(circle at 50% 30%, #1e1108 0%, #0c0704 70%, #050201 100%);
    border: 2px solid #b45309;
    border-radius: 12px;
    box-shadow: 0 0 35px rgba(245, 158, 11, 0.45), inset 0 0 15px rgba(245, 158, 11, 0.2);
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    color: #fef08a;
    font-family: inherit;
    text-align: center;
}

.egg-hatch-rays {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(245, 158, 11, 0.12) 20deg, transparent 40deg, rgba(245, 158, 11, 0.12) 60deg, transparent 80deg, rgba(245, 158, 11, 0.12) 100deg, transparent 120deg, rgba(245, 158, 11, 0.12) 140deg, transparent 160deg, rgba(245, 158, 11, 0.12) 180deg, transparent 200deg, rgba(245, 158, 11, 0.12) 220deg, transparent 240deg, rgba(245, 158, 11, 0.12) 260deg, transparent 280deg, rgba(245, 158, 11, 0.12) 300deg, transparent 320deg, rgba(245, 158, 11, 0.12) 340deg, transparent 360deg);
    animation: rayRotate 24s linear infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes rayRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.egg-hatch-title {
    position: relative;
    z-index: 1;
    font-size: 15px;
    font-weight: 900;
    color: #fef08a;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.8), 0 2px 4px #000;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.egg-hatch-stage {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
}

.egg-hatch-aura {
    position: absolute;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.45) 0%, rgba(217, 119, 6, 0.15) 60%, transparent 80%);
    filter: blur(8px);
    animation: auraPulse 1.6s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes auraPulse {
    0% { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(1.3); opacity: 1; filter: blur(12px); }
}

.egg-hatch-egg-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(245, 158, 11, 0.9));
    animation: eggWobble 0.6s ease-in-out infinite alternate;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.egg-hatch-egg-img.cracking {
    animation: eggCrackShake 0.12s infinite;
    filter: drop-shadow(0 0 28px #fff) brightness(1.6);
}

@keyframes eggWobble {
    0% { transform: rotate(-5deg) scale(1); }
    100% { transform: rotate(5deg) scale(1.06); }
}

@keyframes eggCrackShake {
    0% { transform: translate(-3px, 1px) rotate(-4deg); }
    25% { transform: translate(3px, -2px) rotate(4deg); }
    50% { transform: translate(-2px, -1px) rotate(-3deg); }
    75% { transform: translate(2px, 2px) rotate(3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.egg-hatch-pet-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: petRevealScale 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes petRevealScale {
    0% { transform: scale(0.3); opacity: 0; filter: brightness(3); }
    60% { transform: scale(1.1); filter: brightness(1.4); }
    100% { transform: scale(1); opacity: 1; filter: none; }
}

.egg-hatch-pet-portrait {
    width: 96px;
    height: 96px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.85));
    margin-bottom: 8px;
}

.egg-hatch-pet-name {
    font-size: 18px;
    font-weight: 900;
    color: #fde047;
    text-shadow: 0 0 12px rgba(250, 204, 21, 0.8), 0 2px 4px #000;
    margin-bottom: 2px;
}

.egg-hatch-pet-tier {
    font-size: 11px;
    font-weight: 700;
    color: #fdba74;
    text-shadow: 0 1px 2px #000;
    margin-bottom: 4px;
}

.egg-hatch-pet-stars {
    font-size: 13px;
    font-weight: 900;
    color: #facc15;
    letter-spacing: 2px;
    text-shadow: 0 0 6px rgba(250, 204, 21, 0.7);
    margin-bottom: 6px;
}

.egg-hatch-pet-desc {
    font-size: 10px;
    color: #cbd5e1;
    max-width: 320px;
    line-height: 14px;
    text-shadow: 0 1px 2px #000;
    background: rgba(0, 0, 0, 0.45);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(180, 83, 9, 0.4);
}

.egg-hatch-actions {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* ========================================================= */
/* 📱 SMARTPHONE FULLSCREEN LANDSCAPE & PWA STYLES          */
/* ========================================================= */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }
    #game-container {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        box-sizing: border-box;
    }
    #gameCanvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: fill !important;
    }
}

:fullscreen #game-container,
:-webkit-full-screen #game-container {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    box-sizing: border-box;
}

/* Prompt xoay màn hình khi cầm dọc trên thiết bị di động */
@media screen and (orientation: portrait) and (max-width: 1024px) {
    #orientation-landscape-prompt {
        display: flex !important;
    }
}

.orientation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    background: radial-gradient(circle at center, #1c1917 0%, #060913 95%);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.orient-box {
    max-width: 420px;
    background: rgba(15, 23, 42, 0.95);
    border: 2px solid #b45309;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9), 0 0 20px rgba(245, 158, 11, 0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.orient-phone-anim {
    font-size: 3.5rem;
    margin-bottom: 16px;
    animation: rotatePhone 2.5s infinite ease-in-out;
    display: inline-block;
}

@keyframes rotatePhone {
    0% { transform: rotate(0deg) scale(1); }
    30% { transform: rotate(90deg) scale(1.1); }
    70% { transform: rotate(90deg) scale(1.1); }
    100% { transform: rotate(0deg) scale(1); }
}

.orient-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #f59e0b;
    margin: 0 0 12px 0;
    letter-spacing: 1px;
}

.orient-desc {
    font-size: 0.95rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0 0 24px 0;
}

.btn-orient-action {
    background: linear-gradient(135deg, #b45309, #d97706);
    color: #fff;
    border: 1px solid #fef08a;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(217, 119, 6, 0.4);
    transition: all 0.2s ease;
}

.btn-orient-action:active {
    transform: scale(0.96);
}

/* Nút Quick Fullscreen FAB: Đặt an toàn, không bao giờ che nút tắt X của modal */
.btn-quick-fullscreen-fab {
    position: fixed;
    top: 76px;
    right: 12px;
    z-index: 80 !important;
    width: 32px;
    height: 32px;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: 6px;
    color: #f59e0b;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.2s ease;
}

.btn-quick-fullscreen-fab:hover {
    background: rgba(245, 158, 11, 0.25);
    border-color: #f59e0b;
    transform: scale(1.06);
}

/* Ẩn hoàn toàn nút zoom khi đang ở màn hình gateway / đăng nhập hoặc khi đã fullscreen */
#game-container.in-gateway ~ .btn-quick-fullscreen-fab,
#game-container.in-gateway #btn-quick-fullscreen,
.in-gateway .btn-quick-fullscreen-fab,
:fullscreen .btn-quick-fullscreen-fab,
:-webkit-full-screen .btn-quick-fullscreen-fab {
    display: none !important;
}

/* ================================================================
   📱 ĐỒNG BỘ TOÀN DIỆN: VỪA MỌI MÀN HÌNH ĐIỆN THOẠI & GÓI APK
   ================================================================ */
body.is-apk,
#game-container.is-apk {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

@media screen and (orientation: landscape) and (max-height: 640px) {
    body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
    }
    #game-container {
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        box-sizing: border-box;
    }
    #gameCanvas {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
        object-fit: fill !important;
    }
}

/* Tối ưu cuộn ngang cho các hàng tab dài */
.inventory-tabs,
.leaderboard-tabs-bar,
.profile-tabs-header,
.skill-tabs-bar,
.skill-preset-bar {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

/* Tối ưu cuộn dọc cho các danh sách nội dung dài */
.inventory-grid,
.leaderboard-table-body,
.profile-tab-panel,
.skill-list-col,
.quest-list-panel,
.chat-log-box,
.settings-body-scroll {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}