/* La porta di casa: il vestito della pagina di accesso.

   Era l'ultima pagina rimasta col tema vecchio. Misurato sul sito il
   21/09/2026, prima di questo foglio: fondo rgb(10, 5, 24) - il viola di
   base.css - riquadro viola, tasto con la sfumatura crema-oro-bronzo
   (#fff2a8 -> #ffc83d -> #c9821a) e caratteri Arial. Due passi piu' in la',
   in home, il fondo era #0b0f17, il tasto oro pieno e il carattere quello
   di sistema: due siti diversi attaccati con lo sputo.

   Questo foglio si carica DOPO base.css e lo ridipinge, esattamente come
   casa-nuova.css fa con la home. Prende da li' la stessa tavolozza, lo
   stesso carattere e le stesse misure dei riquadri, cosi' chi arriva
   dall'ENTRA della home non si accorge di aver cambiato pagina.

   Qui c'e' solo il vestito: campi, nomi, gettone, messaggi d'errore e
   limite dei tentativi restano dove stanno, in entra.php. */

:root {
  /* Gli stessi nomi e gli stessi valori di casa-nuova.css: se un giorno la
     tavolozza cambia, cambia in tutt'e due e le due pagine restano sorelle. */
  --en-fondo: #0b0f17;
  --en-carta: #11161f;
  --en-bordo: #1a2130;
  --en-bordo-forte: #232c3d;
  --en-rilievo: #161d2a;
  --en-testo: #e8edf5;
  --en-spento: #8a96ab;
  --en-oro: #f5c542;
  --en-oro-chiaro: #ffe08a;
  --en-su-oro: #1a1300;
  --en-rosso: #e5634d;
  --en-rosso-velo: rgba(229, 99, 77, .07);
}

/* Il velo viola che base.css appoggia dietro al corpo va spento qui, come
   casa-nuova.css lo spegne in home: e' un livello fisso a parte, e cambiare
   il solo background del body lo lascerebbe acceso sopra al fondo nuovo.
   La classe batte il selettore di elemento, quindi non serve !important. */
.pagina-entra::before { display: none; }

.pagina-entra {
  background: var(--en-fondo);
  color: var(--en-testo);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* ---------- la scena: un riquadro solo, in mezzo ---------- */
/* 100dvh e non 100vh: su iPhone la barra del browser mangia una settantina
   di punti a 100vh, e il riquadro finiva mezzo sotto la piega. */
.entra-scena {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 16px;
}

/* Le stesse misure delle carte della home: bordo da un punto sul --en-bordo,
   angoli da 14 (18 sul computer, piu' sotto) e il fondo della carta. Niente
   ombra da 60 punti come prima: su questo fondo si vedeva l'alone e non il
   riquadro. */
.entra-riquadro {
  width: 100%;
  max-width: 380px;
  padding: 26px 24px 22px;
  border: 1px solid var(--en-bordo);
  border-radius: 14px;
  background: var(--en-carta);
  text-align: center;
}

.entra-marchio {
  display: block;
  width: 170px;
  height: auto;
  margin: 0 auto 12px;
}

/* Il peso e il carattere dei titoli della home (font: 800 ... system-ui).
   Niente letter-spacing da un punto: allargava "Accesso giocatore" fino a
   sfiorare i bordi del riquadro sui telefoni da 320 punti. */
.entra-riquadro h1 {
  margin: 0 0 16px;
  font: 800 20px/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--en-testo);
}

/* ---------- i due campi ---------- */
.entra-riquadro label {
  display: block;
  margin: 14px 2px 6px;
  text-align: left;
  font: 800 10px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--en-spento);
}

.entra-riquadro input[type="text"],
.entra-riquadro input[type="password"] {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--en-bordo-forte);
  border-radius: 10px;
  background: var(--en-rilievo);
  color: var(--en-testo);
  font-family: inherit;
  /* 16px pieni: sotto i 16 iPhone ingrandisce la pagina appena si tocca il
     campo, e la pagina di accesso si trova subito storta. */
  font-size: 16px;
  /* Col dito serve un bersaglio da 44 punti. */
  min-height: 44px;
}
.entra-riquadro input::placeholder { color: var(--en-spento); }

/* Col TAB si deve vedere dove si e' arrivati: oro, come in tutto il sito. */
.entra-riquadro input:focus-visible,
.entra-tasto:focus-visible,
.entra-ritorno:focus-visible,
.pagina-entra .occhio:focus-visible {
  outline: 2px solid var(--en-oro);
  outline-offset: 2px;
}

/* Il riempimento automatico del browser: senza questa riga Chrome dipinge
   il campo di azzurro chiaro con testo nero, e chi ha la password salvata
   apriva una pagina scura con due campi bianchi in mezzo. Il colore vero
   non si puo' cambiare, si copre con un'ombra interna piena. */
.entra-riquadro input:-webkit-autofill,
.entra-riquadro input:-webkit-autofill:hover,
.entra-riquadro input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--en-testo);
  -webkit-box-shadow: 0 0 0 40px var(--en-rilievo) inset;
  caret-color: var(--en-testo);
}

/* ---------- il tasto ---------- */
/* Oro pieno e angoli da 10, come i tasti della home e delle corse: niente
   pillola e niente sfumatura crema-bronzo, che era il segno del tema
   vecchio. */
.entra-tasto {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px 24px;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: var(--en-oro);
  color: var(--en-su-oro);
  font: 800 14px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 1px;
  cursor: pointer;
  transition: filter .12s ease;
}
.entra-tasto:hover { filter: brightness(1.06); }

/* ---------- il ritorno alla home ---------- */
.entra-ritorno {
  display: inline-block;
  margin-top: 16px;
  color: var(--en-spento);
  font-size: 12.5px;
  text-decoration: none;
}
.entra-ritorno:hover { color: var(--en-oro); }

/* ---------- l'errore ---------- */
/* Stessa forma degli avvisi del pannello nuovo: cornice rossa, velo rosso
   al 7 per cento e il testo del sito, non rosso su rosso. Il triangolo lo
   mette il foglio e non il PHP, cosi' il messaggio resta quello che
   entra.php ha deciso di dire, parola per parola. */
.entra-errore {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
  padding: 10px 13px;
  min-height: 44px;
  border: 1px solid var(--en-rosso);
  border-radius: 10px;
  background: var(--en-rosso-velo);
  text-align: left;
  font-size: 13.5px;
  color: var(--en-testo);
}
.entra-errore::before {
  content: "\26A0";
  color: var(--en-rosso);
  font-weight: 700;
  /* Il triangolo non si stringe quando il messaggio va su due righe: senza
     questo, "Troppi tentativi. Riprova fra 15 minuti." lo schiacciava. */
  flex: 0 0 auto;
}

/* ---------- l'occhio della password ---------- */
/* Il tasto lo costruisce admin/admin.js, che entra.php carica gia' da
   prima: qui si ridipinge soltanto, perche' admin.css - dove sta il suo
   vestito viola - questa pagina non lo carica piu'. */
.pagina-entra .campo-password {
  position: relative;
  display: block;
}
/* il testo non deve finire sotto il tasto */
.pagina-entra .campo-password input { padding-right: 46px; }
.pagina-entra .occhio {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--en-spento);
  cursor: pointer;
}
.pagina-entra .occhio:hover { color: var(--en-oro); }
.pagina-entra .occhio svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
/* la sbarra dice "adesso e' nascosta" */
.pagina-entra .occhio svg .sbarra { stroke-width: 2; }

/* ---------- sul computer ---------- */
/* La stessa soglia della home (1000 punti) e gli stessi angoli da 18: cosi'
   il riquadro dell'accesso e le carte delle sale hanno la stessa curva. */
@media (min-width: 1000px) {
  .entra-riquadro {
    max-width: 400px;
    padding: 32px 30px 26px;
    border-radius: 18px;
  }
  .entra-marchio { width: 190px; margin-bottom: 14px; }
  .entra-riquadro h1 { font-size: 23px; margin-bottom: 18px; }
  .entra-ritorno { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .pagina-entra * { animation: none !important; transition: none !important; }
}