body { margin: 0; background: #000; overflow: hidden; font-family: 'Segoe UI', sans-serif; }
        #hud { position: absolute; top: 20px; left: 20px; color: white; border-left: 4px solid #d4af37; padding-left: 15px; z-index: 10; pointer-events: none; }
        #time-ui { position: absolute; top: 20px; right: 20px; background: rgba(0,0,0,0.8); padding: 10px 20px; border-radius: 10px; border: 2px solid #d4af37; text-align: center; pointer-events: none; }
        #clock { font-size: 24px; font-weight: 900; color: #d4af37; }
        #controls { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; background: rgba(0,0,0,0.7); padding: 10px 20px; border-radius: 30px; font-size: 11px; text-align: center; pointer-events: none; }
        #overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.9); display: flex; justify-content: center; align-items: center; color: white; z-index: 100; flex-direction: column; text-align: center; }
        #startBtn { padding: 15px 40px; background: #d4af37; border: none; font-weight: bold; cursor: pointer; border-radius: 5px; font-size: 18px; margin-top: 20px; color: black; }
        #fade { position: fixed; top:0; left:0; width:100%; height:100%; background:black; opacity:0; pointer-events:none; transition: opacity 1.2s; z-index: 200; }
        #sleep-prompt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #d4af37; font-size: 20px; font-weight: bold; display: none; background: rgba(0,0,0,0.8); padding: 20px; border-radius: 10px; border: 2px solid #d4af37; pointer-events: none; }
/* --- STEP 2: CLOCK & HUD POSITIONING --- */

/* This styles the gold box in the top right */
#time-ui {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
}


/* This makes the numbers look bold and 'Real Type' */
#clock {
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5); /* Gives the gold a glow */
}
.tire, #tire, .gear, [class*="settings"] {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* This kills the scrollbar */
    background-color: #000; /* Matches your Ferrari/Lambo aesthetic */
}

canvas {
    display: block; /* This removes the tiny 4px gap at the bottom/top */
    position: absolute;
    top: 0;
    left: 0;
}