/* ══ L'INVITO A METTERLO SULLA SCHERMATA HOME ════════════════════════════════
   In fondo allo schermo, dove arriva il pollice, e non in mezzo: una cosa che
   si può ignorare non deve mettersi davanti a quello che si sta leggendo.
   Sale dal basso una volta sola, e se ne va per un mese al primo «non adesso».

   Il foglio lo carica ogni cornice insieme al copione: il riquadro nasce dal
   JavaScript e senza stile sarebbe un blocco di testo bianco in fondo alla
   pagina — che è peggio che non averlo. */

  .inst{ position:fixed; left:0; right:0; z-index:9000;
    bottom:calc(env(safe-area-inset-bottom, 0px) + .7rem);
    padding:0 .7rem; pointer-events:none;
    transform:translateY(140%); opacity:0;
    transition:transform .34s cubic-bezier(.2,.9,.3,1), opacity .28s ease; }
  .inst.su{ transform:translateY(0); opacity:1; }

/* La carta è quella del sito: fondo profondo, filo chiaro sopra e scuro sotto,
   così ha un corpo invece di essere un rettangolo appoggiato. */
  .inst-carta{ pointer-events:auto; display:flex; gap:.85rem; align-items:flex-start;
    max-width:34rem; margin:0 auto; padding:.95rem 1rem 1rem;
    border-radius:18px;
    background:linear-gradient(180deg, #124a73 0%, #0a3d62 100%);
    border-top:1px solid rgba(255,255,255,.16);
    border-bottom:1px solid rgba(0,0,0,.35);
    box-shadow:0 18px 40px -16px rgba(4,20,36,.75); }

  .inst-icona{ flex:none; width:46px; height:46px; border-radius:12px;
    box-shadow:0 2px 8px -2px rgba(0,0,0,.5); }

  .inst-parole{ min-width:0; }

  .inst-titolo{ display:block; color:#fff; font-size:.98rem; font-weight:800;
    line-height:1.25; margin-bottom:.25rem; }

  .inst-detto{ margin:0 0 .8rem; color:rgba(255,255,255,.82);
    font-size:.82rem; line-height:1.5; }

  .inst-tasti{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }

/* L'oro dei bottoni del sito: è il colore di quello che si fa. */
  .inst-si{ border:0; border-radius:999px; padding:.55rem 1.15rem;
    background:linear-gradient(180deg, #f6c453 0%, #e2a92f 100%);
    color:#3a2a05; font:inherit; font-size:.86rem; font-weight:800;
    cursor:pointer; transition:transform .12s; }
  .inst-si:active{ transform:scale(.96); }

  .inst-no{ border:0; background:none; padding:.55rem .4rem;
    color:rgba(255,255,255,.6); font:inherit; font-size:.82rem;
    font-weight:600; cursor:pointer; }
  .inst-no:active{ color:rgba(255,255,255,.9); }