/* League Item Stats Widget CSS */

.row-content>.left {
    position: relative !important;
    overflow: visible !important;
    z-index: 20 !important;
}

.row-content {
    overflow: visible !important;
}

.row {
    position: relative !important;
    overflow: visible !important;
}

/* Fix for connected cards layout - ensures items stretch to full height */
.poe-catalogue .row {
    display: flex;
    /* Ensure flex parent for stretching */
}

.poe-catalogue .row-content {
    height: 100%;
    /* Fill the flex parent */
}

/* ==========================================================================
   DESKTOP WIDGET (Strictly for Desktop Layout)
   ========================================================================== */
.item-stats-widget-desktop {
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.item-stats-widget-desktop>* {
    pointer-events: auto;
}

.item-stats-widget-mobile {
    display: none;
    /* Hidden on desktop */
}

/* Desktop Widget Components */
.item-stats-widget-desktop .builds-info-box {
    display: flex !important;
    background-color: transparent;
    background-image: none;
    border: 1px solid rgba(196, 156, 80, 0.5);
    border-radius: 5px;
    padding: 0 5px;
    height: 32px;
    cursor: url('../images/pointer.png'), pointer;

    position: absolute;
    bottom: 23px;
    left: 12px;
    right: 12px;

    color: #c49c50;
    font-weight: normal;
    text-align: center;
    z-index: 10;
    font-size: 13px;
    transition: all 0.2s ease;
    overflow: visible;
    line-height: 1.2;
    align-items: center;
    justify-content: center;
    outline: none !important;
}

.builds-text {
    width: 100%;
    text-align: center;
    display: block;
}

@keyframes spin-builds {
    to {
        transform: rotate(360deg);
    }
}

.view-builds-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(196, 156, 80, 0.3);
    border-radius: 50%;
    border-top-color: #c49c50;
    animation: spin-builds 0.8s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* When no View Builds button exists, keep Extra Info at lower position */
.item-stats-widget-desktop:not(:has(.view-builds-box)) .builds-info-box {
    bottom: 23px;
}

/* When View Builds button exists, move Extra Info up */
.item-stats-widget-desktop:has(.view-builds-box) .builds-info-box {
    bottom: 60px;
}

/* View Builds Button (below Extra Info) */
.item-stats-widget-desktop .view-builds-box {
    display: flex !important;
    background-color: transparent;
    background-image: none;
    border: 1px solid rgba(196, 156, 80, 0.5);
    border-radius: 5px;
    padding: 0 10px;
    height: 32px;
    cursor: url('../images/pointer.png'), pointer;

    position: absolute;
    bottom: 23px;
    left: 12px;
    right: 12px;

    color: #c49c50;
    font-weight: normal;
    text-align: center;
    z-index: 10;
    font-size: 13px;
    transition: all 0.2s ease;
    overflow: visible;
    line-height: 1.2;
    align-items: center;
    justify-content: center;
    outline: none !important;
}

.view-builds-text {
    width: 100%;
    text-align: center;
    display: block;
}

.item-stats-widget-desktop .view-builds-box:hover {
    background-color: rgba(196, 156, 80, 0.1);
    border-color: #c49c50;
    color: #d4af37;
}

.item-stats-widget-desktop .ascendancy-icons {
    position: absolute;
    bottom: 111px;
    /* Moved up from 74px by 37px (74 + 37 = 111) */
    left: 0;
    width: 100%;
    z-index: 9;

    /* Use Grid */
    display: grid !important;
    grid-template-columns: repeat(2, 38px);
    column-gap: 5px;
    row-gap: 5px;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
}

.item-stats-widget-desktop .skill-icons {
    position: absolute;
    /* bottom is dynamically calculated in JS based on ascendancy icon count */
    bottom: 154px;
    /* Base position, will be adjusted by JS */
    left: 0;
    width: 100%;
    z-index: 9;

    /* Use Grid - same 2-column layout as ascendancy */
    display: grid !important;
    grid-template-columns: repeat(2, 38px);
    column-gap: 5px;
    row-gap: 5px;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
}

/* 
   Special Layout for exactly 3 skill icons on Desktop:
   Row 1: Icon 1 (Top Left)
   Row 2: Icon 2 (Bottom Left), Icon 3 (Bottom Right)
   
   Strategy: Make the 1st icon span the full width (2 columns). 
   This forces Grid to put the next two items on the next row.
   We align the 1st icon to the start so it sits on the left.
*/
.item-stats-widget-desktop .skill-icons .icon-tooltip-wrapper:first-child:nth-last-child(3) {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
}

/* Explicitly hide labels on desktop as requested */
.item-stats-widget-desktop .ascendancy-label,
.item-stats-widget-desktop .skill-label,
.item-stats-widget-desktop .skill-names {
    display: none !important;
}

/* Desktop Image Sizing */
.item-stats-widget-desktop img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid #3a3a3a !important;
    background: rgba(15, 15, 15, 0.8) !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Desktop Ascendancy Specific: Uniform Width for alignment */
.item-stats-widget-desktop .ascendancy-icons img {
    width: 38px !important;
    height: 38px !important;
    object-fit: cover !important;
    border-radius: 6px;
    padding: 1px !important;
}

/* Tooltip & Text Logic for Desktop */
.item-stats-widget-desktop .builds-info-box:hover {
    background-color: rgba(196, 156, 80, 0.1);
    border-color: #c49c50;
    color: #d4af37;
}

/* Tooltip & Text Logic for Desktop (Restored) */
.stats-tooltip {
    display: none;
    position: absolute;
    left: 100%;
    bottom: 0;
    margin-left: 20px;
    background: rgba(10, 8, 5, 0.98);
    border: 1px solid #ff8c00;
    border-radius: 8px;
    padding: 10px 12px;
    min-width: 420px;
    max-width: 500px;
    z-index: 99999;
    pointer-events: auto;
    font-family: 'Fontin SmallCaps', sans-serif;
}

/* Responsive Desktop Adjustment for Extra Info Button */
/* Responsive Desktop Adjustment for Extra Info Button */
@media (min-width: 769px) and (max-width: 1500px) {
    .item-stats-widget-desktop .builds-info-box {
        font-size: 12px !important;
        padding: 0 4px !important;
        /* Minimized padding */
        white-space: nowrap !important;
    }
}

@media (min-width: 769px) and (max-width: 1300px) {
    .item-stats-widget-desktop .builds-info-box {
        font-size: 11px !important;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .item-stats-widget-desktop .builds-info-box {
        font-size: 10px !important;
        letter-spacing: -0.5px;
        /* Tighter tracking */
    }
}

/* Responsive Desktop Adjustment for Icons (Below 1400px) */
@media (min-width: 769px) and (max-width: 1400px) {

    .item-stats-widget-desktop .ascendancy-icons,
    .item-stats-widget-desktop .skill-icons {
        grid-template-columns: repeat(2, 32px) !important;
    }

    .item-stats-widget-desktop img,
    .item-stats-widget-desktop .ascendancy-icons img,
    .item-stats-widget-desktop .icon-tooltip-wrapper,
    .ascendancy-icons .icon-tooltip-wrapper {
        width: 32px !important;
        height: 32px !important;
    }
}

/* Even smaller icons for very narrow desktop/tablet landscape */
@media (min-width: 769px) and (max-width: 1150px) {

    .item-stats-widget-desktop .ascendancy-icons,
    .item-stats-widget-desktop .skill-icons {
        grid-template-columns: repeat(2, 26px) !important;
        column-gap: 3px !important;
        row-gap: 3px !important;
    }

    .item-stats-widget-desktop img,
    .item-stats-widget-desktop .ascendancy-icons img,
    .item-stats-widget-desktop .icon-tooltip-wrapper,
    .ascendancy-icons .icon-tooltip-wrapper {
        width: 26px !important;
        height: 26px !important;
    }
}

/* Hide "Info" text between 990px and 1300px */
@media (min-width: 990px) and (max-width: 1300px) {
    .extra-info-suffix {
        display: none !important;
    }
}

/* ==========================================================================
   MOBILE WIDGET (Strictly for Mobile Layout)
   ========================================================================== */
@media (max-width: 768px) {
    .item-stats-widget-desktop {
        display: none !important;
    }

    .item-stats-widget-mobile {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-top: 10px;
        margin-bottom: -15px !important;
        /* Minimize gap to textcurrency */
        padding-bottom: 5px !important;
        padding-top: 10px;
        border-top: 1px dashed #333;
        gap: 8px;
        /* Reduce gap between elements */
    }

    /* Grid Layout for Icons */
    .item-stats-widget-mobile .ascendancy-icons {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px !important;
        width: 100%;
    }

    .item-stats-widget-mobile .skill-icons {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px !important;
        width: 100%;
    }

    /* Order: Ascendancy (1) -> Extra Info (2) -> Skill Icons (3) */
    .item-stats-widget-mobile .ascendancy-icons {
        order: 1;
    }

    .item-stats-widget-mobile .builds-info-box {
        order: 2;
    }

    .item-stats-widget-mobile .view-builds-box {
        order: 3;
    }

    .item-stats-widget-mobile .skill-icons {
        order: 4;
    }

    /* Button Styling */
    .item-stats-widget-mobile .builds-info-box {
        display: flex !important;
        font-size: 11px;
        padding: 5px 10px;
        width: fit-content;
        min-width: 90px;
        max-width: 180px;
        margin: 0 auto;

        background-color: #111114;
        border: 1px solid #8B6914;
        border-radius: 5px;
        color: #d4af37;
        font-weight: normal;
        text-align: center;
        cursor: pointer;
    }

    .item-stats-widget-mobile .view-builds-box {
        display: flex !important;
        font-size: 11px;
        padding: 5px 10px;
        width: fit-content;
        min-width: 90px;
        max-width: 180px;
        margin: 0 auto;

        background-color: #111114;
        border: 1px solid #8B6914;
        border-radius: 5px;
        color: #d4af37;
        font-weight: normal;
        text-align: center;
        cursor: pointer;
    }

    /* Hide labels/extra text to save space */
    .item-stats-widget-mobile .ascendancy-label,
    .item-stats-widget-mobile .skill-label,
    .item-stats-widget-mobile .skill-names {
        display: none !important;
    }

    /* Image Sizing - Mobile Base */
    .item-stats-widget-mobile img {
        width: 36px !important;
        /* Base for square icons */
        height: 36px !important;
        border: 1px solid #3a3a3a !important;
        background: rgba(15, 15, 15, 0.8) !important;
        border-radius: 4px;
        padding: 0 !important;
    }

    /* Mobile Ascendancy Specific: Aspect Ratio */
    .item-stats-widget-mobile .ascendancy-icons img {
        width: auto !important;
        /* Allow natural aspect ratio */
        height: 36px !important;
        /* Fixed height */
        object-fit: cover !important;
        border-radius: 6px;
        padding: 0 !important;
    }
}

/* Common Tooltip Styles (Content) */
.stats-tooltip-content {
    color: #c8aa6e;
    font-size: 12.5px;
    line-height: 1.4;
    white-space: normal;
}

.stats-tooltip-content .stat-line {
    margin-bottom: 5px;
    color: #b8b8b8;
    font-size: 13.5px;
}

.stats-tooltip-content .highlight {
    color: #ffa500;
    font-weight: bold;
}

.stats-tooltip-content .separator-small {
    height: 2px;
    background: linear-gradient(to right, transparent, #8B6914, transparent);
    margin: 8px 0;
}

.stats-tooltip-content .also-item {
    margin-left: 10px;
    font-size: 12.5px;
}

.stats-tooltip-content .percentage {
    color: #b4b4ff;
}

.stats-tooltip-content strong {
    color: #ffa500;
    font-weight: bold;
    font-size: 14px;
}

/* Also Mirrored Pagination */
.also-mirrored-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(139, 105, 20, 0.3);
}

.also-mirrored-pagination .pagination-prev,
.also-mirrored-pagination .pagination-next {
    color: #c49c50;
    font-size: 16px;
    font-weight: bold;
    cursor: url('../images/pointer.png'), pointer;
    padding: 0 8px;
    border: 1px solid rgba(196, 156, 80, 0.5);
    border-radius: 4px;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    position: relative;
    top: -1px;
    /* Move arrow up 1px for perfect centering */
}

.also-mirrored-pagination .pagination-prev:hover,
.also-mirrored-pagination .pagination-next:hover {
    background-color: rgba(196, 156, 80, 0.2);
    border-color: #c49c50;
    color: #d4af37;
}

.also-mirrored-pagination .pagination-info {
    color: #b8b8b8;
    font-size: 12px;
    min-width: 70px;
    text-align: center;
}

/* Bloodlines Toggle */
.bloodlines-toggle {
    color: #c49c50;
    cursor: url('../images/pointer.png'), pointer;
    padding: 4px 0;
    font-size: 12px;
    user-select: none;
    transition: color 0.2s ease;
    text-align: center;
    /* Center on all views */
}

.bloodlines-toggle:hover {
    color: #d4af37;
}

.bloodlines-toggle .toggle-icon {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 10px;
    margin-right: 4px;
}

.bloodlines-toggle.expanded .toggle-icon {
    transform: rotate(90deg);
}

.bloodlines-content {
    display: none;
    padding-left: 8px;
}

.bloodlines-content.show {
    display: block;
}

/* Category Filter Dropdown */
/* Category Filter - Custom Dropdown (Desktop) */
.custom-category-select {
    position: relative;
    width: auto;
    min-width: 100px;
    max-width: 140px;
    margin: 8px auto;
    cursor: url('../images/pointer.png'), pointer;
    user-select: none;
}

.custom-select-trigger {
    position: relative;
    padding: 5px 28px 5px 13px;
    /* Shifted right 2px more for better centering between left border and arrow */
    background: rgba(10, 8, 5, 0.95);
    border: 1px solid #8b6914;
    border-radius: 4px;
    color: #c49c50;
    font-size: 12px;
    font-family: 'Fontin SmallCaps', sans-serif;
    transition: border-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    /* Prevent text wrapping */
    overflow: hidden;
    /* Hide overflow */
    text-overflow: ellipsis;
    /* Add ellipsis if still too long */
}

.custom-select-trigger:hover {
    border-color: #d4af37;
}

.custom-category-select.open .custom-select-trigger {
    border-color: #ffa500;
    border-radius: 4px 4px 0 0;
    border-bottom-color: #ffa500;
}

.custom-select-arrow {
    position: absolute;
    right: 5px;
    font-size: 10px;
    transition: transform 0.2s ease;
}

.custom-category-select.open .custom-select-arrow {
    transform: rotate(180deg);
}

.custom-select-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #0a0805;
    border: 1px solid #ffa500;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}

.custom-category-select.open .custom-select-options {
    display: block;
}

.custom-select-option {
    padding: 8px 10px;
    color: #c49c50;
    font-size: 12px;
    font-family: 'Fontin SmallCaps', sans-serif;
    transition: background-color 0.15s ease;
    text-align: center;
    /* Center option text */
}

.custom-select-option:hover {
    background: #1a1612;
    color: #d4af37;
}

.custom-select-option:first-child {
    padding-top: 10px;
}

.custom-select-option:last-child {
    padding-bottom: 10px;
}

/* Native select (Mobile only) */
/* Mobile Tooltip Tweaks */
@media (max-width: 768px) {

    /* Center custom dropdown on mobile */
    .custom-category-select {
        margin: 8px auto;
        min-width: 100px;
        max-width: 140px;
    }

    /* Force centered text on mobile tooltips */
    .also-mirrored-item-tooltip,
    .also-mirrored-item-tooltip .itemName {
        text-align: center !important;
    }

    .stats-tooltip-mobile .stat-line {
        justify-content: center;
        text-align: center;
    }
}

/* Hide native select on desktop */
@media (min-width: 769px) {
    .also-mirrored-filter .category-select {
        display: none;
    }
}

/* Mobile category dropdown - force dark scheme */
@media (max-width: 768px) {
    .also-mirrored-filter .category-select {
        color-scheme: dark;
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        max-width: 100%;
        padding: 10px 30px 10px 12px;
        font-size: 14px;
        background-color: #0a0805;
        border: 1px solid #8b6914;
        text-align: center;
        /* Center native select text */
    }

    .also-mirrored-filter .category-select option {
        background-color: #0a0805;
        color: #c49c50;
    }
}

/* Stats Disclaimer */
.stats-disclaimer {
    font-size: 11px;
    color: #8b7355;
    text-align: center;
    padding: 6px 10px;
    line-height: 1.4;
    font-style: italic;
}

.stats-disclaimer .disclaimer-icon {
    font-size: 13px;
    vertical-align: middle;
    font-style: normal;
}


/* Mobile Modal/Popup Tooltip */
.stats-tooltip-mobile {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    background: rgba(10, 8, 5, 0.98);
    border: 1px solid #ff8c00;
    border-radius: 8px;
    padding: 15px;
    width: 85vw;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 100000;
    display: none;
    pointer-events: auto;
    font-family: 'Fontin SmallCaps', sans-serif;
}

.stats-tooltip-mobile.open {
    display: block !important;
}

.tooltip-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7);
    z-index: 99999;
    display: none;
}

.tooltip-backdrop.open {
    display: block !important;
}

/* Inline Icon Tooltip - CSS-based positioning */
.icon-tooltip-wrapper {
    position: relative;
    width: 38px;
    height: 38px;
}

/* Ascendancy icons are not square - use auto height */
.ascendancy-icons .icon-tooltip-wrapper {
    width: 38px;
    height: 38px;
}

/* Shift ascendancy tooltip down by 0.5px (effectively 5px down from previous -4.5px) */
.ascendancy-icons .icon-inline-tooltip {
    top: calc(50% + 0.5px);
}

.icon-inline-tooltip {
    display: none;
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(10, 8, 5, 0.98);
    border: 1px solid #8B6914;
    border-radius: 4px;
    padding: 1px 6px;
    color: #d4af37;
    font-size: 12px;
    font-weight: bold;
    font-family: 'Fontin SmallCaps', sans-serif;
    pointer-events: none;
    z-index: 100001;
    white-space: nowrap;
    width: max-content;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.icon-tooltip-wrapper:hover .icon-inline-tooltip {
    display: block;
}

.icon-inline-tooltip .tooltip-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-inline-tooltip .tooltip-line img {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: none !important;
    background: none !important;
}

@media (max-width: 768px) {
    .icon-inline-tooltip {
        left: auto;
        right: 0;
        top: calc(100% + 5px);
        transform: none;
        max-width: 200px;
        white-space: normal;
    }

    /* Mobile: Revert to block display with padding (not flexbox) */
    .also-mirrored-item-tooltip .itemName span:first-of-type {
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
        margin-top: -2px !important;
        padding: 4px 40px 0 40px !important;
        height: 23px !important;
    }

    .also-mirrored-item-tooltip .itemName span:last-of-type {
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
        height: 23px !important;
        padding: 1px 40px 3px 40px !important;
    }

    .also-mirrored-item-tooltip .sockets-line {
        margin-top: -4px !important;
    }
}

/* Korean Mobile Overrides - must be outside and after the main mobile block */
@media (max-width: 768px) {
    html[lang="ko"] .also-mirrored-item-tooltip .itemName span:first-of-type {
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
        margin-top: 0px !important;
        padding: 5px 40px 0 40px !important;
        height: 23px !important;
    }

    html[lang="ko"] .also-mirrored-item-tooltip .itemName span:last-of-type {
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
        padding: 2px 40px 3px 40px !important;
        height: 23px !important;
    }
}

/* ==========================================================================
   ALSO MIRRORED ITEM LINKS (actual-link / POB Link Style)
   ========================================================================== */
.stats-tooltip-content .also-item-link {
    margin-left: 10px;
    font-size: 13px;
    margin-bottom: 6px;
}

.also-mirrored-link {
    color: #ffc555 !important;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px dotted rgba(255, 197, 85, 0.4);
    font-family: 'Fontin SmallCaps', sans-serif;
    letter-spacing: 0.5px;
    cursor: url('../images/pointer.png'), pointer;
    display: inline-block;
    padding: 2px 0;
}

.also-mirrored-link:hover {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 197, 85, 0.6);
    border-bottom: 1px solid #ffffff;
    text-decoration: none;
}

/* ==========================================================================
   ALSO MIRRORED ITEM TOOLTIP (matching builds page item-tooltip)
   ========================================================================== */
.also-mirrored-item-tooltip {
    position: fixed;
    background:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url('https://i.ibb.co/20LYSncc/embers.gif') center center;
    background-size: cover;
    border: 1px solid #333;
    border-radius: 7px;
    padding: 15px;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 200000;
    display: none;
    pointer-events: auto;
    font-family: 'Fontin SmallCaps', sans-serif;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.also-mirrored-item-tooltip.show {
    display: block !important;
}

.also-mirrored-tooltip-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 199999;
    display: none;
}

.also-mirrored-tooltip-backdrop.show {
    display: block !important;
}

/* Item tooltip content styling - matching builds page exactly */
.also-mirrored-item-tooltip .row-content {
    color: #c8c8c8;
    font-size: 15px;
    line-height: 1.3;
    text-align: center;
}

/* Item images with elder/shaper animated backgrounds */
.also-mirrored-item-tooltip img:not(.influence-icon):not(.socket-icon):not(.link-icon):not([src*="redsocket"]):not([src*="greensocket"]):not([src*="bluesocket"]):not([src*="whitesocket"]):not([src*="abyssalsocket"]):not([src*="empty"]) {
    object-fit: contain;
    position: relative;
    padding: 1px;
    top: 5px;
    background-size: cover;
    border-radius: 10px;
    border: 1px solid rgba(51, 51, 51, 0.4);
    background-color: rgba(19, 19, 19, 0.5);
    top: 0px;
}

/* Elder backgrounds */
.also-mirrored-item-tooltip img.elder11 {
    background-image: url(https://www.pathofexile.com/image/inventory/ElderBackground.png?w=1&h=1);
}

.also-mirrored-item-tooltip img.elder13 {
    background-image: url(https://www.pathofexile.com/image/inventory/ElderBackground.png?w=1&h=3);
}

.also-mirrored-item-tooltip img.elder21 {
    background-image: url(https://www.pathofexile.com/image/inventory/ElderBackground.png?w=2&h=1);
}

.also-mirrored-item-tooltip img.elder22 {
    background-image: url(https://www.pathofexile.com/image/inventory/ElderBackground.png?w=2&h=2);
}

.also-mirrored-item-tooltip img.elder23 {
    background-image: url(https://www.pathofexile.com/image/inventory/ElderBackground.png?w=2&h=3);
}

.also-mirrored-item-tooltip img.elder24 {
    background-image: url(https://www.pathofexile.com/image/inventory/ElderBackground.png?w=2&h=4);
}

/* Shaper backgrounds */
.also-mirrored-item-tooltip img.shaper11 {
    background-image: url(https://www.pathofexile.com/image/inventory/ShaperBackground.png?w=1&h=1&x=551&y=782);
}

.also-mirrored-item-tooltip img.shaper13 {
    background-image: url(https://www.pathofexile.com/image/inventory/ShaperBackground.png?w=1&h=3&x=169&y=132);
}

.also-mirrored-item-tooltip img.shaper21 {
    background-image: url(https://www.pathofexile.com/image/inventory/ShaperBackground.png?w=2&h=1&x=273&y=742);
}

.also-mirrored-item-tooltip img.shaper22 {
    background-image: url(https://www.pathofexile.com/image/inventory/ShaperBackground.png?w=2&h=2&x=196&y=435);
}

.also-mirrored-item-tooltip img.shaper23 {
    background-image: url(https://www.pathofexile.com/image/inventory/ShaperBackground.png?w=2&h=3&x=104&y=170);
}

.also-mirrored-item-tooltip img.shaper24 {
    background-image: url(https://www.pathofexile.com/image/inventory/ShaperBackground.png?w=2&h=4&x=70&y=52);
}

.also-mirrored-item-tooltip .separator {
    border-bottom: none;
    height: 2px;
    max-width: 300px;
    left: 0px;
    background: linear-gradient(to right, transparent 0%, #cb9645 50%, transparent 100%);
    margin: 2px auto;
}

/* Item name colors - matching builds page exactly */
.also-mirrored-item-tooltip .itemName {
    display: block;
    font-weight: normal;
    margin-top: 12px;
    margin-bottom: 0;
    padding: 0;
    font-size: 18px;
    text-align: center;
    position: relative;
    line-height: 1;
    background: none !important;
}

/* First span (item name) - top part of golden frame */
.also-mirrored-item-tooltip .itemName span:first-of-type {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('https://web.poecdn.com/protected/image/item/popup/header-double-rare-left.png?v=1739989653429&key=7fOI1NQk5oFidrmivWNAqw') left top no-repeat,
        url('https://web.poecdn.com/protected/image/item/popup/header-double-rare-right.png?v=1739989653429&key=0DQ30sqHO9eanQuL1NTpNQ') right top no-repeat,
        url('https://web.poecdn.com/protected/image/item/popup/header-double-rare-middle.png?v=1739989653429&key=Hzon14Iy53cgwlmBET_yqw') center top repeat-x;
    background-size: auto 200%, auto 200%, auto 200%;
    margin-top: 1px;
    padding: 0 40px;
    height: 29px;
}

/* Korean Tooltip Overrides */
.ko-tooltip .itemName span:first-of-type {
    padding: 0 40px !important;
    align-items: flex-end !important;
    padding-bottom: 1px !important;
}

.ko-tooltip .itemName span:last-of-type {
    padding: 0 40px !important;
}

/* Non-Korean Tooltip Override - move bottom part up */
html:not([lang="ko"]) .also-mirrored-item-tooltip .itemName span:last-of-type {
    align-items: flex-start !important;
    padding-top: 1px !important;
}

/* English Desktop Default (includes 1080p) - shift entire item name up 1px */
@media (min-width: 769px) {
    html:not([lang="ko"]) .also-mirrored-item-tooltip .itemName span:first-of-type {
        margin-top: 0px !important;
        /* Base is 1px */
    }
}

/* English Desktop 1440p Override - shift entire item name down 1px */
@media (min-width: 1921px) {
    html:not([lang="ko"]) .also-mirrored-item-tooltip .itemName span:first-of-type {
        padding-top: 0.8px !important;
    }
}

/* Korean Desktop Default (includes 1080p) - shift entire item name up 2px using transform */
@media (min-width: 769px) {
    html[lang="ko"] body .also-mirrored-item-tooltip .itemName {
        transform: translateY(-2px) !important;
        position: relative !important;
        top: 0px !important;
    }
}

/* Korean 1440p Override - Reset transform */
@media (min-width: 1921px) {
    html[lang="ko"] body .also-mirrored-item-tooltip .itemName {
        transform: none !important;
    }
}

/* Korean Tooltip Separator Spacing */
.ko-tooltip .separator {
    margin-bottom: 5px !important;
}

/* Second span (base type) - bottom part of golden frame */
.also-mirrored-item-tooltip .itemName span:last-of-type {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('https://web.poecdn.com/protected/image/item/popup/header-double-rare-left.png?v=1739989653429&key=7fOI1NQk5oFidrmivWNAqw') left bottom no-repeat,
        url('https://web.poecdn.com/protected/image/item/popup/header-double-rare-right.png?v=1739989653429&key=0DQ30sqHO9eanQuL1NTpNQ') right bottom no-repeat,
        url('https://web.poecdn.com/protected/image/item/popup/header-double-rare-middle.png?v=1739989653429&key=Hzon14Iy53cgwlmBET_yqw') center bottom repeat-x;
    background-size: auto 200%, auto 200%, auto 200%;
    padding: 0 40px;
    height: 29px;
    margin-top: -1px;
    margin-bottom: -8px;
}

/* Remove br spacing */
.also-mirrored-item-tooltip .itemName br {
    display: none;
}

/* Socket icons alignment */
.also-mirrored-item-tooltip .socket-icon,
.also-mirrored-item-tooltip .link-icon {
    vertical-align: middle;
    position: relative;
    top: 1px !important;
}

@media (min-width: 769px) {
    .also-mirrored-item-tooltip .socket-icon {
        width: 16px !important;
        height: 16px !important;
    }

    .also-mirrored-item-tooltip .link-icon {
        width: 13px !important;
        height: 13px !important;
    }
}

.also-mirrored-item-tooltip .itemName0,
.also-mirrored-item-tooltip .itemName1,
.also-mirrored-item-tooltip .itemName2,
.also-mirrored-item-tooltip .itemName3,
.also-mirrored-item-tooltip .itemName4,
.also-mirrored-item-tooltip .itemName5,
.also-mirrored-item-tooltip .itemName6,
.also-mirrored-item-tooltip .itemName7,
.also-mirrored-item-tooltip .itemName8,
.also-mirrored-item-tooltip .itemName9 {
    color: #ffff77;
}

/* Mod styling */
.also-mirrored-item-tooltip .lc {
    color: #8f8f8f;
    margin-top: 0px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 22px !important;
}

/* Add spacing between item name frame and the first stat line (Quality) */
.also-mirrored-item-tooltip .itemName+.lc {
    margin-top: 3px !important;
}

.also-mirrored-item-tooltip .sockets-line {
    margin-top: -4px !important;
}

@media (min-width: 769px) {
    html:not([lang="ko"]) .also-mirrored-item-tooltip .sockets-line {
        margin-top: -3px !important;
    }
}

.also-mirrored-item-tooltip div[class*="type"] {
    font-size: 16px !important;
    line-height: 22px !important;
    margin-top: 0px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.also-mirrored-item-tooltip .colorWhite {
    color: #ffffff;
}

.also-mirrored-item-tooltip .coloraugmented {
    color: #8888ff;
}

.also-mirrored-item-tooltip .type0 {
    color: #8888ff;
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-top: -2px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.also-mirrored-item-tooltip .type1 {
    color: #8888ff;
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-top: -2px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.also-mirrored-item-tooltip .type2 {
    color: #8888ff;
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin-top: -2px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.also-mirrored-item-tooltip .enchantMod,
.also-mirrored-item-tooltip .implicitMod,
.also-mirrored-item-tooltip .explicitMod,
.also-mirrored-item-tooltip .fracturedMod,
.also-mirrored-item-tooltip .craftedMod,
.also-mirrored-item-tooltip .crucibleMod {
    margin-top: 0px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 22px !important;
}

.also-mirrored-item-tooltip .enchantMod {
    color: #b4b4ff;
}

.also-mirrored-item-tooltip .implicitMod {
    color: #8888ff;
}

.also-mirrored-item-tooltip .explicitMod {
    color: #8888ff;
}

.also-mirrored-item-tooltip .fracturedMod {
    color: #a29162;
}

.also-mirrored-item-tooltip .craftedMod {
    color: #b4b4ff;
}

.also-mirrored-item-tooltip .crucibleMod {
    color: #ff6600;
}

/* Influence icons - Original (PoE 1) */
.also-mirrored-item-tooltip .influence-icon {
    position: absolute;
    width: 29px;
    height: 29px;
    top: 50%;
    transform: translateY(-50%);
}

.also-mirrored-item-tooltip .influence-icon.left {
    left: 4px;
}

.also-mirrored-item-tooltip .influence-icon.right {
    right: 4px;
}

/* PoE2: Widget icon positions - no View Builds button, so 37px less offset than PoE1 */
.poe2-page .item-stats-widget-desktop .ascendancy-icons {
    bottom: 74px;
}

.poe2-page .item-stats-widget-desktop .skill-icons {
    bottom: 117px;
    /* 74 + 38 (1 ascendancy row) + 5 (gap) */
}

/* Influence icons - PoE 2 Scoped Adjustments */
.poe2-page .also-mirrored-item-tooltip .influence-icon,
.also-mirrored-item-tooltip .influence-icon-poe2,
.itemName2 .influence-icon-poe2 {
    position: absolute;
    width: 29px;
    height: 29px;
    top: calc(50% - 3px) !important;
    /* Shifted up 3px */
    transform: translateY(-50%);
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.poe2-page .also-mirrored-item-tooltip .influence-icon.left,
.also-mirrored-item-tooltip .influence-icon-poe2.left,
.itemName2 .influence-icon-poe2.left {
    left: 6px !important;
    /* Shifted inwards 2px */
}

.poe2-page .also-mirrored-item-tooltip .influence-icon.right,
.also-mirrored-item-tooltip .influence-icon-poe2.right,
.itemName2 .influence-icon-poe2.right {
    right: 6px !important;
    /* Shifted inwards 2px */
}

.also-mirrored-item-tooltip .error-tooltip {
    color: #ff6666;
    text-align: center;
    padding: 20px;
}

/* PoE 2 Korean Tooltip Adjustment */
/* Allow overflow for shifting */
.poe2-page .poe-catalogue .row-content {
    overflow: visible !important;
}

/* Header Container: Move visually DOWN 5px, Increase Height to 68px */
.poe2-page .ko-tooltip .itemName2,
.poe2-page html[lang="ko"] .itemName2 {
    position: relative !important;
    top: 5px !important;
    margin-bottom: 5px !important;
    height: 68px !important;
    /* Increased height to 68px */
    margin-top: 0px !important;
    background-size: auto 100% !important;
    background-position: top left, top right, top center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Text: Move UP 11px relative to container */
.poe2-page .ko-tooltip .itemName2 span,
.poe2-page html[lang="ko"] .itemName2 span {
    position: relative !important;
    top: -11px !important;
}

/* Move Korean Upper Text UP 1px more (Total -12px) */
.poe2-page .ko-tooltip .itemName2 span:first-of-type,
.poe2-page html[lang="ko"] .itemName2 span:first-of-type {
    top: -12px !important;
}

/* Icons: Centered - 3px relative to container (Previous -5px + 2px down) */
.poe2-page .ko-tooltip .itemName2 .influence-icon,
.poe2-page html[lang="ko"] .itemName2 .influence-icon,
.poe2-page .ko-tooltip .itemName2 .influence-icon-poe2,
.poe2-page html[lang="ko"] .itemName2 .influence-icon-poe2 {
    top: calc(50% - 3px) !important;
    transform: translateY(-50%) !important;
}

/* PoE 2 English/Chinese Upper Text Adjustment */
html[lang="en"] .poe2-page .itemName2 span:first-of-type,
html[lang="zh"] .poe2-page .itemName2 span:first-of-type {
    position: relative !important;
    top: -1px !important;
}

/* ==========================================================================
   KOREAN/CHINESE MINIMUM WIDTH FOR ALSO MIRRORED TOOLTIPS
   Korean and Chinese text is narrower than English, causing tooltips to be
   too narrow. This ensures a minimum width for readability.
   ========================================================================== */
html[lang="ko"] .also-mirrored-item-tooltip,
html[lang="zh"] .also-mirrored-item-tooltip {
    min-width: 300px !important;
}

/* ==========================================================================
   TREE VIEW STYLES FOR SKILL STATS
   ========================================================================== */
.skill-tree-item {
    margin-bottom: 4px;
}

.skill-header {
    display: grid;
    grid-template-columns: 30px 1fr 30px;
    align-items: center;
    color: #c8aa6e;
    font-size: 13.5px;
    cursor: url('../images/pointer.png'), pointer;
    user-select: none;
    transition: color 0.2s ease;
    padding: 1px 0;
}

.header-text {
    text-align: center;
    white-space: nowrap;
}

.skill-header:hover {
    color: #d4af37;
}

.tree-toggle {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 12px;
    text-align: center;
    border: 1px solid rgba(196, 156, 80, 0.5);
    border-radius: 3px;
    font-size: 10px;
    font-family: monospace;
    color: #c49c50;
    background: rgba(10, 8, 5, 0.5);
    justify-self: center;
}

.tree-spacer {
    width: 30px;
}

.skill-header:hover .tree-toggle {
    border-color: #c49c50;
    color: #d4af37;
}

.ascendancy-list {
    display: none;
    /* COLLAPSED BY DEFAULT */
    margin-left: 14px;
    padding-left: 12px;
    border-left: 1px solid rgba(139, 105, 20, 0.4);
    margin-top: 1px;
}

.ascendancy-list.show {
    display: block;
    /* EXPANDED */
}

.ascendancy-item {
    color: #b8b8b8;
    font-size: 12.5px;
    margin-bottom: 1px;
    position: relative;
    padding-left: 0px;
}

.asc-highlight {
    color: #e0d1b1;
    /* Distinct creamy tan color */
}

/* Connector line */
.ascendancy-item::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    width: 8px;
    height: 1px;
    background: rgba(139, 105, 20, 0.4);
}

/* Mobile Centering Overrides */
@media (max-width: 768px) {
    .skill-header {
        grid-template-columns: 24px 1fr 24px;
        /* Slightly smaller button area on mobile */
    }

    .header-text {
        white-space: normal;
        word-break: break-word;
        padding: 2px 0;
    }

    .ascendancy-item {
        text-align: center;
        white-space: normal;
        word-break: break-word;
        padding: 1px 5px;
    }
}

/* ===== DISCOVER BUILDS TOOLTIP (Copied from standard-item-stats.css) ===== */
.view-builds-tooltip-popup {
    display: none;
    position: absolute;
    left: 100%;
    bottom: 0;
    margin-left: 20px;
    background: rgba(10, 8, 5, 0.98);
    border: 1px solid #ff8c00;
    border-radius: 8px;
    width: 430px;
    max-height: 800px;
    z-index: 99999;
    pointer-events: auto;
    font-family: 'Fontin SmallCaps', sans-serif;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

/* Tooltip Header */
.discover-tooltip-header {
    padding: 14px 18px;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, transparent, #cb9645, transparent) 1;
}

.discover-tooltip-title {
    color: #d4af37;
    font-size: 16px;
    letter-spacing: 0.5px;
    font-weight: bold;
}

/* Tooltip Count */
.discover-tooltip-count {
    color: #8B8B8B;
    font-size: 12px;
    padding: 6px 18px;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, transparent, #cb9645, transparent) 1;
}

/* Tooltip Disclaimer */
.discover-tooltip-disclaimer {
    color: #888;
    font-size: 11px;
    padding: 6px 18px;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(139, 105, 20, 0.2);
    line-height: 1.4;
    text-align: center;
}

/* Tooltip Body */
.discover-tooltip-body {
    overflow-y: auto;
    max-height: 605px;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: #8B6914 rgba(10, 8, 5, 0.5);
}

.discover-tooltip-body::-webkit-scrollbar {
    width: 8px;
}

.discover-tooltip-body::-webkit-scrollbar-track {
    background: rgba(10, 8, 5, 0.5);
}

.discover-tooltip-body::-webkit-scrollbar-thumb {
    background: #8B6914;
    border-radius: 4px;
}

/* Build Entry */
.discover-tooltip-build-entry {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    /* Mobile default */
    padding: 12px 18px;
    border-bottom: 1px solid rgba(139, 105, 20, 0.2);
    transition: background 0.15s;
}

.discover-tooltip-build-entry:hover {
    background: rgba(196, 156, 80, 0.1);
}

.discover-tooltip-build-entry:last-child {
    border-bottom: none;
}

.discover-tooltip-build-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
    text-align: center;
}

.discover-tooltip-build-char {
    color: #d4af37;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.discover-tooltip-build-details {
    color: #ffffff;
    font-size: 13px;
    font-weight: normal;
    word-wrap: break-word;
}

/* TFT Items Toggle */
.discover-tooltip-tft-toggle {
    color: #d4af37;
    font-size: 11px;
    cursor: pointer;
    padding: 6px 8px;
    margin-top: 4px;
    user-select: none;
    transition: all 0.2s;
    background: rgba(139, 105, 20, 0.2);
    border-radius: 4px;
    display: block;
    width: fit-content;
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    border: 1px solid rgba(139, 105, 20, 0.4);
}

.discover-tooltip-tft-toggle:hover {
    color: #ffffff;
    background: rgba(196, 156, 80, 0.3);
    border-color: #cb9645;
}

.discover-tooltip-tft-toggle .toggle-arrow {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 9px;
    margin-right: 4px;
    color: #ff8c00;
}

.discover-tooltip-tft-toggle.expanded {
    background: rgba(196, 156, 80, 0.3);
    color: #ffffff;
    border-color: #cb9645;
}

.discover-tooltip-tft-toggle.expanded .toggle-arrow {
    transform: rotate(90deg);
}

.discover-tooltip-tft-list {
    display: none;
    margin-top: 6px;
    padding-left: 12px;
    border-left: 2px solid #cb9645;
}

.discover-tooltip-tft-list.show {
    display: block;
}

.discover-tooltip-tft-item {
    color: #d4af37;
    font-size: 11px;
    padding: 3px 0;
    padding-left: 8px;
}

/* Build Actions */
.discover-tooltip-build-actions {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
    margin-left: 12px;
    align-items: flex-end;
}

/* Nudge (i) badge up so it centres on the first line of build name */
.discover-tooltip-build-actions .build-info-wrapper {
    margin-top: 0;
}

/* Lower row: expand arrow + View Build button */
.discover-tooltip-build-buttons-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Info badge button */
.build-info-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.build-info-btn {
    background: rgba(30, 60, 90, 0.25);
    border: 1px solid rgba(90, 156, 197, 0.35);
    color: #7ab8e0;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    line-height: 18px;
    text-align: center;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
}

.build-info-btn:hover {
    background: rgba(40, 80, 120, 0.4);
    border-color: #4a8ab5;
}

.build-info-box {
    display: none;
    position: absolute;
    right: calc(100% + 8px);
    top: -10px;
    transform: none;
    background: #1a1e2e !important;
    border: 1px solid rgba(90, 156, 197, 0.4);
    border-radius: 6px;
    padding: 5px 10px;
    width: max-content !important;
    min-width: 180px;
    max-width: 500px;
    white-space: normal;
    word-break: break-all;
    height: auto !important;
    z-index: 9999;
    font-size: 13px;
    color: #c5c5c5;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
    line-height: 1.5;
    overflow: visible !important;
    text-align: left;
    opacity: 1 !important;
}

.build-info-box div {
    display: block !important;
    margin-bottom: 2px;
}

/* Restore grid on .bib-actions — overrides the display:block!important above */
.build-info-box .bib-actions {
    display: grid !important;
}

.bib-row {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    white-space: nowrap;
}

.copy-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #5a9cc5;
    opacity: 0.6;
    transition: opacity 0.2s, color 0.2s;
    padding: 2px;
    background: transparent;
    border: none;
    outline: none;
}

.copy-icon-btn:hover {
    opacity: 1;
    color: #7ab8e0;
}

.featured-info-box .copy-icon-btn {
    color: #7d6621;
}

.featured-info-box .copy-icon-btn:hover {
    color: #d4af37;
}

.copy-icon-btn svg {
    width: 12px;
    height: 12px;
}

.bib-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    align-items: center;
    width: 100%;
}

/* Notes + 1 showcase only: use 2 equal columns so both sit on the same line */
.bib-actions:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Fix mobile/tablet overflow */
@media (max-width: 1024px) {
    .build-info-box {
        display: none !important;
    }
}

/* Desktop Refinements: 1025px+ */
@media (min-width: 1025px) {
    .discover-tooltip-build-entry {
        align-items: stretch;
        position: relative;
    }

    .discover-tooltip-build-info {
        text-align: left;
        padding-right: 45px;
        /* Reserve space for (i) */
    }

    .discover-tooltip-build-details {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

    .discover-tooltip-build-info {
        text-align: left;
        padding-right: 35px;
    }

    .discover-tooltip-build-actions {
        position: absolute;
        right: 18px;
        bottom: 7px;
        height: 32px;
        flex-direction: row;
        align-items: center;
        margin-left: 0;
    }

    .discover-tooltip-build-entry>.build-info-wrapper {
        position: absolute;
        right: 20px;
        top: 8px;
        z-index: 10;
    }

    .discover-featured-entry .discover-tooltip-tft-toggle {
        margin-top: 5px;
    }
}

.bib-action-btn {
    display: inline-flex;
    width: 100% !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #d4af37;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    font-family: 'Fontin SmallCaps', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.bib-action-btn svg {
    width: 14px;
    height: 14px;
}

.bib-action-btn:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: #d4af37;
    color: #ffffff;
}

/* Modal Content System */
.build-content-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 400000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease-out;
}

.build-content-modal {
    background: #1a1a1a;
    border: 1px solid #d4af37;
    width: 90%;
    max-width: 650px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease-out;
}

.bcm-header {
    background: #251e0b;
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.bcm-title {
    color: #d4af37;
    font-size: 18px;
    font-weight: bold;
    font-family: 'Fontin SmallCaps', sans-serif;
    letter-spacing: 0.5px;
}

.bcm-close {
    background: none;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
    padding: 0;
}

.bcm-close:hover {
    color: #d4af37;
    transform: rotate(90deg);
}

.bcm-body {
    padding: 24px;
    max-height: 75vh;
    overflow-y: auto;
    color: #e0e0e0;
    font-size: 14px;
    line-height: 1.6;
    scrollbar-width: thin;
    scrollbar-color: #d4af37 transparent;
}

.bcm-body::-webkit-scrollbar {
    width: 6px;
}

.bcm-body::-webkit-scrollbar-thumb {
    background-color: #d4af37;
    border-radius: 10px;
}

.bcm-video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
    border-radius: 4px;
}

.bcm-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Remove old in-line notes area */
.bib-notes-area {
    display: none !important;
}

/* Golden (i) tooltip for featured builds */
.featured-info-box {
    background: #342a10 !important;
    border-color: #7d6621 !important;
    color: #d4af37 !important;
}

.featured-info-box div {
    color: #d4af37 !important;
}

/* Compact spacing for featured tooltip on desktop — prevents scrollbar with 1 featured item */
.featured-info-box .bib-row {
    margin-bottom: 2px;
}

.featured-info-box .bib-actions {
    margin-top: 2px !important;
    padding-top: 6px !important;
}

.build-info-wrapper:hover .build-info-box,
.build-info-box.show {
    display: block !important;
}

/* Strictly hide inline tooltips on mobile/tablet, even on hover or with .show class */
@media (max-width: 1024px) {

    .build-info-wrapper:hover .build-info-box,
    .build-info-box.show,
    .build-info-box {
        display: none !important;
    }
}

/* Prevent bottom-most tooltip from overflowing */
.discover-build-entry:last-child .build-info-box,
.discover-build-variant:last-child .build-info-box {
    top: auto !important;
    bottom: 20px !important;
}

/* Golden (i) button for featured builds */
.featured-info-btn {
    background: rgba(212, 175, 55, 0.15) !important;
    border-color: rgba(212, 175, 55, 0.45) !important;
    color: #d4af37 !important;
}

.featured-info-btn:hover {
    background: rgba(212, 175, 55, 0.25) !important;
    border-color: #d4af37 !important;
}

/* Enlarged for Korean readability */
:lang(ko) .build-info-btn {
    font-size: 14px;
    line-height: 21px;
}

.discover-tooltip-btn {
    padding: 6px 12px;
    background: rgba(30, 60, 90, 0.3);
    border: 1px solid #2a5a7a;
    border-radius: 4px;
    color: #5a9cc5;
    font-size: 12px;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
    cursor: pointer;
    font-weight: normal;
}

.discover-tooltip-btn:hover {
    background: rgba(40, 80, 120, 0.4);
    border-color: #4a8ab5;
    color: #7ab8e0;
}

/* Expand Button for Tooltip */
.discover-tooltip-btn-expand {
    background: rgba(139, 105, 20, 0.2);
    color: #ff8c00;
    border-color: rgba(139, 105, 20, 0.4);
    padding: 6px 8px;
    min-width: unset;
}

.discover-tooltip-btn-expand:hover {
    background: rgba(196, 156, 80, 0.3);
    border-color: #cb9645;
    color: #ff8c00;
}

.discover-tooltip-btn-expand .expand-arrow {
    display: inline-block;
    transition: transform 0.2s;
    font-size: 12px;
}

.discover-tooltip-btn-expand.expanded .expand-arrow {
    transform: rotate(180deg);
}

/* Filter Menus */
.discover-tooltip-filters {
    padding: 6px 12px;
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, transparent, #cb9645, transparent) 1;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.discover-tooltip-filter-label {
    color: #8B8B8B;
    font-size: 11px;
    white-space: nowrap;
}

.discover-tooltip-filter-dropdown {
    position: relative;
    flex: 1;
}

.discover-tooltip-filter-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    background: rgba(139, 105, 20, 0.15);
    border: 1px solid rgba(139, 105, 20, 0.4);
    color: #d4af37;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    width: 100%;
    text-align: left;
    white-space: normal;
    word-break: break-word;
    transition: background 0.15s, border-color 0.15s;
}

.discover-tooltip-filter-trigger:hover,
.discover-tooltip-filter-trigger.open {
    background: rgba(196, 156, 80, 0.25);
    border-color: #cb9645;
}

.discover-tooltip-filter-trigger .filter-arrow {
    font-size: 9px;
    flex-shrink: 0;
    transition: transform 0.15s;
}

.discover-tooltip-filter-trigger.open .filter-arrow {
    transform: rotate(180deg);
}

.discover-tooltip-filter-list {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    background: rgba(15, 12, 8, 0.98);
    border: 1px solid #cb9645;
    border-radius: 3px;
    z-index: 9999;
    max-height: 180px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #8B6914 rgba(10, 8, 5, 0.5);
}

.discover-tooltip-filter-list.open {
    display: block;
}

.discover-tooltip-filter-list::-webkit-scrollbar {
    width: 6px;
}

.discover-tooltip-filter-list::-webkit-scrollbar-track {
    background: rgba(10, 8, 5, 0.5);
}

.discover-tooltip-filter-list::-webkit-scrollbar-thumb {
    background: #8B6914;
    border-radius: 3px;
}

.discover-tooltip-filter-option {
    padding: 5px 10px;
    font-size: 11px;
    color: #8B8B8B;
    cursor: pointer;
    white-space: normal;
    word-break: break-word;
    transition: background 0.1s, color 0.1s;
}

.discover-tooltip-filter-option:hover {
    background: rgba(196, 156, 80, 0.2);
    color: #d4af37;
}

.discover-tooltip-filter-option.active {
    color: #d4af37;
    font-weight: bold;
    background: rgba(196, 156, 80, 0.15);
}

.discover-tooltip-filter-option .filter-option-count {
    color: #666666;
    font-weight: normal;
}

/* Pagination */
.discover-tooltip-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 18px;
    border-top: 2px solid;
    border-image: linear-gradient(to right, transparent, #cb9645, transparent) 1;
}

.discover-tooltip-page-btn {
    background: rgba(139, 105, 20, 0.2);
    border: 1px solid #cb9645;
    color: #d4af37;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    font-weight: normal;
}

.discover-tooltip-page-btn:hover:not(:disabled) {
    border-color: #d4af37;
    color: #ffffff;
    background: rgba(203, 150, 69, 0.3);
}

.discover-tooltip-page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.discover-tooltip-page-info {
    color: #8B8B8B;
    font-size: 12px;
}

.discover-tooltip-current-page {
    color: #d4af37;
    font-weight: bold;
}

/* Build Info - align to left */
.discover-tooltip-build-info {
    text-align: left;
}

/* Build Variants Container */
.discover-build-variants {
    display: none;
}

.discover-build-variants.show {
    display: block;
}

/* Featured Builds */
.discover-featured-section {
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.discover-featured-label {
    font-size: 11px;
    color: #d4af37;
    padding: 4px 8px 2px;
    letter-spacing: 0.8px;
    opacity: 0.85;
}

.discover-featured-entry {
    background: rgba(212, 175, 55, 0.07) !important;
    border: 1px solid rgba(212, 175, 55, 0.35) !important;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.18) !important;
}

.discover-featured-entry:hover {
    background: rgba(212, 175, 55, 0.14) !important;
}

/* Remove double border between adjacent featured entries */
.discover-featured-entry+.discover-featured-entry {
    border-top: none !important;
}

.discover-featured-btn {
    background: rgba(212, 175, 55, 0.15) !important;
    border-color: rgba(212, 175, 55, 0.45) !important;
    color: #d4af37 !important;
}

.discover-featured-btn:hover {
    background: rgba(212, 175, 55, 0.25) !important;
    border-color: #d4af37 !important;
    color: #f0d060 !important;
}