/* 2048 Animali — stile proprio del gioco */

.t48-info { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); padding: 8px; font-size: 15px; color: var(--muted); }
.t48-info .card { height: 40px; width: 64px; font-size: 17px; gap: 3px; flex-direction: row; }
.t48-info .card .sym { font-size: 14px; }

/* La griglia è un quadrato: le tessere si posizionano in percentuale */
.t48-board {
  position: relative; width: min(100%, 480px); aspect-ratio: 1; margin: 0 auto;
  background: var(--slot); border: 2px solid var(--line); border-radius: var(--radius);
  touch-action: none; container-type: inline-size;
}
.t48-cell, .t48-tile { position: absolute; border-radius: 10px; }
.t48-cell { background: color-mix(in srgb, var(--panel) 55%, var(--slot)); }
.t48-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  font-weight: 700; color: #1d2624; border: 2px solid rgba(0,0,0,.18); box-shadow: 0 2px 0 rgba(0,0,0,.12);
  font-size: calc(var(--cell) * 0.3cqw);
  transition: left 120ms ease, top 120ms ease;
  z-index: 2;
}
.t48-tile.d3 { font-size: calc(var(--cell) * 0.25cqw); }
.t48-tile.d4 { font-size: calc(var(--cell) * 0.2cqw); }
.t48-tile .sym { font-size: calc(var(--cell) * 0.2cqw); margin-bottom: 2px; }
.t48-tile.ghost { z-index: 1; }
.t48-tile.appear { animation: t48-appear 200ms ease; }
.t48-tile.pop { animation: pop 220ms ease; }
.t48-board.tool-on .t48-tile { cursor: pointer; outline: 3px dashed color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: -4px; }
body.reduce-motion .t48-tile { transition: none; animation: none; }
@keyframes t48-appear { from { transform: scale(.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* Frecce grandi sullo schermo: per chi fa fatica a scorrere con il dito */
.t48-pad { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 56px); gap: 6px; justify-content: center; }
.t48-pad button { border-radius: var(--radius); border: 2px solid var(--line); background: var(--panel); font-size: 26px; }
.t48-pad button.hint { border: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 20%, var(--panel)); }
.t48-pad [data-dir="su"] { grid-column: 2; grid-row: 1; }
.t48-pad [data-dir="sx"] { grid-column: 1; grid-row: 2; }
.t48-pad [data-dir="giu"] { grid-column: 2; grid-row: 2; }
.t48-pad [data-dir="dx"] { grid-column: 3; grid-row: 2; }