*{margin:0;padding:0;box-sizing:border-box}html,body{overflow:hidden;width:100%;height:100%;font-family:sans-serif;background-color:#000}#canvas{display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;background-color:#000}#canvas:hover{cursor:pointer}#ui-container{position:fixed;bottom:10px;left:10px;z-index:10;display:flex;flex-direction:column;gap:10px;pointer-events:none}#controls{pointer-events:auto}#controls button{padding:8px 12px;background-color:#000000b3;color:#fff;border:1px solid #555;border-radius:4px;cursor:pointer;font-size:12px}#controls button:hover{background-color:#323232cc}#debug-log-area{width:375px;height:650px;background-color:#0009;color:#ccc;border:1px solid #444;border-radius:4px;padding:5px;font-size:11px;font-family:monospace;overflow-y:scroll;pointer-events:auto;resize:both}#debug-log-area p{margin-bottom:3px;border-bottom:1px solid #333;padding-bottom:2px}#debug-log-area p:first-child{font-weight:700;color:#fff}.health-bar-container{position:fixed;bottom:20%;left:50%;transform:translate(-50%);width:200px;height:25px;background-color:#323232cc;border:1px solid #888;border-radius:5px;padding:2px;z-index:20;box-sizing:border-box;text-align:center;pointer-events:none}.health-bar-label{position:absolute;left:0;right:0;top:3px;font-size:12px;color:#fff;text-shadow:1px 1px 1px black;z-index:2;line-height:16px}.health-bar-fill{height:100%;width:100%;background-color:#b33;border-radius:3px;transition:width .1s linear;z-index:1}#inventory-panel{position:fixed;bottom:50px;right:50px;background-color:#1e1e1ed9;border:2px solid #666;border-radius:8px;padding:10px;z-index:15;display:grid;grid-template-columns:repeat(4,55px);gap:8px;pointer-events:auto}.inventory-slot{width:55px;height:55px;background-color:#505050b3;border:1px solid #444;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:#fff;position:relative;overflow:hidden;box-sizing:border-box}.inventory-slot .item-icon{font-size:16px;margin-bottom:3px}.inventory-slot .item-quantity{position:absolute;bottom:2px;right:4px;font-size:12px;font-weight:700;text-shadow:1px 1px 1px black}.inventory-slot.empty{background-color:#3c3c3cb3}#interaction-prompt{position:fixed;bottom:15%;left:50%;transform:translate(-50%);background-color:#000000b3;color:#fff;padding:8px 15px;border-radius:5px;font-size:14px;font-family:sans-serif;text-align:center;z-index:10;pointer-events:none;opacity:1;transition:opacity .2s ease-in-out}#interaction-prompt.hidden{opacity:0}#action-bar{position:fixed;bottom:10px;left:50%;transform:translate(-50%);display:flex;gap:5px;background-color:#0a0a0ab3;padding:5px;border:1px solid #555;border-radius:6px;z-index:10}.action-slot{width:45px;height:45px;background-color:#505050cc;border:1px solid #444;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#ccc;position:relative;overflow:hidden;box-sizing:border-box}.hotkey-number{position:absolute;bottom:2px;right:4px;font-size:10px;color:#fff;text-shadow:1px 1px 1px black}.action-slot .ability-icon{font-size:12px}.action-slot:after{content:attr(data-slot-index) + 1;position:absolute;bottom:2px;left:3px;font-size:10px;color:#fff;text-shadow:1px 1px 1px black}.action-slot .cooldown-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;transition:height .1s linear;pointer-events:none}.action-slot.ready .cooldown-overlay{height:0}.chat-bubble{position:fixed;top:20%;left:50%;transform:translate(-50%);min-width:100px;max-width:250px;padding:10px 15px;background-color:#c8c8dcd9;color:#1a1a1a;border:1px solid #aaa;border-radius:15px;font-size:13px;font-family:sans-serif;text-align:center;z-index:25;pointer-events:none;opacity:1;transition:opacity .3s ease-in-out;box-shadow:2px 2px 5px #0003}.chat-bubble.hidden{opacity:0}.chat-bubble:after{content:"";position:absolute;bottom:-10px;left:50%;transform:translate(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(200,200,220,.85)}#game-clock{position:fixed;top:10px;right:10px;background-color:#0009;color:#fff;padding:5px 10px;border-radius:3px;font-family:monospace;font-size:16px;z-index:10;pointer-events:none}