@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap');

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --font-main: 'Doto', sans-serif;
    --spacing: 2rem;
}

body.dark-mode {
    --bg-color: #1a1a1a;
    /* Soft black or pure black? User said #000 in splash, maybe prefer soft for UI usability or pure brutalist. Let's go #000000 for strict brutalist high contrast */
    --bg-color: #000000;
    --text-color: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Smooth theme switch */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-main);
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-transform: lowercase;
}

/* Splash Screen */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.splash-content {
    position: relative;
    width: 200px;
    /* Large container */
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.splash-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    filter: invert(1);
    /* Invert to make black icons white on black bg */
}

/* Panels */
.rt-panel {
    border: 2px solid #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #000;
    margin: 5px;
    flex: 1;
}

.panel-label {
    font-family: 'Doto', sans-serif;
    background: #fff;
    color: #000;
    padding: 2px 5px;
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
    font-weight: bold;
}

.panel-content {
    display: flex;
    justify-content: space-around;
    width: 100%;
    align-items: flex-end;
}

.control-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

/* 4x2 Pad Grid */
.pad-grid-4x2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    width: 100%;
    height: 100%;
}

.pad-btn {
    background: #000;
    border: 2px solid #fff;
    color: #fff;
    font-family: 'Doto', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.1s;
}

.pad-btn:active,
.pad-btn.active {
    background: #fff;
    color: #000;
    transform: scale(0.95);
}

/* Adjust Racks */
#rt-top-rack {
    display: flex;
    height: 180px;
}

#rt-mid-rack {
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff;
    margin: 10px 0;
}

#rt-btm-rack {
    display: flex;
    height: 140px;
    gap: 10px;
}

.filter-module {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fader-container-v {
    height: 100px;
    display: flex;
    align-items: center;
}

/* Upload Btn */
#rt-upload-btn {
    width: 100%;
    margin-top: 10px;
    border: 2px dashed #666;
}

#rt-upload-btn:hover {
    border-color: #fff;
    background: #333;
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Center vertically */
    padding: var(--spacing);
    position: relative;
    z-index: 60;
    /* Fix: Ensure dropdowns (z200) sit above track-overlay (z50) */
    height: 160px;
    /* Fixed height for exact alignment parity between Index and Remix */
}



.logo-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    /* Adjust based on image aspect */
    height: 80px;
    cursor: pointer;
}

.disc-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    /* Hides white BG in Light Mode */
    transition: filter 0.3s;
}

body.dark-mode .disc-icon {
    filter: invert(1);
    /* Invert colors: White BG -> Black, Black Lines -> White */
    mix-blend-mode: screen;
    /* Hides Black BG in Dark Mode */
}

.spinning {
    will-change: transform;
}

/* @keyframes rotate removed/commented out as logic is now in JS */

.controls-container {
    margin-left: auto;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.control-btn {
    background: transparent;
    border: none;
    color: var(--text-color);
    font-family: var(--font-main);
    font-size: 1.2rem;
    padding: 0.2rem;
    /* Reduced padding */
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.control-btn svg,
.control-btn img {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
}

/* Specific size for Theme Toggle as requested */
#theme-home-btn,
#remix-btn,
#theme-home-btn:hover,
#theme-home-btn:focus,
#theme-home-btn:active,
#remix-btn:hover,
#remix-btn:focus,
#remix-btn:active {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

#theme-home-btn img,
#remix-btn img,
#back-btn img,
#header-upload-btn img,
#upload-btn img {
    width: 40px;
    height: 40px;
    display: block;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    mix-blend-mode: multiply;
    /* Hides white background */
}

/* For Dark Mode, multiply makes everything dark. 
   If icon is black on white, multiply keeps black. 
   If icon is white on white... invisible.
   User said "white outline". 
   If the icon is PNG with transparency, this shouldn't be needed.
   If PNG has white matte, this helps. 
*/
body.dark-mode #theme-home-btn img,
body.dark-mode #remix-btn img,
body.dark-mode #back-btn img,
body.dark-mode #header-upload-btn img,
body.dark-mode #upload-btn img {
    filter: invert(1);
    /* Invert to make black icons white */
    mix-blend-mode: screen;
    /* Screen hides black background */
}

.control-btn:hover:not(:disabled) {
    transform: scale(1.1);
    /* Scale effect instead of bg swap for icons */
    /* background: var(--text-color); */
    /* color: var(--bg-color); */
}

.control-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    /* border-color: #ccc; */
}

/* --- Tooltips --- */
.tooltip-btn {
    position: relative;
    /* Anchor for absolute tooltip */
}

/* Tooltip Layout */
.tooltip-btn:hover::after {
    content: attr(data-label);
    position: absolute;
    top: 100%;
    /* Below icon */
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--text-color);
    padding: 2px 6px;
    font-size: 0.8rem;
    font-family: var(--font-main);
    text-transform: lowercase;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    animation: fadeIn 0.2s forwards;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Subtle shadow for depth */
}

/* Fix: Suppress tooltips when dropdown is open */
/* Fix: Suppress tooltips when dropdown is open */
body.dropdown-active .tooltip-btn::after,
body.dropdown-active .tooltip-btn:hover::after,
body.dropdown-active .tooltip-btn:focus::after {
    display: none !important;
    opacity: 0 !important;
    content: none !important;
    /* Nuclear option */
    visibility: hidden !important;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Main Visualizer */
main {
    flex-grow: 1;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Prevent canvas overflowing */
}

canvas {
    display: block;
    /* Canvas size is set by JS */
}

/* Track Overlay */
.track-overlay {
    position: absolute;
    bottom: 120px;
    /* Above footer */
    left: var(--spacing);
    display: flex;
    align-items: center;
    gap: 1rem;
    pointer-events: none;
    z-index: 50;
}

#track-art {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid var(--text-color);
}

.track-info {
    text-transform: uppercase;
    line-height: 1.2;
}

#track-name {
    font-size: 1.5rem;
    font-weight: bold;
}

#track-artist {
    font-size: 1rem;
    opacity: 0.8;
}

/* Footer */
footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* Align bottom */
    padding: var(--spacing);
    font-size: 1.5rem;
    /* Make it readable */
    z-index: 100;
    /* Ensure it's on top */
    width: 100%;
    position: relative;
    background-color: transparent;
    /* Ensure it doesn't block background */
}

.footer-item {
    flex: 1;
}

.footer-item.left {
    text-align: left;
}

.footer-item.center {
    text-align: center;
}

.footer-item.right {
    text-align: right;
}

/* Album Player Display (Local) */
#player-display {
    position: absolute;
    bottom: 15vh;
    left: var(--spacing);
    /* Align to left margin */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left align items */
    gap: 1rem;
    z-index: 40;
    pointer-events: none;
}

#local-album-art {
    width: 100px;
    /* Reduced from 150px */
    height: 100px;
    object-fit: cover;
    border: 2px solid var(--text-color);
    background-color: var(--bg-color);
    image-rendering: pixelated;
    display: none;
    /* Hidden if no art */
}

/* Track Info Text */
.track-info-text {
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: left;
    /* Left align text */
    max-width: 300px;
    /* Fix: Allow wrapping */
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    /* modern break */
    word-break: break-word;
    /* text-overflow: ellipsis; removed */
    line-height: 1.2;
}

#progress-container {
    width: 200px;
    height: 2px;
    background-color: rgba(128, 128, 128, 0.3);
    position: relative;
    margin-top: 0.5rem;
}

#progress-fill {
    width: 0%;
    height: 100%;
    background-color: var(--text-color);
    /* Pixelated step transition? */
    transition: width 0.1s linear;
}

/* Header Fixes - Align Remix and Back buttons */
/* We want Remix Button to be visible. And Back button below it. */
/* Current Header has: logo-container (center), controls-container (right). */
/* Inside controls-container: play, pause, stop, shuffle, upload, remix. */
/* Back button is separate #back-btn. */
/* User wants Back below Remix. */
/* To achieve this cleanly, let's position both absolutely in the top right or keep them in flow but stack them. */
/* However, standard layout is row. */
/* Let's try positioning them absolutely to the right. */

#remix-btn {
    z-index: 101;
    /* Above everything */
    /* Position relative if in flow, or absolute if we want fixed placement */
}

/* If we are in Remix Mode, other controls are hidden via JS fade out. */
/* So only Remix and Back are relevant. */

/* Back Button Removed */


#remix-btn {
    /* Ensure it stays visible and clickable */
    position: relative;
    z-index: 101;
}


/* --- Remix Tool v2 (Pixel Art Racks) --- */

@import url('https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap');

:root {
    --rt-bg: #000000;
    --rt-fg: #ffffff;
    --rt-accent: #ffffff;
    /* Classic 1-bit style */
    --rt-font: 'Doto', sans-serif;
    --rt-border: 2px solid var(--rt-fg);
    --rt-rack-bg: #000000;
}



/* Mini Progress Bar in Remix */
.midi-progress-bar {
    border-radius: 2px;
    overflow: hidden;
}

/* --- Remix Tab Styles --- */

/* Remix Container */
.deck-container {
    width: 600px;
    height: 350px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing);
    position: relative;
    /* Visual: Embedded, no border/box */
}

/* CD Platter */
.deck-platter {
    position: relative;
    width: 250px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--text-color);
    border-radius: 50%;
    overflow: hidden;
}

.platter-disc {
    width: 95%;
    height: 95%;
    object-fit: contain;
    mix-blend-mode: multiply;
    /* Consistent with header icon */
}

body.dark-mode .platter-disc {
    filter: invert(1);
    mix-blend-mode: screen;
}

/* Controls Area */
.deck-controls {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    align-items: center;
    position: relative;
    z-index: 20;
    /* Ensure controls are above any containers */
}

/* Knobs Row */
.knob-row {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
}

.knob-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.knob {
    width: 60px;
    height: 60px;
    border: 2px solid var(--text-color);
    border-radius: 50%;
    position: relative;
    cursor: grab;
    transform: rotate(-150deg);
}

/* Knob Marker */
.knob::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 10px;
    background-color: var(--text-color);
}

.knob:active {
    cursor: grabbing;
}

.label {
    font-family: var(--font-main);
    font-size: 1rem;
    text-transform: uppercase;
}

/* Sliders Row */
.slider-row {
    display: flex;
    gap: 4rem;
    justify-content: center;
    width: 100%;
}

.slider-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    height: 150px;
}

.slider-track {
    width: 20px;
    height: 120px;
    border: 2px solid var(--text-color);
    position: relative;
    cursor: grab;
    z-index: 50;
    /* Ensure slider is clickable above any overlays */
}

.slider-handle {
    width: 100%;
    height: 20px;
    background-color: var(--text-color);
    position: absolute;
    bottom: 0;
    /* range 0 to 100% */
    left: 0;
}

.slider-track:active {
    cursor: grabbing;
}

/* Upload Overlay */
.upload-zone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    justify-content: center;
    align-items: center;
    background: transparent;
    /* Removed grey overlay to satisfy "No highlighted area" constraint */
    z-index: 10;
    cursor: pointer;
    /* backdrop-filter: blur(2px); Removed to keep it clean/neutral */
}

.upload-msg {
    color: #fff;
    /* Always white if overlay is dark */
    font-size: 2rem;
    border: 2px dashed #fff;
    padding: 2rem;
    text-transform: uppercase;
}

/* If dark mode is based on body class, we need to ensure contrast */
body.dark-mode .upload-zone {
    background: transparent;
}

/* FIX: Remove initial focus highlight on Remix Tool */
#remix-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Ensure it fills width */
}

#remix-main:focus,
#remix-main:active,
.deck-container,
.deck-container:focus,
.deck-container:active {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Hardware Focus (Visible only during Keyboard/Controller nav) */
/* Using outline + offset to guarantee visibility and separation */
.using-hardware-nav .knob.hardware-focus,
.using-hardware-nav .slider-track.hardware-focus {
    outline: 2px solid var(--text-color) !important;
    /* Adaptive high contrast */
    outline-offset: 4px;
    /* Distinct gap */
    border-radius: 4px;
    /* soften slightly for sliders, knobs are round anyway? */
}

.using-hardware-nav .knob.hardware-focus {
    border-radius: 50%;
    /* Ensure round outline for knobs */
}

/* Ensure no conflict with default focus */
.knob:focus,
.slider-track:focus {
    outline: none;
}