html, body { margin: 0; height: 100%; overflow: hidden; background: #000; font: 600 16px system-ui, sans-serif; }
canvas { display: block; }
#hud { position: fixed; inset: 12px 12px auto 12px; display: flex; justify-content: space-between; gap: 12px; color: white; text-shadow: 0 2px 4px black; pointer-events: none; }
#monde { font-size: 22px; }
#aide { font-size: 13px; opacity: 0.85; text-align: right; max-width: 45%; }
#cross { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); color: white; font-size: 28px; text-shadow: 0 0 3px black; pointer-events: none; }
#name { position: fixed; bottom: 78px; width: 100%; text-align: center; color: white; text-shadow: 0 2px 4px black; pointer-events: none; }
#bar { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; background: #0008; border-radius: 4px; }
.slot { width: 52px; height: 52px; border: 3px solid #555; background: #222; position: relative; box-sizing: border-box; cursor: pointer; }
.slot.on { border-color: #fff; }
.slot i { position: absolute; inset: 6px; background: var(--c); image-rendering: pixelated; box-shadow: inset -4px -4px 0 #0004, inset 4px 4px 0 #fff3; }
.slot b { position: absolute; top: -2px; left: 2px; z-index: 1; color: #fff; font-size: 11px; }
#invbox { display: none; position: fixed; inset: 8% 12%; background: #000c; color: white; padding: 16px; border-radius: 8px; overflow: auto; }
body.inv #invbox { display: block; }
#all { display: flex; flex-wrap: wrap; gap: 8px; }
.slot.big { width: 84px; height: 84px; }
.slot.big i { inset: 6px 6px 26px; }
.slot.big span { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; color: white; font-size: 11px; }
#flash { position: fixed; inset: 0; background: #b066ff; opacity: 0; transition: opacity 0.15s; pointer-events: none; }
#hearts { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); color: #ff4060; font-size: 26px; text-shadow: 0 2px 3px black; pointer-events: none; }
#moment { position: fixed; top: 64px; left: 12px; color: #ffe27a; text-shadow: 0 2px 3px black; font-size: 18px; pointer-events: none; }
#near { position: fixed; top: 90px; left: 12px; color: #d9b3ff; text-shadow: 0 2px 3px black; font-size: 18px; pointer-events: none; }

.slot em { position: absolute; right: 3px; bottom: 1px; z-index: 1; color: #fff; font: bold 13px sans-serif; font-style: normal; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.slot.big em { bottom: 22px; right: 8px; }

/* Commandes tactiles */
.pad, .pad-knob, .tbtn { display: none; position: fixed; z-index: 20; touch-action: none; user-select: none; -webkit-user-select: none; }
body.touch .pad { display: block; left: 28px; bottom: 28px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.22); border: 3px solid rgba(255,255,255,.55); }
body.touch .pad-knob { display: block; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(255,255,255,.6); pointer-events: none; }
body.touch .tbtn { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; background: rgba(0,0,0,.4); border: 3px solid rgba(255,255,255,.6); color: #fff; font: bold 15px sans-serif; }
body.touch .jump { right: 30px; bottom: 100px; }
body.touch .down { right: 30px; bottom: 20px; }
body.touch .place { right: 115px; bottom: 60px; }
body.touch .arme { right: 200px; bottom: 20px; }