:root {
    --screen-width: 320px;
    --screen-height: 240px;
}

/* Theme defaults (Silver) */
.theme-silver {
    --ipod-bg: linear-gradient(to bottom, #f0f0f0, #d0d0d0);
    --ipod-shadow: 0 15px 30px rgba(0,0,0,0.3), inset 0 2px 5px rgba(255,255,255,0.8);
    --wheel-bg: #ffffff;
    --wheel-shadow: inset 0 2px 5px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.2);
    --center-btn: linear-gradient(to bottom, #eaeaea, #d4d4d4);
    --text-color: #888;
}

/* Theme Black */
.theme-black {
    --ipod-bg: linear-gradient(to bottom, #3a3a3a, #1a1a1a);
    --ipod-shadow: 0 15px 30px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,0.1);
    --wheel-bg: #1c1c1c;
    --wheel-shadow: inset 0 2px 5px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4);
    --center-btn: linear-gradient(to bottom, #2a2a2a, #111111);
    --text-color: #aaa;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f5f5f7;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    user-select: none;
}

.color-toggle-container {
    position: absolute;
    top: 20px;
    left: 20px;
    font-family: sans-serif;
}

.color-toggle-container select {
    padding: 5px;
    font-size: 16px;
    border-radius: 5px;
}

/* iPod Body Container */
.ipod-container {
    width: 380px;
    height: 620px;
    background: var(--ipod-bg);
    border-radius: 40px;
    box-shadow: var(--ipod-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    box-sizing: border-box;
    transition: background 0.5s, box-shadow 0.5s;
    position: relative;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Screen Area */
.screen-bezel {
    width: 100%;
    background-color: #000;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.8), 0 1px 1px rgba(255,255,255,0.3);
}

.screen {
    width: 100%;
    aspect-ratio: 4/3;
    background-color: #fff;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    background: linear-gradient(to bottom, #ffffff, #e0e0e0);
}

/* Status Bar */
.status-bar {
    height: 20px;
    background: linear-gradient(to bottom, #d0d0d0, #f0f0f0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    font-size: 12px;
    font-weight: bold;
    border-bottom: 1px solid #aaa;
    color: #333;
}

.battery {
    width: 20px;
    height: 10px;
    border: 1px solid #333;
    position: relative;
    padding: 1px;
}
.battery::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 2px;
    width: 2px;
    height: 6px;
    background: #333;
}
.battery-level {
    width: 80%;
    height: 100%;
    background-color: #4cd964; /* Green */
}

/* Views */
.view {
    position: absolute;
    top: 20px; /* Below status bar */
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    background: #fff;
}
.active-view {
    display: block;
}

/* Main Menu View */
.menu-split {
    display: flex;
    height: 100%;
}
.menu-list {
    flex: 1;
    border-right: 1px solid #aaa;
    background: #fff;
}
.menu-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu-item {
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
}
.menu-item.selected {
    background: linear-gradient(to bottom, #5e95ff, #1d60ff);
    color: white;
}
.menu-item .arrow {
    font-weight: bold;
}

.menu-preview {
    flex: 1;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.menu-preview img {
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

/* Now Playing View */
.now-playing-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
}
.np-header {
    text-align: center;
    font-size: 10px;
    padding: 2px;
    color: #666;
    border-bottom: 1px solid #ddd;
}
.np-content {
    display: flex;
    flex: 1;
    padding: 10px;
    align-items: center;
}
.album-art {
    width: 100px;
    height: 100px;
    margin-right: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.album-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4));
}
.track-info {
    flex: 1;
}
.track-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
}
.track-artist, .track-album {
    font-size: 12px;
    color: #666;
    margin-bottom: 3px;
}

.progress-container {
    display: flex;
    align-items: center;
    padding: 10px;
    font-size: 10px;
    color: #333;
}
.progress-bar {
    flex: 1;
    height: 8px;
    background: linear-gradient(to bottom, #ccc, #eee);
    margin: 0 10px;
    border: 1px solid #aaa;
    border-radius: 4px;
    overflow: hidden;
}
.progress-fill {
    width: 45%;
    height: 100%;
    background: linear-gradient(to bottom, #7db9e8, #1e5799);
}

/* Cover Flow View */
#view-cover-flow {
    background: #000;
    color: white;
}
.cover-flow-container {
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 500px;
    position: relative;
    overflow: hidden;
    padding-top: 20px;
}
.cover {
    width: 100px;
    height: 100px;
    position: absolute;
    transition: transform 0.3s ease-out, z-index 0.3s;
    /* CSS Variables for JS to update */
    --offset: 0; 
    transform: translateX(calc(var(--offset) * 40px)) scale(calc(1 - abs(var(--offset))*0.1)) rotateY(calc(var(--offset) * -45deg));
    z-index: calc(10 - abs(var(--offset)));
    -webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5));
}
.cover.active {
    transform: translateX(0) scale(1.2) rotateY(0);
    z-index: 20;
}
.cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.cf-info {
    text-align: center;
    padding: 10px;
}
.cf-title {
    font-weight: bold;
    font-size: 14px;
}
.cf-artist {
    font-size: 12px;
    color: #aaa;
}

/* Click Wheel */
.controls-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.click-wheel {
    width: 220px;
    height: 220px;
    background: var(--wheel-bg);
    border-radius: 50%;
    position: relative;
    box-shadow: var(--wheel-shadow);
    transition: background 0.5s;
    cursor: pointer; /* To indicate it's interactive */
    touch-action: none; /* Prevent scrolling when dragging on mobile */
}

.center-button {
    width: 80px;
    height: 80px;
    background: var(--center-btn);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    transition: background 0.5s;
    cursor: pointer;
}
.center-button:active {
    background: #ccc; /* Simple click feedback */
}

/* Wheel Labels */
.click-wheel div[class^="btn-"] {
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-color);
    letter-spacing: 1px;
    transition: color 0.5s;
    pointer-events: none; /* Let the wheel handle drag/clicks, or specifically bind buttons */
}
.btn-menu {
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto !important;
    padding: 10px;
    cursor: pointer;
}
.btn-menu:active {
    color: #333;
}
.btn-prev {
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.btn-next {
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.btn-playpause {
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
}