/* ==========================================================
   GAMES PAGE
   ========================================================== */

.games-page {
    padding:
        clamp(28px, 5vw, 56px)
        0
        20px;
}


/* ==========================================================
   HERO
   ========================================================== */

.games-hero {
    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    margin-bottom:
        clamp(34px, 5vw, 52px);

    padding:
        clamp(28px, 5vw, 52px);

    border-radius: var(--radius-xl);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #022d59 0%,
            #075ca5 58%,
            #1388da 100%
        );

    box-shadow: var(--shadow-md);
}

.games-hero::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    top: -120px;
    right: 90px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.07
        );
}

.games-hero::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -70px;
    bottom: -120px;

    border-radius: 50%;

    background:
        rgba(
            255,
            211,
            54,
            0.13
        );
}

.games-hero-copy {
    position: relative;
    z-index: 2;

    max-width: 720px;
}

.games-eyebrow {
    display: inline-flex;
    align-items: center;

    margin-bottom: 15px;

    padding: 7px 12px;

    border-radius: 999px;

    background:
        rgba(
            255,
            255,
            255,
            0.12
        );

    color: #ffffff;

    font-size: 0.82rem;
    font-weight: 800;

    letter-spacing: 0.03em;
}

.games-hero h1 {
    max-width: 700px;

    margin-bottom: 16px;

    color: #ffffff;
}

.games-hero h1 span {
    color: #ffd336;
}

.games-hero p {
    max-width: 660px;

    margin-bottom: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size: 1.02rem;
    line-height: 1.7;
}

.games-hero-icon {
    position: relative;
    z-index: 2;

    flex-shrink: 0;

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

    width:
        clamp(
            110px,
            13vw,
            160px
        );

    height:
        clamp(
            110px,
            13vw,
            160px
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.20
        );

    border-radius: 36px;

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    box-shadow:
        inset
        0 1px 0
        rgba(
            255,
            255,
            255,
            0.16
        );

    font-size:
        clamp(
            4rem,
            8vw,
            6rem
        );

    transform: rotate(4deg);
}


/* ==========================================================
   SECTION HEADING
   ========================================================== */

.games-list-section {
    width: 100%;
}

.games-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 24px;
}

.games-section-heading h2 {
    margin-bottom: 8px;
}

.games-section-heading p {
    max-width: 680px;

    margin-bottom: 0;

    color: var(--color-text-soft);
}

.games-section-kicker {
    display: block;

    margin-bottom: 7px;

    color: #075ca5;

    font-size: 0.78rem;
    font-weight: 900;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}

.games-count {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 8px;

    padding: 10px 14px;

    border:
        1px solid
        var(--color-border);

    border-radius: 999px;

    background: var(--color-surface);
}

.games-count strong {
    color: #075ca5;

    font-size: 1.05rem;
}

.games-count span {
    color: var(--color-text-soft);

    font-size: 0.82rem;
    font-weight: 700;
}

/* ==========================================================
   GAMES FILTERS
   ========================================================== */

.games-filters {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 24px;

    padding: 8px;

    overflow-x: auto;

    border:
        1px solid
        var(--color-border);

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 4px 14px
        rgba(
            3,
            58,
            105,
            0.06
        );

    scrollbar-width: none;
}

.games-filters::-webkit-scrollbar {
    display: none;
}


.games-filter {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 10px 14px;

    border-radius: 999px;

    color: #52667f;

    background: #f4f7fa;

    font-size: 0.86rem;
    font-weight: 800;

    white-space: nowrap;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}

.games-filter:hover {
    color: #075ca5;

    background: #eaf4ff;

    transform: translateY(-1px);
}


.games-filter span {
    min-width: 24px;
    height: 24px;

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

    padding:
        0
        7px;

    border-radius: 999px;

    background:
        rgba(
            7,
            92,
            165,
            0.10
        );

    color: #075ca5;

    font-size: 0.72rem;
    font-weight: 900;
}


.games-filter-active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #075ca5 0%,
            #0d63df 100%
        );

    box-shadow:
        0 4px 12px
        rgba(
            7,
            92,
            165,
            0.18
        );
}

.games-filter-active:hover {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #075ca5 0%,
            #0d63df 100%
        );
}


.games-filter-active span {
    color: #ffffff;

    background:
        rgba(
            255,
            255,
            255,
            0.18
        );
}


/* ==========================================================
   GRID
   ========================================================== */

.games-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                min(100%, 360px),
                470px
            )
        );

    gap: 24px;

    justify-content: start;
}


/* ==========================================================
   GAME CARD
   ========================================================== */

.game-card {
    overflow: hidden;

    display: flex;
    flex-direction: column;

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.game-card[hidden] {
    display: none !important;
}

.game-card:hover {
    transform: translateY(-3px);

    box-shadow: var(--shadow-lg);
}

.game-card-active {
    border-top:
        4px solid
        #27a24c;
}

.game-card-upcoming {
    border-top:
        4px solid
        #1687e9;
}

.game-card-finished {
    border-top:
        4px solid
        #70518c;
}


/* ==========================================================
   IMAGE
   ========================================================== */

.game-card-image {
    position: relative;

    width: 100%;
    aspect-ratio: 16 / 9;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #eef3f8 0%,
            #dfe8f1 100%
        );
}

.game-card-image img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        transform
        0.3s ease;
}

.game-card-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-card-image-placeholder span {
    font-size: 4.4rem;

    filter:
        drop-shadow(
            0 5px 8px
            rgba(
                0,
                0,
                0,
                0.12
            )
        );
}


/* ==========================================================
   CARD BODY
   ========================================================== */

.game-card-body {
    flex: 1;

    display: flex;
    flex-direction: column;
}

.game-card-top {
    display: flex;
    align-items: center;

    margin-bottom: 13px;
}


/* ==========================================================
   STATUS
   ========================================================== */

.game-status {
    display: inline-flex;
    align-items: center;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: 0.75rem;
    font-weight: 900;
}

.game-status-active {
    color: #17652c;

    background: #e7f7eb;
}

.game-status-upcoming {
    color: #07588f;

    background: #e9f5ff;
}


/* ==========================================================
   TITLE / DESCRIPTION
   ========================================================== */

.game-card-title {
    margin-bottom: 10px;

    font-size:
        clamp(
            1.25rem,
            2vw,
            1.5rem
        );
}

.game-card-description {
    display: -webkit-box;

    overflow: hidden;

    margin-bottom: 18px;

    color: var(--color-text-soft);

    line-height: 1.55;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}


/* ==========================================================
   PRIZE
   ========================================================== */

.game-info-box {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    padding: 13px 14px;

    border-radius: var(--radius-md);
}

.game-prize-box {
    background:
        linear-gradient(
            135deg,
            #fff9e5 0%,
            #fff3c6 100%
        );

    border:
        1px solid
        rgba(
            197,
            143,
            0,
            0.15
        );
}

.game-info-icon {
    flex-shrink: 0;

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

    width: 38px;
    height: 38px;

    border-radius: 10px;

    background:
        rgba(
            255,
            255,
            255,
            0.65
        );

    font-size: 1.3rem;
}

.game-info-box > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.game-info-label {
    margin-bottom: 1px;

    color: #8a6500;

    font-size: 0.72rem;
    font-weight: 800;

    text-transform: uppercase;
}

.game-info-box strong {
    overflow: hidden;

    text-overflow: ellipsis;

    color: #594300;

    font-size: 0.94rem;
}


/* ==========================================================
   META
   ========================================================== */

.game-meta {
    display: grid;

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

    gap: 10px;

    margin-bottom: 22px;
}

.game-meta-item {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 10px 11px;

    border:
        1px solid
        #e6ebf0;

    border-radius: var(--radius-sm);

    background: var(--color-surface-soft);
}

.game-meta-icon {
    flex-shrink: 0;

    font-size: 1.05rem;
}

.game-meta-item > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.game-meta-item span:not(.game-meta-icon) {
    margin-bottom: 1px;

    color: var(--color-text-soft);

    font-size: 0.68rem;
}

.game-meta-item strong {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--color-text);

    font-size: 0.78rem;
}


/* ==========================================================
   ACTIONS
   ========================================================== */

.game-card-actions {
    margin-top: auto;
}


/* ==========================================================
   EMPTY STATE
   ========================================================== */

.games-empty {
    max-width: 760px;

    margin: 20px auto 0;

    text-align: center;
}

.games-empty .card-body {
    padding:
        clamp(
            32px,
            6vw,
            58px
        );
}

.games-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 84px;
    height: 84px;

    margin:
        0 auto
        20px;

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #e8f3ff 0%,
            #d9ebff 100%
        );

    font-size: 3rem;
}

.games-empty h2 {
    margin-bottom: 10px;
}

.games-empty p {
    max-width: 570px;

    margin:
        0 auto
        24px;

    color: var(--color-text-soft);

    line-height: 1.65;
}


/* ==========================================================
   RESPONSIVE - TABLET
   ========================================================== */

@media (max-width: 1050px) {

    .games-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


/* ==========================================================
   RESPONSIVE - SMALL TABLET
   ========================================================== */

@media (max-width: 760px) {

    .games-hero {
        align-items: flex-start;

        padding: 30px;
    }

    .games-hero-icon {
        width: 100px;
        height: 100px;

        border-radius: 26px;

        font-size: 3.8rem;
    }

    .games-section-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 16px;
    }

}


/* ==========================================================
   RESPONSIVE - MOBILE
   ========================================================== */

@media (max-width: 640px) {

    .games-page {
        padding-top: 22px;
    }

    .games-hero {
        display: block;

        padding: 26px 22px;

        border-radius: var(--radius-lg);
    }

    .games-hero-icon {
        display: none;
    }

    .games-hero p {
        font-size: 0.95rem;
    }

    .games-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .game-meta {
        grid-template-columns: 1fr 1fr;
    }
	
	.games-filters {
    margin-left: -4px;
    margin-right: -4px;

    padding:
        7px
        4px;

    border: 0;

    border-radius: 0;

    background: transparent;

    box-shadow: none;
}

.games-filter {
    padding:
        9px
        13px;
}

}


/* ==========================================================
   RESPONSIVE - SMALL MOBILE
   ========================================================== */

@media (max-width: 420px) {

    .games-hero {
        padding: 23px 18px;
    }

    .games-eyebrow {
        font-size: 0.74rem;
    }

    .games-count {
        width: 100%;

        justify-content: center;
    }

    .game-meta {
        grid-template-columns: 1fr;
    }

    .game-meta-item strong {
        white-space: normal;
    }

}

/* ==========================================================
   GAME DETAIL PAGE
   ========================================================== */

.game-detail-page {
    padding:
        clamp(24px, 4vw, 46px)
        0
        20px;
}


/* ==========================================================
   BACK LINK
   ========================================================== */

.game-detail-back {
    margin-bottom: 18px;
}

.game-back-link {
    display: inline-flex;
    align-items: center;

    color: #075ca5;

    font-size: 0.9rem;
    font-weight: 800;
}

.game-back-link:hover {
    text-decoration: underline;
}


/* ==========================================================
   DETAIL GRID
   ========================================================== */

.game-detail-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        340px;

    gap: 26px;

    align-items: start;
}

.game-detail-main {
    min-width: 0;
}

.game-detail-sidebar {
    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* ==========================================================
   MAIN CARD
   ========================================================== */

.game-detail-card {
    overflow: hidden;
}

.game-detail-image {
    width: 100%;

    min-height: 260px;
    max-height: 500px;

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

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #eef3f8 0%,
            #dfe8f1 100%
        );
}

.game-detail-image img {
    width: 100%;
    height: 100%;

    max-height: 500px;

    object-fit: contain;
}

.game-detail-status-row {
    margin-bottom: 14px;
}

.game-detail-title {
    margin-bottom: 14px;
}

.game-detail-description {
    margin-bottom: 24px;

    color: var(--color-text-soft);

    line-height: 1.7;
}


/* ==========================================================
   DETAIL PRIZE
   ========================================================== */

.game-detail-prize {
    margin-bottom: 28px;

    padding: 16px;

    border:
        1px solid
        rgba(
            197,
            143,
            0,
            0.18
        );

    border-radius: var(--radius-md);

    background:
        linear-gradient(
            135deg,
            #fff9e5 0%,
            #fff2bd 100%
        );
}


.game-detail-prize-header {
    display: flex;
    align-items: center;

    gap: 14px;
}


.game-detail-prize-icon {
    flex-shrink: 0;

    width: 48px;
    height: 48px;

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

    border-radius: 13px;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 1.6rem;
}


.game-detail-prize-info {
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.game-detail-prize span {
    margin-bottom: 2px;

    color: #8a6500;

    font-size: 0.72rem;
    font-weight: 900;

    text-transform: uppercase;
}


.game-detail-prize strong {
    color: #594300;

    font-size: 1.05rem;
}


.game-detail-prize-image {
    width: 100%;

    margin-top: 16px;

    display: flex;
    justify-content: center;

    overflow: hidden;

    border-radius: var(--radius-md);
}


.game-detail-prize-image img {
    display: block;

    width: auto;
    max-width: 100%;

    max-height: 420px;

    object-fit: contain;

    border-radius: var(--radius-md);
}


/* ==========================================================
   RULES
   ========================================================== */

.game-detail-rules {
    padding-top: 24px;

    border-top:
        1px solid
        var(--color-border);
}

.game-detail-rules h2 {
    margin-bottom: 14px;

    font-size: 1.2rem;
}

.game-detail-rules-text {
    color: var(--color-text-soft);

    line-height: 1.7;
}


/* ==========================================================
   ENGINE
   ========================================================== */

.game-engine-card {
    margin-top: 24px;
}

.game-engine-waiting,
.game-engine-preview {
    text-align: center;
}

.game-engine-state-icon {
    margin-bottom: 12px;

    font-size: 3rem;
}

.game-engine-waiting h2,
.game-engine-preview h2 {
    margin-bottom: 10px;
}

.game-engine-waiting p,
.game-engine-preview > p {
    max-width: 600px;

    margin:
        0 auto
        20px;

    color: var(--color-text-soft);
}

.game-engine-kicker {
    display: block;

    margin-bottom: 7px;

    color: #075ca5;

    font-size: 0.76rem;
    font-weight: 900;

    letter-spacing: 0.07em;

    text-transform: uppercase;
}

.game-engine-info {
    width: min(
        100%,
        280px
    );

    margin:
        20px auto;

    padding: 13px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    border:
        1px solid
        var(--color-border);

    border-radius: var(--radius-md);

    background: var(--color-surface-soft);
}

.game-engine-info span {
    color: var(--color-text-soft);

    font-size: 0.86rem;
}

.game-engine-info strong {
    font-size: 1.15rem;
}

.game-engine-development {
    max-width: 600px;

    margin:
        22px auto
        0;
}


/* ==========================================================
   SIDEBAR
   ========================================================== */

.game-sidebar-label {
    display: block;

    margin-bottom: 15px;

    color: var(--color-text-soft);

    font-size: 0.76rem;
    font-weight: 900;

    letter-spacing: 0.06em;

    text-transform: uppercase;
}


/* ==========================================================
   COUNTDOWN
   ========================================================== */

.game-countdown-card {
    overflow: hidden;

    border-top:
        4px solid
        #1687e9;
}

.game-detail-countdown {
    display: grid;

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

    gap: 7px;
}

.game-detail-countdown > div {
    min-width: 0;

    padding: 10px 5px;

    text-align: center;

    border-radius: var(--radius-sm);

    background: #f1f6fb;
}

.game-detail-countdown strong {
    display: block;

    margin-bottom: 2px;

    color: #075ca5;

    font-size: 1.25rem;
}

.game-detail-countdown span {
    display: block;

    color: var(--color-text-soft);

    font-size: 0.66rem;
}


/* ==========================================================
   SIDEBAR DETAILS
   ========================================================== */

.game-sidebar-list {
    display: flex;
    flex-direction: column;

    gap: 12px;
}

.game-sidebar-item {
    display: flex;
    align-items: center;

    gap: 11px;

    padding-bottom: 12px;

    border-bottom:
        1px solid
        #edf0f3;
}

.game-sidebar-item:last-child {
    padding-bottom: 0;

    border-bottom: 0;
}

.game-sidebar-icon {
    flex-shrink: 0;

    width: 34px;
    height: 34px;

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

    border-radius: 9px;

    background: var(--color-surface-soft);
}

.game-sidebar-item > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.game-sidebar-item > div > span {
    color: var(--color-text-soft);

    font-size: 0.72rem;
}

.game-sidebar-item strong {
    font-size: 0.88rem;
}


/* ==========================================================
   LOGIN CARD
   ========================================================== */

.game-login-card p {
    color: var(--color-text-soft);

    font-size: 0.9rem;
}


/* ==========================================================
   NOT FOUND
   ========================================================== */

.game-not-found {
    max-width: 700px;

    margin:
        30px auto;

    text-align: center;
}

.game-not-found .card-body {
    padding:
        clamp(
            34px,
            6vw,
            60px
        );
}

.game-not-found-icon {
    margin-bottom: 16px;

    font-size: 3.5rem;
}

.game-not-found p {
    margin-bottom: 24px;

    color: var(--color-text-soft);
}


/* ==========================================================
   DETAIL RESPONSIVE
   ========================================================== */

@media (max-width: 950px) {

    .game-detail-grid {
        grid-template-columns: 1fr;
    }

    .game-detail-sidebar {
        display: grid;

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

    .game-login-card {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 640px) {

    .game-detail-page {
        padding-top: 18px;
    }

    .game-detail-image {
        min-height: 220px;
    }

    .game-detail-sidebar {
        display: flex;
    }

    .game-detail-countdown strong {
        font-size: 1.05rem;
    }

}

/* ==========================================================
   FINISHED GAME
   ========================================================== */

.game-status-finished {
    color: #5d4775;

    background: #f0eafa;
}


.game-finished-result {
    text-align: center;
}


.game-finished-icon {
    margin:
        8px 0
        10px;

    font-size: 3.5rem;
}


.game-finished-result h2 {
    margin-bottom: 24px;
}


/* ==========================================================
   WINNING COMBINATION
   ========================================================== */

.game-winning-combination {
    width: min(
        100%,
        460px
    );

    margin:
        0 auto
        28px;

    padding:
        20px;

    display: flex;
    flex-direction: column;

    gap: 7px;

    border:
        1px solid
        rgba(
            35,
            122,
            59,
            0.22
        );

    border-radius: var(--radius-lg);

    background:
        var(--color-success-bg);
}


.game-winning-combination span {
    color:
        var(--color-success);

    font-size: 0.82rem;
    font-weight: 800;
}


.game-winning-combination strong {
    color:
        var(--color-success);

    font-size:
        clamp(
            2rem,
            7vw,
            3.2rem
        );

    letter-spacing: 0.16em;
}


/* ==========================================================
   WINNERS
   ========================================================== */

.game-winners {
    width: min(
        100%,
        620px
    );

    margin:
        0 auto;
}


.game-winners h3 {
    margin-bottom: 14px;
}


.game-winners-list {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


.game-winner-item {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 14px;

    text-align: left;

    border:
        1px solid
        var(--color-border);

    border-radius:
        var(--radius-md);

    background:
        var(--color-surface-soft);
}


.game-winner-position {
    flex-shrink: 0;

    width: 44px;
    height: 44px;

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

    border-radius: 50%;

    background: #fff3c4;

    color: #775600;

    font-weight: 900;
}


.game-winner-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 2px;
}


.game-winner-info strong {
    font-size: 1rem;
}


.game-winner-info span {
    color:
        var(--color-text-soft);

    font-size: 0.84rem;
}


.game-winner-info small {
    color:
        var(--color-text-light);

    font-size: 0.74rem;
}


/* ==========================================================
   FINISHED SIDEBAR
   ========================================================== */

.game-countdown-finished {
    border-top:
        4px solid
        #70518c;
}


.game-sidebar-finished {
    padding: 14px;

    text-align: center;

    border-radius:
        var(--radius-md);

    background: #f0eafa;

    color: #5d4775;

    font-weight: 800;
}

/* ==========================================================
   PICK BOX
   ========================================================== */

.pick-box-play-box {
    width: min(
        100%,
        820px
    );

    margin:
        26px auto
        0;
}


/* ==========================================================
   PICK BOX - ATTEMPTS
   ========================================================== */

.pick-box-play-box
.combination-attempts-summary {
    width: min(
        100%,
        320px
    );

    margin:
        0 auto
        22px;

    padding:
        13px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    border:
        1px solid
        #dce5ee;

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            135deg,
            #f7faff 0%,
            #eef5fc 100%
        );
}

.pick-box-play-box
.combination-attempts-summary span {
    color:
        var(--color-text-soft);

    font-size: 0.86rem;
    font-weight: 700;
}

.pick-box-play-box
.combination-attempts-summary strong {
    color: #075ca5;

    font-size: 1.05rem;
    font-weight: 900;
}

/* =========================================================
   COMBINATION - AIUTI
   ========================================================= */

.combination-help-panel {
    width: 100%;
    margin: 18px 0 22px;
    padding: 18px;
    border: 1px solid #dbe4ee;
    border-radius: 18px;
    background: #f8fafc;
}

.combination-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.combination-help-title {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
}

.combination-help-title-icon {
    font-size: 28px;
    line-height: 1;
}

.combination-help-title strong {
    display: block;
    font-size: 18px;
    line-height: 1.2;
}

.combination-help-title small {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    opacity: 0.72;
}

.combination-help-stats {
    display: flex;
    gap: 8px;
}

.combination-help-stat {
    min-width: 105px;
    padding: 8px 12px;
    border: 1px solid #dbe4ee;
    border-radius: 12px;
    background: #ffffff;
    text-align: center;
}

.combination-help-stat span {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    opacity: 0.72;
}

.combination-help-stat strong {
    display: block;
    font-size: 17px;
}

.combination-help-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(135px, 1fr)
    );
    gap: 10px;
}

.combination-help-position {
    min-width: 0;
    padding: 13px 10px;
    border: 1px solid #dbe4ee;
    border-radius: 14px;
    background: #ffffff;
    text-align: center;
}

.combination-help-position.is-revealed {
    border-color: #b8ddc5;
    background: #f1fbf4;
}

.combination-help-position-label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0.72;
}

.combination-help-position-value {
    display: block;
    margin-bottom: 9px;
    font-size: 30px;
    line-height: 1;
}

.combination-help-revealed {
    display: block;
    min-height: 34px;
    font-size: 12px;
    font-weight: 700;
    line-height: 34px;
}

.combination-help-button {
    width: 100%;
    min-height: 42px;
    padding: 6px 8px;
    border: 0;
    border-radius: 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
}

.combination-help-button small {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    font-weight: 600;
}

.combination-help-button:disabled {
    opacity: 0.55;
    cursor: default;
}

/* =========================================================
   PICK BOX - PULSANTE AIUTO
   ========================================================= */

.pick-box-help-button {
    background:
        linear-gradient(
            135deg,
            #075ca5 0%,
            #1687e9 100%
        );

    color: #ffffff;

    cursor: pointer;

    box-shadow:
        0 4px 12px
        rgba(
            7,
            92,
            165,
            0.18
        );

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        opacity 0.16s ease;
}

.pick-box-help-button:not(:disabled):hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 7px 16px
        rgba(
            7,
            92,
            165,
            0.24
        );
}

.pick-box-help-button:not(:disabled):active {
    transform:
        translateY(0)
        scale(0.98);
}

.pick-box-help-button:disabled {
    background: #e5e7eb;

    color: #8a929a;

    cursor: not-allowed;

    box-shadow: none;

    opacity: 0.65;
}

@media (max-width: 767px) {

    .combination-help-panel {
        padding: 14px;
    }

    .combination-help-header {
        align-items: stretch;
        flex-direction: column;
        gap: 12px;
    }

    .combination-help-stats {
        width: 100%;
    }

    .combination-help-stat {
        flex: 1;
        min-width: 0;
    }

    .combination-help-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

/* ==========================================================
   PICK BOX - GRID
   ========================================================== */

.pick-box-grid {
    display: grid;

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

    gap: 14px;

    width: 100%;
}


/* ==========================================================
   PICK BOX - ITEM
   ========================================================== */

.pick-box-item {
    position: relative;

    min-width: 0;
    min-height: 132px;

    padding:
        18px
        10px
        14px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    overflow: hidden;

    border:
        2px solid
        #d9e5f0;

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f4f9ff 100%
        );

    color:
        var(--color-text);

    cursor: pointer;

    box-shadow:
        0 5px 14px
        rgba(
            3,
            58,
            105,
            0.08
        );

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.pick-box-item::before {
    content: "";

    position: absolute;

    width: 70px;
    height: 70px;

    top: -35px;
    right: -28px;

    border-radius: 50%;

    background:
        rgba(
            22,
            135,
            233,
            0.07
        );
}

.pick-box-item:not(:disabled):hover {
    transform:
        translateY(-5px)
        scale(1.02);

    border-color:
        #1687e9;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #eaf5ff 100%
        );

    box-shadow:
        0 10px 24px
        rgba(
            3,
            74,
            135,
            0.15
        );
}

.pick-box-item:not(:disabled):active {
    transform:
        translateY(-1px)
        scale(0.98);
}


/* ==========================================================
   PICK BOX - ICON / LABEL
   ========================================================== */

.pick-box-icon {
    position: relative;
    z-index: 1;

    display: block;

    font-size: 2.8rem;

    line-height: 1;

    filter:
        drop-shadow(
            0 4px 5px
            rgba(
                0,
                0,
                0,
                0.12
            )
        );

    transition:
        transform
        0.18s ease;
}

.pick-box-item:not(:disabled):hover
.pick-box-icon {
    transform:
        translateY(-2px)
        rotate(-4deg)
        scale(1.08);
}

.pick-box-item strong {
    position: relative;
    z-index: 1;

    display: block;

    font-size: 0.88rem;
    font-weight: 900;

    line-height: 1.2;
}

.pick-box-item small {
    position: relative;
    z-index: 1;

    display: block;

    color:
        var(--color-text-soft);

    font-size: 0.72rem;
    font-weight: 800;
}


/* ==========================================================
   PICK BOX - OPENED
   ========================================================== */

.pick-box-item.pick-box-opened,
.pick-box-item.pick-box-opened:disabled {
    border-color:
        #d9dde2;

    background:
        linear-gradient(
            145deg,
            #f3f4f5 0%,
            #e9ecef 100%
        );

    color:
        #8a929a;

    cursor: not-allowed;

    box-shadow: none;

    opacity: 0.72;

    transform: none;
}

.pick-box-item.pick-box-opened::before {
    background:
        rgba(
            0,
            0,
            0,
            0.035
        );
}

.pick-box-item.pick-box-opened
.pick-box-icon {
    filter: grayscale(0.35);

    transform: none;
}

/* ==========================================================
   PICK BOX - EXCLUDED BY HELP
   ========================================================== */

.pick-box-item.pick-box-excluded,
.pick-box-item.pick-box-excluded:disabled {
    border-color:
        #f0b8b8;

    background:
        linear-gradient(
            145deg,
            #fff4f4 0%,
            #fbe3e3 100%
        );

    color:
        #a63d3d;

    cursor: not-allowed;

    box-shadow: none;

    opacity: 0.86;

    transform: none;
}

.pick-box-item.pick-box-excluded::before {
    background:
        rgba(
            190,
            45,
            45,
            0.05
        );
}

.pick-box-item.pick-box-excluded
.pick-box-icon {
    filter: none;

    transform: none;
}

.pick-box-item.pick-box-excluded small {
    color:
        #a63d3d;
}

/* ==========================================================
   PICK BOX - AJAX MESSAGE
   ========================================================== */

.pick-box-ajax-message {
    width: min(
        100%,
        760px
    );

    margin:
        20px auto
        0;

    text-align: center;
}


/* ==========================================================
   PICK BOX - HISTORY
   ========================================================== */

.pick-box-history {
    width: min(
        100%,
        760px
    );

    margin:
        34px auto
        0;

    padding-top: 26px;

    border-top:
        1px solid
        var(--color-border);
}

.pick-box-history h3 {
    margin-bottom: 16px;

    text-align: center;

    font-size:
        clamp(
            1.15rem,
            3vw,
            1.4rem
        );
}

.pick-box-history
.combination-history-list {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.pick-box-history
.combination-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding:
        13px
        16px;

    text-align: left;

    border:
        1px solid
        #e2e8ee;

    border-radius:
        var(--radius-md);

    background:
        var(--color-surface-soft);
}

.pick-box-history
.combination-history-main {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.pick-box-history
.combination-history-number {
    color:
        var(--color-text-soft);

    font-size: 0.72rem;
    font-weight: 700;
}

.pick-box-history
.combination-history-answer {
    color:
        var(--color-text);

    font-size: 0.94rem;
    font-weight: 900;
}

.pick-box-history
.combination-history-feedback {
    flex-shrink: 0;

    color:
        var(--color-text-soft);

    font-size: 0.82rem;
    font-weight: 800;
}

.pick-box-history
.combination-history-result {
    flex-shrink: 0;

    color:
        var(--color-success);

    font-size: 0.82rem;
    font-weight: 900;
}

.pick-box-history
.combination-history-correct {
    border-color:
        rgba(
            35,
            122,
            59,
            0.22
        );

    background:
        var(--color-success-bg);
}


/* ==========================================================
   PICK BOX - RESPONSIVE TABLET
   ========================================================== */

@media (max-width: 900px) {

    .pick-box-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );
    }

}


/* ==========================================================
   PICK BOX - RESPONSIVE SMALL TABLET
   ========================================================== */

@media (max-width: 700px) {

    .pick-box-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 11px;
    }

    .pick-box-item {
        min-height: 118px;

        padding:
            15px
            8px
            12px;

        border-radius: 15px;
    }

    .pick-box-icon {
        font-size: 2.45rem;
    }

}


/* ==========================================================
   PICK BOX - RESPONSIVE MOBILE
   ========================================================== */

@media (max-width: 480px) {

    .pick-box-play-box {
        margin-top: 22px;
    }

    .pick-box-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 10px;
    }

    .pick-box-item {
        min-height: 108px;

        padding:
            13px
            6px
            11px;

        border-radius: 14px;
    }

    .pick-box-icon {
        font-size: 2.25rem;
    }

    .pick-box-item strong {
        font-size: 0.8rem;
    }

    .pick-box-history
    .combination-history-item {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }

}

/* ==========================================================
   PICK BOX - OPENING ANIMATION
   ========================================================== */

.pick-box-item.pick-box-opening {
    pointer-events: none;

    animation:
        pickBoxOpening
        0.55s
        ease
        both;
}

.pick-box-item.pick-box-opening
.pick-box-icon {
    animation:
        pickBoxGiftOpening
        0.55s
        ease
        both;
}


@keyframes pickBoxOpening {

    0% {
        transform:
            scale(1);

        box-shadow:
            0 5px 14px
            rgba(
                3,
                58,
                105,
                0.08
            );
    }

    20% {
        transform:
            scale(0.94);
    }

    38% {
        transform:
            scale(1.03)
            rotate(-1deg);
    }

    52% {
        transform:
            scale(1.03)
            rotate(1deg);
    }

    66% {
        transform:
            scale(1.02)
            rotate(-0.7deg);
    }

    82% {
        transform:
            scale(1.01)
            rotate(0.4deg);
    }

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

}


@keyframes pickBoxGiftOpening {

    0% {
        transform:
            scale(1)
            rotate(0);
    }

    20% {
        transform:
            scale(0.88);
    }

    42% {
        transform:
            scale(1.18)
            rotate(-7deg);
    }

    58% {
        transform:
            scale(1.18)
            rotate(7deg);
    }

    74% {
        transform:
            scale(1.10)
            rotate(-4deg);
    }

    88% {
        transform:
            scale(1.04)
            rotate(2deg);
    }

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

}


/*
|--------------------------------------------------------------------------
| Accessibilità
|--------------------------------------------------------------------------
|
| Se il dispositivo / sistema operativo richiede
| animazioni ridotte, le disattiviamo.
|--------------------------------------------------------------------------
*/

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

    .pick-box-item.pick-box-opening,
    .pick-box-item.pick-box-opening
    .pick-box-icon {
        animation: none;
    }

}

/* ==========================================================
   PUZZLE
   ========================================================== */

.puzzle-play-box {
    width: min(
        100%,
        900px
    );

    margin:
        26px auto
        0;
}


/* ==========================================================
   PUZZLE - SESSION SUMMARY
   ========================================================== */

.puzzle-session-summary {
    display: grid;

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

    gap: 12px;

    margin-bottom: 30px;
}

.puzzle-session-summary > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding:
        15px
        12px;

    border:
        1px solid
        #dce5ee;

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef6fd 100%
        );

    text-align: center;
}

.puzzle-session-summary span {
    color:
        var(--color-text-soft);

    font-size: 0.78rem;
    font-weight: 800;
}

.puzzle-session-summary strong {
    color: #075ca5;

    font-size:
        clamp(
            1.05rem,
            3vw,
            1.35rem
        );

    font-weight: 900;
}


/* ==========================================================
   PUZZLE - SECTIONS
   ========================================================== */

.puzzle-board-section,
.puzzle-cards-section {
    width: 100%;
}

.puzzle-board-section {
    margin-bottom: 38px;
}

.puzzle-board-section h3,
.puzzle-cards-section h3 {
    margin-bottom: 7px;

    text-align: center;

    font-size:
        clamp(
            1.15rem,
            3vw,
            1.45rem
        );
}

.puzzle-board-section > p,
.puzzle-cards-section > p {
    max-width: 620px;

    margin:
        0 auto
        20px;

    color:
        var(--color-text-soft);

    text-align: center;

    line-height: 1.55;
}


/* ==========================================================
   PUZZLE - BOARD
   ========================================================== */

.puzzle-board {
    --puzzle-columns: 5;
    --puzzle-rows: 3;

    width: min(
        100%,
        750px
    );

    margin:
        0 auto;

    display: grid;

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

    overflow: hidden;

    border:
        4px solid
        #ffffff;

    border-radius:
        18px;

    background: #dfe8f0;

    box-shadow:
        0 10px 30px
        rgba(
            3,
            58,
            105,
            0.14
        );
}

/* ==========================================================
   PUZZLE - BOARD SIZE BY GRID
   ========================================================== */

/* 2 × 2 - 4 pezzi */
.puzzle-board[
    data-columns="2"
][
    data-rows="2"
] {
    width: min(
        100%,
        440px
    );
}


/* 3 × 2 - 6 pezzi */
.puzzle-board[
    data-columns="3"
][
    data-rows="2"
] {
    width: min(
        100%,
        540px
    );
}


/* 4 × 2 / 3 × 3 - 8/9 pezzi */
.puzzle-board[
    data-columns="4"
][
    data-rows="2"
],
.puzzle-board[
    data-columns="3"
][
    data-rows="3"
] {
    width: min(
        100%,
        640px
    );
}


/* 12 pezzi in su */
.puzzle-board[
    data-columns="4"
][
    data-rows="3"
],
.puzzle-board[
    data-columns="5"
],
.puzzle-board[
    data-columns="6"
] {
    width: min(
        100%,
        750px
    );
}

/*
|--------------------------------------------------------------------------
| Dimensioni griglia
|--------------------------------------------------------------------------
|
| Il rapporto del contenitore viene calcolato
| attraverso il numero di colonne e righe.
|--------------------------------------------------------------------------
*/

.puzzle-board {
    aspect-ratio:
        var(--puzzle-columns)
        /
        var(--puzzle-rows);
}


/* ==========================================================
   PUZZLE - SLOT
   ========================================================== */

.puzzle-board-slot {
    position: relative;

    min-width: 0;
    min-height: 0;

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

    overflow: hidden;

    border:
        1px solid
        rgba(
            7,
            92,
            165,
            0.14
        );

    background:
        linear-gradient(
            145deg,
            #f7fafc 0%,
            #e7edf3 100%
        );

    background-repeat:
        no-repeat;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.puzzle-board-slot::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    box-shadow:
        inset
        0 0 0 1px
        rgba(
            255,
            255,
            255,
            0.30
        );
}

.puzzle-board-placeholder {
    position: relative;
    z-index: 1;

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

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.75
        );

    color:
        rgba(
            7,
            92,
            165,
            0.55
        );

    font-size: 0.72rem;
    font-weight: 900;

    box-shadow:
        0 2px 7px
        rgba(
            0,
            0,
            0,
            0.06
        );
}


/* ==========================================================
   PUZZLE - FOUND PIECE
   ========================================================== */

.puzzle-board-slot-found {
    background-color: transparent;

    animation:
        puzzlePieceReveal
        0.45s
        ease
        both;
}

.puzzle-board-slot-found::after {
    box-shadow:
        inset
        0 0 0 1px
        rgba(
            255,
            255,
            255,
            0.16
        );
}


/* ==========================================================
   PUZZLE - CARDS GRID
   ========================================================== */

.puzzle-cards-form {
    width: 100%;
}

.puzzle-cards-grid {
    display: grid;

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

    gap: 12px;

    width: 100%;
}


/* ==========================================================
   PUZZLE - CARD
   ========================================================== */

.puzzle-card {
    position: relative;

    min-width: 0;

    aspect-ratio: 4 / 5;

    padding:
        12px
        7px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 8px;

    overflow: hidden;

    border:
        2px solid
        #cfe0ef;

    border-radius:
        16px;

    background:
        linear-gradient(
            145deg,
            #0b69b7 0%,
            #064b86 100%
        );

    color: #ffffff;

    cursor: pointer;

    box-shadow:
        0 5px 13px
        rgba(
            3,
            58,
            105,
            0.13
        );

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.puzzle-card::before {
    content: "";

    position: absolute;

    width: 80px;
    height: 80px;

    top: -42px;
    right: -35px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );
}

.puzzle-card::after {
    content: "";

    position: absolute;

    width: 55px;
    height: 55px;

    left: -30px;
    bottom: -30px;

    border-radius: 50%;

    background:
        rgba(
            255,
            211,
            54,
            0.10
        );
}

.puzzle-card:not(:disabled):hover {
    transform:
        translateY(-5px)
        scale(1.025);

    border-color: #1687e9;

    box-shadow:
        0 11px 24px
        rgba(
            3,
            74,
            135,
            0.22
        );
}

.puzzle-card:not(:disabled):active {
    transform:
        translateY(-1px)
        scale(0.97);
}


/* ==========================================================
   PUZZLE - CARD CONTENT
   ========================================================== */

.puzzle-card-back,
.puzzle-card-piece-view,
.puzzle-card-fail-icon {
    position: relative;
    z-index: 1;

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

    line-height: 1;
}

.puzzle-card-back {
    width: 44px;
    height: 44px;

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            0.45
        );

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    font-size: 1.6rem;
    font-weight: 900;
}

.puzzle-card-piece-view,
.puzzle-card-fail-icon {
    font-size:
        clamp(
            1.8rem,
            4vw,
            2.5rem
        );
}

.puzzle-card small {
    position: relative;
    z-index: 1;

    display: block;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    font-size: 0.68rem;
    font-weight: 800;

    line-height: 1.2;

    text-align: center;
}


/* ==========================================================
   PUZZLE - OPENED PIECE
   ========================================================== */

.puzzle-card.puzzle-card-piece,
.puzzle-card.puzzle-card-piece:disabled {
    border-color:
        rgba(
            35,
            122,
            59,
            0.35
        );

    background:
        linear-gradient(
            145deg,
            #e9f8ed 0%,
            #d7f1df 100%
        );

    color: #17652c;

    cursor: default;

    opacity: 1;

    box-shadow:
        0 4px 12px
        rgba(
            35,
            122,
            59,
            0.10
        );
}

.puzzle-card.puzzle-card-piece small {
    color: #17652c;
}


/* ==========================================================
   PUZZLE - OPENED FAIL
   ========================================================== */

.puzzle-card.puzzle-card-fail,
.puzzle-card.puzzle-card-fail:disabled {
    border-color:
        rgba(
            174,
            52,
            52,
            0.20
        );

    background:
        linear-gradient(
            145deg,
            #f8eded 0%,
            #f0dddd 100%
        );

    color: #963636;

    cursor: default;

    opacity: 1;

    box-shadow: none;
}

.puzzle-card.puzzle-card-fail small {
    color: #963636;
}


/* ==========================================================
   PUZZLE - AJAX MESSAGE
   ========================================================== */

.puzzle-ajax-message {
    width: min(
        100%,
        760px
    );

    margin:
        0 auto
        22px;

    text-align: center;
}


/* ==========================================================
   PUZZLE - ANIMATIONS
   ========================================================== */

@keyframes puzzlePieceReveal {

    0% {
        opacity: 0.25;

        transform:
            scale(0.82);
    }

    65% {
        opacity: 1;

        transform:
            scale(1.04);
    }

    100% {
        opacity: 1;

        transform:
            scale(1);
    }

}


.puzzle-card.puzzle-card-opened {
    animation:
        puzzleCardReveal
        0.42s
        ease
        both;
}


@keyframes puzzleCardReveal {

    0% {
        transform:
            rotateY(0deg)
            scale(1);
    }

    45% {
        transform:
            rotateY(90deg)
            scale(0.94);
    }

    55% {
        transform:
            rotateY(90deg)
            scale(0.94);
    }

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

}


/* ==========================================================
   PUZZLE - RESPONSIVE TABLET
   ========================================================== */

@media (max-width: 800px) {

    .puzzle-cards-grid {
        grid-template-columns:
            repeat(
                5,
                minmax(0, 1fr)
            );

        gap: 10px;
    }

}


/* ==========================================================
   PUZZLE - RESPONSIVE SMALL TABLET
   ========================================================== */

@media (max-width: 640px) {

    .puzzle-play-box {
        margin-top: 22px;
    }

    .puzzle-session-summary {
        gap: 8px;

        margin-bottom: 26px;
    }

    .puzzle-session-summary > div {
        padding:
            12px
            7px;
    }

    .puzzle-session-summary span {
        font-size: 0.68rem;
    }

    .puzzle-board {
        border-width: 3px;

        border-radius: 14px;
    }

    .puzzle-board-placeholder {
        width: 24px;
        height: 24px;

        font-size: 0.64rem;
    }

    .puzzle-cards-grid {
        grid-template-columns:
            repeat(
                4,
                minmax(0, 1fr)
            );

        gap: 9px;
    }

    .puzzle-card {
        border-radius: 13px;

        padding:
            9px
            5px;
    }

    .puzzle-card-back {
        width: 36px;
        height: 36px;

        font-size: 1.35rem;
    }

}


/* ==========================================================
   PUZZLE - RESPONSIVE MOBILE
   ========================================================== */

@media (max-width: 460px) {

    .puzzle-session-summary {
        grid-template-columns: 1fr;
    }

    .puzzle-session-summary > div {
        flex-direction: row;
        justify-content: space-between;

        padding:
            11px
            13px;

        text-align: left;
    }

    .puzzle-session-summary span {
        font-size: 0.74rem;
    }

    .puzzle-session-summary strong {
        font-size: 1rem;
    }

    .puzzle-board-section {
        margin-bottom: 30px;
    }

    .puzzle-cards-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap: 8px;
    }

    .puzzle-card {
        border-radius: 12px;
    }

    .puzzle-card small {
        font-size: 0.62rem;
    }

}


/* ==========================================================
   PUZZLE - SMALL MOBILE
   ========================================================== */

@media (max-width: 360px) {

    .puzzle-cards-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}

/* ==========================================================
   PUZZLE - LEADERBOARD
   ========================================================== */

.puzzle-leaderboard {
    width: min(
        100%,
        760px
    );

    margin:
        34px auto
        0;

    padding-top: 28px;

    border-top:
        1px solid
        var(--color-border);

    text-align: left;
}


/* ==========================================================
   PUZZLE - LEADERBOARD HEADER
   ========================================================== */

.puzzle-leaderboard-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 8px;
}

.puzzle-leaderboard-header h3 {
    margin: 0;

    font-size:
        clamp(
            1.25rem,
            3vw,
            1.55rem
        );
}

.puzzle-leaderboard-header
.game-engine-kicker {
    margin-bottom: 5px;
}


/* ==========================================================
   PUZZLE - LEADERBOARD STATUS
   ========================================================== */

.puzzle-leaderboard-status {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;

    padding:
        6px
        10px;

    border-radius: 999px;

    background: #fff6d8;

    color: #806000;

    font-size: 0.72rem;
    font-weight: 900;
}

.puzzle-leaderboard-status-final {
    background: #e7f7eb;

    color: #17652c;
}


/* ==========================================================
   PUZZLE - LEADERBOARD DESCRIPTION
   ========================================================== */

.puzzle-leaderboard-description {
    margin:
        0
        0
        18px;

    color:
        var(--color-text-soft);

    font-size: 0.86rem;

    line-height: 1.55;
}


/* ==========================================================
   PUZZLE - LEADERBOARD LIST
   ========================================================== */

.puzzle-leaderboard-list {
    display: flex;
    flex-direction: column;

    gap: 10px;
}


/* ==========================================================
   PUZZLE - LEADERBOARD ITEM
   ========================================================== */

.puzzle-leaderboard-item {
    min-width: 0;

    display: grid;

    grid-template-columns:
        48px
        46px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 12px;

    padding:
        13px
        15px;

    border:
        1px solid
        #e1e8ef;

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7fafc 100%
        );

    box-shadow:
        0 3px 10px
        rgba(
            3,
            58,
            105,
            0.05
        );
}

/*
==========================================================
CLASSIFICA - RIGHE NASCOSTE
==========================================================
*/

.puzzle-leaderboard-item[hidden] {
    display: none !important;
}


/* ==========================================================
   PUZZLE - CURRENT PLAYER
   ========================================================== */

.puzzle-leaderboard-item-current {
    border-color:
        rgba(
            22,
            135,
            233,
            0.34
        );

    background:
        linear-gradient(
            135deg,
            #f3f9ff 0%,
            #e8f4ff 100%
        );

    box-shadow:
        0 5px 15px
        rgba(
            22,
            135,
            233,
            0.10
        );
}


/* ==========================================================
   PUZZLE - POSITION
   ========================================================== */

.puzzle-leaderboard-position {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: #f1f5f8;

    color: #075ca5;

    font-size: 1.25rem;
    font-weight: 900;
}


/* ==========================================================
   PUZZLE - AVATAR
   ========================================================== */

.puzzle-leaderboard-avatar {
    width: 44px;
    height: 44px;

    display: block;

    object-fit: cover;

    border:
        2px solid
        #ffffff;

    border-radius: 50%;

    box-shadow:
        0 2px 8px
        rgba(
            0,
            0,
            0,
            0.10
        );
}

.puzzle-leaderboard-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf3f8;

    font-size: 1.25rem;
}


/* ==========================================================
   PUZZLE - PLAYER
   ========================================================== */

.puzzle-leaderboard-player {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.puzzle-leaderboard-player > strong {
    min-width: 0;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    color:
        var(--color-text);

    font-size: 0.95rem;
    font-weight: 900;
}

.puzzle-leaderboard-player > span {
    color:
        var(--color-text-soft);

    font-size: 0.76rem;
}


/* ==========================================================
   PUZZLE - YOU BADGE
   ========================================================== */

.puzzle-leaderboard-you {
    display: inline-flex;
    align-items: center;

    padding:
        3px
        7px;

    border-radius: 999px;

    background: #075ca5;

    color: #ffffff;

    font-size: 0.62rem;
    font-weight: 900;

    line-height: 1;
}


/* ==========================================================
   PUZZLE - TIME
   ========================================================== */

.puzzle-leaderboard-time {
    min-width: 90px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap: 2px;

    text-align: right;
}

.puzzle-leaderboard-time span {
    color:
        var(--color-text-soft);

    font-size: 0.66rem;
    font-weight: 700;
}

.puzzle-leaderboard-time strong {
    color: #075ca5;

    font-size: 1rem;
    font-weight: 900;

    white-space: nowrap;
}


/* ==========================================================
   PUZZLE - LEADERBOARD RESPONSIVE
   ========================================================== */

@media (max-width: 640px) {

    .puzzle-leaderboard {
        margin-top: 28px;

        padding-top: 24px;
    }

    .puzzle-leaderboard-header {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }

    .puzzle-leaderboard-item {
        grid-template-columns:
            42px
            40px
            minmax(0, 1fr)
            auto;

        gap: 9px;

        padding:
            11px
            10px;
    }

    .puzzle-leaderboard-position {
        width: 38px;
        height: 38px;

        font-size: 1.05rem;
    }

    .puzzle-leaderboard-avatar {
        width: 38px;
        height: 38px;
    }

    .puzzle-leaderboard-player > strong {
        font-size: 0.88rem;
    }

    .puzzle-leaderboard-time {
        min-width: 76px;
    }

    .puzzle-leaderboard-time strong {
        font-size: 0.88rem;
    }

}


/* ==========================================================
   PUZZLE - LEADERBOARD SMALL MOBILE
   ========================================================== */

@media (max-width: 420px) {

    .puzzle-leaderboard-item {
        grid-template-columns:
            38px
            36px
            minmax(0, 1fr);

        align-items: center;
    }

    .puzzle-leaderboard-position {
        width: 34px;
        height: 34px;
    }

    .puzzle-leaderboard-avatar {
        width: 34px;
        height: 34px;
    }

    .puzzle-leaderboard-time {
        grid-column:
            2 / -1;

        align-items: flex-start;

        margin-top: -2px;

        text-align: left;
    }

}


/* ==========================================================
   PUZZLE - REDUCED MOTION
   ========================================================== */

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

    .puzzle-board-slot-found,
    .puzzle-card.puzzle-card-opened {
        animation: none;
    }

}

/* ==========================================================================
   MEMORY
   ========================================================================== */

.memory-play-box {
    margin-top: 24px;
}


/* --------------------------------------------------------------------------
   Riepilogo sessione
   -------------------------------------------------------------------------- */

.memory-session-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.memory-session-summary > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-width: 0;
    padding: 14px 10px;

    border: 1px solid #dfe5ef;
    border-radius: 14px;

    background: #ffffff;

    text-align: center;
}

.memory-session-summary span {
    font-size: 0.82rem;
    color: #667085;
}

.memory-session-summary strong {
    font-size: 1.05rem;
    line-height: 1.2;
    color: #172033;
}

#memorySessionTimer {
    font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   Intestazione tavolo
   -------------------------------------------------------------------------- */

.memory-board-header {
    margin-bottom: 18px;
    text-align: center;
}

.memory-board-header h3 {
    margin: 0 0 6px;
}

.memory-board-header p {
    margin: 0;
    color: #667085;
}


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

.memory-cards-form {
    margin: 0;
}


/* --------------------------------------------------------------------------
   Tavolo MEMORY
   -------------------------------------------------------------------------- */

.memory-cards-grid {
    display: grid;

    /*
     * Desktop:
     * 30 carte = 6 colonne x 5 righe.
     */

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

    gap: 10px;

    width: 100%;
    max-width: 760px;

    margin: 0 auto;

    padding: 14px;

    border-radius: 18px;

    background:
        linear-gradient(
            180deg,
            #f7f9fc 0%,
            #eef2f7 100%
        );

    box-sizing: border-box;
}


/* --------------------------------------------------------------------------
   Carta
   -------------------------------------------------------------------------- */

.memory-card {
    position: relative;

    display: block;

    width: 100%;
    min-width: 0;

    padding: 0;
    margin: 0;

    border: 0;
    border-radius: 10px;

    background: transparent;

    cursor: pointer;

    aspect-ratio: 1 / 1;

    perspective: 900px;

    -webkit-tap-highlight-color: transparent;
}

.memory-card:disabled {
    cursor: default;
}


/* --------------------------------------------------------------------------
   Corpo interno / flip
   -------------------------------------------------------------------------- */

.memory-card-inner {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

    transition:
        transform 0.38s ease;
}


/*
 * Carta temporaneamente girata dal JS
 * oppure coppia già trovata.
 */

.memory-card.memory-card-flipped
    .memory-card-inner,
.memory-card.memory-card-matched
    .memory-card-inner {

    transform: rotateY(180deg);
}


/* --------------------------------------------------------------------------
   Fronte e dorso
   -------------------------------------------------------------------------- */

.memory-card-front,
.memory-card-back {
    position: absolute;
    inset: 0;

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

    width: 100%;
    height: 100%;

    overflow: hidden;

    border-radius: 10px;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/*
 * Il fronte parte ruotato.
 */

.memory-card-front {
    transform: rotateY(180deg);
}


/*
 * Il dorso è quello visibile inizialmente.
 */

.memory-card-back {
    transform: rotateY(0deg);
}


/* --------------------------------------------------------------------------
   Immagini
   -------------------------------------------------------------------------- */

.memory-card-front img,
.memory-card-back img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: inherit;

    user-select: none;

    -webkit-user-drag: none;
}


/*
 * Placeholder del fronte.
 *
 * Verrà riempito dal JavaScript soltanto quando il server
 * restituisce l'immagine della carta realmente scoperta.
 */

.memory-card-front-image {
    display: block;

    width: 100%;
    height: 100%;
}


/* --------------------------------------------------------------------------
   Hover solo dove ha senso
   -------------------------------------------------------------------------- */

@media (hover: hover) {

    .memory-card:not(:disabled):hover {
        transform: translateY(-2px);
    }
}


/* --------------------------------------------------------------------------
   Coppia trovata
   -------------------------------------------------------------------------- */

.memory-card-matched {
    cursor: default;
}


/* --------------------------------------------------------------------------
   Feedback AJAX
   -------------------------------------------------------------------------- */

.memory-feedback-area {
    min-height: 24px;

    margin-top: 16px;

    text-align: center;
}


/* ==========================================================================
   MEMORY — RESPONSIVE
   ========================================================================== */

/*
 * Tablet
 */

@media (max-width: 900px) {

    .memory-cards-grid {
        gap: 8px;
        padding: 10px;
    }

}


/*
 * Smartphone
 *
 * Manteniamo 5 colonne:
 * 30 carte = 6 righe.
 *
 * In questo modo le carte rimangono abbastanza grandi
 * da essere facilmente selezionabili senza creare
 * una pagina interminabile.
 */

@media (max-width: 640px) {

    .memory-session-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }


    .memory-session-summary > div {
        padding: 10px 6px;
    }


    .memory-session-summary span {
        font-size: 0.74rem;
    }


    .memory-session-summary strong {
        font-size: 0.95rem;
    }


    .memory-cards-grid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr));

        gap: 5px;

        padding: 7px;

        border-radius: 12px;
    }


    .memory-card,
    .memory-card-front,
    .memory-card-back,
    .memory-card-front img,
    .memory-card-back img {
        border-radius: 7px;
    }

}


/*
 * Telefoni molto stretti
 */

@media (max-width: 380px) {

    .memory-cards-grid {
        gap: 4px;
        padding: 5px;
    }

}

/* ==========================================================================
   SPOT DIFFERENCE
   ========================================================================== */

.spot-difference-play-box {
    width: min(
        100%,
        1080px
    );

    margin:
        26px auto
        0;
}


/* --------------------------------------------------------------------------
   Riepilogo sessione
   -------------------------------------------------------------------------- */

.spot-difference-session-summary {
    display: grid;

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

    gap: 12px;

    margin-bottom: 24px;
}


.spot-difference-session-summary > div {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    padding:
        15px
        10px;

    border:
        1px solid
        #dce5ee;

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef6fd 100%
        );

    text-align: center;
}


.spot-difference-session-summary span {
    color:
        var(--color-text-soft);

    font-size: 0.78rem;
    font-weight: 800;
}


.spot-difference-session-summary strong {
    color: #075ca5;

    font-size:
        clamp(
            1rem,
            3vw,
            1.3rem
        );

    font-weight: 900;
}


/* --------------------------------------------------------------------------
   Feedback AJAX
   -------------------------------------------------------------------------- */

.spot-difference-feedback {
    width: min(
        100%,
        720px
    );

    min-height: 0;

    margin:
        0 auto
        20px;

    text-align: center;
}


.spot-difference-feedback:empty {
    display: none;
}


/* --------------------------------------------------------------------------
   Griglia immagini
   -------------------------------------------------------------------------- */

.spot-difference-images {
    display: grid;

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

    gap: 18px;

    width: 100%;

    margin-top: 22px;
}


/* --------------------------------------------------------------------------
   Card singola immagine
   -------------------------------------------------------------------------- */

.spot-difference-image-card {
    min-width: 0;

    margin: 0;

    padding:
        14px;

    border:
        1px solid
        #dce5ee;

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f5f9fd 100%
        );

    box-shadow:
        0 7px 20px
        rgba(
            3,
            58,
            105,
            0.08
        );
}


.spot-difference-image-card h3 {
    margin:
        0 0
        11px;

    color:
        var(--color-text);

    font-size:
        clamp(
            0.95rem,
            2vw,
            1.1rem
        );

    font-weight: 900;

    text-align: center;
}


/* --------------------------------------------------------------------------
   Stage immagine
   -------------------------------------------------------------------------- */

.spot-difference-image-stage {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius:
        var(--radius-md);

    background: #eef3f7;

    line-height: 0;

    isolation: isolate;

    -webkit-tap-highlight-color: transparent;
}


/* --------------------------------------------------------------------------
   Immagine
   -------------------------------------------------------------------------- */

.spot-difference-image {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;

    border: 0;

    object-fit: contain;

    user-select: none;

    -webkit-user-select: none;
    -webkit-user-drag: none;

    touch-action: manipulation;
}


/*
 * Solo quando la sessione è attiva mostriamo chiaramente
 * che l'immagine è interattiva.
 */

.spot-difference-play-box[data-active="1"]
.spot-difference-image {
    cursor: crosshair;
}


/* --------------------------------------------------------------------------
   Overlay marker
   -------------------------------------------------------------------------- */

.spot-difference-markers {
    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;
}


/* --------------------------------------------------------------------------
   Marker differenza trovata
   -------------------------------------------------------------------------- */

.spot-difference-marker {
    position: absolute;

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

    width:
        clamp(
            22px,
            2.5vw,
            28px
        );

    height:
        clamp(
            22px,
            2.5vw,
            28px
        );

    transform:
        translate(
            -50%,
            -50%
        );

    border:
        2px solid
        #d92d20;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    color:
        #d92d20;

    font-size:
        clamp(
            0.68rem,
            1.5vw,
            0.82rem
        );

    font-weight: 900;

    line-height: 1;

    box-shadow:
        0 2px 6px
        rgba(
            0,
            0,
            0,
            0.25
        );

    pointer-events: none;

    animation:
        spotDifferenceMarkerReveal
        0.28s
        ease
        both;
}


/* --------------------------------------------------------------------------
   Modalità read-only
   -------------------------------------------------------------------------- */

.spot-difference-play-box.is-readonly
.spot-difference-image {
    cursor: default;
}


/* --------------------------------------------------------------------------
   Richiesta AJAX in corso
   -------------------------------------------------------------------------- */

.spot-difference-play-box.is-busy
.spot-difference-image {
    cursor: wait;
}


.spot-difference-play-box.is-busy
.spot-difference-image-stage {
    pointer-events: none;
}


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

.spot-difference-click-form {
    display: none;
}


/* --------------------------------------------------------------------------
   Animazione marker
   -------------------------------------------------------------------------- */

@keyframes spotDifferenceMarkerReveal {

    0% {
        opacity: 0;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(0.55);
    }

    70% {
        opacity: 1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1.12);
    }

    100% {
        opacity: 1;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(1);
    }
}

/* --------------------------------------------------------------------------
   Zoom immagini
   -------------------------------------------------------------------------- */

.spot-difference-image-actions {
    display: flex;
    justify-content: center;

    margin:
        0 0
        10px;
}


.spot-difference-zoom-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding:
        7px
        12px;

    border:
        1px solid
        #d6e3ef;

    border-radius: 999px;

    background: #ffffff;

    color: #075ca5;

    font-size: 0.78rem;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 2px 7px
        rgba(
            3,
            58,
            105,
            0.07
        );

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


.spot-difference-zoom-button:hover {
    border-color: #1687e9;

    background: #eef7ff;

    transform:
        translateY(-1px);
}


/* --------------------------------------------------------------------------
   Visualizzatore fullscreen
   -------------------------------------------------------------------------- */

.spot-difference-zoom-modal {
    position: fixed;

    inset: 0;

    z-index: 10000;

    display: none;

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

    padding:
        clamp(
            12px,
            3vw,
            28px
        );

    background:
        rgba(
            4,
            18,
            31,
            0.94
        );
}


.spot-difference-zoom-modal.is-open {
    display: flex;
}


.spot-difference-zoom-dialog {
    position: relative;

    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border-radius:
        var(--radius-lg);

    background: #101820;

    box-shadow:
        0 18px 60px
        rgba(
            0,
            0,
            0,
            0.45
        );
}


/* --------------------------------------------------------------------------
   Barra comandi zoom
   -------------------------------------------------------------------------- */

.spot-difference-zoom-toolbar {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        10px
        12px;

    background: #ffffff;
}


.spot-difference-zoom-title {
    min-width: 0;

    overflow: hidden;

    color:
        var(--color-text);

    font-size: 0.88rem;
    font-weight: 900;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.spot-difference-zoom-controls {
    flex-shrink: 0;

    display: flex;
    align-items: center;

    gap: 7px;
}

.spot-difference-zoom-heading {
    min-width: 0;

    display: flex;
    align-items: center;

    gap: 14px;
}


.spot-difference-zoom-switch {
    display: flex;
    align-items: center;

    padding: 3px;

    border:
        1px solid
        #dce5ee;

    border-radius: 999px;

    background: #f2f6fa;
}


.spot-difference-zoom-switch-button {
    padding:
        7px
        12px;

    border: 0;

    border-radius: 999px;

    background: transparent;

    color:
        var(--color-text-soft);

    font-size: 0.78rem;
    font-weight: 900;

    cursor: pointer;

    transition:
        background 0.16s ease,
        color 0.16s ease,
        box-shadow 0.16s ease;
}


.spot-difference-zoom-switch-button.is-active {
    background: #075ca5;

    color: #ffffff;

    box-shadow:
        0 2px 6px
        rgba(
            3,
            58,
            105,
            0.20
        );
}


.spot-difference-zoom-control {
    width: 38px;
    height: 38px;

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

    padding: 0;

    border:
        1px solid
        #dce5ee;

    border-radius: 10px;

    background: #f7fafc;

    color: #075ca5;

    font-size: 1rem;
    font-weight: 900;

    cursor: pointer;
}


.spot-difference-zoom-control:hover {
    background: #eaf5ff;
}


.spot-difference-zoom-close {
    color: #b42318;
}


/* --------------------------------------------------------------------------
   Area immagine zoom
   -------------------------------------------------------------------------- */

.spot-difference-zoom-viewport {
    position: relative;

    flex: 1;

    min-height: 0;

    overflow: hidden;

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

    cursor: grab;

    touch-action: none;
}


.spot-difference-zoom-viewport.is-dragging {
    cursor: grabbing;
}


.spot-difference-zoom-content {
    position: relative;

    flex-shrink: 0;

    line-height: 0;

    transform-origin: center center;

    will-change: transform;
}


.spot-difference-zoom-image {
    display: block;

    max-width: min(
        90vw,
        1400px
    );

    max-height: calc(
        100vh - 120px
    );

    width: auto;
    height: auto;

    user-select: none;

    -webkit-user-select: none;
    -webkit-user-drag: none;
}


/* --------------------------------------------------------------------------
   Marker dentro lo zoom
   -------------------------------------------------------------------------- */

.spot-difference-zoom-markers {
    position: absolute;

    inset: 0;

    pointer-events: none;
}


.spot-difference-zoom-marker {
    position: absolute;

    width: 26px;
    height: 26px;

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

    transform:
        translate(
            -50%,
            -50%
        );

    border:
        2px solid
        #d92d20;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    color: #d92d20;

    font-size: 0.76rem;
    font-weight: 900;

    line-height: 1;

    box-shadow:
        0 2px 6px
        rgba(
            0,
            0,
            0,
            0.28
        );
}


/* --------------------------------------------------------------------------
   Blocco scroll pagina quando zoom aperto
   -------------------------------------------------------------------------- */

body.spot-difference-zoom-open {
    overflow: hidden;
}

/* ==========================================================================
   SPOT DIFFERENCE — RESPONSIVE
   ========================================================================== */


/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

    .spot-difference-images {
        gap: 14px;
    }


    .spot-difference-image-card {
        padding: 11px;
    }

}


/* --------------------------------------------------------------------------
   Smartphone
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

    .spot-difference-play-box {
        margin-top: 22px;
    }


    .spot-difference-session-summary {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 8px;

        margin-bottom: 20px;
    }


    .spot-difference-session-summary > div {
        padding:
            11px
            6px;
    }


    .spot-difference-session-summary span {
        font-size: 0.72rem;
    }


    .spot-difference-session-summary strong {
        font-size: 0.98rem;
    }


    /*
     * Su smartphone mettiamo le immagini una sotto l'altra.
     *
     * Così restano sufficientemente grandi da permettere
     * click precisi senza deformare il layout della pagina.
     */

    .spot-difference-images {
        grid-template-columns: 1fr;

        gap: 18px;

        margin-top: 18px;
    }


    .spot-difference-image-card {
        padding: 9px;

        border-radius:
            var(--radius-md);
    }


    .spot-difference-image-card h3 {
        margin-bottom: 8px;

        font-size: 0.95rem;
    }


    .spot-difference-image-stage {
        border-radius:
            var(--radius-sm);
    }


    /*
     * Marker leggermente più piccoli su mobile,
     * ma ancora facilmente visibili.
     */

    .spot-difference-marker {
    width: 24px;
    height: 24px;

    border-width: 2px;

    font-size: 0.72rem;

    box-shadow:
        0 2px 5px
        rgba(
            0,
            0,
            0,
            0.24
        );
}

.spot-difference-zoom-toolbar {
    align-items: flex-start;
}


.spot-difference-zoom-heading {
    align-items: flex-start;
    flex-direction: column;

    gap: 7px;
}


.spot-difference-zoom-title {
    font-size: 0.76rem;
}


.spot-difference-zoom-switch-button {
    padding:
        6px
        10px;

    font-size: 0.72rem;
}


.spot-difference-zoom-control {
    width: 34px;
    height: 34px;
}

}


/* --------------------------------------------------------------------------
   Smartphone molto stretto
   -------------------------------------------------------------------------- */

@media (max-width: 380px) {

    .spot-difference-session-summary {
        gap: 6px;
    }


    .spot-difference-session-summary > div {
        padding:
            9px
            4px;
    }


    .spot-difference-image-card {
        padding: 7px;
    }


.spot-difference-marker {
    width: 22px;
    height: 22px;

    font-size: 0.66rem;
}

}


/* --------------------------------------------------------------------------
   Accessibilità
   -------------------------------------------------------------------------- */

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

    .spot-difference-marker {
        animation: none;
    }

}

/* ==========================================================================
   HANGMAN
   ========================================================================== */

.hangman-play-box {
    width: min(
        100%,
        820px
    );

    margin:
        26px auto
        0;
}


/* --------------------------------------------------------------------------
   Riepilogo sessione
   -------------------------------------------------------------------------- */

.hangman-session-summary {
    display: grid;

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

    gap: 12px;

    width: min(
        100%,
        620px
    );

    margin:
        22px auto
        0;
}


.hangman-session-summary > div {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding:
        14px
        16px;

    border:
        1px solid
        #dce5ee;

    border-radius:
        var(--radius-md);

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef6fd 100%
        );
}


.hangman-session-summary span {
    color:
        var(--color-text-soft);

    font-size: 0.86rem;
    font-weight: 700;
}


.hangman-session-summary strong {
    color:
        #075ca5;

    font-size: 1.08rem;
    font-weight: 900;
}


/* --------------------------------------------------------------------------
   Parola mascherata
   -------------------------------------------------------------------------- */

.hangman-word {
    width: 100%;

    margin:
        34px auto
        28px;

    padding:
        18px
        12px;

    color:
        var(--color-text);

    font-size:
        clamp(
            1.65rem,
            5vw,
            2.35rem
        );

    font-weight: 900;

    letter-spacing:
        0.30em;

    line-height: 1.5;

    text-align: center;

    overflow-wrap: anywhere;

    font-variant-numeric:
        tabular-nums;
}


/* --------------------------------------------------------------------------
   Lettere errate
   -------------------------------------------------------------------------- */
.hangman-help-spacing {
    margin-top: 22px;
    margin-bottom: 26px;
}

.hangman-help-form .btn:disabled,
.hangman-help-form .btn:disabled:hover {
    transform: none;
    cursor: not-allowed;
}

#memoryHelpButton:disabled,
#memoryHelpButton:disabled:hover {
    transform: none;
    cursor: not-allowed;
    opacity: 0.65;
}

.hangman-wrong-letters {
    width: min(
        100%,
        620px
    );

    margin:
        0 auto;

    padding:
        12px
        15px;

    border:
        1px solid
        #eadede;

    border-radius:
        var(--radius-md);

    background:
        #fff8f8;

    color:
        var(--color-text-soft);

    line-height: 1.5;

    text-align: center;
}


.hangman-wrong-letters strong {
    color:
        #963636;
}


/* --------------------------------------------------------------------------
   Feedback AJAX
   -------------------------------------------------------------------------- */

.hangman-feedback {
    width: min(
        100%,
        620px
    );

    min-height: 0;

    margin:
        18px auto
        0;

    text-align: center;
}


.hangman-feedback:empty {
    display: none;
}


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

.hangman-letters-form {
    width: 100%;

    margin:
        24px auto
        0;
}


/* --------------------------------------------------------------------------
   Tastiera
   -------------------------------------------------------------------------- */

.hangman-keyboard {
    display: grid;

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

    gap: 8px;

    width: min(
        100%,
        820px
    );

    margin:
        0 auto;
}


/* --------------------------------------------------------------------------
   Singola lettera
   -------------------------------------------------------------------------- */

.hangman-letter {
    min-width: 0;
    min-height: 50px;

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

    padding:
        8px
        4px;

    border:
        1px solid
        #d4e0eb;

    border-radius:
        12px;

    background:
        linear-gradient(
            145deg,
            #f5f9fd 0%,
            #e7eef5 100%
        );

    color:
        var(--color-text);

    font: inherit;

    font-size: 0.95rem;
    font-weight: 900;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 3px 8px
        rgba(
            3,
            58,
            105,
            0.06
        );

    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease,
        opacity 0.16s ease;

    -webkit-tap-highlight-color:
        transparent;
}


.hangman-letter:not(:disabled):hover {
    transform:
        translateY(-2px);

    border-color:
        #1687e9;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #eaf5ff 100%
        );

    box-shadow:
        0 6px 14px
        rgba(
            3,
            74,
            135,
            0.12
        );
}


.hangman-letter:not(:disabled):active {
    transform:
        translateY(0)
        scale(0.97);
}


/* --------------------------------------------------------------------------
   Lettera già utilizzata
   -------------------------------------------------------------------------- */

.hangman-letter.hangman-letter-used,
.hangman-letter:disabled {
    border-color:
        #e0e4e8;

    background:
        #f0f2f4;

    color:
        #98a2b3;

    cursor: default;

    box-shadow: none;

    opacity: 0.58;

    transform: none;
}

/* --------------------------------------------------------------------------
   Disegno Impiccato
   -------------------------------------------------------------------------- */

.hangman-figure {
    width: min(
        100%,
        360px
    );

    margin:
        28px auto
        8px;

    padding:
        12px;

    border:
        1px solid
        #dce5ee;

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(
            180deg,
            #dff3ff 0%,
            #f7fbff 68%,
            #e7f3df 68%,
            #d7ebca 100%
        );

    box-shadow:
        0 6px 18px
        rgba(
            3,
            58,
            105,
            0.07
        );
}


.hangman-svg {
    display: block;

    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Sfondo scena
   -------------------------------------------------------------------------- */

.hangman-cloud {
    fill:
        #ffffff;

    stroke: none;

    opacity: 0.92;
}


/* --------------------------------------------------------------------------
   Occhi
   -------------------------------------------------------------------------- */

.hangman-eye-white {
    fill:
        #ffffff;

    stroke:
        #26384c;

    stroke-width: 1.5;
}


/* --------------------------------------------------------------------------
   Jeans
   -------------------------------------------------------------------------- */

.hangman-jeans {
    fill:
        #294d73;

    stroke:
        #26384c;

    stroke-width: 3;

    stroke-linejoin: round;
}


/* --------------------------------------------------------------------------
   Dettagli scarpe
   -------------------------------------------------------------------------- */

.hangman-shoe-sole {
    fill: none;

    stroke:
        #26384c;

    stroke-width: 2.5;

    stroke-linecap: round;
}


.hangman-shoe-laces {
    fill: none;

    stroke:
        #ffffff;

    stroke-width: 1.5;

    stroke-linecap: round;
}

/* --------------------------------------------------------------------------
   Patibolo
   -------------------------------------------------------------------------- */

.hangman-gallows {
    fill: none;

    stroke:
        #76502f;

    stroke-width: 9;

    stroke-linecap: round;

    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Dettagli patibolo
   -------------------------------------------------------------------------- */

.hangman-wood {
    fill:
        #9a6738;

    stroke:
        #684322;

    stroke-width: 3;

    stroke-linejoin: round;
}


.hangman-wood-grain {
    fill: none;

    stroke:
        #704722;

    stroke-width: 2;

    stroke-linecap: round;

    opacity: 0.55;
}


.hangman-nail {
    fill:
        #465568;

    stroke:
        #26384c;

    stroke-width: 1;
}


/* --------------------------------------------------------------------------
   Corda
   -------------------------------------------------------------------------- */

.hangman-rope {
    fill: none;

    stroke:
        #c39555;

    stroke-width: 4;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* --------------------------------------------------------------------------
   Terreno
   -------------------------------------------------------------------------- */

.hangman-ground {
    fill:
        #718b55;
}


.hangman-shadow {
    fill:
        rgba(
            38,
            56,
            76,
            0.16
        );
}


.hangman-grass {
    fill:
        #4f793d;

    stroke: none;
}

/* --------------------------------------------------------------------------
   Parti progressive del personaggio
   -------------------------------------------------------------------------- */

.hangman-part {
    opacity: 0;

    transition:
        opacity 0.28s ease,
        transform 0.28s ease;

    transform-origin: center;
}


.hangman-part.is-visible {
    opacity: 1;
}


/* --------------------------------------------------------------------------
   Pelle
   -------------------------------------------------------------------------- */

.hangman-skin {
    fill:
        #ffd2ad;

    stroke:
        #26384c;

    stroke-width: 3;
}


.hangman-hand-shape {
    fill:
        #ffd2ad;

    stroke:
        #26384c;

    stroke-width:
        1.8;

    stroke-linejoin:
        round;

    stroke-linecap:
        round;
}

.hangman-hand-details {
    fill:
        none;

    stroke:
        #26384c;

    stroke-width:
        1.15;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}

/* --------------------------------------------------------------------------
   Testa
   -------------------------------------------------------------------------- */

.hangman-head {
    fill:
        #ffd2ad;

    stroke:
        #26384c;

    stroke-width: 4;
}


/* --------------------------------------------------------------------------
   Capelli
   -------------------------------------------------------------------------- */

.hangman-hair {
    fill:
        #3a2a22;

    stroke:
        #26384c;

    stroke-width: 2.5;

    stroke-linejoin: round;
}


/* --------------------------------------------------------------------------
   Occhi
   -------------------------------------------------------------------------- */

.hangman-eye {
    fill:
        #26384c;
}


/* --------------------------------------------------------------------------
   Sopracciglia
   -------------------------------------------------------------------------- */

.hangman-eyebrow {
    fill: none;

    stroke:
        #3a2a22;

    stroke-width: 2;

    stroke-linecap: round;
}


/* --------------------------------------------------------------------------
   Naso
   -------------------------------------------------------------------------- */

.hangman-nose {
    fill: none;

    stroke:
        #c88763;

    stroke-width: 2;

    stroke-linecap: round;
}


/* --------------------------------------------------------------------------
   Bocca
   -------------------------------------------------------------------------- */

.hangman-mouth {
    fill: none;

    stroke:
        #26384c;

    stroke-width: 2.5;

    stroke-linecap: round;
}


/* --------------------------------------------------------------------------
   Maglietta FBGRS GAMES
   -------------------------------------------------------------------------- */

.hangman-shirt {
    fill:
        #075ca5;

    stroke:
        #26384c;

    stroke-width: 4;

    stroke-linejoin: round;
}


.hangman-shirt-collar {
    fill: none;

    stroke:
        #26384c;

    stroke-width: 3;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.hangman-shirt-text {
    fill:
        #ffffff;

    font-size: 11px;

    font-family:
        Arial,
        sans-serif;

    font-weight: 900;

    letter-spacing:
        0.3px;
}


.hangman-shirt-text-small {
    font-size: 9px;
}


.hangman-shirt-badge {
    fill:
        #ffd336;

    stroke:
        #26384c;

    stroke-width: 1.5;
}


.hangman-shirt-badge-text {
    fill:
        #26384c;

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    font-weight: 900;
}


/* --------------------------------------------------------------------------
   Braccia
   -------------------------------------------------------------------------- */

.hangman-arm {
    fill: none;

    stroke:
        #ffd2ad;

    stroke-width: 10;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* --------------------------------------------------------------------------
   Gambe / pantaloni
   -------------------------------------------------------------------------- */

.hangman-leg {
    fill:
        #294d73;

    stroke:
        #26384c;

    stroke-width: 4;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* --------------------------------------------------------------------------
   Scarpe
   -------------------------------------------------------------------------- */

.hangman-shoe {
    fill:
        #26384c;

    stroke:
        #26384c;

    stroke-width: 2;

    stroke-linejoin: round;
}


/* --------------------------------------------------------------------------
   Animazione comparsa parte
   -------------------------------------------------------------------------- */

.hangman-part.is-new {
    animation:
        hangmanPartReveal
        0.38s
        ease
        both;
}


@keyframes hangmanPartReveal {

    0% {
        opacity: 0;

        transform:
            scale(0.72);
    }

    70% {
        opacity: 1;

        transform:
            scale(1.08);
    }

    100% {
        opacity: 1;

        transform:
            scale(1);
    }
}

/* ==========================================================================
   HANGMAN — RESPONSIVE
   ========================================================================== */


/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {

    .hangman-keyboard {
        grid-template-columns:
            repeat(
                9,
                minmax(0, 1fr)
            );
    }

}


/* --------------------------------------------------------------------------
   Smartphone
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

    .hangman-play-box {
        margin-top: 22px;
    }


    .hangman-session-summary {
        grid-template-columns: 1fr;

        gap: 8px;
    }


    .hangman-session-summary > div {
        padding:
            11px
            13px;
    }


    .hangman-word {
        margin:
            26px auto
            22px;

        padding:
            12px
            4px;

        font-size:
            clamp(
                1.35rem,
                7vw,
                1.9rem
            );

        letter-spacing:
            0.20em;
    }


    .hangman-keyboard {
        grid-template-columns:
            repeat(
                7,
                minmax(0, 1fr)
            );

        gap: 6px;
    }


    .hangman-letter {
        min-height: 44px;

        padding:
            7px
            2px;

        border-radius:
            10px;

        font-size:
            0.88rem;
    }

}


/* --------------------------------------------------------------------------
   Smartphone molto stretto
   -------------------------------------------------------------------------- */

@media (max-width: 420px) {

    .hangman-keyboard {
        grid-template-columns:
            repeat(
                6,
                minmax(0, 1fr)
            );

        gap: 5px;
    }


    .hangman-letter {
        min-height: 42px;

        font-size:
            0.84rem;
    }


    .hangman-word {
        letter-spacing:
            0.16em;
    }

}


/* --------------------------------------------------------------------------
   Accessibilità
   -------------------------------------------------------------------------- */

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

    .hangman-letter {
        transition: none;
    }

}