.steps { padding-left: 22px; margin: 8px 0 14px; }

/* Telefono in orizzontale (D16): prima la parola e i pulsanti, poi le istruzioni. */
.compact main { display: flex; flex-direction: column; padding-top: 8px; }
.compact h1 { display: none; }
.compact .board { order: 1; }
.compact .actions { order: 2; margin: 8px 0 12px; }
.compact .actions .big { min-height: 52px; }
.compact .steps { order: 3; }
.compact .panel, .compact details { order: 4; }
.steps li { margin: 2px 0; }

.board {
  position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; touch-action: manipulation; cursor: pointer;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.board .word-b { position: absolute; }
.word-b .letter.vocale path { fill: var(--red); }
.word-b .letter.consonante path { fill: var(--blue); }
.word-b .letter.altro path { fill: var(--ink); }
.word-b .base.hidden { visibility: hidden; }

.actions { display: flex; gap: 12px; margin: 12px 0 20px; }
.actions .big { flex: 1; min-height: 64px; font-size: 20px; border-radius: 14px; }
button:disabled { opacity: 0.4; cursor: default; }

/*
  La tessera. .tile sale fuori dalla parola, .inner si ribalta, le due facce hanno la
  stessa misura. Davanti la lettera corsiva, dietro la stessa lettera in stampatello.
  Le facce si scambiano a metà rotazione con visibility: in WebKit backface-visibility da
  solo non basta.
*/
.tile {
  position: absolute; perspective: 800px; pointer-events: none;
  --tile-color: var(--blue);
  --card-bg: var(--tile-color); --card-border: var(--tile-color); --card-ink: #fff;
  transition: transform 200ms cubic-bezier(0.3, 1.4, 0.5, 1), opacity 160ms linear;
}
.tile.vocale { --tile-color: var(--red); }
.style-white .tile { --card-bg: #fff; --card-border: var(--line); --card-ink: var(--tile-color); }

.tile .inner { position: absolute; inset: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1); }
.tile .face {
  position: absolute; inset: 0; border-radius: 12px; border: 2px solid transparent;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; place-items: center;
}
.tile .front { transition: visibility 0s linear 120ms, background-color 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out; }
.tile .front svg { position: absolute; left: 0; top: 0; overflow: visible; }
.tile .front path { fill: var(--tile-color); transition: fill 160ms ease-out; }
.tile .back {
  transform: rotateY(180deg); visibility: hidden; transition: visibility 0s linear 120ms;
  font-family: "Andika", sans-serif; line-height: 1;
  background: var(--card-bg); border-color: var(--card-border); color: var(--card-ink); box-shadow: var(--tile-shadow);
}

.tile.lifted { transform: translateY(var(--lift)); }
.tile.lifted .front { background: var(--card-bg); border-color: var(--card-border); box-shadow: var(--tile-shadow); }
.tile.lifted .front path { fill: var(--card-ink); }
.tile.flipped .inner { transform: rotateY(180deg); }
.tile.flipped .front { visibility: hidden; }
.tile.flipped .back { visibility: visible; }

/* Senza movimento (impostazione del sistema o casella della pagina): solo dissolvenze. */
.reduce .tile { transition: opacity 160ms linear; }
.reduce .tile .inner { transition: none; }
.reduce .tile.flipped .inner { transform: none; }
.reduce .tile .front, .reduce .tile .back, .reduce .tile.flipped .front { visibility: visible; }
.reduce .tile .front { transition: opacity 160ms linear; }
.reduce .tile .back { transform: none; opacity: 0; transition: opacity 160ms linear; }
.reduce .tile.flipped .back { opacity: 1; }
.reduce .tile.flipped .front { opacity: 0; }