*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* ── Palette Green Tea / Coffee — night ─── */
    body { background: #08090c; overflow: hidden; font-family: 'Figtree', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

    #game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
    #ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; }

    /* Bouton retour — Green Tea */
    #back-btn {
      position: absolute; top: 20px; left: 20px;
      display: inline-flex; align-items: center; gap: 10px;
      font-family: 'Figtree', system-ui, sans-serif; font-size: 13px; font-weight: 500;
      color: #f4f1eb; text-decoration: none;
      background: rgba(12,14,11,0.80); border: 1px solid rgba(183,201,168,0.14);
      padding: 9px 14px 9px 11px; border-radius: 8px; pointer-events: all;
      letter-spacing: 0.01em; transition: border-color 240ms ease, background 240ms ease;
      backdrop-filter: blur(8px);
    }
    #back-btn:hover { border-color: rgba(183,201,168,0.38); background: rgba(12,14,11,0.95); }

    /* Minimap */
    #minimap-wrap { position: absolute; top: 20px; right: 20px; }
    #minimap-canvas { display: block; border: 1px solid rgba(183,201,168,0.12); border-radius: 10px; background: rgba(8,10,7,0.90); backdrop-filter: blur(4px); }
    #minimap-label { text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(183,201,168,0.40); margin-top: 6px; }

    /* HUD jauge canvas */
    #hud { position: absolute; bottom: 14px; right: 14px; }
    #speed-gauge { display: block; filter: drop-shadow(0 2px 18px rgba(0,0,0,0.80)); }

    /* Hint contrôles */
    #controls-hint { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 400; color: rgba(157,145,132,0.55); letter-spacing: 0.05em; white-space: nowrap; transition: opacity 1.2s ease; }
    #controls-hint.fade { opacity: 0; }

    /* Écran de démarrage */
    #start-screen { position: fixed; inset: 0; background: #08090c; display: flex; align-items: center; justify-content: center; z-index: 100; transition: opacity 0.9s ease; }
    #start-screen.hidden { opacity: 0; pointer-events: none; }
    .start-inner { text-align: center; padding: 24px; max-width: 420px; width: 100%; }

    /* Logo KDL start screen */
    .start-logo { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 52px; }
    .start-logo-wordmark { text-align: left; line-height: 1.1; }
    .start-logo-name { font-family: 'Fraunces', Georgia, serif; font-size: 22px; font-weight: 400; color: #5a5450; letter-spacing: 0.04em; display: block; }
    .start-logo-sub  { font-family: 'Figtree', system-ui, sans-serif; font-size: 8.5px; font-weight: 300; letter-spacing: 0.30em; text-transform: uppercase; color: rgba(90,84,80,0.55); display: block; margin-top: 2px; }

    .start-title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(68px,15vw,96px); font-weight: 300; color: #f4f1eb; line-height: 0.95; letter-spacing: -0.03em; margin-bottom: 18px; }
    .start-sub { font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: #5a5450; margin-bottom: 56px; }
    .start-sub span { color: #b7c9a8; }

    /* Bouton démarrer — green tea */
    #start-btn { background: #b7c9a8; color: #0e100d; border: none; padding: 14px 40px; font-family: 'Figtree', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 0.05em; border-radius: 8px; cursor: pointer; transition: opacity 0.22s ease, transform 0.22s ease; }
    #start-btn:hover { opacity: 0.85; transform: translateY(-1px); }
    #start-btn:disabled { opacity: 0.40; cursor: not-allowed; transform: none; background: #5a5450; }

    /* Barre chargement */
    #load-bar { width: 200px; height: 2px; background: rgba(183,201,168,0.10); border-radius: 1px; margin: 22px auto 0; overflow: hidden; }
    #load-bar-fill { height: 100%; background: #b7c9a8; width: 0%; transition: width 0.25s ease; border-radius: 1px; }

    .start-controls { margin-top: 28px; font-size: 11px; color: #3a3935; letter-spacing: 0.05em; }

    /* Contrôles tactiles */
    #touch-controls { display: none; position: fixed; bottom: 24px; left: 0; right: 0; z-index: 11; pointer-events: none; }
    @media (pointer: coarse) { #touch-controls { display: flex; justify-content: space-between; padding: 0 24px; } #controls-hint { display: none; } }
    .touch-btn { width: 64px; height: 64px; background: rgba(183,201,168,0.12); border: 1px solid rgba(183,201,168,0.28); border-radius: 12px; pointer-events: all; display: flex; align-items: center; justify-content: center; color: #b7c9a8; font-size: 22px; user-select: none; -webkit-user-select: none; touch-action: none; }
    .touch-btn:active { background: rgba(183,201,168,0.28); }
    .touch-group { display: flex; gap: 10px; }