/* ============================================================
   CAMPO DI NAVIGAZIONE — snake
   Usato solo in homepage.

   Due stati:
   - senza JS (o con "riduci movimento"): i tre link sono un
     elenco tipografico normale e funzionante
   - con .is-live: diventano bersagli posizionati sulla griglia

   Usa i token del sito, quindi segue palette e font dello Studio.
   ============================================================ */

.field {
  padding-top: var(--sp-5);
  padding-bottom: var(--sp-6);
}

/* Il campo segue l'intro: niente doppio spazio in mezzo */
.intro + .field { padding-top: 0; }

/* Riga di istruzioni sopra la tavola */
.field__intro {
  max-width: 46ch;
  margin-bottom: var(--sp-4);
  color: var(--ink-soft);
  font-size: var(--fs-sm);
}

/* --- Tavola da gioco ---------------------------------------- */

.field__board {
  --cell: 24px;
  position: relative;
  min-height: clamp(300px, 58vh, 540px);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background-color: var(--paper-2);
  overflow: hidden;

  /* Stato statico: i tre link incolonnati al centro */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
}

.field__board:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Griglia a puntini: compare solo quando il gioco è attivo */
.field__board.is-live {
  display: block;
  padding: 0;
  background-image: radial-gradient(var(--rule) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: var(--grid-x, 0) var(--grid-y, 0);
  /* La pagina deve restare scorrevole anche col dito sul campo */
  touch-action: manipulation;
  cursor: crosshair;
}


/* --- Le tre voci -------------------------------------------- */

.field__target {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 4.5vw, 2.5rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.field__target:hover { color: var(--accent); }

.is-live .field__target {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.1em 0.2em;
  transform: translate(var(--x, 0), var(--y, 0));
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--paper-2);
  z-index: 2;
}

/* Voce agganciata dallo snake */
.is-live .field__target.is-armed {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--paper);
}


/* --- Segmenti dello snake ----------------------------------- */

.seg {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cell);
  height: var(--cell);
  transform: translate(var(--x), var(--y));
  z-index: 1;
  pointer-events: none;
}
/* Il quadratino è più piccolo della cella: resta l'aria della griglia */
.seg::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--ink);
  border-radius: 1px;
}
.seg--head { z-index: 3; }
.seg--head::after { inset: 1px; background: var(--accent); }

/* L'anello si è chiuso: un attimo di segnale, poi si va altrove */
.field__board.is-bitten { border-color: var(--accent); }
.is-bitten .seg::after { background: var(--accent); }
.is-bitten .field__target { opacity: 0.25; }


/* --- Barra sotto il campo ----------------------------------- */

.field__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding-top: var(--sp-4);
}

.field__info { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: baseline; }
.field__hint { color: var(--ink-soft); }
.field__status { color: var(--accent); }

.field__pause {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.field__pause:hover { color: var(--ink); border-color: var(--rule-strong); }


/* --- D-pad --------------------------------------------------- */

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 2.75rem);
  grid-template-rows: repeat(2, 2.75rem);
  gap: 4px;
  flex: none;
}

.dpad__btn {
  display: grid;
  place-items: center;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.dpad__btn:hover { background: var(--paper-2); }
/* Lampeggia anche quando premi il tasto vero sulla tastiera */
.dpad__btn:active,
.dpad__btn.is-down { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.dpad__btn:disabled { opacity: 0.35; cursor: default; }
.dpad__btn:disabled:hover { background: transparent; }

.dpad__up    { grid-area: 1 / 2; }
.dpad__left  { grid-area: 2 / 1; }
.dpad__down  { grid-area: 2 / 2; }
.dpad__right { grid-area: 2 / 3; }
.dpad__ok    { grid-area: 1 / 3; font-size: 0.8rem; letter-spacing: 0.08em; }
.dpad__ok:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.dpad__ok:not(:disabled):hover { background: var(--accent); color: var(--paper); }


/* --- Responsive ---------------------------------------------- */

@media (max-width: 620px) {
  .field__board { min-height: clamp(280px, 48vh, 420px); padding: var(--sp-5); }
  .field__bar { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .dpad {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 3.25rem);
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
  }
  .field__info { justify-content: center; text-align: center; }
}

/* Chi ha chiesto meno movimento resta sull'elenco statico */
@media (prefers-reduced-motion: reduce) {
  .dpad { display: none; }
}