/* =========================================================
   COME SI GIOCA
   ========================================================= */

.howto-flow {
    display: grid;
    gap: 22px;
}

.howto-step {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 30px;

    padding: 34px;

    border: 1px solid var(--line);
    border-radius: var(--radius);

    background: rgba(255,255,255,.025);
}

.howto-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    border: 1px solid rgba(216,166,77,.45);
    border-radius: 50%;

    color: var(--gold-light);

    font-family: Georgia, serif;
    font-size: 1.8rem;
}

.howto-step h3 {
    margin: 0 0 10px;

    font-family: Georgia, serif;
    font-size: 1.65rem;
}

.howto-step p {
    margin: 0;

    color: var(--muted);

    line-height: 1.7;
}

.rule-note {
    margin-top: 45px;
    padding: 30px;

    border-left: 4px solid var(--gold);

    background: rgba(216,166,77,.07);
}

.rule-note strong {
    color: var(--gold-light);
}

.rule-note p {
    margin-bottom: 0;
}

.score-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.score-card {
    padding: 28px;

    border: 1px solid rgba(9,35,28,.15);
    border-radius: var(--radius);

    background: rgba(255,255,255,.35);
}

.score-card strong {
    display: block;

    margin-bottom: 8px;

    font-family: Georgia, serif;
    font-size: 1.35rem;
}

.accuse-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.accuse-card {
    padding: 30px;

    border: 1px solid var(--line);
    border-radius: var(--radius);

    background: rgba(255,255,255,.025);
}

.accuse-card h3 {
    margin-top: 0;

    font-family: Georgia, serif;
    color: var(--gold-light);
}

.accuse-card p {
    color: var(--muted);
}

@media (max-width: 900px) {

    .score-grid,
    .accuse-grid {
        grid-template-columns: 1fr 1fr;
    }

}

@media (max-width: 560px) {

    .howto-step {
        grid-template-columns: 1fr;
    }

    .score-grid,
    .accuse-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================================================
   HERO — COME SI GIOCA
   ========================================================= */

.page-come-si-gioca .howto-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.page-come-si-gioca .page-hero-grid {
    grid-template-columns:
        minmax(0, .82fr)
        minmax(0, 1.18fr);

    gap: 22px;
    align-items: center;
}

.page-come-si-gioca .howto-hero-copy {
    position: relative;
    z-index: 4;
}

.page-come-si-gioca .howto-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 32px;
}

.page-come-si-gioca .howto-hero-facts span {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 15px;

    border: 1px solid rgba(216,166,77,.28);
    border-radius: 999px;

    background: rgba(6,24,20,.42);

    color: #d4ded7;

    font-size: .92rem;
}

.page-come-si-gioca .howto-hero-facts strong {
    color: var(--gold-light);

    font-family: Georgia, serif;
    font-size: 1.15rem;
}


/* =========================================================
   HERO — ARTWORK LIBERO
   ========================================================= */

.page-come-si-gioca .page-emblem.howto-hero-visual {
    position: relative;
    z-index: 1;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    width: 128%;

    margin-left: -7%;
    margin-right: -21%;

    overflow: visible;
    isolation: isolate;
}

.page-come-si-gioca .howto-hero-frame {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: none;

    overflow: visible;

    border: 0;
    border-radius: 0;

    background: none;
    box-shadow: none;

    aspect-ratio: auto;
}

.page-come-si-gioca .howto-hero-art {
    display: block;

    width: 112%;
    max-width: none;
    height: auto;

    margin-left: -3%;

    border-radius: 0;

    object-fit: contain;

    filter:
        drop-shadow(
            0 38px 72px
            rgba(0,0,0,.30)
        );

    -webkit-mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.55) 8%,
            #000 20%,
            #000 100%
        );

    mask-image:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(0,0,0,.55) 8%,
            #000 20%,
            #000 100%
        );
}


/* =========================================================
   HERO — GLOW
   ========================================================= */

.page-come-si-gioca .howto-hero-glow {
    position: absolute;
    z-index: 1;

    inset: 6% -8%;

    pointer-events: none;

    opacity: .55;

    background:
        radial-gradient(
            ellipse at 62% 48%,
            rgba(255,210,111,.19) 0,
            rgba(216,166,77,.08) 30%,
            transparent 66%
        );

    filter: blur(26px);
}


/* =========================================================
   DESKTOP COMPATTO
   ========================================================= */

@media (max-width: 1100px) {

    .page-come-si-gioca .page-hero-grid {
        grid-template-columns:
            minmax(0, .90fr)
            minmax(0, 1.10fr);

        gap: 20px;
    }

    .page-come-si-gioca .page-emblem.howto-hero-visual {
        width: 118%;

        margin-left: -4%;
        margin-right: -14%;
    }

    .page-come-si-gioca .howto-hero-art {
        width: 108%;
    }

}


/* =========================================================
   TABLET / MOBILE — ARTWORK COME FONDALE
   ========================================================= */

@media (max-width: 900px) {

    .page-come-si-gioca .howto-hero {
        position: relative;

        min-height: 700px;

        padding-top: 90px;
        padding-bottom: 90px;
    }

    .page-come-si-gioca .page-hero-grid {
        position: relative;

        display: block;
    }

    .page-come-si-gioca .howto-hero-copy {
        position: relative;
        z-index: 5;

        max-width: 680px;
    }

    .page-come-si-gioca .page-emblem.howto-hero-visual {
        position: absolute;
        z-index: 0;

        top: -90px;
        right: -24px;
        bottom: -90px;
        left: -24px;

        width: auto;

        margin: 0;

        opacity: .52;

        overflow: hidden;
    }

    .page-come-si-gioca .howto-hero-frame {
        position: absolute;

        inset: 0;

        width: 100%;
        height: 100%;
    }

    .page-come-si-gioca .howto-hero-art {
        width: 100%;
        height: 100%;

        margin: 0;

        object-fit: cover;
        object-position: 69% center;

        filter: none;

        -webkit-mask-image: none;
        mask-image: none;
    }

    .page-come-si-gioca .page-emblem.howto-hero-visual::after {
        content: "";

        position: absolute;
        z-index: 3;

        inset: 0;

        pointer-events: none;

        background:
            linear-gradient(
                90deg,
                rgba(6,27,21,.98) 0%,
                rgba(6,27,21,.93) 28%,
                rgba(6,27,21,.66) 57%,
                rgba(6,27,21,.28) 100%
            ),
            linear-gradient(
                180deg,
                rgba(6,27,21,.50) 0%,
                transparent 30%,
                transparent 68%,
                rgba(6,27,21,.72) 100%
            );
    }

    .page-come-si-gioca .howto-hero-glow {
        opacity: .32;
    }

    .page-come-si-gioca .howto-hero-facts span {
        background: rgba(6,24,20,.72);
    }

}


/* =========================================================
   MOBILE PICCOLO
   ========================================================= */

@media (max-width: 560px) {

    .page-come-si-gioca .howto-hero {
        min-height: 650px;

        padding-top: 72px;
        padding-bottom: 72px;
    }

    .page-come-si-gioca .howto-hero h1 {
        font-size: clamp(2.75rem, 13vw, 4rem);
    }

    .page-come-si-gioca .howto-hero-facts {
        gap: 8px;

        margin-top: 26px;
    }

    .page-come-si-gioca .howto-hero-facts span {
        padding: 8px 11px;

        font-size: .82rem;
    }

    .page-come-si-gioca .page-emblem.howto-hero-visual {
        opacity: .43;
    }

    .page-come-si-gioca .howto-hero-art {
        object-position: 67% center;
    }

    .page-come-si-gioca .page-emblem.howto-hero-visual::after {
        background:
            linear-gradient(
                90deg,
                rgba(6,27,21,.97) 0%,
                rgba(6,27,21,.86) 48%,
                rgba(6,27,21,.46) 100%
            ),
            linear-gradient(
                180deg,
                rgba(6,27,21,.42) 0%,
                transparent 34%,
                rgba(6,27,21,.66) 100%
            );
    }

}



/* =========================================================
   HERO — BLEND V2
   immagine più ampia + fusione con lo sfondo
   ========================================================= */

@media (min-width: 1101px) {

    .page-come-si-gioca .page-hero-grid {
        grid-template-columns:
            minmax(0, .78fr)
            minmax(0, 1.22fr);

        gap: 8px;
    }

    .page-come-si-gioca .page-emblem.howto-hero-visual {
        width: 142%;

        margin-left: -10%;
        margin-right: -32%;
    }

    .page-come-si-gioca .howto-hero-frame {
        width: 100%;
        max-width: none;
    }

    .page-come-si-gioca .howto-hero-art {
        width: 118%;
        max-width: none;

        margin-left: -5%;

        transform: scale(1.035);
        transform-origin: 64% 50%;

        -webkit-mask-image:
            radial-gradient(
                ellipse 78% 88% at 63% 50%,
                #000 0%,
                #000 58%,
                rgba(0,0,0,.96) 68%,
                rgba(0,0,0,.72) 78%,
                rgba(0,0,0,.30) 90%,
                transparent 100%
            );

        mask-image:
            radial-gradient(
                ellipse 78% 88% at 63% 50%,
                #000 0%,
                #000 58%,
                rgba(0,0,0,.96) 68%,
                rgba(0,0,0,.72) 78%,
                rgba(0,0,0,.30) 90%,
                transparent 100%
            );
    }

    .page-come-si-gioca .howto-hero-glow {
        inset: -2% -18% -2% -8%;

        opacity: .48;

        background:
            radial-gradient(
                ellipse at 64% 48%,
                rgba(255,210,111,.18) 0%,
                rgba(216,166,77,.07) 34%,
                transparent 70%
            );

        filter: blur(34px);
    }

}


/* =========================================================
   HERO — BLEND DESKTOP COMPATTO
   ========================================================= */

@media (min-width: 901px) and (max-width: 1100px) {

    .page-come-si-gioca .page-emblem.howto-hero-visual {
        width: 126%;

        margin-left: -7%;
        margin-right: -19%;
    }

    .page-come-si-gioca .howto-hero-art {
        width: 114%;

        margin-left: -4%;

        -webkit-mask-image:
            radial-gradient(
                ellipse 80% 90% at 62% 50%,
                #000 0%,
                #000 58%,
                rgba(0,0,0,.75) 80%,
                transparent 100%
            );

        mask-image:
            radial-gradient(
                ellipse 80% 90% at 62% 50%,
                #000 0%,
                #000 58%,
                rgba(0,0,0,.75) 80%,
                transparent 100%
            );
    }

}

/* =========================================================
   HERO — NATIVE ALPHA V4
   usa esclusivamente la trasparenza dell'asset
   ========================================================= */

@media (min-width: 901px) {

    .page-come-si-gioca .howto-hero-art {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .page-come-si-gioca .page-emblem.howto-hero-visual::before {
        content: none;
        display: none;
    }

}



/* =========================================================
   HERO — CINEMA MOTION V1
   ingresso + floating + breathing + glow
   ========================================================= */

.page-come-si-gioca .howto-hero-copy {
    animation:
        howtoCopyEnter .85s
        cubic-bezier(.22,.72,.22,1)
        both;
}

.page-come-si-gioca .page-emblem.howto-hero-visual {
    will-change: transform, opacity;

    animation:
        howtoVisualEnter .95s
        cubic-bezier(.22,.72,.22,1)
        both,

        howtoVisualFloat 8s
        ease-in-out
        1s
        infinite;
}

.page-come-si-gioca .howto-hero-frame {
    will-change: transform;

    animation:
        howtoHeroBreathe 11s
        ease-in-out
        1.2s
        infinite;
}

.page-come-si-gioca .howto-hero-glow {
    will-change: opacity, transform, filter;

    animation:
        howtoGlowPulse 6.5s
        ease-in-out
        1s
        infinite;
}


/* =========================================================
   ENTRATA TESTO
   ========================================================= */

@keyframes howtoCopyEnter {

    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

}


/* =========================================================
   ENTRATA VISUAL
   ========================================================= */

@keyframes howtoVisualEnter {

    0% {
        opacity: 0;
        transform:
            translate3d(22px, 10px, 0)
            scale(.975);
    }

    100% {
        opacity: 1;
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

}


/* =========================================================
   FLOATING LENTO
   ========================================================= */

@keyframes howtoVisualFloat {

    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            rotate(.01deg);
    }

    50% {
        transform:
            translate3d(0, -6px, 0)
            rotate(.01deg);
    }

}


/* =========================================================
   BREATHING
   ========================================================= */

@keyframes howtoHeroBreathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.012);
    }

}


/* =========================================================
   GLOW DORATO
   ========================================================= */

@keyframes howtoGlowPulse {

    0%,
    100% {
        opacity: .40;
        transform: scale(.985);
        filter: blur(30px);
    }

    50% {
        opacity: .62;
        transform: scale(1.035);
        filter: blur(38px);
    }

}


/* =========================================================
   TABLET / MOBILE
   movimento più controllato
   ========================================================= */

@media (max-width: 900px) {

    .page-come-si-gioca .page-emblem.howto-hero-visual {
        animation:
            howtoMobileVisualEnter .8s
            cubic-bezier(.22,.72,.22,1)
            both;
    }

    .page-come-si-gioca .howto-hero-frame {
        animation:
            howtoMobileBreathe 13s
            ease-in-out
            1s
            infinite;
    }

    .page-come-si-gioca .howto-hero-glow {
        animation:
            howtoMobileGlow 8s
            ease-in-out
            1s
            infinite;
    }

}

@keyframes howtoMobileVisualEnter {

    0% {
        opacity: 0;
        transform: scale(1.025);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }

}

@keyframes howtoMobileBreathe {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.008);
    }

}

@keyframes howtoMobileGlow {

    0%,
    100% {
        opacity: .26;
        transform: scale(1);
    }

    50% {
        opacity: .38;
        transform: scale(1.025);
    }

}


/* =========================================================
   ACCESSIBILITA — RIDUZIONE MOVIMENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .page-come-si-gioca .howto-hero-copy,
    .page-come-si-gioca .page-emblem.howto-hero-visual,
    .page-come-si-gioca .howto-hero-frame,
    .page-come-si-gioca .howto-hero-glow {
        animation: none !important;
        transform: none;
    }

}


/* =========================================================
   HERO — MOBILE / TABLET FLOAT V2
   ========================================================= */

@media (max-width: 900px) {

    .page-come-si-gioca .page-emblem.howto-hero-visual {
        animation:
            howtoMobileVisualEnter .8s
            cubic-bezier(.22,.72,.22,1)
            both,

            howtoMobileFloat 10s
            ease-in-out
            1s
            infinite;
    }

}

@keyframes howtoMobileFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -4px, 0);
    }

}


/* movimento ancora più discreto sui telefoni piccoli */

@media (max-width: 560px) {

    .page-come-si-gioca .page-emblem.howto-hero-visual {
        animation:
            howtoMobileVisualEnter .8s
            cubic-bezier(.22,.72,.22,1)
            both,

            howtoMobileFloatSmall 11s
            ease-in-out
            1s
            infinite;
    }

}

@keyframes howtoMobileFloatSmall {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -3px, 0);
    }

}


/* =========================================================
   DAL MAZZO AL TAVOLO — FLOW V1
   ========================================================= */

.page-come-si-gioca .howto-basics {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(216,166,77,.07),
            transparent 30%
        );
}

.page-come-si-gioca .howto-basics-heading {
    max-width: 760px;
}

.page-come-si-gioca .howto-flow {
    position: relative;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.page-come-si-gioca .howto-flow::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 50%;
    left: 8%;
    right: 8%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(216,166,77,.18),
            rgba(216,166,77,.36),
            rgba(216,166,77,.18),
            transparent
        );
}

.page-come-si-gioca .howto-step {
    position: relative;
    z-index: 1;

    grid-template-columns: 82px 1fr;
    gap: 24px;

    min-height: 230px;
    padding: 32px;

    border: 1px solid rgba(216,166,77,.24);
    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.038),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 22px 55px rgba(0,0,0,.12);

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.page-come-si-gioca .howto-step:hover {
    transform: translateY(-3px);

    border-color: rgba(216,166,77,.46);

    background:
        linear-gradient(
            145deg,
            rgba(216,166,77,.07),
            rgba(255,255,255,.018)
        );
}

.page-come-si-gioca .howto-number {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    border: 1px solid rgba(216,166,77,.48);

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(240,206,130,.12),
            rgba(216,166,77,.035) 55%,
            transparent 75%
        );

    color: var(--gold-light);

    font-size: 1.35rem;
}

.page-come-si-gioca .howto-step-content {
    min-width: 0;
}

.page-come-si-gioca .howto-step-label {
    margin: 0 0 7px;

    color: var(--gold);

    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.page-come-si-gioca .howto-step h3 {
    margin: 0 0 12px;

    font-size: 1.55rem;
}

.page-come-si-gioca .howto-step p:not(.howto-step-label) {
    margin: 0;

    max-width: 520px;
}

.page-come-si-gioca .howto-priority-note {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 20px;
    align-items: center;

    margin-top: 32px;
}

.page-come-si-gioca .rule-note-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(216,166,77,.50);
    border-radius: 50%;

    color: var(--gold-light);

    font-family: Georgia, serif;
    font-size: 1.35rem;
}


/* =========================================================
   FLOW — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .page-come-si-gioca .howto-flow {
        grid-template-columns: 1fr;
    }

    .page-come-si-gioca .howto-flow::before {
        top: 6%;
        bottom: 6%;
        left: 31px;

        width: 1px;
        height: auto;

        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(216,166,77,.30),
                rgba(216,166,77,.30),
                transparent
            );
    }

}


/* =========================================================
   FLOW — MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .page-come-si-gioca .howto-step {
        grid-template-columns: 58px 1fr;
        gap: 16px;

        min-height: 0;

        padding: 24px 20px;
    }

    .page-come-si-gioca .howto-number {
        width: 50px;
        height: 50px;

        font-size: 1rem;
    }

    .page-come-si-gioca .howto-flow::before {
        left: 24px;
    }

    .page-come-si-gioca .howto-priority-note {
        grid-template-columns: 1fr;

        padding: 24px;
    }

}


/* =========================================================
   ASSO E SCOPA — SPECIAL RULES V1
   ========================================================= */

.page-come-si-gioca .howto-special {
    position: relative;
    overflow: hidden;
}

.page-come-si-gioca .howto-special::before {
    content: "";

    position: absolute;
    top: -180px;
    right: -140px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(216,166,77,.12) 0%,
            rgba(216,166,77,.04) 38%,
            transparent 70%
        );

    pointer-events: none;
}

.page-come-si-gioca .howto-special-heading {
    position: relative;
    z-index: 1;

    max-width: 760px;
    margin-bottom: 44px;
}

.page-come-si-gioca .special-rules-main {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, .92fr);

    gap: 24px;
}

.page-come-si-gioca .special-rule {
    position: relative;

    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 28px;

    min-height: 310px;
    padding: 38px;

    border-radius: 26px;

    overflow: hidden;
}

.page-come-si-gioca .special-rule-ace {
    border: 1px solid rgba(216,166,77,.36);

    color: var(--ivory);

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(238,197,104,.16),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #0b3328,
            #061f19 72%
        );

    box-shadow:
        0 28px 70px rgba(0,0,0,.17);
}

.page-come-si-gioca .special-rule-scopa {
    border: 1px solid rgba(33,58,48,.17);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.72),
            rgba(255,255,255,.34)
        );

    box-shadow:
        0 22px 60px rgba(30,45,38,.07);
}

.page-come-si-gioca .special-rule-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 72px;
    height: 72px;

    border: 1px solid rgba(216,166,77,.55);
    border-radius: 50%;

    color: var(--gold);

    font-family: Georgia, serif;
    font-size: 2rem;
    line-height: 1;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(239,205,126,.16),
            transparent 66%
        );
}

.page-come-si-gioca .special-rule-kicker {
    margin: 5px 0 10px;

    color: var(--gold);

    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.page-come-si-gioca .special-rule h3 {
    margin: 0 0 20px;

    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 2.5vw, 2.65rem);
    line-height: 1.08;
}

.page-come-si-gioca .special-rule-ace h3 {
    color: var(--ivory);
}

.page-come-si-gioca .special-rule-scopa h3 {
    color: #13271f;
}

.page-come-si-gioca .special-rule-copy > p:not(.special-rule-kicker) {
    max-width: 520px;

    margin: 0 0 15px;

    font-size: 1rem;
    line-height: 1.75;
}

.page-come-si-gioca .special-rule-ace
.special-rule-copy > p:not(.special-rule-kicker) {
    color: rgba(255,250,238,.84);
}

.page-come-si-gioca .special-rule-detail {
    padding-top: 15px;

    border-top: 1px solid rgba(216,166,77,.22);
}

.page-come-si-gioca .special-rules-exceptions {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-top: 24px;

    border-top: 1px solid rgba(28,55,44,.14);
    border-bottom: 1px solid rgba(28,55,44,.14);
}

.page-come-si-gioca .special-rules-exceptions article {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 16px;

    padding: 30px 28px;
}

.page-come-si-gioca .special-rules-exceptions article + article {
    border-left: 1px solid rgba(28,55,44,.14);
}

.page-come-si-gioca .special-exception-number {
    color: var(--gold);

    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .10em;
}

.page-come-si-gioca .special-rules-exceptions h3 {
    margin: 0 0 9px;

    color: #13271f;

    font-family: Georgia, serif;
    font-size: 1.18rem;
}

.page-come-si-gioca .special-rules-exceptions p {
    margin: 0;

    color: rgba(19,39,31,.76);

    line-height: 1.65;
}


/* =========================================================
   ASSO E SCOPA — TABLET
   ========================================================= */

@media (max-width: 900px) {

    .page-come-si-gioca .special-rules-main {
        grid-template-columns: 1fr;
    }

    .page-come-si-gioca .special-rule {
        min-height: 0;
    }

    .page-come-si-gioca .special-rules-exceptions {
        grid-template-columns: 1fr;
    }

    .page-come-si-gioca
    .special-rules-exceptions article + article {
        border-left: 0;
        border-top: 1px solid rgba(28,55,44,.14);
    }

}


/* =========================================================
   ASSO E SCOPA — MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .page-come-si-gioca .howto-special-heading {
        margin-bottom: 30px;
    }

    .page-come-si-gioca .special-rule {
        grid-template-columns: 1fr;

        gap: 20px;

        padding: 28px 24px;

        border-radius: 20px;
    }

    .page-come-si-gioca .special-rule-symbol {
        width: 56px;
        height: 56px;

        font-size: 1.55rem;
    }

    .page-come-si-gioca .special-rules-exceptions article {
        padding: 24px 4px;
    }

}


/* =========================================================
   ASSO E SCOPA — TITLE CONTRAST FIX
   ========================================================= */

.page-come-si-gioca .special-rule-ace h3 {
    color: #fff7e8;
}



/* =========================================================
   ACCUSE — V1
   ========================================================= */

.page-come-si-gioca .howto-accuse {
    position: relative;
    overflow: hidden;
}

.page-come-si-gioca .howto-accuse::before {
    content: "";

    position: absolute;
    top: 10%;
    left: -180px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(216,166,77,.08) 0%,
            rgba(216,166,77,.025) 42%,
            transparent 70%
        );

    pointer-events: none;
}

.page-come-si-gioca .howto-accuse-heading {
    position: relative;
    z-index: 1;

    max-width: 780px;
}


/* =========================================================
   PROCEDURA
   ========================================================= */

.page-come-si-gioca .accuse-procedure {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(220px, .72fr)
        minmax(0, 1.8fr);

    gap: 34px;

    margin-bottom: 30px;
    padding: 32px 36px;

    border-top: 1px solid rgba(216,166,77,.32);
    border-bottom: 1px solid rgba(216,166,77,.22);

    background:
        linear-gradient(
            90deg,
            rgba(216,166,77,.055),
            transparent 65%
        );
}

.page-come-si-gioca .accuse-procedure-kicker,
.page-come-si-gioca .accuse-note-kicker {
    margin: 0 0 9px;

    color: var(--gold);

    font-size: .73rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.page-come-si-gioca .accuse-procedure-intro h3 {
    margin: 0;

    color: var(--ivory);

    font-family: Georgia, serif;
    font-size: clamp(1.65rem, 2.3vw, 2.25rem);
    line-height: 1.08;
}

.page-come-si-gioca .accuse-procedure-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}

.page-come-si-gioca .accuse-procedure-steps li {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 13px;

    padding: 4px 22px;

    border-left: 1px solid rgba(216,166,77,.18);
}

.page-come-si-gioca .accuse-procedure-steps li > span {
    color: var(--gold);

    font-size: .70rem;
    font-weight: 800;
    letter-spacing: .08em;
}

.page-come-si-gioca .accuse-procedure-steps strong {
    display: block;

    margin-bottom: 7px;

    color: var(--ivory);

    font-family: Georgia, serif;
    font-size: 1.05rem;
}

.page-come-si-gioca .accuse-procedure-steps p {
    margin: 0;

    color: rgba(255,250,238,.68);

    font-size: .92rem;
    line-height: 1.6;
}


/* =========================================================
   COMBINAZIONI
   ========================================================= */

.page-come-si-gioca .accuse-combinations {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
}

.page-come-si-gioca .accuse-combo {
    position: relative;

    min-height: 290px;
    padding: 30px 26px 26px;

    border: 1px solid rgba(216,166,77,.22);
    border-radius: 22px;

    background:
        linear-gradient(
            150deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );

    box-shadow:
        0 22px 60px rgba(0,0,0,.10);

    overflow: hidden;

    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.page-come-si-gioca .accuse-combo:hover {
    transform: translateY(-3px);

    border-color: rgba(216,166,77,.46);

    background:
        linear-gradient(
            150deg,
            rgba(216,166,77,.075),
            rgba(255,255,255,.014)
        );
}

.page-come-si-gioca .accuse-combo-score {
    margin-bottom: 34px;

    color: var(--gold-light);

    font-family: Georgia, serif;
    font-size: clamp(2.6rem, 4vw, 4rem);
    line-height: .9;
}

.page-come-si-gioca .accuse-combo-kicker {
    margin: 0 0 9px;

    color: var(--gold);

    font-size: .70rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.page-come-si-gioca .accuse-combo h3 {
    margin: 0 0 14px;

    color: var(--ivory);

    font-family: Georgia, serif;
    font-size: 1.38rem;
    line-height: 1.18;
}

.page-come-si-gioca .accuse-combo > p:last-child {
    margin: 0;

    color: rgba(255,250,238,.72);

    line-height: 1.65;
}

.page-come-si-gioca .accuse-combo-napoli {
    border-color: rgba(216,166,77,.48);

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(239,202,117,.13),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(216,166,77,.095),
            rgba(255,255,255,.018)
        );
}

.page-come-si-gioca .accuse-combo-napoli::after {
    content: "NAPOLI";

    position: absolute;
    right: -8px;
    bottom: 7px;

    color: rgba(216,166,77,.055);

    font-family: Georgia, serif;
    font-size: 3.3rem;
    font-weight: 700;
    letter-spacing: .04em;

    pointer-events: none;
}


/* =========================================================
   NOTA CUMULO
   ========================================================= */

.page-come-si-gioca .accuse-note {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 24px;

    max-width: 930px;

    margin-top: 28px;
    padding: 28px 30px;

    border: 1px solid rgba(216,166,77,.25);
    border-radius: 20px;

    background:
        rgba(0,0,0,.075);
}

.page-come-si-gioca .accuse-note-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    border: 1px solid rgba(216,166,77,.48);
    border-radius: 50%;

    color: var(--gold-light);

    font-family: Georgia, serif;
    font-size: 1.7rem;
}

.page-come-si-gioca .accuse-note h3 {
    margin: 0 0 12px;

    color: var(--ivory);

    font-family: Georgia, serif;
    font-size: 1.45rem;
}

.page-come-si-gioca .accuse-note p:not(.accuse-note-kicker) {
    margin: 0 0 10px;

    max-width: 760px;

    color: rgba(255,250,238,.72);

    line-height: 1.65;
}

.page-come-si-gioca
.accuse-note p:not(.accuse-note-kicker):last-child {
    margin-bottom: 0;
}


/* =========================================================
   ACCUSE — TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .page-come-si-gioca .accuse-procedure {
        grid-template-columns: 1fr;
    }

    .page-come-si-gioca .accuse-combinations {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 760px) {

    .page-come-si-gioca .accuse-procedure-steps {
        grid-template-columns: 1fr;
    }

    .page-come-si-gioca .accuse-procedure-steps li {
        padding: 18px 4px;

        border-left: 0;
        border-top: 1px solid rgba(216,166,77,.16);
    }

}


/* =========================================================
   ACCUSE — MOBILE
   ========================================================= */

@media (max-width: 560px) {

    .page-come-si-gioca .accuse-procedure {
        gap: 22px;

        padding: 26px 2px;
    }

    .page-come-si-gioca .accuse-combinations {
        grid-template-columns: 1fr;
    }

    .page-come-si-gioca .accuse-combo {
        min-height: 0;

        padding: 26px 22px;
    }

    .page-come-si-gioca .accuse-combo-score {
        margin-bottom: 24px;
    }

    .page-come-si-gioca .accuse-note {
        grid-template-columns: 1fr;

        padding: 24px;
    }

}


/* =========================================================
   PUNTEGGIO — V1
   ========================================================= */

.page-come-si-gioca .howto-score {
    position: relative;
    overflow: hidden;
}

.page-come-si-gioca .howto-score::before {
    content: "";

    position: absolute;
    top: -180px;
    right: -160px;

    width: 560px;
    height: 560px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(216,166,77,.12),
            rgba(216,166,77,.035) 40%,
            transparent 70%
        );

    pointer-events: none;
}

.page-come-si-gioca .howto-score-heading {
    position: relative;
    z-index: 1;

    max-width: 780px;
    margin-bottom: 42px;
}


/* PUNTI BASE */

.page-come-si-gioca .score-core {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 18px;
}

.page-come-si-gioca .score-rule {
    min-height: 245px;

    padding: 27px 25px;

    border: 1px solid rgba(30,55,45,.17);
    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.72),
            rgba(255,255,255,.30)
        );

    box-shadow:
        0 20px 50px rgba(24,43,35,.06);
}

.page-come-si-gioca .score-rule-primiera {
    border-color: rgba(216,166,77,.42);

    background:
        linear-gradient(
            145deg,
            rgba(245,224,176,.28),
            rgba(255,255,255,.46)
        );
}

.page-come-si-gioca .score-rule-type {
    margin: 0 0 22px;

    color: #b9852f;

    font-size: .70rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.page-come-si-gioca .score-rule-value {
    margin-bottom: 12px;

    color: #b9852f;

    font-family: Georgia, serif;
    font-size: 3.1rem;
    line-height: .9;
}

.page-come-si-gioca .score-rule h3 {
    margin: 0 0 12px;

    color: #13271f;

    font-family: Georgia, serif;
    font-size: 1.38rem;
}

.page-come-si-gioca .score-rule p:last-child {
    margin: 0;

    color: rgba(19,39,31,.74);

    line-height: 1.6;
}


/* SCOPA + ACCUSE */

.page-come-si-gioca .score-features {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 18px;

    margin-top: 20px;
}

.page-come-si-gioca .score-feature {
    display: grid;
    grid-template-columns: 76px 1fr;

    gap: 24px;
    align-items: center;

    min-height: 185px;

    padding: 30px;

    border-radius: 22px;
}

.page-come-si-gioca .score-feature-scopa {
    border: 1px solid rgba(216,166,77,.35);

    color: #fff8e9;

    background:
        linear-gradient(
            145deg,
            #0b3328,
            #06221b
        );

    box-shadow:
        0 24px 58px rgba(0,0,0,.13);
}

.page-come-si-gioca .score-feature-accuse {
    border: 1px solid rgba(30,55,45,.16);

    background:
        rgba(255,255,255,.42);
}

.page-come-si-gioca .score-feature-value,
.page-come-si-gioca .score-feature-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 68px;
    height: 68px;

    border: 1px solid rgba(216,166,77,.55);
    border-radius: 50%;

    color: #d8a64d;

    font-family: Georgia, serif;
    font-size: 1.75rem;
}

.page-come-si-gioca .score-feature-kicker {
    margin: 0 0 7px;

    color: #b9852f;

    font-size: .70rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.page-come-si-gioca .score-feature h3 {
    margin: 0 0 10px;

    font-family: Georgia, serif;
    font-size: 1.42rem;
}

.page-come-si-gioca .score-feature-scopa h3 {
    color: #fff8e9;
}

.page-come-si-gioca .score-feature-accuse h3 {
    color: #13271f;
}

.page-come-si-gioca .score-feature p:last-child {
    margin: 0;

    line-height: 1.6;
}

.page-come-si-gioca .score-feature-scopa p:last-child {
    color: rgba(255,248,233,.78);
}

.page-come-si-gioca .score-feature-accuse p:last-child {
    color: rgba(19,39,31,.74);
}


/* PARITA */

.page-come-si-gioca .score-tie-note {
    position: relative;
    z-index: 1;

    display: flex;
    gap: 24px;

    margin-top: 22px;
    padding: 20px 4px;

    border-bottom: 1px solid rgba(30,55,45,.14);
}

.page-come-si-gioca .score-tie-note strong {
    flex: 0 0 auto;

    color: #b9852f;
}

.page-come-si-gioca .score-tie-note p {
    margin: 0;

    color: rgba(19,39,31,.76);
}


/* TRAGUARDO 31 */

.page-come-si-gioca .score-goal {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 48px;
    align-items: center;

    margin-top: 34px;
    padding: 44px 50px;

    border: 1px solid rgba(216,166,77,.40);
    border-radius: 26px;

    color: #fff8e9;

    background:
        radial-gradient(
            circle at 12% 40%,
            rgba(216,166,77,.14),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #0b3328,
            #061f19 75%
        );

    box-shadow:
        0 28px 70px rgba(0,0,0,.15);
}

.page-come-si-gioca .score-goal-number {
    color: #e3b85f;

    font-family: Georgia, serif;
    font-size: clamp(5rem, 9vw, 8rem);
    font-weight: 700;
    line-height: .85;

    text-align: center;
}

.page-come-si-gioca .score-goal-kicker {
    margin: 0 0 9px;

    color: #d8a64d;

    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.page-come-si-gioca .score-goal h3 {
    margin: 0 0 17px;

    max-width: 600px;

    color: #fff8e9;

    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1.08;
}

.page-come-si-gioca .score-goal-copy > p:not(.score-goal-kicker) {
    margin: 0 0 12px;

    max-width: 720px;

    color: rgba(255,248,233,.78);

    line-height: 1.7;
}

.page-come-si-gioca
.score-goal-copy > p:not(.score-goal-kicker):last-child {
    margin-bottom: 0;
}


/* TABLET */

@media (max-width: 900px) {

    .page-come-si-gioca .score-core {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-come-si-gioca .score-features {
        grid-template-columns: 1fr;
    }

    .page-come-si-gioca .score-goal {
        grid-template-columns: 150px 1fr;

        gap: 30px;
        padding: 38px 34px;
    }

}


/* MOBILE */

@media (max-width: 560px) {

    .page-come-si-gioca .score-core {
        grid-template-columns: 1fr;
    }

    .page-come-si-gioca .score-rule {
        min-height: 0;
    }

    .page-come-si-gioca .score-feature {
        grid-template-columns: 1fr;

        gap: 18px;

        padding: 26px 22px;
    }

    .page-come-si-gioca .score-tie-note {
        display: block;
    }

    .page-come-si-gioca .score-tie-note strong {
        display: block;

        margin-bottom: 8px;
    }

    .page-come-si-gioca .score-goal {
        grid-template-columns: 1fr;

        gap: 24px;

        padding: 32px 24px;
    }

    .page-come-si-gioca .score-goal-number {
        text-align: left;
    }

}


/* =========================================================
   CTA FINALE — V1
   ========================================================= */

.page-come-si-gioca .howto-final-cta {
    position: relative;
    overflow: hidden;

    padding: 78px 0;

    background:
        radial-gradient(
            circle at 78% 48%,
            rgba(216,166,77,.11),
            transparent 30%
        ),
        #073126;
}

.page-come-si-gioca .howto-final-cta::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: 50%;
    right: -160px;

    transform: translateY(-50%);

    border: 1px solid rgba(216,166,77,.12);
    border-radius: 50%;

    box-shadow:
        0 0 0 44px rgba(216,166,77,.025),
        0 0 0 88px rgba(216,166,77,.018);

    pointer-events: none;
}

.page-come-si-gioca .howto-final-cta-inner {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(220px, .55fr);

    gap: 70px;
    align-items: center;

    max-width: 1040px;

    margin: 0 auto;
    padding: 44px 48px;

    border-top: 1px solid rgba(216,166,77,.26);
    border-bottom: 1px solid rgba(216,166,77,.26);
}

.page-come-si-gioca .howto-final-cta-copy {
    text-align: left;
}

.page-come-si-gioca .howto-final-cta-copy .eyebrow {
    margin-bottom: 14px;
}

.page-come-si-gioca .howto-final-cta-copy h2 {
    margin: 0 0 18px;

    color: #fff8e9;

    font-family: Georgia, serif;
    font-size: clamp(2.25rem, 4.2vw, 4rem);
    line-height: .98;
}

.page-come-si-gioca .howto-final-cta-copy h2 span {
    display: block;

    color: var(--gold-light);
}

.page-come-si-gioca .howto-final-cta-copy > p:last-child {
    max-width: 650px;

    margin: 0;

    color: rgba(255,248,233,.72);

    line-height: 1.7;
}

.page-come-si-gioca .howto-final-cta-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 13px;
}

.page-come-si-gioca .howto-final-cta-action .button {
    min-width: 210px;

    text-align: center;
}

.page-come-si-gioca .howto-final-cta-action span {
    color: rgba(255,248,233,.48);

    font-size: .78rem;
    letter-spacing: .04em;
}


/* TABLET */

@media (max-width: 800px) {

    .page-come-si-gioca .howto-final-cta-inner {
        grid-template-columns: 1fr;

        gap: 34px;

        padding: 38px 24px;
    }

}


/* MOBILE */

@media (max-width: 560px) {

    .page-come-si-gioca .howto-final-cta {
        padding: 58px 0;
    }

    .page-come-si-gioca .howto-final-cta-inner {
        padding-left: 4px;
        padding-right: 4px;
    }

    .page-come-si-gioca .howto-final-cta-action .button {
        width: 100%;
    }

}


/* =========================================================
   COME SI GIOCA V2 — HERO + GUIDE MAP
   ========================================================= */


/* ---------------------------------------------------------
   HERO V2
   --------------------------------------------------------- */

.page-come-si-gioca .howto-hero-v2 {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    min-height: 610px;

    background:
        radial-gradient(
            circle at 76% 46%,
            rgba(216,166,77,.12),
            transparent 34%
        ),
        #061f18;
}


.page-come-si-gioca .howto-hero-v2
.page-hero-grid {
    position: relative;

    min-height: 500px;

    grid-template-columns:
        minmax(0,.82fr)
        minmax(0,1.18fr);

    gap: 0;

    align-items: center;
}


.page-come-si-gioca .howto-hero-v2
.howto-hero-copy {
    position: relative;
    z-index: 5;
}


.page-come-si-gioca .howto-hero-v2
.page-emblem.howto-hero-visual {
    position: relative;

    z-index: 1;

    align-self: stretch;

    display: block;

    width: calc(100% + 230px);

    min-height: 500px;

    margin-left: -105px;
    margin-right: -125px;

    overflow: visible;

    opacity: 1;
}


.page-come-si-gioca .howto-hero-v2
.howto-hero-frame {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.page-come-si-gioca .howto-hero-v2
.howto-hero-picture {
    position: absolute;

    inset: -35px -40px -35px -85px;

    display: block;
}


.page-come-si-gioca .howto-hero-v2
.howto-hero-art {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    margin: 0;

    object-fit: contain;
    object-position: 67% center;

    transform: none;

    filter:
        drop-shadow(
            0 28px 54px
            rgba(0,0,0,.20)
        );

    -webkit-mask-image: none;
    mask-image: none;
}


.page-come-si-gioca .howto-hero-v2::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            #061f18 0%,
            rgba(6,31,24,.96) 31%,
            rgba(6,31,24,.48) 54%,
            rgba(6,31,24,.07) 78%,
            transparent 100%
        );
}


.page-come-si-gioca .howto-hero-v2
.howto-hero-glow {
    opacity: .38;

    inset: 3% -10%;

    background:
        radial-gradient(
            ellipse at 69% 49%,
            rgba(255,210,111,.17),
            rgba(216,166,77,.06) 34%,
            transparent 70%
        );
}


/* ---------------------------------------------------------
   GUIDE MAP
   --------------------------------------------------------- */

.page-come-si-gioca .howto-guide-map {
    position: relative;

    overflow: hidden;
    isolation: isolate;

    min-height: 470px;

    padding: 66px 0 62px;

    background:
        #061f18;

    scroll-margin-top: 118px;
}


.page-come-si-gioca .howto-guide-map-art {
    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;
}


.page-come-si-gioca .howto-guide-map-art picture,
.page-come-si-gioca .howto-guide-map-art img {
    display: block;

    width: 100%;
    height: 100%;
}


.page-come-si-gioca .howto-guide-map-art img {
    object-fit: cover;

    object-position:
        center 59%;

    opacity: .78;
}


.page-come-si-gioca .howto-guide-map::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(6,31,24,.76) 0%,
            rgba(6,31,24,.46) 42%,
            rgba(6,31,24,.64) 100%
        );
}


.page-come-si-gioca .howto-guide-map-inner {
    position: relative;
    z-index: 2;
}


.page-come-si-gioca .howto-guide-map-heading {
    max-width: 740px;

    margin: 0 auto 34px;

    text-align: center;
}


.page-come-si-gioca .howto-guide-map-heading h2 {
    margin: 7px 0 12px;

    color: var(--cream);

    font-family: Georgia,serif;

    font-size:
        clamp(2.25rem,4.2vw,3.7rem);

    line-height: 1.02;
}


.page-come-si-gioca .howto-guide-map-heading h2 span {
    color: var(--gold-light);
}


.page-come-si-gioca .howto-guide-map-heading
p:not(.eyebrow) {
    max-width: 610px;

    margin:
        0 auto;

    color:
        rgba(255,255,255,.77);

    line-height: 1.62;
}


.page-come-si-gioca .howto-guide-links {
    display: grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));

    gap: 10px;
}


.page-come-si-gioca .howto-guide-links a {
    display: flex;

    flex-direction: column;

    min-height: 150px;

    padding: 17px;

    border:
        1px solid rgba(216,166,77,.21);

    border-radius: 12px;

    background:
        rgba(5,30,23,.68);

    backdrop-filter:
        blur(3px);

    color:
        rgba(255,255,255,.82);

    text-decoration: none;

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease;
}


.page-come-si-gioca .howto-guide-number {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    margin-bottom: 14px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #f0bb4f,
            #bd8122
        );

    color: #073027;

    font-size: .78rem;
    font-weight: 900;
}


.page-come-si-gioca .howto-guide-links strong {
    color: var(--cream);

    font-family: Georgia,serif;

    font-size: 1.08rem;
}


.page-come-si-gioca .howto-guide-links small {
    display: block;

    margin-top: 6px;

    color:
        rgba(255,255,255,.66);

    font-size: .8rem;

    line-height: 1.4;
}


.page-come-si-gioca
#smazzata,

.page-come-si-gioca
#regole-speciali,

.page-come-si-gioca
#accuse,

.page-come-si-gioca
#punteggio,

.page-come-si-gioca
#obiettivo-31 {
    scroll-margin-top: 118px;
}


@media (hover: hover) {

    .page-come-si-gioca .howto-guide-links a:hover {
        transform:
            translateY(-3px);

        border-color:
            rgba(216,166,77,.42);

        background:
            rgba(9,49,38,.82);
    }

}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1000px) {

    .page-come-si-gioca .howto-guide-links {
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }

}


/* ---------------------------------------------------------
   MOBILE HERO
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .page-come-si-gioca .howto-hero-v2 {
        min-height: 720px;

        padding-top: 72px;
        padding-bottom: 58px;
    }


    .page-come-si-gioca .howto-hero-v2
    .page-hero-grid {
        display: block;

        min-height: 600px;
    }


    .page-come-si-gioca .howto-hero-v2
    .page-emblem.howto-hero-visual {
        position: absolute;

        inset:
            150px
            -80px
            -35px
            -80px;

        width: auto;

        min-height: 0;

        margin: 0;

        opacity: .74;
    }


    .page-come-si-gioca .howto-hero-v2
    .howto-hero-picture {
        inset: 0;
    }


    .page-come-si-gioca .howto-hero-v2
    .howto-hero-art {
        object-fit: contain;

        object-position:
            68% 72%;
    }


    .page-come-si-gioca .howto-hero-v2::after {
        background:
            linear-gradient(
                180deg,
                rgba(6,31,24,.83) 0%,
                rgba(6,31,24,.65) 43%,
                rgba(6,31,24,.48) 62%,
                #061f18 100%
            );
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .page-come-si-gioca .howto-guide-map {
        min-height: 0;

        padding: 52px 0;
    }


    .page-come-si-gioca .howto-guide-map-art img {
        object-position:
            center bottom;
    }


    .page-come-si-gioca .howto-guide-map::after {
        background:
            linear-gradient(
                180deg,
                rgba(6,31,24,.84),
                rgba(6,31,24,.58) 48%,
                rgba(6,31,24,.76)
            );
    }


    .page-come-si-gioca .howto-guide-map-heading {
        text-align: left;
    }


    .page-come-si-gioca .howto-guide-map-heading
    p:not(.eyebrow) {
        margin: 0;
    }


    .page-come-si-gioca .howto-guide-links {
        grid-template-columns: 1fr;

        gap: 7px;
    }


    .page-come-si-gioca .howto-guide-links a {
        display: grid;

        grid-template-columns:
            40px 1fr;

        gap: 0 12px;

        min-height: 0;

        padding: 13px 14px;
    }


    .page-come-si-gioca .howto-guide-number {
        grid-row:
            1 / span 2;

        margin: 0;
    }


    .page-come-si-gioca .howto-guide-links small {
        margin-top: 3px;
    }

}


/* =========================================================
   COME SI GIOCA V2.1
   MOBILE — SECTION ART VISIBILITY FIX
   ========================================================= */

@media (max-width: 600px) {

    .page-come-si-gioca .howto-guide-map {

        background:
            radial-gradient(
                circle at 50% 78%,
                rgba(31,104,78,.32),
                transparent 48%
            ),
            #0a3026;
    }


    .page-come-si-gioca .howto-guide-map-art img {

        object-fit: contain;
        object-position: center bottom;

        opacity: 1;

        filter:
            brightness(1.18)
            saturate(1.08);
    }


    .page-come-si-gioca .howto-guide-map::after {

        background:
            linear-gradient(
                180deg,
                rgba(6,31,24,.55) 0%,
                rgba(6,31,24,.30) 46%,
                rgba(6,31,24,.38) 100%
            );
    }

}


/* =========================================================
   COME SI GIOCA — MOBILE LCP ENTRY OPTIMIZATION
   Rimuove solo l'ingresso iniziale; mantiene motion continuo
   ========================================================= */

@media (max-width: 900px) {

    .page-come-si-gioca .howto-hero-copy {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .page-come-si-gioca .page-emblem.howto-hero-visual {
        opacity: 1;

        animation:
            howtoMobileFloat 10s
            ease-in-out
            1s
            infinite;
    }

}

@media (max-width: 560px) {

    .page-come-si-gioca .page-emblem.howto-hero-visual {
        opacity: 1;

        animation:
            howtoMobileFloatSmall 11s
            ease-in-out
            1s
            infinite;
    }

}