/*! © 2026 LogosVox. All rights reserved. Copying, modifying or redistributing this code is not permitted. https://games.logosvox.com/terms */

        /* The shared top bar (lv-shell) floats over the canvas: what sat at the top moves below it. */
        .hud-top { padding-top: calc(var(--lv-shell-h, 0px) + 12px) !important; }
        #rank-display { top: calc(var(--lv-shell-h, 0px) + 16px) !important; }
    

        body { margin: 0; overflow: hidden; background-color: #000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; user-select: none; }
        #canvas-container { width: 100vw; height: 100vh; display: block; }
        
        #ui-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* HUD Top */
        .hud-top {
            display: flex;
            justify-content: space-between;
            padding: 20px;
            color: white;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
        }
        
        .time-box {
            background: rgba(0,0,0,0.5);
            padding: 10px 20px;
            border-radius: 8px;
            border-left: 4px solid #ff3333;
        }
        
        .lap-time { font-size: 24px; font-weight: bold; font-variant-numeric: tabular-nums; }
        .label { font-size: 12px; color: #aaa; text-transform: uppercase; letter-spacing: 1px; }

        /* HUD Bottom */
        .hud-bottom {
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            padding: 30px;
        }

        .speedometer {
            position: relative;
            width: 200px;
            height: 100px; /* Half circle */
            background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.0));
            border-radius: 100px 100px 0 0;
            border-bottom: 2px solid #fff;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            overflow: hidden;
        }

        .speed-text {
            font-size: 48px;
            font-weight: 900;
            color: #fff;
            margin-bottom: 10px;
            z-index: 2;
        }
        .speed-unit {
            font-size: 14px;
            color: #ccc;
            margin-bottom: 25px;
            margin-left: 5px;
            z-index: 2;
        }

        .needle {
            position: absolute;
            bottom: 0;
            left: 50%;
            width: 4px;
            height: 90px;
            background: #ff3333;
            transform-origin: bottom center;
            transform: rotate(-90deg);
            transition: transform 0.1s ease-out;
            z-index: 1;
        }

        #start-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.85);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            z-index: 10;
            pointer-events: auto;
            backdrop-filter: blur(5px);
            text-align: center;
        }

        h1 { font-size: 64px; margin: 0 0 10px 0; font-style: italic; background: linear-gradient(45deg, #ff3333, #ff9933); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        h2 { font-size: 24px; margin: 0 0 40px 0; color: #aaa; font-weight: normal; }
        
        .btn {
            background: white;
            color: black;
            padding: 15px 40px;
            font-size: 24px;
            font-weight: bold;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            text-transform: uppercase;
        }
        .btn:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); }
        
        .controls-hint {
            margin-top: 30px;
            text-align: center;
            color: #ccc;
            line-height: 1.6;
        }
        .key {
            display: inline-block;
            background: #333;
            padding: 2px 8px;
            border-radius: 4px;
            border: 1px solid #555;
            margin: 0 2px;
            font-family: monospace;
            font-weight: bold;
            color: #fff;
        }

        #notification {
            position: absolute;
            top: 20%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
            font-weight: bold;
            color: #fff;
            text-shadow: 0 0 10px #ff3333;
            opacity: 0;
            transition: opacity 0.3s;
            pointer-events: none;
        }

        #countdown-display {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 120px;
            font-weight: 900;
            color: #fff;
            text-shadow: 0 0 20px #ff0000;
            opacity: 0;
            pointer-events: none;
            z-index: 20;
        }

        #camera-label {
            position: absolute;
            bottom: 20px;
            left: 20px;
            color: rgba(255,255,255,0.7);
            font-size: 14px;
            font-weight: bold;
            text-transform: uppercase;
        }

        /* Rank indicator: position in words + fraction */
        #rank-display {
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 32px;
            font-weight: bold;
            color: yellow;
            text-shadow: 0 2px 4px rgba(0,0,0,0.8);
            text-align: center;
        }
        #rank-display .rank-ordinal {
            display: block;
            font-size: 28px;
            color: #fff;
        }
        #rank-display .rank-fraction {
            font-size: 18px;
            color: rgba(255,255,255,0.85);
            font-weight: normal;
        }

        #pause-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            display: none;
            justify-content: center;
            align-items: center;
            pointer-events: auto;
            z-index: 15;
        }
        #pause-overlay.show { display: flex; }
        #pause-overlay .pause-text {
            font-size: 72px;
            font-weight: 900;
            color: #fff;
            text-shadow: 0 0 20px #ff3333;
            letter-spacing: 8px;
        }

        #race-result-overlay {
            position: absolute;
            top: 0; left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            justify-content: center;
            align-items: center;
            pointer-events: auto;
            z-index: 25;
        }
        #race-result-overlay.show { display: flex; }
        #race-result-overlay .result-box {
            text-align: center;
            padding: 40px 60px;
            background: rgba(0,0,0,0.85);
            border-radius: 16px;
            border: 4px solid gold;
            box-shadow: 0 0 40px rgba(255,215,0,0.5);
        }
        #race-result-overlay .result-place {
            font-size: 56px;
            font-weight: 900;
            color: gold;
            text-shadow: 0 0 20px rgba(255,215,0,0.8);
        }
        #race-result-overlay .result-sub {
            font-size: 20px;
            color: #ccc;
            margin-top: 12px;
        }