/* TP = Team Page - Prefix to avoid conflicts */
:root {
    --tp-primary: var(--primary);
    --tp-accent: var(--accent);
    --tp-accent-dark: var(--accent);
    --tp-text: #111917;
    --tp-text-light: #69736f;
    --tp-border: #f2f4f3;
    --tp-bg: #f7f9f8;
}

.tp-page-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    display: flex;
    gap: 25px;
    padding: 0 20px;
}

.tp-content-area {
    flex: 1;
    min-width: 0;
}

/* Detailed Trophies List */
.tp-trophies-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 25px;
}

.tp-trophy-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: linear-gradient(135deg, #ffffff 0%, #f7f9f8 100%);
    border-radius: 16px;
    border: 1px solid var(--tp-border);
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.tp-trophy-item:hover {
    transform: translateY(-2px);
    border-color: var(--tp-accent);
    box-shadow: 0 8px 20px rgba(0,230,118,0.1);
}

.tp-trophy-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    flex-shrink: 0;
    font-size: 18px;
}

.tp-trophy-details {
    flex: 1;
}

.tp-trophy-league {
    font-size: 16px;
    font-weight: 800;
    color: var(--tp-primary);
    margin-bottom: 2px;
}

.tp-trophy-season {
    font-size: 13px;
    font-weight: 700;
    color: var(--tp-accent-dark);
    margin-bottom: 2px;
}

.tp-trophy-country {
    font-size: 11px;
    color: var(--tp-text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Team Header Premium */









/* Follow Banner Premium */








.tp-follow-input-v2 {
    padding: 14px 20px 14px 45px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: white;
    font-size: 14px;
    min-width: 280px;
    outline: none;
    transition: all 0.3s;
    color: var(--tp-text);
}

.tp-follow-input-v2:focus {
    box-shadow: 0 0 0 4px rgba(0, 255, 133, 0.2);
}

.tp-btn-follow-v2 {
    background: var(--tp-accent);
    color: #000;
    border: none;
    padding: 14px 25px;
    border-radius: 14px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.tp-btn-follow-v2:hover {
    background: var(--tp-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 255, 133, 0.3);
}

@media (max-width: 992px) {
    .tp-follow-banner-premium {
        flex-direction: column;
        text-align: center;
        padding: 40px 25px;
    }
    .tp-follow-form-container form {
        flex-direction: column;
        width: 100%;
    }
    .tp-input-group, .tp-follow-input-v2, .tp-btn-follow-v2 {
        width: 100%;
    }
}

.tp-alert {
    padding: 15px 20px;
    border-radius: 15px;
    margin-bottom: 30px;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.tp-alert-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.tp-alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fbd8de; }
.tp-alert-info { background: #f7f9f8; color: var(--accent); border: 1px solid #cfe6e2; }

/* Stats Section Premium */
.tp-stats-section {
    background: white !important;
    border-radius: 24px !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    border: 1px solid var(--tp-border) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    display: block !important;
}

.tp-stats-header {
    margin-bottom: 25px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.tp-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 15px !important;
    margin-bottom: 35px !important;
}

.tp-stat-card {
    background: #f7f9f8 !important;
    padding: 20px 15px !important;
    border-radius: 18px !important;
    text-align: center !important;
    border: 1px solid transparent !important;
    transition: all 0.3s !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.tp-stat-card:hover {
    border-color: var(--tp-accent) !important;
    background: white !important;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05) !important;
}

.tp-stat-value {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: var(--tp-primary) !important;
    display: block !important;
    margin-bottom: 5px !important;
}

.tp-stat-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--tp-text-light) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Goals by Time */
.tp-goals-by-time {
    background: #f7f9f8 !important;
    border-radius: 20px !important;
    padding: 25px !important;
    margin-bottom: 30px !important;
}

.tp-time-intervals {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 15px !important;
}

.tp-interval-bar {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

.tp-interval-label {
    width: 60px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--tp-text-light) !important;
}

.tp-bar-container {
    flex: 1 !important;
    height: 10px !important;
    background: #e4e9e7 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
}

.tp-bar {
    height: 100% !important;
    background: linear-gradient(90deg, var(--tp-accent-dark) 0%, var(--tp-accent) 100%) !important;
    border-radius: 5px !important;
}

.tp-interval-value {
    width: 40px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--tp-primary) !important;
    text-align: right !important;
}

/* Merchandising Sidebar Section */
.merch-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.merch-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: #fff;
    border: 1px solid #eef2f1;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.merch-item:hover {
    transform: translateX(5px);
    border-color: var(--tp-primary);
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.1);
}

.merch-img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    background: #f7f9f8;
    border-radius: 8px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.merch-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.merch-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.merch-name {
    font-size: 13px;
    font-weight: 700;
    color: #1f2724;
    line-height: 1.3;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.merch-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.merch-price {
    font-size: 14px;
    font-weight: 800;
    color: var(--primary);
}

.merch-store {
    font-size: 10px;
    color: #98a3a0;
    font-weight: 600;
    text-transform: uppercase;
    background: #f7f9f8;
    padding: 2px 6px;
    border-radius: 4px;
}

.tp-interval-value {
    width: 40px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--tp-primary) !important;
    text-align: right !important;
}

/* Penalties */
.tp-penalties-section {
    margin-top: 20px !important;
}

.tp-penalty-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
    margin-top: 15px !important;
}

.tp-penalty-item {
    background: #f7f9f8 !important;
    padding: 15px !important;
    border-radius: 15px !important;
    text-align: center !important;
}

.tp-penalty-value {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--tp-primary) !important;
}

.tp-penalty-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--tp-text-light) !important;
    text-transform: uppercase !important;
}

/* Grid Layout for Team Page */
.tp-main-grid {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}

.tp-content-main {
    flex: 1;
    min-width: 0;
}

.tp-sidebar-right {
    width: 320px;
    flex-shrink: 0;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .tp-page-wrapper {
        display: block;
    }
    .tp-page-wrapper .left-sidebar {
        margin-bottom: 30px;
    }
}

@media (max-width: 1024px) {
    .tp-main-grid {
        flex-direction: column;
    }
    .tp-sidebar-right {
        width: 100%;
    }
    .tp-follow-banner {
        flex-direction: column;
        text-align: center;
    }
    .tp-follow-input {
        width: 100%;
    }
    .tp-btn-follow {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .tp-header-premium {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        gap: 20px;
    }
    
    .tp-logo-large {
        width: 100px !important;
        height: 100px !important;
    }
    
    .tp-info-content h1 {
        font-size: 32px !important;
    }
    
    .tp-meta-badges {
        justify-content: center;
    }
    
    .tp-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Eventi Ultima Partita - Premium Style */
.tp-events-list-premium {
    position: relative;
    padding-left: 20px;
    margin-top: 15px;
}

.tp-events-list-premium::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #e4e9e7;
    border-radius: 2px;
}

.tp-event-item-premium {
    position: relative;
    margin-bottom: 20px;
    padding-left: 25px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tp-event-item-premium::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 6px;
    width: 10px;
    height: 10px;
    background: white;
    border: 2px solid var(--tp-accent);
    border-radius: 50%;
    z-index: 1;
}

.tp-event-time-premium {
    font-size: 11px;
    font-weight: 800;
    color: var(--tp-accent-dark);
    background: rgba(0,230,118,0.1);
    padding: 2px 8px;
    border-radius: 10px;
    width: fit-content;
}

.tp-event-content-premium {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tp-event-icon-premium {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.tp-event-player-premium {
    font-size: 13px;
    font-weight: 700;
    color: var(--tp-primary);
}

.tp-event-detail-premium {
    font-size: 11px;
    color: var(--tp-text-light);
    font-weight: 500;
}

/* Squad Area */
.tp-squad-area {
    margin-top: 40px;
}

img[loading="lazy"] {
    content-visibility: auto;
}

/* --- ROSA, riscritta il 24/08/2026 ---------------------------------------
   Prima: griglia di schede minmax(180px, 1fr), foto tonda da 80px, testo
   centrato e il ruolo ripetuto sotto ogni nome anche se il titolo del reparto
   lo diceva gia'. Quattro reparti prendevano mezzo schermo.
   Ora: righe da 44px. Ci stanno due o tre colonne nella stessa larghezza e la
   rosa intera si legge senza scorrere. */

.tp-squad-heading {
    font-size: 20px;
    font-weight: 800;
    color: var(--tp-primary);
    margin: 0 0 15px;
}

.tp-squad-summary {
    background: white;
    border: 1px solid var(--tp-border);
    border-radius: 16px;
    padding: 15px 18px;
    margin-bottom: 25px;
}

.tp-squad-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
}

.tp-squad-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.tp-squad-stat strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--tp-primary);
    line-height: 1;
}

.tp-squad-stat span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tp-text-light);
}

.tp-squad-parziale p {
    margin: 0;
    font-size: 13px;
    color: var(--tp-text-light);
    line-height: 1.5;
}

.tp-squad-parziale strong {
    color: var(--tp-text);
}

/* Il valore rosa e' l'unico numero della striscia che non viene dalla stessa
   fonte degli altri: sta nel verde petrolio del sito perche' si veda che e' di
   un'altra natura, e sotto c'e' scritto da dove arriva e di quando e'. */
.tp-squad-valore strong {
    color: var(--tp-primary);
}

.tp-squad-fonte {
    margin: 10px 0 0;
    font-size: 11px;
    color: var(--tp-text-light);
    line-height: 1.5;
}

.tp-squad-parziale .tp-squad-fonte {
    margin-top: 8px;
}

.tp-squad-extremes {
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--tp-border);
    font-size: 13px;
    color: var(--tp-text-light);
    line-height: 1.5;
}

.tp-squad-extremes strong {
    color: var(--tp-text);
    font-weight: 700;
}

.role-section {
    margin-bottom: 22px;
}

.role-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--tp-text-light);
    margin: 0 0 10px;
}

.role-count {
    font-size: 10px;
    font-weight: 800;
    color: var(--tp-accent-dark);
    background: rgba(0,230,118,0.12);
    padding: 2px 7px;
    border-radius: 10px;
    letter-spacing: 0;
}

/* ------------------------------------------------------------------ la rosa
   24/08/2026, seconda versione. La prima erano schede da 180px con la foto tonda
   da 80: quattro reparti occupavano mezzo schermo. La seconda erano righe, e
   sembravano un elenco telefonico. Questa e' una scheda vera ma stretta ~120px:
   ci stanno sette per riga su desktop, e una rosa da 25 sta in quattro file.

   Il numero di maglia sta SULLA foto e non accanto al nome: e' il posto dove lo
   cerca chi guarda una rosa, e libera la riga del nome per il nome intero. */
.tp-squad-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
}

.tp-squad-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 6px 10px;
    border: 1px solid var(--tp-border);
    border-radius: 12px;
    background: white;
    min-width: 0;
    text-align: center;
    transition: border-color 0.2s, transform 0.2s;
}

.tp-squad-card:hover {
    border-color: var(--tp-accent);
    transform: translateY(-2px);
}

.tp-squad-figure {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.tp-squad-photo {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #eef2f1;
    display: block;
}

/* Il numero: pastiglia scura in basso a destra della foto. `line-height` uguale
   all'altezza centra la cifra senza padding, che con due cifre sfonderebbe. */
.tp-squad-num {
    position: absolute;
    right: -2px;
    bottom: -2px;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    padding: 0 4px;
    border-radius: 10px;
    background: var(--tp-primary);
    color: white;
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    border: 2px solid white;
    box-sizing: content-box;
}

.tp-squad-cap {
    position: absolute;
    left: -2px;
    top: -2px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 50%;
    background: var(--tp-accent-dark);
    color: white;
    font-size: 10px;
    font-weight: 800;
    border: 2px solid white;
}

/* Due righe al massimo, poi i puntini: "Gianmarco Zigoni" su una scheda da 118px
   sta in due righe, e troncarlo alla prima lo renderebbe irriconoscibile. */
.tp-squad-name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--tp-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.tp-squad-age {
    font-size: 11px;
    font-weight: 600;
    color: var(--tp-text-light);
    font-variant-numeric: tabular-nums;
}

/* Le pastiglie vanno a capo da sole: su una scheda stretta tre statistiche in
   fila uscirebbero dal bordo. In Serie C e D questo blocco non esiste proprio. */
.tp-squad-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3px;
    margin-top: 2px;
}

.tp-chip {
    font-size: 10px;
    font-weight: 600;
    line-height: 1.6;
    padding: 0 5px;
    border-radius: 6px;
    background: var(--tp-bg);
    color: var(--tp-text-light);
    white-space: nowrap;
}

.tp-chip b {
    font-weight: 800;
    color: var(--tp-primary);
}

/* I cartellini si riconoscono dal colore, non dalla parola: la parola non ci sta.
   Il testo resta scuro perche' su giallo il bianco non si legge. */
.tp-chip--giallo {
    background: #fde68a;
    color: #713f12;
    font-weight: 800;
}

.tp-chip--rosso {
    background: #fecaca;
    color: #7f1d1d;
    font-weight: 800;
}

/* Il voto medio e' l'unico numero con cui si confrontano due giocatori: e'
   l'unico in negativo, cosi' si trova senza cercarlo. */
.tp-chip--voto {
    background: var(--tp-primary);
    color: white;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* Sotto i 400px le schede da 118 lascerebbero una colonna sola con mezzo schermo
   vuoto a destra: si scende a due colonne strette. */
@media (max-width: 420px) {
    .tp-squad-list {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .tp-squad-card { padding: 10px 4px 8px; }
}

/* Team News Premium Widget */
.team-news-list-premium {
    display: flex;
    flex-direction: column;
}

.news-item-premium a:hover {
    color: var(--tp-accent-dark) !important;
}

/* Sidebar Widget Overrides */
.tp-sidebar-right .widget {
    background: white !important;
    border-radius: 20px !important;
    padding: 20px !important;
    margin-bottom: 25px !important;
    border: 1px solid var(--tp-border) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
}

.tp-sidebar-right .widget-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--tp-primary) !important;
    border-bottom: 2px solid var(--tp-accent) !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Match & Standing Cards */
.next-match-card, .mini-standing-card {
    background: white !important;
    border-radius: 20px !important;
    margin-bottom: 25px !important;
    border: 1px solid var(--tp-border) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
    overflow: hidden !important;
}

.next-match-card {
    padding: 20px !important;
}

.next-match-teams {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.next-match-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 40%;
    text-align: center;
}

.next-match-team img {
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.next-match-team span {
    font-size: 12px;
    font-weight: 700;
    color: var(--tp-primary);
}

.form-dots {
    display: flex;
    gap: 5px;
    padding: 0 20px 20px;
}

.form-badge {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: white;
}

.form-W { background-color: #22c55e; color: white; }
.form-D { background-color: var(--secondary); color: white; }
.form-L { background-color: var(--rosso); color: white; }

/* Calciomercato Widget */
.tp-transfers-tabs {
    display: flex;
    gap: 10px;
    margin: 15px 20px;
    background: #eef2f1;
    padding: 4px;
    border-radius: 10px;
}

.tp-transfer-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 8px;
    font-size: 11px;
    font-weight: 800;
    color: #69736f;
    border-radius: 7px;
    cursor: pointer;
    transition: all 0.2s;
}

.tp-transfer-tab.active {
    background: white;
    color: var(--tp-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.tp-transfer-list {
    padding: 0 20px 20px;
}

.tp-transfer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eef2f1;
}

.tp-transfer-item:last-child {
    border-bottom: none;
}

.tr-player-photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef2f1;
    border: 1px solid #e4e9e7;
}

.tr-player-info-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tr-player-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--tp-text);
}

.tr-details {
    font-size: 10px;
    color: var(--tp-text-light);
    margin-top: 2px;
}

.tr-type {
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
}

.tr-in {
    background: #ecfdf5;
    color: var(--primary);
}

.tr-out {
    background: #fef2f2;
    color: var(--rosso);
}


/* ============================================================================
   TESTATA SQUADRA — riscritta il 20/08/2026
   Prima erano due lastroni petrolio impilati che si prendevano tutto il primo
   schermo per dire "fondata nel 1902" e una frase di riempimento uguale per
   tutte le squadre. Qui il colore serve solo ai numeri: il resto e' bianco,
   grigio e icone.
   ========================================================================== */
.tp-testata {
    background: var(--card-bg);
    border: 1px solid #eef2f1;
    border-radius: 16px;
    padding: 22px 26px;
    margin-bottom: 14px;
}

.tp-testata-alto { display: flex; align-items: flex-start; gap: 18px; }

.tp-stemma {
    width: 76px; height: 76px; object-fit: contain; flex-shrink: 0;
    background: #f7f9f8; border-radius: 12px; padding: 8px;
}

.tp-titolo { flex: 1; min-width: 0; }
.tp-titolo h1 {
    margin: 2px 0 8px; font-size: 27px; font-weight: 800;
    color: #111917; letter-spacing: -0.9px; line-height: 1.1;
}

.tp-sottotitolo {
    display: flex; flex-wrap: wrap; gap: 6px 18px;
    font-size: 12.5px; color: #69736f; line-height: 1.5;
}
.tp-sottotitolo span { display: inline-flex; align-items: center; gap: 6px; }
.tp-sottotitolo i { color: #98a3a0; font-size: 11px; width: 12px; text-align: center; }

.tp-campionato {
    flex-shrink: 0; align-self: flex-start;
    background: var(--primary-light); color: var(--accent);
    font-size: 10.5px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
    padding: 7px 13px; border-radius: 7px; text-decoration: none;
    border: 1px solid rgba(15, 118, 110, 0.14); transition: background .15s;
}
.tp-campionato:hover { background: #d5ebe8; }

/* I numeri. Sono l'unica cosa colorata della scheda, ed e' voluto: sono
   l'informazione per cui uno apre la pagina di una squadra. */
.tp-cifre {
    display: flex; flex-wrap: wrap; gap: 0;
    margin-top: 20px; padding-top: 18px; border-top: 1px solid #eef2f1;
}
.tp-cifra {
    display: flex; flex-direction: column; gap: 5px;
    padding: 0 22px; border-right: 1px solid #eef2f1;
}
.tp-cifra:first-child { padding-left: 0; }
.tp-cifra:last-child { border-right: none; }

.tp-num {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 25px; font-weight: 700; color: var(--primary);
    line-height: 1; letter-spacing: -0.5px;
}
.tp-num sup { font-size: 14px; top: -0.5em; }
.tp-num i { font-style: normal; color: #ccd4d2; margin: 0 1px; }
.tp-eti {
    font-size: 8.5px; font-weight: 800; letter-spacing: 0.9px;
    color: #98a3a0; text-transform: uppercase; white-space: nowrap;
}

/* La forma. V petrolio, N grigio, P rosso — le stesse tre tinte del resto del
   sito, nessuna quarta. */
.tp-forma { display: flex; gap: 4px; }
.tp-e {
    width: 21px; height: 21px; border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 800; color: #fff;
}
.tp-e-w { background: var(--primary); }
.tp-e-d { background: #b8c2be; }
.tp-e-l { background: var(--rosso); }

/* --- La striscia dell'avviso gol ---------------------------------------- */
.tp-avviso {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
    background: var(--primary-light); border: 1px solid rgba(15, 118, 110, 0.14);
    border-radius: 12px; padding: 13px 18px; margin-bottom: 20px;
}
.tp-avviso-testo {
    display: flex; align-items: center; gap: 9px; flex: 1; min-width: 220px;
    font-size: 13px; color: #1f2724;
}
.tp-avviso-testo i { color: var(--primary); font-size: 14px; }
.tp-avviso-form { display: flex; gap: 7px; }
.tp-avviso-form input[type="email"] {
    border: 1px solid #cfe3e0; border-radius: 8px; padding: 8px 12px;
    font-size: 13px; font-family: inherit; min-width: 190px; background: #fff; color: #1f2724;
}
.tp-avviso-form input[type="email"]:focus { outline: 2px solid rgba(15, 118, 110, 0.25); outline-offset: 1px; }
.tp-avviso-form button {
    background: var(--primary); color: #fff; border: none; border-radius: 8px;
    padding: 8px 18px; font-size: 12.5px; font-weight: 800; font-family: inherit;
    cursor: pointer; transition: background .15s;
}
.tp-avviso-form button:hover { background: var(--accent); }

/* Era #69736f su fondo petrolio: illeggibile. Su fondo chiaro torna leggibile. */
.tp-avviso-privacy {
    display: flex; align-items: flex-start; gap: 7px; width: 100%;
    font-size: 11px; color: #4c5551; line-height: 1.45; cursor: pointer;
}
.tp-avviso-privacy input { margin-top: 2px; flex-shrink: 0; }
.tp-avviso-privacy a { color: var(--primary); text-decoration: underline; }

@media (max-width: 768px) {
    .tp-testata { padding: 18px; }
    .tp-testata-alto { flex-wrap: wrap; gap: 14px; }
    .tp-stemma { width: 58px; height: 58px; }
    .tp-titolo h1 { font-size: 21px; }
    .tp-campionato { order: 3; width: 100%; text-align: center; }
    .tp-cifre { gap: 16px 0; }
    .tp-cifra { padding: 0 14px; flex: 1 1 40%; }
    .tp-cifra:nth-child(2n) { border-right: none; }
    .tp-avviso-form { width: 100%; }
    .tp-avviso-form input[type="email"] { flex: 1; min-width: 0; }
}

/* --- Schede della colonna destra: allenatore e stadio ----------------------
   L'allenatore viene da /coachs, la foto dello stadio da venue.image — che era
   gia' dentro la risposta /teams che la pagina scaricava e buttava via.
   L'API non ha i colori sociali ne' quelli della maglia: non esiste il campo. */
.tp-scheda {
    background: var(--card-bg);
    border: 1px solid #eef2f1;
    border-radius: 14px;
    margin-bottom: 16px;
    overflow: hidden;
}
.tp-scheda-titolo {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 16px 12px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.9px;
    color: #1f2724; border-bottom: 1px solid #eef2f1;
}
.tp-scheda-titolo i { color: var(--primary); font-size: 12px; }

.tp-mister { display: flex; align-items: center; gap: 13px; padding: 14px 16px; }
.tp-mister img {
    width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
    background: #f7f9f8; flex-shrink: 0; border: 1px solid #eef2f1;
}
.tp-mister-nome { font-size: 14.5px; font-weight: 800; color: #111917; line-height: 1.2; }
.tp-mister-riga { font-size: 11.5px; color: #69736f; margin-top: 4px; }

/* LO STADIO, la foto — 28/08/2026.
   La foto adesso si comporta come il campo disegnato qui sotto: velo chiaro in
   basso e il nome DENTRO l'immagine, non sotto in nero. Non e' un effetto
   aggiunto, e' la decisione che questa scheda aveva gia' preso per il caso
   senza foto, e a cui la foto non si era mai adeguata.

   Perche' conta: su un campione di 60 pagine squadra (28/08/2026) 23 hanno la
   foto e 26 il campo disegnato. Le due versioni della stessa scheda capitano
   una accanto all'altra di continuo, e prima erano impaginate in due modi
   diversi — la foto col nome sotto, il ripiego col nome dentro.

   Il velo e' CHIARO e il testo scuro, come `.tsr-velo` / `.tsr-nome`: il velo
   scuro col testo bianco era la prima idea, ma oltre a non somigliare al
   gemello si rompe sulle foto molto luminose in basso, che non sono poche. */
.tp-stadio-cornice {
    position: relative;
    height: 132px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #f7f9f8;
}
.tp-stadio-foto {
    position: absolute; inset: 0;
    display: block; width: 100%; height: 100%; object-fit: cover;
    background: #f7f9f8;
}
.tps-velo {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .93) 90%);
}
/* stesse misure di .tsr-testo / .tsr-nome / .tsr-capienza: se cambi una, cambia l'altra */
.tps-testo { position: relative; padding: 0 16px 12px; max-width: 236px; }
.tps-nome { font-size: 16.5px; font-weight: 800; color: #0f2b28; line-height: 1.2; }
.tps-capienza {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px; font-weight: 500; color: #6d7f7c;
    margin-top: 6px; letter-spacing: .2px;
}

/* Il ripiego di quando venue.image non c'e' — fuori dalle serie maggiori e' il
   caso normale, quindi non e' un'eccezione da tappare ma la faccia che questa
   scheda ha quasi sempre. E' il campo visto dall'alto, disegnato: nessun file,
   nessuna richiesta in piu', e il testo cambia per squadra, cosi' non legge come
   un'immagine che non ha caricato. Il cerchio di centrocampo E' il marchio.
   Chiaro e non petrolio pieno: questa colonna ha gia' sponsor e widget, e una
   fascia scura si prenderebbe l'occhio prima di loro. */
.tp-stadio-ripiego {
    position: relative; height: 132px; overflow: hidden;
    display: flex; align-items: flex-end; background: #eef4f3;
}
.tsr-taglio {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(90deg,
        rgba(15, 118, 110, .075) 0 30px, rgba(15, 118, 110, 0) 30px 60px);
}
.tsr-perimetro {
    position: absolute; left: 11px; right: 11px; top: 11px; bottom: 11px;
    border: 2px solid rgba(15, 118, 110, .22); border-radius: 3px;
}
.tsr-meta {
    position: absolute; left: 50%; top: 11px; bottom: 11px;
    width: 2px; background: rgba(15, 118, 110, .22);
}
.tsr-area {
    position: absolute; top: 34px; bottom: 34px; width: 22px;
    border: 2px solid rgba(15, 118, 110, .2);
}
.tsr-area-s { left: 11px; border-left: none; }
.tsr-area-d { right: 11px; border-right: none; }
.tsr-punto { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* Il velo sfuma il disegno sotto il testo: senza, le righe del taglio passano
   dentro le lettere e il nome lungo diventa illeggibile. */
.tsr-velo {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(238, 244, 243, 0) 34%, rgba(238, 244, 243, .94) 92%);
}
.tsr-testo { position: relative; padding: 0 16px 12px; max-width: 236px; }
.tsr-nome { font-size: 16.5px; font-weight: 800; color: #0f2b28; line-height: 1.2; }
.tsr-capienza {
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px; font-weight: 500; color: #6d7f7c;
    margin-top: 6px; letter-spacing: .2px;
}

.tp-stadio-corpo { padding: 13px 16px 15px; }
/* .tp-stadio-nome e' stata tolta il 28/08/2026: il nome dello stadio sta dentro
   l'immagine in tutti e due i casi, e nessun elemento portava piu' quella classe. */
.tp-stadio-riga {
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12px; color: #69736f; line-height: 1.45; margin-bottom: 5px;
}
.tp-stadio-riga:last-child { margin-bottom: 0; }
.tp-stadio-riga i { color: #98a3a0; font-size: 11px; width: 13px; text-align: center; margin-top: 2px; flex-shrink: 0; }

/* L'avvertenza che i numeri sono della stagione chiusa. Non e' un dettaglio
   estetico: senza, la pagina afferma una cosa falsa. */
.tp-avvertenza {
    display: flex; align-items: flex-start; gap: 9px;
    margin-top: 18px; padding: 11px 14px;
    background: var(--secondary-light); border: 1px solid #f6d99a; border-radius: 10px;
    font-size: 12px; line-height: 1.5; color: #7a4a08;
}
.tp-avvertenza i { color: var(--secondary-dark); font-size: 12px; margin-top: 2px; flex-shrink: 0; }
.tp-avvertenza strong { font-weight: 800; }

/* ------------------------------------------------- I migliori 5 della rosa
   Sta in barra laterale, larga ~300px: qui la riga e' la forma giusta, non la
   scheda. La scheda e' per la rosa, che ha tutta la colonna centrale. */
.tp-top5 {
    display: flex;
    flex-direction: column;
}

.tp-top5-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--tp-border);
}

.tp-top5-row:last-child {
    border-bottom: 0;
}

/* La posizione e' il motivo per cui questo e' un elenco e non cinque schede:
   dice a colpo d'occhio chi e' il primo. Tabular per tenere le cifre allineate. */
.tp-top5-pos {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    color: var(--tp-text-light);
    font-variant-numeric: tabular-nums;
}

.tp-top5-photo {
    flex-shrink: 0;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background: #eef2f1;
}

.tp-top5-ident {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tp-top5-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--tp-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-top5-sub {
    font-size: 10px;
    font-weight: 600;
    color: var(--tp-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Il voto e' il criterio dell'ordinamento, quindi e' l'unica cosa colorata:
   chi guarda deve capire in un colpo perche' quello e' primo. */
.tp-top5-voto {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 800;
    color: white;
    background: var(--tp-primary);
    border-radius: 6px;
    padding: 2px 7px;
    font-variant-numeric: tabular-nums;
}

/* LE QUATTRO FASCE DEL VOTO, 24/08/2026. Stessa scala per la pastiglia della
   scheda giocatore e per quella dei migliori, cosi' il colore vuol dire la stessa
   cosa nei due punti della pagina. Tutti i valori vengono dalla tavolozza di
   style.css: nessun colore inventato per l'occasione. */
.tp-top5-voto.tp-voto--alto,
.tp-chip--voto.tp-voto--alto {
    background: var(--accent);          /* #0b5b55, petrolio scuro */
    color: #fff;
}

.tp-top5-voto.tp-voto--buono,
.tp-chip--voto.tp-voto--buono {
    background: var(--tp-primary);      /* #0f766e */
    color: #fff;
}

.tp-top5-voto.tp-voto--medio,
.tp-chip--voto.tp-voto--medio {
    background: var(--primary-light);   /* #e6f4f2 */
    color: var(--accent);
}

.tp-top5-voto.tp-voto--basso,
.tp-chip--voto.tp-voto--basso {
    background: var(--secondary-light); /* #fef3c7 */
    color: var(--secondary-dark);       /* #b45309 */
}

.tp-top5-nota {
    margin: 10px 0 0;
    font-size: 10px;
    color: var(--tp-text-light);
    text-align: center;
}

/* --------------------------------------------------------- Il valore rosa
   24/08/2026 — era petrolio come gli altri numeri del riepilogo (eta' media,
   Under 21, Over 30) e ci si perdeva in mezzo. E' l'unico dato del blocco che
   non viene dall'API ma da Transfermarkt, ed e' quello che la gente guarda per
   primo: ha diritto a un colore suo.

   Il colore NON e' nuovo: e' --secondary (#f59e0b), il secondo della palette
   del sito, quello dell'ambra. Sul numero pero' si usa --secondary-dark
   (#b45309): #f59e0b su bianco fa 2,15:1 di contrasto e non passa nemmeno la
   soglia del testo grande, #b45309 fa 5,05:1 e passa AA anche da normale. */
.tp-squad-valore {
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--secondary-light);
}

.tp-squad-valore strong {
    color: var(--secondary-dark);
}

.tp-squad-valore span {
    color: var(--secondary-dark);
    opacity: 0.85;
}

/* ------------------------------------------------------- Ultimi risultati
   24/08/2026 — la riga era «24/08 · 1-0 · Lecce»: con il solo nome della squadra
   in trasferta non si capiva ne' chi avesse vinto ne' contro chi si fosse giocato
   quando eravamo noi fuori casa. Ora il punteggio e' sempre dal nostro punto di
   vista e il colore dice l'esito, quindi la riga si legge senza pensarci. */
.tp-ris-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid var(--tp-border);
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}

.tp-ris-row:last-child { border-bottom: 0; }
.tp-ris-row:hover { background: var(--tp-bg); }

.tp-ris-data {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--tp-text-light);
    font-variant-numeric: tabular-nums;
}

.tp-ris-ident {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tp-ris-avv {
    font-size: 12px;
    font-weight: 700;
    color: var(--tp-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Competizione e casa/trasferta stanno insieme sulla seconda riga: sono due
   contesti, non due dati da confrontare, e separati occuperebbero due righe. */
.tp-ris-comp {
    font-size: 10px;
    font-weight: 600;
    color: var(--tp-text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tp-ris-punti {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    border-radius: 6px;
    padding: 2px 7px;
    font-variant-numeric: tabular-nums;
}

/* Vittoria, pareggio, sconfitta. Nessun colore nuovo: --primary e' il petrolio
   del sito, --rosso e' quello gia' usato per i cartellini rossi, il pareggio usa
   il grigio dei testi secondari. */
.tp-ris-punti--v { background: var(--primary); color: #fff; }
.tp-ris-punti--n { background: var(--tp-bg); color: var(--tp-text-light); }
.tp-ris-punti--p { background: #fee2e2; color: #991b1b; }

/* LA PARTITA IN CORSO, 24/08/2026. Sta sopra i risultati ma dichiarata: minuto al
   posto della data, bollino rosso pulsante, e il punteggio in rosso invece che
   nei colori dell'esito — perche' un esito ancora non c'e'. Il rosso e' --rosso,
   lo stesso del bollino delle classifiche live: nessun colore nuovo. */
.tp-ris-row--live {
    border: 1px solid var(--rosso);
    border-radius: 10px;
    margin-bottom: 6px;
}

.tp-ris-bollino {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rosso);
    margin-right: 5px;
    vertical-align: 1px;
    animation: tp-ris-pulsa 1.4s ease-in-out infinite;
}

@keyframes tp-ris-pulsa {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.25; }
}

.tp-ris-punti--live {
    background: var(--rosso);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .tp-ris-bollino { animation: none; }
}

.tp-ris-vuoto {
    margin: 0;
    font-size: 12px;
    color: var(--tp-text-light);
    text-align: center;
}