html,body{margin:0;height:100%;overflow:hidden;background:#021a2b;font-family:system-ui,sans-serif;color:#dff}
canvas{display:block;width:100vw;height:100vh}
#hud{position:fixed;top:10px;left:10px;background:#0008;padding:8px 12px;border-radius:10px;line-height:1.6}
.bar{display:inline-block;width:110px;height:10px;background:#234;border-radius:5px;vertical-align:middle}
.bar i{display:block;height:100%;width:0;background:#6f6;border-radius:5px}
#msg{position:fixed;top:12px;left:50%;transform:translateX(-50%);background:#0009;padding:6px 14px;border-radius:10px;opacity:0;transition:opacity .4s}
#panel{position:fixed;top:10px;right:10px;width:230px;max-height:92vh;overflow:auto;background:#0009;padding:8px 10px;border-radius:10px}
#panel h2{margin:0 0 6px;font-size:16px}
.trait{background:#0a3350;border-radius:8px;padding:6px;margin-bottom:6px;font-size:13px}
.trait button{width:100%;margin-top:4px;padding:5px;border:0;border-radius:6px;background:#3c9;color:#012;font-weight:bold;cursor:pointer}
.trait button:disabled{background:#456;color:#89a;cursor:default}
#over{position:fixed;inset:0;background:#000b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
#over[hidden]{display:none}
#over button{font-size:20px;padding:10px 24px;border:0;border-radius:10px;background:#3c9;cursor:pointer}
#help{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);font-size:13px;background:#0008;padding:5px 12px;border-radius:10px;max-width:80vw;text-align:center}