/* =====================================================================
   Ktuzzo Player — Frutiger METRO (Zune HD / Windows Phone 7 pivot):
   flat colour blocks, huge thin lowercase type bleeding off the edges,
   thin outline circle "app bar" buttons, Vectordelia vector art.
   The one LentilsOS app without aero glass, gloss or blur.
   ===================================================================== */
.player-win { min-width: 620px; min-height: 440px; }
.player-win .win-body { overflow: hidden; container-type: inline-size; }

.app.player {
  --magenta: #e3008c; --lime: #8cbf26; --orange: #f09609; --cyan: #1ba1e2; --purple: #a200ff;
  --accent: var(--magenta);
  --bg: #050505; --bg2: #131313; --fg: #f4f4f4; --fg-dim: #8a8a8a;
  --mfont: var(--font), "Segoe UI Light", "Segoe UI", "Helvetica Neue", Helvetica, sans-serif;
  position: relative; height: 100%; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--bg); color: var(--fg);
  font-family: var(--mfont); font-weight: 300;
  user-select: none;
}
.app.player * { box-sizing: border-box; }
.app.player img { -webkit-user-drag: none; }

/* ---------- pivot header: huge bleeding title + tab strip ---------- */
.app.player .phead { padding: 18px 0 0 26px; overflow: hidden; }
.app.player .ptitle {
  margin: 0 -6px 0 -2px; white-space: nowrap;
  font: 300 clamp(40px, 11.5cqw, 108px)/1 var(--mfont);
  letter-spacing: -0.02em; text-transform: lowercase; color: var(--fg);
}
.app.player .ptitle b { font-weight: 300; color: var(--accent); transition: color 0.5s ease; }
.app.player .ptabs { display: flex; gap: 26px; padding: 4px 26px 14px; border-bottom: 1px solid #232323; }
.app.player .ptab {
  position: relative; background: none; border: 0; padding: 4px 0 12px; cursor: pointer;
  font: 400 clamp(0.95rem, 2.6cqw, 1.3rem) var(--mfont); letter-spacing: -0.01em;
  text-transform: lowercase; color: var(--fg-dim); opacity: 0.55; transition: color 0.25s ease, opacity 0.25s ease;
  display: flex; align-items: center; gap: 8px;
}
.app.player .ptab.on { color: var(--fg); opacity: 1; }
.app.player .ptab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); }
.app.player .ptab .tab-dancer { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }

/* ---------- pivot body: 3 full-bleed panes, sliding via transform ---------- */
.app.player .pviewport { position: relative; min-height: 0; overflow: hidden; }
.app.player .ptrack { display: flex; width: 300%; height: 100%; transition: transform 0.4s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.app.player .pane { width: calc(100% / 3); flex: none; height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.app.player .pane::-webkit-scrollbar { width: 8px; }
.app.player .pane::-webkit-scrollbar-thumb { background: #2a2a2a; }

/* ---------- canzoni: big lowercase list ---------- */
.app.player .song-list { padding: 6px 8px 24px; }
.app.player .song-item {
  display: flex; align-items: baseline; gap: 16px; padding: 12px 18px;
  border-left: 4px solid transparent; cursor: pointer;
}
.app.player .song-item:hover { background: var(--bg2); }
.app.player .song-item.active { border-left-color: var(--accent); background: var(--bg2); }
.app.player .sidx { flex: none; width: 2.1em; font: 300 1.1rem/1 var(--mfont); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.app.player .smeta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.app.player .stitle { font: 300 clamp(1rem, 2.4cqw, 1.4rem)/1.25 var(--mfont); text-transform: lowercase; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app.player .sartist { font: 400 0.82rem var(--mfont); text-transform: lowercase; color: var(--accent); transition: color 0.5s ease; }
.app.player .seq { flex: none; display: flex; align-items: flex-end; gap: 3px; height: 16px; opacity: 0; transition: opacity 0.2s; }
.app.player .song-item.active .seq { opacity: 1; }
.app.player .seq i { width: 3px; height: 14px; background: var(--accent); transform: scaleY(0.25); transform-origin: bottom; animation: player-eq 0.7s ease-in-out infinite alternate; animation-play-state: paused; }
.app.player.playing .song-item.active .seq i { animation-play-state: running; }
.app.player .seq i:nth-child(2) { animation-delay: 0.15s; } .app.player .seq i:nth-child(3) { animation-delay: 0.3s; }
@keyframes player-eq { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
.app.player .empty-list { padding: 40px 26px; font: 300 1.3rem var(--mfont); text-transform: lowercase; color: var(--fg-dim); display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }

/* ---------- in riproduzione: stage (cover tile <-> iPod-ad scene) ---------- */
.app.player .pane-now { overflow: hidden; }
.app.player .stage {
  position: relative; height: 100%; width: 100%; overflow: hidden;
  --scene: var(--bg2); --amp: 0;
  background: var(--bg2); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 0.6s ease;
}
.app.player .stage:not(.idle):not(.paused) { background: var(--scene); }

.app.player .cover { position: relative; z-index: 1; width: min(280px, 40cqw); height: min(280px, 40cqw); background: var(--accent); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease, transform 0.4s ease; transform: scale(0.94); }
.app.player .stage.idle .cover, .app.player .stage.paused .cover { opacity: 1; transform: scale(1); }
.app.player .cover img { width: 76%; height: 76%; object-fit: contain; }

.app.player .scene { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 1; transition: opacity 0.4s ease; }
.app.player .stage.idle .scene, .app.player .stage.paused .scene { opacity: 0; }
.app.player .swoosh { position: absolute; left: -8%; right: -8%; bottom: 6%; width: 116%; opacity: 0.14; filter: brightness(0) invert(1); animation: player-drift 14s ease-in-out infinite alternate; }
@keyframes player-drift { from { transform: translateX(-2%) translateY(0); } to { transform: translateX(2%) translateY(-12px); } }
.app.player .note { position: absolute; width: 150px; filter: brightness(0) invert(1); opacity: 0.85; animation: player-float 5s ease-in-out infinite; }
.app.player .note.n1 { left: 4%; top: 8%; width: 170px; animation-duration: 6s; }
.app.player .note.n2 { left: 32%; top: 12%; width: 110px; animation-duration: 4.4s; animation-delay: -2s; opacity: 0.55; }
.app.player .note.n3 { left: 80%; top: 40%; width: 100px; animation-duration: 5.2s; animation-delay: -1s; transform: scaleX(-1); opacity: 0.65; }
@keyframes player-float { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -18px; rotate: 5deg; } }

.app.player .dancer { position: absolute; left: 58%; bottom: 6%; height: 76%; aspect-ratio: 0.62; transform: translateX(-50%); }
.app.player .dancer .amp { position: absolute; inset: 0; transform-origin: 50% 100%; transform: translateY(calc(var(--amp) * -28px)) scale(calc(1 + var(--amp) * 0.14)); }
.app.player .dancer .moves { position: absolute; inset: 0; transform-origin: 50% 100%; animation: player-dance 1.1s ease-in-out infinite; }
@keyframes player-dance {
  0%   { transform: translateY(0) rotate(0deg) skewX(0deg); }
  25%  { transform: translateY(-10px) rotate(-3deg) skewX(3deg); }
  50%  { transform: translateY(0) rotate(0deg) skewX(0deg); }
  75%  { transform: translateY(-10px) rotate(3deg) skewX(-3deg); }
  100% { transform: translateY(0) rotate(0deg) skewX(0deg); }
}
.app.player .pose { position: absolute; inset: 0; display: none; }
.app.player .pose img { position: absolute; bottom: 0; left: 50%; height: 100%; width: auto; transform: translateX(-50%); filter: brightness(0); }
.app.player .pose.on { display: block; }
.app.player .earbuds { position: absolute; top: 3%; left: 50%; width: 40%; transform: translateX(-50%); filter: brightness(0) invert(1); opacity: 0.95; }
.app.player .dancer.flip .moves { scale: -1 1; }
.app.player .stage.paused .moves, .app.player .stage.paused .note, .app.player .stage.paused .swoosh,
.app.player .stage.idle .moves { animation-play-state: paused; }
.app.player .stage.paused .dancer .amp { transform: none; }

/* now playing overlay: title / artist / seek / time */
.app.player .np { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 30px 22px; z-index: 2; }
.app.player .np-label { font: 400 0.72rem var(--mfont); text-transform: uppercase; letter-spacing: 0.22em; opacity: 0.85; }
.app.player .np-title { margin: 4px 0 0; font: 300 clamp(1.6rem, 6.5cqw, 44px)/1.05 var(--mfont); letter-spacing: -0.02em; text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app.player .np-artist { margin: 4px 0 12px; font: 300 1.05rem var(--mfont); opacity: 0.85; text-transform: lowercase; }
.app.player .stage.idle .np-title, .app.player .stage.paused .np-title { color: var(--fg); }

.app.player .seek { position: relative; height: 4px; background: rgba(255,255,255,0.25); cursor: pointer; }
.app.player .seek .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); }
.app.player .seek .knob { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; margin: -6px 0 0 -6px; background: var(--accent); left: 0; opacity: 0; transition: opacity 0.15s; }
.app.player .seek:hover .knob { opacity: 1; }
.app.player .times { display: flex; justify-content: space-between; font: 400 0.78rem var(--mfont); letter-spacing: 0.05em; margin-top: 6px; opacity: 0.85; font-variant-numeric: tabular-nums; }

/* ---------- raccolta ---------- */
.app.player .pane-collection { padding: 30px 30px 24px; }
.app.player .ptitle-lg { margin: 0 0 20px; font: 300 clamp(1.8rem, 6cqw, 3rem)/1 var(--mfont); letter-spacing: -0.02em; text-transform: lowercase; color: var(--fg); }
.app.player .stat-row { display: flex; gap: 46px; margin-bottom: 30px; }
.app.player .stat { display: flex; flex-direction: column; gap: 4px; }
.app.player .stat b { font: 300 clamp(2rem, 6cqw, 3.2rem)/1 var(--mfont); color: var(--accent); transition: color 0.5s ease; }
.app.player .stat span { font: 400 0.78rem var(--mfont); text-transform: lowercase; letter-spacing: 0.08em; color: var(--fg-dim); }
.app.player .hint { margin: 16px 0 0; font: 300 0.9rem var(--mfont); color: var(--fg-dim); max-width: 34em; }

/* ---------- shared: flat outline button (WP7 app bar) ---------- */
.app.player .mbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px;
  border: 2px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer;
  font: 400 0.95rem var(--mfont); text-transform: lowercase; border-radius: 0; letter-spacing: 0.01em;
}
.app.player .mbtn.fill { background: var(--accent); border-color: var(--accent); color: #fff; transition: background 0.5s ease, border-color 0.5s ease; }
.app.player .mbtn.fill b { font-size: 1.2rem; line-height: 0; font-weight: 300; margin-top: -1px; }
.app.player .mbtn:hover { background: var(--fg); color: var(--bg); }
.app.player .mbtn.fill:hover { filter: brightness(1.15); background: var(--accent); color: #fff; }
.app.player .mbtn:active { transform: translate(1px, 1px); }

/* ---------- transport bar (persistent, bottom) ---------- */
.app.player .transport { display: flex; align-items: center; gap: 10px; padding: 12px 26px; border-top: 1px solid #232323; background: var(--bg); }
.app.player .cbtn {
  width: 42px; height: 42px; flex: none; border: 2px solid var(--fg); background: transparent; color: var(--fg); cursor: pointer;
  border-radius: 50%; display: grid; place-items: center; padding: 0; transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.app.player .cbtn svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.app.player .cbtn.big { width: 58px; height: 58px; }
.app.player .cbtn.big svg { width: 26px; height: 26px; }
.app.player .cbtn:hover { background: var(--fg); color: var(--bg); }
.app.player .cbtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.app.player .cbtn { position: relative; }
.app.player .cbtn .r1 { position: absolute; font-size: 0.6rem; font-weight: 700; margin: 20px 0 0 20px; }
.app.player .vol { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.app.player .vlabel { font: 400 0.72rem var(--mfont); letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); }
.app.player .vol input[type=range] { -webkit-appearance: none; appearance: none; width: 120px; height: 3px; background: #2a2a2a; outline: none; cursor: pointer; margin: 0; }
.app.player .vol input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 0; }
.app.player .vol input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 0; }

/* ---------- drag & drop overlay ---------- */
.app.player .drop-over { position: absolute; inset: 0; z-index: 10; display: none; place-items: center; background: rgba(140,191,38,0.94); color: #fff; font: 300 2.4rem var(--mfont); text-transform: lowercase; text-align: center; padding: 30px; }
.app.player .drop-over b { display: block; font-size: 4.6rem; font-weight: 300; }
.app.player.dragging .drop-over { display: grid; }

/* ---------- narrow window ---------- */
@container (max-width: 760px) {
  .app.player .stat-row { gap: 28px; }
  .app.player .dancer { left: 60%; height: 66%; }
}
@container (max-width: 600px) {
  .app.player .transport { padding: 10px 14px; gap: 6px; }
  .app.player .vol { display: none; }
  .app.player .ptabs { gap: 16px; padding: 4px 16px 12px; }
  .app.player .phead { padding-left: 16px; }
}