/* Standard 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 */
}

@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;
}

/* ==========================================================================
   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: 60px;
    /* Moved up from 23px to make room for View Builds button */
    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;
}

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

/* View Builds Button (below Extra Info) - EXACT same styling as 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);
    /* Same as Extra Info */
    border-radius: 5px;
    padding: 0 10px;
    height: 32px;
    cursor: url('../images/pointer.png'), pointer;

    position: absolute;
    bottom: 23px;
    /* Original position of Extra Info */
    left: 12px;
    right: 12px;

    color: #c49c50;
    /* Same as Extra Info */
    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;
    cursor: url('../images/pointer.png'), pointer;
}

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

.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;
}

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

/* 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;
}

.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 (shared by tooltip + popup) */
.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;
}

/* 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;
        /* height: 28px !important; Optional: Scale height if needed, but user wanted fixed alignment? Assuming 32px is still desired, just text shrinking */
        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;
    }

    /* Adjust text position slightly if needed? */
}

/* ==========================================================================
   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) -> View Builds (3) -> Skill Icons (4) */
    .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;
        /* Slightly larger for readable button */
        padding: 5px 10px;
        width: fit-content;
        /* Only as wide as needed */
        min-width: 90px;
        /* Narrower minimum */
        max-width: 180px;
        /* Tighter cap */
        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;
        /* Same as Extra Info */
        border-radius: 5px;
        color: #d4af37;
        /* Same as Extra Info */
        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, especially mobile */
}

.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 exactly)
   ========================================================================== */
.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;
    margin-top: 4px;
}

/* 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: 0px;
    background-size: cover;
    border-radius: 10px;
    border: 1px solid rgba(51, 51, 51, 0.4);
    background-color: rgba(19, 19, 19, 0.5);
}

/* 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: #a29160;
}

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

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

/* Influence icons */
.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;
}

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

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

/* ==========================================================================
   KOREAN MINIMUM WIDTH FOR ALSO MIRRORED TOOLTIPS
   Korean 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 {
    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;
    }
}