#k-retro-player {
    width: 100%;
    height: 100%;
    background: var(--bg-panel);
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden; /* Desktop sem scroll geral */
}

.player-body {
    display: flex;
    gap: 12px;
    height: 100%;
    align-items: stretch;
}

.deck-section {
    flex: 1.6;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.visor-area {
    background: #1a1a1a;
    border: 3px inset #ffffff;
    padding: 12px;
    box-shadow: inset 0 0 20px #000;
    flex: 1;
}

.lcd-display {
    color: #00ff41;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.lcd-top { display: flex; align-items: center; gap: 8px; font-size: 10px; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; background: #300; border-radius: 50%; }
.status-dot.on { background: #ff0000; box-shadow: 0 0 8px #ff0000; }

.lcd-track-title {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 5px 0;
}

.lcd-timer-row { display: flex; align-items: flex-end; gap: 15px; }
#time-display { font-family: var(--font-bios); font-size: 36px; line-height: 0.8; min-width: 80px; }

.progress-container { flex: 1; height: 8px; background: #000; border: 1px solid #333; cursor: pointer; position: relative; margin-bottom: 5px; }
.progress-fill { height: 100%; background: #ff0000; width: 0%; }

.controls-deck {
    background: var(--bg-panel);
    border: 2px outset #ffffff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.button-cluster { display: flex; gap: 5px; height: 38px; }

.k-unit-btn {
    flex: 1;
    background: var(--bg-panel);
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    font-weight: bold;
    font-size: 10px;
    cursor: pointer;
}

.k-unit-btn:active, .k-unit-btn.pressed {
    border-color: #808080 #ffffff #ffffff #808080;
    padding-top: 2px;
}

.k-unit-btn.big { flex: 1.8; font-size: 12px; }

.volume-slider-unit { display: flex; align-items: center; gap: 10px; padding: 0 5px; }
.volume-slider-unit label { font-size: 10px; font-weight: bold; }
.volume-slider-unit input { flex: 1; -webkit-appearance: none; background: #000; height: 4px; border: 1px solid #fff; cursor: pointer; }
.volume-slider-unit input::-webkit-slider-thumb {
    -webkit-appearance: none; width: 14px; height: 20px; 
    background: var(--bg-panel); border: 2px solid; 
    border-color: #fff #000 #000 #fff;
}

.playlist-section {
    flex: 1;
    background: #ffffff;
    border: 3px inset #ffffff;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.playlist-header { background: #000; color: #fff; font-size: 10px; padding: 4px 10px; font-weight: bold; }
.playlist-scroll { overflow-y: auto; flex: 1; }

.track-row {
    padding: 8px 10px;
    font-size: 11px;
    display: flex;
    gap: 10px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    color: #000;
}

.track-row.current { background: #aa0000; color: #ffffff; }
.t-idx { opacity: 0.5; width: 18px; }
.t-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1300px) {
    #k-retro-player { overflow-y: auto; }
    .player-body { flex-direction: column; height: auto; }
    .playlist-section { min-height: 200px; }
    .lcd-timer-row { flex-direction: column; align-items: flex-start; }
    .progress-container { width: 100%; }
}