html, body { margin: 0; height: 100%; overflow: hidden; background: lightskyblue; }
canvas { display: block; }
#hud { position: fixed; inset: 12px 12px auto 12px; display: flex; justify-content: space-between; gap: 12px; color: white; font: 600 18px system-ui, sans-serif; text-shadow: 0 2px 4px black; pointer-events: none; }
#aide { font-size: 14px; opacity: 0.85; text-align: right; }
#message { position: fixed; inset: 0; display: grid; place-items: center; color: white; font: 700 42px system-ui, sans-serif; text-shadow: 0 3px 8px black; pointer-events: none; }
#vie { color: #ff4d6d; font-size: 28px; }
#score { margin-right: auto; margin-left: 16px; }
#score { white-space: nowrap; }
#barre { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
#barre span { width: 64px; height: 64px; display: grid; place-items: center; color: white; font: 700 18px system-ui; text-shadow: 0 1px 3px black; border: 4px solid #333; box-sizing: border-box; position: relative; }
#barre span.on { border-color: white; transform: scale(1.12); }
#barre small { position: absolute; bottom: -18px; font-size: 11px; }