/* ==========================================================================
   SANGAN CORNER — style.css (tema chiaro: bianco / nero / rosso)
   --------------------------------------------------------------------------
   INDICE
   01. Font (@font-face self-hosted)
   02. Design tokens (custom properties)
   03. Reset & base
   04. Utility (container, sr-only, skip-link, eyebrow, titoli, holo)
   05. Bottoni, link, ripple
   06. Loader
   07. Progress bar
   08. Noise overlay
   09. Navbar
   10. Hero (mesh, particelle, carte reali 3D)
   11. Marquee (banda nera)
   12. Chi siamo
   13. Dentro il Corner (bento differenziatori + scaffali)
   14. I Giochi (4 mondi, artwork personaggi)
   16. Calendario eventi (primi 4 + espansione)
   17. Community (banda nera) + Learn to Play
   18. Servizi Pro
   19. Negozio online
   21. Testimonianze (slider automatico)
   22. FAQ
   23. Dove siamo
   24. CTA finale (banda nera)
   25. Footer (nero)
   26. FAB + Sticky CTA
   27. Sistema reveal (scroll animations)
   28. Responsive
   29. Reduced motion & preferenze utente
   ========================================================================== */

/* ==========================================================================
   01. FONT — self-hosted woff2 (licenza Fontshare)
   ========================================================================== */
@font-face {
  font-family: 'Clash Display';
  src: url('assets/fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('assets/fonts/clash-display-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ==========================================================================
   02. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Base chiara */
  --bg:      #FFFFFF;
  --bg-2:    #F6F5F1;
  --ink:     #101014;   /* colore principale: nero */
  --text:    var(--ink);
  --text-2:  #5B5B66;
  --border:  #E8E6E1;

  /* Bande scure di ritmo (marquee, community, finale, footer) */
  --dark:      #0E0E13;
  --dark-soft: #17171E;
  --dark-text: #F5F4F0;
  --dark-text-2: #B7B7C0;

  /* Accento secondario: rosso */
  --red:      #DB1F2E;
  --red-deep: #9E1020;
  --red-soft: rgba(219, 31, 46, .08);

  /* WhatsApp: il verde è riservato ESCLUSIVAMENTE alle CTA WhatsApp */
  --wa:     #25D366;
  --wa-ink: #05130B;

  /* Gradiente "foil" firma, ora in scala rossa */
  --holo: linear-gradient(100deg, #FF6A3D, #E42535 45%, #9E1020 95%);
  --holo-dark: linear-gradient(100deg, #FFB199, #FF4B58 45%, #E42535 95%);

  /* Ombre */
  --shadow-1: 0 14px 34px -18px rgba(16, 16, 20, .28);
  --shadow-2: 0 26px 60px -24px rgba(16, 16, 20, .35);

  /* Tipografia */
  --font-display: 'Clash Display', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Satoshi', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, monospace;

  /* Ritmo */
  --radius: 22px;
  --radius-sm: 14px;
  --section-pad: clamp(4.5rem, 10vw, 8.5rem);
  --nav-h: 74px;

  /* Easing firma */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  color-scheme: light;
}

/* ==========================================================================
   03. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
  /* Clamp alla radice: niente pan/zoom-out orizzontale su mobile
     (hidden = fallback per i browser senza overflow: clip) */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
}

::selection { background: var(--red); color: #FFF; }

img, svg, canvas { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
p a, li a:not([class]) {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(219, 31, 46, .35);
  transition: text-decoration-color .25s;
}
p a:hover, li a:not([class]):hover { text-decoration-color: var(--red); }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul[role="list"], .nav__list, .game__chips { list-style: none; }

/* Touch: niente ritardo da double-tap-zoom né flash grigio al tap */
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* L'attributo hidden vince SEMPRE, anche su elementi con display
   esplicito (es. .btn inline-flex, .map__consent flex) */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scrollbar discreta */
::-webkit-scrollbar { width: 10px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb { background: #C9C7C0; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #ADAaA2; }

/* ==========================================================================
   04. UTILITY
   ========================================================================== */
.container {
  width: min(1160px, 100% - 3rem);
  margin-inline: auto;
}

.section { padding-block: var(--section-pad); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 2000;
  padding: .7rem 1.2rem;
  background: var(--red); color: #FFF;
  font-weight: 700; border-radius: 8px;
  transform: translateY(-200%);
  transition: transform .3s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.1rem;
}
.eyebrow::before { content: '// '; opacity: .55; }
.eyebrow--light { color: #FF6B76; }

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin-bottom: 1.2rem;
}

.section-sub {
  max-width: 56ch;
  color: var(--text-2);
  margin-bottom: 2.4rem;
}

/* Testo con gradiente foil rosso animato */
.holo-text {
  background: var(--holo);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holo-shift 7s ease-in-out infinite;
}
@keyframes holo-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.icon {
  width: 1.25em; height: 1.25em;
  flex-shrink: 0;
  fill: none;
}

/* ==========================================================================
   05. BOTTONI, LINK & RIPPLE
   ========================================================================== */
.btn {
  --tx: 0px; --ty: 0px;
  position: relative;
  overflow: hidden; /* contiene il ripple */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .85rem 1.7rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  transform: translate(var(--tx), var(--ty));
  transition: transform .22s var(--ease-out), box-shadow .3s, background-color .3s, border-color .3s, color .3s;
}
.btn:active { transform: translate(var(--tx), var(--ty)) scale(.985); }

/* CTA WhatsApp: bianco con bordo/testo/icona verdi;
   all'hover si inverte — verde pieno con testo/icona/bordo bianchi */
.btn--wa {
  background: #FFF;
  color: #0E7C41; /* verde scuro: 5.5:1 su bianco, AA anche per testo piccolo */
  border: 1.5px solid #1EBB5D;
  box-shadow: 0 10px 26px -14px rgba(14, 124, 65, .45);
}
.btn--wa::before {
  content: '';
  position: absolute; inset: -40% -20%;
  background: linear-gradient(115deg, transparent 44%, rgba(37, 211, 102, .14) 50%, transparent 56%);
  transform: translateX(-130%) rotate(4deg);
  animation: wa-shine 9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wa-shine {
  0%, 82%  { transform: translateX(-130%) rotate(4deg); }
  95%, 100% { transform: translateX(130%) rotate(4deg); }
}
.btn--wa:hover {
  background: linear-gradient(160deg, #2ED271, #17A854 45%, #0E7C41);
  color: #FFF;
  border-color: #FFF;
  box-shadow: 0 16px 38px -12px rgba(14, 124, 65, .75);
}
.btn--wa:hover::before {
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .35) 50%, transparent 58%);
}
.btn--wa .icon { fill: currentColor; }

.btn--black {
  background: var(--ink);
  color: #FFF;
  box-shadow: var(--shadow-1);
}
.btn--black:hover { background: var(--red); box-shadow: 0 14px 34px -14px rgba(219, 31, 46, .5); }

.btn--ghost {
  border-color: #D8D6D0;
  color: var(--ink);
  background: rgba(255, 255, 255, .6);
}
.btn--ghost:hover { border-color: var(--red); color: var(--red); }

.btn--sm { padding: .55rem 1.15rem; font-size: .9rem; }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 1.06rem; }
.btn--xl { padding: 1.25rem 2.7rem; font-size: 1.18rem; }

/* Ripple al click (span iniettata da JS) */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .32);
  transform: scale(0);
  animation: ripple .45s ease-out forwards;
  pointer-events: none;
}
.btn--ghost .ripple { background: rgba(219, 31, 46, .12); }
@keyframes ripple { to { transform: scale(2.2); opacity: 0; } }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  color: var(--red);
}
.link-arrow .icon { transition: transform .3s var(--ease-out); }
.link-arrow:hover .icon { transform: translate(3px, -3px); }

/* Chip filtri */
.chip {
  padding: .5rem 1.05rem;
  border: 1px solid #D8D6D0;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-2);
  background: #FFF;
  transition: color .25s, border-color .25s, background-color .25s, transform .25s var(--ease-spring);
}
.chip:hover { color: var(--red); border-color: var(--red); transform: translateY(-2px); }
.chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFF;
  font-weight: 700;
}

/* ==========================================================================
   06. (loader iniziale rimosso su richiesta: la pagina parte subito)
   ========================================================================== */

/* ==========================================================================
   07. PROGRESS BAR
   ========================================================================== */
.progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 1900; /* sopra la navbar */
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  background: var(--holo);
  background-size: 200% 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .progress__bar {
    animation: progress-grow linear both;
    animation-timeline: scroll(root);
  }
  @keyframes progress-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ==========================================================================
   08. NOISE OVERLAY — grana leggerissima
   ========================================================================== */
.noise {
  position: fixed;
  inset: 0;
  z-index: 1400;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ==========================================================================
   09. NAVBAR
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Sopra FAB (1600) e banner cookie (1700):
     il menu mobile aperto deve coprirli tutti */
  z-index: 1800;
  transition: transform .45s var(--ease-out), background-color .35s, border-color .35s, box-shadow .35s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
  box-shadow: 0 8px 26px -20px rgba(16, 16, 20, .3);
}
/* L'header resta sempre visibile durante lo scroll (niente hide-on-scroll) */

/* A menu mobile aperto niente backdrop-filter: farebbe da containing block
   per il menu position:fixed, schiacciandolo dentro la barra da 74px */
.nav.is-menu-open {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.nav__inner {
  width: min(1240px, 100% - 3rem);
  margin-inline: auto;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
.nav__logo-mark {
  width: 42px; height: 42px;
  object-fit: contain;
  transition: transform .4s var(--ease-spring);
}
.nav__logo:hover .nav__logo-mark { transform: rotate(-8deg) scale(1.1); }
.nav__logo-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -.01em;
}
.nav__logo-text em { font-style: normal; color: var(--red); }

.nav__menu { display: flex; align-items: center; gap: 1.8rem; }
.nav__list { display: flex; gap: 1.6rem; }

.nav__link {
  position: relative;
  font-size: .95rem;
  font-weight: 500;
  color: var(--text-2);
  padding: .4rem 0;
  transition: color .25s;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--holo);
  transition: right .35s var(--ease-out);
}
.nav__link:hover, .nav__link.is-current { color: var(--ink); }
.nav__link:hover::after, .nav__link.is-current::after { right: 0; }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center;
  border-radius: 10px;
  position: relative;
  z-index: 1001; /* resta cliccabile sopra l'overlay del menu mobile */
}
.nav__burger span {
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .35s var(--ease-out), opacity .25s;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   10. HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 3rem) 0 4.5rem;
  overflow: clip;
}

.hero__bg { position: absolute; inset: 0; z-index: -1; }

/* Mesh: due bagliori caldi GPU-friendly (solo transform) */
.hero__mesh { position: absolute; inset: 0; overflow: hidden; }
.hero__mesh::before,
.hero__mesh::after {
  content: '';
  position: absolute;
  width: 55vmax; height: 55vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .5;
  will-change: transform;
}
.hero__mesh::before {
  top: -24vmax; right: -14vmax;
  background: radial-gradient(circle at 35% 35%, rgba(228, 37, 53, .22), rgba(228, 37, 53, 0) 62%);
  animation: blob-a 26s ease-in-out infinite alternate;
}
.hero__mesh::after {
  bottom: -28vmax; left: -14vmax;
  background: radial-gradient(circle at 60% 40%, rgba(16, 16, 20, .1), rgba(255, 106, 61, .1) 45%, transparent 68%);
  animation: blob-b 32s ease-in-out infinite alternate;
}
@keyframes blob-a { from { transform: translate(0, 0) rotate(0deg) scale(1); } to { transform: translate(-9vmax, 7vmax) rotate(50deg) scale(1.15); } }
@keyframes blob-b { from { transform: translate(0, 0) scale(1); } to { transform: translate(10vmax, -6vmax) scale(1.2); } }

/* Pavimento prospettico sottile */
.hero__grid {
  position: absolute; inset: auto 0 0 0;
  height: 46%;
  background-image:
    linear-gradient(rgba(219, 31, 46, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(219, 31, 46, .12) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(500px) rotateX(58deg) scale(1.7);
  transform-origin: center bottom;
  mask-image: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 80%);
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .7), transparent 80%);
}

.hero__particles { position: absolute; inset: 0; }

.hero__inner {
  width: min(1240px, 100% - 3rem);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: 2rem;
}

.hero__eyebrow { margin-bottom: 1.4rem; }

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 1.6rem + 5.6vw, 5.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.025em;
  margin-bottom: 1.4rem;
  text-wrap: balance;
}
.hero__title .w { display: inline-block; overflow: clip; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.hero__title .w__i { display: inline-block; will-change: transform; }
html.js .hero__title:not(.is-ready) .w__i { transform: translateY(120%); }
.hero__title.is-ready .w__i {
  transform: translateY(0);
  transition: transform .95s var(--ease-out);
  transition-delay: var(--wd, 0s);
}

.hero__sub {
  max-width: 52ch;
  color: var(--text-2);
  font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  margin-bottom: 2.2rem;
}
.hero__sub strong { color: var(--ink); }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem;
}
.stat { display: flex; flex-direction: column-reverse; gap: .15rem; }
.stat__num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--red);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* --- Carte reali fluttuanti (tilt mouse + parallax scroll) --- */
.hero__cards {
  position: relative;
  height: min(560px, 62vh);
  perspective: 1100px;
}
.tcard {
  --rx: 0deg; --ry: 0deg; --py: 0px;
  position: absolute;
  width: clamp(150px, 14vw, 205px);
  border-radius: 12px;
  overflow: clip;
  box-shadow: 0 34px 60px -22px rgba(16, 16, 20, .45);
  transform: translate3d(0, var(--py), 0) rotateX(var(--rx)) rotateY(var(--ry)) rotate(var(--rz, 0deg));
  transform-style: preserve-3d;
  transition: transform .4s var(--ease-out);
  will-change: transform;
}
/* L'immagine detta l'altezza: il retro carta si vede SEMPRE per intero */
.tcard img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.tcard--1 { --rz: -14deg; top: 6%;  left: 2%;   z-index: 2; animation: float-a 7s ease-in-out infinite; }
.tcard--2 { --rz: 5deg;   top: 22%; left: 38%;  z-index: 3; animation: float-b 8.5s ease-in-out infinite; }
.tcard--3 { --rz: 16deg;  top: 50%; left: 10%;  z-index: 1; animation: float-c 9.5s ease-in-out infinite; }
@keyframes float-a { 0%, 100% { margin-top: 0; } 50% { margin-top: -18px; } }
@keyframes float-b { 0%, 100% { margin-top: 0; } 50% { margin-top: -26px; } }
@keyframes float-c { 0%, 100% { margin-top: 0; } 50% { margin-top: -14px; } }

/* Riflesso foil che attraversa la carta */
.tcard__foil {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: clip;
  pointer-events: none;
  z-index: 1;
}
.tcard__foil::after {
  content: '';
  position: absolute; inset: -80% -30%;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%);
  transform: translateX(-80%) rotate(6deg);
  animation: foil-sweep 6.5s ease-in-out infinite;
}
.tcard--2 .tcard__foil::after { animation-delay: 1.6s; }
.tcard--3 .tcard__foil::after { animation-delay: 3.2s; }
@keyframes foil-sweep {
  0%, 55%  { transform: translateX(-80%) rotate(6deg); }
  75%, 100% { transform: translateX(80%) rotate(6deg); }
}

/* ==========================================================================
   11. MARQUEE — banda nera
   ========================================================================== */
.marquee {
  padding-block: 1.15rem;
  overflow: clip;
  background: var(--dark);
}
.marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 2.6rem;
  padding-right: 2.6rem;
  white-space: nowrap;
  width: max-content;
  animation: marquee 34s linear infinite;
}
.marquee__track span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dark-text);
}
.marquee__track i { color: var(--red); font-style: normal; font-size: .8rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   12. CHI SIAMO
   ========================================================================== */
.about { background: var(--bg-2); }
.about__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr; /* più spazio alla foto */
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.about__text p { color: var(--text-2); margin-bottom: 1.15rem; }
.about__text p strong { color: var(--ink); }
.about__text .link-arrow { margin-top: .6rem; }

/* Foto reale del torneo: pulita, senza cornici né contorni */
/* --- Slider a mazzo (coverflow): centrale in primo piano, laterali in
   prospettiva. Le posizioni (--o offset, --s scala, --op opacità, --z ordine)
   sono calcolate da initDeck; senza JavaScript diventa una riga scorrevole. --- */
.deck {
  /* Stesso rapporto della vecchia foto singola (3:2). L'altezza deriva dalla
     slide più la fascia dei pallini: niente vuoti verticali */
  --slide-w: clamp(240px, 34vw, 480px);
  position: relative;
  width: 100%;
  height: calc(var(--slide-w) * 0.6667 + 2.8rem);
  perspective: 1600px;
}
.deck__track {
  position: relative;
  height: 100%;
  list-style: none;
  transform-style: preserve-3d;
}
html:not(.js) .deck__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
}
html:not(.js) .deck__slide { flex: 0 0 var(--slide-w); }

.deck__slide {
  width: var(--slide-w);
  aspect-ratio: 3 / 2;
  border-radius: 18px;
  overflow: hidden;
  background: var(--bg-2);
  box-shadow: 0 16px 34px -18px rgba(16, 16, 20, .5);
  transition: box-shadow .75s var(--ease-out);
}
/* La slide centrale è l'unica con ombra profonda: stacca dalle altre */
html.js .deck__slide.is-center {
  box-shadow: 0 34px 64px -22px rgba(16, 16, 20, .62);
}
html.js .deck__slide {
  position: absolute;
  /* centrate sull'area immagine, escludendo la fascia dei pallini */
  top: calc((100% - 2.8rem) / 2);
  left: 50%;
  margin: 0;
  /* --fan: apertura del ventaglio, ridotta sugli schermi stretti.
     --tz arretra le laterali: in un contesto 3D (preserve-3d) l'ordine di
     sovrapposizione lo decide la profondità, NON lo z-index, altrimenti le
     slide laterali coprirebbero la centrale */
  transform:
    translate(-50%, -50%)
    translateX(calc(var(--o, 0) * var(--fan, 29%)))
    translateZ(var(--tz, 0px))
    scale(var(--s, 1))
    rotateY(calc(var(--o, 0) * -20deg));
  opacity: var(--op, 1);
  z-index: var(--z, 1);
  transition: transform .75s var(--ease-out), opacity .75s var(--ease-out);
}
.deck__slide img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Le slide laterali sono cliccabili per portarle al centro */
html.js .deck__slide[data-clickable] { cursor: pointer; }
/* Velo scuro sulle laterali: la centrale resta la più leggibile */
html.js .deck__slide::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(14, 14, 19, .45);
  opacity: var(--veil, 0);
  transition: opacity .75s var(--ease-out);
  pointer-events: none;
}

/* Frecce di scorrimento manuale: bianche piene con ombra, mai semitrasparenti
   (sulle foto chiare sparirebbero) */
.deck__arrow {
  position: absolute;
  top: calc((100% - 2.8rem) / 2);
  transform: translateY(-50%);
  z-index: 20;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFF;
  border: 1px solid var(--border);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .55);
  transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ease-spring);
}
.deck__arrow:hover {
  background: var(--red);
  border-color: var(--red);
  color: #FFF;
  transform: translateY(-50%) scale(1.08);
}
.deck__arrow .icon { width: 1.3em; height: 1.3em; fill: currentColor; }
.deck__arrow--prev { left: -.9rem; }
.deck__arrow--prev .icon { transform: rotate(90deg); }
.deck__arrow--next { right: -.9rem; }
.deck__arrow--next .icon { transform: rotate(-90deg); }
html:not(.js) .deck__arrow { display: none; }

.deck__dots {
  position: absolute;
  left: 0; right: 0; bottom: .2rem;
  z-index: 20; /* sopra le slide, che hanno z-index dinamico */
  display: flex;
  justify-content: center;
  gap: .5rem;
}
.deck__dot {
  width: 7px; height: 7px;
  border-radius: 99px;
  background: #B6B3AC; /* più scuro: su bg-2 il grigio chiaro spariva */
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color .3s, width .35s var(--ease-out);
}
.deck__dot[aria-selected="true"] { width: 22px; background: var(--red); }

/* ==========================================================================
   13. DENTRO IL CORNER — bento differenziatori + scaffali
   ========================================================================== */
.bento {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.bento__cell {
  --mx: 50%; --my: 50%;
  position: relative;
  overflow: clip;
  padding: 1.8rem;
  border-radius: var(--radius);
  background: #FFF;
  border: 1px solid var(--border);
  transition: border-color .3s, transform .35s var(--ease-out), box-shadow .35s;
}
.bento__cell:hover {
  border-color: rgba(219, 31, 46, .4);
  transform: translateY(-4px);
  box-shadow: var(--shadow-1);
}

/* Spotlight che segue il mouse */
.bento__cell::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(219, 31, 46, .07), transparent 65%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.bento__cell:hover::before { opacity: 1; }

.bento__icon {
  width: 44px; height: 44px;
  padding: 10px;
  border-radius: 12px;
  color: var(--red);
  background: var(--red-soft);
  border: 1px solid rgba(219, 31, 46, .18);
  margin-bottom: 1.1rem;
}
.bento__cell h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: .5rem;
}
.bento__cell p { color: var(--text-2); font-size: .96rem; }

/* Sugli scaffali: cosa trovi in negozio, in formato compatto */
.stock { margin-top: 2.6rem; }
.stock__title {
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 1.1rem;
}
.stock__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
}
.stock__item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .85rem 1.05rem;
  border-radius: var(--radius-sm);
  background: #FFF;
  border: 1px solid var(--border);
  font-weight: 500;
  font-size: .94rem;
  transition: border-color .3s, transform .3s var(--ease-out), box-shadow .3s;
}
.stock__item:hover {
  border-color: rgba(219, 31, 46, .45);
  transform: translateY(-3px);
  box-shadow: var(--shadow-1);
}
.stock__item .icon {
  width: 22px; height: 22px;
  color: var(--red);
}
.stock__cta {
  margin-top: 1.4rem;
  color: var(--text-2);
  font-size: .98rem;
}

/* ==========================================================================
   14. I GIOCHI — 4 mondi, card neutre con artwork dei personaggi
   ========================================================================== */
.games { background: var(--bg-2); }
/* Tutti e 4 i giochi su un'unica riga orizzontale */
.games__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.game {
  position: relative;
  overflow: clip;
  display: flex;
  flex-direction: column;
  padding: 1.7rem;
  border-radius: var(--radius);
  background: #FFF;
  border: 1px solid var(--border);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: border-color .3s, box-shadow .35s, transform .25s var(--ease-out);
  will-change: transform;
}
/* All'hover il riquadro sfuma in un velo rosso, uguale per tutti */
.game::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(219, 31, 46, .08), rgba(219, 31, 46, 0) 62%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  z-index: 1;
}
.game:hover::before { opacity: 1; }
.game:hover {
  border-color: rgba(219, 31, 46, .5);
  box-shadow: 0 26px 54px -26px rgba(219, 31, 46, .5);
}

/* Sfondo tematico del gioco: a riposo è spento (grigio, appena percepibile),
   all'hover si accende nel colore del proprio mondo.
   --pattern e --tint arrivano dallo style inline della card */
.game__pattern {
  position: absolute;
  inset: 0;
  background-image: var(--pattern);
  /* auto: ogni motivo usa la propria dimensione nativa (72px o 120/132px) */
  background-size: auto;
  background-position: center top;
  opacity: .05;
  filter: grayscale(1);
  transform: scale(1.02);
  transition: opacity .45s var(--ease-out), filter .45s, transform .6s var(--ease-out);
  pointer-events: none;
  /* Dissolvenza lineare: piena opacità sul bordo superiore, zero a metà card */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 50%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 50%);
}
.game:hover .game__pattern {
  opacity: .48;
  filter: none;
  transform: scale(1);
}

.game__glow {
  position: absolute;
  top: -35%; right: -25%;
  width: 65%; aspect-ratio: 1;
  border-radius: 50%;
  /* alone nel colore del mondo, non più rosso fisso */
  background: radial-gradient(circle, rgba(var(--tint, 219 31 46) / .22), transparent 68%);
  transition: transform .5s var(--ease-out), opacity .4s;
  opacity: 0;
}
.game:hover .game__glow { transform: scale(1.35); opacity: 1; }

/* Il corpo è una colonna flessibile: nome a due righe fisse, chips e CTA
   ancorati in basso — così le 4 card restano allineate tra loro */
.game__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.game__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  min-height: 2.3em; /* due righe anche per i nomi corti */
  margin-bottom: .4rem;
}
.game__tag { color: var(--text-2); font-size: .95rem; margin-bottom: 1rem; }
.game__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: auto;
  margin-bottom: 1.2rem;
}
.game__chips li {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .28rem .7rem;
  border-radius: 99px;
  border: 1px solid #D8D6D0;
  color: var(--text-2);
}
.game__cta { font-size: .95rem; }

/* Artwork del personaggio (PNG trasparente): niente cornice,
   ombra morbida sotto e leggero zoom all'hover */
.game__art {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: 1.4rem;
  height: 205px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.game__art img {
  max-width: 88%;
  max-height: 100%;
  width: auto;
  height: auto;
  filter: drop-shadow(0 20px 22px rgba(16, 16, 20, .28));
  transition: transform .5s var(--ease-spring);
}
.game:hover .game__art img { transform: scale(1.07) translateY(-4px); }

/* ==========================================================================
   16. CALENDARIO EVENTI
   ========================================================================== */
.events__filters {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin-bottom: 2.4rem;
}
.filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
}
.filter-group__label {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-2);
  min-width: 52px;
}

.events__list {
  display: grid;
  gap: .9rem;
}
.event {
  --game: var(--red);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.4rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-sm);
  background: #FFF;
  border: 1px solid var(--border);
  border-left: 3px solid var(--game);
  transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s;
  animation: event-pop .5s var(--ease-out) both;
  animation-delay: calc(var(--stagger-i, 0) * 60ms);
}
/* Oltre i primi 4: nascosti finché non si espande il calendario.
   Al display ripristinato l'animazione event-pop riparte da sola. */
.event.is-collapsed { display: none; }
.event:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-1);
  border-color: color-mix(in srgb, var(--game) 35%, var(--border));
  border-left-color: var(--game);
}
@keyframes event-pop {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.event__date {
  display: grid;
  justify-items: center;
  gap: .1rem;
  min-width: 62px;
  padding: .6rem .5rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--game) 9%, #FFF);
  border: 1px solid color-mix(in srgb, var(--game) 30%, transparent);
}
.event__day {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.event__month {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--game) 80%, black);
}

.event__top {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .3rem;
}
.event__game, .event__type {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 99px;
}
.event__game {
  color: color-mix(in srgb, var(--game) 80%, black);
  border: 1px solid color-mix(in srgb, var(--game) 40%, transparent);
}
/* Badge tipo evento nella palette del sito: rosso / grigio / nero */
.event__type--competitivo { color: var(--red-deep); background: var(--red-soft); }
.event__type--casual      { color: var(--text-2); background: rgba(91, 91, 102, .1); }
.event__type--ltp         { color: var(--ink); background: rgba(16, 16, 20, .07); }

.event__title {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 600;
  margin-bottom: .25rem;
}
.event__meta {
  font-size: .88rem;
  color: var(--text-2);
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1rem;
}
.event__note { font-size: .85rem; color: var(--text-2); opacity: .85; margin-top: .25rem; }

.events__empty {
  padding: 2.6rem 1.6rem;
  text-align: center;
  color: var(--text-2);
  border: 1.5px dashed #D8D6D0;
  border-radius: var(--radius);
}

/* Espansione calendario: bottone centrato con chevron che ruota */
.events__more { margin-top: 1.6rem; text-align: center; }
.events__more .btn .icon { transition: transform .4s var(--ease-out); }
.events__more .btn[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* ==========================================================================
   17. COMMUNITY (banda nera) + LEARN TO PLAY
   ========================================================================== */
/* Il clip-path diagonale della banda scopre ciò che sta DIETRO la sezione:
   in alto deve combaciare con gli eventi (bianco), in basso con i servizi
   (bg-2), altrimenti spunta un triangolo bianco sul confine */
.community {
  padding-block: 0;
  background: linear-gradient(to bottom, var(--bg) 0 50%, var(--bg-2) 50% 100%);
}

/* Banda a dominante rossa: base bordeaux profonda invece del nero */
.community__band {
  padding: calc(var(--section-pad) + 2rem) 0;
  color: var(--dark-text);
  background:
    radial-gradient(75% 105% at 78% 6%, rgba(228, 37, 53, .62), transparent 62%),
    radial-gradient(65% 95% at 10% 94%, rgba(158, 16, 32, .72), transparent 66%),
    radial-gradient(40% 60% at 50% 50%, rgba(255, 106, 61, .16), transparent 70%),
    linear-gradient(158deg, #3A0C14, #23070D 52%, #14070B);
  clip-path: polygon(0 0, 100% 3.5%, 100% 100%, 0 96.5%);
}
.community__band .section-title { color: var(--dark-text); }
.community__band .section-sub { color: var(--dark-text-2); margin-bottom: 0; }

/* Testo + foto affiancati */
.community__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.community__photo {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 34px 70px -26px rgba(0, 0, 0, .8);
}

.community__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.6rem;
  margin-top: 2.6rem;
}
.stat--big { display: flex; flex-direction: column; gap: .2rem; }
.stat--big .stat__num {
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  background: var(--holo-dark);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: holo-shift 7s ease-in-out infinite;
}
.community__band .stat__label { color: var(--dark-text-2); }

/* Learn to Play: card in vetro sotto la foto, dentro la colonna destra.
   Volutamente minuta — è un dettaglio della community, non una sezione */
.community__side {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.ltp {
  padding: 1.35rem 1.5rem 1.5rem;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ltp__eyebrow {
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #FF6B76;
  margin-bottom: .5rem;
}
.ltp__title {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--dark-text);
  margin-bottom: 1.5rem;
}

.ltp__steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.05rem;
}
/* Centrati: ogni etichetta cade esattamente sotto il proprio nodo */
.step {
  position: relative;
  text-align: center;
  font-size: .84rem;
  line-height: 1.4;
  color: var(--dark-text);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .18em;
  color: #FF6B76;
  margin-bottom: .3rem;
}

/* Progressione a step: un solo trigger (.ltp__flow.is-inview) muove barra,
   nodi e testi. Il riempimento è LINEARE, così ogni nodo si accende
   nell'istante esatto in cui l'avanzamento lo raggiunge:
     nodo 1 (16,66%) → .25s + 1,5s × .1666 = .5s
     nodo 2 (50%)    → 1.0s
     nodo 3 (83,33%) → 1.5s
   Senza JavaScript tutto è già nello stato finale. */
.ltp__progress {
  position: relative;
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .13);
}
.ltp__progress-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--holo);
  box-shadow: 0 0 12px -1px rgba(228, 37, 53, .8);
  transform: scaleX(1);
  transform-origin: 0 50%;
  transition: transform 1.5s linear .25s;
}
html.js .ltp__flow:not(.is-inview) .ltp__progress-fill { transform: scaleX(0); }

/* Nodo pieno con anello chiaro: si stacca su qualunque fondo,
   anche quando la barra rossa gli passa sotto */
.ltp__progress-dot {
  position: absolute;
  top: 50%; left: var(--x);
  width: 11px; height: 11px;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  background: var(--red);
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 0 10px rgba(228, 37, 53, .6);
  z-index: 1;
  transition: background-color .3s, border-color .3s, box-shadow .3s, transform .45s var(--ease-spring);
}
/* Stato "spento": grigio, più piccolo, senza alone */
html.js .ltp__flow:not(.is-inview) .ltp__progress-dot {
  background: rgba(255, 255, 255, .25);
  border-color: rgba(255, 255, 255, .35);
  box-shadow: 0 0 0 transparent;
  transform: translate(-50%, -50%) scale(.7);
}
/* Testo dello step: entra insieme al proprio nodo */
html.js .ltp__flow:not(.is-inview) .step {
  opacity: 0;
  transform: translateY(16px);
}

/* Cadenza condivisa da nodi e step: 1° .5s, 2° 1s, 3° 1.5s */
.ltp__progress-dot:nth-of-type(2), .step:nth-child(1) { transition-delay: .5s; }
.ltp__progress-dot:nth-of-type(3), .step:nth-child(2) { transition-delay: 1s; }
.ltp__progress-dot:nth-of-type(4), .step:nth-child(3) { transition-delay: 1.5s; }

/* ==========================================================================
   18. SERVIZI PRO
   ========================================================================== */
.services { background: var(--bg-2); }
.services__grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  align-items: stretch;
}
.panel {
  --mx: 50%; --my: 50%;
  position: relative;
  overflow: clip;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: #FFF;
  border: 1px solid var(--border);
  transition: border-color .3s, transform .35s var(--ease-out), box-shadow .35s;
}
/* Immagine di testa: 16:10, zoom leggero all'hover del pannello */
.panel__media {
  aspect-ratio: 16 / 10;
  overflow: clip;
  border-bottom: 1px solid var(--border);
}
.panel__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.panel:hover .panel__media img { transform: scale(1.045); }
.panel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.7rem 1.9rem 2rem;
}
/* Il contorno rosso compare solo al passaggio del mouse */
.panel:hover {
  transform: translateY(-5px);
  border-color: var(--red);
  box-shadow: 0 26px 54px -26px rgba(219, 31, 46, .45);
}
.panel:hover .panel__media { border-bottom-color: rgba(219, 31, 46, .35); }
.panel::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(219, 31, 46, .06), transparent 65%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.panel:hover::before { opacity: 1; }

/* Nessun bordo colorato a riposo: come gli altri pannelli, il rosso arriva
   solo all'hover. A distinguerlo resta il badge "Più richiesto" */
.panel--featured::after {
  content: 'Più richiesto';
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #FFF;
  background: var(--red);
  padding: .3rem .7rem;
  border-radius: 99px;
}

.panel h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: .6rem;
}
.panel p { color: var(--text-2); margin-bottom: 1.1rem; }
.panel p strong { color: var(--ink); }

.panel__list {
  list-style: none;
  display: grid;
  gap: .5rem;
  margin-top: auto; /* liste allineate al fondo anche con testi di lunghezza diversa */
}
.panel__list li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .95rem;
  color: var(--text-2);
}
.panel__list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--red);
  font-size: .8rem;
}

/* ==========================================================================
   19. NEGOZIO ONLINE
   ========================================================================== */
.online__grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.online__card {
  position: relative;
  overflow: clip;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 2.4rem 2.1rem;
  border-radius: var(--radius);
  background: #FFF;
  border: 1px solid var(--border);
  transition: border-color .3s, transform .35s var(--ease-out), box-shadow .35s;
}
/* All'hover sfuma nel gradiente rosso, come le card dei giochi */
.online__card:hover {
  transform: translateY(-5px);
  border-color: rgba(219, 31, 46, .5);
  box-shadow: 0 26px 54px -26px rgba(219, 31, 46, .5);
}
.online__card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(165deg, rgba(219, 31, 46, .12), rgba(219, 31, 46, 0) 62%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.online__card:hover::before { opacity: 1; }
.online__head {
  display: flex;
  align-items: center;
  gap: .95rem;
}
.online__logo {
  width: 54px; height: 54px;
  border-radius: 13px;
  object-fit: cover;
  border: 1px solid var(--border);
  background: #FFF;
  transition: transform .4s var(--ease-spring);
}
.online__card:hover .online__logo { transform: rotate(-5deg) scale(1.08); }
.online__brand {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 700;
}
.online__card p { color: var(--text-2); }
.online__card .link-arrow { margin-top: .4rem; }

/* ==========================================================================
   21. TESTIMONIANZE
   ========================================================================== */
/* Banda scura in stile Community: bagliori rossi e taglio diagonale
   (specchiato rispetto alla banda community per varietà) */
/* Dominante rossa speculare a quella della community */
.quotes {
  color: var(--dark-text);
  background:
    radial-gradient(75% 105% at 88% 10%, rgba(228, 37, 53, .62), transparent 62%),
    radial-gradient(65% 95% at 6% 92%, rgba(158, 16, 32, .72), transparent 66%),
    radial-gradient(40% 60% at 45% 55%, rgba(255, 106, 61, .16), transparent 70%),
    linear-gradient(200deg, #3A0C14, #23070D 52%, #14070B);
  clip-path: polygon(0 3.5%, 100% 0, 100% 96.5%, 0 100%);
  padding-block: calc(var(--section-pad) + 2rem);
}
.quotes .section-title { color: var(--dark-text); }

/* Slider automatico: 2 recensioni per volta (3 pagine), crossfade + scorrimento.
   Le pagine sono impilate nella stessa cella di griglia, così l'altezza
   del blocco è quella della pagina più alta (niente salti di layout). */
.quotes__slider { position: relative; }
/* Le pagine inattive attendono a translateX(36px): senza clip orizzontale
   allargano il body oltre il viewport su mobile (pan/zoom-out fantasma) */
.quotes__track {
  display: grid;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Frecce ai lati per sfogliare le recensioni */
.quotes__arrow {
  position: absolute;
  top: calc(50% - 1.9rem); /* centrata sulle card, compensando i pallini */
  z-index: 2;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFF;
  border: 1px solid var(--border);
  color: var(--ink);
  box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .55);
  transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ease-spring);
}
.quotes__arrow:hover {
  background: var(--red);
  border-color: var(--red);
  color: #FFF;
  transform: scale(1.08);
}
.quotes__arrow .icon { width: 1.35em; height: 1.35em; }
.quotes__arrow--prev { left: -1.1rem; }
.quotes__arrow--prev .icon { transform: rotate(90deg); }
.quotes__arrow--next { right: -1.1rem; }
.quotes__arrow--next .icon { transform: rotate(-90deg); }
.quotes__page {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateX(36px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out), visibility .55s;
}
.quotes__page.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.quotes__page.is-leaving { transform: translateX(-36px); }

.quote {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 2.2rem 2.1rem 1.8rem;
  border-radius: var(--radius);
  background: #FFF;
  border: 1px solid var(--border);
  box-shadow: 0 26px 50px -32px rgba(0, 0, 0, .6);
  transition: transform .35s var(--ease-out), box-shadow .35s;
}
.quote:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 60px -30px rgba(228, 37, 53, .35);
}
/* Virgolette decorative */
.quote::after {
  content: '”';
  position: absolute;
  top: .9rem; right: 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.6rem;
  line-height: 1;
  color: var(--red);
  opacity: .16;
  pointer-events: none;
}

/* Pallini centrati sotto i due box (su fondo scuro) */
.quotes__dots {
  display: flex;
  justify-content: center;
  gap: .55rem;
  margin-top: 1.6rem;
}
.quotes__dot {
  width: 10px; height: 10px;
  padding: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .3);
  transition: background-color .3s, width .35s var(--ease-out);
}
.quotes__dot:hover { background: rgba(255, 255, 255, .6); }
.quotes__dot.is-active { width: 26px; background: var(--red); }
.quote__stars { display: flex; gap: .2rem; color: var(--red); }
.quote__stars .icon { width: 1rem; height: 1rem; }
.quote blockquote {
  position: relative;
  z-index: 1;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
}
/* Firma: avatar con anello + nome e ruolo su due righe */
.quote figcaption {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.quote__avatar {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  color: #FFF;
  background: linear-gradient(140deg, var(--red), var(--ink));
  box-shadow: 0 0 0 2px #FFF, 0 0 0 4px rgba(219, 31, 46, .3);
}
.quote__who {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.quote__who strong { font-size: .95rem; color: var(--ink); }
.quote__who span { font-size: .82rem; color: var(--text-2); }

/* ==========================================================================
   22. FAQ
   ========================================================================== */
.faq { background: var(--bg); }
.faq__wrap {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.faq__head { position: sticky; top: calc(var(--nav-h) + 2rem); }
.faq__head p { color: var(--text-2); }

.faq-item { border-bottom: 1px solid #DDDAD3; }
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.25rem 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
  transition: color .25s;
}
.faq-item__q:hover { color: var(--red); }
.faq-item__q .icon {
  color: var(--red);
  transition: transform .4s var(--ease-out);
}
.faq-item.is-open .faq-item__q .icon { transform: rotate(180deg); }

.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s var(--ease-out);
}
.faq-item__a > div { overflow: hidden; min-height: 0; }
.faq-item__a p {
  padding-bottom: 1.35rem;
  color: var(--text-2);
  max-width: 60ch;
}
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }

/* ==========================================================================
   23. DOVE SIAMO
   ========================================================================== */
.where { background: var(--bg-2); }
.where__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.where__address { font-style: normal; display: grid; gap: .7rem; margin-bottom: 2rem; }
.where__address p { display: flex; align-items: center; gap: .8rem; color: var(--text-2); }
.where__address .icon { color: var(--red); }
.where__address a { color: var(--ink); text-decoration: none; }
.where__address a:hover { color: var(--red); }

.where__hours-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: .9rem;
}
.where__hours-title .icon { color: var(--red); }

.hours {
  width: 100%;
  max-width: 420px;
  border-collapse: collapse;
  margin-bottom: 2.2rem;
}
.hours th, .hours td {
  padding: .65rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .96rem;
}
.hours th { text-align: left; font-weight: 500; color: var(--text-2); }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }

.where__ctas { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Mappa Google Maps reale (iframe embed, lazy) */
.map {
  position: relative;
  border-radius: var(--radius);
  overflow: clip;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  aspect-ratio: 8 / 7;
}
.map__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Overlay finché non c'è il consenso ai cookie di terze parti */
.map__consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
  background: #FFF;
}
.map__consent .icon { width: 34px; height: 34px; color: var(--red); }
.map__consent p { color: var(--text-2); font-size: .95rem; max-width: 34ch; }

/* ==========================================================================
   24. CTA FINALE — banda nera
   ========================================================================== */
.final {
  position: relative;
  padding: clamp(6rem, 14vw, 10rem) 0;
  overflow: clip;
  text-align: center;
  color: var(--dark-text);
}
/* Dominante rossa come le bande community e recensioni */
.final__bg {
  position: absolute; inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 90% at 50% 108%, rgba(228, 37, 53, .68), transparent 64%),
    radial-gradient(60% 85% at 14% 4%, rgba(158, 16, 32, .72), transparent 66%),
    radial-gradient(55% 75% at 88% 8%, rgba(228, 37, 53, .5), transparent 62%),
    radial-gradient(40% 55% at 50% 45%, rgba(255, 106, 61, .16), transparent 70%),
    linear-gradient(170deg, #3A0C14, #23070D 52%, #14070B);
}
.final__title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.4rem + 4.2vw, 4.2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  margin-bottom: 1.3rem;
  text-wrap: balance;
}
.final .holo-text { background-image: var(--holo-dark); }
.final__sub {
  max-width: 58ch;
  margin: 0 auto 2.6rem;
  color: var(--dark-text-2);
  font-size: 1.08rem;
}
.final__note {
  margin-top: 1.4rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--dark-text-2);
}

/* ==========================================================================
   25. FOOTER — nero
   ========================================================================== */
.footer {
  background: var(--dark);
  color: var(--dark-text);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 4.5rem;
}
.footer .nav__logo-text { color: var(--dark-text); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3.5rem;
}
.footer__brand p {
  color: var(--dark-text-2);
  font-size: .95rem;
  margin: 1rem 0 1.4rem;
  max-width: 34ch;
}
.footer__social { display: flex; gap: .7rem; }
.footer__social a {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--dark-text-2);
  transition: color .25s, border-color .25s, transform .25s var(--ease-spring);
}
.footer__social a:hover { color: #FFF; border-color: var(--red); background: var(--red); transform: translateY(-3px); }

.footer__col h3 {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dark-text-2);
  margin-bottom: 1.1rem;
}
.footer__col ul { list-style: none; display: grid; gap: .55rem; }
.footer__col a, .footer__col span { color: var(--dark-text); font-size: .95rem; }
/* Specificità alta: vince sulla regola generica "li a:not([class])" rossa */
.footer .footer__col ul li a {
  color: var(--dark-text);
  text-decoration: none;
  transition: color .25s;
}
.footer .footer__col ul li a:hover { color: #FF6B76; }
.footer__hours li { display: flex; justify-content: space-between; gap: 1rem; color: var(--dark-text-2); font-size: .92rem; }
.footer__hours span:last-child { color: var(--dark-text); font-variant-numeric: tabular-nums; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem;
  padding-block: 1.6rem 5.4rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: .82rem;
  color: var(--dark-text-2);
}
.footer__legal { max-width: 62ch; opacity: .75; }
.footer__todo { opacity: .6; }

/* ==========================================================================
   26. FAB WHATSAPP
   ========================================================================== */
/* Come i bottoni WhatsApp: bianco/verde che si inverte all'hover */
.fab {
  position: fixed;
  right: 1.5rem;
  bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
  z-index: 1600;
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #FFF;
  border: 1.5px solid #1EBB5D;
  color: #0E7C41;
  box-shadow: 0 12px 34px -10px rgba(18, 140, 74, .5);
  opacity: 0;
  transform: translateY(18px) scale(.85);
  pointer-events: none;
  transition: opacity .4s, transform .45s var(--ease-spring), background-color .3s, color .3s, border-color .3s;
}
.fab:hover {
  background: linear-gradient(160deg, #2ED271, #17A854 45%, #0E7C41);
  border-color: #FFF;
  color: #FFF;
}
.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab .icon { width: 28px; height: 28px; fill: currentColor; }
.fab::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(37, 211, 102, .45);
  animation: fab-pulse 5s ease-out infinite;
}
@keyframes fab-pulse {
  0%   { transform: scale(1); opacity: .55; }
  60%, 100% { transform: scale(1.32); opacity: 0; }
}
.fab__tip {
  position: absolute;
  right: calc(100% + .9rem);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: var(--ink);
  color: #FFF;
  font-size: .85rem;
  font-weight: 500;
  padding: .55rem .95rem;
  border-radius: 10px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, transform .35s var(--ease-out), visibility .35s;
}
.fab__tip.is-shown, .fab:hover .fab__tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
}

/* ==========================================================================
   26b. BANNER COOKIE
   ========================================================================== */
.cookiebar {
  position: fixed;
  left: 1.5rem; bottom: 1.5rem;
  z-index: 1700;
  max-width: 400px;
  padding: 1.3rem 1.4rem;
  border-radius: var(--radius-sm);
  background: #FFF;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  animation: cookie-in .6s var(--ease-out) both;
}
@keyframes cookie-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookiebar__text {
  font-size: .92rem;
  color: var(--text-2);
  margin-bottom: 1rem;
}
.cookiebar__text strong { color: var(--ink); }
.cookiebar__actions { display: flex; flex-wrap: wrap; gap: .6rem; }


/* ==========================================================================
   27. SISTEMA REVEAL — le regole vivono sotto html.js:
   senza JavaScript tutto il contenuto resta visibile
   ========================================================================== */
html.js [data-reveal] {
  opacity: 0;
  transition:
    opacity .8s var(--ease-out),
    transform .9s var(--ease-out),
    filter .8s var(--ease-out),
    clip-path .9s var(--ease-out);
  transition-delay: var(--d, calc(var(--stagger-i, 0) * 90ms));
}
html.js [data-reveal="up"]    { transform: translateY(34px); }
html.js [data-reveal="left"]  { transform: translateX(-44px); }
html.js [data-reveal="scale"] { transform: scale(.92); filter: blur(6px); }
/* NOTA: il clip pre-reveal NON può stare nello stato nascosto — un elemento
   completamente clippato ha intersectionRect vuoto e l'observer non scatta.
   Lo applichiamo quindi come animazione solo quando l'elemento è in-view. */
html.js [data-reveal="clip"]  { transform: translateY(12px); }
html.js [data-reveal].is-inview {
  opacity: 1;
  transform: none;
  filter: none;
}
html.js [data-reveal="clip"].is-inview {
  animation: reveal-clip .9s var(--ease-out) both;
  animation-delay: var(--d, calc(var(--stagger-i, 0) * 90ms));
}
@keyframes reveal-clip {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ==========================================================================
   28. RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  /* Ordine mobile: titolo → testo → 3 carte → stats → pulsanti.
     display:contents "scioglie" .hero__content così le carte (sibling)
     si possono intercalare tra i suoi figli con order */
  .hero__inner { display: flex; flex-direction: column; }
  .hero__content { display: contents; }
  .hero__eyebrow { order: 0; }
  .hero__title { order: 1; }
  .hero__sub { order: 2; }
  .hero__cards { order: 3; }
  .hero__stats { order: 4; margin-top: 2.2rem; }
  .hero__ctas { order: 5; margin: 2.2rem 0 0; }
  .hero__cards {
    height: 300px;
    max-width: 560px;
    width: 100%;
    margin-inline: auto;
  }
  /* Ventaglio simmetrico ancorato al centro: le laterali distano
     ±0.84 larghezze-carta dalla centrale, mai oltre il viewport */
  .tcard { --tw: clamp(120px, 24vw, 180px); width: var(--tw); }
  .tcard--1 { left: calc(50% - var(--tw) * 1.34); top: 15%; --rz: -10deg; }
  .tcard--2 { left: calc(50% - var(--tw) / 2);    top: 3%;  --rz: 0deg; }
  .tcard--3 { left: calc(50% + var(--tw) * .34);  top: 15%; --rz: 10deg; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .games__grid { grid-template-columns: repeat(2, 1fr); }
  .stock__grid { grid-template-columns: repeat(3, 1fr); }
  .services__grid { grid-template-columns: 1fr; max-width: 640px; }
  .faq__wrap { grid-template-columns: 1fr; }
  .faq__head { position: static; }
}

@media (max-width: 860px) {
  .about__grid, .where__grid { grid-template-columns: 1fr; }
  /* justify-self invece di margin-inline:auto: su un grid item il margine
     automatico attiva lo shrink-to-fit e, con figli tutti in position:absolute,
     il contenitore collasserebbe a larghezza 0 */
  .about__visual { order: -1; width: 100%; max-width: 540px; justify-self: center; }
  .stock__grid { grid-template-columns: repeat(2, 1fr); }
  .online__grid { grid-template-columns: 1fr; }
  /* La colonna diventa piena larghezza: il blocco resta sotto la foto */
  .community__side { width: 100%; max-width: 540px; justify-self: center; }
  .community__photo { max-width: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .quotes__page { grid-template-columns: 1fr; }
  .community__grid { grid-template-columns: 1fr; }
  .community__photo { max-width: 540px; margin-inline: auto; }
}

@media (max-width: 760px) {
  /* Menu mobile a tutto schermo */
  .nav__burger { display: flex; }
  .nav__menu {
    position: fixed;
    inset: 0;
    z-index: -1;
    flex-direction: column;
    justify-content: center;
    gap: 2.6rem;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s, visibility .4s;
  }
  .nav__menu.is-open { opacity: 1; visibility: visible; z-index: 999; }
  .nav__list { flex-direction: column; align-items: center; gap: 1.6rem; }
  .nav__link { font-size: 1.5rem; font-family: var(--font-display); font-weight: 600; color: var(--ink); }

  /* Su mobile il backdrop-filter durante lo scroll è inaffidabile:
     sfondo quasi opaco così l'header non lascia mai trasparire il contenuto */
  .nav.is-scrolled {
    background: rgba(255, 255, 255, .96);
  }

  .hero { padding-top: calc(var(--nav-h) + 1.5rem); }
  .hero__stats { gap: 1.4rem 2rem; }
  .stat__num { font-size: 1.65rem; }

  .community__band { clip-path: polygon(0 0, 100% 1.8%, 100% 100%, 0 98.2%); }
  .quotes { clip-path: polygon(0 1.8%, 100% 0, 100% 98.2%, 0 100%); }

  /* Frecce dentro i margini sugli schermi stretti */
  .quotes__arrow--prev { left: .4rem; }
  .quotes__arrow--next { right: .4rem; }

  /* Il banner cookie sta sopra al FAB (z 1700 > 1600) finché non viene chiuso */
  .cookiebar {
    left: 1rem; right: 1rem;
    max-width: none;
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 560px) {
  /* Ventaglio più chiuso: le slide laterali restano dentro lo schermo */
  .deck { --fan: 32%; }

  /* Tre colonne sarebbero troppo strette: la timeline ruota in verticale,
     il filo scende e i nodi si accendono con la stessa cadenza del desktop */
  .ltp__progress { display: none; }
  .ltp__steps {
    grid-template-columns: 1fr;
    gap: .8rem;
    margin-top: .9rem;
    position: relative;
    padding-left: 1.5rem;
  }
  .ltp__steps::before {
    content: '';
    position: absolute;
    left: 4px; top: .5rem; bottom: .5rem;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, #FF6A3D, #E42535 45%, #9E1020 95%);
    transform: scaleY(1);
    transform-origin: 50% 0;
    transition: transform 1.5s linear .25s;
  }
  html.js .ltp__flow:not(.is-inview) .ltp__steps::before { transform: scaleY(0); }

  .step { display: flex; align-items: baseline; gap: .6rem; text-align: left; }
  .step::before {
    content: '';
    position: absolute;
    left: -1.5rem; top: .38rem;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--red);
    border: 2px solid rgba(255, 255, 255, .9);
    box-shadow: 0 0 8px rgba(228, 37, 53, .55);
    transition: background-color .3s, border-color .3s, box-shadow .3s;
    transition-delay: inherit; /* eredita la cadenza .5s/1s/1.5s dello step */
  }
  html.js .ltp__flow:not(.is-inview) .step::before {
    background: rgba(255, 255, 255, .25);
    border-color: rgba(255, 255, 255, .35);
    box-shadow: 0 0 0 transparent;
  }
  .step__num { display: inline; margin-bottom: 0; }

  .container { width: min(1160px, 100% - 2.2rem); }
  .bento { grid-template-columns: 1fr; }
  .stock__grid { grid-template-columns: 1fr; }
  .games__grid { grid-template-columns: 1fr; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
  .footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .where__ctas .btn { width: 100%; justify-content: center; }
  .filter-group__label { width: 100%; }
}

/* ==========================================================================
   29. REDUCED MOTION & PREFERENZE UTENTE
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html.js [data-reveal] { opacity: 1; transform: none; filter: none; clip-path: none; }
  /* La progressione Learn to Play parte già completata */
  html.js .ltp__flow:not(.is-inview) .step { opacity: 1; transform: none; }
  html.js .ltp__flow:not(.is-inview) .ltp__progress-fill,
  html.js .ltp__flow:not(.is-inview) .ltp__steps::before { transform: none; }
  html.js .ltp__flow:not(.is-inview) .ltp__progress-dot { border-color: var(--red); transform: translate(-50%, -50%); }
  html.js .ltp__flow:not(.is-inview) .step::before { border-color: var(--red); }
  html.js .hero__title:not(.is-ready) .w__i { transform: none; }
  .hero__mesh::before, .hero__mesh::after,
  .tcard, .tcard__foil::after, .btn--wa::before,
  .marquee__track, .fab::after { animation: none !important; }
}

/* Touch: niente hover-tilt */
@media (pointer: coarse) {
  .game { transform: none !important; }
}