html, body { margin: 0; height: 100%; overflow: hidden; background: #222; font-family: system-ui, sans-serif; user-select: none; }
canvas { display: block; }
#hud { position: fixed; inset: 12px 12px auto 12px; display: flex; justify-content: space-between; gap: 12px; color: white; font-weight: 600; text-shadow: 0 2px 4px black; pointer-events: none; }
#hpbar { position: relative; width: 240px; height: 22px; background: rgba(0, 0, 0, 0.55); border: 2px solid white; border-radius: 8px; overflow: hidden; }
#hpfill { height: 100%; width: 100%; background: #e11d48; transition: width 0.15s; }
#hptext { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; }
#region { margin-top: 6px; font-size: 18px; }
#equip { margin-top: 4px; font-size: 14px; opacity: 0.95; }
#sauvegarde { margin-top: 8px; display: flex; gap: 6px; pointer-events: auto; }
#sauvegarde button { padding: 5px 10px; font: 600 13px system-ui, sans-serif; color: white; background: rgba(0, 0, 0, 0.55); border: 2px solid white; border-radius: 8px; cursor: pointer; }
#sauvegarde button:hover { background: rgba(37, 99, 235, 0.8); }
#aide { font-size: 13px; opacity: 0.85; text-align: right; line-height: 1.5; }
#quetes { position: fixed; left: 12px; bottom: 12px; max-width: 330px; padding: 10px 14px; background: rgba(0, 0, 0, 0.5); color: white; border-radius: 10px; font-size: 14px; line-height: 1.4; pointer-events: none; }
#quetes b { color: #facc15; }
#quetes div + div { margin-top: 8px; }
#prompt { position: fixed; left: 50%; bottom: 180px; transform: translateX(-50%); padding: 8px 16px; background: rgba(0, 0, 0, 0.65); color: white; border: 2px solid #facc15; border-radius: 10px; font-size: 18px; font-weight: 700; pointer-events: none; }
#dialogue { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(620px, 90vw); padding: 14px 18px; background: rgba(15, 15, 30, 0.88); color: white; border: 3px solid #facc15; border-radius: 14px; pointer-events: none; }
#dnom { color: #facc15; font-weight: 800; font-size: 18px; margin-bottom: 6px; }
#dtexte { font-size: 17px; line-height: 1.45; white-space: pre-line; }
#dfin { margin-top: 8px; font-size: 13px; opacity: 0.7; text-align: right; }
#inventaire { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 460px; max-width: 94vw; padding: 14px 18px; background: rgba(15, 15, 30, 0.93); color: white; border: 3px solid #60a5fa; border-radius: 14px; }
#inventaire h2 { margin: 0 0 10px; }
#inventaire p { margin: 10px 0 0; font-size: 13px; opacity: 0.75; }
#grille { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.case { position: relative; aspect-ratio: 1; display: grid; place-items: center; font-size: 28px; background: rgba(255, 255, 255, 0.08); border: 2px solid #4b5563; border-radius: 8px; cursor: pointer; }
.case.equipe { border-color: #facc15; background: rgba(250, 204, 21, 0.2); }
.case .n { position: absolute; right: 4px; bottom: 1px; font-size: 13px; font-weight: 700; }
#detail { min-height: 40px; margin-top: 10px; font-size: 15px; }
#toasts { position: fixed; top: 110px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none; }
.toast { padding: 5px 14px; background: rgba(0, 0, 0, 0.65); color: white; border-radius: 8px; font-weight: 600; font-size: 16px; }
#banner { position: fixed; top: 22%; left: 0; right: 0; text-align: center; color: white; font-size: 46px; font-weight: 800; text-shadow: 0 3px 10px black; opacity: 0; pointer-events: none; }
#banner.show { animation: banniere 3.2s ease-out; }
@keyframes banniere { 0% { opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
[hidden] { display: none !important; }