:root{--font-main: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;--color-bg: #1a1a1a;--color-text: #ffffff;--color-accent: #ff4d4d;--color-accent-secondary: #2ecc71;--color-panel-bg: rgba(0, 0, 0, .8);--color-border: #444}body{margin:0;padding:0;font-family:var(--font-main);background-color:var(--color-bg);color:var(--color-text);overflow:hidden}#app{position:relative;width:100vw;height:100vh}canvas{display:block;image-rendering:pixelated}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:1rem;box-sizing:border-box}.hud-top{display:flex;justify-content:space-between;align-items:flex-start;pointer-events:auto}.status-panel{background:var(--color-panel-bg);border:2px solid var(--color-border);border-radius:8px;padding:10px;min-width:200px}.bar-container{margin-bottom:8px}.bar-label{font-size:12px;margin-bottom:2px;display:flex;justify-content:space-between}.bar{height:12px;background:#333;border-radius:4px;overflow:hidden;position:relative}.bar-fill{height:100%;transition:width .2s ease}.hp-fill{background:var(--color-accent)}.energy-fill{background:#f1c40f}.warmth-fill{background:#3498db}.log-window{background:#0009;border:1px solid var(--color-border);border-radius:4px;padding:8px;width:300px;height:150px;overflow-y:auto;font-size:12px;pointer-events:auto;display:flex;flex-direction:column;transition:height .3s ease}.log-window.minimized{height:30px;overflow:hidden}.log-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;font-weight:700;font-size:14px;color:#ddd}.icon-btn{background:none;border:1px solid #555;color:#aaa;cursor:pointer;border-radius:4px;width:20px;height:20px;display:flex;justify-content:center;align-items:center;font-size:16px;line-height:1}.icon-btn:hover{background:#444;color:#fff}.log-content{flex:1;overflow-y:auto}.log-entry{margin-bottom:4px;opacity:.9}.hud-bottom{display:flex;justify-content:center;align-items:flex-end;pointer-events:auto}.hotbar{display:flex;gap:4px;background:var(--color-panel-bg);padding:8px;border-radius:8px;border:2px solid var(--color-border)}.slot{width:40px;height:40px;background:#222;border:1px solid #555;border-radius:4px;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transition:border-color .1s}.slot:hover{border-color:var(--color-text)}.slot.active{border-color:var(--color-accent-secondary);box-shadow:0 0 5px var(--color-accent-secondary)}.slot-key{position:absolute;top:2px;left:2px;font-size:10px;color:#aaa}.modal-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;pointer-events:auto;z-index:100}.hidden{display:none!important}.inventory-window{background:#2c3e50;border:2px solid var(--color-border);border-radius:8px;width:500px;height:400px;display:flex;flex-direction:column;box-shadow:0 10px 25px #00000080}.window-header{background:#34495e;padding:10px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--color-border)}.window-title{font-weight:700;font-size:18px}.close-btn{background:none;border:none;color:#aaa;font-size:20px;cursor:pointer}.close-btn:hover{color:#fff}.window-content{padding:20px;display:flex;gap:20px;flex:1}.equipment-panel{width:150px;display:flex;flex-direction:column;gap:10px}.inventory-grid{flex:1;display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:40px;gap:5px;align-content:start}:root{--color-primary: #dc2626;--color-primary-dark: #991b1b;--color-secondary: #16a34a;--color-secondary-dark: #15803d;--color-accent: #f59e0b;--color-background: rgba(0, 0, 0, .85);--color-background-dark: rgba(0, 0, 0, .95);--color-panel: #1f2937;--color-panel-light: #374151;--color-border: #6b7280;--color-border-light: #9ca3af;--color-text: #ffffff;--color-text-secondary: #d1d5db;--color-text-muted: #9ca3af;--color-text-danger: #ef4444;--color-health: #22c55e;--color-health-low: #ef4444;--color-warmth: #f97316;--color-warmth-low: #06b6d4;--spacing-xs: 2px;--spacing-sm: 4px;--spacing-md: 8px;--spacing-lg: 12px;--spacing-xl: 16px;--border-radius-sm: 4px;--border-radius-md: 6px;--border-radius-lg: 8px}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;font-family:Arial,sans-serif;color:var(--color-text);z-index:1000}#ui-layer>*{pointer-events:auto}#hud{position:absolute;top:var(--spacing-lg);left:var(--spacing-lg);background-color:var(--color-background);border:2px solid var(--color-border);border-radius:var(--border-radius-md);padding:var(--spacing-md);width:200px}.stat-row{margin-bottom:var(--spacing-md)}.stat-label{font-weight:700;margin-bottom:var(--spacing-xs);display:block;font-size:14px}.progress-bar{width:100%;height:20px;background-color:var(--color-panel);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);overflow:hidden;position:relative}.progress-fill{height:100%;transition:width .3s ease,background-color .3s ease}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;text-shadow:1px 1px 0 #000;white-space:nowrap}#hotbar{position:absolute;bottom:var(--spacing-lg);left:50%;transform:translate(-50%);display:flex;gap:var(--spacing-sm);background-color:var(--color-background);padding:var(--spacing-sm);border:2px solid var(--color-border);border-radius:var(--border-radius-md);pointer-events:auto}.hotbar-slot{width:48px;height:48px;background-color:var(--color-panel-light);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);position:relative;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .2s}.hotbar-slot:hover{border-color:var(--color-text-secondary);background-color:#ffffff1a}.hotbar-hotkey{position:absolute;top:2px;left:4px;font-size:10px;color:var(--color-text-muted);pointer-events:none}.inventory-btn{font-weight:700;font-size:18px;color:var(--color-text);background-color:var(--color-panel)}.inventory-btn:hover{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary-dark)}#game-journal{position:absolute;bottom:var(--spacing-lg);right:var(--spacing-lg);width:300px;max-height:200px;background-color:var(--color-background);border:2px solid var(--color-border);border-radius:var(--border-radius-md);display:flex;flex-direction:column}.journal-header{padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-panel);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none}.journal-content{flex:1;overflow-y:auto;padding:var(--spacing-sm);font-size:12px}.log-entry{margin-bottom:2px;line-height:1.4}.log-time{color:var(--color-text-muted);margin-right:4px}.journal-filters{display:flex;gap:2px;padding:0 4px;background-color:var(--color-panel);border-bottom:1px solid var(--color-border);margin-top:4px}.filter-btn{background:none;border:1px solid transparent;border-bottom:none;border-radius:4px 4px 0 0;cursor:pointer;padding:4px 8px;font-size:12px;color:var(--color-text-muted);transition:all .2s;margin-bottom:-1px}.filter-btn:hover{color:var(--color-text);background-color:#ffffff0d}.filter-btn.active{color:var(--color-text);background-color:var(--color-background);border:1px solid var(--color-border);border-bottom:1px solid var(--color-background);font-weight:700}.modal{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:2000;pointer-events:auto}.modal-content{background-color:var(--color-panel);border:2px solid var(--color-border);border-radius:var(--border-radius-lg);width:600px;max-width:90%;max-height:90%;display:flex;flex-direction:column;box-shadow:0 10px 25px #00000080}.modal-header{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center;background-color:var(--color-panel-light);border-radius:var(--border-radius-lg) var(--border-radius-lg) 0 0}.modal-header h2{margin:0;font-size:18px;color:var(--color-text)}.close-btn{background:none;border:none;color:var(--color-text-muted);font-size:24px;cursor:pointer;line-height:1}.close-btn:hover{color:var(--color-text)}.inventory-layout{display:flex;padding:var(--spacing-lg);gap:var(--spacing-xl);flex:1;overflow-y:auto}.equipment-panel{width:150px;display:flex;flex-direction:column;gap:var(--spacing-md)}.equipment-panel h3,.inventory-container h3{margin:0 0 var(--spacing-sm) 0;font-size:14px;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-xs)}.equipment-slots{display:flex;flex-direction:column;gap:var(--spacing-lg);align-items:center;margin-top:var(--spacing-md)}.equipment-slot-row{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs)}.slot-label{font-size:11px;color:var(--color-text-muted)}.inventory-container{flex:1}.inventory-grid{display:grid;grid-template-columns:repeat(5,48px);grid-auto-rows:48px;gap:12px;margin-top:var(--spacing-md);padding:var(--spacing-md);background-color:#0003;border-radius:var(--border-radius-sm);max-height:600px;overflow-y:auto;justify-content:center}.item-slot,.equipment-slot{width:48px;height:48px;background-color:var(--color-panel-light);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);position:relative;cursor:pointer;transition:border-color .2s,background-color .2s;display:flex;justify-content:center;align-items:center;flex-shrink:0}.item-slot:hover,.equipment-slot:hover{border-color:var(--color-text-secondary);background-color:#ffffff1a}.item-slot.selected,.equipment-slot.selected{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.item-slot.drag-over,.equipment-slot.drag-over{border-color:var(--color-accent);background-color:#f59e0b1a}.item-icon{background-position:center;image-rendering:pixelated}.item-count{position:absolute;bottom:2px;right:2px;background-color:#000c;color:#fff;font-size:10px;padding:1px 3px;border-radius:2px;pointer-events:none}.item-rarity-bar{position:absolute;bottom:0;left:0;width:100%;height:3px}.rarity-common .item-rarity-bar{background-color:#9ca3af}.rarity-uncommon .item-rarity-bar{background-color:#22c55e}.rarity-rare .item-rarity-bar{background-color:#3b82f6}.rarity-epic .item-rarity-bar{background-color:#8b5cf6}.rarity-legendary .item-rarity-bar{background-color:#f59e0b}.rarity-cursed .item-rarity-bar{background-color:#dc2626}.modal-footer{padding:var(--spacing-md) var(--spacing-lg);border-top:1px solid var(--color-border);background-color:var(--color-panel-light);border-radius:0 0 var(--border-radius-lg) var(--border-radius-lg)}.item-info{font-size:12px;color:var(--color-text-secondary);min-height:1.2em}.dragging{opacity:.5}#ui-tooltip{position:absolute;background-color:var(--color-background-dark);border:1px solid var(--color-border-light);padding:var(--spacing-sm);border-radius:var(--border-radius-sm);pointer-events:none;z-index:3000;max-width:250px;font-size:12px;box-shadow:0 4px 6px #0000004d;display:none}.tooltip-title{font-weight:700;margin-bottom:4px;display:block}.tooltip-desc{color:var(--color-text-secondary);display:block;margin-bottom:4px}.tooltip-stats{color:var(--color-accent);font-size:11px}#minimap-container{position:absolute;top:var(--spacing-lg);right:var(--spacing-lg);background-color:#000c;border:2px solid var(--color-border);border-radius:var(--border-radius-md);padding:var(--spacing-xs);display:flex;flex-direction:column;align-items:flex-end;pointer-events:auto;z-index:1100;transition:all .3s ease}#minimap-container.minimized{width:auto;height:auto;background-color:transparent;border:none}#minimap-canvas{image-rendering:pixelated;cursor:crosshair;margin-top:var(--spacing-xs);border:1px solid var(--color-border-light)}#minimap-toggle{background-color:var(--color-panel);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--border-radius-sm);width:20px;height:20px;display:flex;justify-content:center;align-items:center;cursor:pointer;font-size:14px;line-height:1;padding:0}#minimap-toggle:hover{background-color:var(--color-panel-light);color:#fff}