/* =====================================================================
   looney.css — la Home in stile Looney Tunes (versione 2.53, 06/10/2026)
   Dashboard (index.html) e Home dell'app (app.html); i disegni stanno in looney.js.
   ===================================================================== */

/* ===== Ore non caricate da piu' di una settimana: la dashboard va a fuoco =====
   Come la festa: classe .giorno-terrore sul <body>, solo in questa pagina e solo sullo
   schermo di chi non ha caricato le ore. Stile Looney Tunes: cerchi concentrici rossi
   che pulsano dietro la pagina, scritta gonfia col rilievo, dinamite con la miccia accesa,
   cartello di legno e fiamme coi musi arrabbiati. Tutto quello che si muove sta sopra la
   pagina ma non prende i click (pointer-events: none): la pagina resta usabile, solo
   scomoda. Batte la festa: se coincidono, prima le ore. */
body.giorno-terrore { background: #B3121A; }
.terrore-anelli { position: fixed; left: 50%; top: 290px; width: 3200px; height: 3200px; margin: -1600px 0 0 -1600px;
    pointer-events: none; z-index: -1; border-radius: 50%;
    background: repeating-radial-gradient(circle, #F4511E 0 70px, #E53935 70px 140px, #C62828 140px 210px, #E53935 210px 280px); }
body.giorno-terrore .header { background: #1A0A00; border-bottom: 4px solid #000; }
body.giorno-terrore .search-bar { background: #3A0D00; }
body.giorno-terrore .search-bar-input { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.20); }
body.giorno-terrore .search-bar-input::placeholder { color: rgba(255, 255, 255, 0.75); }
body.giorno-terrore .welcome-greeting { color: #FFD400; -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; text-shadow: 3px 3px 0 #000; }
body.giorno-terrore .welcome-date, body.giorno-terrore .aforisma, body.giorno-terrore .aforisma-autore { color: #fff; text-shadow: 1px 1px 0 #000; }
body.giorno-terrore .kpi-card { border: 3px solid #000; box-shadow: 5px 5px 0 #000; }
body.giorno-terrore .kpi-card.highlight { background: #FF6D00; }
body.giorno-terrore .quick-action-btn { border: 3px solid #000 !important; box-shadow: 4px 4px 0 #000; }
body.giorno-terrore .quick-action-btn.primary { background: #FFD400; color: #000; }
body.giorno-terrore .list-title { color: #B71C1C; }
/* Il cartello del titolo: carta color crema, bordo nero spesso, ombra piena, un po' storto */
.terrore-banner { position: relative; margin: 10px 10px 40px; padding: 34px 30px 26px; border-radius: 28px; text-align: center;
    background: radial-gradient(ellipse at 50% 40%, #FFFBE6 0%, #FFF1B8 70%, #FFE082 100%);
    border: 6px solid #000; box-shadow: 12px 12px 0 #000; transform: rotate(-1.2deg); }
.terrore-titolo { font-family: 'Cooper Black', 'Cooper Std', 'Arial Rounded MT Bold', 'Arial Black', sans-serif;
    font-size: clamp(32px, 5vw, 76px); line-height: 1.12; letter-spacing: 0.01em; text-transform: uppercase; color: #FFD400;
    -webkit-text-stroke: 3px #000; paint-order: stroke fill;
    /* il rilievo dei titoli dei cartoni: strati rossi uno dietro l'altro, poi il nero */
    text-shadow: 1px 1px 0 #D50000, 2px 2px 0 #D50000, 3px 3px 0 #D50000, 4px 4px 0 #D50000, 5px 5px 0 #D50000, 6px 6px 0 #D50000, 8px 8px 0 #000; }
.terrore-titolo .parola { display: inline-block; margin: 0 0.12em; }
.terrore-titolo .parola.rossa { color: #FF3D00; }
.terrore-dinamite { position: absolute; left: -46px; top: -58px; width: 96px; height: 108px; transform: rotate(-14deg); z-index: 2; }
/* il cartello di legno inchiodato */
.terrore-sotto { position: relative; display: inline-block; margin-top: 18px; padding: 10px 26px; color: #FFF8E1;
    background: repeating-linear-gradient(176deg, #8D5524 0 7px, #7B4A1E 7px 9px, #94602C 9px 16px);
    border: 3px solid #000; border-radius: 8px; box-shadow: 4px 4px 0 #000; transform: rotate(-2deg);
    font-family: 'Cooper Black', 'Arial Rounded MT Bold', sans-serif; font-size: 18px; text-shadow: 2px 2px 0 #3E2100; }
.terrore-sotto::before, .terrore-sotto::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px;
    border-radius: 50%; background: #BDBDBD; border: 2px solid #000; }
.terrore-sotto::before { left: 8px; }
.terrore-sotto::after { right: 8px; }
.terrore-azione { display: inline-block; margin-top: 18px; margin-left: 16px; padding: 11px 28px; border-radius: 9999px; background: #E53935;
    color: #FFD400 !important; font-family: 'Cooper Black', 'Arial Rounded MT Bold', 'Arial Black', sans-serif; font-size: 20px;
    text-decoration: none; text-transform: uppercase; -webkit-text-stroke: 1px #000; paint-order: stroke fill;
    border: 3px solid #000; box-shadow: 5px 5px 0 #000; transition: transform 0.12s cubic-bezier(.3, 1.8, .5, 1), box-shadow 0.12s; }
.terrore-azione:hover { transform: scale(1.08) rotate(-2deg); box-shadow: 7px 7px 0 #000; }
.terrore-azione:active { transform: translate(4px, 4px); box-shadow: 1px 1px 0 #000; }
/* il saluto di Porky Pig, in corsivo */
.terrore-firma { margin-top: 14px; font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 30px; color: #C62828; }
.terrore-fiamme { position: fixed; inset: 0; pointer-events: none; z-index: 900; overflow: hidden; }
.terrore-fiamme svg { position: absolute; display: block; overflow: visible; }
.terrore-fiamme .fondo { bottom: -18px; transform-origin: 50% 100%; }
.terrore-fiamme .lato { transform-origin: 50% 100%; }
.terrore-fiamme .brace { bottom: -40px; opacity: 0; }
.terrore-bagliore { position: fixed; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none; z-index: 899;
    background: linear-gradient(0deg, #FF6D00 0%, rgba(255, 109, 0, 0.5) 45%, rgba(255, 109, 0, 0) 100%); }
@media (prefers-reduced-motion: no-preference) {
    .terrore-anelli { animation: terroreAnelli 1.4s ease-in-out infinite alternate; }
    .terrore-fiamme .fondo, .terrore-fiamme .lato { animation: terroreBoing 0.5s cubic-bezier(.4, 1.6, .6, 1) infinite alternate; }
    .terrore-fiamme .brace { animation: terroreSale 6s ease-in infinite; }
    .terrore-titolo .parola { animation: terroreGomma 1.1s ease-in-out infinite; }
    .terrore-banner { animation: terroreScossa 2.6s ease-in-out infinite; }
    .terrore-dinamite { animation: terroreDinamite 0.3s ease-in-out infinite alternate; }
    .terrore-scintilla { animation: terroreScintilla 0.18s steps(2, jump-none) infinite alternate; transform-origin: 70px 10px; }
}
@keyframes terroreAnelli { 0% { transform: scale(1); } 100% { transform: scale(1.12); } }
/* squash & stretch col rimbalzo elastico */
@keyframes terroreBoing { 0% { transform: scale(1.1, 0.88); } 100% { transform: scale(0.92, 1.15) rotate(3deg); } }
@keyframes terroreSale { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 8% { opacity: 1; }
    25% { transform: translate(18px, -25vh) scale(0.9) rotate(10deg); } 50% { transform: translate(-16px, -55vh) scale(0.75) rotate(-10deg); }
    75% { transform: translate(14px, -80vh) scale(0.55) rotate(8deg); opacity: 0.9; } 100% { transform: translate(0, -112vh) scale(0.3); opacity: 0; } }
/* parole di gomma: si allungano e si schiacciano a turno */
@keyframes terroreGomma { 0%, 100% { transform: translateY(0) scale(1, 1) rotate(0); } 25% { transform: translateY(-8px) scale(0.94, 1.1) rotate(-3deg); }
    50% { transform: translateY(0) scale(1.08, 0.9) rotate(0); } 75% { transform: translateY(-3px) scale(1, 1.03) rotate(2deg); } }
@keyframes terroreScossa { 0%, 86%, 100% { transform: rotate(-1.2deg); } 88% { transform: rotate(-3deg) scale(1.02); } 90% { transform: rotate(1deg) scale(1.02); } 92% { transform: rotate(-2.5deg); } 94% { transform: rotate(0.5deg); } }
@keyframes terroreDinamite { 0% { transform: rotate(-17deg); } 100% { transform: rotate(-11deg); } }
@keyframes terroreScintilla { 0% { transform: scale(0.8) rotate(0); } 100% { transform: scale(1.25) rotate(25deg); } }
@media (max-width: 640px) { .terrore-banner { padding: 26px 14px 20px; box-shadow: 6px 6px 0 #000; } .terrore-titolo { -webkit-text-stroke: 2px #000; }
    .terrore-sotto { font-size: 14px; } .terrore-azione { margin-left: 0; } .terrore-dinamite { left: -14px; top: -40px; width: 64px; height: 72px; } }
html.dark-mode .terrore-banner, html.dark-mode .terrore-fiamme, html.dark-mode .terrore-bagliore, html.dark-mode .terrore-anelli { filter: invert(1) hue-rotate(180deg); }
/* ===== Compleanni e feste dello studio in stile Looney Tunes =====
   Stesso cartello, stessa scritta gonfia e stessi cerchi della dashboard a fuoco, ma con
   i colori della tavolozza del giorno: palloncini che salgono, coriandoli che scendono,
   la torta con le candeline (compleanno) o la bottiglia che stappa (evento). */
.festa-anelli { position: fixed; left: 50%; top: 290px; width: 3200px; height: 3200px; margin: -1600px 0 0 -1600px;
    pointer-events: none; z-index: -1; border-radius: 50%;
    background: repeating-radial-gradient(circle, var(--anello-1) 0 70px, var(--anello-2) 70px 140px, var(--anello-3) 140px 210px, var(--anello-2) 210px 280px); }
body.festa-looney .welcome-greeting { color: #FFD400; -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; text-shadow: 3px 3px 0 #000; }
body.festa-looney .welcome-date, body.festa-looney .aforisma, body.festa-looney .aforisma-autore { color: #fff; text-shadow: 1px 1px 0 #000; }
body.festa-looney .kpi-card { border: 3px solid #000; box-shadow: 5px 5px 0 #000; }
body.festa-looney .quick-action-btn { border: 3px solid #000 !important; box-shadow: 4px 4px 0 #000; }
.looney-cartello { position: relative; margin: 10px 10px 40px; padding: 34px 30px 26px; border-radius: 28px; text-align: center;
    background: radial-gradient(ellipse at 50% 40%, #FFFBE6 0%, #FFF1B8 70%, #FFE082 100%);
    border: 6px solid #000; box-shadow: 12px 12px 0 #000; transform: rotate(-1.2deg); }
.looney-titolo { font-family: 'Cooper Black', 'Cooper Std', 'Arial Rounded MT Bold', 'Arial Black', sans-serif;
    font-size: clamp(30px, 4.3vw, 72px); line-height: 1.12; text-transform: uppercase; color: #FFD400;
    -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.looney-titolo .parola { display: inline-block; margin: 0 0.12em; }
.looney-titolo .parola.nome { color: #fff; }
.looney-sotto { position: relative; display: inline-block; margin-top: 18px; padding: 10px 26px; color: #FFF8E1;
    background: repeating-linear-gradient(176deg, #8D5524 0 7px, #7B4A1E 7px 9px, #94602C 9px 16px);
    border: 3px solid #000; border-radius: 8px; box-shadow: 4px 4px 0 #000; transform: rotate(-2deg);
    font-family: 'Cooper Black', 'Arial Rounded MT Bold', sans-serif; font-size: 18px; text-shadow: 2px 2px 0 #3E2100; }
.looney-sotto::before, .looney-sotto::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px;
    border-radius: 50%; background: #BDBDBD; border: 2px solid #000; }
.looney-sotto::before { left: 8px; }
.looney-sotto::after { right: 8px; }
.looney-evento { margin-top: 10px; font-family: 'Cooper Black', 'Arial Rounded MT Bold', sans-serif; font-size: 16px; color: #3E2100; }
.looney-firma { margin-top: 14px; font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 30px; }
.looney-oggetto { position: absolute; left: -50px; top: -66px; width: 104px; height: 116px; transform: rotate(-10deg); z-index: 2; }
.festa-scena { position: fixed; inset: 0; pointer-events: none; z-index: 900; overflow: hidden; }
.festa-scena svg { position: absolute; display: block; overflow: visible; }
.festa-scena .palloncino { bottom: -160px; }
.festa-scena .coriandolo { top: -30px; }
@media (prefers-reduced-motion: no-preference) {
    .festa-anelli { animation: terroreAnelli 1.6s ease-in-out infinite alternate; }
    .looney-titolo .parola { animation: terroreGomma 1.1s ease-in-out infinite; }
    .looney-cartello { animation: festaDondola 3s ease-in-out infinite; }
    .looney-oggetto { animation: terroreDinamite 0.5s ease-in-out infinite alternate; }
    .festa-scena .palloncino { animation: festaSalePalloncino 11s linear infinite; }
    .festa-scena .coriandolo { animation: festaCadeCoriandolo 6s linear infinite; }
    .looney-fiammella { animation: terroreBoing 0.35s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
    .looney-tappo { animation: festaTappo 1.8s cubic-bezier(.3, 1.6, .5, 1) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
}
@keyframes festaDondola { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(0.8deg) translateY(-3px); } }
@keyframes festaSalePalloncino { 0% { transform: translate(0, 0) rotate(-4deg); } 25% { transform: translate(22px, -30vh) rotate(4deg); }
    50% { transform: translate(-14px, -60vh) rotate(-4deg); } 75% { transform: translate(18px, -90vh) rotate(4deg); } 100% { transform: translate(0, -125vh) rotate(-4deg); } }
@keyframes festaCadeCoriandolo { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(30px, 55vh) rotate(360deg); } 100% { transform: translate(-10px, 112vh) rotate(720deg); } }
@keyframes festaTappo { 0%, 40% { transform: translateY(0) rotate(0); } 55% { transform: translateY(-34px) rotate(30deg); } 75%, 100% { transform: translateY(0) rotate(0); } }
@media (max-width: 640px) { .looney-cartello { padding: 26px 14px 20px; box-shadow: 6px 6px 0 #000; } .looney-titolo { -webkit-text-stroke: 2px #000; }
    .looney-sotto { font-size: 14px; } .looney-oggetto { left: -14px; top: -44px; width: 66px; height: 74px; } }
html.dark-mode .looney-cartello, html.dark-mode .festa-scena, html.dark-mode .festa-anelli { filter: invert(1) hue-rotate(180deg); }

/* Nell'app (app.html) le scritte sopra ai cerchi: titolo giallo col contorno, il resto bianco */
body.giorno-terrore .m-page-title, body.festa-looney .m-page-title { color: #FFD400; -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; text-shadow: 2px 2px 0 #000; }
body.giorno-terrore .m-page-sub, body.festa-looney .m-page-sub,
body.giorno-terrore .m-section-title, body.festa-looney .m-section-title { color: #fff; text-shadow: 1px 1px 0 #000; }
/* le fiamme coi musi sbattono le palpebre */
@media (prefers-reduced-motion: no-preference) {
    .terrore-fiamme .occhi { animation: terroreSbatte 3.2s infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes terroreSbatte { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }

/* Telefono: la scritta piu' piccola e piu' ariosa (sennò le parole col rilievo si
   accavallano) e le fiamme del fondo sopra la barra di navigazione dell'app, che deve
   restare visibile. --m-bottomnav esiste solo nell'app: sulla dashboard vale 0. */
.terrore-fiamme .fondo { bottom: calc(var(--m-bottomnav, 0px) + var(--m-safe-bottom, 0px) - 18px); }
.terrore-bagliore { bottom: calc(var(--m-bottomnav, 0px) + var(--m-safe-bottom, 0px)); }
@media (max-width: 640px) {
    .terrore-titolo, .looney-titolo { font-size: 27px; line-height: 1.3; }
    .terrore-titolo { text-shadow: 1px 1px 0 #D50000, 2px 2px 0 #D50000, 3px 3px 0 #D50000, 5px 5px 0 #000; }
    .terrore-titolo .parola, .looney-titolo .parola { margin: 0 0.2em; }
    .terrore-azione { font-size: 16px; padding: 10px 18px; }
    .terrore-firma, .looney-firma { font-size: 24px; }
    .terrore-fiamme .fondo { width: 54px !important; height: 72px !important; }
}

/* I cerchi stanno dietro alla pagina (z-index -1): il <body> deve essere trasparente,
   altrimenti nell'app — dove anche <html> ha il suo fondo — il fondo del body li copre. */
body.giorno-terrore, body.festa-looney, body.giorno-festa.festa-looney { background: transparent; }
/* mobile.css limita tutto a max-width: 100%, che ridurrebbe i cerchi alla larghezza del telefono */
.terrore-anelli, .festa-anelli { max-width: none !important; }
/* il saluto della dashboard: vince sul colore della tavolozza messo da index.html */
body.giorno-festa.festa-looney .welcome-greeting { color: #FFD400; }