/* ===========
   GAME — l'area giochi di Mood (`/game/`).
   STILE "CONSOLE" (19/09/2026) — libreria di giochi stile PS5 / Nintendo Switch.

   Mobile-first: la griglia parte a 2 colonne su telefono e sale da tablet in poi.
   Ogni gioco ha il suo colore (icona + aura + bottone Play).
   Ogni pubblico ha il suo colore (pill "Per bambini", "Per adolescenti", ecc.).
   Tema chiaro e scuro gestiti dai token `--mood-*`.

   ICONE: nello sprite `game/shared/js/icons.js`. Qui solo COME si disegna.
   ========================================================================== */

.mood-game-pagina { padding-bottom: 64px; }

/* ---------- UN SIMBOLO DELLO SPRITE ---------- */
.icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ============================================================
   L'EROE — stile "console welcome screen"
   PS5 (deep dark + glow) + Switch (tonde + allegro)
   Solo CSS: stesso HTML, stessa accessibilità.
   ============================================================ */
.gio-eroe {
    position: relative;
    border-radius: 26px;
    padding: 40px 34px 34px;
    margin: 8px 0 30px;
    overflow: hidden;
    isolation: isolate;
    color: #fff;

    /* Fondo scuro con due aloni caldi (blu Mood + viola) */
    background:
        radial-gradient(70% 100% at 85% 15%, rgba(108, 92, 231, .55) 0%, transparent 60%),
        radial-gradient(90% 110% at 5% 90%, rgba(41, 98, 255, .35) 0%, transparent 65%),
        linear-gradient(160deg, #0a0a1c 0%, #06061a 55%, #0f0a2e 100%);

    box-shadow:
        0 30px 80px -30px rgba(108, 92, 231, .55),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Griglia tecnica sottilissima sullo sfondo */
.gio-eroe::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: center;
    mask-image: radial-gradient(120% 100% at 50% 40%, #000 35%, transparent 80%);
    -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, #000 35%, transparent 80%);
    pointer-events: none;
    z-index: 0;
}

/* Alone che pulsa piano, stile PS5 a riposo */
.gio-eroe::after {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 60%; height: 160%;
    background: radial-gradient(circle at center,
                rgba(162, 155, 254, .35) 0%,
                transparent 55%);
    filter: blur(40px);
    animation: gio-eroe-pulse 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes gio-eroe-pulse {
    0%, 100% { opacity: .55; transform: scale(1);   }
    50%      { opacity: .9;  transform: scale(1.12); }
}

/* Tutti i figli sopra gli aloni */
.gio-eroe > * { position: relative; z-index: 1; }

/* ---------- LA TESTA: icona e titolo SULLA STESSA RIGA ----------
   Il titolare (20/09/2026): «avevo chiesto di fare un `<div class="gio-eroe__icona">…</div><h1>Giochi</h1>`
   per mettere in linea display flex .. ora il testo è sempre sotto icona e non mi piace». Prima non
   potevano stare in riga: erano due blocchi uno dopo l'altro, e ognuno aveva il suo margine sotto (l'icona
   18px, il titolo 8px). Adesso è UNA riga, flex: icona a sinistra, titolo accanto, allineati sul centro.

   I due margini si azzerano con DUE classi (`.gio-eroe .gio-eroe__testa > *`) e non con una: dentro il
   telefono stretto il foglio ha una regola più precisa di `.gio-eroe h1` (`margin-bottom: 6px`), e con una
   classe sola quella vincerebbe — il titolo resterebbe 6px più in alto dell'icona, cioè fuori asse di 3px.
   Se su uno schermo molto stretto non ci stessero, `flex-wrap` li manda uno sotto l'altro invece di farli
   sbordare: meglio uno sotto l'altro che tagliati. */
.gio-eroe__testa {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}
.gio-eroe .gio-eroe__testa > * { margin-bottom: 0; }

/* ---------- L'ICONA — un cerchio che emana luce ---------- */
.gio-eroe__icona {
    position: relative;
    width: 62px; height: 62px;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,
                rgba(108, 92, 231, .95) 0%,
                rgba(41, 98, 255, .9) 100%);
    border: 1px solid rgba(255, 255, 255, .28);
    margin-bottom: 18px;
    box-shadow:
        0 12px 34px -10px rgba(108, 92, 231, .9),
        inset 0 1px 0 rgba(255, 255, 255, .35);
}
.gio-eroe__icona::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 26px;
    background: radial-gradient(circle, rgba(162, 155, 254, .55) 0%, transparent 70%);
    filter: blur(12px);
    z-index: -1;
    animation: gio-eroe-pulse 5s ease-in-out infinite;
}
.gio-eroe__icona svg {
    width: 30px; height: 30px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
}

/* ---------- TITOLO — grande, autorevole, con glow ---------- */
.gio-eroe h1 {
    margin: 0 0 8px;
    font-size: clamp(1.9rem, 4.5vw, 2.4rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    font-weight: 800;
    color: #fff;
    text-shadow:
        0 2px 20px rgba(108, 92, 231, .7),
        0 1px 2px rgba(0, 0, 0, .5);
}

/* ---------- SOTTOTITOLO — leggibile, con respiro ---------- */
.gio-eroe__sott {
    margin: 0 0 6px;
    font-size: 1.02rem;
    line-height: 1.55;
    max-width: 62ch;
    color: rgba(255, 255, 255, .82);
}

/* ---------- LE PASTIGLIE — pill "feature" stile PS5 ---------- */
.gio-eroe__riga {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}
.gio-pastiglia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: .78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .92);
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.gio-pastiglia:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .3);
    transform: translateY(-1px);
}
.gio-pastiglia svg {
    width: 14px; height: 14px;
    color: #a29bfe;
}

/* ---------- I NUMERI — stile dashboard di console ---------- */
.gio-eroe__piede {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 22px;
}
.gio-eroe__numero {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 70px;
    align-items: center;
}
.gio-eroe__numero b {
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: #fff;
    text-shadow: 0 0 20px rgba(162, 155, 254, .8);
}
.gio-eroe__numero span {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    color: rgba(255, 255, 255, .55);
}

/* ---------- LA CTA — bottone PS5 con shine ---------- */
.gio-eroe__cta {
    position: relative;
    margin-left: auto;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #e8e5ff 100%);
    color: #4c3bd6;
    border: 0;
    border-radius: 999px;
    padding: 14px 26px;
    font: inherit;
    font-size: .95rem;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow:
        0 14px 40px -12px rgba(255, 255, 255, .35),
        0 4px 16px -6px rgba(108, 92, 231, .9),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .2s ease, box-shadow .2s ease;
}
.gio-eroe__cta::before {
    content: '';
    position: absolute;
    top: 0; left: -50%;
    width: 40%; height: 100%;
    background: linear-gradient(115deg,
                transparent 0%,
                rgba(255, 255, 255, .9) 50%,
                transparent 100%);
    transform: skewX(-20deg);
    animation: gio-cta-shine 4.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes gio-cta-shine {
    0%, 60%  { left: -50%; }
    100%     { left: 150%; }
}
.gio-eroe__cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 20px 50px -14px rgba(255, 255, 255, .45),
        0 6px 22px -6px rgba(108, 92, 231, 1),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}
.gio-eroe__cta:active {
    transform: translateY(0) scale(.98);
}
.gio-eroe__cta svg {
    width: 18px; height: 18px;
}

/* ============================================================
   TITOLO DI SEZIONE
   ============================================================ */
.gio-titolo-sezione {
    display: flex;
    gap: 10px;
    margin: 30px auto 14px auto;
    justify-content: center;
    background: #03a9f41f;
    padding: 12px 20px;
    border-radius: 20px;
    align-items: center;
    flex-wrap: wrap;
}
.gio-titolo-sezione h2 { margin: 0; font-size: 1.2rem; }
.gio-titolo-sezione span { color: var(--mood-text-muted, #8b8b9e); font-size: .84rem; }

/* ============================================================
   IL CATALOGO — UNA FILA PER CATEGORIA, CHE SCORRE DI LATO
   (titolare, 20/09/2026) «meglio diviso per categorie che fanno scroll orizzontale come un vero
   catalogo come i clip e story orizzontale è molte estetico così». Prima era una griglia sola: tutte
   le schede uguali, l'una sotto l'altra, e per ritrovare i giochi dei più piccoli si scorreva la
   pagina intera.
   Le CATEGORIE sono i CANALI (l'ordine lo dà `Canali::PUBBLICI`, i nomi `/api/canali`): qui non c'è
   nessun elenco scritto a mano, come non c'era nella griglia. Un gioco compare in OGNI categoria a cui
   si dichiara — e si dichiara a più di una — quindi lo stesso riquadro può tornare in due file: è un
   catalogo, non una partizione, ed è la stessa regola dei post dentro i canali.
   La fila ha la forma del binario del feed (`.binario__riga`), che il titolare ha già approvato:
   flex, scorrimento orizzontale, aggancio alle schede (snap), barra sottile.
   ============================================================ */
.gio-catalogo { display: block; padding: 0 2px; }

/* `hidden` DEVE VINCERE SUL FOGLIO (20/09/2026). Il titolare: *«in cerca dice due giochi ad esempio ma
   io li vedo tutti»*. Diagnosi misurata, cercando «mappa»: il contenitore aveva `hidden: true` ma
   `display: block` e **altezza 1530px, cioè visibile**, e in pagina restavano **43 riquadri visibili**
   col conteggio che diceva «1 gioco». Perché: `.gio-catalogo { display: block }` e
   `.gio-titolo-sezione { display: flex }` sono regole d'AUTORE, e battono la regola del BROWSER per
   `[hidden] { display: none }` (l'autore vince sullo user agent). Con `hidden` non basta scrivere
   l'attributo: va anche detto al foglio che vince. Vale per ogni pezzo che si nasconde e si mostra. */
.gio-catalogo[hidden],
.gio-titolo-sezione[hidden] { display: none; }

.gio-fila { margin: 0 0 22px; }
.gio-fila:last-child { margin-bottom: 0; }

.gio-fila__testa {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 2px 2px;
}
.gio-fila__nome {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--mood-text, #fff);
    margin-block-start: 0em;
    margin-block-end: 0em;
}
.gio-fila__quanti { font-size: .78rem; color: var(--mood-text-muted, #8b8b9e); }

/* LE FRECCE STANNO NELLA TESTA, NON SOPRA LE SCHEDE: l'angolo in alto a destra della scheda è del
   badge del record (posizione assoluta, sopra a tutto) e un tasto lì sopra lo coprirebbe. Si vedono
   solo se c'è davvero qualcosa da quella parte (lo decide `game.js`, come nelle storie) e solo dove
   c'è un puntatore: col dito la fila si scorre, e due bottoni sopra le schede sarebbero ingombro. */
.gio-fila__freccia {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--mood-border, rgba(0, 0, 0, .12));
    border-radius: 50%;
    background: var(--mood-bg-card, rgba(255, 255, 255, .95));
    color: var(--mood-primary, #6c5ce7);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform .15s ease, background .18s ease;
}
.gio-fila__freccia + .gio-fila__freccia { margin-left: 6px; }
.gio-fila__freccia[hidden] { display: none; }
.gio-fila__freccia:hover { transform: scale(1.06); }
.gio-fila__freccia svg, .gio-fila__freccia i { width: 16px; height: 16px; }
@media (hover: none) {
    .gio-fila__freccia { display: none; }
}

/* LA FILA CHE SCORRE — la scheda non scende MAI sotto i 210px («sennò è tutto schiacciato»), e la
   fila lascia sempre intravedere quella dopo: è quello che dice che c'è dell'altro, senza che una
   freccia debba prometterlo. */
.gio-fila__scorri {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 16px 20px 16px 20px;
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.gio-fila__scorri::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.gio-fila__scorri::-webkit-scrollbar-thumb {
    background: var(--mood-border, #333);
    border-radius: 999px;
}

.gio-fila__scorri > .gio-scheda {
    flex: 0 0 clamp(210px, 78vw, 260px);
    scroll-snap-align: start;
}
@media (min-width: 620px) {
    .gio-fila__scorri { gap: 16px; }
    .gio-fila__scorri > .gio-scheda { flex: 0 0 220px; }
}
@media (min-width: 960px) {
    .gio-fila__scorri { gap: 18px; }
    .gio-fila__scorri > .gio-scheda {flex: 0 0 236px;}
}

/* Il telefono stretto: le schede in arrivo vanno a una colonna (riga del titolare, conservata).
   Sta PRIMA delle regole base di `.gio-arrivo` che seguono, e va bene così: questa riga porta
   l'`!important` che ha scritto il titolare, quindi vince comunque. */
@media (max-width: 460px) {
    .gio-arrivo {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }    
}
/* ============================================================
   «IN ARRIVO» — i dichiarati e non ancora costruiti
   Regole LORO, che non c'entrano col catalogo a file: restano com'erano.
   ============================================================ */
.gio-arrivo {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 620px) {
    .gio-arrivo {
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        gap: 12px;
    }
}

/* ============================================================
   ACCENTO PER GIOCO — un colore identitario per scheda
   ============================================================ */
.gio-scheda[data-gioco="2048"]     { --gio-a1: #f5b400; --gio-a2: #ff7a18; --gio-ink: #1a1a2e; }
.gio-scheda[data-gioco="snake"]    { --gio-a1: #22c55e; --gio-a2: #16a34a; --gio-ink: #0b2411; }
.gio-scheda[data-gioco="runner"]   { --gio-a1: #ef4444; --gio-a2: #dc2626; --gio-ink: #ffffff; }
.gio-scheda[data-gioco="breakout"] { --gio-a1: #f97316; --gio-a2: #ea580c; --gio-ink: #ffffff; }
.gio-scheda[data-gioco="diritti"]  { --gio-a1: #8b5cf6; --gio-a2: #6c5ce7; --gio-ink: #ffffff; }
.gio-scheda[data-gioco="tap-dot"]  { --gio-a1: #06b6d4; --gio-a2: #0891b2; --gio-ink: #062f38; }
.gio-scheda[data-gioco="colora"]   { --gio-a1: #ec4899; --gio-a2: #db2777; --gio-ink: #ffffff; }

.gio-scheda[data-gioco="forme"]    { --gio-a1: #6366f1; --gio-a2: #4f46e5; --gio-ink: #ffffff; }
.gio-scheda[data-gioco="memory"]   { --gio-a1: #d946ef; --gio-a2: #c026d3; --gio-ink: #ffffff; }
.gio-scheda[data-gioco="conta"]    { --gio-a1: #f59e0b; --gio-a2: #d97706; --gio-ink: #1a1a2e; }
.gio-scheda[data-gioco="parole"]   { --gio-a1: #14b8a6; --gio-a2: #0d9488; --gio-ink: #062f2a; }
.gio-scheda[data-gioco="mappa"]    { --gio-a1: #0ea5e9; --gio-a2: #0284c7; --gio-ink: #062a44; }
.gio-scheda[data-gioco="laboratorio"] { --gio-a1: #84cc16; --gio-a2: #65a30d; --gio-ink: #1a2606; }
.gio-scheda[data-gioco="riciclo"]  { --gio-a1: #15803d; --gio-a2: #166534; --gio-ink: #ffffff; }
.gio-scheda[data-gioco="quiz"]     { --gio-a1: #1e40af; --gio-a2: #1e3a8a; --gio-ink: #ffffff; }
.gio-scheda[data-gioco="labirinto"]    { --gio-a1: #fb7185; --gio-a2: #e11d48; --gio-ink: #ffffff; }

/* ============================================================
   LA SCHEDA — vetro scuro, aura colorata, ingresso a cascata
   ============================================================ */
.gio-scheda {
    --gio-a1: var(--mood-primary, #6c5ce7);
    --gio-a2: var(--mood-primary-light, #a29bfe);
    --gio-ink: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 168px;
    padding: 16px 14px 14px;
    gap: 0;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, .07);
    background: linear-gradient(165deg, #1c1c32 0%, #0c0c18 100%);
    color: #fff;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    animation: gio-in .45s cubic-bezier(.2,.9,.3,1.2) both;
}

/* Ingresso a cascata (PlayStation library feel) */
.gio-scheda:nth-child(1)  { animation-delay: .02s; }
.gio-scheda:nth-child(2)  { animation-delay: .06s; }
.gio-scheda:nth-child(3)  { animation-delay: .10s; }
.gio-scheda:nth-child(4)  { animation-delay: .14s; }
.gio-scheda:nth-child(5)  { animation-delay: .18s; }
.gio-scheda:nth-child(6)  { animation-delay: .22s; }
.gio-scheda:nth-child(7)  { animation-delay: .26s; }
.gio-scheda:nth-child(8)  { animation-delay: .30s; }

@keyframes gio-in {
    from { opacity: 0; transform: translateY(14px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Aura colorata dietro tutto */
.gio-scheda::before {
    content: '';
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at 25% 20%, var(--gio-a1) 0%, transparent 55%);
    opacity: .32;
    z-index: -1;
    pointer-events: none;
    transition: opacity .32s ease;
}

/* Linea di luce sul bordo superiore */
.gio-scheda::after {
    content: '';
    position: absolute;
    top: 0; left: 15%; right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gio-a1), transparent);
    opacity: .55;
    pointer-events: none;
}

/* Hover / focus / tap */
.gio-scheda:hover,
.gio-scheda:focus-visible,
.gio-scheda:active {
    transform: translateY(-4px);
    border-color: var(--gio-a1);
    box-shadow: 0 18px 20px -10px rgba(0, 0, 0, .6), 0 0 23px -10px var(--gio-a1);
    outline: none;
}
.gio-scheda:hover::before,
.gio-scheda:focus-visible::before,
.gio-scheda:active::before { opacity: .55; }

/* Shine sweep al passaggio del mouse (solo desktop) */
@media (hover: hover) {
    .gio-scheda > .gio-scheda__shine {
        position: absolute;
        top: -50%; left: -60%;
        width: 40%; height: 200%;
        background: linear-gradient(115deg,
                    transparent 0%,
                    rgba(255, 255, 255, .18) 50%,
                    transparent 100%);
        transform: rotate(8deg);
        pointer-events: none;
        transition: left .6s ease;
        z-index: 2;
    }
    .gio-scheda:hover > .gio-scheda__shine {
        left: 120%;
    }
}

/* ============================================================
   L'ICONA — bottone console con riflesso glossy
   ============================================================ */
.gio-scheda__icona {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gio-a1) 0%, var(--gio-a2) 100%);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .45),
        inset 0 -2px 6px rgba(0, 0, 0, .25),
        0 6px 16px -5px var(--gio-a1);
    flex-shrink: 0;
    z-index: 1;
}
.gio-scheda__icona::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg,
                rgba(255, 255, 255, .4) 0%,
                rgba(255, 255, 255, .06) 45%,
                transparent 60%);
    pointer-events: none;
}
.gio-scheda__icona svg {
    width: 22px; height: 22px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

/* ============================================================
   LA TESTA — icona e nome SULLA STESSA RIGA
   Il titolare (20/09/2026): «in game index la parola game è brevissima.. quindi non ci centra nulla
   sotto .. storpia solo l'estetica / mentre giù nel binario ci sta bene anche lì.. a fianco ...
   usiamo wrap del testo così non sfora.. e magari il testo più piccolo». E' esatto: con l'icona da
   48px e il nome SOTTO, un nome corto («2048», «Snake») lasciava il riquadro spaccato in due — una
   riga di icona, una parola sola sotto, e nient'altro allineato a quella parola. Adesso la testa è
   UNA riga, la stessa forma dell'occhiello del binario: icona a sinistra, nome accanto.
   Lo spazio c'è per certo: la griglia garantisce il minimo (`minmax(210px, 1fr)`, e sotto i 460px
   una colonna intera), quindi il nome non finisce mai in un budello.
   `padding-right` tiene libero l'angolo dei badge (sono in `position: absolute`, in alto a destra):
   senza, un nome lungo passerebbe SOTTO il trofeo, che sta sopra a tutto (`z-index: 3`).
   `flex-wrap` invece di una scommessa: un nome lungo va a capo dentro la sua colonna, non sborda.
   ============================================================ */
.gio-scheda__testa {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 12px 2px 3px;
    position: relative;
    z-index: 1;
}
/* L'angolo dei badge si tiene libero SOLO quando c'è un badge da mostrare (`:has`, già usato da
   `mood-ui.css` e `admin.css`): un riquadro senza record avrebbe 58px sprecati, e lo spazio deve
   andare al nome, che è la cosa che va a capo. */
.gio-scheda:has(.gio-scheda__badges:not(:empty)) .gio-scheda__testa { padding-right: 58px; }
/* I margini dei due pezzi si azzerano con DUE classi, non con una: dentro il telefono stretto il
   foglio ha una regola più precisa di `.gio-scheda__testa > *` (`.gio-scheda__nome { margin: … }`) e
   con una classe sola quella vincerebbe — il nome resterebbe 10px più in basso dell'icona, cioè
   fuori asse. Stessa lezione della testa dell'eroe. */
.gio-scheda .gio-scheda__testa > * { margin: 0; }

/* ============================================================
   NOME E SOTTOTITOLO
   ============================================================ */
.gio-scheda__nome {
    flex: 1 1 0;              /* base 0: il nome non manda MAI la riga a capo — si stringe, e va a capo
                                 il testo; con `auto` un nome lungo («Ogni forma al suo posto») scendeva
                                 sotto l'icona, cioè tornava la forma che il titolare non vuole */
    min-width: 0;
    font-size: .92rem;        /* più piccolo di prima (era 1rem): sta accanto all'icona, non sotto */
    font-weight: 800;
    letter-spacing: -.015em;
    color: #fff;
    line-height: 1.2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    overflow-wrap: anywhere;  /* un nome senza spazi («Breakout») si spezza invece di sbordare */
    position: relative;
    z-index: 1;
}
.gio-scheda__sott {
    margin: 0 2px;
    font-size: .76rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .58);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* ============================================================
   I PIEDI — pill pubbliche + record + bottone Play
   ============================================================ */
.gio-scheda__piedi {
    margin-top: auto;
    padding-top: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    position: relative;
    z-index: 1;
}

/* Pill "genere" — COLORE PER PUBBLICO, stile Nintendo Switch */
.gio-pubblico {
    font-size: .45rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 6px;
    border: none;
    white-space: nowrap;
    color: #fff;
    background: rgba(255, 255, 255, .14);
}
/* Colori identitari per tipo di pubblico */
.gio-pubblico[data-pubblico="kids"]        { background: linear-gradient(135deg, #ec48997d, #db277780); color: #fff; }
.gio-pubblico[data-pubblico="teens"]       { background: linear-gradient(135deg, #3b82f691, #2563eb91); color: #fff; }
.gio-pubblico[data-pubblico="educational"] {background: linear-gradient(135deg, #10b98196, #0596699e);color: #ffffff;}
.gio-pubblico[data-pubblico="informative"] { background: linear-gradient(135deg, #8b5cf6a1, #7c3aeda1); color: #fff; }
.gio-pubblico[data-pubblico="general"]     { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .85); }

/* LA FASCIA DI ETÀ CONSIGLIATA (20/09/2026) — «indichiamo fascia di età consigliata» (titolare).
   È una pill con il bordo tratteggiato e NON un colore di canale: non è una categoria a cui il
   gioco appartiene, è un consiglio su a chi riesce bene. Il testo arriva dal catalogo
   (`eta_testo`, vedi `core/Game.php`): qui non c'è nessun numero scritto a mano. */
.gio-eta {
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px dashed rgba(255, 255, 255, .35);
    color: rgba(255, 255, 255, .8);
    white-space: nowrap;
}
[data-theme="light"] .gio-eta,
html:not([data-theme="dark"]) .gio-eta {
    border-color: rgba(15, 15, 30, .25);
    color: rgba(22, 22, 42, .7);
}

/* Bottone Play circolare con triangolo PlayStation */
.gio-scheda__gioca {
    margin-left: auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gio-a1);
    color: #fff;
    font-size: 0;                 /* nasconde la parola "Gioca" */
    flex-shrink: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .5),
        inset 0 -3px 8px rgba(0, 0, 0, .25),
        0 5px 14px -4px var(--gio-a1);
    transition: transform .22s ease, box-shadow .22s ease;
}
.gio-scheda__gioca::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #fff;
    margin-left: 4px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
}
.gio-scheda__gioca svg { display: none; }

.gio-scheda:hover .gio-scheda__gioca,
.gio-scheda:active .gio-scheda__gioca {
    transform: scale(1.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -3px 8px rgba(0, 0, 0, .3),
        0 8px 22px -5px var(--gio-a1),
        0 0 20px -4px var(--gio-a1);
}

/* Record testuale (quando il badge non lo mostra già) */
.gio-scheda__record {
    font-size: .7rem;
    color: rgba(255, 255, 255, .65);
    padding-left: 2px;
    font-variant-numeric: tabular-nums;
}
.gio-scheda__record:empty { display: none; }

/* ============================================================
   BADGE in alto a destra — achievement con glow
   ============================================================ */
.gio-scheda__badges {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    z-index: 3;
}
.gio-scheda__badges:empty { display: none; }

/* «IN CORSO» IN ALTO A SINISTRA, SOPRA L'ICONA (20/09/2026). Il titolare: *«è messo lì a casaccio,
   dovrebbe essere in position: absolute ma a sinistra, sopra icona del gioco che c'è spazio»*. Lo
   spazio c'è, ed è misurato: fra il bordo alto della scheda e l'icona ci sono **29px** (16 di padding
   della scheda + 13 di margine della testa) e la pastiglia è alta **22** → sta a 6px dall'alto senza
   coprire l'icona e senza spostare nessuna riga. `left: 16px` la allinea all'icona (padding 14 + i 2 di
   margine della testa). Prima stava nella pila in alto a destra, insieme al record: due cose diverse
   (un numero e uno stato) in un angolo solo non si leggono. */
.gio-scheda__corso {
    position: absolute;
    /* 3px e non 6: con 6 la pastiglia finiva 2px SOPRA l'icona (misurato: pastiglia 1710→1732, icona da
       1730). La fascia libera è di 29px e la pastiglia è alta 22, quindi 3 lascia 4px di aria. */
    top: 0px;
    left: 16px;
    z-index: 3;
}
.gio-scheda__corso:empty { display: none; }

.badge-best,
.badge-prog {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .02em;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.badge-best {
    background: linear-gradient(135deg, #f5b400 0%, #d4a017 100%);
    color: #1a1a2e;
    box-shadow: 0 3px 10px -2px rgba(245, 180, 0, .6);
}
.badge-best .icon { width: 10px; height: 10px; color: #1a1a2e; }
.badge-prog {
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    color: #fff;
    box-shadow: 0 3px 10px -2px rgba(6, 182, 212, .6);
}
.badge-prog .icon { width: 10px; height: 10px; }
.badge-prog::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
    margin-left: 2px;
    animation: badge-pulse 1.8s ease-in-out infinite;
}
@keyframes badge-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .3; transform: scale(.7); }
}

/* ============================================================
   IN ARRIVO — dichiarati, spenti ma coerenti
   ============================================================ */
.gio-arrivo__voce {
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 14px 16px;
    background: linear-gradient(165deg, #14142a 0%, #0c0c18 100%);
    color: rgba(255, 255, 255, .5);
    display: flex;
    align-items: center;
    gap: 12px;
}
.gio-arrivo__voce svg { width: 20px; height: 20px; flex-shrink: 0; }
.gio-arrivo__voce b { display: block; color: rgba(255, 255, 255, .8); font-size: .92rem; font-weight: 600; }
.gio-arrivo__voce span { font-size: .78rem; }

#gioPannello { margin-bottom: 3rem; }
.gio-nota { font-size: .78rem; color: var(--mood-text-muted, #8b8b9e); margin: 10px 0 0; }

/* ============================================================
   LA CLASSIFICA
   ============================================================ */
.gio-alias__tasto {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mood-text-muted, #8b8b9e);
    background: transparent;
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 999px;
    cursor: pointer;
}
.gio-alias__tasto:hover,
.gio-alias__tasto[aria-expanded="true"] {
    color: var(--mood-text, #fff);
    border-color: var(--mood-primary, #6C5CE7);
}
.gio-alias__tasto svg { width: 15px; height: 15px; flex: 0 0 auto; }
.gio-alias__targhetta:empty { display: none; }

.gio-alias {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
}
.gio-alias[hidden] { display: none; }
.gio-alias label { font-size: .84rem; font-weight: 600; }
.gio-alias input {
    flex: 0 1 250px;
    min-width: 0;
    padding: 9px 12px;
    font: inherit;
    font-size: .88rem;
    color: inherit;
    background: var(--mood-bg-card, #1a1a2e);
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 11px;
}
.gio-alias__salva {
    padding: 9px 16px;
    font: inherit;
    font-size: .84rem;
    font-weight: 700;
    color: #fff;
    background: var(--mood-primary, #6c5ce7);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
}
.gio-alias__esito { font-size: .78rem; color: var(--mood-text-muted, #8b8b9e); }

.gio-info {
    margin: 0 0 14px;
    padding: 14px 16px;
    background: var(--mood-bg-card, #15152A);
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 14px;
}
.gio-info[hidden] { display: none; }
.gio-info h3 { margin: 0 0 7px; font-size: .95rem; }
.gio-info p { margin: 0 0 11px; font-size: .84rem; line-height: 1.5; color: var(--mood-text-muted, #8b8b9e); }
.gio-info ul { margin: 0; padding-left: 19px; display: flex; flex-direction: column; gap: 8px; }
.gio-info li { font-size: .83rem; line-height: 1.5; }
/* Le voci di questo elenco NON prendono le strisce di colore del sito (`mood.css` dipinge
   `li:nth-child(odd)` e `(even)` di crema e azzurro): qui l'elenco è una spiegazione, non una
   tabella. Le due regole c'erano nel foglio precedente e il redisegno «stile console» del
   19/09/2026 le aveva perse — se ne è accorto `tools/checks/check_game_chiavi.py`, che le pretende.
   Misurato prima di rimetterle: sfondo `rgba(255,246,230,.47)` e `rgba(176,216,251,.19)` sulle voci
   pari e dispari nel tema chiaro. */
.gio-info li:nth-child(odd),
.gio-info li:nth-child(even) { background: transparent; }
.gio-info b { color: var(--mood-text, #fff); }
.gio-info i { color: var(--mood-text-muted, #8b8b9e); font-style: italic; }

/* IL GIOCO DELLA CLASSIFICA (20/09/2026). Prima erano linguette — una per gioco — in una striscia che
   scorreva di lato: con tredici giochi si leggeva, con trenta diventa una sbarra da aeroporto e il
   gioco che cerchi non lo trovi. Adesso è un elenco a tendina, RAGGRUPPATO PER CANALE (`game.js` lo
   costruisce coi nomi che dà il server): una riga sola, qualunque sia il numero dei giochi. */
.gio-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.gio-scelta__etichetta {
    font-size: .84rem;
    font-weight: 700;
    color: var(--mood-text-muted, #8b8b9e);
}
.gio-scelta {
    flex: 1;
    min-width: 0;
    max-width: 340px;
    padding: 10px 12px;
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    color: var(--mood-text, #fff);
    background: var(--mood-bg-card, #15152A);
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 12px;
    cursor: pointer;
}
.gio-scelta:focus-visible {
    outline: 2px solid var(--mood-primary, #6C5CE7);
    outline-offset: 2px;
}

.gio-righe {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 400px;
    overflow-y: auto;
}
.gio-riga {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    border-bottom: 1px dashed rgb(178 178 178 / 38%);
    background: rgb(185 180 226 / 14%);
}
.gio-riga:hover { background: rgb(178 178 178 / 13%); }
.gio-riga--mia { background: rgba(108, 92, 231, .14); }
.gio-riga__posto { width: 30px; text-align: center; font-weight: 800; color: var(--mood-text-muted, #8b8b9e); font-size: .92rem; }
.gio-riga__faccia { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--mood-bg-hover, #1E1E3A); }
.gio-riga__faccia img, .gio-riga__faccia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gio-riga__nome { flex: 1; min-width: 0; font-weight: 600; }
.gio-riga__nome em { display: block; font-style: normal; font-size: .74rem; color: var(--mood-text-muted, #8b8b9e); font-weight: 400; }
.gio-riga__punti { font-weight: 800; font-variant-numeric: tabular-nums; }

.gio-vuoto {
    border: 1px dashed var(--mood-border, #2A2A4A);
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    color: var(--mood-text-muted, #8b8b9e);
    font-size: .88rem;
}

/* ============================================================
   LA LINGUETTA «GIOCHI» DELL'AREA PERSONALE
   ============================================================ */
.gio-profilo { display: flex; flex-direction: column; gap: 18px; margin: 0px 14px 14px; }
.gio-profilo__gioco { display: flex; flex-direction: column; gap: 4px; }
.gio-profilo__nome { display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 0px 17px; }
.gio-profilo__nome svg { width: 17px; height: 17px; flex: 0 0 auto; }
.gio-profilo__apri { margin-left: auto; font-size: .76rem; font-weight: 600; color: var(--mood-primary, #6C5CE7); text-decoration: none; }
.gio-profilo__apri:hover { text-decoration: underline; }
.gio-profilo__vai {
    margin-left: auto;
    padding: 6px 12px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mood-primary, #6C5CE7);
    text-decoration: none;
    border: 1px solid var(--mood-primary, #6C5CE7);
    border-radius: 999px;
}
.gio-profilo__vai:hover { color: #fff; background: var(--mood-primary, #6C5CE7); }

/* ============================================================
   TEMA CHIARO — stessa anima, su vetro bianco
   ============================================================ */
[data-theme="light"] .gio-eroe,
html:not([data-theme="dark"]) .gio-eroe {
    /* L'eroe resta scuro anche su chiaro: è il "momento firma" della pagina.
       Ammorbidisco solo l'ombra e la griglia di sfondo. */
    box-shadow:
        0 24px 60px -28px rgba(30, 30, 80, .55),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}
[data-theme="light"] .gio-eroe::before,
html:not([data-theme="dark"]) .gio-eroe::before {
    opacity: .55;
}

[data-theme="light"] .gio-scheda,
html:not([data-theme="dark"]) .gio-scheda {
    border: 1px solid rgba(15, 15, 30, .08);
    background: linear-gradient(165deg, #ffffff 0%, #f4f4fc 100%);
    color: var(--mood-text, #1a1a2e);
    box-shadow: 0 1px 3px rgba(15, 15, 30, .06), 0 10px 22px -16px rgba(15, 15, 30, .25);
}
[data-theme="light"] .gio-scheda::before,
html:not([data-theme="dark"]) .gio-scheda::before { opacity: .14; }
[data-theme="light"] .gio-scheda::after,
html:not([data-theme="dark"]) .gio-scheda::after { opacity: .8; }

[data-theme="light"] .gio-scheda:hover,
[data-theme="light"] .gio-scheda:focus-visible,
[data-theme="light"] .gio-scheda:active,
html:not([data-theme="dark"]) .gio-scheda:hover,
html:not([data-theme="dark"]) .gio-scheda:focus-visible,
html:not([data-theme="dark"]) .gio-scheda:active {
    box-shadow: 0 15px 10px -14px rgba(15, 15, 30, .28), 0 0 26px -12px var(--gio-a1);
}
[data-theme="light"] .gio-scheda__nome,
html:not([data-theme="dark"]) .gio-scheda__nome { color: #16162a; text-shadow: none; }
[data-theme="light"] .gio-scheda__sott,
html:not([data-theme="dark"]) .gio-scheda__sott { color: rgba(22, 22, 42, .55); }
[data-theme="light"] .gio-scheda__record,
html:not([data-theme="dark"]) .gio-scheda__record { color: rgba(22, 22, 42, .5); }

/* Pill "general" su chiaro: contrasto invertito */
[data-theme="light"] .gio-pubblico[data-pubblico="general"],
html:not([data-theme="dark"]) .gio-pubblico[data-pubblico="general"] {
    background: rgba(15, 15, 30, .1);
    color: rgba(22, 22, 42, .75);
}

[data-theme="light"] .gio-arrivo__voce,
html:not([data-theme="dark"]) .gio-arrivo__voce {
    border: 1px dashed rgba(15, 15, 30, .12);
    background: linear-gradient(165deg, #ffffff 0%, #f4f4fc 100%);
    color: rgba(22, 22, 42, .5);
}
[data-theme="light"] .gio-arrivo__voce b,
html:not([data-theme="dark"]) .gio-arrivo__voce b { color: #16162a; }

/* ============================================================
   TELEFONO STRETTO (<560px) — eroe compatto, scheda compatta
   ============================================================ */
@media (max-width: 560px) {
    .gio-eroe {
        padding: 26px 20px 22px;
        border-radius: 22px;
        margin-bottom: 22px;
    }
    .gio-eroe__icona {
        width: 54px; height: 54px;
        border-radius: 16px;
        margin-bottom: 14px;
    }
    .gio-eroe__icona svg { width: 26px; height: 26px; }
    .gio-eroe h1 { font-size: 1.7rem; margin-bottom: 6px; }
    .gio-eroe__sott { font-size: .94rem; }
    .gio-pastiglia { font-size: .72rem; padding: 5px 11px; }
    .gio-eroe__piede {
        margin-top: 20px;
        padding-top: 18px;
        gap: 14px;
    }
    .gio-eroe__numero { min-width: 60px; }
    .gio-eroe__numero b { font-size: 1.35rem; }
    .gio-eroe__numero span { font-size: .66rem; letter-spacing: .1em; }
    .gio-eroe__cta {
        margin-left: 0;
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
        font-size: .9rem;
    }
}

@media (max-width: 479px) {
    .gio-scheda {
        min-height: 156px;
        padding: 14px 12px 12px;
        border-radius: 16px;
    }
    .gio-scheda__icona {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }
    .gio-scheda__icona svg { width: 20px; height: 20px; }
    .gio-scheda__testa { margin: 10px 1px 2px; gap: 9px; }
    .gio-scheda:has(.gio-scheda__badges:not(:empty)) .gio-scheda__testa { padding-right: 50px; }
    .gio-scheda__nome { font-size: .88rem; }
    .gio-scheda__sott { font-size: .7rem; }
    .gio-scheda__piedi { padding-top: 10px; gap: 4px; }
    .gio-scheda__gioca {
        width: 36px;
        height: 36px;
    }
    .gio-scheda__gioca::before {
        border-width: 6px 0 6px 10px;
        margin-left: 3px;
    }
    .gio-pubblico {
        font-size: .5rem;
        padding: 2px 6px;
        border-radius: 5px;
    }
    .gio-eta {
        font-size: .5rem;
        padding: 2px 6px;
        border-radius: 5px;
    }
    .gio-scheda__badges { top: 10px; right: 10px; gap: 3px; }
    .badge-best,
    .badge-prog { font-size: .58rem; padding: 2px 7px; }
    .badge-best .icon,
    .badge-prog .icon { width: 9px; height: 9px; }
}

/* ============================================================
   RIDUCI ANIMAZIONI (accessibilità)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .gio-eroe::after,
    .gio-eroe__icona::after,
    .gio-eroe__cta::before {
        animation: none;
    }
    .gio-pastiglia,
    .gio-eroe__cta,
    .gio-scheda,
    .gio-scheda::before,
    .gio-scheda::after,
    .gio-scheda__gioca { transition: none; }
    .gio-scheda {
        animation: none;
    }
    .gio-scheda:hover,
    .gio-scheda:focus-visible,
    .gio-scheda:active { transform: none; }
    .gio-eroe__cta:hover { transform: none; }
    .badge-prog::after { animation: none; }
}

/* ============================================================
   IL CATALOGO CHE CRESCE (20/09/2026): la ricerca, le novità, «vedi tutto»
   ============================================================
   «dobbiamo mettere un filtro in index game per cercare i giochi in previsione di molti giochi ...
   in index ci vedo le novità ... hai presente quando apri APP Store di Apple che hai i nuovi arrivi ...
   e sotto le categorie ... che cliccando su apre in slide quel gruppo di giochi ... qualcosa che non
   stanca le persone nel sfogliare e il search» (titolare).

   Tre cose, e ognuna ha la sua forma:
     • IL CAMPO DI RICERCA — una pillola in cima al catalogo, larga quanto la colonna: scrivendo, le
       file spariscono e restano i risultati (`game-catalogo.js`); mentre si scrive non si chiede niente
       al server, il catalogo è già caricato.
     • LE NOVITÀ — non sono una sesta categoria: sono una FETTA PER DATA, e si riconoscono dal colore
       del titolo e dalla pastiglia «Nuovo» sulla scheda. La fila ha la stessa misura delle altre (così
       la pagina resta una pagina), ma non ha i tasti «vedi tutto»: ci sta già tutto quello che c'è.
     • «VEDI TUTTO» — la fila fa assaggiare, la slide fa sfogliare fino in fondo: è questo che tiene il
       catalogo leggero quando i giochi diventano trenta. Sul telefono il foglio sale dal basso, sul
       desktop entra da destra; `Esc` e il tasto tondo lo chiudono, e mentre è aperto la pagina sotto
       non scorre.

   Tutto qui e niente dentro le pagine: lo stile in linea è vietato (REGOLE_DORO §3), e le variabili
   sono quelle del sito, così il tema chiaro e quello scuro vengono da soli. */

/* ---------- IL CAMPO DI RICERCA ---------- */
.gio-ricerca {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 2px 20px;
    padding: 2px 14px;
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 999px;
    background: var(--mood-bg-card, #15152A);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.gio-ricerca:focus-within {
    border-color: var(--mood-primary, #6C5CE7);
    box-shadow: 0 0 0 3px rgba(108, 92, 231, .18);
}
.gio-ricerca__lente {
    display: inline-flex;
    color: var(--mood-text-muted, #8b8b9e);
}
.gio-ricerca__lente svg,
.gio-ricerca__lente i { width: 18px; height: 18px; }
.gio-ricerca__campo {
    flex: 1;
    min-width: 0;
    padding: 13px 0;
    border: 0;
    background: none;
    color: var(--mood-text, #fff);
    font: inherit;
    font-size: 1rem;
}
.gio-ricerca__campo:focus { outline: none; }
.gio-ricerca__campo::placeholder { color: var(--mood-text-muted, #8b8b9e); }
/* Il conteggio dei risultati parla con `role="status"`: chi usa un lettore di schermo sente quanti
   giochi sono rimasti, senza che niente si muova sotto le dita. */
.gio-ricerca__quanti {
    font-size: .8rem;
    font-weight: 700;
    color: var(--mood-text-muted, #8b8b9e);
    white-space: nowrap;
}
.gio-ricerca__pulisci {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--mood-text-muted, #8b8b9e);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.gio-ricerca__pulisci:hover { background: var(--mood-bg-hover, rgba(108, 92, 231, .12)); }
.gio-ricerca__pulisci svg,
.gio-ricerca__pulisci i { width: 16px; height: 16px; }
/* Niente da pulire, niente tasto: il campo vuoto non mostra la crocetta. */
.gio-ricerca:has(.gio-ricerca__campo:placeholder-shown) .gio-ricerca__pulisci { visibility: hidden; }

/* ---------- LE NOVITÀ ---------- */
.gio-fila--novita .gio-fila__nome { color: var(--mood-primary, #6C5CE7); }
.badge-nuovo {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 999px;
    background: linear-gradient(135deg, #6C5CE7 0%, #A371F7 100%);
    color: #fff;
    box-shadow: 0 3px 10px -2px rgba(108, 92, 231, .6);
    white-space: nowrap;
}

/* ---------- «VEDI TUTTO» NELLA TESTA DELLA FILA ---------- */
.gio-fila__vedi {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--mood-primary, #6C5CE7);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.gio-fila__vedi:hover { background: var(--mood-bg-hover, rgba(108, 92, 231, .12)); }
.gio-fila__vedi svg,
.gio-fila__vedi i { width: 14px; height: 14px; }
/* Le frecce della fila stanno dopo «vedi tutto»: senza questa riga le due `margin-left: auto`
   si dividerebbero lo spazio libero e il tasto resterebbe in mezzo alla testa. */
.gio-fila__vedi ~ .gio-fila__freccia { margin-left: 6px; }
.gio-fila__nome--tasto { cursor: pointer; }
.gio-fila__nome--tasto:hover { text-decoration: underline; text-underline-offset: 3px; }
.gio-fila__nome--tasto:focus-visible {
    outline: 2px solid var(--mood-primary, #6C5CE7);
    outline-offset: 3px;
    border-radius: 6px;
}

/* ---------- I RISULTATI DELLA RICERCA, E LA SLIDE DEL GRUPPO ----------
   La griglia è la stessa nei risultati e nella slide: le schede sono quelle del catalogo (misura
   minima 210px, come chiesto: «sennò è tutto schiacciato»), quindi si riconoscono subito. */
.gio-catalogo__risultati,
.gio-catalogo__griglia {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
    padding: 2px;
}
@media (max-width: 520px) {
    /* UNA SCHEDA PER RIGA, SUL TELEFONO (20/09/2026). Con due colonne la scheda scendeva a 170px e
       dentro ci stanno nome, sottotitolo, pastiglie, età, «Gioca» e i badge: «su mobile le griglie con
       tutti quei dati su ogni gioco lo rende schiacciato» (titolare — misurato: 170px su un telefono da
       390). Una per riga sono ~354px: la scheda respira, e resta la stessa scheda del catalogo. */
    .gio-catalogo__risultati,
    .gio-catalogo__griglia { grid-template-columns: 1fr; gap: 12px; }
}

/* QUELLI IN PREPARAZIONE NEI RISULTATI: sono un gruppo a parte e si vede che sono un'altra cosa —
   tratteggiati, senza riquadri: un gioco che non c'è non deve sembrare giocabile. */
.gio-risultati__arrivo {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px dashed var(--mood-border, rgba(255, 255, 255, .12));
    border-radius: 16px;
}
.gio-risultati__arrivo b {
    display: block;
    margin-bottom: 6px;
    font-size: .84rem;
    color: var(--mood-text, #fff);
}
.gio-risultati__arrivo ul {
    margin: 0;
    padding-left: 18px;
    font-size: .84rem;
    color: var(--mood-text-muted, #8b8b9e);
}

/* Mentre la slide è aperta la pagina sotto non scorre: senza, col dito si scorre due cose insieme.
   E la barra in basso di Mood si nasconde, come fa già il visore dei clip (`body.is-clip-open` in
   `mood-app.css`): è la stessa situazione — un pannello a tutto schermo — e con la barra visibile
   l'ultima riga di riquadri restava sotto di lei (misurato: ultima scheda a 824px, barra da 786 in
   giù, 38px coperti). Il pannello non deve litigare con la barra: la barra sparisce e torna alla
   chiusura, perché la classe `gio-slide-aperto` la toglie `chiudi()`. */
body.gio-slide-aperto { overflow: hidden; }
body.gio-slide-aperto .mood-app-bottombar { display: none; }

.gio-slide {
    position: fixed;
    inset: 0;
    /* SOPRA LA BARRA IN BASSO DI MOOD (z-index 1000), sotto i modali del sito (9999): è il valore che
       usa già il sito per la stessa situazione — «sopra la bottom-bar mobile (1000) ma sotto i modali
       (9999)», vedi `mood.css`. Con il 60 di prima il pannello stava *sotto* la barra. */
    z-index: 1110;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.gio-slide__velo {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 22, .62);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.gio-slide__foglio {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 92vh;
    /* Sul telefono `vh` è l'altezza MASSIMA (quella con la barra del browser nascosta): un pannello
       alto 92vh sborda sotto quando la barra c'è. `dvh` segue l'altezza che si vede davvero. Nella
       prova le due misure coincidono (844 = 844) — quindi questa è una riga di sicurezza per il
       telefono vero, non la correzione del difetto: il difetto erano la barra di Mood sopra la slide
       e la griglia a due colonne. */
    max-height: 92dvh;
    background: var(--mood-bg-card, #15152A);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    box-shadow: 0 -18px 50px rgba(0, 0, 0, .45);
    animation: gio-slide-su .22s ease-out;
}
/* Sul telefono il foglio SALE dal basso (è il gesto dell'App Store); sul desktop ENTRA da destra:
   la stessa cosa, nella direzione che su quello schermo si aspetta. */
@media (min-width: 720px) {
    .gio-slide__foglio {
        margin-left: auto;
        width: min(520px, 92vw);
        max-height: 100%;
        height: 100%;
        border-radius: 22px 0 0 22px;
        animation: gio-slide-destra .22s ease-out;
    }
}
.gio-slide__testa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px 10px;
    border-bottom: 1px solid var(--mood-border, rgba(255, 255, 255, .08));
}
.gio-slide__nome {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--mood-text, #fff);
}
.gio-slide__quanti {
    font-size: .8rem;
    color: var(--mood-text-muted, #8b8b9e);
}
.gio-slide__chiudi {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--mood-border, #2A2A4A);
    border-radius: 50%;
    background: none;
    color: var(--mood-text, #fff);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.gio-slide__chiudi:hover { background: var(--mood-bg-hover, rgba(108, 92, 231, .12)); }
.gio-slide__chiudi svg,
.gio-slide__chiudi i { width: 18px; height: 18px; }
.gio-slide__corpo {
    overflow-y: auto;
    /* LO SPAZIO IN FONDO È NECESSARIO, non un vezzo (titolare, 20/09/2026: «una parte in basso rimane
       non visibile finisce sotto», con 4rem indicati come misura). Su un telefono l'ultima riga di
       riquadri si fermava dove finisce lo scorrimento — cioè sotto la barra del browser, sotto la
       barra di Mood e sotto la tacca dell'iPhone. 4rem danno il margine per portare in vista l'ultima
       scheda, più l'area sicura del telefono.

       `padding-bottom` e NON `margin-bottom`: in un contenitore che scorre la margin non aggiunge
       spazio allo scorrimento, il padding sì — è la differenza fra «spostare il riquadro» e «poterlo
       scorrere fuori dalla zona coperta». */
    padding: 16px 18px calc(4rem + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
}
@keyframes gio-slide-su {
    from { transform: translateY(16px); opacity: .65; }
    to   { transform: none; opacity: 1; }
}
@keyframes gio-slide-destra {
    from { transform: translateX(18px); opacity: .65; }
    to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .gio-slide__foglio { animation: none; }
}