/* ============================================================================
   WORD MASTER PRO - STYLESHEET PRINCIPALE
   ============================================================================

   RESPONSIVE DESIGN: Ottimizzato per desktop, tablet e smartphone
   CUSTOMIZABLE: Commenti dettagliati per personalizzare colori, dimensioni e layout

   GUIDA RAPIDA PERSONALIZZAZIONE:
   - COLORI SIDEBAR: Cerca "COLORI SIDEBAR" piu in basso
   - GRANDEZZA SKIP: Cerca "DIMENSIONE ICONA SKIP"
   - ALTEZZA CARD: Cerca "DIMENSIONI CARD"
   - COLORI GLOBALI: Cerca "PALETTE COLORI GLOBALI"
   - DISTANZA CONTROLLI DAL BORDO: Cerca "BOTTOM CONTROLS SPACING"

   ============================================================================ */

/* ============================================================================
   PALETTE COLORI GLOBALI
   ============================================================================ */
:root {
    /* Colori primari custom - Palette moderna e raffinata */
    --bs-primary: #4F46E5;             /* Indigo elegante */
    --bs-success: #10B981;             /* Verde smeraldo */
    --bs-danger: #EF4444;              /* Rosso corallo */
    --bs-warning: #F59E0B;             /* Ambra dorata */
    --bs-info: #06B6D4;                /* Ciano brillante */

    /* Gradienti per bottoni */
    --btn-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --btn-gradient-hover: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    --btn-gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --btn-gradient-danger: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);

    /* Sfondo pagina - Gradiente moderno e sofisticato */
    --page-gradient: linear-gradient(135deg,
        #1a1a2e 0%,
        #16213e 25%,
        #1a1a2e 50%,
        #0f3460 75%,
        #1a1a2e 100%);

    /* Colori custom per Word Master Pro */
    --card-border-color: #667eea;      /* Bordo card fronte (viola-blu) */
    --card-back-border-color: #10B981; /* Bordo card retro (verde smeraldo) */
    --sidebar-bg: rgba(255, 255, 255, 0.7); /* Sfondo sidebar glassmorphism */
    --skip-icon-color: #06B6D4;        /* Colore icona skip (ciano) */

    /* ========================================================================
       BOTTOM CONTROLS SPACING - PERSONALIZZA QUI LA DISTANZA DAL BORDO!
       ======================================================================== */
    --card-bottom-spacing: 12px;     /* Distanza dal bordo inferiore della card */

    /* ========================================================================
       VARIABILI SEMANTICHE TEMA (Light default)
       ======================================================================== */
    --card-bg: linear-gradient(145deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%);
    --card-bg-solid: rgba(255, 255, 255, 0.95);
    --card-text: #1e293b;
    --card-text-muted: #64748b;
    --card-border: rgba(255, 255, 255, 0.6);
    --card-shadow: 0 10px 40px rgba(102, 126, 234, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
    --modal-bg: #ffffff;
    --modal-text: #212529;
    --input-bg: rgba(255, 255, 255, 0.95);
    --input-border: rgba(102, 126, 234, 0.4);
    --input-text: #212529;
    --quiz-btn-bg: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    --quiz-btn-text: #4F46E5;
    --quiz-btn-shadow: 0 2px 4px rgba(79,70,229,0.15), 0 4px 12px rgba(79,70,229,0.12), 0 0 25px rgba(79,70,229,0.08), inset 0 0 0 2px rgba(79,70,229,0.3);
    --section-bg: rgba(248, 250, 252, 0.8);
    --section-border: rgba(226, 232, 240, 0.8);
    --sidebar-bg-glass: linear-gradient(145deg, rgba(255,255,255,0.8) 0%, rgba(248,250,252,0.7) 100%);
    --sidebar-border: rgba(255, 255, 255, 0.6);
    --word-display-color: #1e293b;
    --stat-value-color: #334155;
    --stat-label-color: #64748b;
    --lobby-label-color: #475569;
    --mastery-filter-color: #334155;
    --details-def-bg: #f8fafc;
    --details-def-border: #e2e8f0;
    --progress-stat-bg: rgba(255, 255, 255, 0.5);
}

/* ============================================================================
   DARK MODE OVERRIDES
   ============================================================================ */
[data-theme="dark"] {
    --card-bg: linear-gradient(145deg, rgba(30,41,59,0.95) 0%, rgba(15,23,42,0.9) 100%);
    --card-bg-solid: rgba(30, 41, 59, 0.95);
    --card-text: #e2e8f0;
    --card-text-muted: #94a3b8;
    --card-border: rgba(71, 85, 105, 0.5);
    --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
    --modal-bg: #1e293b;
    --modal-text: #e2e8f0;
    --input-bg: rgba(30, 41, 59, 0.9);
    --input-border: rgba(100, 116, 139, 0.5);
    --input-text: #e2e8f0;
    --quiz-btn-bg: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --quiz-btn-text: #a5b4fc;
    --quiz-btn-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.2), inset 0 0 0 2px rgba(165,180,252,0.25);
    --section-bg: rgba(15, 23, 42, 0.6);
    --section-border: rgba(51, 65, 85, 0.6);
    --sidebar-bg-glass: linear-gradient(145deg, rgba(30,41,59,0.85) 0%, rgba(15,23,42,0.75) 100%);
    --sidebar-border: rgba(71, 85, 105, 0.4);
    --word-display-color: #e2e8f0;
    --stat-value-color: #e2e8f0;
    --stat-label-color: #94a3b8;
    --lobby-label-color: #94a3b8;
    --mastery-filter-color: #cbd5e1;
    --details-def-bg: rgba(15, 23, 42, 0.6);
    --details-def-border: rgba(51, 65, 85, 0.6);
    --progress-stat-bg: rgba(30, 41, 59, 0.5);
}

/* --- Dark mode: card flip backgrounds --- */
[data-theme="dark"] .card-flip .card {
    background: var(--card-bg) !important;
    backdrop-filter: blur(10px);
}

/* --- Dark mode: card border glow adjustments --- */
[data-theme="dark"] .card.border-primary {
    background-image:
        linear-gradient(145deg, rgba(30,41,59,0.95), rgba(15,23,42,0.9)),
        linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

[data-theme="dark"] .card.border-success {
    background-image:
        linear-gradient(145deg, rgba(30,41,59,0.95), rgba(15,23,42,0.9)),
        linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
}

/* --- Dark mode: text color overrides --- */
[data-theme="dark"] .text-dark {
    color: var(--card-text) !important;
}

[data-theme="dark"] .text-muted {
    color: var(--card-text-muted) !important;
}

[data-theme="dark"] .lobby-label {
    color: var(--lobby-label-color);
}

/* --- Dark mode: form controls --- */
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

[data-theme="dark"] .form-select option {
    background-color: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .form-check-input {
    background-color: rgba(51, 65, 85, 0.6);
    border-color: rgba(100, 116, 139, 0.5);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: #667eea;
    border-color: #667eea;
}

/* --- Dark mode: modal --- */
[data-theme="dark"] .modal-content {
    background-color: var(--modal-bg);
    color: var(--modal-text);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* --- Dark mode: badges --- */
[data-theme="dark"] .badge.bg-secondary {
    background-color: #475569 !important;
}

/* --- Dark mode: alerts --- */
[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

/* --- Dark mode: btn-outline helpers --- */
[data-theme="dark"] .btn-outline-secondary:not(:hover) {
    color: #94a3b8 !important;
    border-color: rgba(100, 116, 139, 0.5) !important;
    background: var(--input-bg) !important;
}

[data-theme="dark"] .btn-outline-danger:not(:hover) {
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.4) !important;
    background: transparent !important;
}

[data-theme="dark"] .btn-outline-success:not(:hover) {
    color: #34d399 !important;
    border-color: rgba(52, 211, 153, 0.4) !important;
    background: transparent !important;
}

/* --- Dark mode: details modal internals --- */
[data-theme="dark"] .details-def-item,
[data-theme="dark"] .details-alt-translation {
    background: var(--details-def-bg);
    border-color: var(--details-def-border);
}

[data-theme="dark"] .details-alt-word {
    color: #a5b4fc;
}

[data-theme="dark"] .details-chip {
    background: linear-gradient(135deg, rgba(99,102,241,0.2) 0%, rgba(99,102,241,0.1) 100%);
    color: #a5b4fc;
    border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="dark"] .details-chip-syn {
    background: linear-gradient(135deg, rgba(245,158,11,0.2) 0%, rgba(245,158,11,0.1) 100%);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

[data-theme="dark"] .details-example-item {
    background: linear-gradient(135deg, rgba(16,185,129,0.1) 0%, rgba(16,185,129,0.05) 100%);
    border-left-color: #10b981;
}

[data-theme="dark"] .details-def-example {
    color: #94a3b8;
}

/* --- Dark mode: upload report --- */
[data-theme="dark"] .upload-report {
    background: linear-gradient(145deg, rgba(16,185,129,0.1) 0%, rgba(16,185,129,0.05) 100%);
    border-color: rgba(16, 185, 129, 0.3);
}

/* --- Dark mode: summary stat boxes --- */
[data-theme="dark"] .summary-stat,
[data-theme="dark"] .summary-mastery {
    background: var(--section-bg);
    border-color: var(--section-border);
}

/* --- Dark mode: bg-light utility used in modals --- */
[data-theme="dark"] .bg-light {
    background-color: rgba(15, 23, 42, 0.5) !important;
}

/* --- Dark mode: Magic modal preview boxes --- */
[data-theme="dark"] #magic-old-val,
[data-theme="dark"] #magic-new-val {
    background: var(--section-bg) !important;
}

/* ============================================================================
   SFONDO PAGINA ELEGANTE
   ============================================================================ */
body.bg-light {
    background: var(--page-gradient) !important;
    min-height: 100vh;
}

/* ============================================================================
   CONTENITORE PRINCIPALE QUIZ
   ============================================================================ */
.main-quiz-area {
    width: 100%;
    max-width: 600px;  /*  Allineato con il blocco opzioni sotto */
    margin: 0 auto;    /* Centra il contenitore */
    position: relative; /* Permette posizionamento assoluto della sidebar */
    padding-top: 1.5rem; /* Più respiro in alto */
}

/* ============================================================================
    SISTEMA CARD FLIP (Fronte/Retro)
   ============================================================================
   Usa CSS 3D transforms per creare l'effetto di rotazione della card
   ============================================================================ */

/* --- Container con prospettiva 3D --- */
.card-container {
    perspective: 1000px; /* Profondità prospettiva 3D - NON MODIFICARE */
    width: 100%;         /*  Larghezza piena per allinearsi con i blocchi sopra/sotto */
    max-width: 600px;    /*  Allineato con blocco Parole/Idiomi e opzioni quiz */
    margin: 1.5rem auto; /* Centra la card con più respiro verticale */
}

/* --- Card con animazione flip --- */
.card-flip {
    position: relative;
    width: 100%;

    /*  DIMENSIONI CARD - Più ariosa */
    height: 200px;  /* Aumentata per maggiore leggibilità */

    transform-style: preserve-3d; /* Mantiene 3D per i figli */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Animazione smooth */
}

/* --- Stato flippato (ruotato) --- */
.card-flip.flip { 
    transform: rotateY(180deg); /* Rotazione 180° sull'asse Y */
}

/* --- Stili comuni fronte e retro --- */
.card-flip .card {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* Nasconde il lato non visibile durante il flip */
    border-radius: 20px;         /* Angoli più arrotondati */
    border: none;

    /* Sfondo glassmorphism elegante */
    background: var(--card-bg);
    backdrop-filter: blur(10px);
}

/* --- Retro della card (inizialmente nascosto) --- */
.card-flip .back { 
    transform: rotateY(180deg); /* Pre-ruotato per essere visibile quando flippato */
}

/* --- Contenuto centrato all'interno della card --- */
.card-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra perfettamente - NECESSARIO PER FLIP! */
    width: 90%;
    text-align: center;
}

/* --- Padding specifico per card fronte con barra controlli inferiore --- */
.card.front .card-body {
    /* NON sovrascrivere position/transform - serve per flip! */
    padding: 0.75rem 1rem var(--card-bottom-spacing) 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centra la parola verticalmente */
}

/* Parola singola (WORD) leggermente più in alto per maggiore risalto */
.card.front.word-elevated .card-body {
    transform: translate(-50%, -56%); /* Spostata un po' più in alto rispetto al centro */
}

/* --- Contenitore per controlli in basso (link + freccia) --- */
.bottom-controls {
    position: absolute;
    bottom: var(--card-bottom-spacing); /* Usa la variabile per distanza dal bordo */
    left: 1rem;
    right: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

/* ============================================================================
   SIDEBAR OPERATIVA (Strumenti: Elimina, Modifica, Magic Wand)
   ============================================================================
   POSIZIONAMENTO: Floating a destra della card, NON allineata con i blocchi
   ============================================================================ */
.aid-kit-sidebar {
    /* DIMENSIONI SIDEBAR */
    width: 50px;   /* Larghezza barra strumenti */
    height: 180px; /* Altezza adattata alla card */

    /* POSIZIONAMENTO ASSOLUTO - FLOATING A DESTRA */
    position: absolute;
    right: -60px;  /* Posiziona a destra della card (50px + 10px gap) */
    top: 55%;
    transform: translateY(-50%); /* Centra verticalmente rispetto alla card */

    /* SFONDO GLASSMORPHISM ELEGANTE */
    background: var(--sidebar-bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* Layout e stile */
    display: flex;
    flex-direction: column;      /* Icone disposte verticalmente */
    align-items: center;
    justify-content: space-evenly; /* Spaziatura uniforme tra icone */
    border-radius: 16px;
    z-index: 100;
    border: 1px solid var(--sidebar-border);
    box-shadow:
        0 8px 32px rgba(102, 126, 234, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.1),
        0 0 40px rgba(102, 126, 234, 0.1),
        inset 0 1px 1px rgba(255, 255, 255, 0.8); /* Effetto inner glow + outer glow */
}

/* --- Icone all'interno della sidebar --- */
.aid-kit-sidebar i {
    font-size: 1.35rem; /*  Dimensione icone sidebar */
    cursor: pointer;
    transition: all 0.2s ease; /* Animazione hover smooth */
    padding: 10px;     /* Area cliccabile più ampia */
}

/* --- Colori icone sidebar più vivaci --- */
.aid-kit-sidebar i.bi-trash3 {
    color: #ef4444 !important; /* Rosso acceso */
}

.aid-kit-sidebar i.bi-pencil-square {
    color: #3b82f6 !important; /* Blu brillante */
}

.aid-kit-sidebar i.bi-magic {
    color: #8b5cf6 !important; /* Viola brillante (invece di giallo) */
}

/* ============================================================================
   ICONA DIZIONARIO (retro card, in alto a destra)
   ============================================================================ */
.details-card-icon {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 1.5rem;
    z-index: 10;
    cursor: pointer;
    transition: all 0.25s ease;
    color: #d97706; /* Ambra dorato */
    filter: drop-shadow(0 1px 3px rgba(217, 119, 6, 0.3));
}

.details-card-icon:hover:not(.disabled) {
    color: #b45309;
    transform: scale(1.2);
    filter: drop-shadow(0 2px 6px rgba(217, 119, 6, 0.5));
}

.details-card-icon.disabled {
    color: #cbd5e1; /* Grigio chiaro spento */
    cursor: default;
    filter: none;
    opacity: 0.5;
    pointer-events: none;
}

/* ============================================================================
   TTS (Text-to-Speech) - Bottoni pronuncia sulla flashcard
   ============================================================================ */

/* Bottone TTS base - posizionato in alto a sinistra della card */
.tts-btn {
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 10;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    font-size: 1.35rem;
    color: #667eea;
    transition: all 0.25s ease;
    filter: drop-shadow(0 1px 3px rgba(102, 126, 234, 0.3));
    opacity: 0.7;
}

.tts-btn:hover {
    opacity: 1;
    transform: scale(1.2);
    color: #4F46E5;
    filter: drop-shadow(0 2px 6px rgba(102, 126, 234, 0.5));
}

.tts-btn:active { transform: scale(0.95); }

/* Variante verde per il lato risposta */
.tts-btn-answer {
    color: #10b981;
    filter: drop-shadow(0 1px 3px rgba(16, 185, 129, 0.3));
}

.tts-btn-answer:hover {
    color: #059669;
    filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.5));
}

/* Dark mode */
[data-theme="dark"] .tts-btn { color: #a5b4fc; }
[data-theme="dark"] .tts-btn-answer { color: #34d399; }

/* --- Effetto hover sulle icone --- */
.aid-kit-sidebar i:hover {
    transform: scale(1.25); /* Ingrandimento 25% al passaggio mouse */
    filter: brightness(1.2); /* Più luminoso al hover */
}

/* ============================================================================
    ICONA PAUSA (Centro della card)
   ============================================================================ */
.pause-icon-card {
    font-size: 1.3rem;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.6;
}

.pause-icon-card:hover {
    opacity: 1;
    color: #667eea;
    transform: scale(1.15);
}

/* ============================================================================
    ICONA SKIP (Freccia "Passa alla prossima")
   ============================================================================ */
.skip-icon-main {
    /*  DIMENSIONE ICONA SKIP */
    font-size: 1.4rem !important; /* Compatta */

    color: var(--skip-icon-color); /* Usa colore definito in :root */
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.8; /* Leggermente trasparente di default */
}

/* --- Effetto hover sull'icona skip --- */
.skip-icon-main:hover {
    opacity: 1;                    /* Diventa completamente opaca */
    transform: translateX(3px);    /* Scorre di 3px a destra (effetto "vai avanti") */
}

/* ============================================================================
    LINK "SBIRCIA TRADUZIONE" (Bottom-left della card)
   ============================================================================ */
.card-body .btn-link {
    color: #6c757d; /* Grigio medio per non disturbare */
    font-weight: 500;
    font-size: 0.8rem; /* Più compatto */
    transition: all 0.2s ease;
}

.card-body .btn-link:hover {
    color: #0d6efd; /* Diventa blu primario al hover */
    transform: translateX(-2px); /* Leggero movimento a sinistra */
}

.card-body .btn-link i {
    transition: transform 0.2s ease;
}

.card-body .btn-link:hover i {
    transform: scale(1.15); /* Ingrandisce leggermente l'icona occhio */
}

/* ============================================================================
    RESPONSIVE DESIGN - ADATTAMENTO A DIVERSE RISOLUZIONI
   ============================================================================ */

/* --- DESKTOP LARGE (Larghezza minima 1200px) --- */
@media (min-width: 1200px) {
    .main-quiz-area {
        max-width: 700px; /* Più spazio su schermi grandi */
    }
    
    .card-container {
        max-width: 700px;
    }
}

/* --- TABLET (Larghezza massima 768px) --- */
@media (max-width: 768px) {
    .card-flip {
        height: 140px; /* Card compatta su tablet */
    }

    .aid-kit-sidebar {
        width: 45px;   /* Sidebar più stretta */
        height: 120px; /* Sidebar più bassa */
        right: -52px;  /* Aggiusta posizione */
    }

    .aid-kit-sidebar i {
        font-size: 1.1rem; /* Icone più piccole */
    }

    .skip-icon-main {
        font-size: 1.5rem !important; /* Icona skip ridotta */
    }

    .quiz-opt {
        min-height: 40px;
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
}

/* --- SMARTPHONE (Larghezza massima 480px) --- */
@media (max-width: 480px) {
    /*  SU MOBILE: Sidebar torna sotto la card (non c'è spazio laterale) */
    .main-quiz-area {
        padding-bottom: 50px; /* Spazio ridotto per la sidebar sotto */
    }

    .aid-kit-sidebar {
        /*  POSIZIONAMENTO: Da absolute a static per flusso normale */
        position: static;
        transform: none; /* Rimuove centratura verticale */

        /*  LAYOUT ORIZZONTALE: Icone in fila invece che in colonna */
        flex-direction: row;  /* Icone disposte orizzontalmente */
        width: 100%;          /* Occupa tutta la larghezza */
        max-width: 200px;     /* Limita larghezza massima */
        height: 45px;         /* Barra compatta */
        margin: 10px auto 0;  /* Centra */
    }

    .card-flip {
        height: 120px; /* Card molto compatta su smartphone */
    }

    /*  AREA CLICCABILE PIÙ GRANDE SU MOBILE */
    .aid-kit-sidebar i {
        padding: 10px;
        font-size: 1rem;
    }

    .quiz-opt {
        min-height: 36px;
        font-size: 0.75rem;
        padding: 0.35rem 0.5rem;
    }

    #word-display {
        font-size: clamp(0.9rem, 3vw, 1.5rem);
    }
}

/* ============================================================================
    BOTTONI QUIZ (Opzioni multiple choice) - DESIGN MODERNO CON GRADIENTI
   ============================================================================ */
.quiz-opt {
    min-height: 55px; /* Altezza minima più ariosa */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem; /* Testo leggermente più grande */
    font-weight: 600; /* Grassetto */
    border: none !important; /* Rimuove bordo per effetto gradiente pulito */
    border-radius: 12px !important; /* Angoli più arrotondati */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Transizione fluida */

    /* Gradiente elegante di default */
    background: var(--quiz-btn-bg) !important;
    color: var(--quiz-btn-text) !important;
    box-shadow: var(--quiz-btn-shadow);
    padding: 0.75rem 1rem; /* Padding più generoso */
    line-height: 1.3; /* Spaziatura righe migliore */
    text-align: center;
    word-break: break-word; /* Testo a capo automatico */
    margin-bottom: 0.5rem; /* Spazio tra i bottoni */

    /* Animazione entrata */
    animation: fadeInUp 0.3s ease backwards;
}

/* --- Effetto hover sui bottoni quiz --- */
.quiz-opt:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.02); /* Solleva e ingrandisce */
    background: var(--btn-gradient-primary) !important;
    color: white !important;
    box-shadow:
        0 8px 20px rgba(102, 126, 234, 0.35),
        0 4px 8px rgba(118, 75, 162, 0.2);
}

/* --- Effetto click (active) --- */
.quiz-opt:active:not(:disabled) {
    transform: translateY(-1px) scale(1.01);
}

/* --- Stato CORRETTO (risposta giusta) --- */
.quiz-opt.btn-success {
    background: var(--btn-gradient-success) !important;
    color: white !important;
    box-shadow:
        0 4px 15px rgba(17, 153, 142, 0.4),
        inset 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

/* --- Stato ERRATO (risposta sbagliata) --- */
.quiz-opt.btn-danger {
    background: var(--btn-gradient-danger) !important;
    color: white !important;
    box-shadow:
        0 4px 15px rgba(235, 51, 73, 0.4),
        inset 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

/* --- Stato INFO (mostra risposta corretta dopo errore) --- */
.quiz-opt.btn-info {
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%) !important;
    color: white !important;
    box-shadow:
        0 4px 15px rgba(6, 182, 212, 0.4),
        inset 0 0 0 2px rgba(255, 255, 255, 0.2) !important;
}

/* ============================================================================
   STATI BOTTONI (Corretto/Errato/Info)
   ============================================================================
   Bootstrap gia fornisce .btn-success, .btn-danger, .btn-info
   Puoi personalizzare ulteriormente qui se necessario
   ============================================================================ */
/*
.btn-success {
    Verde per risposta corretta - gia definito da Bootstrap
}

.btn-danger {
    Rosso per risposta errata - gia definito da Bootstrap 
}

.btn-info {
    Azzurro per mostrare risposta corretta dopo errore - gia definito da Bootstrap
}
*/

/* ============================================================================
    FEEDBACK QUIZ
   ============================================================================ */
#quiz-feedback {
    min-height: 30px; /* Altezza ridotta */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.95rem;
}

/* ============================================================================
    MODAL (Popup per Edit, Delete, Magic Wand)
   ============================================================================ */
/* Bootstrap fornisce già gli stili base per i modal.
   Personalizzazioni aggiuntive possono essere inserite qui. */

.modal-content {
    border-radius: 15px; /* Angoli arrotondati come le card */
    overflow: hidden;    /* Assicura che il border-radius funzioni con header colorati */
    background-color: var(--modal-bg);
    color: var(--modal-text);
}

.modal-header.bg-warning,
.modal-header.bg-danger,
.modal-header.bg-primary,
.modal-header.bg-info {
    color: white; /* Testo bianco su header colorati */
}

/* ============================================================================
   WORD DETAILS MODAL - Chip e stili interni
   ============================================================================ */
.details-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #4338ca;
    border: 1px solid rgba(99, 102, 241, 0.2);
    transition: all 0.2s ease;
}

.details-chip:hover {
    background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.details-chip-syn {
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.details-chip-syn:hover {
    background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.details-example-item {
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    font-size: 0.9rem;
    line-height: 1.5;
    border-left: 3px solid #10b981;
}

/* Word Details Modal - Ancorato in alto, si espande verso il basso */
.details-modal-dialog {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    max-height: calc(100vh - 3rem);
    display: flex;
    align-items: flex-start;
}

.details-modal-dialog .modal-content {
    max-height: calc(100vh - 3rem);
    display: flex;
    flex-direction: column;
}

.details-modal-dialog .modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
}

@media (max-width: 576px) {
    .details-modal-dialog {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
    }

    .details-modal-dialog .modal-content {
        max-height: calc(100vh - 1rem);
    }

    .details-modal-dialog .modal-body {
        font-size: 0.85rem;
        padding: 1rem !important;
    }

    .details-alt-word {
        font-size: 0.95rem;
    }

    .details-example-item {
        font-size: 0.8rem;
        padding: 6px 10px;
    }

    .details-chip {
        font-size: 0.75rem;
        padding: 3px 8px;
    }

    .details-def-item {
        padding: 8px 10px;
        font-size: 0.85rem;
    }
}

/* Tab nel modal Word Details */
.details-tab {
    color: rgba(255, 255, 255, 0.7) !important;
    border: none !important;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px 8px 0 0 !important;
    background: transparent !important;
    transition: all 0.2s ease;
}

.details-tab:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.15) !important;
}

.details-tab.active {
    color: #0891b2 !important;
    background: white !important;
}

.details-tab.disabled {
    color: rgba(255, 255, 255, 0.3) !important;
    cursor: default;
    opacity: 0.4;
    text-decoration: line-through;
}

/* Definizioni numerate */
.details-def-item {
    padding: 10px 14px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: var(--details-def-bg);
    border: 1px solid var(--details-def-border);
}

.details-def-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
    color: #1e40af;
    font-size: 0.75rem;
    font-weight: 700;
    margin-right: 8px;
    flex-shrink: 0;
}

.details-def-example {
    font-style: italic;
    color: #64748b;
    font-size: 0.85rem;
    margin-top: 4px;
    padding-left: 32px;
}

/* Traduzione alternativa nel tab Traduzioni */
.details-alt-translation {
    padding: 10px 14px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: var(--details-def-bg);
    border: 1px solid var(--details-def-border);
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.details-alt-word {
    font-size: 1.1rem;
    font-weight: 600;
    color: #4338ca;
}

.details-alt-reverse {
    font-size: 0.8rem;
    color: #94a3b8;
}

/* ============================================================================
    TIPOGRAFIA PERSONALIZZATA
   ============================================================================ */

/* Titolo coppia lingue */
#lang-pair-heading {
    font-weight: 700 !important;
    background: linear-gradient(135deg, #a5b4fc 0%, #c4b5fd 50%, #f0abfc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(165, 180, 252, 0.3);
}

#word-display {
    /* Font size ULTRA-RESPONSIVE: si adatta sia a parole corte che frasi lunghe */
    font-size: clamp(1rem, 3.5vw, 2rem); /* Min 1rem, Max 2rem - più compatto */
    font-weight: 700; /* Grassetto extra */
    color: var(--word-display-color);
    line-height: 1.2; /* Spaziatura ridotta */
    word-wrap: break-word; /* Va a capo se la parola è troppo lunga */
    hyphens: auto; /* Abilita sillabazione automatica */
}

#translation-display {
    font-size: clamp(1.1rem, 3.5vw, 2.2rem); /* Font responsive */
    font-weight: 600;
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.4;
    word-wrap: break-word;
}

/* ============================================================================
   CONTROLLI INFERIORI (Select + Bottoni)
   ============================================================================ */
#language-pair-select {
    border-radius: 10px;
    border: 2px solid var(--input-border);
    transition: all 0.3s ease;
    background: var(--input-bg);
    color: var(--input-text);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#language-pair-select:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25), 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Bottone Inverti Ordine - Gradiente elegante */
.btn-secondary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
}

.btn-secondary:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}

/* Bottone Suoni */
.btn-outline-secondary {
    border-radius: 10px !important;
    border: 2px solid rgba(102, 126, 234, 0.5) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #667eea !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.btn-outline-secondary:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: transparent !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
}

/* Bottone Prossima Parola */
.btn-dark {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.btn-dark:hover {
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.3) !important;
}

/* ============================================================================
   SELETTORE CATEGORIA (Parole / Idiomi) - Design moderno
   ============================================================================ */
.btn-group .btn-outline-primary {
    border: 2px solid rgba(102, 126, 234, 0.5) !important;
    color: #667eea !important;
    font-weight: 600;
    transition: all 0.3s ease;
    background: var(--card-bg-solid);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.btn-group .btn-outline-primary:hover {
    background: rgba(102, 126, 234, 0.1) !important;
    border-color: #667eea !important;
}

.btn-group .btn-check:checked + .btn-outline-primary {
    background: var(--btn-gradient-primary) !important;
    border-color: transparent !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.35);
}

/* Arrotondamento bottoni gruppo */
.btn-group .btn:first-child {
    border-radius: 12px 0 0 12px !important;
}

.btn-group .btn:last-child {
    border-radius: 0 12px 12px 0 !important;
}

/* ============================================================================
    ANIMAZIONI AGGIUNTIVE (OPZIONALI)
   ============================================================================ */

/* Animazione fade-in per opzioni quiz */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Delay progressivo per effetto cascata (applicato ai bottoni col) */
#options-grid .col:nth-child(1) .quiz-opt { animation-delay: 0.05s; }
#options-grid .col:nth-child(2) .quiz-opt { animation-delay: 0.1s; }
#options-grid .col:nth-child(3) .quiz-opt { animation-delay: 0.15s; }
#options-grid .col:nth-child(4) .quiz-opt { animation-delay: 0.2s; }

/* ============================================================================
    UTILITY CLASSES (Classi helper)
   ============================================================================ */

/* Ombra custom per card */
.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

/* Padding card body - compatto */
.card-body {
    padding: 1rem !important; /* Padding ridotto */
}

/* ============================================================================
    FIX E OVERRIDE SPECIFICI
   ============================================================================ */

/* Assicura che il border delle card sia visibile con effetto gradiente */
.card.border-primary {
    border: 3px solid transparent !important;
    background-image:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92)),
        linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow:
        0 10px 40px rgba(102, 126, 234, 0.35),
        0 4px 12px rgba(118, 75, 162, 0.25),
        0 0 60px rgba(102, 126, 234, 0.15) !important; /* Glow effect per sfondo scuro */
}

.card.border-success {
    border: 3px solid transparent !important;
    background-image:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92)),
        linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
    box-shadow:
        0 10px 40px rgba(17, 153, 142, 0.35),
        0 4px 12px rgba(56, 239, 125, 0.25),
        0 0 60px rgba(17, 153, 142, 0.15) !important; /* Glow effect per sfondo scuro */
}

/* Fix per iOS Safari - previene zoom su input focus */
@supports (-webkit-touch-callout: none) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* ============================================================================
   LOBBY SCREEN
   ============================================================================ */

.lobby-title {
    font-weight: 800;
    font-size: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(102, 126, 234, 0.3);
    letter-spacing: -0.5px;
}

.lobby-card {
    width: 100%;
    max-width: 480px;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 1.5rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

.lobby-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--lobby-label-color);
    margin-bottom: 0.25rem;
    display: block;
}

.lobby-section {
    background: var(--section-bg);
    border-radius: 14px;
    padding: 1rem;
    border: 1px solid var(--section-border);
}

/* Mastery Filter Items */
.mastery-filters {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0.5rem;
}

.mastery-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    color: var(--mastery-filter-color);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.mastery-filter-item:hover {
    background: rgba(102, 126, 234, 0.08);
}

.mastery-count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.15);
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 28px;
    text-align: center;
}

/* Resume Banner */
.resume-banner {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    width: 100%;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Pulsante Avvia Sessione */
.lobby-start-btn {
    background: var(--btn-gradient-primary) !important;
    border: none !important;
    color: white !important;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: 14px !important;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.lobby-start-btn:hover {
    background: var(--btn-gradient-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4) !important;
}

/* Progress Summary (Compact Records) */
.progress-summary {
    display: flex;
    justify-content: space-around;
    gap: 12px;
}

.progress-stat {
    text-align: center;
    flex: 1;
    padding: 10px 8px;
    border-radius: 12px;
    background: var(--progress-stat-bg);
}

.progress-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--stat-value-color);
    line-height: 1.2;
}

.progress-stat-label {
    font-size: 0.72rem;
    color: var(--stat-label-color);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

/* Mastery filter ERRATE */
.mastery-errate {
    margin-top: 4px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ============================================================================
   SESSION HEADER (Progress Bar + Counter)
   ============================================================================ */

.session-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
}

.session-back-btn {
    color: #a5b4fc !important;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0;
    transition: all 0.2s ease;
}

.session-back-btn:hover {
    color: #c4b5fd !important;
    transform: translateX(-3px);
}

.session-counter {
    font-weight: 700;
    font-size: 0.9rem;
    color: #a5b4fc;
    background: rgba(165, 180, 252, 0.15);
    padding: 4px 12px;
    border-radius: 20px;
}

.session-score-badge {
    font-weight: 700;
    font-size: 0.85rem;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    padding: 4px 12px;
    border-radius: 20px;
}

/* Progress Bar */
.session-progress-container {
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    margin: 4px 0 8px 0;
    overflow: hidden;
}

.session-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    border-radius: 4px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
}

/* ============================================================================
   TIMER BADGE
   ============================================================================ */

.timer-badge {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-weight: 700;
    font-size: 0.85rem;
    color: #f8fafc;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    padding: 4px 12px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    min-width: 60px;
    text-align: center;
}

.timer-badge.timer-gold {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white;
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.4);
}

.timer-badge.timer-silver {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
    color: white;
}

.timer-badge.timer-expired {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white;
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.4);
}

/* ============================================================================
   SUMMARY SCREEN
   ============================================================================ */

.summary-card {
    width: 100%;
    max-width: 480px;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    text-align: center;
    color: var(--card-text);
}

.summary-title {
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.summary-score-section {
    padding: 1.5rem 0;
}

.summary-score-value {
    font-size: 3.5rem;
    font-weight: 900;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    animation: scorePopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes scorePopIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.summary-score-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.summary-score-max {
    font-size: 0.8rem;
    color: #94a3b8;
}

.summary-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 1rem;
}

.summary-stat {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--section-border);
}

.summary-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.summary-stat-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-mastery {
    background: var(--section-bg);
    border-radius: 12px;
    padding: 0.75rem;
    border: 1px solid var(--section-border);
}

/* ============================================================================
   MASTERY FEEDBACK BADGES
   ============================================================================ */

.mastery-badge-0 {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white;
}

.mastery-badge-1 {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: white;
}

.mastery-badge-2 {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white;
}

.mastery-badge-3 {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white;
}

/* ============================================================================
   SCREEN TRANSITIONS
   ============================================================================ */

#lobby-screen,
#study-screen,
#summary-screen {
    animation: screenFadeIn 0.3s ease;
}

@keyframes screenFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   SRS - BOTTONE RIPASSO INTELLIGENTE
   ============================================================================ */

/* Bottone SRS nella lobby - stile ambra/giallo */
.srs-review-btn {
    border: 2px solid rgba(245, 158, 11, 0.5) !important;
    color: #f59e0b !important;
    font-weight: 600;
    border-radius: 12px !important;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.95) !important;
}

.srs-review-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border-color: transparent !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
}

.srs-review-btn:hover:not(:disabled) .badge {
    background: #fff !important;
    color: #d97706 !important;
}

.srs-review-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Dark mode */
[data-theme="dark"] .srs-review-btn:not(:hover):not(:disabled) {
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
    background: transparent !important;
}


/* ============================================================================
   STREAK & OBIETTIVI GIORNALIERI
   ============================================================================ */

/* Badge streak - mostra il contatore giorni consecutivi */
.streak-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    font-weight: 700;
    color: #94a3b8;
    padding: 4px 12px;
    border-radius: 20px;
    background: rgba(148, 163, 184, 0.15);
    transition: all 0.3s ease;
}

.streak-badge .bi-fire { font-size: 1rem; }

/* Streak attivo (> 0 giorni) - arancione fuoco */
.streak-badge.streak-active {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.streak-badge.streak-active .bi-fire {
    color: #ef4444;
    animation: fireGlow 1.5s ease-in-out infinite alternate;
}

@keyframes fireGlow {
    from { filter: drop-shadow(0 0 2px rgba(239,68,68,0.3)); }
    to   { filter: drop-shadow(0 0 6px rgba(239,68,68,0.6)); }
}

/* Variante grande per il summary screen */
.streak-badge-summary {
    font-size: 1rem;
    padding: 6px 16px;
}

/* Barra progresso giornaliero */
.daily-progress-bar-container {
    height: 6px;
    background: rgba(148, 163, 184, 0.2);
    border-radius: 6px;
    overflow: hidden;
}

.daily-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Obiettivo raggiunto - diventa verde */
.daily-progress-bar-fill.goal-met {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* Dark mode */
[data-theme="dark"] .streak-badge {
    background: rgba(148, 163, 184, 0.1);
}
[data-theme="dark"] .streak-badge.streak-active {
    background: rgba(245, 158, 11, 0.1);
}
[data-theme="dark"] .daily-progress-bar-container {
    background: rgba(148, 163, 184, 0.1);
}


/* ============================================================================
   LOBBY RESPONSIVE
   ============================================================================ */

@media (max-width: 480px) {
    .lobby-card {
        padding: 1rem;
        border-radius: 16px;
    }

    .lobby-title {
        font-size: 1.5rem;
    }

    .summary-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .summary-score-value {
        font-size: 2.5rem;
    }
}

/* ============================================================================
   UPLOAD CSV REPORT
   ============================================================================ */

.upload-report {
    background: linear-gradient(145deg,
        rgba(240, 253, 244, 0.9) 0%,
        rgba(220, 252, 231, 0.8) 100%);
    backdrop-filter: blur(8px);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(16, 185, 129, 0.25);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.upload-report hr {
    border-color: rgba(16, 185, 129, 0.2);
}

/* Bottone Importa CSV nella lobby */
#import-csv-btn {
    border: 2px solid rgba(16, 185, 129, 0.5) !important;
    color: #10b981 !important;
    font-weight: 600;
    border-radius: 12px !important;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.95) !important;
}

#import-csv-btn:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: transparent !important;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
}

/* ============================================================================
   THEME TOGGLE BUTTON
   ============================================================================ */
.theme-toggle-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* ============================================================================
   STATISTICS MODAL
   ============================================================================ */
.stats-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.stats-kpi-card {
    background: var(--section-bg);
    border: 1px solid var(--section-border);
    border-radius: 12px;
    padding: clamp(0.5rem, 2vw, 0.75rem);
    text-align: center;
}

.stats-kpi-value {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    font-weight: 800;
    color: var(--stat-value-color);
    line-height: 1.2;
}

.stats-kpi-label {
    font-size: clamp(0.6rem, 1.8vw, 0.7rem);
    font-weight: 600;
    color: var(--stat-label-color);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stats-mastery-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.stats-mastery-bar-label {
    font-size: clamp(0.65rem, 2.2vw, 0.8rem);
    font-weight: 600;
    color: var(--card-text);
    min-width: clamp(70px, 20vw, 110px);
}

.stats-mastery-bar-fill {
    flex: 1;
    height: 22px;
    border-radius: 6px;
    background: var(--section-bg);
    overflow: hidden;
    position: relative;
}

.stats-mastery-bar-inner {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 0;
}

.stats-mastery-bar-count {
    font-size: clamp(0.65rem, 2vw, 0.75rem);
    font-weight: 700;
    color: var(--card-text-muted);
    min-width: clamp(40px, 10vw, 50px);
    text-align: right;
}

.stats-sessions-table {
    width: 100%;
    font-size: clamp(0.75rem, 2.5vw, 0.9rem);
    border-collapse: separate;
    border-spacing: 0;
}

.stats-sessions-table th {
    font-weight: 700;
    color: var(--stat-label-color);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: clamp(0.6rem, 2vw, 0.7rem);
    padding: 6px 8px;
    border-bottom: 2px solid var(--section-border);
}

.stats-sessions-table td {
    padding: 6px 8px;
    color: var(--card-text);
    border-bottom: 1px solid var(--section-border);
}

.stats-category-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.stats-category-label {
    font-size: clamp(0.7rem, 2.3vw, 0.85rem);
    font-weight: 600;
    color: var(--card-text);
    min-width: clamp(70px, 18vw, 100px);
}

.stats-category-bar {
    flex: 1;
    height: 18px;
    border-radius: 6px;
    background: var(--section-bg);
    overflow: hidden;
}

.stats-category-bar-inner {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.stats-category-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--card-text-muted);
    min-width: 30px;
    text-align: right;
}

.stats-section-title {
    font-size: clamp(0.75rem, 2.5vw, 0.85rem);
    font-weight: 700;
    color: var(--lobby-label-color);
    margin-bottom: 0.5rem;
}

.stats-modal-dialog {
    max-width: 520px;
}

/* Lobby - Reverse Language Pair Button */
.lobby-reverse-btn {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px !important;
    border: 2px solid rgba(102, 126, 234, 0.4) !important;
    background: var(--card-bg-solid) !important;
    color: #667eea !important;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    transition: all 0.3s ease;
}

.lobby-reverse-btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: transparent !important;
    color: white !important;
    transform: rotate(180deg);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.35) !important;
}

[data-theme="dark"] .lobby-reverse-btn {
    background: var(--input-bg) !important;
    border-color: rgba(165, 180, 252, 0.3) !important;
    color: #a5b4fc !important;
}

[data-theme="dark"] .lobby-reverse-btn:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border-color: transparent !important;
    color: white !important;
}

/* Stats Modal - Filter label */
.stats-filter-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--stat-label-color);
    margin-bottom: 0.25rem;
    display: block;
    text-align: center;
}

/* Combo box filtro lingua */
#stats-lang-filter {
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    border-radius: 12px;
    border: 2px solid rgba(102, 126, 234, 0.3);
    background: var(--section-bg);
    color: var(--card-text);
    text-align: center;
    text-align-last: center;
    padding: 0.5rem 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

#stats-lang-filter:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

/* Righe mensili aggregate - stile distinto */
.stats-row-monthly {
    background: rgba(102, 126, 234, 0.05);
    font-style: italic;
}

/* Dark mode per nuovi elementi */
[data-theme="dark"] #stats-lang-filter {
    background-color: #1e293b;
    border-color: rgba(165, 180, 252, 0.25);
    color: #e2e8f0;
}

[data-theme="dark"] #stats-lang-filter:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

[data-theme="dark"] #stats-lang-filter option {
    background-color: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .stats-row-monthly {
    background: rgba(102, 126, 234, 0.1);
}

@media (max-width: 576px) {
    .stats-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
}

/* ============================================================================
   FEEDBACK MODAL - Star Rating
   ============================================================================ */
#feedback-stars i {
    transition: all 0.2s ease;
    color: #cbd5e1;
}

#feedback-stars i:hover {
    transform: scale(1.2);
}

#feedback-stars i.bi-star-fill {
    color: #f59e0b !important;
    filter: drop-shadow(0 1px 3px rgba(245, 158, 11, 0.4));
}

[data-theme="dark"] #feedback-stars i {
    color: #475569;
}

/* ============================================================================
   ONBOARDING TOUR - Overlay & Spotlight
   ============================================================================ */
#onboarding-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

#onboarding-overlay::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.65);
    z-index: 1;
}

#tour-spotlight {
    position: absolute;
    z-index: 2;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
    background: transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

#tour-tooltip {
    position: absolute;
    z-index: 3;
    width: 280px;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
    backdrop-filter: blur(12px);
    color: #f1f5f9;
    border-radius: 14px;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(165, 180, 252, 0.25);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(102, 126, 234, 0.15);
    animation: tourTooltipIn 0.3s ease;
}

@keyframes tourTooltipIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

#tour-tooltip-title {
    font-size: 0.95rem;
    color: #a5b4fc;
}

#tour-tooltip-body {
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.5;
}

#tour-tooltip .btn-outline-light {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 8px;
    border-color: rgba(255, 255, 255, 0.3);
}

#tour-tooltip .btn-light {
    font-size: 0.75rem;
    padding: 3px 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
}

#tour-tooltip .btn-link {
    font-size: 0.72rem;
    padding: 2px 6px;
}

@media (max-width: 480px) {
    #tour-tooltip {
        width: 240px;
        padding: 0.8rem 1rem;
    }
}