/* Lecteur plein écran V3 : épuré, pochette qui respire avec la lecture, couleurs tirées de la pochette. */

#hubPlayerScreen { --accent: var(--hub-track-accent, #ff6a3d); }

/* Fond : la couleur de la pochette en haut, une aura lente pendant la lecture. */
#hubPlayerScreen::after { position: absolute; top: -20%; left: 50%; z-index: 0; width: 140%; aspect-ratio: 1; content: ""; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%); opacity: .6; transform: translateX(-50%); pointer-events: none; }
#hubPlayerScreen.is-playing::after { animation: player-aura 9s ease-in-out infinite alternate; }

/* En-tête : boutons ronds discrets, titre centré. */
#hubPlayerScreen .hub-full-player > header button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); }
#hubPlayerScreen .hub-player-heading small { color: color-mix(in srgb, var(--accent) 70%, #fff); letter-spacing: .18em; }
#hubPlayerScreen .hub-player-heading strong { font-size: .72rem; letter-spacing: .12em; }

/* Pochette : grande, arrondie, elle se rétracte en pause (comme Spotify). */
#hubPlayerScreen .hub-player-art { border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 80px -20px color-mix(in srgb, var(--accent) 60%, transparent); transform: scale(.9); transition: transform .5s cubic-bezier(.2, .9, .3, 1.15), box-shadow .5s ease; }
#hubPlayerScreen.is-playing .hub-player-art { transform: scale(1); }
#hubPlayerScreen.is-vinyl .hub-player-art { border-radius: 50%; }
#hubPlayerScreen.is-buffering .hub-player-art { animation: player-buffer 1.2s ease-in-out infinite; }
#hubPlayerScreen .hub-player-pulse { display: none; }

/* Titre : grand, sans badges techniques. */
#hubPlayerScreen .hub-apk-badge { display: none; }
#hubPlayerScreen .hub-player-meta small { color: color-mix(in srgb, var(--accent) 75%, #fff); font-weight: 900; letter-spacing: .08em; }
#hubPlayerScreen #hubPlayerTitle { font-size: clamp(1.5rem, 6.5vw, 2rem); font-weight: 900; line-height: 1.1; }
#hubPlayerScreen #hubPlayerStatus { color: rgba(255, 255, 255, .5); font-size: .76rem; }
#hubPlayerScreen #hubPlayerFavorite { width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 50%; background: rgba(255, 255, 255, .05); font-size: 1.15rem; transition: transform .2s cubic-bezier(.2, 1.5, .4, 1), background .2s ease; }
#hubPlayerScreen #hubPlayerFavorite.is-favorite { border-color: transparent; background: #ff4d6d; color: #fff; transform: scale(1.08); box-shadow: 0 8px 20px -6px #ff4d6d; }

/* Barre de lecture : épaisse, remplie à la couleur de la pochette, curseur rond. */
#hubPlayerScreen .hub-player-timeline input { height: 24px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; }
#hubPlayerScreen .hub-player-timeline input::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--accent) 0 var(--hub-progress, 0%), rgba(255, 255, 255, .14) var(--hub-progress, 0%)); }
#hubPlayerScreen .hub-player-timeline input::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5px; appearance: none; -webkit-appearance: none; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent), 0 2px 8px rgba(0, 0, 0, .5); }
#hubPlayerScreen .hub-player-timeline input::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .14); }
#hubPlayerScreen .hub-player-timeline input::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--accent); }
#hubPlayerScreen .hub-player-timeline input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: #fff; }
#hubPlayerScreen .hub-player-timeline > div { color: rgba(255, 255, 255, .55); font-size: .7rem; font-variant-numeric: tabular-nums; }

/* Commandes : gros bouton lecture à la couleur de la pochette, aléatoire et répétition marqués d'un point. */
#hubPlayerScreen .hub-player-controls .hub-main-play { width: 76px; height: 76px; background: var(--accent); color: #120700; box-shadow: 0 16px 34px -10px var(--accent), 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent); transition: transform .15s ease; }
#hubPlayerScreen .hub-player-controls .hub-main-play:active { transform: scale(.92); }
#hubPlayerScreen .hub-player-controls button { position: relative; }
#hubPlayerScreen .hub-player-controls button:active { transform: scale(.9); }
#hubPlayerScreen #hubShuffle[aria-pressed="true"]::after,
#hubPlayerScreen #hubRepeat:not([data-mode="off"])::after { position: absolute; bottom: -2px; left: 50%; width: 5px; height: 5px; content: ""; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); transform: translateX(-50%); }
#hubPlayerScreen #hubRepeat[data-mode="one"]::before { position: absolute; top: 2px; right: 2px; content: "1"; color: var(--accent); font-size: .55rem; font-weight: 900; }

/* À suivre : une carte en verre. */
#hubPlayerScreen .hub-player-next-up { border: 1px solid rgba(255, 255, 255, .08); border-radius: 18px; background: rgba(255, 255, 255, .05); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#hubPlayerScreen .hub-player-next-up small { color: color-mix(in srgb, var(--accent) 75%, #fff); }

@keyframes player-aura { from { transform: translateX(-55%) scale(1); } to { transform: translateX(-45%) scale(1.12); } }
@keyframes player-buffer { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
  #hubPlayerScreen.is-playing::after, #hubPlayerScreen.is-buffering .hub-player-art { animation: none; }
  #hubPlayerScreen .hub-player-art { transition: none; transform: none; }
}

/* ---------- Mode soirée : club sombre, lasers, boule à facettes, reflets et égaliseur au tempo ---------- */
#hubPlayerScreen { --beat: .5s; }
#hubPlayerScreen .hub-party-layer { transition: opacity .5s ease; }
#hubPlayerScreen .hub-party-layer > .hub-disco-ball, #hubPlayerScreen .hub-party-layer > i { display: none; }
#hubPlayerScreen.is-party { background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--accent) 16%, #07040d), #030205 70%); }
#hubPlayerScreen.is-party::after { opacity: 0; }
/* Flash blanc à l'allumage. */
.party-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 8%, #fff, color-mix(in srgb, var(--accent) 60%, transparent) 30%, transparent 70%); opacity: 0; }
#hubPlayerScreen.is-party .party-flash { animation: party-flash .9s ease-out both; }
/* Quatre lasers qui balaient la salle depuis le plafond. */
.party-lasers b { position: absolute; top: -6%; width: 3px; height: 130%; border-radius: 3px; background: linear-gradient(var(--c), transparent 85%); box-shadow: 0 0 12px var(--c), 0 0 30px var(--c); opacity: .55; transform: rotate(calc((var(--a) + var(--b)) / 2)); transform-origin: 50% 0; mix-blend-mode: screen; }
.party-lasers b:nth-child(1) { left: 6%; --c: var(--accent); --a: -38deg; --b: 8deg; }
.party-lasers b:nth-child(2) { left: 30%; --c: #ff2fd0; --a: 30deg; --b: -22deg; }
.party-lasers b:nth-child(3) { left: 70%; --c: #2fe7ff; --a: -30deg; --b: 22deg; }
.party-lasers b:nth-child(4) { left: 94%; --c: #b6ff3a; --a: 38deg; --b: -8deg; }
#hubPlayerScreen.is-party .party-lasers b { animation: party-sweep calc(var(--beat) * 8) ease-in-out infinite alternate; }
#hubPlayerScreen.is-party .party-lasers b:nth-child(2n) { animation-duration: calc(var(--beat) * 6); }
/* Boule à facettes chromée, suspendue, qui tourne. */
.party-ball { position: absolute; top: 0; left: 50%; display: grid; justify-items: center; transform: translate(-50%, -110%); transition: transform .8s cubic-bezier(.2, 1.3, .4, 1); }
.party-ball::before { width: 1px; height: 26px; content: ""; background: rgba(255, 255, 255, .4); }
.party-ball span { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 6%, transparent 22%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 7px), repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 7px), linear-gradient(90deg, #5d6470, #e9eef5 30%, #8a93a0 55%, #f6f8fb 75%, #4c525c); background-size: auto, 28px 100%, auto, 56px 100%; box-shadow: 0 0 22px rgba(255, 255, 255, .45), 0 0 60px color-mix(in srgb, var(--accent) 50%, transparent); }
#hubPlayerScreen.is-party .party-ball { transform: translate(-50%, 0); }
#hubPlayerScreen.is-party .party-ball span { animation: party-spin 2.4s linear infinite; }
/* Reflets de la boule qui tournent sur les murs. */
.party-specks { position: absolute; top: 60px; left: 50%; width: 4px; height: 4px; border-radius: 50%; color: rgba(255, 255, 255, .85); box-shadow: -120px 40px 0 0, 90px 120px 0 1px, -60px 210px 0 0, 150px 260px 0, -170px 330px 0 1px, 40px 380px 0, -110px 470px 0, 130px 520px 0 1px, -30px 600px 0, 170px 650px 0, -150px 700px 0 1px, 70px 300px 0, -80px 140px 0, 110px 30px 0 1px, -190px 560px 0; opacity: 0; transform-origin: 50% 0; }
#hubPlayerScreen.is-party .party-specks { opacity: .8; animation: party-specks 14s linear infinite; }
/* Sol lumineux et égaliseur au tempo. */
.party-floor { position: absolute; right: -20%; bottom: -30%; left: -20%; height: 55%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 45%, transparent), transparent); opacity: 0; }
#hubPlayerScreen.is-party .party-floor { animation: party-beat var(--beat) ease-out infinite; }
.party-eq { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: flex-end; gap: 3px; height: 70px; padding: 0 6px; opacity: 0; transition: opacity .6s ease; -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.party-eq span { flex: 1; height: 100%; border-radius: 3px 3px 0 0; background: linear-gradient(0deg, var(--accent), #ff2fd0 60%, #2fe7ff); transform: scaleY(.15); transform-origin: bottom; }
#hubPlayerScreen.is-party .party-eq { opacity: .35; }
#hubPlayerScreen.is-party .party-eq span { animation: party-eq calc(var(--beat) * 2) ease-in-out infinite; }
.party-eq span:nth-child(3n) { animation-delay: calc(var(--beat) * -.5) !important; animation-duration: calc(var(--beat) * 1.5) !important; }
.party-eq span:nth-child(3n + 1) { animation-delay: calc(var(--beat) * -1.2) !important; }
.party-eq span:nth-child(4n) { animation-duration: var(--beat) !important; }
.party-eq span:nth-child(5n + 2) { animation-delay: calc(var(--beat) * -.3) !important; animation-duration: calc(var(--beat) * 2.5) !important; }
/* La pochette et le titre vivent au tempo. */
#hubPlayerScreen.is-party.is-playing .hub-player-art-stage { animation: party-art var(--beat) ease-out infinite; }
#hubPlayerScreen.is-party .hub-player-art { box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 50px -6px var(--accent), 0 0 120px -20px #ff2fd0; }
#hubPlayerScreen.is-party #hubPlayerTitle { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 80%, transparent); }
#hubPlayerScreen.is-party .hub-player-heading strong::after { content: " · SOIRÉE"; color: #ff2fd0; }
#hubPlayerScreen #hubPartyMode[aria-pressed="true"] { border: 0; background: conic-gradient(from var(--party-turn, 0deg), var(--accent), #ff2fd0, #2fe7ff, #b6ff3a, var(--accent)); color: #08040d; box-shadow: 0 0 18px #ff2fd0; animation: party-button 3s linear infinite; }
/* En pause, la salle se fige. */
#hubPlayerScreen.is-party:not(.is-playing) .hub-party-layer * { animation-play-state: paused; }
#hubPlayerScreen.is-party:not(.is-playing) .party-eq { opacity: .15; }
@property --party-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes party-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes party-sweep { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }
@keyframes party-spin { to { background-position: 0 0, 28px 0, 0 0, 56px 0; } }
@keyframes party-specks { to { transform: translateX(-50%) rotate(360deg); } }
@keyframes party-beat { 0% { opacity: .9; } 100% { opacity: .25; } }
@keyframes party-eq { 0%, 100% { transform: scaleY(.15); } 30% { transform: scaleY(.9); } 60% { transform: scaleY(.4); } }
@keyframes party-art { 0% { transform: scale(1.025); } 100% { transform: scale(1); } }
@keyframes party-button { to { --party-turn: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  #hubPlayerScreen.is-party .hub-party-layer *, #hubPlayerScreen.is-party .hub-player-art-stage, #hubPlayerScreen #hubPartyMode[aria-pressed="true"] { animation: none !important; }
  #hubPlayerScreen.is-party .party-floor { opacity: .5; }
  #hubPlayerScreen.is-party .party-eq span { transform: scaleY(.4); }
}

/* ---------- Vinyle : la pochette entière devient l'étiquette du disque (avant, elle était juste rognée au centre) ---------- */
#hubPlayerScreen.is-vinyl .hub-player-art img { position: absolute; inset: 18%; width: 64%; height: 64%; border-radius: 50%; clip-path: none; box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), 0 0 0 5px rgba(255, 255, 255, .05); }
#hubPlayerScreen.is-vinyl .hub-player-art { touch-action: none; cursor: grab; }
#hubPlayerScreen.is-vinyl.is-scratching .hub-player-art { cursor: grabbing; transform: scale(.985); }
#hubPlayerScreen.is-vinyl.is-scratching .hub-player-art img { animation: none !important; will-change: transform; }
#hubPlayerScreen.is-vinyl .hub-player-art::after { background: radial-gradient(circle, #0c0d10 0 3.2%, transparent 3.4% 32%, rgba(255, 255, 255, .07) 32.4%, transparent 33%), conic-gradient(from 30deg, transparent 0 10%, rgba(255, 255, 255, .08) 14%, transparent 20% 60%, rgba(255, 255, 255, .06) 64%, transparent 70%); }