/* ============================================================================
   GIANG HỒ KÝ — Custom Styles & UI Animations
   Tách riêng từ giang_ho_ky.html để chuẩn hóa mô hình CSS
   ============================================================================ */

/* Định vị chiều cao khối thuộc tính bên phải cân đối ngang đầu nhân vật / quái vật */
@media (min-width: 768px) {
    #screen-char-card-container {
        padding-top: 24px !important;
    }
    #screen-mon-card-container {
        padding-top: 56px !important;
    }
}

* { 
    box-sizing: border-box; 
    user-select: none; 
}

/* Custom Scrollbars */
::-webkit-scrollbar { 
    width: 4px; 
    height: 4px; 
}
::-webkit-scrollbar-track { 
    background: transparent; 
}
::-webkit-scrollbar-thumb { 
    background: rgba(234, 179, 8, 0.25); 
    border-radius: 9999px; 
}
::-webkit-scrollbar-thumb:hover { 
    background: rgba(234, 179, 8, 0.6); 
}
.no-scrollbar::-webkit-scrollbar { 
    display: none !important; 
    width: 0 !important; 
    height: 0 !important; 
}
.no-scrollbar { 
    -ms-overflow-style: none !important; 
    scrollbar-width: none !important; 
}

/* Hiệu ứng rung màn hình chiến đấu - Đã vô hiệu hóa */
.screen-shake-anim {
    animation: none !important;
    transform: none !important;
}

/* Chữ số sát thương / hiệu ứng nổi */
.floating-combat-text {
    position: absolute;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 13px;
    font-weight: 900;
    pointer-events: none;
    z-index: 50;
    animation: floatCombatAnim 1.1s ease-out forwards;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.9));
    white-space: nowrap;
}
.floating-combat-text.is-crit {
    font-size: 15px;
    filter: drop-shadow(0 0 10px rgba(239,68,68,0.75));
}
@keyframes floatCombatAnim {
    0% { transform: translateY(0) scale(0.85); opacity: 0; }
    20% { transform: translateY(-12px) scale(1.1); opacity: 1; }
    75% { transform: translateY(-28px) scale(1); opacity: 1; }
    100% { transform: translateY(-44px) scale(0.95); opacity: 0; }
}

/* Bóng đổ kim quang */
.shadow-gold-glow {
    box-shadow: 0 0 16px rgba(250, 204, 21, 0.28);
}

/* QUY TẮC THIẾT KẾ: TRIỆT TIÊU TOÀN DIỆN VIỀN / NỀN HỘP KHI HOVER / HIGHLIGHT CHO TẤT CẢ BUTTON */
button, .btn, .btn-pure-icon, .icon-action-btn, a.btn, a[role="button"], [role="button"] {
    outline: none !important;
}
button:hover, .btn:hover, .btn-pure-icon:hover, .icon-action-btn:hover, a.btn:hover, a[role="button"]:hover, [role="button"]:hover,
button:focus, button:focus-visible, .btn:focus-visible, button.active, button.selected, button:active {
    border: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* CHỈ SÁNG ICON VÀ TEXT LÊN THÔI */
button:hover img, .btn:hover img, a.btn:hover img, [role="button"]:hover img, .group:hover img,
button:hover svg, button:hover i, .btn-pure-icon:hover img, .btn-pure-icon:hover i {
    filter: drop-shadow(0 0 14px rgba(250, 204, 21, 0.95)) brightness(1.2) !important;
}
button:hover span, .btn:hover span, a.btn:hover span, .group:hover span, button:hover p,
.btn-pure-icon:hover span, .btn-pure-icon:hover p {
    text-shadow: 0 0 12px rgba(250, 204, 21, 0.85) !important;
}

/* ==========================================================================
   BẢN ĐỒ CHIẾN LƯỢC TOÀN CẢNH (GRAND STRATEGY WORLD MAP 1376x768)
   ========================================================================== */
#world-map-viewport {
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    transform-origin: center center;
}

.region-slice {
    display: none !important;
}

.region-poly {
    fill: rgba(0, 0, 0, 0.001);
    stroke: transparent;
    stroke-width: 0;
    pointer-events: all;
    cursor: pointer;
    transition: all 0.2s ease;
}

.region-poly:hover, .region-poly.active {
    fill: transparent !important;
    stroke: transparent !important;
    stroke-width: 0 !important;
    filter: none !important;
}

/* Bản đồ cố định tuyệt đối, không bao giờ bị zoom lên hoặc thu nhỏ */
#world-map-viewport {
    transform: none !important;
    transform-origin: center center !important;
}

/* Thành phần cứ điểm HD: Hơi zoom nhẹ và phát quang tinh tế khi hover */
.node-item {
    position: absolute;
    cursor: pointer;
    z-index: 30;
    transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1), filter 0.28s ease;
    transform-origin: center bottom;
}

.node-item img {
    opacity: 0.95;
    transition: transform 0.28s ease, filter 0.28s ease, opacity 0.2s ease;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.75));
}

.node-item:hover, .node-item.active {
    transform: scale(1.12) translateY(-3px) !important;
    z-index: 45;
}

.node-item:hover img, .node-item.active img {
    opacity: 1 !important;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.9)) drop-shadow(0 0 12px rgba(251, 191, 36, 0.75)) brightness(1.12) !important;
}

/* Tinh giản nhãn địa danh trên bản đồ: phẳng hoàn toàn, siêu tối giản, không khung hộp, chữ thanh mảnh */
.node-item .node-badge {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    color: #fef3c7 !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    text-shadow: 0 1px 2px #000, 0 0 3px #000, 0 0 5px rgba(0, 0, 0, 0.85) !important;
    pointer-events: none;
    transition: all 0.2s ease !important;
    backdrop-filter: none !important;
    bottom: -11px !important;
}

/* Khi hover hoặc được kích hoạt: chữ vàng kim phát sáng nhẹ, không đóng hộp che cảnh quan */
.node-item:hover .node-badge, .node-item.active .node-badge {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fef08a !important;
    font-size: 8.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.9), 0 1px 3px #000, 0 0 4px #000 !important;
    transform: translateX(-50%) scale(1.05) !important;
    padding: 0 !important;
    bottom: -11px !important;
}

.custom-scroll::-webkit-scrollbar { width: 4px; }
.custom-scroll::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.6); }
.custom-scroll::-webkit-scrollbar-thumb { background: rgba(245, 158, 11, 0.4); border-radius: 4px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(245, 158, 11, 0.8); }

/* Vị trí động thông minh & kiểu dáng tinh gọn cho Modal chiến lược */
#world-map-info-modal {
    width: 320px !important;
    max-width: 88% !important;
    padding: 12px !important;
    background-color: rgba(12, 18, 30, 0.94) !important;
    z-index: 60 !important;
    transition: opacity 0.28s ease, transform 0.28s ease;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(245, 158, 11, 0.35);
}

#world-map-info-modal #modal-title {
    font-size: 13.5px !important;
    font-weight: 700 !important;
}
#world-map-info-modal #modal-badge {
    font-size: 8.5px !important;
    padding: 1px 6px !important;
}
#world-map-info-modal #modal-military, 
#world-map-info-modal #modal-economy, 
#world-map-info-modal #modal-defense {
    font-size: 11px !important;
    font-weight: 700 !important;
}
#world-map-info-modal #modal-bonus-box {
    padding: 6px 8px !important;
    font-size: 10px !important;
}
#world-map-info-modal #modal-lore {
    font-size: 10px !important;
    padding: 8px !important;
    line-height: 1.4 !important;
}

#world-map-info-modal * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#world-map-info-modal.modal-pos-right {
    right: 1.25rem !important;
    left: auto !important;
    top: 4.5rem !important;
}

#world-map-info-modal.modal-pos-left {
    left: 1.25rem !important;
    right: auto !important;
    top: 7.25rem !important; /* Hạ thấp xuống để không che nút chọn Kỷ Nguyên ở top-16 (4rem) */
    max-height: calc(100vh - 135px) !important;
}