/* ARTEF4KT - Clean CSS */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'JetBrains Mono', monospace;
    background: #000;
    color: #fff;
    overflow: hidden;
    user-select: none;
}

#container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#visualizer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Filmic noise overlay */
#filmic-noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;    pointer-events: none;
    z-index: 1500; /* Above visualizer but below UI */
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Dynamic TV-like noise pattern - SVG-based grain */
#filmic-noise-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150"><defs><filter id="grain"><feTurbulence type="turbulence" baseFrequency="0.9" numOctaves="4" seed="2" stitchTiles="stitch"/><feComponentTransfer><feFuncA type="discrete" tableValues="0 0.05 0 0.15 0 0.05 0 0.25 0 0.05 0"/></feComponentTransfer></filter></defs><rect width="100%" height="100%" filter="url(%23grain)" opacity="0.3"/></svg>') repeat;
    opacity: 0.9;
    animation: grain-move-1 3s infinite linear;
}

#filmic-noise-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><defs><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="3" stitchTiles="stitch"/><feComponentTransfer><feFuncA type="discrete" tableValues="0 0.1 0 0.2 0 0.1 0 0.3 0 0.1 0"/></feComponentTransfer></filter></defs><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.4"/></svg>') repeat;
    opacity: 0.8;
    animation: grain-move-2 4s infinite linear reverse;
}

/* Keyframes for grain movement */
@keyframes grain-move-1 {
    0% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-2px, -1px) scale(1.01); }
    50% { transform: translate(1px, -2px) scale(0.99); }
    75% { transform: translate(-1px, 1px) scale(1.02); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes grain-move-2 {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(1px, -2px) scale(0.98); }
    66% { transform: translate(-2px, 1px) scale(1.01); }
    100% { transform: translate(0, 0) scale(1); }
}

#ui {
    position: fixed;
    top: 0;
    right: -340px; /* Hide off screen by default */
    left: auto;
    height: 100vh; /* Fill full height */    z-index: 2000; /* Highest z-index to be above everything */
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0; /* Remove border radius for full height */
    border-right: none; /* Remove right border since it's at screen edge */
    min-width: 340px;
    max-width: 340px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    transition: right 0.3s cubic-bezier(.4,0,.2,1);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
}

/* Controls container with scroll functionality */
#controls {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 8px; /* Add padding to account for scrollbar */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1); /* Firefox */
}

/* Custom scrollbar for controls container */
#controls::-webkit-scrollbar {
    width: 6px;
}

#controls::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

#controls::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

#controls::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Hover area to trigger UI panel */
#ui-hover-area {
    position: fixed;
    top: 0;
    right: 0;
    width: 32px;
    height: 100vh;
    z-index: 1900; /* High z-index but below UI panel */
    background: transparent;
    cursor: pointer;
}

#ui:hover, #ui:focus-within, #ui-hover-area:hover ~ #ui {
    right: 0;
}

/* Show a small tab to hint at the UI */
#ui::before {
    content: '◀';
    position: absolute;
    left: -22px;
    top: 60px; /* Position near the top instead of center */    width: 22px;
    height: 60px;    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-shadow: 2px 0 12px 0 rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 2100; /* Higher than UI panel to stay visible */
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    transition: all 0.3s ease;
    pointer-events: auto; /* Ensure it's clickable */
}

#ui:hover::before, #ui:focus-within::before, #ui-hover-area:hover ~ #ui::before {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    color: rgba(255,255,255,0.9);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Close button for mobile - only visible when UI is open */
#ui::after {
    content: '✕';
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-family: 'JetBrains Mono', monospace;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2200;
    transition: all 0.3s ease;
    pointer-events: auto;
}

#ui::after:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 1);
}

/* Status Message Display (above debug console) */
#status-message {
    position: fixed;
    top: 5px;
    left: 10px;
    z-index: 1050;
    padding: 0px;
    margin-bottom: 8px;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: #bbbbbb;
    font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', monospace;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
    pointer-events: none;
    user-select: none;
    text-align: left;
    white-space: pre-wrap;
    text-transform: uppercase;
}

/* Debug Info Panel (left side overlay) */
#debug-info-panel {
    position: fixed;
    top: 25px;
    left: 10px;
    right: auto;
    width: 400px;
    max-width: 45vw;
    height: calc(100vh - 25px);
    background: none;
    color: #bbbbbb;
    font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', monospace;
    font-size: 11px;
    line-height: 1.45;
    overflow-y: scroll;
    padding: 0;
    z-index: 1000;
    border: none;
    box-shadow: none;
    pointer-events: none;
    white-space: pre-wrap;
    text-align: left;
    scrollbar-width: none; /* Firefox */
}

#debug-info-panel::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

#header {
    margin-bottom: 20px;
    text-align: left;
    flex-shrink: 0; /* Prevent header from shrinking */
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#header h1 {
    font-family:Helvetica,  Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0px;
    color: #fff;
    margin-bottom: 4px;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    flex: 1;
}

#header-logo {
    width: 32px;
    height: 32px;
    opacity: 0.8;
    filter: invert(1) brightness(1.2);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

#header-logo:hover {
    opacity: 1;
    filter: invert(1) brightness(1.4);
    transform: scale(1.05);
}

#header p {
    font-size: 11px;
    font-weight: 300;
    color: #aaa;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.control-section { 
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}
.control-section .section-name {
    font-size: 12px;
    font-weight: 600;
     color: #ccc;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0px; 
    display:none;
}
.control-group {
    margin-bottom: 5px; /* Reduced from 15px */
}

.control-group label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.control-group span {
    font-size: 10px;
    color: #ccc;
    line-height: 1;
}

/* Slider control specific styling */
.slider-control {
    margin-bottom: 8px; /* Reduced from 18px */
}

.control-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px; /* Reduced from 4px */
}

.slider-control .control-header label {
    margin-bottom: 0;
    flex: 1;
}

.slider-control .control-header span {
    font-weight: 500;
    color: #fff;
    min-width: 50px;
    text-align: right;
}

.slider-control input[type="range"] {
    width: 100%;
    margin-right: 0;
}

/* Checkbox control specific styling */
.checkbox-control .control-header {
    margin-bottom: 0;
}

.checkbox-control .control-header label {
    margin-bottom: 0;
    flex: 1;
}

.checkbox-control .control-header input[type="checkbox"] {
    margin-left: 10px;
}

/* Color controls specific styling */
.color-controls {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    width: 100%;
}

.color-control {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 6px;
    padding: 0;
}

.color-control label {
    font-size: 9px;
    font-weight: 500;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 0px;
    margin-bottom: 0;
    text-align: left;
}

.color-control input[type="color"] {
    width: 100%;
    height: 25px;
    max-width: 60px;
}

/* Randomize colors button styling */
.color-control button#randomize-colors {
    width: 100%;
    height: 25px;
    max-width: 60px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.color-control button#randomize-colors:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.color-control button#randomize-colors:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.3);
}

/* File input styling */
input[type="file"] {
    width: 100%;
    padding: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

input[type="file"]:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

input[type="file"]::file-selector-button {
    background: #333;
    border: none;
    color: #fff;
    padding: 6px 8px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    margin-right: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
}

input[type="file"]::file-selector-button::before {
    content: "File";
}

input[type="file"]::file-selector-button:hover {
    background: #555;
}

/* Custom file input styling */
.custom-file-input {
    display: flex;
    align-items: center;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.player-buttons { margin-bottom: 8px; }

.custom-file-input:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.custom-file-input #file-button {
    background: #333;
    border: none;
    color: #fff;
    padding: 8px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: background 0.3s ease;
    border-radius: 0;
    flex-shrink: 0;
}

.custom-file-input #file-button:hover {
    background: #555;
}

.custom-file-input #file-name-display {
    padding: 8px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.8);
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Button styling */
/* Control buttons - play/pause/loop/stop should match settings buttons */
#play-pause, #loop, #stop {
    padding: 8px 12px;
    font-size: 9px;
    background: #333;
}

#play-pause:hover, #loop:hover, #stop:hover {
    background: #555;
}

button {
    background: #444;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    margin-right: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

button:hover {
    color: #fff;
}

button:active {
    background: #333;
}

button.playing {
    background: #fff;
    color: #fff;
}

button.playing:hover {
    background: #eee;
    color: #222;
}

/* Loop button active state */
button.active {
    color: #fff;
    border-color: #fff;
}

button.active:hover {
    color: #fff;
}

/* Range input styling */
input[type="range"] {
    width: 75%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
    margin-right: 10px; 
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

input[type="range"]::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Checkbox styling */
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #fff;
    cursor: pointer;
}

/* Color input styling */
input[type="color"] {
    width: 60px;
    height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    outline: none;
    padding: 0;
}

input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border: none;
    border-radius: 3px;
}

#info {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    font-size: 10px;
}

.info-item .label {
    color: #888;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-item span:last-child {
    color: #fff;
    font-weight: 400;
}

/* Frequency Range Indicators */
#frequency-ranges {
    margin-top: 8px;
}

.freq-range {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0px;
    padding: 4px 0;
    gap: 8px;
}

.freq-label {
    font-weight: 600;
    font-size: 6px;
    letter-spacing: 1px;
    min-width: 60px;
    color: #ccc;
    text-align: right;
    flex-shrink: 0;
}

.freq-hz {
    font-size: 6px;
    color: #888;
    min-width: 65px;
    text-align: center;
}

.freq-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-right: 8px;
    overflow: hidden;
}

.freq-level {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    transition: width 0.1s ease-out;
    background: #fff;
}

.freq-range.bass .freq-label,
.freq-range.mids .freq-label,
.freq-range.highs .freq-label {
    color: #ccc;
}

.freq-range.bass .freq-level,
.freq-range.mids .freq-level,
.freq-range.highs .freq-level {
    background: #fff;
}

/* Track Info Display */
#track-info-display {
    position: fixed;
    bottom: 120px;
    right: 20px;
    z-index: 55;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
    font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', monospace;
    writing-mode: vertical-lr;
    text-orientation: mixed;
}

#track-numbers-line {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
    font-size: 24px;
    line-height: 24px;
    font-weight: 600;
    color: #bbbbbb;
    letter-spacing: 2px;
    text-align: center;
}

#track-bpm,
#track-time-display,
#track-freq-display,
#performance-fps,
#performance-quality,
#performance-objects {
    font-size: 24px;
    font-weight: 600;
    color: #bbbbbb;
    letter-spacing: 2px;
    text-align: center;
}

#track-name-vertical {
    font-size: 11px;
    font-weight: 400;
    color: #bbbbbb;
    letter-spacing: 1px;
    text-transform: uppercase;
    max-width: 120px;
    word-wrap: break-word;
    text-align: right;
    line-height: 1.3;
}



/* Vertical Frequency Analyzer Clone */
#frequency-analyzer-clone {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 50;
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    background: none;
    pointer-events: none;
    font-family: 'JetBrains Mono', 'Fira Mono', 'Consolas', monospace;
}

.freq-range-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.freq-bar-vertical {
    width: 6px;
    height: 80px;
    background: rgba(187, 187, 187, 0.1);
    border: 1px solid rgba(187, 187, 187, 0.3);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.freq-level-vertical {
    width: 100%;
    height: 0%;
    position: absolute;
    bottom: 0;
    background: #bbbbbb;
    border-radius: 3px;
    transition: height 0.1s ease-out;
}

/* SVG Logos Container */
#svg-logos-container {
    position: fixed;
    bottom: 30px;
    right: 100px;
    z-index: 1500; /* Below UI panel but above visualizer */
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none; /* Keep container non-interactive */
}

.svg-logo {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.svg-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: auto; /* Enable clicking on links */
    transition: transform 0.3s ease;
}

.svg-logo a:hover {
    transform: scale(1.1);
}

.svg-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.svg-logo a:hover img {
    opacity: 1;
    filter: brightness(1.2);
}

/* Settings controls styling */
.settings-control {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.settings-selector-group {
    display: flex;
    gap: 6px;
    align-items: center;
}

.settings-selector-group select {
    flex: 1;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    outline: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.settings-selector-group select:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.4);
}

.settings-selector-group select option {
    background: #222;
    color: #fff;
    padding: 6px;
}

.settings-selector-group button {
    padding: 8px 10px;
    font-size: 9px;
    margin-right: 0;
    min-width: 40px;
}

.settings-selector-group button#refresh-presets {
    padding: 8px 8px;
    min-width: 32px;
    background: #444;
    transition: background 0.2s ease;
}

.settings-selector-group button#refresh-presets:hover {
    background: #555;
}

.settings-selector-group button#refresh-presets.rotating {
    transition: transform 0.3s ease;
}

.settings-file-group {
    display: flex;
    gap: 8px;
}

.settings-file-group button {
    flex: 1;
    padding: 8px 12px;
    font-size: 9px;
    margin-right: 0;
    background: #333;
}

.settings-file-group button:hover {
    background: #555;
}

/* Settings status message */
.settings-status {
    font-size: 9px;
    color: #888;
    text-align: center;
    margin-top: 4px;
    min-height: 12px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #ui {
        right: -100vw; /* Hide completely off screen on mobile */
        width: 100vw;
        max-width: 100vw;
        min-width: 100vw;
        padding: 15px;
        top: 0;
        height: 100vh;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.9); /* More opaque on mobile to cover debug console */
        backdrop-filter: blur(15px); /* Stronger blur for better readability */
        display: flex;
        flex-direction: column;
    }
    
    #controls {
        padding-right: 4px; /* Smaller padding on mobile */
    }
    
    #ui:hover, #ui:focus-within, #ui-hover-area:hover ~ #ui {
        right: 0;
    }
      /* Make UI tab larger and more thumb-friendly on mobile */
    #ui::before {
        left: -40px; /* Slightly smaller than before for better mobile UX */
        top: 20px;
        width: 40px; /* Reduced from 48px for smaller screens */
        height: 80px; /* Reduced from 100px for smaller screens */
        font-size: 16px; /* Reduced from 18px */
        border-radius: 10px 0 0 10px; /* Adjust border radius */
    }
      /* Show close button when UI is open on mobile */
    #ui::after {
        display: flex; /* Always show close button on mobile when panel could be open */
    }
      /* Make hover area match smaller tab size on mobile for easier access */
    #ui-hover-area {
        width: 50px; /* Match smaller tab width */
    }
      #header h1 {
        font-size: 18px;
    }
    
    #header-logo {
        width: 28px;
        height: 28px;
    }
    
    button {
        padding: 8px 12px;
        font-size: 9px;
    }
      /* Hide debug panel and status message on tablet screens */
    #debug-info-panel,
    #status-message {
        display: none;
    }
}

/* Additional mobile adjustments for very small screens */
@media (max-width: 480px) {
    #ui {
        padding: 10px;
        background: rgba(0, 0, 0, 0.95); /* Even more opaque on very small screens */
        backdrop-filter: blur(20px); /* Maximum blur for better readability */
        display: flex;
        flex-direction: column;
    }
    
    #controls {
        padding-right: 2px; /* Even smaller padding on very small screens */
    }
    
    /* Make tab even smaller for very small screens */
    #ui::before {
        left: -32px; /* Even smaller for tiny screens */
        width: 32px; 
        height: 64px; 
        font-size: 14px; 
        border-radius: 8px 0 0 8px;
    }
    
    /* Adjust hover area for smaller tab */
    #ui-hover-area {
        width: 40px;
    }
      #header h1 {
        font-size: 16px;
    }
    
    #header-logo {
        width: 24px;
        height: 24px;
    }
    
    .control-group {
        margin-bottom: 12px;
    }
    
    button {
        padding: 6px 10px;
        font-size: 8px;
    }
      /* Hide debug panel and status message on mobile */
    #debug-info-panel,
    #status-message {
        display: none;
    }
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}