/* Spire & Spell — LANDING CORTA (2026-10-25): slider «Scopri il gioco» e invito. Caricato SOLO da welcome/corta.html
   (strumenti/landing/corta.mjs la fa dalla lunga). Ogni scheda porta la classe della sua sezione (notte, pergamena…). */
.scopri .linguette { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px 2px 16px; margin: 6px 0 4px; }
@media (min-width: 900px) { .scopri .linguette { justify-content: center; } }
.scopri .linguette::-webkit-scrollbar { display: none; }
.scopri .linguette button { flex: 0 0 auto; font: 800 13px/1 var(--etichette); letter-spacing: .12em; text-transform: uppercase; color: var(--crema); cursor: pointer;
  background: rgba(7, 13, 29, .6); border: 2px solid rgba(224, 169, 59, .4); border-radius: 999px; padding: 11px 16px; transition: background .2s, color .2s, box-shadow .2s, transform .15s; }
.scopri .linguette button:hover { border-color: var(--oro-chiaro); }
.scopri .linguette button[aria-selected="true"] { color: var(--testo-oro); background: linear-gradient(180deg, #ffe39a, var(--oro) 55%, #c88a22); border-color: #7a4d10;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 8px 22px rgba(224, 169, 59, .35); transform: translateY(-1px); }
/* il binario va da bordo a bordo dello SCHERMO; le schede partono allineate al contenuto (.wrap: 1180, margini 16).
   ‼️ in padding/scroll-padding la % è del binario stesso: per questo un rientro fisso e non 50vw - 50% */
.scopri .binario { --rientro: max(16px, calc(50vw - 590px)); position: relative; display: flex; align-items: flex-start; gap: 18px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin: 0 calc(50% - 50vw); padding: 8px var(--rientro) 20px;
  scroll-padding: 0 var(--rientro); transition: height .35s ease; }
.scopri .binario::-webkit-scrollbar { display: none; }
.scopri .binario.trascina { scroll-snap-type: none; cursor: grabbing; user-select: none; }
@media (hover: hover) and (pointer: fine) { .scopri .binario { cursor: grab; } }
.scopri .lastra { flex: 0 0 88%; scroll-snap-align: start; position: relative; overflow: hidden; border: 2px solid rgba(224, 169, 59, .3); border-radius: var(--raggio);
  padding: 34px 30px; box-shadow: var(--ombra); transition: opacity .3s, border-color .3s; }
.scopri .lastra:not(.attiva) { opacity: .45; cursor: pointer; }
.scopri .lastra.attiva { border-color: rgba(255, 217, 120, .7); }
.scopri .lastra .wrap { width: auto; margin: 0; }
.scopri .lastra h2 { font-size: clamp(26px, 3.2vw, 40px); }
.scopri .frecce { display: flex; justify-content: center; gap: 14px; margin-top: 6px; }
.scopri .frecce button { width: 52px; height: 52px; padding: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--testo-oro);
  background: linear-gradient(180deg, #ffe39a, var(--oro) 55%, #c88a22); border: 0; box-shadow: 0 0 0 2px #7a4d10, inset 0 2px 0 rgba(255, 255, 255, .55), 0 10px 22px rgba(224, 169, 59, .35);
  transition: transform .15s, opacity .2s; }
.scopri .frecce button:active { transform: translateY(2px); }
.scopri .frecce button:disabled { opacity: .3; cursor: default; }
/* frecce DISEGNATE, non glifi (in certi caratteri le punte escono storte: già pagato su Ninja Uzi Sushi) */
.scopri .frecce i { display: block; width: 12px; height: 12px; border-top: 3.5px solid currentColor; border-right: 3.5px solid currentColor; border-radius: 2px; }
.scopri .frecce .fr-p i { transform: rotate(-135deg); margin-left: 5px; }
.scopri .frecce .fr-n i { transform: rotate(45deg); margin-right: 5px; }
@media (max-width: 700px) {
  .scopri .lastra { flex-basis: calc(100% - 36px); padding: 22px 14px; }
  .scopri .binario { gap: 12px; }
  .scopri .linguette button { font-size: 12px; padding: 10px 13px; }
}
@media (prefers-reduced-motion: reduce) { .scopri .lastra:not(.attiva) { opacity: 1; } .scopri .binario { transition: none; } }
.invito { padding: clamp(50px, 7vw, 90px) 0; }
/* le SCHERMATE: sul telefono una fila da scorrere col dito (scorrimento nativo) invece di 9 foto in colonna; sul PC la griglia */
@media (max-width: 700px) {
  .schermate { display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 14px; scroll-padding: 0 16px; }
  .schermate::-webkit-scrollbar { display: none; }
  .schermate > .schermata { flex: 0 0 80%; scroll-snap-align: start; }
}