/* css/global.css */

/* === CORE VARIABLES (LIGHT THEME) === */
:root {
    --bg-color: #f0f4f8;
    --text-color: #1e293b;
    --card-bg: rgba(255, 255, 255, 0.85);
    --card-border: rgba(0, 0, 0, 0.1);
    --accent-color: #3b82f6;
    --accent-hover: #2563eb;
    --secondary: #64748b;
    --danger: #ef4444;
    --danger-hover: #dc2626;
    --success: #10b981;
    --warning: #f59e0b;
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --glow: 0 0 15px rgba(59, 130, 246, 0.5);

    /* 🎯 Dice al browser che la pagina supporta ENTRAMBI gli schemi e di
       scegliere in base al sistema: senza questa proprietà, i controlli
       nativi del browser (tendine <select> aperte, scrollbar, ecc. — NON
       coperti dalle variabili --bg-color/--text-color qui sopra, che
       stilizzano solo il nostro markup) restano ancorati al tema del
       sistema operativo A PRESCINDERE dal tema scelto qui sulla pagina.
       È esattamente la causa del bug segnalato "la tendina resta scura
       col tema chiaro attivo": con sistema in dark mode e tema chiaro
       scelto a mano, la tendina nativa ignorava la nostra scelta perché
       nessuno gliel'aveva mai detto esplicitamente. Sovrascritta sotto
       dagli attributi [data-theme] quando l'utente sceglie a mano. */
    color-scheme: light dark;

    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* === DYNAMIC DARK THEME (segue le impostazioni di sistema) === */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #0f172a;
        --text-color: #f8fafc;
        --card-bg: rgba(30, 41, 59, 0.85);
        --card-border: rgba(255, 255, 255, 0.1);
        --accent-color: #60a5fa;
        --accent-hover: #3b82f6;
        --secondary: #94a3b8;
        --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        --glow: 0 0 20px rgba(96, 165, 250, 0.6);
    }
}

/* === SCELTA MANUALE DEL TEMA (pulsante sole/luna, vedi js/theme-toggle.js) ===
   L'attributo data-theme su <html> ha selettore [attributo] su :root, quindi
   specificità più alta sia della base :root sopra sia della media query
   qui sopra: vince sempre lui, sia per forzare lo scuro con sistema chiaro
   sia per forzare il chiaro con sistema scuro. Nessun !important necessario. */
:root[data-theme="dark"] {
    --bg-color: #0f172a;
    --text-color: #f8fafc;
    --card-bg: rgba(30, 41, 59, 0.85);
    --card-border: rgba(255, 255, 255, 0.1);
    --accent-color: #60a5fa;
    --accent-hover: #3b82f6;
    --secondary: #94a3b8;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    --glow: 0 0 20px rgba(96, 165, 250, 0.6);
    /* Forza anche i controlli nativi (tendine, scrollbar...) sullo scuro,
       qualunque sia la preferenza del sistema operativo — vedi nota su
       color-scheme più sopra in :root. */
    color-scheme: dark;
}

:root[data-theme="light"] {
    --bg-color: #f0f4f8;
    --text-color: #1e293b;
    --card-bg: rgba(255, 255, 255, 0.85);
    --card-border: rgba(0, 0, 0, 0.1);
    --accent-color: #3b82f6;
    --accent-hover: #2563eb;
    --secondary: #64748b;
    --shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    --glow: 0 0 15px rgba(59, 130, 246, 0.5);
    /* Forza anche i controlli nativi (tendine, scrollbar...) sul chiaro,
       qualunque sia la preferenza del sistema operativo — questa è la riga
       che risolve la tendina che restava scura col tema chiaro attivo. */
    color-scheme: light;
}

/* === GLOBAL RESET === */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg-color);
    color: var(--text-color);
    transition: background 0.4s ease, color 0.4s ease;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.hidden { display: none !important; }

/* === GLASSMORPHISM === */
.glass {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    border-radius: 1.5rem;
    box-shadow: var(--shadow);
    padding: 2rem;
}

/* === TYPOGRAPHY & BUTTONS === */
h1, h2, h3 { font-weight: 800; margin-bottom: 1rem; text-align: center; }
/* Rete di sicurezza responsive: senza questa regola, una parola lunga (o
   emoji ravvicinate) a font-size grande può "uscire" dal bordo arrotondato
   della card .glass invece di andare a capo — succede più spesso di quanto
   sembri su schermi ad alta densità (es. 4K con scaling), dove l'arrotonda-
   mento dei sub-pixel del browser lascia meno margine del previsto attorno
   al testo. Vale per tutti i titoli del sito, non solo per uno specifico. */
h1, h2, h3, p { overflow-wrap: break-word; word-break: break-word; }
h1 { font-size: clamp(2rem, 5vw, 4rem); text-transform: uppercase; letter-spacing: 2px; }

button {
    border: none; border-radius: 0.75rem; padding: 1rem 1.5rem;
    font-size: 1.1rem; font-weight: bold; cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    color: white;
    /* Rete di sicurezza responsive (come overflow-wrap per h1/h2/h3/p sopra):
       senza nowrap, un'etichetta lunga su schermo stretto va a capo a metà
       parola dentro il bottone, con un risultato brutto e asimmetrico
       (altezza diversa da bottone a bottone). Per i bottoni con etichette
       davvero lunghe la soluzione non è lasciarli andare a capo, ma ridurre
       il font-size con clamp() (fatto puntualmente sui singoli bottoni a
       rischio, style inline per stile inline, stessa tecnica già usata per
       i titoli h1). */
    white-space: nowrap;
}
button:active { transform: scale(0.95); }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--accent-color); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); box-shadow: var(--glow); }
.btn-danger { background: var(--danger); }
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn-success { background: var(--success); }
.btn-warning { background: var(--warning); color: #111; }
/* Usato per la sezione "Impara a Giocare" / Dizionario: distinto dagli altri
   pulsanti di navigazione principali (blu/ambra/viola) già in uso altrove. */
.btn-teal { background: #14b8a6; }
.btn-teal:hover:not(:disabled) { background: #0d9488; }
/* Stesso viola già usato altrove nel sito (es. "Entra in una Stanza Pubblica"
   in index.html), qui promosso a classe riutilizzabile invece di un altro
   style inline: usato per "Punteggi Lettere" nel Tutorial, sia per non
   ripetere blu/verde acqua già presenti in quella pagina, sia perché
   contrasta bene con i toni caldi (oro/rosso) dell'emoji 🏅 del pulsante. */
.btn-purple { background: #8b5cf6; }
.btn-purple:hover:not(:disabled) { background: #7c3aed; }
/* Usato per "Gamepad" nel Tutorial: nessun altro pulsante del sito usa
   questo rosa/fucsia, quindi non si confonde né con l'ambra/oro né con gli
   altri colori già assegnati (blu, verde acqua, viola). */
.btn-rose { background: #f43f5e; }
.btn-rose:hover:not(:disabled) { background: #e11d48; }
/* Usato per "Tastiera" nel Tutorial, subito sopra "Gamepad": indaco, distinto
   sia dal blu di Manuale sia dal viola di Punteggi Lettere pur restando nella
   stessa famiglia fredda (coerente con l'essere "un altro accessorio per
   giocare senza mouse", come il Gamepad appena sotto). */
.btn-indigo { background: #6366f1; }
.btn-indigo:hover:not(:disabled) { background: #4f46e5; }

input, select {
    background: var(--bg-color); color: var(--text-color);
    border: 1px solid var(--card-border); border-radius: 0.5rem;
    padding: 0.75rem; font-size: 1rem; width: 100%;
}
input:focus { outline: 2px solid var(--accent-color); }

/* Utilities */
.flex-center { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mt-4 { margin-top: 1rem; } .mb-4 { margin-bottom: 1rem; } .mt-8 { margin-top: 2rem; } .mb-8 { margin-bottom: 2rem; }
.w-full { width: 100%; }
.text-center { text-align: center; }
.text-2xl { font-size: 1.5rem; } .text-4xl { font-size: 2.5rem; }
.text-accent { color: var(--accent-color); }

.letter-tile {
    /* ... i tuoi stili precedenti ... */
    perspective: 1000px;
    transition: transform 0.6s;
}

/* Classe per nascondere i punti durante il gioco */
.letter-score.hidden {
    display: none;
}

/* Animazione di "rivelazione" */
.letter-tile.reveal {
    animation: flip-reveal 0.8s ease-out forwards;
}

@keyframes flip-reveal {
    0% { transform: rotateY(0); }
    50% { transform: rotateY(90deg); filter: brightness(1.5); }
    100% { transform: rotateY(0); background: var(--warning); }
}

/* =================================================================
   PULSANTE "SCHERMO INTERO" (Host / Monitor)
   NON è in overlay/fixed sulla viewport: sta nel normale flusso della
   pagina, allineato a destra e staccato di 50px dal pannello
   principale sopra di lui. Così scorre insieme al contenuto e resta
   sempre ancorato in fondo alla pagina (non "sale" mentre si scrolla).
   L'icona e il colore cambiano in base allo stato, così si capisce a
   colpo d'occhio se si è già a schermo intero.
   ================================================================= */
.fullscreen-toggle-wrapper {
    width: 95%;
    max-width: 1500px;
    margin: 50px auto 0 auto;
    display: flex;
    justify-content: flex-end;
}

.fullscreen-toggle-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--card-border);
    box-shadow: var(--shadow);
    color: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.fullscreen-toggle-btn:hover { transform: scale(1.08); border-color: var(--accent-color); }
.fullscreen-toggle-btn:active { transform: scale(0.92); }

.fullscreen-toggle-btn svg {
    width: 26px;
    height: 26px;
    transition: transform 0.35s ease;
}

.fullscreen-toggle-btn .icon-exit { display: none; }
.fullscreen-toggle-btn.is-fullscreen .icon-enter { display: none; }
.fullscreen-toggle-btn.is-fullscreen .icon-exit { display: inline-block; }

/* A schermo intero il pulsante diventa verde in modo fisso, senza animazioni */
.fullscreen-toggle-btn.is-fullscreen {
    color: var(--success);
    border-color: var(--success);
}

@media (max-width: 600px) {
    .fullscreen-toggle-wrapper { margin-top: 30px; }
    .fullscreen-toggle-btn { width: 48px; height: 48px; }
    .fullscreen-toggle-btn svg { width: 22px; height: 22px; }
}

/* =================================================================
   PULSANTE TEMA CHIARO/SCURO (sole/luna), vedi js/theme-toggle.js.
   A differenza del pulsante "schermo intero" sopra (che sta nel normale
   flusso della pagina), questo è SEMPRE ancorato in alto a destra rispetto
   alla viewport (position: fixed), perché deve restare raggiungibile anche
   scorrendo pagine lunghe come Manuale o Dizionario. Creato via JS solo
   nelle pagine (o negli stati di pagina) dove serve, mai da un tema.

   🎯 "right: 136px" (invece di 16px come l'angolo vero e proprio): tre
   pulsanti condividono questa fila, ciascuno un passo (60px = 48px
   larghezza + 12px distanza) più verso l'interno del precedente. Da
   sinistra a destra sullo schermo: tema (qui, right:136px) → lingua
   (.lang-switcher-wrapper, right:76px) → accessibilità colore
   (.a11y-switcher-wrapper, right:16px, l'angolo vero e proprio).
   ================================================================= */
.theme-toggle-btn {
    position: fixed;
    top: 16px;
    right: 196px;
    z-index: 10000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--card-border);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.theme-toggle-btn:hover { transform: scale(1.08); border-color: var(--accent-color); }
.theme-toggle-btn:active { transform: scale(0.92); }

@media (max-width: 600px) {
    .theme-toggle-btn { width: 42px; height: 42px; top: 12px; right: 168px; font-size: 1.2rem; }
}

/* =================================================================
   PULSANTE CONTROLLER (GP-7, js/gamepad-manager.js), stesso "scheletro"
   di .theme-toggle-btn qui sopra — creato SOLO se config.json ->
   gamepadSupport.enabled è true. Posizione "legacy" (sistema account
   spento): un passo (60px/52px, stesso schema della fila) più esterno
   del pulsante tema — "primo della fila, prima del tema chiaro/scuro"
   come richiesto. Quando il pannello impostazioni è attivo, le regole
   più sotto (html.settings-panel-active) sovrascrivono questa posizione
   esattamente come già fanno per tema/lingua/accessibilità.

   Colore (vedi updateGamepadButtonState in gamepad-manager.js): nessuna
   classe = mai collegato in questa sessione, stile neutro identico agli
   altri; --connected = verde (collegato ora); --disconnected = rosso
   (era collegato, si è scollegato, es. batteria scarica a metà partita). */
.gamepad-toggle-btn {
    position: fixed;
    top: 16px;
    right: 256px;
    z-index: 10000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--card-border);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.gamepad-toggle-btn:hover { transform: scale(1.08); border-color: var(--accent-color); }
.gamepad-toggle-btn:active { transform: scale(0.92); }

.gamepad-toggle-btn--connected { border-color: var(--success); }
.gamepad-toggle-btn--disconnected { border-color: var(--danger); }

@media (max-width: 600px) {
    .gamepad-toggle-btn { width: 42px; height: 42px; top: 12px; right: 220px; font-size: 1.2rem; }
}

/* =================================================================
   PULSANTE PRESTAZIONI (CF-2, js/performance-mode.js), stesso
   "scheletro" dei pulsanti gemelli qui sopra/sotto — wrapper fisso +
   pulsante principale + tendina a comparsa + clone volante FLIP, come
   js/accessibility-switcher.js. Creato SOLO se config.json ->
   performanceMode.enabled è true. Posizione "legacy" (sistema account
   spento): un passo (60px/52px) più esterno del pulsante controller —
   PRIMO/più esterno di tutta la fila, istruzione esplicita di Francesco
   (08/09/2026: "il pulsante per regolare le impostazioni me lo metti
   prima del pulsante del controller"). Quando il pannello impostazioni
   è attivo, le regole più sotto (html.settings-panel-active)
   sovrascrivono questa posizione esattamente come già fanno per gli
   altri quattro pulsanti. */
.performance-switcher-wrapper {
    position: fixed;
    top: 16px;
    right: 316px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.performance-toggle-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--card-border);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.performance-toggle-btn:hover { transform: scale(1.08); border-color: var(--accent-color); }
.performance-toggle-btn:active { transform: scale(0.92); }

.performance-emoji { pointer-events: none; display: block; line-height: 1; }

.performance-dropdown {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.performance-dropdown-item {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--card-border);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(-10px) scale(0.75);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.performance-dropdown-open .performance-dropdown-item {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.performance-dropdown-item:hover { transform: scale(1.1); border-color: var(--accent-color); }
.performance-dropdown-item:active { transform: scale(0.9); }

.performance-fly-clone {
    position: fixed;
    z-index: 10001;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--accent-color);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

@media (max-width: 600px) {
    .performance-switcher-wrapper { top: 12px; right: 272px; gap: 10px; }
    .performance-toggle-btn { width: 42px; height: 42px; font-size: 1.2rem; }
    .performance-dropdown-item { width: 38px; height: 38px; font-size: 1.05rem; }
}

/* =================================================================
   PULSANTE LINGUA (bandiera), vedi js/lang-switcher.js. Gemello del
   pulsante tema qui sopra per stile/animazione al click — un solo
   contenitore fixed (.lang-switcher-wrapper) tiene insieme pulsante
   principale e tendina, così window.linkVisibilityToScreens nasconde e
   mostra entrambi in un colpo solo passandogli il wrapper.

   🎯 "right: 76px": pulsante di mezzo dei tre, vedi nota sopra su
   .theme-toggle-btn per lo schema completo della fila.
   ================================================================= */
.lang-switcher-wrapper {
    position: fixed;
    top: 16px;
    right: 136px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.lang-toggle-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--card-border);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.lang-toggle-btn:hover { transform: scale(1.08); border-color: var(--accent-color); }
.lang-toggle-btn:active { transform: scale(0.92); }

/* Bandiera vera e propria (img/flags/<lang>.svg, vedi js/lang-switcher.js):
   stessa dimensione dentro qualunque pulsante la contenga (principale,
   voce di tendina, o clone volante), ritagliata a cerchio per restare
   coerente con la forma tonda dei pulsanti stessi. */
.lang-flag-img {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}

/* Tendina con le altre lingue: colonna sotto al pulsante principale.
   Ogni voce parte invisibile e leggermente più in alto/piccola
   (opacity 0, translateY negativo, scale ridotta) e "cade" al proprio
   posto con un ritardo crescente (vedi item.style.transitionDelay in
   lang-switcher.js): l'effetto è una cascata dall'alto verso il basso
   invece di un blocco che compare tutto insieme. */
.lang-dropdown {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.lang-dropdown-item {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--card-border);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(-10px) scale(0.75);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.lang-dropdown-open .lang-dropdown-item {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.lang-dropdown-item:hover { transform: scale(1.1); border-color: var(--accent-color); }
.lang-dropdown-item:active { transform: scale(0.9); }

/* Clone "volante": la bandiera scelta nella tendina, animata (solo
   transform, tecnica FLIP) fino a sovrapporsi esattamente al pulsante
   principale — vedi selectLanguage() in lang-switcher.js. */
.lang-fly-clone {
    position: fixed;
    z-index: 10001;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--accent-color);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

@media (max-width: 600px) {
    .lang-switcher-wrapper { top: 12px; right: 116px; gap: 10px; }
    .lang-toggle-btn { width: 42px; height: 42px; font-size: 1.2rem; }
    .lang-dropdown-item { width: 38px; height: 38px; font-size: 1.05rem; }
}

/* =================================================================
   PULSANTE ACCESSIBILITÀ COLORE (daltonismo/contrasto/saturazione),
   vedi js/accessibility-switcher.js. Terzo gemello della stessa
   famiglia di tema e lingua — identica struttura CSS (wrapper fixed +
   pulsante principale + tendina a comparsa + clone volante), qui con
   un pallino-anteprima arcobaleno (.a11y-swatch) al posto di
   un'immagine bandiera/icona sole-luna, perché non esiste un
   pittogramma universale per "protanopia" o "alto contrasto": il
   pallino mostra IN ANTEPRIMA l'effetto reale del filtro CSS di ogni
   modalità (vedi MODE_FILTERS in accessibility-switcher.js).

   🎯 "right: 16px": l'angolo vero e proprio, il pulsante più a destra
   dei tre — vedi nota su .theme-toggle-btn per lo schema completo.
   ================================================================= */
.a11y-switcher-wrapper {
    position: fixed;
    top: 16px;
    right: 76px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.a11y-toggle-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--card-border);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.a11y-toggle-btn:hover { transform: scale(1.08); border-color: var(--accent-color); }
.a11y-toggle-btn:active { transform: scale(0.92); }

/* Pallino-anteprima: piccolo cerchio arcobaleno (colori di riferimento
   rosso/arancio/giallo/verde/blu/viola) a cui viene applicato lo stesso
   filter CSS della modalità che rappresenta (impostato via JS,
   setSwatch() in accessibility-switcher.js) — così si "vede" l'effetto
   prima ancora di scegliere, come una bandiera mostra il paese. */
.a11y-swatch {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    display: block;
    pointer-events: none;
    background: conic-gradient(from 0deg, #ff3b3b, #ff9d3b, #ffe23b, #3bff5e, #3b6bff, #a13bff, #ff3b3b);
}

.a11y-dropdown {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.a11y-dropdown-item {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--card-border);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    opacity: 0;
    transform: translateY(-10px) scale(0.75);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.a11y-dropdown-open .a11y-dropdown-item {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.a11y-dropdown-item:hover { transform: scale(1.1); border-color: var(--accent-color); }
.a11y-dropdown-item:active { transform: scale(0.9); }

/* Clone "volante": stessa tecnica FLIP di .lang-fly-clone, vedi
   selectMode() in accessibility-switcher.js. */
.a11y-fly-clone {
    position: fixed;
    z-index: 10001;
    border-radius: 50%;
    background: var(--card-bg);
    border: 2px solid var(--accent-color);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

@media (max-width: 600px) {
    .a11y-switcher-wrapper { top: 12px; right: 64px; gap: 10px; }
    .a11y-toggle-btn { width: 42px; height: 42px; }
    .a11y-dropdown-item { width: 38px; height: 38px; }
}

/* =================================================================
   MODALITÀ COLORE (js/accessibility-switcher.js): filter CSS applicato
   a <body> — e quindi a TUTTA l'interfaccia, non solo al tabellone —
   quando l'utente ha scelto una modalità diversa da quella di default.
   Applicato a <body> e non <html> apposta: vedi il commento in testa a
   accessibility-switcher.js sul perché (altrimenti i pulsanti fixed di
   questa stessa fila finirebbero ancorati all'angolo sbagliato). I
   valori qui DEVONO restare identici a MODE_FILTERS in quel file (unica
   fonte di verità duplicata consapevolmente: qui serve per il body
   reale, là per l'anteprima nei pallini della tendina).

   Non è una correzione clinica del daltonismo (impossibile con un
   filtro CSS globale, servirebbe un'elaborazione per-pixel): sono
   filtri pragmatici che aumentano la separazione percepita tra colori
   facilmente confusi, e una modalità a contrasto/saturazione più alta
   per chi ha semplicemente difficoltà a distinguere tonalità simili.
   ================================================================= */
body[data-a11y-color="protanopia"] { filter: saturate(1.4) hue-rotate(-15deg); }
body[data-a11y-color="deuteranopia"] { filter: saturate(1.4) hue-rotate(15deg); }
body[data-a11y-color="tritanopia"] { filter: saturate(1.3) hue-rotate(55deg); }
body[data-a11y-color="highContrast"] { filter: contrast(1.35) saturate(1.15); }
body[data-a11y-color="highSaturation"] { filter: saturate(2); }

/* =================================================================
   ACC-2 (piano-sistema-account.md §4): pulsanti "Impostazioni" (⚙️) e
   "Account", attivi SOLO quando config.json -> accounts.enabled è
   true (js/settings-panel.js sceglie a runtime quale layout creare —
   con accounts spento, la fila di tre pulsanti resta esattamente come
   prima, questa sezione di CSS semplicemente non entra in gioco).

   GEOMETRIA: l'ingranaggio prende il posto che oggi è di
   .lang-switcher-wrapper (right:76px), il pulsante Account prende il
   posto di .a11y-switcher-wrapper (right:16px, l'angolo). I tre
   pulsanti veri (tema/lingua/accessibilità) restano ESATTAMENTE dove
   sono oggi nel loro stato "aperto" — ecco perché qui non li
   riposizioniamo mai in positivo, li teniamo semplicemente ANCORATI
   dietro l'ingranaggio (right:76px, invisibili, non cliccabili)
   finché il pannello non si apre, e la classe su <html> decisa da
   settings-panel.js in quel momento (orizzontale o verticale, vedi
   sotto) è quella che li fa scorrere alla loro posizione vera.
   ================================================================= */
.settings-gear-btn, .account-btn {
    position: fixed;
    top: 16px;
    z-index: 10002; /* sopra ai tre pulsanti reali (10000/10001) */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--card-border);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.25s ease, border-color 0.25s ease;
}
.settings-gear-btn:hover, .account-btn:hover { transform: scale(1.08); border-color: var(--accent-color); }
.settings-gear-btn:active, .account-btn:active { transform: scale(0.92); }

.settings-gear-btn { right: 76px; }
.account-btn { right: 16px; border-color: var(--accent-color); }
/* Ospite (con o senza account obbligatorio): il pulsante Account resta
   visivamente "spento" per far capire "stai giocando come ospite", ma
   RESTA cliccabile — un clic avvia il login volontario (corretto
   02/09/2026 dopo il primo test dal vivo: vedi il commento in
   js/settings-panel.js sul perché "fisso e non cliccabile" del piano
   originale non aveva senso in pratica). */
.account-btn--guest { opacity: 0.55; border-color: var(--card-border); }

@media (max-width: 600px) {
    .settings-gear-btn, .account-btn { width: 42px; height: 42px; top: 12px; font-size: 1.2rem; }
    .settings-gear-btn { right: 64px; }
    .account-btn { right: 12px; }
}

/* Overlay: stesso identico principio del backdrop dei popup di
   avviso (.app-alert-backdrop in alert-manager.js) — sfondo scuro
   semi-trasparente con backdrop-filter:blur, così il contenuto sotto
   si vede sfocato senza dover applicare noi stessi un filter al
   contenitore di gioco. z-index sotto ai pulsanti (10002) ma sopra a
   tutto il resto, cattura ogni click per richiudere il pannello. */
.settings-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
html.settings-panel-open .settings-panel-overlay { opacity: 1; pointer-events: auto; }

/* Stato CHIUSO (default): i tre pulsanti veri restano ancorati dietro
   l'ingranaggio, invisibili e non cliccabili — vedi nota di testa
   della sezione sul perché non tocchiamo mai le loro posizioni "aperte".

   🎯 IMPORTANTE: tutte le regole di questa sezione (chiuso, aperto
   orizzontale, aperto verticale) sono scoped sotto "html.settings-
   panel-active" — la classe che js/settings-panel.js aggiunge
   SOLO quando accounts.enabled è davvero true e ha creato l'ingranaggio
   per davvero. Senza questo scoping, "html:not(.settings-panel-open)"
   varrebbe SEMPRE (anche a sistema account spento, quando l'ingranaggio
   non esiste nemmeno) e nasconderebbe i tre pulsanti legacy su ogni
   pagina — esattamente il bug che romperebbe il sito quando
   accounts.enabled è false. */
html.settings-panel-active:not(.settings-panel-open) .performance-switcher-wrapper,
html.settings-panel-active:not(.settings-panel-open) .gamepad-toggle-btn,
html.settings-panel-active:not(.settings-panel-open) .theme-toggle-btn,
html.settings-panel-active:not(.settings-panel-open) .lang-switcher-wrapper,
html.settings-panel-active:not(.settings-panel-open) .a11y-switcher-wrapper,
html.settings-panel-active:not(.settings-panel-open) .voice-control-toggle-btn {
    right: 76px !important;
    top: 16px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
@media (max-width: 600px) {
    html.settings-panel-active:not(.settings-panel-open) .performance-switcher-wrapper,
    html.settings-panel-active:not(.settings-panel-open) .gamepad-toggle-btn,
    html.settings-panel-active:not(.settings-panel-open) .theme-toggle-btn,
    html.settings-panel-active:not(.settings-panel-open) .lang-switcher-wrapper,
    html.settings-panel-active:not(.settings-panel-open) .a11y-switcher-wrapper,
    html.settings-panel-active:not(.settings-panel-open) .voice-control-toggle-btn {
        right: 64px !important;
        top: 12px !important;
    }
}

/* Stato APERTO, orizzontale (caso normale): stessa spaziatura di
   60px/52px già in uso oggi tra i pulsanti, semplicemente spostata di
   altrettanti "scatti" verso sinistra (gli scatti presi da Account e
   ingranaggio). Ordine sinistra→destra invariato: prestazioni,
   controller, tema, lingua, accessibilità. */
html.settings-panel-open.settings-panel-horizontal .performance-switcher-wrapper { right: 436px !important; opacity: 1 !important; pointer-events: auto !important; }
html.settings-panel-open.settings-panel-horizontal .gamepad-toggle-btn { right: 376px !important; opacity: 1 !important; pointer-events: auto !important; }
html.settings-panel-open.settings-panel-horizontal .theme-toggle-btn { right: 316px !important; opacity: 1 !important; pointer-events: auto !important; }
html.settings-panel-open.settings-panel-horizontal .lang-switcher-wrapper { right: 256px !important; opacity: 1 !important; pointer-events: auto !important; }
html.settings-panel-open.settings-panel-horizontal .a11y-switcher-wrapper { right: 196px !important; opacity: 1 !important; pointer-events: auto !important; }
html.settings-panel-open.settings-panel-horizontal .voice-control-toggle-btn { right: 136px !important; opacity: 1 !important; pointer-events: auto !important; }
@media (max-width: 600px) {
    html.settings-panel-open.settings-panel-horizontal .performance-switcher-wrapper { right: 376px !important; }
    html.settings-panel-open.settings-panel-horizontal .gamepad-toggle-btn { right: 324px !important; }
    html.settings-panel-open.settings-panel-horizontal .theme-toggle-btn { right: 272px !important; }
    html.settings-panel-open.settings-panel-horizontal .lang-switcher-wrapper { right: 220px !important; }
    html.settings-panel-open.settings-panel-horizontal .a11y-switcher-wrapper { right: 168px !important; }
    html.settings-panel-open.settings-panel-horizontal .voice-control-toggle-btn { right: 116px !important; }
}

/* Stato APERTO, verticale (eccezione geometrica §4.2: si aprirebbe
   sopra al pulsante Indietro): stessa distanza di prima, applicata in
   verticale verso il basso, partendo dall'ingranaggio — right resta
   fisso a 76px (allineati sotto l'ingranaggio), cambia solo top. */
html.settings-panel-open.settings-panel-vertical .performance-switcher-wrapper,
html.settings-panel-open.settings-panel-vertical .gamepad-toggle-btn,
html.settings-panel-open.settings-panel-vertical .theme-toggle-btn,
html.settings-panel-open.settings-panel-vertical .lang-switcher-wrapper,
html.settings-panel-open.settings-panel-vertical .a11y-switcher-wrapper,
html.settings-panel-open.settings-panel-vertical .voice-control-toggle-btn {
    right: 76px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
html.settings-panel-open.settings-panel-vertical .performance-switcher-wrapper { top: 376px !important; }
html.settings-panel-open.settings-panel-vertical .gamepad-toggle-btn { top: 316px !important; }
html.settings-panel-open.settings-panel-vertical .theme-toggle-btn { top: 256px !important; }
html.settings-panel-open.settings-panel-vertical .lang-switcher-wrapper { top: 196px !important; }
html.settings-panel-open.settings-panel-vertical .a11y-switcher-wrapper { top: 136px !important; }
html.settings-panel-open.settings-panel-vertical .voice-control-toggle-btn { top: 76px !important; }
@media (max-width: 600px) {
    html.settings-panel-open.settings-panel-vertical .performance-switcher-wrapper,
    html.settings-panel-open.settings-panel-vertical .gamepad-toggle-btn,
    html.settings-panel-open.settings-panel-vertical .theme-toggle-btn,
    html.settings-panel-open.settings-panel-vertical .lang-switcher-wrapper,
    html.settings-panel-open.settings-panel-vertical .a11y-switcher-wrapper,
    html.settings-panel-open.settings-panel-vertical .voice-control-toggle-btn {
        right: 64px !important;
    }
    html.settings-panel-open.settings-panel-vertical .performance-switcher-wrapper { top: 324px !important; }
    html.settings-panel-open.settings-panel-vertical .gamepad-toggle-btn { top: 272px !important; }
    html.settings-panel-open.settings-panel-vertical .theme-toggle-btn { top: 220px !important; }
    html.settings-panel-open.settings-panel-vertical .lang-switcher-wrapper { top: 168px !important; }
    html.settings-panel-open.settings-panel-vertical .a11y-switcher-wrapper { top: 116px !important; }
    html.settings-panel-open.settings-panel-vertical .voice-control-toggle-btn { top: 64px !important; }
}

/* Tutti i pulsanti reali già hanno una transizione propria su
   "transform" (hover/click): aggiungiamo qui anche right/top/opacity,
   senza toccare i loro file .js — pura estensione CSS. */
.performance-switcher-wrapper, .gamepad-toggle-btn, .theme-toggle-btn, .lang-switcher-wrapper, .a11y-switcher-wrapper, .voice-control-toggle-btn {
    transition: right 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease, transform 0.25s ease, border-color 0.25s ease;
}

/* =================================================================
   PULSANTE ACCESSO VOCALE (CF-6.1, js/voice-control.js) — stesso
   "scheletro" di .gamepad-toggle-btn (nessun wrapper/tendina: è un
   semplice interruttore dormiente on/off, non un menu a più livelli
   come prestazioni/tema/lingua/accessibilità colore). Creato SOLO se
   config.json -> voiceControl.enabled è true. Posizione: ULTIMO/più
   interno di tutta la fila — istruzione esplicita di Francesco
   (08/09/2026): subito dopo il pulsante Accessibilità/Daltonici (🎨) e
   subito prima dell'ingranaggio Impostazioni (⚙️) stesso. Per fargli
   posto, TUTTI E CINQUE i pulsanti precedenti (prestazioni/controller/
   tema/lingua/accessibilità) sono stati spostati di uno scatto (60px
   desktop/52px mobile) più verso l'esterno rispetto a prima — i loro
   valori "right"/"top" in ciascuno dei tre stati (legacy, aperto
   orizzontale, aperto verticale) sono quindi cambiati insieme
   all'introduzione di questo pulsante, non solo aggiunti qui.

   Stato visivo (vedi updateVoiceControlButtonState in
   voice-control.js): nessuna classe = disattivato (stile neutro,
   identico agli altri pulsanti spenti); --active = attivato (bordo
   colorato, stesso trattamento cromatico del bordo "connesso" del
   gamepad) — un interruttore dormiente ha senso solo se si VEDE
   quando è acceso, specialmente per chi lo usa per necessità. */
.voice-control-toggle-btn {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 10000;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 2px solid var(--card-border);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.voice-control-toggle-btn:hover { transform: scale(1.08); border-color: var(--accent-color); }
.voice-control-toggle-btn:active { transform: scale(0.92); }

.voice-control-toggle-btn--active { border-color: var(--success); }

@media (max-width: 600px) {
    .voice-control-toggle-btn { width: 42px; height: 42px; top: 12px; right: 12px; font-size: 1.2rem; }
}

/* =========================================================
   PULSANTE "INDIETRO" ANCORATO (host.html, player.html,
   lobby.html, tutorial.html)
   ---------------------------------------------------------
   Speculare al pulsante tema sopra: fisso in alto a SINISTRA
   rispetto alla viewport, invece che dentro il flusso della
   pagina sopra la card centrale. Così sta comunque "a sinistra
   dell'area centrale" senza aggiungere altezza sopra di essa
   (nessuna sensazione di "soffocamento" verticale), e la card
   può mantenere il proprio margine dall'alto invariato. Usata
   solo dalle pagine (o dagli stati di pagina) dove il pulsante
   Indietro non sta già in una riga assieme al titolo (vedi
   invece .dict-topbar/.scores-topbar/.guide-topbar/.manual-topbar,
   che restano come sono: lì il pulsante è già fuori dalla card
   e in linea col titolo, non serve altro). Su schermi stretti
   le stesse dimensioni del pulsante tema, per restare in
   proporzione ed evitare che i due pulsanti fissi si scontrino.
   ========================================================= */
.back-btn-fixed {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 10000;
}

/* 🎯 Freccia ⬅️ del pulsante Indietro: 'Segoe UI' (prima voce del font-family
   qui sopra in :root) include un proprio glifo MONOCROMO per questo
   carattere (i simboli-freccia sono comuni nei font di sistema Windows),
   che su alcune versioni di Windows/Chrome può "vincere" sul glifo a colori
   dell'emoji nonostante il selettore di variazione U+FE0F nel markup —
   risultato: freccia nera/piatta invece della classica emoji con il
   cerchietto blu. Isoliamo qui SOLO questo carattere su una pila di font
   pensata per le emoji, bypassando 'Segoe UI' per lui soltanto (il resto
   del pulsante resta sul font normale del sito). */
.emoji-glyph {
    font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}

@media (max-width: 600px) {
    .back-btn-fixed { top: 12px; left: 12px; padding: 0.4rem 0.8rem !important; font-size: 0.9rem !important; }
}

/* === COPYRIGHT DI FONDO PAGINA (tutte le pagine) === */
.site-copyright {
    width: 100%;
    text-align: center;
    padding: 1.5rem 1rem 1rem 1rem;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--secondary);
    opacity: 0.75;
}

/* =================================================================
   CF-2 — LIVELLO PRESTAZIONI "LEGGERO" (js/performance-mode.js):
   quarto e ultimo degli effetti confermati da Francesco (08/09/2026),
   "transizioni/animazioni CSS generiche" — riduce drasticamente OGNI
   transizione/animazione CSS del sito (tessere che si girano, popup,
   tendine, hover...) per i dispositivi valutati più lenti. Stessa
   identica tecnica di "prefers-reduced-motion: reduce" (durata quasi
   zero invece di display:none, per non rompere codice che aspetta un
   evento "transitionend"/"animationend" per proseguire — vedi es. le
   tendine lingua/accessibilità/prestazioni qui sopra, tutte con una
   rete di sicurezza a tempo che scatterebbe comunque, ma è più pulito
   non doverci contare). "data-performance-level" lo scrive
   js/performance-mode.js su <html> ad ogni cambio di livello (anche
   manuale). Il livello "bilanciato" NON tocca le transizioni — solo lo
   sfondo dinamico viene disattivato a quel livello (il costo più alto,
   vedi js/dynamic-background.js); "leggero" arriva fin qui.
   ================================================================= */
html[data-performance-level="light"] *,
html[data-performance-level="light"] *::before,
html[data-performance-level="light"] *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
}

/* =================================================================
   EVO-6 (12/09/2026): "prefers-reduced-motion: reduce" ora rispettato
   qui, DIRETTAMENTE e sempre, invece che tramite js/performance-mode.js
   (che fino a questa correzione lo usava come indizio di hardware
   debole, togliendo 2 punti pieni al punteggio — confondendo così una
   preferenza di ACCESSIBILITÀ con la potenza reale del dispositivo: un
   PC potentissimo con questa preferenza attiva veniva comunque
   declassato a "bilanciato"). Stessa identica regola del livello
   "leggero" qui sopra, ma applicata in base alla preferenza di sistema,
   indipendentemente dal livello prestazioni scelto/rilevato.
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    html:not([data-performance-level="light"]) *,
    html:not([data-performance-level="light"]) *::before,
    html:not([data-performance-level="light"]) *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* =================================================================
   EVO-5 (14/09/2026) — Titolo avanzato animato in index.html, dietro
   config.json -> titleGraphics.advancedMode (default attivo). Il
   colore del bagliore ("text-shadow") di "LexiSmash" scorre in loop
   nello spettro RGB; la velocità arriva da js/index.js via la
   variabile CSS --title-rgb-shift-speed (letta da
   titleGraphics.rgbShiftSpeedMs). Non serve alcuna regola dedicata
   per "leggero"/"prefers-reduced-motion": la regola universale (`*`)
   qui sopra la azzera già automaticamente, come ogni altra
   animazione del sito.
   ================================================================= */
@keyframes lexismash-title-rgb-shift {
    0%    { text-shadow: 0 0 14px #ff2d55, 0 0 28px #ff2d55; }
    16.6% { text-shadow: 0 0 14px #ff9500, 0 0 28px #ff9500; }
    33.3% { text-shadow: 0 0 14px #ffe600, 0 0 28px #ffe600; }
    50%   { text-shadow: 0 0 14px #34d058, 0 0 28px #34d058; }
    66.6% { text-shadow: 0 0 14px #22d3ee, 0 0 28px #22d3ee; }
    83.3% { text-shadow: 0 0 14px #6366f1, 0 0 28px #6366f1; }
    100%  { text-shadow: 0 0 14px #ff2d55, 0 0 28px #ff2d55; }
}
.index-title-advanced {
    position: relative;
    display: inline-block;
    animation: lexismash-title-rgb-shift var(--title-rgb-shift-speed, 6000ms) linear infinite;
}

/* Texture "a tessere" opzionale (titleGraphics.letterTileTexture, default
   spento): piccoli quadrati stile tessera Scrabble, ripetuti a bassissima
   opacità dietro al titolo. Puramente decorativa, nessun asset esterno
   (SVG inline autoprodotto, stesso principio degli avatar profilo). */
.index-title-tile-texture::before {
    content: "";
    position: absolute;
    inset: -16px -26px;
    z-index: -1;
    opacity: 0.14;
    pointer-events: none;
    border-radius: 12px;
    background-repeat: repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect x='2' y='2' width='24' height='24' rx='4' fill='none' stroke='%23888888' stroke-width='2'/%3E%3C/svg%3E");
}