/* ===================================================================
   GiochiOnline.eu — tema arcade
   Palette scura, accenti al neon, componenti riutilizzabili.

   DALLA V41 I COLORI SONO QUELLI DEL BRAND SYSTEM, non più scelti a
   occhio. I nomi qui sotto corrispondono uno a uno alla tavolozza del
   documento di marca: cambiando un valore qui cambia tutto il sito, ed è
   il motivo per cui non vanno riscritti a mano dentro le regole.
   =================================================================== */

:root {
    /* --- Tavolozza del brand --- */
    --gio-primario: #00D1FF;     /* Cyan Elettrico  */
    --gio-secondario: #0057FF;   /* Blu Gaming      */
    --gio-accento-verde: #39FF14;/* Verde Neon      */
    --gio-highlight: #A8FF3D;    /* Lime Chiaro     */

    --gio-bg: #0B1426;           /* Navy Profondo   */
    --gio-surface: #16233d;
    --gio-surface-2: #2A3B5C;    /* Superficie card */
    --gio-border: rgba(139, 163, 199, .22);
    --gio-text: #F1F8FF;         /* Bianco Soft     */
    --gio-muted: #8BA3C7;        /* Grigio Blu      */

    /* --- Nomi già usati nel resto del foglio, ora agganciati al brand --- */
    --gio-primary: var(--gio-secondario);
    --gio-accent: var(--gio-primario);
    --gio-warm: #fb923c;
    --gio-good: var(--gio-accento-verde);
}

html, body { background: var(--gio-bg); }

body {
    /* Poppins è il carattere del brand. È servito dal sito, non da un
       servizio esterno: un carattere caricato da un dominio altrui è una
       richiesta in più su ogni pagina e un dato in più su chi visita.
       Se il file non c'è si scende ai caratteri di sistema, che è il
       motivo per cui l'elenco continua. */
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--gio-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body.bg-arcade { background: var(--gio-bg); }
main { flex: 1 0 auto; }

a { color: var(--gio-accent); }
a:hover { color: var(--gio-highlight); }

.fw-black { font-weight: 900; }
.text-muted-2 { color: var(--gio-muted) !important; }

.section-kicker {
    display: inline-block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    color: var(--gio-accent);
    text-transform: uppercase;
    margin-bottom: .35rem;
}

/* ---------------- Navigazione ---------------- */

.gio-nav {
    background: rgba(7, 11, 22, .92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gio-border);
}
.gio-nav .navbar-brand { color: #fff; letter-spacing: -.02em; }
.gio-nav .navbar-brand i { color: var(--gio-accent); }
.gio-nav .nav-link { color: var(--gio-muted); font-weight: 600; }
.gio-nav .nav-link:hover, .gio-nav .nav-link.active { color: #fff; }

/* ---------------- Superfici ---------------- */

.panel-dark {
    background: var(--gio-surface);
    border: 1px solid var(--gio-border);
    border-radius: 18px;
    color: var(--gio-text);
}
.panel-dark .card-body { color: var(--gio-text); }

.table-dark-soft {
    --bs-table-bg: transparent;
    --bs-table-color: var(--gio-text);
    --bs-table-border-color: var(--gio-border);
    --bs-table-hover-bg: rgba(99, 102, 241, .12);
    --bs-table-hover-color: #fff;
    margin-bottom: 0;
}
.table-dark-soft thead th {
    color: var(--gio-muted);
    font-size: .78rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-bottom-color: var(--gio-border);
}

/* ---------------- Hero ---------------- */

.hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1000px 480px at 12% -10%, rgba(99, 102, 241, .30), transparent 60%),
        radial-gradient(760px 420px at 88% 0%, rgba(34, 211, 238, .18), transparent 60%),
        var(--gio-bg);
    border-bottom: 1px solid var(--gio-border);
}
.hero-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148, 163, 184, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, .07) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(to bottom, #000, transparent 78%);
    pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }

.badge-neon {
    background: rgba(34, 211, 238, .12);
    color: var(--gio-accent);
    border: 1px solid rgba(34, 211, 238, .35);
    font-weight: 700;
    letter-spacing: .12em;
    padding: .5rem .85rem;
    border-radius: 999px;
    font-size: .7rem;
}

/* Cabinato decorativo */
.cabinet {
    background: linear-gradient(160deg, #16213c, #0b1120);
    border: 1px solid var(--gio-border);
    border-radius: 26px;
    padding: 22px;
    box-shadow: 0 30px 70px rgba(2, 6, 23, .6);
}
.cabinet-screen {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 30%, #10233f, #05080f 70%);
    border: 8px solid #0b1120;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--gio-accent);
    overflow: hidden;
}
.cabinet-title { font-size: clamp(1.4rem, 3.4vw, 2.2rem); font-weight: 900; letter-spacing: .1em; }
.cabinet-sub { color: var(--gio-muted); font-size: .82rem; letter-spacing: .22em; margin-top: .4rem; }
.cabinet-icons { display: flex; gap: 22px; font-size: 1.7rem; margin-top: 22px; color: #a5b4fc; }
.cabinet-controls { display: flex; gap: 14px; justify-content: center; margin-top: 18px; }
.cabinet-controls span {
    width: 34px; height: 34px; border-radius: 50%;
    background: #1e293b; border: 2px solid rgba(148, 163, 184, .3);
}
.cabinet-controls span:nth-child(1) { background: #ef4444; }
.cabinet-controls span:nth-child(2) { background: #facc15; }
.cabinet-controls span:nth-child(3) { background: #22d3ee; }

/* ---------------- Schede gioco ---------------- */

.game-card {
    background: var(--gio-surface);
    border: 1px solid var(--gio-border);
    border-radius: 18px;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    height: 100%;
}
.game-card:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, .55);
    box-shadow: 0 18px 40px rgba(2, 6, 23, .55);
}
.game-cover {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.6rem;
    color: #fff;
    position: relative;
}
.game-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, .12) 1px, transparent 1px);
    background-size: 22px 22px;
    opacity: .5;
}
.game-cover i { position: relative; z-index: 1; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .4)); }

/* ---- Copertina caricata dal pannello ----
   Il rapporto è fisso 16/9: le immagini arrivano con proporzioni diverse
   e senza un rapporto imposto le schede della stessa riga avrebbero
   altezze differenti. object-fit ritaglia invece di deformare. */
.game-cover-foto {
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 0;
    background: #0b1120;
}
.game-cover-foto::after { display: none; }
.game-cover-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.game-cover-icona {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 2;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 6px 18px rgba(2, 6, 23, .6);
}
.game-cover-icona i { filter: none; }

/* ---- Elenco e anteprima nel pannello amministrativo ---- */

.admin-copertina {
    display: block;
    width: 64px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--gio-border);
    background: #0b1120;
}
.admin-copertina-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
}
.anteprima-copertina {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--gio-border);
    background: #0b1120;
    display: flex;
    align-items: center;
    justify-content: center;
}
.anteprima-copertina img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anteprima-vuota { font-size: 2.4rem; color: rgba(255, 255, 255, .85); }

.theme-blue   { background: linear-gradient(135deg, #0ea5e9, #4338ca); }
.theme-purple { background: linear-gradient(135deg, #7c3aed, #db2777); }
.theme-green  { background: linear-gradient(135deg, #059669, #84cc16); }
.theme-orange { background: linear-gradient(135deg, #f97316, #e11d48); }
.theme-cyan   { background: linear-gradient(135deg, #0891b2, #2563eb); }
.theme-pink   { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.theme-indigo { background: linear-gradient(135deg, #4f46e5, #0ea5e9); }
.theme-amber  { background: linear-gradient(135deg, #f59e0b, #ef4444); }

.chip {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .22rem .6rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, .14);
    color: var(--gio-muted);
    border: 1px solid var(--gio-border);
}
.chip-difficulty-facile    { color: var(--gio-good); border-color: rgba(74, 222, 128, .4); }
.chip-difficulty-media     { color: #fbbf24; border-color: rgba(251, 191, 36, .4); }
.chip-difficulty-difficile { color: #fb7185; border-color: rgba(251, 113, 133, .4); }

/* ---------------- Area di gioco ---------------- */

/* Il canvas ha risoluzione logica fissa 900x600, ma non deve mai
   superare l'altezza della finestra: la larghezza massima viene
   ricavata dall'altezza disponibile mantenendo le proporzioni.
   --gio-chrome è lo spazio occupato da barra, titolo, HUD e controlli. */
.game-shell {
    --gio-chrome: 300px;
    background: var(--gio-surface);
    border: 1px solid var(--gio-border);
    border-radius: 18px;
    padding: 14px;
    position: relative;
}
.game-stage {
    display: flex;
    justify-content: center;
    align-items: center;
}
.game-shell canvas {
    display: block;
    width: 100%;
    /* La forma del campo la decide il motore e la scrive in queste due
       variabili: su telefono in verticale diventa più alto che largo.
       I valori qui sono solo la partenza, prima che il motore risponda. */
    max-width: calc((100dvh - var(--gio-chrome)) * var(--gio-campo-w, 900) / var(--gio-campo-h, 600));
    height: auto;
    aspect-ratio: var(--gio-campo-w, 900) / var(--gio-campo-h, 600);
    border-radius: 12px;
    background: #070b16;
    touch-action: none;
}

/* Schermo intero: il canvas occupa tutto lo spazio disponibile. */
.game-shell:fullscreen {
    --gio-chrome: 150px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--gio-bg);
    /* SPAZI DI SICUREZZA DEL DISPOSITIVO.
       A schermo intero, e soprattutto in orizzontale, la tacca della
       fotocamera e la barra di sistema si mangiano i bordi: senza questi
       margini i comandi finiscono sotto il notch e non si toccano più.
       Sono gli stessi valori che le piattaforme di giochi raccomandano
       ai loro sviluppatori. */
    padding:
        calc(12px + env(safe-area-inset-top, 0px))
        calc(12px + env(safe-area-inset-right, 0px))
        calc(18px + env(safe-area-inset-bottom, 0px))
        calc(12px + env(safe-area-inset-left, 0px));
}
.game-shell:fullscreen canvas { max-width: calc((100dvh - var(--gio-chrome)) * var(--gio-campo-w, 900) / var(--gio-campo-h, 600)); }
.game-shell:fullscreen .game-info-bar { padding-bottom: 8px; }
.game-info-bar {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 2px 4px 12px;
    font-size: .88rem;
    color: var(--gio-muted);
}
.game-level { font-weight: 800; white-space: nowrap; color: var(--gio-accent); }

.game-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 4px 4px;
    font-size: .78rem;
    letter-spacing: .08em;
    color: var(--gio-muted);
    text-transform: uppercase;
}
.game-hud strong {
    display: block;
    font-size: 1.25rem;
    color: #fff;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}

.mobile-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.btn-arcade-pad {
    min-width: 62px;
    min-height: 52px;
    font-size: 1.2rem;
    color: #fff;
    background: var(--gio-surface-2);
    border: 1px solid var(--gio-border);
    border-radius: 12px;
    user-select: none;
    touch-action: manipulation;
}
.btn-arcade-pad:active { background: var(--gio-primary); color: #fff; }

.pause-overlay {
    position: absolute;
    inset: 14px;
    border-radius: 12px;
    background: rgba(7, 11, 22, .88);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    z-index: 3;
}
.pause-overlay[hidden] { display: none; }

/* ---------------- Statistiche e classifiche ---------------- */

.stat-card {
    background: var(--gio-surface);
    border: 1px solid var(--gio-border);
    border-radius: 16px;
    padding: 20px;
    height: 100%;
}
.stat-card i { font-size: 1.4rem; color: var(--gio-accent); }
.stat-value { font-size: 1.8rem; font-weight: 800; line-height: 1.1; }

.rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: rgba(148, 163, 184, .12);
    font-weight: 800;
    font-size: .85rem;
}
.rank-1 { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1f2937; }
.rank-2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #1f2937; }
.rank-3 { background: linear-gradient(135deg, #f0a675, #c2703f); color: #1f2937; }

.feature {
    background: var(--gio-surface);
    border: 1px solid var(--gio-border);
    border-radius: 18px;
    padding: 26px;
    height: 100%;
}
.feature-icon {
    width: 46px; height: 46px;
    border-radius: 13px;
    background: rgba(99, 102, 241, .16);
    color: #a5b4fc;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 16px;
}

/* ---------------- Form ---------------- */

.form-control, .form-select {
    background: var(--gio-surface-2);
    border: 1px solid var(--gio-border);
    color: var(--gio-text);
}
.form-control:focus, .form-select:focus {
    background: var(--gio-surface-2);
    color: var(--gio-text);
    border-color: var(--gio-primary);
    box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .22);
}
.form-control::placeholder { color: #64748b; }
.form-label { font-weight: 600; font-size: .9rem; }
.form-control:disabled { background: #0b1424; color: var(--gio-muted); }

.modal-content { background: var(--gio-surface); color: var(--gio-text); border: 1px solid var(--gio-border); }

footer.gio-footer {
    border-top: 1px solid var(--gio-border);
    color: var(--gio-muted);
    font-size: .88rem;
}

/* Indicatore di livello nell'HUD */
.level-pill {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    background: rgba(250, 204, 21, .12);
    border: 1px solid rgba(250, 204, 21, .35);
    color: #fde047;
    border-radius: 999px;
    padding: .28rem .8rem;
    font-weight: 800;
    letter-spacing: .04em;
    white-space: nowrap;
}
.level-pill small { font-size: .68rem; letter-spacing: .12em; opacity: .8; }

@media (max-width: 991px) {
    .game-shell { --gio-chrome: 360px; }
}
@media (max-width: 767px) {
    .display-3 { font-size: 2.3rem; }
    .game-shell { --gio-chrome: 330px; }
    .game-hud { font-size: .7rem; }
    .game-hud strong { font-size: 1.05rem; }
    .game-info-bar { flex-direction: column; align-items: flex-start; gap: 4px; }
    .btn-arcade-pad { min-width: 54px; min-height: 48px; }
}
/* In orizzontale su telefono lo spazio verticale è pochissimo. */
@media (max-height: 520px) {
    .game-shell { --gio-chrome: 190px; }
    .mobile-controls { margin-top: 6px; }
}

/* ---------------- Invito all'installazione della PWA ---------------- */

.pwa-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(99, 102, 241, .18), rgba(34, 211, 238, .10));
    border: 1px solid rgba(99, 102, 241, .40);
    border-radius: 16px;
    padding: 14px 18px;
    margin-top: 18px;
}
.pwa-banner[hidden] { display: none; }
.pwa-banner-icon {
    width: 44px; height: 44px;
    flex: 0 0 44px;
    border-radius: 12px;
    background: rgba(99, 102, 241, .22);
    color: #a5b4fc;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
}
.pwa-banner-text { flex: 1 1 260px; display: flex; flex-direction: column; }
.pwa-banner-text span { color: var(--gio-muted); font-size: .86rem; }
.pwa-banner-actions { display: flex; gap: 8px; flex: 0 0 auto; }

@media (max-width: 575px) {
    .pwa-banner { padding: 12px 14px; }
    .pwa-banner-actions { width: 100%; }
    .pwa-banner-actions .btn { flex: 1 1 auto; }
}

/* ==================================================================
   Landing page: elementi dedicati alla conversione
   ================================================================== */

.hero-punti li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .28rem 0;
    color: var(--gio-text);
}
.hero-punti i { color: var(--gio-good); margin-top: .18rem; }

/* Striscia di rassicurazioni */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    background: var(--gio-surface);
    border: 1px solid var(--gio-border);
    border-radius: 18px;
    padding: 20px;
}
.trust-item { display: flex; align-items: flex-start; gap: 12px; }
.trust-item i { font-size: 1.4rem; color: var(--gio-accent); margin-top: .1rem; }
.trust-item strong { display: block; font-size: .95rem; }
.trust-item span { display: block; font-size: .8rem; color: var(--gio-muted); }

/* Riquadri compatti dei giochi in home */
.game-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
    height: 100%;
    min-height: 152px;
    padding: 20px 14px;
    border-radius: 18px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .12);
    transition: transform .18s ease, box-shadow .18s ease;
    position: relative;
    overflow: hidden;
}
.game-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, .14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, .14) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: .45;
    pointer-events: none;
}
.game-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(2, 6, 23, .6); color: #fff; }
.game-tile > i { font-size: 2.4rem; position: relative; z-index: 1; }
.game-tile-name { font-weight: 800; position: relative; z-index: 1; }
.game-tile-meta { font-size: .72rem; opacity: .82; position: relative; z-index: 1; }

/* Passi numerati */
.passi { list-style: none; padding: 0; margin: 0; }
.passi li { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--gio-border); }
.passi li:last-child { border-bottom: none; }
.passo-num {
    flex: 0 0 38px;
    width: 38px; height: 38px;
    border-radius: 12px;
    background: rgba(99, 102, 241, .18);
    color: #a5b4fc;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
}

/* Domande frequenti */
.faq .accordion-item { background: var(--gio-surface); border: 1px solid var(--gio-border); border-radius: 14px; margin-bottom: 10px; }
.faq .accordion-button {
    background: transparent;
    color: var(--gio-text);
    font-weight: 600;
    border-radius: 14px;
    box-shadow: none;
}
.faq .accordion-button:not(.collapsed) { color: var(--gio-accent); background: rgba(34, 211, 238, .06); }
.faq .accordion-button::after { filter: invert(75%); }

/* Invito finale */
.cta-finale {
    background:
        radial-gradient(700px 320px at 50% 0%, rgba(99, 102, 241, .30), transparent 65%),
        var(--gio-surface);
    border: 1px solid rgba(99, 102, 241, .40);
    border-radius: 22px;
    padding: 48px 24px;
}

/* Corpo dei documenti legali */
.legal-body h2 { color: var(--gio-accent); }
.legal-body p, .legal-body li { color: #cbd5e1; line-height: 1.7; }
.legal-body ul { padding-left: 1.2rem; }
.legal-body li { margin-bottom: .4rem; }

/* ==================================================================
   Monetizzazione: spazi, sponsor e banner di consenso
   ================================================================== */

.ad-slot {
    position: relative;
    min-height: 90px;
    margin: 20px 0;
    padding: 22px 12px 12px;
    border: 1px dashed var(--gio-border);
    border-radius: 14px;
    background: rgba(148, 163, 184, .04);
    overflow: hidden;
}
.ad-label {
    position: absolute;
    top: 6px; left: 12px;
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gio-muted);
}
/* Finché il consenso non arriva lo spazio resta vuoto e discreto. */
.ad-slot:not(.ad-slot-attivo) { opacity: .5; }

.sponsor-box {
    position: relative;
    padding: 22px 16px 16px;
    border: 1px solid var(--gio-border);
    border-radius: 16px;
    background: var(--gio-surface);
    text-align: center;
}
.sponsor-box a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--gio-text);
    text-decoration: none;
    font-weight: 600;
}
.sponsor-box a:hover { color: var(--gio-accent); }
.sponsor-box img { max-height: 54px; max-width: 240px; object-fit: contain; }

/* Banner di consenso: i due pulsanti hanno lo stesso peso visivo,
   perché rifiutare deve costare quanto accettare. */
.consent-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1080;
    background: rgba(7, 11, 22, .97);
    border-top: 1px solid rgba(99, 102, 241, .45);
    backdrop-filter: blur(8px);
    padding: 16px 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.consent-banner[hidden] { display: none; }
.consent-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.consent-testo { flex: 1 1 340px; }
.consent-testo strong { display: block; margin-bottom: .25rem; }
.consent-testo p { font-size: .85rem; color: var(--gio-muted); }
.consent-azioni { display: flex; gap: 10px; flex: 0 0 auto; }
.consent-azioni .btn { min-width: 120px; }

@media (max-width: 575px) {
    .consent-azioni { width: 100%; }
    .consent-azioni .btn { flex: 1 1 auto; min-width: 0; }
}

/* Offerta Plus */
.plus-card {
    background:
        radial-gradient(600px 260px at 50% 0%, rgba(250, 204, 21, .18), transparent 65%),
        var(--gio-surface);
    border: 1px solid rgba(250, 204, 21, .35);
    border-radius: 20px;
    padding: 32px;
}
.plus-prezzo { font-size: 2.6rem; font-weight: 900; line-height: 1; }
.plus-vantaggi { list-style: none; padding: 0; margin: 0; }
.plus-vantaggi li { display: flex; gap: .6rem; padding: .35rem 0; }
.plus-vantaggi i { color: var(--gio-good); margin-top: .2rem; }

/* ==================================================================
   Prodotti in affiliazione
   ================================================================== */

.affiliati-avviso {
    background: rgba(148, 163, 184, .08);
    border-left: 3px solid var(--gio-accent);
    border-radius: 0 10px 10px 0;
    padding: 10px 14px;
}
.affiliato {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 14px;
    border-radius: 16px;
    background: var(--gio-surface);
    border: 1px solid var(--gio-border);
    color: var(--gio-text);
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease;
}
.affiliato:hover { transform: translateY(-3px); border-color: rgba(99, 102, 241, .5); color: var(--gio-text); }
.affiliato img,
.affiliato-segnaposto {
    width: 100%;
    height: 120px;
    object-fit: contain;
    border-radius: 10px;
    background: #0d1425;
}
.affiliato-segnaposto {
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: var(--gio-muted);
}
.affiliato-titolo { font-weight: 700; font-size: .92rem; line-height: 1.3; }
.affiliato-desc { font-size: .78rem; color: var(--gio-muted); }
.affiliato-prezzo { font-weight: 800; color: var(--gio-accent); }
.affiliato-circuito {
    margin-top: auto;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gio-muted);
}

/* ---------------- Finestra di caricamento immagini ---------------- */

.riquadri-upload {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
}
.riquadro-upload {
    position: relative;
    border: 1px solid var(--gio-border);
    border-radius: 10px;
    padding: 6px;
    background: #0d1425;
    text-align: center;
}
.riquadro-upload img {
    width: 100%;
    height: 78px;
    object-fit: contain;
    cursor: pointer;
    border-radius: 6px;
}
.riquadro-upload img:hover { outline: 2px solid var(--gio-accent); }
.riquadro-upload span { display: block; font-size: .68rem; color: var(--gio-muted); margin-top: 4px; }
.riquadro-upload button { position: absolute; top: 4px; right: 4px; padding: 1px 6px; }

/* ---------------- Configurazione a schede ---------------- */

.config-schede {
    border-bottom: 1px solid var(--gio-border);
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.config-schede::-webkit-scrollbar { height: 4px; }
.config-schede::-webkit-scrollbar-thumb { background: var(--gio-border); border-radius: 4px; }
.config-schede .nav-link {
    white-space: nowrap;
    color: var(--gio-muted);
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: .55rem .9rem;
    font-size: .9rem;
}
.config-schede .nav-link:hover { color: var(--gio-text); border-color: var(--gio-border); }
.config-schede .nav-link.active {
    color: var(--gio-accent);
    background: var(--gio-surface);
    border-color: var(--gio-border);
}
.config-guscio .tab-content { margin-top: -1px; }
.config-guscio .panel-dark { border-top-left-radius: 0; }

/* ==================================================================
   Giocabilità su schermi piccoli
   ================================================================== */

.game-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.game-titolo h1 { line-height: 1.1; }
.game-azioni {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
}
.game-azioni .btn { white-space: nowrap; }

/* Comandi a sfioramento: bersagli grandi, distanti dal bordo e vicini ai
   pollici. Prima erano pulsanti piccoli, allineati sotto il campo. */
.mobile-controls {
    display: none;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}
.mobile-controls .touch-btn {
    min-width: 74px;
    min-height: 62px;
    font-size: 1.5rem;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, .35);
    background: rgba(30, 41, 59, .85);
    color: var(--gio-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.mobile-controls .touch-btn small {
    font-size: .6rem;
    letter-spacing: .06em;
    color: var(--gio-muted);
    text-transform: uppercase;
}
.mobile-controls .touch-btn:active,
.mobile-controls .touch-btn.premuto {
    background: rgba(99, 102, 241, .5);
    border-color: var(--gio-accent);
    transform: scale(.96);
}

@media (hover: none), (max-width: 991px) {
    .mobile-controls { display: flex; }
}

/* Telefono: si recupera ogni pixel di altezza per il campo.
   LA SOGLIA È 767, NON 575, E NON VA RIABBASSATA. Prima era 575 e su
   parecchi telefoni queste regole non si applicavano mai: la larghezza
   logica di uno schermo alto e denso finisce spesso fra 576 e 767, e in
   quella fascia i pulsanti restavano con l'etichetta, la barra andava in
   overflow e il titolo mangiava altezza al campo. */
@media (max-width: 767px) {
    /* BARRA DEI COMANDI SULLA STESSA RIGA DEL TITOLO.
       Occupava una riga tutta sua sopra il campo: fra intestazione del
       sito, titolo, riga dei pulsanti e barra dell'obiettivo se ne
       andavano quasi duecento pixel prima ancora di vedere il gioco, e
       su telefono il campo finiva fuori schermo in basso.
       Titolo e pulsanti stanno ora affiancati, e i pulsanti sono icone
       piccole: quello che serve durante una partita è raggiungerli, non
       leggerli. */
    .game-topbar {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: .5rem !important;
    }
    .game-azioni .etichetta { display: none; }
    .game-azioni .btn {
        padding: .3rem .5rem;
        font-size: .95rem;
        line-height: 1.1;
    }
    .game-titolo h1 { font-size: 1rem; }
    .game-titolo .section-kicker { display: none; }

    /* La riga dei pulsanti non deve MAI uscire dallo schermo: prima con
       un titolo lungo l'ultimo pulsante finiva tagliato fuori. */
    .game-topbar { flex-wrap: wrap; gap: 6px; }
    .game-azioni { flex-wrap: wrap; justify-content: flex-end; }

    /* SPAZIO RISERVATO A CIÒ CHE STA FUORI DAL CAMPO.
       Erano 270 pixel e non bastavano: 100dvh è l'altezza della finestra,
       ma sopra il campo ci sono anche l'intestazione del sito, il titolo
       del gioco con i suoi pulsanti e la barra dell'obiettivo, che quel
       calcolo non conosce. Il risultato era un campo così alto da
       spingere i comandi sotto il bordo dello schermo: sul telefono i
       pulsanti non si vedevano proprio. */
    .game-shell { --gio-chrome: 336px; padding: 10px; }

    /* LA RIGA DEL TITOLO COSTA ALTEZZA CHE SERVE AL CAMPO.
       Su telefono il nome del gioco è già scritto due volte sopra — nel
       titolo della pagina e nella scheda — quindi qui resta solo per i
       lettori di schermo, e i pulsanti diventano una fila compatta di
       sole icone allineata a destra. */
    .game-titolo {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .game-topbar { justify-content: flex-end; margin-bottom: 4px; }
    .game-azioni .btn { padding: .32rem .55rem; font-size: .95rem; }

    .game-info-bar { font-size: .74rem; padding-bottom: 6px; }
    .game-info-bar #gameObjective {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .game-hud { font-size: .72rem; gap: 10px; padding: 8px 2px 2px; flex-wrap: nowrap; }
    .game-hud strong { font-size: 1.05rem; }
    .game-hud > * { min-width: 0; }

    .mobile-controls .touch-btn { min-width: 64px; min-height: 56px; font-size: 1.35rem; }
    .mobile-controls { gap: 8px; margin-top: 8px; }

    /* Il riquadro di gioco arriva ai bordi dello schermo. Sono i margini
       del contenitore più il bordo arrotondato: una trentina di pixel di
       larghezza, che sul campo diventano una ventina di altezza. Poco,
       ma è gratis e non toglie niente a nessuno. */
    .game-shell {
        margin-left: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        margin-right: calc(var(--bs-gutter-x, 1.5rem) * -0.5);
        border-radius: 12px;
    }
}

/* ---- Invito a giocare in orizzontale ----
   Si mostra solo dove serve davvero: schermo stretto, tenuto in
   verticale, e con lo sfioramento. Su un computer non compare mai, e
   nemmeno quando il telefono è già girato. */
.ruota-invito { display: none; }

@media (max-width: 991px) and (orientation: portrait) and (hover: none) {
    .ruota-invito {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 10px;
        padding: .6rem .75rem;
        border: 1px solid rgba(56, 189, 248, .35);
        border-radius: 12px;
        background: rgba(56, 189, 248, .08);
        font-size: .82rem;
        line-height: 1.35;
    }
    .ruota-invito .bi-phone-landscape { color: var(--gio-accent, #38bdf8); }
    .ruota-invito span { flex: 1 1 180px; }
}
/* A schermo intero l'invito ha esaurito il suo scopo. */
.game-shell:fullscreen .ruota-invito { display: none !important; }

/* Telefono in orizzontale: i comandi vanno ai lati del campo, dove
   stanno davvero i pollici, e il resto sparisce. */
@media (max-width: 991px) and (orientation: landscape) {
    .game-topbar,
    .ruota-invito,
    .game-suggerimento { display: none; }
    .game-shell { --gio-chrome: 108px; padding: 4px; }
    .game-info-bar { display: none; }
    .game-hud { font-size: .78rem; padding-top: 4px; }
    .mobile-controls {
        position: fixed;
        left: 0; right: 0; bottom: 8px;
        justify-content: space-between;
        padding: 0 10px;
        pointer-events: none;
        z-index: 20;
    }
    .mobile-controls .touch-btn {
        pointer-events: auto;
        opacity: .88;
        min-width: 68px;
        min-height: 56px;
    }
}

/* Il suggerimento si apre solo se serve. */
.game-suggerimento summary {
    cursor: pointer;
    font-size: .82rem;
    color: var(--gio-muted);
    list-style: none;
}
.game-suggerimento summary::-webkit-details-marker { display: none; }
.game-suggerimento summary:hover { color: var(--gio-text); }


/* ---- Finestre con un modulo che avvolge corpo e piè di pagina ----
   Senza queste righe il piè di pagina della finestra di modifica veniva
   tagliato e il pulsante Salva risultava invisibile: .modal-content è un
   contenitore flessibile in colonna con overflow nascosto, e il <form>
   interposto interrompeva la catena che dà un'altezza massima al corpo. */
.modal-content > .modulo-modale {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}
.modal-content > .modulo-modale > .modal-body { overflow-y: auto; min-height: 0; }

/* ==================================================================
 * EFFETTI SULLE SCHEDE (V26)
 *
 * Tutto ciò che si muove qui è racchiuso in una sola regola di rispetto:
 * chi ha impostato nel sistema la riduzione delle animazioni non deve
 * vedere niente muoversi. Non è un dettaglio di stile: per chi soffre di
 * disturbi vestibolari un sollevamento con ombra che insegue il puntatore
 * può dare nausea, e la preferenza esiste apposta.
 * ================================================================== */

.game-card {
    transition: transform .28s cubic-bezier(.2, .8, .3, 1),
                box-shadow .28s ease,
                border-color .28s ease;
    will-change: transform;
}
.game-card:hover,
.game-card:focus-within {
    transform: translateY(-6px);
    border-color: rgba(56, 189, 248, .55);
    box-shadow: 0 18px 40px rgba(2, 6, 23, .65), 0 0 0 1px rgba(56, 189, 248, .18);
}
.game-card .game-cover-foto img { transition: transform .5s cubic-bezier(.2, .8, .3, 1); }
.game-card:hover .game-cover-foto img { transform: scale(1.06); }
.game-card .game-cover i { transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.game-card:hover .game-cover i { transform: scale(1.12) rotate(-4deg); }

/* Riflesso che attraversa la copertina al passaggio del puntatore. */
.game-card .game-cover { position: relative; overflow: hidden; }
.game-card .game-cover::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}
.game-card:hover .game-cover::before { animation: riflesso .85s ease-out; }
@keyframes riflesso {
    0%   { left: -60%; opacity: 0; }
    12%  { opacity: 1; }
    100% { left: 130%; opacity: 0; }
}

.game-tile {
    transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease;
}
.game-tile:hover,
.game-tile:focus-visible {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 16px 34px rgba(2, 6, 23, .6);
}

.feature {
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.feature:hover {
    transform: translateY(-4px);
    border-color: rgba(56, 189, 248, .4);
}

/* --- Sezione delle affiliazioni in evidenza --- */
.sezione-consigli {
    border: 1px solid rgba(56, 189, 248, .28);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    background:
        radial-gradient(1100px 320px at 15% -20%, rgba(56, 189, 248, .16), transparent 60%),
        radial-gradient(900px 300px at 90% 120%, rgba(168, 85, 247, .14), transparent 60%),
        var(--gio-panel, #0f172a);
}
.sezione-consigli .affiliato {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sezione-consigli .affiliato:hover {
    transform: translateY(-5px);
    border-color: rgba(56, 189, 248, .5);
    box-shadow: 0 16px 34px rgba(2, 6, 23, .6);
}

/* --- Numeri in evidenza --- */
.numeri-griglia {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}
.numero-blocco {
    border: 1px solid var(--gio-border);
    border-radius: 16px;
    padding: 1.25rem 1rem;
    text-align: center;
    background: rgba(15, 23, 42, .6);
    transition: transform .25s ease, border-color .25s ease;
}
.numero-blocco:hover { transform: translateY(-4px); border-color: rgba(56, 189, 248, .45); }
.numero-blocco .cifra { font-size: 2rem; font-weight: 800; line-height: 1; }
.numero-blocco .etichetta { font-size: .85rem; opacity: .75; }

@media (prefers-reduced-motion: reduce) {
    .game-card, .game-tile, .feature, .numero-blocco,
    .sezione-consigli .affiliato,
    .game-card .game-cover-foto img, .game-card .game-cover i {
        transition: none !important;
    }
    .game-card:hover, .game-card:focus-within,
    .game-tile:hover, .game-tile:focus-visible,
    .feature:hover, .numero-blocco:hover,
    .sezione-consigli .affiliato:hover,
    .game-card:hover .game-cover-foto img, .game-card:hover .game-cover i {
        transform: none !important;
    }
    .game-card:hover .game-cover::before { animation: none !important; }
}

/* Testo libero del piè di pagina: gli a capo dell'amministratore vanno
   rispettati anche quando la riga è più larga dello schermo. */
.footer-azienda { line-height: 1.7; max-width: 70ch; }

/* ==================================================================
 * SCHERMATA DI AVVIO (V27)
 * Copre il campo finché non si preme Play. Deve restare leggibile su
 * telefono senza far scorrere la pagina: il contenuto scorre da solo
 * dentro il riquadro invece di sfondarlo.
 * ================================================================== */
.start-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(2, 6, 23, .93);
    backdrop-filter: blur(3px);
}
.start-contenuto {
    width: min(560px, 100%);
    max-height: 100%;
    overflow-y: auto;
    text-align: left;
}
.start-obiettivo {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.start-obiettivo .bi { color: var(--gio-accent, #38bdf8); }
.start-blocco {
    border-left: 3px solid rgba(56, 189, 248, .5);
    padding: .1rem 0 .1rem .75rem;
    margin-bottom: .85rem;
}
.start-blocco h3 { margin-bottom: .25rem; }
#startBtn { font-weight: 700; letter-spacing: .02em; }

@media (max-width: 575.98px) {
    .start-obiettivo { font-size: .98rem; }
    .start-contenuto { font-size: .95rem; }
    .start-blocco p:last-child { margin-bottom: 0; }
}

/* ---- Scheda pubblica del gioco (V28) ----
   Vista da chi non ha ancora l'account: copertina grande, scopo e regole.
   Nessun campo di gioco, quindi nessun vincolo di altezza sul canvas. */
.scheda-copertina {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #0b1120;
}
.scheda-copertina-icona {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: #fff;
}
.scheda-pubblica .start-obiettivo { margin-bottom: 1rem; }

/* ---- Mattonelle con copertina caricata (V28) ----
   L'immagine sostituisce il fondo colorato. Il testo resta leggibile
   perché sta sopra una sfumatura scura: senza, il nome bianco sparirebbe
   su qualsiasi copertina chiara, e non si può sapere in anticipo com'è
   fatta l'immagine che verrà caricata. */
.game-tile-foto {
    padding: 0;
    overflow: hidden;
    justify-content: flex-end;
    align-items: stretch;
    background: #0b1120;
}
.game-tile-foto::after { display: none; }
.game-tile-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s cubic-bezier(.2, .8, .3, 1);
}
.game-tile-foto:hover img { transform: scale(1.06); }
.game-tile-velo {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 28px 12px 12px;
    text-align: center;
    background: linear-gradient(to top, rgba(2, 6, 23, .92) 35%, rgba(2, 6, 23, 0));
}
.game-tile-velo .game-tile-name { text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }

@media (prefers-reduced-motion: reduce) {
    .game-tile-foto img, .game-tile-foto:hover img { transition: none !important; transform: none !important; }
}

/* ==================================================================
 * SCHERMATA DI AVVIO CON COPERTINA E BONUS (V29)
 * Su computer copertina a sinistra e testo a destra; su telefono in
 * colonna. Il contenuto scorre DENTRO il riquadro, mai la pagina: il
 * pulsante Play deve restare raggiungibile senza cercarlo.
 * ================================================================== */
.start-con-copertina {
    width: min(940px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 1.25rem;
    align-items: start;
}
.start-copertina {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--gio-border);
    background: #0b1120;
}
.start-copertina img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.start-testo { min-width: 0; }

.bonus-elenco {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
    display: grid;
    gap: .5rem;
}
.bonus-elenco li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .875rem;
    line-height: 1.45;
}
.bonus-elenco strong { display: block; }
.bonus-icona {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background: rgba(255, 255, 255, .04);
}

@media (max-width: 991.98px) {
    .start-con-copertina { grid-template-columns: 1fr; gap: .9rem; }
    .start-copertina img { aspect-ratio: 2 / 1; }
}

/* ---- Voto a stelle (V30) ----
   I pulsanti restano pulsanti veri: si raggiungono con il tabulatore e
   si attivano da tastiera. Un voto fatto di <span> cliccabili sarebbe
   inaccessibile a chi non usa il mouse. */
.voto-riquadro {
    border: 1px solid var(--gio-border);
    border-radius: 12px;
    padding: .6rem .8rem;
    background: rgba(15, 23, 42, .5);
}
.stelle-voto { display: flex; gap: .15rem; }
.stelle-voto .stella {
    background: none;
    border: 0;
    padding: .1rem .15rem;
    font-size: 1.35rem;
    line-height: 1;
    color: rgba(148, 163, 184, .6);
    cursor: pointer;
    transition: transform .12s ease, color .12s ease;
}
.stelle-voto .stella:hover { transform: scale(1.15); color: #fbbf24; }
.stelle-voto .stella.attiva { color: #fbbf24; }
.stelle-voto .stella:focus-visible { outline: 2px solid var(--gio-accent, #38bdf8); border-radius: 6px; }

.voto-media { display: inline-flex; align-items: center; gap: .25rem; }
.voto-media .bi { color: #fbbf24; }

@media (prefers-reduced-motion: reduce) {
    .stelle-voto .stella, .stelle-voto .stella:hover { transition: none !important; transform: none !important; }
}

/* ---- Recensioni ---- */
.recensione {
    border: 1px solid var(--gio-border);
    border-radius: 16px;
    padding: 1.25rem;
    height: 100%;
    background: rgba(15, 23, 42, .55);
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.recensione-stelle { color: #fbbf24; font-size: .95rem; }
.recensione-testo { flex: 1; line-height: 1.6; }
.recensione-autore { font-size: .85rem; opacity: .75; }

/* La copertina della scheda è un collegamento a tutti gli effetti. */
.game-cover-link { display: block; text-decoration: none; color: inherit; }
.game-cover-link:focus-visible { outline: 2px solid var(--gio-accent, #38bdf8); outline-offset: 2px; }


/* ==================================================================
 * MODALITÀ IMMERSIVA (V39)
 *
 * Lo schermo intero vero non è sempre disponibile: su iPhone, in Safari,
 * l'interfaccia a schermo intero non esiste per gli elementi di pagina,
 * quindi il pulsante non fa niente. Questa modalità ottiene lo stesso
 * risultato senza chiedere niente al browser: il riquadro di gioco
 * diventa grande quanto la finestra e tutto il resto della pagina viene
 * nascosto. È quello che fanno i portali quando il gioco non può andare
 * a schermo intero.
 * ================================================================== */
body.gioco-immersivo > *:not(.gio-immersivo-host) { display: none !important; }
body.gioco-immersivo { overflow: hidden; }

.game-shell.immersivo {
    position: fixed;
    inset: 0;
    z-index: 1050;
    max-width: none;
    margin: 0;
    border-radius: 0;
    --gio-chrome: 132px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--gio-bg);
    padding:
        calc(10px + env(safe-area-inset-top, 0px))
        calc(10px + env(safe-area-inset-right, 0px))
        calc(14px + env(safe-area-inset-bottom, 0px))
        calc(10px + env(safe-area-inset-left, 0px));
}
.game-shell.immersivo canvas {
    max-width: calc((100dvh - var(--gio-chrome)) * var(--gio-campo-w, 900) / var(--gio-campo-h, 600));
}
.game-shell.immersivo .game-suggerimento,
.game-shell.immersivo .ruota-invito { display: none; }

/* Il pulsante per uscire resta sempre raggiungibile: una modalità
   immersiva senza via d'uscita visibile è una trappola. */
.uscita-immersiva {
    position: absolute;
    top: calc(8px + env(safe-area-inset-top, 0px));
    right: calc(8px + env(safe-area-inset-right, 0px));
    z-index: 2;
}
.game-shell:not(.immersivo) .uscita-immersiva { display: none; }

@media (max-width: 767px) {
    .game-shell.immersivo { --gio-chrome: 150px; }
}
@media (max-width: 991px) and (orientation: landscape) {
    .game-shell.immersivo { --gio-chrome: 96px; }
}

/* ==================================================================
 * PANNELLO AMMINISTRATIVO — MENU LATERALE (V43)
 *
 * Con quindici voci la barra in alto andava a capo e su schermo stretto
 * diventava un elenco lungo quanto la pagina. Di lato le voci stanno in
 * colonna, restano leggibili e lasciano alla pagina tutta la larghezza.
 * Sotto i 992 pixel il menu diventa un pannello che si apre e si chiude:
 * su telefono una colonna fissa mangerebbe metà schermo.
 * ================================================================== */
.admin-shell { display: flex; min-height: calc(100vh - 56px); }

.admin-lato {
    width: 252px;
    flex: 0 0 252px;
    background: linear-gradient(180deg, #0e1b33, var(--gio-bg));
    border-right: 1px solid var(--gio-border);
}
@media (min-width: 992px) {
    .admin-lato {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
    .admin-lato .offcanvas-body { display: flex; }
}

.admin-marchio {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 1.1rem 1.1rem .9rem;
    font-weight: 700;
    color: var(--gio-text);
    text-decoration: none;
    border-bottom: 1px solid var(--gio-border);
}
.admin-marchio .bi { color: var(--gio-primario); font-size: 1.2rem; }

.admin-gruppo {
    padding: 1rem 1.1rem .35rem;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gio-muted);
}

.admin-voce {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem 1.1rem;
    color: var(--gio-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    font-size: .93rem;
}
.admin-voce:hover { background: rgba(0, 209, 255, .08); color: var(--gio-text); }
.admin-voce .bi { width: 1.1rem; text-align: center; color: var(--gio-muted); }
/* La voce attiva si riconosce da TRE segni insieme — barra laterale,
   fondo e colore — perché il solo colore non basta a chi non distingue
   bene le tinte. */
.admin-voce.attiva {
    background: rgba(0, 209, 255, .14);
    border-left-color: var(--gio-primario);
    font-weight: 600;
}
.admin-voce.attiva .bi { color: var(--gio-primario); }

.admin-piede {
    margin-top: auto;
    padding: 1rem 1.1rem;
    border-top: 1px solid var(--gio-border);
}

.admin-contenuto {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.5rem 1.75rem 2rem;
}
.admin-apri-menu {
    position: sticky;
    top: .5rem;
    z-index: 3;
    margin: .75rem 0 0 .75rem;
    align-self: flex-start;
}
@media (max-width: 991.98px) {
    .admin-shell { flex-direction: column; }
    .admin-contenuto { padding: 1rem 1rem 2rem; }
}

.skip-link {
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 10;
    background: var(--gio-surface);
    padding: .5rem .75rem;
    border-radius: 8px;
}

/* ---- Riquadro della pagina iniziale con immagine caricata (V43) ---- */
.cabinet-screen-foto {
    position: relative;
    padding: 0;
    overflow: hidden;
    display: block;
}
.cabinet-screen-foto img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* La scritta resta leggibile su qualsiasi immagine: non si può sapere in
   anticipo se quella caricata sarà chiara o scura. */
.cabinet-velo {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2.2rem .75rem .75rem;
    text-align: center;
    background: linear-gradient(to top, rgba(11, 20, 38, .92), rgba(11, 20, 38, 0));
}

/* ==================================================================
 * ELEMENTI DELL'IDENTITÀ VISIVA (V43)
 * Presi dal documento di marca: i tre pulsanti principali e le pillole
 * di categoria colorate. Sono classi aggiuntive, non sostituiscono
 * quelle di Bootstrap: un pulsante senza .btn-brand-* resta com'era.
 * ================================================================== */
.btn-brand-primario {
    background: linear-gradient(135deg, var(--gio-primario), #34e0ff);
    border: 0;
    color: #06253a;
    font-weight: 700;
}
.btn-brand-primario:hover, .btn-brand-primario:focus {
    background: linear-gradient(135deg, #34e0ff, var(--gio-primario));
    color: #06253a;
}
.btn-brand-azione {
    background: linear-gradient(135deg, var(--gio-accento-verde), var(--gio-highlight));
    border: 0;
    color: #08290b;
    font-weight: 700;
}
.btn-brand-azione:hover, .btn-brand-azione:focus {
    background: linear-gradient(135deg, var(--gio-highlight), var(--gio-accento-verde));
    color: #08290b;
}
.btn-brand-scuro {
    background: #0d1830;
    border: 1px solid var(--gio-border);
    color: var(--gio-text);
    font-weight: 600;
}
.btn-brand-scuro:hover, .btn-brand-scuro:focus {
    border-color: var(--gio-primario);
    color: var(--gio-text);
}

/* Pillole di categoria: una tinta per famiglia, come nel documento.
   Il nome resta scritto per esteso, quindi il colore aggiunge
   riconoscibilità senza esserne l'unico veicolo. */
.chip-cat { color: #041020; font-weight: 700; border: 0; }
.chip-cat-azione    { background: #38bdf8; }
.chip-cat-sport     { background: #34d399; }
.chip-cat-puzzle    { background: #fb923c; }
.chip-cat-strategia { background: #a78bfa; }
.chip-cat-parole    { background: #f472b6; }
.chip-cat-carte     { background: #facc15; }

/* ---- Menu del sito a pannello laterale (V44) ---- */
@media (max-width: 991.98px) {
    .gio-menu-lato {
        width: min(300px, 84vw);
        background: linear-gradient(180deg, #0e1b33, var(--gio-bg));
        border-right: 1px solid var(--gio-border);
    }
    .gio-menu-lato .navbar-nav { gap: .15rem; }
    .gio-menu-lato .nav-link {
        padding: .7rem .35rem;
        border-bottom: 1px solid rgba(139, 163, 199, .12);
    }
    .gio-menu-lato .btn { width: 100%; margin-top: .6rem; }

    /* Il corpo del pannello deve poter scorrere: con l'utente connesso
       le voci sono sette più due pulsanti, e su uno schermo basso
       tenuto in orizzontale non ci starebbero. */
    .gio-menu-lato .offcanvas-body { overflow-y: auto; }

    /* Spazi di sicurezza anche qui: il pannello arriva ai bordi dello
       schermo e su un telefono con la tacca la prima voce ci finirebbe
       sotto. */
    .gio-menu-lato .offcanvas-header { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }
    .gio-menu-lato .offcanvas-body { padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }

    /* Il pulsante del menu è più grande del minimo di Bootstrap: è il
       comando più usato del sito su telefono e va preso al primo colpo. */
    .navbar-toggler { padding: .45rem .6rem; }
}