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; }
#bossbar { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); width: min(500px, 80vw); color: white; font: 700 18px system-ui, sans-serif; text-shadow: 0 2px 4px black; text-align: center; }
#bossback { height: 18px; background: #300; border: 2px solid white; margin-top: 4px; }
#bossfill { height: 100%; width: 100%; background: #d22; transition: width 0.2s; }
#inventaire { position: fixed; bottom: 12px; left: 12px; display: flex; gap: 6px; pointer-events: none; }
.case { min-width: 48px; height: 48px; padding: 0 6px; box-sizing: border-box; background: rgba(0,0,0,0.5); border: 2px solid dimgray; border-radius: 8px; display: grid; place-items: center; color: white; font: 600 16px system-ui; }
.case.vide { opacity: 0.35; }
#craft { position: fixed; top: 90px; left: 12px; color: #bbb; font: 600 14px system-ui, sans-serif; text-shadow: 0 2px 4px black; pointer-events: none; line-height: 1.6; }
#craft .ok { color: #7CFC00; }