/* ============================================================
   Liga Typera - style
   Paleta: navy #1a2332, gold #d4af37, blue #1a4c8b
   ============================================================ */

:root {
    --lt-navy:        #1a2332;
    --lt-navy-soft:   #2d3a4f;
    --lt-gold:        #d4af37;
    --lt-gold-soft:   #f4e4a8;
    --lt-blue:        #1a4c8b;
    --lt-blue-soft:   #2563a8;
    --lt-bg:          #f5f7fb;
    --lt-surface:     #ffffff;
    --lt-border:      #e4e8ef;
    --lt-border-soft: #eef1f6;
    --lt-text:        #1a2332;
    --lt-text-muted:  #64748b;
    --lt-text-dim:    #94a3b8;
    --lt-ok:          #10b981;
    --lt-ok-bg:       #ecfdf5;
    --lt-err:         #ef4444;
    --lt-err-bg:      #fef2f2;
    --lt-warn:        #d97706;
    --lt-warn-bg:     #fffbeb;
}

/* ----- Strona ----- */
.lt-page {
    padding: 1.5rem 0 4rem;
    background: var(--lt-bg);
    min-height: 60vh;
}
.lt-page .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* ----- Hero ----- */
.lt-hero {
    background: linear-gradient(135deg, var(--lt-navy) 0%, var(--lt-blue) 100%);
    color: #fff;
    border-radius: 14px;
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
    box-shadow: 0 6px 24px rgba(26, 35, 50, 0.18);
}
.lt-hero__main h2 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    color: #fff;
}
.lt-hero__main h2 i {
    margin-right: 0.4rem;
    background: linear-gradient(
        110deg,
        #AE802F 0%, #FFEFA7 15%, #AE802F 30%, #AE802F 42%,
        #fffdf0 48%, #fff 50%, #fffdf0 52%,
        #AE802F 58%, #AE802F 70%, #FFEFA7 85%, #AE802F 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: goldSweep 10s ease-in-out infinite;
}
.lt-hero__main p {
    margin: 0;
    color: rgba(255,255,255,0.85);
    font-size: 0.95rem;
}
.lt-hero__main strong {
    color: var(--lt-gold-soft);
}
.lt-hero__rules {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.lt-rule {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 10px;
    padding: 0.5rem 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 92px;
}
.lt-rule__pts {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(
        110deg,
        #AE802F 0%, #FFEFA7 15%, #AE802F 30%, #AE802F 42%,
        #fffdf0 48%, #fff 50%, #fffdf0 52%,
        #AE802F 58%, #AE802F 70%, #FFEFA7 85%, #AE802F 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: goldSweep 10s ease-in-out infinite;
}
.lt-rule__lbl {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.75);
    text-align: center;
    margin-top: 0.25rem;
    line-height: 1.2;
}

@media (max-width: 720px) {
    .lt-hero {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }
    .lt-hero__rules {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.45rem;
    }
    .lt-rule {
        min-width: 0;
        padding: 0.4rem 0.35rem;
    }
    .lt-rule__pts { font-size: 1.15rem; }
    .lt-rule__lbl { font-size: 0.65rem; }
}

@media (max-width: 380px) {
    .lt-hero { padding: 1rem; }
    .lt-hero__rules { gap: 0.3rem; }
    .lt-rule { padding: 0.35rem 0.25rem; }
    .lt-rule__pts { font-size: 1rem; }
    .lt-rule__lbl { font-size: 0.6rem; }
}

/* ----- Pasek z userem ----- */
.lt-user-summary {
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: 10px;
    padding: 0.7rem 1rem;
    margin-bottom: 1rem;
}
.lt-user-summary__inner {
    display: flex;
    gap: 0.85rem;
    align-items: center;
}
.lt-user-summary img {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--lt-gold);
}
.lt-user-summary__txt {
    font-size: 0.9rem;
    color: var(--lt-text-muted);
    line-height: 1.3;
}
.lt-user-summary__txt strong {
    color: var(--lt-text);
    display: block;
    font-size: 1rem;
}
.lt-user-summary__txt a {
    color: var(--lt-blue);
    text-decoration: none;
}
.lt-user-summary__txt a:hover { text-decoration: underline; }

/* ----- Tabs ----- */
.lt-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid var(--lt-border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}
.lt-tab {
    background: transparent;
    border: none;
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lt-text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
    font-family: inherit;
}
.lt-tab:hover { color: var(--lt-text); }
.lt-tab i { margin-right: 0.4rem; }
.lt-tab--active {
    color: var(--lt-blue);
    border-bottom-color: var(--lt-gold);
}

/* ----- Panes ----- */
.lt-pane { display: none; }
.lt-pane--active { display: block; }

/* ----- Loadery / Empty ----- */
.lt-loader, .lt-empty, .lt-empty-row {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--lt-text-muted);
    font-size: 1rem;
}
.lt-loader i, .lt-empty i { font-size: 1.5rem; margin-bottom: 0.5rem; display: block; }
.lt-empty i { color: var(--lt-text-dim); font-size: 2.5rem; }

.lt-error {
    background: var(--lt-err-bg);
    color: var(--lt-err);
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    margin: 1rem 0;
}

/* ----- CTA box (anon / banned) ----- */
.lt-cta-box {
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
}
.lt-cta-box h3 {
    margin: 0 0 0.5rem;
    color: var(--lt-text);
}
.lt-cta-box h3 i {
    margin-right: 0.5rem;
    background: linear-gradient(
        110deg,
        #AE802F 0%, #FFEFA7 15%, #AE802F 30%, #AE802F 42%,
        #fffdf0 48%, #fff 50%, #fffdf0 52%,
        #AE802F 58%, #AE802F 70%, #FFEFA7 85%, #AE802F 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: goldSweep 10s ease-in-out infinite;
}
.lt-cta-box p {
    margin: 0 0 1.25rem;
    color: var(--lt-text-muted);
}
.lt-cta-box--warn {
    background: var(--lt-warn-bg);
    border-color: #fde68a;
}
.lt-cta-box--warn h3 i { color: var(--lt-warn); }

.lt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lt-btn--primary {
    background: var(--lt-blue);
    color: #fff;
}
.lt-btn--primary:hover { background: var(--lt-blue-soft); }
.lt-btn--ghost {
    background: transparent;
    color: var(--lt-text);
    border-color: var(--lt-border);
}
.lt-btn--ghost:hover { background: var(--lt-border-soft); }
.lt-btn--ghost:disabled { opacity: 0.4; cursor: not-allowed; }

/* ----- Grupy meczow ----- */
.lt-group {
    margin-bottom: 1.25rem;
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: 12px;
    overflow: hidden;
}
.lt-group__head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    color: var(--lt-text);
}
.lt-group__head:hover { background: var(--lt-border-soft); }
.lt-group__icon {
    width: 32px; height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lt-gold), var(--lt-gold-soft));
    color: var(--lt-navy);
    position: relative;
    overflow: hidden;
}
.lt-group__icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%, transparent 35%,
        rgba(255, 255, 255, 0.35) 48%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.35) 52%,
        transparent 65%, transparent 100%
    );
    background-size: 300% 100%;
    animation: goldSweepBg 10s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}
.lt-group__icon > * { position: relative; z-index: 1; }
.lt-group__title {
    flex: 1;
    font-weight: 700;
    font-size: 1.05rem;
}
.lt-group__count {
    background: var(--lt-blue);
    color: #fff;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}
.lt-group__chevron {
    color: var(--lt-text-dim);
    transition: transform 0.2s;
}
.lt-group__head--open .lt-group__chevron {
    transform: rotate(0deg);
}
.lt-group__body {
    padding: 0.5rem 1rem 1rem;
    border-top: 1px solid var(--lt-border-soft);
}

/* ----- Round (sub-group) ----- */
.lt-round {
    margin: 0.5rem 0;
    border: 1px solid var(--lt-border-soft);
    border-radius: 10px;
    overflow: hidden;
}
.lt-round__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--lt-bg);
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    color: var(--lt-text);
    font-size: 0.95rem;
}
.lt-round__head:hover { background: var(--lt-border-soft); }
.lt-round__head span:first-child { flex: 1; text-align: left; }
.lt-round__count {
    background: var(--lt-text-dim);
    color: #fff;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
}
.lt-round__head--open { background: var(--lt-border-soft); }
.lt-round__head--open .fa-chevron-down { transform: rotate(180deg); }
.lt-round__head .fa-chevron-down { transition: transform 0.2s; color: var(--lt-text-dim); }
.lt-round__body {
    padding: 0.5rem 0.75rem;
    background: #fafbfd;
}

/* ----- Karta meczu ----- */
.lt-card {
    background: #fff;
    border: 1px solid var(--lt-border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.65rem;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.lt-card:hover { box-shadow: 0 2px 8px rgba(26,35,50,0.06); }
.lt-card--has-pred { border-color: var(--lt-blue); border-left-width: 3px; }
.lt-card--saved {
    border-color: var(--lt-ok);
    background: var(--lt-ok-bg);
    animation: lt-pulse 0.5s ease;
}
@keyframes lt-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.005); }
    100% { transform: scale(1); }
}
.lt-card--error { border-color: var(--lt-err); background: var(--lt-err-bg); }
.lt-card--locked { background: #fafbfd; opacity: 0.85; }

.lt-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--lt-text-muted);
    margin-bottom: 0.5rem;
}
.lt-card__round {
    background: var(--lt-border-soft);
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
}

.lt-card__teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.75rem;
    align-items: center;
}
.lt-team {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    justify-content: flex-end;
}
.lt-team--away { justify-content: flex-end; flex-direction: row-reverse; }
.lt-team__logo {
    width: 36px; height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}
.lt-team__name {
    font-weight: 600;
    color: var(--lt-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
}
.lt-team__pos {
    flex-shrink: 0;
    padding: 1px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--lt-text-muted);
    background: var(--lt-border-soft);
    border-radius: 6px;
    line-height: 1.4;
}

.lt-card__score {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.lt-score-input {
    width: 48px;
    height: 44px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lt-text);
    border: 2px solid var(--lt-border);
    border-radius: 8px;
    background: #fff;
    padding: 0;
    font-family: inherit;
    -moz-appearance: textfield;
}
.lt-score-input::-webkit-outer-spin-button,
.lt-score-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.lt-score-input:focus {
    outline: none;
    border-color: var(--lt-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}
.lt-score-input:disabled {
    background: var(--lt-border-soft);
    color: var(--lt-text-dim);
    cursor: not-allowed;
}
.lt-card__colon {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lt-text-dim);
}

.lt-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--lt-border-soft);
    font-size: 0.85rem;
    color: var(--lt-text-muted);
    min-height: 22px;
}
.lt-card__deadline { color: var(--lt-text-muted); }
.lt-card__deadline strong { color: var(--lt-blue); }
.lt-card__lock { color: var(--lt-text-dim); }
.lt-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
}
.lt-card--saved .lt-card__status { color: var(--lt-ok); }
.lt-card--error .lt-card__status { color: var(--lt-err); }

@media (max-width: 600px) {
    .lt-card__teams {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .lt-team, .lt-team--away {
        justify-content: flex-start;
        flex-direction: row;
    }
    .lt-card__score {
        justify-content: center;
        order: 3;
    }
    .lt-team__name { font-size: 0.9rem; }
}

/* ----- Filtry rankingu ----- */
.lt-filters {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.lt-filter-group { display: flex; flex-direction: column; gap: 0.4rem; }
.lt-filter-label {
    font-size: 0.8rem;
    color: var(--lt-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.lt-toggle-set {
    display: inline-flex;
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: 8px;
    padding: 3px;
}
.lt-toggle {
    background: transparent;
    border: none;
    padding: 0.45rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--lt-text-muted);
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.lt-toggle--active {
    background: var(--lt-navy);
    color: #fff;
}
.lt-toggle:not(.lt-toggle--active):hover {
    background: var(--lt-border-soft);
    color: var(--lt-text);
}

/* ----- Tabela rankingu ----- */
.lt-ranking-table-wrap, .lt-mytypes-table-wrap {
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: 12px;
    overflow-x: auto;
}
.lt-ranking-table, .lt-mytypes-table {
    width: 100%;
    border-collapse: collapse;
}
.lt-ranking-table th, .lt-ranking-table td,
.lt-mytypes-table th, .lt-mytypes-table td {
    padding: 0.7rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--lt-border-soft);
}
.lt-ranking-table th, .lt-mytypes-table th {
    background: var(--lt-bg);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--lt-text-muted);
    font-weight: 700;
}
.lt-ranking-table tr:last-child td,
.lt-mytypes-table tr:last-child td { border-bottom: none; }

.lt-col-pos { width: 50px; text-align: center; font-weight: 700; font-size: 1rem; }
.lt-col-num { text-align: center; }
.lt-col-user { min-width: 180px; }

/* ----- Sortowanie kolumn rankingu ----- */
.lt-th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s ease, background 0.15s ease;
}
.lt-th-sortable:hover {
    color: var(--lt-blue);
    background: var(--lt-border-soft);
}
.lt-th-sortable:focus-visible {
    outline: 2px solid var(--lt-blue);
    outline-offset: -2px;
}
.lt-sort-ico {
    margin-left: 0.35rem;
    font-size: 0.75rem;
    opacity: 0.4;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.lt-th-sortable:hover .lt-sort-ico { opacity: 0.8; }
.lt-th--sorted {
    color: var(--lt-navy);
    background: var(--lt-gold-soft);
}
.lt-th--sorted .lt-sort-ico {
    opacity: 1;
    color: var(--lt-gold);
}
.lt-rank-pts { font-weight: 700; color: var(--lt-blue); font-size: 1.05rem; }
.lt-rank-last { font-weight: 600; color: var(--lt-text); }
.lt-rank-mvp {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: linear-gradient(135deg, var(--lt-gold), var(--lt-gold-soft));
    color: var(--lt-navy);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    position: relative;
    overflow: hidden;
}
.lt-rank-mvp::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%, transparent 35%,
        rgba(255, 255, 255, 0.35) 48%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.35) 52%,
        transparent 65%, transparent 100%
    );
    background-size: 300% 100%;
    animation: goldSweepBg 10s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}
.lt-rank-mvp > * { position: relative; z-index: 1; }
.lt-rank-mvp i { color: var(--lt-navy); font-size: 0.8rem; }

.lt-rank-user {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.lt-rank-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--lt-border);
    background: var(--lt-navy);
}
.lt-rank-avatar--ph { background: linear-gradient(135deg, var(--lt-navy), var(--lt-blue)); }
.lt-rank-nick { font-weight: 600; color: var(--lt-text); }
.lt-rank-badge {
    background: var(--lt-gold);
    color: var(--lt-navy);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}
.lt-rank-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%, transparent 35%,
        rgba(255, 255, 255, 0.35) 48%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.35) 52%,
        transparent 65%, transparent 100%
    );
    background-size: 300% 100%;
    animation: goldSweepBg 10s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}
.lt-rank-self {
    background: var(--lt-warn-bg) !important;
}
.lt-rank-self td { font-weight: 600; }

@media (max-width: 720px) {
    .lt-col-hide-sm { display: none; }
    .lt-ranking-table th, .lt-ranking-table td {
        padding: 0.55rem 0.5rem;
    }
}

.lt-ranking-tfoot__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.5rem;
    background: var(--lt-bg);
}

.lt-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
.lt-pagination__info {
    font-size: 0.9rem;
    color: var(--lt-text-muted);
}

/* ----- Moje statystyki ----- */
.lt-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.lt-stat-tile {
    background: var(--lt-surface);
    border: 1px solid var(--lt-border);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 2px 8px rgba(26,35,50,0.04);
}
.lt-stat-tile__label {
    font-size: 0.8rem;
    color: var(--lt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.lt-stat-tile__pts {
    font-size: 2rem;
    font-weight: 700;
    color: var(--lt-blue);
    margin: 0.35rem 0;
    line-height: 1;
}
.lt-stat-tile__meta {
    font-size: 0.85rem;
    color: var(--lt-text-muted);
}

.lt-section-title {
    margin: 0 0 0.75rem;
    color: var(--lt-text);
    font-size: 1.15rem;
}
.lt-section-title i {
    margin-right: 0.4rem;
    background: linear-gradient(
        110deg,
        #AE802F 0%, #FFEFA7 15%, #AE802F 30%, #AE802F 42%,
        #fffdf0 48%, #fff 50%, #fffdf0 52%,
        #AE802F 58%, #AE802F 70%, #FFEFA7 85%, #AE802F 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: goldSweep 10s ease-in-out infinite;
}

/* ----- Moje typy - tabela ----- */
.lt-mt-match {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.lt-mt-date { font-size: 0.8rem; color: var(--lt-text-muted); }
.lt-dim { color: var(--lt-text-dim); }
.lt-perla-mark {
    display: inline-flex;
    margin-right: 0.3rem;
    background: linear-gradient(
        110deg,
        #AE802F 0%, #FFEFA7 15%, #AE802F 30%, #AE802F 42%,
        #fffdf0 48%, #fff 50%, #fffdf0 52%,
        #AE802F 58%, #AE802F 70%, #FFEFA7 85%, #AE802F 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: goldSweep 10s ease-in-out infinite;
}

.lt-pts {
    display: inline-block;
    min-width: 36px;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-weight: 700;
    text-align: center;
}
.lt-pts--win { background: var(--lt-ok-bg); color: var(--lt-ok); }
.lt-pts--mid { background: var(--lt-warn-bg); color: var(--lt-warn); }
.lt-pts--zero { background: var(--lt-border-soft); color: var(--lt-text-dim); }

/* ============================================================
   Modal profilu typera (otwierany z kliknięcia w wiersz rankingu)
   ============================================================ */

/* Klikalność wierszy rankingu */
.lt-ranking-table tbody tr {
    cursor: pointer;
    transition: background 0.15s ease;
}
.lt-ranking-table tbody tr:hover {
    background: var(--lt-border-soft);
}
.lt-ranking-table tbody tr.lt-rank-self:hover {
    background: #fdf3d6;
}

/* Overlay + kontener modalu */
.lt-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 35, 50, 0.72);
    backdrop-filter: blur(3px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
    animation: lt-fade-in 0.18s ease-out;
}
.lt-modal-overlay[hidden] { display: none; }

@keyframes lt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes lt-pop-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.lt-modal {
    background: var(--lt-surface);
    border-radius: 16px;
    max-width: 720px;
    width: 100%;
    max-height: 92vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    animation: lt-pop-in 0.22s ease-out;
    display: flex;
    flex-direction: column;
}
/* X jest siblingiem .lt-modal w overlay - dzięki temu zawsze renderowany NAD modalem,
   niezależnie od stacking context modalu/headera. Overlay jest position: fixed,
   więc X zostaje przyklejony do prawego górnego rogu viewportu (standardowy wzorzec). */
.lt-modal-overlay > .lt-modal__close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    border: 2px solid var(--lt-navy);
    background: #fff;
    color: var(--lt-navy);
    font-size: 1.8rem;
    line-height: 1;
    font-weight: 700;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000; /* nad wszystkim w overlayu */
    transition: background 0.15s, transform 0.15s, color 0.15s;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
}
.lt-modal-overlay > .lt-modal__close:hover,
.lt-modal-overlay > .lt-modal__close:focus-visible {
    background: var(--lt-gold);
    color: var(--lt-navy);
    border-color: var(--lt-navy);
    transform: rotate(90deg);
    outline: none;
}
.lt-modal__body {
    padding: 0;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* ----- Profil: header z avatarem ----- */
.lt-profile__head {
    background: linear-gradient(135deg, var(--lt-navy) 0%, var(--lt-blue) 100%);
    color: #fff;
    padding: 1.75rem 1.5rem 1.5rem;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    border-radius: 16px 16px 0 0;
}
.lt-profile__avatar-wrap {
    position: relative;
    flex-shrink: 0;
}
.lt-profile__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--lt-gold);
    background: var(--lt-navy);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
    display: block;
}
.lt-profile__avatar-ph {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid var(--lt-gold);
    background: linear-gradient(135deg, var(--lt-navy), var(--lt-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    color: var(--lt-gold-soft);
    font-weight: 700;
}
/* hidden attribute musi nadpisac display:flex */
.lt-profile__avatar[hidden],
.lt-profile__avatar-ph[hidden] { display: none !important; }
.lt-profile__title h3 {
    margin: 0 0 0.3rem;
    font-size: 1.5rem;
    color: #fff;
    line-height: 1.2;
}
.lt-profile__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
}
.lt-profile__subtitle strong { color: var(--lt-gold-soft); }

/* ----- Statystyki: 4 karty ----- */
.lt-profile__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    padding: 1.25rem 1.5rem 0;
}
.lt-profile__stat {
    background: var(--lt-border-soft);
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
    text-align: center;
    border: 1px solid var(--lt-border);
}
.lt-profile__stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--lt-navy);
    line-height: 1.1;
}
.lt-profile__stat-value--gold {
    /* Klubowy gold sweep - spojnie z reszta strony */
    background: linear-gradient(
        110deg,
        #AE802F 0%, #FFEFA7 15%, #AE802F 30%, #AE802F 42%,
        #fffdf0 48%, #fff 50%, #fffdf0 52%,
        #AE802F 58%, #AE802F 70%, #FFEFA7 85%, #AE802F 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: goldSweep 10s ease-in-out infinite;
}
.lt-profile__stat-value--blue { color: var(--lt-blue); }
.lt-profile__stat-label {
    display: block;
    font-size: 0.72rem;
    color: var(--lt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.2rem;
}

/* ----- Wykres formy (SVG bar chart) ----- */
.lt-profile__chart-wrap {
    padding: 1.25rem 1.5rem 0;
}
.lt-profile__section-title {
    margin: 1.25rem 1.5rem 0.75rem;
    font-size: 1rem;
    color: var(--lt-navy);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.lt-profile__section-title i {
    background: linear-gradient(
        110deg,
        #AE802F 0%, #FFEFA7 15%, #AE802F 30%, #AE802F 42%,
        #fffdf0 48%, #fff 50%, #fffdf0 52%,
        #AE802F 58%, #AE802F 70%, #FFEFA7 85%, #AE802F 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: goldSweep 10s ease-in-out infinite;
}
/* Wewnątrz chart-wrap (który już ma własny padding) nagłówek nie potrzebuje marginesów bocznych */
.lt-profile__chart-wrap .lt-profile__section-title {
    margin: 0 0 0.75rem;
}

.lt-profile__chart {
    width: 100%;
    height: 180px;
    max-height: 200px;
    display: block;
    background: var(--lt-bg);
    border-radius: 10px;
    padding: 0.5rem;
    box-sizing: border-box;
}
.lt-profile__chart-bar {
    fill: var(--lt-blue);
    transition: fill 0.15s;
}
.lt-profile__chart-bar--zero { fill: var(--lt-border); }
.lt-profile__chart-bar--high { fill: var(--lt-gold); }
.lt-profile__chart-axis {
    fill: var(--lt-text-muted);
    font-size: 10px;
    font-family: inherit;
}
.lt-profile__chart-value {
    fill: var(--lt-navy);
    font-size: 10px;
    font-weight: 700;
    font-family: inherit;
}
.lt-profile__chart-legend {
    margin: 0.4rem 0 0;
    font-size: 0.8rem;
    color: var(--lt-text-muted);
    text-align: center;
}

/* ----- Lista typów pogrupowanych po kolejkach ----- */
.lt-profile__preds {
    padding: 0 1.5rem 1.5rem;
}
.lt-profile__preds--show-zeros .lt-profile__pred--zero { display: grid; }
.lt-profile__preds:not(.lt-profile__preds--show-zeros) .lt-profile__pred--zero { display: none; }

.lt-profile__round {
    margin-bottom: 1rem;
    border: 1px solid var(--lt-border);
    border-radius: 10px;
    overflow: hidden;
}
.lt-profile__round:last-child { margin-bottom: 0; }

.lt-profile__round-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.85rem;
    background: var(--lt-navy);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
}
.lt-profile__round-pts {
    font-weight: 700;
    background: linear-gradient(
        110deg,
        #AE802F 0%, #FFEFA7 15%, #AE802F 30%, #AE802F 42%,
        #fffdf0 48%, #fff 50%, #fffdf0 52%,
        #AE802F 58%, #AE802F 70%, #FFEFA7 85%, #AE802F 100%
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    animation: goldSweep 10s ease-in-out infinite;
}

.lt-profile__pred-cols {
    display: grid;
    grid-template-columns: 1fr 60px 60px 60px;
    gap: 0.75rem;
    padding: 0.4rem 0.85rem;
    background: var(--lt-border-soft);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--lt-text-muted);
    border-bottom: 1px solid var(--lt-border);
}
.lt-profile__pred-cols-center { text-align: center; }

.lt-profile__pred {
    display: grid;
    grid-template-columns: 1fr 60px 60px 60px;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    border-top: 1px solid var(--lt-border-soft);
    align-items: center;
    font-size: 0.92rem;
    background: var(--lt-surface);
}
.lt-profile__pred-cols + .lt-profile__pred { border-top: none; }
.lt-profile__pred:first-of-type { border-top: none; }
.lt-profile__pred--exact {
    background: linear-gradient(90deg, var(--lt-gold-soft) 0%, rgba(244, 228, 168, 0.15) 100%);
    border-left: 3px solid var(--lt-gold);
    padding-left: calc(0.85rem - 3px);
}
.lt-profile__pred--partial {
    border-left: 3px solid var(--lt-blue);
    padding-left: calc(0.85rem - 3px);
}
.lt-profile__pred--zero {
    color: var(--lt-text-dim);
    border-left: 3px solid var(--lt-border);
    padding-left: calc(0.85rem - 3px);
}

.lt-profile__pred-match {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.lt-profile__pred-teams {
    font-weight: 600;
    color: var(--lt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lt-profile__pred--zero .lt-profile__pred-teams { color: var(--lt-text-dim); }
.lt-profile__pred-perla-mark {
    color: var(--lt-gold);
    margin-right: 0.3rem;
}
.lt-profile__pred-date {
    font-size: 0.75rem;
    color: var(--lt-text-muted);
}
/* Skrót "typ X · wynik Y" należy do wąskiego ekranu - tam kolumny się nie mieszczą
   i CSS je chowa. Na dużym ekranie te same liczby stoją w kolumnach obok. */
.lt-profile__pred-mini { display: none; }
.lt-profile__pred-typ,
.lt-profile__pred-res {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: var(--lt-border-soft);
    color: var(--lt-text);
    min-width: 44px;
    text-align: center;
}
.lt-profile__pred-res { background: var(--lt-navy); color: #fff; }
.lt-profile__pred-pts {
    font-weight: 700;
    min-width: 44px;
    text-align: center;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}
.lt-profile__pred-pts--exact {
    background: var(--lt-gold);
    color: var(--lt-navy);
    position: relative;
    overflow: hidden;
}
.lt-profile__pred-pts--exact::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%, transparent 35%,
        rgba(255, 255, 255, 0.35) 48%,
        rgba(255, 255, 255, 0.45) 50%,
        rgba(255, 255, 255, 0.35) 52%,
        transparent 65%, transparent 100%
    );
    background-size: 300% 100%;
    animation: goldSweepBg 10s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}
.lt-profile__pred-pts--partial { background: var(--lt-warn-bg); color: var(--lt-warn); }
.lt-profile__pred-pts--zero { background: var(--lt-border-soft); color: var(--lt-text-dim); }

.lt-profile__empty {
    text-align: center;
    padding: 1.5rem;
    margin: 0 1.5rem 1.5rem;
    color: var(--lt-text-muted);
    background: var(--lt-bg);
    border-radius: 10px;
}
.lt-profile__empty i {
    font-size: 1.8rem;
    color: var(--lt-text-dim);
    margin-bottom: 0.4rem;
    display: block;
}
.lt-profile__loading,
.lt-profile__error {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--lt-text-muted);
}
.lt-profile__error i {
    color: var(--lt-err);
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

/* ==========================================================================
   KLIKALNE WYNIKI I NAZWY DRUŻYN (modale statystyk meczowych)
   ==========================================================================
   Atrybuty dokłada js/liga-typera.js, obsługę kliknięć ma js/match-modals.js,
   a kursor i obrys fokusa - klasa .lns-klik z css/match-modals.css. Tutaj zostaje
   wyłącznie to, czego tamten arkusz nie może wiedzieć: jak wyróżnić element w
   TEJ tabeli, żeby było widać, że prowadzi dalej.

   Sygnał jest celowo delikatny. W wierszu obok wyniku stoi typ kibica, który
   klikalny nie jest - gdyby oba wyglądały jak przyciski, kibic klikałby w zły. */

.lt-profile__pred-res.lns-klik,
.lt-profile__pred-mini.lns-klik,
.lt-mytypes-table [data-lns-match] {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.lt-profile__pred-res.lns-klik:hover,
.lt-profile__pred-mini.lns-klik:hover,
.lt-mytypes-table [data-lns-match]:hover {
    text-decoration-color: currentColor;
}
/* Plakietka wyniku w profilu ma ciemne tło i sama w sobie wygląda jak przycisk,
   więc na dużym ekranie wystarcza jej obwódka zamiast podkreślenia. */
@media (hover: hover) {
    .lt-profile__pred-res.lns-klik { text-decoration: none; }
    .lt-profile__pred-res.lns-klik:hover {
        box-shadow: 0 0 0 2px var(--lt-gold);
    }
}

/* ----- Responsive ----- */
@media (max-width: 640px) {
    .lt-modal { border-radius: 12px; max-height: 95vh; }
    .lt-profile__head {
        padding: 1.25rem 1rem 1rem;
        gap: 0.9rem;
        border-radius: 12px 12px 0 0;
    }
    .lt-modal-overlay > .lt-modal__close {
        top: 12px;
        right: 12px;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    .lt-profile__avatar,
    .lt-profile__avatar-ph {
        width: 72px;
        height: 72px;
        border-width: 2px;
    }
    .lt-profile__avatar-ph { font-size: 1.8rem; }
    .lt-profile__title h3 { font-size: 1.2rem; }
    .lt-profile__stats {
        grid-template-columns: repeat(2, 1fr);
        padding: 1rem 1rem 0;
    }
    .lt-profile__chart-wrap,
    .lt-profile__preds {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .lt-profile__section-title { margin-left: 1rem; margin-right: 1rem; }
    .lt-profile__chart-wrap .lt-profile__section-title { margin-left: 0; margin-right: 0; }
    .lt-profile__empty { margin-left: 1rem; margin-right: 1rem; }
    .lt-profile__pred {
        grid-template-columns: 1fr auto;
        gap: 0.5rem;
        font-size: 0.88rem;
    }
    .lt-profile__pred-typ,
    .lt-profile__pred-res {
        display: none;
    }
    .lt-profile__pred-cols { display: none; }
    .lt-profile__pred-mini {
        display: inline-block;
        margin-left: 0.4rem;
        padding: 0.1rem 0.4rem;
        background: var(--lt-border-soft);
        border-radius: 4px;
        font-size: 0.78rem;
        font-weight: 600;
        color: var(--lt-text-muted);
    }
    /* Skrót prowadzący do okna meczu jest celem dotyku - stąd wyższy pasek
       i wyraźniejszy kolor niż przy skrócie meczu, którego w danych nie mamy. */
    .lt-profile__pred-mini.lns-klik {
        padding: 0.3rem 0.45rem;
        color: var(--lt-text);
    }
}