html, body { margin: 0; height: 100%; overflow: hidden; background: #222; font-family: 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; font-weight: 600; text-shadow: 0 2px 4px black; pointer-events: none; }
#region { font-size: 20px; margin-bottom: 6px; }
#hpbar { position: relative; width: 240px; height: 22px; background: rgba(0,0,0,.55); border: 2px solid #fff; border-radius: 12px; overflow: hidden; }
#hpfill { height: 100%; width: 100%; background: linear-gradient(#ff6b6b, #c92a2a); transition: width .15s; }
#hptext { position: absolute; inset: 0; text-align: center; font-size: 14px; line-height: 22px; }
#aide { font-size: 13px; opacity: .85; text-align: right; line-height: 1.5; }
#quests { position: fixed; left: 12px; top: 90px; width: 270px; color: white; font-size: 14px; text-shadow: 0 2px 4px black; pointer-events: none; }
#quests .q { background: rgba(0,0,0,.45); border-left: 4px solid #ffd23f; padding: 6px 10px; margin-bottom: 6px; border-radius: 6px; }
#quests .q.ready { border-color: #6be36b; }
#equip { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(0,0,0,.55); color: white; padding: 8px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; white-space: nowrap; pointer-events: none; }
#prompt { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); background: rgba(255,210,63,.95); color: #222; padding: 8px 18px; border-radius: 20px; font-weight: 700; pointer-events: none; }
#dialog { position: fixed; left: 50%; bottom: 60px; transform: translateX(-50%); width: min(680px, 90vw); background: rgba(20,20,40,.92); color: white; border: 3px solid #ffd23f; border-radius: 16px; padding: 12px 20px; pointer-events: none; }
#dialog b { color: #ffd23f; font-size: 18px; }
#dialog p { font-size: 18px; margin: 8px 0; }
#dialog small { opacity: .7; }
#toasts { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { background: rgba(0,0,0,.7); color: white; padding: 6px 16px; border-radius: 16px; font-weight: 600; animation: fade 3s forwards; }
@keyframes fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
#hurt { position: fixed; inset: 0; box-shadow: inset 0 0 120px 40px rgba(255,0,0,.7); opacity: 0; pointer-events: none; transition: opacity .3s; }
#hurt.on { opacity: 1; transition: none; }
#message { position: fixed; inset: 0; display: grid; place-items: center; color: white; font: 700 44px system-ui, sans-serif; text-shadow: 0 3px 8px black; pointer-events: none; text-align: center; }
#inventory { position: fixed; inset: 5vh 8vw; background: rgba(15,15,35,.95); color: white; border: 3px solid #ffd23f; border-radius: 18px; padding: 16px 24px; overflow: auto; }
#inventory h2 { margin: 0 0 10px; }
#inventory h3 { margin: 12px 0 6px; color: #ffd23f; }
#inventory .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; }
#inventory button { display: block; width: 100%; text-align: left; margin-bottom: 5px; padding: 7px 10px; border-radius: 8px; border: 2px solid #556; background: #2a2a4a; color: white; font-size: 14px; cursor: pointer; }
#inventory button:hover:not(:disabled) { background: #3a3a66; }
#inventory button.on { border-color: #6be36b; background: #24543a; }
#inventory button:disabled { opacity: .45; cursor: default; }
#inventory .mat { padding: 3px 0; }
#inventory .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; }