/* ===== Pixel Arena - foglio di stile condiviso ===== */

@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rubik:wght@400;600&display=swap");

/* ----- Temi (variabili colore) ----- */

:root,
:root[data-tema="neon"] {
    --sfondo: #12101f;
    --superficie: #1d1933;
    --superficie-2: #241f3d;
    --bordo: #3a3363;
    --barra: #2a2447;
    --testo: #e6e3f5;
    --testo-tenue: #b9b3d9;
    --testo-piede: #8f88b3;
    --accento-1: #ffd23f;
    --accento-2: #ff4fa3;
    --accento-3: #3fd7ff;
    --su-accento: #12101f;
}

:root[data-tema="retro"] {
    --sfondo: #0f1a0f;
    --superficie: #182818;
    --superficie-2: #1e321e;
    --bordo: #2f4f2f;
    --barra: #213821;
    --testo: #d6f5c8;
    --testo-tenue: #a9d39a;
    --testo-piede: #7fa872;
    --accento-1: #9bbc0f;
    --accento-2: #e0f87a;
    --accento-3: #6bd36b;
    --su-accento: #0f1a0f;
}

:root[data-tema="oceano"] {
    --sfondo: #07172a;
    --superficie: #0d2440;
    --superficie-2: #112d4f;
    --bordo: #1f4a78;
    --barra: #123459;
    --testo: #e2f0ff;
    --testo-tenue: #a8c8ea;
    --testo-piede: #7c9fc4;
    --accento-1: #4fd1c5;
    --accento-2: #63b3ff;
    --accento-3: #a5f3fc;
    --su-accento: #07172a;
}

:root[data-tema="tramonto"] {
    --sfondo: #1f0f14;
    --superficie: #2e1720;
    --superficie-2: #371c27;
    --bordo: #5a2e3d;
    --barra: #432230;
    --testo: #fde8e0;
    --testo-tenue: #e8bcae;
    --testo-piede: #b98d82;
    --accento-1: #ffb347;
    --accento-2: #ff6b6b;
    --accento-3: #ffd27f;
    --su-accento: #1f0f14;
}

:root[data-tema="chiaro"] {
    --sfondo: #f5f3fb;
    --superficie: #ffffff;
    --superficie-2: #ffffff;
    --bordo: #d9d4ec;
    --barra: #ebe7f7;
    --testo: #1f1b33;
    --testo-tenue: #554e75;
    --testo-piede: #7a7398;
    --accento-1: #6c3ce0;
    --accento-2: #d6336c;
    --accento-3: #0b7fab;
    --su-accento: #ffffff;
}

/* ----- Selettori di elemento ----- */

body {
    margin: 0;
    padding: 0;
    background-color: var(--sfondo);
    color: var(--testo);
    font-family: "Rubik", "Segoe UI", Arial, sans-serif;
    line-height: 1.6;
}

div {
    box-sizing: border-box;
}

span {
    font-weight: 600;
}

h1,
h2,
h3 {
    margin: 0;
}

button {
    font-family: inherit;
    cursor: pointer;
}

/* ----- Selettori ID ----- */

#barra-strumenti {
    margin: 0;
    padding: 8px 20px;
    background-color: var(--sfondo);
    border-bottom: 1px solid var(--bordo);
    text-align: right;
}

#intestazione,
#intestazione-giochi {
    margin: 0;
    padding: 48px 20px 36px;
    background-color: var(--superficie);
    text-align: center;
    border-bottom: 4px solid var(--accento-2);
}

#intestazione h1,
#intestazione-giochi h1 {
    color: var(--accento-1);
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 2rem;
    letter-spacing: 2px;
}

#intestazione-giochi {
    border-bottom-color: var(--accento-3);
}

#menu {
    margin: 0;
    padding: 14px 20px;
    background-color: var(--barra);
    text-align: center;
}

#generi {
    margin: 32px 0 0;
    padding: 0;
}

#elenco-giochi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin: 28px 0;
    padding: 0;
}

#piede {
    margin: 48px 0 0;
    padding: 20px;
    background-color: var(--superficie);
    color: var(--testo-piede);
    text-align: center;
    font-size: 0.85rem;
}

#piede p {
    margin: 0;
}

/* ----- Selettori di classe ----- */

.gruppo-strumenti {
    display: inline-block;
    margin: 0 0 0 18px;
    padding: 0;
    vertical-align: middle;
}

.etichetta-strumenti {
    margin: 0 6px 0 0;
    color: var(--testo-tenue);
    font-size: 0.75rem;
    font-weight: normal;
    vertical-align: middle;
}

.tema-btn {
    width: 22px;
    height: 22px;
    margin: 0 2px;
    padding: 0;
    border: 2px solid var(--bordo);
    border-radius: 50%;
    vertical-align: middle;
}

.tema-neon     { background-color: #ff4fa3; }
.tema-retro    { background-color: #9bbc0f; }
.tema-oceano   { background-color: #63b3ff; }
.tema-tramonto { background-color: #ffb347; }
.tema-chiaro   { background-color: #f5f3fb; }

.lingua-btn {
    margin: 0 2px;
    padding: 3px 8px;
    color: var(--testo);
    background-color: var(--superficie-2);
    border: 1px solid var(--bordo);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
}

.lingua-btn:hover {
    border-color: var(--accento-1);
}

.tema-btn.selezionato {
    border-color: var(--testo);
    outline: 2px solid var(--accento-1);
    outline-offset: 1px;
}

.lingua-btn.selezionato {
    color: var(--su-accento);
    background-color: var(--accento-1);
    border-color: var(--accento-1);
}

.sottotitolo {
    margin: 14px 0 0;
    color: var(--testo-tenue);
    font-size: 1rem;
}

.voce-menu {
    display: inline-block;
    margin: 0 6px;
    padding: 8px 18px;
    color: var(--testo);
    background-color: var(--bordo);
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 0.7rem;
    text-decoration: none;
    border-radius: 4px;
}

.voce-menu:hover {
    background-color: var(--accento-2);
    color: var(--su-accento);
}

.attiva {
    background-color: var(--accento-1);
    color: var(--su-accento);
}

.contenuto {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 20px 0;
}

.intro {
    margin: 0;
    padding: 20px 24px;
    background-color: var(--superficie);
    border-left: 4px solid var(--accento-1);
    border-radius: 4px;
    font-size: 1.05rem;
}

.parola-chiave {
    color: var(--accento-2);
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 0.7rem;
    font-weight: normal;
}

.titolo-sezione {
    margin: 0 0 18px;
    color: var(--accento-3);
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 1rem;
}

.genere {
    margin: 0 0 16px;
    padding: 18px 22px;
    background-color: var(--superficie-2);
    border: 2px solid var(--bordo);
    border-radius: 6px;
}

.genere h3 {
    margin: 0 0 6px;
    color: var(--accento-1);
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 0.85rem;
}

.genere p {
    margin: 0;
}

.scheda {
    margin: 0;
    padding: 18px 20px;
    background-color: var(--superficie-2);
    border: 2px solid var(--bordo);
    border-radius: 6px;
}

.scheda:hover {
    border-color: var(--accento-3);
}

.nome-gioco {
    display: block;
    color: var(--accento-3);
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 0.8rem;
    font-weight: normal;
}

.genere-gioco {
    margin: 10px 0 6px;
    padding: 2px 8px;
    display: inline-block;
    background-color: var(--bordo);
    color: var(--accento-1);
    font-size: 0.8rem;
    border-radius: 3px;
}

.descrizione {
    margin: 0;
    color: var(--testo-tenue);
}

.navigazione {
    margin: 8px 0 0;
    padding: 0;
    text-align: center;
}

.link-home {
    display: inline-block;
    padding: 12px 22px;
    color: var(--su-accento);
    background-color: var(--accento-1);
    font-family: "Press Start 2P", "Courier New", monospace;
    font-size: 0.7rem;
    text-decoration: none;
    border-radius: 4px;
}

.link-home:hover {
    background-color: var(--accento-2);
}

/* ----- Schermi piccoli ----- */

@media (max-width: 640px) {
    #barra-strumenti {
        text-align: center;
    }

    .gruppo-strumenti {
        margin: 4px 8px;
    }

    #intestazione h1,
    #intestazione-giochi h1 {
        font-size: 1.2rem;
    }
}