/* ==========================================================
   PITAGORIX
   Modulo Giochi
   CSS condiviso delle pagine di gioco
   ========================================================== */

/* ==================================================
   Archivio dati
   ================================================== */

.archive-information {
    padding: 1rem 1.5rem;
}

.archive-information__content {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.archive-information__title {
    margin: 0;
    text-align: center;
    font-size: 1.15rem;
}

.archive-information__items {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.8rem;
}

.archive-information__item {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.archive-information__label {
    opacity: 0.75;
}

.archive-information__value {
    font-weight: 700;
}

.archive-information__separator {
    opacity: 0.45;
}

@media (max-width: 768px) {

    .archive-information {
        padding: 1rem;
    }

    .archive-information__items {
        flex-direction: column;
        gap: 0.45rem;
    }

    .archive-information__separator {
        display: none;
    }

}

/* ==========================================================
   GIOCHI - Filtri
   ========================================================== */

.lotto-filters {

    width: 100%;

    margin:
        0
        0
        1.25rem;

}

.lotto-filters__header {

    margin-bottom:
        0;

    text-align:
        center;

}

.lotto-filters__title {
    margin: 0;

    font-size: 1.25rem;
    line-height: 1.3;

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

.lotto-filters__description {
    margin: var(--space-xs) 0 0;

    font-size: 0.9375rem;
    line-height: 1.5;

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

.lotto-filters__controls {
    display: grid;
	width: 100%;
	min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.lotto-filter-field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lotto-filter-field + .lotto-filter-field {
    margin-top: var(--space-md);
}

.lotto-filter-field__label {
    display: inline-flex;
    align-items: center;

    gap: var(--space-xs);
    margin-bottom: var(--space-xs);

    font-size: 0.9375rem;
    font-weight: 700;

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

.lotto-filter-field__select {
    width: 100%;
    min-height: 3rem;

    padding:
        0.7rem
        2.5rem
        0.7rem
        0.875rem;

    font: inherit;
    font-size: 1rem;

    color: var(--text-primary);
    background-color: var(--surface-color);

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

    cursor: pointer;

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

.lotto-filter-field__select:hover {
    border-color: var(--primary-color);
}

.lotto-filter-field__select:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(247, 147, 26, 0.18);
}

.lotto-filters__actions {
    display: flex;
    align-items: stretch;
}

.lotto-reset-button {
    width: 100%;
    min-height: 3rem;

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

/* ==========================================================
   GIOCHI - Filtri - Tablet
   ========================================================== */

@media (min-width: 48rem) {

    .lotto-filters__controls {
        grid-template-columns:
            minmax(12rem, 1fr)
            minmax(12rem, 1fr);
    }

    .lotto-filters__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .lotto-reset-button {
        width: auto;
        min-width: 11rem;
    }

}

/* ==========================================================
   GIOCHI - Filtri - Desktop
   ========================================================== */

@media (min-width: 64rem) {

    .lotto-filters__controls {
        grid-template-columns:
            minmax(13rem, 1fr)
            minmax(13rem, 1fr)
            auto;
        align-items: end;
    }

    .lotto-filters__actions {
        grid-column: auto;
    }

    .lotto-reset-button {
		width: auto;
        white-space: nowrap;
    }

}

/* ==========================================================
   Lotto - Filtri desktop
   ========================================================== */

@media (min-width: 64rem) {

    .lotto-filters__controls:has(#wheelSelect) {

        grid-template-columns:
            minmax(12rem, 1fr)
            minmax(12rem, 1fr)
            minmax(12rem, 1fr)
            auto;

    }

}

/* ============================================================
 * Risultati estrazioni Lotto
 * ============================================================ */

.lotto-results__header {

    text-align: center;

}

.lotto-results__title {

    margin: 0;

}

.lotto-results__subtitle {

    margin-top: var(--space-sm);

}

.lotto-results__description {

    margin: var(--space-sm) 0 0;

    color: var(--text-secondary);

}

.lotto-results__summary {

    display: grid;

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

    gap: 1.5rem;

    margin-top: var(--space-lg);

    padding: 0;

}

.lotto-results__summary--single {

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

}

.lotto-results__summary-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.45rem;

}

.lotto-results__summary-item dt {

    margin: 0;
	
	font-size: 1rem;

    font-weight: 700;

    color: var(--text-secondary);

}

.lotto-results__summary-item dd {

    margin: 0;

    font-size: 1.35rem;

    line-height: 1.2;

    font-weight: 700;

}

/* ==========================================================
   Risultati estrazioni Lotto
   ========================================================== */

#latest-draw {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    margin-top: var(--space-xl);
}

#latest-draw > h2 {
    margin: var(--space-sm) 0 1.25rem;

    font-size: clamp(1.35rem, 2vw, 1.75rem);
    line-height: 1.3;
    color: var(--text-primary);
    text-align: center;
}

.draws-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    gap: var(--space-md);
}

/* ==========================================================
   Lotto - Tabella tutte le ruote
   Mobile-first
   ========================================================== */

.lotto-draw-table-wrapper {

    width: 100%;

    padding:
        0.2rem;

    background-color:
        var(--border-color);

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

    overflow: hidden;

}


.lotto-draw-table {

    width: 100%;

    table-layout: fixed;

    border-collapse: separate;
    border-spacing:
        0
        0.15rem;

}


.lotto-draw-table th,
.lotto-draw-table td {

    padding:
        0.35rem
        0.2rem;

    text-align: center;

    vertical-align: middle;

}


/* Intestazione */

.lotto-draw-table thead th {

    padding-top:
        0.5rem;

    padding-bottom:
        0.5rem;

    font-size:
        0.75rem;

    font-weight:
        700;

    color:
        var(--primary-dark);

    background-color:
        var(--primary-light);

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

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

}

/* Prima colonna */

.lotto-draw-table thead th:first-child,
.lotto-draw-table__wheel,
.lotto-draw-table__date {

    width:
        30%;

    padding-left:
        0.65rem;

    text-align:
        left;

}

/* Righe */

.lotto-draw-table tbody th,
.lotto-draw-table tbody td {

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

    border-top:
        1px solid
        rgba(0, 0, 0, 0.025);

    border-bottom:
        1px solid
        rgba(0, 0, 0, 0.025);

}

.lotto-draw-table tbody tr:nth-child(even) > th,
.lotto-draw-table tbody tr:nth-child(even) > td {

    background-color:
        color-mix(
            in srgb,
            var(--surface-color) 98%,
            var(--text-primary) 2%
        );

}

.lotto-draw-table__wheel,
.lotto-draw-table__date {

    font-size:
        0.78rem;

    font-weight:
        700;

    color:
        var(--text-primary);

}

.lotto-draw-table tbody
.lotto-draw-table__wheel {

    text-align:
        left;

}

/* Palline specifiche della tabella Lotto */

.lotto-draw-table
.number-ball {

    width:
        1.9rem;

    height:
        1.9rem;

    flex:
        0 0
        1.9rem;

    font-size:
        0.75rem;

    box-shadow:
        0
        0.1rem
        0.25rem
        rgba(247, 147, 26, 0.2);

}

/* Desktop */

@media (min-width: 64rem) {

    .lotto-draw-table-wrapper {

        max-width:
            60rem;

        margin-inline:
            auto;

        padding:
            0.3rem;

    }


    /* Intestazione */

    .lotto-draw-table thead th {

        font-size:
            1rem;

        padding-top:
            0.6rem;

        padding-bottom:
            0.6rem;

    }

    /* Allineamento prima colonna */

.lotto-draw-table thead th:first-child,
.lotto-draw-table tbody
.lotto-draw-table__wheel,
.lotto-draw-table tbody
.lotto-draw-table__date {

    padding-left:
        3rem;

    text-align:
        left;

}

    /* Nome ruota */

.lotto-draw-table__wheel,
.lotto-draw-table__date {

    font-size:
        1rem;

}

    /* Maggiore respiro tra le ruote */

    .lotto-draw-table tbody th,
    .lotto-draw-table tbody td {

        padding-top:
            0.5rem;

        padding-bottom:
            0.5rem;

    }

    /* Palline */

    .lotto-draw-table
    .number-ball {

        width:
            2.35rem;

        height:
            2.35rem;

        flex-basis:
            2.35rem;

        font-size:
            0.9375rem;

    }

}

#latest-draw.lotto-results__content--all-wheels-table {

    margin-top:
        0.4rem;

}

/* ==========================================================
   Lotto - Singola ruota - Singola estrazione
   ========================================================== */

#latest-draw.lotto-results__content--single-wheel-draw {

    margin-top:
        0.75rem;

}


.lotto-single-draw {

    position: relative;
	
	display: grid;

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

    align-items: center;

    gap:
        0.5rem;

    width: 100%;
    max-width: 38rem;

    margin-inline:
        auto;

    padding:
        1rem
        0.75rem;

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

    border:
        0.2rem solid
        var(--border-color);

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

    box-shadow:
        var(--shadow-soft);
		
	overflow: hidden;

}

.lotto-single-draw::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 2rem;

    background-color:
        var(--primary-light);

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

}

.lotto-single-draw__position {

    position: relative;
    
	z-index: 1;
	
	display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap:
        1.15rem;

    min-width: 0;

}

.lotto-single-draw__label {

    display:
        inline-block;

    font-size:
        0.75rem;

    font-weight:
        700;

    line-height:
        1;

    color:
        var(--primary-dark);
		
}

@media (max-width: 22rem) {

    .lotto-draw-table thead th:first-child,
    .lotto-draw-table__wheel {

        width:
            32%;

        padding-left:
            0.4rem;

    }


    .lotto-draw-table th,
    .lotto-draw-table td {

        padding-inline:
            0.1rem;

    }


    .lotto-draw-table__wheel {

        font-size:
            0.72rem;

    }


    .lotto-draw-table
    .number-ball {

        width:
            1.7rem;

        height:
            1.7rem;

        flex-basis:
            1.7rem;

        font-size:
            0.6875rem;

    }

}

@media (min-width: 64rem) {

    .lotto-single-draw {

        gap:
            1.25rem;

        padding:
            1.25rem
            1.5rem;
			
		border-width:
            0.3rem;

    }

    .lotto-single-draw::before {

        height:
            2.4rem;

    }

    .lotto-single-draw__label {

        font-size:
            0.9375rem;

    }

}

/* ==========================================================
   Lotto - Raggruppamento estrazioni per data
   ========================================================== */

.lotto-draw-groups {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;

    width: 100%;
}

.lotto-draw-date-group {
    width: 100%;
}

.lotto-draw-date-group__title {
    display: flex;
    align-items: center;

    gap: 1rem;

    width: 100%;
    max-width: 44rem;

    margin:
        0
        auto
        1.4rem;

    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;

    color: var(--text-primary);
    text-align: center;
}

.lotto-draw-date-group__title::before,
.lotto-draw-date-group__title::after {
    content: "";

    flex: 1;

    height: 1px;

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

/* ==========================================================
   Giochi - Griglia storico estrazioni
   ========================================================== */

@media (min-width: 48rem) {

    .lotto-draws-wrapper--single-wheel-history,
    .draws-wrapper--history-grid {

        display: grid;

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

        align-items: stretch;

        gap:
            var(--space-md)
            1rem;

        width: 100%;
        max-width: 72rem;

        margin:
            0
            auto;
    }


    #latest-draw
    .lotto-draws-wrapper--single-wheel-history
    .draw-card,
    #latest-draw
    .draws-wrapper--history-grid
    .draw-card {

        width: 100%;
        max-width: none;

    }

}


@media (min-width: 64rem) {

    .lotto-draws-wrapper--single-wheel-history,
    .draws-wrapper--history-grid {

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

        max-width: 78rem;

    }

}

/* ==========================================================
   Lotto - Griglia desktop tutte le ruote
   ========================================================== */

@media (min-width: 64rem) {

    .lotto-draws-wrapper--all-wheels {
        display: grid;

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

        align-items: stretch;

        gap:
            var(--space-md)
            1rem;

        width: 100%;
        max-width: 72rem;

        margin:
            0
            auto;
    }


    #latest-draw
    .lotto-draws-wrapper--all-wheels
    .draw-card {
        grid-column:
            span 2;

        width: 100%;
        max-width: none;
    }


    /*
     * Ultima riga con 2 ruote:
     * centrata nella griglia.
     */

    #latest-draw
    .lotto-draws-wrapper--all-wheels
    .draw-card:nth-last-child(2):nth-child(3n + 1) {
        grid-column:
            2 / span 2;
    }


    #latest-draw
    .lotto-draws-wrapper--all-wheels
    .draw-card:last-child:nth-child(3n + 2) {
        grid-column:
            4 / span 2;
    }

}

#latest-draw .draw-card {
    max-width: 44rem;
}

.draw-card {
    margin: 0;
    padding: var(--space-lg);

    border-left: 0.3rem solid var(--primary-color);
}

.draw-card-header {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
}

.draw-card .draw-card-header {
    flex-direction: column;
    gap: 0.35rem;
}

.draw-card .draw-card__date {
    margin: 0;

    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;

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

.draw-wheel {
    margin: 0;

    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.03em;

    color: var(--primary-dark);
    text-transform: uppercase;
}

.draw-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: var(--space-sm);
    margin-top: 1.25rem;
}

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

    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;

    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;

    color: #ffffff;
    background-color: var(--primary-color);

    border-radius: 50%;

    box-shadow:
        0 0.2rem 0.5rem rgba(247, 147, 26, 0.25);
}

/* ==========================================================
   SuperEnalotto - Numeri speciali
   ========================================================== */

.superenalotto-draw-card {

    width: 100%;

}

.superenalotto-special-numbers {

    display: flex;

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

    gap: 3rem;

    margin-top: 1.5rem;

}

.superenalotto-number-group {

    display: flex;

    flex-direction: column;

    align-items: center;

}

.superenalotto-number-label {

    margin: 0;

    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.03em;

    color: var(--primary-dark);

    text-transform: uppercase;

}

.superenalotto-special-label {

    margin: 0;

    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;

    color: var(--text-primary);

    text-transform: none;

}

.superenalotto-special-numbers
.draw-numbers {

    margin-top: 0.65rem;

}

.jolly-ball {

    background-color: #2E7D32;

    box-shadow:
        0 0.2rem 0.5rem rgba(46,125,50,.30);

}

.superstar-ball {

    background-color: #0D47A1;

    box-shadow:
        0 0.2rem 0.5rem rgba(13,71,161,.30);

}

/* ==========================================================
   SuperEnalotto - Singola estrazione
   ========================================================== */

#latest-draw.superenalotto-results__content--single-draw {

    margin-top:
        0.75rem;

}


.superenalotto-single-draw {

    width:
        100%;

    max-width:
        44rem;

    margin-inline:
        auto;

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

    border:
        0.2rem solid
        var(--border-color);

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

    box-shadow:
        var(--shadow-soft);

    overflow:
        hidden;

}


/* Sestina */

.superenalotto-single-draw__main {

    position:
        relative;

    display:
        grid;

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

    gap:
        0.25rem;

    width:
        100%;

    padding:
        1rem
        1.25rem
        1.5rem;

}


/* Fascia intestazione 1° - 6° */

.superenalotto-single-draw__main::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        2rem;

    background-color:
        var(--primary-light);

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

}


.superenalotto-single-draw__position {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        1rem;

    min-width:
        0;

}


.superenalotto-single-draw__position-label {

    font-size:
        0.75rem;

    font-weight:
        700;

    line-height:
        1;

    color:
        var(--primary-dark);

}


/* Numeri speciali */

.superenalotto-single-draw__specials {

    display:
        grid;

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

    width:
        100%;

    padding:
        1rem;

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

}


.superenalotto-single-draw__special {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.65rem;

    min-width:
        0;

}


.superenalotto-single-draw__special
    + .superenalotto-single-draw__special {

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

}


.superenalotto-single-draw__special-label {

    font-size:
        0.875rem;

    font-weight:
        700;

    line-height:
        1.2;

    color:
        var(--text-primary);

}


.superenalotto-single-draw__special-unavailable {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        2.75rem;

    font-weight:
        700;

    color:
        var(--text-secondary);

}

@media (min-width: 64rem) {

    .superenalotto-single-draw {

        border-width:
            0.3rem;

    }


    .superenalotto-single-draw__main {

        gap:
            0.75rem;

        padding:
            1rem
            1.25rem
            1.25rem;

    }


    .superenalotto-single-draw__main::before {

        height:
            2.4rem;

    }


    .superenalotto-single-draw__position {

        gap:
            1.15rem;

    }


    .superenalotto-single-draw__position-label {

        font-size:
            0.9375rem;

    }


    .superenalotto-single-draw__specials {

        padding:
            1.25rem
            1.5rem;

    }


    .superenalotto-single-draw__special-label {

        font-size:
            1rem;

    }

}

/* ==========================================================
   SuperEnalotto - Storico estrazioni
   ========================================================== */

.superenalotto-history {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.9rem;

    width:
        100%;

    max-width:
        60rem;

    margin-inline:
        auto;

}


.superenalotto-history__draw {

    width:
        100%;

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

    border:
        0.2rem solid
        var(--border-color);

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

    overflow:
        hidden;

}


/* Data */

.superenalotto-history__date {

    margin:
        0;

    padding:
        0.6rem
        0.75rem;

    font-size:
        0.9rem;

    font-weight:
        700;

    line-height:
        1.2;

    color:
        var(--text-primary);

    background-color:
        var(--primary-light);

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

    text-align:
        center;

}


/* Sestina */

.superenalotto-history__main {

    display:
        grid;

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

    gap:
        0.15rem;

    width:
        100%;

    padding:
        0.75rem
        0.25rem;

}


.superenalotto-history__position {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.4rem;

    min-width:
        0;

}


.superenalotto-history__position-label {

    font-size:
        0.7rem;

    font-weight:
        700;

    line-height:
        1;

    color:
        var(--primary-dark);

}


/* Palline storico */

.superenalotto-history
.number-ball {

    width:
        2.15rem;

    height:
        2.15rem;

    flex:
        0 0
        2.15rem;

    font-size:
        0.8rem;

}


/* Jolly e SuperStar */

.superenalotto-history__specials {

    display:
        grid;

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

    width:
        100%;

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

}


.superenalotto-history__special {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.5rem;

    min-width:
        0;

    padding:
        0.65rem
        0.5rem;

}


.superenalotto-history__special
    + .superenalotto-history__special {

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

}


.superenalotto-history__special-label {

    font-size:
        0.75rem;

    font-weight:
        700;

    color:
        var(--text-primary);

}


.superenalotto-history__special-unavailable {

    font-weight:
        700;

    color:
        var(--text-secondary);

}

/* ==========================================================
   Eurojackpot
   ========================================================== */

.eurojackpot-draw-card {

    width: 100%;

}

.eurojackpot-draw-card
.superenalotto-number-group {

    width: 100%;

    align-items: center;

}

.eurojackpot-euronumbers-group {

    margin-top: 1.5rem;

}

.eurojackpot-euronumbers-group
.draw-numbers {

    margin-top: 0.65rem;

}

.euronumber-ball {

    background-color: #1f4e79;

    color: #ffffff;

}

/* ==========================================================
   Eurojackpot - Singola estrazione
   ========================================================== */

#latest-draw.eurojackpot-results__content--single-draw {

    margin-top:
        0.75rem;

}


.eurojackpot-single-draw {

    position:
        relative;

    width:
        100%;

    max-width:
        38rem;

    margin-inline:
        auto;

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

    border:
        0.2rem solid
        var(--border-color);

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

    box-shadow:
        var(--shadow-soft);

    overflow:
        hidden;

}


/* Cinquina */

.eurojackpot-single-draw__main {

    position:
        relative;

    display:
        grid;

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

    align-items:
        center;

    gap:
        0.5rem;

    width:
        100%;

    padding:
        1rem
        0.75rem;

}


.eurojackpot-single-draw__main::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        2rem;

    background-color:
        var(--primary-light);

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

}


.eurojackpot-single-draw__position {

    position:
        relative;

    z-index:
        1;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        1.15rem;

    min-width:
        0;

}


.eurojackpot-single-draw__position-label {

    font-size:
        0.75rem;

    font-weight:
        700;

    line-height:
        1;

    color:
        var(--primary-dark);

}


/* Euronumeri */

.eurojackpot-single-draw__euronumbers {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.75rem;

    width:
        100%;

    padding:
        1rem;

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

}


.eurojackpot-single-draw__euronumbers-label {

    font-size:
        0.875rem;

    font-weight:
        700;

    line-height:
        1.2;

    color:
        var(--text-primary);

}


.eurojackpot-single-draw__euronumbers-values {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        1rem;

}

@media (min-width: 64rem) {

    .eurojackpot-single-draw {

        border-width:
            0.3rem;

    }


    .eurojackpot-single-draw__main {

        gap:
            1.25rem;

        padding:
            1.25rem
            1.5rem
            1.5rem;

    }


    .eurojackpot-single-draw__main::before {

        height:
            2.4rem;

    }


    .eurojackpot-single-draw__position-label {

        font-size:
            0.9375rem;

    }


    .eurojackpot-single-draw__euronumbers {

        padding:
            1.25rem
            1.5rem;

    }


    .eurojackpot-single-draw__euronumbers-label {

        font-size:
            1rem;

    }

}

/* ==========================================================
   Eurojackpot - Storico estrazioni
   ========================================================== */

.eurojackpot-history {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.9rem;

    width:
        100%;

    max-width:
        60rem;

    margin-inline:
        auto;

}


.eurojackpot-history__draw {

    width:
        100%;

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

    border:
        0.2rem solid
        var(--border-color);

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

    overflow:
        hidden;

}


/* Data */

.eurojackpot-history__date {

    margin:
        0;

    padding:
        0.6rem
        0.75rem;

    font-size:
        0.9rem;

    font-weight:
        700;

    line-height:
        1.2;

    color:
        var(--text-primary);

    background-color:
        var(--primary-light);

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

    text-align:
        center;

}


/* Cinquina */

.eurojackpot-history__main {

    display:
        grid;

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

    gap:
        0.15rem;

    width:
        100%;

    padding:
        0.75rem
        0.5rem;

}


.eurojackpot-history__position {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.4rem;

    min-width:
        0;

}


.eurojackpot-history__position-label {

    font-size:
        0.7rem;

    font-weight:
        700;

    line-height:
        1;

    color:
        var(--primary-dark);

}


/* Palline storico */

.eurojackpot-history
.number-ball {

    width:
        2.15rem;

    height:
        2.15rem;

    flex:
        0 0
        2.15rem;

    font-size:
        0.8rem;

}


/* Euronumeri */

.eurojackpot-history__euronumbers {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.75rem;

    width:
        100%;

    padding:
        0.65rem
        0.75rem;

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

}


.eurojackpot-history__euronumbers-label {

    font-size:
        0.75rem;

    font-weight:
        700;

    color:
        var(--text-primary);

}


.eurojackpot-history__euronumbers-values {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.5rem;

}

/* ==========================================================
   Messaggi e stati del modulo Lotto
   ========================================================== */

.draw-message,
.draw-error {
    max-width: 44rem;
    margin: var(--space-md) auto 0;

    font-size: 1rem;
    text-align: center;
}

.draw-message--loading {
    position: relative;
    padding-top: 3.75rem;
}

.draw-message--loading::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 50%;

    width: 1.5rem;
    height: 1.5rem;

    border: 0.2rem solid var(--primary-light);
    border-top-color: var(--primary-color);
    border-radius: 50%;

    transform: translateX(-50%);
    animation: lotto-loading-spin 0.8s linear infinite;
}

.draw-error {
    color: #8a2d0b;
    background-color: #fff4ed;
    border: 1px solid rgba(247, 147, 26, 0.45);
}

@keyframes lotto-loading-spin {

    to {
        transform: translateX(-50%) rotate(360deg);
    }

}

/* ==========================================================
   Modulo Lotto - Mobile
   ========================================================== */

@media (max-width: 47.9375rem) {

    .lotto-results__summary {

        grid-template-columns: 1fr;

        gap: var(--space-sm);

        margin-top: var(--space-md);

    }

}

@media (max-width: 47.9375rem) {

    #latest-draw {
        width: 100%;
        padding-inline: 0;
    }

    #latest-draw > h2 {
        margin: 0.5rem 0 1rem;
        font-size: 1.35rem;
        line-height: 1.3;
        text-align: center;
    }

    #latest-draw .draw-card {
        max-width: 100%;
    }

    .draws-wrapper {
        width: 100%;
        gap: 0.875rem;
    }

    .draw-wheel {
        font-size: 1.1rem;
    }

	.draw-message,
	.draw-error {
    max-width: 100%;
    margin-top: 0.75rem;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
	}

	.draw-card {
    padding: 1.25rem var(--space-md);
	}

	.draw-numbers {
    gap: 0.625rem;
	}

	.number-ball {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;

    font-size: 1rem;
	}

/* Allineamento prima colonna */

.lotto-draw-table thead tr > th:first-child,
.lotto-draw-table tbody tr > th.lotto-draw-table__wheel,
.lotto-draw-table tbody tr > th.lotto-draw-table__date {

    padding-left:
        0.5rem;

    text-align:
        left;

}

}

/* ==========================================================
   Modulo Lotto - Smartphone compatti
   ========================================================== */

@media (max-width: 22rem) {

    .draw-card {
        padding-inline: var(--space-sm);
    }

    .draw-numbers {
        gap: var(--space-xs);
    }

    .number-ball {
        width: 2.5rem;
        height: 2.5rem;
        flex-basis: 2.5rem;

        font-size: 0.9375rem;
    }

}

/* Riduzione delle animazioni per accessibilità */

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

    .draw-message--loading::before {
        animation: none;
    }

}

/* ============================================================
 * Navigazione statistiche Lotto
 * Mobile-first
 * ============================================================ */

.lotto-statistics-navigation {
    width: 100%;
    margin: 24px 0;
    overflow: hidden;
}

.lotto-statistics-navigation__scroll {
    display: flex;
    gap: 8px;
    width: 100%;
    padding: 4px 16px 12px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;

    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.lotto-statistics-navigation__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-height: 44px;
    padding: 10px 16px;

    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;

    color: var(--text-primary);
    background-color: var(--surface-color);

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

    cursor: pointer;
    scroll-snap-align: start;

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

.lotto-statistics-navigation__item:hover:not(:disabled) {
    transform: translateY(-0.0625rem);
}

.lotto-statistics-navigation__item:active:not(:disabled) {
    transform: translateY(0);
}

.lotto-statistics-navigation__item:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 0.2rem rgba(247, 147, 26, 0.2);
}

.lotto-statistics-navigation__item--active {
    color: #ffffff;

    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.lotto-statistics-navigation__item--active:hover:not(:disabled) {
    color: #ffffff;

    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.lotto-statistics-navigation__item:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Tablet e desktop */

@media (min-width: 768px) {

    .lotto-statistics-navigation__scroll {
        justify-content: center;
        flex-wrap: wrap;
        padding-inline: 24px;
        overflow-x: visible;
    }

}

/* ============================================================
 * Navigazione pagine Lotto
 * ============================================================ */

.lotto-page-navigation {

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

    gap: var(--space-md);

    margin:
        var(--space-lg)
        0;

}

.lotto-page-navigation__button {

    min-width: 13rem;

}

@media (max-width: 47.9375rem) {

    .lotto-page-navigation {

        flex-direction: column;

        align-items: stretch;

    }

    .lotto-page-navigation__button {

        width: 100%;

    }

}

/* ============================================================
 * Intestazione pagina statistiche Lotto
 * ============================================================ */

.lotto-statistics-header {
    width: 100%;
    text-align: center;
}

.lotto-statistics-header__title {
    margin: 0;

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

.lotto-statistics-header__subtitle {
    margin: var(--space-md) 0 0;

    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 700;
    line-height: 1.3;

    color: var(--primary-dark);
}

.lotto-statistics-header__description {
    max-width: 52rem;
    margin: var(--space-sm) auto 0;

    font-size: 1rem;
    line-height: 1.6;

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

/* ============================================================
 * Statistiche Lotto - Configurazione analisi - Desktop
 * ============================================================ */

@media (min-width: 64rem) {

    .lotto-statistics-page
    .lotto-statistics-filters__controls {

        display:
            grid;

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

        column-gap:
            var(--space-md);

        row-gap:
            0;

        align-items:
            end;

    }


    /*
     * I tre campi principali sono affiancati:
     * Ruota / Gruppo / Analisi.
     */

    .lotto-statistics-page
    .lotto-statistics-filters__controls
    > .lotto-filter-field
    + .lotto-filter-field {

        margin-top:
            0;

    }


    /*
     * Le opzioni specifiche delle analisi
     * continuano a occupare tutta la larghezza.
     */

    .lotto-statistics-page
    .lotto-statistics-filters__controls
    > .statistics-never-observed-options {

        grid-column:
            1 / -1;

    }


    /*
     * Anche i pulsanti finali occupano
     * tutta la larghezza.
     */

    .lotto-statistics-page
    .lotto-statistics-filters__controls
    > .lotto-statistics-filters__actions {

        grid-column:
            1 / -1;

    }

}

/* ============================================================
 * Statistiche SuperEnalotto / Eurojackpot
 * Configurazione analisi - Mobile first
 * ============================================================ */

.superenalotto-statistics-page
.lotto-statistics-filters__controls {

    display:
        grid;

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

}


/* ============================================================
 * Statistiche SuperEnalotto / Eurojackpot
 * Configurazione analisi - Desktop
 * ============================================================ */

@media (min-width: 64rem) {

    .superenalotto-statistics-page
    .lotto-statistics-filters__controls {

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

        column-gap:
            var(--space-md);

        row-gap:
            0;

        align-items:
            end;

    }


    .superenalotto-statistics-page
    .lotto-statistics-filters__controls
    > .lotto-filter-field
    + .lotto-filter-field {

        margin-top:
            0;

    }


    .superenalotto-statistics-page
    .lotto-statistics-filters__controls
    > .statistics-never-observed-options {

        grid-column:
            1 / -1;

    }


    .superenalotto-statistics-page
    .lotto-statistics-filters__controls
    > .lotto-statistics-filters__actions {

        grid-column:
            1 / -1;

    }

}

/* ============================================================
 * Azioni filtri statistiche Lotto
 * ============================================================ */

.lotto-statistics-filters__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;

    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.lotto-statistics-filters__actions .btn {
    width: 100%;
}

@media (min-width: 48rem) {

    .lotto-statistics-filters__actions {
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .lotto-statistics-filters__actions .btn {
        width: auto;
    }

}

/* ============================================================
 * Statistiche Lotto - Informazioni categoria
 * Mobile-first
 * ============================================================ */

.lotto-statistics-category-info {
    width: 100%;
    min-width: 0;

    margin:
        0.4rem
        0
        var(--space-md);

    padding: 0.75rem;
    background-color: var(--surface-color);
    border: 1px solid var(--border-color);
    border-left: 0.2rem solid var(--primary-color);
    border-radius: var(--radius-md);
}

.lotto-statistics-category-info__content {
    min-width: 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text-secondary);
	text-align: left;
}

.lotto-statistics-category-info__description {

    margin: 0 0 0.5rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* ============================================================
 * Laboratorio - Layout sezioni principali
 * Mobile-first
 * ============================================================ */

.laboratory-page > .card + .card {

    margin-top:
        var(--space-lg);

}

/* ============================================================
 * Laboratorio - Nota sperimentale
 * Mobile-first
 * ============================================================ */

.laboratory-experimental-note
.card__body {

    padding:
        var(--space-md);

}


.laboratory-experimental-note p {

    max-width:
        60rem;

    margin:
        0
        auto;

    font-size:
        0.9375rem;

    line-height:
        1.5;

    color:
        var(--text-secondary);

    text-align:
        center;

}

/* ============================================================
 * Laboratorio - Configurazione
 * Mobile-first
 * ============================================================ */

.laboratory-page
.lotto-statistics-filters__controls {

    display:
        grid;

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

}


/* ============================================================
 * Laboratorio - Configurazione - Desktop
 * ============================================================ */

@media (min-width: 64rem) {

    .laboratory-page
    .lotto-statistics-filters__controls {

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

        column-gap:
            var(--space-md);

        row-gap:
            var(--space-md);

        align-items:
            end;

    }


    .laboratory-page
    .lotto-statistics-filters__controls
    > .lotto-filter-field:first-child {

        grid-column:
            1;

        grid-row:
            1;

    }

/*
 * Se la Ruota non è disponibile,
 * il campo Gioco utilizza entrambe le colonne.
 */

.laboratory-page
.lotto-statistics-filters__controls:has(
    #laboratoryWheelField[hidden]
)
> .lotto-filter-field:first-child {

    grid-column:
        1 / -1;

}

    .laboratory-page
    #laboratoryWheelField {

        grid-column:
            2;

        grid-row:
            1;

    }


    .laboratory-page
    #laboratoryGameInfo {

        grid-column:
            1 / -1;

        grid-row:
            2;

    }

}

/* ============================================================
 * Laboratorio - Esecuzione
 * Mobile-first
 * ============================================================ */

.laboratory-execution {

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        center;

    align-items:
        center;

    gap:
        var(--space-sm);

}


.laboratory-execution > p {

    width:
        100%;

    margin:
        0;

    text-align:
        center;

}


.laboratory-execution .btn {

    width:
        100%;

}


/* Tablet e desktop */

@media (min-width: 48rem) {

    .laboratory-execution .btn {

        width:
            auto;

    }

}

/* ============================================================
 * Laboratorio - Manuale
 * ============================================================ */

.laboratory-manual-link {
    display:
        block;

    width:
        fit-content;

    margin-top:
        0.5rem;

    font-size:
        0.8rem;

    font-weight:
        700;

    line-height:
        1.4;

    color:
        var(--primary-dark);

    text-decoration:
        none;
}

.laboratory-manual-link:hover {
    color:
        var(--primary-color);

    text-decoration:
        underline;
}

.laboratory-manual-link:focus-visible {
    outline:
        2px solid
        var(--primary-color);

    outline-offset:
        0.2rem;

    border-radius:
        0.2rem;
}

/* ============================================================
 * Statistiche - Collegamento al Manuale
 * ============================================================ */

.statistics-manual-link {

    display:
        none;

    margin:
        0.25rem
        0
        var(--space-md);

    text-align:
        center;

}


/*
 * Il collegamento viene mostrato soltanto
 * quando il pannello informativo è visibile.
 */

#statisticsCategoryInfo:not([hidden])
    + .statistics-manual-link {

    display:
        block;

}


.statistics-manual-link__anchor {

    display:
        inline-flex;

    align-items:
        center;

    font-size:
        0.8rem;

    font-weight:
        700;

    line-height:
        1.4;

    color:
        var(--primary-dark);

    text-decoration:
        none;

}


.statistics-manual-link__anchor:hover {

    color:
        var(--primary-color);

    text-decoration:
        underline;

}


.statistics-manual-link__anchor:focus-visible {

    outline:
        2px solid
        var(--primary-color);

    outline-offset:
        0.2rem;

    border-radius:
        0.2rem;

}

/* ============================================================
 * Introduzione gruppo di statistiche
 * ============================================================ */

.lotto-statistics-category-info__intro {

    margin-bottom: 0.5rem;

}

.lotto-statistics-category-info__category-title {

    margin: 0.15rem 0 0.25rem;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;

    color: var(--primary-color);

}

.lotto-statistics-category-info__content p {

    margin: 0;

    line-height: 1.45;
}

.lotto-statistics-category-info__content p + p {
    margin-top: 0.2rem;
}

/* ============================================================
 * Gruppo numeri categoria
 * ============================================================ */

.lotto-statistics-category-info__group {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-top: 0.35rem;
}

.lotto-statistics-category-info__group-title {

    flex: 0 0 4.5rem;

    text-align: left;

    font-size: 0.75rem;

    font-weight: 600;

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

.lotto-statistics-category-info__numbers {

    display: flex;

    flex-wrap: wrap;

    gap: 0.3rem;

    flex: 1;
}

.lotto-statistics-category-info .number-ball {
    width: 1.9rem;
    height: 1.9rem;
    flex: 0 0 1.9rem;

    font-size: 0.75rem;

    box-shadow:
        0 0.1rem 0.25rem rgba(247, 147, 26, 0.2);
}

/* Mobile */

@media (max-width: 40rem) {

    .lotto-statistics-category-info__group {
        display: block;
    }

    .lotto-statistics-category-info__group
        > .lotto-statistics-category-info__group-title {

    width: 100%;
    margin-bottom: 0.35rem;
    text-align: center;
}

    .lotto-statistics-category-info__numbers {
        justify-content: center;
    }

}

/* Smartphone compatti */

@media (max-width: 22rem) {

    .lotto-statistics-category-info {
        padding: 0.625rem;
    }

    .lotto-statistics-category-info .number-ball {
        width: 1.7rem;
        height: 1.7rem;
        flex-basis: 1.7rem;

        font-size: 0.6875rem;
    }

    .lotto-statistics-category-info__numbers {
        gap: 0.25rem;
    }

}

.lotto-statistics-results {

    margin-top:
        var(--space-lg);

}

/* ============================================================
 * Statistiche Lotto - Riepilogo risultati
 * ============================================================ */

.lotto-statistics-results__header {
    text-align: left;
}

.lotto-statistics-results__title {
    margin: 0;
    text-align: center;
}

.lotto-statistics-results__description {
    margin: var(--space-sm) 0 0;
    text-align: center;
    color: var(--text-muted);
}

.lotto-statistics-results__summary {

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

    gap: 1.5rem;

    margin: 1.5rem 0 0;
    padding: 0;

}

.lotto-statistics-results__summary-item {

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

    gap: 0.20rem;

    min-width: 0;

    text-align: center;

}

.lotto-statistics-results__summary-item dt {
    margin: 0;

    font-size: 0.9375rem;
    line-height: 1.4;
    font-weight: 700;

    color: var(--text-secondary);

    text-align: center;
}

.lotto-statistics-results__summary-item dd {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-height: 1.75rem;

    margin: 0;

    font-size: 1rem;
    line-height: 1.4;
    font-weight: 700;

    color: var(--text-primary);

    text-align: center;
}

.lotto-statistics-results__summary-extra {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(14rem, 1fr)
        );

    gap: 1.5rem;

    margin-top: 2rem;
	
	padding-top: 1.5rem;

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

}

@media (min-width: 64rem) {

    .lotto-statistics-results__summary-extra {

        grid-template-columns:
            repeat(
                auto-fit,
                minmax(11rem, 1fr)
            );

    }

}

/* ============================================================
 * Statistiche - Azioni risultati
 * ============================================================ */

.statistics-results__actions {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        var(--space-sm);

    margin-top:
        var(--space-lg);

}


.statistics-results__actions[hidden] {

    display:
        none;

}


.statistics-results__export-help {

    margin:
        0;

    font-size:
        0.875rem;

    text-align:
        center;

    color:
        var(--text-muted);

}


@media (max-width: 47.9375rem) {

    .statistics-results__actions
    .btn {

        width:
            100%;

    }

}

/* ============================================================
 * Statistiche SuperEnalotto - Riepilogo risultati
 * ============================================================ */

.superenalotto-statistics-results__summary {

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

}

/* ============================================================
 * Gruppi testuali categoria
 * ============================================================ */

.lotto-statistics-category-info__text-group {

    margin-bottom: 0.75rem;

}

.lotto-statistics-category-info__text-group:last-child {

    margin-bottom: 0;

}

.lotto-statistics-category-info__text-group p {

    margin: 0.35rem 0;

    line-height: 1.35;

}

.lotto-statistics-category-info__indicators-title {
    margin-top: 0.35rem;
	margin-bottom: 0.35rem;

    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;

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

.lotto-statistics-category-info__indicators {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.75rem;
    line-height: 1.45;
}

.lotto-statistics-category-info__indicators li {

    margin: 0.15rem 0;
}

.lotto-statistics-category-info__indicators li + li {
    margin-top: 0.1rem;
}

/* Mobile */

@media (max-width: 47.9375rem) {

    .lotto-statistics-results__summary {

        grid-template-columns: 1fr;

        gap: 1rem;
        margin-top: var(--space-sm);

    }

    .lotto-statistics-results__summary-item {

        padding: 0;

    }

}

/* ============================================================
 * Statistiche Lotto - Contenuto celle tabella
 * ============================================================ */

.statistics-cell-value {
    display: block;
}

.statistics-cell-note {
    display: block;

    margin-top: 0.2rem;

    font-size: 0.75rem;
    line-height: 1.3;
    font-style: italic;

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

/* ============================================================
 * Statistiche - Gruppi numerici nei risultati
 * Decine / Cadenze / Figure
 * ============================================================ */

.statistics-number-group {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.3rem;

    width:
        fit-content;

    max-width:
        100%;

    margin-inline:
        auto;

}


.statistics-number-group
.number-ball {

    width:
        1.9rem;

    height:
        1.9rem;

    flex:
        0 0 1.9rem;

    font-size:
        0.75rem;

    box-shadow:
        0 0.1rem 0.25rem
        rgba(247, 147, 26, 0.2);

}

@media (max-width: 47.9375rem) {

    .statistics-number-group {

        gap:
            0.2rem;

    }


    .statistics-number-group
    .number-ball {

        width:
            1.55rem;

        height:
            1.55rem;

        flex-basis:
            1.55rem;

        font-size:
            0.65rem;

    }

}

/* ============================================================
 * Statistiche - Opzioni Combinazioni mai verificate
 * ============================================================ */

.statistics-never-observed-options {

    display: flex;
    flex-direction: column;

    gap: var(--space-md);

    width: 100%;

    margin-top:
        var(--space-md);

}


/* ============================================================
 * Statistiche - Pannello numeri
 * ============================================================ */

.statistics-number-panel {

    width: 100%;

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

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

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

    overflow:
        hidden;

}


.statistics-number-panel__summary {

    display: flex;

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

    gap:
        var(--space-md);

    width: 100%;

    padding:
        1rem
        1.25rem;

    font-weight:
        700;

    color:
        var(--text-primary);

    cursor:
        pointer;

    user-select:
        none;

}


.statistics-number-panel__summary::-webkit-details-marker {

    display:
        none;

}


.statistics-number-panel__summary::marker {

    content:
        "";

}


.statistics-number-panel__summary::after {

    content:
        "▼";

    flex:
        0 0 auto;

    margin-left:
        var(--space-sm);

    font-size:
        0.8rem;

    transition:
        transform 0.2s ease;

}


.statistics-number-panel[open]
.statistics-number-panel__summary::after {

    transform:
        rotate(180deg);

}


.statistics-number-panel__summary:hover {

    background-color:
        rgba(0, 0, 0, 0.025);

}


.statistics-number-panel__summary:focus-visible {

    outline:
        2px solid
        var(--primary-color);

    outline-offset:
        -2px;

}


.statistics-number-panel__main {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    text-align:
        left;

}


.statistics-number-panel__selection {

    margin-top:
        0.2rem;

    font-size:
        0.8125rem;

    font-weight:
        500;

    line-height:
        1.35;

    color:
        var(--text-secondary);

}


.statistics-number-panel__counter {

    margin-left:
        auto;

    font-size:
        0.875rem;

    font-weight:
        600;

    color:
        var(--text-secondary);

    white-space:
        nowrap;

}


.statistics-number-panel__content {

    padding:
        0
        1.25rem
        1.25rem;

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

}


.statistics-number-panel__help {

    margin:
        1rem
        0
        0;

    font-size:
        0.875rem;

    line-height:
        1.45;

    text-align:
        center;

    color:
        var(--text-secondary);

}


/* ============================================================
 * Statistiche - Griglia numerica
 * ============================================================ */

.statistics-number-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(2.75rem, 1fr)
        );

    gap:
        0.5rem;

    margin-top:
        0.75rem;

}


.statistics-number {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        0;

    min-height:
        2.75rem;

    padding:
        0.4rem;

    font:
        inherit;

    font-weight:
        600;

    color:
        var(--text-primary);

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

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

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

    cursor:
        pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

}

.statistics-number:disabled {

    cursor:
        not-allowed;

    opacity:
        0.55;

    transform:
        none;

}


.statistics-number:disabled:hover {

    border-color:
        var(--border-color);

}

.statistics-number:hover {

    border-color:
        var(--primary-color);

}


.statistics-number:focus-visible {

    outline:
        none;

    box-shadow:
        0 0 0 0.2rem
        rgba(247, 147, 26, 0.2);

}


/* Numero obbligatorio selezionato */

.statistics-number.is-selected {

    font-weight:
        700;

    color:
        #ffffff;

    background-color:
        var(--primary-color);

    border-color:
        var(--primary-color);

    transform:
        scale(1.05);

}


/* ============================================================
 * Statistiche - Numeri - Mobile
 * ============================================================ */

@media (max-width: 30rem) {

    .statistics-number-panel__summary {

        padding:
            0.875rem
            1rem;

        gap:
            var(--space-sm);

    }


    .statistics-number-panel__counter {

        font-size:
            0.8125rem;

    }


    .statistics-number-panel__content {

        padding:
            0
            1rem
            1rem;

    }


    .statistics-number-grid {

        grid-template-columns:
            repeat(
                auto-fill,
                minmax(2.5rem, 1fr)
            );

        gap:
            0.4rem;

    }


    .statistics-number {

        min-height:
            2.5rem;

        font-size:
            0.9375rem;

    }

    .statistics-summary-percentage {
        font-weight: 400;
    }

}

/* ============================================================
 * Laboratorio - Messaggio informativo vincoli
 * ============================================================ */

.laboratory-constraints-notice {

    width: 100%;
    max-width: 56rem;

    margin:
        0
        auto
        1.5rem;

    padding:
        0.875rem
        1.25rem;

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

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

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

    text-align: center;

}

.laboratory-constraints-notice__primary {

    font-weight: 600;
    line-height: 1.45;

    color:
        var(--text-primary);

}

.laboratory-constraints-notice__secondary {

    margin-top:
        0.3rem;

    font-size:
        0.875rem;

    font-weight:
        400;

    line-height:
        1.45;

    color:
        var(--text-secondary);

}

/* ============================================================
 * Laboratorio - Contenitore vincoli
 * Mobile-first
 * ============================================================ */

#laboratoryNumberSelection {

    width:
        100%;

    max-width:
        56rem;

    margin-inline:
        auto;

}

/* ============================================================
 * Laboratorio - Pannelli numeri espandibili
 * ============================================================ */

.laboratory-number-panel {

    width: 100%;

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

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

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

    overflow: hidden;

}

.laboratory-number-panel__summary {

    display: flex;

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

    width: 100%;

    padding: 1rem 1.25rem;

    font-weight: 700;

    color: var(--text-primary);

    cursor: pointer;

    user-select: none;

}

.laboratory-number-panel__summary::-webkit-details-marker {

    display: none;

}

.laboratory-number-panel__summary::marker {

    content: "";

}

.laboratory-number-panel__summary::after {

    content: "▼";

    margin-left: 1rem;

    font-size: 0.8rem;

    transition:
        transform 0.2s ease;

}

.laboratory-number-panel[open]
.laboratory-number-panel__summary::after {

    transform: rotate(180deg);

}

.laboratory-number-panel__summary:hover {

    background-color:
        rgba(0, 0, 0, 0.025);

}

.laboratory-number-panel__summary:focus-visible {

    outline:
        2px solid
        var(--primary-color);

    outline-offset: -2px;

}

.laboratory-number-panel__content {

    padding:
        0
        1.25rem
        1.25rem;

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

}

.laboratory-number-panel__content
.form-help {

    margin-top: 1rem;

    text-align: center;

}

.laboratory-number-panel__content
.laboratory-constraint-panel__help {

    margin-top:
        1rem;

}

.laboratory-number-panel__counter {

    margin-left: auto;

    font-size: 0.875rem;
    font-weight: 600;

    color: var(--text-secondary);

    white-space: nowrap;

}

.laboratory-number-panel__counter.is-active {

    color:
        var(--primary-dark);

}

.laboratory-number-panel__main {

    display: flex;

    flex-direction: column;

    min-width: 0;
	
	text-align: left;

}

.laboratory-number-panel__selection {

    margin-top: 0.2rem;

    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.35;

    color: var(--text-secondary);

}

.laboratory-number-grid {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(2.75rem, 1fr)
        );

    gap: 0.5rem;

    margin-top: 0.75rem;

}

.laboratory-number {

    display: flex;

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

    min-width: 0;
    min-height: 2.75rem;

    padding: 0.4rem;

    font: inherit;
    font-weight: 600;

    color: var(--text-primary);
    background-color: var(--surface-color);

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

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

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;

}

.laboratory-number-grid--fixed
.laboratory-number.is-selected {

    font-weight: 700;

    color: #ffffff;

    background-color: var(--primary-color);

    border-color: var(--primary-color);

    transform: scale(1.05);

}

.laboratory-number-grid--excluded
.laboratory-number.is-selected {

    font-weight: 700;

    color: #ffffff;

    background-color: #b42318;

    border-color: #b42318;

    transform: scale(1.05);

}

/* ============================================================
 * Laboratorio - Pannello constraint espandibile
 * Pari / Dispari
 * ============================================================ */

.laboratory-constraint-panel {

    width: 100%;

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

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

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

    overflow: hidden;

}


.laboratory-constraint-panel__summary {

    display: flex;

    align-items: center;

    width: 100%;

    padding:
        1rem
        1.25rem;

    font-weight: 700;

    color: var(--text-primary);

    cursor: pointer;

    user-select: none;

}


.laboratory-constraint-panel__summary::-webkit-details-marker {

    display: none;

}


.laboratory-constraint-panel__summary::marker {

    content: "";

}


.laboratory-constraint-panel__summary::after {

    content: "▼";

    margin-left: 1rem;

    font-size: 0.8rem;

    transition:
        transform 0.2s ease;

}


.laboratory-constraint-panel[open]
.laboratory-constraint-panel__summary::after {

    transform: rotate(180deg);

}


.laboratory-constraint-panel__summary:hover {

    background-color:
        rgba(0, 0, 0, 0.025);

}


.laboratory-constraint-panel__summary:focus-visible {

    outline:
        2px solid
        var(--primary-color);

    outline-offset: -2px;

}

.laboratory-constraint-panel__title {

    min-width: 0;

    text-align: left;

}

.laboratory-constraint-panel__help-button {

    flex:
        0 0 auto;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        1.40rem;

    height:
        1.40rem;

    margin-left:
        0.5rem;

    padding:
        0;

    font-size:
        0.80rem;

    font-weight:
        700;

    line-height:
        1;

    color:
        var(--primary-dark);

    background-color:
        var(--primary-light);

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

    border-radius:
        50%;

    cursor:
        pointer;

}

.laboratory-constraint-panel__help-button:hover {

    color:
        #ffffff;

    background-color:
        var(--primary-color);

}

.laboratory-constraint-panel__help-button:focus-visible {

    outline:
        2px solid
        var(--primary-color);

    outline-offset:
        2px;

}

.laboratory-constraint-panel__help {

    max-width:
        52rem;

    margin:
        0
        auto
        1rem;

    padding:
        0.75rem
        1rem;

    font-size:
        0.875rem;

    line-height:
        1.5;

    text-align:
        left;

    color:
        var(--text-secondary);

    background-color:
        var(--primary-light);

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

}

.laboratory-constraint-panel__status {

    margin-left: auto;

    font-size: 0.875rem;
    font-weight: 600;

    color: var(--text-secondary);

    white-space: nowrap;

}

.laboratory-constraint-panel__status.is-active {

    color:
        var(--primary-dark);

}

.laboratory-constraint-panel__content {

    padding:
        1rem
        1.25rem
        1.25rem;

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

}

.laboratory-constraint-panel__toggle-row {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    font-weight: 700;

    cursor: pointer;

}

.laboratory-constraint-panel__toggle-row input {

    width: 1.1rem;
    height: 1.1rem;

    cursor: pointer;

}

.laboratory-constraint-panel__options-section {

    margin-top: 1rem;

}

.laboratory-constraint-panel__options-section
.form-help {

    margin: 0 0 1rem;

    text-align: center;

}

.laboratory-constraint__options--simple {

    display: grid;

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

    gap:
        0.625rem
        0.875rem;

    max-width: 52rem;

    margin:
        0
        auto;

}

.laboratory-constraint__options--simple
.laboratory-constraint-option {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    min-height: 2.75rem;

    padding:
        0.625rem
        0.75rem;

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

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

    cursor: pointer;

}


.laboratory-constraint__options--simple
.laboratory-constraint-option:hover {

    border-color:
        var(--primary-color);

}


.laboratory-constraint__options--simple
.laboratory-constraint-option
input {

    flex: 0 0 auto;

    cursor: pointer;

}


.laboratory-constraint__options--simple
.laboratory-constraint-option
input:checked + span {

    font-weight: 700;

    color:
        var(--primary-dark);

}

.laboratory-constraint__options--grouped {

    display: grid;

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

    gap:
        0.625rem
        0.875rem;

    max-width: 52rem;

    margin: 0 auto;

}

.laboratory-constraint__options--grouped
.laboratory-constraint-option {

    display: grid;

    grid-template-columns:
        auto
        1fr
        minmax(8.5rem, auto);

    align-items: center;

    gap: 0.75rem;

    min-height: 2.75rem;

    padding:
        0.625rem
        0.75rem;

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

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

}

.laboratory-constraint__options--grouped
.laboratory-constraint-select {

    width: 100%;

}

/*
 * Laboratorio - Opzioni vincoli non disponibili
 */

.laboratory-constraints-list.is-disabled
.laboratory-constraint-option {

    cursor: not-allowed;

}

.laboratory-constraints-list.is-disabled
.laboratory-constraint-option input,
.laboratory-constraints-list.is-disabled
.laboratory-constraint-option select {

    cursor: not-allowed;

}

/*
 * Nessun effetto hover
 * sulle opzioni non disponibili.
 */

.laboratory-constraints-list.is-disabled
.laboratory-constraint__options--simple
.laboratory-constraint-option:hover {

    border-color:
        var(--border-color);

}

.laboratory-constraint__options--grouped
> .laboratory-fixed-group {

    grid-column:
        1 / -1;

    display: grid;

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

    gap:
        0.625rem
        0.875rem;

}

.laboratory-constraint__options--grouped
> .laboratory-fixed-group
> .laboratory-fixed-group__title {

    grid-column:
        1 / -1;

}

/* ============================================================
 * Laboratorio - Allineamento intestazioni vincoli
 * ============================================================ */

/*
 * Contenitori dei pannelli.
 *
 * Il pulsante di aiuto è ora esterno al <summary>,
 * quindi il contenitore diventa il riferimento
 * per il suo posizionamento.
 */

.laboratory-number-panel-wrapper,
.laboratory-constraint {

    position: relative;

    width: 100%;

}

/*
 * ============================================================
 * Laboratorio - Fixed Group - Wrapper UI trasparenti
 * ============================================================
 *
 * Coppie, Terzine, Cinquine e Sestine restano
 * contenute tecnicamente nello stesso fixed-group,
 * ma vengono visualizzate allo stesso livello
 * degli altri vincoli.
 */

.laboratory-constraint[data-constraint-id="fixed-group"],
.laboratory-constraint[data-constraint-id="fixed-group"]
> .laboratory-constraint__options--grouped {

    display: contents;

}

/*
 * Griglia dell'intestazione.
 *
 * Le quattro colonne restano:
 *
 * 1. nome vincolo
 * 2. spazio riservato al pulsante ?
 * 3. stato / contatore
 * 4. freccia
 */

.laboratory-number-panel__summary,
.laboratory-constraint-panel__summary {

    display: grid;

    grid-template-columns:
        minmax(10rem, 11rem)
        2rem
        minmax(0, 1fr)
        0.8rem;

    align-items: center;

    column-gap:
        0.625rem;

}


/*
 * Nome vincolo
 */

.laboratory-number-panel__main,
.laboratory-constraint-panel__title {

    min-width: 0;

    grid-column:
        1;

}


/*
 * Aiuto contestuale
 *
 * Il pulsante non è più figlio del <summary>,
 * ma viene collocato visivamente nella seconda
 * colonna della stessa intestazione.
 */

.laboratory-number-panel-wrapper
> .laboratory-constraint-panel__help-button,
.laboratory-constraint
> .laboratory-constraint-panel__help-button {

    position: absolute;

    top:
        0.75rem;

    left:
        12.875rem;

    z-index:
        2;

}


/*
 * Area cliccabile del pulsante.
 */

.laboratory-constraint-panel__help-button {

    justify-self: center;

    width:
        2rem;

    height:
        2rem;

    margin-left:
        0;

    padding:
        0;

    font-size:
        0;

    color:
        var(--primary-dark);

    background-color:
        transparent;

    border:
        0;

}


/*
 * Cerchio visibile del pulsante.
 */

.laboratory-constraint-panel__help-button::before {

    content:
        "?";

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        1.2rem;

    height:
        1.2rem;

    font-size:
        0.7rem;

    font-weight:
        700;

    line-height:
        1;

    color:
        var(--text-secondary);

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

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

    border-radius:
        50%;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;

}


.laboratory-constraint-panel__help-button:hover {

    color:
        var(--primary-dark);

    background-color:
        transparent;

}


.laboratory-constraint-panel__help-button:hover::before {

    color:
        var(--primary-dark);

    background-color:
        var(--primary-light);

    border-color:
        var(--primary-color);

    transform:
        scale(1.08);

}


/*
 * Stato / contatore
 */

.laboratory-number-panel__counter,
.laboratory-constraint-panel__status {

    grid-column:
        3;

    margin-left:
        0;

    justify-self:
        stretch;

    text-align:
        right;

}


/*
 * Freccia apertura
 */

.laboratory-number-panel__summary::after,
.laboratory-constraint-panel__summary::after {

    grid-column:
        4;

    margin-left:
        0;

    justify-self:
        end;

}


/*
 * Posizionamento del pulsante su mobile.
 *
 * Sul layout mobile la seconda colonna viene
 * individuata dal lato destro perché la prima
 * colonna è fluida.
 */

@media (max-width: 47.9375rem) {

    .laboratory-number-panel-wrapper
    > .laboratory-constraint-panel__help-button,
    .laboratory-constraint
    > .laboratory-constraint-panel__help-button {

        top:
            0.6rem;

        left:
            auto;

        right:
            8.25rem;

    }

}

/* ============================================================
 * Laboratorio - Pannelli numeri - Mobile
 * ============================================================ */

@media (max-width: 47.9375rem) {

    .laboratory-constraint-panel__summary {

        padding:
            0.875rem
            1rem;

        font-size: 0.9375rem;

    }

    .laboratory-constraint-panel__content {

        padding:
            0.875rem
            1rem
            1rem;

    }

    .laboratory-constraint__options--simple {

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

    }

}

.laboratory-constraint__options--grouped {

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

}


.laboratory-constraint__options--grouped
.laboratory-constraint-option {

    grid-template-columns:
        auto
        1fr
        minmax(7.5rem, auto);

}

@media (max-width: 47.9375rem) {

    .laboratory-number-panel__summary {

        padding:
            0.875rem
            1rem;

        font-size: 0.9375rem;

    }

    .laboratory-number-panel__content {

        padding:
            0
            1rem
            1rem;

    }

    .laboratory-number-panel__content
    .form-help {

        margin-top: 0.875rem;

        font-size: 0.875rem;

        line-height: 1.45;

    }

}

.laboratory-constraint__options--grouped
> .laboratory-fixed-group {

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

}

/* ============================================================
 * Laboratorio - Allineamento intestazioni vincoli - Mobile
 * ============================================================ */

@media (max-width: 47.9375rem) {

    .laboratory-number-panel__summary,
    .laboratory-constraint-panel__summary {

        grid-template-columns:
            minmax(0, 1fr)
            1.75rem
            5.75rem
            0.75rem;

        column-gap:
            0.375rem;

    }

    .laboratory-constraint-panel__help-button {

        width:
            1.75rem;

        height:
            1.75rem;

    }

    .laboratory-constraint-panel__help-button::before {

        width:
            1.15rem;

        height:
            1.15rem;

        font-size:
            0.6875rem;

    }

}

/* ============================================================
 * Laboratorio - Combinazioni mai verificate
 * ============================================================ */


/*
 * Griglia specifica.
 *
 * Mobile:
 * una card per riga.
 */

.laboratory-constraint__options--never-observed {

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

    gap:
        0.875rem;

    width:
        100%;

    max-width:
        none;

}


/*
 * Card singola configurazione.
 */

.laboratory-constraint__options--never-observed
.laboratory-never-observed-option {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        stretch;

    gap:
        0.55rem;

    min-width:
        0;

    min-height:
        7rem;

    padding:
        0.875rem;

    text-align:
        left;

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

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

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

    cursor:
        default;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;

}


/*
 * Intestazione card:
 * checkbox + nome.
 */

.laboratory-never-observed-option__header {

    display:
        flex;

    align-items:
        center;

    gap:
        0.55rem;

    min-width:
        0;

    cursor:
        pointer;

}


.laboratory-never-observed-option__header
input {

    flex:
        0 0 auto;

    margin:
        0;

    cursor:
        pointer;

}


.laboratory-never-observed-option__title {

    min-width:
        0;

    font-weight:
        600;

    line-height:
        1.3;

    color:
        var(--text-primary);

}


/*
 * Informazione secondaria:
 * "20 possibili", "15 possibili", ecc.
 */

.laboratory-never-observed-option__meta,
.laboratory-never-observed-option__description {

    display:
        block;

    margin-left:
        1.65rem;

    font-size:
        0.8125rem;

    line-height:
        1.4;

    color:
        var(--text-secondary);

}


/*
 * Nella combinazione completa la descrizione
 * occupa naturalmente la zona inferiore.
 */

.laboratory-never-observed-option__description {

    margin-top:
        auto;

}


/*
 * Soglia minima.
 */

.laboratory-never-observed-option__threshold {

    display:
        flex;

    align-items:
        center;

    gap:
        0.5rem;

    margin-top:
        auto;

    margin-left:
        0;

}


.laboratory-never-observed-option__threshold-label {

    flex:
        0 0 auto;

    font-size:
        0.8125rem;

    font-weight:
        600;

    color:
        var(--text-secondary);

}


.laboratory-never-observed-option__threshold
.laboratory-constraint-select {

    width:
        100%;

    min-width:
        0;

}


/*
 * Configurazione selezionata.
 *
 * Evidenza volutamente leggera:
 * deve restare coerente con il Laboratorio.
 */

.laboratory-never-observed-option:has(
    .laboratory-never-observed-option__header
    input:checked
) {

    border-color:
        var(--primary-color);

    background-color:
        var(--primary-light);

}


.laboratory-never-observed-option:has(
    .laboratory-never-observed-option__header
    input:checked
)
.laboratory-never-observed-option__title {

    font-weight:
        700;

    color:
        var(--primary-dark);

}


/*
 * Nessun hover quando l'intero pannello
 * dei vincoli non è disponibile.
 */

.laboratory-constraints-list.is-disabled
.laboratory-never-observed-option {

    border-color:
        var(--border-color);

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

}


/* ============================================================
 * Tablet
 * 2 card per riga
 * ============================================================ */

@media (min-width: 48rem) {

    .laboratory-constraint__options--never-observed {

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

    }


    .laboratory-never-observed-option__threshold
    .laboratory-constraint-select {

        flex:
            1 1 0;

        width:
            auto;

    }

}


/* ============================================================
 * Desktop
 * 4 card sulla stessa riga
 * ============================================================ */

@media (min-width: 64rem) {

    .laboratory-constraint__options--never-observed {

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

    }

}

@media (min-width: 48rem) {

    .laboratory-constraint[
        data-constraint-id="never-observed-combination"
    ]
    .laboratory-constraint-panel__title {

        max-width:
            9rem;

    }

}

/* ============================================================
 * Mobile
 * Controllo soglia più comodo al touch
 * ============================================================ */

@media (max-width: 47.9375rem) {

    .laboratory-never-observed-option {

        min-height:
            0;

    }


    .laboratory-never-observed-option__threshold {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .laboratory-never-observed-option__threshold
    .laboratory-constraint-select {

        width:
            100%;

    }

}

/* ============================================================
 * Laboratorio - Risultati
 * ============================================================ */

#laboratoryResultsSummary {

    max-width: 56rem;

    margin:
        0
        auto;

    text-align: center;

}

/* ============================================================
 * Laboratorio - Riepilogo risultati
 * ============================================================ */

.laboratory-results-summary__state {

    margin: 0;

    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;

    color:
        var(--text-primary);

}

.laboratory-results-summary__context {

    margin:
        0.5rem
        0
        0;

    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;

    color:
        var(--text-secondary);

}

.laboratory-results-summary__message {

    max-width: 52rem;

    margin:
        0.6rem
        auto
        0;

    line-height: 1.55;

    color:
        var(--text-secondary);

}

.laboratory-results-summary__message.is-reduction-limit {

    max-width: 46rem;

    padding:
        0.75rem
        1rem;

    border:
        1px solid
        rgba(247, 147, 26, 0.35);

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

    background-color:
        rgba(247, 147, 26, 0.07);

    font-weight: 600;

    color:
        var(--text-primary);

}

.laboratory-results-summary__count {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.2rem;

    margin:
        1.25rem
        0
        0;

}

.laboratory-results-summary__count-value {

    font-size:
        clamp(
            1.75rem,
            3vw,
            2.25rem
        );

    font-weight: 800;

    line-height: 1;

    color:
        var(--primary-dark);

}

.laboratory-results-summary__count-label {

    font-size: 0.875rem;

    font-weight: 600;

    line-height: 1.3;

    color:
        var(--text-secondary);

}

#laboratoryResultsActions {

    display: flex;

    flex-wrap: wrap;

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

    gap: 0.75rem;

    margin-top: 1.5rem;

}

/* ============================================================
 * Laboratorio - Griglia combinazioni
 * ============================================================ */

#laboratoryResultsList {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(15rem, 1fr)
        );

    gap:
        0.625rem
        0.875rem;

    width: 100%;
    max-width: 72rem;

    margin:
        1.75rem
        auto
        0;

}

/* ============================================================
 * Laboratorio - Singola combinazione
 * ============================================================ */

.laboratory-result-combination {

    display: flex;

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

    gap: 0.35rem;

    min-width: 0;

    padding:
        0.65rem
        0.75rem;

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

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

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

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;

}

.laboratory-result-combination:hover {

    border-color:
        rgba(247, 147, 26, 0.45);

    box-shadow:
        0 0.15rem 0.45rem
        rgba(0, 0, 0, 0.06);

    transform:
        translateY(-1px);

}

/* ============================================================
 * Laboratorio - Palline risultati
 * ============================================================ */

.laboratory-result-combination
.number-ball {

    width: 2.15rem;
    height: 2.15rem;

    flex:
        0
        0
        2.15rem;

    font-size: 0.875rem;

    box-shadow:
        0
        0.1rem
        0.3rem
        rgba(247, 147, 26, 0.20);

}

/* ============================================================
 * Statistiche - Paginazione risultati
 * ============================================================ */

.statistics-results-pagination {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    justify-content:
        center;

    gap:
        0.75rem
        1rem;

    width:
        100%;

    margin-top:
        2rem;

}


.statistics-results-pagination__info {

    font-weight:
        600;

    color:
        var(--text-primary);

    white-space:
        nowrap;

}


/* ============================================================
 * Statistiche - Paginazione risultati - Mobile
 * ============================================================ */

@media (max-width: 47.9375rem) {

    .statistics-results-pagination {

        gap:
            0.75rem;

        margin-top:
            1.5rem;

    }


    .statistics-results-pagination__info {

        width:
            100%;

        order:
            -1;

        text-align:
            center;

        white-space:
            normal;

    }


    .statistics-results-pagination .btn {

        flex:
            1 1 0;

        min-width:
            0;

    }

}

/* ============================================================
 * Statistiche - Tabella a colonna singola - Mobile
 * ============================================================ */

@media (max-width: 47.9375rem) {

    .statistics-table--single-column {

        min-width:
            100%;

    }

}

/* ============================================================
 * Laboratorio - Paginazione risultati
 * ============================================================ */

#laboratoryResultsPagination {

    display: flex;

    flex-wrap: wrap;

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

    gap:
        0.75rem
        1rem;

    width: 100%;

    margin-top: 2rem;

}

.laboratory-results-pagination__info {

    font-weight: 600;

    color:
        var(--text-primary);

    white-space: nowrap;

}


/* ============================================================
 * Laboratorio - Risultati - Mobile
 * ============================================================ */

@media (max-width: 47.9375rem) {

    #laboratoryResultsList {

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

        gap: 0.625rem;

        margin-top: 1.5rem;

    }

    .laboratory-result-combination {

        padding:
            0.6rem
            0.5rem;

    }

    .laboratory-result-combination
    .number-ball {

        width: 2rem;
        height: 2rem;

        flex-basis: 2rem;

        font-size: 0.8125rem;

    }

    #laboratoryResultsPagination {

        gap: 0.75rem;

        margin-top: 1.5rem;

    }

    .laboratory-results-pagination__info {

        width: 100%;

        order: -1;

        text-align: center;

    }

}