/* ======================================================================
   RESPONSIVE: adattamenti di viewport dei componenti
   Generato dalla migrazione Fase 0; modificare nel file della responsabilita.
   ====================================================================== */

/* L IMBUTO NON STA IN UNO SCHERMO STRETTO, e non e' un problema di larghezza:
   distribuire una sfida sola nell altezza di un turno da sedici, su 390px,
   lascia mezzo schermo vuoto con due caselle sperdute. Sotto gli 860 il
   tabellone torna a essere una lista per turno — che li' e' la forma giusta,
   perche' comunque si scorre e la convergenza non si vedrebbe mai per intero. */
@media (max-width: 860px) {
  .bracket-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(186px, 1fr); gap: var(--space-2); }
  .bb-ties { display: grid; gap: var(--space-1); align-content: start; flex: none; }
  /* qui non c e imbuto, quindi la casella non ha nessun compito: sparisce
     dall albero delle scatole e la sfida torna a essere la cella di griglia
     che era prima. Con display:block restava una scatola in mezzo, e la
     colonna si spostava di dieci pixel. */
  .bb-slot { display: contents; }
  .bb-round:first-child { opacity: 1; }
}

@media (max-width: 860px) {
  #app{padding:10px 10px 42px}.home-hero{grid-template-columns:1fr;padding:44px 0 26px;max-height:none}.hero-visual{min-height:360px}.home-proof div{padding:16px 12px}.home-utilities{grid-template-columns:1fr}.utility-actions{margin-top:10px;flex-wrap:wrap}.create-head{align-items:flex-start;flex-direction:column}.season-progress{grid-row:2;grid-column:1/-1}.hub-grid{grid-template-columns:1fr}.tabs{top:0}}

@media (max-width: 560px) {
  .season-chip{display:none}.home-hero h1{font-size:2.9rem}.home-actions{flex-direction:column}.hero-cta{width:100%}.hero-visual{min-height:300px}.hero-shirt-wrap{--shirt-h:230px}.home-proof{grid-template-columns:1fr}.home-proof div{border-right:0;border-bottom:1px solid var(--border-subtle)}.utility-actions{display:grid;grid-template-columns:1fr 1fr}.create-steps i,.create-steps span:not(.on){display:none}.name-row{display:grid;}.mini-crest{width:46px;height:46px}.transition-match{grid-template-columns:1fr 36px 1fr}.transition-match strong{font-size:1rem}.transition-clock{font-size:4.5rem}.modal{padding:20px 14px}.modal .choice{grid-template-columns:26px 1fr 18px;padding:12px 10px}
}

@media (max-width: 860px) {
  .create-head{gap:14px}.create-steps{width:100%;overflow-x:auto;padding:4px 0;scrollbar-width:none}.create-steps::-webkit-scrollbar{display:none}.wizard-panel{padding:20px 16px}.identity-name{margin-left:0}.role-layout{grid-template-columns:1fr}.world-map{min-height:360px}.football-pitch{min-height:480px}.role-report{display:grid;grid-template-columns:auto 1fr;column-gap:18px}.role-code{grid-row:1/5;font-size:4rem}.role-report .eyebrow,.role-report h3,.role-report>p:not(.eyebrow),.role-style{grid-column:2}.key-attrs{grid-column:1/-1}.journey-grid,.agent-grid{grid-template-columns:1fr}.journey-card,.agent-card{min-height:0}.career-review{grid-template-columns:1fr 1fr}.wizard-footer{grid-template-columns:120px 1fr 160px}
}

@media (max-width: 560px) {
  /* Il mockup mobile etichetta cosa lascia il ritiro: "Un punto di Fisico"
     da solo non dice se e' un costo o un guadagno. Solo qui: il desktop non
     si tocca, e li' la riga ha spazio intorno che la spiega da se. */
  .camp-lascia small { display: inline; }
  .create-head h1{font-size:2.25rem}.create-head{margin-bottom:15px}.create-steps{justify-content:center}.create-steps button{padding:0 2px}.wizard-title{gap:10px}.wizard-title h2{font-size:1.35rem}.wizard-panel{padding:17px 12px}.world-map{min-height:310px}.map-pin{padding:4px;min-width:28px}.map-pin b{display:none}.map-pin span{font-size:.72rem}.nation-pills{display:grid;grid-template-columns:1fr 1fr}.nation-pill{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.football-pitch{min-height:430px}.role-dot{width:42px;height:42px}.role-dot.sel{width:50px;height:50px}.role-report{display:block}.role-code{font-size:4rem}.role-report .eyebrow,.role-report h3,.role-report>p:not(.eyebrow),.role-style{grid-column:auto}.foot-section{align-items:flex-start;flex-direction:column}.foot-options{width:100%}.foot-choice{flex:1;min-width:0;padding:8px 6px;justify-content:center}.foot-choice>span{display:none}.career-review{grid-template-columns:1fr 1fr}.wizard-footer>div{grid-column:1/-1;grid-row:1}.wizard-footer>button{grid-row:2}.wizard-footer button{padding:9px 10px;font-size:.72rem}
}
@media (max-width:860px){
  .training-split{grid-template-columns:1fr}.preseason-focus-mode{margin-top:20px}
}
@media (max-width:560px){
  .decision-options{grid-template-columns:1fr}.decision-options>button{min-height:60px}.preseason-decision{padding:18px 12px}.training-slot{padding:15px 11px}.training-slot .focus-grid{grid-template-columns:1fr 1fr}.training-slot-head{grid-template-columns:auto 1fr}.training-slot-head em{grid-column:2}.preseason-confirm{align-items:stretch;flex-direction:column}.preseason-confirm button{justify-content:space-between}.transition-content{width:94vw}.transition-clock{font-size:2.7rem}.transition-player{grid-template-columns:1fr;padding:8px 10px}.transition-player>small{grid-row:3;grid-column:1}.transition-events{height:132px}.transition-result{align-items:center;flex-direction:column;gap:3px}.transition-result>b{font-size:.86rem}
  .transition-continue{width:100%;min-width:0}
}

/* ---------- Mobile: le quattro schede devono starci tutte ---------- */
/* Su 375px la barra scorreva di lato e la quarta scheda restava fuori:
   una scheda che non vedi e una scheda che non esiste. */
@media (max-width: 560px) {
  .tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    overflow: visible;
  }
  .tabs button {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 0; padding: 8px 2px;
    font-size: .56rem; letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .tabs button svg { width: 15px; height: 15px; flex: none; }
}
@media (max-width: 380px) {
  .tabs button { font-size: .5rem; }
}
@media (max-width: 860px) {
              }

@media (max-width: 860px) {
  .stats-grid { grid-template-columns: 1fr; }
  }
@media (max-width: 560px) { .nation-results .nation-pills { max-height: 190px; padding-right: 4px; } }
@media (max-width: 560px) {
  .wizard-footer {
    bottom: 6px; grid-template-columns: 44px 1fr auto; gap: 8px;
    padding: 6px 8px; border-radius: var(--radius-md);
  }
  .wizard-footer > button { padding: 8px 10px; font-size: .74rem; }
  .wizard-footer > button:first-child { justify-content: center; width: 44px; padding: 8px 0; font-size: 1rem; }
  .wizard-footer > button:first-child span { display: none; }
  .wizard-footer > button.primary b { margin-left: 4px; }
}

@media (max-width: 560px) {
  /* riga unica: le regole precedenti la spezzavano su due */
  .wizard-footer > button { grid-row: 1; }
  .wizard-footer > button.primary { grid-column: 3; }
}
@media (max-width: 560px) { .help::after { width: min(250px, 78vw); } }
@media (max-width: 640px) {
  /* ---------- SIMULAZIONE: una colonna alta quanto lo schermo ----------
     Qui la media query e' lo strumento giusto e non un ripiego: questa scena
     non ha una vista nativa: e' la stessa per tutti e due, e quello che
     cambia e' solo quanto spazio c'e'. Le regole che stavano in altri tre
     blocchi sono venute qui: erano lo stesso layout scritto in tre posti.

     I due comandi erano FISSI sopra un contenuto che non scorre
     (.match-transition e' overflow:hidden), e su uno schermo corto
     succedevano tutte e due le sovrapposizioni fotografate dall'utente: la
     barra delle velocita' sopra la classifica, e "Salta e vai al risultato"
     — che e' trasparente — stampato sopra il nome di una squadra. Non erano
     due difetti: era uno. E il padding-bottom che doveva difendere non
     difendeva niente, perche' non c'e' niente che scorra sotto cui stare.
     Adesso i comandi sono in fondo alla colonna, nel flusso: sovrapporsi non
     e' piu' una cosa che puo' succedere.

     E la scala scende — "sono enormi per lo schermo" (decisioni §10). Non
     tutto: la giornata e la tua riga in classifica restano i due numeri
     grossi, perche' sono quello che si guarda mentre scorre. */
  /* la colonna e' alta quanto le serve, fino allo schermo, e sta in mezzo:
     su un telefono alto il vuoto si divide sopra e sotto invece di aprire una
     voragine sola sopra i comandi */
  .match-transition.run { place-items: center stretch; }
  .match-transition.run .transition-content {
    display: flex; flex-direction: column; box-sizing: border-box;
    width: 100%; max-height: 100%; padding: 12px 10px;
  }
  /* uno solo cede quando lo spazio manca, e cede scorrendo: gli altri no */
  .match-transition.run .transition-content > * { flex: none; }
  .match-transition.run .transition-match { display: none; }
  .match-transition.run .transition-clock { font-size: 1.25rem; margin-top: 4px; }
  .match-transition.run .transition-bar { margin: 8px auto 0; }
  .match-transition.run .transition-result {
    margin: 5px 0 0; padding: 0; font-size: var(--type-etichetta);
  }

  .run-stats { grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 8px; }
  .run-stats > div { padding: 3px 4px; }
  .run-stats b { font-size: 1.1rem; }
  .run-stats span { font-size: .58rem; letter-spacing: .04em; }

  .match-transition.run .run-feed { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  .run-feed { gap: 4px; margin: 8px auto 6px; }
  .run-feed > .run-result:nth-child(n+4) { display: none; }
  .run-result { display: grid; grid-template-columns: 1fr; gap: 1px; padding: 4px 10px; font-size: var(--type-nota); }
  .run-result b { font-size: var(--type-corpo); line-height: 1.25; }
  .run-result span { font-size: var(--type-etichetta); white-space: normal; }
  .run-row { font-size: var(--type-nota); padding: 4px 10px; }
  .run-row.me { font-size: var(--type-corpo); }

  /* il fondo e' opaco: sotto ci passa la classifica */
  .run-comandi {
    order: 1; margin-top: 10px; background: var(--ink-950);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .speed-ctl.run { margin: 0; gap: 4px; }
  .speed-ctl.run button { flex: 1 1 auto; padding: 7px 8px; min-height: 40px; }
  .run-skip { width: 100%; margin: 6px 0 0; min-height: 40px; }

  /* i riquadri (allenamento, stato del calciatore) sono stretti quanto il
     bottone, non quanto lo schermo: centrati sul trigger invece che
     ancorati a sinistra, i tooltip non sforano piu' fuori dal riquadro
     su mobile (bug trovato dalla cabina, audit mobile — lo stato del
     calciatore era il piu' grave dei due, mai corretto prima) */
  .rtp4-aiuto::after, .rtp4-attrs-train .rtp4-attr::after, .rtp4-state-metric::after {
    left: 50%; width: min(150px, calc(100vw - 64px));
    transform: translateX(-50%) translateY(-4px);
  }
  .rtp4-aiuto:hover::after, .rtp4-aiuto:focus-visible::after,
  .rtp4-attrs-train .rtp4-attr:hover::after, .rtp4-attrs-train .rtp4-attr:focus-visible::after,
  .rtp4-state-metric:hover::after, .rtp4-state-metric:focus-visible::after {
    transform: translateX(-50%) translateY(0);
  }
}
@media (max-width: 860px) { body.modal-open { overflow: hidden; } }
/* Lo snodo su un telefono: proposta C, approvata dall'utente. Stesse componenti e
   stessa gerarchia del desktop; cambiano le misure e i segnali stanno su una riga
   sola invece che etichetta sopra e valore sotto. Metro: docs/mockup-fase1/eventi-mobile.html. */
@media (max-width: 480px) {
  .modal.event-modal{padding:14px 11px}.event-modal h2{font-size:1.05rem;margin:5px 0 7px}.event-modal .ev-text{font-size:.84rem;line-height:1.42}.event-modal .ev-choices{gap:4px}
  .modal.event-modal .choice{grid-template-columns:22px 1fr;padding:8px 10px}.event-modal .choice-arrow{display:none}.event-modal .fx{margin-top:4px;line-height:1.25}.event-modal .fx-chip{font-size:.72rem;padding:3px 8px}
  .event-modal .fx-meta{gap:4px;margin-top:5px}.event-modal .fx-meta em{flex-direction:row;align-items:baseline;gap:5px;padding:3px 7px;font-size:.72rem;line-height:1.5;white-space:nowrap}
  .event-modal .fx-meta em small{font-size:.6rem;letter-spacing:.09em}.event-modal .fx-meta em.storto,.event-modal .fx-meta em.dip{flex:1 1 100%;white-space:normal}
}
@media (max-width: 860px) {
  .hub-grid { display: flex; flex-direction: column; gap: 10px; }
                    /* Testata compatta: da quando il giocatore c e su TUTTE le schede, su schermo
     stretto non ci sta accanto al club — nome e ruolo finivano nei puntini.
     Quindi una colonna sola e il giocatore su una riga sua, larga tutta. */
  .topbar { padding: 9px 12px; gap: 8px 12px; margin-bottom: 8px; grid-template-columns: 1fr; }
  .topbar .actions { width: 100%; justify-content: space-between; }
  .rtp4-top-player { flex: 1; grid-template-columns: 32px 1fr 32px; }
  /* la riga sotto il nome qui non ci sta per una decina di pixel: va a capo
     invece di perdere le stagioni nei puntini */
  .rtp4-top-name small { white-space: normal; }
  .icon-btn { width: 32px; height: 32px; }
  .tabs { margin-bottom: 8px; }
    }

/* ---------- La partita su schermo stretto ---------- */
@media (max-width: 900px) {
  .match-transition.match .transition-content.hud { gap: 12px; padding: 14px 12px 16px; }
  /* LA BARRA DEI COMANDI SI VEDEVA ATTRAVERSO (utente: «le opzioni di velocita'
     e di estensione del commento sono sovrapposte appena si apre la partita e
     si sistemano solo quando arriva il fine primo tempo»). Riprodotto a
     390x640: il contenuto e' alto 682, quindi si scorre, e .hud-bottom —
     appiccicata in fondo — si posa sopra la riga GOL/ASSIST/MINUTI. Ci si
     posava gia' prima: quello che mancava e' che il suo fondo era TRASPARENTE
     per il 42% dell'altezza, cioe' esattamente dove stanno i bottoni. Una
     barra appiccicata che si legge attraverso non e' una barra, e' una macchia.
     "Si sistema al fine primo tempo" perche' li' la cronaca ha riempito, si e'
     scorso in fondo, e la barra e' tornata al suo posto nel flusso.
     Non e' la stessa cosa della simulazione, dove non c'era spazio riservato e
     non poteva essercene: li' non si scorreva affatto. Qui il velo e' corto e
     sotto i bottoni il fondo e' pieno. */
  .hud-bottom {
    width: 100%; gap: 8px; padding: 10px 0 6px;
    background: linear-gradient(transparent, var(--ink-1000) 10px);
  }
  /* e otto comandi in due file da 93px, su uno schermo da 640, sono un settimo
     della partita: gli stessi comandi con meno cornice intorno */
  .hud-bottom .speed-ctl { gap: 4px; }
  .hud-bottom .speed-ctl button { padding: 4px 9px; min-height: 30px; font-size: var(--type-etichetta); }
  .hud-bottom .segnala-vivo { min-height: 28px; padding: 2px 10px; font-size: var(--type-etichetta); }
  /* ---------- LA SCALA ERA ROVESCIATA (utente, §11 voci 15, 17, 18) ----------
     Non erano tre ritocchi: era una gerarchia al contrario su tutta la
     schermata. Il PUNTEGGIO — il dato per cui si guarda — stava nella striscia
     piu' sottile; la CARTA DEL GIOCATORE era il blocco piu' alto, e in
     panchina il blocco piu' grande diceva 0 · 0 · 0; il NOME del giocatore era
     piu' piccolo delle etichette accanto; e la BARRA DI AVANZAMENTO era una
     linea da 2px schiacciata fra i due blocchi, cioe' non si vedeva.
     Qui l'ordine torna quello che conta: punteggio, avanzamento, tu. */
  /* il tabellone era largo quanto il suo contenuto (327) e la carta del
     giocatore quanto la colonna (366): due blocchi incolonnati e disallineati
     di quaranta pixel. Il commento in components.css dice da sempre che sono
     la stessa colonna — su schermo stretto non lo erano. */
  .match-transition.match .tabellone { width: 100%; }
  .board-score { padding: 9px 14px; gap: 11px; }
  .board-name { font-size: var(--type-corpo); }
  .board-team { padding: 14px 12px; }
  .board-tab { width: 8px; }
  .board-n { font-size: var(--type-pagina); }
  /* due difetti in uno: era sottile E appiccicata. Riparare solo lo spessore
     l'avrebbe lasciata invisibile lo stesso. */
  .match-transition.match .transition-bar {
    height: 6px; margin: 12px 0 2px; border-radius: var(--radius-pill);
    /* e il binario si vede anche da vuoto: al 4% del primo tempo la parte
       colorata e' un trattino, e una barra che si vede solo quando e' piena
       non e' una barra di avanzamento */
    background: var(--surface-raised);
    box-shadow: inset 0 0 0 1px var(--border-subtle);
  }
  .crono { width: 100%; margin-top: 12px; padding: 10px 14px 4px; }
  .live { width: 100%; padding: 14px 16px; }
  /* LA TUA RIGA VA SOTTO IL RISULTATO, E SU UNA RIGA SOLA (utente: «le stats
     del giocatore le metterei sotto il risultato, avvicinando gol, assist e
     minuti per metterli in linea con nome e numero»). Sul telefono e' la
     seconda cosa che guardi dopo il punteggio, e stava in fondo — sotto la
     cronaca, mezza coperta dalla barra dei comandi. Lo spostamento e' un
     `order` e non un taglio nel markup: il desktop la vuole dov'e', perche'
     li' si legge tutto insieme e non c'e' niente da scavalcare. */
  .hud-top > .tabellone { order: 1; }
  .hud-top > .you { order: 2; }
  .hud-top > .pv-live-momentum { order: 3; }
  .hud-top > .pv-live-stats { order: 4; }
  .hud-top > .crono { order: 5; }
  /* minmax(0,1fr) e non auto: con due colonne automatiche la somma sfondava il
     contenitore e "MINUTI" restava fuori dal bordo destro. La colonna del nome
     e' quella che cede, ed e' quella che sa stringersi con i puntini. */
  .you { grid-template-columns: minmax(0, 1fr) auto; justify-content: space-between; gap: 10px; padding: 8px 12px; margin-top: 0; }
  .you-id, .you-who { min-width: 0; }
  .you-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* la spaziatura delle etichette qui e' larghezza rubata alla riga di stato,
     che e' l'unica delle due che ha qualcosa da perdere se si stringe */
  .you-stats { justify-content: flex-end; gap: 10px; }
  .you-stat .eyebrow { letter-spacing: .04em; }
  /* IL NOME E' LA COSA PIU' MARCATA DELLA SUA CARTA, e non lo era: a 15px
     stava sotto ai numeri delle statistiche, che ne avevano 22. La riga di
     stato scende a etichetta e resta su UNA riga — «In panchina · pronto a
     entrare» ne prendeva due e faceva crescere la carta di trenta pixel per
     dire la cosa meno importante che c'e' scritta sopra. */
  .you-name { font-size: var(--type-valore); }
  .match-transition.match .transition-player {
    padding: 0; font-size: var(--type-etichetta);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .you-stat b { font-size: var(--type-valore); }
  .you-stat .eyebrow { margin-bottom: 1px; }
  .you-no { width: 34px; height: 34px; }
  .fine-esito { font-size: var(--type-sezione); }
  /* due colonne su schermo stretto, sempre piene */
  .fine-nums { grid-template-columns: repeat(2, 1fr); }
  .fine-nums > div { padding: 12px 8px; }
  /* LE CASELLE ERANO DIMENSIONATE SU UNA TELA LARGA: 494px per dodici numeri,
     e la mappa di calore cominciava 164px SOTTO la piega — cioe' nessuno
     sapeva che ci fosse. (utente: «le box a fine partita sono ancora
     parametrate per il desktop: se le si rende piu' razionali si puo' anche
     vedere la heatmap, almeno un pezzo, e incuriosire a fare scroll down»).
     Il criterio non e' "stringi": e' far affiorare la mappa, e si misura
     guardando dove comincia .stats-grid rispetto all'altezza della finestra.
     E resta grande UNA cosa, il voto: e' il numero per cui si apre questa
     schermata, e quattro numeri grandi non ne mettono in evidenza nessuno —
     la stessa lezione del riepilogo di fine stagione. */
  .fine-nums { margin: 10px 0; grid-template-columns: repeat(3, 1fr); }
  .fine-nums > div { padding: 6px 7px; }
  .fine-nums > div > span { margin-bottom: 2px; letter-spacing: .08em; }
  .fine-nums b { font-size: var(--type-sezione); }
  .fine-nums .forte b { font-size: var(--type-valore); }
  .fine-nums .voto b { font-size: var(--type-numero); }
  .match-transition.match .speed-ctl { position: static; margin: 10px auto 0; }
}
@media (max-width: 860px) {
  .pick-matrix { display: grid; gap: 4px; margin: 0 0 12px; padding: 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); }
  .pm-row { display: grid; grid-template-columns: 1.4fr repeat(var(--pm-cols, 3), 1fr); gap: 6px; align-items: center; padding: 7px 8px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; text-align: left; font: inherit; color: var(--text-primary); }
  .pm-row.pm-head { color: var(--text-muted); font-size: var(--type-etichetta); letter-spacing: .05em; text-transform: uppercase; padding-bottom: 2px; }
  .pm-row.sel { border-color: var(--accent-brand); background: color-mix(in srgb, var(--accent-brand) 8%, transparent); }
  .pm-row > span > b { font-size: var(--type-nota); }
  .pm-row .stars-row i { width: 6px; height: 6px; }
  /* origine: la lista era dopo la mappa nel sorgente e un order la portava
     sopra; ora e' gia' prima nel markup, quest ordine non serve piu' */
  .wizard-panel { display: flex; flex-direction: column; }
  .wizard-panel > .role-layout, .wizard-panel > .foot-section { margin-bottom: 14px; }
  .create-shell { padding-bottom: 96px; }
  .role-report { scroll-margin-top: 12px; }
}
@media (max-width: 860px) {
  .home-shell.returning .home-hero { padding-top: 22px; gap: 18px; }
  .home-shell.returning .hero-visual { min-height: 200px; }
  .home-shell.returning .hero-shirt-wrap { --shirt-h: 150px; }
  .ac-nums { grid-template-columns: repeat(2, 1fr); }
  .slot-actions button, .home-actions button, .utility-actions button { min-height: 44px; }
  .utility-actions button { font-size: var(--type-nota); }
}
@media (max-width: 860px) {
  /* striscia chiusa: OVR a sinistra, quattro condizioni in griglia 2×2, etichette che respirano */
        /* profilo aperto: foglio sovrapposto dal basso, la pagina sotto non si muove */
                  @keyframes sheetUp { from { transform: translateY(24px); opacity: 0 } to { transform: none; opacity: 1 } }
  @media (prefers-reduced-motion: reduce) { }
}
@media (max-width: 860px) {
  /* un solo scorrimento nel riepilogo di fine stagione, e il pulsante resta a portata */
  /* transizioni: titolo che sta nello schermo, sfondo pieno */
  .match-transition { background: var(--ink-950); }
  .transition-content { overflow-x: hidden; }
  .transition-match strong { font-size: 1rem; letter-spacing: .04em; overflow-wrap: anywhere; }
}
@media (max-width: 560px) { .name-row { grid-template-columns: 1fr 1fr 72px; } .name-row button { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  /* mobile: prima il riepilogo confrontabile in una schermata, poi le carte per i dettagli */
  }
@media (max-width: 560px) {
  /* nel foglio mobile tre colonne stringono troppo: due, con la parola in linea */
      }