* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #0a0a0f; font-family: 'Share Tech Mono', monospace; }
#scene-container { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; }
#scene-container canvas { display: block; }

/* Start Screen */
#start-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 100; background: rgba(5, 5, 15, 0.85);
    backdrop-filter: blur(4px);
}
#start-content { text-align: center; }
#game-title {
    font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 4.5rem;
    color: #f0f0f0; letter-spacing: 0.1em;
    text-shadow: 0 0 40px rgba(230,57,70,0.5), 0 0 80px rgba(230,57,70,0.2);
}
.infinity { color: #e63946; }
#game-subtitle {
    font-size: 1rem; color: #888; margin-top: 0.5rem; letter-spacing: 0.2em;
}
#color-picker {
    display: flex; gap: 12px; justify-content: center; margin: 2rem 0 1rem;
}
.color-swatch {
    width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
    border: 3px solid transparent; transition: all 0.2s;
}
.color-swatch:hover { transform: scale(1.2); }
.color-swatch.selected { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,0.4); }
#best-record {
    color: #e9c46a; font-size: 0.9rem; margin-bottom: 1.5rem;
    font-family: 'Share Tech Mono', monospace;
}
#start-button, #mobile-start-button {
    font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.2rem;
    color: #f0f0f0; padding: 14px 40px; border: 2px solid #e63946;
    cursor: pointer; letter-spacing: 0.15em; background: rgba(230,57,70,0.1);
    transition: all 0.3s;
}
#start-button:hover, #mobile-start-button:hover {
    background: rgba(230,57,70,0.3); box-shadow: 0 0 30px rgba(230,57,70,0.3);
}
.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
#mobile-start-button { display: none; }
#start-footer {
    position: absolute; bottom: 20px; font-size: 0.75rem;
}
#start-footer a { color: #555; text-decoration: none; }
#start-footer a:hover { color: #888; }

/* HUD */
#hud { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
#distance-counter {
    position: absolute; top: 16px; left: 20px;
    font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1.3rem;
    color: #f0f0f0; background: rgba(0,0,0,0.5); padding: 8px 16px;
    border-radius: 6px; border-left: 3px solid #e63946;
}
#minimap-container {
    position: absolute; top: 16px; right: 16px;
    width: 120px; height: 120px; border-radius: 50%;
    overflow: hidden; border: 2px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.6);
}
#minimap { border-radius: 50%; }
#controls-help {
    position: absolute; bottom: 120px; left: 16px;
    background: rgba(0,0,0,0.5); padding: 10px 14px;
    border-radius: 6px; font-size: 0.7rem; color: #aaa;
    line-height: 1.6; transition: opacity 1s; opacity: 1;
}
#controls-help.hidden { opacity: 0; }
#speedo-container {
    position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    background: rgba(0,0,0,0.6); border-radius: 10px; padding: 8px 20px 12px;
    backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.08);
}
#rpm-bar {
    width: 100%; height: 6px; background: rgba(255,255,255,0.1);
    border-radius: 3px; margin-bottom: 6px; overflow: hidden;
}
#rpm-fill { height: 100%; width: 0%; border-radius: 3px; transition: width 0.05s; }
#speedo-row { display: flex; align-items: center; gap: 12px; }
#gear-display {
    font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 2rem;
    color: #e63946; width: 40px; text-align: center;
}
#speed-readout {
    font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 2.2rem;
    color: #f0f0f0; min-width: 110px; text-align: right;
}
#speed-readout .unit { font-size: 0.7rem; color: #888; font-weight: 400; }
#speedo-gauge { opacity: 0.5; }
#new-record {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 2.5rem;
    color: #e9c46a; text-shadow: 0 0 30px rgba(233,196,106,0.6);
    animation: recordPop 0.5s ease-out, recordFade 2s ease-in 2s forwards;
}
@keyframes recordPop { 0% { transform: translate(-50%,-50%) scale(0); } 100% { transform: translate(-50%,-50%) scale(1); } }
@keyframes recordFade { to { opacity: 0; } }

/* Pause Menu */
#pause-menu {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5,5,15,0.8); z-index: 200;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px);
}
#pause-content { text-align: center; }
#pause-content h2 {
    font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 2.5rem;
    color: #f0f0f0; margin-bottom: 2rem; letter-spacing: 0.15em;
}
.pause-btn {
    font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1rem;
    color: #ccc; padding: 12px 40px; margin: 10px 0; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.15); border-radius: 4px;
    transition: all 0.2s; pointer-events: all; letter-spacing: 0.1em;
}
.pause-btn:hover { background: rgba(230,57,70,0.2); border-color: #e63946; color: #fff; }

/* Mobile Controls */
#mobile-controls {
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 60;
    display: flex; justify-content: space-between; padding: 0 16px 16px;
    pointer-events: none;
}
#mobile-left, #mobile-right { display: flex; gap: 8px; pointer-events: all; }
.mobile-btn {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.2);
    color: #fff; font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
    user-select: none; -webkit-user-select: none;
    touch-action: manipulation;
}
.mobile-btn:active { background: rgba(255,255,255,0.3); }
.mobile-gas { background: rgba(42,157,143,0.3); border-color: rgba(42,157,143,0.5); }
.mobile-brake { background: rgba(230,57,70,0.3); border-color: rgba(230,57,70,0.5); }

@media (max-width: 768px) {
    #game-title { font-size: 2.5rem; }
    #start-button { display: none; }
    #mobile-start-button { display: inline-block; }
    #controls-help { display: none; }
    #speed-readout { font-size: 1.5rem; }
    #gear-display { font-size: 1.5rem; }
}