/* ============================================================
   TFT Meta — Base stylesheet (tạm thời)
   Design tokens + styles đủ để hiển thị trang home & sub-pages.
   ============================================================ */

:root {
    /* Backgrounds */
    --tft-bg-base:           #0a0e1a;
    --tft-bg-card:           #131729;
    --tft-bg-card-hover:     #191e38;
    --tft-border:            #1f2543;

    /* Home page (Figma deep purple palette) */
    --tft-home-bg:           #2b244f;
    --tft-home-bg-alt:       #1f1a3d;
    --tft-home-card-bg:      #3d2863;
    --tft-home-border:       rgba(152,16,250,0.3);

    /* Text */
    --tft-text-primary:      #e2e8f0;
    --tft-text-secondary:    #9ca3af;
    --tft-text-muted:        #6b7280;

    /* Accent */
    --tft-gold:              #c89b3c;
    --tft-star-gold:         #fdc700;
    --tft-purple:            #5b4fcf;
    --tft-red:               #c0392b;

    /* Tier colours */
    --tft-tier-s:            #e07b39;
    --tft-tier-a:            #3b82f6;
    --tft-tier-b:            #22c55e;
    --tft-tier-c:            #6b7280;
}

/* ============================================================
   SPINNER / LOADING STATES
   ============================================================ */
@keyframes tft-spin {
    to { transform: rotate(360deg); }
}
@keyframes tft-pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(200, 155, 60, 0.45); }
    70%  { box-shadow: 0 0 0 10px rgba(200, 155, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(200, 155, 60, 0); }
}

input[type=text] {
    color: #000;
}

.tft-spinner {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid var(--tft-border);
    border-top-color: var(--tft-gold);
    border-right-color: var(--tft-purple);
    animation: tft-spin 0.75s cubic-bezier(0.4, 0, 0.2, 1) infinite,
               tft-pulse-ring 1.5s ease-out infinite;
    flex-shrink: 0;
}
.tft-spinner--sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
    animation: tft-spin 0.75s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.tft-spinner--xs {
    width: 13px;
    height: 13px;
    border-width: 2px;
    animation: tft-spin 0.75s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.tft-loading-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 56px 24px;
}

/* ============================================================
   BASE
   ============================================================ */
body.tft-home-page,
body.tft-page {
    background: var(--tft-bg-base);
    color: var(--tft-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    min-height: 100vh;
}

/* Figma home page uses the deep purple palette as a single canvas (no dark-blue base). */
body.tft-home-page {
    background: var(--tft-home-bg);
}

body.tft-home-page a,
body.tft-page a { color: inherit; text-decoration: none; }

body.tft-home-page button,
body.tft-page button {
    font-family: inherit;
    cursor: pointer;
}

#app {
    background: #151136;
}

/* Hide skel-layers injected elements on TFT pages */
body.tft-home-page #titleBar,
body.tft-page #titleBar,
body.tft-home-page #navPanel,
body.tft-page #navPanel { display: none !important; }

.tft-home-wrap {
    background: #151136 url(/themes/tinhte/public/images/set_17_bg.png) no-repeat center top;
}

.tft-home-wrap,
.tft-rooms-inner,
.tft-quicklinks-inner,
.tft-hero-content {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box;
}
.container {
    margin-left: auto;
    margin-right: auto;
    width: 1140px;
}

.tft-home-wrap { padding-left: 0; padding-right: 0; max-width: none; }


/* Home hero sits on the flat Figma purple — drop the dark gradient + border. */
body.tft-home-page .tft-hero {
    border-bottom: none;
    padding: 40px 0 32px;
}


.tft-hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.tft-hero-content > img {
    width: clamp(180px, 28vw, 320px);
    height: auto;
    filter: drop-shadow(0 12px 30px rgba(91,79,207,0.45));
}

/* ============================================================
   SEARCH BAR (player)
   ============================================================ */

.tft-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 12px;
    padding: 6px 8px 6px 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

.tft-region-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--tft-text-primary);
    padding: 8px 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
}
.tft-region-btn:hover { background: var(--tft-bg-card-hover); }
.tft-region-btn-flag {
    width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
}
.tft-region-btn-caret { opacity: 0.8; }

.tft-search-divider {
    width: 1px; height: 22px; background: var(--tft-border);
}

.tft-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--tft-text-primary);
    font-size: 15px;
    padding: 10px 8px;
}
.tft-search-input::placeholder { color: var(--tft-text-muted); }

.tft-search-grid-btn {
    background: transparent;
    border: none;
    padding: 8px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tft-search-grid-btn:hover { background: var(--tft-bg-card-hover); }

.tft-search-btn {
    background: transparent;
    border: none;
    border-left: 1px solid rgba(152,16,250,0.4);
    color: rgba(255,255,255,0.55);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
    border-radius: 0 10px 10px 0;
}
.tft-search-btn:hover { color: #fff; background: rgba(152,16,250,0.2); }

.tft-search-form { position: relative; width: 100%; max-width: 680px; }
.tft-search-suggestions {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 12px;
    overflow: hidden;
    z-index: 500;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.tft-search-suggestions.is-open { display: block; }
.tft-search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    color: var(--tft-text-primary);
    font-size: 14px;
    border-bottom: 1px solid var(--tft-border);
    transition: background 0.12s;
}
.tft-search-suggestion-item:last-child { border-bottom: none; }
.tft-search-suggestion-item:hover { background: var(--tft-bg-card-hover); }
.tft-search-suggestion-name { font-weight: 600; flex: 1; }
.tft-search-suggestion-region {
    font-size: 11px;
    color: var(--tft-text-muted);
    background: var(--tft-border);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tft-search-suggestion-icon {
    color: var(--tft-text-muted);
    flex-shrink: 0;
}
.tft-search-suggestion-label {
    padding: 6px 16px 4px;
    font-size: 11px;
    color: var(--tft-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    border-bottom: 1px solid var(--tft-border);
}
.tft-search-suggestion-remove {
    background: none;
    border: none;
    color: var(--tft-text-muted);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.12s;
    flex-shrink: 0;
}
.tft-search-suggestion-item:hover .tft-search-suggestion-remove { opacity: 1; }
.tft-search-suggestion-remove:hover { color: var(--tft-text-primary); background: var(--tft-border); }

/* ============================================================
   HEADER RIGHT (login + balance)
   ============================================================ */
.tft-header12-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 680px;
}

.tft-balance-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.tft-balance-link img { height: 36px; width: auto; }
.tft-balance-text {
    color: var(--tft-text-secondary);
    margin: 0;
    font-size: 14px;
}

.tft-riot-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tft-riot-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(245,158,11,0.35);
}
.tft-riot-login-btn img { width: 20px; height: 20px; }

/* ============================================================
   SERVER MODAL
   ============================================================ */
.tft-server-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 998;
    display: none;
}
.tft-server-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    width: min(720px, 92vw);
    max-height: 80vh;
    overflow: auto;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 16px;
    display: none;
}
.tft-server-modal[aria-hidden="false"],
.tft-server-modal-backdrop[aria-hidden="false"] { display: block; }

.tft-server-modal-inner { padding: 16px 20px; }
.tft-server-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--tft-border);
    margin-bottom: 14px;
}
.tft-server-modal-title { font-weight: 700; font-size: 18px; }
.tft-server-modal-close {
    background: transparent; border: none; padding: 6px; border-radius: 6px;
}
.tft-server-modal-close:hover { background: var(--tft-bg-card-hover); }

.tft-server-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.tft-server-item {
    display: flex; align-items: center; gap: 10px;
    background: transparent;
    border: 1px solid var(--tft-border);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--tft-text-primary);
    text-align: left;
    font-size: 14px;
}
.tft-server-item:hover { background: var(--tft-bg-card-hover); }
.tft-server-item--active {
    border-color: var(--tft-purple);
    background: rgba(91,79,207,0.12);
}
.tft-server-item-flag { width: 28px; height: 28px; border-radius: 50%; }

/* ============================================================
   FILTER BAR
   ============================================================ */
.tft-filter-bar,
.tft-home-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 1280px;
    margin: 24px auto 16px;
    padding: 0 24px;
}

.tft-filter-left { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.tft-filter-right { flex: 1; min-width: 240px; display: flex; justify-content: flex-end; }

.tft-trait-dropdown { position: relative; }

.tft-tier-btn {
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    color: var(--tft-text-primary);
    padding: 8px 14px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.tft-tier-btn:hover { background: var(--tft-bg-card-hover); border-color: var(--tft-purple); }

.tft-home-tier-group {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
}
.tft-home-tier-group .tft-tier-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
}

.tft-home-tier-group img { 
    width: 16px;
    height: 20px;
}
.tft-tier-btn--active { background: var(--tft-purple) !important; color: #fff; }
.tft-tier-btn--s.tft-tier-btn--active { background: var(--tft-tier-s) !important; }
.tft-tier-btn--a.tft-tier-btn--active { background: var(--tft-tier-a) !important; }
.tft-tier-btn--b.tft-tier-btn--active { background: var(--tft-tier-b) !important; }

.tft-filter-search-wrap {
    position: relative;
    width: 100%;
    max-width: 320px;
}
.tft-filter-search {
    width: 100%;
    box-sizing: border-box;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
    padding: 10px 40px 10px 14px;
    color: var(--tft-text-primary);
    font-size: 14px;
    outline: none;
}
.tft-filter-search:focus { border-color: var(--tft-purple); }
.tft-filter-search-icon {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; color: var(--tft-text-secondary);
    padding: 6px; border-radius: 6px;
}

.tft-trait-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 240px;
    max-height: 320px;
    overflow: auto;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
    padding: 8px;
    z-index: 50;
}

.tft-trait-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--tft-text-primary);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}
.tft-trait-option:hover { background: var(--tft-bg-card-hover); }
.tft-trait-option--active {
    background: rgba(91,79,207,0.18);
    color: #fff;
}
.tft-trait-option-icon {
    width: 20px; height: 20px;
    flex-shrink: 0;
    object-fit: contain;
    filter: brightness(1.1);
}
.tft-trait-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tft-trait-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 10px;
}
.tft-trait-loading--error { color: var(--tft-red); }

/* ============================================================
   ROOMS SECTION
   ============================================================ */
.tft-rooms-section { padding-bottom: 40px; }

.tft-rooms-inner {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tft-room-card {
    position: relative;
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 12px;
    background: linear-gradient(90deg, #2b244f 0%, #3d2863 50%, #2b244f 100%);
    overflow: hidden;
    cursor: pointer;
}
.tft-room-card-header {
    background: rgba(43,36,79,0.8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(152,16,250,0.2);
}
.tft-room-card-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; }
.tft-room-icon-box {
    width: 32px; height: 32px; border-radius: 8px;
    background: rgba(91,79,207,0.25);
    display: flex; align-items: center; justify-content: center;
}
.tft-room-expand-btn {
    background: transparent; border: none; color: #fff;
    padding: 6px; border-radius: 6px;
}
.tft-room-expand-btn:hover { background: rgba(255,255,255,0.1); }

.tft-room-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 24px;
    flex-wrap: wrap;
}

.tft-room-champs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ============================================================
   CHAMPION CHIP
   ============================================================ */
.tft-champ-chip {
    position: relative;
    width: 48px;
    height: 91px;
    flex-shrink: 0;
}
.tft-champ-chip-img {
    position: absolute;
    top: 19px;
    left: 0;
    width: 48px;
    height: 56px;
    border-radius: 10px;
    border: 2px solid rgba(194,122,255,0.6);
    background: linear-gradient(130deg, #155dfc 0%, #9810fa 50%, #e60076 100%);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}
.tft-champ-chip-stars {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #fdc700;
    white-space: nowrap;
    line-height: 1;
}
.tft-champ-chip-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
}
.tft-trait-dot {
    width: 10px; height: 10px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.25);
}
.tft-trait-dot--orange { background: #ff6900; border-color: #ff8904; }
.tft-trait-dot--red    { background: #fb2c36; border-color: #ff6467; }
.tft-trait-dot--gold   { background: #fdc700; border-color: #ffd84d; }
.tft-trait-dot--silver { background: #c0c0c0; border-color: #d9d9d9; }
.tft-trait-dot--bronze { background: #a0522d; border-color: #cd853f; }

/* ============================================================
   ITEM SLOTS
   ============================================================ */
.tft-room-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.tft-room-items { display: flex; flex-direction: column; gap: 6px; }
.tft-room-items-row { display: flex; gap: 6px; }

.tft-item-slot {
    width: 32px; height: 36px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.tft-item-slot--gold {
    border: 2px solid rgba(240,177,0,0.8);
    background: linear-gradient(131deg, #fdc700 0%, #d08700 100%);
    color: #1a1636;
}
.tft-item-slot--locked {
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(0,0,0,0.3);
    color: rgba(255,255,255,0.5);
}

.tft-room-actions { display: flex; gap: 6px; }
.tft-room-action-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease;
}
.tft-room-action-btn:hover { background: rgba(255,255,255,0.12); }

/* ============================================================
   QUICK LINKS
   ============================================================ */
.tft-quicklinks {
    padding: 32px 0 64px;
    border-top: 1px solid var(--tft-border);
    background: #0d1124;
}
.tft-quicklinks-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}
.tft-quicklink-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 12px;
    padding: 16px;
    color: var(--tft-text-primary);
    transition: all 0.15s ease;
}
.tft-quicklink-card:hover {
    background: var(--tft-bg-card-hover);
    border-color: var(--tft-purple);
    transform: translateY(-2px);
}
.tft-quicklink-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(91,79,207,0.18);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.tft-quicklink-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tft-quicklink-label { font-weight: 700; font-size: 15px; }
.tft-quicklink-desc { font-size: 12px; color: var(--tft-text-secondary); }

/* ============================================================
   LATEST ARTICLES / NEWS SECTION
   ============================================================ */
.tft-latest-articles {
    background: linear-gradient(180deg, #031826 0%, #071d2d 100%);
    padding: 72px 0 80px;
}

.tft-latest-articles-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

/* Section heading */
.tft-section-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 48px;
}

.tft-section-heading-line {
    flex: 1;
    max-width: 180px;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.tft-section-heading-title {
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
    margin: 0;
    white-space: nowrap;
    text-align: center;
}

/* Articles grid */
.tft-articles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

/* Article card */
.tft-article-card {
    display: flex;
    flex-direction: column;
}

.tft-article-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

/* Thumbnail */
.tft-article-thumb {
    position: relative;
    overflow: hidden;
    border-radius: 2px;
    aspect-ratio: 16 / 9;
    background: rgba(0, 0, 0, 0.3);
}

.tft-article-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tft-article-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2b244f 0%, #3d2863 100%);
}

.tft-article-thumb-placeholder span {
    font-size: 48px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.15);
    text-transform: uppercase;
}

.tft-article-card-link:hover .tft-article-thumb img {
    transform: scale(1.06);
}

.tft-article-thumb-overlay {
    position: absolute;
    left: 0;
    bottom: 24px;
    background: rgba(0, 0, 0, 0.55);
    padding: 10px 18px;
}

.tft-article-thumb-label {
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.2;
    display: block;
}

/* Title */
.tft-article-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    color: #d7e7ff;
    margin: 16px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s ease;
}

.tft-article-card-link:hover .tft-article-title {
    color: #ffffff;
}

/* Date */
.tft-article-date {
    display: block;
    text-align: center;
    font-size: 14px;
    color: #7e94aa;
    letter-spacing: 0.5px;
    margin-top: 10px;
}

/* Orange accent line */
.tft-article-accent {
    display: block;
    width: 40px;
    height: 3px;
    background: #ff6b3d;
    margin: 12px auto 0;
    border-radius: 999px;
    flex-shrink: 0;
}

/* Comment count */
.tft-article-comments {
    display: block;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 6px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .tft-room-card-body { padding: 16px; }
    .tft-hero { padding: 32px 0 48px; }

    .tft-articles-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .tft-section-heading-title { font-size: 34px; }
    .tft-latest-articles { padding: 56px 0 64px; }
}

@media (max-width: 640px) {
    .tft-hero { padding: 24px 0 36px; }
    .tft-home-filter-bar,
    .tft-filter-bar { padding: 0 16px; }
    .tft-rooms-inner { padding: 0 16px; }
    .tft-quicklinks-inner { padding: 0 16px; }
    .tft-room-card-body { gap: 14px; padding: 14px; }
    .tft-room-champs { justify-content: center; }
    .tft-room-right { justify-content: center; width: 100%; }
    .tft-filter-left,
    .tft-filter-right { width: 100%; }
    .tft-filter-search-wrap { max-width: 100%; }

    .tft-articles-grid { grid-template-columns: 1fr; gap: 28px; }
    .tft-section-heading-title { font-size: 28px; }
    .tft-section-heading { gap: 16px; }
    .tft-latest-articles { padding: 40px 0 48px; }
    .tft-latest-articles-inner { padding: 0 16px; }
    .tft-article-thumb-label { font-size: 18px; padding: 8px 14px; }
    .tft-article-title { font-size: 18px; }
}

/* ============================================================
   META COMPS — TIER BADGE, SPLASH, HEX TRAITS
   ============================================================ */
:root {
    --tft-tier-bronze: #8b5a1e;
    --tft-trait-gold-bg: linear-gradient(135deg, #fdc700 0%, #c89b3c 100%);
    --tft-trait-bronze-bg: linear-gradient(135deg, #b87333 0%, #8b5a1e 100%);
}

/* tier badge: small block bleeding off the left edge */
.tft-room-tier-badge {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 18px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    border-right: 1px solid rgba(0,0,0,0.25);
    z-index: 2;
}
.tft-room-tier-badge--s { background: var(--tft-tier-s); }
.tft-room-tier-badge--a { background: var(--tft-tier-a); }
.tft-room-tier-badge--b { background: var(--tft-tier-b); }
.tft-room-tier-badge--c { background: var(--tft-tier-c); }

.tft-room-card-inner {
    position: relative;
    margin-left: 36px;
    z-index: 1;
}

/* splash background: blurred carry portrait inside the card */
.tft-room-splash {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.18;
    filter: blur(2px) saturate(120%);
    pointer-events: none;
    z-index: 0;
}
.tft-room-card-inner > * { position: relative; z-index: 1; }

/* card name + meta */
.tft-room-card-name {
    font-weight: 700;
    font-size: 15px;
    color: #fff;
}
.tft-room-card-meta {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--tft-text-secondary);
    font-weight: 500;
}

/* right panel: traits-col + augments side-by-side */
.tft-room-side {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
}

/* traits column: hex row + core items stacked */
.tft-room-traits-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    flex-shrink: 0;
}

/* core items dark box */
.tft-room-core-items {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 5px 7px;
    flex-wrap: wrap;
}
.tft-item-icon--core {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tft-item-icon--core img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tft-trait-hex-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}
.tft-trait-hex {
    width: 28px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.tft-trait-hex--gold   { background: var(--tft-trait-gold-bg); }
.tft-trait-hex--bronze { background: var(--tft-trait-bronze-bg); }
.tft-trait-hex img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}

/* empty state */
.tft-rooms-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--tft-text-secondary);
    background: var(--tft-bg-card);
    border: 1px dashed var(--tft-border);
    border-radius: 12px;
}
.tft-rooms-empty p { margin: 0 0 6px; }
.tft-rooms-empty-sub { font-size: 13px; color: var(--tft-text-muted); }

/* champion chip image fallback when image_url fails to load */
.tft-champ-chip-img:not([style*="background-image"]) {
    background: linear-gradient(130deg, #155dfc 0%, #9810fa 50%, #e60076 100%);
}

/* loading overlay used by AJAX filter */
.tft-rooms-inner.tft-rooms-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

@media (max-width: 640px) {
    .tft-room-tier-badge { width: 28px; font-size: 14px; }
    .tft-room-card-inner { margin-left: 28px; }
    .tft-trait-hex { width: 24px; height: 28px; }
    .tft-trait-hex img { width: 14px; height: 14px; }
}

/* ============================================================
   META COMPS — ITEMS UNDER CHAMP + AUGMENTS COLUMN
   ============================================================ */
.tft-champ-chip {
    height: auto;
    min-height: 91px;
}
.tft-champ-chip-items {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 76px;
    display: flex;
    gap: 2px;
    z-index: 2;
}
.tft-item-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.tft-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Slight bottom padding so dots sit below items */
.tft-champ-chip-dots {
    bottom: -8px;
}

.tft-room-augments {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(152, 16, 250, 0.3);
    border-radius: 10px;
    flex-shrink: 0;
    align-self: flex-start;
}
.tft-room-augments-row {
    display: flex;
    gap: 4px;
    align-items: center;
}
.tft-room-augments-row--high .tft-augment-icon {
    background: rgba(200, 155, 60, 0.22);
    border: 1px solid rgba(200, 155, 60, 0.5);
}
.tft-room-augments-row--low .tft-augment-icon {
    background: rgba(255, 105, 0, 0.15);
    border: 1px solid rgba(255, 105, 0, 0.35);
}
.tft-augment-icon {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
}
.tft-augment-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 640px) {
    .tft-champ-chip-items { top: 68px; }
    .tft-item-icon { width: 12px; height: 12px; }
    .tft-room-side { flex-wrap: wrap; gap: 8px; }
}

/* ============================================================
   CHAMPION HOVER TOOLTIP
   ============================================================ */
.tft-champ-tooltip {
    position: fixed;
    z-index: 9999;
    width: 320px;
    max-width: 90vw;
    background: linear-gradient(180deg, #2a1f4d 0%, #1a1333 100%);
    border: 1px solid rgba(152, 16, 250, 0.45);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
    color: var(--tft-text-primary);
    font-size: 13px;
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.tft-champ-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.tft-champ-tooltip__header {
    padding: 10px 14px;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(90deg, #3b2a73 0%, #4c2f8f 100%);
    border-bottom: 1px solid rgba(152, 16, 250, 0.35);
    border-radius: 12px 12px 0 0;
}
.tft-champ-tooltip__body {
    padding: 12px 14px;
}
.tft-champ-tooltip__traits {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.tft-champ-tooltip__trait {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--tft-text-primary);
}
.tft-champ-tooltip__trait-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #c89b3c;
}
.tft-champ-tooltip__trait-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(70%) sepia(55%) saturate(497%) hue-rotate(5deg) brightness(95%);
}
.tft-champ-tooltip__range {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    border-top: 1px solid rgba(152, 16, 250, 0.2);
    border-bottom: 1px solid rgba(152, 16, 250, 0.2);
    margin-bottom: 10px;
    color: var(--tft-text-secondary);
}
.tft-champ-tooltip__range-label {
    font-size: 13px;
}
.tft-champ-tooltip__range-dots {
    display: inline-flex;
    gap: 4px;
}
.tft-champ-tooltip__range-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.15);
}
.tft-champ-tooltip__range-dot--on {
    background: #c89b3c;
}
.tft-champ-tooltip__ability-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.tft-champ-tooltip__ability-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(152, 16, 250, 0.5);
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.35);
}
.tft-champ-tooltip__ability-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tft-champ-tooltip__ability-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tft-champ-tooltip__ability-name {
    color: #c89b3c;
    font-weight: 600;
    font-size: 13px;
}
.tft-champ-tooltip__ability-mana {
    color: var(--tft-text-secondary);
    font-size: 12px;
}
.tft-champ-tooltip__ability-desc {
    color: var(--tft-text-primary);
    font-size: 13px;
    line-height: 1.5;
}
.tft-champ-tooltip__ability-desc .tft-ab-ad   { color: #f97316; font-weight: 600; }
.tft-champ-tooltip__ability-desc .tft-ab-ap   { color: #a78bfa; font-weight: 600; }
.tft-champ-tooltip__ability-desc .tft-ab-true { color: #ffffff; font-weight: 600; }
.tft-champ-tooltip__ability-desc .tft-ab-heal { color: #22c55e; font-weight: 600; }
.tft-champ-tooltip__ability-desc .tft-ab-val  { color: #60a5fa; font-weight: 600; }
.tft-champ-tooltip__ability-desc .tft-ab-mana { color: #38bdf8; font-weight: 600; }
.tft-champ-tooltip__ability-desc .tft-ab-as   { color: #fb923c; font-weight: 600; }
.tft-champ-tooltip__ability-desc .tft-ab-bonus { color: #c084fc; font-weight: 600; }
/* Inline scale badges (AD / AP / HP / Mana / AS) */
.tft-champ-tooltip__ability-desc .tft-ab-scale {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    margin: 0 2px;
    background: rgba(255,255,255,0.08);
    letter-spacing: 0.03em;
}
/* Tag labels (Nội Tại / Kích Hoạt / Buff) */
.tft-champ-tooltip__ability-desc .tft-ab-tag {
    display: inline;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tft-champ-tooltip__ability-desc .tft-ab-tag--passive { color: #9ca3af; }
.tft-champ-tooltip__ability-desc .tft-ab-tag--active  { color: #c89b3c; }
.tft-champ-tooltip__ability-desc .tft-ab-tag--bonus   { color: #c084fc; }
/* Legacy img in desc */
.tft-champ-tooltip__ability-desc img {
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -3px;
    margin: 0 1px;
}

.tft-champ-chip { cursor: pointer; }

@media (max-width: 640px) {
    .tft-champ-tooltip { width: 280px; font-size: 12px; }
}

/* ============================================================
   ITEMS 1 ROW (up to 6) + TRAIT DOTS 3 COLOURS
   ============================================================ */
.tft-champ-chip-items--wrap {
    flex-wrap: nowrap;
    gap: 2px;
    justify-content: center;
    margin-top: 2px;
}
.tft-champ-chip-items--wrap .tft-item-icon {
    width: 14px;
    height: 14px;
}
.tft-champ-chip { min-height: 100px; }
.tft-champ-chip-dots { bottom: -10px; }

@media (max-width: 640px) {
    .tft-champ-chip-items--wrap .tft-item-icon { width: 10px; height: 10px; }
    .tft-champ-chip { min-height: 92px; }
}

/* ============================================================
   TRAIT DOT/HEX EXTRA STYLES
   ============================================================ */
.tft-trait-dot--off       { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.18); }
.tft-trait-dot--chromatic { background: linear-gradient(135deg,#ff5db1,#ffb84d,#5dd0ff); border-color: #fff; }

:root {
    --tft-trait-silver-bg:    linear-gradient(135deg, #d8d8d8 0%, #888 100%);
    --tft-trait-chromatic-bg: linear-gradient(135deg,#ff5db1 0%,#ffb84d 50%,#5dd0ff 100%);
    --tft-trait-off-bg:       linear-gradient(135deg, #4a3a6e 0%, #2b2147 100%);
}
.tft-trait-hex--silver    { background: var(--tft-trait-silver-bg); }
.tft-trait-hex--chromatic { background: var(--tft-trait-chromatic-bg); }
.tft-trait-hex--off       { background: var(--tft-trait-off-bg); opacity: 0.55; }

/* Single hex row (replaces split gold/bronze rows) */
.tft-trait-hex-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.tft-trait-hex { cursor: pointer; }

/* ============================================================
   TRAIT HOVER TOOLTIP
   ============================================================ */
.tft-trait-tooltip {
    position: fixed;
    z-index: 9999;
    width: 320px;
    max-width: 92vw;
    background: linear-gradient(180deg, #2a1f4d 0%, #1a1333 100%);
    border: 1px solid rgba(152,16,250,0.45);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
    color: var(--tft-text-primary);
    font-size: 13px;
    line-height: 1.45;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.tft-trait-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.tft-trait-tooltip__header {
    padding: 10px 14px;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(90deg, #3b2a73 0%, #4c2f8f 100%);
    border-bottom: 1px solid rgba(152,16,250,0.35);
    border-radius: 12px 12px 0 0;
}
.tft-trait-tooltip__body { padding: 12px 14px; }
.tft-trait-tooltip__desc {
    font-size: 13px;
    color: var(--tft-text-primary);
    margin-bottom: 10px;
}
.tft-trait-tooltip__desc b { color: #fde68a; font-weight: 600; }
.tft-tt-scale {
    display: inline-block;
    width: 14px; height: 14px;
    vertical-align: -3px;
    margin: 0 1px;
}
.tft-trait-tooltip__breaks-label {
    color: var(--tft-text-secondary);
    font-size: 12px;
    margin-bottom: 6px;
}
.tft-trait-tooltip__breaks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.tft-trait-tooltip__break {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    color: var(--tft-text-secondary);
    font-size: 12px;
}
.tft-trait-tooltip__break.is-active {
    background: rgba(152,16,250,0.18);
    color: #fff;
}
.tft-trait-tooltip__break-hex {
    width: 26px;
    height: 28px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #1a1333;
    flex-shrink: 0;
}
.tft-trait-tooltip__break-text { flex: 1; min-width: 0; }
.tft-trait-tooltip__champs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid rgba(152,16,250,0.2);
}
.tft-trait-tooltip__champ {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
    border: 2px solid #6b7280;
    background: rgba(0,0,0,0.4);
    flex-shrink: 0;
}
.tft-trait-tooltip__champ img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.tft-trait-tooltip__champ--cost-1 { border-color: #6b7280; }
.tft-trait-tooltip__champ--cost-2 { border-color: #22c55e; }
.tft-trait-tooltip__champ--cost-3 { border-color: #3b82f6; }
.tft-trait-tooltip__champ--cost-4 { border-color: #a855f7; }
.tft-trait-tooltip__champ--cost-5 { border-color: #fbbf24; }

@media (max-width: 640px) {
    .tft-trait-tooltip { width: 280px; }
}

/* ============================================================
   HOME — ALERT BADGE + WARNING BANNER (Figma node 6:390)
   ============================================================ */
.tft-home-alert-wrap {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 24px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.tft-home-alert-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(131deg, #fdc700 0%, #d08700 100%);
    border: 1px solid rgba(240,177,0,0.8);
    color: #1a1636;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(208,135,0,0.35);
}
.tft-home-alert-badge-icon { flex-shrink: 0; }
.tft-home-alert-badge-text { letter-spacing: 0.2px; }

.tft-warning-banner {
    width: 100%;
    max-width: 1232px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(90deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%);
    color: #fff;
    text-align: center;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(192,57,43,0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tft-warning-banner:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(231,76,60,0.45);
    color: #fff;
}
.tft-warning-banner-icon { flex-shrink: 0; }

@media (max-width: 640px) {
    .tft-home-alert-wrap { padding: 12px 16px 4px; }
    .tft-warning-banner { font-size: 13px; padding: 10px 14px; }
}

/* ============================================================
   HEADER 12 (tftactics top bar + nav) — Figma reference
   ============================================================ */
.tft-header12 {
    background: var(--tft-home-bg, #2b244f);
    color: #fff;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    position: sticky;
    top: 0;
    z-index: 100;
}
.tft-header12 .container { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.tft-header12 .h-full { height: 100%; }

/* ---------- Top utility bar ---------- */
.tft-header12-topbar { border-bottom: 1px solid rgba(89, 22, 139, 0.3); }
.tft-header12-topbar-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    min-height: 60px;
    padding: 10px 0;
}

/* ---------- Logo ---------- */
.tft-header12-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.tft-header12-logo:hover { color: #fff; }
.tft-header12-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f0b100 0%, #f54900 100%);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(245,73,0,0.35);
    flex-shrink: 0;
}
.tft-header12-logo-text { letter-spacing: -0.2px; }
.tft-header12-logo-chevron { color: #fff; opacity: 0.9; }

/* ---------- Search outer wrapper (position context for dropdowns) ---------- */
.tft-header12-search-outer {
    position: relative;
    flex: 1;
    max-width: 560px;
    justify-self: center;
    width: 100%;
}

/* ---------- Summoner search bar ---------- */
.tft-header12-search {
    display: flex;
    align-items: center;
    width: 100%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(152,16,250,0.4);
    border-radius: 8px;
    transition: border-color 0.2s, opacity 0.25s, transform 0.25s;
}
.tft-header12-search:focus-within {
    border-color: rgba(152,16,250,0.8);
    background: rgba(255,255,255,0.09);
}

/* On homepage: hidden by default, shown after scroll */
body.tft-home-page .tft-header12-search-outer {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.25s, transform 0.25s;
}
body.tft-home-page .tft-header12--scrolled .tft-header12-search-outer {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

/* ---------- Region selector trigger ---------- */
.tft-header12-region {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 12px;
    height: 40px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-right: 1px solid rgba(152,16,250,0.4);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: 8px 0 0 8px;
}
.tft-header12-region:hover { background: rgba(255,255,255,0.06); }
.tft-header12-region.is-open { background: rgba(152,16,250,0.15); }
.tft-header12-region-label { font-size: 14px; font-weight: 700; }

/* ---------- Region dropdown panel (click-based) ---------- */
.tft-header12-region-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #2b244f;
    border: 1px solid rgba(152,16,250,0.4);
    border-radius: 8px;
    padding: 6px;
    z-index: 100;
    min-width: 90px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.tft-header12-region-panel.is-open { display: block; }

/* ---------- Search input ---------- */
.tft-header12-search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}
.tft-header12-search-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 14px;
    padding: 0 12px;
    height: 40px;
    min-width: 0;
    cursor: text;
    -webkit-appearance: none;
}
.tft-header12-search-input::placeholder { color: rgba(255,255,255,0.45) !important; }
.tft-header12-search-input:focus { background: transparent !important; color: #fff !important; box-shadow: none !important; border: none !important; outline: none !important; }
.tft-header12-search-btn {
    background: transparent;
    border: none;
    border-left: 1px solid rgba(152,16,250,0.4);
    color: rgba(255,255,255,0.5);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
    border-radius: 0 8px 8px 0;
}
.tft-header12-search-btn:hover { color: #fff; background: rgba(152,16,250,0.2); }

/* ---------- Region opt buttons ---------- */
.tft-header12-region-opt {
    display: block;
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    padding: 7px 12px;
    border-radius: 6px;
    cursor: pointer;
}
.tft-header12-region-opt:hover { background: rgba(152,16,250,0.25); }
.tft-header12-region-opt--active { color: #fdc700; }

/* ---------- Search suggestion dropdown ---------- */
.tft-header12-sdrop {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #2b244f;
    border: 1px solid rgba(152,16,250,0.4);
    border-radius: 10px;
    z-index: 99;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    min-width: 320px;
}
.tft-header12-sdrop.is-open { display: block; }

.tft-header12-sdrop-tabs {
    display: flex;
    border-bottom: 1px solid rgba(152,16,250,0.25);
}
.tft-header12-sdrop-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    font-weight: 500;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s;
}
.tft-header12-sdrop-tab:hover { color: #fff; }
.tft-header12-sdrop-tab--active {
    color: #fff;
    font-weight: 600;
    border-bottom-color: var(--tft-purple);
}

.tft-header12-sdrop-body { padding: 6px; }
.tft-header12-sdrop-empty {
    padding: 20px;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
}
.tft-sdrop-loading {
    color: rgba(255,255,255,0.55) !important;
    font-style: italic;
}

/* Summoner entry row */
.tft-header12-sdrop-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s;
}
.tft-header12-sdrop-item:hover { background: rgba(152,16,250,0.15); }

.tft-header12-sdrop-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #5b4fcf, #9810fa);
    overflow: hidden;
}
.tft-header12-sdrop-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.tft-header12-sdrop-info { flex: 1; min-width: 0; }
.tft-header12-sdrop-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tft-header12-sdrop-region {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: var(--tft-gold);
    background: rgba(200,155,60,0.15);
    border: 1px solid rgba(200,155,60,0.3);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
    line-height: 1.5;
}
.tft-header12-sdrop-tier {
    display: block;
    font-size: 11px;
    margin-top: 1px;
    font-weight: 500;
}

.tft-header12-sdrop-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}
.tft-header12-sdrop-action {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.35);
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.12s, background 0.12s;
    padding: 0;
}
.tft-header12-sdrop-action:hover { color: #fff; background: rgba(255,255,255,0.08); }
.tft-header12-sdrop-action--fav-on { color: #fdc700; }
.tft-header12-sdrop-action--fav-on:hover { color: #fdc700; background: rgba(253,199,0,0.1); }

/* ---------- Top bar right ---------- */
.tft-header12-topbar-right {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
}
.tft-header12-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 4px;
    border-radius: 6px;
    user-select: none;
    transition: background 0.15s;
}
.tft-header12-lang:hover { background: rgba(255,255,255,0.06); }
.tft-header12-lang svg { flex-shrink: 0; }

/* Language dropdown */
.tft-header12-lang--has-drop {
    position: relative;
}
.tft-header12-lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #1f1a3d;
    border: 1px solid rgba(152, 16, 250, 0.4);
    border-radius: 8px;
    overflow: hidden;
    min-width: 148px;
    z-index: 300;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.tft-header12-lang--has-drop:hover .tft-header12-lang-menu,
.tft-header12-lang--has-drop:focus-within .tft-header12-lang-menu {
    display: block;
}
.tft-header12-lang-opt {
    display: block;
    padding: 10px 16px;
    color: var(--tft-text-secondary, #9ca3af);
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.tft-header12-lang-opt:hover {
    background: rgba(152, 16, 250, 0.15);
    color: #fff;
}
.tft-header12-lang-opt.is-active {
    color: #f59e0b;
    font-weight: 700;
    pointer-events: none;
}

/* ---------- Login button ---------- */
.tft-header12-login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    min-height: 36px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #1a1636;
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
    border: none;
    border-radius: 4px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(217,119,6,0.35);
    transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
    white-space: nowrap;
}
.tft-header12-login-btn:hover { color: #1a1636; transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 14px rgba(217,119,6,0.45); }

/* ---------- User dropdown ---------- */
.tft-header12-user { position: relative; }
.tft-header12-user-btn {
    display: inline-flex; align-items: center; gap: 6px;
    color: #fff; background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px; padding: 6px 12px; font-size: 14px; cursor: pointer;
}
.tft-header12-user-btn:hover { background: rgba(255,255,255,0.08); }
.tft-header12-user-dropdown {
    position: absolute; top: calc(100% + 6px); right: 0;
    background: #2b244f; border: 1px solid rgba(152,16,250,0.3);
    border-radius: 10px; min-width: 200px; padding: 6px;
    display: none; z-index: 30; box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.tft-header12-user:hover .tft-header12-user-dropdown { display: block; }
.tft-header12-user-dropdown a { display: block; padding: 8px 12px; color: #fff; border-radius: 6px; font-size: 14px; text-decoration: none; }
.tft-header12-user-dropdown a:hover { background: rgba(152,16,250,0.2); }

/* ---------- Mobile toggle ---------- */
.tft-header12-mobile-toggle { display: none; background: transparent; border: none; color: #fff; padding: 6px; border-radius: 6px; cursor: pointer; }
.tft-header12-mobile-toggle:hover { background: rgba(255,255,255,0.08); }

/* ---------- Main nav ---------- */
.tft-header12-nav { background: #1a1433; height: 50px; }
.tft-header12-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; height: 100%; overflow-x: auto; scrollbar-width: none; }
.tft-header12-nav-inner::-webkit-scrollbar { display: none; }
.tft-header12-nav-link { position: relative; color: #fff; font-size: 16px; line-height: 24px; padding: 0 2px; white-space: nowrap; text-decoration: none; transition: color 0.15s; }
.tft-header12-nav-link:hover { color: #fdc700; }
.tft-header12-nav-link--active { color: #ff6900; }
.tft-header12-nav-link--active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -28px; height: 3px; background: #ff6900; border-radius: 3px 3px 0 0; }

/* ---------- Patch notes nav link ---------- */
.tft-header12-nav-link--patch {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #fdc700;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.3px;
    border: 1px solid rgba(253,199,0,0.35);
    border-radius: 20px;
    padding: 2px 10px;
    margin-left: 4px;
}
.tft-header12-nav-link--patch:hover { color: #fff; border-color: rgba(253,199,0,0.7); background: rgba(253,199,0,0.1); }
.tft-header12-nav-link--patch svg { flex-shrink: 0; }

/* ---------- Mobile nav ---------- */
.tft-header12-mobile-nav { display: none; background: #1a1433; padding: 8px 24px 16px; flex-direction: column; gap: 4px; border-top: 1px solid rgba(152,16,250,0.2); }
.tft-header12-mobile-nav.is-open { display: flex; }
.tft-header12-mobile-nav .tft-header12-nav-link { padding: 10px 8px; border-radius: 6px; font-size: 15px; }
.tft-header12-mobile-nav .tft-header12-nav-link:hover { background: rgba(255,255,255,0.05); }
.tft-header12-mobile-nav .tft-header12-nav-link--active::after { display: none; }

/* ---------- Responsive ---------- */

/* Tablet: nav remains visible, tighter spacing */
@media (max-width: 1024px) {
    .tft-header12-nav-inner { gap: 20px; }
    .tft-header12-search-outer { max-width: 340px; }
    .tft-header12-nav-link { font-size: 14px; }
    .tft-header12-nav-link--patch { font-size: 12px; padding: 2px 8px; }
}

/* Mobile breakpoint: hamburger replaces desktop nav */
@media (max-width: 768px) {
    /* Hide desktop nav bar, show hamburger */
    .tft-header12-nav { display: none !important; }
    .tft-header12-mobile-toggle { display: flex; align-items: center; justify-content: center; }

    /* Topbar: logo | search | actions */
    .tft-header12-topbar-inner {
        grid-template-columns: auto 1fr auto;
        gap: 12px;
        min-height: 56px;
    }
    .tft-header12-search-outer { max-width: 100%; }
    .tft-header12-lang span { display: none; }
}

/* Small mobile: search wraps to second row */
@media (max-width: 540px) {
    .tft-header12-topbar-inner {
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        gap: 8px;
        padding: 8px 0;
    }
    .tft-header12-search-outer { grid-column: 1 / -1; order: 3; max-width: 100%; }
    body.tft-home-page .tft-header12-search-outer { display: none; }
    body.tft-home-page .tft-header12--scrolled .tft-header12-search-outer {
        display: block; opacity: 1; pointer-events: auto; transform: none;
    }
}

@media (max-width: 480px) {
    .tft-header12 .container { padding-left: 14px; padding-right: 14px; }
    .tft-header12-login-btn { padding: 7px 12px; font-size: 12px; }
    .tft-header12-topbar-right { gap: 6px; }
    .tft-header12-logo-text { font-size: 16px; }
}

/* ============================================================
   ITEM HOVER TOOLTIP
   ============================================================ */
.tft-item-tooltip {
    position: absolute;
    z-index: 9999;
    min-width: 220px;
    max-width: 320px;
    padding: 12px 14px;
    background: var(--tft-bg-card, #131729);
    border: 1px solid rgba(200, 155, 60, 0.5);
    border-radius: 10px;
    color: var(--tft-text-primary, #e2e8f0);
    font-size: 13px;
    line-height: 1.45;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}
.tft-item-tooltip.is-visible {
    opacity: 1;
}
.tft-item-tt-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.tft-item-tt-img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    border: 1px solid rgba(200, 155, 60, 0.6);
    object-fit: cover;
    flex-shrink: 0;
}
.tft-item-tt-name {
    font-weight: 700;
    color: var(--tft-gold, #c89b3c);
    font-size: 14px;
}
.tft-item-tt-desc {
    color: var(--tft-text-secondary, #cbd5e1);
    margin-bottom: 8px;
    white-space: pre-wrap;
}
.tft-item-tt-comp {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(200, 155, 60, 0.25);
}
.tft-item-tt-comp-item {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid rgba(200, 155, 60, 0.4);
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
}
.tft-item-tt-comp-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tft-item-tt-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

/* Champion tooltip loading state (shimmer hint) */
.tft-champ-tooltip.is-loading::after {
    content: 'Đang tải…';
    display: block;
    margin-top: 6px;
    color: var(--tft-text-muted, #6b7280);
    font-size: 11px;
    font-style: italic;
    text-align: center;
}

/* ============================================================
   TFT FOOTER – dark-theme full-site footer
   ============================================================ */
body.tft-page .footer_main,
body.tft-home-page .footer_main {
    display: none;
}

.tft-footer {
    background: #1f1a3d;
    border-top: 1px solid rgba(89, 22, 139, 0.3);
    color: var(--tft-text-primary, #e2e8f0);
    font-size: 14px;
}

.tft-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 0;
}

/* ── Top 3-column row ── */
.tft-footer-top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

/* Brand column */
.tft-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tft-footer-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tft-footer-logo-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2b7fff 0%, #9810fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tft-footer-logo-name {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
}

.tft-footer-disclaimer {
    font-size: 14px;
    color: var(--tft-text-secondary, #9ca3af);
    line-height: 1.65;
    margin: 0;
}

/* Link columns */
.tft-footer-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tft-footer-col-title {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin: 0;
    line-height: 1.5;
}

.tft-footer-col-title--gold {
    color: #f59e0b;
}

.tft-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tft-footer-links li a {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 1.43;
    transition: color 0.15s ease;
}

.tft-footer-links li a:hover {
    color: var(--tft-gold, #c89b3c);
}

/* ── Social icons ── */
.tft-footer-socials {
    display: flex;
    gap: 16px;
    padding-bottom: 32px;
}

.tft-footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.tft-footer-social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* ── Bottom copyright bar ── */
.tft-footer-bottom {
    border-top: 1px solid rgba(89, 22, 139, 0.3);
    padding: 24px 0 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tft-footer-copy,
.tft-footer-contact,
.tft-footer-ads-note {
    margin: 0;
    color: var(--tft-text-secondary, #9ca3af);
    font-size: 14px;
    line-height: 1.43;
}

.tft-footer-contact a {
    color: #fff;
    text-decoration: none;
}

.tft-footer-contact a:hover {
    color: var(--tft-gold, #c89b3c);
}

.tft-footer-ads-note {
    font-size: 12px;
    color: #6a7282;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .tft-footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .tft-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .tft-footer-top {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .tft-footer-brand {
        grid-column: auto;
    }
    .tft-footer-inner {
        padding: 32px 16px 0;
    }
}

.tft-footer12 {
    background: #1f1a3d;
    border-top: 1px solid rgba(89, 22, 139, 0.3);
    color: #e2e8f0;
    font-size: 14px;
    /* Override any legacy footer styles */
    padding: 0;
    margin: 0;
}

.tft-footer12-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 0;
}

/* ── 3-column top grid ── */
.tft-footer12-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

/* Brand column */
.tft-footer12-brand-col {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.tft-footer12-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tft-footer12-logo-img {
    max-height: 40px;
    width: auto;
    display: block;
    flex-shrink: 0;
    object-fit: contain;
}

.tft-footer12-logo-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2b7fff 0%, #9810fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.tft-footer12-logo-text {
    font-size: 24px;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
    line-height: 1.33;
}

.tft-footer12-disclaimer {
    font-size: 14px;
    color: #99a1af;
    line-height: 1.625;
    margin: 0;
}

/* Link columns */
.tft-footer12-link-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tft-footer12-col-heading {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    margin: 0;
    line-height: 1.5;
}

.tft-footer12-col-heading--gold {
    color: #f59e0b;
}

.tft-footer12-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tft-footer12-link {
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 1.43;
    display: inline-block;
    transition: color 0.15s ease;
}

.tft-footer12-link:hover {
    color: #c89b3c;
    text-decoration: none;
}

/* ── Social row ── */
.tft-footer12-social {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-bottom: 32px;
}

.tft-footer12-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.tft-footer12-social-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    text-decoration: none;
}

.tft-footer12-social-btn svg {
    display: block;
    flex-shrink: 0;
}

/* ── Bottom copyright bar ── */
.tft-footer12-bottom {
    border-top: 1px solid rgba(89, 22, 139, 0.3);
    padding: 24px 0 32px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tft-footer12-copyright,
.tft-footer12-contact,
.tft-footer12-ad-notice {
    margin: 0;
    font-size: 14px;
    color: #99a1af;
    line-height: 1.43;
}

.tft-footer12-email {
    color: #fff;
    text-decoration: none;
}

.tft-footer12-email:hover {
    color: #c89b3c;
    text-decoration: none;
}

.tft-footer12-ad-notice {
    font-size: 12px;
    color: #6a7282;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .tft-footer12-cols {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
    .tft-footer12-brand-col {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .tft-footer12-cols {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .tft-footer12-brand-col {
        grid-column: auto;
    }
    .tft-footer12-inner {
        padding: 32px 16px 0;
    }
    .tft-footer12-col-heading {
        font-size: 16px;
    }
}

/* ============================================================
   RANKINGS PAGE (bang-xep-hang)
   ============================================================ */

/* Generic sub-page layout */
body.tft-page .tft-page-header {
    padding: 32px 24px 16px;
    max-width: 1200px;
    margin: 0 auto;
}
body.tft-page .tft-page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--tft-text-primary);
    margin: 0 0 6px;
}
body.tft-page .tft-page-desc {
    color: var(--tft-text-secondary);
    font-size: 14px;
    margin: 0;
}
body.tft-page .tft-page-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px 40px;
}
body.tft-page .tft-loading-msg {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
}
body.tft-page #tft-meta-app {
    display: block;
}

/* Rankings wrap */
.tft-rank-wrap {
    width: 100%;
}

/* Tabs */
.tft-rank-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.tft-rank-tab {
    padding: 8px 20px;
    border-radius: 8px;
    border: 2px solid #4a5565;
    background: transparent;
    color: var(--tft-text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.tft-rank-tab--active {
    border-color: #155dfc;
    color: #e2e8f0;
    background: rgba(21,93,252,0.1);
}
.tft-rank-tab:hover:not(.tft-rank-tab--active) {
    border-color: #9810fa;
    color: #e2e8f0;
}

/* Filters */
.tft-rank-filters {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    align-items: flex-end;
    justify-content: space-between;
}
.tft-rank-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tft-rank-filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--tft-text-muted);
    letter-spacing: .5px;
}
.tft-rank-select {
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    color: var(--tft-text-primary);
    border-radius: 6px;
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%239ca3af' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 160px;
}
.tft-rank-select:focus {
    outline: none;
    border-color: #5b4fcf;
}

/* Table container */
.tft-rank-table-wrap {
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,.3);
    border-radius: 10px;
    overflow-x: auto;
    margin-bottom: 20px;
}
.tft-rank-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* Table header */
.tft-rank-head-row {
    border-bottom: 1px solid rgba(152,16,250,.3);
}
.tft-rank-th {
    padding: 12px 12px;
    background: #2b244f;
    color: #d1d5dc;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
    text-align: left;
}
.tft-rank-th--num    { width: 56px; text-align: center; }
.tft-rank-th--player { min-width: 160px; }
.tft-rank-th--tier   { min-width: 120px; }
.tft-rank-th--lp     { min-width: 90px; }
.tft-rank-th--stat   { min-width: 70px; text-align: center; }

/* Table rows */
.tft-rank-row {
    border-bottom: 1px solid rgba(152,16,250,.15);
    transition: background .12s;
}
.tft-rank-row:hover {
    background: rgba(91,79,207,.08);
}
.tft-rank-row:last-child {
    border-bottom: none;
}
.tft-rank-row--hot {
    background: rgba(255,105,0,.05);
}
.tft-rank-cell {
    padding: 12px 12px;
    vertical-align: middle;
    color: var(--tft-text-primary);
}
.tft-rank-cell--num {
    text-align: center;
    position: relative;
    vertical-align: middle;
}
.tft-rank-cell--num .tft-rank-num,
.tft-rank-cell--num .tft-rank-change {
    display: block;
}
.tft-rank-cell--stat {
    text-align: center;
    color: var(--tft-text-secondary);
    font-size: 12px;
}
.tft-rank-cell--total {
    color: #fb64b6;
    font-weight: 600;
}

/* Rank number badge */
.tft-rank-num {
    display: inline-block;
    min-width: 28px;
    padding: 2px 6px;
    background: #00a63e;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}
.tft-rank-row--hot .tft-rank-num {
    background: linear-gradient(131deg, #ff6900, #e7000b);
}
.tft-rank-streak {
    font-size: 12px;
    margin-right: 2px;
}

/* Player cell */
.tft-rank-player {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tft-rank-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}
.tft-rank-avatar--icon {
    background: transparent !important;
    border-color: rgba(255,255,255,0.15) !important;
}
.tft-rank-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}
.tft-rank-avatar-letter {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.tft-rank-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--tft-text-primary);
}

/* LP change badge in # column */
.tft-rank-change {
    display: block;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    margin-top: 2px;
}
.tft-rank-change--up   { color: #22c55e; }
.tft-rank-change--down { color: #ef4444; }

/* Tier badge */
.tft-rank-tier {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(124.5deg, rgba(173,70,255,.2), rgba(246,51,154,.2));
    border: 1px solid var(--tier-color, #9810fa);
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 12px;
}
.tft-rank-tier-icon {
    font-size: 12px;
}
.tft-rank-tier-img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}
.tft-rank-tier-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.tft-rank-tier-name {
    color: var(--tier-color, #9ca3af);
    font-weight: 600;
    font-size: 12px;
}

/* LP badges (top of filter bar) */
.tft-rank-lp-badges {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.tft-rank-lp-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 6px 12px;
    color: var(--tft-text-primary);
}
.tft-rank-badge-img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.tft-rank-badge-lp {
    font-weight: 700;
    font-size: 13px;
    color: #51a2ff;
}
.tft-rank-badge-arrow {
    color: #22c55e;
    flex-shrink: 0;
}

/* LP */
.tft-rank-lp {
    color: #51a2ff;
    font-weight: 700;
}

/* Pagination */
.tft-rank-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 8px 0 16px;
}
.tft-rank-page-btn {
    padding: 6px 16px;
    border-radius: 6px;
    border: 1px solid #4a5565;
    background: transparent;
    color: var(--tft-text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}
.tft-rank-page-btn:hover:not(:disabled) {
    border-color: #155dfc;
    color: #e2e8f0;
}
.tft-rank-page-btn:disabled {
    opacity: .4;
    cursor: default;
}
.tft-rank-page-btn--current {
    background: #155dfc;
    border-color: #155dfc;
    color: #fff;
}
.tft-rank-page-info {
    color: var(--tft-text-muted);
    font-size: 13px;
}

/* Loading & error states */
.tft-rank-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
}
.tft-rank-error {
    text-align: center;
    padding: 32px;
    color: #c0392b;
}
.tft-rank-empty {
    text-align: center;
    padding: 32px;
    color: var(--tft-text-muted);
}

/* Responsive */
@media (max-width: 1024px) {
    .tft-rank-th--stat, .tft-rank-cell--stat { display: none; }
    .tft-rank-th--total, .tft-rank-cell--total { display: table-cell !important; }
}
@media (max-width: 640px) {
    body.tft-page .tft-page-container { padding: 0 12px 40px; }
    .tft-rank-filters { gap: 10px; }
    .tft-rank-select { min-width: 120px; }
    .tft-rank-tab { padding: 6px 12px; font-size: 13px; }
}

/* ============================================================
   CHAMPIONS PAGE (tuong) — table layout, filter bar
   ============================================================ */

/* Outer wrap */
.tft-champs-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ---- Filter panel ---- */
.tft-champs-filter-panel {
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tft-champs-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 34px;
}
.tft-champs-filter-label {
    font-size: 13px;
    color: var(--tft-text-secondary);
    width: 90px;
    flex-shrink: 0;
    font-weight: 600;
}

/* Search input */
.tft-champs-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
    max-width: 320px;
}
.tft-champs-search {
    width: 100%;
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.3);
    color: var(--tft-text-primary);
    border-radius: 6px;
    padding: 8px 36px 8px 12px;
    font-size: 13px;
    transition: border-color .12s;
}
.tft-champs-search::placeholder { color: var(--tft-text-muted); }
.tft-champs-search:focus { outline: none; border-color: rgba(152,16,250,.6); }
.tft-champs-search-icon {
    position: absolute;
    right: 11px;
    color: var(--tft-text-muted);
    pointer-events: none;
}

/* Cost + tier button groups */
.tft-champs-btn-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tft-champs-filter-btn {
    height: 30px;
    min-width: 36px;
    padding: 0 10px;
    border: 1px solid var(--tft-border);
    border-radius: 6px;
    background: var(--tft-bg-card);
    color: var(--tft-text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    line-height: 1;
}
.tft-champs-filter-btn:hover { border-color: rgba(152,16,250,.5); color: #fff; }
.tft-champs-filter-btn--active {
    background: #2b244f;
    border-color: rgba(152,16,250,.7);
    color: #fff;
}

/* Cost buttons — dot indicator matching cost colour */
.tft-champs-cost-btn { display: flex; align-items: center; gap: 5px; }
.tft-champs-cost-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.tft-cost-dot--1 { background: #9ca3af; }
.tft-cost-dot--2 { background: #22c55e; }
.tft-cost-dot--3 { background: #3b82f6; }
.tft-cost-dot--4 { background: #a855f7; }
.tft-cost-dot--5 { background: #f59e0b; }

/* Tier buttons */
.tft-champs-tier-btn--s  { color: #e07b39; border-color: rgba(224,123,57,.4); }
.tft-champs-tier-btn--s.tft-champs-filter-btn--active  { background: rgba(224,123,57,.15); border-color: #e07b39; color: #e07b39; }
.tft-champs-tier-btn--a  { color: #3b82f6; border-color: rgba(59,130,246,.4); }
.tft-champs-tier-btn--a.tft-champs-filter-btn--active  { background: rgba(59,130,246,.15); border-color: #3b82f6; color: #3b82f6; }
.tft-champs-tier-btn--b  { color: #22c55e; border-color: rgba(34,197,94,.4); }
.tft-champs-tier-btn--b.tft-champs-filter-btn--active  { background: rgba(34,197,94,.15); border-color: #22c55e; color: #22c55e; }
.tft-champs-tier-btn--c  { color: #9ca3af; border-color: rgba(156,163,175,.3); }
.tft-champs-tier-btn--c.tft-champs-filter-btn--active  { background: rgba(156,163,175,.1); border-color: #9ca3af; color: #9ca3af; }

/* Trait dropdown */
.tft-champs-trait-sel-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.tft-champs-select {
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.3);
    color: var(--tft-text-primary);
    border-radius: 6px;
    padding: 7px 32px 7px 12px;
    font-size: 13px;
    cursor: pointer;
    min-width: 180px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239ca3af' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color .12s;
}
.tft-champs-select:focus { outline: none; border-color: rgba(152,16,250,.6); }

/* ---- Champions table ---- */
.tft-champs-table-wrap {
    background: var(--tft-bg-card);
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 10px;
    overflow: hidden;
}
.tft-champs-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.tft-champs-table th {
    background: #1f1a3d;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tft-text-secondary);
    text-align: left;
    border-bottom: 1px solid rgba(152,16,250,0.2);
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.tft-champs-table th:hover { color: #fff; }
.tft-champs-table th.sorted-asc::after  { content: ' ↑'; color: var(--tft-gold); }
.tft-champs-table th.sorted-desc::after { content: ' ↓'; color: var(--tft-gold); }

/* Column widths */
.tft-champs-th-name     { width: 220px; }
.tft-champs-th-tier     { width: 80px; text-align: center; }
.tft-champs-th-cost     { width: 70px; text-align: center; }
.tft-champs-th-traits   { }
.tft-champs-th-pickrate { width: 130px; text-align: right; }

.tft-champs-table td {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--tft-text-primary);
    border-bottom: 1px solid rgba(31,37,67,.8);
    vertical-align: middle;
}
.tft-champs-table tr:last-child td { border-bottom: none; }
.tft-champs-table tr:hover td { background: rgba(43,36,79,.4); }

/* Name cell: icon + text */
.tft-champ-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--tft-text-primary);
}
.tft-champ-name-cell:hover .tft-champ-row-name { color: var(--tft-gold); }
.tft-champ-row-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid #9ca3af;
    background: #1a1f38;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tft-champ-row-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0; left: 0;
}
/* Fallback letter when image fails */
.tft-champ-row-icon::after {
    content: attr(data-initial);
    font-size: 16px;
    font-weight: 700;
    color: var(--tft-text-muted);
    text-transform: uppercase;
    z-index: 0;
}
.tft-champ-row-icon.img-ok::after { display: none; }
.tft-champ-row-name {
    font-size: 14px;
    font-weight: 600;
    transition: color .12s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tier badge */
.tft-champ-tier-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    border: 1.5px solid;
    margin: auto;
}
.tft-champs-td-tier { text-align: center; }
.tft-tier-badge--S { color: #e07b39; border-color: rgba(224,123,57,.5); background: rgba(224,123,57,.12); }
.tft-tier-badge--A { color: #3b82f6; border-color: rgba(59,130,246,.5); background: rgba(59,130,246,.12); }
.tft-tier-badge--B { color: #22c55e; border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.12); }
.tft-tier-badge--C { color: #9ca3af; border-color: rgba(156,163,175,.3); background: rgba(156,163,175,.06); }
.tft-tier-badge--  { color: var(--tft-text-muted); border-color: transparent; background: transparent; font-size: 10px; }

/* Cost badge */
.tft-champ-cost-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    margin: auto;
}
.tft-champs-td-cost { text-align: center; }
.tft-cost-badge--1 { background: rgba(156,163,175,.15); color: #9ca3af; border: 1.5px solid rgba(156,163,175,.4); }
.tft-cost-badge--2 { background: rgba(34,197,94,.12);   color: #22c55e; border: 1.5px solid rgba(34,197,94,.4); }
.tft-cost-badge--3 { background: rgba(59,130,246,.12);  color: #3b82f6; border: 1.5px solid rgba(59,130,246,.4); }
.tft-cost-badge--4 { background: rgba(168,85,247,.12);  color: #a855f7; border: 1.5px solid rgba(168,85,247,.4); }
.tft-cost-badge--5 { background: rgba(245,158,11,.12);  color: #f59e0b; border: 1.5px solid rgba(245,158,11,.4); }

/* Traits cell */
.tft-champ-traits {
    font-size: 12px;
    color: var(--tft-text-secondary);
    line-height: 1.5;
}
.tft-champ-trait-tag {
    display: inline-block;
    background: rgba(31,37,67,.8);
    border: 1px solid var(--tft-border);
    border-radius: 4px;
    padding: 1px 7px;
    margin: 2px 3px 2px 0;
    font-size: 11px;
    color: var(--tft-text-secondary);
    white-space: nowrap;
}

/* Pick rate cell */
.tft-champs-td-pickrate { text-align: right; }
.tft-champ-pickrate {
    font-size: 13px;
    font-weight: 600;
    color: #51a2ff;
}
.tft-champ-pickrate--zero { color: var(--tft-text-muted); }

/* Empty state */
.tft-champs-table-empty td {
    text-align: center;
    color: var(--tft-text-muted);
    padding: 40px 0;
    font-size: 14px;
}

/* Cost-coloured icon borders */
.tft-cost-border--1 { border-color: #9ca3af; }
.tft-cost-border--2 { border-color: #22c55e; }
.tft-cost-border--3 { border-color: #3b82f6; }
.tft-cost-border--4 { border-color: #a855f7; }
.tft-cost-border--5 { border-color: #f59e0b; }

/* Responsive */
@media (max-width: 1024px) {
    .tft-champs-th-pickrate, .tft-champs-td-pickrate { display: none; }
}
@media (max-width: 640px) {
    .tft-champs-filter-label { width: 60px; font-size: 12px; }
    .tft-champs-filter-panel { padding: 12px; gap: 10px; }
    .tft-champs-th-traits, .tft-champs-table td:nth-child(4) { display: none; }
    .tft-champ-row-icon { width: 32px; height: 32px; }
    .tft-champs-table td, .tft-champs-table th { padding: 8px 10px; }
}




/* ============================================================
   BUILDER PAGE (slug: builder) — redesigned to match screenshot
   Layout: [left traits 210px] | [hex board flex] | [right augments 190px]
   Hex shape: pointed-top, clip-path polygon
   ============================================================ */

body.tft-page-builder {
    background: #110d2a;
}

/* ---- Wrapper ---- */
.tft-builder-wrap {
    width: 100%;
    padding: 20px 0 48px;
}
.tft-builder-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- Action bar (top right) ---- */
.tft-builder-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.tft-builder-btn-save {
    height: 40px;
    padding: 0 20px;
    background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
    transition: filter .15s;
}
.tft-builder-btn-save:hover { filter: brightness(1.1); }
.tft-builder-btn-icon {
    width: 40px;
    height: 40px;
    background: #2b244f;
    border: 1px solid rgba(152,16,250,0.4);
    border-radius: 6px;
    color: #d1d5dc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s;
}
.tft-builder-btn-icon:hover { background: #3d2863; color: #fff; }
.tft-builder-btn-icon--danger:hover { background: rgba(192,57,43,0.3); color: #ff6b6b; }

/* ---- 3-col layout ---- */
.tft-builder-layout {
    display: grid;
    grid-template-columns: 210px 1fr 190px;
    gap: 12px;
    align-items: start;
}

/* ============================================================
   LEFT SIDEBAR — Traits
   ============================================================ */
.tft-builder-traits-sidebar {
    background: #1a1433;
    border-radius: 10px;
    border: 1px solid rgba(152,16,250,0.2);
    /* overflow:hidden blocks child scrollbar — use clip instead */
    overflow: clip;
    max-height: 520px;
    display: flex;
    flex-direction: column;
}
.tft-builder-traits-list {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    min-height: 60px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(152,16,250,0.5) transparent;
}
.tft-builder-traits-list::-webkit-scrollbar { width: 4px; }
.tft-builder-traits-list::-webkit-scrollbar-track { background: transparent; }
.tft-builder-traits-list::-webkit-scrollbar-thumb { background: rgba(152,16,250,0.5); border-radius: 2px; }
.tft-builder-traits-placeholder {
    padding: 24px 16px;
    text-align: center;
    color: #6a7282;
    font-size: 12px;
}

/* Each trait row */
.tft-trait-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    transition: background .12s;
}
.tft-trait-row:hover { background: rgba(152,16,250,0.08); }

/* Hex-shaped trait icon */
.tft-trait-hex-wrap {
    position: relative;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}
.tft-trait-hex-outer {
    width: 38px;
    height: 38px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(152,16,250,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tft-trait-hex-inner {
    width: 32px;
    height: 32px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #2b244f;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tft-trait-hex-inner img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}
.tft-trait-count-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    color: #111;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1.5px solid #2b244f;
}

.tft-trait-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tft-trait-name {
    font-size: 13px;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.tft-trait-milestones {
    font-size: 11px;
    color: #6a7282;
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}
.tft-milestone { color: #6a7282; }
.tft-milestone--active { color: #fdc700; font-weight: 700; }
.tft-milestone-sep { color: #4a5565; }

/* ============================================================
   CENTER — Hex Board
   ============================================================ */
.tft-builder-board {
    position: relative;
    background: #1a1433;
    border-radius: 10px;
    border: 1px solid rgba(152,16,250,0.25);
    padding: 24px 16px 28px;
    overflow: hidden;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Brand overlay (top-left) */
.tft-builder-board-brand {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.tft-builder-board-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9810fa 0%, #5b4fcf 100%);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
}
.tft-builder-board-logo img { width: 100%; height: 100%; object-fit: cover; }
.tft-builder-board-brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.tft-builder-board-brand-name {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}
.tft-builder-board-brand-sub {
    font-size: 11px;
    color: #6a7282;
}

/* Watermark */
.tft-builder-watermark {
    position: absolute;
    top: 50%;
    font-size: 11px;
    color: rgba(255,255,255,0.06);
    letter-spacing: 1px;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}
.tft-builder-watermark--left {
    left: 8px;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center center;
}
.tft-builder-watermark--right {
    right: 8px;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center center;
}

/* ---- Hex grid ---- */
.tft-hex-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
}
.tft-hex-row {
    display: flex;
    gap: 4px;
    margin-top: -22px; /* honeycomb vertical overlap = hex-h * 0.25 */
}
.tft-hex-row:first-child { margin-top: 0; }
.tft-hex-row--stagger {
    margin-left: 40px; /* (hex-w/2 + gap/2) = 38 + 2 */
}

/* ---- Hex slot ---- */
.tft-hex-slot {
    position: relative;
    width: 76px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}
.tft-hex-stars {
    height: 14px;
    font-size: 10px;
    color: #fdc700;
    text-align: center;
    display: block;
    line-height: 14px;
    text-shadow: 0 0 6px rgba(253,199,0,0.8);
}
.tft-hex-name {
    height: 16px;
    font-size: 10px;
    color: #99a1af;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
    line-height: 16px;
}
.tft-hex-items {
    display: flex;
    justify-content: center;
    gap: 2px;
    min-height: 18px;
    margin-top: 1px;
}
.tft-hex-items img {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    object-fit: cover;
    border: 1px solid rgba(240,177,0,0.6);
    background: #131729;
    flex-shrink: 0;
}

/* Outer hex (acts as border) */
.tft-hex-outer {
    width: 76px;
    height: 88px; /* = 76 * 2/√3 ≈ 87.8 */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(130,0,219,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
/* Inner hex (content area) */
.tft-hex-inner {
    width: 70px;
    height: 81px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #221b4a;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.tft-hex-slot:hover .tft-hex-outer { background: rgba(168,85,247,0.75); }
.tft-hex-slot:hover .tft-hex-inner { background: #2e2468; }

.tft-hex-ph {
    color: #4a5565;
    font-size: 16px;
    line-height: 1;
}
.tft-hex-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Filled slot */
.tft-hex-slot.is-filled .tft-hex-ph { display: none; }
.tft-hex-slot.is-filled .tft-hex-outer {
    background: var(--slot-border-color, rgba(130,0,219,0.7));
}

/* Selected (armed) slot indicator */
.tft-hex-slot.is-targeted .tft-hex-outer {
    background: rgba(253,199,0,0.7);
    animation: tft-hex-pulse .6s ease-in-out infinite alternate;
}
@keyframes tft-hex-pulse {
    from { background: rgba(253,199,0,0.5); }
    to   { background: rgba(253,199,0,0.9); }
}

/* Cost-color bottom strip (injected by JS as --slot-border-color) */
.tft-hex-slot-cost-glow {
    position: absolute;
    bottom: 16px; /* offset for name below hex */
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 4px;
    border-radius: 2px;
    pointer-events: none;
}

/* Remove button (visible on hover of filled slot) */
.tft-hex-remove {
    position: absolute;
    top: 14px;
    right: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,0.75);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    font-size: 11px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    padding: 0;
    display: none;
    z-index: 2;
}
.tft-hex-slot:hover .tft-hex-remove { display: flex; align-items: center; justify-content: center; }

/* ============================================================
   RIGHT SIDEBAR — Augments
   ============================================================ */
.tft-builder-augments-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tft-aug-card {
    background: #1a1433;
    border: 1px solid rgba(152,16,250,0.2);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tft-aug-card-title {
    margin: 0;
    color: #d1d5dc;
    font-size: 13px;
    font-weight: 600;
}
.tft-aug-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tft-aug-group-label {
    margin: 0;
    font-size: 11px;
    color: #6a7282;
}
.tft-aug-slots {
    display: flex;
    gap: 8px;
}
.tft-aug-slot {
    width: 44px;
    height: 44px;
    background: #2b244f;
    border: 1.5px solid rgba(130,0,219,0.45);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.tft-aug-slot:hover { background: #3d2863; border-color: #9810fa; }
.tft-aug-slot-ph { color: #4a5565; font-size: 18px; line-height: 1; }
.tft-aug-slot.is-filled .tft-aug-slot-ph { display: none; }
.tft-aug-slot img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; }

.tft-carry-slot {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
}
.tft-carry-empty {
    margin: 0;
    color: #4a5565;
    font-size: 11px;
    text-align: center;
}

/* Carry champion rows (rendered from preloadComp) */
.tft-carry-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tft-carry-row:last-child { border-bottom: none; }

.tft-carry-champ {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 2px solid var(--carry-border, #9ca3af);
    overflow: visible;
}
.tft-carry-champ img {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
    display: block;
}
.tft-carry-stars {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #fdc700;
    white-space: nowrap;
    line-height: 1;
}
.tft-carry-info {
    flex: 1;
    min-width: 0;
}
.tft-carry-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--tft-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.tft-carry-items {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.tft-carry-item {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.15);
}

/* ============================================================
   AUGMENT PICKER MODAL
   ============================================================ */
.tft-aug-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}
.tft-aug-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}
.tft-aug-modal {
    background: #1a1433;
    border: 1px solid rgba(152,16,250,0.35);
    border-radius: 12px;
    width: 100%;
    max-width: 700px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(12px);
    transition: transform .18s ease;
}
.tft-aug-modal-overlay.is-open .tft-aug-modal {
    transform: translateY(0);
}
.tft-aug-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid rgba(152,16,250,0.2);
    flex-shrink: 0;
}
.tft-aug-modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #e2e8f0;
}
.tft-aug-modal-close {
    background: none;
    border: none;
    color: #6a7282;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    transition: background .12s, color .12s;
    padding: 0;
}
.tft-aug-modal-close:hover { background: rgba(255,255,255,0.08); color: #e2e8f0; }
.tft-aug-modal-search-wrap {
    position: relative;
    margin: 12px 16px 10px;
    flex-shrink: 0;
}
.tft-aug-modal-search {
    width: 100%;
    box-sizing: border-box;
    background: #2b244f;
    border: 1px solid rgba(152,16,250,0.4);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 14px;
    padding: 9px 36px 9px 12px;
    outline: none;
    transition: border-color .15s;
}
.tft-aug-modal-search:focus { border-color: rgba(152,16,250,0.8); }
.tft-aug-modal-search::placeholder { color: #4a5565; }
.tft-aug-modal-search-icon {
    position: absolute;
    right: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #4a5565;
    pointer-events: none;
}
.tft-aug-modal-section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px 10px;
    flex-shrink: 0;
}
.tft-aug-modal-section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #d1d5dc;
}
.tft-aug-modal-tier-select {
    background: #2b244f;
    border: 1px solid rgba(152,16,250,0.4);
    border-radius: 7px;
    color: #e2e8f0;
    font-size: 13px;
    padding: 5px 10px;
    cursor: pointer;
    outline: none;
}
.tft-aug-modal-tier-select:focus { border-color: rgba(152,16,250,0.8); }
.tft-aug-modal-grid {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(152,16,250,0.4) transparent;
    padding: 4px 12px 16px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    align-content: start;
}
.tft-aug-modal-grid::-webkit-scrollbar { width: 4px; }
.tft-aug-modal-grid::-webkit-scrollbar-thumb { background: rgba(152,16,250,0.4); border-radius: 2px; }
.tft-aug-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background: #2b244f;
    border: 1px solid rgba(130,0,219,0.3);
    border-radius: 8px;
    padding: 8px 4px 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .1s;
    text-align: center;
}
.tft-aug-chip:hover {
    background: #3d2863;
    border-color: rgba(152,16,250,0.7);
    transform: translateY(-1px);
}
.tft-aug-chip img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.tft-aug-chip-img-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}
.tft-aug-tier-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    padding: 1px 3px;
    border-radius: 3px;
    color: #fff;
    pointer-events: none;
}
.tft-aug-tier-badge--1 { background: #6b7280; }      /* Bạc — Silver */
.tft-aug-tier-badge--2 { background: #b45309; }      /* Vàng — Gold */
.tft-aug-tier-badge--3 { background: #7c3aed; }      /* Kim Cương — Prismatic */
.tft-aug-chip-noimg {
    width: 52px;
    height: 52px;
    border-radius: 6px;
    background: #2b244f;
    border: 1px dashed rgba(152,16,250,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tft-aug-chip-name {
    font-size: 10px;
    color: #9ca3af;
    line-height: 1.25;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tft-aug-chip[data-aug-tier="1"] { border-top: 2px solid #6b7280; }    /* Bạc */
.tft-aug-chip[data-aug-tier="2"] { border-top: 2px solid #f59e0b; }    /* Vàng */
.tft-aug-chip[data-aug-tier="3"] { border-top: 2px solid #a855f7; }    /* Kim Cương */
.tft-aug-chip.is-hidden { display: none; }

@media (max-width: 640px) {
    .tft-aug-modal-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ============================================================
   SAVE TEAM MODAL + SHARE TEAM MODAL
   ============================================================ */

/* -- Shared overlay -- */
.tft-save-modal-overlay,
.tft-share-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.72);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
.tft-save-modal-overlay.is-open,
.tft-share-modal-overlay.is-open {
    opacity: 1;
    pointer-events: all;
}

/* -- Save modal card -- */
.tft-save-modal {
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.4);
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    transform: translateY(16px);
    transition: transform 0.18s ease;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.tft-save-modal-overlay.is-open .tft-save-modal {
    transform: translateY(0);
}

/* -- Share modal card (slightly smaller) -- */
.tft-share-modal {
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.4);
    border-radius: 12px;
    width: 100%;
    max-width: 420px;
    transform: translateY(16px);
    transition: transform 0.18s ease;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
.tft-share-modal-overlay.is-open .tft-share-modal {
    transform: translateY(0);
}

/* -- Header -- */
.tft-save-modal-header,
.tft-share-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(152,16,250,0.25);
}
.tft-save-modal-title,
.tft-share-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--tft-text-primary);
}
.tft-save-modal-close,
.tft-share-modal-close {
    background: none;
    border: none;
    color: var(--tft-text-secondary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.15s;
}
.tft-save-modal-close:hover,
.tft-share-modal-close:hover { color: var(--tft-text-primary); }

/* -- Body -- */
.tft-save-modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tft-share-modal-body {
    padding: 20px;
}

/* -- Form fields -- */
.tft-save-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tft-save-input {
    color: #000;
}

.tft-save-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tft-text-secondary);
}
.tft-save-input,
.tft-save-select {
    background: #2b244f;
    border: 1px solid rgba(152,16,250,0.4);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    padding: 10px 14px;
    outline: none;
    width: 100%;
    transition: border-color 0.15s;
    appearance: auto;
}
.tft-save-input::placeholder { color: rgba(255,255,255,0.4); }
.tft-save-input:focus,
.tft-save-select:focus { border-color: rgba(152,16,250,0.8); }
.tft-save-select { cursor: pointer; color: #fff; }

/* -- Error message -- */
.tft-save-error {
    font-size: 13px;
    color: #f87171;
    background: rgba(248,113,113,0.1);
    border-radius: 6px;
    padding: 8px 12px;
}

/* -- Footer / submit -- */
.tft-save-modal-footer {
    padding: 0 20px 20px;
    display: flex;
    justify-content: flex-end;
}
.tft-save-submit-btn {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: opacity 0.15s;
}
.tft-save-submit-btn:hover { opacity: 0.88; }
.tft-save-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* -- Share URL row -- */
.tft-share-url-wrap {
    display: flex;
    gap: 10px;
    align-items: center;
}
.tft-share-url-input {
    flex: 1;
    background: #2b244f;
    border: 1px solid rgba(152,16,250,0.4);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    padding: 10px 14px;
    outline: none;
    min-width: 0;
    cursor: text;
}
.tft-share-copy-btn {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.tft-share-copy-btn:hover { opacity: 0.88; }
.tft-share-copy-btn.is-copied {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

/* ============================================================
   TABS
   ============================================================ */
.tft-builder-tabs {
    display: flex;
    border-bottom: 1px solid rgba(152,16,250,0.3);
    margin-top: 4px;
}
.tft-builder-tab {
    background: transparent;
    color: #99a1af;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
    margin-bottom: -1px;
}
.tft-builder-tab:hover { color: #fff; }
.tft-builder-tab--active {
    background: #2b244f;
    color: #fff;
    border-bottom-color: #ad46ff;
    border-radius: 6px 6px 0 0;
}

/* ============================================================
   CHAMPION POOL
   ============================================================ */
.tft-builder-pool {
    background: #1a1433;
    border: 1px solid rgba(152,16,250,0.2);
    border-radius: 10px;
    padding: 12px 16px 20px;
}
/* .tft-builder-pool-header — superseded by .tft-pool-hdr in items tab */
.tft-builder-pool-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.tft-cost-btn {
    height: 28px;
    padding: 0 12px;
    background: #2b244f;
    border: 1px solid rgba(152,16,250,0.35);
    border-radius: 4px;
    color: #99a1af;
    font-size: 12px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.tft-cost-btn:hover {
    background: #3d2863;
    color: #fff;
    border-color: #9810fa;
}
.tft-coin {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
    margin-left: 1px;
    opacity: 0.85;
}
/* "Tất cả" active */
.tft-cost-btn[data-cost=""].tft-cost-btn--active {
    background: #3d2863;
    color: #fff;
    border-color: #9810fa;
}
/* Cost 1-5: use --cost-color for border + text by default, brighter when active */
.tft-cost-btn[data-cost]:not([data-cost=""]) {
    border-color: var(--cost-color);
    color: var(--cost-color);
}
.tft-cost-btn[data-cost]:not([data-cost=""]):hover,
.tft-cost-btn[data-cost]:not([data-cost=""]).tft-cost-btn--active {
    background: color-mix(in srgb, var(--cost-color) 18%, #2b244f);
    color: #fff;
    border-color: var(--cost-color);
    box-shadow: 0 0 6px color-mix(in srgb, var(--cost-color) 50%, transparent);
}

.tft-builder-pool-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.tft-builder-pool-search {
    height: 32px;
    width: 200px;
    background: #2b244f;
    border: 1px solid rgba(152,16,250,0.4);
    border-radius: 4px;
    padding: 0 30px 0 12px;
    color: #fff;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
}
.tft-builder-pool-search::placeholder { color: #6a7282; }
.tft-builder-pool-search:focus { border-color: #9810fa; }
.tft-pool-search-icon {
    position: absolute;
    right: 10px;
    color: #6a7282;
    pointer-events: none;
}

.tft-builder-pool-pane { display: none; }
.tft-builder-pool-pane--active { display: block; }
.tft-builder-pool-empty {
    margin: 0; color: #6a7282; text-align: center; padding: 24px 0; font-size: 13px;
}

/* ---- Hex champion chips ---- */
.tft-builder-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px 8px;
}
.tft-builder-chip {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    color: inherit;
    transition: transform .12s;
}
.tft-builder-chip:hover { transform: translateY(-2px); }
.tft-builder-chip.is-selected .tft-chip-hex-outer { background: rgba(253,199,0,0.8) !important; }
.tft-builder-chip.is-hidden { display: none; }

.tft-chip-hex-outer {
    width: 54px;
    height: 62px; /* 54 * 1.1547 */
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--cc, rgba(130,0,219,0.5));
    display: flex;
    align-items: center;
    justify-content: center;
}
.tft-chip-hex-inner {
    width: 48px;
    height: 55px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: linear-gradient(135deg, #155dfc 0%, #9810fa 50%, #e60076 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tft-chip-hex-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tft-builder-chip-name {
    font-size: 10px;
    color: #99a1af;
    text-align: center;
    width: 58px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
    .tft-builder-layout { grid-template-columns: 180px 1fr 160px; }
    .tft-builder-chip-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
}
@media (max-width: 800px) {
    .tft-builder-layout { grid-template-columns: 1fr; }
    .tft-builder-traits-sidebar, .tft-builder-augments-sidebar { display: none; }
    .tft-hex-slot { width: 56px; }
    .tft-hex-outer { width: 56px; height: 65px; }
    .tft-hex-inner { width: 50px; height: 58px; }
    .tft-hex-row--stagger { margin-left: 30px; }
    .tft-hex-row { margin-top: -16px; }
}
@media (max-width: 480px) {
    .tft-builder-container { padding: 0 8px; }
    .tft-hex-slot { width: 44px; }
    .tft-hex-outer { width: 44px; height: 51px; }
    .tft-hex-inner { width: 38px; height: 44px; }
    .tft-hex-row--stagger { margin-left: 24px; }
    .tft-hex-row { margin-top: -13px; }
}

/* ============================================================
   BUILDER — ITEMS TAB (redesigned to match screenshot)
   Layout: [flex spacer] | [component filter icons] [search]
   Items grid: square 64px cards with names
   ============================================================ */

/* Pool header base — shared by both tabs */
.tft-pool-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0 12px;
    border-bottom: 1px solid rgba(152,16,250,0.15);
    margin-bottom: 12px;
}

/* Items header: flex with spacer so everything aligns RIGHT */
.tft-pool-hdr--item {
    justify-content: flex-end;
}
.tft-item-hdr-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ---- Component filter icon buttons ---- */
.tft-item-type-filters {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.tft-item-filter-btn {
    width: 38px;
    height: 38px;
    padding: 3px;
    background: #1a1433;
    border: 1.5px solid #8b1a1a; /* red border like screenshot */
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color .15s, background .15s, box-shadow .15s;
    flex-shrink: 0;
}
.tft-item-filter-btn:hover {
    border-color: #e05252;
    background: #2b1a1a;
    box-shadow: 0 0 8px rgba(220,50,50,0.4);
}
.tft-item-filter-btn--active {
    border-color: #ff6b6b;
    background: #2b1a1a;
    box-shadow: 0 0 10px rgba(255,100,100,0.5);
}
.tft-item-filter-btn img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    display: block;
    border-radius: 3px;
}

/* ---- Item grid ---- */
.tft-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 10px 8px;
    padding: 4px 0;
}

/* ---- Item chip ---- */
.tft-item-chip {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: inherit;
    transition: transform .12s;
}
.tft-item-chip:hover { transform: translateY(-2px); }
.tft-item-chip.is-hidden { display: none; }

.tft-item-icon {
    width: 46px;
    height: 46px;
    background: #2b244f;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, box-shadow .15s;
}
.tft-item-chip:hover .tft-item-icon {
    border-color: rgba(173,70,255,0.8);
    box-shadow: 0 0 10px rgba(173,70,255,0.3);
}
.tft-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Type-specific border tints */
.tft-item-chip[data-item-type="radiant"] .tft-item-icon  { border-color: rgba(253,199,0,0.55); }
.tft-item-chip[data-item-type="radiant"]:hover .tft-item-icon  { border-color: #fdc700; box-shadow: 0 0 10px rgba(253,199,0,0.4); }
.tft-item-chip[data-item-type="ornn"] .tft-item-icon     { border-color: rgba(59,130,246,0.55); }
.tft-item-chip[data-item-type="ornn"]:hover .tft-item-icon     { border-color: #3b82f6; box-shadow: 0 0 10px rgba(59,130,246,0.4); }
.tft-item-chip[data-item-type="support"] .tft-item-icon  { border-color: rgba(34,197,94,0.55); }
.tft-item-chip[data-item-type="support"]:hover .tft-item-icon  { border-color: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,0.4); }

.tft-item-name {
    font-size: 9px;
    color: #99a1af;
    text-align: center;
    width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    display: block;
}

/* Remove old .tft-pool-hdr--champ extra padding (uses base .tft-pool-hdr) */
.tft-pool-hdr--champ .tft-builder-pool-filters { flex: 1; }

/* Pool search in item header context */
.tft-pool-hdr--item .tft-builder-pool-search { width: 180px; }

@media (max-width: 640px) {
    .tft-item-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px 6px; }
    .tft-item-icon { width: 40px; height: 40px; }
    .tft-item-name { width: 48px; }
    .tft-item-filter-btn { width: 32px; height: 32px; }
    .tft-item-filter-btn img { width: 24px; height: 24px; }
}

/* ============================================================
   BUILDER — DRAG & DROP STATES
   ============================================================ */

/* Chips: show grab cursor + fade while dragging */
.tft-builder-chip[draggable="true"] { cursor: grab; }
.tft-builder-chip.is-dragging       { opacity: 0.35; cursor: grabbing; }

/* Filled hex slots are draggable (move cursor) */
.tft-hex-slot[draggable="true"] { cursor: grab; }
.tft-hex-slot.is-dragging       { opacity: 0.4; cursor: grabbing; }

/* Drag-over highlight on hex slot — strong gold pulse */
.tft-hex-slot.is-drag-over .tft-hex-outer {
    background: rgba(253,199,0,0.85) !important;
    filter: drop-shadow(0 0 14px rgba(253,199,0,1));
    animation: tft-drop-pulse .35s ease-in-out infinite alternate;
}
@keyframes tft-drop-pulse {
    from { filter: drop-shadow(0 0 8px rgba(253,199,0,0.7)); }
    to   { filter: drop-shadow(0 0 20px rgba(253,199,0,1)); }
}
.tft-hex-slot.is-drag-over .tft-hex-inner {
    background: rgba(91, 60, 0, 0.7);
}

/* ============================================================
   CHAMPION DETAIL PAGE (tft-champ-detail-page)
   Split layout: sticky sidebar + scrollable main
   ============================================================ */

body.tft-champ-detail-page { background: var(--tft-bg-base); }

.tft-champ-detail-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 16px;
}

/* ── Sidebar ─────────────────── */
.tft-champ-sidebar {
    flex-shrink: 0;
    width: 240px;
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 12px;
    padding: 10px 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--tft-border) transparent;
}
.tft-sidebar-topbar { display: flex; gap: 6px; margin-bottom: 8px; }
.tft-sidebar-cost-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--tft-border);
    border-radius: 8px;
    padding: 5px 8px;
    flex: 0 0 auto;
    cursor: pointer;
}
.tft-sidebar-star-ico, .tft-sidebar-chevron-ico { color: var(--tft-text-secondary); flex-shrink: 0; pointer-events: none; }
.tft-sidebar-cost-sel {
    background: transparent; border: none; color: var(--tft-text-primary); font-size: 12px; font-weight: 600;
    cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; padding: 0; min-width: 42px;
}
.tft-sidebar-cost-sel option { background: var(--tft-bg-card); color: var(--tft-text-primary); }
.tft-sidebar-search-box {
    flex: 1; display: flex; align-items: center; gap: 5px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--tft-border); border-radius: 8px; padding: 5px 8px;
}
.tft-sidebar-search-box:focus-within { border-color: var(--tft-purple); }
.tft-sidebar-search-inp { flex: 1; background: transparent; border: none; color: var(--tft-text-primary); font-size: 12px; outline: none; min-width: 0; }
.tft-sidebar-search-inp::placeholder { color: var(--tft-text-muted); }
.tft-sidebar-search-ico { color: var(--tft-text-muted); flex-shrink: 0; }

.tft-champ-sidebar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }

.tft-sidebar-champ-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; border-radius: 8px; padding: 4px 2px; transition: background 0.12s;
}
.tft-sidebar-champ-item:hover { background: rgba(255,255,255,0.08); }
.tft-sidebar-champ-item--active { background: rgba(91,79,207,0.3); }
.tft-sidebar-champ-img-wrap {
    width: 44px; height: 44px; border-radius: 8px; border: 2px solid #9ca3af;
    overflow: hidden; background: var(--tft-bg-card-hover); flex-shrink: 0;
}
.tft-sidebar-champ-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tft-sidebar-champ-name {
    font-size: 10px; color: var(--tft-text-secondary); text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; max-width: 50px;
}

/* ── Main content ─────────────── */
.tft-champ-detail-main {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px;
}

/* ── Two-column layout ─────────── */
.tft-champ-content-cols {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.tft-champ-right-col {
    flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px;
}

/* ── Portrait card ─────────────── */
.tft-champ-portrait-card {
    flex-shrink: 0;
    width: 280px;
    background: var(--tft-bg-card);
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 14px;
    overflow: hidden;
    position: sticky;
    top: 80px;
}

.tft-champ-portrait-splash {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--tft-bg-card-hover);
}
.tft-champ-portrait-img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
}
.tft-champ-portrait-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(10,14,26,0.85) 100%);
}
.tft-champ-portrait-tier {
    position: absolute; top: 10px; right: 10px;
    font-size: 11px; font-weight: 700;
    width: 26px; height: 26px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid currentColor;
    z-index: 2;
}
.tft-champ-portrait-badge {
    position: absolute; bottom: -22px; left: 14px;
    width: 52px; height: 52px; border-radius: 50%;
    border: 3px solid #9ca3af;
    overflow: hidden;
    background: var(--tft-bg-card);
    z-index: 3;
}
.tft-champ-portrait-badge img { width: 100%; height: 100%; object-fit: cover; display: block; }

.tft-champ-portrait-info { padding: 30px 14px 12px; }
.tft-champ-portrait-name-row {
    display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px;
}
.tft-champ-portrait-name { font-size: 18px; font-weight: 700; color: var(--tft-text-primary); }
.tft-champ-portrait-cost {
    font-size: 12px; font-weight: 700; border: 1.5px solid; border-radius: 5px; padding: 2px 8px; flex-shrink: 0;
}
.tft-champ-portrait-traits { display: flex; flex-wrap: wrap; gap: 5px; }
.tft-champ-portrait-trait {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--tft-text-secondary);
    text-decoration: none; padding: 3px 8px;
    background: rgba(255,255,255,0.05); border-radius: 12px;
    transition: background 0.12s;
}
.tft-champ-portrait-trait:hover { background: rgba(152,16,250,0.2); color: var(--tft-text-primary); }
.tft-champ-portrait-trait-ico { width: 16px; height: 16px; object-fit: contain; }
.tft-champ-portrait-trait-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Stats table */
.tft-champ-portrait-stats { border-top: 1px solid var(--tft-border); }
.tft-champ-portrait-stats-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; border-bottom: 1px solid var(--tft-border);
    font-size: 12px; font-weight: 600; color: var(--tft-text-secondary);
}
.tft-champ-stat-rows { display: flex; flex-direction: column; }
.tft-champ-stat-row {
    display: flex; align-items: center; gap: 8px; padding: 7px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.tft-champ-stat-row:last-child { border-bottom: none; }
.tft-champ-stat-row-icon {
    width: 20px; height: 20px; border-radius: 4px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-style: normal; font-size: 11px; line-height: 1;
}
.tft-stat-icon--gold  { background: rgba(200,155,60,0.2);   color: var(--tft-gold); }
.tft-stat-icon--mana  { background: rgba(96,165,250,0.15);  color: #60a5fa; }
.tft-stat-icon--hp    { background: rgba(74,222,128,0.15);  color: #4ade80; }
.tft-stat-icon--as    { background: rgba(251,146,60,0.15);  color: #fb923c; }
.tft-stat-icon--range { background: rgba(167,139,250,0.15); color: #a78bfa; }
.tft-stat-icon--armor { background: rgba(203,213,225,0.12); color: #cbd5e1; }
.tft-stat-icon--mr    { background: rgba(96,165,250,0.12);  color: #93c5fd; }
.tft-stat-icon--crit  { background: rgba(251,191,36,0.15);  color: #fbbf24; }
.tft-stat-icon--gold::before  { content: '⚜'; }
.tft-stat-icon--mana::before  { content: '💧'; }
.tft-stat-icon--hp::before    { content: '♥'; }
.tft-stat-icon--as::before    { content: '⚡'; }
.tft-stat-icon--range::before { content: '◎'; }
.tft-stat-icon--armor::before { content: '🛡'; }
.tft-stat-icon--mr::before    { content: '✦'; }
.tft-stat-icon--crit::before  { content: '⚔'; }
.tft-champ-stat-row-label { flex: 1; font-size: 12px; color: var(--tft-text-secondary); }
.tft-champ-stat-row-val { font-size: 13px; font-weight: 600; color: var(--tft-text-primary); text-align: right; }

/* Range dots */
.tft-champ-range-dots { display: inline-flex; gap: 3px; }
.tft-champ-range-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.1); }
.tft-champ-range-dot--on { background: #a78bfa; border-color: #a78bfa; }

/* Portrait meta stats (inside portrait card) */
.tft-champ-portrait-meta {
    display: flex; border-top: 1px solid var(--tft-border);
}
.tft-champ-portrait-meta .tft-champ-meta-stat {
    flex: 1; border-radius: 0; border: none;
    border-right: 1px solid var(--tft-border);
    padding: 8px 6px; min-width: 0;
    background: transparent;
}
.tft-champ-portrait-meta .tft-champ-meta-stat:last-child { border-right: none; }
.tft-champ-portrait-meta .tft-champ-meta-stat-val { font-size: 14px; }
.tft-champ-portrait-meta .tft-champ-meta-stat-label { font-size: 10px; }

/* Top items (inside portrait card) */
.tft-champ-top-items { padding: 12px 14px; border-top: 1px solid var(--tft-border); }
.tft-champ-top-items .tft-champ-section-title { font-size: 11px; margin-bottom: 10px; padding-bottom: 6px; }
.tft-champ-top-items-icons { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.tft-champ-top-item-wrap {
    width: 40px; height: 40px; border-radius: 8px; overflow: hidden;
    border: 1.5px solid rgba(240,177,0,0.45); background: var(--tft-bg-card-hover); flex-shrink: 0;
    cursor: default;
}
.tft-champ-top-item-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tft-champ-top-items-desc { font-size: 11px; color: var(--tft-text-muted); line-height: 1.5; margin: 0; }

/* ── Items Build Table (right-col section) ──── */
.tft-champ-items-section {
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 12px;
    padding: 20px;
}

/* Top items row inside Lên Đồ section */
.tft-lendo-top-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 4px;
}
.tft-lendo-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 64px;
    cursor: default;
}
.tft-lendo-item-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid rgba(240,177,0,0.5);
    background: var(--tft-bg-card-hover);
    flex-shrink: 0;
}
.tft-lendo-item-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tft-lendo-item-name {
    font-size: 10px;
    color: var(--tft-text-secondary);
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.tft-lendo-item-rate {
    font-size: 10px;
    color: #4ade80;
    text-align: center;
}

.tft-item-combos-table {
    width: 100%;
    border-collapse: collapse;
}

.tft-item-combo-th {
    font-size: 11px;
    font-weight: 600;
    color: var(--tft-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0 10px 10px;
    border-bottom: 1px solid var(--tft-border);
    text-align: center;
}
.tft-item-combo-th--items { text-align: left; padding-left: 0; }

.tft-item-combo-row { border-bottom: 1px solid rgba(255,255,255,0.04); }
.tft-item-combo-row:last-child { border-bottom: none; }
.tft-item-combo-row:hover { background: rgba(255,255,255,0.03); }

.tft-item-combo-td {
    padding: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--tft-text-primary);
    text-align: center;
    vertical-align: middle;
}
.tft-item-combo-td--items { padding-left: 0; text-align: left; }
.tft-item-combo-td--placement { color: #60a5fa; }
.tft-item-combo-td--rate { color: var(--tft-text-secondary); font-weight: 400; }

.tft-item-combo-icons { display: flex; gap: 6px; align-items: center; }
.tft-item-combo-icon-wrap {
    width: 36px; height: 36px; border-radius: 8px; overflow: hidden;
    border: 1.5px solid rgba(240,177,0,0.4); background: var(--tft-bg-card-hover); flex-shrink: 0;
}
.tft-item-combo-icon-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Tổng Quan guide section ─────────────────── */
.tft-champ-overview-section {
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 12px;
    padding: 20px;
}

.tft-champ-overview-body {
    font-size: 14px;
    line-height: 1.75;
    color: var(--tft-text-secondary);
}

.tft-champ-overview-body h2,
.tft-champ-overview-body h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--tft-text-primary);
    margin: 16px 0 8px;
    padding-left: 10px;
    border-left: 3px solid var(--tft-purple);
}

.tft-champ-overview-body h2:first-child,
.tft-champ-overview-body h3:first-child { margin-top: 0; }

.tft-champ-overview-body p { margin: 0 0 10px; }
.tft-champ-overview-body p:last-child { margin-bottom: 0; }

.tft-champ-overview-body ul,
.tft-champ-overview-body ol {
    margin: 6px 0 10px 18px;
    padding: 0;
}

.tft-champ-overview-body li { margin-bottom: 4px; }

.tft-champ-overview-body strong,
.tft-champ-overview-body b {
    color: var(--tft-text-primary);
    font-weight: 600;
}

.tft-champ-overview-body img {
    max-width: 100%;
    border-radius: 8px;
    margin: 8px 0;
    display: block;
}

.tft-champ-overview-body a {
    color: #a78bfa;
    text-decoration: none;
}
.tft-champ-overview-body a:hover { text-decoration: underline; }

/* ── Hero section (legacy, kept for fallback) ─── */
.tft-champ-hero-section {
    background: var(--tft-bg-card);
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 14px;
    overflow: hidden;
}

.tft-champ-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--tft-border);
    font-size: 13px;
}
.tft-champ-breadcrumb a { color: var(--tft-text-secondary); text-decoration: none; }
.tft-champ-breadcrumb a:hover { color: var(--tft-text-primary); }
.tft-champ-breadcrumb span:last-child { color: var(--tft-text-primary); font-weight: 600; }
.tft-breadcrumb-sep { color: var(--tft-text-muted); }

.tft-champ-hero-heading {
    padding: 16px 20px 0;
}
.tft-champ-hero-h1 {
    font-size: 22px;
    font-weight: 700;
    color: var(--tft-text-primary);
    margin: 0 0 8px;
    line-height: 1.3;
}
.tft-champ-hero-date {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--tft-text-muted);
    margin: 0 0 8px;
}
.tft-champ-hero-date svg { flex-shrink: 0; }
.tft-champ-hero-desc {
    font-size: 13px;
    color: var(--tft-text-secondary);
    margin: 0 0 16px;
    line-height: 1.6;
}

.tft-champ-hero-body {
    display: flex;
    gap: 24px;
    padding: 20px;
    align-items: flex-start;
}

.tft-champ-hero-splash {
    flex-shrink: 0;
    width: 180px;
    height: 200px;
    border-radius: 12px;
    border: 3px solid;
    overflow: hidden;
    background: var(--tft-bg-card-hover);
    position: relative;
}
.tft-champ-hero-img {
    width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
}
.tft-champ-hero-cost-glow {
    position: absolute; bottom: 0; left: 0; right: 0; height: 6px; opacity: 0.8;
}
.tft-champ-hero-tier-badge {
    position: absolute; top: 8px; right: 8px;
    font-size: 11px; font-weight: 700;
    width: 26px; height: 26px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid currentColor;
    z-index: 1;
}

.tft-champ-hero-info { flex: 1; min-width: 0; }

.tft-champ-hero-name-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.tft-champ-hero-name {
    font-size: 28px; font-weight: 900; color: var(--tft-text-primary); margin: 0; line-height: 1.1;
}
.tft-champ-hero-cost {
    font-size: 14px; font-weight: 700; border: 2px solid; border-radius: 6px;
    padding: 3px 10px; flex-shrink: 0;
}

.tft-champ-hero-traits {
    display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.tft-champ-hero-trait-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(152,16,250,0.12); border: 1px solid rgba(152,16,250,0.35);
    border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600;
    color: var(--tft-text-primary); text-decoration: none;
    transition: background 0.15s;
}
.tft-champ-hero-trait-badge:hover { background: rgba(152,16,250,0.25); }
.tft-champ-hero-trait-icon { width: 16px; height: 16px; object-fit: contain; }

/* Meta stats row */
.tft-champ-meta-stats {
    display: flex; gap: 2px; flex-wrap: wrap;
}
.tft-champ-meta-stat {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(255,255,255,0.04); border: 1px solid var(--tft-border);
    border-radius: 10px; padding: 10px 16px; min-width: 90px;
    flex: 1;
}
.tft-champ-meta-stat-val {
    font-size: 20px; font-weight: 700; color: var(--tft-text-primary); line-height: 1.1;
}
.tft-champ-meta-stat-label {
    font-size: 11px; color: var(--tft-text-muted); margin-top: 3px; white-space: nowrap;
}

/* SEO title */
.tft-champ-seo-title {
    font-size: 13px; font-weight: 600; color: var(--tft-text-muted);
    margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--tft-border);
}

/* ── Shared section card ─────── */
.tft-champ-section-title {
    font-size: 13px; font-weight: 700; color: var(--tft-text-secondary);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--tft-border);
}

.tft-champ-stats-section,
.tft-champ-ability-section,
.tft-champ-traits-section,
.tft-champ-comps-section {
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 12px;
    padding: 20px;
}

/* ── Stats section ─────────────── */
.tft-champ-stat-header {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.tft-star-selector { display: flex; gap: 4px; }
.tft-star-btn {
    background: rgba(255,255,255,0.06); border: 1px solid var(--tft-border);
    color: var(--tft-text-secondary); border-radius: 6px; padding: 3px 10px;
    font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tft-star-btn--active { background: rgba(200,155,60,0.2); border-color: var(--tft-gold); color: var(--tft-gold); }

.tft-champ-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.tft-champ-stat-item {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 5px;
}
.tft-champ-stat-label { font-size: 12px; color: var(--tft-text-secondary); }
.tft-champ-stat-val { font-size: 13px; font-weight: 600; color: var(--tft-gold); min-width: 50px; text-align: right; }

/* ── Ability card ─────────────── */
.tft-champ-ability-card {
    display: flex; gap: 14px; background: rgba(255,255,255,0.03);
    border: 1px solid var(--tft-border); border-radius: 10px; padding: 14px;
}
.tft-champ-ability-icon-wrap {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 10px;
    overflow: hidden; border: 2px solid var(--tft-purple); background: var(--tft-bg-card-hover);
}
.tft-champ-ability-icon { width: 100%; height: 100%; object-fit: cover; display: block; }
.tft-champ-ability-body { flex: 1; min-width: 0; }
.tft-champ-ability-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tft-champ-ability-name { font-size: 15px; font-weight: 700; color: var(--tft-text-primary); }
.tft-champ-ability-mana {
    font-size: 12px; color: #60a5fa; background: rgba(96,165,250,0.1);
    border: 1px solid rgba(96,165,250,0.3); border-radius: 10px; padding: 2px 8px;
}
.tft-champ-ability-desc { font-size: 13px; line-height: 1.6; color: var(--tft-text-secondary); }
.tft-champ-ability-desc .tft-ab-val   { color: #fde68a; font-weight: 600; }
.tft-champ-ability-desc .tft-ab-bonus { color: #4ade80; }
.tft-champ-ability-desc .tft-ab-ap    { color: #a78bfa; font-size: 10px; background: rgba(167,139,250,0.15); border-radius: 3px; padding: 0 3px; }
.tft-champ-ability-desc .tft-ab-ad    { color: #fb923c; font-size: 10px; background: rgba(251,146,60,0.15);  border-radius: 3px; padding: 0 3px; }
.tft-champ-ability-desc .tft-ab-heal  { color: #4ade80; font-size: 10px; background: rgba(74,222,128,0.15); border-radius: 3px; padding: 0 3px; }
.tft-champ-ability-desc .tft-ab-true  { color: #e2e8f0; }
.tft-champ-ability-desc .tft-ab-mana  { color: #60a5fa; }
.tft-champ-ability-desc .tft-ab-tag   { font-size: 10px; font-weight: 700; border-radius: 3px; padding: 1px 4px; margin-right: 2px; }
.tft-champ-ability-desc .tft-ab-tag--passive { background: rgba(200,155,60,0.2); color: var(--tft-gold); }
.tft-champ-ability-desc .tft-ab-tag--active  { background: rgba(91,79,207,0.2);  color: #a78bfa; }

.tft-ab-kw {
    display: inline-block; font-size: 11px; font-weight: 700; color: #c084fc;
    background: rgba(168,85,247,0.15); border-radius: 3px; padding: 1px 5px;
}
.tft-ab-rules { display: block; font-size: 11px; color: var(--tft-text-muted); font-style: italic; margin-top: 4px; }

.tft-champ-trait-desc {
    font-size: 13px; color: var(--tft-text-secondary); line-height: 1.6; margin: 8px 0 4px;
}
.tft-champ-trait-desc .tft-ab-val { color: #fde68a; font-weight: 700; }
.tft-champ-trait-desc .tft-ab-scale {
    display: inline-block; font-size: 11px; font-weight: 600;
    background: rgba(91,79,207,0.2); color: #a78bfa; border-radius: 3px; padding: 1px 4px;
}
.tft-trait-desc-row {
    display: flex; align-items: baseline; gap: 4px;
    padding: 3px 0 3px 6px; border-left: 2px solid var(--tft-border); margin: 2px 0;
    font-size: 13px; color: var(--tft-text-secondary);
}
.tft-trait-desc-row .tft-ab-val { color: #fde68a; font-weight: 700; }

/* ── Trait cards ─────────────── */
.tft-champ-trait-card {
    background: rgba(255,255,255,0.02); border: 1px solid var(--tft-border);
    border-radius: 10px; padding: 14px; margin-bottom: 12px;
}
.tft-champ-trait-card:last-child { margin-bottom: 0; }
.tft-champ-trait-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(152,16,250,0.3);
}
.tft-champ-trait-header-icon { width: 22px; height: 22px; object-fit: contain; filter: brightness(1.1); }
.tft-champ-trait-header-name { font-size: 14px; font-weight: 700; color: var(--tft-text-primary); }

.tft-champ-trait-roster { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tft-trait-roster-item {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    text-decoration: none; cursor: pointer;
}
.tft-trait-roster-img-wrap {
    width: 44px; height: 44px; border-radius: 8px; border: 2px solid #9ca3af;
    overflow: hidden; background: var(--tft-bg-card-hover); transition: transform 0.15s;
}
.tft-trait-roster-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tft-trait-roster-item:hover .tft-trait-roster-img-wrap { transform: scale(1.08); }
.tft-trait-roster-item--active .tft-trait-roster-img-wrap {
    border-width: 3px; box-shadow: 0 0 8px rgba(200,155,60,0.5);
}
.tft-trait-roster-name {
    font-size: 9px; color: var(--tft-text-muted); text-align: center;
    max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tft-trait-roster-item--active .tft-trait-roster-name { color: var(--tft-gold); }

.tft-champ-trait-effects { display: flex; flex-wrap: wrap; gap: 5px; }
.tft-trait-effect-row { display: inline-flex; }
.tft-trait-effect-dot {
    width: 26px; height: 26px; border-radius: 50%; border: 2px solid;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}

.tft-champ-comps-section .tft-rooms-empty { color: var(--tft-text-muted); font-size: 13px; text-align: center; padding: 20px 0; }

/* ── Responsive ──────────────── */
@media (max-width: 1024px) {
    .tft-champ-sidebar { width: 180px; }
    .tft-champ-portrait-card { width: 240px; }
    .tft-champ-meta-stat-val { font-size: 16px; }
}

@media (max-width: 768px) {
    .tft-champ-content-cols { flex-direction: column; }
    .tft-champ-portrait-card { width: 100%; position: static; }
    .tft-champ-portrait-splash { height: 220px; }
}

@media (max-width: 640px) {
    .tft-champ-detail-wrap { padding: 12px 10px; }
    .tft-champ-content-cols { gap: 12px; }
    .tft-champ-portrait-splash { height: 180px; }
    .tft-champ-meta-stat { min-width: 60px; padding: 8px; }
    .tft-champ-stats-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   COMPANION DETAIL PAGE (tft-companion-detail-page)
   ============================================================ */

body.tft-companion-detail-page { background: var(--tft-bg-base); }

.tft-companion-detail-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 16px 40px;
}

/* Breadcrumb */
.tft-comp-breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; margin-bottom: 20px; flex-wrap: wrap;
}
.tft-comp-breadcrumb a { color: var(--tft-text-secondary); text-decoration: none; }
.tft-comp-breadcrumb a:hover { color: var(--tft-text-primary); }
.tft-comp-breadcrumb span:last-child { color: var(--tft-text-primary); font-weight: 600; }
.tft-comp-breadcrumb-sep { color: var(--tft-text-muted); }

/* Two-column layout */
.tft-comp-layout {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}
.tft-comp-main { flex: 1; min-width: 0; }
.tft-comp-sidebar {
    flex-shrink: 0;
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 80px;
}

/* Title */
.tft-comp-title {
    font-size: 28px; font-weight: 900; color: var(--tft-text-primary);
    margin: 0 0 16px; line-height: 1.2;
    border-bottom: 3px solid var(--tft-gold);
    padding-bottom: 10px;
    display: inline-block;
}

/* Hero art */
.tft-comp-hero-art {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, #1f1a3d 0%, #2b244f 50%, #1a1040 100%);
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    margin-bottom: 16px;
}
.tft-comp-hero-art-glow {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, rgba(152,16,250,0.15) 0%, transparent 70%);
    pointer-events: none;
}
.tft-comp-hero-art-img {
    position: relative; z-index: 1;
    max-width: 320px; max-height: 320px;
    width: auto; height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 32px rgba(152,16,250,0.5));
    display: block;
}

/* Caption */
.tft-comp-caption {
    font-size: 14px; color: var(--tft-text-secondary); line-height: 1.7;
    margin: 0 0 24px; padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border-left: 3px solid var(--tft-gold);
    border-radius: 0 8px 8px 0;
}
.tft-comp-caption strong { color: var(--tft-text-primary); }

/* Sections */
.tft-comp-section { margin-bottom: 28px; }
.tft-comp-section-title {
    font-size: 16px; font-weight: 700; color: var(--tft-text-primary);
    margin: 0 0 14px; padding-bottom: 8px;
    border-bottom: 1px solid var(--tft-border);
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* Level upgrade cards */
.tft-comp-levels {
    display: flex; gap: 16px; flex-wrap: wrap;
}
.tft-comp-level-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: var(--tft-bg-card);
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 12px;
    padding: 16px 20px;
    min-width: 130px;
    transition: border-color 0.15s, transform 0.15s;
}
.tft-comp-level-card:hover { border-color: rgba(152,16,250,0.7); transform: translateY(-2px); }
.tft-comp-level-img-wrap {
    width: 100px; height: 100px;
    background: linear-gradient(135deg, #2b244f, #1a1040);
    border-radius: 10px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.tft-comp-level-img-wrap img {
    width: 90px; height: 90px; object-fit: contain; display: block;
    filter: drop-shadow(0 0 8px rgba(152,16,250,0.4));
}
.tft-comp-level-stars {
    color: var(--tft-gold); font-size: 14px; font-weight: 700; letter-spacing: 2px;
}
.tft-comp-level-label {
    font-size: 12px; color: var(--tft-text-muted); font-weight: 600;
}

/* Related companions grid */
.tft-comp-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 12px;
}
.tft-comp-related-item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    text-decoration: none;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
    padding: 12px 8px;
    transition: border-color 0.15s, background 0.15s;
}
.tft-comp-related-item:hover {
    border-color: rgba(152,16,250,0.5);
    background: var(--tft-bg-card-hover);
}
.tft-comp-related-img-wrap {
    width: 72px; height: 72px;
    background: linear-gradient(135deg, #2b244f, #1a1040);
    border-radius: 8px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.tft-comp-related-img-wrap img {
    width: 64px; height: 64px; object-fit: contain; display: block;
}
.tft-comp-related-img-wrap--empty { opacity: 0.3; }
.tft-comp-related-name {
    font-size: 11px; color: var(--tft-text-secondary); text-align: center;
    line-height: 1.3; word-break: break-word;
}

/* Sidebar cards */
.tft-comp-sidebar-card {
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 12px;
    overflow: hidden;
}
.tft-comp-sidebar-card-title {
    font-size: 12px; font-weight: 700; color: var(--tft-text-secondary);
    text-transform: uppercase; letter-spacing: 0.07em;
    padding: 10px 14px;
    border-bottom: 1px solid var(--tft-border);
    background: rgba(255,255,255,0.02);
}
.tft-comp-info-rows { padding: 4px 0; }
.tft-comp-info-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-size: 13px;
}
.tft-comp-info-row:last-child { border-bottom: none; }
.tft-comp-info-label { color: var(--tft-text-muted); }
.tft-comp-info-val { color: var(--tft-text-primary); font-weight: 600; text-align: right; max-width: 60%; }

.tft-comp-sidebar-levels {
    display: flex; gap: 8px; padding: 12px 14px; flex-wrap: wrap;
}
.tft-comp-sidebar-level {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    flex: 1; min-width: 56px;
}
.tft-comp-sidebar-level img {
    width: 56px; height: 56px; object-fit: contain; display: block;
    background: linear-gradient(135deg, #2b244f, #1a1040);
    border-radius: 8px;
}
.tft-comp-sidebar-level span {
    font-size: 10px; color: var(--tft-gold); letter-spacing: 1px;
}

/* Back button */
.tft-comp-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--tft-text-secondary); text-decoration: none;
    font-size: 13px; font-weight: 600;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 8px;
    padding: 8px 14px;
    transition: color 0.15s, border-color 0.15s;
}
.tft-comp-back-btn:hover { color: var(--tft-text-primary); border-color: var(--tft-purple); }

/* SEO text */
.tft-comp-seo-text {
    font-size: 12px; color: var(--tft-text-muted); margin: 20px 0 0;
    font-weight: 400; line-height: 1.6;
    padding-top: 14px; border-top: 1px solid var(--tft-border);
}

/* Responsive */
@media (max-width: 768px) {
    .tft-comp-layout { flex-direction: column; }
    .tft-comp-sidebar { width: 100%; position: static; }
    .tft-comp-hero-art { min-height: 240px; }
    .tft-comp-hero-art-img { max-width: 220px; max-height: 220px; }
    .tft-comp-title { font-size: 22px; }
}
@media (max-width: 640px) {
    .tft-companion-detail-wrap { padding: 14px 10px 28px; }
    .tft-comp-levels { gap: 10px; }
    .tft-comp-level-card { min-width: 100px; padding: 12px; }
    .tft-comp-level-img-wrap { width: 80px; height: 80px; }
    .tft-comp-level-img-wrap img { width: 72px; height: 72px; }
    .tft-comp-related-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px; }
}

/* ============================================================
   TRAITS PAGE (he-toc)
   ============================================================ */

/* Filter bar */
body.tft-page-he-toc .tft-page-header { display: none; }
body.tft-page-he-toc .tft-loading-msg { display: none !important; }

.tft-traits-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tft-traits-page-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--tft-text-primary);
    letter-spacing: .5px;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.3;
}
.tft-traits-filter-right { display: flex; align-items: center; gap: 8px; }
.tft-traits-filter-sel-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1.5px solid var(--tft-gold);
    border-radius: 8px;
    padding: 5px 10px 5px 10px;
    color: var(--tft-gold);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.tft-traits-filter-sel {
    background: transparent;
    border: none;
    color: var(--tft-gold);
    font-size: 13px;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    cursor: pointer;
    min-width: 52px;
}
.tft-traits-filter-sel option { background: #131729; color: #e2e8f0; }
.tft-traits-chevron { color: var(--tft-gold); flex-shrink: 0; }

/* Traits list container */
.tft-traits-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Single trait card */
.tft-trait-card {
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 12px;
    padding: 18px 20px 14px;
    transition: border-color .2s;
}
.tft-trait-card:hover { border-color: rgba(152,16,250,0.3); }

/* Card header: icon + name */
.tft-trait-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.tft-trait-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid var(--tft-border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tft-trait-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tft-trait-card-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--tft-text-primary);
    line-height: 1.2;
}

/* Champion portraits row */
.tft-trait-champs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.tft-trait-champ-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: default;
}
.tft-trait-champ-img-wrap {
    width: 58px;
    height: 58px;
    border-radius: 10px;
    border: 2px solid #9ca3af;
    overflow: hidden;
    background: #1a1f35;
    flex-shrink: 0;
}
.tft-trait-champ-img-wrap.cost-1 { border-color: #9ca3af; }
.tft-trait-champ-img-wrap.cost-2 { border-color: #22c55e; }
.tft-trait-champ-img-wrap.cost-3 { border-color: #3b82f6; }
.tft-trait-champ-img-wrap.cost-4 { border-color: #a855f7; }
.tft-trait-champ-img-wrap.cost-5 { border-color: #f59e0b; }
.tft-trait-champ-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tft-trait-champ-name {
    font-size: 11px;
    color: var(--tft-text-secondary);
    text-align: center;
    max-width: 58px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Trait description */
.tft-trait-card-desc {
    font-size: 13px;
    color: var(--tft-text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}

/* Effect tiers */
.tft-trait-effects-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tft-trait-eff-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tft-trait-eff-badge {
    min-width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    background: #6b7280;
}
.tft-trait-eff-badge.style-1 { background: #cd7f32; }
.tft-trait-eff-badge.style-2 { background: #94a3b8; }
.tft-trait-eff-badge.style-3 { background: #f59e0b; }
.tft-trait-eff-badge.style-4 { background: #a855f7; }
.tft-trait-eff-badge.style-5 { background: linear-gradient(135deg,#9810fa,#e60076); }
.tft-trait-eff-text {
    font-size: 13px;
    color: var(--tft-text-primary);
    line-height: 1.4;
}
.tft-trait-eff-val {
    color: #fde68a;
    font-weight: 700;
}
.tft-keyword-badge {
    display: inline-block;
    background: rgba(152, 16, 250, 0.18);
    border: 1px solid rgba(152, 16, 250, 0.45);
    color: #c084fc;
    font-size: 12px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 4px;
    vertical-align: baseline;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 640px) {
    .tft-traits-filter-bar { gap: 8px; }
    .tft-traits-page-title { font-size: 14px; }
    .tft-trait-card { padding: 14px 14px 12px; }
    .tft-trait-champ-img-wrap { width: 48px; height: 48px; }
    .tft-trait-champ-name { max-width: 48px; }
}


/* ============================================================
   ITEMS PAGE (/trang-bi)
   ============================================================ */

body.tft-page-trang-bi .tft-page-header { display: none; }
body.tft-page-trang-bi .tft-loading-msg { display: none !important; }

.tft-items-wrap {
    padding: 24px 0;
}

.tft-items-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--tft-text-primary);
    margin: 0 0 20px 0;
    line-height: 1.4;
}

.tft-items-title-highlight {
    color: var(--tft-gold);
}

.tft-items-tabs-wrap {
    margin-bottom: 0;
    border-bottom: 2px solid rgba(152,16,250,0.3);
}

.tft-items-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 0;
}

.tft-items-tab {
    background: rgba(31,26,61,0.6);
    border: 1px solid rgba(152,16,250,0.25);
    border-bottom: none;
    color: var(--tft-text-secondary);
    padding: 8px 18px;
    border-radius: 6px 6px 0 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}

.tft-items-tab:hover {
    background: rgba(91,79,207,0.15);
    color: var(--tft-text-primary);
    border-color: rgba(152,16,250,0.5);
}

.tft-items-tab.active {
    background: var(--tft-purple);
    border-color: var(--tft-purple);
    color: #fff;
    font-weight: 600;
}

/* Container */
.tft-items-list {
    margin-top: 0;
}

/* Table */
.tft-items-table {
    width: 100%;
    border-collapse: collapse;
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.tft-items-table thead th {
    background: #2b244f;
    color: var(--tft-text-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(152,16,250,0.3);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tft-items-table tbody tr {
    border-bottom: 1px solid rgba(152,16,250,0.12);
    transition: background 0.13s;
}

.tft-items-table tbody tr:last-child {
    border-bottom: none;
}

.tft-items-table tbody tr:hover {
    background: rgba(91,79,207,0.08);
}

/* Item name cell */
.tft-item-name-cell {
    width: 230px;
    padding: 10px 16px;
    vertical-align: middle;
}

.tft-item-name-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tft-item-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    overflow: hidden;
    background: #2b244f;
}

.tft-item-icon-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tft-item-icon-placeholder {
    width: 100%;
    height: 100%;
    background: rgba(91,79,207,0.2);
}

.tft-item-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--tft-text-primary);
    line-height: 1.3;
}

/* Description cell */
.tft-item-desc-cell {
    padding: 10px 16px;
    vertical-align: middle;
    min-width: 200px;
}

.tft-item-desc {
    font-size: 13px;
    color: var(--tft-text-secondary);
    line-height: 1.5;
}

.tft-item-desc-val {
    color: #fde68a;
    font-weight: 700;
}

/* Combination cell */
.tft-item-comb-cell {
    padding: 10px 16px;
    vertical-align: middle;
}

.tft-item-combo-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.tft-item-combo-icon {
    display: inline-block;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid rgba(152,16,250,0.4);
    background: #2b244f;
    cursor: default;
    transition: border-color 0.13s, transform 0.13s;
}

.tft-item-combo-icon:hover {
    border-color: rgba(200,155,60,0.7);
    transform: scale(1.12);
}

.tft-item-combo-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tft-items-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--tft-text-muted);
    font-size: 14px;
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 0 0 10px 10px;
}

/* Responsive */
@media (max-width: 1024px) {
    .tft-item-name-cell { width: 180px; }
    .tft-item-desc-cell { min-width: 160px; }
    .tft-item-combo-icon { width: 30px; height: 30px; }
}

@media (max-width: 640px) {
    .tft-items-tab { padding: 6px 12px; font-size: 13px; }
    .tft-items-th-comb,
    .tft-item-comb-cell { display: none; }
    .tft-item-label { font-size: 13px; }
    .tft-item-icon { width: 38px; height: 38px; }
}

/* ============================================================
   AUGMENTS PAGE
   ============================================================ */
body.tft-page-loi-nang-cap .tft-page-header { display: none; }
body.tft-page-loi-nang-cap .tft-loading-msg { display: none !important; }

.tft-augments-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 24px;
    box-sizing: border-box;
}

.tft-augments-header {
    margin-bottom: 20px;
}

.tft-augments-title {
    font-size: clamp(16px, 2.5vw, 22px);
    font-weight: 700;
    color: var(--tft-text-primary);
    margin: 0;
}

.tft-augments-title-highlight {
    color: var(--tft-gold);
}

.tft-augments-tabs-wrap {
    margin-bottom: 20px;
    overflow-x: auto;
}

.tft-augments-tabs {
    display: inline-flex;
    gap: 6px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 12px;
    padding: 5px;
}

.tft-augments-tab {
    background: transparent;
    border: 1px solid transparent;
    color: var(--tft-text-secondary);
    padding: 8px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.tft-augments-tab:hover {
    color: var(--tft-text-primary);
    background: var(--tft-bg-card-hover);
}

/* Silver (Bậc bạc) — tier 1 */
.tft-augments-tab.active[data-tier="1"] {
    background: #546e7a;
    border-color: #78909c;
    color: #fff;
}

/* Gold (Bậc vàng) — tier 2 */
.tft-augments-tab.active[data-tier="2"] {
    background: #a07830;
    border-color: var(--tft-gold);
    color: #fff;
}

/* Diamond/Prismatic (Bậc kim cương) — tier 3 */
.tft-augments-tab.active[data-tier="3"] {
    background: var(--tft-purple);
    border-color: #7c6ff7;
    color: #fff;
}

.tft-augments-list {
    background: var(--tft-bg-card);
    border: 1px solid rgba(152, 16, 250, 0.3);
    border-radius: 12px;
    overflow: hidden;
}

.tft-augments-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.tft-augments-th {
    background: rgba(43, 36, 79, 0.95);
    color: var(--tft-text-secondary);
    font-size: 13px;
    font-weight: 600;
    padding: 13px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(152, 16, 250, 0.3);
    position: sticky;
    top: 0;
    z-index: 2;
}

.tft-augments-th--name { width: 33%; }
.tft-augments-th--desc { width: 57%; }
.tft-augments-th--tier { width: 10%; text-align: center; }

.tft-augments-row {
    border-bottom: 1px solid rgba(31, 37, 67, 0.8);
    transition: background 0.12s ease;
}

.tft-augments-row:last-child { border-bottom: none; }
.tft-augments-row:hover { background: rgba(91, 79, 207, 0.08); }
.tft-augments-row:nth-child(even) { background: rgba(0, 0, 0, 0.12); }
.tft-augments-row:nth-child(even):hover { background: rgba(91, 79, 207, 0.08); }

.tft-augments-cell {
    padding: 11px 16px;
    vertical-align: middle;
    font-size: 14px;
    color: var(--tft-text-primary);
}

.tft-augments-name-inner {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tft-augments-icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(43, 36, 79, 0.9);
    border: 1px solid rgba(152, 16, 250, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tft-augments-icon-wrap.no-img {
    background: rgba(31, 26, 61, 0.6);
    border-color: rgba(255, 255, 255, 0.08);
}

.tft-augments-icon-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tft-augments-name {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.35;
    color: var(--tft-text-primary);
}

.tft-augments-cell--desc {
    color: var(--tft-text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.tft-augments-cell--tier {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--tft-text-primary);
}

.tft-augments-empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--tft-text-muted);
    font-size: 15px;
}

@media (max-width: 1024px) {
    .tft-augments-th--name { width: 42%; }
    .tft-augments-th--desc { width: 48%; }
    .tft-augments-th--tier { width: 10%; }
}

@media (max-width: 640px) {
    .tft-augments-wrap { padding: 20px 12px; }
    .tft-augments-cell { padding: 10px 12px; }
    .tft-augments-th  { padding: 10px 12px; }
    .tft-augments-cell--desc,
    .tft-augments-th--desc { display: none; }
    .tft-augments-th--name { width: 78%; }
    .tft-augments-th--tier { width: 22%; }
    .tft-augments-icon-wrap { width: 34px; height: 34px; }
    .tft-augments-tab { padding: 7px 14px; font-size: 13px; }
}


/* ============================================================
   COMPANIONS PAGE  (/linh-thu)
   ============================================================ */
body.tft-page-linh-thu .tft-page-header { display: none; }
body.tft-page-linh-thu .tft-loading-msg { display: none !important; }

.tft-companions-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 48px;
}

/* ---------- Header ---------- */
.tft-companions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.tft-companions-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--tft-text-primary);
    margin: 0;
}

/* ---------- Search ---------- */
.tft-companions-search-wrap {
    position: relative;
    flex-shrink: 0;
}
.tft-companions-search {
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.5);
    border-radius: 8px;
    color: var(--tft-text-primary);
    font-size: 14px;
    padding: 8px 36px 8px 14px;
    width: 220px;
    outline: none;
    transition: border-color 0.2s;
}
.tft-companions-search:focus { border-color: var(--tft-purple); }
.tft-companions-search::placeholder { color: var(--tft-text-muted); }
.tft-companions-search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tft-text-muted);
    pointer-events: none;
}

/* ---------- Species thumbnail grid ---------- */
.tft-companions-icon-grid {
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    max-height: 280px;
    overflow-y: auto;
}
.tft-companions-icon-grid::-webkit-scrollbar { width: 6px; }
.tft-companions-icon-grid::-webkit-scrollbar-track { background: var(--tft-bg-card); }
.tft-companions-icon-grid::-webkit-scrollbar-thumb { background: var(--tft-border); border-radius: 3px; }

.tft-comp-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    width: 68px;
    text-align: center;
    padding: 6px 4px;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.tft-comp-thumb:hover { background: var(--tft-bg-card-hover); }
.tft-comp-thumb.active {
    border-color: var(--tft-purple);
    background: rgba(91,79,207,0.18);
}
.tft-comp-thumb img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--tft-border);
    background: #1a1f3a;
}
.tft-comp-thumb-name {
    font-size: 10px;
    color: var(--tft-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 1.3;
}

/* ---------- Cards container ---------- */
#tft-comp-cards:empty { display: none; }

.tft-comp-species-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.tft-comp-cards-anim {
    animation: tft-cards-in 0.2s ease;
}
@keyframes tft-cards-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Single card (matches screenshot) ---------- */
.tft-comp-card {
    background: #131729;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.07);
    transition: transform 0.18s, border-color 0.18s;
    cursor: default;
}
.tft-comp-card:hover {
    transform: translateY(-4px);
    border-color: rgba(152,16,250,0.35);
}

.tft-comp-card-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #1a1f3a;
}
.tft-comp-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s;
}
.tft-comp-card:hover .tft-comp-card-img { transform: scale(1.05); }

.tft-comp-card-body {
    background: #0d1117;
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.tft-comp-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--tft-text-primary);
    text-align: center;
    line-height: 1.35;
    text-decoration: none;
    transition: color 0.15s;
}
a.tft-comp-card-name:hover { color: var(--tft-gold); }
a.tft-comp-card-img-wrap { display: block; text-decoration: none; cursor: pointer; }

/* Star button row — all levels shown at once */
.tft-comp-star-row {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}
.tft-comp-star-btn {
    background: transparent;
    border: 1.5px solid rgba(200,155,60,0.45);
    border-radius: 24px;
    color: rgba(200,155,60,0.55);
    font-size: 13px;
    padding: 4px 14px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.5;
    white-space: nowrap;
}
.tft-comp-star-btn:hover {
    border-color: var(--tft-gold);
    color: var(--tft-gold);
    background: rgba(200,155,60,0.1);
}
.tft-comp-star-btn--active {
    border-color: var(--tft-gold);
    color: var(--tft-gold);
    background: rgba(200,155,60,0.12);
}

/* ---------- No results ---------- */
.tft-comp-no-results {
    text-align: center;
    color: var(--tft-text-muted);
    padding: 40px;
    font-size: 15px;
    width: 100%;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .tft-comp-species-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .tft-comp-species-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .tft-companions-header { flex-direction: column; align-items: flex-start; }
    .tft-companions-search { width: 100%; }
    .tft-companions-search-wrap { width: 100%; }
    .tft-comp-thumb { width: 58px; }
    .tft-comp-thumb img { width: 44px; height: 44px; }
}

/* ============================================================
/* ============================================================
   PLAYER PROFILE PAGE
   ============================================================ */

/* Page layout */
body.tft-player-profile-page {
    background: var(--tft-bg-base);
}

.tft-profile-page {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 16px 56px;
}

/* ---- Sidebar ---- */
.tft-profile-sidebar {
    width: 248px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.tft-profile-avatar-wrap { position: relative; }

.tft-profile-avatar-ring {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c89b3c, #f0d060, #c89b3c);
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 24px rgba(200,155,60,0.5);
}

.tft-profile-avatar-ring img {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.tft-profile-avatar-initials {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: #1f1a3d;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 700;
    color: var(--tft-gold);
    letter-spacing: 2px;
}

.tft-profile-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.tft-profile-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--tft-text-primary);
}

.tft-profile-region-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--tft-gold);
    background: rgba(200,155,60,0.15);
    border: 1px solid rgba(200,155,60,0.4);
    border-radius: 4px;
    padding: 2px 6px;
    letter-spacing: 1px;
}

/* Ranked card */
.tft-profile-ranked-card {
    width: 100%;
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.tft-profile-tier-emblem {
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 2px 8px rgba(200,155,60,0.4));
}

.tft-profile-tier-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--tft-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.2;
}

.tft-profile-lp-text {
    font-size: 22px;
    font-weight: 900;
    color: var(--tft-text-primary);
    line-height: 1;
}

.tft-profile-wl-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 13px;
}
.tft-wl-win  { color: #22c55e; font-weight: 700; }
.tft-wl-loss { color: #ef4444; font-weight: 700; }
.tft-wl-sep  { color: var(--tft-text-muted); }
.tft-wl-rate { color: var(--tft-gold); font-weight: 600; margin-left: 2px; }

/* LP gradient area chart */
.tft-profile-lp-chart-wrap {
    width: 100%;
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 12px;
    padding: 10px 8px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tft-profile-lp-chart-wrap svg {
    width: 100%;
    height: 72px;
}

/* ---- Main content ---- */
.tft-profile-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---- Stats strip ---- */
.tft-profile-stats-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.tft-pstat-card {
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 12px;
    padding: 14px 10px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    overflow: hidden;
}

.tft-pstat-label {
    font-size: 11px;
    color: var(--tft-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.tft-pstat-value {
    font-size: 30px;
    font-weight: 900;
    color: var(--tft-text-primary);
    line-height: 1;
    margin: 2px 0;
}

/* Progress bar */
.tft-pstat-bar-wrap {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    overflow: hidden;
    margin: 2px 0;
}
.tft-pstat-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: rgba(255,255,255,0.55);
    transition: width 0.7s ease;
}

.tft-pstat-sub {
    font-size: 12px;
    color: var(--tft-text-secondary);
    min-height: 16px;
    line-height: 16px;
}
.tft-pstat-sub--gold {
    color: var(--tft-gold);
    font-weight: 600;
}

/* ---- Mid row ---- */
.tft-profile-mid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Placement card */
.tft-placement-card {
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 12px;
    padding: 16px 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tft-placement-avg-wrap {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.tft-placement-avg-hash {
    font-size: 26px;
    font-weight: 900;
    color: var(--tft-text-secondary);
    line-height: 1;
}

.tft-placement-avg-num {
    font-size: 42px;
    font-weight: 900;
    color: var(--tft-text-primary);
    line-height: 1;
}

.tft-placement-avg-label {
    font-size: 14px;
    color: var(--tft-text-secondary);
    font-weight: 600;
    margin-top: 2px;
}

.tft-placement-avg-sep {
    height: 2px;
    background: rgba(168,85,247,0.35);
    border-radius: 1px;
    margin: 10px 0 12px;
}

.tft-placement-boxes {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tft-placement-row {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
}

.tft-placement-box {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    border: 1px solid transparent;
}

/* Per-placement colours matching screenshot */
.tft-placement-box--1 { background: rgba(200,155,60,0.85);  border-color: rgba(240,185,60,0.8); }
.tft-placement-box--2 { background: rgba(230,115,50,0.80);  border-color: rgba(230,115,50,0.9); }
.tft-placement-box--3 { background: rgba(185,85,20,0.75);   border-color: rgba(200,100,30,0.8); }
.tft-placement-box--4 { background: rgba(120,50,15,0.70);   border-color: rgba(140,70,20,0.7); }
.tft-placement-box--5,
.tft-placement-box--6 { background: rgba(60,70,100,0.65);   border-color: rgba(80,90,120,0.5); }
.tft-placement-box--7,
.tft-placement-box--8 { background: rgba(40,45,65,0.70);    border-color: rgba(65,70,90,0.45); }

/* Best champ card */
.tft-bestchamp-card {
    position: relative;
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 12px;
    overflow: hidden;
    min-height: 160px;
    display: flex;
    align-items: flex-end;
}

.tft-bestchamp-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0.6;
    transition: opacity 0.3s;
}

.tft-bestchamp-card:hover .tft-bestchamp-bg { opacity: 0.8; }

.tft-bestchamp-info {
    position: relative;
    z-index: 1;
    padding: 10px 16px 14px;
    background: linear-gradient(to top, rgba(10,14,26,0.97) 0%, rgba(10,14,26,0.5) 70%, transparent 100%);
    width: 100%;
}

.tft-bestchamp-name {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.tft-bestchamp-sub {
    font-size: 12px;
    color: var(--tft-gold);
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* ---- Performance grid ---- */
.tft-profile-perf-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tft-perf-row {
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tft-perf-row-label {
    width: 52px;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--tft-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tft-perf-row-cards {
    display: flex;
    gap: 8px;
    flex: 1;
    overflow: hidden;
}

.tft-perf-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(152,16,250,0.08);
    border: 1px solid rgba(152,16,250,0.2);
    border-radius: 8px;
    padding: 8px 10px;
    flex: 1;
    min-width: 0;
    transition: background 0.2s;
    cursor: default;
}

.tft-perf-card:hover {
    background: rgba(152,16,250,0.16);
}

.tft-perf-icon {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(31,26,61,0.8);
}

.tft-perf-icon--trait {
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 3px;
    background: rgba(91,79,207,0.3);
}

.tft-perf-icon--item {
    border-radius: 8px;
}

.tft-perf-icon-placeholder {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    background: rgba(152,16,250,0.15);
    flex-shrink: 0;
}

.tft-perf-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tft-perf-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--tft-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.tft-perf-stat {
    font-size: 11px;
    color: var(--tft-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
}

/* ---- Match history ---- */
.tft-profile-history-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 12px;
    overflow: hidden;
}

.tft-profile-tabs {
    display: flex;
    border-bottom: 1px solid rgba(152,16,250,0.25);
}

.tft-profile-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--tft-text-secondary);
    font-size: 13px;
    font-weight: 600;
    padding: 13px 16px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    text-align: center;
}

.tft-profile-tab:hover {
    color: var(--tft-text-primary);
    background: rgba(152,16,250,0.08);
}

.tft-profile-tab--active {
    color: #fff;
    border-bottom: 2px solid #a855f7;
    background: rgba(152,16,250,0.1);
}

.tft-profile-matches {
    max-height: 540px;
    overflow-y: auto;
    padding: 0;
}

.tft-profile-matches::-webkit-scrollbar { width: 4px; }
.tft-profile-matches::-webkit-scrollbar-track { background: transparent; }
.tft-profile-matches::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.4); border-radius: 2px; }

.tft-match-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    border-bottom: 1px solid rgba(152,16,250,0.12);
    background: rgba(19,23,41,0.95);
    transition: background 0.15s;
    overflow: hidden;
    border-radius: 0;
    position: relative;
}
.tft-match-row:hover { background: rgba(30,26,55,0.98); }

/* Colored left bar */
.tft-match-bar {
    width: 5px;
    flex-shrink: 0;
    align-self: stretch;
}
.tft-match-bar--top4 { background: linear-gradient(180deg, #e07b39, #c0392b); }
.tft-match-bar--bot4 { background: rgba(75,80,105,0.6); }

/* Meta column */
.tft-match-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 80px;
    width: 80px;
    flex-shrink: 0;
    padding: 12px 10px;
    border-right: 1px solid rgba(152,16,250,0.1);
}
.tft-match-mode {
    font-size: 12px;
    font-weight: 600;
    color: var(--tft-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tft-match-ago {
    font-size: 11px;
    color: var(--tft-text-secondary);
}
.tft-match-dur {
    font-size: 11px;
    color: var(--tft-text-muted);
}

/* Placement block */
.tft-match-placement-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    padding: 0 8px;
}
.tft-match-place-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--tft-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.tft-match-place-num {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
}
.tft-match-place-num--top4 { color: #e07b39; }
.tft-match-place-num--bot4 { color: var(--tft-text-muted); }

/* Units strip */
.tft-match-units {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    padding: 10px 8px;
    scrollbar-width: none;
}
.tft-match-units::-webkit-scrollbar { display: none; }

.tft-match-unit-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    width: 44px;
}

.tft-match-unit-stars {
    font-size: 8px;
    color: #fdc700;
    height: 12px;
    line-height: 12px;
    letter-spacing: 0;
    white-space: nowrap;
    text-align: center;
}

.tft-match-unit-img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    border: 2px solid #9ca3af;
    object-fit: cover;
    display: block;
    background: rgba(31,26,61,0.8);
}

.tft-match-unit-placeholder {
    background: rgba(31,26,61,0.8);
}

.tft-match-unit-items {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    justify-content: center;
    height: 14px;
}

.tft-match-item-icon {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(31,26,61,0.8);
}

.tft-match-item-empty {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

/* Traits section */
.tft-match-traits {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 10px 8px;
}

.tft-match-traits-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    width: 180px;
}

.tft-match-trait-hex {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(43,36,79,0.9);
    border: 1px solid rgba(152,16,250,0.4);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tft-match-trait-hex img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
    filter: brightness(0.9);
}

.tft-match-trait-hex--empty {
    background: rgba(31,26,61,0.5);
    border-color: rgba(255,255,255,0.08);
}

/* Chevron */
.tft-match-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    font-size: 22px;
    color: rgba(200,155,60,0.6);
    padding-right: 4px;
    align-self: center;
}

.tft-match-empty {
    padding: 32px;
    text-align: center;
    color: var(--tft-text-muted);
    font-size: 14px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .tft-profile-stats-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .tft-perf-row-cards {
        flex-wrap: wrap;
    }
    .tft-profile-page {
        flex-direction: column;
        align-items: stretch;
    }
    .tft-profile-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
    }
    .tft-profile-avatar-wrap { flex-shrink: 0; }
    .tft-profile-ranked-card,
    .tft-profile-lp-chart-wrap {
        flex: 1;
        min-width: 160px;
    }
    .tft-profile-stats-row {
        grid-template-columns: repeat(5, 1fr);
    }
    .tft-profile-mid-row {
        grid-template-columns: 1fr;
    }
    .tft-perf-row {
        flex-wrap: wrap;
    }
    .tft-perf-row-label {
        width: 100%;
    }
    .tft-perf-row-cards {
        flex-wrap: wrap;
    }
}

@media (max-width: 640px) {
    .tft-profile-stats-row {
        grid-template-columns: repeat(3, 1fr);
    }
    .tft-pstat-value {
        font-size: 22px;
    }
    .tft-match-augments {
        display: none;
    }
}

/* ============================================================
   LEGAL PAGES (terms, privacy)
   ============================================================ */

.tft-legal-wrap {
    min-height: 60vh;
}

/* Hero */
.tft-legal-hero {
    background: linear-gradient(135deg, #2b244f 0%, #1a1535 60%, #0a0e1a 100%);
    border-bottom: 1px solid var(--tft-border);
    padding: 64px 24px 48px;
    text-align: center;
}
.tft-legal-hero-inner {
    max-width: 640px;
    margin: 0 auto;
}
.tft-legal-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: rgba(91,79,207,0.15);
    border: 1px solid rgba(91,79,207,0.3);
    color: var(--tft-text-secondary);
    margin-bottom: 20px;
}
.tft-legal-hero-title {
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 700;
    color: var(--tft-text-primary);
    margin: 0 0 12px;
}
.tft-legal-hero-sub {
    font-size: 16px;
    color: var(--tft-text-secondary);
    margin: 0 0 20px;
    line-height: 1.6;
}
.tft-legal-meta {
    font-size: 13px;
    color: var(--tft-text-muted);
}
.tft-legal-meta strong {
    color: var(--tft-gold);
}

/* Content layout */
.tft-legal-content {
    padding: 40px 24px 64px;
}
.tft-legal-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* TOC sidebar */
.tft-legal-toc {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 12px;
    padding: 20px;
}
.tft-legal-toc-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--tft-gold);
    margin-bottom: 14px;
}
.tft-legal-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tft-legal-toc ul li a {
    display: block;
    font-size: 13px;
    color: var(--tft-text-secondary);
    text-decoration: none;
    padding: 6px 8px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}
.tft-legal-toc ul li a:hover {
    background: rgba(91,79,207,0.15);
    color: var(--tft-text-primary);
}

/* Article body */
.tft-legal-body {
    flex: 1;
    min-width: 0;
}
.tft-legal-section {
    margin-bottom: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--tft-border);
}
.tft-legal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.tft-legal-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--tft-text-primary);
    margin: 0 0 20px;
}
.tft-legal-section-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(91,79,207,0.2);
    border: 1px solid rgba(91,79,207,0.4);
    color: var(--tft-purple);
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.tft-legal-body p {
    font-size: 15px;
    color: var(--tft-text-secondary);
    line-height: 1.75;
    margin: 0 0 16px;
}
.tft-legal-body a {
    color: var(--tft-gold);
    text-decoration: none;
}
.tft-legal-body a:hover {
    text-decoration: underline;
}
.tft-legal-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tft-legal-list li {
    font-size: 14px;
    color: var(--tft-text-secondary);
    padding: 10px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--tft-border);
    border-left: 3px solid var(--tft-purple);
    border-radius: 6px;
    line-height: 1.5;
}
.tft-legal-list--warn li {
    border-left-color: var(--tft-red);
}
.tft-legal-notice {
    background: rgba(200,155,60,0.08);
    border: 1px solid rgba(200,155,60,0.25);
    border-left: 3px solid var(--tft-gold);
    border-radius: 8px;
    padding: 16px 20px;
    font-size: 14px;
    color: var(--tft-text-secondary);
    line-height: 1.6;
}
.tft-legal-notice--info {
    background: rgba(59,130,246,0.07);
    border-color: rgba(59,130,246,0.25);
    border-left-color: #3b82f6;
}
.tft-legal-notice strong {
    color: var(--tft-gold);
}
.tft-legal-contact-card {
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 12px;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tft-legal-contact-row {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}
.tft-legal-contact-label {
    color: var(--tft-text-muted);
    min-width: 100px;
    flex-shrink: 0;
}
.tft-legal-contact-row a {
    color: var(--tft-gold);
    text-decoration: none;
}
.tft-legal-contact-row a:hover {
    text-decoration: underline;
}

/* Privacy info grid */
.tft-legal-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.tft-legal-info-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
    padding: 14px 16px;
}
.tft-legal-info-card-icon {
    color: var(--tft-gold);
    flex-shrink: 0;
    margin-top: 2px;
}
.tft-legal-info-card strong {
    display: block;
    font-size: 13px;
    color: var(--tft-text-primary);
    margin-bottom: 4px;
}
.tft-legal-info-card p {
    font-size: 13px;
    color: var(--tft-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Legal responsive */
@media (max-width: 768px) {
    .tft-legal-container {
        flex-direction: column;
    }
    .tft-legal-toc {
        width: 100%;
        position: static;
    }
    .tft-legal-toc ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .tft-legal-info-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .tft-legal-hero {
        padding: 40px 16px 32px;
    }
    .tft-legal-content {
        padding: 24px 16px 48px;
    }
    .tft-legal-toc ul {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */

.tft-contact-wrap {
    min-height: 60vh;
}

/* Hero */
.tft-contact-hero {
    background: linear-gradient(135deg, #2b244f 0%, #1a1535 60%, #0a0e1a 100%);
    border-bottom: 1px solid var(--tft-border);
    padding: 64px 24px 48px;
    text-align: center;
}
.tft-contact-hero-inner {
    max-width: 600px;
    margin: 0 auto;
}
.tft-contact-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 18px;
    background: rgba(91,79,207,0.15);
    border: 1px solid rgba(91,79,207,0.3);
    color: var(--tft-text-secondary);
    margin-bottom: 20px;
}
.tft-contact-hero-title {
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 700;
    color: var(--tft-text-primary);
    margin: 0 0 12px;
}
.tft-contact-hero-sub {
    font-size: 16px;
    color: var(--tft-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Info cards row */
.tft-contact-content {
    max-width: 1060px;
    margin: 0 auto;
    padding: 40px 24px 64px;
}
.tft-contact-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 40px;
}
.tft-contact-info-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 12px;
    padding: 14px 20px;
    flex: 1;
    min-width: 200px;
}
.tft-contact-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(200,155,60,0.1);
    color: var(--tft-gold);
    flex-shrink: 0;
}
.tft-contact-info-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.tft-contact-info-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tft-text-muted);
}
.tft-contact-info-value {
    font-size: 14px;
    color: var(--tft-text-primary);
    text-decoration: none;
    word-break: break-all;
}
a.tft-contact-info-value:hover {
    color: var(--tft-gold);
}

/* Main columns */
.tft-contact-main {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* Form */
.tft-contact-form-wrap {
    flex: 1;
    min-width: 0;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 16px;
    padding: 32px;
}
.tft-contact-form-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--tft-text-primary);
    margin: 0 0 24px;
}
.tft-contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.tft-contact-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tft-contact-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tft-contact-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--tft-text-secondary);
}
.tft-contact-required {
    color: var(--tft-red);
    margin-left: 3px;
}
.tft-contact-input,
.tft-contact-textarea {
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--tft-border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--tft-text-primary);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    font-family: inherit;
}
.tft-contact-input:focus,
.tft-contact-textarea:focus {
    border-color: rgba(91,79,207,0.6);
    box-shadow: 0 0 0 3px rgba(91,79,207,0.12);
}
.tft-contact-input::placeholder,
.tft-contact-textarea::placeholder {
    color: var(--tft-text-muted);
}
.tft-contact-textarea {
    resize: vertical;
    min-height: 120px;
}
.tft-contact-char-hint {
    font-size: 12px;
    color: var(--tft-text-muted);
    margin-top: -4px;
}
.tft-contact-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--tft-purple), #7c3aed);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    align-self: flex-start;
    font-family: inherit;
}
.tft-contact-submit:hover {
    opacity: 0.88;
}
.tft-contact-submit:active {
    transform: scale(0.98);
}

/* Alerts */
.tft-contact-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 4px;
}
.tft-contact-alert--success {
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.25);
    color: #22c55e;
}
.tft-contact-alert--error {
    background: rgba(192,57,43,0.1);
    border: 1px solid rgba(192,57,43,0.25);
    color: #ff6b6b;
}
.tft-contact-alert--error ul {
    margin: 0;
    padding-left: 16px;
}

/* Side */
.tft-contact-side {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tft-contact-side-card {
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 14px;
    padding: 20px;
}
.tft-contact-side-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--tft-gold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 16px;
}
.tft-contact-faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.tft-contact-faq-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.tft-contact-faq-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}
.tft-contact-faq-item strong {
    display: block;
    font-size: 13px;
    color: var(--tft-text-primary);
    margin-bottom: 3px;
}
.tft-contact-faq-item p {
    font-size: 12px;
    color: var(--tft-text-muted);
    margin: 0;
    line-height: 1.5;
}
.tft-contact-side-card--note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: rgba(59,130,246,0.07);
    border-color: rgba(59,130,246,0.2);
}
.tft-contact-side-card--note svg {
    color: #3b82f6;
    flex-shrink: 0;
    margin-top: 2px;
}
.tft-contact-side-card--note p {
    font-size: 13px;
    color: var(--tft-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Contact responsive */
@media (max-width: 1024px) {
    .tft-contact-side {
        width: 260px;
    }
}
@media (max-width: 768px) {
    .tft-contact-main {
        flex-direction: column;
    }
    .tft-contact-side {
        width: 100%;
    }
    .tft-contact-form-row {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .tft-contact-hero {
        padding: 40px 16px 32px;
    }
    .tft-contact-content {
        padding: 24px 16px 48px;
    }
    .tft-contact-form-wrap {
        padding: 20px;
    }
    .tft-contact-info-card {
        min-width: 100%;
    }
}

/* ============================================================
   PROFILE PAGE — PROGRESSIVE LOADING (skeleton + spinners)
   ============================================================ */

/* ── Spinner ── */
.tft-spinner {
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid rgba(92, 79, 207, 0.25);
    border-top-color: var(--tft-purple);
    border-radius: 50%;
    animation: tft-spin 0.75s linear infinite;
    flex-shrink: 0;
}
.tft-spinner--sm {
    width: 18px;
    height: 18px;
    border-width: 2px;
}
@keyframes tft-spin {
    to { transform: rotate(360deg); }
}

/* ── Section loading state (spinner centered inside a container) ── */
.tft-section-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 0;
    color: var(--tft-text-muted);
    font-size: 13px;
    min-height: 80px;
}

/* ── Skeleton pulse animation ── */
@keyframes tft-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.tft-skeleton {
    background: var(--tft-bg-card-hover);
    border-radius: 6px;
    animation: tft-skeleton-pulse 1.4s ease-in-out infinite;
}

/* ── Sidebar skeleton ── */
.tft-profile-avatar-ring--loading {
    background: var(--tft-bg-card-hover) !important;
    animation: tft-skeleton-pulse 1.4s ease-in-out infinite;
}
.tft-profile-ranked-card--loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
}
.tft-skeleton-line {
    height: 14px;
    border-radius: 4px;
    background: var(--tft-bg-card-hover);
    animation: tft-skeleton-pulse 1.4s ease-in-out infinite;
}
.tft-skeleton-circle {
    border-radius: 50%;
    background: var(--tft-bg-card-hover);
    animation: tft-skeleton-pulse 1.4s ease-in-out infinite;
}

/* ── Stats strip skeleton ── */
.tft-pstat-card--loading .tft-pstat-value {
    width: 40px;
    height: 28px;
    border-radius: 4px;
    background: var(--tft-bg-card-hover);
    animation: tft-skeleton-pulse 1.4s ease-in-out infinite;
    color: transparent;
}
.tft-pstat-card--loading .tft-pstat-sub {
    width: 60%;
    height: 10px;
    border-radius: 4px;
    background: var(--tft-bg-card-hover);
    animation: tft-skeleton-pulse 1.4s ease-in-out infinite;
    margin: 0 auto;
}

/* ── Match rows skeleton ── */
.tft-match-row-skeleton {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--tft-border);
    min-height: 88px;
}
.tft-match-row-skeleton .tft-skeleton-bar {
    width: 4px;
    height: 64px;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--tft-bg-card-hover);
    animation: tft-skeleton-pulse 1.4s ease-in-out infinite;
}
.tft-match-row-skeleton .tft-skeleton-placement {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
    background: var(--tft-bg-card-hover);
    animation: tft-skeleton-pulse 1.4s ease-in-out infinite;
}
.tft-match-row-skeleton .tft-skeleton-units {
    display: flex;
    gap: 6px;
    flex: 1;
}
.tft-match-row-skeleton .tft-skeleton-unit-chip {
    width: 44px;
    height: 64px;
    border-radius: 8px;
    background: var(--tft-bg-card-hover);
    animation: tft-skeleton-pulse 1.4s ease-in-out infinite;
}

/* ── Perf row skeleton ── */
.tft-perf-row-skeleton {
    display: flex;
    gap: 10px;
    padding: 8px 0;
}
.tft-perf-card-skeleton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 8px;
    flex: 1;
    min-width: 0;
}
.tft-perf-card-skeleton .tft-skeleton-icon {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--tft-bg-card-hover);
    animation: tft-skeleton-pulse 1.4s ease-in-out infinite;
}
.tft-perf-card-skeleton .tft-skeleton-text {
    flex: 1;
}
.tft-perf-card-skeleton .tft-skeleton-line-a {
    height: 12px;
    border-radius: 4px;
    width: 80%;
    margin-bottom: 6px;
    background: var(--tft-bg-card-hover);
    animation: tft-skeleton-pulse 1.4s ease-in-out infinite;
}
.tft-perf-card-skeleton .tft-skeleton-line-b {
    height: 10px;
    border-radius: 4px;
    width: 55%;
    background: var(--tft-bg-card-hover);
    animation: tft-skeleton-pulse 1.4s ease-in-out infinite;
}

/* ============================================================
   FOOTER12 — METATFT.GG STYLE FOOTER
   ============================================================ */
.tft-footer12 {
    background: var(--tft-bg-card);
    border-top: 1px solid var(--tft-border);
    padding-top: 48px;
}
.tft-footer12-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
.tft-footer12-cols {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 40px;
}

/* ── Brand column ── */
.tft-footer12-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 16px;
}
.tft-footer12-logo-img {
    max-height: 44px;
    width: auto;
    flex-shrink: 0;
}
.tft-footer12-logo-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #9810fa, #e60076);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tft-footer12-logo-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.tft-footer12-logo-name {
    font-size: 18px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 1;
}
.tft-footer12-logo-tagline {
    font-size: 11px;
    color: var(--tft-text-muted);
    letter-spacing: 0.5px;
    line-height: 1;
}
.tft-footer12-desc {
    font-size: 14px;
    color: var(--tft-text-secondary);
    line-height: 1.75;
    margin: 0;
}
.tft-footer12-desc-brand {
    color: var(--tft-gold);
    font-weight: 600;
}

/* ── Link columns ── */
.tft-footer12-col-heading {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
    padding: 0;
    line-height: 1.3;
}
.tft-footer12-col-divider {
    height: 2px;
    background: var(--tft-gold);
    border: none;
    margin: 0 0 2px 0;
    border-radius: 1px;
    opacity: 0.9;
}
.tft-footer12-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tft-footer12-links li {
    border-bottom: 1px solid var(--tft-border);
}
.tft-footer12-links li:last-child {
    border-bottom: none;
}
.tft-footer12-link {
    display: block;
    padding: 11px 0;
    font-size: 14px;
    color: var(--tft-text-primary);
    text-decoration: none;
    transition: color 0.18s;
}
.tft-footer12-link:hover {
    color: var(--tft-gold);
}

/* ── Social column ── */
.tft-footer12-social-col .tft-footer12-col-divider {
    margin-bottom: 12px;
}
.tft-footer12-social-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.tft-footer12-social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity 0.18s, transform 0.18s;
}
.tft-footer12-social-btn:hover {
    opacity: 0.82;
    transform: translateY(-2px);
}
.tft-footer12-social-btn--fb    { background: #1877F2; }
.tft-footer12-social-btn--tt    { background: #010101; border: 1px solid #333; }
.tft-footer12-social-btn--email { background: #4a5568; }
.tft-footer12-social-btn--phone { background: #25D366; }
.tft-footer12-social-btn--yt    { background: #FF0000; }
.tft-footer12-social-btn--zalo  { background: #0068FF; }
.tft-footer12-social-btn--ig    { background: linear-gradient(135deg, #405DE6 0%, #833AB4 50%, #FD1D1D 100%); }
.tft-footer12-social-btn--x     { background: #000; border: 1px solid #333; }
.tft-footer12-legal-links {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13px;
}
.tft-footer12-legal-link {
    color: var(--tft-text-secondary);
    text-decoration: none;
    transition: color 0.18s;
}
.tft-footer12-legal-link:hover {
    color: #fff;
}
.tft-footer12-legal-sep {
    color: var(--tft-text-muted);
    line-height: 1;
}

/* ── Gold divider ── */
.tft-footer12-gold-divider {
    height: 1px;
    background: var(--tft-gold);
    border: none;
    margin: 0;
    opacity: 0.55;
}

/* ── Bottom bar ── */
.tft-footer12-bottom {
    padding: 24px 0 36px;
    text-align: center;
}
.tft-footer12-riot-notice {
    font-size: 12px;
    color: var(--tft-text-muted);
    line-height: 1.8;
    margin: 0 auto 14px;
    max-width: 920px;
}
.tft-footer12-copyright {
    font-size: 14px;
    color: var(--tft-text-secondary);
    margin: 0;
}
.tft-footer12-copyright strong {
    color: #fff;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .tft-footer12-cols {
        grid-template-columns: 1fr 1fr;
        gap: 32px 40px;
    }
    .tft-footer12-brand-col {
        grid-column: 1 / -1;
    }
}
@media (max-width: 640px) {
    .tft-footer12-cols {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .tft-footer12-inner {
        padding: 0 16px;
    }
    .tft-footer12 {
        padding-top: 32px;
    }
}

/* ============================================================
   COMPS PAGE — /comps  (MetaTFT.gg style)
   ============================================================ */
body.tft-page-comps {
    background: var(--tft-bg-base);
}

/* ── Page wrapper & 2-col grid ── */
.tft-comps-wrap {
    padding: 24px 0 56px;
    min-height: 60vh;
}
.tft-comps-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

/* ── Breadcrumb ── */
.tft-comps-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--tft-text-muted);
    margin-bottom: 10px;
}
.tft-comps-breadcrumb a {
    color: var(--tft-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.tft-comps-breadcrumb a:hover {
    color: var(--tft-text-secondary);
}
.tft-comps-breadcrumb-sep {
    opacity: 0.5;
}

/* ── Page heading ── */
.tft-comps-header {
    margin-bottom: 18px;
}
.tft-comps-h1 {
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 800;
    color: var(--tft-text-primary);
    margin: 0 0 8px;
    line-height: 1.3;
}
.tft-comps-desc {
    font-size: 14px;
    color: var(--tft-text-secondary);
    margin: 0;
    line-height: 1.65;
}

/* ── Filter / sort bar ── */
.tft-comps-filter-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 8px;
    margin-bottom: 14px;
}
.tft-comps-filter-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.tft-comps-patch-badge {
    padding: 4px 10px;
    background: var(--tft-bg-card-hover);
    border: 1px solid var(--tft-border);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--tft-text-primary);
    white-space: nowrap;
}
.tft-comps-updated {
    font-size: 12px;
    color: var(--tft-text-muted);
}

/* Sort dropdown */
.tft-comps-sort-wrap {
    position: relative;
}
.tft-comps-sort-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--tft-bg-card-hover);
    border: 1px solid var(--tft-border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--tft-text-primary);
    cursor: pointer;
    transition: border-color 0.18s;
    white-space: nowrap;
}
.tft-comps-sort-btn:hover,
.tft-comps-sort-wrap.is-open .tft-comps-sort-btn {
    border-color: rgba(152,16,250,0.5);
}
.tft-comps-sort-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 200px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 8px;
    overflow: hidden;
    z-index: 200;
    display: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.tft-comps-sort-wrap.is-open .tft-comps-sort-dropdown {
    display: block;
}
.tft-comps-sort-opt {
    padding: 10px 16px;
    font-size: 13px;
    color: var(--tft-text-secondary);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.tft-comps-sort-opt:hover,
.tft-comps-sort-opt.is-active {
    background: var(--tft-bg-card-hover);
    color: var(--tft-text-primary);
}
.tft-comps-sort-opt.is-active {
    color: var(--tft-gold);
}

/* ── Individual comp row card ── */
.tft-comp-row {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
    margin-bottom: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
}
.tft-comp-row:hover {
    border-color: rgba(152,16,250,0.35);
    box-shadow: 0 4px 16px rgba(152,16,250,0.1);
    transform: translateY(-1px);
}
.tft-comp-row:focus {
    outline: 2px solid rgba(152,16,250,0.5);
    outline-offset: 2px;
}

/* Tier badge — left column */
.tft-comp-row-tier {
    width: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -1px;
}
.tft-comp-row-tier--s { background: var(--tft-tier-s); }
.tft-comp-row-tier--a { background: var(--tft-tier-a); }
.tft-comp-row-tier--b { background: var(--tft-tier-b); }
.tft-comp-row-tier--c { background: var(--tft-tier-c); }

/* Carry portrait blur */
.tft-comp-row-splash {
    width: 80px;
    flex-shrink: 0;
    background-size: cover;
    background-position: top center;
    position: relative;
}
.tft-comp-row-splash::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(19,23,41,0.15) 0%, var(--tft-bg-card) 100%);
}

/* Card inner content */
.tft-comp-row-inner {
    flex: 1;
    padding: 12px 14px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Header row: name + tags + button */
.tft-comp-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.tft-comp-row-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--tft-text-primary);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tft-comp-row-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Difficulty / level tags */
.tft-comp-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid;
}
.tft-comp-tag--hard {
    background: rgba(251,100,182,0.12);
    color: #fb64b6;
    border-color: rgba(251,100,182,0.35);
}
.tft-comp-tag--medium {
    background: rgba(251,146,60,0.12);
    color: #fb923c;
    border-color: rgba(251,146,60,0.35);
}
.tft-comp-tag--easy {
    background: rgba(34,197,94,0.12);
    color: #22c55e;
    border-color: rgba(34,197,94,0.35);
}
.tft-comp-tag--level {
    background: rgba(91,79,207,0.2);
    color: #a78bfa;
    border-color: rgba(91,79,207,0.45);
}

/* Expand/detail button */
.tft-comp-row-btn {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: #0d9488;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
    transition: background 0.15s;
}
.tft-comp-row-btn:hover {
    background: #0f766e;
}

/* Trait badges row */
.tft-comp-row-traits {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.tft-comp-trait-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px 2px 3px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid;
    line-height: 1;
}
.tft-comp-trait-badge img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    border-radius: 2px;
    flex-shrink: 0;
}
.tft-comp-trait-badge--gold {
    background: rgba(200,155,60,0.18);
    color: var(--tft-gold);
    border-color: rgba(200,155,60,0.4);
}
.tft-comp-trait-badge--chromatic {
    background: rgba(200,100,250,0.18);
    color: #d8b4fe;
    border-color: rgba(200,100,250,0.4);
}
.tft-comp-trait-badge--silver {
    background: rgba(148,163,184,0.18);
    color: #94a3b8;
    border-color: rgba(148,163,184,0.4);
}
.tft-comp-trait-badge--bronze {
    background: rgba(217,119,6,0.18);
    color: #d97706;
    border-color: rgba(217,119,6,0.4);
}
.tft-comp-trait-badge--off {
    background: rgba(255,255,255,0.04);
    color: var(--tft-text-muted);
    border-color: var(--tft-border);
}
.tft-comp-trait-more {
    font-size: 11px;
    color: var(--tft-text-muted);
    padding: 2px 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--tft-border);
    border-radius: 4px;
}

/* Body row: champs + stats */
.tft-comp-row-body {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}
.tft-comp-row-champs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    flex: 1;
}
.tft-comp-champ {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.tft-comp-champ-img {
    width: 42px;
    height: 42px;
    border-radius: 7px;
    background-size: cover;
    background-position: top center;
    background-color: var(--tft-bg-card-hover);
    border: 2px solid #9ca3af;
    flex-shrink: 0;
}
.tft-comp-champ--cost-2 .tft-comp-champ-img { border-color: #22c55e; }
.tft-comp-champ--cost-3 .tft-comp-champ-img { border-color: #3b82f6; }
.tft-comp-champ--cost-4 .tft-comp-champ-img { border-color: #a855f7; }
.tft-comp-champ--cost-5 .tft-comp-champ-img { border-color: #f59e0b; }
.tft-comp-champ-name {
    font-size: 10px;
    color: var(--tft-text-muted);
    text-align: center;
    max-width: 44px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

/* Stats (win rate / top4 / avg) */
.tft-comp-row-stats {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    align-items: flex-end;
    padding-bottom: 2px;
}
.tft-comp-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.tft-comp-stat-lbl {
    font-size: 10px;
    color: var(--tft-text-muted);
    white-space: nowrap;
}
.tft-comp-stat-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--tft-text-secondary);
    white-space: nowrap;
}

/* Empty state */
.tft-comps-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 64px 24px;
    color: var(--tft-text-muted);
    text-align: center;
    font-size: 15px;
}

/* ── Sidebar ── */
.tft-comps-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.tft-comps-sidebar-block {
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
    overflow: hidden;
}
.tft-comps-sidebar-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--tft-text-primary);
    letter-spacing: 0.8px;
    padding: 12px 16px;
    margin: 0;
    border-bottom: 2px solid var(--tft-gold);
}
.tft-comps-sidebar-links {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tft-comps-sidebar-links li {
    border-bottom: 1px solid var(--tft-border);
}
.tft-comps-sidebar-links li:last-child {
    border-bottom: none;
}
.tft-comps-sidebar-link {
    display: block;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--tft-text-secondary);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}
.tft-comps-sidebar-link:hover,
.tft-comps-sidebar-link.is-active {
    color: var(--tft-text-primary);
    background: var(--tft-bg-card-hover);
}
.tft-comps-sidebar-link.is-active {
    color: var(--tft-gold);
    border-left: 2px solid var(--tft-gold);
    padding-left: 14px;
}

/* Recent posts */
.tft-comps-recent-post {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    text-decoration: none;
    transition: background 0.15s;
    border-bottom: 1px solid var(--tft-border);
}
.tft-comps-recent-post:last-child {
    border-bottom: none;
}
.tft-comps-recent-post:hover {
    background: var(--tft-bg-card-hover);
}
.tft-comps-recent-thumb {
    width: 64px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--tft-bg-card-hover);
}
.tft-comps-recent-thumb--placeholder {
    background: var(--tft-bg-card-hover);
}
.tft-comps-recent-name {
    font-size: 12px;
    color: var(--tft-text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
    flex: 1;
}
.tft-comps-recent-post:hover .tft-comps-recent-name {
    color: var(--tft-text-primary);
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .tft-comps-layout {
        grid-template-columns: 1fr;
    }
    .tft-comps-sidebar {
        position: static;
    }
    .tft-comp-row-splash {
        width: 60px;
    }
}
@media (max-width: 640px) {
    .tft-comps-wrap {
        padding: 16px 0 40px;
    }
    .tft-comp-row-tier {
        width: 36px;
        font-size: 16px;
    }
    .tft-comp-row-splash {
        width: 48px;
    }
    .tft-comp-champ-img {
        width: 34px;
        height: 34px;
    }
    .tft-comp-champ-name {
        max-width: 36px;
    }
    .tft-comp-row-stats {
        display: none;
    }
    .tft-comps-filter-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
   COMPS PAGE — EXPAND PANEL
   ============================================================ */

/* Item wrapper (row + expand) */
.tft-comp-item {
    margin-bottom: 8px;
}
.tft-comp-item:last-child {
    margin-bottom: 0;
}

/* When open: square the bottom corners of the row card */
.tft-comp-item.is-open .tft-comp-row {
    border-radius: 10px 10px 0 0;
}

/* Toggle button (replaces the old <a> arrow) */
.tft-comp-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--tft-border);
    cursor: pointer;
    color: var(--tft-text-secondary);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
}
.tft-comp-toggle-btn:hover {
    background: rgba(255,255,255,0.12);
    color: var(--tft-text-primary);
    border-color: rgba(255,255,255,0.2);
}
.tft-toggle-arrow {
    display: block;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.tft-comp-item.is-open .tft-toggle-arrow {
    transform: rotate(90deg);
}

/* Expand panel */
.tft-comp-expand {
    display: none;
    background: #0d1020;
    border: 1px solid var(--tft-border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 16px 20px 20px;
}
.tft-comp-item.is-open .tft-comp-expand {
    display: block;
}

/* Two-column grid */
.tft-comp-exp-grid {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 20px;
    align-items: start;
}

/* Section block */
.tft-comp-exp-sec {
    margin-bottom: 16px;
}
.tft-comp-exp-sec:last-child {
    margin-bottom: 0;
}
.tft-comp-exp-sec-hd {
    font-size: 10px;
    font-weight: 700;
    color: var(--tft-text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* ── Hex board ── */
.tft-comp-exp-board {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 2px 0 4px;
}
.tft-comp-board-row {
    display: flex;
    gap: 3px;
}
.tft-comp-board-row--offset {
    margin-left: 27px;
}
.tft-comp-board-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.tft-comp-hex-stars {
    height: 13px;
    min-width: 50px;
    font-size: 9px;
    color: #fdc700;
    letter-spacing: -2px;
    line-height: 13px;
    text-align: center;
    white-space: nowrap;
}
.tft-comp-hex-outer {
    width: 50px;
    height: 57px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(31,37,67,0.4);
}
.tft-comp-hex-inner {
    width: 44px;
    height: 50px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background-color: var(--tft-bg-card);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    flex-shrink: 0;
}
/* Cost border colors */
.tft-comp-hex--cost-1 .tft-comp-hex-outer { background: #9ca3af; }
.tft-comp-hex--cost-2 .tft-comp-hex-outer { background: #22c55e; }
.tft-comp-hex--cost-3 .tft-comp-hex-outer { background: #3b82f6; }
.tft-comp-hex--cost-4 .tft-comp-hex-outer { background: #a855f7; }
.tft-comp-hex--cost-5 .tft-comp-hex-outer { background: #f59e0b; }
/* Items below hex portrait */
.tft-comp-hex-items {
    display: flex;
    gap: 1px;
    min-height: 16px;
    align-items: center;
    justify-content: center;
}
.tft-comp-hex-item {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background-size: cover;
    background-color: var(--tft-bg-card);
    border: 1px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
    display: inline-block;
}

/* ── Expand champion chip (early game + key carries) ── */
.tft-comp-exp-early,
.tft-comp-exp-carries {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}
.tft-comp-exp-champ {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}
.tft-comp-exp-champ-img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-size: 120%;
    background-position: center top;
    background-color: var(--tft-bg-card);
    border: 2px solid #9ca3af;
    flex-shrink: 0;
}
.tft-comp-exp-champ--cost-1 .tft-comp-exp-champ-img { border-color: #9ca3af; }
.tft-comp-exp-champ--cost-2 .tft-comp-exp-champ-img { border-color: #22c55e; }
.tft-comp-exp-champ--cost-3 .tft-comp-exp-champ-img { border-color: #3b82f6; }
.tft-comp-exp-champ--cost-4 .tft-comp-exp-champ-img { border-color: #a855f7; }
.tft-comp-exp-champ--cost-5 .tft-comp-exp-champ-img { border-color: #f59e0b; }
.tft-comp-exp-champ-name {
    font-size: 10px;
    color: var(--tft-text-secondary);
    text-align: center;
    max-width: 48px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Priority items pool ── */
.tft-comp-exp-ipool {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}
.tft-comp-exp-ipool-arrow {
    color: var(--tft-text-muted);
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}
.tft-comp-exp-item {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
    background-color: var(--tft-bg-card);
    flex-shrink: 0;
}
.tft-comp-exp-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tft-comp-exp-item-placeholder {
    width: 100%;
    height: 100%;
    background: var(--tft-border);
}

/* ── Augments grid ── */
.tft-comp-exp-augs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tft-comp-exp-aug {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(152,16,250,0.35);
    background-color: var(--tft-bg-card);
    flex-shrink: 0;
}
.tft-comp-exp-aug img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tft-comp-exp-aug-placeholder {
    width: 100%;
    height: 100%;
    background: var(--tft-border);
}

/* ── Traits list ── */
.tft-comp-exp-traits {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tft-comp-exp-trait {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
    border: 1px solid transparent;
    font-size: 12px;
    color: var(--tft-text-secondary);
}
.tft-comp-exp-trait img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}
.tft-comp-exp-trait--gold     { border-color: rgba(200,155,60,0.45);  color: var(--tft-gold); }
.tft-comp-exp-trait--chromatic{ border-color: rgba(152,16,250,0.45);  color: #c084fc; }
.tft-comp-exp-trait--silver   { border-color: rgba(148,163,184,0.3);  color: #94a3b8; }
.tft-comp-exp-trait--bronze   { border-color: rgba(180,120,60,0.35);  color: #cd8a4b; }

/* ── Key carries ── */
.tft-comp-exp-carry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.tft-comp-exp-carry-items {
    display: flex;
    gap: 2px;
}
.tft-comp-exp-carry-item {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background-size: cover;
    background-color: var(--tft-bg-card);
    border: 1px solid rgba(255,255,255,0.15);
    flex-shrink: 0;
    display: inline-block;
}

/* ── Action buttons footer ── */
.tft-comp-exp-footer {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--tft-border);
}
.tft-comp-exp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 22px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}
.tft-comp-exp-btn:hover {
    opacity: 0.82;
    transform: translateY(-1px);
}
.tft-comp-exp-btn--detail {
    background: rgba(192,57,43,0.85);
    color: #fff;
}
.tft-comp-exp-btn--detail:hover {
    background: rgba(231,76,60,0.9);
}
.tft-comp-exp-btn--copy {
    background: rgba(255,255,255,0.07);
    color: var(--tft-text-primary);
    border: 1px solid var(--tft-border);
}
.tft-comp-exp-btn--copy:hover {
    background: rgba(255,255,255,0.12);
    opacity: 1;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .tft-comp-exp-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 640px) {
    .tft-comp-exp-board {
        overflow-x: auto;
        padding-bottom: 4px;
    }
    .tft-comp-exp-footer {
        flex-direction: column;
    }
    .tft-comp-exp-btn {
        width: 100%;
        text-align: center;
    }
    .tft-comp-exp-grid {
        gap: 14px;
    }
}

/* ============================================================
   COMPS PAGE — EXPAND PANEL v2 (redesigned sections)
   ============================================================ */

/* Bottom row: early units + priority items side by side */
.tft-comp-exp-bottom-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.tft-comp-exp-sec--early  { flex: 0 0 auto; }
.tft-comp-exp-sec--items  { flex: 1 1 auto; min-width: 180px; }

/* Early game champs — no name label, slightly larger portrait */
.tft-comp-exp-early {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.tft-comp-exp-early .tft-comp-exp-champ-img {
    width: 48px;
    height: 48px;
}
.tft-comp-exp-early .tft-comp-exp-champ-name {
    display: none;
}

/* Key carries — card grid */
.tft-comp-exp-carries-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-start;
}
.tft-comp-exp-carry-card {
    flex: 0 0 auto;
    min-width: 120px;
}
.tft-comp-exp-carry-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tft-comp-exp-carry-portrait {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-size: 130%;
    background-position: center top;
    background-color: var(--tft-bg-card);
    border: 2px solid #9ca3af;
    flex-shrink: 0;
}
/* cost-colored portrait ring */
.tft-comp-exp-champ--cost-1 .tft-comp-exp-carry-portrait,
.tft-comp-exp-carry-portrait.tft-comp-exp-champ--cost-1 { border-color: #9ca3af; }
.tft-comp-exp-champ--cost-2 .tft-comp-exp-carry-portrait,
.tft-comp-exp-carry-portrait.tft-comp-exp-champ--cost-2 { border-color: #22c55e; }
.tft-comp-exp-champ--cost-3 .tft-comp-exp-carry-portrait,
.tft-comp-exp-carry-portrait.tft-comp-exp-champ--cost-3 { border-color: #3b82f6; }
.tft-comp-exp-champ--cost-4 .tft-comp-exp-carry-portrait,
.tft-comp-exp-carry-portrait.tft-comp-exp-champ--cost-4 { border-color: #a855f7; }
.tft-comp-exp-champ--cost-5 .tft-comp-exp-carry-portrait,
.tft-comp-exp-carry-portrait.tft-comp-exp-champ--cost-5 { border-color: #f59e0b; }

.tft-comp-exp-carry-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--tft-text-primary);
    white-space: nowrap;
}
.tft-comp-exp-carry-item-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.tft-comp-exp-carry-item-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.tft-comp-exp-carry-item-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-size: cover;
    background-color: var(--tft-bg-card);
    border: 1px solid rgba(255,255,255,0.18);
    flex-shrink: 0;
    display: inline-block;
}
.tft-comp-exp-carry-item-name {
    font-size: 11px;
    color: var(--tft-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

/* Traits — compact grid of icon+count badges */
.tft-comp-exp-trait-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.tft-comp-exp-tbadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px 3px 4px;
    border-radius: 5px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 11px;
    font-weight: 600;
    color: var(--tft-text-secondary);
    white-space: nowrap;
    cursor: default;
}
.tft-comp-exp-tbadge-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}
.tft-comp-exp-tbadge-count {
    line-height: 1;
}
.tft-comp-exp-tbadge--gold     { border-color: rgba(200,155,60,0.5);  color: var(--tft-gold);  background: rgba(200,155,60,0.08); }
.tft-comp-exp-tbadge--chromatic{ border-color: rgba(152,16,250,0.5);  color: #c084fc;           background: rgba(152,16,250,0.08); }
.tft-comp-exp-tbadge--silver   { border-color: rgba(148,163,184,0.35); color: #94a3b8;          background: rgba(148,163,184,0.05); }
.tft-comp-exp-tbadge--bronze   { border-color: rgba(180,120,60,0.4);  color: #cd8a4b;           background: rgba(180,120,60,0.06); }

@media (max-width: 640px) {
    .tft-comp-exp-bottom-row {
        flex-direction: column;
        gap: 14px;
    }
    .tft-comp-exp-carries-grid {
        gap: 12px;
    }
    .tft-comp-exp-carry-card {
        min-width: 100px;
    }
}

/* ============================================================
   PATCH NOTES PAGE
   ============================================================ */
.tft-patch-notes-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 32px 24px 64px;
    overflow-x: hidden;
}
/* Prevent any crawled content from breaking layout */
.tft-patch-notes-body * { max-width: 100%; box-sizing: border-box; }
.tft-patch-notes-header { margin-bottom: 28px; }
.tft-patch-notes-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(253,199,0,0.12);
    border: 1px solid rgba(253,199,0,0.35);
    color: #fdc700;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 16px;
}
.tft-patch-notes-title { color: var(--tft-text-primary); font-size: 28px; font-weight: 700; margin: 0 0 10px; }
.tft-patch-notes-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--tft-text-secondary);
    font-size: 13px;
    text-decoration: none;
}
.tft-patch-notes-source:hover { color: var(--tft-text-primary); }

/* Article body */
.tft-patch-notes-body {
    color: var(--tft-text-primary);
    font-size: 15px;
    line-height: 1.7;
    word-break: break-word;
    overflow-wrap: anywhere;
    overflow-x: hidden;
}
.tft-patch-notes-body h1,
.tft-patch-notes-body h2,
.tft-patch-notes-body h3 {
    color: var(--tft-text-primary);
    margin: 28px 0 12px;
    font-weight: 700;
}
.tft-patch-notes-body h2 { font-size: 20px; border-left: 3px solid var(--tft-gold); padding-left: 10px; }
.tft-patch-notes-body h3 { font-size: 16px; color: var(--tft-gold); }
.tft-patch-notes-body p { margin: 0 0 14px; color: var(--tft-text-secondary); }
.tft-patch-notes-body ul, .tft-patch-notes-body ol { padding-left: 20px; margin: 0 0 14px; color: var(--tft-text-secondary); }
.tft-patch-notes-body li { margin-bottom: 6px; }
.tft-patch-notes-body img { max-width: 100%; border-radius: 8px; height: auto; }
.tft-patch-notes-body a { color: var(--tft-gold); text-decoration: underline; }
.tft-patch-notes-body a:hover { color: #fff; }
.tft-patch-notes-body strong { color: var(--tft-text-primary); }
.tft-patch-notes-body table { border-collapse: collapse; width: 100%; margin-bottom: 16px; }
.tft-patch-notes-body th,
.tft-patch-notes-body td { border: 1px solid var(--tft-border); padding: 8px 12px; text-align: left; }
.tft-patch-notes-body th { background: var(--tft-bg-card); color: var(--tft-gold); }

.tft-patch-notes-empty { text-align: center; padding: 60px 0; color: var(--tft-text-secondary); }
.tft-patch-notes-empty a { color: var(--tft-gold); }

/* metatft.gg champion card grid */
.tft-patch-notes-body .champions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
}
.tft-patch-notes-body .champion__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 8px;
    padding: 8px;
    width: 72px;
    transition: border-color 0.15s;
}
.tft-patch-notes-body .champion__item:hover { border-color: var(--tft-gold); }
.tft-patch-notes-body .champion__item .image img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
}
.tft-patch-notes-body .champion__item .name {
    color: var(--tft-text-primary);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 64px;
}
.tft-patch-notes-body .champion__item.cost-1 { border-color: #9ca3af; }
.tft-patch-notes-body .champion__item.cost-2 { border-color: #22c55e; }
.tft-patch-notes-body .champion__item.cost-3 { border-color: #3b82f6; }
.tft-patch-notes-body .champion__item.cost-4 { border-color: #a855f7; }
.tft-patch-notes-body .champion__item.cost-5 { border-color: #f59e0b; }

/* stat icon inline (AD, AP, AS etc.) */
.tft-patch-notes-body li img,
.tft-patch-notes-body p img,
.tft-patch-notes-body span img {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    border-radius: 2px;
    vertical-align: middle;
    display: inline;
    margin: 0 2px;
}

/* blockquote */
.tft-patch-notes-body blockquote {
    border-left: 3px solid var(--tft-purple);
    background: rgba(91,79,207,0.08);
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 0 6px 6px 0;
    color: var(--tft-text-secondary);
    font-style: italic;
}

@media (max-width: 640px) {
    .tft-patch-notes-wrap { padding: 20px 16px 48px; }
    .tft-patch-notes-title { font-size: 22px; }
}


/* ============================================================
   COMP DETAIL PAGE
   ============================================================ */
body.tft-page-comp-detail { background: var(--tft-bg-base); }
.tft-comp-detail-wrap { max-width: 1280px; margin: 0 auto; padding: 20px 16px 64px; }

/* Page grid: main (1fr) + right sidebar (260px) */
.tft-cd-page-grid { display: grid; grid-template-columns: 1fr 260px; gap: 24px; align-items: flex-start; }
.tft-cd-main { min-width: 0; }

/* Breadcrumb */
.tft-cd-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tft-text-muted); margin-bottom: 14px; }
.tft-cd-breadcrumb a { color: var(--tft-text-muted); text-decoration: none; }
.tft-cd-breadcrumb a:hover { color: var(--tft-text-secondary); }

/* Main card */
.tft-cd-card { background: var(--tft-bg-card); border: 1px solid rgba(152,16,250,0.25); border-radius: 14px; overflow: hidden; }

/* TITLEBAR (H1 + stats) */
.tft-cd-titlebar { padding: 18px 22px 14px; border-bottom: 1px solid var(--tft-border); }
.tft-cd-titlebar-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tft-cd-name { font-size: 22px; font-weight: 700; color: var(--tft-text-primary); margin: 0; }
.tft-cd-builder-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tft-gold); text-decoration: none; border: 1px solid rgba(200,155,60,0.35); border-radius: 7px; padding: 5px 12px; white-space: nowrap; transition: background 0.15s; }
.tft-cd-builder-link:hover { background: rgba(200,155,60,0.1); }

/* Stats bar */
.tft-cd-statsbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.tft-cd-stat-cell { display: flex; flex-direction: column; align-items: center; padding: 6px 18px; }
.tft-cd-stat-label { font-size: 11px; color: var(--tft-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
.tft-cd-stat-val { font-size: 18px; font-weight: 700; color: var(--tft-text-primary); }
.tft-cd-stat-val--green { color: #22c55e; }
.tft-cd-stat-divider { width: 1px; height: 28px; background: var(--tft-border); flex-shrink: 0; }

/* Tier badges */
.tft-cd-tier-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border-radius: 5px; padding: 2px 7px; text-transform: uppercase; }
.tft-cd-tier-badge--s  { background: rgba(224,123,57,0.2);  color: #e07b39; border: 1px solid rgba(224,123,57,0.5); }
.tft-cd-tier-badge--a  { background: rgba(59,130,246,0.2);  color: #3b82f6; border: 1px solid rgba(59,130,246,0.5); }
.tft-cd-tier-badge--b  { background: rgba(34,197,94,0.2);   color: #22c55e; border: 1px solid rgba(34,197,94,0.5); }
.tft-cd-tier-badge--c  { background: rgba(107,114,128,0.2); color: #9ca3af; border: 1px solid rgba(107,114,128,0.5); }
.tft-cd-tier-badge--lg { font-size: 16px; padding: 4px 12px; border-radius: 7px; }
.tft-cd-tier-badge--sm { font-size: 10px; padding: 1px 5px; border-radius: 4px; }

/* INFO BAR */
.tft-cd-infobar { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; border-bottom: 1px solid var(--tft-border); flex-wrap: wrap; gap: 10px; }
.tft-cd-infobar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tft-cd-infobar-right { display: flex; align-items: center; gap: 10px; }
.tft-cd-traits-row { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.tft-cd-trait-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 3px 8px; border: 1px solid transparent; }
.tft-cd-trait-chip img { border-radius: 3px; flex-shrink: 0; }
.tft-cd-trait-chip em { font-style: normal; font-weight: 700; opacity: 0.85; }
.tft-cd-trait-chip--gold      { background: rgba(200,155,60,0.15); color: var(--tft-gold);       border-color: rgba(200,155,60,0.4); }
.tft-cd-trait-chip--chromatic { background: rgba(152,16,250,0.15); color: #a855f7;               border-color: rgba(152,16,250,0.4); }
.tft-cd-trait-chip--silver    { background: rgba(156,163,175,0.12); color: #d1d5db;              border-color: rgba(156,163,175,0.3); }
.tft-cd-trait-chip--bronze    { background: rgba(180,113,58,0.12); color: #c07a3a;               border-color: rgba(180,113,58,0.3); }
.tft-cd-trait-chip--off       { background: rgba(107,114,128,0.1); color: var(--tft-text-muted); border-color: transparent; }
.tft-cd-trait-more { font-size: 12px; color: var(--tft-text-muted); padding: 3px 6px; }
.tft-cd-carry-label { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--tft-text-secondary); }
.tft-cd-diff { font-size: 11px; font-weight: 700; border-radius: 5px; padding: 2px 8px; }
.tft-cd-diff--easy   { background: rgba(34,197,94,0.12);  color: #22c55e; }
.tft-cd-diff--medium { background: rgba(245,158,11,0.12); color: #f59e0b; }
.tft-cd-diff--hard   { background: rgba(239,68,68,0.12);  color: #ef4444; }
.tft-cd-level-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--tft-text-secondary); background: rgba(255,255,255,0.05); border-radius: 6px; padding: 3px 8px; }

/* CHAMPION ROW */
.tft-cd-champ-row { display: flex; align-items: flex-start; gap: 8px; padding: 16px 20px; border-bottom: 1px solid var(--tft-border); overflow-x: auto; }
.tft-cd-champ-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; flex-shrink: 0; }
.tft-cd-champ-avatar { position: relative; width: 64px; height: 64px; border-radius: 10px; border: 2.5px solid; overflow: hidden; background: var(--tft-bg-base); flex-shrink: 0; }
.tft-cd-champ-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tft-cd-champ-stars { position: absolute; top: 2px; left: 0; right: 0; text-align: center; font-size: 9px; color: #fdc700; line-height: 1; letter-spacing: -1px; }
.tft-cd-champ-cost { position: absolute; bottom: 2px; right: 3px; font-size: 9px; font-weight: 700; color: #fff; border-radius: 3px; padding: 0 3px; line-height: 14px; }
.tft-cd-champ-name { font-size: 10px; color: var(--tft-text-secondary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64px; }
.tft-cd-champ-items { display: flex; gap: 2px; justify-content: center; min-height: 22px; }
.tft-cd-champ-items--empty { min-height: 22px; }
.tft-cd-champ-item-icon { width: 20px; height: 20px; border-radius: 4px; overflow: hidden; background: var(--tft-bg-base); border: 1px solid var(--tft-border); }
.tft-cd-champ-item-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* FORMATION HEADER */
.tft-cd-formation-header { display: flex; align-items: center; padding: 12px 22px 8px; border-bottom: 1px solid var(--tft-border); }
.tft-cd-formation-title { font-size: 14px; font-weight: 700; color: var(--tft-text-primary); letter-spacing: 0.06em; text-transform: uppercase; }

/* 2-COL LAYOUT (board+early left, sidebar right) */
.tft-cd-twocol { display: grid; grid-template-columns: 1fr 250px; }
.tft-cd-left-col { padding: 20px 16px 20px 20px; border-right: 1px solid var(--tft-border); }
.tft-cd-sidebar { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

/* HEX BOARD */
.tft-cd-board-wrap { margin-bottom: 20px; }
.tft-cd-board-label { font-size: 11px; color: var(--tft-text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.tft-cd-hexgrid { display: flex; flex-direction: column; gap: 4px; }
.tft-cd-hexrow { display: flex; gap: 6px; }
.tft-cd-hexrow--offset { padding-left: 28px; }
.tft-cd-hex { position: relative; width: 56px; height: 64px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding-bottom: 4px; }
.tft-cd-hex-img { width: 50px; height: 50px; border-radius: 50%; border: 2px solid; overflow: hidden; background: var(--tft-bg-base); position: absolute; top: 4px; left: 3px; }
.tft-cd-hex-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tft-cd-hex-lbl { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; font-size: 8px; color: var(--tft-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.tft-cd-hex--empty .tft-cd-hex-img { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
.tft-cd-hex--c1 .tft-cd-hex-img { border-color: #9ca3af; filter: drop-shadow(0 0 4px rgba(156,163,175,0.4)); }
.tft-cd-hex--c2 .tft-cd-hex-img { border-color: #22c55e; filter: drop-shadow(0 0 5px rgba(34,197,94,0.5)); }
.tft-cd-hex--c3 .tft-cd-hex-img { border-color: #3b82f6; filter: drop-shadow(0 0 5px rgba(59,130,246,0.5)); }
.tft-cd-hex--c4 .tft-cd-hex-img { border-color: #a855f7; filter: drop-shadow(0 0 6px rgba(168,85,247,0.55)); }
.tft-cd-hex--c5 .tft-cd-hex-img { border-color: #f59e0b; filter: drop-shadow(0 0 8px rgba(245,158,11,0.65)); }

/* EARLY GAME + PRIORITY ITEMS ROW */
.tft-cd-early-items-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tft-cd-block-label { font-size: 10px; font-weight: 700; color: var(--tft-text-muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.tft-cd-block-label--center { text-align: center; margin-bottom: 14px; }
.tft-cd-early-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.tft-cd-early-unit { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tft-cd-early-avatar { width: 48px; height: 48px; border-radius: 8px; border: 2px solid; overflow: hidden; background: var(--tft-bg-base); }
.tft-cd-early-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tft-cd-early-name { font-size: 9px; color: var(--tft-text-muted); text-align: center; max-width: 48px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tft-cd-pitem-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tft-cd-pitem-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tft-cd-pitem { width: 44px; height: 44px; border-radius: 8px; border: 1.5px solid rgba(240,177,0,0.5); background: linear-gradient(131.6deg, #fdc700 0%, #d08700 100%); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.tft-cd-pitem img { width: 40px; height: 40px; object-fit: cover; display: block; border-radius: 6px; }
.tft-cd-pitem-name { font-size: 9px; color: var(--tft-text-muted); text-align: center; max-width: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tft-cd-arrow { font-size: 16px; color: var(--tft-text-muted); margin-top: 0; }

/* SIDEBAR BLOCKS */
.tft-cd-sb-block { display: flex; flex-direction: column; }
.tft-cd-aug-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tft-cd-aug-chip { width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: var(--tft-bg-base); border: 1px solid var(--tft-border); }
.tft-cd-aug-chip--priority { border-color: rgba(168,85,247,0.5); }
.tft-cd-aug-chip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tft-cd-sb-traits { display: flex; flex-direction: column; gap: 4px; }
.tft-cd-sb-trait { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; }
.tft-cd-sb-trait-icon { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tft-cd-sb-trait-icon img { border-radius: 3px; }
.tft-cd-sb-trait-name { flex: 1; font-size: 12px; color: var(--tft-text-secondary); }
.tft-cd-sb-trait-count { font-size: 12px; font-weight: 700; color: var(--tft-text-primary); }
.tft-cd-sb-trait--gold      { background: rgba(200,155,60,0.1); }
.tft-cd-sb-trait--chromatic { background: rgba(152,16,250,0.1); }
.tft-cd-sb-trait--silver    { background: rgba(156,163,175,0.08); }
.tft-cd-sb-trait--bronze    { background: rgba(180,113,58,0.08); }
.tft-cd-sb-trait--off       { background: transparent; }
.tft-cd-stats-list { display: flex; flex-direction: column; gap: 6px; }
.tft-cd-stat-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--tft-text-secondary); padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.tft-cd-stat-row strong { color: var(--tft-text-primary); }

/* CORE CARRIES SECTION */
.tft-cd-carries-section { padding: 20px 22px; border-top: 1px solid var(--tft-border); }
.tft-cd-carries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tft-cd-carry-card { display: flex; align-items: flex-start; gap: 12px; background: var(--tft-bg-card-hover); border: 1px solid var(--tft-border); border-radius: 10px; padding: 14px; }
.tft-cd-carry-avatar { width: 56px; height: 56px; border-radius: 10px; border: 2px solid; overflow: hidden; background: var(--tft-bg-base); flex-shrink: 0; }
.tft-cd-carry-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tft-cd-carry-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tft-cd-carry-name { font-size: 13px; font-weight: 700; color: var(--tft-text-primary); }
.tft-cd-carry-items { display: flex; flex-direction: column; gap: 4px; }
.tft-cd-carry-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--tft-text-secondary); }
.tft-cd-carry-item img { border-radius: 4px; flex-shrink: 0; }

/* RELATED COMPS (in main card) */
.tft-cd-related { padding: 20px 22px; border-top: 1px solid var(--tft-border); }
.tft-cd-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tft-cd-related-card { display: flex; flex-direction: column; gap: 9px; background: var(--tft-bg-card-hover); border: 1px solid var(--tft-border); border-radius: 10px; padding: 12px; text-decoration: none; transition: border-color 0.15s; }
.tft-cd-related-card:hover { border-color: rgba(152,16,250,0.4); }
.tft-cd-related-header { display: flex; align-items: center; gap: 7px; }
.tft-cd-related-name { font-size: 11px; font-weight: 600; color: var(--tft-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tft-cd-related-units { display: flex; flex-wrap: wrap; gap: 3px; }
.tft-cd-related-unit { width: 30px; height: 30px; border-radius: 6px; border: 1.5px solid; overflow: hidden; background: var(--tft-bg-base); }
.tft-cd-related-unit img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* RIGHT PAGE SIDEBAR */
.tft-cd-page-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; }
.tft-cd-sb-widget { background: var(--tft-bg-card); border: 1px solid rgba(152,16,250,0.2); border-radius: 12px; overflow: hidden; }
.tft-cd-sb-widget-title { font-size: 11px; font-weight: 700; color: var(--tft-text-muted); letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 16px 10px; border-bottom: 1px solid var(--tft-border); background: rgba(255,255,255,0.02); }
.tft-cd-sb-menu { list-style: none; margin: 0; padding: 6px 0; }
.tft-cd-sb-menu-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 16px; font-size: 13px; color: var(--tft-text-secondary); text-decoration: none; transition: background 0.12s, color 0.12s; }
.tft-cd-sb-menu-link:hover { background: rgba(152,16,250,0.08); color: var(--tft-text-primary); }
.tft-cd-sb-menu-link.active { color: #a855f7; background: rgba(152,16,250,0.1); font-weight: 600; }
.tft-cd-sb-comps { display: flex; flex-direction: column; }
.tft-cd-sb-comp-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background 0.12s; }
.tft-cd-sb-comp-link:last-child { border-bottom: none; }
.tft-cd-sb-comp-link:hover { background: rgba(152,16,250,0.07); }
.tft-cd-sb-comp-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tft-cd-sb-comp-name { font-size: 12px; font-weight: 600; color: var(--tft-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tft-cd-sb-comp-units { display: flex; gap: 3px; }
.tft-cd-sb-unit { width: 24px; height: 24px; border-radius: 5px; border: 1.5px solid; overflow: hidden; background: var(--tft-bg-base); }
.tft-cd-sb-unit img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .tft-cd-page-grid { grid-template-columns: 1fr; }
    .tft-cd-page-sidebar { position: static; }
    .tft-cd-twocol { grid-template-columns: 1fr; }
    .tft-cd-left-col { border-right: none; border-bottom: 1px solid var(--tft-border); }
    .tft-cd-carries-grid { grid-template-columns: repeat(2, 1fr); }
    .tft-cd-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .tft-cd-titlebar { padding: 14px 16px 12px; }
    .tft-cd-name { font-size: 18px; }
    .tft-cd-statsbar { gap: 0; }
    .tft-cd-stat-cell { padding: 5px 10px; }
    .tft-cd-stat-val { font-size: 15px; }
    .tft-cd-infobar { padding: 10px 14px; }
    .tft-cd-champ-row { padding: 12px 14px; gap: 6px; }
    .tft-cd-champ-chip { width: 58px; }
    .tft-cd-champ-avatar { width: 56px; height: 56px; }
    .tft-cd-early-items-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .tft-comp-detail-wrap { padding: 12px 10px 48px; }
    .tft-cd-titlebar-top { flex-direction: column; align-items: flex-start; gap: 8px; }
    .tft-cd-statsbar { justify-content: center; }
    .tft-cd-stat-divider { display: none; }
    .tft-cd-stat-cell { padding: 4px 12px; border: 1px solid var(--tft-border); border-radius: 8px; margin: 2px; }
    .tft-cd-carries-grid { grid-template-columns: 1fr; }
    .tft-cd-related-grid { grid-template-columns: repeat(2, 1fr); }
    .tft-cd-hexrow--offset { padding-left: 24px; }
    .tft-cd-hex { width: 46px; height: 52px; }
    .tft-cd-hex-img { width: 40px; height: 40px; }
    .tft-cd-hexrow { gap: 4px; }
}

/* ============================================================
   ARTICLE DETAIL PAGE (TFT categories)
   ============================================================ */
.tft-article-detail {
    color: var(--tft-text-primary);
    line-height: 1.7;
    font-size: 15px;
}

/* ---- Breadcrumbs ---- */
.tft-article-detail .breadcrumbs {
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.tft-article-detail .breadcrumbs li {
    color: var(--tft-text-muted);
    font-size: 13px;
}
.tft-article-detail .breadcrumbs li + li::before {
    content: '›';
    color: var(--tft-text-muted);
    margin-right: 6px;
}
.tft-article-detail .breadcrumbs a {
    color: var(--tft-gold);
    text-decoration: none;
}
.tft-article-detail .breadcrumbs a:hover {
    color: #fde68a;
}

/* ---- Article Title ---- */
.tft-article-detail .article-title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 16px;
    padding: 0;
    border: none;
}
.tft-article-detail .sub-title {
    font-size: 15px;
    color: var(--tft-text-muted);
    margin: 0 0 8px;
}

/* ---- Author Meta ---- */
.tft-article-detail .thread-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
}
.tft-article-detail .detail-info-block {
    display: flex;
    align-items: center;
    gap: 12px;
}
.tft-article-detail .detail-info-block img.rounded-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}
.tft-article-detail .author-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--tft-text-primary);
}
.tft-article-detail .post-date {
    font-size: 12px;
    color: var(--tft-text-muted);
}
.tft-article-detail .small {
    font-size: 12px;
    color: var(--tft-text-muted);
}

/* ---- Summary / Sapo ---- */
.tft-article-detail .txt-head.sapo {
    font-size: 16px;
    font-weight: 600;
    color: var(--tft-text-secondary);
    padding: 16px 20px;
    background: rgba(91,79,207,0.08);
    border-left: 3px solid var(--tft-purple);
    border-radius: 0 10px 10px 0;
    margin: 0 0 24px;
    line-height: 1.6;
}

/* ---- Table of Contents ---- */
.tft-article-detail .table_content_elm,
.tft-article-detail .toc-container {
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-left: 3px solid var(--tft-purple);
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.tft-article-detail .toc_title {
    font-size: 15px;
    font-weight: 700;
    color: var(--tft-gold);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tft-article-detail nav#toc_detail ul,
.tft-article-detail nav#toc_left ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tft-article-detail nav#toc_detail ul ul,
.tft-article-detail nav#toc_left ul ul {
    padding-left: 20px;
    margin-top: 2px;
}
.tft-article-detail nav#toc_detail li,
.tft-article-detail nav#toc_left li {
    margin-bottom: 2px;
}
.tft-article-detail nav#toc_detail a,
.tft-article-detail nav#toc_left a {
    color: var(--tft-text-secondary);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    padding: 5px 10px;
    display: block;
    border-radius: 4px;
    transition: all 0.15s;
}
.tft-article-detail nav#toc_detail a:hover,
.tft-article-detail nav#toc_left a:hover {
    color: #fff;
    background: var(--tft-bg-card-hover);
}
.tft-article-detail nav#toc_detail a.active,
.tft-article-detail nav#toc_left a.active {
    color: var(--tft-gold);
    background: rgba(200, 155, 60, 0.08);
}
.tft-article-detail .toc_stt {
    color: var(--tft-purple);
    font-weight: 600;
    margin-right: 4px;
    font-size: 12px;
}
.tft-article-detail .toc_group_btns {
    float: right;
    margin-top: -24px;
}
.tft-article-detail .toc_group_btn {
    color: var(--tft-text-muted);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.12s;
}
.tft-article-detail .toc_group_btn:hover {
    color: var(--tft-gold);
    background: var(--tft-bg-card-hover);
}

/* ---- Article Content ---- */
.tft-article-detail .article-content {
    color: var(--tft-text-primary);
    font-size: 15px;
    line-height: 1.8;
}
.tft-article-detail .article-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 32px 0 14px;
    padding: 0 0 8px;
    border-bottom: 2px solid var(--tft-purple);
}
.tft-article-detail .article-content h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--tft-text-primary);
    margin: 24px 0 10px;
}
.tft-article-detail .article-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--tft-text-secondary);
    margin: 20px 0 8px;
}
.tft-article-detail .article-content p {
    margin: 0 0 16px;
}
.tft-article-detail .article-content a:not(.champion__item):not(.tft-champ-name-cell) {
    color: var(--tft-purple);
    text-decoration: underline;
    transition: color 0.12s;
}
.tft-article-detail .article-content a:hover {
    color: #a78bfa;
}
.tft-article-detail .article-content ul,
.tft-article-detail .article-content ol {
    margin: 0 0 16px;
    padding-left: 24px;
}
.tft-article-detail .article-content li {
    margin-bottom: 6px;
}
.tft-article-detail .article-content strong {
    color: #fff;
    font-weight: 700;
}
.tft-article-detail .article-content em {
    color: var(--tft-text-secondary);
}
.tft-article-detail .article-content p {
    color: var(--tft-text-primary);
}
.tft-article-detail .article-content li {
    color: var(--tft-text-primary);
}
.tft-article-detail .article-content img {
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 6px;
}
.tft-article-detail .article-content img[width="13"],
.tft-article-detail .article-content img[width="14"],
.tft-article-detail .article-content img[width="15"],
.tft-article-detail .article-content img[width="16"],
.tft-article-detail .article-content img[width="18"],
.tft-article-detail .article-content img[width="20"] {
    display: inline !important;
    width: 13px !important;
    height: auto !important;
    vertical-align: middle !important;
    margin: 0 1px !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}
.tft-article-detail .article-content img[src*="trait_icon"] {
    display: inline !important;
    width: 24px !important;
    height: auto !important;
    vertical-align: middle !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}
.tft-article-detail .article-content img.aligncenter {
    display: block !important;
    margin: 16px auto !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.tft-article-detail .article-content .champion__item .image img,
.tft-article-detail .article-content .champions .image img {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    display: block;
    width: 64px;
    height: auto;
}
.tft-article-detail .article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
    overflow: hidden;
}
.tft-article-detail .article-content th {
    background: #1f1a3d;
    color: var(--tft-gold);
    font-weight: 700;
    font-size: 14px;
    padding: 10px 14px;
    text-align: center;
    border-bottom: 1px solid var(--tft-border);
}
.tft-article-detail .article-content td {
    padding: 10px 14px;
    border-bottom: 1px solid rgba(31,37,67,0.6);
    color: var(--tft-text-primary);
    font-size: 14px;
}
.tft-article-detail .article-content tr:last-child td {
    border-bottom: none;
}
.tft-article-detail .article-content tr:hover td {
    background: rgba(43,36,79,0.3);
}
.tft-article-detail .article-content blockquote {
    border-left: 3px solid var(--tft-purple);
    background: rgba(91,79,207,0.06);
    padding: 12px 18px;
    margin: 16px 0;
    border-radius: 0 8px 8px 0;
    color: var(--tft-text-secondary);
    font-style: italic;
}
.tft-article-detail .article-content hr {
    border: none;
    height: 1px;
    background: var(--tft-border);
    margin: 24px 0;
}

/* ---- Champion cards within content (metatft.gg style) ---- */
.tft-article-detail .article-content .champions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    margin: 16px 0;
}
.tft-article-detail .article-content .champion__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
    padding: 12px 8px 10px;
    text-decoration: none;
    transition: all 0.12s ease;
}
.tft-article-detail .article-content .champion__item:hover {
    border-color: var(--tft-purple);
    background: var(--tft-bg-card-hover);
    transform: translateY(-2px);
}
.tft-article-detail .article-content .champion__item .image {
    width: 56px;
    height: 66px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid rgba(194,122,255,0.5);
    background: linear-gradient(130deg, #155dfc, #9810fa, #e60076);
}
.tft-article-detail .article-content .champion__item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0;
    box-shadow: none;
}
.tft-article-detail .article-content .champion__item .name {
    font-size: 12px;
    font-weight: 600;
    color: var(--tft-text-primary);
    text-align: center;
}
/* Cost-colored borders */
.tft-article-detail .article-content .champion__item.cost-1 .image { border-color: #9ca3af; }
.tft-article-detail .article-content .champion__item.cost-2 .image { border-color: #22c55e; }
.tft-article-detail .article-content .champion__item.cost-3 .image { border-color: #3b82f6; }
.tft-article-detail .article-content .champion__item.cost-4 .image { border-color: #a855f7; }
.tft-article-detail .article-content .champion__item.cost-5 .image { border-color: #f59e0b; }

/* ---- Source / Attribution ---- */
.tft-article-detail .source,
.tft-article-detail .article-source {
    padding: 12px 16px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
    margin: 20px 0;
    font-size: 13px;
    color: var(--tft-text-muted);
}
.tft-article-detail .source a,
.tft-article-detail .article-source a {
    color: var(--tft-gold);
    text-decoration: none;
}

/* ---- Tags ---- */
.tft-article-detail .tags,
.tft-article-detail .article-tags {
    margin: 16px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.tft-article-detail .tags a,
.tft-article-detail .article-tags a {
    display: inline-block;
    padding: 5px 12px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 6px;
    font-size: 12px;
    color: var(--tft-text-secondary);
    text-decoration: none;
    transition: all 0.12s;
}
.tft-article-detail .tags a:hover,
.tft-article-detail .article-tags a:hover {
    border-color: var(--tft-purple);
    color: #fff;
}

/* ---- Comments ---- */
.tft-article-detail #news__comment {
    margin: 24px 0;
    padding: 20px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
}
.tft-article-detail #news__comment label {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    display: block;
}
.tft-article-detail .form_comment textarea {
    width: 100%;
    box-sizing: border-box;
    background: #1f1a3d;
    border: 1px solid rgba(152,16,250,0.3);
    border-radius: 8px;
    color: var(--tft-text-primary);
    padding: 12px;
    font-size: 14px;
    outline: none;
}
.tft-article-detail .form_comment textarea:focus {
    border-color: rgba(152,16,250,0.6);
}
.tft-article-detail .btn-comment {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}
.tft-article-detail .btn-comment:hover {
    opacity: 0.88;
}

/* ---- Rating ---- */
.tft-article-detail .article-rating,
.tft-article-detail .rating {
    margin: 20px 0;
    padding: 16px 20px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
}

/* ---- Share buttons ---- */
.tft-article-detail .share-button {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tft-article-detail .btn_shares {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ---- Related articles ---- */
.tft-article-detail .article_related_list,
.tft-article-detail .related-posts {
    margin: 20px 0;
    padding: 16px 20px;
    background: var(--tft-bg-card);
    border: 1px solid var(--tft-border);
    border-radius: 10px;
}
.tft-article-detail .article_related_list h3,
.tft-article-detail .related-posts h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--tft-gold);
    margin: 0 0 12px;
}
.tft-article-detail .article_related_list ul,
.tft-article-detail .related-posts ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tft-article-detail .article_related_list li,
.tft-article-detail .related-posts li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(31,37,67,0.5);
}
.tft-article-detail .article_related_list li:last-child,
.tft-article-detail .related-posts li:last-child {
    border-bottom: none;
}
.tft-article-detail .article_related_list a,
.tft-article-detail .related-posts a {
    color: var(--tft-text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.12s;
}
.tft-article-detail .article_related_list a:hover,
.tft-article-detail .related-posts a:hover {
    color: var(--tft-gold);
}

/* ============================================================
   ARTICLE DETAIL — Responsive
   ============================================================ */
@media (max-width: 1024px) {
    .tft-article-detail .article-title {
        font-size: 24px;
    }
    .tft-article-detail .article-content h2 {
        font-size: 20px;
    }
}
@media (max-width: 640px) {
    .tft-article-detail .article-title {
        font-size: 20px;
    }
    .tft-article-detail .article-content {
        font-size: 14px;
    }
    .tft-article-detail .article-content h2 {
        font-size: 18px;
    }
    .tft-article-detail .article-content .champions {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
    }
    .tft-article-detail .breadcrumbs {
        font-size: 12px;
        padding: 10px 12px;
    }
    .tft-article-detail .txt-head.sapo {
        font-size: 15px;
        padding: 12px 16px;
    }
}