/* ============================================================================
   BINARIO — i giochi e le clip che compaiono mentre si scorre il feed.

   Foglio SUO, come `search.css` per la ricerca e `game.css` per l'area giochi: le regole del
   binario non entrano in `mood-ui.css`, che è il sistema condiviso di tutto il sito.
   Colori dai token di Mood (`--mood-*`): il tema chiaro e quello scuro funzionano da soli,
   senza una seconda copia di questo foglio.

   Richiesta del titolare (19/09/2026): le clip a scorrimento verticale, i giochi come i riquadri
   dell'hub, e un promemoria che compare scorrendo. Da qui: due binari orizzontali che si
   agganciano (snap), riquadri quadrati per i giochi, riquadri verticali 9:16 per le clip.

   STILE "CONSOLE" (19/09/2026) — anche qui i giochi si sentono come la libreria di una PS5:
   un colore per gioco, l'icona è un bottone, l'aura colorata, l'hover accende la scheda.
   ========================================================================== */

.binario {
    margin: 14px 0;
    padding: 16px 16px 12px;
    background: var(--mood-bg-card);
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius);
    box-shadow: var(--mood-shadow);
}

/* ---------- la testa: dove sei, e perché ti riguarda ---------- */
.binario__testa { margin-bottom: 12px; }

.binario__occhiello {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mood-accent);
}
.binario__occhiello svg, .binario__occhiello i { width: 14px; height: 14px; }

.binario__titolo {
    margin: 6px 0 4px;
    font-size: 1.12rem;
    line-height: 1.25;
    color: var(--mood-text);
}

.binario__frase {
    margin: 0;
    font-size: .9rem;
    line-height: 1.45;
    color: var(--mood-text-muted);
}

/* ---------- i due binari ---------- */
.binario__riga {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.binario__riga::-webkit-scrollbar { height: 6px; }
.binario__riga::-webkit-scrollbar-thumb {
    background: var(--mood-border);
    border-radius: 999px;
}
.binario__riga--clip { margin-top: 4px; }

/* ---------- LE FRECCE DELLE FILE (chi non ha la rotellina orizzontale) ----------
   Segnalazione del titolare (29/09/2026): «mancano le frecce destra e sinistra chi non hai il mouse
   con la rotellina che va in orizzontale è tagliato fuori». La fila si trascina col dito, si scorre
   con la rotellina orizzontale, e il fuoco della tastiera porta i riquadri in vista — ma con un mouse
   normale, che ha solo la rotellina verticale, non c'era modo di andare avanti. Sono le stesse frecce
   delle storie (`stories.css`) e della pagina dei giochi (`game.css`), con la stessa regola: ognuna si
   vede solo se da quella parte c'è davvero ancora qualcosa (lo decide `binario.js`).

   NOTA DICHIARATA: sui dispositivi col solo dito le frecce sono spente (`@media (hover: none)`), come
   nella pagina dei giochi — lì la fila si scorre col dito, e due bottoni sopra i riquadri sarebbero
   ingombro. Chi ha un puntatore le vede; chi non ce l'ha scorre. */
.binario__fila { position: relative; }

.binario__freccia {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--mood-border);
    border-radius: 50%;
    background: var(--mood-bg-card, rgb(255 255 255 / 95%));
    color: var(--mood-primary);
    box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform .15s ease, background .18s ease;
}
.binario__freccia[hidden] { display: none; }
.binario__freccia--prima { left: 4px; }
.binario__freccia--dopo { right: 4px; }
.binario__freccia:hover,
.binario__freccia:focus-visible { transform: translateY(-50%) scale(1.08); }
.binario__freccia svg,
.binario__freccia i { width: 20px; height: 20px; pointer-events: none; }

@media (hover: none) {
    .binario__freccia { display: none; }
}

/* ============================================================
   ACCENTO PER GIOCO — stesso linguaggio del game.css
   ============================================================ */
.binario__gioco[data-gioco="2048"]     { --gio-a1: #f5b400; --gio-a2: #ff7a18; --gio-ink: #1a1a2e; }
.binario__gioco[data-gioco="snake"]    { --gio-a1: #22c55e; --gio-a2: #16a34a; --gio-ink: #0b2411; }
.binario__gioco[data-gioco="runner"]   { --gio-a1: #ef4444; --gio-a2: #dc2626; --gio-ink: #ffffff; }
.binario__gioco[data-gioco="breakout"] { --gio-a1: #f97316; --gio-a2: #ea580c; --gio-ink: #ffffff; }
.binario__gioco[data-gioco="diritti"]  { --gio-a1: #8b5cf6; --gio-a2: #6c5ce7; --gio-ink: #ffffff; }
.binario__gioco[data-gioco="tap-dot"]  { --gio-a1: #06b6d4; --gio-a2: #0891b2; --gio-ink: #062f38; }
.binario__gioco[data-gioco="colora"]   { --gio-a1: #ec4899; --gio-a2: #db2777; --gio-ink: #ffffff; }
.binario__gioco[data-gioco="forme"]    { --gio-a1: #6366f1; --gio-a2: #4f46e5; --gio-ink: #ffffff; }
.binario__gioco[data-gioco="memory"]   { --gio-a1: #d946ef; --gio-a2: #c026d3; --gio-ink: #ffffff; }
.binario__gioco[data-gioco="conta"]    { --gio-a1: #f59e0b; --gio-a2: #d97706; --gio-ink: #1a1a2e; }
.binario__gioco[data-gioco="parole"]   { --gio-a1: #14b8a6; --gio-a2: #0d9488; --gio-ink: #062f2a; }
.binario__gioco[data-gioco="mappa"]    { --gio-a1: #0ea5e9; --gio-a2: #0284c7; --gio-ink: #062a44; }
.binario__gioco[data-gioco="laboratorio"] { --gio-a1: #84cc16; --gio-a2: #65a30d; --gio-ink: #1a2606; }
.binario__gioco[data-gioco="riciclo"]  { --gio-a1: #15803d; --gio-a2: #166534; --gio-ink: #ffffff; }
.binario__gioco[data-gioco="quiz"]     { --gio-a1: #1e40af; --gio-a2: #1e3a8a; --gio-ink: #ffffff; }
.binario__gioco[data-gioco="labirinto"]    { --gio-a1: #fb7185; --gio-a2: #e11d48; --gio-ink: #ffffff; }

/* ============================================================
   UN GIOCO — il riquadro dell'hub, in piccolo, stile console
   ============================================================ */
.binario__gioco {
    --gio-a1: var(--mood-primary, #6c5ce7);
    --gio-a2: var(--mood-primary-light, #a29bfe);
    --gio-ink: #ffffff;
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 138px;
    min-height: 138px;
    display: flex;
    flex-direction: column;      /* icona in alto, nome sotto, nota in fondo */
    gap: 6px;
    padding: 12px;
    background: var(--mood-bg-hover);
    border: 1px solid var(--mood-border);
    border-radius: var(--mood-radius-sm);
    text-decoration: none;
    color: var(--mood-text);
    overflow: hidden;
    isolation: isolate;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    margin: 17px 0px;
    align-items: stretch;
}

/* ICONA E NOME STANNO CONTENUTI IN ALTO, SEMPRE NELLA STESSA FORMA (titolare, 19/09/2026).
   Prima qui c'erano `flex-wrap: wrap` + `align-content: space-between`: con un nome corto
   («Snake», «2048») il nome finiva DI FIANCO all'icona, con uno lungo («Endless Runner»,
   «Colora il disegno») andava a capo e finiva SOTTO. Cinque riquadri con una forma, due con
   un'altra, nella stessa riga. Adesso l'ordine è uno solo — icona, nome, nota — e la nota la
   spinge in fondo `margin-top: auto`: qualunque nome ci sia dentro, i riquadri si leggono uguali. */

/* Aura colorata dietro: leggera, perché il riquadro è piccolo */
.binario__gioco::before {
    content: '';
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 25% 20%, var(--gio-a1) 0%, transparent 55%);
    opacity: .14;
    z-index: -1;
    pointer-events: none;
    transition: opacity .28s ease;
}

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

.binario__gioco:hover,
.binario__gioco:focus-visible {
    transform: translateY(-3px);
    border-color: var(--gio-a1);
    box-shadow:
        0 14px 30px -10px rgba(0, 0, 0, .35),
        0 0 26px -10px var(--gio-a1);
    outline: none;
}
.binario__gioco:hover::before,
.binario__gioco:focus-visible::before { opacity: .32; }

/* Il riquadro di cui PARLA la frase: si vede che è quello lì.
   Ora il bordo è del colore del gioco, con un'aura più intensa. */
.binario__gioco--invito {
    border-color: var(--gio-a1);
    box-shadow:
        0 0 0 1px var(--gio-a1) inset,
        0 6px 20px -8px var(--gio-a1);
}
.binario__gioco--invito::before { opacity: .28; }

/* ============================================================
   L'ICONA — bottone console con riflesso glossy
   ============================================================ */
.binario__gioco-icona {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 11px;
    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 5px rgba(0, 0, 0, .25),
        0 5px 12px -4px var(--gio-a1);
    z-index: 1;
    flex-shrink: 0;
}
.binario__gioco-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;
}
.binario__gioco-icona svg,
.binario__gioco-icona i {
    width: 15px;
    height: 15px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
.icon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- nome e nota ---------- */
.binario__gioco-nome {
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    position: relative;
    z-index: 1;
}
.binario__gioco-nota {
    margin-top: auto;
    font-size: .74rem;
    line-height: 1.3;
    color: var(--mood-text-muted);
    position: relative;
    z-index: 1;
}

/* ============================================================
   UNA CLIP — verticale 9:16, testo dentro (invariato)
   ============================================================ */
.binario__clip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 116px;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    color: var(--mood-text);
    font: inherit;
}
.binario__clip-tela {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: var(--mood-radius-sm);
    background: rgb(0 0 0 / 35%);
    border: 1px solid var(--mood-border);
    transition: border-color .18s ease, transform .18s ease;
}
.binario__clip-tela img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.binario__clip-vuoto {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, var(--mood-primary) 0%, var(--mood-bg-card) 100%);
    opacity: .35;
}
.binario__clip-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 2px 8px rgb(0 0 0 / 55%);
}
.binario__clip-play svg, .binario__clip-play i { width: 26px; height: 26px; }
.binario__clip:hover .binario__clip-tela,
.binario__clip:focus-visible .binario__clip-tela {
    border-color: var(--mood-primary-light);
    transform: translateY(-2px);
}

.binario__clip-scritta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 20px 6px 7px;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 42%) 38%, rgb(0 0 0 / 88%) 100%);
    color: #fff;
}
.binario__clip-autore {
    display: block;
    font-size: .76rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 6px rgb(0 0 0 / 60%);
}
.binario__clip-testo {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .72rem;
    line-height: 1.25;
    color: rgb(255 255 255 / 94%);
    text-shadow: 0 1px 6px rgb(0 0 0 / 60%);
}

/* ---------- il piede: dove si va se uno vuole tutto ---------- */
.binario__piede {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding-top: 6px;
    border-top: 1px solid var(--mood-border);
    font-size: .82rem;
    font-weight: 600;
}
.binario__tutti, .binario__clip-tutti {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mood-primary);
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.binario__tutti:hover, .binario__clip-tutti:hover { text-decoration: underline; }
.binario__tutti svg, .binario__tutti i,
.binario__clip-tutti svg, .binario__clip-tutti i { width: 14px; height: 14px; }

/* ============================================================
   TEMA CHIARO — il riquadro prende il colore del gioco ma su vetro bianco
   ============================================================ */
[data-theme="light"] .binario__gioco,
html:not([data-theme="dark"]) .binario__gioco {
    background: linear-gradient(165deg, #ffffff 0%, #f6f6fc 100%);
    border-color: rgba(15, 15, 30, .1);
    color: var(--mood-text, #1a1a2e);
}
[data-theme="light"] .binario__gioco::before,
html:not([data-theme="dark"]) .binario__gioco::before { opacity: .10; }
[data-theme="light"] .binario__gioco:hover,
[data-theme="light"] .binario__gioco:focus-visible,
html:not([data-theme="dark"]) .binario__gioco:hover,
html:not([data-theme="dark"]) .binario__gioco:focus-visible {
    box-shadow:
        0 14px 30px -10px rgba(15, 15, 30, .18),
        0 0 26px -10px var(--gio-a1);
}
[data-theme="light"] .binario__gioco-nome,
html:not([data-theme="dark"]) .binario__gioco-nome { color: #16162a; }
[data-theme="light"] .binario__gioco-nota,
html:not([data-theme="dark"]) .binario__gioco-nota { color: rgba(22, 22, 42, .55); }

/* ============================================================
   SCHERMO GRANDE — i riquadri restano della loro misura
   ============================================================ */
@media (min-width: 720px) {
    .binario__riga { padding-bottom: 6px; }
    .binario__gioco { width: 150px; min-height: 148px; }
    .binario__clip { width: 124px; }
}

/* ============================================================
   RIDUZIONE MOVIMENTO — niente sollevamenti né pulsazioni
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .binario__gioco,
    .binario__freccia,
    .binario__clip-tela { transition: none; }
    .binario__gioco:hover,
    .binario__gioco:focus-visible,
    .binario__clip:hover .binario__clip-tela,
    .binario__clip:focus-visible .binario__clip-tela { transform: none; }
}