/* ============================================================
   FULLY — Polish 1.1
   Transizioni tra schermate + micro-interazioni sui controlli.
   Additivo e non invasivo: rispetta "riduci animazioni".
   ============================================================ */

/* --- Ingresso morbido di ogni schermata (sul cambio di rotta) --- */
@keyframes fx-screen-in {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.app-root > * {
  animation: fx-screen-in .34s cubic-bezier(.22, .61, .36, 1) both;
}

/* --- Micro-interazione al tocco: i controlli "rispondono" --- */
.btn, .ans, .plan, .listen-btn, .app-header__chip, .app-header__avatar {
  transition: transform .12s cubic-bezier(.22, .61, .36, 1),
              box-shadow .18s ease, filter .18s ease;
  will-change: transform;
}
.btn:active, .ans:active, .plan:active,
.listen-btn:active, .app-header__chip:active, .app-header__avatar:active {
  transform: translateY(1px) scale(.96);
}
@media (hover: hover) {
  .btn:hover, .plan:hover { filter: brightness(1.06); }
}

/* --- Pulsante "Ascolta": pulsazione invitante quando è in attesa --- */
@keyframes fx-listen-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(47, 143, 255, .45); }
  50%      { box-shadow: 0 0 0 14px rgba(47, 143, 255, 0); }
}
.listen-btn:not(.is-playing) {
  animation: fx-listen-pulse 2.2s ease-in-out infinite;
}

/* --- Rispetta la preferenza di accessibilità "riduci animazioni" --- */
.reduce-motion .app-root > *,
.reduce-motion .listen-btn:not(.is-playing) {
  animation: none !important;
}

/* ============================================================
   FULLY — Polish 2.0 (rifinitura Supercell/Brawl kid-friendly)
   Estende il feedback tattile ad altri controlli e dà più vita
   alle ricompense (stelle, monete, medaglie, XP). Additivo,
   rispetta prefers-reduced-motion tramite i catch-all globali
   già presenti in tokens.css / components.css.
   ============================================================ */

/* --- Estensione tattile: controlli che ancora non "premevano" --- */
.room-card, .compare__btn, .toggle, .feature, .skill, .stat, .benefit, .plan {
  transition: transform var(--t-fast), box-shadow var(--t), filter var(--t);
}
.room-card:active, .compare__btn:active, .toggle:active {
  transform: scale(0.96);
}
@media (hover: hover) {
  .feature:hover, .skill:hover, .stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-pop);
  }
}

/* --- Ricompense: bagliore dorato "che respira" su chip/pill in evidenza --- */
@keyframes fx-gold-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(247, 213, 72, 0); }
  50%      { box-shadow: var(--glow-gold); }
}
.pill--gold, .app-header__chip--map {
  animation: fx-gold-breathe 3.2s ease-in-out infinite;
}

/* --- Badge/medaglie: piccolo respiro per invitare al tocco --- */
@keyframes fx-badge-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.badge:not(.is-locked) .badge__icon {
  animation: fx-badge-bob 3s ease-in-out infinite;
}

/* --- Distintivo XP: bagliore pulsante per enfatizzare la ricompensa --- */
@keyframes fx-badge-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 220, 120, 0)); }
  50%      { filter: drop-shadow(0 0 8px rgba(255, 220, 120, .6)); }
}
.xp-bar__badge {
  animation: fx-badge-glow 2.4s ease-in-out infinite;
}

/* ---- Premio "Mondo Perfetto": apertura Bustina Oro ---- */
.gp-reward .gp-pack{ font-size:74px; line-height:1;
  filter:drop-shadow(0 8px 18px rgba(240,170,20,.55));
  animation:gp-pop .6s cubic-bezier(.22,1,.36,1) both; }
@keyframes gp-pop{ 0%{transform:scale(.3) rotate(-12deg);opacity:0}
  60%{transform:scale(1.15) rotate(4deg)} 100%{transform:scale(1) rotate(0);opacity:1} }
.gp-grid{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:6px auto 0; max-width:440px; }
.gp-item{ flex:0 0 118px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:12px 8px; display:flex; flex-direction:column; align-items:center; gap:3px;
  animation:gp-rise .5s ease both; }
.gp-item b{ font-size:14px } .gp-item span{ font-size:11px; color:rgba(255,255,255,.62) }
.gp-emo{ font-size:34px; line-height:1 }
.gp-item--card img{ width:74px; height:100px; object-fit:cover; border-radius:9px;
  box-shadow:0 6px 14px rgba(0,0,0,.4) }
.gp-ph{ font-size:44px }
@keyframes gp-rise{ from{transform:translateY(10px);opacity:0} to{transform:translateY(0);opacity:1} }