/* ============================================================
   La mia rosa — "In campo" (js/rosa-campo.js)

   Il campo e le figurine sono quelli di fanta-rosa.css: qui si aggiungono
   soltanto misure uniformi, stati della scelta e le liste accanto.
   Tutto e' agganciato a .rc-*, cosi' TV e Serie A restano identici.
   ============================================================ */

.rc-desk { display: flex; }
.rc-phone { display: none !important; }

/* ---- Testata: giornata, stato, provenienza, scadenza -------------------- */
.rc-head {
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    display: grid;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding: var(--sp-3);
}

.rc-head-riga {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-4);
}

.rc-giornata { display: grid; gap: 2px; min-width: 0; }
.rc-giornata select { max-width: 100%; min-width: 220px; }
.rc-reale { color: var(--ink-2); margin: 0 0 6px; }
.rc-reale strong { color: var(--ink-1); }

.rc-chips { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }

.rc-chip {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-full);
    color: var(--ink-2);
    cursor: help;
    display: inline-flex;
    font-size: var(--fs-micro);
    font-weight: 600;
    gap: 5px;
    line-height: 1.4;
    padding: 2px 9px;
}

.rc-chip-stato { color: var(--ink-1); }
.rc-stato-saved { background: var(--positive-tint); border-color: transparent; color: var(--positive-ink); }
.rc-stato-draft { background: var(--caution-tint); border-color: transparent; color: var(--caution-ink); }
.rc-stato-locked { background: var(--navy); border-color: var(--navy); color: #fff; }
.rc-chip-imp { background: var(--brand-tint); border-color: transparent; color: var(--brand-ink); }
.rc-chip-warn { background: var(--caution-tint); border-color: transparent; color: var(--caution-ink); }
.rc-chip-scaduta { color: var(--negative-ink); }
.rc-link { font-size: var(--fs-micro); padding: 0 4px; }

.rc-avviso {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-left: 4px solid var(--brand);
    border-radius: var(--r-xs);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    gap: var(--sp-2) var(--sp-3);
    margin: 0;
    padding: var(--sp-2) var(--sp-3);
}

.rc-avviso > div { flex: 1 1 240px; min-width: 0; }
.rc-avviso > .bi { font-size: 1.1rem; }
.rc-avviso-lock { border-left-color: var(--navy); }
.rc-avviso-lock > .bi { color: var(--navy); }
.rc-avviso-lieve { border-left-color: var(--caution); margin-top: var(--sp-2); }

/* ---- Moduli e viste ------------------------------------------------------ */
.rc-toolbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    justify-content: space-between;
    margin-top: var(--sp-3);
}

.rc-moduli { align-items: center; display: flex; flex-wrap: wrap; gap: 6px var(--sp-2); min-width: 0; }
.rc-moduli-chips { flex-wrap: wrap; gap: 4px; margin: 0; }
.rc-moduli-chips .fr-alt-chip:disabled { cursor: default; opacity: .55; }
.rc-moduli-chips .fr-alt-chip.active:disabled { opacity: 1; }
.rc-moduli-select { width: auto; }
.rc-views .fw-seg-item { font-size: var(--fs-micro); padding: 3px 10px; }
.fr-usa-cons { white-space: nowrap; }
.fr-cons-giornata { color: var(--ink-2); font-size: var(--fs-micro); margin: var(--sp-2) 0 0; }

.rc-hint {
    align-items: center;
    color: var(--ink-3);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-micro);
    gap: 6px;
    margin: var(--sp-2) 0 0;
}

.rc-hint-sel {
    background: var(--navy-tint);
    border: 1px solid var(--navy);
    border-radius: var(--r-xs);
    color: var(--navy-ink);
    font-size: var(--fs-sm);
    padding: 6px 10px;
}

.rc-hint-sel > span { flex: 1 1 220px; }
.rc-hint kbd { background: var(--bg-sunken); border-radius: 3px; color: var(--ink-2); font-size: .65rem; padding: 0 4px; }

/* ---- Il campo: stesse figurine, misure uniformi --------------------------
   La larghezza e' quella di una fila da cinque anche quando la fila ne ha
   uno solo: il portiere e la punta sono grandi come i difensori. */
.fr-top11-col .rc-field {
    --rc-gap: 10px;
    --rc-w: min(142px, calc((100% - 4 * var(--rc-gap)) / 5));
    --rc-h: 170px;
    gap: 22px;
    padding: 42px 12px 24px;
}

.fr-top11-col .rc-field .formation-line { gap: var(--rc-gap); justify-content: space-evenly; }

/* Il campo ha sempre l'altezza del 4-2-3-1 (cinque file): cambiando modulo
   non si accorcia e le figurine non saltano. */
.fr-top11-col .rc-field {
    --rc-vgap: 22px;
    --rc-vpad: 74px;
    justify-content: space-between;
    min-height: calc(5 * var(--rc-h) + 4 * var(--rc-vgap) + var(--rc-vpad));
}

.fr-top11-col .rc-field .top11-position.rc-slot {
    flex: 0 0 var(--rc-w);
    position: relative;
    width: var(--rc-w);
}

.fr-top11-col .rc-field .rc-pawn {
    cursor: pointer;
    height: var(--rc-h);
    justify-content: flex-start;
    overflow: hidden;
    padding-top: 8px;
}

.fr-top11-col .rc-field .rc-pawn:focus-visible,
.rc-row:focus-visible,
.rc-zone:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.fr-top11-col .top11-player-card.t11-ricca .top11-player-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.fr-top11-col .top11-player-card.t11-ricca .top11-player-stats { flex-wrap: nowrap; white-space: nowrap; }
.fr-top11-col .rc-field .t11-piede { flex-wrap: nowrap; margin-top: auto; overflow: hidden; width: 100%; }
/* Sulla figurina il consiglio e' un pallino colorato: la parola sta nel
   suggerimento (mouse, focus, tocco), nelle liste e nella scheda. Intera non
   ci stava, e tagliata ("Da schiera") non si leggeva. */
.fr-top11-col .rc-field .t11-piede .etichetta-chip {
    background: var(--bg-raised);
    cursor: help;
    flex: 0 0 22px;
    font-size: 0;
    height: 22px;
    justify-content: center;
    padding: 0;
    width: 22px;
}

.fr-top11-col .rc-field .t11-piede .etichetta-chip::before { height: 10px; width: 10px; }

.rc-k { color: var(--ink-3); font-size: .6rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.rc-sep { color: var(--ink-3); padding: 0 1px; }
.rc-k-c { display: none; }

.rc-live {
    align-items: center;
    background: var(--negative-tint);
    border-radius: var(--r-full);
    color: var(--negative-ink);
    display: inline-flex;
    font-size: .56rem;
    font-weight: 700;
    gap: 2px;
    margin-left: 3px;
    padding: 0 5px;
    text-transform: uppercase;
}

/* La sagoma al posto della foto che manca: stessa misura del ritratto. */
.t11-sagoma,
.rc-face-vuota {
    align-items: center;
    background: var(--bg-sunken);
    color: var(--ink-3);
    display: inline-flex;
    justify-content: center;
}

.fr-top11-col .t11-ricca .t11-sagoma { font-size: 1.9rem; }

/* Il pulsante della scheda: sempre visibile, nell'angolo libero. */
.rc-scheda {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
    color: var(--ink-2);
    cursor: pointer;
    display: inline-flex;
    height: 26px;
    justify-content: center;
    left: 6px;
    padding: 0;
    position: absolute;
    top: 8px;
    width: 26px;
    z-index: 2;
}

.rc-scheda:hover,
.rc-scheda:focus-visible { background: var(--navy); border-color: var(--navy); color: #fff; }

/* La targhetta della posizione, appoggiata al bordo alto come in Formazione. */
.rc-tagwrap { display: contents; }

.rc-pos {
    align-items: center;
    background: var(--navy);
    border-radius: var(--r-full);
    color: #fff;
    display: inline-flex;
    font-size: .62rem;
    font-weight: 700;
    gap: 3px;
    left: 50%;
    letter-spacing: .03em;
    line-height: 1.5;
    padding: 0 7px;
    position: absolute;
    top: -9px;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 3;
}

.rc-pos .rc-fit-mini { background: #fff; border: 0; margin-right: -4px; padding: 0 4px; }
.rc-pos .rc-fit-mini .rc-fit-t { display: none; }

/* Compatibilita': icona + parola (+ penalita'), mai il solo colore. */
.rc-fit {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    cursor: help;
    display: inline-flex;
    font-size: .62rem;
    font-weight: 700;
    gap: 3px;
    line-height: 1.45;
    padding: 0 6px;
    white-space: nowrap;
}

.rc-fit-pen { font-variant-numeric: tabular-nums; }
.rc-fit-ok { background: var(--positive-tint); color: var(--positive-ink); }
.rc-fit-lieve { background: var(--navy-tint); color: var(--navy-ink); }
.rc-fit-medio { background: var(--caution-tint); color: var(--caution-ink); }
.rc-fit-grave { background: var(--negative-tint); color: var(--negative-ink); }
.rc-fit-no { background: var(--ink-1); color: #fff; }
.rc-fit-ignoto { background: var(--bg-surface); border-color: var(--line-strong); color: var(--ink-2); }

/* Disponibilita': icona propria, la parola al passaggio e nelle liste. */
.rc-disp {
    align-items: center;
    border-radius: var(--r-full);
    cursor: help;
    display: inline-flex;
    flex-shrink: 0;
    font-size: .6rem;
    font-weight: 700;
    gap: 3px;
    padding: 0 5px;
}

.rc-disp-ind { background: var(--negative-tint); color: var(--negative-ink); }
.rc-disp-dub { background: var(--caution-tint); color: var(--caution-ink); }
.rc-field .rc-disp { height: 22px; justify-content: center; padding: 0; width: 22px; }
.rc-field .rc-disp-t { display: none; }
.t11-piede .fw-diff,
.rc-cell .fw-diff { cursor: help; }

/* ---- Il distintivo della pedina -----------------------------------------
   Un anello doppio al posto di quattro segni in fila. Prima sulla pedina
   c'erano casa/aereo, il cerchio della probabilita', le stelle del consiglio
   e il pallino dell'etichetta: quattro cose da guardare, e nessuna si
   guardava. Adesso sono un segno solo.

     anello esterno  quanto e' probabile che giochi (verde/giallo/rosso)
     anello interno  quanto e' consigliato, in oro (un terzo, due, pieno)
     al centro       casa o aereo, del colore della difficolta' dell'avversario
     riga obliqua    indisponibile o in dubbio

   I due anelli hanno colori diversi apposta: dello stesso colore si
   leggevano come un anello solo piu' spesso. */
.rc-segno {
    align-items: center;
    color: var(--ink-2);
    cursor: help;
    display: inline-flex;
    flex-shrink: 0;
    font-size: .58rem;
    font-weight: 700;
    gap: 4px;
    position: relative;
}

.rc-segno-disegno {
    display: block;
    flex-shrink: 0;
    height: 30px;
    transform: rotate(-90deg);          /* si comincia a mezzogiorno */
    width: 30px;
}

.rc-segno-pista { fill: none; stroke: var(--line-strong); stroke-width: 3; }
.rc-segno-pista-dentro { stroke-width: 2.5; }

.rc-segno-gioca {
    fill: none;
    stroke: var(--rc-segno-c, var(--ink-3));
    stroke-linecap: round;
    stroke-width: 3;
}

/* Il consiglio e' oro: non e' una seconda misura della stessa cosa. */
.rc-segno-conviene {
    fill: none;
    stroke: var(--gold);
    stroke-linecap: round;
    stroke-width: 2.5;
}

.rc-segno-alta   { --rc-segno-c: var(--positive); }
.rc-segno-media  { --rc-segno-c: var(--caution); }
.rc-segno-bassa  { --rc-segno-c: var(--negative); }
.rc-segno-ignota { --rc-segno-c: var(--ink-3); }

/* Chi e' dato fuori o in dubbio ha una riga obliqua sull'anello. L'avversario
   resta: fino all'ultimo puo' rientrare, e sapere contro chi giocherebbe
   serve proprio mentre si decide se rischiarlo. */
.rc-segno-barra { stroke: var(--negative); stroke-linecap: round; stroke-width: 2.5; }
.rc-segno-dub .rc-segno-barra { stroke: var(--caution); }

/* Il glifo sta nell'occhio lasciato libero dai due anelli. */
.rc-segno-dove {
    background: none;
    border: 0;
    font-size: .58rem;
    left: 15px;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.rc-segno-dove.fw-diff-0 { color: var(--ink-3); }
.rc-segno-dove.fw-diff-1,
.rc-segno-dove.fw-diff-2 { color: var(--positive-ink); }
.rc-segno-dove.fw-diff-3 { color: var(--ink-2); }
.rc-segno-dove.fw-diff-4 { color: var(--caution-ink); }
.rc-segno-dove.fw-diff-5 { color: var(--negative-ink); }

/* In campo la percentuale non ci sta, e non serve: l'anello la dice, il
   numero esatto sta nel suggerimento. */
.rc-field .rc-segno-t,
#fr-top11-field .rc-segno-t { display: none; }

/* ---- Scelta in corso ----------------------------------------------------- */
.fr-top11-col .rc-slot.rc-sel .rc-pawn,
.fr-top11-col .rc-pawn.rc-sel {
    box-shadow: 0 0 0 3px var(--brand), 0 14px 30px -10px rgba(16, 24, 40, .5);
    transform: translateY(-2px);
}

.rc-sel-tag {
    background: var(--brand);
    border-radius: var(--r-full);
    bottom: -9px;
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    left: 50%;
    padding: 0 7px;
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 3;
}

.fr-top11-col .rc-slot.rc-dest-ok .rc-pawn {
    cursor: copy;
    outline: 2px dashed #fff;
    outline-offset: 3px;
}

.fr-top11-col .rc-slot.rc-dest-no .rc-pawn {
    cursor: not-allowed;
    filter: grayscale(.7);
    opacity: .42;
}

/* L'esito della destinazione, sopra il piede della figurina. */
.rc-dest-info {
    align-items: center;
    background: color-mix(in srgb, var(--bg-surface) 96%, transparent);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    border-top: 1px solid var(--line);
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    left: 0;
    padding: 3px 3px 4px;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 3;
}

.rc-dest-info .rc-fit { pointer-events: auto; }
.rc-rev { align-items: center; color: var(--ink-2); display: flex; flex-direction: column; font-size: .58rem; gap: 1px; max-width: 100%; }
.rc-rev-chi { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-rev .rc-fit { font-size: .56rem; }
.rc-dest-info .rc-fit-corto .rc-fit-t { display: none; }
.rc-no-t { color: var(--negative-ink); font-size: .58rem; font-weight: 600; line-height: 1.2; text-align: center; }
.rc-slot.rc-dest-no .rc-dest-info { opacity: 1; }

.rc-vuota {
    align-items: center;
    background: color-mix(in srgb, var(--bg-surface) 22%, transparent) !important;
    border: 2px dashed rgba(255, 255, 255, .55) !important;
    box-shadow: none !important;
    color: #fff;
    justify-content: center !important;
}

.rc-vuota .top11-player-name,
.rc-vuota .top11-player-stats { color: #fff !important; }
.rc-vuota-ico { font-size: 1.6rem; line-height: 1; }
.rc-vuota:hover { background: color-mix(in srgb, var(--bg-surface) 34%, transparent) !important; }
.rc-fuori-rosa { opacity: .7; }

.rc-field-wrap.rc-caricando { opacity: .6; pointer-events: none; }

/* ---- Liste: titolari, panchina, riserve --------------------------------- */
.rc-liste { padding: 0 var(--sp-3) var(--sp-3); }
.rc-lists { display: grid; gap: var(--sp-4); }
.rc-list ul { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }

.rc-list-head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    color: var(--ink-1);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-sm);
    font-weight: 700;
    gap: 6px;
    margin: 0 0 6px;
    padding-bottom: 6px;
}

.rc-list-sub { color: var(--ink-3); font-size: var(--fs-micro); font-weight: 500; }
.rc-list-panchina .rc-list-head { color: var(--navy-ink); }
.rc-list-riserve .rc-list-head { color: var(--ink-2); }
.rc-list-vuota { color: var(--ink-3); font-size: var(--fs-sm); padding: 6px 2px; }

.rc-row {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    display: grid;
    gap: 8px;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    /* Altezza fissa: durante una scelta la riga mostra l'esito al posto dei
       dati, e l'elenco non deve allungarsi sotto il dito. */
    height: 54px;
    overflow: hidden;
    padding: 4px 6px;
    position: relative;
}

.rc-list-panchina .rc-row { border-left: 3px solid var(--navy); }
.rc-list-titolari .rc-row { border-left: 3px solid var(--positive); }
.rc-list-riserve .rc-row { background: var(--bg-raised); }
.rc-row[role="button"] { cursor: pointer; }
.rc-row[role="button"]:hover { border-color: var(--line-strong); }
.rc-row.rc-sel { box-shadow: 0 0 0 2px var(--brand); }
.rc-row.rc-dest-ok { border-style: dashed; border-color: var(--brand); cursor: copy; }
.rc-row.rc-dest-no { cursor: not-allowed; opacity: .5; }

.rc-grip { color: var(--ink-3); cursor: grab; }
.rc-row:not([draggable]) { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.rc-row-tag {
    background: var(--bg-sunken);
    border-radius: var(--r-xs);
    color: var(--ink-1);
    font-size: .62rem;
    font-weight: 700;
    min-width: 30px;
    padding: 2px 4px;
    text-align: center;
}

.rc-row-ord { background: var(--navy); color: #fff; }
.rc-list-riserve .rc-row { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.rc-list-riserve .rc-row:not([draggable]) { grid-template-columns: auto minmax(0, 1fr) auto; }

.rc-face {
    background: var(--bg-sunken);
    border-radius: 50%;
    display: block;
    height: 34px;
    object-fit: cover;
    object-position: top center;
    width: 34px;
}

.rc-row-main { display: grid; gap: 1px; min-width: 0; }
.rc-row-nome { align-items: center; display: flex; font-weight: 600; gap: 5px; min-width: 0; }
.rc-row-nome .role-badge,
.rc-cand-nome .role-badge { flex-shrink: 0; }
.rc-row-dati,
.rc-cand-dati { align-items: center; color: var(--ink-2); display: flex; flex-wrap: wrap; font-size: .72rem; gap: 2px 10px; }
.rc-cell { align-items: center; display: inline-flex; gap: 3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-cell .fw-diff-token { height: 20px; width: 20px; }
.rc-avv { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
/* L'esito della destinazione: una riga sola, al posto dei dati. */
.rc-row-info {
    align-items: center;
    color: var(--brand-ink);
    display: flex;
    flex-wrap: nowrap;
    font-size: .7rem;
    font-weight: 600;
    gap: 4px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.rc-row-info.rc-no-t { color: var(--negative-ink); text-align: left; }
/* Una riga sola sempre: con i dati su due righe, passando all'esito la
   lista si accorciava di colpo e il clic dopo finiva altrove. */
.rc-row-dati { align-items: center; flex-wrap: nowrap; height: 20px; overflow: hidden; }
.rc-row-dati .rc-fit,
.rc-row-dati .etichetta-chip,
.rc-row-dati .rc-disp { line-height: 1.35; }
.rc-row-dati .rc-cell { flex: 0 0 auto; min-width: 0; }
/* L'ultima etichetta si accorcia con i puntini invece di essere tagliata. */
.rc-row-dati .rc-cell-stato { flex: 0 1 auto; overflow: hidden; }
.rc-row-dati .etichetta-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rc-bcard-tip .rc-row-info { max-width: 100%; }

.rc-row-azioni { align-items: center; display: flex; gap: 4px; }

.rc-btn {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
    color: var(--ink-2);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--fs-micro);
    font-weight: 600;
    gap: 4px;
    height: 30px;
    justify-content: center;
    min-width: 30px;
    padding: 0 8px;
}

.rc-btn:hover:not(:disabled) { background: var(--bg-raised); color: var(--ink-1); }
.rc-btn:disabled { cursor: default; opacity: .35; }
.rc-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.rc-step { padding: 0; width: 30px; }

.rc-zone {
    align-items: center;
    border: 2px dashed var(--line-strong);
    border-radius: var(--r-xs);
    color: var(--ink-2);
    cursor: pointer;
    display: flex;
    font-size: var(--fs-sm);
    gap: 6px;
    padding: 10px;
}

.rc-zone.rc-dest-ok { border-color: var(--brand); color: var(--brand-ink); }
.rc-zone.rc-dest-no { cursor: not-allowed; opacity: .6; }

/* ---- Barra di salvataggio ------------------------------------------------ */
.rc-savebar {
    align-items: center;
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    justify-content: space-between;
    padding: 8px 12px;
}

/* Su computer resta in vista in fondo alla finestra finche' si vede la pagina. */
.rc-savebar-host {
    bottom: 12px;
    margin-top: var(--sp-3);
    position: sticky;
    z-index: var(--z-sticky, 100);
}

.rc-savebar-host:empty { display: none; }

.rc-savebar-dirty { border-color: var(--brand); border-left: 4px solid var(--brand); }
.rc-savebar-err { border-color: var(--negative); border-left: 4px solid var(--negative); }
.rc-savebar-err .rc-savebar-stato { color: var(--negative-ink); }
.rc-savebar-testo { display: grid; min-width: 0; flex: 1 1 220px; }
.rc-savebar-stato { font-size: var(--fs-sm); font-weight: 600; }
.rc-savebar-sub { color: var(--ink-3); font-size: var(--fs-micro); }
.rc-savebar-azioni { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-spin { animation: rc-giro 1s linear infinite; display: inline-block; }
@keyframes rc-giro { to { transform: rotate(360deg); } }

/* ---- Suggerimento accessibile ------------------------------------------- */
.rc-tipbox {
    background: var(--ink-1);
    border-radius: var(--r-xs);
    box-shadow: var(--shadow-md);
    color: #fff;
    font-size: .74rem;
    line-height: 1.35;
    max-width: 260px;
    padding: 6px 9px;
    pointer-events: none;
    position: fixed;
    z-index: 3000;
}

/* ---- Pannello dal basso -------------------------------------------------- */
.rc-sheet { inset: 0; position: fixed; z-index: var(--z-sheet, 1060); }
.rc-sheet-backdrop { background: rgba(16, 24, 40, .45); inset: 0; position: absolute; }

.rc-sheet-panel {
    background: var(--bg-surface);
    border-radius: var(--r-md) var(--r-md) 0 0;
    bottom: 0;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    left: 50%;
    max-height: 86vh;
    max-width: 560px;
    padding: 6px 14px calc(12px + var(--safe-bottom, 0px));
    position: absolute;
    transform: translateX(-50%);
    width: 100%;
}

.rc-sheet-grip { align-self: center; background: var(--line-strong); border-radius: 3px; height: 4px; margin: 4px 0 8px; width: 40px; }
.rc-sheet-head { align-items: flex-start; display: flex; gap: 8px; justify-content: space-between; }
.rc-sheet-title { font-size: var(--fs-md); font-weight: 700; margin: 0; }
.rc-sheet-sub { color: var(--ink-3); font-size: var(--fs-micro); margin: 2px 0 0; }
.rc-sheet-attuale { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.rc-sheet-tools { display: grid; gap: 6px; margin: 10px 0 6px; }
.rc-sheet-tools .rc-views { justify-self: start; }
.rc-cand-list { display: grid; gap: 4px; list-style: none; margin: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 4px; }

.rc-cand {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-xs);
    display: grid;
    gap: 8px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 6px;
}

.rc-cand-no { background: var(--bg-raised); }
.rc-cand-no .rc-cand-face,
.rc-cand-no .rc-cand-nome { opacity: .55; }
.rc-cand-main { display: grid; gap: 2px; min-width: 0; }
.rc-cand-nome { align-items: center; display: flex; font-weight: 600; gap: 5px; }
.rc-cand-sub { align-items: center; color: var(--ink-3); display: flex; flex-wrap: wrap; font-size: .7rem; gap: 4px; }
.rc-reverse { color: var(--ink-2); font-size: .68rem; }
.rc-cand-motivo { color: var(--negative-ink); font-size: .7rem; font-weight: 600; }
.rc-cand-azioni { display: grid; gap: 4px; }
.rc-cand-azioni .btn { white-space: nowrap; }
.rc-cand-vuoto { color: var(--ink-3); padding: 10px; }
body.rc-sheet-open { overflow: hidden; }

/* ---- Tablet: campo sopra, liste sotto (la griglia va gia' a una colonna) */
@media (max-width: 1099px) {
    .rc-liste { padding-top: var(--sp-2); }
    .rc-lists { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}

/* ---- Telefono ------------------------------------------------------------ */
@media (max-width: 767px) {
    .rc-desk { display: none !important; }
    .rc-phone { display: block !important; }

    .rc-head { padding: var(--sp-2); }
    .rc-giornata,
    .rc-giornata select { min-width: 0; width: 100%; }
    .rc-head-riga { display: grid; }
    .rc-reale { margin: 0; }
    .rc-toolbar { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1fr); }
    .rc-moduli { flex-wrap: nowrap; }
    .rc-moduli-select { flex: 1 1 auto; min-width: 0; }
    .rc-views { display: flex; }
    .rc-views .fw-seg-item { flex: 1 1 0; }
    .fr-usa-cons { width: 100%; }

    .fr-top11-col .rc-field {
        --rc-gap: 4px;
        --rc-h: 124px;
        gap: 18px;
        min-height: 0;
        padding: 30px 4px 16px;
    }

    .fr-top11-col .rc-field .rc-pawn { gap: 1px; padding: 4px 2px 3px; }
    .fr-top11-col .rc-field .t11-ricca .top11-pl-img { height: 38px; width: 30px; }
    .fr-top11-col .rc-field .t11-ricca .t11-sagoma { font-size: 1.2rem; }
    .fr-top11-col .top11-player-card.t11-ricca .top11-player-name { font-size: 11px; letter-spacing: 0; margin-top: 1px; }
    .fr-top11-col .top11-player-card.t11-ricca .top11-player-stats { font-size: .6rem; margin-top: 1px; }
    .fr-top11-col .rc-field .rc-k { font-size: .5rem; }
    .fr-top11-col .rc-field .rc-k-l { display: none; }
    .fr-top11-col .rc-field .rc-k-c { display: inline; }
    .fr-top11-col .rc-field .rc-prob { display: none; }   /* la probabilita' e' nel pallino e nelle liste */
    .rc-pos .rc-fit-pen { display: none; }
    .rc-pos .rc-fit-mini { margin-right: -3px; padding: 0 2px; }
    .fr-top11-col .rc-field .rc-live { font-size: 0; gap: 0; padding: 0 3px; }
    .fr-top11-col .rc-field .t11-crest { right: 2px; top: 3px; }
    .fr-top11-col .rc-field .t11-crest .t11-crest-img,
    .fr-top11-col .rc-field .t11-crest .t11-crest-img-fallback { height: 18px; width: 14px; }
    .fr-top11-col .rc-field .t11-piede { gap: 2px; justify-content: center; }
    .fr-top11-col .rc-field .fw-diff-token { height: 18px; width: 18px; }
    .fr-top11-col .rc-field .fw-diff i { font-size: .62rem; }
    .fr-top11-col .rc-field .rc-segno-disegno { height: 26px; width: 26px; }
    .fr-top11-col .rc-field .rc-segno-dove { font-size: .5rem; left: 13px; }
    .fr-top11-col .rc-field .rc-disp,
    .fr-top11-col .rc-field .t11-piede .etichetta-chip { flex-basis: 18px; height: 18px; width: 18px; }
    .fr-top11-col .rc-field .t11-piede .etichetta-chip::before { height: 9px; width: 9px; }


    .rc-scheda { display: none; }        /* su telefono la scheda sta nel pannello */
    .rc-pos { font-size: .56rem; padding: 0 5px; top: -8px; }
    .rc-dest-info .rc-fit-t { display: none; }
    .rc-rev { display: none; }
    .rc-no-t { font-size: .5rem; }

    .rc-liste { padding: 0 var(--sp-2) var(--sp-2); }
    .rc-lists { grid-template-columns: minmax(0, 1fr); }
    .rc-row { gap: 6px; }
    .rc-btn-t { display: none; }
    .rc-grip { display: none; }
    .rc-row { grid-template-columns: auto auto minmax(0, 1fr) auto; }
    .rc-list-riserve .rc-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .rc-face { height: 30px; width: 30px; }

    /* La barra resta raggiungibile sopra il menu in basso, in tutte e due le
       sotto-schede (Rosa e Campo). */
    .rc-savebar {
        bottom: calc(var(--mobile-nav-h, 66px) + var(--user-bid-bar-h, 0px) + 6px);
        left: 8px;
        margin: 0;
        padding: 8px 10px;
        position: fixed;
        right: 8px;
        z-index: calc(var(--z-nav, 1000) - 10);
    }

    body:has(#tab-fanta-rosa.active .rc-savebar) > main.workspace-main {
        padding-bottom: calc(var(--mobile-nav-h, 66px) + var(--user-bid-bar-h, 0px) + 130px) !important;
    }

    .rc-savebar-azioni { flex: 1 1 100%; }
    .rc-savebar-azioni .btn { flex: 1 1 0; }
    .rc-sheet-panel { max-height: 90vh; padding-left: 10px; padding-right: 10px; }
    .rc-cand { grid-template-columns: auto minmax(0, 1fr); }
    .rc-cand-azioni { display: flex; grid-column: 1 / -1; }
    .rc-cand-azioni .btn { flex: 1 1 0; }
}

@media (max-width: 359px) {
    .fr-top11-col .rc-field { --rc-gap: 3px; padding-left: 2px; padding-right: 2px; }
    .fr-top11-col .top11-player-card.t11-ricca .top11-player-name { font-size: 10px; }
}

/* Sotto i 1100px le colonne si impilano: prima il campo, poi le liste. */
@media (max-width: 1099px) {
    .fr-body-grid:has(#rc-campo) > .fr-top11-col { order: -1; }
}

.rc-gestione { color: var(--ink-2); font-size: var(--fs-micro); margin-left: auto; text-decoration: none; }
.rc-gestione:hover { color: var(--brand-ink); text-decoration: underline; }

/* L'avviso in testa a "Risultati e gestione" (formazione.js). */
.fm-rimando {
    background: var(--navy-tint);
    border-radius: var(--r-xs);
    color: var(--navy-ink);
    font-size: var(--fs-sm);
    margin: 0 0 var(--sp-3);
    padding: 8px 12px;
}
.fm-rimando a { font-weight: 600; }

/* ---- Viste sopra l'elenco ----------------------------------------------- */
.rc-viste { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.rc-viste .rc-avviso-lieve { margin: 0; }
.rc-liste > .rc-viste { padding-top: var(--sp-2); }
.rc-campo > .rc-viste { margin-top: var(--sp-3); }

/* ---- Zone di arrivo: pronte anche durante il trascinamento -------------- */
/* La zona di arrivo vive nel titolo della sezione: nessuna riga in piu',
   quindi l'elenco non si allunga quando scegli un giocatore. */
.rc-list-head.rc-zone { border: 2px dashed var(--brand-solid, var(--brand)); border-radius: var(--r-xs); }
.rc-list-head.rc-zone .rc-zone-t { font-weight: 600; }
body.rc-drag .rc-list-head[data-rc-zone] { border: 2px dashed var(--line-strong); border-radius: var(--r-xs); }

/* ---- Panchina sotto il campo (carte di fanta-rosa.css) ------------------ */
.rc-panca { margin-top: var(--sp-3); }
.rc-panca-griglia { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.rc-bcard { cursor: pointer; padding-bottom: 38px; }
.rc-bcard[draggable="true"] { cursor: grab; }
.rc-bcard.rc-sel { box-shadow: 0 0 0 2px var(--brand); border-color: var(--brand); }
.rc-bcard.rc-dest-ok { border: 2px dashed var(--brand); cursor: copy; }
.rc-bcard.rc-dest-no { cursor: not-allowed; opacity: .45; }
.rc-bcard .fr-bench-numeri { white-space: nowrap; }
.rc-bcard .fr-bench-tip .etichetta-chip { font-size: .6rem; padding: 0 6px; }
.rc-bcard-azioni { bottom: 6px; display: flex; gap: 4px; position: absolute; right: 6px; }
.rc-bcard-azioni .rc-btn { height: 26px; min-width: 26px; padding: 0; width: 26px; }
.rc-bface-vuota {
    align-items: center;
    background: var(--bg-sunken);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xs);
    color: var(--ink-3);
    display: flex;
    font-size: 1.3rem;
    height: 42px;
    justify-content: center;
    width: 32px;
}
.rc-bcard-add {
    border-style: dashed;
    color: var(--ink-2);
    grid-template-columns: auto auto minmax(0, 1fr);
    min-height: 64px;
    padding-bottom: var(--sp-2);
}
.rc-bcard-add .fr-bench-nome { color: var(--ink-2); white-space: normal; }
.rc-bcard-add-ico {
    align-items: center;
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-xs);
    display: flex;
    height: 42px;
    justify-content: center;
    width: 32px;
}

/* ---- Menu rapido (tasto destro) ----------------------------------------- */
.rc-menu {
    background: var(--bg-surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-lg);
    display: grid;
    min-width: 230px;
    padding: 4px;
    position: fixed;
    z-index: 2500;
}
.rc-menu-voce {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--r-xs);
    color: var(--ink-1);
    display: flex;
    font-size: var(--fs-sm);
    gap: 8px;
    padding: 6px 10px;
    text-align: left;
}
.rc-menu-voce:hover:not([aria-disabled="true"]),
.rc-menu-voce:focus-visible { background: var(--navy-tint); color: var(--navy-ink); outline: none; }
.rc-menu-voce[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.rc-menu-sep { background: var(--line); height: 1px; margin: 3px 4px; }

@media (max-width: 767px) {
    .fr-top11-col .rc-field { --rc-vgap: 18px; --rc-vpad: 56px; }
    .rc-panca-griglia { grid-template-columns: minmax(0, 1fr); }
}

/* Il testo d'aiuto resta un paragrafo: .rc-desk altrove e' un contenitore flex. */
.rc-hint > .rc-desk { display: block; flex: 1 1 0; min-width: 0; }
@media (max-width: 767px) { .rc-hint > .rc-desk { display: none !important; } }

/* Su telefono la panchina e' un elenco compatto: pulsanti a destra, sulla riga. */
@media (max-width: 767px) {
    .rc-bcard { padding: 6px 104px 6px 8px; row-gap: 2px; }
    .rc-bcard .fr-bench-crest { display: none; }
    .rc-bcard-azioni { bottom: auto; right: 8px; top: 50%; transform: translateY(-50%); }
    .rc-bcard-azioni .rc-btn { height: 30px; min-width: 30px; width: 30px; }
    .rc-bcard-add { padding-right: 8px; min-height: 52px; }
}

.rc-svuota { white-space: nowrap; }
@media (max-width: 767px) { .rc-svuota { justify-self: start; } }
@media (max-width: 767px) { .rc-hint > .rc-phone { flex: 1 1 0; min-width: 0; } }

/* ---- "Scegli": l'azione principale del pannello, a colore pieno -------- */
.rc-sheet .rc-cand-azioni .btn-sm.rc-pick {
    background: var(--brand-solid, var(--brand));
    border-color: var(--brand-solid, var(--brand));
    color: #fff;
    font-weight: 700;
}
.rc-sheet .rc-cand-azioni .btn-sm.rc-pick:hover:not(:disabled),
.rc-sheet .rc-cand-azioni .btn-sm.rc-pick:focus-visible { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.rc-sheet .rc-cand-azioni .btn-sm.rc-pick:disabled,
.rc-sheet .btn-sm.btn-primary:disabled {
    background: var(--bg-sunken);
    border-color: var(--line);
    color: var(--ink-3);
    opacity: 1;
}

/* ---- Frecce della panchina: di lato su computer, su/giu' altrove ------- */
.rc-arr-v { display: none; }
@media (max-width: 1099px) {
    .rc-arr-h { display: none; }
    .rc-arr-v { display: inline-block; }
}

/* ---- Barra di salvataggio: etichette corte su telefono ----------------- */
.rc-corto { display: none; }

@media (max-width: 767px) {
    .rc-savebar { align-items: center; flex-wrap: nowrap; gap: 8px; padding: 6px 8px 6px 12px; }
    .rc-savebar-testo { flex: 1 1 auto; }
    .rc-savebar-stato { font-size: .8rem; line-height: 1.25; }
    .rc-savebar-sub { display: none; }
    .rc-savebar-azioni { flex: 0 0 auto; flex-wrap: nowrap; }
    .rc-savebar-azioni .btn { flex: 0 0 auto; min-height: 40px; padding: 4px 10px; }
    .rc-lungo { display: none; }
    .rc-corto { display: inline; }
    .rc-savebar-err .rc-savebar-stato { font-size: .72rem; }
    body:has(#tab-fanta-rosa.active .rc-savebar) > main.workspace-main {
        padding-bottom: calc(var(--mobile-nav-h, 66px) + var(--user-bid-bar-h, 0px) + 80px) !important;
    }

    /* ---- Testata della squadra: una fascia compatta ---------------------
       Prima andava su quattro righe (nome, presidente, motto, numeri, maglia).
       Su telefono restano avatar, nome e presidente in alto e i tre numeri in
       fila sotto; motto, maglia e colori stanno su computer. */
    .fr-band { padding-bottom: 10px; padding-top: 10px; }
    .fr-band .fr-band-inner { gap: 8px; }
    .fr-band-id { flex: 1 1 100%; gap: 10px; }
    .fr-band-avatar .avatar { height: 40px !important; width: 40px !important; }
    .fr-band .fw-band-title { font-size: 1.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fr-band-testo { flex: 1 1 auto; }
    .fr-band-pres { font-size: .78rem; margin-top: 0; }
    .fr-band-edit { height: 22px; width: 22px; }
    .fr-band-motto,
    .fr-band-motto-vuoto,
    .fr-band-identita { display: none !important; }
    .fr-band-destra { width: 100%; }
    .fr-band-kpis { display: grid; gap: 6px; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
    .fr-band-kpi { align-items: baseline; border: 0; min-width: 0; padding: 4px 8px; }
    .fr-band-kpi-testo { align-items: baseline; flex-direction: row; gap: 6px; }
    .fr-band-kpi .fw-micro { font-size: .58rem; }
    .fr-band-val { font-size: 1rem; }
}

/* .btn-sm (style.css) rende grigi anche i pulsanti principali: qui tornano
   pieni, perche' sono le azioni da fare (salva, prepara, usa consigliata). */
#tab-fanta-rosa .btn-sm.btn-primary,
.rc-sheet .btn-sm.btn-primary {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
#tab-fanta-rosa .btn-sm.btn-primary:hover:not(:disabled),
.rc-sheet .btn-sm.btn-primary:hover:not(:disabled) { background: var(--navy-hover); border-color: var(--navy-hover); color: #fff; }
#tab-fanta-rosa .btn-sm.btn-primary:disabled { background: var(--bg-sunken); border-color: var(--line); color: var(--ink-3); }

/* ---- Dove si puo' lasciare: si vede da lontano -------------------------
   Il tratteggio bianco su una figurina bianca, sul verde, non bastava.
   La destinazione buona prende il colore d'accento e un alone; quella
   vietata sbiadisce; le altre carte si abbassano di tono. */
.rc-field.rc-scegliendo .rc-slot .rc-pawn { transition: box-shadow var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease); }

.fr-top11-col .rc-field .rc-slot.rc-dest-ok .rc-pawn {
    outline: 3px solid var(--brand-solid, var(--brand));
    outline-offset: 2px;
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand-solid, var(--brand)) 32%, transparent),
                0 14px 30px -10px rgba(16, 24, 40, .5);
}

.rc-slot.rc-dest-ok::after,
.rc-row.rc-dest-ok::after,
.rc-bcard.rc-dest-ok::after {
    align-items: center;
    background: var(--brand-solid, var(--brand));
    border-radius: 50%;
    color: #fff;
    content: "＋";
    display: flex;
    font-size: 15px;
    font-weight: 700;
    height: 24px;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
    position: absolute;
    right: -6px;
    top: -6px;
    width: 24px;
    z-index: 4;
}

.rc-row, .rc-bcard { position: relative; }
.rc-row.rc-dest-ok, .rc-bcard.rc-dest-ok {
    background: color-mix(in srgb, var(--brand-solid, var(--brand)) 12%, var(--bg-surface));
    border: 2px solid var(--brand-solid, var(--brand));
}

.fr-top11-col .rc-field .rc-slot.rc-dest-no .rc-pawn { filter: grayscale(.85); opacity: .3; }
.rc-row.rc-dest-no, .rc-bcard.rc-dest-no { opacity: .38; }

/* Le carte che non c'entrano restano leggibili ma in secondo piano. */
.rc-field.rc-scegliendo .rc-slot:not(.rc-dest-ok):not(.rc-dest-no):not(.rc-sel):not(.rc-origine) .rc-pawn { opacity: .72; }

.rc-zone.rc-dest-ok {
    background: color-mix(in srgb, var(--brand-solid, var(--brand)) 12%, transparent);
    border-color: var(--brand-solid, var(--brand));
    border-width: 2px;
    color: var(--brand-ink);
    font-weight: 600;
}

/* ---- La figurina: faccia, stemma, sigla del ruolo, valore in evidenza -- */
.rc-ruolo { bottom: 6px; left: 6px; line-height: 0; position: absolute; z-index: 2; }
.rc-ruolo .role-badge { font-size: 10px; line-height: 1.6; padding: 0 6px; }

.fr-top11-col .top11-player-card.t11-ricca .top11-player-stats {
    background: var(--bg-raised);
    border-radius: var(--r-full);
    color: var(--ink-1);
    font-weight: 600;
    margin-top: 3px;
    padding: 1px 8px;
}

@media (max-width: 767px) {
    .rc-ruolo { bottom: 3px; left: 3px; }
    .rc-ruolo .role-badge { font-size: 9px; padding: 0 4px; }
    .fr-top11-col .top11-player-card.t11-ricca .top11-player-stats { padding: 0 5px; }
    .rc-slot.rc-dest-ok::after, .rc-row.rc-dest-ok::after, .rc-bcard.rc-dest-ok::after { height: 20px; width: 20px; font-size: 13px; }
}

@media (max-width: 767px) {
    /* Sulle posizioni vietate basta il simbolo: la frase si legge al tocco. */
    .rc-slot.rc-dest-no .rc-no-t { display: none; }
    .rc-slot.rc-dest-no .rc-dest-info { background: transparent; border: 0; }
}

/* ---- Figurine senza carta bianca ---------------------------------------
   Sul prato restano la faccia, il nome e i segni: niente rettangolo bianco.
   Il fondo scuro dietro nome e numeri serve solo a tenerli leggibili
   sull'erba. Vale sul campo di "In campo": le altre vetrine (TV, Serie A)
   non cambiano. */
.fr-top11-col .top11-player-card.t11-ricca {
    background: transparent;
    border: 0;
    box-shadow: none;
    gap: 1px;
    padding: 4px 2px 6px;
}

.fr-top11-col .top11-player-card.t11-ricca::before { display: none; }   /* filetto di stato */
.fr-top11-col .top11-player-card.t11-ricca:hover { box-shadow: none; transform: translateY(-2px); }

.fr-top11-col .top11-player-card.t11-ricca .top11-pl-img,
.fr-top11-col .top11-player-card.t11-ricca .t11-sagoma {
    border-radius: var(--r-xs);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    height: 72px;
    width: 58px;
}

.fr-top11-col .top11-player-card.t11-ricca .top11-player-name {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6);
}

.fr-top11-col .top11-player-card.t11-ricca .top11-player-stats {
    background: rgba(12, 22, 16, .72);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    color: #fff;
}

.fr-top11-col .top11-player-card.t11-ricca .rc-k { color: rgba(255, 255, 255, .72); }
.fr-top11-col .top11-player-card.t11-ricca .t11-prev { color: rgba(255, 255, 255, .8); }

/* Lo stemma esce dal bordo della foto, come una toppa sulla spalla. */
.fr-top11-col .top11-player-card.t11-ricca .t11-crest { right: 50%; top: 2px; transform: translateX(46px); }
.fr-top11-col .top11-player-card.t11-ricca .rc-ruolo { bottom: auto; left: 50%; top: 58px; transform: translateX(-38px); }
.fr-top11-col .top11-player-card.t11-ricca .rc-scheda { left: 50%; top: 2px; transform: translateX(-46px); }

/* Selezione e destinazioni si vedono sulla foto, non piu' sulla carta. */
.fr-top11-col .rc-field .rc-slot.rc-sel .rc-pawn,
.fr-top11-col .rc-field .rc-pawn.rc-sel { box-shadow: none; }
.fr-top11-col .rc-field .rc-slot.rc-sel .rc-pawn .top11-pl-img,
.fr-top11-col .rc-field .rc-slot.rc-sel .rc-pawn .t11-sagoma {
    box-shadow: 0 0 0 3px var(--brand-solid, var(--brand)), 0 6px 16px rgba(0, 0, 0, .5);
}

.fr-top11-col .rc-field .rc-slot.rc-dest-ok .rc-pawn { box-shadow: none; outline: 0; }
.fr-top11-col .rc-field .rc-slot.rc-dest-ok .rc-pawn .top11-pl-img,
.fr-top11-col .rc-field .rc-slot.rc-dest-ok .rc-pawn .t11-sagoma {
    outline: 3px solid var(--brand-solid, var(--brand));
    outline-offset: 2px;
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--brand-solid, var(--brand)) 32%, transparent);
}

@media (max-width: 767px) {
    .fr-top11-col .rc-field .rc-pawn { padding: 2px 1px 4px; }
    .fr-top11-col .top11-player-card.t11-ricca .top11-pl-img,
    .fr-top11-col .top11-player-card.t11-ricca .t11-sagoma { height: 46px; width: 38px; }
    .fr-top11-col .top11-player-card.t11-ricca .t11-crest { transform: translateX(28px); }
    .fr-top11-col .top11-player-card.t11-ricca .t11-crest .t11-crest-img,
    .fr-top11-col .top11-player-card.t11-ricca .t11-crest .t11-crest-img-fallback { height: 16px; width: 13px; }
    .fr-top11-col .top11-player-card.t11-ricca .rc-ruolo { top: 34px; transform: translateX(-24px); }
}

/* Casa/aereo e stato stanno insieme in una pillola scura, non sparsi sul prato. */
.fr-top11-col .top11-player-card.t11-ricca .t11-piede {
    background: rgba(12, 22, 16, .72);
    border-radius: var(--r-full);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    gap: 3px;
    margin-top: 3px;
    padding: 1px 5px;
    width: auto;
}

.fr-top11-col .top11-player-card.t11-ricca .t11-piede:empty { display: none; }
.fr-top11-col .top11-player-card.t11-ricca .t11-piede .fw-diff { background: transparent; }
.fr-top11-col .top11-player-card.t11-ricca .t11-piede .fw-diff-0 { color: rgba(255, 255, 255, .8); }
.fr-top11-col .top11-player-card.t11-ricca .t11-piede .etichetta-chip { background: transparent; }
.fr-top11-col .top11-player-card.t11-ricca .t11-piede .rc-disp { background: transparent; }
/* Dentro la pillola scura l'anello vuole una pista chiara, o il pieno e il
   vuoto si confondono; e il glifo al centro va schiarito, perche' i colori
   della difficolta' sono pensati per il fondo bianco delle liste. */
.fr-top11-col .top11-player-card.t11-ricca .t11-piede .rc-segno-pista { stroke: rgba(255, 255, 255, .26); }
.fr-top11-col .top11-player-card.t11-ricca .t11-piede .rc-segno-conviene { stroke: #f0c36a; }
.fr-top11-col .top11-player-card.t11-ricca .t11-piede .rc-segno-dove.fw-diff-0,
.fr-top11-col .top11-player-card.t11-ricca .t11-piede .rc-segno-dove.fw-diff-3 { color: rgba(255, 255, 255, .92); }
.fr-top11-col .top11-player-card.t11-ricca .t11-piede .rc-segno-dove.fw-diff-1,
.fr-top11-col .top11-player-card.t11-ricca .t11-piede .rc-segno-dove.fw-diff-2 { color: #7ee2b8; }
.fr-top11-col .top11-player-card.t11-ricca .t11-piede .rc-segno-dove.fw-diff-4 { color: #f3c969; }
.fr-top11-col .top11-player-card.t11-ricca .t11-piede .rc-segno-dove.fw-diff-5 { color: #ff8f86; }

/* I ritagli di Football Manager non hanno sfondo: niente riquadro dietro,
   e l'immagine resta intera invece di essere tagliata. */
.fr-top11-col .top11-player-card.t11-ricca .top11-pl-img.t11-foto-fm,
.rc-bcard .fr-bench-face img.rc-bface-fm {
    background: transparent;
    border: 0;
    box-shadow: none;
    object-fit: contain;
    object-position: bottom center;
}

.fr-top11-col .top11-player-card.t11-ricca .top11-pl-img.t11-foto-fm {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45));
}

/* Titolo e zona hanno la stessa scatola: cambiando stato non si sposta nulla. */
.rc-list-head,
.rc-list-head.rc-zone {
    align-items: center;
    border: 2px solid transparent;
    border-bottom: 2px solid var(--line);
    box-sizing: border-box;
    margin-bottom: 6px;
    min-height: 38px;
    padding: 4px 8px;
}

.rc-list-head.rc-zone { border-bottom-color: var(--brand-solid, var(--brand)); }

/* ---- La figurina: ritratto FM dietro lo scollo della propria maglia ------
   La testa conserva le proporzioni della foto; la maglia copre le spalle
   originali e il fondo del collo. Si sfuma soltanto il fondo del petto. */
.rc-fig {
    /* La testa resta quella di prima: allargarla insieme al corpo lasciava
       il rapporto identico, cioe' il problema identico. Cresce solo la
       maglia, e la testa diventa piu' piccola in proporzione. */
    --faccia: 48px;
    --kit-w: 90px;
    --kit-h: calc(var(--kit-w) * var(--kit-ratio));
    --kit-collo: calc(var(--kit-h) * var(--kit-scollo));
    --collo-fuori: calc(var(--faccia) * .07);
    /* Della maglia si vede il petto: intera sarebbe piu' alta del giocatore. */
    --kit-visto: calc(var(--kit-h) * .62);
    display: block;

    height: calc(var(--kit-visto) + var(--faccia) - var(--kit-collo) + var(--collo-fuori));
    isolation: isolate;
    margin: 0 auto;
    position: relative;
    width: var(--kit-w);
}

.rc-fig-kitwrap {
    bottom: 0;
    height: var(--kit-visto);
    left: 0;
    overflow: hidden;
    position: absolute;
    width: var(--kit-w);
    z-index: 2;
    -webkit-mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 72%, transparent 100%);
}

.rc-fig-kit {
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    width: var(--kit-w);
}

/* Il collo entra nell'apertura trasparente; il bordo anteriore della maglia
   lo copre senza sfumare la pelle sul tessuto. La maschera laterale elimina
   eventuali spalle larghe prima che possano sporgere dietro la maglia. */
.rc-fig-face {
    top: 0;
    height: calc(var(--faccia) * 1.12);
    left: 50%;
    object-fit: contain;
    object-position: bottom center;
    position: absolute;
    transform: translateX(-50%);
    width: var(--faccia);
    z-index: 1;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 80% 80%, 72% 86%, 70% 100%, 30% 100%, 28% 86%, 20% 80%, 0 70%);
}

@media (max-width: 767px) { .rc-fig { --faccia: 30px; --kit-w: 54px; } }

/* Il nome sale sul petto della maglia, come sulle figurine vere: sotto le
   spalle la maglia e' piena e fa da sfondo, e la figurina resta grande.
   Le righe sotto non si schiacciano piu': la carta ha altezza fissa. */
.fr-top11-col .top11-player-card.t11-ricca .t11-foto:has(.rc-fig) { margin-bottom: -24px; }
.fr-top11-col .top11-player-card.t11-ricca .top11-player-name,
.fr-top11-col .top11-player-card.t11-ricca .top11-player-stats,
.fr-top11-col .top11-player-card.t11-ricca .t11-piede { flex: 0 0 auto; position: relative; z-index: 4; }
.fr-top11-col .top11-player-card.t11-ricca .t11-foto:has(.rc-fig) + .top11-player-name {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 7px rgba(0, 0, 0, .75);
}

@media (max-width: 767px) {
    .fr-top11-col .top11-player-card.t11-ricca .t11-foto:has(.rc-fig) { margin-bottom: -14px; }
}

/* Sul petto il nome ha bisogno di stacco: ombra piu' decisa. */
.fr-top11-col .top11-player-card.t11-ricca .rc-fig + .top11-player-name {
    position: relative;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .7);
    z-index: 4;
}


/* Chi non ha la faccia di Football Manager: una sagoma grigia sulla maglia,
   cosi' in campo le figurine hanno tutte la stessa forma. */
.rc-fig-sagoma {
    clip-path: none;
    height: calc(var(--faccia) * 1.12);
    width: var(--faccia);
}

/* Il pannello appartiene alla pedina, non al nome: copre sempre il fondo
   della maglia e separa idoneita' (bordo) dal consiglio (pallino). */
.fr-top11-col .top11-player-card.t11-ricca.t11-con-pannello .t11-foto:has(.rc-fig) { margin-bottom: 0; }
.fr-top11-col .t11-con-pannello .t11-info {
    --fit-color: #8995a5;
    background: rgba(43, 47, 52, .74);
    border: 1px solid var(--fit-color);
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: -24px auto 0;
    padding: 5px 3px;
    position: relative;
    width: min(100%, 112px);
    min-width: 0;
    z-index: 4;
}
.fr-top11-col .t11-info.t11-fit-natural { --fit-color: #26b883; }
.fr-top11-col .t11-info.t11-fit-suitable { --fit-color: #d6a443; }
.fr-top11-col .t11-info.t11-fit-makeshift { --fit-color: #ed922c; }
.fr-top11-col .t11-info.t11-fit-out_of_position { --fit-color: #ec6565; }
.fr-top11-col .t11-info.t11-fit-incompatible { --fit-color: #d83e50; }
.fr-top11-col .top11-player-card.t11-con-pannello .top11-player-name {
    font-size: 15px;
    line-height: 1.1;
    margin: 0;
    text-align: center;
    text-shadow: none;
}
.fr-top11-col .top11-player-card.t11-con-pannello .top11-player-stats {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    font-size: 10px;
    line-height: 1.3;
    gap: 3px;
}
.fr-top11-col .top11-player-card.t11-con-pannello .t11-piede {
    background: transparent;
    box-shadow: none;
    margin: 0;
    padding: 0;
    gap: 7px;
    height: 18px;
    flex-wrap: nowrap;
    overflow: visible;
}
.fr-top11-col .t11-con-pannello .t11-piede > :last-child {
    position: relative;
    overflow: visible;
    margin-left: 6px;
}
.fr-top11-col .t11-con-pannello .t11-piede > :last-child::after {
    content: "";
    position: absolute;
    left: -7px;
    top: 3px;
    height: 12px;
    width: 1px;
    background: rgba(255, 255, 255, .45);
}
.fr-top11-col .t11-con-pannello .t11-piede > :only-child { margin-left: 0; }
.fr-top11-col .t11-con-pannello .t11-piede > :only-child::after { display: none; }
@media (max-width: 767px) {
    .fr-top11-col .t11-con-pannello .t11-info { margin-top: -14px; padding: 4px 1px; gap: 3px; border-radius: 4px; }
    .fr-top11-col .top11-player-card.t11-con-pannello .top11-player-name { font-size: 10px; }
    .fr-top11-col .top11-player-card.t11-con-pannello .top11-player-stats { font-size: 8px; gap: 2px; }
    .fr-top11-col .t11-con-pannello .rc-k { font-size: 7px; }
    .fr-top11-col .t11-con-pannello .rc-prob { display: none; }
    .fr-top11-col .top11-player-card.t11-con-pannello .t11-piede { gap: 3px; }
}

/* Anche la consigliata usa la misura della fila da cinque: il portiere e
   i reparti meno affollati mantengono lo stesso ingombro delle altre pedine. */
.fr-top11-col #fr-top11-field .formation-field {
    --rc-gap: 10px;
    --rc-w: min(142px, calc((100% - 4 * var(--rc-gap)) / 5));
    --rc-h: 170px;
    gap: 22px;
    padding: 42px 12px 24px;
}
.fr-top11-col #fr-top11-field .formation-line { gap: var(--rc-gap); justify-content: space-evenly; }
.fr-top11-col #fr-top11-field .top11-position { flex: 0 0 var(--rc-w); width: var(--rc-w); }
.fr-top11-col #fr-top11-field .top11-player-card {
    height: var(--rc-h);
    justify-content: flex-start;
    overflow: hidden;
}
.fr-top11-col #fr-top11-field .t11-piede { flex-wrap: nowrap; }
.fr-top11-col #fr-top11-field .t11-piede .etichetta-chip {
    flex: 0 0 22px;
    font-size: 0;
    height: 22px;
    justify-content: center;
    padding: 0;
    width: 22px;
}
.fr-top11-col #fr-top11-field .t11-piede .etichetta-chip::before { height: 10px; width: 10px; }
@media (max-width: 767px) {
    .fr-top11-col #fr-top11-field .formation-field {
        --rc-gap: 4px;
        --rc-h: 124px;
        gap: 18px;
        padding: 30px 4px 16px;
    }
    .fr-top11-col #fr-top11-field .top11-player-card { gap: 1px; padding: 4px 2px 3px; }
}

/* Stemma a sinistra e ruolo nell'angolo alto a destra del pannello.
   Il ruolo apre la scheda senza selezionare o spostare la pedina. */
.fr-top11-col .top11-player-card.t11-con-pannello .t11-crest {
    left: max(-3px, calc(50% - 65px)); right: auto; top: -10px; transform: none;
}
.fr-top11-col .top11-player-card.t11-con-pannello .t11-crest-img,
.fr-top11-col .top11-player-card.t11-con-pannello .t11-crest-img-fallback { width: 38px; height: 50.6667px; }
.fr-top11-col .top11-player-card.t11-con-pannello .rc-ruolo {
    left: auto; right: 1px; top: -17px; bottom: auto;
    transform: none;
    border: 0; background: transparent; padding: 0;
    cursor: pointer; line-height: 1; z-index: 3;
}
.fr-top11-col .t11-con-pannello .rc-ruolo .role-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; padding: 0; font-size: 13px;
}
.fr-top11-col .t11-con-pannello .rc-ruolo:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 50%; }
@media (max-width: 767px) {
    .fr-top11-col .top11-player-card.t11-con-pannello .t11-crest { left: max(0px, calc(50% - 35px)); transform: none; top: 2px; }
    .fr-top11-col .top11-player-card.t11-con-pannello .t11-crest-img,
    .fr-top11-col .top11-player-card.t11-con-pannello .t11-crest-img-fallback { width: 21px; height: 28px; }
    .fr-top11-col .top11-player-card.t11-con-pannello .rc-ruolo { left: auto; right: 1px; transform: none; top: -13px; }
    .fr-top11-col .t11-con-pannello .rc-ruolo .role-badge { width: 16px; height: 16px; font-size: 10px; }
}

@media (min-width: 768px) {
    .fr-top11-col .rc-field .top11-player-card.t11-con-pannello,
    .fr-top11-col #fr-top11-field .top11-player-card.t11-con-pannello { overflow: visible; }
}