/* ===== TFT Tooltip Bridge v1.1 ===== */
.ttb-tip {
    position: absolute;
    z-index: 99999;
    max-width: 340px;
    min-width: 220px;
    background: #12141d;
    border: 1px solid #2a3050;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(200,155,60,.15);
    padding: 14px 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    color: #c8c0b0;
    pointer-events: auto;

    /* Smooth show/hide bằng opacity thay vì display:none */
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .15s ease, transform .15s ease, visibility 0s .15s;
}
.ttb-tip.ttb-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .15s ease, transform .15s ease, visibility 0s 0s;
}

/* ===== Unit tooltip ===== */
/* Hero image — full width, crop giống trang chi tiết */
.ttb-hero-img {
    margin        : -14px -16px 10px;
    height        : 110px;
    overflow      : hidden;
    border-radius : 10px 10px 0 0;
    position      : relative;
}
.ttb-hero-img img {
    width         : 100%;
    height        : 100%;
    object-fit    : cover;
    object-position: center center;
    display       : block;
    /* fade bottom để không bị cut đột ngột */
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image    : linear-gradient(to bottom, #000 60%, transparent 100%);
}
.ttb-headline {
    font-size     : 10px;
    color         : #8899bb;
    margin-bottom : 6px;
    font-style    : italic;
}
.ttb-unit-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.ttb-unit-name { font-size:15px; font-weight:700; }
.ttb-unit-cost { padding:2px 7px; border-radius:4px; font-size:10px; font-weight:700; color:#111; }
.ttb-btn-detail {
    margin-left: auto;
    display: inline-block;
    padding: 5px 13px;
    background: linear-gradient(135deg, #f5c842 0%, #d4a017 40%, #c89b3c 70%, #e8c44a 100%);
    color: #1a1200 !important;
    font-size: 11px;
    font-weight: 700;
    border-radius: 5px;
    text-decoration: none !important;
    touch-action: manipulation;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(200,155,60,.35), inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .12s, box-shadow .12s;
    white-space: nowrap;
    letter-spacing: 0.3px;
}
.ttb-btn-detail:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(200,155,60,.5), inset 0 1px 0 rgba(255,255,255,.3);
}
.ttb-btn-detail:active {
    transform: scale(0.96);
    box-shadow: 0 1px 4px rgba(200,155,60,.3);
}
.ttb-tags { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px; }
.ttb-tag { padding:2px 8px; border-radius:3px; font-size:10px; background:#1e2640; color:#7799cc; border:1px solid #2a3050; }
.ttb-stats {
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:8px;
    margin-top:10px;
    margin-bottom:10px;
    font-size:11px;
    color:#cfd6e6;
    white-space:nowrap;
}

.ttb-stats span { white-space:nowrap; }
.ttb-skill { display:flex; align-items:center; gap:8px; font-size:12px; color:#c89b3c; margin-bottom:4px; }
.ttb-skill-icon { width:28px; height:28px; border-radius:5px; border:1.5px solid rgba(200,155,60,.4); flex-shrink:0; }
.ttb-skill-type {
    font-size     : 10px;
    color         : #666;
    background    : #1a1d2a;
    border        : 1px solid #2a3050;
    border-radius : 3px;
    padding       : 1px 5px;
    font-weight   : 400;
    vertical-align: middle;
}
.ttb-skill-desc { font-size:11px; color:#aaa; line-height:1.6; }

/* ── Token styles (đồng bộ với chi tiết tướng) ── */
.ttb-skill-desc .tup-token-color {
    font-weight: 700;
}
.ttb-skill-desc .tup-trait-phieu {
    background   : linear-gradient(90deg, #f472b6, #fb923c, #facc15, #4ade80, #60a5fa, #c084fc);
    -webkit-background-clip : text;
    background-clip         : text;
    -webkit-text-fill-color : transparent;
    font-weight  : 700;
}
.ttb-skill-desc .tup-token-icon {
    width        : 13px;
    height       : 13px;
    vertical-align: middle;
    margin       : 0 1px;
    display      : inline-block;
}
.ttb-skill-desc .tup-skill-highlight {
    background   : rgba(245,200,66,.12);
    border-left  : 3px solid #f5c842;
    border-radius: 4px;
    padding      : 6px 10px;
    margin       : 6px 0;
    color        : #fef9c3;
    font-size    : 11px;
    line-height  : 1.6;
}

/* ===== Trait tooltip ===== */
.ttb-trait-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ttb-trait-icon { width:28px; height:28px; border-radius:5px; }
.ttb-trait-name { font-size:15px; font-weight:700; color:#e8e0d0; }
.ttb-trait-type { font-size:10px; color:#888; background:#1e2640; padding:2px 6px; border-radius:3px; }
.ttb-trait-desc { font-size:11px; color:#999; line-height:1.5; margin-bottom:8px; }
.ttb-tiers { margin-bottom:8px; }
.ttb-tier { font-size:11px; color:#aaa; padding:3px 0; line-height:1.4; }
.ttb-tier-min { font-weight:700; color:#c89b3c; margin-right:4px; }

/* ── Token styles trong trait tooltip (icon + color) ── */
.ttb-trait-desc .tup-token-color,
.ttb-tier .tup-token-color {
    font-weight: 700;
}
.ttb-trait-desc .tup-token-icon,
.ttb-tier .tup-token-icon {
    width: 13px;
    height: 13px;
    vertical-align: middle;
    margin: 0 1px;
    display: inline-block;
}
.ttb-trait-desc img.tup-token-icon,
.ttb-tier img.tup-token-icon {
    width: 13px;
    height: 13px;
    vertical-align: middle;
    margin: 0 1px;
    display: inline-block;
}
.ttb-champs-row { display:flex; flex-wrap:wrap; gap:5px; }
.ttb-champ-mini {
    width:32px; height:32px;
    border-radius:6px;
    border:2px solid #444;
    overflow:hidden;
    position:relative;
    flex-shrink:0;
}
.ttb-champ-mini img {
    width:100%; height:100%;
    object-fit:cover;
    display:block;
}
.ttb-champ-mini-fb {
    display:none;
    position:absolute;
    inset:0;
    align-items:center;
    justify-content:center;
    font-size:8px;
    font-weight:700;
    color:#bbb;
    background:#1e2640;
}

/* ===== Cursor hint ===== */
.tup-trait-tag,
.tcm-trait,
.ttp-champ,
.tcm-u,
.tcm-du {
    cursor: pointer;
    position: relative;
}
.tup-trait-tag:hover,
.tcm-trait:hover {
    background: #2a3060 !important;
    border-color: #4466aa !important;
    transition: all .15s;
}
.ttp-champ:hover .ttp-champ-img,
.tcm-u:hover .tcm-u-img-wrap,
.tcm-du:hover .tcm-duimg {
    border-color: #c89b3c !important;
    transition: border-color .15s;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
    .ttb-tip { max-width: calc(100vw - 20px); left: 10px !important; }
}
.ttb-set-label{font-size:12px;color:#93c5fd;margin:2px 0 8px;font-weight:600;}

/* ===== Custom stat icons for TFT Tooltip Bridge ===== */
.ttb-stats {
    display:flex;
    flex-wrap:wrap;
    gap:6px 10px;
    margin-bottom:8px;
    font-size:11px;
    color:#cfd6e6;
}

.ttb-stats span {
    white-space:nowrap;
}

.ttb-stat-chip {
    display:inline-flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
    line-height:1;
    flex:0 0 auto;
}


.ttb-stat-icon {
    width:14px;
    height:14px;
    object-fit:contain;
    display:block;
    flex-shrink:0;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
}

.ttb-stat-value {
    display:inline-block;
    color:#cfd6e6;
    font-weight:500;
}

.ttb-stat-text {
    padding-left:2px;
}


.ttb-stats { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.ttb-stats::-webkit-scrollbar { display:none; }


/* ===== FINAL FIX v1.4.9: stat chips fit inside tooltip ===== */
.ttb-tip {
    width: 440px !important;
    max-width: calc(100vw - 20px) !important;
    box-sizing: border-box !important;
}

.ttb-tip .ttb-unit .ttb-stats {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    padding: 2px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.ttb-tip .ttb-unit .ttb-stat-chip,
.ttb-tip .ttb-unit .ttb-stat-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 28px !important;
    padding: 5px 4px !important;
    gap: 3px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    background: linear-gradient(180deg, rgba(18,24,40,.96) 0%, rgba(11,16,30,.98) 100%) !important;
    border: 1px solid rgba(70, 96, 148, .58) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 1px 4px rgba(0,0,0,.22) !important;
}

.ttb-tip .ttb-unit .ttb-stat-icon {
    width: 12px !important;
    height: 12px !important;
    object-fit: contain !important;
    flex: 0 0 12px !important;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)) !important;
}

.ttb-tip .ttb-unit .ttb-stat-value {
    display: block !important;
    min-width: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 10.5px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    color: #d9e2f2 !important;
    letter-spacing: -.1px !important;
}

@media (max-width: 480px) {
    .ttb-tip {
        width: calc(100vw - 20px) !important;
    }

    .ttb-tip .ttb-unit .ttb-stats {
        grid-template-columns: repeat(7, minmax(42px, 1fr)) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
    }

    .ttb-tip .ttb-unit .ttb-stats::-webkit-scrollbar {
        display: none !important;
    }
}