/* Font import */
@font-face {
    font-family: Silkscreen;
    src: url(./fonts/slkscr.ttf);
}

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

body {
    width: 220px;
    height: 600px;
    font-family: Silkscreen, monospace;
    color: white;
    background: linear-gradient(to bottom, #212133 0%, #343353 50%, #212133 100%);
    overflow: hidden;
}

/* Base Form Elements */
select {
    font-family: Silkscreen, monospace;
    background: linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%);
    border: outset 2px #ECE0B8;
    border-radius: 2px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);
    height: 25px;
    max-width: 95px;
    text-overflow: ellipsis;
}

select:active {
    background: linear-gradient(to top, #ECE0B8 0%, #c5b580 100%);
    border: inset 2px #ECE0B8;
    box-shadow: none;
}

button {
    padding: 2px;
    font-family: Silkscreen, monospace;
    background: linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%);
    border: outset 2px #ECE0B8;
    border-radius: 2px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);
    cursor: pointer;
}

button:active {
    background: linear-gradient(to top, #ECE0B8 0%, #c5b580 100%);
    border: inset 2px #ECE0B8;
    box-shadow: none;
}

/* Indicators */
.toggle-button[state='off'] > p::before {
    content: url(./images/green-light-off.gif);
    margin-right: 3px;
    vertical-align: middle;
}

.toggle-button[state='on'] > p::before {
    content: url(./images/green-light-on.gif);
    margin-right: 3px;
    vertical-align: middle;
}

/* Range Sliders */
input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: inset 2px #403f67;
}

input[type="range"]::-webkit-slider-runnable-track {
    background-color: #201e3a;
    height: 100%;
}

input[type="range"]::-moz-range-track {
    background-color: #201e3a;
    height: 100%;
}

input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    background: url(./images/slider.gif), linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: outset 2px #ECE0B8;
    border-radius: 2px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);
    height: 1rem;
    width: 2rem;
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    background: url(./images/slider.gif), linear-gradient(to bottom, #ECE0B8 0%, #c5b580 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: outset 2px #ECE0B8;
    border-radius: 2px;
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.75);
    height: 1rem;
    width: 2rem;
    cursor: pointer;
}

/* Web Deck Player Frame */
#web-deck-player {
    padding: 2px;
    width: 220px;
    height: 420px;
}

#player-title-bar {
    display: flex;
    align-items: center;
    font-size: 12px;
    justify-content: center;
}

#player-title-bar:before,
#player-title-bar:after {
    content: "";
    flex: 1;
    margin: auto 0.4em;
    height: 2px;
    border-top: ridge #ECE0B8 2px;
    border-bottom: ridge #ECE0B8 2px;
}

#player-body {
    padding: 4px;
    border: groove 3px #403f67;
}

#player-main-section {
    margin-bottom: 4px;
}

/* Vertical Stack Structure */
.columns {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 4px;
}

.columns > div {
    width: 100%;
}

/* Player Display (Video Screen) */
#player-display {
    width: 200px;
    height: 115px;
    background: black;
    border: inset 2px #403f67;
    margin: 0 auto;
    overflow: hidden;
}

#youtube-player {
    width: 100%;
    height: 100%;
}

/* Info Screen */
#info-screen {
    background: black;
    color: limegreen;
    border: inset 2px #403f67;
    padding: 4px;
    height: 55px;
    margin-bottom: 4px;
    overflow: hidden;
}

#songLabel, #statusLabel {
    text-shadow: 0 0 10px #49ff18, 0 0 20px #49FF18;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-row {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
}

#player-volume {
    display: flex;
    align-items: center;
    gap: 2px;
}

#volumeButton {
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#volumeButton img {
    height: 100%;
    width: auto;
}

#volumeBar {
    width: 80px;
    height: 18px;
}

#videoButton {
    height: 25px;
    padding: 0 4px;
    font-size: 10px;
}

#playerLogo {
    text-align: center;
}

#playerLogo > img {
    max-height: 28px;
    width: auto;
}

/* Controls Panel - Vertical Alignment */
#player-control-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

#seekBar {
    width: 100%;
    height: 16px;
}

.playing-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #201e3a;
    border: inset 2px #403f67;
    padding: 1px;
    gap: 2px;
}

.playing-controls button {
    height: 28px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.playing-controls button img {
    height: 100%;
    width: auto;
}

#infoButton {
    border-radius: 20px;
    height: 28px;
    width: 28px;
    min-width: 28px;
    font-size: 12px;
}

#playlistSelector {
    height: 28px;
    width: 180px;
    max-width: 180px;
    text-overflow: ellipsis;
}