*{ box-sizing:border-box; margin:0; padding:0; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
html{ background:#08090b; }
html,body{ height:100%; overflow:hidden; overscroll-behavior:none; }
body{
  position:fixed; inset:0; width:100%; height:100%;
  background:radial-gradient(circle at 50% 28%, #34373c, #161719 68%, #08090b);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  color:#111; touch-action:manipulation;
}
.stage{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  padding:calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 8px)
          calc(env(safe-area-inset-bottom) + 8px) calc(env(safe-area-inset-left) + 8px);
}
.ipod{ transform-origin:center center; will-change:transform; }

/* ===================== BODY ===================== */
.ipod{
  width:340px; max-width:100%;
  background:
    linear-gradient(145deg, #e9eaec 0%, #c2c5ca 18%, #9fa3a9 50%, #c2c5ca 82%, #e3e5e8 100%);
  border-radius:26px;
  padding:20px 20px 26px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.8) inset,
    0 -2px 6px rgba(0,0,0,0.18) inset,
    0 26px 60px rgba(0,0,0,0.65), 0 2px 0 rgba(0,0,0,0.3);
  border:1px solid #7e8288;
}

/* ===================== SCREEN ===================== */
.screen{
  position:relative; height:248px; border-radius:6px; overflow:hidden;
  background:#fff;
  border:3px solid #2b2d30;
  box-shadow:0 0 0 2px #6f7378, 0 2px 6px rgba(0,0,0,0.5) inset;
}
.statusbar{
  height:22px; display:flex; align-items:center; justify-content:space-between; padding:0 7px;
  background:linear-gradient(#e8ecf2,#c4ccd6);
  border-bottom:1px solid #9aa3ad; font-size:13px; font-weight:700; color:#33373c;
}
.sb-right{ display:flex; align-items:center; gap:6px; }
.sb-play{ display:inline-flex; align-items:center; }
.sb-play svg{ width:11px; height:11px; display:block; }
.sb-batt{ width:22px; height:11px; border:1px solid #4a4f55; border-radius:2px; position:relative; background:linear-gradient(#bfe6a0,#8fd060); }
.sb-batt::after{ content:""; position:absolute; right:-3px; top:3px; width:2px; height:5px; background:#4a4f55; border-radius:0 1px 1px 0; }

.view{ position:absolute; top:22px; left:0; right:0; bottom:0; }
.hidden{ display:none !important; }

/* ----- menu + art split ----- */
.view-menu{ display:flex; }
.menu-pane{ flex:1 1 60%; min-width:0; display:flex; flex-direction:column; }
.art-pane{ flex:0 0 40%; background:linear-gradient(160deg,#1d2330,#0a0d14); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px; }
.art-frame{ width:100%; aspect-ratio:1/1; border-radius:3px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.6); background:#222; }
.art{ width:100%; height:100%; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; font-size:11px; font-weight:700; padding:6px; text-shadow:0 1px 3px rgba(0,0,0,0.6); }
.art-cap{ color:#dfe4ee; font-size:11px; margin-top:6px; text-align:center; line-height:1.15; max-height:28px; overflow:hidden; }

/* search bar (only on search screen) */
.search-bar{ display:none; align-items:center; gap:5px; padding:3px 7px; border-bottom:1px solid #cfd3d8; background:#f2f3f5; }
.search-bar.on{ display:flex; }
.search-bar .mag{ color:#8a8f96; font-size:14px; }
#searchInput{ flex:1; border:none; outline:none; background:transparent; font-size:14px; font-family:inherit; color:#111; }

/* list */
.menu{ list-style:none; flex:1; overflow:hidden; }
.row{
  height:28px; display:flex; align-items:center; gap:6px; padding:0 8px;
  font-size:15px; color:#111; border-bottom:1px solid #ededed; white-space:nowrap; overflow:hidden;
}
.row .r-main{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .r-sub{ color:#8a8f96; font-size:12px; flex:0 0 auto; max-width:40%; overflow:hidden; text-overflow:ellipsis; }
.row .chev{ color:#b6bbc2; font-weight:700; font-size:13px; }
.row.playing-dot .r-main::before{ content:"♪ "; color:#2f6fe0; }
.row.sel{
  color:#fff; border-bottom:1px solid transparent;
  background:linear-gradient(#7db4f5 0%, #3d86ee 6%, #1c63d8 50%, #1657c8 100%);
  box-shadow:0 1px 0 rgba(255,255,255,0.35) inset;
}
.row.sel .r-sub{ color:#dbe7fb; }
.row.sel .chev{ color:#fff; }

/* ----- now playing ----- */
.view-now{ background:linear-gradient(#fbfbfc,#e9ebee); padding:8px 12px; display:flex; flex-direction:column; align-items:center; }
.np-top{ font-size:11px; color:#7a7f86; margin-bottom:4px; align-self:flex-start; }
.np-art{ width:118px; height:118px; border-radius:4px; background-size:cover; background-position:center; background-color:#222; box-shadow:0 3px 10px rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center; color:#fff; font-size:12px; font-weight:700; text-align:center; padding:6px; }
.np-info{ text-align:center; margin-top:8px; width:100%; }
.np-title{ font-size:15px; font-weight:700; color:#111; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-artist{ font-size:13px; color:#3a3f46; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-album{ font-size:12px; color:#8a8f96; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.np-flags{ height:14px; font-size:11px; color:#2f6fe0; margin-top:3px; letter-spacing:2px; }
.np-time{ display:flex; align-items:center; gap:7px; width:100%; margin-top:auto; font-size:11px; color:#6a6f76; }
.np-bar{ flex:1; height:6px; border-radius:3px; background:#cfd3d8; overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,0.6); }
.np-fill{ height:100%; width:0%; background:linear-gradient(#6aa6f5,#2f6fe0); }

/* ===================== CLICK WHEEL ===================== */
.wheel{
  position:relative; width:208px; height:208px; margin:26px auto 0; border-radius:50%;
  background:radial-gradient(circle at 50% 38%, #3a3d42, #232528 70%, #1a1b1d);
  box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 -4px 10px rgba(0,0,0,0.5) inset, 0 4px 10px rgba(0,0,0,0.4);
  touch-action:none;
}
.w-label{
  position:absolute; background:none; border:none; color:#cfd2d6; font-size:13px; font-weight:700;
  letter-spacing:1px; cursor:pointer; font-family:inherit; padding:6px 10px;
}
.w-label:active{ color:#fff; }
.w-label svg{ width:25px; height:16px; display:block; pointer-events:none; }
.w-menu{ top:11px; left:50%; transform:translateX(-50%); }
.w-prev{ left:16px; top:50%; transform:translateY(-50%); }
.w-next{ right:16px; top:50%; transform:translateY(-50%); }
.w-play{ bottom:13px; left:50%; transform:translateX(-50%); }
.w-center{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:74px; height:74px; border-radius:50%; cursor:pointer;
  background:radial-gradient(circle at 50% 40%, #f0f1f3, #cdd0d4 70%, #b6b9be);
  border:1px solid #9a9da2;
  box-shadow:0 2px 5px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.w-center:active{ box-shadow:0 1px 3px rgba(0,0,0,0.5) inset; }

@media (max-width:380px){
  .ipod{ width:100%; }
}