/* ═══════════════════════════════════════════════
   TVR — Pagina Giochi (page-giochi.php)
   Stile: videogame retro + gioco da tavolo isometrico
   Palette TVR: grigio #292D2E, azzurro #1C9DDD,
                giallo #F0C828, verde #399953
   ═══════════════════════════════════════════════ */

#page-giochi {
    background: var(--color-bianco);
    color: var(--color-grigio);
    overflow-x: hidden;
}

/* ─────────────────────────────────────────────
   HERO INTRO
───────────────────────────────────────────── */

.giochi-hero {
    position: relative;
    background: var(--color-grigio);
    color: var(--color-bianco);
    padding: 9rem 0 6rem;
    overflow: hidden;
    isolation: isolate;
}
.giochi-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 30% 30%, rgba(28,157,221,.18), transparent 60%),
        radial-gradient(ellipse 60% 50% at 80% 80%, rgba(240,200,40,.12), transparent 70%);
    z-index: 0;
}
.parallax-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 56px 56px;
    z-index: 0;
    mask-image: radial-gradient(ellipse at center, black 50%, transparent 90%);
    pointer-events: none;
}
.giochi-hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
}
.giochi-hero .section-label--light { color: var(--color-giallo); }

.giochi-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 7vw, 5.5rem);
    line-height: 1.18;
    color: var(--color-bianco);
    text-transform: uppercase;
    letter-spacing: -.005em;
    margin: 1rem 0 1.4rem;
}
.giochi-headline__line { display: block; margin-bottom: .15em; }
.giochi-headline__line:last-child { margin-bottom: 0; }
.giochi-headline__line--em { color: var(--color-giallo); font-style: italic; }
.giochi-lead {
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: rgba(255,255,255,.78);
    max-width: 640px;
    margin: 0 auto 2.4rem;
    line-height: 1.65;
    text-wrap: pretty;
}
.giochi-lead strong { color: var(--color-giallo); font-weight: 600; }

/* INSERT COIN strip (arcade) */
.insert-coin {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-family: var(--font-display);
    font-size: .8rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--color-giallo);
    padding: .6rem 1.4rem;
    border: 1px dashed rgba(240,200,40,.5);
    border-radius: 4px;
    animation: coinBlink 1.4s ease-in-out infinite;
}
.insert-coin__dot {
    width: 8px; height: 8px;
    background: var(--color-giallo);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(240,200,40,.18);
}
@keyframes coinBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: .55; }
}

/* deco SVG fluttuanti */
.giochi-deco {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 8px 22px rgba(0,0,0,.4));
}
.giochi-deco--dice { width: 90px; top: 18%; left: 8%;  animation: floatLazy 8s ease-in-out infinite; }
.giochi-deco--pad  { width: 130px; top: 22%; right: 7%; animation: floatLazy 10s ease-in-out infinite reverse; }
@keyframes floatLazy {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-22px) rotate(7deg); }
}

/* ─────────────────────────────────────────────
   COME SI GIOCA (regole)
───────────────────────────────────────────── */
.giochi-rules {
    background: #fafaf8;
    padding: 6rem 0;
    border-bottom: 1px solid rgba(41,45,46,.08);
}
.rules-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1.22;
    color: var(--color-grigio);
    text-transform: uppercase;
    margin: .5rem 0 0;
}
.rules-headline em {
    font-style: italic;
    color: var(--color-azzurro);
    text-transform: none;
}
.rules-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rules-step {
    display: flex;
    gap: 1.6rem;
    padding: 1.4rem 0;
    border-bottom: 1px dashed rgba(41,45,46,.15);
    align-items: flex-start;
}
.rules-step:last-child { border-bottom: none; }
.rules-step__num {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-bianco);
    background: var(--color-azzurro);
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 4px;
    box-shadow: 0 4px 0 var(--color-grigio);
    letter-spacing: .05em;
}
.rules-step h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--color-grigio);
    text-transform: uppercase;
    margin: 0 0 .4rem;
    font-weight: 400;
}
.rules-step p {
    font-size: 1rem;
    line-height: 1.65;
    color: #4a4d4e;
    margin: 0;
    text-wrap: pretty;
}

/* ─────────────────────────────────────────────
   GRIGLIA GIOCHI
───────────────────────────────────────────── */
.giochi-grid-section {
    padding: 6rem 0 7rem;
    background:
        linear-gradient(180deg, var(--color-bianco) 0%, #f6f7f8 100%);
}
.giochi-grid-header {
    text-align: center;
    margin-bottom: 3.5rem;
}
.grid-headline {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: 1.6;
    color: var(--color-grigio);
    text-transform: uppercase;
    margin: .5rem 0 0;
}
.grid-sub {
    max-width: 60ch;
    margin: 1.4rem auto 0;
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    line-height: 1.6;
    color: #4a4d4e;
    text-wrap: pretty;
}
.grid-sub strong {
    font-weight: 700;
    color: var(--color-grigio);
    background: linear-gradient(180deg, transparent 62%, rgba(240,200,40,.55) 62%);
    padding: 0 .15em;
}

.grid-credits {
    max-width: 60ch;
    margin: 1.6rem auto 0;
    text-align: left;
    border: 1.5px solid rgba(41,45,46,.18);
    border-radius: 6px;
    background: rgba(255,255,255,.5);
    overflow: hidden;
}
.grid-credits__head {
    padding: .85rem 1.1rem;
    font-family: var(--font-display);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-grigio);
    border-bottom: 1px dashed rgba(41,45,46,.18);
}
.grid-credits__body {
    padding: 1.1rem;
}
.grid-credits__list {
    margin: 0;
    display: grid;
    gap: .8rem;
}
.grid-credits__list > div {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: .8rem 1.2rem;
    align-items: baseline;
}
.grid-credits__list dt {
    font-family: var(--font-display);
    font-size: .65rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6b6e6f;
    margin: 0;
}
.grid-credits__list dd {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--color-grigio);
    margin: 0;
}
.grid-credits__foot {
    margin: 1.1rem 0 0;
    padding-top: .9rem;
    border-top: 1px dashed rgba(41,45,46,.18);
    font-size: .82rem;
    line-height: 1.55;
    color: #6b6e6f;
    font-style: italic;
    text-align: center;
}
@media (max-width: 600px) {
    .grid-credits__list > div {
        grid-template-columns: 1fr;
        gap: .15rem;
    }
}
.giochi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.6rem;
    max-width: 1200px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .giochi-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
    .giochi-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Quando c'è un solo gioco la card non occupa tutto lo schermo */
.giochi-grid--single {
    grid-template-columns: 1fr !important;
    max-width: 560px;
}
@media (min-width: 768px) {
    .giochi-grid--single { max-width: 640px; }
}

.game-card {
    --card-accent: var(--color-azzurro);
    background: var(--color-bianco);
    border: 2px solid var(--color-grigio);
    border-radius: 6px;
    padding: 1.4rem;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 6px 0 var(--color-grigio);
    outline: none;
}
.game-card:hover,
.game-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 10px 0 var(--color-grigio), 0 16px 32px rgba(28,157,221,.18);
}
.game-card:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--color-grigio); }

.game-card--azzurro { --card-accent: var(--color-azzurro); }
.game-card--verde   { --card-accent: var(--color-verde); }
.game-card--giallo  { --card-accent: var(--color-giallo); }
.game-card--grigio  { --card-accent: var(--color-grigio); }

.game-card__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed rgba(41,45,46,.15);
    padding-bottom: .8rem;
}
.game-card__num {
    font-family: var(--font-display);
    font-size: .8rem;
    color: var(--color-bianco);
    background: var(--card-accent);
    padding: .3rem .6rem;
    border-radius: 3px;
    letter-spacing: .12em;
}
.game-card--giallo .game-card__num { color: var(--color-grigio); }
.game-card__tag {
    font-family: var(--font-display);
    font-size: .65rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6b6e6f;
}

.game-card__art {
    background:
        radial-gradient(ellipse at center, rgba(0,0,0,.04), transparent 70%),
        repeating-linear-gradient(45deg, #fafaf8 0 8px, #f3f4f5 8px 16px);
    border-radius: 4px;
    padding: 1rem;
    aspect-ratio: 5/4;
    display: grid;
    place-items: center;
}
.game-card__art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .35s cubic-bezier(.2,.7,.25,1);
}
.game-card:hover .game-card__art img,
.game-card:focus-visible .game-card__art img {
    transform: translateY(-4px) rotate(-2deg) scale(1.04);
}

.game-card__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--color-grigio);
    text-transform: uppercase;
    margin: 0 0 .5rem;
}
.game-card__atmo {
    font-size: .92rem;
    line-height: 1.55;
    color: #4a4d4e;
    margin: 0;
    text-wrap: pretty;
}

.game-card__cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: .8rem;
    border-top: 2px dashed rgba(41,45,46,.15);
}
.game-card__btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-bianco);
    background: var(--card-accent);
    padding: .55rem .9rem;
    border-radius: 3px;
    transition: gap .2s, padding-right .2s;
}
.game-card--giallo .game-card__btn { color: var(--color-grigio); }
.game-card:hover .game-card__btn,
.game-card:focus-visible .game-card__btn {
    gap: .8rem;
    padding-right: 1.1rem;
}
.game-card__levels {
    font-family: var(--font-display);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #6b6e6f;
}

/* ─────────────────────────────────────────────
   MODAL PLAYER
───────────────────────────────────────────── */
.game-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}
.game-modal.is-open { display: flex; }
.game-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(6px);
    animation: modalFade .25s ease forwards;
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.game-modal__panel {
    position: relative;
    z-index: 2;
    background: var(--color-grigio);
    color: var(--color-bianco);
    border: 2px solid var(--color-bianco);
    border-radius: 8px;
    width: 100%;
    max-width: 1100px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 12px 0 rgba(28,157,221,.4), 0 30px 80px rgba(0,0,0,.6);
    animation: modalIn .35s cubic-bezier(.2,.7,.25,1) forwards;
    transform: translateY(20px);
    opacity: 0;
}
@keyframes modalIn { to { transform: translateY(0); opacity: 1; } }

.game-modal__head {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
    background: linear-gradient(180deg, #292D2E, #1f2223);
}
.game-modal__indicator {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--font-display);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-giallo);
}
.rec-dot {
    width: 10px; height: 10px;
    background: #ff3a3a;
    border-radius: 50%;
    animation: recBlink 1.2s ease-in-out infinite;
}
@keyframes recBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .4; transform: scale(.8); }
}
.game-modal__title {
    flex: 1;
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.3;
    color: var(--color-bianco);
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0;
    font-weight: 400;
}
.game-modal__close {
    background: transparent;
    border: 1px solid rgba(255,255,255,.25);
    color: var(--color-bianco);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.game-modal__close:hover {
    background: var(--color-giallo);
    color: var(--color-grigio);
    border-color: var(--color-giallo);
}

.game-modal__stage {
    position: relative;
    background: black;
    flex: 1;
    min-height: 0;
}
.game-modal__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: black;
}
.game-modal__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* progress dots livelli */
.game-modal__progress {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
    background: rgba(0,0,0,.55);
    padding: 6px 10px;
    border-radius: 999px;
}
.game-modal__progress span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.3);
    transition: background .3s, transform .3s;
}
.game-modal__progress span.is-active {
    background: var(--color-giallo);
    transform: scale(1.3);
    box-shadow: 0 0 0 3px rgba(240,200,40,.25);
}

/* CHOICE BAR (ultimi 3s) */
.choice-bar {
    position: absolute;
    bottom: 5%;
    left: 5%;
    right: 5%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.2rem;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .4s, transform .4s;
}
.choice-bar.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.choice-btn {
    flex: 1;
    max-width: 42%;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1.2rem;
    background: rgba(0,0,0,.78);
    border: 2px solid var(--color-bianco);
    border-radius: 6px;
    color: var(--color-bianco);
    font-family: var(--font-display);
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, transform .2s, border-color .2s, color .2s;
    text-align: left;
    backdrop-filter: blur(6px);
}
.choice-btn--A { border-color: var(--color-azzurro); }
.choice-btn--B { border-color: var(--color-giallo); }
.choice-btn:hover {
    transform: translateY(-3px);
}
.choice-btn--A:hover { background: var(--color-azzurro); color: var(--color-bianco); }
.choice-btn--B:hover { background: var(--color-giallo); color: var(--color-grigio); }
.choice-btn__key {
    width: 38px; height: 38px;
    display: grid;
    place-items: center;
    background: var(--color-bianco);
    color: var(--color-grigio);
    border-radius: 4px;
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
}
.choice-btn--A .choice-btn__key { background: var(--color-azzurro); color: var(--color-bianco); }
.choice-btn--B .choice-btn__key { background: var(--color-giallo); color: var(--color-grigio); }
.choice-btn__name {
    font-size: .92rem;
    letter-spacing: .04em;
    line-height: 1.25;
}
.choice-vs {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-bianco);
    align-self: center;
    opacity: .55;
    letter-spacing: .15em;
}
@media (max-width: 600px) {
    .choice-bar { gap: .5rem; flex-direction: column; bottom: 4%; }
    .choice-btn { max-width: 100%; padding: .7rem .9rem; }
    .choice-vs { display: none; }
    .choice-btn__name { font-size: .82rem; }
}

/* SCHERMATA FINE */
.game-end {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1f2223, #292D2E);
    z-index: 6;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    overflow: hidden;
}
.game-end.is-visible { display: flex; animation: modalFade .4s ease both; }
.game-end::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(28,157,221,.2), transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(240,200,40,.18), transparent 55%);
    pointer-events: none;
}
.game-end__inner {
    position: relative;
    z-index: 2;
    max-width: 540px;
}
.game-end__badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: .72rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--color-grigio);
    background: var(--color-giallo);
    padding: .45rem 1rem;
    border-radius: 999px;
    margin-bottom: 1.4rem;
}
.game-end__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    line-height: 1.22;
    color: var(--color-bianco);
    text-transform: uppercase;
    margin: 0 0 1rem;
}
.game-end__title em {
    font-style: italic;
    color: var(--color-giallo);
    text-transform: none;
}
.game-end__sub {
    font-size: 1rem;
    line-height: 1.65;
    color: rgba(255,255,255,.78);
    margin: 0 0 2rem;
    text-wrap: pretty;
}
.game-end__counter {
    font-family: var(--font-display);
    font-size: .85rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}
.game-end__counter strong {
    font-size: 1.4rem;
    color: var(--color-giallo);
    min-width: 1.6em;
    display: inline-block;
}
.game-end__skip {
    background: transparent;
    border: 1px solid rgba(255,255,255,.4);
    color: var(--color-bianco);
    font-family: var(--font-display);
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: .55rem .9rem;
    border-radius: 3px;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
}
.game-end__skip:hover {
    background: var(--color-giallo);
    color: var(--color-grigio);
    border-color: var(--color-giallo);
}
.game-end__bar {
    margin-top: 1.4rem;
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,.12);
    border-radius: 999px;
    overflow: hidden;
}
.game-end__bar span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-azzurro), var(--color-giallo));
    transform-origin: right;
    transform: scaleX(1);
    transition: transform 1s linear;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — breakpoint consolidati
───────────────────────────────────────────── */

/* Tablet & sotto */
@media (max-width: 991.98px) {
    .giochi-hero { padding: 7rem 0 4.5rem; }
    .giochi-rules { padding: 4.5rem 0; }
    .giochi-grid-section { padding: 4rem 0 5rem; }
    .giochi-grid-header { margin-bottom: 2.5rem; }

    .giochi-deco--dice { width: 70px; top: 12%; left: 4%; }
    .giochi-deco--pad  { width: 95px;  top: 14%; right: 4%; }

    .rules-headline br { display: none; }
    .rules-headline { max-width: 28ch; }
}

/* Mobile */
@media (max-width: 767.98px) {
    .giochi-hero {
        padding: 7rem 0 3.5rem;
    }
    .giochi-headline { margin: .8rem 0 1.1rem; }
    .giochi-lead { margin-bottom: 1.8rem; padding: 0 .25rem; }
    .insert-coin {
        gap: .6rem;
        font-size: .68rem;
        letter-spacing: .18em;
        padding: .55rem 1rem;
    }

    /* deco fluttuanti: nascondi i dadi (rimangono solo lateralmente sotto la headline) */
    .giochi-deco--dice {
        width: 50px;
        top: auto;
        bottom: 8%;
        left: 4%;
    }
    .giochi-deco--pad {
        width: 70px;
        top: auto;
        bottom: 6%;
        right: 4%;
    }

    .giochi-rules { padding: 3.5rem 0; }
    .giochi-grid-section { padding: 3rem 0 4rem; }

    .rules-step { gap: 1rem; padding: 1.2rem 0; }
    .rules-step__num { width: 38px; height: 38px; font-size: .85rem; }
    .rules-step h3 { font-size: 1.05rem; }
    .rules-step p  { font-size: .95rem; }

    .game-card { padding: 1.1rem; gap: .85rem; }
    .game-card__title { font-size: 1.1rem; }
    .game-card__atmo  { font-size: .88rem; }
    .game-card__cta { flex-wrap: wrap; gap: .6rem; }
    .game-card__btn { padding: .7rem 1rem; font-size: .8rem; min-height: 40px; }
    .game-card__levels { font-size: .62rem; }

    /* Modal */
    .game-modal { padding: 0; }
    .game-modal__panel {
        max-height: 100vh;
        max-height: 100dvh;
        height: 100%;
        border-width: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .game-modal__head { padding: .7rem .9rem; gap: .6rem; }
    .game-modal__indicator { font-size: .58rem; letter-spacing: .15em; }
    .game-modal__title { font-size: .8rem; }
    .game-modal__close { width: 38px; height: 38px; }

    .game-modal__stage {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .game-modal__progress {
        top: 8px;
        padding: 4px 8px;
    }
    .game-modal__progress span { width: 6px; height: 6px; }

    /* Game end */
    .game-end { padding: 1.4rem; }
    .game-end__title { margin-bottom: .8rem; }
    .game-end__sub   { margin-bottom: 1.4rem; font-size: .95rem; }
    .game-end__counter { font-size: .75rem; gap: .8rem; }
    .game-end__counter strong { font-size: 1.2rem; }
}

/* Smartphone piccoli */
@media (max-width: 479.98px) {
    .giochi-hero { padding: 10rem 0 3rem; }
    .giochi-deco--dice { width: 42px; bottom: 0%; left: 3%; }
    .giochi-deco--pad  { width: 60px; bottom: 0%; right: 3%; }

    .insert-coin {
        font-size: .62rem;
        padding: .5rem .8rem;
        gap: .5rem;
    }
    .insert-coin__dot { width: 6px; height: 6px; }

    .game-card__top { flex-wrap: wrap; gap: .5rem; }
    .game-card__num { font-size: .72rem; }
    .game-card__tag { font-size: .58rem; }
}

/* Hover handoff: solo dispositivi con vero hover */
@media (hover: none) {
    .game-card:hover { transform: none; box-shadow: 0 6px 0 var(--color-grigio); }
    .game-card:hover .game-card__art img { transform: none; }
    .game-card:hover .game-card__btn { gap: .5rem; padding-right: .9rem; }
}