/**
 * Panda col martello: il gioco che accompagna il download del catalogo.
 *
 * Scena a tutto schermo, fondo crema con i bambu' mossi dalla brezza.
 * Dall'alto: avanzamento del download, punteggi, arena (panda + banco di
 * sabbia con quattro buche), tasti. Tutte le animazioni lavorano solo su
 * transform e opacity, cosi' non rubano tempo al download.
 *
 * Il panda e' un foglio di sei pose (assets/images/panda-pose.webp, 3x2): si
 * cambia posa spostando background-position, quindi il cambio e' istantaneo
 * e non scarica niente.
 */

/* ------------------------------------------------------------- scena ---- */

/* Lo sfondo e' l'acquerello della versione fatta con ChatGPT: bambu' ai lati e
   pietra in basso. Il colore sotto serve finche' l'immagine non e' arrivata. */
#progressBarContainer.ha-gioco {
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  background: #fbf3e4 url("/assets/images/panda-giardino.webp") no-repeat center bottom / cover;
  backdrop-filter: none;
  align-items: stretch;
  justify-content: center;
}

/* Niente bambu' che oscillano: lo sfondo e' un acquerello in un pezzo solo, e
   i veli sovrapposti per muoverne i lati lo sdoppiavano (verificato alla
   massima inclinazione). Il vento lo danno le foglioline. */

/* foglioline che scendono portate dal vento */
.pg-foglia {
  position: absolute;
  top: -20px;
  width: 14px;
  height: 7px;
  border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, #b8d29a, #86a66c);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: pg-cade 14s linear infinite;
}

@keyframes pg-cade {
  0%   { opacity: 0;   transform: translate(0, 0) rotate(0deg); }
  8%   { opacity: .7; }
  50%  { transform: translate(60px, 50vh) rotate(220deg); }
  92%  { opacity: .5; }
  100% { opacity: 0;   transform: translate(-30px, 105vh) rotate(420deg); }
}

/* ---------------------------------------------------- colonna centrale ---- */

#progressBarWRAP.ha-gioco {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  max-width: 440px;
  height: 100%;
  margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top, 0px)) 22px calc(14px + env(safe-area-inset-bottom, 0px));
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  gap: 0;
}

#progressBarWRAP.ha-gioco > * { min-width: 0; }

/* --------------------------------------------------------- testata ---- */

.pg-testata {
  position: relative;
  text-align: center;
}

/* audio a sinistra, catalogo a destra: agli angoli, fuori dal flusso */
.pg-icona {
  position: absolute;
  top: -11px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(160, 120, 90, .18);
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  color: #8a5a3c;
  font-size: 1.1rem;
  font-weight: 800;
  font-family: Georgia, "Noto Serif", serif;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(120, 80, 50, .1);
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background-color .15s ease;
}

.pg-icona:active { transform: scale(.92); }
.pg-icona svg { width: 20px; height: 20px; pointer-events: none; } /* il tocco va sempre al pulsante */
.pg-icona--sx { left: 0; }
.pg-icona--dx { right: 0; }
.pg-icona[aria-pressed="false"] { color: #b3a79f; }

.pg-sovratitolo {
  font-size: .68rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: #7a6d63;
}

.pg-titolo {
  margin: 18px 0 12px;
  font-family: Georgia, "Noto Serif", "Times New Roman", serif;
  font-size: clamp(1.25rem, 5.7vw, 1.8rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  color: #2a2421;
}

.pg-riga {
  position: relative;
  height: 46px;
}

.pg-avanzamento {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity .25s ease, transform .25s ease;
}

.pg-chiudi {
  position: absolute;
  inset: 0;
  width: 100%;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #e3674a, #c9503a);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 4px 0 #a0402c, 0 8px 18px rgba(201, 80, 58, .28);
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.3, 1.5, .5, 1);
  -webkit-tap-highlight-color: transparent;
}

.pg-chiudi::after { content: "\00a0\00a0\2192"; }
.pg-chiudi:active { transform: translateY(3px) scale(1); box-shadow: 0 1px 0 #a0402c; }

.pg-riga.is-finito .pg-avanzamento { opacity: 0; transform: scale(.96); pointer-events: none; }
.pg-riga.is-finito .pg-chiudi { opacity: 1; transform: scale(1); pointer-events: auto; }

.pg-barra {
  position: relative;
  flex: 1;
  height: 13px;
}

#progressBarWRAP.ha-gioco #progressBar_BG,
#progressBarWRAP.ha-gioco #progressBar {
  position: absolute;
  top: 0;
  left: 0;
  height: 13px;
  margin: 0;
  border-radius: 999px;
}

#progressBarWRAP.ha-gioco #progressBar_BG {
  right: 0;
  background: #efe5dc;
  box-shadow: inset 0 1px 2px rgba(80, 50, 30, .12);
}

#progressBarWRAP.ha-gioco #progressBar {
  background: linear-gradient(90deg, #e08a6c, #cf6a4f 60%, #c95f45);
  box-shadow: 0 1px 4px rgba(201, 95, 69, .35);
  overflow: hidden;
}

/* un riflesso che scorre sulla barra: si capisce che sta lavorando */
#progressBarWRAP.ha-gioco #progressBar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: pg-riflesso 2.2s ease-in-out infinite;
}

@keyframes pg-riflesso {
  to { transform: translateX(100%); }
}

.pg-percento {
  min-width: 48px;
  text-align: right;
  font-size: 1.15rem;
  font-weight: 800;
  color: #c95f45;
  font-variant-numeric: tabular-nums;
}

.pg-sottotitolo {
  margin-top: 10px;
  font-size: .92rem;
  color: #7a6d63;
}

/* -------------------------------------------------------- punteggi ---- */

.pg-punteggi {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.pg-pillola {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(160, 120, 90, .12);
  box-shadow: 0 2px 8px rgba(120, 80, 50, .06);
}

.pg-pillola svg { width: 22px; height: 22px; flex: 0 0 auto; }

.pg-pillola__etichetta {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6e6259;
}

.pg-pillola__valore {
  display: inline-block;
  font-size: 1.35rem;
  font-weight: 800;
  color: #c95f45;
  font-variant-numeric: tabular-nums;
}

.pg-pillola__valore.is-scatto { animation: pg-scatto .35s cubic-bezier(.3, 1.6, .5, 1); }

@keyframes pg-scatto {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.32); color: #e07a3a; }
  100% { transform: scale(1); }
}

.pg-divisore {
  width: 1px;
  height: 28px;
  background: rgba(120, 90, 70, .18);
}

/* nuovo record: la pillola brilla */
.pg-pillola--record.is-nuovo { animation: pg-record 1s ease-out; }

@keyframes pg-record {
  0%, 100% { box-shadow: 0 2px 8px rgba(120, 80, 50, .06); }
  30%      { box-shadow: 0 0 0 6px rgba(240, 180, 60, .35), 0 2px 12px rgba(240, 160, 40, .4); }
}

/* ----------------------------------------------------------- arena ---- */

.pg-arena {
  position: relative;
  height: clamp(230px, 38vh, 300px);
  margin-top: 6px;
}

.pg-arena.is-scossa { animation: pg-scossa .22s ease-out; }

@keyframes pg-scossa {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-3px, 2px); }
  50%      { transform: translate(3px, -1px); }
  75%      { transform: translate(-1px, 1px); }
}

/* il panda: sei pose in un foglio, si sceglie con background-position */
.pg-panda {
  --lato: clamp(150px, 46vw, 196px);
  position: absolute;
  left: 50%;
  bottom: 31%;
  width: var(--lato);
  height: var(--lato);
  margin-left: calc(var(--lato) / -2);
  background: url("/assets/images/panda-pose.webp") no-repeat;
  background-size: 300% 200%;
  background-position: 0% 0%;
  transform-origin: 50% 92%;
  transition: left .2s cubic-bezier(.35, .9, .35, 1.08);
  z-index: 2;
  pointer-events: none;
  will-change: transform, left;
  filter: drop-shadow(0 8px 10px rgba(90, 60, 40, .16));
}

/* pose: colonna x riga del foglio */
.pg-panda[data-posa="attesa"]   { background-position:   0%   0%; }
.pg-panda[data-posa="carica"]   { background-position:  50%   0%; }
.pg-panda[data-posa="colpo"]    { background-position: 100%   0%; }
.pg-panda[data-posa="festa"]    { background-position:   0% 100%; }
.pg-panda[data-posa="deluso"]   { background-position:  50% 100%; }
.pg-panda[data-posa="sorpreso"] { background-position: 100% 100%; }

/* respiro a riposo */
.pg-panda[data-posa="attesa"] { animation: pg-respiro 2.6s ease-in-out infinite; }

@keyframes pg-respiro {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(-2px) scale(1.012, .988); }
}

/* carica: si raccoglie prima del colpo */
.pg-panda[data-posa="carica"] { animation: pg-carica .1s ease-out forwards; }

@keyframes pg-carica {
  from { transform: translateY(0) scale(1, 1); }
  to   { transform: translateY(-10px) scale(.96, 1.05); }
}

/* colpo: schiacciato a terra, poi rimbalza */
.pg-panda[data-posa="colpo"] { animation: pg-impatto .3s cubic-bezier(.2, 1.6, .5, 1) forwards; }

@keyframes pg-impatto {
  0%   { transform: translateY(4px) scale(1.12, .86); }
  55%  { transform: translateY(-2px) scale(.97, 1.03); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* festa: salta */
.pg-panda[data-posa="festa"] { animation: pg-salto .62s cubic-bezier(.3, .7, .4, 1) forwards; }

@keyframes pg-salto {
  0%   { transform: translateY(0) scale(1.06, .94); }
  35%  { transform: translateY(-34px) scale(.96, 1.05) rotate(-3deg); }
  60%  { transform: translateY(-26px) scale(1, 1) rotate(2deg); }
  85%  { transform: translateY(0) scale(1.07, .93); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* deluso: si affloscia */
.pg-panda[data-posa="deluso"] { animation: pg-affloscia .5s ease-out forwards; }

@keyframes pg-affloscia {
  0%   { transform: translateY(0) scale(1, 1); }
  40%  { transform: translateY(4px) scale(1.04, .95) rotate(-2deg); }
  100% { transform: translateY(2px) scale(1.01, .99) rotate(0deg); }
}

/* sorpreso: piccolo sobbalzo quando spunta un oggetto raro */
.pg-panda[data-posa="sorpreso"] { animation: pg-sobbalzo .4s cubic-bezier(.3, 1.8, .5, 1) forwards; }

@keyframes pg-sobbalzo {
  0%   { transform: translateY(0) scale(1, 1); }
  45%  { transform: translateY(-12px) scale(.97, 1.04); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* L'isola di sabbia appena rialzata e le quattro tane: un'ombra, il bordo
   chiaro, il fondo scuro, e il labbro davanti che copre la base dell'oggetto
   (cosi' l'oggetto esce dal buco). Ripresi dalla versione fatta con ChatGPT,
   che li disegnava su canvas. */
.pg-banco {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: 4%;
  height: 36%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(234, 214, 172, .55) 0%, rgba(234, 216, 183, .45) 60%, rgba(247, 241, 223, 0) 100%);
  z-index: 3;
}

.pg-buche {
  position: absolute;
  left: 14%;
  right: 14%;
  top: 30%;
  display: flex;
  justify-content: space-between;
  z-index: 4;
}

.pg-buca {
  position: relative;
  width: 21.5%;
  aspect-ratio: 2.7;
}

/* ombra morbida sotto la tana */
.pg-buca::before {
  content: "";
  position: absolute;
  left: -7%;
  right: -7%;
  top: 6%;
  bottom: -32%;
  border-radius: 50%;
  background: rgba(184, 162, 123, .3);
  filter: blur(1px);
}

/* il bordo chiaro e il fondo scuro della tana */
.pg-buca__fondo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #f6e9cd;
}

.pg-buca__fondo::after {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 14%;
  bottom: 0;
  border-radius: 50%;
  background: linear-gradient(#4f4030, #8c7453);
  box-shadow: inset 0 4px 6px rgba(0, 0, 0, .35);
}

/* l'oggetto esce da qui: la maschera taglia quello che sta sotto il bordo */
.pg-buca__bocca {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 42%;
  height: 330%;
  overflow: hidden;
  z-index: 2;
}

/* il labbro davanti, sopra la base dell'oggetto */
.pg-buca__labbro {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 14%;
  bottom: -4%;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: #dbc49d;
  z-index: 3;
  pointer-events: none;
}

.pg-numero {
  position: absolute;
  left: 50%;
  top: 150%;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  color: #9d8768;
  background: rgba(255, 251, 239, .75);
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}

.pg-buca.is-attiva .pg-numero {
  transform: scale(1.12);
  background: #fff;
  color: #c95f45;
}

/* ------------------------------------------------------------ oggetti ---- */

.pg-oggetto {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 84%;
  margin-left: -42%;
  aspect-ratio: .86;
  transform: translateY(105%);
  transform-origin: 50% 100%;
  will-change: transform;
}

.pg-oggetto img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 3px 3px rgba(80, 55, 35, .22));
}

/* esce con una molla */
.pg-oggetto.is-fuori { animation: pg-esce .34s cubic-bezier(.25, 1.55, .45, 1) forwards; }

@keyframes pg-esce {
  0%   { transform: translateY(105%) scale(.9, 1.1); }
  70%  { transform: translateY(-6%) scale(1.04, .97); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* a riposo fuori dalla buca: un leggero dondolio, per sembrare vivo */
.pg-oggetto.is-fuori.is-fermo { animation: pg-dondola 1.1s ease-in-out infinite; }

@keyframes pg-dondola {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3%) rotate(2.5deg); }
}

/* rientra: scappa giu' veloce */
.pg-oggetto.is-scappa { animation: pg-scappa .22s cubic-bezier(.6, 0, .8, .4) forwards; }

@keyframes pg-scappa {
  from { transform: translateY(0); }
  to   { transform: translateY(110%); }
}

/* colpito: schiacciato e via */
.pg-oggetto.is-colpito { animation: pg-schiacciato .36s cubic-bezier(.3, .6, .4, 1) forwards; }

@keyframes pg-schiacciato {
  0%   { transform: translateY(0) scale(1, 1); }
  25%  { transform: translateY(14%) scale(1.35, .5); }
  60%  { transform: translateY(40%) scale(1.25, .42); opacity: 1; }
  100% { transform: translateY(110%) scale(1.1, .4); opacity: 0; }
}

/* l'oggetto raro brilla */
.pg-alone {
  position: absolute;
  left: -18%;
  right: -18%;
  top: 4%;
  bottom: -6%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 110, .85) 0%, rgba(255, 210, 90, 0) 68%);
  animation: pg-alone 1s ease-in-out infinite;
}

@keyframes pg-alone {
  0%, 100% { opacity: .35; transform: scale(.9); }
  50%      { opacity: .85; transform: scale(1.12); }
}

/* --------------------------------------------------------- effetti ---- */

.pg-effetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}

/* i trattini di "eccolo!" sopra l'oggetto appena spuntato */
.pg-scintilla {
  position: absolute;
  width: 4px;
  height: 12px;
  margin-left: -2px;
  border-radius: 4px;
  background: #f0a35a;
  transform-origin: 50% 100%;
  animation: pg-scintilla .5s ease-out forwards;
}

.pg-scintilla--oro { background: #f2c230; }

@keyframes pg-scintilla {
  0%   { opacity: 0; transform: rotate(var(--r)) translateY(4px) scaleY(.4); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--r)) translateY(-14px) scaleY(1); }
}

/* granelli di sabbia quando il martello colpisce */
.pg-granello {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #d8bf98;
  animation: pg-granello .55s cubic-bezier(.2, .7, .4, 1) forwards;
}

@keyframes pg-granello {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.4); }
}

/* stelline del colpo */
.pg-stella {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  background: #ffd25e;
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  animation: pg-stella .6s ease-out forwards;
}

@keyframes pg-stella {
  0%   { opacity: 1; transform: translate(0, 0) scale(.3) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(160deg); }
}

/* i punti che volano */
.pg-punti-volanti {
  position: absolute;
  font-weight: 900;
  font-size: 1.3rem;
  white-space: nowrap;
  transform: translate(-50%, 0);
  text-shadow: 0 2px 0 rgba(255, 255, 255, .9), 0 3px 8px rgba(0, 0, 0, .15);
  animation: pg-sale .8s cubic-bezier(.2, .8, .3, 1) forwards;
}

@keyframes pg-sale {
  0%   { opacity: 0; transform: translate(-50%, 6px) scale(.6); }
  20%  { opacity: 1; transform: translate(-50%, -4px) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}

/* la combo, in alto nell'arena */
.pg-combo {
  position: absolute;
  left: 50%;
  top: 2%;
  z-index: 7;
  padding: 4px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f2b33d, #e7843a);
  color: #fff;
  font-weight: 900;
  font-size: .95rem;
  letter-spacing: .04em;
  box-shadow: 0 4px 12px rgba(230, 130, 50, .35);
  transform: translate(-50%, -8px) scale(.6);
  opacity: 0;
  transition: opacity .2s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}

.pg-combo.is-visibile { opacity: 1; transform: translate(-50%, 0) scale(1); }
.pg-combo.is-scatto   { animation: pg-scatto-combo .35s cubic-bezier(.3, 1.6, .5, 1); }

@keyframes pg-scatto-combo {
  0%   { transform: translate(-50%, 0) scale(1); }
  40%  { transform: translate(-50%, 0) scale(1.25); }
  100% { transform: translate(-50%, 0) scale(1); }
}

/* -------------------------------------------- catalogo degli oggetti ---- */

.pg-catalogo {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(60, 40, 28, .38);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .2s ease;
}

.pg-catalogo.is-visibile { opacity: 1; }

/* L'attributo hidden non basta: display:flex qui sopra lo scavalca, e la
   finestra restava trasparente sopra tutto il gioco, mangiandosi ogni tocco.
   Chiusa deve sparire davvero, e anche durante la dissolvenza non si tocca. */
.pg-catalogo[hidden] { display: none; }
.pg-catalogo:not(.is-visibile) { pointer-events: none; }

.pg-catalogo__scheda {
  position: relative;
  width: 100%;
  max-width: 400px;
  max-height: 88%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 20px 20px;
  border-radius: 22px;
  background: #fffaf3;
  box-shadow: 0 20px 50px rgba(60, 40, 28, .3);
  text-align: center;
  transform: translateY(14px) scale(.97);
  transition: transform .28s cubic-bezier(.3, 1.4, .5, 1);
}

.pg-catalogo.is-visibile .pg-catalogo__scheda { transform: translateY(0) scale(1); }

.pg-catalogo__x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: #f1e6da;
  color: #8a5a3c;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.pg-catalogo__titolo {
  margin: 6px 0 8px;
  font-family: Georgia, "Noto Serif", "Times New Roman", serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #2a2421;
}

.pg-catalogo__testo {
  margin: 0 0 14px;
  font-size: .86rem;
  line-height: 1.4;
  color: #7a6d63;
}

.pg-catalogo__griglia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.pg-catalogo__voce {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(160, 120, 90, .12);
  text-align: left;
}

.pg-catalogo__voce.is-raro {
  border-color: rgba(214, 160, 40, .55);
  background: linear-gradient(135deg, #fffbea, #fff);
}

.pg-catalogo__voce img {
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  object-fit: contain;
}

.pg-catalogo__testi {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: .78rem;
  line-height: 1.25;
  color: #3a312c;
}

.pg-catalogo__testi b { font-size: .82rem; }
.pg-catalogo__punti { font-weight: 800; }
.pg-catalogo__testi small { color: #9a8d82; font-size: .7rem; }

.pg-catalogo__regole {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f6ece0;
  font-size: .8rem;
  line-height: 1.45;
  color: #5e5148;
  text-align: left;
}

.pg-catalogo__torna {
  width: 100%;
  margin-top: 14px;
  padding: 13px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(135deg, #e3674a, #c9503a);
  color: #fff;
  font-size: .98rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 0 #a0402c;
}

.pg-catalogo__torna:active { transform: translateY(3px); box-shadow: 0 1px 0 #a0402c; }

/* ------------------------------------------------------------- tasti ---- */

.pg-istruzione {
  margin-top: 4px;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: #3a312c;
}

.pg-pulsanti {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-top: 16px;
  padding: 18px 2px 12px;
}

/* ad arco: i due centrali piu' in alto */
.pg-tasto:nth-child(2),
.pg-tasto:nth-child(3) { transform: translateY(-15px); }

/* Pulsante arcade: zoccolo marrone con la base color sabbia sotto (le ombre a
   strati), e sopra la faccia arancione sollevata, con l'anello chiaro. */
.pg-tasto {
  position: relative;
  flex: 0 0 auto;
  width: calc((100% - 42px) / 4);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(#9e5039, #8e4b38);
  box-shadow: 0 6px 0 #7e4e3b, 0 11px 0 #cab99f, 0 15px 17px rgba(118, 88, 61, .16);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: filter .1s ease;
}

.pg-tasto__faccia {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 37% 24%, #f2a17e 0, #e17c58 50%, #d46b49 100%);
  border: 2px solid #f3ac8b;
  box-shadow:
    inset 0 2px 2px rgba(255, 214, 182, .5),
    inset 0 -5px 3px rgba(185, 83, 46, .27),
    0 3px 0 #b85a3e;
  color: #fff;
  font: bold clamp(1.5rem, 7vw, 2rem) Georgia, "Noto Serif", serif;
  text-shadow: 0 2px #b75f43;
  transform: translateY(-7px);
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
}

.pg-tasto.is-premuto .pg-tasto__faccia {
  transform: translateY(2px);
  box-shadow:
    inset 0 2px 3px rgba(255, 214, 182, .38),
    inset 0 -2px 4px rgba(185, 83, 46, .31);
}

/* invito: la sua buca ha un oggetto fuori */
.pg-tasto.is-pronto .pg-tasto__faccia { animation: pg-invito .7s ease-in-out infinite; }

@keyframes pg-invito {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.12) saturate(1.08); }
}

.pg-tasto__anello {
  position: absolute;
  left: -8%;
  right: -8%;
  top: -14%;
  bottom: -2%;
  border-radius: 50%;
  border: 3px solid rgba(242, 179, 61, .9);
  opacity: 0;
  pointer-events: none;
}

.pg-tasto.is-pronto .pg-tasto__anello { animation: pg-anello .9s ease-out infinite; }

@keyframes pg-anello {
  0%   { opacity: .9; transform: scale(.92); }
  100% { opacity: 0;  transform: scale(1.18); }
}

/* colpo riuscito: la faccia diventa dorata */
.pg-tasto.is-ok .pg-tasto__faccia {
  background: radial-gradient(circle at 37% 24%, #f7c07b, #e38e46);
  border-color: #f8cf96;
}

/* a vuoto: tremolio e colori spenti */
.pg-tasto.is-no { filter: saturate(.45) brightness(.95); animation: pg-tremolio .3s ease-out; }

.pg-tasto:nth-child(2).is-no,
.pg-tasto:nth-child(3).is-no { animation-name: pg-tremolio-alto; }

@keyframes pg-tremolio {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(2px); }
}

/* i due centrali tremano restando sollevati */
@keyframes pg-tremolio-alto {
  0%, 100% { transform: translate(0, -15px); }
  20%      { transform: translate(-5px, -15px); }
  40%      { transform: translate(5px, -15px); }
  60%      { transform: translate(-3px, -15px); }
  80%      { transform: translate(2px, -15px); }
}

.pg-aiuto {
  margin-top: 14px;
  text-align: center;
  font-size: .86rem;
  color: #7a6d63;
}

.pg-piede {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  font-size: .78rem;
  color: #8b7e74;
}

.pg-piede svg { width: 20px; height: 20px; color: #c95f45; }
.pg-piede__sep { width: 1px; height: 18px; background: rgba(120, 90, 70, .2); }

/* schermi bassi: si stringe l'arena, non i tasti */
@media (max-height: 700px) {
  .pg-titolo { font-size: 1.3rem; margin: 4px 0 10px; }
  .pg-punteggi { margin-top: 10px; }
  .pg-pillola { padding: 7px 10px; }
  .pg-arena { height: clamp(190px, 34vh, 240px); }
  .pg-aiuto { margin-top: 8px; }
  .pg-aiuto__testo { display: none; }
  .pg-record-tutti { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .pg-miccia, .pg-fine__regalo,
  .pg-foglia,
  .pg-panda, .pg-oggetto.is-fuori.is-fermo,
  .pg-tasto.is-pronto .pg-tasto__faccia,
  .pg-tasto.is-pronto .pg-tasto__anello,
  #progressBarWRAP.ha-gioco #progressBar::after { animation: none !important; }
  .pg-foglia { display: none; }
}

@keyframes pg-velatura {
  0%   { opacity: 0; }
  20%  { opacity: .45; }
  100% { opacity: 0; }
}

/* ===================================================================
   Cuori, bombe, salvadanaio, fine partita
   =================================================================== */

/* ---------------------------------------------- record di tutti ---- */

.pg-record-tutti {
  margin-top: 7px;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .04em;
  color: #8b7e74;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pg-record-tutti[hidden] { display: none; }

/* ------------------------- riga fra arena e tasti: cuori | testo | scappati */

/* tre colonne fisse: i messaggi al centro cambiano senza spostare i lati */
.pg-stato-vita {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.pg-stato-vita .pg-istruzione {
  margin: 0;
  max-width: 200px;
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s ease;
}

.pg-istruzione.is-respiro { color: #4f8a5b; }
.pg-istruzione.is-pericolo { color: #c0392b; font-weight: 800; }
.pg-istruzione.is-scatto { animation: pg-scatto .35s cubic-bezier(.3, 1.6, .5, 1); }

.pg-cuori {
  justify-self: start;
  display: flex;
  gap: 3px;
}

.pg-cuore { display: inline-flex; }
.pg-cuore svg { width: 21px; height: 21px; overflow: visible; }
.pg-cuore__pieno { fill: #e2674a; transition: fill .3s ease; }
.pg-cuore__crepa { stroke: transparent; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.pg-cuore.is-perso .pg-cuore__pieno { fill: #d9cec5; }
.pg-cuore.is-perso .pg-cuore__crepa { stroke: #fffaf3; }
.pg-cuore.is-spezzato { animation: pg-cuore-rotto .65s ease-out; }

@keyframes pg-cuore-rotto {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.5) rotate(-12deg); }
  45%  { transform: scale(1.3) rotate(10deg); }
  65%  { transform: scale(1.1) rotate(-6deg); }
  100% { transform: scale(1) rotate(0); }
}

.pg-scappati {
  justify-self: end;
  display: flex;
  align-items: baseline;
  gap: 4px;
  white-space: nowrap;
}

.pg-scappati__etichetta {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8b7e74;
}

.pg-scappati__valore {
  display: inline-block;
  font-size: .9rem;
  font-weight: 800;
  color: #6e6259;
  font-variant-numeric: tabular-nums;
}

.pg-scappati.is-quasi .pg-scappati__valore { color: #c0392b; }

/* telefoni strettissimi: il contatore resta, l'etichetta no, e il testo al
   centro ci sta intero */
@media (max-width: 360px) {
  .pg-scappati__etichetta { display: none; }
  .pg-stato-vita .pg-istruzione { font-size: .84rem; }
}
.pg-scappati__valore.is-scatto { animation: pg-scatto .35s cubic-bezier(.3, 1.6, .5, 1); }

/* ------------------------------------------------------ salvadanaio ---- */

.pg-aiuto__testo[hidden],
.pg-salvadanaio[hidden] { display: none; }

.pg-salvadanaio {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pg-salvadanaio__etichetta {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6e6259;
  white-space: nowrap;
}

.pg-salvadanaio__barra {
  flex: 1;
  min-width: 40px;
  height: 8px;
  border-radius: 999px;
  background: rgba(120, 90, 70, .15);
  overflow: hidden;
}

.pg-salvadanaio__pieno {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f2b33d, #e7843a);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s ease;
}

.pg-salvadanaio__valore {
  font-size: .74rem;
  font-weight: 800;
  color: #c95f45;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ bomba ---- */

.pg-oggetto .pg-bomba {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 3px rgba(40, 25, 15, .3));
}

/* la scintilla in cima alla miccia */
.pg-miccia {
  position: absolute;
  z-index: 2;
  left: 74%;
  top: 2%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0, #ffd23d 40%, #ff7a1a 70%, transparent 72%);
  box-shadow: 0 0 10px 4px rgba(255, 150, 40, .7);
  animation: pg-sfrigola .12s steps(2) infinite alternate;
}

@keyframes pg-sfrigola {
  from { transform: scale(.75) rotate(0deg); opacity: .8; }
  to   { transform: scale(1.25) rotate(40deg); opacity: 1; }
}

.pg-oggetto.is-esploso { animation: pg-esploso .3s ease-out forwards; }

@keyframes pg-esploso {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(0) scale(1.8); opacity: 0; }
}

/* sul tasto della buca con la bomba: niente invito, un avviso */
.pg-tasto.is-pericolo .pg-tasto__faccia {
  background: radial-gradient(circle at 37% 24%, #9a918b 0, #6d6560 60%, #57504b 100%);
  border-color: #aaa19a;
  text-shadow: 0 2px #3f3935;
}

.pg-catalogo__voce.is-bomba { background: #efe7e2; }
.pg-catalogo__voce .pg-bomba { width: 44px; height: 44px; flex: 0 0 auto; }
.pg-catalogo__voce.is-bomba .pg-catalogo__punti { color: #c0392b; }

/* il panda dopo lo scoppio: annerito per un attimo */
.pg-panda { transition: filter .35s ease; }
.pg-panda.is-annerito { filter: brightness(.38) sepia(.5) contrast(1.2); }

/* ------------------------------------------- esplosione: tutta la scena ---- */

.pg-boom {
  position: absolute;
  inset: 0;
  z-index: 15;
  overflow: hidden;
  pointer-events: none;
}

/* la tela dell'esplosione: fuoco, braci, fumo e nebbia (panda-game.js, Esplosione) */
.pg-boom__tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* solo con "riduci animazioni": una velatura calda al posto dell'esplosione */
.pg-boom__lampo {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, #fffef6 0, #fff3c9 45%, rgba(255, 220, 170, .7) 100%);
  animation: pg-velatura .9s ease-out forwards;
}

/* lo scossone prende tutta la colonna del gioco */
#progressBarWRAP.ha-gioco.is-boom { animation: pg-terremoto .65s cubic-bezier(.36, .07, .19, .97); }

@keyframes pg-terremoto {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10%      { transform: translate(-14px, 8px) rotate(-1.2deg); }
  20%      { transform: translate(12px, -10px) rotate(1deg); }
  32%      { transform: translate(-10px, 6px) rotate(-.8deg); }
  45%      { transform: translate(8px, -4px) rotate(.6deg); }
  60%      { transform: translate(-5px, 3px) rotate(-.3deg); }
  78%      { transform: translate(3px, -1px) rotate(0); }
}

/* ----------------------------------------------------- fine partita ---- */

.pg-fine__punti {
  margin: 4px 0 2px;
  font-size: 2.2rem;
  font-weight: 900;
  color: #c95f45;
  font-variant-numeric: tabular-nums;
}

.pg-fine__record {
  font-size: .82rem;
  color: #6e6259;
}

.pg-fine__salvadanaio {
  margin-top: 12px;
  padding: 11px 14px;
  border-radius: 14px;
  background: #f6ece0;
  font-size: .82rem;
  line-height: 1.45;
  color: #5e5148;
}

.pg-fine__chiudi {
  width: 100%;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid rgba(160, 120, 90, .3);
  border-radius: 999px;
  background: transparent;
  color: #6e6259;
  font-size: .9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.pg-fine__chiudi[hidden],
.pg-fine__premio[hidden] { display: none; }

.pg-fine__premio {
  margin: -6px -6px 14px;
  padding: 16px 12px 14px;
  border-radius: 18px;
  background: linear-gradient(160deg, #fff4d6, #ffe3b3);
}

.pg-fine__regalo {
  font-size: 3rem;
  line-height: 1;
  animation: pg-regalo .9s cubic-bezier(.3, 1.6, .5, 1) both;
}

@keyframes pg-regalo {
  0%   { transform: scale(.2) rotate(-25deg); opacity: 0; }
  60%  { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.pg-fine__premio-titolo {
  margin-top: 8px;
  font-family: Georgia, "Noto Serif", serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #c95f45;
}

.pg-fine__premio-testo {
  margin-top: 4px;
  font-size: .84rem;
  line-height: 1.4;
  color: #6e5a48;
}

.pg-fine__scheda.is-premio {
  box-shadow: 0 0 0 3px #f2b33d, 0 20px 50px rgba(60, 40, 28, .3), 0 0 40px rgba(242, 179, 61, .45);
}

/* credito vinto in una partita chiusa a meta': solo la festa e "Gioca" */
.pg-fine__scheda.is-solo-premio > :not(.pg-fine__premio):not(.pg-catalogo__torna) { display: none; }
.pg-fine__scheda.is-solo-premio .pg-fine__premio { margin-bottom: 0; }