/* ========================================
   CUGINIPARTY - RACING
   FORMULA 1 EDITION
======================================== */


/* ========================================
   START
======================================== */

.racing-panel {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

.racing-intro {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
}

.racing-intro-icon {
    width: 96px;
    height: 96px;

    margin: 0 auto 18px;

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

    border-radius: 30px;

    background:
        linear-gradient(
            135deg,
            #fee2e2,
            #fecaca 50%,
            #dbeafe
        );

    font-size: 50px;

    box-shadow:
        0 20px 50px
        rgba(220, 38, 38, 0.18);
}

.racing-intro-kicker {
    margin-bottom: 7px;

    color: #dc2626;

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

    letter-spacing: 0.20em;
    text-transform: uppercase;
}

.racing-intro h2 {
    margin: 0;

    color:
        var(--text-color, #111827);

    font-size:
        clamp(2rem, 5vw, 2.8rem);

    font-weight: 1000;

    letter-spacing: -0.06em;
}

.racing-intro p {
    max-width: 650px;

    margin: 14px auto 0;

    color:
        var(--muted-text, #6b7280);

    font-size: 0.96rem;
    line-height: 1.65;
}


/* ========================================
   INFO CARDS
======================================== */

.racing-info-grid {
    display: grid;

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

    gap: 14px;

    margin-bottom: 24px;
}

.racing-info-card {
    padding: 21px 12px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f4f5
        );

    border:
        1px solid
        var(--border-color, #e5e7eb);

    text-align: center;

    box-shadow:
        0 12px 30px
        rgba(15, 23, 42, 0.06);

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

.racing-info-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 18px 40px
        rgba(15, 23, 42, 0.10);
}

.racing-info-card span {
    display: block;

    margin-bottom: 8px;

    font-size: 29px;
}

.racing-info-card strong {
    display: block;

    color:
        var(--text-color, #111827);

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

.racing-info-card small {
    display: block;

    margin-top: 5px;

    color:
        var(--muted-text, #6b7280);

    font-size: 0.68rem;
}


/* ========================================
   CONTROLLI PREVIEW
======================================== */

.racing-controls-preview {
    display: flex;

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

    gap: 12px;

    margin-bottom: 27px;
}

.racing-preview-control {
    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 155px;

    padding: 11px 15px;

    border-radius: 15px;

    background:
        var(--secondary-bg, #f3f4f6);

    border:
        1px solid
        var(--border-color, #e5e7eb);
}

.racing-preview-control > span {
    font-size: 20px;
}

.racing-preview-control strong,
.racing-preview-control small {
    display: block;
}

.racing-preview-control strong {
    color:
        var(--text-color, #111827);

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

.racing-preview-control small {
    margin-top: 2px;

    color:
        var(--muted-text, #6b7280);

    font-size: 0.64rem;
}


/* ========================================
   START BUTTON
======================================== */

.racing-main-button {
    min-width: 260px !important;

    box-shadow:
        0 15px 35px
        rgba(220, 38, 38, 0.20);
}


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

.racing-game-screen {
    position: relative;

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

    margin: 0 auto;

    padding: 15px;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(220,38,38,0.12),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #18181b,
            #030712
        );

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

    box-shadow:
        0 35px 100px
        rgba(0,0,0,0.38);

    overflow: hidden;
}

.racing-game-screen[hidden] {
    display: none;
}


/* ========================================
   HUD
======================================== */

.racing-hud {
    display: grid;

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

    gap: 10px;

    margin-bottom: 9px;
}

.racing-hud-item {
    min-width: 0;

    display: flex;

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

    gap: 10px;

    padding: 10px 15px;

    border-radius: 16px;

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

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

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.racing-hud-icon {
    font-size: 18px;
}

.racing-hud-label {
    display: block;

    margin-bottom: 2px;

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

    font-size: 0.58rem;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: 0.10em;
}

.racing-hud-item strong {
    display: block;

    color: #ffffff;

    font-size: 0.95rem;

    font-weight: 1000;

    font-variant-numeric: tabular-nums;
}


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

.racing-track-status {
    min-height: 25px;

    display: flex;

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

    gap: 7px;

    margin-bottom: 8px;

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

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

.racing-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #22c55e;

    box-shadow:
        0 0 12px
        rgba(34,197,94,0.85);
}


/* ========================================
   CANVAS
======================================== */

.racing-canvas-wrapper {
    position: relative;

    width: 100%;

    display: flex;

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

    overflow: hidden;

    border-radius: 22px;

    background: #020617;

    box-shadow:
        0 20px 55px
        rgba(0,0,0,0.42),
        inset 0 0 0 1px
        rgba(255,255,255,0.08);
}

#racingCanvas {
    display: block;

    width: 100%;
    height: auto;

    max-width: 1200px;

    aspect-ratio: 1200 / 760;

    border-radius: 22px;

    touch-action: none;

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

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


/* ========================================
   CONTROLLI
======================================== */

.racing-controls {
    display: flex;

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

    gap: 15px;

    margin-top: 13px;
}

.racing-control-info {
    display: flex;

    align-items: center;

    gap: 8px;

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

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

.racing-keyboard-icon {
    font-size: 16px;
}

.racing-controls .game-button {
    width: auto;

    min-width: 155px;

    margin: 0;
}


/* ========================================
   TOUCH
======================================== */

.racing-touch-controls {
    display: none;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    margin-top: 15px;

    touch-action: none;
}

.racing-touch-row {
    display: flex;

    gap: 8px;
}

.racing-touch-button {
    width: 64px;
    height: 56px;

    display: flex;

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

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.15),
            rgba(255,255,255,0.06)
        );

    color: #ffffff;

    font-size: 1.2rem;
    font-weight: 1000;

    cursor: pointer;

    touch-action: none;

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

    -webkit-tap-highlight-color: transparent;

    box-shadow:
        0 8px 22px
        rgba(0,0,0,0.22);

    transition:
        transform 0.08s ease,
        background 0.08s ease;
}

.racing-touch-button.active,
.racing-touch-button:active {
    transform: scale(0.92);

    background:
        linear-gradient(
            145deg,
            rgba(220,38,38,0.80),
            rgba(185,28,28,0.60)
        );
}


/* ========================================
   VICTORY
======================================== */

.racing-victory-screen {
    width: 100%;
    max-width: 740px;

    margin: 0 auto;

    padding: 20px;
}

.racing-victory-screen[hidden] {
    display: none;
}

.racing-victory-card {
    position: relative;

    overflow: hidden;

    padding: 48px 35px 38px;

    border-radius: 30px;

    background:
        var(--card-bg, #ffffff);

    border:
        1px solid
        var(--border-color, #e5e7eb);

    box-shadow:
        0 30px 85px
        rgba(0,0,0,0.14);

    text-align: center;
}

.racing-victory-glow {
    position: absolute;

    width: 300px;
    height: 300px;

    left: 50%;
    top: -180px;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        rgba(250,204,21,0.17);

    filter: blur(25px);

    pointer-events: none;
}

.racing-victory-icon {
    position: relative;

    width: 96px;
    height: 96px;

    margin: 0 auto 18px;

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

    border-radius: 29px;

    background:
        linear-gradient(
            135deg,
            #fef3c7,
            #fde68a
        );

    font-size: 50px;

    box-shadow:
        0 18px 45px
        rgba(245,158,11,0.20);
}

.racing-victory-small {
    margin-bottom: 7px;

    color:
        var(--muted-text, #6b7280);

    font-size: 0.67rem;

    font-weight: 1000;

    letter-spacing: 0.16em;
}

.racing-victory-card h2 {
    margin: 0;

    color:
        var(--text-color, #111827);

    font-size:
        clamp(2.2rem, 7vw, 4rem);

    font-weight: 1000;

    letter-spacing: -0.06em;
}

.racing-victory-time-label {
    margin: 18px 0 4px;

    color:
        var(--muted-text, #6b7280);

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

.racing-final-time {
    display: block;

    color: #dc2626;

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

    font-weight: 1000;

    font-variant-numeric: tabular-nums;
}

.racing-result-grid {
    display: grid;

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

    gap: 12px;

    max-width: 410px;

    margin: 25px auto;
}

.racing-result-grid > div {
    padding: 16px;

    border-radius: 16px;

    background:
        var(--secondary-bg, #f3f4f6);
}

.racing-result-grid span {
    display: block;

    margin-bottom: 5px;

    color:
        var(--muted-text, #6b7280);

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

.racing-result-grid strong {
    color:
        var(--text-color, #111827);

    font-size: 1rem;
    font-weight: 1000;
}

.racing-victory-card .game-actions {
    margin-top: 25px;
}


/* ========================================
   DARK MODE
======================================== */

body.dark-mode .racing-intro-icon {
    background:
        linear-gradient(
            135deg,
            #450a0a,
            #7f1d1d,
            #172554
        );
}

body.dark-mode .racing-info-card {
    background:
        linear-gradient(
            145deg,
            #18181b,
            #111113
        );

    border-color: #27272a;
}

body.dark-mode .racing-preview-control {
    background: #18181b;
    border-color: #27272a;
}

body.dark-mode .racing-victory-card {
    background: #18181b;
    border-color: #27272a;
}

body.dark-mode .racing-result-grid > div {
    background: #27272a;
}


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

@media (max-width: 850px) {

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

    .racing-game-screen {
        padding: 10px;
        border-radius: 22px;
    }

    .racing-canvas-wrapper,
    #racingCanvas {
        border-radius: 17px;
    }

}


@media (max-width: 600px) {

    .racing-intro-icon {
        width: 78px;
        height: 78px;

        border-radius: 23px;

        font-size: 40px;
    }

    .racing-intro-kicker {
        font-size: 0.57rem;
    }

    .racing-intro p {
        font-size: 0.84rem;
    }

    .racing-info-grid {
        gap: 8px;
    }

    .racing-info-card {
        padding: 14px 7px;
        border-radius: 16px;
    }

    .racing-info-card span {
        font-size: 22px;
    }

    .racing-info-card strong {
        font-size: 0.75rem;
    }

    .racing-info-card small {
        font-size: 0.58rem;
    }

    .racing-controls-preview {
        gap: 7px;
    }

    .racing-preview-control {
        min-width: 0;
        flex: 1;
        padding: 9px;
    }

    .racing-preview-control > span {
        font-size: 17px;
    }

    .racing-preview-control strong {
        font-size: 0.68rem;
    }

    .racing-preview-control small {
        font-size: 0.55rem;
    }

    .racing-main-button {
        width: 100% !important;
        min-width: 0 !important;
    }

    .racing-hud {
        gap: 5px;
    }

    .racing-hud-item {
        padding: 8px 4px;
        gap: 4px;
        border-radius: 12px;
    }

    .racing-hud-icon {
        font-size: 13px;
    }

    .racing-hud-label {
        font-size: 0.44rem;
    }

    .racing-hud-item strong {
        font-size: 0.68rem;
    }

    .racing-track-status {
        font-size: 0.59rem;
    }

    .racing-controls {
        flex-direction: column;
        margin-top: 10px;
    }

    .racing-control-info {
        justify-content: center;
        text-align: center;
        font-size: 0.63rem;
    }

    .racing-controls .game-button {
        width: 100%;
        max-width: 250px;
    }

    .racing-touch-controls {
        display: flex;
    }

    .racing-victory-card {
        padding: 34px 18px 26px;
        border-radius: 23px;
    }

}


@media (max-width: 380px) {

    .racing-hud-label {
        font-size: 0.40rem;
    }

    .racing-hud-item strong {
        font-size: 0.62rem;
    }

    .racing-touch-button {
        width: 55px;
        height: 48px;
    }

}

/* ========================================
   MOBILE RACING - LAYOUT CORRETTO
   ======================================== */

@media (pointer: coarse) and (orientation: landscape) {

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }


    .game-page.racing-page {
        width: 100%;
        min-height: 100dvh;
        margin: 0;
        padding: 0;
    }


    .game-page.racing-page .game-container {
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        margin: 0;
        padding: 0;
    }


    /*
       Il pannello di gioco diventa
       realmente fullscreen.
    */

    .racing-game-screen {
        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

        min-width: 0 !important;
        min-height: 0 !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;

        padding:
            max(6px, env(safe-area-inset-top))
            max(6px, env(safe-area-inset-right))
            max(6px, env(safe-area-inset-bottom))
            max(6px, env(safe-area-inset-left)) !important;

        border-radius: 0 !important;

        box-sizing: border-box !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 4px;

        overflow: hidden !important;

        z-index: 10000;
    }


    /*
       HUD sempre in alto.
    */

    .racing-hud {
        flex:
            0 0 auto;

        width: 100%;

        margin: 0 !important;

        gap: 5px;
    }


    .racing-hud-item {
        min-width: 0;

        padding:
            6px
            5px;

        gap: 4px;

        border-radius: 10px;
    }


    .racing-hud-icon {
        font-size: 13px;
    }


    .racing-hud-label {
        font-size: 0.42rem;
    }


    .racing-hud-item strong {
        font-size: 0.66rem;
    }


    /*
       Stato checkpoint.
    */

    .racing-track-status {
        flex:
            0 0 auto;

        min-height: 18px;

        margin: 0 !important;

        font-size: 0.58rem;
    }


    /*
       CONTENITORE CANVAS
       prende tutto lo spazio rimasto.
    */

    .racing-canvas-wrapper {
        position: relative;

        flex:
            1 1 auto;

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

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;

        display: flex;

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

        overflow: hidden;

        border-radius: 12px !important;
    }


    /*
       Il canvas mantiene SEMPRE
       il rapporto 1200:760.
    */

    #racingCanvas {
        display: block;

        width: 100% !important;
        height: 100% !important;

        max-width: 100% !important;
        max-height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        aspect-ratio: 1200 / 760;

        object-fit: contain !important;
        object-position: center center !important;

        border-radius: 12px !important;

        flex:
            0 1 auto;

        touch-action: none;
    }


    /*
       Questi sono i vecchi pulsanti
       sotto il canvas.

       Il gioco usa invece il joystick
       e l'acceleratore creati dal JS.
    */

    .racing-controls,
    .racing-touch-controls {
        display: none !important;
    }

}


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

@media (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {

    .racing-game-screen {
        padding:
            4px
            max(4px, env(safe-area-inset-right))
            4px
            max(4px, env(safe-area-inset-left)) !important;

        gap: 2px;
    }


    .racing-hud-item {
        padding:
            4px
            4px;

        border-radius: 8px;
    }


    .racing-hud-icon {
        font-size: 11px;
    }


    .racing-hud-label {
        font-size: 0.36rem;
    }


    .racing-hud-item strong {
        font-size: 0.58rem;
    }


    .racing-track-status {
        min-height: 15px;

        font-size: 0.50rem;
    }


    .racing-canvas-wrapper {
        border-radius: 9px !important;
    }


    #racingCanvas {
        border-radius: 9px !important;
    }

}

 /* =========================================================
    RACING MOBILE - PISTA PIÙ GRANDE + HUD COMPATTO
    ========================================================= */

@media (pointer: coarse) and (orientation: landscape) {

    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }


    .game-page.racing-page {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        margin: 0;
        padding: 0;
    }


    .game-page.racing-page .game-container {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        max-width: none;
        margin: 0;
        padding: 0;
    }


    /* =========================================
       SCHERMATA DI GIOCO
       ========================================= */

    .racing-game-screen {
        position: fixed !important;

        inset: 0 !important;

        width: 100vw !important;
        height: 100dvh !important;

        min-width: 0 !important;
        min-height: 0 !important;

        max-width: none !important;
        max-height: none !important;

        margin: 0 !important;

        padding:
            3px
            max(3px, env(safe-area-inset-right))
            3px
            max(3px, env(safe-area-inset-left)) !important;

        box-sizing: border-box !important;

        border-radius: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 2px;

        overflow: hidden !important;

        z-index: 10000;
    }


    /* =========================================
       HUD
       ========================================= */

    .racing-hud {
        flex: 0 0 auto;

        width: 100%;

        margin: 0 !important;

        gap: 4px;
    }


    .racing-hud-item {
        min-height: 28px;

        padding:
            4px
            5px;

        gap: 4px;

        border-radius: 8px;
    }


    .racing-hud-icon {
        font-size: 11px;
        line-height: 1;
    }


    .racing-hud-label {
        margin-bottom: 1px;

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


    .racing-hud-item strong {
        font-size: 0.58rem;
        line-height: 1;
    }


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

    .racing-track-status {
        flex: 0 0 auto;

        min-height: 13px;

        margin: 0 !important;

        gap: 4px;

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


    .racing-status-dot {
        width: 5px;
        height: 5px;
    }


    /* =========================================
       CANVAS
       ========================================= */

    .racing-canvas-wrapper {
        flex: 1 1 auto;

        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        height: auto !important;

        margin: 0 !important;

        display: flex;

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

        overflow: hidden;

        border-radius: 10px !important;
    }


    #racingCanvas {
        display: block;

        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        max-width: 100% !important;
        max-height: 100% !important;

        aspect-ratio: 1200 / 760;

        object-fit: contain !important;
        object-position: center center !important;

        border-radius: 10px !important;

        touch-action: none;
    }


    /* =========================================
       ELEMENTI SOTTO IL CANVAS
       ========================================= */

    .racing-controls,
    .racing-touch-controls {
        display: none !important;
    }

}


/* =========================================================
   TELEFONI CON ALTEZZA RIDOTTA
   ========================================================= */

@media (
    pointer: coarse
) and (
    orientation: landscape
) and (
    max-height: 500px
) {

    .racing-game-screen {
        padding:
            2px
            max(2px, env(safe-area-inset-right))
            2px
            max(2px, env(safe-area-inset-left)) !important;

        gap: 1px;
    }


    .racing-hud {
        gap: 3px;
    }


    .racing-hud-item {
        min-height: 24px;

        padding:
            3px
            4px;

        border-radius: 7px;
    }


    .racing-hud-icon {
        font-size: 9px;
    }


    .racing-hud-label {
        font-size: 0.30rem;
    }


    .racing-hud-item strong {
        font-size: 0.52rem;
    }


    .racing-track-status {
        min-height: 11px;

        font-size: 0.43rem;
    }


    .racing-status-dot {
        width: 4px;
        height: 4px;
    }


    .racing-canvas-wrapper,
    #racingCanvas {
        border-radius: 8px !important;
    }

}