/* -----------------------------------------------------------
   iPod Classic – Stylesheet
   ----------------------------------------------------------- */
:root{
  --body-light:#f5f5f5;
  --body-dark:#e8e8e8;
  --bezel:#000;
  --wheel:#111;
  --wheel-text:#fff;
  --highlight:#0b84ff;
}
*{
  box-sizing:border-box;
  font-family:sans-serif;
  -webkit-user-select:none;
  user-select:none;
}
body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  margin:0;
  background:#d2dccf;
}
/* ---------- iPod shell ---------- */
#ipod{
  width:300px;
  height:540px;
  background:linear-gradient(145deg,var(--body-light) 0%,var(--body-dark) 100%);
  border-radius:32px;
  box-shadow:0 8px 16px rgba(0,0,0,.3);
  padding:26px 18px 32px;
  position:relative;
}
/* ---------- screen ---------- */
#screen{
  width:100%;
  height:220px;
  background:#fff;
  border:6px solid var(--bezel);
  border-radius:8px;
  overflow:hidden;
  position:relative;
  display: flex; 
  flex-direction: column; 
}
#screen-header{
  background:linear-gradient(#3c3f48,#1c1e22);
  color:#fff;
  font-size:11px; 
  font-weight:700;
  padding:4px 8px;
  flex-shrink: 0; 
  display: flex; /* Use flexbox to position title and battery */
  justify-content: space-between; /* Space between title and battery */
  align-items: center; /* Vertically align items */
}

#header-title-text {
  flex-grow: 1; /* Allow title to take available space */
}

#battery-container {
  display: flex;
  align-items: center;
}

#battery-outline {
  width: 20px; /* Adjust size as needed */
  height: 10px; /* Adjust size as needed */
  border: 1px solid #fff; /* White border for the battery */
  border-radius: 2px;
  position: relative;
  margin-left: 5px; /* Space from the right edge of the header or title */
}

#battery-outline::after { /* Small nub on the battery */
  content: '';
  position: absolute;
  right: -3px; /* Position to the right of the outline */
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 4px;
  background-color: #fff;
  border-radius: 0 1px 1px 0;
}

#battery-level-fill {
  height: 100%;
  width: 100%; /* Initial full width */
  background-color: green; /* Initial battery color */
  border-radius: 1px; /* Slightly less than outline for inset look */
  transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out; /* Smooth transitions */
}

#list{
  list-style:none;
  margin:0;
  padding: 20px 0 8px; /* Increased top padding to clear header */
  height: 182px;
  overflow-y:hidden; /* Hide scrollbar, scrolling managed by JS */
  flex-shrink: 0; /* Prevent list from shrinking if it's the active view */
}
#list li{
  padding:6px 16px;
  font-size:15px;
  color:#111;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#list li.active{
  background:var(--highlight);
  color:#fff;
}
#nowplaying{
  display:none; /* Initially hidden, JS will change to display:flex */
  padding:14px;
  display: flex; 
  flex-direction: column; /* Stack top section and progress bar vertically */
  justify-content: space-between; /* Push progress bar to the bottom */
  flex-grow: 1; /* Allow #nowplaying to fill available vertical space */
}

#np-top-section { /* New rule for the top section */
  display: flex;
  align-items: center;
}

#np-album-art {
  width: 120px; /* Increased width */
  height: 120px; /* Increased height */
  margin-right: 10px; /* Add space between image and text */
  object-fit: cover;
  border: 1px solid #ccc;
  flex-shrink: 0; /* Prevent image from shrinking */
}

#np-text-info {
  display: flex;
  flex-direction: column; /* Stack title and artist vertically */
  justify-content: center; /* Center text vertically if needed, or remove if top-alignment is preferred */
  overflow: hidden; /* Prevent text from overflowing its container */
  flex-grow: 1; /* Allow this container to grow and take available space */
}

#nowplaying h3{
  margin:0;
  font-size:14px; /* Reduced from 16px */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#nowplaying p{
  margin:4px 0 0;
  font-size:12px; /* Reduced from 13px */
  color:#333;
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden; /* Hide overflowing text */
  text-overflow: ellipsis; /* Add ellipsis for overflowing text */
}

#progress-container {
  display: flex;
  align-items: center;
  width: 100%; 
  margin-top: auto; /* Pushes the progress bar to the bottom if parent is flex column */
  padding-top: 10px; /* Add some space above the progress bar */
}

#progress-bar {
  flex-grow: 1;
  height: 8px;
  background-color: #ddd;
  border-radius: 4px;
  margin: 0 8px; /* Space around the progress bar */
  overflow: hidden; /* Ensure fill stays within bounds */
}

#progress-bar-fill {
  height: 100%;
  width: 0%; /* Initial width */
  background-color: var(--highlight); /* Use highlight color for fill */
  border-radius: 4px;
}

#current-time,
#remaining-time {
  font-size: 11px;
  color: #555;
  min-width: 35px; /* Ensure enough space for time display */
}

#current-time {
  text-align: left;
}

#remaining-time {
  text-align: right;
}

/* ---------- wheel ---------- */
#wheel{
  width:220px;
  height:220px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#1d1d1d 0%,#000 70%);
  margin:32px auto 0;
  position:relative;
  cursor: grab; /* Moved cursor style here */
  touch-action: none; /* Allow custom handling of touch drag */
}
#wheel .label{
  position:absolute;
  color:var(--wheel-text);
  font-size:12px; /* Reduced from 14px */
  font-weight:600;
  text-align:center;
  width:100%;
  pointer-events:none;
}
#label-menu{top:18px;}

#wheel #label-prev,
#wheel #label-next{
  top:50%;
  transform:translateY(-50%);
  width:auto;
  font-size:16px; /* Reduced from 18px */
  /* pointer-events:none; is inherited from #wheel .label */
}
#label-prev{left:18px;}
#label-next{right:18px;}

#wheel #label-play {
  bottom:18px;
  font-size:16px; /* Reduced from 18px */
}

/* clickable hot‑zones (invisible) */
.hot{
  position:absolute;
  cursor:pointer;
}
#hot-menu{top:0;left:30%;width:40%;height:25%;}
#hot-prev{left:0;top:30%;width:25%;height:40%;}
#hot-next{right:0;top:30%;width:25%;height:40%;}
#hot-play{bottom:0;left:30%;width:40%;height:25%;}
/* center button */
#button-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:80px;
  height:80px;
  border-radius:50%;
  background:linear-gradient(145deg,#d8d8d8,#f9f9f9);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.25);
  cursor:pointer;
  z-index: 2; /* Ensure center button is above the wheel overlay */
}
/* wheel overlay for rotation */
#wheel-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:50%;
  pointer-events: none; /* Allow clicks and drags to pass through */
}

@media (max-width: 400px) {
  #ipod {
    width: 90vw;
    height: calc(90vw * 1.8);
  }
}