/* =========================================================
   HLAVNÍ STYLY & OVLÁDACÍ PRVKY
   ========================================================= */
.leaderboards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.2rem;
    margin-bottom: 2.5rem;
}

.leader-card {
    background: linear-gradient(145deg, #161616 0%, #0d0d0d 100%);
    border: 1px solid #262626;
    border-top: 3px solid #ff4b0b;
    border-radius: 6px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.leader-card:hover {
    transform: translateY(-3px);
    border-color: #ff4b0b;
}

.leader-icon-badge {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: rgba(255, 75, 11, 0.1);
    border: 1px solid rgba(255, 75, 11, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.leader-info {
    flex-grow: 1;
    overflow: hidden;
}

.leader-category {
    font-size: 0.72rem;
    color: #888;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.1rem;
}

.leader-name {
    font-family: 'Teko', sans-serif;
    font-size: 1.6rem;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leader-team-tag {
    font-size: 0.75rem;
    color: #ff4b0b;
    font-weight: 600;
}

.leader-value {
    font-family: 'Teko', sans-serif;
    font-size: 2rem;
    line-height: 0.9;
    color: #fff;
    text-align: right;
}

/* VYHLEDÁVACÍ A FILTRAČNÍ LIŠTA */
.controls-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    background: #111111;
    border: 1px solid #222222;
    padding: 0.8rem 1.2rem;
    border-radius: 6px;
    margin-bottom: 2rem;
}

.search-box {
    position: relative;
    flex: 1;
    min-width: 250px;
}

.search-input {
    width: 100%;
    background: #181818;
    border: 1px solid #333333;
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    padding: 0.6rem 1rem 0.6rem 2.2rem;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s ease;
}

.search-input:focus {
    border-color: #ff4b0b;
}

.search-icon-svg {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 0.9rem;
}

.filter-buttons {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.filter-btn {
    background: #181818;
    border: 1px solid #2b2b2b;
    color: #888888;
    font-family: 'Teko', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.7rem;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-btn:hover {
    color: #ffffff;
    border-color: #444;
}

.filter-btn.active {
    background: #ff4b0b;
    border-color: #ff4b0b;
    color: #000000;
    font-weight: bold;
}

.compare-trigger-btn {
    background: rgba(255, 75, 11, 0.15);
    border: 1px solid #ff4b0b;
    color: #ff4b0b;
    font-family: 'Teko', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.8rem;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.compare-trigger-btn:hover {
    background: #ff4b0b;
    color: #000;
}

/* MŘÍŽKA TÝMŮ */
.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
}

.team-card {
    background: #101010;
    border: 1px solid #222222;
    border-top: 3px solid var(--team-color, #ff4b0b);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.team-card:hover {
    transform: translateY(-4px);
    border-color: var(--team-color, #ff4b0b);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 15px color-mix(in srgb, var(--team-color) 25%, transparent);
}

.team-card.hidden {
    display: none !important;
}

.team-banner {
    position: relative;
    height: 160px;
    background: #080808;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #1f1f1f;
    overflow: hidden;
    cursor: pointer;
}

.team-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(14px) opacity(0.22);
    transform: scale(1.2);
    transition: opacity 0.3s ease;
}

.team-banner:hover .team-banner-bg {
    opacity: 0.35;
}

.team-logo-img {
    position: relative;
    z-index: 2;
    height: 125px;
    width: auto;
    max-width: 85%;
    object-fit: contain;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.8));
    transition: transform 0.3s ease;
}

.team-banner:hover .team-logo-img {
    transform: scale(1.08);
}

.team-banner-badge {
    position: absolute;
    bottom: 8px;
    right: 10px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid #333;
    color: var(--team-color, #ff4b0b);
    font-size: 0.68rem;
    font-weight: bold;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    z-index: 3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: border-color 0.2s;
}

.team-banner:hover .team-banner-badge {
    border-color: var(--team-color, #ff4b0b);
}

.team-body {
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}

.team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.team-name {
    font-family: 'Teko', sans-serif;
    font-size: 2.2rem;
    line-height: 1.05;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    word-spacing: 0.22em;
    margin: 0;
}

.team-header-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.team-record-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #b8b8b8;
    font-family: 'Teko', sans-serif;
    font-size: 1.05rem;
    padding: 0.1rem 0.5rem;
    border-radius: 3px;
    letter-spacing: 0.5px;
    word-spacing: 0.15em;
    white-space: nowrap;
}

.team-tag {
    background: color-mix(in srgb, var(--team-color) 12%, #141414);
    color: var(--team-color, #ff4b0b);
    font-family: 'Teko', sans-serif;
    font-size: 1.15rem;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--team-color, #ff4b0b);
    border-radius: 3px;
    letter-spacing: 1px;
}

.roster-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.8rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.roster-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #161616;
    border-left: 2px solid #2d2d2d;
    padding: 0.4rem 0.7rem;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.roster-row:hover {
    background: color-mix(in srgb, var(--team-color) 15%, #181818);
    border-left-color: var(--team-color, #ff4b0b);
    transform: translateX(3px);
}

.roster-row.captain {
    border-left: 3px solid var(--team-color, #ff4b0b);
    background: color-mix(in srgb, var(--team-color) 12%, #161616);
}

.roster-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    overflow: hidden;
}

.role-icon-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

.roster-role {
    color: var(--team-color, #ff4b0b);
    font-size: 0.75rem;
    font-weight: bold;
    width: 32px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.roster-name {
    color: #ffffff;
    font-family: 'Teko', sans-serif;
    font-size: 1.35rem;
    line-height: 1.15;
    letter-spacing: 0.035em;
    word-spacing: 0.2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.captain-badge {
    background: var(--team-color, #ff4b0b);
    color: #000000;
    font-size: 0.65rem;
    font-weight: bold;
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
    margin-left: 0.3rem;
    vertical-align: middle;
}

.roster-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.roster-rank {
    color: #777;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
}

.stats-hint {
    font-size: 0.65rem;
    color: var(--team-color, #ff4b0b);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.roster-row:hover .stats-hint {
    opacity: 1;
}

.subs-box {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.sub-pill {
    flex: 1;
    background: #131313;
    border: 1px dashed #282828;
    padding: 0.35rem 0.55rem;
    font-size: 0.75rem;
    color: #777;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.sub-pill:hover {
    border-color: var(--team-color, #ff4b0b);
    background: color-mix(in srgb, var(--team-color) 8%, #131313);
}

.sub-pill strong {
    color: #aaa;
    font-weight: 600;
}

.team-footer {
    border-top: 1px solid #1f1f1f;
    padding-top: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    color: #777;
    text-transform: uppercase;
}

.team-footer strong {
    color: var(--team-color, #ff4b0b);
    font-family: 'Teko', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 1px;
}

/* =========================================================
   SPOLEČNÝ STYL PRO MODÁLNÍ OKNA (POP-UP)
   ========================================================= */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    padding: 1.5rem;
}

.modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-box {
    background: #0d0d0d;
    border: 1px solid #282828;
    border-top: 4px solid var(--modal-color, #ff4b0b);
    border-radius: 8px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.8), 0 0 25px color-mix(in srgb, var(--modal-color) 20%, transparent);
    padding: 2rem;
    transform: scale(0.95);
    transition: transform 0.25s ease;
}

.modal-backdrop.active .modal-box {
    transform: scale(1);
}

.modal-close-btn {
    position: absolute;
    top: 1.2rem;
    right: 1.2rem;
    background: #181818;
    border: 1px solid #333;
    color: #aaa;
    font-size: 1.2rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.modal-close-btn:hover {
    background: #ff4b0b;
    color: #fff;
    border-color: #ff4b0b;
}

.modal-header-badges {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.6rem;
}

.modal-badge {
    background: #181818;
    border: 1px solid #333;
    color: #ccc;
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    
    /* Vlastnosti pridané pre podporu COL coinu */
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Štýl priamo pre obrázok COL Coinu vo vnútri odznaku */
.modal-badge img {
    height: 16px;
    width: auto;
    display: block;
}

.modal-badge.primary-badge {
    border-color: var(--modal-color, #ff4b0b);
    color: var(--modal-color, #ff4b0b);
}

.modal-main-title {
    font-family: 'Teko', sans-serif;
    font-size: 3rem;
    line-height: 1.05;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    word-spacing: 0.22em;
    margin: 0;
}

.modal-subtitle {
    color: var(--modal-color, #ff4b0b);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

.modal-strip {
    background: #141414;
    border: 1px solid #222;
    border-radius: 6px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 1rem 0.5rem;
    text-align: center;
    margin-bottom: 1.4rem;
}

.strip-item strong {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    line-height: 1;
    display: block;
    color: #ffffff;
}

.strip-item span {
    font-size: 0.72rem;
    color: #777;
    text-transform: uppercase;
    font-weight: 600;
}

.modal-sec-title {
    color: var(--modal-color, #ff4b0b);
    font-family: 'Teko', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 1.4rem 0 0.6rem;
}

.modal-stats-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}

.modal-stats-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}

.stat-box {
    background: #141414;
    border: 1px solid #222;
    padding: 0.8rem 0.6rem;
    border-radius: 4px;
    text-align: center;
}

.stat-box strong {
    font-family: 'Teko', sans-serif;
    font-size: 1.8rem;
    line-height: 1;
    color: #fff;
    display: block;
}

.stat-box span {
    font-size: 0.72rem;
    color: #777;
    text-transform: uppercase;
    font-weight: 600;
}

.modal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modal-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #141414;
    border: 1px solid #202020;
    padding: 0.45rem 0.8rem;
    border-radius: 4px;
}

.item-left {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.item-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--modal-color, #ff4b0b);
    object-fit: cover;
}

.item-name {
    font-weight: 600;
    font-size: 0.92rem;
    color: #fff;
}

.item-right {
    font-size: 0.85rem;
    color: #888;
}

.item-right strong {
    color: var(--modal-color, #ff4b0b);
    margin-left: 0.5rem;
}

/* =========================================================
   3. HEAD-TO-HEAD SROVNÁNÍ (COMPARE MODAL)
   ========================================================= */
.compare-switch-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.switch-btn {
    flex: 1;
    background: #161616;
    border: 1px solid #333;
    color: #888;
    font-family: 'Teko', sans-serif;
    font-size: 1.2rem;
    padding: 0.35rem;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.switch-btn.active {
    background: #ff4b0b;
    color: #000;
    font-weight: bold;
    border-color: #ff4b0b;
}

.selectors-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.compare-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.compare-sublabel {
    font-size: 0.68rem;
    color: #666;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: -0.2rem;
}

.vs-circle {
    font-family: 'Teko', sans-serif;
    font-size: 1.4rem;
    color: #ff4b0b;
    background: #161616;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #333;
    margin-top: 1rem;
}

.compare-select {
    width: 100%;
    background: #161616;
    border: 1px solid #333;
    color: #fff;
    padding: 0.55rem 0.6rem;
    border-radius: 4px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    outline: none;
}

.compare-select:focus {
    border-color: #ff4b0b;
}

.compare-table {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.compare-row {
    display: grid;
    grid-template-columns: 1fr 140px 1fr;
    align-items: center;
    background: #141414;
    border: 1px solid #202020;
    padding: 0.5rem 0.8rem;
    border-radius: 4px;
    text-align: center;
}

.compare-val-left {
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    text-align: left;
    color: #ccc;
}

.compare-label {
    font-size: 0.72rem;
    color: #777;
    font-weight: 700;
    text-transform: uppercase;
}

.compare-val-right {
    font-family: 'Teko', sans-serif;
    font-size: 1.5rem;
    text-align: right;
    color: #ccc;
}

.compare-winner {
    color: #22c55e !important;
    font-weight: bold;
}
/* Team stats v7 — only metrics backed by match reports */
.team-opgg-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0 16px}
.team-opgg-btn{display:flex;align-items:center;justify-content:center;min-height:38px;padding:8px 10px;border:1px solid #2b2b2b;background:#121212;color:#f5f5f5;text-decoration:none;font-family:Inter,sans-serif;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;transition:.18s ease}
.team-opgg-btn:hover{border-color:var(--modal-color,#ff4b0b);color:var(--modal-color,#ff4b0b);transform:translateY(-1px)}
.team-opgg-btn.disabled{opacity:.32;pointer-events:none}
.modal-strip-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.modal-stats-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.champ-rate{color:#666;font-size:10px;margin-left:5px}
@media(max-width:680px){.modal-strip-5{grid-template-columns:repeat(2,minmax(0,1fr))}.modal-strip-5 .strip-item:last-child{grid-column:1/-1}.team-opgg-actions{grid-template-columns:1fr}.modal-stats-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Team profile spacing + unified OP.GG multisearch */
#teamModal .modal-box{max-width:680px;padding:2.35rem 2.25rem 2.5rem}
#teamModal .modal-header-badges{margin-bottom:.8rem}
#teamModal .modal-subtitle{margin-top:.25rem;margin-bottom:1.15rem}
#teamModal .team-opgg-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    margin:0 0 1.65rem;
    border:1px solid #303030;
    background:#101010;
    border-radius:4px;
    overflow:hidden;
}
#teamModal .team-opgg-btn{
    min-height:42px;
    padding:10px 14px;
    border:0;
    background:transparent;
    font-size:10px;
    letter-spacing:.055em;
    transform:none;
}
#teamModal .team-opgg-btn + .team-opgg-btn{border-left:1px solid #303030}
#teamModal .team-opgg-btn:hover{background:#171717;transform:none}
#teamModal .modal-strip{margin-bottom:2rem;padding:1.15rem .6rem}
#teamModal .modal-sec-title{margin:1.9rem 0 .8rem}
#teamModal .modal-stats-grid-2,
#teamModal .modal-stats-grid-3,
#teamModal .modal-stats-grid-4{gap:.75rem;margin-bottom:1.55rem}
#teamModal .stat-box{padding:1rem .7rem}
#teamModal .modal-list{gap:.65rem}
#teamModal .modal-list-item{padding:.6rem .85rem;min-height:44px}
#teamModal .item-left{gap:.8rem}
#teamModal .item-icon{width:30px;height:30px}

@media(max-width:680px){
    #teamModal.modal-backdrop{padding:.7rem}
    #teamModal .modal-box{padding:1.6rem 1.1rem 1.9rem;max-height:94vh}
    #teamModal .modal-main-title{font-size:2.65rem}
    #teamModal .team-opgg-actions{grid-template-columns:1fr 1fr;margin-bottom:1.4rem}
    #teamModal .team-opgg-btn{font-size:9px;padding:9px 6px;min-height:40px}
    #teamModal .modal-strip{margin-bottom:1.65rem}
    #teamModal .modal-sec-title{margin-top:1.65rem}
}

/* Team profile v8 — cleaner summary, single multisearch control, pick owners */
#teamModal .modal-strip-4{grid-template-columns:repeat(4,minmax(0,1fr))}
#teamModal .team-opgg-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:stretch;
    gap:0;
    min-height:44px;
}
#teamModal .team-opgg-label{
    display:flex;align-items:center;padding:0 15px;
    color:#f5f5f5;font:800 10px/1 Inter,sans-serif;letter-spacing:.07em;
    border-right:1px solid #303030;
}
#teamModal .team-opgg-regions{display:grid;grid-template-columns:1fr 1fr;min-width:150px}
#teamModal .team-opgg-regions .team-opgg-btn{min-width:74px;min-height:42px;padding:10px 12px}
#teamModal .team-opgg-regions .team-opgg-btn + .team-opgg-btn{border-left:1px solid #303030}
#teamModal .pick-players{display:block;margin-top:4px;color:#8b8b8b;font-size:9px;font-weight:700;letter-spacing:.02em;text-transform:none}
#teamModal #modalTeamPicksList .modal-list-item{min-height:50px}
@media(max-width:680px){
    #teamModal .modal-strip-4{grid-template-columns:repeat(2,minmax(0,1fr))}
    #teamModal .team-opgg-actions{grid-template-columns:minmax(0,1fr) auto}
    #teamModal .team-opgg-label{padding:0 10px;font-size:9px}
    #teamModal .team-opgg-regions{min-width:124px}
    #teamModal .team-opgg-regions .team-opgg-btn{min-width:61px;padding:9px 7px}
}

/* Player profile v12 */
#playerModal .modal-box{max-width:560px;overflow:hidden}
.player-opgg-actions{display:flex;gap:6px;margin-top:12px}
.player-opgg-btn{display:flex;align-items:center;justify-content:center;min-width:92px;padding:7px 10px;border:1px solid #333;background:#111;color:#ddd;text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.5px}
.player-opgg-btn:hover{border-color:var(--modal-color,#ff4b0b);color:#fff}
.player-summary-strip{grid-template-columns:repeat(3,1fr)}
#modalPlayerKDA{white-space:nowrap}
@media(max-width:560px){
  .player-rate-grid,.modal-stats-grid-4{grid-template-columns:repeat(2,1fr)}
}


/* =========================================================
   COMPARE v16 — live season stats
   ========================================================= */
#compareModal .compare-modal-box{
    width:min(920px, calc(100vw - 32px));
    max-width:920px;
    padding:2rem 2.1rem 2.2rem;
    background:
        radial-gradient(circle at 0 0, rgba(255,75,11,.10), transparent 34%),
        linear-gradient(180deg,#111 0%,#0b0b0b 100%);
    border:1px solid #2b2b2b;
    box-shadow:0 30px 90px rgba(0,0,0,.65);
}
.compare-kicker{
    color:#ff4b0b;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
    margin-bottom:.25rem;
}
.compare-title{
    margin:0;
    color:#fff;
    font-family:'Teko',sans-serif;
    font-size:3rem;
    line-height:.95;
    letter-spacing:.03em;
}
.compare-intro{
    margin:.35rem 0 1.4rem;
    color:#737373;
    font-size:.78rem;
    line-height:1.5;
    max-width:650px;
}
#compareModal .compare-switch-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    margin:0 0 1.15rem;
    border:1px solid #292929;
    background:#0d0d0d;
    border-radius:5px;
    overflow:hidden;
}
#compareModal .switch-btn{
    min-height:42px;
    border:0;
    border-radius:0;
    background:transparent;
    color:#6f6f6f;
    font-family:'Teko',sans-serif;
    font-size:1.15rem;
    letter-spacing:.08em;
}
#compareModal .switch-btn + .switch-btn{border-left:1px solid #292929}
#compareModal .switch-btn.active{
    background:#ff4b0b;
    color:#080808;
}
#compareModal .selectors-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);
    align-items:end;
    gap:1rem;
    margin-bottom:1.2rem;
}
#compareModal .compare-col{gap:.38rem}
#compareModal .compare-col--right .compare-sublabel{text-align:right}
#compareModal .compare-sublabel{
    margin:0;
    color:#666;
    font-size:.62rem;
    letter-spacing:.11em;
}
#compareModal .compare-sublabel--player{margin-top:.35rem}
#compareModal .compare-select{
    min-height:42px;
    padding:.65rem .75rem;
    border:1px solid #303030;
    border-radius:4px;
    background:#151515;
    color:#f5f5f5;
    font-size:.82rem;
    transition:border-color .16s ease, background .16s ease;
}
#compareModal .compare-select:hover,
#compareModal .compare-select:focus{
    border-color:#ff4b0b;
    background:#181818;
}
#compareModal .compare-select option{background:#151515;color:#fff}
#compareModal .vs-circle{
    width:44px;
    height:44px;
    margin:0;
    border:1px solid rgba(255,75,11,.55);
    background:#15100e;
    color:#ff4b0b;
    font-size:1.35rem;
    box-shadow:0 0 0 4px rgba(255,75,11,.04);
}
.compare-versus-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr);
    align-items:center;
    min-height:94px;
    margin:1.35rem 0 .8rem;
    padding:1rem 1.1rem;
    border:1px solid #252525;
    background:linear-gradient(90deg,rgba(39,93,173,.08),#101010 47%,#101010 53%,rgba(173,45,45,.08));
    border-radius:6px;
}
.compare-side-head{
    min-width:0;
    display:flex;
    align-items:center;
    gap:.85rem;
}
.compare-side-head--right{
    justify-content:flex-end;
    text-align:right;
}
.compare-side-logo{
    flex:0 0 52px;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.5);
    border:1px solid rgba(255,255,255,.1);
    border-radius:6px;
    padding:4px;
    box-shadow:0 4px 14px rgba(0,0,0,.5);
    object-fit:contain;
}
.compare-side-info{
    display:flex;
    flex-direction:column;
    min-width:0;
}
.compare-side-info--right{
    align-items:flex-end;
}
.compare-side-head strong{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#fff;
    font-family:'Teko',sans-serif;
    font-size:2rem;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.025em;
}
.compare-side-head small{
    margin-top:.25rem;
    color:#777;
    font-size:.67rem;
    text-transform:uppercase;
    letter-spacing:.06em;
}
.compare-side-tag{
    min-height:.8rem;
    color:var(--side-accent, #ff4b0b);
    font-size:.61rem;
    font-weight:800;
    letter-spacing:.12em;
}
.compare-head-vs{
    text-align:center;
    color:#ff4b0b;
    font-family:'Teko',sans-serif;
    font-size:1.65rem;
    font-weight:700;
    background:rgba(255,75,11,.12);
    border:1px solid rgba(255,75,11,.3);
    border-radius:50%;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    flex-shrink:0;
}
#compareModal .compare-table{
    display:flex;
    flex-direction:column;
    gap:.38rem;
    max-height:55vh;
    overflow-y:auto;
    padding-right:4px;
}
#compareModal .compare-row{
    display:grid;
    grid-template-columns:145px minmax(0,1fr) 145px;
    align-items:center;
    min-height:54px;
    padding:.55rem .8rem;
    border:1px solid #202020;
    border-radius:4px;
    background:#121212;
    transition:background .15s ease, border-color .15s ease;
}
#compareModal .compare-row:hover{
    background:#161616;
    border-color:#2a2a2a;
}
.compare-value{
    color:#a0a0a0;
    font-family:'Teko',sans-serif;
    font-size:1.5rem;
    line-height:1;
    transition:color .15s ease;
}
.compare-value.is-leading{
    color:#65e58c !important;
    font-weight:700;
    text-shadow:0 0 12px rgba(101,229,140,.35);
}
.compare-value--left{text-align:left}
.compare-value--right{text-align:right}
.compare-metric{min-width:0;padding:0 .75rem}
#compareModal .compare-label{
    margin-bottom:.36rem;
    color:#737373;
    font-family:'Inter',sans-serif;
    font-size:.61rem;
    font-weight:800;
    letter-spacing:.08em;
    text-align:center;
    text-transform:uppercase;
}
.compare-bars{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3px;
    height:4px;
}
.compare-bar-track{
    position:relative;
    overflow:hidden;
    background:#1e1e1e;
}
.compare-bar-track span{
    position:absolute;
    top:0;bottom:0;
    opacity:.85;
}
.compare-bar-track--left span{
    right:0;
    background:#2f7ee6;
}
.compare-bar-track--right span{
    left:0;
    background:#d94a4a;
}
.compare-empty{
    padding:1.5rem;
    border:1px dashed #303030;
    color:#777;
    font-size:.8rem;
    text-align:center;
}
.compare-champions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem;
    margin-top:1rem;
}
.compare-champ-side{
    padding:1rem;
    border:1px solid #222;
    border-top:2px solid #2f7ee6;
    background:#101010;
}
.compare-champ-side--right{border-top-color:#d94a4a}
.compare-champ-title{
    margin-bottom:.7rem;
    color:#717171;
    font-size:.61rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.compare-champ{
    display:flex;
    align-items:center;
    gap:.65rem;
    min-height:42px;
    padding:.35rem 0;
    border-top:1px solid #1d1d1d;
}
.compare-champ:first-of-type{border-top:0}
.compare-champ img{
    width:34px;
    height:34px;
    object-fit:cover;
    border-radius:3px;
}
.compare-champ div{display:flex;flex-direction:column;min-width:0}
.compare-champ strong{
    color:#eee;
    font-size:.78rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.compare-champ span,.compare-champ-empty{
    color:#686868;
    font-size:.66rem;
}
@media(max-width:720px){
    #compareModal .compare-modal-box{padding:1.4rem 1rem 1.6rem}
    #compareModal .selectors-grid{grid-template-columns:1fr 34px 1fr;gap:.55rem}
    #compareModal .vs-circle{width:34px;height:34px;font-size:1.05rem}
    .compare-versus-head{grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);padding:.8rem}
    .compare-side-head strong{font-size:1.45rem}
    #compareModal .compare-row{grid-template-columns:88px minmax(0,1fr) 88px;padding:.5rem .55rem}
    .compare-value{font-size:1.2rem}
    .compare-metric{padding:0 .35rem}
    .compare-champions{grid-template-columns:1fr}
}
@media(max-width:480px){
    .compare-title{font-size:2.4rem}
    #compareModal .selectors-grid{grid-template-columns:1fr}
    #compareModal .selectors-grid .vs-circle{display:none}
    #compareModal .compare-col--right .compare-sublabel{text-align:left}
    .compare-versus-head{grid-template-columns:1fr 28px 1fr}
    #compareModal .compare-row{grid-template-columns:76px minmax(0,1fr) 76px}
    .compare-value{font-size:1.05rem}
}


/* =========================================================
   MODAL SCROLL FIX v17
   Every stats/compare popup must remain usable on short screens.
   ========================================================= */
.modal-backdrop {
    overflow: hidden;
    overscroll-behavior: contain;
}

.modal-box,
#playerModal .modal-box,
#teamModal .modal-box,
#compareModal .modal-box {
    max-height: min(92vh, calc(100dvh - 24px));
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--modal-color, #ff4b0b) #151515;
}

.modal-box::-webkit-scrollbar,
#playerModal .modal-box::-webkit-scrollbar,
#teamModal .modal-box::-webkit-scrollbar,
#compareModal .modal-box::-webkit-scrollbar {
    width: 9px;
}

.modal-box::-webkit-scrollbar-track,
#playerModal .modal-box::-webkit-scrollbar-track,
#teamModal .modal-box::-webkit-scrollbar-track,
#compareModal .modal-box::-webkit-scrollbar-track {
    background: #151515;
    border-left: 1px solid #232323;
}

.modal-box::-webkit-scrollbar-thumb,
#playerModal .modal-box::-webkit-scrollbar-thumb,
#teamModal .modal-box::-webkit-scrollbar-thumb,
#compareModal .modal-box::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--modal-color, #ff4b0b), #a92d05);
    border: 2px solid #151515;
    border-radius: 999px;
}

.modal-box::-webkit-scrollbar-thumb:hover,
#playerModal .modal-box::-webkit-scrollbar-thumb:hover,
#teamModal .modal-box::-webkit-scrollbar-thumb:hover,
#compareModal .modal-box::-webkit-scrollbar-thumb:hover {
    background: var(--modal-color, #ff4b0b);
}

@media (max-width: 680px) {
    .modal-backdrop {
        padding: 8px;
        align-items: center;
    }

    .modal-box,
    #playerModal .modal-box,
    #teamModal .modal-box,
    #compareModal .modal-box {
        max-height: calc(100dvh - 16px);
        scrollbar-gutter: stable;
    }
}


/* =========================================================
   LIVE LEADERBOARD v18
   ========================================================= */
.league-leaderboard{margin-bottom:2.4rem}
.lb-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.lb-section-head--compact{align-items:center}
.lb-eyebrow{display:block;color:#ff4b0b;font-size:.69rem;font-weight:800;letter-spacing:.18em;margin-bottom:.22rem}
.lb-section-head h2{margin:0;color:#fff;font-family:'Teko',sans-serif;font-size:2.05rem;line-height:.92;letter-spacing:.035em}
.lb-live-note{color:#6f6f6f;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.leader-ticker{overflow:hidden;border-top:1px solid #222;border-bottom:1px solid #222;padding:.65rem 0;margin-bottom:1.6rem;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}
.leader-ticker-track{display:flex;gap:.75rem;width:max-content;animation:col-leader-scroll 38s linear infinite}
.leader-ticker:hover .leader-ticker-track{animation-play-state:paused}
@keyframes col-leader-scroll{to{transform:translateX(calc(-50% - .375rem))}}
.leader-ticker-card{width:228px;min-width:228px;text-align:left;background:linear-gradient(145deg,#151515,#0d0d0d);border:1px solid #262626;border-top:2px solid var(--leader-color,#ff4b0b);border-radius:4px;padding:.75rem .85rem;color:#fff;cursor:pointer;transition:border-color .18s ease,transform .18s ease}
.leader-ticker-card:hover{border-color:var(--leader-color,#ff4b0b);transform:translateY(-2px)}
.leader-ticker-kicker{display:flex;align-items:center;gap:.42rem;color:#8d8d8d;font-size:.66rem;font-weight:800;letter-spacing:.08em}
.leader-ticker-kicker b{color:var(--leader-color,#ff4b0b);font-size:1rem}
.leader-ticker-main{display:flex;align-items:flex-end;justify-content:space-between;gap:.7rem;margin:.55rem 0 .28rem}
.leader-ticker-main strong{font-family:'Teko',sans-serif;font-size:1.45rem;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leader-ticker-main em{font-style:normal;font-family:'Teko',sans-serif;font-size:1.8rem;line-height:.9;color:#fff}
.leader-ticker-meta{font-size:.66rem;color:#777;font-weight:700;letter-spacing:.05em}
.role-leaderboard-panel,.stats-leaderboard-panel{background:#0e0e0e;border:1px solid #222;border-radius:5px;padding:1rem;margin-top:1rem}
.role-tabs,.leaderboard-metric-tabs{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.role-tab,.metric-tab{background:#151515;border:1px solid #292929;color:#8a8a8a;font-family:'Teko',sans-serif;font-size:1rem;padding:.25rem .7rem;border-radius:3px;cursor:pointer;letter-spacing:.05em}
.role-tab:hover,.metric-tab:hover{color:#fff;border-color:#444}
.role-tab.active,.metric-tab.active{background:#ff4b0b;border-color:#ff4b0b;color:#090909;font-weight:700}
.role-ranking-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem}
.role-rank-card{position:relative;text-align:left;min-width:0;background:#121212;border:1px solid #242424;border-top:2px solid var(--leader-color,#ff4b0b);border-radius:4px;padding:.85rem;color:#fff;cursor:pointer;transition:transform .18s ease,border-color .18s ease}
.role-rank-card:hover{transform:translateY(-2px);border-color:var(--leader-color,#ff4b0b)}
.role-rank-card--first{background:linear-gradient(135deg,color-mix(in srgb,var(--leader-color) 16%,#151515),#0d0d0d);grid-column:span 1}
.role-rank-top{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.role-rank-pos{font-family:'Teko',sans-serif;font-size:1.6rem}.role-rank-record{font-family:'Teko',sans-serif;font-size:1rem;color:var(--leader-color,#ff4b0b);font-weight:700;letter-spacing:.06em}
.role-rank-name{font-family:'Teko',sans-serif;font-size:1.55rem;line-height:1;margin-top:.55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.role-rank-team{font-size:.68rem;color:var(--leader-color,#ff4b0b);font-weight:700;margin-top:.2rem}
.role-rank-primary{display:flex;align-items:baseline;gap:.4rem;margin:.8rem 0 .55rem}.role-rank-primary strong{font-family:'Teko',sans-serif;font-size:2.1rem;line-height:.8;letter-spacing:.02em}.role-rank-primary span{color:#a3a3a3;font-size:.76rem;font-weight:700;letter-spacing:.04em}
.role-rank-stats{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;border-top:1px solid #282828;padding-top:.55rem}.role-rank-stats span{color:#8c8c8c;font-size:.74rem;letter-spacing:.02em}.role-rank-stats b{color:#f3f4f6;font-weight:700}
.lb-method-note{margin:.7rem 0 0;color:#666;font-size:.64rem}
.leaderboard-table-wrap{overflow-x:auto;border:1px solid #222;border-radius:4px}.leaderboard-table{width:100%;border-collapse:collapse;min-width:1180px;background:#0c0c0c}.leaderboard-table th{position:sticky;top:0;background:#161616;color:#777;font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:.62rem .68rem;border-bottom:1px solid #262626}.leaderboard-table td{padding:.66rem .68rem;border-bottom:1px solid #1c1c1c;color:#aaa;font-size:.76rem}.leaderboard-row{cursor:pointer;transition:background .15s}.leaderboard-row:hover,.leaderboard-row:focus{background:#151515;outline:none}.leaderboard-row strong{color:#fff;font-family:'Teko',sans-serif;font-size:1.12rem;letter-spacing:.02em}.leaderboard-rank{font-family:'Teko',sans-serif!important;color:#fff!important;font-size:1.15rem!important}.leaderboard-row:nth-child(-n+3) .leaderboard-rank{color:var(--leader-color,#ff4b0b)!important}.leaderboard-team-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--leader-color,#ff4b0b);margin-right:.4rem}.is-active-metric{color:#ff7a38!important;font-weight:800}.lb-empty{grid-column:1/-1;padding:1.25rem;color:#777;text-align:center;font-size:.8rem}
@media(max-width:980px){.role-ranking-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.role-rank-card--first{grid-column:span 2}.lb-section-head--compact{align-items:flex-start;flex-direction:column}.role-tabs,.leaderboard-metric-tabs{justify-content:flex-start}}
@media(max-width:620px){.lb-section-head{align-items:flex-start;flex-direction:column}.lb-section-head h2{font-size:1.75rem}.leader-ticker{margin-left:-.2rem;margin-right:-.2rem;mask-image:none;overflow-x:auto;scrollbar-width:none}.leader-ticker::-webkit-scrollbar{display:none}.leader-ticker-track{animation:none}.leader-ticker-card{min-width:205px;width:205px}.role-ranking-grid{grid-template-columns:1fr}.role-rank-card--first{grid-column:auto}.role-leaderboard-panel,.stats-leaderboard-panel{padding:.8rem}.role-tabs,.leaderboard-metric-tabs{gap:.28rem}.role-tab,.metric-tab{font-size:.92rem;padding:.22rem .55rem}}
@media(prefers-reduced-motion:reduce){.leader-ticker-track{animation:none}.leader-ticker{overflow-x:auto;mask-image:none}}

/* v19 leaderboard refinements */
.leaderboard-metric-tabs{max-width:100%;overflow-x:auto;scrollbar-width:thin;padding-bottom:.15rem}
.leaderboard-metric-tabs .metric-tab{flex:0 0 auto}

/* =========================================================
   STATS HUB + SOCIAL v20
   ========================================================= */
.leader-ticker-card{position:relative;overflow:hidden;padding-left:3.2rem}
.leader-ticker-logo{position:absolute;left:.72rem;top:50%;width:34px;height:34px;object-fit:contain;transform:translateY(-50%);filter:drop-shadow(0 3px 8px rgba(0,0,0,.65));opacity:.96}
.leader-ticker-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--leader-color) 9%,transparent),transparent 46%);pointer-events:none}
.leader-ticker-card>*{position:relative;z-index:1}

.stats-hub-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:1rem;margin:1rem 0}
.stats-hub-grid--wide{grid-template-columns:1fr 1fr;margin-bottom:1.15rem}
.stats-hub-card{background:#0e0e0e;border:1px solid #222;border-radius:5px;padding:1rem;min-width:0}
.stats-hub-card-head{margin-bottom:.8rem}.stats-hub-card-head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.stats-hub-card-head h3{margin:0;color:#fff;font-family:'Teko',sans-serif;font-size:1.55rem;line-height:1;letter-spacing:.035em}
.stats-hub-note{color:#666;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.snapshot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid #202020;background:#0a0a0a}
.snapshot-item{min-width:0;padding:.95rem .72rem;border-right:1px solid #202020}.snapshot-item:last-child{border-right:0}
.snapshot-item strong{display:block;color:#fff;font-family:'Teko',sans-serif;font-size:1.75rem;line-height:1}.snapshot-item span{display:block;margin-top:.28rem;color:#6e6e6e;font-size:.58rem;font-weight:800;letter-spacing:.075em;text-transform:uppercase}
.record-list{display:grid;gap:.42rem}.record-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:#121212;border:1px solid #202020;padding:.58rem .7rem;border-radius:3px}
.record-row>div{min-width:0}.record-row span,.record-row small{display:block;color:#676767;font-size:.56rem;font-weight:800;letter-spacing:.06em}.record-row strong{display:block;color:#eee;font-family:'Teko',sans-serif;font-size:1.06rem;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.record-row>b{color:#ff6a2b;font-family:'Teko',sans-serif;font-size:1.15rem;white-space:nowrap}
.champion-leaders{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.champ-leader-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:.65rem;background:#121212;border:1px solid #222;padding:.58rem;border-radius:3px;min-width:0}
.champ-leader-card img{width:42px;height:42px;border-radius:3px;object-fit:cover}.champ-leader-card>div{min-width:0}.champ-leader-card span,.champ-leader-card small{display:block;color:#686868;font-size:.55rem;font-weight:800;letter-spacing:.06em}.champ-leader-card strong{display:block;color:#fff;font-family:'Teko',sans-serif;font-size:1.15rem;line-height:1.05}.champ-leader-card>b{color:#ff6a2b;font-family:'Teko',sans-serif;font-size:1.08rem;white-space:nowrap}
.round-team-grid{display:grid;gap:.45rem}.round-player-card{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:.65rem;background:#121212;border:1px solid #222;border-left:2px solid #ff4b0b;border-radius:3px;padding:.5rem .62rem;color:#fff;text-align:left;cursor:pointer;transition:border-color .15s,background .15s}
.round-player-card:hover{background:#171717;border-color:#ff4b0b}.round-player-card img{width:38px;height:38px;object-fit:contain}.round-player-card div{min-width:0}.round-player-card span{color:#ff6a2b;font-size:.55rem;font-weight:900;letter-spacing:.08em}.round-player-card strong{display:block;font-family:'Teko',sans-serif;font-size:1.18rem;line-height:1}.round-player-card small{display:block;color:#737373;font-size:.58rem;margin-top:.13rem}

.social-hub{margin:1.7rem 0 2rem}.social-hub-shell{background:#0e0e0e;border:1px solid #222;border-top:2px solid #ff4b0b;border-radius:5px;padding:1rem}.social-hub-select-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.8rem;margin-bottom:.9rem}.social-hub-select-wrap label{color:#777;font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.social-preview{background:#090909;border:1px solid #202020;padding:.85rem;border-radius:4px}.social-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}.social-score>div{display:flex;align-items:center;gap:.55rem;min-width:0}.social-score>div:last-child{justify-content:flex-end;text-align:right}.social-score img{width:38px;height:38px;object-fit:contain}.social-score strong{font-family:'Teko',sans-serif;font-size:1.35rem;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.social-score>b{color:#ff6a2b;font-family:'Teko',sans-serif;font-size:2rem}
.social-leaders-mini{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem;border-top:1px solid #1f1f1f;margin-top:.75rem;padding-top:.75rem}.social-leaders-mini span{min-width:0;background:#111;padding:.5rem;border:1px solid #1d1d1d}.social-leaders-mini small{display:block;color:#606060;font-size:.55rem;font-weight:900}.social-leaders-mini b{display:block;color:#fff;font-family:'Teko',sans-serif;font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.social-leaders-mini em{display:block;color:#ff6a2b;font-style:normal;font-size:.68rem;font-weight:800}
.social-actions,.profile-share-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.social-action-btn,.profile-share-btn{background:#151515;border:1px solid #303030;color:#aaa;font-family:'Teko',sans-serif;font-size:1rem;letter-spacing:.045em;padding:.42rem .75rem;border-radius:3px;cursor:pointer;transition:.15s}.social-action-btn:hover,.profile-share-btn:hover{color:#fff;border-color:#ff4b0b}.social-action-btn--primary{background:rgba(255,75,11,.1);border-color:#ff4b0b;color:#ff6a2b}.social-status{min-height:1em;margin:.55rem 0 0;color:#7d7d7d;font-size:.67rem}
.profile-share-actions{margin:.65rem 0 0}.profile-share-btn{font-size:.9rem}
.profile-form-row{display:flex;gap:.35rem;flex-wrap:wrap}.form-badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:28px;border:1px solid #333;background:#131313;color:#aaa;font-family:'Teko',sans-serif;font-size:1.05rem;border-radius:3px}.form-badge.is-win{border-color:rgba(34,197,94,.5);color:#22c55e;background:rgba(34,197,94,.08)}.form-badge.is-loss{border-color:rgba(239,68,68,.45);color:#ef4444;background:rgba(239,68,68,.07)}
.recent-match-list{display:grid;gap:.42rem}.recent-match-row{display:grid;grid-template-columns:32px 34px minmax(0,1fr) auto;align-items:center;gap:.55rem;background:#121212;border:1px solid #222;padding:.5rem .58rem;border-radius:3px}.recent-match-row>img{width:34px;height:34px;object-fit:cover;border-radius:3px}.recent-match-row>img.recent-team-logo{object-fit:contain}.recent-result{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:3px;font-family:'Teko',sans-serif;font-size:1rem}.recent-result.is-win{color:#22c55e;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.3)}.recent-result.is-loss{color:#ef4444;background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.28)}.recent-main{min-width:0}.recent-main strong{display:block;color:#eee;font-family:'Teko',sans-serif;font-size:1rem;line-height:1}.recent-main span,.recent-meta span{display:block;color:#686868;font-size:.58rem;margin-top:.12rem}.recent-meta{text-align:right}.recent-meta b{display:block;color:#ddd;font-size:.68rem}.recent-empty{color:#696969;font-size:.7rem;padding:.55rem 0}

@media(max-width:980px){.stats-hub-grid,.stats-hub-grid--wide{grid-template-columns:1fr}.snapshot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.snapshot-item{border-bottom:1px solid #202020}.champion-leaders{grid-template-columns:1fr 1fr}.social-leaders-mini{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.leader-ticker-card{padding-left:3rem}.leader-ticker-logo{width:30px;height:30px}.snapshot-grid{grid-template-columns:1fr 1fr}.snapshot-item:nth-child(2n){border-right:0}.champion-leaders{grid-template-columns:1fr}.stats-hub-card-head--row{align-items:flex-start;flex-direction:column;gap:.35rem}.social-hub-select-wrap{grid-template-columns:1fr}.social-score{gap:.4rem}.social-score img{width:28px;height:28px}.social-score strong{font-size:1rem}.social-score>b{font-size:1.5rem}.social-leaders-mini{grid-template-columns:1fr 1fr}.social-actions,.profile-share-actions{display:grid;grid-template-columns:1fr}.social-action-btn,.profile-share-btn{width:100%}.recent-match-row{grid-template-columns:30px 30px minmax(0,1fr)}.recent-match-row .recent-meta{grid-column:3;text-align:left;display:flex;gap:.5rem;align-items:center}.recent-match-row>img{width:30px;height:30px}}


/* =========================================================
   v21 — Stats Hub cleanup / round filter / public hierarchy
   ========================================================= */
.stats-scope-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem 0 1.25rem;padding:.7rem .85rem;border-top:1px solid #242424;border-bottom:1px solid #242424;background:linear-gradient(90deg,rgba(255,75,11,.05),transparent 35%)}
.stats-scope-copy{display:flex;align-items:baseline;gap:.65rem;white-space:nowrap}.stats-scope-copy strong{font-family:'Teko',sans-serif;color:#fff;font-size:1.25rem;letter-spacing:.05em}
.stats-round-tabs{display:flex;align-items:center;justify-content:flex-end;gap:.35rem;flex-wrap:wrap}.stats-round-tab{appearance:none;border:1px solid #2c2c2c;background:#121212;color:#777;font-family:'Teko',sans-serif;font-size:1rem;letter-spacing:.045em;padding:.28rem .62rem;border-radius:3px;cursor:pointer;transition:.15s}.stats-round-tab:hover{color:#fff;border-color:#555}.stats-round-tab.active{color:#050505;background:#ff4b0b;border-color:#ff4b0b}
.league-snapshot{margin:0 0 1.15rem}.stats-block-heading{margin:0 0 .6rem}.stats-block-heading--row{display:flex;align-items:end;justify-content:space-between;gap:1rem}.stats-block-heading h3{margin:0;color:#fff;font-family:'Teko',sans-serif;font-size:1.55rem;line-height:1;letter-spacing:.035em}
.snapshot-grid--compact{grid-template-columns:repeat(3,minmax(0,1fr));background:#0b0b0b;border:1px solid #242424;border-left:2px solid #ff4b0b}.snapshot-grid--compact .snapshot-item{padding:1rem 1.1rem}.snapshot-grid--compact .snapshot-item strong{font-size:2rem}.snapshot-grid--compact .snapshot-item span{font-size:.62rem}
.round-feature{margin:0 0 1.2rem;padding:.95rem 0;border-top:1px solid #242424;border-bottom:1px solid #242424}.round-team-grid--lineup{grid-template-columns:repeat(5,minmax(0,1fr));gap:.55rem}.round-team-grid--lineup .round-player-card{grid-template-columns:34px minmax(0,1fr);padding:.62rem;background:#0e0e0e;border-left:1px solid #2a2a2a;border-top:2px solid #ff4b0b}.round-team-grid--lineup .round-player-card img{width:34px;height:34px}
.stats-detail-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:1rem;margin:0 0 1.2rem}.stats-detail-panel{min-width:0;padding:.85rem 0;border-top:1px solid #232323}.stats-detail-panel .champion-leaders{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-detail-panel .champ-leader-card{background:#0d0d0d;padding:.65rem;border-color:#202020}
.record-list--featured{grid-template-columns:1fr 1fr;gap:.5rem}.record-list--featured .record-row{min-height:64px;background:#0d0d0d;border-color:#202020}.record-list--featured .record-row:nth-child(n+5){display:none}.record-list--featured .record-row>b{font-size:1.2rem}
.role-leaderboard-panel,.stats-leaderboard-panel{border-color:#242424;background:#0b0b0b}.role-leaderboard-panel{margin-top:1.3rem}
.admin-only[hidden]{display:none!important}.social-hub.admin-only{margin-top:2rem;padding-top:1rem;border-top:1px dashed #343434}
@media(max-width:980px){.round-team-grid--lineup{grid-template-columns:repeat(2,minmax(0,1fr))}.round-team-grid--lineup .round-player-card:first-child{grid-column:span 2}.stats-detail-grid{grid-template-columns:1fr}.stats-detail-panel .champion-leaders{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-scope-bar{align-items:flex-start;flex-direction:column}.stats-round-tabs{justify-content:flex-start}}
@media(max-width:620px){.snapshot-grid--compact{grid-template-columns:1fr}.snapshot-grid--compact .snapshot-item{border-right:0;border-bottom:1px solid #202020}.snapshot-grid--compact .snapshot-item:last-child{border-bottom:0}.round-team-grid--lineup{grid-template-columns:1fr}.round-team-grid--lineup .round-player-card:first-child{grid-column:auto}.stats-detail-panel .champion-leaders,.record-list--featured{grid-template-columns:1fr}.stats-block-heading--row{align-items:flex-start;flex-direction:column;gap:.3rem}.stats-round-tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.25rem}.stats-round-tab{flex:0 0 auto}}



/* =========================================================
   v25 — LEAGUE LEADERS TICKER / NO OVERLAP / CLEAN LOGO
   ========================================================= */
.leader-ticker {
    overflow: hidden;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    padding: .65rem 0;
    margin-bottom: 1.6rem;
    mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}
.leader-ticker-track {
    display: flex;
    gap: .85rem;
    width: max-content;
    animation: col-leader-scroll 38s linear infinite;
}
.leader-ticker:hover .leader-ticker-track {
    animation-play-state: paused;
}
.leader-ticker-card {
    position: relative;
    overflow: hidden;
    width: 290px;
    min-width: 290px;
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .85rem;
    text-align: left;
    background: linear-gradient(145deg, #151515, #0d0d0d);
    border: 1px solid #262626;
    border-top: 2px solid var(--leader-color, #ff4b0b);
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    isolation: isolate;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.leader-ticker-card:hover {
    border-color: var(--leader-color, #ff4b0b);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.leader-ticker-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, color-mix(in srgb, var(--leader-color) 9%, transparent), transparent 50%);
    pointer-events: none;
    z-index: 0;
}
.leader-ticker-logo-corner {
    position: relative;
    z-index: 2;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 4px;
    padding: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}
.leader-ticker-logo-corner img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.7));
}
.leader-ticker-content {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.leader-ticker-kicker {
    display: block;
    color: #8a8a8a;
    font-family: 'Inter', sans-serif;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.leader-ticker-main {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin: .22rem 0 .18rem;
    width: 100%;
}
.leader-ticker-main strong {
    font-family: 'Teko', sans-serif;
    font-size: 1.55rem;
    line-height: 1;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 135px;
    letter-spacing: .02em;
}
.leader-ticker-main em {
    font-style: normal;
    font-family: 'Teko', sans-serif;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--leader-color, #ff4b0b);
    white-space: nowrap;
    flex-shrink: 0;
}
.leader-ticker-meta {
    font-family: 'Inter', sans-serif;
    font-size: .64rem;
    color: #727272;
    font-weight: 700;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leader-ticker-watermark,
.leader-ticker-logo-badge,
.leader-ticker-logo {
    display: none !important;
}

/* POSUVNÍKY A SCROLL CONTAINERY NA STRÁNCE TÝMŮ */
.leaderboard-table-wrap,
#compareModal .compare-table,
.stats-round-tabs,
.role-tabs,
.leaderboard-metric-tabs {
    scrollbar-width: thin;
    scrollbar-color: #ff4b0b #141414;
}
.leaderboard-table-wrap::-webkit-scrollbar,
#compareModal .compare-table::-webkit-scrollbar,
.stats-round-tabs::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.leaderboard-table-wrap::-webkit-scrollbar-track,
#compareModal .compare-table::-webkit-scrollbar-track {
    background: #111417;
    border-radius: 3px;
}
.leaderboard-table-wrap::-webkit-scrollbar-thumb,
#compareModal .compare-table::-webkit-scrollbar-thumb {
    background: #ff4b0b;
    border-radius: 3px;
}

@media(max-width:620px){
    .leader-ticker-card {
        width: 260px;
        min-width: 260px;
        min-height: 80px;
        padding: .55rem .75rem;
        gap: .65rem;
    }
    .leader-ticker-logo-corner {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
    }
    .leader-ticker-main strong {
        max-width: 110px;
        font-size: 1.4rem;
    }
    .leader-ticker-main em {
        font-size: 1.5rem;
    }
}

/* =========================================================
   COL TYPOGRAFIE & MEZISLOVNÍ PROSTOR — FIX PŘEKRÝVÁNÍ TEXTU
   ========================================================= */
/* Zajistí, že zúžený font Teko má vždy zřetelné mezery mezi slovy a písmena se neslévají */
h1, h2, h3, h4,
.team-name,
.roster-name,
.leader-name,
.modal-main-title,
.lb-section-head h2,
.stats-block-heading h3,
.stats-hub-card-head h3,
.leader-ticker-main strong,
.role-rank-name,
.round-player-card strong,
.champ-leader-card strong,
.record-row strong,
.social-score strong,
.leaderboard-row strong,
.filter-btn,
.compare-trigger-btn,
.role-tab,
.metric-tab,
.stats-round-tab,
.social-action-btn,
.profile-share-btn {
    word-spacing: 0.22em;
    letter-spacing: 0.035em;
    line-height: 1.08;
    text-rendering: optimizeLegibility;
}

/* Speciální úpravy pro velké titulky */
.arena-hero h1,
#hero-title {
    word-spacing: 0.26em !important;
    letter-spacing: 0.035em !important;
    line-height: 1.04 !important;
}

.team-name {
    word-spacing: 0.24em !important;
    letter-spacing: 0.04em !important;
    line-height: 1.06 !important;
}

.modal-main-title {
    word-spacing: 0.25em !important;
    letter-spacing: 0.04em !important;
    line-height: 1.06 !important;
}

.lb-section-head h2 {
    word-spacing: 0.22em !important;
    letter-spacing: 0.035em !important;
    line-height: 1.08 !important;
}

/* Zabránění přetékání a kolizím na soupisce */
.roster-row {
    gap: 8px !important;
}
.roster-left {
    min-width: 0 !important;
    overflow: hidden !important;
    gap: 8px !important;
}
.roster-name {
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-spacing: 0.18em !important;
    letter-spacing: 0.03em !important;
}
.roster-right {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* =========================================================
   RYCHLÁ NAVIGACE (QUICK JUMP BAR)
   ========================================================= */
.tymy-quick-nav {
    position: sticky;
    top: 68px;
    z-index: 90;
    background: rgba(10, 10, 10, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 75, 11, 0.28);
    padding: 0.6rem 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);
}
.tymy-quick-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.tymy-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.85rem;
    background: #141414;
    border: 1px solid #282828;
    border-radius: 4px;
    color: #cfcfcf;
    font-family: 'Teko', sans-serif;
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: 0.04em;
    word-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.16s ease;
}
.tymy-quick-btn:hover {
    background: rgba(255, 75, 11, 0.12);
    border-color: #ff4b0b;
    color: #fff;
    transform: translateY(-1px);
}
.tymy-quick-btn--teams {
    background: linear-gradient(135deg, rgba(255, 75, 11, 0.22), rgba(255, 75, 11, 0.06));
    border-color: rgba(255, 75, 11, 0.6);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(255, 75, 11, 0.18);
}
.tymy-quick-btn--teams:hover {
    background: rgba(255, 75, 11, 0.32);
    border-color: #ff4b0b;
    color: #fff;
}
.tymy-quick-btn--accent {
    background: #ff4b0b;
    border-color: #ff4b0b;
    color: #000;
    font-weight: 700;
}
.tymy-quick-btn--accent:hover {
    background: #ff6a2b;
    border-color: #ff6a2b;
    color: #000;
}
@media (max-width: 768px) {
    .tymy-quick-nav {
        top: 60px;
        padding: 0.45rem 0.6rem;
    }
    .tymy-quick-nav-inner {
        gap: 0.35rem;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .tymy-quick-nav-inner::-webkit-scrollbar {
        display: none;
    }
    .tymy-quick-btn {
        flex-shrink: 0;
        font-size: 1rem;
        padding: 0.32rem 0.65rem;
    }
}


/* === v28 stats correctness / side split polish === */
.snapshot-grid--compact{grid-template-columns:repeat(4,minmax(0,1fr))}
.recent-series-row[data-detail-url]{cursor:pointer;transition:border-color .16s ease,background .16s ease}
.recent-series-row[data-detail-url]:hover,.recent-series-row[data-detail-url]:focus-visible{border-color:rgba(255,75,11,.55);background:#17110f;outline:none}
#modalTeamBlueSide,#modalTeamRedSide{font-variant-numeric:tabular-nums}
@media(max-width:900px){.snapshot-grid--compact{grid-template-columns:repeat(2,minmax(0,1fr))}.snapshot-grid--compact .snapshot-item:nth-child(2n){border-right:0}}
@media(max-width:620px){.snapshot-grid--compact{grid-template-columns:1fr}.snapshot-grid--compact .snapshot-item{border-right:0}}
.stats-methodology{margin:-.45rem 0 1.25rem;padding:.65rem .8rem;border-left:2px solid rgba(255,75,11,.65);background:rgba(255,255,255,.018);color:#757575;font-size:.68rem;line-height:1.55}.stats-methodology strong{color:#b9b9b9}.stats-methodology b{color:#949494}


/* v17.7 — Quick Role Duel: same Role Index, no second ranking system */
.role-duel-stage{margin:0 0 14px}.role-duel-board{width:100%;display:grid;grid-template-columns:minmax(160px,.7fr) minmax(300px,1.2fr) minmax(160px,.7fr);gap:14px;align-items:stretch;border:1px solid #2c3339;background:linear-gradient(90deg,rgba(25,185,255,.07),#090c0f 34%,#090c0f 66%,rgba(239,63,87,.07));color:#fff;padding:14px;cursor:pointer;text-align:left}.role-duel-board:hover{border-color:#4b555e;background:linear-gradient(90deg,rgba(25,185,255,.11),#0b0e11 34%,#0b0e11 66%,rgba(239,63,87,.11))}.role-duel-player{display:flex;flex-direction:column;justify-content:center;min-width:0;border-left:3px solid #19b9ff;padding:9px 12px;background:#091016}.role-duel-player--right{align-items:flex-end;text-align:right;border-left:0;border-right:3px solid #ef3f57;background:#11090c}.role-duel-player img{width:48px;height:48px;object-fit:contain;margin-bottom:8px}.role-duel-player span{color:#7f8991;font:800 9px/1 Inter;letter-spacing:.12em}.role-duel-player strong{margin-top:5px;font:850 20px/1 Inter;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.role-duel-center{display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:center}.role-duel-kicker{color:#7d878f;font:800 8px/1 Inter;letter-spacing:.18em}.role-duel-center>b{font:900 15px/1 Inter;color:#ff5b19;letter-spacing:.14em}.role-duel-metric{display:grid;grid-template-columns:1fr 100px 1fr;gap:8px;align-items:center;border-top:1px solid #20262b;padding-top:6px}.role-duel-metric strong{font:850 13px/1 Inter}.role-duel-metric span{color:#7d878f;font:800 8px/1 Inter;letter-spacing:.08em}.role-duel-center em{margin-top:3px;color:#aeb7be;font:800 8px/1 Inter;font-style:normal;letter-spacing:.12em}@media(max-width:780px){.role-duel-board{grid-template-columns:1fr 1fr}.role-duel-center{grid-column:1/-1;grid-row:2}.role-duel-player--right{grid-column:2;grid-row:1}.role-duel-metric{grid-template-columns:1fr 86px 1fr}}