/* Cifre sempre allineate: Fraunces lo fa già, ma se il font non si carica
     il ripiego Georgia mette 3, 4, 5, 7, 9 sotto la riga (cifre "all'antica") */
  html{font-variant-numeric:lining-nums}
  /* Font auto-ospitati (non più dal CDN di Google): stessi identici file che Google
     serviva prima, scaricati una volta sola e serviti da questo sito - nessuna
     richiesta ai server di Google ad ogni visita, coerente con l'informativa
     "Privacy e dati" del footer. Fraunces con asse SOFT=100 già incorporato nel
     file: la versione "morbida" del font, arrotondata e onirica - la ragione per
     cui è stato scelto per questo brand.
     Per rigenerare/aggiornare questi file: vedi docs/roadmap.md, Fase 2. */
  @font-face{font-family:'Fraunces';font-style:normal;font-weight:500 800;font-display:swap;src:url('/fonts/fraunces-roman.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  @font-face{font-family:'Fraunces';font-style:italic;font-weight:500 600;font-display:swap;src:url('/fonts/fraunces-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  @font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/plusjakartasans-roman.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  @font-face{font-family:'Plus Jakarta Sans';font-style:italic;font-weight:500;font-display:swap;src:url('/fonts/plusjakartasans-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  /* Cielo notturno napoletano: un'unica identità scura, senza variante chiara - niente crema/beige da
     nessuna parte, coerente con la scena stellata su tutto il sito. Oro antico + rosso corniciello + viola
     notte. Tipografia di settore: Fraunces (titoli, serif oniriche/mistiche) + Plus Jakarta Sans (corpo). */
  :root{
    --bg1:#170f20; --bg2:#241a34; --bg3:#1d1428;
    --card:#2a1f3ccc; --card-solid:#2a1f3c; --card-border:#4a3a5c;
    --gold:#c9a227; --gold2:#e8c468; --gold-ink:#e8c468;
    --red:#d95d42; --red2:#f0836a;
    --text:#f4ecdf; --muted:#b2a1b6;
    --text-hero:#fbf6ec; --muted-hero:#c7bcd6;
    --pos:#8fb86e; --neg:#d97557; --amb:#d6a24e; --neu:#a18fc7;
    --radius:16px; --radius-sm:10px;
    --shadow: 0 10px 30px rgba(13,8,18,.5);
    --font-display:'Fraunces', Georgia, serif;
    --font-body:'Plus Jakarta Sans','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    /* Scala tipografica unica per tutto il sito (anche guida e articoli):
       ogni testo usa uno di questi valori, niente misure "a occhio".
       12 etichette · 14 testo secondario · 16 testo da leggere · 18 titoletti
       24 · 28 titoli · 32 · 43 titolo della home. Le emoji-icona hanno misure
       proprie: sono disegni, non testo. Vedi tests/e2e/tipografia.spec.mjs */
    --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem;
    --fs-xl:1.5rem; --fs-2xl:1.75rem; --fs-3xl:2rem; --fs-4xl:2.7rem;
  }
  *{box-sizing:border-box}
  /* clip e non hidden: taglia lo sforamento orizzontale dei banner a 100vw
     senza trasformare html/body in contenitori di scorrimento, che impedivano
     all'header (e all'indice A-Z) di restare in alto. hidden resta come
     ripiego per i browser che non conoscono clip. */
  html,body{overflow-x:hidden;overflow-x:clip}
  html,body{margin:0;padding:0}
  body{
    min-height:100vh;
    font-family:var(--font-body);
    color:var(--text);
    background:
      radial-gradient(ellipse at 15% -5%, #d95d4222 0%, transparent 50%),
      radial-gradient(ellipse at 85% 8%, #c9a22726 0%, transparent 55%),
      linear-gradient(180deg,var(--bg1),var(--bg2) 55%,var(--bg3));
    padding-bottom:60px;
    position:relative;
  }
  body::before{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  }
  body::after{
    content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
    background-image:
      radial-gradient(1.4px 1.4px at 8% 12%, #fff, transparent),
      radial-gradient(1px 1px at 22% 48%, #fff, transparent),
      radial-gradient(1.6px 1.6px at 35% 8%, #fff, transparent),
      radial-gradient(1.1px 1.1px at 48% 62%, #fff, transparent),
      radial-gradient(1.3px 1.3px at 62% 22%, #fff, transparent),
      radial-gradient(1px 1px at 75% 52%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 88% 18%, #fff, transparent),
      radial-gradient(1.2px 1.2px at 14% 78%, #fff, transparent),
      radial-gradient(1px 1px at 58% 85%, #fff, transparent),
      radial-gradient(1.4px 1.4px at 92% 70%, #fff, transparent);
    background-repeat:repeat;background-size:320px 320px;
    animation:starTwinkle 4.5s ease-in-out infinite alternate;
  }
  @media (prefers-reduced-motion: reduce){ body::after{animation:none} }
  .site-header, .wrap, footer{position:relative;z-index:1}
  .wrap{max-width:860px;margin:0 auto;padding:0 16px}
  a{color:var(--gold)}

  /* ---------- Header del sito: menu in alto, sticky - come un sito vero, non un'app ---------- */
  .site-header{
    position:sticky;top:0;z-index:30;
    background:var(--card);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
    border-bottom:1px solid var(--card-border);
  }
  .site-header-inner{
    position:relative;max-width:1000px;margin:0 auto;padding:14px 20px;
    display:flex;align-items:center;gap:24px;
  }
  .brand{
    display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);
    background:none;border:none;box-shadow:none;color:var(--text);cursor:pointer;flex:none;transform:none;
    /* area di tocco alta 44px senza allargare l'intestazione (30/09/2026: era 20px) */
    padding:12px 0;margin:-12px 0;
  }
  .brand:hover{transform:none;box-shadow:none}
  .brand-moon{
    width:23px;height:23px;flex:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='white'/%3E%3Ccircle cx='63' cy='37' r='33' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='42' fill='%23e8c468' mask='url(%23m)'/%3E%3C/svg%3E") no-repeat center/contain;
    filter:drop-shadow(0 0 5px #c9a22766);
  }
  .site-nav{display:flex;align-items:center;justify-content:center;gap:2px;flex:1}
  .nav-link{
    background:none;border:none;box-shadow:none;color:var(--muted);
    font-family:inherit;font-weight:700;font-size:var(--fs-sm);padding:9px 12px;border-radius:9px;
    cursor:pointer;transform:none;position:relative;white-space:nowrap;
  }
  .nav-link:hover{transform:none;background:var(--bg1);color:var(--text)}
  .nav-link.active{color:var(--gold-ink)}
  /* Accesso ai consigli del Genio dal menu: solo su mobile, dove il Genio
     vagante spesso non trova spazio libero e resta nascosto */
  .nav-genie{display:none}
  .site-header-actions{display:flex;align-items:center;gap:10px;flex:none}
  .icon-btn{
    position:relative;
    background:var(--card);border:1px solid var(--card-border);color:var(--text);
    width:36px;height:36px;border-radius:50%;font-size:.95rem;
    display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
    box-shadow:none;transition:transform .12s ease, background .15s ease;
  }
  .icon-btn:hover{transform:translateY(-1px);background:var(--card-solid)}
  .icon-btn .ico{margin:0;width:18px;height:18px}
  /* Area di tocco da 44px (misura consigliata per il pollice) senza ingrandire il cerchio */
  .icon-btn::before{content:"";position:absolute;inset:-5px;border-radius:50%}
  .nav-burger{display:none;font-size:1.1rem}
  .live-dot{
    position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-radius:50%;
    background:var(--pos);
    /* l'alone che si allarga resta solo disegno: senza, contava come ingombro
       e allargava la voce "Ruota" del menu (stesso aspetto, verificato al pixel) */
    contain:layout;
  }
  /* L'alone che "respira": un cerchio dello stesso verde che si allarga fino a
     7px oltre il puntino (9px -> 23px) e sfuma. Prima era un box-shadow
     animato, ridisegnato a ogni fotogramma dal processore principale (~50ms
     ogni secondo a pagina ferma, 30/09/2026); scala e trasparenza le anima il
     processore grafico. Stesso verde del puntino: sopra di esso non si vede. */
  .live-dot::after{
    content:"";position:absolute;inset:0;border-radius:50%;background:#8fb86e80;
    animation:respira 2s ease-out infinite;
  }
  @keyframes respira{0%{transform:scale(1);opacity:1}70%{transform:scale(2.5556);opacity:0}100%{transform:scale(1);opacity:0}}
  @media (prefers-reduced-motion: reduce){ .live-dot::after{animation:none;opacity:0} }
  .shimmer{position:relative;overflow:hidden}
  .shimmer::after{
    content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
    background:linear-gradient(120deg, transparent, #ffffffaa, transparent);
    transform:skewX(-20deg);
    animation:shimmerSweep 3.2s 1s infinite;
  }
  @keyframes shimmerSweep{0%{left:-60%}35%{left:130%}100%{left:130%}}
  @media (prefers-reduced-motion: reduce){ .shimmer::after{animation:none} }

  @media (max-width:760px){
    .site-nav{
      position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;justify-content:flex-start;
      background:var(--card-solid);border-bottom:1px solid var(--card-border);
      padding:8px 16px 14px;gap:2px;box-shadow:0 12px 20px rgba(0,0,0,.08);
      display:none;
    }
    .site-nav.open{display:flex}
    .nav-link{text-align:left;padding:12px 10px}
    .nav-genie{display:block;border-top:1px solid var(--card-border);border-radius:0;margin-top:4px;padding-top:14px;color:var(--gold-ink)}
    /* Nel menu a tutta larghezza il pallino "da girare" sta accanto alla parola, non in fondo alla riga */
    .nav-link .live-dot{position:relative;top:auto;right:auto;display:inline-block;margin-left:8px;vertical-align:middle}
    .nav-burger{display:flex;flex:none}
    /* Testata compatta: logo/nome ridotti e badge stretto, così il bottone ☰
       resta sempre dentro lo schermo anche con "✨ Attivo" e viewport da 320px */
    .site-header-inner{padding:10px 12px;gap:10px}
    .brand{font-size:var(--fs-md);gap:7px;min-width:0;flex:0 1 auto} /* la regola base ha flex:none: qui deve potersi restringere */
    .brand > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .brand-moon{width:19px;height:19px}
    .site-header-actions{gap:8px;margin-left:auto}
  }

  /* ---------- Funnel ---------- */
  .funnel-step{animation:cardIn .4s ease both}
  /* il responso non parte attaccato al menu: sopra il primo riquadro lo stesso
     spazio che c'è tra i riquadri (.card margin-bottom), richiesta del 05/10/2026 */
  #stepResults{padding-top:20px}
  .screen{animation:cardIn .35s ease both}
  /* riquadro per scrivere il sogno, subito sotto la domanda della home */
  .home-write{margin:28px 0 26px}
  /* subito dopo un cambio di passo i tocchi non passano (vedi guardStepChange) */
  body.passo-in-cambio #main, body.passo-in-cambio footer{pointer-events:none}
  .tile-grid{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:12px;margin-top:30px;
  }
  /* Esempi su due righe che scorrono di lato: 5 colonne visibili su computer,
     3,4 su tablet, 2,4 su telefono (la colonna tagliata invita a scorrere) */
  .hook-examples{margin-top:24px}
  .hook-examples-title{
    margin:0 0 10px;text-align:center;font-size:var(--fs-xs);font-weight:800;
    letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);
  }
  .hook-scroller{position:relative}
  #hookTiles{
    margin:0 -4px;padding:6px 4px 8px;
    /* due righe della stessa altezza: con "auto" la riga con un'etichetta su
       due righe ("Un morto che parla") veniva più alta dell'altra */
    grid-template-columns:none;grid-template-rows:repeat(2,1fr);grid-auto-flow:column;
    grid-auto-columns:calc((100% - 4 * 12px) / 5);
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 4px;
    scrollbar-width:none;
  }
  #hookTiles::-webkit-scrollbar{display:none}
  #hookTiles .tile{scroll-snap-align:start;padding:16px 8px;gap:8px}
  #hookTiles .tile .tile-icon{width:46px;height:46px;font-size:1.45rem}
  @media (max-width:760px){ #hookTiles{grid-auto-columns:calc((100% - 3 * 12px) / 3.4)} }
  @media (max-width:520px){ #hookTiles{gap:10px;grid-auto-columns:calc((100% - 2 * 10px) / 2.6)} #hookTiles .tile{padding:14px 8px} }
  /* Frecce solo con il mouse e da 900px, dove c'è margine ai lati (sul
     telefono si scorre col dito) */
  .hook-arrow{display:none}
  @media (hover:hover) and (pointer:fine) and (min-width:900px){
    .hook-arrow{
      display:flex;position:absolute;top:50%;z-index:2;width:40px;height:40px;margin-top:-20px;padding:0;
      align-items:center;justify-content:center;border-radius:50%;
      background:var(--card-solid);border:1px solid var(--card-border);color:var(--gold2);box-shadow:var(--shadow);
    }
    .hook-arrow::before{
      content:"";width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
    }
    .hook-prev{left:-20px} .hook-prev::before{transform:rotate(135deg);margin-left:4px}
    .hook-next{right:-20px} .hook-next::before{transform:rotate(-45deg);margin-right:4px}
    .hook-arrow:hover{border-color:var(--gold);transform:none}
    .hook-arrow[disabled]{opacity:0;pointer-events:none}
  }
  /* ---------- Home: domande frequenti ---------- */
  .home-faq{max-width:760px;margin:64px auto 8px;text-align:center}
  .home-faq .eyebrow{margin-bottom:8px}
  .home-faq h2{
    font-family:var(--font-display);color:var(--text-hero);font-size:var(--fs-2xl);font-weight:800;
    line-height:1.15;margin:0 0 24px;text-wrap:balance;
  }
  .home-faq h2 em{font-style:italic;font-weight:600;color:#e8c468}
  .home-faq details{
    text-align:left;background:var(--card);border:1px solid var(--card-border);border-radius:16px;
    margin-bottom:10px;transition:border-color .15s ease;
  }
  .home-faq details[open]{border-color:#c9a22766}
  .home-faq summary{
    list-style:none;cursor:pointer;position:relative;padding:18px 54px 18px 20px;
    font-weight:700;font-size:var(--fs-md);color:var(--text);line-height:1.4;border-radius:16px;
  }
  .home-faq summary::-webkit-details-marker{display:none}
  .home-faq summary::after{
    content:"";position:absolute;right:22px;top:50%;width:9px;height:9px;margin-top:-7px;
    border-right:2px solid var(--gold2);border-bottom:2px solid var(--gold2);transform:rotate(45deg);
    transition:transform .2s ease, margin-top .2s ease;
  }
  .home-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
  .home-faq summary:hover{color:var(--text-hero)}
  .home-faq summary:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px}
  .home-faq .faq-more{margin:18px 0 0;color:var(--muted);font-size:var(--fs-sm)}
  .home-faq .faq-more a{color:var(--gold2);font-weight:700;text-decoration:none}
  .home-faq .faq-more a:hover{text-decoration:underline}
  /* su telefono il link va su una riga sua, sotto la domanda */
  @media (max-width:600px){ .home-faq .faq-more a{display:block;margin-top:4px} }
  .home-faq details p{margin:0;padding:0 20px 18px;color:var(--muted);font-size:var(--fs-md);line-height:1.6}
  @media (prefers-reduced-motion: reduce){ .home-faq summary::after{transition:none} }
  @media (max-width:760px){ .home-faq{margin-top:48px} .home-faq h2{font-size:var(--fs-xl)} }
  /* ---------- Home: come funziona ---------- */
  /* Desktop: testo e pulsante a sinistra, anteprima a destra. Telefono:
     testo, anteprima, pulsante (si vede la card prima di agire). */
  .home-how{
    display:grid;grid-template-columns:1.15fr .85fr;column-gap:40px;row-gap:28px;align-items:center;
    grid-template-areas:"text preview" "cta preview";
    margin:64px 0 8px;padding:40px 36px;border-radius:var(--radius);
    background:radial-gradient(ellipse at 85% 40%, #c9a2271f, transparent 60%), var(--card);
    border:1px solid var(--card-border);
  }
  .how-text .eyebrow{margin-bottom:8px}
  .home-how h2{
    font-family:var(--font-display);color:var(--text-hero);font-size:var(--fs-2xl);font-weight:800;
    line-height:1.15;margin:0 0 26px;text-wrap:balance;
  }
  .home-how h2 em{font-style:italic;font-weight:600;color:#e8c468}
  .how-steps{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:20px}
  .how-steps li{display:flex;gap:16px;align-items:flex-start}
  .how-num{
    flex:none;font-family:var(--font-display);font-weight:800;font-size:var(--fs-lg);color:#231a00;
    width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--gold2),var(--gold));box-shadow:0 0 18px #c9a22740;
  }
  .how-steps h3{font-family:var(--font-display);font-size:var(--fs-lg);margin:2px 0 4px;color:var(--text-hero)}
  .how-steps p{margin:0;color:var(--muted);font-size:var(--fs-md);line-height:1.55}
  .how-text{grid-area:text}
  .how-cta{grid-area:cta;justify-self:start;align-self:start;padding:14px 26px;font-size:var(--fs-md)}
  .how-preview{grid-area:preview;margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
  .how-steps{margin-bottom:0}
  .how-phone{
    width:min(250px, 64vw);padding:9px;border-radius:34px;background:#0b0812;
    border:1px solid var(--card-border);transform:rotate(3deg);
    box-shadow:0 30px 60px rgba(0,0,0,.45), 0 0 70px #c9a22730;
  }
  .how-phone img{display:block;width:100%;height:auto;border-radius:26px}
  /* centrata anche quando va a capo (telefono): righe bilanciate sotto la card */
  .how-preview figcaption{font-size:var(--fs-sm);color:var(--muted);font-weight:600;text-align:center;text-wrap:balance}
  @media (max-width:760px){
    .home-how{grid-template-columns:1fr;grid-template-areas:"text" "preview" "cta";row-gap:30px;margin-top:48px;padding:30px 20px;text-align:left}
    .home-how h2{font-size:var(--fs-xl)}
    .how-cta{width:100%;justify-self:stretch}
  }
  .tile{
    background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);
    padding:24px 14px;text-align:center;cursor:pointer;font-family:inherit;color:var(--text);
    display:flex;flex-direction:column;align-items:center;gap:10px;
    box-shadow:none;transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    animation:cardIn .45s ease both;
  }
  .tile:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow)}
  .tile .tile-icon{
    width:58px;height:58px;border-radius:50%;flex:none;
    background:linear-gradient(135deg, var(--bg2), var(--bg3));
    border:1px solid var(--card-border);
    display:flex;align-items:center;justify-content:center;
    font-size:1.85rem;line-height:1;
  }
  .tile span:last-child{font-weight:700;font-size:var(--fs-sm)}
  /* Ingresso scaglionato delle tessere: 30ms l'una dall'altra */
  .tile:nth-child(1){animation-delay:.03s} .tile:nth-child(2){animation-delay:.06s}
  .tile:nth-child(3){animation-delay:.09s} .tile:nth-child(4){animation-delay:.12s}
  .tile:nth-child(5){animation-delay:.15s} .tile:nth-child(6){animation-delay:.18s}
  .tile:nth-child(7){animation-delay:.21s} .tile:nth-child(8){animation-delay:.24s}
  .tile:nth-child(9){animation-delay:.27s}

  /* ---------- Genio: unico punto d'accesso fluttuante, elegante, su ogni schermo ---------- */
  .ambient-genie{
    position:fixed;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));
    width:96px;z-index:35;perspective:700px;cursor:pointer;
    filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));
    transition:transform .2s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  }
  .ambient-genie .genie-3d{width:96px}
  /* Su schermi piccoli il genietto non deve coprire i contenuti */
  @media (max-width:520px){
    .ambient-genie, .ambient-genie .genie-3d{width:70px}
  }
  /* Niente transizione su left/top: scivolando da un punto all'altro il Genio
     attraversava i testi. Ora svanisce e ricompare (vedi teleport()). */
  .ambient-genie.roaming{
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
  }
  /* Nessuno spazio libero dove posizionarlo senza coprire un pulsante/card:
     meglio farlo sparire temporaneamente che lasciarlo sovrapposto (vedi
     pickSafePosition che restituisce null in questo caso). */
  /* Sparisce in fretta (il contenuto gli sta scorrendo sotto), ricompare con calma */
  .ambient-genie.genie-elsewhere{opacity:0;pointer-events:none;transform:scale(.6);transition:opacity .12s ease, transform .12s ease}
  .ambient-genie.genie-hidden{opacity:0;pointer-events:none;transform:scale(.6);transition:opacity .12s ease, transform .12s ease}
  .ambient-genie:hover{transform:scale(1.08) translateY(-2px)}
  /* Sul telefono (360-760px) il Genio sta nella barra in alto, accanto a
     condividi e menu: tra i riquadri a tutta larghezza un posto libero quasi
     non esiste (misurato il 05/10/2026: 0% in dizionario, schede, diario e
     ruota) e il Genio restava nascosto. Lo sposta genioNellaBarra() in app.js. */
  @media (max-width:760px) and (min-width:360px){
    .site-header-actions .ambient-genie{position:relative;right:auto;bottom:auto;width:36px;height:36px;flex:none;
      display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
    /* 32px: tutto il disegno (piuma, lampada, scintille) dentro la barra, con margine */
    .site-header-actions .ambient-genie .genie-3d{width:32px;position:relative;top:3px}
  }
  .ambient-genie:active{transform:scale(.97)}
  /* Tre classi: deve vincere sulla regola generica .genie-3d .genie-figure definita più in basso */
  .ambient-genie .genie-3d .genie-figure{
    transform-style:preserve-3d;
    animation:ambientGenieFloat 5.5s ease-in-out infinite;
  }
  @keyframes ambientGenieFloat{
    0%{transform:translateY(0) rotateY(-9deg) rotateZ(-1deg)}
    50%{transform:translateY(-7px) rotateY(9deg) rotateZ(1deg)}
    100%{transform:translateY(0) rotateY(-9deg) rotateZ(-1deg)}
  }
  .ambient-genie .lamp-glow{animation:lampGlow 2.4s ease-in-out infinite}
  .ambient-genie .sparkle{animation:sparkleTwinkle 1.8s ease-in-out infinite}
  .ambient-genie .sparkle:nth-child(2){animation-delay:.4s}
  .ambient-genie .sparkle:nth-child(3){animation-delay:.9s}
  .ambient-genie:hover .genie-figure{animation-play-state:paused}
  .ambient-genie .live-dot{top:2px;right:2px}

  /* ---------- Ruota dei Sogni ---------- */
  /* la luna della Smorfia del giorno girata come quella del logo (l'emoji 🌙
     è disegnata al contrario), richiesta del 05/10/2026 */
  .luna-come-logo{display:inline-block;transform:scaleX(-1)}
  .wheel-modal{text-align:center}
  .wheel-wrap{position:relative;width:230px;height:230px;margin:16px auto 8px}
  .wheel{
    width:100%;height:100%;border-radius:50%;position:relative;
    /* background (conic-gradient) impostato via JS in renderWheelIcons(), generico
       sul numero di WHEEL_PRIZES invece di 6 spicchi fissi - vedi wheelGradient() */
    border:6px solid var(--card-solid);
    box-shadow:0 8px 26px rgba(0,0,0,.25);
    transform:rotate(0deg);
  }
  .wheel-icon{
    position:absolute;top:50%;left:50%;font-size:1.6rem;
    width:36px;height:36px;margin:-18px;text-align:center;line-height:36px;
  }
  .wheel-pointer{
    position:absolute;top:-13px;left:50%;transform:translateX(-50%);
    width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
    border-top:18px solid var(--gold-ink);z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));
  }
  .wheel-hub{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:58px;height:58px;border-radius:50%;background:var(--card-solid);
    border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;
    font-size:var(--fs-lg);cursor:pointer;z-index:3;box-shadow:0 4px 10px rgba(0,0,0,.25);
    font-weight:800;color:var(--gold-ink);
  }
  .wheel-hub:not([disabled]):hover{transform:translate(-50%,-50%) scale(1.05)}
  .wheel-hub[disabled]{cursor:not-allowed;opacity:.6;transform:translate(-50%,-50%)}
  .wheel-legend{list-style:none;padding:0;margin:16px 0 0;text-align:left;font-size:var(--fs-sm);color:var(--text)}
  .wheel-legend li{
    display:flex;gap:10px;align-items:center;padding:9px 12px;margin-bottom:6px;
    background:var(--bg3);border:1px solid var(--card-border);border-radius:var(--radius-sm);font-weight:600;
  }
  .wheel-legend-icon{font-size:1.15rem;flex:none}
  .wheel-result{
    margin-top:14px;padding:14px;border-radius:var(--radius-sm);
    background:linear-gradient(135deg,#00000000,#00000000);
    border:1px dashed var(--card-border);font-weight:700;color:var(--gold-ink);display:none;
  }
  .wheel-result.show{display:block}
  .wheel-status{font-size:var(--fs-sm);color:var(--muted);margin-top:10px}
  .wheel-msg{font-weight:400;font-size:var(--fs-sm);margin-top:6px}
  .wheel-proverb{display:block;margin:10px 0 6px}
  .wheel-meaning{display:block;color:var(--muted)}
  .wheel-originale,.wish-originale{display:block;margin-top:6px;font-size:var(--fs-xs);font-style:italic;color:var(--muted)}
  .wheel-share{display:block;margin:14px auto 0}

  /* ---------- Hero: la scena dei primi 3 secondi ---------- */
  .hero-scene{
    position:relative;width:100vw;margin-left:calc(50% - 50vw);
    padding:38px 16px 0;overflow:hidden;
    background:radial-gradient(ellipse at 28% 10%, #4a2f6e88 0%, transparent 60%);
  }
  .hero-starfield{
    position:absolute;inset:0;pointer-events:none;
    background-image:
      radial-gradient(1.6px 1.6px at 10% 20%, #fff, transparent),
      radial-gradient(1.2px 1.2px at 25% 55%, #fff, transparent),
      radial-gradient(1.8px 1.8px at 40% 15%, #fff, transparent),
      radial-gradient(1.3px 1.3px at 55% 40%, #fff, transparent),
      radial-gradient(1.5px 1.5px at 70% 10%, #fff, transparent),
      radial-gradient(1.1px 1.1px at 85% 30%, #fff, transparent),
      radial-gradient(1.7px 1.7px at 95% 60%, #fff, transparent),
      radial-gradient(1.4px 1.4px at 15% 70%, #fff, transparent),
      radial-gradient(1.2px 1.2px at 65% 65%, #fff, transparent),
      radial-gradient(1.6px 1.6px at 45% 80%, #fff, transparent);
    background-repeat:repeat;background-size:280px 280px;
    opacity:.7;animation:starTwinkle 4s ease-in-out infinite alternate;
  }
  @keyframes starTwinkle{0%{opacity:.45}100%{opacity:.85}}
  .shooting-star{position:absolute;width:3px;height:3px;opacity:0}
  .shooting-star::before{
    content:'';position:absolute;top:50%;right:0;width:80px;height:1px;
    background:linear-gradient(90deg, transparent, #fff8, #fff);
    transform:translateY(-50%);
  }
  .shooting-star.s1{top:14%;left:66%;animation:shoot 7s linear infinite 0s}
  .shooting-star.s2{top:8%;left:36%;animation:shoot 7s linear infinite 2.3s}
  .shooting-star.s3{top:24%;left:82%;animation:shoot 7s linear infinite 4.6s}
  @keyframes shoot{
    0%{opacity:0;transform:translate(0,0) rotate(-35deg)}
    2%{opacity:1}
    16%{opacity:0;transform:translate(-170px,120px) rotate(-35deg)}
    100%{opacity:0}
  }
  @media (prefers-reduced-motion: reduce){ .hero-starfield, .shooting-star{animation:none} }
  .hero-skyline{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:100px;display:block}
  @media (min-width:600px){ .hero-skyline{height:140px} }

  .hero-content{position:relative;z-index:2;text-align:center;padding-bottom:38px}
  .eyebrow{
    display:inline-block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:#e8c468;opacity:.9;margin-bottom:12px;
  }
  .moon{
    width:64px;height:64px;margin:0 auto 14px;display:block;overflow:visible;
    filter:drop-shadow(0 0 22px #c9a22766);
    animation:float 5s ease-in-out infinite;
  }
  .moon .sparkle{animation:sparkleTwinkle 1.8s ease-in-out infinite}
  .moon .sparkle:nth-child(2){animation-delay:.5s}
  .moon .sparkle:nth-child(3){animation-delay:1s}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  h1{
    font-family:var(--font-display);color:var(--text-hero);
    font-size:var(--fs-4xl);font-weight:800;line-height:1.08;
    margin:0 0 10px;letter-spacing:-.02em;
  }
  h1 em{font-style:italic;font-weight:600;color:#e8c468}
  .subtitle{color:var(--muted-hero);font-size:var(--fs-lg);margin:0 auto;max-width:440px;line-height:1.5}
  /* Vantaggi in una riga, due parole ciascuno: stesso testo a ogni larghezza */
  .hero-trust{
    list-style:none;margin:16px auto 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;
    font-size:var(--fs-sm);font-weight:700;color:#efe6f7;letter-spacing:.01em;
  }
  .hero-trust li{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .hero-trust li::before{content:"";width:16px;height:16px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23e8c468'/%3E%3Cpath d='M4.6 8.3l2.2 2.2 4.6-4.8' fill='none' stroke='%23231a00' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;filter:drop-shadow(0 0 6px #e8c46855)}
  @media (max-width:520px){
    .subtitle{font-size:var(--fs-md)}
    .hero-trust{gap:6px 12px;font-size:var(--fs-xs)}
  }

  /* ---------- Page banner: la stessa scena notturna, in versione compatta, su ogni schermata ---------- */
  .page-banner{
    position:relative;width:100vw;margin-left:calc(50% - 50vw);
    overflow:hidden;padding:34px 16px 56px;text-align:center;
    background:radial-gradient(ellipse at 28% 10%, #4a2f6e88 0%, transparent 60%);
  }
  .page-banner-content{position:relative;z-index:2}
  .page-banner .eyebrow{margin-bottom:6px}
  .page-banner h1, .page-banner .page-title{
    font-family:var(--font-display);color:var(--text-hero);
    font-size:var(--fs-2xl);font-weight:800;line-height:normal;margin:0 0 6px;letter-spacing:-.01em;
  }
  .page-banner p{color:var(--muted-hero);font-size:var(--fs-md);margin:0 auto;max-width:420px;line-height:1.5}
  .page-content{max-width:860px;margin:-30px auto 0;position:relative;z-index:2;padding:0 16px}

  /* ---------- Cards ---------- */
  .card{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:var(--radius);
    padding:24px 26px;
    margin-bottom:20px;
    backdrop-filter:blur(8px);
    box-shadow:var(--shadow);
    animation:cardIn .35s ease both;
  }
  @keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
  .section-title{
    font-family:var(--font-display);
    font-size:var(--fs-lg);font-weight:700;line-height:normal;color:var(--gold);margin:0 0 16px;
    display:flex;align-items:center;gap:8px;letter-spacing:.2px;
  }

  textarea{
    width:100%;min-height:140px;resize:vertical;
    background:var(--bg3);color:var(--text);
    border:1px solid var(--card-border);border-radius:var(--radius-sm);
    padding:14px;font-size:var(--fs-md);font-family:inherit;line-height:1.5;
  }
  textarea:focus{outline:2px solid var(--gold);}
  .textarea-wrap{position:relative}
  .textarea-wrap textarea.has-voice-btn{padding-right:52px}
  .voice-btn{position:absolute;top:10px;right:10px;z-index:2}
  .voice-btn.listening{background:var(--red);border-color:var(--red);color:#fff;animation:voicePulse 1.4s ease-in-out infinite}
  @keyframes voicePulse{0%,100%{box-shadow:0 0 0 0 #d95d4266}50%{box-shadow:0 0 0 8px #d95d4200}}
  @media (prefers-reduced-motion: reduce){ .voice-btn.listening{animation:none} }

  .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
  .chip{
    background:transparent;border:1px solid var(--card-border);color:var(--muted);
    padding:7px 13px;border-radius:20px;font-size:var(--fs-sm);font-weight:600;cursor:pointer;
    box-shadow:none;transition:all .15s ease;
  }
  .chip:hover{border-color:var(--gold);color:var(--gold2);transform:translateY(-1px)}

  .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:16px}
  #interpretBtn{flex:1 0 auto;white-space:nowrap}   /* mai più stretto del testo: "Cancella" va a capo */
  button{
    appearance:none;-webkit-appearance:none;
    background:linear-gradient(135deg,var(--gold2),var(--gold));
    color:#231a00;border:none;border-radius:var(--radius-sm);
    padding:13px 26px;font-size:var(--fs-md);font-weight:700;cursor:pointer;font-family:inherit;
    box-shadow:0 4px 14px #c9a22744;
    transition:transform .12s ease, box-shadow .12s ease;
  }
  button:hover{transform:translateY(-1px);box-shadow:0 6px 18px #c9a22766}
  button:active{transform:translateY(0) scale(.97)}
  button:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
  button.btn-ghost{
    background:transparent;color:var(--muted);border:1px solid var(--card-border);
    box-shadow:none;font-weight:600;
  }
  button.btn-ghost:hover{color:var(--text);border-color:var(--gold)}
  button.btn-small{padding:8px 14px;font-size:var(--fs-sm);border-radius:8px}

  /* Anello di focus coerente per tastiera/screen reader, invece dell'outline blu di default */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .tile:focus-visible{
    outline:2.5px solid var(--gold);outline-offset:2px;
  }
  .icon-btn:focus-visible, .ambient-genie:focus-visible{
    outline:2.5px solid var(--gold);outline-offset:3px;
  }
  .nav-link:focus-visible{outline:2.5px solid var(--gold);outline-offset:-2px;border-radius:10px}
  /* I titoli ricevono il focus via codice a ogni cambio di schermata (per chi
     usa lo screen reader): niente riquadro, non sono elementi da attivare.
     Arrivando da Google il browser lo disegnava attorno al titolo. */
  h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus{outline:none}

  @media (prefers-reduced-motion: reduce){
    .moon, .genie-figure, .lamp-glow, .sparkle, .ambient-genie{
      animation:none !important;
    }
  }
  .sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0;
  }

  .hint{color:var(--muted);font-size:var(--fs-sm);margin-top:10px}
  .hint.warn{color:var(--amb)}
  .hint.hot{color:#f0836a;font-weight:700}
  .reassure{color:var(--muted);font-size:var(--fs-sm);font-style:italic;margin:-6px 0 14px;line-height:1.5}
  .time-estimate{color:var(--muted);font-size:var(--fs-sm);font-weight:600;display:inline-flex;align-items:center}

  /* ---------- Loading ---------- */
  #loading{display:none;text-align:center;padding:34px 0}
  #loading.show{display:block}
  #loadingMsg{color:var(--muted);font-size:var(--fs-md);font-style:italic}

  /* ---------- Results ---------- */
  #results{display:none}
  #results.show{display:block}
  .tone-badge{
    display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:20px;font-size:var(--fs-sm);font-weight:700;
  }
  /* L'emoji in un elemento a parte, centrata con flexbox invece che nel flusso del
     testo: i font emoji (Segoe UI Emoji su Windows, Apple Color Emoji, Noto Color
     Emoji...) hanno metriche verticali diverse tra loro, quindi affidarsi
     all'allineamento naturale del testo la fa apparire leggermente disallineata
     a seconda del sistema operativo - centrata via flexbox invece resta identica
     ovunque, indipendentemente dal font emoji del dispositivo. */
  .badge-icon{display:inline-flex;align-items:center;line-height:1}
  .tone-positiva{background:#8fb86e33;color:#c9e0ae;border:1px solid #8fb86e66}
  .tone-negativa{background:#d9755733;color:#f0b49e;border:1px solid #d9755766}
  .tone-ambivalente{background:#d6a24e33;color:#e8c468;border:1px solid #d6a24e66}
  .tone-neutra{background:#a18fc733;color:#d6cbee;border:1px solid #a18fc766}
  .synthesis-text{line-height:1.7;font-size:var(--fs-md)}
  .synthesis-text b{color:var(--gold2)}

  .result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
  /* Riepilogo del responso */
  .result-hero{
    position:relative;overflow:hidden;text-align:center;
    background:linear-gradient(165deg,#3a2a54f2,#2a1f3cf2 55%,#241a34f2);
    border-color:#c9a22755;
  }
  .result-hero::before{
    content:'';position:absolute;left:50%;top:-120px;width:420px;height:260px;transform:translateX(-50%);
    background:radial-gradient(ellipse at center,#e8c46830,transparent 70%);pointer-events:none;
  }
  .result-hero > *{position:relative}
  .result-title{font-size:var(--fs-2xl);margin:0 0 16px}
  .result-hero .genie-intro{text-align:left;max-width:460px;margin:0 auto 16px}
  .hero-symbols{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:12px}
  .hero-symbols:empty{display:none}
  .symbol-chip{
    display:inline-flex;align-items:center;gap:7px;padding:7px 15px;border-radius:999px;
    background:var(--bg3);border:1px solid #c9a22759;color:var(--text);font-weight:700;font-size:var(--fs-sm);
  }
  .tone-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
  .hero-label{margin:20px 0 0;font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .hero-actions{margin-top:20px}
  /* flex-shrink 0: un pulsante non si stringe mai sotto il suo testo (a 412px
     "Condividi nelle Storie" finiva sotto "Copia il testo"); se non c'è posto
     per entrambi, il secondo va a capo */
  .hero-actions button{flex:1 0 auto;min-width:160px;white-space:nowrap}
  .result-actions .btn-small{flex:1 0 auto;min-width:140px;text-align:center;white-space:nowrap}

  /* ---------- Symbol cards ---------- */
  .symbol{
    border:1px solid var(--card-border);border-radius:var(--radius-sm);
    padding:14px 16px;margin-bottom:12px;background:#00000014;
  }
  .symbol-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
  .symbol-icon{font-size:1.3rem;line-height:1}
  .symbol-name{font-weight:700;font-size:var(--fs-lg);flex:1;min-width:140px;margin:0}
  .numero-chip{
    background:var(--bg3);border:1px solid var(--gold);color:var(--gold2);
    font-weight:800;font-size:var(--fs-sm);border-radius:8px;padding:3px 10px;white-space:nowrap;
  }
  .valenza-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
  .dot-positiva{background:var(--pos)} .dot-negativa{background:var(--neg)}
  .dot-ambivalente{background:var(--amb)} .dot-neutra{background:var(--neu)}
  .symbol-sintesi{font-size:var(--fs-md);color:var(--muted);margin:4px 0 10px;line-height:1.5}
  /* Scheda del dizionario: il simbolo come protagonista della pagina */
  .symbol-page{
    padding:26px 22px 20px;border-color:#c9a22755;
    background:linear-gradient(165deg,#3a2a54cc,#2a1f3ccc 55%,#00000014);
  }
  .symbol-hero{text-align:center;margin-bottom:16px}
  .symbol-hero-icon{
    display:inline-flex;align-items:center;justify-content:center;width:78px;height:78px;margin-bottom:12px;
    border-radius:50%;background:var(--bg3);border:1px solid #c9a22766;font-size:2.4rem;line-height:1;
    box-shadow:0 0 34px #c9a22738;
  }
  .symbol-hero .eyebrow{display:block;margin-bottom:4px}
  .symbol-hero-name{font-size:var(--fs-3xl);line-height:1.15;margin:0 0 14px;text-wrap:balance}
  .symbol-hero-meta{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}
  .symbol-num,.symbol-tone{
    display:inline-flex;align-items:center;gap:8px;border-radius:999px;background:var(--bg3);
    border:1px solid var(--card-border);font-size:var(--fs-sm);font-weight:700;color:var(--muted);
  }
  .symbol-num{padding:4px 14px 4px 4px}
  /* numero classico: link alla sua riga nella pagina dei 90 numeri */
  a.symbol-num{text-decoration:none;transition:border-color .2s,color .2s}
  a.symbol-num::after{content:'›';color:var(--gold2);margin-left:-2px}
  a.symbol-num:hover, a.symbol-num:focus-visible{border-color:var(--gold2);color:var(--text)}
  .symbol-tone{padding:9px 14px}
  /* tema della scheda: link alla raccolta /temi/<slug> */
  a.symbol-tema{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;background:var(--bg3);
    border:1px solid var(--card-border);font-size:var(--fs-sm);font-weight:700;color:var(--muted);text-decoration:none;transition:border-color .2s,color .2s}
  a.symbol-tema::after{content:'›';color:var(--gold2)}
  a.symbol-tema:hover, a.symbol-tema:focus-visible{border-color:var(--gold2);color:var(--text)}
  .symbol-num .ball{width:32px;height:32px;font-size:var(--fs-sm);animation:none;opacity:1;transform:none;box-shadow:none}
  .symbol-lead{font-size:var(--fs-md);color:var(--text);margin:0 auto 14px;max-width:560px;line-height:1.6}
  /* A scheda aperta il banner del dizionario si fa da parte */
  .dict-detail-open .page-banner{padding-bottom:44px}
  .dict-detail-open .page-banner .page-title{font-size:var(--fs-lg)}
  .dict-detail-open .page-banner p{display:none}
  .dict-detail-open .dict-count{display:none}
  .dict-detail-open .dict-search{display:none}
  /* Su telefono la scheda sta dentro il riquadro del dizionario: margini
     interni ridotti, altrimenti il testo restava largo poco più di 220px */
  @media (max-width:520px){
    #screenDict .page-content .card{padding:14px 10px}
    .symbol-page{padding:22px 14px 16px}
  }
  .smorfia-note{font-size:var(--fs-sm);color:var(--muted);margin:6px 0 10px;font-style:italic;padding-left:10px;border-left:2px solid var(--card-border)}
  .dict-related-guide{display:block;margin-top:10px;padding:10px 14px;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius-sm);color:var(--gold2);font-size:var(--fs-sm);font-weight:700;text-decoration:none;text-align:center}
  .dict-related-guide:hover{border-color:var(--gold)}
  .dict-story-btn{display:block;width:100%;margin-top:10px}
  /* "Salva su Pinterest" (K3): un link con l'aspetto del pulsante secondario */
  a.pin-link{box-sizing:border-box;text-align:center;text-decoration:none;color:var(--muted);border:1px solid var(--card-border);
    border-radius:var(--radius-sm);padding:13px 26px;font-size:var(--fs-md);font-weight:600}
  a.pin-link:hover{color:var(--text);border-color:var(--gold)}
  #dictDreamBtn{padding:11px 18px;font-size:var(--fs-md);line-height:1.35}
  .related-symbols{margin-top:22px}
  .related-symbols-label{
    display:block;color:var(--gold2);font-size:var(--fs-xs);font-weight:800;
    text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px;
  }
  .related-symbols-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  @media (max-width:480px){ .related-symbols-grid{grid-template-columns:repeat(2,1fr)} }

  /* Le tre letture (Freud/Jung/Scienza) sempre visibili una sotto l'altra invece
     che dietro tab esclusive: chi legge solo la prima lente (com'era prima con
     Freud aperto di default) non scopriva mai le altre due, che sono proprio il
     valore differenziante del sito rispetto ai dizionari dei sogni concorrenti. */
  .lens-block{margin-top:10px;padding-top:10px;border-top:1px solid var(--card-border)}
  .lens-block:first-of-type{border-top:none;padding-top:0}
  .lens-label{
    display:block;color:var(--gold2);font-size:var(--fs-xs);font-weight:800;
    text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;
  }
  .lens-text{font-size:var(--fs-md);line-height:1.6}
  /* Una sola dimensione per tutto il testo da leggere di un simbolo: prima
     sintesi, letture e nota della Smorfia avevano tre grandezze diverse.
     16px sia nella scheda del dizionario sia nelle schede del responso. */
  .symbol .symbol-sintesi, .symbol .smorfia-note, .symbol .lens-text{font-size:var(--fs-md);line-height:1.6}
  .symbol-page .symbol-lead, .symbol-page .smorfia-note, .symbol-page .lens-text{font-size:var(--fs-md);line-height:1.65}

  /* Schede arricchite */
  .symbol-brief{margin:4px 0 16px;padding:14px 16px;border-radius:var(--radius-sm);background:var(--bg3);border-left:3px solid var(--gold)}
  .symbol-brief ul{margin:6px 0 0;padding-left:18px}
  .symbol-brief li{font-size:var(--fs-md);line-height:1.6;margin-bottom:6px}
  .symbol-brief li:last-child{margin-bottom:0}
  /* Quando un sogno merita attenzione: riquadro sobrio, bordo a sinistra */
  .symbol-attenzione{margin:22px 0;padding:16px 18px;border-radius:var(--radius-sm);background:#00000022;border:1px solid var(--card-border);border-left:3px solid var(--gold)}
  .symbol-attenzione h2{margin:0 0 8px;font-family:var(--font-display);font-size:var(--fs-lg);color:var(--gold2)}
  .symbol-attenzione p{margin:0 0 8px}
  .symbol-attenzione ul{margin:0;padding-left:20px}
  .symbol-attenzione li{margin:4px 0}
  .symbol-more{margin-top:8px}
  /* Fonti e limiti: in fondo alla scheda, testo piccolo */
  .symbol-fonti{margin-top:26px;padding-top:16px;border-top:1px solid var(--card-border);font-size:var(--fs-sm);color:var(--muted)}
  .symbol-fonti h2{margin:0 0 8px;font-family:var(--font-display);font-size:var(--fs-md);color:var(--text)}
  .symbol-fonti ul{margin:0 0 8px;padding-left:18px}
  .symbol-fonti li{margin:3px 0}
  .symbol-fonti b{color:var(--text);font-weight:700}
  .symbol-fonti a{color:var(--gold2);font-weight:700}
  .symbol-more h2{
    font-family:var(--font-display);font-size:var(--fs-lg);color:var(--gold2);
    margin:22px 0 10px;padding-top:16px;border-top:1px solid var(--card-border);
  }
  .symbol-variants{list-style:none;margin:0;padding:0}
  .symbol-variants li{margin-bottom:12px;scroll-margin-top:calc(var(--header-h,64px) + 16px)}
  .symbol-variants h3{font-size:var(--fs-md);font-weight:800;color:var(--text);margin:0 0 2px}
  .symbol-variants p, .symbol-questions li{font-size:var(--fs-md);line-height:1.65;margin:0;color:var(--muted)}
  .symbol-questions{margin:0;padding-left:20px}
  .symbol-questions li{margin-bottom:8px;color:var(--text)}
  .symbol-faq details{border:1px solid var(--card-border);border-radius:var(--radius-sm);margin-bottom:8px;background:#00000014}
  .symbol-faq details[open]{border-color:#c9a22766}
  .symbol-faq summary{
    list-style:none;cursor:pointer;position:relative;padding:13px 44px 13px 14px;
    font-size:var(--fs-md);font-weight:700;line-height:1.4;border-radius:var(--radius-sm);
  }
  .symbol-faq summary::-webkit-details-marker{display:none}
  .symbol-faq summary::after{
    content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;
    border-right:2px solid var(--gold2);border-bottom:2px solid var(--gold2);transform:rotate(45deg);
  }
  .symbol-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-1px}
  .symbol-faq summary:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px}
  .symbol-faq p{margin:0;padding:0 14px 14px;font-size:var(--fs-md);line-height:1.65;color:var(--muted)}
  .symbol-updated{margin:18px 0 0;font-size:var(--fs-xs);color:var(--muted);text-align:right}
  .empty-note{color:var(--muted);font-style:italic;font-size:var(--fs-sm);grid-column:1/-1}

  .saved-note{text-align:center;font-size:var(--fs-sm);color:var(--muted);margin:0 0 10px}
  .saved-note button{
    background:none;border:none;box-shadow:none;padding:0;margin:0;
    color:var(--gold2);font-weight:700;font-size:inherit;font-family:inherit;
    cursor:pointer;text-decoration:underline;
  }

  /* ---------- Numbers ---------- */
  .numbers-grid{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:18px 0 10px}
  .ball{
    width:62px;height:62px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    background:radial-gradient(circle at 35% 30%, var(--gold2), var(--gold) 65%, #8a5a16 100%);
    color:#231a00;font-weight:800;font-size:var(--fs-xl);
    box-shadow:0 4px 14px #00000055, inset 0 0 0 2px #ffffff33;
    opacity:0;transform:scale(.4);animation:ballPop .45s cubic-bezier(.2,1.4,.4,1) forwards;
  }
  @keyframes ballPop{to{opacity:1;transform:scale(1)}}
  /* La Smorfia del sogno (responso): una riga per ogni simbolo con voce classica */
  .smorfia-sogno{margin:20px 0 4px}
  /* compatta: una riga per voce, così "Condividi" resta vicino anche con 5 simboli */
  .smorfia-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
  .smorfia-item{
    display:flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;text-align:left;
    background:#00000022;border:1px solid var(--card-border);color:var(--text);text-decoration:none;
  }
  .smorfia-item:hover{border-color:var(--gold)}
  .smorfia-item:focus-visible{outline:2.5px solid var(--gold);outline-offset:2px}
  .smorfia-item .ball{width:36px;height:36px;font-size:var(--fs-sm);flex:none;box-shadow:none}
  .si-testo{flex:1;min-width:0;line-height:1.3}
  .si-voce{font-family:var(--font-display);font-style:italic;font-weight:600;color:#fbf6ec}
  .si-sig{font-size:var(--fs-sm);color:var(--muted)}
  .si-vai{color:var(--gold2);font-weight:700}
  .smorfia-nota,.smorfia-vuota{margin:8px 0 0;font-size:var(--fs-sm);color:var(--muted);text-align:center}
  .smorfia-vuota a,.smorfia-breve a{color:var(--gold2);font-weight:700}
  .smorfia-breve{color:var(--muted);font-size:var(--fs-sm);margin:0}

  /* ---------- Premium teaser ---------- */
  .premium-teaser{
    position:relative;border:1px dashed var(--gold);border-radius:var(--radius-sm);
    padding:16px;margin-top:14px;overflow:hidden;
  }
  .premium-teaser .blurred{filter:blur(4px);opacity:.6;user-select:none;pointer-events:none}
  .premium-teaser.unlocked .blurred{filter:none;opacity:1;pointer-events:auto}
  .lock-label{font-size:var(--fs-sm);color:var(--gold2);font-weight:700}

  /* ---------- Drawer & Modal ---------- */
  .overlay{
    display:none;position:fixed;inset:0;background:#0d0812cc;z-index:40;
    justify-content:center;padding:24px 16px;
    overflow-y:auto;overscroll-behavior:contain;
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  }
  .overlay.show{display:flex}
  .history-item{
    border:1px solid var(--card-border);border-left:4px solid var(--card-border);
    background:var(--card);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:12px;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .history-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
  .history-item.tone-positiva{border-left-color:var(--pos)}
  .history-item.tone-negativa{border-left-color:var(--neg)}
  .history-item.tone-ambivalente{border-left-color:var(--amb)}
  .history-item.tone-neutra{border-left-color:var(--neu)}
  .history-item .hdate{display:block;font-size:var(--fs-xs);color:var(--muted);margin-bottom:6px;font-weight:600}
  .history-item .hexcerpt{font-size:var(--fs-md);margin-bottom:10px;line-height:1.5}
  .history-item .hnums{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
  .history-item .hnum{background:var(--bg3);border:1px solid var(--card-border);border-radius:8px;padding:2px 8px;font-size:var(--fs-xs);font-weight:700;color:var(--gold2)}
  .history-actions{display:flex;gap:8px}
  .history-search-wrap{margin-top:14px}
  .history-search-wrap[hidden]{display:none}
  .history-month{
    display:flex;align-items:baseline;gap:8px;margin:22px 0 10px;
    font-family:var(--font-display);font-size:var(--fs-lg);font-weight:700;color:var(--gold2);
  }
  .history-month:first-child{margin-top:0}
  .history-month span{font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
  .trend-stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
  .trend-stat{background:var(--bg3);border:1px solid var(--card-border);border-radius:var(--radius-sm);padding:12px 16px;flex:1;min-width:160px}
  .trend-label{display:block;font-size:var(--fs-xs);color:var(--muted);margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px;font-weight:700}
  .trend-value{font-size:var(--fs-md);font-weight:700}
  .trend-value.trend-tone-positiva{color:var(--pos)}
  .trend-value.trend-tone-negativa{color:var(--neg)}
  .trend-value.trend-tone-ambivalente{color:var(--amb)}
  .trend-value.trend-tone-neutra{color:var(--neu)}
  .history-actions [data-action="reload"]{flex:1;white-space:nowrap;text-align:center}
  .history-toolbar .btn-small{flex:1;white-space:nowrap;text-align:center}
  .history-locked{
    text-align:center;padding:16px;color:var(--muted);font-size:var(--fs-sm);
    border:1px dashed var(--card-border);border-radius:var(--radius-sm);
  }

  /* Barra di ricerca in stile "pill" con icona - ispirata alla barra di ricerca di Airbnb */
  .dict-search{
    width:100%;background:var(--bg3);border:1px solid var(--card-border);border-radius:24px;
    padding:12px 16px 12px 42px;color:var(--text);font-size:var(--fs-md);font-family:inherit;margin-bottom:6px;
    box-shadow:0 2px 10px rgba(0,0,0,.18);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b2a1b6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:14px center;background-size:17px;
  }
  .dict-search:focus{outline:2px solid var(--gold)}
  .dict-count{font-size:var(--fs-xs);color:var(--muted);margin-bottom:14px}
  .dict-count-hero{color:var(--gold2);font-weight:800}
  /* Indice A-Z: resta sotto l'header mentre si scorre l'elenco (--header-h è
     impostata dal JS con l'altezza reale dell'header) */
  .dict-az{
    position:sticky;top:var(--header-h,64px);z-index:5;
    display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
    margin:0 -8px 14px;padding:6px 8px;border-radius:14px;
    background:var(--card-solid);border:1px solid var(--card-border);
  }
  .dict-az::-webkit-scrollbar{display:none}
  .dict-az[hidden], .dict-detail-open .dict-az{display:none}
  .dict-popular{margin:2px 0 18px}
  .dict-popular[hidden], .dict-detail-open .dict-popular{display:none}
  .dict-popular-title{
    font-family:var(--font-body);font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--gold2);margin:0 0 10px;
  }
  .dict-popular ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
  .dict-popular a{
    display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;
    background:var(--bg3);border:1px solid #c9a22759;color:var(--text);
    font-size:var(--fs-sm);font-weight:700;text-decoration:none;
    transition:border-color .15s ease, transform .15s ease;
  }
  .dict-popular a:hover{border-color:var(--gold);transform:translateY(-1px)}
  /* Su telefono una sola riga da scorrere col dito: su più righe le pillole
     spingevano l'elenco quasi fuori dal primo schermo */
  @media (max-width:520px){
    .dict-popular ul{
      flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
      margin:0 -10px;padding:0 10px 2px;scroll-padding:0 10px;scroll-snap-type:x proximity;
    }
    .dict-popular ul::-webkit-scrollbar{display:none}
    .dict-popular li{flex:none;scroll-snap-align:start}
    .dict-popular a{white-space:nowrap}
  }
  .dict-az button{
    flex:none;width:36px;height:36px;padding:0;border-radius:50%;
    background:none;box-shadow:none;border:1px solid transparent;transform:none;
    color:var(--muted);font-family:var(--font-display);font-weight:700;font-size:var(--fs-md);
  }
  .dict-az button:hover{transform:none;box-shadow:none;color:var(--text);border-color:var(--card-border)}
  .dict-az button.active{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#231a00;border-color:transparent}
  .dict-az button:focus-visible{outline:2.5px solid var(--gold);outline-offset:1px}
  .dict-letter{scroll-margin-top:calc(var(--header-h,64px) + 62px)}

  /* Griglia di simboli "da sfogliare" con badge tondo - ispirata alla barra categorie di Airbnb */
  #dictList{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .dict-letter{
    grid-column:1/-1;
    font-family:var(--font-display);color:var(--gold);font-size:var(--fs-lg);font-weight:700;
    margin:14px 0 2px;letter-spacing:.5px;
  }
  .dict-letter:first-child{margin-top:0}
  .dict-row{
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
    background:var(--card);border:1px solid var(--card-border);color:var(--text);
    border-radius:var(--radius-sm);padding:16px 10px;text-decoration:none;
    font-size:var(--fs-sm);font-weight:700;cursor:pointer;box-shadow:none;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .dict-row:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold)}
  .dict-row .dict-icon-badge{
    width:46px;height:46px;border-radius:50%;flex:none;
    background:linear-gradient(135deg, var(--bg2), var(--bg3));
    border:1px solid var(--card-border);
    display:flex;align-items:center;justify-content:center;font-size:1.35rem;
  }
  .dict-row-text{display:flex;flex-direction:column;gap:4px;min-width:0}
  .dict-row .dict-row-name{line-height:1.3}
  .dict-row .dict-row-words{font-size:var(--fs-xs);font-weight:500;color:var(--muted);line-height:1.35}
  /* Elenco del dizionario a righe compatte: icona, nome con le tre parole di
     sintesi, numero. Due colonne da tablet in su, una su telefono (le card a
     colonna davano righe mezze vuote e parole spezzate). Le card restano per
     i "simboli correlati" della scheda. */
  #dictList .dict-row{flex-direction:row;text-align:left;gap:12px;padding:10px 14px}
  #dictList .dict-row .dict-icon-badge{width:40px;height:40px;font-size:1.2rem}
  #dictList .dict-row .dict-row-text{flex:1;gap:2px}
  #dictList .dict-row .dict-row-name{font-size:var(--fs-md)}
  #dictList .dict-row:hover{transform:translateY(-2px)}
  @media (max-width:520px){
    #dictList{grid-template-columns:1fr;gap:8px}
    #dictList .dict-row{padding:8px 12px}
    #dictList .dict-row .dict-icon-badge{width:36px;height:36px;font-size:1.1rem}
    #dictList .dict-row:hover{transform:none}
  }
  .dict-back{display:block;margin-bottom:20px}
  .dict-detail-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:20px}
  .dict-detail-toolbar .dict-back{margin-bottom:0}

  .modal{
    background:var(--card-solid);max-width:440px;width:100%;border-radius:var(--radius);
    padding:26px;border:1px solid var(--card-border);box-shadow:var(--shadow);
    margin:auto; /* con l'overlay scrollabile: centrato quando ci sta, scorribile dall'alto quando è più alto della finestra */
  }
  .modal h2{font-family:var(--font-display);margin:0 0 6px;font-size:var(--fs-xl);color:var(--gold);text-align:center}
  .modal p{line-height:1.55;font-size:var(--fs-md);color:var(--muted)}
  .modal .modal-lead{text-align:center;margin:0 0 4px}
  .perk-list{list-style:none;margin:16px 0 4px;padding:0}
  .perk-list li{padding:8px 0;font-size:var(--fs-md);display:flex;gap:10px;align-items:flex-start;line-height:1.45}
  .perk-list .perk-icon{width:26px;flex:none;text-align:center;font-size:1.05rem;line-height:1.4}
  .modal-actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
  .modal-actions button{width:100%;padding:14px 20px}
  .modal-actions button.btn-ghost{
    background:transparent;border:none;box-shadow:none;color:var(--muted);
    font-weight:600;padding:8px 20px;
  }
  .modal-actions button.btn-ghost:hover{color:var(--gold-ink);transform:none}
  .modal-actions button.wish-share{background:transparent;border:1px solid var(--gold);color:var(--gold2);box-shadow:none}
  .modal-actions button.wish-share[hidden]{display:none}
  .modal-note{font-size:var(--fs-xs);color:var(--muted);margin-top:14px;line-height:1.5;opacity:.85;text-align:center}
  .price-stack{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:14px 0 4px;flex-wrap:wrap}
  .price-now{font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:700;color:var(--gold2)}
  .price-now small{font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
  .price-badge{background:#8fb86e33;color:#c9e0ae;border:1px solid #8fb86e66;padding:3px 10px;border-radius:12px;font-size:var(--fs-xs);font-weight:700}

  /* ---------- Toast ---------- */
  #toast{
    position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
    background:var(--card-solid);border:1px solid var(--gold);color:var(--text);
    padding:12px 20px;border-radius:30px;font-size:var(--fs-sm);font-weight:600;
    box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:all .25s ease;z-index:60;
    /* messaggi lunghi (avviso della dettatura): larghi quanto lo schermo permette,
       non metà schermo e altissimi; quelli brevi restano della loro misura */
    width:max-content;max-width:min(440px, calc(100vw - 32px));text-align:center;
  }
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  footer{color:var(--muted);margin-top:40px;padding:28px 16px 0;border-top:1px solid var(--card-border)}
  .footer-inner{max-width:860px;margin:0 auto;text-align:center}
  .footer-brand{
    display:flex;align-items:center;justify-content:center;gap:9px;
    font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);color:var(--text);margin-bottom:6px;
  }
  .footer-tagline{font-size:var(--fs-sm);margin:0 0 18px}
  .footer-links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-bottom:20px}
  .footer-links button, .footer-links a{
    background:none;border:none;box-shadow:none;color:var(--muted);
    font-family:inherit;font-size:var(--fs-sm);font-weight:700;cursor:pointer;transform:none;
    text-decoration:none;
    /* area di tocco più alta, compensata dal margine: il layout non cambia */
    padding:9px 4px;margin:-9px -4px;
  }
  .footer-links button:hover, .footer-links a:hover{color:var(--gold-ink);transform:none}
  .footer-legal{font-size:var(--fs-xs);line-height:1.6;padding-bottom:28px}
  footer a{color:var(--gold2)}

  @media (max-width:520px){
    h1{font-size:var(--fs-3xl)}
    .card{padding:18px}
    .ball{width:52px;height:52px;font-size:var(--fs-lg)}
  }

  /* ---------- Genio della lampada ----------
     Disegno vettoriale fatto per il sito (baffi napoletani, cornetto
     portafortuna, coda di fumo) che esce dalla lampada dorata SVG: parti
     separate per occhi, bocca, sopracciglia, braccio e coda. */
  .genie-3d{position:relative;width:180px;display:block}
  .genie-3d .genie-figure{
    /* la punta della coda (80% della larghezza del disegno) cade sulla bocca
       del beccuccio (91% della lampada): Genio 72%, lampada 78% */
    position:relative;z-index:2;display:block;width:72%;margin:0 0 0 15.8%;
    transform-origin:80% 100%;
    animation:genieEmerge .7s cubic-bezier(.25,1.6,.4,1) both, genieBob 3.2s ease-in-out .7s infinite;
  }
  /* Il disegno del Genio: sbatte le ciglia, la coda di fumo ondeggia, saluta
     quando compare e al passaggio del mouse */
  .genie-svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 6px 14px rgba(13,8,18,.45))}
  .genie-svg .g-eyes{transform-box:fill-box;transform-origin:center;animation:genieBlink 5.2s ease-in-out 1.2s infinite}
  .genie-svg .g-tail{transform-box:fill-box;transform-origin:50% 0;animation:genieTail 3.4s ease-in-out infinite alternate}
  .genie-svg .g-arm{transform-box:view-box;transform-origin:132px 140px;animation:genieWave 1.6s ease-in-out .9s 1}
  .genie-3d:hover .g-arm{animation:genieWaveAgain 1.2s ease-in-out 1}
  .genie-svg .g-brow, .genie-svg .g-mouth{transform-box:fill-box;transform-origin:center;transition:transform .4s ease}
  @keyframes genieBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
  @keyframes genieTail{from{transform:skewX(-5deg)}to{transform:skewX(5deg)}}
  @keyframes genieWave{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-12deg)}80%{transform:rotate(6deg)}}
  @keyframes genieWaveAgain{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}50%{transform:rotate(8deg)}75%{transform:rotate(-10deg)}}
  /* Espressioni secondo il tono del sogno (come le emozioni di una mascotte):
     positivo = sopracciglia alzate e sorriso largo; inquieto = sguardo
     comprensivo che rassicura; ambivalente = un sopracciglio alzato */
  .mood-positiva .g-brow{transform:translateY(-4px)}
  .mood-positiva .g-mouth{transform:scale(1.32)}
  .mood-negativa .g-brow-l{transform:rotate(-20deg) translateY(2px)}
  .mood-negativa .g-brow-r{transform:rotate(20deg) translateY(2px)}
  .mood-negativa .g-mouth{transform:scale(.72,.55)}
  .mood-ambivalente .g-brow-r{transform:translateY(-6px) rotate(-12deg)}
  .mood-ambivalente .g-mouth{transform:scale(.9) rotate(-8deg)}
  /* Mentre legge il sogno il Genio "pensa": lo sguardo gira intorno */
  .genie-scene .g-pupils{animation:genieLook 2.6s ease-in-out infinite}
  @keyframes genieLook{0%,100%{transform:translate(0,0)}30%{transform:translate(-2.6px,-2px)}65%{transform:translate(2.6px,-2px)}}
  @media (prefers-reduced-motion: reduce){ .genie-svg .g-eyes, .genie-svg .g-tail, .genie-svg .g-arm, .genie-3d:hover .g-arm, .genie-scene .g-pupils{animation:none} }
  .genie-3d .genie-lamp{
    position:relative;z-index:3;display:block;height:auto;
    width:78%;margin:-6% 0 0 2%;   /* la bocca del beccuccio sotto la punta della coda */
  }
  .genie-3d .lamp-glow{
    position:absolute;left:50%;bottom:-6%;z-index:0;
    width:120%;height:34%;transform:translateX(-50%);
    background:radial-gradient(ellipse at center, #e8c46888 0%, #e8c46833 45%, transparent 72%);
    animation:lampGlow 2.4s ease-in-out infinite;
  }
  @keyframes genieEmerge{
    0%{opacity:0;transform:translateY(26%) scale(.55)}
    60%{opacity:1}
    100%{opacity:1;transform:translateY(0) scale(1)}
  }
  @keyframes genieBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5%)}}
  @keyframes lampGlow{0%,100%{opacity:.55}50%{opacity:.95}}
  .genie-3d .sparkle{
    position:absolute;border-radius:50%;background:var(--gold2);z-index:4;
    box-shadow:0 0 6px 1px #e8c46888;
    animation:sparkleTwinkle 1.8s ease-in-out infinite;
  }
  .genie-3d .sparkle.sp1{width:6px;height:6px;left:8%;top:26%}
  .genie-3d .sparkle.sp2{width:5px;height:5px;right:6%;top:14%;animation-delay:.4s}
  .genie-3d .sparkle.sp3{width:4px;height:4px;right:12%;top:52%;animation-delay:.9s}
  @keyframes sparkleTwinkle{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
  .section-spark{
    display:inline-block;width:8px;height:8px;border-radius:50%;
    background:var(--gold2);box-shadow:0 0 8px 2px #e8c46899;
    animation:sparkleTwinkle 1.8s ease-in-out infinite;
    margin-right:9px;vertical-align:middle;
  }
  .genie-scene{display:flex;flex-direction:column;align-items:center;padding:10px 0}
  #loadingMsg{margin-top:6px}

  .genie-intro{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
  .genie-3d.genie-avatar{width:62px;flex:none}
  .speech-bubble{
    position:relative;background:var(--bg3);border:1px solid var(--card-border);border-radius:14px;
    padding:10px 14px;font-size:var(--fs-sm);font-style:italic;color:var(--muted);flex:1;
  }
  .speech-bubble::before{
    content:'';position:absolute;left:-7px;top:14px;width:12px;height:12px;
    background:var(--bg3);border-left:1px solid var(--card-border);border-bottom:1px solid var(--card-border);
    transform:rotate(45deg);
  }

  .wish-card{text-align:center}
  .wish-proverb{font-family:var(--font-display);font-size:var(--fs-lg);margin:14px 0 8px;line-height:1.4;color:var(--gold2)}
  .wish-meaning{font-size:var(--fs-md);color:var(--muted);margin-bottom:6px}
  .wish-count{font-size:var(--fs-sm);color:var(--muted);margin:2px 0 0}
  .wish-count:empty{display:none}
  /* dopo il detto del giorno: due inviti, affiancati e discreti */
  .wish-dopo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .wish-dopo[hidden]{display:none}
  .modal-actions .wish-dopo button{padding:10px 12px;background:transparent;border:1px solid var(--card-border);
    color:var(--text);box-shadow:none;font-weight:600;font-size:var(--fs-sm)}
  .modal-actions .wish-dopo button:hover{border-color:var(--gold);transform:none}
  /* Il Genio del sito che esce dalla sua lampada (05/10/2026, prima c'era
     l'emoji 🪔): alone dorato dietro; sfregando la lampada vibra, il Genio
     saluta e sorride, le scintille si accendono */
  .wish-lamp{position:relative;display:flex;justify-content:center;margin:0 auto 4px}
  .wish-lamp::before{content:'';position:absolute;left:50%;top:46%;width:190px;height:190px;transform:translate(-50%,-50%);
    border-radius:50%;background:radial-gradient(circle, #e8c46838 0%, #e8c46814 45%, transparent 70%);pointer-events:none}
  .genie-3d.genie-wish{width:124px}
  .wish-lamp.sfregata .genie-lamp{animation:lampRub .55s ease}
  .wish-lamp.sfregata .g-arm{animation:genieWaveAgain 1.2s ease-in-out 1}
  .wish-lamp.sfregata .g-brow{transform:translateY(-4px)}
  .wish-lamp.sfregata .g-mouth{transform:scale(1.32)}
  .wish-lamp.sfregata .sparkle{animation-duration:.9s}
  @keyframes lampRub{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-4px) rotate(-4deg)}40%{transform:translateX(4px) rotate(3deg)}60%{transform:translateX(-3px) rotate(-2deg)}80%{transform:translateX(2px) rotate(1deg)}}
  @media (prefers-reduced-motion: reduce){ .wish-lamp.sfregata .genie-lamp, .wish-lamp.sfregata .g-arm, .wish-lamp .sparkle{animation:none} }
  /* Icone a linea (non emoji): prendono il colore del testo del pulsante */
  .ico{
    display:inline-block;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.45em;flex:none;
    background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;
  }
  .ico-share{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203v12'%2F%3E%3Cpath%20d%3D'M7%208l5-5%205%205'%2F%3E%3Cpath%20d%3D'M5%2013v6a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2v-6'%2F%3E%3C%2Fsvg%3E")}
  /* Frecce disegnate: i caratteri ← e → non sono nel font del sito e ogni
     telefono li disegnava con un suo font, più in basso o più sottili */
  .ico-freccia-sx{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M19%2012H5'%2F%3E%3Cpath%20d%3D'M11%206l-6%206%206%206'%2F%3E%3C%2Fsvg%3E")}
  .ico-freccia-dx{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2.2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M5%2012h14'%2F%3E%3Cpath%20d%3D'M13%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E");margin-right:0;margin-left:.3em}
  .ico-mic{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'9'%20y%3D'3'%20width%3D'6'%20height%3D'11'%20rx%3D'3'%2F%3E%3Cpath%20d%3D'M5%2011a7%207%200%200%200%2014%200'%2F%3E%3Cpath%20d%3D'M12%2018v3'%2F%3E%3C%2Fsvg%3E")}
  .ico-trash{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M4%207h16'%2F%3E%3Cpath%20d%3D'M10%2011v6'%2F%3E%3Cpath%20d%3D'M14%2011v6'%2F%3E%3Cpath%20d%3D'M6%207l1%2013a1%201%200%200%200%201%201h8a1%201%200%200%200%201-1l1-13'%2F%3E%3Cpath%20d%3D'M9%207V4h6v3'%2F%3E%3C%2Fsvg%3E")}
  .ico-download{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203v12'%2F%3E%3Cpath%20d%3D'M7%2010l5%205%205-5'%2F%3E%3Cpath%20d%3D'M5%2021h14'%2F%3E%3C%2Fsvg%3E")}
  .ico-spark{--ico:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203l1.9%205.1L19%2010l-5.1%201.9L12%2017l-1.9-5.1L5%2010l5.1-1.9z'%2F%3E%3Cpath%20d%3D'M19%2016l.7%201.8%201.8.7-1.8.7-.7%201.8-.7-1.8-1.8-.7%201.8-.7z'%2F%3E%3C%2Fsvg%3E")}
  /* CTA principale di ogni schermata: una fascia di luce la attraversa da
     sinistra a destra con due passaggi lenti (circa 1,8 s l'uno) e si ferma
     entro 5 secondi: WCAG 2.2.2 vuole che un movimento automatico finisca
     entro 5 s, ripetizioni comprese (tecnica G152). Torna "ogni tanto" solo
     in momenti precisi (vedi ctaShineReplay: il pulsante torna visibile, si
     torna sulla scheda), di nuovo al passaggio del mouse o col focus da
     tastiera; mai a ciclo continuo. Chi ha "riduci animazioni" non la vede. */
  .cta-shine{position:relative;overflow:hidden;isolation:isolate}
  /* La fascia è uno sfondo largo 3 volte il pulsante, trasparente tranne una
     striscia inclinata al centro (circa il 40% del pulsante), che scorre
     dentro il pulsante: spostando un elemento con transform la fascia usciva
     a destra e, anche se ritagliata, rendeva il pulsante più largo del suo
     spazio mentre passava. 90% = fascia fuori a sinistra, 5% = fuori a destra. */
  .cta-shine::after{
    content:"";position:absolute;inset:-2px 0;pointer-events:none;z-index:1;
    background:linear-gradient(108deg,transparent 43%,rgba(255,255,255,.6) 50%,transparent 57%) no-repeat;
    background-size:300% 100%;background-position:90% 0;
    animation:ctaShine 2.1s linear .6s 2;
  }
  .cta-shine:hover::after, .cta-shine:focus-visible::after{animation:ctaShineAgain 1.8s cubic-bezier(.45,0,.25,1) 1}
  .cta-shine.shine-reset::after{animation:none}
  /* 0-85% di ogni giro (1,8 s): il passaggio, morbido; poi una breve pausa.
     Totale: 0,6 s di attesa + 2 giri da 2,1 s = 4,8 s */
  @keyframes ctaShine{
    0%{background-position:90% 0;animation-timing-function:cubic-bezier(.45,0,.25,1)}
    85%{background-position:5% 0}
    100%{background-position:5% 0}
  }
  @keyframes ctaShineAgain{from{background-position:90% 0}to{background-position:5% 0}}
  @media (prefers-reduced-motion: reduce){ .cta-shine::after{display:none} }
  /* Ex attributi style="" (roadmap sicurezza S1, 02/10/2026): la CSP non
     consente più stili scritti negli elementi. I pallini e le tendenze si
     mostrano con la classe "acceso"; scheda ed elenco del dizionario seguono
     la classe dict-detail-open. */
  #wheelDot:not(.acceso), #genieDot:not(.acceso){display:none}
  #adviceText{margin-top:6px}
  .row.row-centrata{justify-content:center}
  #dictDetail{display:none}
  .dict-detail-open #dictDetail{display:block}
  .dict-detail-open #dictList{display:none}
  #historyTrendsCard:not(.acceso){display:none}
  .row.history-toolbar{margin-top:0}
  #historyList{margin-top:16px}
  .modal.wish-card{position:relative}
  .reassure.trend-intro{margin-top:0}
  #unlockHistoryBtn{margin-top:8px}
  #dictDreamBtn{width:100%;margin-top:6px}