/* =========================================================
   PROJECT05 - PRESTART UX V1
   Compact instructions + participant registration
   ========================================================= */

.pg12-public-shell .pg12-start-grid {
    margin-top: 10px !important;
    gap: 10px !important;
}

.pg12-public-shell .pg12-instructions-card,
.pg12-public-shell .pg12-registration-card {
    padding: clamp(14px, 1.7vw, 20px) !important;
    border-radius: 20px;
}

.pg12-public-shell .pg12-section-head {
    gap: 9px;
    padding-bottom: 9px;
}

.pg12-public-shell .pg12-section-head h2 {
    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}

.pg12-public-shell .pg12-section-head p {
    margin-top: 2px;
    line-height: 1.45;
}

.pg12-public-shell .pg12-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

.pg12-public-shell .pg12-instruction-list {
    margin-top: 10px !important;
    gap: 7px !important;
}

.pg12-public-shell .pg12-instruction-list li {
    min-height: 0 !important;
    padding: 9px 11px !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    gap: 1px 9px !important;
    border-radius: 12px !important;
    align-items: center;
}

.pg12-public-shell .pg12-instruction-list li::before {
    width: 28px !important;
    height: 28px !important;
    font-size: .75rem;
}

.pg12-public-shell .pg12-instruction-list li b {
    font-size: .84rem;
    line-height: 1.25;
}

.pg12-public-shell .pg12-instruction-list li span {
    font-size: .66rem !important;
    line-height: 1.4;
}

.pg12-public-shell .pg12-entry-summary {
    margin-top: 9px !important;
    padding: 8px !important;
    gap: 6px !important;
}

.pg12-public-shell .pg12-form {
    margin-top: 10px !important;
}

.pg12-public-shell .pg12-field-grid {
    gap: 9px !important;
}

.pg12-public-shell .pg2-field {
    gap: 5px;
}

.pg12-public-shell .pg2-field input:not([type="checkbox"]),
.pg12-public-shell .pg2-field select {
    min-height: 46px;
}

.pg12-public-shell .pg12-kiosk-note {
    margin-top: 8px !important;
    padding: 9px 11px !important;
}

.pg12-public-shell .pg12-form-actions {
    margin-top: 8px !important;
    padding-top: 9px !important;
}

@media (orientation: portrait), (max-width: 1180px) {
    .pg12-public-shell .pg12-start-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        max-width: 980px;
    }

    .pg12-public-shell .pg12-instruction-list {
        display: grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (orientation: portrait) and (min-width: 900px) {
    .pg12-public-shell .pg12-start-grid {
        width: min(calc(100% - 20px), 980px);
    }

    .pg12-public-shell .pg12-instructions-card {
        padding: 13px 16px !important;
    }

    .pg12-public-shell .pg12-registration-card {
        padding: 15px 17px !important;
    }

    .pg12-public-shell .pg12-instruction-list li {
        padding-block: 7px !important;
    }
}

@media (max-width: 700px) {
    .pg12-public-shell .pg12-instruction-list {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   PROJECT05 3B - PRESTART TRACK FIX

   game-kiosk-active applies min-height:100vh to main.
   This main is also the pre-start CSS grid.
   Prevent auto grid tracks from stretching vertically.
   ========================================================= */

body.game-kiosk-active
.pg12-public-shell
main.pg12-start-grid {
    min-height: 0 !important;
    height: auto !important;

    align-content:
        start !important;

    grid-auto-rows:
        max-content;
}

.pg12-public-shell
.pg12-start-grid {
    align-content:
        start !important;

    grid-auto-rows:
        max-content;

    row-gap:
        10px !important;
}

.pg12-public-shell
.pg12-instructions-card,
.pg12-public-shell
.pg12-registration-card {
    align-self:
        start !important;

    margin-block:
        0 !important;
}

@media
    (orientation: portrait)
    and (min-width: 700px) {

    .pg12-public-shell
    .pg12-start-grid {
        min-height:
            0 !important;

        align-content:
            start !important;

        grid-auto-rows:
            max-content;
    }
}