/* sito.css - lo stile comune delle pagine del sito (2026-10-11).
 *
 * NIENTE RISORSE ESTERNE: i font stanno in ../fonts/ (Figtree e JetBrains
 * Mono, licenza SIL OFL 1.1, vedi fonts/LICENZA.txt). Se i file mancano - la
 * pagina servita da un PC offline che non li ha copiati - si ricade su
 * Segoe UI e Consolas, e non si rompe niente.
 *
 * I punti di rottura sono quelli di sempre: 900 px -> una colonna sola,
 * 640 px -> bersagli da 44 px e campi a 16 px (sotto i 16 iOS ingrandisce la
 * pagina quando un campo prende il fuoco, e non la rimpicciolisce piu').
 *
 * Due lingue nello stesso file: .l-it / .l-en, si vede quella di <html lang>.
 */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/figtree-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(../fonts/figtree-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --pagina: #f7f4ec; --scheda: #fff; --bordo: #e7e0cf; --bordo2: #dfd7c4; --bordo-scuro: #cbc3b0; --riga: #efe9db;
  --fondo2: #f4f0e6; --fondo3: #fbf8f1;
  --inchiostro: #10241c; --testo2: #3b463f; --tenue: #6b7269; --tenue2: #8b9189; --tenue3: #a1a69f;
  --verde: #12805c; --verde2: #0f6b4a; --verde3: #0b573b; --verde-vivo: #16a06e; --verde-chiaro: #eaf6ef; --verde-bordo: #c6e6d3;
  --arancio: #f2733a; --arancio2: #f5844f; --arancio-ombra: #b9501f; --arancio-chiaro: #fff1e6; --arancio-bordo: #f7cfb0; --arancio-testo: #a84816;
  --cupo: #0f3b2d; --menta: #7fe0ac; --rosso: #b3392f; --ambra: #c07a12;
  --azzurro: #3a8fd9;
  --sans: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", Consolas, "Cascadia Mono", "Courier New", monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.5 var(--sans); color: var(--inchiostro); background: var(--pagina); }
[hidden] { display: none !important; }
html[lang="it"] .l-en, html[lang="en"] .l-it { display: none !important; }
img.px { image-rendering: pixelated; }
a { color: var(--verde2); }
a:hover { color: var(--verde3); }
code { background: var(--fondo2); border-radius: 5px; padding: 1px 6px; font: 12.5px/1.4 var(--mono); }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--verde-vivo); outline-offset: 2px; }

/* ------------------------------------------------------------ intestazione */
.testata { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 28px; background: #fff; border-bottom: 1px solid var(--bordo); }
.marchio { position: relative; width: 44px; height: 44px; flex: none; border-radius: 12px; overflow: hidden; border: 2px solid #0b2a20;
           background: url(../img/tile-erba-alta.png) 0 0/24px 24px repeat; image-rendering: pixelated; display: block; }
.marchio img { position: absolute; image-rendering: pixelated; }
.marchio .o1 { left: 4px; bottom: 4px; width: 19px; height: 19px; }
.marchio .o2 { right: 3px; top: 3px; width: 17px; height: 17px; }
.marchio.vivo { box-shadow: 0 0 0 3px rgba(22,160,110,.4); }
.nome-sito { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--inchiostro); text-decoration: none; white-space: nowrap; }
.nome-sito small { display: block; font-size: 12.5px; font-weight: 500; letter-spacing: 0; color: #5d6b62; white-space: normal; }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a { height: 36px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 600; line-height: 36px; color: #5d6b62; text-decoration: none; white-space: nowrap; }
.nav a:hover { background: var(--fondo2); color: var(--inchiostro); }
.nav a.qui { font-weight: 700; color: var(--verde2); background: var(--verde-chiaro); }
.pillole { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.pillola { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--fondo2); border: 1px solid var(--bordo2);
           color: var(--testo2); font-size: 13px; font-weight: 600; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.pillola > span { overflow: hidden; text-overflow: ellipsis; }
.pillola .led, .pillola > i { width: 8px; height: 8px; border-radius: 50%; background: #a9afa8; flex: none; }
.pillola.ok { background: var(--verde-chiaro); border-color: var(--verde-bordo); color: var(--verde2); }
.pillola.ok .led, .pillola.ok > i { background: var(--verde-vivo); }
.pillola.no { background: #fdecea; border-color: #f1c4be; color: var(--rosso); }
.pillola.no .led, .pillola.no > i { background: var(--rosso); }
.pillola.attesa { background: #fdf4dd; border-color: #e8ce8f; color: #8a5a0b; }
.pillola.attesa .led, .pillola.attesa > i { background: var(--ambra); }
.pillola.stanza { background: var(--arancio-chiaro); border-color: var(--arancio-bordo); color: var(--arancio-testo); font-weight: 700; }
.pillola.mono { font: 12px/1 var(--mono); }
#lingua-slot { color: var(--inchiostro); display: inline-flex; }

/* --------------------------------------------------------------- contenuto */
.muro { max-width: 1336px; margin: 0 auto; padding: 24px 28px 30px; }
.scheda { background: var(--scheda); border: 1px solid var(--bordo); border-radius: 18px; padding: 16px 18px; min-width: 0; }
.scheda.tratteggio { border-style: dashed; border-color: #d8cfba; }
.etichetta { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--tenue2); }
.mono { font-family: var(--mono); }
.tenue { color: var(--tenue); }
.piccolo { font-size: 12.5px; line-height: 1.5; color: var(--tenue); }
.colonna { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* il riquadro grande verde scuro */
.eroe { position: relative; overflow: hidden; border-radius: 20px; background: var(--cupo); color: #eaf5ee; padding: 26px 30px; }
.eroe::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: min(260px, 45%); background: url(../img/tile-erba-alta.png) 0 0/64px 64px repeat; image-rendering: pixelated; opacity: .55; }
.eroe::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: min(260px, 45%); background: linear-gradient(90deg, var(--cupo) 0%, rgba(15,59,45,.2) 100%); }
.eroe > * { position: relative; z-index: 1; }
.eroe .dentro { max-width: 560px; }
.eroe .sopra { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--menta); }
.eroe h1, .eroe .titolo { margin: 8px 0 0; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; text-wrap: pretty; }
.eroe p, .eroe .sotto { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: rgba(234,245,238,.78); }
.eroe .azioni { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; align-items: center; }
.eroe.piccolo-eroe { padding: 16px; border-radius: 18px; }
.eroe.piccolo-eroe::before { width: 120px; background-size: 48px 48px; opacity: .45; }
.eroe.piccolo-eroe::after { width: 120px; }

/* ---------------------------------------------------------------- bottoni */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--bordo-scuro);
       background: #fff; color: var(--testo2); font: 600 13px/1 var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover:not(:disabled) { background: #f5f0e3; color: var(--inchiostro); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.arancio { height: 50px; padding: 0 28px; border: none; border-radius: 12px; background: var(--arancio); color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 6px 0 var(--arancio-ombra); }
.btn.arancio:hover:not(:disabled) { background: var(--arancio2); color: #fff; }
.btn.arancio:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 3px 0 var(--arancio-ombra); }
.btn.arancio.basso { height: 44px; padding: 0 20px; font-size: 14px; box-shadow: 0 3px 0 var(--arancio-ombra); }
.btn.vetro { height: 50px; padding: 0 20px; border-radius: 12px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff; font-size: 14px; }
.btn.vetro:hover:not(:disabled) { background: rgba(255,255,255,.16); color: #fff; }
.btn.verde, button.salva { border: none; background: var(--verde2); color: #fff; font-weight: 700; }
.btn.verde:hover:not(:disabled), button.salva:hover:not(:disabled) { background: var(--verde3); color: #fff; }
.btn.invito { border-color: var(--arancio-bordo); background: var(--arancio-chiaro); color: var(--arancio-testo); font-weight: 700; }
.btn.invito:hover:not(:disabled) { background: #ffe6d3; color: var(--arancio-testo); }
.btn.rosso { border-color: #e9c3bd; color: var(--rosso); }
.btn.rosso:hover:not(:disabled) { background: #fdf1ef; color: var(--rosso); }
.btn.largo { width: 100%; }
button.minore, a.minore, label.minore { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--bordo2); border-radius: 10px; background: var(--fondo3);
  color: var(--testo2); font: 600 12.5px/1 var(--sans); cursor: pointer; text-decoration: none; white-space: nowrap; }
button.minore:hover:not(:disabled), a.minore:hover, label.minore:hover { background: #f5f0e3; }
button.minore:disabled { opacity: .5; cursor: not-allowed; }
button.salva { height: 40px; padding: 0 18px; border-radius: 10px; font: 700 13px/1 var(--sans); cursor: pointer; }

/* interruttore (un bottone con aria-pressed) */
/* il bersaglio e' piu' grande del disegno: ::before allarga la zona che si tocca */
.interruttore::before { content: ""; position: absolute; inset: -8px; }
.interruttore { position: relative; width: 48px; height: 28px; flex: none; border: none; border-radius: 999px; background: var(--bordo-scuro); cursor: pointer; padding: 0; }
.interruttore::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .15s; }
.interruttore[aria-pressed="true"] { background: var(--verde); }
.interruttore[aria-pressed="true"]::after { left: 23px; }
.interruttore.piccolo-int { width: 36px; height: 22px; }
.interruttore.piccolo-int::after { top: 2px; left: 2px; width: 18px; height: 18px; }
.interruttore.piccolo-int[aria-pressed="true"]::after { left: 16px; }

/* ------------------------------------------------------------------ campi */
label.campo { display: block; min-width: 0; }
label.campo > span { display: block; font-size: 12px; font-weight: 600; color: var(--testo2); margin-bottom: 6px; }
label.campo > small.guida, small.guida { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.5; color: var(--tenue); }
input[type=text], input[type=number], input[type=search], select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--bordo2); border-radius: 10px; background: #fff;
  font: 13.5px/1 var(--mono); color: var(--inchiostro); }
input:focus, select:focus { outline: 2px solid var(--verde-vivo); outline-offset: 1px; }
input::placeholder { color: #9aa39c; }
.campi { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.campi .larga { grid-column: 1 / -1; }
.esito { font-size: 13px; margin-top: 10px; min-height: 19px; color: var(--tenue); }
.esito.male { color: var(--rosso); font-weight: 600; }
.esito.bene { color: var(--verde2); font-weight: 600; }

/* fisarmonica: <details> veri, cosi' funziona anche senza JavaScript */
.fisarmoniche { padding: 0; overflow: hidden; }
.fisarmoniche > details { border-top: 1px solid var(--riga); }
.fisarmoniche > details:first-child { border-top: 0; }
.fisarmoniche summary { display: flex; align-items: center; gap: 12px; padding: 15px 18px; cursor: pointer; list-style: none; user-select: none; }
.fisarmoniche summary::-webkit-details-marker { display: none; }
.fisarmoniche summary b { font-size: 15px; font-weight: 700; white-space: nowrap; }
.fisarmoniche summary > span { font-size: 12.5px; color: var(--tenue2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fisarmoniche summary::after { content: "+"; margin-left: auto; font: 700 16px var(--mono); color: var(--tenue2); }
.fisarmoniche details[open] > summary::after { content: "–"; }
.fisarmoniche .corpo { padding: 0 18px 18px; }
.fisarmoniche p.aiuto, p.aiuto { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--tenue); }
details.avanzate { margin-top: 12px; border: 1px dashed var(--bordo-scuro); border-radius: 12px; padding: 0 12px; }
details.avanzate > summary { padding: 11px 0; font-size: 13px; font-weight: 700; cursor: pointer; }
details.avanzate[open] { padding-bottom: 12px; }

/* --------------------------------------------------------- pallini e posti */
.avatar { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; color: #fff; font-weight: 800; font-size: 14px; position: relative; text-transform: uppercase; }
.avatar.m { width: 32px; height: 32px; font-size: 13px; }
.avatar.s { width: 28px; height: 28px; font-size: 12px; }
.avatar.grigio { background: var(--riga); color: var(--tenue); }
.avatar .vivo { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--verde-vivo); border: 2px solid #fff; }
.avatar .vivo.fermo { background: var(--bordo-scuro); }
.posto-libero { display: flex; align-items: center; gap: 10px; padding: 8px; color: var(--tenue2); font-size: 13px; }
.posto-libero::before { content: ""; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1.5px dashed var(--bordo-scuro); }
.giocatori { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.giocatori li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; min-width: 0; }
.giocatori li:hover { background: var(--pagina); }
.giocatori .chi { min-width: 0; flex: 1; }
.giocatori .chi b { display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.giocatori .chi b small { font: 500 11.5px var(--mono); color: var(--tenue2); }
.giocatori .chi span { display: block; font-size: 12px; line-height: 1.35; color: var(--tenue); overflow-wrap: anywhere; }
.giocatori .eta { font: 11.5px var(--mono); color: var(--tenue2); flex: none; }
/* la squadra (2026-10-16): le icone del gioco, il livello sotto */
.giocatori .chi .squadra-fila { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.squadra-fila .mon { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: 34px; }
.squadra-fila .mon img { width: 32px; height: 32px; image-rendering: pixelated; }
.squadra-fila .mon .senza { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font: 600 10px var(--mono); color: var(--tenue2); }
.squadra-fila .mon small { font: 600 10px/1 var(--mono); color: var(--tenue); }
.squadra-fila .mon.ko img { filter: grayscale(1); opacity: .55; }
/* i dettagli della squadra (2026-10-16) */
.squadra-dettagli { margin-top: 4px; }
.squadra-dettagli summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--verde2); }
.squadra-dettagli ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.squadra-dettagli li { display: flex; gap: 6px; align-items: flex-start; }
.squadra-dettagli li img { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
.squadra-dettagli .testo { min-width: 0; flex: 1; }
.giocatori .squadra-dettagli .testo b { white-space: normal; font-size: 13px; }
.giocatori .squadra-dettagli .testo span { display: inline; }
.giocatori .squadra-dettagli .testo .sesso { font-size: 15px; font-weight: 800; line-height: 1; }
.squadra-dettagli .sesso.m { color: #3a8fd9; }
.squadra-dettagli .sesso.f { color: #d9467a; }
.squadra-dettagli .tenue { display: block; font-size: 11.5px; color: var(--tenue); }
.squadra-dettagli .ps { display: flex; align-items: center; gap: 6px; font: 600 11px var(--mono); color: var(--tenue); flex-wrap: wrap; }
.squadra-dettagli .barra-ps { display: inline-block; width: 70px; }
.squadra-dettagli .stato { padding: 0 6px; border-radius: 6px; background: #f4e3c4; color: #7a4d00; font: 700 10.5px var(--sans); }
.squadra-dettagli .mosse { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.giocatori .squadra-dettagli .mosse span { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--pagina); border: 1px solid var(--riga); font-size: 11px; color: var(--inchiostro); }
.squadra-fila .mon.cromatico::after { content: "\2605"; position: absolute; top: -2px; right: 0; font-size: 10px; color: #d39a12; }
.giocatori.stretti li { padding: 4px 0; }
.giocatori.stretti li:hover { background: none; }
.giocatori.stretti .posto-libero { padding: 4px 0; }
.giocatori.stretti .posto-libero::before { width: 32px; height: 32px; }
.pallini { display: flex; gap: 4px; }
.pallini i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px dashed var(--bordo-scuro); }
.pallini i.pieno { border: none; background: var(--verde); }

/* -------------------------------------------------------------------- chat */
.chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-testa { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--riga); min-width: 0; }
.chat-testa .titolo { font-size: 17px; font-weight: 800; flex: none; }
.chat-testa .nota { margin-left: auto; flex: 0 1 auto; min-width: 0; font-size: 12px; color: var(--tenue2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schede-filtro { display: flex; flex: none; gap: 4px; padding: 3px; background: var(--fondo2); border-radius: 10px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.schede-filtro::-webkit-scrollbar { display: none; }
.schede-filtro button { height: 28px; padding: 0 12px; border: none; border-radius: 8px; background: transparent; font: 600 12.5px var(--sans); color: var(--tenue); cursor: pointer; white-space: nowrap; }
.schede-filtro button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 700; color: var(--inchiostro); }
.chat-lista { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; min-height: 120px; overscroll-behavior: contain; }
.chat-vuota { margin: auto; text-align: center; font-size: 13px; line-height: 1.55; color: var(--tenue2); max-width: 300px; padding: 20px 0; }
.chat-giorno { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue3); }
.chat-giorno::before, .chat-giorno::after { content: ""; flex: 1; height: 1px; background: var(--riga); }
.chat-ev { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding-left: 46px; font-size: 12.5px; color: var(--tenue); }
.chat-ev i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--tenue2); }
.chat-ev time, .chat-msg time { font: 11px var(--mono); color: var(--tenue3); }
.chat-msg { display: flex; gap: 10px; margin-top: 3px; min-width: 0; }
.chat-msg.primo { margin-top: 12px; }
.chat-msg .spazio { width: 36px; flex: none; }
.chat-msg .corpo { min-width: 0; max-width: 78%; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.chat-msg .chi { font-size: 13px; font-weight: 700; }
.chat-msg .chi time { font-weight: 400; }
.bolla { position: relative; background: #f3efe5; border: 1px solid transparent; border-radius: 4px 16px 16px 16px; padding: 8px 12px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.bolla.menzione { background: #fff6ee; border-color: var(--arancio-bordo); }
.bolla .menzionato { margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--arancio-testo); }
.bolla .cita { margin: 0 0 6px; padding: 5px 9px; border-radius: 8px; background: rgba(16,36,28,.06); font-size: 12px; color: #5d6b62; overflow-wrap: anywhere; }
.chat-msg .rispondi { border: none; background: none; padding: 2px 4px; font: 600 11.5px var(--sans); color: var(--tenue2); cursor: pointer; }
.chat-msg .rispondi:hover { color: var(--verde2); }
.chat-msg.mio { flex-direction: column; align-items: flex-end; gap: 3px; }
.chat-msg.mio .chi { font: 11px var(--mono); font-weight: 400; color: var(--tenue3); padding-right: 4px; }
.chat-msg.mio .bolla { max-width: 78%; background: var(--verde); color: #fff; border-radius: 16px 4px 16px 16px; }
.chat-msg.mio .bolla .cita { background: rgba(255,255,255,.16); color: #e2f3ea; }
.pos-scheda { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.pos-scheda .tile { width: 44px; height: 44px; flex: none; border-radius: 10px; background: url(../img/tile-erba-alta.png) 0 0/22px 22px repeat; image-rendering: pixelated; border: 2px solid var(--tenue2); }
.pos-scheda .dove { flex: 1; min-width: 0; }
.pos-scheda .dove small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue2); }
.pos-scheda .dove b { font-weight: 700; }
.pos-scheda .dove span { font: 400 12px var(--mono); color: var(--tenue); white-space: nowrap; }
.pos-scheda a { font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.chat-msg.mio .pos-scheda .tile { border-color: #fff; }
.chat-msg.mio .pos-scheda .dove small { color: #bfe6d1; }
.chat-msg.mio .pos-scheda .dove span { color: #cfeedd; }
.chat-msg.mio .pos-scheda a { color: #fff; text-decoration: underline; }
.chat-scrive { display: flex; align-items: center; gap: 8px; min-height: 22px; padding: 0 18px 6px 64px; font-size: 12.5px; color: var(--tenue2); }
.chat-scrive .punti { display: flex; gap: 3px; }
.chat-scrive .punti i { width: 5px; height: 5px; border-radius: 50%; background: var(--arancio); animation: punto 1.2s infinite; }
.chat-scrive .punti i:nth-child(2) { animation-delay: .2s; } .chat-scrive .punti i:nth-child(3) { animation-delay: .4s; }
@keyframes punto { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-scrive .punti i { animation: none; opacity: .6; } }
.chat-piede { border-top: 1px solid var(--riga); padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-risposta { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--fondo2); font-size: 12.5px; color: var(--testo2); min-width: 0; }
.chat-risposta b { font-weight: 700; color: var(--verde2); flex: none; }
.chat-risposta span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tenue); }
.chat-risposta button { border: none; background: none; font-size: 18px; line-height: 1; color: var(--tenue2); cursor: pointer; padding: 4px 6px; }
.chat-rapide { display: flex; gap: 6px; flex-wrap: wrap; }
.chat-rapide button { height: 30px; padding: 0 12px; border: 1px solid var(--bordo); border-radius: 999px; background: var(--fondo3); color: var(--testo2); font: 600 12.5px var(--sans); cursor: pointer; }
.chat-rapide button:hover:not(:disabled) { border-color: var(--arancio-bordo); background: var(--arancio-chiaro); color: var(--arancio-testo); }
.chat-riga { display: flex; gap: 8px; align-items: center; }
.chat-riga input[type=text] { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; font: 14px var(--sans); }
.chat-riga .pos { height: 44px; padding: 0 14px; border: 1px solid var(--bordo2); border-radius: 12px; background: #fff; color: var(--verde2); font: 700 13px var(--sans); cursor: pointer; white-space: nowrap; }
.chat-riga .pos:disabled, .chat-riga .manda:disabled, .chat-rapide button:disabled { opacity: .5; cursor: not-allowed; }
.chat-riga .manda { height: 44px; padding: 0 20px; border: none; border-radius: 12px; background: var(--arancio); color: #fff; font: 800 14px var(--sans); cursor: pointer; box-shadow: 0 3px 0 var(--arancio-ombra); }
.chat-avviso { font-size: 12px; color: var(--tenue); min-height: 0; }
/* le emote (2026-10-16): il riquadro del gioco, mai l'emoji */
.emo { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: #fff;
       border: 2px solid #23302a; box-shadow: 0 2px 0 #23302a; font: 900 18px/1 var(--sans); }
.emo.mini { width: 18px; height: 18px; border-radius: 5px; border-width: 1.5px; box-shadow: none; font-size: 11px; vertical-align: -4px; margin-left: 2px; }
/* la barra della chat grande: titolo e aiuto a sinistra, tre bottoni a destra */
.chat-emote { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 14px; border-radius: 14px; background: var(--pagina); }
.chat-emote .testo { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.chat-emote .testo b { font-size: 13px; font-weight: 800; }
.chat-emote .aiuto { font-size: 12px; line-height: 1.4; color: var(--tenue); text-wrap: pretty; }
.chat-emote .tasti { display: flex; gap: 6px; flex: none; }
.chat-emote button { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px 0 6px; border: 1px solid var(--bordo2); border-radius: 12px;
                     background: #fff; font: 700 13px var(--sans); color: var(--inchiostro); cursor: pointer; }
.chat-emote button:hover:not(:disabled) { border-color: var(--verde); }
.chat-emote.spenta { opacity: .7; }
.chat-emote button:disabled, .chat-emote-mini button:disabled { opacity: .4; cursor: not-allowed; }
.chat-emote.spenta button:disabled { opacity: 1; }
/* le chat piccole: tre tasti quadrati accanto al campo, solo il simbolo */
.chat-emote-mini { display: flex; gap: 6px; flex: none; }
.chat-emote-mini button { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; background: none; cursor: pointer; }
.chat-emote-mini button .emo { width: 30px; height: 30px; border-width: 1.5px; box-shadow: 0 1.5px 0 #23302a; font-size: 15px; }
.chat-emote-mini.spenta { opacity: .7; }
/* un'emote in chat: riquadro, nome, e che cosa e' successo nel gioco */
.bolla.emote { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; }
.bolla.emote .emo { width: 38px; height: 38px; border-radius: 9px; font-size: 22px; }
.bolla.emote .cosa { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bolla.emote .cosa b { font-size: 13px; font-weight: 700; }
.bolla.emote .nota { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.35; color: var(--tenue); }
.bolla.emote .nota i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.chat-msg.mio .bolla.emote { flex-direction: row-reverse; padding: 6px 6px 6px 12px; background: var(--verde-chiaro); border-color: var(--verde-bordo); color: var(--inchiostro); }
.chat-msg.mio .bolla.emote .cosa { align-items: flex-end; text-align: right; }
.chat-msg.mio .bolla.emote .cosa b { color: var(--verde2); }
.chat-msg.mio .bolla.emote .nota { color: #3b6b55; }
.chat.stretta .bolla.emote .emo { width: 32px; height: 32px; font-size: 18px; }
.chat-avviso.male { color: var(--rosso); font-weight: 600; }

/* la chat stretta (colonna del pannello, Mappa live, chat piccola sulla mappa) */
.chat.stretta .chat-lista { padding: 10px 14px; }
.chat.stretta .chat-msg .spazio, .chat.stretta .chat-msg .avatar { display: none; }
.chat.stretta .chat-msg .corpo, .chat.stretta .chat-msg.mio .bolla { max-width: 86%; }
.chat.stretta .chat-ev { padding-left: 0; justify-content: center; font-size: 11.5px; }
.chat.stretta .chat-ev span.testo { background: var(--fondo2); border-radius: 999px; padding: 3px 10px; }
.chat.stretta .chat-ev i, .chat.stretta .chat-ev time { display: none; }
.chat.stretta .bolla { font-size: 13.5px; }
.chat.stretta .chat-scrive { padding-left: 14px; }
.chat.stretta .chat-riga input[type=text], .chat.stretta .chat-riga .pos { height: 42px; }
.chat.stretta .chat-riga .manda { height: 42px; padding: 0 16px; background: var(--verde2); box-shadow: none; font: 700 13px var(--sans); }
.chat.stretta .chat-riga .pos { padding: 0 11px; }
/* con i tre tasti delle emote accanto al campo, «Posizione» resta solo ◎ (il nome e' nel title) */
.chat.stretta .chat-riga .pos .parola { display: none; }
.chat.stretta .chat-riga .pos { min-width: 42px; padding: 0; }
.chat.stretta .chat-riga { gap: 6px; }

/* la chat a righe (dentro la mappa): "nome testo" e basta */
.chat.righe .chat-lista { padding: 8px 14px; gap: 5px; min-height: 0; }
.chat.righe .rigo { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.chat.righe .rigo.ev { font-size: 11.5px; color: var(--tenue); }
.chat.righe .rigo.menzione { background: #fff6ee; border-radius: 6px; padding: 1px 5px; margin: 0 -5px; }
.chat.righe .chat-piede { border-top: 0; padding: 8px 10px 10px; }
.chat.righe .chat-riga input[type=text] { height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px; background: rgba(255,255,255,.9); }
.chat.righe .chat-riga .manda { height: 36px; padding: 0 12px; border-radius: 10px; font-size: 12.5px; box-shadow: none; }

/* ---------------------------------------------------------------- squadre */
/* (2026-10-16, secondo giro) Gli sprite sempre a pixel netti e a misura
 * intera: icone 32, frontali 64 o 128, strumenti 24. */
img.pixel { image-rendering: pixelated; }
/* le etichette dei tipi: il colore del gioco, il bordo sotto piu' scuro */
.tipo { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 5px; background: var(--tc, #a8a878);
        border-bottom: 2px solid color-mix(in oklch, var(--tc, #a8a878) 68%, #000); color: #fff; font: 800 11px/1 var(--sans);
        letter-spacing: .06em; text-transform: uppercase; text-shadow: 1px 1px 0 rgba(0,0,0,.4); white-space: nowrap; }
.tipo.piccola { height: 18px; padding: 0 6px; border-radius: 4px; font-size: 10px; }
.etichetta-stato { padding: 1px 7px; border-radius: 6px; background: #f4e3c4; color: #7a4d00; font-size: 11px; font-weight: 700; white-space: nowrap; }
.etichetta-stato.ko { background: var(--fondo2); color: var(--tenue); }
.barra-ps { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--riga); overflow: hidden; }
.barra-ps i { display: block; height: 100%; background: #2fae5b; }
.barra-ps i.meta { background: #e3b11a; }
.barra-ps i.poco { background: #d9463a; }
.barra-ps.grande { width: 220px; max-width: 100%; height: 9px; border-radius: 5px; background: var(--bordo); }
.sesso { font-weight: 800; }
.sesso.m { color: #3a8fd9; }
.sesso.f { color: #d9467a; }

/* l'elenco degli allenatori: ogni riga una scheda (bottone nella pagina della stanza) */
.giocatori li > .gioc { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; text-align: left; color: var(--inchiostro); font-family: var(--sans); }
.giocatori .gioc .testa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.giocatori .conta { font: 600 11px var(--mono); color: var(--tenue2); flex: none; }
.giocatori .gioc .squadra-fila { display: flex; flex-wrap: wrap; gap: 2px; }
.giocatori.si-sceglie li { padding: 0; }
.giocatori.si-sceglie li:hover { background: none; }
.giocatori.si-sceglie .gioc { padding: 10px; border: 1.5px solid transparent; border-radius: 14px; background: #fff; cursor: pointer; }
.giocatori.si-sceglie .gioc:hover { border-color: var(--verde-bordo); }
.giocatori.si-sceglie .gioc[aria-pressed="true"] { background: var(--verde-chiaro); border-color: var(--verde); }
.sq-nota { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--tenue2); }
.sq-nota i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.sq-nota.mia { color: #2a6fb0; }

/* la scheda al centro */
.sq-testa { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sq-testa h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.sq-testa .meta { font-size: 13px; color: var(--tenue); }
.sq-testa .fonte { margin-left: auto; font: 12px var(--mono); color: var(--tenue3); }
.sq-vuota { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 360px; padding: 24px;
            border: 1.5px dashed var(--bordo2); border-radius: 16px; text-align: center; }
.sq-vuota .segno { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--fondo2); font-size: 24px; color: var(--tenue2); }
.sq-vuota b { font-size: 16px; font-weight: 800; }
.sq-vuota span:last-child { max-width: 340px; font-size: 13.5px; line-height: 1.5; color: var(--tenue); }
.sq-griglia { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sq-mon { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 2px solid var(--riga); border-radius: 14px; background: #fff;
          text-align: left; font-family: var(--sans); color: var(--inchiostro); min-width: 0; }
button.sq-mon { cursor: pointer; }
button.sq-mon:hover { border-color: var(--verde-bordo); }
.sq-mon.scelta, button.sq-mon.scelta:hover { border-color: var(--verde); background: #f3faf6; }
.sq-mon .alto { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sq-mon .foto { position: relative; display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 12px; background: var(--pagina); }
.sq-mon .stella { position: absolute; top: 2px; right: 4px; font-size: 13px; color: #d39a12; }
.sq-mon.ko .foto img, .sq-dettaglio .cornice.ko img { filter: grayscale(1); opacity: .55; }
.sq-mon .info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.sq-mon .nome { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.sq-mon .nome b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-mon .nome .sesso { font-size: 14px; }
.sq-mon .lv { font: 600 12px var(--mono); color: var(--tenue); }
.sq-mon .strumento { display: flex; align-items: center; gap: 3px; font-size: 11.5px; line-height: 1.2; color: #5d6b62; min-width: 0; }
.sq-mon .strumento img { flex: none; }
.sq-mon .strumento span { min-width: 0; overflow-wrap: anywhere; }
.sq-mon .mezzo { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-height: 20px; }
.sq-mon .mezzo .etichetta-stato { margin-left: auto; }
.sq-dettaglio { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; margin-top: 18px; padding: 20px; border-radius: 16px; background: var(--pagina); }
.sq-dettaglio .sx { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sq-dettaglio .cornice { position: relative; display: grid; place-items: center; width: 150px; height: 150px; border-radius: 16px; border: 1px solid var(--bordo);
                         background: radial-gradient(ellipse 60px 14px at 50% 86%, #d9e8c8 98%, transparent 100%), #fff; }
.sq-dettaglio .cornice .cromatico { position: absolute; top: 8px; right: 10px; padding: 2px 7px; border-radius: 999px; background: #fff4d6; color: #a87a08; font-size: 11px; font-weight: 800; }
.sq-dettaglio .dex { font: 600 12px var(--mono); color: var(--tenue2); }
.sq-dettaglio .tipi { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.sq-dettaglio .dx { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sq-dettaglio .titolo { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sq-dettaglio .titolo .nome { font-size: 24px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.sq-dettaglio .titolo .sesso { font-size: 20px; }
.sq-dettaglio .titolo .lv { font: 700 15px var(--mono); color: var(--testo2); }
.sq-dettaglio .sotto { font-size: 13px; color: var(--tenue); }
.sq-dettaglio .frase { margin: 0; max-width: 440px; font-size: 14px; line-height: 1.55; color: var(--testo2); }
.sq-dettaglio .ps { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sq-dettaglio .ps .sigla { font-size: 12px; font-weight: 800; color: var(--tenue); }
.sq-dettaglio .ps .num { font: 700 13px var(--mono); }
.sq-dettaglio .ps .etichetta-stato { font-size: 12px; padding: 2px 8px; }
.sq-dettaglio .due { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sq-dettaglio .casella { padding: 10px 12px; border-radius: 12px; background: #fff; min-width: 0; }
.sq-dettaglio small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue2); }
.sq-dettaglio .casella b { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.sq-dettaglio .casella b img { flex: none; }
.sq-dettaglio .mosse small { margin-bottom: 6px; }
.griglia-mosse { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mossa { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 7px 10px 8px; border-radius: 10px; background: #fff;
         border: 1px solid var(--bordo); border-left: 4px solid var(--tc, #a8a878); min-width: 0; }
.mossa .tipo { height: 16px; padding: 0 6px; border-radius: 4px; font-size: 9.5px; }
.mossa .nome { max-width: 100%; font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sq-avviso { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: #e8f1fb; color: #2a5f93; font-size: 13.5px; line-height: 1.5; }
.sq-avviso .i { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #fff; font-weight: 800; }

/* la mia privacy: tre opzioni col cerchietto */
.sq-privacy { display: flex; flex-direction: column; gap: 6px; }
.sq-privacy .opzione { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px 12px; border: 1.5px solid var(--riga); border-radius: 12px;
                       background: #fff; text-align: left; font-family: var(--sans); color: var(--inchiostro); cursor: pointer; }
.sq-privacy .opzione:hover { border-color: var(--verde-bordo); }
.sq-privacy .opzione[aria-checked="true"] { border-color: var(--verde); background: #f3faf6; }
.sq-privacy .cerchio { display: grid; place-items: center; width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 50%; border: 2px solid var(--bordo-scuro); background: #fff; }
.sq-privacy .opzione[aria-checked="true"] .cerchio { border-color: var(--verde); }
.sq-privacy .opzione[aria-checked="true"] .cerchio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); }
.sq-privacy .testo { display: flex; flex-direction: column; gap: 2px; }
.sq-privacy .testo b { font-size: 13.5px; }
.sq-privacy .testo span { font-size: 12px; line-height: 1.45; color: var(--tenue); }
.sq-cosi .etichetta { margin: 0 0 10px; }
.sq-cosi .riga { display: flex; align-items: center; gap: 10px; }
.sq-cosi .chi { min-width: 0; }
.sq-cosi .chi b { display: block; font-size: 14px; font-weight: 700; }
.sq-cosi .chi span { display: block; font-size: 12px; color: var(--tenue); }
.sq-cosi .squadra-fila { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 8px; }
.sq-cosi .frase { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--testo2); }
.sq-piede { padding: 0 6px; color: var(--tenue2); }

/* ------------------------------------------------------------- piede pagina */
.piede { text-align: center; color: var(--tenue2); font-size: 12.5px; padding: 6px 16px 30px; line-height: 1.7; }

/* banner della versione */
#banner-versione { background: var(--cupo); color: #f2f7f3; font-size: 14px; line-height: 1.45; padding: 10px 16px; display: flex; gap: 12px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
#banner-versione .v { background: #f2c14e; color: #1f2a22; font-weight: 700; border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
#banner-versione .t { max-width: 760px; flex: 1 1 320px; }
#banner-versione button { background: none; border: 1px solid rgba(242,247,243,.5); color: inherit; border-radius: 6px; padding: 2px 9px; cursor: pointer; font: inherit; }

/* avviso (browser senza WebUSB, pagina non sicura...) */
.avviso { display: flex; gap: 13px; align-items: flex-start; background: #fdf4dd; border: 1px solid #e8ce8f; border-left: 5px solid var(--ambra); border-radius: 12px; padding: 13px 17px; margin-bottom: 18px; font-size: 14px; }
.avviso .bang { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--ambra); color: #fff; font-weight: 800; font-size: 14px; }

/* ================================================================== MOBILE */
@media (max-width: 1100px) {
  .nome-sito small { display: none; }
}
@media (max-width: 900px) {
  .testata { padding: 12px 16px; gap: 10px 12px; }
  .nav { order: 5; width: 100%; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .pillole { flex: 1; }
  .muro { padding: 16px 16px 24px; }
}
@media (max-width: 640px) {
  .testata { padding: 10px 14px; }
  .marchio { width: 38px; height: 38px; background-size: 20px 20px; }
  .marchio .o1 { width: 16px; height: 16px; } .marchio .o2 { width: 14px; height: 14px; }
  .nome-sito { font-size: 17px; }
  .pillole { order: 4; width: 100%; flex: none; justify-content: flex-start; }
  .pillola { height: 32px; padding: 0 11px; font-size: 12.5px; }
  .nav a { height: 44px; line-height: 44px; }
  .muro { padding: 14px 14px 22px; }
  .scheda { border-radius: 16px; padding: 14px 15px; }
  .eroe { padding: 20px 18px; border-radius: 18px; }
  .eroe h1, .eroe .titolo { font-size: 23px; }
  .eroe .azioni .btn { flex: 1 1 100%; }
  .btn, button.minore, a.minore, label.minore, button.salva { height: 44px; }
  .btn.arancio { height: 52px; }
  .campi { grid-template-columns: 1fr; }
  input[type=text], input[type=number], input[type=search], select { height: 46px; font-size: 16px; }
  input[type=checkbox] { width: 20px; height: 20px; }
  .fisarmoniche summary { padding: 14px 15px; min-height: 48px; }
  .fisarmoniche .corpo { padding: 0 15px 16px; }
  .chat-testa { padding: 12px 14px; flex-wrap: wrap; }
  .chat-testa .nota { display: none; }
  .schede-filtro button { height: 40px; }
  .chat-lista { padding: 12px 14px; }
  .chat-msg .corpo, .chat-msg.mio .bolla { max-width: 88%; }
  .chat-ev { padding-left: 0; }
  .chat-scrive { padding-left: 14px; }
  .chat-msg .rispondi { padding: 0 8px; min-height: 40px; }
  .chat-rapide { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .chat-rapide::-webkit-scrollbar { display: none; }
  .chat-rapide button { height: 40px; flex: none; }
  .chat-riga input[type=text], .chat.stretta .chat-riga input[type=text], .chat.righe .chat-riga input[type=text] { font-size: 16px; height: 46px; }
  .chat-riga .pos, .chat-riga .manda, .chat.stretta .chat-riga .pos, .chat.stretta .chat-riga .manda, .chat.righe .chat-riga .manda { height: 46px; }
  .chat-riga .pos .parola { display: none; }
  /* le emote: bersagli da 44 px; nella barra i tre bottoni vanno a capo,
     nelle chat piccole su una riga loro sopra il campo */
  .chat-emote { flex-wrap: wrap; }
  .chat-emote .tasti { width: 100%; }
  .chat-emote .tasti { gap: 4px; }
  .chat-emote .tasti button { flex: 1 1 0; min-width: 0; justify-content: center; gap: 5px; padding: 0 4px; font-size: 12px; overflow: hidden; }
  .chat-emote .tasti .emo { width: 26px; height: 26px; font-size: 15px; }
  .chat-riga { flex-wrap: wrap; }
  .chat-riga .chat-emote-mini { order: -1; width: 100%; }
  .chat-emote-mini button, .chat-emote-mini button .emo { width: 44px; height: 44px; font-size: 20px; }
  /* le squadre: due schede per riga, il dettaglio in colonna */
  .sq-griglia { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sq-mon .alto { flex-direction: column; align-items: flex-start; }
  .sq-mon .info { width: 100%; }
  .sq-dettaglio { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .sq-testa .fonte { margin-left: 0; width: 100%; }
  .griglia-mosse { grid-template-columns: minmax(0, 1fr); }
  .pos-scheda { min-width: 0; }
  .interruttore { width: 52px; height: 32px; }
  .interruttore::after { top: 4px; left: 4px; width: 24px; height: 24px; }
  .interruttore[aria-pressed="true"]::after { left: 24px; }
  .interruttore.piccolo-int { width: 48px; height: 30px; }
  .interruttore.piccolo-int::after { top: 3px; left: 3px; width: 24px; height: 24px; }
  .interruttore.piccolo-int[aria-pressed="true"]::after { left: 21px; }
}