/* =====================================================================
   widgets.css — roue des récompenses et lecteur musique
   ===================================================================== */

/* ---------- ROUE ---------- */
#wheelStage{display:flex;flex-direction:column;align-items:center;gap:18px;}
.wheel-wrap{position:relative;width:260px;height:260px;}
.wheel-pointer{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:14px solid transparent;border-right:14px solid transparent;
  border-top:22px solid var(--neon);z-index:5;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
#wheel{
  width:260px;height:260px;border-radius:50%;position:relative;
  border:6px solid var(--night2);box-shadow:0 0 30px rgba(255,179,71,.2);
  transition:transform 4s cubic-bezier(.15,.6,.15,1);
  background:var(--night2);
}
.wheel-label{
  position:absolute;left:50%;top:50%;transform-origin:0 0;
  font-size:.68rem;font-weight:800;color:#1a1030;width:90px;text-align:right;
  padding-right:10px;pointer-events:none;
}
.wheel-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:var(--night2);
  border:3px solid var(--neon);display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;z-index:4;
}
#spinResult{font-family:'Bungee';font-size:1.1rem;text-align:center;color:var(--mint);min-height:1.4em;}

/* ---------- MUSIQUE ---------- */
#musicFab{
  position:fixed;bottom:22px;right:22px;width:58px;height:58px;border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--purple));border:none;cursor:pointer;
  font-size:1.5rem;box-shadow:0 6px 24px rgba(192,132,252,.5);z-index:120;
  transition:transform .2s;
}
#musicFab:hover{transform:scale(1.1) rotate(8deg);}
#musicFab.playing{animation:fabPulse 1.6s ease infinite;}
@keyframes fabPulse{0%,100%{box-shadow:0 6px 24px rgba(192,132,252,.5)}50%{box-shadow:0 6px 34px rgba(255,143,171,.8)}}

.music-input-row{display:flex;gap:8px;margin-bottom:14px;}
#musicUrl{
  flex:1;padding:11px 14px;border-radius:14px;background:var(--night2);border:2px solid var(--border-soft);
  color:var(--text);font-weight:700;font-size:.85rem;outline:none;min-width:0;font-family:'Nunito';
}
#musicUrl:focus{border-color:var(--pink);}
#musicBtn{
  padding:0 16px;border-radius:14px;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--pink),var(--purple));color:#1a1030;
  font-family:'Bungee';font-size:.8rem;
}
#ytwrap{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border-radius:14px;overflow:hidden;margin-bottom:12px;
}
#ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.player-controls{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.pc-btn{
  background:var(--night2);border:2px solid #4a3670;border-radius:12px;color:var(--text);
  font-size:1rem;cursor:pointer;width:40px;height:38px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s, border-color .2s;
}
.pc-btn:hover{transform:scale(1.1);border-color:var(--pink);}
.pc-btn.playing{border-color:var(--pink);background:rgba(255,143,171,.12);}
#trackTitle{
  flex:1;font-weight:800;font-size:.8rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;min-width:0;
}
#trackTitle .note{display:inline-block;margin-right:5px;animation:noteBounce 1s ease infinite;}
@keyframes noteBounce{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-3px) rotate(5deg)}}

#playlistPanel{max-height:220px;overflow-y:auto;border-top:2px solid var(--night2);padding-top:10px;}
.pl-item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;
  font-size:.8rem;font-weight:700;transition:background .15s;
}
.pl-item:hover{background:var(--night2);}
.pl-item.current{background:rgba(255,143,171,.15);color:var(--pink);font-weight:800;}
.pl-idx{width:22px;color:var(--muted);font-weight:800;font-size:.75rem;}
.pl-hint{color:var(--muted);font-size:.72rem;text-align:center;padding:10px;}