/* ── Reset & base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: linear-gradient(349deg, #2B3B40 0.71%, #07252F 98.04%);
  -webkit-font-smoothing: antialiased;
}

/* ── Outer layout ─────────────────────────────────────────────────── */
.landing-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  height: 100dvh;
  padding-top:    max(30px, env(safe-area-inset-top));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
  padding-left:   0;
  padding-right:  0;
  user-select: none;
}

/* ── Logo ─────────────────────────────────────────────────────────── */
.landing-logo {
  display: block;
  width: auto;
  height: 140px;
  pointer-events: none;
}

/* ── Subtitle ─────────────────────────────────────────────────────── */
.pick-label {
  font-family: 'Pirata One', cursive;
  font-size: 40px;
  color: #F9314F;
  text-align: center;
  line-height: 1;
}

/* ── Carousel wrapper ────────────────────────────────────────────── */
.hero-carousel {
  width: 100%;
  /* No overflow:hidden — le carte laterali escono dal viewport naturalmente
     su mobile; tenerlo causerebbe il taglio del box-shadow sulla carta attiva */
  /* pan-y: il browser gestisce solo lo scroll verticale (già bloccato da
     body overflow:hidden), cedendo lo swipe orizzontale a JavaScript.
     Senza questo, Android Chrome emette pointercancel non appena rileva
     un gesto orizzontale e lo intercetta prima che il codice possa misurarlo. */
  touch-action: pan-y;
}

/* ── Sliding track — moved with JS translateX ────────────────────── */
.hero-track {
  display: flex;
  gap: 4px;
  will-change: transform;
  /* transition injected by JS only during animation */
}

/* ── Individual card ──────────────────────────────────────────────── */
.hero-card {
  flex-shrink: 0;
  /* width mirrors the JS formula: Math.min(200, innerWidth/2 - 16) */
  width: min(200px, calc(50vw - 16px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px 20px;
  background: #07252F;
  border-radius: 20px;
  transform: scale(0.8);
  transform-origin: center center;
  transition: background 0.3s ease, transform 0.3s ease;
}

.hero-card.active {
  background: #334347;
  transform: scale(1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
}

/* ── Hero illustration ────────────────────────────────────────────── */
.hero-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* ── Divider line ─────────────────────────────────────────────────── */
.hero-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
}

/* ── Hero name ────────────────────────────────────────────────────── */
.hero-name {
  font-family: 'Pirata One', cursive;
  font-size: 32px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
}

/* ── Start button ─────────────────────────────────────────────────── */
.start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 40px;
  background: #740012;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.start-btn:active {
  opacity: 0.85;
  transform: scale(0.97);
}

.start-btn span {
  font-family: 'Pirata One', cursive;
  font-size: 52px;
  font-weight: 400;
  color: #F9314F;
  line-height: 1.3;
  white-space: nowrap;
}