.minigiochi {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
}

.minigiochi__head {
  align-items: center;
  max-width: 72ch;
  margin-inline: auto;
  text-align: center;
}

.minigiochi__head .eyebrow::before {
  display: none;
}

.minigiochi__head .section-title::after {
  left: 50%;
  transform: translateX(-50%);
}

.minigiochi__intro {
  margin: var(--sp-2) 0 0;
  max-width: var(--content-measure);
  color: var(--text-muted);
}

.minigiochi__griglia {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 360px));
  justify-content: center;
  gap: clamp(1.25rem, .8rem + 2vw, 2.75rem);
}

.minigiochi__icona {
  --icona: var(--mob-magenta);
  --icona-rgb: var(--mob-magenta-rgb);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 320px;
  margin: 0;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem) var(--sp-5);
  border: 2px solid rgba(var(--icona-rgb), .7);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 50% 32%, rgba(var(--icona-rgb), .2), transparent 62%),
    rgba(var(--ink-700-rgb), .8);
  box-shadow:
    0 0 0 1px rgba(var(--icona-rgb), .22),
    inset 0 0 26px rgba(var(--icona-rgb), .14),
    0 0 26px rgba(var(--icona-rgb), .3);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}

.minigiochi__icona[hidden] {
  display: none;
}

.minigiochi__icona--strike {
  --icona: var(--mob-cyan);
  --icona-rgb: var(--mob-cyan-rgb);
}

.minigiochi__icona:hover,
.minigiochi__icona:focus-visible {
  transform: translateY(-5px);
  border-color: var(--icona);
  box-shadow:
    0 0 0 1px rgba(var(--icona-rgb), .5),
    inset 0 0 34px rgba(var(--icona-rgb), .22),
    0 0 40px rgba(var(--icona-rgb), .55),
    0 0 90px rgba(var(--icona-rgb), .25);
}

.minigiochi__icona:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 5px;
}

.minigiochi__icona:active {
  transform: translateY(-1px) scale(.985);
}

.minigiochi__disco {
  display: grid;
  place-items: center;
  width: clamp(124px, 7.5rem + 3vw, 172px);
  aspect-ratio: 1;
  border: 2px solid rgba(var(--icona-rgb), .8);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--icona-rgb), .24) 0%, rgba(var(--ink-900-rgb), .92) 72%);
  box-shadow:
    0 0 22px rgba(var(--icona-rgb), .5),
    inset 0 0 24px rgba(var(--icona-rgb), .32);
  color: var(--icona);
  transition: transform var(--dur-3) var(--ease-spring);
}

.minigiochi__disco svg {
  display: block;
  width: 62%;
  height: 62%;
  filter: drop-shadow(0 0 6px rgba(var(--icona-rgb), .85));
}

.minigiochi__icona:hover .minigiochi__disco,
.minigiochi__icona:focus-visible .minigiochi__disco {
  transform: scale(1.06) rotate(-4deg);
}

.minigiochi__nome {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
  text-transform: uppercase;
  text-shadow:
    0 0 3px rgba(var(--white-rgb), .8),
    0 0 18px rgba(var(--icona-rgb), .75);
}

.minigiochi__sotto {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.minigiochi__icona--presto,
.minigiochi__icona[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.minigiochi__icona--presto:hover,
.minigiochi__icona--presto:focus-visible,
.minigiochi__icona--presto:active {
  transform: none;
  border-color: rgba(var(--icona-rgb), .7);
  box-shadow:
    0 0 0 1px rgba(var(--icona-rgb), .22),
    inset 0 0 26px rgba(var(--icona-rgb), .14),
    0 0 26px rgba(var(--icona-rgb), .3);
}

.minigiochi__icona--presto:hover .minigiochi__disco {
  transform: none;
}

.minigiochi__nota {
  margin: clamp(1.75rem, 1rem + 2vw, 3rem) auto 0;
  max-width: 72ch;
  font-size: var(--fs-small);
  text-align: center;
  color: var(--text-dim);
}

.minigiochi__corpo {
  min-width: 0;
}

.minigiochi__giochi {
  min-width: 0;
}

.minigiochi__classifiche {
  max-width: 880px;
  margin: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) auto 0;
  scroll-margin-top: calc(var(--nav-h) + var(--sp-4));
}

@media (max-width: 639px) {
  .minigiochi__griglia {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
    margin-inline: auto;
  }

  .minigiochi__icona {
    min-height: 0;
    padding: var(--sp-5) var(--sp-4);
  }

  .minigiochi__disco {
    width: 112px;
  }
}

@media (max-height: 520px) {
  .minigiochi {
    min-height: 0;
    padding-block: var(--sp-5) var(--sp-7);
  }

  .minigiochi__head {
    gap: var(--sp-1);
    margin-bottom: var(--sp-5);
  }

  .minigiochi__head .eyebrow {
    font-size: 1.5rem;
  }

  .minigiochi__head .section-title {
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.3rem);
  }
}

@media (max-height: 520px) and (min-width: 640px) {
  .minigiochi__griglia {
    grid-template-columns: repeat(2, minmax(0, 340px));
  }

  .minigiochi__icona {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--sp-4);
    row-gap: var(--sp-1);
    align-items: center;
    justify-items: start;
    min-height: 0;
    padding: var(--sp-4) var(--sp-5);
    text-align: left;
  }

  .minigiochi__disco {
    grid-row: 1 / span 2;
    width: 88px;
  }

  .minigiochi__nome {
    align-self: end;
  }

  .minigiochi__sotto {
    align-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .minigiochi__icona,
  .minigiochi__disco {
    transition: none;
  }

  .minigiochi__icona:hover,
  .minigiochi__icona:focus-visible,
  .minigiochi__icona:active,
  .minigiochi__icona:hover .minigiochi__disco,
  .minigiochi__icona:focus-visible .minigiochi__disco {
    transform: none;
  }
}

html.is-minigiochi-carica,
html.is-minigiochi-carica body {
  overflow: hidden;
}

.minigiochi-carica {
  --carica-petalo: var(--mob-magenta);
  --carica-petalo-rgb: var(--mob-magenta-rgb);
  --carica-bordo: var(--mob-magenta-2);
  --carica-cuore: var(--text);
  --carica-da: var(--mob-magenta);
  --carica-a: var(--mob-cyan);
  --carica-a-rgb: var(--mob-cyan-rgb);
  --carica-fondo-rgb: var(--ink-900-rgb);
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-top) + 120);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding:
    calc(var(--sp-5) + env(safe-area-inset-top, 0px))
    calc(var(--sp-4) + env(safe-area-inset-right, 0px))
    calc(var(--sp-5) + env(safe-area-inset-bottom, 0px))
    calc(var(--sp-4) + env(safe-area-inset-left, 0px));
  background:
    radial-gradient(circle at 50% 44%, rgba(var(--carica-petalo-rgb), .16), transparent 58%),
    rgba(var(--carica-fondo-rgb), .96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--text);
  outline: none;
  overscroll-behavior: contain;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  animation: minigiochi-carica-entra var(--dur-2) var(--ease-out);
}

.minigiochi-carica[hidden] {
  display: none;
}

.minigiochi-carica[data-tema="halloween"] {
  --carica-petalo: #FF7A1A;
  --carica-petalo-rgb: 255, 122, 26;
  --carica-bordo: #FFB23F;
  --carica-cuore: #FFE15A;
  --carica-da: #FF7A1A;
  --carica-a: #A6F23A;
  --carica-a-rgb: 166, 242, 58;
  --carica-fondo-rgb: 6, 2, 10;
}

.minigiochi-carica__chiudi {
  position: absolute;
  inset-block-start: calc(var(--sp-4) + env(safe-area-inset-top, 0px));
  inset-inline-end: calc(var(--sp-4) + env(safe-area-inset-right, 0px));
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(var(--white-rgb), .26);
  border-radius: 50%;
  background: rgba(var(--carica-fondo-rgb), .85);
  color: var(--text);
  cursor: pointer;
  transition:
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

.minigiochi-carica__chiudi:hover,
.minigiochi-carica__chiudi:focus-visible {
  border-color: var(--carica-a);
  color: var(--carica-a);
  box-shadow: 0 0 18px -4px rgba(var(--carica-a-rgb), .8);
}

.minigiochi-carica__chiudi:focus-visible,
.minigiochi-carica__riprova:focus-visible {
  outline: 2px solid var(--carica-a);
  outline-offset: 3px;
}

.minigiochi-carica__scena {
  display: grid;
  justify-items: center;
  gap: var(--sp-3);
  inline-size: min(380px, 100%);
  text-align: center;
}

.minigiochi-carica__salto {
  display: block;
  inline-size: 124px;
  block-size: 124px;
  transform-origin: 50% 60%;
  animation: minigiochi-carica-salto 1100ms ease-in-out infinite;
}

.minigiochi-carica__fiore {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  filter:
    drop-shadow(0 0 8px rgba(var(--carica-petalo-rgb), .9))
    drop-shadow(0 0 22px rgba(var(--carica-petalo-rgb), .45));
}

.minigiochi-carica__petali {
  fill: var(--carica-petalo);
  stroke: var(--carica-bordo);
  stroke-width: 1.1;
  stroke-opacity: .75;
}

.minigiochi-carica__cuore {
  fill: var(--carica-cuore);
}

.minigiochi-carica__ombra {
  display: block;
  inline-size: 72px;
  block-size: 10px;
  margin-block-start: calc(var(--sp-1) * -1);
  border-radius: 50%;
  background: rgba(var(--carica-a-rgb), .32);
  animation: minigiochi-carica-ombra 1100ms ease-in-out infinite;
}

.minigiochi-carica__testo {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 0 14px rgba(var(--carica-petalo-rgb), .7);
}

.minigiochi-carica__barra {
  inline-size: 100%;
  block-size: 12px;
  overflow: hidden;
  border: 1px solid rgba(var(--white-rgb), .22);
  border-radius: 999px;
  background: rgba(var(--ink-700-rgb), .9);
}

.minigiochi-carica__riempi {
  display: block;
  width: 0;
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--carica-da), var(--carica-a));
  box-shadow: 0 0 12px rgba(var(--carica-a-rgb), .55);
  transition: width 160ms linear;
}

.minigiochi-carica__percento {
  margin: 0;
  font-family: var(--font-display);
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--text-muted);
}

.minigiochi-carica__errore {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-small);
  color: var(--text);
}

.minigiochi-carica__errore[hidden],
.minigiochi-carica__riprova[hidden] {
  display: none;
}

.minigiochi-carica__riprova {
  min-block-size: 44px;
  padding: 0 var(--sp-6);
  border: 1px solid rgba(var(--carica-petalo-rgb), .7);
  border-radius: 999px;
  background: rgba(var(--carica-petalo-rgb), .14);
  color: var(--text);
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

.minigiochi-carica__riprova:hover,
.minigiochi-carica__riprova:focus-visible {
  border-color: var(--carica-a);
  box-shadow: 0 0 20px -4px rgba(var(--carica-a-rgb), .8);
}

.minigiochi-carica.is-errore .minigiochi-carica__salto,
.minigiochi-carica.is-errore .minigiochi-carica__ombra {
  animation-play-state: paused;
  opacity: .45;
}

.minigiochi-carica.is-errore .minigiochi-carica__barra,
.minigiochi-carica.is-errore .minigiochi-carica__percento {
  display: none;
}

@keyframes minigiochi-carica-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes minigiochi-carica-salto {
  0% { transform: translateY(0) scale(1.1, .9) rotate(0deg); }
  20% { transform: translateY(0) scale(1, 1) rotate(0deg); }
  55% { transform: translateY(-46px) scale(.96, 1.04) rotate(180deg); }
  85% { transform: translateY(0) scale(1, 1) rotate(360deg); }
  100% { transform: translateY(0) scale(1.1, .9) rotate(360deg); }
}

@keyframes minigiochi-carica-ombra {
  0%, 20%, 85%, 100% { transform: scale(1); opacity: 1; }
  55% { transform: scale(.55); opacity: .4; }
}

@media (max-height: 520px) {
  .minigiochi-carica__salto {
    inline-size: 84px;
    block-size: 84px;
  }

  .minigiochi-carica__scena {
    gap: var(--sp-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .minigiochi-carica,
  .minigiochi-carica__salto,
  .minigiochi-carica__ombra {
    animation: none;
  }

  .minigiochi-carica__riempi,
  .minigiochi-carica__chiudi,
  .minigiochi-carica__riprova {
    transition: none;
  }
}

html:not([data-mob-editor]):not(.is-giochi-pronti) .minigiochi__corpo {
  visibility: hidden;
  animation: giochi-riserva 0s linear 1.5s forwards;
}

@keyframes giochi-riserva {
  to { visibility: visible; }
}

html.is-giochi-spenti,
html.is-giochi-spenti body {
  overflow: hidden;
}

html.is-giochi-spenti body > :not(.giochi-spenti) {
  visibility: hidden !important;
}

.giochi-spenti {
  --spenti: var(--mob-magenta);
  --spenti-2: var(--mob-magenta-2);
  --spenti-rgb: var(--mob-magenta-rgb);
  --spenti-fondo: var(--ink-900);
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  overflow: hidden auto;
  padding:
    calc(var(--sp-5, 2rem) + env(safe-area-inset-top, 0px))
    calc(16px + env(safe-area-inset-right, 0px))
    calc(var(--sp-5, 2rem) + env(safe-area-inset-bottom, 0px))
    calc(16px + env(safe-area-inset-left, 0px));
  background-color: var(--spenti-fondo);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 36%, rgba(var(--spenti-rgb), .24), rgba(var(--spenti-rgb), .07) 55%, transparent 78%),
    radial-gradient(ellipse 90% 40% at 50% 112%, rgba(var(--spenti-rgb), .16), transparent 70%);
  color: var(--text, #F5F2F7);
  text-align: center;
  outline: none;
  overscroll-behavior: contain;
  animation: giochi-spenti-entra .45s var(--ease-out, ease-out);
}

.giochi-spenti::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

.giochi-spenti[hidden] {
  display: none;
}

.giochi-spenti[data-tema="halloween"] {
  --spenti: #FF7A1A;
  --spenti-2: #FFB23F;
  --spenti-rgb: 255, 122, 26;
  --spenti-fondo: #06020A;
}

.giochi-spenti__scheda {
  position: relative;
  display: grid;
  justify-items: center;
  gap: clamp(.9rem, .6rem + 1vw, 1.4rem);
  inline-size: 100%;
  max-inline-size: 44rem;
}

.giochi-spenti__anello {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 124px;
  block-size: 124px;
  margin-block-end: clamp(.4rem, .2rem + 1vw, 1rem);
  border-radius: 50%;
  border: 2px solid rgba(var(--spenti-rgb), .8);
  background: radial-gradient(circle, rgba(var(--spenti-rgb), .16), rgba(var(--spenti-rgb), .04) 70%);
  box-shadow: 0 0 46px rgba(var(--spenti-rgb), .35), inset 0 0 22px rgba(var(--spenti-rgb), .18);
  color: var(--spenti-2);
}

.giochi-spenti__anello::before,
.giochi-spenti__anello::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--spenti-rgb), .55);
  animation: giochi-spenti-onda 3.2s cubic-bezier(.2, .6, .3, 1) infinite;
}

.giochi-spenti__anello::after {
  animation-delay: 1.6s;
}

.giochi-spenti__icona {
  display: grid;
  place-items: center;
  animation: giochi-spenti-respiro 3.2s ease-in-out infinite;
}

.giochi-spenti__icona svg {
  display: block;
  filter: drop-shadow(0 0 10px rgba(var(--spenti-rgb), .55));
}

.giochi-spenti__testo {
  margin: 0;
  max-inline-size: 15ch;
  font-family: var(--font-display, Impact, sans-serif);
  font-size: clamp(2rem, 1.1rem + 4.4vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
  color: var(--text, #F5F2F7);
}

.giochi-spenti__evidenza {
  display: block;
  color: var(--spenti);
  text-shadow: 0 0 28px rgba(var(--spenti-rgb), .45);
}

.giochi-spenti__sotto {
  margin: 0;
  max-inline-size: 34ch;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem);
  line-height: 1.5;
  color: var(--text-muted, #A5A2B8);
}

.giochi-spenti__riga {
  display: inline-block;
}

.giochi-spenti__via {
  margin-block-start: .5rem;
}

.giochi-spenti[data-tema="halloween"] .giochi-spenti__via {
  background-image: linear-gradient(135deg, #FF7A1A, #FFB23F);
  border-color: rgba(255, 178, 63, .85);
  box-shadow: 0 0 22px rgba(255, 122, 26, .45);
}

@keyframes giochi-spenti-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes giochi-spenti-onda {
  0% { transform: scale(1); opacity: .7; }
  80%, 100% { transform: scale(1.55); opacity: 0; }
}

@keyframes giochi-spenti-respiro {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@media (max-width: 420px) {
  .giochi-spenti__anello {
    inline-size: 104px;
    block-size: 104px;
  }

  .giochi-spenti__icona svg {
    inline-size: 46px;
    block-size: 46px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .giochi-spenti,
  .giochi-spenti__icona,
  .giochi-spenti__anello::before,
  .giochi-spenti__anello::after {
    animation: none;
  }

  .giochi-spenti__anello::before,
  .giochi-spenti__anello::after {
    opacity: 0;
  }
}