/* --- Angolo dei Ricordi: stile rituale --- */
#angolo-ricordi-wrap{
  width: 100%;
  text-align: center;
  margin: 16px 0 12px;
}

#angolo-ricordi-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 18px;
  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);

  font-weight: 800;
  letter-spacing: .35px;

  cursor: pointer;
  user-select: none;

  /* “aura” leggera */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 10px 30px rgba(0,0,0,.22);

  transition:
    transform .18s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    opacity .25s ease;
}

#angolo-ricordi-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.35);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 14px 40px rgba(0,0,0,.28);
}

#angolo-ricordi-btn:active{
  transform: translateY(0px) scale(.99);
}

/* anello esterno “respirante” */
#angolo-ricordi-btn::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  opacity: 0;
  transform: scale(.96);
  transition: opacity .25s ease, transform .25s ease;
}

#angolo-ricordi-btn:hover::before{
  opacity: 1;
  transform: scale(1);
}

/* scintilla/luce interna */
#angolo-ricordi-btn::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 55%);
  opacity: .35;
  pointer-events: none;
  transition: opacity .25s ease;
}

#angolo-ricordi-btn:hover::after{
  opacity: .5;
}

/* Stato: già custodito (consacrato) */
#angolo-ricordi-btn.is-saved{
  border-color: rgba(255,255,255,.38);
  background: rgba(255,255,255,.06);
}

#angolo-ricordi-btn.is-saved::after{
  opacity: .65;
}

/* Piccolo “sigillo” a sinistra (cerchio) */
#angolo-ricordi-btn .sigil{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 0 12px rgba(255,255,255,.15);
  opacity: .85;
  flex: 0 0 auto;
}

/* Quando salvato: sigillo pieno */
#angolo-ricordi-btn.is-saved .sigil{
  background: rgba(255,255,255,.38);
  box-shadow: 0 0 16px rgba(255,255,255,.22);
}

/* Animazione “consacrazione” */
#angolo-ricordi-btn.rite-done{
  animation: ritePulse 900ms ease-out 1;
}

@keyframes ritePulse{
  0%   { box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 30px rgba(0,0,0,.22); }
  35%  { box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 0 30px rgba(255,255,255,.18), 0 16px 45px rgba(0,0,0,.28); }
  100% { box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 30px rgba(0,0,0,.22); }
}

/* Messaggio sotto: discreto, “sussurrato” */
#angolo-ricordi-msg{
  margin-top: 10px;
  font-size: 14px;
  opacity: .78;
  letter-spacing: .2px;
}

/* --- Messaggio “incantesimo” --- */
#angolo-ricordi-msg{
  min-height: 1.2em;            /* evita “salti” mentre scrive */
  margin-top: 10px;
  font-size: 14px;
  opacity: .86;
  letter-spacing: .25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#angolo-ricordi-msg.is-typing .caret{
  display: inline-block;
  width: 10px;
  opacity: .9;
  animation: caretBlink 900ms steps(1) infinite;
}

@keyframes caretBlink{
  50%{ opacity: 0; }
}

/* lieve “apparizione” dell’area messaggio */
#angolo-ricordi-msg.reveal{
  animation: msgReveal 420ms ease-out 1;
}

@keyframes msgReveal{
  from { opacity: 0; transform: translateY(-2px); filter: blur(1px); }
  to   { opacity: .86; transform: translateY(0); filter: blur(0); }
}

/* --- Scintilla/particella --- */
#angolo-ricordi-wrap{
  position: relative;
}

.ritual-spark{
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  box-shadow:
    0 0 12px rgba(255,255,255,.22),
    0 0 28px rgba(255,255,255,.12);
  opacity: 0;
  pointer-events: none;
}

.ritual-spark.play{
  animation: sparkRise 920ms ease-out 1;
}

@keyframes sparkRise{
  0%   { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.6); filter: blur(0px); }
  20%  { opacity: .95; }
  70%  { opacity: .35; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-36px) scale(1.2); filter: blur(1px); }
}

/* --- Layout: bottone fermo, messaggio sotto --- */
#angolo-ricordi-wrap{
  width: 100%;
  text-align: center;
  margin: 16px 0 12px;
}

#angolo-ricordi-msg{
  margin-top: 10px;
  min-height: 2.4em; /* spazio fisso: non sposta il bottone */
  display: block;
}

/* Contenitore del testo “incanto” */
#angolo-ricordi-msg .spell{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  letter-spacing: .2px;
  line-height: 1.35;
}

/* Variante calda (custodito) */
#angolo-ricordi-msg .spell.warm{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 0 22px rgba(255,255,255,.08);
}

/* Variante fredda (sciolto) */
#angolo-ricordi-msg .spell.cold{
  background: rgba(0,0,0,.20);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 0 18px rgba(255,255,255,.05);
}

/* Testo arcano: gradiente + glow (senza essere pacchiano) */
#angolo-ricordi-msg .spell .text{
  font-weight: 800;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(255,255,255,.08);
}

/* Gradiente “felice” */
#angolo-ricordi-msg .spell.warm .text{
  background-image: linear-gradient(90deg,
    rgba(255,255,255,.95),
    rgba(255,230,170,.95),
    rgba(200,255,240,.92)
  );
}

/* Gradiente “delusione gentile” */
#angolo-ricordi-msg .spell.cold .text{
  background-image: linear-gradient(90deg,
    rgba(210,225,255,.92),
    rgba(190,240,255,.88),
    rgba(255,255,255,.88)
  );
}

/* Effetto “incanto”: emerge da un velo */
#angolo-ricordi-msg .spell.reveal{
  animation: veilReveal 1500ms ease-out 1;
}

@keyframes veilReveal{
  from { opacity: 0; transform: translateY(-2px); filter: blur(6px); }
  70%  { opacity: 1; filter: blur(0.8px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Shimmer arcano leggero sopra il testo */
#angolo-ricordi-msg .spell .shimmer{
  position: relative;
  display: inline-block;
}

#angolo-ricordi-msg .spell .shimmer::after{
  content: "";
  position: absolute;
  inset: -2px -6px;
  border-radius: 12px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,255,255,.22),
    transparent
  );
  opacity: 0;
  transform: translateX(-40%);
  pointer-events: none;
}

#angolo-ricordi-msg .spell.reveal .shimmer::after{
  animation: shimmerPass 900ms ease-out 1;
}

@keyframes shimmerPass{
  0%   { opacity: 0; transform: translateX(-55%); }
  25%  { opacity: .65; }
  60%  { opacity: .25; }
  100% { opacity: 0; transform: translateX(55%); }
}

/* Link discreto */
#angolo-ricordi-msg .spell a{
  display: inline-block;
  margin-top: 6px;
  font-weight: 700;
  font-size: 13px;
  opacity: .82;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
  padding-bottom: 2px;
}

#angolo-ricordi-msg .spell a:hover{
  opacity: 1;
  border-bottom-color: rgba(255,255,255,.38);
}