/* focus_timer.css - Schermata arcade anni '80 per lo Strumenti > Focus Timer.
   Sfondo scuro, colori neon, font monospazio, cornice "CRT" con scanline:
   nessun font/immagine esterna, solo CSS + le SVG pixel-art inline del
   template. Le variabili --ft-* sono i soli colori usati dal timer, tenuti
   separati dalla palette principale dell'app (qui serve un tema fisso,
   non quello scelto dall'utente in Impostazioni). */

.ft-arcade {
    position: relative;
    z-index: 0;
    background: radial-gradient(ellipse at 50% -10%, #2a1a4a 0%, #120821 55%, #05010c 100%);
    border-radius: 1rem;
    padding: 2rem 1.5rem 2.5rem;
    min-height: 34rem;
    overflow: hidden;
    --ft-red: #ff3860;
    --ft-green: #3ddc84;
    --ft-yellow: #ffd93d;
    --ft-orange: #ff9f3d;
    --ft-cyan: #38e8ff;
    --ft-magenta: #ff36e0;
    --ft-muted: rgba(255, 255, 255, 0.08);
    --ft-off: rgba(255, 255, 255, 0.35);
}

.ft-arcade::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.035) 0px,
        rgba(255, 255, 255, 0.035) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: overlay;
}

.ft-screen {
    position: relative;
    z-index: 1;
    max-width: 26rem;
    margin: 0 auto;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
}

.ft-phase {
    color: var(--ft-cyan);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-shadow: 0 0 10px var(--ft-cyan);
}

.ft-cycle {
    color: var(--ft-magenta);
    font-size: 0.92rem;
    letter-spacing: 0.2em;
    margin-top: 0.3rem;
    min-height: 1.2rem;
    text-shadow: 0 0 8px var(--ft-magenta);
}

.ft-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 9rem;
    margin: 1rem 0;
    position: relative;
}

.ft-tomato-wrap {
    position: relative;
    width: 8rem;
    height: 8rem;
}

.ft-tomato-bg,
.ft-tomato-fg {
    position: absolute;
    inset: 0;
}

.ft-tomato-bg img,
.ft-tomato-fg img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 6px rgba(255, 56, 96, 0.45));
}

/* Sagoma di sfondo: sempre visibile ma smorzata, per far vedere "dove
   arriverà" il pomodoro/sole pieno mentre il primo piano si rivela a
   spicchio. Prima era un fill CSS diverso sull'SVG generato, ora un'immagine
   statica va invece smorzata via opacity+desaturazione (senza drop-shadow:
   un bagliore bianco qui sarebbe sempre visibile, essendo questo strato
   costantemente in vista dietro il primo piano — è quello che l'utente
   segnalava come "pixel bianchi" residui attorno al pomodoro/sole). */
.ft-tomato-bg img,
.ft-sun-bg img {
    opacity: 0.25;
    filter: grayscale(0.4);
}

.ft-tomato-fg {
    --ft-progress: 0deg;
    -webkit-mask-image: conic-gradient(black 0deg, black var(--ft-progress), transparent var(--ft-progress), transparent 360deg);
    mask-image: conic-gradient(black 0deg, black var(--ft-progress), transparent var(--ft-progress), transparent 360deg);
}

/* Sole pixel-art delle pause: stesso stile a quadratini del pomodoro, ma
   effetto opposto. Parte tutto visibile (mask piena) e una lancetta lo
   "cancella" a spicchio col trascorrere della pausa (mask che cresce nel
   verso trasparente invece che in quello opaco). */
.ft-relax {
    display: none;
    position: relative;
    width: 8rem;
    height: 8rem;
}

.ft-sun-bg,
.ft-sun-fg {
    position: absolute;
    inset: 0;
}

.ft-sun-bg img,
.ft-sun-fg img {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 6px rgba(255, 217, 61, 0.5));
}

.ft-sun-fg {
    --ft-sun-progress: 0deg;
    -webkit-mask-image: conic-gradient(transparent 0deg, transparent var(--ft-sun-progress), black var(--ft-sun-progress), black 360deg);
    mask-image: conic-gradient(transparent 0deg, transparent var(--ft-sun-progress), black var(--ft-sun-progress), black 360deg);
}

.ft-arcade.is-break .ft-tomato-wrap { display: none; }
.ft-arcade.is-break .ft-relax { display: block; }

.ft-timer {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--ft-yellow);
    text-shadow: 0 0 14px var(--ft-yellow), 0 0 2px #fff;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
}

.ft-controls {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-top: 1.2rem;
    flex-wrap: wrap;
}

.ft-btn {
    font-family: inherit;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    padding: 0.6rem 1rem;
    border-radius: 0.4rem;
    border: 2px solid var(--ft-cyan);
    background: rgba(56, 232, 255, 0.08);
    color: var(--ft-cyan);
    cursor: pointer;
    text-shadow: 0 0 6px var(--ft-cyan);
}

.ft-btn:hover { background: rgba(56, 232, 255, 0.2); }

/* Icona freccia circolare del pulsante "Riavvia" (vedi icons.php chiave
   'focus-timer-reset'): dimensione fissa indipendente dal font-size del
   pulsante, allineata al centro della riga di testo. */
.ft-btn-icon { display: inline-flex; width: 0.85rem; height: 0.85rem; vertical-align: -0.1rem; }
.ft-btn-icon svg { width: 100%; height: 100%; }

.ft-btn-primary {
    border-color: var(--ft-magenta);
    background: rgba(255, 54, 224, 0.1);
    color: var(--ft-magenta);
    text-shadow: 0 0 6px var(--ft-magenta);
}

.ft-btn-primary:hover { background: rgba(255, 54, 224, 0.22); }

.ft-hint {
    color: #fff;   /* bianco pieno e un po' più grande: sul fondo scuro il grigio non si leggeva bene */
    font-weight: 700;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.35);
    font-size: 0.95rem;
    margin: 0.6rem 0 0;
}

/* Icone di servizio (Impostazioni/Finestra compatta/Suoni), in basso a
   sinistra dello schermo arcade: niente testo, solo il simbolo, per lasciare
   Inizia/Riavvia come uniche azioni sotto il timer. */
.ft-corner-controls {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    display: flex;
    gap: 0.5rem;
}

.ft-icon-btn {
    width: 2.1rem;
    height: 2.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    border-radius: 50%;
    border: 2px solid var(--ft-cyan);
    background: rgba(56, 232, 255, 0.08);
    color: var(--ft-cyan);
    cursor: pointer;
    text-shadow: 0 0 6px var(--ft-cyan);
}

.ft-icon-btn:hover { background: rgba(56, 232, 255, 0.2); }
/* Icone SVG (uguali su ogni browser, al posto dei simboli di testo ⚙ ⏱ ↗ ♪ che cambiavano da un browser all'altro). */
.ft-icon-btn svg { display: block; width: 1.15rem; height: 1.15rem; filter: drop-shadow(0 0 3px currentColor); }
.ft-icon-btn.is-muted svg, .ft-arcade[data-ft-theme="light"] .ft-icon-btn svg { filter: none; }

.ft-icon-btn.is-muted {
    border-color: var(--ft-off);
    color: var(--ft-off);
    text-shadow: none;
}

.ft-icon-btn.is-active {
    border-color: var(--ft-magenta);
    color: var(--ft-magenta);
    background: rgba(255, 54, 224, 0.16);
    text-shadow: 0 0 6px var(--ft-magenta);
}

/* Nascondi tempo che passa: il testo del countdown sparisce e il
   pomodoro/sole occupa lo spazio liberato, ingrandito. */
.ft-arcade.ft-hide-time .ft-timer { display: none; }
.ft-arcade.ft-hide-time .ft-visual { height: 13rem; }
.ft-arcade.ft-hide-time .ft-tomato-wrap,
.ft-arcade.ft-hide-time .ft-relax { width: 12rem; height: 12rem; }

/* Griglia dei pomodori completati, in basso a destra: una riga per ogni
   set di cicli completato (larghezza dinamica, vedi settings.cycles in
   focus_timer.js), riempita dal basso verso l'alto (column-reverse fa sì
   che ogni nuova riga aggiunta in coda al DOM appaia sopra le precedenti).
   flex-wrap sulla riga fa da rete di sicurezza quando il numero di cicli
   impostato non entra in larghezza. */
.ft-stack {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    top: 1rem;
    width: 11rem;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 0.5rem;
    /* Negativo apposta: .ft-arcade ha ora uno z-index proprio (vedi sopra),
       quindi questo -1 resta contenuto lì dentro e non "buca" il resto della
       pagina — semplicemente la fila di pomodorini finisce dietro a tutto il
       resto del widget (testo, pulsanti, icone d'angolo) invece che sopra,
       per quando si sovrappongono su schermi stretti. */
    z-index: -1;
    pointer-events: none;
}

.ft-stack-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.ft-mini-tomato {
    /* Stessa dimensione dei tondini di Impostazioni/Finestra/Suoni (.ft-icon-btn, 2.1rem) in basso a sinistra. */
    width: 2.1rem;
    height: 2.1rem;
    filter: drop-shadow(0 0 3px rgba(255, 56, 96, 0.6));
}

.ft-settings {
    display: none;
    position: absolute;
    inset: 1.5rem;
    z-index: 2;
    background: rgba(5, 1, 12, 0.97);
    border: 2px solid var(--ft-cyan);
    border-radius: 0.75rem;
    padding: 1.5rem;
    font-family: 'Courier New', Courier, monospace;
    color: #fff;
    overflow-y: auto;
}

.ft-settings.is-open { display: block; }

.ft-settings h2 {
    color: var(--ft-cyan);
    font-size: 1rem;
    letter-spacing: 0.15em;
    margin: 0 0 1rem;
    text-shadow: 0 0 8px var(--ft-cyan);
}

.ft-settings label {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

.ft-settings input {
    display: block;
    margin-top: 0.35rem;
    width: 100%;
    max-width: 10rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.3rem;
    border: 1px solid var(--ft-cyan);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-family: inherit;
}

.ft-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1rem;
}

.ft-settings-status {
    color: var(--ft-green);
    font-size: 0.75rem;
    margin-top: 0.75rem;
    min-height: 1rem;
}

@media (max-width: 40rem) {
    .ft-stack { width: 8rem; }
    .ft-mini-tomato { width: 1.7rem; height: 1.7rem; }
}

/* =====================================================================
   Tema "Chiaro": stessa struttura del tema Arcade, colori pastello meno
   accesi al posto del neon su sfondo scuro. Molti valori del tema Arcade
   sono rgba hardcoded (non derivati dalle variabili --ft-*), quindi qui
   vanno ridichiarati esplicitamente e non basta sovrascrivere le variabili.
   ===================================================================== */
.ft-arcade[data-ft-theme="light"] {
    background: radial-gradient(ellipse at 50% -10%, #fff8f0 0%, #fdf1f6 55%, #f7ecf7 100%);
    --ft-red: #e4677d;
    --ft-green: #6fbf8b;
    --ft-yellow: #d99a33;
    --ft-orange: #c9702f;
    --ft-cyan: #3f8fac;
    --ft-magenta: #c26ba0;
    --ft-muted: rgba(60, 50, 70, 0.1);
    --ft-off: rgba(60, 50, 70, 0.35);
}
.ft-arcade[data-ft-theme="light"]::before { opacity: 0.4; mix-blend-mode: multiply; }
.ft-arcade[data-ft-theme="light"] .ft-phase,
.ft-arcade[data-ft-theme="light"] .ft-cycle,
.ft-arcade[data-ft-theme="light"] .ft-timer { text-shadow: none; }
.ft-arcade[data-ft-theme="light"] .ft-timer { color: #b3722f; }
/* Tema chiaro: «Ciclo 1/4» e il suggerimento della barra spaziatrice erano troppo chiari e sottili — colore più scuro e tratto più marcato. */
.ft-arcade[data-ft-theme="light"] .ft-hint { color: #7a6f85; font-weight: 600; text-shadow: none; }
.ft-arcade[data-ft-theme="light"] .ft-cycle { color: #8f2f6b; font-weight: 700; }
.ft-arcade[data-ft-theme="light"] .ft-tomato-bg img,
.ft-arcade[data-ft-theme="light"] .ft-tomato-fg img,
.ft-arcade[data-ft-theme="light"] .ft-sun-bg img,
.ft-arcade[data-ft-theme="light"] .ft-sun-fg img,
.ft-arcade[data-ft-theme="light"] .ft-mini-tomato {
    filter: drop-shadow(0 1px 2px rgba(60, 50, 70, 0.25));
}
.ft-arcade[data-ft-theme="light"] .ft-btn {
    background: rgba(63, 143, 172, 0.1);
    text-shadow: none;
}
.ft-arcade[data-ft-theme="light"] .ft-btn:hover { background: rgba(63, 143, 172, 0.22); }
.ft-arcade[data-ft-theme="light"] .ft-btn-primary {
    background: rgba(212, 122, 176, 0.14);
    text-shadow: none;
}
.ft-arcade[data-ft-theme="light"] .ft-btn-primary:hover { background: rgba(212, 122, 176, 0.26); }
.ft-arcade[data-ft-theme="light"] .ft-icon-btn {
    border-color: rgba(60, 50, 70, 0.3);
    background: rgba(60, 50, 70, 0.04);
    color: rgba(60, 50, 70, 0.7);
    text-shadow: none;
}
.ft-arcade[data-ft-theme="light"] .ft-icon-btn:hover { background: rgba(60, 50, 70, 0.1); }
.ft-arcade[data-ft-theme="light"] .ft-icon-btn.is-muted { color: var(--ft-off); border-color: var(--ft-off); }
.ft-arcade[data-ft-theme="light"] .ft-settings {
    background: rgba(255, 250, 245, 0.98);
    color: #443446;
    border-color: var(--ft-cyan);
}
/* Menu a tendina delle impostazioni: l'elenco aperto non eredita lo sfondo scuro (compariva testo chiaro su fondo bianco), quindi colori espliciti per le voci. */
.ft-settings select { color-scheme: dark; }
/* Tema neon: i menu a tendina avevano lo sfondo bianco del sito (style.css) invece di quello scuro del pannello — stesso aspetto dei campi numerici. */
.ft-arcade .ft-settings select {
    display: block;
    margin-top: 0.35rem;
    width: 100%;
    max-width: 16rem;
    padding: 0.4rem 2.2rem 0.4rem 0.5rem;
    border-radius: 0.3rem;
    border: 1px solid var(--ft-cyan);
    background-color: #1b1030;
    color: #fff;
    font-family: inherit;
    font-size: 0.85rem;
}
.ft-arcade .ft-settings select:focus { outline: 2px solid var(--ft-cyan); outline-offset: 1px; }
.ft-settings select option { background: #1e293b; color: #e2e8f0; }
.ft-arcade[data-ft-theme="light"] .ft-settings select { color-scheme: light; }
.ft-arcade[data-ft-theme="light"] .ft-settings select option { background: #fff; color: #443446; }
.ft-arcade[data-ft-theme="light"] .ft-settings h2 { text-shadow: none; }
.ft-arcade[data-ft-theme="light"] .ft-settings label { color: rgba(60, 50, 70, 0.85); }
.ft-arcade[data-ft-theme="light"] .ft-settings input,
.ft-arcade[data-ft-theme="light"] .ft-settings select {
    background: #fff;
    color: #443446;
    border-color: rgba(60, 50, 70, 0.3);
}

/* Pagina /focustimer a schermo intero (classe cs-fs su <html>, vedi focustimer.php): lo schermo del timer riempie tutto,
   con il proprio sfondo (scuro o chiaro a seconda del tema scelto), così non si vede il bianco del sito intorno. */
html.cs-fs .ft-arcade {
    position: fixed;
    inset: 0;
    z-index: 2000;
    min-height: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
}
html.cs-fs .ft-arcade .ft-screen { width: 100%; }

/* Sulla pagina pubblica il suggerimento è un <p> dentro .block-col: la regola generale «.block-col p {color:#444}» (e quella del tema Notte,
   grigio chiaro) vinceva su .ft-hint e il testo restava grigio scuro sul fondo scuro. Specificità più alta, così il colore del timer vale sempre. */
.ft-arcade .ft-screen .ft-hint { color: #8b8b97; font-weight: 600; text-shadow: none; }   /* grigio più scuro, ancora leggibile sul fondo scuro */
.ft-arcade[data-ft-theme="light"] .ft-screen .ft-hint { color: #7a6f85; }
.ft-arcade .ft-settings p, .ft-arcade .ft-settings-status { color: inherit; }