/* ================= ROOT ================= */
:root{
    --bg:#060606;
    --bg2:#101010;

    --panel:#111111;
    --panel-2:#1a1a1a;
    --border:#2a2a2a;

    --text:#f5f5f5;
    --text-soft:#b8b8b8;

    --red:#d62828;
    --red-2:#ff3b1f;
    --orange:#ff8c1a;

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

/* ================= GLOBAL ================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    height:100%;
    background:var(--bg);
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
    overflow:hidden;
}

/* ================= MENU ================= */
#mainMenu h1{
    font-size:56px;
    letter-spacing:1px;
    font-weight:900;
    font-style:italic;
    text-transform:uppercase;

    color:var(--text);

    text-shadow:
        0 2px 0 #000,
        0 8px 24px rgba(0,0,0,0.6);
}

/* ================= BUTTON ================= */
.menuBtn{
    position:relative;
    border-radius:6px;
    overflow:hidden;
    letter-spacing:0.6px;

    background:linear-gradient(to bottom, #2a2a2a, #121212);
    color:var(--text);

    border:1px solid #000;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        inset 0 -1px 0 rgba(0,0,0,0.45),
        0 10px 24px rgba(0,0,0,0.45);

    transition:all 0.15s ease;
}

.menuBtn:hover{
    background:linear-gradient(to bottom, var(--red-2), #8f1616);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -1px 0 rgba(0,0,0,0.35),
        0 14px 30px rgba(0,0,0,0.55);
}

/* ================= HUD ================= */
#ui{
    padding:12px 16px;

    background:linear-gradient(to bottom, rgba(20,20,20,0.95), rgba(8,8,8,0.95));
    border:1px solid var(--border);

    box-shadow:var(--shadow);

    position:relative;
}

/* barre racing en haut */
#ui::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg, var(--red), var(--orange));
}

/* texte HUD */
#ui span{
    font-size:13px;
    color:var(--text-soft);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.5px;
}

/* valeurs */
#ui b{
    color:var(--text);
    font-weight:900;
}

/* ================= SPEED EFFECT ================= */
.speed-boost{
    animation:speedFlash 0.25s ease;
}

@keyframes speedFlash{
    0%{filter:brightness(1)}
    50%{filter:brightness(1.6)}
    100%{filter:brightness(1)}
}

/* ================= SCREEN FX ================= */
#gameContainer::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;

    background:radial-gradient(circle at center,
        rgba(255,140,26,0.12),
        transparent 70%);

    opacity:0.25;
}

/* ================= DAMAGE ================= */
.damage{
    animation:damageFlash 0.4s ease;
}

@keyframes damageFlash{
    0%{background:rgba(255,0,0,0.6)}
    100%{background:transparent}
}

/* ================= RESPONSIVE ================= */
@media (max-width:768px){
    #mainMenu h1{
        font-size:38px;
    }

    .menuBtn{
        width:200px;
        font-size:16px;
    }

    #ui{
        font-size:12px;
        padding:10px;
    }
}