html, body { margin: 0; overflow: hidden; background: #8fd0ff; font-family: system-ui, sans-serif; }
canvas { display: block; }
#hud { position: fixed; inset: 0; pointer-events: none; color: #fff; text-shadow: 0 2px 4px #0006; }
#score { position: absolute; top: 14px; left: 18px; font-size: 32px; font-weight: bold; }
#help { position: absolute; top: 60px; left: 18px; font-size: 16px; max-width: 360px; }
#buttons { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; }
button { pointer-events: auto; font-size: 18px; padding: 10px 18px; border: 0; border-radius: 12px; background: #ff7a29; color: #fff; font-weight: bold; cursor: pointer; }
button:hover { background: #ff9650; }
#shop { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fffbe8; color: #333; padding: 18px 24px; border-radius: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 6px 24px #0005; }
#shop h2 { margin: 0; }
#shop button:disabled { background: #999; cursor: default; }
#shop p { margin: 0; min-height: 1.2em; }
#shop[hidden] { display: none; }
#victoire { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); font-size: 48px; font-weight: bold; color: #ffd700; text-align: center; }