* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #1a1030 0%, #0a0612 70%);
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #f0eaff;
}

/* 'gap' non e' supportato dal browser della TV (verificato dal vivo:
   layout corretto su PC, tutto "incollato" senza spazi sulla TV) —
   margini funzionano ovunque. */
body > * + * {
    margin-top: 3rem;
}

h1 {
    font-size: 2.5rem;
    font-weight: 300;
    letter-spacing: 0.05em;
}

.profili {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Compensa il margine pieno su .profilo-card (necessario perche' il
       'gap' del genitore diretto qui e' .profilo-form, che ha
       display:contents e quindi nessun box su cui applicare margini). */
    margin: -1.25rem;
}

.profilo-form { display: contents; }

.profilo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.25rem;
    width: 160px;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid transparent;
    border-radius: 16px;
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
    /* Animazione leggera/uniforme TV-Android-PC (richiesta esplicita
       dell'utente, 2026-07-30): niente 'transform' (non affidabile sulla
       TV), solo bordo/ombra con transizione breve. */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.profilo-card:hover,
.profilo-card:focus,
.profilo-card:focus-visible {
    border-color: #b58bff;
    box-shadow: 0 0 20px rgba(181, 139, 255, 0.4);
    outline: none;
}

.profilo-card > * + * {
    margin-top: 0.75rem;
}

.profilo-icona {
    font-size: 4rem;
    line-height: 1;
}

.profilo-nome {
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Form nuovo profilo (richiesta esplicita dell'utente, 2026-07-31). */
#schermata-nuovo-profilo {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 420px;
    padding: 0 1rem;
}

#schermata-nuovo-profilo > * + * {
    margin-top: 1.25rem;
}

#schermata-nuovo-profilo h2 {
    font-size: 1.5rem;
    font-weight: 400;
}

#campo-nome-profilo {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    text-align: center;
}

#campo-nome-profilo:focus {
    border-color: #b58bff;
    outline: none;
}

#griglia-icone {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: -0.35rem;
}

.tasto-icona {
    width: 3.5rem;
    height: 3.5rem;
    margin: 0.35rem;
    font-size: 1.6rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tasto-icona:hover,
.tasto-icona:focus {
    border-color: #b58bff;
    outline: none;
}

.tasto-icona.selezionata {
    border-color: #b58bff;
    background: rgba(181, 139, 255, 0.25);
}

#nuovo-profilo-errore {
    color: #a82b2b;
    font-weight: 600;
    text-align: center;
}

#nuovo-profilo-azioni {
    display: flex;
}

#nuovo-profilo-azioni > * + * {
    margin-left: 1rem;
}

#pulsante-annulla-nuovo-profilo,
#pulsante-crea-profilo {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

#pulsante-crea-profilo {
    border-color: #b58bff;
    background: rgba(181, 139, 255, 0.2);
}

#pulsante-annulla-nuovo-profilo:hover,
#pulsante-annulla-nuovo-profilo:focus,
#pulsante-crea-profilo:hover,
#pulsante-crea-profilo:focus {
    border-color: #b58bff;
    background: rgba(181, 139, 255, 0.35);
    outline: none;
}