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; }
#defis { text-align: left; line-height: 1.5; }
#charge { position: fixed; left: 50%; bottom: 60px; width: 260px; height: 18px; transform: translateX(-50%); border: 3px solid white; border-radius: 10px; background: rgba(0,0,0,.4); overflow: hidden; }
#charge div { height: 100%; width: 0; background: linear-gradient(90deg, #ffd23f, #ff3b3b); }
#quetes { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(480px, 90vw); padding: 20px 24px; background: rgba(20, 30, 40, 0.88); color: white; border-radius: 14px; font: 16px/1.5 system-ui, sans-serif; }
#quetes h2 { margin: 0 0 10px; }
#quetes div { margin-bottom: 12px; }
#quetes .fait { opacity: 0.6; }
#quetes p { margin: 0; opacity: 0.7; font-size: 14px; }
#quetes[hidden] { display: none; }