/* flashcard.css - Strumenti > Flashcard: flip 3D della carta di studio e i
   tre temi grafici selezionabili per mazzo (Minimale/Moderno, Dark/Tech,
   Academy/Papiro). Ogni tema è una palette fissa pensata per il tipo di
   materia, non legata al tema chiaro/scuro dell'app (stesso principio di
   .lg-lettura per i libri-gioco): scegliere "Dark/Tech" deve restare scuro
   anche con l'app in tema chiaro, e viceversa per gli altri due.
   Nessun font/libreria esterna: solo CSS e i font di sistema già usati
   altrove nell'app (Georgia per il tema Papiro, stesso stack di .lg-lettura). */

.fc-study {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* Sfondo di base per il tema Minimale (che non ne imposta uno proprio):
       le regole [data-layout="dark"/"papyrus"] qui sotto usano un selettore
       con attributo, più specifico, e la sovrascrivono correttamente. */
    background: #ffffff;
}

/* Schermo intero (pulsante fcFullscreenBtn): l'elemento .fc-study stesso
   diventa il fullscreen target, stesso pattern di .cgd-root.cgd-is-fullscreen
   in games_theme.css. */
.fc-study.fc-is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    border-radius: 0;
}

.fc-toolbar {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    padding: 0.5rem 0.5rem 0;
}

.fc-icon-btn {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.85);
    color: inherit;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.fc-icon-btn:hover { filter: brightness(0.96); }

/* Selettore aspetto grafico nella pagina pubblica di studio: permette a chi
   visualizza il mazzo (non solo al docente in fase di modifica) di
   scegliere fra i 3 temi — popover di icone/swatch invece di un <select>,
   stessa convenzione "niente dropdown" già seguita ovunque nel progetto,
   scelta client-side (localStorage per token) e non salvata sul mazzo. */
.fc-theme-picker-wrap {
    position: relative;
}
.fc-theme-popover[hidden] {
    display: none;
}
.fc-theme-popover {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 10;
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
}
.fc-theme-swatch-btn {
    border: 2px solid transparent;
    border-radius: 0.5rem;
    padding: 0.15rem;
    cursor: pointer;
    background: none;
    line-height: 0;
}
.fc-theme-swatch-btn.fc-theme-swatch-active {
    border-color: var(--teal-600, #1FB5B4);
}
.fc-theme-swatch-btn .fc-layout-swatch {
    width: 2.6rem;
    height: 2rem;
    border-radius: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
}
.fc-theme-swatch-btn .fc-layout-swatch-minimal { background: #ffffff; border: 1px solid #e2e8f0; color: #1a202c; }
.fc-theme-swatch-btn .fc-layout-swatch-dark { background: #0a0e1a; border: 1px solid #00e5ff; color: #7fd8ff; font-family: 'Courier New', monospace; }
.fc-theme-swatch-btn .fc-layout-swatch-papyrus { background: #f3ede1; border: 1px solid #b8860b; color: #6b5a3f; font-family: Georgia, serif; }

.fc-intro {
    max-width: 40rem;
    text-align: left;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
    margin: 0.25rem 0 1rem;
    padding: 0 1rem;
}
.fc-intro .fc-intro-again { color: #dc2626; font-weight: 600; }
.fc-intro .fc-intro-hard  { color: #ea8a1f; font-weight: 600; }
.fc-intro .fc-intro-good  { color: #22a55e; font-weight: 600; }
.fc-intro .fc-intro-easy  { color: #2563eb; font-weight: 600; }

.fc-inline-img {
    max-width: 100%;
    max-height: 10rem;
    display: block;
    margin: 0.5rem auto;
    border-radius: 0.4rem;
}

.fc-done-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    flex-wrap: wrap;
}

.fc-progress {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
    color: var(--text-secondary, #666);
}

.fc-stage {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 1.5rem 1rem;
    perspective: 1600px;
}

.fc-card {
    width: min(560px, 100%);
    height: 320px;
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0.15, 0.2, 1);
}

.fc-card.fc-flipped {
    transform: rotateY(180deg);
}

.fc-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 1rem;
}

/* Contenuto testuale della facciata, separato da .fc-card-face perché
   quest'ultima ora fa anche da contenitore di posizionamento per
   .fc-speak-btn (in alto a destra, sopra il testo, mai dentro il flusso
   flex centrato). */
.fc-card-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    font-size: 1.35rem;
    line-height: 1.5;
    overflow-y: auto;
    word-break: break-word;
}

/* Contenuto reso da TinyMCE (vedi flashcard_card_editor.js): niente margini
   verticali di troppo fra i paragrafi in uno spazio già compatto. */
.fc-card-text p {
    margin: 0.3em 0;
}
.fc-card-text p:first-child { margin-top: 0; }
.fc-card-text p:last-child { margin-bottom: 0; }

/* Pulsante "Leggi la carta ad alta voce": in alto a destra della facciata,
   figlio di .fc-card-face (non di .fc-card, che ruota per il flip 3D) così
   resta sempre leggibile/non specchiato, esattamente come il testo della
   facciata posteriore già ottiene dalla sua stessa rotazione di
   compensazione (vedi .fc-card-back qui sotto). */
.fc-speak-btn {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    font-size: 0.95rem;
}
.fc-speak-btn.fc-speak-active {
    box-shadow: 0 0 0 2px var(--teal-600, #1FB5B4);
}

.fc-card-back {
    transform: rotateY(180deg);
}

/* Contenitore di altezza riservata per flip-hint/pulsanti di valutazione:
   i due si alternano (mai visibili insieme) ma hanno altezze diverse — senza
   questo min-height, il cambio di altezza sotto la carta fa ricalcolare la
   colonna flex e, in modalità schermo intero (.fc-is-fullscreen usa
   justify-content:center sull'intera colonna), sposta visibilmente la carta
   verso l'alto nel momento in cui compaiono i pulsanti Ancora/Facile/ecc.
   (bug segnalato dall'utente). Il min-height copre l'altezza dei pulsanti
   su una sola riga; su schermi molto stretti dove vanno a capo su più righe
   un piccolo residuo di spostamento può restare, ma il caso comune è fisso. */
.fc-below-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 4.6rem;
}

.fc-flip-hint {
    font-size: 0.8rem;
    color: var(--text-secondary, #888);
    margin-top: 0.25rem;
}

.fc-ratings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.fc-rating-btn {
    padding: 0.65rem 1.3rem;
    border-radius: 0.5rem;
    border: none;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    cursor: pointer;
}

.fc-rating-again { background: #dc2626; }
.fc-rating-hard  { background: #ea8a1f; }
.fc-rating-good  { background: #22a55e; }
.fc-rating-easy  { background: #2563eb; }
.fc-rating-btn:hover { filter: brightness(1.08); }

.fc-done {
    text-align: center;
    padding: 2rem 1rem;
}
.fc-done p {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* ---- Tema Minimale/Moderno (default): pulito, sans-serif, accento teal ---- */
.fc-study[data-layout="minimal"] .fc-card-face {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #1a202c;
    font-family: -apple-system, 'Segoe UI', Arial, sans-serif;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
}
.fc-study[data-layout="minimal"] .fc-card-back {
    border-color: var(--teal-600, #1FB5B4);
}

/* ---- Tema Dark/Tech: alto contrasto, monospazio, accenti al neon ---- */
.fc-study[data-layout="dark"] {
    background: #070b14;
    border-radius: 1rem;
    padding-bottom: 1.5rem;
}
.fc-study[data-layout="dark"] .fc-progress,
.fc-study[data-layout="dark"] .fc-flip-hint,
.fc-study[data-layout="dark"] .fc-intro {
    color: #7fd8ff;
}
.fc-study[data-layout="dark"] .fc-icon-btn {
    background: rgba(0, 229, 255, 0.12);
    border-color: #00e5ff;
    color: #7fd8ff;
}
.fc-study[data-layout="dark"] .fc-card-face {
    background: #0a0e1a;
    border: 1px solid #00e5ff;
    color: #e7fbff;
    font-family: 'Courier New', Courier, monospace;
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.35), inset 0 0 30px rgba(0, 229, 255, 0.05);
}
.fc-study[data-layout="dark"] .fc-card-back {
    border-color: #ff2fd6;
    box-shadow: 0 0 22px rgba(255, 47, 214, 0.35), inset 0 0 30px rgba(255, 47, 214, 0.05);
}
.fc-study[data-layout="dark"] .fc-done p {
    color: #e7fbff;
}

/* ---- Tema Academy/Papiro: caldo, serif, come la lettura dei libri-gioco (.lg-lettura) ---- */
.fc-study[data-layout="papyrus"] {
    background: #f3ede1;
    border-radius: 1rem;
    padding-bottom: 1.5rem;
}
.fc-study[data-layout="papyrus"] .fc-progress,
.fc-study[data-layout="papyrus"] .fc-flip-hint,
.fc-study[data-layout="papyrus"] .fc-intro {
    color: #6b5a3f;
}
.fc-study[data-layout="papyrus"] .fc-icon-btn {
    background: rgba(184, 134, 11, 0.12);
    border-color: #b8860b;
    color: #6b5a3f;
}
.fc-study[data-layout="papyrus"] .fc-card-face {
    background: #faf5e8;
    border: 2px solid #b8860b;
    color: #2b2015;
    font-family: Georgia, 'Times New Roman', serif;
    box-shadow: 0 6px 18px rgba(90, 70, 30, 0.18);
}
.fc-study[data-layout="papyrus"] .fc-card-back {
    background: #f3e6c8;
}
.fc-study[data-layout="papyrus"] .fc-done p {
    color: #2b2015;
}

/* ---- Selettore layout nell'editor del mazzo: tre riquadri con anteprima ---- */
.flashcard-layout-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.flashcard-layout-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 140px;
    padding: 0.75rem;
    border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 0.75rem;
    cursor: pointer;
    text-align: center;
    font-size: 0.85rem;
}

.flashcard-layout-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.flashcard-layout-option:has(input:checked) {
    border-color: var(--teal-600, #1FB5B4);
}

.flashcard-layout-label {
    display: block;
    line-height: 1.2;
    min-height: 2.4em;
}

.flashcard-swatch {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3rem;
    border-radius: 0.4rem;
    font-size: 0.7rem;
}

.flashcard-layout-option-minimal .flashcard-swatch {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    color: #1a202c;
    font-family: -apple-system, 'Segoe UI', Arial, sans-serif;
}
.flashcard-layout-option-dark .flashcard-swatch {
    background: #0a0e1a;
    border: 1px solid #00e5ff;
    color: #7fd8ff;
    font-family: 'Courier New', Courier, monospace;
}
.flashcard-layout-option-papyrus .flashcard-swatch {
    background: #f3ede1;
    border: 1px solid #b8860b;
    color: #6b5a3f;
    font-family: Georgia, 'Times New Roman', serif;
}

@media (max-width: 40rem) {
    .fc-card { height: 260px; }
    .fc-card-face { font-size: 1.1rem; padding: 1.25rem; }
}

/* Flashcard locali (flashcard-locale.php): elenco mazzi, azioni e tabella carte. */
.fcl-deck { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-bottom: 1px solid #eee; }
.fcl-deck-info { display: flex; flex-direction: column; gap: 2px; }
.fcl-deck-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fcl-swatches { display: flex; gap: 8px; }
.fcl-table-wrap { overflow-x: auto; }
.fcl-table { width: 100%; }
.fcl-table td { vertical-align: top; }
.fcl-row-actions { white-space: nowrap; }
#fcLocalApp textarea { width: 100%; }

/* Immagini nelle carte (anche quelle dei mazzi creati con l'app): mai tagliate in alto e senza cambiare la misura della carta.
   - L'altezza massima dell'immagine lascia sempre posto a UNA riga di testo sotto: immagine + riga si vedono senza scorrere.
   - Con più righe di testo si può scorrere in basso (overflow-y: auto della faccia).
   - Gli a capo vuoti messi dall'app subito dopo l'immagine sono nascosti (occupavano due righe). */
.fc-card { --fc-h: 320px; }
@media (max-width: 40rem) { .fc-card { --fc-h: 260px; } }
.fc-card-text img {
    display: block;
    max-width: 100%;
    max-height: calc(var(--fc-h) - 8.5rem);
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto 0.4rem;
    border-radius: 0.4rem;
    flex: none;
}
.fc-card-text img + br,
.fc-card-text img + br + br { display: none; }
/* Il contenuto è centrato in verticale, ma se è più alto della carta parte dall'alto (niente parte tagliata sopra). */
.fc-card-text::before,
.fc-card-text::after { content: ''; margin: auto; }
.fc-card-text { justify-content: flex-start; }