/* Debug Component - Lake Wequaquet */

/* Debug Menu */
.debug-menu { position: fixed; bottom: 20px; right: 20px; background: rgba(10,15,25,0.95); border: 1px solid rgba(100,150,255,0.2); border-radius: 8px; padding: 12px 16px; z-index: 300; font-family: 'IBM Plex Mono', monospace; font-size: 0.65rem; display: none; min-width: 180px; }
.debug-menu.visible { display: block; }
.debug-menu-title { color: #e8944c; font-size: 0.7rem; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.debug-menu-close { background: none; border: none; color: #607080; cursor: pointer; font-size: 1rem; padding: 0 4px; }
.debug-menu-close:hover { color: #a0b0c0; }
.debug-key { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(100,150,255,0.1); }
.debug-key:last-child { border-bottom: none; }
.debug-key kbd { background: rgba(100,150,255,0.15); color: #8aa0c0; padding: 2px 6px; border-radius: 3px; font-family: inherit; }
.debug-key span { color: #708090; }

/* Debug Toggle */
.debug-toggle { position: fixed; bottom: 20px; right: 20px; background: rgba(232,148,76,0.2); border: 1px solid rgba(232,148,76,0.3); color: #e8944c; padding: 8px 12px; border-radius: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 0.6rem; cursor: grab; z-index: 299; user-select: none; }
.debug-toggle:hover { background: rgba(232,148,76,0.3); }
.debug-toggle:active { cursor: grabbing; }

/* Visual Debug Panel */
.visual-debug { position: fixed; bottom: 70px; right: 20px; width: 320px; max-height: 300px; background: rgba(10,15,25,0.95); border: 1px solid rgba(150,100,50,0.4); border-radius: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 0.55rem; z-index: 300; display: none; flex-direction: column; overflow: hidden; }
.visual-debug.visible { display: flex; }
.visual-debug-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: rgba(150,100,50,0.2); border-bottom: 1px solid rgba(150,100,50,0.2); }
.visual-debug-title { color: #e8944c; font-weight: 500; }
.visual-debug-controls { display: flex; gap: 8px; }
.visual-debug-btn { background: none; border: 1px solid rgba(150,100,50,0.3); color: #c08040; padding: 2px 8px; border-radius: 3px; cursor: pointer; font-size: 0.5rem; }
.visual-debug-btn:hover { background: rgba(150,100,50,0.2); }
.visual-debug-log { flex: 1; overflow-y: auto; padding: 8px; max-height: 250px; }
.visual-debug-entry { padding: 3px 0; border-bottom: 1px solid rgba(100,100,100,0.1); color: #8090a0; word-break: break-all; }
.visual-debug-entry.flash { color: #ff8080; }
.visual-debug-entry.opacity { color: #80c0ff; }
.visual-debug-entry.transform { color: #80ffc0; }
.visual-debug-entry.gradient { color: #c080ff; }
.visual-debug-entry.info { color: #a0a0a0; }
.visual-debug-time { color: #606570; margin-right: 6px; }